/* r4 (checkpoint 2), from checkpoint 1's cp1.css. Type and copy from the previous site (Raleway files only: Regular
   400, SemiBold 600, Bold 700; no Light 300 file exists there, so the 300-weight headings render at 400). Placement from
   the design frames, all nine scenes. */
@font-face{font-family:Raleway;src:url(assets/Raleway-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Raleway;src:url(assets/Raleway-SemiBold.ttf) format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Raleway;src:url(assets/Raleway-Bold.ttf) format('truetype');font-weight:700;font-display:swap}
/* the identity serif (from the Canva wordmark): Antic Didone, SIL OFL 1.1, self-hosted (assets/AnticDidone-OFL.txt) */
@font-face{font-family:'Antic Didone';src:url(assets/AnticDidone-Regular.ttf) format('truetype');font-weight:400;font-display:swap}
:root{--ink:#f3ece1;--ink-head:#f7f1e8;--ink-h1:#f6f0e6;--ink-soft:#e9e2df;--ink-label:#ece4df;--word:#f7f1e8;--ground:#2b2450;
  font-family:Raleway,'Helvetica Neue',Arial,sans-serif;font-synthesis:none;color:var(--ink);background:var(--ground);color-scheme:dark}
body[data-theme=light]{--ink:#2b2450;--ink-head:#241e46;--ink-h1:#241e46;--ink-soft:#3a3260;--ink-label:#241e46;--word:#241e46;--ground:#eee5d4;color-scheme:light}
/* the page itself never scrolls: a fixed surface does (as in R3), so mobile toolbars stay put and the viewport height
   never changes mid-gesture */
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{margin:0;-webkit-text-size-adjust:100%}
a{color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.world{position:fixed;inset:0;overflow:hidden;background:var(--ground);z-index:0}
.world .plate{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none;opacity:0;transition:opacity .25s linear}
.js .stage:not([style]){visibility:hidden}
.world .plate.on{opacity:1}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
#gl.on{opacity:1}

/* design-size stages placed by cp1.js: the landing stage on the world (cover, as the plates and the canvas); the scene
   stages contained so no copy is cropped; the header across the viewport */
.layer{position:fixed;inset:0;pointer-events:none;z-index:3}
.stage{position:absolute;left:0;top:0;transform-origin:0 0}
.layer .stage>*{pointer-events:auto}
main{position:fixed;inset:0;z-index:2;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;scroll-snap-type:y proximity;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
main::-webkit-scrollbar{display:none}
html.nosnap main,html.gliding main{scroll-snap-type:none}
body[data-state=landing] main,body[data-state=opening] main{overflow:hidden}
.js body[data-state=landing] main{visibility:hidden}   /* no flash of the 01 copy before r4.js has set its opacity */
/* checkpoint 4: the scenes are pinned. .pin sticks to the top of the scroller (zero height, so it takes no room) and holds
   all eight scene layers, one viewport each (--vh, set by r4.js); the scroll runs over the empty .snap spacers. .track ends
   after the seventh spacer, so the pin is released at 08 and 08 then scrolls up as the government-contracting block arrives.
   Scenes at rest out of view are .idle: no pointer events (a hidden scene's links never take a click). */
.track{position:relative}
.pin{position:sticky;top:0;height:0;z-index:0}
.snap{height:var(--vh,100vh);scroll-snap-align:start}
/* checkpoint 5: the scene layers themselves take no pointer events (only their links and buttons do). Stacked over one
   another, the last of them (08) caught every click and tap on the in-copy links of 01 to 07. */
.scene{position:absolute;left:0;top:0;width:100%;height:var(--vh,100vh);overflow:hidden;pointer-events:none}
.scene.idle .stage a,.scene.idle .stage button,.hcar a,.hcar button{pointer-events:none!important}
.js .scene .copy,.js .scene .final-logo,.js .scene .final-nav,.js .scene .site-footer,.js .scene .certs-text,.js .scene .sba-08{opacity:0}   /* r4.js fades them in */
.scene .stage{pointer-events:none}.scene .stage a,.scene .stage button{pointer-events:auto}
.fade{transition:opacity .4s linear}

/* header (frame HTML: desktop left/right 58, top 22; phone 20 / 12). Checkpoint 3: on 00 and through the opening the
   header shows only Skip and the theme switch, in their usual places; the rest of it (the chrome: brand, Explore, Pause,
   Replay) fades in with --chrome at the end of the opening, as the whole header did in r4. */
.site-header{position:absolute;display:flex;align-items:center;justify-content:space-between;height:44px;--chrome:0}
body[data-header=on] .site-header{--chrome:1}
.site-header .brand,.site-header .explore,#pause,#replay{opacity:var(--chrome);transition:opacity .3s linear}
body[data-header=off] .site-header .brand,body[data-header=off] .site-header .explore,body[data-header=off] #pause,body[data-header=off] #replay{visibility:hidden}
body[data-state=opening] .site-header .brand,body[data-state=opening] .site-header .explore,body[data-state=opening] #pause,body[data-state=opening] #replay{transition:none}
.brand{font-weight:700;text-decoration:none;color:var(--ink)}
.site-header nav{display:flex;align-items:center;font-weight:400;white-space:nowrap}
.site-header nav button,.explore summary{color:var(--ink);text-decoration:none}
.explore{position:relative}.explore summary{list-style:none;cursor:pointer;text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
.explore summary::-webkit-details-marker{display:none}
/* checkpoint 8: the open menu's left edge lines up with the left of "Explore" (desktop and phone portrait; the
   phone in landscape keeps the right alignment, below); r4.js keeps it inside a 16 px gutter if it would cross an edge */
.explore .menu{position:absolute;left:0;right:auto;top:34px;display:flex;flex-direction:column;gap:12px;padding:16px 18px;background:var(--ground);border:1px solid color-mix(in srgb,var(--ink) 35%,transparent);white-space:nowrap}
.explore .menu a{text-decoration:none}
[data-dev=desktop] .site-header{left:58px;right:58px;top:22px}
[data-dev=desktop] .brand{font-size:20px;letter-spacing:.005em}
[data-dev=desktop] .site-header nav{gap:28px;font-size:14px}
[data-dev=phone] .site-header{left:20px;right:20px;top:12px;gap:12px}
[data-dev=phone] .brand{font-size:17px}
[data-dev=phone] .site-header nav{gap:12px;font-size:13px}

/* 00 landing: Think Peace in the identity serif (the frames' Gilda Display was a stand-in) */
.think{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;color:var(--ink-head)}
body[data-state=opening] .fade{transition:none}
.think .tp{font-family:'Antic Didone',Didot,'Bodoni 72',Georgia,serif;font-weight:400;line-height:1;letter-spacing:.01em;white-space:nowrap;color:var(--ink-head)}
.think .tp-label{font-weight:400;letter-spacing:.08em;white-space:nowrap;color:var(--ink-label)}
[data-dev=desktop] .think{left:303px;top:234px;width:834px;height:437px;gap:14px}
[data-dev=desktop] .think .tp{font-size:64px}[data-dev=desktop] .think .tp-label{font-size:13px}
[data-dev=phone] .think{left:2px;top:322px;width:386px;height:202px;gap:8px}
[data-dev=phone] .think .tp{font-size:30px}[data-dev=phone] .think .tp-label{font-size:11px}
body:not([data-state=landing]) .landing-layer{pointer-events:none}
.landing-layer.gone{display:none}

/* copy blocks (frame HTML positions and sizes) */
.copy{position:absolute;display:flex;flex-direction:column}
.copy h1,.copy h2,.copy p{margin:0}
.copy h1{font-weight:400;line-height:1.1;letter-spacing:-.012em;color:var(--ink-h1)}
.copy h2{font-weight:400;color:var(--ink-head)}
.copy .deck{font-weight:700;color:var(--ink);text-wrap:pretty}
.copy .body{color:var(--ink-soft);text-wrap:pretty}
.links{display:flex;flex-direction:column;align-items:flex-start}
.links a,.final-nav a{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}
a[aria-disabled=true]{cursor:default}
[data-dev=desktop] .c01{left:87px;top:248px;width:548px}
[data-dev=desktop] .c01 h1{margin:0 0 30px;font-size:52px}
[data-dev=desktop] .c01 .deck{margin:0 0 22px;font-size:17px;line-height:1.65}
[data-dev=desktop] .c01 .body{margin:0 0 40px;font-size:17px;line-height:1.7}
[data-dev=desktop] .c01 .links{gap:30px;font-size:16px}
[data-dev=phone] .c01{left:24px;top:262px;width:342px}
[data-dev=phone] .c01 h1{margin:0 0 22px;font-size:32px;line-height:1.12;letter-spacing:-.01em;color:var(--ink-head)}
[data-dev=phone] .c01 .deck{margin:0 0 18px;font-size:16px;line-height:1.6}
[data-dev=phone] .c01 .body{margin:0 0 30px;font-size:16px;line-height:1.65}
[data-dev=phone] .c01 .links{gap:24px;font-size:16px}
.c02{align-items:flex-end;text-align:right}.c02 .links{align-items:flex-end}
.c03{align-items:center;text-align:center}.c03 .links{align-items:center}
.c04{align-items:flex-start;text-align:left}
.mode .kicker{color:var(--ink)}.mode .tagline{color:var(--ink)}
.mode h2{line-height:1.02;letter-spacing:-.015em}
[data-dev=desktop] .c02{left:883px;top:238px;width:470px}
[data-dev=desktop] .c03{left:485px;top:238px;width:470px}
[data-dev=desktop] .c04{left:87px;top:238px;width:470px}
[data-dev=desktop] .mode .kicker{margin:0 0 14px;font-size:22px;line-height:1.3}
[data-dev=desktop] .mode h2{margin:0 0 18px;font-size:88px}
[data-dev=desktop] .mode .tagline{margin:0 0 26px;font-size:25px;line-height:1.3}
[data-dev=desktop] .mode .body{margin:0 0 34px;font-size:17px;line-height:1.7}
[data-dev=desktop] .mode .links{font-size:15px}
[data-dev=phone] .mode{left:24px;top:150px;width:342px}
[data-dev=phone] .mode .kicker{margin:0 0 10px;font-size:18px;line-height:1.3}
[data-dev=phone] .mode h2{margin:0 0 14px;font-size:60px}
[data-dev=phone] .mode .tagline{margin:0 0 18px;font-size:21px;line-height:1.3}
[data-dev=phone] .mode .body{margin:0 0 26px;font-size:16px;line-height:1.65}
[data-dev=phone] .mode .links{font-size:15px}
/* 05 composed with care (centred) and 06 how listening works (left), frame HTML */
.c05{align-items:center;text-align:center}.c05 .links{align-items:center}
.c05 h2,.c06 h2{letter-spacing:-.012em}
[data-dev=desktop] .c05{left:400px;top:262px;width:640px}
[data-dev=desktop] .c05 h2{margin:0 0 28px;font-size:64px;line-height:1.08}
[data-dev=desktop] .c05 .body{margin:0 0 22px;max-width:520px;font-size:18px;line-height:1.7}
[data-dev=desktop] .c05 .body:last-of-type{margin-bottom:34px}
[data-dev=desktop] .c05 .links{font-size:15px}
[data-dev=phone] .c05{left:24px;top:170px;width:342px}
[data-dev=phone] .c05 h2{margin:0 0 20px;font-size:42px;line-height:1.1;letter-spacing:-.01em}
[data-dev=phone] .c05 .body{margin:0 0 16px;font-size:16px;line-height:1.65}
[data-dev=phone] .c05 .body:last-of-type{margin-bottom:26px}
[data-dev=phone] .c05 .links{font-size:15px}
[data-dev=desktop] .c06{left:87px;top:176px;width:560px}
[data-dev=desktop] .c06 h2{margin:0 0 30px;font-size:64px;line-height:1.06}
[data-dev=desktop] .c06 .body{margin:0 0 22px;font-size:18px;line-height:1.7}
[data-dev=desktop] .c06 .body:last-of-type{margin-bottom:38px}
[data-dev=desktop] .c06 .links{font-size:15px}
[data-dev=phone] .c06{left:24px;top:150px;width:342px}
[data-dev=phone] .c06 h2{margin:0 0 22px;font-size:42px;line-height:1.08;letter-spacing:-.01em}
[data-dev=phone] .c06 .body{margin:0 0 16px;font-size:16px;line-height:1.65}
[data-dev=phone] .c06 .body:last-of-type{margin-bottom:26px}
[data-dev=phone] .c06 .links{font-size:15px}
.c07{align-items:center;text-align:center}.c07 .links{align-items:center}
.c07 h2{line-height:1.08;letter-spacing:-.012em}
.c07 .contact{color:var(--ink-soft)}.c07 .copy-email{margin-left:10px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;color:var(--ink)}
.c07 .copy-state{margin-left:8px}
[data-dev=desktop] .c07{left:400px;top:300px;width:640px}
[data-dev=desktop] .c07 h2{margin:0 0 28px;font-size:64px}
[data-dev=desktop] .c07 .body{margin:0 0 18px;max-width:520px;font-size:18px;line-height:1.7}
[data-dev=desktop] .c07 .contact{margin:0 0 34px;font-size:16px;line-height:1.7}
[data-dev=desktop] .c07 .links{font-size:15px}
[data-dev=phone] .c07{left:24px;top:170px;width:342px}
[data-dev=phone] .c07 h2{margin:0 0 20px;font-size:42px;line-height:1.1;letter-spacing:-.01em}
[data-dev=phone] .c07 .body{margin:0 0 16px;font-size:16px;line-height:1.65}
[data-dev=phone] .c07 .contact{margin:0 0 26px;font-size:15px;line-height:1.65}
[data-dev=phone] .c07 .links{font-size:15px}
.final-logo{position:absolute;display:block}
.final-nav{position:absolute;display:flex}
.site-footer{position:absolute;display:flex;flex-wrap:wrap;justify-content:center;column-gap:18px;row-gap:6px;color:var(--ink-soft)}.site-footer p{margin:0}
[data-dev=desktop] .final-logo{left:576px;top:268px;width:288px;height:288px}
[data-dev=desktop] .final-nav{left:0;top:774px;width:1440px;justify-content:center;gap:28px;font-size:16px}
[data-dev=desktop] .site-footer{left:0;top:826px;width:1440px;font-size:13px}
[data-dev=phone] .site-footer{left:24px;top:700px;width:342px;font-size:12px}
/* 08 certifications: a grid of two blocks, the sentence (.certs-text, lettered, with its halo copy laid over it in the
   same cell) and the icons (.sba-08, a plain fade). Desktop: the icons left of the sentence, as at checkpoint 4. */
.certs-08{position:absolute;display:grid;align-items:center;color:var(--ink-soft)}
.certs-08 .certs-text{grid-area:text;margin:0;text-wrap:pretty}
.sba-08{grid-area:icons;display:flex;gap:12px}
[data-dev=desktop] .certs-08{left:380px;top:609px;width:640px;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icons text";column-gap:20px}
[data-dev=desktop] .certs-text{font-size:14px;line-height:1.6}
[data-dev=desktop] .sba-08 img{height:72px}
/* phone 08 (checkpoint 5's order): the logo, the two links in a row just under it, then the sentence and the icons
   below it as one group, centred in the room left above the footer */
[data-dev=phone] .final-logo{left:95px;top:200px;width:200px;height:200px}
[data-dev=phone] .final-nav{left:24px;top:428px;width:342px;justify-content:center;flex-wrap:wrap;column-gap:28px;row-gap:12px;font-size:16px}
[data-dev=phone] .certs-08{left:24px;top:480px;width:342px;grid-template-columns:minmax(0,1fr);grid-template-areas:"text" "icons";row-gap:14px;justify-items:center;text-align:center}
[data-dev=phone] .certs-text{font-size:12.5px;line-height:1.55}
[data-dev=phone] .sba-08 img{height:58px}

/* Certifications (wording per the research brief of 2026-10-21 section 4.2; evidence review: clear). Checkpoint 4: SBA's two icons on 00
   and on 08 as well as in the end block. Every icon is SBA's own PNG at proportional size on the page itself: no plate, no
   crop (the white is the badge's own face; outside its outline the file is transparent), never animated, no halo. 00: the
   icons above the line at the bottom, both leaving with Think Peace as one plain fade. Explore menu: one link after a
   hairline. 08: the certification sentence and the icons; on desktop between the closing logo and the closing navigation,
   the icons to the left of the sentence; on the phone below the navigation, the sentence first, then the icons. */
.cert-wrap{position:absolute;inset:0;pointer-events:none}
/* r12: the line is two sentences (SBA's, then the TVC's), so the icons sit one line (desktop) or two wrapped lines
   (phone) higher than r11's 19 px / 52 px */
.sba-00{position:absolute;left:0;right:0;bottom:calc(18px + 38px + 14px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:14px;pointer-events:none}
.sba-00 img,.sba-08 img{display:block;width:auto;max-width:none}
.sba-00 img{height:84px}   /* checkpoint 8 ("just a tad larger"): 00 only, +17% (r9: 72, phone 58, landscape 44) */
[data-dev=phone] .sba-00{bottom:calc(18px + 85px + 12px + env(safe-area-inset-bottom));gap:12px}
[data-dev=phone] .sba-00 img{height:68px}
.certs-00{position:absolute;left:0;right:0;bottom:calc(18px + env(safe-area-inset-bottom));margin:0 auto;padding:0 24px;max-width:900px;
  text-align:center;font-size:12px;line-height:1.6;letter-spacing:.01em;color:var(--ink-soft);pointer-events:auto}
.certs-00 a{margin-left:18px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;white-space:nowrap}
.certs-00>span:first-child{display:block}   /* r12: SBA's sentence on its own line; the TVC sentence and the link below it */
[data-dev=phone] .certs-00{max-width:330px;font-size:11px;line-height:1.5}
[data-dev=phone] .certs-00 .tvc-line{display:block}
[data-dev=phone] .certs-00 a{display:inline-block;margin:4px 0 0}
/* r12: the Texas Veterans Commission's Veteran-Owned Business seal beside SBA's two icons, as one set. Its own file,
   unaltered (no crop, no plate, no colour change, never animated); like SBA's icons it fades only as a whole with its row.
   Size matched to the SBA icons by the visible badge: TVC's seal is 1076 of its 1276 px tall (transparent margin above and
   below), an SBA icon 1497 of 1513, so the seal's image is 1.1733 x the icons' height (--ih) and its badge is exactly as
   tall as theirs. Negative margins take its transparent margin out of the row's box: the row keeps the icons' height (so
   r11's placement arithmetic holds) and the seal's badge lines up with theirs, top and bottom; on the left, its 32 px
   transparent edge, so the visible gaps match. Every height below is the one the SBA rules set at that size. */
.sba-00{--ih:84px}
[data-dev=phone] .sba-00{--ih:68px}
[data-dev=desktop] .sba-08{--ih:72px}
[data-dev=phone] .sba-08{--ih:58px}
.govcon .sba-icons{--ih:calc(84px * 1513 / 1210)}            /* the end block sizes SBA's icons by width */
[data-dev=phone] .govcon .sba-icons{--ih:calc(70px * 1513 / 1210)}
@media (max-height:640px){[data-dev=desktop] .govcon .sba-icons{--ih:calc(52px * 1513 / 1210)}}
@media (max-height:620px){[data-dev=phone] .govcon .sba-icons{--ih:calc(60px * 1513 / 1210)}}
body:is([data-dev]) :is(.sba-00,.sba-08,.govcon .sba-icons) img.tvc{width:auto;height:calc(var(--ih) * 1.1733);
  margin:calc(var(--ih) * -.0867) 0 calc(var(--ih) * -.0867) calc(var(--ih) * -.0295)}
/* the tx-vob slot of the end block: the TVC sentence, between the registration and the links */
.govcon .govcon-tvc{max-width:600px;margin-top:10px;font-size:14px;line-height:1.6;text-wrap:balance}
[data-dev=phone] .govcon .govcon-tvc{margin-top:8px;font-size:13px}
@media (max-height:640px){[data-dev=desktop] .govcon .govcon-tvc{max-width:680px;margin-top:4px;font-size:13px;line-height:1.5}}
@media (max-height:620px){[data-dev=phone] .govcon .govcon-tvc{margin-top:4px;font-size:12.5px;line-height:1.5}}
.explore .menu .menu-gov{margin-top:4px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
/* the end of the page: a full screen after 08. The world fades to the ground under it (r4.js sets .veil's opacity from
   the scroll); type as the copy's, quiet; the icons are simply present, never animated, straight on that plain ground (both themes; no plate behind them) */
.world .veil{position:absolute;inset:0;background:var(--ground);opacity:0;pointer-events:none}
.govcon{position:relative;z-index:1;height:100%;box-sizing:border-box;scroll-snap-align:start;display:flex;align-items:center;justify-content:center;
  padding:88px max(24px,6.04vw) calc(40px + env(safe-area-inset-bottom));color:var(--ink-soft)}
.govcon.masked{-webkit-mask-image:linear-gradient(to bottom,transparent var(--m0),#000 var(--m1));mask-image:linear-gradient(to bottom,transparent var(--m0),#000 var(--m1))}
/* checkpoint 5: one centred column, its hierarchy in weight and spacing alone. The heading, the sentence (in the body ink)
   and the icons it names sit close as one group; a wider gap, then the registration (lining figures for the identifiers)
   and the two links; a wider gap again, then the note, smallest. On the phone the registration breaks after "registration"
   (the dot that separates them on one line is not drawn at the break). */
.govcon-in{display:flex;flex-direction:column;align-items:center;width:100%;max-width:620px;text-align:center}
.govcon-in p{margin:0}
.govcon h2{margin:0 0 22px;font-size:34px;font-weight:400;line-height:1.15;letter-spacing:-.008em;color:var(--ink-head)}
.govcon .govcon-cert{max-width:600px;font-size:17px;line-height:1.65;color:var(--ink);text-wrap:balance}
.govcon .sba-icons{display:flex;justify-content:center;align-items:flex-start;gap:16px;margin-top:28px}
.govcon .sba-icons img{display:block;width:84px;height:auto}
.govcon .govcon-reg{margin-top:48px;font-size:14px;line-height:1.6;letter-spacing:.02em;font-variant-numeric:lining-nums}
.govcon .govcon-links{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:16px;font-size:16px;line-height:1.6}
.govcon-links a{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px;text-wrap:balance}
.govcon .govcon-note{margin-top:44px;font-size:12.5px;line-height:1.5;letter-spacing:.01em;text-wrap:balance}
.nw{white-space:nowrap}
[data-dev=phone] .govcon{padding:76px 24px calc(28px + env(safe-area-inset-bottom))}
[data-dev=phone] .govcon h2{margin-bottom:18px;font-size:26px}
[data-dev=phone] .govcon .govcon-cert{font-size:15px;line-height:1.6}
[data-dev=phone] .govcon .sba-icons{gap:12px;margin-top:22px}
[data-dev=phone] .govcon .sba-icons img{width:70px}
[data-dev=phone] .govcon .govcon-reg{margin-top:36px;font-size:13px}
[data-dev=phone] .govcon-reg>span{display:block;white-space:nowrap}
[data-dev=phone] .govcon-reg>.govcon-sep{display:none}
[data-dev=phone] .govcon .govcon-links{margin-top:14px;font-size:15px}
[data-dev=phone] .govcon .govcon-note{margin-top:34px;font-size:12px}
/* r12: testimonials, between 08 and the end block, one screen per quote over 08's clouds. r4.js builds the section only
   when assets/testimonials.json lists a quote, so with the shipped empty list nothing here matches. The quote and its
   halo carrier share the screen's one grid cell; the letters' overlay is placed from the screen's top left. */
.tq-screen{position:relative;z-index:1;height:var(--vh,100vh);box-sizing:border-box;scroll-snap-align:start;display:grid;place-items:center;
  padding:88px max(24px,6.04vw) calc(40px + env(safe-area-inset-bottom))}
.tq-screen.masked{-webkit-mask-image:linear-gradient(to bottom,transparent var(--m0),#000 var(--m1));mask-image:linear-gradient(to bottom,transparent var(--m0),#000 var(--m1))}
.tq{grid-area:1/1;margin:0;max-width:820px;text-align:center}
.tq blockquote{margin:0}
.tq blockquote p{margin:0;font-size:clamp(28px,calc(var(--H,900px)*.045),40px);font-weight:400;line-height:1.25;letter-spacing:-.008em;color:var(--ink-head);text-wrap:balance}
.tq figcaption{margin-top:24px;font-size:16px;line-height:1.6;color:var(--ink)}
[data-dev=phone] .tq-screen{padding:76px 24px calc(28px + env(safe-area-inset-bottom))}
[data-dev=phone] .tq blockquote p{font-size:clamp(22px,calc(var(--H,844px)*.032),28px);line-height:1.3}
[data-dev=phone] .tq figcaption{margin-top:18px;font-size:15px}
body[data-fit=land] .tq-screen{padding:calc(var(--hh) + 4px) var(--pr) var(--pb) var(--pl)}
body[data-fit=land] .tq{max-width:720px}
body[data-fit=land] .tq blockquote p{font-size:clamp(20px,calc(var(--H,390px)*.07),30px)}
body[data-fit=land] .tq figcaption{margin-top:var(--g);font-size:14px}
/* short screens (a phone turned sideways takes the desktop path at about 844 x 340 to 390; a low desktop window; a small
   phone under its toolbars): the same column and order, tighter, so it fits under the header (rotation R9 found the full
   column, 486 px, cut off at 844 x 390) */
@media (max-height:640px){
  [data-dev=desktop] .govcon{padding:36px 24px calc(12px + env(safe-area-inset-bottom))}
  [data-dev=desktop] .govcon h2{margin-bottom:10px;font-size:24px}
  [data-dev=desktop] .govcon .govcon-cert{max-width:680px;font-size:14px;line-height:1.5}
  [data-dev=desktop] .govcon .sba-icons{gap:12px;margin-top:12px}
  [data-dev=desktop] .govcon .sba-icons img{width:52px}
  [data-dev=desktop] .govcon .govcon-reg{margin-top:18px;font-size:13px;line-height:1.5}
  [data-dev=desktop] .govcon .govcon-links{gap:0;margin-top:6px;font-size:14px;line-height:1.5}
  [data-dev=desktop] .govcon .govcon-note{margin-top:14px;font-size:11.5px}
}
@media (max-height:620px){   /* r12: the gaps 4 to 6 px tighter for the TVC sentence (320 x 568 overflowed by 8 px) */
  [data-dev=phone] .govcon{padding:64px 24px calc(16px + env(safe-area-inset-bottom))}
  [data-dev=phone] .govcon h2{margin-bottom:12px;font-size:22px}
  [data-dev=phone] .govcon .govcon-cert{font-size:14px;line-height:1.5}
  [data-dev=phone] .govcon .sba-icons{margin-top:12px}
  [data-dev=phone] .govcon .sba-icons img{width:60px}
  [data-dev=phone] .govcon .govcon-reg{margin-top:16px}
  [data-dev=phone] .govcon .govcon-links{gap:4px;margin-top:8px;font-size:14px}
  [data-dev=phone] .govcon .govcon-note{margin-top:14px;font-size:11.5px}
}

/* wordmark: lettering.svg inlined so its letter fill follows the theme */
.wordmark{position:absolute;opacity:0}
.wordmark svg,.fly-word svg{display:block;width:100%;height:100%}
.wordmark g[fill="#ffffff"],.fly-word g[fill="#ffffff"]{fill:var(--word)}
/* the opening's wordmark: takes over from the in-canvas card once the cloud no longer hides any letter, then rides to
   its 01 place (transform only) and hands over to the 01 wordmark on the same frame */
.fly-layer{z-index:2}
.fly-word{position:absolute;left:0;top:0;transform-origin:0 0;opacity:0;will-change:transform,opacity}
body:not([data-state=opening]) .fly-word{display:none}
.skip-link{position:fixed;left:12px;top:-60px;z-index:10;padding:8px 12px;background:var(--ground);color:var(--ink)}
.skip-link:focus{top:12px}
/* checkpoint 5: the landing's tap target shows nothing of itself on a tap or a click (iOS drew its tap highlight, a dark
   oval, over the round button). Keyboard focus draws the cloud's own outline instead (.cloud-ring, index.html): 2 px in
   the heading ink, 8.8:1 or more against the sky under it in both themes. Hidden (display:none) until focus-visible. */
.think{-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.think:focus{outline:none}
.layer .stage>.cloud-ring{position:absolute;left:0;top:0;display:none;overflow:visible;pointer-events:none}
.cloud-ring path{fill:none;stroke:var(--ink-head);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linejoin:round}
[data-dev=desktop] .think:focus-visible~.cloud-ring[data-for=desktop],[data-dev=phone] .think:focus-visible~.cloud-ring[data-for=phone]{display:block}

/* letter-by-letter arrival (letters.js): the overlay of placed letters; the original's glyphs go transparent meanwhile */
.lov{position:absolute;left:0;top:0;width:0;height:0;overflow:visible;pointer-events:none;user-select:none;-webkit-user-select:none}
.lx,.lx *{-webkit-text-fill-color:transparent!important}
@supports (color:color-mix(in srgb,red 50%,blue)){.lx,.lx *{-webkit-text-fill-color:color-mix(in srgb,currentColor calc(var(--lxa,0)*100%),transparent)!important}}

/* checkpoint 3 contrast prototype (?contrast=halo, halo.js): a soft radial halo in the sky's own deep tone (Light: its pale
   tone) behind each run of text, stacked blurred shadows so neighbouring letters merge into one soft cloud of shade; its
   alpha (--ha) is set per element from the plate under it, 0 where the text already reads */
body[data-contrast=halo]{--halo:33 27 63}
body[data-contrast=halo][data-theme=light]{--halo:243 238 236}
/* checkpoint 4: the halo is drawn by each block's carrier (r4.js), a copy just under it with transparent glyphs */
.hcar{z-index:-1;pointer-events:none!important;user-select:none;-webkit-user-select:none}
.hcar,.hcar *{-webkit-text-fill-color:transparent!important;text-decoration-color:transparent!important}
.hcar img,.hcar svg{visibility:hidden}
body[data-contrast=halo] [data-ha]{--hc:rgb(var(--halo)/var(--ha,0));text-shadow:0 0 .1em var(--hc),0 0 .3em var(--hc),0 0 .6em var(--hc),
  0 0 .6em var(--hc),0 0 min(1em,32px) var(--hc),0 0 min(1em,32px) var(--hc),0 0 min(1.6em,44px) var(--hc),0 0 min(2.4em,64px) var(--hc)}
/* checkpoint 5, Firefox and Zen only (html.ff, r4.js; option 1). A scene's halo is its one middle shadow while its
   words form or dissolve, and swells to the full eight as the camera lands (.hfull: the last 0.7 frames of the landing),
   over 0.8 s, easing out like the landing itself. The same eight as above, the middle one first, so the swell only adds:
   the shadows are all one colour, so their order changes nothing drawn. Leaving, the seven go in 0.25 s. */
html.ff body[data-contrast=halo] .scene [data-ha]{text-shadow:0 0 .6em var(--hc);transition:text-shadow .25s linear}
html.ff body[data-contrast=halo] .scene.hfull [data-ha]{text-shadow:0 0 .6em var(--hc),0 0 .1em var(--hc),0 0 .3em var(--hc),0 0 .6em var(--hc),
  0 0 min(1em,32px) var(--hc),0 0 min(1em,32px) var(--hc),0 0 min(1.6em,44px) var(--hc),0 0 min(2.4em,64px) var(--hc);transition:text-shadow .8s cubic-bezier(.22,.61,.36,1)}
/* 08's statement is the one block whose halo copy is itself the halo element; its opacity is set inline with transition
   none (r4.js blockOpacity), which also cancelled the swell, so it popped. Opacity stays instant: it is not listed here. */
html.ff body[data-contrast=halo] .scene .hcar[data-ha]{transition:text-shadow .25s linear!important}
html.ff body[data-contrast=halo] .scene.hfull .hcar[data-ha]{transition:text-shadow .8s cubic-bezier(.22,.61,.36,1)!important}

.hud{position:fixed;left:8px;bottom:8px;z-index:9;margin:0;font:11px/1.35 ui-monospace,Menlo,monospace;color:#fff;background:rgba(0,0,0,.55);padding:6px 8px;pointer-events:none;white-space:pre}
@media (prefers-reduced-motion:reduce){.fade,.think,.site-header,.world .plate{transition:none}}

/* no JavaScript: the full semantic page, each section over its plate (Dark), copy in normal flow */
html:not(.js),html:not(.js) body{overflow:auto;height:auto}
html:not(.js) .world,html:not(.js) .layer:not(.header-layer),html:not(.js) .hud{display:none}
html:not(.js) main{position:static;overflow:visible}
html:not(.js) .scene{min-height:100vh;height:auto;background:var(--ground) center/cover no-repeat;padding:96px 24px 48px;box-sizing:border-box}
html:not(.js) .stage{position:static;max-width:640px}
html:not(.js) .copy,html:not(.js) .final-logo,html:not(.js) .final-nav,html:not(.js) .site-footer{position:static;opacity:1}
html:not(.js) .copy h1,html:not(.js) .copy h2{font-size:44px;margin:0 0 20px}
html:not(.js) .copy p{margin:0 0 16px;font-size:17px;line-height:1.65}
html:not(.js) .links{gap:16px}
html:not(.js) .wordmark{display:none}
html:not(.js) .govcon{height:auto;min-height:100vh;background:var(--ground)}
html:not(.js) .header-layer{position:static}
html:not(.js) .header-layer .stage{position:static;max-width:none}
html:not(.js) .site-header{position:static;opacity:1;padding:16px 24px;gap:16px}
html:not(.js) #skip,html:not(.js) #pause,html:not(.js) #replay,html:not(.js) #theme{display:none}
html:not(.js) #s01{background-image:url(plates/01-intro-desktop-dark@2x.jpg)}
html:not(.js) #s02{background-image:url(plates/02-sharpen-desktop-dark@2x.jpg)}
html:not(.js) #s03{background-image:url(plates/03-realign-desktop-dark@2x.jpg)}
html:not(.js) #s04{background-image:url(plates/04-sleep-desktop-dark@2x.jpg)}
html:not(.js) #s05{background-image:url(plates/05-composed-desktop-dark@2x.jpg)}
html:not(.js) #s06{background-image:url(plates/06-how-listening-works-desktop-dark@2x.jpg)}
html:not(.js) #s07{background-image:url(plates/07-availability-desktop-dark@2x.jpg)}
html:not(.js) #s08{background-image:url(plates/08-finale-desktop-dark@2x.jpg)}

/* Checkpoint 7: the phone in landscape (body[data-fit=land], r4.js layout(): the desktop path on a screen at most 500 px
   tall and 1000 wide; "Text/nav elements are WAY too small, and there's too much negative space"). The copy is
   laid out at its own size in CSS px over the whole viewport (the scene stage is the viewport, unscaled), each scene
   on its frame's side (01, 04 and 06 left; 02 right; 03, 05 and 07 centred) and centred in the height under the header.
   Body text 16 px. Every link and button at least 44 x 44 (padding; inline links in small print keep their line with a
   negative margin). The Dynamic Island's side and the home indicator are kept clear through the safe-area insets, read
   as --sa-* so a test can set them. Headings and spacing follow the height (--H, set by r4.js): Safari's tab bar leaves
   about 283 px, Firefox about 333, no bars 390. */
:root{--sa-l:env(safe-area-inset-left,0px);--sa-r:env(safe-area-inset-right,0px);--sa-b:env(safe-area-inset-bottom,0px)}
body[data-fit=land]{--pl:max(24px,var(--sa-l));--pr:max(24px,var(--sa-r));--pb:max(10px,var(--sa-b));--hh:44px;
  --g:clamp(6px,calc(var(--H,390px)*.034),14px)}
/* header: one 44 px row along the top; the brand and each control a 44 px target */
body[data-fit=land] .site-header{left:calc(var(--pl) - 10px);right:calc(var(--pr) - 10px);top:0;height:var(--hh);gap:8px}
body[data-fit=land] .brand{display:inline-block;padding:0 10px;font-size:18px;line-height:44px}
body[data-fit=land] .site-header nav{gap:0;font-size:15px}
body[data-fit=land] .site-header nav button:not([hidden]),body[data-fit=land] .explore summary{display:inline-block;box-sizing:border-box;min-width:44px;padding:0 10px;line-height:44px;text-align:center}
body[data-fit=land] .explore .menu{left:auto;right:0;top:44px;display:grid;grid-template-rows:repeat(5,44px);grid-auto-flow:column;gap:0 32px;padding:2px 20px;font-size:15px}
body[data-fit=land] .explore .menu a{line-height:44px}
body[data-fit=land] .explore .menu .menu-gov{margin:0;padding:0;line-height:43px}
/* the scenes: the stage is a one-cell grid inside the safe area, under the header; the copy (and its halo carrier, the
   same classes) sits in that cell */
body[data-fit=land] .scene .stage{display:grid;box-sizing:border-box;grid-template:minmax(0,1fr)/minmax(0,1fr);
  padding:calc(var(--hh) + 4px) var(--pr) var(--pb) var(--pl)}
body[data-fit=land] .scene .copy{position:relative;left:auto;top:auto;grid-area:1/1;align-self:center;max-width:100%}
body[data-fit=land] .copy h1,body[data-fit=land] .copy h2{text-wrap:balance}
body[data-fit=land] .copy .body,body[data-fit=land] .copy .deck,body[data-fit=land] .c07 .contact{font-size:16px;line-height:1.5}
body[data-fit=land] .scene .links{font-size:16px}
body[data-fit=land] .scene .links a{line-height:24px;padding:10px 0;margin:-10px 0}
/* 01: the copy left, the wordmark in the room to its right (r4.js placeWord) */
body[data-fit=land] .c01{justify-self:start;width:min(470px,60%)}
body[data-fit=land] .c01 h1{margin:0 0 var(--g);font-size:clamp(26px,calc(var(--H,390px)*.092),34px);line-height:1.12}
body[data-fit=land] .c01 .deck{margin:0 0 calc(var(--g)*.7)}
body[data-fit=land] .c01 .body{margin:0 0 calc(var(--g)*.8)}
body[data-fit=land] .c01 .links{flex-direction:row;flex-wrap:wrap;column-gap:28px}
/* 02 to 04, the modes */
body[data-fit=land] .mode{width:min(500px,72%)}
body[data-fit=land] .c02{justify-self:end}
body[data-fit=land] .c03{justify-self:center}
body[data-fit=land] .c04{justify-self:start;width:min(350px,72%)}
body[data-fit=land] .mode .kicker{margin:0 0 calc(var(--g)*.5);font-size:17px;line-height:1.3}
body[data-fit=land] .mode h2{margin:0 0 calc(var(--g)*.6);font-size:clamp(40px,calc(var(--H,390px)*.15),60px)}
body[data-fit=land] .mode .tagline{margin:0 0 calc(var(--g)*.8);font-size:20px;line-height:1.3}
body[data-fit=land] .mode .body{margin:0 0 calc(var(--g)*.8)}
/* 05 to 07 */
body[data-fit=land] .c05,body[data-fit=land] .c07{justify-self:center;width:min(660px,100%)}
body[data-fit=land] .c06{justify-self:start;width:min(540px,100%)}
body[data-fit=land] .c05 h2,body[data-fit=land] .c06 h2,body[data-fit=land] .c07 h2{margin:0 0 var(--g);font-size:clamp(28px,calc(var(--H,390px)*.1),40px);line-height:1.1}
body[data-fit=land] .c05 .body,body[data-fit=land] .c06 .body,body[data-fit=land] .c07 .body{max-width:none;margin:0 0 calc(var(--g)*.6)}
body[data-fit=land] .c05 .body:last-of-type,body[data-fit=land] .c06 .body:last-of-type{margin-bottom:calc(var(--g)*.8)}
body[data-fit=land] .c07 .contact{margin:0 0 calc(var(--g)*.5)}
/* 06 under Safari's tab bar (under 320 px of height): its two paragraphs side by side, so the column stays in the open sky
   left of the cloud (single, they ran into it: 3.9:1) and the block fits under the header */
@media (max-height:319px){
  body[data-fit=land] .c06{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;width:min(560px,100%)}
  body[data-fit=land] .c06 h2,body[data-fit=land] .c06 .links{grid-column:1/-1}
  body[data-fit=land] .c06 .body,body[data-fit=land] .c06 .body:last-of-type{margin-bottom:calc(var(--g)*.8)}
}
body[data-fit=land] .c07 .contact a,body[data-fit=land] .c07 .copy-email{display:inline-block;line-height:24px;padding:10px 0}
/* 08: the logo left, the navigation, the certifications and the footer to its right */
body[data-fit=land] #s08 .stage{grid-template-columns:auto minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr);column-gap:clamp(28px,5vw,56px)}
body[data-fit=land] .final-logo{position:relative;left:auto;top:auto;grid-column:1;grid-row:1/-1;align-self:center;
  width:min(calc(var(--H,390px) - var(--hh) - 4px - var(--pb) - 8px),220px);height:auto;aspect-ratio:1}
body[data-fit=land] .final-nav{position:relative;left:auto;top:auto;width:auto;grid-column:2;grid-row:2;justify-content:flex-start;flex-wrap:wrap;column-gap:28px;font-size:16px}
body[data-fit=land] .final-nav a{line-height:24px;padding:10px 0}
body[data-fit=land] .certs-08{position:relative;left:auto;top:auto;width:auto;grid-column:2;grid-row:3;margin:calc(var(--g)*.6) 0;
  grid-template-columns:auto minmax(0,1fr);grid-template-areas:"icons text";column-gap:14px;max-width:420px}
body[data-fit=land] .certs-text{font-size:13px;line-height:1.5}
body[data-fit=land] .sba-08{gap:8px}
body[data-fit=land] .sba-08 img{height:48px}
body[data-fit=land] .sba-08{--ih:48px}   /* r12: the TVC seal's size (see the certifications rules) */
body[data-fit=land] .site-footer{position:relative;left:auto;top:auto;width:auto;grid-column:2;grid-row:4;justify-content:flex-start;align-items:center;column-gap:22px;row-gap:0;font-size:13px}
body[data-fit=land] .site-footer a{display:inline-block;line-height:20px;padding:12px 0}
/* 00: Think Peace stays on its cloud (the landing stage, the world's scale); its label and the certification strip in
   CSS px: the two icons left of the line along the bottom */
body[data-fit=land] .think .tp-label{font-size:calc(14px / var(--ws,1))}
body[data-fit=land] .sba-00{left:var(--pl);right:auto;bottom:var(--pb);gap:8px}
body[data-fit=land] .sba-00 img{height:52px}   /* checkpoint 8: +18% (r9 44); the line moves right with the icons (r9 86) */
body[data-fit=land] .sba-00{--ih:52px}
/* r12: the line starts right of three icons (41.6 + 41.6 + the seal's 53.7 less its 1.5 px edge, two 8 px gaps: 151 px; r11 99) */
/* r12: three lines (SBA's sentence, the TVC's, the link) at 1.33 are 51.9 px, within the icons' 52, so the strip is no taller
   than r11's under the cloud (852 x 333 under Safari's tab bar); the link's target stays 44 px (17.3 + 2 x 13.4) */
body[data-fit=land] .certs-00{left:calc(var(--pl) + 159px);right:var(--pr);bottom:var(--pb);margin:0;padding:0;max-width:none;text-align:left;font-size:13px;line-height:1.33}
body[data-fit=land] .certs-00 a{display:inline-block;margin:-13.4px 0 -13.4px 14px;padding:13.4px 0}
/* the end block: two columns (the certification and its icons; the registration, the links and the note) */
body[data-fit=land] .govcon{padding:calc(var(--hh) + 4px) var(--pr) var(--pb) var(--pl)}
body[data-fit=land] .govcon-in{display:grid;max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(28px,5vw,56px);
  grid-template-areas:"h reg" "cert links" "icons note";align-items:start;justify-items:start;text-align:left}
body[data-fit=land] .govcon h2{grid-area:h;margin:0 0 calc(var(--g)*.6);font-size:24px}
body[data-fit=land] .govcon .govcon-cert{grid-area:cert;max-width:none;font-size:16px;line-height:1.5;text-wrap:pretty}
body[data-fit=land] .govcon .sba-icons{grid-area:icons;margin-top:var(--g);gap:10px}
body[data-fit=land] .govcon .sba-icons img{width:44px}
body[data-fit=land] .govcon .sba-icons{--ih:calc(44px * 1513 / 1210)}
body[data-fit=land] .govcon .govcon-reg{grid-area:reg;margin:0;font-size:14px;line-height:1.5}
body[data-fit=land] .govcon-reg>span{display:block}
body[data-fit=land] .govcon-reg>.govcon-sep{display:none}
body[data-fit=land] .govcon .govcon-links{grid-area:links;align-items:flex-start;gap:0;margin:calc(var(--g)*.3) 0 0;font-size:16px;line-height:1.5}
body[data-fit=land] .govcon-links a{display:inline-block;padding:10px 0;text-wrap:pretty}
body[data-fit=land] .govcon .govcon-note{grid-area:note;margin-top:var(--g);font-size:13px}
/* END LAND */

/* REVIEW-ONLY (checkpoint 6, review.js): the A/B tab and panel, r6's rules unchanged. Not in the production build. */
.ab-tab{position:fixed;right:0;top:50%;z-index:8;transform:translateY(-50%);padding:10px 8px;font-size:12px;letter-spacing:.06em;color:var(--ink);
  background:var(--ground);border:1px solid color-mix(in srgb,var(--ink) 40%,transparent);border-right:0}
.ab-panel{max-width:min(420px,calc(100vw - 32px));padding:22px 24px;color:var(--ink);background:var(--ground);border:1px solid color-mix(in srgb,var(--ink) 40%,transparent)}
.ab-panel::backdrop{background:rgb(0 0 0/.45)}
.ab-panel h2{margin:0 0 14px;font-size:17px;font-weight:600}
.ab-panel fieldset{margin:0 0 14px;padding:0;border:0}.ab-panel legend{margin:0 0 6px;font-size:13px;font-weight:600}
.ab-panel label{display:block;margin:0 0 4px;font-size:14px}
.ab-actions{display:flex;gap:18px;margin:6px 0 10px}.ab-actions button{text-decoration:underline;text-underline-offset:5px;font-size:14px}
.ab-note{margin:0;font-size:12px;color:var(--ink-soft)}
body[data-fit=land] .ab-tab{top:auto;bottom:calc(var(--pb) + 40px);right:0;transform:none;min-width:44px;min-height:44px}
/* END REVIEW-ONLY */