/* Home page bands (card 28G-C03, GT-Alpha). One calm colour system: navy, orange (action only), neutrals, Sand and Stone.
   Mode sequence: Image (hero) > Sand (doors) > Paper (why) > Deep (map) > Sand (learn) > Image (name) > Sand (closing). */
:root{
  --h-sand:#F5EBDC;--h-paper:#FFFFFF;--h-stone:#EDEBE6;--h-card:#FFFFFF;--h-deep:#0C1844;--h-ink:#0C1844;--h-muted:#46506B;
  --h-line:rgba(12,24,68,.14);--h-blue:#2A4BB0;--h-now:#2A4BB0;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --h-sand:#0E163D;--h-paper:#080D26;--h-stone:#101946;--h-card:#0E163D;--h-deep:#0C1844;--h-ink:#EEF1FA;--h-muted:#B4BED8;
  --h-line:rgba(238,241,250,.16);--h-blue:#8FA6EE;--h-now:#8FA6EE}}
:root[data-theme="dark"]{
  --h-sand:#0E163D;--h-paper:#080D26;--h-stone:#101946;--h-card:#0E163D;--h-deep:#0C1844;--h-ink:#EEF1FA;--h-muted:#B4BED8;
  --h-line:rgba(238,241,250,.16);--h-blue:#8FA6EE;--h-now:#8FA6EE}

.hb{position:relative;padding-block:128px;color:var(--h-ink)}
.hb-wrap{width:min(1360px,100% - 48px);margin-inline:auto}
.hb-wrap.text{width:min(1200px,100% - 48px)}
.hb h2{font-size:clamp(32px,4vw,48px);line-height:1.08;letter-spacing:-.015em;margin:0;font-weight:400}
.hb .lead{font-size:20px;line-height:1.5;color:var(--h-muted);margin:16px 0 0;max-width:46ch;text-wrap:pretty}
.hb-head{margin-bottom:56px;max-width:760px}


/* ---------- Hero ---------- */
.home-hero{min-height:clamp(560px,calc(100svh - 128px),860px)}
.home-hero h1{font-size:clamp(44px,5.4vw,76px);line-height:1.02;font-weight:400}
.home-hero .hero-copy{max-width:600px}
.home-hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,#0C1844 0,#0C1844 38%,rgba(12,24,68,.72) 52%,rgba(12,24,68,0) 72%)}
.home-hero > .wrap{z-index:2}
.persona-ctl{position:absolute;z-index:3;left:calc(max(0px,(100% - 1200px)/2) + 24px);right:24px;bottom:28px;display:flex;align-items:center;gap:20px;color:#fff}
.persona-ctl[hidden]{display:none}
.persona-pause{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 12px;border:1px solid rgba(255,255,255,.55);border-radius:999px;background:rgba(12,24,68,.55);color:#fff;font:inherit;font-size:16px;cursor:pointer;backdrop-filter:blur(6px)}
.persona-pause:hover{border-color:#fff;background:rgba(12,24,68,.8)}
.persona-pause svg{width:16px;height:16px}
.persona-pause .i-play{display:none}
.persona-pause[aria-pressed="true"] .i-play{display:block}
.persona-pause[aria-pressed="true"] .i-pause{display:none}
.persona-bars{display:flex;gap:6px;flex:0 1 260px}
.persona-bars i{position:relative;flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.3);overflow:hidden}
.persona-bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
.persona-bars i.is-done::after{transform:scaleX(1)}
.persona-bars i.is-now::after{animation:pbar 9s linear forwards}
.persona-ctl.is-held .persona-bars i.is-now::after{animation-play-state:paused}
@keyframes pbar{to{transform:scaleX(1)}}
.hero-scroll{display:inline-flex;align-items:center;gap:10px;margin-left:auto;font-size:15px;color:rgba(255,255,255,.8)}
.hero-scroll span{display:block;width:1px;height:36px;background:linear-gradient(#fff,rgba(255,255,255,0));animation:hscroll 2.4s ease-in-out infinite}
@keyframes hscroll{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (prefers-reduced-motion:reduce){.hero-scroll span{animation:none}.persona-bars i.is-now::after{animation:none;transform:scaleX(1)}
  /* T-9: reduced motion shows one still photo, so there is nothing to pause: the whole control is not rendered */
  .persona-ctl,.persona-pause,.persona-bars{display:none}}
html.mo-off .hero-scroll span{animation:none}

/* the hero carries its own Pause with the approved bilingual labels (W-C20); the engine's generic round button is not shown here */
.home-hero .hero-pause{display:none}

/* ---------- HOM-1 doors: Sand, bento in four sizes ---------- */
.hb-doors{background:var(--h-sand);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .1 0 0 0 0 .27 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");padding-block:72px}
.hb-doors .hb-head{margin-bottom:40px}
.bento{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.door{position:relative;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;text-decoration:none;color:var(--h-ink);background:var(--h-card);border:1px solid var(--h-line);transition:transform .25s var(--ease,ease),box-shadow .25s}
.door h3{font-size:30px;line-height:1.12;font-weight:700;margin:0;letter-spacing:-.01em}
.door p{font-size:19px;line-height:1.5;margin:0;color:var(--h-muted);max-width:40ch}
/* 29A-17 B: the photos are gone; each offering is text above its own drawing (the drawing of its page), full width so the drawing's labels stay readable */
.door-fig{order:2;display:block;padding:8px 40px 40px;min-width:0}
.door-fig .dg-pad{margin:0}
@media (hover:hover) and (pointer:fine){.door:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(12,24,68,.18)}.door:hover .door-go svg{transform:translateX(5px)}}
.door-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:56px;row-gap:12px;align-items:start;padding:40px 40px 16px}
.door-body > h3{grid-column:1;grid-row:1}
.door-body > p{grid-column:1;grid-row:2}
.door-body > .door-get{grid-column:2;grid-row:1 / span 2;align-self:end;margin-top:0}
.door-body > .door-go{grid-column:1;grid-row:3;justify-self:start}
.door-get{display:flex;flex-direction:column;gap:2px;margin-top:6px;padding-top:16px;border-top:1px solid var(--h-line)}
.door-get small{font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--h-muted)}
.door-get b{font-size:22px;line-height:1.25;font-weight:700}
.door-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:18px;font-weight:700;color:var(--h-now)}
.door-go svg{width:18px;height:18px;transition:transform .2s}
/* 29A-23: one offering open at a time (motion.js builds the toggles); the heading row is a button, the panel holds text and drawing */
.door.is-tabbed{cursor:auto}
.door.is-tabbed:hover{transform:none;box-shadow:none}
.door-head h3{margin:0}
.door-toggle{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:64px;padding:12px 40px;cursor:pointer;font:inherit;font-size:inherit;font-weight:700;line-height:1.15;letter-spacing:-.01em;color:inherit}
.door-toggle:focus-visible{outline:3px solid var(--h-now);outline-offset:-3px;border-radius:20px}
.door-toggle svg{width:22px;height:22px;flex:none;transition:transform .2s}
.door-toggle[aria-expanded="true"] svg{transform:rotate(180deg)}
.door-panel{display:flex;flex-direction:column}
.door-panel[hidden]{display:none}
.door.is-tabbed .door-body{padding-top:0}
.door.is-tabbed .door-body > p{grid-row:1}
.door.is-tabbed .door-body > .door-get{grid-row:1 / span 2}
.door.is-tabbed .door-body > .door-go{grid-row:2}
.door.is-tabbed .door-fig{padding-bottom:24px}
.hb-doors .bento{gap:12px}
@media (max-width:960px){.door-toggle{padding:12px 24px}.door.is-tabbed .door-body > p,.door.is-tabbed .door-body > .door-get,.door.is-tabbed .door-body > .door-go{grid-row:auto}}
/* four doors: Card (light), Deep, Stone, Deep. Deep ones carry the dark drawing. */
.door-feature h3,.door-ai h3,.door-consult h3,.door-turnkey h3{font-size:38px}
.door-ai,.door-turnkey{background:var(--h-deep);color:#fff;border:0}
.door-ai p,.door-turnkey p{color:#EEF1FA}
.door-ai .door-get,.door-turnkey .door-get{border-color:rgba(255,255,255,.28)}
.door-ai .door-get small,.door-turnkey .door-get small{color:#B4BED8}
.door-ai .door-go,.door-turnkey .door-go{color:#8FA6EE}
.door-consult{background:var(--h-stone)}

/* ---------- HOM-2 Why It Matters Now: Paper, split 7/5 ---------- */
.hb-why{background:var(--h-paper);padding-block:72px}
.why-grid{display:grid;grid-template-columns:7fr 5fr;gap:96px;align-items:center}
.why-state{font-size:clamp(30px,3.2vw,44px);line-height:1.14;letter-spacing:-.012em;margin:32px 0 0;max-width:20ch;text-wrap:balance}
.why-barrier{font-size:20px;line-height:1.5;color:var(--h-muted);margin:20px 0 0;max-width:44ch}
.why-note{display:block;margin-top:8px;font-size:15px;color:var(--h-muted)}
.why-fig{position:relative;padding:40px;border-radius:20px;background:var(--h-stone);border-left:4px solid var(--h-blue)}
.why-num{display:block;font-size:clamp(64px,7vw,104px);line-height:1;font-weight:700;letter-spacing:-.03em;color:var(--h-ink)}
.unit-grid{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;margin:24px 0}
.unit-grid i{display:block;aspect-ratio:1;border-radius:2px;background:var(--h-blue)}
.unit-grid i.off{background:transparent;box-shadow:inset 0 0 0 1.5px var(--h-line)}
.why-fig p{font-size:19px;line-height:1.45;margin:0;max-width:34ch}
.why-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;min-height:44px;font-size:18px;font-weight:700;color:var(--h-now);text-decoration:none}
.why-link:hover{text-decoration:underline}
.why-link svg{width:18px;height:18px}

/* ---------- HOM-3 How Gravita Powers a Business: Deep, wide stage ---------- */
.hb-map{background:var(--h-deep);color:#fff;overflow:hidden;padding-block:80px}
.hb-map::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 50%,#000 30%,transparent 80%)}
.hb-map .hb-wrap{position:relative}
.hb-map h2{color:#fff}
.map-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.seg{display:inline-flex;position:relative;padding:4px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.06)}
.seg button{position:relative;z-index:1;min-height:44px;min-width:120px;padding:0 22px;border:0;border-radius:999px;background:transparent;color:#EEF1FA;font:inherit;font-size:18px;cursor:pointer;transition:color .25s}
.seg button[aria-pressed="true"]{color:#0C1844;font-weight:700}
.seg-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.seg[data-pos="after"] .seg-thumb{transform:translateX(100%)}
/* The stand-in Before/After drawing is removed (card 28G-C17). GT-Bravo's map goes into the SLOT comment in the page, above .map-parts. */
.map-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:56px}
.map-part{display:flex;flex-direction:column;gap:6px;padding:18px 0 0;border-top:2px solid rgba(255,255,255,.28);text-decoration:none;color:#fff;min-height:44px;transition:border-color .25s}
.map-part b{font-size:19px;line-height:1.3}
.map-part span{display:inline-flex;gap:6px;align-items:center;color:#8FA6EE;font-size:17px;font-weight:700}
.map-part:hover{border-color:#8FA6EE}
.map-part:hover span svg{transform:translateX(4px)}
.map-part svg{width:16px;height:16px;transition:transform .2s}
/* ---------- the inlined system map (card 28G-C25) ---------- */
.hm-stage{display:flex;justify-content:center}
.hm-stage svg{display:block;width:100%;max-width:1152px;height:auto}
.hm-compact{display:none!important}
.hm-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.hm-btn{min-height:44px;padding:0 20px;border:1px solid rgba(255,255,255,.4);border-radius:999px;background:rgba(255,255,255,.06);color:#EEF1FA;font:inherit;font-size:17px;cursor:pointer}
.hm-btn:hover:not(:disabled){background:rgba(255,255,255,.14)}
.hm-btn:disabled{opacity:.45;cursor:default}
.hm-btn.hm-play{background:#fff;color:#0C1844;font-weight:700;border-color:#fff;min-width:96px}
.hm-btn:focus-visible,.hm-stage .hot:focus-visible{outline:3px solid #8FA6EE;outline-offset:3px}
.hm-offer{max-width:760px;margin:22px auto 0;min-height:56px;text-align:center;color:#EEF1FA;font-size:18px;line-height:1.45}
.hm-offer b{display:block;color:#fff;font-size:19px}
.hm-steps{list-style:none;margin:28px auto 0;padding:0;max-width:1152px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 32px}
.hm-steps li{display:flex;gap:12px;color:#B4BED8;font-size:17px;line-height:1.45;transition:color .3s}
.hm-steps li span{flex:0 0 26px;height:26px;border-radius:50%;background:#EEF1FA;color:#080D26;font-size:15px;font-weight:700;display:grid;place-items:center;margin-top:1px}
.hm-steps li.on{color:#fff}
.hm-steps li.on span{background:#8FA6EE}
html.mo-off .hm-stage svg *{animation:none!important}
html.mo-off .hm-stage svg [data-s]{transition:none}
/* Why It Matters Now: the unit-grid drawing */
.why-svg{display:block}
.why-svg svg.gk{--bg:var(--h-stone)!important}
.why-svg svg{display:block;width:100%;height:auto;margin:0 auto}
.why-fig{container-type:inline-size}
.hom2-wide{display:none!important}
@container (min-width:560px){.hom2-wide{display:block!important}.hom2-compact{display:none!important}}
/* Card 28G-C29: the wide drawing (1152 canvas) is shown only from 1152 px and always at 1:1, so its 14 and 15 px labels never render smaller.
   Below that the compact drawing is shown (358 canvas, labels 14 px or more), enlarged to at most 520 px between 521 and 1151 px, centred. */
@media (max-width:1151.98px){
  .hm-wide{display:none!important}
  .hm-stage svg.hm-compact{display:block!important;max-width:520px;margin-inline:auto}
}
@media (min-width:1152px){.hm-stage svg.hm-wide{width:1152px;max-width:none;flex:none}}
@media (max-width:820px){
  .hm-steps{grid-template-columns:1fr}
  .hm-lead{display:none}
  .hm-offer{min-height:28px;text-align:left}
  .hm-bar{justify-content:flex-start}
  .hm-btn{padding:0 16px;font-size:16px}
}
@media (max-width:520px){.hm-stage svg.hm-compact{max-width:358px}}
@media (max-width:520px){.hb-why .why-fig{padding:16px 0 16px;border-left:0;border-top:4px solid var(--h-blue)}.why-svg{margin-inline:-8px}.why-link{margin-left:16px;margin-top:12px}.hm-stage{margin-inline:-8px}}

/* ---------- HOM-4 Learn with Gravita: Sand, split 5/7 ---------- */
.hb-learn{background:var(--h-sand);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .1 0 0 0 0 .27 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.hb-learn{padding-block:72px}
.learn-grid{display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center}
.learn-fig{margin:0}
.learn-fig .img{display:block;border-radius:20px;overflow:hidden;aspect-ratio:3/2;border:1px solid var(--h-line)}
.learn-fig picture,.learn-fig img{display:block;width:100%;height:100%;object-fit:cover}
/* 29A-17 B: the AI panel photo is gone and no drawing of this topic reads at this size; the block is the routes list with its link below it */
.learn-grid{grid-template-columns:minmax(0,1fr)}
.learn-grid > div{order:-1;max-width:820px}
.learn-fig figcaption{margin-top:16px}
.learn-fig a{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:18px;font-weight:700;color:var(--h-now)}
.routes{list-style:none;margin:0;padding:0;counter-reset:r}
.routes li{border-top:1px solid var(--h-line)}
.routes li:last-child{border-bottom:1px solid var(--h-line)}
.routes a{display:grid;grid-template-columns:56px 1fr 32px;align-items:center;gap:16px;min-height:92px;text-decoration:none;transition:background .2s,padding .25s}
.routes a::before{counter-increment:r;content:"0" counter(r);font-size:20px;color:var(--h-muted);font-variant-numeric:tabular-nums}
.routes b{font-size:clamp(26px,2.8vw,36px);line-height:1.12;font-weight:400;letter-spacing:-.01em}
.routes svg{width:28px;height:28px;color:var(--h-now);transition:transform .25s}
@media (hover:hover) and (pointer:fine){.routes a:hover{padding-left:16px;background:rgba(12,24,68,.05)}.routes a:hover svg{transform:translateX(6px)}}

/* ---------- HOM-5 What the Name Means: Image, full-bleed ---------- */
/* No photograph until an approved image exists (card 28G-C17): a Deep text band, the three names as ruled rows. */
.hb-name{padding-block:72px;color:#fff;isolation:isolate;overflow:hidden;background:var(--h-deep)}
.hb-name::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 80% 50%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse at 80% 50%,#000 20%,transparent 75%)}
.name-grid{display:grid;grid-template-columns:5fr 7fr;gap:96px;align-items:center}
.hb-name h2{color:#fff;font-size:clamp(40px,5vw,68px)}
.hb-name .lead{color:#EEF1FA;max-width:30ch;font-size:22px}
.name-trio{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.name-trio li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:baseline;padding:26px 0;border-top:1px solid rgba(255,255,255,.28)}
.name-trio li:last-child{border-bottom:1px solid rgba(255,255,255,.28)}
.name-trio b{display:block;font-size:clamp(34px,3.6vw,52px);line-height:1.05;font-weight:400;letter-spacing:-.01em}
.name-trio span{display:block;font-size:19px;line-height:1.45;color:#EEF1FA;max-width:28ch}

/* ---------- HOM-6 Closing: Sand ---------- */
.hb-close{background:var(--h-sand);padding-block:72px;text-align:center}
.hb-close h2{font-size:clamp(36px,5vw,64px);max-width:18ch;margin-inline:auto}
.hb-close .actions{justify-content:center;margin-top:40px}
.hb-close .btn-secondary{color:var(--h-ink);border-color:var(--h-ink)}

/* link colours: the site's a:hover recolours text, so every Home link states its own colour for rest and hover */
.hb .door,.hb .door:hover{color:var(--h-ink)}
.hb .door h3,.hb .door-get b{color:inherit}
.hb .door-ai,.hb .door-ai:hover,.hb .door-turnkey,.hb .door-turnkey:hover{color:#fff}
.hb .door-go,.hb .why-link,.hb .learn-fig a{color:var(--h-now)}
.hb .door-go:hover,.hb .why-link:hover,.hb .learn-fig a:hover{color:var(--h-now)}
.hb .door-ai .door-go,.hb .door-turnkey .door-go,.hb .door-ai .door-go:hover,.hb .door-turnkey .door-go:hover,.hb .map-part span{color:#8FA6EE}
.hb .map-part,.hb .map-part:hover{color:#fff}
.hb .routes a,.hb .routes a:hover{color:var(--h-ink)}
.hb .routes svg{color:var(--h-now)}
.hb h2,.hb h3{color:inherit}
.hb .btn-primary,.hb .btn-primary:hover{color:var(--on-action)}
.hb-close .btn-secondary:hover{color:var(--h-ink)}
.hb a svg{width:18px;height:18px;flex:none}
.hb .door-fig svg{width:100%;height:auto;flex:none}
.hb .routes svg{width:28px;height:28px}

/* ---------- Phone and tablet ---------- */
@media (max-width:1100px){
  .learn-grid > div{order:-1}
  .why-grid,.learn-grid{grid-template-columns:1fr;gap:56px}
  .learn-fig{position:static}
  .map-parts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:960px){
  .hb,.hb-doors,.hb-why,.hb-map,.hb-learn,.hb-name,.hb-close{padding-block:72px}
  .bento{grid-template-columns:1fr;gap:16px}
  /* phone and tablet: text in one column, then the drawing (its phone version below 760 px) */
  .door-body{grid-template-columns:minmax(0,1fr);padding:28px 24px 12px}
  .door-body > h3,.door-body > p,.door-body > .door-get,.door-body > .door-go{grid-column:1;grid-row:auto}
  .door-body > .door-get{margin-top:6px}
  .door-fig{padding:8px 16px 24px}
  .door-feature h3,.door-ai h3,.door-consult h3,.door-turnkey h3{font-size:30px}
  .name-grid{grid-template-columns:1fr;gap:40px}
  .hb-map .map-part{padding-top:14px}
}
@media (max-width:760px){
  .home-hero{display:block;min-height:0}
  .home-hero::after{display:none}
  .home-hero .hero-media{aspect-ratio:4/3}
  .home-hero > .wrap{padding-block:32px 96px}
  .persona-ctl{position:absolute;left:24px;right:24px;bottom:20px}
  .hero-scroll{display:none}
  .hb-head{margin-bottom:36px}
  .hb .lead{font-size:19px}
  .why-fig{padding:28px}
  .routes a{min-height:88px;grid-template-columns:40px 1fr 24px}
  .map-parts{gap:20px;margin-top:36px}
  .name-trio li{grid-template-columns:1fr;gap:6px;padding:20px 0}
  .unit-grid{gap:3px}
}
@media (max-width:520px){.map-parts{grid-template-columns:1fr}.seg button{min-width:96px}}
/* Card 28G-C29: on a short phone (390 x 660) the main action ("Chat on WhatsApp") must sit inside the first screen, with the consent bar showing and after a choice.
   The picture is shorter and the text block a little tighter; nothing is reworded. */
@media (max-width:759.98px) and (max-height:720px){
  .home-hero .hero-media{aspect-ratio:16/9}
  .has-consent .home-hero .hero-media{aspect-ratio:5/2}
  .home-hero > .wrap{padding-block:20px 88px}
  .home-hero h1{font-size:40px;margin-bottom:16px}
  .home-hero .offer-line{margin-bottom:24px}
}

/* ---------- 29A-23 Home length: tighter section rhythm, offerings in one open panel, no gap under the routes list ---------- */
.hb.hb-doors,.hb.hb-why,.hb.hb-map,.hb.hb-learn,.hb.hb-name,.hb.hb-close{padding-block:20px}
@media (max-width:760px){.hb.hb-doors,.hb.hb-why,.hb.hb-map,.hb.hb-learn,.hb.hb-name,.hb.hb-close{padding-block:12px}.hb-doors .hb-head{margin-bottom:16px}.door-toggle{min-height:46px}.hb-doors .bento{gap:6px}.hb-learn .learn-grid{gap:8px}.door.is-tabbed .door-fig{padding-bottom:0}.hb .routes a{min-height:64px!important}.hb-learn .routes{margin-top:20px!important}.home-hero .hero-media{aspect-ratio:2/1}}
.home-hero{min-height:clamp(480px,calc(100svh - 128px),500px)}
@media (min-width:761px){.home-hero > .wrap{padding-block:30px 104px}}
@media (max-width:760px){.home-hero .hero-media{aspect-ratio:16/9}}
.door.is-tabbed .door-fig{overflow:hidden}
.hb .routes a{min-height:72px}
.hb-doors .hb-head{margin-bottom:24px}
.hb-learn .learn-grid{gap:16px}
.hb-learn .routes{margin-top:32px!important}
.door.is-tabbed .door-fig{padding-block:0 8px}
.door.is-tabbed .door-body{padding-bottom:0;row-gap:4px}
.door-toggle{min-height:52px}
/* 29A-23 part 3: the offerings follow the page grid (same left edge and width as the header and all other content); the drawing runs edge to edge in its card so it keeps 1:1 and its labels stay 14 px */
.hb .hb-wrap,.hb .hb-wrap.text{width:auto;max-width:var(--max);padding-inline:max(var(--s3),env(safe-area-inset-left,0px))}
.door.is-tabbed{border:0;box-shadow:inset 0 0 0 1px var(--h-line)}
.door.is-tabbed .door-fig{padding-inline:0}
@media (max-width:760px){.hb .hb-wrap,.hb .hb-wrap.text{padding-inline:max(var(--s2),env(safe-area-inset-left,0px))}}
/* 29A-28: ID Home at 1440 was 5,446 px with the cookie bar against the 5,400 limit; spacing only, 56 px less on desktop (no words removed) */
@media (min-width:761px){.map-top{margin-bottom:24px}.map-parts{margin-top:32px}.hb-close .actions{margin-top:32px}}

/* ---------- Step J: hero key summary and the live-apps / demo band ---------- */
.home-hero .hero-offers{list-style:none;margin:0 0 32px;padding:0;max-width:min(480px,calc(46vw - 40px))}
.home-hero .hero-offers li{border-top:1px solid rgba(238,241,250,.22)}
.home-hero .hero-offers li:last-child{border-bottom:1px solid rgba(238,241,250,.22)}
.home-hero .hero-offers a{display:block;padding:9px 0;color:#fff;text-decoration:none;background:none!important}
.home-hero .hero-offers b{display:block;font-size:19px;line-height:1.3;font-weight:700}
.home-hero .hero-offers span{display:block;font-size:16px;line-height:1.4;color:var(--stage-text-2)}
.home-hero .hero-offers a:hover b{text-decoration:underline;text-underline-offset:4px}
.home-hero h1{margin-bottom:14px}
/* compact hero from 761 px up, so the hero summary and the two block titles share the first screen (cookie bar showing) */
@media (min-width:761px){
  /* the title wraps inside the navy column (46 percent of the width, minus the page margin and a gap) and never runs onto the photo */
  .home-hero h1{max-width:calc(46vw - max(24px,(100vw - 1200px)/2 + 24px) - 24px)}
  .home-hero{min-height:0}
  .home-hero > .wrap{padding-block:24px 64px}
  .home-hero .hero-offers{margin-bottom:24px}
  .home-hero .hero-offers a{padding:6px 0}
  .persona-ctl{bottom:16px}
}
/* laptop screens (1101 px and wider, up to 820 px tall): a tighter hero so both block heads still reach the first screen */
@media (min-width:1101px) and (max-height:820px){
  .home-hero > .wrap{padding-block:14px 48px}
  .home-hero h1{font-size:clamp(44px,4vw,54px);margin-bottom:10px}
  .home-hero .hero-offers{margin-bottom:18px}
  .home-hero .hero-offers a{padding:4px 0}
  .persona-ctl{bottom:10px}
  .hb.hb-live{padding-top:10px}
}
@media (min-width:761px) and (max-width:1100px){
  .home-hero > .wrap{padding-block:16px 56px}
  .home-hero h1{font-size:clamp(40px,4.2vw,52px);margin-bottom:10px;max-width:calc(46vw - 40px)}
  .home-hero .hero-offers a{padding:4px 0}
  .persona-ctl{bottom:10px}
  .hb.hb-live{padding-top:12px}
}
@media (max-width:760px){
  /* phones: the main action stays right under the title (first screen, with the cookie bar showing); the summary follows it.
     The list keeps clear of Vera's round button on the right edge. */
  .home-hero .hero-copy{display:flex;flex-direction:column}
  .home-hero .hero-copy h1{order:1}
  .home-hero .hero-copy .actions{order:2;margin-bottom:28px}
  .home-hero .hero-offers{order:3;margin:0;max-width:none}
  .home-hero .hero-offers a{padding:6px 76px 6px 0}
  .home-hero .hero-offers b{font-size:18px}
  .home-hero > .wrap{padding-block:24px 72px}
  .home-hero .hero-copy .actions{margin-bottom:20px}
  .hb.hb-live{padding-top:8px}
  .hb-live .live-sum{font-size:16px}
  .live-head{padding-bottom:8px}
  .h-demo{margin-top:10px;padding-top:10px}
}

.hb.hb-live{background:var(--h-paper);padding-block:20px 40px}
.live-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"ha hd" "la ld"}
.h-apps{grid-area:ha}.h-demo{grid-area:hd}.l-apps{grid-area:la}.l-demo{grid-area:ld}
.h-apps,.l-apps{padding-right:36px}
.h-demo,.l-demo{padding-left:36px;border-left:1px solid var(--h-line)}
.live-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;align-content:start;padding-bottom:14px}
.hb-live .live-head h2{font-size:clamp(22px,2.2vw,26px);line-height:1.15;margin:0}
.hb-live .live-head .btn{min-height:44px;padding:6px 18px;font-size:16px;white-space:nowrap}
.hb-live .live-sum{grid-column:1/-1;font-size:17px;line-height:1.4;color:var(--h-muted);margin:0}
.live-apps,.live-demos{list-style:none;margin:0;padding:0}
.live-apps li,.live-demos li{border-top:1px solid var(--h-line)}
.live-apps li:last-child{border-bottom:1px solid var(--h-line)}
.hb-live .live-apps a,.live-soon{display:grid;grid-template-columns:150px minmax(0,1fr);gap:2px 24px;align-items:baseline;padding:13px 0;min-height:56px;text-decoration:none;background:none!important;color:var(--h-ink)}
.live-apps b{font-size:19px;line-height:1.3;font-weight:700;color:var(--h-blue)}
.live-soon b{color:var(--h-ink)}
.live-apps span{font-size:17px;line-height:1.45;color:var(--h-muted)}
.live-soon em{display:block;font-style:normal;font-weight:700;font-size:16px;color:var(--h-ink);margin-top:2px}
.hb-live .live-apps a:hover b{text-decoration:underline;text-underline-offset:4px}
.live-demos{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.live-demos li:nth-last-child(-n+2){border-bottom:1px solid var(--h-line)}
.hb-live .live-demos a{display:flex;align-items:center;min-height:52px;padding:8px 0;font-size:19px;font-weight:700;line-height:1.3;color:var(--h-blue);text-decoration:none;background:none!important}
.hb-live .live-demos a:hover{text-decoration:underline;text-underline-offset:4px}
.hb-live .live-more{font-size:17px;color:var(--h-muted);margin:16px 0 0}
@media (max-width:900px){
  /* one column: both block titles first, then the two lists */
  .live-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"ha" "hd" "la" "ld"}
  .h-apps,.l-apps,.h-demo,.l-demo{padding-left:0;padding-right:0;border-left:0}
  .h-demo{border-top:1px solid var(--h-line);margin-top:14px;padding-top:14px}
  .l-apps{margin-top:20px}
  .l-demo{margin-top:32px}
  /* each list carries its own title (the same words as its head) so it never reads as belonging to the other block */
  .live-list::before{content:attr(data-label);display:block;font-size:19px;font-weight:700;line-height:1.3;color:var(--h-ink);padding-bottom:10px}
}
@media (max-width:560px){
  .hb.hb-live{padding-block:8px 28px}
  .h-demo{margin-top:10px;padding-top:10px}
  .live-head{grid-template-columns:minmax(0,1fr)}
  .hb-live .live-head .btn{grid-row:3;justify-self:start;margin-top:6px}
  .hb-live .live-apps a,.live-soon{grid-template-columns:minmax(0,1fr)}
  .live-demos{column-gap:20px}
  .hb-live .live-demos a{font-size:17px}
}