/* ============================================================
   HERO — the dimensioned headline
   ============================================================ */
.hero {
  padding-block: clamp(var(--s12), 7vh, var(--s24)) var(--s16);
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(var(--rule) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: .32;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 70%);
}

/* two columns: the pitch, and the work */
.hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(var(--s8), 5vw, var(--s16));
  align-items: stretch;
}
.hero__pitch {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* stats sit on the baseline of the image, not floating mid-air */
.hero__stats { margin-top: auto; }
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
}

/* ---- SIGNATURE: the dimension line spans + measures the headline ---- */
.dimline {
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  margin-bottom: var(--s5, 1.25rem);
}
.dimline__tick {
  width: 1px; height: 18px;
  background: var(--navy);
  flex: 0 0 1px;
  transform: scaleY(0);
  transition: transform .3s var(--ease);
}
.dimline.is-drawn .dimline__tick { transform: scaleY(1); }
.dimline.is-drawn .dimline__tick:last-child { transition-delay: .1s; }

.dimline__rule {
  flex: 1;
  height: 1px;
  background: var(--navy);
  opacity: .45;
  transform: scaleX(0);
  transition: transform .55s var(--ease) .14s;
}
.dimline__rule:first-of-type { transform-origin: left; }
.dimline__rule:last-of-type  { transform-origin: right; }
.dimline.is-drawn .dimline__rule { transform: scaleX(1); }

.dimline__span {
  color: var(--navy);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .36s var(--ease) .55s, transform .36s var(--ease) .55s;
}
.dimline.is-drawn .dimline__span { opacity: 1; transform: none; }

/* ---- Headline ---- */
.hero__title {
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .92;
  margin-bottom: var(--s6);
}
.hero__line { display: block; }
.hero__line:last-child { color: var(--navy); }

.hero__deck {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  line-height: 1.6;
  max-width: 42ch;
  margin-bottom: var(--s8);
  color: #2C3A57;
}

.hero__actions {
  display: flex; gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s10, 2.5rem);
}

/* ---- Live data strip: rules run edge to edge ---- */
.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat {
  padding: var(--s5, 1.25rem) var(--s4) var(--s5, 1.25rem) 0;
  border-right: 1px solid var(--rule);
}
.stat:last-child { border-right: 0; padding-right: 0; }
.stat__label {
  color: var(--navy); opacity: .58;
  text-transform: uppercase; letter-spacing: .1em;
  font-size: var(--t-tiny);
  display: block; margin-bottom: var(--s2);
}
.stat__value {
  font-family: var(--display);
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat--live .stat__value { color: var(--saffron); }

/* ============================================================
   HERO PLATE — a project, annotated like a drawing
   ============================================================ */
.plate { position: relative; display: block; }

/* hero plate: fill the column height, don't leave a gap */
.hero .plate { display: flex; flex-direction: column; }
.hero .plate__img { flex: 1; aspect-ratio: auto; min-height: 380px; }

.plate__img {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--slab);
}
.plate__img img { width: 100%; height: 100%; object-fit: cover; }

/* corner registration marks — drafting crop marks */
.plate__img::before,
.plate__img::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid var(--paper);
  z-index: 2;
}
.plate__img::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; }
.plate__img::after  { bottom: 10px; right: 10px; border-left: 0; border-top: 0; }

/* the annotation strip below — reads like a title block */
.plate__block {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s4);
  align-items: end;
  border-bottom: 1px solid var(--rule);
  padding-top: var(--s4);
  padding-bottom: var(--s3);
}
.plate__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.02em;
}
.plate__meta {
  font-family: var(--data);
  font-size: var(--t-tiny);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .6;
  margin-top: 2px;
}
.plate__stage {
  font-family: var(--data);
  font-size: var(--t-tiny);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--ok);
  color: var(--ok);
  white-space: nowrap;
}

/* between tablet and mobile the hero plate would crowd the pitch — hide it there,
   but bring it back on phones where it stacks underneath and does real work */
@media (max-width: 980px) and (min-width: 641px) {
  .hero .plate { display: none; }
}
@media (max-width: 640px) {
  .hero__stats { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(2) { border-right: 0; padding-right: 0; }
  .stat--live { grid-column: 1 / -1; border-top: 1px solid var(--rule); border-right: 0; }
  .hero__actions .btn { flex: 1; justify-content: center; }
  .hero__title { font-size: clamp(2.5rem, 12vw, 3.5rem); }
}

.hero__pitch { min-width: 0; }

/* ============================================================
   WORK — projects as drawing plates
   ============================================================ */
.work {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s10, 2.5rem) var(--s6);
  align-items: start;
}
/* lead takes the full width; the rest run three-up */
.work > .plate--lead { grid-column: span 6; }
.work > .plate:not(.plate--lead) { grid-column: span 2; }

