/* ============================================================
   GOTECpro — "Night Cyanotype"
   Architectural drafting system for a digital practice.
   Fonts embedded as data URIs (no external requests).
   ============================================================ */

/* Clash Display (display) + Satoshi (text) — Fontshare, free for commercial use.
   JetBrains Mono (annotations) — variable, one file covers 400/500. */
@font-face{font-family:'Clash'; src:url(fonts/clash300.woff2) format('woff2');
  font-weight:300; font-style:normal; font-display:block;}
@font-face{font-family:'Clash'; src:url(fonts/clash600.woff2) format('woff2');
  font-weight:600; font-style:normal; font-display:block;}
@font-face{font-family:'Clash'; src:url(fonts/clash700.woff2) format('woff2');
  font-weight:700; font-style:normal; font-display:block;}

@font-face{font-family:'Satoshi'; src:url(fonts/satoshi300.woff2) format('woff2');
  font-weight:300; font-style:normal; font-display:swap;}
@font-face{font-family:'Satoshi'; src:url(fonts/satoshi400.woff2) format('woff2');
  font-weight:400; font-style:normal; font-display:swap;}
@font-face{font-family:'Satoshi'; src:url(fonts/satoshi500.woff2) format('woff2');
  font-weight:500; font-style:normal; font-display:swap;}

@font-face{font-family:'JBMono'; src:url(fonts/jbmono.woff2) format('woff2');
  font-weight:100 800; font-style:normal; font-display:swap;}

/* ---------- tokens ---------- */
:root{
  --ink:#0e1622;
  --ink-2:#16202f;
  --ink-3:#1e293a;
  --fg:#ccd7e6;
  --fg-dim:#8896ab;
  --chalk:#f2f6fb;
  --brass:#e4a13f;
  --brass-soft:rgba(228,161,63,.14);
  --line:rgba(160,186,220,.20);
  --line-strong:rgba(160,186,220,.36);
  --veil:0;

  --globe-land:#a2b8d4;
  --globe-grid:rgba(160,186,220,.20);
  --globe-glow:#e4a13f;
  --globe-glow-a:.08;
  /* the brand yellow is built for a dark ground; on paper it needs deepening */
  --logo-filter:none;

  --pad:clamp(20px,5.2vw,72px);
  --rail:76px;
  --maxw:1560px;

  --f-display:'Clash',ui-sans-serif,system-ui,sans-serif;
  --f-body:'Satoshi',ui-sans-serif,system-ui,sans-serif;
  --f-mono:'JBMono',ui-monospace,'SFMono-Regular',monospace;

  --ease:cubic-bezier(.22,.61,.24,1);
  color-scheme:dark;
}

/* Light theme = actual cyanotype: pale blueprint paper, indigo ink, darkened brass */
@media (prefers-color-scheme:light){
  :root{
    --ink:#e3e9f0;
    --ink-2:#eef2f7;
    --ink-3:#f6f8fb;
    --fg:#26313f;
    --fg-dim:#5f6d80;
    --chalk:#0a1119;
    --brass:#8a5510;
    --brass-soft:rgba(138,85,16,.10);
    --line:rgba(38,64,102,.20);
    --line-strong:rgba(38,64,102,.38);

    --globe-land:#41587a;
    --globe-grid:rgba(38,64,102,.22);
    --globe-glow:#8ea9cb;
    --globe-glow-a:.16;
    --logo-filter:saturate(1.3) brightness(.78) contrast(1.1);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ink:#e3e9f0; --ink-2:#eef2f7; --ink-3:#f6f8fb;
  --fg:#26313f; --fg-dim:#5f6d80; --chalk:#0a1119;
  --brass:#8a5510; --brass-soft:rgba(138,85,16,.10);
  --line:rgba(38,64,102,.20); --line-strong:rgba(38,64,102,.38);
  --globe-land:#41587a; --globe-grid:rgba(38,64,102,.22);
  --globe-glow:#8ea9cb; --globe-glow-a:.16;
  --logo-filter:saturate(1.3) brightness(.78) contrast(1.1);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --ink:#0e1622; --ink-2:#16202f; --ink-3:#1e293a;
  --fg:#ccd7e6; --fg-dim:#8896ab; --chalk:#f2f6fb;
  --brass:#e4a13f; --brass-soft:rgba(228,161,63,.14);
  --line:rgba(160,186,220,.20); --line-strong:rgba(160,186,220,.36);
  --globe-land:#a2b8d4; --globe-grid:rgba(160,186,220,.20);
  --globe-glow:#e4a13f; --globe-glow-a:.08;
  --logo-filter:none;
  color-scheme:dark;
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--ink); color:var(--fg);
  font-family:var(--f-body); font-weight:400; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
::selection{background:var(--brass); color:var(--ink)}

/* every corner is square — this is a drawing, not a dashboard */
.gp-shell *{border-radius:0}

/* ---------- typography roles ---------- */
.disp{
  font-family:var(--f-display); font-weight:700;
  text-transform:uppercase; line-height:.9; letter-spacing:-.005em;
  color:var(--chalk); text-wrap:balance; margin:0;
}
.mono{
  font-family:var(--f-mono); font-weight:500; font-size:11px;
  letter-spacing:.20em; text-transform:uppercase; color:var(--fg-dim);
  font-variant-numeric:tabular-nums;
}
.lede{
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(17px,1.35vw,21px); line-height:1.62; color:var(--fg);
  max-width:56ch; margin:0;
}

/* ---------- globe ground + veil ---------- */
#globe{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0; display:block; pointer-events:none;
  touch-action:none;
}
#globe.grab{cursor:grab}
#globe.grabbing{cursor:grabbing}

