@charset "utf-8";
/* ==========================================================================
   Tech On Demand — homepage stylesheet
   Self-contained. Does not touch the legacy styles.css used by the other
   four pages, so this file can ship without breaking them.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (self-hosted, latin subset, variable)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family: 'Sora';
  src: url('../fonts/sora-var-latin.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* --------------------------------------------------------------------------
   2. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour — every text/background pair below is checked against WCAG AA.
     Green is the brand's own colour (it's in the logo), so it stays the
     core identity here — just a deep, refined emerald instead of the
     original lime/neon treatment. */
  --ink:          #0B2318;   /* deep forest green — primary dark surface */
  --ink-2:        #123626;   /* elevated dark surface */
  --ink-3:        #1D4B35;   /* hairlines on dark */
  --slate:        #334155;   /* body text on light — 10.4:1 on white */
  --slate-2:      #64748B;   /* secondary text — 4.8:1 on white */
  --surface:      #FFFFFF;
  --surface-alt:  #F1F8F3;   /* faint green tint instead of flat grey — ties section banding to the brand */
  --border:       #E2E8F0;
  --accent:       #0F7A46;   /* refined emerald — CTA fill, 5.4:1 with white text */
  --accent-dark:  #0B5F37;
  --accent-wash:  #EAF7EE;
  --accent-bright:#4ADE80;   /* accent on dark only — 9.5:1 on --ink */
  --signal:       #0E8F6F;   /* secondary accent — icon fills, decorative use only */
  --signal-text:  #0B6E56;   /* same hue, darkened for text use — 6.2:1 on white */
  --signal-wash:  #E9FAF4;
  --signal-bright:#2DD4BF;   /* signal on dark only — 8.9:1 on --ink */
  --star:         #F59E0B;

  /* Fluid type — every step has a rem floor so text can never collapse
     the way the vw-only scale on the old site did. */
  --step--1: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  --step-0:  clamp(1rem,      0.96rem + 0.20vw, 1.125rem);
  --step-1:  clamp(1.125rem,  1.06rem + 0.32vw, 1.3125rem);
  --step-2:  clamp(1.3125rem, 1.19rem + 0.55vw, 1.625rem);
  --step-3:  clamp(1.5rem,    1.30rem + 0.95vw, 2.125rem);
  --step-4:  clamp(1.875rem,  1.53rem + 1.60vw, 2.875rem);
  --step-5:  clamp(2.125rem,  1.55rem + 2.65vw, 3.625rem);

  /* Spacing */
  --gap:      clamp(1rem, 0.8rem + 0.9vw, 1.75rem);
  --section:  clamp(3.5rem, 2.6rem + 4vw, 6.5rem);
  --shell:    1200px;
  --pad:      clamp(1.125rem, 0.8rem + 1.6vw, 2.5rem);

  --radius:    12px;
  --radius-lg: 18px;
  --shadow:    0 1px 2px rgba(11, 35, 24, .05), 0 4px 12px rgba(11, 35, 24, .06);
  --shadow-lg: 0 12px 32px rgba(11, 35, 24, .14);
  --ease:      cubic-bezier(.4, 0, .2, 1);
}

/* --------------------------------------------------------------------------
   3. Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem; /* clears the sticky header on anchor jumps */
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--slate);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: 'Sora', 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-dark); }

img, svg { max-width: 100%; height: auto; display: block; }
ul { margin: 0; padding: 0; }
li { list-style: none; }

/* Visible, high-contrast focus everywhere. The old site set outline:none. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-dark :focus-visible { outline-color: var(--accent-bright); }

.shell {
  width: min(100% - (var(--pad) * 2), var(--shell));
  margin-inline: auto;
}

.section { padding-block: var(--section); }
.section--alt { background: var(--surface-alt); }

/* Prose measure — caps line length so it can't run to 140 characters */
.measure { max-width: 62ch; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { left: 0; color: #fff; }

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

/* --------------------------------------------------------------------------
   4. Section headers
   -------------------------------------------------------------------------- */
.section-head { margin-bottom: clamp(2rem, 1.5rem + 1.6vw, 3.25rem); }
.section-head--center { text-align: center; }
.section-head--center .measure { margin-inline: auto; }

.eyebrow {
  display: inline-block;
  margin-bottom: .75rem;
  font-family: 'Inter', sans-serif;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
}
.on-dark .eyebrow { color: var(--accent-bright); }

.section-head p {
  font-size: var(--step-1);
  color: var(--slate-2);
}
.on-dark .section-head p { color: #C9DDD1; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  padding: .875rem 1.5rem;
  min-height: 48px;              /* comfortable touch target */
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-family: 'Inter', sans-serif;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease),
              color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn svg { flex-shrink: 0; }

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(11, 35, 24, .12);
}
.btn--primary:hover {
  background: var(--accent-dark);
  border-color: var(--accent-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 122, 70, .28);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--ink);
}
.btn--ghost:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
  color: var(--accent-dark);
  transform: translateY(-2px);
}

