/* ============================================================
   AHAVA Africa Limited: Hawksford class corporate design system.
   Green is the primary brand colour, red the accent, periwinkle,
   orange and teal mix in for numbers and small highlights.
   The exact type family hawksford.com uses (MarkPro, lifted from
   their own hosted font files) for everything, sharp corners
   everywhere, flat colour blocks, no decorative borders.
   ============================================================ */

/* ---------------- fonts ----------------
   MarkPro: the exact family served on www.hawksford.com (same files,
   weights 300 / 400 / 500 / 700). CSS weight matching snaps the app's
   600/800/900 uses onto Bold exactly like the reference site. */
@font-face { font-family: 'MarkPro'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('/ahava/fonts/MarkPro-Light.woff2') format('woff2'); }
@font-face { font-family: 'MarkPro'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/ahava/fonts/MarkPro.woff2') format('woff2'); }
@font-face { font-family: 'MarkPro'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/ahava/fonts/MarkPro-Medium.woff2') format('woff2'); }
@font-face { font-family: 'MarkPro'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/ahava/fonts/MarkPro-Bold.woff2') format('woff2'); }
/* Montserrat: the body write-up family (variable, weights 100-900).
   MarkPro stays on headings, heroes, buttons and UI labels. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/ahava/fonts/montserrat-var-latin.woff2') format('woff2'); }
/* icons are inline SVG (js/icons.js): no icon font needed at all */

:root {
  --green: #008038;          /* primary brand green */
  --green-dark: #00632B;     /* hover green */
  --green-bright: #00A63F;   /* accents on dark */
  --forest: #003A1B;         /* deep green blocks: footer, dark bands, split heroes */
  --forest-2: #002A13;       /* deepest green (overlays) */
  --red: #FB3448;            /* Hawksford style accent red */
  --red-dark: #E01F33;
  --peri: #5A87D9;           /* periwinkle mix */
  --orange: #FF8F12;
  --teal: #00C4B3;
  --ink: #0B2E1D;            /* near black green for headings */
  --body-c: #54655E;         /* body copy grey green */
  --fill: #F5F5F5;           /* flat grey card fill */
  --util: #E9EEEF;           /* utility bar grey */
  --line: #D8DFDD;           /* input edges only */
  --white: #ffffff;
  --shadow-pop: 0 24px 48px -12px rgba(0, 26, 12, .18);
  --font: 'MarkPro', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Montserrat', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; border: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body); color: var(--body-c);
  font-size: 15.5px; line-height: 1.7; background: var(--white);
  display: flex; flex-direction: column; min-height: 100vh;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
/* MarkPro carries the brand voice: headings, heroes, buttons, UI labels,
   chips and stat numerals. Body copy and write-ups inherit Montserrat. */
h1, h2, h3, h4, h5, .btn, .nav-link, .brand-tag, .ut-link, .crumb,
.hf-title, .hf-lead, .pg-title, .pg-lede, .band-title, .band-kicker,
.foot-strap, .split-kick, .split-title, .chip-slant, .hl-kick, .lbl,
.f-label, .mega-link, .mega-row, .mega-cta-row, .mega-feat,
.gc-link, .filter-word, .num-row .n, .menu-item, .menu-sub .menu-item,
.video-kind, .video-title, .sd-kind, .nf-oops, .nf-404,
.splash-name, .splash-strap, .reg-badge, .acc-bar {
  font-family: var(--font);
}
h1, h2, h3, h4, h5 { color: var(--ink); line-height: 1.16; font-weight: 700; letter-spacing: -.012em; }
.msym {
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; user-select: none; flex: none;
}
.msym svg { width: 1em; height: 1em; display: block; }

/* never let anything push the page wider than the screen */
html, body { overflow-x: clip; max-width: 100%; }
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 1280px) { .container { padding: 0 16px; } }

/* ---------------- lazy image box (blur up + live zoom motion) ----------------
   Every image on the app sits in an imgbox and is alive: a continuous
   slow zoom (Ken Burns) keeps the whole site in motion. */
.imgbox { position: relative; overflow: hidden; background: #e8eeeb; }
.imgbox img, .imgbox video { width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(10px); transition: opacity .7s ease, filter .7s ease; }
.imgbox img.is-loaded, .imgbox video.is-loaded { opacity: 1; filter: none; }
.imgbox img { animation: kbDrift 24s ease-in-out infinite alternate; transform-origin: 55% 45%; }
@keyframes kbDrift {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.14) translate(-1.6%, 1.1%); }
}

/* ---------------- letter-by-letter fade (first write-up intro) ----------------
   Each character fades in on its own with a small stagger. */
.lf { display: inline-block; white-space: pre; opacity: 0; filter: blur(6px); transform: translateY(.35em);
  animation: lfIn .6s cubic-bezier(.22,.75,.25,1) forwards; }
.lf-word { display: inline-block; white-space: nowrap; }
.lf-sp { width: .27em; }
@keyframes lfIn { to { opacity: 1; filter: none; transform: none; } }

/* ---------------- reveal on scroll ---------------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.75,.25,1), transform .7s cubic-bezier(.22,.75,.25,1); will-change: opacity, transform; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------- buttons: sharp corporate blocks ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 30px; font-size: 15px; font-weight: 800; letter-spacing: .01em;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  text-align: center; line-height: 1.2;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 17px; height: 17px; }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: var(--green-dark); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); }
.btn-white { background: #fff; color: var(--ink); }
.btn-white:hover { color: var(--green); }
.btn-peri { background: var(--peri); color: #fff; }
.btn-peri:hover { background: #4776CE; }
.btn-ow { border: 2px solid #fff; color: #fff; background: transparent; }
.btn-ow:hover { background: #fff; color: var(--ink); }
.btn-og { border: 2px solid var(--green); color: var(--green); background: transparent; }
.btn-og:hover { background: var(--green); color: #fff; }
.btn-or { border: 2px solid var(--red); color: var(--red); background: transparent; }
.btn-or:hover { background: var(--red); color: #fff; }
.btn-sm { padding: 12px 20px; font-size: 13.5px; }

/* the accent bar: a solid colour block standing beside hero titles */
.acc-bar { display: inline-block; width: 26px; height: 96px; background: var(--green-bright); flex: none; }
.acc-bar.red { background: var(--red); }
.acc-bar.peri { background: var(--peri); }
.acc-bar.white { background: #fff; }
.acc-bar.short { height: 64px; }

/* ================= utility bar: RC number left, phone and email right ================= */
.utility { background: var(--util); position: relative; z-index: 60; }
.utility-in { display: flex; align-items: center; justify-content: flex-end; gap: 24px; height: 26px; }
.ut-rc { margin-right: auto; font-family: var(--font); font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.ut-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink); transition: color .2s ease; }
.ut-link .msym { font-size: 14px; color: var(--green); }
.ut-link:hover { color: var(--green); }
.ut-mail { display: inline-flex; }
@media (max-width: 768px) { .ut-mail { display: none; } .utility-in { gap: 16px; height: 26px; } }

/* ================= header: white, logo left, mega dropdowns =================
   The bar is full bleed with its own edge padding, so the search and
   hamburger icons sit right on the screen edge as asked. */
.header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: 0 1px 0 rgba(0,42,19,.06), 0 10px 30px -18px rgba(0,26,12,.25); }
.header-in { display: flex; align-items: center; height: 108px; gap: 12px; position: static; max-width: none; padding: 0 clamp(14px, 2vw, 28px); }
.brand { flex: none; display: flex; align-items: center; }
.brand-in { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.brand img { height: 52px; width: auto; }
/* the small slanted strapline sitting just below the logo */
.brand-tag { font-style: italic; font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--green); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-item { position: static; }
.nav-link {
  display: inline-flex; align-items: center; gap: 5px; padding: 12px 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ink); white-space: nowrap;
  transition: color .18s ease;
}
.nav-link svg { width: 15px; height: 15px; margin-top: 1px; color: var(--green); flex: none; transition: transform .25s ease; }
.nav-link:hover, .nav-item:hover > .nav-link { color: var(--green); }
.nav-item:hover > .nav-link svg { transform: rotate(180deg); }
.nav-link.is-active { color: var(--green); }
.nav-cta { margin-left: 4px; flex: none; padding: 14px 22px; font-size: 13.5px; }
/* search button living right on the navigation bar (all screens) */
.head-search { width: 42px; height: 44px; flex: none; display: grid; place-items: center; color: var(--ink); transition: color .18s ease, background .18s ease; }
.head-search svg { width: 21px; height: 21px; }
.head-search:hover { color: var(--green); }
.head-search[aria-expanded="true"] { color: var(--green); }
.burger { display: none; width: 46px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5.5px; margin-left: 6px; }
.burger span { display: block; width: 24px; height: 2.6px; background: var(--ink); transition: transform .3s ease, opacity .2s ease; }
body.menu-open .burger span:nth-child(1) { transform: translateY(8.1px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-8.1px) rotate(-45deg); }

/* ---------------- the mega dropdown: a full width white panel ---------------- */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; box-shadow: 0 40px 60px -20px rgba(0,26,12,.28);
  border-top: 1px solid rgba(0,42,19,.05);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
  z-index: 99; max-height: calc(100vh - 170px); overflow-y: auto;
}
.nav-item:hover .mega, .nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: none; }
.mega-in { display: grid; grid-template-columns: 1.15fr 1fr 1.05fr 1.35fr; gap: 44px; padding: 46px 16px 52px; }
.mega h3 { font-size: 19px; font-weight: 800; margin-bottom: 14px; }
.mega h3.c-red { color: var(--red); }
.mega h3.c-green { color: var(--green); }
.mega-note { font-size: 14px; line-height: 1.7; color: var(--body-c); margin-bottom: 20px; }
.mega-feat { font-size: 26px; line-height: 1.25; font-weight: 800; color: var(--ink); margin-bottom: 14px; }
.mega-links { display: flex; flex-direction: column; gap: 14px; }
.mega-link { display: inline-flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 800; color: var(--ink); transition: color .18s ease; }
.mega-link:hover { color: var(--green); }
.mega-link .mi-ic { width: 22px; height: 22px; background: var(--red); color: #fff; display: grid; place-items: center; flex: none; }
.mega-link .mi-ic .msym { font-size: 15px; }
.mega-link .mi-ic.alt { background: var(--green); }
.mega-list { display: flex; flex-direction: column; gap: 3px; }
.mega-row { display: flex; align-items: flex-start; gap: 10px; padding: 7px 0; font-size: 15px; font-weight: 600; color: var(--ink); transition: color .18s ease; }
.mega-row svg { width: 15px; height: 15px; margin-top: 4px; color: var(--red); flex: none; transition: transform .2s ease; }
.mega-row:hover { color: var(--green); }
.mega-row:hover svg { transform: translateX(3px); }
.mega-cta-row { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--ink); }
.mega-cta-row svg { width: 16px; height: 16px; color: var(--red); }
.mega-cta-row:hover { color: var(--green); }
.mega .btn { margin-top: 20px; }