/* drafting callout for whichever hub the pointer is on */
#hub{
  position:fixed; z-index:35; pointer-events:none; opacity:0;
  transform:translate(14px,-50%); transition:opacity .22s var(--ease);
  padding:9px 12px; border:1px solid var(--brass);
  background:color-mix(in srgb,var(--ink) 88%,transparent);
  backdrop-filter:blur(8px); white-space:nowrap;
}
#hub.on{opacity:1}
#hub.pinned{border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-soft)}
#hub b{
  display:block; font-family:var(--f-mono); font-weight:500; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--chalk);
}
#hub span{
  display:block; margin-top:4px; font-family:var(--f-mono); font-size:15px;
  letter-spacing:.10em; color:var(--brass); font-variant-numeric:tabular-nums;
}
#veil{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:var(--ink); opacity:var(--veil);
  transition:opacity .18s linear;
}
#grain{
  position:fixed; inset:0; z-index:2; pointer-events:none; opacity:.5;
  background-image:
    repeating-linear-gradient(0deg,transparent 0 3px,rgba(120,150,190,.028) 3px 4px);
  mix-blend-mode:overlay;
}
.gp-shell{position:relative; z-index:3}

/* ---------- construction grid ---------- */
.gp-grid{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  padding:0 var(--pad); display:flex; justify-content:space-between;
  max-width:var(--maxw); margin:0 auto; left:0; right:0;
  opacity:0; transition:opacity 1.2s var(--ease) .1s;
}
.loaded .gp-grid{opacity:1}
.gp-grid i{width:1px; background:var(--line); display:block}
.gp-grid i:nth-child(n+5){display:none}
@media (min-width:900px){ .gp-grid i:nth-child(n+5){display:block} }

/* ---------- header ---------- */
.hdr{
  position:fixed; top:0; left:0; right:0; z-index:40;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s;
}
.hdr.stuck{
  background:color-mix(in srgb,var(--ink) 82%,transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--line);
}
/* chrome never sits on the raw film — a soft scrim rides under it at all times */
.hdr::before{
  content:""; position:absolute; inset:0 0 auto 0; height:230%; z-index:-1; pointer-events:none;
  background:linear-gradient(to bottom,
    color-mix(in srgb,var(--ink) 74%,transparent), transparent);
}
.hdr-in{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  height:70px; display:flex; align-items:center; gap:28px;
}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand img{height:21px; width:auto; filter:var(--logo-filter)}
.brand-mark{
  padding-left:12px; border-left:1px solid var(--line);
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--fg-dim); line-height:1.35; white-space:nowrap;
}
.nav{display:none; gap:30px; align-items:center}
@media (min-width:880px){ .nav{display:flex} }
.nav a{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--fg-dim);
  padding:6px 0; position:relative; transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--brass); transition:width .35s var(--ease);
}
.nav a:hover,.nav a[aria-current="true"]{color:var(--chalk)}
.nav a:hover::after,.nav a[aria-current="true"]::after{width:100%}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  padding:14px 24px; border:1px solid var(--line-strong); color:var(--chalk);
  position:relative; overflow:hidden;
  transition:color .35s var(--ease),border-color .35s var(--ease),
             transform .35s var(--ease),box-shadow .35s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--brass);
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn > *{position:relative}
.btn:hover{color:var(--ink); border-color:var(--brass)}
.btn:hover::before{transform:translateY(0)}
/* The primary action is the most confident element on the page: a resting glow,
   a light sweep across it on hover, and a real lift on press. */
