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

  :root {
    --gold: #C9A84C;
    --gold-light: #E8C96A;
    --gold-dark: #9A7A30;
    --sage: #5a9eb8;
    --sage-light: rgba(0,118,176,0.25);
    --sage-mid: #0076b0;
    --sage-deep: #005a87;
    --linen: #FAF8F3;
    --linen-dark: #F0ECE3;
    --linen-mid: #E8E2D6;
    --blush: #F5EFE6;
    --text-dark: #2C2520;
    --text-mid: #5C5248;
    --text-light: #8A8078;
    --white: #FFFFFF;
    /* Legacy aliases so nothing breaks */
    --green-deep: #005a87;
    --green-mid: #0076b0;
    --green-rich: #0076b0;
    --green-soft: #5a9eb8;
    --cream: #FAF8F3;
    --cream-dark: #F0ECE3;
  }

  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--cream);
    color: var(--text-dark);
    overflow-x: hidden;
  }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 48px;
    background: transparent;
    transition: background 0.4s, backdrop-filter 0.4s;
  }
  nav.scrolled {
    background: rgba(250,248,243,0.97);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 24px rgba(0,0,0,0.06);
  }
  nav.scrolled .nav-logo-text { color: var(--text-dark); }
  nav.scrolled .nav-links a { color: var(--text-mid); text-shadow: none; }
  nav.scrolled .nav-links a:hover { color: #0076b0; }
  .nav-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .nav-logo img {
    height: 44px; width: auto; display: block;
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
  }
  nav.scrolled .nav-logo img { filter: none; }
  .nav-links { display: flex; align-items: center; gap: 32px; }
  .nav-links a {
    font-size: 13px; font-weight: 400; letter-spacing: 0.04em;
    color: rgba(255,255,255,0.8); text-decoration: none;
    transition: color 0.2s;
  }
  .nav-links a:hover { color: var(--gold-light); }
  .nav-cta {
    background: var(--gold); color: var(--green-deep) !important;
    padding: 10px 22px; border-radius: 4px; font-weight: 500 !important;
    transition: background 0.2s !important;
  }
  .nav-cta:hover { background: var(--gold-light) !important; }

  /* ── HERO ── */
  .hero {
    position: relative; height: 80vh; min-height: 520px; max-height: 680px;
    overflow: hidden;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background:
      linear-gradient(to bottom,
        rgba(20,16,12,0.55) 0%,
        rgba(20,16,12,0.2) 25%,
        rgba(44,37,32,0.45) 65%,
        rgba(44,37,32,0.85) 100%),
      url('images/hero-bg.jpg') center/cover no-repeat;
  }
  .hero-content {
    position: absolute;
    bottom: 56px;
    left: 0;
    padding: 0 80px;
    max-width: 700px;
    z-index: 2;
  }
  .hero-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--gold-light);
    margin-bottom: 14px;
  }
  .hero-eyebrow::before {
    content: ''; display: block; width: 32px; height: 1px;
    background: var(--gold-light);
  }
  .hero-headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 3.5vw, 52px);
    line-height: 1.12;
    color: #fff;
    margin-bottom: 16px;
    font-weight: 400;
  }
  .hero-headline em {
    font-style: italic; color: var(--gold-light);
  }
  .hero-sub {
    font-size: 15px; line-height: 1.65;
    color: rgba(255,255,255,0.78);
    max-width: 480px;
    margin-bottom: 28px;
    font-weight: 300;
  }
  .hero-actions { display: flex; align-items: center; gap: 20px; }
  .btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    background: #0076b0; color: #fff;
    padding: 13px 28px; border-radius: 4px;
    font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
    text-decoration: none; transition: all 0.2s;
  }
  .btn-primary:hover { background: #0076b0; transform: translateY(-1px); }
  .btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 400;
    text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.3);
    padding-bottom: 2px; transition: color 0.2s, border-color 0.2s;
  }
  .btn-secondary:hover { color: var(--gold-light); border-color: var(--gold-light); }
  .hero-stats {
    position: absolute; bottom: 56px; right: 80px; z-index: 2;
    display: flex; flex-direction: column; gap: 10px;
    text-align: right;
  }
  .hero-stat-num {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 400; color: #fff;
    line-height: 1;
  }
  .hero-stat-label {
    display: block;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    margin-top: 2px;
  }
  .hero-stat-div {
    width: 1px; height: 20px;
    background: rgba(255,255,255,0.2);
    margin-left: auto;
  }

  /* ── SCROLL INDICATOR ── */
  .scroll-hint {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: rgba(255,255,255,0.4); font-size: 10px; letter-spacing: 0.12em;
    text-transform: uppercase; animation: bounce 2s infinite;
  }
  @keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(6px); }
  }
  .scroll-hint svg { width: 16px; opacity: 0.5; }

  /* ── TRUST STRIP ── */
  .trust-strip {
    background: var(--white);
    border-bottom: 1px solid var(--linen-mid);
    padding: 24px 80px;
    display: flex; align-items: center; justify-content: center; gap: 60px;
    flex-wrap: wrap;
  }
  .trust-item {
    display: flex; align-items: center; gap: 12px;
    color: var(--text-mid); font-size: 13px;
  }
  .trust-item svg { color: #0076b0; flex-shrink: 0; }
  .trust-item strong { color: var(--text-dark); font-weight: 500; }
  .trust-div { width: 1px; height: 28px; background: var(--linen-mid); }

  /* ── Trust cards (.fg-trust) — shared across homepage, GF homepage, GF api ── */
  .fg-trust { max-width: 1080px; margin: 36px auto 48px; padding: 0 24px; }
  .fg-trust__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
  @media (max-width: 820px) { .fg-trust__grid { grid-template-columns: 1fr; } }
  .fg-trust__item {
    display: flex; align-items: center; gap: 14px;
    background: #fff;
    border: 1px solid var(--linen-mid);
    border-radius: 12px;
    padding: 14px 20px;
    text-align: left;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    color: var(--text-dark);
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
  }
  .fg-trust__item:hover {
    border-color: rgba(0,118,176,0.4);
    box-shadow: 0 8px 24px rgba(0,118,176,0.08);
    transform: translateY(-2px);
  }
  .fg-trust__icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(0,118,176,0.08);
    color: #0076b0;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .fg-trust__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
  .fg-trust__body strong { font-size: 14px; font-weight: 600; color: var(--text-dark); }
  .fg-trust__body span { font-size: 12px; color: var(--text-mid); line-height: 1.5; }
  .fg-trust__cta { color: #0076b0 !important; font-weight: 500; margin-top: 4px; }
  /* Homepage variant carries 4 cards — widened strip + roomier gap so each card is
     wide enough that its description stays short. One row on desktop → 2-up → stacked. */
  .fg-trust--home { max-width: 1500px; }
  .fg-trust--home .fg-trust__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
  @media (max-width: 1000px) { .fg-trust--home .fg-trust__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px) { .fg-trust--home .fg-trust__grid { grid-template-columns: 1fr; } }

  /* ── SECTION SHARED ── */
  section { padding: 120px 80px; }
  .section-label {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
    text-transform: uppercase; color: #0076b0;
    margin-bottom: 20px;
  }
  .section-label::before {
    content: ''; display: block; width: 24px; height: 1px;
    background: #0076b0;
  }
  .section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 4vw, 54px);
    line-height: 1.15; font-weight: 400;
    color: var(--text-dark); margin-bottom: 20px;
  }
  .section-title em { font-style: italic; color: #0076b0; }
  .section-sub {
    font-size: 17px; line-height: 1.7; color: var(--text-mid);
    max-width: 560px; font-weight: 300;
  }

  /* ── HOW IT WORKS ── */
  .how { background: var(--linen); }
  .how-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 2px; margin-top: 64px;
    background: var(--linen-mid);
    border: 1px solid var(--linen-mid);
    border-radius: 16px; overflow: hidden;
  }
  .how-step {
    background: var(--white); padding: 48px 40px;
    position: relative; transition: box-shadow 0.2s;
  }
  .how-step:hover { box-shadow: inset 0 0 0 1px var(--linen-mid); }
  .how-num {
    font-family: 'Playfair Display', serif;
    font-size: 72px; line-height: 1; font-weight: 400;
    color: var(--linen-dark); margin-bottom: 24px;
    display: block;
  }
  .how-step-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 400; color: var(--text-dark);
    margin-bottom: 12px; line-height: 1.3;
  }
  .how-step-body {
    font-size: 15px; line-height: 1.7; color: var(--text-mid);
    font-weight: 300;
  }
  .how-step-img {
    width: 100%; height: 200px; object-fit: cover;
    border-radius: 8px; margin-top: 28px;
  }
  .how-step-tag {
    display: inline-block; margin-top: 20px;
    font-size: 11px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; color: #0076b0;
    border-bottom: 1px solid rgba(0,118,176,0.25);
    padding-bottom: 1px;
  }

  /* ── ORDER SECTION ── */
  .order-section {
    background: var(--blush);
    padding: 100px 80px;
    position: relative; overflow: hidden;
    border-top: 1px solid var(--linen-mid);
    border-bottom: 1px solid var(--linen-mid);
  }
  .order-section::before {
    content: '';
    position: absolute; top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);
    pointer-events: none;
  }
  .order-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 80px; align-items: start;
  }
  .order-left .section-label { color: #0076b0; }
  .order-left .section-label::before { background: #0076b0; }
  .order-left .section-title { color: var(--text-dark); }
  .order-left .section-sub { color: var(--text-mid); }
  .plan-toggle {
    display: flex; margin-top: 40px;
    background: var(--linen-mid);
    border-radius: 8px; padding: 4px; width: fit-content;
  }
  .plan-toggle button {
    padding: 10px 24px; border: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 400; letter-spacing: 0.04em;
    border-radius: 6px; transition: all 0.2s; background: transparent;
    color: var(--text-light);
  }
  .plan-toggle button.active {
    background: var(--white); color: var(--text-dark);
    font-weight: 500; box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  }
  .order-right { display: flex; flex-direction: column; gap: 16px; }
  .plan-card {
    background: var(--white);
    border: 1px solid var(--linen-mid);
    border-radius: 12px; padding: 28px 32px;
    cursor: pointer; transition: all 0.2s;
    display: none;
  }
  .plan-card.show { display: block; }
  .plan-card:hover { border-color: rgba(0,118,176,0.25); box-shadow: 0 4px 20px rgba(0,0,0,0.06); }
  .plan-card.selected { border-color: #0076b0; }
  .plan-card-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 16px;
  }
  .plan-name {
    font-size: 14px; font-weight: 500; color: var(--text-dark); letter-spacing: 0.03em;
  }
  .plan-badge {
    font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
    text-transform: uppercase; background: var(--gold);
    color: #fff; padding: 3px 10px; border-radius: 20px;
  }
  .plan-price {
    font-family: 'Playfair Display', serif;
    font-size: 32px; font-weight: 400; color: var(--text-dark);
    margin-bottom: 4px;
  }
  .plan-price span { font-size: 14px; color: var(--text-light); font-family: 'DM Sans', sans-serif; }
  .plan-save { font-size: 12px; color: #0076b0; margin-bottom: 16px; }
  .plan-features { list-style: none; display: flex; flex-direction: column; gap: 8px; }
  .plan-features li {
    font-size: 13px; color: var(--text-mid);
    display: flex; align-items: center; gap: 8px;
  }
  .plan-features li svg { color: #0076b0; flex-shrink: 0; }
  .plan-features li.dim { color: var(--text-light); text-decoration: line-through; }
  .plan-features li.dim svg { color: var(--linen-mid); }
  .plan-cta {
    display: block; width: 100%; margin-top: 20px;
    padding: 13px; background: #0076b0; color: #fff;
    border: none; border-radius: 6px; font-family: 'DM Sans', sans-serif;
    font-size: 14px; font-weight: 500; cursor: pointer;
    transition: background 0.2s; text-align: center; text-decoration: none;
  }
  .plan-cta:hover { background: #0076b0; }

  /* ── MEMORY GARDEN PREVIEW ── */
  .memory-section {
    background: var(--linen); padding: 120px 80px;
  }
  .memory-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    grid-template-areas: "card text" "card cta";
    column-gap: 80px; row-gap: 28px;
    align-items: center;
  }
  .memory-text { grid-area: text; }
  .memory-cta  { grid-area: cta; align-self: start; }
  .memory-preview {
    grid-area: card;
    background: var(--white); border-radius: 20px;
    overflow: hidden; box-shadow: 0 12px 40px rgba(44,37,32,0.08);
    border: 1px solid var(--linen-mid);
    position: relative;
  }
  .memory-preview-header {
    background: linear-gradient(160deg, var(--blush), var(--linen));
    padding: 32px; text-align: center;
    border-bottom: 1px solid var(--linen-mid);
  }
  .mem-avatar {
    width: 72px; height: 72px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,118,176,0.25), #5a9eb8);
    margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
    border: 3px solid var(--white);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  }
  .mem-avatar svg { width: 32px; height: 32px; color: rgba(255,255,255,0.8); }
  .mem-name {
    font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 400;
    color: var(--text-dark); margin-bottom: 4px;
  }
  .mem-dates { font-size: 13px; color: var(--text-light); }
  .mem-cemetery {
    font-size: 12px; color: var(--text-light);
    display: flex; align-items: center; justify-content: center; gap: 4px;
    margin-top: 6px; font-style: italic;
  }
  .memory-preview-body { padding: 24px 28px; }
  .mem-photos {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 6px; margin-bottom: 20px;
  }
  .mem-photo {
    aspect-ratio: 1; border-radius: 6px; overflow: hidden;
    background: var(--linen-dark);
    display: flex; align-items: center; justify-content: center;
  }
  .mem-photo img { width: 100%; height: 100%; object-fit: cover; }
  .mem-photo svg { width: 24px; color: var(--linen-mid); }
  .mem-delivery-badge {
    display: flex; align-items: center; gap: 8px;
    background: rgba(92,138,112,0.06); border: 1px solid rgba(92,138,112,0.18);
    border-radius: 8px; padding: 10px 14px;
    font-size: 12px; color: var(--text-mid);
  }
  .mem-delivery-badge svg { color: #0076b0; }
  .mem-tag {
    position: absolute; top: 16px; right: 16px;
    background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.25);
    color: var(--gold-dark); font-size: 10px; font-weight: 500;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px;
  }

  /* ── STORY ── */
  .story-section { background: #fff; padding: 120px 80px; }
  .story-inner {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 100px; align-items: center;
  }
  .story-img-wrap { position: relative; }
  .story-img {
    width: 100%; aspect-ratio: 3/4; object-fit: cover;
    border-radius: 12px;
  }
  .story-quote-pull {
    position: absolute; bottom: -24px; right: -32px;
    background: var(--white); border-radius: 12px;
    padding: 24px 28px; max-width: 280px;
    box-shadow: 0 20px 40px rgba(44,37,32,0.1);
    border: 1px solid var(--linen-mid);
  }
  .story-quote-pull p {
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: 15px; line-height: 1.6; color: var(--text-dark);
  }
  .story-quote-pull cite {
    display: block; margin-top: 10px;
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: #0076b0; font-style: normal;
  }
  .story-text .section-title { margin-bottom: 24px; }
  .story-body {
    font-size: 16px; line-height: 1.8; color: var(--text-mid);
    font-weight: 300; margin-bottom: 16px;
  }
  .story-body strong { color: var(--text-dark); font-weight: 500; }
  .story-body em { font-style: italic; color: #0076b0; }
  /* Full-width row that spans both grid columns so the CTA sits centered at the
     bottom of the section — under the quote pull on mobile, below both columns on desktop.
     Spacing is handled by .story-inner's grid gap so the rhythm matches the section. */
  .story-cta-row {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
  }
  .story-cta {
    background: var(--text-dark);
    color: #fff;
    display: inline-flex;
  }
  .story-cta:hover {
    background: #1a1410;
  }

  /* ── REVIEWS SLIDER ── */
  .reviews-section { background: var(--linen-dark); padding: 100px 80px; }
  .reviews-header {
    max-width: 1100px; margin: 0 auto 48px;
    display: flex; justify-content: space-between; align-items: flex-end;
    flex-wrap: wrap; gap: 20px;
  }
  .google-rating {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-mid);
    text-decoration: none;
  }
  .google-rating:hover { color: var(--text-dark); }
  .stars { color: #FBBC04; font-size: 18px; letter-spacing: 2px; }

  .rev-slider-wrap {
    max-width: 1100px; margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  .rev-slider {
    display: flex;
    transition: transform 0.55s cubic-bezier(0.4,0,0.2,1);
    will-change: transform;
  }
  .rev-slide {
    min-width: 33.333%;
    padding: 0 10px;
    box-sizing: border-box;
  }
  .rev-card {
    background: #fff;
    border: 1px solid var(--linen-mid);
    border-radius: 14px;
    padding: 28px;
    height: 100%;
    display: flex; flex-direction: column;
    transition: box-shadow 0.2s;
  }
  .rev-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.07); }
  .rev-top {
    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
  }
  .rev-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 600; color: #fff; flex-shrink: 0;
  }
  .rev-meta { flex: 1; }
  .rev-name { font-size: 14px; font-weight: 600; color: var(--text-dark); }
  .rev-date { font-size: 12px; color: var(--text-light); }
  .rev-google { flex-shrink: 0; opacity: 0.7; transition: opacity 0.2s; }
  .rev-google:hover { opacity: 1; }
  .rev-stars { display: flex; gap: 2px; margin-bottom: 12px; }
  .rev-text {
    font-size: 14px; line-height: 1.75; color: var(--text-mid);
    font-weight: 300; font-style: italic; flex: 1;
  }
  .rev-photo {
    margin-top: 16px; border-radius: 8px; overflow: hidden;
    cursor: pointer; position: relative;
  }
  .rev-photo img {
    width: 100%; height: 160px; object-fit: cover; display: block;
    border-radius: 8px; transition: transform 0.3s, filter 0.3s;
  }
  .rev-photo:hover img { transform: scale(1.03); filter: brightness(1.05); }
  .rev-photo-overlay {
    position: absolute; inset: 0; border-radius: 8px;
    background: rgba(0,118,176,0); display: flex; align-items: center; justify-content: center;
    transition: background 0.3s;
  }
  .rev-photo:hover .rev-photo-overlay { background: rgba(0,118,176,0.15); }
  .rev-photo-overlay svg { opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.3s; color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
  .rev-photo:hover .rev-photo-overlay svg { opacity: 1; transform: scale(1); }

  /* Dots */
  .rev-dots {
    display: flex; justify-content: center; gap: 7px; margin-top: 28px;
  }
  .rev-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--linen-mid); border: none; cursor: pointer;
    padding: 0; transition: background 0.25s, transform 0.25s;
  }
  .rev-dot.active { background: #0076b0; transform: scale(1.35); }

  /* Arrows */
  .rev-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 42px; height: 42px; border-radius: 50%;
    background: #fff; border: 1.5px solid var(--linen-mid);
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--text-dark); transition: all 0.2s; z-index: 2;
  }
  .rev-arrow:hover { background: #0076b0; color: #fff; border-color: #0076b0; }
  .rev-arrow--prev { left: -20px; }
  .rev-arrow--next { right: -20px; }

  @media (max-width: 960px) {
    .rev-slide { min-width: 50%; }
    .rev-arrow--prev { left: 0; }
    .rev-arrow--next { right: 0; }
  }
  @media (max-width: 600px) {
    .reviews-section { padding: 64px 24px; }
    .rev-slide { min-width: 100%; }
    .rev-arrow { display: none; }
  }

  /* ── FAQ ── */
  .faq-section { background: var(--white); padding: 100px 80px; border-top: 1px solid var(--linen-mid); }
  .faq-inner { max-width: 720px; margin: 0 auto; }
  .faq-inner .section-title { margin-bottom: 48px; }
  .faq-item {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    padding: 20px 0;
  }
  .faq-q {
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer; font-size: 17px; font-weight: 500; color: var(--text-dark);
    gap: 16px; line-height: 1.4;
  }
  .faq-q svg {
    flex-shrink: 0; transition: transform 0.25s;
    color: #0076b0;
  }
  .faq-item.open .faq-q svg { transform: rotate(45deg); }
  .faq-a {
    font-size: 16px; line-height: 1.8; color: var(--text-mid);
    font-weight: 300; padding-top: 14px;
    max-height: 0; overflow: hidden; transition: max-height 0.3s ease;
  }
  .faq-item.open .faq-a { max-height: 200px; }

  /* ── FINAL CTA ── */
  .final-cta {
    background: var(--blush); padding: 100px 80px;
    text-align: center; position: relative; overflow: hidden;
    border-top: 1px solid var(--linen-mid);
  }
  .final-cta::before {
    content: '';
    position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(201,168,76,0.08) 0%, transparent 65%);
    pointer-events: none;
  }
  .final-cta-eyebrow {
    font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
    color: #0076b0; margin-bottom: 24px; display: block;
  }
  .final-cta h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 5vw, 60px); font-weight: 400;
    color: var(--text-dark); line-height: 1.15; margin-bottom: 20px;
  }
  .final-cta h2 em { font-style: italic; color: #0076b0; }
  .final-cta p {
    font-size: 17px; line-height: 1.7;
    color: var(--text-mid); max-width: 480px;
    margin: 0 auto 40px; font-weight: 300;
  }
  .final-cta-actions {
    display: flex; align-items: center; justify-content: center; gap: 24px;
  }
  .phone-link {
    display: flex; align-items: center; gap: 8px;
    color: var(--text-mid); font-size: 14px; text-decoration: none;
    border-bottom: 1px solid var(--linen-mid); padding-bottom: 2px;
    transition: color 0.2s;
  }
  .phone-link:hover { color: #0076b0; }


  /* ── INSTAGRAM ── */
  .insta-section {
    background: var(--white);
    padding: 80px 0 0;
    border-top: 1px solid var(--linen-mid);
  }
  .insta-header {
    text-align: center;
    padding: 0 80px 48px;
  }
  .insta-handle {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; font-weight: 500; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-light);
    text-decoration: none; margin-bottom: 12px;
    transition: color 0.2s;
  }
  .insta-handle:hover { color: #0076b0; }
  .insta-handle svg { width: 16px; height: 16px; }
  .insta-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px; font-weight: 400; color: var(--text-dark);
    line-height: 1.2;
  }
  .insta-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
  }
  .insta-tile {
    aspect-ratio: 1; overflow: hidden;
    position: relative; cursor: pointer;
    background: var(--linen-dark);
  }
  .insta-tile img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
    transition: transform 0.4s ease, filter 0.4s ease;
    filter: brightness(0.96);
  }
  .insta-tile:hover img {
    transform: scale(1.06);
    filter: brightness(1.04);
  }
  .insta-tile-overlay {
    position: absolute; inset: 0;
    background: rgba(0,118,176,0);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.3s;
  }
  .insta-tile:hover .insta-tile-overlay {
    background: rgba(0,118,176,0.18);
  }
  .insta-tile-overlay svg {
    opacity: 0; transform: scale(0.8);
    transition: opacity 0.3s, transform 0.3s;
    color: #fff; width: 28px; height: 28px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
  }
  .insta-tile:hover .insta-tile-overlay svg {
    opacity: 1; transform: scale(1);
  }

  /* ── FOOTER ── */
  footer {
    background: var(--linen-dark);
    border-top: 1px solid var(--linen-mid);
    color: var(--text-mid);
    font-family: 'DM Sans', sans-serif;
  }
  .footer-top {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 60px; padding: 64px 80px 48px;
  }
  .footer-brand-col {}
  .footer-logo {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px; text-decoration: none;
  }
  .footer-logo-text {
    font-size: 16px; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-dark);
  }
  .footer-tagline {
    font-size: 13px; line-height: 1.7; color: var(--text-light);
    margin-bottom: 24px; max-width: 260px; font-weight: 300;
  }
  .footer-contact { display: flex; flex-direction: column; gap: 8px; }
  .footer-contact a {
    font-size: 13px; color: var(--text-mid); text-decoration: none;
    display: flex; align-items: center; gap: 8px; transition: color 0.2s;
  }
  .footer-contact a:hover { color: #0076b0; }
  .footer-contact svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.5; }
  .footer-col-title {
    font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--text-light);
    margin-bottom: 20px;
  }
  .footer-col-links { display: flex; flex-direction: column; gap: 11px; }
  .footer-col-links a {
    font-size: 13px; color: var(--text-mid); text-decoration: none;
    transition: color 0.2s; font-weight: 300;
  }
  .footer-col-links a:hover { color: #0076b0; }
  .footer-newsletter-input {
    display: flex; gap: 0; margin-top: 4px;
  }
  .footer-newsletter-input input {
    flex: 1; padding: 10px 14px;
    background: var(--white);
    border: 1px solid var(--linen-mid); border-right: none;
    border-radius: 4px 0 0 4px; color: var(--text-dark); font-family: 'DM Sans', sans-serif;
    font-size: 13px; outline: none;
  }
  .footer-newsletter-input input::placeholder { color: var(--text-light); }
  .footer-newsletter-input input:focus { border-color: #0076b0; }
  .footer-newsletter-input button {
    padding: 0 14px; height: 38px; background: #0076b0; color: #fff;
    border: none; border-radius: 0 4px 4px 0; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500;
    transition: background 0.2s; white-space: nowrap;
  }
  .footer-newsletter-input button:hover { background: #005a87; }
  .footer-newsletter-note {
    font-size: 11px; color: var(--text-light); margin-top: 8px;
  }
  .footer-bottom {
    border-top: 1px solid var(--linen-mid);
    padding: 20px 80px;
    display: flex; align-items: center; justify-content: space-between;
    max-width: 100%; flex-wrap: wrap; gap: 12px;
  }
  .footer-copy { font-size: 11px; color: var(--text-light); }
  .footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }
  .footer-legal a {
    font-size: 11px; color: var(--text-light); text-decoration: none;
    transition: color 0.2s;
  }
  .footer-legal a:hover { color: #0076b0; }

  /* ── ANIMATIONS ── */
  .fade-up {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .fade-up.visible { opacity: 1; transform: translateY(0); }
  .fade-up:nth-child(2) { transition-delay: 0.1s; }
  .fade-up:nth-child(3) { transition-delay: 0.2s; }

  /* Staggered hero animation */
  .hero-eyebrow { animation: fadeUp 0.9s ease 0.2s both; }
  .hero-headline { animation: fadeUp 0.9s ease 0.4s both; }
  .hero-sub { animation: fadeUp 0.9s ease 0.6s both; }
  .hero-actions { animation: fadeUp 0.9s ease 0.8s both; }
  .hero-stats { animation: fadeUp 0.9s ease 1s both; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ── PHOTO MODAL ── */
  .photo-modal {
    display: none; position: fixed; inset: 0; z-index: 1000;
    align-items: center; justify-content: center;
  }
  .photo-modal.open { display: flex; }
  .photo-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(20,16,12,0.88);
    backdrop-filter: blur(8px);
    cursor: pointer;
    animation: fadeIn 0.25s ease;
  }
  .photo-modal__inner {
    position: relative; z-index: 1;
    max-width: 860px; width: 90%;
    animation: scaleIn 0.28s cubic-bezier(0.34,1.56,0.64,1);
  }
  .photo-modal__img {
    width: 100%; border-radius: 12px;
    display: block;
    box-shadow: 0 32px 80px rgba(0,0,0,0.5);
    max-height: 80vh; object-fit: contain;
  }
  .photo-modal__close {
    position: absolute; top: -16px; right: -16px;
    width: 40px; height: 40px; border-radius: 50%;
    background: #fff; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
    font-size: 20px; color: var(--text-dark);
    transition: transform 0.15s, background 0.15s;
  }
  .photo-modal__close:hover { transform: scale(1.1); background: var(--linen); }
  .photo-modal__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.9); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transition: background 0.15s, transform 0.15s;
    color: var(--text-dark);
  }
  .photo-modal__nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); }
  .photo-modal__prev { left: -56px; }
  .photo-modal__next { right: -56px; }
  .photo-modal__caption {
    text-align: center; margin-top: 16px;
    font-size: 13px; color: rgba(255,255,255,0.55);
    letter-spacing: 0.04em;
  }
  .photo-modal__dots {
    display: flex; justify-content: center; gap: 6px; margin-top: 12px;
  }
  .photo-modal__dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.25); border: none; cursor: pointer;
    padding: 0; transition: background 0.2s, transform 0.2s;
  }
  .photo-modal__dot.active { background: #fff; transform: scale(1.3); }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }

  /* Make mem-photo clickable */
  .mem-photo { cursor: pointer; }
  .mem-photo:hover img { transform: scale(1.05); filter: brightness(1.05); }
  .mem-photo img { transition: transform 0.3s, filter 0.3s; }

  /* ── HOW + ORDER COMBINED ── */
  .howord {
    background: var(--white);
    padding: 100px 80px;
    border-top: 1px solid var(--linen-mid);
  }
  .howord__inner {
    max-width: 1140px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1.15fr;
    gap: 80px; align-items: start;
  }

  /* Left: steps */
  .howord__steps { position: sticky; top: 100px; }
  .howord__eyebrow { color: #0076b0; font-size: 11px; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
  .howord__eyebrow::before { content:''; width:20px; height:1px; background:#0076b0; }
  .howord__headline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 3.5vw, 46px);
    font-weight: 400; line-height: 1.15;
    color: var(--text-dark); margin-bottom: 48px;
  }
  .howord__headline em { font-style: italic; color: #0076b0; }
  .howord__step {
    display: flex; gap: 20px; align-items: flex-start;
    margin-bottom: 36px; padding-bottom: 36px;
    border-bottom: 1px solid var(--linen-mid);
  }
  .howord__step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .howord__step-num {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--linen); border: 2px solid var(--linen-mid);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 400; color: #0076b0;
    flex-shrink: 0;
  }
  .howord__step-body {}
  .howord__step-title {
    font-size: 18px; font-weight: 600; color: var(--text-dark);
    margin-bottom: 6px; line-height: 1.3;
  }
  .howord__step-desc {
    font-size: 15px; line-height: 1.7; color: var(--text-mid);
    font-weight: 300;
  }
  .howord__step-tag {
    display: inline-block; margin-top: 8px;
    font-size: 12px; color: #0076b0; font-weight: 500;
  }

  /* Right: pricing */
  .howord__pricing {}
  .howord__pricing-head {
    margin-bottom: 24px;
  }
  .howord__pricing-title {
    font-size: 22px; font-weight: 600; color: var(--text-dark);
    margin-bottom: 6px;
  }
  .howord__pricing-sub {
    font-size: 15px; color: var(--text-mid); font-weight: 300; line-height: 1.6;
  }

  /* Plan selector tabs */
  .plan-tabs {
    display: flex; gap: 0;
    border: 1.5px solid var(--linen-mid);
    border-radius: 10px; overflow: hidden;
    margin-bottom: 24px;
  }
  .plan-tab {
    flex: 1; padding: 14px 16px; border: none;
    background: var(--white); cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px; font-weight: 400;
    color: var(--text-light); transition: all 0.2s;
    border-right: 1.5px solid var(--linen-mid);
    line-height: 1.3;
  }
  .plan-tab:last-child { border-right: none; }
  .plan-tab.active {
    background: #0076b0; color: #fff; font-weight: 600;
  }
  .plan-tab span {
    display: block; font-size: 12px;
    opacity: 0.65; font-weight: 400; margin-top: 2px;
  }
  .plan-tab.active span { opacity: 0.8; }

  /* Plan picker — two equal-weight choice cards (replaced the tab segmented control
     so the Single Delivery option isn't visually buried). */
  .plan-picker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 28px;
  }
  .plan-pick {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    border: 2px solid var(--linen-mid);
    border-radius: 12px;
    background: var(--white);
    padding: 16px 18px;
    cursor: pointer;
    text-align: left;
    font-family: 'DM Sans', sans-serif;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .plan-pick__radio { grid-column: 1; grid-row: 1 / 4; align-self: center; }
  .plan-pick__body { grid-column: 2; grid-row: 1; }
  .plan-pick__price { grid-column: 2; grid-row: 2; margin-top: 4px; text-align: left; }
  .plan-pick:hover { border-color: #0076b0; background: #fafdff; }
  .plan-pick.active {
    border-color: #0076b0;
    background: #f4faff;
    box-shadow: 0 4px 16px rgba(0, 118, 176, 0.08);
  }
  .plan-pick__radio {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid var(--linen-mid);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.2s;
  }
  .plan-pick.active .plan-pick__radio { border-color: #0076b0; }
  .plan-pick.active .plan-pick__radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #0076b0;
  }
  .plan-pick__body {
    display: flex; flex-direction: column; gap: 2px;
    min-width: 0;
  }
  .plan-pick__name {
    font-size: 16px; font-weight: 600; color: var(--text-dark);
    line-height: 1.15;
    letter-spacing: -0.005em;
  }
  .plan-pick__meta {
    font-size: 12px; color: var(--text-light);
    line-height: 1.3;
  }
  .plan-pick__price {
    font-size: 15px; font-weight: 700; color: var(--text-dark);
    white-space: nowrap;
    line-height: 1.15;
  }
  .plan-pick__price small {
    font-size: 11px; font-weight: 400; color: var(--text-light);
    margin-left: 3px;
  }
  @media (max-width: 600px) {
    /* Keep the 2-column split on mobile so they stay as compact "little boxes"
       side by side — gives clear separation from the sub-cards/single-card below. */
    .plan-picker { gap: 8px; margin-bottom: 20px; }
    .plan-pick {
      /* Restack each card vertically: radio → name → meta → price, all centered. */
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 14px 10px;
      gap: 6px;
    }
    .plan-pick__body { align-items: center; text-align: center; gap: 2px; }
    .plan-pick__name { font-size: 14px; }
    .plan-pick__meta { font-size: 10px; line-height: 1.3; }
    .plan-pick__price {
      text-align: center;
      font-size: 13px;
    }
    .plan-pick__price small { font-size: 10px; margin-left: 2px; }
  }

  /* Plan cards */
  .plan-panels { position: relative; }
  .plan-panel { display: none; }
  .plan-panel.active { display: block; }

  /* Subscription grid */
  .sub-grid {
    display: flex; flex-direction: column; gap: 12px;
  }
  .sub-card {
    position: relative;
    border: 2px solid var(--linen-mid);
    border-radius: 12px; padding: 20px 24px;
    cursor: pointer; transition: all 0.2s;
    background: var(--white);
    display: flex; align-items: center; gap: 20px;
  }
  .sub-card .sub-card__badge.popular {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 2;
  }
  .sub-card:hover { border-color: #0076b0; box-shadow: 0 4px 16px rgba(0,118,176,0.08); }
  .sub-card.selected {
    border-color: #0076b0;
    background: #f0f8fd;
    box-shadow: 0 4px 20px rgba(0,118,176,0.12);
  }
  .sub-card__radio {
    width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--linen-mid);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all 0.2s;
    background: var(--white);
  }
  .sub-card.selected .sub-card__radio {
    border-color: #0076b0; background: #0076b0;
  }
  .sub-card.selected .sub-card__radio::after {
    content: ''; width: 8px; height: 8px;
    background: #fff; border-radius: 50%;
    display: block;
  }
  .sub-card__info { flex: 1; }
  .sub-card__name {
    font-size: 16px; font-weight: 600; color: var(--text-dark);
    margin-bottom: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .sub-card__badge {
    display: inline-block;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; background: #0076b0;
    color: #fff; padding: 5px 12px; border-radius: 999px;
    white-space: nowrap; line-height: 1.1;
    flex-shrink: 0;
  }
  .sub-card__badge.popular { background: var(--gold); color: #fff; }
  .sub-card__desc { font-size: 13px; color: var(--text-light); font-weight: 300; }
  .sub-card__fun { font-size: 12px; color: #0076b0; font-style: italic; margin-top: 4px; font-weight: 400; }
  .sub-card__price {
    text-align: right; flex-shrink: 0;
  }
  .sub-card__amount {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 24px; font-weight: 700; color: var(--text-dark);
    line-height: 1;
  }
  .sub-card__period {
    font-size: 12px; color: var(--text-light);
    white-space: nowrap;
    margin-left: 2px;
  }
  .sub-card__save {
    font-size: 11px; color: #0076b0; font-weight: 500;
  }

  /* Selected plan detail */
  .selected-detail {
    margin-top: 16px;
    border: 1.5px solid var(--linen-mid);
    border-radius: 10px; overflow: hidden;
    display: none;
  }
  .selected-detail.show { display: block; }
  .selected-detail__header {
    background: var(--linen); padding: 14px 20px;
    font-size: 13px; font-weight: 500; color: var(--text-mid);
    display: flex; justify-content: space-between;
  }
  .selected-detail__feats {
    padding: 14px 20px; display: flex; flex-direction: column; gap: 8px;
  }
  .selected-detail__feat {
    display: flex; align-items: center; gap: 10px;
    font-size: 14px; color: var(--text-mid);
  }
  .selected-detail__feat svg { color: #0076b0; flex-shrink: 0; }
  /* Hide the "Every subscription includes" detail block on phones (keep on tablet+desktop). */
  @media (max-width: 600px) {
    .selected-detail, .selected-detail.show { display: none; }
  }

  /* Single delivery panel */
  .single-card {
    border: 2px solid var(--linen-mid);
    border-radius: 12px; padding: 28px;
    background: var(--white);
  }
  .single-card__header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 20px;
  }
  .single-card__title { font-size: 20px; font-weight: 600; color: var(--text-dark); }
  .single-card__price {
    font-family: 'DM Sans', sans-serif;
    font-size: 36px; font-weight: 700; color: var(--text-dark); line-height: 1;
  }
  .single-card__price span { font-size: 14px; color: var(--text-light); font-family: 'DM Sans', sans-serif; }
  .single-card__feats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
  .single-card__feat {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; color: var(--text-mid);
  }
  .single-card__feat svg { color: #0076b0; flex-shrink: 0; }
  /* Tighter on phones — the 28px padding + 36px price made the box feel oversized */
  @media (max-width: 600px) {
    .single-card { padding: 20px 18px; border-radius: 10px; }
    .single-card__header { margin-bottom: 14px; gap: 12px; }
    .single-card__title { font-size: 18px; }
    .single-card__price { font-size: 30px; }
    .single-card__price span { font-size: 13px; }
    .single-card__feats { gap: 8px; margin-bottom: 18px; }
    .single-card__feat { font-size: 14px; align-items: flex-start; }
    .single-card__feat svg { margin-top: 2px; }
  }

  /* Shared CTA button */
  .order-cta-btn {
    display: block; width: 100%;
    padding: 18px 24px; border: none;
    background: #0076b0; color: #fff;
    border-radius: 10px; font-family: 'DM Sans', sans-serif;
    font-size: 17px; font-weight: 600; cursor: pointer;
    text-align: center; text-decoration: none;
    transition: background 0.2s, transform 0.15s;
    letter-spacing: 0.01em; margin-top: 20px;
  }
  .order-cta-btn:hover { background: #005a87; transform: translateY(-1px); }
  .order-cta-note {
    text-align: center; font-size: 12px;
    color: var(--text-light); margin-top: 10px;
  }

  /* Responsive */
  @media (max-width: 900px) {
    .howord { padding: 64px 24px; }
    .howord__inner { grid-template-columns: 1fr; gap: 48px; }
    .howord__steps { position: static; }
    .howord__step { margin-bottom: 24px; padding-bottom: 24px; }
    .sub-card { flex-wrap: wrap; }
    .sub-card__price { width: 100%; text-align: left; }
    .plan-tab span { display: none; }
  }
  @media (max-width: 540px) {
    .plan-tabs { flex-direction: column; }
    .plan-tab { border-right: none; border-bottom: 1.5px solid var(--linen-mid); }
    .plan-tab:last-child { border-bottom: none; }
    .sub-card__name { flex-direction: column; align-items: flex-start; }
  }

  /* ── ARRANGEMENTS ── */
  .arr-section {
    background: var(--white);
    padding: 72px 80px;
    border-top: 1px solid var(--linen-mid);
  }
  .arr-inner { max-width: 1140px; margin: 0 auto; }
  .arr-header {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
  }
  .arr-header-left {}
  .arr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .arr-card {
    border: 1.5px solid var(--linen-mid);
    border-radius: 14px; overflow: hidden;
    background: var(--white);
    transition: box-shadow 0.2s, border-color 0.2s;
    display: flex; flex-direction: column;
  }
  .arr-card:hover {
    box-shadow: 0 8px 24px rgba(0,118,176,0.08);
    border-color: rgba(0,118,176,0.2);
  }
  .arr-card__img-wrap {
    aspect-ratio: 3/4; overflow: hidden;
    background: var(--linen); position: relative;
  }
  .arr-card__img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.4s ease;
  }
  .arr-card:hover .arr-card__img-wrap img { transform: scale(1.06); }
  .arr-card__body {
    padding: 10px 14px 14px;
  }
  .arr-card__name {
    font-size: 13px; font-weight: 500; color: var(--text-mid);
    line-height: 1.3; text-align: center;
  }
  .arr-card__price {
    font-size: 15px; font-weight: 500; color: var(--text-mid); margin-bottom: 10px;
  }
  .arr-card__btn {
    display: block; width: 100%;
    padding: 8px; background: #0076b0; color: #fff;
    border: none; border-radius: 6px;
    font-family: 'DM Sans', sans-serif; font-size: 12px;
    font-weight: 500; cursor: pointer; text-align: center;
    text-decoration: none; transition: background 0.2s;
    margin-top: auto;
  }
  .arr-card__btn:hover { background: #005a87; }
  .arr-card__badge {
    position: absolute; top: 10px; left: 10px;
    background: var(--gold); color: #fff;
    font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
  }


  @media (max-width: 960px) {
    .arr-grid { grid-template-columns: repeat(3, 1fr); }
  }
  @media (max-width: 680px) {
    .arr-section { padding: 64px 24px; }
    .arr-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  }

  /* ── SCROLL OFFSET FOR FIXED NAV ── */
  #how, #plans, #arrangements, #memories, #faq, #top {
    scroll-margin-top: 76px;
  }

  /* Anchor scroll offset for fixed nav */
  #how, #plans, #arrangements, #memories, #faq, #top {
    scroll-margin-top: 80px;
  }

  /* ── ARRANGEMENT FILTER PILLS ── */
  .arr-filters {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-bottom: 28px;
  }
  .arr-pill {
    padding: 8px 18px;
    border: 1.5px solid var(--linen-mid);
    border-radius: 50px;
    font-size: 13px; font-weight: 500;
    color: var(--text-mid);
    background: var(--white);
    cursor: pointer; transition: all 0.2s;
    font-family: 'DM Sans', sans-serif;
    white-space: nowrap;
  }
  .arr-pill:hover {
    border-color: #0076b0;
    color: #0076b0;
    background: rgba(0,118,176,0.04);
  }
  .arr-pill.active {
    background: #0076b0;
    border-color: #0076b0;
    color: #fff;
  }
  .arr-card {
    transition: opacity 0.25s, transform 0.25s;
  }
  .arr-card.hidden {
    display: none;
  }
  .arr-results-count {
    font-size: 13px; color: var(--text-light);
    margin-bottom: 20px; display: block;
  }

  /* ═══════════════════════════════════════════════════════
     RESPONSIVE — MOBILE FIRST
     Breakpoints: 1024px tablet, 768px large phone, 480px phone
  ═══════════════════════════════════════════════════════ */

  @media (max-width: 1024px) {
    nav { padding: 14px 24px; }
    .nav-links a:not(.nav-cta) { display: none; }
    section { padding: 64px 32px; }
    .hero-content { padding: 0 32px; bottom: 60px; }
    .hero-stats { right: 32px; bottom: 60px; }
    .howord { padding: 64px 32px; }
    .howord__inner { grid-template-columns: 1fr; gap: 40px; }
    .howord__steps { position: static; }
    .memory-inner { grid-template-columns: 1fr; grid-template-areas: "text" "card" "cta"; gap: 36px; }
    .story-inner { grid-template-columns: 1fr; gap: 32px; }
    /* Mobile founder layout: heading + paragraphs first, small thumbnail photo, quote below. */
    .story-text { order: -1; }
    /* Control HEIGHT directly (auto width) so the portrait photo stays short, not tall. */
    .story-img { height: 380px; width: auto; max-width: 100%; aspect-ratio: auto; margin: 0 auto; display: block; }
    .story-quote-pull {
      position: relative; bottom: auto; right: auto; left: auto;
      max-width: 420px; margin: 16px auto 0;
    }
    .reviews-section { padding: 64px 32px; }
    .faq-section { padding: 64px 32px; }
    .arr-section { padding: 64px 32px; }
    .arr-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px 32px 40px; }
    .footer-bottom { padding: 16px 32px; }
    .final-cta { padding: 72px 32px; }
    .insta-grid { grid-template-columns: repeat(4, 1fr); }
  }

  @media (max-width: 768px) {
    /* Nav */
    nav { padding: 12px 20px; }
      .nav-logo { padding: 4px 10px 4px 6px; }
    .nav-logo img { height: 34px; }
    .nav-cta { padding: 8px 16px; font-size: 12px !important; }

    /* Hero */
    .hero { height: 70vh; min-height: 460px; max-height: 560px; }
    .hero-content { padding: clamp(100px, 22vw, 130px) 20px 0 !important; top: 0 !important; bottom: auto !important; max-width: 100% !important; left: 0 !important; right: 0 !important; }
    .hero-headline { font-size: clamp(26px, 6vw, 40px); margin-bottom: 10px; }
    .hero-sub { font-size: 14px; margin-bottom: 20px; max-width: 100%; }
    .hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
    .btn-primary { padding: 12px 24px; font-size: 14px; width: 100%; justify-content: center; }
    .btn-secondary { font-size: 13px; }
    .hero-stats { display: none; }
    .scroll-hint { display: none; }

    /* Trust strip */
    .trust-strip { padding: 0; flex-direction: column; }
    .trust-item { border-right: none; border-bottom: 1px solid var(--linen-mid); padding: 16px 20px; min-width: 100%; }
    .trust-item:last-child { border-bottom: none; }

    /* How it works + pricing */
    .howord { padding: 48px 20px; }
    .howord__headline { font-size: clamp(28px, 6vw, 40px); margin-bottom: 32px; }
    .howord__step { gap: 14px; margin-bottom: 20px; padding-bottom: 20px; }
    .howord__step-num { width: 36px; height: 36px; font-size: 16px; flex-shrink: 0; }
    .howord__step-title { font-size: 16px; }
    .howord__step-desc { font-size: 14px; }
    .plan-tabs { border-radius: 8px; }
    .plan-tab { font-size: 13px; padding: 12px 10px; }
    .plan-tab span { display: none; }
    .sub-card { flex-wrap: wrap; gap: 10px; padding: 16px 18px; }
    .sub-card__name { font-size: 15px; }
    .sub-card__desc { font-size: 12px; }
    .sub-card__amount { font-size: 20px; }
    .order-cta-btn { font-size: 16px; padding: 16px; }

    /* Arrangements */
    .arr-section { padding: 48px 20px; }
    .arr-filters { gap: 6px; }
    .arr-pill { font-size: 12px; padding: 7px 14px; }
    .arr-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .arr-card__name { font-size: 12px; }

    /* Memory garden */
    .memory-section { padding: 48px 20px; }
    .memory-inner { grid-template-columns: 1fr; gap: 32px; }
    .mem-name { font-size: 18px; }

    /* Story */
    .story-section { padding: 48px 20px; }
    .story-inner { grid-template-columns: 1fr; gap: 28px; }

    /* Reviews */
    .reviews-section { padding: 48px 20px; }
    .reviews-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .rev-slider-wrap { overflow: hidden; }

    /* FAQ */
    .faq-section { padding: 48px 20px; }
    .faq-inner { max-width: 100%; }
    .faq-q { font-size: 15px; }
    .faq-a { font-size: 14px; }

    /* Final CTA */
    .final-cta { padding: 56px 20px; }
    .final-cta h2 { font-size: clamp(28px, 6vw, 42px); }
    .final-cta-actions { flex-direction: column; align-items: center; gap: 16px; }
    .btn-primary[style*="font-size:15px"] { font-size: 15px !important; padding: 16px 32px !important; width: 100%; max-width: 320px; }
    .phone-link { font-size: 15px; }

    /* Instagram */
    .insta-section { padding: 48px 0 0; }
    .insta-header { padding: 0 20px 32px; }
    .insta-grid { grid-template-columns: repeat(4, 1fr); gap: 2px; }

    /* Footer */
    .footer-top { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px 32px; }
    .footer-bottom { padding: 16px 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
    .footer-legal { flex-wrap: wrap; gap: 12px; }

    /* Section labels + titles */
    .section-title { font-size: clamp(26px, 6vw, 40px); }
    .section-sub { font-size: 15px; }

    /* Modals */
    .photo-modal__nav { display: none; }
    .photo-modal__inner { width: 95%; }
    .photo-modal__close { top: -12px; right: -8px; }
  }

  @media (max-width: 480px) {
    .arr-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .insta-grid { grid-template-columns: repeat(3, 1fr); }
    .sub-card__price { width: 100%; text-align: left; margin-top: 4px; }
    .howord__pricing-title { font-size: 18px; }
    .plan-tab { padding: 10px 8px; font-size: 12px; }
    .footer-newsletter-input { flex-direction: column; }
    .footer-newsletter-input input { border-right: 1px solid rgba(255,255,255,0.1); border-radius: 4px; margin-bottom: 6px; }
    .footer-newsletter-input button { border-radius: 4px; padding: 10px; }
  }


  /* ── NAV TAGLINE ── */
  .nav-tagline {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    font-family: 'Playfair Display', serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-dark);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;
    letter-spacing: 0.01em;
    z-index: 1;
  }
  .nav-tagline em {
    font-style: italic;
    color: #0076b0;
  }
  nav.scrolled .nav-tagline {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  /* Hide the text nav links on scroll — only keep the CTA button */
  nav.scrolled .nav-links a:not(.nav-cta) {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }
  nav:not(.scrolled) .nav-links a:not(.nav-cta) {
    opacity: 1;
    transition: opacity 0.4s ease;
  }
  @media (max-width: 900px) {
    .nav-tagline { display: none; }
    nav.scrolled .nav-links a:not(.nav-cta) { opacity: 0; pointer-events: none; }
  }


  /* ── TRUST STRIP ── */
  .trust-strip {
    display: flex; align-items: stretch; justify-content: center;
    border-bottom: 1px solid var(--linen-mid);
    flex-wrap: wrap;
  }
  .trust-item {
    display: flex; align-items: center; gap: 12px;
    padding: 18px 36px;
    border-right: 1px solid var(--linen-mid);
    flex: 1; min-width: 200px;
  }
  .trust-item:last-child { border-right: none; }
  .trust-item svg { color: #0076b0; flex-shrink: 0; width: 18px; height: 18px; }
  .trust-item-text strong {
    display: block; font-size: 13px; font-weight: 600;
    color: var(--text-dark); line-height: 1.2; margin-bottom: 2px;
  }
  .trust-item-text span { font-size: 12px; color: var(--text-light); display: block; }


  @media (max-width: 900px) {
    .trust-top { flex-direction: column; }
    .trust-item { border-right: none; border-bottom: 1px solid var(--linen-mid); padding: 14px 20px; min-width: 100%; }
    .trust-item:last-child { border-bottom: none; }
      }


  /* ── CONFIRMATION EXAMPLE MODAL ── */
  .confirm-modal {
    display: none; position: fixed; inset: 0; z-index: 2000;
    align-items: center; justify-content: center;
  }
  .confirm-modal.open { display: flex; }
  .confirm-modal__backdrop {
    position: absolute; inset: 0;
    background: rgba(20,16,12,0.82);
    backdrop-filter: blur(10px);
    cursor: pointer;
    animation: fadeIn 0.25s ease;
  }
  /* STANDARD: modal cards always fit the viewport — no scrollbars.
     Content shrinks (image clamps, body min-height: 0) so nothing scrolls. */
  .confirm-modal__card {
    position: relative; z-index: 1;
    background: var(--white);
    border-radius: 16px; overflow: hidden;
    width: 90%; max-width: 420px;
    max-height: 92vh;
    display: flex; flex-direction: column;
    box-shadow: 0 40px 80px rgba(0,0,0,0.35);
    animation: scaleIn 0.3s cubic-bezier(0.34,1.56,0.64,1);
  }
  .confirm-modal__img {
    width: 100%; display: block;
    height: clamp(160px, 36vh, 340px);
    object-fit: cover;
    object-position: center 55%;
    flex-shrink: 0;
  }
  .confirm-modal__body {
    min-height: 0;
  }
  .confirm-modal__body {
    padding: 16px 20px 20px;
  }
  .confirm-modal__label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: #0076b0;
    margin-bottom: 8px;
  }
  .confirm-modal__label svg { width: 12px; height: 12px; }
  .confirm-modal__title {
    font-family: 'Playfair Display', serif;
    font-size: 17px; font-weight: 400; color: var(--text-dark);
    margin-bottom: 4px; line-height: 1.3;
  }
  .confirm-modal__sub {
    font-size: 13px; color: var(--text-light); font-weight: 300;
    line-height: 1.6; margin-bottom: 14px;
  }
  .confirm-modal__cta {
    display: block; width: 100%;
    padding: 13px; background: #0076b0; color: #fff;
    border: none; border-radius: 8px; cursor: pointer;
    font-family: 'DM Sans', sans-serif; font-size: 14px;
    font-weight: 500; text-align: center; text-decoration: none;
    transition: background 0.2s;
  }
  .confirm-modal__cta:hover { background: #005a87; }
  .confirm-modal__close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px; border-radius: 50%;
    background: rgba(0,0,0,0.4); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px; line-height: 1;
    transition: background 0.2s; z-index: 2;
  }
  .confirm-modal__close:hover { background: rgba(0,0,0,0.65); }
  #runnerModal .confirm-modal__card {
    max-width: 800px; display: flex; flex-direction: row;
  }
  #runnerModal .confirm-modal__img {
    width: 35%; height: auto; min-height: 100%;
    object-fit: cover; object-position: center center;
    flex-shrink: 0;
  }
  #runnerModal .confirm-modal__body {
    padding: 24px 28px; display: flex; flex-direction: column; justify-content: center;
  }
  #runnerModal .confirm-modal__label { margin-bottom: 8px; }
  #runnerModal .confirm-modal__title { font-size: 18px; margin-bottom: 6px; }
  #runnerModal .confirm-modal__sub { font-size: 13px; margin-bottom: 12px; line-height: 1.6; }
  #runnerModal .confirm-modal__cta { padding: 13px; font-size: 14px; margin-top: auto; }
  @media (max-width: 600px) {
    #runnerModal .confirm-modal__card { flex-direction: column; max-width: min(420px, 94vw); max-height: 92vh; }
    #runnerModal .confirm-modal__img { width: 100%; height: clamp(120px, 18vh, 180px); min-height: auto; flex-shrink: 0; }
    #runnerModal .confirm-modal__body { overflow-y: auto; padding: 18px 20px; -webkit-overflow-scrolling: touch; }
    #runnerModal .confirm-modal__sub { font-size: 13px; margin-bottom: 10px; }
    #runnerModal .runner-vetting__list { margin: 8px 0 14px; }
    #runnerModal .runner-vetting__list li { font-size: 12px; margin-bottom: 6px; }
    #runnerModal .confirm-modal__cta { padding: 12px; font-size: 14px; }
  }
  .runner-vetting__list {
    list-style: none; padding: 0; margin: 12px 0 20px;
  }
  .runner-vetting__list li {
    position: relative; padding-left: 24px; margin-bottom: 8px;
    font-size: 13px; color: var(--text-mid); line-height: 1.5;
  }
  .runner-vetting__list li::before {
    content: '✓'; position: absolute; left: 0; color: #0076b0; font-weight: 700;
  }

  /* ─────────────────────────────────────────────
     ARRANGEMENT SLIDER MODAL
     ───────────────────────────────────────────── */
  .arr-slider-modal .confirm-modal__backdrop {
    background: rgba(20, 16, 12, 0.78);
  }
  .arr-slider-card {
    max-width: 720px !important;
    width: calc(100vw - 32px);
    background: #FAF8F3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35);
    padding: 0 !important;
    max-height: 92vh !important;
    /* No scroller — see modal standard above (.confirm-modal__card). */
    overflow-y: hidden;
  }
  .arr-slider-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: #2C2520;
    border: none;
    font-size: 22px; line-height: 36px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  }
  .arr-slider-close:hover {
    background: #fff;
    transform: scale(1.05);
  }

  /* ── Stage (main image area) ── */
  .arr-slider-stage {
    position: relative;
    width: 100%;
    background: #FAF8F3;
    height: 60vh;
    min-height: 300px;
    max-height: 560px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .arr-slider-img {
    position: absolute;
    top: 24px; left: 0; right: 0; bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
  }
  .arr-slider-img.is-active {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Counter ── */
  .arr-slider-counter {
    position: absolute;
    top: 18px; left: 18px;
    background: rgba(20, 16, 12, 0.62);
    backdrop-filter: blur(8px);
    color: #FAF8F3;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 5;
  }

  /* ── Arrows ── */
  .arr-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px; height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: #2C2520;
    border: none;
    cursor: pointer;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, transform 0.2s;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
  }
  .arr-slider-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.06);
  }
  .arr-slider-arrow--prev { left: 18px; }
  .arr-slider-arrow--next { right: 18px; }

  /* ── Thumbnail strip ── */
  .arr-slider-thumbs {
    display: flex;
    gap: 10px;
    padding: 16px 22px 12px;
    background: #FAF8F3;
    justify-content: center;
    flex-wrap: nowrap;
  }
  .arr-thumb {
    flex: 0 0 auto;
    width: 84px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex; flex-direction: column; align-items: center;
    gap: 6px;
    position: relative;
  }
  .arr-thumb__pic {
    width: 84px; height: 84px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    background: #F0ECE3;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    display: block;
  }
  .arr-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.72;
    transition: opacity 0.2s;
  }
  .arr-thumb__label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5C5248;
    line-height: 1.2;
    text-align: center;
    max-width: 84px;
  }
  .arr-thumb:hover img { opacity: 0.95; }
  .arr-thumb:hover .arr-thumb__pic { transform: translateY(-2px); }
  .arr-thumb.is-active .arr-thumb__pic {
    border-color: #C9A84C;
    box-shadow: 0 4px 14px rgba(201, 168, 76, 0.32);
  }
  .arr-thumb.is-active img { opacity: 1; }
  .arr-thumb.is-active .arr-thumb__label { color: #C9A84C; }
  .arr-thumb--more .arr-thumb__pic {
    background: linear-gradient(135deg, #F0ECE3, #E8E2D6);
    color: #5C5248;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
    display: flex; align-items: center; justify-content: center;
  }
  .arr-thumb--more:hover .arr-thumb__pic { background: linear-gradient(135deg, #E8E2D6, #D9D3C5); }

  /* ── Dots ── */
  .arr-slider-dots {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 4px 22px 8px;
    background: #FAF8F3;
  }
  .arr-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #D9D3C5;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }
  .arr-dot:hover { background: #B8B0A2; }
  .arr-dot.is-active {
    background: #C9A84C;
    transform: scale(1.32);
  }

  /* ── Footer (title + CTA) ── */
  .arr-slider-foot {
    background: #FAF8F3;
    padding: 12px 28px 28px;
    text-align: center;
    border-top: 1px solid #F0ECE3;
  }
  .arr-slider-title {
    margin: 0 0 4px 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 24px;
    font-weight: 500;
    color: #2C2520;
    letter-spacing: -0.01em;
  }
  .arr-slider-sub {
    margin: 0 0 18px 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8A8078;
    font-weight: 500;
  }
  .arr-slider-cta {
    display: inline-block;
    padding: 14px 32px;
    background: #C9A84C;
    color: #005a87;
    text-decoration: none;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background 0.2s;
  }
  .arr-slider-cta:hover { background: #E8C96A; }

  /* ── Mobile ── */
  @media (max-width: 600px) {
    .arr-slider-card {
      width: calc(100vw - 16px);
      max-width: calc(100vw - 16px) !important;
      border-radius: 8px;
    }
    .arr-slider-stage { height: 50vh; min-height: 280px; max-height: 480px; }
    .arr-slider-arrow {
      width: 40px; height: 40px;
    }
    .arr-slider-arrow--prev { left: 10px; }
    .arr-slider-arrow--next { right: 10px; }
    .arr-slider-thumbs { gap: 6px; padding: 12px 14px 8px; }
    .arr-thumb { width: 60px; }
    .arr-thumb__pic { width: 60px; height: 60px; }
    .arr-thumb__label { font-size: 9px; max-width: 60px; }
    .arr-thumb--more .arr-thumb__pic { font-size: 12px; }
    .arr-slider-foot { padding: 10px 20px 22px; }
    .arr-slider-title { font-size: 20px; }
    /* Fill the stage on phones (cover) so slim/portrait photos don't leave side gaps. */
    .arr-slider-img {
      top: 0; left: 0; right: 0; bottom: 0;
      width: 100%; height: 100%;
      max-width: none; max-height: none;
      object-fit: cover;
    }
    .arr-slider-cta { padding: 12px 24px; font-size: 12px; }
  }
  .runner-vetting__list li strong { color: var(--text-dark); }

  /* ------- Review Modal (banner "Read our reviews" tap) ------- */
  .review-modal__panel {
    position: relative;
    background: var(--white);
    border-radius: 12px;
    width: min(92vw, 620px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 80px rgba(0,0,0,0.3);
    overflow: hidden;
  }
  .review-modal__header {
    padding: 22px 26px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--linen-mid);
    background: var(--linen);
  }
  .review-modal__stars { color: #FBBC04; font-size: 16px; letter-spacing: 1px; }
  .review-modal__rating { font-size: 13px; color: var(--text-mid); }
  .review-modal__rating strong { color: var(--text-dark); font-weight: 600; }
  .review-modal__viewport {
    position: relative;
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
  }
  .review-modal__track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: transform;
  }
  .review-modal__track .rev-slide {
    flex: 0 0 100%;
    min-width: 100%;
    padding: 22px 26px;
    box-sizing: border-box;
    overflow-y: auto;
  }
  /* Inside the modal, the card shouldn't have its own border/shadow — the modal frame is the chrome */
  .review-modal__track .rev-card {
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;
  }
  .review-modal__track .rev-text {
    font-size: 15px;
    line-height: 1.7;
  }
  .review-modal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px 16px;
    border-top: 1px solid var(--linen-mid);
    background: var(--linen);
    gap: 12px;
  }
  .review-modal__arrow {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--linen-mid);
    background: var(--white);
    color: var(--text-mid);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .review-modal__arrow:hover { background: #0076b0; color: #fff; border-color: #0076b0; }
  .review-modal__arrow:disabled { opacity: 0.35; cursor: not-allowed; }
  .review-modal__arrow:disabled:hover { background: var(--white); color: var(--text-mid); border-color: var(--linen-mid); }
  .review-modal__dots {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    justify-content: center;
    flex: 1 1 auto;
  }
  .review-modal__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(0,0,0,0.18);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s, background 0.2s;
  }
  .review-modal__dot.active { background: #0076b0; transform: scale(1.35); }
  .review-modal__google-link {
    display: block;
    text-align: center;
    padding: 10px 16px 16px;
    font-size: 13px;
    color: #0076b0;
    text-decoration: none;
    font-weight: 500;
  }
  .review-modal__google-link:hover { text-decoration: underline; }
  /* On phones, give the panel the full viewport feel */
  @media (max-width: 600px) {
    .review-modal__panel {
      width: 100vw;
      max-width: 100vw;
      /* dvh = dynamic viewport height (excludes mobile URL bar). vh fallback for old iOS. */
      max-height: 100vh;
      max-height: 100dvh;
      height: 100vh;
      height: 100dvh;
      border-radius: 0;
    }
    /* Pin the close X to the viewport corner so it's always reachable on mobile —
       was getting pushed above the fold when the panel exceeded the visible area. */
    .review-modal .confirm-modal__close {
      position: fixed;
      top: 10px; right: 10px;
      z-index: 3000;
      background: rgba(0,0,0,0.55);
    }
    .review-modal__track .rev-slide { padding: 18px 18px 22px; }
    .review-modal__track .rev-text { font-size: 14px; }
  }

  /* Nav: account/login button — sage filled circle to the right of the CTA. */
  .nav-account {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--sage-mid);   /* #0076b0 */
    color: #fff;
    margin-left: 4px;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
  }
  .nav-account:hover {
    background: var(--sage-mid);
    color: var(--gold);
    transform: scale(1.06);
  }
  .nav-account svg { display: block; }
  /* When the nav scrolls (white background), darken slightly to keep contrast */
  nav.scrolled .nav-account { background: var(--sage-mid); }
  nav.scrolled .nav-account:hover { background: var(--sage-mid); color: var(--gold); }


  /* Nav account dropdown — shown when JS detects logged-in user */
  .nav-account-wrap { position: relative; display: inline-flex; align-items: center; }
  .nav-account-dropdown {
    position: absolute; top: calc(100% + 10px); right: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid var(--linen-mid);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
    padding: 6px 0;
    z-index: 200;
  }
  .nav-account-dropdown[hidden] { display: none; }
  .nav-account-dropdown a {
    display: block;
    padding: 11px 18px;
    font-size: 14px;
    color: var(--text-dark);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
  }
  .nav-account-dropdown a:hover { background: var(--linen); color: #0076b0; }
  .nav-account.is-logged-in { cursor: pointer; }


  /* Always keep the account-icon treatment: sage circle + white person, gold person on hover.
     Specificity-armoring needed because some pages have a per-page Light-hero nav override
     (\) which would otherwise win. */
  nav .nav-links a.nav-account,
  nav.scrolled .nav-links a.nav-account {
    background: var(--sage-mid) !important;
    color: #fff !important;
  }
  nav .nav-links a.nav-account:hover,
  nav.scrolled .nav-links a.nav-account:hover {
    background: var(--sage-mid) !important;
    color: var(--gold) !important;
  }

.sub-card .sub-card__info::after {
  content: "Cancel anytime — but we're confident you won't!";
  display: none;
  margin-top: 6px;
  font-size: 12px;
  font-style: italic;
  color: #0076b0;
  font-weight: 500;
}
.sub-card.selected .sub-card__info::after { display: block; }

/* ============================================================
   Account menu — administrator shortcuts (injected by main.js)
   Grouped per network site. Lives here rather than in the account
   stylesheet because the nav renders on every page.
   ============================================================ */
.nav-account-dropdown.has-admin { min-width: 236px; }

.nav-account-dropdown .nav-admin-group {
  border-bottom: 1px solid var(--linen-mid, #E8E2D6);
  padding: 4px 0 6px;
  margin: 0;
}

.nav-account-dropdown .nav-admin-site {
  margin: 0;
  padding: 8px 14px 3px;
  font-family: 'DM Sans', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold, #C9A84C);
  line-height: 1.2;
}

.nav-account-dropdown a.nav-admin-link {
  display: block;
  padding: 5px 14px 5px 22px;
  font-family: 'DM Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-mid, #5C5248);
  text-decoration: none;
}

.nav-account-dropdown a.nav-admin-link:hover {
  background: var(--linen, #FAF8F3);
  color: var(--text-dark, #2C2520);
}