/*
Theme Name: ECHO3
Theme URI: https://www.echo3.com/
Author: Right Click Digital Solutions Ltd
Description: Bespoke theme for ECHO3 aviation specialists. Section-based page editor, configurable contact form and cookie banner, and a one-click content importer.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: echo3
*/

/* =========================================================
   ECHO3 — site stylesheet
   House style taken from echo3.com/competition.php:
   Montserrat only, black ground, white hairlines, no radius
   except 2px on buttons. One accent: --accent.
   Used by every page. For WordPress: enqueue as style.css.
   ========================================================= */

/* =========================================================
   ECHO3 — house style lifted from competition.php
   Montserrat only · black ground · white rules · no radius
   (Shared block identical across pages — move to style.css for WordPress.
    The 'Aircraft Charter' block at the end is page-specific.)
   ========================================================= */

:root{
  --black:#000;
  --white:#fff;
  --grey:#a9adb1;
  --body:rgba(255,255,255,.76);
  --line:rgba(255,255,255,.16);
  --rule:rgba(255,255,255,.42);
  --accent:#c5a46a;          /* the one colour — change here only */
  --accent-dim:rgba(197,164,106,.55);

  --ff:"Montserrat",-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;
  --ff-logo:"tachyon","Michroma","Montserrat",sans-serif;   /* the logo face — see note below */
  --ls-wide:.34em;
  --ls-title:.08em;

  --wrap:1280px;
  --gut:clamp(1.25rem,5vw,4rem);
  --head-h:78px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------
   THE LOGO FACE
   The live site already serves the logo typeface under the
   family name "tachyon" (loaded by the Wanium theme / custom
   fonts plugin), so in WordPress the name below picks it up
   automatically with no further work.

   For this static demo there is no tachyon file to load, so
   Michroma stands in — it is the closest free match in the
   same squarish-techno genre. To preview the real thing,
   drop the font file next to these pages and uncomment:

   @font-face{
     font-family:"tachyon";
     src:url("tachyon.woff2") format("woff2"),
         url("tachyon.woff")  format("woff");
     font-weight:400;font-display:swap;
   }
   --------------------------------------------------------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;background:var(--black);color:var(--white);
  font-family:var(--ff);font-size:1rem;font-weight:300;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
p{margin:0 0 1.35em}
p:last-child{margin-bottom:0}

h1,h2,h3{margin:0;font-weight:300;text-transform:uppercase;letter-spacing:var(--ls-title);line-height:1.2}

:focus-visible{outline:1px solid var(--white);outline-offset:4px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:999;background:var(--white);color:var(--black);padding:.9rem 1.5rem;font-size:.6875rem;letter-spacing:var(--ls-wide);text-transform:uppercase;font-weight:600}
.skip-link:focus{left:0}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(4.5rem,11vw,9rem)}
.section--tight{padding-block:clamp(3rem,6vw,5rem)}

/* ---------- Shared type ---------- */
.eyebrow{
  margin:0 0 1.6rem;font-size:.6875rem;font-weight:500;line-height:1.65;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--accent);
}
.rule{height:1px;background:var(--rule);border:0;margin:0}
.prose{color:var(--body);font-size:1.0625rem;line-height:1.85;max-width:64ch}
.prose strong{font-weight:500;color:var(--white)}

.btn{
  display:inline-block;padding:15px 40px;
  border:1px solid var(--white);border-radius:2px;
  font-size:.6875rem;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;text-decoration:none;color:var(--white);background:transparent;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.btn:hover,.btn:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--black)}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;height:var(--head-h);
  display:flex;align-items:center;background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease),border-color .4s var(--ease);
}
.site-header.is-solid,.site-header--fixed{background:var(--black);border-bottom-color:var(--line)}

.site-header__inner{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.75rem);
  width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
}
.brand{flex:0 0 auto;line-height:0}
.brand img{width:clamp(104px,12vw,138px)}

.nav{margin-left:auto}
.nav__list,.nav__sub{list-style:none;margin:0;padding:0}
.nav__list{display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.25rem)}
.nav__item{position:relative}

.nav__link{
  display:inline-block;padding:.5rem 0;font-size:.6875rem;font-weight:500;
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  text-decoration:none;color:var(--white);position:relative;
}
.nav__link::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent);transition:right .35s var(--ease)}
.nav__link:hover::after,.nav__link:focus-visible::after,.nav__item.is-current>.nav__link::after{right:.34em}

.nav__sub{
  position:absolute;top:calc(100% + 18px);left:-1.5rem;min-width:320px;
  background:var(--black);border:1px solid var(--line);padding:.5rem 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s;
}
.nav__item--has-sub:hover>.nav__sub,.nav__item--has-sub:focus-within>.nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{
  display:block;padding:.7rem 1.5rem;font-size:.625rem;font-weight:400;line-height:1.6;
  letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--grey);
  transition:color .25s,background .25s;
}
.nav__sub a:hover,.nav__sub a:focus-visible{color:var(--accent);background:rgba(255,255,255,.05)}

.head-tel{
  flex:0 0 auto;font-size:.6875rem;font-weight:600;letter-spacing:.22em;
  text-decoration:none;color:var(--white);font-variant-numeric:tabular-nums;
  padding:.85rem 1.4rem;border:1px solid var(--line);border-radius:2px;
  transition:border-color .3s var(--ease),background .3s var(--ease),color .3s var(--ease);
}
.head-tel:hover{border-color:var(--accent);background:var(--accent);color:var(--black)}