.btn--solid{
  background:var(--brass); border-color:var(--brass); color:#0a0d14; font-weight:500;
  box-shadow:0 10px 34px -14px var(--brass);
}
.btn--solid::before{display:none}
.btn--solid::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  transform:skewX(-18deg); pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  transition:left .62s var(--ease);
}
.btn--solid:hover{
  color:#0a0d14; border-color:var(--brass); transform:translateY(-2px);
  box-shadow:0 18px 42px -14px var(--brass);
}
.btn--solid:hover::after{left:130%}
.btn--solid:active{transform:translateY(1px); box-shadow:0 6px 20px -12px var(--brass)}
.btn .tick{width:6px; height:6px; border:1px solid currentColor; flex:none}
.btn--sm{padding:10px 16px; font-size:10px}

/* below ~560px the header has to give up the descriptor before it collides */
@media (max-width:560px){
  .brand-mark{display:none}
  .hdr-in{gap:12px; padding-inline:clamp(16px,4vw,24px)}
  .btn--sm{padding:9px 13px; letter-spacing:.12em}
  .btn--sm .tick{display:none}
}
.eyebrow{flex-wrap:wrap}
.hero-reach{flex-wrap:wrap}

.theme{
  width:34px; height:34px; display:grid; place-items:center; flex:none;
  border:1px solid var(--line); color:var(--fg-dim);
  transition:color .3s var(--ease),border-color .3s var(--ease);
}
.theme:hover{color:var(--brass); border-color:var(--brass)}
.theme svg{width:15px; height:15px}

/* ---------- fixed rails ---------- */
.rail{
  position:fixed; top:0; bottom:0; width:var(--rail); z-index:30;
  display:none; pointer-events:none;
}
@media (min-width:1180px){ .rail{display:block} }
.rail-l{left:0}
.rail-r{right:0}

.scale{
  position:absolute; left:26px; top:110px; bottom:110px; width:1px; background:var(--line);
}
.scale::before{
  content:""; position:absolute; left:-3px; top:0; width:7px; height:1px; background:var(--line-strong);
}
.scale::after{
  content:""; position:absolute; left:-3px; bottom:0; width:7px; height:1px; background:var(--line-strong);
}
.scale-ticks{position:absolute; inset:0}
.scale-ticks i{position:absolute; left:0; width:5px; height:1px; background:var(--line)}
.scale-run{
  position:absolute; left:-1px; top:0; width:3px; height:0; background:var(--brass);
  transition:height .12s linear;
}
.scale-cur{
  position:absolute; left:14px; width:1px; height:1px; top:0;
  transition:top .12s linear;
}
.scale-cur span{
  position:absolute; left:8px; top:-7px; white-space:nowrap;
  font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.16em;
  color:var(--brass); font-variant-numeric:tabular-nums;
}
.scale-cur::before{
  content:""; position:absolute; left:-14px; top:0; width:11px; height:1px; background:var(--brass);
}
.rail-label{
  position:absolute; left:26px; bottom:40px; transform-origin:0 0; transform:rotate(-90deg);
  font-family:var(--f-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--chalk); white-space:nowrap;
}
.rail-label .rail-cap{color:var(--fg-dim); margin-right:6px}
.dots{
  position:absolute; right:26px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:2px; align-items:flex-end; pointer-events:auto;
}
.dots a{
  display:flex; align-items:center; gap:9px; justify-content:flex-end;
  padding:5px 0; color:var(--fg-dim); transition:color .3s var(--ease);
}
.dots span{
  font-family:var(--f-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transform:translateX(6px); transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.dots i{width:14px; height:1px; background:currentColor; flex:none; transition:width .3s var(--ease)}
.dots a:hover,.dots a.on{color:var(--brass)}
.dots a:hover span,.dots a.on span{opacity:1; transform:none}
.dots a.on i{width:26px}

/* ---------- layout ---------- */
/* width:100% matters — .wrap is a flex item inside .hero and .sec, and auto
   margins alone would shrink it to fit-content and lose the page gutter. */
.wrap{max-width:var(--maxw); width:100%; margin-inline:auto; padding:0 var(--pad)}

/* Sections carry real vertical presence; short blocks read as filler. */
.sec{
  position:relative; padding:clamp(90px,11vw,170px) 0;
  min-height:min(92vh,900px); display:flex; flex-direction:column; justify-content:center;
}
.sec + .sec{border-top:1px solid var(--line)}
.sec,.engage,.hero{scroll-margin-top:70px}

.sec-head{padding-bottom:clamp(40px,5vw,72px)}
.sec-label{
  display:flex; align-items:center; gap:14px; margin:0 0 clamp(18px,2.2vw,30px);
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.22em;
  text-transform:uppercase; color:var(--brass);
}
.sec-label .rule{width:46px; height:1px; background:var(--brass); flex:none}
.sec-label .count{color:var(--fg-dim); font-variant-numeric:tabular-nums}
/* one element per section far larger than the rest — otherwise the page has no rhythm */
.sec-t{font-size:clamp(2.15rem,5.1vw,4.5rem); max-width:19ch}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s} .rv-d3{transition-delay:.24s}
.rv-d4{transition-delay:.32s} .rv-d5{transition-delay:.40s} .rv-d6{transition-delay:.48s}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column;
  justify-content:flex-end; padding-top:120px; padding-bottom:clamp(28px,4vw,52px);
}
/* holds the headline legible over the globe without hiding it */
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top,
      var(--ink) 0%,
      color-mix(in srgb,var(--ink) 62%,transparent) 24%,
      transparent 62%),
    linear-gradient(to right,
      color-mix(in srgb,var(--ink) 78%,transparent) 0%,
      color-mix(in srgb,var(--ink) 40%,transparent) 42%,
      transparent 68%);
}
/* narrow screens stack copy under the globe, so the vertical scrim carries it alone */
@media (max-width:999px){
  .hero::after{
    background:linear-gradient(to top,
      var(--ink) 0%,
      color-mix(in srgb,var(--ink) 92%,transparent) 38%,
      color-mix(in srgb,var(--ink) 45%,transparent) 62%,
      transparent 88%);
  }
}
.hero-in{position:relative; z-index:2}
.eyebrow{
  display:flex; align-items:center; gap:14px; margin-bottom:clamp(24px,3vw,40px);
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.24em;
  text-transform:uppercase; color:var(--brass);
}
.eyebrow .dash{width:44px; height:1px; background:var(--brass); flex:none}
.eyebrow em{font-style:normal; color:var(--fg-dim); letter-spacing:.2em}

