/* ==========================================================================
   Talking Tails Dog Training — core stylesheet
   Palette (sampled from talkingtails_logo.png): ember #f26224  ·  ink #0f1d2b
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
:root {
  --ink:        #0f1d2b;   /* sampled from the logo wordmark */
  --ink-soft:   #1b2f42;
  --ink-tint:   rgba(15, 29, 43, 0.62);
  --ink-faint:  rgba(15, 29, 43, 0.10);

  --ember:      #f26224;   /* sampled from the logo "TAILS" */
  --ember-deep: #c2450f;   /* darker step for links, hovers and small text */
  --ember-tint: rgba(242, 98, 36, 0.10);
  --ember-lift: #f0a077;          /* orange that holds up on the ink backgrounds */

  --cream:      #fbf8f5;
  --sand:       #f2ece5;
  --paper:      #ffffff;

  --line:       rgba(15, 29, 43, 0.12);
  --line-light: rgba(251, 248, 245, 0.18);

  --display: "Karla", Arial, "Helvetica Neue", Helvetica, sans-serif;  /* the logo's "Talking" tier */
  --accent:  "Geo", "Trebuchet MS", Arial, sans-serif;                 /* the logo's "TAILS" tier */
  --body:    "Karla", Arial, "Helvetica Neue", Helvetica, sans-serif;

  --masthead: 108px;       /* tall enough for the stacked logo lockup */
  --shell:   min(1180px, 100% - 3rem);
  --radius:  4px;
  --radius-lg: 18px;

  --gap:     clamp(1.5rem, 3vw, 2.5rem);
  --section: clamp(5rem, 11vw, 9.5rem);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;            /* contains the decorative arcs without killing sticky */
  scroll-padding-top: calc(var(--masthead) + 1.25rem);  /* anchor links clear the sticky masthead */
}
body, h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { list-style: none; padding: 0; }   /* no default markers anywhere in this design */
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-size: clamp(1.02rem, 0.98rem + 0.2vw, 1.13rem);
  line-height: 1.68;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Paper grain — keeps flat colour from feeling like a template */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
}

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4, .display {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--ink);
}

/* The emphasised phrase in a heading takes the logo's "TAILS" treatment:
   the squared face, in orange, against the plain navy of the rest. */
.wonk {
  font-family: var(--accent);
  font-weight: 400;            /* Geo ships a single weight — no synthetic bolding */
  font-style: normal;
  color: var(--ember);
  letter-spacing: 0.005em;
}

h1 { font-size: clamp(2.5rem, 1.5rem + 4.1vw, 4.35rem); }
h2 { font-size: clamp(2rem, 1.35rem + 2.5vw, 3.1rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); letter-spacing: -0.012em; }
h4 { font-size: 1.1rem; letter-spacing: -0.005em; }

.eyebrow {
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ember);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1.6rem;
}
.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--ember);
  flex: none;
}
.eyebrow--center { justify-content: center; }

.lede {
  font-size: clamp(1.14rem, 1.05rem + 0.4vw, 1.34rem);
  line-height: 1.62;
  color: var(--ink-tint);
}

a { color: inherit; }
p a { color: var(--ember-deep); text-underline-offset: 3px; text-decoration-thickness: 1px; }
p a:hover { color: var(--ink); }

strong { font-weight: 700; }

