/* ==========================================================================
   Framewrk — styles
   Structure: tokens → base → grid motif → nav → buttons → sections
   Motif rules: hatch = "not built yet". Electric blue = the one accent
   (CTAs, key highlights, and the moment an enquiry reaches the owner).
   ========================================================================== */

@font-face{font-family:"General Sans";src:url("../assets/fonts/general-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../assets/fonts/general-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../assets/fonts/general-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter-var.woff2") format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../assets/fonts/geist-mono-var.woff2") format("woff2");font-weight:400 500;font-style:normal;font-display:swap}

:root{
  color-scheme:dark;

  --ink:#0B0C0E;
  --graphite:#111316;
  --panel:#15181C;
  --panel-2:#1B1F24;
  --line:#262B32;
  --line-soft:rgba(236,234,228,.055);
  --wire:rgba(236,234,228,.26);
  --text:#ECEAE4;
  --muted:#9AA0AA;
  --dim:#848A94;
  --accent:#4C8DFF;
  --accent-hi:#7AA9FF;
  --accent-ink:#050B18;
  --accent-soft:rgba(76,141,255,.12);

  --f-display:"General Sans","Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --max:1240px;
  --gutter:clamp(16px,4vw,40px);
  --nav-h:68px;

  --hatch:repeating-linear-gradient(135deg,rgba(236,234,228,.13) 0 1px,transparent 1px 7px);
  --hatch-accent:repeating-linear-gradient(135deg,rgba(76,141,255,.75) 0 1px,transparent 1px 6px);
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:400 1rem/1.6 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--accent);color:var(--accent-ink)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 16px;background:var(--accent);color:var(--accent-ink);font-weight:600;transition:top .2s}
.skip:focus{top:12px}

.wrap{position:relative;width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}
main,.nav,.foot{position:relative;z-index:1}

.mono{font-family:var(--f-mono)}
.nb{white-space:nowrap}

/* Section label: mono, bracketed */
.tag{display:inline-flex;align-items:center;gap:.6em;font:500 .75rem/1.3 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
/* Decorative brackets: the second `content` gives them empty alt text, so screen readers skip them */
.tag::before{content:"[";content:"[" / "";color:var(--dim)}
.tag::after{content:"]";content:"]" / "";color:var(--dim)}

h2,h3,.step__n,.price__amount{font-family:var(--f-display)}
h2{font-weight:600;font-size:clamp(2rem,4.2vw,3.5rem);line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
h3{font-weight:600;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.15;letter-spacing:-.02em}
.sub{margin-top:20px;max-width:56ch;font-size:clamp(1rem,1.3vw,1.125rem);color:var(--muted);text-wrap:pretty}
.lab{font:500 .6875rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.fine{font-size:.8125rem;color:var(--dim);line-height:1.5}

/* Text the owner still has to write: impossible to miss, and flagged by scripts/build-site.ps1 */
p.todo,.legal p.todo{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;padding:12px 14px;background:var(--accent-soft);border:1px dashed var(--accent);color:var(--text)}
details p.todo,.legal p.todo{margin-bottom:22px}
.todo__tag{font:500 .6875rem/1 var(--f-mono);letter-spacing:.09em;color:var(--accent)}

/* ---------- Grid motif ---------- */
.gridlines{position:fixed;inset:0;z-index:0;pointer-events:none}
.gridlines .wrap{height:100%;display:grid;grid-template-columns:repeat(12,1fr);border-right:1px solid var(--line-soft)}
.gridlines i{border-left:1px solid var(--line-soft)}

/* Corner brackets: reusable frame device */
.corners{position:relative;--bk:10px;--bc:var(--wire)}
.corners::after,.btn::after{
  content:"";position:absolute;pointer-events:none;
  background:
    linear-gradient(var(--bc),var(--bc)) top left/var(--bk) 1px no-repeat,
    linear-gradient(var(--bc),var(--bc)) top left/1px var(--bk) no-repeat,
    linear-gradient(var(--bc),var(--bc)) top right/var(--bk) 1px no-repeat,
    linear-gradient(var(--bc),var(--bc)) top right/1px var(--bk) no-repeat,
    linear-gradient(var(--bc),var(--bc)) bottom left/var(--bk) 1px no-repeat,
    linear-gradient(var(--bc),var(--bc)) bottom left/1px var(--bk) no-repeat,
    linear-gradient(var(--bc),var(--bc)) bottom right/var(--bk) 1px no-repeat,
    linear-gradient(var(--bc),var(--bc)) bottom right/1px var(--bk) no-repeat;
}
.corners::after{inset:-1px;--bk:14px;--bc:var(--text);opacity:.5}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);border-bottom:1px solid transparent;transition:background-color .25s,border-color .25s}
.nav.is-stuck,.nav.is-open{background:rgba(11,12,14,.86);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.nav .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:inline-flex;align-items:center;gap:10px;font:600 1.3rem/1 var(--f-display);letter-spacing:-.035em}
.logo svg{color:var(--text)}
.nav__menu{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);font-size:.9rem;color:var(--muted)}
.nav__menu a:not(.btn){position:relative;padding:6px 0;transition:color .2s}
.nav__menu a:not(.btn)::before,.nav__menu a:not(.btn)::after{position:absolute;top:50%;translate:0 -50%;color:var(--accent);opacity:0;transition:opacity .2s,translate .2s;font-family:var(--f-mono)}
.nav__menu a:not(.btn)::before{content:"[";left:-11px;translate:4px -50%}
.nav__menu a:not(.btn)::after{content:"]";right:-11px;translate:-4px -50%}
.nav__menu a:not(.btn):hover,.nav__menu a[aria-current="page"]{color:var(--text)}
.nav__menu a:not(.btn):hover::before,.nav__menu a:not(.btn):hover::after,
.nav__menu a[aria-current="page"]::before,.nav__menu a[aria-current="page"]::after{opacity:1;translate:0 -50%}
.nav__toggle{display:none;position:relative;width:44px;height:44px;background:none;border:1px solid var(--line);cursor:pointer}
.nav__toggle i{position:absolute;left:12px;right:12px;height:1.5px;background:var(--text);transition:transform .25s var(--ease),top .25s var(--ease)}
.nav__toggle i:nth-of-type(1){top:17px}
.nav__toggle i:nth-of-type(2){top:25px}
.nav.is-open .nav__toggle i:nth-of-type(1){top:21px;transform:rotate(45deg)}
.nav.is-open .nav__toggle i:nth-of-type(2){top:21px;transform:rotate(-45deg)}

