/* ==========================================================================
   Manifold Clean Energy — style.css
   1. Tokens          5. Applications      9. Milestones / 9b. Proof
   2. Base            6. Products         10. Partners
   3. Header          7. Technology       11. CTA
   4. Hero            8. About            12. Footer
                                          13. Product page (stove.html)
                                          14. Responsive
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --navy-900:#03121f;
  --navy-800:#061a28;
  --navy-700:#052640;
  --navy-600:#062f4d;
  --navy-500:#0a3252;
  --ink:#0f2c4d;
  --ink-soft:#294864;
  --body:#5b7186;
  --muted:#5c7389;         /* 4.92:1 on white, 4.66:1 on --tint */
  --accent:#4bb453;
  --accent-2:#17b0a6;
  /* the primary-button fill: darkened from the raw accent gradient so white
     text on it clears WCAG AA (5.8:1 and 4.7:1, vs 2.6:1 before). The accent
     tokens above keep their bright values for borders, highlights and fills
     that carry no text. */
  --grad-accent:linear-gradient(100deg,#2a7330 0%,#0d8188 100%);
  --accent-deep:#0e8f96;
  --accent-on-dark:#7fe0c8;   /* accents on the navy bands */
  --accent-ink:#2e7d34;       /* the green dark enough to read as small text on white */
  --accent-ink-2:#0c7a74;     /* the teal dark enough to read as small text on white */
  /* the gold raffle: the only place on the site that is not navy or mint */
  --gold:#b8862b;
  --gold-mid:#e0b551;
  --gold-light:#f2d488;
  --gold-ink:#3a2a06;

  --nav-ink:#04223a;      /* navbar link colour */
  --nav-active:#4bb453;   /* active / hover navbar link */
  --tint:#f6f9fc;
  --line:#e3ebf2;
  --white:#fff;

  --radius-sm:10px;
  --radius:14px;
  --radius-lg:18px;
  --shadow-card:0 10px 34px rgba(10,45,80,.07);

  --ff:"Figtree","Poppins","Segoe UI",system-ui,-apple-system,sans-serif;
  --fs:1.1;              /* global type scale — 1 = original sizes */

  /* Type tiers used by every section below the hero.
     Only two content styles per section: a 24px title and 18px subtitle/body.
     Hierarchy inside a section comes from weight, colour and spacing — not size. */
  --t-title:24px;        /* section headings and card headings */
  --t-sub:18px;          /* subtitles, leads and body copy */
  --t-title-lh:1.35;
  --t-sub-lh:1.7;
  --t-ui:15px;           /* shared control size: buttons, inputs, nav */
  --t-micro:12px;        /* shared label size: eyebrows, tags, badges.
                            11px was below the floor for anything a person has
                            to read rather than glance at, and the blog date and
                            the legal metadata are set in it. */
  --t-figure:38px;       /* numerals only: the price band and the instalment */

  --sec-pad:110px;       /* uniform vertical rhythm below the hero */
  /* The page's own width. Capped in vw as well as pixels: a fixed 1463px
        leaves a comfortable margin at 1900px and almost none at 1750, which is
        why the same design read as "wider" on a smaller monitor. 77vw is the
        proportion 1463px occupies at 1900px, so nothing moves on a large screen
        and a narrower one keeps the same air down the sides. */
  --container:min(1463px, max(1340px, 77vw));
  --topbar-h:45px;
  --header-h:74px;
  --header-offset:calc(var(--topbar-h) + var(--header-h));
}

/* ---------- 2. Base ---------- */
*{box-sizing:border-box}

html{scroll-behavior:smooth;scroll-padding-top:var(--header-offset)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--ff);
  font-size:var(--t-sub);
  line-height:var(--t-sub-lh);
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

