/* ===================== CONTENT PAGES (multi-page build) =====================
   Loaded after styles.css. Components for inner pages: page hero, prose,
   split layout, aside cards, quote/CTA bands, post grids, contact grid. */

/* Active nav highlight */
.site-nav a.is-active { color: #fff; }
.site-nav a.is-active::after { transform: scaleX(1); transform-origin: left center; }

/* Page hero — compact dark banner for inner pages */
.page-hero {
  position: relative;
  background: var(--rm-midnight-navy);
  color: #fff;
  padding: 84px 0 64px;
  overflow: hidden;
}
.page-hero__bg {
  position: absolute; inset: 0;
  background-image: url("assets/hero-bg.png");
  background-size: cover;
  background-position: center 22%;
  opacity: 0.22;
}
.page-hero__bg--portrait { background-position: 60% 18%; }
.page-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11,31,58,0.68) 0%, rgba(11,31,58,0.82) 100%),
    linear-gradient(90deg, var(--rm-midnight-navy) 0%, rgba(11,31,58,0.4) 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .eyebrow--on-dark { margin-bottom: 16px; }
.page-hero__title {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-w-semibold);
  font-size: 52px;
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 18px;
}
.page-hero__lede {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
  max-width: 680px;
  margin: 0;
}

/* Split hero — copy on the left, a framed portrait or team photo top-right,
   mirroring the homepage. Applied to Practice Areas, Media, Blog, Contact. */
.page-hero--split .page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 72px;
  align-items: center;
}
.page-hero__copy { min-width: 0; }
.page-hero--split .page-hero__lede { max-width: 560px; }
.page-hero__portrait {
  margin: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(200,168,107,0.5);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
}
.page-hero__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center top;
}
.page-hero__portrait--team img { aspect-ratio: 3 / 2; object-position: center; }
/* Height-capped variant: the portrait is clipped to the copy column height so the
   hero never grows beyond a text-only hero. The figure stretches with the grid row
   (driven by the copy) and the image absolutely fills it, cover-cropped. */
.page-hero--fit .page-hero__grid { align-items: stretch; }
.page-hero--fit .page-hero__portrait { position: relative; }
.page-hero--fit .page-hero__portrait img,
.page-hero--fit .page-hero__portrait--team img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center top;
}
/* Office cards on the contact page. This was an inline
   grid-template-columns:repeat(3,1fr), which no media query can override, so it
   stayed three-up on phones: the row overflowed the viewport and the addresses
   wrapped to roughly one word per line. auto-fit with a min track handles every
   width without a breakpoint per size. */
.office-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
@media (max-width: 560px) {
  .office-grid { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 900px) {
  .page-hero--split .page-hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .page-hero__portrait { max-width: 460px; }

  /* page-hero--fit takes the portrait img out of flow (absolute, inset 0,
     height 100%) and leans on align-items:stretch to give the portrait column
     the height of the copy column beside it. That row only exists in the
     two-column layout. Once the grid collapses to 1fr the portrait is its own
     row containing nothing but an out-of-flow child, so it computes to zero
     height and the photo disappears entirely on phones. Put it back in normal
     flow and let the aspect ratio set the height. */
  .page-hero--fit .page-hero__portrait img,
  .page-hero--fit .page-hero__portrait--team img {
    position: static;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .page-hero--fit .page-hero__portrait--team img { aspect-ratio: 3 / 2; }
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 22px;
}
.breadcrumb a { color: rgba(255,255,255,0.8); transition: color 180ms var(--ease-out); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { color: rgba(255,255,255,0.4); }

/* Split layout: main prose + aside */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 64px;
  align-items: start;
}

/* Prose / article typography */
.prose { max-width: 74ch; }
.prose > *:first-child { margin-top: 0; }
.prose h2 {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-w-semibold);
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--rm-fg);
  margin: 44px 0 16px;
}
.prose h3 {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: 19px;
  color: var(--rm-fg);
  margin: 32px 0 12px;
}
.prose p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--rm-fg-muted);
  margin: 0 0 18px;
}
.prose ul, .prose ol {
  margin: 0 0 20px;
  padding-left: 22px;
  color: var(--rm-fg-muted);
  font-size: 16px;
  line-height: 1.7;
}
.prose li { margin-bottom: 8px; }
.prose a { color: var(--rm-link); font-weight: var(--rm-w-medium); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--rm-link-hover); }
.prose strong { color: var(--rm-fg); font-weight: var(--rm-w-semibold); }
.prose blockquote {
  margin: 28px 0;
  padding: 4px 0 4px 24px;
  border-left: 2px solid var(--rm-midnight-navy);
  font-family: var(--rm-font-display);
  font-style: italic;
  font-size: 20px;
  line-height: 1.5;
  color: var(--rm-fg);
}

