/* =================================================
   ROBB MACDONALD — Marketing site one-pager
   Composes on top of colors_and_type.css tokens
   ================================================= */

:root {
  /* Strong exponential easings — beat the built-in CSS curves */
  --ease-out:      cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-quint:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.77, 0, 0.175, 1);
  --press-scale:   0.97;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
#contact { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  width: 100%;
  min-width: 320px;
  overflow-x: hidden;
  font-family: var(--rm-font-sans);
  color: var(--rm-fg);
  background: var(--rm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--rm-text-md);
  line-height: var(--rm-leading-relaxed);
}
section { width: 100%; }
main { display: block; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
a, button, input, textarea, select, summary, .btn { -webkit-tap-highlight-color: transparent; }

/* Skip link — off-screen until keyboard focus (transform, not layout, animated) */
.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 100;
  transform: translateY(-150%);
  background: var(--rm-midnight-navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--rm-radius-md);
  font-size: 14px;
  font-weight: var(--rm-w-medium);
  box-shadow: var(--rm-shadow-md);
  transition: transform 220ms var(--ease-out);
}
.skip-link:focus { transform: none; outline: 2px solid var(--rm-gold); outline-offset: 2px; }

.container {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 36px;
}

/* ===================== HEADER ===================== */
.site-header {
  position: relative;
  z-index: 20;
  padding: 18px 0;
  /* Matches the footer + the logo's own background so the crest lockup blends. */
  background: #1c1e3f;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.site-header__logo {
  width: 308px;
  height: auto;
  max-width: 100%;
  display: block;
  transition: opacity 220ms var(--ease-out);
}
.site-header__logo-wrap:hover .site-header__logo { opacity: 0.82; }
.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}
.site-nav a {
  position: relative;
  font-size: 14px;
  font-weight: var(--rm-w-medium);
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 4px 0;
  transition: color 180ms var(--ease-out);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 320ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .site-nav a:hover { color: #fff; }
  .site-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* ===================== BUTTONS ===================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 22px;
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-medium);
  font-size: 15px;
  letter-spacing: 0.01em;
  border-radius: var(--rm-radius-md);
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  will-change: transform;
  transition:
    background 220ms var(--ease-out),
    color 220ms var(--ease-out),
    border-color 220ms var(--ease-out),
    transform 200ms var(--ease-out);
}
.btn:active {
  transform: scale(var(--press-scale));
  transition-duration: 80ms;
}
.btn .arrow {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  transition: transform 260ms var(--ease-out-expo);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover .arrow { transform: translateX(4px); }
}

/* Primary navy on light */
.btn--primary {
  background: var(--rm-midnight-navy);
  color: #fff;
}
.btn--primary:hover { background: var(--rm-steel-blue); }

/* Solid white on dark */
.btn--white {
  background: #fff;
  color: var(--rm-midnight-navy);
}
.btn--white:hover { background: var(--rm-soft-white); }

/* Outlined on dark */
.btn--outline-light {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.45);
}
.btn--outline-light:hover {
  background: rgba(255,255,255,0.08);
  border-color: #fff;
}

/* ===================== HERO ===================== */
.hero {
  position: relative;
  background: var(--rm-midnight-navy);
  color: #fff;
  padding: 120px 0 96px;
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/hero-bg.png');
  /* Reverted 2026-08-24 at Robb's request: the walking courthouse-steps shot
     (hero-bg-h-robb.png) read as "too over the top". Back to the original,
     pre-cropped so Robb sits at horizontal 50%. Natural cover, no zoom. */
  background-size: cover;
  background-position: center 22%;
  background-repeat: no-repeat;
  opacity: 1;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Only darken the left side enough for the headline to read; the rest of the
     image is left intact so there's no navy "hue" washing it out. A faint bottom
     vignette keeps the stats row readable. */
  background:
    linear-gradient(to right,
      rgba(11, 31, 58, 0.62) 0%,
      rgba(11, 31, 58, 0.22) 24%,
      rgba(11, 31, 58, 0) 44%,
      rgba(11, 31, 58, 0) 100%
    ),
    linear-gradient(to top,
      rgba(11, 31, 58, 0.35) 0%,
      rgba(11, 31, 58, 0) 30%
    );
}
.hero .container { position: relative; z-index: 2; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 120px;
  align-items: stretch;
}

/* Hero entry — staggered fade-up.
   Children start translated down + invisible, then settle in sequence. */
