/* =====================================================================
   BESPOKE BOOK PUBLISHING — MAIN STYLESHEET
   Single stylesheet for the whole site. Sections are separated by the
   comment banners below — find the one you need and edit there.
   ===================================================================== */


/* =====================================================================
   1. VARIABLES — global design tokens (colors, fonts, spacing, radius)
   Change values HERE ONLY — never hardcode a raw color/size elsewhere.
   Colors are pixel-sampled directly from the client's screenshots.
   ===================================================================== */

:root {
  /* ---- Colors ---- */
  --color-maroon: #5A1F2B;        /* primary brand color — headings, CTA text, logo */
  --color-maroon-dark: #3E1520;   /* hover/active state for maroon elements */
  --color-gold: #B18A4A;          /* muted accent gold — highlighted heading words */
  --color-gold-about: #AB8354;    /* About Us page accent gold (headings, stat numbers) —
                                      distinct exact value from --color-gold, client spec */
  --color-black: #000000;         /* nav links, phone number, "Get an Advice!" label */
  --color-charcoal: #2B2525;      /* paragraph copy, rating/review text */
  --color-text-secondary: #505050; /* softer body copy, e.g. intro section paragraphs */
  --color-cream: #F8F4EC;          /* off-white text on dark sections, e.g. process section */
  --color-card-bg: #EDE8E0;        /* services icon-box background */
  --color-card-text: #423A3A;      /* services icon-box description text */
  --color-star-gold: #FAD12B;     /* 5-star rating icons */
  --color-rating-green: #00B67A;  /* Trustpilot-style single star icon in rating row */
  --color-bg: #FFFFFF;            /* default page background */
  --color-bg-alt: #FAF7F2;        /* warm off-white, used for alternating section backgrounds */
  --color-border: #E8E3DC;        /* hairline borders, dividers */
  --color-white: #FFFFFF;

  /* ---- Fonts ----
     Each font is used exactly where the client's spec says, not swapped in generally:
       --font-nav      Cormorant Garamond  -> main navigation links
       --font-phone    Poppins             -> header phone number + "Get an Advice!" label
       --font-display  Kind Sans           -> hero heading, paragraph, rating/review text
       --font-cta      42dot Sans          -> "Start Your Book" CTA links/buttons site-wide
  */
  --font-nav: 'Cormorant Garamond', serif;
  --font-phone: 'Poppins', sans-serif;
  --font-display: 'Kind Sans', sans-serif;
  --font-cta: '42dot Sans', sans-serif;

  /* ---- Spacing scale ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* ---- Layout ---- */
  --container-max: 1400px;        /* section content container (hero and, by default, all
                                      sections unless told otherwise). Header is a deliberate
                                      full-width exception — see HEADER section below. */
  --container-pad: 1.25rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-pill: 999px;

  /* ---- Header ---- */
  --header-height: 78px;
}

/* Breakpoint reference (used consistently throughout this file):
   Mobile:  up to 767px   -> base styles, no media query
   Tablet:  768px–1023px  -> @media (min-width: 768px)
   Laptop+: 1024px and up -> @media (min-width: 1024px), extra check at 1280px+/1366px+
*/


/* =====================================================================
   2. FONTS — self-hosted @font-face declarations

   Kind Sans — client-supplied files (assets/fonts/kind-sans/).
   ⚠ LICENSING FLAG: the supplied files are "Demo for Personal Use" (from ifonts.xyz), not a
   commercial/web license. Used here per client's explicit instruction for now (dev/preview).
   MUST be swapped for a properly licensed copy (MyFonts/Gravitype) before the site goes live.
   Only the weights actually used on the site are declared below — add more only as needed.
   ===================================================================== */

@font-face {
  font-family: 'Kind Sans';
  src: url('../fonts/kind-sans/kindsans-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kind Sans';
  src: url('../fonts/kind-sans/kindsans-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kind Sans';
  src: url('../fonts/kind-sans/kindsans-semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kind Sans';
  src: url('../fonts/kind-sans/kindsans-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Kind Sans';
  src: url('../fonts/kind-sans/kindsans-heavy.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* =====================================================================
   3. BASE — reset, base typography, and the handful of truly site-wide
   elements (.container, .btn). Section-specific styling does NOT belong
   here — it belongs in its own banner below.
   ===================================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden; /* the closed mobile nav panel sits off-canvas via translateX(100%) —
                          without this it inflates scrollWidth and creates a horizontal scrollbar */
}

body {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-charcoal);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.15;
  color: var(--color-charcoal);
}

p {
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
}

/* Shared page container — every section wraps its content in this */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* Site-wide CTA link/button, e.g. "Start Your Book ->" — reused in every section.
   Font: 42dot Sans, bold, 22px at desktop (per client spec). Earlier "grow
   wider underline", "highlighter rise", and "box-shadow/text-shadow glow"
   versions were all scrapped per client feedback (too basic / too boxy).
   Hover: a diagonal light sheen sweeps across the text once, like a glossy
   highlight catching the light — built via two background-image layers
   clipped to the text (background-clip: text): a solid base-color layer
   plus a soft diagonal highlight band, with a resting position that sweeps
   across on hover. Since color is transparent (required for background-clip:
   text to show through), the arrow and underline can't rely on currentColor
   anymore and get their own explicit colors below.
   Underline: NOT hover-gated — always animating (client-supplied keyframe),
   an absolutely-positioned ::after growing 0% -> 100% width from the center
   outward while fading from maroon to transparent, looping continuously
   (2s) to keep drawing the eye even before anyone hovers. Positioned
   absolutely (left: 50% + translateX(-50%) instead of the sample's
   margin: auto) because .btn is inline-flex, not inline-block, so a plain
   block-level ::after would sit as a flex sibling next to the text/arrow
   instead of stacking underneath. */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-cta);
  font-weight: 700;
  font-size: 1rem;
  padding-bottom: 4px;
  white-space: nowrap;
  background-image:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.95) 48%, transparent 66%),
    linear-gradient(var(--color-maroon), var(--color-maroon));
  background-size: 300% 100%, 100% 100%;
  background-position: 150% 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 0.85s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 0.25s ease;
}

.btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: var(--underline-color, var(--color-maroon));
  transform: translateX(-50%);
  animation: btn-underline 2s infinite;
}

@keyframes btn-underline {
  0% { width: 0%; background-color: var(--underline-color, var(--color-maroon)); }
  100% { width: 100%; background-color: transparent; }
}

.btn:hover {
  letter-spacing: 0.01em;
  background-position: -80% 0, 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .btn::after {
    animation: none;
    width: 100%;
  }

  .btn {
    transition: none;
  }

  .btn:hover {
    background-position: 150% 0, 0 0;
  }
}

/* Light-on-dark modifier — same sweep/underline/arrow mechanic as .btn,
   just with white as the base "ink" color instead of maroon, for CTAs sitting
   on a dark section (e.g. the Book Publishing Service hero). */
.btn--light {
  background-image:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.65) 48%, transparent 66%),
    linear-gradient(var(--color-white), var(--color-white));
  --underline-color: var(--color-white);
}

.btn__arrow {
  position: relative;
  display: inline-block;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  vertical-align: -0.15rem;
  font-size: 0; /* hides the real glyph text node — the ::before/::after
                   pseudo-elements below are what actually render it, so it
                   isn't tripled on top of them */
}

.btn__arrow::before,
.btn__arrow::after {
  content: '\2197';
  position: absolute;
  top: 0;
  left: 0;
  font-size: 1rem;
  line-height: 1;
  color: var(--underline-color, var(--color-maroon)); /* the parent's own color is
                                  transparent (.btn's background-clip: text trick),
                                  so the arrow needs an explicit color instead of
                                  currentColor — reuses the same brand-tint custom
                                  property as the underline so .footer-cta__cta's
                                  charcoal arrow doesn't come out maroon */
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1), color 0.25s ease;
}

.btn__arrow::after {
  transform: translate(-140%, 140%);
}

.btn:hover .btn__arrow::before,
.btn:hover .btn__arrow::after {
  color: var(--color-maroon-dark);
}

.btn--light:hover .btn__arrow::before,
.btn--light:hover .btn__arrow::after {
  color: var(--color-cream);
}

.footer-cta__cta:hover .btn__arrow::before,
.footer-cta__cta:hover .btn__arrow::after {
  color: var(--color-black);
}

.btn:hover .btn__arrow::before,
.footer-cta__cta:hover .btn__arrow::before {
  transform: translate(140%, -140%);
}

.btn:hover .btn__arrow::after,
.footer-cta__cta:hover .btn__arrow::after {
  transform: translate(0, 0);
}

/* Screen-reader-only text */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .btn {
    font-size: 1.375rem; /* 22px */
  }
}

/* Respect reduced-motion preference site-wide (sliders/animations opt into this) */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* =====================================================================
   4. HEADER — site header / main navigation
   Partial: includes/header.php, used on every page.
   Deliberately full-width (not wrapped in .container) per client spec — its own edge
   padding stands in for the container's side gutter.
   ===================================================================== */

.site-header {
  background: transparent;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: padding 0.3s ease;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--space-sm);
  min-height: var(--header-height);
  width: 100%;
  padding: 0 clamp(1.25rem, 4vw, 3.75rem);
  transition: background 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease;
}

/* Sticky/scrolled state — floating pill, per reference screenshot */
.site-header.is-sticky {
    padding: 0.2rem clamp(0rem, 10vw, 10rem);
    background: transparent;
}

.site-header.is-sticky .site-header__inner {
    background: #EDEDED;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: var(--radius-pill);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    min-height: 60px; /* client value for small screens — back to 80px from tablet up */
}

.site-header__logo {
  flex-shrink: 0;
}

.site-header__logo img {
  height: 40px; /* smaller on mobile so it fits alongside the phone block + nav
                   toggle at narrow widths — full 60px from tablet up */
  width: auto;
}

/* Phone / contact block */
.site-header__phone {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.site-header__phone-icon {
  position: relative;
  z-index: 0; /* own stacking context, so the ::before/::after ring pulse
                 (z-index: -1) stays local to this icon instead of escaping
                 up to .site-header's stacking context — otherwise the
                 sticky pill's opaque background (.is-sticky .site-header__inner)
                 paints over the rings and hides them */
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-maroon);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease;
}

/* Always-on "incoming call" cue — two staggered rings ripple outward from
   the icon continuously (not just on hover), so it draws the eye even
   before anyone interacts with it (pointer-events: none so they never
   block the click). Hover adds a darker icon background and a single
   quick "ring" shake on top of the ambient pulse. Rings sit behind the
   icon's own solid circle via z-index so they read as an emanating pulse,
   not an overlay on top of the icon. */
.site-header__phone-icon::before,
.site-header__phone-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-maroon);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  animation: phone-ring-pulse 1.8s ease-out infinite;
}

.site-header__phone-icon::after {
  animation-delay: 0.6s;
}

.site-header__phone:hover .site-header__phone-icon {
  background: var(--color-maroon-dark);
}

@keyframes phone-ring-pulse {
  0% { transform: scale(1); opacity: 0.55; }
  100% { transform: scale(1.7); opacity: 0; }
}

.site-header__phone-icon svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transform-origin: 50% 50%;
}

.site-header__phone:hover .site-header__phone-icon svg {
  animation: phone-icon-ring 0.5s ease-in-out;
}

@keyframes phone-icon-ring {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-16deg); }
  40% { transform: rotate(13deg); }
  60% { transform: rotate(-8deg); }
  80% { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__phone-icon::before,
  .site-header__phone-icon::after,
  .site-header__phone:hover .site-header__phone-icon svg {
    animation: none;
  }
}

/* Mobile: the number shows at rest and drops away once the header shrinks into
   its sticky pill, leaving just the icon circle beside the hamburger (client
   instruction). The "Get an Advice!" label above it stays tablet-and-up only. */
.site-header.is-sticky .site-header__phone-text {
  display: none;
}

.site-header__phone-label {
  display: none; /* shown from tablet up */
  font-family: var(--font-phone);
  font-weight: 500;
  font-size: 0.5625rem; /* 9px */
  line-height: normal;
  color: var(--color-black);
}

.site-header__phone-number {
  display: block;
  font-family: var(--font-phone);
  font-weight: 500;
  font-size: 0.8125rem; /* small screens only — 16px from tablet up, where the
                           row isn't competing with the logo + hamburger */
  line-height: normal;
  color: var(--color-black);
  white-space: nowrap;
  transition: color 0.2s ease;
}

.site-header__phone:hover .site-header__phone-number {
  color: var(--color-maroon);
}

/* Mobile nav toggle (hamburger) */
.site-header__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  padding: 0;
  flex-shrink: 0;
}

.site-header__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-black);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-header__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Nav list */
.site-nav__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.site-nav__item {
  width: 100%;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem; /* scales up to 23px at desktop */
  line-height: normal;
  text-transform: uppercase;
  color: var(--color-black);
  padding: 0.35rem 0;
}

.site-nav__link.is-active,
.site-nav__link:hover {
  color: var(--color-maroon);
}

.site-nav__caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.2s ease;
}

.site-nav__item.is-open .site-nav__caret {
  transform: rotate(225deg);
  margin-top: 3px;
}

.site-nav__dropdown {
  display: none;
  padding-left: var(--space-md);
  margin-top: var(--space-xs);
}

.site-nav__item.is-open .site-nav__dropdown {
  display: block;
}

.site-nav__dropdown li + li {
  margin-top: var(--space-xs);
}

.site-nav__dropdown a {
  font-family: var(--font-nav);
  font-size: 1rem;
  color: var(--color-charcoal);
}

.site-nav__dropdown a:hover {
  color: var(--color-maroon);
}

/* Services mega menu (.site-nav__dropdown--mega). Reuses .site-nav__dropdown's existing
   show/hide mechanics (hover/focus-within/.is-open, the mobile tap toggle in main.js) as-is
   — only the panel's own internal layout differs. Mobile/tablet (below 1024px): plain
   single-column icon+label list, promo panel hidden, same footprint as the old 4-link
   dropdown. Desktop (1024px+, see that breakpoint below): icon grid + promo panel side by
   side. Icons are a new, generic outline icon set (no client artwork supplied) — best-effort,
   flagged in includes/header.php; swap for real icon assets if the client provides any. */
.megamenu__grid {
  list-style: none;
  margin: 0;
  padding: 0;
}

.megamenu__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease;
}

.megamenu__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-bg-alt);
  color: var(--color-maroon);
  transition: background 0.2s ease, color 0.2s ease;
}

.megamenu__icon svg {
  width: 1.1rem;
  height: 1.1rem;
}

.megamenu__label {
  font-family: var(--font-nav);
  font-size: 1rem;
  color: var(--color-charcoal);
  transition: color 0.2s ease;
}

.megamenu__item:hover .megamenu__icon {
  background: var(--color-maroon);
  color: var(--color-white);
}

.megamenu__item:hover .megamenu__label {
  color: var(--color-maroon);
}

.megamenu__promo {
  display: none; /* desktop-only enhancement — see 1024px+ below */
}

/* ---- Header: Mobile (base, up to 767px) ---- */
.site-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  padding: var(--space-lg) clamp(1.25rem, 4vw, 3.75rem);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  border-top: 1px solid var(--color-border);
}

.site-nav.is-open {
  transform: translateX(0);
}

/* Below 1024px the nav panel is position:fixed (out of the flex flow), so this
   auto margin pushes the phone block AND the hamburger after it hard against the
   right edge, with the logo alone on the left — the grouping the client's
   reference header shows. Reset at 1024px, where the nav is back in the row. */
.site-header__contact {
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* ---- Header: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .site-header.is-sticky .site-header__inner {
    min-height: 80px;
  }

  /* The pill is roomy again from here up, so the number stays put when sticky */
  .site-header.is-sticky .site-header__phone-text {
    display: block;
  }

  .site-header__phone-label {
    display: block;
  }

  .site-header__phone-number {
    font-size: 1rem;
  }

  .site-header__logo img {
    height: 60px;
  }
}