/* Aside */
.aside { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.aside-card {
  background: var(--rm-soft-white);
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  padding: 26px 24px;
}
.aside-card h3 {
  font-family: var(--rm-font-sans);
  font-weight: var(--rm-w-semibold);
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rm-fg-subtle);
  margin: 0 0 16px;
}
.aside-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.aside-list li { display: flex; flex-direction: column; gap: 2px; }
.aside-list strong { font-size: 15px; color: var(--rm-fg); font-weight: var(--rm-w-semibold); }
.aside-list span { font-size: 13px; color: var(--rm-fg-muted); }
.aside-card--dark { background: var(--rm-midnight-navy); border-color: var(--rm-midnight-navy); color: #fff; }
.aside-card--dark h3 { color: var(--rm-silver-gray); }
.aside-card--dark p { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0 0 18px; }

/* Quote band */
.quote-band {
  background: var(--rm-soft-white);
  border-top: 1px solid var(--rm-border);
  border-bottom: 1px solid var(--rm-border);
  padding: 64px 0;
  text-align: center;
}
.quote-band__mark { width: 40px; height: 40px; color: var(--rm-navy-15); margin: 0 auto 20px; display: block; }
.quote-band__quote {
  font-family: var(--rm-font-display);
  font-style: italic;
  font-size: 26px;
  line-height: 1.45;
  color: var(--rm-fg);
  max-width: 880px;
  margin: 0 auto 20px;
}
.quote-band__author {
  font-size: 13px;
  font-weight: var(--rm-w-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rm-fg-subtle);
}
.quote-band__context {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--rm-fg-subtle);
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* CTA band */
.cta-band { background: var(--rm-midnight-navy); color: #fff; padding: 56px 0; }
.cta-band__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.cta-band__inner h2 { margin: 0 0 10px; }
.cta-band__inner p { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,0.78); margin: 0; max-width: 560px; }
.cta-band__inner .btn { flex: 0 0 auto; }

/* Practice-area hub grid */
.area-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.area-grid .practice-card { animation: none; opacity: 1; transform: none; }

/* Post grid (blog + media listings) */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.post-card {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  padding: 26px 24px;
  transition: border-color 240ms var(--ease-out), transform 240ms var(--ease-out), box-shadow 280ms var(--ease-out);
}
.post-card:hover { border-color: var(--rm-border-strong); transform: translateY(-3px); box-shadow: 0 14px 30px -14px rgba(11,31,58,0.16); }
.post-card__tag {
  font-size: 11px; font-weight: var(--rm-w-semibold);
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rm-fg-subtle); margin: 0 0 12px;
}
.post-card__title {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-w-semibold);
  font-size: 20px; line-height: 1.25;
  color: var(--rm-fg); margin: 0 0 12px;
}
.post-card__title a { color: inherit; }
.post-card__title a:hover { color: var(--rm-steel-blue); }
.post-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--rm-fg-muted); margin: 0 0 18px; flex: 1; }
.post-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;
}
.post-card__more svg { width: 14px; height: 14px; transition: transform 260ms var(--ease-out-expo); }
.post-card:hover .post-card__more svg { transform: translateX(4px); }

/* Stacked FAQ (full FAQ page) */
.faq-stack { display: grid; gap: 12px; max-width: 900px; margin: 0 auto; }
.faq-stack .faq-item__body { font-size: 14px; }
.faq-stack .faq-item > summary { font-size: 15px; padding: 20px 22px; }

