/* ═══════════════════════════════════════════════════════════════
   ALP WEB STUDIO: light editorial studio site
   Layout and motion structure modelled on lorolabs.ai.
   Palette, type, and imagery are Alp's: bone paper, deep ink,
   terracotta, mountains.
   Prototype: hand-written, no build step.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Paper */
  --paper:#F6F2EC;
  --paper-2:#EFEAE2;
  --paper-3:#E3DACB;

  /* Ink */
  --ink:#1A2436;
  --ink-deep:#0E1520;
  --ink-soft:#4C5568;
  --ink-mute:#5C6580;

  /* Terracotta, the single accent.
     --rust is the brand orange and is used for fills, rules, icons and
     other large or non-text marks, where 3:1 applies.
     --rust-deep carries anything text-sized, where 4.5:1 applies. */
  --rust:#B8715A;
  --rust-deep:#8A4E3B;
  --rust-dark:#7E4634;
  --rust-hi:#C98A72;
  --glacier:#F2BBA0;
  --rust-tint:rgba(184,113,90,.12);
  --on-rust:#F6F2EC;

  --gold:#B87E0C;

  /* Wavy topographic contour texture, carried over from alpwebstudio.com.
     --topo-ink sits on light bands, --topo-dark on ink bands. */
  --topo-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='760' viewBox='0 0 1200 760'%3E%3Cg fill='none' stroke='%23F4EFE6' stroke-width='1.4' stroke-opacity='0.05'%3E%3Cpath d='M-20 120 C 260 40 520 170 820 90 C 1000 42 1120 84 1220 120'/%3E%3Cpath d='M-20 158 C 260 78 520 208 820 128 C 1000 80 1120 122 1220 158'/%3E%3Cpath d='M-20 196 C 260 116 520 246 820 166 C 1000 118 1120 160 1220 196'/%3E%3Cpath d='M-20 340 C 240 268 560 400 840 320 C 1020 262 1120 306 1220 348'/%3E%3Cpath d='M-20 384 C 240 312 560 444 840 364 C 1020 306 1120 350 1220 392'/%3E%3Cpath d='M-20 560 C 260 480 520 620 820 540 C 1020 482 1130 526 1220 566'/%3E%3Cpath d='M-20 604 C 260 524 520 664 820 584 C 1020 526 1130 570 1220 610'/%3E%3Cpath d='M-20 648 C 260 568 520 708 820 628 C 1020 570 1130 614 1220 654'/%3E%3C/g%3E%3C/svg%3E");
  --topo-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='760' viewBox='0 0 1200 760'%3E%3Cg fill='none' stroke='%2317191E' stroke-width='1.4' stroke-opacity='0.05'%3E%3Cpath d='M-20 120 C 260 40 520 170 820 90 C 1000 42 1120 84 1220 120'/%3E%3Cpath d='M-20 158 C 260 78 520 208 820 128 C 1000 80 1120 122 1220 158'/%3E%3Cpath d='M-20 196 C 260 116 520 246 820 166 C 1000 118 1120 160 1220 196'/%3E%3Cpath d='M-20 340 C 240 268 560 400 840 320 C 1020 262 1120 306 1220 348'/%3E%3Cpath d='M-20 384 C 240 312 560 444 840 364 C 1020 306 1120 350 1220 392'/%3E%3Cpath d='M-20 560 C 260 480 520 620 820 540 C 1020 482 1130 526 1220 566'/%3E%3Cpath d='M-20 604 C 260 524 520 664 820 584 C 1020 526 1130 570 1220 610'/%3E%3Cpath d='M-20 648 C 260 568 520 708 820 628 C 1020 570 1130 614 1220 654'/%3E%3C/g%3E%3C/svg%3E");

  /* Hairlines on paper */
  --line:rgba(26,36,54,.13);
  --line-2:rgba(26,36,54,.22);
  --line-3:rgba(26,36,54,.34);

  /* Dark bands */
  --band:#0E1520;
  --on-ink:#F6F2EC;
  --on-ink-2:rgba(246,242,236,.74);
  --on-ink-3:rgba(246,242,236,.52);
  --line-onink:rgba(246,242,236,.16);
  --line-onink-2:rgba(246,242,236,.28);

  /* Type: Alp Web Studio's own stack */
  --f-display:'Bricolage Grotesque',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --t-hero:clamp(2.5rem,4.6vw,4.3rem);
  --t-statement:clamp(2rem,5.6vw,4.6rem);
  --t-h2:clamp(2.1rem,4.8vw,3.8rem);
  --t-h3:clamp(1.18rem,1.9vw,1.48rem);
  --t-lead:clamp(1.02rem,1.3vw,1.18rem);
  --t-label:.7rem;
  --t-stat:clamp(2.8rem,6vw,4.8rem);

  /* Rhythm */
  --sp:clamp(88px,12vw,164px);
  --wrap:1240px;
  --gutter:24px;
  --nav-h:74px;
  --r-sm:8px; --r:14px; --r-lg:20px; --r-xl:28px; --pill:9999px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(0,0,.2,1);
}

/* ───────── Base ───────── */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--f-body);
  background:var(--paper);
  color:var(--ink-soft);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{font-family:var(--f-display);color:var(--ink);margin:0;font-weight:700;}
h1{font-size:var(--t-hero);line-height:1;letter-spacing:-.032em;}
h2{font-size:var(--t-h2);line-height:1;letter-spacing:-.032em;}
h3{font-size:var(--t-h3);line-height:1.22;letter-spacing:-.018em;font-weight:600;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
::selection{background:var(--rust-deep);color:var(--on-rust);}
:focus-visible{outline:2px solid var(--rust-deep);outline-offset:3px;border-radius:4px;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.section{padding:var(--sp) 0;position:relative;}
[id]{scroll-margin-top:calc(var(--nav-h) + 28px);}
.tint{background:var(--paper-2);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ───────── Type devices ───────── */
.label{
  display:inline-block;
  font-family:var(--f-mono);font-size:var(--t-label);font-weight:400;
  text-transform:uppercase;letter-spacing:.22em;color:var(--ink-mute);
  margin:0 0 22px;
}
.lead{font-size:var(--t-lead);color:var(--ink-soft);max-width:62ch;line-height:1.64;}
.accent{color:var(--rust-deep);}
.head{max-width:900px;margin-bottom:clamp(44px,5.5vw,74px);}
.head .lead{margin-top:24px;}
.note{font-size:.93rem;color:var(--ink-mute);}
.note a{color:var(--rust-deep);}

.sweep{
  position:relative;display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--f-mono);font-size:.76rem;
  text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink);text-decoration:none;padding-bottom:8px;
}
.sweep::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--rust);transition:width .45s var(--ease);
}
.sweep:hover::after{width:100%;}
.sweep svg{width:13px;height:13px;transition:transform .35s var(--ease);}
.sweep:hover svg{transform:translateX(5px);}
.sweep:hover{color:var(--rust-deep);}
.on-ink .sweep{color:var(--on-ink);}
.on-ink .sweep:hover{color:var(--on-ink);}
.on-ink .sweep::after{background:var(--glacier);}

/* ───────── Buttons ───────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--f-body);font-weight:600;font-size:.97rem;line-height:1;
  padding:16px 28px;border-radius:var(--pill);
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.btn svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn--primary{background:var(--rust-deep);color:var(--on-rust);}
.btn--primary:hover{background:var(--rust-dark);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-3);}
.btn--ghost:hover{border-color:var(--ink);background:rgba(26,36,54,.05);transform:translateY(-2px);}
.btn--lg{padding:18px 34px;font-size:1.02rem;}
.btn--block{display:flex;width:100%;}
.on-ink .btn--ghost{color:var(--on-ink);border-color:var(--line-onink-2);}
.on-ink .btn--ghost:hover{border-color:var(--on-ink);background:rgba(246,242,236,.1);}

/* ═════════ MOTION SYSTEM ═════════
   Everything that hides content is scoped to .js, a class an inline script in
   <head> sets before first paint. Only a page that can un-hide content is
   allowed to hide it, so a failed, blocked or disabled script leaves the site
   readable instead of blank. */
/* <picture> is a wrapper for format negotiation, not a layout box. Taking it
   out of the box tree keeps every existing `.x img` rule working unchanged. */
picture{display:contents;}

/* Entrance timings are deliberately short. At the old .95s, with a 90ms stagger
   between siblings, the last card in a row was still resolving most of a second
   after it had been sat on screen, which read as the page lagging rather than as
   motion. Halved across the board. */
.js [data-reveal]{
  opacity:0;filter:blur(5px);transform:translateY(12px);
  transition:opacity .45s var(--ease-out),filter .45s var(--ease-out),transform .45s var(--ease);
}
[data-reveal].is-in{opacity:1;filter:blur(0);transform:none;}
[data-reveal][data-d="1"]{transition-delay:.05s;}
[data-reveal][data-d="2"]{transition-delay:.1s;}
[data-reveal][data-d="3"]{transition-delay:.15s;}
[data-reveal][data-d="4"]{transition-delay:.2s;}
[data-reveal][data-d="5"]{transition-delay:.25s;}

.js .w{
  display:inline-block;opacity:0;filter:blur(6px);transform:translateY(.42em);
  transition:opacity .4s var(--ease-out),filter .4s var(--ease-out),transform .4s var(--ease);
}
.is-in .w,.w.is-in{opacity:1;filter:blur(0);transform:none;}

/* Pages that opt out of the entrance system entirely: content is simply there.
   Used on the guides, where a reader arrives mid-article from search and the
   staged reveal left the body copy blank on first paint. Also covers the
   no-JS-yet window, since .js is what hides these in the first place. */
[data-no-reveal] [data-reveal],
[data-no-reveal] .w{
  opacity:1 !important;filter:none !important;transform:none !important;
  transition:none !important;
}

