/* ==========================================================================
   Solar Clean Services — design system
   Palette: Option B "Eco Professional" (brand-guidelines.html, section 03)
   Type:    Montserrat 700/800/900 + 800 italic / Inter 400-700 (section 04)
   ========================================================================== */

/* --- Fonts (self-hosted latin subsets, variable) ------------------------- */
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-latin-var.woff2') format('woff2-variations');
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/assets/fonts/montserrat-latin-italic-var.woff2') format('woff2-variations');
  font-weight: 700 900;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* Option B — Eco Professional */
  --ocean: #0E4D92;   /* primary: headers, heroes */
  --ocean-lift: #1667b8;
  --navy: #0A2342;    /* dark band gradient start */
  --sky: #3BA9E0;     /* secondary: icons, decoration — NEVER text on white */
  --fern: #1F7A3D;    /* eco accent: all CTAs */
  --fern-dark: #17602F;
  --mint: #7ED09A;    /* accent on dark backgrounds */
  --slate: #2B3A4A;   /* body text */
  --slate-soft: #55636f;
  --red: #D62828;     /* SAFETY CALL-OUTS ONLY */
  --red-deep: #A81D1D;
  --mist: #EEF3F7;    /* page backgrounds, cards */
  --white: #ffffff;
  --line: #d9e3ec;

  /* Solar energy accent — sampled from the logo sun (#F7C948). Used sparingly
     as the "photon / power" highlight; never as a large fill or body text. */
  --sun: #F7C948;
  --sun-deep: #E0A81E;

  --head: 'Montserrat', 'Segoe UI', Arial, sans-serif;
  --body: 'Inter', 'Segoe UI', Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Consolas', monospace;

  /* The panel rake — reused everywhere as the signature diagonal. */
  --rake: 4deg;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --radius: 4px;
  --radius-sm: 3px;

  --shadow-sm: 0 2px 8px rgba(10, 35, 66, .07);
  --shadow: 0 14px 34px rgba(10, 35, 66, .12);
  --shadow-lg: 0 28px 60px rgba(10, 35, 66, .20);

  --ease: cubic-bezier(.22, .61, .36, 1);

  /* Blueprint solar-cell grid — the signature texture, drawn once as tokens. */
  --grid-line: rgba(255, 255, 255, .06);
  --cell: 46px;
}

/* Solar-cell blueprint mesh, reused by hero + dark bands via .has-mesh */
.has-mesh { position: relative; isolation: isolate; }
.has-mesh::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  -webkit-mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 78%);
          mask-image: radial-gradient(120% 100% at 80% 0%, #000 30%, transparent 78%);
  pointer-events: none;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--head);
  color: var(--ocean);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.35rem, 5.2vw, 4rem); font-weight: 900; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.35rem); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 800; }
h4 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 1.15em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--ocean); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { color: var(--fern); }

:focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-dark :focus-visible { outline-color: var(--mint); }

/* --- Layout -------------------------------------------------------------- */
.wrap { width: min(var(--wrap), 100%); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--mist { background: var(--mist); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fern);
  margin: 0 0 1rem;
}
/* Instrument tick before every kicker */
.kicker::before {
  content: '';
  width: 26px;
  height: 2px;
  background: currentColor;
  flex: none;
}
.section-head--center .kicker { justify-content: center; }
.on-dark .kicker, .kicker--light { color: var(--sun); }

.lede { font-size: clamp(1.03rem, 1.5vw, 1.18rem); color: var(--slate-soft); max-width: 62ch; }
.on-dark .lede { color: #cfe2f2; }

.section-head { max-width: 68ch; margin-bottom: clamp(2.25rem, 4.5vw, 3.25rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { letter-spacing: -.03em; }

.skip-link {
  position: absolute;
  left: 1rem; top: -100%;
  z-index: 200;
  background: var(--fern);
  color: var(--white);
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top .18s var(--ease);
}
.skip-link:focus { top: 0; color: var(--white); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 50px;
  padding: .85rem 1.7rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .005em;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              box-shadow .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--fern); color: var(--white); box-shadow: 0 6px 18px rgba(31, 122, 61, .28); }
.btn--primary:hover { background: var(--fern-dark); color: var(--white); box-shadow: 0 12px 30px rgba(31, 122, 61, .4); }
/* Photon sweep — a bar of sunlight crosses the CTA on hover. */
.btn--primary::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(247, 201, 72, .55), transparent);
  transform: skewX(-18deg);
  transition: left .5s var(--ease);
}
.btn--primary:hover::after { left: 130%; }
@media (prefers-reduced-motion: reduce) { .btn--primary::after { display: none; } }

