/* 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 time-of-day scrubber */
.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}

/* 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}
.bar-slim .mast{box-shadow:0 0 0 100vmax var(--paper),0 6px 14px -8px rgba(1,26,65,.35)}
.nocsky-hero p.nocsky-promise{max-width: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}
  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}}

/* ---- Slogans, grids and one rhythm (14 Oct 2026, Opus; spec claude/prompt-opus-noc-site-slogans-tighten-2026-10-12.md) ---- */
:root{--gap-sec:28px;--pad-card:20px}
/* one vertical rhythm: every block, grid and pair is one section gap apart; every boxed card has one padding */
main>.blk,main>.gridrun,main>.pairrun{margin:0 0 var(--gap-sec)}
.blk-text,body.page-industries section[id^="ind-"].blk-text{padding:var(--pad-card);margin-bottom:var(--gap-sec)}
a.svc{padding:var(--pad-card)}
/* the slogans: the kicker style, a touch larger where it leads a section */
.kicker.slogan{margin:0 0 8px;font-size:13.5px;letter-spacing:.14em}
.sheet-head .kicker.slogan{margin-bottom:6px}
a.bigdoor .kicker.slogan{margin:0;font-size:11.5px}
.blk-promises .kicker.slogan{margin-bottom:6px}
/* runs of short sections: a grid of equal cards (3 columns, 2, then 1), nothing opens or moves */
.gridrun{display:grid;gap:16px;align-items:stretch}
.gridrun.gcols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gridrun.gcols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.gridrun>.blk-text,body.page-industries .gridrun>section[id^="ind-"].blk-text{margin:0;display:flex;flex-direction:column;min-width:0}
.gridrun>.blk-text h2{font-size:19px}
.gridrun>.blk-text p:last-child{margin-bottom:0}
.gridrun>.blk-text>p:not(:has(>a:only-child))+p:has(>a:only-child){margin-top:auto}
@media (max-width:980px){.gridrun.gcols-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.gridrun.gcols-3,.gridrun.gcols-2{grid-template-columns:1fr}}
/* two sections side by side; when one is hidden the other takes the row */
.pairrun{display:flex;gap:16px;align-items:stretch}
.pairrun>.blk-text{flex:1 1 0;margin:0;min-width:0}
@media (max-width:700px){.pairrun{flex-direction:column}}
/* the door mark inside a card */
.gridrun .door-mark{margin:0 0 6px}
/* footer (older lines, unused since 30 Oct 2026) */
.foot-tri{margin:14px 0 0;font-size:14px;color:#B9C8D6}
.foot-tri a{color:#fff;font-weight:700;margin-right:6px}
.foot-slogan{margin:10px 0 0;font:600 15px/1.2 "Barlow Condensed","Arial Narrow",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#8FA6BC}

/* Services listed once (14 Oct 2026): each picture card carries its own proposal link under it */
.page-services #list .cardgrid>li{display:flex;flex-direction:column;gap:8px}
.page-services #list .cardgrid>li>a.svc{flex:1 1 auto}
.svc-ask{align-self:flex-start;font:600 14.5px/1.3 "Source Sans 3",system-ui,sans-serif;color:var(--accent);padding:4px 2px}
.page-services #list .cardgrid>li .door-mark{margin:0}

/* 20 Oct 2026 (Build E): the real skyline in the banner (noc-window.js). The drawn skyline stays underneath until the
   window is ready and comes back if it fails; ?window=0 keeps it. */
.nocsky .nocwin{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.nocsky.nocwin-on .nocsky-pic{visibility:hidden}

/* 20 Oct 2026 (banner by city): Home's opt-in "From my side of town", under the clock line (noc-window.js). Location is
   asked only on the tap and never leaves the browser. */
.nocwin-pick{position:absolute;right:max(16px,calc((100vw - 1240px)/2 + 16px));top:50px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:6px;max-width:min(320px,70vw)}
.nocwin-me{font:600 13px/1.2 "Source Sans 3",system-ui,sans-serif;color:#fff;background:rgba(12,14,18,.38);border:1px solid rgba(255,255,255,.55);
  padding:6px 12px;border-radius:999px;cursor:pointer;backdrop-filter:blur(3px)}
.nocwin-me:hover,.nocwin-me:focus-visible{background:rgba(12,14,18,.6);outline:2px solid #fff;outline-offset:2px}
.nocwin-me[disabled]{opacity:.7;cursor:progress}
.nocwin-note{margin:0;font:500 12.5px/1.3 "Source Sans 3",system-ui,sans-serif;color:#fff;background:rgba(12,14,18,.5);padding:4px 9px;border-radius:4px;text-align:right}
@media (max-width:700px){.nocwin-pick{top:auto;bottom:10px;right:10px}}
@media (max-width:700px){.nocwin-me{font-size:12px;padding:5px 10px}.nocwin-note{font-size:12px;max-width:62vw}}

/* 20 Oct 2026: the Triolume doorway in the banner, on every page (noc-door.js). Transparent, with a blinking I before
   anyone clicks in it. claude/fable-rule-the-doorway-on-every-page-2026-10-20.md */
.nocdoor{position:absolute;z-index:4;left:26%;right:16%;top:calc(16% + 2.08 * clamp(30px,3.8vw,56px) + 18px);margin:0 auto;max-width:460px;padding:0 16px}
.nocdoor-row{position:relative;display:flex;align-items:center;gap:6px;background:rgba(10,21,32,.42);border:1px solid rgba(160,205,255,.55);
  border-radius:999px;padding:4px 4px 4px 14px;backdrop-filter:blur(4px)}
.nocdoor-mark{flex:0 0 auto;width:20px;height:20px;color:#fff;opacity:.9}
.nocdoor-q{flex:1 1 auto;min-width:0;background:transparent;border:0;outline:0;color:#fff;font:500 16px/1.3 "Source Sans 3",system-ui,sans-serif;padding:7px 4px 7px 10px;caret-color:#fff}
.nocdoor-q::placeholder{color:rgba(255,255,255,.82)}
.nocdoor-i{position:absolute;left:46px;top:50%;width:2px;height:20px;margin-top:-10px;background:#fff;animation:nocdoor-blink 1.1s steps(1) infinite;pointer-events:none}
.nocdoor-q:focus ~ .nocdoor-i,.nocdoor-q:not(:placeholder-shown) ~ .nocdoor-i{display:none}
@keyframes nocdoor-blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.nocdoor-i{animation:none}}
.nocdoor-go{flex:0 0 auto;border:0;border-radius:999px;background:#fff;color:#011A41;font:700 14px/1 "Source Sans 3",system-ui,sans-serif;padding:9px 14px;cursor:pointer}
.nocdoor-go:hover,.nocdoor-go:focus-visible{background:#DCEEFB;outline:2px solid #fff;outline-offset:2px}
.nocdoor-row:focus-within{border-color:#fff;background:rgba(10,21,32,.6)}
.nocdoor-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0 6px}
.nocdoor-chip{border:1px solid rgba(255,255,255,.6);background:rgba(10,21,32,.38);color:#fff;border-radius:999px;padding:5px 11px;
  font:600 13px/1.2 "Source Sans 3",system-ui,sans-serif;cursor:pointer;backdrop-filter:blur(3px)}
.nocdoor-chip:hover,.nocdoor-chip:focus-visible{background:rgba(10,21,32,.65);outline:2px solid #fff;outline-offset:1px}
.nocdoor-note{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:700px){
  .nocdoor{left:0;right:0;top:calc(20% + 2.08 * 30px + 10px);padding:0 12px}
  .nocdoor-q{font-size:16px;padding:6px 4px 6px 8px}
  .nocdoor-i{left:42px}
  .nocdoor-chips{margin:6px 0 0 2px;gap:5px}
  .nocdoor-chip{font-size:12px;padding:4px 9px}
}
@media (max-width:700px){.nocsky-hero:has(.nocdoor-chips){height:clamp(320px,90vw,52vh)}}

/* 20 Oct 2026: the line answers on the page (noc-door.js). The cards open under the banner; Triolume is last and small,
   and opens in a new window. claude/fable-spec-noc-doorway-stays-home-2026-10-20.md */
.nocask{max-width:1240px;margin:14px auto 6px;padding:0 16px}
.nocask-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.nocask-for{margin:0;font:600 15px/1.3 "Source Sans 3",system-ui,sans-serif;color:var(--muted,#4a5868)}
.nocask-x{border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;width:32px;height:32px;font-size:20px;line-height:1;cursor:pointer}
.nocask-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.nocask-card,.nocask-none{border:1px solid rgba(14,90,167,.22);border-radius:12px;padding:16px 18px;background:var(--card,#fff);box-shadow:0 1px 2px rgba(1,26,65,.06)}
.nocask-card h3{margin:2px 0 8px;font-size:19px;line-height:1.25}
.nocask-card p{margin:0 0 8px;line-height:1.5}
.nocask-eyebrow{font:700 11.5px/1 "Source Sans 3",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#0E5AA7;margin:0 0 6px!important}
.nocask-faq{grid-column:span 2}
@media (max-width:700px){.nocask-faq{grid-column:auto}}
.nocask-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0!important}
.nocask-btn{display:inline-block;background:#0E5AA7;color:#fff!important;text-decoration:none;border-radius:999px;padding:9px 16px;font-weight:700}
.nocask-btn:hover,.nocask-btn:focus-visible{background:#011A41;outline:2px solid #0E5AA7;outline-offset:2px}
.nocask-link{font-weight:700}
.nocask-tri{margin:12px 2px 0;font-size:14px;color:var(--muted,#4a5868)}
.nocask-trilink{font-weight:700}
:root[data-theme="skyline"] .nocask-card,:root[data-theme="skyline"] .nocask-none{background:#0f1d33;border-color:rgba(160,205,255,.25)}
:root[data-theme="skyline"] .nocask-eyebrow{color:#9cc8ff}
:root[data-theme="skyline"] .nocask-for,:root[data-theme="skyline"] .nocask-tri{color:#c9d6e6}
main h3.nocask-hit{background:rgba(255,214,102,.35);border-radius:6px;padding:2px 6px;scroll-margin-top:120px}
main h3[id^="q-"]{scroll-margin-top:120px}
.nocdoor-q::-webkit-search-cancel-button,.nocdoor-q::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}

/* 20 Oct 2026: the sky as a dashboard (noc-dash.js; claude/fable-bounce-noc-sky-dashboard-2026-10-20.md). At the top of
   a page the logo bar is dark glass over the skyline; on scroll it folds back into the white bar, as before. */
.has-sky .nocsky-hero{margin-top:calc(-1 * var(--mast-h,0px));padding-top:var(--mast-h,0px);box-sizing:content-box}
.has-sky .nocsky-hero .nocdash-clock{position:absolute;right:max(16px,calc((100vw - 1240px)/2 + 16px));top:calc(var(--mast-h,0px) + 12px);z-index:5}
.has-sky .nocsky-hero .nocdash-clock .nocsky-clock{position:static;cursor:pointer}
.has-sky .nocsky-hero .nocdash-clock .nocsky-clock::after{content:" \25BE";opacity:.8}
.has-sky .nocsky-hero .nocsky-clock:focus-visible{outline:2px solid #fff;outline-offset:2px}
.nocdash-menu{position:absolute;right:0;top:calc(100% + 6px);min-width:220px;background:rgba(10,21,32,.86);border:1px solid rgba(160,205,255,.45);border-radius:10px;padding:10px;backdrop-filter:blur(6px);box-shadow:0 8px 24px rgba(0,0,0,.35);display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.nocdash-menu[hidden]{display:none}
.nocdash-label{margin:0;align-self:flex-start;font:700 11px/1 "Source Sans 3",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9cc8ff}
.nocdash-menu .skymode{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35)}
.nocdash-menu .skymode button{color:#e8f2ff}
.nocdash-menu .skymode button[aria-pressed="true"]{background:#fff;color:#011A41}
.nocdash-menu .nocwin-pick{position:static;max-width:none}
.has-sky .nocsky-promise{top:calc(var(--mast-h,0px) + 14%)}
.has-sky .nocdoor{top:calc(var(--mast-h,0px) + 14% + 2.08 * clamp(30px,3.8vw,56px) + 18px)}
.has-sky .nocwin-pick{top:calc(var(--mast-h,0px) + 50px)}
@media (max-width:700px){
  .has-sky .nocsky-promise{top:calc(var(--mast-h,0px) + 16%)}
  .has-sky .nocdoor{top:calc(var(--mast-h,0px) + 16% + 2.08 * 30px + 10px)}
  .has-sky .nocsky-hero,.has-sky .nocsky-hero:has(.nocdoor-chips){height:clamp(300px,84vw,48vh)}
}
/* the bar at the top: dark glass, white type */
.has-sky:not(.bar-slim) .mast{background:rgba(6,14,26,.5);box-shadow:0 0 0 100vmax rgba(6,14,26,.5);clip-path:inset(0 -100vmax 0)}
.has-sky:not(.bar-slim) .mast .nav a,.has-sky:not(.bar-slim) .mast .nav-more summary{color:#f2f7ff}
.has-sky:not(.bar-slim) .mast .nav a[aria-current],.has-sky:not(.bar-slim) .mast .nav a:hover{color:#fff}
.has-sky:not(.bar-slim) .mast .brand .word .l1{color:#7cc8ff!important;-webkit-text-fill-color:#7cc8ff}
.has-sky:not(.bar-slim) .mast .brand .word .l2{color:#fff!important;-webkit-text-fill-color:#fff}
.has-sky:not(.bar-slim) .mast .brand .word{text-shadow:0 1px 6px rgba(0,0,0,.45)}
/* 30 Oct 2026: the logo keeps its buildings at every size (the rule that hid them over the real logo view caused the flicker) */
/* the sky buttons now live in the clock's drop-down */
.has-sky .mast > .skymode{display:none}
/* the line in the folded bar (wide screens) */
.mast .nocdoor.in-bar{position:static;order:2;flex:0 1 300px;max-width:300px;margin:0 6px 0 14px;padding:0}
.mast .nocdoor.in-bar .nocdoor-row{background:var(--panel,#f2f6fb);border-color:var(--rule,#cdd8e6);padding:2px 2px 2px 10px}
.mast .nocdoor.in-bar .nocdoor-q{color:var(--ink,#011A41);font-size:15px;padding:5px 4px 5px 8px}
.mast .nocdoor.in-bar .nocdoor-q::placeholder{color:var(--muted,#4a5868)}
.mast .nocdoor.in-bar .nocdoor-mark{color:var(--accent,#0E5AA7);width:18px;height:18px}
.mast .nocdoor.in-bar .nocdoor-i{background:var(--ink,#011A41);height:16px;margin-top:-8px;left:38px}
.mast .nocdoor.in-bar .nocdoor-go{background:var(--accent,#0E5AA7);color:#fff;padding:7px 12px}
.mast .nocdoor.in-bar .nocdoor-chips{display:none}
/* Home's chips: only while the line has focus and is empty */
.has-sky .nocdoor-chips{display:none}
.has-sky .nocdoor.show-chips .nocdoor-chips{display:flex}
/* the arrival: the promise's two halves come in on their beats (noc-window.js) */
.nocsky-promise .pr1,.nocsky-promise .pr2{transition:opacity .6s ease}
.nocsky-hero.arriving .pr1,.nocsky-hero.arriving .pr2{opacity:0}
.nocsky-hero.arriving[data-beat="1"] .pr1,.nocsky-hero.arriving[data-beat="2"] .pr1,.nocsky-hero.arriving[data-beat="2"] .pr2{opacity:1}
/* with the line in the folded bar, the longer menu items step into "More" until the screen is very wide */
@media (max-width:1699px){.mast:has(.nocdoor.in-bar) .nav .nav-x{display:none}.mast:has(.nocdoor.in-bar) .nav .nav-more{display:block!important}}
.mast .nocdoor.in-bar{order:3}

/* build #3 (21 Oct 2026): the footer strip (unused since 30 Oct 2026; the footer is below) */
.foot .nocfoot-line{display:flex;align-items:center;gap:12px;max-width:560px;margin:14px 0 6px}
.foot .nocfoot-o{flex:0 0 auto;width:56px;height:56px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;display:grid;place-items:center}
.foot .nocfoot-o svg{width:56px;height:56px;display:block;filter:drop-shadow(0 0 6px rgba(95,208,255,.45))}
.foot .nocfoot-o:focus-visible{outline:2px solid #5fd0ff;outline-offset:3px}
.foot .nocfoot-q{flex:1 1 auto;min-width:0;height:46px;padding:0 14px;border-radius:10px;border:1px solid rgba(95,208,255,.55);background:rgba(255,255,255,.06);color:inherit;font:inherit;font-size:16px}
.foot .nocfoot-q::placeholder{color:rgba(234,246,255,.7)}
.foot .nocfoot-q:focus{outline:0;border-color:#5fd0ff;box-shadow:0 0 0 3px rgba(95,208,255,.2)}
.foot .lxc{display:flex;flex-wrap:wrap;gap:10px}
.foot .lxc .lxc-arc{display:none}
@media (max-width:480px){.foot .nocfoot-o,.foot .nocfoot-o svg{width:44px;height:44px}}

/* ---- 30 Oct 2026 (Opus): the clean effects build. claude: fable-design-noc-site-mocks-and-triolume-logo-2026-10-29.md ---- */
/* The compact header: ONE lockup (buildings + name) that only scales. The bar's height is locked by noc-sky.js, nothing in it
   changes display, visibility or opacity, and the buildings are there at every size. Compact past 120 px, back under 40 px. */
.mast .brand{transform-origin:0 50%;transition:transform .22s ease;will-change:transform}
.bar-slim .mast .brand{transform:scale(.72)}
@media (max-width:700px){.bar-slim .mast .brand{transform:scale(.84)}}
@media (prefers-reduced-motion: reduce){.mast .brand{transition:none}}

/* Ask Nationwide: the label above a clear bar, the blinking cursor until it is clicked */
.nocdoor-ask{max-width:560px}
.nocdoor-ask .nocdoor-label{position:absolute;left:20px;bottom:100%;margin:0 0 7px;font:700 13px/1 "Source Sans 3",system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6),0 0 2px rgba(0,0,0,.5);white-space:nowrap}
.nocdoor-ask .nocdoor-row{background:rgba(10,21,32,.24);border-color:rgba(255,255,255,.62)}
.nocdoor-ask .nocdoor-row:focus-within{background:rgba(10,21,32,.5)}
.nocdoor-ask .nocdoor-field{position:relative;flex:1 1 auto;min-width:0;display:flex}
.nocdoor-ask .nocdoor-q{text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.nocdoor-ask .nocdoor-q::placeholder{color:rgba(255,255,255,.92)}
.nocdoor-ask .nocdoor-i{left:9px}
.has-sky .nocdoor-ask{top:calc(var(--mast-h,0px) + 14% + 2.08 * clamp(30px,3.8vw,56px) + 34px)}
@media (max-width:700px){
  .has-sky .nocdoor-ask{top:calc(var(--mast-h,0px) + 16% + 2.08 * 30px + 26px)}
  .nocdoor-ask .nocdoor-label{left:14px;font-size:12px}
  .nocdoor-ask .nocdoor-q::placeholder{font-size:14px}
}
.mast .nocdoor-ask.in-bar .nocdoor-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0}
.mast .nocdoor-ask.in-bar .nocdoor-row{background:var(--panel,#f2f6fb);border-color:var(--rule,#cdd8e6)}
.mast .nocdoor-ask.in-bar .nocdoor-q{text-shadow:none}
.mast .nocdoor-ask.in-bar .nocdoor-q::placeholder{color:var(--muted,#4a5868)}
.mast .nocdoor-ask.in-bar .nocdoor-i{left:7px}

/* The footer: the company line, "Website by Triolume" with the Triolume mark, the Sheet index */
.foot .tri-by{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:15px}
.foot .tri-mark{flex:0 0 auto;position:relative;width:40px;height:40px;padding:4px;border:0;border-radius:50%;background:none;cursor:pointer;color:inherit;overflow:hidden}
.foot .tri-mark svg{display:block;width:32px;height:32px;filter:drop-shadow(0 0 4px rgba(95,208,255,.45))}
.foot .tri-mark:hover svg,.foot .tri-mark:focus-visible svg{filter:drop-shadow(0 0 7px rgba(95,208,255,.8))}
.foot .tri-mark:focus-visible{outline:2px solid #5fd0ff;outline-offset:2px}
.foot .tri-credit{color:#F5F9FD;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(220,238,251,.4)}
.foot .tri-credit:hover,.foot .tri-credit:focus-visible{border-bottom-color:#5fd0ff;color:#fff}
.foot .foot-tools{margin:12px 0 0;font-size:14px}
/* 390-wide phones: the menu fits even when its current item is set bold (it ran 3 to 13 px past the edge before) */
@media (max-width:420px){.mast .nav a,.mast .nav-more summary{padding:0 4px}}

/* The footer (1 Nov 2026, Opus; the approved mock NOCFooter.dc.html): Ask Nationwide, the links row, WEBSITE BY / TRIOLUME, the
   two-line bottom. Colors and type exactly as the mock (Inter). The 30 Oct footer rules above stay but no page uses them. */
.nfoot{border-top:1px solid #1C222C;background:#0A0D12;color:#E8ECF2;font-family:Inter,system-ui,sans-serif;margin:0;max-width:none}
.nfoot .nf-wrap{max-width:1280px;margin:0 auto;box-sizing:border-box;padding:40px 32px 28px;display:flex;flex-direction:column;gap:32px}
.nfoot a{color:#E8ECF2}.nfoot a:hover{color:#FFFFFF}
.nfoot input,.nfoot button{font-family:inherit}
.nfoot .nf-ask{display:flex;flex-direction:column;gap:10px;margin:0}
.nfoot .nf-label{font-size:13px;letter-spacing:.14em;color:#8A93A3;font-weight:400}
.nfoot .nf-row{display:flex;gap:10px;flex-wrap:wrap}
.nfoot .nf-field{flex:1 1 420px;display:flex;align-items:center;gap:12px;background:#121722;border:1px solid #2A3240;border-radius:14px;padding:0 16px;min-height:56px;box-sizing:border-box}
.nfoot .nf-field:focus-within{border-color:#8A93A3}
.nfoot .nf-field svg{flex:0 0 auto}
.nfoot .nf-q{flex-grow:1;min-width:0;background:transparent;border:0;color:#FFFFFF;font-size:16px;min-height:44px;outline:none;padding:0;-webkit-appearance:none;appearance:none}
.nfoot .nf-q::placeholder{color:#8A93A3;opacity:1}
.nfoot .nf-go{min-height:56px;padding:0 24px;border-radius:14px;border:0;background:#F2B544;color:#1A1200;font-size:16px;font-weight:600;cursor:pointer}
.nfoot .nf-go:focus-visible,.nfoot .nf-chip:focus-visible,.nfoot .nf-tri:focus-visible,.nfoot .nf-links a:focus-visible{outline:2px solid #F2B544;outline-offset:2px}
.nfoot .nf-chips{display:flex;gap:8px;flex-wrap:wrap}
.nfoot .nf-chip{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #2A3240;background:transparent;color:#C9D1DC;font-size:13px;cursor:pointer}
.nfoot .nf-chip:hover{border-color:#8A93A3;color:#FFFFFF}
.nfoot .nf-answer{font-size:13px;color:#8A93A3;min-height:20px}
.nfoot .nf-note{margin:0;font-size:12px;color:#5E6878}
.nfoot .nocask{max-width:none;margin:4px 0 0;padding:0}
.nfoot .nocask-for{color:#C9D1DC;font-family:Inter,system-ui,sans-serif}
.nfoot .nocask-x{color:#C9D1DC;border-color:#2A3240}
.nfoot .nocask-card,.nfoot .nocask-none{background:#121722;border-color:#2A3240;color:#E8ECF2;box-shadow:none}
.nfoot .nocask-card h3{color:#FFFFFF}
.nfoot .nocask-eyebrow{color:#F2B544}
.nfoot .nocask-btn{background:#F2B544;color:#1A1200!important}
.nfoot .nocask-btn:hover,.nfoot .nocask-btn:focus-visible{background:#FFD27A;outline-color:#F2B544}
.nfoot .nf-mid{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-end;border-top:1px solid #1C222C;padding-top:28px}
.nfoot .nf-links{display:flex;flex-wrap:wrap;gap:28px;font-size:14px}
.nfoot .nf-links a{text-decoration:none;min-height:24px}
.nfoot .nf-links a[aria-current="page"]{color:#F2B544}
.nfoot .nf-tri{display:flex;align-items:center;gap:14px;text-decoration:none;color:#E8ECF2;padding:10px 14px 10px 10px;border:1px solid #1C222C;border-radius:14px;min-height:44px;box-sizing:border-box}
.nfoot .nf-tri:hover{border-color:#2A3240}
.nfoot .nf-o{display:block;flex:0 0 auto}
.nfoot .nf-by{display:flex;flex-direction:column;line-height:1.2}
.nfoot .nf-by1{font-size:11px;letter-spacing:.16em;color:#8A93A3}
.nfoot .nf-by2{font-size:16px;font-weight:600;letter-spacing:.1em}
.nfoot .nf-bottom{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12px;color:#5E6878}
@media (max-width:480px){.nfoot .nf-wrap{padding:32px 20px 24px}.nfoot .nf-links{gap:18px 22px}}