.hero__title,
.hero__lede,
.hero__actions,
.hero__stats,
.form-card {
  opacity: 0;
  transform: translateY(14px);
  animation: rm-rise 640ms var(--ease-out-expo) forwards;
}
.hero__title    { animation-delay: 120ms; }
.hero__lede     { animation-delay: 220ms; }
.hero__actions  { animation-delay: 320ms; }
.hero__stats    { animation-delay: 420ms; }
.form-card      { animation-delay: 240ms; }

@keyframes rm-rise {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero copy column */
.hero__copy { padding-top: 12px; }
.hero__title {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-w-semibold);
  font-size: 60px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 28px;
  padding-bottom: 4px;
  /* Cap width so "Strategic Criminal Defence." wraps before reaching the
     center of the hero — keeps the headline off Robb's face. */
  max-width: 540px;
}
.hero__lede {
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
  margin: 0 0 36px;
  max-width: 460px;
}
.hero__actions {
  display: flex;
  gap: 14px;
  margin-bottom: 56px;
  flex-wrap: wrap;
}
.hero__actions .btn { min-width: 200px; padding: 15px 24px; }

/* Hero stats row */
.hero__stats {
  display: flex;
  align-items: stretch;
  gap: 28px;
}
.hero__stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 28px;
  border-right: 1px solid rgba(255,255,255,0.16);
  transition: transform 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hero__stat:hover { transform: translateY(-2px); }
}
.hero__stat:last-child { border-right: none; padding-right: 0; }
.hero__stat svg {
  width: 28px;
  height: 28px;
  color: rgba(255,255,255,0.82);
  flex: 0 0 28px;
}
.hero__stat-big {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-w-semibold);
  font-size: 30px;
  line-height: 1;
  color: #fff;
}
.hero__stat-label {
  font-size: 11.5px;
  line-height: 1.35;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.01em;
}

/* Hero video card (frosted-glass container, replaces the form) + film modal */
.hero__media {
  align-self: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 14px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: translateY(14px);
  animation: rm-rise 640ms var(--ease-out-expo) 240ms forwards;
}
.hero__video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  background: var(--rm-midnight-navy);
}
.hero__video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
.hero__video-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 31, 58, 0) 38%, rgba(11, 31, 58, 0.62) 100%);
}
.hero__video-dur {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  font-size: 12px;
  font-weight: var(--rm-w-semibold);
  color: #fff;
  background: rgba(7, 18, 34, 0.7);
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}
.hero__video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--rm-midnight-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.5);
  transition: transform 300ms var(--ease-out-expo), background 240ms var(--ease-out);
}
.hero__video-play svg { width: 26px; height: 26px; margin-left: 3px; }
.hero__video-title {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--rm-font-display);
  font-size: 18px;
  color: #fff;
  letter-spacing: 0.01em;
}
.hero__video-cap {
  margin: 14px 4px 2px;
  font-family: var(--rm-font-display);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}
@media (hover: hover) and (pointer: fine) {
  .hero__video:hover .hero__video-play { transform: translate(-50%, -50%) scale(1.08); background: #fff; }
  .hero__video:hover .hero__video-poster { transform: scale(1.03); }
}
/* Title as a header inside the glass card + inline video element */
.hero__media-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 2px 6px 12px;
}
.hero__media-title {
  font-family: var(--rm-font-display);
  font-size: 19px;
  line-height: 1;
  color: #fff;
  letter-spacing: 0.01em;
}
.hero__media-dur {
  font-size: 12px;
  font-weight: var(--rm-w-semibold);
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}
.hero__video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.hero__video.is-playing { cursor: default; }
.hero__video.is-playing .hero__video-play { display: none; }

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}
.video-modal[hidden] { display: none; }
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 18, 34, 0.84);
  animation: rm-fade 200ms var(--ease-out) both;
}
.video-modal__dialog {
  position: relative;
  width: min(960px, 92vw);
  animation: rm-pop 260ms var(--ease-out-expo) both;
}
.video-modal__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 90px -24px rgba(0, 0, 0, 0.75);
}
.video-modal__frame video { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-modal__close {
  position: absolute;
  top: -16px;
  right: -16px;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: #fff;
  color: var(--rm-midnight-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 26px -6px rgba(0, 0, 0, 0.55);
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out);
}
.video-modal__close svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .video-modal__close:hover { transform: scale(1.08); background: var(--rm-soft-white); }
}
@keyframes rm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rm-pop { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .video-modal__backdrop, .video-modal__dialog { animation: none; }
}

/* Madam Justice Dunnet attribution context line (testimonial card) */
.testimonial__context {
  display: block;
  margin-top: 6px;
  font-family: var(--rm-font-sans);
  font-style: normal;
  font-weight: var(--rm-w-regular, 400);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0.01em;
  color: var(--rm-fg-subtle);
}