/* ---------- Mobile nav ---------- */
.nav-toggle{
  display:none;margin-left:auto;width:44px;height:44px;padding:0;
  background:none;border:1px solid var(--line);color:var(--white);
  cursor:pointer;position:relative;border-radius:2px;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  position:absolute;left:50%;width:18px;height:1px;background:currentColor;
  transform:translateX(-50%);transition:transform .3s var(--ease),opacity .2s;
}
.nav-toggle span{top:50%;margin-top:-.5px}
.nav-toggle span::before{content:"";left:0;transform:none;top:-6px}
.nav-toggle span::after{content:"";left:0;transform:none;top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1080px){
  .nav-toggle{display:block}
  .head-tel{display:none}
  .nav{
    position:fixed;inset:var(--head-h) 0 0 0;background:var(--black);
    margin:0;padding:1.5rem var(--gut) 4rem;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  }
  .nav.is-open{opacity:1;visibility:visible;transform:none}
  .nav__list{display:block}
  .nav__item{border-top:1px solid var(--line)}
  .nav__item:last-child{border-bottom:1px solid var(--line)}
  .nav__link{display:block;padding:1.15rem 0;font-size:.75rem}
  .nav__link::after{display:none}
  .nav__sub{
    position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    background:none;border:0;border-left:1px solid var(--line);margin:0 0 1.25rem 0;padding:0;
  }
  .nav__sub a{padding:.55rem 0 .55rem 1.25rem}
  .nav__mobile-tel{display:inline-block;margin-top:2rem}
}
@media (min-width:1081px){.nav__mobile-tel{display:none}}

/* ---------- Page header ---------- */
.page-head{
  position:relative;display:flex;align-items:flex-end;
  min-height:clamp(360px,60vh,620px);overflow:hidden;isolation:isolate;background:var(--black);
}
.page-head>img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) brightness(.68)}
/* Resolves to TRUE black at the bottom edge, so there is no seam where the
   header meets the next section. */
.page-head::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.6) 0%,rgba(0,0,0,.88) 72%,#000 100%);
}
.page-head__inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin-inline:auto;padding:calc(var(--head-h) + 3rem) var(--gut) clamp(2.5rem,5vw,4rem)}
.page-head h1{font-family:var(--ff-logo);font-size:clamp(1.5rem,5.2vw,3.75rem);font-weight:400;letter-spacing:.06em}
.crumb{
  margin:0 0 1.5rem;font-size:.6875rem;font-weight:500;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--grey);
}
.crumb a{text-decoration:none;color:var(--grey);transition:color .25s}
.crumb a:hover{color:var(--accent)}
.page-head__rule{width:88px;height:1px;background:var(--accent);margin-top:clamp(1.75rem,4vw,2.5rem)}

/* ---------- Lede ---------- */
.lede{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.5rem,5vw,5rem);align-items:start}
.lede__label{position:sticky;top:calc(var(--head-h) + 2.5rem)}
.lede .prose{font-size:clamp(1.0625rem,1.5vw,1.25rem);line-height:1.9;max-width:60ch}

/* ---------- Alternating blocks ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,5vw,5rem);align-items:center}
.split+.split{margin-top:clamp(3.5rem,8vw,7rem)}
.split--flip .split__media{order:2}
.split__media{position:relative;isolation:isolate}
.split__media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.05)}
/* A hairline frame set behind the photo and pushed down-and-right, so it
   escapes as an L along two edges. Depth drawn as a line, not a shadow. */
.split__media::after,.band::after,.enquiry__media::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:18px -18px -18px 18px;border:1px solid var(--accent-dim);
}
.split__body{max-width:56ch}
.split__body .rule{width:56px;background:var(--line);margin-bottom:1.75rem}
@media (max-width:640px){
  .split__media::after,.band::after,.enquiry__media::after{inset:11px -11px -11px 11px}
}
@media (max-width:880px){
  .lede{grid-template-columns:1fr}
  .lede__label{position:static}
  .split{grid-template-columns:1fr}
  .split--flip .split__media{order:0}
}

