/* =========================================================
   Amy Garside Media — home page.
   Warm premium: cream editorial body, dark cinematic bands
   (hero, work, contact, footer). See DESIGN.md.
   Emphasis is pure italic contrast in the display face, no
   decoration. Gold is the metal. Emerald is the voice on the
   dark bands (wordmark "Media" and the looping word); warm
   antique gold is the emphasis on the cream body.
   The questionnaire and thank you pages stay on styles.css.
   ========================================================= */

:root {
  /* Dark bands */
  --bg-deep:     #0C0A08;
  --bg-surface:  #14110E;
  --bg-elevated: #1E1A15;
  --hairline-dark: rgba(201, 168, 76, 0.14);
  --hairline-dark-soft: rgba(201, 168, 76, 0.07);
  --cream-on-dark: #F5EFE6;
  --soft-on-dark:  #C9BEAC;

  /* Cream body */
  --cream:      #F6F1E8;
  --paper:      #FCF9F3;
  --cream-edge: #E8DECF;
  --ink:        #211C16;
  --ink-soft:   #6E6457;

  /* Gold, the one warm accent */
  --gold:        #C9A84C;
  --gold-bright: #E8C87A;  /* small gold text on dark */
  --gold-deep:   #856825;  /* small gold text on cream, AA */

  /* Two-ground accent system, replacing the retired Deep Jewel.
     Gold is the metal (mark, buttons, hairlines, kickers, numbers).
     Emerald is the voice on the dark cinematic bands: the wordmark "Media"
     and the looping / emphasis word. Warm antique gold is the emphasis on the
     cream editorial body, where a cool green sat awkwardly against the gold. */
  --emerald:       #46A67C;  /* dark ground: wordmark "Media" + looping word */
  --emphasis-warm: #A9700F;  /* cream ground: the italic emphasis word */

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  /* Rhythm: seams between sections read ~10rem on desktop (two of these),
     blocks inside a section sit 2.5 to 4rem apart. Tight, standard, seam. */
  --section-y: clamp(3.25rem, 6vw, 5rem);
  --radius: 4px;
  --radius-lg: 10px;

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

/* ---------- Base (cream body) ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  font-optical-sizing: auto;
}

/* The emphasis device: italic contrast in the display face, one warm
   colour, nothing drawn under it. */
h1 em, h2 em, h3 em { font-style: italic; font-weight: 340; color: var(--emphasis-warm); }

a { color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

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

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--section-y); }

/* ---------- Dark band shared rules ---------- */
.band-dark { background: var(--bg-deep); color: var(--soft-on-dark); }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--cream-on-dark); }
.band-dark h1 em, .band-dark h2 em, .band-dark h3 em { color: var(--emerald); }
.band-dark :focus-visible { outline-color: var(--gold); }
.band-dark ::selection { background: var(--gold); color: var(--bg-deep); }

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--ink);
  color: var(--cream-on-dark);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  z-index: 300;
  transition: top 0.2s var(--ease);
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 0.95rem 1.7rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), background-color 0.3s var(--ease),
              color 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--gold);
  color: #1A1409;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 14px 34px -14px rgba(201,168,76,0.55);
}
.btn-primary:hover { background: var(--gold-bright); transform: translateY(-2px); }

