/* Printed charcoal, quiet motion, and one continuous editorial page. */
:root {
  --black:#262825;
  --surface:#30352D;
  --text:#EEEDE4;
  --muted:#B8BFB0;
  --green:#B4CD99;
  --coral:#E6A184;
  --error:#F28D84;
  --rule:#50584A;
  --highlight:#3B4433;
  --bevel-light:#879575;
  --bevel-dark:#171C14;
}
:root[data-theme="light"] {
  --black:#F1F0E7;
  --surface:#E6E8DB;
  --text:#272C24;
  --muted:#5C6655;
  --green:#36583D;
  --coral:#A95039;
  --error:#B33730;
  --rule:#BBC2B0;
  --highlight:#DBE1CE;
  --bevel-light:#FFFDF1;
  --bevel-dark:#8C987E;
}
html { scroll-padding-top:84px; }
body { position:relative; isolation:isolate; }
body::before,body::after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; }
body::before { content:none; }
body::after { position:absolute; background:url('./assets/leonardo-shoulder-neck.jpg') center 43% / cover no-repeat; filter:grayscale(1) contrast(1.6) brightness(1.06) invert(1) sepia(.45) hue-rotate(35deg) saturate(.6); opacity:.04; mix-blend-mode:screen; }
:root[data-theme="light"] body::after { filter:grayscale(1) contrast(1.35) brightness(1.04) sepia(.15) hue-rotate(25deg); opacity:.05; mix-blend-mode:multiply; }
.page { width:min(1600px,calc(100% - 96px)); padding:0 0 82px; }
.site-navigation { position:sticky; top:0; z-index:40; border:0; background:var(--black); }
.topbar-inner { width:min(1600px,calc(100% - 96px)); margin:auto; min-height:62px; display:flex; align-items:center; justify-content:center; }
.section-links { display:flex; align-items:center; justify-content:space-between; gap:40px; width:min(550px,100%); min-width:0; }
.section-links a { position:relative; display:block; padding:18px 0 16px; color:var(--muted); font-size:19px; line-height:1.4; text-decoration:none; white-space:nowrap; }
.section-links a:hover,.section-links a[aria-current="location"] { color:var(--green); }
.section-links a[aria-current="location"]::after { content:''; position:absolute; height:1px; bottom:9px; left:0; right:0; background:var(--coral); }
.masthead { position:relative; min-height:calc(100svh - 62px); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:38px; padding:35px 0 105px; border:0; }
.masthead h1 { font-size:clamp(80px,22.8vw,406px); line-height:.93; letter-spacing:-.065em; transform:translateY(var(--hero-shift,0px)); }
.masthead .tagline-placeholder { margin:0; padding:0; border:0; font-size:clamp(21px,2vw,29px); line-height:1.35; text-align:center; color:var(--muted); }
.hero-scroll { position:absolute; bottom:32px; color:var(--green); display:grid; place-items:center; width:44px; height:44px; transition:transform .2s ease; }
.hero-scroll:hover { transform:translateY(4px); }
.panels { padding:0; min-height:0; }
.panel { position:relative; padding:64px 0; min-height:0; }
.panel + .panel { border:0; }
.section-heading { margin:0 0 28px; color:var(--muted); font-size:24px; line-height:1.2; font-weight:400; font-style:italic; }
#overview { padding-top:48px; }
.overview-copy { gap:0 90px; margin-bottom:0; }
.overview-copy .copy-slot-lead p { font-size:clamp(39px,3.5vw,58px); max-width:21ch; }
.network-comparison { padding-top:0; border:0; }
.product-flow { display:flex; align-items:center; justify-content:center; gap:clamp(12px,1.7vw,28px); margin:26px 0 32px; color:var(--green); font-size:clamp(21px,2.1vw,29px); line-height:1.3; }
.product-flow span { color:var(--muted); font-size:.85em; }
.network-stage { height:clamp(300px,27vw,400px); }
.network-insight { padding-top:18px; }
.network-insight p { max-width:45ch; }
#overview > .context-pair { margin-top:34px; padding-top:28px; border:0; }
#contact { padding-bottom:40px; }
.theme-toggle { z-index:50; background:var(--surface); font-size:15px; }
footer { display:block; padding:25px 110px 0 0; border:0; }
.footer-line { display:flex; justify-content:space-between; gap:24px; }
footer .share-tray { position:static; width:min(420px,100%); max-width:100%; margin-top:25px; padding:20px; border:1px solid var(--rule); }
.motion-ready [data-reveal] { opacity:0; transform:translateY(24px); transition:opacity .75s ease,transform .75s cubic-bezier(.22,.61,.36,1); }
.motion-ready [data-reveal].is-revealed { opacity:1; transform:translateY(0); }
@media(min-width:1700px) { .network-stage { height:400px; } }
@media(max-width:1000px) {
  .page,.topbar-inner { width:calc(100% - 72px); }
  .section-links { width:min(550px,100%); }
  .overview-copy { gap:0 45px; }
  .panel { padding:56px 0; }
  .network-stage { height:306px; }
}
@media(max-width:780px) {
  .section-links { gap:25px; }
  .masthead { gap:30px; }
  .overview-copy { gap:18px 30px; }
  .overview-copy .copy-slot-lead p { font-size:39px; }
  .network-stage { height:280px; }
}
@media(max-width:560px) {
  html { scroll-padding-top:72px; }
  .page,.topbar-inner { width:calc(100% - 40px); }
  .topbar-inner { min-height:54px; }
  .section-links { gap:8px; }
  .section-links a { font-size:16px; padding:17px 0 15px; }
  .section-links a[aria-current="location"]::after { bottom:8px; }
  .masthead { min-height:calc(100svh - 54px); padding:30px 0 105px; gap:25px; }
  .masthead h1 { font-size:22.8vw; }
  .masthead .tagline-placeholder { font-size:22px; max-width:24ch; }
  .hero-scroll { bottom:30px; }
  .panel { padding:44px 0 48px; }
  .section-heading { margin-bottom:24px; font-size:23px; }
  #overview { padding-top:36px; }
  .overview-copy { margin-bottom:0; }
  .overview-copy .copy-slot-lead p { font-size:39px; }
  .network-pair { gap:30px; }
  .network-stage { height:285px; }
  .network-insight { padding-top:11px; }
  #overview > .context-pair { margin-top:25px; padding-top:23px; }
  .product-flow { gap:10px; margin:22px 0 26px; font-size:20px; }
  #contact { padding-bottom:32px; }
  footer { padding-right:0; padding-bottom:54px; }
  .footer-line { gap:15px; font-size:15px; }
  body::after { opacity:.03; }
}
@media(max-width:350px) {
  .page,.topbar-inner { width:calc(100% - 30px); }
  .section-links { gap:4px; }
  .section-links a { font-size:14px; }
  .masthead .tagline-placeholder { font-size:21px; }
  .network-stage { height:265px; }
  .overview-copy .copy-slot-lead p { font-size:35px; }
  .product-flow { gap:8px; font-size:18px; }
}
@media(prefers-reduced-motion:reduce) {
  .masthead h1 { transform:none; }
  .motion-ready [data-reveal] { opacity:1; transform:none; transition:none; }
}

.overview-copy { grid-template-columns:1fr 1.2fr; }
.overview-copy .overview-lead-column .copy-slot-lead { padding-bottom:24px; }
.overview-copy .overview-description { padding:0; min-height:0; }
.overview-description p + p { margin-top:20px; }
@media(max-width:1000px) {
  .overview-copy { grid-template-columns:1fr; row-gap:0; }
  .overview-copy .overview-description { max-width:68ch; }
  .overview-copy > .overview-description { padding-top:20px; }
}
@media(max-width:560px) {
  .overview-copy .overview-lead-column .copy-slot-lead { padding-bottom:20px; }
  .overview-copy > .overview-description { padding-top:18px; }
  .overview-description p + p { margin-top:18px; }
}