.work .plate__img { aspect-ratio: 4 / 3; }
.work .plate--lead .plate__img { aspect-ratio: 21 / 9; }

@media (max-width: 900px) {
  .work { grid-template-columns: repeat(2, 1fr); }
  .work > .plate--lead { grid-column: span 2; }
  .work > .plate:not(.plate--lead) { grid-column: span 1; }
  .work .plate--lead .plate__img { aspect-ratio: 16 / 9; }
}
@media (max-width: 560px) {
  .work { grid-template-columns: 1fr; }
  .work > .plate, .work > .plate--lead { grid-column: span 1; }
}
.plate__blank {
  width: 100%; height: 100%;
  background: var(--slab);
  background-image: repeating-linear-gradient(
    45deg, transparent 0 10px, var(--rule) 10px 11px);
  opacity: .5;
}
.plate a { display: block; }
.plate__img img { transition: transform .5s var(--ease); }
.plate:hover .plate__img img { transform: scale(1.03); }

.work__all { margin-top: var(--s12); }

/* ============================================================
   PLOTS — live inventory
   ============================================================ */
.plots__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: end;
  margin-bottom: var(--s12);
}
@media (max-width: 820px) { .plots__head { grid-template-columns: 1fr; } }

.plots__head h2 {
  font-size: var(--t-h1);
  line-height: .95;
}
.plots__count {
  color: var(--saffron);
  font-variant-numeric: tabular-nums;
}
.plots__head p { max-width: 46ch; color: #2C3A57; }

.ventures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s6);
}
.venture {
  background: var(--paper);
  border: 1px solid var(--rule);
}
.venture__img { aspect-ratio: 3 / 2; overflow: hidden; }
.venture__img img { width: 100%; height: 100%; object-fit: cover; }
.venture__body { padding: var(--s6); }
.venture__body h3 { font-size: var(--t-h3); margin-bottom: 2px; }

.venture__specs {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: var(--s4);
  margin: var(--s5, 1.25rem) 0;
  padding-block: var(--s4);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.venture__specs dt {
  font-size: var(--t-tiny);
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--navy); opacity: .55;
  margin-bottom: 3px;
}
.venture__specs dd {
  font-weight: 700; font-size: .9375rem;
  color: var(--ink);
}
.venture__specs .is-live { color: var(--saffron); }
.venture__specs .of { opacity: .4; font-weight: 400; }

.venture__link {
  font-family: var(--display);
  font-weight: 700; font-size: .9375rem;
}
.venture__link:hover { color: var(--saffron); }

/* ============================================================
   SERVICES — a spec list, not cards
   ============================================================ */
.svcs { list-style: none; border-top: 1px solid var(--rule); }
.svc { border-bottom: 1px solid var(--rule); }
.svc a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s6);
  align-items: center;
  padding-block: var(--s6);
  transition: padding-inline .25s var(--ease);
}
.svc a:hover { padding-inline: var(--s4); background: var(--slab); }
.svc__head {
  display: flex; align-items: baseline; gap: var(--s4);
  flex-wrap: wrap;
}
.svc__head h3 { font-size: clamp(1.25rem, 2.2vw, 1.75rem); }
.svc__price {
  color: var(--navy); opacity: .6;
  white-space: nowrap;
}
.svc a > p {
  grid-column: 1;
  color: #2C3A57;
  font-size: var(--t-sm);
  max-width: 60ch;
  margin-top: var(--s2);
}
.svc__go {
  grid-row: 1 / -1; grid-column: 2;
  font-size: 1.5rem; color: var(--rule);
  transition: color .2s, transform .2s var(--ease);
}
.svc:hover .svc__go { color: var(--saffron); transform: translateX(4px); }

/* ============================================================
   PROCESS — numbered because sequence is load-bearing
   ============================================================ */
.stages {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  counter-reset: stage;
}
.stage {
  padding: var(--s6) var(--s6) var(--s8) 0;
  border-top: 1px solid rgba(247,245,241,.22);
  border-right: 1px solid rgba(247,245,241,.22);
  padding-right: var(--s6);
}
.stage:last-child { border-right: 0; }
.stage__n {
  color: var(--saffron);
  font-weight: 700;
  display: block;
  margin-bottom: var(--s4);
}
.stage__t { font-size: 1.25rem; margin-bottom: var(--s2); }
.stage__d { font-size: var(--t-sm); opacity: .74; line-height: 1.6; }