/* ---------- Buttons ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.65em;padding:1.05em 1.6em;font:600 .95rem/1 var(--f-display);letter-spacing:-.005em;border:1px solid transparent;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.btn svg{transition:transform .25s var(--ease)}
.btn:hover svg{transform:translateX(3px)}
.btn::after{inset:-6px;--bk:9px;--bc:var(--accent);opacity:0;transform:scale(.94);transition:opacity .2s,transform .25s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{opacity:1;transform:none}
.btn--primary{background:var(--accent);color:var(--accent-ink)}
.btn--primary:hover{background:var(--accent-hi)}
.btn--ghost{border-color:var(--wire);color:var(--text)}
.btn--ghost:hover{border-color:var(--text)}
.btn--sm{padding:.8em 1.2em;font-size:.875rem}
.btn--block{width:100%}
.nav__quick{display:none;margin-left:auto;white-space:nowrap}
.sticky-cta{display:none}

/* ---------- Section scaffolding ---------- */
.sec{position:relative;padding-block:clamp(48px,8vw,110px);border-top:1px solid var(--line);scroll-margin-top:calc(var(--nav-h) - 1px)}
.sec::before,.sec::after{
  content:"";position:absolute;top:0;width:13px;height:13px;translate:-50% -50%;z-index:2;pointer-events:none;
  background:
    linear-gradient(var(--dim),var(--dim)) center/1px 100% no-repeat,
    linear-gradient(var(--dim),var(--dim)) center/100% 1px no-repeat;
}
.sec::before{left:calc(50% - min(100% - 2 * var(--gutter),var(--max)) / 2)}
.sec::after{left:calc(50% + min(100% - 2 * var(--gutter),var(--max)) / 2)}

/* Section headings, the same in every section: the bracketed label, then the heading under it,
   both on the left edge (.head here; .faq__intro and .contact__copy follow it) */
.head{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:clamp(28px,4.5vw,64px)}
.head__body{max-width:760px}
.head__body h2,.faq__intro h2,.contact__copy h2{margin-top:18px}

/* Scroll reveal (progressive: only hidden when JS is running) */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--rd,0s)}
.js .reveal.is-in{opacity:1;transform:none}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;padding-top:calc(var(--nav-h) + clamp(28px,5vw,72px));padding-bottom:clamp(40px,7vw,96px)}
.hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(36px,5vw,72px);align-items:center}
.hero__tag{margin-bottom:clamp(16px,2.4vw,28px)}
.hero h1{font:600 clamp(3rem,6.5vw,6rem)/.93 var(--f-display);letter-spacing:-.045em;text-wrap:balance}
.brk{color:var(--accent);font-weight:500;letter-spacing:-.02em}
.lede{margin-top:clamp(16px,2.4vw,32px);max-width:38ch;font-size:clamp(1.05rem,1.55vw,1.3rem);line-height:1.5;color:var(--muted);text-wrap:pretty}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,3vw,36px)}
.hero__micro{margin-top:16px;font-size:.875rem;color:var(--dim)}
.hero__copy .lede{max-width:46ch}

