/* SIVS: Special Investigation Services
   Feed (dark, scroll-scrubbed footage) / Dossier (paper, reading) dual surface.
   Palette + rules: visual-style.md */

:root{
  /* brand */
  --navy:#243255; --navy-deep:#1A1C36; --ink:#0E1020;
  --line:#34406A; --gold:#e0ab56; --gold-bright:#F0DCA0; --gold-deep:#8d5b23;
  --gold-metal-stops:#86622c 0%,#c79542 16%,#ead18a 32%,#ad7630 50%,#d9ad5e 68%,#95652e 84%,#e6ca87 100%;
  /* paper / dossier */
  --paper:#F7F6F2; --bone:#EFEBE2; --ink-on-paper:#1A2138;
  --g50:#F4F6F8; --g100:#EAEEF1; --g200:#DBE0E5; --g300:#C5CCD3;
  --g500:#79828C; --g700:#474E57; --g850:#2A2F36; --g950:#181B20;
  /* feed text */
  --text:#ECEAE3; --text-dim:#9AA0B8;
  /* functional */
  --rec:#C2362F; --focus:#5AA9E6;
  /* type */
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --head-h:72px;
}

*{box-sizing:border-box}
/* anchor jumps are instant by design: smooth-scrolling through the tall scrub
   sections fast-forwards the footage, which reads as motion sickness */
/* scroll-padding (not per-target scroll-margin) so anchor jumps, FAQ deep links,
   and keyboard-focus scrolls all clear the fixed header */
html{color-scheme:dark;scroll-padding-top:calc(var(--head-h) + 12px)}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}

img,video{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* the light-blue ring fails 3:1 on paper; navy passes on every light surface */
.dossier :focus-visible{outline-color:var(--navy)}

/* ---------- skip link ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--navy);color:#fff;
  padding:12px 20px;font-weight:700;text-decoration:none}
.skip:focus{left:0}

/* ---------- header ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:50;
  background:linear-gradient(180deg,rgba(8,10,20,.62),rgba(8,10,20,0));
  transition:background .3s ease, box-shadow .3s ease}
.site-head.solid{background:rgba(24,27,32,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.08)}
.head-inner{max-width:1240px;height:var(--head-h);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:block;flex:0 0 auto;align-self:flex-start;height:140px;width:auto;
  line-height:0;text-decoration:none;margin-top:6px}
.brand img{display:block;height:140px;width:auto;max-width:none;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.25))}
.brand:hover img{filter:drop-shadow(0 2px 14px rgba(0,0,0,.42)) brightness(1.08)}
.nav-toggle{display:none}
.site-nav{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;max-width:100%;
  flex:1 1 auto;min-width:0;justify-content:flex-end;padding-right:28px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--text);text-decoration:none;padding:10px 12px;border-bottom:2px solid transparent;
  white-space:nowrap}
.site-nav a:hover{color:var(--gold-bright)}
.site-nav a[aria-current="true"]{color:var(--gold);border-bottom-color:var(--gold)}

/* ---------- scroll-scrubbed scenes ---------- */
/* scene height sets scrub pace: shorter runs play the footage faster per
   scroll-pixel (denser frames = smoother) and hold visitors for less time */
.scrolly{position:relative;height:220vh}
.scrolly.hero{height:220vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#000}
.feed{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.05) saturate(.9)}
.feed.still{will-change:transform;transform:scale(1.06)}
.scrim{position:absolute;inset:0;background:
  radial-gradient(120% 100% at 50% 40%,transparent 40%,rgba(0,0,0,.55) 100%),
  linear-gradient(180deg,rgba(0,0,0,.42),transparent 24%,transparent 60%,rgba(0,0,0,.66))}

/* HUD chrome - decorative, aria-hidden */
.hud{position:absolute;inset:0;pointer-events:none;font-family:var(--mono);
  font-size:13px;letter-spacing:2px;color:rgba(223,231,216,.8)}
.hud .br{position:absolute;width:38px;height:38px;border:2px solid rgba(207,224,199,.6)}
/* top chrome sits below the fixed header so CAM ids / timestamps never hide under it */
.hud .tl{top:calc(var(--head-h) + 14px);left:24px;border-right:0;border-bottom:0}
.hud .tr{top:calc(var(--head-h) + 14px);right:24px;border-left:0;border-bottom:0}
.hud .bl{bottom:24px;left:24px;border-right:0;border-top:0}
.hud .brr{bottom:24px;right:24px;border-left:0;border-top:0}
.hud-tl{position:absolute;top:calc(var(--head-h) + 20px);left:76px}
.hud .tl,.hud-tl,.hud .tr,.hud-tr{transition:opacity .2s ease}
.hud-logo-overlap{opacity:.4}
.hud-tr{position:absolute;top:calc(var(--head-h) + 20px);right:76px}
.hud-bl{position:absolute;bottom:30px;left:76px}
.hud-br{position:absolute;bottom:30px;right:76px}
.hud .rec{display:flex;align-items:center;gap:8px;color:rgba(236,234,227,.9)}
.hud .dot{width:9px;height:9px;border-radius:50%;background:var(--rec);
  box-shadow:0 0 8px var(--rec);animation:blink 1.8s steps(2,start) infinite}
@keyframes blink{50%{opacity:.25}}

/* scrub progress */
.scrub{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08)}
.scrub i{position:absolute;inset:0;background:var(--gold);transform-origin:left;transform:scaleX(0)}

