/* Inlumina design system */

/* Self-hosted fonts. Same three families Google Fonts served, same latin subset,
   same files. Serving them from our own origin removes a render-blocking
   stylesheet and two extra connections before any text can paint.
   Inter and Space Grotesk are variable, so one file covers every weight. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('/assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/space-mono-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Space Mono';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --ink:#0A0A0C;
  --surface:#0D0D11;
  --band:#0C0C0F;
  --hair:#131318;
  --border:#1C1C22;
  --border-strong:#26262E;
  --white:#FFFFFF;
  --text-hi:#E6E8EB;
  --text-em:#C9CDD3;
  --text:#9AA0A8;
  --muted:#6b7280;
  --faint:#4b5058;
  --gold:#E89A1C;
  --gold-deep:#B9781A;
  --gold-08:rgba(232,154,28,.08);
  --gold-25:rgba(232,154,28,.25);
  --green:#7BC98A;
  --plum:#14101F;
  --plum-border:#251D38;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --display:'Space Grotesk','Inter',system-ui,sans-serif;
  --mono:'Space Mono','SFMono-Regular',Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-deep)}
/* The hidden attribute has to win over any display rule an element picks up,
   or an element toggled by script shows when it should not. */
[hidden]{display:none!important}

img,video{max-width:100%}
/* Images now carry width and height attributes so the browser can reserve their
   space. Without this, one sized only by CSS width would take the attribute
   height literally instead of keeping its own proportions. */
img{height:auto}
h1,h2,h3{font-family:var(--display);color:var(--white);letter-spacing:-.01em}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:99;background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:9px;font-weight:600}

.wrap{max-width:1200px;margin:0 auto;padding-left:40px;padding-right:40px}

.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.grad{background:linear-gradient(90deg,#F5B93C,#E8661C);-webkit-background-clip:text;background-clip:text;color:transparent}
.gold{color:var(--gold)}

.btn{
  display:inline-block;background:var(--gold);color:var(--ink);
  padding:14px 28px;border-radius:11px;font-weight:600;font-size:16px;
  font-family:var(--sans);border:none;cursor:pointer;transition:background .2s;
}
.btn:hover{background:var(--gold-deep);color:var(--ink)}
.btn-sm{padding:11px 22px;font-size:15px}

.arrow-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-weight:600;font-size:15px}

/* Gold icon tile */
.tile{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:12px;
  background:var(--gold-08);border:1px solid var(--gold-25);
}
.tile svg{width:22px;height:22px}
.tile-lg{width:58px;height:58px;border-radius:14px}
.tile-lg svg{width:27px;height:27px}

/* ---------- Nav ---------- */
.nav{border-bottom:1px solid var(--hair);position:relative;z-index:5}
.nav-inner{max-width:1200px;margin:0 auto;padding:20px 40px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{height:30px;width:auto;display:block}
.brand span{font-family:var(--display);font-weight:700;font-size:21px;color:var(--white);letter-spacing:.01em}
.nav-links{display:flex;align-items:center;gap:30px}
.nav-links a{color:var(--text);font-size:15px;font-weight:500}
.nav-links a:hover{color:var(--white)}
.nav-links a[aria-current="page"]{color:var(--white)}
.nav-links a.btn,.nav-links a.btn:hover,.nav-menu a.btn,.nav-menu a.btn:hover{color:var(--ink)}
.nav-toggle{
  display:none;background:none;border:1px solid var(--border);border-radius:9px;
  padding:9px 12px;cursor:pointer;flex-direction:column;gap:4px;
}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--white)}
.nav-menu{
  display:none;border-top:1px solid var(--hair);background:var(--ink);
  padding:12px 40px 20px;flex-direction:column;gap:14px;
}
.nav-menu[data-open="true"]{display:flex}
.nav-menu a{color:var(--text);font-size:16px;font-weight:500}
.nav-menu a[aria-current="page"]{color:var(--white)}
.nav-menu .btn{align-self:flex-start}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--border)}
.footer-inner{max-width:1200px;margin:0 auto;padding:42px 40px 16px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.footer-brand{display:flex;align-items:center;gap:9px}
.footer-brand img{height:24px;width:auto}
.footer-brand span{font-family:var(--display);font-weight:700;font-size:17px;color:var(--white)}
.footer-tag{color:var(--muted);font-size:13px;margin-top:8px}
.footer-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.footer-nav a{color:var(--text);font-size:14px}
.footer-nav a:hover{color:var(--white)}
.footer-right{display:flex;align-items:center;gap:16px}
.footer-in{
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:1px solid var(--border);border-radius:8px;color:var(--text);
  font-family:var(--display);font-weight:700;font-size:13px;
}
.footer-in:hover{color:var(--white);border-color:#3a3a46}
.footer-copy{color:var(--muted);font-size:13px}
.footer-built{text-align:center;color:var(--muted);font-size:12.5px;padding:10px 40px 28px}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  *{scroll-behavior:auto!important}
}

/* ---------- Page header (About, Services, Projects, Contact) ---------- */
.page-head{max-width:1200px;margin:0 auto;padding:84px 40px 56px}
.page-head h1{font-weight:700;font-size:clamp(36px,4.6vw,56px);line-height:1.08;letter-spacing:-.015em;margin:16px 0 0}
.page-head p{color:var(--text);font-size:18px;line-height:1.55;margin:20px 0 0}

/* ---------- Home hero ---------- */
.hero{position:relative;overflow:hidden}
.hero-glow{position:absolute;top:0;right:0;width:60%;height:100%;pointer-events:none;
  background:radial-gradient(circle at 65% 35%,rgba(232,154,28,.13),transparent 62%)}
.hero-mark{position:absolute;top:-180px;right:-160px;width:640px;height:auto;opacity:.06;transform:rotate(24deg);pointer-events:none}
.hero-inner{max-width:1200px;margin:0 auto;padding:88px 40px 110px;display:flex;align-items:center;gap:64px;flex-wrap:wrap;position:relative}
.hero-copy{flex:1 1 400px;min-width:300px}
.hero-copy h1{font-weight:700;font-size:clamp(40px,5vw,62px);line-height:1.06;letter-spacing:-.015em;margin:18px 0 0}
.hero-copy p{color:var(--text);font-size:18px;line-height:1.55;margin:22px 0 0;max-width:470px}
.hero-copy .btn{margin-top:32px}
.hero-media{flex:1 1 440px;min-width:300px}
.browser{border-radius:14px;border:1px solid var(--border-strong);background:#101014;box-shadow:0 34px 90px rgba(0,0,0,.6);overflow:hidden}
.browser video{width:100%;height:auto;display:block;aspect-ratio:1280/834;background:var(--surface)}

/* ---------- Home proof band ---------- */
.proof{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--band)}
.proof-inner{max-width:1200px;margin:0 auto;padding:88px 40px 48px;display:flex;align-items:center;gap:56px;flex-wrap:wrap}
.proof-copy{flex:1 1 380px;min-width:300px}
.proof-copy .lead{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.2vw,38px);line-height:1.3;color:var(--white);margin:0}
.proof-copy .sub{color:var(--text);font-size:19px;line-height:1.55;margin:26px 0 0}
.proof-art{flex:1 1 460px;min-width:300px;position:relative}
.proof-art::before{content:"";position:absolute;inset:-50px;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(232,154,28,.1),transparent 65%)}
/* The brief is a transparent PNG that already carries its own page edges and
   drop shadows, so it takes no border, radius or box-shadow of its own. */
