/* noc-look.css: Build4's look in the engine frame (Opus, NOC chat, 7 Oct 2026: the skyline header and the card
   grid's effects). Colors are NOC's blues (noc.css); type is Montserrat for the name, Barlow Condensed for headings,
   Source Sans 3 for reading. The skyline drawing is Build4's (names taken out by tools/make-sky.py). */

:root{--deep:#011A41;--on-deep:#F5F9FD;--sky:#52C4FA;--shadow:0 18px 40px -24px rgba(1,26,65,.35);--r:6px;--soft:#DCEEFB}
@media (prefers-color-scheme: dark){:root:not([data-theme="blueprint"]){--deep:#010F28;--soft:#0E2E55;--shadow:0 18px 40px -24px rgba(0,0,0,.7)}}
:root[data-theme="skyline"]{--deep:#010F28;--soft:#0E2E55;--shadow:0 18px 40px -24px rgba(0,0,0,.7)}

/* type */
body{font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px}
h1,h2,.hero-line{font-family:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;font-weight:700;letter-spacing:.005em}
h1{font-size:clamp(38px,5.4vw,62px)}
h2{font-size:clamp(26px,3.2vw,36px)}
h3{font-family:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;font-weight:600;font-size:22px}

/* the masthead: the skyline mark beside the name, set like the logo */
.mast{max-width:1240px}
.brand{position:relative;gap:12px;align-items:center}
.brand .mark{position:relative;display:block;height:46px;flex:0 0 auto;border-radius:4px}
.brand .mark svg.nm{height:46px;width:auto;display:block}
.brand .mark svg.nm-night{display:none}
:root[data-sheet="bluehour"] .brand .mark svg.nm-day,:root[data-sheet="night"] .brand .mark svg.nm-day{display:none}
:root[data-sheet="bluehour"] .brand .mark svg.nm-night,:root[data-sheet="night"] .brand .mark svg.nm-night{display:block}
.word{display:flex;flex-direction:column;font-family:Montserrat,"Segoe UI",system-ui,sans-serif;line-height:1}
.word .l1{font-weight:600;font-size:18px;font-variant:small-caps;letter-spacing:.113em;color:#008CE6}
.word .l2{font-weight:800;font-size:15.5px;letter-spacing:.005em;color:#015BBC;text-transform:uppercase;margin-top:1px}
@media (prefers-color-scheme: dark){:root:not([data-theme="blueprint"]) .word .l1{color:#4DB8FF}:root:not([data-theme="blueprint"]) .word .l2{color:#FFFFFF}}
:root[data-theme="skyline"] .word .l1{color:#4DB8FF}:root[data-theme="skyline"] .word .l2{color:#FFFFFF}
@media (max-width:420px){.brand .word .l1{font-size:15px}.brand .word .l2{font-size:13px}}

/* the live skyline: full on Home, a strip on every other page */
.nocsky{position:relative;overflow:hidden;isolation:isolate;background:#C9D3DC}
:root[data-theme="skyline"] .nocsky{background:#0B1630}
.nocsky-hero{height:clamp(320px,max(46vh,28.8vw),600px)}
@media (max-width:700px){.nocsky-hero{height:clamp(220px,62vw,34vh)}}
.phero-sky{height:clamp(110px,16vh,190px)}
.nocsky .nocsky-pic,.nocsky .nocsky-static{position:absolute;inset:0;width:100%;height:100%}
.nocsky-pic svg.nocsky-svg{display:block;width:100%;height:100%}
.nocsky-static{display:flex;align-items:flex-end;justify-content:center;color:#0E5AA7;background:linear-gradient(#DCEEFB,#F4F8FC)}
.nocsky-static svg{width:min(1100px,96%);height:auto;max-height:62%;opacity:.4}
.nocsky-clock{position:absolute;right:max(16px,calc((100vw - 1240px)/2 + 16px));left:auto;top:14px;z-index:3;margin:0;
  font:500 13.5px/1.3 ui-monospace,Consolas,"Cascadia Mono",monospace;letter-spacing:.02em;color:#fff;
  background:rgba(12,14,18,.38);padding:5px 10px;border-radius:4px;backdrop-filter:blur(3px);max-width:none}
.nocsky-promise{position:absolute;z-index:3;margin:0;text-align:center;padding:0 16px;top:16%;left:26%;right:16%;
  font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-weight:700;font-size:clamp(30px,3.8vw,56px);line-height:1.04;
  color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.6);max-width:none}
@media (max-width:700px){.nocsky-promise{top:20%;left:0;right:0}}
.nocsky-static ~ .nocsky-promise{color:#011A41;text-shadow:none}
.nocsky .wxl > rect,.nocsky .wxl > g{display:none}
.nocsky[data-wx="cloud"] .wx-cloud,.nocsky[data-wx="rain"] .wx-cloud,.nocsky[data-wx="snow"] .wx-cloud{display:inline;opacity:.34}
.nocsky[data-wx="cloud"] svg.nocsky-svg .face-lit,.nocsky[data-wx="rain"] svg.nocsky-svg .face-lit,.nocsky[data-wx="snow"] svg.nocsky-svg .face-lit,.nocsky[data-wx="fog"] svg.nocsky-svg .face-lit{filter:brightness(.9) saturate(.85)}
.nocsky[data-wx="rain"] .wx-rain{display:inline;opacity:.25}
.nocsky[data-wx="rain"][data-sheet="night"] svg.nocsky-svg .reflections,.nocsky[data-wx="rain"][data-sheet="bluehour"] svg.nocsky-svg .reflections{display:inline;opacity:1}
.nocsky[data-wx="snow"] .wx-snow{display:inline;opacity:.9}
.nocsky[data-wx="snow"] svg.nocsky-svg .crown .roof,.nocsky[data-wx="snow"] svg.nocsky-svg .crown .block{fill:#F3F5F7}
.nocsky[data-wx="fog"] .wx-fog{display:inline}
.nocsky[data-wx="fog"] svg.nocsky-svg .building.dist-far{opacity:.3}
.nocsky[data-sheet] svg.nocsky-svg .wxl rect.wx-cloud{fill:#8D96A0}
.nocsky[data-sheet] svg.nocsky-svg .wxl rect.wx-fog{fill:url(#wx-fog)}
.nocsky[data-sheet] svg.nocsky-svg .wxl .wx-rain rect{fill:url(#wx-rain)}
.nocsky[data-sheet] svg.nocsky-svg .wxl .wx-snow rect{fill:url(#wx-snow)}
.nocsky[data-sheet] svg.nocsky-svg .wxl pattern path{stroke:#DCE6F0;stroke-width:1.6px;stroke-linecap:round}
.nocsky[data-sheet] svg.nocsky-svg .wxl pattern circle{fill:#FFFFFF}
@keyframes nocsky-rain{from{transform:translate(0,0)}to{transform:translate(-15.6px,48px)}}
@keyframes nocsky-snow{from{transform:translate(0,0)}to{transform:translate(12px,60px)}}
.nocsky-motion .nocsky[data-wx="rain"] .wx-rain rect{animation:nocsky-rain .5s linear infinite}
.nocsky-motion .nocsky[data-wx="snow"] .wx-snow rect{animation:nocsky-snow 6s linear infinite}
@media (prefers-reduced-motion: reduce){.nocsky .wxl *{animation:none!important}}
.nocsky-credit{font-size:12px;color:var(--muted);margin:6px auto 0;max-width:1240px;padding:0 16px;text-align:right}
/* presenter mode (?pitch): the scrubber; the "Coming 2027" plans show only here (the owner's call, 30 Sep) */
.nocsky-scrub{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;padding:10px max(16px,calc((100vw - 1240px)/2 + 16px));background:var(--deep);color:var(--on-deep);font-size:14px}
.nocsky-scrub input{width:min(420px,70vw);vertical-align:middle;margin-left:8px;accent-color:#52C4FA}
.nocsky-wxbtns button{font:inherit;font-size:12.5px;margin-right:6px;padding:3px 9px;border-radius:4px;border:1px solid rgba(255,255,255,.35);background:transparent;color:inherit;cursor:pointer}
section[id^="home-whats-next"]{display:none}
.pitch section[id^="home-whats-next"]{display:block}

/* the two doors (Build4 §2) */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:none}
@media (max-width:700px){.doors{grid-template-columns:1fr}}
a.bigdoor{display:grid;gap:8px;padding:28px;border-radius:calc(var(--r) + 4px);text-decoration:none;border:1.5px solid var(--rule);background:var(--panel);color:var(--ink);transition:transform .15s ease,border-color .15s ease}
a.bigdoor:hover,a.bigdoor:focus-visible{transform:translateY(-2px);border-color:var(--accent)}
a.bigdoor b{font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:clamp(30px,3.4vw,42px);line-height:1;color:var(--ink)}
a.bigdoor span{font-size:16px;color:var(--muted);font-weight:400}
a.bigdoor.primary{background:var(--accent);border-color:var(--accent)}
a.bigdoor.primary b,a.bigdoor.primary span{color:var(--accent-ink)}
.doors-sub{margin-top:12px;font-size:15px;color:var(--muted)}

/* the card grid (Build2/Build4's cards, kept exactly: icon, footage slot, frequency, and a hover polish) */
.cardgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;list-style:none;margin:0;padding:0;max-width:none}
@media (max-width:980px){.cardgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cardgrid{grid-template-columns:1fr}}
a.svc{display:grid;gap:12px;align-content:start;background:var(--panel);border:1px solid var(--rule);border-radius:var(--r);padding:22px 22px 20px;color:inherit;text-decoration:none;position:relative;overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background-color .25s ease;font-weight:400}
a.svc h3{font-size:24px;margin:0;color:var(--ink)}
a.svc p{font-size:15.5px;color:var(--muted);margin:0}
a.svc .freq{font-size:13px;color:var(--accent);font-weight:600;letter-spacing:.02em}
a.svc .more{font-size:13.5px;color:var(--accent);font-weight:600;display:inline-block;transition:transform .25s ease}
.svc-icon{width:40px;height:40px;color:var(--accent)}
.svc-icon svg{width:100%;height:100%;display:block}
a.svc::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);opacity:0}
a.svc::before{content:"";position:absolute;left:0;top:0;height:3px;width:0;background:var(--accent);transition:width .35s ease}
a.svc:hover,a.svc:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent);z-index:2}
a.svc:hover::before,a.svc:focus-visible::before{width:100%}
a.svc:hover::after{animation:polish .8s ease-out}
a.svc:hover .more{transform:translateX(4px)}
@keyframes polish{0%{left:-60%;opacity:1}100%{left:130%;opacity:1}}
@media (prefers-color-scheme: dark){:root:not([data-theme="blueprint"]) a.svc::after{background:linear-gradient(100deg,transparent,rgba(143,214,251,.22),transparent)}}
:root[data-theme="skyline"] a.svc::after{background:linear-gradient(100deg,transparent,rgba(143,214,251,.22),transparent)}
a.svc.plain h3::after{content:"\2192";display:inline-block;margin-left:8px;color:var(--accent);opacity:.45;transition:transform .25s ease,opacity .25s ease}
a.svc.plain:hover h3::after{opacity:1;transform:translateX(5px)}
.slot{position:relative;display:grid;place-items:end start;min-height:96px;padding:10px 12px;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,#B9C7D3 0%,#D3DEE8 62%,#9DB4CA 100%);color:#011A41;font-size:12.5px;line-height:1.3}
:root[data-theme="skyline"] .slot{background:linear-gradient(180deg,#1B2433 0%,#1C2A40 62%,#24405F 100%);color:#E9EEF4}
@media (prefers-color-scheme: dark){:root:not([data-theme="blueprint"]) .slot{background:linear-gradient(180deg,#1B2433 0%,#1C2A40 62%,#24405F 100%);color:#E9EEF4}}
.slot::before{content:"Footage slot";position:absolute;top:8px;left:12px;font:600 10.5px/1 ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase;opacity:.7}

/* the "How we work" tiles: a navy band, squeegeed clean as it scrolls in (it is not a link) */
.tiles-band{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--deep);color:var(--on-deep);border-radius:var(--r);overflow:hidden;max-width:none;margin:0;padding:0;list-style:none}
@media (max-width:900px){.tiles-band{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.tiles-band{grid-template-columns:1fr}}
.tile{padding:26px 22px;border-left:1px solid rgba(255,255,255,.12)}
.tile:first-child{border-left:0}
.tile b{display:block;font-family:"Barlow Condensed","Arial Narrow",sans-serif;font-size:26px;font-weight:700;line-height:1.05;color:#fff}
.tile span{display:block;font-size:15px;color:#B9C8D6;margin-top:8px;line-height:1.4}

/* "it gets cleaned": the squeegee, the grime behind a non-link surface, the sparkles, the logo smudge */
.sq{position:absolute;top:-4%;bottom:-4%;left:-18px;width:9px;border-radius:3px;pointer-events:none;opacity:0;z-index:-1;
  background:linear-gradient(90deg,#7F8C9B,#EEF2F6 42%,#B7C2CE 60%,#7F8C9B);box-shadow:0 1px 3px rgba(0,0,0,.35),-14px 0 18px -6px rgba(255,255,255,.55)}
.sq::before{content:"";position:absolute;top:3px;bottom:3px;right:-5px;width:5px;border-radius:0 3px 3px 0;background:#10161E}
.sq::after{content:"";position:absolute;top:50%;right:7px;width:var(--hl,58px);height:10px;margin-top:-5px;border-radius:6px;
  background:linear-gradient(180deg,#1A6FC4,#073775);box-shadow:0 2px 5px rgba(0,0,0,.35);transform-origin:100% 50%;transform:rotate(-28deg)}
@keyframes sq{0%{left:-18px;opacity:0}7%{opacity:1}93%{opacity:1}100%{left:calc(100% + 10px);opacity:0}}
@keyframes degrime{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 0 100%)}}
.brand .mark::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 60% 40% at 30% 35%,rgba(110,95,70,.55),transparent 70%),radial-gradient(ellipse 50% 40% at 70% 70%,rgba(100,88,66,.5),transparent 72%),linear-gradient(rgba(150,140,120,.35),rgba(150,140,120,.35))}
.brand.dirty .mark::before,.brand.wiping .mark::before{opacity:1}
.brand.wiping .mark::before{animation:degrime var(--sqdur,1.8s) cubic-bezier(.42,.08,.58,.92) forwards}
.brand .sq{top:-3px;bottom:-3px;--hl:34px;z-index:2}
.brand.wiping .sq{animation:sq var(--sqdur,1.8s) cubic-bezier(.42,.08,.58,.92) forwards}
.brand .mark .glint{z-index:3}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand .word .l1,.brand .word .l2{background-image:linear-gradient(100deg,currentColor 0 40%,var(--sky) 50%,currentColor 60% 100%);background-size:300% 100%;background-position:100% 0;background-repeat:no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .brand:hover .word .l1,.brand:hover .word .l2,.brand:focus-visible .word .l1,.brand:focus-visible .word .l2{animation:namesweep 1.2s ease-in-out}
  .brand:hover .word .l2{animation-delay:.08s}}
@keyframes namesweep{from{background-position:100% 0}to{background-position:0% 0}}
.grime{position:relative;isolation:isolate;overflow:hidden}
.grime::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(ellipse 40% 28% at 22% 30%,rgba(230,220,200,.16),transparent 70%),radial-gradient(ellipse 32% 24% at 78% 64%,rgba(230,220,200,.14),transparent 72%),radial-gradient(circle at 12% 84%,rgba(230,220,200,.13),transparent 22%),repeating-linear-gradient(118deg,rgba(255,255,255,.05) 0 2px,transparent 2px 10px);
  clip-path:inset(0 0 0 0)}
.grime .sq{top:0;bottom:0}
.grime.cleaning::before{animation:degrime var(--sqdur,2.2s) cubic-bezier(.42,.08,.58,.92) var(--d,0s) forwards}
.grime.cleaning .sq{animation:sq var(--sqdur,2.2s) cubic-bezier(.42,.08,.58,.92) var(--d,0s) forwards}
.glint{position:absolute;width:var(--gs,14px);height:var(--gs,14px);margin:calc(var(--gs,14px) / -2) 0 0 calc(var(--gs,14px) / -2);pointer-events:none;opacity:0;z-index:1}
.glint::before,.glint::after{content:"";position:absolute;background:#fff;border-radius:2px;box-shadow:0 0 6px 1px rgba(255,255,255,.9),0 0 12px 3px rgba(82,196,250,.75)}
.glint::before{left:45%;top:0;width:10%;height:100%}.glint::after{top:45%;left:0;height:10%;width:100%}
.cleaning .glint,.brand.wiping .glint{animation:glint 1s ease-out var(--gd,1s) forwards}
@keyframes glint{0%{opacity:0;transform:scale(.2) rotate(0)}35%{opacity:1;transform:scale(1) rotate(45deg)}65%{opacity:.8;transform:scale(.7) rotate(70deg)}100%{opacity:0;transform:scale(.2) rotate(100deg)}}
@media (prefers-reduced-motion: reduce){.grime::before,.sq,.glint,.brand .mark::before{display:none}a.svc::after{display:none}a.svc,a.bigdoor{transition:none}}

/* the footer: navy, with the mono mark reversed beside the name */
.foot{background:var(--deep);color:#B9C8D6;max-width:none;padding-inline:max(16px,calc((100vw - 1120px)/2 + 16px));border-top:0}
.foot .foot-line{color:#F5F9FD}
.foot a{color:#DCEEFB}
.foot .theme-toggle{color:#F5F9FD;border-color:rgba(255,255,255,.35)}
.flockup{display:flex;align-items:center;gap:14px;margin:4px 0 14px}
.flockup svg.nm{height:52px;width:auto}
.flockup .l1{color:#4DB8FF;font-size:20px}.flockup .l2{color:#fff;font-size:17px}
.flockup .word .l1,.flockup .word .l2{-webkit-text-fill-color:currentColor;background:none}

/* ---- 7 Oct 2026: the top banner stays as the page scrolls; Auto / Day / Blue / Night in it; the skyline zoomed out ---- */
.mast{background:var(--paper);box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax -10px);padding-block:8px 10px}
html{scroll-padding-top:96px}
@media (max-width:700px){html{scroll-padding-top:150px}}
.skymode{display:inline-flex;border:1px solid var(--rule);border-radius:999px;padding:2px;background:var(--panel);gap:2px}
.skymode button{font:600 13px/1 "Source Sans 3",system-ui,sans-serif;letter-spacing:.02em;color:var(--muted);background:transparent;border:0;border-radius:999px;padding:6px 11px;cursor:pointer}
.skymode button:hover{color:var(--ink)}
.skymode button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.skymode button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.nocsky-hero{height:clamp(320px,max(46vh,30vw),820px)}
.phero-sky{height:clamp(130px,19vw,280px)}
@media (max-width:700px){.nocsky-hero{height:clamp(240px,66vw,40vh)}}
/* the banner: logo and the sky buttons on the first row, the menu under them; one row on very wide screens */
.mast{gap:6px 12px}
.mast .skymode{order:1;margin-left:auto}
.mast .nav{order:2;flex-basis:100%;margin-left:0}
html{scroll-padding-top:130px}
@media (min-width:1340px){
  .mast{max-width:1440px}
  .mast .skymode{order:3;margin-left:6px}
  .mast .nav{order:2;flex-basis:auto;margin-left:auto}
  html{scroll-padding-top:110px}
}
@media (max-width:700px){
  .mast{padding-block:6px 4px;gap:4px 8px}
  .skymode button{font-size:11px;padding:5px 5px}
  .mast .brand .mark,.mast .brand .mark svg.nm{height:26px}
  .mast .brand{gap:6px}
  .mast .brand .word{font-size:.74em}
}
.foot [data-theme-toggle]{display:none}   /* the Auto / Day / Blue / Night buttons in the banner replace it */

/* ---- 7 Oct 2026: the skyline banner on every page; the logo bar stays and turns compact as the page scrolls ---- */
.mast{position:sticky;top:0;z-index:60;transition:padding .2s ease}
.mast .brand .mark,.mast .brand .mark svg.nm,.mast .brand .word{transition:height .2s ease,font-size .2s ease}
.bar-slim .mast{padding-block:4px 5px;box-shadow:0 0 0 100vmax var(--paper),0 6px 14px -8px rgba(1,26,65,.35)}
.bar-slim .mast .brand .mark,.bar-slim .mast .brand .mark svg.nm{height:32px}
.bar-slim .mast .brand .word{font-size:.86em}
.nocsky-hero p.nocsky-promise{max-width:none}
@media (prefers-reduced-motion: reduce){.mast,.mast .brand .mark,.mast .brand .mark svg.nm,.mast .brand .word{transition:none}}
@media (max-width:639px){
  .mast .nav{flex-wrap:nowrap;gap:0;justify-content:space-between}
  .mast .nav a,.mast .nav-more summary{padding:0 6px;font-size:15px;min-height:40px;white-space:nowrap}
  .bar-slim .mast .nav a,.bar-slim .mast .nav-more summary{min-height:34px}
  html{scroll-padding-top:120px}
}
@media (max-width:380px){.mast .nav a,.mast .nav-more summary{padding:0 4px;font-size:14px}.mast .skymode button{padding:5px 4px}}