/* height:auto or the width/height attributes stretch a scaled-down image */
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none;margin:0;padding:0}
sub{vertical-align:baseline;position:relative;top:.28em;font-size:.7em;line-height:0}
h1,h2,h3,h4{margin:0;color:var(--ink);font-weight:700;line-height:var(--t-title-lh)}
h2,h3,h4{font-size:var(--t-title)}
p{margin:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.top-bar{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1001;
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  background:#04223a;
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
}

.top-bar__inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.top-bar__email{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0;
  color:rgba(255,255,255,.82);
  /* 12px was under the readable floor for a live link; the press area itself is
     grown to 44 px by the ::after square in the touch-target section below */
  font-size:calc(13px * var(--fs));
  font-weight:500;
  letter-spacing:.01em;
  transition:color .2s ease;
}
.top-bar__email i{font-size:calc(13px * var(--fs));color:var(--accent)}
.top-bar__email:hover{color:#fff}

.top-bar__social{
  display:flex;
  align-items:center;
  gap:8px;
}
.top-bar__social a{
  width:28px;
  height:28px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  color:rgba(255,255,255,.84);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  font-size:calc(13px * var(--fs));
  transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.top-bar__social a:hover{
  transform:translateY(-1px);
  background:rgba(52,211,190,.14);
  border-color:rgba(52,211,190,.3);
  color:var(--accent);
}

.container-x{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:20px;
}
/* The grid turns a gutter into a negative margin on the row and padding on its
   columns. A gutter wider than twice the container padding therefore hangs off
   both edges — gx-5 is 48px against 20px of padding, which is the sideways
   scroll every page used to have. The gutter is capped to what the container
   can absorb. (--bs-gutter-x was the name while Bootstrap was loaded; the grid
   is ours now and the variable is --gutter-x. Both are set, so a stale copy of
   either stylesheet still behaves.) */
.container-x .row{--gutter-x:2.5rem;--bs-gutter-x:2.5rem}

.section{padding:var(--sec-pad) 0}
/* second half of a two-part band — the previous section already paid the gap */
.section--flush-top{padding-top:0}
.section--tint{background:var(--tint)}
.pt-0{padding-top:0}
.pt-10{padding-top:64px}
.pt-20{padding-top:108px}
.pb-20{padding-bottom:108px}

/* --- shared type tiers ---
   .u-title  → 24px heading (section or card)
   .u-sub    → 18px subtitle / lead / body
   Section markup only ever mixes these two, plus the micro label below. */
.u-title{
  font-size:var(--t-title);
  font-weight:700;
  line-height:var(--t-title-lh);
  letter-spacing:-.015em;
  color:var(--ink);
}
.u-sub{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
}

.eyebrow{
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 14px;
}
.eyebrow--sm{font-size:var(--t-micro);letter-spacing:.16em}
.eyebrow--on-dark{color:#4fc5c2}
.eyebrow--accent{color:var(--accent-ink-2)}

/* every section opens with this: label + short rule, then the 24px title */
.eyebrow--rule{
  position:relative;
  color:var(--leaf-deep,var(--accent-ink-2));
  padding-bottom:16px;
  margin-bottom:22px;
}
.eyebrow--rule::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:58px;height:3px;
  border-radius:2px;
  background:var(--leaf,var(--accent-2));
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:44px;
}
.section-title{
  font-size:var(--t-title);
  font-weight:700;
  line-height:var(--t-title-lh);
  letter-spacing:-.02em;
  color:var(--ink);
  flex:1 1 auto;
  max-width:22ch;
}
.section-sub{
  flex:0 1 380px;
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
  padding-bottom:4px;
}

/* --- buttons --- */
.btn-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  /* 16px of padding either side of a 15px line box puts the control at 46 px,
     clear of the 44 px floor a finger needs. Everything pill-shaped inherits
     it, which is why the fix is one number rather than twenty. */
  padding:16px 24px;
  min-height:46px;
  border-radius:999px;
  font-size:var(--t-ui);
  font-weight:600;
  line-height:1;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn-pill i{font-size:calc(var(--t-ui) - 2px);transition:transform .22s ease}
.btn-pill:hover i{transform:translateX(3px)}

.btn-pill--accent{
  background:var(--grad-accent);
  color:#fff;
  box-shadow:0 6px 18px rgba(35,190,175,.28);
}
.btn-pill--accent:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(35,190,175,.38)}

/* solid white pill with dark text — navbar CTA and hero primary actions */
.btn-pill--white{
  background:#fff;
  color:var(--ink);
  box-shadow:0 6px 18px rgba(10,45,80,.16);
}
.btn-pill--white:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(10,45,80,.22)}
.site-header .btn-pill--white{
  border:1px solid #d5e0e9;
  box-shadow:0 2px 8px rgba(10,45,80,.08);
}
.site-header .btn-pill--white:hover{background:#f4f8fb;box-shadow:0 6px 16px rgba(10,45,80,.12)}

/* main.js reveals the raffle button once raffle.php says the promotion is running */
.btn-pill[hidden]{display:none}

.btn-pill--ghost{
  color:#fff;
  border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(6px);
}
.btn-pill--ghost:hover{background:rgba(255,255,255,.14)}

.btn-pill--outline{
  color:var(--accent-ink);
  border:1px solid rgba(52,211,190,.5);
  background:transparent;
}
.btn-pill--outline:hover{background:rgba(52,211,190,.12)}

.btn-dark{
  display:inline-block;
  background:var(--navy-800);
  color:#fff;
  font-size:var(--t-ui);
  font-weight:600;
  padding:13px 26px;
  border-radius:999px;
  transition:background .22s ease,transform .22s ease;
}
.btn-dark:hover{background:var(--navy-600);transform:translateY(-2px)}

.btn-dark--outline{
  background:transparent;
  color:var(--navy-800);
  border:1px solid rgba(11,31,58,.22);
}
.btn-dark--outline:hover{background:rgba(11,31,58,.06);color:var(--navy-800)}
.btn-dark--outline i{font-size:14px;margin-left:6px;vertical-align:-1px}

.product-card__actions{display:flex;flex-wrap:nowrap;gap:10px}
/* the two card buttons sit on one line; trimmed padding keeps them there in the
   horizontal card layout without shrinking the label */
.product-card__actions .btn-dark{padding-inline:20px;white-space:nowrap}

/* --- round icon chips ---
   The glyph is centred with flex and line-height:1. Grid + the inherited 1.7
   line-height left the icon sitting high and left inside its circle. */
.feature-icon,
.about-stat__icon,
.why-icon,
.icon-card__icon,
.contact-card__icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.feature-icon > i,
.about-stat__icon > i,
.why-icon > i,
.icon-card__icon > i,
.contact-card__icon > i{
  display:block;
  line-height:1;
}
/* bootstrap-icons nudges every glyph down by .125em — undo it inside a chip */
.feature-icon > i::before,
.about-stat__icon > i::before,
.why-icon > i::before,
.icon-card__icon > i::before,
.contact-card__icon > i::before{
  display:block;
}

/* --- scroll reveal --- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .55s ease,transform .55s ease}
.reveal.is-visible{opacity:1;transform:none}

/* A block with something pressable in it fades, and does not travel.
   The 22px rise is fine on a paragraph or a picture; on a button it means the
   thing under the cursor is still moving when somebody goes to press it, which
   reads as the button stretching down the screen as it arrives. */
.reveal:has(a[class*="btn"]),
.reveal:has(button),
.reveal:has(input),
.reveal:has(select),
.reveal:has(summary){transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- 3. Header ---------- */
.site-header{
  position:fixed;
  top:var(--topbar-h);
  left:0;
  right:0;
  z-index:1000;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:#f6f9fc;
  border-bottom:1px solid #e6edf3;
  transition:box-shadow .3s ease,height .3s ease;
}
.site-header.is-stuck{
  box-shadow:0 6px 22px rgba(15,60,95,.09);
}

.nav-wrap{
  width:100%;
  /* the same column the page below it uses, so the logo and the buttons line up
     with the content rather than sitting 20px further out */
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:20px;
  display:flex;
  align-items:center;
  gap:26px;
}

/* brand and actions take an equal share of what the links do not, so the links
   land on the middle of the header rather than beside the buttons on the right */
.brand{display:flex;align-items:center;gap:10px;color:#fff;flex:1 1 0;min-width:0}
.brand-logo{height:46px;width:auto;flex-shrink:0}
.brand-mark{width:26px;height:26px;color:var(--accent);display:block}
.brand-mark svg{width:100%;height:100%}
.brand-text{
  font-size:calc(15px * var(--fs));
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.01em;
}
.brand-text em{font-style:normal;color:var(--accent);font-weight:700}
.brand--dark{color:var(--ink)}
.brand--dark .brand-mark{color:#79c8d8}
.brand--dark .brand-text em{color:var(--ink)}

.main-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:30px;
}
.main-nav a{
  font-size:calc(15px * var(--fs));
  font-weight:500;
  color:var(--nav-ink);
  position:relative;
  padding:4px 0;
  transition:color .2s ease;
}
.main-nav summary{
  list-style:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  position:relative;
  font-size:calc(15px * var(--fs));
  font-weight:500;
  color:var(--nav-ink);
  cursor:pointer;
  padding:4px 0;
  transition:color .2s ease;
}
.main-nav summary::-webkit-details-marker{display:none}
.main-nav summary::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1.5px;
  background:var(--nav-active);
  transition:width .25s ease;
}
.main-nav summary:hover,
.main-nav details[open] summary{color:var(--nav-active)}
.main-nav summary:hover::after,
.main-nav details[open] summary::after{width:100%}
.main-nav a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1.5px;
  background:var(--nav-active);
  transition:width .25s ease;
}
.main-nav a:hover{color:var(--nav-active)}
.main-nav a:hover::after,
.main-nav a.is-active::after{width:100%}
.main-nav a.is-active{color:var(--nav-active);font-weight:600}

.nav-dropdown{
  position:relative;
}
.nav-dropdown__menu{
  position:absolute;
  top:calc(100% + 12px);
  left:-10px;
  min-width:180px;
  padding:10px;
  border-radius:14px;
  background:#fff;
  border:1px solid #e6edf3;
  box-shadow:0 20px 38px rgba(15,60,95,.13);
  display:grid;
  gap:4px;
  opacity:0;
  /* not visibility:hidden — that drops the two links out of the tab order,
     so a keyboard never reaches them and focus-within never fires */
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .22s ease,transform .22s ease;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown[open] .nav-dropdown__menu{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
.nav-dropdown__menu a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  font-size:calc(14px * var(--fs));
  color:var(--nav-ink);
}
.nav-dropdown__menu a:hover{background:rgba(75,180,83,.1);color:var(--nav-active)}

.nav-actions{
  display:flex;
  align-items:center;
  gap:12px;
}
.nav-actions--desktop{flex:1 1 0;justify-content:flex-end}
/* the ghost pill lives on a light bar inside the header only */
.site-header .btn-pill--ghost{
  color:var(--nav-ink);
  border:1px solid #d5e0e9;
  background:#fff;
  backdrop-filter:none;
}
.site-header .btn-pill--ghost:hover{background:#eef3f7;border-color:#c3d3df}
.nav-login{font-size:calc(15px * var(--fs))}


/* --- signed-in account menu ----------
   Replaces the Login button once portal/session.php reports a live session. */
.nav-account{position:relative;margin-left:14px}
.nav-account--mobile{display:none;margin-left:0;width:100%}

.nav-account__button{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:7px 14px 7px 7px;
  border:1px solid #d5e0e9;
  border-radius:999px;
  background:#fff;
  font-family:inherit;
  font-size:calc(15px * var(--fs));
  font-weight:600;
  color:var(--nav-ink);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.nav-account__button:hover{background:#eef3f7;border-color:#c3d3df}
.nav-account__button i{font-size:13px;transition:transform .25s ease}
.nav-account.is-open .nav-account__button i{transform:rotate(180deg)}

.nav-account__avatar{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  border-radius:50%;
  background:var(--grad-accent);
  color:#fff;
  font-size:13px;
  font-weight:700;
  line-height:1;
}
.nav-account__name{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.nav-account__menu{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  min-width:230px;
  padding:10px;
  border-radius:14px;
  background:#fff;
  border:1px solid #e6edf3;
  box-shadow:0 20px 38px rgba(15,60,95,.13);
  display:grid;
  gap:2px;
  z-index:60;
}
.nav-account__menu[hidden]{display:none}
.nav-account__who{
  margin:0 0 6px;
  padding:8px 12px 12px;
  border-bottom:1px solid #eef3f7;
  display:grid;
  gap:2px;
  line-height:1.4;
}
.nav-account__who strong{font-size:calc(14px * var(--fs));color:var(--ink)}
.nav-account__who span{
  font-size:calc(12.5px * var(--fs));
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
}
.nav-account__menu a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:10px;
  font-size:calc(14.5px * var(--fs));
  font-weight:600;
  color:var(--nav-ink);
  transition:background .2s ease,color .2s ease;
}
.nav-account__menu a i{font-size:16px;line-height:1;color:var(--accent-deep)}
.nav-account__menu a:hover{background:#eef3f7;color:var(--nav-active)}
.nav-account__out{color:#a3405a}
.nav-account__out i{color:#a3405a !important}
.nav-account__out:hover{background:rgba(201,69,92,.08);color:#a3405a}

.nav-cta{margin-left:34px;padding:12px 18px;font-size:calc(15px * var(--fs))}
/* icon only, so it sits as a square beside the two worded pills */
.nav-raffle{
  margin-left:34px;
  padding:0;
  width:44px;
  height:44px;
  justify-content:center;
}
.nav-raffle i{font-size:17px}
/* nothing to lead into, so the icon stays put on hover */
.nav-raffle:hover i{transform:none}
.nav-raffle + .nav-cta{margin-left:0}
.nav-raffle-mobile{display:none}
.nav-cta-mobile{display:none}
.nav-login-mobile{display:none}

.nav-toggle{
  display:none;
  margin-left:auto;
  /* 38px reads as a control beside the logo rather than an empty box; the
     44px press area is added by the ::after in the touch-target section, so
     the target stays compliant while the button itself gets smaller */
  width:38px;height:38px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  cursor:pointer;
  touch-action:manipulation;
  transition:box-shadow .2s ease,background .2s ease,transform .18s ease;
}
.nav-toggle:hover{box-shadow:0 1px 3px rgba(15,60,95,.08)}
/* presses in place — the bounds never move, so the header cannot jitter */
.nav-toggle:active{transform:scale(.96);background:var(--tint)}
.nav-toggle:focus-visible{outline:2px solid var(--accent-ink-2);outline-offset:2px}
/* 18px bars on a 5px rhythm: the three lines read as one mark instead of
   three separate rules, and the 7px collapse below still lands on centre */
.nav-toggle span{
  display:block;
  width:18px;height:2px;
  background:var(--nav-ink);
  border-radius:2px;
  transition:transform .28s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* the mark still becomes an X — only the travel to it is dropped */
@media (prefers-reduced-motion:reduce){
  .nav-toggle,
  .nav-toggle span{transition:none}
  .nav-toggle:active{transform:none}
}

/* ---------- 4. Hero ---------- */
.hero{
  position:relative;
  min-height:clamp(880px,88vh,760px);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--navy-900);
}
.hero-media{
  position:absolute;
  inset:0;
  /* A phone is sent the 960-wide copy, a laptop the 1440, and only a large
     desktop the full 1518. As a background it cannot carry a srcset, so the
     choice is made with media queries. */
  background:url("../images/hero-home-960w.webp") center center/cover no-repeat;
}
@media (min-width:768px){
  .hero-media{background-image:url("../images/hero-home-1440w.webp")}
}
@media (min-width:1600px){
  .hero-media{background-image:url("../images/hero-home.webp")}
}
.hero-media::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(14, 71, 124, 0.94) 0%,rgba(5, 36, 65, 0.82) 28%,rgba(0, 0, 0, 0.42) 50%,rgba(0, 0, 0, 0.14) 68%,rgba(0, 0, 0, 0) 82%),
    linear-gradient(180deg,rgba(0, 0, 0, 0.55) 0%,rgba(0, 0, 0, 0) 34%);
}

.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  /* the hero runs a little wider than the rest of the page, at the same
     proportion — see --container */
  max-width:min(1505px, max(1380px, 79vw));
  margin-inline:auto;
  padding:calc(var(--header-offset) + 26px) 22px 46px;
}
.hero-copy{max-width:545px}

.eyebrow-badge{
  display:inline-block;
  border:1px solid rgba(255,255,255,.34);
  border-radius:999px;
  padding:6px 16px;
  /* 9.5 rounded to under 10px on a phone: below what a label should ever be,
     and 11 was still under the floor for a badge somebody has to read */
  font-size:max(12px, calc(11px * var(--fs)));
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.9);
  margin-bottom:22px;
}

.hero-title{
  font-size:calc(clamp(38px,4.6vw,58px) * var(--fs));
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.03em;
  color:#fff;
  margin-bottom:22px;
}
.hero-title .accent{color:var(--accent)}

.hero-text{
  font-size:calc(14px * var(--fs));
  line-height:1.85;
  color:rgba(255,255,255,.78);
  max-width:450px;
  margin-bottom:28px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Feature bar ---------- */
.feature-bar{
  background:linear-gradient(10deg,#043d6b 70%,#4bb453 100%);
  padding:70px 0;
}
.feature{display:flex;gap:20px;align-items:flex-start}
.feature-icon{
  flex:0 0 52px;
  width:52px;height:52px;
  border:1px solid rgba(90,190,200,.5);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
  color:var(--accent);
  font-size:20px;
  margin-top:2px;
}
.feature h2{
  font-size:var(--t-title);
  line-height:var(--t-title-lh);
  letter-spacing:-.015em;
  font-weight:700;
  color:#fff;
  margin-bottom:8px;
}
.feature p{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:rgba(255,255,255,.62);
  max-width:26ch;
}

/* ---------- 5. Applications ---------- */
.app-card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  aspect-ratio:1/1.28;
  background:var(--navy-500);
  box-shadow:var(--shadow-card);
  transition:transform .35s ease,box-shadow .35s ease;
}
.app-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(10,45,80,.18)}

.app-card img{
  position:absolute;inset:0;
  width:100%;height:62%;
  object-fit:cover;
  transition:transform .6s ease;
}
.app-card:hover img{transform:scale(1.06)}

.app-card .tag{
  position:absolute;
  top:14px;left:14px;
  z-index:3;
  background:var(--accent-ink);
  color:var(--white);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:999px;
}

.app-card__body{
  position:absolute;
  left:0;right:0;bottom:0;
  z-index:2;
  min-height:40%;
  padding:20px 18px 18px;
  /* the heading, the copy and the arrow/badge stack in flow so the action can
     never land on top of the last line of text — the earlier layout pinned the
     badge to the corner and the copy ran underneath it */
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  background:linear-gradient(180deg,rgba(12, 73, 123, 0) 0%,rgba(9, 62, 106, 0.92) 16%,#0b426e 42%);
}
.app-card__body h3{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.3;
  color:#fff;
  margin-bottom:0;
}
.app-card__body p{
  /* smaller than the heading: hierarchy by size as well as colour, and it stops
     the two-line descriptions overflowing the card */
  font-size:var(--t-ui);
  font-weight:400;
  line-height:1.5;
  color:rgba(255,255,255,.72);
  margin-bottom:0;
}
.round-arrow{
  margin-top:auto;
  align-self:flex-end;
  width:30px;height:30px;
  flex:none;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1;
  color:#fff;
  font-size:13px;
  transition:background .25s ease,transform .25s ease;
}
.app-card:hover .round-arrow{background:var(--accent);border-color:var(--accent);color:#06332f;transform:translateX(3px)}

.soon-badge{
  margin-top:auto;
  align-self:flex-end;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  padding:5px 12px;
  color:#fff;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:background .25s ease,border-color .25s ease,color .25s ease;
}
.app-card:hover .soon-badge{background:var(--accent);border-color:var(--accent);color:#06332f}

/* ---------- 6. Products ---------- */

/* Technology partner band, directly above the products.
   The K7 artwork is a wide banner on its own black ground, so it sits on the
   dark navy panel the rest of the site uses for bands and is blended with
   `screen`: black turns into the panel and only the mark and its glow are
   left, with no rectangle around it. */
.powered{
  display:flex;
  align-items:center;
  gap:38px;
  padding:34px 40px;
  border-radius:var(--radius-lg);
  background:linear-gradient(10deg,#043d6b 70%,#4bb453 100%);
  box-shadow:var(--shadow-card);
}
/* the artwork is a wide banner whose wordmark is black on black — invisible
   once the ground is blended away — so the box crops to the mark on its left
   and the name is carried by the heading instead */
.powered__mark{
  flex:0 0 128px;
  width:128px;
  height:164px;
  overflow:hidden;
}
.powered__mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:left center;
  mix-blend-mode:screen;
}
.powered__text{min-width:0;max-width:82ch}
.powered .eyebrow{color:var(--accent-on-dark)}
.powered__title{
  margin:0 0 10px;
  font-size:var(--t-title);
  line-height:var(--t-title-lh);
  font-weight:700;
  color:#fff;
}
.powered__title span{color:var(--accent-on-dark);white-space:nowrap}
.powered__lead{
  margin:0;
  font-size:var(--t-sub);
  line-height:var(--t-sub-lh);
  color:rgba(233,243,250,.86);
}

@media (max-width:991.98px){
  .powered{
    flex-direction:column;
    align-items:flex-start;
    gap:22px;
    padding:28px 26px;
  }
  .powered__mark{height:132px;flex:0 0 104px;width:104px}
}

.product-card{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 30px;
  height:100%;
  box-shadow:var(--shadow-card);
  transition:transform .35s ease,box-shadow .35s ease;
}
.product-card:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(10,45,80,.12)}

.product-card__text{flex:1 1 58%;min-width:0}
.product-card__text h3{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.45;
  letter-spacing:-.005em;
  margin-bottom:12px;
}
.product-card__lead{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
  margin-bottom:20px;
  max-width:34ch;
}

.check-list{margin-bottom:26px;display:grid;gap:10px}
.check-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:var(--t-sub);
  font-weight:400;
  color:var(--ink-soft);
  line-height:1.55;
}
.check-list i{color:var(--accent-2);font-size:16px;margin-top:4px}

.product-card__media{
  flex:1 1 42%;
  display:grid;
  place-items:center;
}
.product-card__media img{
  /* scale down with the column instead of holding a rigid 320px, which was
     starving the text column and forcing the two action buttons to wrap */
  width:320px;
  max-width:100%;
  transition:transform .5s ease;
  mix-blend-mode:multiply;
}
.product-card:hover .product-card__media img{transform:scale(1.04)}

/* Between 992 and 1199 the two cards sit side by side but each is too narrow for
   the image and the text to share a row, so the card stacks — image over text,
   full width — which also gives the action buttons all the room they need. */
@media (min-width:992px) and (max-width:1199.98px){
  .product-card{flex-direction:column;align-items:flex-start;gap:24px}
  .product-card__media{width:100%}
  .product-card__media img{max-width:280px;margin-inline:auto}
}

/* ---------- 7. Technology ---------- */
.tech{background:var(--tint)}
/* the section uses the site container directly — no panel of its own */
.tech .container-x{position:relative}

/* decorative dot grids */
.tech-dots{
  position:absolute;
  z-index:1;
  pointer-events:none;
  background-image:radial-gradient(#c6d5e2 1.5px,transparent 1.5px);
  background-size:15px 15px;
  opacity:.75;
}
.tech-dots--tr{top:0;right:0;width:104px;height:60px}
.tech-dots--mid{top:78%;left:24%;width:76px;height:70px}

.tech .container-x > .row{position:relative;z-index:2}

.tech-title{
  font-size:var(--t-title);
  line-height:var(--t-title-lh);
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.02em;
  margin-bottom:22px;
}
.tech-title__accent{color:var(--accent-ink-2)}
.tech-text{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
  max-width:34ch;
  margin-bottom:32px;
}

.btn-pill--grad{
  padding:15px 28px;
  font-size:var(--t-ui);
  color:#fff;
  background:linear-gradient(95deg,#17b6c4 0%,#45cf93 100%);
  box-shadow:0 10px 24px rgba(31,183,166,.28);
}
.btn-pill--grad:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(31,183,166,.36)}

/* --- process flow --- */
.flow{
  --orb:140px;
  display:flex;
  align-items:stretch;
  gap:4px;
}
.flow-step{
  flex:1 1 0;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.flow-orb{
  position:relative;
  width:var(--orb);height:var(--orb);
  margin:14px 0 24px;
  flex:none;
}
.flow-ring{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  overflow:visible;
}
.ring-arc{fill:none;stroke:var(--step);stroke-width:1.4;opacity:.9}
.ring-dots{fill:none;stroke:var(--step);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:0.1 6;opacity:.55}
.ring-cap{fill:var(--step)}

/* white disc that holds the icon */
.flow-orb::before{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:106px;height:106px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:#fff;
  box-shadow:0 10px 26px rgba(21,68,105,.09);
  transition:transform .3s ease,box-shadow .3s ease;
}
.flow-step:hover .flow-orb::before{
  transform:translate(-50%,-50%) scale(1.04);
  box-shadow:0 14px 34px rgba(21,68,105,.14);
}

.flow-num{
  position:absolute;
  left:50%;top:4px;
  z-index:3;
  transform:translate(-50%,-50%);
  width:36px;height:36px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1;
  background:var(--step);
  color:#fff;
  font-size:13px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:0 6px 14px color-mix(in srgb,var(--step) 34%,transparent);
}

.flow-icon{
  position:absolute;
  left:50%;top:50%;
  z-index:2;
  transform:translate(-50%,-50%);
  width:54px;height:54px;
  display:block;
}
.flow-icon svg{width:100%;height:100%;display:block}

.flow-step h3{
  font-size:var(--t-sub);
  color:var(--ink);
  font-weight:700;
  line-height:1.4;
  margin-bottom:14px;
  max-width:12ch;
}
.flow-step p{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.6;
  color:var(--body);
  max-width:16ch;
  margin-bottom:36px;
}
/* pushed to the bottom so every dash lines up regardless of copy length */
.flow-dash{
  display:block;
  width:44px;height:3px;
  border-radius:2px;
  margin-top:auto;
  background:var(--step);
}

.flow-sep{
  flex:0 0 26px;
  align-self:flex-start;
  color:#9fb2c2;
  font-size:calc(15px * var(--fs));
  line-height:calc(var(--orb) + 28px);
  text-align:center;
}

/* ---------- 8. About ---------- */
.about{
  --leaf:#4fb3a8;          /* soft teal used across this section */
  --leaf-deep:#2f9e94;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg,#fbfdfe 0%,#f6f9fc 100%);
}
/* pale wave sweeping the lower-left corner */
.about-wave{
  position:absolute;
  left:-8%;bottom:-46%;
  width:78%;height:78%;
  border-radius:50%;
  background:linear-gradient(140deg,rgba(226,238,247,.75),rgba(240,247,251,.35));
  pointer-events:none;
}
.about .container-x{position:relative;z-index:2}

.about-title{
  font-size:var(--t-title);
  font-weight:700;
  line-height:var(--t-title-lh);
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:20px;
}
.about-title span{color:var(--leaf-deep)}

/* short rule between the title and the copy */
.about-rule{
  display:block;
  width:58px;height:3px;
  border-radius:2px;
  margin-bottom:26px;
  background:var(--leaf);
}

.about-text{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
  max-width:46ch;
  margin-bottom:18px;
}
.about-text:last-of-type{margin-bottom:40px}

/* --- the two stats, split by a hairline --- */
.about-stats{display:flex;align-items:flex-start}
.about-stat{display:flex;gap:14px;align-items:flex-start;flex:1 1 0}
.about-stat + .about-stat{
  border-left:1px solid #dde7ee;
  padding-left:20px;
  margin-left:20px;
}
.about-stat__icon{
  flex:none;
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
  background:rgba(79,179,168,.13);
  color:var(--leaf-deep);
  font-size:21px;
}
.about-stat strong{
  display:block;
  font-size:var(--t-sub);
  font-weight:700;
  color:var(--ink);
  line-height:1.4;
  margin-bottom:4px;
}
.about-stat > div > span{
  display:block;
  font-size:var(--t-sub);
  font-weight:400;
  color:var(--body);
  line-height:1.5;
  max-width:17ch;
}

/* --- decorative dot grids --- */
.about-dots{
  position:absolute;
  z-index:1;
  pointer-events:none;
  background-image:radial-gradient(rgba(79,179,168,.5) 1.6px,transparent 1.6px);
  background-size:16px 16px;
}
.about-dots--bl{left:0;bottom:-64px;width:112px;height:52px}
.about-dots--br{right:0;bottom:-70px;width:112px;height:52px}
/* dot grid to the left of the photo */
.about-dots--tl{
  left:0;top:12%;
  width:96px;height:70px;
  background-image:radial-gradient(rgba(79,179,168,.45) 1.6px,transparent 1.6px);
}

/* --- the photo and everything floating around it --- */
.about-visual{
  --blob:12% 46% 32% 18% / 14% 44% 34% 20%;
  position:relative;
  padding:26px 18px 30px 120px;
}

/* small leaf medallion at the top right of the arc */
.about-leaf{
  position:absolute;
  z-index:4;
  right:6%;top:2%;
  width:62px;height:62px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(79,179,168,.3);
  box-shadow:0 10px 26px rgba(15,60,95,.1);
  color:var(--leaf-deep);
}
.about-leaf svg{width:28px;height:28px;display:block}

/* leaf sprig tucked under the bottom-right corner */
.about-sprig{
  position:absolute;
  z-index:3;
  right:-10px;bottom:-6px;
  width:150px;height:125px;
  pointer-events:none;
}
.about-sprig svg{width:100%;height:100%;display:block}
.about-figure{
  position:relative;
  z-index:2;
  margin:0;
  aspect-ratio:106/100;
  border-radius:var(--blob);
  overflow:hidden;
  box-shadow:0 22px 50px rgba(15,60,95,.14);
}
.about-figure img{width:100%;height:100%;object-fit:cover}

/* thin ring sweeping around the photo */
.about-trace__arc{
  position:absolute;
  z-index:1;
  left:70px;right:2%;
  top:0;bottom:8%;
  border:1.5px solid rgba(79,179,168,.4);
  border-radius:48% 52% 44% 56% / 50% 46% 54% 50%;
  pointer-events:none;
}

/* circular badge overlapping the photo */
.about-badge{
  position:absolute;
  z-index:4;
  left:0;top:32%;
  width:200px;height:200px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-align:center;
  background:linear-gradient(160deg,#ffffff 0%,#e6f5f2 100%);
  border:1px solid rgba(79,179,168,.35);
  box-shadow:0 16px 38px rgba(15,60,95,.12);
}
.about-badge__icon{
  width:44px;height:44px;
  color:var(--leaf-deep);
  display:block;
}
.about-badge__icon svg{width:100%;height:100%;display:block}
.about-badge p{
  font-size:var(--t-sub);
  font-weight:600;
  line-height:1.45;
  color:var(--leaf-deep);
}

/* --- why hydrogen: full-width block under the intro, no panel chrome --- */
.why-panel{
  position:relative;
  z-index:2;
  margin-top:80px;
}
/* centred eyebrow, rule underneath */
.eyebrow--center{text-align:center;margin-bottom:40px}
.eyebrow--center::after{left:50%;transform:translateX(-50%)}

.why-list{list-style:none;margin:0;padding:0}
.why-card{
  height:100%;
  background:#fff;
  border:1px solid rgba(227,235,242,.9);
  border-radius:18px;
  padding:26px 24px 28px;
  box-shadow:0 10px 30px rgba(15,60,95,.06);
  transition:transform .25s ease,box-shadow .25s ease;
}
.why-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(15,60,95,.11)}

/* icon chip with the step number notched into its corner */
.why-card__top{position:relative;display:inline-block;margin-bottom:18px}
.why-icon{
  flex:none;
  width:56px;height:56px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
  background:rgba(79,179,168,.13);
  color:var(--leaf-deep);
  font-size:22px;
}
.why-icon svg{width:26px;height:26px;display:block}
.why-num{
  position:absolute;
  right:-14px;top:-6px;
  width:30px;height:30px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1;
  /* not --leaf-deep: that is 3.26 : 1 under white text */
  background:#27827a;
  color:#fff;
  font-size:var(--t-micro);
  font-weight:700;
  box-shadow:0 4px 12px rgba(39,130,122,.32);
}
.why-card strong{
  display:block;
  font-size:var(--t-sub);
  font-weight:700;
  color:var(--ink);
  line-height:1.35;
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.why-desc{
  display:block;
  font-size:var(--t-sub);
  font-weight:400;
  color:var(--body);
  line-height:1.5;
}

/* ---------- 9. Milestones ---------- */
.timeline-section{
  position:relative;
  overflow:hidden;
  background:var(--white);
}
/* pale H2 molecule in the top-right corner */
.timeline-molecule{
  position:absolute;
  right:2%;top:6px;
  width:330px;height:268px;
  pointer-events:none;
  opacity:.85;
}
.timeline-molecule svg{width:100%;height:100%;display:block}

.timeline-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-start;
  gap:56px;
  margin-bottom:54px;
}
.timeline-head__title{flex:0 1 auto}
.timeline-title{
  font-size:var(--t-title);
  line-height:var(--t-title-lh);
  letter-spacing:-.02em;
  color:var(--ink);
  font-weight:700;
}
.timeline-title span{color:var(--accent-ink-2)}
.timeline-head__lead{
  flex:0 1 380px;
  margin-top:44px;
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
}

.timeline-scroll{
  position:relative;
  z-index:2;
  overflow-x:auto;
  padding-bottom:8px;
  -webkit-overflow-scrolling:touch;
}
.timeline-scroll::-webkit-scrollbar{height:5px}
.timeline-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

.timeline{
  --dot:26px;
  --rail:calc(32px + var(--dot) / 2);   /* year height + half the node */
  display:flex;
  gap:0;
  /* ten years have to sit on one rail: the floor is what a cell needs to stay
     readable, not a fixed canvas, so the row only scrolls on a narrow laptop */
  min-width:1240px;
  position:relative;
}
/* the rail the nodes sit on */
.timeline::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:var(--rail);
  height:1.5px;
  background:#e1e9f0;
}

.timeline-item{
  flex:1 1 0;
  min-width:0;
  position:relative;
  text-align:center;
  padding:0 8px 4px;
}
/* hairline between the description cells */
.timeline-item + .timeline-item::after{
  content:"";
  position:absolute;
  left:0;
  top:calc(var(--rail) + 30px);
  bottom:0;
  width:1px;
  background:#e6edf3;
}

.timeline-year{
  display:block;
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1;
  color:var(--ink);
  margin-bottom:14px;
}
.timeline-dot{
  position:relative;
  z-index:2;
  display:grid;
  place-items:center;
  width:var(--dot);height:var(--dot);
  margin:0 auto 26px;
  border-radius:50%;
  background:#fff;
  border:1.5px solid #dfe8ef;
}
.timeline-dot::before{
  content:"";
  width:10px;height:10px;
  border-radius:50%;
  border:2px solid #75899c;
}
/* the rail is a dense data row, so its captions run at the 15px utility size
   rather than the 18px body size — see .claude/theme.md */
.timeline-item p{
  font-size:var(--t-ui);
  font-weight:400;
  line-height:1.5;
  color:var(--body);
  margin-inline:auto;
  text-align:left;
  /* only break a word that cannot fit the cell at all, and never hyphenate:
     auto hyphenation was splitting "deliveries" across two lines */
  overflow-wrap:break-word;
  -webkit-hyphens:none;
  hyphens:none;
}

/* the live milestone */
.timeline-item--now .timeline-year{color:var(--accent-ink-2)}
.timeline-item--now p{color:var(--accent-ink-2)}
.timeline-item--now .timeline-dot{
  border-color:var(--accent-2);
  box-shadow:0 0 0 5px rgba(23,176,166,.14);
}
.timeline-item--now .timeline-dot::before{
  width:12px;height:12px;
  border:0;
  background:var(--accent-2);
}
/* the rail turns accent for the final leg */
.timeline-item--now::before{
  content:"";
  position:absolute;
  right:50%;
  left:calc(-100% + 50%);
  top:var(--rail);
  height:1.5px;
  background:linear-gradient(90deg,rgba(23,176,166,0),var(--accent-2));
}

/* ---------- 9b. Proof / trusted ----------
   Dark band, same gradient as the feature bar: white headings, glass cards
   over the navy, accent teal for labels, links and icons. */
.proof{
  position:relative;
  overflow:hidden;
  background:linear-gradient(10deg,#043d6b 70%,#4bb453 100%);
}
.proof-dots{
  position:absolute;
  z-index:1;
  right:0;top:6%;
  width:140px;height:180px;
  pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.32) 1.5px,transparent 1.5px);
  background-size:16px 16px;
  opacity:.8;
}
.proof .container-x{position:relative;z-index:2}
.proof .section-title{max-width:26ch;color:#fff}
.proof .section-title span{color:var(--accent-on-dark)}
.proof .section-sub{color:rgba(255,255,255,.66)}
.proof .eyebrow--rule{color:var(--accent-on-dark)}
.proof .eyebrow--rule::after{background:var(--accent-on-dark)}
/* Desktop only: once .section-head stacks, a flex-basis is read as a height
   and leaves a 420px hole under the subtitle. */
@media (min-width:992px){
  .proof .section-sub{flex-basis:420px}
}

.proof-card{
  height:100%;
  display:flex;
  flex-direction:column;
  padding:34px 32px 30px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.07);
  box-shadow:0 14px 40px rgba(2,20,36,.18);
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease,background .3s ease;
}
.proof-card:hover{
  transform:translateY(-5px);
  border-color:rgba(127,224,200,.45);
  background:rgba(255,255,255,.11);
  box-shadow:0 22px 50px rgba(2,20,36,.26);
}
.proof-card__icon{
  display:flex;align-items:center;justify-content:center;line-height:1;
  width:60px;height:60px;
  margin-bottom:24px;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:var(--accent-on-dark);
  font-size:24px;
}
.proof-card__icon > i{display:block;line-height:1}
.proof-card__label{
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-on-dark);
  margin-bottom:8px;
}
.proof-card h3{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:#fff;
  margin-bottom:14px;
}
.proof-card__rule{
  display:block;
  width:34px;height:3px;
  border-radius:2px;
  margin-bottom:18px;
  background:var(--grad-accent);
}
.proof-card__text{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.6;
  color:rgba(255,255,255,.66);
  margin-bottom:26px;
}
.proof-card__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:auto;
  font-size:var(--t-sub);
  font-weight:700;
  color:var(--accent-on-dark);
}
.proof-card__link i{font-size:15px;line-height:1;transition:transform .25s ease}
.proof-card__link:hover i{transform:translateX(4px)}

/* --- the badge row --- */
.proof-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:36px;
}
/* All five read as one band across the foot of the panel, so they are sized to
   sit on a single line on a desktop: the padding, the gaps and the tracking are
   what came down, not the words. Below that width they still wrap rather than
   shrink into something unreadable. */
.proof-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* the row is as wide as the three cards above it, so the pills grow into it
     and the last one finishes flush with the last card rather than stopping
     short — the padding below is the floor, the growth is the rest */
  flex:1 1 auto;
  gap:8px;
  padding:11px 16px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  font-size:14px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,.8);
  transition:border-color .25s ease,transform .25s ease,color .25s ease,background .25s ease;
}
/* the label is one flex item, so the subscript flows inline; only the uppercase
   tracking has to be taken off it or CO2 reads with a gap before the 2 */
.proof-tag sub{letter-spacing:normal;font-size:.72em}
.proof-tag i{
  font-size:15px;
  line-height:1;
  color:var(--accent-on-dark);
}
/* Once the row has to wrap, growing the pills would leave a lone one stretched
   across the whole width. Below the width where all five fit, they keep their
   own size and simply wrap — and the group is centred, or the short last rows
   leave a ragged staircase down the left edge. */
@media (max-width:1199.98px){
  .proof-tag{flex:0 1 auto}
  .proof-tags{justify-content:center}
}
.proof-tag:hover{
  transform:translateY(-2px);
  border-color:rgba(127,224,200,.5);
  background:rgba(255,255,255,.12);
  color:#fff;
}
/* they are list items, not links: on a touch screen the lift fires on tap and
   reads as a button that does nothing */
@media (hover:none){
  .proof-tag:hover{transform:none}
}

/* ---------- 9c. Delivery date ----------
   The date the whole timeline has been running towards, beside a leaf of the
   January 2027 calendar with the first ringed. The weekday grid is the real
   one — 1 January 2027 falls on a Friday — so the artefact carries the fact
   rather than decorating it. */
.delivery{background:var(--tint)}
.delivery__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:64px;
}
.delivery__lead{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
  max-width:46ch;
  margin-bottom:26px;
}

/* the count is written by main.js, so it never shows a stale number */
.delivery__count{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
  padding-top:22px;
  margin-bottom:28px;
  border-top:1px solid var(--line);
}
.delivery__count-num{
  font-size:var(--t-figure);
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.delivery__count-label{
  font-size:var(--t-ui);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--body);
}
.delivery__actions{display:flex;flex-wrap:wrap;gap:12px}

/* a ghost pill for light bands — the existing one is built for the navy */
.btn-pill--ghost-ink{
  color:var(--ink);
  border:1px solid rgba(15,44,77,.22);
  background:#fff;
}
.btn-pill--ghost-ink:hover{
  transform:translateY(-2px);
  border-color:rgba(15,44,77,.4);
  box-shadow:0 8px 20px rgba(10,45,80,.1);
}

/* --- the calendar leaf --- */
.leaf{
  margin:0;
  padding:28px 30px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-card);
  max-width:460px;
  margin-inline:auto;
}
.leaf__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding-bottom:16px;
  margin-bottom:16px;
  border-bottom:1px solid var(--line);
}
.leaf__month{
  font-size:var(--t-title);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}