.proof-brief{position:absolute;top:0;left:0;width:70%;z-index:1;opacity:.85}
.proof-video{display:block;width:44%;aspect-ratio:283/502;margin:4% 6% 2% auto;position:relative;z-index:3;border-radius:14px;border:1px solid var(--border-strong);box-shadow:0 28px 70px rgba(0,0,0,.65);overflow:hidden}
.proof-play-btn{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:pointer}
.proof-video img{width:100%;height:100%;object-fit:cover;display:block}
.proof-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--ink)}
.proof-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(10,10,12,.05),rgba(10,10,12,.35))}
.proof-play-disc{width:56px;height:56px;border-radius:50%;background:rgba(232,154,28,.95);box-shadow:0 10px 30px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;transition:transform .2s}
.proof-play-btn:hover .proof-play-disc{transform:scale(1.06)}
.proof-play svg{width:22px;height:22px;margin-left:3px}
.proof-card{
  position:absolute;right:38%;bottom:5%;width:42%;min-width:250px;z-index:4;
  background:linear-gradient(160deg,#131318,var(--surface));border:1.5px solid var(--gold);
  border-radius:14px;padding:22px 24px;
  box-shadow:0 28px 70px rgba(0,0,0,.65),0 0 40px rgba(232,154,28,.15);
}
.proof-card .label{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.proof-card .price{font-family:var(--display);font-weight:700;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.01em;color:var(--white);margin-top:12px}
.chip-green{
  display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--green);background:rgba(123,201,138,.1);
  border:1px solid rgba(123,201,138,.3);border-radius:999px;padding:4px 10px;white-space:nowrap;
}

/* ---------- Home two doors ---------- */
.doors{max-width:1200px;margin:0 auto;padding:64px 40px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px}
.door{
  display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:18px;padding:38px 40px;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.door:hover{border-color:rgba(232,154,28,.55);transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.door .eyebrow{font-size:11.5px}
.door h3{font-size:22px;font-weight:600;margin:14px 0 0}
.door p{color:var(--text);font-size:16.5px;line-height:1.55;margin:12px 0 18px;max-width:400px}
.door .chev{margin-top:auto;color:var(--gold);font-weight:600;font-size:22px;line-height:1}

/* ---------- Home projects teaser ---------- */
.teaser{max-width:1200px;margin:0 auto;padding:92px 40px;display:flex;gap:56px;align-items:flex-start;flex-wrap:wrap}
.teaser-copy{flex:1 1 300px;min-width:280px}
.teaser-copy h2{font-size:44px;line-height:1.08;font-weight:700;margin:0}
.teaser-copy p{color:var(--text);font-size:17px;line-height:1.5;margin:18px 0 0;max-width:340px}
.teaser-copy .arrow-link{margin-top:26px}
.teaser-list{flex:1.4 1 420px;display:flex;flex-direction:column;gap:16px}
.teaser-row{display:flex;align-items:center;gap:20px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px}
.teaser-row .body{flex:1;min-width:180px}
.teaser-row h3{font-size:19px;font-weight:600;margin:0}
.teaser-row p{color:var(--text);font-size:14.5px;line-height:1.5;margin:6px 0 0}
.teaser-row img.center{object-position:center}
.teaser-row img{flex:none;width:176px;height:118px;object-fit:cover;object-position:top;border-radius:10px;border:1px solid var(--border-strong)}
a.teaser-row{color:inherit;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
a.teaser-row:hover{border-color:rgba(232,154,28,.5);transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,.45)}
a.teaser-row:hover h3{color:var(--gold)}
a.teaser-row h3{transition:color .2s}

/* ---------- Home ownership band ---------- */
.own{position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border);overflow:hidden}
.own-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.35;filter:saturate(.45) brightness(.75)}
.own-veil{position:absolute;inset:0;background:linear-gradient(180deg,#0A0A0C 0%,rgba(10,10,12,.88) 45%,#0A0A0C 100%)}
.own-inner{position:relative;max-width:1200px;margin:0 auto;padding:96px 40px}
.own-inner h2{font-size:clamp(30px,3.6vw,42px);font-weight:700;margin:16px 0 0}
.own-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px;margin-top:46px}
.own-grid .tile{margin-bottom:18px}
.own-grid p{color:var(--text-em);font-size:17px;line-height:1.6;margin:0}

/* ---------- Quote bands ---------- */
.quote-band{background:linear-gradient(180deg,rgba(232,154,28,.08),rgba(232,154,28,.025));border-bottom:1px solid rgba(232,154,28,.16)}
.quote-inner{max-width:780px;margin:0 auto;padding:72px 40px 80px;text-align:center}
.quote-mark{font-family:var(--display);font-weight:700;font-size:88px;line-height:.6;color:var(--gold);height:44px}
.quote-inner p{font-family:var(--display);font-weight:500;color:#F3EBDD;font-size:clamp(21px,2.6vw,26px);line-height:1.5;margin:0}

.statement{border-top:1px solid rgba(232,154,28,.16);border-bottom:1px solid rgba(232,154,28,.16);
  background:linear-gradient(180deg,rgba(232,154,28,.07),rgba(232,154,28,.02))}
.statement-inner{max-width:880px;margin:0 auto;padding:64px 40px 72px;text-align:center}
.statement-inner p{font-family:var(--display);font-weight:600;color:var(--white);font-size:clamp(20px,2.2vw,25px);line-height:1.5;margin:0}

/* ---------- Home founder strip ---------- */
.founder{max-width:1200px;margin:0 auto;padding:60px 40px 66px}
.founder-inner{display:flex;align-items:center;justify-content:center;gap:26px;flex-wrap:wrap}
.founder-who{display:flex;align-items:center;gap:18px}
.founder-who img{width:90px;height:90px;border-radius:50%;object-fit:cover;border:1px solid var(--border-strong)}
.founder-name{font-family:var(--display);font-weight:600;font-size:17px;color:var(--white)}
.founder-role{font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-top:4px}
.founder p{color:var(--text);font-size:16.5px;line-height:1.6;margin:0;max-width:520px}

/* ---------- Shared CTA ---------- */
.cta{border-top:1px solid var(--border)}
.cta-inner{max-width:760px;margin:0 auto;padding:92px 40px 104px;text-align:center}
.cta-inner h2{font-size:clamp(32px,4vw,46px);font-weight:700;letter-spacing:-.015em;margin:0}
.cta-inner p{color:var(--text);font-size:18px;line-height:1.55;margin:20px 0 0}
.cta-inner .btn{margin-top:32px}

/* ---------- Projects grid ---------- */
.proj-grid{max-width:1200px;margin:0 auto;padding:0 40px 100px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:24px}
.proj-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;overflow:hidden;transition:border-color .2s,transform .2s,box-shadow .2s}
.proj-card:hover{border-color:rgba(232,154,28,.5);transform:translateY(-3px);box-shadow:0 20px 50px rgba(0,0,0,.45)}
.proj-well{position:relative;height:215px;flex:none;overflow:hidden;border-bottom:1px solid var(--border)}
.proj-well img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.03);display:block}
.proj-well img.center{object-position:center}
.proj-well img.contain{object-fit:contain;padding:14px;background:#F6F7F9;transform:none}
.proj-well::after{content:"";position:absolute;inset:0;border:1px solid var(--border-strong);pointer-events:none}
.proj-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.proj-body h2{font-size:21px;font-weight:600;margin:0}
.proj-body p{color:var(--text);font-size:15px;line-height:1.55;margin:10px 0 18px}
.proj-body .go{margin-top:auto;color:var(--gold);font-weight:600;font-size:14.5px}

/* ---------- About ---------- */
.about-head{max-width:1200px;margin:0 auto;padding:84px 40px 0}
.about-head h1{font-weight:700;font-size:clamp(34px,4.2vw,52px);line-height:1.12;letter-spacing:-.015em;margin:16px 0 0;max-width:820px}
.story{max-width:1200px;margin:0 auto;padding:56px 40px 72px}
.story-cols{display:flex;gap:64px;flex-wrap:wrap;align-items:flex-start}
.story-prose{flex:1.1 1 380px;min-width:300px;display:flex;flex-direction:column;gap:26px}
.story-prose p{color:var(--text-em);font-size:17.5px;line-height:1.75;margin:0;max-width:65ch}
.timeline{flex:1 1 340px;min-width:280px;display:flex;flex-direction:column}
.tl-item{display:flex;gap:18px}
.tl-rail{display:flex;flex-direction:column;align-items:center;flex:none;width:12px}
.tl-dot{width:12px;height:12px;border-radius:50%;background:var(--gold);flex:none;margin-top:5px}
.tl-dot.now{box-shadow:0 0 14px rgba(232,154,28,.6)}
.tl-line{width:2px;flex:1;background:var(--border-strong)}
.tl-body{padding-bottom:30px}
.tl-item:first-child .tl-body,.tl-item:nth-child(2) .tl-body{padding-bottom:26px}
.tl-item:last-child .tl-body{padding-bottom:0}
.tl-year{font-family:var(--mono);font-size:12px;letter-spacing:.16em;color:var(--gold)}
.tl-what{color:var(--text-hi);font-size:15.5px;line-height:1.5;margin-top:4px}
.tl-note{color:var(--text);font-size:14px;line-height:1.55;margin-top:6px}

.bios{max-width:1200px;margin:0 auto;padding:24px 40px 72px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:24px;align-items:stretch}
.bio{border:1px solid var(--plum-border);border-radius:18px;padding:34px 36px;display:flex;gap:32px;align-items:center;flex-wrap:wrap}
.bio-founder{background:linear-gradient(160deg,var(--plum),var(--surface) 60%)}
.bio-team{background:linear-gradient(200deg,var(--plum),var(--surface) 60%)}
.bio img.portrait{width:190px;aspect-ratio:358/391;height:auto;object-fit:cover;border-radius:14px;border:1px solid var(--border-strong);flex:none}
.bio-mark{width:190px;aspect-ratio:358/391;border-radius:14px;border:1px solid var(--border-strong);flex:none;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,rgba(232,154,28,.16),rgba(13,13,17,0) 70%)}
.bio-mark img{position:absolute;top:50%;left:50%;width:62%;transform:translate(-50%,-54%);opacity:.85;filter:drop-shadow(0 0 26px rgba(232,154,28,.35))}
.bio-mark .where{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--text)}
.bio-copy{flex:1;min-width:230px}
.bio-copy .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.bio-copy h2{font-size:24px;font-weight:600;margin:10px 0 0}
.bio-copy p{color:var(--text);font-size:15.5px;line-height:1.65;margin:12px 0 0}

