/* =========================================================================
   EduGrowth — main.css
   Palette is deliberately distinct from any supplier material:
   deep teal + warm amber on a warm off-white.
   ========================================================================= */

:root{
  --teal-900:#06382e;
  --teal-800:#0a5343;
  --teal:#0f6f5c;
  --teal-600:#15826c;
  --teal-100:#e4f1ed;
  --teal-50:#f2f8f6;
  /* Section bands use a slightly deeper tint than --teal-50, so alternating
     light sections are actually distinguishable against --bg rather than
     reading as one continuous block. */
  --band:#eaf3ef;

  /* Second corporate colour, as supplied. Two tokens, one hue:
       --amber      the brand orange, used wherever the orange is the FILL
                    (buttons, step numbers, badges).
       --amber-ink  a darker shade of the same hue, used wherever the orange is
                    TEXT or an ICON on a light background. At 3.2:1 the brand
                    orange is too light to read at small sizes; this clears
                    4.7:1 and still reads as the same colour. */
  --amber:#e56b1d;
  --amber-600:#c95a13;   /* hover: darker, so white button text keeps its contrast */
  --amber-ink:#b85617;
  --amber-100:#fdf0e0;

  --ink:#11221d;
  --ink-2:#3c534b;
  --ink-3:#6a7d76;
  --line:#dde6e2;
  --line-2:#ecf2ef;
  --bg:#fbfcfb;
  --card:#ffffff;

  --ok:#15826c;
  --warn:#c9791b;

  --r-sm:10px; --r:14px; --r-lg:20px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(9,40,33,.06), 0 4px 14px rgba(9,40,33,.05);
  --sh-2:0 10px 40px rgba(9,40,33,.10);
  --wrap:1240px;
  --navy-900:#0e1f31;
  --navy-800:#152c44;
  --cream:#fbf9f4;

  --font:"Plus Jakarta Sans", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --font-display:"Playfair Display", Georgia, "Times New Roman", serif;
  /* Playfair Display ships old-style figures by default, so "RM388" would sit
     lower than the capitals beside it. Every display heading asks for lining
     figures instead; see the .display / .phero-h rules below. */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.18;letter-spacing:-.02em;font-weight:800}