@media (max-width: 640px) {
  .stage { border-right: 0; }
}

/* ============================================================
   CLOSE — the lead capture
   ============================================================ */
.close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(var(--s8), 6vw, var(--s16));
  align-items: start;
}
@media (max-width: 900px) { .close { grid-template-columns: 1fr; } }

.close__pitch h2 {
  font-size: var(--t-h1);
  line-height: .95;
  margin-bottom: var(--s6);
}
.close__pitch p {
  max-width: 44ch;
  color: #2C3A57;
  margin-bottom: var(--s8);
}
.close__call {
  display: inline-block;
  padding-top: var(--s6);
  border-top: 1px solid var(--rule);
}
.close__num {
  display: block;
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 800; letter-spacing: -.035em;
  color: var(--saffron);
  margin-top: var(--s2);
}

/* ---- Callback form ---- */
.cbf, .callback-box {
  background: var(--navy);
  color: var(--paper);
  padding: var(--s8);
}
.cbf h3, .callback-box h3 {
  color: var(--paper);
  font-size: 1.375rem;
  margin-bottom: var(--s6);
}
.cbf input, .cbf select, .cbf textarea,
.callback-box input, .callback-box select, .callback-box textarea {
  width: 100%;
  padding: var(--s3) var(--s4);
  margin-bottom: var(--s3);
  background: rgba(247,245,241,.07);
  border: 1px solid rgba(247,245,241,.2);
  color: var(--paper);
  font-family: var(--body);
  font-size: 1rem;
}
.cbf ::placeholder, .callback-box ::placeholder { color: rgba(247,245,241,.5); }
.cbf input:focus, .cbf textarea:focus, .cbf select:focus,
.callback-box input:focus, .callback-box textarea:focus, .callback-box select:focus {
  outline: none;
  border-color: var(--saffron);
  background: rgba(247,245,241,.11);
}
/**
 * Native <option> elements render in an OS-drawn popup on a white background,
 * regardless of the panel behind the <select>. Without an explicit colour they
 * inherit the panel's near-white text and become invisible.
 *
 * .callback-box is the class the real form uses — it was missing this rule, so
 * the options were pale grey on white and effectively unreadable.
 */
.cbf select option,
.callback-box select option {
  color: var(--ink);
  background: var(--white);
}

/* The placeholder option reads as a prompt, not a choice */
.cbf select option[value=""],
.callback-box select option[value=""] { color: #6b7794; }

/* Selects need room for the native arrow, and shouldn't look like text inputs */
.cbf select,
.callback-box select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--s10);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23F7F5F1' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  cursor: pointer;
}
.cbf .btn, .callback-box .btn {
  width: 100%;
  justify-content: center;
  margin-top: var(--s3);
}

/* title blocks align across a row even when the meta line wraps */
.work > .plate a {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.work > .plate .plate__block {
  margin-top: auto;
  min-height: 4.25rem;
  align-items: start;
}
.work > .plate .plate__meta { min-height: 2.2em; }

/* ============================================================
   MOBILE — the phone is where the call happens. Get it right.
   ============================================================ */
@media (max-width: 640px) {
  .hero { padding-block: var(--s10) var(--s12); }

  .hero__title {
    font-size: clamp(2.5rem, 11vw, 3.25rem);
    letter-spacing: -.04em;
  }
  .hero__deck { font-size: 1.0625rem; margin-bottom: var(--s6); }

  /* stack, don't squeeze. The call button gets its own full-width row. */
  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s3);
    margin-bottom: var(--s8);
  }
  .hero__actions .btn {
    width: 100%;
    justify-content: center;
    white-space: nowrap;
  }

  /* the plate leads on mobile — show it, don't hide it */
  .hero .plate { display: flex; margin-top: var(--s8); }
  .hero .plate__img { min-height: 0; aspect-ratio: 4 / 3; }

  .plots__head h2 { font-size: clamp(2rem, 9vw, 2.5rem); }
  .venture__specs { grid-template-columns: repeat(3, 1fr); gap: var(--s2); }

  .svc a { grid-template-columns: 1fr; padding-block: var(--s5); }
  .svc__go { display: none; }
  .svc__head { gap: var(--s2); }
  .svc__head h3 { font-size: 1.25rem; }

}