.progress{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform-origin:0 50%;transform:scaleX(0);background:var(--rust);
}

/* ═════════ NAV ═════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),transform .45s var(--ease);
}
.nav.solid{
  background:rgba(246,242,236,.84);
  backdrop-filter:blur(20px) saturate(1.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);
  border-bottom-color:var(--line);
}
.nav.hide{transform:translateY(-101%);}
/* position:fixed resolves against the viewport only while no ancestor carries a
   transform, a filter or a backdrop-filter. .nav has BOTH triggers: .hide sets a
   transform, and .solid sets a backdrop-filter that stays on for the whole page
   the moment you are more than 12px down. Either one makes .nav the containing
   block, which collapsed the full-screen .nav-menu panel to the header's own
   box — the menu opened about 136px tall instead of filling the viewport.
   .solid is why it survived scrolling down AND back up.
   Clearing all three while the menu is open, plus the transition so nothing can
   interpolate back into a matrix, keeps the panel measured against the viewport.
   The nav is painted flat here anyway, so there is no blur left to lose.
   Must stay after .nav.hide and .nav.solid: equal specificity, order decides. */
.nav.menu-open{
  transform:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  filter:none;
  background:var(--paper);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.nav .wrap{display:flex;align-items:center;gap:20px;}
.brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0;}
.brand .mark{width:29px;height:25px;flex-shrink:0;transition:transform .5s var(--ease);}
.brand:hover .mark{transform:translateY(-2px);}
.brand-name{display:flex;flex-direction:column;line-height:1.14;}
.brand-name .b1{font-family:var(--f-display);font-weight:700;font-size:1.04rem;color:var(--ink);letter-spacing:-.03em;}
.brand-name .b2{font-family:var(--f-mono);font-size:.57rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-mute);}

.nav-menu{display:contents;}
.nav-links{
  display:flex;align-items:center;gap:32px;
  position:absolute;left:50%;transform:translateX(-50%);
}
/* Direct children only: the dropdown's own links live inside .nav-links and
   must not inherit the top-level sizing or the underline sweep. */
.nav-links > a{
  position:relative;font-size:.92rem;color:var(--ink-soft);text-decoration:none;
  display:inline-flex;align-items:center;gap:.45em;padding:4px 0;
  transition:color .3s var(--ease);
}
.nav-links > a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--rust);transition:width .4s var(--ease);
}
.nav-links > a:hover{color:var(--ink);}
.nav-links > a:hover::after{width:100%;}
.nav-badge{
  font-family:var(--f-mono);font-size:.52rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--rust-deep);background:var(--rust-tint);border:1px solid rgba(184,113,90,.3);
  padding:3px 7px;border-radius:var(--pill);white-space:nowrap;flex-shrink:0;
}
.nav-right{display:flex;align-items:center;gap:14px;margin-left:auto;}
.nav-meta{display:none;} /* menu-panel only, see the mobile block */
.nav-phone{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);
  color:var(--ink);text-decoration:none;flex-shrink:0;
  transition:border-color .3s var(--ease),color .3s var(--ease),background .3s var(--ease);
}
.nav-phone svg{width:16px;height:16px;}
.nav-phone:hover{border-color:var(--rust);color:var(--rust-deep);background:var(--rust-tint);}
.nav-cta{
  display:inline-flex;align-items:center;gap:.5em;
  background:var(--ink);color:var(--paper);font-weight:600;font-size:.88rem;
  padding:13px 24px;border-radius:var(--pill);text-decoration:none;white-space:nowrap;
  transition:background .3s var(--ease);
}
.nav-cta svg{width:12px;height:12px;transition:transform .3s var(--ease);}
.nav-cta:hover{background:var(--rust-deep);}
.nav-cta:hover svg{transform:translateX(3px);}

.nav-toggle{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  width:42px;height:42px;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;
}
.nav-toggle span{display:block;width:21px;height:1.6px;background:var(--ink);transition:transform .35s var(--ease),opacity .35s var(--ease);}
.nav-toggle.open span:nth-child(1){transform:translateY(6.6px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg);}

/* ═════════ HERO ═════════ */
.hero{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:calc(var(--nav-h) + 78px) 0 0;overflow:hidden;background:var(--paper);
}
.hero-media{position:absolute;inset:-8% 0 -8%;will-change:transform;}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 55%;}
/* The hero keeps its scrim gradients: they are what makes dark ink legible
   over the photograph. Every other section uses flat fills. */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(94deg,rgba(246,242,236,.96) 0%,rgba(246,242,236,.86) 40%,rgba(246,242,236,.66) 70%,rgba(246,242,236,.5) 100%),
    linear-gradient(180deg,rgba(246,242,236,.55) 0%,rgba(246,242,236,.2) 26%,rgba(246,242,236,.72) 86%,var(--paper) 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%;}
.hero-grid{
  display:grid;grid-template-columns:1.26fr .74fr;
  gap:clamp(30px,3.6vw,56px);align-items:center;
  padding-bottom:clamp(44px,5vw,70px);
}

/* min-width:0 keeps long headline words from forcing the grid wider */
.hero-inner{min-width:0;}

.hero-rating{
  display:inline-flex;align-items:center;gap:11px;margin-bottom:26px;
  padding:9px 17px 9px 15px;border-radius:var(--pill);
  border:1px solid var(--line-2);background:rgba(246,242,236,.86);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  text-decoration:none;color:var(--ink);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.hero-rating:hover{border-color:var(--rust);background:var(--paper);}
.hero-rating .g{width:16px;height:16px;flex-shrink:0;}
.hero-rating .stars{display:inline-flex;gap:2px;color:var(--gold);}
.hero-rating .stars svg{width:14px;height:14px;}
.hero-rating .txt{font-size:.84rem;color:var(--ink-soft);white-space:nowrap;}
.hero-rating .txt b{color:var(--ink);font-weight:700;}

.hero h1{margin-bottom:24px;max-width:14ch;}
.hero .lead{font-size:clamp(1.02rem,1.25vw,1.16rem);max-width:48ch;}
.hero-tag{
  display:flex;flex-wrap:wrap;align-items:center;gap:.75em;margin:22px 0 30px;
  font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute);
}
.hero-tag .sep{color:var(--rust);}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;}

/* Portfolio reel: two horizontal tracks of real client sites.
   Cards sit at desktop proportions (4:3, matching the captures) and are wider
   than the column, so the strip reads as full browser windows drifting past
   rather than as phone screens. */
.reel{
  /* One source of truth for card width. The image height is derived from it so
     the 4:3 shape never depends on aspect-ratio: the track is width:max-content
     (needed for the -50% loop), and under max-content sizing the browser would
     otherwise size the image from its intrinsic 960x720 and blow the row up. */
  --reel-w:clamp(190px,19vw,250px);
  position:relative;display:flex;flex-direction:column;gap:13px;
  width:100%;min-width:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 84%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 84%,transparent);
}
.reel-row{overflow:hidden;}
/* Duration is per row, not shared, because the rows no longer hold the same
   number of cards: row one carries four sites and row two three. The track
   translates by half its own width either way, so speed on screen is
   (cards x card width) / duration. Keep them in step when a site is added:
   69s over four cards matches the 52s over three this row started at. */
.reel-track{display:flex;flex-direction:row;align-items:flex-start;width:max-content;gap:13px;animation:reelLeft 69s linear infinite;}
.reel-row:nth-child(2) .reel-track{animation-name:reelRight;animation-duration:60s;}
/* The cards are not links, so there is nothing to stop the reel for: it runs
   continuously, including under the cursor. */
@keyframes reelLeft{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes reelRight{from{transform:translateX(-50%);}to{transform:translateX(0);}}
/* Sized so roughly 1.5 cards show per row: the column is ~0.74fr of the wrap,
   and the card is about two thirds of that. 4:3 keeps the desktop capture shape,
   so two rows come in near the height of the copy beside them. */
.reel-card{
  flex-shrink:0;width:var(--reel-w);
  display:block;overflow:hidden;
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--paper);
  box-shadow:0 10px 24px -18px rgba(26,36,54,.5);
}
.reel-bar{
  display:flex;align-items:center;gap:4px;padding:6px 10px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.reel-bar i{width:4.5px;height:4.5px;border-radius:50%;background:var(--line-3);flex-shrink:0;}
.reel-bar span{
  font-family:var(--f-mono);font-size:.5rem;letter-spacing:.06em;color:var(--ink-mute);
  margin-left:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Explicit 4:3 box: width and height both resolve from --reel-w */
.reel-card img{display:block;width:100%;height:calc(var(--reel-w) * 0.75);object-fit:cover;object-position:top center;}

.hero-strip{position:relative;z-index:2;border-top:1px solid var(--line);background:var(--paper);}
.hero-strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.hero-strip .cell{padding:26px 24px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:7px;}
.hero-strip .cell:first-child{border-left:0;padding-left:0;}
.hero-strip .v{font-family:var(--f-display);font-weight:700;font-size:1.34rem;color:var(--ink);letter-spacing:-.03em;}
.hero-strip .k{font-family:var(--f-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute);}
.hero-strip a.v{text-decoration:none;transition:color .3s var(--ease);}
.hero-strip a.v:hover{color:var(--rust-deep);}

/* ═════════ MARQUEE ═════════ */
.marq{
  padding:clamp(34px,4vw,52px) 0;background:var(--paper-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;
}
.marq-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px;}
.marq-label{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.22em;color:var(--ink-mute);}
.rate{display:inline-flex;align-items:center;gap:.6em;font-size:.85rem;color:var(--ink-soft);}
.stars{display:inline-flex;gap:2px;color:var(--gold);}
.stars svg{width:14px;height:14px;}
.marq-names{position:relative;width:100vw;margin-left:calc(50% - 50vw);}
.marq-track{display:flex;width:max-content;animation:marquee 34s linear infinite;}
.marq:hover .marq-track{animation-play-state:paused;}
/* FOUR copies of .marq-set, so the shift is a quarter of the track.
   The logos are far narrower than the names they replaced: one set no longer
   fills the viewport, and with the old two copies the -50% shift ran the track
   off the right edge and left a visible gap before it snapped back. The rule is
   that (copies - 1) x set width must exceed the viewport; the set tops out
   around 1320px once the clamps max out, so four copies hold to ~3960px and
   cover an unscaled 4K window. Keep the copy count and this percentage in
   step: N copies means -(100/N)%. */
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-25%);}}
/* gap and padding-right must stay equal, or the seam between the last logo of
   one set and the first of the next reads as a different spacing. */