/* Ghost button sitting on a dark surface */
.on-dark .btn--ghost {
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}
.on-dark .btn--ghost:hover {
  border-color: var(--accent-bright);
  background: rgba(74, 222, 128, .12);
  color: #fff;
}

.btn--sm { padding: .625rem 1.125rem; min-height: 44px; font-size: var(--step--1); }

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

/* --------------------------------------------------------------------------
   6. Utility bar
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: #C9DDD1;
  font-size: var(--step--1);
  border-bottom: 1px solid var(--ink-3);
}
.topbar .shell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .5rem 1.5rem;
  padding-block: .5rem;
}
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.topbar__item svg { color: var(--accent-bright); }
.topbar a { color: #fff; font-weight: 600; text-decoration: none; }
.topbar a:hover { color: var(--accent-bright); text-decoration: underline; }

@media (min-width: 800px) {
  .topbar .shell { justify-content: flex-end; gap: 2rem; }
}

/* --------------------------------------------------------------------------
   7. Header / navigation (sticky — the old nav set top/z-index but no position)

   Solid navy, not a light translucent bar: the brand mark is a glow-effect
   logo (white text + a neon-green power icon) built to sit on a dark
   backdrop. On a white header the white letters disappeared and the glow
   just looked like a rendering glitch. Navy is also what the utility bar
   and footer already use, so the header now reads as part of the same
   frame instead of a mismatched insert.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-3);
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, .25); }

.site-header .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .75rem;
}

.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { width: clamp(150px, 12vw, 200px); height: auto; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded='true'] .icon-open { display: none; }
.nav-toggle[aria-expanded='true'] .icon-close { display: block; }

.nav {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  display: none;
  padding: .5rem var(--pad) 1.5rem;
  background: var(--ink-2);
  border-bottom: 1px solid var(--ink-3);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .35);
}
.nav.is-open { display: block; }

.nav__list { display: flex; flex-direction: column; }
.nav__list a {
  display: block;
  padding: .875rem .25rem;
  border-bottom: 1px solid var(--ink-3);
  color: #DCEEE3;
  font-weight: 600;
  text-decoration: none;
}
.nav__list a:hover { color: var(--accent-bright); }
.nav__list a[aria-current='page'] { color: var(--accent-bright); }
.nav__cta { margin-top: 1.25rem; }
.nav__cta .btn { width: 100%; }

.header__cta { display: none; }

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav {
    position: static;
    display: block;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .nav__list { flex-direction: row; align-items: center; gap: .25rem; }
  .nav__list a {
    position: relative;
    padding: .5rem .875rem;
    border: 0;
    font-size: var(--step--1);
    letter-spacing: .06em;
    text-transform: uppercase;
    border-radius: var(--radius);
  }
  .nav__list a::after {
    content: '';
    position: absolute;
    left: .875rem;
    right: .875rem;
    bottom: .15rem;
    height: 2px;
    background: var(--accent-bright);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s var(--ease);
  }
  .nav__list a:hover::after,
  .nav__list a[aria-current='page']::after { transform: scaleX(1); }
  .nav__cta { display: none; }
  .header__cta { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
/* Lightweight depth: layered CSS gradients instead of a 4.7 MB photograph.
   Blue glow upper-right, teal glow lower-left, plus a soft diagonal beam
   through the middle so the two accent colours actually meet on-screen
   instead of sitting in separate corners. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 65% at 80% 4%, rgba(15, 122, 70, .48), transparent 60%),
    radial-gradient(ellipse 70% 55% at 8% 100%, rgba(14, 143, 111, .30), transparent 62%),
    linear-gradient(115deg, transparent 40%, rgba(74, 222, 128, .10) 52%, transparent 64%);
  pointer-events: none;
}
/* Faint circuit grid, drawn in CSS — zero requests */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 75% 75% at 50% 40%, #000 30%, transparent 80%);
  pointer-events: none;
}
.hero > .shell {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 2.4rem + 5vw, 7rem);
}
.hero h1 { color: #fff; max-width: 18ch; }
.hero__lead {
  max-width: 56ch;
  margin-bottom: 2rem;
  font-size: var(--step-1);
  color: #C9DDD1;
}
.hero .btn-row { margin-bottom: clamp(2.25rem, 1.8rem + 2vw, 3.25rem); }

/* Proof chips */
.proof {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  padding-top: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  border-top: 1px solid var(--ink-3);
}
.proof li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--ink-3);
  border-radius: 100px;
  font-size: var(--step--1);
  font-weight: 500;
  color: #DCEEE3;
}
.proof svg { color: var(--accent-bright); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   9. Trust bar — shown at every breakpoint (the old one was display:none
      below 760px, hiding the brand logos from all mobile visitors)
   -------------------------------------------------------------------------- */
.trust {
  padding-block: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.trust__label {
  margin-bottom: 1.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--slate-2);
  text-align: center;
}
/* The loop is two identical sets that each scroll a full set-width and then
   snap back. Each set is `min-width: 100%`, so the pair always covers at
   least twice the viewport and no blank ever opens at the trailing edge, at
   any window width.

   The previous version put one animation on the whole track and moved it
   -50%. That only lands on the seam if half the track is exactly one set,
   which the flex `gap` breaks (14 logos have 13 gaps between them, not 14),
   so every loop drifted by half a gap; and on wide screens two sets simply
   weren't wide enough to cover the viewport twice, which is what left the
   bar blank near the end of each cycle before it jumped back to the start. */
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  --mq-gap: clamp(2.5rem, 2rem + 3vw, 5rem);
}
.marquee__track { display: flex; flex-wrap: nowrap; }
.marquee__set {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-around;
  gap: var(--mq-gap);
  min-width: 100%;
  padding-inline: calc(var(--mq-gap) / 2);
  animation: marquee 42s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__set,
.marquee:focus-within .marquee__set { animation-play-state: paused; }
.marquee img {
  height: clamp(26px, 2.4vw, 38px);
  width: auto;
  max-width: 150px;
  object-fit: contain;
  /* Normalises seven vendor logos of differing colour and crop into one row */
  filter: grayscale(1);
  opacity: .62;
  transition: filter .25s var(--ease), opacity .25s var(--ease);
}
.marquee img:hover { filter: grayscale(0); opacity: 1; }
/* -100% is one set's own width, so the layout at the end of a cycle is
   pixel-identical to the layout at the start. */
@keyframes marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* --------------------------------------------------------------------------
   10. Services grid
   -------------------------------------------------------------------------- */
.services {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .services { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .services { grid-template-columns: repeat(6, 1fr); }
  /* 3 across, then 2 centred — avoids a lone orphan card */
  .services > li { grid-column: span 2; }
  .services > li:nth-child(4) { grid-column: 2 / span 2; }
  .services > li:nth-child(5) { grid-column: 4 / span 2; }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  padding-top: calc(clamp(1.5rem, 1.2rem + 1vw, 2rem) + 3px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
/* Top accent bar — hidden until hover/focus, colour set per card via
   --card-accent (blue by default, teal on .card--teal). Alternating the
   five service cards between the two accents is what turns "five cards"
   into "five distinct offerings" at a glance. */
.card {
  --card-accent: var(--accent);
  --card-accent-text: var(--accent);
  --card-accent-bright: var(--accent-bright);
  --card-wash: var(--accent-wash);
  --card-wash-border: #DBEAFE;
}
.card--teal {
  --card-accent: var(--signal);
  --card-accent-text: var(--signal-text);
  --card-accent-bright: var(--signal-bright);
  --card-wash: var(--signal-wash);
  --card-wash-border: #CCF3ED;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--card-accent), var(--card-accent-bright));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--ease);
}
.card:hover::before,
.card:focus-within::before { transform: scaleX(1); }
.card:hover {
  transform: translateY(-4px);
  border-color: var(--card-accent);
  box-shadow: var(--shadow-lg);
}
/* The whole card is one link target, but only the title carries the <a>,
   so the accessible name stays clean and the link list stays useful. */
.card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.card:focus-within {
  border-color: var(--card-accent);
  box-shadow: var(--shadow-lg);
}
.card__link { text-decoration: none; color: inherit; }
/* The link keeps its own focus ring from the global :focus-visible rule — that
   indicator must never depend on :has() support. Highlighting the surrounding
   card is a progressive enhancement layered on top of it. */
.card:has(.card__link:focus-visible) {
  border-color: var(--card-accent);
  box-shadow: var(--shadow-lg);
}

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.25rem;
  background: var(--card-wash);
  border: 1px solid var(--card-wash-border);
  border-radius: var(--radius);
  color: var(--card-accent);
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.card:hover .card__icon {
  background: var(--card-accent);
  border-color: var(--card-accent);
  color: #fff;
}
.card h3 { margin-bottom: .625rem; font-size: var(--step-1); }
.card__lead { color: var(--slate-2); font-size: var(--step-0); }

.card__points {
  margin: 1.25rem 0 1.5rem;
  display: grid;
  gap: .5rem;
}
.card__points li {
  position: relative;
  padding-left: 1.625rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--slate);
}
.card__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .48em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--signal);
}

.card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--card-accent-text);
}
.card__more svg { transition: transform .25s var(--ease); }
.card:hover .card__more svg { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   10b. Service detail sections (services.html) — one full section per
   service, same blue/teal alternation as the homepage cards so the two
   pages read as one system.
   -------------------------------------------------------------------------- */
.service-detail {
  --card-accent: var(--accent);
  --card-accent-text: var(--accent);
  --card-wash: var(--accent-wash);
  --card-wash-border: #DBEAFE;
}
.service-detail--teal {
  --card-accent: var(--signal);
  --card-accent-text: var(--signal-text);
  --card-wash: var(--signal-wash);
  --card-wash-border: #CCF3ED;
}
.service-detail__intro {
  max-width: 46rem;
  margin-bottom: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);
}
.service-detail__intro .card__icon {
  background: var(--card-wash);
  border-color: var(--card-wash-border);
  color: var(--card-accent);
  margin-bottom: 1rem;
}
.service-detail__intro .eyebrow { color: var(--card-accent-text); }
.service-detail__intro p { color: var(--slate-2); font-size: var(--step-1); }

