/* ==========================================================================
   Responsive Styles — Joseph Melluso / Allowance
   Breakpoints (max-width, largest -> smallest):
     1440  · large desktop / laptop
     1024  · small laptop / landscape tablet
      991  · portrait tablet (Bootstrap lg break, stacks two-up columns;
             hamburger nav takes over)
      768  · large phone / small tablet
      480  · phone
      320  · small phone
   Each breakpoint appears once; component rules are grouped inside it.
   Page-specific rules that already live in style.css are complemented here;
   this file is the single home for cross-breakpoint responsive tuning.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Global guards — stop stray absolute/decorative elements from forcing the
   page to scroll sideways, and never let media spill past its box.
   overflow-x: clip (not hidden) contains the overflow WITHOUT creating a
   scroll container, so the sticky site-header keeps pinning to the top.
   -------------------------------------------------------------------------- */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}
img {
  max-width: 100%;
}

/* Visual Journey (gallery) — self-contained so it can never exceed the
   viewport on its own, independent of the body-level overflow guard. The
   fanned trio bleeds sideways by design on desktop; clipping it to the
   section keeps that bleed off the page's horizontal scroll on every screen.
   (Card widths are handled by the breakpoint rules below — not touched here,
   so the desktop fan stays intact.) */
.gallery-section {
  overflow-x: clip;
}
.gallery-fan {
  max-width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   769px and above — desktop / tablet-landscape containment
   Sections below use decorative children parked at negative offsets, or
   viewport-unit type, and are only reined in at <=991px. Between 769px and
   large desktop they had nothing holding them, so the leaves/accents bled
   past the viewport and the wordmarks overflowed by the scrollbar width.
   These rules only CLIP and CONTAIN — no positions, sizes or spacing of the
   intended design are changed, so the desktop composition is untouched.
   ========================================================================== */
@media (min-width: 769px) {
  /* Sections whose decorative art sits outside the content box.
     overflow-x: clip (not hidden) contains the bleed WITHOUT creating a
     scroll container, so sticky/position: sticky descendants keep working
     and no stray scrollbar appears inside the section. */
  .services-section,
  .about-founder,
  .about-approach,
  .story-feature,
  .journey-section,
  .reflections-section,
  .sacred-space,
  .contact-card,
  .featured-post,
  .ceremony-arrival {
    overflow-x: clip;
  }

  /* Bootstrap rows: a negative-margin row plus a pulled column (the story
     feature intentionally overlaps by -18.3333%) can exceed 100% width.
     Keeping the row from overflowing its container stops the sideways push
     while leaving the intended overlap intact. */
  .story-feature > .container,
  .events-section > .container,
  .about-founder > .container {
    overflow-x: clip;
  }

  /* Viewport-unit wordmarks: 100vw/16.4vw measure the viewport INCLUDING the
     classic scrollbar, so these ran a scrollbar's width wider than the page
     on every desktop. Pin them to the container's real width instead. */
  .footer-wordmark {
    width: auto;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .hero-wordmark {
    max-width: 100%;
    overflow: hidden;
  }

  /* Decorative media can never widen its section. */
  .services-leaf,
  .about-founder-accent,
  .sacred-space-img-overlay,
  .footer-floral {
    max-width: 100%;
    pointer-events: none;
  }
}

/* --------------------------------------------------------------------------
   992px–1200px — the band the 991px rules no longer cover but where the
   container is still far narrower than the fixed decorative art.
   The leaf is scaled (not hidden) so the texture survives, just in scale.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1200px) {
  .services-leaf {
    width: 280px;
    height: 354px;
  }
  .services-leaf-left {
    left: -40px;
    bottom: -30px;
  }
  .services-leaf-right {
    right: -40px;
    top: -40px;
  }
  .about-founder-accent {
    right: 0;
    width: 150px;
    height: 206px;
  }
  .about-founder-reverse .about-founder-accent {
    right: auto;
    left: 0;
  }
}

/* ==========================================================================
   1440px — large desktop
   ========================================================================== */
@media (max-width: 1440px) {
  .process-step::before {
    left: 40%;
    top: -4%;
  }

  /* Shared */
  .section-title {
    /* frozen: font-size: clamp(32px, 4vw, 50px) !important; */
  }

  /* Header contact pill scales down a touch */
  .arrow-button {
    width: 70px;
    flex: 0 0 70px;
    height: 70px;
  }
  .contact-button {
    max-width: 200px;
    flex: 0 0 200px;
    width: 100%;
    height: 70px;
    /* frozen: font-size: 14px; */
  }
  .header-contact {
    height: 70px;
  }
  .site-header .header-contact {
    width: 266px;
  }
  .homepage-hero .contact-button,
  .journey-section .contact-button {
    max-width: 236px;
    flex: 0 0 236px;
  }
  .invitation-content .contact-button,
  .reflections-section .contact-button,
  .events-section .contact-button,
  .gallery-section .contact-button {
    max-width: 250px;
    flex: 0 0 250px;
  }

  /* Homepage hero */
  .hero-content {
    margin-top: 25%;
  }
  .hero-content h1 {
    /* frozen: font-size: 62px; */
  }

  /* Journey */
  .journey-copy blockquote {
    /* frozen: font-size: 35px; */
  }

  /* Reflections staggered heights ease off */
  .reflections-section
    .col-lg-6:first-child
    .reflection-card:nth-child(2)
    .reflection-media {
    height: 620px;
  }
  .reflections-section
    .col-lg-6:first-child
    .reflection-card:nth-child(3)
    .reflection-media,
  .reflections-column-offset .reflection-card:nth-child(1) .reflection-media,
  .reflections-column-offset .reflection-card:nth-child(2) .reflection-media {
    height: 560px;
  }

  /* Events */
  .event-card {
    width: 256px;
    padding: 34px 20px;
  }
  .event-card-front {
    height: 355px;
  }
  .event-card-back {
    height: 366px;
  }
  .events-panel p {
    margin: 0 0 34px;
    max-width: 488px;
  }

  /* About */
  .about-meet-item p {
    max-width: 317px;
  }
  .about-meet-item h3,
  .about-approach-list h3 {
    /* frozen: font-size: 35px; */
  }
  .about-founder-portrait {
    height: 640px;
  }
  .about-approach-visual img {
    height: 640px;
  }

  /* Included cards */
  .included-card-title {
    /* frozen: font-size: 20px; */
  }
  .included-card {
    height: calc(100% - 30px);
    margin: 15px 0 0;
  }
  .included-card p {
    /* frozen: font-size: 13px; */
  }

  /* Contact form */
  .contact-form {
    max-width: 586px;
    margin-right: 43px;
  }

  /* Events listing */
  .event-listing-title {
    /* frozen: font-size: 25px; */
  }
  .event-listing-meta {
    /* frozen: font-size: 13px; */
  }
}

/* ==========================================================================
   1024px — small laptop / landscape tablet
   ========================================================================== */
@media (max-width: 1024px) {
  /* Global section rhythm tightens */
  .section-padding {
    padding: 70px 0;
  }

  /* Header — keep the desktop bar compact until stellarnav takes over at 991.
     Tighten nav + CTA so all three columns fit without clipping at 991-1024. */
  .site-header .container {
    padding-left: 12px;
    padding-right: 12px;
  }
  .main-nav.stellarnav > ul {
    gap: 0;
  }
  .main-nav.stellarnav > ul > li > a {
    padding: 10px 9px;
    /* frozen: font-size: 14px; */
  }
  /* The menu is content-driven, so a longer menu could push the CTA past the
     edge in this band (mobile nav only takes over at <=991px). Let the nav
     column absorb the squeeze — logo and CTA keep their sizes, and the nav
     wraps rather than forcing the bar wider than the viewport. */
  .site-header .row > .col-12 {
    min-width: 0;
  }
  .main-nav-col {
    min-width: 0;
    flex-shrink: 1;
  }
  .main-nav.stellarnav > ul {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .site-logo-col,
  .header-contact-col {
    flex-shrink: 0;
  }
  .site-logo {
    width: 150px;
  }
  .site-header .header-contact {
    width: auto;
  }
  .site-header .header-contact .contact-button {
    max-width: 168px;
    flex: 0 0 168px;
    height: 62px;
  }
  .site-header .header-contact .arrow-button {
    width: 62px;
    flex: 0 0 62px;
    height: 62px;
    margin-left: -28px;
  }

  /* Homepage hero — shorter banner on 1024 */
  .homepage-hero {
    min-height: 59vh;
  }
  .hero-content {
    margin-top: 12%;
  }
  .hero-content h1 {
    /* frozen: font-size: 52px; */
  }

  /* Inner banner */
  .inner-banner {
    /* Follow the image ratio (base rule) but cap the height for this width. */
    max-height: 460px;
    min-height: 300px;
  }
  .inner-banner .hero-content h1 {
    /* frozen: font-size: 52px; */
  }

  /* Journey collage now scales proportionally from its base styles (style.css),
     so no fixed-pixel overrides are needed here. */

  /* Reflections */
  .reflections-section
    .col-lg-6:first-child
    .reflection-card:nth-child(2)
    .reflection-media {
    height: 520px;
  }
  .reflections-section
    .col-lg-6:first-child
    .reflection-card:nth-child(3)
    .reflection-media,
  .reflections-column-offset .reflection-card:nth-child(1) .reflection-media,
  .reflections-column-offset .reflection-card:nth-child(2) .reflection-media {
    height: 480px;
  }

  /* Services */
  .service-media img {
    height: 400px;
  }

  /* Events copy panel + card stack */
  .events-panel {
    padding: 48px 34px;
  }
  .event-card {
    width: 230px;
  }

  /* Gallery fan: unfan into a wrapped, upright grid — same layout as 768/991 */
  .gallery-fan {
    flex-wrap: wrap;
    gap: 24px;
    padding: 30px 20px 50px;
  }
  .gallery-card,
  .gallery-card-left,
  .gallery-card-center,
  .gallery-card-right {
    width: 400px;
    max-width: 400px;
    height: 520px;
    transform: none;
  }
  .gallery-card-body {
    padding: 24px 20px;
  }

  /* About */
  .about-story-img {
    height: 340px;
  }
  .about-founder {
    padding: 70px 0;
  }
  .about-founder-portrait {
    height: 560px;
  }
  .about-approach-visual img {
    height: 560px;
  }
  .about-founder-quote {
    margin-top: 40px;
  }

  /* Ceremony included media */
  .ceremony-included-media img {
    min-height: 460px;
  }

  /* Story feature overlap eases */
  .story-feature-img-left {
    height: 460px;
  }
  .story-feature-img-right {
    height: 500px;
  }
  .story-feature-card {
    padding: 48px 30px;
  }

  /* Contact split */
  .contact-image img {
    height: 900px;
  }
  .contact-form {
    max-width: 500px;
    margin-right: 24px;
    margin-top: 60px;
    padding: 40px 30px;
  }
  .contact-info > p {
    /* frozen: font-size: 18px; */
  }
  .social-links {
    margin-top: 80px;
  }
  .section-title span {
    /* frozen: font-size: clamp(32px, 3vw, 50px) !important; */
  }
}

/* ==========================================================================
   991px — portrait tablet: Bootstrap lg columns stack to one/two-up
   ========================================================================== */
@media (max-width: 991px) {
  .section-padding {
    padding: 60px 0;
  }

  /* -------- Header: hamburger takes over at <=991px (logo + 7 links + CTA
     no longer fit one bar on portrait tablets) -------- */
  .site-header .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  /* Visual order on mobile: Logo → Button → Hamburger.
     DOM order is logo, nav (hamburger), contact (button), so reorder with
     flex `order` — the hamburger stays in normal flow, so this is safe. */
  .site-logo-col {
    padding-top: 14px;
    flex: 0 0 auto;
    order: 1;
  }
  .site-logo-col::before {
    display: none;
  }
  /* Hamburger sits to the right of the CTA; nav ul is the drawer (stellarnav) */
  .main-nav-col {
    flex: 0 0 auto;
    justify-content: flex-end;
    padding-right: 0;
    order: 3;
  }
  /* Enlarge the hamburger icon so it's easier to tap (stellarnav default is
     15x2px bars). Override the bars, not the toggle padding. */
  .site-header .main-nav.stellarnav .menu-toggle span.bars span {
    width: 24px;
    height: 3px;
    margin: 0 0 5px;
  }
  /* On mobile the "Contact Us" CTA lives ONLY inside the hamburger drawer (a
     copy is added there by initMobileCta in theme.js). Hide the header-bar
     column so the bar shows just logo + hamburger. */
  .header-contact-col {
    display: none;
  }
  .header-contact-col::before {
    display: none;
  }

  /* ---- CTA inside the mobile hamburger drawer ----
     Redesigned for mobile: ONE full-width gold pill spanning the drawer, with
     the "Contact Us" label and the arrow icon inline at the end. All the
     desktop sizing (80/90px, fixed widths, overlapping circle, text-hiding at
     narrow widths) is overridden here — these selectors outrank the header-bar
     rules below by specificity, so they win at every mobile width. */
  .site-header .main-nav.stellarnav > ul > li.menu-item-cta {
    padding: 14px 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }
  /* Match the desktop header CTA exactly, just scaled for mobile: the gold pill
     (54px) with the dark circle sitting at its right end LARGER than the pill
     (62px), so it protrudes above/below — same overlapping look as desktop —
     and the original tapered arrow.svg (not a geometric substitute). */
  .site-header .main-nav.stellarnav > ul > li.menu-item-cta .header-contact {
    width: 100%;
    height: 62px; /* tall enough for the protruding circle */
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    position: relative;
  }
  /* Gold pill body spans the full width (minus the circle's right overhang). */
  .site-header .main-nav.stellarnav > ul > li.menu-item-cta .contact-button {
    display: flex; /* defeat `display: none` from the <=320px header rule */
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    height: 54px;
    padding: 0 58px 0 24px; /* reserve the arrow zone on the right */
    border-radius: 140px;
    font-size: 16px;
    font-weight: 700;
    justify-content: center;
  }
  /* Dark circle: bigger than the pill and nudged over its right edge, matching
     the desktop proportions (circle ~1.15x pill height, overlapping). */
  .site-header .main-nav.stellarnav > ul > li.menu-item-cta .arrow-button {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    margin-left: 0;
  }
  /* Use the real arrow.svg (tapered swoosh) like the desktop button, sized to
     match. Clear any mobile overrides so the stock image shows. */
  .site-header .main-nav.stellarnav > ul > li.menu-item-cta .arrow-button img,
  .site-header .main-nav.stellarnav > ul > li.menu-item-cta .arrow-button svg {
    display: block;
    width: 24px;
    height: 24px;
  }

  /* -------- Homepage hero -------- */
  .homepage-hero {
    min-height: 620px;
  }
  .hero-content-column {
    align-items: center;
  }
  .hero-content {
    margin-top: 0;
    padding-top: 90px;
    padding-bottom: 60px;
    max-width: 620px;
  }
  .hero-content h1 {
    /* frozen: font-size: 46px; */
    margin-bottom: 24px;
  }
  .hero-content p {
    margin-right: 0;
  }
  .hero-wordmark {
    font-size: 16.4vw;
  }

  /* -------- Journey collage: give it room, center it -------- */
  .journey-visual-col {
    margin-bottom: 40px;
  }
  /* The ritual photo hangs ~17% of the collage's width below its box, so
     reserve that much underneath or it lands on the stacked copy. */
  .journey-collage {
    max-width: 560px;
    margin: 0 auto 17%;
  }
  .journey-copy blockquote {
    /* frozen: font-size: 32px; */
    margin-left: 0;
  }
  .journey-section .header-contact {
    margin-left: 0;
  }

  /* -------- Invitation -------- */
  .invitation-content p {
    max-width: 100%;
  }

  /* -------- Reflections: drop the interlocking offset, natural heights -------- */
  .reflections-column-offset {
    padding-top: 0;
  }
  .reflections-section .reflection-media,
  .reflections-column-offset .reflection-card:nth-child(1) .reflection-media,
  .reflections-column-offset .reflection-card:nth-child(2) .reflection-media,
  .reflections-section
    .col-lg-6:first-child
    .reflection-card:nth-child(2)
    .reflection-media,
  .reflections-section
    .col-lg-6:first-child
    .reflection-card:nth-child(3)
    .reflection-media {
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .reflections-column-offset .reflection-card,
  .reflection-card {
    float: none;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .reflections-section .col-lg-6:first-child .reflection-card:nth-child(3) {
    max-width: 100%;
  }
  .reflection-card p {
    max-width: none;
  }
  .reflections-section .header-contact {
    float: none;
    margin-top: 10px !important;
    justify-content: flex-start;
  }

  /* -------- Services slider -------- */
  .services-swiper .swiper-slide:nth-child(even) .service-card {
    margin-top: 0;
  }
  .services-leaf {
    width: 240px;
    height: 300px;
  }
  .services-listing .service-media img,
  .service-media img {
    height: 380px;
  }

  /* -------- Events: un-overlap the card stack into a plain two-up row -------- */
  .events-copy-col {
    margin-bottom: 40px;
  }
  .events-panel,
  .events-panel p {
    max-width: 100%;
  }
  /* Tablet & down: the desktop text-over-image overlay doesn't hold up (dark
     title on a dark wash, cropped copy), so switch to clean stacked cards —
     image banner on top, copy on a solid dark panel below. Two per row here;
     the <=768 block stacks them to one column. */
  .events-stack {
    display: flex;
    min-height: 0;
    gap: 20px;
  }
  .event-card {
    position: relative;
    top: 0;
    left: 0;
    right: auto;
    width: 50%;
    height: auto;
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    background: var(--olive);
    box-shadow: 0 10px 26px rgba(46, 53, 4, 0.18);
  }
  .event-card > img {
    position: static;
    width: 100%;
    height: auto;
    /* Match the 600x420 card crop so the photo scales with the card instead of
       being sliced into a short fixed-height strip. */
    aspect-ratio: 10 / 7;
    object-fit: cover;
    border-radius: 0;
  }
  .event-card::after {
    display: none;
  }
  .event-card-body {
    padding: 20px 20px 24px;
  }
  .event-card .event-title,
  .event-card .event-title a {
    color: var(--cream);
  }
  .event-card .event-date {
    color: #efbf7a;
  }
  .event-card-front::before {
    display: none;
  }

  /* -------- Gallery fan: unfan into a wrapped, upright grid -------- */
  .gallery-fan {
    flex-wrap: wrap;
    gap: 24px;
    padding: 30px 20px 50px;
  }
  .gallery-card,
  .gallery-card-left,
  .gallery-card-center,
  .gallery-card-right {
    width: 400px;
    max-width: 400px;
    height: 520px;
    transform: none;
  }
  .gallery-card-body {
    padding: 24px 20px;
  }

  /* -------- Inner banner -------- */
  .inner-banner {
    max-height: 400px;
    min-height: 280px;
  }
  .inner-banner .hero-content h1 {
    /* frozen: font-size: 44px; */
  }

  /* -------- About: story collage, founders, approach -------- */
  .about-story-images {
    margin-top: 30px;
  }
  .about-story-img {
    height: 300px;
  }
  .about-story-img-second {
    margin-top: 60px;
  }
  .about-founder {
    padding: 60px 0;
  }
  .about-founder-images {
    max-width: 520px;
    margin: 0 auto 0px;
    padding-bottom: 0px;
  }
  .about-founder-portrait {
    height: 500px;
  }
  .about-founder-reverse .about-founder-images {
    order: -1;
  }
  .about-founder-reverse .about-founder-accent {
    left: auto;
    right: -18px;
    top: auto;
    bottom: 114px;
  }
  .about-founder-quote {
    margin: 40px 0 24px;
  }
  /* Full column width once stacked — a fixed cap left an empty strip on the
     right at tablet widths. */
  .about-approach-visual {
    margin-bottom: 36px;
  }
  .about-approach-visual img {
    height: 480px;
  }

  /* -------- Private ceremonies -------- */
  .sacred-space-media {
    padding-bottom: 40px;
    padding-right: 40px;
    margin-bottom: 32px;
    max-width: 480px;
  }
  .sacred-space-img-main {
    max-width: 100%;
  }
  .ceremony-included-media {
    margin-bottom: 30px;
  }
  .ceremony-included-media img {
    min-height: 0;
    aspect-ratio: 4 / 5;
    max-height: 520px;
  }
  .ceremony-arrival .post-collage {
    margin-bottom: 0;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
  .journey-process-head .header-contact {
    margin-top: 16px;
  }

  /* -------- Journey CTA banner -------- */
  .journey-cta::before {
    background: linear-gradient(
      to right,
      rgba(46, 53, 4, 0.92) 0%,
      rgba(46, 53, 4, 0.75) 70%,
      rgba(46, 53, 4, 0.5) 100%
    );
  }
  .journey-cta .col-lg-6 {
    max-width: 100%;
  }

  /* -------- Storytelling feature: unwrap the 3-piece overlap -------- */
  .story-feature .row {
    flex-wrap: wrap !important;
  }
  .story-feature-card-col,
  .story-feature-right-col {
    margin-top: 0;
    margin-left: 0;
  }
  .story-feature-img-left,
  .story-feature-img-right {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 520px;
  }
  .story-feature-card {
    min-height: 0;
    margin: -80px 20px 24px;
    padding: 44px 32px;
  }

  /* -------- Blog featured post collage -------- */
  .post-collage {
    margin-bottom: 40px;
    max-width: 520px;
  }
  .featured-post .header-contact {
    justify-content: center;
  }
  .featured-post-copy {
    text-align: center;
  }

  /* -------- Events listing raised card resets -------- */
  .event-listing-card-raised {
    margin-top: 0;
  }

  /* -------- Schedule table copy scale -------- */
  .schedule-table thead th {
    padding: 14px 18px;
    /* frozen: font-size: 20px; */
  }
  .schedule-table tbody td {
    padding: 16px 18px;
    /* frozen: font-size: 15px; */
  }

  /* -------- Contact split -> single column stack -------- */
  .contact-card .section-wrapper {
    padding-left: 0;
    padding-bottom: 0;
  }
  .contact-card .inner-wrapper {
    display: block;
  }
  .contact-card-inner {
    min-height: 0;
    padding-bottom: 40px;
  }
  .contact-image {
    position: relative;
    top: 0;
    width: 100%;
    height: 320px;
    border-radius: 10px 10px 0 0;
  }
  .contact-image img {
    height: 100%;
  }
  .contact-content {
    width: 100%;
    min-height: 0;
    padding: 40px 20px;
  }
  .social-links {
    margin-top: 40px;
  }
  .contact-form {
    position: relative;
    top: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    margin: 0 20px 20px;
  }
  .contact-form .header-contact {
    width: auto;
  }

  /* Footer wordmark scaled for tablet */
  .footer-wordmark {
    font-size: 16.4vw;
  }
}

/* ==========================================================================
   768px — sections go single column
   ========================================================================== */
@media (max-width: 768px) {
  .section-padding {
    padding: 50px 0;
  }

  /* -------- About: founder tags wrap cleanly instead of clipping -------- */
  .about-founder-tags {
    gap: 10px;
    width: 100%;
  }
  .about-founder-tags li {
    padding: 8px 16px;
    /* frozen: font-size: 13px; */
    line-height: 1.3;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: center;
  }

  .header-contact {
    width: auto;
    height: auto;
    justify-content: flex-end;
  }
  /* Hero CTA opts out of the right alignment above — on phones the hero copy
     is left-aligned, so the button reads better flush with it. Scoped to the
     hero only; desktop/tablet keep flex-end from style.css. */
  .homepage-hero .header-contact {
    justify-content: flex-start;
  }
  /* Compact the site-header CTA so it clears the hamburger on phones.
     Scoped to .site-header so in-page CTAs and the form submit are untouched. */
  .site-header .header-contact .contact-button {
    max-width: 150px;
    flex: 0 0 150px;
    height: 52px;
    /* frozen: font-size: 13px; */
    padding-right: 12px;
  }
  .site-header .header-contact .arrow-button {
    width: 52px;
    flex: 0 0 52px;
    height: 52px;
    margin-left: -26px;
  }
  .site-header .arrow-button svg {
    width: 22px;
    height: 22px;
  }

  /* -------- In-page CTA pills step down to match the header's scale --------
     style.css sets a per-section width (219–321px) on .contact-button, so each
     of those selectors is repeated here to win on specificity. The width is
     also capped against the viewport so the pill plus its overlapping arrow
     can never run past the screen edge. */
  .contact-button,
  .invitation-content .contact-button,
  .journey-section .contact-button,
  .homepage-hero .contact-button,
  .reflections-section .contact-button,
  .events-section .contact-button,
  .featured-post .contact-button,
  .gallery-section .contact-button,
  .journey-cta .contact-button,
  .story-collection .story-collection-cta .contact-button {
    max-width: min(240px, calc(100vw - 110px));
    flex: 0 1 auto;
    height: 62px;
    padding-right: 14px;
    /* frozen: font-size: 14px; */
  }
  .arrow-button {
    width: 68px;
    flex: 0 0 68px;
    height: 68px;
    margin-left: -26px;
  }
  .arrow-button svg {
    width: 24px;
    height: 24px;
  }

  /* -------- Contact form submit + its arrow circle -------- */
  .submit-wrapper {
    margin-top: 34px;
  }
  .submit-btn {
    height: 46px;
    min-width: 150px;
    padding: 0 28px 0 20px;
    border-radius: 23px;
    /* frozen: font-size: 14px; */
  }
  .submit-arrow {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    margin-left: -15px;
  }
  .submit-arrow img {
    width: 17px;
    height: 17px;
  }

  /* -------- Lightbox + slider controls -------- */
  .close-btn,
  .prev-btn,
  .next-btn {
    width: 36px;
    height: 36px;
    /* frozen: font-size: 22px; */
  }
  .continue-swiper-nav .swiper-button-prev,
  .continue-swiper-nav .swiper-button-next {
    width: 34px;
    height: 34px;
  }
  .continue-swiper-nav .swiper-button-prev img,
  .continue-swiper-nav .swiper-button-next img {
    width: 16px;
  }

  /* -------- Content images go full width on mobile ------------------------- */
  /* Scoped to content/section image wrappers so logo, arrows, social & other
     UI icons keep their intrinsic size. */
  .reflection-media img,
  .service-media img,
  .event-card > img,
  .gallery-card img,
  .gallery-card-link img,
  .gallery-img,
  .contact-image img,
  .reading-card > img,
  .reading-card > a > img {
    width: 100%;
    height: auto;
  }

  /* -------- Blog featured collage: flatten so it can't cover the copy ------- */
  .post-collage {
    min-height: 0;
    padding-left: 0;
    max-width: 100%;
    overflow: hidden;
    margin-bottom: 40px;
  }
  .post-collage img {
    position: static;
    width: 100%;
    max-width: 100%;
  }
  .post-collage-main {
    height: 320px;
    width: 100%;
  }
  .post-collage-inset {
    position: absolute;
    bottom: 20px;
    right: 20px;
    height: 160px;
    width: 40%;
    max-width: 45%;
    border: 4px solid #fff;
  }

  /* -------- Hero: give copy side padding so it never touches the edge ------- */
  .homepage-hero {
    min-height: 540px;
    /* Mobile-specific hero art (portrait crop). Overrides the inline desktop
       background set in home-hero.php. */
    background-image: url(../img/hero-mobile.png) !important;
    background-position: center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .homepage-hero .container.p-0 {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .hero-content {
    padding-top: 70px;
  }
  .hero-content h1 {
    /* frozen: font-size: 40px; */
  }
  .hero-content p {
    /* frozen: font-size: 15px; */
  }

  /* -------- Inner banner -------- */
  .inner-banner {
    /* Fixed 200px on mobile. */
    aspect-ratio: auto;
    height: 200px;
    max-height: none;
    min-height: 0;
  }
  .inner-banner .hero-content h1 {
    /* frozen: font-size: 38px; */
    margin-bottom: 18px;
  }
  .inner-banner .page-Pagination {
    padding: 10px 14px;
  }
  .inner-banner .page-Pagination .wrapper {
    gap: 8px;
  }
  .inner-banner .page-Pagination .bread-arrow img {
    width: 28px;
    height: auto;
  }

  /* -------- Journey collage: keep the desktop overlapping layout --------
     The collage is proportional (style.css), so it scales down as one unit
     and the overlap/positioning stays identical to desktop on phones too.
     Constrain it to the column width so it can never spill past the viewport. */
  .journey-visual-col {
    margin-bottom: 32px;
  }
  .journey-collage {
    width: 100%;
    max-width: 100%;
    margin: 0 auto 17%;
  }

  /* -------- Events cards: switch from the desktop text-over-image overlay to
     a clean stacked card (image on top, copy below on a solid dark panel). On
     phones the overlay cropped content and the dark title sat on a dark wash,
     so the cards read as one broken image strip. ------------------------- */
  /* Two cards side by side (equal width, equal height) on small tablets;
     they only stack to one column on phones — see the <=575px rule at the
     end of this file. */
  .events-stack {
    flex-direction: row;
    align-items: stretch;
    gap: 20px;
  }
  .event-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    display: block;
    padding: 0;
    overflow: hidden;
    border-radius: 10px;
    background: var(--olive);
    box-shadow: 0 10px 26px rgba(46, 53, 4, 0.18);
  }
  /* Image becomes a normal banner at the top, not an absolute background. */
  .event-card > img {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 10 / 7;
    object-fit: cover;
    border-radius: 0;
  }
  /* Drop the dark gradient wash — copy now sits on the solid panel below. */
  .event-card::after {
    display: none;
  }
  .event-card-body {
    padding: 20px 20px 24px;
  }
  /* Title was dark olive for the light desktop card; on the dark panel it needs
     to be the cream/amber ink. */
  .event-card .event-title,
  .event-card .event-title a {
    color: var(--cream);
  }
  .event-card .event-date {
    color: #efbf7a;
  }

  /* -------- Gallery fan -------- */
  .gallery-intro .section-kicker {
    /* frozen: font-size: 20px; */
  }
  /* First two cards share a row, the third wraps below (centered) */
  .gallery-fan {
    gap: 16px;
  }
  .gallery-card,
  .gallery-card-left,
  .gallery-card-center,
  .gallery-card-right {
    width: calc(50% - 8px);
    max-width: calc(50% - 8px);
    height: 360px;
  }

  /* -------- Services / cards -------- */
  .services-slider-wrap {
    padding: 0 20px;
  }
  .services-intro {
    margin-bottom: 32px;
  }
  .service-media img,
  .services-listing .service-media img {
    height: 340px;
  }

  /* -------- Blog / reading cards -------- */
  .continue-reading {
    margin-top: 45px;
  }
  .reading-card > img,
  .reading-card > a > img {
    height: 190px;
  }
  .reading-card h3 {
    /* frozen: font-size: 20px; */
  }
  .blog-grid .reading-card > img,
  .blog-grid .reading-card > a > img {
    height: 190px;
  }
  .blog-grid .reading-card h3 {
    /* frozen: font-size: 20px; */
  }

  /* -------- Filter buttons wrap and shrink -------- */
  .filter-buttons {
    gap: 12px;
    margin: 20px 0 28px;
  }
  .filter-btn,
  .filter-btn:first-child,
  .blog-archive .filter-btn,
  .blog-archive .filter-btn:first-child {
    height: 44px;
    padding: 0 22px;
    /* frozen: font-size: 16px; */
  }

  /* -------- Portfolio gallery tiles -------- */
  .gallery-item a {
    height: 260px;
  }

  /* -------- Blog featured collage -------- */
  .post-collage {
    min-height: 330px;
  }
  .post-collage-main {
    height: 250px;
  }
  .post-collage-inset {
    height: 195px;
  }
  .featured-post p {
    /* frozen: font-size: 14px; */
  }
  /* Date + "Read the story" row: stack instead of squeezing side-by-side,
     which cramped the date into a 3-line column and pushed the button off-screen. */
  .featured-post-copy .d-flex.justify-content-between {
    flex-direction: column;
    align-items: center !important;
    gap: 16px;
  }
  .featured-post .header-contact {
    width: 100%;
    justify-content: center;
  }
  .featured-post .contact-button {
    flex: 0 1 auto;
  }
  .post-date {
    white-space: nowrap;
  }

  /* -------- Events listing cards -------- */
  .event-showcase-intro {
    margin-bottom: 30px;
    text-align: center;
  }
  .event-showcase-intro .section-kicker {
    padding-right: 0;
    border-right: none;
  }
  .event-listing-card > img {
    height: 250px;
  }
  .event-listing-body {
    margin: -110px 8px 0;
  }

  /* -------- Ceremony schedule: turn the 5-col table into stacked cards ------
     The wide table (min-width 1060px) forced sideways scrolling on phones.
     Each row becomes a card; each cell shows its column name via data-label.
     Uses !important to override the desktop table rules in style.css. */
  .schedule-table-wrap {
    overflow-x: visible;
    border: 0;
    border-radius: 0;
  }
  .schedule-table {
    min-width: 0;
    width: 100%;
    display: block;
  }
  .schedule-table thead {
    /* Column headers are shown per-cell via data-label, so hide the row */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .schedule-table tbody,
  .schedule-table tr,
  .schedule-table td {
    display: block;
    width: auto;
  }
  .schedule-table tr {
    margin-bottom: 16px;
    border: 1px solid var(--divider);
    border-radius: 10px;
    overflow: hidden;
    background: #fbefd8;
  }
  .schedule-table tr:last-child {
    margin-bottom: 0;
  }
  /* First cell (Event name) reads as the card title */
  .schedule-table tbody td:first-child {
    font-family: "Cormorant Garamond", Georgia, serif;
    /* frozen: font-size: 22px; */
    font-weight: 700;
    background: linear-gradient(
      to right,
      rgba(246, 199, 128, 1) 0%,
      rgba(213, 133, 33, 1) 100%
    );
  }
  .schedule-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding: 12px 16px !important;
    border-top: 0;
    border-left: 0 !important;
    border-bottom: 1px solid var(--divider);
    white-space: normal;
    text-align: right;
  }
  .schedule-table tbody td:last-child {
    border-bottom: 0;
  }
  .schedule-table tbody td:first-child::before {
    content: none;
  }
  .schedule-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-weight: 600;
    text-align: left;
    color: var(--olive);
    opacity: 0.75;
  }

  /* -------- Blog detail -------- */
  .blog-detail-featured-image {
    height: auto;
    aspect-ratio: 2.06 / 1;
  }
  .blog-detail-copy {
    /* frozen: font-size: 14px; */
  }

  /* -------- Process steps: connectors already hidden below 768 via style.css -------- */
  .process-step {
    max-width: none;
    margin-bottom: 34px;
  }
  .process-step-mid {
    margin-top: 0;
  }

  /* -------- About meet grid: single column, drop the vertical dividers -------- */
  .about-meet-item {
    padding-top: 0;
    margin-bottom: 34px;
  }
  .about-meet-item::before {
    display: none;
  }
  .about-meet-grid .col-12:last-child .about-meet-item {
    margin-bottom: 0;
  }

  /* -------- Footer -------- */
  .footer-main {
    height: auto;
    padding-bottom: 0;
  }
  .footer-logo {
    margin-bottom: 7px;
  }
  .footer-nav {
    flex-wrap: wrap;
    padding: 0 20px;
    margin: 20px 0;
  }
  .footer-nav a {
    padding: 8px 10px;
    /* frozen: font-size: 16px; */
  }
  .footer-nav a::after {
    right: 11px;
    left: 11px;
    bottom: -3px;
  }
  .footer-nav a + a::before {
    display: none;
  }
  .footer-legal {
    padding: 16px 0;
    /* frozen: font-size: 15px; */
    text-align: center;
  }
  .footer-legal .row {
    row-gap: 8px;
  }
  .footer-legal-links {
    margin-top: 4px;
  }
  .footer-wordmark {
    font-size: 16.4vw;
    letter-spacing: normal;
  }
}

/* ==========================================================================
   480px — phone
   ========================================================================== */
@media (max-width: 480px) {
  .section-padding {
    padding: 42px 0;
  }
  .section-title {
    /* frozen: font-size: clamp(28px, 8vw, 36px) !important; */
  }
  .section-kicker {
    /* frozen: font-size: 20px; */
  }

  /* -------- Header CTA even more compact (scoped to the site header) -------- */
  .site-logo {
    width: 120px;
    top: -6px;
  }
  .site-header .header-contact .contact-button {
    max-width: 128px;
    flex: 0 0 128px;
    height: 46px;
    /* frozen: font-size: 12px; */
  }
  .site-header .header-contact .arrow-button {
    width: 46px;
    flex: 0 0 46px;
    height: 46px;
    margin-left: -23px;
  }

  /* -------- In-page CTA pills take a second step down -------- */
  .contact-button,
  .invitation-content .contact-button,
  .journey-section .contact-button,
  .homepage-hero .contact-button,
  .reflections-section .contact-button,
  .events-section .contact-button,
  .featured-post .contact-button,
  .gallery-section .contact-button,
  .journey-cta .contact-button,
  .story-collection .story-collection-cta .contact-button {
    max-width: min(210px, calc(100vw - 96px));
    height: 56px;
    padding-right: 12px;
    /* frozen: font-size: 13px; */
  }
  .arrow-button {
    width: 58px;
    flex: 0 0 58px;
    height: 58px;
    margin-left: -22px;
  }
  .arrow-button svg {
    width: 20px;
    height: 20px;
  }
  .submit-btn {
    height: 42px;
    padding: 0 22px 0 18px;
    border-radius: 21px;
    /* frozen: font-size: 13px; */
  }
  .submit-arrow {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    margin-left: -13px;
  }
  .submit-arrow img {
    width: 15px;
    height: 15px;
  }

  /* -------- Hero -------- */
  .homepage-hero {
    min-height: 480px;
  }
  .hero-content {
    padding-top: 56px;
    padding-bottom: 40px;
  }
  .hero-content h1 {
    /* frozen: font-size: 33px; */
    margin-bottom: 18px;
  }
  .hero-content p {
    /* frozen: font-size: 14px; */
  }
  .hero-wordmark {
    font-size: 16.4vw;
    letter-spacing: normal;
  }

  /* -------- Inner banner -------- */
  .inner-banner {
    aspect-ratio: auto;
    height: 200px;
    max-height: none;
    min-height: 0;
  }
  .inner-banner .hero-content h1 {
    /* frozen: font-size: 30px; */
  }
  .inner-banner .page-Pagination a,
  .inner-banner .page-Pagination span {
    /* frozen: font-size: 14px; */
  }
  .inner-banner .page-Pagination .bread-arrow img {
    width: 22px;
  }

  .journey-copy blockquote {
    /* frozen: font-size: 27px; */
    margin-left: 0;
    padding-left: 16px;
  }

  /* -------- Invitation -------- */
  .invitation-content {
    padding: 40px 4px;
  }
  .invitation-content p {
    /* frozen: font-size: 14px; */
  }

  /* -------- Reflections -------- */
  .reflection-title {
    /* frozen: font-size: 25px; */
  }

  /* -------- Services -------- */
  .service-media img,
  .services-listing .service-media img {
    height: 300px;
  }

  /* -------- Events -------- */
  .events-panel {
    padding: 36px 24px;
  }
  .events-panel p {
    /* frozen: font-size: 15px; */
    line-height: 1.7;
  }
  .event-card {
    /* height auto — stacked card sizes to its content (see <=768 block). */
    height: auto;
  }

  /* -------- Gallery fan -------- */
  .gallery-card,
  .gallery-card-left,
  .gallery-card-center,
  .gallery-card-right {
    width: 100%;
    max-width: 100%;
    height: 400px;
    border-width: 5px;
  }
  .gallery-card-title {
    /* frozen: font-size: 22px; */
  }

  /* -------- Portfolio tiles -------- */
  .gallery-item a {
    height: 200px;
  }

  /* -------- Filter buttons -------- */
  .filter-buttons {
    gap: 8px;
  }
  .filter-btn,
  .filter-btn:first-child,
  .blog-archive .filter-btn,
  .blog-archive .filter-btn:first-child {
    height: 40px;
    padding: 0 16px;
    /* frozen: font-size: 14px; */
  }

  /* -------- Blog featured collage -------- */
  /* On phones the absolute collage escaped its column and covered the copy.
     Flatten it: main image is a normal block, inset floats in its corner. */
  .post-collage {
    min-height: 0;
    padding-left: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .post-collage img {
    position: static;
    width: 100%;
    max-width: 100%;
  }
  .post-collage-main {
    height: 260px;
    width: 100%;
  }
  .post-collage-inset {
    position: absolute;
    bottom: 16px;
    right: 16px;
    height: 130px;
    width: 42%;
    max-width: 45%;
    border: 3px solid #fff;
  }
  .post-date {
    height: 38px;
    padding: 0 16px;
    /* frozen: font-size: 13px; */
  }
  .ceremony-arrival .post-collage-inset {
    top: 24px;
    width: 42%;
  }
  .ceremony-arrival .journey-copy blockquote {
    margin-left: 0;
    /* frozen: font-size: 26px; */
  }

  /* -------- About -------- */
  .about-story-images {
    gap: 14px;
  }
  .about-story-img {
    width: calc(50% - 7px);
    height: 220px;
  }
  .about-story-img-second {
    margin-top: 40px;
  }
  .about-story-copy p,
  .about-founder-copy p,
  .about-meet-intro p,
  .about-meet-item p,
  .about-approach-list p {
    /* frozen: font-size: 14px; */
  }
  .about-meet-item h3,
  .about-approach-list h3 {
    /* frozen: font-size: 26px; */
  }
  .about-founder-portrait {
    height: 420px;
    max-width: 100%;
  }
  /* Sit the inset lower on the shorter phone portrait so it overlaps the
     shoulder area rather than the face. */
  .about-founder-accent,
  .about-founder-reverse .about-founder-accent {
    width: 130px;
    height: 180px;
    right: 0;
    bottom: 70px;
  }
  .about-founder-tags {
    gap: 12px;
  }
  .about-approach-number {
    /* frozen: font-size: 48px; */
  }
  .about-approach-list li {
    gap: 18px;
    padding: 18px 0;
  }
  .about-approach-visual img {
    height: 380px;
  }

  /* -------- Story feature card -------- */
  .story-feature-card {
    margin: -60px 12px 20px;
    padding: 34px 22px;
  }
  .story-feature-card p {
    /* frozen: font-size: 14px; */
  }

  /* -------- Event listing -------- */
  .event-listing-card > img {
    height: 240px;
  }
  .event-listing-body {
    margin: -100px 10px 0;
  }
  /* The location line can be long — let it wrap instead of being clipped by
     the card's nowrap default. (Date + time already wrap via the base style.) */
  .event-listing-place {
    white-space: normal;
    align-items: flex-start;
  }
  .event-listing-place img {
    margin-top: 3px;
  }

  /* -------- Testimonials -------- */
  .testimonial-text {
    /* frozen: font-size: 14px; */
    margin-bottom: 32px;
  }
  .testimonial-author img {
    width: 60px;
    height: 60px;
  }
  .testimonial-name {
    /* frozen: font-size: 18px; */
  }
  .testimonial-role {
    /* frozen: font-size: 15px; */
  }

  /* -------- Included cards -------- */
  .ceremony-included-intro {
    margin-bottom: 32px;
  }
  .included-card {
    padding: 24px 22px;
  }
  .included-card-title {
    /* frozen: font-size: 21px; */
  }

  /* -------- Journey CTA -------- */
  .journey-cta p {
    /* frozen: font-size: 14px; */
    margin-bottom: 24px;
  }

  /* -------- Contact -------- */
  .contact-content {
    padding: 30px 16px;
  }
  .contact-form {
    margin: 0 12px 16px;
    padding: 26px 20px 24px;
  }
  .contact-image {
    height: 230px;
  }
  .contact-info h2 {
    /* frozen: font-size: 28px; */
  }
  .contact-info > p {
    /* frozen: font-size: 16px; */
  }
  .contact-detail p {
    /* frozen: font-size: 16px; */
  }
  /* Address stays on one line, so scale it down rather than overflow. */
  div.contact-detail p {
    /* font-size: clamp(10px, 3.1vw, 16px); */
    /* frozen: font-size: 16px; */
  }
  .contact-details {
    margin-top: 28px;
  }
  .social-links {
    flex-wrap: wrap;
    margin-top: 28px;
  }
  .submit-btn {
    min-width: 0;
    flex: 1;
  }
  .contact-card .section-wrapper {
    padding-bottom: 20px;
  }

  /* -------- Reading cards -------- */
  .reading-card > img,
  .reading-card > a > img {
    height: 190px;
  }
  .reading-card-body > span,
  .reading-card p,
  .reading-card-meta {
    /* frozen: font-size: 12px; */
  }

  /* -------- Footer -------- */
  .footer-nav a {
    /* frozen: font-size: 14px; */
    padding: 6px 9px;
  }
  .footer-socials {
    flex-wrap: wrap;
  }
  .footer-wordmark {
    font-size: 16.4vw;
    letter-spacing: normal;
  }
  .footer-legal {
    /* frozen: font-size: 13px; */
  }
}

/* ==========================================================================
   320px — small phone
   ========================================================================== */
@media (max-width: 320px) {
  .section-title {
    /* frozen: font-size: 26px !important; */
  }

  /* Header — the logo shrinks here so the labelled CTA still fits beside it
     and the hamburger. Keep "Contact Us" visible (the drawer copy stays too). */
  .site-logo {
    width: 96px;
  }
  .site-header .header-contact .contact-button {
    display: none; /* legacy: label hidden on tiny screens */
  }
  .site-header .header-contact .arrow-button {
    width: 46px;
    flex: 0 0 46px;
    height: 46px;
    margin-left: 0;
  }

  /* Hero */
  .homepage-hero {
    min-height: 440px;
  }
  .hero-content h1 {
    /* frozen: font-size: 28px; */
  }
  .hero-content p {
    /* frozen: font-size: 13px; */
  }

  /* Inner banner */
  .inner-banner {
    aspect-ratio: auto;
    height: 200px;
    max-height: none;
    min-height: 0;
  }
  .inner-banner .hero-content h1 {
    /* frozen: font-size: 26px; */
  }

  /* Journey collage: stacked grid handles sizing (see 768px) */

  /* Cards / media heights */
  .gallery-card,
  .gallery-card-left,
  .gallery-card-center,
  .gallery-card-right {
    height: 360px;
  }
  .gallery-item a {
    height: 170px;
  }
  .service-media img,
  .services-listing .service-media img {
    height: 260px;
  }
  .event-card {
    height: auto;
  }
  .about-founder-portrait {
    height: 360px;
  }
  .about-approach-visual img {
    height: 320px;
  }

  /* Filter buttons — stack full width so labels never clip */
  .filter-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-btn,
  .filter-btn:first-child,
  .blog-archive .filter-btn,
  .blog-archive .filter-btn:first-child {
    width: 100%;
  }

  /* Contact */
  .contact-info h2 {
    /* frozen: font-size: 24px; */
  }
  .contact-form h3 {
    /* frozen: font-size: 25px; */
  }
  .submit-wrapper {
    margin-top: 32px;
  }

  /* Footer */
  .footer-nav a {
    /* frozen: font-size: 13px; */
    padding: 5px 7px;
  }
  .footer-socials a {
    width: 44px;
    height: 44px;
  }
  .footer-wordmark {
    font-size: 16.4vw;
    letter-spacing: normal;
  }
}

/* ==========================================================================
   Mobile button fit-up
   Closes the gaps left by the 768/480/320 passes above. Everything here is
   inside a max-width query, so desktop sizing and all button styling
   (gradients, radii, hover swaps) are untouched.
   ========================================================================== */

@media (max-width: 768px) {
  /* The CTA pill + overlapping arrow live in .header-contact. style.css nests
     a fixed `width: 336px` under .contact-form and .journey-cta, which beats
     the `width: auto` reset above on specificity and forces a 336px box on
     phones — wider than a 320–360px viewport once container padding is added.
     Let the row size to its contents and wrap instead of overflowing. */
  .contact-form .header-contact,
  .journey-cta .header-contact,
  .events-panel .header-contact {
    width: auto;
    max-width: 100%;
    height: auto;
    flex-wrap: nowrap;
  }

  /* Nothing in a CTA row may push past the viewport. In-page CTAs follow the
     copy above them (left) unless their section centres them. */
  .header-contact {
    max-width: 100%;
    justify-content: flex-start;
  }

  /* Invitation follows the journey section, whose own bottom padding already
     separates them — drop the stacked top padding so the gap isn't tripled. */
  .invitation-section.section-padding {
    padding-top: 0;
  }
  .invitation-content {
    padding-top: 30px;
    padding-bottom: 10px; /* the next section's top padding does the rest */
  }
  /* The stars are pinned in px from the section top, so lift them with it. */
  .invitation-section::before {
    top: 173px;
  }
  .invitation-section::after {
    top: 4px;
    right: 24px;
    font-size: 48px;
  }

  /* Events heading keeps its own line break (dark line / gold line), so the
     type scales until the longer gold line fits the phone width. */
  .events-intro .section-title {
    font-size: clamp(19px, 6.3vw, 30px);
  }

  /* Events panel: copy and CTA centred inside the dark card. */
  .events-panel {
    text-align: center;
  }
  .events-panel p {
    margin-right: auto;
    margin-left: auto;
  }
  .events-panel .header-contact {
    justify-content: center;
  }

  /* Gallery: the heading's margin alone separates it from the cards. */
  .gallery-intro {
    margin-bottom: 24px;
  }
  .gallery-fan {
    padding-top: 0;
  }
  .gallery-card-title {
    font-size: 22px;
  }

  /* Footer: menu, social discs and legal bar scaled down for phones. */
  .footer-nav a {
    display: inline-block; /* so the vertical padding spaces the wrapped rows */
    padding: 6px 9px;
    font-size: 15px;
    line-height: 18px;
  }
  /* Active/hover underline sits inside the link's padding, clear of the
     row below. */
  .footer-nav a::after {
    bottom: 2px;
  }
  /* No dividers between menu items once the menu wraps onto two lines. */
  .footer-nav li + li a::before {
    display: none;
  }
  .footer-socials {
    gap: 10px;
  }
  .footer-socials a {
    width: 40px;
    height: 40px;
  }
  .footer-socials a img {
    height: 16px;
  }
  .footer-socials a img.footer-contact-icon {
    height: 22px;
  }
  .footer-legal {
    min-height: 0;
    font-size: 14px;
  }
  /* Once copyright and links stack, centre each line like the rest of the
     footer (overrides Bootstrap's !important justify-content-between). */
  .footer-legal .row {
    justify-content: center !important;
  }

  /* About story heading: the gold phrase flows inline after the dark one
     ("Born from lived experience / not theory") and wraps naturally. */
  .about-story .section-title {
    font-size: clamp(26px, 8vw, 34px);
  }

  /* About "meet" heading: dark phrase / gold phrase on two lines. The desktop
     line break is ignored and the type scaled so the gold line fits. */
  .about-meet-intro .section-title {
    font-size: clamp(20px, 6.8vw, 30px);
  }
  .about-meet-intro .section-title span {
    display: block;
  }
  .about-meet-intro .section-title br {
    display: none;
  }

  /* About "meet" points stack into one column — centre them under the
     centred heading above. */
  .about-meet-item {
    text-align: center;
  }
  .about-meet-item p {
    margin-right: auto;
    margin-left: auto;
  }

  /* About approach: the title has no bottom margin (the optional subtitle
     normally supplies it), so when it's the last thing in its column give it
     room before the image. */
  .about-approach .section-title:last-child {
    margin-bottom: 24px;
  }
  /* Step numbers (01, 02, 03) scaled down beside the copy. */
  .about-approach-number {
    min-width: 46px; /* "01" and "02" differ in width; keep the copy aligned */
    font-size: 44px;
  }
  .about-approach-list li {
    gap: 16px;
  }
  /* Tighter title-to-copy gap: the title's 12px margin is enough here. */
  .about-approach-list p {
    margin-top: 0;
  }

  /* Two-photo collage (service sacred space / ceremony arrival, blog feature):
     keep the desktop overlapping layout on phones instead of flattening it.
     The box holds the desktop proportions (437 x 593) and both photos are
     placed in % of it, so the whole collage scales down as one unit. */
  .post-collage {
    min-height: 0;
    height: auto;
    aspect-ratio: 437 / 593;
    padding-left: 0;
    max-width: 437px;
    margin-right: auto;
    margin-left: auto;
    overflow: visible;
  }
  .post-collage .post-collage-main {
    position: absolute;
    top: 0;
    right: auto;
    left: 0;
    width: 92%;
    max-width: none;
    height: 100%;
  }
  .post-collage .post-collage-inset {
    position: absolute;
    top: auto;
    right: 0;
    bottom: 8.3%;
    left: auto;
    width: 39.8%;
    max-width: none;
    height: 40.3%;
    border: 0;
  }
  /* Mirrored variant: main photo right, inset over its top-left edge. */
  .ceremony-arrival .post-collage .post-collage-main {
    right: 0;
    left: auto;
  }
  .ceremony-arrival .post-collage .post-collage-inset {
    top: 8.1%;
    right: auto;
    bottom: auto;
    left: 0;
  }

  /* Service "sacred space": the collage's 40px margin stacked on Bootstrap's
     g-5 row gutter (48px) once the columns stack; keep one modest gap. */
  .sacred-space .row {
    --bs-gutter-y: 28px;
  }
  .sacred-space .post-collage {
    margin-bottom: 0;
  }

  /* Service process heading + CTA centred over the centred steps, without
     the kicker's divider line. */
  .journey-process-head {
    text-align: center;
  }
  .journey-process-head .section-kicker {
    padding-right: 0;
    border-right: none;
  }
  .journey-process-head .header-contact {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
  }

  /* Service process steps: smaller number badge. Also make each step a
     column flexbox so style.css's `order: -1` actually lifts the middle
     step's badge above its copy, matching the other steps. */
  .process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .process-step-number,
  .process-step-mid .process-step-number {
    width: 72px;
    height: 64px;
    margin: 0 0 16px;
    border-radius: 10px;
    font-size: 56px;
  }
  .process-step-number span {
    top: -7px;
  }

  /* Related / continue-reading block on single pages: the section above
     already ends with its own padding, so drop the extra 45px, and lift the
     heading off its 22px clamp floor. */
  .continue-reading {
    margin-top: 0;
  }
  .continue-reading h2 {
    font-size: 28px;
  }

  /* Blog / story detail title: style.css pins it at 50px !important. */
  .blog-section .section-title {
    font-size: 34px !important;
  }

  /* Gallery grid: style.css fixes each tile's wrapper at 250px while the
     image link is shorter on phones (260/200/170px), leaving blank space
     under every row. Let the wrapper hug the image. */
  .gallery-item {
    height: auto;
  }
  /* A blanket mobile rule sets .gallery-img to height:auto, so the photo
     stopped filling its fixed-height link and left a strip under it. */
  .gallery-item .gallery-img {
    height: 100%;
  }

  /* Hero overlay: on phones the copy spans the full width over the busiest
     part of the photo, so the wash covers the whole banner, a little
     stronger where the text sits. */
  .homepage-hero::before {
    background: linear-gradient(
      to bottom,
      rgba(20, 24, 2, 0.25) 0%,
      rgba(20, 24, 2, 0.5) 30%,
      rgba(20, 24, 2, 0.5) 75%,
      rgba(20, 24, 2, 0.2) 100%
    );
  }

  /* Contact: style.css keeps the desktop 83px gap under the intro heading. */
  .contact-intro {
    margin-bottom: 28px;
  }
  /* Card's own 40px bottom padding plus the section padding left a wide
     gap above the footer. */
  .contact-card-inner {
    padding-bottom: 0;
  }
  .contact-card.section-padding {
    padding-bottom: 24px;
  }
  /* Form submit pill + arrow centred under the fields. */
  .contact-form .header-contact {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
  }

  /* "What is included" cards: icon, title and copy centred. */
  .included-card {
    text-align: center;
  }
  .included-card-icon {
    margin-right: auto;
    margin-left: auto;
  }

  /* Service card titles: clamp() bottoms out at 16px on phones — lift them. */
  .service-title {
    font-size: 22px;
    line-height: 1.15;
  }

  /* Reading cards: the 11px tag and excerpt (style.css) are too small to
     read on a phone; the story grid also gets air between tag and title. */
  .reading-card-body > span {
    font-size: 14px;
  }
  .reading-card p {
    font-size: 15px;
    line-height: 1.45;
  }
  .story-collection .blog-grid .reading-card h3 {
    margin-top: 10px;
  }
  .story-collection .reading-card-body {
    min-height: 0;
    padding-bottom: 26px;
  }
  .story-collection .blog-grid .reading-card p {
    margin-bottom: 0;
  }

  /* Storytelling: the journey section's bottom padding already separates it
     from the CTA band, so drop the band's extra 70px top margin. */
  .post-type-archive-storytelling .journey-cta {
    margin-top: 0;
  }
  /* Less gap between the CTA band and the footer logo below it. */
  .journey-cta {
    margin-bottom: 16px;
  }

  /* CTA band (dark image strip): heading, copy and button centred. */
  .journey-cta {
    text-align: center;
  }
  .journey-cta p {
    margin-right: auto;
    margin-left: auto;
  }
  .journey-cta .header-contact {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
  }

  /* Journey CTA: centred under the pull quote, with clear air above it. */
  .journey-section .header-contact {
    justify-content: center;
    margin: 40px auto 0;
  }
  /* Reflections CTA: centred under the stacked cards. */
  .reflections-section .header-contact {
    justify-content: center;
    margin-right: auto;
    margin-left: auto;
  }

  /* The pill sizes to its label instead of a fixed width, and its padding
     keeps the label clear of the arrow circle that overlaps its right end.
     Long labels wrap rather than clip. Declared after the 768/480 passes so
     it wins at every phone width. */
  .contact-button,
  .invitation-content .contact-button,
  .journey-section .contact-button,
  .homepage-hero .contact-button,
  .reflections-section .contact-button,
  .events-section .contact-button,
  .featured-post .contact-button,
  .gallery-section .contact-button,
  .journey-cta .contact-button,
  .story-collection .story-collection-cta .contact-button {
    flex: 0 1 auto;
    width: auto;
    min-width: 150px;
    max-width: none;
    padding: 0 40px 0 26px;
    line-height: 1.2;
    text-align: center;
  }

  /* Gallery CTA row centres like the other in-page CTAs. */
  .gallery-cta {
    display: flex;
    justify-content: center;
    max-width: 100%;
  }

  /* Load-more inherits bare .contact-button sizing; keep it from stretching. */
  .allowance-load-more.contact-button {
    flex: 0 1 auto;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* Lightbox + slider controls take a second step down so they sit clear of
     the image edges on a narrow screen. */
  .close-btn,
  .prev-btn,
  .next-btn {
    width: 32px;
    height: 32px;
    /* frozen: font-size: 19px; */
  }
  .continue-swiper-nav .swiper-button-prev,
  .continue-swiper-nav .swiper-button-next {
    width: 30px;
    height: 30px;
  }
  .continue-swiper-nav .swiper-button-prev img,
  .continue-swiper-nav .swiper-button-next img {
    width: 14px;
  }
}

@media (max-width: 320px) {
  /* Smallest phones: the pill keeps its label but gives up fixed width so the
     pill + arrow pair fits the 320px viewport. */
  .contact-button,
  .invitation-content .contact-button,
  .journey-section .contact-button,
  .homepage-hero .contact-button,
  .reflections-section .contact-button,
  .events-section .contact-button,
  .featured-post .contact-button,
  .gallery-section .contact-button,
  .journey-cta .contact-button,
  .story-collection .story-collection-cta .contact-button {
    min-width: 120px;
    height: 50px;
    padding: 0 32px 0 20px;
    /* frozen: font-size: 12px; */
  }
  .arrow-button {
    width: 50px;
    flex: 0 0 50px;
    height: 50px;
    margin-left: -20px;
  }
  .arrow-button svg {
    width: 18px;
    height: 18px;
  }

  /* Form submit: .submit-btn is `flex: 1` at this width, so only the vertical
     scale and the arrow circle still need stepping down. */
  .submit-btn {
    height: 40px;
    padding: 0 18px 0 14px;
    border-radius: 20px;
    /* frozen: font-size: 12px; */
  }
  .submit-arrow {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    margin-left: -12px;
  }
  .submit-arrow img {
    width: 14px;
    height: 14px;
  }

  /* Filter pills already stack full width above; just trim their height. */
  .filter-btn,
  .filter-btn:first-child,
  .blog-archive .filter-btn,
  .blog-archive .filter-btn:first-child {
    height: 38px;
    padding: 0 14px;
    /* frozen: font-size: 13px; */
  }

  /* Lightbox + slider controls */
  .close-btn,
  .prev-btn,
  .next-btn {
    width: 30px;
    height: 30px;
    /* frozen: font-size: 18px; */
  }
  .continue-swiper-nav .swiper-button-prev,
  .continue-swiper-nav .swiper-button-next {
    width: 28px;
    height: 28px;
  }
}

/* ==========================================================================
   Single event — detail layout (mobile)
   ========================================================================== */
@media (max-width: 991px) {
  .event-single-meta {
    padding: 24px;
  }
}

@media (max-width: 768px) {
  .event-single-copy {
    margin-top: 20px;
  }
  .event-single-meta {
    padding: 20px;
  }
  .event-single-meta-list li {
    margin-bottom: 12px;
    padding-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .event-single-meta {
    padding: 18px;
  }
  .event-single-copy p,
  .event-single-meta-list li,
  .event-registration p {
    /* frozen: font-size: 14px; */
  }
}

/* ==========================================================================
   Home services slider (phones)
   One card per view (theme.js); the wrapper's even side padding centres it,
   and clipping the track hides the neighbours so both margins match.
   ========================================================================== */
@media (max-width: 575.98px) {
  .services-slider-wrap {
    padding: 0 20px;
  }
  .services-swiper {
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   Invitation CTA — the label ("Explore The Experiences") is editable and
   long, so a fixed-width pill let it run under the overlapping arrow circle.
   Size the pill to its label and reserve the circle's overlap (35px desktop,
   26px <=768) plus breathing room on the right. Kept last so it outranks the
   per-breakpoint widths above; capped to the viewport so it never overflows.
   -------------------------------------------------------------------------- */
.invitation-content .contact-button {
  flex: 0 1 auto;
  width: auto;
  max-width: calc(100vw - 110px);
  padding-left: 36px;
  padding-right: 56px;
}
@media (max-width: 768px) {
  .invitation-content .contact-button {
    padding-left: 22px;
    padding-right: 40px;
  }
}

/* --------------------------------------------------------------------------
   About founders — on phones the accent phrase wraps, and the gradient's pale
   gold stop (#f6c780) lands mid-word over the light textured background, so
   parts of the heading wash out. Use a deeper amber-only gradient and repeat
   it per line (clone) so every line stays legible.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .about-founder .section-title span {
    background: linear-gradient(
      to right,
      rgba(213, 133, 33, 1) 0%,
      rgba(232, 156, 58, 1) 50%,
      rgba(196, 115, 20, 1) 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }
}

/* --------------------------------------------------------------------------
   Homepage hero — the "ALLOWANCE" wordmark is pinned to the bottom of the
   hero (absolute, 16.4vw type at 0.76 line-height ≈ 12.5vw tall) but nothing
   reserved room for it, so the CTA could land on top of it. Pad the copy by
   the wordmark's height plus a gap; the hero grows instead of overlapping.
   Kept last so it outranks the per-breakpoint padding above.
   -------------------------------------------------------------------------- */
.hero-content {
  padding-bottom: calc(12.5vw + 32px);
}

/* Home events cards — one column on phones (two per row above 575px). */
@media (max-width: 575.98px) {
  .events-stack {
    flex-direction: column;
    gap: 24px;
  }
  .event-card {
    flex: 0 0 auto;
    width: 100%;
  }
}