/* --- Blueprint: the wireframe that builds itself --- */
.bp{position:relative;container-type:inline-size;margin-bottom:64px}
.bp__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.stages{display:flex;border:1px solid var(--line);background:var(--ink)}
.stages button{position:relative;padding:10px 13px;background:transparent;border:0;cursor:pointer;font:500 .6875rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .2s,background-color .2s}
.stages button+button{border-left:1px solid var(--line)}
.stages button:hover{color:var(--text)}
.stages button[aria-pressed="true"]{color:var(--text);background:var(--panel-2)}
.stages button[aria-pressed="true"]::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent)}
.bp__spec{font:500 .6875rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
/* Pause/play for the activity feed (hidden when reduced motion is on: nothing moves then) */
.bp__pause{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;background:var(--ink);border:1px solid var(--line);cursor:pointer;font:500 .6875rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .2s,border-color .2s}
.bp__pause:hover{color:var(--text);border-color:var(--wire)}
.bp__pause::before{content:"";width:8px;height:9px;border-inline:2.5px solid currentColor;box-sizing:border-box}
.bp__pause[aria-pressed="true"]::before{border:0;border-left:8px solid currentColor;border-block:4.5px solid transparent;width:0;height:0}
.bp__frame{position:relative;padding:12px}
.bp__screen{position:relative;overflow:hidden;background:var(--graphite);border:1px solid var(--line);aspect-ratio:1 / .82}
.bp__cols{position:absolute;inset:12px;display:grid;grid-template-columns:repeat(4,1fr);pointer-events:none;z-index:5}
.bp__cols i{border-left:1px dashed rgba(236,234,228,.1)}
.bp__cols i:last-child{border-right:1px dashed rgba(236,234,228,.1)}

/* Stage readout, driven purely by data-stage */
.bp__status{position:absolute;right:0;bottom:0;z-index:6;padding:6px 9px;background:var(--ink);border-top:1px solid var(--line);border-left:1px solid var(--line);font:500 .625rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.bp__status::before{content:"Stage · Design"}
.bp[data-stage="1"] .bp__status::before{content:"Stage · Build"}
.bp[data-stage="2"] .bp__status::before{content:"Stage · Live"}

/* The mock site: a miniature small-business website, light so it reads as the client's own.
   All sizes in cqw so it scales with the frame. Dark while it's still a wireframe. */
.dm{--dm-bg:#EEF0F3;--dm-card:#FFFFFF;--dm-text:#15181C;--dm-muted:#5B6370;--dm-line:#D6DBE2;position:absolute;inset:0;display:flex;flex-direction:column;background:var(--dm-bg);color:var(--dm-text);font-size:max(8px,2.4cqw);transition:background-color .6s ease .3s}
.js .bp[data-stage="0"] .dm{background:var(--graphite);transition-delay:0s}
.dm__nav{display:flex;align-items:center;justify-content:space-between;gap:2cqw;padding:2.6cqw 3.6cqw;background:var(--dm-card);border-bottom:1px solid var(--dm-line)}
.dm__logo{display:flex;align-items:center;gap:1.4cqw;font:600 max(9px,2.8cqw)/1 var(--f-display);letter-spacing:-.03em}
.dm__logo i{width:3.2cqw;height:3.2cqw;background:var(--dm-text)}
.dm__links{display:flex;align-items:center;gap:2.6cqw;font-size:max(7px,1.9cqw);color:var(--dm-muted)}
.dm__call{padding:1cqw 1.8cqw;background:var(--accent);color:var(--accent-ink);font-weight:600}
.dm__body{flex:1;min-height:0;display:flex;flex-direction:column;gap:2.6cqw;padding:3.4cqw 3.6cqw}
.dm__hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:2.6cqw}
.dm__copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.8cqw;padding-block:1cqw}
.dm__h{font:600 max(11px,4.4cqw)/1.02 var(--f-display);letter-spacing:-.035em}
.dm__p{font-size:max(7px,1.9cqw);line-height:1.35;color:var(--dm-muted)}
.dm__btn,.dm__send{padding:1.4cqw 2.2cqw;background:var(--accent);color:var(--accent-ink);font:600 max(7px,1.9cqw)/1 var(--f-display);transition:background-color .2s}
.dm__btn{margin-top:auto}
.dm__img{min-height:25cqw;background:radial-gradient(circle at 74% 28%,rgba(255,255,255,.55) 0 4.6cqw,transparent 4.8cqw),linear-gradient(165deg,#9FB6D8 0%,#5D78A1 52%,#2B3B55 100%)}
.dm__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.8cqw}
.dm__card{display:flex;flex-direction:column;gap:1.2cqw;padding:2cqw;background:var(--dm-card);border:1px solid var(--dm-line)}
.dm__card b{font:600 max(8px,2.2cqw)/1 var(--f-display);letter-spacing:-.02em}
.dm__card i{height:.9cqw;background:var(--dm-line)}
.dm__card i+i{width:70%}
.dm__form{position:relative;padding:2.4cqw;background:var(--dm-card);border:1px solid var(--dm-line)}
.dm__fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr) auto;align-items:end;gap:1.6cqw;transition:opacity .35s ease}
.dm__field{display:flex;flex-direction:column;gap:.8cqw;min-width:0}
.dm__field small{font:500 max(6px,1.5cqw)/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dm-muted)}
.dm__type{display:block;min-height:calc(1.2em + 2.6cqw);padding:1.3cqw 1.4cqw;overflow:hidden;white-space:nowrap;background:var(--dm-bg);border:1px solid var(--dm-line);font-size:max(7px,1.8cqw);line-height:1.2}
/* The visitor types, presses Send, and the form becomes a thank-you message: data-live 0 → 3 */
.dm__type>span{display:inline-block;clip-path:inset(0 100% 0 0);transition:clip-path .9s steps(16,end)}
.dm__field--wide .dm__type>span{transition-duration:1.1s;transition-delay:.35s}
.bp:not([data-live="0"]) .dm__type>span{clip-path:inset(0)}
.bp[data-live="2"] .dm__send{background:var(--accent-hi)}
.dm__sent{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:.9cqw;padding:0 3cqw;background:var(--dm-card);border-left:.8cqw solid var(--accent);opacity:0;transition:opacity .35s ease}
.dm__sent b{font:600 max(9px,2.6cqw)/1 var(--f-display);letter-spacing:-.02em}
.dm__sent span{font-size:max(7px,1.8cqw);color:var(--dm-muted)}
.bp[data-live="3"] .dm__fields{opacity:0}
.bp[data-live="3"] .dm__sent{opacity:1}

/* Wire state: each .el is covered by a hatched, dashed placeholder that lifts on build */
.el{position:relative}
.el::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
  background:var(--hatch),var(--ink);border:1px dashed var(--wire);
  opacity:0;transition:opacity .45s ease 0s;
}
.el::before{
  content:attr(data-label);position:absolute;top:.7cqw;left:1cqw;z-index:4;pointer-events:none;
  font:500 max(6.5px,1.6cqw)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  opacity:0;transition:opacity .2s;
}
.el:not([data-label])::before{display:none}
.js .bp[data-stage="0"] .el::after,
.js .bp[data-stage="0"] .el::before{opacity:1}
.js .bp:not([data-stage="0"]) .el::after{transition-delay:var(--d,0s)}