/* ---------- Motto ---------- */
.motto{text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.motto p{
  margin:0;font-size:clamp(1.125rem,3.6vw,2.75rem);font-weight:300;
  letter-spacing:.18em;text-indent:.18em;text-transform:uppercase;line-height:1.55;
}
.motto p span{display:block}
.motto p span+span{color:var(--accent)}

/* ---------- Wide image ---------- */
.band{position:relative;isolation:isolate}
.band img{width:100%;aspect-ratio:21/9;object-fit:cover;filter:grayscale(1) contrast(1.05)}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:end}
.contact h2{font-size:clamp(1.5rem,3.4vw,2.375rem);letter-spacing:.12em}
.contact__tel{
  display:inline-block;margin-top:1.75rem;
  font-size:clamp(1.125rem,2.6vw,1.75rem);font-weight:400;letter-spacing:.12em;
  font-variant-numeric:tabular-nums;text-decoration:none;color:var(--white);
  border-bottom:1px solid var(--line);padding-bottom:.35rem;transition:border-color .3s var(--ease);
}
.contact__tel:hover{border-bottom-color:var(--accent)}
.contact__meta{border-top:1px solid var(--line);padding-top:1.5rem}
.contact__meta p{font-size:.6875rem;font-weight:400;line-height:2;letter-spacing:.22em;text-transform:uppercase;color:var(--grey);max-width:36ch}
@media (max-width:800px){.contact{grid-template-columns:1fr;align-items:start}}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:clamp(3.5rem,7vw,5.5rem) 2rem}
.site-footer__top{
  display:grid;grid-template-columns:minmax(0,1.2fr) repeat(2,minmax(0,1fr));
  gap:clamp(2rem,5vw,4rem);padding-bottom:clamp(2.5rem,5vw,4rem);border-bottom:1px solid var(--line);
}
.f-mark{width:140px;margin-bottom:1.75rem}
.site-footer h3{font-size:.6875rem;font-weight:500;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--grey);margin-bottom:1.5rem}
.f-list{list-style:none;margin:0;padding:0}
.f-list li+li{margin-top:.85rem}
.f-list a{font-size:.6875rem;font-weight:400;line-height:1.7;letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--white);transition:color .25s}
.f-list a:hover,.f-list a:focus-visible{color:var(--accent)}
.f-tel{font-size:1rem;font-weight:400;letter-spacing:.14em;font-variant-numeric:tabular-nums;text-decoration:none;color:var(--white)}
.f-tel:hover{color:var(--accent)}
.f-social{display:flex;gap:.75rem;margin-top:1.75rem}
.f-social a{
  display:grid;place-items:center;width:42px;height:42px;
  border:1px solid var(--line);border-radius:2px;color:var(--white);
  transition:background .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.f-social a:hover,.f-social a:focus-visible{background:var(--accent);border-color:var(--accent);color:var(--black)}
.f-social svg{width:16px;height:16px;fill:currentColor}

.site-footer__base{
  display:flex;flex-wrap:wrap;gap:.85rem 2.5rem;justify-content:space-between;
  padding-top:2rem;font-size:.6875rem;font-weight:300;
  letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--grey);
}
.site-footer__base .tagline{font-weight:500;color:var(--accent)}

@media (max-width:860px){
  .site-footer__top{grid-template-columns:1fr 1fr}
  .site-footer__brand{grid-column:1/-1}
}
@media (max-width:540px){.site-footer__top{grid-template-columns:1fr}}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* =========================================================
   Charter page components (also reused by the service pages)
   ========================================================= */

.section--ruled{border-top:1px solid var(--line)}

/* lead line under a section label */
.lead{
  font-size:clamp(1.125rem,2vw,1.5rem);font-weight:400;line-height:1.5;
  letter-spacing:.02em;color:var(--white);margin:0 0 1.75rem;max-width:26ch;
}

/* pulled sentence */
.pull{
  margin:2.25rem 0;padding:.25rem 0 .25rem 1.75rem;
  border-left:1px solid var(--accent);
  font-size:clamp(1rem,1.6vw,1.1875rem);font-weight:300;line-height:1.7;
  color:var(--white);max-width:48ch;
}

/* termed list — used for the ethos, client types and aircraft classes */
.marks{list-style:none;margin:2.5rem 0 0;padding:0}
.marks li{border-top:1px solid var(--line);padding:1.5rem 0}
.marks li:last-child{border-bottom:1px solid var(--line)}
.marks h3{
  font-size:.6875rem;font-weight:500;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--accent);margin-bottom:.7rem;
}
.marks p{margin:0;color:var(--body);font-size:.9375rem;line-height:1.8;max-width:56ch}

/* paired images */
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem);margin-top:clamp(3rem,7vw,5rem)}
.pair figure{margin:0;position:relative;isolation:isolate}
.pair img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.pair figure::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:18px -18px -18px 18px;border:1px solid var(--accent-dim);
}
@media (max-width:640px){.pair figure::after{inset:11px -11px -11px 11px}}

/* The stage sequence — a rule with ticks, read left to right.
   auto-fit makes the columns follow the number of stages, so three
   stages span the width in thirds instead of leaving an empty fourth
   track with the rule running through it.
   The rule sits on each step rather than on the row, and the column gap
   is inner padding instead of a grid gap, so the line stays continuous,
   stops where the stages stop, and redraws on any wrapped row. */
.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));
  gap:0;
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
.step{
  position:relative;
  border-top:1px solid var(--accent-dim);
  padding:2rem clamp(1.25rem,3vw,2.5rem) 0 0;
}
.step::before{
  content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;background:var(--accent);
}
.step__n{
  display:block;font-size:.625rem;font-weight:500;letter-spacing:var(--ls-wide);
  color:var(--grey);margin-bottom:.9rem;
}
.step h3{
  font-size:.8125rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--white);margin-bottom:.8rem;
}
.step p{margin:0;color:var(--body);font-size:.875rem;line-height:1.8}
@media (max-width:860px){
  /* At most two across here, but a lone stage still fills the width:
     a 48% minimum lets two tracks fit and no more, and auto-fit
     collapses the empty one. */
  .steps{grid-template-columns:repeat(auto-fit,minmax(min(100%,48%),1fr))}
  .step{padding-bottom:2rem}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .step{padding-right:0}
}

/* ---------- Enquiry ---------- */
.enquiry{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,5rem);align-items:start}
.enquiry h2{font-size:clamp(1.75rem,4vw,2.75rem);letter-spacing:.12em}
.enquiry .prose{margin-top:1.75rem}
/* A picture in place of the form, treated as the photography is elsewhere:
   desaturated, with the hairline frame escaping down and to the right. */
.enquiry__media{position:relative;isolation:isolate}
.enquiry__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.enquiry__media--portrait img{aspect-ratio:3/4}
.enquiry__media--square img{aspect-ratio:1/1}
.enquiry__media--fill{align-self:stretch}
.enquiry__media--fill img{aspect-ratio:auto;height:100%;min-height:20rem}

