/* ============================================================================
   KINORO PROPERTY, v12.1
   Same token system. This pass removes UI chrome rather than adding polish:
   fewer rules, fewer boxes, fewer gold fills, fewer icons, no decorative
   dashes, no section-dot rail, no hero stat bar.
   ============================================================================ */

/* 1. TOKENS */
:root{
  --canvas:#FBFAF6;
  --surface:#FFFFFF;
  --sunken:#F2F0E8;
  --panel:#1B2430;
  --panel-2:#243040;

  --text:#1F262E;
  --text-2:#5D636B;
  --text-3:#686E75;

  --on-panel:#F4F4EF;
  --on-panel-2:rgba(244,244,239,.74);
  --on-panel-3:rgba(244,244,239,.54);

  --gold:#C6A03C;
  --gold-ink:#7E6222;
  --gold-light:#E7CE8F;
  --gold-wash:#F1E3C4;

  --growth:#2E6A52;
  --growth-deep:#255743;
  --growth-light:#8FD3A8;
  --growth-tint:#DFEFE5;

  --line:#E4E2D8;
  --line-2:#D3D0C4;
  --line-panel:rgba(244,244,239,.17);
  --line-gold:#E2CF9E;

  --text-strong:#121820;
  --ink-on-gold:#1A2029;
  --photo-bg:#243040;
  --alert:#A93F28;

  --t-micro:11px;
  --t-caption:13px;
  --t-small:15px;
  --t-body:17px;
  --t-lead:20px;
  --t-h4:24px;
  --t-h3:clamp(25px,3.2vw,32px);
  --t-h2:clamp(29px,4.2vw,42px);
  --t-h1:clamp(33px,5.2vw,54px);
  --t-fig:28px;

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --sec:54px;

  --r-sm:4px;
  --r-md:12px;
  --r-lg:20px;
  --r-pill:999px;

  --e-raised:0 1px 2px rgba(24,30,38,.05), 0 18px 40px -28px rgba(24,30,38,.4);

  --disp:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --container:1140px;
  --measure:65ch;
  --gutter:clamp(20px,4vw,32px);
  --header-h:76px;
}

/* 2. BASE */
*,*::before,*::after{box-sizing:border-box}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--canvas);color:var(--text);font-family:var(--sans);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-ink);outline-offset:3px;border-radius:var(--r-sm)}
h1,h2,h3,h4{font-family:var(--disp);font-weight:700;line-height:1.1;letter-spacing:-.028em;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
dl,dd,dt{margin:0}
[hidden]{display:none!important}

.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.section{padding-top:var(--sec)}
main{padding-bottom:var(--sec)}
section[id]{scroll-margin-top:calc(var(--header-h) + var(--s4))}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--panel);color:var(--on-panel);padding:var(--s3) var(--s5);border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* 3. TYPE, no decorative dash before eyebrows */
.eyebrow{display:inline-block;font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.eyebrow--on-panel{color:var(--gold-light)}

/* 4. CONTROLS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);font-family:var(--sans);font-size:var(--t-body);font-weight:600;line-height:1.2;padding:var(--s4) var(--s6);border:1.5px solid transparent;border-radius:var(--r-pill);cursor:pointer;transition:background-color .2s ease,border-color .2s ease,transform .2s ease}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--text);color:var(--canvas)}
.btn--primary:hover{background:var(--text-strong)}
.btn--gold{background:var(--gold);color:var(--ink-on-gold)}
.btn--gold:hover{background:var(--gold-light)}
.btn--sm{font-size:var(--t-small);padding:var(--s3) var(--s5)}
.btn--block{width:100%}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}
.link-inline{color:var(--gold-ink);font-weight:600;border-bottom:1px solid var(--gold);padding-bottom:1px;cursor:pointer}
.link-inline:hover{border-bottom-color:var(--gold-ink)}
.link-quiet{font-size:var(--t-small);font-weight:600;color:var(--text-2);border-bottom:1px solid var(--line-2);padding-bottom:1px;align-self:center;cursor:pointer}
.link-quiet:hover{color:var(--text);border-bottom-color:var(--gold)}

/* 5. PANEL / BAND */
.panel{background:var(--panel);color:var(--on-panel);border-radius:var(--r-lg);padding:var(--s6) clamp(20px,3vw,36px)}
.band{background:var(--panel);color:var(--on-panel)}
.band-inner{padding-block:var(--s8)}

/* 6. HEADER */
.header{position:sticky;top:0;z-index:100;background:rgba(251,250,246,.92);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s ease}
.header.is-scrolled{border-bottom-color:var(--line)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);height:var(--header-h)}
.brand{flex:0 0 auto}
/* The header logo's viewBox is cropped to the artwork (the full 300x100
   canvas is mostly empty), so 31px here draws the logo larger than the
   old 44px did at about the same width. */
.brand svg{height:31px;width:auto}
.nav{display:flex;align-items:center;gap:var(--s5)}
.nav a{font-size:var(--t-small);font-weight:500;color:var(--text-2);padding-block:var(--s1);position:relative;white-space:nowrap;transition:color .2s ease}
.nav a:hover{color:var(--text)}
.nav a.is-active{color:var(--text);font-weight:600}
.nav a.is-active::after{content:"";position:absolute;inset:auto 0 -3px;height:2px;background:var(--gold);border-radius:2px}
.header-cta{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto}
.burger{display:none;flex-direction:column;gap:5px;padding:var(--s2)}
.burger span{width:24px;height:2px;background:var(--text);border-radius:2px}