/* Empty database / no featured project: don't leave a void where the plate goes. */
.hero__inner--solo { grid-template-columns: 1fr; }
.hero__inner--solo .hero__pitch { max-width: 46rem; }
.hero__inner--solo .hero__stats { max-width: 46rem; }

/* stats grid adapts to however many numbers actually exist */
.hero__stats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.hero__stats:empty { display: none; }

/* Callback form: success + labels. Errors don't apologise and are never vague. */
.callback-box .form-group { margin-bottom: var(--s3); }
.callback-box .form-error {
  color: #FFB4A8;
  font-family: var(--data);
  font-size: var(--t-tiny);
  margin-bottom: var(--s3);
}
.callback-box p {
  color: rgba(247,245,241,.8);
  font-size: var(--t-sm);
}

/* ============================================================
   COST GUIDE — the homepage infographic
   ============================================================ */
.cost__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: end;
  margin-bottom: var(--s12);
}
@media (max-width: 820px) { .cost__head { grid-template-columns: 1fr; } }
.cost__head h2 { font-size: var(--t-h1); line-height: .95; }
.cost__head p { max-width: 48ch; color: #2C3A57; }

.cost__caveat {
  color: var(--navy);
  opacity: .6;
  max-width: 62ch;
  margin-top: var(--s6);
  line-height: 1.6;
}

/* ---- Tiers ---- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
}
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }

.tier {
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: var(--s6);
  display: flex;
  flex-direction: column;
}

.tier__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.tier__name { font-size: 1.125rem; }
.tier__rate { display: flex; align-items: baseline; gap: var(--s2); white-space: nowrap; }
.tier__num {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.tier__unit { color: var(--navy); opacity: .55; }

.tier__track {
  height: 6px;
  background: var(--rule);
  margin-bottom: var(--s5);
  overflow: hidden;
}
.tier__bar {
  height: 100%;
  width: 0;
  background: var(--navy);
  transition: width .85s var(--ease);
  transition-delay: calc(var(--i) * .12s);
}
.tiers.is-shown .tier__bar { width: var(--w); }
/* the top tier is the reference length — give it the accent */
.tier:last-child .tier__bar { background: var(--saffron); }

.tier__note {
  font-size: var(--t-sm);
  color: #2C3A57;
  flex: 1;
  margin-bottom: var(--s5);
}

.tier__example {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
  color: var(--navy);
}
.tier__example span { opacity: .6; text-transform: uppercase; letter-spacing: .08em; font-size: var(--t-tiny); }
.tier__example b {
  font-family: var(--display);
  font-size: 1.0625rem;
  letter-spacing: -.02em;
  color: var(--ink);
}

/* ---- Timeline ---- */
.tl { margin-top: var(--s16); }
.tl__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}
.tl__head h3 { font-size: var(--t-h2); }
.tl__total { color: var(--navy); opacity: .6; }

.tl__band {
  display: flex;
  height: 52px;
  border: 1px solid var(--rule);
  overflow: hidden;
}
.tl__seg {
  width: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: width .9s var(--ease);
  transition-delay: calc(var(--i) * .14s);
  border-right: 1px solid rgba(247,245,241,.25);
}
.tl__seg:last-child { border-right: 0; }
.tl__band.is-shown .tl__seg { width: var(--w); }

/* One ramp, four steps — reads as a sequence, not four unrelated things */
.tl__seg--a { background: #C9D0DC; }
.tl__seg--b { background: #6B7C9E; }
.tl__seg--c { background: var(--navy); }
.tl__seg--d { background: var(--saffron); }

.tl__wk {
  color: var(--white);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .4s var(--ease);
  transition-delay: calc(var(--i) * .14s + .5s);
}
.tl__band.is-shown .tl__wk { opacity: 1; }
.tl__seg--a .tl__wk { color: var(--ink); }

.tl__key {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s3) var(--s6);
  margin-top: var(--s5);
}
.tl__key li {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--rule);
}
.tl__dot { width: 10px; height: 10px; flex-shrink: 0; }
.tl__dot--a { background: #C9D0DC; }
.tl__dot--b { background: #6B7C9E; }
.tl__dot--c { background: var(--navy); }
.tl__dot--d { background: var(--saffron); }
.tl__name { font-size: var(--t-sm); flex: 1; }
.tl__wks { color: var(--navy); opacity: .55; white-space: nowrap; }

@media (max-width: 560px) {
  .tl__band { height: 44px; }
  .tl__wk { font-size: 10px; }
}

/* ============================================================
   HERO CAROUSEL
   Full-bleed project photography with an indigo scrim, in the
   manner of the previous site's service banners.
   ============================================================ */
.hcar {
  position: relative;
  min-height: clamp(460px, 64vh, 680px);
  overflow: hidden;
  background: var(--navy);
}

.hcar__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease), visibility .7s;
  display: grid;
  align-items: center;
}
.hcar__slide.is-on { opacity: 1; visibility: visible; }