.service-detail__grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.spec {
  padding-left: 1.25rem;
  border-left: 3px solid var(--card-wash-border);
  transition: border-color .25s var(--ease);
}
.spec:hover { border-left-color: var(--card-accent); }
.spec h3 {
  margin-bottom: .5rem;
  font-size: var(--step-0);
  color: var(--ink);
}
.spec p { color: var(--slate-2); font-size: var(--step--1); line-height: 1.6; }

.service-detail__intro .card__icon {
  width: 68px;
  height: 68px;
}

.service-detail__cta {
  margin-top: clamp(2.25rem, 1.8rem + 1.6vw, 3.25rem);
  padding-top: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  border-top: 1px solid var(--border);
  text-align: center;
}
.service-detail__cta-link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: var(--step-0);
  font-weight: 600;
  text-decoration: none;
  color: var(--card-accent-text);
}
.service-detail__cta-link svg { transition: transform .25s var(--ease); }
.service-detail__cta-link:hover svg { transform: translateX(4px); }
.service-detail__cta-link:hover { color: var(--card-accent-text); }

/* --------------------------------------------------------------------------
   11. Credentials
   -------------------------------------------------------------------------- */
.credentials {
  position: relative;
  color: #C9DDD1;
  background:
    linear-gradient(135deg, rgba(11, 35, 24, .96), rgba(11, 35, 24, .90) 55%, rgba(11, 35, 24, .97)),
    url('../../images/gallery/20220803_154055.jpg');
  background-size: cover;
  background-position: center 28%;
  isolation: isolate;
}
.credentials h2 { color: #fff; }

.stats {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stat {
  padding: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius-lg);
}
.stat__num {
  display: block;
  margin-bottom: .35rem;
  font-family: 'Sora', sans-serif;
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  color: var(--accent-bright);
  letter-spacing: -0.02em;
}
.stat__label { font-size: var(--step--1); color: #C9DDD1; }

.creds {
  display: flex;
  flex-wrap: wrap;
  gap: .625rem;
  margin-top: var(--gap);
}
.creds li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .875rem;
  background: rgba(74, 222, 128, .08);
  border: 1px solid rgba(74, 222, 128, .25);
  border-radius: 100px;
  font-size: var(--step--1);
  font-weight: 500;
  color: #DCEEE3;
}
.creds svg { color: var(--accent-bright); flex-shrink: 0; }

/* --------------------------------------------------------------------------
   11b. About page — intro row + team grid
   -------------------------------------------------------------------------- */
.about-intro {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .about-intro { grid-template-columns: 1.1fr .9fr; }
}
.about-intro__text p { font-size: var(--step-1); color: var(--slate); }
.about-intro__img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.team-grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.team-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.team-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.team-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.team-card__body { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.team-card__body h3 { margin-bottom: .2rem; }
.team-card__role {
  margin-bottom: .875rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}
.team-card__body p:last-child { color: var(--slate-2); font-size: var(--step--1); line-height: 1.65; }

/* --------------------------------------------------------------------------
   12. Gallery teaser
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  gap: .875rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
.gallery-grid--full { gap: 1rem; }
@media (min-width: 900px) {
  .gallery-grid--full { grid-template-columns: repeat(4, 1fr); }
}
.gallery-grid li { overflow: hidden; border-radius: var(--radius); background: var(--border); }
.gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .4s var(--ease);
}
.gallery-grid a { display: block; }
.gallery-grid--full img:hover { transform: scale(1.05); }
.gallery-grid a:hover img { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   13. Reviews
   -------------------------------------------------------------------------- */
.reviews-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .75rem 1.25rem;
  margin-bottom: clamp(2rem, 1.6rem + 1.4vw, 3rem);
  padding: 1.25rem 1.75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  text-align: center;
}
.reviews-summary__score {
  font-family: 'Sora', sans-serif;
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars svg { width: 18px; height: 18px; }
.reviews-summary__meta { font-size: var(--step--1); color: var(--slate-2); }

/* Single-card carousel: one review at a time, sliding via transform on the
   track. Simpler and more robust across breakpoints than a multi-per-view
   layout, and reads as a proper "featured testimonial" rather than a
   cramped card grid. */
.reviews-carousel {
  max-width: 760px;
  margin-inline: auto;
}
.reviews-carousel__viewport {
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.reviews-carousel__track {
  display: flex;
  transition: transform .45s var(--ease);
}
.reviews-carousel__track > li { flex: 0 0 100%; min-width: 0; }

.review {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  box-sizing: border-box;
}
.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.review__body {
  margin-bottom: 1.5rem;
  color: var(--slate);
  font-size: var(--step-1);
  line-height: 1.6;
}
.review__foot {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.review__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: var(--accent-wash);
  border-radius: 50%;
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--accent);
}
.review__name { font-weight: 600; color: var(--ink); line-height: 1.3; }
.review__date { font-size: var(--step--1); color: var(--slate-2); }

.reviews-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.reviews-carousel__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.reviews-carousel__arrow:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }

.reviews-carousel__dots { display: flex; align-items: center; gap: .5rem; }
.reviews-carousel__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: var(--border);
  cursor: pointer;
  transition: background-color .25s var(--ease), width .25s var(--ease);
}
.reviews-carousel__dots button:hover { background: var(--accent-bright); }
.reviews-carousel__dots button[aria-selected='true'] { width: 22px; background: var(--accent); }