.drawer{display:none;position:fixed;inset:0;z-index:200;background:var(--canvas);flex-direction:column;align-items:center;justify-content:flex-start;gap:var(--s4);padding:calc(var(--s7) + var(--s5)) var(--s6) var(--s7);overflow-y:auto;-webkit-overflow-scrolling:touch}
.drawer.is-open{display:flex}
.drawer a{font-size:var(--t-lead);font-weight:600;padding:var(--s2) 0}
.drawer a.btn{font-size:var(--t-body);margin-top:var(--s3);width:100%;max-width:360px}
.drawer-close{position:absolute;top:var(--s4);right:var(--s4);width:44px;height:44px;display:flex;align-items:center;justify-content:center;font-size:var(--t-h4);line-height:1;color:var(--text)}

/* 7. HERO */
.hero{padding-block:var(--s6) 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:var(--s6);align-items:center}
.hero-grid > *,.hero-carousel > *{min-width:0}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
.hero h1{font-size:clamp(31px,3.4vw,44px);letter-spacing:-.034em;max-width:21ch}
.hero-lead{max-width:50ch}
.hero-lead p{font-size:18px;line-height:1.5;color:var(--text-2)}
.hero-lead p + p{margin-top:var(--s3);font-size:var(--t-small);color:var(--text-3)}
.hero-actions{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center}
.hero-assure{display:flex;align-items:center;gap:var(--s3);font-size:var(--t-small);color:var(--text-2)}
.hero-assure img{width:38px;height:38px;border-radius:50%;object-fit:cover;object-position:center 20%;flex:0 0 auto;border:1.5px solid var(--line-2)}

/* 8. PLATE CARD */
.plate{display:flex;flex-direction:column;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--e-raised)}
.plate-frame{position:relative;aspect-ratio:1.85/1;background:var(--photo-bg);isolation:isolate;overflow:hidden}
.plate-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 55%;border-radius:var(--r-md) var(--r-md) 0 0;filter:sepia(.24) saturate(.82) contrast(1.06) brightness(1.02)}
.plate-frame::after{content:"";position:absolute;inset:0;background:var(--gold-wash);mix-blend-mode:multiply;opacity:.5;border-radius:var(--r-md) var(--r-md) 0 0;pointer-events:none}
.seal{position:absolute;top:9px;right:9px;z-index:3;width:38px;height:38px;border-radius:50%;background:rgba(251,250,246,.94);border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px -8px rgba(24,30,38,.5)}
.seal b{font-family:var(--disp);font-size:10px;font-weight:800;letter-spacing:.08em;color:var(--gold-ink);line-height:1;padding-left:.08em}
.plate-shelf{padding:11px 14px 12px;flex:1 1 auto}
.plate-name{font-family:var(--disp);font-size:17px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin:0}
.plate-meta{display:block;font-size:12px;font-weight:600;color:var(--text-3);margin-top:3px}
.plate-rows{display:grid;margin-top:8px;border-top:1px solid var(--line-2)}
.plate-rows div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:5px 0;font-size:12.5px;color:var(--text-2)}
.plate-rows div + div{border-top:1px solid var(--line)}
.plate-rows dd{font-family:var(--disp);font-size:14.5px;font-weight:800;letter-spacing:-.025em;color:var(--text)}
.plate-rows .big{display:block;padding-top:7px}
.plate-rows .big dt{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.plate-rows .big dd{display:flex;align-items:baseline;gap:6px;margin-top:3px;font-size:17px;color:var(--growth)}
.plate-rows .big .pct{font-size:11.5px;font-weight:800;color:var(--growth);margin-left:0;white-space:nowrap}
.plate--new .plate-rows .big dd{color:var(--gold-ink)}

/* 9. CAROUSEL, count only, no progress rail */
.carousel{position:relative;min-width:0;max-width:100%}
.carousel-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s2)}
.carousel-label{font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-ink)}
.carousel-note{font-size:var(--t-caption);font-weight:600;color:var(--text-3)}
.panel .carousel-label{color:var(--gold-light)}
.panel .carousel-note{color:var(--on-panel-3)}
.track{display:flex;gap:var(--s4);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding:2px 2px var(--s3);align-items:stretch}
.track::-webkit-scrollbar{display:none}
.track > *{scroll-snap-align:start;flex:0 0 300px;min-width:0}
.track--hero > *{flex:0 0 100%}
.track.is-dragging{cursor:grabbing;scroll-snap-type:none}
.track.is-dragging *{pointer-events:none}
.carousel-nav{position:absolute;top:28%;transform:translateY(-50%);z-index:4;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:rgba(14,20,30,.62);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(8px);color:var(--surface);opacity:0;transition:opacity .22s ease,background-color .2s ease}
.carousel:hover .carousel-nav,.carousel-nav:focus-visible{opacity:1}
.carousel-nav:hover{background:rgba(14,20,30,.85)}
.carousel-nav:disabled{opacity:0;pointer-events:none}
.carousel-nav--prev{left:var(--s2)}
.carousel-nav--next{right:var(--s2)}
.carousel-foot{display:flex;align-items:baseline;gap:var(--s4)}
.carousel-count{font-family:var(--disp);font-size:var(--t-caption);font-weight:800;letter-spacing:.06em;color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.carousel-count b{color:var(--text)}
.carousel-hint{font-size:var(--t-caption);font-weight:600;color:var(--text-3);white-space:nowrap;display:none}
.panel .carousel-count{color:var(--on-panel-3)}
.panel .carousel-count b{color:var(--gold-light)}
.panel .carousel-hint{color:var(--on-panel-3)}
@media (hover:none){.carousel-hint{display:inline}}
@media (hover:hover){.track{cursor:grab}}

/* 10. RESULTS */
.results-head{max-width:44ch;margin-bottom:var(--s5)}
.results-head h1,.results-head h2{font-size:clamp(27px,3vw,36px);color:var(--on-panel);max-width:20ch;margin-top:var(--s2)}
.results-head p{color:var(--on-panel-2);font-size:var(--t-small);margin-top:var(--s3)}
.results-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);max-width:640px;margin-bottom:var(--s3)}
.results-stats b{display:block;font-family:var(--disp);font-size:var(--t-fig);font-weight:800;letter-spacing:-.04em;line-height:1}
.results-stats b.is-growth{color:var(--growth-light)}
.results-stats span{display:block;font-size:var(--t-micro);font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--on-panel-3);margin-top:6px;line-height:1.4}
.results-basis{font-size:12.5px;color:var(--on-panel-3);margin-bottom:var(--s6);line-height:1.5;max-width:64ch}