.channels{list-style:none;margin:2.5rem 0 0;padding:0;border-top:1px solid var(--line)}
.channels li{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;align-items:baseline;
  padding:1.1rem 0;border-bottom:1px solid var(--line);
}
.channels dt,.channels .k{
  font-size:.625rem;font-weight:500;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--grey);
}
.channels a,.channels .v{
  font-size:.9375rem;font-weight:400;letter-spacing:.06em;color:var(--white);
  text-decoration:none;font-variant-numeric:tabular-nums;
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),color .3s var(--ease);
}
.channels a:hover,.channels a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}

.form{border:1px solid var(--line);padding:clamp(1.5rem,3.5vw,2.5rem)}
.form h3{
  font-size:.6875rem;font-weight:500;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--accent);margin-bottom:2rem;
}
.field{margin-bottom:1.5rem}
.field label{
  display:block;font-size:.625rem;font-weight:500;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--grey);margin-bottom:.7rem;
}
.field input,.field textarea{
  width:100%;background:transparent;border:1px solid var(--line);border-radius:2px;
  color:var(--white);font-family:var(--ff);font-size:.9375rem;font-weight:300;
  padding:.9rem 1rem;transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:130px;line-height:1.7}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent)}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.3)}
.form .btn{margin-top:.5rem;cursor:pointer;font-family:var(--ff)}

@media (max-width:880px){
  .enquiry{grid-template-columns:1fr}
  /* Stacked, there is no text column alongside to match, so the picture
     takes the ordinary landscape crop rather than a thin letterbox. */
  .enquiry__media--fill img{aspect-ratio:4/3;height:auto;min-height:0}
}

/* ---------- Long-form ---------- */
.longform{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(1.5rem,5vw,5rem);align-items:start}
.longform h2{font-size:clamp(1.25rem,2.4vw,1.875rem);letter-spacing:.12em;position:sticky;top:calc(var(--head-h) + 2.5rem)}
.longform .prose p{font-size:.9375rem;line-height:1.9}
@media (max-width:880px){
  .longform{grid-template-columns:1fr}
  .longform h2{position:static}
}
/* =========================================================
   Service pages, services index and contact
   ========================================================= */

/* ---------- Service index cards ---------- */
.cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:clamp(2rem,4vw,3.25rem) clamp(1.5rem,3vw,2.5rem);
}
.card{display:block;text-decoration:none;color:inherit}
.card__media{position:relative;isolation:isolate}
.card__media img{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  filter:grayscale(1) contrast(1.05) brightness(.85);
  transition:filter .45s var(--ease);
}
.card__media::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  inset:14px -14px -14px 14px;border:1px solid var(--line);
  transition:border-color .45s var(--ease);
}
.card h3{
  margin-top:1.6rem;font-size:.75rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--white);
  transition:color .35s var(--ease);
}
.card__rule{height:1px;background:var(--line);margin-top:1.1rem;position:relative}
.card__rule::after{
  content:"";position:absolute;inset:0 100% 0 0;background:var(--accent);
  transition:right .45s var(--ease);
}
.card:hover .card__media img,.card:focus-visible .card__media img{filter:grayscale(1) contrast(1.05) brightness(1)}
.card:hover .card__media::after,.card:focus-visible .card__media::after{border-color:var(--accent-dim)}
.card:hover h3,.card:focus-visible h3{color:var(--accent)}
.card:hover .card__rule::after,.card:focus-visible .card__rule::after{right:0}
@media (max-width:640px){.card__media::after{inset:10px -10px -10px 10px}}

/* ---------- Service detail: what the service covers ---------- */
.spec{margin-top:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--line)}
.spec__row{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);
  gap:clamp(1rem,4vw,4rem);
  padding:clamp(1.75rem,3.5vw,2.75rem) 0;
  border-bottom:1px solid var(--line);
}
.spec__title{
  font-size:.8125rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--white);margin:0 0 .85rem;
}
.spec__tag{
  margin:0;font-size:.6875rem;font-weight:400;line-height:1.7;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.spec__body{color:var(--body);font-size:.9375rem;line-height:1.85;max-width:60ch}
.spec__body p{margin:0 0 1.1em}

/* bullet list — a hairline tick rather than a disc */
.bullets{list-style:none;margin:1.25rem 0 0;padding:0}
.bullets li{position:relative;padding:.4rem 0 .4rem 1.6rem;font-size:.9375rem;line-height:1.75;color:var(--body)}
.bullets li::before{
  content:"";position:absolute;left:0;top:1.05em;
  width:9px;height:1px;background:var(--accent);
}
@media (max-width:820px){
  .spec__row{grid-template-columns:1fr;gap:1.25rem}
}

/* ---------- Why choose — tick list ---------- */
.checks{
  list-style:none;margin:2.5rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:0 clamp(2rem,4vw,3.5rem);
}
.checks li{
  position:relative;padding:1.05rem 0 1.05rem 2rem;
  border-top:1px solid var(--line);
  font-size:.9375rem;line-height:1.7;color:var(--body);
}
.checks li::before{
  content:"";position:absolute;left:0;top:1.75em;
  width:11px;height:1px;background:var(--accent);
}

/* closing statement after a why-choose list */
.closer{
  margin-top:clamp(2rem,4vw,3rem);padding-left:1.75rem;
  border-left:1px solid var(--accent);
  font-size:clamp(1rem,1.5vw,1.125rem);font-weight:300;line-height:1.75;
  color:var(--white);max-width:60ch;
}

/* small muted standards note */
.note{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;
  border-top:1px solid var(--line);
  font-size:.8125rem;line-height:1.9;color:var(--grey);max-width:70ch;
}
.note a{color:var(--grey);text-decoration:none;border-bottom:1px solid var(--line)}
.note a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- Contact page ---------- */
.offices{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(1.5rem,4vw,3rem);margin-top:2.5rem;
}
.office{border-top:1px solid var(--line);padding-top:1.4rem}
.office h3{
  font-size:.625rem;font-weight:500;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--accent);margin-bottom:1rem;
}
.office address{
  font-style:normal;font-size:.9375rem;line-height:2;color:var(--body);
}