/* ---- Header: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .site-header__toggle {
    display: none;
  }

  .site-header__contact {
    margin-left: 0; /* nav is back in the flex row here, so it does the spacing */
  }

  .site-nav {
    position: static;
    top: auto;
    transform: none;
    background: none;
    border-top: none;
    padding: 0;
    overflow: visible;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-lg);
  }

  .site-nav__link {
    font-size: 1rem; /* 23px, exact spec */
  }

  .site-header__phone-label {
    font-size: 0.5625rem; /* 9px, exact spec */
  }

  .site-header__phone-number {
    font-size: 1.25rem; /* 23px, exact spec */
  }

  .site-nav__item {
    width: auto;
    position: relative;
  }

  .site-nav__dropdown {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    padding: var(--space-xs) 0;
    margin-top: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  }

  .site-nav__item.has-dropdown:hover .site-nav__dropdown,
  .site-nav__item.has-dropdown:focus-within .site-nav__dropdown,
  .site-nav__item.is-open .site-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .site-nav__dropdown a {
    display: block;
    padding: 0.5rem 1.25rem;
  }

  .site-nav__dropdown a:hover {
    background: var(--color-bg-alt);
  }

  .site-nav__dropdown li + li {
    margin-top: 0;
  }

  /* ---- Services mega menu: desktop layout (icon grid + promo panel) ---- */
  .site-nav__dropdown--mega {
    left: 50%;
    right: auto;
    min-width: 0;
    width: 1100px; /* wide enough that every service label fits on one line instead of wrapping awkwardly */
    max-width: calc(100vw - 2.5rem); /* keeps the panel from overflowing the viewport on narrower 1024-1279px laptop widths */
    transform: translate(-50%, 8px);
    border-radius: var(--radius-md);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.14);
    padding: 0;
    overflow: hidden;
  }

  .site-nav__item.has-dropdown:hover .site-nav__dropdown--mega,
  .site-nav__item.has-dropdown:focus-within .site-nav__dropdown--mega,
  .site-nav__item.is-open .site-nav__dropdown--mega {
    transform: translate(-50%, 0);
  }

  .megamenu {
    display: flex;
    align-items: stretch;
  }

  .site-nav__dropdown--mega .megamenu__grid {
    flex: 1 1 62%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem 1rem;
    padding: var(--space-md);
  }

  .site-nav__dropdown--mega .megamenu__item {
    display: flex;
    padding: 0.6rem 0.75rem;
  }

  .megamenu__promo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 38%;
    padding: var(--space-lg) var(--space-lg);
    background: linear-gradient(135deg, var(--color-maroon) 0%, #000000 100%);
    color: var(--color-white);
  }

  .megamenu__promo-eyebrow {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-gold-about);
  }

  .megamenu__promo-heading {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.3;
    color: var(--color-white);
    margin-top: var(--space-xs);
  }

  .megamenu__promo-text {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
    margin-top: var(--space-sm);
  }

  .megamenu__promo-cta {
    margin-top: var(--space-lg);
  }

  /* .site-nav__dropdown a's own color rule (for the plain-list dropdown style) otherwise
     beats .btn's color: transparent here on specificity, breaking the sweep-text-clip
     effect the "Start Your Book" button relies on — reset it explicitly, at rest and hover. */
  .megamenu__promo .btn,
  .megamenu__promo .btn:hover {
    color: transparent;
  }

  /* .site-nav__dropdown a:hover's `background: var(--color-bg-alt)` (below) uses the
     background SHORTHAND, which resets every other background-* longhand — including
     background-image and background-clip — to their initial values on hover. That wiped
     out .btn's entire sweep/text-clip gradient on hover specifically (the button rendered
     as a solid cream box with invisible text, since color is transparent and there was no
     longer a background-image for it to clip through). Restore the full stack explicitly. */
  .megamenu__promo .btn:hover {
    background-image:
      linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.65) 48%, transparent 66%),
      linear-gradient(var(--color-white), var(--color-white));
    background-size: 300% 100%, 100% 100%;
    background-repeat: no-repeat;
    background-position: -80% 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* Header: respect reduced motion — skip the slide/rotate transitions */
@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .site-header__toggle span,
  .site-nav__caret,
  .site-nav__dropdown {
    transition: none;
  }
}


/* =====================================================================
   5. HERO / BANNER — Home page only (index.php)
   Container: 1400px (var(--container-max)), per client spec.
   ===================================================================== */

.hero {
  padding-top: 60px;
  padding-bottom: 0;
  /* Client spec: linear-gradient #fff 0% -> #fff 100% (both stops white — effectively
     solid white for now; written as a gradient in case a second color is added later). */
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
}

.hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hero__content {
  max-width: 640px;
  position: relative;
  z-index: 2; /* stays above the hero media's overlapping shadow at desktop */
}

.hero__title {
  margin-bottom: var(--space-md);
}

/* Mobile: the two coloured halves run as inline text so the heading wraps as one
   sentence — "#01 Book Writing Services" / "For Best-Selling Authors" — instead of
   each half forcing its own line and stranding "For" alone on the middle one
   (client correction). The whitespace between the two spans in the markup supplies
   the space between them. Back to one line per colour from tablet up, where the
   design calls for the stacked treatment and there's room for it. */
.hero__title-line {
  display: inline;
  font-family: var(--font-display);
  line-height: normal;
}

.hero__title-line--maroon {
  color: var(--color-maroon);
  font-weight: 800; /* Heavy */
  font-size: 2rem;
}

.hero__title-line--gold {
  color: var(--color-gold);
  font-weight: 700; /* Bold */
  font-size: 1.75rem;
}

.hero__text {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--color-charcoal);
  line-height: normal;
  font-size: 1rem;
  margin-bottom: var(--space-md);
  max-width: 30rem;
}

.hero__cta {
  margin-bottom: var(--space-md);
}

.hero__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.hero__rating-icon,
.hero__rating-badge {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.hero__rating-score {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: normal;
  color: var(--color-charcoal);
}

.hero__stars {
  width: 90px;
  height: auto;
}

.hero__reviews {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8rem;
  line-height: normal;
  color: var(--color-charcoal);
}

/* Hidden on small screens per client instruction — the book/tablet mockup ate a
   full phone screen above the fold. Shown again from tablet up. */
.hero__media {
  display: none;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.hero__media-img {
  width: 100%;
  max-width: 440px;
  height: auto;
}

/* ---- Hero: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .hero__media {
    display: flex;
  }

  .hero__title-line {
    display: block;
  }

  .hero__title-line--maroon {
    font-size: 2.75rem;
  }

  .hero__title-line--gold {
    font-size: 2.375rem;
  }

  .hero__text,
  .hero__rating-score,
  .hero__reviews {
    font-size: 1.125rem;
  }
}

/* ---- Hero: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .hero {
    padding-top: 60px; /* gap under the full-width header, per reference */
  }

  .hero__inner {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
  }

  .hero__content {
    flex: 0 0 auto;
    width: 660px; /* wide enough that "#01 Book Writing" stays on one line at 73px,
                     matching the reference's 2-line wrap; fixed so it doesn't shrink
                     as the media column grows */
    max-width: 46%;
  }

  .hero__title-line--maroon {
    font-size: 3.75rem;
  }

  .hero__title-line--gold {
    font-size: 3.25rem;
  }

  .hero__text {
    font-size: 1.25rem;
  }

  .hero__media {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
    /* Pull the book/tablet graphic left so its shadow bleeds toward the heading column,
       matching the reference — content sits above it via z-index. */
    margin-left: -10%;
  }

  .hero__media-img {
    max-width: 880px;
  }
}

/* ---- Hero: extra check at larger laptop/desktop widths — exact client spec values ---- */
@media (min-width: 1280px) {
  .hero__title-line--maroon {
    font-size: 4rem; /* 73px */
  }

  .hero__title-line--gold {
    font-size: 3.5rem; /* 63px */
  }

  .hero__text {
    font-size: 1.375rem; /* 22px, per client correction */
  }

  .hero__rating-score,
  .hero__reviews {
    font-size: 1.1875rem; /* 19px */
  }

  .hero__media-img {
    max-width: 960px;
  }
}


/* =====================================================================
   6. FEATURED-IN LOGOS — standalone section (NOT part of hero),
   Home page only (index.php). Continuous CSS-animated marquee (no JS/Swiper —
   a constant-speed loop like this is smoother via a plain transform animation
   than a slider library built for discrete slide-to-slide navigation).
   Container: 1200px — deliberately narrower than the site's default 1400px.
   ===================================================================== */

.logos-section {
  padding: var(--space-md) 0;
}

/* ---- Logos: Laptop / Desktop (1024px and up) ----
   The home hero row's height is set by the media image (taller than the text
   column, flex-start aligned), which leaves dead space below the text before
   this section starts. Pull it up to close that gap rather than shrinking the
   image. Scoped to directly-after-.hero (not just .logos-section) since this
   partial is also reused after other pages' banners (e.g. About Us) that
   don't have that same dead space. */
@media (min-width: 1024px) {
  .hero + .logos-section {
    margin-top: -110px;
  }
}

.logos-section__container {
    max-width: 1100px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 60%, transparent 90%);
}

.logos-track {
  display: flex;
  width: max-content;
  animation: logos-scroll 42s linear infinite; /* client value for small screens — 22s from tablet up */
}

.logos-track:hover {
  animation-play-state: paused;
}

.logos-track__group {
  display: flex;
  flex-shrink: 0;
}

.logos-track__item {
  width: 130px; /* every logo gets the same slot width, per client spec */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 56px;
}

.logos-track__item img {
  max-width: 100%;
  max-height: 60px; /* client value for small screens — steps back down from tablet up */
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.55;
}

@keyframes logos-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logos-track {
    animation: none;
  }
}

/* ---- Logos: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .logos-track {
    animation-duration: 22s;
  }

  .logos-track__item {
    width: 150px;
  }

  .logos-track__item img {
    max-height: 32px;
  }
}

/* ---- Logos: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .logos-track__item {
    width: 170px;
  }

  .logos-track__item img {
    max-height: unset;
  }
}


/* =====================================================================
   7. INTRO / MANIFESTO — "Most houses are built around books..."
   Home page only (index.php). Container: default 1400px.

   ⚠ CTA font/size conflict with hero: this section's spec says the
   "Start Your Book" link is Kind Sans / 29px, while the hero's spec said
   42dot Sans / 22px for the same repeated .btn component. Built exactly per
   each section's own screenshot/spec (scoped override below) rather than
   picking one — flag if these should actually match site-wide.
   ===================================================================== */

.intro {
  padding: 20px 0; /* client value for small screens — back to var(--space-xl) from tablet up */
}

.intro__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.intro__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.45;
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
}

.intro__cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.intro__cta {
  font-family: var(--font-display);
  font-size: 1.125rem;
}

.intro__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.intro__text + .intro__text {
  margin-top: var(--space-md);
}

/* ---- Intro: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .intro {
    padding: var(--space-xl) 0;
  }

  .intro__heading {
    font-size: 2.25rem;
  }

  .intro__cta,
  .intro__text {
    font-size: 1.375rem;
  }
}

/* ---- Intro: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .intro__inner {
    flex-direction: row;
    gap: var(--space-xl);
  }

  .intro__col {
    flex: 1;
  }

  .intro__heading {
    font-size: 2.5rem;
  }

  .intro__cta,
  .intro__text {
    font-size: 1.625rem;
  }
}

/* ---- Intro: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .intro__heading {
    font-size: 2.8125rem; /* 45px */
  }

  .intro__cta {
    font-size: 1.8125rem; /* 29px */
  }

  .intro__text {
    font-size: 1.5625rem; /* 25px */
  }
}


/* =====================================================================
   8. THE WHOLE PROCESS — scroll-pinned 4-stage panel, Home page only.
   Reference: twspublications.com "Solo Publications" section.
   The section is a tall scroll wrapper; its inner panel is position:sticky and
   JS (main.js, initProcessScroller) swaps the visible stage and fills the rail
   bar based on scroll progress through that wrapper.
   The pin now runs at EVERY width (client instruction: "process should work the
   same in mobile as in desktop") — it used to be disabled below 1024px, where
   all 4 stages simply stacked. Only the layout/sizing differs by breakpoint:
   mobile/tablet stack the copy above the art in a compact panel, desktop puts
   them side by side.
   ===================================================================== */

.process {
  /* one-off dark background — not reused elsewhere, so not a token */
  background: #1D1B1A;
  color: var(--color-white);
  height: calc(var(--process-stage-count, 4) * 70vh);
}

.process__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh; /* avoids the mobile URL-bar jump where supported; the 100vh
                     line above stays as the fallback for older browsers */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* not center: if content is ever too tall, clip the bottom, never the heading under the header */
  overflow: hidden;
  padding: 80px 0 28px; /* mobile: top clears the floating header pill; 30px 0 (client raw-CSS paste) from 768px */
}

/* Fills the pinned panel's height so .process__rail is pushed to the very bottom
   of the viewport instead of ending up centred with dead space under it (the art
   then had nowhere to go but flush against the rail — client caught both). */
.process__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
  min-height: 0;
}

.process__heading {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-cream); /* base h1-h4 rule sets charcoal directly on the element,
                                 which wins over the .process ancestor's inherited color */
  margin-bottom: var(--space-sm);
}

.process__heading em {
  font-style: italic;
  color: var(--color-gold);
}

.process__subtext {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--color-cream);
  max-width: 34rem;
  margin-bottom: var(--space-xs);
}

/* One stage visible at a time at every width — all 4 are stacked into the SAME
   grid cell and cross-faded by the scroll scrubber, so the panel's height never
   changes as stages swap. Grid stacking rather than position:absolute on
   purpose: absolute children contribute no height, so the block had to guess a
   min-height, and any stage whose copy wrapped past that guess spilled out and
   overlapped the art below it on narrow screens (a real bug the client caught).
   In a grid cell the block simply sizes itself to the tallest stage. */
.process__stages {
  display: grid;
}

.process__stage {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}

.process__stage.is-active {
  opacity: 1;
  visibility: visible;
}

.process__stage-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  line-height: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-xs);
}

.process__stage-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-cream);
  margin-bottom: var(--space-xs);
}

.process__stage-text {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  line-height: 1.45;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.65);
  max-width: 34rem;
}

/* Paper-stack art — plain CSS (no reference asset supplied for this section) */
/* Viewport-relative on phones so the whole pinned panel still fits one screen on
   a short device (the panel is height-capped and clips what doesn't fit) —
   fixed pixel sizes take over from tablet up. */
.process__art {
  position: relative;
  height: clamp(80px, 30vh, 350px); /* mobile: small enough that copy + art + rail fit a 375x667 panel; client's 130px/40vh clamp returns at 768px */
  margin: auto; /* auto on all four sides: centres the art horizontally as before,
                   and vertically inside whatever space is left between the copy
                   above it and the rail below, so it never sits on the rail */
  width: clamp(63px, 25vh, 250px);
}

.process__sheet {
  position: absolute;
  inset: 0;
  background: #F4F1EA;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: background-color 0.3s ease;
}

.process__sheet--a {
  transform: rotate(-18deg) translate(-10px, 6px);
}

.process__sheet--b {
  transform: rotate(14deg) translate(12px, 2px);
}

.process__sheet--c {
  transform: none; /* the front sheet stays upright/straight — only the back
                       sheets (a/b) fan out at an angle, per the reference */
}

/* Red hand-drawn edit marks on the front sheet — Stage 2 only, per the reference.
   Three groups accumulate in sequence (line+loop, then extra lines, then arrow),
   then all fade out together before the Production blur. Built with plain CSS
   shapes (no SVG asset), matching the reference's marks as closely as CSS allows. */
.process__sheet--c .process__marks {
  position: absolute;
  top: 30%;
  left: 16%;
  right: 16%;
}

.process__mark-group {
  opacity: 0;
}

.process__mark-group--1 {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14%;
}

.process__mark-line {
  display: block;
  height: 2px;
  background: #B23B30;
  border-radius: 2px;
}

.process__mark-line--short {
  width: 50%;
}

.process__mark-line--full {
  width: 100%;
}

.process__mark-loop {
  width: 12px;
  height: 12px;
  border: 2px solid #B23B30;
  border-radius: 50%;
  flex-shrink: 0;
}

.process__mark-group--2 .process__mark-line + .process__mark-line {
  margin-top: 8px;
}