.leaf__year{
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-ink-2);
}
.leaf__grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:4px;
}
.leaf__dow{
  padding-bottom:8px;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.12em;
  text-align:center;
  color:var(--ink-soft);
}
.leaf__day,
.leaf__pad{
  position:relative;
  display:grid;
  place-items:center;
  aspect-ratio:1;
  font-size:var(--t-ui);
  font-weight:500;
  color:var(--body);
  font-variant-numeric:tabular-nums;
}
.leaf__day--mark{
  font-size:var(--t-sub);
  font-weight:800;
  color:var(--ink);
}
.leaf__day--mark span{position:relative;z-index:1}
.leaf__ring{
  position:absolute;
  inset:-2px;
  width:calc(100% + 4px);
  height:calc(100% + 4px);
  overflow:visible;
}
.leaf__ring circle{
  fill:rgba(23,176,166,.09);
  stroke:var(--accent-2);
  stroke-width:2;
  stroke-linecap:round;
  stroke-dasharray:120;
  stroke-dashoffset:120;
  transform:rotate(-96deg);
  transform-origin:50% 50%;
  transition:stroke-dashoffset 1s cubic-bezier(.16,.84,.36,1) .25s;
}
.leaf.is-visible .leaf__ring circle{stroke-dashoffset:0}
.leaf__foot{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--line);
  font-size:var(--t-ui);
  font-weight:600;
  color:var(--body);
}

/* the year the timeline is heading for, not one it has reached */
.timeline-item--next .timeline-year{color:var(--accent-ink-2)}
.timeline-item--next .timeline-dot{
  border-style:dashed;
  border-color:var(--accent-deep);
}

@media (prefers-reduced-motion:reduce){
  .leaf__ring circle{transition:none;stroke-dashoffset:0}
}

@media (max-width:991px){
  .delivery__grid{grid-template-columns:1fr;gap:36px}
  .leaf{margin-inline:0}
}

@media (max-width:575px){
  .leaf{padding:22px 20px 20px}
  .leaf__grid{gap:2px}
  .delivery__actions .btn-pill{flex:1 1 auto;justify-content:center}
}

/* ---------- 10. Partners ---------- */
.partners{padding:14px 0 44px;background:var(--white)}
.partner-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
  margin-top:18px;
}
.partner-row img{
  height:38px;
  width:auto;
  object-fit:contain;
  opacity:.92;
  transition:opacity .3s ease,transform .3s ease;
  mix-blend-mode:multiply;
}
.partner-row img:hover{opacity:1;transform:translateY(-2px)}

/* ---------- 10b. Blog ----------
   Cards are injected by main.js from blog.php; the whole section is hidden
   until at least one post is live. */
.blog-section{background:var(--tint)}
.blog-section--all{padding-top:0}
.blog-empty{
  margin:0;
  padding:60px 0;
  text-align:center;
  font-size:var(--t-sub);
  color:var(--muted);
}
.blog-section[hidden]{display:none}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:26px;
  margin-top:44px;
}

/* on the home page the last row fades out under a View more button, so the
   section reads as an excerpt rather than the whole blog */
/* the home page shows four posts and then points at the rest */
.blog-more{
  display:flex;
  justify-content:center;
  margin-top:34px;
}
.blog-more__link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:var(--t-sub);
  font-weight:700;
  color:var(--accent-ink-2);
}
.blog-more__link i{font-size:15px;line-height:1;transition:transform .25s ease}
.blog-more__link:hover i{transform:translateX(4px)}

.blog-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-card);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.blog-card:hover{
  transform:translateY(-5px);
  border-color:rgba(23,176,166,.35);
  box-shadow:0 18px 40px rgba(10,45,80,.12);
}

.blog-card__media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--tint);
}
.blog-card__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.blog-card:hover .blog-card__media img{transform:scale(1.05)}
.blog-card__placeholder{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,rgba(23,176,166,.14),rgba(75,180,83,.12));
  color:var(--accent-deep);
  font-size:34px;
}

.blog-card__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:24px 24px 26px;
}
.blog-card__meta{
  margin:0 0 10px;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-ink-2);
}
.blog-card__title{
  margin:0 0 10px;
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
}
.blog-card__sub{
  margin:0 0 20px;
  font-size:var(--t-ui);
  line-height:1.65;
  color:var(--body);
}
.blog-card__more{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin-top:auto;
  padding:0;
  border:0;
  background:none;
  font-family:inherit;
  font-size:var(--t-ui);
  font-weight:700;
  color:var(--accent-ink-2);
  cursor:pointer;
  align-self:flex-start;
}
.blog-card__more i{font-size:15px;line-height:1;transition:transform .25s ease}
.blog-card__more:hover i{transform:translateX(4px)}

/* --- the post itself, out of the right-hand edge --- */
.post-drawer{
  position:fixed;
  inset:0;
  z-index:1500;
  pointer-events:none;
}
.post-drawer__backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,34,58,.5);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .35s ease;
}
.post-drawer.is-open{pointer-events:auto}
.post-drawer.is-open .post-drawer__backdrop{opacity:1}

.post-drawer__panel{
  position:absolute;
  top:0;right:0;bottom:0;
  width:min(620px,100%);
  overflow-y:auto;
  background:#fff;
  box-shadow:-24px 0 60px rgba(4,34,58,.22);
  transform:translateX(100%);
  transition:transform .4s cubic-bezier(.22,.61,.36,1);
  outline:none;
}
.post-drawer.is-open .post-drawer__panel{transform:none}

.post-drawer__close{
  position:absolute;
  top:18px;right:18px;
  z-index:2;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  background:rgba(255,255,255,.9);
  color:var(--ink);
  font-size:15px;
  cursor:pointer;
  transition:background .2s ease,transform .2s ease;
}
.post-drawer__close:hover{background:#fff;transform:scale(1.05)}

.post-drawer__media{aspect-ratio:16/9;overflow:hidden;background:var(--tint)}
.post-drawer__media img{width:100%;height:100%;object-fit:cover}

.post-drawer__body{padding:34px 38px 48px}
.post-drawer__meta{
  margin:0 0 12px;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-deep);
}
.post-drawer__title{
  margin:0 0 12px;
  font-size:calc(26px * var(--fs));
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--ink);
}
.post-drawer__sub{
  margin:0 0 24px;
  font-size:var(--t-sub);
  line-height:1.6;
  color:var(--ink-soft);
}
.post-drawer__text p{
  margin:0 0 18px;
  font-size:var(--t-sub);
  line-height:1.75;
  color:var(--body);
}
.post-drawer__text p:last-child{margin-bottom:0}

/* the page behind a post does not scroll */
body.has-drawer{overflow:hidden}

@media (max-width:575px){
  .post-drawer__body{padding:28px 22px 40px}
  .post-drawer__title{font-size:calc(22px * var(--fs))}
}

@media (prefers-reduced-motion:reduce){
  .post-drawer__panel,
  .post-drawer__backdrop{transition:none}
}

/* ---------- 11. CTA ---------- */
.cta-section{padding:var(--sec-pad) 0;background:var(--white)}