/* Enquiry alerts that overhang the frame once the site is live */
.events{position:absolute;right:-8px;bottom:-56px;z-index:8;width:min(330px,88%);display:flex;flex-direction:column}
.ev{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .45s var(--ease),opacity .4s ease}
.ev__in{min-height:0;overflow:hidden}
.ev__card{margin-top:8px;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line)}
.ev__head{display:flex;align-items:center;gap:8px;font:500 .625rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.ev__head i{width:6px;height:6px;background:var(--dim)}
.ev__card--auto{border-color:rgba(76,141,255,.34)}
.ev__card--auto .ev__head i{background:var(--accent)}
.ev__text{margin-top:7px;font-size:.8125rem;line-height:1.4;color:var(--text)}
.js .ev:not(.is-in){grid-template-rows:0fr;opacity:0}
.js .ev.is-out{grid-template-rows:0fr;opacity:0}
.js .bp:not([data-stage="2"]) .events{visibility:hidden}

/* ==========================================================================
   THE PROBLEM: three panels, each capped with the hatch (the "not built yet" motif)
   ========================================================================== */
/* Each card: the problem on top, then how we fix it and the result. On wider screens the cards
   share two grid rows (subgrid), so the three "How we fix it" halves start at the same height. */
.problems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto auto;column-gap:clamp(16px,2vw,28px)}
.problem{position:relative;display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0;background:var(--panel);border:1px solid var(--line)}
.problem::before{content:"";position:absolute;inset:-1px -1px auto;height:8px;background:var(--hatch),var(--ink);border:1px dashed var(--wire)}
.problem__issue,.problem__fix{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,2.4vw,34px)}
.problem__issue{padding-top:calc(clamp(22px,2.4vw,34px) + 8px)}
.problem__n{margin-bottom:4px;font:500 .75rem/1 var(--f-mono);letter-spacing:.09em;color:var(--dim)}
.problem__issue p{color:var(--muted)}
/* The fix: solid and blue where the problem is hatched */
.problem__fix{position:relative;background:var(--panel-2);border-top:1px solid var(--line)}
.problem__fix::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--accent)}
.problem__label{font:500 .6875rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.problem__fix p:not(.problem__label){color:var(--text)}
.problem__result{display:flex;align-items:flex-start;gap:10px;margin-top:auto;padding-top:14px;border-top:1px dashed var(--line);font:600 1rem/1.35 var(--f-display);letter-spacing:-.01em}
.problem__result svg{flex:none;margin-top:3px;color:var(--accent)}

/* ==========================================================================
   WHAT'S INCLUDED: a ruled grid; all six items look alike, each marked as included
   ========================================================================== */
.incl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-right:1px solid var(--line)}
.incl__item{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(22px,2.4vw,34px);border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.incl__item::before{content:"";position:absolute;top:-5px;left:-5px;width:9px;height:9px;background:var(--ink);border:1px solid var(--text)}
.incl__icon{width:28px;height:28px;margin-bottom:6px;color:var(--accent)}
.incl__item p{color:var(--muted)}
/* Every item carries the same "Included" mark, so none reads as the only one */
.incl__tick{position:absolute;top:calc(clamp(22px,2.4vw,34px) + 9px);right:clamp(22px,2.4vw,34px);display:inline-flex;align-items:center;gap:8px;font:500 .625rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.incl__tick::before{content:"";width:9px;height:5px;margin-top:-3px;border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);rotate:-45deg}

/* ==========================================================================
   LEAD ALERTS: the four steps behind the hero animation. On phones the
   animation itself moves in here (js/main.js), so the hero is text only.
   ========================================================================== */
.demo-slot{margin-bottom:clamp(28px,4vw,48px)}
.demo-slot:empty{display:none}
/* Numbered squares, all alike, joined by a line */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px clamp(20px,2.4vw,32px);padding-top:28px;border-top:1px solid var(--line)}
.flow__step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.flow__step::before{content:"";position:absolute;top:15px;left:42px;right:calc(12px - clamp(20px,2.4vw,32px));height:1px;background:var(--line)}
.flow__step:last-child::before{display:none}
.flow__n{display:grid;place-items:center;width:30px;height:30px;margin-bottom:8px;background:var(--accent-soft);border:1px solid var(--accent);font:500 .625rem/1 var(--f-mono);letter-spacing:.06em;color:var(--accent)}
.flow__step h3{font-size:1.05rem;letter-spacing:-.01em}
.flow__step p{font-size:.9375rem;color:var(--muted)}

/* ==========================================================================
   RECENT WORK: the portfolio's sites, each card linking to its case study
   ========================================================================== */
.work{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.work__item{position:relative;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);transition:border-color .2s}
.work__item:hover{border-color:var(--wire)}
.work__shot{display:block;width:100%;height:auto;aspect-ratio:8 / 5;object-fit:cover;object-position:top;border-bottom:1px solid var(--line)}
.work__body{display:flex;flex-direction:column;gap:4px;padding:clamp(14px,1.6vw,20px)}
.work__name{font:600 clamp(1rem,1.3vw,1.15rem)/1.25 var(--f-display);letter-spacing:-.01em}
/* The whole card is the link's target; the name is the link's text */
.work__name a{transition:color .2s}
.work__name a::after{content:"";position:absolute;inset:0;z-index:2}
.work__name a:focus-visible{outline:none}
.work__item:has(a:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.work__item:hover .work__name a{color:var(--accent-hi)}
.work__type{font-size:.875rem;color:var(--muted)}
.work__more{margin-top:clamp(16px,2.2vw,28px)}
.work__more a{display:inline-flex;align-items:center;gap:.55em;padding-block:12px;font:600 .95rem/1 var(--f-display);text-decoration:underline;text-decoration-color:var(--wire);text-underline-offset:6px;transition:color .2s,text-decoration-color .2s}
.work__more a:hover{color:var(--accent-hi);text-decoration-color:currentColor}
.work__more svg{transition:transform .25s var(--ease)}
.work__more a:hover svg{transform:translateX(3px)}

/* ==========================================================================
   CTA STRIP: a short, repeatable prompt to enquire
   ========================================================================== */
.cta-strip{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:clamp(24px,3.6vw,44px);padding:clamp(16px,2.2vw,26px) clamp(18px,2.6vw,32px);background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent)}
.cta-strip p{font:600 clamp(1.05rem,1.8vw,1.4rem)/1.25 var(--f-display);letter-spacing:-.02em;color:var(--muted)}
.cta-strip strong{font-weight:600;color:var(--text)}