.process__mark-group--3 {
  margin-top: 14%;
  text-align: right;
}

.process__mark-arrow {
  display: inline-block;
  color: #B23B30;
  font-size: 1.25rem;
  line-height: 1;
}

.process__book {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0; /* driven continuously by the scroll scrubber (main.js) */
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.process__book img {
  width: 100%;
  height: 100%;
}

/* Production stage: the front sheet blurs and desaturates to a plain grey page
   (client reference) right before it cross-fades into the book. */
.process__sheet--c.is-fading-out {
  background: #B7B4AC;
}

.process__rail {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin-top: var(--space-md); /* guaranteed clearance from the art even on a short
                                  phone, where the auto margins collapse to 0 */
}

.process__rail-inner {
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.process__rail-labels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: space-between;
}

.process__rail-label {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.4);
  transition: color 0.3s ease;
}

.process__rail-label.is-active {
  color: var(--color-white);
}

.process__rail-track {
  display: block;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
}

.process__rail-bar {
  display: block;
  height: 3px;
  width: 0%;
  background: var(--color-gold);
  transition: width 0.1s linear;
}

/* ---- Process: Tablet (768px and up) ----
   No .process__art override here on purpose. It used to be a fixed 200x250, but
   the client has since sized the phone art up past that twice, so a fixed tablet
   value only made the art SHRINK as the screen got wider. The base clamp carries
   through to tablet instead, and 1024px+ still jumps to its own fixed 350x500.
   The block below restores the roomier sizes that the compact phone base rules
   (tuned to fit a 375x667 panel) shrink. */
@media (min-width: 768px) {
  .process__sticky {
    justify-content: center;
    padding: 30px 0; /* client raw-CSS paste */
  }

  .process__inner {
    gap: var(--space-md);
  }

  .process__heading {
    font-size: 1.75rem;
    line-height: 1.36;
  }

  .process__subtext,
  .process__stage-text {
    font-size: 1rem;
    line-height: 1.6;
  }

  .process__subtext {
    line-height: 1.4;
    margin-bottom: var(--space-md);
  }

  .process__stages {
    margin-bottom: var(--space-lg);
  }

  .process__stage-title {
    font-size: 1.375rem;
    line-height: 1.36;
  }

  .process__art {
    height: clamp(130px, 40vh, 350px); /* client raw-CSS paste — exact values */
    width: clamp(105px, 31.5vh, 250px);
  }
}

/* ---- Process: Laptop / Desktop (1024px and up) — the pin itself is in the base
   rules above (it runs at every width); this block only widens the layout ---- */
@media (min-width: 1024px) {
  .process__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
  }

  .process__rail {
    margin-top: 0; /* the row above already fills the panel at this width */
  }

  .process__copy {
    max-width: 560px;
  }

  .process__heading {
    font-size: 2.75rem;
  }

  .process__subtext {
    font-size: 1.125rem;
  }

  .process__stage-label {
    font-size: 1.25rem;
  }

  .process__stage-title {
    font-size: 1.75rem;
  }

  .process__rail-label {
    font-size: 1.125rem;
  }

  .process__art {
    width: 350px;
    height: 500px;
  }
}

/* ---- Process: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .process__heading {
    font-size: 2.8125rem; /* 45px */
  }

  .process__subtext {
    font-size: 1.5625rem; /* 25px */
  }

  .process__stage-label {
    font-size: 1.6875rem; /* 27px */
  }

  .process__stage-title {
    font-size: 2.625rem; /* 42px */
  }

  .process__rail-label {
    font-size: 1.5625rem; /* 25px */
  }
}


/* =====================================================================
   9. WHAT WE DO / SERVICES — Home page only (index.php). Container: 1400px.
   Left column (book image) is a plain CSS sticky sidebar: the OUTER
   .services__media flex item stretches (default align-items) to match the
   height of .services__content, and the INNER .services__media-sticky is
   position:sticky — so it scrolls with the page and naturally releases once
   its stretched parent's bottom (the last icon box) is reached. No JS.
   ===================================================================== */

.services {
  background-image: url('../images/services/background.jpg');
  background-size: cover;
  background-position: center;
  background-color: var(--color-bg-alt);
  padding: var(--space-xl) 0;
}

.services__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.services__media-sticky {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.services__eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.36;
  color: var(--color-charcoal);
  margin-bottom: var(--space-sm);
}

.services__book-img {
  width: 100%;
}

.services__heading {
  margin-bottom: var(--space-sm);
}

.services__heading-part {
  font-family: var(--font-display);
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36;
}

.services__heading-part--dark {
  font-weight: 500;
  color: var(--color-charcoal);
}

.services__heading-part--maroon {
  font-weight: 800;
  color: var(--color-maroon);
}

.services__subtext {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  max-width: 34rem;
}

.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.services__card {
  background: var(--color-card-bg);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.services__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-maroon);
  margin-bottom: var(--space-sm);
}

.services__icon img {
  width: 35px;
  height: 35px;
}

.services__card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.36;
  color: var(--color-black);
  margin-bottom: var(--space-xs);
}

.services__card-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-card-text);
  margin-bottom: var(--space-sm);
}

.services__cta {
  font-family: var(--font-display); /* client spec: Kind Sans, overriding the
                                        global .btn's 42dot Sans for this section */
}

/* ---- Services: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .services__grid {
    grid-template-columns: 1fr 1fr;
  }

  .services__eyebrow {
    font-size: 1.25rem;
  }

  .services__heading-part {
    font-size: 2.25rem;
  }

  .services__subtext {
    font-size: 1.125rem;
  }

  .services__card-title {
    font-size: 1.375rem;
  }

  .services__card-text {
    font-size: 1rem;
  }
}

/* ---- Services: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .services__inner {
    flex-direction: row;
    gap: var(--space-xl);
  }

  .services__media {
    flex: 0 0 auto;
    width: 42%;
  }

  .services__media-sticky {
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }

  .services__content {
    flex: 1;
    min-width: 0;
  }

  .services__eyebrow {
    font-size: 1.375rem;
  }

  .services__heading-part {
    font-size: 2.5rem;
  }

  .services__subtext {
    font-size: 1.25rem;
  }

  .services__card-title {
    font-size: 1.5rem;
  }

  .services__card-text {
    font-size: 1.125rem;
  }
}

/* ---- Services: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .services__eyebrow {
    font-size: 1.625rem; /* 26px */
  }

  .services__heading-part {
    font-size: 2.8125rem; /* 45px */
  }

  .services__subtext {
    font-size: 1.6875rem; /* 27px */
  }

  .services__card-title {
    font-size: 1.75rem; /* 28px */
  }

  .services__card-text {
    font-size: 1.25rem; /* 20px */
  }
}


/* =====================================================================
   10. READY TO PUBLISH — CTA banner + book-cover slider (Swiper — a real
   navigable slider, unlike the logos marquee, so it uses the library per
   our stack decision). Container: default 1400px.
   Shared partial (includes/publish-cta.php) — originally home-page-only,
   extracted so any page can reuse it (currently index.php and about.php,
   right after its stats section). Content/markup unchanged by that
   extraction — still just the image, heading, text, and "Start Your Book"
   button, no phone widget (see Section 9 note on the phone+CTA pairing
   having been removed from this section per earlier client instruction).
   ===================================================================== */

.publish-cta {
  background: var(--color-white);
  padding: var(--space-xl) 0;
}

.publish-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Simple static image — no slider. */
.publish-cta__image {
  width: 100%;
  max-width: 550px;
  margin: 0 auto;
}

.publish-cta__heading {
  margin-bottom: var(--space-sm);
}

.publish-cta__heading-part {
  font-family: var(--font-display);
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36;
}

.publish-cta__heading-part--dark {
  font-weight: 500;
  color: var(--color-charcoal);
}

.publish-cta__heading-part--maroon {
  font-weight: 600;
  color: var(--color-maroon);
}

.publish-cta__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  max-width: 34rem;
}

.publish-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
}

.publish-cta__cta {
  font-family: var(--font-display); /* client spec: Kind Sans, overriding the
                                        global .btn's 42dot Sans for this section */
}

/* ---- Publish CTA: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .publish-cta__heading-part {
    font-size: 2.25rem;
  }

  .publish-cta__text {
    font-size: 1.125rem;
  }
}

/* ---- Publish CTA: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .publish-cta__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
  }

  .publish-cta__media {
    flex: 0 0 780px; /* matches .book-stage's own fixed width exactly, so it
                         never gets clipped by a narrower column */
  }

  .publish-cta__content {
    flex: 1;
    min-width: 0;
  }

  .publish-cta__heading-part {
    font-size: 2.5rem;
  }

  .publish-cta__text {
    font-size: 1.25rem;
  }
}

/* ---- Publish CTA: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .publish-cta__heading-part {
    font-size: 2.8125rem; /* 45px */
  }

  .publish-cta__text {
    font-size: 1.6875rem; /* 27px */
  }
}


/* =====================================================================
   11. PORTFOLIO — "Books We've Helped Bring to Life", Home page only.
   Reference: lineads.framer.website "Works" section. Container: default 1400px.
   3 columns of book covers, each auto-scrolling upward on an independent,
   seamless CSS loop (same duplicate-track technique as the Featured-In Logos
   marquee in section 6, just vertical instead of horizontal). No JS/Swiper —
   see section 6's note on why a constant-speed loop like this stays pure CSS.
   Mobile shows 2 of the 3 columns (covers are tall; 3-up is too narrow on a
   phone) — the 3rd column's markup stays in the DOM and appears from tablet up.
   ===================================================================== */

.portfolio {
  background: var(--color-white);
  padding: var(--space-xl) 0;
}

.portfolio__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.portfolio__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.portfolio__heading {
  margin-bottom: var(--space-sm);
}

/* Exact client spec (all breakpoints — not scaled down like other headings):
   Kind Sans, 45px, 136% line-height. Weight/color differ per part below. */
.portfolio__heading-part {
  font-family: var(--font-display);
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36;
}

.portfolio__heading-part--dark {
  font-weight: 500; /* Medium */
  color: #2B2525; /* client spec exact value, matches var(--color-charcoal) */
}

.portfolio__heading-part--maroon {
  font-weight: 800; /* Heavy */
  color: var(--color-maroon); /* #5A1F2B, client spec exact value */
  display: block; /* mobile only: forces "Bring to Life." onto its own second line
                     instead of breaking mid-phrase (client correction) — back to
                     inline flow from tablet up, where the full line fits */
}

.portfolio__subtext {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4; /* 140%, client spec */
  color: var(--color-text-secondary); /* #505050, client spec exact value */
  max-width: 50rem; /* wraps to 2 lines instead of 3, per client correction */
}

.portfolio__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  height: 520px;
  max-width: 640px; /* caps column width so covers render smaller than a full-bleed
                        column would, rather than shrinking the aspect-ratio itself */
  margin: 0 auto;
  overflow: hidden;
}

.portfolio__col {
  height: 100%;
  overflow: hidden;
  /* Generous fade zone (not a tight crop) so covers genuinely dissolve into the
     white background at the top/bottom, per the reference — no border-radius,
     since a rounded corner inside the fade reads as a hard-edged box instead. */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

/* 3rd column: hidden on mobile (see banner note), shown from tablet up */
.portfolio__col--3 {
  display: none;
}

.portfolio__track {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  animation: portfolio-scroll-up 38s linear infinite;
}

/* Columns 1 and 3 scroll downward, column 2 scrolls upward — alternating
   direction per column, per client spec. Durations are also staggered so the
   three tracks don't move in lock-step. */
.portfolio__col--1 .portfolio__track {
  animation-direction: reverse;
}

.portfolio__col--2 .portfolio__track {
  animation-duration: 34s;
  animation-delay: -12s;
}

.portfolio__col--3 .portfolio__track {
  animation-duration: 42s;
  animation-delay: -22s;
  animation-direction: reverse;
}

.portfolio__col:hover .portfolio__track {
  animation-play-state: paused;
}

.portfolio__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.portfolio__item {
  width: 100%;
  aspect-ratio: 2 / 3; /* book-cover proportions */
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.portfolio__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes portfolio-scroll-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio__track {
    animation: none;
  }
}

/* ---- Portfolio: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .portfolio__heading-part {
    font-size: 2.25rem;
  }

  .portfolio__heading-part--maroon {
    display: inline;
  }

  .portfolio__subtext {
    font-size: 1.125rem;
  }

  .portfolio__grid {
    grid-template-columns: repeat(3, 1fr);
    height: 640px;
    max-width: 820px;
  }

  .portfolio__col--3 {
    display: block;
  }
}

/* ---- Portfolio: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .portfolio__heading-part {
    font-size: 2.5rem;
  }

  .portfolio__subtext {
    font-size: 1.25rem;
  }

  .portfolio__grid {
    height: 760px;
    max-width: 980px;
    gap: var(--space-md);
  }
}

/* ---- Portfolio: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .portfolio__heading-part {
    font-size: 2.8125rem; /* 45px, client spec exact value */
  }

  .portfolio__subtext {
    font-size: 1.5625rem; /* 25px, per client correction */
  }

  .portfolio__grid {
    height: 840px;
    max-width: 1080px;
  }
}


/* =====================================================================
   12. WHY CHOOSE US — shared partial (includes/why-choose-us.php), originally
   home-page-only (sits between Portfolio and Testimonials there), extracted
   so any page can reuse it (currently index.php and about.php).
   Container: default 1400px. Asymmetric 5-card layout: left
   and right columns are each their own flex column of 2 cards with MIRRORED
   height ratios (left: small top / big bottom; right: big top / small
   bottom) — a shared-row CSS Grid can't do this since row height is common
   across all columns, so .why-choose__col--left/--right are independent
   flex containers instead, and only the 3 top-level tracks (left col,
   center card, right col) form the actual grid. The center card spans the
   full column height and vertically centers its (larger) icon in the space
   above the text via its own icon-wrap flex:1. Left-top and right-bottom
   cards are text-only; left-bottom, center and right-top carry an
   illustration from assets/images/why-choose-us/. Mobile/tablet stack all 5
   cards in one column (the col wrappers still group them so DOM order is
   unchanged); the asymmetric grid only applies from laptop (1024px) up,
   where there's room for it to read correctly. Colors are exact
   client-supplied hex per card — most don't match an existing :root token
   so they're declared inline here, same as the one-off exact values already
   used in Portfolio/Testimonials above.
   ===================================================================== */

.why-choose {
  background: var(--color-white);
  padding: var(--space-xl) 0;
}

.why-choose__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.why-choose__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.why-choose__heading {
  margin-bottom: var(--space-sm);
}

/* Client spec (at 1280px+): Kind Sans, 45px/136%. Scales down below that
   per the site's usual mobile-first heading pattern. */
.why-choose__heading-part {
  font-family: var(--font-display);
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36;
}

.why-choose__heading-part--dark {
  font-weight: 500; /* Medium */
  color: var(--color-charcoal); /* #2B2525, client spec exact value */
}

.why-choose__heading-part--maroon {
  font-weight: 800; /* Heavy */
  color: var(--color-maroon); /* #5A1F2B, client spec exact value */
}

.why-choose__subtext {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4; /* 140%, client spec */
  color: var(--color-card-text); /* #423A3A, client spec exact value */
  max-width: 46rem;
}