.btn--ghost { border-color: rgba(255, 255, 255, .55); color: var(--white); background: rgba(255, 255, 255, .06); }
.btn--ghost:hover { border-color: var(--sun); background: rgba(255, 255, 255, .14); color: var(--white); }

.btn--outline { border-color: var(--ocean); color: var(--ocean); background: transparent; }
.btn--outline:hover { background: var(--ocean); color: var(--white); }

.btn--call { background: var(--white); color: var(--ocean); }
.btn--call:hover { background: var(--mist); color: var(--ocean); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }

/* --- Header / nav -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
/* Thin solar spectrum rule under the header — the site's signature hairline. */
.site-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--fern) 0%, var(--sky) 38%, var(--sun) 68%, var(--fern) 100%);
  opacity: .9;
}
.nav {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
}
/* min-height keeps the logo link a comfortable tap target. */
.nav__brand { display: flex; align-items: center; gap: .7rem; min-height: 48px; text-decoration: none; margin-right: auto; }
.nav__brand img { width: 52px; height: auto; }
.nav__name {
  font-family: var(--head);
  font-weight: 800;
  font-style: italic;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  color: var(--ocean);
  line-height: 1.05;
  text-transform: uppercase;
}
.nav__tag {
  display: block;
  font-family: var(--body);
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--slate-soft);
  text-transform: uppercase;
  margin-top: 2px;
}
/* Desktop: links and CTA sit on one row inside the bar. */
.nav__menu { display: flex; align-items: center; gap: .5rem; }
.nav__links { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: block;
  padding: .55rem .8rem;
  border-radius: var(--radius-sm);
  font-size: .95rem;
  font-weight: 600;
  color: var(--slate);
  text-decoration: none;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav__links a:hover { background: var(--mist); color: var(--ocean); }
.nav__links a[aria-current='page'] { color: var(--ocean); box-shadow: inset 0 -2px 0 var(--fern); }
/* Sized to sit comfortably inside the 72px bar. */
.nav__cta { margin-left: .5rem; min-height: 42px; padding: .5rem 1.15rem; font-size: .92rem; }
.nav__toggle {
  display: none;
  align-items: center;
  gap: .45rem;
  min-height: 44px;
  padding: .5rem .85rem;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ocean);
  cursor: pointer;
}
.nav__toggle svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    gap: .15rem;
    padding: 1rem var(--gutter) 1.4rem;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .nav__menu.is-open { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; }
  .nav__links a { padding: .85rem .6rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav__links a[aria-current='page'] { box-shadow: inset 3px 0 0 var(--fern); }
  .nav__cta { margin: .8rem 0 0; }
  .site-header { position: relative; }
}
@media (max-width: 560px) {
  .nav__name { font-size: .85rem; }
  .nav__brand img { width: 42px; }
  /* The tagline is in the hero and footer already — drop it here to stop wrapping. */
  .nav__tag { display: none; }
  .nav__toggle { padding: .5rem .7rem; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Deep-to-mid ocean, lit from the top right where the sun sits. */
  background:
    radial-gradient(90% 120% at 88% -10%, #1d78c9 0%, transparent 55%),
    linear-gradient(158deg, var(--navy) 0%, var(--ocean) 58%, #0b3f78 100%);
  color: var(--white);
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4rem, 9vw, 7.5rem);
}
/* Blueprint solar-cell mesh */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  -webkit-mask-image: radial-gradient(115% 95% at 78% 5%, #000 25%, transparent 75%);
          mask-image: radial-gradient(115% 95% at 78% 5%, #000 25%, transparent 75%);
  pointer-events: none;
}
/* Photon rays raked at the panel angle — the memorable anchor. */
.hero::after {
  content: '';
  position: absolute;
  top: -35%; right: -15%;
  width: 70%; height: 170%;
  z-index: -1;
  background: repeating-linear-gradient(
    100deg,
    rgba(247, 201, 72, .10) 0px,
    rgba(247, 201, 72, .10) 2px,
    transparent 2px,
    transparent 26px
  );
  transform: rotate(-8deg);
  -webkit-mask-image: radial-gradient(60% 60% at 70% 20%, #000 0%, transparent 72%);
          mask-image: radial-gradient(60% 60% at 70% 20%, #000 0%, transparent 72%);
  pointer-events: none;
}
.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
/* Nudge the art up so it optically centres against the taller text column. */
.hero__art { align-self: center; transform: translateY(-4%); }
.hero h1 {
  color: var(--white);
  margin-bottom: .5em;
  letter-spacing: -.03em;
  line-height: 1.02;
}
/* The promise inside the headline glows like it's generating. */
.hero h1 em {
  font-style: italic;
  color: var(--sun);
  position: relative;
  white-space: nowrap;
}
.hero__sub { font-size: clamp(1.06rem, 1.7vw, 1.24rem); color: #cfe3f6; max-width: 52ch; margin-bottom: 2rem; }
.hero__sub strong { color: var(--white); font-weight: 600; }

.hero--inner { padding-block: clamp(3rem, 6vw, 5rem) clamp(3.25rem, 6.5vw, 5.5rem); }
.hero--inner .hero__grid { grid-template-columns: 1fr; }
.hero--inner .hero__sub { max-width: 64ch; margin-bottom: 0; }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  /* Message first on small screens — the art supports it, it doesn't lead. */
  .hero__art { order: 1; max-width: 300px; margin-inline: auto; transform: none; }
  .hero { padding-block: clamp(2.25rem, 7vw, 3.5rem) clamp(2.5rem, 8vw, 4rem); }
  .hero h1 { font-size: clamp(2.1rem, 8.5vw, 3rem); }
}
@media (max-width: 520px) {
  /* Below this the artwork costs more than it earns. */
  .hero__art { display: none; }
  /* Kicker reads as one tight line rather than wrapping mid-phrase. */
  .kicker { font-size: 10.5px; letter-spacing: .14em; gap: .45rem; }
  .kicker::before { width: 18px; }
  .hero__sub { margin-bottom: 1.5rem; }
  .chips { margin-top: 1.75rem; padding-top: 1.25rem; }
}
/* Side-by-side CTAs wherever there's room; full width only when truly narrow. */
@media (max-width: 420px) {
  .hero .btn-row .btn { width: 100%; }
}

/* Credential chips under the hero CTAs — read as instrument tags, not pills. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 2.25rem 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .38rem .75rem;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .06);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e6f1fa;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.chip:hover { border-color: rgba(247, 201, 72, .5); background: rgba(255, 255, 255, .1); }
.chip svg { width: 13px; height: 13px; color: var(--mint); flex: none; }

/* --- Hero artwork (inline SVG panel) ------------------------------------- */
.panel-art { width: 100%; height: auto; filter: drop-shadow(0 18px 40px rgba(3, 22, 46, .45)); }
.panel-art .shine { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .panel-art .shine { animation: sweep 5.5s var(--ease) 1.2s infinite; }
}
@keyframes sweep {
  0%   { opacity: 0; transform: translateX(-42%); }
  12%  { opacity: .85; }
  38%  { opacity: 0; transform: translateX(58%); }
  100% { opacity: 0; transform: translateX(58%); }
}

/* --- Stats — readout strip ------------------------------------------------ */
/* Sits directly under the hero as a dark instrument panel, hairline-divided. */
.section--readout {
  background: var(--navy);
  color: #cfe2f2;
  padding-block: clamp(2.25rem, 4.5vw, 3.25rem);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.stat {
  position: relative;
  padding-inline: clamp(.75rem, 2.5vw, 2rem);
}
.stat:first-child { padding-left: 0; }
.stat + .stat::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 62%;
  background: rgba(255, 255, 255, .16);
}
.stat__num {
  font-family: var(--head);
  font-weight: 900;
  font-size: clamp(2.1rem, 4.6vw, 3.15rem);
  line-height: 1;
  color: var(--white);
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.stat__num .u { color: var(--sun); }
.stat__label {
  font-family: var(--mono);
  font-size: .76rem;
  line-height: 1.55;
  letter-spacing: .04em;
  color: #91b0cd;
  margin-top: .7rem;
}
.stat__label strong {
  display: block;
  color: var(--white);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .7rem;
  margin-bottom: .2rem;
}
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 2rem 0; }
  .stat:nth-child(odd) { padding-left: 0; }
  .stat:nth-child(odd)::before { display: none; }
}

/* --- Cards --------------------------------------------------------------- */
.grid { display: grid; gap: clamp(1.1rem, 2.2vw, 1.6rem); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* Two-up cards carry more copy, so they get a little more room to breathe. */
.card--wide { padding: clamp(1.8rem, 3vw, 2.4rem); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.6rem, 2.8vw, 2.15rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
/* Spectrum rule draws itself across the card top on hover. */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--fern), var(--sky) 55%, var(--sun));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .38s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #bed3e5; }
.card:hover::before, .card:focus-within::before { transform: scaleX(1); }
.card h3 { margin-bottom: .55rem; }
.card p { color: var(--slate-soft); }
.card__link {
  margin-top: auto;
  padding-top: 1.25rem;
  font-family: var(--mono);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--fern);
}
.card__link::after { content: ' →'; transition: none; }
.card__link:hover { color: var(--fern-dark); text-decoration: underline; text-underline-offset: .3em; }

/* Index numeral — technical, sits top-right like a schematic callout. */
.card__index {
  position: absolute;
  top: clamp(1.1rem, 2vw, 1.5rem);
  right: clamp(1.2rem, 2.2vw, 1.7rem);
  font-family: var(--head);
  font-weight: 900;
  font-size: 2.75rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #c6d8e8;
  letter-spacing: -.04em;
  pointer-events: none;
  user-select: none;
  transition: -webkit-text-stroke-color .22s var(--ease);
}
.card:hover .card__index { -webkit-text-stroke-color: var(--sky); }
/* Firefox has no text-stroke — fall back to a soft tint. */
@supports not (-webkit-text-stroke: 1px red) {
  .card__index { color: #dbe7f1; }
}

.card__icon {
  display: grid;
  place-items: center;
  width: 50px; height: 50px;
  margin-bottom: 1.2rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, var(--sky), var(--ocean));
  color: var(--white);
  box-shadow: 0 6px 16px rgba(14, 77, 146, .25);
}
.card__icon svg { width: 25px; height: 25px; }
.card--alert .card__icon { background: linear-gradient(140deg, #e8623f, var(--red)); box-shadow: 0 6px 16px rgba(214, 40, 40, .25); }
.card--alert { border-color: #f0cdcd; }
.card--alert::before { background: linear-gradient(90deg, var(--red), #e8623f); }
.card--alert .card__link { color: var(--red-deep); }

/* --- Dark & red bands ---------------------------------------------------- */
.band-dark {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(80% 100% at 85% 0%, rgba(59, 169, 224, .22) 0%, transparent 60%),
    linear-gradient(150deg, var(--navy) 0%, var(--ocean) 100%);
  color: #d7e6f4;
}
.band-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  -webkit-mask-image: radial-gradient(100% 90% at 85% 0%, #000 20%, transparent 72%);
          mask-image: radial-gradient(100% 90% at 85% 0%, #000 20%, transparent 72%);
  pointer-events: none;
}
.band-dark h2, .band-dark h3 { color: var(--white); }

/* Safety band — hazard-striped left edge, unmistakably a warning. */
.band-red {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--red-deep) 0%, var(--red) 100%);
  color: #ffe9e9;
  border-left: 6px solid transparent;
  border-image: repeating-linear-gradient(
    45deg,
    var(--sun) 0px, var(--sun) 10px,
    var(--navy) 10px, var(--navy) 20px
  ) 1;
}
.band-red h2, .band-red h3 { color: var(--white); }
.band-red__grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.25rem, 3vw, 2.25rem); align-items: start; }
.band-red__bolt {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .14);
  border: 2px solid rgba(255, 255, 255, .32);
  flex: none;
}
.band-red__bolt svg { width: 32px; height: 32px; color: var(--sun); }
@media (prefers-reduced-motion: no-preference) {
  .band-red__bolt svg { animation: bolt-pulse 3.2s var(--ease) infinite; }
}
@keyframes bolt-pulse {
  0%, 82%, 100% { opacity: 1; }
  88% { opacity: .35; }
  93% { opacity: 1; }
}
.band-red p { max-width: 68ch; }
.band-red .link-light {
  display: inline-block;
  color: var(--white);
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
}
.band-red .link-light:hover { color: var(--sun); border-bottom-color: var(--sun); }
@media (max-width: 620px) {
  .band-red__grid { grid-template-columns: 1fr; }
}

/* --- Credential badges --------------------------------------------------- */
.badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1rem; }
.badge {
  display: flex;
  gap: .9rem;
  padding: 1.2rem 1.3rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid var(--sky);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  transition: border-left-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.badge:hover { transform: translateX(3px); box-shadow: var(--shadow); border-left-color: var(--sun); }
.badge--top { border-left-color: var(--fern); background: linear-gradient(100deg, #f4faf6, var(--white) 55%); }
.badge__tick { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--fern); }
.badge__name { font-family: var(--head); font-weight: 800; font-size: 1rem; color: var(--ocean); margin: 0 0 .15rem; }
.badge__full { display: block; font-family: var(--mono); font-weight: 500; font-size: .74rem; letter-spacing: .04em; color: var(--slate-soft); text-transform: none; margin-top: .2rem; }
.badge p { font-size: .92rem; color: var(--slate-soft); margin: .35rem 0 0; }

/* --- Checklist ----------------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.checklist li { display: flex; gap: .75rem; align-items: flex-start; }
.checklist svg { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--fern); }
.on-dark .checklist svg, .band-dark .checklist svg { color: var(--mint); }

/* --- Before/after slider ------------------------------------------------- */
.compare { max-width: 720px; margin-inline: auto; }
.compare__stage {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--navy);
  aspect-ratio: 3 / 2;
}
.compare__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.compare__layer--dirty { clip-path: inset(0 0 0 var(--split, 50%)); }
.compare__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split, 50%);
  width: 3px;
  margin-left: -1.5px;
  background: var(--white);
  box-shadow: 0 0 12px rgba(0, 0, 0, .4);
  pointer-events: none;
}
.compare__divider::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 3px 12px rgba(0, 0, 0, .35);
}
.compare__tag {
  position: absolute;
  bottom: 14px;
  padding: .3rem .7rem;
  border-radius: 999px;
  background: rgba(10, 35, 66, .8);
  color: var(--white);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.compare__tag--clean { left: 14px; }
.compare__tag--dirty { right: 14px; }
.compare__control { margin-top: 1.1rem; }
.compare__control label { display: block; font-size: .92rem; font-weight: 600; margin-bottom: .5rem; text-align: center; color: var(--slate-soft); }
.compare__control input[type='range'] { width: 100%; accent-color: var(--fern); min-height: 44px; }
.compare__note { font-size: .85rem; color: var(--slate-soft); text-align: center; margin-top: .75rem; }

/* --- Accordion (FAQ) ----------------------------------------------------- */
.faq { display: grid; gap: .75rem; max-width: 820px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); overflow: hidden; }
.faq__item[open] { border-color: #c3d6e6; box-shadow: var(--shadow-sm); }
.faq__item[open] .faq__q { border-bottom: 1px solid var(--line); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.3rem;
  font-family: var(--head);
  font-weight: 700;
  font-size: 1.03rem;
  color: var(--ocean);
  cursor: pointer;
  list-style: none;
  min-height: 44px;
  transition: background-color .15s var(--ease);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { background: var(--mist); }
.faq__q::after {
  content: '';
  flex: none;
  width: 11px; height: 11px;
  border-right: 2.5px solid var(--fern);
  border-bottom: 2.5px solid var(--fern);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-2px); }
.faq__a { padding: 1.2rem 1.3rem 1.35rem; color: var(--slate-soft); }
.faq__a > :first-child { margin-top: 0; }

/* --- Forms --------------------------------------------------------------- */
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field .req { color: var(--red); }
.field .hint { font-size: .84rem; color: var(--slate-soft); }
.field input, .field select, .field textarea {
  width: 100%;
  padding: .8rem .95rem;
  min-height: 48px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 1rem;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--ocean);
  box-shadow: 0 0 0 3px rgba(14, 77, 146, .13);
  outline: none;
}
.field input[aria-invalid='true'], .field select[aria-invalid='true'], .field textarea[aria-invalid='true'] {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214, 40, 40, .12);
}
.field__error { font-size: .86rem; font-weight: 600; color: var(--red-deep); min-height: 0; }
.field__error:empty { display: none; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 620px) { .form__row { grid-template-columns: 1fr; } }

