/* ============================================================
   BRICKWORK — "Master Builder" design system
   Concrete + ink + brick + hi-vis amber.
   Big Shoulders Display / Inter / IBM Plex Mono.
   Hand-built, no framework.
============================================================ */
:root{
  /* palette */
  --concrete:#E7E3DA;     /* page bg — warm stone, NOT cream */
  --concrete-2:#DCD6CB;   /* recessed bg */
  --paper:#F4F1EA;        /* cards / raised */
  --ink:#17130E;          /* near-black, warm */
  --ink-2:#1F1812;        /* dark feature sections */
  --muted:#5C5449;        /* secondary text — AA on concrete & concrete-2 */
  --faint:#8A8073;
  --line:rgba(23,19,14,.13);
  --line-2:rgba(23,19,14,.22);

  --brick:#B5462A;        /* primary accent */
  --brick-deep:#8E3520;   /* buttons, links, small text (AA on light) */
  --brick-rgb:181,70,42;
  --amber:#F0A52A;        /* hi-vis signal — used sparingly */
  --amber-rgb:240,165,42;
  --go:#2F8F5B;           /* "available/ticks" */

  --on-dark:#ECE5D9;
  --on-dark-mut:rgba(236,229,217,.66);

  /* type */
  --f-display:"Big Shoulders Display","Arial Narrow Bold","Arial Narrow",system-ui,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  /* shape + space */
  --r:4px;                /* low radius — built, not soft */
  --r-lg:8px;
  --max:1180px;
  --pad:clamp(18px,5vw,40px);
  --sect:clamp(72px,11vw,140px);

  --shadow:0 2px 0 var(--line-2), 0 18px 40px rgba(23,19,14,.10);
  --shadow-lg:0 2px 0 var(--line-2), 0 30px 70px rgba(23,19,14,.18);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--concrete);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(15.5px,1.05vw,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--brick);color:var(--paper)}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:800;line-height:.92;letter-spacing:.005em;text-transform:uppercase}
.display{font-size:clamp(3.2rem,11vw,8rem)}
h2{font-size:clamp(2.1rem,5.2vw,4rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1}
p{text-wrap:pretty}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--muted);line-height:1.55}

.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sect)}
section{position:relative}

/* mono spec label — the blueprint signature */
.speclabel{
  font-family:var(--f-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brick-deep);
  display:inline-flex;align-items:center;gap:.7em;
}
.speclabel::before{content:"";width:13px;height:9px;background:var(--brick);box-shadow:3px 0 0 var(--brick)}
.speclabel--dark{color:var(--amber)}
.speclabel--dark::before{background:var(--amber);box-shadow:3px 0 0 var(--amber)}

.head{max-width:760px;margin-bottom:clamp(38px,5vw,62px)}
.head.center{margin-inline:auto;text-align:center}
.head.center .speclabel{justify-content:center}
.head h2{margin:18px 0 16px}
.head p{color:var(--muted);font-size:1.08rem;max-width:60ch}
.head.center p{margin-inline:auto}
.hl{color:var(--brick)}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--brick-deep);--fg:var(--paper);--bd:var(--brick-deep);
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-mono);font-weight:500;font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--bg);color:var(--fg);border:1.5px solid var(--bd);
  padding:.95em 1.4em;border-radius:var(--r);
  transition:transform .16s ease,box-shadow .16s ease,background .16s,color .16s,border-color .16s;
  box-shadow:0 0 0 0 var(--ink);
}
.btn svg{width:1.05em;height:1.05em}
.btn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 var(--ink)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)}
.btn--ghost:hover{--bd:var(--ink)}
.btn--lg{padding:1.1em 1.7em;font-size:.95rem}
.btn--block{width:100%;justify-content:center}
.btn--amber{--bg:var(--amber);--fg:var(--ink);--bd:var(--amber)}
.btn--on-dark.btn--ghost{--fg:var(--on-dark);--bd:rgba(236,229,217,.28)}
.btn--on-dark.btn--ghost:hover{--bd:var(--on-dark);box-shadow:5px 5px 0 0 #000}

.arrowlink{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--brick-deep);font-weight:500}
.arrowlink svg{width:1.1em;height:1.1em;transition:transform .18s}
.arrowlink:hover svg{transform:translateX(4px)}