/* Contact page grid */
.contact-grid { display: grid; grid-template-columns: minmax(0,1fr) 440px; gap: 56px; align-items: start; }
.contact-info { display: grid; gap: 24px; }
.contact-info__row { display: flex; gap: 16px; align-items: flex-start; }
.contact-info__row svg { width: 22px; height: 22px; color: var(--rm-midnight-navy); flex: 0 0 22px; margin-top: 2px; }
.contact-info__row h4 { font-size: 15px; font-weight: var(--rm-w-semibold); color: var(--rm-fg); margin: 0 0 4px; }
.contact-info__row p, .contact-info__row a { font-size: 14.5px; line-height: 1.55; color: var(--rm-fg-muted); margin: 0; display: block; }
.contact-info__row a:hover { color: var(--rm-midnight-navy); }
.contact-grid .form-card { background: #fff; color: var(--rm-fg); border: 1px solid var(--rm-border); box-shadow: var(--rm-shadow-lg); backdrop-filter: none; -webkit-backdrop-filter: none; }
.contact-grid .form-card h3 { color: var(--rm-fg); }
.contact-grid .form-card p { color: var(--rm-fg-muted); }
.contact-grid .form-card .meta { color: var(--rm-fg-muted); }
.contact-grid .form-card .meta svg { color: var(--rm-fg-muted); }

/* Centered section intro */
.section-intro { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.section-intro .eyebrow { display: block; }
.section-intro p { font-size: 16px; line-height: 1.65; color: var(--rm-fg-muted); margin: 14px 0 0; }

/* Article meta (blog/media single) */
.article-meta { font-size: 13px; color: var(--rm-fg-subtle); margin: 0 0 8px; letter-spacing: 0.02em; }
.article-body { max-width: 74ch; margin: 0 auto; }

/* ===================== MEDIA SHOWCASE ===================== */
/* Responsive 16:9 video embed (article pages) */
.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 28px;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 18px 48px -20px rgba(11, 31, 58, 0.4);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Native (self-hosted) video slots — used by the Firm Films band on the media hub */
.video-embed--native video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-embed-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.video-embed-row .video-embed { margin-bottom: 16px; }

/* Video thumbnail gallery (media hub) */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.video-card {
  display: flex;
  flex-direction: column;
  color: inherit;
}
.video-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--rm-midnight-navy);
  border: 1px solid var(--rm-border);
}
.video-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms var(--ease-out);
}
.video-card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(11,31,58,0.05) 0%, rgba(11,31,58,0.45) 100%);
  transition: background 240ms var(--ease-out);
}
.video-card__play svg {
  width: 30px;
  height: 30px;
  color: var(--rm-midnight-navy);
  margin-left: 3px;
}
.video-card__play::before {
  content: "";
  position: absolute;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(255,255,255,0.94);
  box-shadow: 0 8px 24px -6px rgba(0,0,0,0.4);
  transition: transform 300ms var(--ease-out-expo), background 240ms var(--ease-out);
}
.video-card__play svg { position: relative; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .video-card:hover .video-card__thumb img { transform: scale(1.05); }
  .video-card:hover .video-card__play { background: linear-gradient(180deg, rgba(11,31,58,0.1) 0%, rgba(11,31,58,0.55) 100%); }
  .video-card:hover .video-card__play::before { transform: scale(1.08); background: #fff; }
}
.video-card__tag {
  font-size: 11px;
  font-weight: var(--rm-w-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rm-fg-subtle);
  margin: 16px 0 6px;
}
.video-card__title {
  font-family: var(--rm-font-display);
  font-weight: var(--rm-w-semibold);
  font-size: 18px;
  line-height: 1.25;
  color: var(--rm-fg);
  transition: color 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .video-card:hover .video-card__title { color: var(--rm-steel-blue); }
}

/* Home "Hear From Those Who Know" video feature */
.video-feature { background: var(--rm-soft-white); border-top: 1px solid var(--rm-border); border-bottom: 1px solid var(--rm-border); }
.video-feature__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.video-feature__copy .section-h2 { margin: 8px 0 16px; }
.video-feature__copy p { font-size: 16px; line-height: 1.7; color: var(--rm-fg-muted); margin: 0 0 24px; max-width: 46ch; }

/* "When lawyers need a lawyer" endorsement strip */
.endorse-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
/* Two narrative blocks (Fellow Lawyers / Law Enforcement) */
.endorse-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.endorse-grid--two .endorse-card { padding: 34px 32px; }
.endorse-card__what + .endorse-card__what { margin-top: 14px; }
.endorse-card {
  background: #fff;
  border: 1px solid var(--rm-border);
  border-radius: 12px;
  padding: 30px 26px;
}
.endorse-card__role {
  font-size: 11px; font-weight: var(--rm-w-semibold); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rm-fg-subtle); margin: 0 0 10px;
}
.endorse-card__who {
  font-family: var(--rm-font-display); font-weight: var(--rm-w-semibold);
  font-size: 21px; line-height: 1.2; color: var(--rm-fg); margin: 0 0 12px;
}
.endorse-card__what { font-size: 14.5px; line-height: 1.6; color: var(--rm-fg-muted); margin: 0; }


