/* ==========================================================================
   Mantle Fleet Services — private single-page site
   Structure mirrors medtractequipmentsolutions.com.

   ── THEMING ───────────────────────────────────────────────────────────────
   The whole palette lives in the one :root block below — gradients, scrims
   and glows included — so switching themes is a single copy-paste.
   To go back to the clay/burnt-orange theme, comment out the ACTIVE block
   and uncomment the CLAY block beneath it. Nothing else needs touching.
   A full copy of the old stylesheet is also kept at assets/theme-clay.css.bak

   Two-tone rule, in either theme:
     --anchor  dark  → type, links, buttons, check ticks   (needs contrast)
     --light   light → fills, rules, bullets, bands, hovers (never type)
   ========================================================================== */

/* ===== ACTIVE THEME: Augusta green ===== */
:root {
  --anchor:      #046A38;   /* Augusta green — type, buttons, links */
  --anchor-deep: #034D29;   /* hover */
  --light:       #7FB295;   /* fairway — fills, rules, bullets */
  --light-tint:  #E9F2EC;   /* washes, nav hover, photo rings */

  --ink:        #1F2622;
  --ink-2:      #4E5651;
  --ink-3:      #5F6761;

  --paper:      #F7F6F1;
  --paper-2:    #F0EFE8;
  --paper-3:    #E5E4DA;
  --rule:       #DBDACF;
  --grey:       #BDBCB0;

  --dark:       #123524;
  --black:      #0B1F14;
  --on-dark:    #F7F6F1;
  --on-dark-2:  #A9BCB0;

  /* gradient ramp, darkest to brightest */
  --tone-0: #081A10;
  --tone-1: #12402A;
  --tone-2: #046A38;
  --tone-3: #3A8F62;

  --scrim-a:   rgba(6,20,12,.80);
  --scrim-b:   rgba(6,20,12,.58);
  --scrim-c:   rgba(6,20,12,.36);
  --backdrop:  rgba(6,20,12,.66);
  --glow:      rgba(127,178,149,.55);
  --shadow-1:  rgba(20,32,25,.05);
  --shadow-2:  rgba(20,32,25,.07);
  --shadow-3:  rgba(20,32,25,.06);
  --shadow-4:  rgba(20,32,25,.12);
  --on-dark-border: rgba(247,246,241,.32);
  --on-dark-hair:   rgba(247,246,241,.14);
  --on-dark-panel:  rgba(247,246,241,.05);
  --on-dark-panel-edge: rgba(247,246,241,.2);
}

/* ===== ALTERNATE THEME: clay / burnt orange =====
   Swap by commenting out the block above and uncommenting this one.

:root {
  --anchor:      #A83618;
  --anchor-deep: #8A2B11;
  --light:       #D4805A;
  --light-tint:  #FBEEE6;

  --ink:        #2B2420;
  --ink-2:      #5C5349;
  --ink-3:      #6A6259;

  --paper:      #FBF7F3;
  --paper-2:    #F5F0EA;
  --paper-3:    #EBE4DB;
  --rule:       #E0D8CE;
  --grey:       #C3B9AC;

  --dark:       #2B2420;
  --black:      #191310;
  --on-dark:    #FBF7F3;
  --on-dark-2:  #B5A99D;

  --tone-0: #191310;
  --tone-1: #5C2514;
  --tone-2: #A83618;
  --tone-3: #C05A33;

  --scrim-a:   rgba(14,10,8,.80);
  --scrim-b:   rgba(14,10,8,.58);
  --scrim-c:   rgba(14,10,8,.36);
  --backdrop:  rgba(14,10,8,.66);
  --glow:      rgba(212,128,90,.55);
  --shadow-1:  rgba(43,36,32,.05);
  --shadow-2:  rgba(43,36,32,.07);
  --shadow-3:  rgba(43,36,32,.06);
  --shadow-4:  rgba(43,36,32,.12);
  --on-dark-border: rgba(251,247,243,.32);
  --on-dark-hair:   rgba(251,247,243,.14);
  --on-dark-panel:  rgba(251,247,243,.05);
  --on-dark-panel-edge: rgba(251,247,243,.2);
}
===== end alternate theme ===== */

:root {
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --gutter: 24px;
  --max: 1180px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px var(--shadow-1), 0 10px 30px var(--shadow-2);
  --shadow-lg: 0 2px 4px var(--shadow-3), 0 24px 60px var(--shadow-4);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--body); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--anchor); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--anchor-deep); }