/* ==========================================================================
   PRICING
   ========================================================================== */
/* Two cards side by side, the agency comparison first. They share five grid rows (subgrid):
   heading, price, notes, details and footer, so both cards are the same height and the prices
   sit on the same line. The footnote and the payoff line follow. */
.prices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto 1fr auto;column-gap:clamp(20px,3vw,40px)}
.price{display:grid;grid-row:1 / span 5;grid-template-rows:subgrid;row-gap:14px;padding:clamp(24px,3.2vw,44px);background:var(--panel);border:1px solid var(--line)}
.price>:nth-child(2){align-self:last baseline}
.price--agency{grid-column:1;background:none}
.price--main{grid-column:2;border-top:2px solid var(--accent);--bc:var(--wire)}
.price.corners::after{inset:-7px;--bk:12px;opacity:1}
.prices__footnote{grid-column:1;grid-row:6;margin-top:12px}

.price__head{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.price__label{color:var(--muted)}
/* The agency card has no toggle, so its label sits at the foot of the heading row, just above its price */
.price--agency .price__head{align-self:end}
.price__title{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.price__badge{padding:5px 8px;background:var(--accent-soft);border:1px solid var(--accent);font:500 .625rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.price__amount{font-weight:600;font-size:clamp(3.4rem,7vw,6rem);line-height:.9;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.price__amount span{margin-left:.3em;font-size:.26em;font-weight:500;letter-spacing:-.01em;color:var(--dim)}
.price__amount .price__per{margin-left:.14em}
.price__amount--agency{font-size:clamp(2rem,3.4vw,3.1rem);letter-spacing:-.04em;color:var(--muted)}
.price__notes,.price__notes [data-plan]{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.price__sub{font-size:.9375rem;color:var(--muted)}
/* Yearly: a year at the monthly price, struck through, then the saving */
.price__was{display:flex;align-items:center;gap:10px;font-size:.9375rem;color:var(--dim)}
.price__was s{text-decoration-thickness:1.5px}
.price__save{padding:3px 7px;background:var(--accent-soft);border:1px solid var(--accent);font:500 .6875rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.price__foot .fine a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.price__foot .fine a:hover{color:var(--accent-hi)}
.price__note{font:500 .75rem/1.4 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.price__alt{margin-top:4px;font-size:.875rem;color:var(--muted)}
/* What's included, in one line: the section above has the detail */
.price__incl{margin-top:8px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted)}
.price__incl a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.price__incl a:hover{color:var(--accent-hi)}
.price__promise{font-size:.9375rem;color:var(--text)}
.price__foot{display:flex;flex-direction:column;gap:14px;padding-top:8px}
.price__todo{font-size:.8125rem}

/* The agency card: rows of what an agency charges, muted, no accent */
.vs{display:grid;align-content:start;margin-top:8px;border-top:1px solid var(--line)}
.vs__row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.9375rem}
.vs dt{color:var(--dim)}
.vs dd{margin:0;color:var(--muted);text-align:right}
.vs__row--no dd{display:inline-flex;align-items:center;gap:7px}
.vs__x{flex:none}
.price__total{padding-top:8px;font:600 clamp(1.05rem,1.4vw,1.2rem)/1.3 var(--f-display);letter-spacing:-.01em;color:var(--muted)}

/* Monthly / Yearly. Without JavaScript the toggle is hidden, only the monthly price shows and
   .price__alt gives the yearly one. With it, both prices share one grid cell (so the card
   never changes size) and js/main.js sets data-billing on the card. */
.billing{display:none;min-width:0;margin:0;padding:3px;background:var(--ink);border:1px solid var(--line)}
.js .billing{display:inline-flex}
.billing__opt{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;cursor:pointer;font:500 .75rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .2s,background-color .2s}
.billing__opt input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.billing__opt:hover{color:var(--text)}
.billing__opt:has(input:checked){background:var(--panel-2);color:var(--text);box-shadow:inset 0 2px 0 var(--accent)}
.billing__opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.billing__save{padding:4px 6px;background:var(--accent-soft);border:1px solid var(--accent);font-size:.625rem;letter-spacing:.06em;color:var(--accent)}
html:not(.js) .price--main [data-plan="yearly"]{display:none}
.js .price__alt{display:none}
.js .price__swap{display:grid;align-items:start}
.js .price__swap>[data-plan]{grid-area:1 / 1;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
.js .price--main[data-billing="monthly"] [data-plan="yearly"],
.js .price--main[data-billing="yearly"] [data-plan="monthly"]{visibility:hidden;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility 0s .2s}

.prices__payoff{grid-column:1 / -1;grid-row:7;max-width:30ch;margin-top:clamp(32px,4vw,52px);font:600 clamp(1.4rem,2.6vw,2.2rem)/1.15 var(--f-display);letter-spacing:-.03em;color:var(--muted);text-wrap:balance}
.prices__payoff strong{font-weight:600;color:var(--text)}

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);border-right:1px solid var(--line)}
.step{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2vw,30px);border-left:1px solid var(--line)}
.step__n{display:block;margin-bottom:clamp(6px,1.4vw,20px);font-weight:700;font-size:clamp(3rem,5vw,4.75rem);line-height:.8;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--wire);transition:color 1s var(--ease) .25s}
.step.is-in .step__n{color:rgba(236,234,228,.075)}
.step h3{margin-top:2px}
.step p{color:var(--muted)}
.how__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.6vw,44px)}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr))}
.faq__intro{grid-column:1 / 5;padding-right:clamp(16px,3vw,48px);display:flex;flex-direction:column;align-items:flex-start}
.faq__list{grid-column:5 / 13;border-top:1px solid var(--line)}
details{border-bottom:1px solid var(--line)}
summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 0;cursor:pointer;list-style:none;font:600 clamp(1.05rem,1.6vw,1.3rem)/1.25 var(--f-display);letter-spacing:-.02em}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;font:400 1.6rem/1 var(--f-mono);color:var(--muted);transition:transform .3s var(--ease),color .2s}
summary:hover::after{color:var(--text)}
details[open] summary::after{transform:rotate(45deg);color:var(--accent)}
details p{max-width:62ch;padding-bottom:22px;color:var(--muted)}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(36px,6vw,96px);align-items:start}
.contact__copy{display:flex;flex-direction:column;align-items:flex-start}