.cta-band{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:340px;
  border-radius:22px;
  background:linear-gradient(115deg,#f4f9fc 0%,#eaf3f9 52%,#e4eff6 100%);
  box-shadow:0 18px 50px rgba(15,60,95,.07);
}

.cta-inner{
  position:relative;
  z-index:2;
  flex:0 0 52%;
  max-width:52%;
  padding:52px 40px 52px 56px;
}
.cta-rule{
  display:block;
  width:34px;height:3px;
  border-radius:2px;
  background:var(--accent-2);
  margin-bottom:26px;
}
.cta-inner h2{
  font-size:var(--t-title);
  font-weight:700;
  line-height:var(--t-title-lh);
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:18px;
}
.cta-inner h2 span{
  background:linear-gradient(95deg,#2b86d4 0%,#17b0a6 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.cta-inner p{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
  max-width:38ch;
  margin-bottom:30px;
}

/* The teal that reads as a button. --accent-2 is a 2.69 : 1 colour under white
   text and belongs to backgrounds and decoration; anything carrying words uses
   the ink teal, which measures 5.18 : 1. */
.btn-pill--teal{
  padding:15px 28px;
  font-size:var(--t-ui);
  color:#fff;
  background:var(--accent-ink-2);
  box-shadow:0 10px 24px rgba(12,122,116,.26);
}
.btn-pill--teal:hover{
  transform:translateY(-2px);
  background:#0a6a65;
  box-shadow:0 14px 30px rgba(12,122,116,.34);
}

/* photo bleeds off the right edge and dissolves into the panel */
.cta-media{
  position:absolute;
  z-index:1;
  right:0;top:0;bottom:0;
  width:56%;
}
.cta-media img{
  width:100%;height:100%;
  object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 46%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 22%,#000 46%);
}

/* ---------- 12. Footer ---------- */
.site-footer{
  position:relative;
  background:var(--tint);
  padding:70px 0 0;
  border-top:1px solid #eef3f7;
}

/* --- top band: brand + subscribe + badges --- */
.footer-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:48px;
  padding-bottom:64px;
}
.footer-intro{flex:1 1 460px;max-width:560px}
.footer-brand{display:inline-block;margin-bottom:22px}
.footer-brand img{height:52px;width:auto}

.footer-blurb{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
  max-width:46ch;
  margin-bottom:0;
}

.footer-subscribe{
  display:flex;
  align-items:stretch;
  gap:14px;
  max-width:530px;
  margin-bottom:28px;
}
.footer-subscribe input{
  flex:1 1 auto;
  min-width:0;
  padding:14px 18px;
  font-family:inherit;
  font-size:var(--t-ui);
  color:var(--ink);
  background:#fff;
  border:1px solid #dfe7ee;
  border-radius:10px;
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.footer-subscribe input::placeholder{color:var(--muted)}
.footer-subscribe input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(75,180,83,.14);
}
.footer-subscribe__btn{
  flex:none;
  padding:14px 26px;
  font-family:inherit;
  font-size:var(--t-ui);
  font-weight:600;
  color:#fff;
  background:var(--accent-ink);
  border:0;
  border-radius:10px;
  cursor:pointer;
  transition:background .22s ease,transform .22s ease;
}
.footer-subscribe__btn:hover{background:var(--accent-ink-2);transform:translateY(-1px)}

.footer-social{display:flex;flex-wrap:wrap;gap:12px}
.footer-social a{
  width:38px;height:38px;
  border-radius:50%;
  background:#101a24;
  color:#fff;
  display:flex;align-items:center;justify-content:center;line-height:1;
  font-size:17px;
  transition:background .25s ease,transform .25s ease;
}
.footer-social a:hover{background:var(--accent);transform:translateY(-2px)}

/* right side of the top band: newsletter + social */
.footer-connect{
  flex:1 1 460px;
  max-width:560px;
  padding-top:34px;
}

/* --- icons that sit alone inside a round badge ---
   Bootstrap Icons ships `vertical-align:-.125em` on every glyph, which is what
   seats an icon neatly beside a run of text. Inside a badge there is no text to
   seat it against, so that shift just drops the glyph below the centre of the
   circle — about 2px at 17px. These holders centre the glyph themselves and
   take the shift back off. */
.top-bar__social a i,
.footer-social a i,
.round-arrow i,
.to-top i,
.proof-card__icon i,
.contact-card__icon i,
.about-badge__icon i,
.about-stat__icon i,
.role-card__icon i{
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.top-bar__social a i::before,
.footer-social a i::before,
.round-arrow i::before,
.to-top i::before,
.proof-card__icon i::before,
.contact-card__icon i::before,
.about-badge__icon i::before,
.about-stat__icon i::before,
.role-card__icon i::before{
  vertical-align:0;
  line-height:1;
}

/* --- link columns --- */
.footer-cols{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:36px 30px;
  padding-bottom:64px;
}
.site-footer h2{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
  margin-bottom:22px;
}
.footer-links{display:grid;gap:14px}
.footer-links a{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.5;
  color:var(--body);
  transition:color .2s ease;
}
.footer-links a:hover{color:var(--accent)}

/* --- bottom bar --- */
.footer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  flex-wrap:wrap;
  padding:26px 0 30px;
  border-top:1px solid #e3ebf2;
}
.footer-legal{
  flex:0 0 auto;
  order:1;
  font-size:var(--t-ui);
  line-height:1.7;
  color:var(--body);
}
/* row 1, right — sits opposite the copyright */
.footer-credit{
  flex:0 0 auto;
  order:2;
  margin-left:auto;
  /* small inset so the floating back-to-top never lands on it */
  padding-right:40px;
  font-size:var(--t-ui);
  color:var(--body);
}
.footer-credit a{
  color:var(--ink);
  font-weight:600;
  transition:color .2s ease;
}
.footer-credit a:hover{color:var(--accent)}
.footer-policy{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:center;
  flex:1 0 100%;
  order:3;
  margin-top:14px;
}
.footer-policy a{
  font-size:var(--t-ui);
  color:var(--body);
  padding:0 12px;
  transition:color .2s ease;
}
.footer-policy a:not(:last-child){border-right:1px solid #d7e1e9}
.footer-policy a:last-child{padding-right:0}
.footer-policy a:hover{color:var(--accent)}

/* --- form result toast (see main.js) --- */
.form-toast{
  position:fixed;
  left:50%;bottom:26px;
  z-index:1200;
  max-width:min(560px,calc(100vw - 40px));
  padding:16px 24px;
  border-radius:999px;
  background:var(--ink);
  color:#fff;
  font-size:var(--t-ui);
  font-weight:600;
  line-height:1.4;
  text-align:center;
  box-shadow:0 16px 40px rgba(10,45,80,.28);
  opacity:0;
  transform:translate(-50%,14px);
  transition:opacity .3s ease,transform .3s ease;
}
.form-toast.is-visible{opacity:1;transform:translate(-50%,0)}
.form-toast--error{background:#a8324a}

/* --- back to top --- */
.to-top{
  position:fixed;
  right:26px;bottom:26px;
  z-index:900;
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;line-height:1;
  background:#fff;
  border:1px solid var(--accent);
  color:var(--accent);
  font-size:calc(17px * var(--fs));
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  box-shadow:0 10px 26px rgba(15,60,95,.13);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease,background .22s ease,color .22s ease;
}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--accent);color:#fff}

/* ---------- 12b. Cookie gate ----------
   The top bar's twin, pinned to the bottom of the viewport over a scrim that
   holds the page until Accept or Decline is chosen. Injected by main.js on
   first visit and removed once a choice is stored. */
.consent-scrim{
  position:fixed;
  inset:0;
  z-index:1001;
  background:rgba(4,34,58,.55);
  backdrop-filter:blur(2px);
  opacity:0;
  transition:opacity .35s ease;
}
.consent-scrim.is-visible{opacity:1}

/* Nothing behind the gate scrolls or answers to a click. Locking the scroll
   takes the scrollbar away with it, so the width it held is given back as
   padding — the document and the two fixed bars keep the width they had, and
   answering the question does not slide the page sideways. main.js measures
   the scrollbar into --sbw; a browser with overlay scrollbars measures 0. */
body.is-consent-gated{overflow:hidden;padding-right:var(--sbw,0px)}
body.is-consent-gated .top-bar,
body.is-consent-gated .site-header{padding-right:var(--sbw,0px)}
.consent-bar{
  position:fixed;
  inset:auto 0 0 0;
  z-index:1003;
  padding:16px 0;
  background:#04223a;
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(12px);
  transform:translateY(100%);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.consent-bar.is-visible{transform:none}

.consent-bar__inner{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
}

.consent-bar__text{
  margin:0;
  min-width:0;
  color:rgba(255,255,255,.82);
  font-size:calc(13px * var(--fs));
  font-weight:500;
  line-height:1.6;
}
.consent-bar__icon{
  width:calc(18px * var(--fs));
  height:calc(18px * var(--fs));
  margin-right:10px;
  vertical-align:-.22em;
  color:var(--accent);
  flex:0 0 auto;
}
.consent-bar__text a{
  color:var(--accent-on-dark);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.consent-bar__text a:hover{color:#fff}

.consent-bar__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.consent-btn{
  border:1px solid transparent;
  border-radius:999px;
  padding:12px 22px;
  min-height:44px;
  font-family:inherit;
  font-size:calc(12.5px * var(--fs));
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.consent-btn--accept{
  background:var(--grad-accent);
  color:var(--white);
}
.consent-btn--accept:hover{transform:translateY(-1px);filter:brightness(1.06)}
.consent-btn--decline{
  background:rgba(255,255,255,.06);
  border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.82);
}
.consent-btn--decline:hover{background:rgba(255,255,255,.12);color:#fff}

/* The bar lies over the page rather than pushing it. Nothing behind the scrim
   scrolls while the question is open, so there is nothing to reserve room for —
   and padding the document or the hero for the bar's height moved the hero's
   own content up, then dropped it back the moment Accept or Decline was
   pressed. The page must look the same before and after the answer. */

/* the back-to-top button steps over the bar while it is up */
body.has-consent-bar .to-top{bottom:calc(26px + var(--consent-h,86px))}

@media (max-width:767px){
  /* 19 % of a 390 px screen was too much for a question with two answers: the
     copy is tightened to two lines and the buttons share one row. */
  .consent-bar{padding:12px 0}
  .consent-bar__inner{flex-direction:column;align-items:stretch;gap:10px}
  .consent-bar__text{font-size:calc(12.5px * var(--fs));line-height:1.45}
  .consent-bar__icon{display:none}
  .consent-bar__actions{justify-content:stretch}
  .consent-btn{flex:1 1 0}
  body.has-consent-bar .to-top{bottom:calc(18px + var(--consent-h,132px))}
}

@media (prefers-reduced-motion:reduce){
  .consent-bar,
  .consent-scrim{transition:none}
}

/* ---------- 12d. Gold raffle popup ----------
   Opened by the gold pill in the header. Built by main.js from raffle.php: a
   countdown to the next draw on a navy panel, what a winner gets, then the
   winners of every draw already public. Same shell as the welcome popup so the
   two feel like one family. */
.raffle{
  position:fixed;
  inset:0;
  z-index:1500;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
.raffle.is-open{opacity:1;pointer-events:auto}

.raffle__backdrop{
  position:absolute;
  inset:0;
  background:rgba(4,34,58,.6);
  backdrop-filter:blur(3px);
}

.raffle__card{
  position:relative;
  width:min(700px,100%);
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  padding:38px 38px 32px;
  border-radius:24px;
  background:#fff;
  box-shadow:0 30px 80px rgba(4,34,58,.34);
  transform:translateY(18px) scale(.98);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.raffle.is-open .raffle__card{transform:none}
/* the gold edge is the only badge the popup needs */
.raffle__card::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold-mid) 50%,var(--gold-light) 100%);
}

.raffle__close{
  position:absolute;
  top:16px;right:16px;
  width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:#fff;
  color:var(--ink-soft);
  font-size:15px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.raffle__close:hover{background:var(--tint);color:var(--ink);border-color:#c3d3df}

.raffle__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:6px 13px;
  border-radius:999px;
  background:rgba(184,134,43,.12);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#8a6318;
}
.raffle__eyebrow i{font-size:13px;letter-spacing:0}

.raffle__title{
  margin:0 0 12px;
  padding-right:44px;
  font-size:calc(26px * var(--fs));
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.02em;
  color:var(--ink);
}
.raffle__lead{
  margin:0 0 22px;
  font-size:var(--t-sub);
  line-height:1.65;
  color:var(--body);
}

/* --- the countdown --- */
.raffle__clock{
  display:flex;
  align-items:center;
  gap:22px;
  padding:22px 24px;
  margin-bottom:24px;
  border-radius:var(--radius-lg);
  background:linear-gradient(140deg,var(--navy-700) 0%,var(--navy-900) 100%);
  text-align:center;
}
/* the prize itself, beside the clock counting down to it */
.raffle__coin{
  flex:0 0 auto;
  width:min(160px,26vw);
  height:auto;
  filter:drop-shadow(0 8px 22px rgba(184,134,43,.35));
}
.raffle__clock-main{flex:1 1 auto;min-width:0}
.raffle__clock-label{
  display:block;
  margin-bottom:16px;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}
.raffle__units{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.raffle__unit{
  padding:14px 6px 11px;
  border:1px solid rgba(242,212,136,.24);
  border-radius:var(--radius);
  background:rgba(255,255,255,.05);
}
.raffle__unit strong{
  display:block;
  font-size:32px;
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--gold-light);
  font-variant-numeric:tabular-nums;
}
.raffle__unit span{
  display:block;
  margin-top:4px;
  font-size:var(--t-micro);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.raffle__at{
  display:block;
  font-size:calc(var(--t-ui) - 1px);
  color:rgba(255,255,255,.66);
}
/* no date set yet: the panel keeps its place but says so plainly */
.raffle__clock--waiting .raffle__at{max-width:46ch;margin:0 auto}

/* --- what a winner gets --- */
.raffle__facts{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:grid;
  gap:12px;
}
.raffle__facts li{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:15px 17px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--tint);
}
.raffle__facts strong{
  display:block;
  margin-bottom:3px;
  font-size:var(--t-ui);
  color:var(--ink);
}
.raffle__fact-text{
  display:block;
  font-size:var(--t-ui);
  line-height:1.6;
  color:var(--body);
}
.raffle__fact-icon{
  flex:0 0 36px;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(184,134,43,.14);
  color:#8a6318;
  font-size:17px;
  line-height:1;
}

/* --- the winners themselves --- */
.raffle__winners-title{
  margin:0 0 12px;
  font-size:var(--t-title);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--ink);
}
.raffle__none{
  margin:0 0 20px;
  padding:20px;
  border:1px dashed var(--line);
  border-radius:var(--radius);
  font-size:var(--t-ui);
  line-height:1.6;
  color:var(--muted);
  text-align:center;
}

/* one draw folds open; the newest starts open, the older ones closed */
.raffle__draw{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.raffle__draw + .raffle__draw{margin-top:10px}
.raffle__draw summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  background:var(--tint);
  cursor:pointer;
  list-style:none;
}
.raffle__draw summary::-webkit-details-marker{display:none}
.raffle__draw-no{
  font-size:var(--t-ui);
  font-weight:700;
  color:var(--ink);
}
.raffle__draw-at{
  flex:1 1 auto;
  font-size:calc(var(--t-ui) - 1px);
  color:var(--muted);
}
.raffle__draw summary i{
  font-size:12px;
  color:var(--muted);
  transition:transform .2s ease;
}
.raffle__draw[open] summary i{transform:rotate(180deg)}

.raffle__list{
  list-style:none;
  margin:0;
  padding:6px 16px 12px;
}
.raffle__winner{
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.raffle__winner:last-child{border-bottom:0}
.raffle__place{
  flex:0 0 30px;
  width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(140deg,var(--gold) 0%,var(--gold-mid) 100%);
  font-size:13px;
  font-weight:800;
  color:var(--gold-ink);
}
.raffle__who{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.raffle__who strong{
  font-size:var(--t-ui);
  font-weight:700;
  color:var(--ink);
}
.raffle__who > span{
  font-size:calc(var(--t-ui) - 2px);
  color:var(--muted);
  overflow-wrap:anywhere;
}
.raffle__prize{
  flex:0 0 auto;
  padding:5px 11px;
  border-radius:999px;
  background:rgba(75,180,83,.14);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#26743a;
}

/* --- the way in, for anybody not in the hat yet --- */
.raffle__foot{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.raffle__pool{
  flex:1 1 260px;
  margin:0;
  font-size:calc(var(--t-ui) - 1px);
  line-height:1.6;
  color:var(--body);
}
.raffle__foot .btn-pill{flex:0 0 auto}

@media (max-width:639px){
  .raffle{padding:14px}
  .raffle__card{padding:30px 20px 24px;border-radius:20px}
  .raffle__title{font-size:calc(21px * var(--fs))}
  /* the coin sits above the clock rather than squeezing it */
  .raffle__clock{flex-direction:column;gap:14px;padding:18px 14px}
  .raffle__coin{width:112px}
  .raffle__clock-main{width:100%}
  .raffle__units{gap:7px}
  .raffle__unit{padding:11px 4px 9px}
  .raffle__unit strong{font-size:24px}
  .raffle__unit span{font-size:9px;letter-spacing:.08em}
  .raffle__foot .btn-pill{flex:1 1 100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .raffle,
  .raffle__card{transition:none}
}

/* ---------- 13. Product page (stove.html) ---------- */
/* Same two type tiers as every other section: 24px title, 18px subtitle/body. */

.page-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  min-height:560px;
  overflow:hidden;
  background:var(--navy-900);
}
.page-hero__media{
  position:absolute;
  inset:0;
  background:url("../images/hero-kitchen.webp") center center/cover no-repeat;
}
.page-hero--tuktuk .page-hero__media{
  background-image:url("../images/app-2.webp");
}
.page-hero__media::after{
  content:"";
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(4,34,58,.94) 0%,rgba(5,36,65,.86) 34%,rgba(0,0,0,.42) 62%,rgba(0,0,0,0) 92%),
    linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 38%);
}
.page-hero__inner{
  position:relative;
  z-index:2;
  padding-top:calc(var(--header-offset) + 54px);
  padding-bottom:72px;
}

.breadcrumb-x{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-bottom:26px;
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.breadcrumb-x a{color:rgba(255,255,255,.78);transition:color .2s ease}
.breadcrumb-x a:hover{color:var(--accent)}
.breadcrumb-x [aria-current]{color:var(--accent)}

.page-hero__title{
  font-size:calc(clamp(32px,3.6vw,46px) * var(--fs));
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.03em;
  color:#fff;
  margin-bottom:20px;
}
.page-hero__text{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:rgba(255,255,255,.8);
  max-width:52ch;
  margin-bottom:30px;
}
.page-hero__actions{display:flex;flex-wrap:wrap;gap:12px}

/* --- shared blocks --- */
.prose-block{margin-bottom:20px;max-width:52ch}

.media-frame{
  position:relative;
  margin:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--tint);
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.media-frame img{width:100%;height:auto;display:block}
.media-frame figcaption{
  padding:16px 22px;
  font-size:var(--t-sub);
  line-height:1.5;
  color:var(--body);
  border-top:1px solid var(--line);
  background:#fff;
}

/* --- feature cards --- */
.icon-card{
  height:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 30px;
  box-shadow:var(--shadow-card);
  transition:transform .3s ease,box-shadow .3s ease;
}
.icon-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(10,45,80,.12)}
.icon-card__icon{
  display:flex;align-items:center;justify-content:center;
  line-height:1;
  width:54px;height:54px;
  margin-bottom:20px;
  border-radius:50%;
  background:rgba(23,176,166,.12);
  color:var(--accent-deep);
  font-size:22px;
}
.icon-card h3{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
  margin-bottom:8px;
}
.icon-card p{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.6;
  color:var(--body);
}

/* --- numbered steps --- */
.step-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}
.step-card{
  position:relative;
  padding:30px 26px 28px;
  border-radius:var(--radius-lg);
  background:var(--tint);
  border:1px solid var(--line);
}
.step-card__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  width:44px;height:44px;
  margin-bottom:18px;
  border-radius:50%;
  background:var(--grad-accent);
  color:var(--white);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.06em;
}
.step-card h3{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
  margin-bottom:8px;
}
.step-card p{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.6;
  color:var(--body);
}

/* --- gallery --- */
.shot{
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  transition:transform .3s ease,box-shadow .3s ease;
}
.shot:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(10,45,80,.14)}
.shot img{width:100%;height:auto;display:block;aspect-ratio:4/3;object-fit:cover}
.shot figcaption{
  padding:14px 18px;
  font-size:var(--t-sub);
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
  border-top:1px solid var(--line);
}

/* --- specification table --- */
/* --- specification groups --- */
.spec-groups{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:44px 60px;
}
.spec-group__title{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
  padding-bottom:13px;
  border-bottom:2px solid var(--accent-2);
}
.spec-list{margin:0}
.spec-row{
  padding:15px 0;
  border-bottom:1px solid var(--line);
}
.spec-row:last-child{border-bottom:0}
.spec-row dt{
  font-size:var(--t-ui);
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.4;
  color:var(--muted);
  margin-bottom:5px;
}
.spec-row dd{
  margin:0;
  font-size:var(--t-sub);
  font-weight:600;
  line-height:1.5;
  color:var(--ink);
}
.spec-extras{margin-top:60px}
.spec-extras .side-panel{height:100%}

/* --- side panels beside the table --- */
.side-panel{
  padding:30px 28px;
  border-radius:var(--radius-lg);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
}
.side-panel + .side-panel{margin-top:24px}
.side-panel h3{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
  margin-bottom:18px;
}
.side-panel .check-list{margin-bottom:0}
.side-panel--accent{
  background:linear-gradient(150deg,#f1fbf8 0%,#e8f5fb 100%);
  border-color:rgba(23,176,166,.28);
}

/* --- pricing band (product pages) --- */
.price-band{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.6fr);
  border-radius:22px;
  overflow:hidden;
  background:linear-gradient(115deg,var(--navy-700) 0%,var(--navy-600) 48%,#0a4a52 100%);
  box-shadow:0 22px 54px rgba(6,26,40,.20);
}
.price-band__head{
  padding:46px 44px 48px;
  border-right:1px solid rgba(255,255,255,.15);
}
.price-band__label{
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-on-dark);
  margin:0 0 18px;
}
.price-band__figure{
  font-size:var(--t-figure);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  color:#fff;
  margin:0 0 14px;
}
.price-band__note{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.6;
  color:rgba(255,255,255,.78);
  max-width:24ch;
  margin:0;
}
.price-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.price-step{
  padding:46px 30px 48px;
  border-left:1px solid rgba(255,255,255,.15);
}
.price-step:first-child{border-left:0}
.price-step__when{
  display:block;
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-on-dark);
}
.price-step__value{
  display:block;
  font-size:var(--t-title);
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
  color:#fff;
  margin:12px 0 9px;
}
.price-step__text{
  display:block;
  font-size:var(--t-ui);
  font-weight:400;
  line-height:1.6;
  color:rgba(255,255,255,.78);
}

/* --- the loan offer, as terms under the band --- */
.price-offer{
  margin-top:22px;
  padding:20px 24px 18px;
  border:1px solid rgba(23,176,166,.3);
  border-radius:var(--radius);
  background:linear-gradient(100deg,rgba(75,180,83,.07) 0%,rgba(23,176,166,.07) 100%);
}
.price-offer__title{
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin-bottom:14px;
}
.price-offer__facts{
  display:flex;
  flex-wrap:wrap;
  gap:12px 56px;
  margin:0 0 12px;
}
.price-offer__fact dt{
  font-size:var(--t-ui);
  font-weight:600;
  letter-spacing:.02em;
  color:var(--muted);
  margin-bottom:3px;
}
.price-offer__fact dd{
  margin:0;
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
}
.price-offer__left{color:var(--accent-ink);white-space:nowrap}
.price-offer__left[hidden]{display:none}
.price-offer__note{
  font-size:var(--t-ui);
  font-weight:400;
  line-height:1.6;
  color:var(--body);
  max-width:62ch;
  margin:0;
}
.price-offer__note[hidden]{display:none}

@media (max-width:575px){
  .price-offer{padding:18px 18px 16px}
  .price-offer__facts{gap:12px 28px}
}

/* --- instalment plan and the booking call to action under the band --- */
.price-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px 56px;
  margin-top:40px;
  padding-top:36px;
  border-top:1px solid var(--line);
}
.price-emi{max-width:44ch}
.price-emi__figure{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px;
  margin:0 0 12px;
}
.price-emi__value{
  font-size:var(--t-figure);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--accent-ink);
}
.price-emi__unit{
  font-size:var(--t-sub);
  font-weight:600;
  color:var(--ink);
}
.price-emi__text{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.6;
  color:var(--body);
  margin:0;
}
.price-act{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:16px;
  max-width:36ch;
}
.price-legal{
  font-size:var(--t-ui);
  font-weight:400;
  line-height:1.6;
  color:var(--muted);
  margin:0;
}

/* --- FAQ --- */
.faq-grid{
  display:grid;
  grid-template-columns:1.2fr 0.8fr;
  gap:36px;
  /* the picture is as tall as the questions beside it, whatever is open: with
     one answer at a time the list is short, and a fixed portrait crop hung well
     below the last question */
  align-items:stretch;
}
.faq{
  display:grid;
  gap:14px;
  max-width:100%;
}
.faq-media{
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
  border:1px solid var(--line);
  background:#fff;
}
.faq-media img{
  width:100%;
  height:100%;
  min-height:320px;
  display:block;
  object-fit:cover;
}
@media (max-width:991px){
  .faq-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .faq-media{
    max-width:440px;
    margin:0 auto;
  }

  /* stacked, there is nothing to match, so the picture keeps its own shape */
  .faq-media img{
    height:auto;
    aspect-ratio:3/4;
  }
}
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  padding:4px 26px;
  box-shadow:var(--shadow-card);
  /* the answer is revealed by animating this box's height, so anything still
     folded away has to stay inside it */
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  cursor:pointer;
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.45;
  color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none}
/* plain "+" that rotates into an "×" — no icon font dependency */
.faq-item summary::after{
  content:"+";
  flex:none;
  width:26px;
  font-size:24px;
  font-weight:400;
  line-height:1.1;
  text-align:center;
  color:var(--accent-deep);
  transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
/* while an answer is opening or closing it fades with the height, which is
   what stops the column beside it looking like it flinched */
.faq-item p{
  transition:opacity .18s ease;
  padding:0 0 22px;
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
  max-width:66ch;
}

/* ---------- 13b. Contact page (contact.html) ---------- */

.page-hero--contact .page-hero__media{
  background-image:url("../images/hero-city.webp");
}

/* --- contact detail cards --- */
/* icon stacked above the text: the copy gets the full card width, so long
   values such as the email address never run into the card edge */
.contact-card{
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 26px;
  box-shadow:var(--shadow-card);
  transition:transform .3s ease,box-shadow .3s ease;
}
.contact-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,45,80,.12)}
.contact-card__icon{
  flex:none;
  display:flex;align-items:center;justify-content:center;
  line-height:1;
  width:52px;height:52px;
  border-radius:50%;
  background:rgba(23,176,166,.12);
  color:var(--accent-deep);
  font-size:21px;
}
.contact-card__body{width:100%;min-width:0}
.contact-card h3{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
  margin-bottom:6px;
}
.contact-card p,
.contact-card address{
  font-size:var(--t-sub);
  font-weight:400;
  font-style:normal;
  line-height:1.55;
  color:var(--body);
  margin:0;
  overflow-wrap:anywhere;
}
.contact-card a{color:var(--body);transition:color .2s ease}
.contact-card a:hover{color:var(--accent-deep)}

/* --- enquiry form --- */
.form-panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:38px 36px;
  box-shadow:var(--shadow-card);
}
.form-x{display:grid;gap:20px}
/* align-content:start stops a control being stretched to fill a row made
   taller by a neighbour that carries a hint line under it */
.field{display:grid;gap:8px;align-content:start}
.field label{
  font-size:var(--t-sub);
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}
.field label .req{color:var(--accent-deep)}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:14px 16px;
  font-family:inherit;
  font-size:var(--t-sub);
  line-height:1.5;
  color:var(--ink);
  background:#fff;
  border:1px solid #dfe7ee;
  border-radius:var(--radius-sm);
  outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.field textarea{resize:vertical;min-height:150px}

/* --- the dropdowns ---
   Left to itself a select wears the browser's own arrow, which sits hard
   against the text on one engine and floats in a grey well on another. One
   chevron of ours instead, and the padding to keep the answer clear of it. */