/* scene caption */
.cap{position:absolute;left:7vw;bottom:16vh;max-width:620px;will-change:transform,opacity}
.cap .lab{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--gold);margin:0}
.cap .line{font-size:clamp(28px,4.5vw,54px);font-weight:900;letter-spacing:.4px;line-height:1.05;
  color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.65);margin:10px 0 0}

/* hero copy panel - solid-ish backplate keeps body text off raw footage */
.hero-copy{left:max(7vw,24px);right:max(7vw,24px);bottom:14vh;max-width:660px;
  background:rgba(10,12,24,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(52,64,106,.55);border-left:0;
  padding:clamp(24px,4vw,40px)}
.hero-copy::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;
  background:linear-gradient(180deg,var(--gold-metal-stops));
  box-shadow:0 0 10px rgba(224,171,86,.18)}
.hero-copy .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:4px;
  text-transform:uppercase;color:var(--gold);margin:0}
.hero-copy h1{font-size:clamp(30px,4.6vw,56px);font-weight:900;letter-spacing:.4px;
  line-height:1.06;color:#fff;margin:14px 0 0}
.hero-copy .sub{color:#C9CEDF;font-size:clamp(15px,1.6vw,17px);max-width:58ch;margin:18px 0 0}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;
  text-decoration:none;padding:13px 22px;display:inline-block}
.btn.ghost{color:var(--text);border:1px solid rgba(236,234,227,.45)}
.btn.ghost:hover{color:var(--gold-bright);border-color:var(--gold)}
.btn.solid{color:#10131F;background:var(--gold);border:1px solid var(--gold);font-weight:700}
.btn.solid:hover{background:var(--gold-bright);border-color:var(--gold-bright)}

.cue{position:absolute;left:50%;transform:translateX(-50%);bottom:4vh;margin:0;
  font-family:var(--mono);font-size:11px;letter-spacing:3px;color:var(--gold);
  animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .hud .dot,.cue{animation:none}
  .feed.still{transform:none;will-change:auto}
}
@media(forced-colors:active){
  .nav-toggle span{background:ButtonText;forced-color-adjust:none}
}

/* ---------- dossier (paper) sections ---------- */
.dossier,.contact{position:relative;overflow:hidden;isolation:isolate}
/* offscreen sections skip style/layout/paint (the blended watermark +
   masked grunge layers are the page's heaviest paint work) */
@supports (content-visibility:auto){
  .dossier,.contact{content-visibility:auto;contain-intrinsic-size:auto 800px}
}
.dossier{--grunge-edge-strong:rgba(36,50,85,.075);--grunge-edge-soft:rgba(36,50,85,.025);
  --grunge-edge-scratch:rgba(36,50,85,.028);--grunge-edge-mix:multiply;
  --wm-filter:drop-shadow(-18px -18px 18px rgba(255,255,255,.46)) drop-shadow(20px 20px 20px rgba(14,16,32,.28));
  background:var(--paper);color:var(--ink-on-paper)}
.dossier .wrap{max-width:1080px;margin:0 auto;padding:clamp(72px,12vh,128px) 28px}
.dossier .wrap,.contact .wrap{position:relative;z-index:1}
.dossier::before,.contact::before{content:"";position:absolute;z-index:0;pointer-events:none;
  top:var(--wm-top,50%);right:var(--wm-right,auto);bottom:var(--wm-bottom,auto);left:var(--wm-left,auto);
  width:var(--wm-w,min(42vw,480px));aspect-ratio:var(--wm-ratio,1);
  background-image:var(--wm-img,none);background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:var(--wm-opacity,.04);mix-blend-mode:multiply;filter:var(--wm-filter,none);
  transform:translate(var(--wm-tx,0),var(--wm-ty,-50%)) rotate(var(--wm-rotate,0deg))}
.dossier::after,.contact::after{content:"";position:absolute;z-index:0;pointer-events:none;
  inset:0 auto 0 0;width:min(30vw,380px);
  background:
    linear-gradient(90deg,var(--grunge-edge-strong),var(--grunge-edge-soft) 42%,transparent 100%),
    repeating-linear-gradient(98deg,var(--grunge-edge-scratch) 0 1px,transparent 2px 24px),
    repeating-linear-gradient(7deg,var(--grunge-edge-soft) 0 1px,transparent 2px 34px);
  mix-blend-mode:var(--grunge-edge-mix,multiply);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.86) 18%,rgba(0,0,0,.34) 58%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.86) 18%,rgba(0,0,0,.34) 58%,transparent 100%)}