.marq-set{display:flex;align-items:center;gap:clamp(56px,7vw,110px);padding-right:clamp(56px,7vw,110px);}
/* Client logos rather than set names. Two caps do the levelling: the row height
   holds the square marks in line, and the width cap stops a wide wordmark such
   as JC AutoWorks from running four times the length of the rest. Desaturated
   to the same weight the names carried, and restored to full colour on the
   five that link out. */
.marq-logo{
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  height:clamp(46px,5vw,70px);
  text-decoration:none;
  filter:grayscale(1);opacity:.62;
  transition:filter .4s var(--ease),opacity .4s var(--ease);
}
/* height:100% rather than max-height:auto. The row height is definite, so the
   box resolves before the file arrives: a lazily-loaded logo sized from its
   intrinsic dimensions would start at 0x0, never intersect the viewport, and
   so never load at all. object-fit keeps the aspect once max-width bites. */
.marq-logo img{
  display:block;height:100%;width:auto;
  max-width:clamp(124px,13vw,190px);
  object-fit:contain;
}
a.marq-logo:hover,a.marq-logo:focus-visible{filter:none;opacity:1;}

/* ═════════ SERVICE CARDS ═════════ */
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.svc-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);text-decoration:none;
  transition:background .4s var(--ease);
}
.svc-card:hover{background:var(--paper-2);}
/* Each card carries its own line drawing so the six read as six things */
.svc-art{
  position:relative;background:var(--paper-2);border-bottom:1px solid var(--line);
  padding:22px 24px 0;overflow:hidden;
  transition:background .4s var(--ease);
}
.svc-card:hover .svc-art{background:var(--paper-3);}
.svc-art svg{width:100%;height:auto;display:block;}
.svc-art .st,.svcx-art .st{stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.55;}
.svc-art .sr,.svcx-art .sr{stroke:var(--rust-deep);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.svc-art .fr,.svcx-art .fr{fill:var(--rust);opacity:.9;}
.svc-art .fp,.svcx-art .fp{fill:var(--paper);}
.svc-art .fi,.svcx-art .fi{fill:var(--ink);opacity:.12;}
.svc-body{display:flex;flex-direction:column;flex:1;padding:clamp(24px,2.6vw,32px);}
.svc-idx{
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;color:var(--ink-mute);
  margin-bottom:14px;
}
.svc-card h3{margin-bottom:11px;transition:color .35s var(--ease);}
.svc-card:hover h3{color:var(--rust-deep);}
.svc-card p{font-size:.93rem;color:var(--ink-soft);margin-bottom:22px;line-height:1.58;}
.svc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;
  padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);
}
.svc-foot svg{width:15px;height:15px;color:var(--ink-mute);transition:transform .4s var(--ease),color .4s var(--ease);flex-shrink:0;}
.svc-card:hover .svc-foot svg{transform:translateX(5px);color:var(--rust-deep);}
.svc-flag{
  position:absolute;top:16px;right:18px;z-index:2;
  font-family:var(--f-mono);font-size:.54rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--on-rust);background:var(--rust-deep);
  padding:4px 10px;border-radius:var(--pill);
}

/* ═════════ BUILD SHEET ═════════ */
.sheet{display:grid;grid-template-columns:.74fr 1.26fr;gap:clamp(40px,5vw,78px);align-items:start;}
.sheet-aside{position:sticky;top:calc(var(--nav-h) + 44px);}
.sheet-aside .lead{margin-top:22px;}
.sheet-note{
  margin-top:28px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--ink-mute);line-height:1.9;
}
.sheet-rows{border-top:1px solid var(--line-2);}
/* Same treatment as .svcx-row: the inward slide runs on a transform rather than
   on padding-left, so the row does not re-lay-out on every frame of the hover. */
.sheet-row{
  display:grid;grid-template-columns:52px 1fr;align-items:baseline;
  padding:26px 0 26px 0;border-bottom:1px solid var(--line);
  border-left:2px solid transparent;
  transition:border-left-color .35s var(--ease),background .35s var(--ease);
}
.sheet-row > *{transition:transform .35s var(--ease);}
.sheet-row:hover{border-left-color:var(--rust);background:var(--paper);}
.sheet-row:hover > *{transform:translateX(14px);}
.sheet-i{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;color:var(--rust-deep);}
.sheet-t{
  display:block;font-family:var(--f-display);font-weight:600;font-size:1.08rem;
  color:var(--ink);letter-spacing:-.02em;margin-bottom:7px;
}
.sheet-d{font-size:.94rem;color:var(--ink-soft);line-height:1.6;max-width:56ch;}

/* ═════════ STATEMENT BANDS (dark) ═════════ */
.statement{
  position:relative;padding:clamp(110px,15vw,210px) 0;overflow:hidden;isolation:isolate;
  background:var(--band);
}
.statement img{
  position:absolute;inset:0;width:100%;height:120%;object-fit:cover;z-index:-2;
  filter:grayscale(1) brightness(.52);will-change:transform;
}
.statement::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--topo-dark) center/cover, rgba(14,21,32,.72);}
.statement h2{
  font-size:var(--t-statement);font-weight:700;color:var(--on-ink);
  text-transform:uppercase;line-height:1.02;letter-spacing:-.018em;max-width:17ch;
}
.statement h2 em{font-style:normal;color:var(--glacier);}
.js .statement h2 .w{opacity:.2;filter:none;transform:none;transition:opacity .5s var(--ease);}
.statement h2 .w.on{opacity:1;}
.statement-foot{
  margin-top:42px;display:flex;flex-wrap:wrap;gap:14px 30px;
  font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--on-ink-2);
}
.statement-foot span{display:inline-flex;align-items:center;gap:.6em;}
.statement-foot span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rust);}

/* ═════════ WORK ═════════ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.qcard{
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.qcard:hover{border-color:var(--rust);transform:translateY(-5px);}
.qshot{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--paper-3);}
.qshot img{
  width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .8s var(--ease);
}
.qcard:hover .qshot img{transform:scale(1.05);}
.qtag{
  position:absolute;top:14px;left:14px;z-index:2;
  font-family:var(--f-mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.14em;
  background:var(--paper);border:1px solid var(--line-2);
  color:var(--ink);padding:5px 11px;border-radius:var(--pill);
}
.qbody{padding:28px;display:flex;flex-direction:column;flex:1;}
.qbody blockquote{margin:16px 0 24px;font-size:1.03rem;color:var(--ink);line-height:1.56;flex:1;font-family:var(--f-display);font-weight:500;letter-spacing:-.012em;}
.qwho{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding-top:20px;border-top:1px solid var(--line);}
.qwho .nm{font-family:var(--f-display);font-weight:600;color:var(--ink);font-size:.97rem;}
.qwho .rl{font-size:.81rem;color:var(--ink-mute);line-height:1.4;}

.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(56px,7vw,92px);border-top:1px solid var(--line);}
.stats > div{padding:40px 26px 0;border-left:1px solid var(--line);}
.stats > div:first-child{border-left:0;padding-left:0;}
.stats .v{font-family:var(--f-display);font-weight:700;font-size:var(--t-stat);line-height:.92;letter-spacing:-.045em;color:var(--ink);margin-bottom:16px;}
/* A rating anyone can check is worth more than one they have to believe. */
.stats .v a,.hero-strip a.v{color:inherit;text-decoration:none;border-bottom:2px solid var(--rust);}
.stats .v a:hover,.hero-strip a.v:hover{color:var(--rust-deep);}
.stats .k{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute);}
.foot-link{margin-top:48px;}

/* ═════════ STICKY STACKED CARDS ═════════ */
.stack{position:relative;}
.stack-card{
  position:sticky;display:grid;grid-template-columns:1.05fr .95fr;
  min-height:clamp(400px,54vh,530px);margin-bottom:26px;
  border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  background:var(--paper);isolation:isolate;
  transition:transform .5s var(--ease),opacity .5s var(--ease);
}
.stack-card:nth-child(1){top:calc(var(--nav-h) + 40px);}
.stack-card:nth-child(2){top:calc(var(--nav-h) + 58px);}
.stack-card:nth-child(3){top:calc(var(--nav-h) + 76px);}
.stack-card:nth-child(4){top:calc(var(--nav-h) + 94px);margin-bottom:0;}
.stack-body{padding:clamp(34px,4vw,58px);display:flex;flex-direction:column;justify-content:center;background:var(--paper);}
.stack-idx{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;color:var(--rust-deep);margin-bottom:24px;}
.stack-body h3{font-size:clamp(1.5rem,2.7vw,2.2rem);line-height:1.08;letter-spacing:-.028em;margin-bottom:18px;font-weight:700;}
.stack-body p{font-size:1rem;color:var(--ink-soft);max-width:46ch;}
.stack-media{position:relative;overflow:hidden;background:var(--paper-3);}
.stack-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease);}
.stack-card:hover .stack-media img{transform:scale(1.05);}