/* Ghost button adapts to its ground */
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--cream-edge);
}
.btn-ghost:hover,
.btn-ghost:active {
  background: var(--gold);
  border-color: var(--gold);
  color: #1A1409;
  transform: translateY(-2px);
}
.btn-ghost:active { transform: translateY(1px); }
.band-dark .btn-ghost { color: var(--cream-on-dark); border-color: rgba(245, 239, 230, 0.28); }
.band-dark .btn-ghost:hover,
.band-dark .btn-ghost:active { background: var(--gold); border-color: var(--gold); color: #1A1409; }

.btn-small { padding: 0.6rem 1.15rem; font-size: 0.88rem; }
.btn-block { width: 100%; }

/* ---------- Kicker ---------- */
.kicker {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gold-deep);
  margin: 0 0 1.2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.kicker::before {
  content: "";
  width: 1.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.band-dark .kicker { color: var(--gold-bright); }

.section-title { font-size: clamp(2rem, 1.4rem + 2.8vw, 3.2rem); line-height: 1.12; }
.section-intro {
  margin: 1.4rem 0 0;
  text-wrap: pretty; /* no widowed last words */
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  color: var(--ink-soft);
  line-height: 1.6;
  max-width: 46rem;
}
.band-dark .section-intro { color: var(--soft-on-dark); }

/* Inline text link */
.text-link { color: var(--gold-deep); text-decoration: underline; text-decoration-color: rgba(133, 104, 37, 0.5); text-underline-offset: 3px; transition: color 0.2s ease; }
.text-link:hover { color: var(--gold-deep); text-decoration-color: var(--gold-deep); }
.band-dark .text-link { color: var(--gold-bright); text-decoration-color: rgba(232, 200, 122, 0.5); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.1rem;
  background: rgba(12, 10, 8, 0);
  /* Only paint properties transition. The padding step applies instantly,
     hidden inside the background fade, so the fixed header never animates
     layout. */
  transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.site-header.scrolled {
  background: rgba(12, 10, 8, 0.86);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  padding-block: 0.7rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.02rem + 0.6vw, 1.55rem);
  letter-spacing: -0.01em;
}
/* The AG monogram, matching the favicon. Deep Jewel lives here. */
.ag-mark {
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
  color: var(--gold-bright);
}
.ag-mark .g { margin-left: -0.6em; }
.brand-ag { font-size: 1.75rem; flex: none; }

/* Hybrid lockup: "Amy Garside" solid cream, ONLY "Media" in Deep Jewel */
.wordmark { color: var(--cream-on-dark); white-space: nowrap; }
.wm-media {
  color: var(--emerald);
}

/* ---------- Nav ---------- */
.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-menu a:not(.btn) {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--soft-on-dark);
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.nav-menu a:not(.btn):hover { color: var(--cream-on-dark); }
.nav-toggle { display: none; }

/* ---------- Hero (dark band) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  padding-block: clamp(7rem, 16vh, 10rem) clamp(4rem, 8vh, 6rem);
}
/* The room: warm dark, one cold Deep Jewel glow far at the horizon, candle
   warmth low in the frame. Film grain only here, where the cinema lives. */
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 55% at 50% 108%, rgba(192, 101, 61, 0.16) 0%, rgba(201, 168, 76, 0.06) 42%, transparent 70%),
    radial-gradient(70% 45% at 50% 112%, rgba(168, 80, 47, 0.10) 0%, transparent 60%),
    radial-gradient(120% 90% at 50% -20%, #191510 0%, var(--bg-deep) 58%);
}
.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: radial-gradient(60% 80% at 50% 100%, rgba(201, 168, 76, 0.07), transparent 70%);
}
.hero-content { position: relative; max-width: 62rem; padding-inline: var(--gutter); }