h1.hero-t{
  font-size:clamp(2.9rem,9.4vw,8.4rem);
  line-height:.86; margin:0 0 clamp(24px,2.6vw,36px);
}
h1.hero-t .ln{display:block; overflow:hidden}
h1.hero-t .ln > span{display:block; transform:translateY(105%); transition:transform 1.05s var(--ease)}
.loaded h1.hero-t .ln > span{transform:none}
.loaded h1.hero-t .ln:nth-child(2) > span{transition-delay:.10s}
.loaded h1.hero-t .ln:nth-child(3) > span{transition-delay:.20s}
h1.hero-t .thin{font-weight:300; color:var(--brass)}

/* .wrap carries margin:0 auto; as a flex item that would shrink it to fit-content,
   so the hero's wraps are pinned to full width and keep the page gutter. */
/* the globe occupies the right of the frame, so the copy is held to the left */
@media (min-width:1000px){ .hero-col{max-width:min(62%,830px)} }
.hero-body{
  display:grid; gap:clamp(24px,2.6vw,40px); align-items:start;
  grid-template-columns:1fr;
}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-reach{
  display:flex; align-items:center; gap:12px; margin:0 0 clamp(22px,2.6vw,34px);
  font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-dim);
}
.hero-reach i{width:5px; height:5px; background:var(--brass); flex:none; display:block}
.hero-reach b{color:var(--chalk); font-weight:500}

.hero-foot{
  position:relative; z-index:2; margin-top:clamp(40px,5vw,72px);
  padding-top:18px; border-top:1px solid var(--line);
  display:flex; gap:14px 34px; flex-wrap:wrap; align-items:center;
}
.hero-foot .cap{display:flex; align-items:center; gap:9px; color:var(--fg-dim)}
.hero-foot .cap b{
  font-family:var(--f-mono); font-weight:500; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg);
}
.hero-foot .cap i{width:5px; height:5px; background:var(--brass); flex:none; display:block}
.hero-foot .globehint{display:none; color:var(--fg-dim); letter-spacing:.14em}
@media (min-width:1100px){ .hero-foot .globehint{display:inline} }
.hero-foot .scrollcue{margin-left:auto; display:flex; align-items:center; gap:10px}
.hero-foot .scrollcue .bar{width:52px; height:1px; background:var(--line); position:relative; overflow:hidden}
.hero-foot .scrollcue .bar::after{
  content:""; position:absolute; inset:0; background:var(--brass);
  animation:sweep 2.4s var(--ease) infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}55%{transform:translateX(0)}100%{transform:translateX(100%)}}