.form{display:flex;flex-direction:column;gap:16px;padding:clamp(24px,3.2vw,44px);background:var(--panel);border:1px solid var(--line);--bc:var(--wire)}
.form.corners::after{inset:-7px;--bk:12px;opacity:1}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0;border:0;padding:0;margin:0}
.field label,.field legend{padding:0;font:500 .8125rem/1.3 var(--f-body);color:var(--text)}
.opt{margin-left:6px;font:400 .75rem var(--f-mono);letter-spacing:.04em;color:var(--dim);text-transform:lowercase}
.field input[type="text"],.field input[type="email"],.field input[type="tel"],.field textarea,.field select{width:100%;padding:14px;background:var(--graphite);border:1px solid var(--dim);border-radius:0;color:var(--text);transition:border-color .2s,background-color .2s}
.field textarea{resize:vertical;min-height:110px}
/* A drawn chevron, so the list looks like the other fields */
.field select{appearance:none;-webkit-appearance:none;padding-right:44px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.field input::placeholder{color:var(--dim)}
.field input:hover,.field textarea:hover,.field select:hover{border-color:var(--text)}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:none;border-color:var(--accent);background-color:var(--ink)}
/* Problems found by form.js: the field, and a message under it. Specific enough to beat the
   input[type] rules above; the field being fixed keeps its focus color. */
.field [aria-invalid="true"]:not(:focus-visible){border-color:#FF9A8A}
.field-error{font-size:.8125rem;line-height:1.4;color:#FF9A8A}
.form__hint{margin-top:-6px;font-size:.8125rem;color:var(--dim)}
.form__count{font-size:.8125rem;color:var(--dim);font-variant-numeric:tabular-nums}
.lead-form [data-turnstile]:empty{display:none}
.lead-form[aria-busy="true"] .btn{opacity:.7;cursor:progress}

.form__consent{font-size:.8125rem;line-height:1.5;color:var(--muted)}
.form__consent a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.form__consent a:hover{color:var(--accent-hi)}
/* Sending / what went wrong (an aria-live region, read out by screen readers) */
.form__status{min-height:1.5em;font-size:.875rem;line-height:1.5;color:var(--text)}
.form__status:empty{min-height:0}

/* Once sent, form.js swaps the form for this message */
.form-success{padding:clamp(24px,3.2vw,44px);background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--accent)}
.form-success:focus{outline:none}
.form-success__title{margin-bottom:12px;font:600 clamp(1.6rem,3vw,2.4rem)/1.05 var(--f-display);letter-spacing:-.035em}
.form-success p:not(.form-success__title){max-width:44ch;color:var(--muted)}

/* ==========================================================================
   PORTFOLIO (portfolio/index.html)
   An index of the projects, then one case study each: a numbered header, the
   screenshot in a browser frame, and what's on the page, its palette and type.
   Then the foundations every site shares.
   ========================================================================== */
.hero--page{padding-bottom:clamp(32px,5vw,64px)}
.hero--page h1{font-size:clamp(2.75rem,6vw,5.25rem)}

.case-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(28px,4vw,52px);border-top:1px solid var(--line)}
.case-index a{display:flex;flex-direction:column;gap:6px;height:100%;padding:16px 16px 18px 0;border-bottom:1px solid var(--line);font:600 1.05rem/1.2 var(--f-display);letter-spacing:-.01em;transition:color .2s}
.case-index a span{font:500 .6875rem/1 var(--f-mono);letter-spacing:.09em;color:var(--dim)}
.case-index em{font:400 .8125rem/1.3 var(--f-body);font-style:normal;color:var(--muted)}
.case-index a:hover{color:var(--accent-hi)}

.cases{display:grid;gap:clamp(72px,10vw,144px)}
.case{scroll-margin-top:calc(var(--nav-h) + 24px)}
.case__head{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);gap:12px clamp(20px,3vw,48px);align-items:end;margin-bottom:clamp(20px,2.6vw,32px)}
.case__n{font:700 clamp(3.2rem,6vw,5.5rem)/.78 var(--f-display);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:1px var(--wire)}
.case__head h2{margin-top:14px;font-size:clamp(1.8rem,3.4vw,2.9rem)}
.case__aim{max-width:44ch;font-size:clamp(1rem,1.3vw,1.125rem);color:var(--muted);text-wrap:pretty}

