/* ---- self hosted typefaces, see assets/fonts for licenses ---- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/archivo-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/archivo-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/archivo-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/archivo-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/archivo-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/archivo-latin-900-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}

:root{
    /* palette */
    --navy:#0B1F3A; --navy-900:#071629; --navy-800:#0E2645; --navy-700:#15355f;
    --tan:#C9B68A; --tan-soft:#E4D9C0; --tan-dim:#9c8c66;
    --gold:#B08D3E; --gold-bright:#D9B158; --gold-deep:#7d5f1a;
    --parchment:#F4F1E9; --parchment-2:#ECE7DA;
    --ink:#0A1422;
    --mono:'IBM Plex Mono', ui-monospace, monospace;
    --disp:'Archivo', sans-serif;
    --maxw:1200px;

    /* dark mode roles (default) */
    color-scheme:dark;
    --bg:var(--navy); --bg-deep:var(--navy-900);
    --bg-raised:rgba(7,22,41,.6); --bg-raised-2:rgba(7,22,41,.85);
    --bg-nav:rgba(7,22,41,.86); --bg-menu:rgba(7,22,41,.97);
    --fg:var(--tan-soft); --fg-strong:#fff; --fg-muted:var(--tan); --fg-dim:var(--tan-dim);
    --accent:var(--gold-bright); --accent-rule:var(--gold);
    --line:rgba(201,182,138,.18); --line-strong:rgba(201,182,138,.34);
    --hero-bg:radial-gradient(1200px 700px at 70% 18%,rgba(21,53,95,.55),transparent 60%),
      linear-gradient(180deg,var(--navy-900),var(--navy) 55%,var(--navy-800));
    --ai-bg:radial-gradient(900px 500px at 18% 30%,rgba(176,141,62,.16),transparent 60%),
      linear-gradient(180deg,var(--navy-900),var(--ink));
    --pillar-bg:linear-gradient(180deg,rgba(14,38,69,.6),rgba(7,22,41,.4));
    --pillar-bg-hover:linear-gradient(180deg,rgba(21,53,95,.7),rgba(7,22,41,.5));
    --pillar-feature-bg:linear-gradient(180deg,rgba(176,141,62,.14),rgba(7,22,41,.55));
    --reticle:#C9B68A; --mark-cross:#C9B68A;
    --sev1-bg:rgba(217,177,88,.18); --sev2-bg:rgba(201,182,138,.12); --sev3-bg:rgba(201,182,138,.06);
    --ghost-hover-bg:rgba(176,141,62,.08); --menu-hover-bg:rgba(176,141,62,.12);
    --err:#e2a7a0; --focus:#fff;
  }
  /* light mode: the same palette with the roles swapped */
  :root[data-theme="light"]{
    color-scheme:light;
    --bg:var(--parchment); --bg-deep:var(--parchment-2);
    --bg-raised:rgba(255,255,255,.72); --bg-raised-2:#fff;
    --bg-nav:rgba(244,241,233,.88); --bg-menu:rgba(244,241,233,.98);
    --fg:var(--ink); --fg-strong:var(--navy); --fg-muted:#4b566b; --fg-dim:#6e6246;
    --accent:var(--gold-deep); --accent-rule:var(--gold);
    --line:rgba(11,31,58,.14); --line-strong:rgba(11,31,58,.32);
    --hero-bg:radial-gradient(1200px 700px at 70% 18%,rgba(11,31,58,.07),transparent 60%),
      linear-gradient(180deg,#FBF9F4,var(--parchment) 55%,var(--parchment-2));
    --ai-bg:radial-gradient(900px 500px at 18% 30%,rgba(176,141,62,.14),transparent 60%),
      linear-gradient(180deg,var(--parchment-2),#E6E0CF);
    --pillar-bg:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.45));
    --pillar-bg-hover:linear-gradient(180deg,#fff,rgba(255,255,255,.7));
    --pillar-feature-bg:linear-gradient(180deg,rgba(176,141,62,.12),rgba(255,255,255,.6));
    --reticle:#6b7a92; --mark-cross:#0B1F3A;
    --sev1-bg:rgba(176,141,62,.16); --sev2-bg:rgba(11,31,58,.08); --sev3-bg:rgba(11,31,58,.04);
    --ghost-hover-bg:rgba(176,141,62,.1); --menu-hover-bg:rgba(176,141,62,.14);
    --err:#9b2d22; --focus:var(--navy);
  }
  /* sections that run on the opposite background from the page */
  .approach,.creds{
    --bg:var(--parchment); --bg-deep:var(--parchment-2);
    --fg:var(--ink); --fg-strong:var(--navy); --fg-muted:#4b566b; --fg-dim:#6e6246;
    --accent:var(--gold-deep); --accent-rule:var(--gold-deep);
    --line:rgba(11,31,58,.14); --line-strong:rgba(11,31,58,.32);
  }
  :root[data-theme="light"] .approach,:root[data-theme="light"] .creds{
    --bg:var(--navy); --bg-deep:var(--navy-800);
    --fg:var(--tan-soft); --fg-strong:#fff; --fg-muted:var(--tan); --fg-dim:var(--tan-dim);
    --accent:var(--gold-bright); --accent-rule:var(--gold);
    --line:rgba(201,182,138,.18); --line-strong:rgba(201,182,138,.34);
  }
  /* the closing call to action stays navy in both modes */
  .cta{
    --fg:var(--tan-soft); --fg-strong:#fff; --fg-muted:var(--tan); --accent:var(--gold-bright); --accent-rule:var(--gold);
    --line:rgba(201,182,138,.18); --line-strong:rgba(201,182,138,.34); --ghost-hover-bg:rgba(176,141,62,.08);
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--disp); background:var(--bg); color:var(--fg);
    -webkit-font-smoothing:antialiased; line-height:1.5; overflow-x:hidden;
    transition:background-color .3s ease,color .3s ease;
  }
  a{color:inherit;text-decoration:none}
  ::selection{background:var(--gold);color:var(--navy-900)}

  /* ---- type helpers ---- */
  .eyebrow{
    font-family:var(--mono); font-size:.72rem; letter-spacing:.32em;
    text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.7em;
  }
  .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent-rule);display:inline-block}
  h1,h2,h3{font-family:var(--disp);font-weight:800;line-height:1.04;letter-spacing:-.02em;color:var(--fg-strong)}
  .lede{color:var(--fg-muted);font-size:1.12rem;line-height:1.65;font-weight:400}

  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
  section{position:relative}

  /* ---- coordinate grid texture ---- */
  .grid-bg{
    position:absolute;inset:0;pointer-events:none;
    background-image:
      linear-gradient(var(--line) 1px,transparent 1px),
      linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);
            mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);
    opacity:.5;
  }

  /* ---- nav ---- */
  header.nav{
    position:fixed;top:0;left:0;right:0;z-index:60;
    transition:background .4s ease,border-color .4s ease,padding .4s ease;
    border-bottom:1px solid transparent;padding:22px 0;
  }
  header.nav.scrolled{background:var(--bg-nav);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);padding:14px 0}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:24px}
  .nav-actions{display:flex;align-items:center;gap:22px}
  .brand{display:flex;align-items:center;gap:13px}
  .brand .mark{width:34px;height:34px;flex:0 0 auto}
  .brand .mark path{stroke:var(--mark-cross)}
  .brand .reticle-ring{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
  .brand:hover .reticle-ring{transform:rotate(90deg)}
  .brand .name{font-family:var(--disp);font-weight:800;letter-spacing:.14em;font-size:1.02rem;color:var(--fg-strong);line-height:1}
  .brand .sub{font-family:var(--mono);font-size:.56rem;letter-spacing:.42em;color:var(--accent);margin-top:3px}
  nav.links{display:flex;align-items:center;gap:34px}
  nav.links a{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--fg-muted);text-transform:uppercase;transition:color .25s;position:relative}
  nav.links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--accent-rule);transition:width .3s}
  nav.links a:hover{color:var(--fg-strong)}nav.links a:hover::after{width:100%}
  nav.links a.btn,nav.links a.btn:hover{color:var(--navy-900)}
  nav.links a.btn::after{content:none}
  .btn{
    font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
    padding:13px 22px;border:1px solid var(--gold);color:var(--navy-900);background:var(--gold);
    cursor:pointer;transition:all .25s;display:inline-flex;align-items:center;gap:.6em;font-weight:500;
  }
  .btn:hover{background:var(--gold-bright);border-color:var(--gold-bright);transform:translateY(-2px)}
  .btn.ghost{background:transparent;color:var(--fg);border-color:var(--line-strong)}
  .btn.ghost:hover{border-color:var(--accent-rule);color:var(--fg-strong);background:var(--ghost-hover-bg)}
  .menu-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px}
  .menu-toggle span{width:24px;height:2px;background:var(--fg);transition:.3s}
  .theme-toggle{width:38px;height:38px;border:1px solid var(--line-strong);background:transparent;color:var(--fg-muted);
    display:grid;place-items:center;cursor:pointer;transition:color .25s,border-color .25s,background .25s;flex:0 0 auto}
  .theme-toggle:hover{color:var(--fg-strong);border-color:var(--accent-rule);background:var(--ghost-hover-bg)}
  .theme-toggle svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .theme-toggle .moon{display:none}
  :root[data-theme="light"] .theme-toggle .sun{display:none}
  :root[data-theme="light"] .theme-toggle .moon{display:block}

  /* ---- hero ---- */
  .hero{min-height:auto;display:flex;align-items:center;background:var(--hero-bg);padding:150px 0 96px;overflow:hidden}
  .reticle{position:absolute;right:-120px;top:50%;transform:translateY(-50%);width:560px;height:560px;opacity:.5;pointer-events:none}
  .reticle g{stroke:var(--reticle)}
  .reticle .spin{transform-origin:center;animation:spin 40s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .hero-inner{position:relative;z-index:2;max-width:820px}
  .hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem);font-weight:900;margin:24px 0 20px}
  .hero h1 .accent{color:var(--accent)}
  .hero .lede{max-width:560px}
  .hero-cta{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}

  /* ---- trust strip ---- */
  .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-deep)}
  .trust .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;padding-top:22px;padding-bottom:22px}
  .trust .item{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-muted);display:flex;align-items:center;gap:.7em}
  .trust .item b{color:var(--accent);font-weight:600}
  .trust .dot{width:5px;height:5px;background:var(--accent-rule);transform:rotate(45deg);flex:0 0 auto}

  /* ---- generic section ---- */
  .sec{padding:108px 0}
  .sec-head{max-width:720px;margin-bottom:54px}
  .sec-head h2{font-size:clamp(2rem,4.2vw,3.1rem);margin:20px 0 0}
  .sec-num{font-family:var(--mono);position:absolute;top:46px;right:28px;font-size:.72rem;letter-spacing:.3em;color:var(--fg-dim)}

  /* ---- capabilities ---- */
  .pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .pillars.four{grid-template-columns:repeat(2,1fr)}
  .pillar{
    border:1px solid var(--line);background:var(--pillar-bg);
    padding:34px 30px 32px;position:relative;transition:transform .4s,border-color .4s,background .4s;overflow:hidden;
  }
  .pillar::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--line-strong);transition:background .4s}
  .pillar:hover,.pillar:focus-within{transform:translateY(-6px);border-color:var(--gold);background:var(--pillar-feature-bg)}
  .pillar:hover::before,.pillar:focus-within::before{background:var(--gold)}
  .pillar .pn{font-family:var(--mono);font-size:.72rem;letter-spacing:.28em;color:var(--accent)}
  .pillar h3{font-size:1.4rem;margin:18px 0 12px;font-weight:800}
  .pillar p{color:var(--fg-muted);font-size:.97rem;line-height:1.6}
  .pillar ul{list-style:none;margin-top:20px;display:flex;flex-direction:column;gap:11px}
  .pillar li{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;color:var(--fg);display:flex;gap:.7em;line-height:1.4}
  .pillar li::before{content:"+";color:var(--accent);font-weight:600;flex:0 0 auto}
  .pillar .tag{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-dim)}
  .pillar .badge{position:absolute;top:30px;right:28px;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;color:var(--navy-900);background:var(--gold-bright);padding:4px 9px;text-transform:uppercase;font-weight:600}

  /* ---- AI differentiator band ---- */
  .ai{background:var(--ai-bg);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
  .ai-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
  .ai h2{font-size:clamp(2rem,4vw,2.9rem);margin:20px 0 22px}
  .ai h2 .g{color:var(--accent)}
  .ai .lede{margin-bottom:30px}
  .ai-list{display:flex;flex-direction:column;gap:18px}
  .ai-item{border-left:2px solid var(--accent-rule);padding:4px 0 4px 20px}
  .ai-item .h4{font-family:var(--disp);font-size:1.05rem;font-weight:700;color:var(--fg-strong);margin-bottom:5px}
  .ai-item p{color:var(--fg-muted);font-size:.92rem;line-height:1.55}
  .ai-panel{border:1px solid var(--line-strong);background:var(--bg-raised);padding:34px;position:relative}
  .ai-panel .scanline{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--fg-dim);margin-bottom:22px;display:flex;justify-content:space-between}
  .sev{display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
  .sev-row{display:flex;align-items:center;gap:14px}
  .sev-chip{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;padding:4px 10px;font-weight:600;flex:0 0 auto;width:64px;text-align:center}
  .sev-1{background:var(--sev1-bg);color:var(--accent);border:1px solid var(--gold)}
  .sev-2{background:var(--sev2-bg);color:var(--fg);border:1px solid var(--line-strong)}
  .sev-3{background:var(--sev3-bg);color:var(--fg-dim);border:1px solid var(--line)}
  .sev-row .lbl{font-family:var(--mono);font-size:.8rem;color:var(--fg-muted)}
  .ai-panel .deadline{border-top:1px solid var(--line);padding-top:18px;font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;color:var(--fg-muted)}
  .ai-panel .deadline b{color:var(--accent);display:block;font-size:.92rem;letter-spacing:.04em;margin-top:4px}
  .ai-panel .reticle-mini{position:absolute;top:24px;right:24px;width:28px;height:28px;opacity:.6}
  .reticle-mini path{stroke:var(--mark-cross)}

  /* ---- approach (opposite background) ---- */
  .approach{background:var(--bg);color:var(--fg)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:10px;border-top:1px solid var(--line-strong)}
  .step{padding:34px 26px 30px;border-right:1px solid var(--line);position:relative;transition:background .3s}
  .step:last-child{border-right:0}
  .step:hover{background:var(--bg-deep)}
  .step .sn{font-family:var(--mono);font-size:.78rem;letter-spacing:.2em;color:var(--accent);font-weight:600}
  .step .h4{font-family:var(--disp);font-size:1.3rem;font-weight:800;color:var(--fg-strong);margin:14px 0 10px;letter-spacing:-.01em}
  .step p{color:var(--fg-muted);font-size:.92rem;line-height:1.55}
  .step::before{content:"";position:absolute;top:-1px;left:0;width:0;height:3px;background:var(--gold);transition:width .4s}
  .step:hover::before{width:100%}

  /* ---- why ---- */
  .why .grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 50px;margin-top:8px}
  .why-item{padding:26px 0;border-top:1px solid var(--line)}
  .why-item .h4{font-family:var(--disp);font-size:1.18rem;font-weight:700;color:var(--fg-strong);margin-bottom:10px;display:flex;align-items:center;gap:12px}
  .why-item .h4 .n{font-family:var(--mono);font-size:.74rem;color:var(--accent);font-weight:500}
  .why-item p{color:var(--fg-muted);font-size:.96rem;line-height:1.6}

  /* ---- credentials (opposite background) ---- */
  .creds{background:var(--bg);color:var(--fg)}
  .bodies{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
  .body-card{background:#fff;border:1px solid rgba(11,31,58,.14);height:190px;display:grid;place-items:center;padding:28px 34px;
    transition:transform .4s,border-color .4s}
  .body-card:hover{transform:translateY(-4px);border-color:rgba(11,31,58,.32)}
  .body-card img{max-height:100px;max-width:100%;width:auto;height:auto;object-fit:contain}

  /* ---- CTA (always navy) ---- */
  .cta{background:linear-gradient(120deg,var(--navy-900),var(--navy-700));border-top:1px solid var(--line);text-align:center;overflow:hidden;color:var(--fg)}
  .cta .wrap{position:relative;z-index:2}
  .cta h2{font-size:clamp(2.1rem,4.6vw,3.4rem);margin-bottom:20px}
  .cta .lede{max-width:560px;margin:0 auto 36px}
  .cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

  /* ---- footer ---- */
  footer{background:var(--bg-deep);border-top:1px solid var(--line);padding:60px 0 34px}
  .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:40px}
  .foot-brand{max-width:330px}
  .foot-brand .name{font-family:var(--disp);font-weight:800;letter-spacing:.14em;color:var(--fg-strong);font-size:1.05rem}
  .foot-brand p{color:var(--fg-dim);font-size:.88rem;margin-top:14px;line-height:1.6}
  .foot-cols{display:flex;gap:60px;flex-wrap:wrap}
  .foot-col .foot-h{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
  .foot-col a{display:block;color:var(--fg-muted);font-size:.9rem;margin-bottom:10px;transition:color .2s}
  .foot-col a:hover{color:var(--fg-strong)}
  .foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .foot-bottom p{font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--fg-dim);line-height:1.7}
  .disclaimer{max-width:640px}

  /* ---- reveal ---- */
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

  /* ---- responsive ---- */
  @media(max-width:920px){
    .pillars,.pillars.four{grid-template-columns:1fr}
    .ai-grid{grid-template-columns:1fr;gap:40px}
    .steps{grid-template-columns:repeat(2,1fr)}
    .step:nth-child(2){border-right:0}
    .step{border-bottom:1px solid var(--line)}
    .why .grid2{grid-template-columns:1fr;gap:0}
    .reticle{opacity:.25;right:-220px}
    .bodies{grid-template-columns:repeat(2,1fr)}
    .bodies{grid-template-columns:1fr}
    .body-card{height:160px}
  }
  @media(max-width:680px){
    nav.links{position:fixed;inset:0 0 0 auto;width:78%;max-width:330px;background:var(--bg-deep);
      flex-direction:column;justify-content:center;align-items:flex-start;padding:40px;gap:26px;
      transform:translateX(100%);transition:transform .4s;border-left:1px solid var(--line);z-index:55}
    nav.links.open{transform:none}
    nav.links a{font-size:1rem}
    nav.links .btn{display:none}
    .nav-actions{gap:16px}
    .theme-toggle{width:36px;height:36px;z-index:60}
    .menu-toggle{display:flex;z-index:60}
    .menu-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .menu-toggle.open span:nth-child(2){opacity:0}
    .menu-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .steps{grid-template-columns:1fr}
    .step{border-right:0;border-bottom:1px solid var(--line)}
    .sec{padding:78px 0}
    .trust .wrap{justify-content:flex-start;gap:14px}
  }
  @media(prefers-reduced-motion:reduce){
    *{animation:none!important}
    .reveal{opacity:1;transform:none;transition:none}
    .reticle .spin{animation:none}
  }

  /* active page link (multipage) */
  nav.links a.active{color:var(--fg-strong)}
  nav.links a.active::after{width:100%}