.think{border-top:1px solid var(--plum-border);background:linear-gradient(180deg,#110E1B,var(--band))}
.think-inner{max-width:1200px;margin:0 auto;padding:80px 40px 90px}
.think-inner h2{font-size:clamp(28px,3.4vw,38px);font-weight:700;margin:0}
.think-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:40px}
.think-card{background:rgba(20,16,31,.55);border:1px solid var(--plum-border);border-radius:16px;padding:30px 32px}
.think-card .tile{margin-bottom:20px}
.think-card h3{font-size:18px;font-weight:600;margin:0}
.think-card p{color:var(--text);font-size:15px;line-height:1.6;margin:10px 0 0}

/* ---------- Services ---------- */
.svc-head{max-width:1200px;margin:0 auto;padding:84px 40px 64px}
.svc-head h1{font-weight:700;font-size:clamp(34px,4.4vw,54px);line-height:1.1;letter-spacing:-.015em;margin:16px 0 0;max-width:860px}
.svc-head p{color:var(--text);font-size:18px;line-height:1.55;margin:20px 0 0}
.ladder{max-width:1200px;margin:0 auto;padding:0 40px 84px;display:flex;flex-direction:column;gap:20px}
.step{display:flex;gap:28px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:34px 38px;flex-wrap:wrap}
.step-num{flex:none;font-family:var(--mono);font-size:15px;color:var(--gold);width:44px;height:44px;border-radius:12px;
  background:var(--gold-08);border:1px solid var(--gold-25);display:flex;align-items:center;justify-content:center}
.step-body{flex:1;min-width:260px}
.step-title{display:flex;align-items:center;gap:12px}
.step-title svg{width:21px;height:21px;flex:none}
.step-title h2{font-size:24px;font-weight:600;margin:0}
.step-body>p{color:var(--text);font-size:16px;line-height:1.65;margin:12px 0 0;max-width:70ch}
.getbox{background:rgba(232,154,28,.05);border:1px solid rgba(232,154,28,.2);border-radius:14px;padding:24px 28px;margin-top:22px}
.getbox .label{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.getlist{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.getrow{display:flex;gap:12px;align-items:flex-start}
.getrow svg{width:17px;height:17px;flex:none;margin-top:3px}
.getrow span{color:var(--text-em);font-size:15.5px;line-height:1.55}

.build{border-top:1px solid var(--border);background:var(--band)}
.build-inner{max-width:1200px;margin:0 auto;padding:76px 40px 84px}
.build-inner h2{font-size:clamp(26px,3vw,34px);font-weight:700;margin:0}
.strip{color:var(--text);font-size:16.5px;line-height:1.55;margin:14px 0 0}
.mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:16px;margin-top:34px}
.mini{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 26px}
.mini .tile{margin-bottom:16px}
.mini h3{font-size:17px;font-weight:600;margin:0}
.mini p{color:var(--text);font-size:14.5px;line-height:1.55;margin:8px 0 0}
.build-inner .arrow-link{margin-top:30px}

.logos{border-top:1px solid var(--border)}
.logos-inner{max-width:1200px;margin:0 auto;padding:64px 40px 72px}
.logos-cols{display:flex;gap:20px;flex-wrap:wrap}
.logos-card{flex:1 1 380px;min-width:280px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:30px 34px}
.logos-card .label{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.logos-row{display:flex;align-items:center;gap:16px 30px;flex-wrap:wrap;margin-top:22px}
.logo-item{display:inline-flex;align-items:center;gap:9px}
.logo-item img,.logo-item svg{width:22px;height:22px;flex:none}
.logo-item .mono-tile{width:22px;height:22px;border-radius:6px;color:#fff;font-family:var(--display);font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.logo-item span.name{font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--text-em)}
.tm{color:var(--faint);font-size:12px;margin:28px 0 0}

.after{border-top:1px solid var(--border);background:var(--band)}
.after-inner{max-width:1200px;margin:0 auto;padding:72px 40px 80px}
.after-inner h2{font-size:clamp(26px,3vw,34px);font-weight:700;margin:0}
.after-inner>p{color:var(--text);font-size:16.5px;line-height:1.6;margin:14px 0 0;max-width:66ch}
.after-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:34px}
.after-grid .mini p{color:var(--text-em);font-size:15px;line-height:1.6}

.statement-svc{border-top:1px solid rgba(232,154,28,.16);border-bottom:none;
  background:linear-gradient(180deg,rgba(232,154,28,.06),rgba(232,154,28,.015))}
.statement-svc .statement-inner{padding:60px 40px 66px}
.statement-svc .statement-inner p{font-size:clamp(19px,2.1vw,24px);line-height:1.55}

.faq{max-width:900px;margin:0 auto;padding:76px 40px 84px}
.faq h2{font-size:clamp(26px,3vw,34px);font-weight:700;margin:0}
.faq-list{display:flex;flex-direction:column;gap:16px;margin-top:34px}
.faq-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px 30px}
.faq-item h3{font-size:18px;font-weight:600;margin:0}
.faq-item p{color:var(--text);font-size:15.5px;line-height:1.65;margin:10px 0 0}

/* ---------- Contact ---------- */
.contact{max-width:1200px;margin:0 auto;padding:0 40px 80px;display:flex;gap:56px;flex-wrap:wrap;align-items:flex-start}
.contact-side{flex:1 1 320px;min-width:280px;align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.info-card{display:flex;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px 24px;transition:border-color .2s}
a.info-card:hover{border-color:rgba(232,154,28,.5)}
.info-card .t{font-family:var(--display);font-size:16.5px;font-weight:600;color:var(--white)}
.info-card .s{color:var(--text);font-size:15px;margin-top:3px}
.info-card .s.gold{color:var(--gold)}
.quote-card{background:linear-gradient(160deg,rgba(232,154,28,.09),rgba(232,154,28,.025));
  border:1px solid var(--gold-25);border-radius:16px;padding:24px 26px 26px}
.quote-card .mark{font-family:var(--display);font-weight:700;font-size:54px;line-height:.6;color:var(--gold);height:28px}
.quote-card p{font-family:var(--display);font-weight:500;color:#F3EBDD;font-size:16.5px;line-height:1.55;margin:0}

.form-card{flex:1.3 1 420px;min-width:300px;background:var(--surface);border:1px solid var(--border);
  border-radius:18px;padding:36px 38px;display:flex;flex-direction:column;gap:20px;position:relative}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--text)}
.field input,.field textarea{
  background:var(--ink);border:1px solid var(--border-strong);border-radius:10px;padding:13px 15px;
  color:var(--white);font-family:var(--sans);font-size:15.5px;transition:border-color .2s;width:100%;
}
.field textarea{resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#5d636c}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#C9553D}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{color:var(--muted);font-size:13.5px;margin-top:12px}
.form-error{color:#E0836F;font-size:14.5px;line-height:1.5;margin:0}
.btn[disabled]{opacity:.6;cursor:progress}
.sent{text-align:center;padding:40px 10px}
.sent-check{width:58px;height:58px;border-radius:50%;background:rgba(123,201,138,.1);border:1px solid rgba(123,201,138,.35);
  display:flex;align-items:center;justify-content:center;margin:0 auto}
.sent-check svg{width:26px;height:26px}
.sent h2{font-size:24px;font-weight:600;margin:22px 0 0}
.sent p{color:var(--text);font-size:16px;line-height:1.6;margin:12px 0 0}

.next{border-top:1px solid var(--border);background:var(--band)}
.next-inner{max-width:1200px;margin:0 auto;padding:72px 40px 84px}
.next-inner h2{font-size:clamp(26px,3vw,34px);font-weight:700;margin:0}
.next-rail{position:relative;margin-top:38px}
.next-rail::before{content:"";position:absolute;top:51px;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(232,154,28,.4) 15%,rgba(232,154,28,.4) 85%,transparent)}
.next-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;position:relative}
.next-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px 30px}
.next-card .step-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-top:20px}
.next-card h3{font-size:24px;font-weight:600;margin:10px 0 0}
.next-card p{color:var(--text);font-size:15px;line-height:1.6;margin:10px 0 0}