/* ---------- services (rows, not cards) ---------- */
.svc{
  display:grid; align-items:start; gap:8px 28px; padding:clamp(26px,3vw,42px) 0;
  border-top:1px solid var(--line); position:relative;
  grid-template-columns:1fr; transition:padding-left .5s var(--ease);
}
.svc:last-of-type{border-bottom:1px solid var(--line)}
@media (min-width:900px){
  .svc{grid-template-columns:132px minmax(0,1.05fr) minmax(0,1.15fr) 150px; align-items:center; gap:32px}
}
.svc::before{
  content:""; position:absolute; left:0; top:-1px; height:1px; width:0;
  background:var(--brass); transition:width .6s var(--ease);
}
.svc:hover::before,.svc:focus-visible::before{width:100%}
@media (min-width:900px){ .svc:hover{padding-left:22px} }
.svc-key{display:flex; align-items:center; gap:12px; color:var(--fg-dim)}
.svc-key svg{width:26px; height:26px; flex:none; stroke:currentColor; fill:none; stroke-width:1.15; transition:stroke .45s var(--ease)}
.svc-key b{
  font-family:var(--f-mono); font-weight:500; font-size:10px; letter-spacing:.2em;
  text-transform:uppercase;
}
.svc:hover .svc-key{color:var(--brass)}
.svc-t{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.5rem,2.9vw,2.7rem); line-height:1.02; letter-spacing:-.005em;
  color:var(--chalk); margin:0; text-transform:uppercase; text-wrap:balance;
}
.svc-d{margin:0; color:var(--fg-dim); font-size:15px; line-height:1.6; max-width:46ch}
.svc-go{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-dim); display:flex; align-items:center; gap:9px;
  transition:color .35s var(--ease);
}
@media (min-width:900px){ .svc-go{justify-content:flex-end} }
.svc-go .arw{display:inline-block; transition:transform .4s var(--ease)}
.svc:hover .svc-go{color:var(--brass)}
.svc:hover .svc-go .arw{transform:translateX(6px)}

/* ---------- approach ---------- */
.approach{display:grid; gap:clamp(44px,5vw,90px); grid-template-columns:1fr}
@media (min-width:1000px){ .approach{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)} }
.approach-l{position:relative}
@media (min-width:1000px){ .approach-l{position:sticky; top:120px; align-self:start} }
.approach-t{font-size:clamp(2.2rem,4.6vw,4.3rem); margin-bottom:26px}
.commit{list-style:none; margin:0; padding:0}
.commit li{
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  padding:26px 0; border-bottom:1px solid var(--line);
}
.commit li:first-child{border-top:1px solid var(--line)}
.commit .dim{
  font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.18em;
  color:var(--brass); padding-top:5px; font-variant-numeric:tabular-nums;
  display:flex; align-items:center; gap:8px;
}
.commit .dim::after{content:""; width:16px; height:1px; background:var(--line-strong)}
.commit p{margin:0; color:var(--fg); font-size:clamp(15px,1.15vw,17px); line-height:1.6}

/* ---------- process ---------- */
.stages{list-style:none; margin:0; padding:0; position:relative}
.stages::before{
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:1px; background:var(--line);
}
@media (min-width:820px){ .stages::before{left:96px} }
.stage{
  position:relative; display:grid; gap:6px 34px; grid-template-columns:1fr;
  padding:0 0 clamp(34px,4vw,58px) 28px;
}
@media (min-width:820px){
  .stage{grid-template-columns:96px minmax(0,1fr) minmax(0,1.25fr); padding-left:0; align-items:baseline}
}
.stage-n{
  font-family:var(--f-mono); font-weight:500; font-size:11px; letter-spacing:.2em;
  color:var(--brass); font-variant-numeric:tabular-nums; position:relative;
}
.stage-n::before{
  content:""; position:absolute; left:-32.5px; top:7px; width:9px; height:9px;
  border:1px solid var(--brass); background:var(--ink);
}
@media (min-width:820px){
  .stage-n{padding-right:34px; text-align:right}
  .stage-n::before{left:auto; right:-4.5px}
}
.stage-t{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.15rem,1.85vw,1.7rem); line-height:1.08; letter-spacing:-.01em;
  color:var(--chalk); margin:0;
}
.stage-d{margin:0; color:var(--fg-dim); font-size:15px; line-height:1.62; max-width:52ch}

.metrics{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--line-strong); margin-top:clamp(24px,3vw,44px);
}
.metric{padding:clamp(26px,3vw,40px) 0 0; border-right:1px solid var(--line); padding-right:24px}
.metric:last-child{border-right:0}
@media (max-width:640px){ .metric{border-right:0; border-bottom:1px solid var(--line); padding-bottom:22px} .metric:last-child{border-bottom:0} }
.metric b{
  display:block; font-family:var(--f-display); font-weight:700;
  font-size:clamp(2.8rem,6.6vw,5.2rem); line-height:.9; color:var(--brass);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em;
}
.metric span{display:block; margin-top:12px; max-width:24ch}

