/* =================================================================
   BREAKPOINTS REFERENCE
   =================================================================
   Mobile:   768px   (max-width: 768px for mobile, min-width: 769px for desktop)
   Tablet:   1024px  (for intermediate layouts where needed)
   Desktop:  1280px  (for wide/container layouts where needed)

   These values are hardcoded in @media queries throughout this file
   and in footer.php / custom.js. Update all locations if changed.
   ================================================================= */

/**
 * D20 Starter Theme
 *
* Fonts | Tokens | Base | Components
 */

/* =================================================================
   FONTS
   ================================================================= */

/* Headings : IvyMode  — Adobe Fonts kit nxk3iuu
   Body     : Manrope  — Google Fonts 400/600/800
   Both are enqueued in inc/assets.php; nothing is self-hosted. */


/* =================================================================
   TOKENS
   ================================================================= */

:root {
    /* Primary — ink / navy */
    --color-primary-50: #f6f6f9;
    --color-primary-100: #d7d7dd;
    --color-primary-200: #b9b9c2;
    --color-primary-300: #9b9ca7;
    --color-primary-400: #7f7f8d;
    --color-primary-500: #636474;
    --color-primary-600: #494a5c;
    --color-primary-700: #313144;
    --color-primary-800: #1a1a2e;
    --color-primary-900: #15151e;

    /* Secondary — gold / sand */
    --color-secondary-50: #fbf6ef;
    --color-secondary-100: #e8dac1;
    --color-secondary-200: #d6be94;
    --color-secondary-300: #c4a266;
    --color-secondary-400: #b18632;
    --color-secondary-500: #926d23;
    --color-secondary-600: #735414;
    --color-secondary-700: #563d05;
    --color-secondary-800: #3a2700;
    --color-secondary-900: #201400;

    /* Accent — teal */
    --color-accent-50: #f1f8f9;
    --color-accent-100: #bbd4d6;
    --color-accent-200: #86b0b4;
    --color-accent-300: #508d93;
    --color-accent-400: #006b73;
    --color-accent-500: #005a60;
    --color-accent-600: #00494e;
    --color-accent-700: #00393d;
    --color-accent-800: #00292d;
    --color-accent-900: #001a1d;

    /* Neutral */
    --color-neutral-50: #f5f5f5;
    --color-neutral-100: #e4e5e7;
    --color-neutral-200: #c9cccf;
    --color-neutral-300: #bbc2ca;
    --color-neutral-400: #a8adb3;
    --color-neutral-500: #8e959e;
    --color-neutral-600: #6c747e;
    --color-neutral-700: #535961;
    --color-neutral-800: #3b3e43;
    --color-neutral-900: #141516;

    /* Error */
    --color-error-50: #f7f2f2;
    --color-error-100: #f0dbdb;
    --color-error-200: #e6b2b2;
    --color-error-300: #df7b7b;
    --color-error-400: #db3e3e;
    --color-error-500: #dc2626;
    --color-error-600: #af1a1a;
    --color-error-700: #851515;
    --color-error-800: #591313;
    --color-error-900: #390f0f;

    /* Brand aliases (identity — remapped per client by run-setup.php) */
    --color-brand: var(--color-secondary-400);
    --color-brand-dark: var(--color-secondary-500);
    --color-brand-light: var(--color-secondary-200);
    --color-brand-alt: var(--color-accent-400);
    --color-brand-alt-dark: var(--color-accent-500);

    /* Layout aliases (structural — safe neutral defaults) */
    --color-bg-light: var(--color-secondary-50);
    --color-bg-sand: var(--color-secondary-100);
    --color-bg-dark: var(--color-primary-800);
    --color-bg-footer: var(--color-primary-800);
    --color-text: var(--color-primary-600);
    --color-text-muted: var(--color-primary-500);
    --color-text-on-dark: #ffffff;
    --color-heading: var(--color-primary-700);
    --color-eyebrow: var(--color-accent-400);
    --color-eyebrow-on-dark: var(--color-secondary-200);

    /* Typography */
    --font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
    --font-heading: 'ivymode', 'Iowan Old Style', 'Times New Roman', serif;

    --text-xs: 0.75rem;      /* 12 */
    --text-sm: 0.875rem;     /* 14 — eyebrow, button */
    --text-base: 1.25rem;    /* 20 — body */
    --text-lg: 1.375rem;     /* 22 */
    --text-xl: 1.5rem;       /* 24 — H4 */
    --text-2xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
    --text-3xl: clamp(1.75rem, 1.6rem + 0.65vw, 2rem);   /* H3 — 32 */
    --text-4xl: clamp(2.25rem, 2.014rem + 0.939vw, 3rem); /* H2 — 36 @402 → 48 @1680 */
    --text-5xl: clamp(2.3125rem, 1.467rem + 3.365vw, 5rem); /* H1 — 37 @402 → 80 @1680 */

    --leading-tight: 1.1;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;

    --tracking-eyebrow: 0.15em;
    --tracking-heading: -0.02em;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 0.75rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Vertical rhythm between full-width sections */
    --section-y: clamp(3.75rem, 2rem + 5.25vw, 7.5rem); /* 60 @402 → 120 @1680 */

    /* Layout — the mock is an 1680 frame with 80px gutters, so content runs
       80…1600 (1520 wide). --container-max is the outer, padding-box width. */
    --container-max: 1680px;
    --gutter: clamp(1.25rem, -1.5625rem + 6.25vw, 5rem);

    /* Misc */
    --radius: 4px;
    --btn-height: 48px;
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    /* Figma draws this as a 20 blur / 20 spread black drop shadow; text-shadow
       has no spread, so it is stacked to build the same halo. */
    --shadow-hero-text: 0 0 20px rgb(0 0 0 / 0.85), 0 0 20px rgb(0 0 0 / 0.6), 0 0 34px rgb(0 0 0 / 0.45);
    --transition: 200ms ease;
}


/* =================================================================
   BASE
   ================================================================= */

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

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--color-neutral-900);
    background: var(--color-neutral-50);
    -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

/* Animate on scroll */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* `none`, not translateY(0): a resolved transform would leave a stacking
   context behind, and that isolates any mix-blend-mode inside (the Photo CTA
   headline) from the section background it blends with. */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Background image utility for components */
[class*="--bg-image"] {
    position: relative;
    background: var(--color-bg-dark) center/cover no-repeat;
    color: #fff;
}
[class*="--bg-image"] .eyebrow { color: var(--color-brand-light); }
[class*="--bg-image"] > .container,
[class*="--bg-image"] > [class*="__inner"] { position: relative; z-index: 1; }
[class*="__overlay"] { position: absolute; inset: 0; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-md);
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: var(--leading-tight);
    color: var(--color-heading);
}

p { margin: 0 0 var(--space-md); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-brand); }


/* =================================================================
   ACCESSIBILITY
   ================================================================= */

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: var(--space-sm);
    background: var(--color-brand);
    color: #fff;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
}
.skip-link:focus {
    left: var(--space-sm);
    outline: 2px solid var(--color-brand-dark);
    outline-offset: 2px;
}

/* Screen reader only (visually hidden) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus visible states */
:focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}

/* Focus on dark backgrounds */
[class*="--bg-dark"] :focus-visible,
[class*="--bg-brand"] :focus-visible,
[class*="--bg-image"] :focus-visible,
.site-footer :focus-visible {
    outline-color: #fff;
}

/* Minimum tap target size. .btn sets its own 48px height below — listing it
   here (especially as a.btn) would out-specify that and shrink every button. */
button,
input[type="submit"],
input[type="button"] {
    min-height: 44px;
}

/* Text overflow handling */
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

h1 {
    font-size: var(--text-5xl);
    line-height: 1.1;
}

h2 {
    font-size: var(--text-4xl);
    line-height: 1.1;
    letter-spacing: var(--tracking-heading);
}

h3 {
    font-size: var(--text-3xl);
    line-height: 1.5;
    color: var(--color-secondary-400);
}

h4 {
    font-size: var(--text-xl);
    line-height: 1.5;
    color: var(--color-neutral-700);
}

p { margin: 0 0 var(--space-lg); }
p:last-child { margin-bottom: 0; }

/* Prevent iOS text resize issues */
html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Keep elements visible without animation */
    .animate-on-scroll {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Container */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.container--narrow { max-width: 720px; }
.container--wide { max-width: 1400px; }

/* Prose (WYSIWYG content) */
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-xl); }
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-lg); }
.prose ul, .prose ol { padding-left: var(--space-lg); }
.prose li { margin-bottom: var(--space-xs); }
.prose a { color: var(--color-brand); text-decoration: underline; }

/* Eyebrow / Subhead */
.eyebrow {
    display: block;
    margin: 0 0 var(--space-sm);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-eyebrow);
}
.subhead {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

/* Callout box inside prose (e.g. the Restaurant's sustainability note) */
.nbc-callout {
    margin-top: var(--space-lg);
    padding: 20px 24px;
    background: var(--color-secondary-50);
    border-left: 4px solid var(--color-secondary-400);
}
.nbc-callout h3 {
    margin: 0 0 8px;
    font-size: 1.5rem;
    line-height: 1.3;
    color: var(--color-secondary-500);
}
.nbc-callout p {
    margin: 0;
    /* Same size as the surrounding body copy */
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text);
}

/* Text-style CTA: extrabold uppercase with a thick underline and an arrow */
.btn--text {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 0 6px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-accent-400);
    border-bottom: 3px solid currentColor;
    transition: color var(--transition);
}
.btn--text:hover { color: var(--color-accent-500); }
.btn--text__icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Eyebrows sit on sand over dark backgrounds */
[class*="--bg-dark"] .eyebrow,
[class*="--bg-image"] .eyebrow,
.nbc-content--on-dark .eyebrow,
.site-footer .eyebrow {
    color: var(--color-eyebrow-on-dark);
}

/* Buttons — 48px tall, 4px radius, 25px side padding (Figma) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: var(--btn-height);
    /* The tracking adds a trailing space after the last letter that Figma does
       not draw, so the right padding gives it back. */
    padding: 0 calc(25px - var(--tracking-eyebrow)) 0 25px;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
/* Gold — the default call to action */
.btn--primary {
    background: var(--color-secondary-400);
    color: #fff;
    border-color: var(--color-secondary-400);
}
.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--color-secondary-500);
    border-color: var(--color-secondary-500);
    color: #fff;
}
/* Teal — the paired action */
.btn--secondary {
    background: var(--color-accent-400);
    color: #fff;
    border-color: var(--color-accent-400);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
    background: var(--color-accent-500);
    border-color: var(--color-accent-500);
    color: #fff;
}
.btn--white {
    background: #fff;
    color: var(--color-primary-700);
    border-color: #fff;
}
.btn--white:hover {
    background: var(--color-secondary-50);
}
.btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgb(255 255 255 / 0.5);
}
.btn--outline-light:hover {
    background: rgb(255 255 255 / 0.1);
    border-color: #fff;
}
/* Full-width buttons — mobile default in the mockups */
.btn--block { width: 100%; }

.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
}
.link-arrow svg { width: 1em; height: 1em; transition: transform var(--transition); }
.link-arrow:hover svg { transform: translateX(4px); }

/* Icons */
svg { width: 24px; height: 24px; flex-shrink: 0; }


/* =================================================================
   HEADER
   ================================================================= */

.site-header {
    position: absolute;
    inset: 0 0 auto;
    z-index: 100;
    padding: 34px 0;
    transition: background-color var(--transition), padding var(--transition);
}
.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* Solid variant — every page that does not open on a hero */
.site-header--solid {
    position: sticky;
    top: 0;
    background: var(--color-primary-800);
}

/* Overlay variant turns solid once the hero has scrolled past */
.site-header--overlay.is-stuck {
    position: fixed;
    padding: 14px 0;
    background: var(--color-primary-800);
    box-shadow: 0 2px 24px rgb(0 0 0 / 0.25);
}

/* Logo */
.site-header__logo {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}
.site-header__logo .site-logo__img {
    width: auto;
    height: 134px;
    transition: height var(--transition);
}
.site-header.is-stuck .site-header__logo .site-logo__img { height: 60px; }

/* Inline nav */
.site-nav {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}
.site-nav__menu {
    display: flex;
    align-items: center;
    gap: 43px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav__menu a {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.1;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--transition);
}
.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a {
    color: var(--color-secondary-200);
}

/* Right-hand actions */
.site-header__actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}
.site-header__cta { white-space: nowrap; }

/* Hamburger */
.site-header__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.site-header__toggle svg {
    display: block;
    width: 38px;
    height: 25px;
    color: #fff;
}

/* Language switcher — compact (header) */
.lang-switch--compact { position: relative; }
.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    cursor: pointer;
}
.lang-switch__caret {
    width: 7px;
    height: 4px;
    background: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: transform var(--transition);
}
.lang-switch__toggle[aria-expanded="true"] .lang-switch__caret { transform: rotate(180deg); }
.lang-switch__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 10;
    min-width: 140px;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}
.lang-switch__menu a {
    display: block;
    padding: 8px 16px;
    color: var(--color-primary-700);
    font-size: 1rem;
    text-decoration: none;
}
.lang-switch__menu a:hover { background: var(--color-secondary-50); }

/* Language switcher — full (footer / drawer) */
.lang-switch--full {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.lang-switch__label {
    font-size: 1rem;
    color: var(--color-primary-200);
}
.lang-switch__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
}
.lang-switch__link img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}
.lang-switch__link:not(.is-current) { opacity: 0.65; }
.lang-switch__link:hover { opacity: 1; }

@media (max-width:1600px) {
    .site-header__cta {
        display:none;
    }
}

/* =================================================================
   DRAWER (mobile nav + desktop hamburger panel)
   ================================================================= */

.site-drawer {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgb(21 21 30 / 0.6);
    opacity: 0;
    transition: opacity var(--transition);
}
.site-drawer.is-open { opacity: 1; }
.site-drawer__panel {
    position: absolute;
    inset: 0 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    /* Wide enough for the three footer columns side by side */
    width: min(780px, 100%);
    padding: var(--space-3xl) var(--gutter);
    overflow-y: auto;
    background: var(--color-primary-800);
    transform: translateX(100%);
    transition: transform 280ms ease;
}
.site-drawer.is-open .site-drawer__panel { transform: translateX(0); }
.site-drawer__close {
    align-self: flex-end;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: 0;
    color: #fff;
    cursor: pointer;
}
.site-drawer__close svg {
    display: block;
    width: 30px;
    height: 30px;
}
.site-drawer__menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-drawer__menu a {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    line-height: 1.2;
    color: #fff;
    text-decoration: none;
}
.site-drawer__menu a:hover { color: var(--color-secondary-200); }
.site-drawer__menu .sub-menu {
    margin: var(--space-sm) 0 0;
    padding: 0 0 0 var(--space-md);
    list-style: none;
}
.site-drawer__menu .sub-menu a { font-size: 1.25rem; }

.site-drawer__menu { gap: 0; }
/* Booking links: arrow appended, and the same hairline that closes the group
   also separates the links from each other */
.site-drawer__menu > li { padding: 14px 0; }
.site-drawer__menu > li:first-child { padding-top: 0; }
.site-drawer__menu > li + li { border-top: 1px solid rgb(255 255 255 / 0.15); }
.site-drawer__menu a {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.site-drawer__menu-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform var(--transition);
}
.site-drawer__menu a:hover .site-drawer__menu-icon { transform: translateX(4px); }

/* Footer's Visit / Plan / More columns, with the footer's type treatment.
   Three across in the desktop panel; two to a row (More wrapping) on phones. */
.site-drawer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xl) var(--space-lg);
    /* Cancel the panel's 32px gap so the closing rule sits the same 14px under
       the last booking link as the rule between the links does */
    margin-top: calc(-1 * var(--space-xl));
    padding-top: var(--space-xl);
    border-top: 1px solid rgb(255 255 255 / 0.15);
}
.site-drawer__col-title {
    margin: 0 0 var(--space-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-primary-300);
}
.site-drawer__col-menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-drawer__col-menu li {
    font-size: 1rem;
    line-height: 1.5;
}
.site-drawer__col-menu a {
    display: inline-block;
    font-family: var(--font-sans);
    color: #fff;
    text-decoration: none;
}
.site-drawer__col-menu a:hover { color: var(--color-secondary-200); }

/* Booking CTA and the call CTA share a row; they stack on phones */
.site-drawer__ctas {
    display: flex;
    gap: var(--space-md);
}
.site-drawer__ctas .btn { flex: 1; }
.site-drawer__call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}
.site-drawer__call-icon { width: 18px; height: 18px; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
    .site-drawer,
    .site-drawer__panel { transition: none; }
}

/* Language switcher in the drawer: the panel is a stretched flex column, so
   the wrapper would span its full width and the menu would drop at the far
   right edge. Shrink it to the toggle and open the menu under it, left-aligned. */
.site-drawer__lang { align-self: flex-start; }
.site-drawer__lang .lang-switch__menu { right: auto; left: 0; }

@media (max-width: 767px) {
    .site-drawer__ctas { flex-direction: column; }
}

/* Lock scroll behind the drawer */
body.drawer-open { overflow: hidden; }

/* Desktop already has the switcher in the header bar */
@media (min-width: 1240px) {
    .site-drawer__lang { display: none; }
}

/* The full-size logo, the five nav items and the CTA only all fit side by side
   from about 1440 up. Between there and the drawer breakpoint the header gives
   a little back. */
@media (min-width: 1240px) and (max-width: 1439px) {
    .site-header__logo .site-logo__img { height: 100px; }
    .site-header__inner,
    .site-header__actions { gap: var(--space-lg); }
    .site-nav__menu { gap: 28px; }
}

@media (max-width: 1239px) {
    .site-header { padding: 16px 0; }
    .site-header--overlay::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: rgb(255 255 255 / 0.25);
    }
    .site-header--overlay.is-stuck::after { display: none; }
    .site-header__logo .site-logo__img,
    .site-header.is-stuck .site-header__logo .site-logo__img { height: 75px; }
    .site-nav,
    .site-header__cta,
    .site-header__lang { display: none; }
    .site-header__inner { justify-content: space-between; }
    .site-header__actions { gap: var(--space-md); }
    .site-drawer__panel { width: 100%; }
    .site-drawer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =================================================================
   MEGA MENU
   ================================================================= */

.c-mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    border-top: 1px solid var(--color-neutral-200);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
    pointer-events: none;
}

.c-mega-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.c-mega-menu__inner {
    padding: var(--space-xl) var(--gutter);
}

.c-mega-menu__columns {
    display: flex;
    gap: var(--space-lg);
}

.c-mega-menu__col {
    min-width: 0;
}

.c-mega-menu__col-title {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-sm);
    color: var(--color-text);
}

.c-mega-menu__menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.c-mega-menu__menu li {
    margin-bottom: var(--space-xs);
}

.c-mega-menu__menu a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition);
}

.c-mega-menu__menu a:hover {
    color: var(--color-brand);
}

.c-mega-menu__menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: var(--space-sm) 0 var(--space-sm) var(--space-sm);
}

.c-mega-menu__menu .sub-menu a {
    font-size: var(--text-sm);
}

.c-mega-menu__text {
    color: var(--color-text);
}