/* 11. WHAT WE WON'T BUY */
.nos-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:var(--s7);align-items:start}
.nos-head h2{font-size:clamp(27px,3vw,38px);max-width:20ch;margin-top:var(--s2)}
.nos-head p{color:var(--text-2);margin-top:var(--s3);max-width:38ch;font-size:var(--t-small)}
.nos-list{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s7)}
.nos-list li{display:grid;grid-template-columns:26px 1fr;gap:var(--s4);align-items:start;padding-block:var(--s4);border-top:1px solid var(--line)}
.nos-glyph{color:var(--text-3);margin-top:2px}
.nos-list b{display:block;font-family:var(--disp);font-size:16px;font-weight:700;letter-spacing:-.02em;margin-bottom:4px}
.nos-list p{font-size:var(--t-caption);color:var(--text-2);line-height:1.55}

/* 12. HOW WE BUY */
.method-head{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s7);align-items:end;margin-bottom:var(--s6)}
.method-head h2{font-size:clamp(27px,3vw,38px);max-width:23ch;margin-top:var(--s2)}
.method-head p{color:var(--text-2);max-width:46ch;font-size:var(--t-small)}
.steps{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s5)}
.steps::before{content:"";position:absolute;left:10%;right:10%;top:15px;height:1px;background:var(--line-2)}
.step{position:relative;display:flex;flex-direction:column;gap:0}
.step-node{order:-1;position:relative;z-index:1;width:30px;height:30px;border-radius:50%;background:var(--surface);border:1.5px solid var(--line-2);color:var(--text-2);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-size:11px;font-weight:800;box-shadow:0 0 0 5px var(--canvas);margin-bottom:var(--s4)}
.step-vis{border-radius:var(--r-sm);overflow:hidden;background:var(--sunken);margin-bottom:var(--s3);max-width:132px}
.step-vis svg{display:block;width:100%;height:auto}
.step h3{font-size:17px;margin-top:var(--s1)}
.step-q{font-size:var(--t-caption);font-weight:600;color:var(--text-3);margin-top:3px;line-height:1.4}
.step-detail{font-size:var(--t-caption);color:var(--text-2);line-height:1.55;margin-top:var(--s2)}
.step-get{display:block;margin-top:var(--s3);font-size:var(--t-caption);color:var(--text-3);line-height:1.4}
.step-get b{font-weight:700;color:var(--text)}
button.step-get{text-align:left;cursor:pointer}
button.step-get b{color:var(--gold-ink);border-bottom:1px solid var(--gold);padding-bottom:1px}
button.step-get:hover b{border-bottom-color:var(--gold-ink)}

/* 13. FOUNDER */
.about-head{max-width:920px;margin:0 auto var(--s6)}
.about-head h1,.about-head h2{font-size:clamp(27px,3vw,38px);color:var(--on-panel);max-width:20ch;margin-top:var(--s2)}
.about-head p{color:var(--on-panel-2);font-size:var(--t-small);margin-top:var(--s3);max-width:58ch}
.founder-grid{display:grid;grid-template-columns:250px 1fr;gap:var(--s7);align-items:center;max-width:920px;margin-inline:auto}
.founder-grid + .founder-grid{margin-top:var(--s8)}
.founder-photo{position:relative;aspect-ratio:1;border-radius:var(--r-md);overflow:hidden;background:var(--photo-bg);box-shadow:var(--e-raised)}
.founder-photo img{width:100%;height:100%;object-fit:cover;object-position:center 18%}
.founder-copy blockquote{font-family:var(--disp);font-size:clamp(22px,2.4vw,28px);font-weight:600;line-height:1.28;letter-spacing:-.028em;color:var(--on-panel);margin:0 0 var(--s5);text-wrap:balance}
.founder-copy p{color:var(--on-panel-2);font-size:var(--t-small)}
.founder-copy p + p{margin-top:var(--s3)}
.founder-sign{margin-top:var(--s5);font-size:var(--t-small);font-weight:700;color:var(--on-panel)}
.founder-sign em{display:block;font-style:normal;font-weight:500;color:var(--on-panel-3);margin-top:2px}
.founder-links{display:flex;gap:var(--s5);flex-wrap:wrap;margin-top:var(--s4)}
.founder-links a{font-size:var(--t-caption);font-weight:600;color:var(--on-panel-2);border-bottom:1px solid var(--line-panel);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.founder-links a:hover{color:var(--gold-light);border-bottom-color:var(--gold-light)}
/* home page only: the founders there skip the paragraphs, which live on about.html */
.about-more{max-width:920px;margin:var(--s7) auto 0}
.about-more a{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-small);font-weight:600;color:var(--on-panel);border-bottom:1px solid var(--line-panel);padding-bottom:2px;transition:border-color .2s ease}
.about-more a:hover{border-bottom-color:var(--gold-light)}
.about-more span{color:var(--gold-light)}
/* home page only: the intro on the left and the two founders' headshots
   side by side on the right. Every rule is scoped to .about-split, so
   about.html keeps its own layout. */
