:root{
  --bg:#F5F5F3; --bg-2:#FBFBFA; --bg-3:#ECECE9;
  --ink:#0A0A0A; --ink-soft:#46463F; --ink-faint:#8A8A84;
  --line:#E4E4DF; --line-strong:#D2D2CB;
  --wine:#0A0A0A; --wine-deep:#000000; --wine-tint:#ECECE9;
  --serif:"Newsreader",Georgia,serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
  --container:1380px;
  --pad:clamp(24px,5.5vw,80px);
  --ease:cubic-bezier(.22,.61,.36,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px;}
h1,h2,h3{margin:0;font-weight:400;}
p{margin:0;}
::selection{background:var(--wine);color:#fff;}
.container{width:100%;max-width:var(--container);margin:0 auto;padding-inline:var(--pad);}

/* ---------------- HEADER ---------------- */
.nav{position:sticky;top:0;z-index:60;background:transparent;color:var(--ink);border-radius:0 0 clamp(24px,3.5vw,44px) clamp(24px,3.5vw,44px);transition:background .3s var(--ease),box-shadow .3s var(--ease),border-radius .3s var(--ease);touch-action:manipulation;}
/* iOS: prevent double-tap-to-zoom on the header and its controls (pinch-zoom still works) */
.nav *{touch-action:manipulation;}
.nav__in{height:72px;display:flex;align-items:center;}
.brand{display:inline-flex;align-items:center;}
.brand--logo{padding:0;}
.brand--logo img{height:30px;width:auto;display:block;filter:none;transition:filter .3s var(--ease);}

/* nav group (left-aligned, next to logo) */
.menus{margin-left:clamp(20px,3vw,52px);flex:1;display:flex;align-items:center;gap:clamp(13px,1.6vw,24px);}
.navitem{position:relative;}
.navitem::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:16px;}
.navlink{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--ink-soft);letter-spacing:-.005em;white-space:nowrap;background:none;border:0;padding:5px 0;cursor:pointer;text-decoration:none;transition:color .18s var(--ease);}
.navlink:hover,.navitem.open>.navlink{color:var(--ink);}
.navitem.open>.navlink{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1.5px;text-decoration-color:var(--wine);}
/* Desktop: hovering a header item underlines it, in the colour of the current header mode */
@media (min-width:861px){
  .navlink:hover,.navitem:hover>.navlink{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1.5px;text-decoration-color:var(--wine);}
  .nav.scrolled .navlink:hover,.nav.scrolled .navitem:hover>.navlink{text-decoration-color:#fff;}
}
.chev{width:11px;height:11px;flex:none;opacity:.7;transition:transform .25s var(--ease);}
.chev path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.navitem:hover .chev,.navitem.open .chev,.navitem:focus-within .chev{transform:rotate(180deg);}

/* dropdown panel — white, with a pixel-art edge dissolving off the left side
   (light so it stays readable over the noir vision band) */
.menu{position:absolute;top:calc(100% + 12px);left:-20px;min-width:264px;background:var(--bg);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 50px -24px rgba(10,10,10,.24),0 8px 20px -12px rgba(10,10,10,.12);padding:22px 26px 24px 42px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:90;}
/* the strip stays clear of the rounded corners */
.menu::before{content:"";position:absolute;left:-9px;top:14px;bottom:14px;width:20px;background:url(assets/pixel-edge.svg) repeat-y left top;pointer-events:none;}
.menu--right{left:auto;right:0;}
.navitem:hover .menu,.navitem.open .menu,.navitem:focus-within .menu{opacity:1;visibility:visible;transform:none;}
.menu__label{font-size:10.5px;color:var(--ink-faint);margin:0 0 10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;}
.menu__group{display:flex;flex-direction:column;}
.menu__link{display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:var(--serif);font-size:16px;line-height:1.3;color:var(--ink-soft);padding:8px 0;transition:color .16s var(--ease),transform .18s var(--ease);}
.menu__link:hover,.menu__link:focus-visible{color:var(--ink);transform:translateX(3px);}
.menu__sep{height:1px;background:var(--line);margin:16px 0;}
.ext{width:14px;height:14px;flex:none;color:var(--ink-faint);transition:color .16s var(--ease);}
.menu__link:hover .ext{color:var(--ink);}
.ext path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

/* split Try button — dark pill, matching the language pill */
.try{position:relative;margin-left:auto;}
.try__btn{display:flex;align-items:stretch;background:var(--ink);border:1px solid var(--ink);border-radius:100px;overflow:hidden;transition:border-color .2s var(--ease),background .2s var(--ease);}
.try__btn:hover{border-color:#E6E6E6;}
.try__main{padding:9px 16px 9px 18px;color:#fff;font-size:14px;font-weight:500;letter-spacing:-.005em;background:none;border:0;cursor:pointer;white-space:nowrap;transition:background .2s var(--ease),color .25s var(--ease);}
.try__main:hover{background:rgba(0,0,0,.06);}
.try__chev{display:flex;align-items:center;justify-content:center;width:34px;color:#fff;background:none;border:0;border-left:1px solid rgba(255,255,255,.2);cursor:pointer;transition:background .2s var(--ease),color .25s var(--ease),border-color .25s var(--ease);}
.try__chev .chev{opacity:.9;}
.try__chev:hover{background:rgba(0,0,0,.06);}
.try.open .try__chev .chev{transform:rotate(180deg);}
.try.open .menu{opacity:1;visibility:visible;transform:none;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:15px;font-weight:500;letter-spacing:-.005em;padding:11px 22px;border-radius:100px;border:1px solid transparent;transition:transform .18s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease),color .2s var(--ease);white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--wine);color:#fff;box-shadow:0 8px 20px -12px rgba(0,0,0,.5);}
.btn--primary:hover{background:var(--wine-deep);box-shadow:0 12px 28px -12px rgba(0,0,0,.6);}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn--ghost:hover{border-color:var(--ink);background:rgba(0,0,0,.04);}
.btn--lg{padding:15px 30px;font-size:16.5px;}
.arrow{transition:transform .2s var(--ease);}
.btn:hover .arrow{transform:translateX(3px);}

/* ---------------- VISION (full-bleed noir band, dissolving into pixels) ---------------- */
.vision{position:relative;background:#000;color:#fff;display:flex;align-items:center;min-height:clamp(440px,42vw,580px);margin:0 0 clamp(44px,5vw,72px);}
.vision__in{position:relative;z-index:2;width:100%;padding-block:clamp(48px,6vw,84px);}
.vision__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4.6vw,4rem);line-height:1.08;letter-spacing:-.02em;max-width:16ch;text-wrap:balance;}
.vision__title em{font-style:italic;}
/* the CTA and the lede share one row — action first, reason beside it */
.vision__row{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);margin-top:clamp(28px,3.6vw,48px);flex-wrap:wrap;}
.vision .btn{background:var(--bg);color:#000;}
.vision .btn:hover{background:#fff;}
.vision__lede{font-family:var(--serif);font-size:clamp(1rem,1.2vw,1.12rem);line-height:1.5;color:#CFCDC6;text-wrap:pretty;}
.vision__media{position:absolute;top:0;right:0;bottom:0;width:min(62%,880px);z-index:1;pointer-events:none;}
.vision__media img{width:100%;height:100%;object-fit:contain;object-position:right center;image-rendering:pixelated;}
/* fade the artwork into the band on its left edge */
.vision__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.5) 14%,rgba(0,0,0,0) 44%);}
/* the band's bottom edge crumbles into fine pixels on the ivory page */
.vision::after{content:"";position:absolute;top:100%;left:0;right:0;height:28px;background:url(assets/pixel-dissolve.svg) repeat-x left top;pointer-events:none;}

/* ---------------- DIVISIONS (Commerce / Technologie — light cards, art bleeding off) ---------------- */
.divisions{padding:clamp(10px,1.6vw,22px) 0 clamp(28px,3.4vw,44px);}
.divisions__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px);}
.division{position:relative;overflow:hidden;background:var(--bg-3);border:1px solid var(--line);border-radius:20px;padding:clamp(26px,2.6vw,40px);min-height:clamp(300px,24vw,345px);}
.division__body{position:relative;z-index:2;max-width:26ch;}
.division__title{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,2.6vw,2.6rem);line-height:1.05;letter-spacing:-.015em;}
.division__byline{font-family:var(--serif);font-style:italic;font-size:1.1rem;line-height:1.3;color:var(--ink-soft);margin-top:6px;}
.division__desc{font-family:var(--serif);font-size:1.06rem;line-height:1.45;color:var(--ink-soft);margin-top:16px;max-width:26ch;text-wrap:pretty;}
.division__cta{margin-top:24px;}
/* the artwork owns the card's right side and bleeds past its edges */
.division__media{position:absolute;z-index:1;right:-7%;bottom:-14%;width:min(62%,540px);pointer-events:none;}
.division__media img{width:100%;height:auto;display:block;image-rendering:pixelated;}
@media (max-width:900px){
  .divisions__grid{grid-template-columns:1fr;}
  .division{min-height:clamp(300px,78vw,400px);}
  .division__media{right:-9%;bottom:-12%;width:min(72%,400px);}
}

