/* Page-local composition. Shared brand tokens/components remain in site.css. */
.sd-page{background:var(--surface-light)}
.sd-defs{position:absolute}
.sd-rail{width:100%;max-width:calc(1080px + 2*var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.sd-page .nav-burger{width:44px;height:44px}
/* Expand hit areas without moving the shared pill, mark or wordmark. */
.sd-page .nav-mark-link,.sd-page .nav-word-link{position:relative}
.sd-page .nav-mark-link::after,.sd-page .nav-word-link::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:44px;width:100%;min-width:44px}
/* A paint-only reading boundary keeps ordinary-flow copy from showing around
   or through the floating pill on compact/short screens. It does not change
   section geometry, sticky stages or scroll input. Finish before the shared
   keyboard-focus clearance (nav bottom + 16px). No-JS navigation stays in flow. */
@media screen and (max-width:760px), screen and (max-height:600px){
  .js .sd-page .nav::before{content:"";position:absolute;z-index:-1;pointer-events:auto;left:50%;top:calc(-1*var(--nav-top));transform:translateX(-50%);width:100vw;height:calc(var(--nav-top) + var(--nav-h) + 16px);background:var(--surface-dark);-webkit-mask-image:linear-gradient(#000 calc(100% - 8px),transparent);mask-image:linear-gradient(#000 calc(100% - 8px),transparent);transition:background-color .35s var(--ease-settle)}
  .js .sd-page .nav.nav-light::before{background:var(--surface-light)}
  .js .sd-page .nav .nav-pill,.js .sd-page .nav .nav-menu{background:var(--surface-dark-2)}
  .js .sd-page .nav.nav-light .nav-pill,.js .sd-page .nav.nav-light .nav-menu{background:var(--surface-light)}
}
html:not(.js):not(.sd-boot) .sd-page .nav-burger{display:none}
/* Without scripting, keep the existing section links in normal document flow. */
html:not(.js):not(.sd-boot) .sd-page .nav{position:relative;top:auto;left:auto;transform:none;margin:20px auto}
html:not(.js):not(.sd-boot) .sd-page .nav-menu{position:static;margin-top:8px;opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:none}
.sd-hero{position:relative;isolation:isolate;background:var(--surface-dark);color:var(--text-primary-dark)}
.sd-stage{position:relative}
.sd-scene-content{display:flow-root;width:100%}
.sd-hero-stage{display:flex;flex-direction:column;justify-content:center;min-height:90svh;padding:160px 0 128px;overflow:hidden;isolation:isolate}
.sd-hero-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 90% 70%,rgba(74,82,255,.21),transparent 47%)}
.sd-hero-copy{position:relative;z-index:2}
.sd-category{color:var(--text-muted-dark);margin:0 0 30px;font-size:11px;line-height:1.7}
/* Use a predictable local face while Inter Tight loads, instead of briefly
   substituting the wider Inter face and adding a mobile headline line. */
@font-face{font-family:"SD Hero Fallback";src:local("Arial");size-adjust:100%}
.sd-hero h1{font-family:"Inter Tight","SD Hero Fallback",sans-serif;font-size:clamp(44px,5.8vw,78px);line-height:1.04;letter-spacing:-.025em;max-width:900px;text-wrap:balance}
.sd-hero-lead{font-size:clamp(18px,1.8vw,22px);line-height:1.5;max-width:620px;margin:30px 0 18px;color:var(--text-primary-dark)}
.sd-hero-description{font-size:16px;line-height:1.7;max-width:640px;color:var(--text-secondary-dark);margin:0}
.sd-halo{position:absolute;width:clamp(280px,40vw,560px);aspect-ratio:1;right:-9%;top:20%;border:1px solid rgba(139,124,246,.15);border-radius:50%;color:var(--text-primary-dark);opacity:.12;pointer-events:none;z-index:0}
.sd-halo::before{content:"";position:absolute;inset:9%;border:1px solid currentColor;border-radius:50%;opacity:.25}
.sd-halo svg{position:absolute;inset:20%;width:60%;height:60%;opacity:.65;transform:rotate(-12deg)}
.sd-scroll-cue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 12px;text-decoration:none;color:var(--text-muted-dark);font-size:10px;font-family:var(--font-display);font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.sd-scroll-cue:hover{color:var(--text-primary-dark)}
.sd-cue-line{width:1px;height:32px;background:linear-gradient(to bottom,transparent,currentColor);transform-origin:top}
.js .sd-cue-line{animation:sd-cue-drop 3.2s var(--ease-settle) 1 both}
@keyframes sd-cue-drop{0%{transform:scaleY(.35);opacity:.3}55%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:.55}}
.sd-mobile-break{display:none}
.sd-offering{padding:70px 0 0}
.sd-offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px}
.sd-offer{padding-top:24px;border-top:1px solid var(--border-subtle-light)}
.sd-offer .eyebrow{font-size:10px;color:var(--text-muted-light)}
.sd-offer p{font-family:var(--font-display);font-size:clamp(22px,2.4vw,30px);line-height:1.3;max-width:450px;margin:18px 0 0;letter-spacing:var(--track-display)}
.sd-foundation{font-size:13px;color:var(--text-muted-light);margin:34px 0 0}
.sd-section{padding:clamp(80px,10vw,140px) 0;scroll-margin-top:100px}
/* Only explicit fragment navigation uses the measured first-reading position. */
.sd-page.sd-motion #sources,.sd-page.sd-motion #quality{scroll-margin-top:var(--sd-anchor-margin,100px)}
.sd-section h2{font-size:clamp(34px,4.5vw,56px);line-height:1.09;letter-spacing:-.02em;text-wrap:balance}
.sd-kicker{font-size:10px;margin:0 0 24px;color:var(--text-muted-light)}
.sd-lead{font-size:17px;line-height:1.7;color:var(--text-secondary-light);max-width:680px;margin:30px 0 0}
.sd-flow{list-style:none;margin:52px 0 30px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.sd-flow li{position:relative;border-top:1px solid var(--border-subtle-light);padding:22px 20px 22px 0}
.sd-flow li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:var(--accent-primary);box-shadow:0 0 0 6px var(--surface-light)}
.sd-step{font-family:var(--font-display);font-size:11px;letter-spacing:.12em;color:var(--text-muted-light)}
.sd-flow h3{font-size:23px;line-height:1.3;margin:14px 0 10px}
.sd-flow p{font-size:14px;line-height:1.6;color:var(--text-secondary-light);margin:0}
.sd-note{max-width:690px;font-size:14px;line-height:1.7;color:var(--text-secondary-light);margin:28px 0 0}
.sd-quality{background:var(--surface-dark);color:var(--text-primary-dark);isolation:isolate}
.sd-quality::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 100% 100%,rgba(74,82,255,.16),transparent 60%);pointer-events:none}
.sd-quality .sd-rail{position:relative;z-index:2}
.sd-quality .sd-kicker{color:var(--text-muted-dark)}
.sd-quality .sd-note{color:var(--text-secondary-dark)}
.sd-checks{margin:48px 0 0}
.sd-checks > div{display:grid;grid-template-columns:minmax(200px,.85fr) 1.15fr;gap:30px;padding:24px 0;border-top:1px solid rgba(255,255,255,.2)}
.sd-checks > div:last-child{border-bottom:1px solid rgba(255,255,255,.2)}
.sd-checks dt{display:flex;align-items:baseline;gap:24px;font-family:var(--font-display);font-size:22px;line-height:1.4;font-weight:500}
.sd-checks dt span{font-family:var(--font-body);font-size:11px;letter-spacing:.1em;color:var(--text-muted-dark);font-weight:400}
.sd-checks dd{margin:0;color:var(--text-secondary-dark);font-size:16px;line-height:1.65;align-self:center}
.sd-quality-close{font-family:var(--font-display);font-size:clamp(26px,3.4vw,40px);line-height:1.2;letter-spacing:var(--track-display);margin:54px 0 0;max-width:820px}
.sd-boundary-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px}
.sd-boundary-grid h2{font-size:clamp(30px,3.2vw,42px);max-width:440px;text-wrap:initial}
.sd-body{color:var(--text-secondary-light);font-size:16px;line-height:1.7;margin:26px 0 0}
.sd-boundary-grid .sd-note{font-size:14px}
.sd-evaluation{background:var(--surface-light-2);padding-block:88px}
.sd-evaluation h2{max-width:800px}
/* Evaluation is ordinary flow, not a scroll-motion unit. Do not hide it with
   shared reveal styles only to restore it when the motion controller starts. */