/* --- Layout helpers ----------------------------------------------------- */
.shell { width: var(--shell); margin-inline: auto; }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(3.5rem, 7vw, 6rem); }
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.center { text-align: center; margin-inline: auto; }
.stack > * + * { margin-top: 1.15rem; }
.spacer-sm { height: 2rem; }
.spacer { height: clamp(2.5rem, 5vw, 4.5rem); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.split--lead { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
/* Embed pages: the hosted frames need the width more than the copy does. */
.split--embed {
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
}
.split--sticky > :first-child { position: sticky; top: calc(var(--masthead) + 1.5rem); }

.dark {
  background: var(--ink);
  color: var(--cream);
}
.dark .lede, .dark .muted { color: rgba(251, 248, 245, 0.68); }
.dark h1, .dark h2, .dark h3, .dark h4, .dark .display { color: var(--cream); }
.dark .wonk { color: var(--ember-lift); }
.dark .eyebrow { color: #f0a077; }
.dark .eyebrow::before { background: #f0a077; }

.muted { color: var(--ink-tint); }

/* --- Buttons ------------------------------------------------------------ */
.btn {
  --btn-bg: var(--ember);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1.02rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.35s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.btn:hover { background: var(--ember-deep); border-color: var(--ember-deep); transform: translateY(-2px); }
.btn svg { flex: none; transition: transform 0.35s var(--ease); }
.btn:hover svg { transform: translateX(4px); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.dark .btn--ghost { --btn-fg: var(--cream); border-color: var(--line-light); }
.dark .btn--ghost:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }

.btn-row { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; }

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ember-deep);
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ember-tint);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.textlink:hover { border-color: var(--ember); color: var(--ink); }

/* --- Header ------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 248, 245, 0.86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.masthead.is-stuck { border-bottom-color: var(--line); }
.masthead__inner {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--masthead);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--ink);
}
.brand__logo {
  height: 84px;
  width: auto;
  flex: none;
  transition: transform 0.4s var(--ease);
}
.brand:hover .brand__logo { transform: scale(1.03); }

.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding-block: 0.35rem;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1.5px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--ember-deep); }

/* About dropdown. The trigger stays a plain link — the chevron beside it is a
   disclosure button, so the parent page is still reachable in one tap. */
.nav__group { position: relative; display: flex; align-items: center; gap: 0.3rem; }
.nav__group.is-current > .nav__link { color: var(--ember-deep); }

.nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-tint);
  cursor: pointer;
}
.nav__toggle svg { transition: transform 0.3s var(--ease); }
.nav__group:hover .nav__toggle, .nav__group.is-open .nav__toggle { color: var(--ember-deep); }

.nav__menu a { text-decoration: none; }

@media (min-width: 861px) {
  .nav__group.is-current > .nav__link::after { transform: scaleX(1); transform-origin: left; }

  .nav__menu {
    position: absolute;
    top: 100%; left: -0.75rem;
    display: grid;
    min-width: 190px;
    margin-top: 0.85rem;
    padding: 0.5rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 26px 44px -30px rgba(15, 29, 43, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
  }
  /* Bridges the gap under the trigger so the pointer never crosses dead space. */
  .nav__menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -0.85rem; height: 0.85rem;
  }
  .nav__group:hover .nav__menu,
  .nav__group:focus-within .nav__menu,
  .nav__group.is-open .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__group:hover .nav__toggle svg,
  .nav__group:focus-within .nav__toggle svg,
  .nav__group.is-open .nav__toggle svg { transform: rotate(180deg); }

  .nav__menu a { padding: 0.5rem 0.7rem; border-radius: 3px; }
  .nav__menu a::after { display: none; }
  .nav__menu a:hover { background: var(--ember-tint); color: var(--ember-deep); }
}

.masthead__cta { display: flex; align-items: center; gap: 1.25rem; }
.phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
}
.phone-link:hover { color: var(--ember-deep); }

.burger {
  display: none;
  width: 46px; height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  position: relative;
}
.burger span {
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease), opacity 0.2s linear;
}
.burger span:first-child { transform: translate(-50%, calc(-50% - 5px)); }
.burger span:last-child  { transform: translate(-50%, calc(-50% + 5px)); }
.burger[aria-expanded="true"] span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* --- Hero --------------------------------------------------------------- */
.hero {
  position: relative;
  background: radial-gradient(52% 78% at 86% 2%, rgba(242, 98, 36, 0.17), rgba(242, 98, 36, 0) 62%);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 8vw, 7rem);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: end;
}
.hero h1 { margin-bottom: 1.8rem; }
.hero .lede { max-width: 44ch; }

.hero__aside {
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 3vw, 2.75rem);
  padding-bottom: 0.5rem;
}
.hero__stat + .hero__stat { margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
.hero__stat b {
  font-family: var(--accent);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.9rem);
  font-weight: 400;
  display: block;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--ember);
}
.hero__stat span { display: block; margin-top: 0.55rem; font-size: 0.88rem; color: var(--ink-tint); }

/* Photo hero — everything below is scoped to .hero--photo so the plain .hero
   above still works and this treatment can be lifted out in one piece. */