.c-mega-menu__image {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.c-mega-menu__contact-info p {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

@media (max-width: 768px) {
    .c-mega-menu {
        display: none !important;
    }
}

/* =================================================================
   FOOTER
   Measurements come from the Figma "Footer (desktop)" frame (1680 wide,
   762 tall) and "Footer" mobile frame (402 wide). Values are px where the
   design is px-exact and no token matches.
   ================================================================= */

.site-footer {
    background: var(--color-bg-footer);
    color: #fff;
    padding: 80px 0 40px;
}
.site-footer__inner,
.site-footer__bottom {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.site-footer__inner {
    display: grid;
    /* Brand block spans 80…~500; link block starts at 1015 of 1680. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 585px);
    column-gap: 40px;
    align-items: start;
}

/* Brand column */
.site-footer__logo {
    display: block;
    line-height: 0;
}
.site-footer__logo .site-logo__img {
    width: auto;
    height: 134px;
}
.site-footer__blurb {
    max-width: 344px;
    margin: 32px 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-primary-200);
}
.site-footer__find { margin-top: 116px; }

.site-footer__col-title {
    margin: 0 0 var(--space-md);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-primary-300);
}

.site-footer__contact {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 384px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 1rem;
    line-height: 1.5;
}
.site-footer__icon {
    flex-shrink: 0;
    display: block;
    width: 24px;
    color: var(--color-secondary-200);
}
.site-footer__icon svg { display: block; width: 24px; height: 24px; }
/* The location pin's artwork sits high in its box; drop it to sit level with
   the first line of the address like its neighbours do. */
.site-footer__contact li:first-child .site-footer__icon { margin-top: 6px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--color-secondary-200); text-decoration: underline; }

/* Link columns */
.site-footer__links {
    display: flex;
    flex-direction: column;
    /* Badge (116 tall) sits ~45px under the menu columns; Follow Along
       is centred against it. (41 here because browser line boxes run
       24px where Figma's are 23.) */
    gap: 41px;
}
.site-footer__columns {
    display: grid;
    /* Visit / Plan / More start at 1015 / 1232 / 1489 of 1680. */
    grid-template-columns: minmax(0, 217fr) minmax(0, 257fr) minmax(0, 111fr);
}
.site-footer__menu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer__menu li {
    font-size: 1rem;
    line-height: 1.5;
}
.site-footer__menu a {
    display: inline-block;
    white-space: nowrap;
}

/* Follow Along + badge */
.site-footer__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-xl);
}
.site-footer__follow .site-footer__col-title { margin-bottom: 17px; }
.site-footer__social {
    display: flex;
    align-items: center;
    gap: 33px;
}
.site-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    /* Keep the layout height at the 24px icon so spacing matches the
       design; the tap target still spans 44px vertically. */
    margin: -10px 0;
    color: var(--color-secondary-200);
}
.site-footer__social svg,
.site-footer__social-icon {
    display: block;
    width: auto;
    height: 24px;
}
.site-footer__social a:hover { color: #fff; }
.site-footer__badge {
    line-height: 0;
    /* Badge is 104×116 at 1491…1595, i.e. 5px inside the right gutter. */
    margin-right: 5px;
}
.site-footer__badge img {
    width: auto;
    height: 116px;
}

/* Bottom bar */
.site-footer__bottom {
    display: flex;
    align-items: center;
    gap: 48px;
    margin-top: 57px;
    font-size: var(--text-xs);
    line-height: 21px;
    color: var(--color-primary-200);
}
.site-footer__copyright,
.site-footer__credits { margin: 0; }
.site-footer__credits { margin-left: auto; }
.site-footer__bottom-menu {
    display: flex;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Language switcher inside the footer bar */
.site-footer__lang { gap: var(--space-md); }
.site-footer__lang .lang-switch__label {
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.5;
}
.site-footer__lang .lang-switch__link {
    /* 44px tap target without inflating the 21px row. */
    margin: -12px 0;
    line-height: 1.5;
    opacity: 1;
}
.site-footer__lang .lang-switch__link:not(.is-current) { color: var(--color-primary-300); }
.site-footer__lang .lang-switch__link:not(.is-current) img { opacity: 0.5; }
.site-footer__lang .lang-switch__link:hover { color: #fff; }
.site-footer__lang .lang-switch__link:hover img { opacity: 1; }

@media (max-width: 1023px) {
    .site-footer { padding: 60px 0 20px; }
    .site-footer__inner {
        position: relative;
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }
    /* Mobile order: logo, blurb (badge floats alongside), Follow Along,
       Find Us, then menu columns. Both wrappers flatten so the pieces can
       be reordered as siblings of one single-column grid. */
    .site-footer__brand,
    .site-footer__links {
        display: contents;
    }
    .site-footer__logo { order: 1; }
    .site-footer__logo .site-logo__img { height: 75px; }
    .site-footer__blurb {
        order: 2;
        max-width: 248px;
        margin-top: 16px;
        font-size: var(--text-xs);
    }
    .site-footer__meta {
        order: 3;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 37px;
    }
    .site-footer__find {
        order: 4;
        margin-top: 35px;
    }
    .site-footer__columns {
        order: 5;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xl);
        margin-top: 37px;
    }
    .site-footer__badge {
        position: absolute;
        /* 23px below the logo top, right edge 23px in from the frame. */
        top: 23px;
        right: calc(var(--gutter) + 3px);
        margin: 0;
    }
    .site-footer__badge img { height: 105px; }
    .site-footer__bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-top: 42px;
        line-height: 20px;
    }
    .site-footer__lang { margin-bottom: 28px; }
    .site-footer__credits { margin-left: 0; }
    .site-footer__bottom-nav { order: 5; }
}

/* Phone: the mobile design carries no Visit / Plan / More columns —
   the drawer already holds every page link. */
@media (max-width: 767px) {
    .site-footer__columns { display: none; }
    /* The sticky Book Now bar (~66px) docks over the bottom of the page on
       phones; leave room so the copyright and credit line clear it. */
    body:has(.nbc-sticky-cta) .site-footer { padding-bottom: 96px; }

    .site-footer__blurb {
        padding-right:2rem;
    }
}

@media (max-width:350px) {
    .site-footer__blurb {
        padding-right:0;
        max-width:100%;
    }

    .site-footer__badge {
        position:relative;
        right:auto;
        top:auto;
    }
}

/* =================================================================
   COMPONENTS
   ================================================================= */

/* Adjacent same-background components: collapse top padding */
[class*="--bg-white"] + [class*="--bg-white"],
[class*="--bg-light"] + [class*="--bg-light"],
[class*="--bg-dark"] + [class*="--bg-dark"],
[class*="--bg-brand"] + [class*="--bg-brand"] {
    padding-top: 0;
}

/* ----------------------- UNDER CONSTRUCTION ----------------------- */

.c-under-construction {
    padding: var(--space-3xl) 0;
    min-height: 50vh;
    display: flex;
    align-items: center;
    background: var(--color-bg-light);
}
.c-under-construction h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
    color: var(--color-neutral-700);
}
.c-under-construction p {
    color: var(--color-neutral-500);
    font-size: var(--text-lg);
}

/* ----------------------- HERO ----------------------- */

.c-hero {
    position: relative;
    display: flex;
    align-items: center;
    padding: var(--space-3xl) 0;
    background: var(--color-bg-dark) center/cover no-repeat;
    color: #fff;
    overflow: hidden;
}
.c-hero--h-full { min-height: 100vh; }
.c-hero--h-large { min-height: 80vh; }
.c-hero--h-medium { min-height: 60vh; }
.c-hero--h-small { min-height: 40vh; }

.c-hero__overlay {
    position: absolute;
    inset: 0;
    background: #000;
}
.c-hero__inner {
    position: relative;
    z-index: 1;
}
.c-hero__content { max-width: 700px; }

.c-hero--center { text-align: center; }
.c-hero--center .c-hero__inner { display: flex; flex-direction: column; align-items: center; }
.c-hero--center .c-hero__content { margin: 0 auto; }

.c-hero__eyebrow { opacity: 0.8; color: inherit; }
.c-hero__headline { font-size: var(--text-5xl); margin-bottom: var(--space-md); }
.c-hero__subhead { font-size: var(--text-xl); opacity: 0.9; margin-bottom: var(--space-lg); }
.c-hero__buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.c-hero--center .c-hero__buttons { justify-content: center; }

/* Split layout */
.c-hero--split { background: var(--color-bg-dark); }
.c-hero--split .c-hero__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    align-items: center;
    max-width: none;
}
.c-hero--split .c-hero__content { max-width: none; }
.c-hero--split .c-hero__media { order: 1; }
.c-hero--split-left .c-hero__media { order: -1; }
.c-hero--split .c-hero__image {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

@media (max-width: 768px) {
    .c-hero--split .c-hero__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .c-hero--split .c-hero__media { order: -1; }
    .c-hero--split .c-hero__buttons { justify-content: center; }
}

/* Minimal layout */
.c-hero--minimal {
    background: #fff;
    color: var(--color-neutral-900);
    min-height: auto;
    padding: var(--space-xl) 0;
    border-bottom: 1px solid var(--color-neutral-200);
}
.c-hero--minimal .c-hero__headline {
    font-size: var(--text-3xl);
    margin-bottom: 0;
}

/* Parallax */
.c-hero__parallax {
    position: absolute;
    inset: -20%;
    background: center/cover no-repeat;
    will-change: transform;
}
.c-hero--parallax {
    background: transparent;
}

@media (max-width: 768px) {
    .c-hero { padding: var(--space-2xl) 0; }
    .c-hero__headline { font-size: var(--text-3xl); }
    .c-hero--minimal .c-hero__headline { font-size: var(--text-2xl); }
}

.c-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Breadcrumbs */
.breadcrumbs { margin-bottom: var(--space-sm); }
.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--text-sm);
}
.breadcrumbs__item { display: flex; align-items: center; gap: var(--space-xs); }
.breadcrumbs__link { color: var(--color-neutral-500); text-decoration: none; }
.breadcrumbs__link:hover { color: var(--color-brand); }
.breadcrumbs__sep { color: var(--color-neutral-300); }
.breadcrumbs__current { color: var(--color-neutral-700); }


/* ----------------------- CONTENT + MEDIA ----------------------- */

.c-content-media { padding: var(--space-3xl) 0; }
.c-content-media__inner { display: grid; gap: var(--space-2xl); align-items: center; }

@media (min-width: 768px) {
    .c-content-media__inner { grid-template-columns: 1fr 1fr; }
    .c-content-media--left .c-content-media__media { order: -1; }
}

.c-content-media__buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); }
.c-content-media__image { border-radius: var(--radius); }
.c-content-media__video { position: relative; padding-bottom: 56.25%; border-radius: var(--radius); overflow: hidden; }
.c-content-media__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

.c-content-media--bg-white { background: #fff; }
.c-content-media--bg-light { background: var(--color-bg-light); }
.c-content-media--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-content-media--bg-dark .eyebrow { color: var(--color-brand-light); }


/* ----------------------- CARDS ----------------------- */

.c-cards { padding: var(--space-3xl) 0; }
.c-cards__header { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); }
.c-cards__grid { display: grid; gap: var(--space-lg); }

@media (min-width: 769px) {
    .c-cards--cols-2 .c-cards__grid,
    .c-cards--cols-3 .c-cards__grid,
    .c-cards--cols-4 .c-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .c-cards--cols-3 .c-cards__grid { grid-template-columns: repeat(3, 1fr); }
    .c-cards--cols-4 .c-cards__grid { grid-template-columns: repeat(4, 1fr); }
}

.c-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform var(--transition), box-shadow var(--transition);
}
a.c-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.c-card__image { margin: 0; }
.c-card__image img { aspect-ratio: 4/3; object-fit: cover; width: 100%; display: block; }
.c-card__content { padding: var(--space-lg); flex: 1; display: flex; flex-direction: column; }
.c-card__title { font-size: var(--text-xl); margin-bottom: var(--space-sm); }
.c-card__desc { color: var(--color-neutral-600); flex: 1; }
.c-card__link { margin-top: var(--space-md); font-weight: 600; color: var(--color-brand); display: inline-flex; align-items: center; gap: var(--space-xs); }
.c-card__link svg { width: 1em; height: 1em; transition: transform var(--transition); }
a.c-card:hover .c-card__link svg { transform: translateX(4px); }

/* Card Style: Horizontal */
.c-cards--style-horizontal .c-card { flex-direction: row; }
.c-cards--style-horizontal .c-card__image { flex: 0 0 40%; max-width: 40%; }
.c-cards--style-horizontal .c-card__image img { aspect-ratio: 1/1; height: 100%; }
.c-cards--style-horizontal .c-card__content { justify-content: center; }
@media (max-width: 768px) {
    .c-cards--style-horizontal .c-card { flex-direction: column; }
    .c-cards--style-horizontal .c-card__image { flex: none; max-width: 100%; }
    .c-cards--style-horizontal .c-card__image img { aspect-ratio: 16/9; height: auto; }
}

/* Card Style: Overlay */
.c-cards--style-overlay .c-card { position: relative; min-height: 280px; }
.c-cards--style-overlay .c-card__image { position: absolute; inset: 0; }
.c-cards--style-overlay .c-card__image img { aspect-ratio: auto; height: 100%; }
.c-cards--style-overlay .c-card__image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
}
.c-cards--style-overlay .c-card__content {
    position: relative;
    z-index: 1;
    justify-content: flex-end;
    color: #fff;
}
.c-cards--style-overlay .c-card__desc { color: var(--color-neutral-200); }
.c-cards--style-overlay .c-card__link { color: #fff; }
a.c-cards--style-overlay .c-card:hover .c-card__image img { transform: scale(1.05); }
.c-cards--style-overlay .c-card__image img { transition: transform var(--transition); }

/* Card Style: Minimal */
.c-cards--style-minimal .c-card {
    flex-direction: row;
    box-shadow: none;
    border: 1px solid var(--color-neutral-200);
}
.c-cards--style-minimal .c-card__image {
    order: 2;
    flex: 0 0 auto;
    width: 80px;
    height: 80px;
    margin: var(--space-lg);
    margin-left: 0;
    border-radius: 50%;
    overflow: hidden;
}
.c-cards--style-minimal .c-card__image img {
    aspect-ratio: 1/1;
    height: 100%;
    width: 100%;
}
.c-cards--style-minimal .c-card__content {
    padding: var(--space-xl);
    flex: 1;
}
a.c-cards--style-minimal .c-card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--color-brand);
}

.c-cards--bg-white { background: #fff; }
.c-cards--bg-light { background: var(--color-bg-light); }
.c-cards--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-cards--bg-dark .c-card { background: var(--color-neutral-800); }
.c-cards--bg-dark .c-card__desc { color: var(--color-neutral-300); }
.c-cards--bg-dark.c-cards--style-minimal .c-card { border-color: var(--color-neutral-700); }
.c-cards--bg-dark.c-cards--style-minimal a.c-card:hover { border-color: var(--color-brand-light); }


/* ----------------------- CTA ----------------------- */

.c-cta { padding: var(--space-3xl) 0; }
.c-cta__inner { display: flex; flex-direction: column; gap: var(--space-lg); }
.c-cta--center { text-align: center; }
.c-cta--center .c-cta__inner { align-items: center; max-width: 700px; margin: 0 auto; }

@media (min-width: 768px) {
    .c-cta--split .c-cta__inner,
    .c-cta--has-form .c-cta__inner { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-2xl); }
    .c-cta--split .c-cta__content,
        .c-cta--split .c-cta__content, .c-cta--has-form .c-cta__content {
        flex: 1;
        flex-basis: 50%;
        width: 50%;
    }
	.c-cta--split .c-cta__form, .c-cta--has-form .c-cta__form {
		flex: 1;
		max-width: 50%;
		flex-basis: 50%;
	}
	
}

.c-cta__content h2 { margin-bottom: var(--space-sm); }
.c-cta__content p { margin: 0; }
.c-cta__buttons { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.c-cta--center .c-cta__buttons { justify-content: center; }

.c-cta__form {
    background: rgba(255, 255, 255, 0.1);
    padding: var(--space-xl);
    border-radius: var(--radius);
}

.c-cta--bg-light .c-cta__form {
    background: #fff;
    box-shadow: var(--shadow);
}

.c-cta__form .gform_wrapper { margin: 0; }
.c-cta__form .gfield { margin-bottom: var(--space-md); }
.c-cta__form input:not([type="submit"]),
.c-cta__form textarea,
.c-cta__form select {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.9);
    font-size: var(--text-base);
}

.c-cta--bg-dark form label, .c-cta--bg-dark form legend, .c-cta--bg-dark .gfield_description {
    color: var(--color-neutral-50)!important;
}

.gform-footer.gform_footer {
    margin-top: 0!important;
}

div#gform_fields_1 {
    row-gap: var(--space-md);
}

div.gform-theme--framework .gform-field-label>.gfield_required:where(:not(.gform-theme__disable):not(.gform-theme__disable *):not(.gform-theme__disable-framework):not(.gform-theme__disable-framework *)) {
    color: var(--color-error-500);
}

.c-cta--bg-light .c-cta__form input:not([type="submit"]),
.c-cta--bg-light .c-cta__form textarea,
.c-cta--bg-light .c-cta__form select {
    border-color: var(--color-neutral-300);
    background: #fff;
}

.c-cta__form .gform_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 0.75em 1.5em;
    font-size: var(--text-base);
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition);
    /* Default: white button for dark/brand backgrounds */
    background: #fff;
    color: var(--color-brand);
    border-color: #fff;
}

.c-cta__form .gform_button:hover {
    background: var(--color-neutral-100);
    border-color: var(--color-neutral-100);
}

/* Light background: use primary button style */
.c-cta--bg-light .c-cta__form .gform_button {
    background: var(--color-brand);
    color: #fff;
    border-color: var(--color-brand);
}

.c-cta--bg-light .c-cta__form .gform_button:hover {
    background: var(--color-brand-dark);
    border-color: var(--color-brand-dark);
}

.c-cta--bg-brand { background: var(--color-brand); color: #fff; }
.c-cta--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-cta--bg-light { background: var(--color-bg-light); }

.grecaptcha-badge {
    position: relative !important;
    bottom: auto !important;
    right: auto !important;
	margin-bottom: var(--space-lg) !important;
}

.gform_wrapper .gfield.gfield--type-captcha.gfield--captcha-invisible {
    position: relative;
    display: block;
    block-size: auto;
    inline-size: auto;
    min-block-size: auto;
	min-height: 60px;
}


/* ----------------------- TESTIMONIALS ----------------------- */

.c-testimonials { padding: var(--space-3xl) 0; }
.c-testimonials__header { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); }

.c-testimonial { text-align: center; max-width: 800px; margin: 0 auto; }
.c-testimonial__icon { width: 48px; height: 48px; margin: 0 auto var(--space-lg); color: var(--color-brand); opacity: 0.3; }
.c-testimonial__quote { font-size: var(--text-xl); font-style: italic; line-height: var(--leading-relaxed); margin-bottom: var(--space-lg); }
.c-testimonial--featured .c-testimonial__quote { font-size: var(--text-2xl); }
.c-testimonial__author { display: flex; align-items: center; justify-content: center; gap: var(--space-md); text-align: left; }
.c-testimonial__photo { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.c-testimonial__author cite { display: block; font-style: normal; font-weight: 600; }
.c-testimonial__author span { font-size: var(--text-sm); color: var(--color-neutral-500); }

/* Slider nav */
.c-testimonials__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-xl); }
.c-testimonials__prev,
.c-testimonials__next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid var(--color-neutral-300);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}
.c-testimonials__prev:hover,
.c-testimonials__next:hover { border-color: var(--color-neutral-500); }
.c-testimonials__prev svg,
.c-testimonials__next svg { width: 20px; height: 20px; }
.c-testimonials__dots { display: flex; gap: var(--space-xs); }
.c-testimonials__dot {
    width: 10px;
    height: 10px;
    background: var(--color-neutral-300);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}
.c-testimonials__dot:hover,
.c-testimonials__dot.is-active { background: var(--color-brand); }

/* Grid layout */
.c-testimonials--grid .c-testimonials__grid { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) {
    .c-testimonials--grid .c-testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .c-testimonials--grid .c-testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}