/* Hero form card — frosted glass (90% transparent bg) */
.form-card {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 32px;
  border-radius: var(--rm-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* Inner highlight + soft outer shadow toned to navy, not generic black */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 48px -18px rgba(11, 31, 58, 0.45);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.form-card h3 {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: 20px;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  color: #fff;
}
.form-card p {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 22px;
}
.form-card .field { margin-bottom: 12px; }
.form-card input,
.form-card textarea {
  width: 100%;
  font-family: var(--rm-font-sans);
  font-size: 14px;
  color: var(--rm-fg);
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-md);
  padding: 13px 14px;
  outline: none;
  transition:
    border-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out),
    background 200ms var(--ease-out);
}
.form-card input:hover:not(:focus),
.form-card textarea:hover:not(:focus) {
  border-color: var(--rm-border-strong);
}
.form-card textarea {
  min-height: 88px;
  resize: vertical;
  font-family: var(--rm-font-sans);
}
.form-card input::placeholder,
.form-card textarea::placeholder {
  color: var(--rm-ink-50);
}
.form-card input:focus,
.form-card textarea:focus {
  border-color: var(--rm-midnight-navy);
  box-shadow: var(--rm-shadow-focus);
}
.form-card .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.72);
  margin: 14px 0 16px;
}
.form-card .meta svg { width: 14px; height: 14px; color: rgba(255, 255, 255, 0.72); }
.form-card .btn { width: 100%; padding: 15px 22px; }

/* ===================== SECTION CHROME ===================== */
.section { padding: 64px 0; }

/* "Why Clients Choose Us" — bg lives on the container card, not edge-to-edge. */
.section--subtle {
  background: transparent;
  padding: 24px 0;
}
.section--subtle > .container {
  background: var(--rm-soft-white);
  border-radius: 14px;
  padding: 64px 56px;
  max-width: min(1440px, calc(100% - 48px));
}
.section--dark {
  background: var(--rm-midnight-navy);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.eyebrow {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--rm-tracking-eyebrow);
  color: var(--rm-fg-subtle);
  display: block;
  margin-bottom: 14px;
}
.eyebrow--on-dark { color: var(--rm-silver-gray); }
.section-h2 {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-w-semibold);
  font-size: 38px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--rm-fg);
  margin: 0;
  padding-bottom: 4px;
}
.section-h2--on-dark { color: #fff; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 44px;
}
.section-head__l { max-width: 760px; }

.tertiary-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: var(--rm-w-medium);
  color: var(--rm-midnight-navy);
  white-space: nowrap;
  transition: color 220ms var(--ease-out);
}
.tertiary-link svg { width: 16px; height: 16px; transition: transform 260ms var(--ease-out-expo); }
@media (hover: hover) and (pointer: fine) {
  .tertiary-link:hover { color: var(--rm-steel-blue); }
  .tertiary-link:hover svg { transform: translateX(4px); }
}
.tertiary-link--on-dark { color: #fff; }

/* ===================== PRACTICE AREAS ===================== */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 14px;
}
.practice-card {
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-md);
  padding: 30px 22px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* staggered entrance via per-child delay below */
  opacity: 0;
  transform: translateY(12px);
  animation: rm-rise 600ms var(--ease-out-expo) forwards;
  transition:
    border-color 240ms var(--ease-out),
    transform 240ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
}
.practice-card:nth-child(1) { animation-delay: 60ms; }
.practice-card:nth-child(2) { animation-delay: 120ms; }
.practice-card:nth-child(3) { animation-delay: 180ms; }
.practice-card:nth-child(4) { animation-delay: 240ms; }
.practice-card:nth-child(5) { animation-delay: 300ms; }
.practice-card:nth-child(6) { animation-delay: 360ms; }
.practice-card:nth-child(7) { animation-delay: 420ms; }
@media (hover: hover) and (pointer: fine) {
  .practice-card:hover {
    border-color: var(--rm-border-strong);
    transform: translateY(-4px);
    /* Tinted shadow toward brand navy, not a generic black drop */
    box-shadow: 0 14px 30px -14px rgba(11, 31, 58, 0.18);
  }
}
.practice-card__ico {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rm-midnight-navy);
  margin-bottom: 18px;
}
.practice-card__ico svg { width: 30px; height: 30px; }
.practice-card__title {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: 15px;
  line-height: 1.35;
  color: var(--rm-fg);
  margin: 0 0 14px;
  min-height: 2.7em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.practice-card__body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--rm-fg-muted);
  margin: 0 0 20px;
  flex: 1;
}
.practice-card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: var(--rm-w-medium);
  color: var(--rm-midnight-navy);
  margin-top: auto;
}
.practice-card__more svg { width: 14px; height: 14px; transition: transform 260ms var(--ease-out-expo); }
@media (hover: hover) and (pointer: fine) {
  .practice-card:hover .practice-card__more svg { transform: translateX(4px); }
}