/* =========================================================
   Home page — full-height hero and the compact service index
   ========================================================= */

.hero{
  position:relative;min-height:100svh;display:flex;align-items:center;
  text-align:center;overflow:hidden;isolation:isolate;background:var(--black);
}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media img{
  width:100%;height:100%;object-fit:cover;object-position:center 45%;
  filter:grayscale(1) contrast(1.08) brightness(.72);
}
/* Resolves to TRUE black at the bottom edge, so there is no seam where the
   hero meets the next section. */
.hero__veil{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.72) 0%,rgba(0,0,0,.55) 45%,rgba(0,0,0,.92) 88%,#000 100%);
}
.hero__inner{
  position:relative;z-index:2;
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:calc(var(--head-h) + 3rem) var(--gut) 3rem;
}
/* The wordmark itself carries the hero. Capped at 460px so the 761px
   source still has headroom on a retina screen — swap in an SVG when
   there is one and the cap can go. */
.hero__logo{margin:0}
.hero__logo img{width:clamp(210px,44vw,460px);margin-inline:auto}
.hero__divider{width:min(360px,62%);margin:clamp(1.75rem,4vw,2.75rem) auto 0;height:1px;background:var(--accent-dim)}
.hero__strapline{
  margin-top:1.6rem;font-size:clamp(.6875rem,1.1vw,.8125rem);font-weight:500;
  letter-spacing:var(--ls-wide);text-indent:var(--ls-wide);
  text-transform:uppercase;color:var(--accent);
}
.scroll-cue{
  position:absolute;z-index:2;left:50%;bottom:2.25rem;transform:translateX(-50%);
  width:1px;height:54px;background:linear-gradient(to bottom,transparent,var(--accent-dim));
}

/* compact service index on the home page */
.index-grid{
  display:grid;grid-template-columns:minmax(170px,1fr) 3fr;
  gap:clamp(1.75rem,5vw,4rem);align-items:start;
}
.index-list{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:0 clamp(2rem,5vw,4rem);
}
.index-list a{
  display:block;padding:1.15rem 0;border-top:1px solid var(--line);
  font-size:.6875rem;font-weight:400;line-height:1.7;
  letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:var(--white);
  transition:color .3s var(--ease),padding-left .3s var(--ease);
}
.index-list a:hover,.index-list a:focus-visible{color:var(--accent);padding-left:.9rem}
@media (max-width:800px){.index-grid{grid-template-columns:1fr}}

/* =========================================================
   WordPress additions — form notices, cookie bar, admin bar
   ========================================================= */

.section--flush{padding-block:0}

/* honeypot: present for bots, gone for people and screen readers */
.echo3-hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.form__notice{
  margin:0 0 1.5rem;padding:.95rem 1.1rem;border:1px solid var(--line);border-radius:2px;
  font-size:.875rem;line-height:1.7;color:var(--white);
}
.form__notice--ok{border-color:var(--accent);color:var(--accent)}
.form__notice--bad{border-color:#b4514e;color:#e59b98}

.btn--ghost{border-color:var(--line);color:var(--grey)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:transparent;border-color:var(--white);color:var(--white)}

/* ---------- Cookie bar ---------- */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:var(--black);border-top:1px solid var(--accent-dim);
  animation:cookie-in .5s var(--ease) both;
}
.cookie-bar[hidden],.cookie-bar.is-gone{display:none}
@keyframes cookie-in{from{transform:translateY(100%)}to{transform:none}}

.cookie-bar__inner{
  width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(1rem,2.5vw,1.5rem) var(--gut);
  display:flex;flex-wrap:wrap;gap:1rem clamp(1.5rem,4vw,3rem);
  align-items:center;justify-content:space-between;
}
.cookie-bar__text{
  margin:0;flex:1 1 420px;font-size:.8125rem;line-height:1.8;color:var(--body);
}
.cookie-bar__text a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-dim)}
.cookie-bar__text a:hover{border-bottom-color:var(--accent)}
.cookie-bar__actions{display:flex;gap:.75rem;flex:0 0 auto}
.cookie-bar__actions .btn{padding:12px 28px}

@media (max-width:560px){
  .cookie-bar__actions{width:100%}
  .cookie-bar__actions .btn{flex:1 1 auto;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .cookie-bar{animation:none}
}

/* ---------------------------------------------------------
   Footer widgets.
   Whatever markup a widget emits — a Navigation Menu widget,
   a block widget, a plain list — it has to read as the footer
   columns do, so these rules target the markup rather than
   relying on a class the widget may not carry.
   --------------------------------------------------------- */
.site-footer__top h2,
.site-footer__top h3,
.site-footer__top .widget-title,
.site-footer__top .wp-block-heading{
  font-size:.6875rem;font-weight:500;line-height:1.65;
  letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--grey);margin:0 0 1.5rem;
}
.site-footer__top ul,
.site-footer__top ol{list-style:none;margin:0;padding:0}
.site-footer__top li+li{margin-top:.85rem}
.site-footer__top li{font-size:.6875rem;line-height:1.7;letter-spacing:.22em;text-transform:uppercase;color:var(--grey)}
.site-footer__top a{
  font-size:.6875rem;font-weight:400;line-height:1.7;
  letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;color:var(--white);transition:color .25s;
}
.site-footer__top a:hover,.site-footer__top a:focus-visible{color:var(--accent)}
.site-footer__top .f-tel{font-size:1rem;letter-spacing:.14em;text-transform:none}
.site-footer__top .f-social a{font-size:0;letter-spacing:0}
.site-footer__top nav{margin:0}
.f-widget+.f-widget{margin-top:2.5rem}