.c-testimonials--grid .c-testimonial { text-align: left; background: #fff; padding: var(--space-lg); border-radius: var(--radius); box-shadow: var(--shadow); }
.c-testimonials--grid .c-testimonial__author { justify-content: flex-start; }
.c-testimonials--grid .c-testimonial__icon { width: 32px; height: 32px; margin: 0 0 var(--space-md); }
.c-testimonials--grid .c-testimonial__quote { font-size: var(--text-base); }

.c-testimonials--bg-white { background: #fff; }
.c-testimonials--bg-light { background: var(--color-bg-light); }
.c-testimonials--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-testimonials--bg-dark .c-testimonial__author span { color: var(--color-neutral-400); }


/* ----------------------- ACCORDION ----------------------- */

.c-accordion { padding: var(--section-y) 0; }
.c-accordion__header { text-align: center; margin-bottom: var(--space-2xl); }
.c-accordion__items { border-top: 1px solid var(--color-neutral-200); }
.c-accordion__item { border-bottom: 1px solid var(--color-neutral-200); }
.c-accordion__item h3 { margin: 0; font-size: var(--text-base); }
.c-accordion__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-lg) 0;
    font: inherit;
    font-weight: 600;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}
.c-accordion__trigger:hover { color: var(--color-brand); }
.c-accordion__icon { width: 20px; height: 20px; transition: transform var(--transition); }
.c-accordion__item.is-open .c-accordion__icon { transform: rotate(180deg); }
.c-accordion__content { padding-bottom: var(--space-lg); color: var(--color-neutral-600); }

.c-accordion--bg-white { background: #fff; }
.c-accordion--bg-light { background: var(--color-bg-light); }


/* ----------------------- STATS ----------------------- */

.c-stats { padding: var(--space-3xl) 0; }
.c-stats__header { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); }
.c-stats__grid { display: grid; gap: var(--space-xl); text-align: center; }
@media (min-width: 769px) {
    .c-stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .c-stats__grid { grid-template-columns: repeat(4, 1fr); }
}
.c-stat__number { font-size: var(--text-4xl); font-weight: 700; color: var(--color-brand); line-height: 1; }
.c-stat__label { margin-top: var(--space-sm); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-neutral-500); }

.c-stats--bg-white { background: #fff; }
.c-stats--bg-light { background: var(--color-bg-light); }
.c-stats--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-stats--bg-dark .c-stat__number { color: var(--color-brand-light); }
.c-stats--bg-dark .c-stat__label { color: var(--color-neutral-400); }
.c-stats--bg-brand { background: var(--color-brand); color: #fff; }
.c-stats--bg-brand .c-stat__number { color: #fff; }
.c-stats--bg-brand .c-stat__label { color: rgba(255,255,255,0.8); }


/* ----------------------- LOGO GRID ----------------------- */

.c-logos { padding: var(--space-2xl) 0; }
.c-logos__header { text-align: center; margin-bottom: var(--space-xl); }
.c-logos__header h2 { font-size: var(--text-lg); font-weight: 500; }
.c-logos__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-lg) var(--space-xl); }
.c-logos__item { max-width: 140px; height: 48px; display: flex; align-items: center; }
.c-logos__item img { max-width: 100%; max-height: 100%; object-fit: contain; transition: filter var(--transition), opacity var(--transition); }
.c-logos--gray .c-logos__item img { filter: grayscale(100%); opacity: 0.6; }
.c-logos--gray .c-logos__item:hover img { filter: grayscale(0); opacity: 1; }

.c-logos--bg-white { background: #fff; }
.c-logos--bg-light { background: var(--color-bg-light); }


/* ----------------------- FORM SECTION ----------------------- */

.c-form-section { padding: var(--section-y) 0; }
.c-form-section--center .c-form-section__inner { max-width: 600px; margin: 0 auto; }
/* Wide modifier (Events inquiry): a broader centred column */
.c-form-section--wide.c-form-section--center .c-form-section__inner { max-width: 1000px; }

/* Contact channels in a split layout's side column (Contact page) */
.c-form-section__channels {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin: var(--space-xl) 0 0;
    padding: 0;
    list-style: none;
}
.c-form-section__channel {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}
.c-form-section__channel-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    color: #fff;
    background: var(--color-accent-500);
    border-radius: 50%;
}
.c-form-section__channel-icon svg { width: 20px; height: 20px; }
.c-form-section__channel-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-base);
    line-height: 1.5;
}
.c-form-section__channel-label {
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-accent-500);
}
.c-form-section__channel-body a {
    color: var(--color-text);
    text-decoration: none;
}
.c-form-section__channel-body a:hover { text-decoration: underline; }

/* Gravity Forms controls inside a form section: body-copy type, never the
   Orbital theme's oversized 24px inputs (selects come up to match) */
.c-form-section .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
.c-form-section .gform_wrapper select,
.c-form-section .gform_wrapper textarea {
    font-size: var(--text-base);
    font-family: var(--font-sans);
}

/* The submit matches the site's gold primary button. The !importants beat the
   Gravity Forms Orbital theme's own button styling. */
.c-form-section .gform_wrapper .gform_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height) !important;
    padding: 0 calc(25px - var(--tracking-eyebrow)) 0 25px !important;
    font-family: var(--font-sans) !important;
    font-size: var(--text-sm) !important;
    font-weight: 800 !important;
    line-height: 1.5;
    letter-spacing: var(--tracking-eyebrow) !important;
    text-transform: uppercase !important;
    text-decoration: none;
    color: #fff !important;
    background: var(--color-secondary-400) !important;
    border: 1px solid var(--color-secondary-400) !important;
    border-radius: var(--radius) !important;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.c-form-section .gform_wrapper .gform_button:hover,
.c-form-section .gform_wrapper .gform_button:focus-visible {
    background: var(--color-secondary-500) !important;
    border-color: var(--color-secondary-500) !important;
    color: #fff !important;
}
.c-form-section--center .c-form-section__content { text-align: center; margin-bottom: var(--space-xl); }

@media (min-width: 768px) {
    .c-form-section--split .c-form-section__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3xl); align-items: start; }
}

.c-form-section__form { background: #fff; padding: var(--space-xl); border-radius: var(--radius); box-shadow: var(--shadow); }

.c-form-section--bg-white { background: #fff; }
.c-form-section--bg-light { background: var(--color-bg-light); }
.c-form-section--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-form-section--bg-dark .eyebrow { color: var(--color-brand-light); }

.iti__selected-country{
    display:none!important;
}

.gform_body input,
.gform_body textarea,
.gform_body select {
    /* Body-copy size — field text never outgrows a paragraph */
    font-size:var(--text-base)!important;
    padding:1.25rem 1rem!important;
    display:block!important;
    min-height:50px!important;
    border-radius:0!important;
    border-color:var(--color-neutral-200);
    box-shadow:none!important;
}

/* Selects: drop the native chrome for the input look, and keep the theme's
   chevron clear of the text */
.gform_body select {
    width:100%;
    /* border 2 + padding 20 + 28px line = the inputs' 50px, text dead centre */
    padding-block:10px!important;
    padding-right:3rem!important;
    line-height:1.4!important;
    background-color:#fff;
    appearance:none;
    -webkit-appearance:none;
}
/* A select still showing its placeholder option matches the input placeholders */
.gform_body select {
    font-size: .875rem !important;
    line-height: 2 !important;
}
.gform_body select:has(option[value=""]:checked) {
    color:var(--color-neutral-600);
}

.gform_body fieldset,
.gform-theme--foundation .gform-grid-row{
    margin:0!important;    
}

.gform-theme--foundation .gform_fields,
.gform-theme--foundation .gform-grid-row{
    gap:1.75rem!important;
}

.gform-theme--foundation .gform-grid-col{
    padding:0!important;
}

.gform_body input::placeholder,
.gform_body textarea::placeholder {
    color:var(--color-neutral-600);
}

.gform-theme--foundation .gform_footer{
    margin-block-start:0!important;
    margin-top:1.75rem!important;
}

.gfield_required_text,
.gform_validation_error_link,
.gfield_validation_message,
.gform_submission_error{
    color:var(--color-error-700)!important;
}

.gform-icon--circle-error{
	display:none!important;
}

.gform_validation_errors ol{
	padding:0!important;
}

.gform_validation_errors li{
	list-style-type:none;
	font-size:.875rem!important;
}

@media (max-width:1140px) {
    .gform-theme--foundation .gform-grid-row{
        flex-direction:column!important;
        align-items:flex-start!important;
    }

    .gform-theme--foundation .gform-grid-col.gform-grid-col--size-auto{
        flex-basis:100%!important;
        inline-size:100%!important;
    }

    .gform-theme--foundation .gfield--width-half{
        grid-column:span 12!important;
    }

    .gform-theme--foundation .gform_fields, 
    .gform-theme--foundation .gform-grid-row{
        gap:var(--space-sm)!important;
    }
}

@media (max-width:767px) {
    .c-form-section__content {
        margin-bottom:var(--space-xl);
    }
}

/* ----------------------- TEXT BLOCK ----------------------- */

.c-text-block { padding: var(--section-y) 0; }
.c-text-block h2 { margin-bottom: var(--space-lg); }

.c-text-block--bg-white { background: #fff; }
.c-text-block--bg-light { background: var(--color-bg-light); }


/* ----------------------- GALLERY ----------------------- */

.c-gallery { padding: var(--space-3xl) 0; }
.c-gallery__header { text-align: center; max-width: 700px; margin: 0 auto var(--space-2xl); }
.c-gallery__subhead { color: var(--color-neutral-600); margin-top: var(--space-sm); }

.c-gallery__grid {
    display: grid;
    gap: var(--space-md);
}
.c-gallery--cols-2 .c-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.c-gallery--cols-3 .c-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.c-gallery--cols-4 .c-gallery__grid { grid-template-columns: repeat(2, 1fr); }
.c-gallery--cols-5 .c-gallery__grid { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 769px) {
    .c-gallery--cols-3 .c-gallery__grid { grid-template-columns: repeat(3, 1fr); }
    .c-gallery--cols-4 .c-gallery__grid { grid-template-columns: repeat(3, 1fr); }
    .c-gallery--cols-5 .c-gallery__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .c-gallery--cols-4 .c-gallery__grid { grid-template-columns: repeat(4, 1fr); }
    .c-gallery--cols-5 .c-gallery__grid { grid-template-columns: repeat(5, 1fr); }
}

.c-gallery__item {
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius);
    cursor: pointer;
}
.c-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}
.c-gallery__item:hover img {
    transform: scale(1.05);
}

/* Aspect ratios */
.c-gallery--square .c-gallery__item { aspect-ratio: 1/1; }
.c-gallery--landscape .c-gallery__item { aspect-ratio: 4/3; }
.c-gallery--portrait .c-gallery__item { aspect-ratio: 3/4; }
.c-gallery--wide .c-gallery__item { aspect-ratio: 16/9; }

/* Masonry layout */
.c-gallery--masonry .c-gallery__grid {
    display: block;
    column-gap: var(--space-md);
}
.c-gallery--masonry.c-gallery--cols-2 .c-gallery__grid { column-count: 2; }
.c-gallery--masonry.c-gallery--cols-3 .c-gallery__grid { column-count: 2; }
.c-gallery--masonry.c-gallery--cols-4 .c-gallery__grid { column-count: 2; }
.c-gallery--masonry.c-gallery--cols-5 .c-gallery__grid { column-count: 2; }

@media (min-width: 768px) {
    .c-gallery--masonry.c-gallery--cols-3 .c-gallery__grid { column-count: 3; }
    .c-gallery--masonry.c-gallery--cols-4 .c-gallery__grid { column-count: 3; }
    .c-gallery--masonry.c-gallery--cols-5 .c-gallery__grid { column-count: 3; }
}
@media (min-width: 1024px) {
    .c-gallery--masonry.c-gallery--cols-4 .c-gallery__grid { column-count: 4; }
    .c-gallery--masonry.c-gallery--cols-5 .c-gallery__grid { column-count: 5; }
}

.c-gallery--masonry .c-gallery__item {
    break-inside: avoid;
    margin-bottom: var(--space-md);
    aspect-ratio: auto;
}
.c-gallery--masonry .c-gallery__item img {
    height: auto;
}

/* Carousel layout */
.c-gallery__carousel {
    position: relative;
}
.c-gallery__track {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: var(--space-sm);
}
.c-gallery__track::-webkit-scrollbar { display: none; }

.c-gallery__slide {
    flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: start;
    margin: 0;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
}
@media (min-width: 768px) {
    .c-gallery__slide { width: 400px; }
}
.c-gallery__slide img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform var(--transition);
}
@media (min-width: 768px) {
    .c-gallery__slide img { height: 300px; }
}
.c-gallery__slide:hover img {
    transform: scale(1.05);
}

.c-gallery__prev,
.c-gallery__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: background var(--transition);
    z-index: 2;
}
.c-gallery__prev:hover,
.c-gallery__next:hover { background: var(--color-neutral-100); }
.c-gallery__prev { left: var(--space-sm); }
.c-gallery__next { right: var(--space-sm); }
.c-gallery__prev svg,
.c-gallery__next svg { width: 20px; height: 20px; }

/* Backgrounds */
.c-gallery--bg-white { background: #fff; }
.c-gallery--bg-light { background: var(--color-bg-light); }
.c-gallery--bg-dark { background: var(--color-bg-dark); color: #fff; }
.c-gallery--bg-dark .eyebrow { color: var(--color-brand-light); }
.c-gallery--bg-dark .c-gallery__subhead { color: var(--color-neutral-400); }


/* ----------------------- LIGHTBOX ----------------------- */

.c-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.c-lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}
.c-lightbox__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
}
.c-lightbox__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
}
.c-lightbox__close {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition);
}
.c-lightbox__close:hover { opacity: 1; }
.c-lightbox__close svg { width: 28px; height: 28px; }

.c-lightbox__prev,
.c-lightbox__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background var(--transition);
}
.c-lightbox__prev:hover,
.c-lightbox__next:hover { background: rgba(255, 255, 255, 0.2); }
.c-lightbox__prev { left: var(--space-md); }
.c-lightbox__next { right: var(--space-md); }
.c-lightbox__prev svg,
.c-lightbox__next svg { width: 24px; height: 24px; }

.c-lightbox__figure {
    max-width: 90vw;
    max-height: 80vh;
    margin: 0;
    text-align: center;
}
.c-lightbox__image {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
}
.c-lightbox__caption {
    color: var(--color-neutral-400);
    font-size: var(--text-sm);
    margin-top: var(--space-md);
}
.c-lightbox__counter {
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-neutral-400);
    font-size: var(--text-sm);
}

@media (max-width: 768px) {
    .c-lightbox__prev,
    .c-lightbox__next {
        width: 40px;
        height: 40px;
        bottom: var(--space-3xl);
        top: auto;
        transform: none;
    }
    .c-lightbox__prev { left: var(--space-xl); }
    .c-lightbox__next { right: var(--space-xl); }
}


/* ----------------------- STICKY BOOKING CTA ----------------------- */
/* Desktop: card pinned bottom-right. Mobile: bar across the bottom. */

.nbc-sticky-cta {
    position: fixed;
    right: var(--space-xl);
    bottom: var(--space-xl);
    z-index: 150;
    width: 412px;
    max-width: calc(100vw - var(--space-xl) * 2);
    border-radius: var(--radius);
    overflow: hidden;
    background-color: var(--color-accent-500);
    background-size: cover;
    background-position: center;
    box-shadow: 0 18px 48px rgb(0 0 0 / 0.3);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 300ms ease, transform 300ms ease;
}
.nbc-sticky-cta.is-visible {
    opacity: 1;
    transform: translateY(0);
}
/* Teal wash so the white type stays legible over any photo */
.nbc-sticky-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgb(0 90 96 / 0.82);
}
.nbc-sticky-cta__body {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
    padding: 39px 33px;
    color: #fff;
}
.nbc-sticky-cta__heading {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    font-family: var(--font-heading);
    font-size: 2.5rem;
    line-height: 1.1;
    color: #fff;
}
.nbc-sticky-cta__mark { display: none; }
.nbc-sticky-cta__text {
    max-width: 30ch;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    color: #fff;
}
.nbc-sticky-cta__btn { margin-top: var(--space-xs); }

@media (max-width: 767px) {
    .nbc-sticky-cta {
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: none;
        border-radius: 0;
        transform: translateY(100%);
    }
    .nbc-sticky-cta.is-visible { transform: translateY(0); }
    .nbc-sticky-cta__body {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-md);
        padding: 16px 27px 16px 20px;
    }
    .nbc-sticky-cta__heading {
        font-size: 1.5rem;
        white-space: nowrap;
    }
    .nbc-sticky-cta__mark {
        display: block;
        width: 25px;
        color: #fff;
    }
    .nbc-sticky-cta__mark svg { width: 25px; height: 30px; }
    .nbc-sticky-cta__text { display: none; }
    .nbc-sticky-cta__btn {
        margin-top: 0;
        min-height: 33px;
        padding: 0 14px;
        font-size: 0.6875rem;
        white-space: nowrap;
    }
}

/* Narrow phones: heading + button need ~420px at the sizes above, so the
   umbrella goes, the type steps down and the button trades some padding
   rather than pushing past the edge. Fits down to 320. */
@media (max-width: 419px) {
    .nbc-sticky-cta__body {
        gap: 12px;
        padding: 14px 16px;
    }
    .nbc-sticky-cta__heading {
        flex-shrink: 0;
        font-size: 1.25rem;
    }
    .nbc-sticky-cta__mark svg { width: 20px; height: 24px; }
    .nbc-sticky-cta__btn {
        min-width: 0;
        padding: 0 10px;
        font-size: 0.625rem;
        letter-spacing: 0.06em;
    }
}

/* Dismiss control, over the teal wash */
.nbc-sticky-cta__close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity var(--transition);
}
.nbc-sticky-cta__close:hover { opacity: 1; }
.nbc-sticky-cta__close svg { width: 14px; height: 14px; }