.work__frame{background:var(--panel);border:1px solid var(--line)}
.work__bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line)}
.work__bar i{width:7px;height:7px;background:var(--line)}
.work__bar span{min-width:0;margin-left:8px;overflow:hidden;font:500 .6875rem/1 var(--f-mono);letter-spacing:.06em;color:var(--dim);white-space:nowrap;text-overflow:ellipsis}
.work__screen{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:var(--graphite)}
.work__screen img{width:100%;height:100%;object-fit:cover;object-position:top}
/* A live project's link, under its screenshot (see the comment in portfolio/index.html) */
.case__visit{display:inline-flex;align-items:center;gap:.5em;margin-top:16px;font:600 .95rem/1 var(--f-display);color:var(--accent)}
.case__visit svg{transition:transform .25s var(--ease)}
.case__visit:hover svg{transform:translateX(3px)}

.case__details{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr) minmax(0,2fr);margin-top:clamp(20px,2.6vw,32px);border-top:1px solid var(--line)}
.case__col{padding:20px clamp(16px,2vw,28px) 4px 0}
.case__col+.case__col{padding-left:clamp(16px,2vw,28px);border-left:1px solid var(--line)}
.case__col h3{margin-bottom:16px}
.case__list{display:grid;gap:10px}
.case__list li{position:relative;padding-left:24px;color:var(--muted)}
.case__list li::before{content:"+";position:absolute;left:0;top:0;font:500 1rem/1.6 var(--f-mono);color:var(--accent)}
.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.swatches li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:10px;align-items:center;font-size:.875rem;line-height:1.3;color:var(--text)}
.swatches i{grid-row:span 2;width:32px;height:32px;background:var(--c);border:1px solid var(--wire)}
.swatches code{font:500 .6875rem/1.3 var(--f-mono);letter-spacing:.06em;color:var(--dim)}
.case__type{display:flex;flex-direction:column;gap:2px;font:600 1.05rem/1.25 var(--f-display);letter-spacing:-.01em}
.case__type+.case__type{margin-top:14px}
.case__type span{font:500 .6875rem/1.3 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}

/* Every site we build: four ruled columns */
.traits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-right:1px solid var(--line)}
.traits li{display:flex;flex-direction:column;gap:10px;padding:clamp(20px,2.2vw,30px);border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.trait__n{margin-bottom:6px;font:500 .75rem/1 var(--f-mono);letter-spacing:.09em;color:var(--accent)}
.traits p{color:var(--muted)}
.traits+.cta-strip{margin-top:clamp(40px,5vw,72px)}

/* ==========================================================================
   LEGAL PAGES (privacy/, terms/) and the 404 page
   ========================================================================== */
.legal{max-width:68ch}
.legal__updated{margin-top:16px;font:500 .75rem/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.legal h2{margin:clamp(32px,4vw,48px) 0 14px;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.2;letter-spacing:-.02em}
.legal p,.legal li{color:var(--muted)}
.legal p+p{margin-top:12px}
.legal ul{display:grid;gap:8px;margin-top:12px;padding-left:1.2em;list-style:square}
.legal li::marker{color:var(--dim)}
.legal strong{color:var(--text);font-weight:600}
.legal a{color:var(--text);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--accent-hi)}
.nf__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(22px,3vw,36px)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot{border-top:1px solid var(--line);padding-top:clamp(48px,6vw,80px);overflow:hidden}
.foot__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 0;align-items:start}
.foot__grid>div:first-child{grid-column:1 / 6}
.foot__grid nav{grid-column:8 / 13;display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;align-content:start;font-size:.9375rem;color:var(--muted)}
.foot__grid nav a:hover{color:var(--text)}
.foot__links{display:flex;gap:20px}
.foot__links a{padding-block:4px;color:var(--muted)}
.foot__links a:hover,.foot__links a[aria-current="page"]{color:var(--text)}
.foot__tag{margin-top:18px;max-width:28ch;color:var(--muted)}
.foot__mark{display:flex;justify-content:center;margin-top:clamp(40px,7vw,90px);font:700 clamp(4.2rem,20.5vw,19rem)/.74 var(--f-display);letter-spacing:-.065em;white-space:nowrap;color:transparent;-webkit-text-stroke:1px var(--wire);user-select:none;padding-bottom:.02em}
.foot__mark .wrk{color:rgba(236,234,228,.07)}
.foot__legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-block:22px;border-top:1px solid var(--line);font:500 .75rem/1.4 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--dim);position:relative;background:var(--ink)}
.foot__legal{width:100%;padding-inline:max(var(--gutter),calc((100% - var(--max)) / 2))}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* The hero keeps its two columns down to small tablets, so a 1024px screen isn't half empty */
@media (max-width:960px){
  .hero__grid{grid-template-columns:minmax(0,1fr)}
  .hero__copy{max-width:640px}
  .bp{max-width:560px}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow__step:nth-child(2n)::before{display:none}
}

