/* Layout concept: a spec sheet you can walk through. Field photos up top, lab-report tables and certificate-style data blocks underneath, the brand's navy-violet-crimson rule as the only flourish. */
:root {
  --bg: #ffffff;
  --panel: #f6f4f9;
  --panel-2: #eeeaf4;
  --line: #dcd6e6;
  --fg: #16112a;
  --muted: #5a5470;
  --navy: #0c2442;
  --violet: #6a2c91;
  --violet-ink: #5b2380;
  --crimson: #d42a3c;
  --leaf: #1f6b45;
  --leaf-bg: #10392a;
  --leaf-soft: #e7f2ec;
  --on-dark: #ffffff;
  --tbc: #fff1a8;
  --tbc-ink: #5a4500;
  --tbc-line: #e0b400;
  --pass: #137a4b;
  --rule: linear-gradient(90deg, #0c2442 0%, #6a2c91 55%, #d42a3c 100%);
  --f-display: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --wrap: 1180px;
  --radius: 10px;
  --logo-filter: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1220; --panel: #151b2e; --panel-2: #1c2440; --line: #2c3552;
    --fg: #ece9f5; --muted: #a7a2bd; --navy: #0a1730; --violet: #b78ae6; --violet-ink: #c9a6f0;
    --crimson: #ff6b78; --leaf: #6fd19c; --leaf-bg: #0e2e22; --leaf-soft: #13291f; --on-dark: #ffffff;
    --tbc: #4a3d00; --tbc-ink: #ffe680; --tbc-line: #c9a200; --pass: #5fd49a;
    --logo-filter: brightness(0) invert(1);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d1220; --panel: #151b2e; --panel-2: #1c2440; --line: #2c3552;
  --fg: #ece9f5; --muted: #a7a2bd; --navy: #0a1730; --violet: #b78ae6; --violet-ink: #c9a6f0;
  --crimson: #ff6b78; --leaf: #6fd19c; --leaf-bg: #0e2e22; --leaf-soft: #13291f; --on-dark: #ffffff;
  --tbc: #4a3d00; --tbc-ink: #ffe680; --tbc-line: #c9a200; --pass: #5fd49a;
  --logo-filter: brightness(0) invert(1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { background: var(--bg); color: var(--fg); font-family: var(--f-body); font-size: 17px; line-height: 1.6; margin: 0; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
img { max-width: 100%; display: block; }
a { color: var(--violet-ink); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.12; letter-spacing: -0.015em; text-wrap: balance; margin: 0; color: var(--fg); }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.1; font-weight: 700; }
h2 { font-size: clamp(1.55rem, 1.05rem + 2.3vw, 2.875rem); line-height: 1.12; font-weight: 700; }
h3 { font-size: clamp(1.2rem, 0.95rem + 1.1vw, 1.6rem); line-height: 1.2; font-weight: 600; }
h4 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.eyebrow { font-family: var(--f-display); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-ink); }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: .9rem; }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-data); font-size: .9em; }

/* Header */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--bg); border-bottom: 1px solid var(--line); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--rule); z-index: 0; pointer-events: none; }
.bar { display: flex; align-items: center; gap: 24px; min-height: 88px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--fg); flex-shrink: 0; }
.brand img { height: 60px; width: auto; filter: var(--logo-filter); }
@media (max-width: 620px) { .brand img { height: 48px; } }
.brand .wordmark { font-family: var(--f-display); font-weight: 400; letter-spacing: .22em; font-size: 1rem; }
.nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav > a, .nav-group > .nav-top { font-family: var(--f-display); font-size: .95rem; font-weight: 500; color: var(--fg); text-decoration: none; background: none; border: 0; padding: 10px 12px; border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.nav > a:hover, .nav-group > .nav-top:hover, .nav-group:focus-within > .nav-top { background: var(--panel); }
.nav a[aria-current="page"], .nav-group.current > .nav-top { color: var(--violet-ink); }
.nav-group { position: relative; }
.nav-group > .nav-top::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); margin-left: 4px; }
.menu { position: absolute; top: 100%; left: 0; min-width: 250px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 12px 30px rgba(12, 36, 66, .14); padding: 8px; display: none; z-index: 10; }
.nav-group:hover .menu, .nav-group:focus-within .menu, .nav-group.open .menu { display: block; }
.menu a { display: block; padding: 9px 12px; border-radius: 6px; color: var(--fg); text-decoration: none; }
.menu a small { display: block; color: var(--muted); font-size: .82rem; }
.menu a:hover { background: var(--panel); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--f-display); font-weight: 600; font-size: 1rem; padding: 13px 22px; border-radius: 8px; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .15s ease, background .15s ease; }
.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { border-color: currentColor; color: var(--fg); background: transparent; }
.btn-light { background: #fff; color: #0c2442; }
.btn-sm { padding: 9px 16px; font-size: .92rem; }
.nav > a.nav-cta { margin-left: 8px; background: var(--crimson); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 600; }
.nav > a.nav-cta:hover { background: var(--crimson); filter: brightness(1.08); }
.menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font: 600 .95rem var(--f-display); color: var(--fg); cursor: pointer; }
@media (max-width: 1020px) {
  .menu-toggle { display: inline-flex; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bg); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px max(20px, env(safe-area-inset-right, 0px)) 20px max(20px, env(safe-area-inset-left, 0px)); max-height: 80vh; overflow-y: auto; }
  .nav.open { display: flex; }
  .nav-group .menu { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 6px 12px; }
  .nav-group > .nav-top::after { display: none; }
  .nav > a.nav-cta { margin: 10px 0 0; justify-content: center; }
}