/* ===================== WHY CHOOSE US ===================== */
.why-grid {
  display: grid;
  grid-template-columns: minmax(440px, 1.15fr) minmax(0, 2.2fr);
  gap: 48px;
  align-items: start;
}
.why-grid__l .section-h2 {
  margin-top: 0;
  font-size: 34px;
  line-height: 1.12;
}
.why-grid__l .eyebrow { margin-bottom: 18px; }
.why-grid__l p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--rm-fg-muted);
  margin: 22px 0 22px;
  max-width: none;
}
.why-pillars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  padding-left: 56px;
  align-self: center;
}
.why-grid { position: relative; }
.why-grid::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc((100% - 48px) * (1.15 / 3.35) + 24px);
  width: 1px;
  background: var(--rm-border);
}
.why-pillar {
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  animation: rm-rise 580ms var(--ease-out-expo) forwards;
  transition: transform 260ms var(--ease-out);
}
.why-pillar:nth-child(1) { animation-delay: 80ms; }
.why-pillar:nth-child(2) { animation-delay: 160ms; }
.why-pillar:nth-child(3) { animation-delay: 240ms; }
.why-pillar:nth-child(4) { animation-delay: 320ms; }
.why-pillar__ico {
  width: 44px;
  height: 44px;
  margin: 0 auto 18px;
  color: var(--rm-midnight-navy);
  transition: transform 320ms var(--ease-out-expo);
}
.why-pillar__ico svg { width: 32px; height: 32px; }
@media (hover: hover) and (pointer: fine) {
  .why-pillar:hover .why-pillar__ico { transform: translateY(-3px) scale(1.06); }
}
.why-pillar__h {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: 15px;
  color: var(--rm-fg);
  margin: 0 0 10px;
}
.why-pillar__b {
  font-size: 13px;
  line-height: 1.55;
  color: var(--rm-fg-muted);
  margin: 0;
}

/* ===================== PROVEN RESULTS (dark, inset card) ===================== */
.results {
  background: transparent;
  color: #fff;
  padding: 24px 0;
}
.results > .container {
  position: relative;
  background: var(--rm-midnight-navy);
  border-radius: 14px;
  padding: 72px 56px;
  overflow: hidden;
  max-width: min(1440px, calc(100% - 48px));
}
.results__bg {
  position: absolute; inset: 0;
  background-image: url('assets/toronto-skyline.jpg');
  background-size: cover;
  background-position: center 40%;
  opacity: 0.4;
  filter: brightness(0.85);
}
.results__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--rm-midnight-navy) 0%, rgba(11,31,58,0.65) 50%, rgba(11,31,58,0.88) 100%);
}
/* Lift card content above the bg/overlay layers that now share the same container. */
.results__head,
.results__row { position: relative; z-index: 2; }
.results__head { margin-bottom: 36px; }
.results__head .section-h2 { font-size: 34px; }

.results__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 32px;
  align-items: center;
}
.results__stat-big {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-w-semibold);
  font-size: 44px;
  line-height: 1;
  color: #fff;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.results__stat-medium {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: 19px;
  line-height: 1.2;
  color: #fff;
  margin: 0 0 8px;
}
.results__stat-l1 {
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  line-height: 1.3;
  margin: 0;
}
.results__cta { justify-self: end; }
.results__cta .btn { padding: 14px 22px; min-width: 200px; }