/* Collapsed state: a small pill in the same corner that opens the popup */
.nbc-sticky-mini {
    position: fixed;
    right: var(--space-xl);
    bottom: var(--space-xl);
    z-index: 150;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    padding: 0 22px;
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: var(--color-accent-500);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgb(0 0 0 / 0.3);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 300ms ease, transform 300ms ease, background-color var(--transition);
}
.nbc-sticky-mini:hover { background: var(--color-accent-400); color: #fff; }
.nbc-sticky-mini.is-visible { opacity: 1; transform: translateY(0); }
.nbc-sticky-mini__mark { display: flex; }
.nbc-sticky-mini__mark svg { width: 17px; height: 20px; }

/* The full-width phone bar is not dismissable: no close control, and the
   collapsed pill never appears (the script also ignores the cookie there) */
@media (max-width: 767px) {
    .nbc-sticky-cta__close,
    .nbc-sticky-mini { display: none; }
}

/* The tightest phones lose the mark so nothing overflows */
@media (max-width: 359px) {
    .nbc-sticky-cta__mark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .nbc-sticky-cta,
    .nbc-sticky-mini { transition: none; }
}



/* =================================================================
   ICON CARDS
   ================================================================= */

.c-icon-cards { padding: var(--space-3xl) 0; position: relative; }
.c-icon-cards--bg-light { background: var(--color-bg-light); }
.c-icon-cards--bg-dark { background: var(--color-neutral-800); color: #fff; }
.c-icon-cards--bg-dark h2, .c-icon-cards--bg-dark h3, .c-icon-cards--bg-dark h4 { color: #fff; }
.c-icon-cards--bg-brand { background: var(--color-brand); color: #fff; }
.c-icon-cards--bg-brand h2, .c-icon-cards--bg-brand h3, .c-icon-cards--bg-brand h4 { color: #fff; }

.c-icon-cards__inner { position: relative; z-index: 1; }

.c-icon-cards__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-2xl);
}
.c-icon-cards__header h2, .c-icon-cards__header h3, .c-icon-cards__header h4 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
}
.c-icon-cards__header .subhead {
    font-size: var(--text-lg);
    color: var(--color-neutral-600);
}
.c-icon-cards--bg-dark .c-icon-cards__header .subhead,
.c-icon-cards--bg-brand .c-icon-cards__header .subhead,
.c-icon-cards--bg-image .c-icon-cards__header .subhead { color: rgba(255,255,255,0.8); }

.c-icon-cards__grid {
    display: grid;
    gap: var(--space-xl);
}
.c-icon-cards--cols-2 .c-icon-cards__grid { grid-template-columns: repeat(2, 1fr); }
.c-icon-cards--cols-3 .c-icon-cards__grid { grid-template-columns: repeat(3, 1fr); }
.c-icon-cards--cols-4 .c-icon-cards__grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
    .c-icon-cards--cols-3 .c-icon-cards__grid,
    .c-icon-cards--cols-4 .c-icon-cards__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .c-icon-cards__grid { grid-template-columns: 1fr !important; }
}

/* Card base */
.c-icon-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Icon positioning */
.c-icon-cards--top .c-icon-card { text-align: center; align-items: center; }
.c-icon-cards--left .c-icon-card { flex-direction: row; align-items: flex-start; }

/* Card styles */
.c-icon-cards--boxed .c-icon-card {
    background: #fff;
    padding: var(--space-xl);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.c-icon-cards--bg-dark.c-icon-cards--boxed .c-icon-card,
.c-icon-cards--bg-brand.c-icon-cards--boxed .c-icon-card,
.c-icon-cards--bg-image.c-icon-cards--boxed .c-icon-card {
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
}

.c-icon-cards--bordered .c-icon-card {
    border: 1px solid var(--color-neutral-200);
    padding: var(--space-xl);
    border-radius: var(--radius);
}
.c-icon-cards--bg-dark.c-icon-cards--bordered .c-icon-card,
.c-icon-cards--bg-brand.c-icon-cards--bordered .c-icon-card,
.c-icon-cards--bg-image.c-icon-cards--bordered .c-icon-card {
    border-color: rgba(255,255,255,0.2);
}

/* Icon */
.c-icon-card__icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand-light);
    border-radius: var(--radius);
    color: var(--color-brand-dark);
}
.c-icon-card__icon svg {
    width: 28px;
    height: 28px;
}
.c-icon-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.c-icon-cards--bg-dark .c-icon-card__icon,
.c-icon-cards--bg-brand .c-icon-card__icon,
.c-icon-cards--bg-image .c-icon-card__icon {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* Content */
.c-icon-card__content { flex: 1; } 
.c-icon-card__title {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}
.c-icon-card__desc {
    font-size: var(--text-base);
    color: var(--color-neutral-600);
    margin-bottom: var(--space-sm);
}
.c-icon-cards--bg-dark .c-icon-card__desc,
.c-icon-cards--bg-brand .c-icon-card__desc,
.c-icon-cards--bg-image .c-icon-card__desc { color: rgba(255,255,255,0.8); }

.c-icon-card__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
    color: var(--color-brand);
    text-decoration: none;
    transition: gap 0.2s ease;
}
.c-icon-card__link:hover { gap: var(--space-sm); }
.c-icon-card__link svg { width: 16px; height: 16px; }

.c-icon-cards--bg-dark .c-icon-card__link,
.c-icon-cards--bg-brand .c-icon-card__link,
.c-icon-cards--bg-image .c-icon-card__link { color: #fff; }


/* =================================================================
   MAP EMBED
   ================================================================= */

.c-map { padding: var(--space-3xl) 0; position: relative; }
.c-map--bg-light { background: var(--color-bg-light); }
.c-map--bg-dark { background: var(--color-neutral-800); color: #fff; }
.c-map--bg-dark h2, .c-map--bg-dark h3, .c-map--bg-dark h4 { color: #fff; }
.c-map--bg-brand { background: var(--color-brand); color: #fff; }
.c-map--bg-brand h2, .c-map--bg-brand h3, .c-map--bg-brand h4 { color: #fff; }

.c-map__inner { position: relative; z-index: 1; }

.c-map__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-2xl);
}
.c-map__header h2, .c-map__header h3, .c-map__header h4 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
}
.c-map__header .subhead {
    font-size: var(--text-lg);
    color: var(--color-neutral-600);
}
.c-map--bg-dark .c-map__header .subhead,
.c-map--bg-brand .c-map__header .subhead,
.c-map--bg-image .c-map__header .subhead { color: rgba(255,255,255,0.8); }

.c-map__embed {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.c-map__embed iframe {
    display: block;
    width: 100%;
    border: 0;
}

/* Height variants */
.c-map--h-small .c-map__embed iframe { height: 300px; }
.c-map--h-medium .c-map__embed iframe { height: 450px; }
.c-map--h-large .c-map__embed iframe { height: 600px; }

@media (max-width: 767px) {
    .c-map--h-small .c-map__embed iframe { height: 250px; }
    .c-map--h-medium .c-map__embed iframe { height: 350px; }
    .c-map--h-large .c-map__embed iframe { height: 450px; }
}


/* =================================================================
   CONTACT INFO BLOCK
   ================================================================= */

.c-contact-info { padding: var(--section-y) 0; position: relative; }
.c-contact-info--bg-light { background: var(--color-bg-light); }
.c-contact-info--bg-dark { background: var(--color-neutral-800); color: #fff; }
.c-contact-info--bg-dark h2, .c-contact-info--bg-dark h3, .c-contact-info--bg-dark h4 { color: #fff; }
.c-contact-info--bg-brand { background: var(--color-brand); color: #fff; }
.c-contact-info--bg-brand h2, .c-contact-info--bg-brand h3, .c-contact-info--bg-brand h4 { color: #fff; }

.c-contact-info__inner { position: relative; z-index: 1; }

.c-contact-info__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--space-2xl);
}
.c-contact-info__header h2, .c-contact-info__header h3, .c-contact-info__header h4 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-md);
}
.c-contact-info__header .subhead {
    font-size: var(--text-lg);
    color: var(--color-neutral-600);
}
.c-contact-info--bg-dark .c-contact-info__header .subhead,
.c-contact-info--bg-brand .c-contact-info__header .subhead,
.c-contact-info--bg-image .c-contact-info__header .subhead { color: rgba(255,255,255,0.8); }

/* Items layout */
.c-contact-info__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
}

/* Stacked layout (default) */
.c-contact-info--stacked .c-contact-info__items {
    flex-direction: column;
    align-items: center;
    max-width: 500px;
    margin: 0 auto;
}
.c-contact-info--stacked .c-contact-info__item {
    text-align: center;
    flex-direction: column;
}
.c-contact-info--stacked .c-contact-info__icon { margin-bottom: var(--space-sm); }

/* Inline layout */
.c-contact-info--inline .c-contact-info__items {
    justify-content: center;
}
@media (max-width: 1024px) {
    .c-contact-info--inline .c-contact-info__items {
        flex-direction: column;
        align-items: center;
    }
}

/* Individual item */
.c-contact-info__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.c-contact-info__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-brand);
    border-radius: 50%;
    color: #fff;
}
.c-contact-info__icon svg {
    width: 22px;
    height: 22px;
}
.c-contact-info--bg-dark .c-contact-info__icon,
.c-contact-info--bg-brand .c-contact-info__icon,
.c-contact-info--bg-image .c-contact-info__icon {
    background: rgba(255,255,255,0.2);
}

.c-contact-info__content { flex: 1; }

.c-contact-info__label {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-neutral-500);
    margin-bottom: var(--space-xs);
}
.c-contact-info--bg-dark .c-contact-info__label,
.c-contact-info--bg-brand .c-contact-info__label,
.c-contact-info--bg-image .c-contact-info__label { color: rgba(255,255,255,0.6); }

.c-contact-info__value {
    font-size: var(--text-lg);
    color: var(--color-neutral-800);
}
.c-contact-info--bg-dark .c-contact-info__value,
.c-contact-info--bg-brand .c-contact-info__value,
.c-contact-info--bg-image .c-contact-info__value { color: #fff; }

.c-contact-info__link {
    color: var(--color-brand);
    text-decoration: none;
    transition: color 0.2s ease;
}
.c-contact-info__link:hover {
    text-decoration: underline;
}
.c-contact-info--bg-dark .c-contact-info__link,
.c-contact-info--bg-brand .c-contact-info__link,
.c-contact-info--bg-image .c-contact-info__link { color: #fff; }

.c-contact-info__empty {
    text-align: center;
    color: var(--color-neutral-500);
    font-style: italic;
}


/* =================================================================
   ARCHIVE
   ================================================================= */

.archive-page { padding: var(--space-3xl) 0; }

.archive-page__header {
    margin-bottom: var(--space-2xl);
}
.archive-page__title {
    font-size: var(--text-4xl);
    margin-bottom: var(--space-sm);
}
.archive-page__description {
    font-size: var(--text-lg);
    color: var(--color-neutral-600);
    max-width: 700px;
}
.archive-page__description p:last-child { margin-bottom: 0; }

/* Archive grid */
.archive-page__grid {
    display: grid;
    gap: var(--space-xl);
}
.archive-page--grid.archive-page--cols-2 .archive-page__grid {
    grid-template-columns: repeat(2, 1fr);
}
.archive-page--grid.archive-page--cols-3 .archive-page__grid {
    grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
    .archive-page--grid.archive-page--cols-3 .archive-page__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .archive-page__grid { grid-template-columns: 1fr !important; }
}

/* List layout */
.archive-page--list .archive-page__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}
.archive-page--list .archive-card {
    flex-direction: row;
    align-items: flex-start;
}
.archive-page--list .archive-card__image {
    width: 280px;
    flex-shrink: 0;
}
@media (max-width: 767px) {
    .archive-page--list .archive-card {
        flex-direction: column;
    }
    .archive-page--list .archive-card__image {
        width: 100%;
    }
}

/* Archive card */
.archive-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.archive-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.archive-card__image {
    display: block;
    overflow: hidden;
}
.archive-card__image img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
    transition: transform 0.3s ease;
}
.archive-card:hover .archive-card__image img {
    transform: scale(1.03);
}

.archive-card__content {
    padding: var(--space-lg);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.archive-card__header { margin-bottom: var(--space-sm); }

.archive-card__title {
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-xs);
}
.archive-card__title a {
    color: inherit;
    text-decoration: none;
}
.archive-card__title a:hover {
    color: var(--color-brand);
}

.archive-card__meta {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}
.archive-card__sep { opacity: 0.5; }

.archive-card__excerpt {
    color: var(--color-neutral-600);
    flex: 1;
}
.archive-card__excerpt p { margin: 0; }

/* Empty state */
.archive-page__empty {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    color: var(--color-neutral-500);
}

/* Pagination */
.pagination {
    margin-top: var(--space-2xl);
    display: flex;
    justify-content: center;
}
.pagination__list {
    display: flex;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
}
.pagination__item a,
.pagination__item span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}
.pagination__item a {
    color: var(--color-neutral-700);
    background: var(--color-neutral-100);
}
.pagination__item a:hover {
    background: var(--color-brand);
    color: #fff;
}
.pagination__item--current span {
    background: var(--color-brand);
    color: #fff;
}


/* =================================================================
   SINGLE POST
   ================================================================= */

.single-page { padding: var(--space-3xl) 0; }

/* Post article */
.single-post { margin-bottom: var(--space-2xl); }

.single-post__header {
    margin-bottom: var(--space-xl);
}
.single-post__title {
    font-size: var(--text-4xl);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-sm);
}
.single-post__meta {
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}

.single-post__image {
    margin-bottom: var(--space-xl);
    border-radius: var(--radius);
    overflow: hidden;
}
.single-post__image img {
    width: 100%;
    height: auto;
}

.single-post__content {
    margin-bottom: var(--space-xl);
}

.single-post__footer {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-neutral-200);
}
.single-post__taxonomies {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    margin-bottom: var(--space-sm);
}
.single-post__taxonomies:last-child { margin-bottom: 0; }
.single-post__tax-label {
    font-weight: 600;
    color: var(--color-neutral-600);
    margin-right: var(--space-xs);
}
.single-post__taxonomies a {
    color: var(--color-brand);
    text-decoration: none;
}
.single-post__taxonomies a:hover {
    text-decoration: underline;
}

/* Author box */
.author-box {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--color-neutral-50);
    border-radius: var(--radius);
    margin-bottom: var(--space-2xl);
}
@media (max-width: 600px) {
    .author-box {
        flex-direction: column;
        text-align: center;
    }
}

.author-box__avatar { flex-shrink: 0; }
.author-box__img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.author-box__content { flex: 1; }
.author-box__name {
    font-size: var(--text-lg);
    margin-bottom: var(--space-xs);
}
.author-box__name a {
    color: inherit;
    text-decoration: none;
}
.author-box__name a:hover {
    color: var(--color-brand);
}
.author-box__bio {
    color: var(--color-neutral-600);
    margin-bottom: var(--space-sm);
}
.author-box__bio p:last-child { margin-bottom: 0; }
.author-box__link {
    color: var(--color-brand);
    text-decoration: none;
    font-weight: 500;
}
.author-box__link:hover {
    text-decoration: underline;
}

/* Related posts */
.related-posts {
    margin-bottom: var(--space-2xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-neutral-200);
}
.related-posts__title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-lg);
}
.related-posts__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
@media (max-width: 767px) {
    .related-posts__grid {
        grid-template-columns: 1fr;
    }
}

.related-posts__item {
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.related-posts__image {
    display: block;
    overflow: hidden;
}
.related-posts__image img {
    aspect-ratio: 16/9;
    object-fit: cover;
    width: 100%;
    transition: transform 0.3s ease;
}
.related-posts__item:hover .related-posts__image img {
    transform: scale(1.03);
}
.related-posts__item-title {
    font-size: var(--text-base);
    padding: var(--space-md);
    padding-bottom: var(--space-xs);
}
.related-posts__item-title a {
    color: inherit;
    text-decoration: none;
}
.related-posts__item-title a:hover {
    color: var(--color-brand);
}
.related-posts__date {
    display: block;
    padding: 0 var(--space-md) var(--space-md);
    font-size: var(--text-sm);
    color: var(--color-neutral-500);
}

/* Post navigation */
.post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-neutral-200);
}
@media (max-width: 600px) {
    .post-nav {
        grid-template-columns: 1fr;
    }
}

.post-nav__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-lg);
    background: var(--color-neutral-50);
    border-radius: var(--radius);
    text-decoration: none;
    transition: background 0.2s ease;
}
.post-nav__link:hover {
    background: var(--color-neutral-100);
}
.post-nav__link--empty {
    opacity: 0;
    pointer-events: none;
}
.post-nav__link--next {
    text-align: right;
}

.post-nav__label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-neutral-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.post-nav__link--next .post-nav__label {
    justify-content: flex-end;
}
.post-nav__label svg {
    width: 16px;
    height: 16px;
}

.post-nav__title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-neutral-800);
    line-height: var(--leading-tight);
}

/* Search form */
.search-form-wrap {
    margin-bottom: var(--space-2xl);
}
.search-form {
    display: flex;
    gap: var(--space-sm);
    max-width: 500px;
}
.search-form label {
    flex: 1;
}
.search-form .search-field {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-neutral-300);
    border-radius: var(--radius);
    font-size: var(--text-base);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-form .search-field:focus {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.search-form .search-submit {
    padding: var(--space-sm) var(--space-lg);
    background: var(--color-brand);
    color: #fff;
    border: none;
    border-radius: var(--radius);
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
}
.search-form .search-submit:hover {
    background: var(--color-brand-dark);
}


/* =================================================================
   404 PAGE
   ================================================================= */

.error-404 {
    padding: var(--space-3xl) 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    text-align: center;
    background: var(--color-bg-light);
}
.error-404 .container { width: 100%; max-width: 600px; }
.error-404__code {
    font-family: var(--font-heading);
    font-size: clamp(6rem, 20vw, 12rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-neutral-200);
    margin-bottom: var(--space-md);
}
.error-404 h1 {
    font-size: var(--text-3xl);
    color: var(--color-neutral-800);
    margin-bottom: var(--space-md);
}
.error-404__content {
    color: var(--color-neutral-600);
    margin-bottom: var(--space-xl);
}
.error-404__content p { margin-bottom: var(--space-md); }
.error-404__content p:last-child { margin-bottom: 0; }
.error-404__actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

.page-content { padding: var(--space-3xl) 0; }
.page-content h1 { margin-bottom: var(--space-xl); }



/* =================================================================
   NBC COMPONENTS
   =================================================================
   Homepage sections built from the Figma mockups.
   Desktop reference: 1680 frame, 80px gutters, 625px content column.
   Mobile reference:  402 frame, 20px gutters.
   ================================================================= */

/* Shared content block — eyebrow, H2, body, button */
.nbc-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
    max-width: 625px;
}
.nbc-content__heading { margin: 0; }
.nbc-content__body {
    margin: 0;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}
.nbc-content__body p { margin: 0 0 var(--space-md); }
.nbc-content__body p:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
    .nbc-content__body { font-size: 1.125rem; }
}

/* On dark grounds */
.nbc-content--on-dark .nbc-content__heading,
.nbc-content--on-dark .nbc-content__body { color: #fff; }


/* Imagify rewrites <img class="x"> into <picture class="x"><img>, which puts our
   class on the wrapper and leaves the real image unstyled. Collapsing the
   <picture> box makes the <img> the layout child again, so the container-based
   rules below apply either way. */
.c-trust-badges__media picture,
.c-media-split__slide picture,
.c-feature-photo__media picture,
.c-testimonial-cards__card picture,
.site-footer__badge picture,
.site-header__logo picture,
.site-footer__logo picture {
    display: contents;
}


/* ----------------------- HERO (VIDEO) ----------------------- */

.c-hero-video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    overflow: hidden;
}
.c-hero-video--full   { min-height: 100vh; }
.c-hero-video--large  { min-height: min(1025px, 92vh); }
.c-hero-video--medium { min-height: 60vh; }

.c-hero-video__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}
/* Imagify may wrap the poster in a <picture> and hoist the class onto it, so
   each selector is written to catch the wrapper and the real <img> alike. */
.c-hero-video__video,
.c-hero-video__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-hero-video__poster > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* The poster only shows through when the video is absent or suppressed */
.c-hero-video__poster { z-index: -1; }

/* Three washes stacked exactly as the mock has them: a flat navy tint, a dark
   band under the header, and — on the fade variant — a sand lift off the bottom
   of the frame. Stops are in px so the shape holds at any hero height. */
.c-hero-video__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to bottom,
            rgb(21 21 30 / var(--hero-overlay, 0.8)) 0,
            rgb(26 26 46 / 0) 475px
        ),
        rgb(26 26 46 / 0.3);
}
/* Lift the foot of the frame towards sand, so the fade image the badges sit on
   has something to meet. */
.c-hero-video--fade .c-hero-video__scrim {
    background:
        linear-gradient(
            to top,
            rgb(232 218 193 / 0.8) 0,
            rgb(232 218 193 / 0) 172px
        ),
        linear-gradient(
            to bottom,
            rgb(21 21 30 / var(--hero-overlay, 0.8)) 0,
            rgb(26 26 46 / 0) 475px
        ),
        rgb(26 26 46 / 0.3);
}

.c-hero-video__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xl);
    width: 100%;
    max-width: var(--container-max);
    padding: 134px var(--gutter);
    text-align: center;
}
/* Eyebrow and headline are one block in the mock, 10px apart, sitting 48px
   above the buttons. */