@media (max-width:1080px){
  /* Case details: what's on the page | palette, with the type underneath (a third column gets too narrow) */
  .case__details{grid-template-columns:minmax(0,3fr) minmax(0,2fr)}
  .case__col:last-child{grid-column:1 / -1;padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:20px}
  .case__col:last-child{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:clamp(32px,6vw,64px)}
  .case__col:last-child h3{flex-basis:100%}
  .case__type+.case__type{margin-top:0}
  .incl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .work{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .step:nth-child(n+4){border-top:1px solid var(--line)}
  .faq__intro{grid-column:1 / 13;padding-right:0;margin-bottom:24px}
  .faq__list{grid-column:1 / 13}
  .contact{grid-template-columns:minmax(0,1fr)}
  .foot__grid>div:first-child{grid-column:1 / 13}
  .foot__grid nav{grid-column:1 / 7}
}

@media (max-width:860px){
  .nav .wrap{gap:12px}
  .nav__quick{display:inline-flex}
  .nav__toggle{display:block}
  .nav.is-open{background:var(--ink)}
  .nav__menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px var(--gutter) 24px;background:var(--ink);border-bottom:1px solid var(--line);font-size:1.05rem;visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
  .nav.is-open .nav__menu{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .nav__menu a:not(.btn){padding:16px 0;border-bottom:1px solid var(--line)}
  .nav__menu a:not(.btn)::before,.nav__menu a:not(.btn)::after{display:none}
  .nav__menu .btn{margin-top:20px;min-height:44px}
  .nav__menu .btn+.btn{margin-top:10px}
  /* Stacked: the agency card (compact), its footnote, then the plan */
  .prices{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .price,.prices__footnote,.prices__payoff{grid-column:1;grid-row:auto}
  .price{display:flex;flex-direction:column;gap:14px}
  .price>:nth-child(2){align-self:auto}
  .price--agency{gap:10px;padding:20px}
  .price--agency .price__head{align-self:auto}
  .price__amount--agency{font-size:2rem}
  .vs{margin-top:4px}
  /* Each row stacks its label over its cost, so every row reads the same way */
  .vs__row{flex-direction:column;flex-wrap:nowrap;gap:2px;padding:8px 0;font-size:.875rem}
  .vs dt{font-size:.8125rem}
  .vs dd{text-align:left}
  .prices__footnote{margin:10px 0 24px}
  .traits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prices>.prices__payoff{margin-top:clamp(24px,5vw,40px);font-size:clamp(1.2rem,4.4vw,1.6rem)}
}

@media (max-width:760px){
  /* Touch targets: at least 44px for the enquiry button, 40px for the build switcher */
  .nav__quick{min-height:44px}
  .stages button{min-height:40px}
  .gridlines .wrap{grid-template-columns:repeat(4,1fr)}
  .gridlines i:nth-child(n+5){display:none}
  .sub{margin-top:12px}

  /* Hero: one clear action; the secondary link is just a scroll away */
  .hero__cta .btn--ghost{display:none}
  .hero__cta .btn{width:100%}
  /* The home page hero (text only here) fills the screen, its content centered below the nav */
  .hero:not(.hero--page){display:flex;flex-direction:column;justify-content:center;min-height:100vh;min-height:100svh}
  .bp{margin-bottom:0}
  .events{position:relative;right:auto;bottom:auto;width:100%;margin-top:4px}
  /* The hero is text only: js/main.js moves the animation into the next section */
  .js .hero .bp{display:none}

  /* The steps stack, each numeral beside its step, joined by a line */
  .flow{grid-template-columns:minmax(0,1fr);row-gap:0;padding-top:22px}
  .flow__step{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:16px;row-gap:4px;padding-bottom:22px}
  .flow__step:last-child{padding-bottom:0}
  .flow__step::before,.flow__step:nth-child(2n)::before{display:block;top:30px;bottom:0;left:15px;right:auto;width:1px;height:auto}
  .flow__step:last-child::before{display:none}
  .flow__n{grid-row:span 2;margin:0}
  .flow__step h3{align-self:center;min-height:30px;display:flex;align-items:center}

  .work__body{padding:12px}
  .work__name{font-size:.95rem}
  .work__type{font-size:.8125rem}

  .problems{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:16px}
  .problem{display:flex;flex-direction:column;grid-row:auto}
  .problem__issue,.problem__fix{padding:20px 16px}
  .problem__issue{padding-top:26px}

  .incl{grid-template-columns:minmax(0,1fr)}
  .incl__item{gap:8px;padding:20px 16px 22px}
  .incl__tick{top:29px;right:16px}

  .cta-strip{flex-direction:column;align-items:stretch;gap:14px}
  .cta-strip .btn{width:100%}
  .how__cta{flex-direction:column}
  .how__cta .btn{width:100%}

  .steps{grid-template-columns:minmax(0,1fr)}
  .step,.step:nth-child(n+4){border-top:1px solid var(--line)}
  .step:first-child{border-top:0}
  /* Numeral beside the step, so each one is shorter */
  .step{display:grid;grid-template-columns:52px 1fr;column-gap:14px;row-gap:4px;padding:18px 16px}
  .step__n{grid-row:1 / span 2;align-self:center;margin:0;font-size:2.6rem}
  .step>h3,.step>p{grid-column:2}

  .row{grid-template-columns:minmax(0,1fr)}
  .case-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* Case headers: number and label on one line at the left edge, then the name and the aim */
  .case__head{grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:12px;align-items:center}
  .case__head>div{display:contents}
  .case__n{grid-row:1;font-size:2.6rem}
  .case__head .tag{grid-row:1;grid-column:2;justify-self:start}
  .case__head h2{grid-column:1 / -1;margin-top:0;font-size:clamp(1.6rem,7.4vw,2rem)}
  .case__aim{grid-column:1 / -1}
  .case__details{grid-template-columns:minmax(0,1fr)}
  .case__col+.case__col{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:20px}
  .traits{grid-template-columns:minmax(0,1fr)}
  .foot{padding-bottom:72px}
  .foot__grid nav{grid-column:1 / 13}

  /* Sticky enquiry bar. Shown by js/main.js once the hero button has scrolled away. */
  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:block;padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));background:rgba(11,12,14,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);transform:translateY(100%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
  .sticky-cta.is-on{transform:none;visibility:visible;transition-delay:0s}
}

@media (max-width:420px){
  .stages button{padding:10px 11px}
  .bp__screen{aspect-ratio:1 / .86}
}

@media (max-width:360px){
  /* Narrowest phones: keep logo, enquiry button and menu on one row */
  .nav .wrap{gap:8px}
  .logo{gap:8px;font-size:1.15rem}
  .nav__quick{padding:.8em .9em;font-size:.8125rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js .reveal{opacity:1;transform:none}
}