/* ---------- capabilities legend ---------- */
.legend{
  display:grid; grid-template-columns:1fr; border-top:1px solid var(--line);
}
@media (min-width:700px){ .legend{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .legend{grid-template-columns:repeat(3,1fr)} }
.lg{
  padding:clamp(28px,3vw,42px) clamp(22px,2.4vw,38px) clamp(28px,3vw,42px) 0;
  border-bottom:1px solid var(--line); position:relative;
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
}
@media (min-width:700px){ .lg{border-right:1px solid var(--line); padding-right:clamp(22px,2.4vw,38px)} .lg:nth-child(2n){border-right:0} }
@media (min-width:1100px){ .lg{border-right:1px solid var(--line)} .lg:nth-child(2n){border-right:1px solid var(--line)} .lg:nth-child(3n){border-right:0} }
.lg svg{width:30px; height:30px; stroke:var(--brass); fill:none; stroke-width:1.15; flex:none}
.lg h3{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:15px; letter-spacing:.02em; color:var(--chalk); margin:0 0 9px;
}
.lg p{margin:0; color:var(--fg-dim); font-size:14.5px; line-height:1.6}

/* ---------- engage / form ---------- */
.engage{padding:clamp(110px,13vw,200px) 0; border-top:1px solid var(--line)}
.engage-t{font-size:clamp(2.4rem,7.4vw,6.6rem); max-width:16ch; margin-bottom:28px}
.engage-t .thin{font-weight:300; color:var(--brass)}
.engage-grid{display:grid; gap:clamp(44px,5vw,84px); grid-template-columns:1fr; margin-top:clamp(48px,6vw,86px)}
@media (min-width:1000px){ .engage-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)} }

.form{display:grid; gap:26px}
.field{position:relative; display:grid; gap:8px}
.field label{
  font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-dim);
}
.field input,.field select,.field textarea{
  font-family:var(--f-body); font-size:16px; color:var(--chalk);
  background:transparent; border:0; border-bottom:1px solid var(--line-strong);
  padding:10px 0; width:100%; transition:border-color .35s var(--ease);
}
.field textarea{resize:vertical; min-height:76px; line-height:1.55}
.field select{cursor:pointer}
.field select option{background:var(--ink-2); color:var(--fg)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-bottom-color:var(--brass);
}
.field input::placeholder,.field textarea::placeholder{color:var(--fg-dim); opacity:.55}
.form-row{display:grid; gap:26px; grid-template-columns:1fr}
@media (min-width:620px){ .form-row{grid-template-columns:1fr 1fr} }
.form-foot{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.form-note{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-dim); line-height:1.7;
}
.form-note[data-state="alert"]{color:var(--brass)}
.form-note[data-state="good"]{color:var(--chalk)}
/* honeypot: off-screen rather than display:none, which some bots skip */
.pot{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.form button[disabled]{opacity:.6; cursor:progress}

.contact-block{display:grid; gap:22px; align-content:start}
.contact-line{
  display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:baseline;
  padding-bottom:16px; border-bottom:1px solid var(--line);
}
.contact-line dt{
  font-family:var(--f-mono); font-size:10px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:var(--fg-dim); margin:0;
}
.contact-line dd{margin:0; color:var(--chalk); font-size:15.5px}

/* ---------- title block footer ---------- */
.tblock{border-top:1px solid var(--line-strong); padding-bottom:clamp(30px,4vw,56px)}
.tblock-in{
  display:grid; grid-template-columns:1fr; border-left:1px solid var(--line);
}
@media (min-width:760px){ .tblock-in{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .tblock-in{grid-template-columns:1.6fr repeat(3,1fr)} }
.tb{
  padding:24px clamp(18px,2vw,28px); border-right:1px solid var(--line);
  border-bottom:1px solid var(--line); display:grid; gap:10px; align-content:start;
}
.tb h4{
  font-family:var(--f-mono); font-weight:500; font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--fg-dim); margin:0;
}
.tb p{margin:0; color:var(--chalk); font-size:14px; line-height:1.55}
.tb--brand{gap:16px}
.tb--brand img{height:28px; width:auto; filter:var(--logo-filter)}
.tb--brand p{color:var(--fg-dim); font-size:13.5px; max-width:34ch}
.tb-nav{display:flex; flex-wrap:wrap; gap:8px 20px}
.tb-nav a{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--fg-dim); transition:color .3s var(--ease);
}
.tb-nav a:hover{color:var(--brass)}
.colophon{
  display:flex; justify-content:space-between; gap:14px 28px; flex-wrap:wrap;
  padding-top:22px;
}
.colophon p{margin:0; font-family:var(--f-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim)}

/* ---------- 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}
  .rv{opacity:1; transform:none}
  h1.hero-t .ln > span{transform:none}
  .gp-grid{opacity:1}
}

/* ============================================================
   Interior pages — service pages and /process.
   Reuses the home page system (.sec, .sec-head, .stages, .legend,
   .btn, .metrics) and adds only what those pages genuinely need.
   ============================================================ */

