@font-face{font-family:Fraunces;src:url('/assets/fonts/fraunces-variable-latin.woff2') format('woff2');font-display:swap}@font-face{font-family:Inter;src:url('/assets/fonts/inter-variable-latin.woff2') format('woff2');font-display:swap}@font-face{font-family:"JetBrains Mono";src:url('/assets/fonts/jetbrains-mono-variable-latin.woff2') format('woff2');font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--cream)}body{--sector:#b9a37b;margin:0;color:var(--ink);background:var(--cream);font:16px/1.65 var(--body);cursor:auto}body[data-page-id^="R-"]{--sector:#9f7650}body[data-page-id^="H-"]{--sector:#708c7d}body[data-page-id^="C-"]{--sector:#a9684b}body[data-page-id^="T-"]{--sector:#71828d}body::before{position:fixed;z-index:999;inset:0;pointer-events:none;content:"";opacity:.045;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E")}img{display:block;max-width:100%}a{color:inherit}button,input,select{font:inherit}.container{position:relative;width:min(calc(100% - 2*var(--gutter)),var(--max));margin:auto}.skip-link{position:fixed;z-index:1000;left:16px;top:-80px;padding:12px;background:var(--gold);color:var(--charcoal)}.skip-link:focus{top:12px}h1,h2,h3{margin:0 0 .45em;font-family:var(--display);font-weight:350;line-height:.98;letter-spacing:-.03em}h1{font-size:clamp(54px,6.4vw,94px)}h2{font-size:clamp(40px,4.4vw,66px)}h3{font-size:clamp(26px,2.2vw,38px)}p{margin:0 0 1.2em}.eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 20px;color:var(--gold-deep);font:700 10px/1.25 var(--mono);letter-spacing:.15em;text-transform:uppercase}.eyebrow::before{width:38px;height:1px;background:currentColor;content:""}/* CC-WEB-15 §2 — between sections: more. Was clamp(76px,9vw,132px), which put 130px of padding
   on each side of a band boundary at 1440 (a 259px boundary) and 76px at 390 (152px). Now
   clamp(96px,11vw,164px): 158px each side at 1440 (317px boundary) and 96px at 390 (192px). */
.section{position:relative;padding:clamp(96px,11vw,164px) 0;overflow:hidden}.section--white{background:var(--white)}.section--paper{background:var(--paper)}.section--dark{color:var(--white);background:linear-gradient(135deg,#202428,var(--charcoal) 70%)}.section-heading{display:grid;grid-template-columns:7fr 4fr;gap:8%;align-items:end;margin-bottom:54px}.section-heading p{max-width:58ch;color:var(--muted)}.section--dark .section-heading p{color:#d5d0c5}.button,.header-cta{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;text-decoration:none;font-weight:700}.button--gold{border:1px solid var(--gold);background:var(--gold);color:var(--charcoal)}.button--gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:white}.button--outline{border:1px solid currentColor}.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.site-header{position:fixed;z-index:100;inset:0 0 auto;height:var(--header);border-bottom:1px solid rgba(200,169,106,.45);color:var(--white);background:rgba(23,26,29,.92);backdrop-filter:blur(14px)}.header-inner{height:100%;padding:0 max(20px,calc((100vw - 1400px)/2));display:grid;grid-template-columns:minmax(250px,1fr) auto minmax(160px,1fr);align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:11px;width:max-content;text-decoration:none}.brand>span{display:flex;flex-direction:column}.brand b{font-size:12px;letter-spacing:.14em}.brand small{font-size:8px;letter-spacing:.11em;text-transform:uppercase}.primary-nav{display:flex;height:100%;align-items:center;gap:clamp(14px,1.7vw,28px);font-size:13px}.primary-nav>a,.nav-trigger{display:inline-flex;align-items:center;height:100%;border:0;background:none;color:inherit;text-decoration:none;font-weight:650}.nav-trigger::after{content:"+";margin-left:7px;color:var(--gold)}.nav-item{display:flex;height:100%;align-items:center}.mega-menu{position:absolute;top:100%;left:0;right:0;padding:34px var(--gutter);border-bottom:1px solid var(--gold);background:var(--cream);color:var(--charcoal);opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s var(--ease)}.nav-item.is-open .mega-menu,.nav-item:hover .mega-menu,.nav-item:focus-within .mega-menu{opacity:1;visibility:visible;transform:none}.mega-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;width:min(1320px,100%);margin:auto}.mega-column{padding-left:20px;border-left:1px solid var(--gold)}.mega-column>b{display:block;margin-bottom:14px;font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase}.mega-column a{display:block;padding:5px 0;color:#5f5d58;text-decoration:none}.header-actions{justify-self:end}.header-cta{position:relative;border:1px solid var(--gold);font-size:12px}.header-cta::after{position:absolute;inset:4px;border:1px solid rgba(200,169,106,.38);content:""}.menu-toggle{display:none;border:1px solid var(--gold);padding:12px;background:transparent;color:white;font:700 11px var(--mono);letter-spacing:.1em}.mobile-drawer{position:fixed;z-index:99;inset:var(--header) 0 0;padding:36px var(--gutter);background:var(--charcoal);color:var(--white);opacity:0;visibility:hidden;pointer-events:none}.mobile-drawer.is-open{opacity:1;visibility:visible;pointer-events:auto}.mobile-drawer nav>a,.mobile-drawer summary{display:block;padding:16px 0;border-bottom:1px solid rgba(200,169,106,.25);font:350 30px var(--display);text-decoration:none}.mobile-drawer details div{display:grid;gap:8px;padding:12px 0 12px 18px;border-left:1px solid var(--gold)}
.page-datum{position:fixed;z-index:72;left:26px;top:0;width:24px;height:100vh;pointer-events:none}.page-datum path{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:var(--datum-offset,1);transition:stroke-dashoffset .14s linear}.dimension-cursor{position:fixed;z-index:1100;display:none;left:0;top:0;width:1px;height:1px;pointer-events:none;color:var(--gold)}.dimension-cursor::before,.dimension-cursor::after{position:absolute;background:currentColor;content:""}.dimension-cursor::before{width:32px;height:1px;left:-16px}.dimension-cursor::after{width:1px;height:32px;top:-16px}.dimension-cursor i{position:absolute;width:7px;height:7px;border:1px solid currentColor;left:-3px;top:-3px;border-radius:50%}.dimension-cursor output{position:absolute;left:16px;top:14px;width:max-content;max-width:320px;padding:7px 9px;border:1px solid var(--gold);background:rgba(23,26,29,.94);color:var(--cream);font:700 9px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase}.margin-numeral{position:absolute;z-index:0;left:clamp(4px,1.6vw,24px);top:16px;color:transparent;-webkit-text-stroke:1px currentColor;font:300 240px/.78 var(--display);opacity:.06;pointer-events:none}.section>.container{z-index:1}
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:white;background:var(--charcoal)}.hero::before{position:absolute;z-index:0;inset:0;content:"";background:radial-gradient(circle at 77% 45%,rgba(200,169,106,.11),transparent 28%),linear-gradient(115deg,rgba(0,0,0,.2),transparent 58%)}.hero::after{position:absolute;z-index:1;inset:0;content:"";pointer-events:none;background:linear-gradient(90deg,rgba(15,17,19,.96) 0,rgba(15,17,19,.82) 44%,rgba(15,17,19,.15) 77%),linear-gradient(0deg,rgba(15,17,19,.9),transparent 40%)}.hero-media{position:absolute;z-index:0;right:3.5%;top:16%;width:min(56vw,850px);height:66%;opacity:.36;transform:perspective(1200px) rotateY(-7deg)}.hero-media .media-card{height:100%}.hero-media figcaption{display:none}.hero-media .spec-sheet{height:100%;min-height:0}.hero-assembly{position:absolute;z-index:2;right:2.2%;top:13%;width:min(59vw,890px);height:68%;overflow:visible}.hero-assembly .assembly-layer{fill:rgba(23,26,29,.15);stroke:var(--gold);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1800;stroke-dashoffset:1800;animation:assemble 1.2s var(--ease) forwards}.hero-assembly .layer-envelope{animation-delay:.12s}.hero-assembly .layer-structure{animation-delay:.24s}.hero-assembly .layer-floor{animation-delay:.36s}.hero-assembly .layer-foundation{animation-delay:.48s}.hero-content{position:relative;z-index:3;padding-top:calc(var(--header) + 100px);padding-bottom:92px}.hero h1{max-width:920px;text-wrap:balance}.hero .lede{max-width:650px;font-size:18px;color:#e4dfd4}.visual-label,.hero-sheet-id{position:absolute;z-index:4;padding:7px 9px;border:1px solid rgba(200,169,106,.62);background:rgba(23,26,29,.78);font:700 9px var(--mono);letter-spacing:.1em;text-transform:uppercase}.visual-label{right:28px;bottom:28px}.hero-sheet-id{right:28px;top:calc(var(--header) + 22px)}.breadcrumb{position:absolute;z-index:4;top:calc(var(--header) + 22px);left:var(--gutter);font:600 9px var(--mono);letter-spacing:.1em;text-transform:uppercase}.breadcrumb a{text-decoration:none}.hero-dissolve{position:absolute;z-index:5;left:0;right:0;bottom:-1px;height:120px;background:linear-gradient(0deg,var(--cream),transparent);pointer-events:none}.hero .margin-numeral{z-index:2;top:calc(var(--header) + 150px);color:var(--gold);opacity:.04}@keyframes assemble{to{stroke-dashoffset:0}}
.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.media-grid--four{grid-template-columns:repeat(4,1fr)}.media-card{position:relative;margin:0;min-width:0}.media-card figcaption{padding:10px 1px;color:#666057;font:600 8px/1.4 var(--mono);letter-spacing:.05em;text-transform:uppercase}.spec-sheet{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-height:350px;overflow:hidden;border:1px solid #363a3d;background:linear-gradient(145deg,rgba(255,255,255,.75),rgba(244,240,230,.92));box-shadow:inset 0 0 0 5px rgba(200,169,106,.06),0 13px 28px rgba(40,35,26,.07)}.sector-tab{position:absolute;z-index:3;right:0;top:0;width:52px;height:9px;background:var(--sector)}.spec-coordinate{position:absolute;inset:34px 14px 48px;opacity:.07;pointer-events:none}.spec-coordinate i{position:absolute;background:var(--charcoal)}.spec-coordinate i:nth-child(1){left:8%;right:8%;top:50%;height:1px}.spec-coordinate i:nth-child(2){top:8%;bottom:8%;left:50%;width:1px}.spec-coordinate i:nth-child(3){left:22%;right:22%;top:24%;bottom:24%;border:1px solid var(--charcoal);background:transparent;transform:skewY(-7deg)}.spec-head{position:relative;z-index:1;display:grid;grid-template-columns:1fr auto auto;gap:12px;padding:12px 14px;border-bottom:1px solid #8d8a82;font:700 8px/1.25 var(--mono);letter-spacing:.05em;text-transform:uppercase}.spec-head span{display:flex;gap:6px}.spec-head b,.spec-field b,.spec-title-block b{color:var(--gold-deep);font:700 7px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase}.spec-body{position:relative;z-index:1;display:grid;align-content:start;gap:0;padding:10px 14px 12px}.spec-field{display:grid;grid-template-columns:54px 1fr;gap:7px;padding:5px 0;border-top:1px solid rgba(36,39,42,.18);font:500 8px/1.38 var(--mono)}.spec-field:first-child{border-top:0}.spec-field span{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}.spec-title-block{position:relative;z-index:2;display:grid;grid-template-columns:1fr minmax(120px,35%);border-top:1px solid #363a3d;background:rgba(250,248,242,.95);font:500 7px/1.35 var(--mono)}.spec-title-block>div{display:grid;grid-template-columns:45px 1fr;gap:5px;padding:9px 11px}.spec-title-block strong{padding:8px 10px;border-left:1px solid #363a3d;font:700 8px/1.25 var(--mono);letter-spacing:.04em;text-transform:uppercase}.spec-title-block em{font-style:normal;font-size:6px;color:var(--gold-deep)}.ratio-21x9 .spec-sheet{min-height:390px}.ratio-4x5 .spec-sheet{min-height:520px}.ratio-4x3 .spec-sheet{min-height:410px}.ratio-1x1 .spec-sheet{min-height:430px}.gallery-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(360px,37vw);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 0 18px;scrollbar-color:var(--gold) var(--stone)}.gallery-strip>*{scroll-snap-align:start}.gallery-strip .spec-sheet{min-height:400px}
.worlds{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px;min-height:660px}.world{position:relative;overflow:hidden;min-width:0;border:1px solid var(--stone);background:var(--paper)}.world>.media-card{height:100%}.world .spec-sheet{height:100%;min-height:650px}.world-content{position:absolute;z-index:4;inset:auto 10px 10px;padding:22px;background:rgba(23,26,29,.92);color:white}.world h3{font-size:48px}.world-links{display:grid;gap:7px;max-height:0;overflow:hidden;opacity:0;transition:.5s var(--ease)}.world.is-active .world-links,.world:first-child .world-links{max-height:160px;opacity:1}.world-links a{font-size:14px}
.decision-tabs{border-top:1px solid var(--gold)}.tab-rail{display:grid;grid-template-columns:repeat(4,1fr);background:var(--cream)}.tab-button{position:relative;padding:20px;border:0;border-right:1px solid var(--stone);background:transparent;text-align:left;color:var(--ink)}.tab-button span{display:block;font:700 9px var(--mono);letter-spacing:.1em;text-transform:uppercase}.tab-button b{font:350 25px var(--display)}.tab-button[aria-selected=true]{background:var(--charcoal);color:white}.tab-button:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}.tab-panel[hidden]{display:none}.tab-layout{display:grid;grid-template-columns:7fr 5fr;min-height:650px;background:white}.tab-media{position:relative;min-height:650px;padding:18px;background:var(--cream)}.tab-media .media-card,.tab-media .spec-sheet{height:100%}.tab-copy{padding:clamp(38px,5vw,74px)}.tab-copy h3{font-size:clamp(40px,4vw,60px)}.tab-copy .eyebrow{color:var(--charcoal)}.tab-copy .eyebrow::before{background:var(--gold)}.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:30px;background:var(--stone)}.fact-grid div{padding:18px;background:var(--paper)}.fact-grid b{display:block;font:700 9px var(--mono);text-transform:uppercase}.fact-grid span{font-size:14px}
.scope-board{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--stone)}.scope-board>div{padding:24px;background:var(--paper)}.scope-board b{font:700 10px var(--mono);text-transform:uppercase}.elevation-ribbon{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(420px,49vw);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:22px}.elevation-sheet{scroll-snap-align:center}.elevation-sheet>p{display:flex;gap:20px;align-items:center;margin:0;padding:10px 0;border-top:1px solid var(--gold);font:700 10px var(--mono);letter-spacing:.1em;text-transform:uppercase}.elevation-sheet>p span{color:var(--gold-deep)}
.reading-zone{background:var(--paper)}.reading-layout{display:grid;grid-template-columns:250px 1fr;gap:clamp(40px,7vw,100px)}.reading-index{position:sticky;top:150px;align-self:start;padding-left:18px;border-left:1px solid var(--gold)}.reading-index a{display:block;padding:7px 0;color:#666;text-decoration:none;font:700 9px var(--mono);text-transform:uppercase}.reading-copy{columns:2;column-gap:56px}.reading-copy section{break-inside:avoid;margin-bottom:48px}.reading-copy h2{font-size:42px}.reading-copy section:first-child p:first-of-type::first-letter{float:left;margin:8px 10px 0 0;font:350 72px/.7 var(--display);color:var(--gold-deep)}.note{break-inside:avoid;padding:22px;border-left:2px solid var(--gold);background:white}.faq details{break-inside:avoid;border-top:1px solid var(--stone);padding:14px 0}.faq summary{font-weight:700;cursor:pointer}.cta-band{position:relative;overflow:hidden;padding:88px 0;background:var(--charcoal);color:white}.cta-band .container{display:grid;grid-template-columns:1fr auto;align-items:center;gap:40px}.cta-band h2{max-width:900px}
.site-footer{padding-top:70px;background:var(--charcoal);color:white}.footer-row{padding:32px 0;border-top:1px solid rgba(200,169,106,.35)}.footer-brand{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.footer-brand img{max-width:240px}.footer-brand h2{font-size:44px}.footer-map{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}.footer-map b{display:block;margin-bottom:12px;color:var(--gold);font:700 9px var(--mono);text-transform:uppercase}.footer-map a{display:block;padding:3px 0;color:#d3cec4;font-size:13px;text-decoration:none}.footer-contact,.footer-legal{display:flex;justify-content:space-between;gap:30px}.footer-legal{font-size:11px}.sheet-title-block{display:grid;grid-template-columns:2fr 2fr repeat(6,1fr);gap:0;padding:0;border:1px solid var(--gold)}.sheet-title-block>div{min-height:92px;padding:11px;border-right:1px solid var(--gold)}.sheet-title-block>div:last-child{border:0}.sheet-title-block b,.sheet-title-block span{display:block;color:#d8d3ca;font:600 7px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}.sheet-title-block strong{display:block;margin-top:6px;color:white;font:600 10px/1.35 var(--mono);text-transform:uppercase}
body[data-page-id="S-09"] #trust-tabs .decision-tabs{background:var(--cream)}body[data-page-id="S-09"] #trust-tabs .tab-rail{background:var(--cream)}body[data-page-id="S-09"] #trust-tabs .tab-button[aria-selected=true]{background:var(--cream);color:var(--charcoal)}body[data-page-id="S-09"] #trust-tabs .tab-button[aria-selected=true]::before{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--gold);content:""}body[data-page-id="H-01"] .sector-film{background:var(--cream)}body[data-page-id="H-01"] .sector-film .media-card{background:var(--charcoal);padding:8px}
.accordion-toggle{display:none}.not-found{padding-top:180px}.static-render *{animation:none!important;transition:none!important}.static-render .site-header,.static-render .reading-index{position:relative!important;top:auto!important}.static-render .dimension-cursor{display:none!important}.static-render .page-datum path{stroke-dashoffset:0!important}.static-render .hero-assembly .assembly-layer{stroke-dashoffset:0!important}.static-render .hero-media{transform:none!important}.static-render .site-header{position:relative!important}
@media(min-width:1280px){body::after{position:fixed;z-index:990;inset:12px;border:1px solid rgba(200,169,106,.72);pointer-events:none;content:""}body[data-cursor="drawing"]{cursor:none}body[data-cursor="drawing"] .dimension-cursor{display:block}.hero h1{font-size:clamp(66px,5.4vw,84px)}body[data-page-id="S-09"] #trust-tabs .decision-tabs{display:grid;grid-template-columns:285px 1fr;border-top:0;border-left:1px solid var(--gold)}body[data-page-id="S-09"] #trust-tabs .tab-rail{display:block;border-right:1px solid var(--gold)}body[data-page-id="S-09"] #trust-tabs .tab-button{display:block;width:100%;padding:15px 18px;border:0;border-bottom:1px solid var(--stone)}body[data-page-id="S-09"] #trust-tabs .tab-button b{font-size:19px}body[data-page-id="S-09"] #trust-tabs .tab-panel{grid-column:2}.static-render .hero{min-height:900px}}
@media(max-width:900px){:root{--header:68px}.primary-nav,.header-cta{display:none}.header-inner{grid-template-columns:1fr auto}.menu-toggle{display:block}.page-datum{left:8px;opacity:.55}.dimension-cursor,.margin-numeral{display:none!important}.hero{min-height:100svh}.hero h1{font-size:clamp(43px,11.6vw,56px)}.hero .lede{font-size:16px;line-height:1.5}.hero-content{padding-top:calc(var(--header) + 110px);padding-bottom:54px}.hero-media{right:-44%;top:16%;width:125%;height:48%;opacity:.22;transform:none}.hero-assembly{right:-34%;top:13%;width:118%;height:48%;opacity:.75}.hero::after{background:linear-gradient(0deg,rgba(15,17,19,.94) 0,rgba(15,17,19,.68) 70%,rgba(15,17,19,.18))}.hero-sheet-id{right:12px;top:calc(var(--header) + 14px)}.visual-label{right:12px;bottom:12px;max-width:65%;text-align:right}.breadcrumb{top:calc(var(--header) + 18px);left:20px}.section-heading,.tab-layout,.reading-layout,.cta-band .container,.footer-brand{grid-template-columns:1fr}.section-heading{gap:22px}.worlds{display:block;min-height:0}.world{min-height:470px;margin-bottom:12px}.world .spec-sheet{min-height:470px}.tab-rail{display:flex;overflow-x:auto}.tab-button{flex:0 0 78%}.tab-layout,.tab-media{min-height:0}.tab-media{padding:10px}.tab-media .spec-sheet{min-height:420px}.fact-grid{grid-template-columns:1fr}.media-grid,.media-grid--four{grid-template-columns:1fr}.gallery-strip{grid-auto-columns:88vw}.gallery-strip .spec-sheet{min-height:430px}.spec-sheet,.ratio-21x9 .spec-sheet,.ratio-4x5 .spec-sheet,.ratio-4x3 .spec-sheet,.ratio-1x1 .spec-sheet{min-height:430px}.spec-field{grid-template-columns:48px 1fr}.spec-title-block{grid-template-columns:1fr}.spec-title-block strong{border-left:0;border-top:1px solid #363a3d}.scope-board{grid-template-columns:1fr 1fr}.reading-index{position:static;margin-bottom:32px}.reading-copy{columns:1}.elevation-ribbon{grid-auto-columns:88vw}.footer-map{grid-template-columns:1fr 1fr}.footer-map a,.footer-legal a{display:flex;min-height:48px;align-items:center}.footer-contact,.footer-legal{display:grid}.sheet-title-block{grid-template-columns:1fr 1fr}.sheet-title-block>div{min-height:78px;border-bottom:1px solid var(--gold)}.mega-menu{display:none}body[data-page-id="S-09"] .decision-tabs>.tab-rail{display:none}body[data-page-id="S-09"] .tab-panel,body[data-page-id="S-09"] .tab-panel[hidden]{display:block!important;border-bottom:1px solid var(--stone)}body[data-page-id="S-09"] .accordion-toggle{display:block;width:100%;padding:20px;border:0;border-left:3px solid var(--gold);background:var(--cream);text-align:left;font:350 27px/1.1 var(--display)}body[data-page-id="S-09"] .accordion-toggle::after{float:right;content:"+";color:var(--gold-deep)}body[data-page-id="S-09"] .accordion-toggle[aria-expanded="true"]::after{content:"−"}body[data-page-id="S-09"] .accordion-body[hidden]{display:none}.static-render .hero{min-height:844px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reading-index{position:relative;top:auto}.hero-media{transform:none!important}.dimension-cursor{display:none!important}.page-datum path,.hero-assembly .assembly-layer{stroke-dashoffset:0!important}}
.dimension-cursor{visibility:hidden}.dimension-cursor.is-active{visibility:visible}
.eyebrow,.spec-head b,.spec-field b,.spec-title-block b{color:var(--charcoal)}.hero .eyebrow,.section--dark .eyebrow,.site-footer .eyebrow{color:var(--gold)}
.site-footer{padding-top:40px}.footer-row{padding:24px 0}.footer-brand img{max-width:205px}.footer-brand h2{font-size:38px}.footer-map a{font-size:12px;line-height:1.45}.footer-contact p{margin:0}.sheet-title-block>div{min-height:84px}
body[data-page-type="support"] .site-footer,body[data-page-id="S-09"] .site-footer{background:var(--cream);color:var(--charcoal)}body[data-page-type="support"] .footer-brand,body[data-page-id="S-09"] .footer-brand{margin-inline:-24px;padding:24px;background:var(--charcoal);color:white}body[data-page-type="support"] .footer-map a,body[data-page-id="S-09"] .footer-map a{color:var(--muted)}body[data-page-type="support"] .footer-contact,body[data-page-type="support"] .footer-legal,body[data-page-id="S-09"] .footer-contact,body[data-page-id="S-09"] .footer-legal{color:var(--charcoal)}body[data-page-type="support"] .sheet-title-block,body[data-page-id="S-09"] .sheet-title-block{background:var(--charcoal);color:white}
body[data-page-id="S-01"] .section--dark{background:linear-gradient(180deg,var(--charcoal) 0 62%,var(--cream) 78%)}
body[data-page-id="R-01"] .site-footer,body[data-page-id="H-01"] .site-footer,body[data-page-id="T-01"] .site-footer{background:var(--cream);color:var(--charcoal)}body[data-page-id="R-01"] .footer-brand,body[data-page-id="H-01"] .footer-brand,body[data-page-id="T-01"] .footer-brand{margin-inline:-24px;padding:24px;background:var(--charcoal);color:white}body[data-page-id="R-01"] .footer-map a,body[data-page-id="H-01"] .footer-map a,body[data-page-id="T-01"] .footer-map a{color:var(--muted)}body[data-page-id="R-01"] .sheet-title-block,body[data-page-id="H-01"] .sheet-title-block,body[data-page-id="T-01"] .sheet-title-block{background:var(--charcoal);color:white}
body[data-page-id="S-09"] .hero{background:var(--cream);color:var(--charcoal)}body[data-page-id="S-09"] .hero::before{background:radial-gradient(circle at 77% 45%,rgba(200,169,106,.18),transparent 30%),linear-gradient(115deg,rgba(255,255,255,.55),transparent 60%)}body[data-page-id="S-09"] .hero::after{background:linear-gradient(90deg,rgba(244,240,230,.98) 0,rgba(244,240,230,.84) 46%,rgba(244,240,230,.2) 80%),linear-gradient(0deg,var(--cream),transparent 38%)}body[data-page-id="S-09"] .hero .lede{color:var(--ink)}body[data-page-id="S-09"] .hero .eyebrow{color:var(--charcoal)}body[data-page-id="S-09"] .hero-media{opacity:.58}body[data-page-id="S-09"] .hero-sheet-id,body[data-page-id="S-09"] .visual-label{background:rgba(244,240,230,.9);color:var(--charcoal)}
.spec-title-block em{color:var(--charcoal)}
.media-card figcaption{color:#3f3b36}
body[data-page-type="support"] .footer-map b,body[data-page-id="S-09"] .footer-map b,body[data-page-id="R-01"] .footer-map b,body[data-page-id="H-01"] .footer-map b,body[data-page-id="T-01"] .footer-map b{color:var(--charcoal)}
body[data-page-id="R-01"] .gallery-strip figcaption,body[data-page-id="H-01"] .gallery-strip figcaption,body[data-page-id="T-01"] .gallery-strip figcaption{color:#e4dfd4}
.elevation-sheet>p span{color:var(--charcoal)}
.breadcrumb{display:flex;align-items:center;gap:8px;max-width:min(64vw,760px)}.breadcrumb i{color:var(--gold);font-style:normal}.breadcrumb [aria-current="page"]{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.review-watermark{letter-spacing:.18em}.hero-assembly--abstract-sheet .assembly-layer{fill:rgba(244,240,230,.02)}
.consent-bar{position:fixed;z-index:1200;inset:auto 0 0;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:18px max(var(--gutter),calc((100vw - var(--max))/2));border-top:1px solid var(--gold);background:var(--cream);color:var(--charcoal);box-shadow:0 -10px 32px rgba(23,26,29,.12)}.consent-bar[hidden]{display:none}.consent-bar strong{font:350 24px var(--display)}.consent-bar p{margin:2px 0 0;color:var(--muted);font-size:13px}.consent-actions{display:flex;gap:8px}.consent-actions button{min-height:44px;padding:10px 15px;border:1px solid var(--charcoal);background:transparent;color:var(--charcoal);font:700 10px var(--mono);letter-spacing:.06em;text-transform:uppercase}.consent-actions [data-consent-accept]{border-color:var(--gold);background:var(--gold)}.consent-actions button:focus-visible{outline:2px solid var(--charcoal);outline-offset:2px}
@media(max-width:900px){.breadcrumb{max-width:calc(100vw - 190px);gap:5px;overflow:hidden;white-space:nowrap}.breadcrumb a,.breadcrumb i{flex:none}.breadcrumb [aria-current="page"]{min-width:0;overflow:hidden;text-overflow:ellipsis}.consent-bar{grid-template-columns:1fr;padding:16px 20px}.consent-actions{display:grid;grid-template-columns:1fr 1fr}body[data-page-type="support"] .footer-brand,body[data-page-id="S-09"] .footer-brand,body[data-page-id="R-01"] .footer-brand,body[data-page-id="H-01"] .footer-brand,body[data-page-id="T-01"] .footer-brand{margin-inline:0;padding:20px}}

/* --------------------------------------------------------------------------
   v4.2 authorised typographic colour and interaction amendment
   -------------------------------------------------------------------------- */
html {
  scroll-padding-top: calc(var(--header) + var(--space-3));
}

::selection {
  color: var(--mps-cream);
  background: var(--mps-charcoal);
}

body {
  color: var(--mps-ink-70);
  font-size: var(--type-0);
  font-feature-settings: "liga" 1, "kern" 1;
  font-kerning: normal;
  hyphens: none;
  text-align: start;
  text-wrap: pretty;
}

:where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--display);
  font-optical-sizing: auto;
  text-wrap: balance;
}

h1 {
  margin-block: .75em .25em;
  color: var(--mps-ink);
  font-size: var(--type-6);
  font-variation-settings: "SOFT" 0, "WONK" 0, "wght" 360;
  font-weight: 360;
  letter-spacing: -.015em;
}

h2 {
  margin-block: .75em .25em;
  color: var(--mps-ink);
  font-size: var(--type-5);
  letter-spacing: -.015em;
}

h3 {
  margin-block: .75em .25em;
  color: var(--mps-ink); /* AA fallback: deep gold is 2.91:1 on cream. */
  font: 700 var(--type-1)/1.22 var(--mono);
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
}

.hero h1,
.section-heading h2,
.tab-copy h3,
.cta-band h2 {
  margin-top: 0;
}

.hero h1,
.section--dark h1,
.section--dark h2,
.cta-band h2,
.site-footer h2 {
  color: var(--mps-cream);
}

body[data-page-id="S-09"] .hero h1 {
  color: var(--mps-ink);
}

.section--dark h3,
.cta-band h3,
.site-footer h3 {
  color: var(--mps-gold);
}

h1 .acc {
  color: var(--mps-gold);
  font-style: italic;
}

main h2::before {
  display: block;
  width: 48px;
  height: 1px;
  margin-bottom: var(--space-2);
  background: var(--mps-gold);
  content: "";
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 420ms var(--ease);
}

main h2.is-typographically-visible::before,
.static-render main h2::before {
  transform: scaleX(1);
}

.eyebrow {
  gap: 12px;
  color: var(--mps-ink); /* Small-text AA fallback from specified deep gold. */
  font-family: var(--mono);
  letter-spacing: .15em;
}

.eyebrow::before {
  flex: 0 0 32px;
  width: 32px;
  background: var(--mps-gold);
}

.hero .eyebrow,
.section--dark .eyebrow,
.site-footer .eyebrow {
  color: var(--mps-gold);
}

body[data-page-id="S-09"] .hero .eyebrow {
  color: var(--mps-ink);
}

:where(p, li, dd) {
  text-wrap: pretty;
}

.lede,
.section-heading p,
.tab-copy > p,
.reading-copy p,
.reading-copy li,
.faq p {
  max-width: 72ch;
}

.section--dark,
.hero,
.cta-band,
.site-footer {
  color: var(--mps-cream-82);
}

.section--dark strong,
.hero strong,
.cta-band strong,
.site-footer strong {
  color: var(--mps-cream);
}

body[data-page-id="S-09"] .hero,
body[data-page-type="support"] .site-footer,
body[data-page-id="S-09"] .site-footer,
body[data-page-id="R-01"] .site-footer,
body[data-page-id="H-01"] .site-footer,
body[data-page-id="T-01"] .site-footer {
  color: var(--mps-ink-70);
}

strong,
b {
  color: var(--mps-ink);
}

.site-header b,
.site-footer .footer-brand b {
  color: var(--mps-cream);
}

:where(main p, main li, main dd, main blockquote) a:not(.button) {
  color: var(--mps-ink);
  text-decoration-color: var(--mps-gold);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

:where(.section--dark, .hero, .cta-band) :where(p, li, dd, blockquote) a:not(.button) {
  color: var(--mps-cream);
}

:where(main p, main li, main dd, main blockquote) a:not(.button):hover {
  color: var(--mps-ink); /* Deep gold is not AA for body-size text on cream. */
  text-decoration-thickness: 2px;
}

:where(.section--dark, .hero, .cta-band) :where(p, li, dd, blockquote) a:not(.button):hover {
  color: var(--mps-cream);
}

.button--gold:hover {
  color: var(--mps-charcoal);
}

blockquote,
.pull-quote {
  position: relative;
  margin-inline: 0;
  padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--mps-gold);
  color: var(--mps-ink);
}

blockquote::before,
.pull-quote::before {
  position: absolute;
  left: 10px;
  top: 4px;
  color: var(--mps-gold);
  content: "“";
  font: 360 var(--type-5)/1 var(--display);
}

.reading-copy section > p:first-of-type::first-letter {
  float: left;
  margin: 8px 10px 0 0;
  color: var(--mps-gold-deep);
  font: 350 72px/.7 var(--display);
}

:where(table, .fact-grid, .scope-board, .spec-sheet, .sheet-title-block,
  .hero-sheet-id, .visual-label, .margin-numeral, .dimension-cursor, .viewer-tab,
  .review-toolbar) {
  font-variant-numeric: tabular-nums;
}

:where(table, .fact-grid, .scope-board) :where(td, th, b, span),
.dimension-cursor output {
  font-family: var(--mono);
}

.reading-index a {
  border-left: 2px solid transparent;
  color: var(--mps-ink-70);
  transition: border-color 160ms var(--ease), color 160ms var(--ease), padding 160ms var(--ease);
}

.reading-index a.is-active,
.reading-index a[aria-current="true"] {
  padding-left: 12px;
  border-left-color: var(--mps-gold);
  color: var(--mps-ink);
}

[id] {
  scroll-margin-top: calc(var(--header) + var(--space-3));
}

:focus-visible {
  outline: 2px solid var(--mps-gold) !important;
  outline-offset: 3px !important;
}

.site-header { transition: background-color 180ms var(--ease), box-shadow 180ms var(--ease); }

.primary-nav a.is-current,
.nav-trigger.is-current {
  box-shadow: inset 0 -2px 0 var(--mps-gold);
}

[role="tab"][data-key-hint] {
  isolation: isolate;
}

[role="tab"]::after {
  content: attr(data-key-hint);
  display: block;
  max-height: 0;
  overflow: hidden;
  color: currentColor;
  font: 600 8px/1.3 var(--mono);
  letter-spacing: .04em;
  opacity: 0;
  transition: max-height 160ms var(--ease), opacity 160ms var(--ease);
}

[role="tab"]:focus-visible::after {
  max-height: 18px;
  margin-top: 6px;
  opacity: .72;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.media-card--spec[aria-haspopup="dialog"],
.gallery-strip .media-card[aria-haspopup="dialog"] {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: none;
  grid-template-rows: auto 1fr auto;
  padding: var(--space-3);
  background: rgb(23 26 29 / 96%);
  color: var(--mps-cream);
}

.lightbox.is-open {
  display: grid;
}

.lightbox__toolbar {
  display: flex;
  justify-content: flex-end;
}

.lightbox__close,
.lightbox__nav {
  min-width: 48px;
  min-height: 48px;
  border: 1px solid var(--mps-gold);
  background: transparent;
  color: var(--mps-cream);
  font-family: var(--mono);
}

.lightbox__stage {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  gap: var(--space-2);
  align-items: center;
  min-height: 0;
}

.lightbox__content {
  display: grid;
  place-items: center;
  height: min(72vh, 840px);
  overflow: hidden;
}

.lightbox__content > * {
  width: min(100%, 1080px);
  height: 100%;
}

.lightbox__caption {
  padding: var(--space-2) 64px 0;
  border-top: 1px solid var(--mps-gold);
  color: var(--mps-cream);
  font: 600 var(--type--1)/1.5 var(--mono);
}

.review-toolbar {
  position: fixed;
  z-index: 1500;
  left: 16px;
  bottom: 16px;
  width: min(320px, calc(100vw - 32px));
  border: 1px solid var(--mps-gold);
  background: rgb(23 26 29 / 96%);
  color: var(--mps-cream);
  box-shadow: 0 16px 48px rgb(0 0 0 / 28%);
  font: 600 10px/1.45 var(--mono);
}

.review-toolbar__toggle {
  width: 100%;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  color: var(--mps-gold);
  text-align: left;
  font: inherit;
  text-transform: uppercase;
}

.review-toolbar__body {
  padding: 0 14px 14px;
  border-top: 1px solid rgb(200 169 106 / 36%);
}

.review-toolbar__body[hidden] {
  display: none;
}

.review-toolbar dl {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 5px 10px;
}

.review-toolbar dt {
  color: var(--mps-gold);
}

.review-toolbar dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.review-toolbar a {
  color: var(--mps-cream);
  text-decoration-color: var(--mps-gold);
}

.project-form-shell {
  margin-block: var(--space-6);
  padding: clamp(24px, 5vw, 56px);
  border-top: 1px solid var(--mps-gold);
  background: var(--mps-paper);
}

.project-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 920px;
}

.form-field {
  display: grid;
  gap: 7px;
}

.form-field--wide,
.form-actions,
.form-summary,
.form-success {
  grid-column: 1 / -1;
}

.form-field label {
  color: var(--mps-ink);
  font-weight: 700;
}

.form-field :where(input, select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #7a7974;
  border-radius: 0;
  background: var(--mps-white);
  color: var(--mps-ink);
}

.form-field textarea {
  min-height: 144px;
  resize: vertical;
}

.form-helper,
.form-error {
  margin: 0;
  font: 600 11px/1.45 var(--mono);
}

.form-error {
  color: #7d231c;
}

.form-field [aria-invalid="true"] {
  border-color: #7d231c;
  box-shadow: inset 4px 0 0 #7d231c;
}

.form-summary {
  padding: var(--space-3);
  border-left: 2px solid #7d231c;
  background: #fff7f4;
  color: var(--mps-ink);
}

.form-summary[hidden],
.form-success[hidden] {
  display: none;
}

.form-success {
  padding: var(--space-4);
  border-left: 2px solid var(--mps-gold);
  background: var(--mps-cream);
}

.not-found .hub-return-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--space-5);
  background: var(--mps-gold);
}

.not-found .hub-return-links a {
  min-height: 80px;
  padding: var(--space-2);
  background: var(--mps-charcoal);
  color: var(--mps-cream);
  font: 600 11px/1.45 var(--mono);
}

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 200ms;
  animation-timing-function: var(--ease);
}

::view-transition-old(root) {
  animation-name: mps-fade-out;
}

::view-transition-new(root) {
  animation-name: mps-fade-in;
}

@keyframes mps-fade-out {
  to { opacity: 0; background: var(--mps-cream); }
}

@keyframes mps-fade-in {
  from { opacity: 0; background: var(--mps-cream); }
}

@media (max-width: 900px) {
  .review-toolbar {
    bottom: 68px;
    width: min(260px, calc(100vw - 32px));
  }

  .project-form {
    grid-template-columns: 1fr;
  }

  .not-found .hub-return-links {
    grid-template-columns: 1fr 1fr;
  }

  .lightbox {
    padding: 12px;
  }

  .lightbox__stage {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    gap: 6px;
  }

  .lightbox__caption {
    padding-inline: 0;
  }
}

/* WEB-09 — H-02 hero rhythm, alternating grounds and square editorial details. */
body[data-page-id="H-02"] {
  --h02-ground-light: #FDFCF9;
  --h02-ground-beige: #F6F2EA;
  /* CC-WEB-15 §2 — between sections: more. H-02 carries its own band rhythm, and it was TIGHTER
     than the rest of the site: 96px a side (a 192px boundary at 1440) against the global 130px
     (259px). H-02 is the page the owner opened when he asked for more air between sections.
     Raised 96px -> 120px, in step with the global rule, so the boundary goes 192px -> 240px. The
     separate rhythm itself is kept, not levelled: the alternating light/beige grounds below are a
     deliberate H-02 design and are reported as such in §4 rather than flattened. */
  --h02-section-rhythm: 120px;
}
body[data-page-id="H-02"] .hero--h02 { background: var(--h02-ground-light); }
body[data-page-id="H-02"] .h02-technical-set { background: var(--h02-ground-beige); }
body[data-page-id="H-02"] #decision-tabs { background: var(--h02-ground-light); }
body[data-page-id="H-02"] .h02-arrival { background: var(--h02-ground-beige); }
body[data-page-id="H-02"] .h02-walkaround { background: var(--h02-ground-light); }
body[data-page-id="H-02"] .h02-inside { background: var(--h02-ground-beige); }
body[data-page-id="H-02"] .h02-colourways { background: var(--h02-ground-light); }
body[data-page-id="H-02"] #reading-zone { background: var(--h02-ground-beige); }
/* CC-WEB-15 §4 — the owned drawing set was the one band on H-02 that stayed outside H-02's own
   rhythm: 158.4px padding against the page's 120px, on the site's paper rather than either of the
   page's two grounds. Measured at 1440 it was the only band of the nine that did not match its
   neighbours. It now alternates with the band above it like the rest of the page. */
body[data-page-id="H-02"] #owned-drawing-set { background: var(--h02-ground-beige); }
/* CC-WEB-15 §4 — the related-routes band joins H-02's own ground and band rhythm rather than
   importing the site's paper into H-02's palette, so the new band reads as native on the page the
   owner reviews rather than as a strip borrowed from another site. */
body[data-page-id="H-02"] .related-routes { background: var(--h02-ground-light); }
body[data-page-id="H-02"] .cta-band {
  background: var(--h02-ground-light);
  color: var(--charcoal);
}
body[data-page-id="H-02"] .cta-band h2 { color: var(--charcoal); }
body[data-page-id="H-02"] .site-footer {
  background: var(--h02-ground-beige);
  color: var(--charcoal);
}
body[data-page-id="H-02"] .h02-technical-set,
body[data-page-id="H-02"] #decision-tabs,
body[data-page-id="H-02"] .h02-arrival,
body[data-page-id="H-02"] .h02-walkaround,
body[data-page-id="H-02"] .h02-inside,
body[data-page-id="H-02"] .h02-colourways,
body[data-page-id="H-02"] #reading-zone,
body[data-page-id="H-02"] .cta-band,
body[data-page-id="H-02"] #owned-drawing-set,
body[data-page-id="H-02"] .related-routes,
body[data-page-id="H-02"] .site-footer { padding-block: var(--h02-section-rhythm); }
body[data-page-id="H-02"] .h02-hero-copy { width: min(680px, 65%); }

/* CC-WEB-15 §1 — this block was written `body[data-page-id="H-02"] …`, so the editorial split
   laid out on H-02 and on no other page. The same markup is emitted by product_template_main()
   for all 26 product routes, where it fell back to `display:block`: copy full width, then the
   detail images full width beneath it, and no image column at all. Measured on the untouched
   baseline, R-03/C-02/T-02 at 1440: split display=block, pair 1963px tall against a 566px copy.
   The scope is removed so the shared template lays out the same way on every route that uses it. */
.h02-editorial-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 430px;
  gap: 48px;
  /* CC-WEB-05 §2.4 — the image column stretches to the text column so no blank cell is left
     under it at any text length. It was `start`, which left 582px empty at 1440. */
  align-items: stretch;
  margin-bottom: 44px;
}
.h02-editorial-split--image-left {
  grid-template-columns: 430px minmax(0, 1fr);
}
.h02-editorial-split .h02-carousel-copy {
  margin-bottom: 0;
}
.h02-editorial-split .h02-carousel-copy--wide > div:last-child {
  width: 100%;
}
/* CC-WEB-15 §1/§4 — the copy inside a split reads as one column. Unscoped for the same reason:
   `.h02-carousel-copy` is a 7fr/4fr two-column grid by default, which on the other 25 routes
   split an already-narrowed 842px text column into two cramped columns. `--wide` is emitted by
   product_template_main() for the `inside` and `colourways` sections only, and both of those sit
   inside an editorial split, so these rules reach exactly the copy they are written for. */
.h02-editorial-split .h02-carousel-copy--wide {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.h02-editorial-split .h02-carousel-copy--wide > div:last-child {
  font-size: 19px;
  line-height: 1.65;
}
body[data-page-id="H-02"] .h02-editorial-detail {
  width: 100%;
  aspect-ratio: 1;
}
body[data-page-id="H-02"] .h02-editorial-detail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CC-WEB-05 §2.4 — the stacked detail column: square slots one above the other, the column
   sized to the text column, the images filling their cells with no fixed aspect. One caption
   under the stack.

   CC-WEB-15 §1 — the measured cause of the owner's blank column, and the fix.
   CAUSE: the inner was `position:sticky` with `height: min(100%, calc(100vh - 132px))`. That
   caps the image stack to the VIEWPORT, not to the text column, so as soon as the text column
   is taller than the viewport the images stop short and the rest of the column is empty paper.
   Measured on the baseline at viewport height 900: inner 768px against a 1012px text column =
   148px blank at 1440, 221px at 1280, 276px on `compare the settings` at 1280. The blank grows
   as the viewport shortens — on a 1440x810 laptop the cap is 678px, which is the ~one third of
   the column the owner photographed. CC-WEB-05 §2.4 measured "0 px residual" against a text
   column that happened to be shorter than the viewport, which is why it read as 0 then.
   FIX: the stack fills its cell — `height:100%`, cells `flex:1 1 0`, caption `flex:0 0 auto`.
   Residual is 0 by construction at any width, any text length and any number of cells, rather
   than 0 at the one text length that was measured. Sticky is gone: a column that travels with
   the scroll and a column with no blank space under it are mutually exclusive, and the owner
   asked for the second. */
.h02-detail-pair {
  width: 100%;
  height: 100%;
  min-height: 0;
}
.h02-detail-pair__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
}
.h02-detail-pair__cell {
  margin: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background: var(--paper, #f4f0e6);
}
.h02-detail-pair__cell img,
.h02-detail-pair__cell picture,
.h02-detail-pair__cell .spec-sheet {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.h02-detail-pair__caption {
  margin: 0;
  flex: 0 0 auto;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--muted, #6c6a64);
}

@media (max-width: 900px) {
  /* CC-WEB-15 §2 — the same increase at the narrow end: 64px -> 80px, boundary 128px -> 160px. */
  body[data-page-id="H-02"] { --h02-section-rhythm: 80px; }
  body[data-page-id="H-02"] .h02-hero-copy { width: 100%; }
  /* CC-WEB-15 §1 — unscoped with the desktop block above, so the single-column fallback is the
     same on all 26 product routes rather than on H-02 alone. */
  .h02-editorial-split,
  .h02-editorial-split--image-left {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin-bottom: 36px;
  }
  body[data-page-id="H-02"] .h02-editorial-detail {
    grid-row: 1;
    width: 100%;
  }
  /* CC-WEB-05 §2.4 — single column: the stack sits above the text as squares, not sticky, so
     there is no image column beside the text and therefore no blank cell under one. The cells
     stop flexing here and take their own square height; the column height is their sum, so the
     residual is 0 because container and content are the same box. */
  .h02-detail-pair {
    grid-row: 1;
    height: auto;
  }
  .h02-detail-pair__inner {
    height: auto;
    gap: 12px;
  }
  .h02-detail-pair__cell {
    flex: 0 0 auto;
    aspect-ratio: 1;
  }
}

/* Phase 0.8 — v4.4 authorised folio, carousel and banner components */
.signature-carousel-section { overflow: hidden; }
.signature-carousel__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.signature-carousel__head h2 { max-width: 22ch; }
.signature-carousel__nav { display: flex; gap: 10px; }
.signature-carousel__nav button {
  width: 46px;
  height: 46px;
  border: 1px solid var(--charcoal);
  background: transparent;
  color: var(--charcoal);
  font: 500 18px/1 var(--body);
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.signature-carousel__nav button:is(:hover, :focus-visible) { background: var(--charcoal); color: var(--gold); }
.signature-carousel__nav button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.signature-carousel {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 0 0 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.signature-carousel::-webkit-scrollbar { display: none; }
.signature-carousel:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.signature-card {
  flex: 0 0 340px;
  scroll-snap-align: start;
  border: 1px solid var(--stone);
  background: var(--paper);
}
.signature-card > a { display: block; height: 100%; color: inherit; text-decoration: none; }
.signature-card__visual { position: relative; height: 230px; overflow: hidden; background: var(--charcoal); }
.signature-card__visual .media-card,
.signature-card__visual .spec-sheet { width: 100%; height: 100%; min-height: 0; }
.signature-card__visual .spec-sheet { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.signature-card:hover .signature-card__visual .spec-sheet,
.signature-card:focus-within .signature-card__visual .spec-sheet { transform: scale(1.045); }
.signature-card__visual figcaption {
  position: absolute;
  z-index: 5;
  left: 12px;
  bottom: 12px;
  max-width: calc(100% - 24px);
  padding: 4px 8px;
  background: rgba(23,26,29,.68);
  color: rgba(255,255,255,.9);
  font-size: 8px;
}
.signature-card__body { padding: 22px 22px 26px; border-top: 1px solid var(--stone); }
.signature-card__sheet {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
  color: var(--muted);
  font: 600 10px/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.signature-card__name { margin: 0 0 8px; font: 500 22px/1.15 var(--display); }
.signature-card__promise { min-height: 66px; margin: 0 0 16px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.signature-card__facts { display: flex; gap: 14px; margin: 0; color: var(--charcoal); font: 700 9px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.signature-card__facts span { flex: 1; padding-top: 6px; border-top: 1px solid var(--gold); }

.signature-banner::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  content: "";
  opacity: .5;
}
.signature-banner .eyebrow { position: relative; z-index: 2; color: var(--gold); }
.signature-banner__line { max-width: 26ch; font-weight: 300; }
.signature-banner__line em { color: var(--gold); font-style: italic; }

.folio-zone { background: var(--cream); }
.folio-zone__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  align-items: end;
  margin-bottom: 48px;
}
.folio-zone__head h2 { max-width: 22ch; }
.folio-zone__head > p { max-width: 34ch; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.folio-list { border-bottom: 1px solid var(--stone); }
details.folio {
  margin: 0 0 -1px;
  border: 1px solid var(--stone);
  border-right: 0;
  border-left: 0;
  background: var(--paper);
}
details.folio summary {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 44px;
  gap: 28px;
  align-items: center;
  padding: 30px 26px;
  list-style: none;
  cursor: pointer;
  transition: background .3s ease;
}
details.folio summary::-webkit-details-marker { display: none; }
details.folio summary:hover { background: var(--cream); }
details.folio summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.folio-number {
  color: transparent;
  font: 300 52px/1 var(--display);
  -webkit-text-stroke: 1px var(--gold);
}
.folio-cover { display: grid; gap: 6px; }
.folio-title { font: 380 clamp(20px,2vw,27px)/1.2 var(--display); text-wrap: balance; }
.folio-summary { max-width: 62ch; color: var(--muted); font-size: 14px; line-height: 1.5; }
.folio-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--stone);
  color: var(--gold-deep);
  font: 300 20px/1 var(--body);
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.folio-icon::before { content: "+"; }
details.folio[open] .folio-icon { border-color: var(--charcoal); background: var(--charcoal); color: var(--gold); }
details.folio[open] .folio-icon::before { content: "−"; }
.folio-body { max-width: 1080px; padding: 8px 26px 54px 142px; }
.folio-columns { columns: 2; column-gap: 56px; }
.folio-columns .prose-paragraph { max-width: none; margin: 0 0 18px; break-inside: avoid-column; color: var(--muted); font-size: 15.5px; line-height: 1.65; }
.folio-columns > .prose-paragraph:first-of-type::first-letter {
  float: left;
  padding: 6px 10px 0 0;
  color: var(--gold-deep);
  font: 380 58px/.82 var(--display);
}
.folio-pull {
  margin: 8px 0 24px;
  padding: 6px 0 6px 22px;
  break-inside: avoid;
  border-left: 2px solid var(--gold);
  color: var(--charcoal);
  font: 500 20px/1.4 var(--display);
}
.folio-inshort {
  margin: 26px 0 0;
  padding-top: 16px;
  break-inside: avoid;
  border-top: 1px solid var(--stone);
  color: var(--charcoal);
  font: 600 11px/1.55 var(--mono);
  letter-spacing: .08em;
  text-transform: none;
}
.folio-inshort span { color: var(--gold-deep); }
.folio[data-folio-animating] .folio-body { overflow: hidden; }
.folio-faq { margin-top: clamp(70px, 8vw, 110px); }
.folio-faq > h2 { max-width: 28ch; }

@media (max-width: 860px) {
  .signature-carousel__head { align-items: start; }
  .signature-card { flex-basis: 280px; }
  .signature-card__visual { height: 200px; }
  .signature-card__facts { gap: 8px; font-size: 8px; }
  .folio-zone__head { grid-template-columns: 1fr; }
  details.folio summary { grid-template-columns: 56px minmax(0, 1fr) 44px; gap: 16px; padding: 22px 16px; }
  .folio-number { font-size: 34px; }
  .folio-title { font-size: 21px; }
  .folio-body { padding: 0 16px 40px; }
  .folio-columns { columns: 1; }
}

@media (max-width: 520px) {
  .signature-carousel__head { display: grid; }
  .signature-carousel__nav { justify-self: end; }
  .signature-card { flex-basis: min(280px, 82vw); }
  details.folio summary { grid-template-columns: 44px minmax(0, 1fr) 36px; gap: 12px; }
  .folio-icon { width: 36px; height: 36px; }
  .folio-summary { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .signature-card__visual .spec-sheet { transform: none !important; }
}

@media print {
  details.folio > .folio-body { display: block !important; height: auto !important; overflow: visible !important; }
  .signature-carousel__nav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-header {
    transform: none !important;
  }

  main h2::before {
    transform: scaleX(1);
  }

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* Phase 0.7 — v4.3 authorised rhythm, media and signature layer */
.signature-intro {
  display: none;
}

.signature-first .signature-intro {
  position: fixed;
  z-index: 2000;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--mps-charcoal, #171a1d);
  pointer-events: none;
  contain: strict;
  transform: translateZ(0);
  will-change: opacity;
  animation: signature-intro-out 200ms 800ms forwards;
}

.has-js:not(.static-render) main > section {
  content-visibility: auto;
  contain-intrinsic-block-size: auto 1200px;
}

.has-js:not(.static-render) body main > section.section--dark {
  z-index: 2;
}

.signature-intro svg {
  width: 88px;
  fill: none;
  stroke: var(--mps-gold, #c8a96a);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.signature-first .signature-intro path {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: signature-monogram-draw 800ms linear forwards;
}

@keyframes signature-monogram-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes signature-intro-out {
  to { opacity: 0; visibility: hidden; }
}

.ratio-21x9 .spec-sheet { aspect-ratio: 21 / 9; min-height: 0; }
.ratio-16x9 .spec-sheet { aspect-ratio: 16 / 9; min-height: 0; }
.ratio-1x1 .spec-sheet { aspect-ratio: 1; min-height: 0; }
.ratio-a-land .spec-sheet { aspect-ratio: 1.414 / 1; min-height: 0; }
.hero-media .spec-sheet,
.world .spec-sheet,
.tab-media .spec-sheet { aspect-ratio: auto; }

.media-card {
  isolation: isolate;
}

.media-card::after {
  position: absolute;
  z-index: 9;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--mps-gold, #c8a96a);
  content: "";
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left;
}

.media-card.is-image-revealed::after {
  animation: image-reveal-wipe 600ms cubic-bezier(.22,.68,0,1) both;
}

@keyframes image-reveal-wipe {
  50% { transform: scaleX(1); transform-origin: left; }
  51% { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

.signature-banner {
  position: relative;
  min-height: clamp(360px, 50vw, 680px);
  display: grid;
  align-items: end;
  padding: clamp(52px, 7vw, 96px) 0;
  overflow: hidden;
}

.signature-banner__media {
  position: absolute;
  inset: clamp(24px, 4vw, 56px) var(--gutter);
  opacity: .26;
}

.signature-banner__media .media-card,
.signature-banner__media .spec-sheet {
  width: 100%;
  height: 100%;
}

.signature-banner::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23,26,29,.92), rgba(23,26,29,.2) 72%);
  content: "";
  pointer-events: none;
}

body[data-page-type="home"] .signature-banner,
body[data-page-type="hub"] .signature-banner,
body[data-page-type="support"] .signature-banner {
  background: var(--mps-charcoal, #171a1d);
}

body[data-page-type="home"] .signature-banner__media,
body[data-page-type="hub"] .signature-banner__media,
body[data-page-type="support"] .signature-banner__media {
  opacity: .04;
}

body[data-page-type="home"] .signature-banner::after,
body[data-page-type="hub"] .signature-banner::after,
body[data-page-type="support"] .signature-banner::after {
  display: none;
}

body[data-page-id="S-01"] .section--dark:not(.signature-banner) {
  background: var(--mps-charcoal, #171a1d);
}

body[data-page-id="S-01"] .signature-banner {
  min-height: 1120px;
}

body[data-page-id="S-01"] .signature-banner__media {
  top: 50%;
  bottom: auto;
  height: auto;
  aspect-ratio: 21 / 9;
  transform: translateY(-50%);
}

body[data-page-id="T-01"] .sector-film {
  color: var(--mps-white, #fff);
  background: var(--mps-charcoal, #171a1d);
}

body[data-page-id="T-01"] .sector-film .section-heading p { color: #d5d0c5; }
body[data-page-id="T-01"] .sector-film .eyebrow { color: var(--mps-gold, #c8a96a); }

.signature-banner .container {
  z-index: 2;
}

.signature-banner__line {
  max-width: 1050px;
  margin: 0;
  color: var(--mps-cream, #f4f0e6);
  font: 350 clamp(42px, 5vw, 76px)/.98 var(--display);
  letter-spacing: -.035em;
  text-wrap: balance;
}

.signature-banner figcaption { display: none; }
.section--dark .media-card figcaption { color: var(--cream); }
.world-content h3 { color: var(--mps-white, #fff); }
.world-content .eyebrow { color: var(--mps-gold, #c8a96a); }

.hub-index-sheet {
  position: relative;
  border-block: 1px solid var(--mps-charcoal, #171a1d);
}

.hub-index-row {
  position: relative;
  border-bottom: 1px solid var(--stone);
}

.hub-index-row:last-child { border-bottom: 0; }

.hub-index-row > a {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 54px minmax(230px, auto) minmax(40px, 1fr) 70px;
  gap: 18px;
  align-items: center;
  min-height: 106px;
  color: inherit;
  text-decoration: none;
}

.hub-index-row__number,
.hub-index-row__sheet {
  font: 700 11px/1.3 var(--mono);
  letter-spacing: .08em;
}

.hub-index-row__number { color: var(--mps-charcoal, #171a1d); }
.hub-index-row__sheet { text-align: right; }
.hub-index-row__title { display: grid; gap: 7px; }
.hub-index-row__title b { font: 350 clamp(28px, 3vw, 44px)/1 var(--display); }
.hub-index-row__title small { max-width: 64ch; color: var(--muted); font: 500 12px/1.5 var(--body); }
.hub-index-row__leaders { height: 1px; background-image: radial-gradient(circle, var(--mps-gold, #c8a96a) 1px, transparent 1.5px); background-size: 7px 1px; }

.hub-index-row__preview {
  position: absolute;
  z-index: 5;
  right: 86px;
  top: 50%;
  width: min(440px, 38vw);
  opacity: 0;
  pointer-events: none;
  transform: translate(44px, -50%);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.22,.68,0,1);
}

.hub-index-row:is(:hover, :focus-within) .hub-index-row__preview {
  opacity: 1;
  transform: translate(0, -50%);
}

.rhythm-card {
  break-inside: avoid;
  margin: 34px 0;
}

.rhythm-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--mps-gold, #c8a96a);
}

.rhythm-facts span {
  display: grid;
  gap: 7px;
  padding: 18px;
  background: var(--mps-cream, #f4f0e6);
  font: 700 10px/1.35 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.rhythm-facts b { color: var(--mps-charcoal, #171a1d); }

.pull-quote {
  padding: 6px 0 6px 25px;
  border-left: 2px solid var(--mps-gold, #c8a96a);
}

.pull-quote p {
  margin: 0 0 12px;
  font: 350 clamp(28px, 3vw, 42px)/1.08 var(--display);
}

.pull-quote cite,
.chapter-takeaway {
  font: 700 10px/1.45 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.inline-spec { max-width: 680px; }

.mini-diagram {
  padding: 20px;
  border-block: 1px solid var(--mps-gold, #c8a96a);
}

.mini-diagram svg { width: 100%; overflow: visible; }
.mini-diagram path { fill: none; stroke: var(--mps-charcoal, #171a1d); }
.mini-diagram circle { fill: var(--mps-gold, #c8a96a); }
.mini-diagram text { text-anchor: middle; font: 700 9px var(--mono); letter-spacing: .05em; }

.stat-numeral {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding-block: 12px;
  border-bottom: 1px solid var(--mps-gold, #c8a96a);
}

.stat-numeral strong {
  color: var(--gold-deep);
  font: 500 clamp(64px, 8vw, 112px)/.8 var(--mono);
  font-variant-numeric: tabular-nums;
}

.stat-numeral span { max-width: 30ch; font: 700 10px/1.45 var(--mono); text-transform: uppercase; }

.definition-card {
  padding: 22px;
  border: 1px solid var(--stone);
  background: var(--mps-white, #fff);
}

.definition-card b { display: block; margin-bottom: 9px; color: var(--gold-deep); font: 700 10px var(--mono); text-transform: uppercase; }
.definition-card p { margin: 0; }

.reading-copy { columns: auto; }
.reading-copy section { break-inside: auto; }
.reading-chapter { margin-bottom: clamp(70px, 9vw, 130px); }
.reading-chapter > h2 { max-width: 900px; }
.chapter-opening { display: flow-root; }
.media-card--margin { float: right; width: min(38%, 340px); margin: 8px 0 28px 38px; }
.reading-chapter .prose-paragraph { max-width: 72ch; font-size: 17px; line-height: 1.72; }
.reading-chapter .prose-paragraph:first-of-type::first-letter,
body[data-page-id="S-09"] .prose-stream .prose-paragraph:first-of-type::first-letter {
  float: left;
  margin: 8px 10px 0 0;
  color: var(--gold-deep);
  font: 350 72px/.7 var(--display);
}
.chapter-takeaway { clear: both; margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--mps-gold, #c8a96a); }
.panel-copy { max-height: none; overflow: visible; }

table:has(tbody tr:nth-child(9)) thead th {
  position: sticky;
  z-index: 2;
  top: var(--header);
  background: var(--mps-charcoal, #171a1d);
  color: var(--mps-cream, #f4f0e6);
}

table:has(tbody tr:nth-child(9)) tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--mps-gold, #c8a96a) 7%, transparent);
}

table:has(tbody tr:nth-child(9)) tbody tr { border-bottom: 1px solid var(--stone); }

.button--gold[data-magnetic] { will-change: transform; }

.static-render .signature-intro { display: none !important; }
.static-render .media-card::after { display: none; }
.static-render [data-count] { font-variant-numeric: tabular-nums; }
.static-render .review-toolbar { display: none !important; }

@media (max-width: 900px) {
  .ratio-21x9 .spec-sheet,
  .ratio-16x9 .spec-sheet,
  .ratio-1x1 .spec-sheet,
  .ratio-a-land .spec-sheet { min-height: 0; }

  .signature-banner { min-height: 520px; }
  .signature-banner__media { inset: 20px; }
  .signature-banner__line { font-size: clamp(39px, 12vw, 58px); }

  .hub-index-row > a {
    grid-template-columns: 36px 1fr 52px;
    gap: 10px;
    min-height: 126px;
  }
  .hub-index-row__leaders { display: none; }
  .hub-index-row__title small { font-size: 11px; }
  .hub-index-row__preview { display: none; }

  .media-card--margin {
    float: none;
    width: min(100%, 360px);
    margin: 20px 0 30px;
  }
  .rhythm-facts { grid-template-columns: 1fr; }
  .mini-diagram { overflow-x: auto; }
  .mini-diagram svg { min-width: 520px; }
  .stat-numeral { align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .signature-intro { display: none !important; }
  .media-card::after { display: none !important; }
  .hub-index-row__preview,
  .button--gold[data-magnetic] { transition: none !important; transform: none !important; }
}

/* v4.4 cascade lock: authorised demo values follow the earlier v4.3 layer. */
.signature-banner__line {
  max-width: 26ch;
  font-weight: 300;
}
.signature-banner__line em { color: var(--mps-gold, #c8a96a); font-style: italic; }
.signature-banner::before {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--mps-gold, #c8a96a) 30%, var(--mps-gold, #c8a96a) 70%, transparent);
  content: "";
  opacity: .5;
}

@media (prefers-reduced-motion: reduce) {
  details.folio summary,
  .folio-icon,
  .signature-card__visual .spec-sheet { transition: none !important; }
}

@media (min-width: 901px) {
  body[data-page-type="hub"] .signature-banner,
  body[data-page-type="support"] .signature-banner {
    min-height: 400px;
  }

  body[data-page-type="support"] .signature-banner { min-height: 375px; }
  body[data-page-type="support"] .signature-banner {
    background: linear-gradient(180deg, var(--mps-charcoal, #171a1d) 0 calc(50% - 12px), #3a4148 calc(50% - 12px) calc(50% + 12px), var(--mps-charcoal, #171a1d) calc(50% + 12px));
  }
  body[data-page-id="S-04"] .signature-banner {
    background: linear-gradient(180deg, var(--mps-charcoal, #171a1d) 0 calc(50% - 14px), #3a4148 calc(50% - 14px) calc(50% + 14px), var(--mps-charcoal, #171a1d) calc(50% + 14px));
  }
  body[data-page-id="C-01"] .signature-banner {
    min-height: 250px;
    background: linear-gradient(180deg, var(--mps-charcoal, #171a1d) 0 calc(50% - 84px), #3a4148 calc(50% - 84px) calc(50% + 84px), var(--mps-charcoal, #171a1d) calc(50% + 84px));
  }

  body[data-page-id="S-01"] .signature-banner {
    min-height: 1320px;
    background: #3a4148;
  }

  body[data-page-id="T-01"] .sector-film {
    background: linear-gradient(145deg, var(--mps-charcoal, #171a1d), #3a4148 74%, var(--mps-charcoal, #171a1d));
  }
}
.static-render body::after,
.static-render .page-datum { display: none !important; }
.static-render { scrollbar-width: none; }
.static-render::-webkit-scrollbar { display: none; }

/* Phase 0.9 — Technical Set: the only product drawing instrument. */
.technical-set {
  --technical-paper: #faf8f2;
  --technical-stone: #e2dbc9;
  --technical-stone-dark: #cfc6ae;
  overflow: clip;
  padding: 88px 0;
}

.technical-set__heading {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 48px;
  margin-bottom: 38px;
}
.technical-set__heading h2 {
  max-width: 20ch;
  font-size: clamp(29px, 3.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -.015em;
}
.technical-set__heading > p { max-width: 38ch; font-size: 14.5px; }

.technical-set__instrument {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
  align-items: stretch;
  width: 100%;
}

.technical-set__column {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.technical-set__label {
  margin: 0 0 10px;
  color: #5d5f60;
  font: 500 10.5px/1.25 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.technical-stage {
  position: relative;
  padding: 12px;
  border: 1px solid var(--technical-stone-dark);
  background: var(--technical-paper);
}

.technical-stage::after {
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 2px;
  background: var(--gold);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 550ms cubic-bezier(.2,.7,.2,1);
}

.technical-stage.is-drawn::after { transform: scaleX(1); }

.technical-window {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #fff;
}

.technical-sheet-panel,
.technical-sheet-panel > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.technical-sheet-panel[hidden] { display: none !important; }
.technical-sheet-svg { display: block; }

.technical-status {
  display: flex;
  min-height: 37px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px 0;
  color: #5d5f60;
  font: 500 10.5px/1.25 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.technical-deck {
  display: flex;
  flex: none;
  align-items: center;
  gap: 7px;
}

.technical-deck button {
  min-width: 28px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid var(--technical-stone-dark);
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
  font: 500 10px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: background .2s, color .2s, border-color .2s;
}

.technical-deck button:hover {
  border-color: var(--charcoal);
  background: var(--charcoal);
  color: var(--gold);
}

.technical-deck > span { min-width: 36px; text-align: center; }
.technical-deck b { color: var(--charcoal); font-weight: 600; }

.technical-thumbs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.technical-thumb-cell {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--technical-stone-dark);
  background: #fff;
}

.technical-thumb-cell > svg { width: 100%; height: 100%; }

.technical-thumb {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.technical-thumb__tag {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 2px 4px;
  background: var(--charcoal);
  color: var(--cream);
  font: 500 8.5px/1.2 var(--mono);
  letter-spacing: .08em;
}

.technical-thumb-cell:has(.technical-thumb[aria-selected="true"]) {
  border-color: var(--charcoal);
  box-shadow: 0 0 0 1px var(--charcoal);
}
.technical-thumb[aria-selected="true"] .technical-thumb__tag { background: var(--gold); color: var(--charcoal); }

.technical-material-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.technical-material-tab {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 4px 8px;
  border: 1px solid var(--technical-stone-dark);
  border-top: 3px solid var(--technical-accent);
  background: var(--technical-paper);
  color: #5d5f60;
  cursor: pointer;
  font: 500 9px/1.2 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.technical-material-tab svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
}

.technical-material-tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.technical-material-tab:hover { background: #fff; color: var(--charcoal); }
.technical-material-tab[aria-selected="true"] {
  border-color: var(--charcoal);
  border-top-color: var(--technical-accent);
  background: var(--charcoal);
  color: var(--cream);
}

.technical-material-panel {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 14px 16px 12px;
  border: 1px solid var(--technical-stone-dark);
  border-top: 0;
  background: #fff;
}
.technical-material-panel[hidden] { display: none !important; }

.technical-material-statement {
  margin: 0 0 10px;
  font: 380 17px/1.2 var(--display);
  text-wrap: balance;
}

.technical-table-wrap { overflow-x: auto; overflow-y: visible; }
.technical-material-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.technical-material-panel thead th {
  position: static;
  padding: 0 6px 6px;
  border: 0;
  border-bottom: 2px solid var(--technical-accent);
  background: transparent;
  color: #5d5f60;
  font: 500 8.5px/1.2 var(--mono);
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.technical-material-panel tbody th,
.technical-material-panel tbody td {
  padding: 6px;
  border: 0;
  border-bottom: 1px solid var(--technical-stone);
  background: transparent;
  color: rgba(23,26,29,.76);
  font-weight: 400;
  line-height: 1.25;
  text-align: left;
}

.technical-material-panel tbody th { width: 24%; color: var(--charcoal); font-weight: 600; }
.technical-material-panel tbody tr:hover th,
.technical-material-panel tbody tr:hover td { background: var(--technical-paper); }
.technical-material-panel .technical-mid { width: 9%; text-align: center; }
.technical-grade { width: 24px; height: 10px; vertical-align: middle; }
.technical-inclusion { color: #3f7a4e; font-size: 15px; }
.technical-figure {
  width: 17%;
  color: var(--charcoal) !important;
  font-family: var(--mono);
  font-size: 9.5px;
  text-align: right !important;
  white-space: nowrap;
}

.technical-sheet-link {
  margin: auto 0 0;
  padding-top: 9px;
  color: #5d5f60;
  font: 500 9.5px/1.3 var(--mono);
  letter-spacing: .05em;
}

.technical-sheet-link button {
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--gold);
  background: none;
  color: #806820;
  cursor: pointer;
  font: inherit;
}

.technical-pdf {
  display: flex;
  min-height: 65px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 0;
  background: var(--charcoal);
  color: var(--cream);
  text-decoration: none;
}

.technical-pdf b { display: block; font: 380 16px/1.2 var(--display); }
.technical-pdf small { color: var(--gold); font: 500 9px/1.3 var(--mono); letter-spacing: .08em; }
.technical-pdf > span:last-child { color: var(--gold); font-size: 20px; }
.technical-pdf.is-disabled { cursor: not-allowed; opacity: .78; }
.technical-note { margin: 7px 0 0; color: #5d5f60; font: 500 9px/1.3 var(--mono); letter-spacing: .04em; }

.technical-dialog {
  max-width: 97vw;
  padding: 0;
  border: 0;
  background: transparent;
}
.technical-dialog::backdrop { background: rgba(23,26,29,.95); }
.technical-dialog > div { position: relative; width: min(1800px, 95vw); padding: 12px; background: #fff; }
.technical-dialog [data-technical-dialog-close] {
  position: absolute;
  top: -38px;
  right: 0;
  padding: 6px 12px;
  border: 1px solid var(--gold);
  background: transparent;
  color: var(--gold);
  cursor: pointer;
  font: 500 10px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.technical-dialog [data-technical-dialog-sheet] svg { display: block; width: 100%; height: auto; }

.technical-set button:focus-visible,
.technical-set a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@media (max-width: 1023px) {
  .technical-set { padding: 56px 0; }
  .technical-set__heading { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .technical-set__instrument { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .technical-material-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .technical-material-panel table { min-width: 520px; }
  .technical-table-wrap { max-width: 100%; }
}

@media (max-width: 600px) {
  .technical-set__heading { margin-bottom: 28px; }
  .technical-stage { padding: 7px; }
  .technical-status { align-items: flex-start; flex-direction: column; }
  .technical-deck { width: 100%; }
  .technical-deck button:last-child { margin-left: auto; }
  .technical-thumbs { gap: 4px; }
  .technical-thumb__tag { font-size: 7px; }
  .technical-material-panel { padding: 12px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .technical-stage::after,
  .technical-deck button { transition: none !important; }
}

/* v4.6 structural colour ruling: the footer returns to paper, while the
   drawing title block remains its permitted charcoal instrument. */
.site-footer { background: var(--cream); color: var(--charcoal); }
.site-footer .footer-row.footer-brand { margin-inline: 0; padding-inline: 0; background: transparent; color: var(--charcoal); }
.site-footer .footer-map a { color: var(--muted); }
.site-footer .footer-map b,
.site-footer .footer-contact,
.site-footer .footer-legal { color: var(--charcoal); }
.site-footer .sheet-title-block { background: var(--charcoal); color: var(--white); }
.cta-band--light { border-block: 1px solid var(--gold); background: var(--cream); color: var(--charcoal); }

/* v4.7 copy gate and typographic role ruling. */
.tab-copy h3 {
  color: var(--charcoal);
  font: 380 clamp(40px,4vw,60px)/1.05 var(--display);
  font-variant-caps: normal;
  letter-spacing: -.015em;
  text-transform: none;
}
.breadcrumb { font-family: var(--body); font-size: 11px; letter-spacing: .04em; text-transform: none; }
.review-watermark { font-family: var(--body); font-weight: 600; letter-spacing: .03em; text-transform: none; }
.media-card figcaption { font-family: var(--body); font-size: 10px; letter-spacing: .02em; text-transform: none; }
.sheet-title-block span,.sheet-title-block strong { font-family: var(--body); letter-spacing: .01em; text-transform: none; }
.stat-numeral span { font-family: var(--body); font-weight: 600; text-transform: none; }
.decision-labels ol { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 1px; margin: 34px 0 0; padding: 1px; list-style: none; background: var(--gold); }
.decision-labels li { display: grid; gap: 14px; min-height: 160px; padding: 24px; background: var(--cream); }
.decision-labels li span { color: var(--gold-deep); font: 700 10px var(--mono); }
.decision-labels li b { align-self: end; font: 380 clamp(24px,2.5vw,36px)/1.08 var(--display); }
.signature-banner--gated { min-height: 38vw; }
.navigator-teaser { border-block: 1px solid var(--gold); }
@media(max-width:900px){.decision-labels ol{grid-template-columns:1fr 1fr}.decision-labels li{min-height:120px}.signature-banner--gated{min-height:56vw}}

/* v4.9 preview-only Technical Set notice and real-count fact-chip rows. */
.fact-grid {
  width: calc((100% / 3) * var(--fact-count, 3));
  max-width: 100%;
  grid-template-columns: repeat(var(--fact-count, 3), minmax(0, 1fr));
}

.technical-preview-banner {
  width: min(var(--container), calc(100% - 48px));
  margin: -44px auto 44px;
  padding: 11px 16px;
  border: 1px solid var(--gold-deep);
  background: var(--charcoal);
  color: var(--cream);
  font: 600 10px/1.4 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.technical-set[data-technical-preview] {
  padding-block: 60px;
}
.technical-sheet-svg--owned { background: #fff; }
.technical-thumb-mini {
  display: grid;
  height: 100%;
  align-content: center;
  gap: 3px;
  padding: 7px;
  background: linear-gradient(135deg, #fff 0 64%, #eee8db 64% 100%);
}
.technical-thumb-mini b { font: 700 10px/1 var(--mono); }
.technical-thumb-mini small { max-width: 100%; overflow: hidden; color: var(--muted); font: 500 7px/1.2 var(--mono); text-overflow: ellipsis; white-space: nowrap; }
.technical-set + .decision-labels li span,
.design-set + .decision-labels li span { color: var(--charcoal); }

@media (max-width: 1023px) {
  .technical-set[data-technical-preview] { padding-block: 56px; }
  .technical-preview-banner { margin: -28px auto 30px; }
}

@media (max-width: 600px) {
  .fact-grid { width: 100%; grid-template-columns: 1fr; }
  body[data-page-id="R-04"] .visual-label { box-sizing: border-box; width: 196px; min-height: 28px; }
}

/* v4.10 — Design Set: customer-facing GA boards before Decision Rooms. */
.design-set {
  --design-accent: #b89354;
  --design-header: #8a4f3a;
  box-sizing: border-box;
  height: 63.2vw;
  padding: 78px 0 58px;
  border-block: 1px solid #d8cfbd;
  background: #fff;
}

.design-set__preview {
  position: absolute;
  z-index: 3;
  top: 18px;
  left: 50%;
  width: min(var(--max), calc(100% - 2 * var(--gutter)));
  margin: 0;
  padding: 8px 12px;
  border-block: 1px solid var(--design-accent);
  background: #f4efe4;
  color: #63352c;
  font: 600 9px/1.35 var(--mono);
  letter-spacing: .07em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.design-set__inner {
  display: grid;
  height: 100%;
  grid-template-rows: auto minmax(0, 1fr);
}

.design-set__heading {
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 56px;
  margin-bottom: 28px;
}

.design-set__heading h2 {
  max-width: 21ch;
  font-size: clamp(32px, 3.2vw, 46px);
  line-height: 1.03;
}

.design-set__heading > p { max-width: 36ch; font-size: 14px; }

.design-set__instrument {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: 32px;
  align-items: center;
}

.design-set__board-column,
.design-set__fact-column { min-width: 0; }

.design-set__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid #cfc3ae;
  border-bottom: 0;
  background: #ede4d5;
}

.design-set__tab {
  min-height: 48px;
  padding: 8px 18px;
  border: 0;
  border-right: 1px solid #cfc3ae;
  background: transparent;
  color: #63352c;
  cursor: pointer;
  font: 650 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.design-set__tab:last-child { border-right: 0; }
.design-set__tab:hover { background: rgba(138,79,58,.09); }
.design-set__tab[aria-selected="true"] { background: var(--design-header); color: #fff; }
.design-set__tab:focus-visible { position: relative; z-index: 2; outline: 2px solid var(--gold); outline-offset: -4px; }

.design-set__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid #cfc3ae;
  background: #f5f1e8;
  box-shadow: 0 22px 48px rgba(66,48,36,.12);
}

.design-set__board,
.design-set__board > svg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.design-set__board[hidden],
.design-set__fact[hidden] { display: none !important; }

.design-board-svg { background: #fff; }

.design-set__fact-column {
  position: relative;
  min-height: 410px;
  align-self: stretch;
  border-left: 1px solid var(--design-accent);
  background: linear-gradient(145deg, #faf7f0, #f1e8da);
}

.design-set__fact {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 4.2vw, 64px);
}

.design-set__numeral {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0;
  color: var(--design-accent);
  font-variant-numeric: tabular-nums;
}

.design-set__numeral strong {
  font: 360 clamp(66px, 7.2vw, 108px)/.82 var(--display);
  letter-spacing: -.055em;
}

.design-set__numeral span {
  font: 700 11px/1 var(--mono);
  letter-spacing: .12em;
}

.design-set__fact-label {
  margin: 22px 0 20px;
  color: var(--design-header);
  font: 600 12px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.design-set__read {
  max-width: 35ch;
  margin: 0;
  color: var(--charcoal);
  font: 380 clamp(20px, 2vw, 27px)/1.26 var(--display);
  text-wrap: balance;
}

.design-set__reference {
  margin: auto 0 0;
  color: #6e6259;
  font: 550 9px/1.4 var(--mono);
  letter-spacing: .1em;
}

@media (min-width: 1024px) and (max-width: 1199px) {
  .design-set { height: auto; min-height: 760px; }
}

@media (max-width: 1023px) {
  .design-set { height: auto; padding: 64px 0; }
  .design-set__preview { position: static; width: min(var(--max), calc(100% - 2 * var(--gutter))); margin: -34px auto 34px; transform: none; }
  .design-set__inner { height: auto; }
  .design-set__heading { grid-template-columns: 1fr; gap: 14px; margin-bottom: 30px; }
  .design-set__instrument { grid-template-columns: 1fr; gap: 24px; }
  .design-set__fact-column { min-height: 330px; }
}

@media (max-width: 600px) {
  .design-set { padding: 52px 0; }
  .design-set__preview { margin-top: -28px; font-size: 8px; }
  .design-set__heading h2 { font-size: 36px; }
  .design-set__tab { min-height: 44px; padding-inline: 8px; }
  .design-set__stage { box-shadow: 0 14px 30px rgba(66,48,36,.1); }
  .design-set__fact-column { min-height: 300px; }
  .design-set__fact { padding: 30px 26px; }
  .design-set__numeral strong { font-size: clamp(60px, 18vw, 76px); }
  .design-set__read { font-size: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .design-set__tab { transition: none !important; }
}

/* CODEX-WEB-01: approved 3:1 brand lockup and immutable H-02 source canvases. */
.site-header {
  background: #231f1d;
  backdrop-filter: none;
}

.brand > img {
  display: block;
  width: 150px;
  height: 50px;
  object-fit: contain;
}

.site-footer .footer-brand {
  margin-inline: 0;
  padding-inline: 24px;
  background: #231f1d;
  color: #fff;
}

.site-footer .footer-brand img {
  width: 150px;
  height: 50px;
  max-width: 150px;
  object-fit: contain;
}

.footer-trust {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.footer-trust p { margin: 0; }
.footer-trust b,
.footer-trust span { display: block; }
.footer-trust b { color: var(--gold-deep); font: 600 13px/1.3 var(--mono); text-transform: uppercase; }
.footer-trust span { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (max-width: 900px) {
  .footer-trust { grid-template-columns: 1fr 1fr; gap: 24px; }
}

.owned-media-grid,
.owned-drawing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  align-items: start;
}

.owned-media {
  overflow: hidden;
  border: 1px solid rgba(35, 31, 29, .2);
  background: #fff;
}

.owned-media img {
  display: block;
  width: 100%;
  height: auto;
}

.owned-media figcaption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-top: 1px solid rgba(35, 31, 29, .15);
  color: #554f49;
  font: 650 9px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.owned-media figcaption b { color: var(--gold-deep); }
.owned-media__open { display: block; }
.owned-media__open:focus-visible { outline-offset: -4px !important; }
.owned-media__pdf {
  display: block;
  padding: 10px 12px;
  border-top: 1px solid rgba(35, 31, 29, .15);
  color: var(--gold-deep);
  font: 650 10px/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero--owned .hero-media {
  top: 13%;
  right: 2%;
  width: min(62vw, 940px);
  height: 69%;
  opacity: .54;
  transform: none;
}

.hero--owned .hero-media .owned-media {
  width: 100%;
}

.hero--owned .hero-media img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.hero--owned .hero-media figcaption { display: none; }
.h02-signature { padding-block: clamp(64px, 8vw, 120px); }
.h02-catalogue__link { width: max-content; max-width: 100%; }
.owned-drawing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.owned-colour-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}
.owned-colour-strip > * { scroll-snap-align: start; }

@media (max-width: 900px) {
  .brand > img { width: 138px; height: 46px; }
  .owned-media-grid,
  .owned-drawing-grid { grid-template-columns: 1fr; }
  .hero--owned .hero-media {
    top: 12%;
    right: -9%;
    width: 118%;
    height: 49%;
    opacity: .3;
  }
  .site-footer .footer-brand { padding-inline: 20px; }
  body[data-page-id="R-02"] .hero--owned .hero-media,
  body[data-page-id="R-03"] .hero--owned .hero-media,
  body[data-page-id="R-05"] .hero--owned .hero-media,
  body[data-page-id="R-06"] .hero--owned .hero-media {
    right: 0;
    width: 100%;
  }
}

/* WEB-02 — H-02 only: approved drawing deck and four distinct image mechanisms. */
body[data-page-id="H-02"] { overflow-x: clip; }
.h02-technical-set { padding-block: 56px; }
.h02-technical-set .technical-set__heading { margin-bottom: 28px; }
.h02-technical-instrument { align-items: start; }
.h02-sheet-panel { margin: 0; background: #fff; }
.h02-sheet-panel > img,
.h02-sheet-panel > svg { display: block; width: 100%; height: 100%; object-fit: contain; }
.h02-sheet-thumb { margin: 0; }
.h02-sheet-thumb > img,
.h02-sheet-thumb > svg { width: 100%; height: 100%; object-fit: contain; }
.h02-brief-column { min-height: 0; }
.h02-brief-tabs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.h02-brief-tab { display: flex; min-width: 0; min-height: 52px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 3px 5px; border: 1px solid var(--technical-stone-dark); border-top: 3px solid var(--tab-accent); background: var(--technical-paper); color: #5d5f60; cursor: pointer; font: 650 7px/1.15 var(--mono); letter-spacing: .035em; text-align: center; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.h02-brief-tab span { overflow: hidden; max-width: 100%; text-wrap: balance; }
.h02-brief-tab:hover { background: #fff; color: var(--charcoal); }
.h02-brief-tab[aria-selected="true"] { border-color: var(--charcoal); border-top-color: var(--tab-accent); background: var(--charcoal); color: var(--cream); }
.h02-sheet-brief { display: flex; height: 444px; min-height: 444px; flex: 1; flex-direction: column; padding: 16px 18px; border: 1px solid var(--technical-stone-dark); border-top: 0; background: #fff; }
.h02-sheet-brief[hidden] { display: none !important; }
.h02-sheet-brief .eyebrow { margin-bottom: 7px; font-size: 8px; }
.h02-sheet-brief h2 { max-width: 22ch; margin-bottom: 7px; font-size: clamp(22px, 1.75vw, 27px); line-height: 1.02; }
.h02-sheet-brief > p:not(.eyebrow) { max-width: 64ch; margin-bottom: 9px; color: var(--muted); font-size: 11.5px; line-height: 1.38; }
.h02-sheet-table-wrap { overflow-x: auto; margin-top: auto; border: 1px solid var(--technical-stone-dark); }
.h02-sheet-brief table { width: 100%; min-width: 430px; border-collapse: collapse; table-layout: fixed; }
.h02-sheet-brief th,
.h02-sheet-brief td { padding: 5px 6px; border-right: 1px solid var(--technical-stone); border-bottom: 1px solid var(--technical-stone); vertical-align: top; font: 600 7.5px/1.22 var(--mono); text-align: left; }
.h02-sheet-brief thead th { background: var(--charcoal); color: var(--cream); letter-spacing: .07em; text-transform: uppercase; }
.h02-sheet-brief tbody th { color: var(--charcoal); font-weight: 700; }
.h02-sheet-brief tr:last-child > * { border-bottom: 0; }
.h02-sheet-brief tr > *:last-child { border-right: 0; }
.h02-sheet-brief th:nth-child(1) { width: 24%; }
.h02-sheet-brief th:nth-child(2) { width: 42%; }
.h02-sheet-brief th:nth-child(3) { width: 9%; text-align: center; }
.h02-sheet-brief th:nth-child(4) { width: 25%; }
.h02-sheet-brief th:nth-child(4),
.h02-sheet-brief td:nth-child(4) { font-variant-numeric: tabular-nums; text-align: right; }
.h02-table-set { color: var(--green); font-size: 10px !important; text-align: center !important; }
.h02-owner-fact { color: var(--gold-deep); font-weight: 750 !important; }
.h02-sheet-jump { width: 100%; min-height: 34px; padding: 6px 9px; border: 0; border-top: 1px solid var(--technical-stone-dark); background: var(--technical-paper); color: var(--charcoal); cursor: pointer; font: 700 8px/1.2 var(--mono); letter-spacing: .06em; text-align: right; text-transform: uppercase; }
.h02-sheet-jump:hover { background: var(--gold); }
.h02-technical-set .technical-pdf { margin-top: 10px; }
.h02-technical-set .technical-pdf b { color: var(--cream); font-family: var(--display); font-size: 19px; font-weight: 480; text-transform: none; }
.h02-technical-set .technical-dialog [data-technical-dialog-sheet] img,
.h02-technical-set .technical-dialog [data-technical-dialog-sheet] svg { display: block; width: 100%; height: auto; }

.h02-action-bar { position: fixed; z-index: 905; right: 0; bottom: 0; left: 0; height: 52px; border-top: 1px solid rgba(200,169,106,.75); background: rgba(35,31,29,.97); opacity: 0; pointer-events: none; transform: translateY(105%); transition: opacity .18s ease, transform .18s ease; }
.h02-action-bar.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.h02-action-bar.is-top { top: var(--h02-action-top, var(--header)); bottom: auto; border-top: 0; border-bottom: 1px solid rgba(200,169,106,.75); }
.h02-action-bar > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: min(720px, 100%); height: 100%; margin-inline: auto; }
.h02-action-bar a { display: flex; align-items: center; justify-content: center; padding-inline: 18px; color: #fff; font: 750 9px/1.2 var(--mono); letter-spacing: .065em; text-align: center; text-decoration: none; text-transform: uppercase; }
.h02-action-bar__pdf { background: var(--gold-deep); }
.h02-action-bar__project { border-left: 1px solid rgba(200,169,106,.58); }
.static-render .h02-action-bar { display: none !important; }

.h02-visual { position: relative; margin: 0; overflow: hidden; background: #231f1d; }
.h02-visual > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.h02-visual figcaption { position: absolute; z-index: 2; right: 18px; bottom: 16px; left: 18px; display: flex; align-items: end; justify-content: space-between; gap: 18px; color: #fff; font: 650 8.5px/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.8); }
.h02-visual figcaption b { flex: none; color: var(--gold); }
.h02-carousel-copy { display: grid; grid-template-columns: 7fr 4fr; gap: 8%; align-items: end; margin-bottom: 42px; }
.h02-carousel-copy h2 { max-width: 16ch; }
.h02-carousel-copy p { color: var(--muted); }
.h02-carousel-copy .button { margin-top: 5px; border: 1px solid var(--charcoal); font-size: 12px; }

/* CC-WEB-15 §4 — `padding-bottom: 58px` removed. It applied to every product route except H-02,
   where the H-02 band rhythm overrides it, so the same arrival band was padded 158px at the top and
   58px at the bottom on 25 routes and symmetrically on the page those routes are modelled on. A
   component padded two ways depending on which page it lands on is the definition of the site
   looking like 42 pages rather than one, so the band now takes the section rhythm like every other
   band and H-02 keeps its own. Measured at 1440: 158.4/58 -> 158.4/158.4 on 25 routes. */
.h02-arrival { background: var(--white); }
.h02-arrival-track { display: flex; width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-inline: contain; }
.h02-arrival-track::-webkit-scrollbar { display: none; }
.h02-arrival-slide { flex: 0 0 100%; height: min(64vw, 760px); min-height: 480px; scroll-snap-align: start; }
.h02-arrival-controls { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: 18px; }
.h02-arrival-controls > span { display: flex; align-items: center; gap: 10px; font: 650 10px/1 var(--mono); letter-spacing: .08em; }
.h02-arrival-controls button,
.h02-sequence-controls button { width: 34px; height: 30px; border: 1px solid var(--stone); background: transparent; cursor: pointer; }
.h02-progress { height: 2px; overflow: hidden; background: var(--stone); }
.h02-progress i { display: block; width: 33.333%; height: 100%; background: var(--charcoal); transform: translateX(0); transition: transform .25s ease; }

.h02-walk-layout { display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 8fr); gap: clamp(34px, 6vw, 88px); align-items: start; }
.h02-walk-copy { position: sticky; top: calc(var(--header) + 72px); }
.h02-walk-copy h2 { max-width: 11ch; }
.h02-walk-copy > p:not(.eyebrow) { color: var(--muted); }
.h02-walk-copy .button { border: 1px solid var(--charcoal); font-size: 12px; }
.h02-walk-frame { position: relative; aspect-ratio: 16 / 9; background: #231f1d; }
.h02-walk-panel,
.h02-sequence-panel,
.h02-colour-panel { display: none; width: 100%; height: 100%; }
.h02-walk-panel.is-active,
.h02-sequence-panel.is-active,
.h02-colour-panel.is-active { display: block; }
.h02-angle-rail { display: flex; overflow-x: auto; margin-top: 12px; border-top: 1px solid var(--stone); }
.h02-angle-rail button { flex: 1 0 auto; min-height: 48px; padding: 8px 12px; border: 0; border-right: 1px solid var(--stone); background: transparent; color: var(--muted); cursor: pointer; font: 650 8.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.h02-angle-rail button[aria-pressed="true"] { background: var(--charcoal); color: var(--gold); }

.h02-sequence-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #231f1d; }
.h02-sequence-controls { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--stone); }
.h02-sequence-controls > span { display: flex; align-items: center; gap: 8px; font: 650 10px/1 var(--mono); letter-spacing: .08em; }
.h02-sequence-controls p { margin: 0; color: var(--muted); font: 600 10px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }

.h02-colour-frame { position: relative; width: min(980px, 100%); aspect-ratio: 1 / 1; margin-inline: auto; background: #231f1d; }
.h02-setting-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: min(980px, 100%); margin: 12px auto 0; border-top: 1px solid var(--stone); }
.h02-setting-tiles button { min-height: 58px; padding: 10px; border: 0; border-right: 1px solid var(--stone); background: transparent; color: var(--muted); cursor: pointer; font: 650 9px/1.3 var(--mono); text-align: left; text-transform: uppercase; }
.h02-setting-tiles button span { display: block; margin-bottom: 3px; color: var(--gold-deep); }
.h02-setting-tiles button[aria-pressed="true"] { background: var(--charcoal); color: #fff; }
body[data-page-id="H-02"] .tab-media { padding: 0; background: #231f1d; }
body[data-page-id="H-02"] .tab-media .h02-visual { width: 100%; height: 100%; }

@media (max-width: 999px) {
  .h02-technical-set { padding-block: 56px; }
  .h02-technical-instrument { grid-template-columns: minmax(0, 1fr); }
  .h02-sheet-brief { height: auto; min-height: 0; }
  .h02-carousel-copy,
  .h02-walk-layout { grid-template-columns: 1fr; }
  .h02-walk-copy { position: static; }
  .h02-arrival-slide { height: 64vw; min-height: 0; }
}

/* DEPLOY-01 — review-build identity. Never emitted by a production build. */
.staging-banner {
  position: fixed;
  z-index: 10000;
  left: 8px;
  bottom: 8px;
  display: flex;
  min-height: 26px;
  align-items: center;
  gap: 8px;
  padding-left: 10px;
  border: 1px solid rgba(200,169,106,.42);
  background: #171a1d;
  color: #f4f0e6;
  font: 600 10px/1.2 var(--mono);
  letter-spacing: .04em;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.staging-banner button {
  width: 26px;
  height: 26px;
  border: 0;
  border-left: 1px solid rgba(200,169,106,.28);
  background: transparent;
  color: inherit;
  font: 16px/1 var(--mono);
  cursor: pointer;
}
.staging-banner button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.staging-banner[hidden] { display: none; }
@media (max-width: 640px) {
  .staging-banner { right: 8px; max-width: calc(100vw - 16px); }
  .staging-banner span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 900px) {
}

@media (max-width: 600px) {
  .h02-sheet-brief { padding: 18px 16px; }
  .h02-brief-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .h02-brief-tab { min-height: 58px; font-size: 7.5px; }
  .h02-sheet-table-wrap { margin-inline: -1px; }
  .h02-carousel-copy { gap: 12px; margin-bottom: 26px; }
  .h02-visual figcaption { right: 10px; bottom: 9px; left: 10px; align-items: start; flex-direction: column; gap: 2px; font-size: 7px; }
  .h02-arrival-slide { height: 72vw; }
  .h02-arrival-controls { grid-template-columns: 1fr; }
  .h02-walk-frame,
  .h02-sequence-frame { aspect-ratio: 4 / 3; }
  .h02-sequence-controls { grid-template-columns: auto 1fr; }
  .h02-sequence-controls p { grid-column: 1 / -1; grid-row: 2; }
  .h02-setting-tiles { grid-template-columns: 1fr; }
  .h02-setting-tiles button { min-height: 44px; border-right: 0; border-bottom: 1px solid var(--stone); }
  .h02-action-bar { height: 60px; }
  .h02-action-bar a { padding-inline: 10px; font-size: 7.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .h02-progress i { transition: none; }
}

/* WEB-04 — H-02 hero: full-bleed image with a ground-only copy band. */
body[data-page-id="H-02"] .hero--h02 {
  display: flex;
  height: 78vh;
  min-height: 0;
  max-height: 88vh;
  align-items: end;
  background: transparent;
  isolation: isolate;
  width: 100vw;
}
body[data-page-id="H-02"] .hero--h02::before { display: none; }
body[data-page-id="H-02"] .hero--h02::after {
  z-index: 1;
  top: 60%;
  background: linear-gradient(0deg, rgba(16,19,22,.72) 0%, rgba(16,19,22,0) 100%);
}
body[data-page-id="H-02"] .hero--h02 .hero-media {
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: none;
  overflow: hidden;
}
body[data-page-id="H-02"] .hero--h02 .hero-media .owned-media,
body[data-page-id="H-02"] .hero--h02 .hero-media img {
  width: 100%;
  height: 100%;
}
body[data-page-id="H-02"] .hero--h02 .hero-media .owned-media {
  margin: 0;
  border: 0;
}
body[data-page-id="H-02"] .hero--h02 .hero-media img {
  object-fit: cover;
  object-position: center bottom;
  animation: h02-hero-settle 20s ease-out both;
}
body[data-page-id="H-02"] .hero--h02 .hero-content {
  position: absolute;
  z-index: 2;
  bottom: 20px;
  left: 50%;
  width: min(calc(100% - 2*var(--gutter)), var(--max));
  padding-top: 0;
  padding-bottom: 0;
  transform: translateX(-50%);
}
body[data-page-id="H-02"] .hero--h02 .product-eyebrow { margin-bottom: 10px; }
body[data-page-id="H-02"] .hero--h02 .product-eyebrow {
  width: max-content;
  padding: 6px 8px;
  background: rgba(16,19,22,.72);
  color: var(--cream);
  text-shadow: 0 1px 5px rgba(0,0,0,.9);
}
body[data-page-id="H-02"] .hero--h02 h1 {
  max-width: 760px;
  margin-bottom: 8px;
  font-size: 48px;
  line-height: .92;
}
body[data-page-id="H-02"] .hero--h02 .lede {
  max-width: 700px;
  margin-bottom: 0;
  font-size: 16px;
  line-height: 1.35;
}
body[data-page-id="H-02"] .hero--h02 .button-row { margin-top: 12px; }
body[data-page-id="H-02"] .hero--h02 .hero-sheet-id,
body[data-page-id="H-02"] .hero--h02 .visual-label {
  background: rgba(16,19,22,.64);
}
body[data-page-id="H-02"] .hero--h02 .hero-sheet-id {
  border-color: rgba(244,240,230,.58);
  padding: 8px;
  background: rgba(16,19,22,.72);
  color: var(--cream);
  text-shadow: 0 1px 5px rgba(0,0,0,.9);
}
body[data-page-id="H-02"] .hero--h02 .breadcrumb {
  padding: 8px;
  background: rgba(16,19,22,.72);
  color: var(--cream);
  text-shadow: 0 1px 5px rgba(0,0,0,.9);
}
body[data-page-id="H-02"] .hero--h02 .visual-label { bottom: 20px; }
@keyframes h02-hero-settle { from { transform: scale(1); } to { transform: scale(1.06); } }

@media (max-width: 900px) {
  body[data-page-id="H-02"] .hero--h02 {
    display: grid;
    height: auto;
    max-height: none;
    padding-top: var(--header);
    color: var(--charcoal);
    background: var(--paper);
  }
  body[data-page-id="H-02"] .hero--h02::after { display: none; }
  body[data-page-id="H-02"] .hero--h02 .hero-media {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    grid-row: 1;
  }
  body[data-page-id="H-02"] .hero--h02 .hero-content {
    position: relative;
    bottom: auto;
    left: auto;
    width: min(calc(100% - 40px), var(--max));
    padding: 38px 0 52px;
    grid-row: 2;
    transform: none;
  }
  body[data-page-id="H-02"] .hero--h02 h1 { font-size: clamp(43px, 11.6vw, 56px); }
  body[data-page-id="H-02"] .hero--h02 h1 { color: var(--charcoal); }
  body[data-page-id="H-02"] .hero--h02 .lede { color: var(--muted); }
  body[data-page-id="H-02"] .hero--h02 .product-eyebrow {
    width: auto;
    padding: 0;
    background: transparent;
    color: var(--gold-deep);
    text-shadow: none;
  }
  body[data-page-id="H-02"] .hero--h02 .button--outline { border-color: var(--charcoal); color: var(--charcoal); }
  body[data-page-id="H-02"] .hero--h02 .breadcrumb,
  body[data-page-id="H-02"] .hero--h02 .hero-sheet-id { top: calc(var(--header) + 12px); }
  body[data-page-id="H-02"] .hero--h02 .visual-label { top: calc(var(--header) + 56.25vw - 34px); bottom: auto; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page-id="H-02"] .hero--h02 .hero-media img { animation: none; }
}
@media (min-width: 901px) {
  .static-render body[data-page-id="H-02"] .hero--h02 {
    height: 702px;
    min-height: 702px;
    max-height: 702px;
  }
}

/* WEB-04 — H-02 copy balance, focus, rail and field-note ground. */
body[data-page-id="H-02"] main section[id] { scroll-margin-top: calc(var(--header) + 64px); }
body[data-page-id="H-02"] .technical-set__intro p + p { margin-top: 14px; }
body[data-page-id="H-02"] .h02-brief-tab { background: #f4f2ec; color: #515253; }
body[data-page-id="H-02"] .h02-brief-tab[aria-selected="true"] { background: var(--charcoal); color: var(--cream); }
body[data-page-id="H-02"] :is(.h02-visual,.h02-brief-tab,.technical-thumb,.h02-angle-rail button,.h02-setting-tiles button,.h02-progress button,.h02-arrival-controls button,.h02-sequence-controls button):focus-visible {
  position: relative;
  z-index: 4;
  outline: 3px solid #8B6D27;
  outline-offset: 3px;
}
body[data-page-id="H-02"] .panel-copy--moved { margin-top: 12px; }
body[data-page-id="H-02"] #panel-H-02-3 .tab-copy h3 {
  max-width: none;
  font-size: 36px;
  line-height: .98;
}

body[data-page-id="H-02"] .h02-arrival-copy {
  grid-template-columns: minmax(300px, 30%) minmax(0, 1fr);
  align-items: start;
}
body[data-page-id="H-02"] .h02-arrival-copy h2 {
  max-width: none;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.012em;
}
body[data-page-id="H-02"] .h02-arrival-copy h2 span { display: block; white-space: nowrap; }
body[data-page-id="H-02"] .h02-arrival-copy > div:first-child > p:not(.eyebrow),
body[data-page-id="H-02"] .h02-arrival-copy > div:last-child > p,
body[data-page-id="H-02"] .h02-carousel-copy > div:last-child > p { color: var(--muted); }
body[data-page-id="H-02"] .h02-arrival-copy > div:last-child {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
body[data-page-id="H-02"] .h02-arrival-copy > div:last-child .button { grid-column: 1 / -1; justify-self: start; }
body[data-page-id="H-02"] .h02-progress {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  height: auto;
  overflow: visible;
  background: transparent;
}
body[data-page-id="H-02"] .h02-progress button {
  height: 12px;
  padding: 0;
  border: 0;
  border-top: 3px solid var(--stone);
  background: transparent;
  cursor: pointer;
}
body[data-page-id="H-02"] .h02-progress button[aria-current="true"] { border-top-color: var(--charcoal); }

body[data-page-id="H-02"] .h02-walk-head h2 {
  max-width: 21ch;
  margin-bottom: 42px;
  font-size: clamp(42px, 4vw, 58px);
}
body[data-page-id="H-02"] .h02-walk-below {
  display: grid;
  grid-template-columns: minmax(340px, 5fr) minmax(0, 7fr);
  gap: clamp(34px, 5vw, 70px);
  align-items: stretch;
}
body[data-page-id="H-02"] .h02-walk-copy {
  position: static;
  display: flex;
  min-height: 0;
  flex-direction: column;
}
body[data-page-id="H-02"] .h02-walk-copy > p { color: var(--muted); }
body[data-page-id="H-02"] .h02-walk-copy .button { align-self: start; margin-top: auto; }
body[data-page-id="H-02"] .h02-walk-media { display: flex; min-height: 0; flex-direction: column; }
body[data-page-id="H-02"] .h02-walk-frame { min-height: 0; flex: 1; aspect-ratio: auto; }

body[data-page-id="H-02"] .h02-signature {
  display: block;
  min-height: 0;
  padding-block: 30px;
  background-image: linear-gradient(100deg, rgba(16,19,22,.955) 0%, rgba(16,19,22,.90) 52%, rgba(16,19,22,.965) 100%), url("/assets/web/texture/h02-field-note-terracotta-ground-v1.webp");
  background-position: center;
  background-size: cover;
}
body[data-page-id="H-02"] .h02-signature::before,
body[data-page-id="H-02"] .h02-signature::after { display: none; }
body[data-page-id="H-02"] .h02-field-note__content { position: relative; z-index: 1; }
body[data-page-id="H-02"] .h02-field-note__rule {
  width: 220px;
  height: 1px;
  margin: 22px 0 14px;
  background: rgba(200,169,106,.34);
}
body[data-page-id="H-02"] .h02-field-note__attribution {
  margin: 0;
  color: rgba(244,240,230,.5);
  font: 650 10.5px/1.3 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

@media (max-width: 999px) {
  body[data-page-id="H-02"] .h02-arrival-copy,
  body[data-page-id="H-02"] .h02-walk-below { grid-template-columns: 1fr; }
  body[data-page-id="H-02"] .h02-arrival-copy > div:last-child { grid-template-columns: 1fr; gap: 0; }
  body[data-page-id="H-02"] .h02-walk-frame { aspect-ratio: 16 / 9; }
}

/* WEB-06 Rev D — H-02 owner-review corrections. */
body[data-page-id="H-02"] .site-header {
  border-bottom: 1px solid var(--sector);
  background: #231f1d;
  box-shadow: none;
}
body[data-page-id="H-02"] .site-header.is-scrolled {
  box-shadow: 0 12px 28px rgba(16, 19, 22, .3);
}
body[data-page-id="H-02"] .page-datum,
body[data-page-id="H-02"] .dimension-cursor { display: none !important; }

body[data-page-id="H-02"] .hero--h02::after { display: none; }
body[data-page-id="H-02"] .hero--h02 .hero-media { background: var(--paper); }
body[data-page-id="H-02"] .h02-hero-track {
  display: flex;
  width: 300%;
  height: 100%;
  transform: translateX(calc(var(--h02-hero-index, 0) * -33.333333%));
  transition: transform 800ms cubic-bezier(.22,.61,.36,1);
}
body[data-page-id="H-02"] .h02-hero-slide {
  position: relative;
  width: 33.333333%;
  height: 100%;
  flex: 0 0 33.333333%;
  overflow: hidden;
  background: var(--paper);
}
body[data-page-id="H-02"] .h02-hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
body[data-page-id="H-02"] .hero--h02 .hero-content {
  bottom: 76px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
body[data-page-id="H-02"] .h02-hero-copy {
  width: min(820px, 75%);
  padding: 24px 26px 25px;
  border: 1px solid rgba(200, 169, 106, .5);
  border-right-color: rgba(200, 169, 106, .2);
  background: rgba(35, 31, 29, .94);
  box-shadow: 16px 0 34px rgba(16, 19, 22, .18);
  color: var(--cream);
}
body[data-page-id="H-02"] .hero--h02 .h02-hero-copy .product-eyebrow {
  width: auto;
  padding: 0;
  background: transparent;
  color: var(--gold);
  text-shadow: none;
}
body[data-page-id="H-02"] .hero--h02 .h02-hero-copy h1,
body[data-page-id="H-02"] .hero--h02 .h02-hero-copy .lede { color: var(--cream); }
body[data-page-id="H-02"] .hero--h02 .h02-hero-copy .button--outline {
  border-color: var(--cream);
  color: var(--cream);
}
body[data-page-id="H-02"] .h02-hero-controls {
  display: flex;
  flex: none;
  gap: 6px;
  padding: 7px;
  border: 1px solid rgba(200, 169, 106, .55);
  background: #231f1d;
}
body[data-page-id="H-02"] .h02-hero-controls button {
  min-width: 52px;
  min-height: 44px;
  border: 1px solid rgba(244, 240, 230, .35);
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  font: 700 11px/1 var(--mono);
  letter-spacing: .08em;
}
body[data-page-id="H-02"] .h02-hero-controls button[aria-current="true"] {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--charcoal);
}
body[data-page-id="H-02"] .hero--h02 .visual-label { bottom: 82px; }
body[data-page-id="H-02"] .h02-hero-reference {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  min-height: 74px;
  grid-template-columns: minmax(310px, 2fr) repeat(4, minmax(0, 1fr));
  padding-inline: var(--gutter);
  border-top: 1px solid var(--sector);
  background: #231f1d;
  color: var(--cream);
}
body[data-page-id="H-02"] .h02-hero-reference span {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  padding: 12px 16px;
  border-right: 1px solid rgba(200, 169, 106, .25);
  font: 650 10px/1.35 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
body[data-page-id="H-02"] .h02-hero-reference b { color: var(--gold); font-size: 8px; }

body[data-page-id="H-02"] .h02-technical-set .technical-set__heading {
  align-items: start;
  margin-bottom: 34px;
}
body[data-page-id="H-02"] .h02-technical-decision-copy {
  width: 76%;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
}
body[data-page-id="H-02"] .h02-technical-set .technical-set__heading h2,
body[data-page-id="H-02"] .h02-carousel-copy h2,
body[data-page-id="H-02"] .h02-walk-head h2 {
  max-width: none;
  font-family: var(--display);
  font-size: clamp(42px, 4.4vw, 66px);
  line-height: .98;
}
body[data-page-id="H-02"] .h02-carousel-copy { align-items: start; }
body[data-page-id="H-02"] .h02-carousel-copy h2 { max-width: 100%; text-wrap: balance; }
/* CC-WEB-15 §1 — this block moved up to the unscoped `.h02-editorial-split .h02-carousel-copy--wide`
   rules, so all 26 product routes get the single-column copy and its 19px/1.65 setting instead of
   H-02 alone. `width: 68%` is deliberately NOT carried over: `--wide` only ever renders inside an
   editorial split, and the split rule has always set that same element to `width: 100%`, so the
   68% declaration never applied to a rendered page. It became live for one build of CC-WEB-15 when
   the split rule lost the `body[data-page-id]` prefix and with it the specificity that had been
   masking it — caught in the §1 capture, where the H-02 copy measure narrowed from 842px to 630px
   against the same text. Removed rather than re-scoped: a rule that only has an effect when
   another rule is weakened is a trap for the next ticket. */
body[data-page-id="H-02"] .h02-arrival-copy h2 span { white-space: normal; }
body[data-page-id="H-02"] .h02-technical-set .technical-set__intro {
  height: auto;
  min-height: 0;
  align-self: start;
  padding-bottom: 0;
}
body[data-page-id="H-02"] .h02-technical-instrument { align-items: start; }
body[data-page-id="H-02"] .h02-technical-download { width: 100%; margin-top: 18px; }
body[data-page-id="H-02"] .h02-technical-download .technical-pdf { width: 100%; margin-top: 0; }
body[data-page-id="H-02"] .h02-technical-download .technical-note { margin: 9px 0 0; }

body[data-page-id="H-02"] #decision-tabs .section-heading { grid-template-columns: minmax(0, 1fr); }
body[data-page-id="H-02"] #decision-tabs .section-heading h2 { max-width: none; }

body[data-page-id="H-02"] .h02-action-bar {
  height: 72px;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
body[data-page-id="H-02"] .h02-action-bar > div { width: 100%; }
body[data-page-id="H-02"] .h02-action-bar a {
  padding-inline: 18px;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .06em;
}
body[data-page-id="H-02"] .h02-action-bar__pdf {
  background: var(--gold);
  color: var(--charcoal);
}
body[data-page-id="H-02"] .h02-action-bar__project { color: var(--cream); }

body[data-page-id="H-02"] .h02-visual,
body[data-page-id="H-02"] .h02-arrival-slide,
body[data-page-id="H-02"] .h02-walk-frame,
body[data-page-id="H-02"] .h02-sequence-frame,
body[data-page-id="H-02"] .h02-colour-frame { background: var(--paper); }
body[data-page-id="H-02"] .h02-arrival-slide { height: auto; min-height: 0; aspect-ratio: 21 / 9; }
body[data-page-id="H-02"] .h02-walk-frame,
body[data-page-id="H-02"] .h02-sequence-frame { aspect-ratio: 16 / 9; }
body[data-page-id="H-02"] .h02-colour-frame,
body[data-page-id="H-02"] .h02-setting-tiles { width: 100%; margin-inline: 0; }

@media (max-width: 900px) {
  body[data-page-id="H-02"] .hero--h02 {
    grid-template-rows: auto auto auto;
    align-items: stretch;
  }
  body[data-page-id="H-02"] .hero--h02 .hero-media { aspect-ratio: 21 / 9; }
  body[data-page-id="H-02"] .hero--h02 .hero-content {
    bottom: auto;
    display: block;
    width: 100%;
    padding: 28px 20px 30px;
    background: #231f1d;
  }
  body[data-page-id="H-02"] .h02-hero-copy {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body[data-page-id="H-02"] .h02-hero-copy .button-row {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 8px;
  }
  body[data-page-id="H-02"] .h02-hero-copy .button {
    min-height: 52px;
    padding: 10px 8px;
    font-size: 12px;
    line-height: 1.25;
    text-align: center;
  }
  body[data-page-id="H-02"] .h02-hero-controls { width: max-content; margin-top: 18px; }
  body[data-page-id="H-02"] .hero--h02 .visual-label { top: calc(var(--header) + 42.857vw - 34px); bottom: auto; }
  body[data-page-id="H-02"] .h02-hero-reference {
    position: relative;
    bottom: auto;
    grid-row: 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-inline: 20px;
  }
  body[data-page-id="H-02"] .h02-hero-reference span:first-child { grid-column: 1 / -1; }
  body[data-page-id="H-02"] .h02-hero-reference span { border-right: 0; border-bottom: 1px solid rgba(200, 169, 106, .22); }
  body[data-page-id="H-02"] .h02-action-bar { height: 68px; }
  body[data-page-id="H-02"] .h02-action-bar a { padding-inline: 9px; font-size: 13px; letter-spacing: .035em; }
  body[data-page-id="H-02"] .h02-arrival-copy h2 span { white-space: normal; }
  body[data-page-id="H-02"] .h02-technical-set .technical-set__heading { gap: 24px; }
  body[data-page-id="H-02"] .h02-technical-decision-copy,
  /* CC-WEB-15 §1 — unscoped with the desktop rule it overrides. */
  .h02-editorial-split .h02-carousel-copy--wide > div:last-child {
    width: 100%;
    font-size: 16px;
  }
  body[data-page-id="H-02"] .dimension-cursor { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page-id="H-02"] .h02-hero-track { transition: none !important; }
}

/* WEB-08 — quiet, edge-aligned truth credits. */
body[data-page-id="H-02"] .hero--h02 .visual-label,
body[data-page-id="H-02"] .h02-visual figcaption {
  border: 0;
  background: #231f1d;
  color: #958f88;
  font-family: var(--body);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .01em;
  text-transform: none;
  text-shadow: none;
}
body[data-page-id="H-02"] .hero--h02 .visual-label {
  top: auto;
  right: auto;
  bottom: 74px;
  left: 0;
  padding: 4px 6px;
  max-width: none;
  text-align: left;
}
body[data-page-id="H-02"] .h02-visual figcaption {
  right: auto;
  bottom: 0;
  left: 0;
  width: max-content;
  max-width: min(76%, 720px);
  padding: 3px 6px;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 6px;
}
body[data-page-id="H-02"] .h02-visual figcaption b { color: inherit; }
body[data-page-id="H-02"] .h02-visual figcaption span { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  body[data-page-id="H-02"] .hero--h02 .visual-label,
  body[data-page-id="H-02"] .h02-visual figcaption { font-size: 6.75px; }
  body[data-page-id="H-02"] .hero--h02 .visual-label {
    top: calc(var(--header) + 42.857vw - 18px);
    right: auto;
    bottom: auto;
    left: 0;
  }
  body[data-page-id="H-02"] .h02-visual figcaption {
    right: auto;
    bottom: 0;
    left: 0;
    max-width: 82%;
    align-items: center;
    flex-direction: row;
    gap: 4px;
  }
}

/* WEB-09 final cascade: retain the narrowed desktop hero panel after WEB-06. */
body[data-page-id="H-02"] .hero--h02 { background: var(--h02-ground-light); }
body[data-page-id="H-02"] .h02-hero-copy { width: min(680px, 65%); }
@media (max-width: 900px) {
  body[data-page-id="H-02"] .h02-hero-copy { width: 100%; }
}

/* ---------------------------------------------------------------------------
   CC-WEB-11 §1–§2 — the Design Visualisation caption, restored and floored.

   MPS-DESIGN-VISUALISATION-CAPTION-RULING-v1 (the owner, 30 August 2026, blocking):
   the caption stays on every rendered visualisation and gets quieter — smaller, lower
   contrast, at the frame edge, in the page's own type and never a mono stamp. Its floor
   is that a reader who looks for it can read it: never white-on-white, never behind a
   hover, never below the image's fold, never removed on a breakpoint.

   The operator's CC-WEB-11 §2 turns that floor into numbers, because CC-WEB-10 measured
   the three surviving GA-board stamps at 4.1px/1.8px — a rule that can be met invisibly
   is not a rule. Computed font-size >= 11px at 1440 and at 390; contrast >= 3:1 against
   the pixels actually behind the text.

   The scrim is why the contrast is a constant and not a property of the photograph.
   #958f88 on #231f1d measures 5.11:1 — the same pair WEB-08 chose for H-02's credits, so
   the credit reads as part of the existing treatment rather than a new element. Without
   an opaque plate the same text sits on whatever the image happens to be, and a light
   render takes it below 3:1; this is the minimum "at the frame edge" plate that makes the
   floor hold on every image on every route.
   --------------------------------------------------------------------------- */
.visualisation-credit {
  flex: none;
  align-self: flex-end;
  padding: 3px 7px;
  background: #231f1d;
  color: #958f88;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: .01em;
  text-transform: none;
  text-shadow: none;
  white-space: nowrap;
}

/* The credit sits at the frame edge of the image it belongs to, not across it. Where a
   figcaption is already the edge bar, the credit rides in it; where an image has no bar,
   the credit is placed against the bottom-left corner of that image. */
.h02-visual { position: relative; }
.h02-visual > figcaption { flex-wrap: wrap; }
.h02-visual > figcaption > .visualisation-credit { order: -1; }

/* CC-WEB-11 §1 — the hero. `.hero-media figcaption` is display:none, which on an owned
   photograph hero hid the caption outright; the ruling's floor forbids that. The slot-id
   line stays hidden, the credit does not. */
/* CC-WEB-11 §1–§2 — the owned-photograph hero's credit, at the hero's own stacking level.
   `.hero-media` is z-index 0 and so a stacking context; `.hero::after` paints a gradient
   that starts at 96% opaque black over it at z-index 1. A credit inside the media box
   measured 1.10:1 at 1440 and could not be rescued by any colour. Placed here it is a
   sibling of `.hero-sheet-id`, which is the chip that already proves this corner of the
   frame stays legible: measured on the running page the credit lands at document y 216-237
   at 1440 and y 184-205 at 390, both inside the photograph's own box (y 198-580 and
   y 170-336), at its top-right edge, under the sheet chip and clear of the breadcrumb. */
.visualisation-credit--hero {
  position: absolute;
  z-index: 4;
  right: 28px;
  top: calc(var(--header) + 56px);
}
@media (max-width: 900px) {
  .visualisation-credit--hero { right: 12px; top: calc(var(--header) + 48px); }
}

/* The hero slide's credit sits at the TOP edge of the frame, not the bottom.
   Measured on the running page at 1440: at `bottom: 0` the credit's centre resolved to
   document y=761, and `elementsFromPoint` at that centre returned `.h02-hero-reference`
   (z-index 3, background #231f1d) above it — the buyer-facts band overlaps the bottom of
   the slide, and because it is the same colour as the credit's own plate the caption looked
   present in a screenshot and was unreadable on the page. `.hero-media` is its own stacking
   context at z-index 0, so no z-index on the credit can lift it over that band. The top-right
   corner of the hero frame is unoccupied on this page — no `.hero-sheet-id` is rendered in
   the H-02 hero — and is still the frame edge. */
body[data-page-id="H-02"] .h02-hero-slide > .visualisation-credit {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
}

/* The H-02 caption bar sets its own 8px/6.75px size on everything inside it. The credit
   is the one element in that bar with a floor, so it keeps its own size at both widths. */
body[data-page-id="H-02"] .h02-visual figcaption .visualisation-credit,
body[data-page-id="H-02"] .hero--h02 .visualisation-credit {
  font-size: 11px;
  color: #958f88;
  background: #231f1d;
}

/* Never removed on any breakpoint — the 900px cascade shrinks the caption bar around it
   and must not shrink or drop the credit. */
@media (max-width: 900px) {
  .visualisation-credit,
  body[data-page-id="H-02"] .h02-visual figcaption .visualisation-credit,
  body[data-page-id="H-02"] .hero--h02 .visualisation-credit {
    display: inline-block;
    padding: 3px 6px;
    font-size: 11px;
  }
}

/* CC-WEB-15 §3 — the related-routes band. One band on all 42 routes, rendered by
   insert_related_routes() immediately before the CTA. It uses the existing `.section`,
   `.container` and `.eyebrow` primitives and the existing type scale, so it reads as part of the
   frozen v4 system rather than as a new component: no new colour, no new font, no new radius. */
.related-routes { background: var(--paper); }
.related-routes__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.related-routes__label {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--stone);
  color: var(--charcoal);
  font: 700 10px/1.25 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
}
.related-routes__group ul { margin: 0; padding: 0; list-style: none; }
.related-routes__group li { margin: 0 0 10px; }
.related-routes__group a {
  display: inline-block;
  min-height: 24px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.45;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.related-routes__group a:hover { color: var(--gold-deep); text-decoration-color: var(--gold-deep); }
/* A live route renders closed routes as text, not links — apply_live_link_gate() removes the
   href. Keep those legible as plain text rather than styling them as something clickable. */
.related-routes__group a[aria-disabled="true"] {
  color: var(--muted);
  text-decoration: none;
  cursor: default;
}
@media (max-width: 900px) {
  .related-routes__grid { grid-template-columns: 1fr; }
  .related-routes__group a { min-height: 44px; font-size: 16px; }
}

/* CC-WEB-16 §1 — the placeholder goes quiet.
   The card keeps its slot, its ratio and its job of filling the image column to 0 px of blank
   (CC-WEB-15 §1); it stops printing the photography brief. What is left has to read as a
   considered blank rather than as a broken image, and the sheet skin cannot do that once it is
   empty: a 1px #363a3d border, a 5px inset gold ring and a 28px drop shadow all announce "a
   sheet with something on it", so an empty one reads as a failed load. A stone hairline over
   the page's own paper-to-cream gradient does not. No text, no code, no label, no icon.
   `.spec-sheet` itself is untouched, so every layout rule that sizes one — the ratio classes,
   `.h02-detail-pair__cell`, `.world`, `.tab-media`, `.hero-media` — still applies unchanged. */
.spec-sheet--quiet {
  border: 1px solid var(--stone);
  background: linear-gradient(160deg, var(--paper) 0%, var(--cream) 100%);
  box-shadow: none;
}

/* The sheet grid rows existed to place the head, body and title block. With no children the
   grid is inert, but the declaration is kept off the quiet card so nothing can lay out inside
   one by accident. */
.spec-sheet--quiet { display: block; }

/* CC-WEB-16 §1 — an emptied card must not collapse, and in three places it did.
   Most quiet cards get their height from a ratio class (`aspect-ratio` + `min-height: 0`).
   `.hero-media`, `.world` and `.tab-media` deliberately switch `aspect-ratio` off and size
   the sheet from `height: 100%` and a container minimum instead — which worked only while the
   sheet had contents to fall back on. With the brief removed the sheet has no content at all,
   and the ratio classes' later `min-height: 0` wins over the container minimums, so at 390 the
   card collapsed to its 2px of border. Measured on the CC-WEB-15 build at 390: smallest visible
   card 200-263px, none under 10px. Measured after emptying the cards and before this rule:
   C-02 1 card at 2px, S-01 3 cards at 2px, R-02 1 card at 2px. The values below are the ones
   those containers already declare for `.spec-sheet`; this re-asserts them for the quiet card
   after the ratio overrides, rather than inventing a new height. */
.hero-media .spec-sheet--quiet,
.world .spec-sheet--quiet,
.tab-media .spec-sheet--quiet { height: 100%; }
.world .spec-sheet--quiet { min-height: 650px; }

@media (max-width: 900px) {
  .world .spec-sheet--quiet { min-height: 470px; }
  .tab-media .spec-sheet--quiet { min-height: 420px; }
}

/* ============================================================================
   CC-WEB-17 — the mobile reading order, and the media slider
   ============================================================================
   Everything below is inside the existing 900px breakpoint — the one at which the two columns
   already collapse. No new breakpoint is introduced, and nothing here applies at 1440 or 1280.

   THE ORDER, on every two-column band: eyebrow rule + eyebrow + heading, then the media, then
   all the prose and the CTA. Identical whether the media column sits left or right at desktop;
   the mirror disappears at mobile.

   THE METHOD is §5's: `display: contents` on the wrapper whose children have to be split apart,
   then explicit `order`. No DOM move, no re-render. It is applied to the *fewest* wrappers that
   can produce the order, because dropping a wrapper's box drops its padding, margin, background,
   border and gap with it:

     * `.h02-editorial-split` — only `.h02-carousel-copy` is dropped. Measured at 390 before
       relying on it: that wrapper has no padding, no margin, no background and no border, so the
       only thing lost is its `gap: 24px` between the heading block and the prose block. The two
       are no longer adjacent anyway — the media now sits between them — and the band's own
       `gap: 28px` governs all three. Re-declared: nothing. `.h02-detail-pair` KEEPS its box and
       simply takes `order: 2`, so the slider's track and dots stay together inside it.
     * `.tab-layout` — only `.tab-copy` is dropped, so `.tab-media` keeps its cream background,
       its 10px padding and its `position: relative`. `.tab-copy`'s `padding: 38px` is the one
       thing lost, and it is re-declared below on the promoted children as an inline margin plus
       a top and bottom margin on the first and last of them.
     * `.h02-walk-below` — nothing is dropped. Its heading already sits above the band in
       `.h02-walk-head`, so the order is produced by `order` alone on the two existing children.

   NOT CHANGED, and why: `.technical-set__instrument` already reads section heading -> drawing
   viewer -> sheet brief. Its media column is a sheet viewer with its own prev/next/expand deck,
   not a stack of images, and `AGENTS.md` freezes the technical set with `technical_set_ready`
   false. `.footer-brand` is site furniture — a wordmark and the company name, with no heading
   or prose to order.                                                                          */

@media (max-width: 900px) {

  /* ---- 1. The editorial split: heading, media, prose ---------------------- */
  .h02-editorial-split > .h02-carousel-copy { display: contents; }
  .h02-editorial-split > .h02-carousel-copy > div:first-child { order: 1; }
  /* `grid-row: 1` is what used to force the whole media column above the copy. It has to go, or
     it pins the pair to the first row and `order` never gets a say. */
  .h02-editorial-split > .h02-detail-pair { order: 2; grid-row: auto; }
  .h02-editorial-split > .h02-carousel-copy > div:last-child { order: 3; }

  /* ---- 2. The decision tabs: heading, media, prose ------------------------ */
  .tab-layout > .tab-copy { display: contents; }
  .tab-layout > .tab-copy > * { order: 3; margin-inline: 38px; }
  .tab-layout > .tab-copy > .eyebrow,
  .tab-layout > .tab-copy > h3 { order: 1; }
  .tab-layout > .tab-copy > .eyebrow { margin-top: 38px; }
  .tab-layout > .tab-copy > *:last-child { margin-bottom: 38px; }
  .tab-layout > .tab-media { order: 2; }

  /* ---- 3. The walk-around band: media before the prose -------------------- */
  /* The band is a grid on H-02 and a plain block on the other 25 routes, and `order` does
     nothing to a block's children. Declaring the single-column grid here gives all 26 the same
     order at mobile and leaves every desktop layout alone. */
  .h02-walk-below {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .h02-walk-below > .h02-walk-media { order: 1; }
  .h02-walk-below > .h02-walk-copy { order: 2; }

  /* ---- 4. The slider ------------------------------------------------------
     Applied only to a column the build marked as holding two or more real images
     (`detail_pair_is_slider()`), so a column of emptied placeholder cards keeps the stack it
     has today and gains no control over nothing.

     CSS scroll-snap, no JavaScript for the track itself and no carousel library: with scripting
     off this is still a plain horizontally scrollable row. Every slide stays in the DOM at full
     size — no `display: none`, no `visibility: hidden`, no zero-size slide — so every `<img>`
     stays crawlable.

     The track is a grid rather than a flex row so that the column-level caption can be placed on
     a second row instead of becoming a third slide. It is stuck to the track's left edge, so it
     stays beneath the media it labels whichever slide is in view. */
  .h02-detail-pair--slider .h02-detail-pair__inner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc(100% - 16px);   /* the next slide's edge peeks by 16px */
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .h02-detail-pair--slider .h02-detail-pair__inner::-webkit-scrollbar { display: none; }
  .h02-detail-pair--slider .h02-detail-pair__cell {
    grid-row: 1;
    scroll-snap-align: start;
    aspect-ratio: 1;
  }
  .h02-detail-pair--slider .h02-detail-pair__caption {
    grid-row: 2;
    grid-column: 1;
    position: sticky;
    left: 0;
  }
  .h02-detail-pair__dots {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
  }
  .h02-detail-pair__dots span {
    width: 6px;
    height: 6px;
    border: 1px solid var(--gold-deep);
    border-radius: 50%;
    background: transparent;
    transition: background .2s var(--ease);
  }
  /* Without JavaScript no dot is marked current; the row still reads as "there are two of these"
     and nothing is clickable, so there is no dead control. */
  .h02-detail-pair__dots span.is-current { background: var(--gold-deep); }
}

/* The dots exist only for the mobile slider. Above the breakpoint the band is unchanged, so they
   are not painted at all. This hides a decorative indicator, never a slide. */
@media (min-width: 901px) {
  .h02-detail-pair__dots { display: none; }
}