p{margin:0 0 1rem}
.ic{flex:0 0 auto}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
.wrap.narrow{max-width:780px}
.center{text-align:center}
.center-x{justify-content:center}
.mt{margin-top:18px}
.mt-lg{margin-top:38px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;border-radius:8px;z-index:200}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:inherit;font-weight:700;font-size:15.5px;line-height:1;
  padding:14px 22px;border-radius:var(--r-sm);border:1.5px solid transparent;
  cursor:pointer;transition:.18s ease;white-space:nowrap;
}
.btn-lg{padding:17px 28px;font-size:16.5px}
.btn-sm{padding:10px 16px;font-size:14.5px}
.btn.full{width:100%}
.btn-pri{background:var(--teal);color:#fff;box-shadow:0 6px 18px rgba(15,111,92,.22)}
.btn-pri:hover{background:var(--teal-600);transform:translateY(-1px)}
.btn-gho{background:#fff;color:var(--teal);border-color:var(--line)}
.btn-gho:hover{border-color:var(--teal);background:var(--teal-50)}
.btn-amb{background:var(--amber);color:#fff}
.btn-amb:hover{background:var(--amber-600)}
.btn-wa{background:#fff;color:var(--teal-800);border-color:var(--line)}
.btn-wa:hover{border-color:var(--teal)}
.btn-light{background:#fff;color:var(--teal-900)}
.btn-light:hover{background:#eef7f4}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-outline-light:hover{background:rgba(255,255,255,.10)}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}

.link-arrow{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15.5px;color:var(--teal)}
.link-arrow:hover{gap:11px;transition:gap .18s}
.center-b{display:flex;justify-content:center;margin-top:12px}

/* ---------------------------------------------------------------- header */
/* Solid, not translucent: at 92% the white text of the section below was
   ghosting through the bar as it scrolled past. */
.site-head{position:sticky;top:0;z-index:100;background:var(--bg);border-bottom:1px solid var(--line-2)}
.head-in{display:flex;align-items:center;gap:20px;height:74px}
.brand{display:flex;align-items:center;gap:10px;color:var(--teal);flex:0 0 auto}
.brand-mark{display:flex;flex:0 0 auto}
.brand-mark img{width:48px;height:48px;object-fit:contain;display:block}
.brand-txt{font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--ink)}
.brand-txt span{color:var(--teal)}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{color:var(--ink-2);font-weight:600;font-size:15.5px}
.nav a:not(.btn):hover{color:var(--teal)}
.nav a:not(.btn)[aria-current="page"]{color:var(--teal);position:relative}
.nav a:not(.btn)[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--teal);border-radius:2px;
}
.nav a.nav-agent[aria-current="page"]{color:var(--amber-ink)}
.nav a.nav-agent[aria-current="page"]::after{background:var(--amber)}
.nav a.btn:hover,.nav a.btn:focus{color:#fff}
.nav .nav-agent{color:var(--amber-ink);font-weight:700}
.nav a.nav-agent:not(.btn):hover{color:var(--amber-600)}
.nav .nav-cta{color:#fff;margin-left:6px}

/* language switcher */
.lang-switch{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--line);
  border-radius:999px;padding:3px;background:#fff;margin-left:4px}
.nav .lang-switch a{font-size:13px;font-weight:700;color:var(--ink-3);
  padding:5px 10px;border-radius:999px;line-height:1}
.nav .lang-switch a:hover{color:var(--teal);background:var(--teal-50)}
.nav .lang-switch a.on{background:var(--teal);color:#fff}
.burger{display:none;margin-left:auto;width:44px;height:44px;border:1px solid var(--line);background:#fff;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer}
.burger span{display:block;width:19px;height:2px;background:var(--ink);border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------------------------------------------------------------- hero slider */
.hero{position:relative;overflow:hidden;background:var(--navy-900)}   /* dark base: nothing white can ever show between slides */
.slides{display:grid}
/* Each slide fills the screen below the header (capped so it never gets absurd
   on a very tall monitor), with its content vertically centred. */
.slide{
  grid-area:1/1;opacity:0;visibility:hidden;pointer-events:none;z-index:1;
  transition:opacity .45s ease, visibility 0s linear .45s;
  display:flex;align-items:center;
  min-height:min(700px, calc(100vh - 74px));
  min-height:min(700px, calc(100svh - 74px));
}
.slide{position:relative;overflow:hidden}
.slide > .wrap{width:100%;position:relative;z-index:2}

/* Photo sits behind the copy, anchored right so the subject is never cropped out.
   The scrim keeps the headline readable at every width. */
.slide-bg{position:absolute;inset:0;display:block}
.slide-bg img{width:100%;height:100%;object-fit:cover;object-position:82% center}
.scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,25,40,.95) 0%, rgba(10,25,40,.90) 30%, rgba(10,25,40,.55) 58%, rgba(10,25,40,.10) 100%),
    linear-gradient(180deg, rgba(10,25,40,.35) 0%, rgba(10,25,40,0) 35%);
}
/* .scrim.green is kept for a future green-artwork slide; nothing uses it now. */
.scrim.green{
  background:
    linear-gradient(90deg, rgba(4,42,31,.95) 0%, rgba(4,42,31,.90) 30%, rgba(4,42,31,.52) 58%, rgba(4,42,31,.08) 100%),
    linear-gradient(180deg, rgba(4,42,31,.35) 0%, rgba(4,42,31,0) 35%);
}
/* Slide 2's artwork is a deep blue, so its scrim is mixed from that same blue
   and only darkens the photo rather than tinting it. */
.scrim.blue{
  background:
    linear-gradient(90deg, rgba(0,24,48,.95) 0%, rgba(0,24,48,.90) 30%, rgba(0,24,48,.52) 58%, rgba(0,24,48,.06) 100%),
    linear-gradient(180deg, rgba(0,24,48,.35) 0%, rgba(0,24,48,0) 35%);
}
/* The incoming slide fades in ON TOP of the outgoing one, which stays fully
   opaque underneath until the fade finishes. Cross-fading both at once let the
   page background show through the middle of the transition. */
.slide.on{opacity:1;visibility:visible;pointer-events:auto;z-index:3;
  transition:opacity .45s ease, visibility 0s}
.slide.prev{opacity:1;visibility:visible;z-index:2;transition:none}

/* slide 1 — dark statement */
.slide-dark{
  background:
    radial-gradient(900px 500px at 78% 12%, rgba(31,74,105,.55) 0%, rgba(14,31,49,0) 62%),
    linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 62%);
  color:var(--cream);
}
.s1-in{padding:clamp(30px,4.6vh,58px) 22px clamp(38px,5.4vh,68px);max-width:1240px}
.eyebrow-out{
  display:inline-block;border:1px solid rgba(251,249,244,.30);border-radius:8px;
  padding:9px 16px;font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:rgba(251,249,244,.92);margin-bottom:clamp(14px,2.4vh,24px);
}
p.display{margin:0}
/* Sized against BOTH width and height so the whole slide — eyebrow, headline,
   subline, buttons — stays inside the first screen on short laptops too. */
.display{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.015em;line-height:1.12;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
  font-size:clamp(30px, min(3.9vw, 7.6vh), 56px);
  max-width:20ch;color:var(--cream);
}
.lede.light{color:rgba(251,249,244,.78);max-width:56ch;font-size:clamp(15.5px,1.25vw,18px);margin-top:clamp(14px,2.2vh,22px)}
.slide-dark .btn-row{margin-top:clamp(18px,3vh,30px)}

/* slide 2 — same dark treatment, light shifted so the two slides don't read as a glitch */
.slide-dark.alt2{
  background:
    radial-gradient(820px 460px at 18% 10%, rgba(10,72,122,.45) 0%, rgba(0,22,46,0) 60%),
    linear-gradient(200deg, #013461 0%, #00172f 62%);
}
.slide-dark.alt2 .display{max-width:22ch}
.lede{font-size:clamp(17px,1.5vw,19.5px);color:var(--ink-2);margin-top:20px;max-width:37em}
.micro{font-size:13.5px;color:var(--ink-3);display:flex;align-items:center;gap:7px;margin-top:clamp(12px,1.8vh,18px)}
.micro .ic{color:var(--teal)}
.micro.on-dark{color:rgba(251,249,244,.62)}
.micro.on-dark .ic{color:#6fc2ab}


/* controls */
.sl-arrow{position:absolute;top:50%;margin-top:-22px;z-index:4;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(251,249,244,.30);background:rgba(255,255,255,.10);backdrop-filter:blur(6px);
  color:var(--cream);display:grid;place-items:center;cursor:pointer;transition:.18s}
.sl-arrow:hover{background:rgba(255,255,255,.22);color:#fff}
.sl-arrow.prev{left:16px} .sl-arrow.next{right:16px}
.sl-dots{position:absolute;left:0;right:0;bottom:22px;z-index:4;display:flex;justify-content:center;gap:9px}
.sl-dots .dot{width:34px;height:5px;border-radius:99px;border:0;padding:0;cursor:pointer;
  background:rgba(251,249,244,.30);transition:.2s}
.sl-dots .dot.on{background:var(--cream);width:52px}

/* device mock */
.hero-vis{display:flex;justify-content:center}
/* --- device mock: kept for reuse on other pages; not used on the homepage --- */
.device{width:100%;max-width:430px;background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-2);border:1px solid var(--line);overflow:hidden}
.device-bar{display:flex;gap:6px;padding:13px 16px;background:var(--teal-900)}
.device-bar span{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.28)}
.device-body{padding:20px}
.dv-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}
.dv-title{font-weight:800;font-size:17px}
.dv-sub{font-size:13px;color:var(--ink-3);margin-top:2px}
.dv-avatar{width:34px;height:34px;border-radius:50%;background:var(--teal-50);color:var(--teal);display:grid;place-items:center}
.dv-row{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line-2);border-radius:12px;margin-bottom:9px;background:#fff}
.dv-row.done{background:var(--teal-50);border-color:#cfe6df}
.dv-row.warn{background:#fdf6ec;border-color:#f2e2c7}
.dv-tick{width:26px;height:26px;border-radius:8px;background:var(--teal);color:#fff;display:grid;place-items:center;flex:0 0 auto}
.dv-tick.alt{background:var(--amber)}
.dv-tick.ghost{background:#eaf0ee;color:var(--ink-3)}
.dv-name{font-weight:700;font-size:14.5px;flex:1}
.dv-tag{font-size:11.5px;font-weight:700;color:var(--teal);background:#fff;border:1px solid #cfe6df;padding:4px 9px;border-radius:999px;white-space:nowrap}
.dv-tag.alt{color:var(--amber-ink);border-color:#f0d9b4}
.dv-tag.ghost{color:var(--ink-3);border-color:var(--line)}
.dv-bar{height:7px;background:#eef3f1;border-radius:99px;margin-top:16px;overflow:hidden}
.dv-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--teal-600));border-radius:99px}

/* ---------------------------------------------------------------- strip */
.strip{background:var(--teal-900);color:#cfe6df}
.strip-in{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 30px;padding:16px 22px}
.strip-item{font-size:14px;font-weight:600;display:flex;align-items:center}
.strip-item+.strip-item::before{content:"";width:4px;height:4px;border-radius:50%;background:rgba(207,230,223,.45);margin-right:30px}
.strip-item.hi{color:#fff;font-weight:800}

/* --------------------------------------------- programme intro + subjects */
.intro-sec{background:var(--band);border-block:1px solid var(--line)}
/* white variant, used where the tinted band is not wanted (programme page) */
.intro-sec.intro-plain{background:#fff}
.intro-head{max-width:820px;margin:0 auto;text-align:center}
.intro-head .eyebrow{margin-bottom:18px}
.intro-lede{font-size:clamp(17px,1.6vw,20px);font-weight:600;color:var(--teal-800);margin:14px 0 0}
.intro-body{font-size:16.5px;color:var(--ink-2);margin:16px auto 0;max-width:64ch}

.subject-block{margin-top:44px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);padding:32px 28px 26px;box-shadow:var(--sh-1)}
.subject-h{text-align:center;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em;
  color:var(--ink);font-weight:800;margin:0 0 28px}
.subject-grid{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:30px 18px}
.subject{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.subject-ic{display:block;width:84px;height:84px;transition:transform .18s ease}
.subject-ic img{width:100%;height:100%;object-fit:contain;display:block}
.subject:hover .subject-ic{transform:translateY(-4px) scale(1.03)}
.subject-t{font-size:13.5px;font-weight:700;color:var(--ink-2);line-height:1.25}
/* .micro is a flex row, so text-align alone will not centre it */
.subject-block .micro{justify-content:center;text-align:center;margin-top:22px}


/* ---------------------------------------------------------------- sections */
.sec{padding:74px 0}
.sec.tight{padding:52px 0}
.sec.alt{background:var(--band);border-block:1px solid var(--line)}
.sec-h{font-size:clamp(25px,3vw,36px)}
.sec-intro{max-width:760px}
.sec-h.center+.grid-3{margin-top:38px}
.sec-lede{font-size:17.5px;color:var(--ink-2);margin-top:14px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.08em;color:var(--teal);background:var(--teal-100);padding:6px 12px;border-radius:999px;margin-bottom:16px}

.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh-1)}
.card h3{font-size:18.5px}
.card p{color:var(--ink-2);font-size:15.5px;margin:10px 0 0}
.card.quote h3{color:var(--teal-800);font-size:19px}
.card.quote::before{content:"";display:block;width:34px;height:3px;border-radius:2px;background:var(--amber);margin-bottom:16px}

.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px}
.tile-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--teal-100);color:var(--teal);margin-bottom:14px}
.tile h3{font-size:16.5px}
.tile p{font-size:14.5px;color:var(--ink-2);margin-top:8px}

.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.steps.three{grid-template-columns:repeat(3,1fr)}
/* The number sits above the rule, so the list needs more clearance than the
   plain .mt utilities give it. These also restore the margin that .steps{margin:0}
   would otherwise cancel. */
.steps.mt{margin-top:36px}
.steps.mt-lg{margin-top:56px}
.steps.stack.mt{margin-top:20px}
.steps.stack.mt-lg{margin-top:38px}
.step{position:relative;padding-top:16px;border-top:2px solid var(--line)}
.step-n{position:absolute;top:-17px;left:0;width:32px;height:32px;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:14px}
.step h3{font-size:17.5px;margin-top:24px}
.step p{font-size:15px;color:var(--ink-2);margin-top:8px}

/* ------------------------------------------------------- parent view (key) */
.parentview{background:linear-gradient(180deg,#fff 0%,var(--teal-50) 100%)}
.pv-in{display:grid;grid-template-columns:1fr 1.02fr;gap:56px;align-items:center}
.report{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:24px;box-shadow:var(--sh-2)}
.rp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line-2)}
.rp-title{font-weight:800;font-size:18px}
.rp-sub{font-size:13px;color:var(--ink-3);margin-top:2px}
.rp-week{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--teal);background:var(--teal-100);padding:6px 11px;border-radius:999px}
.rp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.rp-stats div{text-align:center}
.rp-stats b{display:block;font-size:25px;font-weight:800;letter-spacing:-.03em}
.rp-stats span{font-size:12px;color:var(--ink-3)}
.rp-rows{padding:18px 0 10px;display:grid;gap:13px}
.rp-row{display:grid;grid-template-columns:110px 1fr 42px;align-items:center;gap:12px}
.rp-s{font-size:14px;font-weight:600;color:var(--ink-2)}
.rp-track{height:9px;background:#eef3f1;border-radius:99px;overflow:hidden}
.rp-track i{display:block;height:100%;border-radius:99px}
.rp-track i.ok{background:var(--ok)}
.rp-track i.warn{background:var(--warn)}
.rp-v{font-size:13.5px;font-weight:800;text-align:right}
.rp-key{display:flex;gap:18px;padding-top:12px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--ink-3)}
.rp-key span{display:inline-flex;align-items:center;gap:7px}
.rp-key .k{width:9px;height:9px;border-radius:3px;display:inline-block}
.rp-key .k.ok{background:var(--ok)} .rp-key .k.warn{background:var(--warn)}
.rp-note{font-size:11.5px;color:var(--ink-3);margin:12px 0 0;font-style:italic}

/* ------------------------------------------------------- feature tiles */
.featsec{background:var(--bg)}
.featsec-lede{max-width:74ch;margin-left:auto;margin-right:auto}
.feat-grid{
  list-style:none;margin:40px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;
}
.feat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);text-align:center;
  display:flex;flex-direction:column;transition:.18s ease;
}
.feat:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--teal)}
.feat-top{
  display:grid;place-items:center;padding:22px 16px 18px;
  /* One calm tint for every tile. The artwork is multi-coloured, so an
     alternating warm panel fought with it. */
  background:linear-gradient(160deg, var(--teal-100) 0%, var(--teal-50) 100%);
}
/* The artwork carries its own colour and shadow, so it sits straight on the
   panel rather than inside a disc. */
.feat-ic{display:block;width:104px;height:104px;transition:transform .22s ease}
.feat-ic img{width:100%;height:100%;object-fit:contain;display:block}
.feat:hover .feat-ic{transform:translateY(-3px) scale(1.05)}
.feat h3{
  font-size:15.5px;line-height:1.35;letter-spacing:-.01em;
  padding:16px 14px 20px;flex:1;display:flex;align-items:center;justify-content:center;
}

/* ---------------------------------------------------------------- levels */
.card.level{display:flex;flex-direction:column;transition:.18s;padding:0;overflow:hidden}
.card.level:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:var(--sh-2)}
/* The illustration is a full-bleed banner, so the padding moves onto the text. */
.level-img{display:block;background:var(--teal-50)}
.level-img img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  transition:transform .35s ease}
.card.level:hover .level-img img{transform:scale(1.035)}
.card.level > :not(.level-img){margin-inline:26px}
.card.level > .level-k{margin-top:24px}
.card.level > :last-child{margin-bottom:26px}
.level-k{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);margin-bottom:8px}
/* The card is an <a>, so it would otherwise inherit the teal link colour. */
.card.level h3{font-size:22px;color:var(--ink)}
.card.level p{flex:1}
.card.level .link-arrow{margin-top:auto;padding-top:18px}