.why-choose__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.why-choose__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.why-choose__card {
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.why-choose__card-icon-wrap {
  display: flex;
  margin-bottom: var(--space-sm);
}

.why-choose__card-icon {
  width: 4.5rem;
}

.why-choose__card-title {
  font-family: var(--font-display);
  font-weight: 700; /* Bold */
  font-size: 1.125rem;
  line-height: 1.4; /* 140%, client spec */
  margin-bottom: var(--space-xs);
}

.why-choose__card-text {
  font-family: var(--font-display);
  font-weight: 400; /* Regular */
  font-size: 1rem;
  line-height: 1.4; /* 140%, client spec */
}

/* ---- Card colors: exact client-supplied hex per card ---- */
.why-choose__card--gold {
  background: var(--color-gold); /* #B18A4A, client spec exact value */
}
.why-choose__card--gold .why-choose__card-title,
.why-choose__card--gold .why-choose__card-text {
  color: #402B08;
}

.why-choose__card--cream {
  background: var(--color-cream); /* #F8F4EC, client spec exact value */
}
.why-choose__card--cream .why-choose__card-icon,
.why-choose__card--pink .why-choose__card-icon {
  width: 6rem;
}
.why-choose__card--cream .why-choose__card-title,
.why-choose__card--cream .why-choose__card-text {
  color: #867E6F;
}

.why-choose__card--maroon {
  background: #5D202A; /* client spec exact value, distinct from --color-maroon */
  align-items: center;
  text-align: left;
}
.why-choose__card--maroon .why-choose__card-icon-wrap {
  flex: 1;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  margin-bottom: 0;
}
.why-choose__card--maroon .why-choose__card-icon {
  width: 8rem;
}
.why-choose__card--maroon .why-choose__card-title,
.why-choose__card--maroon .why-choose__card-text {
  color: #FFDEE5;
  align-self: flex-start;
}

.why-choose__card--pink {
  background: #F9ECEC; /* client spec exact value */
}
.why-choose__card--pink .why-choose__card-title,
.why-choose__card--pink .why-choose__card-text {
  color: #716262;
}

.why-choose__card--grey {
  background: #665959; /* client spec exact value */
}
.why-choose__card--grey .why-choose__card-title,
.why-choose__card--grey .why-choose__card-text {
  color: #C0B8B8;
}

/* ---- Why Choose Us: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .why-choose__heading-part {
    font-size: 2.25rem;
  }

  .why-choose__subtext {
    font-size: 1.125rem;
  }

  .why-choose__card-icon {
    width: 5rem;
  }

  .why-choose__card--maroon .why-choose__card-icon {
    width: 9.5rem;
  }

  .why-choose__card--cream .why-choose__card-icon,
  .why-choose__card--pink .why-choose__card-icon {
    width: 7rem;
  }

  .why-choose__card-title {
    font-size: 1.25rem;
  }

  .why-choose__card-text {
    font-size: 1.0625rem;
  }
}

/* ---- Why Choose Us: Laptop / Desktop (1024px and up) ----
   Switches from a single stacked column to 3 top-level tracks: left col,
   center card, right col. Left/right are independent flex columns so their
   two cards' height ratio can be MIRRORED (left: small/big, right: big/
   small) — impossible with shared grid rows. align-items: stretch (grid
   default) makes all 3 tracks match the tallest one's height automatically. */
@media (min-width: 1024px) {
  .why-choose__heading-part {
    font-size: 2.5rem;
  }

  .why-choose__subtext {
    font-size: 1.25rem;
  }

  .why-choose__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .why-choose__col,
  .why-choose__card--3 {
    height: 100%;
  }

  /* left column: small top / big bottom */
  .why-choose__card--1 { flex: 0.58; }
  .why-choose__card--2 { flex: 1; }

  /* right column: MIRRORED — big top / small bottom */
  .why-choose__card--4 { flex: 1; }
  .why-choose__card--5 { flex: 0.58; }

  .why-choose__card-icon {
    width: 6rem;
  }

  .why-choose__card--maroon .why-choose__card-icon {
    width: 11rem;
  }

  .why-choose__card--cream .why-choose__card-icon,
  .why-choose__card--pink .why-choose__card-icon {
    width: 8.5rem;
  }

  .why-choose__card-title {
    font-size: 1.5rem;
  }

  .why-choose__card-text {
    font-size: 1.375rem;
  }
}

/* ---- Why Choose Us: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .why-choose__heading-part {
    font-size: 2.8125rem; /* 45px, client spec exact value */
  }

  .why-choose__subtext {
    font-size: 1.6875rem; /* 27px, client spec exact value */
  }

  .why-choose__card-icon {
    width: 6.875rem;
  }

  .why-choose__card--maroon .why-choose__card-icon {
    width: 25rem;
  }

  .why-choose__card--cream .why-choose__card-icon,
  .why-choose__card--pink .why-choose__card-icon {
    width: 20rem;
  }

  .why-choose__card-title {
    font-size: 1.5rem;
  }

  .why-choose__card-text {
    font-size: 1.2rem;
  }
}


/* =====================================================================
   13. GENRES — "Explore Our Genres", Home page only, sits between Why Choose
   Us and Testimonials. Container: default 1400px. 3 rows of genre cards,
   each auto-scrolling horizontally on an independent, seamless CSS loop
   (same duplicate-track technique as the Featured-In Logos marquee in
   section 6 and the Portfolio ticker in section 11 — just horizontal, 3 ROWS
   instead of 3 columns). No JS/Swiper. Rows 1 and 3 scroll left to right,
   row 2 scrolls right to left, per client spec. Each genre "card" is a single
   pre-styled image (assets/images/genre-section/<n>.png) that already bakes
   in its own label + line-art illustration on a card background, so there's
   no separate icon/label markup or per-card color variant to maintain here.
   ===================================================================== */

.genres {
  background: var(--color-white);
  padding: var(--space-xl) 0;
}

.genres__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.genres__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.genres__heading {
  margin-bottom: var(--space-sm);
}

/* Client spec (at 1280px+): Kind Sans, 45px/136%. Scales down below that
   per the site's usual mobile-first heading pattern. */
.genres__heading-part {
  font-family: var(--font-display);
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36;
}

.genres__heading-part--dark {
  font-weight: 500; /* Medium */
  color: var(--color-charcoal); /* #2B2525, client spec exact value */
}

.genres__heading-part--maroon {
  font-weight: 800; /* Heavy */
  color: var(--color-maroon); /* #5A1F2B, client spec exact value */
}

.genres__subtext {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4; /* 140%, client spec */
  color: var(--color-card-text); /* #423A3A, client spec exact value */
  max-width: 80rem;
}

.genres__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.genres__row {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 50%, #000 50%, transparent 100%);
}

.genres__track {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  width: max-content;
  animation: genres-scroll-x 40s linear infinite;
}

/* Rows 1 and 3 scroll left to right, row 2 scrolls right to left — per
   client spec. Durations/delays are staggered so the three rows don't move
   in lock-step. */
.genres__row--1 .genres__track {
  animation-direction: reverse;
}

.genres__row--2 .genres__track {
  animation-duration: 34s;
  animation-delay: -10s;
}

.genres__row--3 .genres__track {
  animation-direction: reverse;
  animation-duration: 46s;
  animation-delay: -18s;
}

.genres__row:hover .genres__track {
  animation-play-state: paused;
}

.genres__group {
  display: flex;
  flex-direction: row;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.genres__item {
  width: 6rem; /* client value for small screens */
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.genres__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@keyframes genres-scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .genres__track {
    animation: none;
  }
}

/* ---- Genres: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .genres__heading-part {
    font-size: 2.25rem;
  }

  .genres__subtext {
    font-size: 1.125rem;
  }

  .genres__item {
    width: 6rem; /* was 5rem — raised to match the new mobile value so the scale
                    stays monotonic (6 -> 6.5 -> 8) instead of shrinking at tablet */
  }
}

/* ---- Genres: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .genres__heading-part {
    font-size: 2.5rem;
  }

  .genres__subtext {
    font-size: 1.25rem;
  }

  .genres__item {
    width: 6.5rem;
  }
}

/* ---- Genres: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .genres__heading-part {
    font-size: 2.8125rem; /* 45px, client spec exact value */
  }

  .genres__subtext {
    font-size: 1.6875rem; /* 27px, client spec exact value */
  }

  .genres__item {
    width: 8rem; /* client spec exact value */
  }
}


/* =====================================================================
   14. TESTIMONIALS — "Trusted by Authors", shared partial
   (includes/testimonials.php), originally home-page-only, extracted so any
   page can reuse it (currently index.php and about.php). Container: default
   1400px. Left pane: heading + one-at-a-time testimonial card (avatar, name,
   role, star rating, quote) + avatar stack + prev/next arrows. Right pane: the
   matching personalized book+tablet cover image, cross-fading in sync with the
   left content. Vanilla JS (main.js, initTestimonialsSlider) toggles `.is-active`
   on both the slide and its matching cover by index — same absolute-position +
   opacity crossfade approach as the Whole-Process stage panel (section 8) —
   not Swiper, since this needs two tracks (text + image) advancing in lockstep,
   which doesn't map cleanly onto a single Swiper instance.
   ===================================================================== */

.testimonials {
  background: rgba(255, 255, 255, 0.45); /* client spec exact value. Renders as
    plain white in practice — nothing but page-white sits behind this section —
    flag to client if a background texture/pattern image was intended here. */
  padding: var(--space-xl) 0;
}

.testimonials__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.testimonials__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.testimonials__eyebrow {
  display: none; /* hidden on small screens per client — shown again from tablet up */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem; /* 20px, per client correction (was scaling up to 27px) */
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.testimonials__heading {
  font-family: var(--font-display);
  font-weight: 600; /* Semibold */
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36;
  color: #2B2525;
}

.testimonials__subtext {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem; /* 20px, per client correction (was scaling up to 27px) */
  line-height: 1.4;
  color: var(--color-text-secondary);
  max-width: 60rem;
}

.testimonials__slider {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.testimonials__title {
  margin-bottom: var(--space-md);
}

.testimonials__title-part {
  display: block;
  font-family: var(--font-display);
  font-weight: 600; /* Semibold */
  font-size: 1.5rem;
  line-height: 1.17;
  text-transform: uppercase;
}

.testimonials__title-part--dark {
  color: #2B2525;
}

.testimonials__title-part--maroon {
  color: var(--color-maroon);
}

/* One slide visible at a time — absolute + opacity crossfade, same pattern as
   .process__stage (section 8), so swapping slides never reflows the layout. */
.testimonials__track {
  position: relative;
  min-height: 260px;
}

.testimonials__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  /* visibility is included (not just opacity) so the outgoing slide stays
     rendered and visibly fading for the full duration instead of vanishing
     the instant is-active is removed — that mismatch was the "jerk". */
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.testimonials__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .testimonials__slide,
  .testimonials__cover {
    transition: opacity 0.2s ease, visibility 0.2s ease;
    transform: none !important;
  }
}

.testimonials__person {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.testimonials__avatar {
  width: 100px;
  height: 100px;
  border-radius: var(--radius-md);
  object-fit: cover;
  flex-shrink: 0;
}

.testimonials__person-info {
  display: flex;
  flex-direction: column;
}

.testimonials__name {
  font-family: var(--font-display);
  font-weight: 600; /* Semibold */
  font-size: 1.5625rem; /* 25px, per client correction (was scaling up to 45px) */
  line-height: 1.17;
  color: #2B2525;
}

.testimonials__role {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem; /* 16px, per client correction (was scaling up to 20px) */
  line-height: 1.4;
  color: var(--color-card-text);
}

.testimonials__rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.testimonials__stars {
  color: var(--color-star-gold);
  font-size: 0.85rem;
  letter-spacing: 1px;
}

.testimonials__score {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-card-text);
}

.testimonials__quote {
  font-family: var(--font-display);
  font-weight: 500; /* Medium */
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-card-text);
  max-width: 30rem;
}

.testimonials__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.testimonials__avatars-stack {
  display: flex;
  align-items: center;
}

/* Each stack avatar is wrapped in an unstyled button so it's a real,
   keyboard-reachable control (clicking jumps the slider to that testimonial),
   not just a decorative image. */
.testimonials__stack-btn {
  display: block;
  padding: 0;
  margin-left: -12px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.testimonials__stack-btn:first-child {
  margin-left: 0;
}

.testimonials__stack-btn:hover,
.testimonials__stack-btn:focus-visible {
  transform: translateY(-3px);
  z-index: 1;
}

/* Small screens use a 35px stack per client (height given; width matched to keep
   the avatars circular) — full 50px/40px sizes return from tablet up. */
.testimonials__stack-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-white);
  display: block;
}

.testimonials__stack-count {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: var(--color-maroon);
  color: var(--color-white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  border: 2px solid var(--color-white);
  margin-left: -12px;
}

.testimonials__nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Plain hairline circles, two-tone per the client's reference screenshot —
   prev is dusty rose, next is plain grey (not the bolder maroon-fill style
   used elsewhere on the site for other buttons). */
.testimonials__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.testimonials__nav-btn--prev {
  border-color: #C89AA6;
  color: #C89AA6;
}

.testimonials__nav-btn--next {
  border-color: #A6A6A6;
  color: #A6A6A6;
}

.testimonials__nav-btn:hover {
  background: var(--color-maroon);
  border-color: var(--color-maroon);
  color: var(--color-white);
}

.testimonials__nav-btn svg {
  width: 16px;
  height: 16px;
}

/* Right pane: personalized book+tablet cover, one per testimonial, cross-fading
   in sync with the left content via the shared JS controller. Fixed aspect-ratio
   so the layout doesn't jump between covers of slightly different proportions.
   Each cover is a real link to that book's Amazon page — cursor default is left
   alone (still a normal link), and the floating "View on Amazon" badge below is
   a purely visual affordance that follows the mouse on hover. */
.testimonials__media {
  position: relative;
  width: 100%;
  aspect-ratio: 6 / 5.5;
}

.testimonials__cover {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.testimonials__cover.is-active {
  opacity: 1;
  visibility: visible;
}

.testimonials__cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Floating "View on Amazon" badge — hidden by default, faded in and moved to
   follow the cursor (via JS, main.js) only while hovering the cover image, and
   only on devices with a real mouse (touch just relies on the link itself). */
.testimonials__cover-cta {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-maroon);
  color: var(--color-white);
  font-family: var(--font-cta);
  font-weight: 700;
  font-size: 0.85rem;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease;
  z-index: 5;
}

@media (hover: hover) and (pointer: fine) {
  .testimonials__cover-cta {
    display: inline-flex;
  }

  .testimonials__cover-cta.is-visible {
    opacity: 1;
  }
}

/* ---- Testimonials: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .testimonials__eyebrow {
    display: block;
  }

  .testimonials__stack-avatar {
    width: 50px;
    height: 50px;
  }

  .testimonials__stack-count {
    width: 40px;
    height: 40px;
  }

  .testimonials__heading {
    font-size: 2.25rem;
  }

  .testimonials__title-part {
    font-size: 2rem;
  }
}

/* ---- Testimonials: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .testimonials__slider {
    flex-direction: row;
    align-items: center;
    gap: var(--space-xl);
  }

  .testimonials__content {
    flex: 1;
    min-width: 0;
  }

  .testimonials__media {
    flex: 0 0 46%;
  }

  .testimonials__heading {
    font-size: 2.5rem;
  }

  .testimonials__title-part {
    font-size: 2.5rem;
  }

  .testimonials__quote {
    font-size: 1.0625rem;
  }
}

/* ---- Testimonials: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .testimonials__heading {
    font-size: 2.8125rem; /* 45px, client spec exact value */
  }

  .testimonials__title-part {
    font-size: 2.8125rem; /* 45px, client spec exact value */
  }

  .testimonials__quote {
    font-size: 1.125rem; /* 18px, client spec exact value */
  }
}


/* =====================================================================
   15. FAQ — "Everything You Need to Know", Home page only, sits between
   Testimonials and the (not yet built) closing CTA/footer. Container:
   default 1400px. Two-column layout: a fixed-width intro column (eyebrow +
   heading + subtext) and a single-open accordion column. Only the first
   accordion item's answer is real, client-supplied copy — see the
   $faqs comment in index.php for the other 4 (placeholder copy, flagged
   for the client to confirm before launch). Accordion open/close is plain
   vanilla JS (main.js, initFaqAccordion) toggling `.is-open`; the answer's
   expand/collapse animates via a grid-template-rows 0fr->1fr transition
   (no JS height math needed) and the +/- icon is 2 CSS pseudo-element bars,
   the vertical one scaling to 0 when open rather than a rotate (simpler
   "minus is just the horizontal bar left over" morph).
   ===================================================================== */

.faq {
  background: var(--color-white);
  padding: var(--space-xl) 0;
}

.faq__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.faq__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq__heading {
  display: flex;
  flex-direction: column;
}

.faq__heading-part {
  display: block;
  font-family: var(--font-display);
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36; /* 136%, client spec */
}

.faq__heading-part--dark {
  font-weight: 500; /* Medium */
  color: var(--color-charcoal); /* #2B2525, client spec exact value */
}