.sd-page .sd-evaluation .reveal{opacity:1;transform:none;transition:none}
.sd-scope{margin-top:36px;max-width:680px;border-block:1px solid var(--border-subtle-light);padding-block:22px}
.sd-scope-title{margin:0 0 14px;font-size:16px;font-family:var(--font-display);font-weight:600}
.sd-scope-body p{font-size:15px;line-height:1.65;color:var(--text-secondary-light);margin:0}
.sd-evaluation-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:30px}
.sd-evaluation-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 22px;border-radius:8px;background:var(--surface-dark);color:var(--text-primary-dark);font-family:var(--font-display);font-size:15px;font-weight:600;text-decoration:none;transition:opacity .14s ease,box-shadow .14s ease}
.sd-evaluation-cta:hover{opacity:.85}
.sd-evaluation-cta:active{opacity:.75;box-shadow:inset 0 0 0 2px rgba(255,255,255,.24);transition-duration:.06s}
.sd-evaluation-email{display:inline-flex;align-items:center;min-height:44px;color:var(--text-secondary-light);font-size:13px;text-underline-offset:4px}
.sd-footer .footer-content{min-height:440px;gap:38px;padding-top:110px}
.sd-footer .footer-collage div{animation:none;opacity:.78}
.sd-footer .footer-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
.sd-local-label{font-size:11px;color:var(--text-muted-dark);margin:0;text-align:center}
@media(min-width:1600px){.sd-hero-stage{min-height:840px}}
@media(max-width:760px){
  .sd-hero-stage{min-height:90svh;padding-top:148px;padding-bottom:128px}
  .sd-hero h1{font-size:clamp(40px,7.5vw,58px)}
  .sd-desktop-break{display:none}
  .sd-offer-grid{gap:34px}
  .sd-flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px}
  .sd-boundary-grid{grid-template-columns:1fr;gap:54px}
  .sd-boundary-grid > div + div{border-top:1px solid var(--border-subtle-light);padding-top:38px}
  .sd-boundary-grid h2{max-width:600px}
  .sd-checks > div{grid-template-columns:1fr;gap:8px;padding:20px 0}
  .sd-checks dd{padding-left:40px}
  .sd-checks dt{font-size:23px;gap:22px}
}
@media(max-width:480px){
  .sd-rail{padding-inline:24px}
  .sd-mobile-break{display:block}
  .sd-category{font-size:10px;letter-spacing:.14em;margin-bottom:24px}
  .sd-hero-stage{padding-top:132px;min-height:100svh}
  .sd-hero h1{font-size:42px;line-height:1.06;letter-spacing:-.025em}
  .sd-hero-lead{font-size:18px;line-height:1.5;margin-top:26px}
  .sd-hero-description{font-size:15px;line-height:1.65}
  .sd-halo{right:-48%;top:32%;opacity:.1}
  .sd-offering{padding-top:50px}
  .sd-offer-grid{grid-template-columns:1fr;gap:30px}
  .sd-offer p{font-size:25px}
  .sd-foundation{margin-top:30px;line-height:1.65}
  .sd-section{padding-block:72px}
  .sd-section h2{font-size:34px}
  .sd-kicker{margin-bottom:20px}
  .sd-lead{font-size:16px;margin-top:24px}
  .sd-flow{margin-top:38px;column-gap:20px;row-gap:18px}
  .sd-flow li{padding-right:0}
  .sd-flow p br{display:none}
  .sd-flow h3{font-size:21px}
  .sd-flow p{font-size:13px}
  .sd-note{font-size:14px}
  .sd-checks{margin-top:34px}
  .sd-checks dd{font-size:15px}
  .sd-quality-close{font-size:29px;margin-top:38px}
  .sd-scope-title{font-size:15px}
  .sd-footer .footer-content{min-height:390px;gap:30px}
}
@media(max-width:350px){
  .sd-rail{padding-inline:20px}
  .sd-hero h1{font-size:38px}
  .sd-section h2{font-size:31px}
  .sd-flow{grid-template-columns:1fr;row-gap:8px}
  .sd-flow li{padding-bottom:20px}
}
/* Match the held hero's visible geometry before fonts/scene measurement.
   Keep these static metrics across motion preferences so browser anchoring
   cannot move the reading position before the preference-change handler.
   No-JS stays unchanged; reduced motion still uses ordinary, unpinned flow. */