/* ---- standards chips (detail pages) ---- */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.chip{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fg);
  border:1px solid var(--line-strong);padding:9px 14px;background:var(--bg-raised)}
/* ---- capability card detail link ---- */
.pill-link{display:table;margin-top:18px;font-family:var(--mono);font-size:.74rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);border-bottom:1px solid transparent;transition:border-color .25s;padding-bottom:2px}
.pill-link:hover{border-color:var(--accent)}

/* ---- services dropdown (multipage nav) ---- */
.has-sub{position:relative;display:flex;align-items:center}
.has-sub::before{content:"";position:absolute;top:100%;left:-10px;right:-10px;height:22px}
.sub-toggle{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--fg-muted);text-transform:uppercase;
  background:none;border:0;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:.55em;transition:color .25s;position:relative}
.sub-toggle::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--accent-rule);transition:width .3s}
.has-sub:hover .sub-toggle,.has-sub.open .sub-toggle,.sub-toggle:focus-visible,
.has-sub.current .sub-toggle{color:var(--fg-strong)}
.has-sub:hover .sub-toggle::after,.has-sub.open .sub-toggle::after,
.has-sub.current .sub-toggle::after{width:100%}
.sub-toggle .caret{width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .3s;flex:0 0 auto}
.has-sub.open .caret{transform:rotate(225deg) translateY(2px)}
.sub-menu{position:absolute;top:calc(100% + 18px);left:-26px;min-width:320px;
  background:var(--bg-menu);border:1px solid var(--line-strong);padding:10px 0;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s,transform .25s,visibility .25s;z-index:70}