/* ═════════ COMPARISON ═════════ */
.cmp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.cmp{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,2.8vw,36px);
  transition:border-color .4s var(--ease),transform .4s var(--ease);
}
.cmp:hover{transform:translateY(-4px);}
.cmp.alp{background:var(--paper-2);border-color:var(--rust);}
.cmp-name{font-family:var(--f-display);font-weight:700;font-size:1.16rem;color:var(--ink);letter-spacing:-.028em;}
.cmp.alp .cmp-name{color:var(--rust-deep);}
.cmp-tag{
  font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-mute);margin:9px 0 22px;padding-bottom:20px;border-bottom:1px solid var(--line);
}
.cmp-row{padding:16px 0;border-bottom:1px solid var(--line);}
.cmp-row:last-child{border-bottom:0;padding-bottom:0;}
.cmp-k{display:block;font-family:var(--f-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute);margin-bottom:7px;}
.cmp-v{display:block;font-size:.93rem;color:var(--ink-soft);line-height:1.55;}
.cmp-v b{color:var(--ink);font-weight:700;}

/* ═════════ PRICING ═════════ */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
.plan{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(28px,3vw,40px);
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.plan:hover{border-color:var(--line-2);transform:translateY(-4px);}
.plan.hot{background:var(--paper-2);border-color:var(--rust);}
.plan-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:1.24rem;color:var(--ink);letter-spacing:-.03em;}
.plan-top .badge{
  font-family:var(--f-mono);font-size:.54rem;text-transform:uppercase;letter-spacing:.14em;font-weight:400;
  color:var(--on-rust);background:var(--rust-deep);padding:4px 10px;border-radius:var(--pill);
}
.plan .tag{font-size:.9rem;color:var(--ink-soft);margin-top:12px;}
.plan-for{font-size:.85rem;color:var(--ink-mute);margin:10px 0 0;}
.plan-for a{color:var(--rust-deep);}
.price{display:flex;align-items:baseline;gap:.4em;margin-top:30px;}
.price .amt{font-family:var(--f-display);font-weight:700;font-size:clamp(2.5rem,4vw,3.3rem);line-height:1;letter-spacing:-.045em;color:var(--ink);}
.price .per{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-mute);}
.upfront{display:inline-block;margin-top:12px;font-size:.84rem;color:var(--rust-deep);}
.rule{height:1px;background:var(--line);margin:28px 0;}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.plan li{display:flex;gap:11px;font-size:.91rem;color:var(--ink-soft);line-height:1.5;}
.plan li svg{flex-shrink:0;margin-top:4px;color:var(--rust);}
.plan-lm{margin-top:26px;padding:22px;background:var(--rust-tint);border:1px solid rgba(184,113,90,.24);border-radius:var(--r);}
.plan-lm .lm-l{
  display:flex;align-items:center;gap:.55em;margin-bottom:18px;
  font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--rust-deep);
}
.plan-lm .lm-l svg{width:14px;height:14px;}
.plan .btn{margin-top:30px;}
.fine{display:block;text-align:center;margin-top:15px;font-size:.77rem;color:var(--ink-mute);}

.promise{
  margin-top:clamp(44px,5vw,70px);padding:clamp(30px,3.2vw,44px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,3vw,46px);align-items:center;
}
.promise-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--rust-tint);color:var(--rust-deep);border:1px solid rgba(184,113,90,.3);}
.promise-ic svg{width:26px;height:26px;}
.promise h3{margin-bottom:18px;}
.promise-list{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:12px 26px;}
.promise-list li{display:flex;gap:9px;font-size:.9rem;color:var(--ink);align-items:center;}
.promise-list li svg{flex-shrink:0;color:var(--rust);}
.promise p{font-size:.94rem;color:var(--ink-soft);margin:0;}

/* ═════════ INDUSTRIES ═════════ */
.ind{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ind-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);
  text-decoration:none;
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.ind-card:hover{border-color:var(--rust);transform:translateY(-4px);}
.ind-shot{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--paper-3);border-bottom:1px solid var(--line);}
.ind-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .8s var(--ease);}
.ind-card:hover .ind-shot img{transform:scale(1.05);}
.ind-body{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px;}
.ind-name{font-family:var(--f-display);font-weight:600;font-size:1.06rem;color:var(--ink);letter-spacing:-.025em;}
.ind-who{display:block;font-family:var(--f-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-mute);margin-top:5px;}
.ind-go{flex-shrink:0;color:var(--ink-mute);transition:transform .35s var(--ease),color .35s var(--ease);}
.ind-go svg{width:15px;height:15px;display:block;}
.ind-card:hover .ind-go{transform:translateX(4px);color:var(--rust-deep);}
/* The client count is not a multiple of three and will not stay one, so a
   trailing card can end up alone on the last row. Centre it there rather than
   letting it hang off the left edge under a full row. Three columns only: the
   960px breakpoint below drops to two, where 3n+1 no longer means "alone". */
@media (min-width:961px){
  .ind > :last-child:nth-child(3n+1){grid-column:2;}
}

/* ═════════ WORK MOSAIC (home) ═════════
   The portfolio tiles and the client quotes share one grid, so each review
   sits beside the site it is about instead of repeating it a section later.
   A quote cell is deliberately imageless: the change in texture is what gives
   the grid its rhythm. */
.wmix{align-items:stretch;}
.wq{
  display:flex;flex-direction:column;
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r-lg);
  padding:clamp(22px,2.4vw,30px);
  transition:border-color .4s var(--ease),background .4s var(--ease);
}
.wq:hover{border-color:var(--rust);background:var(--paper);}
.wq blockquote{
  margin:15px 0 22px;flex:1;
  font-family:var(--f-display);font-weight:500;font-size:1.02rem;
  line-height:1.55;letter-spacing:-.012em;color:var(--ink);
}
.wq-who{display:flex;flex-direction:column;gap:4px;padding-top:18px;border-top:1px solid var(--line);}
.wq-who .nm{font-family:var(--f-display);font-weight:600;font-size:.97rem;color:var(--ink);}
.wq-who .rl{font-size:.81rem;color:var(--ink-mute);line-height:1.4;}
.wq-go{margin-top:16px;align-self:flex-start;font-size:.84rem;}

/* ═════════ LEAD MACHINE ═════════ */
.lm{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.lm-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(44px,6vw,84px);align-items:center;}
.lm-body .lead{margin:24px 0 34px;}
.lm-cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;}
.trades{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2);}
.trades li{border-bottom:1px solid var(--line-2);}
.trades a{
  display:flex;align-items:center;gap:14px;padding:21px 4px;text-decoration:none;color:var(--ink-soft);
  font-family:var(--f-display);font-size:1.16rem;font-weight:600;letter-spacing:-.02em;
  transition:color .35s var(--ease);
}
/* Only the name slides: the index and the chevron are right-aligned, so moving
   them too would just close the gap between them. */
.trades .tn{flex:1;transition:transform .35s var(--ease);}
.trades a:hover .tn{transform:translateX(12px);}
.trades .ti{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;color:var(--ink-mute);}
.trades a::after{
  content:"";width:8px;height:8px;flex-shrink:0;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg);
  opacity:.35;transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.trades a:hover{color:var(--rust-deep);}
.trades a:hover::after{opacity:1;transform:rotate(45deg) translate(2px,-2px);}

/* ═════════ FOUNDER ═════════ */
.founder{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,4vw,58px);align-items:start;}
.founder-pic{position:relative;flex-shrink:0;}
.founder-pic img{width:132px;height:132px;border-radius:50%;object-fit:cover;border:2px solid var(--rust);}
.founder-pic .badge{
  position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);
  font-family:var(--f-mono);font-size:.54rem;text-transform:uppercase;letter-spacing:.14em;
  background:var(--rust-deep);color:var(--on-rust);padding:5px 12px;border-radius:var(--pill);white-space:nowrap;
}
.founder-body h2{margin-bottom:24px;}
.founder-body p{font-size:1rem;color:var(--ink-soft);}

/* ═════════ FAQ ═════════ */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(44px,6vw,88px);align-items:start;}
.faq-aside{position:sticky;top:calc(var(--nav-h) + 44px);}
.faq-contact{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);}
.faq-contact p{font-size:.9rem;color:var(--ink-mute);margin-bottom:14px;}
.faq-contact a{display:block;color:var(--ink);text-decoration:none;font-size:.98rem;margin-bottom:8px;transition:color .3s var(--ease);}
.faq-contact a:hover{color:var(--rust-deep);}
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{display:flex;align-items:flex-start;gap:18px;padding:26px 0;cursor:pointer;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary h3{font-size:1.05rem;font-weight:600;flex:1;transition:color .3s var(--ease);}
.faq summary:hover h3{color:var(--rust-deep);}
.faq .qi{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;color:var(--ink-mute);padding-top:6px;flex-shrink:0;width:44px;}
.faq .plus{
  flex-shrink:0;width:24px;height:24px;display:grid;place-items:center;
  color:var(--ink-mute);font-size:1.15rem;line-height:1;font-family:var(--f-mono);
  transition:transform .4s var(--ease),color .35s var(--ease);
}
.faq details[open] .plus{transform:rotate(45deg);color:var(--rust-deep);}
.faq .ans{margin:0 0 28px;padding-left:62px;font-size:.96rem;color:var(--ink-soft);max-width:66ch;}
.faq .ans a{color:var(--rust-deep);}

/* ═════════ CONTACT (dark closer) ═════════ */
.contact{background:var(--band);}
.contact h2{color:var(--on-ink);}
.contact .label{color:var(--on-ink-3);}
.contact .lead{color:var(--on-ink-2);}
.contact-head{text-align:center;max-width:760px;margin:0 auto clamp(44px,5vw,62px);}
.contact-head h2{font-size:clamp(2.4rem,5.6vw,4.4rem);}
.contact-head .lead{margin:26px auto 0;}
.contact-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.contact .btn--primary{background:var(--rust);color:var(--band);}
.contact .btn--primary:hover{background:var(--glacier);}
.contact-alt{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 28px;margin-top:40px;}
.contact-alt .l{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.18em;color:var(--on-ink-3);}
.contact-alt a{
  display:inline-flex;align-items:center;gap:.55em;color:var(--on-ink);text-decoration:none;font-size:.95rem;
  border-bottom:1px solid var(--line-onink-2);padding-bottom:4px;transition:border-color .3s var(--ease);
}
.contact-alt a svg{width:16px;height:16px;}
.contact-alt a:hover{border-color:var(--on-ink);}

/* Home page: the enquiry happens in the band rather than one click away, so
   the heading moves left and the form sits beside it as a paper card. */
.contact-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(40px,5vw,80px);align-items:start;}
.contact-intro{position:sticky;top:calc(var(--nav-h) + 44px);}
.contact-intro h2{font-size:clamp(2.1rem,3.9vw,3.2rem);margin-bottom:24px;}
.contact-intro .label{display:block;margin-bottom:20px;}
/* A reply-time promise is content, not decoration, so it takes the 4.5:1
   token rather than the 3:1 one the decorative labels use. */
