/*
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{
  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{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 four-stage sequence — a rule with ticks, read left to right */
.steps{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(1.25rem,3vw,2.5rem);
  border-top:1px solid var(--accent-dim);margin-top:clamp(2.5rem,5vw,3.5rem);
}
.step{position:relative;padding:2rem 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){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:0}
  .step{padding-bottom:2rem}
  .step:nth-child(n+3){border-top:1px solid var(--accent-dim)}
}
@media (max-width:520px){
  .steps{grid-template-columns:1fr}
  .step:nth-child(n+2){border-top:1px solid var(--accent-dim)}
}

/* ---------- 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}

.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}}

/* ---------- 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}