/* ---------------------------------------------------------
   Enquiry form fields.
   color-scheme:dark makes the native date picker and select
   dropdown render dark, so they sit with the rest of the site
   instead of flashing a white panel.
   --------------------------------------------------------- */
.form{color-scheme:dark}

.form__grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(1rem,2.5vw,1.75rem);
}
.field--full{grid-column:1/-1}
@media (max-width:600px){
  .form__grid{grid-template-columns:1fr}
  .field--half{grid-column:1/-1}
}

.field__req{color:var(--accent);margin-left:.15em}

/* ---------- FAQ ----------
   Built on <details>, so the open/closed state is the browser's. Only the
   skin is ours: a gold-ruled box per question with a drawn plus that turns
   into a minus when it opens. */
.faq__title{font-size:clamp(1.5rem,3vw,2.25rem);letter-spacing:.1em}
.faq__intro{margin-top:1.5rem}
.faq{margin-top:clamp(2.5rem,5vw,3.5rem);display:grid;gap:.85rem}

.faq__item{
  border:1px solid var(--accent-dim);border-radius:6px;
  background:rgba(255,255,255,.015);
  transition:border-color .3s var(--ease),background .3s var(--ease);
}
.faq__item:hover{border-color:var(--accent)}
.faq__item[open]{border-color:var(--accent);background:rgba(197,164,106,.05)}

.faq__q{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.3rem clamp(1.25rem,2.5vw,1.75rem);
  cursor:pointer;list-style:none;
  font-size:clamp(.9375rem,1.4vw,1.0625rem);font-weight:400;line-height:1.5;
  color:var(--white);transition:color .25s var(--ease);
}
.faq__q::-webkit-details-marker{display:none}
.faq__q::marker{content:""}
.faq__item[open] .faq__q{color:var(--accent)}
.faq__q:focus-visible{outline:1px solid var(--accent);outline-offset:3px;border-radius:5px}

/* the plus, drawn as two hairlines; the upright one retracts on open */
.faq__mark{
  position:relative;flex:0 0 auto;width:14px;height:14px;
}
.faq__mark::before,.faq__mark::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--accent);
  transform:translate(-50%,-50%);transition:transform .3s var(--ease),opacity .3s var(--ease);
}
.faq__mark::before{width:14px;height:1px}
.faq__mark::after{width:1px;height:14px}
.faq__item[open] .faq__mark::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

/* The divider spans the box, inset to the same gutter as the question;
   the answer itself still stops at a readable measure. */
.faq__a{
  margin:0 clamp(1.25rem,2.5vw,1.75rem);
  padding:1.25rem 0 1.5rem;
  border-top:1px solid var(--line);
}
.faq__a .prose{max-width:72ch;font-size:.9375rem;line-height:1.85}
.faq__a .prose p + p{margin-top:1rem}

@media (prefers-reduced-motion:reduce){
  .faq__item,.faq__q,.faq__mark::before,.faq__mark::after{transition:none}
}

/* ---------- Charter form panel ----------
   The quote form and its pitch inside one gold-ruled panel. The pitch is
   first in the markup, so the columns are assigned explicitly rather than
   left to source order. */
/* The panel's colours are local variables, so the four themes are four
   short blocks rather than four copies of every rule. Everything inside
   reads these, and the default values reproduce the original panel. */
.quote{
  --q-panel:transparent;
  --q-pitch:rgba(255,255,255,.022);
  --q-edge:var(--accent-dim);
  --q-ink:var(--white);
  --q-body:var(--body);
  --q-label:var(--grey);
  --q-field-edge:var(--line);
  --q-placeholder:rgba(255,255,255,.3);
  --q-accent:var(--accent);
  --q-option-bg:var(--black);
  --q-option-ink:var(--white);
  --q-scheme:dark;
  --q-cal:invert(1) opacity(.45);
  --q-cal-hover:invert(1) opacity(.9);
  --q-btn-bg:transparent;
  --q-btn-edge:var(--white);
  --q-btn-ink:var(--white);
  --q-btn-hover-bg:var(--accent);
  --q-btn-hover-edge:var(--accent);
  --q-btn-hover-ink:var(--black);
  /* Montserrat is loaded at 300-600, so a bold theme caps at 600 rather
     than pulling down another weight. */
  --q-w-head:300;
  --q-w-body:300;
  --q-w-strong:500;

  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  background:var(--q-panel);
  border:1px solid var(--q-edge);
}
.quote__form {grid-column:1;grid-row:1}
.quote__pitch{grid-column:2;grid-row:1;border-left:1px solid var(--q-edge)}
.quote--text-left .quote__form {grid-column:2}
.quote--text-left .quote__pitch{grid-column:1;border-left:0;border-right:1px solid var(--q-edge)}
.quote--text-left{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}