.hero-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-bright);
  margin: 0 0 2rem;
}
.hero-title {
  font-size: clamp(2.6rem, 1.6rem + 5.4vw, 5.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.hero-title .line { display: block; }
.hero-lede {
  margin: 2rem auto 0;
  max-width: 44rem;
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  line-height: 1.6;
}
.hero-actions {
  margin-top: 2.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.hero-secondary { margin: 1.1rem 0 0; }
.hero-link {
  color: var(--soft-on-dark);
  font-size: 0.95rem;
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, 0.5);
  text-underline-offset: 4px;
  transition: color 0.25s var(--ease);
}
.hero-link:hover { color: var(--cream-on-dark); }
.hero-note { margin-top: 1.6rem; font-size: 0.88rem; opacity: 0.85; }

.scroll-hint {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--soft-on-dark);
  opacity: 0.6;
  margin: 0;
}
.scroll-hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 2.2rem;
  margin: 0.7rem auto 0;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: hint-drop 2.2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes hint-drop { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* The rotating gold word, swapping in place inside the sentence. The em
   is a width-animated slot so the words after it glide as the word
   changes; the word itself rises out and the next rises in. */
.rw {
  display: inline-block;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.45s var(--ease);
}
.rw-word {
  display: inline-block;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.rw-word.rw-out { opacity: 0; transform: translateY(-0.38em); }
.rw-word.rw-pre { opacity: 0; transform: translateY(0.38em); transition: none; }

/* Hero entrance: rise only. The text is painted before JavaScript runs. */
.rise { animation: rise 0.8s var(--ease) both; }
.rise-2 { animation-delay: 0.08s; }
.rise-3 { animation-delay: 0.16s; }
.rise-4 { animation-delay: 0.26s; }
.rise-5 { animation-delay: 0.36s; }
@keyframes rise { from { transform: translateY(20px); } to { transform: none; } }

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

/* ---------- About (cream) ---------- */
/* the about sign-off and the next kicker read as one beat apart, not two */
.about.section { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-portrait {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 30px 60px -28px rgba(40, 30, 15, 0.45);
}
.about-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about-copy p { margin: 0 0 1.1rem; }
.about-copy .sign {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--ink);
  margin-top: 1.6rem;
}

/* ---------- Services ledger (cream) ---------- */
/* At the default measure the intro dropped only "finish." to its own
   line; this width breaks it at the phrase instead. */
#services .section-intro { max-width: 36rem; }
.ledger { border-top: 1px solid var(--cream-edge); }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) auto;
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
  padding-block: clamp(1.6rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--cream-edge);
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
.ledger-row:hover { background: rgba(201, 168, 76, 0.06); }
.ledger-name {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  transition: color 0.3s var(--ease);
}
.ledger-row:hover .ledger-name { color: var(--gold-deep); }
.ledger-desc { margin: 0; font-size: 0.98rem; line-height: 1.6; color: var(--ink-soft); }
.ledger-cue {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--gold-deep);
  transition: transform 0.3s var(--ease);
}
.ledger-row:hover .ledger-cue { transform: translateX(6px); }

/* ---------- How it works (cream) ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.5rem);
  counter-reset: step;
}
.step { position: relative; padding-top: 1.4rem; }
.step::before {
  /* the sequence carries information here, so it is numbered */
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--serif);
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold-deep);
  display: block;
  margin-bottom: 1rem;
}
.step h3 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.step p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }
/* The optional extra card, in the outline Amy chose: a clean paper card
   with the Deep Jewel hairline along its top edge and the gradient badge.
   The one brand-gradient moment outside the lockup. */
.step-extra {
  position: relative;
  overflow: hidden;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3.2vw, 2.2rem);
  border: 1px solid #96805C;
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: 0 18px 40px -28px rgba(40, 30, 15, 0.35);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.3rem 1.4rem;
  align-items: start;
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}
.step-extra::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gold-deep);
}
.step-extra-badge {
  grid-row: 1 / 4;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gold);
  color: #1A1409;
  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1;
  margin-top: 0.2rem;
}
.step-extra-tag {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold-deep);
}
.step-extra h3 { font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem); }
.step-extra p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); }
.step-extra-tag, .step-extra h3, .step-extra p, .step-extra-link { grid-column: 2; }
.step-extra-link { justify-self: start; margin-top: 0.7rem; }
.step-extra-link { color: var(--gold-deep); text-decoration: none; font-weight: 600; font-size: 0.92rem; white-space: nowrap; }
.step-extra-link:hover { color: var(--gold-deep); text-decoration-color: var(--gold-deep); }

/* ---------- Work showcase (dark band) ---------- */
/* clip, not hidden: overflow hidden would make this a scroll container and
   silently break the view() timeline driving the showcase tilt */
.work-section { position: relative; overflow: clip; }
.work-section::before {
  /* the same far-off Deep Jewel horizon as the hero, quieter */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 50% at 50% 115%, rgba(192, 101, 61, 0.09), transparent 65%);
  pointer-events: none;
}
.work-section .wrap { position: relative; }

/* The pinned stage, ported from the live site's ContainerScroll */
.showcase-track { position: relative; height: 118vh; }
.showcase-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 3vh, 2.2rem);
  padding: clamp(4.5rem, 11vh, 7rem) var(--gutter) clamp(2rem, 5vh, 3.5rem);
  perspective: 1400px;
}

/* The device: dark bezel, warm backlight glow, home bar. The screen sits
   inside, so the site is presented as an object, not a flat card. */