.about-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s7);align-items:center}
.about-split .about-head{max-width:none;margin:0}
.about-split .about-more{max-width:none;margin:var(--s5) 0 0}
.about-split .about-founders{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:1000px){
  .about-split{grid-template-columns:1fr;gap:var(--s6)}
  .about-split .about-founders{max-width:520px}
}
@media (max-width:760px){
  .about-split .about-founders{gap:var(--s4)}
}

/* 14. CASE STUDY, editorial. Shell only until real content exists. */
.case-head{max-width:46ch;margin-bottom:var(--s6)}
.case-head h2{font-size:clamp(27px,3vw,38px);max-width:22ch;margin-top:var(--s2)}
.case-flow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);padding-block:var(--s4);border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:var(--t-caption);font-weight:600;color:var(--text-2)}
.case-flow span{display:inline-flex;align-items:center;gap:var(--s4)}
.case-flow span + span::before{content:"\2192";color:var(--gold-ink);font-weight:700}
.case-body{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);margin-top:var(--s6)}
.case-body h3{font-size:18px;margin-bottom:var(--s2)}
.case-body p{font-size:var(--t-small);color:var(--text-2)}
.case-body p + h3{margin-top:var(--s5)}
.case-figures{display:grid;gap:var(--s3);align-content:start}
.case-figures div{display:flex;justify-content:space-between;gap:var(--s4);padding-bottom:var(--s3);border-bottom:1px solid var(--line);font-size:var(--t-small);color:var(--text-2)}
.case-figures b{font-family:var(--disp);font-weight:800;color:var(--text);white-space:nowrap}

/* 15. WHO + MAP */
.who-grid{display:grid;grid-template-columns:1fr .9fr;gap:var(--s7);align-items:center}
.who-head h2{font-size:clamp(26px,2.9vw,36px);max-width:22ch;margin-top:var(--s2)}
.who-list{display:grid;gap:0;margin-top:var(--s5)}
.who-item{padding-block:var(--s4);border-top:1px solid var(--line)}
.who-item h3{font-size:17px;margin-bottom:3px}
.who-item p{color:var(--text-2);font-size:var(--t-caption);max-width:46ch}
.map{position:relative;max-width:410px;margin-inline:auto}
.map svg{width:100%;height:auto}
.map .hit{fill:transparent;cursor:pointer}
.map-legend{display:flex;gap:var(--s3) var(--s5);flex-wrap:wrap;justify-content:center;margin-top:var(--s4)}
.map-legend span{display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--t-caption);font-weight:600;color:var(--text-2)}
.map-legend i{display:block;border-radius:50%}
.map-legend .dot-owned{width:10px;height:10px;background:var(--growth)}
.map-legend .dot-hq{width:11px;height:11px;background:var(--gold-ink)}
.map-tip{position:absolute;pointer-events:none;z-index:5;background:var(--text);color:var(--surface);font-size:var(--t-caption);font-weight:600;padding:5px 10px;border-radius:var(--r-sm);white-space:nowrap;opacity:0;transform:translate(-50%,-135%);transition:opacity .12s ease}

/* 16. FEE */
.fee-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s7);align-items:center}
.fee-grid h2{font-size:clamp(27px,3vw,38px);color:var(--on-panel);max-width:20ch;margin-top:var(--s2)}
.fee-grid > div > p{color:var(--on-panel-2);margin-top:var(--s3);max-width:44ch;font-size:var(--t-small)}
.fee-list{display:grid;gap:var(--s4)}
.fee-list li{color:var(--on-panel-2);font-size:var(--t-small)}
.fee-list b{display:block;color:var(--on-panel);font-weight:600;font-family:var(--disp);letter-spacing:-.02em;font-size:16px;margin-bottom:2px}
.fee-offer{margin-top:var(--s5);padding-left:var(--s4);border-left:2px solid var(--gold)}
.fee-offer span{display:block;font-size:var(--t-micro);font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light)}
.fee-offer p{font-size:var(--t-small);color:var(--on-panel);margin-top:var(--s2);max-width:40ch}
.fee-offer em{display:block;font-style:normal;font-size:var(--t-caption);color:var(--on-panel-3);margin-top:var(--s1)}
.fee-cta{margin-top:var(--s5)}
.fee-cta p{font-size:var(--t-caption);color:var(--on-panel-3);margin-top:var(--s3);max-width:42ch}

