/* Gravita Technology site styles. Owner: GT-Sigma. Tokens and components are documented in docs/design-system.md.
   Layout concept: calm, generous editorial pages on a pale field, navy bands for emphasis, one orange accent. */
/* Carlito served from this site (Project Director, 28 Oct: 5a), latin set, SIL Open Font License; no request to Google Fonts. */
@font-face{font-family:"Carlito";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/carlito-400.woff2) format("woff2")}
@font-face{font-family:"Carlito";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/carlito-700.woff2) format("woff2")}
:root{
  /* colour */
  /* Approved colour direction (Project Director, 28 Oct 2026; GT-Alpha sample 28B-42): one hue family navy to blue, white,
     and orange on button fills only. --accent is the blue used for links, marks and focus; --action is the orange button fill. */
  --bg:#FFFFFF;--surface:#FFFFFF;--surface-2:#F5F7FC;--text:#0C1844;--muted:#46506B;--navy:#0C1844;--on-navy:#FFFFFF;--on-navy-muted:#B4BED8;
  --accent:#2A4BB0;--accent-text:#2A4BB0;--line:rgba(12,24,68,.12);--focus:#2A4BB0;
  --action:#E07B00;--action-hover:#C96E00;--on-action:#0C1844;
  --stage:#0C1844;--stage-text-2:#EEF1FA;--stage-line:rgba(238,241,250,.14);--figure:#FFFFFF;
  --shadow:0 2px 6px rgba(12,24,68,.06),0 10px 28px rgba(12,24,68,.08);
  /* type: Carlito (metric match for Calibri), scale ratio 1.25 on an 18 px base */
  --font:"Carlito",Calibri,"Segoe UI",Arial,sans-serif;
  --fs-0:.9375rem;--fs-1:1.125rem;--fs-2:1.40625rem;--fs-3:1.75rem;--fs-4:2.1875rem;--fs-5:2.75rem;--fs-6:3.4375rem;
  /* space: 8 px base */
  --s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  --radius:10px;--radius-lg:18px;--max:1200px;--measure:68ch;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#080D26;--surface:#0E163D;--surface-2:#0E163D;--text:#EEF1FA;--muted:#B4BED8;--navy:#080D26;--on-navy:#FFFFFF;--on-navy-muted:#B4BED8;
  --accent:#8FA6EE;--accent-text:#8FA6EE;--line:rgba(238,241,250,.14);--focus:#8FA6EE;--action-hover:#F2A54A;
  --stage:#0E163D;--figure:#0C1844;--shadow:0 2px 6px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#080D26;--surface:#0E163D;--surface-2:#0E163D;--text:#EEF1FA;--muted:#B4BED8;--navy:#080D26;--on-navy:#FFFFFF;--on-navy-muted:#B4BED8;
  --accent:#8FA6EE;--accent-text:#8FA6EE;--line:rgba(238,241,250,.14);--focus:#8FA6EE;--action-hover:#F2A54A;
  --stage:#0E163D;--figure:#0C1844;--shadow:0 2px 6px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.35);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-1);line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-text)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-weight:700;line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.01em;overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(var(--fs-5),6vw,var(--fs-6))}h2{font-size:clamp(var(--fs-4),4vw,var(--fs-5))}h3{font-size:var(--fs-3)}h4{font-size:var(--fs-2)}
p{margin:0;max-width:var(--measure)}
.skip{position:absolute;left:-9999px;top:0;background:var(--surface);padding:var(--s2);z-index:100}.skip:focus{left:var(--s2)}

/* layout */
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(var(--s3),env(safe-area-inset-left,0px));padding-right:max(var(--s3),env(safe-area-inset-right,0px))}
.section{padding-block:var(--s7)}
.section.tight{padding-block:var(--s6)}
.section > .wrap{display:flex;flex-direction:column;gap:var(--s4)}
.stack{display:flex;flex-direction:column;gap:var(--s2)}
.stack-lg{display:flex;flex-direction:column;gap:var(--s4)}
.lead{font-size:var(--fs-2);color:var(--muted);line-height:1.5}
.muted{color:var(--muted)}
.split{display:grid;grid-template-columns:3fr 2fr;gap:var(--s6);align-items:center}
.split.reverse{grid-template-columns:2fr 3fr}
.split > *{min-width:0}
/* a grid on a section's wrap keeps its grid (the column flex rule above must not override it) */
.section > .wrap.split,.section > .wrap.grid-2,.section > .wrap.grid-3,.hero > .wrap.split{display:grid}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}