@media screen{
  .sd-boot .sd-hero-stage,.js .sd-hero-stage{min-height:100svh;padding-block:100px 112px}
}
/* Sequential arrivals, a full reading hold, then a reversible fade on native release. */
.sd-page.sd-motion main .reveal{opacity:1;transform:none;transition:none}
.sd-page.sd-motion main .sd-motion-unit{opacity:var(--sd-opacity,1);transform:translate3d(0,var(--sd-y,0px),0);transition:none}
.sd-motion .sd-halo{transform:scale(calc(1 + var(--sd-hero-progress,0)*1.05)) rotate(calc(var(--sd-hero-progress,0)*60deg));transform-origin:center}
.sd-motion [data-sd-scene].is-held{height:calc(var(--sd-scene-height) + var(--sd-runway));padding-block:0;overflow:visible}
.sd-motion [data-sd-scene].is-held > .sd-stage{position:sticky;top:0;height:var(--sd-scene-height);min-height:0;display:flex;align-items:center;justify-content:center;padding:100px 0 56px;box-sizing:border-box}
.sd-motion [data-sd-scene].is-held > .sd-stage > .sd-scene-content{opacity:var(--sd-exit-opacity,1);transform:translate3d(0,var(--sd-exit-y,0px),0)}
.sd-motion [data-sd-scene].is-held > .sd-stage > .sd-scene-content:focus-within{opacity:1;transform:none}
/* Fade only the outgoing desktop headings before they cross the nav band.
   Full held reading states, scene timing and mobile choreography are unchanged. */