/* reveal */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
.rd1{transition-delay:.07s}.rd2{transition-delay:.14s}.rd3{transition-delay:.21s}.rd4{transition-delay:.28s}

/* skip link */
.skip{position:fixed;left:-9999px;top:8px;z-index:200;background:var(--ink);color:var(--on-dark);padding:10px 16px;border-radius:var(--r);font-family:var(--f-mono);font-size:.8rem}
.skip:focus{left:10px}
:focus-visible{outline:2.5px solid var(--brick-deep);outline-offset:3px}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============================================================ ANNOUNCE + NAV */
.announce{background:var(--ink);color:var(--on-dark);text-align:center;padding:8px var(--pad);font-family:var(--f-mono);font-size:.76rem;letter-spacing:.04em}
.announce b{color:var(--amber);font-weight:500}
.announce a{color:var(--on-dark);text-decoration:underline;text-underline-offset:2px}

.nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--concrete) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav__in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{display:flex;align-items:center;gap:10px;flex:none}
.brand img{width:30px;height:30px}
.brand b{font-family:var(--f-display);font-weight:800;font-size:1.5rem;letter-spacing:.01em;text-transform:uppercase}
.brand b span{color:var(--brick)}
.nav__links{display:flex;gap:28px}
.nav__links a{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);transition:color .18s}
.nav__links a:hover{color:var(--ink)}
.nav__right{display:flex;align-items:center;gap:14px;flex:none}
.nav__status{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--go);display:inline-flex;align-items:center;gap:7px}
.nav__status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--go);box-shadow:0 0 0 3px rgba(47,143,91,.2);animation:blink 2.4s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.burger{display:none;flex-direction:column;gap:5px;padding:8px}
.burger span{width:22px;height:2px;background:var(--ink);transition:.3s}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile{position:fixed;inset:64px 0 auto;z-index:99;background:var(--concrete);border-bottom:1px solid var(--line);display:flex;flex-direction:column;padding:14px var(--pad) 22px;gap:4px;transform:translateY(-120%);transition:transform .3s ease;visibility:hidden}
.mobile.open{transform:none;visibility:visible}
.mobile a{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:1.45rem;padding:14px 0;border-bottom:1px solid var(--line)}
.mobile a.cta{color:var(--brick-deep)}