.has-sub:hover .sub-menu,.has-sub.open .sub-menu,.has-sub:focus-within .sub-menu{opacity:1;visibility:visible;transform:none}
nav.links .sub-menu a{display:block;padding:12px 26px;font-size:.72rem}
nav.links .sub-menu a::after{content:none}
nav.links .sub-menu a:hover,nav.links .sub-menu a.active{background:var(--menu-hover-bg);color:var(--fg-strong)}
@media(max-width:680px){
  .has-sub{flex-direction:column;align-items:flex-start;gap:16px}
  .has-sub::before{content:none}
  .sub-toggle{pointer-events:none}
  .sub-toggle .caret{display:none}
  .sub-menu{position:static;opacity:1;visibility:visible;transform:none;border:0;
    border-left:1px solid var(--line-strong);background:none;padding:0 0 0 16px;min-width:0;
    display:flex;flex-direction:column;gap:16px}
  nav.links .sub-menu a{padding:0;font-size:.9rem}
  nav.links .sub-menu a:hover,nav.links .sub-menu a.active{background:none}
}
@media(prefers-reduced-motion:reduce){
  .sub-menu{transition:none}
}


/* ---- accessibility and small fixes ---- */
.skip{position:absolute;left:-10000px;top:16px;z-index:100;background:var(--gold);color:var(--navy-900);padding:10px 14px;font-family:var(--mono);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.skip:focus{left:16px;outline:2px solid var(--focus)}
.ai-item p a,.lede a,.why-item p a,.pillar p a,.step p a,.form-row a,.contact-form ~ p a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.foot-loc{margin-top:12px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--fg-dim)}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--fg-dim);transition:color .25s}
.foot-links a:hover{color:var(--fg-strong)}
.theme-toggle:focus-visible,.menu-toggle:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media(max-width:680px){
  .hero .eyebrow{align-items:flex-start;line-height:1.7}
  .hero .eyebrow::before{margin-top:.6em}
}

