/* Fractur frame system — the live site's architecture applied to every page.
   One continuous framed column, connected cells and 1px rules, white surfaces with
   #151515 chapters. Brand teal is the single accent: indicators, arrows and dot art. */
:root{
  --frame-w:min(1280px,calc(100% - 64px));
  --pad:clamp(24px,3.6vw,48px);
  --frame-line:rgba(0,0,0,.11);
  --frame-dark:#151515;
  --frame-dark-line:rgba(255,255,255,.14);
  --accent:#536779;
  --accent-light:#8fa2b3;
  --navy:#151515;--navy-deep:#0f0f0f;--navy-2:#1d1d1d;--navy-3:#262626;
  --ink:#252525;--muted:#6c6c68;--muted-dark:#b9b9b4;--wash:#fafaf8;--mist:#f4f4f1;
  --line:var(--frame-line);--line-strong:rgba(0,0,0,.16);
  --line-dark:var(--frame-dark-line);--line-dark-strong:rgba(255,255,255,.24);
  --teal:var(--accent);--teal-glow:var(--accent-light);--slate:#6c6c68;--slate-light:#b9b9b4;
  --font:'Helvetica Now Display','Helvetica Neue',Inter,Arial,sans-serif;
  --header-h:64px;
  --section-y:clamp(72px,8vw,112px);
  --fs-display:clamp(40px,4.6vw,64px);
  --fs-h1:clamp(40px,4.6vw,64px);
  --fs-h2:clamp(32px,3.4vw,48px);
  --fs-h3:clamp(20px,1.7vw,26px);
  --fs-lead:clamp(17px,1.25vw,19px);
}
@media(max-width:760px){:root{--frame-w:calc(100% - 32px)}}
html{background:#fff}
body{font-family:var(--font);color:var(--ink);background:#fff;line-height:1.65}
h1,h2,h3,h4{font-weight:400;letter-spacing:-.025em;line-height:1.12}
h3,h4,.benefit-row h3,.principle h3,.accordion summary,.image-card h3,.profile-copy h3,.roles h3,.ledger h3,.menu-links a{font-weight:400}
.display em,.h1 em,.h2 em,.h3 em,.statement-text em,.on-dark .h2 em,.hero em{color:inherit}
.eyebrow{font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--muted)}
.eyebrow::before{content:none}
.index-num,.on-dark .index-num,.hero .index-num{color:var(--accent);font-weight:400}
.on-dark .index-num,.hero .index-num{color:var(--accent-light)}
.wrap{width:var(--frame-w);max-width:none;margin-inline:auto;padding-inline:var(--pad)}
.grain{display:none}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline-color:var(--accent)}

/* The frame: every chapter sits between the same two rails and is divided by one rule. */
main>section,.site-footer{border-top:0}
main>section::after{content:none!important}
main>section::before{inset:0 calc((100% - var(--frame-w))/2)!important;background:none!important;border:0!important;border-inline:1px solid var(--frame-line)!important}
main>section+section::before{border-top:1px solid var(--frame-line)!important}
main>section.on-dark,main>section.on-wash{background:transparent}
main>section.on-dark::before{background:var(--frame-dark)!important;border-color:var(--frame-dark)!important}
main>section.on-wash::before{background:var(--wash)!important}
main>section.logos::before,main>section.hero--film::before{content:none}
.grid-label{display:none}