.hero--photo {
  background: var(--ink);
  min-height: min(76vh, 700px);
  display: grid;
  align-items: center;
  padding-top: clamp(4rem, 8vw, 7rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;   /* keeps the dog and the horizon in frame as the box gets shorter */
  z-index: 0;
}
/* Scrim: heavy on the left where the copy sits, clearing by the middle so the
   dog stays in open light. The second layer lifts the whole base a touch so
   the stat row at the bottom holds up too. */
.hero--photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(94deg, rgba(15, 29, 43, 0.94) 0%, rgba(15, 29, 43, 0.86) 30%,
                           rgba(15, 29, 43, 0.55) 52%, rgba(15, 29, 43, 0.22) 74%,
                           rgba(15, 29, 43, 0.12) 100%),
    linear-gradient(to top, rgba(15, 29, 43, 0.55), rgba(15, 29, 43, 0) 42%);
  z-index: 1;                 /* the img follows this pseudo-element in the DOM, so it needs saying */
}
.hero--photo > .shell { position: relative; z-index: 2; }   /* sit above the image and scrim */
.hero--photo .hero__grid { align-items: center; }

.hero--photo h1 { color: #fff; }
.hero--photo .wonk { color: var(--ember-lift); }   /* ember proper goes muddy over the photo */
.hero--photo .eyebrow { color: var(--ember-lift); }
.hero--photo .eyebrow::before { background: var(--ember-lift); }
.hero--photo .lede { color: rgba(251, 248, 245, 0.9); }

.hero--photo .btn--ghost {
  --btn-fg: #fff;
  border-color: rgba(255, 255, 255, 0.5);
  background: transparent;
}
.hero--photo .btn--ghost:hover {
  background: #fff;
  color: var(--ember-deep);
  border-color: #fff;
}

/* The stats sit over the bright half of the meadow, so they get their own
   surface rather than a scrim strong enough to flatten the whole photo. */
.hero--photo .hero__aside {
  border: 1px solid rgba(251, 248, 245, 0.2);
  border-radius: var(--radius-lg);
  background: rgba(15, 29, 43, 0.62);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  padding: clamp(1.6rem, 2.4vw, 2.1rem);
}
.hero--photo .hero__stat + .hero__stat { border-top-color: rgba(251, 248, 245, 0.28); }
.hero--photo .hero__stat b { color: var(--ember-lift); }
.hero--photo .hero__stat span { color: rgba(251, 248, 245, 0.82); }


/* Ribbon of credentials under the hero */
.ribbon {
  border-block: 1px solid var(--line);
  background: var(--sand);
}
.ribbon__inner {
  width: var(--shell);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  justify-content: space-between;
  padding-block: 1.35rem;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-tint);
}
.ribbon__inner span { display: inline-flex; align-items: center; gap: 0.6rem; }
.ribbon__inner span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ember);
  flex: none;
}

/* --- Cards -------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--gap);
}
.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: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  --card-pad: clamp(1.75rem, 3vw, 2.4rem);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease), border-color 0.45s var(--ease);
}
.card::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 3px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.card:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: 0 26px 50px -30px rgba(15, 29, 43, 0.45);
}
.card:hover::after { transform: scaleX(1); }
.card h3 { margin-bottom: 0.85rem; }
.card p { color: var(--ink-tint); font-size: 0.99rem; }
.card__index {
  font-family: var(--accent);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ember);
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
}
.card__icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--ember-tint);
  color: var(--ember-deep);
  display: grid;
  place-items: center;
  margin-bottom: 1.5rem;
}
.card__link { margin-top: auto; padding-top: 1.6rem; }

.dark .card {
  background: var(--ink-soft);
  border-color: var(--line-light);
}
.dark .card p { color: rgba(251, 248, 245, 0.66); }
.dark .card:hover { box-shadow: 0 26px 50px -30px rgba(0, 0, 0, 0.8); border-color: var(--line-light); }

/* Feature card — larger, editorial */
.feature {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 4vw, 3.25rem);
  display: grid;
  grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.feature + .feature { margin-top: var(--gap); }
.feature__label {
  font-family: var(--display);
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.018em;
}
.feature__label small {
  display: block;
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.9rem;
}
.feature ul { margin-top: 1.4rem; display: grid; gap: 0.6rem; }
.feature li { position: relative; padding-left: 1.6rem; font-size: 0.97rem; color: var(--ink-tint); }
.feature li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.66em;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--ember);
}