/* ---- contact form ---- */
.contact-form{display:flex;flex-direction:column;gap:18px;max-width:560px}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.field label .opt{color:var(--fg-dim);letter-spacing:.1em;text-transform:none;margin-left:.6em}
.field input,.field textarea{font-family:var(--disp);font-size:1rem;color:var(--fg-strong);background:var(--bg-raised);
  border:1px solid var(--line-strong);padding:13px 14px;outline:none;border-radius:0;width:100%;
  transition:border-color .25s,background .25s}
.field input:focus,.field textarea:focus{border-color:var(--accent-rule);background:var(--bg-raised-2)}
.field textarea{resize:vertical;min-height:150px;line-height:1.55}
.trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:4px}
.form-row .btn{appearance:none;-webkit-appearance:none}
.btn[disabled]{opacity:.6;cursor:default;transform:none}
.form-status{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;color:var(--fg-muted);line-height:1.6;max-width:420px;margin:0}
.form-status.ok{color:var(--accent)}
.form-status.err{color:var(--err)}
.deadline-note{display:block;margin-top:10px;font-weight:400;color:var(--fg-muted)}

/* ---- engagement counters (About) ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:8px}
.stat{border:1px solid var(--line);background:var(--pillar-bg);padding:30px 26px 26px;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--line-strong)}
.stat .num{font-family:var(--disp);font-weight:800;font-size:clamp(2.6rem,4.5vw,3.6rem);line-height:1;color:var(--accent);letter-spacing:-.02em;display:flex;align-items:baseline;gap:.06em;font-variant-numeric:tabular-nums}
.stat .num .plus{font-size:.6em;color:var(--fg-muted)}
.stat .lbl{font-family:var(--disp);font-weight:800;font-size:1.15rem;color:var(--fg-strong);margin-top:14px;letter-spacing:-.01em}
.stat p{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-dim);margin-top:8px;line-height:1.6}
.stat.more{border-style:dashed}
.stat.more .num .plus{font-size:1em;color:var(--accent)}
.stat.more p{text-transform:none;letter-spacing:.02em;color:var(--fg-muted)}
.sr-only{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.stat-note{margin-top:22px;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--fg-dim);max-width:640px;line-height:1.6}
@media(max-width:920px){.stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.stats{grid-template-columns:1fr}}

/* ---- anchor offset below the fixed nav ---- */
section[id]{scroll-margin-top:92px}