.device-frame {
  position: relative;
  width: min(100%, 60rem);
  transform-style: preserve-3d;
  will-change: transform;
  border-radius: 28px;
  padding: clamp(10px, 1.4vw, 18px) clamp(10px, 1.4vw, 18px) clamp(6px, 1vw, 10px);
  background: linear-gradient(180deg, #221D16, #15110C);
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.3),
    0 0 60px rgba(201, 168, 76, 0.18),
    0 0 140px rgba(201, 168, 76, 0.1),
    0 50px 100px -50px rgba(0, 0, 0, 0.95);
}
.device-bar {
  width: 92px;
  height: 5px;
  border-radius: 999px;
  background: rgba(245, 239, 230, 0.4);
  margin: 9px auto 3px;
}
.showcase-screen {
  position: relative;
  aspect-ratio: 16 / 8.5;
  overflow: hidden;
  border-radius: 16px;
  background: #101418;
}
.showcase-screen .work-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase-embed {
  position: absolute; top: 0; left: 0;
  width: 166.67%; height: 420%;
  transform: scale(0.6);
  transform-origin: top left;
  border: 0;
  pointer-events: none;
  z-index: 2; /* the live site covers the still once it loads */
}
.showcase-cap { text-align: center; max-width: 44rem; margin: 0 auto; will-change: transform; }
.showcase-cap h3 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem); margin-bottom: 0.6rem; }
.showcase-cap p { margin: 0; font-size: 0.95rem; }
.showcase-tag { color: var(--gold-bright); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600; margin: 0 0 0.6rem; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.4rem, 3vw, 2.5rem);
}
.work-card-wide { grid-column: 1 / -1; }
.work-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-elevated);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.8);
}
.work-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(232, 200, 122, 0.55), 0 0 30px -6px rgba(201, 168, 76, 0.35), 0 34px 70px -28px rgba(0, 0, 0, 0.95);
}
.work-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--hairline-dark-soft) inset;
  pointer-events: none;
}
.work-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: linear-gradient(135deg, #221C14, var(--bg-deep));
}
.work-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.work-card:hover .work-media img { transform: scale(1.04); }
.work-body { padding: 1.3rem clamp(1.1rem, 2.5vw, 1.7rem) 1.5rem; }
.work-name { font-size: 1.4rem; margin-bottom: 0.35rem; }
.work-note { margin: 0 0 0.9rem; font-size: 0.94rem; }
.work-link { color: var(--gold-bright); text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.work-link:hover { color: var(--gold); }
.work-tag {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold-bright);
  margin: 0 0 0.5rem;
}

/* ---------- Secondary tier: the concept sites, half scale ---------- */
.work-subhead {
  margin: clamp(2.6rem, 6vw, 4rem) 0 clamp(1.1rem, 2.5vw, 1.6rem);
  font-size: clamp(1.15rem, 1rem + 0.8vw, 1.6rem);
  color: var(--cream-on-dark);
}
.work-secondary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.work-card-sm .work-body {
  padding: 0.85rem 1.1rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}
.work-card-sm .work-note { font-size: 0.88rem; margin: 0 0 0.4rem; }
.work-card-sm .work-tag { width: 100%; margin: 0 0 0.15rem; font-size: 0.62rem; }
.work-card-sm .work-name { font-size: 1.05rem; margin: 0; }
.work-card-sm .work-link { font-size: 0.85rem; flex: none; }

/* ---------- Packages (cream) ---------- */
/* The switcher sits on the heading line of the grid it controls */
.package-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.package-head > h3 { margin-bottom: 0; }
.price-toggle {
  display: inline-flex;
  border: 1px solid var(--cream-edge);
  border-radius: 999px;
  padding: 0.25rem;
  background: var(--paper);
}
.price-toggle-btn {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: transparent;
  border: 0;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.price-toggle-btn.is-active { background: var(--ink); color: var(--cream-on-dark); }

.package-group + .package-group { margin-top: clamp(3rem, 6vw, 4.5rem); }
/* ---------- Prose page (the /ai policy) ---------- */
/* Everything here reuses existing values: the group-heading scale, the
   section-intro measure and the standard rhythm steps. */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin: 2.6rem 0 0.8rem; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 1.1rem; }