h1, h2, h3, h4 { font-family: var(--display); margin: 0; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--light); color: var(--ink); }

:focus-visible { outline: 3px solid var(--anchor); outline-offset: 3px; border-radius: 4px; }
.section--dark :focus-visible, .hero :focus-visible, .site-footer :focus-visible { outline-color: var(--light); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: 780px; }
.section { padding: 76px 0; }
.section--tint { background: var(--paper-2); }
.section--dark { background: var(--dark); color: var(--on-dark); }
.section--dark h2, .section--dark h3 { color: var(--on-dark); }
.section--dark p { color: var(--on-dark-2); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--black); color: #fff; padding: 12px 18px; z-index: 200; }
.skip:focus { left: 12px; top: 12px; }

/* ---------- Type ---------- */
.eyebrow {
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase; color: var(--anchor);
  margin: 0 0 16px; display: block;
}
.eyebrow::after {
  content: ''; display: block; width: 30px; height: 3px;
  background: var(--light); margin-top: 9px;
}
.section-head--center .eyebrow::after { margin-left: auto; margin-right: auto; }
.eyebrow--on-dark { color: var(--light); }

.h2 { font-size: clamp(28px, 3.7vw, 44px); font-weight: 700; }
.h3 { font-size: clamp(18px, 1.9vw, 22px); font-weight: 700; }
.lede { font-size: clamp(17.5px, 2vw, 21px); line-height: 1.58; color: var(--ink-2); }
.small { font-size: 14.5px; line-height: 1.6; }
.tiny { font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.measure { max-width: 64ch; }
.center { text-align: center; }
.center .measure { margin-left: auto; margin-right: auto; }
.accent { background: linear-gradient(transparent 58%, var(--light) 58%); color: var(--ink); }

.section-head { max-width: 72ch; margin-bottom: 44px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 16px; }
.section-head h2:last-child { margin-bottom: 0; }
.head-rule { display: block; width: 30px; height: 3px; background: var(--light); margin-top: 2px; }
.section-head--center .head-rule { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn svg { width: 15px; height: 15px; flex: 0 0 auto; }

.btn--primary { background: var(--anchor); color: #fff; border-color: var(--anchor); }
.btn--primary:hover { background: var(--anchor-deep); color: #fff; border-color: var(--anchor-deep); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--grey); }
.btn--ghost:hover { border-color: var(--anchor); color: var(--anchor); }

.btn--on-dark { background: transparent; color: var(--on-dark); border-color: var(--on-dark-border); }
.btn--on-dark:hover { background: var(--light); color: var(--ink); border-color: var(--light); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.btn-row--center { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--paper) 93%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 78px; }
.logo { display: flex; align-items: center; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-img { height: 34px; width: auto; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2); padding: 9px 13px; border-radius: 999px; text-decoration: none;
}
.nav a:hover { color: var(--anchor); background: var(--light-tint); text-decoration: none; }
.nav a.is-active { color: var(--ink); background: var(--paper-3); }
/* `.nav a` outranks `.btn--primary`, so restate the button's colors here */
.nav a.btn--primary { color: #fff; background: var(--anchor); }
.nav a.btn--primary:hover { color: #fff; background: var(--anchor-deep); }
.nav .btn { margin-left: 10px; padding: 12px 20px; font-size: 12.5px; }

.nav-toggle { display: none; background: none; border: 1.5px solid var(--grey); border-radius: 10px; padding: 9px 11px; cursor: pointer; color: var(--ink); }
.nav-toggle svg { width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 60vh; display: grid; align-items: center; overflow: hidden; background: var(--black); }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  background-size: cover; background-position: center;
  animation: heroFade 24s infinite;
}
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s; }
.hero-slide:nth-child(4) { animation-delay: 18s; }
@keyframes heroFade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}
/* Placeholders built from the theme ramp. Drop hero-1 … hero-4 into assets/img/. */
.hero-slide--a { background-image: linear-gradient(130deg, var(--tone-0) 0%, var(--tone-1) 55%, var(--tone-2) 100%); }
.hero-slide--b { background-image: linear-gradient(140deg, var(--tone-0) 0%, var(--tone-1) 50%, var(--tone-3) 100%); }
.hero-slide--c { background-image: linear-gradient(120deg, var(--tone-1) 0%, var(--tone-2) 60%, var(--light) 100%); }
.hero-slide--d { background-image: linear-gradient(150deg, var(--tone-0) 0%, var(--tone-1) 45%, var(--tone-2) 100%); }

.hero-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--scrim-a) 0%, var(--scrim-b) 55%, var(--scrim-c) 100%); }
/* padding-block only — a `padding` shorthand here would wipe out .wrap's side gutter */
.hero-inner { position: relative; z-index: 2; padding-top: 118px; padding-bottom: 108px; }
.hero h1 {
  color: #fff; font-size: clamp(32px, 5vw, 62px); font-weight: 800;
  max-width: 18ch; letter-spacing: -0.02em; text-transform: uppercase;
}
.hero .eyebrow { color: var(--light); margin-bottom: 18px; }
.hero .eyebrow::after { display: none; }

