/* Shared by every page: tokens, base, header, footer, page hero, calls to action. Load first; each page then adds its own stylesheet. */
:root{
  --bg:#FFFFFF; --panel:#F9F7F4; --ink:#1B3139; --ink-2:#4B5F66; --ink-3:#667479;
  --line:#E5E1D8; --line-2:#D2CCC0;
  /* Brand red, split by job so text and buttons clear WCAG AA (4.5:1):
     --accent graphics only . --accent-text accent text . --accent-btn solid fills */
  --accent:#FF3621; --accent-text:#BC2B0D; --accent-hover:#D2310F;
  --accent-btn:#D2310F; --accent-btn-hover:#A82609;
  --accent-ink:#FFFFFF; --accent-soft:#FDEDE9;
  --hero-bg:#1B3139; --hero-panel:#22404B; --hero-ink:#F7F9FA; --hero-ink-2:#A2B4BB;
  --hero-line:#33525D; --hero-accent:#FF6F50; --ok:#2A7A45;
  --sans:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"DM Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#10181C; --panel:#17252B; --ink:#EDF2F3; --ink-2:#A2B2B8; --ink-3:#7C8D94;
    --line:#25363D; --line-2:#35484F;
    --accent:#FF5C42; --accent-text:#FF5C42; --accent-hover:#FF7A64;
    --accent-btn:#FF5C42; --accent-btn-hover:#FF7A64;
    --accent-ink:#1B0F0B; --accent-soft:#2C2320;
    --hero-bg:#14232A; --hero-panel:#1B2F37; --hero-line:#2C4650; --ok:#4FBF77; }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
:is(main,section,article,div,h2,h3)[id]{scroll-margin-top:84px}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-btn);color:var(--accent-ink)}
.wrap{max-width:1400px;margin:0 auto;padding:0 clamp(20px,3vw,40px)}
a:focus-visible,.btn:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--accent-btn);color:var(--accent-ink);font-weight:600;font-size:14.5px;padding:11px 20px;border-radius:0 0 4px 0;text-decoration:none}
.skip:focus{left:0}
main:focus{outline:none}
/* nav (unified) */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:34px;height:66px}
.logo{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink)}
/* 46px, not 38: the ring is open at twelve o'clock, so its topmost ink sits
   ~3.6px below the circle's crown and the mark reads smaller than it measures.
   top:-2px re-centres it - the same open crown makes the ink bottom-heavy. */
.logo .mark{width:42px;height:42px;flex:none;color:var(--accent);position:relative;top:-1.5px}
.logo .mark svg{width:100%;height:100%;display:block}
.logo .stack{display:flex;flex-direction:column;line-height:1}
.logo .cu{font-weight:600;font-size:16.5px;letter-spacing:.2em}
.logo .in{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.32em;color:var(--ink-2);margin-top:4px;text-transform:uppercase}
nav.links{display:flex;gap:26px;margin-left:auto}
nav.links a{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:500}
nav.links a:hover{color:var(--ink)}
nav.links a.active{color:var(--accent-text)}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;text-decoration:none;padding:11px 20px;border-radius:4px;border:1px solid transparent;background:var(--accent-btn);color:var(--accent-ink);transition:background .16s ease,border-color .16s ease,color .16s ease}
.btn:hover{background:var(--accent-btn-hover)}
.btn.outline{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.outline:hover{border-color:var(--ink)}
.nav .btn{padding:9px 16px;font-size:14px}
.burger{display:none;background:none;border:1px solid var(--line-2);border-radius:4px;width:40px;height:38px;cursor:pointer;place-items:center;padding:0}
.burger span{display:block;width:16px;height:2px;background:var(--ink);margin:2.5px auto;transition:transform .2s ease}
.mnav{display:none;border-top:1px solid var(--line);background:var(--bg)}
.mnav a{display:block;padding:15px clamp(20px,3vw,40px);text-decoration:none;color:var(--ink);font-weight:500;font-size:15.5px;border-bottom:1px solid var(--line)}
.mnav a:last-child{border-bottom:none}
header.site.open .mnav{display:block;max-height:calc(100dvh - 66px);overflow-y:auto}
header.site.open .burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
header.site.open .burger span:nth-child(2){transform:translateY(-2px) rotate(-45deg)}
nav.links a{white-space:nowrap}
/* the seven desktop links need about 1100px; below that the menu takes over */
@media(max-width:1100px){ nav.links{display:none} .burger{display:grid} .nav .btn{margin-left:auto} }
/* phones: the menu carries "Book a consultation", so the header button would only crowd the burger */
@media(max-width:560px){ .nav .btn{display:none} .burger{flex:none;margin-left:auto} }
/* page hero */
.phero{background:var(--panel);border-bottom:1px solid var(--line);padding:clamp(48px,7vh,80px) 0}
.phero h1{font-size:clamp(30px,4vw,46px);font-weight:600;line-height:1.14;letter-spacing:-.02em;margin:16px 0 16px;max-width:26ch;text-wrap:balance}
.phero p{color:var(--ink-2);font-size:17px;max-width:64ch}
.kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-text)}
/* cta */
.pcta{padding-block:clamp(56px,8vh,88px)}
.pcta h2{font-size:clamp(26px,3.4vw,38px);font-weight:600;letter-spacing:-.018em;max-width:24ch;text-wrap:balance}
.pcta p{margin-top:14px;color:var(--ink-2);max-width:56ch}
.pcta .cta-row{display:flex;gap:16px;align-items:center;margin-top:28px;flex-wrap:wrap}
.pcta .mail{font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.pcta .mail a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}
/* footer (unified sitemap) */
footer.site{border-top:1px solid var(--line);padding:52px 0 40px}
.fgrid{display:grid;grid-template-columns:minmax(0,3.4fr) repeat(4,minmax(0,2fr));gap:clamp(20px,3vw,44px)}
.fbrand .logo{margin-bottom:12px}
.fbrand p{color:var(--ink-2);font-size:14px;max-width:34ch}
.fcol h3{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.fcol{display:flex;flex-direction:column}
.fcol a{color:var(--ink-2);text-decoration:none;font-size:14px;padding:5px 0}
.fcol a:hover{color:var(--ink)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;border-top:1px solid var(--line);margin-top:40px;padding-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2)}
@media(max-width:860px){ .fgrid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .fgrid{grid-template-columns:1fr} }