/* h3 here covers both the bare group heading and the one inside
   .package-head; card names are h4, so nothing else matches */
.package-group h3 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin-bottom: 1.4rem; }

.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.2rem, 2.5vw, 1.8rem);
  align-items: stretch;
}
/* The four website cards must never wrap 3+1: without surfaces an
   orphaned card beside empty columns reads as a rendering accident.
   Two by two in the middle band, four across when they fit. */
@media (min-width: 620px) and (max-width: 999px) {
  .package-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .package-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Option B surfaces (Amy's call after seeing Option A): the paper card
   stays, with a border dark enough to actually resolve on cream. The
   old cream-edge hairline sat at 1.18:1 and read as a smudge. */
.package {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid #96805C;
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 14px 34px -18px rgba(40, 30, 15, 0.35), 0 30px 60px -34px rgba(40, 30, 15, 0.25);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}
.package:hover {
  transform: translateY(-4px);
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 1px var(--gold-deep), 0 0 26px -4px rgba(201, 168, 76, 0.35), 0 26px 54px -28px rgba(40, 30, 15, 0.45);
}
/* Only the website grid reserves the flag slot; the social cards have
   no badges, so the slot would sit as dead space inside the box */
.package-grid-4 .package { padding-top: calc(clamp(1.5rem, 3vw, 2rem) + 2.4rem); }
/* The badged card and the bordered card are the same card. Deep gold,
   one weight up, so the recommendation leads the row. */
.package-featured { border: 2px solid var(--gold-deep); }
.package-flag {
  position: absolute;
  top: clamp(1.5rem, 3vw, 2rem);
  left: clamp(1.5rem, 3vw, 2rem);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 700;
  color: #1A1409;
  background: var(--gold);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
}
.package-name { font-size: 1.3rem; margin-bottom: 0.4rem; font-family: var(--serif); font-weight: 400; color: var(--ink); }
.package-price { margin: 0 0 1rem; font-size: 1.15rem; color: var(--gold-deep); font-weight: 600; }
.price-from { font-size: 0.8rem; color: var(--ink-soft); font-weight: 400; margin-right: 0.3rem; }
.price-note { display: block; font-size: 0.8rem; color: var(--ink-soft); font-weight: 400; margin-top: 0.2rem; }
.package ul { list-style: none; margin: 0 0 1.4rem; padding: 0; flex: 1; }
.package li { padding-left: 1.3rem; position: relative; font-size: 0.94rem; margin-bottom: 0.55rem; color: var(--ink-soft); }
.package li::before { content: "·"; position: absolute; left: 0.2rem; color: var(--gold-deep); font-weight: 700; }
.package-note { margin: 1.6rem 0 0; font-size: 0.88rem; color: var(--ink-soft); }
.package-note strong { color: var(--ink); }

/* The small print folds away; the FAQ's plus affordance, one size down */
.fine-print { margin-top: 1.6rem; border-top: 1px solid var(--cream-edge); }
.fine-print summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-block: 0.9rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  transition: color 0.25s var(--ease);
}
.fine-print summary::-webkit-details-marker { display: none; }
.fine-print summary:hover { color: var(--gold-deep); }
.fine-print summary::after {
  content: "+";
  font-weight: 300;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--gold-deep);
  flex: none;
  transition: transform 0.3s var(--ease);
}
.fine-print[open] summary::after { transform: rotate(45deg); }
.fine-print .package-note { margin-top: 0; padding-bottom: 1.1rem; max-width: 54rem; }

/* ---------- FAQ (cream) ---------- */
.faq-list { max-width: 50rem; }
.faq-item { border-bottom: 1px solid var(--cream-edge); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.2rem;
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
  color: var(--ink);
  transition: color 0.25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold-deep); }
.faq-item summary::after {
  content: "+";
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold-deep);
  flex: none;
  transition: transform 0.3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 0 1.4rem; max-width: 44rem; }
.faq-answer p { margin: 0; font-size: 0.98rem; color: var(--ink-soft); }