#mission{--wm-img:url("../images/watermarks/sivs-cutout-flag.webp");--wm-ratio:960 / 1275;
  --wm-w:min(38vw,410px);--wm-top:52%;--wm-right:max(-170px,calc((100vw - 1080px) / 2 - 150px));--wm-opacity:.045}
#work{--wm-img:url("../images/watermarks/sivs-cutout-map.webp");--wm-ratio:960 / 1024;
  --wm-w:min(44vw,560px);--wm-top:52%;--wm-right:max(-230px,calc((100vw - 1080px) / 2 - 190px));--wm-opacity:.042}
#pedigree{--wm-img:url("../images/watermarks/sivs-cutout-eagle-2.webp");--wm-ratio:960 / 729;
  --wm-w:min(45vw,520px);--wm-top:54%;--wm-right:max(-190px,calc((100vw - 1080px) / 2 - 165px));--wm-opacity:.04}
#discipline{--wm-img:url("../images/watermarks/sivs-cutout-viewfinder.webp");--wm-ratio:1;
  --wm-w:min(42vw,500px);--wm-top:51%;--wm-right:max(-190px,calc((100vw - 1080px) / 2 - 150px));--wm-opacity:.036}
#faq{--wm-img:url("../images/watermarks/sivs-cutout-shield.webp");--wm-ratio:823 / 1024;
  --wm-w:min(36vw,390px);--wm-top:56%;--wm-right:max(-170px,calc((100vw - 1080px) / 2 - 135px));--wm-opacity:.03}
#privacy{--wm-img:url("../images/watermarks/sivs-cutout-seal-and-key.webp");--wm-ratio:960 / 1194;
  --wm-w:min(36vw,380px);--wm-top:52%;--wm-right:max(-155px,calc((100vw - 1080px) / 2 - 120px));--wm-opacity:.026}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--g700);margin:0}
.bar{width:120px;height:14px;background:var(--navy);position:relative;margin:14px 0 26px}
.bar::after{content:"";position:absolute;left:0;top:18px;width:110px;height:5px;
  background:linear-gradient(90deg,var(--gold-metal-stops))}
