*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:#0d0b09;font-family:"Instrument Sans",system-ui,sans-serif}
.page{max-width:1240px;margin:0 auto;background:#f7f1e5;color:#16130d;overflow:hidden;position:relative}
img{display:block;width:100%;height:100%;object-fit:cover}
.sq{display:inline-block;background:#111;color:#fff;padding:16px 30px;font:700 14px "Instrument Sans";text-decoration:none;letter-spacing:.06em;text-transform:uppercase;border:0;cursor:pointer;position:relative;box-shadow:6px 6px 0 #111;outline:1px solid rgba(255,255,255,.35);outline-offset:-6px;transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s cubic-bezier(.16,1,.3,1),outline-offset .25s ease,background .25s ease}
.sq:hover{transform:translate(-3px,-3px);box-shadow:10px 10px 0 #e75480;outline-offset:-3px}
.sq:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #111}
.sq .arr{display:inline-block;margin-left:10px;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.sq:hover .arr{transform:translateX(5px)}
.sq.gold{background:#e8a317;color:#16130d;outline-color:rgba(17,17,17,.4)}
.sq.gold:hover{box-shadow:10px 10px 0 #111}
.sq.light{background:#fff;color:#000;outline-color:rgba(17,17,17,.35)}
.sq.light:hover{box-shadow:10px 10px 0 #e75480}
.mono{font:600 11.5px "IBM Plex Mono";letter-spacing:.22em;text-transform:uppercase}
:focus-visible{outline:3px solid #111111;outline-offset:3px;box-shadow:0 0 0 6px #f7f1e5}
.progress{position:fixed;top:0;left:0;height:4px;z-index:80;width:0;background:linear-gradient(90deg,#e75480 0 33%,#e8a317 33% 66%,#7ea6c9 66% 100%)}
.stickynav{position:sticky;top:0;z-index:70;background:#0d0b09;color:#f7f1e5;display:flex;justify-content:space-between;align-items:center;padding:12px 26px}
.stickynav .wm{font:900 16px "Instrument Sans"}.stickynav .wm i{font-style:normal;color:#e75480}
.stickynav nav{display:flex;gap:20px;font:600 11.5px "IBM Plex Mono";letter-spacing:.12em}
.stickynav nav a{color:#f7f1e5;text-decoration:none;opacity:.85}
.stickynav .sq{padding:10px 18px;font-size:12px;background:#000;color:#fff;box-shadow:none;outline:none;border:1px solid rgba(255,255,255,.4);border-left:2px dashed #e8a317;font-family:"IBM Plex Mono";letter-spacing:.1em}
.stickynav .sq:hover{transform:none;box-shadow:none;background:#c93363}
.hero{position:relative;height:780px;color:#fff;background:#000;overflow:hidden}
.hero .kb{position:absolute;inset:0;animation:kb 24s ease-in-out infinite alternate}
.hero .kb img{opacity:.95}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.09) translateY(-8px)}}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 3px)}
.shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 32%,transparent 55%,rgba(0,0,0,.76))}
.topline{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;padding:26px 38px;z-index:3}
.title{position:absolute;left:0;right:0;bottom:124px;text-align:center;padding:0 28px;z-index:3}
.title h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:480;font-size:102px;line-height:1.0;margin-top:16px}
.title h1 em{font-style:italic;font-weight:340;background:linear-gradient(92deg,#ffd98a 20%,#ffb35c 55%,#ff8a7a 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rise{opacity:0;transform:translateY(26px);animation:rise 1.1s cubic-bezier(.2,.7,.2,1) forwards}
.rise.d1{animation-delay:.25s}.rise.d2{animation-delay:.55s}.rise.d3{animation-delay:.95s}
@keyframes rise{to{opacity:1;transform:none}}
.credits{position:absolute;left:0;right:0;bottom:0;padding:20px 38px 26px;display:flex;justify-content:space-between;gap:18px;font:600 11px "Instrument Sans";letter-spacing:.07em;text-transform:uppercase;border-top:1px solid rgba(255,255,255,.3);z-index:3}
.scrollcue{position:absolute;right:38px;bottom:86px;z-index:3;font:600 10.5px "IBM Plex Mono";letter-spacing:.3em;writing-mode:vertical-rl;opacity:.85;animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
.rv{opacity:0;transform:translateY(30px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.marquee{background:#111;color:#f7f1e5;overflow:hidden;padding:20px 0;border-top:4px dashed #3a3a3a;border-bottom:4px dashed #3a3a3a}
.marquee:hover .track{animation-play-state:paused}
.marquee .track{display:flex;gap:54px;white-space:nowrap;width:max-content;animation:mq 36s linear infinite;font-family:"Bricolage Grotesque",sans-serif;font-style:italic;font-weight:400;font-size:30px}
.marquee .track b{font-style:normal;font-weight:560;color:#e8a317}
@keyframes mq{to{transform:translateX(-50%)}}
.statement{display:grid;grid-template-columns:46% 54%;min-height:620px}
.plane{background:#e75480;color:#fff;padding:58px 48px;display:flex;flex-direction:column;justify-content:space-between;gap:32px}
.plane h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:560;font-size:72px;line-height:.99}
.plane h2 em{font-style:italic;font-weight:340}
.plane p{font-size:19px;font-weight:500;line-height:1.6;max-width:380px;margin-top:22px}
.arch{position:relative;overflow:hidden}
.arch::before{content:"";position:absolute;left:0;top:0;bottom:0;width:24px;background:#e8a317;z-index:2}
.arch img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.arch:hover img{transform:scale(1.04)}
section{padding:62px 48px 68px}
.sec-head{display:flex;align-items:baseline;gap:18px;position:relative}
.sec-head .ghost{position:absolute;right:0;top:-58px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:150px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(22,19,13,.14);pointer-events:none;user-select:none}
.scenes .ghost,.voices .ghost,.work .ghost{-webkit-text-stroke:1.5px rgba(247,241,229,.16)}
.sec-head .no{font:600 12px "IBM Plex Mono";letter-spacing:.2em;color:#b5502a}
.sec-head h2{font-family:"Bricolage Grotesque",sans-serif;font-size:38px;font-weight:560}
.lede{font-size:15.5px;color:#5c5546;max-width:580px;line-height:1.6;margin-top:8px}
.begin{background:#fdfaf2;border-top:3px solid #111}
.choices{display:flex;margin-top:28px;border:3px solid #111;max-width:860px}
.choice{flex:1;background:#fff;border:0;border-right:3px solid #111;padding:20px 18px;font:700 15px "Instrument Sans";cursor:pointer;text-align:left}
.choice:last-child{border-right:0}
.choice small{display:block;font:600 10.5px "IBM Plex Mono";letter-spacing:.16em;color:#6e6759;margin-bottom:8px;text-transform:uppercase}
.choice.sel{background:#111;color:#ffd98a}
.choice.sel small{color:#e8a317}
.choice.sel.c1{background:#7ea6c9;color:#0d2136}.choice.sel.c1 small{color:#0d2136}
.choice.sel.c2{background:#e8a317;color:#16130d}.choice.sel.c2 small{color:#16130d}
.choice.sel.c3{background:#c93363;color:#fff}.choice.sel.c3 small{color:#ffe1ec}
.begin-out{margin-top:22px;font-family:"Bricolage Grotesque",sans-serif;font-size:25px;line-height:1.4;max-width:720px;min-height:70px}
.begin-out em{color:#b5502a}
.scenes{background:#0a0a0a;color:#fff}
.scenes .no{color:#e8a317}
.scene{display:grid;grid-template-columns:52% 48%;margin-top:40px;align-items:stretch}
.scene.flip{grid-template-columns:48% 52%}
.scene figure{height:350px;overflow:hidden}
.scene figure img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.scene:hover figure img{transform:scale(1.045)}
.scene .txt{padding:38px 42px;display:flex;flex-direction:column;justify-content:center}
.scene .txt b{font:600 11.5px "IBM Plex Mono";letter-spacing:.2em;color:#e8a317}
.scene .txt h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:480;font-size:41px;margin:12px 0 10px}
.scene .txt p{font-size:15px;line-height:1.65;color:#c9c9c9;max-width:420px}
.stage{display:grid;grid-template-columns:62% 38%;margin-top:30px;background:#111;color:#fff}
.stage figure{height:520px;overflow:hidden}
.stage figure img{animation:fadein .7s ease,kb 26s ease-in-out infinite alternate}
@keyframes fadein{from{opacity:.35}to{opacity:1}}
.stage .cap{padding:36px 34px;display:flex;flex-direction:column;justify-content:flex-end}
.stage .cap h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:520;font-size:44px;line-height:1.05}
.stage .cap p{font-size:14.5px;line-height:1.65;color:#cfc8b8;margin-top:12px;max-width:300px}
.stage .cap .mono{color:#e8a317;margin-bottom:14px}
.cityrail{display:flex;border:3px solid #111;border-top:0}
.citybtn{flex:1;background:#fdfaf2;border:0;border-right:3px solid #111;padding:16px 10px;font:700 14.5px "Instrument Sans";cursor:pointer}
.citybtn:last-child{border-right:0}
.citybtn.sel{background:#c93363;color:#fff}
.tools{background:#f6cf6b;border-top:3px solid #111;margin-top:-44px;position:relative;z-index:6;box-shadow:0 16px 30px rgba(10,8,6,.22)}
.toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:3px solid #111;margin-top:32px;background:#fdfaf2}
.tool{padding:30px 26px;border-right:3px solid #111}
.tool:last-child{border-right:0}
.tool .fig{font-family:"Bricolage Grotesque",sans-serif;font-size:52px;font-weight:560;line-height:1}
.tool h4{font-family:"Bricolage Grotesque",sans-serif;font-size:24px;font-weight:560;margin-top:16px}
.tool p{font-size:14px;line-height:1.6;color:#4c4636;margin-top:8px}
.tool a{display:inline-block;margin-top:16px;font:700 12.5px "Instrument Sans";letter-spacing:.06em;text-transform:uppercase;color:#b5502a;text-decoration:none;border-bottom:2px solid #b5502a;padding-bottom:2px}
.shelf{background:#fdfaf2}
.shelfrow{display:grid;grid-template-columns:1fr auto auto;gap:26px;align-items:baseline;padding:20px 6px;border-bottom:2px solid #111}
.shelfrow:first-of-type{border-top:3px solid #111;margin-top:30px}
.shelfrow h4{font-family:"Bricolage Grotesque",sans-serif;font-size:27px;font-weight:560}
.shelfrow h4 small{display:block;font:500 13px "Instrument Sans";color:#6b6350;margin-top:4px}
.shelfrow .pp{font:600 12px "IBM Plex Mono";letter-spacing:.1em;color:#6b6350}
.shelfrow .pr{font-family:"Bricolage Grotesque",sans-serif;font-size:30px;font-weight:560}
.shelfrow.flag{background:#111;color:#f7f1e5;padding:24px 18px}
.shelfrow.flag h4 small{color:#cfc8b8}
.shelfrow.flag .pr{color:#ffd98a}
.shelf-note{margin-top:20px;font-size:14.5px;line-height:1.65;color:#4c4636;max-width:680px}
.voices{background:#e75480;color:#fff}
.voices .no{color:#fff}
.voice{margin-top:36px;max-width:880px}
.voice blockquote{font-family:"Bricolage Grotesque",sans-serif;font-weight:480;font-size:37px;line-height:1.25}
.voice blockquote em{font-style:italic}
.voice figcaption{margin-top:12px;font:600 11.5px "IBM Plex Mono";letter-spacing:.18em;text-transform:uppercase;background:#c93363;color:#fff;display:inline-block;padding:7px 11px}
.voices .tp{margin-top:44px;background:#c93363;padding:16px 20px;font-size:13.5px;line-height:1.6}
.work{background:#111;color:#f7f1e5;display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.work h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:520;font-size:48px;line-height:1.08}
.work h3 em{font-style:italic;color:#ffd98a}
.work p{font-size:15.5px;line-height:1.65;color:#cfc8b8;margin-top:16px;max-width:480px}
.priceblock{border-left:3px solid #e75480;padding-left:34px}
.priceblock .big{font-family:"Bricolage Grotesque",sans-serif;font-size:92px;font-weight:560;line-height:1}
.priceblock .big sup{font-size:34px}
.guarantee{display:flex;gap:14px;align-items:center;margin-top:20px}
.guarantee .seal{width:64px;height:64px;flex:none;border:2px solid #e8a317;border-radius:50%;color:#e8a317;display:flex;align-items:center;justify-content:center;text-align:center;font:600 9px "IBM Plex Mono";letter-spacing:.08em;line-height:1.5;transform:rotate(-8deg);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.guarantee:hover .seal{transform:rotate(8deg) scale(1.08)}
.faq{background:#fdfaf2}
details{border-bottom:2px solid #111;padding:20px 4px}
details:first-of-type{border-top:3px solid #111;margin-top:28px}
summary{font-family:"Bricolage Grotesque",sans-serif;font-size:24px;font-weight:560;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:"Instrument Sans";font-weight:700;color:#b5502a}
details[open ] summary::after{content:"-"}
details p{font-size:15px;line-height:1.65;color:#4c4636;max-width:680px;margin-top:10px}
.capture{position:relative;color:#fff;padding:0;height:430px;overflow:hidden}
.capture img{position:absolute;inset:0}
.capture .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,8,6,.82) 30%,rgba(10,8,6,.25))}
.capture .inner{position:relative;z-index:2;padding:64px 48px;max-width:640px}
.capture h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:520;font-size:42px;line-height:1.1}
.capture p{font-size:15px;line-height:1.6;color:#e8e2d4;margin-top:12px;max-width:460px}
.capture form{display:flex;margin-top:24px;max-width:480px}
.capture input{flex:1;padding:15px 16px;border:0;font:500 14.5px "Instrument Sans";min-width:0}
.strip{display:flex;height:16px}.strip i{flex:1}
footer{background:#f7f1e5;padding:36px 48px 90px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:#5c5546}
footer .wm{font:900 18px "Instrument Sans";color:#16130d}footer .wm i{font-style:normal;color:#e4572e}
footer .col b{display:block;color:#16130d;font:700 11.5px "IBM Plex Mono";letter-spacing:.16em;margin-bottom:8px}
footer .col span{display:block;margin-top:5px}
.mobilebar{display:none}
@media(max-width:820px){
.hero{height:620px}.title h1{font-size:56px}.credits,.scrollcue{display:none}
.stickynav nav{display:none}
.statement{grid-template-columns:1fr}.plane h2{font-size:50px}.arch{height:330px}
section{padding:46px 24px}
.choices{flex-direction:column}.choice{border-right:0;border-bottom:3px solid #111}.choice:last-child{border-bottom:0}
.scene,.scene.flip{grid-template-columns:1fr}.scene figure{height:250px}
.scene.flip figure{order:1}.scene.flip .txt{order:2}
.stage{grid-template-columns:1fr}.stage figure{height:330px}
.toolgrid{grid-template-columns:1fr}.tool{border-right:0;border-bottom:3px solid #111}.tool:last-child{border-bottom:0}
.shelfrow{grid-template-columns:1fr auto}.shelfrow .pp{display:none}
.voice blockquote{font-size:27px}
.work{grid-template-columns:1fr}
.capture .inner{padding:48px 24px}.capture form{flex-direction:column;gap:10px}
.marquee .track{font-size:22px}
.mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:75;background:#111;color:#fff;justify-content:space-between;align-items:center;padding:12px 18px;font:700 13.5px "Instrument Sans"}
.mobilebar a{background:#c93363;color:#fff;padding:11px 20px;text-decoration:none;font-weight:700}
}
@media(prefers-reduced-motion:reduce){
.hero .kb,.marquee .track,.scrollcue,.rise{animation:none}
.rv{opacity:1;transform:none;transition:none}
html{scroll-behavior:auto}
}

/* ---- v6 build additions (brand kit applications, logged in the kit s.11) ---- */
.shelfrow{grid-template-columns:1fr auto auto auto}
.shelfrow .sq{padding:12px 20px;font-size:12.5px;box-shadow:5px 5px 0 #111}
.shelfrow .sq:hover{box-shadow:8px 8px 0 #e75480}
.shelfrow.flag .sq{background:#e8a317;color:#16130d}
.begin-out a{color:#b5502a}
.stage .cap .profile-link{display:inline-block;margin-top:18px;font:700 12.5px "Instrument Sans";letter-spacing:.06em;text-transform:uppercase;color:#ffd98a;text-decoration:none;border-bottom:2px solid #e8a317;padding-bottom:2px}
.begincap{margin-top:30px;border:3px solid #111;background:#fff;padding:24px;max-width:860px}
.begincap p{font-size:15.5px;line-height:1.6;color:#2a2519;margin-top:8px;max-width:560px}
.capform{display:flex;flex-wrap:wrap;gap:0;margin-top:16px;max-width:520px}
.capform input{flex:1;padding:15px 16px;border:3px solid #111;border-right:0;font:500 14.5px "Instrument Sans";min-width:0;background:#fff;color:#16130d}
.begincap .capform input{border-right:3px solid #111}
.begincap .capform{gap:10px}
.capform .cap-msg{flex-basis:100%;font-size:13.5px;margin-top:10px;min-height:18px}
.capform .cap-msg.err{color:#c93363;font-weight:700}
.capture .cap-msg.err{color:#ffd98a}
.cap-done{margin-top:24px;background:#111;color:#f7f1e5;padding:18px 22px;max-width:480px;border-left:6px solid #e8a317}
.cap-done b{font-family:"Bricolage Grotesque",sans-serif;font-size:21px;font-weight:560;display:block}
.cap-done span{font-size:14px;color:#cfc8b8}
.paulstrip{background:#fdfaf2;border-top:3px solid #111}
.ps-in{display:flex;gap:30px;align-items:flex-start}
.paulstrip h2{font-family:"Bricolage Grotesque",sans-serif;font-size:34px;font-weight:560;margin-top:8px}
.ps-photo{flex:none;width:248px;margin:0;border:2px solid #111;box-shadow:8px 8px 0 #111;background:#111}
.ps-photo img{display:block;width:100%;height:auto}
.ps-body{font-size:16px;line-height:1.6;color:#2a2519;margin-top:12px;max-width:520px}
@media(max-width:820px){.ps-photo{width:200px}}
.progband{background:#111;color:#f7f1e5}
.pb-in{display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap}
.progband h2{font-family:"Bricolage Grotesque",sans-serif;font-size:38px;font-weight:560;margin-top:10px}
.progband p{font-size:15.5px;line-height:1.65;color:#cfc8b8;margin-top:10px;max-width:560px}
footer .col a{color:#5c5546;text-decoration:none;display:block;margin-top:5px}
footer .col a:hover{color:#b5502a;text-decoration:underline}
@media(max-width:820px){
.sec-head .ghost{display:none}
.shelfrow{grid-template-columns:1fr auto auto}
.ps-in{flex-direction:column}
.capform{flex-direction:column;gap:10px}
.capform input{border-right:3px solid #111}
.capture form{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
.stage figure img,.scrollcue{animation:none}
.arch img,.scene figure img,.guarantee .seal,.sq{transition:none}
}

/* ---- QA + elite audit fixes 2026-11-06: contrast law, 48px targets ---- */
.voices .no{color:#111}
.statement .mono{color:#111}
.tools .no{color:#111}
.faq summary{min-height:48px}
.shelfrow .sq{min-height:48px;display:inline-flex;align-items:center}
.faq-q{min-height:48px}
.citybtn{min-height:48px}
.choice{min-height:48px}
.mobilebar a{min-height:48px;display:inline-flex;align-items:center}
.stage .cap .profile-link{display:inline-flex;align-items:center;min-height:48px}
.stickynav .sq{min-height:48px;display:inline-flex;align-items:center}
.capform .sq{min-height:48px}
.capture .sq{min-height:48px}
.capform input{min-height:48px}
.tool a{display:inline-flex;align-items:center;min-height:48px;padding:0 2px}
footer .col a{min-height:48px;display:flex;align-items:center;padding:0;margin-top:0}
.stickynav nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 10px}
.shelf-note{max-width:520px}
details p{max-width:520px}
.lede{max-width:520px}

/* ---- Enhancement pass 2026-11-06 (Paul: v6 read basic next to modern
   builder output; award-level polish inside the same brand system).
   Rulings recorded in BUILD-SPEC-HOMEPAGE-V6.md (enhancement addendum)
   and BRAND-KIT-AND-STYLE-GUIDE.md s.11. This block changes no copy, no
   facts, no prices, no links and no form behaviour. ---- */
/* Marquee: a cinema film strip. Sprocket rows frame the names, the type
   grows, the travel slows (72s), gold diamond separators. */
.marquee{padding:46px 0 42px;position:relative;border-top:0;border-bottom:0}
.marquee::before,.marquee::after{content:"";position:absolute;left:0;right:0;height:11px;background-image:repeating-linear-gradient(90deg,#f7f1e5 0 13px,transparent 13px 30px);opacity:.85;pointer-events:none}
.marquee::before{top:9px}
.marquee::after{bottom:9px}
.marquee .track{gap:64px;animation-duration:72s;font-weight:480}
.marquee .track b{font-size:.58em;align-self:center}
/* Hero: deeper Ken Burns travel, heavier shade under the title */
.hero .kb{animation-duration:30s}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.15) translateY(-12px)}}
.hero .shade{background:linear-gradient(180deg,rgba(0,0,0,.44),transparent 32%,transparent 52%,rgba(0,0,0,.84))}
.credits{font-size:12px;letter-spacing:.09em;padding:22px 38px 28px}
/* Section heads: a short pink rule rides the number (Ink on pink ground) */
.sec-head .no{display:inline-flex;align-items:center;gap:14px}
.sec-head .no::after{content:"";width:46px;height:3px;background:#e75480;flex:none}
.voices .no::after{background:#16130d}
/* Statement: a pink dusk wash ties the photograph to the plane */
.arch::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;background:linear-gradient(180deg,transparent,rgba(231,84,128,.38));pointer-events:none}
.begin-out{font-size:27px}
/* Scenes: colour keyline per scene, an oversized index numeral */
.scene{margin-top:56px;position:relative}
.scene figure{position:relative}
.scene figure::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;z-index:2}
.scene[data-scene="1"] figure::before{background:#e75480}
.scene[data-scene="2"] figure::before{background:#e8a317}
.scene[data-scene="3"] figure::before{background:#7ea6c9}
.scene::after{content:attr(data-n);position:absolute;right:24px;bottom:2px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:168px;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(247,241,229,.13);pointer-events:none}
/* Tools: figures at display scale */
.tool .fig{font-size:66px}
/* Shelf: editorial scale, the flagship crowned in Ochre, warm row hover */
.shelfrow{padding:26px 10px}
.shelfrow h4{font-size:30px}
.shelfrow .pr{font-size:40px}
.shelfrow.flag{border-top:4px solid #e8a317;padding:30px 22px}
.shelfrow:not(.flag){transition:background .25s ease}
.shelfrow:not(.flag):hover{background:#f3ead2}
/* Voices: a display quote mark opens each testimony */
.voice{position:relative}
.voice::before{content:"“";display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:96px;line-height:.6;color:#ffd98a;margin-bottom:16px}
/* Footer: a taller colour strip, the wordmark as the closing sign-off */
.strip{height:24px}
footer::after{content:"MY MEXICO MOVE";flex-basis:100%;order:99;margin-top:36px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(28px,8.6vw,116px);line-height:.95;color:transparent;-webkit-text-stroke:1.5px rgba(22,19,13,.28);text-align:center;white-space:nowrap}
.rv{transform:translateY(36px)}
@media(min-width:821px){
.hero{height:860px}
.title{bottom:140px}
.title h1{font-size:clamp(56px,10.4vw,130px)}
.plane{padding:72px 56px}
.plane h2{font-size:clamp(54px,5.8vw,80px)}
.arch::before{width:36px}
.scene figure{height:480px}
.scene .txt{padding:44px 48px}
.scene .txt h3{font-size:46px}
.stage figure{height:560px}
.stage .cap{padding:44px 40px}
.stage .cap h3{font-size:48px}
.voice blockquote{font-size:44px;line-height:1.22}
.priceblock .big{font-size:112px}
.work h2{font-size:54px}
.marquee .track{font-size:46px}
}
@media(max-width:820px){
.marquee{padding:38px 0 34px}
.marquee .track{font-size:30px;gap:44px}
.scene figure{height:300px}
.scene::after{display:none}
.voice::before{font-size:72px}
.credits{padding:22px 24px 28px}
}
@media(prefers-reduced-motion:reduce){
.rv{transform:none}
.hero .kb,.marquee .track{animation:none}
}

/* ---- Compile pass 2026-11-06 (best of both, Paul's order): ports from
   the Gemini comparison (gemini-build/COMPARISON.md port list), adapted
   to the kit, never pasted. The per-port audit trail (taken, adapted,
   rejected) is in PHASE2.md section 13 and the spec compile addendum.
   Nothing from Gemini's invented copy is in this block or the markup. ---- */
/* Port 1: guarantee strip directly above the shelf rows */
.gstrip{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#f3b8c6;border:2px solid #111;box-shadow:6px 6px 0 #111;padding:14px 18px;margin-bottom:36px}
.gstrip .gtag{background:#c93363;color:#fff;font:600 12px "Instrument Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px}
.gstrip p{font-size:16px;color:#16130d;margin:0}
/* Port 2: flagship price rail on the shelf flagship row */
.shelfrow.flag{grid-template-columns:1fr 300px;align-items:center}
.rail{min-width:300px}
.railmeta{display:flex;justify-content:space-between;font:600 11.5px "IBM Plex Mono",monospace;letter-spacing:.16em;color:#16130d}
.railmeta .railpdf{color:#c93363}
.railprice{font-family:"Bricolage Grotesque",sans-serif;font-weight:560;font-size:44px;line-height:1.05;margin-top:6px}
.railg{font-size:14px;color:rgba(22,19,13,.75);margin-top:4px}
.railbuy{display:block;text-align:center;margin-top:12px}
.shelfrow .railbuy{background:#111;color:#f7f1e5}
/* The flagship row itself is Ink (the mockup's design), so its rail
   inverts against the values above, which were specced on a light card:
   meta and guarantee print in Paper, the accent in Pale Pink, and the
   buy button keeps the row's own Ochre, made full-width by the rail */
.shelfrow.flag .railmeta{color:#f7f1e5}
.shelfrow.flag .railmeta .railpdf{color:#f3b8c6}
.shelfrow.flag .railg{color:rgba(247,241,229,.78)}
.shelfrow.flag .railbuy{display:block;background:#e8a317;color:#16130d}
/* Port 2, adapted to the section 08 spotlight: same rail structure on the
   Ink ground, so INSTANT PDF prints Pale Pink, the buy button is the
   section's Ochre action (an Ink button cannot sit on Ink), and the price
   keeps the enhancement pass scale of 112px */
.priceblock .railmeta{color:#f7f1e5;margin-bottom:14px}
.priceblock .railmeta .railpdf{color:#f3b8c6}
.priceblock .railbuy{margin-top:22px}
/* Port 3: dual price anchoring; the price joins the mono meta line in Ink */
.shelfrow .ppx{color:#16130d}
/* Port 5: stage tabs at the compact values; outcomes in ONE Deep Pink
   panel (selection colours are the kit's ruled ones and do not change) */
.choice{padding:16px 18px;font:500 17px "Instrument Sans",sans-serif;min-height:64px}
.choice small{font-size:11.5px;margin-bottom:6px}
.begin-out{background:#c93363;color:#fff;font:19px "Instrument Sans",sans-serif;line-height:1.55;padding:22px 24px;border:2px solid #111;box-shadow:6px 6px 0 #111;min-height:0}
.begin-out em{color:#fff}
.begin-out a{color:#ffd98a}
/* Port 6: the Trustpilot badge at the head of Voices (ochre, single use;
   it presents the Voices printing of the line, the count stays three) */
.tpbadge{display:inline-block;background:#e8a317;border:2px solid #111;box-shadow:4px 4px 0 #111;padding:10px 14px;margin:24px 0 4px}
.tpbadge .tpm{display:block;font:600 11.5px "IBM Plex Mono",monospace;letter-spacing:.16em;color:#16130d}
.tpbadge .tpv{display:block;font:600 15px "Instrument Sans",sans-serif;color:#16130d;margin-top:3px}
/* Port 4: hero proof satellites. Desktop: a hard-square card column in
   the hero's upper right sky zone (bottom:440px), clear of the topline
   above and of the 130px title below; mobile: a static Ink proof band
   between the hero and the marquee */
.herowrap{position:relative}
.satellites{position:absolute;right:38px;bottom:440px;width:332px;display:grid;gap:20px;z-index:6}
.sat{border:2px solid #111;box-shadow:8px 8px 0 #111;padding:20px 22px}
.sat-a{background:#e8a317;color:#16130d}
.sattag{display:inline-block;background:#fdfaf2;color:#16130d;font:600 12px "Instrument Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:5px 9px}
.satname{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:560;font-size:28px;line-height:1.1;margin-top:12px}
.sat p{font-size:15px;line-height:1.5;margin-top:6px}
.sat-b{background:#7ea6c9;color:#0d2136}
.satk{display:block;font:600 11.5px "IBM Plex Mono",monospace;letter-spacing:.16em}
.sath{display:block;font:600 16px "Instrument Sans",sans-serif;letter-spacing:.03em;text-transform:uppercase;line-height:1.35;margin-top:10px}
/* Port 7: the end capture becomes a centred Sheet card on the same
   photo ground and veil; copy unchanged apart from the port's tag */
.capture{height:auto;min-height:430px;padding:56px 24px}
.capture .inner{background:#fdfaf2;color:#16130d;border:2px solid #111;box-shadow:8px 8px 0 #111;max-width:720px;margin:0 auto;padding:36px}
.capture h2{font-size:34px;color:#16130d}
.capture p{color:rgba(22,19,13,.78);max-width:560px}
.captag{display:inline-block;background:#e8a317;color:#16130d;padding:6px 10px;letter-spacing:.14em}
.capture form{max-width:none}
.capture input{border:2px solid #111}
.capture .sq.light{background:#e75480;color:#fff}
.capture .cap-msg{color:#c93363}
.capture .cap-msg.err{color:#c93363}
@media(max-width:820px){
.satellites{position:static;width:auto;padding:16px 20px 20px;background:#111}
.shelfrow.flag{grid-template-columns:1fr}
.rail{min-width:0;margin-top:16px}
.capture{padding:36px 20px}
.capture .inner{padding:26px 22px}
}

/* ---- Navigability pass 2026-11-06 (Paul: "make it more navigable"):
   a contents bar with scrollspy under the main nav, a real mobile menu,
   section exit links, a skip link and the scroll-margin discipline the
   two sticky bars require. No section is restyled; this block only adds
   the navigation layer. Values measured, not assumed: the main nav is
   72px tall (12px padding around the 48px ticket stub), this bar is
   50px (48px links + 2px rule), so anchored sections stop 132px short
   of the viewport top and land clear of both bars. ---- */
/* The wrapper's overflow:hidden made it a scroll container, so the
   design's sticky nav could never stick (measured on the pre-pass
   build: nav top at -2000px after a 2000px scroll; it scrolled away
   with the page). overflow:clip keeps the clipping the wrapper exists
   for, rounded decor and all, without creating a scroll container, so
   position:sticky engages as the spec always intended. */
.page{overflow:clip}
/* QA loop run 17, Finding 13 (folded into this pass): both capture
   submit buttons rendered white text on Barragan Pink #E75480, 3.51:1.
   The kit's contrast law reserves white on that pink for display type;
   text-bearing pink elements are carried by Deep Pink #C93363 (5.08:1,
   the same colour the mobile Begin bar already uses). Every other
   button keeps its specified colours; these two overrides are scoped
   to the capture forms only. Measured in the gate by computed style. */
.begincap .capform .sq{background:#c93363;color:#fff}
.capture .sq.light{background:#c93363;color:#fff}
.skiplink{position:fixed;top:-200px;left:16px;z-index:120;background:#111;color:#f7f1e5;font:700 13px "Instrument Sans",sans-serif;display:inline-flex;align-items:center;min-height:48px;padding:10px 18px;text-decoration:none}
.skiplink:focus{top:12px}
.contentsbar{position:sticky;top:72px;z-index:65;background:#f7f1e5;border-bottom:2px solid #111;display:flex;align-items:stretch;gap:2px;padding:0 26px;overflow-x:auto;scrollbar-width:none}
.contentsbar::-webkit-scrollbar{display:none}
.contentsbar a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;font:600 11.5px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#111;text-decoration:none;white-space:nowrap;flex:0 0 auto;transition:background .18s}
.contentsbar a:hover{background:#f3ead2}
.contentsbar .cb-link.on{background:#111;color:#f7f1e5}
.contentsbar .cb-act{background:#c93363;color:#fff}
.contentsbar .cb-act:hover{background:#c93363}
.contentsbar .cb-act.gold{background:#e8a317;color:#111}
.contentsbar .cb-act.gold:hover{background:#e8a317}
section[id]{scroll-margin-top:132px}
.menubtn{display:none}
.menuoverlay{position:fixed;inset:0;z-index:90;background:#111;color:#f7f1e5;display:none;flex-direction:column;padding:18px 22px 26px;overflow-y:auto}
.menuoverlay.open{display:flex}
.menuoverlay .wm{font:900 18px "Instrument Sans",sans-serif;color:#f7f1e5}
.menuoverlay .wm i{font-style:normal;color:#e75480}
.mo-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
.moclose{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;background:transparent;border:2px solid #f7f1e5;color:#f7f1e5;font:600 12px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.mo-nav{margin-top:24px;display:flex;flex-direction:column}
.mo-nav a{display:flex;align-items:center;min-height:56px;font-family:"Bricolage Grotesque",sans-serif;font-size:26px;font-weight:560;color:#f7f1e5;text-decoration:none;border-bottom:1px solid rgba(247,241,229,.22)}
.mo-pages{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.mo-pages a{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;border:2px solid rgba(247,241,229,.4);color:#ffd98a;font:600 12px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.mo-ticket{margin-top:auto;display:flex;align-items:center;justify-content:center;min-height:56px;border:2px dashed #e8a317;color:#f7f1e5;font:600 13px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
body.menu-open{overflow:hidden}
body.menu-open .mobilebar{display:none}
/* Section exits: one quiet next-step link per major section, in the
   rd-link form (the room detail link is the kit's quiet-link shape).
   Colour variants follow the ground each section ends on, all measured
   pairs from kit s.2: rust on Sheet and Paper, Ink on Sun and on the
   pink planes (12.41 and 4.71), Gold Light on the Ink grounds (13.98). */
.nextlink{display:inline-flex;align-items:center;min-height:48px;margin-top:26px;font:700 12.5px "Instrument Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#b5502a;text-decoration:none;border-bottom:2px solid #b5502a;padding-bottom:2px}
.nextlink.ink{color:#111;border-color:#111}
.nextlink.gold{color:#ffd98a;border-color:#ffd98a}
.work .nextlink{grid-column:1/-1;justify-self:start}
@media(max-width:820px){
.menubtn{display:inline-flex;align-items:center;min-height:48px;padding:0 14px;background:transparent;border:2px solid #f7f1e5;color:#f7f1e5;font:600 12px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.menubtn[aria-expanded="true"]{background:#f7f1e5;color:#111}
.stickynav .sq{display:none}
.contentsbar{padding:0 10px}
/* the cities exit must clear the tools band's 44px overlap: the mobile
   section padding (46px) leaves it 2px, so the section gains depth */
.cities{padding-bottom:76px}
}
@media(prefers-reduced-motion:reduce){
.contentsbar a{transition:none}
}

/* ---- Pass 4 2026-11-07 (Paul: "the most complete, enhanced version
   yet"): depth inside the frozen v6 system. Contents lines from the
   built products' own chapter lists, route links in the Scenes, the
   city stage photo credit and crossfade, and one contrast correction.
   Record in PHASE2.md section 15; applications logged in kit s.11.
   Nothing already on the page is restyled; this block only adds. ---- */
/* QA run 17 observation, adopted: the outcome panel's links were Gold
   Light on Deep Pink, 3.76:1 at the panel's 19px regular weight,
   under the kit's text bar. The panel's ruled pair is white on Deep
   Pink (5.08:1); the links take it, underlined so they still read as
   links. Supersedes the compile port's link colour on contrast law. */
.begin-out a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* Scenes: one quiet route link per scene, the rd-link form, in the
   kit's Ink-ground pair (Gold Light text 13.98:1, Ochre rule) */
.scene .scenelink{display:inline-flex;align-items:center;min-height:48px;margin-top:14px;align-self:flex-start;font:700 12.5px "Instrument Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#ffd98a;text-decoration:none;border-bottom:2px solid #e8a317;padding-bottom:2px}
/* City stage: the caption crossfades on a switch (the JS toggles
   .swap); the photo credit rides the existing mono kicker slot */
@keyframes capswap{from{opacity:.2;transform:translateY(8px)}to{opacity:1;transform:none}}
.stage .cap.swap{animation:capswap .38s cubic-bezier(.2,.7,.2,1)}
/* Tools: a mono meta line per tool, naming what it takes or weighs;
   the corrected dark stone on the Sun ground */
.tool .tmeta{display:block;margin-top:14px;font:600 11px "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#4c4636}
/* Shelf: an inside line per plain row, real chapters only, in the
   corrected stone the QA fixes set for small mono on light grounds */
.shelfrow .inside{display:block;margin-top:10px;font:600 11px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#6e6759}
/* Section 08: the contents line in the text column, Gold Light mono
   on the Ink ground (13.98:1) */
.work .wcontents{margin-top:18px;font:600 11.5px "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#ffd98a;line-height:1.9}
/* Programs band: the membership tiers line, Ochre mono on Ink, the
   band's own kicker colour */
.progband .tiers{margin-top:12px;font:600 11.5px "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#e8a317}
/* Hero proof satellites: the data card cascades a beat after the
   founder card as their reveals land */
.satellites .sat-b{transition-delay:.18s}
@media(prefers-reduced-motion:reduce){
.stage .cap.swap{animation:none}
.satellites .sat-b{transition-delay:0s}
}
/* Pass 5 (section 17): the Complete Library row sits full width under
   the six guides it bundles, ruled off with the kit's 2px Ink rule and
   its page-count cell in Deep Pink; the section 08 also-in line rides
   the contents line's Gold Light mono on the Ink ground */
.shelfrow.lib{border-top:2px solid #111}
.shelfrow.lib .pp{color:#c93363}
.work .walso{margin-top:10px;font:600 11.5px "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#ffd98a;line-height:1.9}

/* ---- Offering v2 pass 2026-11-07 (Paul: the offering is the dashboard;
   record in PHASE2.md section 21 and OFFERING-V2-PLAN.md): the plan band
   presents My Mexico Move itself, an Ink flagship section between the
   tools and the Shelf, with a sample plan panel in the kit's framed
   treatment (Sheet surface, 2px Ink border, Ochre offset shadow, the
   hero satellites' values shifted to the ground's own action colour).
   Stage cells are hard square: done is contrast inversion (Ink ground,
   Paper text), current is Ochre, upcoming is an outline. The free and
   included lists are ruled columns, the tools band gains one suite
   line, and the retired programs band's styles are reused unchanged
   by the session strip that replaces it. No new colour, face or
   radius; text pairs are the kit's measured Ink-ground pairs. ---- */
.tools .suiteline{margin-top:22px;font:600 11.5px "IBM Plex Mono",monospace;letter-spacing:.16em;text-transform:uppercase;color:#4c4636}
.planband{background:#111;color:#f7f1e5;padding:84px 26px 76px}
.pb2-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 460px;gap:56px;align-items:start}
.pb2-k{color:#e8a317}
.planband h2{font-family:"Bricolage Grotesque",sans-serif;font-size:46px;font-weight:560;line-height:1.05;margin-top:14px}
.pb2-lede{font-size:17px;line-height:1.65;color:#e9e2d0;margin-top:16px;max-width:520px}
.fvs{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:30px;max-width:560px}
.fvs .mono{color:#e8a317}
.fvs ul{list-style:none;margin-top:10px}
.fvs li{font-size:15px;line-height:1.5;color:#f7f1e5;padding:8px 0;border-top:1px solid rgba(247,241,229,.25)}
.pb2-price{margin-top:28px;font-size:16.5px;line-height:1.6;color:#f7f1e5;max-width:520px}
.pb2-cta{margin-top:20px;display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.pb2-quiet{color:#ffd98a;font:700 12.5px "Instrument Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid #e8a317;padding-bottom:2px;display:inline-flex;align-items:center;min-height:48px}
.planpanel{background:#fdfaf2;color:#16130d;border:2px solid #111;box-shadow:8px 8px 0 #e8a317;padding:24px 24px 20px}
.pp-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.pp-head .mono{color:#b5502a}
.pp-live{font:600 11.5px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;background:#111;color:#f7f1e5;padding:5px 9px}
.pp-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #ddd3ba;font-size:15px}
.pp-row span{color:#6e6759}
.pp-row b{font-weight:700;text-align:right}
.pp-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:16px}
.pp-stages span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;padding:4px 2px;font:600 10.5px "IBM Plex Mono",monospace;letter-spacing:.08em;text-transform:uppercase;text-align:center;border:2px solid #111;color:#16130d}
.pp-stages span small{font:500 11px "Instrument Sans",sans-serif;letter-spacing:.02em;text-transform:none;color:#4c4636}
.pp-stages span.done{background:#111;color:#f7f1e5}
.pp-stages span.now{background:#e8a317}
.pp-foot{margin-top:14px;font-size:13.5px;line-height:1.55;color:#4c4636}
.planband .nextlink{margin-top:34px}
@media(max-width:900px){
.pb2-in{grid-template-columns:1fr;gap:36px}
.planband{padding:64px 20px 60px}
.planband h2{font-size:36px}
}

/* ---- Pass 8 2026-11-07 (homepage funnel rebuild, Paul 2026-11-07
   12:52 CST; record in PHASE2.md section 23): the marquee mechanism
   is replaced, the hero gains its offering line and secondary route,
   the new funnel sections (basics, how, suite, programs) take kit
   components, and the motion system gains staggered reveals. No new
   colour, face or radius; every text pair is a measured kit pair. ---- */
/* Marquee, mechanism replacement: the track is two identical sets
   built into the markup (no JS duplication). Each set carries its
   trailing gap as padding, so the sets are exactly equal and the
   -50% point is a seamless loop whatever the fonts do. The transform
   is compositor-promoted (translate3d, will-change). The old hover
   pause latched on touch devices (iOS Safari keeps :hover applied
   after a tap, and a scroll gesture over the strip paused it for
   good); the pause now applies only on hover-capable fine pointers. */
.marquee .track{gap:0;animation:mq8 72s linear infinite;will-change:transform}
@keyframes mq8{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.mq-set{display:flex;gap:64px;padding-right:64px;align-items:center;flex:none}
.mq-set a{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:48px}
.mq-set a:hover{color:#ffd98a;text-decoration:underline;text-underline-offset:5px}
.marquee:hover .track{animation-play-state:running}
@media(hover:hover) and (pointer:fine){.marquee:hover .track{animation-play-state:paused}}
@media(max-width:820px){.mq-set{gap:44px;padding-right:44px}}
/* Hero: the offering line and the secondary route to the basics */
.heroline{font-size:16.5px;line-height:1.6;color:#f7f1e5;max-width:520px}
.herosec{display:inline-flex;align-items:center;min-height:48px;font:700 12.5px "Instrument Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:#ffd98a;text-decoration:none;border-bottom:2px solid #e8a317;padding-bottom:2px}
/* The basics band sits flush under the plan band: the 44px overlap
   belonged to its old pairing over the cities stage photograph. */
.tools{margin-top:0}
/* Basics: the free boundary line under each basic tool card */
.tool .tbound{display:block;margin-top:10px;font-size:13.5px;line-height:1.55;color:#4c4636}
.basicsref{margin-top:22px;font-size:15px;line-height:1.6;color:#2a2519;max-width:640px}
.basicsref a{color:#b5502a;font-weight:700}
/* How the plan works: three steps on Sheet cells, the stage strip */
.how8{background:#fdfaf2}
.howsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:#111;border:3px solid #111;margin-top:30px}
.howstep{background:#fdfaf2;padding:20px}
.howstep .mono{color:#b5502a}
.howstep p{font-size:15px;line-height:1.55;color:#2a2519;margin-top:8px}
.howstages{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:22px}
.howstages div{border:2px solid #111;padding:10px 12px;min-height:64px}
.howstages b{display:block;font:600 11px "IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.howstages span{font-size:14px;line-height:1.45;color:#4c4636}
@media(max-width:820px){.howsteps{grid-template-columns:1fr}.howstages{grid-template-columns:repeat(2,1fr)}}
/* The suite: journey-move rows on the Paper ground */
.suite8{background:#f7f1e5}
.suiterow{display:flex;gap:20px;padding:14px 0;border-top:1px solid #ddd3ba;align-items:baseline;flex-wrap:wrap}
.suiterow .mono{color:#b5502a;flex:none;min-width:130px}
.suiterow p{font-size:15.5px;line-height:1.55;color:#2a2519;max-width:640px}
/* The programs band: Pale Pink ground, Ink text (11.02:1) */
.progs8{background:#f3b8c6}
.progs8 .mono{color:#111}
/* Session strip: the Trustpilot line that section 08 used to carry */
.progband .tp8{margin-top:12px;font-size:13.5px;color:#cfc8b8}
.progband .pb-quote{margin-top:18px;max-width:560px}
.progband .pb-quote blockquote{font-family:"Bricolage Grotesque",sans-serif;font-size:20px;font-weight:560;line-height:1.4;color:#f7f1e5}
.progband .pb-quote figcaption{margin-top:8px;font:600 11px "IBM Plex Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:#e8a317}
/* Motion additions, inside the kit system (IntersectionObserver
   reveals, the same cubic-bezier): staggered card reveals, the
   sample plan's stage cells cascading as the panel lands, and the
   ghost numerals settling with their section head. */
.toolgrid .tool.rv:nth-child(2){transition-delay:.08s}
.toolgrid .tool.rv:nth-child(3){transition-delay:.16s}
.suite-list .suiterow.rv:nth-child(2){transition-delay:.06s}
.suite-list .suiterow.rv:nth-child(3){transition-delay:.12s}
.suite-list .suiterow.rv:nth-child(4){transition-delay:.18s}
.suite-list .suiterow.rv:nth-child(5){transition-delay:.24s}
.planpanel .pp-stages span{opacity:0;transform:translateY(8px);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
.planpanel.in .pp-stages span{opacity:1;transform:none}
.planpanel .pp-stages span:nth-child(2){transition-delay:.05s}
.planpanel .pp-stages span:nth-child(3){transition-delay:.1s}
.planpanel .pp-stages span:nth-child(4){transition-delay:.15s}
.planpanel .pp-stages span:nth-child(5){transition-delay:.2s}
.planpanel .pp-stages span:nth-child(6){transition-delay:.25s}
.planpanel .pp-stages span:nth-child(7){transition-delay:.3s}
.planpanel .pp-stages span:nth-child(8){transition-delay:.35s}
.rv .ghost{transform:translateY(16px);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.rv.in .ghost{transform:none}
@media(prefers-reduced-motion:reduce){
.marquee{overflow-x:auto}
.marquee .track{animation:none}
.toolgrid .tool.rv,.suite-list .suiterow.rv{transition-delay:0s}
.planpanel .pp-stages span{opacity:1;transform:none;transition:none}
.rv .ghost{transform:none;transition:none}
}

/* Pass 9: display accents upright under Bricolage (no italic in the face) */
.title h1 em,.plane h2 em,.voice blockquote em,.work h3 em{font-style:normal}
.marquee .track{font-style:normal}

/* ---- Hero legibility pass 2026-11-08 (Paul's phone verdict: he loves
   the San Miguel hero and its photo, but the hero text was hard to
   read over the bright, busy image; record in PHASE2.md section 41).
   The shade becomes an Ink scrim: strong behind every hero text band,
   lightest only in the upper sky where no text sits. The photo file
   and every word of copy are unchanged; this block only restates the
   .hero .shade treatment, last in the cascade. Measured worst-case
   contrast against the composited served image (both Ken Burns end
   states, grain included): every hero text element at 5.0:1 or
   better on the 390px phone surface, the Season Two gradient
   included at both ends, so the gradient stays. ---- */
.hero .shade{background:linear-gradient(180deg,rgba(17,17,17,.72),rgba(17,17,17,.64) 16%,rgba(17,17,17,.80) 28%,rgba(17,17,17,.90) 40%,rgba(17,17,17,.93) 58%,rgba(17,17,17,.95) 78%,rgba(17,17,17,.97))}

/* ---- Site map section (2026-11-09, PHASE2.md section 66): the House
   floor plan retired on Paul's direction ("The house thing was cool
   but it's just confusing") and replaced, in the same position, by a
   map of the actual site under its real names. Grouped rows in the
   Journey structure-map manner: a mono label that is the group's own
   link, then the group's entries as plain links, hairline rules
   between rows. All .floor, .room, .room-detail and .rd-link rules
   were removed with the section; nothing else used them. ---- */
.smap{margin-top:30px;border-top:3px solid #111}
.sm-row{display:grid;grid-template-columns:210px 1fr;gap:4px 30px;padding:14px 0 15px;border-bottom:2px solid rgba(22,19,13,.18);align-items:start}
.sm-k{display:inline-flex;align-items:center;min-height:48px;font:600 12px "IBM Plex Mono";letter-spacing:.16em;text-transform:uppercase;color:#b5502a;text-decoration:none;border-bottom:2px solid #b5502a;padding-bottom:2px;justify-self:start}
.sm-links{font-size:15.5px;line-height:1.65;color:#2a2519;align-self:center}
.sm-links a{color:#111;font-weight:600;text-decoration:none;border-bottom:2px solid rgba(17,17,17,.35)}
.sm-note{font-size:15.5px;line-height:1.65;color:#5c5546;grid-column:2}
@media(max-width:820px){
.sm-row{grid-template-columns:1fr}
.sm-note{grid-column:1}
}