.contact-fine{
  margin-top:22px;font-family:var(--f-mono);font-size:.68rem;
  text-transform:uppercase;letter-spacing:.14em;line-height:1.9;color:var(--on-ink-2);
}
.contact-head .contact-fine{margin:20px auto 0;max-width:56ch;}
.contact-form{min-width:0;}
.contact-split .contact-alt{justify-content:flex-start;margin-top:34px;padding-top:30px;border-top:1px solid rgba(246,242,236,.16);}
@media (max-width:1000px){
  .contact-split{grid-template-columns:1fr;gap:38px;}
  .contact-intro{position:static;}
}

/* ═════════ FOOTER ═════════ */
.footer{background:var(--paper);border-top:1px solid var(--line);padding:clamp(60px,7vw,94px) 0 36px;}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:clamp(24px,2.4vw,40px);}
.footer-nap{display:flex;flex-direction:column;gap:6px;margin:18px 0 0;font-size:.9rem;}
.footer-nap a{color:var(--ink-soft);text-decoration:none;transition:color .3s var(--ease);}
.footer-nap a:hover{color:var(--rust-deep);}
.footer .brand{margin-bottom:22px;}
.footer .tagline{font-size:.9rem;color:var(--ink-mute);max-width:40ch;}
.footer h4{font-family:var(--f-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-mute);margin:0 0 20px;font-weight:400;}
.footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.footer ul a{font-size:.9rem;color:var(--ink-soft);text-decoration:none;transition:color .3s var(--ease);}
.footer ul a:hover{color:var(--rust-deep);}
.footer-bot{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  margin-top:clamp(52px,6vw,78px);padding-top:28px;border-top:1px solid var(--line);
  font-size:.83rem;color:var(--ink-mute);
}
.footer-bot a{color:var(--ink-mute);text-decoration:none;transition:color .3s var(--ease);}
.footer-bot a:hover{color:var(--ink);}

/* ═════════ MOBILE BAR ═════════ */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:10px;padding:11px 14px;
  background:rgba(246,242,236,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .4s var(--ease);
}
.mbar.show{transform:none;}
.mbar a{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:15px;border-radius:var(--pill);text-decoration:none;font-weight:600;font-size:.94rem;}
.mbar svg{width:15px;height:15px;}
.mb-call{border:1px solid var(--line-3);color:var(--ink);}
.mb-go{background:var(--rust-deep);color:var(--on-rust);}

/* ═══════════════════════════════════════════════════════════════
   SUBPAGE COMPONENTS
   Everything below is shared by the interior pages (/services/,
   /work/, /pricing/, /lead-machine/, /guides/, /about/, /contact/,
   /referral/, and the three legal pages). The home page uses none
   of it. Components above this line are reused wherever they fit,
   so these are only the shapes the home page had no need for.
   ═══════════════════════════════════════════════════════════════ */

/* ───────── Page hero ───────── */
.phero{
  position:relative;overflow:hidden;background:var(--paper);
  padding:calc(var(--nav-h) + clamp(58px,7.5vw,102px)) 0 clamp(50px,6vw,86px);
}
.phero-media{position:absolute;inset:-10% 0;will-change:transform;}
.phero-media img{width:100%;height:100%;object-fit:cover;object-position:center 58%;}
/* Same job as the home hero scrim: keep ink legible over a photograph. */
.phero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(96deg,rgba(246,242,236,.97) 0%,rgba(246,242,236,.9) 46%,rgba(246,242,236,.72) 100%),
    linear-gradient(180deg,rgba(246,242,236,.42) 0%,rgba(246,242,236,.22) 38%,rgba(246,242,236,.8) 88%,var(--paper) 100%);
}
.phero .wrap{position:relative;z-index:2;}
.phero-inner{max-width:840px;}
.phero h1{margin-bottom:22px;max-width:18ch;}
.phero .lead{max-width:58ch;}
.phero .hero-cta{margin-top:34px;}
.phero--sm{padding-bottom:clamp(36px,4vw,54px);}
.phero--sm h1{max-width:22ch;}

.crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:.65em;margin-bottom:24px;
  font-family:var(--f-mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.18em;color:var(--ink-mute);
}
.crumb a{color:var(--ink-mute);text-decoration:none;transition:color .3s var(--ease);}
.crumb a:hover{color:var(--rust-deep);}
.crumb .sep{color:var(--line-3);}
.crumb [aria-current]{color:var(--ink);}

/* Current page in the nav. Desktop only: on mobile the ::after is the
   chevron, and stretching it to 100% would deform it. */
.nav-links > a[aria-current="page"]{color:var(--ink);}
@media (min-width:961px){
  .nav-links > a[aria-current="page"]::after{width:100%;}
}

/* ───────── Generic two-column splits ───────── */
.pair{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,5vw,78px);align-items:center;}
.pair--top{align-items:start;}
.split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(44px,6vw,88px);align-items:start;}
.split-aside{position:sticky;top:calc(var(--nav-h) + 44px);}
.info{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);}
.info p{font-size:.9rem;color:var(--ink-mute);margin-bottom:14px;}
.info a{display:block;color:var(--ink);text-decoration:none;font-size:.98rem;margin-bottom:8px;transition:color .3s var(--ease);}
.info a:hover{color:var(--rust-deep);}

/* ───────── Numbered process steps ───────── */
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
}
.steps--3{grid-template-columns:repeat(3,1fr);}
.steps--5{grid-template-columns:repeat(5,1fr);}
.step{
  display:flex;flex-direction:column;background:var(--paper);
  padding:clamp(26px,2.8vw,34px);transition:background .4s var(--ease);
}
.step:hover{background:var(--paper-2);}
.step-i{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;color:var(--rust-deep);margin-bottom:20px;}
.step h3{margin-bottom:11px;}
.step p{font-size:.93rem;color:var(--ink-soft);line-height:1.58;margin:0;}
.step-when{
  margin-top:auto;padding-top:20px;
  font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);
}

/* ───────── One-time add-ons ───────── */
.addons{border-top:1px solid var(--line-2);}
.addon{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;
  padding:26px 0;border-bottom:1px solid var(--line);border-left:2px solid transparent;
  transition:border-left-color .35s var(--ease),background .35s var(--ease);
}
.addon > *{transition:transform .35s var(--ease);}
.addon:hover{border-left-color:var(--rust);background:var(--paper);}
.addon:hover > *{transform:translateX(14px);}
a.addon{text-decoration:none;}
a.addon .addon-w{display:inline-flex;align-items:center;gap:.5em;color:var(--ink);}
a.addon .addon-w svg{width:12px;height:12px;transition:transform .3s var(--ease);}
a.addon:hover .addon-w{color:var(--rust-deep);}
a.addon:hover .addon-w svg{transform:translateX(4px);}
.addon-t{
  display:block;font-family:var(--f-display);font-weight:600;font-size:1.08rem;
  color:var(--ink);letter-spacing:-.02em;margin-bottom:7px;
}
.addon-d{display:block;font-size:.94rem;color:var(--ink-soft);line-height:1.6;max-width:62ch;}
.addon-side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;text-align:right;}
.addon-p{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.12em;color:var(--rust-deep);white-space:nowrap;}
.addon-w{font-family:var(--f-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);white-space:nowrap;}

/* ───────── Guide cards ───────── */
.glist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.gcard{
  display:flex;flex-direction:column;text-decoration:none;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(26px,2.8vw,34px);
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
a.gcard:hover{border-color:var(--rust);transform:translateY(-4px);}
.gtop{
  display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;
  font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute);
}
.gpill{border:1px solid var(--line-2);border-radius:var(--pill);padding:4px 10px;white-space:nowrap;}
.gpill.on{color:var(--rust-deep);border-color:rgba(184,113,90,.3);background:var(--rust-tint);}
.gcard h3{font-size:1.18rem;margin-bottom:12px;transition:color .35s var(--ease);}
a.gcard:hover h3{color:var(--rust-deep);}
.gcard p{font-size:.93rem;color:var(--ink-soft);line-height:1.58;margin-bottom:24px;}
.gfoot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink);
}
.gfoot svg{width:15px;height:15px;color:var(--ink-mute);transition:transform .4s var(--ease),color .4s var(--ease);flex-shrink:0;}
a.gcard:hover .gfoot svg{transform:translateX(5px);color:var(--rust-deep);}
.gcard.soon{background:var(--paper-2);}
.gcard.soon h3,.gcard.soon .gfoot{color:var(--ink-mute);}

/* ───────── Documents: legal pages and guide articles ───────── */
.doc{display:grid;grid-template-columns:262px minmax(0,1fr);gap:clamp(40px,5.5vw,84px);align-items:start;}
.doc-aside{position:sticky;top:calc(var(--nav-h) + 44px);}
/* A name, a face and a date. A byline with none of those asks the reader to
   trust an anonymous page of advice. */