@media screen and (min-width:761px){
  .sd-motion .sd-hero.is-held h1{opacity:var(--sd-heading-exit-opacity,1)}
  .sd-page.sd-motion [data-sd-scene="quality-proof"].is-held h2.sd-motion-unit{opacity:calc(var(--sd-opacity,1)*var(--sd-heading-exit-opacity,1))}
}
.sd-motion .sd-hero.is-held > .sd-stage{padding-block:100px 112px;overflow:hidden}
.sd-motion [data-sd-scene].is-held > .sd-stage::after{content:"";position:absolute;left:50%;bottom:18px;width:1px;height:28px;background:linear-gradient(to bottom,transparent,currentColor);opacity:calc(var(--sd-cue-progress,0)*.4);transform:scaleY(var(--sd-cue-progress,0));transform-origin:top;pointer-events:none}
.sd-motion .sd-hero.is-held > .sd-stage::after{display:none}
.sd-motion .sd-sources:not(.is-held):has(.is-held),.sd-motion .sd-quality:has(.is-held),.sd-motion .sd-boundaries:not(.is-held):has(.is-held){padding-block:0}
.sd-motion .sd-quality:has(.is-held) [data-sd-scene]:not(.is-held),.sd-motion .sd-sources:not(.is-held):has(.is-held) [data-sd-scene]:not(.is-held){padding-block:72px}
/* Feather only the incoming surface edge, using the existing palette. Held
   text stays at least 100px inside this section, beyond the 80px color bridge.
   This is static paint carried by native scrolling, not a second color timer. */