/* ---------- Grids & cards ---------- */
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }

.card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display: flex; flex-direction: column;
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--light); }
.card-body { padding: 26px 28px 30px; }
.card-body h3 { margin-bottom: 10px; }
.card-body p { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.card--ruled { border-top: 4px solid var(--light); }

/* Service card art — kept for reuse if images return to the services */
.svc-art { aspect-ratio: 16 / 10; display: grid; place-items: center; border-bottom: 1px solid var(--rule); }
.svc-art svg { width: 56px; height: 56px; color: #fff; }
.svc-art--1 { background: linear-gradient(140deg, var(--tone-0), var(--tone-1)); }
.svc-art--2 { background: linear-gradient(140deg, var(--tone-1), var(--tone-2)); }
.svc-art--3 { background: linear-gradient(140deg, var(--tone-2), var(--tone-3)); }
.svc-art--4 { background: linear-gradient(140deg, var(--tone-3), var(--light)); }

/* ---------- Feature banner ---------- */
.feature-banner {
  border-radius: var(--radius-lg); aspect-ratio: 16 / 5; margin-bottom: 44px;
  background: linear-gradient(120deg, var(--paper-3), var(--light-tint));
  border: 1px solid var(--rule); display: grid; place-items: center; overflow: hidden;
}
.feature-banner svg { width: 76px; height: 76px; color: var(--anchor); opacity: .32; }

/* ---------- Checks / criteria ---------- */
.checks { display: grid; gap: 14px; }
.checks li { display: flex; gap: 13px; align-items: flex-start; font-size: 15.5px; line-height: 1.58; color: var(--ink-2); }
.checks .tick {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: var(--anchor); color: #fff;
  display: grid; place-items: center; margin-top: 2px;
}
.checks .tick svg { width: 12px; height: 12px; }
.section--dark .checks li { color: var(--on-dark-2); }
.section--dark .checks .tick { background: var(--light); color: var(--ink); }

.criteria-panel {
  background: #fff; border: 1px solid var(--rule); border-left: 4px solid var(--anchor);
  border-radius: var(--radius-lg); padding: 34px 36px; box-shadow: var(--shadow);
}
.criteria-panel h3 { margin-bottom: 22px; }

/* ---------- List panels (Fleet Types / Service Offerings) ---------- */
.list-panel {
  background: #fff; border: 1px solid var(--rule); border-top: 4px solid var(--light);
  border-radius: var(--radius-lg); padding: 32px 34px 34px; box-shadow: var(--shadow);
}
.list-panel h3 {
  margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--rule);
  text-transform: uppercase; letter-spacing: .04em; font-size: 17px;
}
.bullets { display: grid; gap: 13px; }
.bullets li { position: relative; padding-left: 24px; font-size: 16.5px; line-height: 1.55; color: var(--ink-2); }
.bullets li::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 2px; background: var(--light);
  border: 1px solid var(--anchor);
}
.bullets li:has(> .tbd-tag)::before { display: none; }
.bullets li:has(> .tbd-tag) { padding-left: 0; }