/* Honeypot — off-screen but focusable-free */
.hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__status { border-radius: var(--radius-sm); font-weight: 600; }
.form__status:not(:empty) { padding: 1rem 1.15rem; }
.form__status[data-state='ok'] { background: #eaf6ee; border: 1px solid #b8dfc6; color: #14572c; }
.form__status[data-state='error'] { background: #fdecec; border: 1px solid #f3c4c4; color: var(--red-deep); }

.btn[aria-disabled='true'], .btn:disabled { opacity: .65; cursor: progress; transform: none; }

/* --- Contact panel ------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: start; }
@media (max-width: 940px) { .contact-grid { grid-template-columns: 1fr; } }

.call-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(1.6rem, 3vw, 2.25rem);
  border-radius: var(--radius);
  background:
    radial-gradient(90% 100% at 100% 0%, rgba(247, 201, 72, .18) 0%, transparent 58%),
    linear-gradient(145deg, var(--navy), var(--ocean));
  color: #d7e6f4;
  box-shadow: var(--shadow);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--fern), var(--sky) 55%, var(--sun)) 1;
}
.call-card h2, .call-card h3 { color: var(--white); }
.call-card__number {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--head);
  font-weight: 900;
  font-size: clamp(1.55rem, 3.6vw, 2.1rem);
  color: var(--white);
  text-decoration: none;
  letter-spacing: -.01em;
}
.call-card__number:hover { color: var(--mint); }
.call-card__number svg { width: 26px; height: 26px; color: var(--mint); }
.call-card dl { display: grid; gap: .75rem; margin: 1.5rem 0 0; }
.call-card dt { font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--sun); }
.call-card dd { margin: .15rem 0 0; }
.call-card a { color: var(--white); }
.call-card a:hover { color: var(--mint); }

/* --- CTA band — full-bleed sunrise, the loudest moment on the page -------- */
.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
  background:
    radial-gradient(75% 120% at 50% 115%, rgba(247, 201, 72, .30) 0%, transparent 62%),
    linear-gradient(160deg, var(--navy) 0%, var(--ocean) 100%);
  color: #d7e6f4;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  -webkit-mask-image: radial-gradient(70% 90% at 50% 100%, #000 10%, transparent 70%);
          mask-image: radial-gradient(70% 90% at 50% 100%, #000 10%, transparent 70%);
  pointer-events: none;
}
.cta-band h2 { color: var(--white); margin-bottom: .5em; font-size: clamp(2rem, 4.2vw, 3rem); letter-spacing: -.03em; }
.cta-band .lede { color: #cfe2f2; }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn--outline { border-color: rgba(255, 255, 255, .55); color: var(--white); }
.cta-band .btn--outline:hover { background: var(--white); color: var(--ocean); border-color: var(--white); }

/* --- Signature slant divider ---------------------------------------------- */
/* Sections interlock at the panel rake instead of stacking as flat blocks. */
.slant-top { position: relative; margin-top: -1px; clip-path: polygon(0 var(--rake-h, 2.5vw), 100% 0, 100% 100%, 0 100%); padding-top: calc(clamp(3.5rem, 7vw, 6rem) + 2.5vw); }
.slant-bottom { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--rake-h, 2.5vw)), 0 100%); padding-bottom: calc(clamp(3.5rem, 7vw, 6rem) + 2.5vw); }