.field select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23768ba0'%3E%3Cpath d='M3.2 5.6a1 1 0 0 1 1.4 0L8 9l3.4-3.4a1 1 0 1 1 1.4 1.4l-4.1 4.1a1 1 0 0 1-1.4 0L3.2 7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:14px 14px;
  cursor:pointer;
  text-overflow:ellipsis;
}
/* the option list is the browser's; only its type is ours to set */
.field select option{font-size:var(--t-sub);color:var(--ink);padding:6px 8px}
.field select:hover{border-color:#c3d3df}
.field select:disabled{background-color:var(--tint);color:var(--muted);cursor:not-allowed}
/* the native button is kept — it is what opens the picker — but made
   invisible and stretched over the whole control */
.field input[type="date"]:not(.datefield__input)::-webkit-calendar-picker-indicator,
.field input[type="datetime-local"]:not(.datefield__input)::-webkit-calendar-picker-indicator{
  position:absolute;
  inset:0;
  width:auto;height:auto;
  margin:0;padding:0;
  opacity:0;
  cursor:pointer;
}
.field input[type="date"]:not(.datefield__input)::-webkit-datetime-edit,
.field input[type="datetime-local"]:not(.datefield__input)::-webkit-datetime-edit{color:var(--ink)}
.field input[type="date"]:not(.datefield__input):hover,
.field input[type="datetime-local"]:not(.datefield__input):hover{border-color:#c3d3df}

/* Firefox draws its own indicator and has no way to hide it, so it keeps that
   one and goes without ours rather than wearing two */
@supports (-moz-appearance:none){
  .field input[type="date"]:not(.datefield__input),
  .field input[type="datetime-local"]:not(.datefield__input){background-image:none;padding-right:16px}
}

.field input::placeholder,
.field textarea::placeholder{color:var(--muted)}
.field input:focus,
.field select:focus,
.field textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(75,180,83,.14);
}
.field-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

.field-consent{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:12px;
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.55;
  color:var(--body);
}
.field-consent input{
  flex:none;
  width:20px;height:20px;
  margin-top:4px;
  accent-color:var(--accent);
}
.form-x__submit{
  justify-self:start;
  border:0;
  cursor:pointer;
  font-family:inherit;
  color:#fff;
}
/* submit looks locked until the required consent boxes are ticked, but stays
   pressable — pressing it is what marks the missed boxes red */
.btn-pill:disabled,
.btn-pill.is-locked{
  opacity:.45;
  box-shadow:none;
  transform:none;
}
.btn-pill:disabled{cursor:not-allowed}
.btn-pill.is-locked{cursor:pointer}
.btn-pill:disabled:hover,
.btn-pill.is-locked:hover{transform:none;box-shadow:none}
.btn-pill:disabled:hover i,
.btn-pill.is-locked:hover i{transform:none}

.form-note{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.55;
  color:var(--muted);
}

/* --- map --- */
.map-frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow-card);
  background:var(--tint);
}
.map-frame iframe{
  display:block;
  width:100%;
  height:450px;
  border:0;
}

/* ---------- 13c. Application form (apply-*.html) ---------- */

.page-hero--apply .page-hero__media{
  background-image:url("../images/app-2.webp");
}
.page-hero--apply-stove .page-hero__media{
  background-image:url("../images/hero-kitchen.webp");
}
.req{color:var(--accent-deep)}

.apply-form{
  display:grid;
  /* One step is on screen at a time, so this gap only ever separates the
     progress card from that step and the step from the buttons. 44px left a
     visible hole under the card. */
  gap:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:44px 42px;
  box-shadow:var(--shadow-card);
}

.form-step{display:grid;gap:22px}
.form-step__head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.form-step__num{
  flex:none;
  display:flex;align-items:center;justify-content:center;line-height:1;
  width:46px;height:46px;
  border-radius:50%;
  background:var(--grad-accent);
  color:#fff;
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
}
.form-step h2{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
}

.field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;
}
.field-grid .field--wide{grid-column:1 / -1}
/* fieldsets are used for the yes/no groups — strip the browser chrome */
.field-grid fieldset{border:0;margin:0;padding:0;min-width:0}
.field legend{
  float:left;
  width:100%;
  padding:0;
  margin-bottom:8px;
  font-size:var(--t-sub);
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}

.field-hint{
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
/* ---------- what the last action did ----------
   Over the page rather than in it, so a confirmation does not push the thing
   somebody is reading down the screen. */
.toast-stack{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:1700;
  display:flex;
  flex-direction:column;
  gap:10px;
  width:min(420px,calc(100vw - 44px));
  pointer-events:none;
}
.toast{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:15px 17px;
  border:1px solid var(--line);
  border-left:3px solid var(--accent-2);
  border-radius:var(--radius);
  background:#fff;
  box-shadow:0 18px 44px rgba(9,26,44,.22);
  font-size:var(--t-ui);
  line-height:1.55;
  color:var(--body);
  pointer-events:auto;
  animation:toastIn .26s ease both;
}
.toast--error{border-left-color:#c9455c}
.toast--warn{border-left-color:#c98a2b}
.toast > i{flex:none;margin-top:2px;font-size:16px;color:#26743a}
.toast--error > i{color:#c9455c}
.toast--warn > i{color:#c98a2b}
.toast__body{flex:1 1 auto;min-width:0}
.toast__body strong{color:var(--ink)}
.toast__body a{color:inherit;font-weight:700;text-decoration:underline}
.toast__close{
  flex:none;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  margin:-2px -4px 0 0;
  border:0;
  border-radius:50%;
  background:none;
  color:var(--muted);
  font-size:11px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.toast__close:hover{background:var(--tint);color:var(--ink)}
.toast.is-going{animation:toastOut .24s ease both}

@keyframes toastIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}
@keyframes toastOut{
  from{opacity:1;transform:none}
  to{opacity:0;transform:translateY(8px)}
}

@media (max-width:639px){
  .toast-stack{right:12px;left:12px;bottom:12px;width:auto}
}

@media (prefers-reduced-motion:reduce){
  .toast,
  .toast.is-going{animation:none}
}

/* an upload that failed, said against the box it was chosen in.
   The wording is red and carries an icon, so the reason does not rest on colour
   alone for anybody who cannot see it. */
.field-error{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:8px 0 0;
  font-size:var(--t-ui);
  line-height:1.5;
  font-weight:600;
  color:#a8324a;
}
.field-error i{flex:none;margin-top:2px;font-size:15px}
/* the box itself picks up the same red, so the eye finds it before the words.
   It is only ever set while an answer is actually wrong - correcting the field
   takes the class off again and the border returns to the ordinary one. */
.field--error input:not([type="radio"]):not([type="checkbox"]),
.field--error select,
.field--error textarea{
  border-color:rgba(201,69,92,.55);
  background:rgba(201,69,92,.04);
}
.field--error input:not([type="radio"]):not([type="checkbox"]):focus,
.field--error select:focus,
.field--error textarea:focus{
  border-color:#c2445c;
  box-shadow:0 0 0 3px rgba(201,69,92,.14);
}
/* a consent line is the label, so the red goes on the words and the tick */
.field-consent.field--error{color:#a8324a}
.field-consent.field--error input[type="checkbox"]{
  accent-color:#c2445c;
  outline:2px solid rgba(201,69,92,.55);
  outline-offset:2px;
}
/* the reason sits under the line it belongs to, lined up with its words */
.field-consent .field-error{flex-basis:100%;margin:2px 0 0 32px}
.field--error label{color:#a8324a}

.form-info{
  padding:16px 20px;
  border-radius:var(--radius-sm);
  background:var(--tint);
  border:1px solid var(--line);
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.55;
  color:var(--body);
}

/* --- file upload --- */
label.upload{
  display:flex;
  align-items:center;
  gap:12px;
  /* same padding and line box as a text input, so the boxes match height */
  padding:14px 16px;
  line-height:1.5;
  border:1px dashed #cbd8e3;
  border-radius:var(--radius-sm);
  background:#fff;
  cursor:pointer;
  font-size:var(--t-sub);
  font-weight:400;
  color:var(--body);
  transition:border-color .2s ease,background .2s ease;
}
.upload:hover{border-color:var(--accent);background:rgba(75,180,83,.04)}
.upload i{color:var(--accent-deep);font-size:18px;flex:none}
.upload input[type="file"]{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.upload__name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.upload:focus-within{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(75,180,83,.14);
}

/* --- yes / no choices --- */
.choice-row{display:flex;gap:12px}
.choice{
  flex:1 1 0;
  display:flex;
  align-items:center;
  /* The dot leads, the word follows. Centring the pair moved the dot with the
     length of its label, so "Yes" and "No" sat in different places and a column
     of questions read as ragged. */
  justify-content:flex-start;
  gap:12px;
  padding:13px 18px;
  border:1px solid #dfe7ee;
  border-radius:var(--radius-sm);
  background:#fff;
  cursor:pointer;
  font-size:var(--t-sub);
  font-weight:500;
  color:var(--ink-soft);
  transition:border-color .2s ease,background .2s ease,color .2s ease;
}
.choice input{accent-color:var(--accent);width:18px;height:18px;flex:none;margin:0}
.choice:hover{border-color:#c3d3df;background:#fbfdfe}
.choice:has(input:checked){
  border-color:var(--accent);
  background:rgba(75,180,83,.09);
  color:var(--ink);
  font-weight:600;
}
.choice:focus-within{box-shadow:0 0 0 3px rgba(75,180,83,.14)}

/* a legend is a heading for its pair, not a label crowding them */
fieldset.field legend{margin-bottom:2px}

/* --- terms --- */
.terms-box{
  max-height:280px;
  overflow-y:auto;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--tint);
}
.terms-box ul{display:grid;gap:12px;list-style:disc;padding-left:20px}
.terms-box li,
.terms-box p{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.55;
  color:var(--body);
}
.terms-box p{margin-top:16px}
.terms-box strong{color:var(--ink)}
.terms-box::-webkit-scrollbar{width:6px}
.terms-box::-webkit-scrollbar-thumb{background:#d3e0ea;border-radius:99px}

/* --- the form as a wizard ---
   Added by apply.js only. Without JavaScript every step stays on the page in
   one long scroll, which is the markup as it ships. */
.apply-form--wizard .form-step{display:none;scroll-margin-top:calc(var(--header-offset) + 104px)}
.apply-form--wizard .form-step.is-current{
  display:grid;
  /* No fill mode: `both` leaves the finished animation applying its final
     transform for good, and an element holding a transform is a stacking
     context — which trapped the date picker's panel inside this step, where
     the sticky progress card above it (z-index 5) painted straight over the
     part of the calendar that opened upwards. The animation has no delay, so
     the fill was buying nothing. */
  animation:form-step-in .28s ease;
}
@keyframes form-step-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .apply-form--wizard .form-step.is-current{animation:none}
}

.form-progress{
  position:sticky;
  top:calc(var(--header-offset) + 8px);
  z-index:5;
  display:grid;
  gap:10px;
  /* the grid gap above already spaces it off the step below */
  margin-bottom:0;
  padding:14px 18px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(10,45,80,.06);
}
.form-progress__label{
  margin:0;
  font-size:var(--t-ui);
  font-weight:700;
  color:var(--ink);
}
.form-progress__track{
  height:6px;
  border-radius:99px;
  background:var(--line);
  overflow:hidden;
}
.form-progress__bar{
  display:block;
  height:100%;
  width:0;
  border-radius:99px;
  background:var(--accent);
  transition:width .3s ease;
}

.form-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.form-nav .btn-pill{border:1px solid transparent}
.form-nav [data-step-prev]{border-color:rgba(15,44,77,.22)}
.form-nav [data-step-prev]:hover i{transform:translateX(-3px)}
.form-nav [data-step-prev]:disabled{opacity:.4;cursor:not-allowed}
.form-nav [data-step-prev]:disabled:hover{transform:none;box-shadow:none;border-color:rgba(15,44,77,.22)}
.form-nav [hidden]{display:none}

/* --- footer of the form --- */
.form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:20px;
  padding-top:26px;
  border-top:1px solid var(--line);
}

/* --- success state --- */
.form-done{text-align:center;padding:60px 20px}
.form-done__mark{
  display:flex;align-items:center;justify-content:center;line-height:1;
  width:72px;height:72px;
  margin:0 auto 26px;
  border-radius:50%;
  background:var(--grad-accent);
  color:#fff;
  font-size:32px;
}
.form-done h2{
  font-size:var(--t-title);
  font-weight:700;
  line-height:var(--t-title-lh);
  color:var(--ink);
  margin-bottom:14px;
}
.form-done p{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
  max-width:46ch;
  margin:0 auto 30px;
}

/* ---------- 13d. Coming soon (coming-soon.html) ---------- */

.soon{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:calc(100vh - var(--header-offset));
  padding:calc(var(--header-offset) + 80px) 0 100px;
  background:linear-gradient(160deg,var(--navy-800) 0%,var(--navy-600) 58%,#0a4a58 100%);
  color:#fff;
}
/* soft accent bloom behind the copy */
.soon-glow{
  position:absolute;
  z-index:1;
  right:-8%;top:-20%;
  width:60%;height:120%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,rgba(75,180,83,.28),rgba(23,176,166,.12) 45%,transparent 70%);
  pointer-events:none;
}
.soon-dots{
  left:auto;right:6%;bottom:8%;
  top:auto;
  width:150px;height:90px;
  background-image:radial-gradient(rgba(255,255,255,.22) 1.6px,transparent 1.6px);
  opacity:1;
}
.soon__inner{position:relative;z-index:2;max-width:900px}

.soon__badge{margin-bottom:26px}
.soon__title{
  font-size:calc(clamp(34px,4vw,52px) * var(--fs));
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.03em;
  color:#fff;
  margin-bottom:22px;
}
.soon__title span{color:var(--accent)}
.soon__text{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:rgba(255,255,255,.78);
  max-width:56ch;
  margin-bottom:32px;
}
.soon__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:56px}

/* --- the three shortcuts --- */
.soon__links{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.soon-link{
  display:flex;
  align-items:center;
  gap:16px;
  padding:20px 22px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(6px);
  transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
.soon-link:hover{
  transform:translateY(-3px);
  background:rgba(255,255,255,.12);
  border-color:rgba(75,180,83,.5);
}
.soon-link__icon{
  flex:none;
  display:flex;align-items:center;justify-content:center;line-height:1;
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(75,180,83,.18);
  color:var(--accent);
  font-size:20px;
}
.soon-link__icon > i{display:block;line-height:1}
.soon-link__icon > i::before{display:block}
.soon-link strong{
  display:block;
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.35;
  color:#fff;
  margin-bottom:2px;
}
.soon-link span span,
.soon-link > span{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:1.45;
  color:rgba(255,255,255,.62);
}

/* ---------- 13e. Legal pages (privacy-policy.html) ---------- */

.legal-head{
  padding:calc(var(--header-offset) + 64px) 0 0;
  background:var(--white);
}
.legal-head h1{
  font-size:var(--t-title);
  font-weight:700;
  line-height:var(--t-title-lh);
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:14px;
}
.legal-head p{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
  max-width:60ch;
}

.legal-layout{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  gap:40px;
  align-items:start;
}

/* --- left: the document list --- */
.legal-nav{
  position:sticky;
  top:calc(var(--header-offset) + 24px);
  display:grid;
  gap:6px;
  padding:16px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-card);
}
.legal-nav__label{
  padding:6px 14px 10px;
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
}
.legal-nav button{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  padding:13px 16px;
  border:0;
  border-radius:var(--radius-sm);
  background:transparent;
  font-family:inherit;
  font-size:var(--t-sub);
  font-weight:500;
  line-height:1.4;
  text-align:left;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.legal-nav button i{font-size:14px;opacity:0;transition:opacity .2s ease,transform .2s ease}
.legal-nav button:hover{background:var(--tint);color:var(--ink)}
.legal-nav button[aria-selected="true"]{
  background:linear-gradient(100deg,rgba(75,180,83,.14) 0%,rgba(23,176,166,.14) 100%);
  color:var(--ink);
  font-weight:700;
}
.legal-nav button[aria-selected="true"] i{opacity:1;color:var(--accent-deep)}

/* --- right: the document itself --- */
.legal-panel{
  padding:40px 42px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-card);
}
.legal-doc[hidden]{display:none}
.legal-doc h2{
  font-size:var(--t-title);
  font-weight:700;
  line-height:var(--t-title-lh);
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:10px;
}
.legal-doc__meta{
  display:block;
  font-size:var(--t-micro);
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  padding-bottom:22px;
  margin-bottom:26px;
  border-bottom:1px solid var(--line);
}
.legal-doc h3{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
  margin:30px 0 10px;
}
.legal-doc h3:first-of-type{margin-top:0}
.legal-doc p,
.legal-doc li{
  font-size:var(--t-sub);
  font-weight:400;
  line-height:var(--t-sub-lh);
  color:var(--body);
}
.legal-doc p{margin-bottom:14px;max-width:80ch}
.legal-doc ul{
  list-style:disc;
  padding-left:22px;
  margin:0 0 16px;
  display:grid;
  gap:8px;
  max-width:80ch;
}
.legal-doc a{color:var(--accent-ink-2);font-weight:600}
.legal-doc a:hover{text-decoration:underline}

/* ---------- 13f. Applicant portal (portal/*.php) ---------- */

.portal-auth{padding-top:calc(var(--header-offset) + 64px)}
.portal,
.portal-auth{background:var(--tint)}
.portal{padding-top:calc(var(--header-offset) + 48px)}

.portal-card{
  max-width:560px;
  margin-inline:auto;
  padding:40px 38px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-card);
}
.portal-card h1,
.portal-card h2{
  font-size:var(--t-title);
  font-weight:700;
  line-height:var(--t-title-lh);
  letter-spacing:-.02em;
  color:var(--ink);
  margin-bottom:12px;
}
.portal-card__lead{margin-bottom:26px}
.portal-code{
  font-size:26px;
  font-weight:700;
  letter-spacing:.32em;
  text-align:center;
}
/* six cells, one per digit — built by main.js from the single input above, which
   stays as the fallback when JavaScript is off */
.otp-boxes{display:flex;gap:8px}
.otp-box{
  flex:1 1 0;
  min-width:0;
  max-width:48px;
  height:46px;
  padding:0;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--ink);
  text-align:center;
  font-family:inherit;
  font-size:20px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.otp-box:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(75,180,83,.18);
}
.otp-box--filled{border-color:var(--accent-deep)}
@media (max-width:420px){
  .otp-box{height:44px;font-size:19px}
}
.portal-resend{margin-top:18px}
.portal-restart{margin-top:12px}
.portal-link{
  border:0;
  background:none;
  padding:0;
  font-family:inherit;
  font-size:var(--t-sub);
  font-weight:600;
  color:var(--accent-deep);
  cursor:pointer;
}
.portal-link:hover{text-decoration:underline}
/* the resend link while its countdown runs: readable, plainly not yet pressable */
.portal-link:disabled{color:var(--muted);cursor:default;text-decoration:none}

.portal-alert{
  padding:16px 20px;
  border-radius:var(--radius-sm);
  font-size:var(--t-sub);
  line-height:1.55;
  margin-bottom:22px;
}
.portal-alert--ok{background:rgba(75,180,83,.12);border:1px solid rgba(75,180,83,.3);color:#26743a}
.portal-alert--error{background:rgba(201,69,92,.1);border:1px solid rgba(201,69,92,.28);color:#a8324a}
.portal-alert--warn{background:rgba(201,138,43,.12);border:1px solid rgba(201,138,43,.3);color:#8a5f1c}
.portal-alert a{color:inherit;font-weight:700;text-decoration:underline}

/* --- one application --- */
.portal-app{
  padding:34px 34px 30px;
  margin-bottom:24px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-card);
}
.portal-app__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  padding-bottom:24px;
  margin-bottom:28px;
  border-bottom:1px solid var(--line);
}
.portal-app__ref{
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-deep);
  margin-bottom:6px;
}
/* the words "Booking number" sit back so the number itself carries the line */
.portal-app__ref span{color:var(--muted);font-weight:600}
.portal-app h2{
  font-size:var(--t-title);
  font-weight:700;
  line-height:var(--t-title-lh);
  color:var(--ink);
  margin-bottom:6px;
}
.portal-app__meta{font-size:var(--t-sub);color:var(--muted)}
/* who this order went through — a name and a code, so a client knows who to
   ring before they ring us */
.portal-app__seller{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  font-size:var(--t-sub);
  color:var(--body);
}
.portal-app__seller strong{color:var(--ink)}
.portal-app__seller-kind{
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.portal-app__code{
  padding:2px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--accent-deep);
  white-space:nowrap;
}
/* the distributor behind the dealer: true, but not the headline */
.portal-app__under{font-size:var(--t-ui);color:var(--muted)}

.portal-app__copy{font-size:var(--t-sub);line-height:var(--t-sub-lh);color:var(--body);max-width:70ch}
.portal-app__copy strong{color:var(--ink)}

/* --- the stage timeline --- */
.portal-steps{
  display:grid;
  /* one column per stage, whatever the stage list holds — a fixed count here
     is what put the sixth stage on a row of its own with the rail dangling */
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);
  gap:0;
  margin-bottom:26px;
}
.portal-step{
  position:relative;
  padding:0 10px;
  text-align:center;
}
/* the rail between the dots */
.portal-step::before{
  content:"";
  position:absolute;
  top:13px;
  left:-50%;
  width:100%;
  height:2px;
  background:var(--line);
}
.portal-step:first-child::before{display:none}
.portal-step.is-done::before,
.portal-step.is-now::before{background:var(--accent-2)}

.portal-step__dot{
  position:relative;
  z-index:2;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  margin:0 auto 12px;
  border-radius:50%;
  border:2px solid var(--line);
  background:#fff;
  color:#fff;
  font-size:13px;
  line-height:1;
}
.portal-step.is-done .portal-step__dot{background:var(--accent-2);border-color:var(--accent-2)}
.portal-step.is-now .portal-step__dot{
  border-color:var(--accent-2);
  box-shadow:0 0 0 5px rgba(23,176,166,.16);
}
/* the rail into the final ticked stage is filled in too */
.portal-step.is-done + .portal-step.is-done::before{background:var(--accent-2)}
.portal-step__label{
  display:block;
  font-size:var(--t-ui);
  line-height:1.4;
  color:var(--muted);
}
.portal-step.is-done .portal-step__label{color:var(--body)}
/* whichever stage the application is actually on stays emphasised, ticked or not */
.portal-step.is-current .portal-step__label{color:var(--ink);font-weight:700}
/* the final tick reads as an end point, not another step */
.portal-step.is-done.is-current .portal-step__dot{box-shadow:0 0 0 5px rgba(23,176,166,.16)}

/* --- pay and upload --- */
.portal-pay{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:30px;
  align-items:start;
  padding:28px;
  margin-top:26px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--tint);
}
.portal-pay__qr{text-align:center}
.portal-pay__qr img{
  width:100%;
  max-width:220px;
  margin:0 auto 14px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
}
.portal-pay__note{font-size:var(--t-ui);line-height:1.5;color:var(--body)}
.portal-pay__note strong{color:var(--ink)}
.portal-pay__form .field:last-of-type{margin-bottom:6px}

/* --- payment gateway button & modes --- */
.portal-pay__gateway{
  grid-column:1/-1;
  text-align:center;
  padding:8px 0 4px;
}
.portal-pay__modes{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0 20px;
}
.portal-pay__mode{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 14px;
  font-size:var(--t-sm);
  font-weight:500;
  color:var(--body);
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:20px;
}
.portal-pay__mode i{font-size:1.1em;color:var(--accent)}
.portal-pay__btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 36px;
  font-size:1.05rem;
  font-weight:600;
}
.portal-pay__btn i{font-size:1.15em}
.portal-pay__secure{
  margin-top:16px;
  font-size:var(--t-sm);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
}
.portal-pay__secure i{color:var(--green,#2e8b57)}

/* --- fallback receipt upload toggle --- */
.portal-pay__fallback{
  grid-column:1/-1;
  margin-top:4px;
  border-top:1px solid var(--line);
  padding-top:16px;
}
.portal-pay__fallback-toggle{
  cursor:pointer;
  font-size:var(--t-sm);
  color:var(--muted);
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  user-select:none;
}
.portal-pay__fallback-toggle::-webkit-details-marker{display:none}
.portal-pay__fallback-toggle::marker{display:none;content:''}
.portal-pay__fallback-toggle:hover{color:var(--ink)}
.portal-pay__fallback-body{
  margin-top:20px;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  gap:24px;
  align-items:start;
}
@media (max-width:991px){
  .portal-pay__fallback-body{grid-template-columns:1fr}
}


@media (max-width:991px){
  .portal-auth,
  .portal{padding-top:calc(var(--header-offset) + 40px)}
  .portal-card{padding:30px 24px}
  .portal-app{padding:26px 22px}
  .portal-pay{grid-template-columns:1fr;padding:22px}
  .portal-steps{grid-auto-flow:row;grid-auto-columns:auto;gap:18px;text-align:left}
  .portal-step{display:flex;align-items:center;gap:14px;padding:0;text-align:left}
  .portal-step::before{display:none}
  .portal-step__dot{margin:0}
}

/* ---------- 13g. Technology page (technology.html) ---------- */
/* the hero: no photograph, just the molecule the whole page is about */
.page-hero--tech{
  align-items:center;
  min-height:520px;
  background:linear-gradient(120deg,#03121f 0%,#043d6b 58%,#0a5d6b 100%);
}
.tech-hero__molecule{
  position:absolute;
  top:50%;right:4%;
  width:min(520px,42vw);
  transform:translateY(-50%);
  pointer-events:none;
}
.tech-hero__molecule svg{width:100%;height:auto;display:block}
.tech-hero__dots{
  position:absolute;
  left:-40px;bottom:-30px;
  width:280px;height:200px;
  pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.5px,transparent 1.5px);
  background-size:16px 16px;
}
.page-hero--tech .page-hero__inner{
  padding-top:calc(var(--header-offset) + 56px);
  padding-bottom:56px;
}
.page-hero--tech .page-hero__text{max-width:56ch}

.tech-hero__stats{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:40px 0 0;
  padding:0;
}
.tech-hero__stats li{
  flex:1 1 190px;
  padding:16px 20px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(4px);
}
.tech-hero__stats strong{
  display:block;
  margin-bottom:4px;
  font-size:calc(22px * var(--fs));
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--accent-on-dark);
}
.tech-hero__stats span{
  display:block;
  font-size:var(--t-ui);
  line-height:1.55;
  color:rgba(255,255,255,.7);
}

@media (max-width:991px){
  .tech-hero__molecule{opacity:.4;right:-8%}
}
@media (max-width:767px){
  .page-hero--tech{min-height:0}
  .tech-hero__stats li{flex:1 1 100%}
}

.tech-page .section-head{margin-bottom:8px}

/* the three steps */
.tech-steps{
  list-style:none;
  margin:44px 0 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:26px;
}
.tech-steps li{
  padding:30px 28px 32px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-card);
}
.tech-steps__num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  margin-bottom:18px;
  border-radius:50%;
  background:var(--grad-accent);
  color:var(--white);
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.06em;
}
.tech-steps h3{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
  margin-bottom:10px;
}
.tech-steps p{
  margin:0;
  font-size:var(--t-ui);
  line-height:1.7;
  color:var(--body);
}

/* the comparison band: a dark stretch in the middle of a light page */
.metrics-band{
  position:relative;
  overflow:hidden;
  background:linear-gradient(10deg,#043d6b 70%,#4bb453 100%);
}
.metrics-band__glow{
  position:absolute;
  top:-120px;right:-80px;
  width:420px;height:420px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(127,224,200,.22) 0%,rgba(127,224,200,0) 70%);
  pointer-events:none;
}
.metrics-band .container-x{position:relative;z-index:2}
.metrics-band .eyebrow--rule{color:var(--accent-on-dark)}
.metrics-band .eyebrow--rule::after{background:var(--accent-on-dark)}
.metrics-band .section-title{color:#fff;max-width:24ch}
.metrics-band .section-sub{color:rgba(255,255,255,.66)}

.metrics{
  margin-top:44px;
  padding:30px 32px 34px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.06);
}
.metrics__key{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:26px}
.metrics__key-item{
  display:inline-flex;
  align-items:center;
  gap:9px;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.metrics__key-item::before{
  content:"";
  width:12px;height:12px;
  border-radius:3px;
  background:rgba(255,255,255,.28);
}
.metrics__key-item--ours{color:#fff}
.metrics__key-item--ours::before{
  background:linear-gradient(100deg,var(--accent) 0%,var(--accent-on-dark) 100%);
}

.metric + .metric{margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12)}
.metric__label{
  margin:0 0 14px;
  font-size:var(--t-ui);
  font-weight:600;
  color:#fff;
}
.metric__label span{
  margin-left:10px;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
.metric__row{display:grid;gap:10px}

.metric__bar{
  position:relative;
  display:flex;
  align-items:center;
  height:42px;
  padding:0 18px;
  border-radius:10px;
  width:var(--fill);
  min-width:130px;
  background:rgba(255,255,255,.14);
  color:#fff;
  transition:width .8s cubic-bezier(.22,.61,.36,1);
}
.metric__bar b{font-size:var(--t-ui);font-weight:700;white-space:nowrap}
.metric__bar--ours{
  background:var(--grad-accent);
  box-shadow:0 10px 26px rgba(4,34,58,.28);
}

.metric__word{
  display:block;
  padding:11px 18px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  font-size:var(--t-ui);
  color:rgba(255,255,255,.72);
}
.metric__word--ours{
  border-color:rgba(127,224,200,.45);
  background:rgba(127,224,200,.1);
  color:#fff;
  font-weight:600;
}

.metrics-notes{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:24px;
  margin-top:34px;
}
.metrics-note strong{
  display:block;
  margin-bottom:8px;
  font-size:calc(28px * var(--fs));
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--accent-on-dark);
}
.metrics-note span{
  display:block;
  font-size:var(--t-ui);
  line-height:1.7;
  color:rgba(255,255,255,.7);
}

@media (max-width:575px){
  .metrics{padding:24px 20px 26px}
  .metric__bar{min-width:0;padding:0 12px}
}

@media (prefers-reduced-motion:reduce){
  .metric__bar{transition:none}
}

/* the safety train, and the metering list */
.tech-list{
  list-style:none;
  margin:44px 0 0;
  padding:0;
  display:grid;
  gap:14px;
}
.tech-list li{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:20px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
}
.tech-list--plain{margin-top:0}
.tech-list > li > i{
  flex:none;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:rgba(23,176,166,.12);
  color:var(--accent-deep);
  font-size:18px;
  line-height:1;
}
.tech-list strong{
  display:block;
  margin-bottom:3px;
  font-size:var(--t-sub);
  color:var(--ink);
}
.tech-list span{
  display:block;
  font-size:var(--t-ui);
  line-height:1.7;
  color:var(--body);
}

/* the safety train: five upright cards, each with a pointer at its foot */
.safety-grid{
  list-style:none;
  margin:44px 0 22px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  gap:22px;
}
.safety-card{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:30px 20px 34px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-card);
  transition:transform .3s ease,box-shadow .3s ease;
}
.safety-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,45,80,.1)}