/* ---------- Contact (dark band) ---------- */
.contact-section { position: relative; overflow: hidden; }
.contact-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 85% 110%, rgba(192, 101, 61, 0.11), transparent 65%);
  pointer-events: none;
}
.contact-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.contact-lede { margin: 1.4rem 0 0; font-size: 1.05rem; }
.contact-direct { margin: 1.6rem 0 0; font-size: 0.95rem; }
.contact-direct a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.contact-direct a:hover { color: var(--gold); }

/* The note that appears when a pricing button carried a package over */
.contact-tier { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--soft-on-dark); }
.contact-tier strong { color: var(--gold-bright); font-weight: 600; }
.contact-note { margin-top: 0.9rem; font-size: 0.88rem; opacity: 0.85; }

.contact-form { display: grid; gap: 1.2rem; }
.field label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cream-on-dark);
  margin-bottom: 0.45rem;
}
.field-opt { font-weight: 400; color: var(--soft-on-dark); font-size: 0.8rem; }
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--cream-on-dark);
  background: var(--bg-elevated);
  border: 1px solid var(--hairline-dark);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C9BEAC' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }

/* ---------- Footer (dark band) ---------- */
.site-footer { padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--hairline-dark-soft); }
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
/* Footer brand lockup: the gold AG monogram stacked over the hybrid wordmark.
   Drawn in code, not shipped as a picture. The old asset was a rendered image
   of a logo standing on a dark backdrop, so it carried its own near-black
   ground, a vignette and a floor reflection, and read as a box floating on the
   page. Text has no ground to blend, stays sharp at any size and weighs
   nothing. The monogram is decorative here: the wordmark beside it already
   says the name, so screen readers hear it once. */
.footer-lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1;
  margin: 0;
}
.footer-ag { font-size: clamp(3.1rem, 2.4rem + 2.4vw, 4.2rem); }
.footer-wordmark {
  font-family: var(--serif);
  font-size: clamp(1.12rem, 1rem + 0.45vw, 1.42rem);
  letter-spacing: -0.01em;
}
.footer-line { margin: 1.1rem 0 0; font-size: 0.92rem; max-width: 24rem; }
.footer-social { display: flex; gap: 1.6rem; }
.footer-social a { font-size: 0.92rem; font-weight: 500; color: var(--soft-on-dark); text-decoration: none; transition: color 0.25s var(--ease); }
.footer-social a:hover { color: var(--gold-bright); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  padding-block: 1.4rem 1.8rem;
  border-top: 1px solid var(--hairline-dark-soft);
  font-size: 0.85rem;
}
.footer-base p { margin: 0; }
.footer-top { color: var(--soft-on-dark); text-decoration: none; }
.footer-top:hover { color: var(--gold-bright); }

/* ---------- Scroll reveals (activate only once JS arrives) ---------- */
html.has-js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
html.has-js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem; height: 2.6rem;
    background: transparent;
    border: 1px solid rgba(245, 239, 230, 0.28);
    border-radius: 8px;
    color: var(--cream-on-dark);
    cursor: pointer;
    position: relative;
    z-index: 120;
  }
  /* The frosted blur turns the scrolled header into the positioning
     container for the fixed full-screen menu, which squashes the menu
     into the header bar and leaves it transparent. A near-solid bar on
     phones instead, so the menu can truly cover the screen. */
  .site-header.scrolled {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(12, 10, 8, 0.96);
  }
  /* Open menu: the lines give way to a cross, so the way out is obvious */
  .nav-toggle[aria-expanded="true"] svg { display: none; }
  .nav-toggle[aria-expanded="true"]::before {
    content: "\2715";
    font-size: 1.05rem;
    line-height: 1;
    color: var(--cream-on-dark);
  }
  .nav {
    position: fixed;
    inset: 0;
    background: rgba(12, 10, 8, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: grid;
    place-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
    z-index: 110;
  }
  .nav.open { opacity: 1; visibility: visible; }
  .nav-menu { flex-direction: column; gap: 1.8rem; text-align: center; }
  .nav-menu a:not(.btn) { font-size: 1.3rem; font-family: var(--serif); color: var(--cream-on-dark); }

  .about-grid, .contact-inner { grid-template-columns: 1fr; }
  .about-portrait { max-width: 24rem; }
  .steps { grid-template-columns: 1fr; gap: 2.2rem; }
  .work-grid { grid-template-columns: 1fr; }
  /* Concept cards drop to compact rows on phones: small still, name, link */
  .work-secondary { grid-template-columns: 1fr; gap: 0.9rem; }
  .work-card-sm { display: grid; grid-template-columns: 9rem 1fr; align-items: center; }
  /* the cell sizes the still and the image crops to it; an aspect ratio
     plus height 100% made the still wider than its column and slid it
     under the first letters of the text */
  .work-card-sm .work-media { aspect-ratio: auto; width: 100%; height: 100%; min-height: 5.6rem; }
  .work-card-sm .work-body { padding: 0.8rem 1rem; }
  .ledger-row { grid-template-columns: 1fr auto; }
  .ledger-desc { grid-column: 1 / -1; margin-top: 0.2rem; }
  .step-extra { grid-template-columns: 1fr; }
  .step-extra-badge { grid-row: auto; }
  .step-extra-tag, .step-extra h3, .step-extra p, .step-extra-link { grid-column: 1; }
  /* Phones keep the pinned, folding device and the live embed. svh keeps
     the sticky stage steady while the browser chrome collapses. */
  .showcase-stage { height: 100svh; }
  .showcase-screen { aspect-ratio: 16 / 11; }
}

