/* Layout p18: premium proposal. Preview with ?layout=p18.
   "Nocturne": two rounded mesh-gradient shells (hero, contact) hold the story; everything
   between floats on soft layered shadows. Light Sora display type, Newsreader italics,
   Manrope text. Light theme (default): porcelain page, pastel cobalt/violet/sky mesh, white
   frosted glass, navy ink with cobalt accents. Dark theme: the original near-black navy night.
   Every colour is a --m-* token; the light set lives on the root, the dark set under
   [data-theme="dark"]. Fonts: SIL OFL, self-hosted. */
@font-face{font-family:'Sora';font-style:normal;font-weight:100 800;font-display:swap;src:url(fonts/sora-300.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-400.woff2) format('woff2')}
@font-face{font-family:'Newsreader';font-style:italic;font-weight:200 800;font-display:swap;src:url(fonts/newsreader-300-italic.woff2) format('woff2')}

/* Keyframes stay top-level: Firefox drops @keyframes nested in the layout block. */
@keyframes p18-drift{0%{transform:translate3d(-2%,-1%,0) scale(1)}50%{transform:translate3d(2%,1.5%,0) scale(1.04)}100%{transform:translate3d(-1%,2%,0) scale(1.02)}}
@keyframes p18-breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}

:root[data-layout="p18"] {
  /* ---------- Tokens: LIGHT (default) ---------- */
  --m-bg:#f3f5fb;
  --m-bg-2:#e9edf9;
  --m-surface:#ffffff;
  --m-surface-2:#f6f8fe;
  --m-text:#0b1430;
  --m-copy:#4a5673;
  --m-copy-hi:#35415e;
  --m-copy-art:#38445f;
  --m-copy-shell:#35415e;
  --m-muted:#535f7c;
  --m-steel:#52648a;
  --m-ice:#3a4bd6;
  --m-on-ice:#ffffff;
  --m-line:rgba(20,36,90,.1);
  --m-line-2:rgba(20,36,90,.16);
  --m-line-3:rgba(20,36,90,.22);
  --m-edge:linear-gradient(150deg,rgba(255,255,255,1),rgba(120,142,226,.34) 38%,rgba(20,36,90,.1) 70%,rgba(120,142,226,.36));
  --m-edge-soft:linear-gradient(160deg,rgba(255,255,255,.9),rgba(20,36,90,.09) 45%,rgba(120,142,226,.24));
  --m-shadow-sm:0 1px 2px rgba(16,28,64,.07),0 2px 6px -2px rgba(16,28,64,.08),0 0 0 1px rgba(16,28,64,.05);
  --m-shadow-md:0 0 0 1px rgba(16,28,64,.04),0 1px 1px -.5px rgba(16,28,64,.05),0 3px 3px -1.5px rgba(16,28,64,.05),0 6px 6px -3px rgba(16,28,64,.05),0 12px 12px -6px rgba(16,28,64,.05),0 24px 24px -12px rgba(16,28,64,.06);
  --m-shadow-lg:0 2.8px 2.2px rgba(16,28,64,.02),0 6.7px 5.3px rgba(16,28,64,.028),0 12.5px 10px rgba(16,28,64,.035),0 22.3px 17.9px rgba(16,28,64,.042),0 41.8px 33.4px rgba(16,28,64,.045),0 100px 80px rgba(16,28,64,.06);
  --m-mesh:
    radial-gradient(42% 58% at 14% 24%,rgba(92,124,250,.46),transparent 72%),
    radial-gradient(38% 52% at 70% 12%,rgba(139,108,246,.36),transparent 72%),
    radial-gradient(50% 62% at 92% 86%,rgba(56,182,248,.38),transparent 72%),
    radial-gradient(34% 44% at 44% 92%,rgba(99,102,241,.3),transparent 72%),
    radial-gradient(30% 34% at 86% 40%,rgba(251,182,206,.34),transparent 72%),
    radial-gradient(22% 30% at 58% 46%,rgba(255,255,255,.75),transparent 72%),
    linear-gradient(165deg,#eef1ff,#f6f7fe 60%,#eef3fe);
  --m-mesh-2:
    radial-gradient(42% 58% at 86% 22%,rgba(92,124,250,.44),transparent 72%),
    radial-gradient(38% 52% at 26% 10%,rgba(139,108,246,.34),transparent 72%),
    radial-gradient(50% 62% at 6% 80%,rgba(56,182,248,.34),transparent 72%),
    radial-gradient(36% 46% at 62% 96%,rgba(99,102,241,.28),transparent 72%),
    radial-gradient(30% 34% at 12% 34%,rgba(251,182,206,.3),transparent 72%),
    radial-gradient(22% 30% at 46% 40%,rgba(255,255,255,.7),transparent 72%),
    linear-gradient(195deg,#eef1ff,#f6f7fe 60%,#eef3fe);
  --m-scan:repeating-linear-gradient(180deg,rgba(255,255,255,.13) 0 1px,transparent 1px 30px);
  --m-shell-border:rgba(255,255,255,.9);
  --m-shell-ring:0 0 0 1px rgba(20,36,90,.06);
  --m-inset-hi:rgba(255,255,255,.95);
  --m-hero-veil:radial-gradient(70% 60% at 28% 52%,rgba(255,255,255,.5),transparent 72%),linear-gradient(180deg,transparent 62%,rgba(255,255,255,.34));
  --m-hero-glow:radial-gradient(26% 30% at 66% 34%,rgba(99,102,241,.16),transparent 70%),radial-gradient(22% 26% at 34% 78%,rgba(56,182,248,.18),transparent 70%);
  --m-contact-veil:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.4) 46%,rgba(255,255,255,.62));
  --m-contact-glow:radial-gradient(30% 36% at 50% 30%,rgba(99,102,241,.14),transparent 70%);
  --m-approach-glow:radial-gradient(40% 60% at 20% 50%,rgba(92,124,250,.13),transparent 70%),radial-gradient(40% 60% at 85% 40%,rgba(139,108,246,.11),transparent 70%);
  --m-dot:#3b5bfd;
  --m-glow:rgba(59,91,253,.45);
  --m-glow-strong:rgba(59,91,253,.55);
  --m-glow-ring:rgba(59,91,253,.14);
  --m-wm-dot:#3048e6;
  --m-spark:#3b5bfd;
  --m-hover:rgba(20,36,90,.055);
  --m-glass-nav:rgba(255,255,255,.78);
  --m-glass-nav-hover:#ffffff;
  --m-glass-chip:rgba(255,255,255,.62);
  --m-glass-btn:rgba(255,255,255,.62);
  --m-glass-btn-hover:rgba(255,255,255,.95);
  --m-glass-card:rgba(255,255,255,.66);
  --m-glass-card-hover:rgba(255,255,255,.92);
  --m-glass-bar:rgba(255,255,255,.8);
  --m-glass-panel:rgba(255,255,255,.82);
  --m-glass-visual:rgba(255,255,255,.74);
  --m-card-glass:rgba(255,255,255,.92);
  --m-menu-bg:#ffffff;
  --m-tint:rgba(241,244,255,.72);
  --m-tint-2:rgba(234,239,255,.9);
  --m-tint-page:rgba(255,255,255,.72);
  --m-underline:rgba(58,75,214,.35);
  --m-btn:#0b1430;
  --m-btn-fg:#ffffff;
  --m-btn-hover:#1d2b61;
  --m-btn-dot:#ffffff;
  --m-btn-dot-fg:#0b1430;
  --m-btn-shadow:0 18px 40px -16px rgba(20,40,140,.55);
  --m-btn-shadow-sm:0 8px 24px -8px rgba(20,40,140,.4);
  --m-portrait-ring:rgba(20,36,90,.08);
  --m-portrait-glow:rgba(59,91,253,.3);
  --m-portrait-shade:rgba(11,20,48,.14);
  --m-photo-chip:rgba(255,255,255,.74);
  --m-photo-chip-line:rgba(255,255,255,.9);
  --m-photo-chip-fg:#0b1430;
  --m-case-ai:radial-gradient(60% 70% at 100% 0%,rgba(92,124,250,.24),transparent 70%) padding-box,radial-gradient(50% 60% at 70% 100%,rgba(139,108,246,.14),transparent 70%) padding-box,radial-gradient(40% 50% at 0% 100%,rgba(56,182,248,.15),transparent 70%) padding-box,linear-gradient(#fff,#fff) padding-box;
  --m-doc-bg:#ffffff;
  --m-doc-line:rgba(20,36,90,.12);
  --m-doc-fg:#38445f;
  --m-conn:#56658f;
  --m-conn-line:rgba(58,75,214,.3);
  --m-hi-line:rgba(59,91,253,.6);
  --m-hi-bg:rgba(59,91,253,.08);
  --m-flow:#3b5bfd;
  --m-flow-a:rgba(59,91,253,.55);
  --m-flow-0:rgba(59,91,253,0);
  --m-core-bg:linear-gradient(120deg,#3355e8,#4a3fd2);
  --m-core-line:rgba(59,91,253,.45);
  --m-core-shadow:0 14px 30px -14px rgba(51,85,232,.75);
  --m-core-sub:#e6ecff;
  --m-out-bg:#ffffff;
  --m-art-inset:inset 0 1px 0 rgba(255,255,255,.85),inset 0 0 0 1px rgba(20,36,90,.07);
  --m-art-health:radial-gradient(60% 80% at 90% 0%,rgba(139,108,246,.26),transparent 70%),radial-gradient(60% 70% at 0% 100%,rgba(56,182,248,.26),transparent 70%),#eef2ff;
  --m-art-security:radial-gradient(60% 80% at 100% 0%,rgba(92,124,250,.3),transparent 70%),radial-gradient(60% 70% at 10% 100%,rgba(56,182,248,.22),transparent 70%),#eef2ff;
  --m-dot-line:rgba(58,75,214,.24);
  --m-dot-a:#3b5bfd;
  --m-dot-b:#93a7f2;
  --m-dot-hot:#1b2f8f;
  --m-net-line:rgba(58,75,214,.38);
  --m-net-node:#3a4bd6;
  --m-net-fill:#ffffff;
  --m-chat-paper:#ffffff;
  --m-chat-light:#eef2fd;
  --m-chat-line:rgba(20,36,90,.11);
  --m-field:#ffffff;
  --m-field-line:rgba(20,36,90,.17);
  --m-field-focus:rgba(58,75,214,.6);
  --m-chat-muted:#56627f;
  --m-error:#b42318;
  --m-scroll:rgba(58,75,214,.35);
  --display:'Sora','Manrope',system-ui,sans-serif;
  --shell:min(1340px,calc(100% - 48px));
  --cw:min(1180px,calc(100% - 136px));

  color-scheme:light;
  --paper:var(--m-bg);--ink:var(--m-text);--muted:var(--m-copy);--line:var(--m-line);--forest:var(--m-text);
  --light:var(--m-surface-2);--surface:var(--m-surface);--accent:var(--m-ice);--contact-surface:transparent;
  --serif:'Newsreader','Instrument Serif',Georgia,serif;--sans:'Manrope','DM Sans',system-ui,sans-serif;

  &[data-theme="light"]{
    color-scheme:light;
    --paper:var(--m-bg);--ink:var(--m-text);--muted:var(--m-copy);--line:var(--m-line);--forest:var(--m-text);
    --light:var(--m-surface-2);--surface:var(--m-surface);--accent:var(--m-ice);--contact-surface:transparent;
  }

  /* ---------- Tokens: DARK (the original Nocturne night) ---------- */
  &[data-theme="dark"]{
    --m-bg:#050914;
    --m-bg-2:#070d1c;
    --m-surface:#0a1224;
    --m-surface-2:#0e182f;
    --m-text:#f4f6fb;
    --m-copy:#a9b6cc;
    --m-copy-hi:#b9c5da;
    --m-copy-art:#c3cde0;
    --m-copy-shell:#a9b6cc;
    --m-muted:#8392ad;
    --m-steel:#97a9c7;
    --m-ice:#cdd9fb;
    --m-on-ice:#050914;
    --m-line:rgba(191,219,254,.11);
    --m-line-2:rgba(214,226,250,.2);
    --m-line-3:rgba(214,226,250,.3);
    --m-edge:linear-gradient(150deg,rgba(255,255,255,.34),rgba(147,197,253,.12) 38%,rgba(255,255,255,.03) 70%,rgba(147,197,253,.14));
    --m-edge-soft:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04) 45%,rgba(147,197,253,.08));
    --m-shadow-sm:0 2px 3px -1px rgba(0,0,0,.35),0 1px 0 0 rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.25);
    --m-shadow-md:0 0 0 1px rgba(0,0,0,.2),0 1px 1px -.5px rgba(0,0,0,.18),0 3px 3px -1.5px rgba(0,0,0,.18),0 6px 6px -3px rgba(0,0,0,.18),0 12px 12px -6px rgba(0,0,0,.18),0 24px 24px -12px rgba(0,0,0,.2);
    --m-shadow-lg:0 2.8px 2.2px rgba(0,0,0,.07),0 6.7px 5.3px rgba(0,0,0,.1),0 12.5px 10px rgba(0,0,0,.13),0 22.3px 17.9px rgba(0,0,0,.16),0 41.8px 33.4px rgba(0,0,0,.2),0 100px 80px rgba(0,0,0,.3);
    --m-mesh:
      radial-gradient(42% 58% at 14% 24%,rgba(37,84,226,.62),transparent 72%),
      radial-gradient(38% 52% at 70% 12%,rgba(67,56,202,.46),transparent 72%),
      radial-gradient(50% 62% at 92% 86%,rgba(56,98,140,.6),transparent 72%),
      radial-gradient(34% 44% at 44% 92%,rgba(30,64,175,.42),transparent 72%),
      radial-gradient(22% 30% at 58% 46%,rgba(219,234,254,.1),transparent 72%),
      linear-gradient(165deg,#081230,#050b1c 60%,#060d22);
    --m-mesh-2:
      radial-gradient(42% 58% at 86% 22%,rgba(37,84,226,.6),transparent 72%),
      radial-gradient(38% 52% at 26% 10%,rgba(67,56,202,.44),transparent 72%),
      radial-gradient(50% 62% at 6% 80%,rgba(56,98,140,.55),transparent 72%),
      radial-gradient(36% 46% at 62% 96%,rgba(30,64,175,.4),transparent 72%),
      radial-gradient(22% 30% at 46% 40%,rgba(219,234,254,.09),transparent 72%),
      linear-gradient(195deg,#081230,#050b1c 60%,#060d22);
    --m-scan:repeating-linear-gradient(180deg,rgba(255,255,255,.015) 0 1px,transparent 1px 30px);
    --m-shell-border:rgba(214,226,250,.15);
    --m-shell-ring:0 0 0 0 transparent;
    --m-inset-hi:rgba(255,255,255,.12);
    --m-hero-veil:radial-gradient(70% 60% at 28% 52%,rgba(4,9,22,.5),transparent 72%),linear-gradient(180deg,transparent 62%,rgba(4,8,20,.5));
    --m-hero-glow:radial-gradient(26% 30% at 66% 34%,rgba(96,140,255,.2),transparent 70%),radial-gradient(22% 26% at 34% 78%,rgba(88,76,220,.16),transparent 70%);
    --m-contact-veil:linear-gradient(180deg,rgba(4,8,20,.05),rgba(4,8,20,.5) 50%,rgba(4,8,20,.72));
    --m-contact-glow:radial-gradient(30% 36% at 50% 30%,rgba(96,140,255,.16),transparent 70%);
    --m-approach-glow:radial-gradient(40% 60% at 20% 50%,rgba(37,84,226,.16),transparent 70%),radial-gradient(40% 60% at 85% 40%,rgba(67,56,202,.13),transparent 70%);
    --m-dot:#bfdbfe;
    --m-glow:rgba(147,197,253,.8);
    --m-glow-strong:rgba(147,197,253,.9);
    --m-glow-ring:rgba(147,197,253,.16);
    --m-wm-dot:#7aa2ff;
    --m-spark:#9ec0ff;
    --m-hover:rgba(255,255,255,.07);
    --m-glass-nav:rgba(10,18,36,.82);
    --m-glass-nav-hover:#111c36;
    --m-glass-chip:rgba(5,12,26,.55);
    --m-glass-btn:rgba(6,13,28,.6);
    --m-glass-btn-hover:rgba(20,32,62,.8);
    --m-glass-card:rgba(6,13,28,.62);
    --m-glass-card-hover:rgba(16,27,54,.8);
    --m-glass-bar:rgba(10,18,37,.86);
    --m-glass-panel:rgba(7,13,30,.8);
    --m-glass-visual:rgba(7,13,30,.74);
    --m-card-glass:rgba(11,19,38,.9);
    --m-menu-bg:#0a1226;
    --m-tint:rgba(255,255,255,.025);
    --m-tint-2:rgba(255,255,255,.045);
    --m-tint-page:rgba(255,255,255,.018);
    --m-underline:rgba(205,217,251,.4);
    --m-btn:#f4f6fb;
    --m-btn-fg:#050914;
    --m-btn-hover:#e3ebff;
    --m-btn-dot:#050914;
    --m-btn-dot-fg:#f4f6fb;
    --m-btn-shadow:0 18px 40px -16px rgba(191,219,254,.45);
    --m-btn-shadow-sm:0 8px 24px -8px rgba(191,219,254,.35);
    --m-portrait-ring:rgba(255,255,255,.12);
    --m-portrait-glow:rgba(37,84,226,.5);
    --m-portrait-shade:rgba(5,9,20,.35);
    --m-photo-chip:rgba(6,12,26,.55);
    --m-photo-chip-line:rgba(255,255,255,.18);
    --m-photo-chip-fg:#f4f6fb;
    --m-case-ai:radial-gradient(60% 70% at 100% 0%,rgba(37,84,226,.38),transparent 70%) padding-box,radial-gradient(50% 60% at 70% 100%,rgba(67,56,202,.22),transparent 70%) padding-box,radial-gradient(40% 50% at 0% 100%,rgba(56,98,140,.25),transparent 70%) padding-box,linear-gradient(#0a1226,#0a1226) padding-box;
    --m-doc-bg:rgba(255,255,255,.03);
    --m-doc-line:rgba(191,219,254,.16);
    --m-doc-fg:#c3cde0;
    --m-conn:#7d8fb3;
    --m-conn-line:rgba(191,219,254,.22);
    --m-hi-line:rgba(158,192,255,.7);
    --m-hi-bg:rgba(37,84,226,.22);
    --m-flow:#cfe0ff;
    --m-flow-a:rgba(158,192,255,.6);
    --m-flow-0:rgba(158,192,255,0);
    --m-core-bg:linear-gradient(120deg,rgba(37,84,226,.55),rgba(67,56,202,.45));
    --m-core-line:rgba(191,219,254,.3);
    --m-core-shadow:0 14px 34px -14px rgba(37,84,226,.8);
    --m-core-sub:#c9d4ec;
    --m-out-bg:#f1f4fb;
    --m-art-inset:inset 0 1px 0 rgba(255,255,255,.07),inset 0 0 0 1px rgba(255,255,255,.05);
    --m-art-health:radial-gradient(60% 80% at 90% 0%,rgba(67,56,202,.5),transparent 70%),radial-gradient(60% 70% at 0% 100%,rgba(56,98,140,.5),transparent 70%),#0b1530;
    --m-art-security:radial-gradient(60% 80% at 100% 0%,rgba(37,84,226,.5),transparent 70%),radial-gradient(60% 70% at 10% 100%,rgba(56,98,140,.45),transparent 70%),#0b1530;
    --m-dot-line:rgba(191,219,254,.22);
    --m-dot-a:#9ec0ff;
    --m-dot-b:#5b7fe8;
    --m-dot-hot:#ffffff;
    --m-net-line:rgba(191,219,254,.45);
    --m-net-node:#cfe0ff;
    --m-net-fill:#0c1734;
    --m-chat-paper:#081025;
    --m-chat-light:#121d38;
    --m-chat-line:rgba(191,219,254,.13);
    --m-field:rgba(3,7,18,.7);
    --m-field-line:rgba(191,219,254,.2);
    --m-field-focus:rgba(205,217,251,.55);
    --m-chat-muted:#a3b0c8;
    --m-error:#f4b49a;
    --m-scroll:rgba(191,219,254,.3);

    color-scheme:dark;
    --paper:var(--m-bg);--ink:var(--m-text);--muted:var(--m-copy);--line:var(--m-line);--forest:var(--m-text);
    --light:var(--m-surface-2);--surface:var(--m-surface);--accent:var(--m-ice);--contact-surface:transparent;
  }

  /* ---------- Base ---------- */
  & body{background:linear-gradient(180deg,var(--m-bg-2) 0,var(--m-bg) 1200px);background-color:var(--m-bg);color:var(--m-text);font-family:var(--sans);font-size:16px;letter-spacing:-.003em}
  & ::selection{background:var(--m-ice);color:var(--m-on-ice)}
  & :is(a,button,summary,textarea,input):focus-visible{outline:2px solid var(--m-ice);outline-offset:4px;border-radius:12px}
  & .container{width:var(--cw)}
  & .skip-link{background:var(--m-text);color:var(--m-bg);border-radius:999px}
  & em{font-family:var(--serif);font-style:italic;font-weight:300;letter-spacing:-.015em;color:var(--m-ice)}
  & :is(h1,h2,h3){text-wrap:balance}

  /* Micro-labels: quiet uppercase with a single lit node. */
  & .eyebrow{font:600 11px/1.6 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--m-steel);gap:12px}
  & :is(.section-heading>.eyebrow,.approach .eyebrow,.about-heading .eyebrow,.contact-top .eyebrow,.toolbox .eyebrow)::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--m-dot);box-shadow:0 0 14px var(--m-glow);flex-shrink:0}

  /* ---------- Header: floating glass navigation ---------- */
  & .header{border:0;position:relative;z-index:6}
  & .nav-row{height:104px;width:var(--shell);gap:20px}
  & .wordmark{font:600 25px/1 var(--display);letter-spacing:-.05em;color:var(--m-text);padding-left:12px}
  & .wordmark-dot{color:var(--m-wm-dot)}
  & .wordmark-domain{color:var(--m-copy);font-weight:300}
  & .nav-row>nav{margin-inline:auto}
  & nav{gap:2px;padding:6px;font-size:13.5px;font-weight:500;border:1px solid transparent;border-radius:999px;
    background:linear-gradient(var(--m-glass-nav),var(--m-glass-nav)) padding-box,var(--m-edge) border-box;box-shadow:var(--m-shadow-md);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
  & nav>a{white-space:nowrap}
  & nav>a:not(.nav-contact){padding:10px 16px;border-radius:999px;color:var(--m-copy);transition:background .2s,color .2s}
  & nav>a:not(.nav-contact):after{display:none}
  & nav>a:not(.nav-contact):hover{background:var(--m-hover);color:var(--m-text)}
  & nav>a.nav-agent{color:var(--m-text);gap:8px}
  & .agent-spark{color:var(--m-spark)}
  & .nav-contact{border:0;border-radius:999px;padding:10px 12px 10px 18px;gap:14px;margin-left:6px;background:var(--m-btn);color:var(--m-btn-fg);font-weight:600;box-shadow:var(--m-btn-shadow-sm)}
  & .nav-contact:hover{background:var(--m-btn-hover)}
  & .nav-contact span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--m-btn-dot);color:var(--m-btn-dot-fg);font-size:13px}
  & .nav-actions{padding-right:6px}
  & .theme-toggle{min-height:44px;padding:8px 16px;border:1px solid transparent;border-radius:999px;color:var(--m-copy);font:500 12px var(--sans);
    background:linear-gradient(var(--m-glass-nav),var(--m-glass-nav)) padding-box,var(--m-edge-soft) border-box}
  & .theme-toggle:hover{color:var(--m-text);background:linear-gradient(var(--m-glass-nav-hover),var(--m-glass-nav-hover)) padding-box,var(--m-edge) border-box}
  & .menu-toggle{color:var(--m-text);font:600 12px var(--sans);letter-spacing:.04em}

  /* ---------- Hero: the mesh shell ---------- */
  & .hero{width:var(--shell);position:relative;isolation:isolate;overflow:hidden;border-radius:36px;border:1px solid var(--m-shell-border);
    grid-template-columns:minmax(0,1fr) 380px;gap:72px;padding:88px 80px 150px;align-items:center;
    background:var(--m-scan),var(--m-hero-veil),var(--m-mesh);
    background-clip:padding-box;
    box-shadow:var(--m-shadow-lg),var(--m-shell-ring),inset 0 1px 0 var(--m-inset-hi),inset 1px 0 0 rgba(255,255,255,.04)}
  /* A slow-moving light inside the shell (static under reduced motion). */
  & .hero::before{content:'';position:absolute;inset:-20%;z-index:-1;pointer-events:none;background:var(--m-hero-glow)}
  & .hero .eyebrow{display:inline-flex;margin-bottom:36px;padding:9px 16px 9px 12px;border-radius:999px;border:1px solid var(--m-line-2);background:var(--m-glass-chip);color:var(--m-ice);letter-spacing:.14em;font-size:11.5px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  & .small-line{width:7px;height:7px;border-radius:50%;background:var(--m-dot);box-shadow:0 0 0 3px var(--m-glow-ring),0 0 16px var(--m-glow-strong)}
  & h1{font-family:var(--display);font-weight:300;font-size:clamp(54px,5.6vw,82px);line-height:1.04;letter-spacing:-.05em;color:var(--m-text);margin-bottom:32px}
  & h1 em{font-size:1.12em;line-height:1;letter-spacing:-.025em;font-weight:300;color:var(--m-ice)}
  & .hero-intro{color:var(--m-copy-hi);font-size:17px;line-height:1.75;max-width:520px;margin-bottom:36px}
  & .hero-actions{gap:12px}
  & .button{border-radius:999px;min-height:52px;padding:8px 8px 8px 24px;font-size:14px;font-weight:600;gap:20px}
  & .button span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;font-size:16px}
  & .button-dark{background:var(--m-btn);color:var(--m-btn-fg);box-shadow:var(--m-btn-shadow),inset 0 -1px 0 rgba(0,0,0,.08)}
  & .button-dark span{background:var(--m-btn-dot);color:var(--m-btn-dot-fg)}
  & .button-dark:hover{background:var(--m-btn-hover)}
  & .hero-actions .text-link{min-height:52px;padding:8px 22px;border:1px solid transparent;border-radius:999px;color:var(--m-text);font-size:14px;font-weight:500;gap:14px;
    background:linear-gradient(var(--m-glass-btn),var(--m-glass-btn)) padding-box,var(--m-edge) border-box;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  & .hero-actions .text-link:hover{background:linear-gradient(var(--m-glass-btn-hover),var(--m-glass-btn-hover)) padding-box,var(--m-edge) border-box;color:var(--m-text)}
  & .text-link{color:var(--m-text);border-bottom-color:var(--m-underline)}
  & .text-link:hover{color:var(--m-ice);border-color:var(--m-ice)}
  & .agent-callout{margin-top:40px;padding:14px 22px 14px 14px;gap:16px;border:1px solid transparent;border-radius:22px;max-width:520px;
    background:linear-gradient(var(--m-glass-card),var(--m-glass-card)) padding-box,var(--m-edge) border-box;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:var(--m-shadow-md)}
  & .agent-callout:hover{background:linear-gradient(var(--m-glass-card-hover),var(--m-glass-card-hover)) padding-box,var(--m-edge) border-box}
  & .agent-callout-icon{width:44px;height:44px;border-radius:50%;color:#fff;font-size:19px;
    background:radial-gradient(circle at 32% 28%,#e0eaff 0,#7ea4ff 22%,#2e58e6 55%,#1b2f8f 100%);box-shadow:0 0 0 4px var(--m-glow-ring),0 8px 20px -6px rgba(46,88,230,.8)}
  & .agent-callout strong{font:500 16px/1.4 var(--display);letter-spacing:-.02em;color:var(--m-text)}
  & .agent-callout strong+span{font-size:13px;color:var(--m-copy)}
  & .agent-callout-arrow{color:var(--m-ice);font-size:18px}
  & .hero-note{font-size:12.5px;color:var(--m-copy-shell);margin-top:24px;gap:10px}
  & .location-dot{width:6px;height:6px;border:0;background:var(--m-dot);box-shadow:0 0 12px var(--m-glow)}

  & .hero-portrait{max-width:none;align-self:center}
  & .portrait-frame{aspect-ratio:.82;border-radius:26px;background:#d9b996;
    box-shadow:var(--m-shadow-lg),0 0 0 1px var(--m-portrait-ring),0 40px 120px -30px var(--m-portrait-glow)}
  & .portrait-frame img{object-position:50% 38%}
  & .portrait-frame::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 0 0 1px rgba(255,255,255,.08);background:linear-gradient(180deg,transparent 70%,var(--m-portrait-shade))}
  & .portrait-index{z-index:1;top:auto;bottom:16px;right:auto;left:16px;display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;font:600 10px/1 var(--sans);letter-spacing:.14em;color:var(--m-photo-chip-fg);opacity:1;
    background:var(--m-photo-chip);border:1px solid var(--m-photo-chip-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  & .portrait-index::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--m-dot);box-shadow:0 0 10px var(--m-glow-strong)}
  & .portrait-caption{padding:22px 4px 0;font-size:13px;line-height:1.6;color:var(--m-copy-shell);gap:16px}
  & .portrait-caption strong{color:var(--m-text);font-weight:500}
  & .ask-agent-portrait{width:48px;height:48px;border-radius:50%;flex-shrink:0;color:var(--m-text);border:1px solid transparent;
    background:linear-gradient(var(--m-glass-btn),var(--m-glass-btn)) padding-box,var(--m-edge) border-box;transition:background .2s}
  & .ask-agent-portrait:hover{background:linear-gradient(var(--m-btn),var(--m-btn)) padding-box,var(--m-edge) border-box;color:var(--m-btn-fg)}
  & .portrait-caption svg{width:18px;height:18px;margin:0;color:currentColor}

  /* ---------- Numbers: a glass bar resting on the shell's edge ---------- */
  & .proof{position:relative;z-index:3;width:min(1120px,calc(100% - 128px));margin-top:-76px;padding:30px 8px;border:1px solid transparent;border-radius:24px;
    background:linear-gradient(var(--m-glass-bar),var(--m-glass-bar)) padding-box,var(--m-edge) border-box;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
    box-shadow:var(--m-shadow-lg),inset 0 1px 0 rgba(255,255,255,.06)}
  & .proof>div{border-right:1px solid var(--m-line);padding-left:32px;gap:16px}
  & .proof>div:first-child{padding-left:32px}
  & .proof>div:last-child{border-right:0}
  /* Content-sized columns so the longest label (4000+ providers) keeps to two lines. */
  @media (min-width:901px){ & .proof{grid-template-columns:repeat(4,auto);padding-right:28px} }
  & .proof strong{font-family:var(--display);font-size:44px;font-weight:300;letter-spacing:-.055em;line-height:1;color:var(--m-text)}
  & .proof strong>span{font-size:24px;font-weight:300;color:var(--m-ice);margin-left:2px;vertical-align:top}
  & .proof p{font-size:12.5px;line-height:1.6;color:var(--m-copy)}

  /* ---------- Section headings ---------- */
  & .section{padding-block:136px}
  & .section-heading{margin-bottom:56px}
  & .section-heading>.eyebrow{margin-bottom:24px}
  & .section-heading-row{gap:56px}
  & .section-heading-row h2{font-family:var(--display);font-size:54px;font-weight:300;line-height:1.08;letter-spacing:-.048em;color:var(--m-text)}
  & .section-heading-row h2 em{font-size:1.12em;letter-spacing:-.02em}
  & .section-heading-row>p{font-size:15px;line-height:1.75;color:var(--m-copy);max-width:420px}
  & .section-heading-row>p br{display:inline}

  /* ---------- Verve ---------- */
  & .case{border-radius:28px;border:1px solid transparent;background:linear-gradient(var(--m-surface),var(--m-surface)) padding-box,var(--m-edge-soft) border-box;box-shadow:var(--m-shadow-lg)}
  & .case-ai{position:relative;isolation:isolate;padding:64px 64px 0;column-gap:64px;grid-template-columns:1fr 1fr;color:var(--m-text);
    background:var(--m-case-ai),var(--m-edge) border-box;
    box-shadow:var(--m-shadow-lg),inset 0 1px 0 rgba(255,255,255,.06)}
  & .case-kicker{font:600 11.5px/1.6 var(--sans);letter-spacing:.14em;color:var(--m-steel);gap:12px;margin-bottom:26px}
  & .case-number{font:600 11.5px/1 var(--sans);letter-spacing:.04em;padding:6px 9px;border:1px solid var(--m-line-2);border-radius:999px;color:var(--m-text)}
  & .case-ai .case-kicker{color:var(--m-steel)}
  & .case-ai .case-number{border-color:var(--m-line-2)}
  & .case h3{font-family:var(--display);font-weight:300;font-size:32px;line-height:1.15;letter-spacing:-.04em;color:var(--m-text);margin-bottom:20px}
  & .case-ai h3{font-size:42px;line-height:1.1}
  & .case-copy>p:not(.case-kicker){font-size:15px;line-height:1.75;color:var(--m-copy)}
  & .case-ai .case-copy>p:not(.case-kicker){color:var(--m-copy);max-width:450px}
  & .delivery-note{border-top:1px solid var(--m-line);padding-top:20px;color:var(--m-copy)}
  & .delivery-note>strong{font:600 11.5px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--m-ice);margin-bottom:8px}
  & .delivery-note>p{font-size:14px;line-height:1.75}
  & .case-ai .delivery-note{border-color:var(--m-line);color:var(--m-copy)}
  & .case-facts{gap:12px;margin-bottom:28px}
  & .case-facts>div{flex:1;padding:18px 20px;border-radius:18px;border:1px solid var(--m-line);background:var(--m-tint)}
  & .case-facts strong{font-family:var(--display);font-size:30px;font-weight:300;letter-spacing:-.05em;line-height:1.1;margin-bottom:6px;color:var(--m-text)}
  & .case-facts span{font-size:12px;color:var(--m-copy)}
  & .technology-list{gap:8px;font:500 12px/1 var(--sans);color:var(--m-copy)}
  & .technology-list span{padding:8px 13px;border-radius:999px;border:1px solid var(--m-line);background:var(--m-tint)}
  & .technology-list span+span:before{content:none}
  & .case-ai .technology-list{color:var(--m-copy)}

  & .ai-visual{
    --c-566e53:var(--m-doc-line);--c-b4cb84:var(--m-hi-line);--c-33523c:var(--m-hi-bg);--c-2b4734:var(--m-doc-bg);--c-849777:var(--m-conn);--c-536d4e:var(--m-conn-line);
    --c-d5e2b7:var(--m-flow);--c-b4cb8499:var(--m-flow-a);--c-b4cb8400:var(--m-flow-0);
    border:1px solid transparent;border-radius:24px;padding:26px 26px 22px;
    background:linear-gradient(var(--m-glass-visual),var(--m-glass-visual)) padding-box,var(--m-edge) border-box;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    box-shadow:var(--m-shadow-lg),inset 0 1px 0 rgba(255,255,255,.06)}
  & .art-label{font:500 11px/1.5 var(--sans);letter-spacing:.02em;color:var(--m-copy)}
  & .art-label>span:first-child{font:500 15px/1.3 var(--display);letter-spacing:-.03em;color:var(--m-text)}
  & .art-label>span:last-child{color:var(--m-copy)}
  & .document{background:var(--m-doc-bg);border:1px solid var(--m-doc-line);border-radius:14px;color:var(--m-doc-fg);font-size:11px}
  & .document-symbol,.document svg{color:var(--m-spark)}
  & .diagram-connector{color:var(--m-conn)}
  & .ai-core{border:1px solid var(--m-core-line);border-radius:16px;background:var(--m-core-bg);box-shadow:var(--m-core-shadow),inset 0 1px 0 rgba(255,255,255,.15)}
  & .ai-core-icon{color:#e3ecff}
  & .ai-core strong{color:#f4f6fb;font-size:13px;font-weight:600}
  & .ai-core>div>span{color:var(--m-core-sub);font-size:11px;letter-spacing:.04em}
  & .core-light{background:#cfe0ff}
  & .output-document{background:var(--m-out-bg);color:#0b1430;border-radius:16px;box-shadow:var(--m-shadow-md)}
  & .report-icon .ask-agent-arrow{color:#2e58e6}
  & .output-heading strong{font-size:12px;color:#0b1430}
  & .output-heading div>span{color:#4c5874;font-size:11px}
  & .report-lines i{background:#d3dbee;border-radius:3px}
  & .report-bottom{border-top-color:#d9e0ef;color:#4c5874;font-size:11px;letter-spacing:.02em}
  & .diagram-caption{font:600 11.5px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--m-muted)}
  & .case-detail{border-top:1px solid var(--m-line)}
  & .case-ai>.case-detail{border-color:var(--m-line);margin-top:48px}
  & .case-detail summary{font:500 13.5px/1.4 var(--sans);padding:22px 32px;color:var(--m-text)}
  & .case-ai>.case-detail summary{color:var(--m-text);padding-inline:0}
  & .detail-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--m-line-2);font:300 18px/1 var(--sans);color:var(--m-ice);transition:transform .25s,background .2s}
  & :is(.case-detail,.more-work)[open]>summary .detail-icon{background:var(--m-btn);color:var(--m-btn-fg);border-color:var(--m-btn)}
  & .case-detail .detail-body{font-size:15px;line-height:1.8;color:var(--m-copy)}
  & .case-ai .detail-body{color:var(--m-copy);max-width:820px}

  /* ---------- Qualo + Recoveri ---------- */
  & .case-pair{gap:28px;margin-top:28px;align-items:stretch}
  & .case-pair .case{display:flex;flex-direction:column;overflow:hidden}
  & .case-pair .case-copy{flex:1;padding:36px}
  & .case-art{height:270px;padding:30px 36px;margin:8px 8px 0;border-radius:22px;isolation:isolate}
  & .health-art{--dot-line:var(--m-dot-line);--dot-a:var(--m-dot-a);--dot-b:var(--m-dot-b);--dot-hot:var(--m-dot-hot);color:var(--m-text);
    background:var(--m-art-health);box-shadow:var(--m-art-inset)}
  & .health-metric strong{font-family:var(--display);font-size:72px;font-weight:200;letter-spacing:-.06em;color:var(--m-text)}
  & .health-metric strong>span{color:var(--m-ice);font-weight:300}
  & .health-metric p{font-size:14px;color:var(--m-copy-art)}
  & .security-art{--c-999d8e:var(--m-net-line);--c-53634e:var(--m-net-node);--c-f0f0e7:var(--m-net-fill);--c-c9d6b0:#7ea4ff;--c-364a3a:#2e58e6;--c-f1f4df:#ffffff;color:var(--m-text);
    background:var(--m-art-security);box-shadow:var(--m-art-inset)}
  & .asset-network{opacity:.85}
  & .security-metric strong{font-family:var(--display);font-size:66px;font-weight:200;letter-spacing:-.06em;color:var(--m-text)}
  & .security-metric strong>span{color:var(--m-ice);font-weight:300}
  & .security-metric p{font-size:13px;color:var(--m-copy-art)}
  & .case-pair h3{font-size:29px}
  & .case-pair .case-kicker{font-size:11.5px}
  & .case-pair .case-detail summary{padding-inline:36px}
  & .case-pair .case-detail .detail-body{padding-inline:36px;padding-bottom:28px}

  /* ---------- More experience ---------- */
  & .more-work{margin-top:28px;border:0}
  & .more-work summary{font:500 15px/1.4 var(--sans);color:var(--m-text);padding:14px 14px 14px 30px;border-radius:999px;border:1px solid transparent;
    background:linear-gradient(var(--m-surface),var(--m-surface)) padding-box,var(--m-edge-soft) border-box;box-shadow:var(--m-shadow-md);transition:background .2s}
  & .more-work summary:hover{background:linear-gradient(var(--m-surface-2),var(--m-surface-2)) padding-box,var(--m-edge) border-box}
  & .career-block{padding:44px 30px 32px;border-bottom:1px solid var(--m-line);margin-bottom:8px}
  & .career-block h3{font-family:var(--display);font-size:28px;font-weight:300;letter-spacing:-.04em;color:var(--m-text)}
  & .career-intro{font-size:15px;color:var(--m-copy)}
  & .career-timeline{gap:0}
  & .career-timeline>li{padding:22px 0;border-top:1px solid var(--m-line)}
  & .career-period{font:600 11px/1.8 var(--sans);letter-spacing:.06em;color:var(--m-ice)}
  & .career-timeline h4{font-size:16px;font-weight:600;color:var(--m-text)}
  & .career-timeline p{font-size:14.5px;color:var(--m-copy)}
  & .more-work-list{gap:16px;padding:24px 0 8px}
  & .more-work-list>div{padding:26px 28px;border-radius:22px;border:1px solid var(--m-line);background:var(--m-tint-page)}
  & .more-work-list>div>span{font:600 11.5px/1.6 var(--sans);letter-spacing:.14em;color:var(--m-steel)}
  & .more-work-list strong{font:400 19px/1.3 var(--display);letter-spacing:-.035em;color:var(--m-text)}
  & .more-work-list p{font-size:14.5px;color:var(--m-copy)}

  /* ---------- Services: one calm surface ---------- */
  & .expertise{padding-top:24px}
  & .service-list{border-radius:30px;border:1px solid transparent;padding:8px 48px;
    background:linear-gradient(var(--m-surface),var(--m-surface)) padding-box,var(--m-edge-soft) border-box;box-shadow:var(--m-shadow-lg),inset 0 1px 0 rgba(255,255,255,.05)}
  & .service{grid-template-columns:64px minmax(0,1fr) 230px;gap:32px;padding:40px 0;border-top:1px solid var(--m-line)}
  & .service:first-child{border-top:0}
  & .service:last-child{border-bottom:0}
  & .service-index{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--m-line-2);font:400 12px/1 var(--display);color:var(--m-ice);font-size:0}
  & .service-index::before{content:counter(p18-service,decimal-leading-zero);font-size:12px;line-height:1;letter-spacing:-.02em}
  & .service-list{counter-reset:p18-service}
  & .service{counter-increment:p18-service}
  & .service h3{font-family:var(--display);font-size:26px;font-weight:300;letter-spacing:-.04em;line-height:1.2;color:var(--m-text);margin-bottom:14px}
  & .service p{font-size:15px;line-height:1.75;color:var(--m-copy);max-width:640px}
  & .service-aside{align-self:center;position:relative;padding-right:68px;margin-left:0;font-size:13px;line-height:1.6;color:var(--m-copy)}
  & .service-aside .ask-agent{position:absolute;right:0;top:50%;margin-top:-24px;width:48px;height:48px;border-radius:50%;border:1px solid transparent;
    background:linear-gradient(var(--m-surface-2),var(--m-surface-2)) padding-box,var(--m-edge) border-box;box-shadow:var(--m-shadow-sm);transition:background .2s}
  & .ask-agent-arrow{color:var(--m-ice);font-size:18px}
  & .service-aside .ask-agent:hover{background:linear-gradient(var(--m-btn),var(--m-btn)) padding-box,var(--m-edge) border-box}
  & .service-aside .ask-agent:hover .ask-agent-arrow{color:var(--m-btn-fg)}
  & .ask-agent-label{background:var(--m-btn);color:var(--m-btn-fg);border-radius:999px;padding:7px 11px;font:600 11.5px/1 var(--sans)}
  & .ask-agent:hover .ask-agent-arrow,& .ask-agent:focus-visible .ask-agent-arrow{color:var(--m-ice)}
  & .service-aside .ask-agent:is(:hover,:focus-visible) .ask-agent-arrow{color:var(--m-btn-fg)}
  & .report-icon:is(:hover,:focus-visible) .ask-agent-arrow{color:#0b1430}

  /* ---------- Approach ---------- */
  & .approach{position:relative;isolation:isolate;padding-block:120px 136px;background:transparent}
  & .approach::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--m-approach-glow)}
  & .approach .eyebrow{color:var(--m-steel);margin-bottom:24px}
  & .approach-top{gap:96px}
  & .approach h2{font-family:var(--display);font-size:52px;font-weight:300;line-height:1.08;letter-spacing:-.048em;color:var(--m-text)}
  & .approach h2 em{font-size:1.12em;color:var(--m-ice)}
  & .approach-top>p{font-size:15px;line-height:1.75;color:var(--m-copy)}
  & .approach-steps{gap:24px;border:0;margin-top:64px;padding-top:0}
  & .approach-steps>div{padding:34px 32px 36px;border-radius:26px;border:1px solid transparent;
    background:linear-gradient(var(--m-card-glass),var(--m-card-glass)) padding-box,var(--m-edge-soft) border-box;box-shadow:var(--m-shadow-lg),inset 0 1px 0 rgba(255,255,255,.05)}
  & .approach-steps>div>span{display:inline-block;font:600 11.5px/1 var(--sans);letter-spacing:.14em;color:var(--m-ice);padding:8px 12px;border-radius:999px;border:1px solid var(--m-line-2);margin-bottom:28px}
  & .approach h3{font-family:var(--display);font-size:22px;font-weight:300;letter-spacing:-.04em;line-height:1.25;color:var(--m-text);margin-bottom:12px}
  & .approach-steps p{font-size:15px;line-height:1.75;color:var(--m-copy);max-width:none}

  /* ---------- About ---------- */
  & .about{grid-template-columns:1.1fr 1fr;column-gap:96px;padding-top:40px}
  & .about-heading{align-self:start}
  & .about .eyebrow{margin-bottom:24px}
  & .about h2{font-family:var(--display);font-size:48px;font-weight:300;line-height:1.1;letter-spacing:-.048em;color:var(--m-text);margin-bottom:34px}
  & .about h2 em{font-size:1.12em}
  & .cv-link{font-size:14px;font-weight:500}
  & .about-copy p{font-size:15.5px;line-height:1.8;color:var(--m-copy)}
  & .about-copy .about-lead{font:300 27px/1.4 var(--display);letter-spacing:-.035em;color:var(--m-text);margin-bottom:28px}
  & .ai-note{border:1px solid transparent;border-radius:22px;padding:22px 24px;margin-top:34px;gap:16px;align-items:flex-start;
    background:linear-gradient(var(--m-surface),var(--m-surface)) padding-box,var(--m-edge-soft) border-box;box-shadow:var(--m-shadow-md)}
  & .ai-note>span{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;color:#fff;font-size:16px;line-height:1;
    background:radial-gradient(circle at 32% 28%,#e0eaff 0,#7ea4ff 22%,#2e58e6 55%,#1b2f8f 100%)}
  & .ai-note p{font-size:14px;line-height:1.75;color:var(--m-copy)}
  & .toolbox{grid-template-columns:1.1fr 1fr;gap:96px;margin-top:80px;padding-top:40px;border-top:1px solid var(--m-line)}
  & .toolbox .eyebrow{font-size:11px}
  & .toolbox>.toolbox-list{display:grid;gap:20px}
  & .toolbox p{font-size:14.5px;line-height:1.7;color:var(--m-copy);margin:0}
  & .toolbox p strong{font:600 11.5px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--m-ice);margin-bottom:6px}

  /* ---------- Contact: the closing mesh shell ---------- */
  & .contact{width:var(--shell);margin:0 auto 24px;position:relative;isolation:isolate;overflow:hidden;border-radius:36px;border:1px solid var(--m-shell-border);color:var(--m-text);padding-block:96px 72px;
    background:var(--m-scan),var(--m-contact-veil),var(--m-mesh-2);background-clip:padding-box;
    box-shadow:var(--m-shadow-lg),var(--m-shell-ring),inset 0 1px 0 var(--m-inset-hi)}
  & .contact::before{content:'';position:absolute;inset:-20% -20% auto;height:900px;z-index:-1;pointer-events:none;background:var(--m-contact-glow)}
  & .contact>.container{width:auto;padding-inline:80px}
  & .contact-top{justify-content:center;flex-direction:column;gap:14px;border:0;padding:0;margin-bottom:36px}
  & .contact-top .eyebrow{color:var(--m-ice);font-size:11px}
  & .contact-top>span{font-size:12.5px;color:var(--m-copy-shell)}
  & .contact-main{display:flex;flex-direction:column;align-items:center;text-align:center;gap:36px}
  & .contact h2{font-family:var(--display);font-size:92px;font-weight:200;line-height:1.02;letter-spacing:-.06em;color:var(--m-text)}
  & .contact h2 em{font-size:1.1em;font-weight:300;letter-spacing:-.03em;color:var(--m-ice)}
  & .contact-main>div{display:flex;flex-direction:column;align-items:center}
  & .contact-main>div>p{font-size:16px;line-height:1.75;color:var(--m-copy-art);max-width:460px;margin-bottom:28px}
  & .button-light{background:var(--m-btn);color:var(--m-btn-fg);min-width:0;box-shadow:var(--m-btn-shadow)}
  & .button-light span{background:var(--m-btn-dot);color:var(--m-btn-dot-fg)}
  & .button-light:hover{background:var(--m-btn-hover)}
  & .contact-email{color:var(--m-copy-shell);font-size:13px;margin-top:20px;justify-content:center}
  & .contact-email>a{text-decoration-color:var(--m-underline)}
  & .copy-email{border-radius:50%;width:32px;height:32px}
  & .copy-email:hover{background:var(--m-hover)}
  & .copy-status{color:var(--m-ice);left:50%;transform:translateX(-50%);white-space:nowrap}

  & .agent-section{margin-top:88px;padding-top:64px;border-top:1px solid var(--m-line);gap:64px;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr)}
  & .agent-section-head .eyebrow{color:var(--m-ice);font-size:11px}
  & .agent-section-head .agent-spark{color:var(--m-spark)}
  & .agent-section h2{font-family:var(--display);font-size:44px;font-weight:300;line-height:1.1;letter-spacing:-.048em;color:var(--m-text)}
  & .agent-section h2 em{color:var(--m-ice);font-size:1.1em}
  & .agent-section-head>p{font-size:15px;line-height:1.75;color:var(--m-copy)}

  /* Chat: a glass panel inside the shell. */
  & .contact .portfolio-chat{color:var(--m-text);--ink:var(--m-text);--muted:var(--m-copy);--paper:var(--m-chat-paper);--light:var(--m-chat-light);--forest:var(--m-text);--line:var(--m-chat-line);--chat-field:var(--m-field);--chat-muted:var(--m-chat-muted)}
  & .contact .agent-section .portfolio-chat-panel{border:1px solid transparent;border-radius:28px;padding:32px 34px;
    background:linear-gradient(var(--m-glass-panel),var(--m-glass-panel)) padding-box,var(--m-edge) border-box;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    box-shadow:var(--m-shadow-lg),inset 0 1px 0 rgba(255,255,255,.06)}
  & .portfolio-chat-intro{font-size:15px;line-height:1.7}
  & .portfolio-chat-intro-email{color:var(--m-ice)}
  & .portfolio-chat-privacy{font-size:12.5px}
  & .portfolio-chat-starter{border:1px solid var(--m-line);border-radius:16px;background:var(--m-tint);font-size:13px;padding:10px 16px;transition:background .2s,border-color .2s}
  & .portfolio-chat-starter:not(:disabled):hover{background:var(--m-hover);border-color:var(--m-line-2)}
  & .portfolio-chat-more{color:var(--m-ice);font-size:12px}
  & .portfolio-chat-transcript{scrollbar-color:var(--m-scroll) transparent}
  & .portfolio-chat-entry{border-top-color:var(--m-line);padding:14px 16px}
  & .portfolio-chat-entry-user{background:var(--m-tint-2);border-radius:16px}
  & .portfolio-chat-speaker{font:600 11.5px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--m-ice)}
  & .portfolio-chat-label{font:600 11.5px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--m-steel);margin-bottom:10px}
  & .contact .portfolio-chat-input,& .portfolio-chat-input{background:var(--m-field);border:1px solid var(--m-field-line);border-radius:16px;padding:14px 16px;color:var(--m-text)}
  & .portfolio-chat-input:focus{border-color:var(--m-field-focus)}
  & .portfolio-chat-keyboard-hint,& .portfolio-chat-limit{font-size:11.5px;color:var(--m-chat-muted)}
  & .portfolio-chat-send{border-radius:999px;border-color:var(--m-btn);background:var(--m-btn);color:var(--m-btn-fg);font-weight:600;padding-inline:24px}
  & .portfolio-chat-send:not(:disabled):hover{background:var(--m-btn-hover)}
  & .portfolio-chat-share{border-radius:999px;border:1px solid var(--m-line-3);color:var(--m-text);padding-inline:20px}
  & .portfolio-chat-share:not(:disabled):hover{background:var(--m-hover)}
  & .portfolio-chat-intake-primary{border-radius:999px;border-color:var(--m-btn);background:var(--m-btn);color:var(--m-btn-fg)}
  & .portfolio-chat-intake-secondary{border-radius:999px}
  & .portfolio-chat-intake-form{border-radius:20px;background:var(--m-tint-2);border-color:var(--m-line)}
  & .contact .portfolio-chat-intake-input{background:var(--m-field);border-color:var(--m-field-line);border-radius:12px;color:var(--m-text)}
  & .contact .portfolio-chat-intake-error{color:var(--m-error)}
  & .portfolio-chat-status{color:var(--m-ice)}
  & .portfolio-chat-sources a{color:var(--m-ice)}

  /* ---------- Footer ---------- */
  & .footer{padding-block:28px 44px}
  & .footer .wordmark{font-size:21px;padding-left:0}
  & .footer>p{font-size:12px;color:var(--m-muted)}
  & .footer-links{gap:8px;font-size:13px}
  & .footer-links a{padding:9px 14px;border-radius:999px;border:1px solid var(--m-line);color:var(--m-copy);transition:background .2s,color .2s}
  & .footer-links a:hover{background:var(--m-hover);color:var(--m-text)}
  & .footer-links span{font-size:13px;color:var(--m-ice)}

  /* ---------- Motion: slow, atmospheric, and only when welcome ---------- */
  @media (prefers-reduced-motion:no-preference){
    & .hero::before{animation:p18-drift 26s ease-in-out infinite alternate}
    & .contact::before{animation:p18-drift 30s ease-in-out infinite alternate-reverse}
    & .small-line,& .portrait-index::before{animation:p18-breathe 4s ease-in-out infinite}
    & .case-pair .case,& .approach-steps>div{transition:transform .35s cubic-bezier(.2,.7,.25,1),opacity .65s ease}
    & .case-pair .case:hover,& .approach-steps>div:hover{transform:translateY(-4px)}
    & .case:hover{box-shadow:var(--m-shadow-lg)}
  }

  /* ---------- Responsive ---------- */
  @media (min-width:1500px){
    & h1{font-size:86px}
  }
  @media (max-width:1100px){
    --cw:calc(100% - 112px);
    & .hero{grid-template-columns:minmax(0,1fr) 320px;gap:48px;padding:72px 56px 136px}
    & h1{font-size:clamp(50px,6vw,66px)}
    & .hero .eyebrow{font-size:11px;letter-spacing:.1em}
    & nav{font-size:12.5px}
    & nav>a:not(.nav-contact){padding:9px 11px}
    & .proof{width:calc(100% - 96px)}
    & .proof>div,& .proof>div:first-child{padding-left:22px;gap:12px}
    & .proof strong{font-size:36px}
    & .proof strong>span{font-size:20px}
    & .section-heading-row h2{font-size:46px}
    & .case-ai{padding:48px 44px 0;column-gap:44px}
    & .case-ai h3{font-size:36px}
    & .service-list{padding-inline:36px}
    & .service{grid-template-columns:52px minmax(0,1fr) 200px;gap:24px}
    & .approach h2{font-size:44px}
    & .about,& .toolbox{column-gap:56px}
    & .about h2{font-size:40px}
    & .contact h2{font-size:76px}
    & .contact>.container{padding-inline:56px}
  }
  @media (max-width:1100px){
    & .health-metric strong{font-size:58px}
    & .health-metric p{font-size:13px}
    & .security-metric strong{font-size:54px}
  }
  @media (max-width:1000px){
    & .nav-row>nav{margin-inline:auto 0}
    & .wordmark{padding-left:4px}
  }
  @media (max-width:1000px) and (min-width:601px){
    & nav{padding:4px;font-size:12.5px}
    & nav>a:not(.nav-contact){padding:9px 10px}
    & .nav-contact{padding:8px 8px 8px 14px;gap:10px}
    & .theme-toggle-label{display:none}
    & .theme-toggle{padding:8px 12px}
  }
  @media (max-width:900px){
    & .hero{grid-template-columns:1fr;gap:56px}
    & .hero-portrait{max-width:400px;justify-self:start}
    & .proof{grid-template-columns:1fr 1fr;padding:6px 24px;width:calc(100% - 72px)}
    & .proof>div,& .proof>div:first-child{padding:24px 0 24px 22px}
    & .proof>div:nth-child(odd){padding-left:0}
    & .proof>div:nth-child(2){border-right:0}
    & .proof>div:nth-child(-n+2){border-bottom:1px solid var(--m-line)}
    & .section-heading-row{display:block}
    & .section-heading-row>p{margin-top:22px}
    & .case-pair{grid-template-columns:1fr}
    & .case-pair .case-copy,& .case-pair .case-copy>p:not(.case-kicker){min-height:0}
    & .approach-top{display:block}
    & .approach-top>p{margin-top:24px;max-width:560px}
    & .approach-steps{grid-template-columns:1fr;gap:16px}
    & .about{display:block}
    & .about-copy{margin-top:40px}
    & .toolbox{display:block}
    & .toolbox .eyebrow{margin-bottom:22px}
    & .case-ai{grid-template-columns:1fr;row-gap:44px}
    & .ai-visual{max-width:540px;width:100%}
    & .case-ai>.case-detail{margin-top:0}
  }
  @media (max-width:800px){
    --cw:calc(100% - 80px);--shell:calc(100% - 32px);
    & .nav-row{height:84px}
    & nav{gap:0;font-size:12px}
    & nav>a:not(.nav-contact){padding:8px 9px}
    & .nav-contact{padding:8px 8px 8px 12px;gap:8px}
    & .theme-toggle-label{display:none}
    & .theme-toggle{padding:8px 12px}
    & .hero{padding:56px 40px 128px}
    & h1{font-size:54px}
    & .proof{grid-template-columns:1fr 1fr;padding:6px 24px;width:calc(100% - 72px)}
    & .proof>div,& .proof>div:first-child{padding:24px 0 24px 22px}
    & .proof>div:nth-child(odd){padding-left:0}
    & .proof>div:nth-child(2){border-right:0}
    & .proof>div:nth-child(-n+2){border-bottom:1px solid var(--m-line)}
    & .section{padding-block:100px}
    & .section-heading-row h2{font-size:40px}
    & .case-pair{grid-template-columns:1fr}
    & .case-pair .case-copy,& .case-pair .case-copy>p:not(.case-kicker){min-height:0}
    & .service-list{padding-inline:28px}
    & .service{grid-template-columns:44px minmax(0,1fr);gap:20px}
    & .service-aside{display:block;grid-column:2;margin:2px 0 0;padding:0;font-size:13px;line-height:1.6}
    & .service-aside>br{display:inline}
    & .service-aside .ask-agent{position:static;display:flex;width:max-content;height:auto;min-height:44px;margin:16px 0 0;padding:0 8px 0 18px;gap:12px;border-radius:999px}
    & .service-aside .ask-agent-label{position:static;opacity:1;transform:none;background:none;color:var(--m-text);padding:0;font:600 13px/1 var(--sans)}
    & .service-aside .ask-agent-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--m-btn);color:var(--m-btn-fg);font-size:14px}
    & .service-aside .ask-agent:hover .ask-agent-label{color:var(--m-btn-fg)}
    & .approach-top{gap:40px}
    & .approach-steps{grid-template-columns:1fr;gap:16px}
    & .about{column-gap:40px}
    & .contact h2{font-size:60px}
    & .contact>.container{padding-inline:36px}
    & .agent-section{grid-template-columns:1fr;gap:32px}
  }
  @media (max-width:600px){
    --cw:calc(100% - 40px);--shell:calc(100% - 20px);
    & .nav-row{height:76px}
    & .wordmark{font-size:23px}
    & nav{top:76px;left:10px;right:10px;padding:10px;border-radius:24px;font-size:16px;background:linear-gradient(var(--m-menu-bg),var(--m-menu-bg)) padding-box,var(--m-edge) border-box;box-shadow:var(--m-shadow-lg)}
    & nav>a:not(.nav-contact){padding:14px 16px}
    & .nav-contact{margin:8px 0 0;width:auto;justify-content:space-between;padding:10px 10px 10px 18px;font-size:15px}
    & .nav-actions{padding-right:0}
    & .theme-toggle{min-height:44px;width:44px;padding:0;justify-content:center}
    & .menu-toggle{padding:10px 4px 10px 10px}
    & .hero{padding:34px 18px 112px;border-radius:28px;gap:40px}
    & .hero .eyebrow{font-size:11px;letter-spacing:.08em;padding:8px 12px 8px 10px;margin-bottom:28px;gap:8px;max-width:100%}
    & h1{font-size:clamp(36px,11.2vw,54px);letter-spacing:-.05em;line-height:1.08}
    & .hero-intro{font-size:15.5px;line-height:1.72}
    & .hero-actions{gap:12px}
    & .button{padding-left:20px}
    & .agent-callout{margin-top:28px;border-radius:20px}
    & .hero-portrait{display:block;max-width:none}
    & .portrait-frame{aspect-ratio:.95}
    & .portrait-caption{display:flex;align-items:center;justify-content:space-between;font-size:13px}
    & .portrait-caption svg{display:block;margin:0}
    & .proof{width:calc(100% - 44px);margin-top:-72px;padding:4px 18px;border-radius:20px}
    & .proof>div,& .proof>div:first-child{display:block;padding:20px 0 20px 16px}
    & .proof>div:nth-child(odd){padding-left:0;padding-right:10px}
    & .proof strong{display:block;font-size:34px;margin-bottom:8px;min-width:0}
    & .proof strong>span{font-size:19px}
    & .proof p{font-size:11.5px}
    & .section{padding-block:80px}
    & .section-heading-row h2{font-size:36px}
    & .section-heading-row>p{font-size:14.5px}
    & .case{border-radius:24px}
    & .case-ai{padding:32px 22px 0}
    & .case-ai h3{font-size:32px}
    & .case h3,& .case-pair h3{font-size:26px}
    & .case-facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    & .case-facts>div{padding:14px 13px}
    & .case-facts strong{font-size:21px}
    & .case-facts span{font-size:11px}
    & .ai-visual{padding:18px 16px;border-radius:20px}
    & .case-art{height:240px;padding:24px 22px;margin:6px 6px 0;border-radius:18px}
    /* Stack the Qualo figure like Recoveri's so its caption is not squeezed into a sliver. */
    & .health-metric{flex-direction:column;align-items:flex-start;gap:8px;margin-top:20px}
    & .health-metric strong{font-size:56px}
    & .health-metric p{font-size:13px}
    & .security-metric strong{font-size:52px}
    & .asset-network{width:62%;right:-16px;top:78px}
    & .case-pair .case-copy{padding:28px 22px}
    & .case-detail summary,& .case-pair .case-detail summary{padding-inline:22px}
    & .case-detail .detail-body,& .case-pair .case-detail .detail-body{padding-inline:22px}
    & .case-ai>.case-detail summary,& .case-ai .detail-body{padding-inline:0}
    & .more-work summary{padding:12px 12px 12px 22px;border-radius:24px;font-size:14px}
    & .career-block{padding:32px 6px 24px}
    & .more-work-list{grid-template-columns:1fr;gap:12px}
    & .more-work-list>div{padding:22px 20px}
    & .expertise{padding-top:8px}
    & .service-list{padding:4px 20px;border-radius:24px}
    & .service{grid-template-columns:1fr;gap:16px;padding:30px 0}
    & .service-aside{grid-column:1}
    & .service h3{font-size:23px}
    & .approach{padding-block:72px 88px}
    & .approach h2{font-size:36px}
    & .approach-steps>div{padding:28px 22px}
    & .about{padding-top:16px}
    & .about h2{font-size:36px}
    & .about-copy .about-lead{font-size:22px}
    & .toolbox{display:block;margin-top:56px}
    & .toolbox .eyebrow{margin-bottom:22px}
    & .contact{border-radius:28px;padding-block:64px 32px;margin-bottom:10px}
    & .contact>.container{padding-inline:18px}
    & .contact h2{font-size:clamp(40px,11vw,52px)}
    & .contact-main{gap:28px}
    & .contact-top{align-items:center;text-align:center}
    & .contact-top .eyebrow{max-width:none}
    & .contact-top>span{max-width:none;text-align:center;font-size:12px}
    & .portfolio-chat-buttons{flex-direction:column}
    & .portfolio-chat-buttons>*{width:100%;min-height:48px}
    & .agent-section{margin-top:64px;padding-top:44px}
    & .agent-section h2{font-size:34px}
    & .contact .agent-section .portfolio-chat-panel{padding:20px 18px;border-radius:22px}
    & .footer{padding-block:24px 36px}
    & .footer-links{border-top-color:var(--m-line);justify-content:flex-start;flex-wrap:wrap}
  }
}