.safety-card__icon{
  position:relative;
  width:84px;height:84px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;
  border-radius:50%;
  background:rgba(23,176,166,.09);
  color:var(--accent-deep);
  font-size:32px;
  line-height:1;
}
/* the small mark that sits on the rim of the disc */
.safety-card__icon::after{
  content:"";
  position:absolute;
  top:6px;right:8px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--accent-2);
}

.safety-card__step{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:34px;
  padding:3px 9px;
  margin-bottom:14px;
  border:1px solid rgba(23,176,166,.45);
  border-radius:8px;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.06em;
  color:var(--accent-ink-2);
}

.safety-card h3{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.35;
  color:var(--ink);
  margin:0 0 12px;
}
.safety-card__rule{
  display:block;
  width:30px;height:2px;
  margin-bottom:14px;
  border-radius:2px;
  background:var(--accent-2);
}
.safety-card p{
  margin:0;
  font-size:var(--t-ui);
  line-height:1.7;
  color:var(--body);
}

.safety-card__foot{
  position:absolute;
  left:0;right:0;bottom:0;
  height:13px;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  background:var(--grad-accent);
}
.safety-card__foot::after{
  content:"";
  position:absolute;
  top:100%;left:50%;
  transform:translateX(-50%);
  border-left:13px solid transparent;
  border-right:13px solid transparent;
  border-top:11px solid var(--accent-2);
}

/* the range */
.tech-range{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  margin-top:44px;
}
.tech-range__item{
  padding:26px 24px 28px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:#fff;
  box-shadow:var(--shadow-card);
}
.tech-range__item h3{
  font-size:var(--t-sub);
  font-weight:700;
  color:var(--ink);
  margin-bottom:4px;
}
.tech-range__kind{
  margin:0 0 12px;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-ink-2);
}
.tech-range__item p:last-child{
  margin:0;
  font-size:var(--t-ui);
  line-height:1.7;
  color:var(--body);
}

/* the output table */
.tech-table-wrap{margin-top:34px;overflow-x:auto}
.tech-table{
  width:100%;
  min-width:680px;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.tech-table caption{
  caption-side:top;
  padding:0 0 12px;
  text-align:left;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}
.tech-table th,
.tech-table td{
  padding:16px 20px;
  text-align:left;
  font-size:var(--t-ui);
  line-height:1.6;
  border-bottom:1px solid var(--line);
}
.tech-table th{
  background:var(--tint);
  font-weight:700;
  color:var(--ink);
}
.tech-table td{color:var(--body)}
.tech-table tbody tr:last-child td{border-bottom:0}
.tech-table td:first-child{font-weight:600;color:var(--ink)}

.tech-copy{
  font-size:var(--t-sub);
  line-height:1.75;
  color:var(--body);
  margin:0 0 16px;
}

/* the closing panel: one centred block rather than a split heading row */
.tech-cta{padding-bottom:calc(var(--sec-pad) + 10px)}
.tech-cta__panel{
  max-width:820px;
  margin-inline:auto;
  padding:52px 48px 46px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(115deg,#f4f9fc 0%,#eaf3f9 52%,#e4eff6 100%);
  box-shadow:0 18px 50px rgba(15,60,95,.07);
}
.tech-cta__mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:58px;height:58px;
  margin:0 auto 22px;
  border-radius:50%;
  background:#fff;
  color:var(--accent-deep);
  font-size:24px;
  line-height:1;
  box-shadow:0 8px 22px rgba(15,60,95,.08);
}
.tech-cta__panel h2{
  margin:0 0 14px;
  font-size:var(--t-title);
  font-weight:700;
  line-height:var(--t-title-lh);
  letter-spacing:-.02em;
  color:var(--ink);
}
.tech-cta__panel > p{
  max-width:56ch;
  margin:0 auto 28px;
  font-size:var(--t-sub);
  line-height:var(--t-sub-lh);
  color:var(--body);
}
.tech-cta__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
/* the outline pill is drawn for dark bands; on this one it needs ink */
.tech-cta__actions .btn-pill--outline{
  color:var(--ink);
  border-color:#d5e0e9;
  background:#fff;
}
.tech-cta__actions .btn-pill--outline:hover{background:#fff;border-color:#c3d3df}

.tech-cta__aside{
  margin:32px 0 0;
  font-size:var(--t-ui);
  color:var(--muted);
}
.tech-cta__aside a{font-weight:700;color:var(--accent-deep)}
.tech-cta__aside a:hover{text-decoration:underline}

@media (max-width:575px){
  .tech-cta__panel{padding:38px 22px 34px;border-radius:20px}
  .tech-cta__actions .btn-pill{width:100%;justify-content:center}
}

/* ---------- 14. Responsive ---------- */
@media (max-width:1199px){
  .main-nav{gap:20px}
  .main-nav a{font-size:calc(16px * var(--fs))}

  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 26px}
  .footer-connect{padding-top:24px}
}

@media (max-width:991px){
  :root{--topbar-h:34px;--sec-pad:76px}

  .footer-top{flex-direction:column;gap:32px;padding-bottom:48px}
  /* basis is read as height once the bar stacks — pin it back to content */
  .footer-intro,
  .footer-connect{flex:0 0 auto;width:100%;max-width:100%}
  .footer-connect{padding-top:0}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr));padding-bottom:48px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:16px;padding-right:0;flex-wrap:wrap}
  .footer-credit{margin-left:0;padding-right:0}
  .footer-policy{justify-content:flex-start;margin-left:-12px;margin-top:0}
  .to-top{right:18px;bottom:18px;width:46px;height:46px}

  .nav-toggle{display:flex}
  .nav-actions--desktop{display:none}

  .main-nav{
    position:fixed;
    top:var(--header-offset);
    left:0;right:0;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:2px;
    margin:0;
    padding:18px 28px 26px;
    background:#f6f9fc;
    border-top:1px solid #e6edf3;
    box-shadow:0 18px 34px rgba(15,60,95,.10);
    transform:translateY(-14px);
    opacity:0;
    visibility:hidden;
    transition:.3s ease;
    /* vh is frozen at the tallest viewport, so the panel jumped when the URL
       bar collapsed mid-scroll; dvh tracks the real one, vh stays as fallback */
    max-height:calc(100vh - var(--header-offset));
    max-height:calc(100dvh - var(--header-offset));
    overflow-y:auto;
  }
  .main-nav.is-open{transform:none;opacity:1;visibility:visible}
  .main-nav a,
  .main-nav summary{font-size:calc(18px * var(--fs));padding:11px 0;width:100%}
  .nav-dropdown{width:100%}
  .nav-dropdown__menu{
    position:static;
    min-width:0;
    margin-top:6px;
    padding:0 0 0 14px;
    background:transparent;
    border:0;
    box-shadow:none;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
  .nav-dropdown__menu a{padding:8px 0;font-size:calc(16px * var(--fs))}
  .nav-actions{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-top:8px;
  }
  .nav-actions .btn-pill{
    width:100%;
    justify-content:center;
  }
  .nav-cta-mobile,
  .nav-login-mobile,
  .nav-raffle-mobile{display:inline-flex}
  .nav-cta,
  .nav-login,
  .nav-raffle{display:none}
  /* [hidden] still wins: an off raffle leaves no button in the drawer either */
  .nav-actions .btn-pill[hidden]{display:none}

  /* the account menu follows its button: the header one goes, the one inside
     the drawer takes over and opens in flow rather than floating */
  .nav-actions--desktop .nav-account{display:none}
  .nav-account--mobile{display:block}
  .nav-account--mobile .nav-account__button{width:100%;justify-content:center}
  .nav-account--mobile .nav-account__menu{
    position:static;
    margin-top:10px;
    min-width:0;
    box-shadow:none;
  }

  .hero{min-height:640px}
  .hero-inner{padding:calc(var(--header-offset) + 60px) 24px 64px}

  .section-head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:34px}
  .section-title{flex:0 0 auto;max-width:100%}
  .section-sub{flex:0 0 auto;max-width:52ch;padding-bottom:0}
  .timeline-head{flex-direction:column;gap:18px;margin-bottom:40px}
  .timeline-head__lead{flex:0 0 auto;margin-top:0;max-width:52ch}

  .app-card{aspect-ratio:5/6.4}
  .proof-dots{display:none}
  .proof-tags{gap:10px;margin-top:28px}

  .product-card{flex-direction:column;align-items:flex-start;gap:26px;padding:30px 24px}
  .product-card__media{width:100%}
  .product-card__media img{max-width:300px;margin-inline:auto}

  .tech-title br{display:none}
  .tech-dots--mid{display:none}
  .tech-dots--tr{right:24px;top:36px}

  .flow{flex-wrap:wrap;gap:30px 0}
  .flow-step{flex:0 0 50%}
  .flow-step p{margin-bottom:26px}
  .flow-sep{display:none}

  .about-visual{max-width:560px;margin-inline:auto;padding:26px 18px 30px 70px}
  .about-badge{width:150px;height:150px;top:26%}
  .about-badge p{font-size:var(--t-ui)}
  .about-badge__icon{width:34px;height:34px}
  .about-leaf{width:50px;height:50px}
  .about-leaf svg{width:22px;height:22px}
  .about-sprig{width:110px;height:92px}
  .about-stats{flex-wrap:wrap;gap:24px}
  .about-stat{flex:1 1 220px}
  .about-dots--bl,.about-dots--br,.about-dots--tl{display:none}

  .why-panel{margin-top:56px}

  .page-hero{min-height:0}
  .page-hero__inner{padding-top:calc(var(--header-offset) + 44px);padding-bottom:56px}
  .page-hero__text{max-width:46ch}
  .page-hero__actions .btn-pill{flex:1 1 auto;justify-content:center}

  .step-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-panel{padding:30px 26px}
  .map-frame iframe{height:380px}
  .apply-form{padding:32px 26px;gap:38px}
  .legal-layout{grid-template-columns:1fr;gap:26px}
  .legal-nav{position:static}
  .legal-panel{padding:30px 26px}
  .side-panel{padding:26px 22px}
  .media-frame{max-width:560px;margin-inline:auto}

  .cta-band{flex-direction:column;min-height:0}
  .cta-inner{flex:0 0 auto;max-width:100%;order:2;padding:34px 28px 40px}
  .cta-inner p{max-width:46ch}
  .cta-media{position:static;order:1;width:100%;height:230px}
  .cta-media img{
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  }
}