/* ---------- interior hero ---------- */
.page-hero{
  position:relative; min-height:min(84svh,860px); display:flex; flex-direction:column;
  justify-content:flex-end; padding:150px 0 clamp(40px,5vw,72px);
  scroll-margin-top:70px;
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to top,
      var(--ink) 0%,
      color-mix(in srgb,var(--ink) 66%,transparent) 26%,
      transparent 66%),
    linear-gradient(to right,
      color-mix(in srgb,var(--ink) 80%,transparent) 0%,
      color-mix(in srgb,var(--ink) 42%,transparent) 44%,
      transparent 70%);
}
@media (max-width:999px){
  .page-hero::after{
    background:linear-gradient(to top,
      var(--ink) 0%,
      color-mix(in srgb,var(--ink) 92%,transparent) 40%,
      color-mix(in srgb,var(--ink) 46%,transparent) 64%,
      transparent 90%);
  }
}
.page-hero > .wrap{position:relative; z-index:2}
.page-col{max-width:min(72%,900px)}
@media (max-width:999px){ .page-col{max-width:none} }

.crumb{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 clamp(22px,2.6vw,34px);
  font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim);
}
.crumb a{color:var(--fg-dim); transition:color .3s var(--ease)}
.crumb a:hover{color:var(--brass)}
.crumb .sep{opacity:.55}
.crumb b{color:var(--brass); font-weight:500}

.page-t{
  font-size:clamp(2.5rem,7.2vw,6.1rem); line-height:.9;
  margin:0 0 clamp(22px,2.6vw,34px);
}
.page-lede{
  font-family:var(--f-body); font-weight:300;
  font-size:clamp(17px,1.45vw,22px); line-height:1.6; color:var(--fg);
  max-width:58ch; margin:0 0 clamp(30px,3.4vw,44px);
}
.page-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:clamp(34px,4vw,54px)}

.hero-facts{
  list-style:none; margin:0; padding:22px 0 0; border-top:1px solid var(--line);
  display:grid; gap:16px 34px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.hero-facts li{display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start}
.hero-facts i{width:5px; height:5px; background:var(--brass); display:block; margin-top:7px; flex:none}
.hero-facts b{
  display:block; font-family:var(--f-mono); font-weight:500; font-size:10.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--chalk);
}
.hero-facts span{display:block; margin-top:5px; font-size:14px; color:var(--fg-dim); line-height:1.55}

/* ---------- outcomes: a legend of what the client actually gets ---------- */
.outcomes{display:grid; grid-template-columns:1fr; border-top:1px solid var(--line)}
@media (min-width:820px){ .outcomes{grid-template-columns:1fr 1fr} }
.out{
  padding:clamp(30px,3.4vw,46px) clamp(22px,2.6vw,40px) clamp(30px,3.4vw,46px) 0;
  border-bottom:1px solid var(--line); position:relative;
}
@media (min-width:820px){
  .out{border-right:1px solid var(--line); padding-right:clamp(26px,3vw,48px)}
  .out:nth-child(2n){border-right:0}
}
.out svg{width:30px; height:30px; stroke:var(--brass); fill:none; stroke-width:1.15; margin-bottom:18px}
.out h3{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.1rem,1.7vw,1.45rem); line-height:1.08; letter-spacing:-.005em;
  color:var(--chalk); margin:0 0 11px;
}
.out p{margin:0; color:var(--fg-dim); font-size:15px; line-height:1.62; max-width:42ch}

/* ---------- deliverables checklist ---------- */
.deliver{
  list-style:none; margin:0; padding:0;
  display:grid; gap:0 clamp(28px,3.4vw,60px); grid-template-columns:1fr;
}
@media (min-width:760px){ .deliver{grid-template-columns:1fr 1fr} }
.deliver li{
  display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start;
  padding:19px 0; border-bottom:1px solid var(--line);
}
.deliver .mark{
  width:15px; height:15px; border:1px solid var(--brass); margin-top:3px; flex:none;
  position:relative;
}
.deliver .mark::after{
  content:""; position:absolute; left:3px; top:6px; width:7px; height:3.5px;
  border-left:1.5px solid var(--brass); border-bottom:1.5px solid var(--brass);
  transform:rotate(-45deg);
}
.deliver b{
  display:block; font-family:var(--f-body); font-weight:500; font-size:15.5px;
  color:var(--chalk); margin-bottom:4px;
}
.deliver span{display:block; color:var(--fg-dim); font-size:14.5px; line-height:1.58}