@media (max-width: 480px) {
  .hero-actions .btn { width: 100%; }
}

/* ---------- Reduced motion: everything readable, effects stand down ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .scroll-hint::after { animation: none; }
  .rw-ch { animation: none; }
  .rw-caret { display: none; }
  html.has-js .reveal { opacity: 1; transform: none; transition: none; }
  .work-card, .package, .btn, .work-media img, .t-card, .t-dot { transition: none; }
}

/* Letters split for the cursor weight swell. Inline block so variation
   changes never reflow the line. */
.hero-word { display: inline-block; white-space: nowrap; }
.hero-ch { display: inline-block; transition: font-variation-settings 0.18s ease-out; }

/* One-line promise under each package name */

/* The promise that replaces a guarantee: quiet, set apart, easy to find */
.build-promise {
  margin: clamp(2rem, 4vw, 2.8rem) 0 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--cream-edge);
  padding-top: 1.1rem;
  max-width: 46rem;
}

/* ---------- Testimonials ----------
   A client's words in the screening room. Dark band on the home page,
   with a card that matches the work cards; the same pieces read on cream
   on the dedicated page (base styles are cream, .band-dark overrides). */
.testimonials { position: relative; overflow: hidden; }
/* Amy's call: the proof moment stays dark, but on a lifted ground with
   a gold hairline seam so it reads as its own room after the work band,
   never one merged black stretch */
.testimonials.band-dark { background: var(--bg-surface); border-top: 1px solid var(--hairline-dark); }
.testimonials-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.testimonials-intro { align-self: center; }

/* Left column: dots (only shown when there is more than one) and the link out */
.t-nav { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-top: 1.6rem; }
.t-arrow {
  display: inline-grid;
  place-items: center;
  width: 2.3rem; height: 2.3rem;
  padding: 0;
  border: 1px solid rgba(133, 104, 37, 0.5);
  border-radius: 50%;
  background: transparent;
  color: var(--gold-deep);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.band-dark .t-arrow { border-color: rgba(201, 168, 76, 0.4); color: var(--gold-bright); }
.t-arrow:hover { background: var(--gold); border-color: var(--gold); color: #1A1409; }
.t-arrow svg { width: 1.15rem; height: 1.15rem; display: block; }
.t-dot {
  width: 0.62rem;
  height: 0.62rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(133, 104, 37, 0.3);
  transition: width 0.35s var(--ease), background-color 0.35s var(--ease);
}
.t-dot.is-active { width: 2rem; background: var(--gold-deep); }
.band-dark .t-dot { background: rgba(201, 168, 76, 0.3); }
.band-dark .t-dot.is-active { background: var(--gold-bright); }

.t-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.8rem;
  color: var(--gold-deep);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}
.band-dark .t-more { color: var(--gold-bright); }
.t-more:hover { color: var(--ink); }
.band-dark .t-more:hover { color: var(--gold); }
.t-more span { transition: transform 0.3s var(--ease); }
.t-more:hover span { transform: translateX(4px); }

/* Right column: the cards, stacked in one grid cell so the stage sizes to
   the tallest and they can crossfade. */
.t-track { display: grid; align-items: start; margin: 0; padding: 0; list-style: none; }
.t-card {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--cream-edge);
  border-radius: var(--radius-lg);
  padding: clamp(1.7rem, 3.4vw, 2.6rem);
  box-shadow: 0 18px 44px -22px rgba(40, 30, 15, 0.4);
  opacity: 0;
  visibility: hidden;
  transform: translateX(26px) scale(0.985);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease), visibility 0.55s var(--ease);
}
.t-card.is-active { opacity: 1; visibility: visible; transform: none; }
.band-dark .t-card {
  background: var(--bg-elevated);
  border: 0;
  box-shadow: 0 18px 50px -24px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--hairline-dark-soft) inset;
}