/* ===================== TESTIMONIALS ===================== */
.testimonials-grid {
  display: grid;
  grid-template-columns: 1.05fr 3fr auto;
  gap: 32px;
  align-items: start;
}
.testimonials-grid .eyebrow { margin-bottom: 16px; }
.testimonials-grid__intro p {
  font-size: 14.5px;
  color: var(--rm-fg-muted);
  margin: 36px 0 0;
  line-height: 1.6;
  max-width: 280px;
}
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.testimonial {
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-md);
  padding: 26px 24px;
  transition:
    border-color 240ms var(--ease-out),
    transform 240ms var(--ease-out),
    box-shadow 280ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .testimonial:hover {
    border-color: var(--rm-border-strong);
    transform: translateY(-3px);
    box-shadow: 0 12px 26px -14px rgba(11, 31, 58, 0.16);
  }
}
.testimonial__stars {
  display: flex;
  gap: 3px;
  color: var(--rm-charcoal);
  margin-bottom: 16px;
}
.testimonial__stars svg { width: 18px; height: 18px; fill: currentColor; }
.testimonial__quote {
  font-size: 14px;
  line-height: 1.6;
  color: var(--rm-fg);
  margin: 0 0 20px;
}
.testimonial__author {
  font-size: 13px;
  font-weight: var(--rm-w-medium);
  color: var(--rm-fg-muted);
}
.carousel-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  align-self: center;
}
.carousel-controls button {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--rm-border);
  color: var(--rm-fg-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    border-color 220ms var(--ease-out),
    color 220ms var(--ease-out),
    background 220ms var(--ease-out),
    transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .carousel-controls button:hover {
    border-color: var(--rm-midnight-navy);
    color: var(--rm-midnight-navy);
    background: var(--rm-soft-white);
  }
}
.carousel-controls button:active {
  transform: scale(var(--press-scale));
  transition-duration: 80ms;
}
.carousel-controls button svg { width: 18px; height: 18px; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .carousel-controls button:hover svg { transform: scale(1.08); }
}

/* ===================== FAQ ===================== */
.faq-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.faq-item {
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-md);
  background: #fff;
}
.faq-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 14px;
  font-size: 13px;
  font-weight: var(--rm-w-medium);
  color: var(--rm-fg);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background 200ms var(--ease-out);
}
.faq-item > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) {
  .faq-item:hover > summary { background: var(--rm-soft-white); }
}
.faq-item .toggle {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  color: var(--rm-fg-muted);
  flex: 0 0 22px;
  font-size: 16px;
  line-height: 1;
  transition:
    transform 320ms var(--ease-out-expo),
    background 240ms var(--ease-out),
    color 240ms var(--ease-out),
    border-color 240ms var(--ease-out);
}
.faq-item[open] .toggle {
  transform: rotate(45deg);
  background: var(--rm-midnight-navy);
  color: #fff;
  border-color: var(--rm-midnight-navy);
}
.faq-item > summary:active .toggle {
  transform: scale(0.92);
}
.faq-item[open] > summary:active .toggle {
  transform: rotate(45deg) scale(0.92);
}

/* Progressive enhancement: smoothly animate the body's height on browsers
   that support ::details-content. Falls back to instant open elsewhere. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    height: 0;
    overflow: clip;
    transition: height 320ms var(--ease-out), content-visibility 320ms var(--ease-out) allow-discrete;
  }
  .faq-item[open]::details-content {
    height: auto;
  }
}
.faq-item__body {
  padding: 0 14px 18px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--rm-fg-muted);
}

/* ===================== FOOTER ===================== */
.site-footer {
  /* Matches the header + the logo's own background so the crest lockup blends. */
  background: #1c1e3f;
  color: rgba(255,255,255,0.75);
  padding: 64px 0 26px;
}
.site-footer__main {
  display: grid;
  grid-template-columns: 1.5fr 0.95fr 0.85fr 0.8fr 1.05fr;
  gap: 36px;
  padding-bottom: 56px;
}
/* Drive size off width so the aspect ratio can't get squashed by .container's
   `max-width: 100%`. Height auto-derives from the natural aspect. */
.site-footer__brand img {
  width: 308px;
  height: auto;
  max-width: 100%;
  display: block;
  margin-bottom: 22px;
}
.site-footer__brand p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,0.62);
  margin: 0 0 22px;
  max-width: 240px;
}
.site-footer__socials {
  display: flex;
  gap: 10px;
}
.site-footer__socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.75);
  transition:
    border-color 220ms var(--ease-out),
    color 220ms var(--ease-out),
    transform 220ms var(--ease-out),
    background 220ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__socials a:hover {
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
    background: rgba(255,255,255,0.06);
  }
}
.site-footer__socials a:active { transform: scale(var(--press-scale)); transition-duration: 80ms; }
.site-footer__socials svg { width: 15px; height: 15px; }

.site-footer__col h4 {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: 14px;
  color: #fff;
  margin: 0 0 18px;
}
.site-footer__col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 10px;
}
.site-footer__col li a {
  font-size: 13px;
  color: rgba(255,255,255,0.65);
  transition: color 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .site-footer__col li a:hover { color: #fff; }
}
.site-footer__col--practice ul li:last-child a {
  color: rgba(255,255,255,0.85);
  font-weight: var(--rm-w-medium);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.site-footer__contact .contact-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 10px;
}
.site-footer__contact .contact-row svg { width: 16px; height: 16px; color: rgba(255,255,255,0.7); }
.site-footer__contact .address {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.62);
  margin: 14px 0 0;
  padding-left: 26px;
}
.site-footer__contact p.intro {
  font-size: 13px;
  color: rgba(255,255,255,0.62);
  margin: 0 0 18px;
  max-width: 220px;
  line-height: 1.55;
}
.site-footer__contact-cta {
  margin-top: 22px;
  width: 100%;
  max-width: 240px;
}