/* --- Towns list ---------------------------------------------------------- */
.towns { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.towns a, .towns span {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ocean);
  text-decoration: none;
  transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.towns a:hover { background: var(--ocean); color: var(--white); border-color: var(--ocean); }
.band-dark .towns span, .band-dark .towns a { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); color: var(--white); }
.band-dark .towns a:hover { background: var(--white); color: var(--ocean); }

/* --- Area entries -------------------------------------------------------- */
.area { padding-block: 1.75rem; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.area:first-of-type { border-top: 0; padding-top: 0; }
.area h3 { margin-bottom: .35rem; }
.area p { color: var(--slate-soft); margin-bottom: 0; }

/* --- Steps — connected process rail --------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.steps li { position: relative; padding-left: 3.8rem; }
.steps li::before {
  counter-increment: step;
  content: '0' counter(step);
  position: absolute;
  left: 0; top: -2px;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  background: var(--ocean);
  color: var(--white);
  font-family: var(--mono);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .02em;
  z-index: 1;
}
/* Rail connecting one step to the next. */
.steps li:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 20px; top: 44px; bottom: -1.75rem;
  width: 2px;
  background: linear-gradient(var(--line), transparent);
}
.band-dark .steps li::before { background: var(--sun); color: var(--navy); }
.band-dark .steps li:not(:last-child)::after { background: linear-gradient(rgba(255,255,255,.28), transparent); }
.steps h3 { margin-bottom: .3rem; }
.steps p { color: var(--slate-soft); margin: 0; }
.band-dark .steps p { color: #cfe2f2; }

/* --- Breadcrumbs --------------------------------------------------------- */
.crumbs { padding-block: .85rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .04em; background: var(--mist); border-bottom: 1px solid var(--line); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; color: var(--slate-soft); }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: .4rem; color: #9fb3c4; }
.crumbs a { color: var(--ocean); text-decoration: none; font-weight: 600; }
.crumbs a:hover { text-decoration: underline; }

/* --- Footer -------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--navy);
  color: #b9cfe4;
  padding-block: clamp(2.75rem, 5vw, 4rem) 1.5rem;
}
/* Spectrum hairline mirrors the header rule — bookends the page. */
.site-footer::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--fern) 0%, var(--sky) 38%, var(--sun) 68%, var(--fern) 100%);
}
.site-footer h2, .site-footer h3 {
  color: var(--white);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 4vw, 3rem); align-items: start; }