.quote__form,.quote__pitch{padding:clamp(1.75rem,3.5vw,3rem)}
/* The form already draws its own frame; inside the panel that would double up. */
.quote__form .form{border:0;padding:0}
/* A barely-there lift so the two halves read apart without a second colour. */
.quote__pitch{background:var(--q-pitch)}
.quote__pitch h2{
  font-size:clamp(1.5rem,2.8vw,2.125rem);letter-spacing:.1em;line-height:1.25;
  color:var(--q-ink);font-weight:var(--q-w-head);
}
.quote__pitch .prose{margin-top:1.5rem;color:var(--q-body)}
.quote__pitch .prose p{font-size:.9375rem;line-height:1.8;font-weight:var(--q-w-body)}
.quote__pitch .prose strong{color:var(--q-ink);font-weight:var(--q-w-strong)}

/* Gold tick, drawn rather than set, so it stays crisp and needs no asset. */
.ticks{list-style:none;margin:2.25rem 0 0;padding:0}
.ticks li{
  position:relative;padding-left:2rem;margin-top:1.15rem;
  font-size:.9375rem;line-height:1.7;color:var(--q-body);font-weight:var(--q-w-body);
}
.ticks li:first-child{margin-top:0}
.ticks li::before{
  content:"";position:absolute;left:1px;top:.42em;
  width:.4rem;height:.75rem;
  border:solid var(--q-accent);border-width:0 1px 1px 0;
  transform:rotate(45deg);
}

/* ---- the form, repainted from the panel's variables ---- */
.quote .form{color-scheme:var(--q-scheme)}
.quote .form h3{color:var(--q-accent);font-weight:var(--q-w-strong)}
.quote .field__req{color:var(--q-accent);font-weight:var(--q-w-strong)}
.quote .field label,
.quote .choice legend{color:var(--q-label);font-weight:var(--q-w-strong)}
.quote .choice__option{color:var(--q-body);font-weight:var(--q-w-strong)}
.quote .choice__option:hover,
.quote .choice__option:has(input:checked){color:var(--q-ink)}
.quote .choice__option input{border-color:var(--q-field-edge)}
.quote .choice__option input::before{background:var(--q-accent)}
.quote .choice__option input:checked{border-color:var(--q-accent)}
.quote .choice__option input:focus-visible{outline-color:var(--q-accent)}
.quote .field input,
.quote .field textarea,
.quote .field select{border-color:var(--q-field-edge);color:var(--q-ink);font-weight:var(--q-w-body)}
.quote .field input:focus,
.quote .field textarea:focus,
.quote .field select:focus{border-color:var(--q-accent)}
.quote .field input::placeholder,
.quote .field textarea::placeholder{color:var(--q-placeholder)}
.quote .field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--q-accent) 50%),
                   linear-gradient(135deg,var(--q-accent) 50%,transparent 50%);
}
.quote .field select option{background:var(--q-option-bg);color:var(--q-option-ink)}
.quote .field select:invalid,
.quote .field select option[value=""]{color:var(--q-label)}
.quote .field input[type="date"]::-webkit-calendar-picker-indicator{filter:var(--q-cal)}
.quote .field input[type="date"]:hover::-webkit-calendar-picker-indicator{filter:var(--q-cal-hover)}
.quote .form__notice--ok{border-color:var(--q-accent);color:var(--q-accent)}
.quote .form .btn{
  background:var(--q-btn-bg);border-color:var(--q-btn-edge);color:var(--q-btn-ink);
}
.quote .form .btn:hover,
.quote .form .btn:focus-visible{
  background:var(--q-btn-hover-bg);border-color:var(--q-btn-hover-edge);color:var(--q-btn-hover-ink);
}

/* ---- the four panel themes ---- */

/* Gold panel, black text throughout. */
.quote--gold{
  --q-panel:var(--accent);
  --q-pitch:rgba(0,0,0,.07);
  --q-edge:rgba(0,0,0,.26);
  --q-ink:var(--black);
  --q-body:rgba(0,0,0,.76);
  --q-label:rgba(0,0,0,.68);
  --q-field-edge:rgba(0,0,0,.3);
  --q-placeholder:rgba(0,0,0,.42);
  --q-accent:var(--black);
  --q-scheme:light;
  --q-cal:opacity(.55);
  --q-cal-hover:opacity(1);
  --q-btn-bg:var(--black);
  --q-btn-edge:var(--black);
  --q-btn-ink:var(--accent);
  --q-btn-hover-bg:transparent;
  --q-btn-hover-edge:var(--black);
  --q-btn-hover-ink:var(--black);
  --q-option-bg:var(--black);
  --q-option-ink:var(--white);
}

/* Two-tone: a solid gold pitch beside the dark form, the seam doing the
   dividing. The pitch redeclares the inks, so only that half turns. */
.quote--split{
  --q-edge:var(--accent);
  --q-pitch:var(--accent);
}
.quote--split .quote__pitch{
  --q-ink:var(--black);
  --q-body:rgba(0,0,0,.76);
  --q-accent:var(--black);
}

/* Charcoal beside gold, everything set bold. The two halves are told
   apart by the colour change itself, so the seam carries no rule. */
.quote--bold{
  --q-panel:#0d0e10;
  --q-pitch:var(--accent);
  --q-edge:rgba(255,255,255,.1);
  --q-field-edge:rgba(255,255,255,.18);
  --q-w-head:600;
  --q-w-body:500;
  --q-w-strong:600;
}
.quote--bold .quote__pitch{
  --q-ink:var(--black);
  --q-body:rgba(0,0,0,.8);
  --q-label:rgba(0,0,0,.72);
  --q-accent:var(--black);
  border-color:transparent;
}