.reviews-cta { margin-top: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); text-align: center; }

/* --------------------------------------------------------------------------
   14. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background:
    radial-gradient(ellipse 60% 90% at 100% 100%, rgba(14, 143, 111, .55), transparent 65%),
    linear-gradient(135deg, var(--accent-dark), var(--accent) 55%, #16A34A);
  color: #fff;
  text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p {
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: 2rem;
  font-size: var(--step-1);
  color: #DDF3E6;
}
.cta-band .btn-row { justify-content: center; }
.cta-band .btn--primary {
  background: #fff;
  border-color: #fff;
  color: var(--accent-dark);
}
.cta-band .btn--primary:hover {
  background: #F1F5F9;
  border-color: #F1F5F9;
  color: var(--accent-dark);
  box-shadow: 0 8px 20px rgba(3, 26, 58, .28);
}
.cta-band .btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.cta-band .btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.cta-band :focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   14b. Contact page — map + hours row, quote form embed
   -------------------------------------------------------------------------- */
.contact-layout {
  display: grid;
  gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) {
  .contact-layout { grid-template-columns: 1.4fr 1fr; }
}
.contact-map {
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  min-height: 320px;
}
.contact-map iframe { width: 100%; height: 100%; min-height: 320px; border: 0; }

.contact-hours {
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.contact-hours h3 { font-size: var(--step-0); margin-bottom: .5rem; }
.contact-hours p { color: var(--slate-2); }
.contact-hours .social a { background: var(--surface-alt); border-color: var(--border); color: var(--ink); }
.contact-hours .social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.quote-form-embed {
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(1rem, .8rem + 1vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.quote-form-embed iframe { display: block; border-radius: var(--radius); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink);
  color: #A9C7B7;
  font-size: var(--step--1);
}
.site-footer__main {
  display: grid;
  gap: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-block: clamp(3rem, 2.4rem + 2.4vw, 4.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .site-footer__main { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .site-footer__main { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }

.site-footer h2 {
  margin-bottom: 1.125rem;
  font-family: 'Inter', sans-serif;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}
.site-footer a { color: #A9C7B7; text-decoration: none; }
.site-footer a:hover { color: var(--accent-bright); text-decoration: underline; }
.site-footer li + li { margin-top: .625rem; }

.footer-brand img { width: 170px; margin-bottom: 1.125rem; }
.footer-brand p { max-width: 34ch; line-height: 1.6; }

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
}
.footer-contact svg { flex-shrink: 0; margin-top: .3em; color: var(--accent-bright); }
.footer-contact a[href^='tel:'] {
  font-family: 'Sora', sans-serif;
  font-size: var(--step-1);
  font-weight: 600;
  color: #fff;
}

.social {
  display: flex;
  gap: .625rem;
  margin-top: 1.25rem;
}
.social li + li { margin-top: 0; }
.social a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: var(--radius);
  color: #C9DDD1;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
/* Same-weight inline SVG glyphs, not raster logos — the source PNGs mixed a
   full-colour Facebook badge with two flat white glyphs, so the row never
   sat at a consistent visual weight no matter how precisely it was aligned. */
.social a svg { display: block; }
.social a:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); }

.site-footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--ink-3);
}
.site-footer__bar p { margin: 0; }
/* The Hewcor link sits inline inside the copyright line, where it inherits the
   same muted colour as the text around it. Without an underline there is
   nothing to show it's a link at all. */
.site-footer__bar p a {
  text-decoration: underline;
  text-underline-offset: .2em;
  text-decoration-thickness: 1px;
}
.site-footer__bar p a:hover { color: var(--accent-bright); }
.site-footer__bar ul { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-footer__bar li + li { margin-top: 0; }

/* --------------------------------------------------------------------------
   16. Legal copy (Privacy Policy)
   Plain long-form text. h2 is sized down from the site-wide --step-4 (meant
   for one big section title) to something that reads as a subheading in a
   page that's mostly paragraphs.
   -------------------------------------------------------------------------- */
.legal-copy h2 {
  font-size: var(--step-1);
  margin-top: 2.25rem;
  margin-bottom: .5rem;
}
.legal-copy h2:first-of-type { margin-top: 0; }
.legal-copy p, .legal-copy ul { color: var(--slate); line-height: 1.7; }
.legal-copy ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.legal-copy li { list-style: disc; margin-bottom: .375rem; }
.legal-copy a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: .15em; }
.legal-copy a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   17. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Static, scroll-it-yourself. The duplicate set is redundant once nothing
     is moving, so it's hidden rather than shown twice. */
  .marquee__set { animation: none; min-width: 0; justify-content: flex-start; }
  .marquee__set + .marquee__set { display: none; }
  .marquee { mask-image: none; overflow-x: auto; }
}