/* ===================== IMAGERY (portraits + skyline) ===================== */
/* Location heroes use generated blue-hour city banners (Higgsfield Soul Location).
   page-hero--photo lightens the overlay + lifts image opacity so the banner reads
   while keeping the white title/lede legible over the darker upper band. */
.page-hero--photo .page-hero__bg { opacity: 0.72; }
.page-hero--photo .page-hero__overlay {
  background:
    linear-gradient(180deg, rgba(11,31,58,0.46) 0%, rgba(11,31,58,0.8) 100%),
    linear-gradient(90deg, rgba(11,31,58,0.72) 0%, rgba(11,31,58,0.12) 62%);
}
.page-hero__bg--toronto     { background-image: url("assets/toronto-skyline.jpg");     background-position: center 42%; }
.page-hero__bg--scarborough { background-image: url("assets/scarborough-skyline.jpg"); background-position: center 46%; }
.page-hero__bg--brampton    { background-image: url("assets/brampton-skyline.jpg");    background-position: center 50%; }
.page-hero__bg--milton      { background-image: url("assets/milton-skyline.jpg");      background-position: center 52%; }
.page-hero__bg--oshawa      { background-image: url("assets/oshawa-skyline.jpg");      background-position: center 42%; }
/* Curated page heroes — dignified Toronto legal architecture (Higgsfield Soul Location).
   --practice is shared by the Practice Areas hub and all 12 charge sub-pages. */
.page-hero__bg--about       { background-image: url("assets/about-banner.jpg");          background-position: center 40%; }
.page-hero__bg--contact     { background-image: url("assets/contact-banner.jpg");        background-position: center 44%; }
.page-hero__bg--practice    { background-image: url("assets/practice-areas-banner.jpg"); background-position: center 36%; }
.page-hero__bg--blog         { background-image: url("assets/blog-banner.jpg");              background-position: center 45%; }
.page-hero__bg--vancouver    { background-image: url("assets/vancouver-skyline.jpg");        background-position: center 45%; }
.page-hero__bg--calgary      { background-image: url("assets/calgary-skyline.jpg");          background-position: center 40%; }
.page-hero__bg--halifax      { background-image: url("assets/halifax-skyline.jpg");          background-position: center 45%; }
.page-hero__bg--charlottetown{ background-image: url("assets/charlottetown-skyline.jpg");    background-position: center 50%; }
.page-hero__bg--results      { background-image: url("assets/results-banner.jpg");          background-position: center 45%; }
.page-hero__bg--testimonials { background-image: url("assets/testimonials-banner.jpg");     background-position: center 45%; }
.page-hero__bg--judicial     { background-image: url("assets/judicial-process-banner.jpg"); background-position: center 45%; }
.page-hero__bg--faq          { background-image: url("assets/faq-banner.jpg");              background-position: center 45%; }
.page-hero__bg--media        { background-image: url("assets/media-banner.jpg");            background-position: center 45%; }
/* Five Murder Acquittals page — still frame of 361 University Ave from the 2026 brand shoot */
.page-hero__bg--acquittals   { background-image: url("assets/acquittals-banner.jpg");       background-position: center 55%; }