/* Sections */
section { padding-block: 72px; }
section.tight { padding-block: 48px; }
.section-head { display: grid; gap: 12px; margin-bottom: 36px; max-width: 760px; }
.band { background: var(--panel); }
.band-navy { background: var(--navy); color: #fff; }
.band-navy h2, .band-navy h3 { color: #fff; }
.band-navy .eyebrow { color: #f3a6c0; }
.band-navy .lead, .band-navy .muted { color: #c8cde0; }
.band-leaf { background: var(--leaf-bg); color: #fff; }
.band-leaf h2, .band-leaf h3 { color: #fff; }
.band-leaf .muted { color: #b9d9c6; }
.grid { display: grid; gap: 24px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } section { padding-block: 52px; } }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Page hero */
.page-hero { padding-block: 56px 48px; border-bottom: 1px solid var(--line); }
.page-hero .wrap { display: grid; gap: 16px; }
.crumbs { font-size: .88rem; color: var(--muted); }
.crumbs a { color: var(--muted); }

/* Home hero */
.hero { position: relative; color: #fff; background: #0c2442; overflow: hidden; padding-block: 0; }
.hero .slides { display: grid; }
.hero .slide { grid-area: 1 / 1; position: relative; opacity: 0; visibility: hidden; transition: opacity 1.6s ease-in-out, visibility 1.6s; }
.hero .slide.is-active { opacity: 1; visibility: visible; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: .55; }
.hero .slide::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 20, 40, .92) 0%, rgba(8, 20, 40, .72) 45%, rgba(8, 20, 40, .2) 100%); z-index: 1; }
.hero .slide > .wrap { position: relative; z-index: 2; padding-block: 96px 112px; display: grid; gap: 22px; align-content: start; }
.hero .slide-title { color: #fff; max-width: 22ch; font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.1; font-weight: 700; }
.hero-controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: 28px; max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); display: flex; align-items: center; justify-content: center; gap: 16px; }
.hero-controls .dots { display: flex; gap: 6px; }
.hero-controls .dot { width: 28px; height: 28px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.hero-controls .dot::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: rgba(255, 255, 255, .4); border: 1px solid rgba(255, 255, 255, .7); transition: background .3s ease, transform .3s ease; }
.hero-controls .dot:hover::before { background: rgba(255, 255, 255, .7); }
.hero-controls .dot[aria-current="true"]::before { background: #fff; transform: scale(1.25); }
.hero-controls .pause { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); width: 36px; height: 36px; border-radius: 50%; background: rgba(8, 20, 40, .45); border: 1px solid rgba(255, 255, 255, .6); color: #fff; padding: 0; display: grid; place-items: center; cursor: pointer; transition: background .2s ease; }
.hero-controls .pause:hover { background: rgba(255, 255, 255, .2); }
.hero-controls .pause svg { width: 16px; height: 16px; }
.hero .eyebrow { font-size: clamp(.78rem, 1vw, .88rem); letter-spacing: .16em; }
.hero h1 { color: #fff; max-width: 22ch; font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.25rem); line-height: 1.1; }
.hero .sub { font-family: var(--f-display); font-size: clamp(1.3rem, 0.9rem + 1.9vw, 2.125rem); line-height: 1.25; font-weight: 600; color: #f3d9ff; }
.hero .lead { color: #dfe3f0; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .btn-ghost { color: #fff; }
.proof-strip { background: var(--navy); color: #fff; border-top: 1px solid rgba(255, 255, 255, .12); }
.proof-strip ul { list-style: none; margin: 0; padding: 34px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.proof-strip li { display: grid; gap: 2px; }
.proof-strip strong { font-family: var(--f-display); font-size: clamp(2.1rem, 3.8vw, 3rem); line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; }
.proof-strip span { font-size: 1rem; color: #c8cde0; }
@media (max-width: 760px) { .proof-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Stats */
.stat { display: grid; gap: 4px; }
.stat .n { font-family: var(--f-display); font-weight: 700; font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1; color: var(--violet-ink); font-variant-numeric: tabular-nums; }
.stat .u { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; color: var(--violet-ink); }
.stat p { color: var(--muted); }

/* Cards: used only for hub links and spec blocks */
.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; align-content: start; }
.band .card { background: var(--bg); }
a.card { text-decoration: none; color: var(--fg); transition: border-color .15s ease, transform .15s ease; }
a.card:hover { border-color: var(--violet); transform: translateY(-2px); }
a.card .more { font-family: var(--f-display); font-weight: 600; color: var(--violet-ink); margin-top: 6px; }
.panel { background: var(--panel); border-radius: var(--radius); padding: 24px; display: grid; gap: 8px; align-content: start; }
.panel h3 { color: var(--violet-ink); }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .96rem; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-family: var(--f-display); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--panel); white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td .mono, td.mono { font-family: var(--f-data); font-size: .88rem; }
.pass { color: var(--pass); font-weight: 700; font-family: var(--f-data); font-size: .85rem; }

/* Spec list (CoC style) */
.spec { border-top: 2px solid var(--fg); }
.spec > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec dt { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; }
.spec dd { margin: 0; font-family: var(--f-display); font-weight: 600; color: var(--violet-ink); text-align: right; font-variant-numeric: tabular-nums; }
.spec .d { grid-column: 1 / -1; color: var(--muted); font-size: .94rem; }

/* Swatches */
.swatch-group { display: grid; gap: 14px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 16px; }
.sw { display: grid; gap: 6px; }
.sw i { display: block; aspect-ratio: 1; border-radius: 8px; border: 1px solid rgba(0, 0, 0, .08); max-width: 100%; }
.sw i.check { background-image: linear-gradient(45deg, rgba(0,0,0,.08) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.08) 75%), linear-gradient(45deg, rgba(0,0,0,.08) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.08) 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.sw b { font-family: var(--f-display); font-weight: 600; font-size: .95rem; line-height: 1.2; }
.sw span { font-family: var(--f-data); font-size: .8rem; color: var(--muted); }

/* Quotes */
blockquote { margin: 0; display: grid; gap: 12px; }
blockquote p { font-family: var(--f-display); font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 500; line-height: 1.3; }
blockquote p::before { content: "\201C"; color: var(--violet); }
blockquote p::after { content: "\201D"; color: var(--violet); }
blockquote cite { font-style: normal; font-family: var(--f-display); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.band-navy blockquote cite { color: #c8cde0; }

/* Equation block (40x) */
.equation { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; background: var(--panel-2); border-radius: var(--radius); padding: 24px; }
.equation .op { font-family: var(--f-display); font-size: 1.8rem; color: var(--muted); }
.equation .t { display: grid; gap: 4px; }
.equation .t b { font-family: var(--f-display); font-size: 2rem; color: var(--violet-ink); font-variant-numeric: tabular-nums; line-height: 1.1; }
.equation .t small { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.equation .t .k { font-size: .82rem; font-weight: 600; font-family: var(--f-display); }
@media (max-width: 760px) { .equation { grid-template-columns: minmax(0, 1fr); } .equation .op { text-align: center; } }

/* Charts */
.chart { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; }
.chart svg { width: 100%; height: auto; overflow: visible; }
.chart figcaption { font-size: .88rem; color: var(--muted); }
.chart .ttl { font-family: var(--f-display); font-weight: 600; }
.c-axis { stroke: var(--line); }
.c-grid { stroke: var(--line); stroke-dasharray: 3 4; }
.c-text { fill: var(--muted); font-family: var(--f-data); font-size: 12px; }
.c-label { fill: var(--fg); font-family: var(--f-display); font-size: 14px; font-weight: 600; }
.c-limit { stroke: var(--crimson); stroke-width: 2; stroke-dasharray: 6 4; }
.c-limit-t { fill: var(--crimson); font-family: var(--f-display); font-size: 13px; font-weight: 600; }
.c-bar-limit { fill: var(--panel-2); }
.c-bar { fill: var(--violet); }
.c-dot { fill: var(--violet); }
.c-empty { fill: none; stroke: var(--line); stroke-dasharray: 3 3; }

/* Trees */
.trees { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 6px 4px; }
.trees svg { width: 100%; height: auto; }
@media (max-width: 620px) { .trees { grid-template-columns: repeat(10, minmax(0, 1fr)); } }
.tank-calc { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: 20px; align-items: end; background: var(--leaf-soft); border-radius: var(--radius); padding: 24px; }
.tank-calc .stat .n { color: var(--leaf); font-size: 2.2rem; }
.tank-calc .stat p { font-size: .92rem; }
@media (max-width: 760px) { .tank-calc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Photos */
.photo { border-radius: var(--radius); overflow: hidden; background: var(--panel-2); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.photo-grid .photo { aspect-ratio: 4 / 3; }
.photo-grid .tall { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 620px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-grid .tall { grid-row: auto; aspect-ratio: 4/3; } }
figure { margin: 0; }
figure > figcaption { font-size: .88rem; color: var(--muted); margin-top: 8px; }

/* Product tiles (made with fenix) */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.tile { display: grid; gap: 8px; align-content: start; }
.tile .ph { aspect-ratio: 4 / 3; border-radius: var(--radius); background: var(--panel-2); display: grid; place-items: center; text-align: center; padding: 12px; color: var(--muted); font-size: .82rem; font-family: var(--f-data); border: 1px dashed var(--line); }
.tile b { font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; }
.tile span { color: var(--muted); font-size: .94rem; }
.tag { display: inline-block; font-family: var(--f-display); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--panel-2); color: var(--violet-ink); width: fit-content; }
.tag.gold { background: #f6e7b4; color: #6a4d00; }

/* Steps (real sequences only) */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.steps li::before { content: counter(s); font-family: var(--f-display); font-weight: 700; font-size: 1.4rem; color: var(--violet-ink); }
.steps li div { display: grid; gap: 4px; }

/* FAQ */
.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; font-family: var(--f-display); font-weight: 600; font-size: 1.1rem; padding: 14px 32px 14px 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 10px; font-size: 1.5rem; color: var(--violet-ink); }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { padding: 0 0 18px; color: var(--fg); max-width: 70ch; display: grid; gap: .8em; }

/* Forms */
.form { display: grid; gap: 16px; background: var(--panel); border-radius: var(--radius); padding: 28px; }
.form .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 620px) { .form .row { grid-template-columns: minmax(0, 1fr); } }
.field { display: grid; gap: 6px; }
.field label, .field legend { font-family: var(--f-display); font-weight: 600; font-size: .92rem; }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; padding: 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); width: 100%; }
.field textarea { min-height: 110px; resize: vertical; }
fieldset.field { border: 0; padding: 0; margin: 0; }
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
@media (max-width: 620px) { .checks { grid-template-columns: minmax(0, 1fr); } }
.checks label { font-family: var(--f-body); font-weight: 400; font-size: .98rem; display: flex; gap: 8px; align-items: flex-start; }
.checks input { width: auto; margin-top: 5px; }
.form-note { font-size: .86rem; color: var(--muted); }
.form-ok { background: var(--leaf-soft); color: var(--fg); border-radius: 8px; padding: 14px 16px; border-left: 4px solid var(--leaf); }

/* Trial band */
.trial { background: var(--navy); color: #fff; border-radius: 14px; padding: 40px; display: grid; gap: 16px; position: relative; overflow: hidden; }
.trial::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--rule); }
.trial h2 { color: #fff; }
.trial p { color: #d5daea; max-width: 62ch; }
.trial .eyebrow { color: #f3a6c0; }
@media (max-width: 620px) { .trial { padding: 28px 22px; } }

/* Article */
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--muted); font-size: .92rem; }
.callout { border-left: 4px solid var(--violet); background: var(--panel); padding: 16px 20px; border-radius: 0 8px 8px 0; }
.toc { position: sticky; top: 100px; display: grid; gap: 6px; font-size: .94rem; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--violet-ink); }
.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 56px; align-items: start; }
@media (max-width: 900px) { .with-aside { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }

/* Footer */
.site-footer { background: var(--navy); color: #c8cde0; padding-block: 56px 32px; margin-top: 0; position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rule); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.foot { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 32px; }
.foot h4 { color: #fff; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 12px; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: .95rem; }
.foot .co { display: grid; gap: 10px; font-size: .92rem; }
.foot .co img { height: 46px; width: auto; filter: brightness(0) invert(1); }
.legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .82rem; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
@media (max-width: 900px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot .co { grid-column: 1 / -1; } }

/* ===== Review markers (prototype only) ===== */
.tbc { background: var(--tbc); color: var(--tbc-ink); border-bottom: 2px solid var(--tbc-line); padding: 0 4px; border-radius: 3px; font-weight: 600; cursor: help; }
.tbc::before { content: "CONFIRM \00B7 "; font-family: var(--f-data); font-size: .7em; letter-spacing: .04em; }
.need { border: 2px dashed var(--tbc-line); background: var(--tbc); color: var(--tbc-ink); border-radius: 8px; padding: 12px 14px; font-size: .92rem; display: grid; gap: 4px; }
.need::before { content: "CONTENT NEEDED"; font-family: var(--f-data); font-size: .72rem; font-weight: 700; letter-spacing: .08em; }
.need.note::before { content: "REVIEW NOTE"; }
.seo-panel { background: #1a1530; color: #e8e2ff; font-family: var(--f-data); font-size: .8rem; line-height: 1.5; }
.seo-panel .wrap { padding-block: 10px; display: grid; gap: 2px; }
.seo-panel b { color: #ffd84d; font-weight: 600; }
.review-toggle { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 70; background: #1a1530; color: #ffd84d; border: 2px solid #ffd84d; border-radius: 999px; padding: 10px 16px; font: 600 .86rem var(--f-data); cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
body.review-off .tbc { background: none; color: inherit; border: 0; padding: 0; font-weight: inherit; cursor: auto; }
body.review-off .tbc::before { content: none; }
body.review-off .need, body.review-off .seo-panel { display: none; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* SAPRO seal on hero slide 1 */
.hero-badge { position: absolute; z-index: 3; right: max(20px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); width: clamp(140px, 15vw, 190px); aspect-ratio: 1; text-decoration: none; color: #fff; }
.hero-badge img { width: 100%; height: auto; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
.badge-slot { width: 100%; height: 100%; border-radius: 50%; border: 2px dashed #e7c66a; background: rgba(8, 20, 40, .55); display: grid; place-content: center; text-align: center; gap: 2px; padding: 12px; }
.badge-slot b { font-family: var(--f-display); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: #e7c66a; }
.badge-slot span { font-family: var(--f-display); font-size: 1.9rem; font-weight: 700; line-height: 1; }
.badge-slot small { font-family: var(--f-data); font-size: .62rem; color: #c8cde0; margin-top: 4px; }
@media (max-width: 860px) {
  .hero-badge { position: static; transform: none; width: 104px; }
  .badge-slot b { font-size: .6rem; }
  .badge-slot span { font-size: 1.3rem; }
  .badge-slot small { display: none; }
}
[id] { scroll-margin-top: 110px; }

/* Section sub-navigation (pages inside Products, Quality & Safety, Resources) */
.subnav { background: var(--panel); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; padding-block: 10px; }
.subnav-label { font-family: var(--f-display); font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.subnav .tabs { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; }
.subnav .tabs a { font-family: var(--f-display); font-weight: 500; font-size: .95rem; color: var(--fg); text-decoration: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
.subnav .tabs a:hover { border-color: var(--violet); }
.subnav .tabs a[aria-current="page"] { background: var(--violet-ink); border-color: var(--violet-ink); color: var(--bg); }
.hero .hero-lead { max-width: 46em; text-wrap: pretty; }

/* Phone tuning */
@media (max-width: 620px) {
  .hero .slide > .wrap { padding-block: 40px 88px; gap: 18px; }
  .hero-badge { width: 84px; }
  .badge-slot { padding: 6px; }
  .badge-slot b { font-size: .52rem; }
  .badge-slot span { font-size: 1.1rem; }
  .hero .lead { font-size: 1.08rem; }
  .proof-strip ul { padding: 26px 0; gap: 20px 16px; }
  .proof-strip strong { font-size: 1.75rem; }
  .proof-strip span { font-size: .92rem; line-height: 1.35; }
  .review-toggle { padding: 7px 12px; font-size: .74rem; }
}
@media (max-width: 620px) {
  .hero .cta-row .btn { flex: 1 1 100%; }
  .badge-slot b { letter-spacing: .02em; line-height: 1.15; }
}
@media (max-width: 620px) {
  .chart { overflow-x: auto; }
  .chart svg { min-width: 520px; }
  .swatches { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .sw b { font-size: .85rem; }
}

.studio-link { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(66px + env(safe-area-inset-bottom, 0px)); z-index: 70; background: #ffd84d; color: #1a1530; border: 2px solid #1a1530; border-radius: 999px; padding: 8px 14px; font: 700 .8rem var(--f-data); text-decoration: none; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
body.review-off .studio-link { display: none; }
@media (max-width: 620px) { .studio-link { bottom: calc(56px + env(safe-area-inset-bottom, 0px)); padding: 6px 12px; font-size: .72rem; } }

/* Compact mobile menu: titles only, tighter rows */
@media (max-width: 1020px) {
  .nav-group .menu a small { display: none; }
  .nav-group .menu a { padding: 7px 12px; font-size: .98rem; }
  .nav > a, .nav-group > .nav-top { padding: 9px 12px; font-size: 1.02rem; font-weight: 600; }
  .nav-group .menu { padding: 0 0 4px 12px; }
}

/* SAPRO 2026 seal: top-right of the hero, on every slide */
.hero > .hero-badge { position: absolute; z-index: 4; top: 24px; right: max(20px, env(safe-area-inset-right, 0px)); transform: none; width: clamp(120px, 12vw, 168px); aspect-ratio: auto; border-radius: 50%; background: radial-gradient(circle, rgba(8, 20, 40, .82) 0 62%, rgba(8, 20, 40, 0) 71%); transition: transform .2s ease; }
.hero > .hero-badge:hover { transform: scale(1.04); }
.hero > .hero-badge img { width: 100%; height: auto; display: block; filter: none; }
@media (max-width: 860px) {
  .hero > .hero-badge { position: absolute; width: 96px; top: 16px; right: 16px; }
}
@media (max-width: 620px) {
  .hero > .hero-badge { width: 80px; top: 14px; right: 14px; }
  .hero .slide > .wrap { padding-top: 104px; }
}
@media (min-width: 861px) { .hero > .hero-badge { top: 32px; right: max(20px, calc((100% - var(--wrap)) / 2 + 20px)); } }
/* Seal shows on the first hero slide only */
.hero > .hero-badge { transition: opacity 1.2s ease-in-out, visibility 1.2s, transform .2s ease; }
.hero:not(.on-first) > .hero-badge { opacity: 0; visibility: hidden; }

/* Tagline under the logo */
.site-header .brand { flex-direction: column; align-items: center; gap: 3px; }
.brand .tagline { font-family: var(--f-display); font-size: .56rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--violet-ink); white-space: nowrap; line-height: 1; }
@media (max-width: 620px) { .brand .tagline { font-size: .47rem; letter-spacing: .1em; } }

/* Hero controls on the left, in line with the hero text; seal moves to the bottom-right */
.hero-controls { justify-content: flex-start; gap: 14px; }
.hero-controls .pause { position: static; width: 32px; height: 32px; }
.hero > .hero-badge { top: auto; bottom: 28px; }
@media (min-width: 861px) { .hero > .hero-badge { top: auto; bottom: 32px; } }
@media (max-width: 860px) { .hero > .hero-badge { top: auto; bottom: 16px; right: 16px; } }
@media (max-width: 620px) {
  .hero > .hero-badge { top: auto; bottom: 12px; right: 14px; width: 80px; }
  .hero .slide > .wrap { padding-top: 40px; padding-bottom: 112px; }
  .hero-controls { bottom: 34px; }
}

/* Dots centred, play button right beside them; larger seal, raised */
.hero-controls { justify-content: center; }
.hero > .hero-badge { width: clamp(150px, 15vw, 212px); }
@media (min-width: 861px) { .hero > .hero-badge { bottom: 96px; } }
@media (max-width: 860px) { .hero > .hero-badge { width: 120px; bottom: 72px; } }
@media (max-width: 620px) { .hero > .hero-badge { width: 104px; bottom: 76px; right: 14px; } }
.hero-controls .pause { margin-right: -46px; } /* keeps the dots exactly centred */
.hero .slide-note { color: #f3a6c0; font-size: clamp(.78rem, 1vw, .88rem); letter-spacing: .16em; margin-top: -6px; }
.hero .slide-title-wide { max-width: 30ch; }
@media (max-width: 620px) { .br-desk { display: none; } }
/* Purple button for secondary actions; red stays reserved for "Request a trial" */
.btn-violet { background: #7a3aa6; color: #fff; }
.btn-violet:hover { background: #8a48b8; transform: translateY(-1px); }
/* Slide 2 photo (portrait): on wide screens it fills the right side so the lifted tank sits clear of the text */
.hero-img-right { object-position: 50% 60%; }
@media (min-width: 861px) {
  .hero .hero-img-right { left: auto; right: 0; width: 56%; opacity: .85; object-position: 50% 58%; }
}
@media (min-width: 861px) {
  .hero .hero-img-right { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%); mask-image: linear-gradient(to right, transparent 0, #000 30%); }
}
/* Both hero photos sit on the right (about 57% of the width) and fade into the navy on the left */
.hero-img-right { object-position: 50% 50%; }
@media (min-width: 861px) {
  .hero .hero-img-right { width: 57%; opacity: .92; object-position: 50% 50%; }
  .hero .slide::before { background: linear-gradient(90deg, rgba(8, 20, 40, .96) 0%, rgba(8, 20, 40, .9) 38%, rgba(8, 20, 40, .35) 62%, rgba(8, 20, 40, .1) 100%); }
}
@media (max-width: 620px) { .hero > .hero-badge { width: 88px; bottom: 10px; right: 12px; } }
.btn-gradient { background: linear-gradient(90deg, #6a2c91 0%, #b23a8e 100%); color: #fff; border: 0; padding: 15px 24px; }
.btn-gradient:hover { background: linear-gradient(90deg, #7a3aa6 0%, #c4479d 100%); transform: translateY(-1px); }

/* Slide 2: light, clean version with dark text */
.hero .slide-light { background: #f6f3f9; }
.hero .slide-light .hero-img { opacity: 1; }
.hero .slide-light::before { background: rgba(246, 243, 249, .9); }
@media (min-width: 861px) {
  .hero .slide-light::before { background: linear-gradient(90deg, rgba(246, 243, 249, 1) 0%, rgba(246, 243, 249, .96) 38%, rgba(246, 243, 249, .35) 62%, rgba(246, 243, 249, 0) 100%); }
  .hero .slide-light .hero-img-right { opacity: 1; }
}
.hero .slide-light .slide-title { color: #16112a; }
.hero .slide-light .sub { color: #6a2c91; }
.hero .slide-light .lead { color: #3d3654; }
.hero .slide-light .btn-ghost { color: #16112a; border-color: #16112a; }
.hero .slide-light .btn-ghost:hover { background: rgba(22, 17, 42, .06); }
.hero .slide-light .need { color: #5a4500; }
/* dots and pause turn dark while slide 2 is showing */
.hero:not(.on-first) .hero-controls .dot::before { background: rgba(22, 17, 42, .2); border-color: rgba(22, 17, 42, .55); }
.hero:not(.on-first) .hero-controls .dot[aria-current="true"]::before { background: #16112a; border-color: #16112a; }
.hero:not(.on-first) .hero-controls .pause { color: #16112a; border-color: rgba(22, 17, 42, .55); background: rgba(255, 255, 255, .6); }
.hero-controls .dot::before, .hero-controls .pause { transition: background .6s ease, border-color .6s ease, color .6s ease, transform .3s ease; }
/* Slide 2 tint: colours taken from the photo (cool sky, warm haze at the horizon, sandy rocks) */
.hero .slide-light { background: linear-gradient(180deg, #d4d9e1 0%, #dfe0de 38%, #ebe7db 58%, #ddd7c8 100%); }
.hero .slide-light::before { background: linear-gradient(180deg, rgba(222, 225, 230, .84) 0%, rgba(236, 232, 221, .86) 58%, rgba(224, 218, 204, .9) 100%); }
@media (min-width: 861px) {
  .hero .slide-light::before { background: linear-gradient(90deg, rgba(236, 233, 224, .55) 0%, rgba(236, 233, 224, .35) 40%, rgba(236, 233, 224, 0) 62%); }
}

/* Big numbers: taller band, numbers in a lilac-to-pink gradient */
.proof-strip ul { padding: 56px 0; row-gap: 28px; }
.proof-strip strong { background: linear-gradient(90deg, #c9a0f2 0%, #ff8cc0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: 4px; }
.proof-strip span { color: #d5d9ea; }
@media (max-width: 620px) { .proof-strip ul { padding: 40px 0; } }
/* Each number gets its own gradient: purple for the years, pink for the tank counts */
.proof-strip li:nth-child(1) strong { background-image: linear-gradient(90deg, #a77ee8 0%, #c9a0f2 100%); }
.proof-strip li:nth-child(2) strong { background-image: linear-gradient(90deg, #c9a0f2 0%, #e2a3e6 100%); }
.proof-strip li:nth-child(3) strong { background-image: linear-gradient(90deg, #ee9ad8 0%, #ff86bb 100%); }
.proof-strip li:nth-child(4) strong { background-image: linear-gradient(90deg, #ff86bb 0%, #ff6f9f 100%); }
/* Brand gradient rule above and below the band, like the header */
.proof-strip { position: relative; border-top: 0; }
.proof-strip::before, .proof-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--rule); }
.proof-strip::before { top: 0; }
.proof-strip::after { bottom: 0; }
.proof-strip sup { font-size: .7em; color: #ff8cc0; margin-left: 1px; }
.proof-note { font-size: .8rem; color: #9aa3c4; margin: -28px 0 0; padding-bottom: 22px; }
@media (max-width: 620px) { .proof-note { margin-top: -16px; } }

/* Proof cards right after the big numbers, on the brand purple-to-pink gradient */
.proof-cards { background: linear-gradient(120deg, #4b1f6e 0%, #6a2c91 40%, #a7368c 100%); padding-block: 56px; }
.proof-cards .card { background: rgba(255, 255, 255, .97); border-color: transparent; box-shadow: 0 10px 28px rgba(30, 8, 50, .25); color: #16112a; }
.proof-cards .card h3 { color: #16112a; }
.proof-cards .card .muted { color: #5a5470; }
.proof-cards .card .more { color: #6a2c91; }
.proof-cards .tag { background: #efe6f7; color: #5b2380; }
@media (max-width: 620px) { .proof-cards { padding-block: 40px; } }
.proof-cards .card { display: flex; flex-direction: column; gap: 10px; } .proof-cards .card .more { margin-top: auto; padding-top: 6px; }

/* Testimonial band: speech bubble, italic serif quote, tank-rib watermark */
.testimonial-band { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #f5f0fa 0%, #eee5f6 100%); padding-block: 130px 72px; }
.testimonial-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: repeating-linear-gradient(180deg, transparent 0 30px, rgba(106,44,145,.07) 30px 33px, rgba(255,255,255,.75) 33px 35px, transparent 35px 44px, rgba(106,44,145,.035) 44px 58px, transparent 58px 64px);
  -webkit-mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000 25%, transparent 80%); mask-image: radial-gradient(ellipse 75% 85% at 50% 50%, #000 25%, transparent 80%); }
.speech-wrap { max-width: 780px; margin: 0 auto; display: grid; gap: 30px; }
.speech { position: relative; background: #fff; border-radius: 32px; padding: 56px 72px 60px; box-shadow: 0 22px 48px rgba(60, 20, 90, .14); }
.speech::after { content: ""; position: absolute; left: 88px; bottom: -28px; width: 0; height: 0; border-top: 30px solid #fff; border-right: 38px solid transparent; }
.speech .qmark { position: absolute; z-index: 1; pointer-events: none; font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 600; font-size: 400px; line-height: 1; background: linear-gradient(135deg, #6a2c91 0%, #e0458e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.speech .qmark { padding: 0 .3em 0 .1em; }
.speech .qopen { left: -110px; top: -118px; }
.speech .qclose { right: -170px; bottom: -330px; }
.speech blockquote { margin: 0; position: relative; z-index: 2; }
.speech blockquote p { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(1.55rem, 2.6vw, 2.25rem); line-height: 1.3; color: #16112a; letter-spacing: -0.005em; }
.speech blockquote p::before, .speech blockquote p::after { content: none; }
.speech blockquote em { font-style: italic; font-weight: 600; background: linear-gradient(135deg, #6a2c91 0%, #e0458e 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.speech-by { display: flex; align-items: center; gap: 14px; margin: 0 0 0 60px; font-size: 1rem; color: #3d3654; }
.speech-by .avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; background: linear-gradient(135deg, #6a2c91 0%, #e0458e 100%); color: #fff; font: 700 .82rem var(--f-display); letter-spacing: .04em; }
.speech-by b { display: block; font-family: var(--f-display); color: #16112a; font-size: 1.05rem; }
.speech-by small { display: block; color: #6a6480; font-size: .9rem; }
@media (max-width: 620px) {
  .testimonial-band { padding-block: 96px 56px; }
  .speech { padding: 52px 26px 44px; border-radius: 24px; }
  .speech .qmark { font-size: 240px; }
  .speech .qopen { left: -40px; top: -78px; }
  .speech .qclose { right: -50px; bottom: -150px; }
  .speech { padding-bottom: 64px; }
  .speech::after { left: 44px; }
  .speech-by { margin-left: 28px; }
}

/* Testimonial band v3: tank-tan background, moulded-rib watermark, 2-line quote */
.testimonial-band { background: linear-gradient(180deg, #c6b595 0%, #b3a283 100%); padding-block: 104px 52px; }
.testimonial-band::before {
  background:
    repeating-linear-gradient(180deg,
      transparent 0 40px,
      rgba(255,248,232,.45) 40px 41px, rgba(70,52,28,.20) 41px 44px, transparent 44px 62px,
      rgba(255,248,232,.45) 62px 63px, rgba(70,52,28,.20) 63px 66px, transparent 66px 112px);
  -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 80% 90% at 50% 50%, #000 30%, transparent 85%); }
.speech-wrap { max-width: 900px; gap: 26px; }
.speech { padding: 44px 64px 46px; box-shadow: 0 22px 48px rgba(60, 40, 15, .22); }
.speech blockquote p { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.speech .qmark { font-size: 340px; }
.speech .qopen { left: -96px; top: -102px; }
.speech .qclose { right: -146px; bottom: -282px; }
.speech-by { color: #2e2418; }
.speech-by small { color: #4b3f2d; }
@media (max-width: 620px) {
  .testimonial-band { padding-block: 84px 44px; }
  .speech { padding: 48px 24px 52px; }
  .speech .qmark { font-size: 220px; }
  .speech .qopen { left: -36px; top: -70px; }
  .speech .qclose { right: -44px; bottom: -138px; }
}

/* Testimonial band v4: translucent bubble, upright quote marks, short attribution */
.speech { background: rgba(255,255,255,.84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.speech::after { border-top-color: rgba(255,255,255,.84); }
.speech .qmark { font-style: normal; }
.speech-by { margin-left: 60px; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; color: #2e2418; letter-spacing: .01em; }
@media (max-width: 620px) { .speech-by { margin-left: 28px; } }

/* Testimonial band v5: lighter tan, 70% bubble, caption aligned to the tail tip */
.testimonial-band { background: linear-gradient(180deg, #d3c5a8 0%, #c2b293 100%); }
.speech { background: rgba(255,255,255,.70); }
.speech::after { border-top-color: rgba(255,255,255,.70); }
.speech-wrap { gap: 48px; }
.speech-by { margin-left: 88px; }
@media (max-width: 620px) { .speech-wrap { gap: 44px; } .speech-by { margin-left: 44px; } }

/* Mobile: hero dots + play aligned left with the text */
@media (max-width: 620px) {
  .hero-controls { justify-content: flex-start; }
  .hero-controls .dots { margin-left: -8px; }
  .hero-controls .pause { margin-right: 0; }
}

/* Zone chart: EU limit threshold with shaded unsafe / within-limit areas */
.zone-chart { width: 100%; height: auto; display: block; overflow: visible; font-family: var(--f-body); }
.zone-chart .zc-grid { stroke: rgba(22, 17, 42, .08); stroke-width: 1; }
.zone-chart .zc-tick { font-size: 12px; fill: #6a6480; }
.zone-chart .zc-axis { stroke: #3d3654; stroke-width: 1.5; }
.zone-chart .zc-axis-ttl { font-size: 12px; fill: #6a6480; }
.zone-chart .zc-zone { font: 600 13px var(--f-display); letter-spacing: .01em; }
.zone-chart .zc-zone-bad { fill: #a61b1b; }
.zone-chart .zc-zone-good { fill: #1d6b40; }
.zone-chart .zc-limit { stroke: #a61b1b; stroke-width: 2.5; stroke-dasharray: 8 5; }
.zone-chart .zc-limit-lbl { font: 700 13px var(--f-display); fill: #a61b1b; }
.zone-chart .zc-gap { stroke: #6a2c91; stroke-width: 1.5; stroke-dasharray: 2 4; opacity: .55; }
.zone-chart .zc-pt circle { stroke: #fff; stroke-width: 3; }
.zone-chart .zc-val { font: 700 18px var(--f-display); fill: #16112a; }
.zone-chart .zc-note { font: 600 12.5px var(--f-display); fill: #3d3654; }
.zone-chart .zc-cat { font: 600 13px var(--f-display); fill: #16112a; }
.zone-chart .zc-sub { font-size: 11.5px; fill: #6a6480; }

/* Hero slide 2: the zone chart replaces the photo */
.hero .hero-chart { position: absolute; z-index: 1; right: max(24px, calc((100vw - var(--wrap)) / 2 + 8px)); top: 50%; transform: translateY(-50%); width: min(520px, 40vw); background: rgba(255, 255, 255, .72); border-radius: 20px; padding: 22px 26px 14px 14px; box-shadow: 0 18px 44px rgba(60, 40, 15, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* Hero slide 2: title keeps its 2 lines; chart sits beside the sub, lead and buttons */
.hero .hero-chart { top: auto; bottom: 84px; transform: none; width: min(540px, 40vw); padding: 18px 22px 10px 8px; }
.hero-chart .zc-tick, .hero-chart .zc-axis-ttl { font-size: 14px; }
.hero-chart .zc-zone, .hero-chart .zc-limit-lbl, .hero-chart .zc-cat { font-size: 15px; }
.hero-chart .zc-note { font-size: 14px; }
.hero-chart .zc-val { font-size: 21px; }
.hero-chart .zc-sub { font-size: 13px; }

/* Zone chart v2: gradient zones, compliance stamp, gradient points, transparent in the hero */
.zone-chart .zc-grid { stroke: rgba(22, 17, 42, .07); }
.zone-chart .zc-tick { fill: #7a7390; }
.zone-chart .zc-tick-limit { fill: #c4262e; font-weight: 700; }
.zone-chart .zc-stamp { font: 700 21px var(--f-display); letter-spacing: .26em; fill: #c4262e; opacity: .32; }
.zone-chart .zc-limit { stroke: #d6343b; stroke-width: 2.5; stroke-dasharray: 10 6; stroke-linecap: round; }
.zone-chart .zc-limit-lbl { font: 700 13.5px var(--f-display); fill: #c4262e; }
.zone-chart .zc-zone { font: 600 13px var(--f-display); }
.zone-chart .zc-zone-bad { fill: #c4262e; }
.zone-chart .zc-zone-good { fill: #17784d; }
.zone-chart .zc-gap { stroke: #8a4bb3; stroke-width: 1.5; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .8; }
.zone-chart .zc-pt circle { stroke: #fff; stroke-width: 3; }
.zone-chart .zc-pt .zc-halo { stroke: none; opacity: .18; }
.zone-chart .zc-axis { stroke: rgba(22, 17, 42, .55); stroke-width: 1.5; }
.zone-chart .zc-val { font: 700 19px var(--f-display); fill: #16112a; }
.zone-chart .zc-note { font: 600 12.5px var(--f-display); fill: #6a2c91; }
.hero .hero-chart { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.hero-chart .zc-stamp { font-size: 23px; }
.hero-chart .zc-limit-lbl { font-size: 15px; }

/* Zone chart v3: square, no zone fills; site palette (navy / violet / crimson) */
.zone-chart .zc-hatch { stroke: #d42a3c; stroke-width: 1.2; opacity: .22; }
.zone-chart .zc-grid { stroke: rgba(12, 36, 66, .09); }
.zone-chart .zc-tick, .zone-chart .zc-axis-ttl, .zone-chart .zc-sub { fill: #5a5470; }
.zone-chart .zc-tick-limit, .zone-chart .zc-limit-lbl, .zone-chart .zc-zone-bad { fill: #d42a3c; }
.zone-chart .zc-limit { stroke: #d42a3c; }
.zone-chart .zc-stamp { fill: #d42a3c; opacity: .55; font-size: 19px; letter-spacing: .24em; }
.zone-chart .zc-zone-good { fill: #6a2c91; }
.zone-chart .zc-gap { stroke: #6a2c91; opacity: .6; }
.zone-chart .zc-axis { stroke: #0c2442; opacity: .6; }
.zone-chart .zc-note { fill: #6a2c91; }
.zone-chart .zc-val, .zone-chart .zc-cat { fill: #0c2442; }
.hero .hero-chart { width: min(450px, 34vw); bottom: 70px; }
.hero-chart .zc-stamp { font-size: 20px; }
.hero-chart .zc-zone, .hero-chart .zc-limit-lbl, .hero-chart .zc-cat { font-size: 14px; }
.chart .zone-chart { max-width: 460px; margin: 0 auto; }
@media (max-width: 620px) { .chart svg.zone-chart { min-width: 0; } }

/* Zone chart v4: EU blue for the limit, pink for Fenix, not-safe -> safest arrow */
.zone-chart .zc-hatch { stroke: #003399; opacity: .2; }
.zone-chart .zc-tick-limit, .zone-chart .zc-limit-lbl, .zone-chart .zc-zone-bad { fill: #003399; }
.zone-chart .zc-limit { stroke: #003399; }
.zone-chart .zc-stamp { fill: #003399; opacity: .5; }
.zone-chart .zc-zone-good, .zone-chart .zc-note { fill: #c8327c; }
.zone-chart .zc-gap { stroke: #e0458e; opacity: .7; }
.zone-chart .zc-axis-ttl { font: 600 12px var(--f-display); fill: #5a5470; }
.zone-chart .zc-arrow { stroke-width: 3; stroke-linecap: round; }
.zone-chart .zc-arrow-lbl { font: 700 11px var(--f-display); letter-spacing: .16em; }
.zone-chart .zc-arrow-top { fill: #003399; }
.zone-chart .zc-arrow-bot { fill: #c8327c; }
.hero-chart .zc-arrow-lbl { font-size: 12px; }
.hero .hero-chart { width: min(470px, 35vw); }
/* Zone chart v5: burgundy limit line, grey stamp */
.zone-chart .zc-stamp { fill: #8a8597; opacity: .75; font-size: 17px; letter-spacing: .2em; }
.hero-chart .zc-stamp { font-size: 18px; }

/* Zone chart in page sections: open layout, no card frame */
.chart:has(.zone-chart) { background: transparent; border: 0; padding: 0; }

/* Home safety section: hero slide-2 beige with a soft sun glow */
.safety-band { background:
  radial-gradient(ellipse 55% 70% at 78% 38%, rgba(255, 244, 214, .95) 0%, rgba(255, 240, 210, .45) 35%, rgba(255, 240, 210, 0) 70%),
  linear-gradient(180deg, #d4d9e1 0%, #dfe0de 38%, #ebe7db 58%, #ddd7c8 100%); }
.safety-band h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); }
.lead-xl { font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); line-height: 1.45; color: var(--fg); }

/* Safety band v2: light beige in the testimonial's tan family, darker text for reading */
.safety-band { background:
  radial-gradient(ellipse 55% 70% at 78% 38%, rgba(255, 250, 236, .9) 0%, rgba(255, 248, 230, .4) 38%, rgba(255, 248, 230, 0) 70%),
  linear-gradient(180deg, #ece4d3 0%, #e4d9c3 100%); }
.safety-band .eyebrow { color: #5b2380; }
.safety-band h2 { color: #1f1810; }
.safety-band .lead { color: #3a3024; }
.safety-band a { color: #5b2380; }
.safety-band .chart .ttl { color: #1f1810; }
.safety-band .zone-chart .zc-tick, .safety-band .zone-chart .zc-axis-ttl { fill: #4b4033; }
.safety-band .zone-chart .zc-grid { stroke: rgba(60, 45, 25, .12); }

/* Colour swatches: soft drop shadow so the blocks lift off the band */
.sw i { border-color: rgba(0, 0, 0, .05); box-shadow: 0 1px 2px rgba(22, 17, 42, .10), 0 8px 18px rgba(22, 17, 42, .14); transition: transform .2s ease, box-shadow .2s ease; }
.sw:hover i { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(22, 17, 42, .12), 0 14px 26px rgba(22, 17, 42, .18); }
.sw { align-content: start; }
.sw i { width: 100%; min-height: 0; flex-shrink: 0; }
@media (min-width: 1100px) { .swatches { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 14px; } }

/* Safety band v3: near-white warm background; chart title centred; FENIX category labels */
.safety-band { background:
  radial-gradient(ellipse 55% 70% at 78% 38%, rgba(255, 246, 222, .7) 0%, rgba(255, 246, 222, 0) 70%),
  linear-gradient(180deg, #fbf9f4 0%, #f6f1e7 100%); }
.chart:has(.zone-chart) .ttl { text-align: center; padding-left: 8%; font-size: 1.1rem; }
.zone-chart .zc-cat { font: 700 16px var(--f-display); letter-spacing: .14em; fill: #0c2442; }
.zone-chart .zc-cat-sub { font: 600 13px var(--f-display); fill: #5a5470; }

/* Logo tagline in light grey */
.brand .tagline { color: #9a95a8; }
/* Chart: FENIX tag beside each point; plain category labels below */
.zone-chart .zc-brand { font: 700 15px var(--f-display); letter-spacing: .14em; fill: #0c2442; }
.zone-chart .zc-cat { font: 600 14px var(--f-display); letter-spacing: 0; fill: #0c2442; }
/* Chart title lighter and closer to the plot; larger side-arrow labels */
.chart:has(.zone-chart) .ttl { font-weight: 400; font-size: .95rem; color: #3d3654; margin-bottom: -26px; position: relative; z-index: 1; }
.zone-chart .zc-arrow-lbl { font-size: 14px; letter-spacing: .14em; }
/* Speech bubble: 70% transparent (30% white), no blur, so the tank ribs show through the whole bubble */
.speech { background: rgba(255,255,255,.30); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 0 0 1px rgba(255,255,255,.35), 0 14px 30px rgba(60, 40, 15, .10); }
.speech::after { border-top-color: rgba(255,255,255,.30); }
/* Speech bubble: middle ground — half-white with a light frosted blur */
.speech { background: rgba(255,255,255,.50); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.speech::after { border-top-color: rgba(255,255,255,.50); }

/* Safety + field test: one text system (standard eyebrow; same H2 and lead) */
.safety-band .eyebrow { color: var(--violet-ink); }
.safety-band h2, .field-band h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); color: #1b1626; }
.safety-band .lead, .field-band .lead { font-size: 1.2rem; line-height: 1.55; color: #3a3446; }

/* Readability per background: light-background bands keep light-theme tokens even in dark mode;
   sections on the page background use the theme tokens */
.safety-band, .testimonial-band { --fg: #16112a; --muted: #4b4560; --violet: #6a2c91; --violet-ink: #5b2380; --line: #dcd6e6; color: var(--fg); }
.safety-band h2 { color: #1b1626; }
.safety-band .lead { color: #3a3446; }
.field-band h2 { color: var(--fg); }
.field-band .lead { color: var(--muted); }
/* Dark mode: the zone chart's ink is light-theme, so give it a light panel outside the light bands */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chart:has(.zone-chart) { background: #fbf9f4; border-radius: 14px; padding: 18px; --fg: #16112a; } }
:root[data-theme="dark"] .chart:has(.zone-chart) { background: #fbf9f4; border-radius: 14px; padding: 18px; --fg: #16112a; }
:root[data-theme="dark"] .safety-band .chart:has(.zone-chart), .safety-band .chart:has(.zone-chart) { background: transparent; padding: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .safety-band .chart:has(.zone-chart) { background: transparent; padding: 0; } }

/* Testimonials: main OPC bubble + two smaller bubbles beside it */
.speech-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 36px 44px; align-items: center; }
.speech-grid .speech-wrap { max-width: none; margin: 0; }
.speech-main .speech { padding: 44px 48px 46px; }
.speech-main .speech blockquote p { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }
.speech-side { display: grid; gap: 30px; }
.speech-small { gap: 34px; }
.speech-small .speech { padding: 22px 28px 24px; border-radius: 22px; }
.speech-small .speech::after { left: 40px; bottom: -20px; border-top-width: 22px; border-right-width: 26px; }
.speech-small .speech blockquote p { font-size: clamp(1.1rem, 1.4vw, 1.3rem); }
.speech-small .speech-by { margin-left: 40px; font-size: .95rem; }
.speech-main .speech .qopen { left: -96px; top: -102px; }
.speech-small .speech .qmark { font-size: 260px; }
.speech-small .speech .qclose { right: -96px; bottom: -214px; }
@media (max-width: 900px) {
  .speech-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .speech-small .speech .qmark { font-size: 200px; }
  .speech-small .speech .qclose { right: -40px; bottom: -150px; }
}
@media (max-width: 620px) {
  .speech-main .speech { padding: 48px 24px 32px; }
  .speech-main .speech .qopen { left: -36px; top: -70px; }
}
@media (max-width: 620px) { .speech-small .speech .qmark { font-size: 170px; } .speech-small .speech .qclose { right: -34px; bottom: -150px; } .speech-main .speech-by { margin-left: 44px; } .speech-main { gap: 34px; } }

/* Home trial form (replaces the separate trial page) */
.trial-home { border-top: 4px solid transparent; border-image: var(--rule) 1; }
.trial-points { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; font-size: 1.05rem; }
.trial-points li::marker { color: var(--crimson); }
.trial-home .form { box-shadow: 0 18px 40px rgba(22, 17, 42, .08); }
#trial { scroll-margin-top: 80px; }
/* Consent / checkbox rows: box beside the text, not stretched */
.field input[type="checkbox"] { width: auto; padding: 0; margin: 3px 10px 0 0; flex-shrink: 0; accent-color: var(--violet); }
.field > label:has(input[type="checkbox"]) { display: flex; align-items: flex-start; font-size: .9rem; color: var(--muted); }

/* ---- Home review batch (27 Oct) ---- */
/* 3. Proof cards: deeper shadow for contrast on the gradient */
.proof-cards .card { box-shadow: 0 2px 6px rgba(20, 5, 35, .25), 0 22px 46px rgba(20, 5, 35, .45); }
.proof-cards .card:hover { transform: translateY(-3px); box-shadow: 0 4px 10px rgba(20, 5, 35, .28), 0 28px 56px rgba(20, 5, 35, .5); }

/* 5. Testimonials: one quote size; OPC + Danial left, Johann right */
.speech-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 56px; align-items: center; }
.speech-col { display: grid; gap: 34px; }
.speech-grid .speech-wrap { max-width: none; margin: 0; gap: 30px; }
.speech-grid .speech { padding: 30px 36px 32px; border-radius: 26px; }
.speech-grid .speech::after { left: 46px; bottom: -22px; border-top-width: 24px; border-right-width: 30px; }
.speech-grid .speech blockquote p { font-size: clamp(1.15rem, 1rem + .55vw, 1.4rem); line-height: 1.38; }
.speech-grid .speech-by { margin-left: 46px; font-size: .98rem; }
.speech-grid .speech .qmark { font-size: 300px; }
.speech-grid .speech .qopen { left: -84px; top: -96px; }
.speech-grid .speech .qclose { right: -112px; bottom: -246px; }
@media (max-width: 900px) {
  .speech-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .speech-grid .speech .qmark { font-size: 190px; }
  .speech-grid .speech .qopen { left: -30px; top: -64px; }
  .speech-grid .speech .qclose { right: -34px; bottom: -160px; }
}
@media (max-width: 620px) { .speech-grid .speech { padding: 26px 22px 28px; } .speech-grid .speech-by { margin-left: 40px; } .speech-grid .speech::after { left: 40px; } }

/* 7. Grades and colours: near-white background */
.grades-home { background: #fcfbfd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .grades-home { background: var(--bg); } }
:root[data-theme="dark"] .grades-home { background: var(--bg); }

/* Gradient rule between dark and light sections */
.safety-band { position: relative; }
.safety-band::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--rule); }
.trial-home { border-top: 0; }

/* 8. Made with Fenix: gradient frame around the photo + Gold seal */
.award-photo { position: relative; padding: 7px; border-radius: 20px; background: linear-gradient(135deg, #6a2c91 0%, #e0458e 55%, #d42a3c 100%); box-shadow: 0 26px 54px rgba(106, 44, 145, .28); }
.award-photo .photo { margin: 0; border-radius: 14px; overflow: hidden; }
.award-seal { position: absolute; right: -34px; top: -42px; width: 136px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); transition: transform .2s ease; }
.award-seal:hover { transform: rotate(-6deg) scale(1.04); }
.award-seal img { width: 100%; height: auto; display: block; }
@media (max-width: 620px) { .award-seal { width: 96px; right: -6px; top: -30px; } }

/* Trial: company details from the current site */
.trial-contact { font-style: normal; color: var(--muted); border-left: 3px solid var(--violet); padding-left: 14px; line-height: 1.6; }
.trial-contact b { color: var(--fg); }

/* Footer: colour logo + tagline; menu mirrors the main navigation */
.foot-brand { display: inline-grid; gap: 6px; justify-items: start; text-decoration: none !important; }
.foot .co .foot-brand img { height: 52px; width: auto; filter: none; }
.foot-brand .tagline { font-family: var(--f-display); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #b9b4cc; }
.foot h4 a { color: #fff; }
.foot .foot-h-gap { margin-top: 22px; }
.foot { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); }
.site-footer .legal a { color: #c8cde0; text-decoration: underline; }
.field > label:has(input[type="checkbox"]) { display: block; position: relative; padding-left: 28px; }
.field > label:has(input[type="checkbox"]) input[type="checkbox"] { position: absolute; left: 0; top: 2px; margin: 0; }
@media (max-width: 900px) { .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; } .foot .co { grid-column: 1 / -1; } }

/* Made with Fenix (home) v2: smaller photo, shadow only, bigger seal */
.made-home .split { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; }
.award-photo { padding: 0; background: none; border-radius: 16px; box-shadow: 0 4px 10px rgba(22, 17, 42, .10), 0 28px 60px rgba(22, 17, 42, .22); max-width: 460px; }
.award-photo .photo { border-radius: 16px; }
.award-seal { width: 190px; right: -70px; top: -70px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .38)) drop-shadow(0 0 1px rgba(0, 0, 0, .3)); }
@media (max-width: 900px) { .made-home .split { grid-template-columns: minmax(0, 1fr); } .award-photo { margin-right: 60px; } .award-seal { width: 140px; right: -56px; top: -48px; } }
@media (max-width: 620px) { .award-photo { margin: 30px 44px 0 0; } .award-seal { width: 118px; right: -44px; top: -44px; } }
/* Seal: dark disc behind so its white ring text reads on the light page; bottom-right of the photo */
.award-seal { top: auto; right: -40px; bottom: -52px; width: 172px; border-radius: 50%; padding: 8px; background: radial-gradient(circle at 50% 45%, #1b2f55 0%, #0c2442 70%); box-shadow: 0 0 0 3px #fff, 0 16px 34px rgba(12, 36, 66, .45); filter: none; }
@media (max-width: 900px) { .award-photo { margin: 0 40px 40px 0; } .award-seal { width: 132px; right: -36px; bottom: -40px; } }
@media (max-width: 620px) { .award-photo { margin: 0 30px 40px 0; } .award-seal { width: 112px; right: -26px; bottom: -36px; } }
/* Grades and colours: gradient rule above and below */
.grades-home { position: relative; }
.grades-home::before, .grades-home::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--rule); }
.grades-home::before { top: 0; }
.grades-home::after { bottom: 0; }

/* Footer v3: solid white, colour logo with full-width purple tagline, info row above the legal line */
.site-footer { background: #ffffff; color: #3d3654; }
.site-footer a { color: #16112a; }
.site-footer a:hover { color: #6a2c91; }
.foot h4, .foot h4 a { color: #16112a; }
.foot ul { font-weight: 400; }
.foot ul a { font-weight: 400; color: #3d3654; }
.foot .co { align-content: start; }
.foot-brand { display: inline-grid; gap: 8px; width: 200px; }
.foot .co .foot-brand img { width: 200px; height: auto; filter: none; }
.foot-tagline { width: 200px; height: auto; display: block; }
.foot-tagline text { font: 500 9.4px var(--f-display); fill: #6a2c91; }
.foot-info { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 6px 28px; align-items: baseline; font-size: .95rem; color: #3d3654; }
.foot-info b { color: #16112a; font-family: var(--f-display); font-weight: 600; }
.site-footer .legal { margin-top: 16px; border-top-color: #e4e0ec; color: #6a6480; }
.site-footer .legal a { color: #6a6480; }
@media (max-width: 900px) { .foot-info { flex-direction: column; gap: 4px; } }
/* Footer v4: tighter top; navy base band for company details + legal line */
.site-footer { padding-block: 32px 0; }
.foot-base { background: var(--navy); color: #c8cde0; margin-top: 28px; padding-block: 18px 16px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .foot-base { background: #0c2442; } }
.foot-base .foot-info { margin-top: 0; color: #c8cde0; }
.foot-base .foot-info b { color: #fff; }
.foot-base a { color: #fff; }
.foot-base a:hover { color: #f3d9ff; }
.site-footer .foot-base .legal { margin-top: 12px; padding-top: 12px; border-top-color: rgba(255, 255, 255, .14); color: #a9b0c8; }
.site-footer .foot-base .legal a { color: #c8cde0; }
/* Footer base: same deep navy as the header bar */
.foot-base, :root:not([data-theme="light"]) .foot-base { background: #0d1220; }
/* Footer columns: content-width columns spread evenly across the row */
@media (min-width: 901px) { .foot { grid-template-columns: repeat(5, auto); justify-content: space-between; gap: 32px; } }

/* Multi-select dropdown field */
.field-label { font-family: var(--f-display); font-weight: 600; font-size: .92rem; }
.multi { position: relative; }
.multi > summary { list-style: none; cursor: pointer; font-size: 1rem; padding: 11px 40px 11px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--muted); position: relative; }
.multi > summary::-webkit-details-marker { display: none; }
.multi > summary::after { content: ""; position: absolute; right: 15px; top: 50%; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform .15s ease; }
.multi[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.multi.has-value > summary { color: var(--fg); }
.multi[open] > summary, .multi > summary:focus-visible { border-color: var(--violet); outline: 2px solid rgba(106, 44, 145, .2); outline-offset: 0; }
.multi-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 34px rgba(22, 17, 42, .16); padding: 6px; display: grid; }
.multi-list label { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 6px; font-family: var(--f-body); font-weight: 400; font-size: .97rem; cursor: pointer; }
.multi-list label:hover { background: var(--panel); }
.multi-list input { width: auto; margin-top: 4px; accent-color: var(--violet); }

/* ---- Voices (testimonials) v3: dark editorial band, one featured quote + two supporting ---- */
.voices { position: relative; isolation: isolate; color: #fff; padding-block: 88px 92px;
  background: radial-gradient(ellipse 60% 80% at 12% 10%, rgba(106, 44, 145, .55) 0%, rgba(106, 44, 145, 0) 60%),
              radial-gradient(ellipse 50% 70% at 95% 100%, rgba(224, 69, 142, .30) 0%, rgba(224, 69, 142, 0) 60%), #0d1220; }
.voices::before, .voices::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--rule); }
.voices::before { top: 0; } .voices::after { bottom: 0; }
.voices-head { margin-bottom: 44px; max-width: 760px; }
.voices-head .eyebrow { color: #f3a6cf; }
.voices-head h2 { color: #fff; }
.voices-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: stretch; }
.voices-side { display: grid; gap: 28px; }
.voice { margin: 0; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 30px 32px; border-radius: 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.voice blockquote { margin: 0; }
.voice blockquote p { font-family: "Fraunces", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.45; color: #f1eef8; }
.voice blockquote p::before, .voice blockquote p::after { content: none; }
.voice em { font-style: italic; font-weight: 600; color: #fff; background: linear-gradient(transparent 62%, rgba(224, 69, 142, .45) 62%); padding: 0 2px; }
.voice-kicker { font: 600 .74rem var(--f-display); letter-spacing: .16em; text-transform: uppercase; color: #f3a6cf; }
.voice figcaption { margin-top: auto; padding-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: .95rem; color: #b9b4cc; }
.voice figcaption::before { content: ""; width: 28px; height: 2px; background: linear-gradient(90deg, #6a2c91, #e0458e); align-self: center; }
.voice figcaption b { color: #fff; font-family: var(--f-display); font-weight: 600; }
.voice-feature { padding: 44px 46px 40px; background: linear-gradient(160deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .04) 100%); }
.voice-feature blockquote p { font-size: clamp(1.4rem, 1.05rem + 1.1vw, 2rem); line-height: 1.32; }
.voice-mark { position: absolute; top: -26px; right: 30px; font: 600 180px/1 "Fraunces", Georgia, serif; background: linear-gradient(135deg, #6a2c91, #e0458e); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; pointer-events: none; }
@media (max-width: 900px) { .voices-grid { grid-template-columns: minmax(0, 1fr); } .voice-feature { padding: 36px 28px 30px; } .voice-mark { font-size: 130px; top: -18px; right: 18px; } }
@media (max-width: 620px) { .voices { padding-block: 60px 64px; } .voice { padding: 24px 22px; } }
/* Grades and colours: plain white (also in dark mode), no gradient rules */
.grades-home, :root:not([data-theme="light"]) .grades-home, :root[data-theme="dark"] .grades-home { background: #ffffff; --fg: #16112a; --muted: #5a5470; --violet: #6a2c91; --violet-ink: #5b2380; --line: #dcd6e6; --bg: #ffffff; color: var(--fg); }
.grades-home::before, .grades-home::after { content: none; }
.grades-home h2 { color: #16112a; }
.grades-home .btn-ghost { color: #16112a; border-color: #16112a; }
/* Made with Fenix (home) v3: seal sits beside the text, not on the photo */
.award-text { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.award-text .award-seal { position: static; width: 150px; right: auto; bottom: auto; top: auto; }
.award-photo { margin: 0; }
@media (max-width: 900px) { .award-photo { margin: 0; } }
@media (max-width: 620px) { .award-text { grid-template-columns: minmax(0, 1fr); gap: 18px; } .award-text .award-seal { width: 110px; } }
/* Seal overlaps the photo edge a little */
.award-text .award-seal { position: relative; z-index: 2; transform: translateX(-96px); }
.award-text .award-seal:hover { transform: translateX(-96px) rotate(-6deg) scale(1.04); }
@media (max-width: 860px) { .award-text .award-seal, .award-text .award-seal:hover { transform: none; margin-top: -86px; margin-left: 12px; } }
/* Made with Fenix (home) v4: photo | text | seal */
.award-text { grid-template-columns: minmax(0, 1fr) auto; gap: 32px; }
.award-text .award-seal, .award-text .award-seal:hover { order: 2; transform: none; margin: 0; }
.award-text .award-seal:hover { transform: rotate(-6deg) scale(1.04); }
.made-home .split { gap: 40px; }
@media (max-width: 620px) { .award-text { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; } .award-text .award-seal { width: 92px; } }
.award-lead { text-wrap: balance; }
/* Seal: a bit larger and right next to the text */
.award-text { grid-template-columns: auto auto; justify-content: start; gap: 36px; }
.award-text .award-seal { width: 180px; }
@media (max-width: 620px) { .award-text { grid-template-columns: minmax(0, 1fr) auto; gap: 14px; } .award-text .award-seal { width: 100px; } }
.award-text > .grid { max-width: 390px; }
@media (max-width: 620px) { .award-text > .grid { max-width: none; } }

/* Legal pages: compact subheadings, steadier rhythm */
.prose-legal { max-width: 72ch; }
.prose-legal > * + * { margin-top: .6em; }
.prose-legal h2 { font-size: 1.2rem; line-height: 1.3; letter-spacing: 0; margin-top: 1.8em; color: var(--fg); }
.prose-legal h2 + p { margin-top: .35em; }
.prose-legal p { color: var(--muted); }

/* Trial form: shorter message box (about 2-3 lines) */
#t-what { min-height: 0; height: 84px; }

/* Spam trap field, invisible to people */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Phone: country dial-code picker */
@font-face { font-family: "Twemoji Country Flags"; src: url("fonts/TwemojiCountryFlags.woff2") format("woff2"); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F; font-display: swap; }
.tel-group { display: flex; gap: 8px; position: relative; }
.tel-group input[type="tel"] { flex: 1; min-width: 0; }
.dial { position: relative; flex-shrink: 0; }
.dial-btn { height: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 0 30px 0 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; font-size: 1rem; cursor: pointer; position: relative; }
.dial-btn::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .6; }
.dial-btn[aria-expanded="true"], .dial-btn:focus-visible { border-color: var(--violet); outline: 2px solid rgba(106, 44, 145, .2); outline-offset: 0; }
.flag { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1.15rem; line-height: 1; }
.dial-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(320px, 86vw); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 34px rgba(22, 17, 42, .18); padding: 8px; }
.dial-search { width: 100%; box-sizing: border-box; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; font: inherit; font-size: .95rem; background: var(--bg); color: var(--fg); }
.dial-search:focus { outline: 2px solid rgba(106, 44, 145, .25); border-color: var(--violet); }
.dial-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.dial-list li[role="option"] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .95rem; }
.dial-list li[role="option"]:hover, .dial-list li.is-active { background: var(--panel); }
.dial-list li[aria-selected="true"] .name { font-weight: 600; }
.dial-list .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dial-list .dc { color: var(--muted); font-variant-numeric: tabular-nums; }
.dial-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.dial-none { padding: 10px; color: var(--muted); font-size: .9rem; }

/* Voices heading: one line on desktop */
.voices-head { max-width: none; }
@media (min-width: 1000px) { .voices-head h2 { white-space: nowrap; } }

/* Voices v4: one quote size for all three; Newsreader italic */
.voice blockquote p, .voice-feature blockquote p { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.42; font-variation-settings: "opsz" 36; }
.voice em { font-weight: 600; }
.voice-mark { font-family: "Newsreader", Georgia, serif; font-style: normal; }
.voice-feature { justify-content: center; }
.voice-feature figcaption { margin-top: 10px; }

/* Voices v5: clean sans italic for the quotes */
.voice blockquote p, .voice-feature blockquote p { font-family: var(--f-body); font-style: italic; font-weight: 300; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); line-height: 1.45; letter-spacing: .005em; font-variation-settings: normal; }
.voice em { font-weight: 600; font-style: italic; }
.voice-mark { font-family: Georgia, "Times New Roman", serif; font-weight: 700; }
/* Big numbers: scaled up ~25% to fill the width */
.proof-strip ul { gap: 28px; }
.proof-strip strong { font-size: clamp(2.4rem, 4.8vw, 3.8rem); }
.proof-strip span { font-size: 1.2rem; line-height: 1.35; }
@media (max-width: 620px) { .proof-strip strong { font-size: 2.05rem; } .proof-strip span { font-size: .98rem; } .proof-strip ul { gap: 24px 16px; } }
@media (min-width: 761px) { .proof-strip ul { grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 32px; } }
.proof-strip li { align-content: start; }
.proof-strip strong { font-size: clamp(2.3rem, 4.2vw, 3.6rem); white-space: nowrap; }
.proof-strip span { max-width: 17em; }

/* ---- Big numbers v3: deep night band with glows, dividers, refined units, count-up ---- */
.proof-strip { background:
  radial-gradient(ellipse 40% 140% at 8% 50%, rgba(106, 44, 145, .45) 0%, rgba(106, 44, 145, 0) 70%),
  radial-gradient(ellipse 40% 140% at 92% 50%, rgba(224, 69, 142, .30) 0%, rgba(224, 69, 142, 0) 70%),
  #0d1220; }
.proof-strip ul { padding: 52px 0; }
.proof-strip li { position: relative; gap: 8px; }
@media (min-width: 761px) {
  .proof-strip li + li { padding-left: 32px; }
  .proof-strip li + li::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22) 30%, rgba(224, 69, 142, .45) 70%, rgba(255, 255, 255, 0)); }
  .proof-strip ul { column-gap: 0; }
}
.proof-strip strong { display: inline-flex; align-items: baseline; gap: .12em; background: none !important; -webkit-text-fill-color: initial; color: inherit; padding: 0; }
.proof-strip .num { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #c9a0f2 0%, #f2a7dc 55%, #ff7fb2 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(224, 69, 142, .28)); }
.proof-strip li:nth-child(1) .num { background-image: linear-gradient(100deg, #b48af0 0%, #d7b0f6 100%); filter: drop-shadow(0 0 22px rgba(168, 120, 240, .30)); }
.proof-strip li:nth-child(2) .num { background-image: linear-gradient(100deg, #cfa4f4 0%, #ecb0e6 100%); filter: drop-shadow(0 0 22px rgba(200, 140, 230, .28)); }
.proof-strip li:nth-child(3) .num { background-image: linear-gradient(100deg, #f0a2dc 0%, #ff8cc0 100%); }
.proof-strip li:nth-child(4) .num { background-image: linear-gradient(100deg, #ff8cc0 0%, #ff6f9f 100%); }
.proof-strip .unit { font-family: var(--f-display); font-weight: 500; font-size: .46em; letter-spacing: .02em; color: #e8dcff; -webkit-text-fill-color: #e8dcff; }
.proof-strip .unit.plus { font-size: .7em; font-weight: 600; color: #ff8cc0; -webkit-text-fill-color: #ff8cc0; margin-left: -.04em; }
.proof-strip .lbl { font-size: 1.12rem; color: #c9cde0; max-width: 16em; line-height: 1.4; }
@media (max-width: 620px) { .proof-strip .lbl { font-size: .95rem; } }
.proof-strip strong span { font-size: inherit; max-width: none; line-height: 1.05; }
.proof-strip strong .unit { font-size: .46em; }
.proof-strip strong .unit.plus { font-size: .7em; }
.proof-strip strong .unit.plus { margin-left: -.1em; }
/* Big numbers v3.1: "years" full size in the same gradient; no purple glow */
.proof-strip { background: radial-gradient(ellipse 40% 140% at 92% 50%, rgba(224, 69, 142, .30) 0%, rgba(224, 69, 142, 0) 70%), #0d1220; }
.proof-strip strong { gap: .22em; }
.proof-strip strong .unit:not(.plus) { font-size: 1em; font-weight: 700; letter-spacing: -0.02em; -webkit-text-fill-color: transparent; color: transparent; -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 22px rgba(224, 69, 142, .28)); }
.proof-strip li:nth-child(1) .unit { background-image: linear-gradient(100deg, #d7b0f6 0%, #e6c2f8 100%); filter: drop-shadow(0 0 22px rgba(168, 120, 240, .30)); }
.proof-strip li:nth-child(2) .unit:not(.plus) { background-image: linear-gradient(100deg, #ecb0e6 0%, #f5bde4 100%); filter: drop-shadow(0 0 22px rgba(200, 140, 230, .28)); }
.proof-strip strong .unit.plus { margin-left: -.18em; }
@media (min-width: 761px) { .proof-strip li:not(:last-child) { padding-right: 32px; } }
/* Big numbers v3.2: one lilac gradient for every figure, unit and plus sign */
.proof-strip li .num, .proof-strip li strong .unit, .proof-strip li strong .unit.plus {
  background-image: linear-gradient(100deg, #b48af0 0%, #e2bdf7 100%) !important;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(168, 120, 240, .30)) !important; }
@media (min-width: 1280px) { .proof-strip li:not(:last-child) { padding-right: 22px; } .proof-strip li + li { padding-left: 22px; } .proof-strip .lbl { max-width: none; white-space: nowrap; font-size: 1.08rem; } }
/* Big numbers v3.3: white figures with a thin lilac outline and a soft glow */
.proof-strip li .num, .proof-strip li strong .unit, .proof-strip li strong .unit.plus {
  background: none !important; color: #ffffff; -webkit-text-fill-color: #ffffff;
  -webkit-text-stroke: 1.5px #c49af2; paint-order: stroke fill;
  filter: none !important; text-shadow: 0 0 22px rgba(168, 120, 240, .35); }
.proof-strip li strong .unit:not(.plus) { color: #fff; -webkit-text-fill-color: #fff; background: none !important; }
.proof-strip li .num, .proof-strip li strong .unit { -webkit-text-stroke: 2px #c49af2; }
/* Big numbers v3.4: visible lilac outline; larger plus signs */
.proof-strip li .num, .proof-strip li strong .unit, .proof-strip li strong .unit.plus { -webkit-text-stroke: 4px #a77ee8; paint-order: stroke fill; text-shadow: 0 0 18px rgba(167, 126, 232, .45); }
.proof-strip li strong .unit.plus { font-size: .9em; margin-left: -.12em; }
.proof-strip li .num, .proof-strip li strong .unit, .proof-strip li strong .unit.plus { -webkit-text-stroke-width: 3px; letter-spacing: 0; }
.proof-strip strong { gap: .26em; }

/* Proof cards: icon badge on top + hover highlight in the link colour */
.proof-cards .card { transition: transform .22s ease, box-shadow .22s ease, outline-color .22s ease; outline: 2px solid transparent; outline-offset: 0; }
.card-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #f2e9f9; color: #6a2c91; margin-bottom: 4px; transition: background .22s ease, color .22s ease, transform .22s ease; }
.card-icon svg { width: 26px; height: 26px; }
.proof-cards .card:hover, .proof-cards .card:focus-visible { transform: translateY(-6px); outline-color: #6a2c91; box-shadow: 0 4px 10px rgba(20, 5, 35, .28), 0 30px 60px rgba(20, 5, 35, .55); }
.proof-cards .card:hover .card-icon, .proof-cards .card:focus-visible .card-icon { background: linear-gradient(135deg, #6a2c91 0%, #b23a8e 100%); color: #fff; transform: scale(1.06); }
.proof-cards .card:hover .more, .proof-cards .card:focus-visible .more { color: #6a2c91; text-decoration: underline; text-underline-offset: 4px; }
.proof-cards .card .more { transition: color .2s ease; }
@media (prefers-reduced-motion: reduce) { .proof-cards .card, .card-icon { transition: none; } .proof-cards .card:hover { transform: none; } }
/* Big numbers v3.5: no glow, 1pt smaller */
.proof-strip li .num, .proof-strip li strong .unit, .proof-strip li strong .unit.plus { text-shadow: none; filter: none !important; }
.proof-strip strong { font-size: clamp(2.25rem, 4.1vw, 3.52rem); }

/* Zone chart v6: the safety margin is the hero — gradient bars from each Fenix point up to the limit */
.zone-chart .zc-mx { font: 800 26px var(--f-display); fill: #c8327c; letter-spacing: -0.01em; }
.zone-chart .zc-mx-sub { font: 600 12px var(--f-display); fill: #5a5470; letter-spacing: .04em; text-transform: uppercase; }
.zone-chart .zc-val { font: 700 15px var(--f-display); fill: #0c2442; }
.zone-chart .zc-pt .zc-halo { opacity: .22; }
.zone-chart .zc-mx-sub { text-transform: none; letter-spacing: 0; font-size: 13px; }

/* Safety band: discreet texture of EU stars and water drops */
.safety-band { background:
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%3Cg%20fill%3D%22%23003399%22%20fill-opacity%3D%22.07%22%3E%3Cpolygon%20points%3D%2224.0%2C23.0%2025.2%2C26.3%2028.8%2C26.5%2026.0%2C28.6%2026.9%2C32.0%2024.0%2C30.1%2021.1%2C32.0%2022.0%2C28.6%2019.2%2C26.5%2022.8%2C26.3%22/%3E%3Cpolygon%20points%3D%22118.0%2C92.0%20119.0%2C94.6%20121.8%2C94.8%20119.6%2C96.5%20120.4%2C99.2%20118.0%2C97.7%20115.6%2C99.2%20116.4%2C96.5%20114.2%2C94.8%20117.0%2C94.6%22/%3E%3Cpolygon%20points%3D%2270.0%2C136.8%2070.8%2C138.9%2073.0%2C139.0%2071.3%2C140.4%2071.9%2C142.6%2070.0%2C141.4%2068.1%2C142.6%2068.7%2C140.4%2067.0%2C139.0%2069.2%2C138.9%22/%3E%3C/g%3E%3Cg%20fill%3D%22%236a2c91%22%20fill-opacity%3D%22.06%22%3E%3Cpath%20d%3D%22M86.0%2024.0%20c0%200%204.2%205.1%204.2%208.1%20a4.2%204.2%200%201%201%20-8.4%200%20c0%20-3.0%204.2%20-5.1%204.2%20-5.1z%22/%3E%3Cpath%20d%3D%22M30.0%2099.0%20c0%200%203.5%204.2%203.5%206.8%20a3.5%203.5%200%201%201%20-7.0%200%20c0%20-2.5%203.5%20-4.2%203.5%20-4.2z%22/%3E%3Cpath%20d%3D%22M140.0%20144.0%20c0%200%202.8%203.4%202.8%205.4%20a2.8%202.8%200%201%201%20-5.6%200%20c0%20-2.0%202.8%20-3.4%202.8%20-3.4z%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 160px 160px repeat,
  radial-gradient(ellipse 55% 70% at 78% 38%, rgba(255, 246, 222, .7) 0%, rgba(255, 246, 222, 0) 70%),
  linear-gradient(180deg, #fbf9f4 0%, #f6f1e7 100%); }

/* Safety band texture v3: water drops only, soft blue */
.safety-band { background:
  url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22210%22%20height%3D%22210%22%20viewBox%3D%220%200%20210%20210%22%3E%3Cg%20fill%3D%22%232f8ae0%22%20fill-opacity%3D%22.045%22%3E%3Cpath%20d%3D%22M22.0%2015.3%20C23.1%2018.8%2029.0%2024.8%2029.0%2030.0%20A7.0%207.0%200%201%201%2015.0%2030.0%20C15.0%2024.8%2020.9%2018.8%2022.0%2015.3z%22/%3E%3Cpath%20d%3D%22M96.0%2011.5%20C96.8%2014.0%20101.0%2018.2%20101.0%2022.0%20A5.0%205.0%200%201%201%2091.0%2022.0%20C91.0%2018.2%2095.2%2014.0%2096.0%2011.5z%22/%3E%3Cpath%20d%3D%22M162.0%2029.2%20C163.2%2033.2%20170.0%2040.0%20170.0%2046.0%20A8.0%208.0%200%201%201%20154.0%2046.0%20C154.0%2040.0%20160.8%2033.2%20162.0%2029.2z%22/%3E%3Cpath%20d%3D%22M58.0%2079.4%20C58.9%2082.4%2064.0%2087.5%2064.0%2092.0%20A6.0%206.0%200%201%201%2052.0%2092.0%20C52.0%2087.5%2057.1%2082.4%2058.0%2079.4z%22/%3E%3Cpath%20d%3D%22M132.0%2089.1%20C133.3%2093.6%20141.0%20101.2%20141.0%20108.0%20A9.0%209.0%200%201%201%20123.0%20108.0%20C123.0%20101.2%20130.7%2093.6%20132.0%2089.1z%22/%3E%3Cpath%20d%3D%22M196.0%20117.5%20C196.8%20120.0%20201.0%20124.2%20201.0%20128.0%20A5.0%205.0%200%201%201%20191.0%20128.0%20C191.0%20124.2%20195.2%20120.0%20196.0%20117.5z%22/%3E%3Cpath%20d%3D%22M20.0%20133.2%20C21.2%20137.2%2028.0%20144.0%2028.0%20150.0%20A8.0%208.0%200%201%201%2012.0%20150.0%20C12.0%20144.0%2018.8%20137.2%2020.0%20133.2z%22/%3E%3Cpath%20d%3D%22M88.0%20156.4%20C88.8%20159.2%2093.5%20163.9%2093.5%20168.0%20A5.5%205.5%200%201%201%2082.5%20168.0%20C82.5%20163.9%2087.2%20159.2%2088.0%20156.4z%22/%3E%3Cpath%20d%3D%22M150.0%20172.3%20C151.0%20175.6%20156.5%20181.1%20156.5%20186.0%20A6.5%206.5%200%201%201%20143.5%20186.0%20C143.5%20181.1%20149.0%20175.6%20150.0%20172.3z%22/%3E%3Cpath%20d%3D%22M186.0%20-1.5%20C186.7%200.8%20190.5%204.6%20190.5%208.0%20A4.5%204.5%200%201%201%20181.5%208.0%20C181.5%204.6%20185.3%200.8%20186.0%20-1.5z%22/%3E%3C/g%3E%3C/svg%3E") 0 0 / 210px 210px repeat,
  radial-gradient(ellipse 55% 70% at 78% 38%, rgba(255, 246, 222, .7) 0%, rgba(255, 246, 222, 0) 70%),
  linear-gradient(180deg, #fbf9f4 0%, #f6f1e7 100%); }
.chart .zone-chart { max-width: 550px; }

/* ---- Home: one rhythm for every section (spacing, eyebrow, H2, lead) ---- */
main > section:not(.hero) { padding-block: 80px; }
@media (max-width: 620px) { main > section:not(.hero) { padding-block: 56px; } }
main > section:not(.hero) .section-head,
.voices-head,
.safety-band .split > .grid, .field-band .split > .grid, .award-text > .grid, .trial-home .split > .grid { display: grid; gap: 16px !important; align-content: start; }
main > section:not(.hero) .section-head, .voices-head { margin-bottom: 44px; }
main > section:not(.hero) .eyebrow { margin: 0; font-size: .78rem; letter-spacing: .16em; }
main > section:not(.hero) h2 { margin: 0; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); line-height: 1.1; }
main > section:not(.hero) .lead, .award-lead { margin: 0; font-size: 1.2rem; line-height: 1.55; }
.award-lead { color: var(--muted); }
.safety-band .lead { color: #4a4458; }
.chart .zone-chart { max-width: 564px; }

/* ---- Makulu Tanks: sub-item under Made with Fenix + page ---- */
.menu a.menu-sub { margin-left: 14px; padding-left: 14px; border-left: 2px solid var(--line); border-radius: 0 6px 6px 0; }
.foot ul li.foot-sub { padding-left: 12px; border-left: 2px solid #e4def0; margin-top: -2px; }
.foot ul li.foot-sub a { font-size: .9em; }
.mk-hero { align-items: center; gap: 48px; }
.mk-hero .photo { margin: 0; }
.mk-facts .panel h3 { margin: 0 0 6px; }
.mk-facts .panel p { margin: 0; }
.mk-cta { text-align: center; display: grid; gap: 16px; justify-items: center; }
.mk-cta h2, .mk-cta p { margin: 0; }

/* Makulu brand button (Makulu accent green from makulutanks.co.za) */
:root { --makulu: #11845A; --makulu-dark: #0B3B33; }
.btn-makulu { background: var(--makulu); color: #fff !important; border: 1px solid var(--makulu); }
.btn-makulu:hover { background: var(--makulu-dark); border-color: var(--makulu-dark); }
.btn-makulu:focus-visible { outline: 3px solid color-mix(in srgb, var(--makulu) 40%, transparent); outline-offset: 2px; }

/* Field band: discreet Makulu mark texture (like the drops in the safety band) */
.field-band { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22%2311845A%22%20fill-opacity%3D%22.055%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20transform%3D%22translate%2818%2020%29%20scale%280.1166%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28120%2010%29%20scale%280.0807%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28196%2052%29%20scale%280.0987%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2864%2098%29%20scale%280.0897%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28150%20120%29%20scale%280.1256%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2810%20170%29%20scale%280.0717%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28100%20188%29%20scale%280.0987%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28206%20192%29%20scale%280.0717%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 240px 240px; background-repeat: repeat; }

/* Field band v2: Makulu brand pattern (elephant rows, alternate rows flipped, occasional M), brand gradient, very faint */
.field-band { background-image: none; position: relative; isolation: isolate; }
.field-band::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, #12B497 0%, #8CC63F 55%, #D4E37F 100%);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22612%22%20height%3D%22372%22%20viewBox%3D%220%200%20612%20372%22%3E%3Cg%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20transform%3D%22translate%280.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2868.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28136.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28204.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28272.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%28340.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28408.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28476.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28544.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2878.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28146.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28214.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28282.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28350.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28418.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28486.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28510.0%2072.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%28622.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2810.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%280.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2868.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%28136.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28204.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28272.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28340.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28408.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28476.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28544.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2878.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28146.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28214.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28282.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28350.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28374.0%20196.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%28486.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28554.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28622.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2810.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%280.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2868.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28136.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28204.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28272.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28340.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28408.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28476.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28544.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%2878.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28146.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28170.0%20320.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%28282.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28350.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28418.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28486.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28554.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28622.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2810.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 612px 372px repeat; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22612%22%20height%3D%22372%22%20viewBox%3D%220%200%20612%20372%22%3E%3Cg%20fill%3D%22%23000%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20transform%3D%22translate%280.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2868.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28136.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28204.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28272.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%28340.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28408.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28476.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28544.0%2010.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2878.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28146.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28214.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28282.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28350.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28418.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28486.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28510.0%2072.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%28622.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2810.0%20114.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%280.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2868.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%28136.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28204.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28272.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28340.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28408.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28476.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28544.0%20134.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2878.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28146.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28214.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28282.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28350.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28374.0%20196.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%28486.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28554.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28622.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2810.0%20238.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%280.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2868.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28136.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28204.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28272.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28340.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28408.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28476.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28544.0%20258.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%2878.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28146.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28170.0%20320.0%29%20scale%280.1973%29%22%20d%3D%22M0%200H62L111.5%2092L161%200H223V213H170V88L136%20150V213H87V150L53%2088V213H0Z%22%2F%3E%3Cpath%20transform%3D%22translate%28282.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28350.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28418.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28486.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28554.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%28622.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3Cpath%20transform%3D%22translate%2810.0%20362.0%29%20rotate%28180%29%20scale%280.1973%29%22%20d%3D%22M0%200H223V213H0Z%20M187%2045L202%2062L187%2078L172%2062Z%20M158%20116H181L196%20213H144Z%20M60%20154H88L108%20213H46Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 0 0 / 612px 372px repeat;
  opacity: .045; }

/* Voices: featured quote on the right, two short quotes on the left (desktop only) */
@media (min-width: 901px) {
  .voices-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .voices-grid .voice-feature { order: 2; }
  .voices-grid .voices-side { order: 1; }
}

/* Products hero photo: powder colours, cropped to a wide frame */
.hero-powder { margin: 0; aspect-ratio: 5 / 4; }
.hero-powder img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

/* Home grades: background matches the powder photo's paper (#f1f1eb), so the photo blends in */
.grades-home, :root:not([data-theme="light"]) .grades-home, :root[data-theme="dark"] .grades-home { background: #f1f1eb; --bg: #f1f1eb; }
.grades-home .hero-powder { box-shadow: none; }
/* Home grades photo: feathered edges so it melts into the background */
.grades-home .hero-powder { border-radius: 0; background: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect; }
.grades-home .hero-powder img { border-radius: 0; }
/* Softer, shorter feather (v2) */
.grades-home .hero-powder {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%); }

/* Home: photo left / text right in Grades; text left / photo right in SAPRO */
.colour-strip { display: flex; height: 12px; max-width: 440px; border-radius: 999px; overflow: hidden; margin-top: 10px; }
.colour-strip span { flex: 1; }
@media (min-width: 901px) {
  .grades-home .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .grades-home .split > .grid { order: 2; }
  .grades-home .split > .hero-powder { order: 1; }
  .made-home .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .made-home .award-text { order: 1; justify-content: space-between; }
  .made-home .award-photo { order: 2; }
  .made-home .award-seal { order: 2; }
}

/* Grades (home) v3: square-ended colour strip, photo flush top/bottom, light button with gradient text */
.colour-strip { border-radius: 0; }
main > section.grades-home { padding-block: 0; }
.grades-home .split { align-items: stretch; }
.grades-home .split > .grid { align-self: center; padding-block: 56px; }
.grades-home .hero-powder { align-self: stretch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%); }
.grades-home .btn-gradient { background: #fff; border: 1px solid #e3dbea; box-shadow: 0 1px 2px rgba(22, 17, 42, .06); }
.grades-home .btn-gradient span, .grades-home .btn-gradient { color: #6a2c91; }
@supports (-webkit-background-clip: text) {
  .grades-home .btn-gradient { background: linear-gradient(#fff, #fff) padding-box, linear-gradient(90deg, #6a2c91, #b23a8e) border-box; border: 1.5px solid transparent; }
  .grades-home .btn-gradient .gtext { background: linear-gradient(90deg, #6a2c91, #b23a8e); -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.grades-home .btn-gradient:hover { background: linear-gradient(#faf6fd, #faf6fd) padding-box, linear-gradient(90deg, #7a3aa6, #c4479d) border-box; }
@media (max-width: 900px) { .grades-home .split > .grid { padding-block: 40px 56px; } }
@media (max-width: 900px) { .grades-home .split { gap: 0; } .grades-home .split > .grid { padding-block: 48px 32px; } }
/* SAPRO seal: bigger, centred in the space between text and photo */
@media (min-width: 901px) {
  .made-home .award-text { grid-template-columns: auto minmax(0, 1fr); justify-content: stretch; gap: 0; }
  .made-home .award-text .award-seal { width: 220px; justify-self: center; margin-left: 40px; }
  .made-home .award-text .award-seal:hover { transform: rotate(-6deg) scale(1.04); }
}

/* Proof cards: same navy as the big-numbers strip, so the two read as one band (gradient rule between them stays) */
.proof-cards { background: #0d1220; }
.proof-cards .card:hover, .proof-cards .card:focus-visible { outline-color: #b48af0; box-shadow: 0 4px 10px rgba(0, 0, 0, .35), 0 30px 60px rgba(0, 0, 0, .55); }

/* Big numbers + proof cards share one navy background with the pink glow; divider line between them stays */
.proof-band { background:
  radial-gradient(ellipse 42% 55% at 92% 14%, rgba(224, 69, 142, .30) 0%, rgba(224, 69, 142, 0) 70%),
  radial-gradient(ellipse 45% 45% at 6% 96%, rgba(106, 44, 145, .30) 0%, rgba(106, 44, 145, 0) 70%),
  #0d1220; }
.proof-band .proof-strip, .proof-band .proof-cards { background: transparent; }
.proof-band .proof-cards { padding-block: 80px; }
@media (max-width: 620px) { .proof-band .proof-cards { padding-block: 56px; } }
.trial-home .trial-docs-note { margin-top: 20px !important; }

/* Swatches v4: match the current fenixrising.co.za pattern (72px squares, 10px radius, thin border, labels below; tinted grades over a checkerboard) */
.swatches, .swatches[class] { display: flex; flex-wrap: wrap; gap: 18px 16px; grid-template-columns: none; }
.sw { display: flex; flex-direction: column; gap: 2px; width: 104px; }
.sw i { width: 72px; height: 72px; aspect-ratio: auto; border-radius: 10px; background: var(--c); border: 1px solid rgba(0, 0, 0, .12); box-shadow: none; margin-bottom: 8px; }
.sw i.tinted { background: linear-gradient(var(--c), var(--c)), repeating-conic-gradient(#E4E0E8 0% 25%, #FFFFFF 0% 50%) 50% / 16px 16px; }
.sw b { font-size: .92rem; line-height: 1.25; }
.sw span { font-size: .78rem; white-space: nowrap; }
@media (max-width: 760px) { .sw { width: 96px; } .sw i { width: 64px; height: 64px; } }

/* Products: grade cards white (better contrast for the colours), readable type, same in dark mode */
.panel.swatch-group, :root:not([data-theme="light"]) .panel.swatch-group, :root[data-theme="dark"] .panel.swatch-group {
  background: #ffffff; border: 1px solid #e6e1ee; box-shadow: 0 1px 2px rgba(22, 17, 42, .05), 0 12px 30px rgba(22, 17, 42, .07);
  --fg: #16112a; --muted: #5a5470; color: #16112a; padding: 28px; gap: 12px; }
.swatch-group h3 { color: #16112a; font-size: 1.3rem; line-height: 1.25; font-weight: 600; margin: 0; }
.swatch-group > p.muted { color: #4a4458; font-size: 1rem; line-height: 1.55; margin: 0 0 8px; }
.swatch-group .sw b { color: #16112a; }
.swatch-group .sw span { color: #6b6580; }
.chart:has(.zone-chart.mc) .ttl { padding-left: 0; text-align: center; display: block; }

/* Home grades: second button (filled) + products sample form */
.btn-sample { background: linear-gradient(90deg, #6a2c91 0%, #b23a8e 100%); color: #fff !important; border: 1.5px solid transparent; padding: 15px 24px; }
.btn-sample:hover { background: linear-gradient(90deg, #7a3aa6 0%, #c4479d 100%); transform: translateY(-1px); }
.grades-home .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.sample-req { background: var(--panel); }
.sample-req .colour-strip { margin-top: 6px; }
.sample-req #s-address { height: 84px; }
.photo-credit { margin: 10px 0 0; font-size: .8rem; color: var(--muted); }

/* EU 10/2011 seal: same size/place as the SAPRO seal, shown on hero slide 2 only */
.hero > .hero-badge.eu-badge { background: none; box-shadow: 0 14px 30px rgba(8, 20, 40, .35); }
.hero > .hero-badge.eu-badge svg { width: 100%; height: auto; display: block; }
.hero.on-first > .hero-badge.eu-badge { opacity: 0; visibility: hidden; }
.hero:not(.on-first) > .hero-badge.eu-badge { opacity: 1; visibility: visible; }
/* EU seal sits higher in the hero than the SAPRO seal */
@media (min-width: 861px) { .hero > .hero-badge.eu-badge { top: 22px; bottom: auto; } }
@media (min-width: 861px) { .hero > .hero-badge.eu-badge { right: max(200px, calc((100% - var(--wrap)) / 2 + 200px)); } }
.hero > .hero-badge.eu-badge { width: clamp(100px, 10vw, 146px); }
@media (max-width: 860px) { .hero > .hero-badge.eu-badge { width: 84px; } }
@media (max-width: 620px) { .hero > .hero-badge.eu-badge { width: 70px; } }
@media (min-width: 861px) { .hero > .hero-badge.eu-badge { right: max(320px, calc((100% - var(--wrap)) / 2 + 320px)); } }
@media (min-width: 861px) { .hero > .hero-badge:not(.eu-badge) { right: max(200px, calc((100% - var(--wrap)) / 2 + 200px)); } }
.page-hero .colour-strip { margin-top: 22px; }

/* ===== Site-wide review pass ===== */
/* Article and legal prose: the home section rhythm must not inflate in-text headings */
main > section:not(.hero) .prose h2 { font-size: clamp(1.4rem, 1.15rem + .9vw, 1.75rem); line-height: 1.2; margin: 2.2em 0 .55em; }
main > section:not(.hero) .prose h2:first-child, main > section:not(.hero) .prose .need + h2 { margin-top: 0; }
main > section:not(.hero) .prose-legal h2 { font-size: 1.2rem; margin: 1.8em 0 .4em; }
main > section:not(.hero) .prose h3 { font-size: 1.15rem; margin: 1.6em 0 .4em; }
.prose .need { margin-bottom: 1.6em; }
/* FAQ group titles */
main > section:not(.hero) h2.group-title { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.7rem); }

/* Forms: one look everywhere (white card, soft shadow, red primary submit) */
.form, :root:not([data-theme="light"]) .form, :root[data-theme="dark"] .form { background: #fff; border: 1px solid #e6e1ee; border-radius: 16px; padding: 28px; box-shadow: 0 18px 40px rgba(22, 17, 42, .08); --fg: #16112a; --muted: #5a5470; --line: #dcd6e6; --bg: #fff; color: #16112a; }
.form label, .form .field-label { color: #16112a; }
.form .btn-primary { width: 100%; justify-content: center; }
@media (max-width: 620px) { .form { padding: 20px; } }

/* Testimonials component on inner pages */
.voices-grid.voices-n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.voices-grid.voices-n1 { grid-template-columns: minmax(0, 1fr); max-width: 820px; }
@media (max-width: 900px) { .voices-grid.voices-n2 { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 901px) { .voices-grid.voices-n2 .voice, .voices-grid.voices-n1 .voice { order: 0; } }
.voices-foot { margin: 28px 0 0; color: rgba(255, 255, 255, .72); }
.voices .need { margin-top: 16px; }

/* Water tanks: even photo grid */
.photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.photo-grid .photo { aspect-ratio: 4 / 3; margin: 0; }
.photo-grid .photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Quality: batch results, chart and table side by side with room for the table */
.batches-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.batches-grid .table-wrap { overflow-x: auto; }
@media (max-width: 960px) { .batches-grid { grid-template-columns: minmax(0, 1fr); } }
/* Made with Fenix: tidier photo placeholders until the product photos are copied over */
.tile .ph { background: linear-gradient(135deg, #f4f0f9 0%, #ece6f4 100%); border: 1px dashed #d6cce4; color: #8a8199; font-family: var(--f-body); font-size: .82rem; }
main > section:not(.hero) .prose .eyebrow + h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.9rem); line-height: 1.1; margin: 0 0 .5em; }
/* Tables become row cards on phones */
@media (max-width: 620px) {
  table.stack-sm thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack-sm, table.stack-sm tbody, table.stack-sm tr, table.stack-sm td { display: block; width: 100%; }
  table.stack-sm tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  table.stack-sm td { display: grid; grid-template-columns: 38% 1fr; gap: 10px; padding: 5px 14px; border: 0; text-align: left !important; }
  table.stack-sm td::before { content: attr(data-label); font-family: var(--f-display); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
  table.stack-sm td:first-child { font-weight: 700; }
  .table-wrap:has(table.stack-sm) { overflow: visible; }
}
.batches-grid > * { min-width: 0; }
.batches .chart svg { min-width: 0 !important; width: 100%; height: auto; }
.chart figcaption { overflow-wrap: anywhere; }