.site-footer__bot {
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
}
.site-footer__bot .bot-links {
  display: flex;
  gap: 26px;
}
.site-footer__bot a:hover { color: #fff; }

/* ===================== LOGO STRIPS =====================
   Used for "As Featured In" (post-hero) and "Professional Memberships"
   (pre-footer). Wordmarks rendered as on-brand typography rather than
   third-party logos so the strip blends into the design system. */
.logo-strip {
  background: var(--rm-soft-white);
  border-top: 1px solid var(--rm-border);
  border-bottom: 1px solid var(--rm-border);
  padding: 36px 0 40px;
}
.logo-strip__eyebrow {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rm-fg-subtle);
  text-align: center;
  margin: 0 0 22px;
}
.logo-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 56px;
  align-items: center;
  justify-items: center;
}
.logo-strip__list--six {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 40px;
}
.logo-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 44px;
  color: var(--rm-ink-50);
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  animation: rm-rise 580ms var(--ease-out-expo) forwards;
  transition: color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.logo-strip__item:nth-child(1) { animation-delay:  40ms; }
.logo-strip__item:nth-child(2) { animation-delay: 100ms; }
.logo-strip__item:nth-child(3) { animation-delay: 160ms; }
.logo-strip__item:nth-child(4) { animation-delay: 220ms; }
.logo-strip__item:nth-child(5) { animation-delay: 280ms; }
.logo-strip__item:nth-child(6) { animation-delay: 340ms; }

@media (hover: hover) and (pointer: fine) {
  .logo-strip__item:hover {
    color: var(--rm-midnight-navy);
    transform: translateY(-2px);
  }
}

/* Two-line wordmark layout (e.g. "Toronto Lawyers / Association") */
.logo-strip__item-main {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: 15px;
  letter-spacing: -0.005em;
}
.logo-strip__item-sub {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-medium);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  margin-top: 3px;
  opacity: 0.78;
  text-transform: uppercase;
}