@media screen{
  .sd-motion .sd-quality:has(> .sd-rail > [data-sd-scene="quality-proof"].is-held){background-image:linear-gradient(to bottom,var(--surface-light),var(--surface-dark) 80px)}
}
.sd-motion [data-sd-scene="sources-process"].is-held .sd-flow{margin-top:0}
.sd-motion [data-sd-scene="quality-result"].is-held .sd-quality-close{margin-top:0}
.sd-motion .sd-boundaries:not(.is-held):has(.is-held) .sd-boundary-grid{grid-template-columns:1fr;gap:0}
.sd-motion .sd-boundary-grid > [data-sd-scene].is-held{border:0;padding:0}
.sd-motion .sd-boundary-grid > [data-sd-scene]:not(.is-held):has(~ .is-held),.sd-motion .sd-boundary-grid > .is-held ~ [data-sd-scene]:not(.is-held){padding-block:72px}
.sd-motion .sd-evaluation{min-height:100svh;display:flex;align-items:center}
.sd-motion .sd-flow li::after,.sd-motion .sd-checks > div::before{content:"";position:absolute;top:-1px;left:0;width:100%;height:1px;background:var(--accent-primary);transform:scaleX(var(--sd-line,0));transform-origin:left;pointer-events:none}
.sd-motion .sd-checks > div{position:relative}
.sd-motion .sd-checks > div::before{background:var(--accent-secondary);opacity:.7}
/* In-place chapters: grid reserves the tallest panel, so the heading never
   shifts as text fades in and out. Semantic list order stays intact for AT. */
.sd-motion .sd-sequence{display:grid;grid-template-columns:minmax(0,1fr);gap:0;max-width:820px}
.sd-motion .sd-sequence > *{grid-area:1 / 1;align-self:start;pointer-events:none}
.sd-motion .sd-flow.sd-sequence{margin-block:38px 28px}
.sd-motion .sd-flow.sd-sequence li{padding:26px 0;min-height:168px}
.sd-motion .sd-flow.sd-sequence li::before{display:none}
.sd-motion .sd-flow.sd-sequence h3{font-size:clamp(30px,3vw,40px);margin:14px 0 12px}
.sd-motion .sd-flow.sd-sequence p{font-size:17px;line-height:1.65}
.sd-motion .sd-flow.sd-sequence p br{display:none}
.sd-motion .sd-checks.sd-sequence > div{grid-template-columns:1fr;gap:20px;padding:26px 0;border-bottom:0}
.sd-motion .sd-checks.sd-sequence dt{font-size:clamp(27px,3vw,38px);gap:24px}
.sd-motion .sd-checks.sd-sequence dd{font-size:clamp(17px,1.6vw,21px);padding-left:40px}
@media(max-width:480px){
  .sd-motion .sd-flow.sd-sequence{margin-block:28px 20px}
  .sd-motion .sd-flow.sd-sequence li{padding:22px 0;min-height:180px}
  .sd-motion .sd-flow.sd-sequence p{font-size:16px}
  .sd-motion .sd-checks.sd-sequence dt{gap:18px;font-size:27px}
  .sd-motion .sd-checks.sd-sequence dd{padding-left:34px}
}
@media(prefers-reduced-motion:reduce){
  .js .sd-page .nav::before{transition:none}
  .sd-cue-line{animation:none!important}
  .sd-evaluation-cta{transition:none}
  .sd-page.sd-motion main .sd-motion-unit{opacity:1;transform:none}
  .sd-motion .sd-halo{transform:none}
  .sd-motion [data-sd-scene].is-held{height:auto}
  .sd-motion [data-sd-scene].is-held > .sd-stage{position:static;height:auto;padding:0;display:block}
  .sd-motion [data-sd-scene].is-held > .sd-stage > .sd-scene-content{opacity:1;transform:none}
  .sd-motion .sd-sequence{display:block}.sd-motion .sd-sequence > *{pointer-events:auto}
}
@media print{
  .sd-page .nav,.sd-scroll-cue,.sd-halo{display:none}
  .sd-page .reveal,.sd-page.sd-motion main .sd-motion-unit{opacity:1!important;transform:none!important}
  .sd-hero-stage{min-height:0;padding:32px 0}.sd-section{padding-block:28px}
  .sd-motion [data-sd-scene].is-held{height:auto}
  .sd-motion [data-sd-scene].is-held > .sd-stage{position:static;height:auto;padding:28px 0;display:block}
  .sd-motion [data-sd-scene].is-held > .sd-stage > .sd-scene-content{opacity:1!important;transform:none}
  .sd-motion [data-sd-scene].is-held > .sd-stage::after{display:none}
  .sd-motion .sd-evaluation{min-height:0}
  .sd-motion .sd-sequence{display:block}.sd-motion .sd-sequence > *{pointer-events:auto}
}