.doc-by{display:flex;align-items:flex-start;gap:14px;margin-bottom:22px;}
.doc-face{flex-shrink:0;width:46px;height:46px;border-radius:50%;overflow:hidden;background:var(--paper-3);}
.doc-face img{width:100%;height:100%;object-fit:cover;display:block;}
.doc-updated{
  font-family:var(--f-mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink-mute);margin:0;line-height:1.85;
}
.doc-updated time{color:var(--rust-deep);}
.doc-toc{list-style:none;margin:0;padding:0;border-top:1px solid var(--line);}
.doc-toc li{border-bottom:1px solid var(--line);}
.doc-toc a{
  display:flex;gap:13px;padding:13px 2px;font-size:.9rem;color:var(--ink-soft);text-decoration:none;
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.doc-toc a:hover{color:var(--rust-deep);padding-left:8px;}
.doc-toc .n{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;color:var(--ink-mute);padding-top:3px;flex-shrink:0;}

.prose{max-width:74ch;}
.prose > section{
  padding-bottom:clamp(36px,4.5vw,56px);margin-bottom:clamp(36px,4.5vw,56px);
  border-bottom:1px solid var(--line);
}
.prose > section:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0;}
.prose h2{font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.12;margin:0 0 18px;}
.prose h3{font-size:1.08rem;margin:34px 0 12px;}
.prose p{font-size:1rem;color:var(--ink-soft);}
.prose a{color:var(--rust-deep);}
.prose .sec-i{
  display:block;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.16em;
  color:var(--rust-deep);margin-bottom:14px;
}
.prose strong{color:var(--ink);font-weight:700;}
.prose em{color:var(--ink);}
.prose code{
  font-family:var(--f-mono);font-size:.85em;color:var(--rust-deep);
  background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;
  overflow-wrap:anywhere;
}
.prose ul{list-style:none;margin:0 0 1em;padding:0;display:flex;flex-direction:column;gap:11px;}
/* The item is a block with a hanging bullet, NOT a flex row. As a flex row the
   leading <strong> label became its own flex item and the sentence after it
   became a second one, so every bullet rendered as a ragged two-column table:
   the label stacked in a narrow column, the prose stranded beside it, and no two
   items aligned. Laid out as normal text the label and the sentence flow and
   wrap together, and the dot hangs in the indent. */
.prose li{
  position:relative;padding-left:18px;
  font-size:.97rem;color:var(--ink-soft);line-height:1.6;
}
.prose li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--rust);
}
/* The label reads as a lead-in, so it wants a space after the full stop that the
   markup does not always carry. */
.prose li > strong:first-child{margin-right:.15em;}
.callout{
  margin:26px 0;padding:24px 26px;background:var(--paper-2);
  border:1px solid var(--line);border-left:2px solid var(--rust);border-radius:var(--r);
}
.callout .cl-t{
  display:block;font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--rust-deep);margin-bottom:11px;
}
.callout p{margin:0;font-size:.95rem;}

/* ───────── Case studies (/work/) ───────── */
.case{
  display:grid;grid-template-columns:1.02fr .98fr;margin-bottom:22px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  transition:border-color .45s var(--ease);
}
.case:last-child{margin-bottom:0;}
.case:hover{border-color:var(--rust);}
.case--flip .case-media{order:-1;}
.case-body{padding:clamp(30px,3.6vw,52px);display:flex;flex-direction:column;justify-content:center;}
.case-i{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;color:var(--rust-deep);margin-bottom:20px;}
.case-body h3{font-size:clamp(1.4rem,2.4vw,1.95rem);line-height:1.1;letter-spacing:-.028em;margin-bottom:14px;font-weight:700;}
.case-body p{font-size:.98rem;color:var(--ink-soft);max-width:48ch;}
.case-meta{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 0;}
.case-meta span{
  font-family:var(--f-mono);font-size:.59rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);
  border:1px solid var(--line-2);border-radius:var(--pill);padding:5px 11px;
}
.case-go{margin-top:28px;}
.case-media{position:relative;overflow:hidden;background:var(--paper-3);min-height:300px;}
.case-media img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .9s var(--ease);}
.case:hover .case-media img{transform:scale(1.04);}
.case-tag{
  position:absolute;top:16px;left:16px;z-index:2;
  font-family:var(--f-mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.14em;
  background:var(--paper);border:1px solid var(--line-2);color:var(--ink);padding:5px 11px;border-radius:var(--pill);
}

/* ───────── Product mock (dashboard / estimator) ───────── */
.mock{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 26px 62px -44px rgba(26,36,54,.7);
}
.mock-bar{display:flex;align-items:center;gap:5px;padding:11px 15px;background:var(--paper-2);border-bottom:1px solid var(--line);}
.mock-bar i{width:6px;height:6px;border-radius:50%;background:var(--line-3);flex-shrink:0;}
.mock-bar span{font-family:var(--f-mono);font-size:.55rem;letter-spacing:.1em;color:var(--ink-mute);margin-left:9px;}
.mock-body{padding:clamp(18px,2vw,24px);}
.mock-h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:15px;
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;color:var(--ink-mute);
}
.lead-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);}
.lead-row:last-child{border-bottom:0;padding-bottom:0;}
.lead-dot{width:8px;height:8px;border-radius:50%;background:var(--rust);flex-shrink:0;}
.lead-dot.cold{background:var(--line-3);}
.lead-nm{display:block;font-family:var(--f-display);font-weight:600;font-size:.95rem;color:var(--ink);letter-spacing:-.02em;}
.lead-sub{display:block;font-size:.8rem;color:var(--ink-mute);line-height:1.4;}
.lead-val{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--rust-deep);white-space:nowrap;}

/* ───────── Static form (prototype markup) ───────── */
.form{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(26px,3.2vw,42px);}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.field{display:flex;flex-direction:column;gap:9px;}
.field.full{grid-column:1 / -1;}
.field label{font-family:var(--f-mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute);}
.field input,.field select,.field textarea{
  width:100%;font-family:var(--f-body);font-size:.97rem;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.field textarea{min-height:132px;resize:vertical;line-height:1.6;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--rust);background:var(--paper);}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute);opacity:.75;}
.choices{display:flex;flex-wrap:wrap;gap:10px;}
.choice input{position:absolute;width:1px;height:1px;opacity:0;}
.choice span{
  display:inline-flex;align-items:center;padding:11px 18px;cursor:pointer;
  border:1px solid var(--line-2);border-radius:var(--pill);font-size:.9rem;color:var(--ink-soft);
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.choice span:hover{border-color:var(--line-3);color:var(--ink);}
.choice input:checked + span{border-color:var(--rust);background:var(--rust-tint);color:var(--rust-deep);}
.choice input:focus-visible + span{outline:2px solid var(--rust-deep);outline-offset:3px;}
.form-foot{margin-top:28px;padding-top:26px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;}
.form-note{font-size:.8rem;color:var(--ink-mute);max-width:46ch;margin:0;}

/* Honeypot. Off-canvas rather than display:none, because some bots skip
   anything that is display:none and fill in the rest. */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.form-error{
  margin:0 0 4px;padding:13px 16px;border-radius:var(--r-sm);
  background:var(--rust-tint);border:1px solid rgba(184,113,90,.35);
  color:var(--rust-deep);font-size:.9rem;line-height:1.5;
}
.form.is-sent{display:none;}
/* The confirmation replaces the form in place, so the answer to "did that
   send?" is where the visitor is already looking. */
.form-done{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(30px,3.4vw,48px);
}
.form-done h3{font-size:1.5rem;margin:20px 0 12px;letter-spacing:-.028em;}
.form-done h3:focus-visible{outline:2px solid var(--rust-deep);outline-offset:6px;}
.form-done p{font-size:.98rem;color:var(--ink-soft);line-height:1.62;max-width:52ch;margin:0;}
.form-done a{color:var(--rust-deep);}
.fd-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--rust-tint);color:var(--rust-deep);
}
.fd-mark svg{width:22px;height:22px;}

/* ═════════ RESPONSIVE ═════════ */
/* ═════════ TEXTURE UTILITIES ═════════
   Compose with .section/.tint. Keep to two textured light bands per page and
   never behind dense hairline tables, where 0.05-alpha contours read as noise. */
.tx{background-image:var(--topo-ink);background-size:cover;background-position:center;}
.tx-dark{background-image:var(--topo-dark);background-size:cover;background-position:center;}

/* ═════════ SERVICES DROPDOWN (desktop) ═════════ */
.nav-drop{position:relative;display:inline-flex;}
.nav-drop-btn{
  position:relative;display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--f-body);font-size:.92rem;color:var(--ink-soft);
  background:none;border:0;padding:4px 0;cursor:pointer;
  transition:color .3s var(--ease);
}
.nav-drop-btn::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--rust);transition:width .4s var(--ease);
}
.nav-drop-btn:hover,.nav-drop.open .nav-drop-btn,.nav-drop-btn.is-current{color:var(--ink);}
.nav-drop-btn:hover::after,.nav-drop.open .nav-drop-btn::after,.nav-drop-btn.is-current::after{width:100%;}
.nav-drop-btn .chev{width:9px;height:6px;transition:transform .35s var(--ease);}
.nav-drop.open .nav-drop-btn .chev{transform:rotate(180deg);}
/* Invisible bridge so the pointer can cross the gap without closing the panel */
.nav-drop::before{content:"";position:absolute;top:100%;left:0;right:0;height:16px;}
.drop-panel{
  position:absolute;top:calc(100% + 15px);left:-18px;z-index:5;
  width:274px;padding:8px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);
  box-shadow:0 26px 62px -40px rgba(26,36,54,.55);
  opacity:0;visibility:hidden;transform:translateY(8px);filter:blur(6px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease),filter .35s var(--ease),visibility .35s;
}
.nav-drop.open .drop-panel{opacity:1;visibility:visible;transform:none;filter:blur(0);pointer-events:auto;}
/* One line per service: the name, and a badge pushed to the trailing edge. */
.drop-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 13px;border-radius:var(--r-sm);text-decoration:none;
  font-family:var(--f-body);font-weight:600;font-size:.9rem;line-height:1.3;
  color:var(--ink);
  transition:background .25s var(--ease),color .25s var(--ease);
}
.drop-link:hover{background:var(--paper-2);color:var(--rust-deep);}
.drop-link[aria-current="page"]{background:var(--rust-tint);color:var(--rust-deep);}
.drop-all{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:6px;padding:13px 14px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--ink);text-decoration:none;transition:color .25s var(--ease);
}
.drop-all svg{width:12px;height:12px;transition:transform .3s var(--ease);}
.drop-all:hover{color:var(--rust-deep);}
.drop-all:hover svg{transform:translateX(4px);}

