:root {
        color-scheme: light;
        /* Bright daytime white used as the main page background */
        --serenity-cream: #ffffff;
        --serenity-rose: #e4c7bc;
        --serenity-sage: #5b7b6b;
        --serenity-deep: #1f2c2f;
        --serenity-gold: #c89b5c;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont;
        background: var(--serenity-cream);
        color: var(--serenity-deep);
      }

      .page-shell {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(31, 44, 47, 0.08);
      }

      /* On specific pages, make header non-sticky so it never overlaps the page title or dropdowns */
      .lessons-page header,
      .gallery-page header,
      .terms-page header,
      .faq-page header,
      .lessons-page .site-header,
      .gallery-page .site-header,
      .terms-page .site-header,
      .faq-page .site-header {
        position: static;
      }

      /* New responsive header (index.html first) */

      :root {
        /* Slightly more compact mobile header so it doesn't dominate vertical space */
        --header-height-mobile: 56px;
        --header-height-desktop: 80px;
        --header-height-scrolled: 70px;
        --header-transition-speed: 0.3s;
        --header-transition-ease: ease;
      }

      .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        height: var(--header-height-mobile);
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: height var(--header-transition-speed) var(--header-transition-ease),
          box-shadow var(--header-transition-speed) var(--header-transition-ease),
          background var(--header-transition-speed) var(--header-transition-ease);
      }

      .site-header.header--scrolled {
        height: var(--header-height-scrolled);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        background: #ffffff;
      }

      .header-container {
        max-width: 1400px;
        margin: 0 auto;
        height: 100%;
        padding: 0 0.75rem;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0.5rem;
      }

      .skip-link {
        position: absolute;
        left: 0.75rem;
        top: -40px;
        padding: 0.5rem 0.75rem;
        background: #ffffff;
        color: #2c2416;
        border-radius: 4px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
        text-decoration: none;
        font-size: 0.85rem;
        z-index: 1010;
      }

      .skip-link:focus-visible {
        top: 0.75rem;
      }

      .header-hamburger {
        width: 44px;
        height: 44px;
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(44, 36, 22, 0.18);
        background: #ffffff;
        cursor: pointer;
      }

      .header-hamburger span {
        width: 18px;
        height: 2px;
        border-radius: 999px;
        background: #2c2416;
        transition: transform 0.25s ease, opacity 0.25s ease;
      }

      .site-header.is-menu-open .header-hamburger span:nth-child(1) {
        transform: translateY(3px) rotate(45deg);
      }

      .site-header.is-menu-open .header-hamburger span:nth-child(2) {
        opacity: 0;
      }

      .site-header.is-menu-open .header-hamburger span:nth-child(3) {
        transform: translateY(-3px) rotate(-45deg);
      }

      .header-logo {
        justify-self: flex-start;
        display: inline-flex;
        align-items: center;
      }

      .header-logo img {
        display: block;
        max-width: 160px;
        max-height: 64px;
        height: auto;
        transition: transform var(--header-transition-speed) var(--header-transition-ease);
      }

      .site-header.header--scrolled .header-logo img {
        transform: scale(0.95);
      }

      .header-actions {
        display: inline-flex;
        align-items: center;
        gap: 0.6rem;
        justify-self: end;
      }

      .header-book {
        /* Visible on mobile as well: compact pill-shaped button */
        display: inline-flex;
        text-decoration: none;
        padding: 0.6rem 1.25rem;
        border-radius: 999px;
        background: #2c2416;
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
      }

      .header-book:hover,
      .header-book:focus-visible {
        background: #d4a574;
        transform: scale(1.02);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
      }

      .header-search {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        border: 1px solid rgba(44, 36, 22, 0.18);
        background: #ffffff;
        cursor: pointer;
      }

      .header-search svg {
        width: 20px;
        height: 20px;
        stroke: #2c2416;
        stroke-width: 2;
        fill: none;
        transition: stroke 0.3s ease;
      }

      .header-search:hover svg,
      .header-search:focus-visible svg {
        stroke: #d4a574;
      }

      .header-nav {
        display: none;
      }

      .header-nav ul {
        list-style: none;
        display: flex;
        gap: 2rem;
        margin: 0;
        padding: 0;
        justify-content: center;
      }

      .header-nav a {
        text-decoration: none;
        font-size: 0.88rem;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: #2c2416;
        position: relative;
        padding-bottom: 0.25rem;
        transition: color 0.3s ease;
      }

      .header-nav a::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: 999px;
        background: #d4a574;
        transform: scaleX(0);
        transform-origin: center;
        transition: transform 0.3s ease;
      }

      .header-nav a:hover,
      .header-nav a:focus-visible {
        color: #d4a574;
      }

      .header-nav a:hover::after,
      .header-nav a:focus-visible::after,
      .header-nav a[aria-current='page']::after {
        transform: scaleX(1);
      }

      /* Mobile dropdown menu (anchored under header, solid background) */

      .header-mobile-menu {
        /* Fixed full-screen overlay so it is always visible on mobile */
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: transparent;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.2s ease-out, transform 0.2s ease-out;
        z-index: 2500;
      }

      .header-mobile-menu.is-open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .header-mobile-inner {
        width: 100%;
        max-width: none;
        /* Solid white panel that starts just below the header */
        background: #ffffff;
        max-height: 100vh;
        padding: calc(var(--header-height-mobile) + 0.75rem) 1.25rem 1.25rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        overflow-y: auto;
        display: flex;
        flex-direction: column;
      }

      .header-mobile-close {
        align-self: flex-end;
        width: 44px;
        height: 44px;
        border-radius: 999px;
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1.6rem;
        line-height: 1;
        color: #2c2416;
      }

      .header-mobile-close span {
        display: inline-block;
        transform: translateY(-2px);
      }

      .header-mobile-nav {
        margin-top: 1rem;
        flex: 1;
      }

      .header-mobile-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
      }

      .header-mobile-nav li + li {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
      }

      .header-mobile-nav a {
        display: block;
        padding: 0.9rem 0;
        font-size: 1.05rem;
        text-decoration: none;
        color: #2c2416;
      }

      .header-mobile-nav a:hover,
      .header-mobile-nav a:focus-visible {
        background: rgba(212, 165, 116, 0.16);
      }

      .header-mobile-book {
        margin-top: 1.25rem;
        display: block;
        width: 100%;
        text-align: center;
        padding: 1rem 1.25rem;
        border-radius: 10px;
        background: #2c2416;
        color: #ffffff;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
      }

      .header-mobile-book:hover,
      .header-mobile-book:focus-visible {
        background: #d4a574;
        transform: scale(1.02);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
      }

      /* Mobile-only refinements (keep desktop unchanged) */
      @media (max-width: 767px) {
        /* Make header slightly taller than the first iteration (~35% more than 56px) */
        .site-header {
          height: 76px;
        }

        /* Slightly reduce logo size on mobile while keeping it legible and left-aligned */
        .header-logo img {
          max-width: 130px;
          max-height: 52px;
        }

        /* Keep actions grouped on a single row with comfortable spacing */
        .header-actions {
          gap: 0.7rem;
        }

        /* Hamburger as simple three lines, no circular background/border */
        .header-hamburger {
          width: 36px;
          height: 36px;
          border-radius: 0;
          border: none;
          background: transparent;
        }

        .header-hamburger span {
          width: 20px;
          height: 2px;
        }
      }

      /* Tablet and desktop header layout */

      @media (min-width: 768px) {
        .site-header {
          height: 70px;
        }

        .header-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .header-logo {
          justify-self: flex-start;
          padding-left: 2.5rem;
        }

        .header-hamburger {
          display: none;
        }

        .header-nav {
          display: block;
          flex: 1;
          margin: 0 2rem;
        }

        .header-actions {
          gap: 1.5rem;
        }

        .header-book {
          display: inline-flex;
        }

        .header-mobile-menu {
          display: none;
        }
      }

      /* Mobile: ensure overlay is visible whenever header marks menu as open */
      @media (max-width: 767px) {
        .site-header.is-menu-open .header-mobile-menu {
          opacity: 1;
          pointer-events: auto;
          transform: translateY(0);
        }
      }

      @media (min-width: 1024px) {
        .site-header {
          height: var(--header-height-desktop);
        }

        .header-container {
          padding: 0 2.5rem;
        }

        .header-logo img {
          max-width: 160px;
        }

        .header-nav ul {
          gap: 2rem;
        }

        .header-actions {
          gap: 1.5rem;
        }

        .header-book {
          padding: 0.75rem 1.75rem;
        }
      }

      @media (min-width: 1440px) {
        .header-container {
          max-width: 1400px;
        }
      }

      @media print {
        .site-header {
          display: none;
        }
      }

      .site-header a:focus-visible,
      .site-header button:focus-visible {
        outline: 2px solid #d4a574;
        outline-offset: 2px;
      }

      body.no-scroll {
        overflow: hidden;
      }

      .nav {
        max-width: 1200px;
        margin: 0 auto;
        padding: 1rem clamp(0.75rem, 4vw, 2rem);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
      }

      .nav-left {
        display: flex;
        align-items: center;
        flex: 0 0 auto;
        margin-left: -9rem;
      }

      .nav-center {
        flex: 1 1 auto;
        display: flex;
        justify-content: center;
      }

      .nav-right {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        flex: 0 0 auto;
        margin-right: -9rem;
      }

      .logo-mark {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: inherit;
        margin-left: 0;
      }

      .logo-mark img {
        display: block;
        width: auto;
        /* Stronger contrast + subtle outline so logo pops on the cream header */
        filter: contrast(1.4) saturate(1.15) brightness(0.9)
          drop-shadow(0 0 2px rgba(31, 44, 47, 0.35));
      }

      .logo-mark .logo-icon {
        height: 42px;
        margin-right: 0.2rem;
      }

      .logo-mark .logo-text {
        height: 88px;
        margin-top: 12px;
      }

      /* Single combined logo (icon + text in one image) */
      .logo-main {
        height: 88px; /* similar visual height to old combo */
        /* no extra top margin so it sits vertically centered in the nav bar */
      }

      nav ul {
        list-style: none;
        display: flex;
        gap: 1.25rem;
        margin: 0;
        padding: 0;
        align-items: center;
      }

      .nav-center nav {
        display: flex;
        align-items: center;
      }

      .header-book-now {
        padding: 0.6rem 1.6rem;
        border-radius: 999px;
        border: none;
        background: var(--serenity-deep);
        color: #ffffff;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }

      .header-book-now:hover,
      .header-book-now:focus-visible {
        background: var(--serenity-sage);
      }

      .search-btn {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid rgba(31, 44, 47, 0.2);
        background: white;
        cursor: pointer;
      }

      nav a,
      nav button {
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        color: var(--serenity-deep);
        font-weight: 500;
        font-size: 0.74rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        background: none;
        border: none;
        font-family: inherit;
        cursor: pointer;
        position: relative;
        padding-bottom: 0.35rem;
      }

      nav a.active {
        color: var(--serenity-sage);
        position: relative;
      }

      nav a.active::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.35rem;
        height: 2px;
        background: var(--serenity-sage);
        border-radius: 999px;
        width: 100%;
      }

      nav a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -0.35rem;
        width: 0;
        height: 2px;
        background: rgba(31, 44, 47, 0.85);
        border-radius: 999px;
        transition: width 0.25s ease;
      }

      nav a:hover::after,
      nav a:focus-visible::after {
        width: 100%;
      }

      .has-dropdown {
        position: relative;
      }

      .has-dropdown svg {
        width: 10px;
        height: 6px;
      }

      .dropdown {
        position: absolute;
        top: 100%;
        margin-top: 0;
        left: 0;
        min-width: 180px;
        background: white;
        border-radius: 0.75rem;
        padding: 0.75rem;
        box-shadow: 0 12px 30px rgba(31, 44, 47, 0.15);
        z-index: 9999;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-10px);
        transition: opacity 0.2s ease, transform 0.2s ease;
      }

      .dropdown a {
        display: block;
        padding: 0.4rem 0.5rem;
        border-radius: 0.5rem;
        font-size: 0.8rem;
        white-space: nowrap;
      }

      /* Slightly smaller typography for the Terms page only */
      .terms-page .page-section-shell {
        font-size: 0.8rem;
        line-height: 1.7;
      }

      .dropdown a:hover {
        background: rgba(91, 123, 107, 0.08);
      }

      .has-dropdown.open .dropdown,
      .has-dropdown:hover .dropdown,
      .has-dropdown:focus-within .dropdown {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .search-btn {
        width: 42px;
        height: 42px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        border: 1px solid rgba(31, 44, 47, 0.2);
        background: white;
        cursor: pointer;
        margin-left: 1.25rem;
      }

      .search-btn svg {
        width: 18px;
        height: 18px;
        fill: none;
        stroke: var(--serenity-deep);
        stroke-width: 2;
      }

      /* Simple search strip under header */
      .search-strip {
        max-height: 0;
        overflow: hidden;
        background: var(--serenity-deep);
        color: var(--serenity-cream);
        border-bottom: 1px solid rgba(0, 0, 0, 0.25);
        transition: max-height 0.25s ease, opacity 0.25s ease;
        opacity: 0;
      }

      .search-strip.is-open {
        max-height: 160px;
        opacity: 1;
      }

      .search-strip-shell {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0.9rem clamp(1.25rem, 4vw, 2.5rem) 1.2rem;
      }

      .search-strip-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 0.4rem;
      }

      .search-strip-title {
        font-family: 'Playfair Display', serif;
        font-size: 1.4rem;
        letter-spacing: 0.05em;
        margin: 0;
        color: var(--serenity-cream);
      }

      .search-strip-close {
        border: none;
        background: transparent;
        cursor: pointer;
        font-size: 1.3rem;
        line-height: 1;
        color: var(--serenity-cream);
      }

      .search-strip-close:hover,
      .search-strip-close:focus-visible {
        color: var(--serenity-sage);
      }

      .search-strip-input-row {
        border-bottom: 1px solid rgba(249, 245, 239, 0.9);
      }

      .search-strip-input {
        width: 100%;
        border: none;
        background: transparent;
        padding: 0.35rem 0 0.55rem;
        font-size: 1rem;
        color: var(--serenity-cream);
        font-family: inherit;
        outline: none;
      }

      .search-strip-input::placeholder {
        color: rgba(255, 255, 255, 0.8);
      }

      .search-strip-input:focus-visible {
        box-shadow: 0 2px 0 white;
      }

      .search-strip-results {
        margin-top: 0.75rem;
        max-height: 220px;
        overflow-y: auto;
      }

      .search-strip-results-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
      }

      .search-strip-result-item a {
        display: block;
        text-decoration: none;
        color: var(--serenity-deep);
        padding: 0.6rem 0.6rem;
        border-radius: 0.7rem;
        background: white;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
      }

      .search-strip-result-title {
        margin: 0 0 0.1rem;
        font-weight: 600;
        font-size: 0.9rem;
      }

      .search-strip-result-snippet {
        margin: 0;
        font-size: 0.8rem;
        color: rgba(31, 44, 47, 0.8);
      }

      .search-strip-no-results {
        margin: 0.3rem 0 0;
        font-size: 0.8rem;
        color: rgba(255, 255, 255, 0.9);
      }

      .hero {
        position: relative;
        min-height: 75vh;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: clamp(2rem, 6vw, 4rem);
        color: white;
        overflow: hidden;
        background-color: #1f2c2f;
      }

      .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(31, 44, 47, 0.8), rgba(91, 123, 107, 0.3));
        z-index: 1;
        pointer-events: none;
      }

      .hero-content {
        max-width: 720px;
        position: relative;
        z-index: 2;
      }

      .hero-slider {
        position: absolute;
        inset: 0;
        z-index: 0;
      }

      .hero-slide {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0;
        animation: heroSlideFade 64s ease-in-out infinite;
        transform: scale(1);
        will-change: opacity, transform;
      }

      .hero-slide:nth-child(1) {
        animation-delay: 0s;
      }

      .hero-slide:nth-child(2) {
        animation-delay: 8s;
      }

      .hero-slide:nth-child(3) {
        animation-delay: 16s;
      }

      .hero-slide:nth-child(4) {
        animation-delay: 24s;
      }

      .hero-slide:nth-child(5) {
        animation-delay: 32s;
      }

      .hero-slide:nth-child(6) {
        animation-delay: 40s;
      }

      .hero-slide:nth-child(7) {
        animation-delay: 48s;
      }

      .hero-slide:nth-child(8) {
        animation-delay: 56s;
      }

      @keyframes heroSlideFade {
        0% {
          opacity: 0;
          transform: scale(1);
        }
        4% {
          opacity: 1;
        }
        12% {
          opacity: 1;
          transform: scale(1.05);
        }
        16% {
          opacity: 0;
          transform: scale(1.08);
        }
        100% {
          opacity: 0;
          transform: scale(1.08);
        }
      }

      .page-hero {
        min-height: 45vh;
        padding: clamp(3rem, 12vw, 5rem) clamp(1.5rem, 6vw, 4rem);
        background: linear-gradient(135deg, rgba(31, 44, 47, 0.92), rgba(91, 123, 107, 0.55));
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 1rem;
      }

      .page-hero h1 {
        margin: 0;
        font-size: clamp(2.5rem, 5vw, 3.75rem);
        letter-spacing: 0.08em;
        font-family: 'Playfair Display', serif;
      }

      /* Main title size just on Terms & Policies page */
      .terms-page .page-section-shell > h1 {
        font-size: 160%;
      }

      .page-hero p {
        margin: 0;
        max-width: 640px;
        line-height: 1.7;
        color: rgba(255, 255, 255, 0.9);
      }

      .newsletter-hero {
        min-height: 40vh;
        background: url('./Sycamore_Springs_banner1.jpg') center/cover no-repeat;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: clamp(3rem, 10vw, 4.5rem) clamp(1.5rem, 6vw, 4rem);
        position: relative;
        color: white;
      }

      .newsletter-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0.2),
          rgba(0, 0, 0, 0.65)
        );
        z-index: 0;
      }

      .newsletter-hero-inner {
        position: relative;
        z-index: 1;
        text-align: center;
        max-width: 720px;
      }

      .newsletter-hero-inner h1 {
        margin: 0 0 0.75rem;
        font-size: clamp(1.6rem, 3vw, 2.3rem);
        letter-spacing: 0.08em;
      }

      .newsletter-hero-inner p {
        margin: 0;
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.92);
      }

      .page-hero--about {
        position: relative;
        background: #1f2c2f;
        color: white;
        overflow: hidden;
      }

      .page-hero--about::before {
        content: '';
        position: absolute;
        inset: 0;
        /* Bias the crop slightly left so the family sits in the focal area */
        background: url('./Family_Photo_About_US.png') left center/cover no-repeat;
        opacity: 0.85;
        z-index: 0;
      }

      .page-hero--about::after {
        content: '';
        position: absolute;
        inset: 0;
        /* Slightly lighter overlay so faces are more visible but text still pops */
        background: linear-gradient(
          135deg,
          rgba(31, 44, 47, 0.78),
          rgba(91, 123, 107, 0.38)
        );
        z-index: 1;
      }

      .page-hero--about h1,
      .page-hero--about p {
        position: relative;
        z-index: 2;
      }

      .page-hero--retreats {
        position: relative;
        background: #1f2c2f;
        color: white;
        overflow: hidden;
      }

      .page-hero--retreats::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('./Sycamore_Springs_banner1.jpg') center/cover no-repeat;
        opacity: 0.85;
        z-index: 0;
      }

      .page-hero--retreats::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(31, 44, 47, 0.9),
          rgba(91, 123, 107, 0.45)
        );
        z-index: 1;
      }

      .page-hero--retreats h1,
      .page-hero--retreats p {
        position: relative;
        z-index: 2;
      }

      .page-hero--contact {
        position: relative;
        background: #1f2c2f;
        color: white;
        overflow: hidden;
      }

      .page-hero--contact::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('./bobjones-trail4.jpeg') center/cover no-repeat;
        opacity: 0.9;
        z-index: 0;
      }

      .page-hero--contact::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(31, 44, 47, 0.9),
          rgba(91, 123, 107, 0.45)
        );
        z-index: 1;
      }

      .page-hero--contact h1,
      .page-hero--contact p {
        position: relative;
        z-index: 2;
      }

      .page-hero--goodies {
        position: relative;
        background: #1f2c2f;
        color: white;
        overflow: hidden;
      }

      .page-hero--goodies::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url('./Monarch_butterfly_grove1.jpeg') center/cover no-repeat;
        opacity: 0.9;
        z-index: 0;
      }

      .page-hero--goodies::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(31, 44, 47, 0.9),
          rgba(91, 123, 107, 0.4)
        );
        z-index: 1;
      }

      .page-hero--goodies h1,
      .page-hero--goodies p {
        position: relative;
        z-index: 2;
      }

      .page-section {
        padding: clamp(3rem, 8vw, 4.5rem) clamp(1.5rem, 6vw, 4rem);
        background: white;
      }

      /* Align non-hero title section on Yays & Praise with Lessons/Facilitators */
      .yaya-page .page-section:first-of-type {
        padding-top: clamp(8rem, 12vw, 9rem);
      }

      .page-section-shell {
        width: min(900px, 100%);
        margin: 0 auto 3rem; /* add breathing room above the footer on short pages */
        background: white;
        border-radius: 0.75rem;
        padding: clamp(1.75rem, 4vw, 3rem);
        box-shadow: 0 25px 50px rgba(31, 44, 47, 0.08);
        display: flex;
        flex-direction: column;
        gap: 1rem;
        line-height: 1.7;
        color: rgba(31, 44, 47, 0.85);
      }

      /* Make FAQ & Terms content align like Online Lessons: wider shell, no white card */
      .faq-page .page-section-shell,
      .terms-page .page-section-shell {
        width: min(1200px, 100%);
        background: transparent;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
      }

      /* Yays & Praise testimonials */
      .page-section-shell--testimonials {
        width: min(1120px, 100%);
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
      }

      .testimonials-heading {
        margin: 0 0 0.5rem;
        font-family: 'Playfair Display', serif;
        font-size: 2.1rem; /* match Retreat/Facilitators & Explore Online Classes */
        letter-spacing: 0.12em;
      }

      .testimonials-subtitle {
        margin: 0 0 2.25rem;
        font-size: 0.98rem;
      }

      .testimonial-feature-list {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        margin: 4rem 0 2.5rem; /* extra top space so intro clears before images */
      }

      .testimonial-feature {
        display: grid;
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        column-gap: 2.5rem;
        row-gap: 1.5rem;
        align-items: center;
      }

      .testimonial-feature--flip {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
      }

      .testimonial-feature-media {
        position: relative;
        overflow: hidden;
        border-radius: 1.4rem;
        box-shadow: 0 26px 55px rgba(31, 44, 47, 0.2);
      }

      .testimonial-feature-media::before {
        content: '';
        display: block;
        padding-bottom: 60%; /* further reduced height so main photos are ~25% smaller again */
      }

      .testimonial-feature-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .testimonial-feature--left .testimonial-feature-media {
        transform: translateX(-32px); /* moderate horizontal offset without overlapping text */
      }

      .testimonial-feature--right .testimonial-feature-media {
        transform: translateX(32px); /* moderate horizontal offset without overlapping text */
      }

      .testimonial-heading {
        margin: 0 0 0.75rem;
        font-family: 'Playfair Display', serif;
        font-size: 1.15rem;
        letter-spacing: 0.04em;
        color: var(--serenity-deep);
      }

      .testimonial-quote {
        margin: 0;
        font-size: 0.95rem;
        line-height: 1.7;
        color: rgba(31, 44, 47, 0.9);
      }

      .testimonial-name {
        margin: 0.9rem 0 0;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-size: 0.75rem;
        color: var(--serenity-sage);
      }

      .testimonial-grid-header {
        margin-bottom: 1.5rem;
      }

      .testimonial-grid-header h2 {
        margin: 0 0 0.4rem;
        font-family: 'Playfair Display', serif;
        font-size: 1.4rem;
      }

      .testimonial-grid-header p {
        margin: 0;
        font-size: 0.92rem;
        color: rgba(31, 44, 47, 0.8);
      }

      .testimonial-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem;
        margin-bottom: 2.5rem;
      }

      .testimonial-pill {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.2rem 1.2rem 1.3rem;
        border-radius: 1.1rem;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(200, 155, 92, 0.22);
        box-shadow: 0 16px 30px rgba(31, 44, 47, 0.12);
      }

      .testimonial-pill-media {
        position: relative;
        overflow: hidden;
        border-radius: 0.9rem;
      }

      .testimonial-pill-media::before {
        content: '';
        display: block;
        padding-bottom: 70%;
      }

      .testimonial-pill-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .testimonial-stars {
        font-size: 0.85rem;
        letter-spacing: 0.1em;
        color: var(--serenity-gold);
      }

      .testimonial-pill-quote {
        margin: 0 0 0.6rem;
        font-size: 0.9rem;
        line-height: 1.7;
      }

      .testimonial-pill-name {
        margin: 0;
        font-size: 0.74rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--serenity-sage);
        font-weight: 600;
      }

      .testimonial-cta {
        margin-top: 0.5rem;
        display: flex;
        justify-content: center;
      }

      @media (max-width: 900px) {
        .testimonial-feature,
        .testimonial-feature--flip {
          grid-template-columns: minmax(0, 1fr);
        }

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

      @media (max-width: 640px) {
        .testimonial-grid {
          grid-template-columns: minmax(0, 1fr);
        }
      }

      /* On the goodies page, let the gallery sit directly on the page background (no white card) */
      .goodies-page .page-section-shell {
        width: min(1100px, 100%);
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        display: block;
      }

      .calendar-embed {
        margin-top: 1.5rem;
      }

      .booking-bar-local {
        margin-top: 1.25rem;
        padding: 0.75rem 1.25rem;
        border-radius: 999px;
        background: rgba(228, 199, 188, 0.22);
        border: 1px solid rgba(31, 44, 47, 0.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        font-size: 0.9rem;
        color: rgba(31, 44, 47, 0.9);
      }

      .booking-bar-local span {
        flex: 1;
      }

      .booking-bar-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.55rem 1.35rem;
        border-radius: 999px;
        border: none;
        background: var(--serenity-deep);
        color: #fff;
        font-size: 0.85rem;
        font-weight: 600;
        text-decoration: none;
        white-space: nowrap;
      }

      .calendar-filters {
        margin-top: 1.5rem;
        padding: 1rem 1.25rem;
        border-radius: 0.6rem;
        background: rgba(228, 199, 188, 0.12);
        border: 1px solid rgba(31, 44, 47, 0.08);
      }

      .calendar-filters-row {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        align-items: flex-end;
      }

      .calendar-filters label {
        display: flex;
        flex-direction: column;
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.16em;
        color: rgba(31, 44, 47, 0.7);
      }

      .calendar-filters select {
        margin-top: 0.35rem;
        min-width: 180px;
        padding: 0.55rem 0.75rem;
        border-radius: 999px;
        border: 1px solid rgba(31, 44, 47, 0.18);
        font-size: 0.9rem;
        font-family: inherit;
      }

      .calendar-filters button[type='submit'] {
        padding: 0.7rem 1.6rem;
        border-radius: 999px;
        border: none;
        background: var(--serenity-deep);
        color: #fff;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
      }

      .calendar-events {
        list-style: none;
        margin: 1.75rem 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
      }

      .newsletter-section {
        background: white;
      }

      .newsletter-shell {
        max-width: 720px;
      }

      .newsletter-shell h2 {
        margin: 0 0 0.5rem;
        font-family: 'Playfair Display', serif;
        font-size: 1.7rem;
        letter-spacing: 0.06em;
      }

      .newsletter-shell > p {
        margin: 0 0 1.5rem;
        font-size: 0.95rem;
        color: rgba(31, 44, 47, 0.8);
      }

      .newsletter-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 0.5rem;
      }

      .newsletter-form-row {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .newsletter-form-row--split {
        display: flex;
        gap: 1rem;
      }

      .newsletter-field {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
        font-size: 0.9rem;
      }

      .newsletter-field label {
        text-transform: uppercase;
        letter-spacing: 0.16em;
        font-size: 0.75rem;
        color: rgba(31, 44, 47, 0.7);
      }

      .newsletter-field input,
      .newsletter-field select {
        padding: 0.65rem 0.75rem;
        border-radius: 999px;
        border: 1px solid rgba(31, 44, 47, 0.18);
        background: rgba(255, 255, 255, 0.7);
        font-family: inherit;
        font-size: 0.9rem;
      }

      .newsletter-disclaimer {
        margin: 0.25rem 0 0.75rem;
        font-size: 0.8rem;
        color: rgba(31, 44, 47, 0.7);
      }

      .newsletter-submit {
        align-self: flex-start;
        padding: 0.75rem 1.8rem;
        border-radius: 999px;
        border: none;
        background: var(--serenity-deep);
        color: #ffffff;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-size: 0.8rem;
        cursor: pointer;
      }

      .newsletter-submit:hover,
      .newsletter-submit:focus-visible {
        background: var(--serenity-sage);
      }

      @media (max-width: 720px) {
        .newsletter-form-row--split {
          flex-direction: column;
        }
      }

      /* Gallery page */

      .gallery-section {
        background: #ffffff;
        padding: clamp(6rem, 10vw, 7rem) 0; /* extra top space so dropdown sits above title */
      }

      .gallery-shell {
        width: 100%;
        max-width: 1520px; /* slight reduction (~5%) so squares are just a bit smaller */
        margin: 0 auto 3rem;
        padding: 0 clamp(0.75rem, 2vw, 1.5rem);
      }

      .gallery-header {
        margin-bottom: 1.5rem;
        text-align: center;
      }

      .gallery-header-kicker {
        margin: 0 0 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.24em;
        font-size: 2.1rem;
        font-family: 'Playfair Display', serif;
        color: var(--serenity-gold);
      }

      .gallery-header-title {
        margin: 0 0 0.5rem;
        font-family: 'Playfair Display', serif;
        font-size: 2.1rem;
        letter-spacing: 0.12em;
        color: var(--serenity-deep);
      }

      .gallery-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem; /* doubled spacing between squares */
      }

      .gallery-item {
        margin: 0;
      }

      .gallery-item img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        cursor: pointer; /* show hand cursor to indicate click opens full image */
      }

      /* Gallery lightbox */

      .gallery-lightbox {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.8);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 2000;
      }

      .gallery-lightbox.is-open {
        display: flex;
      }

      .gallery-lightbox img {
        max-width: 90vw;
        max-height: 90vh;
        border-radius: 0.5rem;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
      }

      /* Keep 4-up layout even as screen shrinks, to mirror tablet-style mockup */

      /* Online Lessons layout */

      .lessons-hero {
        display: grid;
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr);
        min-height: 320px;
        background: #ffffff;
        padding: 0;
      }

      .lessons-hero-media {
        position: relative;
        min-height: 280px;
        background-image: url('./Online_classes_hero.jpg');
        background-size: cover;
        background-position: center;
      }

      .lessons-hero-content {
        padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.75rem, 5vw, 3rem);
        display: flex;
        flex-direction: column;
        gap: 0.9rem;
        justify-content: center;
      }

      .lessons-kicker {
        text-transform: uppercase;
        letter-spacing: 0.28em;
        font-size: 0.75rem;
        color: var(--serenity-gold);
        margin: 0;
      }

      .lessons-hero h1 {
        margin: 0;
        font-family: 'Playfair Display', serif;
        font-size: clamp(2.1rem, 3.4vw, 2.7rem);
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .lessons-hero-body {
        margin: 0.4rem 0 0.25rem;
        font-size: 0.98rem;
        line-height: 1.7;
        color: rgba(31, 44, 47, 0.9);
      }

      .lessons-hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
        font-size: 0.85rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(31, 44, 47, 0.7);
      }

      .lessons-section {
        background: #ffffff;
        padding: clamp(8rem, 12vw, 9rem) clamp(0.75rem, 4vw, 2rem);
        scroll-margin-top: 9.5rem;
      }

      /* Extra clearance so the Class Library header never tucks under the sticky nav on the lessons page */
      .lessons-page .lessons-section {
        margin-top: 0;
      }

      .lessons-shell {
        max-width: 1120px; /* match testimonials shell for consistent title alignment */
      }

      /* On Online Lessons page, let the class list sit directly on the page background */
      .lessons-section .page-section-shell {
        width: min(1200px, 100%);
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin: 0 auto 3rem;
      }

      .lessons-header {
        margin-bottom: 0.25rem;
      }

      .lessons-section .lessons-header-kicker {
        margin: 0 0 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.24em;
        font-size: 2.1rem !important; /* match visual size of Explore Online Classes */
        color: var(--serenity-gold) !important; /* same gold as Breathwork */
        font-family: 'Playfair Display', serif;
      }

      .lessons-section .lessons-header h2 {
        margin: 0 0 0.4rem;
        font-family: 'Playfair Display', serif;
        letter-spacing: 0.08em;
        font-size: 2.1rem !important; /* ensure heading matches Class Library size */
        color: var(--serenity-deep);
      }

      .lessons-header p {
        margin: 0;
        font-size: 0.98rem;
        color: rgba(31, 44, 47, 0.85);
      }

      /* Make FAQ + Terms titles visually identical to Online Lessons title block */
      .faq-page .lessons-header-kicker,
      .terms-page .lessons-header-kicker {
        margin: 0 0 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.24em;
        font-size: 2.1rem;
        font-family: 'Playfair Display', serif;
        color: var(--serenity-gold);
      }

      .faq-page .lessons-header h2,
      .terms-page .lessons-header h2 {
        margin: 0 0 0.4rem;
        font-family: 'Playfair Display', serif;
        letter-spacing: 0.08em;
        font-size: 2.1rem;
        color: var(--serenity-deep);
      }

      .faq-page .lessons-header p,
      .terms-page .lessons-header p {
        margin: 0;
        font-size: 0.98rem;
        color: rgba(31, 44, 47, 0.85);
      }

      .lessons-list {
        list-style: none;
        margin: 0.5rem 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
      }

      .lesson-card {
        display: grid;
        grid-template-columns: 240px minmax(0, 2fr) auto;
        gap: 1.75rem;
        padding: 2rem 2rem 2rem 0; /* remove left padding so image aligns with page title */
        border-radius: 0.75rem;
        border: 1px solid rgba(31, 44, 47, 0.08);
        background: rgba(255, 255, 255, 0.95);
        align-items: flex-start;
      }

      .lesson-media {
        width: 100%;
        padding-top: 110%;
        border-radius: 0.6rem;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .lesson-body {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        padding-left: 2rem; /* restore inner spacing after removing card left padding */
      }

      .lesson-cta {
        padding-left: 2rem; /* keep CTA column aligned with lesson text */
      }

      .lesson-kicker {
        margin: 0;
        font-size: 0.8rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--serenity-gold);
      }

      .lesson-body h3 {
        margin: 0;
        font-family: 'Playfair Display', serif;
        font-size: 2.1rem;
      }

      .lesson-meta {
        margin: 0;
        font-size: 0.86rem;
        color: rgba(31, 44, 47, 0.7);
      }

      .lesson-description {
        margin: 0.3rem 0 0;
        font-size: 0.9rem;
        color: rgba(31, 44, 47, 0.9);
      }

      .lesson-cta {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.2rem;
        white-space: nowrap;
        text-align: center;
      }

      .lesson-date,
      .lesson-time,
      .lesson-mode {
        margin: 0;
        font-size: 0.8rem;
        color: rgba(31, 44, 47, 0.9);
        font-weight: 600;
      }

      .lesson-mode {
        margin-bottom: 0.35rem;
      }

      .lesson-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.55rem 1.3rem;
        border-radius: 999px;
        border: none;
        background: var(--serenity-deep);
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        text-decoration: none;
      }

      .lesson-button:hover,
      .lesson-button:focus-visible {
        background: var(--serenity-sage);
      }

      /* Facilitators page layout (mirrors Online Lessons) */

      .facilitators-section {
        background: #ffffff;
        padding: clamp(8rem, 12vw, 9rem) clamp(0.75rem, 4vw, 2rem);
        position: relative;
        z-index: 0;
      }

      .facilitators-shell {
        max-width: 1120px; /* match lessons + testimonials for consistent heading position */
      }

      /* Let facilitator list sit directly on the page background (no white card),
         mirroring the Online Lessons layout */
      .facilitators-section .page-section-shell {
        width: min(1200px, 100%);
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        margin: 0 auto 3rem;
      }

      .facilitators-header {
        margin-bottom: 1.5rem;
      }

      .facilitators-section .facilitators-header h2 {
        margin: 0 0 0.4rem;
        font-family: 'Playfair Display', serif;
        letter-spacing: 0.08em;
        font-size: 2.1rem !important; /* match Explore Online Classes size */
        color: var(--serenity-deep);
      }

      .facilitators-header p {
        margin: 0;
        font-size: 0.98rem;
        color: rgba(31, 44, 47, 0.85);
      }

      .facilitators-list {
        list-style: none;
        margin: 2rem 0 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
      }

      /* Keep individual facilitator cards behind the header/dropdowns */
      .facilitators-page .facilitator-card {
        position: relative;
        z-index: 0;
      }

      @media (max-width: 900px) {
        .lessons-hero {
          grid-template-columns: minmax(0, 1fr);
        }

        .lessons-hero-media {
          min-height: 220px;
        }

        .lesson-card {
          grid-template-columns: 100px minmax(0, 1fr);
          grid-template-rows: auto auto;
        }

        .lesson-cta {
          grid-column: 1 / -1;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          margin-top: 0.25rem;
        }
      }

      .calendar-event {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr) auto;
        gap: 1.25rem;
        padding: 1.1rem 1.25rem;
        border-radius: 0.75rem;
        border: 1px solid rgba(31, 44, 47, 0.08);
        background: rgba(255, 255, 255, 0.95);
      }

      .calendar-event-media img {
        display: block;
        width: 100%;
        height: 120px;
        object-fit: cover;
        border-radius: 0.6rem;
      }

      .calendar-event-kicker {
        margin: 0 0 0.25rem;
        font-size: 0.8rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: var(--serenity-gold);
      }

      .calendar-event-body h3 {
        margin: 0 0 0.35rem;
        font-family: 'Playfair Display', serif;
        font-size: 1.15rem;
      }

      .calendar-event-meta {
        margin: 0 0 0.5rem;
        font-size: 0.9rem;
        color: rgba(31, 44, 47, 0.75);
      }

      .calendar-event-body p {
        margin: 0;
        font-size: 0.95rem;
      }

      .calendar-event-cta-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      .calendar-event-cta {
        padding: 0.7rem 1.4rem;
        border-radius: 999px;
        border: none;
        background: var(--serenity-deep);
        color: #fff;
        font-weight: 600;
        font-size: 0.9rem;
        cursor: pointer;
        white-space: nowrap;
      }

      @media (max-width: 768px) {
        .calendar-event {
          grid-template-columns: minmax(0, 1fr);
        }

        .calendar-event-cta-wrap {
          justify-content: flex-start;
        }
      }

      .store-grid {
        margin: 2.5rem auto 0;
        width: min(1200px, 100%);
        display: grid;
        grid-template-columns: repeat(3, minmax(260px, 1fr));
        gap: 1.75rem;
      }

      .store-card {
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
      }

      .store-card:hover,
      .store-card:focus-within {
        transform: none;
        box-shadow: none;
        background: transparent;
      }

      .store-card-media {
        position: relative;
        padding-top: 100%; /* square-ish tiles like gallery */
        background: none;
      }

      .store-card-media::after {
        content: none;
      }

      .store-card-photo {
        position: absolute;
        inset: 0;
        border-radius: 0.35rem;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      .store-card-body {
        padding: 0.6rem 0.15rem 0.2rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .store-card-meta {
        margin: 0;
        font-size: 0.85rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(31, 44, 47, 0.7);
      }

      .store-card-copy {
        margin: 0.2rem 0 0.4rem;
        font-size: 0.9rem;
        color: rgba(31, 44, 47, 0.85);
      }

      .store-card-price {
        margin: 0.1rem 0 0.4rem;
        font-weight: 600;
        color: var(--serenity-deep);
      }

      .store-card-tag {
        margin: 0;
        font-size: 0.8rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        color: var(--serenity-gold);
      }

      .store-card-cta {
        margin-top: 0.35rem;
        align-self: flex-start;
        padding: 0.55rem 1.25rem;
        border-radius: 999px;
        border: 1px solid rgba(31, 44, 47, 0.16);
        background: rgba(255, 255, 255, 0.9);
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--serenity-deep);
      }

      .store-card-cta[aria-disabled='true'] {
        opacity: 0.7;
        cursor: default;
      }

      .subscribe-strip {
        background: var(--serenity-deep);
        color: white;
        padding: clamp(1.5rem, 5vw, 3rem) clamp(1.5rem, 6vw, 4rem);
        border-top: 1px solid rgba(200, 155, 92, 0.2);
        border-bottom: 1px solid rgba(200, 155, 92, 0.2);
      }

      .subscribe-shell {
        width: min(900px, calc(100% - 4rem));
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        gap: clamp(1rem, 4vw, 3rem);
        align-items: center;
      }

      .subscribe-btn {
        padding: 0.9rem 2.5rem;
        border-radius: 0.4rem;
        border: 2px solid #ffffff;
        background: transparent;
        color: white;
        font-weight: 600;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        font-size: 0.9rem;
        cursor: pointer;
        transition: background 0.2s ease, color 0.2s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
      }

      .subscribe-btn:hover,
      .subscribe-btn:focus-visible {
        background: rgba(200, 155, 92, 0.15);
        color: white;
      }

      .subscribe-copy {
        text-align: left;
        margin-left: auto;
      }

      .subscribe-copy h3 {
        margin: 0;
        font-family: 'Playfair Display', serif;
        font-size: clamp(1.1rem, 2.1vw, 1.5rem);
        letter-spacing: 0.02em;
        text-transform: none;
        color: rgba(255, 255, 255, 0.95);
      }

      .subscribe-copy p {
        margin: 0.35rem 0 0;
        color: rgba(255, 255, 255, 0.78);
        font-size: 0.9rem;
        letter-spacing: 0.02em;
      }

      @media (max-width: 640px) {
        .subscribe-shell {
          flex-direction: column;
          text-align: center;
        }

        .subscribe-copy {
          text-align: center;
        }

        .subscribe-btn {
          width: 100%;
        }
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--serenity-rose);
        margin-bottom: 1.5rem;
      }

      /* Shared title kicker style (Client Love, Class Library, Retreat) */
      .page-section-shell--testimonials .eyebrow,
      .lessons-header-kicker,
      .facilitators-section .facilitators-header-kicker {
        margin: 0 0 0.5rem;
        text-transform: uppercase;
        letter-spacing: 0.24em;
        font-size: 2.1rem;
        font-family: 'Playfair Display', serif;
        color: var(--serenity-gold);
      }

      /* Remove decorative lines on either side of Client Love only */
      .page-section-shell--testimonials .eyebrow::before,
      .page-section-shell--testimonials .eyebrow::after {
        content: none;
      }

      .eyebrow::before,
      .eyebrow::after {
        content: '';
        width: 32px;
        height: 1px;
        background: currentColor;
        opacity: 0.6;
      }

      h1 {
        margin: 0;
        font-family: 'Playfair Display', serif;
        font-size: clamp(3rem, 6vw, 4.5rem);
        letter-spacing: 0.05em;
      }

      .tagline {
        margin: 1.5rem auto 2.5rem;
        font-size: 1.1rem;
        line-height: 1.7;
        color: #fdf9f3;
      }

      .hero-cta {
        display: inline-flex;
        gap: 0.75rem;
        align-items: center;
        background: white;
        color: var(--serenity-deep);
        padding: 0.85rem 1.75rem;
        border-radius: 999px;
        font-weight: 600;
        text-decoration: none;
      }

      .hero-cta svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        stroke-width: 2;
        fill: none;
      }

      .blog-banner {
        margin: 2rem auto 4rem;
        width: min(1200px, calc(100% - 2.5rem));
        background: white;
        border-radius: 0.6rem;
        box-shadow: 0 25px 60px rgba(31, 44, 47, 0.12);
        padding: clamp(1.75rem, 3vw, 2.5rem);
      }

      .banner-heading {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.5rem;
      }

      .banner-heading h2 {
        margin: 0;
        font-family: 'Playfair Display', serif;
        font-size: 1.9rem;
        color: var(--serenity-deep);
      }

      .banner-heading a {
        color: var(--serenity-sage);
        font-weight: 600;
        text-decoration: none;
      }

      .blog-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1rem;
      }

      .blog-card {
        border: 1px solid rgba(31, 44, 47, 0.08);
        border-radius: 1rem;
        padding: 1.5rem;
        background: linear-gradient(120deg, rgba(228, 199, 188, 0.18), rgba(255, 255, 255, 0.9));
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .blog-card span {
        font-size: 0.85rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--serenity-sage);
      }

      .blog-card h3 {
        margin: 0;
        font-size: 1.15rem;
        color: var(--serenity-deep);
      }

      .blog-card p {
        margin: 0;
        font-size: 0.95rem;
        color: rgba(31, 44, 47, 0.8);
        line-height: 1.5;
      }

      /* Goodies gallery layout */
      .goodies-grid {
        margin: 2.5rem auto 0;
        width: min(1100px, 100%);
        display: grid;
        grid-template-columns: repeat(2, minmax(320px, 1fr));
        gap: 2rem;
      }

      .goodies-item {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
      }

      .goodies-item img {
        width: 100%;
        aspect-ratio: 3 / 2; /* fixed tile shape for all products */
        object-fit: contain; /* show full image, no cropping or distortion */
        object-position: center center; /* center horizontally & vertically */
        background-color: #ffffff; /* neutral background for letterboxing */
        border-radius: 0.4rem;
        display: block;
      }

      /* Small branded View on Amazon pill button */
      .goodies-meta .goodies-amazon-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: 0.5rem;
        padding: 0.18rem 0.56rem; /* ~20% smaller */
        border-radius: 999px;
        background: var(--serenity-deep);
        color: #ffffff;
        font-size: 0.65rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-decoration: none;
        border: none;
        cursor: pointer;
        white-space: nowrap;
      }

      .goodies-meta .goodies-amazon-btn:hover,
      .goodies-meta .goodies-amazon-btn:focus-visible {
        background: var(--serenity-sage);
      }

      .goodies-item figcaption {
        font-size: 0.82rem;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
      }

      .goodies-name {
        margin: 0;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .goodies-desc {
        margin: 0;
      }

      .goodies-meta {
        margin: 0;
        color: rgba(31, 44, 47, 0.75);
      }

      .about {
        position: relative;
        padding: clamp(3rem, 7vw, 5rem) clamp(1.25rem, 6vw, 3rem);
        background: #ffffff;
      }

      .about::before,
      .about::after {
        content: none;
      }

      .about-shell {
        position: relative;
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        gap: clamp(2rem, 4vw, 3rem);
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        background: #ffffff;
        border-radius: 0.8rem;
        padding: clamp(2rem, 5vw, 3.5rem);
        box-shadow: 0 30px 60px rgba(31, 44, 47, 0.12);
      }

      .about-left {
        position: relative;
      }

      .about-kicker {
        text-transform: uppercase;
        letter-spacing: 0.35em;
        font-size: 0.78rem;
        color: var(--serenity-gold);
        margin-bottom: 0.75rem;
      }

      .about-left h2 {
        font-family: 'Playfair Display', serif;
        font-size: clamp(2.25rem, 4vw, 3rem);
        margin: 0 0 0.5rem;
        letter-spacing: 0.08em;
        color: var(--serenity-deep);
      }

      .about-subheading {
        margin: 0 0 1.75rem;
        font-size: 1.05rem;
        color: rgba(31, 44, 47, 0.8);
      }

      .about-body {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        font-size: 1rem;
        line-height: 1.7;
        color: rgba(31, 44, 47, 0.92);
      }

      .about-body .about-photo {
        margin: 0;
        display: flow-root;
      }

      .about-body img {
        width: 192px;
        height: 288px;
        border-radius: 0.35rem;
        object-fit: cover;
        box-shadow: 0 12px 24px rgba(31, 44, 47, 0.2);
        float: left;
        margin: 0 1.25rem 0.75rem 0;
        display: block;
      }

      .about-cta {
        margin-top: 2rem;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        border: none;
        padding: 0.9rem 1.8rem;
        border-radius: 999px;
        background: var(--serenity-deep);
        color: white;
        font-weight: 600;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 12px 20px rgba(31, 44, 47, 0.25);
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
      }

      .about-cta svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 2;
        transition: transform 0.2s ease;
      }

      .about-cta:hover,
      .about-cta:focus-visible {
        background: var(--serenity-sage);
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 18px 30px rgba(91, 123, 107, 0.35);
      }

      .about-cta:hover svg,
      .about-cta:focus-visible svg {
        transform: translateX(4px);
      }

      .about-right {
        border-left: none;
        padding-left: clamp(1rem, 4vw, 2.5rem);
      }

      .services-kicker {
        font-size: 0.85rem;
        letter-spacing: 0.25em;
        text-transform: uppercase;
        color: var(--serenity-gold);
        margin: 0 0 1.5rem;
      }

      .services-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .services-list a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 1rem 1.25rem;
        border-radius: 1rem;
        border: 1px solid rgba(31, 44, 47, 0.12);
        background: rgba(91, 123, 107, 0.05);
        font-weight: 600;
        color: var(--serenity-deep);
        text-decoration: none;
        transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      }

      .services-list a::after {
        content: '↗';
        font-size: 1rem;
        color: var(--serenity-sage);
        transition: transform 0.2s ease;
      }

      .services-list a:hover,
      .services-list a:focus-visible {
        transform: translateX(4px) scale(1.01);
        border-color: rgba(91, 123, 107, 0.4);
        background: rgba(91, 123, 107, 0.12);
        box-shadow: 0 12px 24px rgba(31, 44, 47, 0.12);
      }

      .services-list a:hover::after,
      .services-list a:focus-visible::after {
        transform: translateX(4px);
      }

      .offerings {
        padding: clamp(3rem, 8vw, 5.5rem) clamp(1.25rem, 6vw, 3rem) clamp(4rem, 8vw, 6rem);
        background: #ffffff;
      }

      .offerings-shell {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: clamp(2rem, 4vw, 3rem);
      }

      .offerings-hero {
        position: relative;
        border-radius: 0.6rem;
        overflow: hidden;
        min-height: 340px;
        display: flex;
        align-items: flex-end;
        padding: clamp(2rem, 4vw, 3rem);
        color: white;
        box-shadow: 0 35px 60px rgba(31, 44, 47, 0.25);
      }

      .offerings-hero::before {
        content: '';
        position: absolute;
        inset: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.25);
        border-radius: 0.4rem;
        pointer-events: none;
      }

      .offerings-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(120deg, rgba(12, 19, 20, 0.15), rgba(12, 19, 20, 0.65));
        z-index: 1;
      }

      .offerings-hero-photo {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 0;
      }

      .offerings-hero-content {
        position: relative;
        z-index: 2;
        max-width: 540px;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .offerings-hero.offerings-hero--banner {
        border-radius: 0;
        min-height: clamp(320px, 60vh, 520px);
        align-items: center;
        justify-content: center;
        text-align: center;
      }

      .offerings-hero.offerings-hero--banner .offerings-hero-content {
        max-width: 640px;
        align-items: center;
      }

      .offerings-hero-title {
        margin: 0;
        font-family: 'Playfair Display', serif;
        font-size: clamp(2.8rem, 6vw, 4rem);
        letter-spacing: 0.08em;
      }

      .offerings-page-hero {
        background: none;
        padding: 0;
      }

      .offerings-page-hero .offerings-hero {
        width: 100%;
        border-radius: 0;
        min-height: clamp(360px, 60vh, 560px);
        box-shadow: none;
      }

      .offerings-page-hero .offerings-hero::before {
        display: none;
      }

      .offerings-page-hero .offerings-hero-content {
        max-width: 100%;
        align-items: center;
      }

      .offerings-banner h3 {
        margin: 0;
        font-family: 'Playfair Display', serif;
        font-size: clamp(2rem, 4vw, 2.75rem);
        letter-spacing: 0.06em;
      }

      .offerings-banner p {
        margin: 0;
        font-size: 1rem;
        line-height: 1.6;
      }

      .offerings-cta {
        margin-top: 0.5rem;
        align-self: flex-start;
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        padding: 0.85rem 1.5rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        color: var(--serenity-deep);
        text-decoration: none;
        font-weight: 600;
        transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
      }

      .offerings-cta:hover,
      .offerings-cta:focus-visible {
        background: white;
        transform: translateY(-2px);
        box-shadow: 0 18px 35px rgba(0, 0, 0, 0.3);
      }

      .offerings-heading {
        text-transform: uppercase;
        letter-spacing: 0.35em;
        font-size: 0.85rem;
        color: var(--serenity-gold);
        margin: 0;
      }

      .offerings-subtitle {
        margin: 0.35rem 0 0;
        font-family: 'Playfair Display', serif;
        font-size: clamp(2rem, 3vw, 2.5rem);
        color: var(--serenity-deep);
      }

      .offerings-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      /* Homepage offerings strip: two wide, thin rectangles per row */
      #offerings .offerings-grid {
        grid-template-columns: repeat(2, minmax(260px, 1fr));
        gap: 1.75rem;
      }

      /* On smaller screens, let homepage offerings stack to a single column */
      @media (max-width: 640px) {
        #offerings .offerings-grid {
          grid-template-columns: 1fr;
        }
      }

      .offering-card {
        position: relative;
        border-radius: 0.6rem;
        overflow: hidden;
        min-height: 160px;
        display: flex;
        align-items: flex-end;
        padding: 1.5rem;
        color: white;
        text-decoration: none;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        background-image: linear-gradient(160deg, rgba(4, 9, 11, 0.05), rgba(4, 9, 11, 0.65)), var(--card-image, linear-gradient(135deg, #5b7b6b, #e4c7bc));
        background-size: cover;
        background-position: center;
        box-shadow: 0 20px 40px rgba(31, 44, 47, 0.18);
        transition: transform 0.25s ease, box-shadow 0.25s ease, letter-spacing 0.25s ease;
      }

      /* Slightly softer overlay for homepage offerings tiles so images feel lighter */
      #offerings .offering-card {
        padding-inline: 1.75rem;
        align-items: center;
        justify-content: flex-start;
        background-image: linear-gradient(135deg, rgba(4, 9, 11, 0.18), rgba(4, 9, 11, 0.45)),
          var(--card-image, linear-gradient(135deg, #ccd8d2, #f4e4dd));
      }

      .offering-card::after {
        display: none;
      }

      .offering-card:hover,
      .offering-card:focus-visible {
        transform: translateY(-4px) scale(1.01);
        box-shadow: 0 24px 50px rgba(31, 44, 47, 0.25);
        letter-spacing: 0.2em;
      }

      .offering-card span {
        position: relative;
        z-index: 1;
      }

      .offerings-grid--page {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(1.25rem, 3vw, 2rem);
      }

      .offerings-grid--page .offering-card {
        min-height: 230px;
        padding: clamp(1.25rem, 3vw, 1.75rem);
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0.75rem;
        border-radius: 0.85rem;
        box-shadow: 0 18px 45px rgba(31, 44, 47, 0.22);
      }

      .offerings-grid--page .offering-card span {
        background: rgba(21, 32, 33, 0.85);
        padding: 0.35rem 1.2rem;
        border-radius: 999px;
        letter-spacing: 0.22em;
        font-size: 0.8rem;
        color: white;
      }

      @media (max-width: 880px) {
        .offerings-grid--page {
          grid-template-columns: 1fr;
        }
      }

      .contact-section {
        padding: clamp(5rem, 8vw, 7rem) clamp(1.25rem, 6vw, 3.5rem);
        background: #ffffff;
        color: var(--serenity-deep);
      }

      .contact-shell {
        width: min(1200px, calc(100% - 2.5rem));
        margin: 0 auto;
        background: #ffffff;
        border-radius: 1rem;
        padding: clamp(2.5rem, 5vw, 4rem);
        box-shadow: 0 25px 60px rgba(31, 44, 47, 0.12);
        display: flex;
        flex-direction: column;
        gap: clamp(2rem, 3vw, 3rem);
        color: inherit;
      }

      .contact-section--connect {
        padding: clamp(2.5rem, 4vw, 3.25rem) clamp(1.25rem, 6vw, 3.5rem);
      }

      .contact-section--connect .contact-shell {
        background: transparent;
        box-shadow: none;
        padding: 0;
        width: min(900px, calc(100% - 2.5rem));
      }

      .contact-header {
        text-align: center;
        color: inherit;
      }

      .contact-kicker {
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.35em;
        font-size: 0.85rem;
        color: var(--serenity-gold);
      }

      .contact-header h3 {
        margin: 0.75rem 0 0;
        font-family: 'Playfair Display', serif;
        font-size: clamp(2rem, 3vw, 2.8rem);
        color: var(--serenity-deep);
      }

      .contact-header p {
        margin: 0.75rem auto 0;
        max-width: 620px;
        color: rgba(31, 44, 47, 0.75);
        line-height: 1.6;
      }

      .contact-info-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: clamp(1.5rem, 3vw, 3rem);
        align-items: center;
        color: inherit;
      }

      .contact-brand {
        text-align: left;
      }

      .contact-brand img {
        width: 96px;
        height: auto;
        margin-bottom: 1rem;
      }

      .contact-brand p {
        margin: 0;
        max-width: 340px;
        color: rgba(31, 44, 47, 0.7);
        line-height: 1.6;
      }

      .contact-stack {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        color: inherit;
      }

      .contact-stack address,
      .contact-stack a {
        font-style: normal;
        text-decoration: none;
        color: inherit;
        font-weight: 600;
        letter-spacing: 0.05em;
      }

      .contact-social-block {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        align-items: center;
        text-align: center;
      }

      .contact-social-block p {
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.25em;
        font-size: 0.75rem;
        color: rgba(31, 44, 47, 0.6);
      }

      .contact-social {
        display: flex;
        gap: 0.85rem;
      }

      .contact-social a {
        width: 36px;
        height: 36px;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: #ffffff;
        color: var(--serenity-deep);
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease,
          box-shadow 0.2s ease;
      }

      .contact-social a:hover,
      .contact-social a:focus-visible {
        background: rgba(91, 123, 107, 0.12);
        color: var(--serenity-deep);
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(31, 44, 47, 0.18);
      }

      .contact-social svg {
        width: 18px;
        height: 18px;
        fill: currentColor;
      }

      .contact-social img {
        width: 20px;
        height: 20px;
        object-fit: cover;
        display: block;
        border-radius: 50%;
      }

      .contact-social a[aria-label="Bluesky"] img {
        width: 24px;
        height: 24px;
        filter: grayscale(1) contrast(1.1) brightness(1.05);
      }

      .contact-social a[aria-label="WhatsApp"] img {
        width: 24px;
        height: 24px;
        filter: grayscale(1) contrast(1.05) brightness(1.0);
      }

      /* Contact page specific adjustments */

      body.page-contact .contact-header h3 {
        font-size: clamp(1.2rem, 1.8vw, 1.68rem);
      }

      body.page-contact .contact-shell {
        background: transparent;
        box-shadow: none;
        padding: 0;
        gap: clamp(1.5rem, 3vw, 2.5rem);
      }

      body.page-contact .contact-header {
        padding: clamp(2.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem) 1.5rem;
      }

      .contact-card {
        width: min(900px, 100%);
        margin: 0 auto;
        background: #ffffff;
        border-radius: 0.9rem;
        padding: clamp(1.75rem, 3vw, 2.5rem);
        box-shadow: 0 22px 45px rgba(31, 44, 47, 0.14);
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
      }

      .contact-card-top {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(1.5rem, 4vw, 3rem);
        align-items: flex-start;
      }

      .contact-card-column {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .contact-info-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        margin-top: 0.75rem;
        margin-left: -14px;
      }

      .contact-info-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.95rem;
      }

      .contact-info-list .contact-info-row:nth-child(2),
      .contact-info-list .contact-info-row:nth-child(3) {
        margin-left: 10px;
      }

      .contact-info-list .contact-info-row:first-child {
        margin-left: 5px;
      }

      .contact-info-icon {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--serenity-sage);
        flex-shrink: 0;
        margin-top: 0.1rem;
      }

      .contact-info-icon svg {
        width: 24px;
        height: 24px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
      }

      .contact-info-icon--mail {
        width: 38px;
        height: 38px;
      }

      .contact-info-icon--phone {
        width: 42px;
        height: 42px;
      }

      .contact-info-text address,
      .contact-info-text a,
      .contact-info-text span {
        font-style: normal;
        text-decoration: none;
        color: inherit;
        display: block;
      }

      .contact-card-title {
        margin: 0;
        font-size: 0.95rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        color: rgba(31, 44, 47, 0.7);
      }

      .contact-card-company .contact-brand {
        text-align: left;
      }

      .contact-card-divider {
        height: 1px;
        background: rgba(31, 44, 47, 0.08);
      }

      .contact-form-section {
        display: flex;
        flex-direction: column;
        gap: 1rem;
      }

      .contact-form-heading {
        margin: 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--serenity-deep);
      }

      .contact-form-block {
        display: flex;
        justify-content: center;
      }

      .contact-form {
        width: 100%;
        max-width: none;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
      }

      .contact-form-row {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .contact-form-row--split {
        flex-direction: row;
        gap: 0.75rem;
      }

      .contact-form-field {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }

      .contact-form label {
        font-size: 0.85rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: rgba(31, 44, 47, 0.7);
      }

      .contact-form input,
      .contact-form textarea {
        font-family: inherit;
        font-size: 0.95rem;
        padding: 0.65rem 0.75rem;
        border-radius: 0.45rem;
        border: 1px solid rgba(31, 44, 47, 0.18);
        background: rgba(255, 255, 255, 0.6);
        color: inherit;
      }

      .contact-form textarea {
        min-height: 120px;
        resize: vertical;
      }

      .contact-form button {
        margin-top: 0.5rem;
        align-self: flex-start;
        padding: 0.75rem 1.6rem;
        border-radius: 999px;
        border: none;
        background: var(--serenity-deep);
        color: #ffffff;
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        font-size: 0.8rem;
        cursor: pointer;
      }

      .contact-form button:hover,
      .contact-form button:focus-visible {
        background: var(--serenity-sage);
      }

      .contact-social-row {
        width: min(900px, 100%);
        margin: 1.5rem auto 0;
        padding: 1.5rem 1.25rem 0.5rem;
        border-top: 1px solid rgba(31, 44, 47, 0.08);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
      }

      .contact-social-row p {
        margin: 0;
        text-transform: uppercase;
        letter-spacing: 0.22em;
        font-size: 0.75rem;
        color: rgba(31, 44, 47, 0.6);
      }

      .contact-social-row .contact-social {
        justify-content: center;
      }

      @media (max-width: 720px) {
        .contact-card {
          border-radius: 0.75rem;
        }

        .contact-card-top {
          grid-template-columns: 1fr;
        }

        .contact-form-row--split {
          flex-direction: column;
        }
      }

      .site-footer {
        background: #152021;
        color: white;
        padding: 2.5rem clamp(1.5rem, 6vw, 4rem);
        margin-top: auto; /* push footer to bottom when page content is short */
      }

      .footer-shell {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
      }

      .footer-shell p {
        margin: 0;
        font-size: 0.9rem;
      }

      .footer-links {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        font-size: 0.85rem;
      }

      .footer-links a {
        color: inherit;
        text-decoration: none;
        letter-spacing: 0.08em;
        position: relative;
        padding-bottom: 0.25rem;
      }

      .footer-links a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -0.2rem;
        width: 0;
        height: 1px;
        background: white;
        border-radius: 999px;
        transition: width 0.25s ease;
      }

      .footer-links a:hover::after,
      .footer-links a:focus-visible::after {
        width: 100%;
      }

      .scroll-top {
        position: fixed;
        bottom: 1.5rem;
        right: 1.5rem;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        border: none;
        background: var(--serenity-gold);
        color: white;
        font-weight: 700;
        letter-spacing: 0.08em;
        box-shadow: 0 15px 25px rgba(200, 155, 92, 0.35);
        cursor: pointer;
        transform: scale(0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
      }

      .scroll-top.visible {
        transform: scale(1);
        opacity: 1;
        pointer-events: auto;
      }

      .scroll-top:hover,
      .scroll-top:focus-visible {
        box-shadow: 0 20px 35px rgba(200, 155, 92, 0.45);
      }

      @media (max-width: 720px) {
        .nav {
          flex-wrap: wrap;
          padding: 0.6rem 1.25rem;
          gap: 0.75rem;
        }

        .logo-mark .logo-icon {
          height: 32px;
        }

        .logo-mark .logo-text {
          height: 64px;
          margin-top: 6px;
        }

        nav ul {
          flex-wrap: wrap;
          gap: 0.75rem;
          justify-content: center;
        }

        nav a,
        nav button {
          font-size: 0.85rem;
        }

        .search-btn {
          order: 3;
          width: 36px;
          height: 36px;
          margin-left: 0.5rem;
        }

        .about::before,
        .about::after {
          display: none;
        }

        .about-shell {
          grid-template-columns: 1fr;
        }

        .about-right {
          border-left: none;
          padding-left: 0;
          border-top: 1px solid rgba(31, 44, 47, 0.08);
          padding-top: 1.5rem;
        }

        .offerings-grid {
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        }
      }