/* ---------- Statement band (kept for reuse) ---------- */
.statement { background: linear-gradient(100deg, var(--anchor) 0%, var(--tone-3) 100%); color: #fff; padding: 76px 0; text-align: center; }
.statement h2 { color: #fff; font-size: clamp(26px, 3.4vw, 40px); max-width: 24ch; margin: 0 auto; }
.statement p { color: rgba(255,255,255,.92); margin-top: 16px; }

/* ---------- Who we serve ---------- */
.serve { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 2px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; }
.serve-item { background: #fff; padding: 36px 24px; text-align: center; }
.serve-item svg { width: 34px; height: 34px; color: var(--anchor); margin: 0 auto 14px; }
.serve-item h3 { font-size: 16.5px; letter-spacing: .02em; }

/* ---------- Testimonials ---------- */
.quote-card {
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 34px 32px 30px; box-shadow: var(--shadow); position: relative;
  display: flex; flex-direction: column;
}
.quote-mark { font-family: var(--display); font-size: 64px; font-weight: 800; line-height: .8; color: var(--light); margin-bottom: 12px; }
.quote-card blockquote { margin: 0 0 22px; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }
.quote-attrib { margin-top: auto; border-top: 1px solid var(--rule); padding-top: 16px; }
.quote-name { font-family: var(--display); font-weight: 700; font-size: 15.5px; color: var(--ink); }
.quote-role { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
/* Company logo slot. Shows the company name until a logo file is dropped in. */
/* 56px, not smaller — these marks carry a strapline and an illustration that
   turn to mush below about 50px. */
.quote-logo { margin-top: 14px; min-height: 56px; display: flex; align-items: center; }
.quote-logo.has-photo { height: 56px; }
.photo-fallback { font-size: 13.5px; font-weight: 600; color: var(--ink-3); }

/* Footnote marker — scaled down so it doesn't shout at display sizes */
.fn-mark { font-size: .5em; vertical-align: super; line-height: 0; margin-left: .06em; }

/* ---------- Testimonial carousel ---------- */
.carousel { position: relative; }
.carousel-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; gap: 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track:focus-visible { outline: 3px solid var(--anchor); outline-offset: 4px; border-radius: var(--radius-lg); }
.carousel-slide {
  flex: 0 0 100%; min-width: 100%; scroll-snap-align: center;
  display: flex; justify-content: center; padding: 4px 2px 6px;
}
/* a single testimonial gets a comfortable measure rather than the full width */
.carousel-slide .quote-card { max-width: 780px; width: 100%; }
.carousel-slide .quote-card blockquote { font-size: 17.5px; }

.carousel-controls {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px;
}
.carousel-btn {
  width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center;
  background: #fff; color: var(--ink);
  border: 1px solid var(--rule); border-radius: 50%; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.carousel-btn:hover { background: var(--light); border-color: var(--light); color: var(--ink); }
.carousel-btn svg { width: 17px; height: 17px; }

.carousel-dots { display: flex; align-items: center; gap: 9px; }
.carousel-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--grey); border: none;
  transition: background .18s ease, width .18s ease, border-radius .18s ease;
}
.carousel-dot[aria-current="true"] { background: var(--anchor); width: 26px; border-radius: 999px; }

@media (max-width: 620px) {
  .carousel-slide { padding-left: 0; padding-right: 0; }
  .carousel-controls { gap: 14px; }
}

/* ---------- To-be-decided placeholders ---------- */
.tbd { border: 1.5px dashed var(--grey); background: var(--paper-2); box-shadow: none; }
.tbd-tag {
  display: inline-block; font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--anchor);
  background: var(--light-tint); border: 1px solid var(--light);
  border-radius: 999px; padding: 5px 12px;
}

/* ---------- Logo strip (unused; kept for when real marks are cleared) ---------- */
.logostrip { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 14px; margin-top: 26px; }
.logo-slot {
  aspect-ratio: 5 / 2; border: 1.5px dashed var(--grey); border-radius: 10px;
  display: grid; place-items: center; background: #fff;
  font-family: var(--display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; color: var(--ink-3); text-transform: uppercase;
}

/* ---------- Team ---------- */
.team-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 100%; font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius-lg);
  padding: 34px 28px 28px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.team-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--light); }
.team-card:hover .team-more { background: var(--light); border-color: var(--light); }

.team-photo {
  width: 152px; height: 152px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 20px; background: var(--paper-2);
  border: 3px solid var(--light-tint);
  filter: grayscale(1);
}
.team-name {
  font-family: var(--display); font-weight: 700; font-size: clamp(18px, 1.9vw, 22px);
  letter-spacing: -0.02em; color: var(--ink); margin-bottom: 6px;
}
.team-role {
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--anchor);
  margin: 0 0 16px;
}
.team-more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
  font-family: var(--display); font-size: 11.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  border: 1.5px solid var(--grey); border-radius: 999px; padding: 8px 16px;
  transition: background .18s ease, border-color .18s ease;
}
.team-more svg { width: 13px; height: 13px; }