/* The brand column is tall enough to span both rows, which lets "Areas we cover"
   start directly under Pages and Get in touch instead of below the logo, filling
   the dead space those two short columns used to leave. */
.footer-brand { grid-row: 1 / span 2; }
.footer-areas { grid-column: 2 / -1; }
.footer-region { display: block; font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sun); margin-bottom: .3rem; }
.footer-areas .footer-towns + .footer-towns { margin-top: .9rem; }
.footer-note { font-size: .85rem; color: #9fb8cf; margin-top: 1rem; }
@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-row: auto; }
  .footer-areas { grid-column: auto; }
}
.site-footer a { color: #d7e6f4; text-decoration: none; }
.site-footer a:hover { color: var(--mint); text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-logo { width: 200px; margin-bottom: 1.1rem; }
.footer-tag { font-family: var(--head); font-weight: 800; font-style: italic; color: var(--white); font-size: 1.1rem; margin-bottom: .8rem; }
/* Bottom row layout mirrors oxyhaus.co.uk: copyright left, credit centred,
   legal links right, collapsing to one centred column on small screens. */
.footer-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px 28px;
  margin-top: 2.5rem;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .85rem;
  color: #9db6cf;
}
.footer-bottom > :first-child { justify-self: start; }
.footer-bottom > :last-child { justify-self: end; text-align: right; }
/* Vertical padding lifts these to a usable tap size without moving anything:
   inline-block + negative margin keeps the visual line-height unchanged. */
.footer-bottom a:not(.footer-credit) {
  display: inline-block;
  padding-block: 11px;
  margin-block: -11px;
}
/* Same trick for the credit, which stays inline-flex for its logo row. */
.footer-credit { padding-block: 11px; margin-block: -11px; }
@media (max-width: 720px) {
  .footer-bottom { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .footer-bottom > :first-child,
  .footer-bottom > :last-child { justify-self: center; text-align: center; }
  .footer-credit { order: 3; }
}
.footer-towns { font-size: .88rem; line-height: 1.9; }

/* Companies Act 2006 s.82 / Trading Disclosures Regs 2015 disclosure. Sits
   under the footer bottom row rather than inside it, so the three-column
   grid above is left alone. */
.footer-legal {
  margin: 18px 0 0;
  font-size: .76rem;
  line-height: 1.7;
  color: #8aa5bf;
  text-align: center;
}

/* Website-by credit — Blackoak Creative.
   Matches the treatment used on oxyhaus.co.uk: sits back at 40% and lifts on hover. */
.footer-credit {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  opacity: .4;
  text-decoration: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.footer-credit:hover,
.footer-credit:focus-visible { opacity: .85; transform: translateY(-1px); }
.footer-credit:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; border-radius: var(--radius-sm); }
.footer-credit .by {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9db6cf;
  white-space: nowrap;
}
.footer-credit img { height: 18px; width: auto; display: block; }
/* The footer link colour rule would otherwise underline the logo on hover. */
.site-footer .footer-credit:hover { text-decoration: none; }

/* --- Sticky mobile call bar ---------------------------------------------- */
.call-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: .6rem;
  padding: .65rem var(--gutter) calc(.65rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 18px rgba(10, 35, 66, .1);
  transition: transform .25s var(--ease);
}
.call-bar .btn { flex: 1; padding-inline: .75rem; font-size: .95rem; }
.call-bar.is-hidden { transform: translateY(110%); }
@media (max-width: 767px) {
  .call-bar { display: flex; }
  body { padding-bottom: 74px; }
}
@media print { .call-bar, .site-header { display: none; } }

/* --- Scroll reveal ------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* --- Utilities ----------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Qualification pills ---------------------------------------------------
   Twelve acronyms mean nothing to a homeowner on their own, so each pill
   reveals its plain-English meaning into one shared panel below the row,
   rather than stacking twelve explanations down the page.

   The explanations are real text in the HTML, not JS strings, so they stay
   indexable and readable with JS off. Screen readers get pill then meaning in
   DOM order. Hover covers mice, :focus-within covers keyboard, and tapping a
   pill focuses it, which covers touch.

   Every note is absolutely pinned over the resting hint and shares the
   .quals__panel box with it, so the panel never changes size and nothing on
   the page moves as you hover along the row. */
.quals { position: relative; }

.quals__list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.1rem; padding: 0; }

.quals__pill {
  display: inline-block;
  padding: .55rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--white);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ocean);
  cursor: help;
  transition: background-color .18s var(--ease), color .18s var(--ease),
              border-color .18s var(--ease), transform .18s var(--ease),
              box-shadow .18s var(--ease);
}
.quals__pill:hover, .quals__pill:focus-visible {
  background: var(--ocean);
  color: var(--white);
  border-color: var(--ocean);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(14, 77, 146, .28);
}