/* Buttons and links — the live frame-button and underlined frame-link. */
.btn{--btn-bg:#252525;--btn-fg:#fff;--btn-fill:var(--green);min-height:52px;padding:0 22px;gap:28px;font-size:13px}
.btn--light,.on-dark .btn{--btn-bg:#f4f4f1;--btn-fg:#252525;--btn-fill:var(--green)}
.btn--light:hover,.btn--light:focus-visible,.on-dark .btn:hover,.on-dark .btn:focus-visible{--btn-fg:#fff}
.btn--ghost-dark{--btn-bg:#fff;--btn-fg:#252525;--btn-fill:var(--wash);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--ghost{box-shadow:inset 0 0 0 1px var(--line-dark-strong)}
.btn-arrow,.diagonal{font-weight:300}
.link-arrow{font-size:14px;gap:16px}
.link-arrow::after{right:32px;bottom:9px;transform:none;background:currentColor;opacity:.5}
.link-arrow .btn-arrow{color:var(--accent);font-size:20px}
.on-dark .link-arrow .btn-arrow{color:var(--accent-light)}
.link-arrow:hover{color:var(--accent)}

/* Header — a framed bar of connected cells. */
.site-header,.site-header.is-scrolled,html.menu-open .site-header{height:var(--header-h);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;color:var(--ink)}
.page-home .site-header{transform:translateY(-110%)}
.page-home .site-header.is-past,html.menu-open .page-home .site-header{transform:none}
.header-inner{width:var(--frame-w);max-width:none;height:100%;padding:0;display:grid;grid-template-columns:auto 1fr auto;gap:0;background:#fff;border:1px solid var(--frame-line);border-top:0}
.brand{height:100%;padding:0 var(--pad);border-right:1px solid var(--frame-line)}
.brand img{width:120px;height:18px}
.page-home .site-header:not(.is-scrolled) .brand,.brand{opacity:1;visibility:visible}
.primary-nav{height:100%;justify-self:stretch}
.primary-nav ul{height:100%;gap:0}
.primary-nav li{height:100%}
.site-header .primary-nav a,.site-header.is-scrolled .primary-nav a{height:100%;min-height:0;padding:0 clamp(14px,1.6vw,24px);border-right:1px solid var(--frame-line);font-size:14px;color:var(--muted)}
.site-header .primary-nav a:hover,.site-header .primary-nav a[aria-current=page]{color:var(--ink);background:var(--wash)}
.site-header .primary-nav a[aria-current=page]::before{left:0;right:0;bottom:-1px;width:auto;height:2px;margin:0;border-radius:0;background:var(--accent)}
.header-cta{display:flex;align-items:center;gap:24px;height:100%;padding:0 22px;background:#252525;color:#fff;font-size:13px;transition:background-color .3s ease}
.header-cta:hover,.header-cta:focus-visible{background:var(--accent)}
.site-header .menu-toggle,.site-header.is-scrolled .menu-toggle,html.menu-open .site-header .menu-toggle{height:100%;padding:0 20px;border-left:1px solid var(--frame-line);color:var(--ink);font-size:12px;letter-spacing:.06em;font-weight:400}
@media(max-width:1080px){.header-inner{grid-template-columns:1fr auto auto}.header-cta{border-left:1px solid var(--frame-line)}}
@media(max-width:600px){.brand img{width:104px;height:16px}}

/* Menu overlay */
.site-menu{background:var(--frame-dark);top:var(--header-h)}
.menu-inner{width:var(--frame-w);max-width:none;min-height:100%;padding:40px var(--pad);border-inline:1px solid var(--frame-dark-line)}
.menu-links a{font-size:clamp(30px,6vw,52px)}
.menu-links a:hover,.menu-links a[aria-current=page]{color:var(--accent-light)}
.menu-num{font-weight:400;color:var(--accent-light)}

/* Curtain */
.curtain-panel{background:var(--frame-dark)}
.curtain-panel::after{background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.curtain-mark{width:clamp(48px,4.4vw,64px)}

/* Homepage opening — the live hero: film, wordmark, scroll mouse. */
.hero--film{display:block;min-height:100svh;background:#000}
.hero--film .hero-scrim--soft{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 70%,rgba(0,0,0,.55) 100%)}
.hero-wordmark{position:absolute;top:36px;left:0;right:0;width:clamp(150px,13vw,190px);margin-inline:auto;z-index:2}
.hero-wordmark img{width:100%;height:auto}
.scroll-mouse{position:absolute;left:50%;bottom:32px;z-index:2;display:grid;justify-items:center;gap:14px;transform:translateX(-50%);color:rgba(255,255,255,.75);font-size:9px;letter-spacing:.45em;text-transform:uppercase}
.scroll-mouse-body{position:relative;width:32px;height:54px;border:1.5px solid rgba(255,255,255,.8);border-radius:18px}
.scroll-mouse-body span{position:absolute;left:50%;top:10px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#fff;animation:mouse-dot 2s var(--ease-io) infinite}
@keyframes mouse-dot{0%{transform:translateY(0);opacity:0}25%{opacity:1}70%{transform:translateY(20px);opacity:0}100%{opacity:0}}
.hero-film-toggle{position:absolute;right:max(24px,calc((100% - var(--frame-w))/2));bottom:40px;z-index:2;color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.08em}

/* Logos — open white band before the frame begins, as live. */
.logos{border-bottom:1px solid var(--frame-line);text-align:center}
.logos-head{display:grid;justify-items:center;gap:14px}
.logos-head h2{font-size:clamp(28px,2.6vw,36px)}
.logos-head p{max-width:46ch}
.marquee img{filter:grayscale(1);opacity:.8;mix-blend-mode:multiply}

/* Homepage chapters inside the frame */
.statement-grid{column-gap:0}
.statement .eyebrow{grid-column:1/-1;padding-top:0}
.statement-title,.statement-text,.statement-aside{grid-column:1/-1}
.statement-title{font-size:var(--fs-display);max-width:16ch}
.statement-text{max-width:30em;font-size:clamp(22px,2.1vw,30px);line-height:1.3;letter-spacing:-.02em}
.statement-aside{border-top:1px solid var(--frame-line);margin-inline:calc(var(--pad)*-1);padding:40px var(--pad) 0;grid-template-columns:minmax(120px,200px) minmax(0,1fr)}
.statement-aside .btn-row{grid-column:2}
.section-head{grid-template-columns:repeat(12,minmax(0,1fr));margin-bottom:clamp(40px,5vw,64px)}
.section-head h2{grid-column:1/span 7}
.section-head p{grid-column:8/span 5;font-size:16px}
.benefit-list,.ledger,.accordion,.audience-cards,.roles,.numbered,.principles{border-color:var(--frame-line)}
.benefit-list{margin-inline:calc(var(--pad)*-1);border-top:1px solid var(--frame-line)}
.benefit-row{grid-template-columns:72px minmax(0,1fr) minmax(0,1fr) 48px;padding:32px var(--pad);border-bottom:1px solid var(--frame-line)}
.benefit-list li:last-child .benefit-row{border-bottom:0}
.benefit-row::before{background:var(--frame-dark)}
.benefit-row h3{font-size:clamp(22px,2.1vw,30px);letter-spacing:-.025em}
.benefit-arrow{color:var(--accent);font-weight:300}
.benefit-row:hover .benefit-arrow{color:var(--accent-light)}
.benefits{padding-bottom:0}
/* Tabs — equal boxed cells with an accent bar, as live. */
.audience-tabs{margin-inline:calc(var(--pad)*-1);margin-bottom:0;border-block:1px solid var(--frame-line);border-top-width:1px}
.audience-tabs [role=tab]{justify-content:center;min-height:64px;padding:18px 12px;font-size:15px;letter-spacing:0;border-left:1px solid var(--frame-line);background:#fff}
.audience-tabs [role=tab]:first-child{border-left:0}
.audience-tabs [role=tab]::before{top:auto;bottom:-1px;left:16%;right:16%;height:3px;background:var(--accent)}
.audience-tabs [role=tab][aria-selected=true]{background:var(--wash)}
.audience-tabs .index-num{display:none}
.audience{padding-bottom:0}
.audience-panel{margin-inline:calc(var(--pad)*-1);gap:0;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);background:#fff}
.audience-media{aspect-ratio:auto;min-height:440px;border-right:1px solid var(--frame-line)}
.audience-cards{border-top:0}
.audience-cards article{padding:36px var(--pad);border-bottom:1px solid var(--frame-line)}
.audience-cards article:last-child{border-bottom:0}
.media--particles{background:var(--frame-dark)}
@media(max-width:900px){.audience-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}.audience-tabs [role=tab]{border-bottom:0;border-left:1px solid var(--frame-line);min-height:64px}.audience-tabs [role=tab]:first-child{border-left:0}.audience-tabs [role=tab]::before{top:auto;bottom:-1px}.audience-media{min-height:280px;border-right:0;border-bottom:1px solid var(--frame-line)}}
@media(max-width:560px){.audience-tabs{grid-template-columns:1fr}.audience-tabs [role=tab]{border-left:0;border-bottom:1px solid var(--frame-line)}}
/* Feature film expands within the frame. */
.feature-stage{width:var(--frame-w);margin-inline:auto}
.feature-media{background:var(--frame-dark)}
.feature-shade{background:linear-gradient(90deg,rgba(21,21,21,.95) 0%,rgba(21,21,21,.6) 45%,rgba(21,21,21,0) 75%)}
.film-tint{background:#2f6f6b;opacity:.55}
.feature-copy{width:100%}
/* Process sequence inside the frame */
.process-head{gap:16px}
.process-viewport{width:var(--frame-w);margin-inline:auto;overflow:hidden;border-block:1px solid var(--frame-line)}
.process-track{max-width:none;padding:0;gap:0}
.process-card{border:0;border-right:1px solid var(--frame-line);padding:32px var(--pad)}
.process-card:last-child{border-right:0}
.process.is-pinned .process-track{gap:0;padding:0}
.process.is-pinned .process-card{width:clamp(320px,calc(var(--frame-w) / 2.6),420px)}
.process-progress span{background:var(--accent)}
.process-foot{margin-top:0;padding-block:24px}
@media(max-width:1100px){.process-card:nth-child(2n){border-right:0}.process-card:nth-child(-n+2){border-bottom:1px solid var(--frame-line)}}
@media(max-width:620px){.process-card{border-right:0;border-bottom:1px solid var(--frame-line)}}

/* Inner pages: heroes become the first dark cell of the frame. */
.hero--page,.hero--compact{width:var(--frame-w);margin-inline:auto;background:var(--frame-dark);min-height:clamp(540px,78svh,800px)}
.hero--compact{min-height:clamp(440px,56svh,580px)}
.hero--page .hero-title,.hero--compact .hero-title{font-size:var(--fs-h1);max-width:14ch}
.hero-content{padding-inline:var(--pad)}
.hero-bar{padding-inline:var(--pad)}
.hero-bar::before{left:0;right:0}
.hero-index{color:var(--muted-dark);font-size:12px;letter-spacing:.06em;font-weight:400}
.hero-index i{background:var(--accent-light)}
.hero-meta dt{font-weight:400;letter-spacing:.06em;color:var(--muted-dark)}
.scroll-cue,.video-toggle{font-weight:400;letter-spacing:.08em}
.scroll-line::after{background:var(--accent-light)}
.hero-scrim{background:linear-gradient(90deg,rgba(21,21,21,.92) 0%,rgba(21,21,21,.55) 45%,rgba(21,21,21,.1) 100%),linear-gradient(0deg,rgba(21,21,21,.95) 0%,rgba(21,21,21,0) 46%)}
.hero-film,.hero-media{background:var(--frame-dark)}
/* Inner sections use frame cells rather than floating cards. */
.split{column-gap:0}
.split-head{padding-right:var(--pad)}
.ledger>li,.ledger>article{border-color:var(--frame-line)}
.accordion summary{font-size:clamp(22px,2.4vw,34px)}
.accordion summary:hover{color:var(--accent)}
.plus::before,.plus::after{background:var(--accent)}
.image-cards{gap:0;margin-inline:calc(var(--pad)*-1);border-top:1px solid var(--frame-line)}
.image-card+.image-card{border-left:1px solid var(--frame-dark-line)}
.image-card{background:var(--frame-dark)}
.image-card::after{background:linear-gradient(0deg,rgba(21,21,21,.92) 0%,rgba(21,21,21,.15) 60%,rgba(21,21,21,0) 100%)}
.numbered .big-num{color:var(--accent-light)}
.lanes{gap:0}
.lanes::before{background:var(--frame-line)}
.lanes::after{background:linear-gradient(90deg,transparent,var(--accent),transparent)}
.lane{border-color:var(--frame-line);border-right-width:0}
.lane:last-child{border-right-width:1px}
.lane--fractur{background:var(--frame-dark);border-color:var(--frame-dark)}
.module-stage{border-color:var(--frame-line)}
.roles .is-key h3{color:var(--accent-light)}
.principle:hover h3{color:var(--accent-light)}
.principle h3{font-size:clamp(40px,5.6vw,84px)}
.scope-card{border-color:var(--frame-line)}
.form{border-color:var(--frame-line)}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--accent);box-shadow:0 1px 0 var(--accent)}
.enquiry-review{border-left-color:var(--accent)}
.legal-toc a[aria-current]{border-left-color:var(--accent)}
.read-progress{background:var(--accent);top:var(--header-h)}
.highlight-box{border-left-color:var(--accent)}
.profile{border-color:var(--frame-line)}
.profile-role{color:var(--accent);font-weight:400;letter-spacing:.06em}
.insight-meta,.facts dt,.field label,.process-step,.steps li::before{font-weight:400;letter-spacing:.06em}
.portrait img{filter:grayscale(1)}

/* Footer — the live frame footer. */
.frame-footer{width:var(--frame-w);margin-inline:auto}
.frame-footer-box{background:var(--frame-dark);color:#f4f4f1}
.frame-closing{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;padding:clamp(72px,8vw,104px) var(--pad)}
.frame-closing h2{font-size:clamp(34px,3.6vw,48px);line-height:1.1}
.frame-button{display:inline-flex;align-items:center;justify-content:space-between;gap:36px;min-height:52px;padding:0 22px;font-size:14px;background:#252525;color:#fff;transition:background-color .3s ease,color .3s ease}
.frame-button--light{background:#f4f4f1;color:#252525}
.frame-button:hover,.frame-button:focus-visible{background:var(--green);color:#fff}
.diagonal{display:inline-block;font-size:20px;line-height:1;transition:transform .3s var(--ease-out)}
a:hover>.diagonal,a:focus-visible>.diagonal{transform:translate(3px,-3px)}
.frame-footer-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-block:1px solid var(--frame-dark-line)}
.frame-footer-nav>a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:72px;padding:20px 12px;font-size:15px;border-left:1px solid var(--frame-dark-line);transition:background-color .25s ease}
.frame-footer-nav>a:first-child{border-left:0}
.frame-footer-nav>a:hover,.frame-footer-nav>a:focus-visible,.frame-footer-nav>a[aria-current=page]{background:#242424}
.frame-footer-nav>a[aria-current=page]{box-shadow:inset 0 -2px var(--accent)}
.frame-footer-nav .diagonal{font-size:16px;color:var(--accent-light)}
.frame-footer-contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;padding:clamp(64px,7vw,88px) var(--pad);border-bottom:1px solid var(--frame-dark-line)}
.footer-mark img{width:clamp(170px,17vw,210px);height:auto}
.prominent-contact{font-size:clamp(24px,2.6vw,34px);letter-spacing:-.02em}
.prominent-contact span{display:inline-block;color:var(--accent-light);font-weight:300;transition:transform .3s var(--ease-out)}
.prominent-contact:hover span{transform:translate(3px,-3px)}
.frame-utilities{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:32px var(--pad);font-size:13px;line-height:1.6;color:var(--muted-dark)}
.frame-utilities div{display:flex;gap:24px}
.frame-utilities a:hover{color:#fff}
.frame-utilities p:last-child{text-align:right}
.frame-disclosure{padding:22px 0 40px;font-size:13px;line-height:1.7;color:var(--muted)}
body.page-contact .frame-closing{display:none}
@media(max-width:760px){
  .frame-footer-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frame-footer-nav>a{border-left:0;border-right:1px solid var(--frame-dark-line);border-bottom:1px solid var(--frame-dark-line)}
  .frame-footer-nav>a:nth-child(even){border-right:0}
  .frame-footer-nav>a:last-child{grid-column:1/-1;border:0}
  .frame-utilities{grid-template-columns:1fr}
  .frame-utilities p:last-child{text-align:left}
  .section-head h2,.section-head p{grid-column:1/-1}
  .statement-aside{grid-template-columns:1fr}.statement-aside .btn-row{grid-column:1}
  .benefit-row{grid-template-columns:44px 1fr 32px}
  .hero-wordmark{top:28px}
}
.site-header .brand .logo-dark{display:block!important}
.hero-meta{gap:clamp(20px,3vw,48px)}
.hero-meta dd{white-space:nowrap}
@media(max-width:900px){.hero-meta dd{white-space:normal}}


/* ——— Revision: no navbar, slate accent, plain labels, no coloured lines, cinematic openings ——— */
.site-header,.site-menu{display:none!important}
:root{--teal:#536779;--teal-glow:#8fa2b3}

/* Labels: small, upright, neutral. No rules, dots or colour. */
.eyebrow,.hero-index,.label{display:inline-flex;align-items:baseline;gap:12px;font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.eyebrow::before,.eyebrow .dot,.hero-index i{display:none!important}
.eyebrow .index-num,.label .index-num,.index-num,.on-dark .index-num,.hero .index-num{color:var(--ink);font-weight:400;letter-spacing:.08em}
.on-dark .eyebrow,.hero .label,.hero .eyebrow,.frame-footer .eyebrow{color:var(--muted-dark)}
.on-dark .eyebrow .index-num,.on-dark .index-num,.hero .index-num{color:#f4f4f1}
.process-step,.profile-role,.insight-meta,.facts dt,.field label,.hero-meta dt{color:var(--muted)!important;letter-spacing:.12em}
.profile-role{color:var(--ink)!important}

/* Neutral lines only — selection, focus and progress use ink, never colour. */
.audience-tabs [role=tab]::before{display:none}
.audience-tabs [role=tab][aria-selected=true]{background:var(--wash);color:var(--ink)}
.audience-tabs [role=tab]:not([aria-selected=true]){color:var(--muted)}
.frame-footer-nav>a[aria-current=page]{box-shadow:none;background:#242424}
.lanes::after{display:none}
.process-progress span{background:var(--ink)}
.read-progress{background:#252525;top:0;height:2px}
.legal-toc a[aria-current]{border-left-color:var(--ink)}
.enquiry-review{border-left:0}
.highlight-box{border-left:0}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink);box-shadow:0 1px 0 var(--ink)}
.curtain-panel::after{display:none}
.scroll-line::after{background:#fff}
.link-arrow:hover{color:var(--ink)}
.accordion summary:hover{color:var(--muted)}
.plus::before,.plus::after{background:currentColor}
.roles .is-key h3,.principle:hover h3{color:inherit}
.numbered .big-num{color:#f4f4f1}
:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.film-tint{background:#536779;opacity:.6}

/* Curtain: wordmark fades in and holds, then fades just before the panel lifts.
   On page exit the panel covers first and the wordmark returns, so the next page opens on it. */
html.js .curtain-mark{animation:none!important;opacity:0;transform:translate(-50%,-50%);transition:opacity .7s ease}
html.mark-in .curtain-mark,html.return-visit .curtain-mark{opacity:1}
html.is-loaded .curtain-mark{opacity:0;transform:translate(-50%,-50%);transition:opacity .35s ease}
html.is-loaded .curtain-panel{transition:transform 1.1s var(--ease-io) .2s}
html.is-leaving .curtain-mark{opacity:1;transition:opacity .4s ease .5s}

/* Cinematic openings — full-bleed, letterboxed, slow camera drift; title card centred. */
.hero--cine{display:grid;place-items:center;width:100%;min-height:100svh;background:#000;text-align:center}
.hero--cine.hero--short{min-height:clamp(480px,70svh,720px)}
.hero--cine .hero-media{background:#000}
.hero--cine .hero-media>img,.hero--cine .hero-media>video{animation:camera-drift 26s ease-in-out infinite alternate}
.hero--cine .cine-photo{filter:brightness(.5) saturate(.75) contrast(1.05)}
.hero--cine .cine-particles{object-fit:contain!important;padding:8vh 8vw;filter:invert(1) hue-rotate(180deg) brightness(.9);mix-blend-mode:screen;opacity:.55}
.hero--cine .hero-film video{inset:0;width:100%;opacity:.65}
.hero--cine .hero-scrim{background:radial-gradient(ellipse at center,rgba(0,0,0,.15) 0%,rgba(0,0,0,.65) 75%,rgba(0,0,0,.85) 100%),linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,0) 35%)}
@keyframes camera-drift{from{transform:scale(1.04) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.5%,-1%,0)}}
.hero--cine .hero-content{width:min(1000px,calc(100% - 48px));padding:calc(var(--header-h) + 40px) 0 120px;justify-items:center;gap:28px;align-self:center}
.hero--cine .hero-title{font-size:clamp(44px,6.4vw,104px);line-height:1.02;letter-spacing:-.035em;max-width:none}
.hero--cine .hero-lede{max-width:44ch;margin-inline:auto;color:rgba(244,244,241,.72);font-size:clamp(15px,1.15vw,18px)}
.hero--cine .label{color:rgba(244,244,241,.6)}
.hero--cine .hero-wordmark{z-index:3}
.hero--cine .hero-film-toggle{z-index:3}
.letterbox{position:absolute;inset:0;z-index:4;pointer-events:none}
.letterbox::before,.letterbox::after{content:"";position:absolute;left:0;right:0;height:13vh;background:#000;transition:transform 1.8s var(--ease-io) .5s}
.letterbox::before{top:0}
.letterbox::after{bottom:0}
html.is-loaded .letterbox::before{transform:translateY(-100%)}
html.is-loaded .letterbox::after{transform:translateY(100%)}
html:not(.js) .letterbox{display:none}
.hero--cine~section::before,main>.hero--cine+section::before{border-top:0!important}
@media(prefers-reduced-motion:reduce){.hero--cine .hero-media>img,.hero--cine .hero-media>video{animation:none}.letterbox{display:none}}
@media(max-width:760px){.hero--cine .hero-content{padding-bottom:110px}.letterbox::before,.letterbox::after{height:8vh}}
main>section.hero--cine::before{content:none!important}

/* Glass scenes — real-time 3D loops; the poster image shows until the scene is live. */
.glass-stage{position:relative;overflow:hidden;background:#000}
.glass-stage>img,.glass-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.glass-stage>img{transition:opacity .8s ease}
.glass-stage.is-live>img{opacity:0}
.glass-canvas{display:block;opacity:0;transition:opacity 1.2s ease}
.glass-stage.is-live .glass-canvas{opacity:1}
.feature-media.glass-stage{position:absolute}
.feature-media .feature-shade{z-index:1}
.hero-glass{position:absolute!important;inset:0}
.hero--cine .hero-media>.hero-glass{animation:none}
.module-stage.glass-stage{background:#000;border:0}
.module-stage.glass-stage figure{z-index:1;grid-template-rows:1fr auto;background:none}
.module-stage.glass-stage figure img{visibility:hidden}
.module-stage.glass-stage figcaption{background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f4f4f1;border-top:1px solid rgba(255,255,255,.12)}
.module-stage.glass-stage figcaption span{color:#b9b9b4}
.scope-art.glass-stage,.insight .media.glass-stage,.audience-media.glass-stage{background:#000}
.image-card .media.glass-stage{position:absolute;background:#151515}

/* ——— Alignment: one 12-column grid inside the frame; every row snaps to the same column lines. ——— */
:root{--col-gap:clamp(16px,2vw,28px);--col:calc((100% - 2 * var(--pad) - 11 * var(--col-gap)) / 12)}
.section-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:end}
.section-head .eyebrow{grid-column:1/-1}
.section-head h2{grid-column:1/span 7}
.section-head p{grid-column:8/span 5;max-width:42ch}
/* Logos band: centred title over the marquee, as live. */
.logos-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.logos-head h2,.logos-head p{margin-inline:auto}
/* Statement: title and copy on columns 1–9, aside image on 1–3 and copy from column 4. */
.statement-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.statement-title,.statement-text{grid-column:1/span 9}
.statement-aside{grid-column:1/-1;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.statement-aside img{grid-column:1/span 3;width:100%;max-width:220px}
.statement-aside p{grid-column:4/span 7;max-width:60ch}
.statement-aside .btn-row{grid-column:4/span 9}
/* Benefit rows share the section-head columns: number 1, title 2–7, copy 8–11, arrow 12. */
.benefit-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:center}
.benefit-row>.index-num{grid-column:1}
.benefit-row>h3{grid-column:2/span 6}
.benefit-row>p{grid-column:8/span 4;max-width:none}
.benefit-row>.benefit-arrow{grid-column:12;justify-self:end}
/* Audience panel: image ends where column 8 begins, so card copy lines up with the intro copy above. */
.audience-panel{grid-template-columns:calc(7 * (var(--col) + var(--col-gap))) minmax(0,1fr)}
/* Cards inside frame cells keep the frame's inner padding. */
.audience-cards article{padding-inline:var(--pad) var(--pad)}
@media(max-width:900px){
  .section-head h2,.section-head p,.statement-title,.statement-text{grid-column:1/-1}
  .statement-aside img{grid-column:1/span 4}
  .statement-aside p,.statement-aside .btn-row{grid-column:1/-1}
  .benefit-row>.index-num{grid-column:1/span 2}
  .benefit-row>h3{grid-column:3/span 9}
  .benefit-row>p{grid-column:3/span 9}
  .benefit-row>.benefit-arrow{grid-column:12;grid-row:1}
  .audience-panel{grid-template-columns:1fr}
}

/* Column steps in absolute terms, so nested rows can snap to the page grid. */
:root{--frame-px:min(1280px,calc(100vw - 64px));--colw:calc((var(--frame-px) - 2 * var(--pad) - 11 * var(--col-gap)) / 12);--step:calc(var(--colw) + var(--col-gap))}
@media(max-width:760px){:root{--frame-px:calc(100vw - 32px)}}

/* Split: heading on 1–6, content from column 7. */
.split{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.split-head{grid-column:1/span 5;padding-right:0}
.split-body{grid-column:7/-1}
/* Ledger rows: number in the first column step, text from the next column. */
.ledger>li,.ledger>article{grid-template-columns:var(--step) minmax(0,1fr);gap:8px 0}
/* Accordions: number column, then title and body on the next column line. */
.accordion summary{grid-template-columns:var(--step) minmax(0,1fr) 48px;gap:0}
.accordion-body{padding-left:var(--step)}
.facts{grid-template-columns:repeat(3,calc(4 * var(--step)));gap:0}
.facts>div{padding-right:var(--col-gap)}
.modules .accordion-body{padding-left:var(--step)}
/* Image cards split on the column-7 line; card copy sits on the frame padding. */
.image-cards{grid-template-columns:calc(6 * var(--step)) minmax(0,1fr)}
.image-card{padding:var(--pad)}
/* Checklist as rows on the section columns: number, item, description. */
.numbered{display:block;border-top:1px solid var(--frame-dark-line)}
.numbered>div{display:grid;grid-template-columns:var(--step) calc(6 * var(--step)) minmax(0,1fr);align-items:baseline;gap:0;padding:28px 0;border:0;border-bottom:1px solid var(--frame-dark-line)}
.numbered>div+div{padding-left:0;border-left:0}
.numbered .big-num{font-size:14px;letter-spacing:.08em;color:var(--muted-dark)}
.numbered dt{font-size:clamp(20px,1.8vw,26px)}
.numbered dd{font-size:16px}
/* Scope: copy on 1–6, art on 8–12; the enquiry note is a ruled cell, not a floating card. */
.scope{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.scope>div:first-child{grid-column:1/span 6}
.scope-art{grid-column:8/-1}
.scope-card{padding:32px 0 0;border:0;border-top:1px solid var(--frame-line);background:none}
/* Lanes: frame-wide cells whose copy starts on columns 1, 4, 7 and 10. */
.lanes{margin-inline:calc(var(--pad) * -1);grid-template-columns:repeat(3,calc(3 * var(--step))) minmax(0,1fr);border-block:1px solid var(--frame-line)}
.lane{padding:32px var(--col-gap) 32px var(--pad);border:0;border-left:1px solid var(--frame-line);min-height:200px}
.lane:first-child{border-left:0}
.lane:last-child{border-right:0}
.lanes::before{display:none}
/* Modules: list on 1–6, stage on 7–12. */
.modules{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.modules>.accordion{grid-column:1/span 6}
.modules>.module-stage{grid-column:7/-1}
/* Roles: three equal four-column cells, divided by rules above rather than between. */
.roles{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);border-top:0}
.roles article,.roles article+article{padding:32px 0 48px;border-left:0;border-top:1px solid var(--frame-dark-line);border-bottom:0}
/* Principles: number, word on 2–7, description from column 8. */
.principle{grid-template-columns:var(--step) calc(6 * var(--step)) minmax(0,1fr);gap:0}
/* Origin and team profiles: media on 1–6, copy from column 8 (mirrored on alternate profiles). */
.origin,.profile{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.origin-media{grid-column:1/span 6}
.origin-copy{grid-column:8/-1}
.profile .profile-media{grid-column:1/span 6;order:0}
.profile .profile-copy{grid-column:8/-1}
.profile:nth-of-type(even) .profile-media{grid-column:7/-1;grid-row:1;order:0}
.profile:nth-of-type(even) .profile-copy{grid-column:1/span 5;grid-row:1}
.founders{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}
.insights{gap:var(--col-gap)}
/* Contact: context on 1–5; the form is a frame cell from column 7 to the frame edge. */
.contact-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.contact-aside{grid-column:1/span 5}
.form{grid-column:7/-1;margin:0 calc(var(--pad) * -1) 0 calc(var(--pad) * -1);padding:48px var(--pad);border:0;border-left:1px solid var(--frame-line)}
.form-pair{gap:var(--col-gap)}
.steps li{grid-template-columns:var(--step) minmax(0,1fr);gap:4px 0}
/* Legal: index on 1–3, reading column from 5. */
.legal{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.legal-toc{grid-column:1/span 3}
.legal-content{grid-column:5/-1}
.highlight-box{padding:24px 0;background:none;border-block:1px solid var(--frame-line)}

@media(max-width:900px){
  .split-head,.split-body,.scope>div:first-child,.scope-art,.modules>.accordion,.modules>.module-stage,.origin-media,.origin-copy,
  .profile .profile-media,.profile .profile-copy,.profile:nth-of-type(even) .profile-media,.profile:nth-of-type(even) .profile-copy,
  .contact-aside,.form,.legal-toc,.legal-content{grid-column:1/-1;grid-row:auto}
  .form{margin:0 calc(var(--pad) * -1);border-left:0;border-top:1px solid var(--frame-line)}
  .image-cards{grid-template-columns:1fr}
  .lanes{grid-template-columns:1fr 1fr}
  .lane:nth-child(3){border-left:0}
  .lane:nth-child(-n+2){border-bottom:1px solid var(--frame-line)}
  .roles{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
  .numbered>div,.principle{grid-template-columns:var(--step) minmax(0,1fr)}
  .numbered dd,.principle p{grid-column:2}
}
@media(max-width:760px){:root{--step:48px}.accordion-body,.modules .accordion-body{padding-left:0}}
/* Equal text blocks so titles in neighbouring cards share a line. */
@media(min-width:901px){
  .image-card p:last-child{min-height:calc(1.65em * 3)}
  .insight h3{min-height:calc(1.12em * 2)}
  .insight p{min-height:calc(1.65em * 2)}
}
@media(max-width:760px){
  .benefit-row{grid-template-columns:var(--step) minmax(0,1fr) 32px;column-gap:0}
  .benefit-row>.index-num{grid-column:1}
  .benefit-row>h3,.benefit-row>p{grid-column:2}
  .benefit-row>.benefit-arrow{grid-column:3;grid-row:1}
}
.section-head .eyebrow{font-size:12px;letter-spacing:.14em;max-width:none;line-height:1.4}

/* 04 — the chapter leaves the frame: a full-bleed film of the glass scene. */
main>section.feature::before{content:none!important}
.feature .feature-stage{width:100%}
.feature .feature-media{background:#000}
.feature .feature-copy{width:var(--frame-w);margin-inline:auto;padding-inline:var(--pad)}
.feature .feature-shade{background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,0) 62%),linear-gradient(0deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 30%)}
.feature .feature-copy .h2{font-size:clamp(40px,4.6vw,72px);max-width:12ch}
.feature .feature-copy .lead{max-width:34em}

/* All photography is shown in greyscale; brand colour never comes from images. */
main img:not([src$=".svg"]),.hero img:not([src$=".svg"]),.preview-float img{filter:grayscale(1)}
.hero--cine .cine-photo{filter:grayscale(1) brightness(.5) contrast(1.08)}

/* Time slices */
.slices{position:absolute;inset:0;overflow:hidden;background:#000}
.slices>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.45)}
.slices.is-sliced>img{visibility:hidden}
.slices-track{position:absolute;inset:0}
.slice{position:absolute;top:0;bottom:0;overflow:hidden;box-shadow:inset -1px 0 rgba(255,255,255,.06)}
.slice img{position:absolute;top:0;height:100%;max-width:none;object-fit:cover;filter:grayscale(1) brightness(var(--b,.5)) contrast(1.08);animation:slice-hour 10s ease-in-out infinite;animation-delay:calc(var(--i) * -.62s)}
@keyframes slice-hour{0%,100%{filter:grayscale(1) brightness(.16) contrast(1.15)}45%{filter:grayscale(1) brightness(.62) contrast(1.02)}60%{filter:grayscale(1) brightness(.5) contrast(1.05)}}
.slices-caption{position:absolute;left:0;right:0;bottom:132px;z-index:3;text-align:center;font-size:14px;letter-spacing:.02em;color:rgba(255,255,255,.82);opacity:0;filter:blur(6px);transform:translateY(6px);transition:opacity .45s ease,filter .45s ease,transform .45s ease}
.slices-caption.is-in{opacity:1;filter:none;transform:none}
.hero--cine .hero-media>.slices{animation:none}
@media(prefers-reduced-motion:reduce){.slice img{animation:none;filter:grayscale(1) brightness(.45)}}
@media(max-width:760px){.slices-caption{bottom:118px;font-size:13px}}
/* Capabilities stage: a neutral progress rule for the self-running tour. */
.module-stage{aspect-ratio:5/4}
.module-progress{position:absolute;left:0;right:0;top:0;z-index:2;height:2px;background:rgba(255,255,255,.75);transform:scaleX(0);transform-origin:left}
.module-stage.glass-stage figcaption{font-size:16px;padding:22px 24px}
.module-stage.glass-stage figure{display:flex;flex-direction:column;justify-content:flex-end}
.module-stage.glass-stage figure img{display:none}

/* Performance: animate opacity only (compositor), never filters on large images. */
.slice img{animation:none;filter:grayscale(1) brightness(.62) contrast(1.05)}
.slice::after{content:"";position:absolute;inset:0;background:#000;opacity:.7;will-change:opacity;animation:slice-shade 10s ease-in-out infinite;animation-delay:calc(var(--i) * -.62s)}
@keyframes slice-shade{0%,100%{opacity:.78}45%{opacity:0}60%{opacity:.18}}
@media(prefers-reduced-motion:reduce){.slice::after{animation:none;opacity:.3}}
.module-stage.glass-stage figcaption{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,.6))}
.marquee img{mix-blend-mode:normal}
.marquee-track{will-change:transform}
.glass-canvas{contain:strict}
.image-card::after{background:linear-gradient(0deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.55) 38%,rgba(0,0,0,0) 72%)}

/* ——— Proposal sections ——— */
.section-note{margin-top:32px;max-width:72ch;color:var(--muted);font-size:15px}
.foundation-bar{display:grid;grid-template-columns:calc(3 * var(--step)) minmax(0,1fr);align-items:center;margin:0 calc(var(--pad) * -1);padding:36px var(--pad);background:#151515;color:#f4f4f1}
.foundation-bar .label{color:var(--muted-dark)}
.foundation-bar p{font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;line-height:1.25}
.lanes--plain .lane{background:#fff}
/* Five steps across the twelve columns, numbered and ruled. */
.steps-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));column-gap:var(--col-gap);border-top:1px solid var(--frame-line)}
.steps-row li{display:grid;align-content:start;gap:12px;padding:28px 0 36px;border-bottom:1px solid var(--frame-line)}
.steps-row h3{font-size:clamp(22px,2vw,28px);font-weight:400}
.steps-row p{color:var(--muted);font-size:15px}
.today-future{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);margin-top:36px}
.today-future p{grid-column:span 6;color:var(--muted)}
.today-future strong{display:block;margin-bottom:6px;font-weight:400;color:var(--ink);font-size:18px}
.roles--light article,.roles--light article+article{border-top-color:var(--frame-line)}
.roles--light p{color:var(--muted)}
/* Controls: two ruled columns of term and description. */
.controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);border-top:1px solid var(--frame-line)}
.controls>div{display:grid;grid-template-columns:calc(3 * var(--step)) minmax(0,1fr);gap:0;padding:22px 0;border-bottom:1px solid var(--frame-line)}
.controls dt{font-size:18px;letter-spacing:-.01em}
.controls dd{margin:0;color:var(--muted);font-size:15px}
@media(max-width:900px){
  .steps-row{grid-template-columns:1fr 1fr}
  .controls{grid-template-columns:1fr}
  .today-future p{grid-column:1/-1}
  .foundation-bar{grid-template-columns:1fr;gap:12px}
}
@media(max-width:560px){.steps-row{grid-template-columns:1fr}.controls>div{grid-template-columns:1fr;gap:6px}}
.experience{margin-block:8px 8px;border-top:1px solid var(--frame-line);width:100%}
.experience>div{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--frame-line)}
.experience dt{font-size:16px}
.experience dd{margin:0;color:var(--muted);font-size:14.5px}
.lane{align-content:start;gap:48px}
.steps-row{grid-template-columns:repeat(12,minmax(0,1fr))}
.steps-row>li{grid-column:span 2}
.steps-row>.steps-label{padding-top:30px}
@media(max-width:900px){.steps-row{grid-template-columns:1fr 1fr}.steps-row>li{grid-column:auto}.steps-row>.steps-label{grid-column:1/-1;padding-bottom:0;border-bottom:0}}
@media(max-width:560px){.steps-row{grid-template-columns:1fr}}
/* Bright photographs get a deeper grade so copy over them stays readable. */
.slices[data-tone=bright] .slice img{filter:grayscale(1) brightness(.4) contrast(1.15)}
.slices[data-tone=bright] .slice::after{animation-name:slice-shade-bright}
@keyframes slice-shade-bright{0%,100%{opacity:.82}45%{opacity:.25}60%{opacity:.4}}
.hero--cine .hero-lede{text-shadow:0 1px 18px rgba(0,0,0,.55)}
.foundation-bar{grid-template-columns:1fr}

/* Category preview: a small render with no frame. The render is inverted and blended by difference, so its ground
   drops away on the dark hovered row and on white alike, while the row's fill sweeps in, and only the sculpture shows.
   Edges feather out, and it leans and stretches with the pointer's speed (--tilt, --stretch from components.js). */
.preview-float{width:clamp(84px,6vw,104px);aspect-ratio:1;border-radius:0;background:none;box-shadow:none;mix-blend-mode:difference;
  transform:translate(calc(var(--x,0px) - 50%),calc(var(--y,0px) - 50%)) rotate(var(--tilt,0deg)) scale(var(--stretch,1),calc(2 - var(--stretch,1)));
  transition:opacity .6s ease,scale .9s cubic-bezier(.22,1,.36,1);
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.5) 80%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,rgba(0,0,0,.5) 80%,transparent 100%)}
.preview-float.is-visible{opacity:1}
/* The section isolates its blending, so it needs its own white for the difference blend to work against. */
.benefits:has(.preview-float){background:#fff}
.preview-float img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;
  transition:opacity .7s ease,transform 1.1s cubic-bezier(.22,1,.36,1),filter .7s ease}
main .preview-float img:not(.is-current){opacity:0;transform:scale(1.12);filter:grayscale(1) invert(1) blur(6px)}
main .preview-float img.is-current{opacity:1;transform:none;filter:grayscale(1) invert(1)}
.closing-copy{display:grid;gap:18px;max-width:34em}
.closing-copy p{color:var(--muted-dark);font-size:15px;line-height:1.7}

/* ——— Introduction request ——— */
.request-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.request-aside{grid-column:1/span 5;display:grid;gap:32px}
@media(min-width:901px){.request-aside{position:sticky;top:48px}}
.request-intro{color:var(--muted-dark);font-size:17px;line-height:1.7;max-width:34em}
.request-path{border-top:1px solid var(--frame-dark-line)}
.request-path li{display:grid;grid-template-columns:var(--step) minmax(0,1fr);padding:20px 0;border-bottom:1px solid var(--frame-dark-line)}
.request-path h3{font-size:18px;font-weight:400;color:#f4f4f1}
.request-path p{color:var(--muted-dark);font-size:14.5px;margin-top:4px}
.request-direct{display:grid;gap:6px}
.request-direct a{font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;color:#f4f4f1;justify-self:start;border-bottom:1px solid var(--frame-dark-line);padding-bottom:6px}
.request-direct a:hover{border-bottom-color:#f4f4f1}
.request-direct span{color:var(--muted-dark);font-size:14px}
/* The form is its own cell of the frame, from column 7 to the frame edge. */
.request-form{grid-column:7/-1;margin-right:calc(var(--pad) * -1);margin-left:calc(var(--pad) * -1);padding:48px var(--pad) 40px;border-left:1px solid var(--frame-dark-line);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,0) 60%);min-height:560px;display:flex;flex-direction:column}
.request-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.request-progress span{height:2px;background:rgba(255,255,255,.14);position:relative;overflow:hidden}
.request-progress span::after{content:"";position:absolute;inset:0;background:#f4f4f1;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease-out)}
.request-progress .is-done::after,.request-progress .is-current::after{transform:none}
.request-progress .is-current::after{opacity:.55}
.request-count{margin-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-dark)}
.request-count b{font-weight:400;color:#f4f4f1}
.request-step{border:0;margin:28px 0 0;padding:0;min-width:0;display:grid;gap:30px}
.request-step.is-active{animation:step-in .7s var(--ease-out)}
@keyframes step-in{from{opacity:0;transform:translateX(24px)}}
.request-step legend{float:left;width:100%;margin-bottom:6px;font-size:clamp(28px,2.8vw,40px);letter-spacing:-.03em;line-height:1.1;color:#f4f4f1}
.request-form .form-pair{gap:var(--col-gap)}
.request-form .field label{color:var(--muted-dark);letter-spacing:.12em}
.request-form .field input,.request-form .field select,.request-form .field textarea{color:#f4f4f1;font-size:19px;border-bottom-color:rgba(255,255,255,.22);background-color:transparent}
.request-form .field input::placeholder,.request-form .field textarea::placeholder{color:rgba(255,255,255,.32)}
.request-form .field input:focus,.request-form .field select:focus,.request-form .field textarea:focus{border-bottom-color:#f4f4f1;box-shadow:0 1px 0 #f4f4f1}
.request-form .field select{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f4f4f1' stroke-width='1.4'/%3E%3C/svg%3E") right 4px center no-repeat}
.request-form .field select option{color:#151515}
.request-form .form-note{color:var(--muted-dark)}
.request-form .form-note a{text-decoration:underline;text-underline-offset:4px}
.request-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:auto;padding-top:40px}
.request-nav [data-step-next],.request-nav [data-step-submit]{margin-left:auto}
.request-back{min-height:44px;color:var(--muted-dark);font-size:14px;letter-spacing:.02em}
.request-back:hover{color:#f4f4f1}
.request-form .enquiry-review{margin-top:24px;background:rgba(255,255,255,.05);color:#f4f4f1}
@media(max-width:900px){
  .request-aside,.request-form{grid-column:1/-1}
  .request-form{margin:48px calc(var(--pad) * -1) 0;border-left:0;border-top:1px solid var(--frame-dark-line);min-height:0}
}

/* ——— Motion polish: one consistent, quiet response on every row and cell ——— */
.ledger>li,.controls>div,.steps-row>li:not(.steps-label),.experience>div,.lane,.roles article,.request-path li,.accordion summary{transition:background-color .45s var(--ease-out)}
.ledger>li>h3,.controls dt,.steps-row h3,.experience dt,.lane strong,.roles h3,.request-path h3{transition:transform .6s var(--ease-out)}
@media(hover:hover){
  .ledger>li:hover>h3,.controls>div:hover dt,.steps-row>li:hover h3,.experience>div:hover dt,.lane:hover strong,.roles article:hover h3,.request-path li:hover h3{transform:translateX(6px)}
  .lane:not(.lane--fractur):hover{background:var(--wash)}
  .on-dark .roles article:hover{background:rgba(255,255,255,.02)}
}
/* Link underline draws from left on hover instead of sitting still. */
.link-arrow::after{opacity:.35;transform-origin:left;transition:opacity .4s ease,transform .6s var(--ease-out)}
.link-arrow:hover::after,.link-arrow:focus-visible::after{opacity:1}
/* Staggered list reveals feel deliberate rather than simultaneous. */
html.motion-ready .ledger>[data-reveal],html.motion-ready .controls>[data-reveal],html.motion-ready .steps-row>[data-reveal],html.motion-ready .lanes>[data-reveal],html.motion-ready .roles>[data-reveal],html.motion-ready .benefit-list [data-reveal]{transition-duration:1s;transition-delay:calc(var(--i,0) * 90ms)}
@media(prefers-reduced-motion:reduce){.ledger>li>h3,.controls dt,.steps-row h3,.experience dt,.lane strong,.roles h3,.request-path h3{transition:none;transform:none!important}}

/* ——— Economic value chain ——— */
.vc-wrap{position:relative;margin-top:8px}
.vc-line{position:absolute;left:0;right:0;top:18px;height:1px;background:var(--frame-line);overflow:hidden}
.vc-line::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform 2.6s var(--ease-io) .2s}
.vc-pulse{position:absolute;top:-1px;left:0;width:90px;height:3px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;z-index:1}
.value-chain{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.vc-step{grid-column:span 2;position:relative;display:grid;align-content:start;gap:10px;padding-top:48px}
.vc-node{position:absolute;top:12px;left:0;width:13px;height:13px;border-radius:50%;border:1px solid var(--ink);background:var(--paper);transition:background-color .6s var(--ease-out),transform .6s var(--ease-out);transition-delay:calc(var(--i) * .38s + .5s)}
.vc-step h3{font-size:clamp(19px,1.6vw,24px);font-weight:400;letter-spacing:-.02em;line-height:1.2}
.vc-step p{color:var(--muted);font-size:14.5px;line-height:1.65}
.vc-step .index-num{opacity:.6}
/* Static, complete state when motion is not running. */
html:not(.motion-ready) .vc-line::after{transform:none}
html:not(.motion-ready) .vc-node{background:var(--ink)}
html.motion-ready .vc-wrap.is-in .vc-line::after{transform:none}
html.motion-ready .vc-wrap.is-in .vc-node{background:var(--ink);transform:scale(1.15)}
html.motion-ready .vc-wrap.is-in .vc-pulse{animation:vc-travel 5s linear 3.2s infinite}
@keyframes vc-travel{0%{transform:translateX(-90px);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(calc(var(--vc-w,1200px)));opacity:0}}
.vc-wrap{--vc-w:100%}
.vc-pulse{left:0;right:auto}
/* Illustrative example and close. */
.vc-example{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:16px;margin-top:clamp(56px,6vw,88px);padding-top:32px;border-top:1px solid var(--frame-line)}
.vc-example-note{grid-column:1/span 3;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding-top:14px}
.vc-figures{grid-column:4/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap)}
.vc-figures>div{display:grid;gap:6px}
.vc-figures strong{font-weight:400;font-size:clamp(40px,4.6vw,72px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.vc-figures span:not([data-count]){color:var(--muted);font-size:14px}
.vc-example-copy{grid-column:4/-1;color:var(--muted);font-size:14px}
.vc-close{margin-top:clamp(40px,4vw,64px);font-size:clamp(22px,2.2vw,32px);letter-spacing:-.025em;line-height:1.25;max-width:26em}
@media(max-width:900px){
  .vc-step{grid-column:span 6;padding-top:36px;margin-bottom:28px}
  .vc-line{display:none}
  .vc-node{top:4px}
  .vc-example-note,.vc-figures,.vc-example-copy{grid-column:1/-1}
}
@media(max-width:560px){.vc-step{grid-column:1/-1}.vc-figures{grid-template-columns:1fr;row-gap:20px}}
@media(prefers-reduced-motion:reduce){.vc-pulse{display:none}}
@keyframes vc-travel{0%{left:-90px;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
html.motion-ready .vc-wrap.is-in .vc-pulse{transform:none}

/* ——— Economic value story: sticky 3D stage beside scrolling steps ——— */
.value-scroll{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);align-items:start}
.value-steps{grid-column:1/span 5;grid-row:1}
.value-stage{grid-column:7/-1;grid-row:1;position:sticky;top:10vh;height:80vh;margin-right:calc(var(--pad) * -1);background:#000}
.value-step{min-height:62vh;display:grid;align-content:center;gap:14px;padding:24px 0;border-top:1px solid var(--frame-line);opacity:.28;transition:opacity .6s var(--ease-out)}
.value-step:first-child{border-top:0}
.value-step.is-active{opacity:1}
.value-step h3{font-size:clamp(30px,3vw,48px);font-weight:400;letter-spacing:-.035em;line-height:1.08;transition:transform .8s var(--ease-out)}
.value-step p{color:var(--muted);font-size:17px;max-width:30em}
.value-meter{position:absolute;left:24px;bottom:20px;z-index:2;font-size:12px;letter-spacing:.14em;color:rgba(255,255,255,.55)}
.value-meter b{font-weight:400;color:#fff}
.value .vc-close{margin-top:clamp(48px,5vw,80px)}
@media(max-width:900px){
  .value-stage{grid-column:1/-1;grid-row:1;position:sticky;top:0;height:46vh;margin:0 calc(var(--pad) * -1);z-index:1}
  .value-steps{grid-column:1/-1;grid-row:2}
  .value-step{min-height:55vh}
}
@media(prefers-reduced-motion:reduce){.value-step{opacity:1}}

/* Number labels: one style everywhere. Plain two-digit numbers, no brackets, same size and spacing. */
.index-num,.numbered .big-num,.value-meter{font-size:12px!important;font-weight:400!important;letter-spacing:.08em!important;line-height:1.2;font-variant-numeric:tabular-nums}
/* Every number sits on the baseline of the first line of its heading, whatever the heading size or wrap. */
.ledger>li>.index-num,.ledger>li>h3,.ledger>article>.index-num,.ledger>article>h3,
.request-path li>.index-num,.request-path li>div,
.accordion summary>.index-num,.accordion summary>span:not([aria-hidden]),
.principle>.index-num,.principle>h3,
.benefit-row>.index-num,.benefit-row>h3,
.process-card-top>.index-num,.process-card-top>.process-step{align-self:first baseline;padding-top:0!important;margin-top:0!important}

/* Light particle stages: the scene draws straight onto the page, with no box or background of its own. */
.glass-stage[data-tone=light]{background:transparent!important}
.glass-stage[data-tone=light]>img,.glass-stage[data-tone=light] figure img{display:none}
.value-stage[data-tone=light]{margin-right:0}
.value-stage[data-tone=light] .value-meter{left:0;color:var(--muted)}
.value-stage[data-tone=light] .value-meter b{color:var(--ink)}
.module-stage[data-tone=light] figcaption{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--ink)!important;border-top:1px solid var(--frame-line)!important}
.module-stage[data-tone=light] figcaption span{color:var(--muted)!important}
.module-stage[data-tone=light] .module-progress{background:var(--ink)}
@media(max-width:900px){.value-stage[data-tone=light]{background:var(--paper,#fff)!important;margin:0}}

/* Announcement bar: a full-width strip above the homepage film, linking to an introduction. */
.announce{position:absolute;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:10px var(--pad);color:#fff;text-decoration:none;font-size:15px;line-height:1.35;letter-spacing:-.005em;background:transparent;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,.14);text-shadow:0 1px 8px rgba(0,0,0,.35);overflow:hidden;isolation:isolate}
.announce-text{opacity:.94}
.announce-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.announce-short,.announce-mid{display:none}
@media(max-width:1180px){.announce-long{display:none}.announce-mid{display:inline}}
.announce-link{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.announce-link svg{transition:transform .4s var(--ease-out)}
.announce:hover .announce-link svg,.announce:focus-visible .announce-link svg{transform:translateX(4px)}
.announce:focus-visible{outline:2px solid #fff;outline-offset:-4px}
.hero--film .hero-wordmark{top:84px}
@media(max-width:760px){
  .announce{font-size:13px;min-height:44px;gap:10px}
  .announce-long,.announce-mid{display:none}.announce-short{display:inline}
  .hero--film .hero-wordmark{top:72px}
}
/* No placeholder images: a scene stage stays empty until its scene is ready, then fades in. */
.glass-stage>img{display:none!important}

/* ——— Introduction request form: a light panel set into the dark section ——— */
.page-contact .frame-closing{display:none}
.enquiry{--e-ink:#151515;--e-muted:#6c6c68;--e-line:#e2e4e7;--e-soft:#f6f7f8;--e-focus:rgba(83,103,121,.22);--e-error:#b42318;
  grid-column:7/-1;align-self:start;display:flex;flex-direction:column;background:#fff;color:var(--e-ink);border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden}
.enquiry-head{padding:22px clamp(22px,3vw,40px) 0;border-bottom:1px solid var(--e-line);position:relative}
.enquiry-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.enquiry-tabs button{display:flex;align-items:baseline;gap:8px;width:100%;padding:0 0 16px;font-size:14px;color:var(--e-muted);text-align:left;transition:color .3s ease}
.enquiry-tabs button span{font-size:11px;letter-spacing:.08em;font-variant-numeric:tabular-nums}
.enquiry-tabs button:disabled{opacity:.45;cursor:default}
.enquiry-tabs button:not(:disabled):hover,.enquiry-tabs button[aria-current=step]{color:var(--e-ink)}
.enquiry-tabs button.is-done span::before{content:"✓ ";color:var(--accent)}
.enquiry-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.enquiry-bar span{position:absolute;left:0;top:0;bottom:0;width:var(--w,25%);transform:translateX(var(--x,0));background:var(--e-ink);transition:transform .6s var(--ease-out),width .6s var(--ease-out)}
.enquiry-body{padding:clamp(28px,3.2vw,44px) clamp(22px,3vw,40px) 8px;min-height:520px}
.enquiry-step{border:0;margin:0;padding:0;min-width:0;display:grid;gap:26px}
.enquiry-step:not([hidden]){animation:enq-in .6s var(--ease-out)}
@keyframes enq-in{from{opacity:0;transform:translateY(12px)}}
.enquiry-title{float:left;width:100%;padding:0;font-size:clamp(26px,2.4vw,34px);font-weight:400;letter-spacing:-.03em;line-height:1.12;color:var(--e-ink)}
.enquiry-hint{margin-top:-14px;color:var(--e-muted);font-size:15px}
.group{display:grid;gap:12px;border:0}
.group-label{font-size:13px;color:var(--e-muted)}
.group-label em{font-style:normal;margin-left:6px;opacity:.7}
.choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:8px}
.choice{position:relative;display:block;cursor:pointer}
.choice input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.choice span{display:flex;align-items:center;gap:10px;min-height:52px;padding:12px 14px;border:1px solid var(--e-line);border-radius:4px;font-size:14.5px;line-height:1.3;transition:border-color .25s ease,background-color .25s ease,box-shadow .25s ease}
.choice span::before{content:"";flex:none;width:14px;height:14px;border:1px solid #b9bcc0;border-radius:50%;transition:all .25s ease}
.choice input[type=checkbox]+span::before{border-radius:3px}
.choice:hover span{border-color:#c5c9cd}
.choice input:checked+span{border-color:var(--e-ink);background:var(--e-soft)}
.choice input:checked+span::before{border-color:var(--e-ink);background:var(--e-ink);box-shadow:inset 0 0 0 3px #fff}
.choice input[type=checkbox]:checked+span::before{box-shadow:none;background:var(--e-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.6' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center/12px no-repeat}
.choice input:focus-visible+span{box-shadow:0 0 0 4px var(--e-focus)}
.fld-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{position:relative}
.fld input,.fld textarea{width:100%;min-height:58px;padding:24px 14px 8px;border:1px solid var(--e-line);border-radius:4px;background:#fff;color:var(--e-ink);font:inherit;font-size:16px;transition:border-color .25s ease,box-shadow .25s ease}
.fld textarea{min-height:150px;padding-top:28px;resize:vertical;line-height:1.55}
.fld label{position:absolute;left:15px;top:19px;font-size:15px;color:var(--e-muted);pointer-events:none;transform-origin:left top;transition:transform .25s var(--ease-out),color .25s ease}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--e-ink);box-shadow:0 0 0 4px var(--e-focus)}
.fld input:focus+label,.fld input:not(:placeholder-shown)+label,.fld textarea:focus+label,.fld textarea:not(:placeholder-shown)+label{transform:translateY(-11px) scale(.78)}
.fld.is-invalid input,.fld.is-invalid textarea{border-color:var(--e-error)}
.fld.is-valid input{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3 7.4l2.6 2.6L11 4.6' fill='none' stroke='%23536779' stroke-width='1.6'/%3E%3C/svg%3E") right 14px center/14px no-repeat}
.fld-error{min-height:0;margin-top:6px;font-size:13px;color:var(--e-error)}
.fld-error:empty{display:none}
.fld-meta{display:flex;justify-content:space-between;gap:12px;margin-top:6px}
.fld-meta .fld-error{margin:0}
.fld-count{margin-left:auto;font-size:12px;color:var(--e-muted);font-variant-numeric:tabular-nums}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--e-ink);cursor:pointer}
.consent input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--e-ink)}
.consent a{text-decoration:underline;text-underline-offset:3px}
.enquiry-summary{display:grid;border-top:1px solid var(--e-line)}
.summary-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:16px 0;border-bottom:1px solid var(--e-line)}
.summary-row h4{font-size:13px;font-weight:400;color:var(--e-muted)}
.summary-row dl{grid-column:1;display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 16px;font-size:15px}
.summary-row dt{color:var(--e-muted)}
.summary-row dd{margin:0;overflow-wrap:anywhere}
.summary-row button{grid-column:2;grid-row:1;font-size:13px;color:var(--e-ink);text-decoration:underline;text-underline-offset:3px}
.enquiry-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px clamp(22px,3vw,40px) 28px}
.enquiry-nav [data-next],.enquiry-nav [data-submit]{margin-left:auto}
.enquiry-btn{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 22px;background:var(--e-ink);color:#fff;border-radius:4px;font-size:15px;transition:background-color .25s ease,transform .25s var(--ease-out)}
.enquiry-btn span{transition:transform .35s var(--ease-out)}
.enquiry-btn:hover{background:#000}
.enquiry-btn:hover span{transform:translateX(3px)}
.enquiry-btn:focus-visible,.enquiry-link:focus-visible,.enquiry-tabs button:focus-visible{outline:2px solid var(--e-ink);outline-offset:3px}
.enquiry-link{min-height:44px;font-size:15px;color:var(--e-muted)}
.enquiry-link:hover{color:var(--e-ink)}
.enquiry-done{display:grid;justify-items:start;gap:18px;padding-top:20px}
.enquiry-done:focus{outline:none}
.done-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--e-ink);color:#fff;animation:done-pop .7s var(--ease-out)}
@keyframes done-pop{from{transform:scale(.6);opacity:0}}
.done-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:6px}
.done-copied{font-size:13px;color:var(--e-muted);min-height:1em}
.enquiry.is-done .enquiry-nav,.enquiry.is-done .enquiry-head{display:none}
@media(max-width:900px){
  .enquiry{grid-column:1/-1;margin-top:48px}
}
@media(max-width:600px){
  .enquiry-tabs button{font-size:0;gap:0}
  .enquiry-tabs button span{font-size:12px}
  .enquiry-tabs button[aria-current=step]{font-size:13px;gap:6px}
  .fld-grid{grid-template-columns:1fr}
  .choices{grid-template-columns:1fr 1fr}
  .summary-row dl{grid-template-columns:1fr;gap:2px}
  .summary-row dt{margin-top:8px}
  .enquiry-body{min-height:0}
}
@media(prefers-reduced-motion:reduce){.enquiry-step:not([hidden]),.done-mark{animation:none}.enquiry-bar span{transition:none}}
.page-contact .request{padding-top:clamp(72px,9vw,140px);padding-bottom:clamp(72px,9vw,140px)}
.enquiry.is-done .enquiry-body{min-height:0;padding-bottom:clamp(32px,3.5vw,48px)}
.choice span{text-align:left}
@media(max-width:600px){
  .enquiry{margin-inline:calc(var(--pad) * -1);border-radius:0}
  .choices{grid-template-columns:1fr}
  .enquiry-tabs button,.enquiry-tabs button[aria-current=step]{font-size:0;gap:0}
  .enquiry-tabs button span{font-size:12px}
}

/* ——— Team: compact cards (portrait, role, name); the full profile opens in a dialog ——— */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--col-gap);row-gap:48px;padding-block:clamp(40px,5vw,72px)}
.person{display:grid;gap:6px;justify-items:start;text-align:left;color:var(--ink);cursor:pointer}
.person-media{position:relative;display:block;width:100%;aspect-ratio:4/5;overflow:hidden;margin-bottom:14px;background:#efefed}
.person-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .8s ease}
.person:hover .person-media img,.person:focus-visible .person-media img{transform:scale(1.04)}
.person-cue{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:10px;padding:9px 14px;background:#fff;color:#151515;font-size:13px;border-radius:999px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .5s var(--ease-out)}
.person-cue span{font-size:16px;line-height:1}
.person:hover .person-cue,.person:focus-visible .person-cue{opacity:1;transform:none}
.person-role{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.person-name{font-size:clamp(22px,1.9vw,28px);letter-spacing:-.03em;line-height:1.15}
.person:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
@media(hover:none){.person-cue{opacity:1;transform:none;padding:7px 12px;font-size:12px}}
@media(max-width:900px){.people{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:36px}}
@media(max-width:420px){.person-name{font-size:19px}.person-role{font-size:11px}.person-cue{left:10px;bottom:10px}}

.person-dialog{width:min(1040px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;background:#fff;color:var(--ink);overflow:hidden;opacity:0;transform:translateY(18px) scale(.985);transition:opacity .45s ease,transform .6s var(--ease-out)}
.person-dialog.is-open{opacity:1;transform:none}
.person-dialog::backdrop{background:rgba(10,10,11,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.person-dialog-inner{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);max-height:calc(100dvh - 48px)}
.person-dialog-media{min-height:100%;background:#efefed}
.person-dialog-media img{width:100%;height:100%;object-fit:cover}
.person-dialog-copy{display:grid;align-content:start;justify-items:start;gap:18px;padding:clamp(32px,4vw,56px);overflow:auto}
.person-dialog-name{font-size:clamp(32px,3.4vw,52px);font-weight:400;letter-spacing:-.04em;line-height:1.02}
.person-dialog-bio{display:grid;gap:14px}
.person-dialog-bio p{color:var(--muted);font-size:16px;line-height:1.7;max-width:56ch}
.person-close{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--frame-line);font-size:24px;line-height:1;color:var(--ink);transition:transform .4s var(--ease-out),background-color .3s ease}
.person-close:hover{transform:rotate(90deg);background:#f4f4f1}
.person-close:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
html.has-dialog{overflow:hidden}
@media(max-width:760px){
  .person-dialog{width:100%;max-height:100dvh;height:100dvh;margin:0}
  .person-dialog-inner{grid-template-columns:1fr;max-height:100dvh;overflow:auto}
  .person-dialog-media{height:52vh}
  .person-dialog-copy{overflow:visible;padding:28px 20px 40px}
}
@media(prefers-reduced-motion:reduce){.person-dialog{transition:none}.person-media img{transition:none}}

/* ——— Who we work with: dithered artwork. Kept in its own colour (no greyscale), always on black. ——— */
.inst-art img,.rights-art img,.hold-art img,.slices[data-tone=art] img{filter:none!important}
.slices[data-tone=art] .slice img{animation-name:slice-art}
@keyframes slice-art{0%,100%{filter:brightness(.8)}45%{filter:brightness(1.35)}60%{filter:brightness(1.2)}}
.hero--cine:has(.slices[data-tone=art]) .hero-scrim{opacity:.6}
@media(prefers-reduced-motion:reduce){.slices[data-tone=art] .slice img{animation:none;filter:none}}

.accordion-body:has(.inst-art){display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,22vw,300px);column-gap:clamp(24px,3vw,48px);align-items:start}
.accordion-body:has(.inst-art)>*:not(.inst-art){grid-column:1}
.inst-art{grid-column:2;grid-row:1 / span 3;margin:0;aspect-ratio:1;background:#000;overflow:hidden}
.inst-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease-out)}
details[open] .inst-art img{transform:none}
@media(max-width:760px){
  .accordion-body:has(.inst-art){grid-template-columns:1fr}
  .inst-art{grid-column:1;grid-row:auto;order:-1;max-width:320px;margin-bottom:20px}
}

.rights-art{position:relative;aspect-ratio:1;background:#000;overflow:hidden}
.rights-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .9s ease,transform 1.6s var(--ease-out)}
.rights-art img.rights-unit{inset:30%;width:40%;height:40%;object-fit:contain}
.rights-art img.is-active{opacity:1;transform:none}
.ledger>li[data-rights-step]{cursor:default;transition:opacity .5s ease}
.scope:has(.rights-art) .ledger>li[data-rights-step]:not(.is-current){opacity:.45}
@media(max-width:900px){.scope:has(.rights-art) .ledger>li[data-rights-step]:not(.is-current){opacity:1}}

.hold-art{width:100%;max-width:220px;aspect-ratio:1;margin:0 0 18px;background:#000;overflow:hidden}
.hold-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.lane:hover .hold-art img{transform:scale(1.05)}
.accordion-body:has(.inst-art) .facts{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.accordion-body:has(.inst-art) .facts{grid-template-columns:1fr}}
.scope-art.rights-art img{mix-blend-mode:normal}

/* Dithered scenes (js/dither-scene.js): a black stage with its canvas filling it. */
.dither-stage{position:relative;background:#000;overflow:hidden}
.dither-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.dither-canvas{z-index:0}
.module-stage.dither-stage .module-progress{z-index:2}
@media(max-width:900px){.module-stage.dither-stage{min-height:min(122vw,540px);aspect-ratio:auto}}
.origin-media .origin-art{position:absolute;inset:0}
.image-card .media.dither-stage{position:absolute;inset:0;z-index:-2}

/* ——— Sculptural renders: black and white fins on pure white, used across the homepage. ——— */
@keyframes sculpt-drift{from{transform:scale(1.045) translate3d(0,1.2%,0)}to{transform:scale(1) translate3d(0,-1.2%,0)}}
main img.sculpt,.sculpt-stage img{filter:grayscale(1)}
.statement-aside img.sculpt{max-width:260px;aspect-ratio:4/3;object-fit:cover;mix-blend-mode:multiply}
.sculpt-stage{background:#fff;overflow:hidden}
.audience-media.sculpt-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.audience-media.sculpt-stage{position:relative}
.audience-panel:not([hidden]) .audience-media.sculpt-stage img:not(.sm-ghost){animation:sm-push 9s cubic-bezier(.25,.1,.25,1) forwards}
.process-card img.sculpt{width:100%;max-width:none;aspect-ratio:4/3;object-fit:cover;margin:8px 0 4px;mix-blend-mode:multiply}
.process.is-pinned .process-card img.sculpt{width:100%}
/* The pinned track is sized by its cards, not by the renders' natural width, so the scroll ends at the last card. */
.process.is-pinned .process-card{contain:inline-size}
@media(max-height:820px){.process.is-pinned .process-card img.sculpt{width:70%}}
/* Feature: the render sits on the right of a white stage, the copy on the left in ink. */
.feature--light .feature-media{background:#fff}
.feature--light .feature-render{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;transform:none;scale:calc(var(--media-scale,1) * 1.06);transform-origin:center;animation:feature-drift 18s ease-in-out infinite alternate;will-change:translate,scale}
/* The towers drift slowly across the stage while the scroll opens the window to full bleed. */
@keyframes feature-drift{0%{translate:-2.2% 1%}50%{translate:0 -1%}100%{translate:2.2% .4%}}
.feature--light .feature-shade{background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.95) 38%,rgba(255,255,255,.7) 50%,rgba(255,255,255,0) 66%)}
@media(min-width:1101px){.feature--light .feature-copy .lead{max-width:30em}}
.feature--light .feature-copy,.feature--light .feature-copy .h2{color:var(--ink)}
.feature--light .feature-copy .lead{color:var(--muted)}
@media(max-width:1100px){.feature--light .feature-stage{align-items:end;padding-bottom:clamp(48px,8vw,96px)}.feature--light .feature-render{height:54%;bottom:auto;object-position:62% center;transform-origin:center top}.feature--light .feature-shade{background:linear-gradient(0deg,#fff 46%,rgba(255,255,255,0) 60%)}}
/* Phones: the render takes the top of the pinned screen and the copy sits beneath it, so the headline never runs over the fins. */
@media(max-width:760px){.feature--light .feature-stage{display:flex;flex-direction:column;align-items:stretch}.feature--light .feature-stage>.feature-media{position:relative;inset:auto;flex:1 1 0;min-height:0;width:100%}.feature--light .feature-render{height:100%}.feature--light .feature-shade{background:linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 26%)}.feature--light .feature-copy{gap:20px;padding-top:20px}}
@media(prefers-reduced-motion:reduce){.sculpt-stage img,.feature--light .feature-render{animation:none!important}}

/* Stepped renders: one image per step, crossfading as the stage's data-state changes. */
.sculpt-states{position:relative;background:#fff;overflow:hidden}
.sculpt-states>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;scale:1.04;transition:opacity .9s ease,scale 1.6s var(--ease-out);filter:grayscale(1)}
.sculpt-states[data-state="0"]>img:nth-of-type(1),.sculpt-states[data-state="1"]>img:nth-of-type(2),.sculpt-states[data-state="2"]>img:nth-of-type(3),
.sculpt-states[data-state="3"]>img:nth-of-type(4),.sculpt-states[data-state="4"]>img:nth-of-type(5),.sculpt-states[data-state="5"]>img:nth-of-type(6){opacity:1;scale:1;animation:sm-push 8s cubic-bezier(.25,.1,.25,1) forwards}
.value-stage.sculpt-states{background:#fff;position:sticky}
.value-stage.sculpt-states>img{object-fit:cover}
@media(max-width:900px){.value-stage.sculpt-states>img{object-fit:contain;padding-block:12px}}
.rights-art.sculpt-states{background:#fff}
.rights-art.sculpt-states>img{object-fit:cover;transform:none;mix-blend-mode:normal}
.hold-art{background:#fff}
.hold-art img{filter:grayscale(1)!important}
@media(prefers-reduced-motion:reduce){.sculpt-states>img{animation:none!important;transition:opacity .3s ease}}
/* Legal rights: on wide screens the artwork stays pinned beside the list, and each step takes a screen's worth of scroll. */
@media(min-width:901px){
  .scope:has(.rights-art){align-items:start}
  .scope:has(.rights-art) .ledger>li[data-rights-step]{min-height:56vh;align-content:center}
  .scope-art.rights-art{position:sticky;top:max(12vh,calc(50vh - 26vw))}
}

/* Infrastructure modules: one render per part on white, crossfading with the accordion and drifting while shown. */
.module-stage.sculpt-modules{background:#fff;overflow:hidden}
.module-stage.sculpt-modules figure{background:#fff}
.module-stage.sculpt-modules figure img{display:block;visibility:visible;min-height:0;object-fit:cover;filter:grayscale(1);scale:1.06;transform:none;transition:scale 1.6s var(--ease-out)}
.module-stage.sculpt-modules figure.is-active img{scale:1;animation:sm-push 5.6s cubic-bezier(.3,.1,.3,1) forwards}
@media(max-width:900px){.module-stage.sculpt-modules{aspect-ratio:1}}
@media(max-width:620px){.module-stage.sculpt-modules{aspect-ratio:4/5}}
@media(prefers-reduced-motion:reduce){.module-stage.sculpt-modules figure.is-active img{animation:none}}

/* ——— Render motion (js/sculpt-motion.js): light sweep, line-by-line reveal, depth layers and a push-in per step. ——— */
@keyframes sm-push{from{scale:1}to{scale:1.09}}
@keyframes sm-sweep{0%{transform:translateX(-130%) skewX(-12deg)}55%,100%{transform:translateX(330%) skewX(-12deg)}}
.sm-frame{isolation:isolate;overflow:hidden}
.sm-box{position:relative;display:block;width:100%;aspect-ratio:4/3;margin:8px 0 4px;overflow:hidden}
.process-card .sm-box img.sculpt{width:100%;height:100%;margin:0;aspect-ratio:auto}
@media(max-height:820px){.process.is-pinned .process-card .sm-box{width:70%}}
.hold-art>img:not(.sm-ghost),.sm-box>img:not(.sm-ghost){position:relative;z-index:1}
/* Far layer: a soft blurred copy that drifts slowly against the scroll. */
.sm-ghost{position:absolute!important;inset:-8%!important;width:116%!important;height:116%!important;max-width:none!important;object-fit:cover;z-index:0;pointer-events:none;
  filter:grayscale(1) blur(16px)!important;opacity:calc(.3 * var(--reveal,1));mix-blend-mode:multiply;animation:none!important;
  translate:0 calc(var(--depth,0) * 26px);scale:1.04}
/* Middle layer: the render itself moves a little faster than the far layer. */
.sm-frame>img:not(.sm-ghost):not(.feature-render),.sm-frame>figure>img{translate:0 calc(var(--depth,0) * -14px)}
/* Near layer: a band of light crossing the fins. Screen blending leaves the white ground untouched, so only the fins catch it. */
.sm-sweep{position:absolute;top:-20%;bottom:-20%;left:0;width:38%;z-index:2;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.08) 30%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.08) 70%,rgba(255,255,255,0) 100%);
  animation:sm-sweep 9s cubic-bezier(.45,.05,.35,1) infinite;translate:calc(var(--depth,0) * -60px) 0}
.sculpt-states .sm-sweep{animation-delay:1.2s}
.module-stage .sm-sweep{bottom:30%}
/* Line by line: thin horizontal bands thicken from the top down as the render scrolls in, like fins being laid. */
.sm-frame:not(.is-revealed) img:not(.sm-ghost){
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0,#000 calc(var(--reveal,0) * 7px),transparent calc(var(--reveal,0) * 7px),transparent 7px),linear-gradient(180deg,#000 0,#000 calc(var(--reveal,0) * 150% - 50%),transparent calc(var(--reveal,0) * 150%));
  mask-image:repeating-linear-gradient(180deg,#000 0,#000 calc(var(--reveal,0) * 7px),transparent calc(var(--reveal,0) * 7px),transparent 7px),linear-gradient(180deg,#000 0,#000 calc(var(--reveal,0) * 150% - 50%),transparent calc(var(--reveal,0) * 150%));
  -webkit-mask-composite:source-in;mask-composite:intersect}
@media(prefers-reduced-motion:reduce){.sm-sweep{display:none}.sm-ghost{display:none}}

/* Team: "Explore Fractur" cards show a render on white. */
.insight .media.sculpt-card{position:relative;background:#fff;overflow:hidden}
.insight .media.sculpt-card>img:not(.sm-ghost){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);z-index:1;transition:scale 1.4s var(--ease-out)}
.insight:hover .media.sculpt-card>img:not(.sm-ghost){scale:1.05}

/* About: the two asset cards carry renders on black under their white copy; the hall render sits on white. */
.image-card .media.sculpt-dark{background:#000;overflow:hidden}
.image-card .media.sculpt-dark>img:not(.sm-ghost){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;padding:0;filter:grayscale(1);z-index:1}
.origin-media:has(> .sculpt-origin){position:relative;background:#fff;overflow:hidden}
.origin-media>.sculpt-origin{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);z-index:1}
.sm-dark .sm-ghost{mix-blend-mode:screen;opacity:calc(.4 * var(--reveal,1))}
.sm-dark .sm-sweep{mix-blend-mode:overlay}

/* Four ways to hold an asset: equal columns, each render at full card width, its depth layer kept inside its box. */
.hold-art.sm-frame{position:relative}
.lanes--plain{grid-template-columns:repeat(4,minmax(0,1fr))}
.lanes--plain .lane{gap:28px}
.lanes--plain .hold-art{max-width:none;aspect-ratio:4/3;margin:0 0 22px;background:#fff}
.lanes--plain .hold-art>img:not(.sm-ghost){object-fit:cover}
@media(max-width:1100px){.lanes--plain{grid-template-columns:repeat(2,minmax(0,1fr))}.lanes--plain .lane:nth-child(-n+2){border-bottom:1px solid var(--frame-line)}}
@media(max-width:620px){.lanes--plain{grid-template-columns:1fr}.lanes--plain .lane{border-left:0;border-bottom:1px solid var(--frame-line);padding:28px var(--pad)}.lanes--plain .lane:last-child{border-bottom:0}}

/* ——— Who we work with, phones ——— */
@media(max-width:900px){
  /* Value story: a calmer stage, the counter clear of the render, less empty scroll between steps. */
  .value-stage.sculpt-states{height:42vh;top:0;border-bottom:1px solid var(--frame-line)}
  .value-stage[data-tone=light] .value-meter{left:auto;right:0;bottom:12px;z-index:3;background:#fff;padding:4px 0 4px 10px}
  .value-step{min-height:46vh}
  /* Legal rights: heading, then the artwork pinned at the top, then the steps scrolling beneath it. */
  .scope:has(.rights-art)>div:first-child{display:contents}
  .scope:has(.rights-art) .h2{order:0;grid-column:1/-1}
  .scope:has(.rights-art)>.rights-art,.scope:has(.rights-art) .ledger{grid-column:1/-1}
  .scope-art.rights-art{order:1;position:sticky;top:0;z-index:2;height:38vh;aspect-ratio:auto;margin:24px calc(var(--pad) * -1) 0;border-block:1px solid var(--frame-line)}
  .scope:has(.rights-art) .ledger{order:2;margin-top:0!important}
  .scope:has(.rights-art) .ledger>li[data-rights-step]{min-height:44vh;align-content:center}
  .scope:has(.rights-art) .ledger>li[data-rights-step]:not(.is-current){opacity:.4}
}
@media(max-width:620px){
  /* Four ways to hold an asset: compact rows, render on the left and text on the right. */
  .lanes--plain .lane{grid-template-columns:auto;gap:14px;padding:22px var(--pad)}
  .lanes--plain .lane>div{display:grid;grid-template-columns:112px minmax(0,1fr);column-gap:18px;align-items:center}
  .lanes--plain .hold-art{grid-row:1/span 2;margin:0;aspect-ratio:1}
  .lanes--plain .lane strong{font-size:22px;align-self:end}
  .lanes--plain .lane p{margin-top:6px;align-self:start}
}

/* Depth layers never open a gap: each single render fills its box, sits slightly enlarged and moves only a few pixels,
   so the blurred layer behind it can never show as a strip at the edge. */
.hold-art>img:not(.sm-ghost),.sm-box>img:not(.sm-ghost){position:absolute;inset:0;width:100%;height:100%;margin:0}
.sm-frame>img:not(.sm-ghost):not(.feature-render),.sm-frame>figure>img{translate:0 calc(var(--depth,0) * -6px)}
.hold-art.sm-frame>img:not(.sm-ghost),.sm-box.sm-frame>img:not(.sm-ghost),.insight .media.sm-frame>img:not(.sm-ghost),
.image-card .media.sm-frame>img:not(.sm-ghost),.origin-media.sm-frame>.sculpt-origin,.audience-media.sm-frame>img:not(.sm-ghost){scale:1.08}
@keyframes sm-push-wide{from{scale:1.08}to{scale:1.16}}
.audience-panel:not([hidden]) .audience-media.sculpt-stage img:not(.sm-ghost){animation-name:sm-push-wide}
.insight:hover .media.sculpt-card>img:not(.sm-ghost){scale:1.12}
.sm-frame:not(.sm-dark)>.sm-ghost{opacity:calc(.22 * var(--reveal,1))}
@media(max-width:620px){.lanes--plain .hold-art.sm-frame>img:not(.sm-ghost){translate:none;scale:1.04}}

/* Legal rights without artwork: the heading on the left, the three steps on the right. */
.scope:not(:has(.scope-art))>div:first-child{display:contents}
.scope:not(:has(.scope-art)) .h2{grid-column:1/span 5;align-self:start}
.scope:not(:has(.scope-art)) .ledger{grid-column:7/-1;margin-top:0!important}
@media(max-width:900px){.scope:not(:has(.scope-art)) .h2,.scope:not(:has(.scope-art)) .ledger{grid-column:1/-1}.scope:not(:has(.scope-art)) .ledger{margin-top:32px!important}}

/* ——— Phones, every page: comfortable tap areas and readable small labels ——— */
@media(max-width:620px){
  .hero-wordmark::before,.footer-mark::before,.frame-utilities a::before,.legal a[href^="mailto:"]::before,main a[href^="mailto:"]::before{content:"";position:absolute;inset:-12px -4px}
  .hero-wordmark,.footer-mark,.frame-utilities a,main a[href^="mailto:"]{position:relative}
  .hero-wordmark{position:absolute}
  .frame-utilities div{display:flex;flex-wrap:wrap;gap:8px 24px}
  .facts dt,.process-step,.person-role,.video-toggle{font-size:12px!important}
  .scroll-mouse-label{font-size:11px}
}
/* Infrastructure on phones: the four parts read as one column, and the module picture sits above its list. */
@media(max-width:900px){.modules>.module-stage{order:-1;margin-bottom:24px}}
@media(max-width:620px){
  .lanes:not(.lanes--plain){grid-template-columns:1fr}
  .lanes:not(.lanes--plain) .lane{border-left:0;border-bottom:1px solid var(--frame-line);min-height:0;padding:26px var(--pad);gap:18px}
  .lanes:not(.lanes--plain) .lane:last-child{border-bottom:0}
}

/* Arrows always draw as text, never as the iOS emoji. */
.btn-arrow,.diagonal,.benefit-arrow,.link-arrow{font-variant-emoji:text}

/* Homepage hero: a single still in full colour, with a slow camera drift. */
.hero--film .hero-media>img.hero-still{filter:none!important;object-position:50% 50%;animation:camera-drift 30s ease-in-out infinite alternate}
/* Phones and portrait tablets: the still fills the screen, centred on the objects, without the drift. */
@media(max-width:760px),(orientation:portrait) and (max-width:1100px){.hero--film .hero-media>img.hero-still{object-position:52% 50%;animation:none;transform:none}}
/* No scrim over the homepage still: the image carries its own darkness. */
.hero--film .hero-media:has(>img.hero-still)>.hero-scrim{display:none}
@media(prefers-reduced-motion:reduce){.hero--film .hero-media>img.hero-still{animation:none}}

/* Inner page heroes: one headline size and one two-statement pattern on every page, with the image leading. */
.hero--cine .hero-title{font-size:clamp(38px,4.6vw,72px);line-height:1.04;letter-spacing:-.032em;max-width:none}
.hero--cine .hero-lede{max-width:46ch}
@media(max-width:400px){.hero--cine .hero-title{font-size:33px}}

/* ——— Testing: Euphemia type ——— */
:root{--font:'Fractur Euphemia','Euphemia UCAS','Euphemia','Helvetica Neue',Arial,sans-serif}

/* Brand green (#287f7b): the second line of section headings and the text links. Dark sections use a lighter tint of it. */
:root{--green:#287f7b;--green-light:#6fbcb6}
.display em,.h1 em,.h2 em,.h3 em,.statement-title em,.section-head .h2 em{color:var(--green)}
.on-dark .h2 em,.on-dark .display em,.feature:not(.feature--light) .h2 em,.frame-footer h2 em{color:var(--green-light)}
.hero em{color:inherit}
.link-arrow{color:var(--green)}
.link-arrow .btn-arrow{color:var(--green)}
.on-dark .link-arrow,.on-dark .link-arrow .btn-arrow{color:var(--green-light)}

/* ——— Responsive layer: phones, small tablets and touch screens ——— */
/* Text links size to their words, so the underline never runs past the label. */
.link-arrow{justify-self:start;align-self:start;width:fit-content}
/* When the process cards stack (no pinning), the frame's side lines carry on down past the cards. */
.process:not(.is-pinned) .process-viewport{border-inline:1px solid var(--frame-line)}
/* The cursor-following preview is for mouse users only. */
@media(hover:none){.preview-float{display:none}}

@media(max-width:760px){
  /* Reveals: shorter and closer, so content is already there during fast flicks. */
  html.motion-ready [data-reveal]{transform:translateY(14px);transition-duration:.6s!important;transition-delay:0s!important}
  html.motion-ready [data-lines] .line>span{transition-duration:.8s}

  /* Lists: descriptions use the full width beside the number column, in line with the title. */
  .benefit-row>p{grid-column:2/-1;max-width:none}
  .accordion-body,.modules .accordion-body{padding-left:var(--step)}
  .experience>div{grid-template-columns:1fr;gap:4px}

  /* Buttons stack to one width. */
  .btn-row{flex-direction:column;align-items:stretch}
  .btn-row .btn{width:100%}

  /* Inner page heroes: the caption sits clear of the scroll cue, and the lede keeps a readable measure. */
  .slices-caption{bottom:136px}
  .hero--cine .hero-lede{max-width:32ch;margin-inline:auto}

  /* Asset owners value story: a compact sticky image and shorter steps. */
  .value-stage{height:40svh}
  .value-step{min-height:44svh;opacity:.35}
}

/* "One foundation" on phones, portrait or landscape: a normal section with the image above the copy,
   no long sticky scroll, and the copy always visible. */
@media(max-width:760px),(max-height:500px) and (orientation:landscape){
  html.motion-ready .feature{height:auto}
  html.motion-ready .feature-stage,.feature--light .feature-stage{position:relative;top:auto;display:flex;flex-direction:column;align-items:stretch;height:auto;min-height:0;padding-bottom:0}
  .feature--light .feature-stage>.feature-media{position:relative;inset:auto;flex:none;width:100%;aspect-ratio:4/3;clip-path:none!important}
  .feature--light .feature-render{height:100%;scale:1.06}
  .feature .feature-copy{opacity:1!important;transform:none!important;gap:20px;padding-block:24px 56px}
}
@media(max-height:500px) and (orientation:landscape){.feature--light .feature-stage>.feature-media{aspect-ratio:21/9}}

/* Landscape phones: on short screens the value story scrolls as a plain list, without a sticky image. */
@media(max-height:500px) and (orientation:landscape){
  .value-stage{position:relative;top:auto;height:70svh}
  .value-step{min-height:0;opacity:1}
}