.c-hero-video__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.c-hero-video__eyebrow,
.c-hero-video__headline {
    color: #fff;
    text-shadow: var(--shadow-hero-text);
}
.c-hero-video__eyebrow { margin: 0; }
.c-hero-video__headline {
    max-width: 637px;
    margin: 0;
}
.c-hero-video__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
}

@media (max-width: 767px) {
    /* Mock: 108px header bar, then a 542px hero below it; the copy starts
       174px into the hero and leaves 86px under the buttons */
    .c-hero-video--large,
    .c-hero-video--full { min-height: 650px; }
    .c-hero-video__inner { padding: 276px var(--gutter) 86px; }
    .c-hero-video__headline {
        max-width: none;
        font-size: 2.75rem;
    }
    .c-hero-video__buttons {
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
    }
    .c-hero-video__buttons .btn { width: 100%; }

    .c-hero-video__scrim {
        background:
            linear-gradient(
                to bottom,
                rgb(21 21 30 / var(--hero-overlay, 0.8)) 0,
                rgb(26 26 46 / 0) 263px
            ),
            rgb(26 26 46 / 0.3);
    }
    .c-hero-video--fade .c-hero-video__scrim {
        background:
            linear-gradient(
                to top,
                rgb(232 218 193 / 0.8) 0,
                rgb(232 218 193 / 0) 95px
            ),
            linear-gradient(
                to bottom,
                rgb(21 21 30 / var(--hero-overlay, 0.8)) 0,
                rgb(26 26 46 / 0) 263px
            ),
            rgb(26 26 46 / 0.3);
    }
}

/* Reduced motion: hold the poster frame instead of playing the loop */
@media (prefers-reduced-motion: reduce) {
    .c-hero-video__video { display: none; }
    .c-hero-video__poster { z-index: 0; }
}


/* ----------------------- TRUST BADGES ----------------------- */

.c-trust-badges {
    position: relative;
    padding: var(--space-2xl) 0 var(--space-3xl);
}
.c-trust-badges--bg-sand  { background: var(--color-bg-sand); }
.c-trust-badges--bg-white { background: #fff; }
/* Transparent variant sits on the tail of the hero photo. 52px above the row,
   99px below, per Figma. */
.c-trust-badges--bg-transparent {
    padding: 52px 0 99px;
    background: none;
    /* Without a stacking context of its own, the z-index:-1 fade below would
       drop into the root negative layer and paint *behind* the hero, hiding the
       lead-in and turning its soft edge into a hard line at the hero's foot. */
    isolation: isolate;
}
/* The fade artwork is the foot of the hero shot, supplied with its own alpha
   ramp at the top and flat sand on the last row — so it dissolves into the
   video above and hands off cleanly to the section below with no gradient of
   ours involved. --trust-fade-lead is how far it reaches up over the hero. */
.c-trust-badges__fade {
    --trust-fade-lead: 80px;
    position: absolute;
    left: 0;
    bottom: 0;
    /* width, not right:0 — the width has to stay definite, or min-height below
       resolves back through aspect-ratio and blows the element out sideways. */
    width: 100%;
    /* Hold the artwork's own proportions wherever there is room for them, but
       never less than the band plus its lead-in. Between the two, cover can
       only crop sideways, so the alpha ramp at the top and the flat sand row at
       the foot both survive at every width. Sizing off the band alone let a
       wide viewport crop the ramp away and brought the hard line back. */
    aspect-ratio: 1680 / 360;
    min-height: calc(100% + var(--trust-fade-lead));
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
/* The selector reaches through any <picture> Imagify adds */
.c-trust-badges__fade img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.c-trust-badges__inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.c-trust-badges__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    /* Top aligned, so the badges line up along their crowns the way the mock
       has them. Bottom aligning would stagger them by caption length — the
       badge with no caption would ride up out of line with its neighbour. */
    align-items: flex-start;
    gap: var(--space-2xl) var(--space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
}
/* Per-badge drop from the top of the row — see the Nudge Down field */
.c-trust-badges__item { margin-top: var(--badge-nudge, 0px); }
.c-trust-badges__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    height: 100%;
    color: var(--color-primary-700);
    text-decoration: none;
}
/* No forced height: the award artwork is supplied at the size the mock draws it
   (the Tripadvisor badges are deliberately not the same height as each other),
   so it renders at its natural size and the row aligns along the top. */
.c-trust-badges__media {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
/* No `width` here on purpose. WordPress emits sizes="auto" on lazy images,
   which resolves against the element's own layout width — with width:auto that
   is circular and the badge inflates to fill its column. Leaving width alone
   lets the width attribute (the artwork's real size) settle it. */
.c-trust-badges__media img {
    height: auto;
    max-width: 100%;
}
/* The "TOP 10%" starburst only appears on phones (see the 767px rules) */
.c-trust-badges__media .c-trust-badges__sticker { display: none; }
.c-trust-badges__caption {
    max-width: 300px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}

/* Viator rating lockup — stars and wordmark come as one supplied SVG, left
   aligned on desktop and centred on mobile, so there are two files. */
.c-trust-badges__badge--rating {
    align-items: flex-start;
    gap: 18px;
}
.c-trust-badges__rating-img { display: block; }
.c-trust-badges__rating-img--desktop { width: 197px; height: 71px; }
.c-trust-badges__rating-img--mobile  { display: none; }
.c-trust-badges__badge--rating .c-trust-badges__caption {
    max-width: 275px;
    text-align: left;
}
a.c-trust-badges__badge:hover .c-trust-badges__caption { text-decoration: underline; }

/* Four badges side by side need about 1020px of content width, so they pair up
   below that rather than wrapping one badge onto a line of its own. */
@media (max-width: 1100px) {
    .c-trust-badges__list {
        justify-content: center;
        /* Top aligned in the grid: captions wrap to two lines at this width, and
           bottom aligning would push the shorter-captioned badge up out of line
           with its neighbour. */
        align-items: flex-start;
        gap: var(--space-2xl) var(--space-xl);
    }
    /* Two to a row the stagger reads as a mistake, so the nudge is dropped */
    .c-trust-badges__item {
        flex: 0 1 calc(50% - var(--space-xl));
        margin-top: 0;
    }
    /* Paired up two to a row, the mock levels the badges to a common height
       rather than keeping their desktop size differences. Height is definite
       here, so width:auto follows the aspect and stays out of the sizes="auto"
       loop described above. */
    .c-trust-badges__media img {
        width: auto;
        height: 115px;
    }
    .c-trust-badges__caption { font-size: 0.875rem; max-width: 22ch; }

    .c-trust-badges__badge--rating { align-items: center; gap: 6px; }
    .c-trust-badges__rating-img--desktop { display: none; }
    .c-trust-badges__rating-img--mobile  { display: block; width: 108px; height: 50px; }
    .c-trust-badges__badge--rating .c-trust-badges__caption {
        max-width: 148px;
        text-align: center;
    }
}

/* On phones the row tucks up under the foot of the hero */
@media (max-width: 767px) {
    .c-trust-badges--bg-transparent {
        margin-top: -26px;
        /* Row ends 119px above the next section on the mock */
        padding: 0 0 119px;
    }
    .c-trust-badges__fade { --trust-fade-lead: 54px; }

    /* The 402 mock draws a 307px two-column grid, centred, rows 20px apart,
       each badge centred in its cell and every row aligned along its top. */
    .c-trust-badges__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 0;
        align-items: start;
        justify-items: center;
        max-width: 307px;
        margin: 0 auto;
    }
    .c-trust-badges__item {
        flex: none;
        width: 100%;
        margin: 0;
    }
    .c-trust-badges__badge { height: auto; }

    /* Phone order per Figma: the two Tripadvisor marks on top, then the Viator
       rating, then the Viator badge — the rating lockup jumps ahead of whatever
       else follows the first pair. It also sits 20px lower in its cell. */
    .c-trust-badges__item:nth-child(n+3) { order: 2; }
    .c-trust-badges__item:has(.c-trust-badges__badge--rating) {
        order: 1;
        padding-top: 20px;
    }
    /* Second-row award (Viator Badge of Excellence) drops to 72px so its
       wordmark matches the rating lockup's beside it — 73px on the mock. */
    .c-trust-badges__item:nth-child(n+3) .c-trust-badges__media img { height: 72px; }
    /* …and its caption breaks "Badge of / Excellence" like the mock */
    .c-trust-badges__item:nth-child(n+3) .c-trust-badges__badge:not(.c-trust-badges__badge--rating) .c-trust-badges__caption {
        max-width: 5.5rem;
    }

    /* Captions: 12px Manrope semibold in the dark sand brown, per Figma */
    .c-trust-badges__caption,
    .c-trust-badges__badge--rating .c-trust-badges__caption {
        font-size: 0.75rem;
        line-height: 1.5;
        color: var(--color-secondary-800);
    }
    /* Breaks "…across / 102 reviews…" the way the mock does */
    .c-trust-badges__badge--rating .c-trust-badges__caption { max-width: 136px; }
    .c-trust-badges__badge { gap: 6px; }

    /* "Top 10% of hotels worldwide" folds into a starburst on the badge's
       shoulder; the caption stays in the tree for screen readers. */
    .c-trust-badges__badge--sticker .c-trust-badges__caption {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .c-trust-badges__badge--sticker .c-trust-badges__media { position: relative; }
    /* Outspecifies the generic `__media img` sizing above. Per Figma the
       starburst straddles the top edge (half above it) and tucks a few px
       inside the right edge, so it reads as pinned to the badge's shoulder. */
    .c-trust-badges__media .c-trust-badges__sticker {
        display: block;
        position: absolute;
        top: -18px;
        right: 4px;
        width: 38px;
        height: 37px;
    }
}


/* ----------------------- MEDIA SPLIT ----------------------- */

.c-media-split {
    padding: var(--section-y) 0;
}
.c-media-split--bg-white { background: #fff; }
.c-media-split--bg-light { background: var(--color-bg-light); }
.c-media-split--bg-dark  { background: var(--color-bg-dark); }

/* The photo keeps its 679px and stays hard against the container edge; the text
   column takes whatever is left. That makes the space between them the gap
   itself rather than leftover from space-between, which ran to over 200px.
   Capping the photo at 48% keeps it from starving the text on smaller screens. */
.c-media-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(679px, 48%));
    align-items: center;
    gap: clamp(2rem, 9.5vw, 10rem);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
/* Image on the left — swap the track widths and the placement */
.c-media-split--left .c-media-split__inner {
    grid-template-columns: minmax(0, min(679px, 48%)) minmax(0, 1fr);
}
.c-media-split--left .c-media-split__content { grid-column: 2; grid-row: 1; }
.c-media-split--left .c-media-split__media   { grid-column: 1; grid-row: 1; }

/* Text column is 625 wide in the mock, image-left or image-right */
.c-media-split__content { max-width: 625px; }
/* Headline column is 569 in the mock, which sets where the long ones break */
.c-media-split__content .nbc-content__heading { max-width: 569px; }

.c-media-split__heading-group { display: block; }
.c-media-split__heading-group .eyebrow { margin-bottom: 5px; }

/* Media — 679 x 798 in the mock, the same ratio at every breakpoint */
.c-media-split__media {
    position: relative;
    aspect-ratio: 679 / 798;
    overflow: hidden;
}
.c-media-split__slide {
    position: absolute;
    inset: 0;
}
.c-media-split__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Single image: always shown. Crossfade: only the active slide. The duration
   comes from the component so it stays in step with the timer driving it. */
.c-media-split--crossfade .c-media-split__slide {
    opacity: 0;
    transition: opacity var(--ms-fade, 1500ms) ease;
}
.c-media-split--crossfade .c-media-split__slide.is-active { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .c-media-split--crossfade .c-media-split__slide { transition: none; }
}

@media (max-width: 900px) {
    .c-media-split { padding: 0 0 var(--section-y); }
    .c-media-split__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
        padding: 0;
    }
    .c-media-split--left .c-media-split__inner { grid-template-columns: minmax(0, 1fr); }
    /* Photo always leads on mobile, full-bleed */
    .c-media-split__media,
    .c-media-split--left .c-media-split__media {
        grid-column: 1;
        grid-row: 1;
        aspect-ratio: 402 / 472;
    }
    .c-media-split__content,
    .c-media-split--left .c-media-split__content {
        grid-column: 1;
        grid-row: 2;
        padding: 0 var(--gutter);
        max-width: none;
    }
    .c-media-split__content .btn { width: 100%; }
}


/* ----------------------- AMENITY BAND ----------------------- */

.c-amenity-band {
    position: relative;
    /* The sitewide section rhythm (the mock's tighter 73/80 band grew to match
       the other components' 120px at full width) */
    padding: var(--section-y) 0;
    background: var(--color-primary-800);
    overflow: hidden;
}
/* Sizes and offsets are the mock's — the artwork already carries its own tint
   and 0.35 opacity, so nothing is dimmed here. The band clips the overhang. */
.c-amenity-band__leaf {
    position: absolute;
    pointer-events: none;
    user-select: none;
}
.c-amenity-band__leaf--left {
    left: 0;
    top: -54px;
    width: 197px;
    height: 657px;
}
.c-amenity-band__leaf--right {
    right: 0;
    top: -57px;
    width: 243px;
    height: 520px;
}

.c-amenity-band__inner {
    position: relative;
    z-index: 1;
    display: grid;
    /* Band is 410 tall on the mock even when the copy runs short */
    min-height: 257px;
    grid-template-columns: minmax(0, 625px) minmax(0, 623px);
    /* The list sits just right of the intro rather than out at the far edge */
    justify-content: start;
    align-items: start;
    gap: 41px;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
/* Centred against the amenity list, which is the taller of the two columns */
.c-amenity-band__intro {
    gap: 32px;
    align-self: center;
}
/* Breaks after "Our", as the mock does */
.c-amenity-band__intro .nbc-content__heading { max-width: 491px; }
.c-amenity-band__intro .nbc-content__body {
    font-weight: 500;
    color: var(--color-accent-50);
}

.c-amenity-band__list {
    display: grid;
    /* 243 / 282 columns, 98 apart, rows 148 apart in the mock */
    grid-template-columns: minmax(0, 243fr) minmax(0, 282fr);
    gap: 39px clamp(2rem, 5.8vw, 98px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.c-amenity-band__title {
    margin: 0 0 13px;
    font-size: var(--text-3xl);
    line-height: 1.5;
    color: var(--color-secondary-200);
}
.c-amenity-band__text {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
}

/* Stacked variant: full-width intro over a three-per-row item grid (Events) */
.c-amenity-band--stacked .c-amenity-band__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    min-height: 0;
}
.c-amenity-band--stacked .c-amenity-band__intro { align-self: start; }
.c-amenity-band--stacked .c-amenity-band__intro .nbc-content__heading { max-width: none; }
.c-amenity-band--stacked .c-amenity-band__intro .nbc-content__body { max-width: 625px; }
@media (min-width: 901px) {
    .c-amenity-band--stacked .c-amenity-band__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 48px clamp(2rem, 4.8vw, 80px);
    }
}

@media (max-width: 900px) {
    .c-amenity-band { padding: 60px 0; }
    .c-amenity-band__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        min-height: 0;
    }
    .c-amenity-band__list {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }
    /* Only the right-hand leaf survives the narrow layout */
    .c-amenity-band__leaf--left { display: none; }
    .c-amenity-band__leaf--right {
        top: 0;
        right: 0;
        width: 212px;
        height: 410px;
    }
}


/* ----------------------- TESTIMONIAL CARDS ----------------------- */

/* The band alone sets the height of this section — the cards are lifted out of
   the flow so they overhang it top and bottom, spilling over the section below.
   z-index keeps that overhang above the later section it lands on. */
.c-testimonial-cards {
    --band-h: 347px;
    position: relative;
    z-index: 1;
    /* Padding, not margin: the strip above the band has to belong to the section
       so it carries the section's own white. As a margin it exposed the page
       background instead. It keeps the overhanging cards off the section above,
       which their own overhang would otherwise eat into. Nothing below the band,
       because overlapping the next section there is the point. */
    padding: var(--tc-lead) 0 0;
    background: #fff;
    /* Mock: cards start 102px above the band and run 129px past it */
    --tc-lead: 102px;
}
.c-testimonial-cards__band {
    height: var(--band-h);
    background: var(--color-primary-800);
}
/* Cards sit flush with the section top; the headline is centred on the band,
   which is 13.5px higher than the centre of the 578px card row */
.c-testimonial-cards__inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: minmax(0, 375px) minmax(0, 1026px);
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3xl);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.c-testimonial-cards__headline {
    max-width: 326px;
    margin: -27px 0 0;
    color: #fff;
}
.c-testimonial-cards__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.c-testimonial-cards__card {
    position: relative;
    aspect-ratio: 505 / 578;
    overflow: hidden;
    background: var(--color-primary-900);
}
.c-testimonial-cards__card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Scrim so the quote reads over any photo */
.c-testimonial-cards__card::after {
    content: '';
    position: absolute;
    inset: 40% 0 0;
    background: linear-gradient(to bottom, rgb(21 21 30 / 0) 0%, rgb(21 21 30 / 0.85) 72%);
}
.c-testimonial-cards__quote-wrap {
    position: absolute;
    inset: auto 34px 38px;
    z-index: 1;
    margin: 0;
}
.c-testimonial-cards__quote {
    margin: 0 0 18px;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.5;
    color: #fff;
}
.c-testimonial-cards__quote::before { content: '\201C'; }
.c-testimonial-cards__quote::after  { content: '\201D'; }
.c-testimonial-cards__attr {
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: #fff;
}

/* Dots are the carousel's, so they only exist on narrow screens */
.c-testimonial-cards__dots { display: none; }

@media (max-width: 900px) {
    .c-testimonial-cards {
        padding: 0;
        background: var(--color-primary-800);
    }
    /* Stacked, there is nothing to overhang — the cards go back into the flow */
    .c-testimonial-cards__band { display: none; }
    .c-testimonial-cards__inner {
        position: static;
        transform: none;
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 60px var(--gutter) 64px;
    }
    .c-testimonial-cards__headline { max-width: none; margin-top: 0; font-size: 2.25rem; }

    /* Carousel. The swipe is scroll-snap — the script only autoplays and
       keeps the dots in step. */
    .c-testimonial-cards__list {
        display: flex;
        gap: var(--space-md);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .c-testimonial-cards__list::-webkit-scrollbar { display: none; }
    .c-testimonial-cards__card {
        flex: 0 0 100%;
        scroll-snap-align: start;
        aspect-ratio: 362 / 416;
    }

    /* Heavier than the desktop wash: the mock takes this one to solid */
    .c-testimonial-cards__card::after {
        inset: 0;
        background: linear-gradient(
            to bottom,
            rgb(21 21 30 / 0) 29%,
            var(--color-primary-900) 80%
        );
    }

    .c-testimonial-cards__quote-wrap { inset: auto 20px 20px; }
    .c-testimonial-cards__quote {
        margin-bottom: 8px;
        font-size: 1.125rem;
    }
    .c-testimonial-cards__attr {
        font-size: 0.75rem;
        letter-spacing: 1.8px;
    }

    .c-testimonial-cards__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        /* 12px under the cards, not the grid's 28 */
        margin-top: -16px;
    }
    /* 14px, 8px apart, primary-200 resting / primary-600 active — per Figma */
    .c-testimonial-cards__dot {
        width: 14px;
        height: 14px;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--color-primary-200);
        cursor: pointer;
        transition: background-color var(--transition);
    }
    .c-testimonial-cards__dot.is-active { background: var(--color-primary-600); }
    /* The 14px mark stays visually small but keeps a full-size tap target */
    .c-testimonial-cards__dot::before {
        content: '';
        position: absolute;
        inset: -12px;
    }
    .c-testimonial-cards__dot { position: relative; }
}