/* A charcoal panel that sits back from the page rather than announcing
   itself: no gold rule, the halves told apart by tone alone. */
.quote--raised{
  --q-panel:#0d0e10;
  --q-pitch:#15171a;
  --q-edge:rgba(255,255,255,.1);
  --q-field-edge:rgba(255,255,255,.14);
}

@media (max-width:880px){
  .quote,.quote--text-left{grid-template-columns:1fr}
  /* Stacked, the pitch belongs on top — it is what introduces the form. */
  .quote__pitch,.quote--text-left .quote__pitch{
    grid-column:1;grid-row:1;border:0;border-bottom:1px solid var(--accent-dim);
  }
  .quote__form,.quote--text-left .quote__form{grid-column:1;grid-row:2}
}

.field select,
.field input[type="date"],
.field input[type="tel"]{
  width:100%;background:transparent;border:1px solid var(--line);border-radius:2px;
  color:var(--white);font-family:var(--ff);font-size:.9375rem;font-weight:300;
  padding:.9rem 1rem;transition:border-color .3s var(--ease);
}
.field select:focus,
.field input[type="date"]:focus,
.field input[type="tel"]:focus{outline:none;border-color:var(--accent)}

/* native arrow replaced with the site's own diamond */
.field select{
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% - 2px),calc(100% - 15px) calc(50% - 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:2.75rem;cursor:pointer;
}
.field select option{background:var(--black);color:var(--white)}
/* an unchosen select reads as placeholder text */
.field select:invalid,
.field select option[value=""]{color:var(--grey)}

.field input[type="date"]{cursor:text}
.field input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1) opacity(.45);cursor:pointer;transition:filter .25s var(--ease);
}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator{filter:invert(1) opacity(.9)}

/* ---------- Radio group ---------- */
.choice{border:0;margin:0;padding:0}
.choice legend{
  display:block;font-size:.625rem;font-weight:500;letter-spacing:var(--ls-wide);
  text-transform:uppercase;color:var(--grey);margin-bottom:.9rem;padding:0;
}
.choice__options{display:flex;flex-wrap:wrap;gap:.75rem 2rem}
.choice__option{
  display:inline-flex;align-items:center;gap:.65rem;cursor:pointer;
  font-size:.9375rem;font-weight:300;color:var(--body);transition:color .25s;
}
.choice__option:hover{color:var(--white)}
.choice__option input{
  appearance:none;-webkit-appearance:none;margin:0;flex:0 0 auto;
  width:16px;height:16px;border:1px solid var(--line);border-radius:50%;
  display:grid;place-content:center;cursor:pointer;
  transition:border-color .25s var(--ease);
}
.choice__option input::before{
  content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);
  transform:scale(0);transition:transform .2s var(--ease);
}
.choice__option input:checked{border-color:var(--accent)}
.choice__option input:checked::before{transform:scale(1)}
.choice__option input:focus-visible{outline:1px solid var(--accent);outline-offset:3px}
.choice__option:has(input:checked){color:var(--white)}

@media (prefers-reduced-motion:reduce){
  .choice__option input::before{transition:none}
}

/* ---------------------------------------------------------
   Per-section vertical spacing.

   Each section carries its own space above and below, chosen
   in the editor. Doubled class for specificity, so these win
   over .section regardless of where they sit in the file.
   --------------------------------------------------------- */
.section.section--pt-large  { padding-top: clamp(6rem, 14vw, 12rem) }
.section.section--pt-medium { padding-top: clamp(3rem, 6vw, 5rem) }
.section.section--pt-small  { padding-top: clamp(1.5rem, 3vw, 2.5rem) }
.section.section--pt-xs     { padding-top: clamp(.5rem, 1.5vw, 1rem) }
.section.section--pt-none   { padding-top: 0 }

.section.section--pb-large  { padding-bottom: clamp(6rem, 14vw, 12rem) }
.section.section--pb-medium { padding-bottom: clamp(3rem, 6vw, 5rem) }
.section.section--pb-small  { padding-bottom: clamp(1.5rem, 3vw, 2.5rem) }
.section.section--pb-xs     { padding-bottom: clamp(.5rem, 1.5vw, 1rem) }
.section.section--pb-none   { padding-bottom: 0 }

/* ---------------------------------------------------------
   Term list row spacing, chosen per section.

   Normal keeps the 1.5rem above and below each term. The
   tighter steps pull the heading closer to its description
   too, otherwise only the outer gap closes and the rows look
   unevenly packed.
   --------------------------------------------------------- */
.marks.marks--snug  li { padding-block: 1.05rem }
.marks.marks--tight li { padding-block: .7rem }
.marks.marks--xs    li { padding-block: .45rem }

.marks.marks--tight h3 { margin-bottom: .45rem }
.marks.marks--xs    h3 { margin-bottom: .3rem }

.marks.marks--tight { margin-top: 1.75rem }
.marks.marks--xs    { margin-top: 1.5rem }

/* Term list: dividing lines off, and bolder term text.
   Bold here means the site's own emphasis — weight 500 in white, the
   same treatment <strong> gets in body copy — rather than a heavier
   weight that Montserrat would render as a different voice. */
.marks.marks--plain li,
.marks.marks--plain li:last-child { border: 0 }

.marks.marks--bold p { font-weight: 500; color: var(--white) }

/* With no lines the first row's top padding is dead space, so the list
   sits closer to whatever introduces it. */
.marks.marks--plain li:first-child { padding-top: 0 }
.marks.marks--plain { margin-top: 1.75rem }