/* ---------- Media strip: one wordmark per cell, varied weights ---------- */
.logo-strip--media .logo-strip__item--ctv {
  font-family: var(--rm-font-sans);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.logo-strip--media .logo-strip__item--etalk {
  font-family: var(--rm-font-display);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.logo-strip--media .logo-strip__item--cp24 {
  font-family: var(--rm-font-sans);
  font-style: italic;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.logo-strip--media .logo-strip__item--star {
  font-family: var(--rm-font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.005em;
}
.logo-strip--media .logo-strip__item--global .logo-strip__item-main {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.005em;
}
.logo-strip--media .logo-strip__item--global .logo-strip__item-sub {
  font-size: 10.5px;
  letter-spacing: 0.1em;
}

/* ---------- Memberships strip: institutional serif feel ---------- */
.logo-strip--memberships {
  background: var(--rm-navy-08);
}
.logo-strip--memberships .logo-strip__item--cba {
  font-family: var(--rm-font-sans);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: 0.04em;
  color: var(--rm-midnight-navy);
  opacity: 0.55;
}
.logo-strip--memberships .logo-strip__item--justia {
  font-family: var(--rm-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.005em;
  color: var(--rm-midnight-navy);
  opacity: 0.55;
}
@media (hover: hover) and (pointer: fine) {
  .logo-strip--memberships .logo-strip__item--cba:hover,
  .logo-strip--memberships .logo-strip__item--justia:hover {
    opacity: 1;
  }
}
.logo-strip--memberships .logo-strip__item--two-line .logo-strip__item-main {
  font-family: var(--rm-font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0;
}
.logo-strip--memberships .logo-strip__item--two-line .logo-strip__item-sub {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-medium);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ============================================================
   2026 REBRAND — ANTIQUE-GOLD ACCENTS (crest brand system)
   Restrained metallic accents layered over the tokenised base.
   Gold appears on: eyebrows, stat numerals, nav underline,
   hairline/diamond motifs, focus ring, and an optional CTA.
   ============================================================ */

/* Eyebrows / section kickers -> antique gold */
.eyebrow { color: var(--rm-gold); }
.eyebrow--on-dark { color: var(--rm-gold-bright); }

/* Big stat numerals -> gold (both sit on the navy hero / results bands) */
.hero__stat-big,
.results__stat-big,
.results__stat-medium { color: var(--rm-gold-bright); }

/* Primary-nav underline + active indicator -> gold */
.site-nav a::after { background: var(--rm-gold-bright); }

/* Gold hairline + diamond separator motif (from the crest lockup).
   Opt-in utilities — render only where the class is applied. */
.rule-gold {
  border: 0;
  height: 1px;
  width: 64px;
  margin: 18px 0;
  background: linear-gradient(90deg, var(--rm-gold) 0%, rgba(176,141,87,0) 100%);
}
.rule-gold--center { margin-left: auto; margin-right: auto;
  background: linear-gradient(90deg, rgba(176,141,87,0) 0%, var(--rm-gold) 50%, rgba(176,141,87,0) 100%); }
.diamond-sep {
  display: inline-block;
  width: 6px; height: 6px;
  margin: 0 12px;
  transform: rotate(45deg);
  background: var(--rm-gold);
  vertical-align: middle;
}

/* Optional gold CTA variant (available for consultation buttons) */
.btn--gold {
  background: var(--rm-gold);
  color: var(--rm-midnight-navy);
  font-weight: var(--rm-w-semibold);
}
.btn--gold:hover { background: var(--rm-gold-bright); }
.btn--outline-gold {
  background: transparent;
  color: var(--rm-gold-bright);
  border-color: var(--rm-border-gold-on-dark);
}
.btn--outline-gold:hover { background: var(--rm-gold-soft); border-color: var(--rm-gold-bright); }

/* Prose link underline tinted gold (text stays navy for legibility) */
.prose a { text-decoration-color: var(--rm-gold); }

/* Accessible keyboard focus ring -> gold */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--rm-gold);
  outline-offset: 2px;
  border-radius: 1px;
}

/* ============================================================
   RESPONSIVE — 2026 mobile optimization
   The desktop composition above is authored for >=1180px and is
   left untouched there. Below that, layouts compress, then collapse
   to a single column. Breakpoints:
     1180  small-laptop compression
      980  tablet (multi-col grids halve, nav still inline)
      900  mobile navigation (hamburger drawer)
      720  single-column stack
      460  small phone
   ============================================================ */

/* Menu wrapper is transparent to layout on desktop; becomes the drawer on mobile.
   Hamburger button is hidden until the mobile breakpoint. */
.site-header__menu { display: contents; }
.nav-toggle { display: none; }

/* ---------- 1180: small-laptop compression ---------- */
@media (max-width: 1180px) {
  .hero__grid { gap: 56px; }
  /* Below the full desktop width the calc-positioned divider drifts, so retire it
     and its companion indent once compression begins. */
  .why-grid::before { display: none; }
  .why-pillars { padding-left: 0; }
  .results__row { gap: 24px; }
  .video-feature__grid { gap: 40px; }
}

/* ---------- 980: tablet ---------- */
@media (max-width: 980px) {
  .container { padding: 0 28px; }

  .hero__title { font-size: 50px; }

  .practice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .why-grid { grid-template-columns: 1fr; gap: 36px; }
  .why-grid::before { display: none; }
  .why-pillars { padding-left: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .results__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .results__cta { grid-column: 1 / -1; justify-self: start; }

  .testimonials-grid { grid-template-columns: 1fr; gap: 28px; }
  .testimonials-grid__intro p { max-width: none; }
  .testimonials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .carousel-controls { flex-direction: row; align-self: flex-start; }

  .faq-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .section--subtle > .container { padding: 48px 36px; }
  .results > .container { padding: 56px 40px; }
}

/* ---------- 900: mobile navigation ---------- */
@media (max-width: 900px) {
  /* Belt-and-suspenders: kill the scrollbar-gutter horizontal overflow on
     classic-scrollbar platforms. Safe here because the sticky aside is static
     at this width. `clip` does not create a scroll container. */
  html, body { overflow-x: clip; }

  /* Match the footer logo size (280px); cap so it never collides with the
     hamburger on narrow phones (reserves padding + the 44px toggle + gap). */
  .site-header__logo { width: 308px; max-width: calc(100vw - 96px); }

  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    background: transparent;
    border: 0;
    color: #fff;
    transition: transform 200ms var(--ease-out);
  }
  .nav-toggle:active { transform: scale(var(--press-scale)); transition-duration: 80ms; }
  .nav-toggle__bars { position: relative; width: 24px; height: 16px; display: block; }
  .nav-toggle__bars span {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition:
      transform 280ms var(--ease-out-expo),
      opacity 160ms var(--ease-out),
      top 280ms var(--ease-out-expo);
  }
  .nav-toggle__bars span:nth-child(1) { top: 0; }
  .nav-toggle__bars span:nth-child(2) { top: 7px; }
  .nav-toggle__bars span:nth-child(3) { top: 14px; }
  .site-header.is-open .nav-toggle__bars span:nth-child(1) { top: 7px; transform: rotate(45deg); }
  .site-header.is-open .nav-toggle__bars span:nth-child(2) { opacity: 0; }
  .site-header.is-open .nav-toggle__bars span:nth-child(3) { top: 7px; transform: rotate(-45deg); }

  .site-header__menu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1c1e3f;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 6px clamp(20px, 5vw, 36px) 22px;
    box-shadow: 0 26px 44px -22px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
    transition:
      opacity 220ms var(--ease-out),
      transform 280ms var(--ease-out-expo),
      visibility 220ms var(--ease-out);
    z-index: 30;
  }
  .site-header.is-open .site-header__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }

  .site-nav { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 14px 2px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .site-nav a::after { display: none; }
  .site-nav a.is-active { color: var(--rm-gold-bright); }

  .site-header__cta { margin-top: 16px; width: 100%; justify-content: center; }
}

/* ---------- 720: single-column stack ---------- */
@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .section { padding: 48px 0; }

  /* Hero — stacked: the copy now sits over the full-width photo, so swap the
     desktop left-bias gradient for an even top-to-bottom navy scrim that keeps
     the white title, outline button, and gold stats legible over Robb's face. */
  .hero { padding: 64px 0 56px; }
  .hero__overlay {
    background: linear-gradient(180deg,
      rgba(11, 31, 58, 0.82) 0%,
      rgba(11, 31, 58, 0.66) 42%,
      rgba(11, 31, 58, 0.80) 100%);
  }
  .hero__grid { grid-template-columns: 1fr; gap: 36px; }
  .hero__copy { padding-top: 0; }
  .hero__title { font-size: 40px; max-width: none; margin-bottom: 20px; }
  .hero__lede { font-size: 16px; max-width: none; margin-bottom: 28px; }
  .hero__actions { gap: 12px; margin-bottom: 36px; }
  .hero__actions .btn { width: 100%; min-width: 0; }
  .hero__stats { flex-wrap: wrap; gap: 20px 24px; }
  .hero__stat { border-right: none; padding-right: 0; flex: 1 1 42%; }
  .form-card { padding: 24px; }

  /* Grids -> single column */
  .practice-grid { grid-template-columns: 1fr; gap: 14px; }
  .why-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .testimonials { grid-template-columns: 1fr; }
  .faq-list { grid-template-columns: 1fr; }
  .results__row { grid-template-columns: 1fr; gap: 28px; }
  .results__cta .btn { width: 100%; }

  /* Section heads stack */
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 32px; }
  .section-h2 { font-size: 30px; }
  .why-grid__l .section-h2 { font-size: 28px; }
  .results__head .section-h2 { font-size: 28px; }

  /* Inset cards */
  .section--subtle { padding: 16px 0; }
  .section--subtle > .container { padding: 36px 22px; border-radius: 12px; max-width: calc(100% - 32px); }
  .results { padding: 16px 0; }
  .results > .container { padding: 40px 24px; border-radius: 12px; max-width: calc(100% - 32px); }

  /* Footer */
  .site-footer { padding: 48px 0 24px; }
  .site-footer__main { grid-template-columns: 1fr; gap: 32px; padding-bottom: 36px; }
  .site-footer__brand p,
  .site-footer__contact p.intro,
  .site-footer__contact-cta { max-width: none; }
  .site-footer__col ul { gap: 14px; }
  .site-footer__col li a { display: inline-block; padding: 3px 0; }
  .site-footer__bot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .site-footer__bot .bot-links { gap: 18px 22px; flex-wrap: wrap; }

  /* Logo strips wrap */
  .logo-strip__list,
  .logo-strip__list--six { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
}

/* ---------- 460: small phones ---------- */
@media (max-width: 460px) {
  .container { padding: 0 16px; }
  .hero__title { font-size: 33px; }
  .section-h2 { font-size: 26px; }
  .why-grid__l .section-h2,
  .results__head .section-h2 { font-size: 25px; }
  .hero__stat { flex: 1 1 100%; }
  .form-card { padding: 20px; }
  .logo-strip__list,
  .logo-strip__list--six { grid-template-columns: 1fr; gap: 16px; }
  /* Keep the modal close button on-screen on small phones */
  .video-modal { padding: 16px; }
  .video-modal__close { top: 8px; right: 8px; background: rgba(255,255,255,0.92); }
}