/* The resting hint sits in normal flow and reserves the space; the notes
   overlay it. Both carry .quals__panel so the two boxes line up exactly. */
.quals__panel {
  margin: 0;
  padding: 1rem 1.2rem;
  min-height: 7rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--fern);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: .93rem;
  line-height: 1.6;
  color: var(--slate-soft);
}
/* An empty, invisible box holding open exactly the space the widest note needs,
   so revealing one paints into reserved space instead of pushing the page around. */
.quals__spacer { display: block; background: none; border-color: transparent; }

.quals__note {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
.quals__note strong { font-family: var(--head); font-weight: 800; color: var(--ocean); }

.quals__item:hover .quals__note,
.quals__item:focus-within .quals__note { opacity: 1; transform: none; }

/* The panel reserves room for the longest note so nothing shifts on hover.
   Values are measured from the real text at each width, not guessed. */
@media (max-width: 1000px) { .quals__panel { min-height: 8.25rem; } }
@media (max-width: 400px)  { .quals__panel { min-height: 9.75rem; } }
@media (max-width: 340px)  { .quals__panel { min-height: 12.75rem; } }

@media (prefers-reduced-motion: reduce) {
  .quals__pill, .quals__note { transition: none; }
  .quals__pill:hover, .quals__pill:focus-visible { transform: none; }
  .quals__note { transform: none; }
}
.text-center { text-align: center; }
.mt-2 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.prose > * + * { margin-top: 1.15em; }
.prose h3 { margin-top: 2em; }

/* --- Cookie consent banner ------------------------------------------------ */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: none;
  padding: 1.1rem var(--gutter) calc(1.1rem + env(safe-area-inset-bottom));
  background: var(--white);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(10, 35, 66, .16);
}
.consent.is-open { display: block; }
.consent__inner {
  width: min(var(--wrap), 100%);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}