/* 17. THE CALL */
.call{display:grid;grid-template-columns:auto 1fr;gap:var(--s7);align-items:center}
.call-face{display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;width:150px}
.call-face img{width:108px;height:108px;border-radius:50%;object-fit:cover;object-position:center 18%;border:2px solid var(--line-2)}
.call-face span{font-size:var(--t-caption);font-weight:700;color:var(--text);line-height:1.4}
.call-face em{font-style:normal;display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-top:3px}
.call-body h3{font-size:var(--t-h3);max-width:22ch}
.call-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);margin-top:var(--s5)}
.call-steps b{display:block;font-family:var(--disp);font-size:var(--t-small);font-weight:700;margin-bottom:var(--s1)}
.call-steps p{font-size:var(--t-small);color:var(--text-2)}
.call-assure{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5);font-size:var(--t-small);color:var(--text-2)}

/* 18. FAQ, on its own page (faq.html), so its heading is the page's h1.
   Grid-row animation: no height measuring, survives resize. */
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s7);align-items:start}
.faq-head h1{font-size:clamp(27px,3vw,38px);max-width:20ch;margin-top:var(--s2)}
.faq-head p{color:var(--text-2);font-size:var(--t-small);margin-top:var(--s4);max-width:36ch}
.faq-head p + p{margin-top:var(--s3)}
.faq-list{border-top:1px solid var(--line-2)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);width:100%;text-align:left;padding-block:13px;font-family:var(--disp);font-size:16px;font-weight:600;letter-spacing:-.02em;color:var(--text)}
.faq-icon{flex:0 0 auto;position:relative;width:18px;height:18px}
.faq-icon::before,.faq-icon::after{content:"";position:absolute;background:var(--gold-ink);border-radius:2px;transition:transform .3s ease}
.faq-icon::before{inset:8px 0 auto;height:2px}
.faq-icon::after{inset:0 8px auto;width:2px;height:18px}
.faq-item.is-open .faq-icon::after{transform:rotate(90deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s ease,visibility 0s linear .32s;visibility:hidden}
.faq-item.is-open .faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .32s ease}
.faq-a > div{overflow:hidden;min-height:0}
.faq-a p{padding-bottom:var(--s4);color:var(--text-2);max-width:60ch;font-size:var(--t-small)}
.faq-a p + p{margin-top:calc(var(--s2) - var(--s4))}

/* 19. CTA */
.cta{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s7);align-items:center;background:var(--sunken);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,5vw,52px)}
.cta h2{font-size:clamp(27px,3vw,38px);max-width:18ch}
.cta > div > p{color:var(--text-2);font-size:18px;line-height:1.5;margin-top:var(--s3);max-width:42ch}
.cta-actions{display:flex;flex-direction:column;align-items:stretch;gap:var(--s3)}
.cta-actions .assure{font-size:var(--t-small);color:var(--text-2)}
.cta-alt{margin-top:var(--s2);font-size:var(--t-caption);color:var(--text-3);line-height:1.6}

/* 20. CREDENTIALS, one restrained line */
.creds{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:var(--s7)}
.creds-inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5);padding-block:var(--s3)}
.creds-inner span{display:inline-flex;align-items:center;gap:var(--s5);font-size:var(--t-caption);font-weight:600;color:var(--text-2);white-space:nowrap}
.creds-inner span + span::before{content:"";width:1px;height:13px;background:var(--line-2)}

/* 21. NEWSLETTER, sits on the footer panel */
.news{display:grid;grid-template-columns:1fr auto;gap:var(--s5) var(--s7);align-items:center;padding-bottom:var(--s6);border-bottom:1px solid var(--line-panel)}
.news-eyebrow{display:block;font-size:var(--t-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-light);margin-bottom:var(--s2)}
.news h3{font-size:var(--t-h4);color:var(--on-panel)}
.news p{font-size:var(--t-small);color:var(--on-panel-2);margin-top:var(--s2);max-width:46ch}
.news-form{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;justify-content:flex-end}
.news-form input{width:250px;padding:var(--s3) var(--s4);font-family:var(--sans);font-size:var(--t-small);color:var(--on-panel);background:rgba(244,244,239,.06);border:1.5px solid var(--line-panel);border-radius:var(--r-pill)}
.news-form input::placeholder{color:var(--on-panel-3)}
.news-form input:focus{outline:none;border-color:var(--gold-light)}
.news-msg{flex-basis:100%;text-align:right;font-size:var(--t-caption);font-weight:600;color:var(--gold-light)}
.news-msg.is-error{color:#E9A390}

/* 22. FOOTER */
.footer{background:var(--panel);color:var(--on-panel-2);border-radius:var(--r-lg) var(--r-lg) 0 0}
.footer-inner{padding-block:var(--s7) var(--s4)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:var(--s6);padding-block:var(--s6);border-bottom:1px solid var(--line-panel)}
.footer-brand svg{height:48px;width:auto;margin-bottom:var(--s3)}
.footer-brand p{font-size:var(--t-small);color:var(--on-panel-3);max-width:30ch;line-height:1.6}
.footer-col h4{font-family:var(--disp);font-size:var(--t-caption);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--on-panel);margin-bottom:var(--s3)}
.footer-col li{margin-bottom:6px}
.footer-col a,.footer-col p{font-size:var(--t-caption);color:var(--on-panel-2);transition:color .2s ease}
.footer-col a:hover{color:var(--gold-light)}
.footer-legal{padding-top:var(--s4);font-size:12px;color:var(--on-panel-3);line-height:1.5;max-width:100ch}
.footer-legal p + p{margin-top:var(--s2)}
.footer-bottom{display:flex;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s4);font-size:var(--t-caption);color:var(--on-panel-3)}
.footer-bottom a{color:var(--on-panel-2)}
.footer-bottom a:hover{color:var(--gold-light)}
.footer-bottom nav{display:flex;gap:var(--s4);flex-wrap:wrap}