/* ---------- 404 ---------- */
.nf{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:120px 40px 140px;max-width:640px;margin:0 auto}
.nf img{width:88px;height:auto;opacity:.9}
.nf h1{font-size:clamp(28px,4vw,40px);font-weight:700;margin:32px 0 0}
.nf p{color:var(--text);font-size:17px;line-height:1.6;margin:16px 0 0}
.nf .btn{margin-top:32px}

/* Mobile-only line break. Inert at every width until the mobile pass turns it on. */
.mbr{display:none}

/* ---------- Responsive ---------- */
@media (max-width:820px){
  .nav-links{display:none}
  .nav-toggle{display:flex}
  .teaser-copy h2{font-size:clamp(30px,7vw,44px)}
  .proof-inner{padding-top:64px;padding-bottom:60px}
  .hero-inner{padding-top:56px;padding-bottom:70px;gap:44px}
  .hero-mark{width:420px;top:-120px;right:-140px}
  /* the layered proof composition needs real width, so it stacks below this point */
  .proof-art{display:flex;flex-direction:column;gap:18px;min-height:0}
  .proof-art::before{display:none}
  .proof-brief{position:static;width:100%;opacity:.9;order:2}
  .proof-video{width:100%;margin:0;order:1}
  .proof-card{position:static;width:100%;min-width:0;order:3}
  .story-cols{gap:44px}
  .next-rail::before{display:none}
}