/* ============================================================ HERO */
.hero{padding-block:clamp(40px,7vw,84px) clamp(56px,8vw,96px);overflow:hidden}
.hero__wrap{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero__title{margin:20px 0 0;font-size:clamp(3rem,9.5vw,7.2rem)}
.hero__sub{margin:22px 0 30px;max-width:46ch;font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.hero__spec{display:grid;grid-template-columns:repeat(4,auto);gap:0;border-top:1px solid var(--line-2);padding-top:20px;max-width:560px}
.hero__spec li{display:flex;flex-direction:column;gap:3px;padding-right:18px;border-right:1px solid var(--line)}
.hero__spec li:last-child{border-right:none;padding-right:0}
.hero__spec .k{font-family:var(--f-display);font-weight:800;font-size:1.7rem;line-height:1;color:var(--brick)}
.hero__spec .v{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}

/* the brick-build visual (signature) */
.build{position:relative;aspect-ratio:1/1.02;background:var(--ink-2);border:1.5px solid var(--ink);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.build__bar{display:flex;align-items:center;gap:6px;padding:12px 14px;background:#161009;border-bottom:1px solid rgba(236,229,217,.1)}
.build__bar i{width:10px;height:10px;border-radius:50%;background:#3a322a}
.build__bar i:first-child{background:var(--brick)}
.build__url{margin-left:10px;font-family:var(--f-mono);font-size:.7rem;color:var(--on-dark-mut)}
.build__stage{position:absolute;inset:43px 0 0;padding:18px;display:flex;flex-direction:column}
.wall{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start;flex:1}
.brick{height:26px;border-radius:2px;background:linear-gradient(180deg,#c0512f,#9c3b22);box-shadow:inset 0 1px 0 rgba(255,255,255,.12);transform-origin:top}
.js .brick{opacity:0;transform:translateY(-14px) scaleY(.6)}
.js .brick.lay{animation:lay .5s cubic-bezier(.2,1.2,.3,1) forwards;animation-delay:var(--d,0ms)}
@keyframes lay{to{opacity:1;transform:none}}
.build__site{margin-top:10px;opacity:0}
.js .build__site.show{animation:fade .6s ease forwards}
@keyframes fade{to{opacity:1}}
.build__site .ln{height:9px;border-radius:2px;background:rgba(236,229,217,.18);margin-bottom:7px}
.build__site .ln.w60{width:60%}.build__site .ln.w40{width:40%;background:var(--amber)}
.build__cap{position:absolute;left:14px;bottom:12px;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--on-dark-mut)}

/* ============================================================ MARQUEE */
.marquee{border-block:1px solid var(--line);background:var(--concrete-2);overflow:hidden;padding:14px 0}
.marquee__t{display:flex;gap:0;white-space:nowrap;width:max-content;animation:scroll 34s linear infinite}
.marquee span{font-family:var(--f-display);font-weight:700;font-size:1.5rem;text-transform:uppercase;color:var(--ink);padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.marquee span::after{content:"";width:11px;height:11px;background:var(--brick);display:inline-block;transform:rotate(45deg)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ============================================================ generic grid sections */
.problem{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.problem p{color:var(--muted);margin-bottom:16px}
.pains{display:flex;flex-direction:column;gap:12px}
.pain{display:flex;gap:15px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);padding:18px 20px;transition:transform .2s,border-color .2s}
.pain:hover{transform:translateX(5px)}
.pain .ic{width:22px;height:22px;color:var(--brick-deep);margin-top:2px}
.pain h4{font-family:var(--f-body);font-weight:700;font-size:1rem;margin-bottom:3px}
.pain p{font-size:.9rem;margin:0}

/* blocks (services / why / promise) */
.blocks{display:grid;gap:14px}
.blocks--4{grid-template-columns:repeat(4,1fr)}
.blocks--2{grid-template-columns:repeat(2,1fr)}
.block{position:relative;background:var(--paper);border:1px solid var(--line);padding:26px 24px;transition:transform .25s,box-shadow .25s}
.block::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brick);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.block:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.block:hover::before{transform:none}
.blk__ic{width:44px;height:44px;border:1.5px solid var(--line-2);border-radius:var(--r);display:grid;place-items:center;color:var(--brick-deep);margin-bottom:16px}
.blk__ic .ic{width:22px;height:22px}
.block h3{font-size:1.25rem;margin-bottom:8px}
.tag-price{display:inline-block;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.03em;color:var(--brick-deep);background:rgba(var(--brick-rgb),.09);padding:4px 10px;border-radius:2px;margin-bottom:14px}
/* "in build" flag for pre-sold services. Deliberately louder than .tag-price:
   it has to be read before the price, not after it. */
.badge-build{display:block;width:fit-content;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brick-deep);background:rgba(var(--brick-rgb),.12);border:1px solid rgba(var(--brick-rgb),.34);padding:3px 9px;border-radius:2px;margin-bottom:10px}
.block--wide .badge-build{color:var(--amber);background:rgba(var(--amber-rgb),.16);border-color:rgba(var(--amber-rgb),.4)}
.price-note{display:block;font-family:var(--f-mono);font-size:.72rem;color:var(--muted);margin:-8px 0 14px}
.block>p{color:var(--muted);font-size:.92rem;margin-bottom:16px}
.ticks{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.ticks li{display:flex;gap:9px;font-size:.88rem;color:var(--muted)}
.ticks .ic{width:16px;height:16px;color:var(--go);margin-top:3px}

/* wide premium cards (custom-built systems) */
.block.block--wide{grid-column:1/-1;display:grid;grid-template-columns:44px 1.4fr 1fr;gap:22px;align-items:start;background:var(--ink-2);border-color:var(--ink)}
.block--wide::before{background:var(--amber)}
.block--wide h3{color:var(--on-dark)}
.block--wide .wide__body p{color:var(--on-dark-mut);font-size:.92rem;margin-bottom:16px}
.block--wide .tag-price{background:rgba(var(--amber-rgb),.14);color:var(--amber)}
.block--wide .ticks{margin-bottom:0;padding-top:4px}
.block--wide .ticks li{color:var(--on-dark-mut)}
.block--wide .arrowlink{color:var(--amber)}
.block--wide .blk__ic{border-color:rgba(236,229,217,.25);color:var(--amber);margin-bottom:0}
.plan.plan--wide{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3vw,42px);align-items:center;background:var(--ink-2);border-color:var(--ink)}
.plan--wide .plan__name{color:var(--on-dark-mut)}
.plan--wide .plan__price{color:var(--on-dark);margin:10px 0 4px}
.plan--wide .plan__price .from{font-family:var(--f-mono);font-size:.9rem;font-weight:500;color:var(--on-dark-mut);text-transform:uppercase}
.plan--wide .plan__sub{color:var(--amber)}
.plan--wide .plan__desc{color:var(--on-dark-mut);border-top:none;padding-top:0;margin-bottom:12px}
.plan--wide .ticks{margin-bottom:0}
.plan--wide .ticks li{color:var(--on-dark-mut)}
.plan--wide .arrowlink{color:var(--amber);margin-top:12px;justify-content:center;display:flex}
.plan-wide__cta{min-width:200px}
@media(max-width:920px){
  .block.block--wide,.plan.plan--wide{grid-template-columns:1fr}
  .block--wide .blk__ic{margin-bottom:0}
}

/* stats strip */
.stats{background:var(--ink);color:var(--on-dark)}
.stats__g{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-block:34px;text-align:center}
.stats .n{font-family:var(--f-display);font-weight:800;font-size:clamp(2.2rem,4vw,3.2rem);line-height:1;color:var(--amber)}
.stats .l{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark-mut);margin-top:8px}

/* process (numbered = real sequence) */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:var(--paper);border:1px solid var(--line);padding:26px 24px;position:relative}
.step__n{font-family:var(--f-display);font-weight:800;font-size:2.6rem;color:var(--brick);line-height:1}
.step h3{margin:8px 0 10px}
.step p{color:var(--muted);font-size:.92rem}
.step .when{display:inline-block;margin-top:14px;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;color:var(--brick-deep)}

/* who we serve — long-tail SEO chips */
.serve__grid{display:flex;flex-wrap:wrap;gap:10px}
.serve__grid a{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.02em;color:var(--ink);background:var(--paper);border:1px solid var(--line-2);padding:9px 14px;border-radius:var(--r);transition:background .18s,color .18s,transform .18s}
.serve__grid a:hover{background:var(--brick-deep);color:var(--paper);transform:translateY(-2px)}

/* work */
.work__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.proj{background:var(--paper);border:1px solid var(--line);overflow:hidden;transition:transform .25s,box-shadow .25s}
.proj:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.pv{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border-bottom:1px solid var(--line);position:relative}
.pv__eye{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase}
.pv__name{font-family:var(--f-display);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);text-transform:uppercase;line-height:.9}
.pv__tag{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase}
.pv__badge{position:absolute;top:10px;right:10px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:2px}
.b-demo{background:var(--paper);color:var(--brick-deep);border:1px solid var(--line-2)}
.b-live{background:var(--paper);color:#1F6B42;border:1px solid var(--line-2)}
.proj__b{padding:20px 22px}
.proj__type{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brick-deep);margin-bottom:8px}
.proj__b h3{font-size:1.2rem;margin-bottom:8px}
.proj__b p{font-size:.88rem;color:var(--muted);margin-bottom:14px}

/* founder + dark bands */
.dark{background:var(--ink-2);color:var(--on-dark)}
.dark h2,.dark h3{color:var(--on-dark)}
.dark .head p,.dark p{color:var(--on-dark-mut)}
.founder__card{display:grid;grid-template-columns:auto 1fr;gap:clamp(26px,4vw,52px);align-items:center;max-width:920px;margin-inline:auto}
.founder__mark{width:clamp(110px,15vw,150px);aspect-ratio:1;background:var(--brick);display:grid;place-items:center;font-family:var(--f-display);font-weight:800;font-size:clamp(3rem,6vw,4.6rem);color:var(--paper);border-radius:var(--r-lg)}
.founder__card h2{margin:14px 0 14px}
.founder__sign{font-family:var(--f-mono);font-size:.85rem;color:var(--brick-deep);margin-top:14px}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;align-items:start}
.plan{background:var(--paper);border:1px solid var(--line);padding:26px 22px;position:relative}
.plan--feat{border:1.5px solid var(--brick);box-shadow:var(--shadow)}
.plan--feat::after{content:"MOST CHOSEN";position:absolute;top:-1px;right:-1px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;background:var(--brick);color:var(--paper);padding:4px 9px}
.plan__name{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.plan__price{font-family:var(--f-display);font-weight:800;font-size:3rem;line-height:1;margin:10px 0 4px}
.plan__price .per{font-family:var(--f-body);font-size:1rem;font-weight:500;color:var(--muted)}
.plan__sub{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:var(--brick-deep);min-height:16px;margin-bottom:16px}
.plan__desc{font-size:.86rem;color:var(--muted);padding-top:14px;border-top:1px solid var(--line);margin-bottom:14px}
.anchor{font-family:var(--f-mono);font-size:.9rem;color:var(--muted);text-align:center;max-width:62ch;margin:0 auto clamp(34px,4vw,46px)}
.anchor b{color:var(--ink)}

/* roi band */
.roi{background:var(--ink);color:var(--on-dark);text-align:center;overflow:hidden}
.roi::before{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,transparent 0 27px,rgba(236,229,217,.05) 27px 29px),repeating-linear-gradient(90deg,transparent 0 63px,rgba(236,229,217,.05) 63px 65px);
  -webkit-mask:radial-gradient(ellipse 90% 130% at 50% 50%,#000 25%,transparent 78%);mask:radial-gradient(ellipse 90% 130% at 50% 50%,#000 25%,transparent 78%)}
.roi .container{position:relative;z-index:1}
.roi h2{color:var(--on-dark)}.roi p{color:var(--on-dark-mut);max-width:58ch;margin:14px auto 0}

/* break-even calculator. The caveat is deliberately the same size as the
   result — an estimate dressed as a measurement is a legal problem, not a
   taste one, and shrinking the qualifier is exactly how that happens. */
.calc{max-width:560px;margin:32px auto 0;text-align:left;border:1px solid rgba(236,229,217,.22);border-radius:var(--r);padding:24px 22px;background:rgba(236,229,217,.04)}
.calc__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.calc__row label{font-family:var(--f-mono);font-size:.82rem;letter-spacing:.02em;color:var(--on-dark);max-width:32ch}
.calc__field{display:flex;align-items:center;gap:6px}
.calc__cur{font-family:var(--f-mono);font-size:.9rem;color:var(--on-dark-mut)}
.calc__field input{width:110px;background:transparent;border:1px solid rgba(236,229,217,.3);border-radius:var(--r);color:var(--on-dark);font-family:var(--f-mono);font-size:1rem;padding:9px 11px}
.calc__field input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.calc__out{display:block;margin:18px 0 0;padding-top:18px;border-top:1px solid rgba(236,229,217,.22);color:var(--on-dark);font-size:1.02rem;line-height:1.55}
.roi .calc__formula,.roi .calc__caveat{max-width:none;margin:14px 0 0;font-size:.92rem;line-height:1.55;color:var(--on-dark-mut);text-align:left}
.calc__caveat strong{color:var(--on-dark)}
.stats__note{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.02em;color:var(--on-dark-mut);text-align:center;max-width:64ch;margin:0 auto;padding-bottom:30px}

/* Recurring-charge disclosure. Same body size and colour as the surrounding
   copy, in a bordered box, immediately above the call to action — the placement
   is the compliance, not the wording. Do not shrink it, grey it out, collapse
   it behind a toggle, or move it below the button. */
.recur{border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;margin:0 0 16px}
.recur p{font-size:.92rem;line-height:1.5;margin:0}
.recur p + p{margin-top:8px}
@media (max-width:520px){.calc__row{flex-direction:column;align-items:flex-start;gap:8px}.calc__field,.calc__field input{width:100%}}

/* faq */
.faq__list{max-width:760px;margin-inline:auto;border-top:1px solid var(--line-2)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__q{width:100%;display:flex;justify-content:space-between;gap:18px;align-items:center;padding:22px 0;text-align:left;font-family:var(--f-display);font-weight:700;font-size:1.15rem;text-transform:uppercase;letter-spacing:.01em}
.faq__q .pm{font-family:var(--f-mono);color:var(--brick-deep);flex:none;transition:transform .3s}
.faq__item.open .pm{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq__a p{padding-bottom:22px;color:var(--muted)}

/* contact */
.contact__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px);align-items:start}
.guars{display:flex;flex-direction:column;gap:13px;margin-top:26px}
.guar{display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--muted)}
.guar .ic{width:18px;height:18px;color:var(--brick-deep);flex:none}
.guar a{color:var(--brick-deep);font-weight:600}
.form{background:var(--paper);border:1px solid var(--line-2);padding:clamp(22px,3vw,32px)}
.fg{margin-bottom:16px}
.fg label{display:block;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:7px}
.fg .opt{color:var(--faint);text-transform:none;letter-spacing:0}
.fg input,.fg select,.fg textarea{width:100%;background:var(--concrete);border:1.5px solid var(--line-2);border-radius:var(--r);padding:12px 14px;font-family:var(--f-body);font-size:1rem;color:var(--ink);transition:border-color .18s,box-shadow .18s}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--brick-deep);box-shadow:0 0 0 3px rgba(var(--brick-rgb),.14)}
.fg textarea{min-height:104px;resize:vertical}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hp{position:absolute;left:-9999px}
.form__note{font-family:var(--f-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:var(--faint);text-align:center;margin-top:12px}
/* Referral credit line. Reads as a confirmation, not a warning — brick tint
   rather than the error red, and it sits above the payment note. */
.ref-note{color:var(--brick-deep);text-transform:none;letter-spacing:0;font-size:.74rem}
.form-err{margin-top:12px;padding:12px 14px;background:rgba(181,70,42,.09);border:1px solid rgba(181,70,42,.35);border-radius:var(--r);font-size:.88rem;color:var(--ink)}
.form-err a{color:var(--brick-deep);font-weight:600;text-decoration:underline}
.form-ok{display:none;text-align:center;padding:34px 14px}
.form-ok.show{display:block}
.form-ok .ic{width:46px;height:46px;color:var(--go);margin:0 auto 14px}

/* footer */
.footer{background:var(--ink);color:var(--on-dark)}
.footer__g{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;padding-block:52px 30px}
.footer .brand b{color:var(--on-dark)}
.footer__brand p{color:var(--on-dark-mut);font-size:.9rem;max-width:300px;margin:14px 0 16px}
.footer__brand a.ig{font-family:var(--f-mono);font-size:.8rem;color:var(--on-dark);display:inline-flex;gap:8px;align-items:center}
.footer h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.footer li{margin-bottom:6px}
.footer__g a{color:var(--on-dark-mut);font-size:.9rem;transition:color .18s;display:inline-block;padding:4px 0}
.footer__g a:hover{color:var(--on-dark)}
.footer__bottom{display:flex;justify-content:space-between;gap:14px;padding:22px 0 30px;border-top:1px solid rgba(236,229,217,.12);font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.03em;color:var(--on-dark-mut)}

/* mobile sticky bar */
.mbar{display:none;position:fixed;inset:auto 0 0;z-index:90;gap:10px;padding:10px var(--pad);background:color-mix(in srgb,var(--concrete) 94%,transparent);backdrop-filter:blur(10px);border-top:1px solid var(--line);transition:transform .3s ease}
.mbar .btn{flex:1}
.mbar--hide{transform:translateY(110%)}

/* ============================================================ RESPONSIVE */
@media(max-width:920px){
  .hero__wrap,.problem,.contact__grid{grid-template-columns:1fr}
  .build{max-width:460px;margin-inline:auto;width:100%}
  .blocks--4,.prices{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .footer__g{grid-template-columns:1fr 1fr}
  .nav__links,.nav__status{display:none}
  .burger{display:flex}.mbar{display:flex}
  body{padding-bottom:70px}
}
@media(max-width:560px){
  .blocks--4,.blocks--2,.prices,.work__grid,.stats__g{grid-template-columns:1fr}
  .hero__spec{grid-template-columns:1fr 1fr;gap:16px}
  .hero__spec li{border-right:none;padding-right:0}
  .stats__g{gap:26px}
  .footer__g,.footer__bottom{grid-template-columns:1fr;flex-direction:column;text-align:left}
  .nav__in{gap:10px}
  .nav__right{gap:8px}
  .nav__right .btn{padding:.7em .9em;font-size:.76rem}
}
@media(max-width:420px){
  .nav__right .btn{display:none}
  .brand b{font-size:1.3rem}
}

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

/* ============================================================ SUBPAGES (service + legal) */
.crumb{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);display:flex;gap:.5em;align-items:center}
.crumb a{color:var(--brick-deep)}.crumb a:hover{text-decoration:underline}
.crumb span{opacity:.45}
.shero{padding-block:clamp(34px,6vw,72px) clamp(26px,4vw,44px)}
.shero h1{font-size:clamp(2.5rem,7vw,5rem);margin:14px 0 0;max-width:17ch}
.shero p{max-width:56ch;margin:18px 0 26px;color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.2rem)}
.cta-band{background:var(--ink);color:var(--on-dark);text-align:center}
.cta-band h2{color:var(--on-dark)}.cta-band p{color:var(--on-dark-mut);max-width:54ch;margin:14px auto 26px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.checklist{display:grid;gap:12px}
.checklist li{display:flex;gap:11px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--brick);padding:15px 18px}
.checklist .ic{width:18px;height:18px;color:var(--go);flex:none;margin-top:2px}
.checklist b{font-weight:700}.checklist p{font-size:.88rem;color:var(--muted);margin:3px 0 0}
/* Partner commission table (partners.html).
   The wrapper is the scroll container, not the page: a five-column table has a
   floor width no phone can meet, and the body must never scroll sideways. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--paper)}
.ptable{width:100%;min-width:520px;border-collapse:collapse;font-size:.92rem}
.ptable th,.ptable td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.ptable thead th{font-family:var(--f-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--concrete-2);white-space:nowrap}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable td:nth-child(3){color:var(--brick-deep)}
.ptable__na{color:var(--faint);font-style:italic}
.ptable__note{margin-top:14px;font-size:.88rem;color:var(--muted);max-width:74ch}
code{font-family:var(--f-mono);font-size:.9em;background:var(--concrete-2);border:1px solid var(--line);border-radius:2px;padding:1px 5px;word-break:break-all}

/* Partner self-signup (partners.html). Deliberately plain — this page is sent
   to people one at a time, not optimised for cold traffic. */
.pform{margin-top:22px;max-width:520px;display:flex;flex-direction:column;gap:16px}
.pform__row{display:flex;flex-direction:column;gap:5px}
.pform__row label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pform__row input{padding:11px 13px;border:1px solid var(--line-2);border-radius:var(--r);font:inherit;font-size:.95rem;background:var(--paper);color:var(--ink)}
.pform__row input:focus{outline:2px solid var(--brick);outline-offset:1px}
.pform__hint{font-size:.82rem;color:var(--muted)}
.pform__opt{text-transform:none;letter-spacing:0;font-style:italic}
.pform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.pform__err{margin:0;padding:10px 12px;background:rgba(181,70,42,.09);border:1px solid rgba(181,70,42,.35);border-radius:var(--r);font-size:.9rem}
.pdone{margin-top:22px;max-width:560px;padding:18px;border:1px solid var(--line);background:var(--paper)}
.pdone__link{font-family:var(--f-mono);font-size:1rem;word-break:break-all;margin:8px 0 16px;color:var(--brick-deep)}

/* Referral prompt. Bottom-LEFT deliberately: bottom-right is the chat
   launcher, and on mobile the bottom edge is .mbar — hence the offsets in the
   media query, which clear both rather than stacking on top of them.
   Shown once, only to someone who has read the page and not enquired. */
.refer{
  position:fixed;left:20px;bottom:20px;z-index:80;max-width:330px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:0 8px 28px rgba(23,19,14,.14);padding:16px 16px 14px;
  transform:translateY(18px);opacity:0;pointer-events:none;
  transition:opacity .3s ease-out,transform .3s ease-out;
}
.refer.in{transform:translateY(0);opacity:1;pointer-events:auto}
.refer b{display:block;font-size:.98rem;margin-bottom:5px}
.refer p{font-size:.86rem;color:var(--muted);margin:0 0 12px;line-height:1.5}
.refer__row{display:flex;gap:8px;align-items:center}
.refer__row .btn{padding:8px 14px;font-size:.82rem}
.refer__no{background:none;border:0;font:inherit;font-size:.82rem;color:var(--muted);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.refer__no:hover{color:var(--ink)}
@media(max-width:900px){
  /* Sit ABOVE the chat launcher rather than beside it. Squeezing it into the
     space to the left was measured overlapping the launcher at ~715px wide —
     stacking has no width to get wrong. .mbar is 0-56px, the launcher sits at
     86px, so this clears both. */
  .refer{left:12px;right:12px;bottom:148px;max-width:none}
}
@media(max-width:920px){.split{grid-template-columns:1fr}}

/* optional-fields disclosure in the contact form. Native <details> so it needs
   no JS and costs nothing against script-src 'self'; the fields stay in the DOM
   either way, so Netlify Forms still captures them when collapsed. */
.form details.more{border-top:1px solid var(--line);padding-top:14px}
.form details.more summary{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--brick-deep);cursor:pointer;list-style:none}
.form details.more summary::-webkit-details-marker{display:none}
.form details.more summary::before{content:"+ ";font-weight:700}
.form details.more[open] summary::before{content:"\2212 "}

/* legal / prose */
.legal{max-width:760px;margin-inline:auto}
.legal h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:8px}
/* --faint (#8A8073) lands around 3.3:1 on paper, which fails WCAG AA for text
   this size. --muted is the documented AA-safe secondary. Caught by Lighthouse
   on the legal pages 2026-08-01; it was failing on terms and privacy too. */