.faq__heading-part--maroon {
  font-weight: 800; /* Heavy */
  color: var(--color-maroon); /* #5A1F2B, client spec exact value */
}

.faq__subtext {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4; /* 140%, client spec */
  color: var(--color-text-secondary); /* #505050, client spec exact value */
}

.faq__link {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
}

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-bottom: 1px solid var(--color-border);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500; /* Medium */
  font-size: 1.125rem;
  line-height: 1.4; /* 140%, client spec */
  color: var(--color-charcoal); /* #2B2525, client spec exact value */
}

.faq__icon {
  position: relative;
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.faq__icon::before {
  width: 100%;
  height: 2px;
}

.faq__icon::after {
  width: 2px;
  height: 100%;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.faq__item.is-open .faq__icon::after {
  transform: translate(-50%, -50%) scaleY(0);
  opacity: 0;
}

.faq__answer-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq__item.is-open .faq__answer-wrap {
  grid-template-rows: 1fr;
}

.faq__answer {
  overflow: hidden;
}

.faq__answer p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.4; /* 140%, client spec */
  color: var(--color-card-text); /* #423A3A, client spec exact value */
  padding-bottom: var(--space-md);
}

.faq__answer strong {
  font-weight: 700;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .faq__answer-wrap,
  .faq__icon::after {
    transition: none;
  }
}

/* ---- FAQ: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .faq__heading-part {
    font-size: 2.25rem;
  }

  .faq__subtext {
    font-size: 1.125rem;
  }

  .faq__question {
    font-size: 1.25rem;
  }

  .faq__answer p {
    font-size: 1rem;
  }
}

/* ---- FAQ: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .faq__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-2xl);
  }

  .faq__intro {
    width: 32rem;
    flex-shrink: 0;
    position: sticky;
    top: calc(var(--header-height) + var(--space-lg));
  }

  .faq__list {
    flex: 1;
    min-width: 0;
  }

  .faq__heading-part {
    font-size: 2.5rem;
  }

  .faq__subtext {
    font-size: 1.25rem;
  }

  .faq__question {
    font-size: 1.375rem;
  }

  .faq__answer p {
    font-size: 1.125rem;
  }
}

/* ---- FAQ: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .faq__intro {
    width: 40rem; /* client spec exact value */
  }

  .faq__heading-part {
    font-size: 2.8125rem; /* 45px, client spec exact value */
  }

  .faq__subtext {
    font-size: 1.6875rem; /* 27px, client spec exact value */
  }

  .faq__question {
    font-size: 1.6875rem; /* 27px, client spec exact value */
  }

  .faq__answer p {
    font-size: 1.25rem; /* 20px, client spec exact value */
  }
}


/* =====================================================================
   16. FOOTER — shared <footer> (includes/footer.php), appears on every page.
   Two sections: .footer-cta ("Your Story Deserves to Be Read.", background
   rgba(255,255,255,0.45) per exact client value — same situation as the
   Testimonials section background, see section 14: renders as plain white
   since the page above it is white too) and .footer-main (Awards + Useful
   Links/Services/Policies + contact + payment/social — background
   linear-gradient(180deg, #5A1F2B 0%, #000000 100%), exact client value).
   The book-covers image deliberately bleeds across the seam between the
   two: .footer-cta__covers gets a negative margin-bottom
   (var(--cover-bleed)) pulling it down into .footer-main's box, and both
   sections get explicit z-index (.footer-cta above .footer-main) so the
   image paints OVER the gradient instead of being covered by it — normal
   DOM stacking order would otherwise put the later .footer-main on top.
   .footer-main gets matching extra top padding so its own content (the
   Awards heading) clears the overlap instead of sitting under the image.
   The 5 covers are a single pre-composited image (assets/images/footer-cta/
   books.png, real transparent background, the "valley" arc already baked
   in by the client) — an earlier pass built the 5 covers as separate
   overlapping <img> elements in CSS; replaced with this single image per
   client instruction once they supplied the composite.
   ===================================================================== */

.site-footer {
  --cover-bleed: 10rem; /* how far the books image dips into .footer-main, flat at every breakpoint */
}

/* Mobile drops the book-covers composite entirely (see .footer-cta__covers below),
   so this section closes with its own bottom padding instead of the image's bleed.
   Both values here are the client's exact raw-CSS paste; restored from 768px up. */
.footer-cta {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.45);
  padding: var(--space-xl) 0 20px;
}

.footer-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-cta__intro {
  max-width: 44rem;
  text-align: center;
}

.footer-cta__heading {
  font-family: var(--font-display);
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36; /* 136%, client spec */
}

.footer-cta__heading-part--regular {
  font-weight: 500; /* Medium */
  color: var(--color-charcoal); /* #2B2525, client spec exact value */
}

.footer-cta__heading-part--bold {
  font-weight: 800; /* Heavy */
  color: #241E1E; /* client spec exact value */
}

.footer-cta__subtext {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4; /* 140%, client spec */
  color: #241E1E; /* client spec exact value */
  margin-top: var(--space-sm);
}

.footer-cta__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-charcoal);
  padding-bottom: 4px;
  white-space: nowrap;
  margin-top: var(--space-md);
  --underline-color: var(--color-charcoal); /* same animated underline as .btn,
                                                just tinted to this button's own
                                                (non-maroon) text color */
}

.footer-cta__cta::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 2px;
  background-color: var(--underline-color);
  transform: translateX(-50%);
  animation: btn-underline 2s infinite;
}

.footer-cta__cta:hover {
  color: var(--color-black);
}

@media (prefers-reduced-motion: reduce) {
  .footer-cta__cta::after {
    animation: none;
    width: 100%;
  }
}

/* Hidden below 768px per client instruction — the 1288px-wide composite dominated
   the phone layout. Everything the bleed technique compensates for (this element's
   negative margin, .footer-main's matching extra top padding) is therefore switched
   off on mobile too and switched back on together at 768px. */
.footer-cta__covers {
  display: none;
  justify-content: center;
  margin-top: var(--space-lg);
  margin-bottom: calc(-1 * var(--cover-bleed));
}

.footer-cta__books {
  /* No explicit width: renders at its natural size (1288px), capped by the
     global img { max-width: 100%; } rule on narrower viewports/containers. */
  height: auto;
}

/* ---- Footer CTA: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  /* Covers image and its bleed come back, so the section's own bottom padding goes */
  .footer-cta {
    padding: var(--space-xl) 0 0;
  }

  .footer-cta__covers {
    display: flex;
  }

  .footer-cta__heading {
    font-size: 2.25rem;
  }

  .footer-cta__subtext {
    font-size: 1.125rem;
  }

  .footer-cta__cta {
    font-size: 1.125rem;
  }

  .footer-cta__intro {
    max-width: 50rem;
  }
}

/* ---- Footer CTA: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .footer-cta__heading {
    font-size: 2.5rem;
  }

  .footer-cta__subtext {
    font-size: 1.25rem;
  }

  .footer-cta__cta {
    font-size: 1.25rem;
  }

  .footer-cta__intro {
    max-width: 60rem;
  }
}

/* ---- Footer CTA: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .footer-cta__heading {
    font-size: 2.8125rem; /* 45px, client spec exact value */
  }

  .footer-cta__subtext {
    font-size: 1.6875rem; /* 27px, client spec exact value */
  }

  .footer-cta__intro {
    max-width: 70rem; /* client spec exact value */
  }
}

/* ---- Footer main (Awards + Links + Contact + payment/social) ---- */

.footer-main {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #5A1F2B 0%, #000000 100%); /* client spec exact value */
  padding: 50px 0; /* client raw-CSS paste. Flat on mobile because the covers image
                      above is hidden there — no bleed to clear. The bleed-aware
                      value returns with the image at 768px. */
}

.footer-main__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

/* Mobile: heading pinned left, seals sliding past it (client reference). From
   tablet up this becomes the original static, centered row — see that block. */
.footer-main__awards {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
}

.footer-main__awards-heading {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  max-width: 7.5rem; /* keeps the heading to the narrow left column the reference shows;
                        lifted at 768px+ where the row is centered instead */
  font-family: var(--font-display);
  font-size: 1.125rem;
  line-height: 1.18; /* 118%, client spec */
}

.footer-main__awards-heading-part--regular {
  font-weight: 500; /* Medium */
  color: var(--color-white);
}

.footer-main__awards-heading-part--bold {
  font-weight: 800; /* Heavy */
  color: var(--color-white);
}

/* Marquee viewport (mobile only — static centered row from 768px up). Same
   duplicate-track mechanic as .logos-track: the track holds the 5 seals twice
   back to back and loops translateX(0) -> translateX(-50%), so the second copy
   lands exactly where the first started. Each group carries a trailing gap of
   its own so both halves are exactly the same width and the seam is invisible. */
.footer-main__seals {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

.footer-main__seals-track {
  display: flex;
  width: max-content;
  animation: footer-seals-scroll 26s linear infinite;
}

.footer-main__seals-group {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-right: var(--space-md);
  flex-shrink: 0;
}

@keyframes footer-seals-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-main__seals-track {
    animation: none;
  }
}

.footer-main__seal {
  width: 7rem;
  height: auto;
}

.footer-main__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-main__col-heading {
  font-family: var(--font-display);
  font-weight: 600; /* Semibold */
  font-size: 1.0625rem;
  line-height: 1.18; /* 118%, client spec */
  color: var(--color-white);
  margin-bottom: var(--space-xs);
}

.footer-main__col-list a {
  font-family: var(--font-display);
  font-weight: 500; /* Medium */
  font-size: 0.875rem;
  line-height: 2.31; /* 231%, client spec — generous vertical rhythm between links */
  color: rgba(255, 255, 255, 0.8);
  display: inline-block;
  transition: color 0.2s ease;
}

.footer-main__col-list a:hover {
  color: var(--color-white);
}

/* ---- Services column: a dropdown on mobile, two plain sub-columns from
   tablet up (client instruction). The list is collapsed by default and
   main.js (initFooterDropdowns) toggles .is-open on the column; at 768px+ the
   grid is shown unconditionally and the caret is hidden, so the button reads
   as an ordinary heading. ---- */
.footer-main__col-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}

.footer-main__col-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  transition: transform 0.2s ease;
}

.footer-main__col--services.is-open .footer-main__col-caret {
  transform: rotate(225deg);
  margin-top: 3px;
}

.footer-main__services-grid {
  display: none;
  grid-template-columns: repeat(2, max-content);
  gap: 0 var(--space-md);
}

.footer-main__col--services.is-open .footer-main__services-grid {
  display: grid;
  grid-template-columns: 1fr; /* one column while it's a dropdown */
}

.footer-main__contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.footer-main__contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.footer-main__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-maroon);
  color: var(--color-white);
}

.footer-main__contact-icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.footer-main__contact-body {
  display: flex;
  flex-direction: column;
}

.footer-main__contact-label {
  font-family: var(--font-display);
  font-weight: 600; /* Semibold */
  font-size: 1rem;
  line-height: 1.18; /* 118%, client spec */
  color: var(--color-white);
}

.footer-main__contact-value {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.4; /* 140%, client spec */
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

a.footer-main__contact-value:hover {
  color: var(--color-white);
}

.footer-main__rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--space-md);
}

.footer-main__rating-badge {
  width: 2.375rem;
  height: 2.375rem;
}

.footer-main__rating-text {
  display: flex;
  flex-direction: column;
}

.footer-main__rating-stars {
  width: 5.5rem;
  height: auto;
}

.footer-main__rating-score {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-white);
}

.footer-main__rating-caption {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.7);
}

.footer-main__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* Natural size on mobile (client raw-CSS paste). A fixed height plus the global
   img { max-width: 100% } actually squashed this 420x41 strip out of proportion on
   a narrow screen — width got capped while height didn't. Fixed height returns at
   768px, where the container is wide enough for it not to bite. */
.footer-main__payment {
  height: auto;
  width: auto;
}

.footer-main__socials {
  display: flex;
  gap: 0.75rem;
}

/* Social icons: front face is the plain icon circle (untouched at rest).
   On hover the button widens into a pill and does a 3D Y-axis flip to
   reveal the platform name on its back face — still the SAME <a>, so a
   real profile link can be dropped into the existing href="#" later
   without touching this markup/CSS again. The visual flip is aria-hidden;
   the <a>'s own aria-label already gives screen readers the full context,
   so the back-face text isn't announced a second time. */
.footer-main__social-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--color-white);
  border: 2px solid var(--color-gold);
  perspective: 300px;
  transition: width 0.35s ease, background 0.3s ease, border-color 0.3s ease;
}

.footer-main__social-btn:hover {
  width: 6.5rem;
  background: var(--color-maroon);
  border-color: var(--color-maroon);
}

.footer-main__social-flip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.footer-main__social-btn:hover .footer-main__social-flip {
  transform: rotateY(180deg);
}

.footer-main__social-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.footer-main__social-face--front {
  color: var(--color-charcoal);
}

.footer-main__social-face--front svg {
  width: 1.5rem; /* client value for small screens — back to 1rem from tablet up */
  height: 1.5rem;
  fill: currentColor;
}

.footer-main__social-face--back {
  transform: rotateY(180deg);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.03em;
  color: var(--color-white);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .footer-main__social-btn,
  .footer-main__social-flip {
    transition: none;
  }
}

/* ---- Footer main: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  /* Extra top padding clears the covers image bleeding down from .footer-cta,
     which is only rendered from this breakpoint up */
  .footer-main {
    padding: calc(var(--space-xl) + var(--cover-bleed)) 0 var(--space-lg);
  }

  .footer-main__social-face--front svg {
    width: 1rem;
    height: 1rem;
  }

  .footer-main__awards {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xl);
  }

  /* Awards row stops sliding and goes back to a plain centered row */
  .footer-main__awards-heading {
    max-width: none;
  }

  .footer-main__seals {
    flex: 0 1 auto;
    display: flex;
    justify-content: center;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .footer-main__seals-track {
    width: auto;
    animation: none;
  }

  .footer-main__seals-group {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }

  .footer-main__seals-group[aria-hidden="true"] {
    display: none; /* the duplicate copy only exists for the mobile loop */
  }

  /* Services stops being a dropdown */
  .footer-main__services-grid,
  .footer-main__col--services.is-open .footer-main__services-grid {
    display: grid;
    grid-template-columns: repeat(2, max-content);
  }

  .footer-main__col-toggle {
    cursor: default;
  }

  .footer-main__col-caret {
    display: none;
  }

  .footer-main__grid {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .footer-main__col {
    width: calc(50% - var(--space-lg) / 2);
  }

  .footer-main__contact {
    width: 100%;
  }

  .footer-main__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ---- Footer main: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .footer-main__awards-heading {
    font-size: 1.375rem;
  }

  .footer-main__seal {
    width: 8.75rem;
  }

  .footer-main__grid {
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  .footer-main__col {
    width: auto;
  }

  .footer-main__col--services {
    flex: 0 0 auto;
  }

  .footer-main__contact {
    width: auto;
    flex: 0 0 auto;
    margin-left: 0;
    margin-top: 50px;
  }
}

/* ---- Footer main: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .footer-main__awards-heading {
    font-size: 1.75rem; /* 28px, client spec exact value */
  }

  .footer-main__seal {
    width: 10rem;
  }

  .footer-main__col-heading {
    font-size: 1.625rem; /* 26px, client spec exact value */
  }

  .footer-main__col-list a {
    font-size: 1rem; /* 16px, client spec exact value */
  }

  .footer-main__contact-label {
    font-size: 1rem;
  }

  .footer-main__contact-value {
    font-size: 0.85rem;
  }
}


/* =====================================================================
   17. PLACEHOLDER — stub pages whose real sections haven't been sent yet
   (services.php, about.php, contact.php). Delete this section once every
   page has real section content.
   ===================================================================== */

.coming-soon {
  padding: var(--space-2xl) 0;
  text-align: center;
}