/* --- Steps -------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 0; }
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.75rem, 3vw, 2.6rem);
  border-top: 1px solid var(--line-light);
  align-items: baseline;
}
.step:last-child { border-bottom: 1px solid var(--line-light); }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--accent);
  font-size: 1.05rem;
  color: #f0a077;
  letter-spacing: 0.1em;
}
.step h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem); }
.step p { color: rgba(251, 248, 245, 0.68); font-size: 1rem; }

/* --- Behaviour chips ---------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.chip {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 999px;
  padding: 0.6rem 1.15rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.chip:hover { background: var(--ember); border-color: var(--ember); color: #fff; transform: translateY(-2px); }

/* --- Quotes ------------------------------------------------------------- */
.quote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.85rem, 3vw, 2.6rem);
  display: flex;
  flex-direction: column;
}
.quote p {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: -0.008em;
}
.quote footer {
  margin-top: auto;
  padding-top: 1.8rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-tint);
}
.quote__mark {
  font-family: var(--accent);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--ember);
  margin-bottom: 1.1rem;
  display: block;
}

/* --- Callout band ------------------------------------------------------- */
.band {
  background: var(--ember);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(2.5rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: center;
  position: relative;
  overflow: hidden;
}
.band::before {
  content: "";
  position: absolute;
  right: -6%;
  bottom: -60%;
  width: 34rem; height: 34rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
}
.band > * { position: relative; }
.band h2 { max-width: 20ch; color: #fff; }
.band .wonk { color: var(--ink); }   /* orange on orange would vanish */
.band p { color: rgba(255, 255, 255, 0.85); max-width: 46ch; margin-top: 1.1rem; }
.band .btn { --btn-bg: var(--ink); border-color: var(--ink); }
.band .btn:hover { --btn-bg: #071018; border-color: #071018; }
.band .btn--ghost { --btn-bg: transparent; --btn-fg: #fff; border-color: rgba(255,255,255,0.45); }
.band .btn--ghost:hover { background: #fff; color: var(--ember-deep); border-color: #fff; }

/* --- Page header (interior pages) --------------------------------------- */
.pagehead {
  background: radial-gradient(58% 105% at 88% -8%, rgba(242, 98, 36, 0.16), rgba(242, 98, 36, 0) 64%);
  padding-top: clamp(3rem, 6vw, 5.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
  position: relative;
}
.pagehead h1 { max-width: 16ch; }
.pagehead .lede { max-width: 54ch; margin-top: 1.75rem; }
.crumb {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-tint);
  margin-bottom: 1.5rem;
}
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--ember-deep); }

/* --- Portrait / illustration frames ------------------------------------- */
.frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-soft) 100%);
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  padding: 2rem;
}
.frame--wide { aspect-ratio: 16 / 10; }
.frame__glow {
  position: absolute;
  inset: auto -20% -30% -20%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(242, 98, 36, 0.35), transparent 70%);
}
.frame svg { position: relative; width: min(78%, 320px); height: auto; color: rgba(251, 248, 245, 0.9); }
.frame__caption {
  position: absolute;
  left: 1.5rem; bottom: 1.5rem;
  right: 1.5rem;
  color: rgba(251, 248, 245, 0.7);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --- Photography -------------------------------------------------------- */
/* .photo is the real-image counterpart to .frame above: same corner radius,
   same fixed ratio, image cropped to fill so a mixed bag of source aspect
   ratios still lines up on a grid. */
.photo {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sand);
  aspect-ratio: 4 / 5;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo--wide   { aspect-ratio: 16 / 10; }
.photo--square { aspect-ratio: 1 / 1; }
.photo--tall   { aspect-ratio: 3 / 4; }

/* Caption sits on a scrim so it stays readable over any photo. */
.photo__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3.5rem 1.5rem 1.35rem;
  background: linear-gradient(to top, rgba(15, 29, 43, 0.78), rgba(15, 29, 43, 0));
  color: rgba(251, 248, 245, 0.88);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A photo that arrives with its own border/matte baked into the file needs no
   frame of ours — just size it and let the transparency show through. */
.photo-plain {
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Photo lid on a .card. Bleeds to the card edge by cancelling the card's
   padding, so it needs .card's own padding value as a variable. */
.card__photo {
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--sand);
}
.card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.card:hover .card__photo img { transform: scale(1.05); }

/* Photo in the narrow label column of a .feature block. */
.feature__photo {
  margin-top: 1.75rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--sand);
}
.feature__photo img { width: 100%; height: 100%; object-fit: cover; }