/* Meet Robb band (home) */
.meet-robb__grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.meet-robb__photo img { width: 100%; display: block; border-radius: 14px; box-shadow: 0 26px 60px -26px rgba(11, 31, 58, 0.5); }
.meet-robb__copy .section-h2 { margin: 10px 0 18px; }
.meet-robb__copy > p { font-size: 16px; line-height: 1.7; color: var(--rm-fg-muted); margin: 0 0 24px; max-width: 52ch; }
.meet-robb__creds { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 13px; }
.meet-robb__creds li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--rm-fg); }
.meet-robb__creds svg { width: 20px; height: 20px; color: var(--rm-midnight-navy); flex: 0 0 20px; margin-top: 2px; }

/* About page portrait (in the aside) */
.about-portrait { width: 100%; display: block; border-radius: 14px; box-shadow: 0 20px 50px -22px rgba(11, 31, 58, 0.42); }
.aside .about-portrait { margin-bottom: 4px; }

/* ============================================================
   RESPONSIVE — inner-page components (matches styles.css breakpoints)
     980  tablet (3-col listings -> 2-col)
     900  split / contact stack to single column
     720  full single-column stack
     460  small phone type
   ============================================================ */

/* ---------- 980: tablet ---------- */
@media (max-width: 980px) {
  .page-hero__title { font-size: 44px; }
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .endorse-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- 900: sidebar layouts stack ---------- */
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 44px; }
  .aside { position: static; top: auto; }
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- 720: single-column stack ---------- */
@media (max-width: 720px) {
  /* Page hero */
  .page-hero { padding: 60px 0 44px; }
  .page-hero__title { font-size: 36px; }
  .page-hero__lede { font-size: 16px; max-width: none; }
  .breadcrumb { flex-wrap: wrap; margin-bottom: 18px; }

  /* Prose */
  .prose h2 { font-size: 26px; margin-top: 36px; }
  .prose blockquote { font-size: 18px; }

  /* Listings -> single column */
  .area-grid,
  .post-grid,
  .video-grid,
  .endorse-grid { grid-template-columns: 1fr; }

  /* Image + copy bands stack (image first) */
  .video-feature__grid { grid-template-columns: 1fr; gap: 32px; }
  /* Firm Films row — without this the two films stay side by side and squeeze on phones */
  .video-embed-row { grid-template-columns: 1fr; gap: 8px; }
  .meet-robb__grid { grid-template-columns: 1fr; gap: 32px; justify-items: center; }
  /* Center the portrait and keep Robb's face framed on handheld devices */
  .meet-robb__photo { width: 100%; max-width: 420px; margin: 0 auto; }
  .meet-robb__photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }

  /* CTA band stacks and centers */
  .cta-band { padding: 44px 0; }
  .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 22px; }
  .cta-band__inner .btn { width: 100%; }

  /* Quote band */
  .quote-band { padding: 48px 0; }
  .quote-band__quote { font-size: 22px; }

  /* FAQ stack */
  .faq-stack .faq-item > summary { font-size: 14.5px; padding: 17px 18px; }

  /* Section intro */
  .section-intro { margin-bottom: 32px; }
}

/* ---------- 460: small phone ---------- */
@media (max-width: 460px) {
  .page-hero__title { font-size: 30px; }
  .prose h2 { font-size: 23px; }
  .prose h3 { font-size: 17px; }
  .quote-band__quote { font-size: 20px; }
  .endorse-card { padding: 24px 22px; }
  .aside-card { padding: 22px 20px; }
}

/* ============================================================
   CONTACT FORM — spam trap, status messaging, disclaimer
   ============================================================ */

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.form-card .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-card { position: relative; }

.turnstile-slot:not(:empty) { margin: 4px 0 16px; }

/* Scoped to match `.contact-grid .form-card p`, which would otherwise win
   the cascade on both of these and silently override the colours. */
.contact-grid .form-card .form-status {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
}
.contact-grid .form-card .form-status:empty { display: none; }
.contact-grid .form-card .form-status.is-error { color: #A8443C; }
.contact-grid .form-card .form-status.is-ok { color: var(--rm-gold-deep); }

.contact-grid .form-card .form-disclaimer {
  margin: 16px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--rm-fg-subtle);
}