.t-stars { display: flex; gap: 0.35rem; margin-bottom: 1.3rem; color: var(--gold-deep); }
.band-dark .t-stars { color: var(--gold-bright); }
.t-stars svg { width: 1.15rem; height: 1.15rem; display: block; }

.t-quote { margin: 0; }
.t-quote-mark {
  display: block;
  font-family: var(--serif);
  font-size: 3.2rem;
  line-height: 0.4;
  color: var(--gold-deep);
  opacity: 0.35;
  margin-bottom: 0.7rem;
}
.band-dark .t-quote-mark { color: var(--gold); }
.t-quote p {
  margin: 0;
  font-size: clamp(1.03rem, 0.98rem + 0.4vw, 1.2rem);
  line-height: 1.62;
  color: var(--ink);
}
.band-dark .t-quote p { color: var(--cream-on-dark); }

.t-by {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.7rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--cream-edge);
}
.band-dark .t-by { border-top-color: var(--hairline-dark); }
.t-avatar {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 1.35rem;
  line-height: 1;
  color: #1A1409;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  box-shadow: 0 6px 16px -6px rgba(201, 168, 76, 0.55);
}
/* When a client has a real logo or a photo, it replaces the monogram. Drop
   the gold disc and just frame the image in the same circle, with a hairline
   ring that adapts to the ground it sits on. */
.t-avatar--img { background: none; overflow: hidden; box-shadow: 0 0 0 1px var(--cream-edge), 0 6px 16px -8px rgba(0, 0, 0, 0.3); }
.band-dark .t-avatar--img { box-shadow: 0 0 0 1px var(--hairline-dark), 0 6px 16px -8px rgba(0, 0, 0, 0.6); }
.t-avatar--img img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }

.t-name { margin: 0; font-family: var(--serif); font-size: 1.15rem; color: var(--ink); }
.band-dark .t-name { color: var(--cream-on-dark); }
.t-role { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.band-dark .t-role { color: var(--soft-on-dark); }

/* ---------- Dedicated testimonials page ---------- */
.page-head { padding-top: clamp(7rem, 15vh, 9.5rem); }
.t-full { max-width: 48rem; margin: 0 auto; }
.t-full + .t-full { margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--cream-edge); }
.t-full blockquote { margin: 0; }
.t-full .t-lead {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.15rem);
  line-height: 1.26;
  color: var(--ink);
  margin: 0 0 1.4rem;
}
.t-full blockquote p { margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); }
.t-full .t-by { margin-top: 2rem; padding-top: 1.6rem; }
.t-cta { text-align: center; }
.t-cta .btn { margin-top: 1.8rem; }
.t-back { display: inline-block; margin-top: 1.4rem; color: var(--soft-on-dark); text-decoration: none; font-size: 0.9rem; }
.t-back:hover { color: var(--gold-bright); }

/* Testimonials responsive. Placed after the base rules above so it wins the
   cascade (a media query adds no specificity, only the later rule does). */
@media (max-width: 880px) {
  .testimonials-grid { grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2.4rem); }
  .t-card { padding: clamp(1.5rem, 5vw, 2rem); }
}