/* ----------------------- FEATURE PHOTO ----------------------- */

.c-feature-photo {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 1167px;
    overflow: hidden;
}
.c-feature-photo__media {
    position: absolute;
    inset: 0;
}
.c-feature-photo__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 20% dark wash over the photograph, per Figma */
.c-feature-photo__media::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(21 21 30 / 0.2);
}
/* Heavier wash for bright photographs (Mahahual's "Where Is Nacional") */
.c-feature-photo--dark-wash .c-feature-photo__media::before {
    background: rgb(21 21 30 / 0.5);
}
.c-feature-photo__inner {
    position: relative;
    z-index: 1;
    display: grid;
    /* Copy column starts 924px in on the 1680 mock, same as the image-left splits */
    grid-template-columns: minmax(0, 844fr) minmax(0, 676fr);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter) 120px;
}
.c-feature-photo--right .c-feature-photo__content { grid-column: 2; }
.c-feature-photo--left  .c-feature-photo__content { grid-column: 1; }
/* Legible over an unpredictable photograph */
.c-feature-photo__content {
    text-shadow: 0 2px 18px rgb(0 0 0 / 0.45);
}
.c-feature-photo__content .btn { text-shadow: none; }
.c-feature-photo__heading-group .eyebrow {
    margin-bottom: 5px;
    color: var(--color-secondary-200);
}

@media (max-width: 900px) {
    /* Photo is 402×747 on the mock with the copy laid over its lower half and
       a dark ramp underneath, ending 60px above the foot; the copy can only
       make the section taller, never shorter than the photo. */
    .c-feature-photo {
        min-height: min(100vw * 747 / 402, 900px);
        background: var(--color-primary-800);
    }
    .c-feature-photo__media::after {
        content: '';
        position: absolute;
        inset: 30% 0 0;
        background: linear-gradient(to bottom, rgb(26 26 46 / 0) 0%, rgb(26 26 46 / 0.92) 70%, var(--color-primary-800) 100%);
    }
    .c-feature-photo__inner {
        grid-template-columns: minmax(0, 1fr);
        padding: 120px var(--gutter) 60px;
    }
    .c-feature-photo--right .c-feature-photo__content,
    .c-feature-photo--left  .c-feature-photo__content { grid-column: 1; }
    .c-feature-photo__content .btn { width: 100%; }
}


/* ----------------------- SPLIT TEASER ----------------------- */

.c-split-teaser {
    position: relative;
    padding: 120px 0;
    background: var(--color-primary-800);
    overflow: hidden;
}
.c-split-teaser__palm {
    position: absolute;
    /* 1252 in from the left, 146 down, 695 wide on the mock; the band clips it */
    left: 74.5%;
    top: 146px;
    width: 695px;
    height: auto;
    opacity: 0.16;
    pointer-events: none;
    user-select: none;
}
.c-split-teaser__inner {
    position: relative;
    z-index: 1;
    display: grid;
    /* Body copy starts at 666 on the mock — 17px past the 569 headline column */
    grid-template-columns: minmax(0, 586px) minmax(0, 625px);
    justify-content: start;
    align-items: start;
    gap: 0;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.c-split-teaser__lead { gap: var(--space-xl); }
.c-split-teaser__heading-group .eyebrow { margin-bottom: 5px; }
.c-split-teaser__body {
    /* Sits 11px lower than the eyebrow, on the mock */
    margin-top: 11px;
    color: #fff;
}

@media (max-width: 900px) {
    /* Runs straight on from the photo's dark ramp above; 8px in, 52px out */
    .c-split-teaser { padding: 8px 0 52px; }
    .c-split-teaser__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xl);
    }
    .c-split-teaser__body { margin-top: 0; }
    /* Copy before the button on narrow screens */
    .c-split-teaser__body { order: 1; }
    .c-split-teaser__btn { order: 2; width: 100%; }
    .c-split-teaser__lead { display: contents; }
    .c-split-teaser__heading-group { order: 0; }
    .c-split-teaser__palm { display: none; }
}


/* ----------------------- PHOTO CTA ----------------------- */

.c-photo-cta {
    position: relative;
    /* Cap tops of the headline land 120px in; the line box starts ~32px above them */
    padding: 88px 0 120px;
    overflow: hidden;
    background: var(--color-secondary-50);
}
/* Washed-out photograph behind everything */
.c-photo-cta__bg {
    position: absolute;
    inset: 0;
    background-image: var(--cta-photo);
    background-size: cover;
    background-position: center;
    opacity: 0.28;
}
.c-photo-cta__inner {
    /* No z-index here: a stacking context would isolate the headline's
       mix-blend-mode from the __bg photo. DOM order already paints this above it. */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
    text-align: center;
}
/* The washed-out __bg photo bleeds through the glyphs: the teal fill is
   multiplied against whatever sits behind it, so the photo's light/dark
   detail shows inside the letterforms without painting the image twice. */
.c-photo-cta__headline {
    max-width: 18ch;
    margin: 0;
    /* 169px on the 1680 mock (measured against the outlined glyphs) */
    font-size: clamp(2.75rem, 0.9rem + 9.2vw, 10.5625rem);
    line-height: 1.1;
    /* Lighter than accent-500 on purpose: multiply darkens it back toward the
       brand teal while leaving headroom for the photo texture to read. */
    color: #008088;
    mix-blend-mode: multiply;
}
.c-photo-cta__body {
    max-width: 531px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-primary-600);
}
.c-photo-cta__body p { margin: 0 0 var(--space-md); }
.c-photo-cta__body p:last-child { margin-bottom: 0; }
.c-photo-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
}

/* When the side-layout testimonial cards sit directly above a CTA, their
   129px overhang lands on the CTA's top; the CTA makes room so its headline
   still clears them (cap height 255px down on the Bungalows mock vs 120). */
.c-testimonial-cards--side + .c-photo-cta,
.c-testimonial-cards--side + script + .c-photo-cta { padding-top: 223px; }
.c-testimonial-cards--side + .c-simple-cta,
.c-testimonial-cards--side + script + .c-simple-cta { padding-top: calc(120px + 129px); }

@media (max-width: 900px) {
    /* Stacked, the cards sit in the flow with no overhang — back to normal */
    .c-testimonial-cards--side + .c-photo-cta,
    .c-testimonial-cards--side + script + .c-photo-cta { padding-top: 119px; }
    .c-testimonial-cards--side + .c-simple-cta,
    .c-testimonial-cards--side + script + .c-simple-cta { padding-top: 64px; }
    .c-photo-cta { padding: 119px 0 118px; }
    /* Heavier wash on the phone mock: the photo sits at 8% over secondary-50.
       (Desktop keeps 28% — the headline's blend-through needs the detail.) */
    .c-photo-cta__bg { opacity: 0.08; }
    .c-photo-cta__headline { max-width: 12ch; font-size: 3.5rem; }
    /* Buttons sit 20px under the copy on the mock, not the block's 32 */
    .c-photo-cta__buttons { margin-top: -12px; }
    .c-photo-cta__buttons {
        flex-direction: column;
        gap: var(--space-md);
        width: 100%;
    }
    .c-photo-cta__buttons .btn { width: 100%; }
}


/* ----------------------- HERO (PHOTO) ----------------------- */
/* Figma 179:1531 — 977px tall on the 1680 frame, copy block 637 wide at the
   left gutter, 363px down. Two washes: the header band from the top and a
   dark lift in from the left edge behind the copy. */

.c-hero-photo {
    position: relative;
    display: flex;
    align-items: center;
    isolation: isolate;
    overflow: hidden;
    min-height: min(977px, 92vh);
    background: var(--color-primary-800);
}
.c-hero-photo__media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}
/* Imagify may wrap the image in a <picture> and hoist the class onto it */
.c-hero-photo__image,
.c-hero-photo__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.c-hero-photo--full { min-height: 100vh; min-height: 100svh; }
/* Short utility hero (Contact, Employment): solid navy, hugs its copy */
.c-hero-photo--short { min-height: 0; }
.c-hero-photo--short .c-hero-photo__inner { padding: 280px var(--gutter) 90px; }
.c-hero-photo--focus-top    .c-hero-photo__image, .c-hero-photo--focus-top    .c-hero-photo__image > img { object-position: center top; }
.c-hero-photo--focus-bottom .c-hero-photo__image, .c-hero-photo--focus-bottom .c-hero-photo__image > img { object-position: center bottom; }
.c-hero-photo--focus-left   .c-hero-photo__image, .c-hero-photo--focus-left   .c-hero-photo__image > img { object-position: left center; }
.c-hero-photo--focus-right  .c-hero-photo__image, .c-hero-photo--focus-right  .c-hero-photo__image > img { object-position: right center; }
.c-hero-photo__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to bottom, rgb(21 21 30 / 0.8) 0%, rgb(26 26 46 / 0) 48.5%),
        linear-gradient(to left, rgb(21 21 30 / 0) 0%, rgb(21 21 30 / 0.75) 100%);
}
.c-hero-photo__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xl);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    /* Header (134 + 34) sits over the top; the copy starts 363 down on the mock */
    padding: 363px var(--gutter) 200px;
}
.c-hero-photo__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    /* Headline runs to 816 on the mock (two lines of "Beachfront Bungalows in
       Mahahual"); the eyebrow and paragraph stay at 637. */
    max-width: 816px;
}
.c-hero-photo__content { max-width: 637px; }
.c-hero-photo__eyebrow,
.c-hero-photo__headline {
    margin: 0;
    color: #fff;
    text-shadow: var(--shadow-hero-text);
}
.c-hero-photo__content {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-primary-50);
}
.c-hero-photo__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xl);
}

/* Tinted variant (Restaurant): the photo drops to ~half over dark navy so a
   side photo reads on top of it */
.c-hero-photo--tint .c-hero-photo__media { background: var(--color-primary-700); }
.c-hero-photo--tint .c-hero-photo__image,
.c-hero-photo--tint .c-hero-photo__image > img { opacity: 0.49; }
/* With a side photo carrying the imagery, desktop shows no backdrop at all */
@media (min-width: 768px) {
    .c-hero-photo--tint.c-hero-photo--has-side .c-hero-photo__image { display: none; }
}
/* On the flat navy ground the copy needs no glow behind it */
.c-hero-photo--tint .c-hero-photo__eyebrow,
.c-hero-photo--tint .c-hero-photo__headline,
.c-hero-photo--tint .c-hero-photo__content { text-shadow: none; }
/* Side photo — 679px square flush to the right gutter, 205px down on the
   1680 frame; the copy column stays at 637 so the two never meet */
.c-hero-photo__side {
    position: absolute;
    top: 205px;
    right: var(--gutter);
    width: min(679px, 40%);
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-primary-800);
}
.c-hero-photo__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1500ms ease;
}
.c-hero-photo__slide.is-active { opacity: 1; }
.c-hero-photo__slide-img,
.c-hero-photo__slide-img > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-hero-photo--has-side .c-hero-photo__inner { padding-top: 387px; }
@media (max-width: 1100px) {
    /* Not enough width for both: the side photo drops under the copy */
    .c-hero-photo__side { position: relative; top: auto; right: auto; width: min(480px, 100%); margin-top: var(--space-xl); }
    .c-hero-photo--has-side .c-hero-photo__inner { padding-top: 260px; }
}
@media (prefers-reduced-motion: reduce) {
    .c-hero-photo__slide { transition: none; }
}

@media (max-width: 767px) {
    .c-hero-photo { align-items: stretch; }
    .c-hero-photo--large { min-height: min(700px, 92vh); }
    .c-hero-photo--short { min-height: 0; }
    .c-hero-photo--short .c-hero-photo__inner { padding: 160px var(--gutter) 48px; }
    /* Copy drops to the foot of the frame so more of the photograph shows */
    .c-hero-photo__inner {
        gap: var(--space-lg);
        justify-content: flex-end;
        padding: 200px var(--gutter) 40px;
    }
    .c-hero-photo__text { gap: 8px; }
    .c-hero-photo__headline { font-size: 2.75rem; }
    .c-hero-photo__content { font-size: 1.125rem; }
    .c-hero-photo__buttons { flex-direction: column; gap: var(--space-md); width: 100%; }
    .c-hero-photo__buttons .btn { width: 100%; }
    /* Header band up top, and a solid ramp behind the bottom-anchored copy so
       the text stays readable over any photo */
    .c-hero-photo__scrim {
        background:
            linear-gradient(to bottom, rgb(21 21 30 / 0.8) 0%, rgb(26 26 46 / 0) 240px),
            linear-gradient(to top, rgb(21 21 30 / 0.88) 0%, rgb(21 21 30 / 0.55) 32%, rgb(21 21 30 / 0) 62%),
            rgb(21 21 30 / 0.2);
    }
    /* Show the top of the photo the copy no longer covers */
    .c-hero-photo__image,
    .c-hero-photo__image > img { object-position: center 30%; }
    .c-hero-photo--tint .c-hero-photo__image,
    .c-hero-photo--tint .c-hero-photo__image > img { object-position: center; opacity: 1; }
    /* Phones: the backdrop photo does the work — no crossfading side panel */
    .c-hero-photo--tint.c-hero-photo--has-side .c-hero-photo__side { display: none; }
}


/* ----------------------- FEATURE CAROUSEL ----------------------- */
/* Figma 190:4835 — intro block 625 wide, then 505×578 cards, 16 apart, running
   off the right edge; a brush arrow floats over the row's right end. */

.c-feature-carousel {
    padding: var(--section-y) 0;
    overflow: hidden;
    background: #fff;
}
/* Background options, mirroring media-split */
.c-feature-carousel--bg-white { background: #fff; }
.c-feature-carousel--bg-light { background: var(--color-bg-light); }
.c-feature-carousel--bg-dark  { background: var(--color-bg-dark); }
.c-feature-carousel--bg-dark .c-feature-carousel__headline,
.c-feature-carousel--bg-dark .c-feature-carousel__lead,
.c-feature-carousel--bg-dark .c-feature-carousel__footnote { color: #fff; }
.c-feature-carousel--bg-dark .c-feature-carousel__eyebrow { color: var(--color-secondary-200); }
.c-feature-carousel--bg-dark .c-feature-carousel__dot { background: rgb(255 255 255 / 0.35); }
.c-feature-carousel--bg-dark .c-feature-carousel__dot.is-active { background: #fff; }
.c-feature-carousel__inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.c-feature-carousel__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
    max-width: 625px;
    margin-bottom: 51px;
}
.c-feature-carousel__eyebrow { margin: 0 0 5px; }
.c-feature-carousel__headline { max-width: 569px; margin: 0; }
.c-feature-carousel__eyebrow + .c-feature-carousel__headline { margin-top: -27px; }
.c-feature-carousel__lead {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}
.c-feature-carousel__viewport { position: relative; }
/* The track breaks out to the WINDOW edges (not just the container's): at
   rest the first card sits on the gutter and the row is cut by the right
   window edge; once scrolled, earlier cards are cut by the left window edge.
   50% − 50vw reaches the viewport regardless of how wide the screen is; the
   section's overflow:hidden clips the scrollbar-width overshoot. The padding
   puts slide 1 back on the gutter and scroll-padding keeps snaps there. */
.c-feature-carousel__track {
    /* Distance from the container's content edge out to the window edge.
       Percentages are no good here: scroll-padding resolves % against the
       scroller itself, which broke the initial snap position. */
    --fc-bleed: calc((100vw - min(100vw, var(--container-max))) / 2 + var(--gutter));
    display: flex;
    gap: 16px;
    margin: 0 calc(-1 * var(--fc-bleed));
    padding: 0 var(--fc-bleed);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--fc-bleed);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.c-feature-carousel__track::-webkit-scrollbar { display: none; }
.c-feature-carousel__card {
    position: relative;
    flex: 0 0 505px;
    aspect-ratio: 505 / 578;
    overflow: hidden;
    background: var(--color-primary-800);
    scroll-snap-align: start;
}
.c-feature-carousel__card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Optional card link: fills the card; the wash and caption keep their stacking */
.c-feature-carousel__card-link {
    position: absolute;
    inset: 0;
    color: inherit;
    text-decoration: none;
}

/* In-page #hash targets land clear of the stuck header */
main section[id] { scroll-margin-top: 120px; }
/* Wash: clear to 29%, solid navy by 80% */
.c-feature-carousel__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgb(73 74 92 / 0) 29%, var(--color-primary-800) 80%);
}
.c-feature-carousel__caption {
    position: absolute;
    inset: auto 34px 43px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.c-feature-carousel__title {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.5;
    color: var(--color-secondary-200);
}
.c-feature-carousel__text {
    max-width: 435px;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
}
/* Arrows live in two hover zones at the row's ends and only show while the
   pointer rests there (or the button has focus). The back arrow is the same
   brush mark mirrored. At either limit the matching arrow stays hidden. */
.c-feature-carousel__zone {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    width: clamp(120px, 14vw, 220px);
    pointer-events: none;
}
/* Zones reach the window edges the track now bleeds to, keeping both arrows
   the same distance in from their edge */
.c-feature-carousel__zone--prev { left: calc(-1 * (100vw - min(100vw, var(--container-max))) / 2 - var(--gutter)); justify-content: flex-start; }
.c-feature-carousel__zone--next { right: calc(-1 * (100vw - min(100vw, var(--container-max))) / 2 - var(--gutter)); justify-content: flex-end; }
.c-feature-carousel__zone::before {
    /* The hover target itself */
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: auto;
}
.c-feature-carousel__arrow {
    position: relative;
    width: 61px;
    height: 115px;
    margin: 0 24px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity var(--transition), transform var(--transition);
    filter: drop-shadow(0 4px 12px rgb(0 0 0 / 0.35));
}
.c-feature-carousel__arrow--prev { transform: translateX(8px) scaleX(-1); }
.c-feature-carousel__zone:hover .c-feature-carousel__arrow,
.c-feature-carousel__arrow:focus-visible {
    opacity: 1;
    transform: translateX(0);
}
.c-feature-carousel__zone:hover .c-feature-carousel__arrow--prev,
.c-feature-carousel__arrow--prev:focus-visible { transform: translateX(0) scaleX(-1); }
.c-feature-carousel__arrow img { display: block; width: 100%; height: 100%; }
.is-at-start .c-feature-carousel__zone--prev,
.is-at-end   .c-feature-carousel__zone--next { display: none; }
/* Dots belong to the phone carousel only */
.c-feature-carousel__dots { display: none; }
.c-feature-carousel__footnote {
    max-width: 625px;
    margin: 45px 0 0;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}

@media (max-width: 767px) {
    .c-feature-carousel__intro { margin-bottom: 32px; }
    .c-feature-carousel__card { flex-basis: min(362px, 82vw); aspect-ratio: 362 / 416; }
    .c-feature-carousel__caption { inset: auto 20px 20px; gap: 8px; }
    .c-feature-carousel__title { font-size: 1.5rem; line-height: 1.3; }
    .c-feature-carousel__text { font-size: 1rem; }
    .c-feature-carousel__zone { display: none; }
    /* Same dots as the testimonial carousel: 14px, 8 apart, light resting,
       dark active. One card per swipe, centre-snapped a little narrower than
       the screen so the previous and next slides tease in from both edges. */
    .c-feature-carousel__card { flex-basis: calc(100% - 40px); scroll-snap-align: center; }
    .c-feature-carousel__track { scroll-padding: 0; }
    .c-feature-carousel__dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }
    .c-feature-carousel__dot {
        position: relative;
        width: 14px;
        height: 14px;
        min-height: 0;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: var(--color-primary-200);
        cursor: pointer;
        transition: background-color var(--transition);
    }
    .c-feature-carousel__dot.is-active { background: var(--color-primary-600); }
    .c-feature-carousel__dot::before { content: ''; position: absolute; inset: -12px; }
    .c-feature-carousel__footnote { margin-top: 28px; font-size: 1.125rem; }
}