/* section backgrounds (vary them: never the same mode more than three times in a row) */
.bg-surface{background:var(--surface)}
.bg-soft{background:var(--surface-2)}
.bg-navy{background:var(--navy);color:var(--on-navy)}
.bg-navy .muted,.bg-navy .lead{color:var(--on-navy-muted)}
.bg-navy a:hover{color:var(--accent)}

/* hero */
.hero{padding-block:var(--s7) var(--s6)}
.hero h1{max-width:16ch}
.hero .lead{max-width:44ch;margin-top:var(--s3)}
.hero .actions{margin-top:var(--s4)}
.offer-line{font-size:var(--fs-1);font-weight:700;color:var(--accent-text);letter-spacing:.01em;max-width:60ch}
.bg-navy .offer-line{color:var(--accent)}

/* buttons */
.actions{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 24px;border-radius:999px;font:inherit;font-weight:700;font-size:var(--fs-1);text-decoration:none;cursor:pointer;border:2px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--action);color:var(--on-action);font-size:18px}
.btn-primary:hover{background:var(--action-hover);color:var(--on-action)}
.btn-secondary{background:transparent;color:var(--text);border-color:var(--text)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent-text)}
.bg-navy .btn-secondary{color:var(--on-navy);border-color:var(--on-navy)}
.btn svg{width:20px;height:20px;flex:0 0 auto}
.link-arrow{font-weight:700;text-decoration:none;color:var(--accent-text)}
.link-arrow::after{content:" \2192"}
/* 30A-04 next-step endings: the destination's title as a quiet link, no label, no button colour */
.ns-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:16px;line-height:1.35;font-weight:700;color:var(--accent-text);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.ns-link svg{width:20px;height:20px;flex:0 0 auto;transition:transform .2s ease}
@media (hover:hover) and (pointer:fine){.ns-link:hover svg{transform:translateX(4px)}}
.ns-end{margin:20px 0 0}
.tc-ns{margin:8px 0 0;padding-top:12px;border-top:1px solid var(--line)}
.dl-ns{padding-block:28px 8px}
.dl-ns .wrap{width:min(1360px,100% - 48px);margin-inline:auto}
.hb-next{background:var(--h-sand,transparent);padding:40px 0 0;text-align:center}
.hb-next + .hb-close{padding-top:28px}

/* panels: use for one object that needs setting apart, not for every block */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:var(--s4);box-shadow:var(--shadow)}
.list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.list li{padding-left:28px;position:relative}
.list li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:2px;background:var(--accent)}
.steps{list-style:none;counter-reset:step;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3)}
.steps li{counter-increment:step;display:grid;grid-template-columns:44px 1fr;gap:var(--s2);align-items:start}
.steps li::before{content:counter(step);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;border:2px solid var(--accent);color:var(--accent-text)}
.figure{margin:0;display:flex;flex-direction:column;gap:var(--s2)}
.figure figcaption{font-size:var(--fs-0);color:var(--muted)}
.diagram{width:100%;overflow-x:auto}
.diagram svg{min-width:0}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:var(--s1) var(--s3);margin:0}
.kv dt{color:var(--muted)}.kv dd{margin:0;font-weight:700;overflow-wrap:anywhere}
.copy{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:4px 12px;font:inherit;font-size:var(--fs-0);cursor:pointer}
.copy[data-done]{border-color:var(--accent);color:var(--accent-text)}

/* header */
/* anchors land with the heading visible under the always-shown header (84 px + hairline) */
main [id]{scroll-margin-top:104px}
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:84px}
.brand{display:block;line-height:0;flex:0 0 auto}
.brand img{height:58px;width:auto;min-width:160px}/* brand sheet: never under 160 px wide on screen (file is 567 x 186) */
.brand .logo-dark{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .logo-light{display:none}:root:not([data-theme="light"]) .brand .logo-dark{display:block}}
:root[data-theme="dark"] .brand .logo-light{display:none}:root[data-theme="dark"] .brand .logo-dark{display:block}
.nav{display:flex;align-items:center;gap:var(--s3)}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:var(--s3)}
.nav a{text-decoration:none;font-weight:700;padding:8px 2px;border-bottom:3px solid transparent}
.nav a[aria-current="page"]{border-bottom-color:var(--accent)}
.nav .lang{display:inline-flex;align-items:center;min-height:40px;border:1px solid var(--line);border-radius:999px;padding:4px 14px;text-decoration:none;font-size:var(--fs-0);font-weight:700;white-space:nowrap}
.nav .lang:hover{border-color:var(--accent);color:var(--accent-text)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:48px;height:48px;color:var(--text);cursor:pointer}
.menu-toggle svg{width:24px;height:24px;margin:auto}
.menu-toggle .i-close{display:none}.menu-toggle[aria-expanded="true"] .i-open{display:none}.menu-toggle[aria-expanded="true"] .i-close{display:block}