/* 23. STICKY MOBILE CTA */
.mobile-cta{display:none;position:fixed;inset:auto 0 0;z-index:90;padding:var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom));background:rgba(27,36,48,.95);backdrop-filter:blur(8px);border-top:1px solid rgba(244,244,239,.14);transform:translateY(110%);opacity:0;transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .32s ease;pointer-events:none}
.mobile-cta.is-visible{transform:none;opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.mobile-cta{transition:opacity .2s ease}}

/* 24. MODAL */
.modal{position:fixed;inset:0;z-index:250;display:none;align-items:center;justify-content:center;padding:var(--s4);background:rgba(18,24,32,.62);backdrop-filter:blur(4px)}
.modal.is-open{display:flex}
.modal-box{position:relative;width:100%;max-width:520px;max-height:88vh;overflow-y:auto;background:var(--canvas);border-radius:var(--r-lg);padding:clamp(24px,4vw,38px);box-shadow:0 30px 80px -30px rgba(12,18,26,.6)}
.modal-close{position:absolute;top:var(--s4);right:var(--s4);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--sunken);color:var(--text-2);font-size:20px;line-height:1}
.modal-close:hover{background:var(--line)}
.modal h3{font-size:var(--t-h4);max-width:20ch}
.modal > .modal-box > div > p{font-size:var(--t-small);color:var(--text-2);margin-top:var(--s3);max-width:44ch}
.modal-list{margin-top:var(--s4);display:grid;gap:var(--s2)}
.modal-list li{display:flex;gap:var(--s3);align-items:flex-start;font-size:var(--t-small);color:var(--text-2)}
.modal-list svg{flex:0 0 auto;margin-top:4px;color:var(--gold-ink)}
.modal-form{display:grid;gap:var(--s3);margin-top:var(--s5)}
.modal-form input{width:100%;padding:var(--s3) var(--s4);font-family:var(--sans);font-size:var(--t-small);color:var(--text);background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r-sm)}
.modal-form input:focus{outline:none;border-color:var(--gold-ink)}
.modal-note{font-size:var(--t-micro);color:var(--text-3);line-height:1.5}
.modal-msg{font-size:var(--t-caption);font-weight:600;color:var(--alert);min-height:1px}
.modal-done .tick{width:44px;height:44px;border-radius:50%;background:var(--gold-wash);color:var(--gold-ink);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s4)}
.modal-done h3{margin-bottom:var(--s3)}
.modal-done p{font-size:var(--t-small);color:var(--text-2);margin-bottom:var(--s4)}
/* holder for the invisible Turnstile check (js/site.js); never takes up room */
.ts-slot{position:fixed;right:0;bottom:0;width:0;height:0;overflow:hidden}
.fee-reveal{display:grid;gap:var(--s3);margin:var(--s4) 0;padding:var(--s4);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.fee-reveal div{display:flex;justify-content:space-between;gap:var(--s4);font-size:var(--t-small);padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.fee-reveal div:last-child{padding-bottom:0;border-bottom:none}
.fee-reveal b{font-family:var(--disp);font-weight:800;white-space:nowrap}

/* 25. RESPONSIVE */
@media (max-width:1000px){
  :root{--sec:60px}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6)}
  .hero h1{max-width:22ch}
  .method-head,.who-grid,.fee-grid,.faq-grid,.cta,.nos-grid,.case-body{grid-template-columns:1fr;gap:var(--s5)}
  .method-head h2,.who-head h2,.faq-head h1,.cta h2,.nos-head h2,.case-head h2{max-width:24ch}
  .founder-grid{grid-template-columns:210px 1fr;gap:var(--s6)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta-actions{align-items:stretch}
  .nos-list{grid-template-columns:1fr}
  .nos-list li:first-child{border-top:none;padding-top:0}
  .call{grid-template-columns:1fr;gap:var(--s5)}
  .call-face{flex-direction:row;width:auto;text-align:left;gap:var(--s4)}
  .call-face img{width:72px;height:72px}
  .nav{gap:var(--s4)}
  .news{grid-template-columns:1fr;gap:var(--s4)}
  .news-form{justify-content:flex-start}
  .news-msg{text-align:left}
  /* spine turns vertical */
  .steps{grid-template-columns:1fr;gap:0;padding-left:0}
  .steps::before{left:15px;right:auto;top:20px;bottom:20px;width:1px;height:auto}
  .step{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;gap:0 var(--s4);padding-bottom:var(--s5)}
  .step:last-child{padding-bottom:0}
  .step-node{grid-column:1;grid-row:1;margin:-2px 0 0;order:0}
  .step-vis{grid-column:2;grid-row:1;max-width:118px;margin-bottom:var(--s3)}
  .map{max-width:340px}
  .step-body{grid-column:2;grid-row:2}
  .step h3{margin-top:0}
}

/* Below 860px the five menu tabs no longer fit beside the logo and the
   booking button, so the menu folds into the menu button early. The booking
   button stays in the header until the phone layout takes over at 760px. */
@media (max-width:860px){
  .nav{display:none}
  .burger{display:flex}
  .header-cta{margin-left:auto}
}

@media (max-width:760px){
  :root{--header-h:64px;--sec:44px;--t-h1:clamp(31px,8.4vw,36px);--t-fig:24px;--t-lead:18px;--t-h4:22px}
  .hero-lead p,.method-head p,.nos-head p,.fee-grid > div > p,.cta > div > p{font-size:16px}
  .results-stats{grid-template-columns:repeat(3,1fr);gap:var(--s3) var(--s4)}
  .results-stats b{font-size:20px}
  .band-inner{padding-block:var(--s6)}
  .founder-copy blockquote{font-size:22px}
  .footer-legal p:nth-child(2){display:none}
  .nav{display:none}
  .header-cta .btn{display:none}
  .burger{display:flex}
  .brand svg{height:27px}

  .hero{padding-top:var(--s5)}
  .hero-copy{gap:var(--s4)}
  .hero-copy,.hero-carousel{display:contents}
  .hero-copy > .eyebrow{order:1}
  .hero-copy > h1{order:2}
  .hero-copy > .hero-lead{order:3}
  .hero-copy > .hero-actions{order:4}
  .hero-copy > .hero-assure{order:5}
  .hero-carousel > .carousel{order:6;margin-top:var(--s3)}
  .hero-grid{gap:var(--s4)}

  .panel{padding:var(--s5) var(--s4)}
  .band-inner{padding-block:var(--s7)}
  .track > *{flex:0 0 calc(100% - 40px)}
  .track--hero > *{flex:0 0 100%}
  .carousel-nav{display:none}
  .founder-grid{grid-template-columns:1fr;gap:var(--s5)}
  .founder-photo{max-width:190px}
  .news-form{width:100%}
  .news-form input{flex:1 1 180px;width:auto}
  .call-steps{grid-template-columns:1fr;gap:var(--s4)}
  .case-figures{margin-top:var(--s4)}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
  .footer-brand{grid-column:1 / -1}
  .footer-col--start{grid-column:1 / -1}
  .footer-inner{padding-bottom:var(--s9)}
  .creds-inner{gap:var(--s2) var(--s4)}
  .creds-inner span{gap:var(--s4);white-space:normal}
  .mobile-cta{display:block}
}

@media (max-width:420px){
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn{width:100%}
  .track > *{flex:0 0 calc(100% - 28px)}
  .track--hero > *{flex:0 0 100%}
  .results-stats{grid-template-columns:1fr 1fr}
  .creds-inner span + span::before{display:none}
}

/* 26. MOTION */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
  .js .reveal.is-in{opacity:1;transform:none}
}