/* Bold rule: every bold weight typesets in MarkPro - Montserrat stays on
   regular body copy only, so nothing bold ever renders in Montserrat.
   The [style*=] arms catch the inline bold weights used by CMS-built rows. */
b, strong, th,
[style*="font-weight:6"], [style*="font-weight:7"], [style*="font-weight:8"], [style*="font-weight:9"],
[style*="font-weight: 6"], [style*="font-weight: 7"], [style*="font-weight: 8"], [style*="font-weight: 9"],
.stat-n, .stat-l, .h-red, .h-green, .h-peri, .hf-date, .exp-link,
.foot-col a, .form-panel-title, .f-field, .form-ok, .doc-meta, .doc-meta .by,
.doc-body blockquote, .share-note, .trend-row .n, .lesson-nav .dir,
.more-grid a .cat, .dp-badge > span, .chip-new, .chip-upd, .search-input,
.search-input::placeholder, .sd-hint, .menu-item.is-active, .menu-social p,
.nf-search input, .chat-chip, .result-count, .ex-head .co, .path-head .cnt,
.lesson-row .n, .meta-line .dt, .info-item p, .reg-body .reg-rc, .reg-body a,
.doc-quote, .side-lbl, .news-ok {
  font-family: var(--font);
}

@media (max-width: 1300px) {
  .nav-link { padding: 12px 6px; font-size: 13px; gap: 4px; }
  .nav-cta { padding: 13px 18px; }
}
@media (max-width: 1250px) {
  .nav-link { padding: 12px 4px; font-size: 12.5px; gap: 3px; }
  .nav { gap: 0; }
  .nav-cta { margin-left: 0; padding: 12px 14px; font-size: 13px; }
  .header-in { gap: 8px; }
  .brand-tag { font-size: 9px; }
}
@media (max-width: 1180px) {
  .nav { display: none; }
  .burger { display: flex; margin-left: 0; }
  .nav-cta { display: none; }
  .head-search { margin-left: auto; }
  .header-in { height: 86px; }
  .brand img { height: 42px; }
  .brand-tag { font-size: 10px; }
}
@media (max-width: 640px) { .brand img { height: 32px; } .header-in { height: 74px; } .brand-tag { font-size: 9px; } }

/* ================= home hero: full bleed photo, standing brand ================= */
.hf-hero { position: relative; overflow: hidden; background: var(--forest); min-height: max(560px, calc(100svh - 128px)); display: flex; align-items: center; }
.hf-media, .hf-media .imgbox { position: absolute; inset: 0; }
.hf-media img, .hf-media video { width: 100%; height: 100%; object-fit: cover; animation: hfZoom 30s ease-in-out infinite alternate; }
@keyframes hfZoom { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1%, .8%); } }
.hf-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to right, rgba(0,26,12,.78) 0%, rgba(0,26,12,.45) 44%, rgba(0,26,12,.12) 72%, rgba(0,26,12,.25) 100%); }
.hf-in { position: relative; z-index: 3; width: 100%; padding: 78px 0 92px; }
.hf-brand { display: flex; margin-bottom: 28px; }
.hf-brand img { height: 26px; width: auto; filter: drop-shadow(0 2px 16px rgba(0,15,6,.45)); }
.hf-copy { max-width: 700px; }
.hf-head { display: flex; gap: 24px; align-items: flex-start; }
.hf-head .acc-bar { margin-top: 10px; }
.hf-title { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.3rem); font-weight: 900; line-height: 1.07; letter-spacing: -.015em; }
.hf-lead { margin-top: 18px; max-width: 500px; color: rgba(255,255,255,.88); font-size: 15.5px; line-height: 1.65; font-weight: 600; }
.hf-ctas { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px 18px; }

