/* v28 — purposeful product explanation, natural aspect ratios, resident-future transition. */
:root{--v28-paper:#fafefc;--v28-green:#00ad54;--v28-ink:#09130d}
.v28-explainer{background:#f3faf5;padding:clamp(72px,7vw,118px) 0 88px;border-top:1px solid #dfede3;border-bottom:1px solid #dfede3}
.v28-explainer-head{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,86px);align-items:end;margin-bottom:50px}
.v28-explainer-head .micro{color:#116b3c;display:block;margin-bottom:22px}
.v28-explainer-head h2{color:#09130d;font-size:clamp(44px,5.2vw,86px);line-height:1.02;letter-spacing:-.045em;margin:0;max-width:15ch}
.v28-explainer-head h2 em{font-style:normal;color:#00ad54}
.v28-explainer-head>p{font-size:clamp(16px,1.4vw,21px);line-height:1.65;color:#405a4a;max-width:55ch;margin:0 0 6px}
.v28-workflow-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.v28-workflow{background:#fff;border:1px solid #d5e6da;border-radius:24px;padding:clamp(26px,3vw,45px);display:flex;flex-direction:column;min-height:420px;overflow:hidden;position:relative}
.v28-workflow::before{content:'';position:absolute;top:0;left:0;width:94px;height:5px;background:#00ad54}
.v28-workflow-no{font-size:12px;letter-spacing:.04em;font-weight:700;color:#0b7540;margin-bottom:28px}
.v28-workflow h3{font-size:clamp(26px,2.7vw,40px);line-height:1.15;letter-spacing:-.04em;color:#0b1710;margin:0 0 18px}
.v28-workflow h3 em{font-style:normal;color:#008a47}
.v28-workflow p{font-size:16px;line-height:1.65;color:#4b6254;max-width:62ch;margin:0 0 32px}
.v28-flow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto;border-top:1px solid #dcebe0;padding-top:23px}
.v28-flow span,.v28-flow strong{border:1px solid #cde5d4;border-radius:6px;background:#f5fbf7;padding:9px 11px;font-size:12px;line-height:1.4;color:#205637;font-weight:650}
.v28-flow strong{background:#007c3d;border-color:#007c3d;color:white}
.v28-flow b{display:block;flex:none;width:16px;height:2px;background:#19a45f;position:relative}
.v28-flow b:after{content:'';position:absolute;right:0;top:-3px;border:4px solid transparent;border-left-color:#19a45f;transform:translateX(7px)}
.v28-explainer-foot{margin-top:28px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.v28-explainer-foot p{font-size:13px;max-width:70ch;line-height:1.65;color:#566d5d;margin:0}
.v28-explainer-foot .pill-btn{padding-inline:24px;justify-content:center;text-align:center;white-space:normal;min-height:54px}
/* Image holders are deliberately removed: hero and sketches participate in the section itself. */
.tomorrow-page-v26 .tomorrow-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(120px,9vw,160px) 0 85px;min-height:850px;background:var(--v28-paper)!important}
.tomorrow-page-v26 .tomorrow-hero-shell{display:block;position:relative;z-index:2}
.tomorrow-page-v26 .tomorrow-hero-copy{width:min(53%,760px);position:relative;z-index:3}
.tomorrow-page-v26 .tomorrow-hero-media{position:absolute!important;inset:0 0 0 auto;display:block!important;width:58%;height:100%;overflow:hidden;z-index:-1;pointer-events:none;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.42) 12%,#000 33%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.42) 12%,#000 33%)}
.tomorrow-page-v26 .tomorrow-hero-figure{width:100%;height:100%;margin:0;display:block;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden}
.tomorrow-page-v26 .tomorrow-hero-figure img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center 48%;border-radius:0!important;display:block}
.tomorrow-page-v26 .tomorrow-hero h1{font-size:clamp(49px,5.3vw,88px);max-width:12.5ch;letter-spacing:-.045em}
.tomorrow-page-v26 .tomorrow-hero-copy>p{max-width:55ch}
.tomorrow-page-v26 .tomorrow-shift{overflow:hidden;background:#08120c}
.tomorrow-page-v26 .tomorrow-shift-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center}
.tomorrow-page-v26 .tomorrow-shift-highlights,.tomorrow-page-v26 .tomorrow-hero-points{display:none!important}
.tomorrow-page-v26 .tomorrow-panel-figure{margin:0;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden}
.tomorrow-page-v26 .tomorrow-panel-figure img{display:block;width:100%!important;height:auto!important;object-fit:contain!important;border-radius:0!important}
.tomorrow-page-v26 .tomorrow-vision-card{padding:0!important;overflow:hidden;gap:0!important}
.tomorrow-page-v26 .tomorrow-vision-card figure{margin:0;padding:0!important;background:#08120c!important;border:none!important;border-radius:0!important;box-shadow:none!important;aspect-ratio:1672/941}
.tomorrow-page-v26 .tomorrow-vision-card figure img{display:block;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important}
.tomorrow-page-v26 .tomorrow-vision-card>div{padding:24px 30px 32px}
.tomorrow-page-v26 .tomorrow-story-layout{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(20px,3vw,48px)}
.tomorrow-page-v26 .tomorrow-story-frame{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;overflow:visible}
.tomorrow-page-v26 .tomorrow-story-visuals{width:100%;aspect-ratio:1672/941;overflow:hidden;background:#fafefc;border-radius:0!important}
.tomorrow-page-v26 .tomorrow-visual{margin:0;inset:0;position:absolute;width:100%;height:100%;transition:opacity .4s ease,transform .4s ease}
.tomorrow-page-v26 .tomorrow-visual img{width:100%!important;height:100%!important;display:block;object-fit:contain!important;object-position:center;max-width:none!important}
.tomorrow-page-v26 .tomorrow-story-sticky{top:100px;min-width:0}
.tomorrow-page-v26 .tomorrow-story-meta{margin-top:14px;padding:16px 0;border-top:1px solid #b9dbc6;gap:16px}
.tomorrow-page-v26 .tomorrow-story-step{min-height:clamp(390px,49vh,660px);display:flex;flex-direction:column;justify-content:center;cursor:default}
.tomorrow-page-v26 .tomorrow-story-step:focus-visible{outline:3px solid #008e49;outline-offset:4px}
.tomorrow-page-v26 .tomorrow-principles-figure{margin:0;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;align-self:stretch}
.tomorrow-page-v26 .tomorrow-principles-figure img{display:block;width:100%!important;height:auto!important;object-fit:contain!important;border-radius:0!important}
/* Research infographic panels: the quantities are visually encoded as well as written. */
.tomorrow-page-v26 .v28-insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:36px}
.tomorrow-page-v26 .v28-insight{border:1px solid #d9eadf;background:#fff;border-radius:20px;padding:clamp(24px,3vw,42px);display:flex;flex-direction:column;gap:20px}
.v28-insight-top{display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap}
.v28-stat-number{font-size:clamp(60px,6vw,105px);font-weight:700;line-height:.95;letter-spacing:-.055em;color:#007d40}
.tomorrow-page-v26 .v28-insight h3{font-size:clamp(20px,2vw,27px);line-height:1.2;margin:0 0 8px;max-width:21ch;color:#092619}
.tomorrow-page-v26 .v28-insight p{color:#52685b;font-size:14px;line-height:1.6;margin:0;max-width:65ch}
.tomorrow-page-v26 .v28-insight a{font-weight:700;color:#007d40;font-size:13px;margin-top:auto;text-decoration:underline;text-underline-offset:4px}
.v28-waffle{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:5px;width:100%;max-width:480px;padding:8px 0 4px}
.v28-waffle i{width:100%;aspect-ratio:1;background:#d5e1d6;border-radius:50%}
.v28-waffle i.is-filled{background:#136238}
.v28-range-graph{display:grid;gap:14px;padding:16px 0;width:100%;max-width:530px}
.v28-range-graph>div{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:15px}
.v28-range-graph span{font-size:22px;color:#0b6537;font-weight:700}
.v28-range-graph b{display:block;background:linear-gradient(to right,#137e42 var(--fill),#dbe6dc var(--fill));height:27px;border-radius:4px}
.v28-inclusion-graph{display:flex;align-items:center;gap:28px;padding:5px 0}
.v28-ring{--val:15;display:grid;place-items:center;width:118px;aspect-ratio:1;border-radius:50%;background:conic-gradient(#007d40 calc(var(--val) * 1%),#dce6de 0);position:relative}
.v28-ring.secondary{width:95px;background:conic-gradient(#54b579 calc(var(--val) * 1%),#dce6de 0)}
.v28-ring:before{content:'';position:absolute;inset:16px;border-radius:50%;background:white}
.v28-ring span{font-weight:700;color:#0c5130;position:relative;font-size:22px}
/* Single consistent controls and accessible, touch-friendly buttons. */
.tomorrow-page-v26 .pill-btn,.v28-explainer .pill-btn,.tomorrow-page-v26 .tomorrow-hero-actions .pill-btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:54px;height:auto;padding:15px 28px!important;line-height:1.35;white-space:normal;box-sizing:border-box}
.tomorrow-page-v26 .pill-btn:hover,.tomorrow-page-v26 .pill-btn:focus-visible,.v28-explainer .pill-btn:hover,.v28-explainer .pill-btn:focus-visible{background:linear-gradient(105deg,#006735,#00a950,#27c972)!important;color:#fff!important;border-color:#00a950!important}
/* Distinct departure/arrival into future — deep perspective tunnel with a reduced-motion fallback. */
.arch-shutter.tomorrow-warp{background:#06170e;overflow:hidden}
.arch-shutter.tomorrow-warp .arch-leaf,.arch-shutter.tomorrow-warp .arch-transition-seam,.arch-shutter.tomorrow-warp .arch-transition-mark{display:none!important}
.arch-shutter.tomorrow-warp::before{content:'';position:absolute;inset:-30%;opacity:0;transform:scale(2.5) rotate(-25deg);background:repeating-radial-gradient(ellipse at center,transparent 0 25px,rgba(66,248,150,.2) 27px 29px,transparent 32px 71px),radial-gradient(ellipse at center,#0f713f 0%,#05120b 26%,#03100a 72%);filter:contrast(1.3);pointer-events:none}
.arch-shutter.tomorrow-warp::after{content:'';position:absolute;inset:-90%;opacity:0;transform:rotate(0deg) scale(.4);background:repeating-conic-gradient(from 5deg at 50% 50%,transparent 0deg 9deg,rgba(70,251,146,.12) 9.2deg 9.5deg,transparent 10deg 21deg);mask-image:radial-gradient(ellipse,transparent 0 6%,black 28%,transparent 74%);pointer-events:none}
.arch-shutter.tomorrow-warp.is-closing::before{animation:v28-warp-in .9s ease-in forwards}
.arch-shutter.tomorrow-warp.is-closing::after{animation:v28-warp-rays .9s ease-in forwards}
.arch-shutter.tomorrow-warp.is-opening::before{opacity:1;transform:scale(.55);animation:v28-warp-out .9s ease-out forwards}
.arch-shutter.tomorrow-warp.is-opening::after{opacity:.7;animation:v28-warp-rays-out .9s ease-out forwards}
.arch-shutter.tomorrow-warp .arch-transition-caption{z-index:2;text-align:center}
.arch-shutter.tomorrow-warp .arch-transition-caption strong{color:#b1ffd0}
@keyframes v28-warp-in{0%{opacity:0;transform:scale(2.5) rotate(-30deg)}30%{opacity:1}100%{opacity:1;transform:scale(.55) rotate(0deg)}}
@keyframes v28-warp-out{0%{opacity:1;transform:scale(.55)}100%{opacity:0;transform:scale(2.4) rotate(26deg)}}
@keyframes v28-warp-rays{0%{opacity:0;transform:rotate(-20deg) scale(.3)}100%{opacity:.8;transform:rotate(80deg) scale(1.1)}}
@keyframes v28-warp-rays-out{0%{opacity:.8;transform:rotate(80deg) scale(1.1)}100%{opacity:0;transform:rotate(160deg) scale(2)}}
@media(max-width:1100px){.tomorrow-page-v26 .tomorrow-hero{min-height:780px}.tomorrow-page-v26 .tomorrow-hero-copy{width:min(62%,740px)}.tomorrow-page-v26 .tomorrow-hero-media{width:54%}.tomorrow-page-v26 .tomorrow-story-layout{grid-template-columns:1fr}.tomorrow-page-v26 .tomorrow-story-sticky{position:sticky;top:75px;grid-row:1;background:#fafefc;z-index:4;padding-bottom:8px}.tomorrow-page-v26 .tomorrow-story-step{min-height:320px}.tomorrow-page-v26 .tomorrow-story-visuals{max-height:46vh}}
@media(max-width:720px){.v28-explainer-head,.v28-workflow-grid{grid-template-columns:1fr}.v28-explainer{padding:62px 0}.v28-workflow{min-height:0;padding:25px}.v28-workflow p{font-size:15px}.v28-explainer-foot{flex-direction:column;align-items:stretch}.v28-explainer-head h2{font-size:clamp(42px,11vw,64px)}.v28-flow{gap:8px}.v28-flow span,.v28-flow strong{font-size:10px;padding:8px 7px}.v28-flow b{width:9px}
.tomorrow-page-v26 .tomorrow-hero{padding:104px 0 0!important;min-height:0}.tomorrow-page-v26 .tomorrow-hero-copy{width:100%}.tomorrow-page-v26 .tomorrow-hero-media{position:relative!important;width:100%;height:auto;min-height:0;aspect-ratio:1;margin-top:28px;z-index:0;mask-image:none;-webkit-mask-image:none}.tomorrow-page-v26 .tomorrow-hero-figure img{height:100%!important;object-fit:cover!important}.tomorrow-page-v26 .tomorrow-hero h1{font-size:clamp(48px,10vw,74px)}
.tomorrow-page-v26 .tomorrow-shift-grid{display:block}.tomorrow-page-v26 .tomorrow-shift-media{margin-top:36px}.tomorrow-page-v26 .tomorrow-vision-card>div{padding:22px}.tomorrow-page-v26 .v28-insight-grid{grid-template-columns:1fr;gap:15px}.tomorrow-page-v26 .v28-insight{padding:24px}.tomorrow-page-v26 .tomorrow-story-sticky{top:68px}.tomorrow-page-v26 .tomorrow-story-visuals{max-height:none;aspect-ratio:1672/941}.tomorrow-page-v26 .tomorrow-story-meta p{display:none}.tomorrow-page-v26 .tomorrow-story-step{min-height:300px}.tomorrow-page-v26 .tomorrow-principles-figure{margin-top:28px}}
@media(prefers-reduced-motion:reduce){.arch-shutter.tomorrow-warp{display:none!important}.tomorrow-page-v26 .tomorrow-visual{transition:none!important}.v28-workflow *{animation:none!important}}

.tomorrow-page-v26 .tomorrow-hero-shell{position:static!important}.tomorrow-page-v26 .tomorrow-hero-copy{position:relative}
/* Normalize action spacing throughout routed pages. */
.route-hero-actions .text-btn{justify-content:center!important;text-align:center;padding:16px 28px!important;min-height:54px!important;min-width:180px;line-height:1.35!important;white-space:normal;box-sizing:border-box}
.route-hero-actions .text-btn:hover,.route-hero-actions .text-btn:focus-visible{background:linear-gradient(110deg,#006e36,#00ad54,#26bf6a)!important;color:white!important;border-color:#008f48!important}
.route-hero-actions .pill-btn{justify-content:center;text-align:center;padding:16px 28px!important;line-height:1.35;min-height:54px;box-sizing:border-box}
@media(max-width:720px){.route-hero-actions{flex-wrap:wrap;gap:12px}.route-hero-actions .text-btn,.route-hero-actions .pill-btn{width:auto;max-width:100%;min-width:185px}}