.bar.gold{background:linear-gradient(90deg,var(--gold-metal-stops))}
.bar.gold::after{background:rgba(236,234,227,.35)}
.dossier h2{font-size:clamp(30px,4vw,46px);font-weight:900;letter-spacing:.3px;line-height:1.06;
  color:var(--navy);margin:0 0 22px}
.dossier p{max-width:64ch;color:var(--g700);font-size:17px;margin:0 0 16px}
.dossier strong{color:var(--ink-on-paper)}
.dossier a{color:var(--navy);text-decoration-color:var(--gold);text-decoration-thickness:2px;
  text-underline-offset:3px}
.dossier a:hover{color:#101a35}

/* mission */
.mission-wrap{display:block}
.lede{font-size:clamp(19px,2.2vw,23px)!important;line-height:1.55;color:var(--ink-on-paper)!important;
  max-width:52ch!important}

/* work - service cards (folder studies) */
.svc-grid{list-style:none;margin:42px 0 0;padding:0;display:grid;gap:28px 18px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.svc-grid li{--folder-tab-w:88px;--folder-tab-left:18px;--folder-tab-top:-12px;
  --folder-tab-h:20px;--folder-tab-bg:#F4F1E9;--folder-tab-border:var(--g200);
  --folder-tab-slant:calc(100% - 18px);
  --folder-seam:linear-gradient(90deg,rgba(36,50,85,.18),rgba(36,50,85,.06) 42%,transparent);
  position:relative;overflow:visible;min-height:142px;background:linear-gradient(60deg,#F8F6F0,#fff,#F8F6F0);
  border:1px solid var(--g200);padding:30px 24px 22px;box-shadow:0 12px 26px rgba(26,33,56,.045)}
.svc-grid li::before,.svc-grid li::after{content:"";position:absolute;pointer-events:none}
.svc-grid li h3,.svc-grid li p{position:relative;z-index:1}
.svc-grid li::before{left:var(--folder-tab-left);top:var(--folder-tab-top);
  width:var(--folder-tab-w);height:var(--folder-tab-h);background:var(--folder-tab-bg);
  border:1px solid var(--folder-tab-border);border-bottom:0;
  clip-path:polygon(0 0,var(--folder-tab-slant) 0,100% 100%,0 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82);z-index:-1}
.svc-grid li::after{left:0;right:0;top:0;height:1px;background:var(--folder-seam)}
.svc-grid li:nth-child(2){--folder-tab-w:76px;--folder-tab-left:22px;--folder-tab-top:-10px;
  --folder-tab-bg:#F8F6F0;--folder-tab-slant:100%}
.svc-grid li:nth-child(3){--folder-tab-w:104px;--folder-tab-left:16px;
  --folder-tab-bg:#F5F0E3;--folder-tab-border:rgba(224,171,86,.48);
  --folder-seam:linear-gradient(90deg,rgba(224,171,86,.34),rgba(36,50,85,.09) 44%,transparent)}
.svc-grid li:nth-child(4){--folder-tab-w:72px;--folder-tab-left:30px;--folder-tab-top:-14px;
  --folder-tab-bg:#F0EEE8;--folder-tab-slant:calc(100% - 12px)}
.svc-grid li:nth-child(5){--folder-tab-w:118px;--folder-tab-left:18px;
  --folder-tab-bg:#FAF7EF;--folder-tab-border:rgba(36,50,85,.14);--folder-tab-slant:calc(100% - 26px)}
.svc-grid h3{font-size:16px;font-weight:800;color:var(--navy);letter-spacing:.2px;margin:0 0 8px}
.svc-grid p{font-size:15px;color:var(--g700);margin:0}
.note{margin-top:28px!important;font-size:15px!important;color:var(--g700)!important;
  border-left:3px solid var(--gold);padding-left:16px}

/* discipline - indexed habit rows */
.habits{list-style:none;margin:34px 0 0;padding:0;max-width:760px}
.habits li{display:grid;grid-template-columns:64px 1fr;gap:8px;padding:22px 0;
  border-top:1px solid var(--g300)}
.habits li:last-child{border-bottom:1px solid var(--g300)}
.habits .idx{font-family:var(--mono);font-size:13px;letter-spacing:2px;color:var(--gold-deep);
  padding-top:3px}
.habits h3{font-size:17px;font-weight:800;color:var(--navy);margin:0 0 6px}
.habits p{font-size:15px;margin:0}

/* faq - accordion on faint gray */
.faq{background:var(--g50)}
.faq h3{font-family:var(--mono);font-size:13px;letter-spacing:3px;text-transform:uppercase;
  color:var(--g700);margin:44px 0 14px;display:flex;align-items:center;gap:10px}
.faq h3::before{content:"";display:inline-block;flex:0 0 auto;width:12px;height:14px;
  background:linear-gradient(135deg,#8d5b23 0%,#d59a3e 42%,#f1d58c 68%,#a96d2a 100%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 351 400'%3E%3Cpath fill='black' d='M111.57 49.5867C134.039 49.5867 154.184 61.9834 165.806 80.5785C176.653 99.9483 176.653 123.967 165.806 142.562C154.184 161.932 134.039 173.554 111.57 173.554C89.876 173.554 69.7314 161.932 58.1095 142.562C47.2624 123.967 47.2624 99.9483 58.1095 80.5785C69.7314 61.9834 89.876 49.5867 111.57 49.5867ZM111.57 223.14C134.039 223.14 154.184 216.942 171.229 206.095L237.862 272.727L206.095 305.269C196.023 314.566 196.023 330.837 206.095 340.134C215.393 350.207 231.663 350.207 240.961 340.134L272.727 308.368L287.448 322.314L255.682 354.855C245.609 364.153 245.609 380.424 255.682 389.721C264.979 399.793 281.25 399.793 290.548 389.721L340.134 340.134C350.207 330.837 350.207 314.566 340.134 305.269L206.095 171.229C216.942 154.184 223.14 134.039 223.14 111.57C223.14 50.3615 173.554 -4.19617e-05 111.57 -4.19617e-05C50.3615 -4.19617e-05 -4.19617e-05 50.3615 -4.19617e-05 111.57C-4.19617e-05 173.554 50.3615 223.14 111.57 223.14Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 351 400'%3E%3Cpath fill='black' d='M111.57 49.5867C134.039 49.5867 154.184 61.9834 165.806 80.5785C176.653 99.9483 176.653 123.967 165.806 142.562C154.184 161.932 134.039 173.554 111.57 173.554C89.876 173.554 69.7314 161.932 58.1095 142.562C47.2624 123.967 47.2624 99.9483 58.1095 80.5785C69.7314 61.9834 89.876 49.5867 111.57 49.5867ZM111.57 223.14C134.039 223.14 154.184 216.942 171.229 206.095L237.862 272.727L206.095 305.269C196.023 314.566 196.023 330.837 206.095 340.134C215.393 350.207 231.663 350.207 240.961 340.134L272.727 308.368L287.448 322.314L255.682 354.855C245.609 364.153 245.609 380.424 255.682 389.721C264.979 399.793 281.25 399.793 290.548 389.721L340.134 340.134C350.207 330.837 350.207 314.566 340.134 305.269L206.095 171.229C216.942 154.184 223.14 134.039 223.14 111.57C223.14 50.3615 173.554 -4.19617e-05 111.57 -4.19617e-05C50.3615 -4.19617e-05 -4.19617e-05 50.3615 -4.19617e-05 111.57C-4.19617e-05 173.554 50.3615 223.14 111.57 223.14Z'/%3E%3C/svg%3E") center/contain no-repeat}
/* extra landing offset so deep-linked questions clear the badge overhang */
.faq details{background:#fff;border:1px solid var(--g300);margin:0 0 10px;max-width:820px;
  scroll-margin-top:80px}
.faq summary{list-style:none;cursor:pointer;padding:16px 52px 16px 20px;position:relative;
  font-weight:700;font-size:16px;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:#F9F6EE;color:#101a35}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:18px;color:var(--gold-deep);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--g100)}
.faq .a{padding:16px 20px 6px}
.faq .a p{font-size:15.5px;margin-bottom:14px}
.faq details:target{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}

/* ---------- contact - official navy band ---------- */
.contact{--wm-img:url("../images/watermarks/sivs-cutout-wordmark-proportional.webp");--wm-ratio:960 / 611;
  --wm-w:min(48vw,560px);--wm-right:max(-190px,calc((100vw - 1080px) / 2 - 135px));--wm-bottom:-120px;
  --wm-top:auto;--wm-ty:0;--wm-opacity:.045;
  --wm-filter:brightness(0) invert(1) drop-shadow(-18px -18px 18px rgba(255,255,255,.24)) drop-shadow(20px 20px 20px rgba(0,0,0,.34));
  --grunge-edge-strong:rgba(236,234,227,.11);--grunge-edge-soft:rgba(236,234,227,.035);
  --grunge-edge-scratch:rgba(236,234,227,.04);--grunge-edge-mix:screen;
  background:var(--navy-deep);color:var(--text)}
.contact::before{mix-blend-mode:screen}
.contact .wrap{max-width:1080px;margin:0 auto;padding:clamp(72px,12vh,120px) 28px}
.contact .kicker{color:var(--gold)}
.contact h2{font-size:clamp(30px,4vw,46px);font-weight:900;color:#fff;margin:0 0 34px}
.channels{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin:0;border-top:1px solid var(--line);padding-top:30px}
.channels dt{font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:var(--text-dim);margin:0 0 10px}
.channels dd{margin:0;font-size:19px;font-weight:600}
.channels a{color:var(--gold);text-decoration-color:rgba(202,165,105,.5);text-underline-offset:4px}
.channels a:hover{color:var(--gold-bright)}
.llc{font-family:var(--mono);font-size:12px;letter-spacing:3px;color:var(--text-dim);
  margin:44px 0 0}

/* ---------- privacy - quiet ---------- */
.privacy .wrap{padding:clamp(56px,8vh,84px) 28px}
.privacy h2{font-size:24px}
.privacy p,.privacy li{font-size:15px;color:var(--g700)}
.privacy ul{max-width:68ch;padding-left:20px;margin:0 0 16px}
.privacy li{margin-bottom:10px}

/* ---------- footer ---------- */
.not-found-page{min-height:100svh;background:var(--ink);color:var(--text)}
.not-found-hero{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;
  display:grid;align-items:center;padding:calc(var(--head-h) + 88px) 28px 84px}
.not-found-hero::before,.not-found-hero::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none}
.not-found-hero::before{background:url("../images/gen/poster-intersection.webp") center/cover no-repeat;
  filter:contrast(1.08) saturate(.86);transform:scale(1.02)}
.not-found-hero::after{z-index:-1;background:
  radial-gradient(110% 95% at 32% 44%,rgba(0,0,0,.12) 0%,rgba(0,0,0,.42) 52%,rgba(0,0,0,.82) 100%),
  linear-gradient(90deg,rgba(8,10,20,.82),rgba(8,10,20,.62) 42%,rgba(8,10,20,.38) 100%),
  linear-gradient(180deg,rgba(0,0,0,.42),transparent 30%,rgba(0,0,0,.7))}
.not-found-inner{width:min(100%,1184px);margin:0 auto;display:grid;gap:28px}
.not-found-panel{position:relative;max-width:650px;background:rgba(10,12,24,.72);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(52,64,106,.6);border-left:0;padding:clamp(24px,4vw,42px)}
.not-found-panel::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:4px;
  background:linear-gradient(180deg,var(--gold-metal-stops));box-shadow:0 0 10px rgba(224,171,86,.18)}
.not-found-code{font-family:var(--mono);font-size:12px;letter-spacing:4px;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px}
.not-found-panel h1{font-size:clamp(36px,6vw,72px);font-weight:900;letter-spacing:.4px;
  line-height:.98;color:#fff;margin:0}
.not-found-panel p:not(.not-found-code){max-width:54ch;color:#C9CEDF;font-size:clamp(15px,1.6vw,18px);
  margin:20px 0 0}
.not-found-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;max-width:650px;
  background:rgba(236,234,227,.16);border:1px solid rgba(236,234,227,.16)}
.not-found-links a{display:flex;align-items:center;gap:12px;min-height:58px;padding:16px 18px;
  background:rgba(10,12,24,.68);color:var(--text);font-family:var(--mono);font-size:12px;
  letter-spacing:2px;text-transform:uppercase;text-decoration:none}
.not-found-links a:hover{color:var(--gold-bright);background:rgba(24,27,32,.84)}
.not-found-links span{color:var(--gold);letter-spacing:1px}

.site-foot{background:var(--g950);border-top:1px solid var(--g850)}
.site-foot .wrap{max-width:1080px;margin:0 auto;padding:48px 28px 40px;
  display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.foot-emblem{height:120px;width:auto;
  filter:brightness(0) saturate(100%) invert(88.5%) sepia(30.4%) saturate(934.7%) hue-rotate(182.5deg) brightness(107.7%) contrast(78%)}
.foot-line{font-family:var(--mono);font-size:12px;letter-spacing:1.5px;color:var(--text-dim);
  justify-content:center;max-width:720px;
  margin:0;display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.foot-line a{color:var(--text-dim);text-underline-offset:3px}
.foot-line a:hover{color:var(--gold)}
.foot-line .sep{color:var(--g850)}

/* ---------- mid-sized screens: compact badge + nav so all six links fit ---------- */
@media(min-width:761px) and (max-width:960px){
  .brand,.brand img{height:112px}
  /* everything fits at these sizes, so the scroll-hint fade would only
     dim the tail of CONTACT (no padding-right to keep it clear) */
  .site-nav{padding-right:0;gap:4px;-webkit-mask-image:none;mask-image:none}
  .site-nav a{font-size:10px;padding:10px 10px}
}

/* ---------- small screens ---------- */
@media(max-width:760px){
  :root{--head-h:56px}
  .head-inner{padding:0 16px;gap:10px}
  .has-js .head-inner{position:relative;justify-content:flex-end}
  .brand{margin-top:4px}
  .has-js .brand{position:absolute;left:16px;top:0;z-index:1}
  .nav-toggle:not([hidden]){--nav-line-gap:7px;--nav-line-h:2.5px;
    display:flex;align-items:center;justify-content:center;flex-direction:column;
    position:relative;z-index:2;flex:0 0 auto;width:44px;height:44px;margin-left:auto;gap:var(--nav-line-gap);color:var(--text);
    background:rgba(10,12,24,.58);border:0;padding:0;cursor:pointer}
  .nav-toggle span{display:block;width:28px;height:var(--nav-line-h);background:#889382;
    transition:transform .22s ease, opacity .22s ease}
  .nav-toggle:hover{color:var(--gold-bright)}
  .site-head.nav-open .nav-toggle span:nth-child(1){transform:translateY(calc(var(--nav-line-gap) + var(--nav-line-h))) rotate(45deg)}
  .site-head.nav-open .nav-toggle span:nth-child(2){opacity:0}
  .site-head.nav-open .nav-toggle span:nth-child(3){transform:translateY(calc((var(--nav-line-gap) + var(--nav-line-h)) * -1)) rotate(-45deg)}
  .has-js .site-nav{position:fixed;top:calc(var(--head-h) + 14px);left:16px;right:16px;
    z-index:3;display:grid;gap:0;max-width:none;padding:8px;overflow:visible;justify-content:stretch;
    background:rgba(24,27,32,.96);border:1px solid rgba(236,234,227,.18);
    box-shadow:0 20px 44px rgba(0,0,0,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
    -webkit-mask-image:none;mask-image:none}
  .has-js .site-head.nav-open .site-nav{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .has-js .site-nav a{display:block;padding:13px 14px;border-bottom:1px solid rgba(236,234,227,.12);
    font-size:12px;letter-spacing:2px}
  .has-js .site-nav a:last-child{border-bottom:0}
  .has-js .site-nav a[aria-current="true"]{background:rgba(224,171,86,.12);border-bottom-color:rgba(224,171,86,.38)}
  .site-nav a{font-size:11px;padding:8px 8px;letter-spacing:1.5px}
  .not-found-body .brand,.not-found-body .brand img{height:112px}
  .not-found-hero{padding:calc(var(--head-h) + 72px) 20px 60px;align-items:end}
  .not-found-panel{padding:24px 22px}
  .not-found-panel h1{font-size:clamp(34px,12vw,52px)}
  .not-found-links{grid-template-columns:1fr}
  .not-found-links a{min-height:52px}
  .scrolly{height:190vh}
  .scrolly.hero{height:190vh}
  .hud{font-size:11px}
  .hud-tl{left:60px}.hud-tr{right:60px}.hud-bl{left:60px}.hud-br{right:60px}
  .hud .br{width:26px;height:26px}
  .cap{left:6vw;right:6vw;bottom:14vh}
  .hero-copy{bottom:10vh}
  .hero .hud-br{display:none} /* keeps the scroll cue clear on narrow screens */
  .dossier .wrap,.contact .wrap{padding-left:20px;padding-right:20px}
  .dossier::before,.contact::before{width:var(--wm-mobile-w,min(92vw,380px));
    top:var(--wm-mobile-top,64%);right:var(--wm-mobile-right,-150px);bottom:auto;left:auto;
    opacity:var(--wm-mobile-opacity,.025);transform:translateY(-50%) rotate(var(--wm-rotate,0deg))}
  #work{--wm-mobile-top:56%;--wm-mobile-right:-170px;--wm-mobile-opacity:.028}
  #contact{--wm-mobile-w:min(112vw,460px);--wm-mobile-top:68%;--wm-mobile-right:-190px;--wm-mobile-opacity:.04}
}

/* very narrow phones: the hero panel is taller than the viewport otherwise */
@media(max-width:380px){
  .brand,.brand img{height:112px}
  .hero-copy{padding:20px 18px;bottom:6vh}
  .hero-copy h1{font-size:26px}
  .not-found-panel h1{font-size:32px}
  .hero-copy .sub{font-size:14px;margin-top:12px}
  .not-found-panel p:not(.not-found-code){font-size:14px;margin-top:14px}
  .cta{margin-top:18px}
}
/* narrow AND short (iPhone SE class): 112px still buries the eyebrow line,
   so this one case gets a smaller badge and tighter panel */
@media(max-width:380px) and (max-height:600px){
  .brand,.brand img{height:88px}
  .hero-copy{padding:16px 18px}
  .hero-copy h1{font-size:23px}
  .not-found-panel h1{font-size:28px}
  .hero-copy .sub{font-size:13.5px}
  .cta{margin-top:12px}
  .btn{padding:10px 16px}
}

/* short (landscape-phone) viewports: compact the panel so it fits */
@media(max-height:480px){
  .brand,.brand img{height:112px}
  .cue{bottom:1vh}
  .hero-copy{bottom:6vh;padding:14px 20px}
  .hero-copy h1{font-size:24px}
  .not-found-hero{padding-top:calc(var(--head-h) + 36px);padding-bottom:28px}
  .not-found-panel{padding:18px 20px}
  .not-found-panel h1{font-size:28px}
  .not-found-panel p:not(.not-found-code){font-size:13.5px;margin-top:10px}
  .not-found-links a{min-height:44px;padding:12px 16px}
  .hero-copy .sub{font-size:13.5px;margin-top:10px}
  .cta{margin-top:14px}
  .btn{padding:9px 16px}
}

/* short viewports: allow wider panels to reduce height and prevent logo overlap */
@media(max-height:800px){
  .hero-copy{max-width:850px}
}