/* ============================================================================
   27. HERO REFRESH, September 2026
   Approved concept: L4 layout, stone caption bar, K1 feature type.

   Deliberately scoped. The card rules only ever address .hero-carousel, so
   the results carousel further down keeps the v12.1 plate it has now, and
   the CTA rules only address the header, the drawer and the hero actions.
   Nothing in this block can reach another section.
   ========================================================================= */

/* --- 27a. CTA system: navy primary, bordered secondary, modest radius ----
   Padding drops 32 -> 24 horizontally because the secondary is now a full
   button rather than a text link, and the pair overran the 532px hero
   column by a pixel. Height, font size, weight, gap and order are as they
   were, so nothing moves.                                                */
.header-cta .btn,.drawer .btn,.hero-actions .btn{border-radius:6px;border-width:1px;padding:var(--s4) var(--s5)}
.header-cta .btn--sm,.drawer .btn--sm,.hero-actions .btn--sm{padding:var(--s3) var(--s5)}
.header-cta .btn--primary,.drawer .btn--primary,.hero-actions .btn--primary{background:var(--panel);color:var(--on-panel);border-color:var(--panel)}
.header-cta .btn--primary:hover,.drawer .btn--primary:hover,.hero-actions .btn--primary:hover{background:var(--panel-2);border-color:var(--panel-2)}
.hero-actions .btn--secondary{background:var(--surface);color:var(--panel);border-color:var(--line-2)}
.hero-actions .btn--secondary:hover{border-color:var(--panel)}
/* The secondary now reads "View a sample property report", 52px longer than
   before, so the hero pair drops to 16px side padding to stay on one row. */
.hero-actions .btn{padding-inline:var(--s4)}

/* --- 27b. Hero card: the photograph carries the identity ---------------- */
/* The shelf now sizes to its content. It used to hold three stacked rows of
   figures; it holds one, so the old 200px of room became a gap.          */
.hero-carousel .plate-shelf{padding:12px 14px 13px;flex:1 1 auto}

/* counter chip, top right, where the state stamp used to be */
.hero-carousel .plate-idx{position:absolute;top:10px;right:10px;z-index:3;
  display:inline-flex;align-items:center;padding:4px 8px;border-radius:4px;
  background:rgba(27,36,48,.88);font-family:var(--disp);font-size:10px;font-weight:800;
  letter-spacing:.08em;line-height:1;color:rgba(244,244,239,.52);font-variant-numeric:tabular-nums}
.hero-carousel .plate-idx b{color:var(--on-panel)}

/* specification chip, top left, matched to the counter opposite */
.hero-carousel .plate-feats{position:absolute;top:10px;left:10px;z-index:3;
  display:inline-flex;align-items:center;gap:11px;padding:5px 9px;border-radius:4px;
  background:rgba(27,36,48,.88);font-family:var(--sans);font-size:13px;font-weight:700;
  line-height:1;white-space:nowrap;color:rgba(244,244,239,.95)}