/* footer (no logo in the footer, by the brand rule) */
.site-footer{background:var(--navy);color:var(--on-navy);padding-block:var(--s6) var(--s4)}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--s5)}
.site-footer h2{font-size:var(--fs-1);letter-spacing:.04em;text-transform:uppercase;color:var(--on-navy-muted);margin-bottom:var(--s2)}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s1)}
.site-footer a{text-decoration:none}
.site-footer a:hover{color:var(--accent)}
.site-footer .legal{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.14);font-size:var(--fs-0);color:var(--on-navy-muted);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2)}
.wa{display:inline-flex;align-items:center;gap:8px}
.wa svg{width:20px;height:20px}

/* responsive */
@media (max-width:960px){
  .split,.split.reverse{grid-template-columns:1fr;gap:var(--s4)}
  .grid-3{grid-template-columns:1fr 1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .section{padding-block:var(--s6)}
}
/* 30A-06: the seven-item menu does not fit between 761 and about 930 px, so the menu button and sheet serve everything up to 960 px */
@media (max-width:960px){
  .menu-toggle{display:grid}
  .nav{position:fixed;inset:84px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:var(--s2);padding:var(--s3) max(var(--s3),env(safe-area-inset-left,0px));display:none}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;gap:0}
  .nav ul a{display:block;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav ul a[aria-current="page"]{border-bottom-color:var(--line);color:var(--accent-text)}
  .lang{align-self:flex-start}
}
@media (max-width:760px){
  .brand img{height:54px}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr}
  .hero{padding-block:var(--s6) var(--s5)}
  .section{padding-block:var(--s5)}
  .wrap{padding-left:max(var(--s2),env(safe-area-inset-left,0px));padding-right:max(var(--s2),env(safe-area-inset-right,0px))}
}
@media (max-width:760px){.copy{min-height:44px;padding:8px 16px}}
/* motion (approved 25 Oct 2026, items 1 to 20). Only transform and opacity move; everything is static under reduced motion */
:root{--ease:cubic-bezier(.2,.7,.2,1)}
/* header settle (M2), reveal, hero rise and view transitions now live in motion.css (28G-C04) */
.nav ul{position:relative}
.nav-ind{position:absolute;bottom:0;left:0;height:3px;width:0;background:var(--accent);border-radius:2px;transition:transform .3s var(--ease),width .3s var(--ease),opacity .2s;pointer-events:none}
.js .nav ul a[aria-current="page"]{border-bottom-color:transparent}
.btn{transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(12,24,68,.18)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none}
.link-arrow::after{display:inline-block;transition:transform .2s var(--ease)}
.link-arrow:hover::after{transform:translateX(4px)}
main :is(p,li,dd) a:not(.btn):not(.link-arrow){text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat,linear-gradient(var(--accent),var(--accent)) 0 100%/100% 1px no-repeat;transition:background-size .3s var(--ease)}
main :is(p,li,dd) a:not(.btn):not(.link-arrow):hover{background-size:100% 2px,100% 1px}
.site-footer a{background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 2px no-repeat;transition:background-size .3s var(--ease),color .2s}
.site-footer a:hover{background-size:100% 2px}
.copy[data-done]::before{content:"";width:10px;height:5px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(-45deg);animation:tick .3s var(--ease)}
@keyframes tick{from{opacity:0;transform:translateY(-2px) rotate(-45deg) scale(.4)}}
.figure .photo,.app-photo{overflow:hidden}
.figure img,.app-photo img{transition:transform .7s var(--ease)}
.figure:hover img,.app-fig:hover img{transform:scale(1.04)}
.offers .offer{position:relative;padding-left:var(--s3);transition:transform .3s var(--ease)}
.offers .offer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:2px;background:var(--accent);transform:scaleY(.25);transform-origin:top;transition:transform .35s var(--ease)}
.offers .offer:hover{transform:translateX(4px)}
.offers .offer:hover::before{transform:scaleY(1)}
.to-top{position:fixed;right:max(var(--s3),env(safe-area-inset-right,0px));bottom:var(--s3);z-index:40;width:48px;height:48px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease),border-color .2s}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{border-color:var(--accent);color:var(--accent-text)}
.to-top svg{width:22px;height:22px}
@media (max-width:960px){
  .nav{display:flex;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s .25s}
  .nav.open{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--ease),transform .25s var(--ease),visibility 0s}
  .nav-ind{display:none}
  .js .nav ul a[aria-current="page"]{border-bottom-color:var(--line)}
}
.menu-toggle svg{transition:transform .25s var(--ease)}
.menu-toggle[aria-expanded="true"] .i-close{animation:spin-in .25s var(--ease)}
@keyframes spin-in{from{transform:rotate(-90deg);opacity:0}}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.25s}
  .site-header{view-transition-name:site-header}
  main > section:first-child :is(h1,.lead,.offer-line,.hero-caption,.actions){animation:rise .7s var(--ease) both}
  main > section:first-child :is(.lead,.offer-line){animation-delay:.1s}
  main > section:first-child .actions{animation-delay:.2s}
  main > section:first-child .hero-caption{animation-delay:.3s}
  .home-hero .hero-bg img{animation:slow-zoom 10s ease-out both}
  .js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
  .js [data-stagger] > *{opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i,0) * 70ms)}
  .js [data-reveal].is-in,.js [data-stagger].is-in > *{opacity:1;transform:none}
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes slow-zoom{from{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
/* diagram lines are blue (the Project Director's decision): #2A4BB0 light, #8FA6EE dark; node text stays as set */
main svg [stroke^="var(--navy"]{stroke:#2A4BB0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) main svg [stroke^="var(--navy"]{stroke:#8FA6EE}}
:root[data-theme="dark"] main svg [stroke^="var(--navy"]{stroke:#8FA6EE}

/* ===== Approved Home direction (Project Director, 28 Oct 2026; GT-Alpha sample 28B-42 and full page 28B-39) ===== */
/* header keeps its structure; hairline instead of shadow-only, 44 px targets */
.site-header a:hover{color:var(--accent)}
.menu-toggle{min-width:44px;min-height:44px}
.nav a.lang{min-height:44px}
/* footer: navy, hairline above, muted text; the footer never uses the blue link colour (not readable on navy) */
.site-footer{border-top:1px solid var(--stage-line);--accent:#B4BED8;--accent-text:#FFFFFF}
.site-footer h2,.site-footer .legal{color:#B4BED8}
.site-footer .legal{border-top-color:var(--stage-line);align-items:center}
.site-footer .legal span{display:inline-flex;align-items:center;min-height:44px}
.site-footer ul li a,.site-footer .legal a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.site-footer .wa{min-height:44px}
@media (max-width:600px){.site-footer .legal{flex-direction:column;align-items:flex-start;gap:4px}}

/* hero: navy stage, solid on the text side, the persona photograph sharp on the right 54 percent, hard edge, no veil */
.home-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(560px,calc(100svh - 84px),780px);background:var(--stage);color:#fff;overflow:hidden}
.home-hero .hero-media{inset:0 0 0 auto;width:54%;z-index:0;background:var(--stage)}
.home-hero .hero-media img{object-position:84% 30%}
.home-hero > .wrap{position:relative;z-index:1;width:100%;padding-block:64px}
.home-hero .hero-copy{max-width:520px}
.home-hero h1{font-size:64px;line-height:1.05;letter-spacing:-.015em;color:#fff;margin:0 0 24px}
.home-hero .offer-line{font-size:19px;line-height:1.55;font-weight:400;color:var(--stage-text-2);margin:0 0 40px;max-width:44ch}
.home-hero .actions{gap:16px}
.home-hero .btn-secondary{color:#fff;border-color:rgba(255,255,255,.7)}
.home-hero .btn-secondary:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}
.nb{white-space:nowrap}

/* sections: white field, one hairline between neighbours */
/* GT-Delta gate fault 2: the gap between two sections is at most 96 px (48 px below 960 px): 48 + hairline + 48 */
.sect{padding-block:96px 48px;background:var(--bg)}
.sect + .sect{border-top:1px solid var(--line);padding-top:48px}
.sect:has(+ .stage),.sect:last-child{padding-bottom:96px}
#how-it-works{border-top:0}
.sect-head{margin-bottom:64px}
.sect-head h2{font-size:40px;line-height:1.15;letter-spacing:-.01em;margin:0}

/* offers: a ruled list, not cards. Every row has the same three columns; rows without a photo keep the third column empty. */
.offer-row{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) 280px;column-gap:48px;align-items:center;min-height:258px;padding-block:24px;border-top:1px solid var(--line);text-decoration:none;color:inherit;transition:background-color .2s ease}
.offer-row:last-child{border-bottom:1px solid var(--line)}
.offer-row:hover{background:var(--surface-2);color:inherit}
.offer-row h3{font-size:26px;line-height:1.25;margin:0}
.offer-row .body{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.offer-row p{font-size:19px;line-height:1.55;color:var(--muted);margin:0;max-width:56ch;text-wrap:pretty}
.offer-action{display:inline-flex;align-items:center;gap:8px;font-size:18px;font-weight:700;color:var(--accent-text);min-height:44px}
.offer-action svg{width:18px;height:18px;transition:transform .2s ease}
.offer-row:hover .offer-action svg{transform:translateX(4px)}
.offer-thumb{width:280px;aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.offer-thumb picture{display:block;width:100%;height:100%}
.offer-thumb img{width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .4s ease}
.offer-row:hover .offer-thumb img{transform:scale(1.03)}
.offer-thumb.d2 img{object-position:38% 62%}

/* system map: one picture per theme and per width; the picture's own ground is the frame colour, so nothing shows as a box in a box.
   The wide picture is 1200 px and is shown 1:1 (map text 13 px); below that width the phone picture (390 px, 13 px text) is shown. */
.map-wrap{max-width:1248px}
.figure.map{margin:0;display:block;background:var(--figure);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.figure.map img{display:none;width:100%;height:auto;max-width:none}
.figure.map:hover img{transform:none}
.figure.map img.m-wide.m-light{display:block}
@media (max-width:1295px){
  .figure.map{max-width:560px;margin-inline:auto}
  .figure.map img.m-wide.m-light{display:none}
  .figure.map img.m-phone.m-light{display:block}
}
:root[data-theme="dark"] .figure.map img{display:none}
:root[data-theme="dark"] .figure.map img.m-wide.m-dark{display:block}
@media (max-width:1295px){
  :root[data-theme="dark"] .figure.map img.m-wide.m-dark{display:none}
  :root[data-theme="dark"] .figure.map img.m-phone.m-dark{display:block}
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .figure.map img{display:none}
  :root:not([data-theme="light"]) .figure.map img.m-wide.m-dark{display:block}
}
@media (prefers-color-scheme:dark) and (max-width:1295px){
  :root:not([data-theme="light"]) .figure.map img.m-wide.m-dark{display:none}
  :root:not([data-theme="light"]) .figure.map img.m-phone.m-dark{display:block}
}
@media (max-width:760px){
  .map-wrap{padding-inline:0}
  .figure.map{max-width:none;border-radius:0;border-inline:0}
}

/* statement band: the one bold thing below the fold, same navy as the hero, also the closing section */
.stage{position:relative;overflow:hidden;background:var(--stage);color:#fff;padding-block:96px}
.stage::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:48px 48px}
.stage .wrap{position:relative}
.statement-content{position:relative;max-width:1000px}
.statement-display{font-size:88px;line-height:1;letter-spacing:-.02em;color:#fff;margin:0 0 32px}
.statement-lead{font-size:22px;line-height:1.5;color:var(--stage-text-2);margin:0 0 40px;max-width:52ch}
.name-items{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px;max-width:1000px}
.name-items li{border-top:1px solid var(--stage-line);padding-top:20px;font-size:19px;line-height:1.5;color:var(--stage-text-2)}

@media (max-width:960px){
  .sect{padding-block:48px 24px}
  .sect + .sect{padding-top:24px}
  .sect:has(+ .stage),.sect:last-child{padding-bottom:48px}
  .stage{padding-block:64px}
  .sect-head{margin-bottom:40px}
  .sect-head h2{font-size:30px}
  .offer-row{grid-template-columns:1fr;row-gap:16px;padding-block:28px;min-height:0}
  .offer-thumb{order:-1;width:100%;max-width:420px}
  .offer-row h3{font-size:22px}
  .offer-row p{font-size:18px}
  .statement-display{font-size:48px}
  .statement-lead{font-size:18px}
  .name-items{grid-template-columns:1fr;row-gap:20px}
}
@media (max-width:760px){
  .home-hero{display:block;min-height:0}
  .home-hero .hero-media{width:100%;inset:auto;position:relative}
  .home-hero > .wrap{padding-block:40px 56px}
  .home-hero h1{font-size:40px;margin-bottom:20px}
  .home-hero .offer-line{font-size:18px;margin-bottom:32px}
  .home-hero .actions{flex-direction:column;align-items:stretch}
  .home-hero .actions .btn{width:100%}
}
@media (max-width:600px){.stage .btn{width:100%}}