/* ---------------- home hero rotating text ----------------
   The animated write-up (eyebrow + title + lead) plays its letter fade,
   holds, then swaps sideways to the next message in the chain. The
   scene, brand and CTAs never move - only the words do. */
.hf-rot { position: relative; min-height: 330px; }
@media (max-width: 768px) { .hf-rot { min-height: 268px; } }
.hf-rot-layer { display: none; }
.hf-rot-layer.is-on { display: block; }
.hf-rot-layer.swap-in { animation: hfSwapIn .65s cubic-bezier(.22,.75,.25,1) both; }
.hf-rot-layer.swap-out { animation: hfSwapOut .5s cubic-bezier(.55,.06,.68,.19) both; }
@keyframes hfSwapIn { from { opacity: 0; transform: translateX(56px); } to { opacity: 1; transform: none; } }
@keyframes hfSwapOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-56px); } }
/* mobile: the home hero text steps down so everything fits the screen */
@media (max-width: 768px) {
  .hf-hero { min-height: max(470px, calc(100svh - 104px)); }
  .hf-in { padding: 52px 0 64px; }
  .hf-brand { margin-bottom: 20px; }
  .hf-brand img { height: 20px; }
  .hf-head { gap: 15px; }
  .hf-head .acc-bar { height: 64px; }
  .hf-title { font-size: clamp(1.62rem, 7vw, 2.25rem); }
  .hf-lead { font-size: 14px; line-height: 1.6; margin-top: 12px; max-width: 100%; }
  .hf-ctas { margin-top: 24px; gap: 10px 12px; }
  .hf-ctas .btn { flex: 1 1 100%; padding: 13px 18px; font-size: 13.5px; }
}

/* ================= statement band: deep green, centred ================= */
.band-deep { background: var(--forest); color: #fff; text-align: center; padding: 74px 0 80px; }
.band-kicker { font-size: 15px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.66); }
.band-kicker .sep { margin: 0 14px; color: var(--green-bright); }
.band-title { margin-top: 10px; color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; }
.band-sub { margin: 18px auto 0; max-width: 680px; color: rgba(255,255,255,.75); font-size: 15.5px; line-height: 1.75; }

/* ================= three pillar cards: full bleed photos, underlined titles ================= */
.hf-trio { display: grid; grid-template-columns: repeat(3, 1fr); }
.hf-trio-card { position: relative; display: block; height: 430px; overflow: hidden; background: var(--forest); }
.hf-trio-card .imgbox { position: absolute; inset: 0; }
.hf-trio-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,26,12,.62), rgba(0,26,12,.06) 46%, rgba(0,26,12,.14)); transition: background .3s ease; }
.hf-trio-label { position: absolute; left: 34px; right: 34px; bottom: 30px; z-index: 2; color: #fff; }
/* the title itself is the link: a clean underline instead of an arrow */
.hf-trio-label h3 {
  color: #fff; font-size: 21px; font-weight: 800; display: inline-block;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px;
  text-decoration-color: rgba(255,255,255,.85); transition: color .2s ease, text-decoration-color .2s ease;
}
.hf-trio-card:hover .hf-trio-label h3 { color: var(--green-bright); text-decoration-color: var(--green-bright); }
@media (max-width: 980px) {
  .hf-trio { grid-template-columns: 1fr; }
  .hf-trio-card { height: 300px; }
}

/* ================= diagonal split feature sections ================= */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.split-media { position: relative; min-height: 560px; }
.split-media .imgbox { position: absolute; inset: 0; }
.split-media.clip-l { clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); }
.split-media.clip-r { clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.split-body { padding: 90px 8vw 90px 24px; max-width: 720px; }
.split.rev .split-body { padding: 90px 24px 90px 8vw; }
.split-kick { font-size: 13.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--red); display: inline-block; margin-bottom: 16px; }
.split-kick.g { color: var(--green); }
.split-title { font-size: clamp(1.8rem, 3vw, 2.5rem); margin-bottom: 20px; }
.split-title.c-red { color: var(--red); }
.split-text { font-size: 16px; line-height: 1.8; margin-bottom: 14px; }
.split .btn { margin-top: 22px; }
/* geometric brand cluster around the photo */
.split-deco { position: relative; }
.sh-stripes { position: absolute; z-index: 3; width: 190px; height: 128px;
  background: repeating-linear-gradient(115deg, var(--forest) 0 26px, transparent 26px 52px); }
.sh-tri { position: absolute; z-index: 3; width: 0; height: 0;
  border-left: 52px solid transparent; border-right: 52px solid transparent; border-bottom: 88px solid var(--red); }
.sh-square { position: absolute; z-index: 3; width: 150px; height: 150px; background: var(--forest); }
.sh-peri { position: absolute; z-index: 3; width: 120px; height: 120px; background: var(--peri); }
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; }
  .split-media { min-height: 340px; }
  .split-media.clip-l { clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
  .split-media.clip-r { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 86%); }
  .split-body, .split.rev .split-body { padding: 56px 24px; max-width: none; }
  .sh-stripes { width: 130px; height: 88px; }
}