@media (max-width:767px){
  .hero{min-height:600px}
  /* the address stays readable on a phone: it is the one way to reach us that
     does not need a form, so it is shrunk rather than dropped, and truncates
     with an ellipsis if a narrow screen cannot take all of it */
  .top-bar__email{font-size:12px;gap:6px;min-height:32px;min-width:0;flex:0 1 auto;overflow:hidden}
  .top-bar__email i{font-size:13px;flex:0 0 auto}
  .top-bar__email span{
    display:inline-block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .hero-media::after{
    background:
      linear-gradient(180deg,rgba(14, 70, 123, 0.86) 0%,rgba(19, 92, 161, 0.72) 42%,rgba(20, 74, 124, 0.88) 100%);
  }
  .hero-title{font-size:calc(34px * var(--fs))}
  .hero-text br{display:none}
  .hero-actions .btn-pill{flex:1 1 auto;justify-content:center}

  .feature-bar{padding:48px 0}
  .feature{gap:16px}
  .feature-icon{flex:0 0 46px;width:46px;height:46px;font-size:18px}
  .feature p{max-width:40ch}

  .partner-row{justify-content:center;gap:22px}
  .partner-row img{height:30px}

  .footer-legal{margin-bottom:16px}
}

@media (max-width:575px){
  :root{--sec-pad:60px}
  .footer-subscribe{flex-direction:column}
  .footer-subscribe__btn{width:100%}
  .footer-cols{grid-template-columns:1fr;gap:30px}
  .container-x{padding-inline:20px}
  .top-bar__inner{gap:10px}
  .top-bar__social{gap:6px}
  .top-bar__social a{width:26px;height:26px;font-size:calc(12px * var(--fs))}
  .hero-title{font-size:calc(30px * var(--fs))}
  .app-card{aspect-ratio:5/5.6}
  .product-card{padding:28px 22px}
  .check-list{gap:9px}

  .step-list{grid-template-columns:1fr}
  .icon-card{padding:26px 22px}
  .form-panel{padding:26px 20px}
  .field-row{grid-template-columns:1fr}
  .map-frame iframe{height:320px}
  .apply-form{padding:26px 20px}
  .legal-panel{padding:24px 20px}
  .field-grid{grid-template-columns:1fr}
  .form-actions{flex-direction:column;align-items:flex-start}
  .faq-item{padding:2px 18px}
}

/* ---------- 14b. Mobile refinements ----------
   Fixes for blocks that were designed wide: the technology flow, the About
   visual with its floating badge, and the panels whose padding crowded a
   360px screen. Nothing here changes the 24/18 type contract. */

/* decorative absolutes must never widen the page */
body{overflow-x:hidden}


@media (max-width:767px){
  /* --- technology flow: one step per row --- */
  .flow{--orb:118px;gap:26px 0}
  .flow-step{flex:0 0 100%}
  .flow-step h3{max-width:none;margin-bottom:10px}
  .flow-step p{max-width:34ch;margin-bottom:18px}
  .flow-orb{margin:6px 0 18px}
  .flow-orb::before{width:88px;height:88px}
  .flow-icon{width:44px;height:44px}
  .flow-dash{margin-top:0}

  /* --- about: drop the floating furniture, stack the badge --- */
  .about-visual{padding:0}
  .about-trace__arc,
  .about-sprig,
  .about-leaf{display:none}
  /* the round badge does not sit under a photo well on a phone — it becomes a
     wide chip beneath it instead, reading left to right like the stats above */
  .about-badge{
    position:static;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:16px;
    width:auto;height:auto;
    margin:18px 0 0;
    padding:16px 20px;
    border-radius:16px;
    text-align:left;
  }
  .about-badge__icon{width:34px;height:34px;flex:none}
  .about-badge p{font-size:var(--t-sub);line-height:1.45}
  .about-badge br{display:none}
  .about-stat + .about-stat{border-left:0;padding-left:0;margin-left:0}
  /* a gentler shape and a shorter crop so the photo does not dominate */
  .about-figure{
    aspect-ratio:4/3;
    border-radius:22px;
    box-shadow:0 14px 34px rgba(15,60,95,.12);
  }

  .eyebrow--center{margin-bottom:26px}

  /* --- panels that were padded for desktop --- */
  .proof-card{padding:26px 22px}
  .icon-card{padding:26px 22px}
  .contact-card{padding:24px 20px}
  .media-frame figcaption{padding:14px 18px}
  .shot figcaption{padding:12px 16px}
  .cta-inner{padding:30px 20px 36px}
  .side-panel{padding:24px 20px}
  .legal-nav{padding:12px}
  .legal-nav button{padding:12px 14px}
  .feature p{max-width:none}
  .page-hero__title{font-size:calc(30px * var(--fs))}
  .section-head{gap:12px}

  /* --- portal --- */
  .portal-app{padding:24px 20px}
  .portal-app__head{gap:14px;padding-bottom:20px;margin-bottom:22px}
  .portal-card{padding:28px 22px}

  /* the toast is centred with a transform, so it needs its own mobile sizing */
  .form-toast{
    left:16px;right:16px;
    max-width:none;
    border-radius:14px;
    transform:translateY(14px);
  }
  .form-toast.is-visible{transform:none}
}

@media (max-width:575px){
  .container-x{padding-inline:16px}
  /* both names, or the row keeps the 2.5rem negative margin against 16px of
     container padding and hangs 4px off each edge */
  .container-x .row{--gutter-x:2rem;--bs-gutter-x:2rem}
  .btn-pill{padding:12px 18px}
  .why-card{padding:22px 18px}
  .proof-card{padding:22px 18px}
  /* Five labels of five different lengths never settle on a narrow screen:
     centred they made an arrow, left-aligned a staircase. One column of equal
     rows lines the icons up on a rail and reads as the list it is. The softer
     radius keeps them from looking like five full-width CTAs. */
  .proof-tags{display:grid;grid-template-columns:1fr;gap:8px}
  .proof-tag{
    justify-content:flex-start;
    padding:11px 14px;
    border-radius:var(--radius);
    font-size:var(--t-micro);
  }
  .app-card__body{padding:16px 16px 14px}
  .terms-box{padding:18px 16px}
  .upload{padding:12px 14px}
  .portal-pay{padding:18px}
  .map-frame iframe{height:260px}
  .about-badge{padding:14px 16px;gap:14px}
}

/* the coming-soon page had no mobile rules of its own */
@media (max-width:991px){
  .soon{
    min-height:0;
    padding:calc(var(--header-offset) + 56px) 0 72px;
  }
  .soon__links{grid-template-columns:1fr;gap:14px}
  .soon__actions{margin-bottom:40px}
  .soon__actions .btn-pill{flex:1 1 auto;justify-content:center}
  .soon-dots{display:none}
}

@media (max-width:575px){
  .soon{padding:calc(var(--header-offset) + 40px) 0 60px}
  .soon-link{padding:18px}
  .soon__text{margin-bottom:26px}
}

/* ---------- 14c. Our journey on mobile ----------
   The horizontal rail does not work on a phone, so below 992px the timeline
   becomes a vertical wheel: each year is one row, three are visible at a time,
   and rows fade and shrink as they leave the middle (see main.js). */
@media (max-width:991px){
  .timeline-scroll{
    --tl-row:104px;
    overflow-x:hidden;
    overflow-y:auto;
    max-height:calc(var(--tl-row) * 3);
    padding:0 2px 0 0;
    scroll-snap-type:y proximity;
    scrollbar-width:none;
    /* soften the top and bottom edges so rows appear to roll away */
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 84%,transparent 100%);
  }
  .timeline-scroll::-webkit-scrollbar{width:0;height:0}

  .timeline{
    min-width:0;
    flex-direction:column;
    gap:0;
  }
  /* the rail runs down through the dots instead of across */
  .timeline::before{
    left:calc(66px + var(--dot) / 2);
    right:auto;
    top:0;bottom:0;
    width:1.5px;height:auto;
  }

  .timeline-item{
    display:grid;
    grid-template-columns:66px var(--dot) minmax(0,1fr);
    align-items:center;
    gap:0 16px;
    min-height:var(--tl-row);
    padding:0 4px;
    text-align:left;
    scroll-snap-align:center;
    transform-origin:left center;
    transition:opacity .25s ease,transform .25s ease;
  }
  .timeline-item + .timeline-item::after{display:none}
  .timeline-item--now::before{display:none}

  .timeline-year{margin:0;font-size:var(--t-sub)}
  .timeline-dot{margin:0}
  .timeline-item p{
    max-width:none;
    margin:0;
    font-size:var(--t-sub);
    line-height:1.5;
  }

  /* set by main.js from each row's distance to the middle of the window */
  .timeline-item[data-wheel]{
    opacity:var(--wheel-o,1);
    transform:scale(var(--wheel-s,1));
  }
}

@media (max-width:991px) and (prefers-reduced-motion:reduce){
  .timeline-item[data-wheel]{opacity:1;transform:none;transition:none}
  .timeline-scroll{-webkit-mask-image:none;mask-image:none}
}

/* ---------- 13f-c. Portal referral card ----------
   Only shown once the fee is settled — that is when the code starts working. */
.portal-referral{
  margin:26px 0 0;
  padding:24px;
  border:1px solid rgba(23,176,166,.28);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(23,176,166,.06) 0%,rgba(75,180,83,.05) 100%);
}
.portal-referral__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.portal-referral__label{
  margin:0 0 4px;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-deep);
}
.portal-referral__code{
  margin:0;
  font-size:calc(26px * var(--fs));
  font-weight:700;
  letter-spacing:.16em;
  color:var(--ink);
}
.portal-referral__copyline{
  margin:16px 0 0;
  font-size:var(--t-sub);
  line-height:1.6;
  color:var(--body);
}
.portal-referral__copyline strong{color:var(--ink)}