/* ---------- Refinements after owner review (2026-11-06) ---------- */
:root[data-layout="p18"] {
  --m-scan: none;                                   /* no scanlines over hero/contact shells */
  --m-bubble: rgba(214, 225, 255, .72);
  --m-bubble-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
  --m-bubble-drop: drop-shadow(0 8px 14px rgba(30, 50, 140, .16));
  --m-bubble-agent: rgba(255, 255, 255, .86);
  --m-bubble-agent-shadow: inset 0 1px 0 #fff;
  --m-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 8px 20px -10px rgba(30, 50, 140, .4);
  &[data-theme="dark"] {
    --m-scan: none;
    --m-bubble: rgba(122, 150, 255, .17);
    --m-bubble-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    --m-bubble-drop: drop-shadow(0 8px 14px rgba(0, 0, 0, .45));
    --m-bubble-agent: rgba(255, 255, 255, .06);
    --m-bubble-agent-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    --m-chip-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 20px -10px rgba(0, 0, 0, .6);
  }

  /* Glass icon chips (Talk to my Agent callout, "I also use AI" note). */
  & :is(.agent-callout-icon, .ai-note > span) {
    color: var(--m-ice);
    border: 1px solid transparent;
    background: linear-gradient(var(--m-glass-chip), var(--m-glass-chip)) padding-box, var(--m-edge) border-box;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow: var(--m-chip-shadow);
  }

  /* Chat: quieter surroundings, more readable conversation. */
  & .portfolio-chat-intro { font-size: 13.5px; line-height: 1.65; color: var(--m-copy); }
  & .portfolio-chat-privacy { font-size: 11.5px; color: var(--m-chat-muted); }
  & .portfolio-chat-starter { font-size: 12.5px; color: var(--m-copy); }
  & .portfolio-chat-entry { border-top: 0; padding: 10px 6px; }
  & .portfolio-chat-entry + .portfolio-chat-entry { margin-top: 6px; }
  & .portfolio-chat-speaker { font-size: 11px; margin-bottom: 6px; }
  & :is(.portfolio-chat-message, .portfolio-chat-rich) { font-size: 16px; line-height: 1.72; color: var(--m-text); }

  /* Chat as speech bubbles: visitor on the right (tinted), My Agent on the left (neutral glass).
     Body and tail share one flat colour (no backdrop blur), so the tail matches exactly. */
  & :is(.portfolio-chat-entry-user, .portfolio-chat-entry-answer) {
    position: relative;
    width: fit-content;
    padding: 11px 16px 12px;
    filter: var(--m-bubble-drop);
    background: var(--m-bubble);
    box-shadow: var(--m-bubble-shadow);
  }
  & :is(.portfolio-chat-entry-user, .portfolio-chat-entry-answer)::after {
    content: '';
    position: absolute;
    bottom: 0;
    width: 26px;
    height: 26px;
    background: inherit;
  }
  & .portfolio-chat-entry-user {
    max-width: min(80%, 560px);
    margin: 12px 22px 14px auto;
    border-radius: 20px 20px 0 20px;
  }
  & .portfolio-chat-entry-user::after { right: -16px; clip-path: path('M10 0 Q11 19 26 26 L10 26 Z'); }
  & .portfolio-chat-entry-answer {
    max-width: min(88%, 680px);
    margin: 12px auto 14px 22px;
    padding: 12px 18px 14px;
    border-radius: 20px 20px 20px 0;
    background: var(--m-bubble-agent);
    box-shadow: var(--m-bubble-agent-shadow);
  }
  & .portfolio-chat-entry-answer::after { left: -16px; clip-path: path('M16 0 Q15 19 0 26 L16 26 Z'); }
  & .portfolio-chat-entry-user .portfolio-chat-speaker { text-align: right; }

  /* Toolbox: numbered subsection 04 with its own heading. */
  & .toolbox-title { font-family: var(--display); font-size: 40px; font-weight: 300; line-height: 1.1; letter-spacing: -.045em; color: var(--m-text); }
  & .toolbox-title em { font-size: 1.12em; letter-spacing: -.02em; color: var(--m-ice); }
  & .toolbox-head { gap: 18px; }
  @media (max-width: 800px) { & .toolbox-title { font-size: 32px; } & .portfolio-chat-entry-user { max-width: 88%; } & .portfolio-chat-entry-answer { max-width: calc(100% - 30px); } }
  /* Menu highlights share the height of the always-lit "Let's talk" pill. */
  @media (min-width:601px){
    & nav{align-items:stretch}
    & nav>a:not(.nav-contact){display:inline-flex;align-items:center;padding-block:0}
  }
  /* Room inside the scrolling transcript so the last bubble's drop shadow is not clipped. */
  & .portfolio-chat-transcript{padding-bottom:16px}
}

/* Chat bubbles pop in from their tail corner (keyframes stay top-level for Firefox).
   The visitor's message and the "thinking" bubble pop; the answer that replaces the
   thinking bubble settles in gently, so the swap does not flicker. */
@keyframes p18-bubble-pop {
  from { opacity: 0; transform: translateY(10px) scale(.86); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes p18-bubble-settle {
  from { opacity: .35; transform: translateY(4px) scale(.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  :root[data-layout="p18"] {
    & .portfolio-chat-entry-user { transform-origin: 100% 100%; animation: p18-bubble-pop .42s cubic-bezier(.34, 1.4, .64, 1) both; }
    & .portfolio-chat-entry-answer { transform-origin: 0 100%; animation: p18-bubble-settle .45s cubic-bezier(.2, .7, .25, 1) both; }
    & .portfolio-chat-pending { animation: p18-bubble-pop .42s cubic-bezier(.34, 1.4, .64, 1) .12s both; }
  }
}

/* Accessibility: comfortable tap target for the wordmark link (looks the same). */
:root[data-layout="p18"] {
  & .wordmark { display: inline-flex; align-items: center; min-height: 44px; }
}