/* ═════════ SERVICE LEDGER (home) ═════════
   Rows rather than cards. The drawings already carry the visual interest, so
   boxing each one as well was doubling the chrome. Hairlines do the dividing
   and the whole block reads as one list instead of eight competing tiles. */
.svcx{border-top:1px solid var(--line-2);}
/* The hover used to animate padding-left/right, which re-runs layout on every
   frame and re-wraps the description mid-transition, so it read as a jump
   rather than a fade. The inset is now a pseudo-element that only changes
   opacity, and the content slides on a transform. Both are composited, so the
   row eases instead of stepping. */
.svcx-row{
  position:relative;z-index:0;
  display:grid;grid-template-columns:34px 156px minmax(0,1fr) auto 16px;
  align-items:center;gap:clamp(16px,2.2vw,32px);
  padding:16px 0;border-bottom:1px solid var(--line);
  text-decoration:none;
}
.svcx-row::before{
  content:"";position:absolute;z-index:-1;inset:0 -18px;
  background:var(--paper-2);border-radius:var(--r-sm);
  opacity:0;transition:opacity .4s var(--ease);
}
.svcx-row:hover::before{opacity:1;}
.svcx-row > *{transition:transform .4s var(--ease);}
.svcx-row:hover > *{transform:translateX(6px);}
.svcx-n{font-family:var(--f-mono);font-size:.64rem;letter-spacing:.14em;color:var(--ink-mute);}
.svcx-art{
  display:block;padding:9px 11px;border-radius:var(--r-sm);
  background:var(--paper-2);transition:background .35s var(--ease);
}
.svcx-row:hover .svcx-art{background:var(--paper-3);}
.svcx-art svg{width:100%;height:auto;display:block;}
.svcx-body{display:block;min-width:0;}
.svcx-h{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  font-family:var(--f-display);font-weight:600;font-size:1.13rem;letter-spacing:-.026em;
  color:var(--ink);transition:color .35s var(--ease);
}
.svcx-row:hover .svcx-h{color:var(--rust-deep);}
.svcx-flag{
  font-family:var(--f-mono);font-size:.52rem;text-transform:uppercase;letter-spacing:.14em;
  font-weight:400;color:var(--rust-deep);background:var(--rust-tint);
  border:1px solid rgba(184,113,90,.3);padding:3px 7px;border-radius:var(--pill);
  white-space:nowrap;flex-shrink:0;
}
.svcx-p{display:block;margin-top:5px;font-size:.92rem;color:var(--ink-soft);line-height:1.55;max-width:60ch;}
.svcx-meta{
  font-family:var(--f-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.13em;
  color:var(--ink-mute);text-align:right;white-space:nowrap;
}
.svcx-go{color:var(--ink-mute);transition:transform .4s var(--ease),color .35s var(--ease);}
.svcx-go svg{width:15px;height:15px;display:block;}
/* Sits after the shared `> *` slide so the arrow travels further than the rest */
.svcx-row:hover .svcx-go{transform:translateX(11px);color:var(--rust-deep);}
@media (max-width:1040px){
  .svcx-row{grid-template-columns:30px 132px minmax(0,1fr) auto 16px;}
  .svcx-meta{white-space:normal;max-width:12ch;}
}
@media (max-width:820px){
  /* Two columns: drawing beside the name, price wrapping under it. The row
     index and the arrow are decoration and are the first things to go. */
  .svcx-row{grid-template-columns:110px minmax(0,1fr);align-items:start;gap:16px;padding:20px 0;}
  .svcx-row::before{content:none;}
  .svcx-row:hover > *{transform:none;}
  .svcx-n,.svcx-go{display:none;}
  .svcx-h{font-size:1.04rem;}
  .svcx-meta{grid-column:2;text-align:left;max-width:none;margin-top:10px;}
}
@media (max-width:560px){
  .svcx-row{grid-template-columns:94px minmax(0,1fr);gap:14px;padding:18px 0;}
  .svcx-art{padding:7px 8px;}
  .svcx-p{font-size:.88rem;margin-top:4px;}
}

/* ═════════ SERVICE BENTO (7 services + index card) ═════════ */
.svc--7 .svc-card--wide{grid-column:span 2;}
.svc--7 .svc-card--wide .svc-art svg{max-height:132px;}
.svc-card--index{background:var(--paper-2);}
.svc-card--index:hover{background:var(--paper-3);}

/* ═════════ SINGLE-SERVICE PRICE PANEL ═════════ */
.price-panel{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,58px);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(30px,3.4vw,48px);
}
.price-panel .price{margin-top:0;}
.pp-side{display:flex;flex-direction:column;}
.pp-note{font-size:.86rem;color:var(--ink-mute);margin-top:16px;}
.pp-note a{color:var(--rust-deep);}
.pp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.pp-list li{display:flex;gap:11px;font-size:.93rem;color:var(--ink-soft);line-height:1.55;}
.pp-list li svg{flex-shrink:0;margin-top:4px;color:var(--rust);}
.pp-cta{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

/* ═════════ SEVERITY TIERS ═════════ */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start;}
.tier{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(26px,2.8vw,36px);
  transition:border-color .45s var(--ease),transform .45s var(--ease);
}
.tier:hover{border-color:var(--line-2);transform:translateY(-4px);}
.tier.hot{background:var(--paper-2);border-color:var(--rust);}
.tier-name{font-family:var(--f-display);font-weight:700;font-size:1.18rem;color:var(--ink);letter-spacing:-.028em;}
.tier-when{font-size:.88rem;color:var(--ink-soft);margin-top:11px;min-height:3.4em;}
.tier-price{
  font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,3.4vw,2.9rem);
  line-height:1;letter-spacing:-.045em;color:var(--ink);margin-top:22px;
}
.tier-price .cur{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;color:var(--ink-mute);margin-left:.5em;vertical-align:middle;}
.tier ul{list-style:none;margin:24px 0 0;padding:22px 0 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;}
.tier li{display:flex;gap:10px;font-size:.9rem;color:var(--ink-soft);line-height:1.5;}
.tier li svg{flex-shrink:0;margin-top:4px;color:var(--rust);}
.tier-foot{margin-top:auto;padding-top:24px;}
.tier-look{display:block;margin-top:13px;font-size:.78rem;color:var(--ink-mute);text-align:center;}

/* ═════════ PROCESS LOG (incident timeline) ═════════ */
.log{list-style:none;margin:0;padding:0;position:relative;}
.log::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:1px;background:var(--line-2);}
.log li{position:relative;padding:0 0 34px 40px;}
.log li:last-child{padding-bottom:0;}
.log li::before{
  content:"";position:absolute;left:0;top:7px;width:15px;height:15px;border-radius:50%;
  background:var(--paper);border:2px solid var(--rust);
}
.log-t{
  display:block;font-family:var(--f-mono);font-size:.63rem;text-transform:uppercase;
  letter-spacing:.16em;color:var(--rust-deep);margin-bottom:8px;
}
.log-h{display:block;font-family:var(--f-display);font-weight:600;font-size:1.06rem;color:var(--ink);letter-spacing:-.02em;margin-bottom:7px;}
.log-d{font-size:.94rem;color:var(--ink-soft);line-height:1.6;max-width:54ch;}