@media (max-width:600px){
  .wrap,.nav-inner,.nav-menu,.footer-inner,.footer-built,.hero-inner,.proof-inner,.doors,.teaser,
  .own-inner,.quote-inner,.statement-inner,.founder,.cta-inner,.page-head,.proj-grid,.about-head,
  .story,.bios,.think-inner,.svc-head,.ladder,.build-inner,.logos-inner,.after-inner,.faq,
  .contact,.next-inner,.nf{padding-left:22px;padding-right:22px}
  .hero-inner{padding-top:44px;padding-bottom:56px}
  .page-head,.about-head,.svc-head{padding-top:56px}
  .door{padding:30px 26px;min-height:0}
  .step{padding:28px 24px;gap:18px}
  .getbox{padding:20px 20px}
  .form-card{padding:26px 22px}
  .bio{padding:26px 24px;gap:22px}
  .bio img.portrait,.bio-mark{width:150px}
  .think-card,.next-card,.faq-item,.logos-card{padding:24px 22px}
  .teaser{padding-top:64px;padding-bottom:64px;gap:36px}
  .teaser-row{padding:16px 16px;gap:14px}
  .teaser-row img{width:124px;height:84px}
  .own-inner{padding-top:68px;padding-bottom:68px}
  .own-grid{gap:30px;margin-top:34px}
  .cta-inner{padding-top:68px;padding-bottom:76px}
  .footer-inner{gap:22px}
  .proj-grid{padding-bottom:70px}
  .contact-side{gap:16px}
  .story-prose p{font-size:16.5px}
  .quote-inner{padding-top:56px;padding-bottom:60px}
}