/* ---------- Bio dialog ---------- */
.bio-dialog {
  width: min(600px, calc(100vw - 2 * var(--gutter)));
  border: 1px solid var(--rule); border-top: 5px solid var(--light);
  border-radius: var(--radius-lg); padding: 34px 36px 36px;
  background: #fff; color: var(--ink); box-shadow: var(--shadow-lg);
  position: relative;
}
.bio-dialog::backdrop { background: var(--backdrop); }
.bio-dialog p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.bio-head { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; padding-right: 36px; }
.bio-head h3 { font-size: 23px; margin-bottom: 6px; }
.bio-head .team-role { margin: 0; }
.bio-photo {
  width: 86px; height: 86px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  border: 3px solid var(--light-tint); filter: grayscale(1);
}
.bio-close {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px; display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 50%; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.bio-close:hover { background: var(--light); color: var(--ink); border-color: var(--light); }
.bio-close svg { width: 17px; height: 17px; }
.bio-dialog.is-fallback { display: block; margin: 20px auto 0; position: static; }

/* ---------- Backer (kept for reuse) ---------- */
.backer-stack { max-width: 820px; margin: 0 auto; text-align: center; }
.backer-stack h2 { font-size: clamp(24px, 3vw, 36px); }
.backer-caption { margin-top: 26px; color: var(--on-dark-2); font-size: 15.5px; }
.backer-mark {
  border: 1px solid var(--on-dark-panel-edge); border-radius: var(--radius-lg);
  padding: 40px 56px; text-align: center; background: var(--on-dark-panel);
  display: inline-block;
}
.backer-wordmark { font-family: var(--display); font-weight: 700; font-size: clamp(22px, 3vw, 30px); letter-spacing: .34em; text-transform: uppercase; color: var(--on-dark); }
.backer-rule { height: 2px; background: var(--light); margin: 18px auto; width: 56px; }
.backer-kicker { font-family: var(--display); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--on-dark-2); }