.hero-carousel .plate-feats .ft-i{display:inline-flex;align-items:center;gap:5px}
.hero-carousel .plate-feats .ft-ico{width:15px;height:15px;flex:0 0 auto;opacity:.72;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero-carousel .plate-feats b{font-weight:700}

/* caption bar, stone, flat fill */
.hero-carousel .plate-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;padding:9px 14px 10px;
  background:rgba(224,219,205,.96)}
.hero-carousel .plate-cap .plate-name{font-size:17px;color:var(--text)}
.hero-carousel .plate-cap .plate-meta{margin-top:0;font-size:12px;color:var(--text-3)}
.hero-carousel .plate-cap .plate-state{color:var(--text-2)}

/* --- 27c. The ladder: purchased, valued, grown, on one baseline ---------
   The two wrapper divs go display:contents so the three labels share one
   grid row and the three figures share the next. That shared baseline is
   what stops the row reading as a table without needing any rules.       */
.hero-carousel .plate-rows{display:grid;grid-template-columns:auto auto 1fr;
  column-gap:24px;row-gap:0;align-items:baseline;margin-top:0;padding-top:14px;border-top:none}
.hero-carousel .plate-rows div{padding:0;border-top:none}
.hero-carousel .plate-rows div:nth-of-type(1),
.hero-carousel .plate-rows div:nth-of-type(2),
.hero-carousel .plate-rows .big{display:contents}
.hero-carousel .plate-rows dt{font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-3);line-height:1.4}
.hero-carousel .plate-rows dd{margin-top:3px;font-variant-numeric:normal}
.hero-carousel .plate-rows div:nth-of-type(1) dt{grid-column:1;grid-row:1}
.hero-carousel .plate-rows div:nth-of-type(1) dd{grid-column:1;grid-row:2;font-size:17px;color:var(--text-2)}
.hero-carousel .plate-rows div:nth-of-type(2) dt{grid-column:2;grid-row:1}
.hero-carousel .plate-rows div:nth-of-type(2) dd{grid-column:2;grid-row:2;font-size:21px;color:var(--text);letter-spacing:-.032em}
.hero-carousel .plate-rows .big dt{grid-column:3;grid-row:1}
.hero-carousel .plate-rows .big dd{grid-column:3;grid-row:2;font-size:21px;letter-spacing:-.032em}
.hero-carousel .plate-rows .big .pct{font-size:12px;font-weight:700}

/* --- 27d. The continuation cue; the counter has moved onto the photo --- */
.hero-carousel .carousel-foot{align-items:center;min-height:20px}
.hero-carousel .pf-more{display:inline-flex;align-items:center;gap:6px;margin-left:auto;
  font-size:13px;font-weight:600;color:var(--text);border-bottom:1px solid var(--line-2);
  padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
.hero-carousel .pf-more:hover{border-bottom-color:var(--gold)}
.hero-carousel .pf-arrow{font-size:12px;line-height:1;color:var(--gold-ink)}

@media (max-width:560px){
  /* three columns will not fit a phone card, so the growth takes its own
     line rather than being clipped by the card's overflow */
  .hero-carousel .plate-rows{grid-template-columns:auto 1fr}
  .hero-carousel .plate-rows .big dt{grid-column:1 / -1;grid-row:3;margin-top:12px}
  .hero-carousel .plate-rows .big dd{grid-column:1 / -1;grid-row:4}
  .hero-carousel .plate-feats{gap:9px;padding:4px 7px}
}

/* ============================================================================
   28. HERO FIT, September 2026

   The refresh above left the card 111px shorter than the one it replaced:
   three stacked figure rows became a single row, and the height went with
   them. That pulled the whole hero up 83px, so the navy portfolio band
   started showing above the fold instead of waiting below it.

   Two moves put it right. 56px goes back into the card, which makes the
   card the taller of the two hero columns again and lets it set the hero's
   height the way it did before. The rest comes from the grid growing to
   fill whatever is left of the first screen, so the band clears the fold on
   any window rather than on one particular window size.

   Scoped exactly as 27 is: .hero and .hero-carousel only. The results
   carousel further down keeps the plate it has now.
   ========================================================================= */

/* --- 28a. The card takes its height back --------------------------------
   The photographs are 900x506, so 1.62:1 is about as tall as this frame can
   go before object-fit starts trimming the ends off the houses; that buys
   39px. The shelf takes the other 17px, which the single figure row can use
   without looking padded out.                                             */
.hero-carousel .plate-frame{aspect-ratio:1.62/1}
.hero-carousel .plate-shelf{padding:19px 14px 20px}

/* --- 28b. The hero closes out the first screen --------------------------
   Above 1000px the hero is two columns with the trust bar directly under
   it. 308px is everything else in that first screen -- the sticky header,
   the hero's own padding, the trust bar with its rules, and the transparent
   top padding of the section below -- plus 6px of slack. Because the grid
   already centres its columns, the height it gains is shared above and
   below them rather than left sitting underneath.

   The 842px ceiling keeps the hero from becoming an empty field on a very
   tall window. It holds the band below the fold on anything up to 1156px
   high, which covers every laptop and standard desktop monitor; past that
   the hero stops growing and the band comes back into view.

   The plain calc() comes first as the fallback for anything without svh.  */
@media (min-width:1001px){
  .hero{padding-top:52px;padding-bottom:36px}
  .hero-grid{min-height:calc(100vh - 308px)}
  .hero-grid{min-height:min(calc(100svh - 308px),842px)}
}