.coming-soon h1 {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.coming-soon p {
  color: var(--color-charcoal);
}


/* =====================================================================
   18. START YOUR BOOK POPUP — shared partial (includes/popup-start-book.php),
   included once site-wide via includes/footer.php. Opened from every
   [data-open-book-popup] CTA (see assets/js/main.js, initStartBookPopup()).
   Mobile: single column, image on top. Desktop (768px+): two columns side
   by side, image left / form right.
   ===================================================================== */

.book-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.book-popup.is-open {
  visibility: visible;
  opacity: 1;
}

.book-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(43, 37, 37, 0.7);
  backdrop-filter: blur(3px);
}

.book-popup__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 900px;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s ease;
}

.book-popup.is-open .book-popup__dialog {
  transform: translateY(0) scale(1);
}

.book-popup__close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  color: var(--color-charcoal);
  transition: background 0.2s ease, color 0.2s ease;
}

.book-popup__close svg {
  width: 1.1rem;
  height: 1.1rem;
}

.book-popup__close:hover {
  background: var(--color-maroon);
  color: var(--color-white);
}

.book-popup__media {
  position: relative;
  min-height: 180px;
  background: var(--color-maroon);
  display: flex;
  align-items: flex-end;
}

.book-popup__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: unset;
  object-position: center 25%;
}

.book-popup__media-text {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: var(--space-md);
  background: linear-gradient(180deg, rgba(90, 31, 43, 0) 0%, rgba(58, 18, 26, 0.92) 85%);
  color: var(--color-white);
}

.book-popup__media-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

.book-popup__media-subtext {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--color-cream);
  max-width: 26rem;
}

.book-popup__content {
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

.book-popup__heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.5rem;
  color: var(--color-maroon);
  margin-bottom: 0.5rem;
}

.book-popup__subtext {
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: var(--space-md);
}

.book-popup__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.book-popup__input {
  width: 100%;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--color-charcoal);
  padding: 0.85rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg-alt);
  transition: border-color 0.2s ease;
}

.book-popup__input:focus {
  outline: none;
  border-color: var(--color-maroon);
}

.book-popup__textarea {
  resize: vertical;
  min-height: 4.5rem;
}

.book-popup__submit {
  align-self: flex-start;
  margin-top: 0.25rem;
  cursor: pointer;
}

.book-popup__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.book-popup__status {
  font-size: 0.9rem;
  min-height: 1.2em;
  margin: 0;
}

.book-popup__status.is-success {
  color: #2E7D32;
}

.book-popup__status.is-error {
  color: #B3261E;
}

@media (min-width: 768px) {
  .book-popup__dialog {
    flex-direction: row;
    max-height: 85vh;
  }

  .book-popup__media {
    width: 42%;
    min-height: auto;
  }

  .book-popup__content {
    width: 58%;
    padding: var(--space-xl) var(--space-lg);
    overflow-y: auto;
  }
}

body.book-popup-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .book-popup,
  .book-popup__dialog {
    transition: none;
  }
}


/* =====================================================================
   19. GET FEATURED — press-logo marquee. Partial: includes/footer.php,
   sits directly above .footer-cta inside the shared <footer>, so it
   appears on every page along with the rest of the footer.
   Heading/subtext deliberately reuse .footer-cta__intro/__heading/__subtext
   as-is (same font/size/color/breakpoints) per client instruction, rather
   than duplicating that CSS under a new class. The logo marquee itself
   reuses .logos-track/.logos-track__group/.logos-track__item — the exact
   same duplicate-track technique as the home page's Featured-In Logos
   section — just wrapped in its own container so it isn't affected by
   that section's hero-specific negative margin-top.
   ===================================================================== */

.get-featured {
  background: var(--color-white);
  padding: var(--space-xl) 0 var(--space-lg);
}

.get-featured__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.get-featured__logos {
  width: 100%;
  max-width: 1400px;
  margin-top: var(--space-lg);
}


/* =====================================================================
   20. ABOUT US — HERO / BANNER (about.php only). Centered text banner,
   followed directly by the shared Featured-In Logos partial (see section 6
   and includes/featured-logos.php) — same partial the home hero uses.
   Background: client-supplied asset (assets/images/about-us-page/hero-section/
   bg.png), a transparent PNG topo-line pattern — replaced an earlier
   placeholder built with an inline SVG before this asset was provided.
   ===================================================================== */

.about-hero {
  position: relative;
  padding: var(--space-2xl) 0 var(--space-xl);
  text-align: center;
  background-color: var(--color-bg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-image: url("../images/about-us-page/hero-section/bg.png");
}

.about-hero__inner {
  position: relative;
  z-index: 1;
}

.about-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: bold;
  font-size: 1.75rem;
  line-height: 1.36; /* 136%, client spec */
  color: var(--color-maroon);
  margin: 0 0 var(--space-sm);
}

.about-hero__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1; /* 100%, client spec */
  color: var(--color-gold-about);
  text-transform: unset;
  max-width: 45rem;
  margin: 0 auto;
}

.about-hero__intro {
  max-width: 44rem;
  margin: var(--space-md) auto 0;
}

.about-hero__subheading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 2;
  color: var(--color-maroon);
  margin: 0 0 var(--space-xs);
}

.about-hero__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4; /* 140%, client spec */
  color: var(--color-charcoal);
  margin: 0;
}

/* ---- About Hero: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .about-hero__eyebrow {
    font-size: 2.25rem;
  }

  .about-hero__heading {
    font-size: 3.25rem;
  }

  .about-hero__intro {
    max-width: 50rem;
  }

  .about-hero__subheading {
    font-size: 1.5rem;
  }

  .about-hero__text {
    font-size: 1.125rem;
  }
}

/* ---- About Hero: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .about-hero__eyebrow {
    font-size: 2.5rem;
  }

  .about-hero__heading {
    font-size: 3.75rem;
  }

  .about-hero__intro {
    max-width: 60rem;
  }

  .about-hero__subheading {
    font-size: 1.75rem;
  }

  .about-hero__text {
    font-size: 1.1875rem;
  }
}

/* ---- About Hero: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .about-hero__eyebrow {
    font-size: 2.8125rem; /* 45px, client spec exact value */
  }

  .about-hero__heading {
    font-size: 4.375rem; /* 70px, client spec exact value */
  }

  .about-hero__intro {
    max-width: 70rem;
  }

  .about-hero__subheading {
    font-size: 2rem; /* 32px, client spec exact value */
  }

  .about-hero__text {
    font-size: 1.25rem; /* 20px, client spec exact value */
  }
}


/* =====================================================================
   21. BUILT AROUND YOUR STORY (about.php only). Two-column: text content
   left, team photo right (assets/images/about-us-page/section-2/right-img.png,
   pre-cut-out transparent PNG). Stacks on mobile, text first.
   Text sizes are exact client spec applied at 1280px+ per Section 7's
   raw-CSS convention, scaled down proportionally at smaller breakpoints.
   ===================================================================== */

.about-story {
  position: relative;
  z-index: 1; /* sits below .service-hero's floating booking-card bleed on book-publishing.php — harmless on about.php, where nothing else competes for stacking here */
  padding: var(--space-2xl) 0;
  background: #fffffb;
}

.about-story__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.about-story__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36; /* 136%, client spec */
  text-transform: uppercase;
}

.about-story__heading-part--gold {
  color: var(--color-gold-about);
}

.about-story__heading-part--maroon {
  color: var(--color-maroon);
}

.about-story__subheading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: normal; /* "auto", client spec */
  color: #373633; /* client spec exact value */
  margin-top: var(--space-md);
}

.about-story__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.4; /* 140%, client spec */
  color: #373633; /* client spec exact value */
  margin-top: var(--space-md);
}

.about-story__text strong {
  font-weight: 700;
}

.about-story__media img {
  width: 100%;
  height: auto;
}

/* ---- Built Around Your Story: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .about-story__heading {
    font-size: 2.25rem;
  }

  .about-story__subheading {
    font-size: 1.375rem;
  }

  .about-story__text {
    font-size: 1.1875rem;
  }
}

/* ---- Built Around Your Story: Laptop / Desktop (1024px and up) ----
   The row also drops its right padding/max-width so .about-story__media can
   bleed all the way to the browser's right edge (per client correction) —
   .about-story__inner keeps the .container class for its LEFT edge only;
   padding-left is recalculated to match .container's own centering math so
   the text column still lines up with every other section on the page. */
@media (min-width: 1024px) {
  .about-story__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
    max-width: none;
    width: 100%;
    padding-right: 0;
    padding-left: max(var(--container-pad), calc((100% - var(--container-max)) / 2));
  }

  .about-story__content {
    flex: 1 1 50%;
  }

  .about-story__media {
    flex: 1 1 45%;
  }

  .about-story__heading {
    font-size: 2.5rem;
  }

  .about-story__subheading {
    font-size: 1.5rem;
  }

  .about-story__text {
    font-size: 1.3125rem;
  }
}

/* ---- Built Around Your Story: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .about-story__heading {
    font-size: 2.8125rem; /* 45px, client spec exact value */
  }

  .about-story__subheading {
    font-size: 1.6875rem; /* 27px, client spec exact value */
  }

  .about-story__text {
    font-size: 1.5625rem; /* 25px, client spec exact value (corrected from 26px) */
  }
}


/* =====================================================================
   22. WE BRING YOUR STORIES TO LIFE — stats (about.php only). White rounded
   card sitting on a cream (var(--color-cream)) section background, heading +
   intro text, then a 4-item stat grid (2 columns on mobile/tablet, 4 from
   1024px+). Text sizes are exact client spec applied at 1280px+ per
   Section 7's raw-CSS convention, scaled down proportionally at smaller
   breakpoints.
   ===================================================================== */

.about-stats {
  padding: var(--space-2xl) 0;
  background: var(--color-cream);
}

.about-stats__card {
  background: var(--color-white);
  border-radius: 1.5rem;
  padding: var(--space-lg) var(--space-md);
}

.about-stats__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36; /* 136%, client spec */
}

.about-stats__heading-part--gold {
  color: var(--color-gold-about);
}

.about-stats__heading-part--maroon {
  color: var(--color-maroon);
}

.about-stats__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4; /* 140%, client spec */
  color: #373633; /* client spec exact value */
  margin-top: var(--space-sm);
  max-width: 40rem;
}

.about-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg) var(--space-md);
  margin-top: var(--space-lg);
}

.about-stats__number {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1.36; /* 136%, client spec */
  color: var(--color-gold-about);
}

.about-stats__label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 1.4; /* 140%, client spec */
  color: #373633; /* client spec exact value */
  margin-top: var(--space-xs);
}

.about-stats__desc {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 1.4; /* 140%, client spec */
  color: #373633; /* client spec exact value */
  margin-top: var(--space-xs);
}

/* ---- Stats: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .about-stats__card {
    padding: var(--space-xl) var(--space-lg);
  }

  .about-stats__heading {
    font-size: 2.25rem;
  }

  .about-stats__text {
    font-size: 1.25rem;
  }

  .about-stats__number {
    font-size: 3.5rem;
  }

  .about-stats__label {
    font-size: 1.375rem;
  }

  .about-stats__desc {
    font-size: 1rem;
  }
}

/* ---- Stats: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .about-stats__card {
    border-radius: 2.5rem;
    padding: var(--space-2xl);
  }

  .about-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .about-stats__heading {
    font-size: 2.5rem;
  }

  .about-stats__text {
    font-size: 1.375rem;
  }

  .about-stats__number {
    font-size: 4.375rem;
  }

  .about-stats__label {
    font-size: 1.5rem;
  }

  .about-stats__desc {
    font-size: 1.0625rem;
  }
}

/* ---- Stats: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .about-stats__heading {
    font-size: 2.8125rem; /* 45px, client spec exact value */
  }

  .about-stats__text {
    font-size: 1.625rem; /* 26px, client spec exact value */
  }

  .about-stats__number {
    font-size: 5rem; /* 80px, client spec exact value */
  }

  .about-stats__label {
    font-size: 1.75rem; /* 28px, client spec exact value */
  }

  .about-stats__desc {
    font-size: 1.125rem; /* 18px, client spec exact value */
  }
}


/* =====================================================================
   23. CONTACT FORM + WHY WORK WITH US (contact.php only). Two-column:
   dynamic contact form left (submits via fetch to send-contact-email.php,
   see assets/js/main.js initContactForm()), "Why Work With Us" checklist
   right. Container: default 1400px.
   Redesigned per client feedback: labels replaced with placeholder text
   (a visually-hidden <label> is kept per field for accessibility — a
   placeholder alone isn't a substitute for a real accessible name), each
   field gets a small brand-maroon icon (reusing the exact same SVG paths
   already used elsewhere: person icon is new/generic, email/phone/message
   icons reuse the footer's envelope/phone/chat-bubble paths), and inputs
   are underline-only (no boxed border) with an animated maroon underline
   that draws in on focus — the same "grow from center" language as the
   site-wide .btn underline, for a consistent brand feel.
   ===================================================================== */

.contact-form {
  padding: var(--space-2xl) 0;
}

.contact-form__header {
  margin-bottom: var(--space-2xl);
}

/* Scoped override — .why-choose__subtext is shared with the Why Choose Us
   section, so its font-size is overridden here rather than changed globally. */
.contact-form__header .why-choose__subtext {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .contact-form__header .why-choose__subtext {
    font-size: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .contact-form__header .why-choose__subtext {
    font-size: 1.25rem;
  }
}

@media (min-width: 1280px) {
  .contact-form__header .why-choose__subtext {
    font-size: 1.375rem; /* 22px, client spec exact value */
  }
}

.contact-form__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contact-form__field {
  position: relative;
  margin-bottom: var(--space-lg);
}

.contact-form__field::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--color-maroon);
  transform: translateX(-50%);
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.contact-form__field:focus-within::after {
  width: 100%;
}

.contact-form__icon {
  position: absolute;
  left: 0;
  bottom: 0.85rem;
  width: 1.15rem;
  height: 1.15rem;
  color: #ADADAD;
  pointer-events: none;
  transition: color 0.3s ease;
}

.contact-form__field--textarea .contact-form__icon {
  bottom: auto;
  top: 0.9rem;
}

.contact-form__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.contact-form__field:focus-within .contact-form__icon {
  color: var(--color-maroon);
}

.contact-form__input {
  width: 100%;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--color-charcoal);
  padding: 0.85rem 0.25rem 0.85rem 2rem;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  transition: border-color 0.3s ease;
}

.contact-form__input::placeholder {
  color: #9A9A9A;
}

.contact-form__input:focus {
  outline: none;
  border-bottom-color: transparent;
}

.contact-form__textarea {
  resize: vertical;
  min-height: 6.5rem;
}

@media (prefers-reduced-motion: reduce) {
  .contact-form__field::after {
    transition: none;
  }
}

.contact-form__checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-charcoal);
  margin-bottom: var(--space-lg);
  cursor: pointer;
}

.contact-form__checkbox input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-maroon);
  cursor: pointer;
}

.contact-form__checkbox a {
  color: var(--color-charcoal);
  text-decoration: underline;
}

.contact-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-white);
  background: linear-gradient(135deg, var(--color-maroon) 0%, var(--color-maroon-dark) 100%);
  border-radius: var(--radius-sm);
  padding: 1rem;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(90, 31, 43, 0.28);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.contact-form__submit .btn__arrow::before,
.contact-form__submit .btn__arrow::after {
  color: var(--color-white);
}

.contact-form__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(90, 31, 43, 0.38);
}

.contact-form__submit:hover .btn__arrow::before {
  transform: translate(140%, -140%);
}

.contact-form__submit:hover .btn__arrow::after {
  transform: translate(0, 0);
}

.contact-form__submit:active {
  transform: translateY(0);
}

.contact-form__submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .contact-form__submit {
    transition: none;
  }
}

.contact-form__status {
  font-size: 0.9rem;
  min-height: 1.2em;
  margin: var(--space-sm) 0 0;
}

.contact-form__status.is-success {
  color: #2E7D32;
}

.contact-form__status.is-error {
  color: #B3261E;
}

.contact-form__info-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  color: var(--color-maroon);
  margin-bottom: var(--space-md);
}

.contact-form__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-form__list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.contact-form__list-icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--color-maroon);
  margin-top: 0.15rem;
}

.contact-form__list-icon svg {
  width: 100%;
  height: 100%;
}

.contact-form__list-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.contact-form__list-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-maroon);
}