.legal .updated{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:26px}
.legal h2{font-size:1.35rem;margin:26px 0 8px;text-transform:none;letter-spacing:0}
.legal p,.legal li{color:var(--muted);margin-bottom:11px;line-height:1.7}
.legal ul{padding-left:20px;list-style:disc;margin-bottom:11px}
.legal a{color:var(--brick-deep);text-decoration:underline;text-underline-offset:2px}

/* ============================================================ CURRENCY SWITCHER */
.price-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:24px}
.curswitch{display:inline-flex;border:1.5px solid var(--line-2);border-radius:var(--r);overflow:hidden;font-family:var(--f-mono);font-size:.72rem}
.curswitch button{padding:7px 13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);border-right:1px solid var(--line);transition:background .15s,color .15s}
.curswitch button:last-child{border-right:none}
.curswitch button[aria-pressed="true"]{background:var(--ink);color:var(--on-dark)}
.cur-note{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.03em;text-transform:uppercase;color:var(--faint)}

/* ---------- founding rates ----------
   Current prices are introductory and rise as the client list fills.
   Saying so on the page turns a low number into scarcity rather than
   into a signal that the work is cheap. */
.risenote{
  display:flex;align-items:flex-start;gap:14px;
  max-width:72ch;margin:0 auto clamp(30px,3.6vw,42px);
  padding:16px 20px;
  background:rgba(var(--amber-rgb),.11);
  border:1px solid rgba(var(--amber-rgb),.42);
  border-radius:var(--r);
}
.risenote__dot{
  flex:none;width:9px;height:9px;margin-top:7px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 4px rgba(var(--amber-rgb),.22);
}
.risenote p{font-size:.92rem;line-height:1.6;color:var(--ink)}
.risenote b{font-weight:700}
/* Scoped to its own class on purpose — a bare `.risenote span` also matched
   the inline .price spans and broke them onto their own lines. */
.risenote__sub{
  display:block;margin-top:6px;font-family:var(--f-mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.plan__then{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--faint);margin:-10px 0 16px;
}
.plan__then s{text-decoration:line-through;text-decoration-thickness:1px}
.plan__then b{color:var(--brick-deep);font-weight:500}
@media (max-width:560px){
  .risenote{flex-direction:row;padding:14px 16px}
}

/* ---------- work previews: real screenshots ----------
   These were CSS gradients with the brand name set in type. Now that the
   demos are photographic they carry themselves, so the card shows an actual
   screenshot and the name lives in the body below. */
.pv--shot{display:block;padding:0;overflow:hidden;background:var(--concrete);gap:0}
.pv--shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.proj:hover .pv--shot img{transform:scale(1.035)}
@media (prefers-reduced-motion:reduce){
  .pv--shot img{transition:none}
  .proj:hover .pv--shot img{transform:none}
}