/* October feedback: shared identity and editorial sections. Existing theme tokens remain authoritative. */
#siteNav .brand-logo,#siteNav .brand-logo.brand-logo--light { width:134px !important;height:auto !important;max-width:none; }
.brand-logo--dark { filter:brightness(0) invert(1); }
footer .brand-logo,footer .brand-logo.brand-logo--light { width:184px;height:auto;margin:0 0 24px; }
#siteNav .nav-links { gap:clamp(12px,1.15vw,20px); }
#siteNav a.nav-section { font-size:13px; }
.site-footer { padding:80px clamp(24px,5vw,80px) 30px !important;background:var(--bg-surface) !important; }
.site-footer-grid { max-width:1340px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr 1fr .7fr;gap:44px; }
.site-footer-brand p { max-width:26ch;line-height:1.7;color:var(--text-secondary);font-size:15px; }
.site-footer nav { display:flex;flex-direction:column;align-items:flex-start;gap:12px; }
.site-footer nav h3 { font-size:13px;font-weight:500;margin:0 0 8px;color:var(--link-color); }
.site-footer nav a,.site-footer nav button { background:none;border:0;padding:0;color:var(--text-secondary);font-size:14px;text-decoration:none;cursor:pointer;line-height:1.5;text-align:left; }
.site-footer nav a:hover,.site-footer nav button:hover { color:var(--text-primary);text-decoration:underline; }
.site-copyright { max-width:1340px;margin:48px auto 0;padding-top:24px;border-top:1px solid var(--border-default);font-size:12px;color:var(--text-tertiary); }
.editorial-section { padding:clamp(72px,9vw,132px) clamp(24px,5vw,80px);background:var(--bg-default);scroll-margin-top:100px; }
.editorial-wrap { max-width:1340px;margin:auto; }
.editorial-heading { max-width:900px;margin-bottom:56px; }
.section-label { font-size:13px;color:var(--text-secondary);margin-bottom:26px; }
.editorial-heading h2 { font-size:clamp(34px,4.6vw,66px);line-height:1.1;font-weight:400 !important;letter-spacing:-.035em;max-width:22ch; }
.editorial-heading>p:last-child { margin-top:26px;font-size:clamp(17px,1.5vw,21px);line-height:1.65;color:var(--text-secondary);max-width:68ch; }
.editorial-link { color:var(--link-color);text-decoration:underline;text-underline-offset:5px;display:inline-block;margin-top:22px;font-size:15px; }
.compute-layout { display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:center; }
.compute-copy h3 { font-size:28px;margin-bottom:22px;font-weight:400; }
.compute-copy p { font-size:17px;line-height:1.7;color:var(--text-secondary);margin:18px 0; }
/* Actual top-copper geometry, portrait orientation and brief, irregularly spaced signals. */
.compute-visual { position:relative;height:600px;width:100%;transition:height .65s ease; }
.compute-art { --circuit-line:#7d9eaf;--circuit-signal:#a5e8df;position:absolute;left:50%;top:50%;width:240px;transform:translate(-50%,-50%) rotate(-9deg);transition:transform .65s ease,width .65s ease; }
.compute-board { aspect-ratio:27/63;background:var(--circuit-line);opacity:.72;mask:url('../brand/compute/rp2040-board.svg') center/contain no-repeat;-webkit-mask:url('../brand/compute/rp2040-board.svg') center/contain no-repeat; }
.compute-signals { position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible; }
.compute-chain { --signal-delay:-.4s;--signal-cycle:4.7s; }
.compute-chain:nth-child(2) { --signal-delay:-2.2s;--signal-cycle:6.1s; }
.compute-chain:nth-child(3) { --signal-delay:-4.1s;--signal-cycle:7.3s; }
.compute-chain:nth-child(4) { --signal-delay:-1.3s;--signal-cycle:5.3s; }
.compute-chain path { stroke:var(--circuit-signal);stroke-width:.22;stroke-linecap:round;stroke-dasharray:16 100;opacity:0;filter:drop-shadow(0 0 .65px var(--circuit-signal));animation:compute-signal var(--signal-cycle) linear var(--signal-delay) infinite;animation-play-state:paused; }
.compute-chain circle,.compute-component { fill:var(--circuit-signal);stroke:var(--circuit-signal);stroke-width:.3;opacity:0;filter:drop-shadow(0 0 1.3px var(--circuit-signal));animation:compute-fire var(--signal-cycle) ease-out var(--signal-delay) infinite;animation-play-state:paused; }
.compute-chain .compute-origin,.compute-component[data-phase="origin"] { animation-name:compute-origin; }
.compute-art.is-visible .compute-signals path,.compute-art.is-visible .compute-signals circle,.compute-art.is-visible .compute-component { animation-play-state:running; }
.compute-component { fill-opacity:.32;stroke-opacity:.7; }
html[data-theme="light"] .compute-art { --circuit-line:#355b70;--circuit-signal:#237489; }
html[data-theme="light"] .compute-board { opacity:.6; }
/* A trace fires in 140–220ms, followed by a small terminal glow and a long rest. */
@keyframes compute-signal { 0%{stroke-dashoffset:16;opacity:0} .3%{opacity:1} 3%{stroke-dashoffset:-100;opacity:1} 3.8%,100%{stroke-dashoffset:-116;opacity:0} }
@keyframes compute-origin { 0%,9%,100%{opacity:0} .5%{opacity:.95} 2%{opacity:.5} }
@keyframes compute-fire { 0%,2.5%,13%,100%{opacity:0} 3.5%{opacity:1} 5%{opacity:.6} }
@media(max-width:700px){
 .compute-visual { height:clamp(160px,50vw,230px); }
 .compute-art { width:min(160px,calc((100vw - 72px) * .4));transform:translate(-50%,-50%) rotate(81deg); }
}
@media(prefers-reduced-motion:reduce){.compute-art,.compute-visual{transition:none}}
@media(prefers-reduced-motion:reduce){.compute-signals path,.compute-signals circle,.compute-component{animation:none;opacity:0}}
.resolution-visual { display:grid;grid-template-columns:230px 1fr;gap:48px;padding:40px;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:16px; }
.resolution-summary { border-right:1px solid var(--border-strong);padding-right:28px;display:flex;flex-direction:column;justify-content:center; }
.resolution-summary>span { font-size:13px;color:var(--text-secondary); }
.resolution-summary strong { font-size:86px;line-height:1.2;letter-spacing:-.07em;font-weight:300;margin:18px 0; }
.resolution-summary strong small { font-size:18px;letter-spacing:0;color:var(--text-tertiary); }
.resolution-summary p { font-size:15px;line-height:1.6;color:var(--text-secondary); }
.example-label { display:block;margin-top:22px;font-size:11px !important;color:var(--text-tertiary) !important; }
.resolution-toolbar { display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap; }
.resolution-toolbar h3 { font-size:22px;font-weight:400; }
.resolution-toolbar p { margin-top:8px;font-size:13px;color:var(--text-secondary); }
.resolution-switch { display:flex;align-self:flex-start;gap:4px; }
.resolution-switch button { padding:8px 12px;border:1px solid transparent;border-radius:20px;background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer; }
.resolution-switch button[aria-pressed="true"] { border-color:var(--border-strong);background:var(--bg-elevated);color:var(--text-primary); }
.facility-chart { height:220px;display:flex;gap:clamp(4px,1vw,14px);align-items:flex-end;position:relative;margin:34px 0 25px;border-bottom:1px solid var(--border-strong); }
.facility-column { height:100%;flex:1;position:relative;display:flex;align-items:flex-end; }
.facility-bar { display:block;width:100%;height:var(--risk-height);border-radius:4px 4px 0 0;background:var(--risk-color);transform-origin:bottom;transition:height .5s ease,background .4s;transition-delay:var(--delay); }
.facility-column small { position:absolute;bottom:-20px;font-size:9px;color:var(--text-tertiary);width:100%;text-align:center; }
.average-line { position:absolute;left:0;right:0;bottom:var(--average);border-top:1px dashed var(--text-tertiary);z-index:1;pointer-events:none; }
.average-line>span { position:absolute;right:0;top:4px;background:var(--bg-surface);font-size:10px;color:var(--text-secondary);padding:3px; }
[data-resolution-view="company"] .facility-bar { height:var(--average);background:#829aaf; }
.resolution-caption,.chart-key { display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:var(--text-secondary);padding-top:12px; }
.resolution-caption i,.chart-key i { display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px; }
.resolution-takeaway { margin-top:14px;font-size:14px;color:var(--text-primary); }
.resolution-example { margin-top:22px;font-size:13px;line-height:1.6;color:var(--text-secondary); }
#layers .risk-layer-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px; }
#layers .risk-tile { position:relative;isolation:isolate;overflow:hidden;min-height:260px;border:1px solid #a7c7dc26;border-radius:12px;background:linear-gradient(140deg,#608aa52e,#29445624 52%,#56877c1c);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:inset 0 1px 0 #ffffff07,0 6px 24px #00000008;color:var(--text-primary);text-align:left;padding:30px;cursor:pointer; }
.risk-tile img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0;transform:scale(1.04);transition:opacity .22s,transform .45s; }
.risk-tile::after { content:"";position:absolute;inset:0;z-index:-1;background:#0d1b26b8;opacity:0;transition:opacity .22s; }
html[data-theme="light"] .risk-tile::after { background:#ffffffcf; }
.risk-tile-content { display:flex;flex-direction:column;justify-content:center;min-height:198px; }
.risk-tile-title { font-size:clamp(28px,2.35vw,34px);line-height:1.1;letter-spacing:-.035em;font-weight:300;font-style:italic; }
.risk-tile-description { font-size:14px;line-height:1.6;max-height:0;opacity:0;overflow:hidden;transition:max-height .25s,opacity .2s,margin .25s;color:var(--text-secondary); }
.risk-tile[aria-expanded="true"] img,.risk-tile[aria-expanded="true"]::after { opacity:1;transform:scale(1); }
.risk-tile[aria-expanded="true"] .risk-tile-description { max-height:140px;opacity:1;margin-top:18px; }
.risk-tile:focus-visible,.resolution-switch button:focus-visible { outline:2px solid var(--link-color);outline-offset:4px; }
.layer-closing { margin-top:30px;color:var(--text-secondary);font-size:16px;max-width:65ch;line-height:1.7; }
.change-chart { margin:0; }
.change-chart figcaption { font-size:14px;margin:22px 0 14px; }
.change-chart svg { width:100%;height:auto;overflow:visible; }
.change-chart svg>path { fill:none;stroke-width:3;stroke-linecap:round; }
.chart-grid path { fill:none;stroke:var(--border-default);stroke-width:1; }
.chart-labels { fill:var(--text-tertiary);font-family:var(--font-sans);font-size:11px; }
.change-chart>small { display:block;font-size:10px;color:var(--text-tertiary);margin-top:18px; }
@media(max-width:1200px){#layers .risk-layer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.compute-layout{gap:35px}.resolution-visual{grid-template-columns:170px 1fr;gap:30px}.site-footer-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.editorial-heading{margin-bottom:36px}.compute-layout{grid-template-columns:1fr;gap:20px}.resolution-visual{grid-template-columns:1fr;padding:24px;gap:30px}.resolution-summary{border:0;border-bottom:1px solid var(--border-strong);padding:0 0 24px}.resolution-summary strong{font-size:64px;margin:8px 0}.resolution-summary .example-label{margin-top:12px}#layers .risk-layer-grid{gap:12px}#layers .risk-tile{padding:20px;min-height:235px}.risk-tile-content{min-height:190px}.risk-tile-title{font-size:25px}.risk-tile-description{font-size:12px}.site-footer{padding-top:56px !important}.site-footer-grid{gap:32px}.site-footer-brand{grid-column:1/-1}.site-footer nav a,.site-footer nav button{font-size:13px}}
@media(max-width:560px){#layers .risk-layer-grid{grid-template-columns:1fr}#layers .risk-tile{min-height:210px;padding:28px}.risk-tile-content{min-height:150px}.risk-tile-title{font-size:30px}.risk-tile-description{font-size:14px}}
@media(prefers-reduced-motion:reduce){.facility-bar,.risk-tile img,.risk-tile::after,.risk-tile-description{transition:none}}
.delivery-company-row { display:grid;grid-template-columns:minmax(150px,1fr) 2fr;gap:clamp(12px,2vw,32px);padding:20px 0;border-bottom:1px solid var(--border-default);font-size:15px;line-height:1.65; }
.delivery-company-row p:last-child { font-weight:300;color:var(--text-secondary); }

html[data-theme="light"] #layers .risk-tile { background:linear-gradient(140deg,#ffffffa6,#e4edf257 55%,#d6e8e443);border-color:#678ca52e;box-shadow:inset 0 1px 0 #ffffffcc,0 6px 24px #162d4005; }
#layers .risk-tile--summary { cursor:default;display:flex;flex-direction:column;justify-content:center;gap:22px; }
.risk-tile--summary svg { color:var(--link-color);flex:none; }
.risk-tile--summary p { font-size:18px;line-height:1.55;color:var(--text-secondary);margin:0; }
@media(max-width:700px){.risk-tile--summary p{font-size:14px}}

/* Skip link: first focusable element on every page, visible only on keyboard focus. */
.skip-link { position:absolute; left:16px; top:-100px; z-index:10000; padding:10px 18px; border-radius:var(--radius-pill,30px); background:var(--action-primary); color:var(--action-primary-foreground,#0d1b26); font:500 14px/1.4 var(--font-sans); text-decoration:none; }
.skip-link:focus { top:16px; outline:3px solid var(--link-color); outline-offset:2px; }
main:focus { outline:none; }
/* Light mode: tertiary grey is 3.8:1 on the grey resolution panel, below WCAG AA for its small labels.
   #57534e (the brand's light action-secondary-hover) gives 6.0:1 and stays lighter than body text. */
html[data-theme="light"] .resolution-visual { --text-tertiary:#57534e; }

/* Scroll-linked nav (assets/site/nav.js sets --nav-shift, 0 to minus the bar's height).
   The pill is drawn by ::before so it, the logo and the links can move with the page while the
   actions stay pinned. The nav box itself never moves and lets clicks through its empty areas. */
html #siteNav { background: transparent !important; border-color: transparent; box-shadow: none !important;
  -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; }
#siteNav::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--nav-bg); border: 1px solid var(--border-default); box-shadow: 0 2px 8px #0000001a;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transform: translateY(var(--nav-shift, 0px)); }
#siteNav .brand-home, #siteNav .nav-links { transform: translateY(var(--nav-shift, 0px)); }
#siteNav .brand-home, #siteNav .nav-links, #siteNav .nav-actions { pointer-events: auto; }
#siteNav.nav-hidden::before, #siteNav.nav-hidden .brand-home, #siteNav.nav-hidden .nav-links { visibility: hidden; }
#siteNav.nav-shifted .theme-toggle { background: var(--nav-bg); border: 1px solid var(--border-default);
  box-shadow: 0 2px 8px #0000001a; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* Phones: keep Contact Us in the bar. The 1 October redesign hid the nav pill at 600px and below,
   leaving it only inside the menu. It is restored here, with a smaller logo and pill so the bar
   still fits; below 375px the pill reads "Contact" to avoid overflow. Tap target stays 44px. */
@media (max-width: 600px) {
  html #siteNav .nav-cta { display: inline-flex; padding: 0 14px; font-size: 13px; }
  html #siteNav .brand-logo, html #siteNav .brand-logo.brand-logo--light { width: 104px !important; }
}
@media (max-width: 374px) {
  html #siteNav .nav-cta .cta-access { display: none; }
  html #siteNav .brand-logo, html #siteNav .brand-logo.brand-logo--light { width: 92px !important; }
}

/* Phones, once scrolling starts (.nav-shifted): the theme toggle and the menu button fold away and
   Contact Us slides right into their space. Both return when the bar is fully back. */
@media (max-width: 600px) {
  html #siteNav :is(.theme-toggle, #mobileMenuBtn) { transition: width 200ms cubic-bezier(.4,0,.2,1), margin 200ms cubic-bezier(.4,0,.2,1), opacity 160ms ease, visibility 0s linear 0s; }
  html #siteNav.nav-shifted :is(.theme-toggle, #mobileMenuBtn) { width: 0; margin-left: -8px; padding: 0; border-width: 0; opacity: 0; overflow: hidden; visibility: hidden;
    transition: width 200ms cubic-bezier(.4,0,.2,1), margin 200ms cubic-bezier(.4,0,.2,1), opacity 160ms ease, visibility 0s linear 200ms; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) { html #siteNav :is(.theme-toggle, #mobileMenuBtn) { transition: none !important; } }