/* entrance (CSS only — always ends visible) */
@media (prefers-reduced-motion:no-preference){
  .up{opacity:0;transform:translateY(20px);animation:up .8s var(--ease) forwards;animation-delay:calc(var(--up-step,.08s)*var(--d,0));}
  @keyframes up{to{opacity:1;transform:none;}}
  /* scroll reveal (only when JS present, so content never gets stuck hidden) */
  .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:calc(var(--reveal-step,.09s)*var(--d,0));}
  .js .reveal.in{opacity:1;transform:none;}
}

/* ---------------- LATEST / RELEASES ---------------- */
.releases{padding:clamp(40px,6vw,80px) 0 clamp(48px,6vw,72px);}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,3.5vw,42px);padding-top:clamp(32px,4vw,52px);border-top:1px solid var(--line-strong);flex-wrap:wrap;}
.sec-head__lead{display:flex;flex-direction:column;gap:12px;}
.sec-eyebrow{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);}
.sec-head h2{font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.015em;flex:0 0 auto;}
.sec-head a{font-size:14.5px;font-weight:500;color:var(--wine);white-space:nowrap;display:inline-flex;align-items:center;gap:7px;transition:color .18s var(--ease);}
.sec-head a:hover{color:var(--wine-deep);}
.sec-head .arrow{transition:transform .2s var(--ease);}
.sec-head a:hover .arrow{transform:translateX(3px);}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);}
.card{position:relative;display:flex;flex-direction:column;background:var(--bg-3);border:1px solid var(--line);border-radius:20px;padding:clamp(26px,2.6vw,36px);min-height:320px;}
/* pixel strip riding the card's top edge (dense on the edge, dissolving upward) */
.card::before{content:"";position:absolute;top:-12px;left:10px;right:10px;height:16px;background:url(assets/pixel-edge-h.svg) repeat-x left bottom;pointer-events:none;}
/* per-card pixel accent from the artwork palette (cycles for any future cards) */
.cards .card:nth-child(4n+1){--pixel-accent:#43A047;}
.cards .card:nth-child(4n+2){--pixel-accent:#E53935;}
.cards .card:nth-child(4n+3){--pixel-accent:#1E88E5;}
.cards .card:nth-child(4n+4){--pixel-accent:#FDD835;}
.card__tag{display:inline-flex;align-items:center;gap:10px;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:20px;}
.card__tag::before{content:"";width:8px;height:8px;background:var(--pixel-accent,var(--wine));}
.card h3{font-family:var(--serif);font-size:1.62rem;line-height:1.12;letter-spacing:-.015em;margin-bottom:12px;text-wrap:balance;}
.card__desc{font-family:var(--serif);font-size:1.06rem;line-height:1.45;color:var(--ink-soft);max-width:34ch;text-wrap:pretty;}
/* meta = one quiet line; the tag already names the category, the pill already names the action */
.card__meta{margin-top:auto;padding-top:28px;font-size:13.5px;color:var(--ink-faint);font-feature-settings:"tnum" 1;}
.card__cta{margin-top:16px;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--wine);color:#fff;font-size:14.5px;font-weight:500;letter-spacing:-.005em;padding:11px 22px;border-radius:100px;transition:background .2s var(--ease);}
.card__cta:hover{background:var(--wine-deep);}
.card__cta .arrow{transition:transform .2s var(--ease);}
.card__cta:hover .arrow{transform:translateX(3px);}

/* ---------------- FOOTER (OpenAI-style · all black) ---------------- */
.footer{background:#000;color:#fff;padding-top:clamp(56px,7vw,104px);border-radius:clamp(24px,3.5vw,44px) clamp(24px,3.5vw,44px) 0 0;margin-top:clamp(24px,4vw,48px);position:relative;}
.footer__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(28px,3vw,40px);}
.fcol{display:flex;flex-direction:column;}
.fcol__group{display:flex;flex-direction:column;}
.fcol__group:first-child{min-height:232px;}
.fcol h4{font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;color:#6E6E6E;margin:0 0 22px;}
.fcol a{display:inline-flex;align-items:center;gap:6px;font-size:15px;color:#F2F2F2;padding:9px 0;line-height:1.2;transition:color .18s var(--ease);align-self:flex-start;white-space:nowrap;}
.fcol a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#666;}
.fcol a .out{width:13px;height:13px;flex:none;color:#9A9A9A;transition:color .18s var(--ease);}
.fcol a:hover .out{color:#fff;}
.fcol a .out path{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}

.footer__bar{margin-top:clamp(56px,7vw,96px);padding:30px 0 36px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;}
.footer__social{display:flex;align-items:center;gap:22px;}
.footer__social a{color:#CFCFCF;display:inline-flex;transition:color .18s var(--ease);}
.footer__social a:hover{color:#fff;}
.footer__social svg{width:19px;height:19px;display:block;fill:currentColor;}
.footer__copy{margin-left:clamp(8px,4vw,40px);display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.footer__copy span{font-size:14.5px;color:#9A9A9A;white-space:nowrap;}
.footer__copy a{font-size:14.5px;color:#CFCFCF;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#555;transition:color .18s var(--ease);white-space:nowrap;}
.footer__copy a:hover{color:#fff;}

/* ---------------- LATEST RELEASES ---------------- */
.releases{padding:clamp(52px,7vw,92px) 0 clamp(36px,4vw,56px);}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:860px){
  /* mobile: the art keeps the upper zone, the text owns the lower zone */
  .vision{min-height:0;align-items:flex-end;}
  .vision__in{padding-top:clamp(230px,62vw,320px);padding-bottom:clamp(36px,9vw,52px);}
  .vision__title{font-size:clamp(2.3rem,9.6vw,3rem);}
  .vision__media{width:100%;}
  .vision__media img{object-position:right top;padding:14px 8px 46% 0;}
  .vision__media::after{background:linear-gradient(180deg,rgba(0,0,0,0) 34%,rgba(0,0,0,.68) 66%,#000 100%);}
}
@media (max-width:1040px){
  .footer__grid{display:block;column-count:3;column-gap:clamp(28px,4vw,40px);}
  .fcol{display:block;}
  .fcol__group{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:clamp(28px,5vw,40px);}
  .fcol__group:first-child{min-height:0;}
}
@media (max-width:860px){
  .menus .navitem{display:none;}
  .menus{gap:0;}
}
@media (max-width:520px){
  body{font-size:17px;}
  .footer__grid{column-count:2;}
  .btn--lg{padding:14px 24px;}
}

/* ===== Mobile nav + layout (<=860px) ===== */
.nav__burger{display:none;}
@media (max-width:860px){
  .nav__burger{display:grid;place-items:center;position:relative;width:46px;height:46px;margin-left:auto;background:none;border:0;cursor:pointer;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:transform .2s var(--ease);}
  .nav__burger::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgba(0,0,0,.06);transition:background .25s var(--ease);}
  .nav__burger:hover::before{background:rgba(0,0,0,.10);}
  .nav__burger:active{transform:scale(.9);}
  .nav__burger span{position:absolute;left:50%;top:50%;width:21px;height:2px;margin-top:-1px;margin-left:-10.5px;background:var(--ink);border-radius:2px;transform-origin:center;transition:transform .45s cubic-bezier(.62,.04,.1,1),opacity .28s ease,background .3s var(--ease);}
  .nav__burger span:nth-child(1){transform:translateY(-6.5px);}
  .nav__burger span:nth-child(3){transform:translateY(6.5px);}
  .nav.menu-open .nav__burger span:nth-child(1){transform:rotate(45deg);}
  .nav.menu-open .nav__burger span:nth-child(2){opacity:0;transform:scaleX(.2);}
  .nav.menu-open .nav__burger span:nth-child(3){transform:rotate(-45deg);}
  .menus{position:fixed;top:72px;left:0;right:0;margin-inline:clamp(8px,3vw,14px);flex:none;flex-direction:column;align-items:stretch;gap:0;background:#000;border:1px solid #242424;border-radius:22px;padding:8px calc(var(--pad) - 3px) 18px;max-height:calc(100vh - 84px);max-height:calc(100dvh - 84px);overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(-12px);transform-origin:top center;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;box-shadow:0 36px 64px -26px rgba(0,0,0,.72);z-index:80;}
  .nav.menu-open .menus{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
  .menus>.navlink,.menus .navitem>.navlink{display:flex;width:100%;justify-content:space-between;align-items:center;font-size:17px;font-weight:500;color:#F2F2F2;padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.08);}
  .menus .navitem{display:block;position:static;}
  .menus .navitem::after{display:none;}
  .menus .navitem>.navlink .chev{display:inline-block;width:13px;height:13px;opacity:.75;}
  .menus .navitem.open>.navlink{color:#fff;}
  .menus .menu{position:static;transform:none;opacity:1;visibility:visible;display:none;background:transparent;border:0;box-shadow:none;min-width:0;border-radius:0;padding:2px 0 12px;border-bottom:1px solid rgba(255,255,255,.08);}
  /* mobile panel carries the pixel edge itself; the inlined submenus don't repeat it */
  .menus{padding-left:calc(var(--pad) + 16px);}
  .menus::before{content:"";position:absolute;left:8px;top:16px;bottom:16px;width:20px;background:url(assets/pixel-edge.svg) repeat-y left top;pointer-events:none;}
  .menus .menu::before{display:none;}
  .menus .navitem.open .menu{display:block;}
  .menus .menu__label{color:#7C7C7C;margin:12px 2px 2px;}
  .menus .menu__group{display:flex;flex-direction:column;}
  .menus .menu__link{font-size:15.5px;color:#fff;padding:11px 2px;justify-content:flex-start;}
  .menus .menu__sep{display:none;}
  .menus .try{display:none;}
  .menus .try__chev{display:none;}
  .menus .try-menu{display:none;}
  .menus .try__btn{width:100%;}
  .menus .try__main{flex:1;text-align:center;padding:15px;font-size:15.5px;}
  /* top padding/negative margin keep the cards' pixel-strip overhang inside the scrollport */
  .cards{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad);scroll-padding-inline:var(--pad);padding-top:14px;margin-top:-14px;}
  .cards::-webkit-scrollbar{display:none;}
  .cards .card{flex:0 0 clamp(258px,82%,340px);scroll-snap-align:start;min-height:0;}
}
/* No scroll lock while the menu is open — scrolling the page closes it (see MobileMenu) */
@media (max-width:520px){ .footer__grid{column-count:2;} }

@media (max-width:860px){
  .menus>.navlink,.menus>.navitem,.menus>.try{opacity:0;transform:translateY(10px);transition:opacity .34s var(--ease),transform .44s cubic-bezier(.62,.04,.1,1);}
  .nav.menu-open .menus>.navlink,.nav.menu-open .menus>.navitem,.nav.menu-open .menus>.try{opacity:1;transform:none;}
  .nav.menu-open .menus>*:nth-child(1){transition-delay:.05s;}
  .nav.menu-open .menus>*:nth-child(2){transition-delay:.10s;}
  .nav.menu-open .menus>*:nth-child(3){transition-delay:.15s;}
  .nav.menu-open .menus>*:nth-child(4){transition-delay:.19s;}
  .nav.menu-open .menus>*:nth-child(5){transition-delay:.23s;}
}
@media (prefers-reduced-motion:reduce){
  .nav__burger span,.menus,.menus>*{transition-duration:.01ms!important;transition-delay:0!important;}
}

/* Header inverts to dark when scrolled (or while the mobile menu is open) */
.nav.scrolled,.nav.menu-open{background:#000;color:#fff;box-shadow:0 18px 40px -30px rgba(0,0,0,.55);}
.nav.scrolled .brand--logo img,.nav.menu-open .brand--logo img{filter:brightness(0) invert(1);}
.nav.scrolled .navlink,.nav.menu-open .navlink{color:#EDEDED;}
.nav.scrolled .navlink:hover,.nav.menu-open .navlink:hover,.nav.scrolled .navitem.open>.navlink,.nav.menu-open .navitem.open>.navlink{color:#fff;}
.nav.scrolled .navitem.open>.navlink,.nav.menu-open .navitem.open>.navlink{text-decoration-color:#fff;}
.nav.scrolled .try__btn,.nav.menu-open .try__btn{background:#fff;border-color:#fff;}
.nav.scrolled .try__main,.nav.menu-open .try__main{color:#0A0A0A;}
.nav.scrolled .try__chev,.nav.menu-open .try__chev{color:#0A0A0A;border-left-color:rgba(0,0,0,.14);}
.nav.scrolled .nav__burger span,.nav.menu-open .nav__burger span{background:#fff;}
.nav.scrolled .nav__burger::before,.nav.menu-open .nav__burger::before{background:rgba(255,255,255,.12);}

/* Mobile: while the burger menu is open, fuse header + popup into one block —
   square the corners where they meet and align the popup to the full-bleed header. */
@media (max-width:860px){
  .nav.menu-open{border-bottom-left-radius:0;border-bottom-right-radius:0;}
  .nav.menu-open .menus{margin-inline:0;border-top:0;border-top-left-radius:0;border-top-right-radius:0;}
  .menus>a.navlink:last-of-type{border-bottom:0;}
}

/* ===========================================================================
   INTERNAL PAGES — shared template for every src/pages/* file (see _layout.html)
   ---------------------------------------------------------------------------
   ONE grid (--page-grid) runs unbroken through the hero AND every body row, so
   the heading column, the index column, and the content column share the same
   x-coordinates top-to-bottom. Content lives in .container, so the left/right
   edges land on the SAME gutters as the header (logo / actions) and footer.
   Compact ledger rhythm: each block closed by a var(--line) hairline; the hero
   closed by a single strong var(--line-strong) hairline (echoes .sec-head).
   =========================================================================== */
.page{
  --page-grid:minmax(0,clamp(148px,17vw,216px)) minmax(0,1fr);
  --page-gap:clamp(20px,3.4vw,56px);
  padding-block:clamp(24px,2.8vw,40px) clamp(44px,6vw,80px);
}

/* ---- HERO: "Why Argus" left at the gutter, statement right at the gutter ---- */
.page__hero{
  display:grid;
  grid-template-columns:var(--page-grid);
  gap:var(--page-gap);
  align-items:end;
  padding-bottom:clamp(16px,2vw,26px);
  border-bottom:1px solid var(--line-strong);
}
.page__title{
  grid-column:1;justify-self:start;margin:0;
  font-family:var(--sans);font-weight:700;
  font-size:clamp(18px,1.5vw,22px);line-height:1.16;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance;
}
.page__title em{font-family:var(--serif);font-weight:500;font-style:italic;letter-spacing:-.01em;}
.page__statement{
  grid-column:2;justify-self:end;text-align:right;margin:0;max-width:46ch;
  font-family:var(--sans);font-weight:500;
  font-size:clamp(14px,1vw,15.5px);line-height:1.45;
  letter-spacing:-.005em;color:var(--ink-soft);text-wrap:pretty;
}
.page__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(16px,2vw,24px);}

/* ---- BODY: numbered ledger rows on the SAME grid as the hero ---- */
.page__body{display:block;}
.page__row{
  display:grid;
  grid-template-columns:var(--page-grid);
  gap:var(--page-gap);
  align-items:start;
  padding:clamp(15px,1.7vw,22px) 0;
  border-bottom:1px solid var(--line);
}
.page__lead{display:flex;align-items:baseline;gap:9px;}
.page__num{
  flex:none;min-width:1.6ch;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:12.5px;line-height:1;color:var(--ink-faint);
  font-feature-settings:"tnum" 1;
}
.page__heading{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(14.5px,1.1vw,16px);line-height:1.3;
  letter-spacing:-.006em;color:var(--ink);text-wrap:balance;
}
.page__copy{min-width:0;max-width:70ch;}
.page__copy p{
  margin:0 0 9px;font-family:var(--sans);font-weight:400;
  font-size:clamp(14px,1vw,15.5px);line-height:1.6;
  color:var(--ink-soft);text-wrap:pretty;
}
.page__copy p:last-child{margin-bottom:0;}
.page__copy a{
  color:var(--ink);font-family:var(--sans);font-weight:500;font-size:.95em;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--line-strong);
  transition:text-decoration-color .18s var(--ease);
}
.page__copy a:hover{text-decoration-color:var(--ink);}
.page__copy strong{font-weight:600;color:var(--ink);}
.page__copy ul{margin:2px 0 10px;padding-left:1.15em;list-style:none;}
.page__copy li{position:relative;margin:0 0 6px;font-size:clamp(14px,1vw,15.5px);line-height:1.55;color:var(--ink-soft);}
.page__copy li::before{content:"";position:absolute;left:-1.05em;top:.62em;width:5px;height:1px;background:var(--ink-faint);}
.page__copy code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;
  color:var(--ink);background:var(--bg-3);border:1px solid var(--line);
  border-radius:5px;padding:.05em .36em;
}

/* ---- stack gracefully on mobile ---- */
@media (max-width:720px){
  .page__hero{
    grid-template-columns:1fr;align-items:start;
    gap:10px;padding-bottom:16px;
  }
  .page__title{grid-column:1;}
  .page__statement{
    grid-column:1;justify-self:start;text-align:left;max-width:52ch;
  }
  .page__row{
    grid-template-columns:1fr;gap:6px;
    padding:clamp(16px,4.5vw,20px) 0;
  }
  .page__copy{max-width:none;}
}