/* ================= stats: mixed colour numerals ================= */
.stats { padding: 88px 0 92px; background: #fff; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; text-align: center; }
.stat-n { font-size: clamp(3rem, 4.6vw, 4.4rem); font-weight: 900; line-height: 1; }
.stats-grid > div:nth-child(4n+1) .stat-n { color: var(--red); }
.stats-grid > div:nth-child(4n+2) .stat-n { color: var(--orange); }
.stats-grid > div:nth-child(4n+3) .stat-n { color: var(--teal); }
.stats-grid > div:nth-child(4n+4) .stat-n { color: var(--peri); }
.stat-l { margin-top: 12px; font-size: 14.5px; font-weight: 700; color: var(--ink); }
@media (max-width: 860px) { .stats-grid { grid-template-columns: 1fr 1fr; gap: 44px 20px; } }

/* ================= commitment trio: green squares + icons ================= */
.commit3 { padding: 30px 0 100px; }
.commit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.commit-item { padding: 40px 36px; background: var(--fill); }
.commit-ic { width: 64px; height: 64px; background: var(--green); color: #fff; display: grid; place-items: center; margin-bottom: 24px; }
.commit-ic .msym { font-size: 36px; }
.commit-item h3 { font-size: 20px; margin-bottom: 10px; }
.commit-item p { font-size: 15px; line-height: 1.75; }
@media (max-width: 900px) { .commit-grid { grid-template-columns: 1fr; } }

/* ================= section headings (Hawksford scale) ================= */
.sec { padding: 92px 0; }
.sec.tight { padding: 64px 0 92px; }
.h-red { color: var(--red); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; }
.h-green { color: var(--ink); font-size: clamp(1.9rem, 3.2vw, 2.6rem); font-weight: 800; }
.h-peri { color: var(--peri); font-size: clamp(2rem, 3.4vw, 2.75rem); font-weight: 800; }
.h-center { text-align: center; }
.lede-c { margin: 18px auto 0; max-width: 780px; text-align: center; font-size: 16.5px; line-height: 1.8; color: var(--body-c); }

/* ================= insight cards row: scroll snap + arrows ================= */
.hf-car { position: relative; margin-top: 46px; }
.hf-row { display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; }
.hf-row::-webkit-scrollbar { display: none; }
.hf-card { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; background: var(--fill); display: flex; flex-direction: column; }
.hf-card-img { position: relative; }
.hf-card-img .imgbox { aspect-ratio: 16/10; }
.chip-slant { position: absolute; left: 0; bottom: 14px; z-index: 2; background: var(--forest); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .04em; padding: 9px 22px 9px 18px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); }
.hf-card-body { padding: 24px 26px 30px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.hf-date { color: var(--red); font-size: 14px; font-weight: 800; }
.hf-card-body h3 { font-size: 19px; line-height: 1.35; }
.hf-card-body h3:hover { color: var(--green); }
.hf-card-body p { font-size: 14.5px; line-height: 1.7; color: var(--body-c); flex: 1; }
.hf-navs { position: absolute; top: 38%; left: -22px; right: -22px; display: flex; justify-content: space-between; pointer-events: none; }
.hf-nav { pointer-events: auto; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ink);
  display: grid; place-items: center; box-shadow: 0 10px 26px -8px rgba(0,26,12,.35); transition: color .2s ease, background .2s ease; }
.hf-nav:hover { background: var(--green); color: #fff; }
.hf-nav svg { width: 20px; height: 20px; }
.hf-nav[disabled] { opacity: .35; pointer-events: none; }
@media (min-width: 1240px) { .hf-navs { left: -23px; right: -23px; } }
@media (max-width: 1024px) { .hf-card { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 700px) { .hf-card { flex-basis: 86%; } .hf-navs { display: none; } }

/* ================= explore quick links band ================= */
.exp-band { background: var(--fill); padding: 58px 0; }
.exp-links { display: flex; flex-wrap: wrap; gap: 16px 44px; align-items: center; }
.exp-link { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; color: var(--ink); transition: color .2s ease; }
.exp-link svg { width: 24px; height: 20px; color: var(--green); transition: transform .25s ease; }
.exp-link:hover { color: var(--green); }
.exp-link:hover svg { transform: translateX(4px); }

/* ================= big CTA band with overlapping photo ================= */
.cta-band { position: relative; background: var(--forest); margin-top: 40px; }
.cta-band-in { position: relative; padding: 110px 24px 110px calc(24px + 380px); }
.cta-band-img { position: absolute; left: 0; top: -64px; width: 400px; }
.cta-band-img .imgbox { aspect-ratio: 4/3; box-shadow: 0 30px 60px -18px rgba(0,20,8,.5); }
.cta-band h2 { color: #fff; font-size: clamp(2.1rem, 3.8vw, 3.1rem); font-weight: 800; }
.cta-band p { margin-top: 16px; max-width: 620px; color: rgba(255,255,255,.8); font-size: 16px; line-height: 1.75; }
.cta-band .btn { margin-top: 30px; }
@media (max-width: 980px) {
  .cta-band-in { padding: 64px 24px; }
  .cta-band-img { position: relative; top: 0; width: 100%; max-width: 460px; margin: 0 auto 34px; left: auto; }
}

/* ================= footer: pure black, display strapline ================= */
.footer { margin-top: 96px; background: #000; color: #fff; flex-shrink: 0; }
.foot-top { display: grid; grid-template-columns: 1.2fr 2fr; gap: 60px; padding: 78px 0 60px; }
.foot-brand img { height: 40px; width: auto; }
.foot-strap { margin-top: 22px; font-size: clamp(1.75rem, 2.8vw, 2.5rem); font-weight: 900; line-height: 1.12; color: #fff; letter-spacing: -.01em; }
.foot-sub { margin-top: 15px; max-width: 380px; color: rgba(255,255,255,.68); font-size: 13.5px; line-height: 1.7; }
.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.foot-col h4 { color: #fff; font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 20px; color: rgba(255,255,255,.55); }
.foot-col a { display: block; padding: 7px 0; color: rgba(255,255,255,.86); font-size: 15px; font-weight: 700; transition: color .18s ease, transform .18s ease; }
.foot-col a:hover { color: var(--green-bright); transform: translateX(4px); }
.foot-news { margin-top: 26px; }
.foot-news p { font-size: 14px; color: rgba(255,255,255,.68); margin-bottom: 14px; line-height: 1.6; }
.foot-bottom { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 32px 0 38px; border-top: 1px solid rgba(255,255,255,.12); text-align: center; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; }
.foot-legal a { font-size: 13px; color: rgba(255,255,255,.6); transition: color .18s ease; }
.foot-legal a:hover { color: #fff; }
.foot-copy { font-size: 13px; color: rgba(255,255,255,.6); }
.foot-social { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.foot-social p { font-size: 13.5px; color: rgba(255,255,255,.7); }
.foot-soc-row { display: flex; align-items: center; justify-content: center; gap: 20px; }
.foot-sub a { color: rgba(255,255,255,.68); transition: color .18s ease; }
.foot-sub a:hover { color: var(--green-bright); }
/* follow us icons: bare glyphs, no containers */
.soc { width: auto; height: auto; padding: 2px; display: inline-flex; align-items: center; background: none; color: rgba(255,255,255,.85); transition: color .2s ease, transform .2s ease; }
.soc:hover { background: none; color: var(--green-bright); transform: translateY(-2px); }
.soc svg { width: 20px; height: 20px; }
@media (max-width: 980px) {
  .foot-top { grid-template-columns: 1fr; gap: 44px; }
  /* Montserrat runs wider than the display face: keep the strapline and
     the newsletter row inside the phone column */
  .foot-strap { font-size: clamp(1.4rem, 6vw, 1.9rem); }
  .news-form .f-field { min-width: 0; flex: 1 1 auto; width: auto; }
  .foot-cols { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px 26px; }
}

/* ================= sub page hero: SOLID COLOUR block + banner below ============
   Sub page heroes are flat brand colours (green / red / black / white)
   with the title on them - no photo inside the hero itself. A short,
   end-to-end image banner sits directly below the hero. The home hero
   keeps its video/photo scene. On open the solid shape drops down like
   a curtain (a clip reveal top to bottom), then the words rise in. */
.pg-hero { position: relative; display: flex; align-items: center; background: var(--green); }
.pg-solid { min-height: 350px; animation: heroDrop .8s cubic-bezier(.6,.05,.28,1) both; }
@keyframes heroDrop { from { clip-path: inset(0 0 101% 0); } to { clip-path: inset(0 0 -1% 0); } }
.pg-solid .pg-in { animation: pgRise .7s cubic-bezier(.22,.75,.25,1) .38s both; }
@keyframes pgRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.pg-solid.pg-green { background: var(--green); }
.pg-solid.pg-red { background: var(--red); }
.pg-solid.pg-black { background: #0A0D0B; }
.pg-solid.pg-white { background: #fff; }
/* policy pages: each carries its own solid colour, all AA-safe with white text */
.pg-solid.pg-teal { background: #00645C; }   /* cookie policy - deep aqua */
.pg-solid.pg-ink { background: var(--ink); } /* terms of use - near-black green */
.pg-solid.pg-blue { background: #3D5FA8; }   /* accessibility - deep periwinkle */
.pg-in { position: relative; z-index: 3; width: 100%; padding: 74px 0; }
/* very short solid hero for the policy pages: title only, tight padding */
.pg-compact { min-height: 0; }
.pg-compact .pg-in { padding: 42px 0; animation-delay: .15s; }
.pg-head { display: flex; gap: 26px; align-items: flex-start; max-width: 860px; }
.pg-head .acc-bar { margin-top: 8px; }
/* centered hero head: no accent bar, just the page title */
.pg-center { justify-content: center; text-align: center; max-width: none; }
.pg-center .pg-title { margin: 0 auto; }
.pg-title { color: #fff; font-size: clamp(2.05rem, 4.4vw, 3.4rem); font-weight: 900; line-height: 1.08; letter-spacing: -.015em; }
.pg-lede { margin-top: 18px; color: rgba(255,255,255,.88); font-size: 16px; line-height: 1.7; font-weight: 600; max-width: 640px; }
.pg-ctas { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px 16px; }
/* white solid hero carries ink text */
.pg-white .pg-title { color: var(--ink); }
.pg-white .pg-lede { color: var(--body-c); }
@media (max-width: 768px) {
  .pg-solid { min-height: 240px; }
  .pg-in { padding: 48px 0; }
  .pg-compact { min-height: 0; }
  .pg-compact .pg-in { padding: 30px 0; }
  .pg-head { gap: 15px; }
  .pg-head .acc-bar { height: 64px; }
  .pg-title { font-size: clamp(1.62rem, 7vw, 2.25rem); }
  .pg-lede { font-size: 14px; line-height: 1.6; margin-top: 12px; }
  .pg-ctas { margin-top: 22px; gap: 10px 12px; }
  .pg-ctas .btn { padding: 13px 18px; font-size: 13.5px; }
}

/* the short full width image banner directly under a solid hero.
   Its motion is punched up: bigger zoom, quicker cycle than the
   rest of the imagery so the opener feels alive. */
.hero-banner { position: relative; height: clamp(150px, 21vw, 280px); overflow: hidden; animation: bannerIn .7s ease .45s both; }
@keyframes bannerIn { from { opacity: 0; } to { opacity: 1; } }
.hero-banner .imgbox { position: absolute; inset: 0; }
.hero-banner .imgbox img, .hero-banner .imgbox video { animation: kbDriftBanner 11s ease-in-out infinite alternate; }
@keyframes kbDriftBanner {
  0% { transform: scale(1.05) translate(0, 0); }
  100% { transform: scale(1.32) translate(-2.4%, 1.8%); }
}
@media (max-width: 640px) { .hero-banner { height: clamp(120px, 32vw, 170px); } }

/* split hero: deep green panel + photo (50/50) */
.sh-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 460px; background: var(--forest); }
.sh-hero-panel { display: flex; align-items: center; padding: 80px 6vw 80px 24px; }
.sh-hero-panel-in { max-width: 640px; }
.sh-hero-media { position: relative; }
.sh-hero-media .imgbox { position: absolute; inset: 0; }
.sh-hero-media .imgbox img, .sh-hero-media .imgbox video { width: 100%; height: 100%; object-fit: cover; }
/* slow motion movement on the split hero photo too */
.sh-hero-media .imgbox img { animation: kbDrift 40s ease-in-out infinite alternate; }
@media (max-width: 900px) {
  .sh-hero { grid-template-columns: 1fr; }
  .sh-hero-panel { padding: 60px 24px; }
  .sh-hero-media { min-height: 300px; }
}

/* contact style hero now uses the shared solid hero (pg-solid) above */

/* ---------------- breadcrumb ---------------- */
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 22px 0 8px; font-size: 14px; font-weight: 700; }
.crumb a { color: var(--body-c); display: inline-flex; align-items: center; gap: 7px; transition: color .18s ease; }
.crumb a:hover { color: var(--green); }
.crumb a svg { width: 15px; height: 15px; }
.crumb svg.c-sep { width: 13px; height: 13px; color: var(--red); }
.crumb .c-here { color: var(--ink); }

/* ================= flat grey cards with geometric icons ================= */
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.g-grid.two { grid-template-columns: repeat(2, 1fr); }
.g-card { background: var(--fill); padding: 38px 34px 36px; display: flex; flex-direction: column; transition: transform .25s ease, background .25s ease; }
.g-card:hover { background: #EEF3F0; transform: translateY(-4px); }
.gc-ic { color: var(--red); margin-bottom: 22px; }
.gc-ic .msym { font-size: 44px; }
.gc-ic svg { width: 44px; height: 44px; }
.gc-ic.g { color: var(--green); }
.g-card h3 { font-size: 20px; margin-bottom: 12px; }
.g-card p { font-size: 14.5px; line-height: 1.75; flex: 1; }
.gc-link { margin-top: 22px; display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 800; color: var(--ink); transition: color .18s ease, gap .18s ease; }
.gc-link svg { width: 15px; height: 15px; color: var(--red); }
.gc-link:hover { color: var(--green); gap: 13px; }
@media (max-width: 980px) { .g-grid, .g-grid.two { grid-template-columns: 1fr; } }

/* numbered rows (approach steps, promises, values) */
.num-row { display: flex; gap: 22px; align-items: flex-start; }
.num-row .n { font-size: 40px; font-weight: 900; line-height: 1; color: var(--red); flex: none; width: 62px; }
.num-row h3 { font-size: 18.5px; margin-bottom: 8px; }
.num-row p { font-size: 14.5px; line-height: 1.75; }
.num-row .n.c-green { color: var(--green); }

/* ================= dark form panel (contact / partner / newsletter) ================= */
.form-panel { background: var(--forest); color: #fff; padding: 54px 54px 58px; }
.form-panel-title { color: #fff; font-size: clamp(1.4rem, 2.2vw, 1.8rem); font-weight: 800; margin-bottom: 34px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 26px; }
.form-grid .full { grid-column: 1 / -1; }
.f-label { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: .04em; color: rgba(255,255,255,.92); margin-bottom: 9px; }
.f-label .req { color: var(--red); margin-left: 2px; }
.f-field { width: 100%; height: 52px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 600; padding: 0 16px; outline: none; transition: box-shadow .2s ease; }
textarea.f-field { height: auto; min-height: 132px; padding: 14px 16px; resize: vertical; }
select.f-field { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23003A1B' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.f-field:focus { box-shadow: 0 0 0 3px var(--green-bright); }
.form-panel .btn { margin-top: 8px; }
.form-ok { background: rgba(0,166,63,.14); color: #fff; padding: 26px 28px; font-size: 15px; font-weight: 700; line-height: 1.6; }
.form-note { font-size: 13.5px; color: rgba(255,255,255,.65); margin-top: 18px; line-height: 1.6; }
/* light variant of the form card (newsletter inline) */
.form-card { background: var(--fill); padding: 34px 32px; }
.form-card .f-label { color: var(--ink); }
.news-form { display: flex; gap: 12px; }
.news-form .f-field { flex: 1; }
@media (max-width: 700px) { .form-grid { grid-template-columns: 1fr; } .form-panel { padding: 40px 26px; } .news-form { flex-direction: column; } }

/* ================= document layout (articles, lessons, guides) ================= */
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 54px; padding: 34px 0 20px; }
.doc-title { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: 14px 0 16px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; font-size: 14px; color: var(--body-c); font-weight: 600; }
.doc-meta .by { color: var(--green); font-weight: 800; }
.doc-meta .btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.doc-hero { margin-top: 26px; }
.doc-hero .imgbox { aspect-ratio: 16/8.4; }
.share-line { display: flex; align-items: center; gap: 14px; margin-top: 20px; padding: 14px 0; }
.share-line .lbl { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--body-c); }
.doc-body { padding-top: 26px; }
.doc-body > p, .doc-body section > p { font-size: 16.5px; line-height: 1.85; margin-bottom: 18px; color: #3D4E47; }
.doc-body h2 { font-size: 26px; margin: 38px 0 14px; }
.doc-body h3 { font-size: 20px; margin: 30px 0 12px; }
.doc-body ul { margin: 0 0 20px 2px; }
.doc-body ul li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 15.5px; line-height: 1.7; color: #3D4E47; }
.doc-body ul li::before { content: ''; position: absolute; left: 0; top: 10px; width: 12px; height: 12px; background: var(--green); }
.doc-body ol { margin: 0 0 20px 22px; }
.doc-body ol li { margin-bottom: 10px; font-size: 15.5px; line-height: 1.7; color: #3D4E47; }
.doc-body blockquote { margin: 26px 0; padding: 22px 28px; background: var(--fill); font-size: 16.5px; line-height: 1.75; color: var(--ink); font-weight: 700; }
.share-note { margin-top: 30px; font-size: 14px; font-weight: 700; color: var(--body-c); }
.doc-side-inner { position: sticky; top: 112px; display: flex; flex-direction: column; gap: 26px; }
.side-block { background: var(--fill); padding: 26px 26px 28px; }
.side-block .badge-row { margin-bottom: 14px; }
.side-block ol { counter-reset: tr; }
.trend-row { display: flex; gap: 14px; padding: 10px 0; align-items: flex-start; border-top: 1px solid rgba(0,42,19,.08); }
.trend-row:first-child { border-top: 0; padding-top: 0; }
.trend-row .n { font-size: 22px; font-weight: 900; color: var(--red); line-height: 1.1; flex: none; }
.trend-row h4 { font-size: 14.5px; line-height: 1.45; transition: color .18s ease; }
.trend-row:hover h4 { color: var(--green); }
.mini-list { display: flex; flex-direction: column; gap: 16px; }
.mini-item { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: start; }
.mini-item .imgbox { aspect-ratio: 16/11; }
.mini-item h3 { font-size: 14px; line-height: 1.4; transition: color .18s ease; }
.mini-item:hover h3 { color: var(--green); }
.glance-block { background: var(--fill); padding: 28px 30px; margin-bottom: 30px; }
.glance-block .lbl { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.glance-block ol { margin-left: 20px; }
.glance-block li { font-size: 15px; line-height: 1.7; margin-bottom: 8px; color: #3D4E47; }
.recommended { margin-top: 44px; background: var(--fill); padding: 32px 34px; }
.recommended h3 { font-size: 20px; margin-bottom: 6px; }
.rec-row { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(0,42,19,.08); }
.rec-row:first-of-type { border-top: 0; }
.rec-row .imgbox { aspect-ratio: 16/10; }
.rec-row h4 { font-size: 15px; line-height: 1.45; transition: color .18s ease; }
.rec-row:hover h4 { color: var(--green); }
.lesson-nav { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; background: var(--fill); padding: 32px 34px; }
.lesson-nav h3 { font-size: 20px; margin-bottom: 10px; }
.lesson-nav a { padding: 16px 18px; background: #fff; transition: transform .2s ease; }
.lesson-nav a:hover { transform: translateY(-3px); }
.lesson-nav .dir { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.lesson-nav h4 { font-size: 16px; margin-top: 6px; }
.more-stories { padding: 60px 0 30px; }
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 22px; }
.more-grid a .imgbox { aspect-ratio: 16/10; }
.more-grid a .cat { display: inline-block; margin-top: 12px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.more-grid a h4 { margin-top: 6px; font-size: 16.5px; line-height: 1.4; transition: color .18s ease; }
.more-grid a:hover h4 { color: var(--green); }
@media (max-width: 1024px) { .doc-grid { grid-template-columns: 1fr; } .doc-side { display: none; } }
@media (max-width: 760px) { .more-grid { grid-template-columns: 1fr; } }

/* section badge: skewed green label (kept for doc kickers) */
.badge-row { margin: 0 0 22px; }
.dp-badge { display: inline-block; background: var(--green); color: #fff; transform: skewX(-12deg); }
.dp-badge > span { display: inline-block; transform: skewX(12deg); padding: 8px 18px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dp-badge.small > span { padding: 6px 14px; font-size: 11.5px; }
.cat-badge { display: inline-block; }

/* fresh chips */
.chip-new, .chip-upd { display: inline-block; margin-right: 8px; padding: 3px 10px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.chip-new { background: var(--green); color: #fff; }
.chip-upd { background: var(--orange); color: #fff; }

/* share row */
.share-row { display: flex; gap: 10px; }
.share-row a, .share-row button { width: 38px; height: 38px; display: grid; place-items: center; background: var(--fill); color: var(--ink); transition: background .2s ease, color .2s ease; }
.share-row a:hover, .share-row button:hover { background: var(--green); color: #fff; }
.share-row svg { width: 16px; height: 16px; }

/* ================= search overlay: deep green ================= */
.search-drop { position: fixed; inset: 0; z-index: 140; background: rgba(0,32,15,.96); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.search-drop.is-on { opacity: 1; pointer-events: auto; }
.search-panel { max-width: 780px; margin: 0 auto; padding: 120px 24px 40px; }
.search-field { display: flex; align-items: center; gap: 16px; background: #fff; padding: 6px 20px; height: 72px; }
.search-field svg { width: 24px; height: 24px; color: var(--green); flex: none; }
.search-input { flex: 1; height: 100%; font-size: 20px; font-weight: 700; color: var(--ink); outline: none; background: none; }
.search-input::-webkit-search-cancel-button { display: none; -webkit-appearance: none; }
.search-input::placeholder { color: #8AA097; font-weight: 600; }
.search-x { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); transition: color .2s ease; }
.search-x:hover { color: var(--red); }
.search-x svg { width: 22px; height: 22px; }
.search-drop-results { margin-top: 22px; max-height: calc(100vh - 300px); overflow-y: auto; }
.sd-hint { color: rgba(255,255,255,.75); font-size: 15px; font-weight: 600; padding: 8px 2px; }
.sd-row { display: flex; align-items: center; gap: 16px; padding: 13px 14px; background: rgba(255,255,255,.07); margin-bottom: 8px; transition: background .18s ease; }
.sd-row:hover { background: rgba(255,255,255,.14); }
.sd-row img { width: 74px; height: 50px; object-fit: cover; flex: none; }
.sd-kind { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green-bright); width: 76px; }
.sd-row h4 { color: #fff; font-size: 15px; font-weight: 700; line-height: 1.4; }

/* ================= mobile menu: pure white top drop-down =================
   A clean white panel drops from the top of the screen, properly
   spaced: dark ink links, airy rows, quiet dividers, green accents
   only on the active/hover states and the Contact Us button. */
.menu-root { position: fixed; inset: 0; z-index: 130; }
.menu-backdrop { position: absolute; inset: 0; background: rgba(4,24,14,.45); opacity: 0; transition: opacity .6s ease; }
.menu-root.is-on .menu-backdrop { opacity: 1; }
.menu-pane {
  position: absolute; top: 0; left: 0; right: 0;
  max-height: min(86vh, 780px); overflow-y: auto;
  background: #fff; color: var(--ink);
  padding: 96px clamp(24px, 7vw, 72px) 52px;
  transform: translateY(-102%); transition: transform .9s cubic-bezier(.3,.08,.12,1);
  box-shadow: 0 40px 70px -22px rgba(0,26,12,.35);
}
.menu-root.is-on .menu-pane { transform: none; }
.menu-close { position: absolute; top: 24px; right: 24px; width: 46px; height: 46px; display: grid; place-items: center; color: var(--ink); }
.menu-close svg { width: 24px; height: 24px; }
.menu-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; color: var(--ink); font-size: 14.5px; font-weight: 500; letter-spacing: .01em; border-bottom: 1px solid rgba(0,42,19,.09); transition: color .18s ease; }
.menu-item:hover { color: var(--green); }
.menu-item.is-active, .menu-row .menu-item.is-active { color: var(--green); font-weight: 700; }
.menu-row { display: flex; align-items: center; }
.menu-row .menu-item { flex: 1; border-bottom: 0; padding-bottom: 0; }
.menu-caret { width: 42px; height: 42px; display: grid; place-items: center; color: var(--green); transition: transform .25s ease; }
.menu-caret svg { width: 16px; height: 16px; }
.menu-group.is-open .menu-caret { transform: rotate(180deg); }
.menu-sub { display: none; padding: 2px 0 10px; }
.menu-group.is-open .menu-sub { display: block; }
.menu-sub .menu-item { font-size: 13px; font-weight: 400; color: var(--body-c); padding: 9px 0 9px 14px; border-bottom: 0; }
.menu-sub .menu-item:hover, .menu-sub .menu-item.is-active { color: var(--green); }
.menu-cta { margin-top: 34px; width: 100%; }
.menu-social { margin-top: 34px; }
.menu-social p { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--body-c); margin-bottom: 14px; }
.menu-social-row { display: flex; gap: 20px; }
.menu-social-row .soc { color: var(--ink); }
.menu-social-row .soc:hover { color: var(--green); }
body.menu-open { overflow: hidden; }

/* ================= splash: transparent veil, green logo centre ================= */
#splash { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(255,255,255,.86); backdrop-filter: blur(6px); animation: splashIn .3s ease both; }
.splash-card { text-align: center; }
.splash-logo { height: 44px; width: auto; margin: 0 auto; }
.splash-name { margin-top: 14px; font-size: 15px; font-weight: 900; color: var(--ink); letter-spacing: .01em; }
.splash-strap { margin-top: 5px; font-size: 8.5px; font-weight: 800; letter-spacing: .3em; color: var(--green); }
.splash-dots { margin-top: 16px; display: flex; justify-content: center; gap: 7px; }
.splash-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--green); opacity: .35; animation: splashDot 1s ease-in-out infinite; }
.splash-dots span:nth-child(2) { animation-delay: .16s; }
.splash-dots span:nth-child(3) { animation-delay: .32s; }
@keyframes splashDot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
#splash.splash-hide { animation: splashFail .6s ease both; }
@keyframes splashIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes splashFail { 0%, 88% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* ================= 404 ================= */
.notfound { position: relative; overflow: hidden; padding: 90px 0 110px; background: linear-gradient(115deg, #fff 55%, var(--fill) 55.2%); }
.nf-in { position: relative; z-index: 2; max-width: 560px; }
.nf-oops { color: var(--peri); font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; margin-bottom: 18px; }
.nf-404 { position: absolute; right: 4vw; top: 60px; font-size: clamp(9rem, 20vw, 17rem); font-weight: 900; line-height: 1; color: var(--peri); opacity: .9; z-index: 1; }
.notfound p { font-size: 16.5px; line-height: 1.8; margin-bottom: 12px; }
.nf-search { display: flex; margin-top: 26px; max-width: 460px; }
.nf-search input { flex: 1; height: 56px; background: var(--util); padding: 0 18px; font-size: 15px; font-weight: 600; color: var(--ink); outline: none; border: 1px solid var(--line); }
.nf-search button { width: 58px; background: var(--peri); color: #fff; display: grid; place-items: center; }
.nf-search button svg { width: 20px; height: 20px; }
.nf-actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ================= video modal + strip ================= */
.video-modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; background: rgba(0,20,9,.9); }
.vm-box { width: min(920px, 94vw); background: #000; position: relative; }
.vm-box video, .vm-box iframe { width: 100%; aspect-ratio: 16/9; }
.vm-close { position: absolute; top: -52px; right: 0; color: #fff; width: 44px; height: 44px; display: grid; place-items: center; }
.vm-close svg { width: 26px; height: 26px; }
.video-strip { padding: 10px 0 40px; }
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.video-card { text-align: left; background: var(--fill); }
.video-thumb { position: relative; display: block; }
.video-thumb .imgbox { aspect-ratio: 16/9; }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; }
.vp-shape { width: 64px; height: 64px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; transition: transform .25s ease, background .2s ease; }
.vp-shape svg { width: 26px; height: 26px; margin-left: 3px; }
.video-card:hover .vp-shape { transform: scale(1.12); background: var(--red); }
.video-meta { padding: 20px 24px 24px; display: flex; flex-direction: column; gap: 8px; }
.video-kind { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.video-title { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.4; }
.video-desc { font-size: 14px; line-height: 1.7; color: var(--body-c); }
@media (max-width: 860px) { .video-grid { grid-template-columns: 1fr; } }

/* ================= chat widget (green, kept) ================= */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 120; width: 60px; height: 60px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -8px rgba(0,60,26,.55); transition: transform .2s ease, background .2s ease; }
.chat-fab:hover { transform: translateY(-3px); background: var(--green-dark); }
.chat-fab svg { width: 26px; height: 26px; }
.chat-fab .msym { font-size: 28px; }
.chat-panel { position: fixed; right: 22px; bottom: 96px; z-index: 121; width: min(380px, calc(100vw - 44px)); background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px -18px rgba(0,30,14,.45); animation: chatIn .3s cubic-bezier(.22,1,.36,1) both; }
@keyframes chatIn { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.chat-head { background: var(--green); color: #fff; padding: 18px 20px 16px; }
.chat-head h3 { color: #fff; font-size: 16px; margin: 0; }
.chat-head p { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 3px; }
.chat-log { height: 300px; overflow-y: auto; padding: 18px 16px; display: flex; flex-direction: column; gap: 10px; background: #FAFBFA; }
.msg { max-width: 82%; padding: 10px 15px; font-size: 13.5px; line-height: 1.55; border-radius: 16px; animation: msgIn .26s ease both; }
@keyframes msgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.msg.bot { background: var(--fill); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.msg.me { background: var(--green); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 4px; }
.chat-chip { padding: 8px 14px; border-radius: 999px; background: var(--fill); font-size: 12.5px; font-weight: 700; color: var(--ink); transition: background .2s ease, color .2s ease; }
.chat-chip:hover { background: var(--green); color: #fff; }
.chat-form { display: flex; gap: 10px; padding: 12px 16px 16px; }
.chat-input { flex: 1; height: 46px; background: var(--fill); padding: 0 16px; font-size: 14px; color: var(--ink); outline: none; border-radius: 12px; }
.chat-send { width: 46px; height: 46px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.chat-send svg { width: 19px; height: 19px; }
.chat-note { padding: 0 16px 14px; font-size: 11.5px; color: var(--body-c); }

/* ================= misc ================= */
.empty-hero { padding: 80px 24px; text-align: center; background: var(--fill); }
.empty-hero h2 { font-size: 24px; margin-bottom: 10px; }
.empty-note { padding: 30px 0; font-size: 15px; color: var(--body-c); }
.filter-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 30px; }
.filter-word { padding: 10px 20px; font-size: 13.5px; font-weight: 800; color: var(--ink); background: var(--fill); transition: background .2s ease, color .2s ease; }
.filter-word:hover { background: #E4EBE7; }
.filter-word.is-on { background: var(--green); color: #fff; }
.result-count { font-size: 14px; font-weight: 700; color: var(--body-c); margin-bottom: 18px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.ex-row { padding: 22px 0; border-top: 1px solid rgba(0,42,19,.1); }
.ex-row:first-child { border-top: 0; }
.ex-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ex-head h3 { font-size: 17px; }
.ex-head .co { font-size: 12.5px; font-weight: 800; color: var(--red); letter-spacing: .06em; text-transform: uppercase; }
.ex-row p { margin-top: 6px; font-size: 14.5px; line-height: 1.7; }
.path-group { margin-bottom: 40px; }
.path-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.path-head h3 { font-size: 22px; }
.path-head .cnt { font-size: 13px; font-weight: 800; color: var(--red); letter-spacing: .06em; text-transform: uppercase; }
.lesson-row { display: flex; gap: 22px; padding: 20px 22px; background: var(--fill); margin-bottom: 14px; transition: transform .2s ease, background .2s ease; }
.lesson-row:hover { transform: translateY(-3px); background: #EEF3F0; }
.lesson-row .n { font-size: 26px; font-weight: 900; color: var(--green); line-height: 1.1; flex: none; }
.lesson-row h4 { font-size: 17px; margin: 4px 0 6px; }
.lesson-row .lede { font-size: 14px; line-height: 1.65; }
.hl-kick { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.hl-kick.black { color: var(--ink); }
.hl-kick.on-black { color: var(--green-bright); }
.meta-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.meta-line .dt { font-size: 12.5px; font-weight: 700; color: var(--body-c); }
.row-item { display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: start; padding: 20px 0; }
.row-item .imgbox { aspect-ratio: 16/10; }
.row-item h3 { font-size: 18px; margin: 6px 0; transition: color .18s ease; }
.row-item:hover h3 { color: var(--green); }
.row-item p { font-size: 14px; line-height: 1.65; }
@media (max-width: 700px) { .row-item { grid-template-columns: 1fr; } }
.trust-list { margin-top: 18px; }
.trust-list li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 14.5px; color: rgba(255,255,255,.88); }
.trust-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; background: var(--green-bright); }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.info-item { background: var(--fill); padding: 30px 30px 32px; }
.info-item .lbl { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--red); margin-bottom: 12px; }
.info-item .lbl .msym { font-size: 19px; color: var(--green); }
.info-item p { font-size: 15px; line-height: 1.7; color: var(--ink); font-weight: 600; }
.info-item a:hover { color: var(--green); }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }
.section { padding: 70px 0; }
.cta-center { text-align: center; padding: 80px 0; }
.cta-center h2 { font-size: clamp(1.7rem, 2.8vw, 2.3rem); margin-bottom: 12px; }
.cta-center p { max-width: 640px; margin: 0 auto; font-size: 15.5px; line-height: 1.75; }
.cta-actions { margin-top: 28px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.view-in { animation: viewIn .5s cubic-bezier(.22,.75,.25,1) both; }
.view-out { animation: viewOut .21s ease both; }
@keyframes viewOut { to { opacity: 0; transform: translateX(-36px); } }
@keyframes viewIn { from { opacity: 0; transform: translateX(44px); } to { opacity: 1; transform: none; } }
main.view { flex: 1 0 auto; }

/* reduced motion: settle instantly */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hf-media img, .hf-media video, .pg-hero .imgbox img, .imgbox img, .sh-hero-media .imgbox img { animation: none; }
  .lf { animation: none; opacity: 1; filter: none; transform: none; }
  .view-in, .view-out { animation: none; }
  #splash { display: none; }
  .pg-solid, .pg-solid .pg-in, .hero-banner, .hf-rot-layer.swap-in, .hf-rot-layer.swap-out { animation: none; }
}

/* ================= contact: company registration strip ================= */
.reg-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; background: var(--fill); padding: 30px 34px; margin-top: 34px; }
.reg-badge { flex: none; width: 74px; height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--green); color: #fff; }
.reg-badge b { font-size: 21px; font-weight: 900; letter-spacing: .04em; line-height: 1; }
.reg-badge span { font-size: 10px; font-weight: 800; letter-spacing: .12em; opacity: .85; }
.reg-body { min-width: 0; flex: 1; }
.reg-body h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.reg-body p { font-size: 14px; line-height: 1.7; color: var(--body-c); }
.reg-body .reg-rc { color: var(--ink); font-weight: 800; }
.reg-body a { color: var(--green); font-weight: 800; display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; }
.reg-body a svg { width: 14px; height: 14px; }
.reg-body a:hover { color: var(--green-dark); }
@media (max-width: 640px) { .reg-strip { padding: 24px 22px; } }

/* document body extras (renderSections output) */
.doc-h2 { font-size: 25px; margin: 36px 0 14px; }
.doc-h2 .n { color: var(--red); margin-right: 10px; font-size: 20px; }
.doc-list { margin: 0 0 20px 2px; }
.doc-list li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 15.5px; line-height: 1.7; color: #3D4E47; }
.doc-list li .dot { position: absolute; left: 0; top: 8px; width: 12px; height: 12px; background: var(--green); }
.doc-quote { margin: 26px 0; padding: 22px 28px; background: var(--fill); font-size: 16.5px; line-height: 1.75; color: var(--ink); font-weight: 700; }
.doc-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 22px 0; }
.doc-imgs.single { grid-template-columns: 1fr; }
@media (max-width: 700px) { .doc-imgs { grid-template-columns: 1fr; } }
.side-lbl { font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
.news-ok { background: rgba(0,166,63,.12); color: var(--ink); padding: 18px 22px; font-size: 14.5px; font-weight: 800; }
.t-ic { display: inline-grid; place-items: center; margin-right: 10px; color: var(--green-bright); font-size: 19px; width: 22px; }
.t-ic .msym { font-size: 19px; }
.doc-side { min-width: 0; }

/* ================= cookie consent: bottom left card =================
   Shows the moment a visitor first enters the website. One choice
   (accept all / essential only) is remembered, after which the card
   never troubles the visitor again. Reopenable from the notice page. */
.cookie-bar { position: fixed; left: 22px; bottom: 22px; z-index: 350; max-width: 520px;
  opacity: 0; visibility: hidden; transform: translateY(18px);
  transition: opacity .45s ease, transform .45s ease, visibility .45s; }
.cookie-bar.is-in { opacity: 1; visibility: visible; transform: none; }
.cookie-bar.is-out { opacity: 0; visibility: hidden; transform: translateY(18px); }
.cookie-bar.is-hidden { display: none; }
.cookie-card { background: #fff;
  border: 1px solid rgba(0,42,19,.1); border-left: 4px solid var(--green);
  box-shadow: 0 30px 60px -18px rgba(0,26,12,.35); padding: 20px 22px; }
.cookie-copy { min-width: 0; }
.cookie-t { font-family: var(--font); font-size: 16px; font-weight: 800; color: var(--ink); }
.cookie-x { margin-top: 6px; font-size: 13.5px; line-height: 1.65; color: var(--body-c); }
.cookie-x a { color: var(--green); font-weight: 700; text-decoration: underline; }
.cookie-x strong { font-family: var(--font); }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cookie-actions .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .cookie-bar { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .cookie-card { padding: 18px; }
  .cookie-actions .btn { flex: 1 1 auto; }
}