/* ---------------------------------------------------------------- chips */
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 18px;font-weight:600;font-size:15px}

/* ---------------------------------------------------------------- price */
.price-in{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start}
.price-card{background:var(--teal-900);color:#fff;border-radius:var(--r-xl);padding:32px 28px;text-align:center;box-shadow:var(--sh-2)}
.price-cur{font-size:20px;font-weight:700;color:#8fd3c2;vertical-align:top;line-height:1}
.price-num{font-size:68px;font-weight:800;letter-spacing:-.05em;line-height:1}
.price-unit{display:block;font-size:14px;color:#a9d8cc;margin-top:6px}
.price-per{display:inline-block;margin:16px 0 22px;font-size:13.5px;font-weight:700;color:#0b3b31;background:#8fd3c2;padding:6px 14px;border-radius:999px}
.price-card .link-arrow{color:#8fd3c2}
.inc{width:100%;border-collapse:collapse;margin-top:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.inc th{background:var(--teal-50);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);text-align:left;padding:12px 16px}
.inc td{padding:13px 16px;border-top:1px solid var(--line-2);font-size:15px;vertical-align:top}
.inc td:first-child{font-weight:600;display:flex;gap:9px;align-items:flex-start}
.inc td:first-child .ic{color:var(--teal);margin-top:3px}
.inc td:last-child{color:var(--ink-2)}

/* ---------------------------------------------------------------- faq */
.faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:10px;overflow:hidden}
.faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 20px;font-weight:700;font-size:17px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq-x{position:absolute;right:20px;top:50%;width:14px;height:14px;margin-top:-7px}
.faq-x::before,.faq-x::after{content:"";position:absolute;background:var(--teal);border-radius:2px;transition:.2s}
.faq-x::before{left:0;top:6px;width:14px;height:2px}
.faq-x::after{left:6px;top:0;width:2px;height:14px}
.faq details[open] .faq-x::after{transform:rotate(90deg);opacity:0}
.faq details p{padding:0 20px 20px;margin:0;color:var(--ink-2);font-size:15.5px}

/* ---------------------------------------------------------------- agent */
/* Photo banner with a fixed-attachment parallax. The artwork keeps its left
   third deliberately empty, and the cream scrim below holds the copy on a
   consistent base so the brown text stays readable wherever the photo sits. */
.agentband{
  position:relative;isolation:isolate;overflow:hidden;
  border-block:1px solid #f2ddba;padding:clamp(48px,6vw,72px) 0;
  /* The artwork scrolls with the section, so background-size is framed against
     the band itself: this height shows the whole scene with almost no crop. */
  min-height:min(560px,68vh);display:flex;align-items:center;
  background-color:var(--amber-100);
  background-image:var(--ab-jpg);
  background-repeat:no-repeat;background-size:cover;
  background-position:78% center;background-attachment:scroll;
}
.agentband > .wrap{width:100%}
@supports (background-image: image-set(url("a.webp") type("image/webp"))){
  .agentband{background-image:image-set(var(--ab-webp) type("image/webp"), var(--ab-jpg) type("image/jpeg"))}
  @media (max-width:1000px){
    .agentband{background-image:image-set(var(--ab-webp-sm) type("image/webp"), var(--ab-jpg-sm) type("image/jpeg"))}
  }
}
.agentband::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(95deg,
    rgba(253,240,224,.97) 0%,
    rgba(253,240,224,.95) 34%,
    rgba(253,240,224,.72) 52%,
    rgba(253,240,224,.14) 68%,
    rgba(253,240,224,0) 80%);
}
.ab-in{display:grid;grid-template-columns:minmax(0,60%) 1fr;gap:40px;align-items:center}
.ab-copy h2{font-size:clamp(22px,2.4vw,29px);color:#7a3200}
.ab-copy p{color:#5f4019;margin-top:12px;max-width:46em}
.ab-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.ab-list li{display:flex;align-items:flex-start;gap:9px;font-size:15px;font-weight:600;color:#5f4019;line-height:1.45}
.ab-list .ic{color:var(--amber-ink);flex:0 0 auto;margin-top:3px}
.ab-cta{margin-top:26px}
.ab-disc{font-size:13px;color:#7d5a2a;margin:16px 0 0;font-style:italic}

/* ---------------------------------------------------------------- blog */
.card.post{display:flex;flex-direction:column;transition:.18s}
.card.post:hover{transform:translateY(-3px);border-color:var(--teal)}
.post-cat{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--amber-ink);margin-bottom:10px}
.card.post h3{font-size:18px;color:var(--ink);flex:1}
.card.post .link-arrow{margin-top:16px}

/* ---------------------------------------------------------------- final */
.finalcta{background:var(--teal-900);color:#fff;padding:76px 0}
.finalcta h2{font-size:clamp(26px,3vw,38px)}
.finalcta p{color:#b9ddd3;max-width:620px;margin:16px auto 0;font-size:17px}
.final-phone{font-size:15px;color:#8fb8ad;margin-top:22px}
.final-phone a{color:#fff;font-weight:700}

/* ---------------------------------------------------------------- footer */
.site-foot{background:#0a1f1a;color:#9db8b0;padding:58px 0 26px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(4, minmax(0,1fr));gap:34px;align-items:start}
.foot-logo{display:flex;align-items:center;gap:10px}
/* The mark's dark green sinks into the near-black footer, so lift it there. */
.foot-logo img{width:40px;height:40px;object-fit:contain;filter:brightness(1.5) saturate(1.05)}
.foot-brand .brand-txt{color:#fff;font-size:22px}
.foot-brand .brand-txt span{color:#6fc2ab}
.foot-brand p{margin:12px 0 18px;max-width:30em}
.foot-phone{display:flex;flex-direction:column;gap:2px;margin:0 0 16px}
.foot-phone span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#7d968f}
.foot-phone a{color:#fff;font-size:19px;font-weight:800;letter-spacing:-.01em}
.foot-phone a:hover{color:#6fc2ab}
.foot-col h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;line-height:1.3}

.foot-col a{display:block;color:#9db8b0;padding:5px 0;font-size:15px}
.foot-col a:hover{color:#fff}
.foot-legal{border-top:1px solid rgba(255,255,255,.10);margin-top:42px;padding-top:24px}
.foot-legal p{font-size:12.5px;line-height:1.65;color:#7d968f;max-width:none}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 26px;
  align-items:center;margin-top:18px;font-size:12.5px;color:#7d968f}
.foot-links{display:flex;flex-wrap:wrap;gap:10px 22px;margin-left:auto}
.foot-links a{color:#9db8b0}
.foot-links a:hover{color:#fff}

/* ---------------------------------------------------------------- floats */
/* WhatsApp brand green, not the site teal */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.38)}
.wa-float:hover{background:#1EBE5B;transform:translateY(-2px);transition:.18s ease}
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:95;gap:10px;padding:10px 14px;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);
  transform:translateY(110%);transition:transform .22s ease}
.mobile-bar.on{transform:none}
.mobile-bar .btn{flex:1}


/* =========================================================================
   INNER PAGES
   Everything below is used by the pages under /programme, /levels,
   /become-agent, /about, /faq, /contact, /blog, /thank-you and the legal set.
   ========================================================================= */

/* ------------------------------------------------------- inner page header */
/* Photo banner behind every inner-page header. The artwork stays bright: the
   image sits on ::before and a soft cream wash on ::after lifts the left side
   just enough to hold the copy, fading out entirely on the right. The heading
   is dark rather than cream, because cream text cannot sit on a bright photo.
   The gradient underneath is the fallback while the photo loads. */
.phero{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(200deg, #fdf9f2 0%, #f5efe3 62%);
  color:var(--ink-2);
  padding:clamp(34px,5vw,58px) 0 clamp(40px,5.4vw,62px);
}
.phero::before,.phero::after{content:"";position:absolute;inset:0;pointer-events:none}
.phero::before{
  z-index:-2;
  background-image:var(--ph-jpg);
  background-repeat:no-repeat;background-size:cover;background-position:72% center;
}
.phero::after{
  z-index:-1;
  background:linear-gradient(90deg,
    rgba(224,211,190,.72) 0%, rgba(224,211,190,.68) 38%,
    rgba(235,224,207,.48) 55%, rgba(253,249,242,.32) 76%, rgba(253,249,242,0) 94%);
}
@supports (background-image: image-set(url("a.webp") type("image/webp"))){
  .phero::before{background-image:image-set(var(--ph-webp) type("image/webp"), var(--ph-jpg) type("image/jpeg"))}
  @media (max-width:1000px){
    .phero::before{background-image:image-set(var(--ph-webp-sm) type("image/webp"), var(--ph-jpg-sm) type("image/jpeg"))}
  }
}
@media (max-width:1000px){
  .phero::before{background-image:var(--ph-jpg-sm);background-position:66% center}
}
@media (max-width:760px){
  /* On a phone the copy fills the band, so the wash goes nearly solid and the
     photo reads as a soft warm texture behind it. */
  .phero::after{
    background:linear-gradient(180deg, rgba(235,224,207,.86) 0%, rgba(235,224,207,.93) 45%, rgba(235,224,207,.96) 100%);
  }
}
.phero .eyebrow-out{margin-bottom:18px}
.phero-h{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.015em;line-height:1.14;
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
  font-size:clamp(28px,3.6vw,46px);max-width:22ch;color:var(--teal-900);
}
.phero-sub{
  margin:16px 0 0;max-width:54ch;font-size:clamp(16px,1.35vw,18.5px);
  color:var(--ink-2);line-height:1.62;
}
/* The eyebrow chip and breadcrumbs are cream-on-dark elsewhere, so they are
   re-coloured for this band specifically. */
.phero .eyebrow-out{
  border-color:rgba(6,56,46,.22);color:var(--teal-800);background:rgba(255,255,255,.55);
}
.phero .crumbs li{color:var(--ink-2)}
.phero .crumbs li+li::before{color:rgba(17,34,29,.28)}
.phero .crumbs a{color:var(--teal)}
.phero .crumbs a:hover{color:var(--teal-800)}
.phero .crumbs [aria-current]{color:var(--ink);font-weight:600}

/* breadcrumbs */
.crumbs{margin-bottom:20px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 0}
.crumbs li{font-size:13px;color:rgba(251,249,244,.62);display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin:0 9px;color:rgba(251,249,244,.32)}
.crumbs a{color:rgba(251,249,244,.78)}
.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs [aria-current]{color:#fff;font-weight:600}

/* --------------------------------------------------------------- plainlist */
.plainlist{list-style:none;margin:0;padding:0;display:grid;gap:11px}
/* .plainlist{margin:0} sits after the .mt utilities, so restate them here or
   a list written as "plainlist mt" ends up flush against its heading. */
.plainlist.mt{margin-top:18px}
.plainlist.mt-lg{margin-top:38px}
.plainlist li{position:relative;padding-left:30px;font-size:16px;color:var(--ink-2);line-height:1.55}
.plainlist li::before{
  content:"";position:absolute;left:0;top:.42em;width:17px;height:17px;border-radius:50%;
  background:var(--teal-100) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f6f5c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/11px 11px no-repeat;
}
.plainlist.cross li::before{
  background:#fbe9e4 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4432a' stroke-width='3.4' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>") center/10px 10px no-repeat;
}
.plainlist.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px 30px}

/* ------------------------------------------------------------- feature row */
.featrow{
  display:grid;grid-template-columns:96px 1fr;gap:28px;align-items:start;
  padding:32px 0;border-top:1px solid var(--line-2);
}
.featrow:first-child{border-top:0;padding-top:0}
.featrow-ic{display:flex;justify-content:center}
.featrow-tx h2{font-size:clamp(20px,2.1vw,26px)}
.featrow-tx p{color:var(--ink-2);font-size:16.5px;margin:12px 0 0;max-width:68ch}
.featrow-tx .why{
  background:var(--teal-50);border-left:3px solid var(--teal);border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:13px 18px;font-size:15.5px;color:var(--teal-800);margin-top:16px;
}
.featrow-tx .why b{color:var(--teal-900)}
.tile-ic.big{width:72px;height:72px;border-radius:20px}
.tile-ic.amber{background:var(--amber-100);color:var(--amber-ink)}
.featrow.flip .tile-ic{background:var(--amber-100);color:var(--amber-ink)}

/* ------------------------------------------------------------------ steps */
.steps.stack{grid-template-columns:1fr;gap:26px}
.steps.stack .step{border-top:0;border-left:2px solid var(--line);padding:2px 0 2px 26px}
.steps.stack .step-n{top:0;left:-17px}
.steps.stack .step h3{margin-top:0;font-size:17px}
.steps.five{grid-template-columns:repeat(5,1fr);gap:18px}
.step-n.amber{background:var(--amber)}

/* ------------------------------------------------------------------ forms */
.form-in{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:start}
.form-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,34px);box-shadow:var(--sh-2);
}
.form-card h2{font-size:clamp(21px,2.2vw,26px);margin-bottom:22px}
.form-card h2:has(+.formlede){margin-bottom:10px}
.formlede{font-size:15.5px;color:var(--ink-2);line-height:1.6;margin:0 0 24px}
.form-card form{display:grid;gap:16px}

.fld{display:grid;gap:7px}
.fld > span{font-size:14px;font-weight:700;color:var(--ink)}
.fld > span i{color:#b4432a;font-style:normal}
.fld input,.fld select,.fld textarea{
  font:inherit;font-size:15.5px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;width:100%;
  transition:.16s ease;
}
.fld textarea{resize:vertical;min-height:84px}
.fld select{
  appearance:none;padding-right:40px;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a7d76' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.fld input:focus,.fld select:focus,.fld textarea:focus{
  outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,111,92,.14);
}
.fld input::placeholder,.fld textarea::placeholder{color:#a6b4af}
.fld small{font-size:12.5px;color:var(--ink-3)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.check{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--ink-2);line-height:1.5;cursor:pointer}
.check input{width:19px;height:19px;flex:0 0 auto;margin:1px 0 0;accent-color:var(--teal);cursor:pointer}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formnote{font-size:12.5px;color:var(--ink-3);margin:0;text-align:center;line-height:1.55}
.micro.just-center{justify-content:center;align-items:flex-start;text-align:center}
/* the blog's WhatsApp line is body copy, not a caption, so it drops the .micro size */
.micro.notify{font-size:17px;color:var(--ink-2);line-height:1.6;max-width:62ch;margin-left:auto;margin-right:auto}
.micro.just-center .ic{margin-top:3px}

.form-side .sec-h{font-size:clamp(21px,2.2vw,27px)}
.side-wa{
  margin-top:32px;background:var(--teal-50);border:1px solid var(--line);
  border-radius:var(--r);padding:20px 22px;
}
.side-wa .micro{margin:0 0 12px}

/* ------------------------------------------------------------ contact ways */
.contact-ways{display:grid;gap:12px}
.way{
  display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:15px 18px;color:var(--ink);transition:.18s ease;
}
.way:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--sh-1)}
.way-ic{
  display:grid;place-items:center;width:44px;height:44px;border-radius:12px;flex:0 0 auto;
  background:var(--teal-100);color:var(--teal);
}
.way-ic.wa{background:#e3f7ea;color:#128C4A}
.way > span:last-child{display:flex;flex-direction:column;line-height:1.35}
.way b{font-size:15.5px}
.way small{font-size:13.5px;color:var(--ink-3)}

/* --------------------------------------------------------------- two column */
.twocol{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

/* ------------------------------------------------------------------- prose */
.prose h2{font-size:clamp(19px,2vw,23px);margin:34px 0 10px}
.prose h2:first-of-type{margin-top:8px}
.prose p{color:var(--ink-2);font-size:16px;line-height:1.72}
.prose a{text-decoration:underline}
.updated{font-size:13px;color:var(--ink-3);margin-bottom:26px}
.review{
  display:flex;gap:10px;align-items:flex-start;background:var(--amber-100);
  border:1px solid #f2ddba;border-radius:var(--r);padding:14px 18px;
  font-size:14px;color:#6d4a1f;margin:0 0 20px;
}
.review .ic{color:var(--amber-ink);margin-top:3px;flex:0 0 auto}
.todo{color:var(--ink-3);font-style:italic}

/* ------------------------------------------------------------- blog article */
.artmeta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:0 0 26px;
  font-size:13px;color:var(--ink-3);padding-bottom:18px;border-bottom:1px solid var(--line)}
.artmeta .post-cat{margin:0}
.prose.article p{font-size:17px;line-height:1.75;max-width:68ch}
.prose.article h2{margin:38px 0 12px}
.prose.article blockquote{
  margin:26px 0;padding:18px 24px;border-left:3px solid var(--teal);
  background:var(--teal-50);border-radius:0 var(--r) var(--r) 0;
}
.prose.article blockquote p{margin:0;font-size:17.5px;font-weight:600;color:var(--teal-800);max-width:none}
.prose.article .plainlist,.prose.article .planned{margin-bottom:20px}
.prose.article .plainlist li,.prose.article .planned li{font-size:16.5px}
.artmore{margin-top:48px;padding-top:28px;border-top:1px solid var(--line)}
.artmore .sec-h{font-size:clamp(20px,2.1vw,25px)}
.artmore a{font-weight:600}

/* ---------------------------------------------------------- numbered plan */
.planned{margin:0;padding:0 0 0 4px;list-style:none;counter-reset:pl;display:grid;gap:12px}
.planned li{
  counter-increment:pl;position:relative;padding-left:40px;
  font-size:16px;color:var(--ink-2);line-height:1.55;
}
.planned li::before{
  content:counter(pl);position:absolute;left:0;top:-1px;width:27px;height:27px;border-radius:50%;
  background:var(--teal-100);color:var(--teal-800);font-size:13px;font-weight:800;
  display:grid;place-items:center;
}

/* ------------------------------------------------------------ notice boxes */
.disc-box{
  display:flex;gap:11px;align-items:flex-start;background:var(--amber-100);
  border:1px solid #f2ddba;border-radius:var(--r);padding:15px 20px;
  font-size:15px;color:#6d4a1f;margin:0;line-height:1.6;
}
.disc-box .ic{color:var(--amber-ink);margin-top:4px;flex:0 0 auto}
.phero .disc-box{
  background:rgba(255,255,255,.10);border-color:rgba(251,249,244,.24);
  color:rgba(251,249,244,.86);margin-top:20px;max-width:62ch;
}
.phero .disc-box .ic{color:#8fd3c2}

/* -------------------------------------------------------------- table wrap */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablewrap .inc{margin-top:0;min-width:520px}

/* ----------------------------------------------------------------- sitemap */
.sitemap-col h4{color:var(--ink);font-size:13px}
.sitemap-col a{color:var(--ink-2);border-bottom:1px solid var(--line-2);padding:10px 0}
.sitemap-col a:hover{color:var(--teal)}

/* ---------------------------------------------------------------- responsive */
/* The desktop menu stops fitting around 1000px once the 28px wordmark and the
   language switcher are in the bar, so the hamburger starts here, not at 760. */
/* The nav carries 7 links, the language pills and the CTA button, so it needs
   more room than the rest of the layout. Burger from 1120px down; between there
   and 1240px the spacing tightens rather than wrapping. */
@media (max-width:1240px) and (min-width:1121px){
  .nav{gap:18px}
  .nav a:not(.btn){font-size:15px}
}
@media (max-width:1120px){
  .burger{display:flex}
  .nav{position:fixed;inset:74px 0 auto 0;background:#fff;border-bottom:1px solid var(--line);
       flex-direction:column;align-items:stretch;gap:0;padding:8px 22px 20px;margin:0;
       transform:translateY(-130%);transition:transform .22s ease;box-shadow:var(--sh-2)}
  .nav.open{transform:none}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line-2);font-size:16.5px}
  .nav .nav-cta{margin-top:14px;border-bottom:0;justify-content:center}
  .lang-switch{align-self:flex-start;margin:14px 0 0}
  .nav .lang-switch a{padding:7px 14px;font-size:14px;border-bottom:0}
  .nav a[aria-current="page"]::after{display:none}
  .nav a:not(.btn)[aria-current="page"]{color:var(--teal);font-weight:800}
}
@media (max-width:1000px){
  .pv-in,.price-in{grid-template-columns:1fr;gap:42px}
  .s1-in{padding:clamp(34px,5vh,56px) 22px clamp(44px,6vh,68px)}
  .sl-arrow{display:none}
  .pv-vis{order:-1}
  .price-in{gap:32px}
  .price-card{max-width:420px;margin:0 auto}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .feat-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .subject-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px}
  .foot-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}
  .foot-brand{grid-column:1 / -1}
  .foot-col h4{min-height:0}
  .ab-in{grid-template-columns:1fr}
  .agentband{background-position:70% center;background-image:var(--ab-jpg-sm);min-height:0}
  .agentband::before{background:linear-gradient(100deg,
      rgba(253,240,224,.97) 0%, rgba(253,240,224,.93) 46%,
      rgba(253,240,224,.60) 66%, rgba(253,240,224,.22) 84%, rgba(253,240,224,.06) 100%)}
}
@media (max-width:760px){
  body{font-size:16px}
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:30px}
  .agentband{background-position:76% center}
  .agentband::before{background:linear-gradient(180deg,
      rgba(253,240,224,.90) 0%, rgba(253,240,224,.96) 42%, rgba(253,240,224,.98) 100%)}
  .ab-cta .btn{width:100%}
  .feat-top{padding:18px 10px 14px}
  .feat-ic{width:82px;height:82px}
  .feat h3{font-size:14.5px;padding:13px 10px 17px}
  .grid-3{grid-template-columns:1fr}
  .subject-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 10px}
  .subject-ic{width:70px;height:70px}
  .subject-t{font-size:12.5px}
  .subject-block{padding:26px 16px 20px}
  .sec{padding:54px 0}
  /* On a phone the content already fills the screen — let it size naturally
     instead of padding out a 700px block. */
  .slide{min-height:0}
  .slide-bg img{object-position:76% 22%}
  .scrim{background:linear-gradient(180deg, rgba(10,25,40,.34) 0%, rgba(10,25,40,.62) 18%, rgba(10,25,40,.90) 34%, rgba(10,25,40,.96) 100%)}
  .scrim.green{background:linear-gradient(180deg, rgba(4,42,31,.32) 0%, rgba(4,42,31,.60) 18%, rgba(4,42,31,.90) 34%, rgba(4,42,31,.96) 100%)}
  .scrim.blue{background:linear-gradient(180deg, rgba(0,24,48,.32) 0%, rgba(0,24,48,.60) 18%, rgba(0,24,48,.90) 34%, rgba(0,24,48,.96) 100%)}
  .s1-in{padding:86px 22px 62px}
  .display{max-width:none;font-size:clamp(28px,7.2vw,40px)}
  .display{max-width:none}
  .sl-dots{bottom:16px}
  .mobile-bar{display:flex}
  .wa-float{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
  .foot-links{margin-left:0}
  .foot-base{justify-content:flex-start}
  .strip-item+.strip-item::before{display:none}
  .strip-in{gap:8px 18px}
  body{padding-bottom:76px}
  .rp-row{grid-template-columns:92px 1fr 40px}
}
@media (max-width:420px){
  .grid-4{grid-template-columns:1fr}
  .btn-row .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ------------------------------------------------- inner pages, responsive */
@media (max-width:980px){
  .form-in{grid-template-columns:1fr;gap:36px}
  .twocol{grid-template-columns:1fr;gap:32px}
  .steps.five{grid-template-columns:repeat(2,1fr);gap:26px 18px}
}
@media (max-width:760px){
  .phero{padding:26px 0 34px}
  .phero-h{max-width:none}
  .crumbs li{font-size:12px}
  .featrow{grid-template-columns:1fr;gap:16px;padding:26px 0}
  .featrow-ic{justify-content:flex-start}
  .fld-row{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .plainlist.two{grid-template-columns:1fr}
  .steps.five{grid-template-columns:1fr}
  .form-card{padding:22px 18px}
  .side-wa .btn{width:100%}
}