.hcar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hcar__img--none {
  background:
    radial-gradient(1200px 600px at 20% 0%, var(--navy-lo), transparent 70%),
    var(--navy);
}

/* Left-weighted scrim: keeps the copy readable without flattening the photo. */
.hcar__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(20,19,63,.94) 0%,
    rgba(20,19,63,.80) 38%,
    rgba(20,19,63,.35) 65%,
    rgba(20,19,63,.15) 100%
  );
}
@media (max-width: 720px) {
  /* On mobile the copy sits over the middle of the image, so it needs more. */
  .hcar__scrim { background: linear-gradient(180deg, rgba(20,19,63,.72), rgba(20,19,63,.92)); }
}

.hcar__inner { position: relative; z-index: 2; width: 100%; }
.hcar__copy { max-width: 46rem; padding-block: var(--s12); }

.hcar__eyebrow {
  display: inline-block;
  color: #FF9DC8;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 700;
  margin-bottom: var(--s4);
}

.hcar__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.25rem, 5.4vw, 4.25rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--white);
  text-wrap: balance;
}

.hcar__deck {
  color: rgba(255,255,255,.88);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.55;
  max-width: 40ch;
  margin-top: var(--s5);
}

.hcar__actions {
  display: flex;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-top: var(--s8);
}

.hcar__stat {
  color: rgba(255,255,255,.62);
  margin-top: var(--s6);
  letter-spacing: .06em;
}

/* ---- Controls ---- */
.hcar__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.92);
  color: var(--saffron);
  font-size: 1.75rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background-color .18s var(--ease), transform .18s var(--ease);
}
.hcar__nav:hover { background: var(--white); transform: translateY(-50%) scale(1.06); }
.hcar__nav:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.hcar__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.hcar__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

@media (max-width: 720px) {
  .hcar__nav { width: 38px; height: 38px; font-size: 1.375rem; }
}

.hcar__dots {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1rem, 3vh, 1.75rem);
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: var(--s2);
}
.hcar__dot {
  width: 30px;
  height: 4px;
  border: 0;
  padding: 0;
  background: rgba(255,255,255,.38);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.hcar__dot.is-on { background: var(--saffron); }
.hcar__dot:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

/* Light-on-dark ghost button, for use over the scrim */
.btn--ghost-light {
  border: 1.5px solid rgba(255,255,255,.55);
  color: var(--white);
  background: transparent;
  border-radius: 999px;
}
.btn--ghost-light:hover { border-color: var(--white); background: rgba(255,255,255,.1); }

@media (prefers-reduced-motion: reduce) {
  .hcar__slide { transition: none; }
  .hcar__nav:hover { transform: translateY(-50%); }
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tmn { background: var(--slab); }
.tmn__heading { font-size: var(--t-h1); max-width: 18ch; margin-bottom: var(--s10); }

.tmn__grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s6);
}
@media (max-width: 950px) { .tmn__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tmn__grid { grid-template-columns: 1fr; } }

.tmn__card {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: var(--s7);
  display: flex;
  flex-direction: column;
  position: relative;
}
/* Opening quote mark, set large and faint — signals "someone said this"
   without the cliché of a giant pink quote glyph. */
.tmn__card::before {
  content: '"';
  position: absolute;
  top: var(--s3);
  right: var(--s5);
  font-family: var(--body);
  font-size: 4rem;
  line-height: 1;
  color: var(--saffron);
  opacity: .16;
}

.tmn__quote {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  flex: 1;
  margin: 0;
}

.tmn__by {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-top: var(--s6);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.tmn__pic {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tmn__pic--initial {
  display: grid;
  place-items: center;
  background: var(--navy);
  color: var(--white);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
}

.tmn__name {
  display: block;
  font-family: var(--display);
  font-size: 1rem;
  color: var(--ink);
}
.tmn__meta {
  display: block;
  color: var(--navy);
  opacity: .6;
  font-size: var(--t-tiny);
  margin-top: 2px;
  line-height: 1.4;
}

.tmn__more { margin-top: var(--s8); }