/* ----------------------- STEPS ----------------------- */
/* Figma 192:5078 — 618px navy band. Headline, then four columns: 59px icon
   squares joined by a hairline, 32px titles, 16px copy. Palm frond top-right. */

.c-steps {
    position: relative;
    padding: 120px 0 143px;
    overflow: hidden;
    background: var(--color-primary-800);
}
.c-steps__palm {
    position: absolute;
    top: 0;
    /* 1437px in on the 1680 frame, i.e. 243 from the right edge, and it is
       243 wide — flush to the corner */
    right: 0;
    width: 243px;
    height: auto;
    pointer-events: none;
}
.c-steps__inner {
    position: relative;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.c-steps__headline {
    max-width: 491px;
    margin: 0 0 34px;
    color: var(--color-primary-50);
}
.c-steps__list {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-xl);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}
/* The hairline runs behind the icons from the first square's centre to the
   last's; the squares paint over it with the band colour. */
.c-steps__list::before {
    content: '';
    position: absolute;
    top: 29.5px;
    left: 59px;
    right: calc(25% - 59px);
    height: 1px;
    background: rgb(214 190 148 / 0.65);
}
.c-steps__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 268px;
}
.c-steps__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 59px;
    height: 59px;
    margin-bottom: 30px;
    background: var(--color-primary-700);
}
.c-steps__icon img { display: block; width: 35px; height: auto; }
.c-steps__title {
    max-width: 243px;
    margin: 0 0 24px;
    font-size: 2rem;
    line-height: 1.2;
    color: var(--color-secondary-200);
}
.c-steps__text {
    max-width: 268px;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-accent-50);
}

@media (max-width: 1100px) {
    .c-steps { padding: 80px 0; }
    .c-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
    .c-steps__list::before { display: none; }
    /* Same size and corner as the amenity band's leaf on the homepage */
    .c-steps__palm { top: 0; right: 0; width: 212px; height: 410px; opacity: 1; }
}
@media (max-width: 767px) {
    .c-steps { padding: 60px 0; }
    .c-steps__headline { margin-bottom: 40px; font-size: 2.25rem; }
    /* One per row: the hairline that joined the icons on desktop becomes a
       rule between the stacked items instead */
    .c-steps__list { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .c-steps__item {
        max-width: none;
        padding: 32px 0;
        border-top: 1px solid rgb(214 190 148 / 0.65);
    }
    .c-steps__item:first-child { padding-top: 0; border-top: 0; }
    .c-steps__item:last-child { padding-bottom: 0; }
    .c-steps__icon { margin-bottom: 20px; }
    .c-steps__title { font-size: 1.75rem; margin-bottom: 12px; }
}


/* ----------------------- FACTS ----------------------- */
/* Figma 192:5074 — 801px band. Photo behind, dissolving to sand from the left;
   headline and a ruled list on the right half. */

.c-facts {
    position: relative;
    padding: 128px 0 84px;
    overflow: hidden;
    background: var(--color-secondary-50);
    isolation: isolate;
}
.c-facts__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}
.c-facts__image,
.c-facts__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}
.c-facts__wash {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to left,
        rgb(251 246 239) 0%,
        rgb(251 246 239 / 0.95) 55.4%,
        rgb(251 246 239 / 0.75) 65%,
        rgb(251 246 239 / 0) 100%
    );
}
.c-facts__inner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.c-facts__content {
    grid-column: 2;
    max-width: 676px;
    padding-left: 10px;
}
.c-facts__headline {
    max-width: 640px;
    margin: 0 0 48px;
}
.c-facts__list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin: 0;
}
.c-facts__row {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-secondary-200);
}
.c-facts__row:last-child { padding-bottom: 0; border-bottom: 0; }
.c-facts__label {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1.2;
    color: var(--color-secondary-400);
}
.c-facts__value {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}

@media (max-width: 900px) {
    .c-facts { padding: 80px 0 64px; }
    .c-facts__inner { grid-template-columns: minmax(0, 1fr); }
    .c-facts__content { grid-column: 1; padding-left: 0; }
    /* Portrait: the photo peeks in from the top instead of the left */
    .c-facts__image,
    .c-facts__image > img { object-position: center top; }
    .c-facts__wash {
        background: linear-gradient(
            to top,
            rgb(251 246 239) 0%,
            rgb(251 246 239 / 0.95) 60%,
            rgb(251 246 239 / 0.7) 80%,
            rgb(251 246 239 / 0.35) 100%
        );
    }
    .c-facts__headline { margin-bottom: 32px; }
    .c-facts__row { gap: 12px; }
    .c-facts__label { font-size: 1.75rem; }
}


/* ----------------------- PHOTO STRIP ----------------------- */
/* Figma 192:5091 — centred headline, then a 290px-tall row of photos (one 421)
   24 apart, running off both edges. Scrolls sideways; centred on load. */

.c-photo-strip {
    padding: var(--section-y) 0;
    overflow: hidden;
    background: #fff;
}
.c-photo-strip__inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto 49px;
    padding: 0 var(--gutter);
    text-align: center;
}
.c-photo-strip__headline {
    max-width: 640px;
    margin: 0 auto;
}
/* The viewport clips; the track holds the row twice and the script slides it
   by one row width per loop, easing to a halt while the pointer is over it.
   Reduced-motion (.is-still) gets a plain scrollable row instead. */
.c-photo-strip__viewport {
    --strip-h: 290px;
    overflow: hidden;
}
.c-photo-strip__track {
    display: flex;
    gap: 24px;
    width: max-content;
    padding: 0 var(--gutter);
    will-change: transform;
    backface-visibility: hidden;
}
/* Each photo gets its own layer too, so the slide never repaints the bitmaps.
   Hover (or keyboard focus) lifts the photo slightly inside its frame — the
   button clips — as the cue that it opens. */
.c-photo-strip__image,
.c-photo-strip__image > img {
    transform: translateZ(0);
    backface-visibility: hidden;
    transition: transform 420ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* Scale the <img> only — with Imagify's <picture> wrapper both carry the
   class, and scaling both would compound to 1.1 */
.c-photo-strip__open:hover img,
.c-photo-strip__open:focus-visible img { transform: translateZ(0) scale(1.05); }
@media (prefers-reduced-motion: reduce) {
    .c-photo-strip__image, .c-photo-strip__image > img { transition: none; }
}
.is-still.c-photo-strip__viewport { overflow-x: auto; scrollbar-width: none; }
.is-still .c-photo-strip__set[aria-hidden="true"] { display: none; }
.c-photo-strip__set {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.c-photo-strip__item {
    flex: 0 0 auto;
    height: var(--strip-h);
}
/* Portrait photos: 281×421 on the mock — a fixed frame the photo fills, so a
   landscape original is cropped to portrait rather than stretched wide. The
   row is centre-aligned, so they stand 65px above and below the others. */
.c-photo-strip__item--tall {
    width: calc(var(--strip-h) * 281 / 290);
    height: calc(var(--strip-h) * 421 / 290);
}
.c-photo-strip__item--tall .c-photo-strip__open { width: 100%; }
.c-photo-strip__item--tall .c-photo-strip__image,
.c-photo-strip__item--tall .c-photo-strip__image > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-photo-strip__open {
    display: block;
    height: 100%;
    padding: 0;
    overflow: hidden;
    background: none;
    border: 0;
    cursor: zoom-in;
}
.c-photo-strip__open:focus-visible { outline: 3px solid var(--color-secondary-400); outline-offset: 3px; }
.c-photo-strip__image,
.c-photo-strip__image > img {
    display: block;
    width: auto;
    height: 100%;
    max-width: none;
}

@media (max-width: 767px) {
    .c-photo-strip__inner { margin-bottom: 32px; }
    .c-photo-strip__viewport { --strip-h: 200px; }
    .c-photo-strip__track, .c-photo-strip__set { gap: 12px; }
}


/* ----------------------- TESTIMONIAL CARDS (STACKED) ----------------------- */
/* Figma 192:5112 — 646px band; headline on the band, three 496×568 cards under
   it overhanging the foot by 135px. */

.c-testimonial-cards--stacked {
    --band-h: 646px;
    --tc-lead: 0px;
    padding: 0 0 120px;
}
/* Nothing overhangs the top, so the band starts flush with the section */
.c-testimonial-cards--stacked .c-testimonial-cards__inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 40px;
    padding-top: 121px;
}
.c-testimonial-cards--stacked .c-testimonial-cards__intro { max-width: none; }
.c-testimonial-cards--stacked .c-testimonial-cards__headline {
    max-width: 746px;
    margin: 0;
    color: var(--color-primary-50);
}
.c-testimonial-cards--stacked .c-testimonial-cards__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.c-testimonial-cards--stacked .c-testimonial-cards__card { aspect-ratio: 496 / 568; }
/* The band has to be tall enough that the section keeps the cards' full height
   plus the overhang below them: 121 + 53 headline + 40 + 568 card = 782 tall
   inner, of which the band is 646 → the remaining 136 is the overhang. Since
   the inner is absolute, give the section its real height via padding. */
.c-testimonial-cards--stacked { padding-bottom: calc(136px + 120px); }
/* Palm frond, faint, top-right of the band */
.c-testimonial-cards--stacked::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
    width: 243px;
    height: 410px;
    background: url('../images/palm-steps.svg') no-repeat top right / contain;
    opacity: 0.5;
    pointer-events: none;
}

@media (max-width: 900px) {
    .c-testimonial-cards--stacked { padding-bottom: 0; }
    .c-testimonial-cards--stacked .c-testimonial-cards__inner { gap: 28px; padding-top: 60px; }
    .c-testimonial-cards--stacked::before { width: 120px; height: 200px; opacity: 0.3; }
}


/* ----------------------- FAQ SPLIT ----------------------- */
/* Figma 199:5139 — content 625 wide at the gutter, 81px down; 679×798 photo
   flush to the section top on the right half. */

.c-faq-split {
    padding: 0 0 120px;
    background: #fff;
}
/* Straight after a hero (the FAQ page) the image needs the section gap the
   beach-club instance gets from the component above it */
.c-faq-split--pad-top { padding-top: var(--section-y); }
.c-faq-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, min(679px, 45%));
    align-items: start;
    gap: clamp(2rem, 6vw, 6rem);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.c-faq-split__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
    max-width: 676px;
    padding-top: 81px;
}
.c-faq-split__eyebrow { margin: 0 0 5px; }
.c-faq-split__headline { max-width: 569px; margin: 0; }
.c-faq-split__items {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}
.c-faq-split__item {
    padding: 18px 20px;
    background: var(--color-secondary-50);
}
.c-faq-split__question { margin: 0; line-height: 1.2; }
.c-faq-split__trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    padding: 0;
    font: inherit;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    line-height: 1.2;
    text-align: left;
    color: var(--color-secondary-500);
    background: none;
    border: 0;
    cursor: pointer;
}
.c-faq-split__trigger:hover { color: var(--color-secondary-400); }
.c-faq-split__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 7px;
    transition: transform var(--transition);
}
.c-faq-split__item.is-open .c-faq-split__icon { transform: rotate(180deg); }
/* Open/close animates the grid row from 0fr to 1fr; the inner wrapper clips */
.c-faq-split__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 350ms ease;
}
.c-faq-split__panel-inner {
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 350ms;
}
.c-faq-split__item.is-open .c-faq-split__panel { grid-template-rows: 1fr; }
.c-faq-split__item.is-open .c-faq-split__panel-inner { visibility: visible; transition-delay: 0s; }
.c-faq-split__answer { padding-top: 16px; }
@media (prefers-reduced-motion: reduce) {
    .c-faq-split__panel, .c-faq-split__panel-inner { transition: none; }
}
.c-faq-split__answer {
    max-width: 602px;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}
.c-faq-split__answer p { margin: 0 0 var(--space-sm); }
.c-faq-split__answer p:last-child { margin: 0; }
.c-faq-split__media {
    position: relative;
    aspect-ratio: 679 / 798;
    overflow: hidden;
}
.c-faq-split__image,
.c-faq-split__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 900px) {
    /* No top padding: the leading photo sits flush against the section above */
    .c-faq-split { padding: 0 0 60px; }
    .c-faq-split__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .c-faq-split__content { padding-top: 0; }
    /* Stacked, the photo leads at full window width, like the home page's
       content + media sections */
    .c-faq-split__media {
        order: -1;
        margin: 0 calc(-1 * var(--gutter));
        aspect-ratio: 362 / 300;
    }
    .c-faq-split__trigger { align-items: center; font-size: 1.375rem; }
    .c-faq-split__icon { margin-top: 0; }
}


/* ----------------------- SIMPLE CTA ----------------------- */
/* Figma 200:5179 — 404px sand band with the photo at 35%; eyebrow, headline
   and button centred. */

.c-simple-cta {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background: var(--color-secondary-50);
    isolation: isolate;
    text-align: center;
}
.c-simple-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: 0.35;
}
.c-simple-cta__image,
.c-simple-cta__image > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-simple-cta__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xl);
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.c-simple-cta__eyebrow { margin: 0 0 5px; }
.c-simple-cta__headline { max-width: 569px; margin: 0; }
.c-simple-cta__eyebrow + .c-simple-cta__headline { margin-top: -27px; }
.c-simple-cta__content {
    max-width: 625px;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}
.c-simple-cta__buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
}

/* Dark variant (Employment's How to Apply): the photo reads through a navy
   wash and the type flips to white */
.c-simple-cta--dark { background: var(--color-primary-800); }
.c-simple-cta--dark .c-simple-cta__bg { opacity: 0.3; }
.c-simple-cta--dark .c-simple-cta__eyebrow { color: var(--color-secondary-200); }
.c-simple-cta--dark .c-simple-cta__headline,
.c-simple-cta--dark .c-simple-cta__content { color: #fff; }

@media (max-width: 767px) {
    .c-simple-cta { padding: 64px 0; }
    .c-simple-cta__buttons { flex-direction: column; gap: var(--space-md); width: 100%; }
    .c-simple-cta__buttons .btn { width: 100%; }
}

/* Body copy on the Beach Club components steps down to 18px on phones, as
   .nbc-content__body does on the homepage */
@media (max-width: 767px) {
    .c-hero-photo__content,
    .c-feature-carousel__lead,
    .c-feature-carousel__footnote,
    .c-facts__value,
    .c-faq-split__answer,
    .c-simple-cta__content { font-size: 1.125rem; }
}


/* ----------------------- ROOM FEATURE ----------------------- */
/* Figma 230:5492 — bungalow categories on the cream ground. Content column
   625 wide, collage 842 wide (482 + 340 up top, 842×360 below, 20 apart),
   53px between them; the copy starts 43px below the collage top. Sections sit
   240px apart (120 + 120). */

.c-room-feature {
    position: relative;
    padding: 120px 0;
    background: var(--color-secondary-50);
}
.c-room-feature__inner {
    /* z-index 2 in the page's own stacking context (the section sets none),
       so the content of one section also sits above a watermark band that
       reaches up out of the next section. */
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 625fr) minmax(0, 842fr);
    align-items: start;
    gap: 53px;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.c-room-feature--left .c-room-feature__inner { grid-template-columns: minmax(0, 842fr) minmax(0, 625fr); }
.c-room-feature--left .c-room-feature__content { grid-column: 2; grid-row: 1; }
.c-room-feature--left .c-room-feature__collage { grid-column: 1; grid-row: 1; }

.c-room-feature__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
    max-width: 625px;
    padding-top: 43px;
}
.c-room-feature__headline { max-width: 569px; margin: 0; }
.c-room-feature__subline {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 800;
    line-height: 1.5;
    color: var(--color-primary-800);
}
.c-room-feature__body {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}
.c-room-feature__body p { margin: 0 0 var(--space-md); }
.c-room-feature__body p:last-child { margin: 0; }
/* Ruled feature list — same treatment as the Facts rows */
.c-room-feature__features {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: 614px;
    margin: 0;
}
.c-room-feature__feature {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-secondary-200);
}
.c-room-feature__feature:last-child { padding-bottom: 0; border-bottom: 0; }
.c-room-feature__feature-title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 2rem;
    line-height: 1.2;
    color: var(--color-secondary-400);
}
.c-room-feature__feature-text {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}

/* Collage */
.c-room-feature__collage {
    display: grid;
    grid-template-columns: minmax(0, 482fr) minmax(0, 340fr);
    grid-template-rows: auto auto;
    gap: 20px;
}
.c-room-feature__photo {
    position: relative;
    overflow: hidden;
    background: var(--color-secondary-100);
}
.c-room-feature__photo--1 { grid-column: 1; grid-row: 1; aspect-ratio: 482 / 477; }
.c-room-feature__photo--2 { grid-column: 2; grid-row: 1; aspect-ratio: 340 / 477; }
.c-room-feature__photo--3 { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 842 / 360; }
.c-room-feature__collage--1 .c-room-feature__photo--1 { grid-column: 1 / -1; aspect-ratio: 842 / 600; }
.c-room-feature__collage--2 .c-room-feature__photo--1,
.c-room-feature__collage--2 .c-room-feature__photo--2 { aspect-ratio: auto; min-height: 477px; }
.c-room-feature__img,
.c-room-feature__img > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Decorations. The trees are one transparent export of both painted branches
   (Figma 525:1997), 1680×370 on the frame, flush with the section's top and
   scaling with the viewport width. Extra room at the top keeps the copy clear. */
.c-room-feature--tree { padding-top: 240px; overflow: hidden; }
.c-room-feature__tree {
    position: absolute;
    top: 0;
    left: 0;
    /* Above a watermark band reaching up from the next section (z-index 1),
       below this section's own content (z-index 2, later in the DOM) */
    z-index: 2;
    width: 100%;
    height: auto;
    /* Softer than the export: knocked back overall and dissolving at both
       the top and bottom edges */
    opacity: 0.75;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 42%, #000 78%, transparent 100%);
    pointer-events: none;
}
/* Watercolour bands (Figma 233:6603 / 239:6607): 831px tall, centred on the
   240px gap between two sections — so the band reaches ~295px up into the
   section above and ~300px down into this one — at 40% (shoreline) / 50%
   (surf) under a cream fade that is solid at both ends. Content in both
   sections paints over it (see __inner's z-index). */
.c-room-feature__shore {
    position: absolute;
    /* Sits low: the band's densest artwork lands in the open gap between the
       sections instead of hiding behind the previous section's photos */
    top: calc(-120px - 295px);
    left: 0;
    right: 0;
    z-index: 1;
    height: 831px;
    overflow: hidden;
    opacity: 0.5;
    pointer-events: none;
}
.c-room-feature__shore img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-room-feature__shore::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgb(251 246 239) 0%,
        rgb(251 246 239 / 0.75) 32%,
        rgb(251 246 239 / 0) 46%,
        rgb(251 246 239 / 0.75) 62%,
        rgb(251 246 239) 100%
    );
}

/* Surf variant: 50% on the mock, and the artwork is blown up inside the band
   exactly as Figma crops it (169% wide, 139% tall, shifted 47.5% left and 39%
   up) so the break line sits across the middle */
.c-room-feature__shore--waves { opacity: 0.6; }
.c-room-feature__shore--waves img {
    position: absolute;
    top: -39%;
    left: -47.5%;
    width: 169%;
    max-width: none;   /* the global img rule would cap it at 100% and cut the right side */
    height: 139%;
    object-fit: fill;
}
.c-room-feature__shore--waves::after {
    background: linear-gradient(
        to bottom,
        rgb(251 246 239) 0%,
        rgb(251 246 239) 12%,
        rgb(251 246 239 / 0.75) 30%,
        rgb(251 246 239 / 0) 46%,
        rgb(251 246 239 / 0.75) 67%,
        rgb(251 246 239) 100%
    );
}

