/* Shared building blocks for every inner page (multi-page build, 30 Sep 2026).
   Every page opens with a dark .phero so the white header reads over it, like the homepage street. */

/* header: "Who we build for" dropdown */
.nav{align-items:center}
.nav-dd{position:relative}
.nav-dd>a::after{content:"";display:inline-block;width:6px;height:6px;margin-left:7px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:translateY(-3px) rotate(45deg);opacity:.7}
.dd-menu{position:absolute;left:-18px;top:calc(100% + 14px);width:330px;padding:10px;border-radius:18px;background:#fff;color:var(--text);box-shadow:0 30px 60px -20px rgba(0,0,0,.35),0 0 0 1px var(--line);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .25s var(--ease),visibility .2s}
.dd-menu::before{content:"";position:absolute;inset:-16px 0 auto;height:16px}
.nav-dd:hover .dd-menu,.nav-dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:none}
.dd-menu a{display:grid;gap:2px;padding:11px 14px;border-radius:12px;opacity:1}
.dd-menu a:hover{background:var(--paper)}
.dd-menu b{font:700 15px "Inter Tight"}.dd-menu span{font:500 13px Inter;color:var(--muted)}

/* page hero: dark, spotlit, one idea per page */
.phero{position:relative;overflow:hidden;background:var(--ink);color:#fff;padding:170px 0 110px;isolation:isolate}
.phero::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70vw;height:70vw;max-width:900px;max-height:900px;background:radial-gradient(closest-side,rgba(255,210,63,.18),transparent 70%);z-index:-1;pointer-events:none}
.phero .eyebrow{color:rgba(255,255,255,.6)}
.phero h1{font:800 clamp(44px,7vw,96px)/.98 "Inter Tight";letter-spacing:-.045em;margin:18px 0 0;max-width:13ch}
.phero h1 em{font:italic 400 1.08em/.9 "Instrument Serif";color:var(--spot);letter-spacing:-.01em}
.phero .lead{font-size:clamp(17px,1.6vw,21px);color:rgba(255,255,255,.72);max-width:560px;margin-top:22px}
.phero .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.phero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}

/* sections */
.psec{padding:clamp(80px,11vw,140px) 0}
.psec.ink{background:var(--ink);color:#fff}.psec.ink .sub,.psec.ink p{color:rgba(255,255,255,.7)}
.psec.paper2{background:var(--paper-2)}
.psec h2{font:800 clamp(34px,4.6vw,60px)/1.02 "Inter Tight";letter-spacing:-.04em;margin-top:14px;max-width:18ch}
.psec h2 em{font:italic 400 1.08em/.9 "Instrument Serif";color:inherit}
.psec.ink h2 em{color:var(--spot)}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:48px}
.pcard{background:#fff;border-radius:24px;padding:30px;box-shadow:0 0 0 1px var(--line)}
.psec.ink .pcard{background:var(--ink-2);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.pcard h3{font:800 22px/1.15 "Inter Tight";letter-spacing:-.02em;margin:14px 0 8px}
.pcard p{font-size:15.5px;color:var(--muted)}
.pnum{font:700 12px Inter;letter-spacing:.15em;color:var(--muted)}

/* faq (use <details>) */
.pfaq{display:grid;grid-template-columns:.8fr 1.2fr;gap:48px}
.pfaq details{border-bottom:1px solid var(--line);padding:20px 0}
.pfaq summary{cursor:pointer;font:700 18px "Inter Tight";list-style:none;display:flex;justify-content:space-between;gap:16px}
.pfaq summary::after{content:"+";font-weight:500;color:var(--muted)}.pfaq details[open] summary::after{content:"\2212"}
.pfaq details p{margin-top:12px;color:var(--muted)}

/* closing call to action */
.pcta{background:var(--ink);color:#fff;border-radius:32px;padding:clamp(40px,6vw,80px);display:grid;grid-template-columns:1.3fr auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.pcta::before{content:"";position:absolute;right:-10%;top:-60%;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,210,63,.22),transparent 70%)}
.pcta h2{margin:0}.pcta p{color:rgba(255,255,255,.7);margin-top:12px}

/* breadcrumb */
.crumbs{font:600 13px Inter;color:rgba(255,255,255,.55);display:flex;gap:8px;flex-wrap:wrap}.crumbs a:hover{color:#fff}

@media (max-width:900px){
  .phero{padding:130px 0 80px}.phero-grid,.pfaq,.pcta{grid-template-columns:1fr}
  .pgrid{grid-template-columns:1fr}
}

/* contact */
.pg-contact .phero{min-height:100svh;display:flex;align-items:center}
.ct-steps{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:12px}
.ct-steps li{display:flex;gap:14px;align-items:baseline;color:rgba(255,255,255,.8)}.ct-steps b{font:700 12px Inter;letter-spacing:.15em;color:var(--spot)}
.pg-contact .direct{margin-top:26px;color:rgba(255,255,255,.6)}.pg-contact .direct a{color:var(--spot)}