.portal-referral__links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.portal-referral__copy,
.portal-referral__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-family:inherit;
  font-size:var(--t-ui);
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .25s ease,color .25s ease,transform .25s ease,background .25s ease;
}
.portal-referral__copy i,
.portal-referral__link i{color:var(--accent-deep);font-size:16px;line-height:1}
.portal-referral__copy:hover,
.portal-referral__link:hover{
  transform:translateY(-1px);
  border-color:rgba(23,176,166,.45);
  color:var(--accent-deep);
}
.portal-referral__copy.is-copied,
.portal-referral__link.is-copied{
  background:var(--accent-deep);
  border-color:var(--accent-deep);
  color:#fff;
}
.portal-referral__copy.is-copied i,
.portal-referral__link.is-copied i{color:#fff}

.portal-referral__list{
  list-style:none;
  margin:14px 0 0;
  padding:0;
  border-top:1px solid rgba(23,176,166,.22);
}
.portal-referral__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 16px;
  padding:12px 0;
  border-bottom:1px solid rgba(23,176,166,.16);
  font-size:var(--t-ui);
}
.portal-referral__who{font-weight:700;color:var(--ink);flex:1 1 40%}
.portal-referral__when{color:var(--muted)}
.portal-referral__amount{font-weight:700;color:var(--ink)}
.portal-referral__state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  font-weight:600;
  color:var(--body);
}
.portal-referral__state i{font-size:15px;line-height:1}
.portal-referral__state--sent{color:#26743a}
.portal-referral__state--cancelled{color:var(--muted)}

.portal-referral__stat{
  margin:18px 0 0;
  font-size:var(--t-ui);
  color:var(--body);
}
.portal-referral__stat strong{color:var(--ink)}
.portal-referral__stat--muted{margin-top:8px;color:var(--muted)}

/* --- request the reward payout, like a dealer raising a voucher --- */
.portal-referral__claim{
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.portal-referral__claim-note{
  margin:0 0 12px;
  font-size:var(--t-ui);
  line-height:1.6;
  color:var(--body);
}
.portal-referral__claim-note strong{color:var(--ink)}
/* the resting state, after a request has gone in */
.portal-referral__claim-note--sent{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:var(--accent-ink-2);
  font-weight:600;
}
.portal-referral__claim-note--sent i{font-size:16px;line-height:1}

/* --- what we already knew about a returning applicant --- */
.form-prefill{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin:0 0 28px;
  padding:16px 20px;
  border:1px solid rgba(23,176,166,.3);
  border-radius:var(--radius);
  background:rgba(23,176,166,.06);
  font-size:var(--t-ui);
  line-height:1.6;
  color:var(--ink-soft);
}
.form-prefill > i{color:var(--accent-deep);font-size:18px;line-height:1}
.form-prefill > span{flex:1 1 300px}
.form-prefill__clear{
  padding:8px 16px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  font-family:inherit;
  font-size:var(--t-ui);
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.form-prefill__clear:hover{background:var(--tint);border-color:#c3d3df}

/* a value we filled in, or a code that arrived in the link */
.field select.is-prefilled,
.field input.is-prefilled{
  border-color:rgba(23,176,166,.5);
  background:rgba(23,176,166,.05);
}
#referral_code.is-prefilled{
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ---------- 13f-b. Portal payment ledger ---------- */
.portal-ledger{
  margin:26px 0 0;
  padding:22px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--tint);
}
.portal-ledger__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-bottom:14px;
}
.portal-ledger__paid{
  font-size:26px;
  font-weight:700;
  line-height:1.2;
  color:var(--ink);
}
.portal-ledger__paid span{
  font-size:var(--t-sub);
  font-weight:400;
  color:var(--body);
  margin-left:6px;
}
.portal-ledger__due{
  font-size:var(--t-sub);
  font-weight:700;
  color:var(--accent-deep);
}

.portal-bar{
  height:8px;
  border-radius:99px;
  background:#e3ebf2;
  overflow:hidden;
}
.portal-bar span{
  display:block;
  height:100%;
  border-radius:99px;
  background:var(--grad-accent);
  transition:width .4s ease;
}

.portal-plan{margin-top:26px}
.portal-plan__lead{
  font-size:var(--t-ui);
  line-height:1.6;
  color:var(--body);
  margin-bottom:16px;
}
.portal-plan__lead strong{color:var(--ink)}

.portal-stage{
  padding:22px 24px 24px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
}
.portal-stage + .portal-stage{margin-top:14px}
.portal-stage--paid{border-color:rgba(75,180,83,.38);background:rgba(75,180,83,.05)}
.portal-stage--checking{border-color:rgba(23,176,166,.4);background:rgba(23,176,166,.05)}
.portal-stage--due{border-color:rgba(201,138,43,.42);background:rgba(201,138,43,.05)}
.portal-stage--locked{background:var(--tint)}

.portal-stage__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding-bottom:14px;
  margin-bottom:14px;
  border-bottom:1px solid var(--line);
}
.portal-stage__title{
  font-size:var(--t-sub);
  font-weight:700;
  line-height:1.4;
  color:var(--ink);
  margin:0 0 4px;
}
.portal-stage__amount{
  font-size:var(--t-figure);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.03em;
  color:var(--ink);
}
.portal-stage--locked .portal-stage__amount{color:var(--muted)}
.portal-stage__state{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:var(--t-micro);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--body);
}
.portal-stage--paid .portal-stage__state{color:#26743a}
.portal-stage--checking .portal-stage__state{color:#0b7a74}
.portal-stage--due .portal-stage__state{color:#8a5f1c}
.portal-stage--locked .portal-stage__state{color:var(--muted)}
.portal-stage__note{
  font-size:var(--t-ui);
  line-height:1.6;
  color:var(--body);
  max-width:64ch;
}
.portal-stage__reject{margin:14px 0 0}
.portal-stage .portal-ledger__list{margin-top:16px}
.portal-stage .portal-pay{margin-top:18px}

.portal-ledger__list{display:grid;gap:10px;margin-top:18px}
.portal-entry{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px 14px;
  padding:12px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
}
.portal-entry__amount{font-size:var(--t-sub);font-weight:700;color:var(--ink)}
.portal-entry__meta{flex:1 1 200px;font-size:var(--t-ui);color:var(--muted)}
.portal-entry--verified{border-color:rgba(75,180,83,.35)}
.portal-entry--rejected{border-color:rgba(201,69,92,.3)}

@media (max-width:767px){
  .portal-ledger{padding:18px}
  .portal-ledger__paid{font-size:22px}
}

/* receipt download beside a verified instalment */
.portal-entry__receipt{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:var(--t-ui);
  font-weight:700;
  color:var(--accent-deep);
  white-space:nowrap;
}
.portal-entry__receipt:hover{text-decoration:underline}

/* ---------- 13h. Product page: specs and price, narrow ---------- */
@media (max-width:1199px){
  .spec-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 48px}
  .price-band{grid-template-columns:1fr}
  .price-band__head{
    border-right:0;
    border-bottom:1px solid rgba(255,255,255,.15);
    padding:38px 36px 40px;
  }
  .price-step{padding:34px 26px 36px}
}

@media (max-width:991px){
  .spec-extras{margin-top:44px}
  .price-steps{grid-template-columns:1fr}
  .price-step{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.15);
    padding:26px 36px 28px;
  }
  .price-step:first-child{border-top:0;padding-top:30px}
  .price-step__value{margin:8px 0 6px}
  .price-foot{gap:28px}
  .price-act{max-width:none}
}

@media (max-width:767px){
  :root{--t-figure:30px}
  .spec-groups{grid-template-columns:1fr;gap:34px}
  .spec-extras{margin-top:36px}
  .price-band__head{padding:32px 24px 34px}
  .price-band__note{max-width:34ch}
  .price-step{padding:24px 24px 26px}
  .price-foot{margin-top:32px;padding-top:28px}
}

/* ---------- role picker (one address, more than one thing) ---------- */
.role-picker{display:grid;gap:12px;margin-bottom:22px}
.role-card{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fff;
  color:var(--ink);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.role-card:hover{border-color:var(--accent-2);transform:translateY(-1px);box-shadow:var(--shadow-card)}
.role-card__icon{
  flex:none;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--tint);
  font-size:19px;
  color:var(--accent-deep);
}
.role-card__text{display:grid;gap:2px;flex:1 1 auto;min-width:0}
.role-card__text strong{font-size:var(--t-sub);font-weight:700}
.role-card__text span{font-size:13px;color:var(--muted);line-height:1.5}

/* the picker inside the buy-again card: full-width rows, so the product names
   never wrap into a column two words wide, and no gap under the last */
.portal-again .role-picker{margin-bottom:0}
.portal-again .role-card__text strong{line-height:1.3}

/* ---------- portal: orders beside the buy-again card ----------
   The list of orders is as long as somebody's history; the card offering the
   next one should still be there at the bottom of it, so on a wide screen it
   sits in its own column and sticks under the header while the left scrolls. */
.portal-layout{display:grid;gap:22px;align-items:start}
@media (min-width:1024px){
  .portal-layout{grid-template-columns:minmax(0,1fr) 360px;gap:26px}
  .portal-layout--single{grid-template-columns:minmax(0,1fr)}
  .portal-layout__side{position:sticky;top:calc(var(--header-offset) + 20px)}
}
.portal-layout__main{min-width:0}
.portal-layout__side .portal-card{margin-bottom:0;padding:28px 24px}
.portal-layout__side .role-card{gap:12px;padding:14px 16px}

/* ---------- number fields ----------
   The arrows invite a click that changes a quantity by one, and the wheel does
   the same by accident while somebody is scrolling past. Both are removed; the
   value is typed. */
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ---------- a phone number and its country code ----------
   Two controls, read as one field: the code is as wide as it needs to be and
   the number takes the rest. */
.tel-field{display:flex;gap:8px;align-items:stretch}
/* A select with `width:auto` sizes itself to its WIDEST option, and there are
   170 of them — the longest is "Saint Vincent and the Grenadines +1784". That
   is what made the code box wider than the number beside it. It is given a
   fixed width instead: enough for the common cases ("India +91", "Nepal +977")
   and for the code to stay readable, and the number takes the rest of the row.
   A long country name is clipped with an ellipsis in the closed control only —
   the open list still renders every option in full, at its own width. */
.tel-field select{
  /* Sized for the answer, not for the list: "India +91" and "Nepal +977" fit,
     and the longer names are clipped in the closed control while the open list
     still shows every option in full. The percentage keeps it honest in a
     two-column form at tablet width, where the field itself is only ~330px. */
  flex:0 1 8rem;
  width:8rem;
  min-width:6.75rem;
  max-width:34%;
  /* a notch down from the 18px the number is set in: the code is the smaller
     half of this pair, and the extra characters it buys are what keep longer
     entries like "Bangladesh +880" from losing their code to the ellipsis.
     Still 16px, so iOS does not zoom the page when it is tapped. */
  font-size:16px;
  text-overflow:ellipsis;
  /* the chevron comes in closer than on a full-width field: this control is
     130px wide and the answer needs the room more than the arrow does */
  padding-right:30px;
  padding-left:12px;
  background-position:right 10px center;
}
/* The number takes everything left over — a basis of 0 rather than auto,
   because `.field input` sets width:100% and an auto basis makes the input
   claim the whole row and drag the select down to its floor with it. */
.tel-field input{flex:1 1 0;min-width:0}

@media (max-width:480px){
  /* the side padding comes in at the floor width so the code is not clipped
     on the phone it is being typed on */
  .tel-field select{padding-left:12px;padding-right:12px}
}

/* an answer that is on its way out has nothing to say yet */
.faq-item.is-folding p{opacity:0}

@media (prefers-reduced-motion:reduce){
  .faq-item p{transition:none}
}

/* ---------- a payment stage behind the finance check ----------
   The section stays where it is — hiding it entirely reads as though the
   payment had gone away. What is behind the check is what you would act on. */
.portal-stage.is-sealed .portal-pay,
.portal-stage.is-sealed .portal-ledger__list{
  filter:blur(5px);
  opacity:.55;
  pointer-events:none;
  user-select:none;
}
.portal-stage.is-sealed{position:relative}
.portal-stage.is-sealed .portal-stage__note{position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){
  .portal-stage.is-sealed .portal-pay{filter:none;opacity:.35}
}

/* ---------- the one question the portal asks ----------
   Two answers, side by side: the one most people want in the accent pill, the
   other plainly available rather than hidden behind small print. */
.portal-choice{
  margin:22px 0 6px;
  padding:20px 22px;
  border:1px solid var(--line);
  border-left:4px solid var(--accent);
  border-radius:var(--radius);
  background:#fbfdfc;
}
.portal-choice__title{
  margin:0 0 6px;
  font-size:var(--t-sub);
  font-weight:700;
  color:var(--ink);
}
.portal-choice__note{
  margin:0 0 16px;
  font-size:var(--t-ui);
  line-height:1.6;
  color:var(--body);
}
.portal-choice__actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.portal-choice__actions form{margin:0}
.portal-choice__cancel{
  color:var(--ink-soft);
  border:1px solid var(--line);
  background:#fff;
}
.portal-choice__cancel:hover{border-color:#c9a0a8;color:#a33a4e;background:#fff}

/* the same answer, offered again in the corner of an order that has gone ahead */
.portal-app__undo{
  display:grid;
  justify-items:end;
  gap:6px;
  margin:0;
  flex:none;
  text-align:right;
}
.portal-app__undo-note{
  max-width:26ch;
  font-size:var(--t-micro);
  line-height:1.5;
  color:var(--muted);
}

/* ---------- answering a refusal of the paperwork ----------
   Sits under the reason it answers, inside the delivery stage that the refusal
   holds shut, so the two read as one thing: what is wrong, and the box to put
   it right in. */
.portal-docs{
  margin:14px 0 0;
  padding:18px 20px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--tint);
}
.portal-docs__title{
  margin:0 0 4px;
  font-size:var(--t-sub);
  font-weight:700;
  color:var(--ink);
}
.portal-docs__note{
  margin:0 0 16px;
  font-size:var(--t-ui);
  line-height:1.6;
  color:var(--body);
  max-width:64ch;
}

/* An address is case blind: the box shows it the way it is written down. */
input[type="email"],
input[name*="email"]{text-transform:lowercase}

/* --- skip link ---
   First stop for a keyboard: the header is a topbar plus a full navigation,
   which is about a dozen links before the content starts. */
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  left:16px;top:16px;
  z-index:2000;
  padding:10px 16px;
  background:var(--white,#fff);
  color:var(--ink,#0f2c4d);
  border-radius:var(--radius-sm,10px);
  box-shadow:0 8px 20px rgba(10,45,80,.18);
}

/* --- touch targets ---
   The circles and the small links keep their drawn size; an invisible square
   centred on each one carries the press, so nothing is under 44x44. */
.top-bar__social a,
.top-bar__email,
.footer-social a,
.nav-toggle{position:relative}
.top-bar__social a::after,
.top-bar__email::after,
.footer-social a::after,
.nav-toggle::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:max(100%,44px);
  height:max(100%,44px);
}

/* ---------- 22. targets a finger can hit ----------
   Measured at 390 px: the footer's legal links were 26 px rows, the blog card's
   "Read more" 26, the offer strip's close 30 and the skip link 31. The picture
   in each case is fine; the box around it was not. */
/* Only where a finger is doing the pointing. On a desktop this turned the
   footer's six columns into 44px rows and loosened the whole block for no
   reason — a mouse does not need the padding. */
@media (hover:none),(max-width:991px){
  .footer-policy a,
  .footer-links a{display:inline-flex;align-items:center;min-height:44px}
}

/* a date field is a control, and its box was 30 px */
.datefield__input,
.datefield__button{min-height:44px}

.proof-card__link{min-height:44px;display:inline-flex;align-items:center;gap:8px}

.blog-card__more,
.blog-more__link{min-height:44px;display:inline-flex;align-items:center;gap:8px}

.skip-link{min-height:44px;display:inline-flex;align-items:center}

/* the checkbox a consent line hangs on: 20 px is the browser's, 24 is ours, and
   the label beside it is part of the same target */
.field-consent input[type="checkbox"]{width:24px;height:24px}
.field-consent{min-height:44px}

/* ---------- 23. the reading column ----------
   Comfortable reading is 45-75 characters. Measured before this rule: 103 on
   the legal pages, 85 on the apply forms, 67 on the product pages. The
   technology page already read well because its columns are narrow — this
   gives every other long-form block the same ceiling. */
.legal-doc p,
.legal-doc li,
.legal-doc dd,
.form-step__head p,
.form-section__copy,
.section-sub,
.portal-app__copy,
.faq-item p,
.form-note,
.apply-form .field-hint{
  /* 60ch, not 68: Figtree's "0" is wide, so a 68ch box measured 87 characters
     of real text on the legal pages. This lands at about 70. */
  max-width:60ch;
}

/* a hint under a field is part of the field, so it may run to the field's own
   width where that is narrower */
.field .field-hint{max-width:min(68ch,100%)}

/* ---------- 24. the grid ----------
   What Bootstrap was here for. The audit found fourteen of its classes in use
   across the site — the twelve-column grid, four gutter sizes, one alignment
   utility and the screen-reader helper — against 233 KB of stylesheet. This is
   those fourteen, at Bootstrap's own numbers, so the markup did not have to
   change: 576 / 768 / 992 breakpoints, .25/.5/1/1.5/3rem spacers, a 1.5rem
   default gutter split either side of the column.

   Everything else Bootstrap gave us — the box-sizing, the body and heading
   resets, the list and link resets — section 2 above already does. */

/* Reboot normalises these, and a form control that falls back to the system
   font in the middle of a Figtree page is the one visible thing it did. */
button,input,select,textarea,optgroup{font-family:inherit;font-size:100%;line-height:inherit;margin:0}
button{cursor:pointer}

.row{
  --gutter-x:1.5rem;
  --gutter-y:0rem;
  display:flex;
  flex-wrap:wrap;
  margin-top:calc(-1 * var(--gutter-y));
  margin-right:calc(-.5 * var(--gutter-x));
  margin-left:calc(-.5 * var(--gutter-x));
}
.row > *{
  flex-shrink:0;
  width:100%;
  max-width:100%;
  padding-right:calc(var(--gutter-x) * .5);
  padding-left:calc(var(--gutter-x) * .5);
  margin-top:var(--gutter-y);
}

/* gutters: g sets both, gx across, gy down */
.g-4{--gutter-x:1.5rem;--gutter-y:1.5rem}
.gx-5{--gutter-x:3rem}
.gy-4{--gutter-y:1.5rem}
.gy-5{--gutter-y:3rem}

.align-items-center{align-items:center}

/* the twelve columns, at each width the markup asks for */
@media (min-width:576px){
  .col-sm-6{flex:0 0 auto;width:50%}
}
@media (min-width:768px){
  .col-md-6{flex:0 0 auto;width:50%}
}
@media (min-width:992px){
  .col-lg-3{flex:0 0 auto;width:25%}
  .col-lg-4{flex:0 0 auto;width:33.33333333%}
  .col-lg-5{flex:0 0 auto;width:41.66666667%}
  .col-lg-6{flex:0 0 auto;width:50%}
  .col-lg-7{flex:0 0 auto;width:58.33333333%}
  .col-lg-8{flex:0 0 auto;width:66.66666667%}
}

/* said to a screen reader, drawn for nobody */
.visually-hidden{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

@media (max-width:991px){
  /* rows a thumb can hit without aiming */
  .main-nav.is-open a,
  .main-nav.is-open summary{min-height:48px;display:flex;align-items:center}
}

/* ---------- 26. the icon font, only the icons we draw ----------
   The vendor face carries about 2,000 glyphs at 127 KB; this project draws 96
   of them. Declared after the vendor stylesheet, so this @font-face is the one
   that wins for the family and the full file is never fetched. Regenerate with
   fontTools.subset if a new bi-* class is used. */
@font-face{
  font-family:"bootstrap-icons";
  font-display:swap;
  src:url("../vendor/bootstrap-icons/font/fonts/bootstrap-icons-subset.woff2") format("woff2");
}

/* ---------- 27. the step that holds more than one thing ----------
   The application asks twelve things and used to ask them across twelve steps,
   which told somebody on the second that they were an twelfth of the way in.
   It is six steps now, and the old names live on as sub-headings inside them. */
.form-substep{
  margin:30px 0 4px;
  padding-top:20px;
  border-top:1px solid var(--line);
  font-size:var(--t-sub);
  font-weight:700;
  letter-spacing:.01em;
  color:var(--ink);
}
.form-step__head + .form-substep{margin-top:0;padding-top:0;border-top:0}

/* ---------- 28. the last of the report's list ----------
   Three small things the audit picked up at particular widths. */

/* At 1440 the section head put the eyebrow and title hard left and the
   sentence that explains them hard right, with 700 px of nothing between: they
   read as unrelated. The pair is capped so they stay in conversation. */
@media (min-width:1200px){
  .section-head{max-width:1120px;gap:64px}
  .section-head .section-sub{max-width:46ch}
}

/* The hero's supporting paragraph sits over the brightest part of the
   photograph. The scrim was spent by the time it reached it; this carries it
   the rest of the way down without touching the top of the image. */
.hero-media::after{
  background:
    linear-gradient(90deg,rgba(14,71,124,.94) 0%,rgba(5,36,65,.86) 30%,rgba(0,0,0,.5) 52%,rgba(0,0,0,.16) 70%,rgba(0,0,0,0) 84%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 34%),
    linear-gradient(0deg,rgba(3,18,31,.5) 0%,rgba(3,18,31,0) 38%);
}

/* "HOME / KINETIC HYDROGEN COOKING STOVE / APPLICATION" wrapped with the last
   crumb alone on a line. The middle one gives way first. */
@media (max-width:600px){
  .breadcrumb-x{flex-wrap:nowrap;min-width:0}
  .breadcrumb-x a:not(:first-child){
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:14ch;
  }
}

/* ---------- 29. the side margin on a smaller monitor ----------
   The vw term above only bites between about 1600 and 1900 px, where a fixed
   1463 left barely any air down the sides; the max() floor keeps the full
   width on a laptop, and the px cap keeps it on a large monitor. Below the
   tablet breakpoint the page has no width to spare at all, so the pixel
   padding takes over again. */
@media (max-width:1199px){
  :root{--container:1463px}
  .hero-inner{max-width:1505px}
}

/* --- the open list ---
   The panel a select drops down used to belong to the operating system, and
   nothing in it could be themed: a grey Windows list under a rounded navy-blue
   field. `appearance:base-select` hands the panel back, so it now wears the
   same white surface, hairline and radius as the field it belongs to. A browser
   without it keeps the native panel, which is still perfectly legible — this is
   an upgrade, not something the form depends on. */
@supports (appearance: base-select){
  .field select,
  .field select::picker(select){
    appearance:base-select;
  }

  .field select{
    /* the picker draws its own arrow now, so the painted chevron comes off */
    background-image:none;
    display:flex;
    align-items:center;
    gap:10px;
    /* base-select lets the chosen text wrap, which makes the control two lines
       tall and out of step with the inputs beside it — nowrap alone holds the
       height, and without `overflow:hidden` nothing can clip the arrow as it
       turns */
    white-space:nowrap;
  }
  .field select::picker-icon{
    /* the same chevron the closed field has always used, rather than the
       browser's own triangle */
    content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0.29 16 16' fill='%23768ba0'%3E%3Cpath d='M3.2 5.6a1 1 0 0 1 1.4 0L8 9l3.4-3.4a1 1 0 1 1 1.4 1.4l-4.1 4.1a1 1 0 0 1-1.4 0L3.2 7a1 1 0 0 1 0-1.4z'/%3E%3C/svg%3E");
    flex:none;
    width:14px;
    height:14px;
    /* The arrow does not move when the list opens on the public forms — it is a
       marker, not a control that reports state. The viewBox above is what keeps
       it centred in this box; no optical nudge is needed on top of it. */
  }
  .field select:open{border-color:var(--accent-deep)}

  /* The painted chevron is gone in this mode, so the gutter that was reserved
     for it goes too — the arrow is a flex item at the end of the row now, and
     the leftover padding was pushing it inward by a different amount on the
     narrow country-code control than on a full-width field. */
  .field select{padding-right:16px}
  .tel-field select{padding-right:12px;background-position:0 0}

  .field select::picker(select){
    margin-block-start:6px;
    padding:6px;
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    background:var(--white);
    box-shadow:var(--shadow-card);
    max-height:min(340px,60vh);
    opacity:0;
    translate:0 -4px;
    transition:opacity .16s ease,translate .16s ease,
               overlay .16s allow-discrete,display .16s allow-discrete;
  }
  .field select:open::picker(select){opacity:1;translate:0 0}
  @starting-style{
    .field select:open::picker(select){opacity:0;translate:0 -4px}
  }

  .field select option{
    display:flex;
    align-items:center;
    gap:10px;
    white-space:normal;
    padding:10px 12px;
    border-radius:6px;
    font-size:var(--t-sub);
    line-height:1.4;
    color:var(--ink);
  }
  .field select option:hover,
  .field select option:focus{background:var(--tint);outline:none}
  /* the chosen row is marked by a solid tick in the place every other list on
     the machine puts it — the picker's own outline glyph is thin enough to be
     missed against the option text */
  .field select option:checked{background:var(--tint)}
  .field select option:disabled{color:var(--muted)}
  /* the tick is drawn, not fetched: two borders on a box turned 45 degrees, so
     its weight is a border-width rather than an image to ship and scale */
  .field select option::checkmark{display:none}
  .field select option:checked::checkmark{
    display:block;
    content:"";
    flex:none;
    width:7px;
    height:12px;
    margin:0 6px 3px 2px;
    border:solid var(--ink);
    border-width:0 3px 3px 0;
    transform:rotate(45deg);
  }

  @media (prefers-reduced-motion:reduce){
    .field select::picker(select),
  }
}


/* --- date fields ---
   Left alone, a date input wears the browser's own furniture: a grey glyph at
   a different size to our icons, and a hit area of a few pixels. */
.field input[type="date"]:not(.datefield__input),
.field input[type="datetime-local"]:not(.datefield__input){
  position:relative;
  appearance:none;
  -webkit-appearance:none;
  padding-right:48px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230e8f96'%3E%3Cpath d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z'/%3E%3Cpath d='M6.5 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m-9 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0m3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 17px center;
  background-size:17px 17px;
  cursor:pointer;
}

/* ---------- 30. Footer density on a phone ----------
   The footer is six link columns; stacked one per row they inherited desktop
   rhythm (70px above, 64px between blocks, 22px under every heading) and ran
   past 2900px. The spacing is stepped down to an 8pt scale for small screens
   only — nothing above 767px changes, and no link loses its 44px row. */
@media (max-width:767px){
  .site-footer{padding-top:44px}
  .footer-top{gap:24px;padding-bottom:32px}
  .footer-cols{gap:24px 20px;padding-bottom:28px}
  .site-footer h2{margin-bottom:14px}
  .footer-links{gap:10px}
  .footer-brand{margin-bottom:16px}
  .footer-legal{margin-bottom:12px}
  .footer-bottom{gap:12px;padding:20px 0 24px}
}

/* ---------- 31. hover lifts do not belong on a touch screen ----------
   :hover latches on touch: the finger that starts a scroll lands on a card
   or a button, that element lifts, and it stays lifted after the finger has
   gone. Dragging down the page therefore left a trail of raised, stretched
   looking buttons. Only the movement is dropped — colour and shadow still
   answer a tap, and pointer devices keep the lift. */
@media (hover:none){
  
  .top-bar__social a:hover,
  .btn-pill:hover i,
  .btn-pill--accent:hover,
  .btn-pill--white:hover,
  .btn-dark:hover,
  .nav-dropdown:hover .nav-dropdown__menu, .nav-dropdown:focus-within .nav-dropdown__menu, .nav-dropdown[open] .nav-dropdown__menu,
  /* nothing to lead into, so the icon stays put on hover */ .nav-raffle:hover i,
  .app-card:hover,
  .app-card:hover img,
  .app-card:hover .round-arrow,
  .product-card:hover,
  .product-card:hover .product-card__media img,
  .btn-pill--grad:hover,
  .why-card:hover,
  .proof-card:hover,
  .proof-card__link:hover i,
  .proof-tag:hover,
  .btn-pill--ghost-ink:hover,
  .partner-row img:hover,
  .blog-more__link:hover i,
  .blog-card:hover,
  .blog-card:hover .blog-card__media img,
  .blog-card__more:hover i,
  .post-drawer__close:hover,
  .btn-pill--teal:hover,
  .footer-subscribe__btn:hover,
  .footer-social a:hover,
  .consent-btn--accept:hover,
  .icon-card:hover,
  .shot:hover,
  .contact-card:hover,
  .btn-pill:disabled:hover, .btn-pill.is-locked:hover,
  .btn-pill:disabled:hover i, .btn-pill.is-locked:hover i,
  .form-nav [data-step-prev]:hover i,
  .form-nav [data-step-prev]:disabled:hover,
  .soon-link:hover,
  .safety-card:hover,
  .portal-referral__copy:hover, .portal-referral__link:hover,
  .role-card:hover
  {transform:none}
  /* this one centres itself with the same property — put the base back */
  .flow-step:hover .flow-orb::before{transform:translate(-50%,-50%)}
}

/* ---------- 32. no floating back-to-top on a phone ----------
   It is fixed to the corner of the viewport, so on a narrow screen it rides
   over the page as you scroll and lands on whatever is under it — on the
   contact form that is the right-hand end of the input you are trying to tap.
   Fading and sliding in and out on every scroll is what read as buttons
   glitching and sticking to the screen. A phone scrolls back up fine without
   it; the button stays for pointer-sized screens. */
@media (max-width:767px){
  .to-top{display:none}
}

/* ---------- 33. scroll reveal does not travel on a phone ----------
   .reveal rises 22px as it enters. On a desktop the page is still while that
   plays; on a phone the finger is mid-scroll, so the block is moving up while
   the page moves down and it reads as the thing stretching in the direction of
   travel — the map, the subscribe row and every button did it.

   The :has() list above patched this element by element (button, input,
   select, summary) and could only ever miss things: an <iframe> is in none of
   those, which is why the map still slid. On a small screen the travel itself
   is the problem, so it goes for everything and the fade carries the reveal. */
@media (max-width:767px){
  .reveal{transform:none}
}