@media (max-width: 1100px) {
    .c-room-feature { padding: 80px 0; }
    .c-room-feature--tree { padding-top: 160px; }
    .c-room-feature__shore { top: calc(-80px - 170px); height: 480px; }
    .c-room-feature__inner,
    .c-room-feature--left .c-room-feature__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .c-room-feature--left .c-room-feature__content,
    .c-room-feature--left .c-room-feature__collage { grid-column: 1; grid-row: auto; }
    .c-room-feature__content { padding-top: 0; max-width: none; }
    /* Trees scale with the viewport, so the narrow screens just need less headroom */
}
@media (max-width: 767px) {
    .c-room-feature { padding: 60px 0; }
    .c-room-feature--tree { padding-top: 120px; }
    .c-room-feature__shore { top: calc(-60px - 130px); height: 360px; }
    /* Photos sit close under their section's content */
    .c-room-feature__inner,
    .c-room-feature--left .c-room-feature__inner { gap: 20px; }
    .c-room-feature__collage { gap: 12px; }
    .c-room-feature__feature { gap: 12px; }
    .c-room-feature__feature-title { font-size: 1.75rem; }
    .c-room-feature__tree { width: 140%; max-width: none; left: -20%; }
    .c-room-feature__actions { width: 100%; }
    .c-room-feature__actions .btn { width: 100%; }
}


/* ----------------------- ILLUSTRATED MAP ----------------------- */
/* Figma 230:5536 — intro 625 wide, then the map at container width. */

.c-illustrated-map {
    padding: 118px 0 106px;
    background: #fff;
}
.c-illustrated-map__inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.c-illustrated-map__intro {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    max-width: 705px;
    margin-bottom: 30px;
}
.c-illustrated-map__headline { margin: 0; }
.c-illustrated-map__body {
    max-width: 625px;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text);
}
.c-illustrated-map__body p { margin: 0 0 var(--space-md); }
.c-illustrated-map__body p:last-child { margin: 0; }
.c-illustrated-map__figure { margin: 0; }
.c-illustrated-map__img,
.c-illustrated-map__img > img {
    display: block;
    width: 100%;
    height: auto;
}

.c-illustrated-map__open {
    display: block;
    width: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: zoom-in;
}
.c-illustrated-map__open:focus-visible { outline: 3px solid var(--color-secondary-400); outline-offset: 3px; }

@media (max-width: 767px) {
    .c-illustrated-map { padding: 60px 0; }
    .c-illustrated-map__intro { margin-bottom: 24px; }
}


/* ----------------------- RESTAURANT MENU ----------------------- */
/* Figma 179:3694 — dark ground. A sticky bar of category labels (24px IvyMode,
   60 apart, idle at 50%, active underlined in sand) under the fixed header,
   then per category: a 625 intro column that sticks, and an 895 sand panel
   with a paper texture listing the items. */

:root { --nbc-header-stuck: 88px; }   /* .site-header.is-stuck: 14 + 60 + 14 */
/* ≤1239 the stuck header keeps the 75px logo with 14px padding → 103. The
   menu script re-measures the real height on load/resize as a backstop. */
@media (max-width: 1239px) { :root { --nbc-header-stuck: 103px; } }

.c-menu {
    position: relative;
    background: var(--color-primary-900);
    color: #fff;
}
/* The 40px above the tabs belongs to the bar, so it parks under the header
   with that breathing room rather than the labels jammed against it */
.c-menu__nav {
    position: sticky;
    top: var(--nbc-header-stuck);
    z-index: 20;
    /* Sized like the main nav and no taller than the stuck header (88px) */
    padding-top: 30px;
    background: var(--color-primary-900);
    border-bottom: 1px solid var(--color-primary-600);
}
.c-menu__nav-inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    /* Horizontal padding lives on the tab list, not here: browsers drop a
       scroll container's own right padding past the last flex item, which
       left the final tab clipped at max scroll. */
    padding: 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.c-menu__tabs { padding: 0 var(--gutter); }
.c-menu__nav-inner::-webkit-scrollbar { display: none; }
.c-menu__tabs {
    display: flex;
    justify-content: center;
    gap: 60px;
    width: max-content;
    min-width: 100%;
    margin: 0;
    list-style: none;
    white-space: nowrap;
}
.c-menu__tab-link {
    position: relative;
    display: block;
    padding: 0 0 30px;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    line-height: 1.1;
    color: #fff;
    opacity: 0.5;
    text-decoration: none;
    transition: opacity var(--transition);
}
.c-menu__tab-link:hover,
.c-menu__tab-link:focus-visible { opacity: 0.85; }
.c-menu__tab-link.is-active { opacity: 1; }
/* Sand underline sits on the rule */
.c-menu__tab-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 3px;
    background: var(--color-secondary-200);
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity var(--transition), transform var(--transition);
}
.c-menu__tab-link.is-active::after { opacity: 1; transform: scaleX(1); }

/* Sections */
.c-menu__section { padding: 81px 0 120px; }
.c-menu__inner {
    display: grid;
    grid-template-columns: minmax(0, 625fr) minmax(0, 895fr);
    align-items: start;
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
/* Intro column follows the reader through its own section — the cell has to
   span the full row (the panel's height) for the sticky child to travel */
.c-menu__intro { position: relative; align-self: stretch; }
.c-menu__intro-sticky {
    position: sticky;
    top: calc(var(--nbc-header-stuck) + 83px + 40px);   /* header + bar (30 + 22 + 30 + 1) + gap */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xl);
    max-width: 505px;
    padding: 39px 40px 0 0;
}
.c-menu__eyebrow { margin: 0 0 5px; color: var(--color-secondary-200); }
.c-menu__headline { max-width: 569px; margin: -27px 0 0; color: #fff; }
.c-menu__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 505 / 402;
    overflow: hidden;
    background: var(--color-primary-800);
}
.c-menu__photo-img,
.c-menu__photo-img > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.c-menu__description {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-accent-50);
}
.c-menu__downloads {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.c-menu__download {
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-primary-200);
    text-decoration: none;
    transition: color var(--transition);
}
.c-menu__download:hover { color: #fff; text-decoration: underline; }

/* Sand panel with a paper grain */
.c-menu__panel {
    position: relative;
    padding: 47px 80px 80px;
    background: var(--color-secondary-100) url('../images/nbc/paper.jpg') center / cover;
    background-blend-mode: multiply;
    border-radius: 10px;
    color: var(--color-primary-700);
}
/* The grain is 15% on the mock — a sand overlay knocks the photo back */
.c-menu__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-secondary-100);
    opacity: 0.85;
    border-radius: 10px;
    pointer-events: none;
}
.c-menu__panel > * { position: relative; }
.c-menu__note {
    margin: 0 0 47px;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
    text-align: right;
    color: var(--color-primary-600);
}
.c-menu__group + .c-menu__group { margin-top: 60px; }
.c-menu__group-heading {
    margin: 0 0 40px;
    font-size: var(--text-4xl);
    line-height: 1.1;
    color: var(--color-primary-700);
}
.c-menu__items {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.c-menu__item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgb(214 190 148 / 0.5);
}
.c-menu__item-main {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 625px;
}
.c-menu__item-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.75rem;
    line-height: 1.2;
    color: var(--color-primary-700);
}
.c-menu__item-desc {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-primary-600);
}
.c-menu__item-note {
    margin: 0;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--color-primary-600);
}
/* Group-level notes: under the group heading, and after a group's items */
.c-menu__group-note,
.c-menu__group-footnote {
    /* Hugs the heading it belongs to (heading carries 40px), clear of the items */
    margin: -30px 0 32px;
    font-size: 1rem;
    font-style: italic;
    line-height: 1.5;
    color: var(--color-primary-600);
}
.c-menu__group-footnote { margin: 14px 0 0; }
.c-menu__item-price {
    flex-shrink: 0;
    min-width: 115px;
    margin: 2px 0 0;
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.5;
    text-align: right;
    color: var(--color-secondary-500);
}

@media (max-width: 1100px) {
    .c-menu__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .c-menu__intro-sticky { position: static; max-width: 625px; padding: 0; }
    .c-menu__section { padding: 60px 0 80px; }
    .c-menu__panel { padding: 32px 40px 48px; }
}
@media (max-width: 767px) {
    .c-menu__nav { padding-top: 18px; }
    .c-menu__tabs { justify-content: flex-start; gap: 32px; }
    .c-menu__tab-link { padding-bottom: 16px; font-size: 1.125rem; }
    .c-menu__section { padding: 40px 0 60px; }
    .c-menu__panel { padding: 24px 20px 32px; }
    .c-menu__note { margin-bottom: 24px; font-size: 0.875rem; }
    .c-menu__group + .c-menu__group { margin-top: 40px; }
    .c-menu__group-heading { margin-bottom: 24px; }
    .c-menu__group-note { margin: -16px 0 24px; }
    .c-menu__items { gap: 20px; }
    .c-menu__item { gap: 16px; padding-bottom: 14px; }
    .c-menu__item-name { font-size: 1.375rem; }
    .c-menu__item-price { min-width: 64px; }
}


/* ----------------------- SITE LIGHTBOX ----------------------- */
/* Figma 258:6691 — 95% navy ground, brush-X close at the top right (61px,
   72 down / 70 in on the 1680 frame), "Book Now / Reserve Your VIP Beach
   Break" centred in white 119px down, and a 1150px panel with 10px corners
   starting 239px down. The same shell shows a single photo. */

.nbc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    overflow-y: auto;
    background: rgb(21 21 30 / 0.95);
    opacity: 0;
    transition: opacity 220ms ease;
}
.nbc-lightbox.is-open { opacity: 1; }
.nbc-lightbox__panel {
    position: relative;
    min-height: 100%;
    padding: 119px var(--gutter) 80px;
    outline: none;
}
.nbc-lightbox__close {
    position: fixed;
    top: 72px;
    right: 70px;
    z-index: 1;
    width: 61px;
    height: 61px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transition: transform var(--transition);
}
.nbc-lightbox__close:hover { transform: rotate(90deg); }
.nbc-lightbox__close img { display: block; width: 100%; height: 100%; }
.nbc-lightbox__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto 41px;
    text-align: center;
}
.nbc-lightbox__eyebrow { margin: 0 0 5px; color: var(--color-secondary-200); }
.nbc-lightbox__title { margin: 0; color: #fff; }
.nbc-lightbox__embed {
    width: min(1150px, 100%);
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
    border-radius: 10px;
}
.nbc-lightbox__embed .bokunWidget { min-height: 60vh; }
/* Photo mode: centre the image in the viewport */
.nbc-lightbox--image .nbc-lightbox__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px var(--gutter);
}
.nbc-lightbox__figure { margin: 0; }
.nbc-lightbox__img {
    display: block;
    max-width: min(1400px, 100%);
    max-height: calc(100vh - 160px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgb(0 0 0 / 0.5);
}
/* Prev / next arrows, same brush mark as the card carousel, mirrored for prev */
.nbc-lightbox__arrow {
    position: fixed;
    top: 50%;
    z-index: 1;
    /* Half the carousel arrow's 61×115 */
    width: 30px;
    height: 57px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    transform: translateY(-50%);
    opacity: 0.85;
    transition: opacity var(--transition), transform var(--transition);
    filter: drop-shadow(0 4px 12px rgb(0 0 0 / 0.5));
}
.nbc-lightbox__arrow--prev { left: 40px; transform: translateY(-50%) scaleX(-1); }
.nbc-lightbox__arrow--next { right: 40px; }
.nbc-lightbox__arrow:hover,
.nbc-lightbox__arrow:focus-visible { opacity: 1; }
.nbc-lightbox__arrow--prev:hover { transform: translateY(-50%) scaleX(-1) translateX(4px); }
.nbc-lightbox__arrow--next:hover { transform: translateY(-50%) translateX(4px); }
.nbc-lightbox__arrow img { display: block; width: 100%; height: 100%; }
.nbc-lightbox__count {
    position: fixed;
    left: 50%;
    bottom: 28px;
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 800;
    letter-spacing: var(--tracking-eyebrow);
    color: var(--color-secondary-200);
    transform: translateX(-50%);
}
/* Map mode: the image renders full size inside a scrollable frame, so it can
   be dragged / swiped around — the inline map is too small to read on phones */
.nbc-lightbox--map .nbc-lightbox__figure {
    max-width: calc(100vw - 2 * var(--gutter));
    max-height: calc(100vh - 160px);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgb(0 0 0 / 0.5);
}
.nbc-lightbox--map .nbc-lightbox__img {
    max-width: none;
    max-height: none;
    width: 2000px;
    border-radius: 0;
    box-shadow: none;
}
@media (max-width: 767px) {
    .nbc-lightbox--map .nbc-lightbox__figure {
        max-width: calc(100vw - 32px);
        max-height: calc(100vh - 128px);
    }
}

body.lightbox-open { overflow: hidden; }

@media (max-width: 767px) {
    .nbc-lightbox__panel { padding: 96px var(--gutter) 40px; }
    .nbc-lightbox__close { top: 20px; right: 20px; width: 40px; height: 40px; }
    .nbc-lightbox__heading { margin-bottom: 24px; }
    .nbc-lightbox--image .nbc-lightbox__panel { padding: 72px 56px 56px; }
    .nbc-lightbox__img { max-height: calc(100vh - 128px); }
    .nbc-lightbox__arrow { width: 22px; height: 42px; }
    .nbc-lightbox__arrow--prev { left: 12px; }
    .nbc-lightbox__arrow--next { right: 12px; }
    .nbc-lightbox__count { bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .nbc-lightbox { transition: none; }
}

/* =================================================================
   PRINT STYLES
   ================================================================= */

@media print {
    /* Page setup */
    @page {
        margin: 0.75in;
        size: letter;
    }

    /* Reset colors for print */
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    /* Typography adjustments */
    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    h1 { font-size: 24pt; }
    h2 { font-size: 20pt; }
    h3 { font-size: 16pt; }
    h4, h5, h6 { font-size: 14pt; }

    /* Hide non-printable elements */
    .site-header,
    .site-footer,
    .site-nav,
    .mobile-nav-toggle,
    .skip-link,
    .c-sticky-cta,
    .btn,
    .btn--primary,
    .btn--secondary,
    .c-hero__buttons,
    .c-cta__buttons,
    .c-content-media__buttons,
    .c-cards .c-card__link,
    .search-form,
    .post-nav,
    .pagination,
    .gform_wrapper,
    .c-form-section,
    .global-cta,
    video,
    iframe,
    .c-gallery[data-layout="carousel"],
    .c-testimonials__nav,
    .c-testimonials__dots,
    noscript {
        display: none !important;
    }

    /* Show main content area */
    .site-main,
    main {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Container adjustments */
    .container {
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Component spacing for print */
    .component {
        padding: 0.5in 0 !important;
        margin: 0 !important;
        page-break-inside: avoid;
    }

    /* Hero - simplified */
    .c-hero {
        min-height: auto !important;
        height: auto !important;
        padding: 0.25in 0 !important;
        background: none !important;
    }
    .c-hero::before { display: none !important; }
    .c-hero__content {
        position: static !important;
        transform: none !important;
    }
    .c-hero__eyebrow { color: #666 !important; }
    .c-hero__headline { font-size: 28pt !important; }

    /* Content + Media - stack vertically */
    .c-content-media__inner {
        display: block !important;
    }
    .c-content-media__media {
        max-width: 100% !important;
        margin-bottom: 0.25in !important;
    }
    .c-content-media__media img {
        max-width: 4in !important;
        height: auto !important;
    }

    /* Cards - grid for print */
    .c-cards__grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.25in !important;
    }
    .c-card {
        border: 1px solid #ccc !important;
        padding: 0.15in !important;
        page-break-inside: avoid;
    }
    .c-card__image {
        max-height: 1.5in !important;
        overflow: hidden;
    }

    /* Testimonials - show all */
    .c-testimonials__slider {
        display: block !important;
        overflow: visible !important;
    }
    .c-testimonials__slider .c-testimonial {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.25in !important;
        border: 1px solid #ccc !important;
        padding: 0.15in !important;
        page-break-inside: avoid;
    }
    .c-testimonials__slider .c-testimonial[hidden] {
        display: block !important;
    }

    /* Accordion - expand all for print */
    .c-accordion__content {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 0.1in 0 !important;
    }
    .c-accordion__item {
        border: 1px solid #ccc !important;
        margin-bottom: 0.1in !important;
        padding: 0.1in !important;
        page-break-inside: avoid;
    }
    .c-accordion__icon { display: none !important; }

    /* Stats */
    .c-stats__grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.25in !important;
    }
    .c-stat {
        flex: 1 1 30% !important;
        text-align: center;
    }

    /* Logo grid */
    .c-logos__grid {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.15in !important;
    }
    .c-logos__item {
        width: 1in !important;
        filter: none !important;
    }
    .c-logos__item img {
        max-width: 100% !important;
        max-height: 0.75in !important;
    }

    /* Gallery - grid only */
    .c-gallery__grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.1in !important;
    }
    .c-gallery__item img {
        max-height: 1.5in !important;
    }

    /* Icon cards */
    .c-icon-cards__grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.2in !important;
    }
    .c-icon-card {
        border: 1px solid #ccc !important;
        padding: 0.1in !important;
        page-break-inside: avoid;
    }

    /* Contact info */
    .c-contact-info__items {
        display: block !important;
    }
    .c-contact-info__item {
        margin-bottom: 0.1in !important;
    }

    /* Map - show placeholder text */
    .c-map__embed {
        border: 1px solid #ccc !important;
        padding: 0.25in !important;
        text-align: center;
    }
    .c-map__embed::after {
        content: "[Map - See website for interactive version]";
        display: block;
        font-style: italic;
        color: #666 !important;
    }

    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid;
    }

    /* Links - show URLs */
    a[href^="http"]:after,
    a[href^="https"]:after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666 !important;
        word-break: break-all;
    }

    /* Don't show URL for buttons or images */
    a.btn:after,
    a.c-card:after,
    a > img:after,
    .c-logos__item a:after {
        content: none !important;
    }

    /* Page break hints */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
        page-break-inside: avoid;
    }

    p, blockquote, ul, ol, dl, table, figure {
        page-break-inside: avoid;
    }

    /* Orphan/widow control */
    p {
        orphans: 3;
        widows: 3;
    }

    /* Archive/blog posts */
    .archive-page__grid {
        display: block !important;
    }
    .archive-card {
        display: flex !important;
        gap: 0.2in !important;
        border-bottom: 1px solid #ccc !important;
        padding: 0.15in 0 !important;
        page-break-inside: avoid;
    }
    .archive-card__image {
        width: 1.5in !important;
        flex-shrink: 0;
    }

    /* Single post */
    .single-post__featured {
        max-height: 3in !important;
        overflow: hidden;
    }
    .author-box {
        border: 1px solid #ccc !important;
        padding: 0.15in !important;
        margin: 0.25in 0 !important;
    }

    /* Prose content */
    .prose {
        max-width: 100% !important;
    }
    .prose a:after {
        content: none !important; /* Too noisy in body text */
    }

    /* CTA section - text only */
    .c-cta {
        border: 2px solid #000 !important;
        padding: 0.25in !important;
        text-align: center;
    }

    /* Background sections - add border for visual separation */
    .bg--dark,
    .bg--brand,
    .bg--light {
        border: 1px solid #ccc !important;
        padding: 0.2in !important;
        margin: 0.1in 0 !important;
    }
}