/* ---------- platform blocks (paid social) ---------- */
.platform{
  padding:clamp(30px,3.4vw,48px) 0; border-top:1px solid var(--line);
  display:grid; gap:20px clamp(30px,3.6vw,64px); grid-template-columns:1fr;
}
.platform:last-of-type{border-bottom:1px solid var(--line)}
@media (min-width:900px){ .platform{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)} }
.platform h3{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.35rem,2.4vw,2.1rem); line-height:1.04; letter-spacing:-.005em;
  color:var(--chalk); margin:0 0 12px;
}
.platform > div > p{margin:0; color:var(--fg-dim); font-size:15px; line-height:1.62; max-width:44ch}
.platform ul{list-style:none; margin:0; padding:0}
.platform ul li{
  display:grid; grid-template-columns:auto 1fr; gap:13px; align-items:baseline;
  padding:11px 0; border-bottom:1px solid var(--line); color:var(--fg); font-size:14.5px;
}
.platform ul li:last-child{border-bottom:0}
.platform ul li::before{content:""; width:14px; height:1px; background:var(--brass); display:block}

/* ---------- what each stage actually covers ---------- */
.stage-sub{
  list-style:none; margin:14px 0 0; padding:0;
  display:grid; gap:8px 26px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.stage-sub li{
  display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:baseline;
  color:var(--fg-dim); font-size:14px; line-height:1.5;
}
.stage-sub li::before{content:""; width:11px; height:1px; background:var(--brass); display:block}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  list-style:none; cursor:pointer; padding:clamp(22px,2.4vw,30px) 44px clamp(22px,2.4vw,30px) 0;
  position:relative; font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1rem,1.5vw,1.28rem); letter-spacing:-.002em; color:var(--chalk);
  transition:color .3s var(--ease);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--brass)}
.faq summary::before,.faq summary::after{
  content:""; position:absolute; right:6px; top:50%; background:var(--brass);
  transition:transform .35s var(--ease),opacity .35s var(--ease);
}
.faq summary::before{width:15px; height:1px; margin-top:-.5px}
.faq summary::after{width:1px; height:15px; margin-top:-7.5px; right:13px}
.faq details[open] summary::after{transform:rotate(90deg); opacity:0}
.faq details[open] summary{color:var(--brass)}
.faq .ans{padding:0 clamp(30px,4vw,80px) clamp(24px,2.6vw,34px) 0}
.faq .ans p{margin:0; color:var(--fg-dim); font-size:15.5px; line-height:1.68; max-width:62ch}
.faq .ans p + p{margin-top:14px}

/* ---------- mid-page CTA band ---------- */
.band{
  border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
  padding:clamp(40px,5vw,72px) 0; margin-top:clamp(40px,5vw,72px);
  display:grid; gap:24px clamp(30px,4vw,64px); grid-template-columns:1fr; align-items:center;
}
@media (min-width:860px){ .band{grid-template-columns:minmax(0,1fr) auto} }
.band h3{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.4rem,2.9vw,2.4rem); line-height:1.04; letter-spacing:-.008em;
  color:var(--chalk); margin:0 0 10px; text-wrap:balance;
}
.band p{margin:0; color:var(--fg-dim); font-size:15.5px; line-height:1.6; max-width:52ch}

/* ---------- cross-sell to sibling services ---------- */
.xsell{display:grid; grid-template-columns:1fr; border-top:1px solid var(--line)}
@media (min-width:820px){ .xsell{grid-template-columns:repeat(3,1fr)} }
.xs{
  display:block; padding:clamp(26px,3vw,40px) clamp(22px,2.4vw,36px) clamp(26px,3vw,40px) 0;
  border-bottom:1px solid var(--line); position:relative;
  transition:padding-left .45s var(--ease);
}
@media (min-width:820px){
  .xs{border-right:1px solid var(--line); padding-right:clamp(22px,2.4vw,36px)}
  .xs:nth-child(3n){border-right:0}
  .xs:hover{padding-left:16px}
}
.xs::before{
  content:""; position:absolute; left:0; top:-1px; height:1px; width:0;
  background:var(--brass); transition:width .55s var(--ease);
}
.xs:hover::before{width:100%}
.xs .k{
  display:flex; align-items:center; gap:11px; margin-bottom:14px; color:var(--fg-dim);
  transition:color .4s var(--ease);
}
.xs .k svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.15; flex:none}
.xs .k b{font-family:var(--f-mono); font-weight:500; font-size:10px; letter-spacing:.2em; text-transform:uppercase}
.xs:hover .k{color:var(--brass)}
.xs h3{
  font-family:var(--f-display); font-weight:600; text-transform:uppercase;
  font-size:clamp(1.05rem,1.6vw,1.35rem); line-height:1.06; color:var(--chalk); margin:0 0 10px;
}
.xs p{margin:0 0 16px; color:var(--fg-dim); font-size:14.5px; line-height:1.58}
.xs .go{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-dim); display:flex; align-items:center; gap:9px;
  transition:color .35s var(--ease);
}
.xs .go .arw{transition:transform .4s var(--ease)}
.xs:hover .go{color:var(--brass)}
.xs:hover .go .arw{transform:translateX(6px)}

@media (prefers-reduced-motion:reduce){
  .xs:hover{padding-left:0}
}