.consent__text { flex: 1 1 360px; font-size: .92rem; color: var(--slate-soft); margin: 0; }
.consent__text a { font-weight: 600; }
.consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.consent__actions .btn { min-height: 44px; padding: .65rem 1.3rem; font-size: .92rem; }

.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(10, 35, 66, .55);
}
.consent-modal.is-open { display: flex; }
.consent-modal__panel {
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.consent-modal__panel h2 { margin-bottom: .3rem; }
.consent-option {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.consent-option:first-of-type { border-top: 1px solid var(--line); margin-top: 1.25rem; }
.consent-option h3 { font-size: 1rem; margin-bottom: .25rem; }
.consent-option p { font-size: .88rem; color: var(--slate-soft); margin: 0; }
.consent-option__control { flex: none; padding-top: .1rem; }

/* Accessible toggle switch, keyboard operable, no third-party widget */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch__track {
  position: absolute; inset: 0;
  background: var(--line);
  border-radius: 999px;
  transition: background-color .18s var(--ease);
  pointer-events: none;
}
.switch__track::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 3px rgba(10, 35, 66, .35);
  transition: transform .18s var(--ease);
}
.switch input:checked + .switch__track { background: var(--fern); }
.switch input:checked + .switch__track::before { transform: translateX(20px); }
.switch input:disabled + .switch__track { background: #b9c6d1; opacity: .8; cursor: not-allowed; }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--sky); outline-offset: 3px; }

.consent-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}