/* ---------- Form ---------- */
.form { display: grid; gap: 20px; }
.field { display: grid; gap: 8px; }
.field label { font-family: var(--display); font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.field input, .field textarea, .field select {
  font-family: var(--body); font-size: 16px; color: var(--ink);
  background: #fff; border: 1.5px solid var(--grey); border-radius: 12px; padding: 14px 16px; width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--anchor); outline: none; box-shadow: 0 0 0 4px var(--glow);
}
.field textarea { min-height: 140px; resize: vertical; }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.form-note {
  background: var(--light-tint); border: 1px solid var(--light);
  border-radius: 12px; padding: 14px 18px; font-size: 14px; color: var(--ink);
}

/* ---------- Footer: brand block + contact form in one dark band ---------- */
.site-footer { background: var(--black); color: var(--on-dark-2); padding: 72px 0 28px; }
.footer-grid {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: 64px; align-items: start;
}
.footer-brand { text-align: center; }
.footer-brand .logo { justify-content: center; }
.footer-brand .logo-img { height: 52px; }
.footer-addr { margin-top: 26px; font-size: 16px; line-height: 1.9; font-weight: 600; color: var(--on-dark); }
/* the global link colour is the dark anchor green — unreadable on this band */
.site-footer a { color: var(--light); }
.site-footer a:hover { color: var(--on-dark); }
.footer-backed { margin-top: 20px; font-size: 13.5px; line-height: 1.6; color: var(--on-dark-2); }

.footer-contact h2 { color: var(--on-dark); margin-bottom: 24px; }
.footer-formnote {
  margin-top: 18px; font-size: 13px; line-height: 1.6; color: var(--on-dark-2);
  border-left: 2px solid var(--light); padding-left: 14px;
}

.form--dark .field input, .form--dark .field textarea {
  background: #fff; border: 1px solid transparent; border-radius: 4px;
  color: var(--ink); padding: 15px 16px;
}
.form--dark .field input::placeholder, .form--dark .field textarea::placeholder { color: #6B6B6B; opacity: 1; }
.form--dark .field input:focus, .form--dark .field textarea:focus {
  border-color: var(--light); box-shadow: 0 0 0 3px var(--glow);
}
.form--dark .field textarea { min-height: 128px; }
.form--dark #form-status { color: var(--light); font-weight: 600; margin-top: 12px; }
.form--dark #form-status.is-error { color: var(--on-dark); }
.btn[disabled] { opacity: .65; cursor: default; transform: none; }

.footer-bottom {
  margin-top: 48px; padding-top: 22px; text-align: center;
  border-top: 1px solid var(--on-dark-hair); font-size: 12.5px;
}

/* Bracketed items still to be filled in */
.placeholder { color: #fff; background: var(--anchor); border-radius: 4px; padding: 0 5px; font-size: .95em; }

/* Visually hidden, still announced by screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Private banner ---------- */
.private-bar {
  background: var(--black); color: #fff;
  font-family: var(--display); font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; text-align: center; padding: 9px var(--gutter);
}
.private-bar strong { color: var(--light); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .grid--4, .serve { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .logostrip { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 880px) {
  .nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav.is-open {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: var(--gutter); right: var(--gutter); top: 74px;
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: 12px; gap: 2px; box-shadow: var(--shadow-lg);
  }
  .nav.is-open a { padding: 13px 14px; }
  .nav.is-open .btn { margin: 8px 0 2px; justify-content: center; }

  .grid--3 { grid-template-columns: minmax(0,1fr); gap: 36px; }
  .footer-grid { grid-template-columns: minmax(0,1fr); gap: 44px; }
  .section { padding: 58px 0; }
  .hero-inner { padding-top: 84px; padding-bottom: 76px; }
  .hero { min-height: 0; }
  .logo-img { height: 28px; }
  .feature-banner { aspect-ratio: 16 / 7; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }
  :root { --gutter: 18px; }
  .grid--2, .grid--4, .serve, .field-row { grid-template-columns: minmax(0,1fr); }
  .logostrip { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .btn { width: 100%; justify-content: center; }
  .card-body { padding: 24px; }
  .criteria-panel { padding: 26px 24px; }
  .logo-img { height: 25px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
  .hero-slide { animation: none; }
  .hero-slide:nth-child(1) { opacity: 1; }
}

/* ==========================================================================
   Print / PDF
   Two things would otherwise be lost on paper: the carousel shows only the
   slide currently scrolled into view, and the team bios live inside closed
   <dialog> elements, so they would not print at all. Both are unpacked here.
   ========================================================================== */
@media print {
  /* keep brand colours — browsers drop backgrounds when printing by default */
  *, *::before, *::after { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .private-bar, .nav, .nav-toggle, .carousel-controls, .team-more, .bio-close { display: none !important; }
  /* keep the logo on the page, but as a plain masthead rather than a sticky bar */
  .site-header { position: static; background: none; backdrop-filter: none; }
  .header-inner { height: auto; padding: 14px 0; justify-content: flex-start; }
  /* empty form fields are no use on paper — the address block carries the contact route */
  .footer-contact { display: none !important; }
  .footer-grid { grid-template-columns: 1fr; gap: 0; }
  body { background: #fff; font-size: 11.5pt; }
  .section { padding: 30px 0; }
  .wrap { max-width: 100%; }

  .hero { min-height: 0; }
  .hero-inner { padding-top: 54px; padding-bottom: 54px; }
  .hero-slide { animation: none; opacity: 1; }
  .hero-slide:not(:first-child) { display: none; }

  /* carousel: lay every testimonial out down the page */
  .carousel-track { display: block; overflow: visible; }
  .carousel-slide { min-width: 0; width: 100%; padding: 0; margin-bottom: 16px; }
  .carousel-slide .quote-card { max-width: 100%; }

  /* bios: closed dialogs become ordinary blocks so the text is on the page */
  .bio-dialog {
    display: block; position: static; width: 100%; max-width: 100%;
    margin: 0 0 14px; box-shadow: none; border-top-width: 3px;
    padding: 20px 22px;
  }
  .bio-dialog::backdrop { display: none; }

  /* sensible breaks */
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .card, .quote-card, .criteria-panel, .list-panel, .team-card, .bio-dialog,
  .serve-item, .feature-banner { break-inside: avoid; page-break-inside: avoid; }
  .site-footer { break-before: auto; }
  a { text-decoration: none; }
}