/* --- Video cards -------------------------------------------------------- */
.video {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.video:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(15, 29, 43, 0.45); }
.video__thumb {
  aspect-ratio: 16 / 9;
  background: linear-gradient(150deg, var(--ink) 0%, var(--ink-soft) 100%);
  display: grid;
  place-items: center;
  position: relative;
}
.video__thumb::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 80%;
  background: radial-gradient(ellipse at center, rgba(242, 98, 36, 0.3), transparent 70%);
}
.video__play {
  position: relative;
  z-index: 1;
  width: 66px; height: 66px;
  border-radius: 50%;
  background: var(--ember);
  color: #fff;
  display: grid;
  place-items: center;
  transition: transform 0.4s var(--ease);
}
.video:hover .video__play { transform: scale(1.09); }
.video__body { padding: 1.5rem 1.6rem 1.8rem; }
.video__body h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.video__body p { font-size: 0.94rem; color: var(--ink-tint); }
.video__meta {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 0.9rem;
}

/* --- YouTube channel panel ---------------------------------------------- */
.ytpanel {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
  padding: clamp(2.4rem, 6vw, 4.5rem) clamp(1.4rem, 5vw, 4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
}
.ytpanel__logo { display: block; width: min(440px, 100%); }
/* Explicit ratio + auto height: the logo scales, it never stretches. */
.ytpanel__logo img {
  width: 100%;
  height: auto;
  aspect-ratio: 3303 / 1947;
  object-fit: contain;
  transition: transform 0.45s var(--ease);
}
.ytpanel__logo:hover img { transform: scale(1.03); }
.ytpanel h2 { max-width: 20ch; }
.ytpanel .lede { max-width: 52ch; }
.btn--yt { --btn-bg: #ff0000; --btn-fg: #fff; border-color: #ff0000; }
.btn--yt:hover { background: #cc0000; border-color: #cc0000; }
.dark .ytpanel { background: rgba(255, 255, 255, 0.04); border-color: var(--line-light); }

/* --- Forms -------------------------------------------------------------- */
.form {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 3rem);
}
.field { margin-bottom: 1.4rem; }
.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-tint);
  margin-bottom: 0.6rem;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 0.95rem 1.1rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 1rem;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  background: var(--paper);
  border-color: var(--ember);
  box-shadow: 0 0 0 4px var(--ember-tint);
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
.form__note { font-size: 0.85rem; color: var(--ink-tint); margin-top: 1.2rem; }

/* --- Hosted embeds (forms & surveys) ------------------------------------ */
.embed {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(0.75rem, 1.5vw, 1.25rem);
  overflow: hidden;
}
/* 25px dark surround for the hosted contact-form frames. The padding lives on
   this wrapper rather than the frame itself: form_embed.js writes an explicit
   pixel height onto the iframe, and under border-box that padding would eat
   into the form's own scroll area. */
.embed__frame-pad {
  background: #231F20;
  padding: 25px;
  border-radius: var(--radius);
}
.embed__frame {
  display: block;
  /* Each frame also carries an explicit width="100%" / inline width in the
     markup. form_embed.js overwrites that inline width (and can stamp a
     min/max-width) with the form's own configured size once the form reports
     it, so all three are !important here to keep the frame filling the card.
     min-width outranks max-width in CSS, which covers the max-width case. */
  width: 100% !important;
  min-width: 100% !important;
  max-width: none !important;
  border: 0;
  border-radius: var(--radius);
}
/* form_embed.js sets the real height once the frame reports it — these keep
   the layout from collapsing in the meantime. */
.embed--form .embed__frame { min-height: 808px; }
.embed--survey .embed__frame { min-height: 640px; }
.embed__note { font-size: 0.85rem; color: var(--ink-tint); margin-top: 1.2rem; }
.embed__fallback {
  font-size: 0.9rem;
  color: var(--ink-tint);
  margin-top: 1.2rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  .embed { padding: 0.5rem; }
}

/* --- Third-party review widget ------------------------------------------ */
/* Trustindex on reviews.html. The widget arrives fully styled by its own
   stylesheet and is cross-origin, so nothing here reaches inside it; all this
   wrapper does is hold a block of space open until the widget lands, so the
   sections below it don't jump down the page when it does.

   The reservation gives itself back the moment anything is injected into the
   wrapper, which is why it reads ":not(script)" rather than a Trustindex class
   name: the loader's own <script> is the wrapper's only child until the widget
   exists, and matching on structure instead of on their markup means a rename
   on their side can't strand an empty 440px gap here. Browsers without :has()
   keep the reservation, which costs whitespace at worst. Tune the one number
   if the real widget settles much taller or shorter. */
.ti-wrap { min-height: 440px; }
.ti-wrap:has(> :not(script)) { min-height: 0; }

/* --- Details / FAQ ------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding-block: 1.5rem;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2rem;
  font-family: var(--display);
  font-size: clamp(1.12rem, 1rem + 0.5vw, 1.38rem);
  font-weight: 700;
  letter-spacing: -0.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--ember);
  font-size: 1.4rem;
  line-height: 1;
  flex: none;
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin-top: 1rem; color: var(--ink-tint); max-width: 68ch; }

/* --- Info list ---------------------------------------------------------- */
.info { display: grid; gap: 0; }
.info__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.5rem;
  padding-block: 1.35rem;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.info__row:first-child { border-top: 1px solid var(--line); }
.info__row dt {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-tint);
}
.info__row dd { margin: 0; font-size: 1.05rem; }
.info__row dd a { text-decoration: none; font-weight: 600; }
.info__row dd a:hover { color: var(--ember-deep); }