@media (max-width:400px){
  .wrap,.nav-inner,.nav-menu,.footer-inner,.footer-built,.hero-inner,.proof-inner,.doors,.teaser,
  .own-inner,.quote-inner,.statement-inner,.founder,.cta-inner,.page-head,.proj-grid,.about-head,
  .story,.bios,.think-inner,.svc-head,.ladder,.build-inner,.logos-inner,.after-inner,.faq,
  .contact,.next-inner,.nf{padding-left:18px;padding-right:18px}
  .brand span{font-size:19px}
  .teaser-row{flex-wrap:wrap}
  .teaser-row img{width:100%;height:120px}
  .founder-inner{gap:20px}
  .logos-row{gap:14px 20px}
}

/* ===================================================================
   MOBILE PASS
   Everything below is scoped to 768px and narrower and is appended
   last on purpose, so it wins over the older 820 / 600 / 400 blocks
   without editing them. No rule here can reach a desktop viewport.
   =================================================================== */

@media (max-width:768px){

  /* ---- Type scale ---- */
  .hero-copy h1,.page-head h1,.about-head h1,.svc-head h1{
    font-size:34px;line-height:1.1;letter-spacing:-.01em;text-wrap:balance;margin-top:10px;
  }
  .mbr{display:inline}

  .teaser-copy h2,.own-inner h2,.think-inner h2,.build-inner h2,.after-inner h2,
  .faq h2,.next-inner h2,.cta-inner h2{font-size:26px;line-height:1.15;text-wrap:balance}
  .proof-copy .lead{font-size:24px;line-height:1.3}

  .door h3,.teaser-row h3,.think-card h3,.mini h3,.proj-body h2,
  .next-card h3,.bio-copy h2,.step-title h2,.sent h2{font-size:18px;line-height:1.25}
  .faq-item h3{font-size:17px;line-height:1.3}
  .info-card .t{font-size:17px}

  .hero-copy p,.page-head p,.svc-head p,.proof-copy .sub,.cta-inner p,
  .teaser-copy p,.build-inner .strip{font-size:16px;line-height:1.5}
  .story-prose p{font-size:16px;line-height:1.55}

  .door p,.teaser-row p,.think-card p,.mini p,.proj-body p,.faq-item p,.next-card p,
  .bio-copy p,.step-body>p,.own-grid p,.founder p,.after-inner>p,.getrow span,
  .info-card .s,.tl-what,.sent p{font-size:15px;line-height:1.5}

  /* Space Mono labels: one size, one tracking, never wrapped */
  .eyebrow,.door .eyebrow,.proof-card .label,.getbox .label,.logos-card .label,
  .next-card .step-label,.bio-copy .kicker,.founder-role,.field label,.tl-year{
    font-size:11px;letter-spacing:.14em;white-space:nowrap;
  }

  .footer-tag,.footer-copy,.form-note,.tm,.footer-built,.tl-note,.proj-body .go,
  .footer-nav a{font-size:13px}

  /* ---- Buttons and tap targets ---- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    min-height:48px;padding:12px 24px;
  }
  .btn-sm{padding:12px 20px}
  .btn:active{background:var(--gold-deep)}
  .arrow-link{min-height:48px}
  /* The hamburger keeps its look and behaviour; this only grows its touch area to 48px. */
  .nav-toggle{position:relative}
  .nav-toggle::after{content:"";position:absolute;top:-7px;right:-7px;bottom:-7px;left:-7px}
  .door:active,a.teaser-row:active,.proj-card:active,a.info-card:active{
    border-color:rgba(232,154,28,.55);background:#131318;
  }

  /* ---- Section rhythm ---- */
  .hero-inner{padding-top:32px;padding-bottom:56px;gap:28px}
  .page-head,.svc-head{padding-top:32px;padding-bottom:32px}
  .about-head{padding-top:32px}
  .proof-inner{padding-top:56px;padding-bottom:56px;gap:28px}
  .doors{padding-top:56px}
  .teaser{padding-top:56px;padding-bottom:56px;gap:24px}
  .own-inner{padding-top:56px;padding-bottom:56px}
  .quote-inner{padding-top:40px;padding-bottom:40px}
  .founder{padding-top:56px;padding-bottom:56px}
  .cta-inner{padding-top:56px;padding-bottom:56px}
  .story{padding-top:32px;padding-bottom:56px}
  .bios{padding-top:0;padding-bottom:56px}
  .think-inner{padding-top:56px;padding-bottom:56px}
  .ladder{padding-bottom:56px}
  .build-inner,.logos-inner,.after-inner,.faq,.next-inner{padding-top:56px;padding-bottom:56px}
  .statement-inner,.statement-svc .statement-inner{padding-top:40px;padding-bottom:40px}
  .proj-grid,.contact{padding-bottom:56px}
  .nf{padding-top:56px;padding-bottom:64px}

  /* ---- Stacked-card gaps ---- */
  .doors,.teaser-list,.think-grid,.mini-grid,.after-grid,.faq-list,
  .next-grid,.proj-grid,.contact-side,.ladder,.bios,.logos-cols{gap:12px}
  .own-grid{grid-template-columns:1fr;gap:12px;margin-top:24px}
  .next-grid{grid-template-columns:1fr}
  .after-grid{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
  .think-grid,.mini-grid{margin-top:24px}

  /* ---- Icon-left card layout ----
     Icon tile 40px in column one, title and body stacked in column two,
     everything top aligned. No card carries a min-height. */
  .think-card,.mini,.next-card{
    display:grid;grid-template-columns:40px 1fr;
    column-gap:12px;row-gap:6px;align-items:start;padding:20px;
  }
  .think-card .tile,.mini .tile,.next-card .tile,.own-grid .tile,.info-card .tile{
    width:40px;height:40px;border-radius:10px;margin-bottom:0;
  }
  .think-card .tile svg,.mini .tile svg,.next-card .tile svg,
  .own-grid .tile svg,.info-card .tile svg{width:20px;height:20px}

  .think-card .tile,.mini .tile{grid-column:1;grid-row:1/span 2;align-self:start}
  .think-card h3,.mini h3{grid-column:2;grid-row:1;align-self:start}
  .think-card p,.mini p{grid-column:2;grid-row:2;margin:0}
  .after-grid .mini .tile{grid-row:1}
  .after-grid .mini p{grid-column:2;grid-row:1;margin:0}

  .own-grid>div{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:start}
  .own-grid p{margin:0}
  .own-bg,.own-veil{display:none}

  /* What happens next: step label beside the icon, then title, then body */
  .next-card .tile{grid-column:1;grid-row:1;align-self:center}
  .next-card .step-label{grid-column:2;grid-row:1;align-self:center;margin-top:0}
  .next-card h3{grid-column:2;grid-row:2;margin:0}
  .next-card p{grid-column:2;grid-row:3;margin:0}
  .next-rail::before{display:none}

  /* ---- Home hero: crop the dashboard to its legible upper-left quarter ---- */
  .browser{position:relative;overflow:hidden;aspect-ratio:4/3}
  .browser video{
    position:absolute;top:0;left:0;
    width:200%;max-width:none;height:auto;aspect-ratio:1280/834;
  }
  .hero-copy p{max-width:none}
  .hero-copy .btn{margin-top:24px}

  /* ---- Home proof composition ---- */
  .proof-art{gap:12px}
  .proof-brief{order:1}
  .proof-video{order:2;width:56%;margin:0 auto}
  /* Centred so the card reads as part of the composition above it, not a list item. */
  .proof-card{order:3;padding:20px;text-align:center}
  .proof-card .price{font-size:30px;margin-top:8px}
  .proof-play-disc{width:44px;height:44px}
  .proof-play svg{width:18px;height:18px}

  /* ---- Home doors: whole card is the target, arrow rides the title ---- */
  .door{padding:20px;min-height:0}
  .door h3{margin:8px 0 0}
  .door h3::after{content:"\00A0\2192";color:var(--gold)}
  .door p{margin:8px 0 0;max-width:none}
  .door .chev{display:none}

  /* ---- Home project teaser rows ---- */
  /* Column direction turns flex-basis into a height, so reset both children. */
  .teaser{flex-direction:column}
  .teaser-copy,.teaser-list{flex:0 0 auto;width:100%;min-width:0}
  .teaser-copy p{max-width:none}
  .teaser-copy .arrow-link{margin-top:12px}
  .teaser-row{flex-wrap:nowrap;align-items:center;gap:12px;padding:20px}
  .teaser-row .tile{display:none}
  .teaser-row .body{flex:1;min-width:0}
  .teaser-row p{margin-top:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .teaser-row img,.teaser-row img.center{
    width:72px;height:72px;flex:none;border-radius:10px;object-position:center;
  }

  /* ---- Home founder strip ---- */
  .founder-inner{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px}
  .founder-who{gap:12px}
  .founder-who img{width:64px;height:64px}
  .founder p{max-width:none;text-align:left}

  /* ---- Quote and statement bands ---- */
  .quote-inner p,.statement-inner p,.statement-svc .statement-inner p{font-size:20px;line-height:1.45}
  .quote-mark{font-size:64px;height:32px}
  .statement-inner{text-align:left}
  .statement-svc .statement-inner{text-align:center}

  /* ---- About ---- */
  .story-cols{gap:32px}
  .story-prose{gap:18px}
  .bio{padding:20px;gap:14px;align-items:flex-start;flex-wrap:nowrap}
  .bio img.portrait,.bio-mark{width:72px;height:72px;aspect-ratio:1/1;border-radius:12px}
  .bio-mark img{width:66%}
  .bio-mark .where{display:none}
  .bio-copy{min-width:0}
  .bio-copy h2{margin-top:6px}
  .bio-copy p{margin-top:8px}
  .tl-item{gap:14px}
  .tl-body{padding-bottom:22px}
  .tl-item:first-child .tl-body,.tl-item:nth-child(2) .tl-body{padding-bottom:20px}

  /* ---- Services ladder: number, icon and title on one row ---- */
  .step{
    display:grid;grid-template-columns:32px 1fr;
    column-gap:12px;row-gap:10px;padding:20px;
  }
  .step-body{display:contents}
  .step-num{grid-column:1;grid-row:1;align-self:start;width:32px;height:32px;border-radius:10px;font-size:14px}
  .step-title{grid-column:2;grid-row:1;gap:8px;align-items:flex-start;min-width:0}
  .step-title svg{width:18px;height:18px;margin-top:3px}
  .step-body>p{grid-column:1/-1;grid-row:2;margin:0;max-width:none}
  .getbox{grid-column:1/-1;grid-row:3;margin-top:0;padding:16px}
  .getlist{gap:10px;margin-top:12px}

  /* ---- Services logos ---- */
  .logos-card{padding:20px}
  .logos-row{gap:16px;margin-top:16px}
  .logo-item{height:28px}
  .logo-item span.name{font-size:14px}
  .tm{margin-top:18px}

  /* ---- Services after-the-build intro and FAQ ---- */
  .after-inner>p{text-wrap:pretty;max-width:60ch}
  .faq-item{padding:20px}

  /* ---- Projects grid ---- */
  .proj-well{height:auto;aspect-ratio:16/10}
  .proj-well img{transform:none}
  .proj-body{padding:20px 20px 0}
  .proj-body p{margin:8px 0 14px}
  .proj-body .go{
    display:flex;align-items:center;min-height:48px;
    margin:auto -20px 0;padding:0 20px;border-top:1px solid var(--border);
  }

  /* ---- Contact ---- */
  .contact{gap:24px}
  .info-card{gap:12px;padding:16px 18px;min-height:48px}
  .quote-card{padding:20px}
  .quote-card p{font-size:16px}
  .quote-card .mark{font-size:44px;height:22px}
  /* The form has to read as a form on a phone in daylight. The card lifts off the
     page background and the fields lift off the card, all within the dark palette. */
  .form-card{padding:20px;gap:16px;background:#111117;border-color:#2C2C36}
  .field-row{grid-template-columns:1fr;gap:16px}
  .field label{color:var(--text-em)}
  .field input,.field textarea{
    font-size:16px;padding:12px 14px;background:#191921;border-color:#3B3B47;
  }
  .field input::placeholder,.field textarea::placeholder{color:#7A808A}
  .field input{min-height:48px}
  .form-card .btn{width:100%}
  /* Success state: give it room so it lands centred rather than as a thin strip. */
  .sent{padding:44px 10px;min-height:260px;display:flex;flex-direction:column;justify-content:center}
  .sent-check{width:52px;height:52px}

  /* ---- 404 ---- */
  .nf img{width:72px}
  .nf h1{font-size:30px;line-height:1.15}
  .nf p{font-size:16px}
  .nf .btn{margin-top:24px}

  /* ---- Footer: brand and social share a row, links wrap below ---- */
  .footer-inner{
    flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;
    padding-top:20px;padding-bottom:8px;gap:14px;
  }
  .footer-nav{order:3;width:100%;gap:4px 16px;justify-content:space-between}
  .footer-nav a{display:inline-flex;align-items:center;min-height:48px}
  .footer-tag{margin-top:6px}
  .footer-built{padding-top:6px;padding-bottom:18px}
}

@media (max-width:480px){
  .hero-copy h1,.page-head h1,.about-head h1,.svc-head h1{font-size:30px}

  .door,.think-card,.mini,.faq-item,.next-card,.logos-card,
  .teaser-row,.step,.bio,.form-card,.quote-card,.proof-card{padding:18px}
  .proj-body{padding:18px 18px 0}
  .proj-body .go{margin:auto -18px 0;padding:0 18px}
  .info-card{padding:14px 16px}
  .getbox{padding:14px}

  .think-grid,.mini-grid,.after-grid,.proj-grid{grid-template-columns:1fr}

  .hero-copy .btn,.cta-inner .btn,.nf .btn,.form-card .btn{width:100%}
  .teaser-row img,.teaser-row img.center{width:64px;height:64px}
}