.contact-form__list-desc {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

/* Fills the empty space below the checklist on wide screens with a styled
   brand quote. Two earlier passes here: real phone/email/address details
   (client preferred something more visually striking), then a plain
   .hero__rating row alongside the quote (client removed it — the quote
   alone reads cleaner). The decorative quote mark deliberately hangs above
   the box (negative top, no overflow:hidden on the container — clipping it
   was a real bug, caught and fixed) for a magazine-style effect. */
.contact-form__quote {
  position: relative;
  margin-top: 50px;
  padding: var(--space-lg) var(--space-lg) var(--space-lg) var(--space-xl);
  background: linear-gradient(135deg, rgba(90, 31, 43, 0.07) 0%, rgba(171, 131, 84, 0.1) 100%);
  border-left: 3px solid var(--color-maroon);
  border-radius: var(--radius-md);
}

.contact-form__quote-mark {
  position: absolute;
  top: -1.5rem;
  left: 1.25rem;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--color-gold-about);
  opacity: 0.35;
  pointer-events: none;
}

.contact-form__quote-text {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--color-charcoal);
}

.contact-form__quote-attribution {
  position: relative;
  z-index: 1;
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--color-maroon);
}

/* ---- Contact Form: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .contact-form__inner {
    flex-direction: row;
    gap: var(--space-2xl);
  }

  .contact-form__form {
    flex: 1 1 60%;
  }

  .contact-form__info {
    flex: 1 1 35%;
    padding-top: var(--space-sm);
  }
}


/* =====================================================================
   24. BOOK PUBLISHING SERVICE — HERO (book-publishing.php only). Dark
   maroon->black gradient (same exact gradient as includes/footer.php's
   .footer-main), two-column: text content left, a real "Select Date & Time"
   appointment scheduler right (.booking-card). Originally built as a static
   non-functional mockup, then rebuilt into a real 3-step flow (date -> time
   slot -> contact details) per client request — see includes/db.php,
   get-available-slots.php, book-appointment.php, and assets/js/booking.js
   (initBookingWidget) for the actual logic; this file just supplies the
   step-panel visibility (.booking-card__panel.is-active) and visual states.
   ===================================================================== */

.service-hero {
  position: relative;
  z-index: 2; /* paints over the next section, same technique as footer-cta/footer-main */
  padding: 50px 0 30px; /* client raw-CSS paste — applies to every service page's banner */
  background: linear-gradient(180deg, #5A1F2B 0%, #000000 100%); /* same as footer-main, client spec exact value */
}

.service-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.service-hero__heading {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
}

.service-hero__heading-part--light {
  font-weight: 800; /* Heavy, client spec */
  font-size: 2.5rem;
  line-height: 1; /* 100%, corrected from 130% */
  color: var(--color-white);
}

/* Font-size matches --light at every breakpoint below (global rule, per client instruction —
   originally a two-tier spec, corrected after it read as an unintentional size mismatch on
   service-hero pages whose heading needs uniform sizing across all words, e.g. "Audio Book
   Services" / "Build a Strong Author Profile"). Weight/line-height stay their own values. */
.service-hero__heading-part--gold {
  font-weight: 700; /* Bold, client spec */
  font-size: 2.5rem;
  line-height: 1;
  color: var(--color-gold-about);
}

.service-hero__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin-top: var(--space-md);
  max-width: 34rem;
}

.service-hero__text strong {
  color: var(--color-white);
}

.service-hero__cta {
  margin-top: var(--space-lg);
}

.service-hero__rating {
  margin-top: var(--space-lg);
}

.service-hero__rating .hero__rating-score,
.service-hero__rating .hero__reviews {
  color: rgba(255, 255, 255, 0.85);
}

/* Sliding marquee viewport for includes/service-hero-logos.php — reuses the
   exact same .logos-track/.logos-track__group/.logos-track__item mechanic as
   includes/featured-logos.php (style.css section 6), just wrapped in its own
   container sized for this hero's column instead of a full-width section,
   and with brighter logo opacity for the dark background. */
.service-hero__logos {
  width: 100%;
  max-width: 32rem;
  overflow: hidden;
  margin-top: var(--space-lg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.service-hero__logos .logos-track__item img {
  opacity: 0.85;
}

/* ---- Booking card (real 3-step scheduler — see assets/js/booking.js) ---- */
/* Fixed-height card so every step (date / time / details / success) occupies
   the same footprint as the hero banner — a step with more content (Step 3's
   form) scrolls internally instead of growing the card and pushing it past
   the section, which was a real bug (Step 3 overflowed into the section
   below it), caught and fixed. */
.booking-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
  height: 30rem;
  max-height: 80vh;
}

.booking-card__panel {
  display: none;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden; /* defensive: without this, once overflow-y is non-visible the
                          browser can't leave overflow-x as true "visible" either — any
                          content wider than the panel would show an unwanted horizontal
                          scrollbar instead of just being contained */
}

.booking-card__panel.is-active {
  display: flex;
}

.booking-card__back {
  display: inline-block;
  width: fit-content;
  align-self: flex-end; /* .booking-card__panel is a flex column — this pushes just this child to the right */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-white);
  background: #5a2027;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: var(--space-sm);
  padding: 5px 20px;
  box-shadow: 2px 2px 5px #000;
}

.booking-card__back:hover {
  background: var(--color-maroon);
}

.booking-card__selected-date {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-maroon);
  margin-bottom: var(--space-sm);
}

.booking-card__loading {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.booking-card__slots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  max-height: 16rem;
  overflow-y: auto;
}

.booking-card__slot {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-charcoal);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.booking-card__slot:hover {
  border-color: var(--color-maroon);
  background: #F7E3E7;
}

.booking-card__slot.is-booked {
  color: #B5B5B5;
  background: var(--color-bg-alt);
  border-color: var(--color-border);
  cursor: not-allowed;
  text-decoration: line-through;
}

.booking-card__form {
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

/* Tighter field spacing than the Contact Us page's version of these same
   classes (.contact-form__field's own margin-bottom is meant for a normal
   page section, not a fixed-height card) — scoped to this form only so
   contact.php is unaffected. Goal: fit all 4 fields + button without
   needing .booking-card__panel's scroll for a typical viewport. */
.booking-card__form .contact-form__field {
  margin-bottom: 0;
}

.booking-card__form .contact-form__input {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}

.booking-card__form .contact-form__textarea {
  min-height: 3.25rem;
}

.booking-card__success-message {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--color-charcoal);
  line-height: 1.5;
}

.booking-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.booking-card__step {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  color: var(--color-maroon);
  background: #F7E3E7;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
}

.booking-card__top-label {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.booking-card__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 35px !important;
  color: #1B1240;
  margin-bottom: var(--space-sm);
}

.booking-card__month {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.booking-card__month-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-charcoal);
}

.booking-card__month-nav {
  display: flex;
  gap: 0.5rem;
}

.booking-card__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-white);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.booking-card__nav-btn:hover {
  border-color: var(--color-maroon);
  color: var(--color-maroon);
}

.booking-card__nav-btn:disabled,
.booking-card__nav-btn.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.booking-card__nav-btn:disabled:hover {
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.booking-card__calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.booking-card__calendar th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.625rem;
  letter-spacing: 0.02em;
  color: #ADADAD;
  padding: 0.5rem 0.15rem;
  text-align: center;
}

.booking-card__calendar td {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--color-charcoal);
  text-align: center;
  padding: 0.45rem 0.1rem;
}

.booking-card__calendar td.is-muted {
  color: #D5D5D5;
}

.booking-card__calendar td.is-selectable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, color 0.2s ease;
}

.booking-card__calendar td.is-selectable:hover {
  background: #F7E3E7;
  color: var(--color-maroon);
  font-weight: 700;
}

.booking-card__continue {
  width: 100%;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-white);
  background: var(--color-maroon-dark);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.booking-card__continue:hover {
  background: var(--color-maroon);
}

.booking-card__continue:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ---- Book Publishing Service Hero: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .service-hero__heading-part--light {
    font-size: 3.25rem;
  }

  .service-hero__heading-part--gold {
    font-size: 3.25rem;
  }

  .service-hero__text {
    font-size: 1.125rem;
  }
}

/* ---- Book Publishing Service Hero: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .service-hero__inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xl);
  }

  .service-hero__content {
    flex: 1 1 50%;
  }

  .service-hero__media {
    flex: 1 1 20%;
  }

  .service-hero__heading-part--light {
    font-size: 3.75rem;
  }

  .service-hero__heading-part--gold {
    font-size: 3.75rem;
  }

  .booking-card {
    padding: var(--space-lg);
    /* Deliberate bleed past the section's bottom edge into .about-story
       below, matching the reference — same negative-margin technique as
       includes/footer.php's --cover-bleed, just a flat px value here since
       there's no other breakpoint to keep it consistent across (unlike the
       footer's cover image, which is a flat value at every breakpoint too).
       Relies on .service-hero's z-index: 2 / .about-story's z-index: 1 to
       actually paint on top instead of being covered by the next section. */
    margin-bottom: -100px;
  }

  .booking-card__calendar td,
  .booking-card__calendar th {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }
}

/* ---- Book Publishing Service Hero: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .service-hero__heading-part--light {
    font-size: 4.375rem; /* 70px, client spec exact value */
  }

  .service-hero__heading-part--gold {
    font-size: 4.375rem; /* 70px, matches --light — client corrected this from an original 55px two-tier spec so all service-hero words render the same size */
  }
}


/* =====================================================================
   25. ADMIN — login (admin/login.php) and appointments dashboard
   (admin/appointments.php). Both are standalone pages (not wrapped in
   includes/header.php/footer.php — see the comment at the top of
   admin/login.php for why) but still pull every token/component from this
   same stylesheet, so they stay visually consistent with the public site
   without duplicating any CSS.
   ===================================================================== */

.admin-login {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl) var(--container-pad);
}

.admin-login__card {
  width: 100%;
  max-width: 26rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.admin-login__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-maroon);
  margin-bottom: var(--space-lg);
  text-align: center;
}

.admin-login__error {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: #B3261E;
  background: #FBEAEA;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: var(--space-md);
}

.admin-login__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.admin-login__submit {
  margin-top: var(--space-sm);
}

.admin-dashboard {
  padding: var(--space-2xl) 0;
}

.admin-dashboard__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
}

.admin-dashboard__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-maroon);
}

.admin-dashboard__logout {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-charcoal);
  text-decoration: underline;
}

.admin-dashboard__month-nav {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.admin-dashboard__month-nav a.booking-card__nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.admin-dashboard__month-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-charcoal);
}

.admin-dashboard__calendar {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: var(--space-xl);
}

.admin-dashboard__calendar th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.7rem;
  color: #ADADAD;
  padding: 0.5rem;
  text-align: center;
  border: 1px solid var(--color-border);
}

.admin-dashboard__cell {
  border: 1px solid var(--color-border);
  vertical-align: top;
  height: 4.5rem;
  padding: 0;
}

.admin-dashboard__cell.is-empty {
  background: var(--color-bg-alt);
}

.admin-dashboard__cell a {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: 100%;
  padding: 0.4rem;
}

.admin-dashboard__cell.is-selected {
  background: #F7E3E7;
}

.admin-dashboard__cell-day {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8rem;
  color: var(--color-charcoal);
}

.admin-dashboard__cell-badge {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.65rem;
  color: var(--color-white);
  background: var(--color-maroon);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.35rem;
  align-self: flex-start;
}

.admin-dashboard__day-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--color-charcoal);
  margin-bottom: var(--space-md);
}

.admin-dashboard__day-empty {
  font-family: var(--font-display);
  color: var(--color-text-secondary);
}

.admin-dashboard__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.admin-dashboard__list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
}

.admin-dashboard__list-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.admin-dashboard__list-time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-maroon);
}

.admin-dashboard__list-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-charcoal);
}

.admin-dashboard__list-contact,
.admin-dashboard__list-comment {
  font-family: var(--font-display);
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.admin-dashboard__cancel-btn {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.85rem;
  color: #B3261E;
  border: 1px solid #B3261E;
  border-radius: var(--radius-sm);
  padding: 0.5rem 1rem;
  cursor: pointer;
  background: transparent;
  transition: background 0.2s ease, color 0.2s ease;
}

.admin-dashboard__cancel-btn:hover {
  background: #B3261E;
  color: var(--color-white);
}

@media (min-width: 768px) {
  .admin-dashboard__cell {
    height: 6rem;
  }
}


/* =====================================================================
   26. AUDIOBOOK SERVICE — "Bring Your Book to Life in Audio"
   (book-publishing.php only). Two-column: text content left, headphones
   + audiobook stack image right (assets/images/service-pages/
   book-publishing/book-publishing-right-image.png). Replaces this page's
   original "Built Around Your Story" About-Us clone (see CLAUDE.md
   Section 9) as the first section sent for this page below the hero.
   No exact type spec was supplied with the screenshot (just the image) —
   sizes below are a best-effort visual match, applied at 1280px+ per
   Section 7's raw-CSS convention and scaled down proportionally at
   smaller breakpoints; flag for the client to confirm before launch.
   ===================================================================== */

.audiobook {
  position: relative;
  z-index: 1; /* sits below .service-hero's floating booking-card bleed, same reasoning as .about-story */
  padding: var(--space-2xl) 0;
  background: var(--color-bg-alt);
}

.audiobook__inner {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.audiobook__heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36; /* 136%, matches the site's other two-tone service headings */
  text-transform: uppercase;
}

.audiobook__heading-line {
  display: block;
}

.audiobook__heading-part--gold {
  color: var(--color-gold-about);
}

.audiobook__heading-part--maroon {
  color: var(--color-maroon);
}

.audiobook__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #373633;
  margin-top: var(--space-md);
}

.audiobook__subheading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--color-charcoal);
  margin-top: var(--space-lg);
}

/* services/audio-book.php only — its subheading ("Create an Audiobook Readers Remember")
   needs to render in caps, unlike book-publishing.php's "Publish with Industry Experts"
   (title case, no transform). Scoped so it doesn't affect that page. */
.audiobook--audio .audiobook__subheading {
  text-transform: uppercase;
}

.audiobook__cta {
  margin-top: var(--space-lg);
}

.audiobook__media img {
  width: 100%;
  height: auto;
}

/* ---- Audiobook Service: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .audiobook__heading {
    font-size: 2.25rem;
  }

  .audiobook__subheading {
    font-size: 1.375rem;
  }

  .audiobook__text {
    font-size: 1.0625rem;
  }
}

/* ---- Audiobook Service: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .audiobook__inner {
    flex-direction: row;
    align-items: center;
    gap: 0;
  }

  .audiobook__content {
    flex: 1 1 50%;
  }

  .audiobook__media {
    flex: 1 1 50%; /* client raw-CSS paste, no breakpoint given — applied here per Section 7's convention (1024px+, since no 1280px+ override exists for this property) */
  }

  .audiobook__heading {
    font-size: 2.5rem;
  }

  .audiobook__subheading {
    font-size: 1.625rem;
  }

  .audiobook__text {
    font-size: 1.1875rem;
  }
}

/* ---- Audiobook Service: exact-fit values (1280px and up) ---- */
@media (min-width: 1280px) {
  .audiobook__heading {
    font-size: 2.8125rem; /* 45px, matches the site's other two-tone service headings */
  }

  .audiobook__subheading {
    font-size: 1.875rem; /* 30px, client raw-CSS paste — exact value, no breakpoint given, applied at 1280px+ per Section 7's convention */
  }

  .audiobook__text {
    font-size: 1.25rem; /* 20px, best-effort visual match */
  }
}


/* =====================================================================
   27. AUDIOBOOK PRODUCTION PROCESS — step slider (book-publishing.php
   only). 6 steps (label row + icon-box row) auto-advance and sync to a
   shared description paragraph; see assets/js/main.js,
   initAudioProcessSteps(). Icons are the client-supplied PNGs in
   assets/images/service-pages/book-publishing/process-icons/ (dark
   charcoal line art on a transparent background, one file per step) —
   the active step's icon is flipped to white via a CSS filter
   (brightness(0) invert(1), the standard technique for recoloring a
   single-color raster icon) rather than needing a second white icon set
   from the client. Exact client spec values below; unspecified values
   (spacing, box sizing, connector look) are a best-effort visual match.
   ===================================================================== */