/* --- Legal pages -------------------------------------------------------- */
/* Long-form prose (terms.html): the one place on the site that needs list
   markers and a heading rhythm tighter than the marketing sections use. */
.legal h2 {
  font-size: clamp(1.2rem, 1.06rem + 0.5vw, 1.5rem);
  margin-top: 3.25rem;
  padding-top: 2.25rem;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--masthead) + 1.5rem);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal p { color: var(--ink-tint); }
.legal ul { list-style: disc; padding-left: 1.2rem; color: var(--ink-tint); }
.legal li + li { margin-top: 0.6rem; }
.legal li::marker { color: var(--ember); }

/* Section index that sits beside the terms (sticky above 1000px) */
.toc { display: grid; gap: 0.75rem; }
.toc a {
  text-decoration: none;
  font-size: 0.93rem;
  color: var(--ink-tint);
  transition: color 0.3s var(--ease);
}
.toc a:hover { color: var(--ember-deep); }

/* --- Footer ------------------------------------------------------------- */
.footer { background: var(--ink); color: var(--cream); padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 0.9fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line-light);
}
.footer .brand { color: var(--cream); }
.footer .brand__logo { height: 108px; }
.footer h4 {
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f0a077;
  margin-bottom: 1.35rem;
}
.footer ul { display: grid; gap: 0.7rem; }
.footer a { text-decoration: none; color: rgba(251, 248, 245, 0.75); font-size: 0.95rem; }
.footer a:hover { color: #fff; }
.footer p { color: rgba(251, 248, 245, 0.68); font-size: 0.95rem; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  padding-top: 2rem;
  font-size: 0.83rem;
  color: rgba(251, 248, 245, 0.5);
}
.footer__bottom a { font-size: inherit; color: inherit; text-decoration: none; }
.footer__bottom a:hover { color: #fff; }

.footer__subscribe {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
  align-items: center;
  justify-content: space-between;
  padding-block: clamp(2rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--line-light);
}
.footer__subscribe h4 { margin-bottom: 0; }
.footer__subscribe p { max-width: 56ch; margin-top: 0.55rem; }
.footer__subscribe .btn { --btn-bg: var(--ember); border-color: var(--ember); }

/* --- Newsletter dialog -------------------------------------------------- */
.modal {
  width: min(680px, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  color: var(--ink);
}
.modal::backdrop { background: rgba(15, 29, 43, 0.6); }
/* Fallback for browsers without showModal(): the [open] attribute alone
   leaves the dialog in flow, so centre it by hand. */
.modal[open]:not(:modal) {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
  box-shadow: 0 40px 80px -40px rgba(15, 29, 43, 0.55);
}
.modal__head { display: flex; gap: 1.5rem; align-items: flex-start; justify-content: space-between; }
.modal__head p { color: var(--ink-tint); font-size: 0.95rem; margin-top: 0.5rem; }
.modal__close {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.25s var(--ease), color 0.25s var(--ease);
}
.modal__close:hover { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.modal .embed__frame { min-height: 400px; margin-top: 1.25rem; }

/* --- Reveal animation --------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.reveal.is-in { opacity: 1; transform: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero .rise { animation: rise 0.95s var(--ease) both; animation-delay: var(--delay, 0ms); }

/* --- Skip link ---------------------------------------------------------- */
.skip {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  text-decoration: none;
  transition: top 0.25s var(--ease);
}
.skip:focus { top: 1rem; }

:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 3px; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 1180px) {
  /* The nav, a logo and the CTA block only just fit at this width — close the
     gaps rather than let the nav push the phone number off-screen. */
  .nav { gap: 1.25rem; }
  .nav a { font-size: 0.88rem; }
  .masthead__cta { gap: 0.9rem; }
}

@media (max-width: 1000px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero__aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .hero__stat + .hero__stat { margin-top: 0; padding-top: 0; border-top: 0; }
  .split, .split--lead, .split--embed { grid-template-columns: 1fr; }
  .split--sticky > :first-child { position: static; }
  .band { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav {
    position: fixed;
    inset: var(--masthead) 0 auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    padding: 1rem 1.5rem 2rem;
    transform: translateY(-120%);
    transition: transform 0.45s var(--ease);
    box-shadow: 0 24px 40px -30px rgba(15, 29, 43, 0.5);
  }
  .nav.is-open { transform: none; }
  .nav a { width: 100%; padding-block: 0.95rem; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
  .nav a::after { display: none; }

  .nav__group { flex-wrap: wrap; width: 100%; gap: 0; }
  .nav__group > .nav__link { flex: 1; width: auto; }
  .nav__toggle {
    width: 3rem;
    height: auto;
    align-self: stretch;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav__toggle svg { width: 14px; height: 14px; }
  .nav__group.is-open .nav__toggle svg { transform: rotate(180deg); }

  .nav__menu { display: none; flex-basis: 100%; padding: 0.35rem 0 0.75rem 1rem; }
  .nav__group.is-open .nav__menu { display: grid; }
  .nav__menu a {
    padding-block: 0.6rem;
    border-bottom: 0;
    font-size: 1rem;
    color: var(--ink-tint);
  }
  .nav__menu a[aria-current="page"] { color: var(--ember-deep); }
  .burger { display: block; }
  .masthead__cta .phone-link span { display: none; }
  .masthead__cta .btn { display: none; }
  .feature { grid-template-columns: 1fr; }
  .feature__photo { max-width: 420px; }
  .step { grid-template-columns: 3rem minmax(0, 1fr); }
  .step p { grid-column: 2; }
  :root { --masthead: 88px; }
  .brand__logo { height: 64px; }
}

@media (max-width: 620px) {
  :root { --shell: min(1180px, 100% - 2.25rem); }
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .hero__aside { grid-template-columns: 1fr; }
  .info__row { grid-template-columns: 1fr; gap: 0.35rem; }
  .btn { width: 100%; justify-content: center; }
  .btn-row { gap: 0.7rem; }
  :root { --masthead: 78px; }
  .brand__logo { height: 54px; }
  .footer .brand__logo { height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .masthead, .footer, .band { display: none; }
  body { background: #fff; }
  body::before { display: none; }
}

/* --- Benefit list (homepage evaluation block) ---------------------------- */
.benefits { display: grid; gap: 1.1rem; }
.benefits li {
  display: grid;
  grid-template-columns: 1.55rem 1fr;
  gap: 0.85rem;
  align-items: start;
}
.benefits svg { color: var(--ember); margin-top: 0.32rem; }
.benefits b { display: block; font-weight: 700; letter-spacing: -0.005em; color: var(--ink); font-size: 1rem; }
.benefits span { color: var(--ink-tint); font-size: 0.96rem; line-height: 1.55; }

/* --- Trust badges -------------------------------------------------------- */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-top: 1.1rem;
}
.badges li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tint);
}
.badges svg { color: var(--ember); }

/* --- Reviews ------------------------------------------------------------- */
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem 0.9rem;
  margin-top: 1.4rem;
}
.stars { color: var(--ember); letter-spacing: 0.16em; font-size: 1.05rem; }
.rating__text { font-weight: 700; font-size: 0.92rem; }
.review {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: 1.7rem 1.6rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.review:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(15, 29, 43, 0.45); }
.review__head { display: flex; align-items: center; gap: 0.85rem; }
.review__avatar {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--ember);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--accent);
  font-size: 1.15rem;
}
.review__name { font-weight: 700; line-height: 1.25; }
.review__src { font-size: 0.78rem; color: var(--ink-tint); }
.review p { font-size: 0.97rem; }
.review__verified {
  margin-top: auto;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-tint);
}

/* --- Service areas ------------------------------------------------------- */
.areas { display: grid; gap: var(--gap); grid-template-columns: repeat(3, 1fr); }
.areas h4 {
  font-family: var(--body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 1rem;
}
.areas ul { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.areas li {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.32rem 0.85rem;
  font-size: 0.88rem;
  background: var(--paper);
}

/* --- Stat row ------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  border-top: 1px solid var(--line);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.stats b {
  display: block;
  font-family: var(--accent);
  font-weight: 400;
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 3.4rem);
  line-height: 1;
  color: var(--ember);
  letter-spacing: 0.005em;
}
.stats span {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-tint);
}

@media (max-width: 860px) {
  .areas { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* --- Team roster (trainers page) ----------------------------------------- */
.people { display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.person {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.person:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(15, 29, 43, 0.45); }
.person__photo {
  position: relative;
  /* The source photos are landscape. A portrait window has to zoom ~2x into
     them to fill, which crops heads and reads as a stretched photo, so the tile
     matches the source shape and object-position lifts the crop to face level. */
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--ink) 0%, var(--ink-soft) 100%);
  color: rgba(251, 248, 245, 0.9);
}
.person__photo svg { width: min(46%, 130px); height: auto; }
/* Real headshot in place of the paw placeholder: fills the tile and drops the
   decorative gradient so nothing tints the photo. */
.person__photo--img { background: var(--sand); }
.person__photo--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
  display: block;
}
.person__photo--img::after { display: none; }
.person__photo::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% -20%;
  height: 70%;
  background: radial-gradient(closest-side, var(--ember-tint), transparent 72%);
  pointer-events: none;
}
.person__body { padding: 1.7rem 1.7rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.person__name { margin-bottom: 0.4rem; }
.person__role {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 1rem;
}
.person__body > p { color: var(--ink-tint); font-size: 0.99rem; }
.person details { padding-top: 1.4rem; }
.person details:not([open]) { margin-top: auto; }
.person summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ember-deep);
  border-bottom: 1px solid var(--ember-tint);
  padding-bottom: 0.2rem;
  transition: border-color 0.3s var(--ease);
}
.person summary::-webkit-details-marker { display: none; }
.person summary::after {
  content: "+";
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform 0.35s var(--ease);
}
.person summary:hover { border-color: var(--ember); }
.person details[open] summary::after { transform: rotate(45deg); }
.person details[open] summary { margin-bottom: 1.1rem; }
.person details .stack > * + * { margin-top: 0.9rem; }
.person details p { font-size: 0.95rem; color: var(--ink-tint); }

/* --- AI review summary --------------------------------------------------- */
.summary {
  border: 1px solid var(--line);
  border-left: 3px solid var(--ember);
  border-radius: var(--radius-lg);
  background: var(--paper);
  padding: clamp(1.6rem, 3vw, 2.4rem);
}
.summary__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: 1.3rem;
}
.summary__label svg { flex: none; }
.summary ul { display: grid; gap: 0.85rem; }
.summary li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.99rem;
  color: var(--ink-tint);
}
.summary li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ember);
}
.summary__note { margin-top: 1.4rem; font-size: 0.82rem; color: var(--ink-tint); }

/* --- Review extras ------------------------------------------------------- */
.review__date { font-size: 0.78rem; color: var(--ink-tint); }

@media (max-width: 1000px) {
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .people { grid-template-columns: 1fr; }
}