/* ═════════ AUDIT REPORT CARD ═════════ */
.report{
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 18px 44px -34px rgba(26,36,54,.45);
}
.report-top{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 22px;background:var(--paper-2);border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--ink-mute);
}
.report-rows{padding:8px 0;}
.rp{
  display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:13px 22px;border-bottom:1px solid var(--line);
}
.rp:last-child{border-bottom:0;}
.rp-l{font-family:var(--f-mono);font-size:.78rem;color:var(--ink);letter-spacing:.02em;}
.rp-s{font-family:var(--f-mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.14em;padding:4px 10px;border-radius:var(--pill);}
.rp-ok{color:var(--ink-mute);border:1px solid var(--line-2);}
.rp-fix{color:var(--on-rust);background:var(--rust-deep);}

/* ═════════ CAPABILITY MATRIX ═════════ */
.matrix{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.mx{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  padding:22px;transition:border-color .35s var(--ease),background .35s var(--ease);
}
.mx:hover{border-color:var(--rust);background:var(--paper-2);}
a.mx{display:block;text-decoration:none;}
.mx-t{display:block;font-family:var(--f-display);font-weight:600;font-size:1.02rem;color:var(--ink);letter-spacing:-.02em;margin-bottom:8px;}
.mx-d{font-size:.89rem;color:var(--ink-soft);line-height:1.55;}

/* Full-height hero on desktop. min-height rather than height so a short laptop
   viewport lets the copy push the section taller instead of clipping it, and
   the stat strip still lands on the fold. Below the nav breakpoint the reel
   goes full-bleed under the copy, which is already taller than a phone
   viewport, so the rule stops there. */
@media (min-width:961px){
  .hero{min-height:85vh;min-height:85svh;}
}

@media (max-width:1180px){
  .hero-grid{grid-template-columns:1.1fr .9fr;}
  .nav-links{gap:22px;}
}

@media (max-width:1100px){
  .svc{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr 1fr;}
  .matrix{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:960px){
  /* ── Full-height menu panel ──
     Fills the viewport, sets the links in display type with a running index,
     and pins the contact block to the bottom edge. The mark and the toggle are
     lifted above the panel so they stay usable while it is open. */
  .nav-toggle{display:flex;position:relative;z-index:2;}
  .brand{position:relative;z-index:2;}
  .nav-menu{
    display:flex;flex-direction:column;z-index:1;
    position:fixed;inset:0;
    background:var(--paper);
    padding:calc(var(--nav-h) + 30px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 32px);
    overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;
    transition:opacity .4s var(--ease),visibility .4s;
  }
  .nav-menu.open{opacity:1;visibility:visible;}
  .nav:has(.nav-menu.open){background:var(--paper);border-bottom-color:transparent;}

  .nav-links{
    position:static;transform:none;flex-direction:column;align-items:stretch;gap:0;
    counter-reset:navi;border-top:1px solid var(--line);
  }
  /* Top-level rows only: the Services group is a .nav-drop wrapper, and its
     sub-links must stay out of the counter and the display-type sizing. */
  .nav-links > a,
  .nav-drop-btn{
    counter-increment:navi;
    display:flex;align-items:center;gap:18px;width:100%;
    padding:19px 2px;border-bottom:1px solid var(--line);
    font-family:var(--f-display);font-weight:700;
    font-size:clamp(1.5rem,6.2vw,2.1rem);letter-spacing:-.034em;line-height:1.12;
    color:var(--ink);background:none;border-top:0;border-left:0;border-right:0;
    text-align:left;
  }
  .nav-links > a::before,
  .nav-drop-btn::before{
    content:counter(navi,decimal-leading-zero);
    font-family:var(--f-mono);font-weight:400;font-size:.6rem;letter-spacing:.16em;
    color:var(--rust-deep);flex-shrink:0;align-self:flex-start;padding-top:1.1em;
    position:static;width:auto;height:auto;background:none;
  }
  .nav-links > a::after{
    content:"";position:static;width:9px;height:9px;background:none;border-radius:0;
    border-right:2px solid var(--line-2);border-top:2px solid var(--line-2);
    transform:rotate(45deg);margin-left:auto;flex-shrink:0;
    transition:transform .35s var(--ease),border-color .35s var(--ease);
  }
  /* width:9px re-stated so the desktop underline-sweep hover cannot stretch it */
  .nav-links > a:hover::after,.nav-links > a:focus-visible::after{
    width:9px;border-color:var(--rust);transform:rotate(45deg) translate(2px,-2px);
  }
  .nav-badge{align-self:center;}

  /* ── Services group as an in-flow accordion ── */
  .nav-drop{display:block;position:static;}
  .nav-drop::before{content:none;}
  .nav-drop-btn::after{content:none;}
  .nav-drop-btn .chev{
    width:12px;height:8px;margin-left:auto;flex-shrink:0;
    transition:transform .35s var(--ease);
  }
  .nav-drop.open .nav-drop-btn .chev{transform:rotate(180deg);}
  .drop-panel{
    position:static;width:auto;padding:0;left:auto;top:auto;
    background:none;border:0;border-radius:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;filter:none;pointer-events:auto;
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .45s var(--ease);
  }
  .nav-drop.open .drop-panel{grid-template-rows:1fr;}
  .drop-inner{overflow:hidden;min-height:0;}
  .drop-link{
    padding:14px 2px 14px 34px;border-bottom:1px solid var(--line);border-radius:0;
    font-size:1.05rem;justify-content:flex-start;gap:10px;
  }
  .drop-link:hover{background:none;color:var(--ink);}
  .drop-all{margin-top:0;padding:14px 2px 14px 34px;border-top:0;border-bottom:1px solid var(--line);}

  @keyframes navIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
  .nav-menu.open .nav-links > *{animation:navIn .55s var(--ease) backwards;}
  .nav-menu.open .nav-links > *:nth-child(1){animation-delay:.06s;}
  .nav-menu.open .nav-links > *:nth-child(2){animation-delay:.11s;}
  .nav-menu.open .nav-links > *:nth-child(3){animation-delay:.16s;}
  .nav-menu.open .nav-links > *:nth-child(4){animation-delay:.21s;}
  .nav-menu.open .nav-links > *:nth-child(5){animation-delay:.26s;}
  .nav-menu.open .nav-right{animation:navIn .55s var(--ease) .32s backwards;}

  .nav-right{flex-direction:column;align-items:stretch;gap:0;margin:auto 0 0;padding-top:38px;}
  .nav-meta{
    display:flex;flex-direction:column;gap:7px;padding-bottom:20px;
    font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.16em;
    color:var(--ink-mute);
  }
  .nav-meta a{text-decoration:none;color:var(--ink-mute);}
  .nav-phone{
    width:auto;height:auto;border:0;border-radius:0;padding:0 0 22px;
    justify-content:flex-start;gap:.6em;
    font-family:var(--f-display);font-weight:700;font-size:1.3rem;letter-spacing:-.028em;
  }
  .nav-phone:hover{background:none;}
  .nav-phone svg{width:18px;height:18px;color:var(--rust-deep);}
  .nav-phone::after{content:"(902) 225-5280";}
  .nav-cta{justify-content:center;padding:18px 22px;font-size:1.02rem;}

  /* Hero reel goes full-bleed under the copy, single row */
  .hero-grid{grid-template-columns:1fr;gap:38px;}
  .reel{
    width:100vw;margin-left:calc(50% - 50vw);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  }
  .reel-row:nth-child(2){display:none;}
  .reel{--reel-w:min(78vw,340px);}
  .hero-strip .wrap{grid-template-columns:1fr 1fr;}
  .hero-strip .cell{padding:20px 18px;border-bottom:1px solid var(--line);}
  .hero-strip .cell:nth-child(odd){border-left:0;padding-left:0;}
  .hero-strip .cell:nth-last-child(-n+2){border-bottom:0;}

  .sheet{grid-template-columns:1fr;}
  .sheet-aside{position:static;}
  .quotes{grid-template-columns:1fr;}
  .stack-card{grid-template-columns:1fr;min-height:0;position:relative;top:auto !important;margin-bottom:18px;}
  .stack-media{aspect-ratio:16/9;order:-1;}
  .cmp-grid{grid-template-columns:1fr;}
  .plans{grid-template-columns:1fr;}
  .price-panel{grid-template-columns:1fr;}
  .tiers{grid-template-columns:1fr;}
  .tier.hot{order:-1;}
  .tier-when{min-height:0;}
  .plan.hot{order:-1;}
  .lm-grid{grid-template-columns:1fr;}
  .ind{grid-template-columns:repeat(2,1fr);}
  .faq-grid{grid-template-columns:1fr;}
  .faq-aside{position:static;}
  .promise{grid-template-columns:1fr;}
}

/* Matches the nav breakpoint, not a smaller one. Between 769px and 960px the
   header phone number is already behind the hamburger, so a narrower bar left
   tablets with no reachable call action at all. */
@media (max-width:960px){
  .mbar{display:flex;}
  body.has-mbar .footer{padding-bottom:98px;}
}

@media (max-width:620px){
  :root{--gutter:20px;}
  .hero h1{max-width:none;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}
  .svc{grid-template-columns:1fr;}
  .svc--7 .svc-card--wide{grid-column:span 1;}
  .matrix{grid-template-columns:1fr;}
  .log li{padding-left:32px;}
  .stats{grid-template-columns:1fr;}
  .stats > div{border-left:0;padding:28px 0 0;border-top:1px solid var(--line);}
  .stats > div:first-child{border-top:0;}
  .ind{grid-template-columns:1fr;}
  .founder{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .faq .ans{padding-left:0;}
  .qwho{flex-direction:column;align-items:flex-start;gap:12px;}
  .contact-cta{flex-direction:column;}
  .contact-cta .btn{width:100%;}
  .sheet-row{grid-template-columns:40px 1fr;}
}

/* ───────── Subpage responsive ─────────
   Kept in its own run, after the base blocks above, so the interior-page
   components can be adjusted without touching the home page rules. */
@media (max-width:1100px){
  .steps,.steps--5{grid-template-columns:repeat(2,1fr);}
  .steps--3{grid-template-columns:1fr;}
  .glist{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:960px){
  .pair{grid-template-columns:1fr;}
  .split{grid-template-columns:1fr;}
  .split-aside{position:static;}
  .doc{grid-template-columns:1fr;}
  .doc-aside{position:static;margin-bottom:8px;}
  .case{grid-template-columns:1fr;}
  .case-media{order:-1;min-height:0;aspect-ratio:16/10;}
  .addon{grid-template-columns:1fr;gap:14px;}
  .addon-side{align-items:flex-start;text-align:left;}
}

@media (max-width:620px){
  .steps,.steps--5,.glist{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .form-foot{flex-direction:column;align-items:stretch;}
  .form-foot .btn{width:100%;}
  .phero h1,.phero--sm h1{max-width:none;}
  .phero .hero-cta{flex-direction:column;align-items:stretch;}
  .phero .hero-cta .btn{width:100%;}
}

/* ═════════ REDUCED MOTION ═════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  [data-reveal]{opacity:1 !important;filter:none !important;transform:none !important;}
  .w{opacity:1 !important;filter:none !important;transform:none !important;}
  .statement h2 .w{opacity:1 !important;}
  .marq-track,.reel-track{animation:none;}
  .reel-row{overflow-x:auto;}
  .hero-media,.statement img{transform:none !important;}
  .stack-card{position:relative;top:auto !important;}
  .progress{display:none;}
}