.audio-process {
  background: var(--color-cream); /* #F8F4EC, client spec exact value */
  padding: var(--space-2xl) 0;
}

.audio-process__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.audio-process__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.audio-process__heading {
  margin: 0;
}

.audio-process__heading-part--dark,
.audio-process__heading-part--maroon {
  font-family: var(--font-display);
  font-size: 2.125rem; /* stepped up from 1.75rem per client — mobile headings only */
  line-height: 1.36; /* 136%, client spec */
}

.audio-process__heading-part--dark {
  font-weight: 500; /* Medium, client spec */
  color: #2B2525; /* client spec exact value, matches var(--color-charcoal) */
}

.audio-process__heading-part--maroon {
  font-weight: 800; /* Heavy, client spec */
  color: var(--color-maroon); /* #5A1F2B, client spec exact value */
}

.audio-process__subtext,
.audio-process__desc {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.4; /* 140%, client spec */
  color: #423A3A; /* client spec exact value */
  max-width: 50rem;
  text-align: center;
}

.audio-process__desc {
  min-height: 2.8em; /* reserves space for the longest step description so the CTA row below doesn't jump as text swaps */
}

/* ---- Step label row (STEP 01 ... STEP 06) with dashed connectors ----
   Below 1024px both this row and the icon-box row below scroll sideways (all 6
   steps never fit a phone). Their native scrollbars are hidden — two grey bars
   stacked mid-section looked broken, per client — and assets/js/main.js keeps
   the active step centred in both rows as the slider advances, so the visible
   window always follows the step instead of sitting wherever it was left. */
.audio-process__nav {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
  padding-bottom: var(--space-xs);
}

.audio-process__nav::-webkit-scrollbar,
.audio-process__grid::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.audio-process__connector {
  flex: 1 1 1.5rem;
  min-width: 1rem;
  height: 0;
  border-top: 2px dashed var(--color-maroon);
  opacity: 0.4;
  margin: 0 0.4rem;
}

.audio-process__step-label {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700; /* Bold, client spec */
  font-size: 0.9375rem;
  line-height: 1.36; /* 136%, client spec */
  color: var(--color-maroon); /* #5A1F2B, client spec exact value */
  opacity: 0.45;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.audio-process__step-label.is-active {
  opacity: 1;
}

/* ---- Icon box row ---- */
.audio-process__grid {
  display: flex;
  gap: var(--space-sm);
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge/IE */
  padding-bottom: var(--space-xs);
}

.audio-process__item {
  position: relative;
  scroll-snap-align: center;
  flex: 1 1 9rem;
  min-width: 9.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  background: #E8E2D7; /* client spec exact value — icon box background */
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-sm);
  color: #3F3636; /* client spec exact value — icon box title color */
  transition: background 0.25s ease, color 0.25s ease;
}

.audio-process__item.is-active {
  background: var(--color-maroon); /* #5A1F2B, client spec exact value — active icon box background */
  color: var(--color-white);
}

/* Small downward-pointing pointer under the active box, connecting it to
   the description paragraph below — matches the client's screenshot. */
.audio-process__item.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 0.5rem solid transparent;
  border-right: 0.5rem solid transparent;
  border-top: 0.5rem solid var(--color-maroon);
}

.audio-process__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
}

.audio-process__icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  transition: filter 0.25s ease;
}

.audio-process__item.is-active .audio-process__icon img {
  filter: brightness(0) invert(1); /* recolors the dark line-art PNG to white for the active (maroon) box */
}

.audio-process__item-title {
  font-family: var(--font-display);
  font-weight: 400; /* client raw-CSS paste, no breakpoint given — applied flat per Section 7's convention */
  font-size: 0.9375rem;
  line-height: 1; /* client raw-CSS paste, applied flat */
}

.audio-process__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
}

/* ---- Audiobook Process: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .audio-process__heading-part--dark,
  .audio-process__heading-part--maroon {
    font-size: 2.25rem;
  }

  .audio-process__subtext,
  .audio-process__desc {
    font-size: 1.125rem;
  }

  .audio-process__step-label {
    font-size: 1.0625rem;
  }

  .audio-process__item-title {
    font-size: 1.0625rem;
  }
}

/* ---- Audiobook Process: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .audio-process__heading-part--dark,
  .audio-process__heading-part--maroon {
    font-size: 2.5rem;
  }

  .audio-process__subtext,
  .audio-process__desc {
    font-size: 1.25rem;
  }

  .audio-process__nav,
  .audio-process__grid {
    overflow-x: visible;
    justify-content: center;
  }

  .audio-process__step-label {
    font-size: 1.375rem;
  }

  .audio-process__item-title {
    font-size: 1.125rem;
  }
}

/* ---- Audiobook Process: exact client spec values (1280px and up) ---- */
@media (min-width: 1280px) {
  .audio-process__heading-part--dark,
  .audio-process__heading-part--maroon {
    font-size: 2.8125rem; /* 45px, client spec exact value */
  }

  .audio-process__subtext,
  .audio-process__desc {
    font-size: 1.625rem; /* 26px, client spec exact value */
  }

  .audio-process__step-label {
    font-size: 1.5625rem; /* 25px, client spec exact value */
  }

  .audio-process__item-title {
    font-size: 1.5625rem; /* 25px, client raw-CSS paste — exact value, no breakpoint given, applied at 1280px+ per Section 7's convention */
  }
}

@media (prefers-reduced-motion: reduce) {
  .audio-process__item,
  .audio-process__step-label {
    transition: none;
  }
}


/* =====================================================================
   28. LEGAL / POLICY PAGES — shared section used by privacy-policy.php,
   terms-conditions.php and refund-policy.php. Each of those pages reuses
   the existing .about-hero banner for its header (same treatment as
   contact.php's hero: copied, not a partial, since the copy differs per
   page) and then renders its body through this one section, driven by a
   $legalIntro / $legalSections array per page.

   No design/mockup was supplied for these pages — every size, spacing and
   color below is a best-effort match built from the site's existing type
   scale and tokens (maroon headings, Kind Sans throughout, #423A3A body
   copy like .audio-process__desc). Flag for the client to confirm.

   Content sits in a plain .container, exactly like every other section on the
   site — an earlier pass gave it a narrower reading measure (60rem, then 100rem
   from a client raw-CSS paste), both reverted per client instruction: these
   pages use the same container width as every other page.
   ===================================================================== */

.legal {
  background: var(--color-white);
  /* Small top padding only: .about-hero above already ends with its own
     var(--space-xl) bottom padding, so a full section's worth here stacked on
     top of it and left a large dead gap between the page heading and the first
     paragraph (client correction). */
  padding: 0 0 var(--space-2xl);
}

.legal__intro {
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

/* No margin of its own: .legal__block-heading is this element's first child, so
   the two margin-tops collapse into whichever is larger — a margin here would
   simply swallow the heading's own client-specified value and the spacing
   between sections would stop responding to it. The heading owns that gap. */
.legal__block {
  margin-top: 0;
}

.legal__block-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.36;
  color: var(--color-maroon);
  /* Breathing room above/below the heading only — the body copy below keeps its
     own tighter rhythm (client correction: the spacing belongs on the headings,
     not on every paragraph/list). Exact px values came in as a client raw-CSS
     paste for the 1024px+ block below; these are that value scaled down. */
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.legal__subheading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--color-gold-about);
  margin-top: 0.5rem;
  margin-bottom: unset; /* client raw-CSS paste — subheading sits directly on its paragraph */
}

.legal__intro p,
.legal__block-body p {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #423A3A; /* same body-copy value as .audio-process__desc */
}

/* Client raw-CSS paste: no gap between consecutive paragraphs — the 1.7
   line-height is doing the separating. Flat at every breakpoint (there's
   nothing to scale down from zero). Note the global reset already sets
   p { margin: 0 }, so this is belt-and-braces against any inherited margin. */
.legal__intro p + p,
.legal__block-body p + p {
  margin-top: unset;
}

.legal__block-body strong {
  font-weight: 600;
  color: var(--color-charcoal);
}

.legal__block-body a {
  color: var(--color-maroon);
  font-weight: 600;
  text-decoration: underline;
}

.legal__block-body a:hover {
  color: var(--color-maroon-dark);
}

/* Custom maroon bullet rather than a default list marker, so the dot size
   and color match the brand instead of the browser default. */
.legal__list {
  list-style: none;
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.legal__list li {
  position: relative;
  padding-left: 1.25rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #423A3A;
}

.legal__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--color-maroon);
}

.legal__list + p {
  margin-top: var(--space-sm);
}

/* Contact details block that closes each policy page. */
.legal__contact-card {
  margin-top: var(--space-md);
  background: var(--color-bg-alt);
  border-left: 4px solid var(--color-maroon);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}

.legal__contact-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-maroon);
  margin-bottom: var(--space-xs);
}

.legal__contact-row {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #423A3A;
}

.legal__contact-row a {
  color: var(--color-maroon);
  font-weight: 600;
}

.legal__contact-row a:hover {
  text-decoration: underline;
}

/* ---- Legal pages: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .legal__block-heading {
    font-size: 1.4375rem;
  }

  .legal__subheading {
    font-size: 1.125rem;
  }

  .legal__intro p,
  .legal__block-body p,
  .legal__list li,
  .legal__contact-row {
    font-size: 1rem;
  }
}

/* ---- Legal pages: Laptop / Desktop (1024px and up) ---- */
@media (min-width: 1024px) {
  .legal {
    padding: 0 0 var(--space-2xl);
  }

  /* Exact client raw-CSS paste values (no breakpoint given — applied here per
     Section 7's convention, since the font-sizes in that paste match this
     block's existing ones; the base rules above are these scaled down). */
  .legal__block-heading {
    font-size: 1.5rem;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .legal__subheading {
    font-size: 1.1875rem;
    margin-top: 10px;
    margin-bottom: unset;
  }

  .legal__intro p,
  .legal__block-body p,
  .legal__list li,
  .legal__contact-row {
    font-size: 1.0625rem;
  }

  .legal__contact-card {
    padding: var(--space-lg);
  }
}

/* ---- Legal pages: larger screens (1280px and up) ---- */
@media (min-width: 1280px) {
  .legal__block-heading {
    font-size: 1.75rem; /* 28px */
  }

  .legal__subheading {
    font-size: 1.25rem; /* 20px */
  }

  .legal__intro p,
  .legal__block-body p,
  .legal__list li,
  .legal__contact-row {
    font-size: 1.125rem; /* 18px */
  }
}


/* =====================================================================
   29. FORM VALIDATION — inline field errors (main.js BespokeForms)
   Shared by the Start Your Book popup, Contact Us form and the booking
   scheduler's Step 3.
   ===================================================================== */
.form-error {
  font-family: var(--font-display);
  font-size: 0.8rem;
  line-height: 1.3;
  color: #B3261E;
  margin: 0.3rem 0 0;
}

.form-error:empty {
  display: none;
}

.contact-form__field .form-error {
  padding-left: 2rem;
}

/* Popup reuses the Contact form's checkbox; drop its big bottom margin here
   (the popup form spaces its own children). */
.book-popup__form .contact-form__checkbox {
  margin-bottom: 0;
}

.contact-form__checkbox + .form-error {
  margin-top: 0.4rem;
}

.book-popup__input.is-invalid {
  border-color: #B3261E;
}

.contact-form__input.is-invalid {
  border-bottom-color: #B3261E;
}


/* =====================================================================
   30. SCROLL REVEAL — section fade-up (main.js initSectionReveal)
   Only hidden once JS has tagged the section (.reveal), so nothing is
   ever invisible without JS. .is-visible is toggled on enter AND leave,
   so the animation replays on every scroll pass, up or down.
   ===================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}


/* =====================================================================
   31. THANK YOU PAGE (thank-you.php only) — post-submission confirmation
   for the "Start Your Book" popup and the Contact Us form. Centred banner
   in the same language as .about-hero (section 20), plus a 3-up "what
   happens next" row and the auto-return countdown (main.js
   initThankYouRedirect). No client mockup — best-effort, flag for
   revision. Background reuses the About hero's topo-line pattern so the
   page doesn't read as a different site.
   ===================================================================== */

.thank-you {
  position: relative;
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
  background-color: var(--color-bg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  background-image: url("../images/about-us-page/hero-section/bg.png");
}

.thank-you__inner {
  position: relative;
  z-index: 1;
}

/* Gold ring + maroon tick. The draw-on animation is the page's only motion,
   and it runs once — not a loop — so it reads as a confirmation, not a spinner. */
.thank-you__seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: var(--space-md);
  border: 2px solid var(--color-gold-about);
  border-radius: 50%;
  color: var(--color-maroon);
  background-color: var(--color-white);
}

.thank-you__seal svg {
  width: 2.25rem;
  height: 2.25rem;
  stroke-dasharray: 24;
  animation: thank-you-tick 0.7s cubic-bezier(0.65, 0, 0.35, 1) 0.15s both;
}

@keyframes thank-you-tick {
  from { stroke-dashoffset: 24; }
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .thank-you__seal svg {
    animation: none;
    stroke-dasharray: none;
  }
}

.thank-you__eyebrow {
  font-family: var(--font-display);
  font-weight: bold;
  font-size: 1.75rem;
  line-height: 1.36;
  color: var(--color-maroon);
  margin: 0 0 var(--space-xs);
}

.thank-you__heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.125rem;
  line-height: 1.1;
  color: var(--color-gold-about);
  max-width: 40rem;
  margin: 0 auto;
}

.thank-you__lead {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 38rem;
  margin: var(--space-md) auto 0;
}

/* ---- What happens next ---- */
.thank-you__steps {
  display: grid;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: var(--space-lg) auto 0;
  max-width: 30rem;
  text-align: left;
}

/* padding-top clears the absolutely-positioned number badge: it starts at
   --space-md and is 1.75rem tall, so content must begin below ~3.25rem. */
.thank-you__step {
  position: relative;
  padding: var(--space-md);
  padding-top: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
}

.thank-you__step-num {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  font-family: var(--font-cta);
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-white);
  background-color: var(--color-maroon);
  border-radius: 50%;
}

.thank-you__step-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.3;
  color: var(--color-maroon);
  margin: 0 0 var(--space-xs);
}

.thank-you__step-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-card-text);
  margin: 0;
}

/* ---- Phone fallback + CTA ---- */
.thank-you__urgent {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-charcoal);
  margin: var(--space-lg) 0 0;
}

.thank-you__phone {
  font-weight: 700;
  color: var(--color-maroon);
  white-space: nowrap;
}

.thank-you__phone:hover,
.thank-you__phone:focus-visible {
  color: var(--color-maroon-dark);
}

.thank-you__actions {
  display: flex;
  justify-content: center;
  margin-top: var(--space-md);
}

/* ---- Auto-return countdown ---- */
.thank-you__timer {
  margin-top: var(--space-lg);
}

.thank-you__countdown {
  font-family: var(--font-phone);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0;
}

.thank-you__countdown-num {
  font-weight: 700;
  color: var(--color-maroon);
}

.thank-you__stay {
  display: inline-block;
  margin-top: var(--space-xs);
  padding: 0;
  font-family: var(--font-phone);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-maroon);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}

.thank-you__stay:hover,
.thank-you__stay:focus-visible {
  color: var(--color-maroon-dark);
}

/* Once the visitor opts out, the countdown copy is stale — the cancel button
   hides itself and the line is rewritten by JS, so only the styling changes. */
.thank-you__timer.is-cancelled .thank-you__stay {
  display: none;
}

/* ---- Thank You: Tablet (768px and up) ---- */
@media (min-width: 768px) {
  .thank-you {
    padding: var(--space-2xl) 0 var(--space-xl);
  }

  .thank-you__heading {
    font-size: 2.5rem;
    line-height: 1;
  }

  .thank-you__lead {
    font-size: 1.0625rem;
  }

  .thank-you__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    max-width: 58rem;
  }
}

/* ---- Thank You: Laptop (1024px and up) ---- */
@media (min-width: 1024px) {
  .thank-you__heading {
    font-size: 3rem;
  }

  .thank-you__steps {
    margin-top: var(--space-xl);
  }
}