/* ============================================================
   M&K Adventure — Design System & Base Styles
   ============================================================ */

/* ── Modern CSS Reset ──────────────────────────────────────── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* ── Lenis ─────────────────────────────────────────────────── */
/* Lenis writes window.scrollTo() every frame. Native `scroll-behavior: smooth`
   turns each of those into its own animated scroll, so the two fight and the
   page stalls then lurches. Lenis ships these rules; we inline them because we
   load the JS without its stylesheet. Scoped to .lenis so pages without it keep
   native smooth scrolling. */
html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

a {
    text-decoration: none;
    color: inherit;
}

ul,
ol {
    list-style: none;
}

/* ── Self-hosted fonts (PERF-022) — woff2 in /assets/fonts ─── */
/* Manrope — latin */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: local('Manrope'),
         url('../fonts/manrope-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    size-adjust: 100%;
    ascent-override: 95%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* Manrope — latin-ext (covers Spanish accents/punctuation) */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: local('Manrope'),
         url('../fonts/manrope-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    size-adjust: 100%;
    ascent-override: 95%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* Fraunces — latin */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: local('Fraunces'),
         url('../fonts/fraunces-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
    size-adjust: 105%;
    ascent-override: 92%;
    descent-override: 25%;
    line-gap-override: 0%;
}

/* Fraunces — latin-ext */
@font-face {
    font-family: 'Fraunces';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: local('Fraunces'),
         url('../fonts/fraunces-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
    size-adjust: 105%;
    ascent-override: 92%;
    descent-override: 25%;
    line-gap-override: 0%;
}

/* ── Design System Custom Properties ───────────────────────── */
:root {
    /* Cream palette */
    --cream: #F2E9DD;
    --cream-light: #FAF6F0;
    --cream-dark: #E5D4BF;
    --cream-strong: #D8C2A2;

    /* Teal palette */
    --teal: #023047;
    --teal-light: #1D515D;
    --teal-dark: #0B2329;
    --teal-muted: #93C6CC;

    /* Gold palette */
    --gold: #F6B915;
    --gold-text: #b48c26;
    --gold-hover: #9e7325;
    --gold-glow: rgba(242, 190, 79, 0.35);
    --gold-soft: rgba(224, 171, 56, 0.12);
    --gold-button-bg: #F6B915;

    /* Ink & paper */
    --ink: #0C1F24;
    --ink-light: rgba(12, 31, 36, 0.7);
    --paper: #FCFAF7;
    --white: #FFFDF8;
    --divider: rgba(12, 31, 36, 0.08);

    /* Overlays */
    --overlay-light: rgba(11, 35, 41, 0.45);
    --overlay-heavy: rgba(11, 35, 41, 0.7);

    /* Glass (for transparent header / dark bg elements) */
    --glass-bg: rgba(255, 253, 248, 0.06);
    --glass-bg-hover: rgba(255, 253, 248, 0.12);
    --glass-border: rgba(255, 253, 248, 0.2);
    --glass-border-hover: rgba(255, 253, 248, 0.25);
    --glass-text: rgba(255, 253, 248, 0.95);
    --glass-text-muted: rgba(255, 253, 248, 0.8);

    /* White alpha */
    --white-4: rgba(255, 255, 255, 0.04);
    --white-6: rgba(255, 255, 255, 0.06);
    --white-8: rgba(255, 255, 255, 0.08);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-12: rgba(255, 255, 255, 0.12);
    --white-25: rgba(255, 255, 255, 0.25);

    /* Gold borders */
    --gold-border-hover: rgba(200, 150, 46, 0.2);
    --gold-border-strong: rgba(200, 150, 46, 0.3);

    /* Teal shadow */
    --teal-shadow: rgba(18, 52, 59, 0.4);
    --teal-shadow-hover: rgba(18, 52, 59, 0.55);
    --teal-shadow-pulse: rgba(18, 52, 59, 0.15);

    /* Typography — Families */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Manrope', system-ui, sans-serif;

    /* Border Radius */
    --radius: 20px;
    --radius-sm: 12px;
    --radius-xs: 8px;

    /* Shadows */
    --shadow-soft: 0 8px 32px rgba(12, 31, 36, 0.08);
    --shadow-mid: 0 16px 48px rgba(12, 31, 36, 0.12);

    /* Transition */
    --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);

    /* Error */
    --error: #c0392b;
    --error-soft: rgba(192, 57, 43, 0.12);
    --error-bg: rgba(192, 57, 43, 0.04);
}

/* ── Base Styles ───────────────────────────────────────────── */
body {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--ink);
    background-color: var(--paper);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--gold);
    transition: color var(--transition);
}

a:hover {
    color: var(--gold-hover);
}

a.btn,
a.btn:hover {
    color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.2;
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--ink);
}

h1 {
    font-size: clamp(2rem, 5vw, 3.75rem);
}

h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}

h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.875rem);
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 1.125rem;
}

h6 {
    font-size: 1rem;
}

/* ── Focus Styles ──────────────────────────────────────────── */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ── Utility Classes ───────────────────────────────────────── */
.container {
    width: min(1240px, calc(100% - clamp(1.5rem, 4vw, 2.5rem)));
    margin-left: auto;
    margin-right: auto;
}

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

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

.icon-sm {
    width: 18px;
    height: 18px;
}

.icon-xs {
    width: 14px;
    height: 14px;
}

/* ── Button Base Styles ────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    height: 40px;
    padding: 0 1.4rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    border: none;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn--primary {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--gold);
}

.btn--primary:hover {
    background: var(--gold-soft);
}

.btn--gold {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--gold);
}

.btn--gold:hover {
    background: var(--gold-soft);
    transform: translateY(-1px);
}

.btn--lg {
    padding: 0.55rem 1.4rem;
    font-size: 0.9rem;
}

.btn--xl {
    padding: 0.55rem 1.4rem;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 999px;
    gap: 0.6rem;
}

.btn--xl:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 40px var(--gold-glow);
}

.btn--outline-light {
    background-color: transparent;
    color: var(--glass-text);
    border: 1.5px solid var(--glass-border);
}

.btn--outline-light:hover {
    background-color: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
}

.btn--white {
    background-color: var(--white);
    color: var(--ink);
}

.btn--white:hover {
    background-color: var(--cream-light);
}

@media (prefers-reduced-motion: reduce) {
    .btn {
        transition: none;
    }

    .btn--gold:hover {
        transform: none;
    }
}

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

/* ── Skip Link ─────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    padding: 0.75rem 1.5rem;
    background-color: var(--teal);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: 999px;
    text-decoration: none;
    transition: top var(--transition);
}

.skip-link:focus {
    top: 1rem;
}

/* ── Site Header ───────────────────────────────────────────── */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 1rem 0;
    transition: var(--transition);
}

.site-header.scrolled {
    background: rgba(250, 246, 240, 0.92);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
    box-shadow: 0 4px 24px rgba(12, 31, 36, 0.06);
    padding: 0.6rem 0;
}

/* WordPress admin bar compatibility */
.admin-bar .site-header {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar .site-header {
        top: 46px;
    }
}

.admin-bar .skip-link:focus {
    top: calc(1rem + 32px);
}

@media (max-width: 782px) {
    .admin-bar .skip-link:focus {
        top: calc(1rem + 46px);
    }
}

/* ── Header Inner ──────────────────────────────────────────── */
.header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* ── Brand ─────────────────────────────────────────────────── */
.brand {
    display: inline-flex;
    align-items: center;
    z-index: 10;
}

.brand-logo {
    height: 52px;
    width: auto;
    border-radius: 4px;
    object-fit: contain;
}

/* ── Main Navigation (Desktop) ─────────────────────────────── */
.main-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
}

.nav-link {
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--glass-text-muted);
    transition: var(--transition);
}

.site-header .nav-link:hover {
    color: var(--white);
    background: var(--glass-bg-hover);
}

.site-header.scrolled .nav-link {
    color: var(--ink-light);
}

.site-header.scrolled .nav-link:hover {
    color: var(--ink);
    background: var(--divider);
}

.nav-link.nav-link--cta {
    background: transparent;
    color: var(--white);
    border: 1.5px solid var(--gold);
    font-weight: 700;
    font-size: 0.9rem;
    height: 40px;
    padding: 0 1.4rem;
    display: inline-flex;
    align-items: center;
}

.nav-link.nav-link--cta:visited,
.nav-link.nav-link--cta:active,
.nav-link.nav-link--cta:focus {
    color: var(--white);
}

.nav-link.nav-link--cta:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.site-header.scrolled .nav-link.nav-link--cta:hover {
    background: var(--gold-soft);
    color: var(--ink);
}

.site-header.scrolled .nav-link.nav-link--cta {
    background: transparent;
    color: var(--ink);
    border-color: var(--gold);
}

.site-header.scrolled .nav-link.nav-link--cta:visited,
.site-header.scrolled .nav-link.nav-link--cta:active,
.site-header.scrolled .nav-link.nav-link--cta:focus {
    color: var(--ink);
}

/* ── Header Actions ────────────────────────────────────────── */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 10;
}

/* ── Language Toggle ───────────────────────────────────────── */
.lang-toggle {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--glass-text-muted);
    border: 1.5px solid var(--glass-border-hover);
    background: transparent;
}

.site-header.scrolled .lang-toggle {
    color: var(--ink);
    border-color: var(--divider);
}

.lang-toggle__link {
    opacity: 0.4;
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.lang-toggle__link:hover {
    opacity: 1;
    color: var(--white);
}

.site-header.scrolled .lang-toggle__link:hover {
    color: var(--gold);
}

.lang-toggle__link--active {
    opacity: 1;
    font-weight: 800;
}

.lang-toggle__divider {
    opacity: 0.4;
}

/* ── Header Phone ──────────────────────────────────────────── */
.header-phone {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--glass-text);
    transition: var(--transition);
}

.site-header.scrolled .header-phone {
    color: var(--ink);
}

/* ── Menu Toggle (Hamburger) ───────────────────────────────── */
.menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    border-radius: var(--radius-sm);
    padding: 0.5rem;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 10;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background-color: var(--white);
    border-radius: 2px;
    transition: transform var(--transition), opacity var(--transition);
}

.site-header.scrolled .menu-toggle span {
    background-color: var(--ink);
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Menu Open: force white on scrolled header ── */
.site-header.menu-open .menu-toggle span {
    background-color: var(--white);
}

.site-header.menu-open .lang-toggle {
    color: var(--white);
    border-color: var(--glass-border);
}

.site-header.menu-open .lang-toggle__link {
    color: var(--glass-text-muted);
}

.site-header.menu-open .lang-toggle__link--active {
    color: var(--white);
}

.site-header.menu-open .lang-toggle__link:hover {
    color: var(--gold);
}

.site-header.menu-open .header-phone {
    color: var(--white);
}

/* ── Header Focus Styles ───────────────────────────────────── */
.site-header :focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 999px;
}

.site-header.scrolled :focus-visible {
    outline-color: var(--teal);
}

/* ── Mobile nav defaults (desktop) ─────────────────────────── */
.mobile-nav-footer {
    display: none;
}

.mobile-nav-links {
    display: contents;
}

/* ── Mobile Navigation ─────────────────────────────────────── */
@media (max-width: 768px) {
    .menu-toggle {
        display: flex;
    }

    .site-header.menu-open {
        background-color: var(--teal-dark);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .header-phone {
        display: none;
    }

    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--teal-dark);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition), visibility var(--transition);
        z-index: 5;
    }

    .main-nav::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
            radial-gradient(ellipse at 20% 50%, var(--gold-soft) 0%, transparent 60%),
            radial-gradient(ellipse at 80% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
        pointer-events: none;
    }

    .main-nav.open {
        opacity: 1;
        visibility: visible;
    }

    .mobile-nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 6rem;
        gap: 0.25rem;
    }

    .main-nav .nav-link {
        font-size: 1.8rem;
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--white);
        opacity: 0.7;
        border-radius: var(--radius-sm);
        padding: 0.5rem 1rem;
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.4s ease, transform 0.4s ease, background-color var(--transition);
    }

    .main-nav .nav-link:hover {
        opacity: 1;
        background-color: var(--glass-bg-hover);
    }

    .main-nav.open .nav-link {
        opacity: 0.7;
        transform: translateY(0);
        color: var(--white);
        background: transparent;
    }

    .main-nav.open .nav-link:hover {
        opacity: 1;
        color: var(--white);
    }

    .main-nav.open .nav-link:nth-child(1) {
        transition-delay: 0.08s;
    }

    .main-nav.open .nav-link:nth-child(2) {
        transition-delay: 0.14s;
    }

    .main-nav.open .nav-link:nth-child(3) {
        transition-delay: 0.20s;
    }

    .main-nav.open .nav-link:nth-child(4) {
        transition-delay: 0.26s;
    }

    .main-nav.open .nav-link:nth-child(5) {
        transition-delay: 0.32s;
    }

    .main-nav.open .nav-link:nth-child(6) {
        transition-delay: 0.38s;
    }

    .main-nav .nav-link.nav-link--cta {
        font-size: 1rem;
        font-family: var(--font-body);
        background-color: var(--gold-button-bg);
        color: var(--white);
        margin-top: 0.75rem;
        opacity: 0;
        transform: translateY(20px);
        box-shadow: 0 4px 24px var(--gold-glow);
    }

    .main-nav .nav-link.nav-link--cta,
    .main-nav .nav-link.nav-link--cta:visited,
    .main-nav .nav-link.nav-link--cta:active,
    .main-nav .nav-link.nav-link--cta:focus {
        color: var(--white) !important;
        background-color: var(--gold-button-bg) !important;
        opacity: 1 !important;
        border-color: var(--gold) !important;
    }

    .main-nav.open .nav-link.nav-link--cta {
        opacity: 1;
        transform: translateY(0);
    }

    .mobile-nav-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.25rem;
        margin-top: 2rem;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.4s ease 0.4s, transform 0.4s ease 0.4s;
    }

    .main-nav.open .mobile-nav-footer {
        opacity: 1;
        transform: translateY(0);
    }

    .mobile-nav-phone {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        color: var(--glass-text);
        border: 1.5px solid var(--gold-border-strong);
        border-radius: 999px;
        padding: 0.5rem 1.25rem;
    }

    .mobile-nav-social {
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
    }

    .mobile-nav-social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1.5px solid var(--glass-border);
        color: var(--glass-text-muted);
        transition: background-color var(--transition), border-color var(--transition);
    }

    .mobile-nav-social a:hover {
        background-color: var(--glass-bg-hover);
        border-color: var(--glass-border-hover);
    }
}

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

    .nav-link {
        transition: none;
    }

    .main-nav {
        transition: none;
    }

    .main-nav .nav-link {
        opacity: 0.7;
        transform: none;
        transition: none;
    }

    .main-nav.open .nav-link {
        transition-delay: 0s;
    }

    .main-nav .nav-link.nav-link--cta {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .mobile-nav-footer {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .menu-toggle span {
        transition: none;
    }

    .skip-link {
        transition: none;
    }
}

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

/* ============ FOOTER ============ */

.site-footer {
    background: var(--teal-dark);
    color: rgba(255, 255, 255, 0.75);
    padding: 4rem 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 0.8fr 1fr;
    gap: 2rem;
}

.footer-col--brand p {
    margin-top: 0.85rem;
    font-size: 0.88rem;
    line-height: 1.6;
    max-width: 32ch;
}

.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.footer-social a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--white-8);
    border: 1px solid var(--white-10);
    color: rgba(255, 255, 255, 0.7);
    transition: var(--transition);
}

.footer-social a:hover {
    background: var(--teal-light);
    border-color: var(--teal-light);
    color: var(--white);
    transform: translateY(-2px);
}

.footer-col h4 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.footer-col a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    padding: 0.3rem 0;
    transition: var(--transition);
}

.footer-col a:hover {
    color: var(--white);
    transform: translateX(4px);
}

.footer-info-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
    padding: 0.3rem 0;
}

.footer-bottom {
    border-top: 1px solid var(--white-8);
    margin-top: 2.5rem;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.82rem;
}

.footer-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
    font-size: 0.8rem;
}

.footer-legal a {
    color: var(--cream-60, rgba(242, 233, 221, 0.6));
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--gold);
}

.footer-legal__sep {
    color: var(--cream-60, rgba(242, 233, 221, 0.3));
}

.footer-licenses {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    opacity: 0.6;
}

.footer-designer {
    margin-top: 0.4rem;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    opacity: 0.5;
}

.footer-designer a {
    color: var(--gold);
    text-decoration: none;
}

.footer-designer a:hover {
    text-decoration: underline;
}

.brand--footer .brand-logo {
    height: 52px;
    width: auto;
}

@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .footer-col--brand {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .footer-col--brand p {
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-col a {
        justify-content: center;
    }

    .footer-col a:hover {
        transform: none;
    }

    .footer-info-line {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .footer-social a {
        transition: none;
    }

    .footer-social a:hover {
        transform: none;
    }

    .footer-col a {
        transition: none;
    }

    .footer-col a:hover {
        transform: none;
    }
}

/* ============ END FOOTER ============ */

/* ============ WHATSAPP FLOAT ============ */

.whatsapp-float {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 90;
    width: 60px;
    height: 60px;
    background: var(--teal);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px var(--teal-shadow);
    transition: var(--transition);
    animation: whatsappPulse 2.5s ease-in-out infinite;
}

.whatsapp-float--green {
    background: #25D366;
    box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
    animation-name: whatsappPulseGreen;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 28px var(--teal-shadow-hover);
}

.whatsapp-float--green:hover {
    box-shadow: 0 8px 28px rgba(37, 211, 102, .5);
}

@keyframes whatsappPulse {

    0%,
    100% {
        box-shadow: 0 6px 20px var(--teal-shadow);
    }

    50% {
        box-shadow: 0 6px 20px var(--teal-shadow), 0 0 0 12px var(--teal-shadow-pulse);
    }
}

@keyframes whatsappPulseGreen {

    0%,
    100% {
        box-shadow: 0 6px 20px rgba(37, 211, 102, .35);
    }

    50% {
        box-shadow: 0 6px 20px rgba(37, 211, 102, .35), 0 0 0 12px rgba(37, 211, 102, .12);
    }
}

@media (max-width: 480px) {
    .whatsapp-float {
        bottom: 1rem;
        right: 1rem;
        width: 52px;
        height: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .whatsapp-float {
        animation: none;
    }
}

/* ============ END WHATSAPP FLOAT ============ */

/* ============ SECTION: Hero ============ */
/* Cinematic scroll reel — sticky stage, scrubbed video, one scene per service.
   Desktop: .hero is (scenes + 1) viewports tall, .hero__stage sticks.
   Mobile / reduced-motion: no pin, everything stacks and stays readable. */

.hero {
    position: relative;
    background: var(--ink);
    /* The generic `section { padding: 5.5rem 0 }` rule would inset the sticky
       stage by 88px top and bottom — an ink band under the reel and a dead
       strip behind the fixed header. The hero is full-bleed. */
    padding: 0;
    /* Scroll budget: 1 viewport for the intro frame, then --hero-scrub
       viewports per service so each clip has room to actually play out.
       At 1 viewport per clip a single wheel gesture skips most of the shot —
       Kairos gives each scene 4. Lower this to shorten the hero. */
    /* --hero-tail is extra pinned scroll after the last clip finishes, so the
       final frame is actually on screen for a beat before the stage unpins
       and the next section takes over. */
    height: calc((1 + var(--hero-scenes, 5) * var(--hero-scrub, 2.5) + var(--hero-tail, 0.6)) * 100vh);
    height: calc((1 + var(--hero-scenes, 5) * var(--hero-scrub, 2.5) + var(--hero-tail, 0.6)) * 100svh);
}

.hero__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* ── Background media ─────────────────────────────────────── */
.hero__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    /* Poster is the floor of the stack: whatever the decoders are doing, the
       hero always shows a real image instead of an empty canvas. */
    background: var(--color-ink, #0C1F24) center / cover no-repeat;
}

/* One clip per frame, stacked and crossfaded on frame change.
   .hero__canvas is the WebCodecs paint target; .hero__video is the fallback —
   whichever path is unused gets removed from the DOM by JS. */
.hero__canvas,
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    /* JS drives a slow dolly on top of this */
    transform: scale(1.08);
    will-change: transform, opacity;
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__canvas.is-active.has-paint,
.hero__video.is-active {
    opacity: 1;
}

.hero__vignette {
    position: absolute;
    inset: 0;
    background:
        /* Scrim only where the copy sits — the clips are the bright part of the
           page and shouldn't be muted across the whole frame. */
        linear-gradient(100deg, rgba(12, 31, 36, 0.9) 0%, rgba(12, 31, 36, 0.55) 34%, rgba(12, 31, 36, 0.08) 72%, transparent 100%),
        linear-gradient(to top, rgba(12, 31, 36, 0.45) 0%, transparent 30%),
        rgba(11, 35, 41, calc(var(--hero-overlay, 0.45) * 0.45));
}

.hero__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* ── Frame container ──────────────────────────────────────── */
.hero__frames {
    position: relative;
    z-index: 2;
    width: min(1240px, calc(100% - clamp(1.5rem, 4vw, 2.5rem)));
    margin-inline: auto;
    padding-top: clamp(5.5rem, 10vh, 7rem);
    padding-bottom: clamp(3.5rem, 8vh, 5.5rem);
}

.hero__frame {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.7s;
    pointer-events: none;
}

.hero__frames {
    display: grid;
    align-items: center;
}

.hero__frame.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s, 0s, 0s;
    pointer-events: auto;
}

/* Frame leaving upwards reads as film advancing, not as a fade loop */
.hero__frame.is-past {
    transform: translateY(-28px);
}

/* ── Frame 0: intro + full service grid ───────────────────── */
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--glass-text-muted);
    margin-bottom: 1.25rem;
}

.hero__eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0 rgba(200, 150, 46, 0.55);
    animation: heroPulse 2.6s ease-out infinite;
}

@keyframes heroPulse {
    70%  { box-shadow: 0 0 0 10px rgba(200, 150, 46, 0); }
    100% { box-shadow: 0 0 0 0 rgba(200, 150, 46, 0); }
}

.hero__headline {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 6vw, 4.75rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: var(--paper);
    margin-bottom: 1.1rem;
    max-width: 16ch;
}

.hero__headline em {
    font-style: italic;
    color: var(--gold);
}

.hero__lead {
    max-width: 46ch;
    color: var(--glass-text-muted);
    font-size: clamp(1rem, 1.4vw, 1.15rem);
    margin-bottom: 2.25rem;
}

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

.hero__grid-item {
    /* staggered entrance, driven by --i from the template */
    animation: heroCardIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(0.28s + var(--i, 0) * 0.09s);
}

@keyframes heroCardIn {
    from { opacity: 0; transform: translateY(26px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}

.hero__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
    padding: 1.25rem 1.15rem 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--paper);
    text-decoration: none;
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition), background var(--transition);
}

.hero__card::before {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero__card:hover,
.hero__card:focus-visible {
    transform: translateY(-6px);
    background: var(--glass-bg-hover);
    border-color: var(--gold-border-strong);
    color: var(--paper);
}

.hero__card:hover::before,
.hero__card:focus-visible::before {
    transform: scaleX(1);
}

.hero__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(200, 150, 46, 0.14);
    color: var(--gold);
    margin-bottom: 0.15rem;
}

.hero__card-icon svg {
    width: 20px;
    height: 20px;
}

.hero__card-label {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
}

.hero__card-desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--glass-text-muted);
}

.hero__card-arrow {
    position: absolute;
    top: 1.1rem;
    right: 1rem;
    color: var(--glass-text-muted);
    opacity: 0;
    transform: translate(-4px, 4px);
    transition: opacity var(--transition), transform var(--transition);
}

.hero__card-arrow svg {
    width: 16px;
    height: 16px;
}

.hero__card:hover .hero__card-arrow,
.hero__card:focus-visible .hero__card-arrow {
    opacity: 1;
    transform: none;
}

.hero__book {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.95rem 1.75rem;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--transition), background var(--transition);
}

.hero__book:hover {
    background: var(--gold-hover);
    color: var(--ink);
    transform: translateY(-2px);
}

.hero__book svg {
    width: 18px;
    height: 18px;
}

/* ── Scene frames ─────────────────────────────────────────── */
.hero__scene {
    max-width: 40rem;
}

.hero__scene-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.hero__scene-index {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1px rgba(200, 150, 46, 0.6);
}

.hero__scene-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--gold-border-strong);
    background: rgba(200, 150, 46, 0.12);
    color: var(--gold);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.hero__scene-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--paper);
    margin-bottom: 1rem;
}

.hero__scene-desc {
    color: var(--glass-text-muted);
    font-size: clamp(1rem, 1.4vw, 1.1875rem);
    max-width: 44ch;
    margin-bottom: 2rem;
}

.hero__scene-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.6rem;
    border-radius: 999px;
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--transition), background var(--transition);
}

.hero__scene-cta:hover {
    background: var(--gold-hover);
    color: var(--ink);
    transform: translateY(-2px);
}

.hero__scene-cta-arrow {
    display: inline-flex;
    transition: transform var(--transition);
}

.hero__scene-cta-arrow svg {
    width: 18px;
    height: 18px;
}

.hero__scene-cta:hover .hero__scene-cta-arrow {
    transform: translate(3px, -3px);
}

/* ── Rail (scene dots) ────────────────────────────────────── */
/* Frosted panel — gold-on-water had almost no contrast on the bright clips */
.hero__rail {
    position: absolute;
    right: clamp(1rem, 3vw, 2.5rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    align-items: flex-end;
    padding: 1rem 1.1rem;
    border-radius: var(--radius-sm);
    /* Same glass recipe as .hero__card — a darker fill here read as a
       different material sitting next to them. */
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hero__rail-dot {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--glass-text-muted);
}

.hero__rail-dot::after {
    content: "";
    width: 26px;
    height: 2px;
    border-radius: 2px;
    background: var(--white-25);
    transition: width var(--transition), background var(--transition);
}

.hero__rail-dot.is-active::after {
    width: 46px;
    background: var(--gold);
}

/* Labels stay visible — the panel now gives them something to sit on, and the
   rail doubles as a scene index rather than a row of anonymous ticks. */
.hero__rail-label {
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    /* Lighter panel means the labels carry the contrast themselves */
    color: var(--glass-text);
    opacity: 0.85;
    text-shadow: 0 1px 3px rgba(12, 31, 36, 0.5);
    transition: opacity var(--transition), color var(--transition);
    white-space: nowrap;
}

.hero__rail-dot:hover .hero__rail-label,
.hero__rail-dot:focus-visible .hero__rail-label,
.hero__rail-dot.is-active .hero__rail-label {
    opacity: 1;
}

/* Active state reads through weight and the gold tick, not gold text — gold on
   bright turquoise was the lowest-contrast text on the page. */
.hero__rail-dot.is-active .hero__rail-label {
    color: var(--paper);
    font-weight: 700;
}

/* Hidden on the intro frame, which already shows all services as cards */
.hero--intro .hero__rail {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-50%) translateX(12px);
    pointer-events: none;
}

.hero__rail {
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.5s;
}

/* ── Progress + scroll hint ───────────────────────────────── */
.hero__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--white-8);
    z-index: 3;
}

.hero__progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--gold), #e8c675);
}

.hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 2.25rem;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    color: var(--glass-text-muted);
    transition: opacity var(--transition);
}

.hero__scroll--hidden {
    opacity: 0;
    pointer-events: none;
}

.hero__scroll-text {
    font-size: 0.6875rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.hero__scroll-line {
    position: relative;
    width: 1px;
    height: 42px;
    background: var(--white-25);
    overflow: hidden;
}

.hero__scroll-dot {
    position: absolute;
    top: 0;
    left: -1px;
    width: 3px;
    height: 12px;
    border-radius: 2px;
    background: var(--gold);
    animation: heroScrollDot 2s ease-in-out infinite;
}

@keyframes heroScrollDot {
    0%   { transform: translateY(-14px); opacity: 0; }
    35%  { opacity: 1; }
    100% { transform: translateY(42px); opacity: 0; }
}

/* Very short pinned viewports — trade the scroll hint for the CTA */
@media (min-width: 901px) and (max-height: 660px) {
    .hero__scroll {
        display: none;
    }

    .hero__frames {
        padding-bottom: 2.5rem;
    }
}

/* Reserve room for the rail so copy never runs under it */
@media (min-width: 901px) {
    .hero__frames {
        padding-right: 9rem;
    }
}

/* Short or narrow pinned viewports — the intro frame must stay inside the
   fold, so the cards drop their description and everything tightens up. */
@media (min-width: 901px) and (max-height: 820px),
       (min-width: 901px) and (max-width: 1200px) {
    .hero__headline {
        font-size: clamp(2rem, 4vw, 3rem);
        margin-bottom: 0.75rem;
    }

    .hero__lead {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .hero__grid {
        grid-template-columns: repeat(var(--hero-scenes, 5), minmax(0, 1fr));
        gap: 0.6rem;
        margin-bottom: 1.5rem;
    }

    .hero__card {
        padding: 0.9rem 0.8rem 1rem;
    }

    .hero__card-desc {
        display: none;
    }

    .hero__card-icon {
        width: 34px;
        height: 34px;
    }

    .hero__card-icon svg {
        width: 17px;
        height: 17px;
    }

    .hero__book {
        padding: 0.8rem 1.4rem;
    }

    .hero__scene-title {
        font-size: clamp(1.75rem, 3.6vw, 2.75rem);
    }
}

/* ── Mobile / no-pin fallback ─────────────────────────────── */
/* Also applied when JS is unavailable — .hero--static is set by JS only when
   the cinematic engine takes over, so the stacked layout is the safe default
   for small screens. */
@media (max-width: 900px) {
    .hero {
        height: auto;
    }

    .hero__stage {
        position: relative;
        height: auto;
        min-height: 100svh;
        align-items: stretch;
        /* Base rule clips here; that would make the stage the sticky video's
           scroll container and kill the sticky backdrop. */
        overflow: visible;
    }

    /* Absolute, never fixed. A fixed layer here is positioned, so it painted
       above every static section below the hero — the video showed through
       the whole page down to the footer. */
    /* No overflow:hidden here — it would become the sticky video's scroll
       container and the video would never stick. Nothing overflows on mobile
       anyway, since the dolly transform is off. */
    .hero__media {
        position: absolute;
        inset: 0;
    }

    /* Sticky keeps the "fixed backdrop" feel while staying clipped to the hero.
       Its src swaps per scene (see initHeroCinematic), so it fades on load. */
    .hero__video {
        position: sticky;
        top: 0;
        bottom: auto;
        height: 100svh;
        transform: none;
        opacity: 1;
        transition: opacity 0.45s ease;
    }

    .hero__frames {
        display: block;
        padding-top: 7rem;
        padding-bottom: 5rem;
    }

    /* The desktop size clamps to 2.4rem and `max-width: 16ch` is narrower than
       the container here, so each line broke again mid-phrase and the 1.02
       line-height made the result feel cramped. */
    .hero__headline {
        /* Floor sized so the longer line ("y Centro Multiservicios", the wider
           of the two) still fits on one line at 320px. Above ~327px the vw
           term takes over, so the floor costs larger phones nothing. */
        font-size: clamp(1.55rem, 7.6vw, 2.75rem);
        line-height: 1.14;
        max-width: none;
        text-wrap: balance;
    }

    .hero__lead {
        max-width: none;
    }

    /* Every frame is visible and stacked — nothing is hidden behind scroll */
    .hero__frame {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
    }

    /* The reel is desktop-only. On mobile the intro frame already lists every
       service, and each card links to that service's own section further down
       the page — the scene cards just repeated it over five extra screens. */
    .hero__scene {
        display: none;
    }

    .hero__rail,
    .hero__scroll {
        display: none;
    }

    .hero__progress {
        display: none;
    }

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

@media (max-width: 480px) {
    .hero__grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
    }

    .hero__card {
        padding: 1rem 0.85rem 1.15rem;
    }

    .hero__card-desc {
        display: none;
    }

    .hero__book {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero {
        height: auto;
    }

    .hero__stage {
        position: relative;
        height: auto;
        min-height: 100svh;
    }

    .hero__frames {
        display: block;
    }

    .hero__frame {
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        margin-bottom: 3rem;
    }

    /* Same reasoning as mobile: no reel, so the scene cards are just a repeat
       of the intro grid. */
    .hero__scene {
        display: none;
    }

    .hero__video,
    .hero__grid-item,
    .hero__eyebrow-dot,
    .hero__scroll-dot {
        animation: none !important;
        transform: none !important;
    }

    .hero__rail,
    .hero__scroll {
        display: none;
    }
}

/* ============ END SECTION: Hero ============ */

/* ============ Section styles added by /wp-section ============ */


/* ============ SECTION: Shared Section Header ============ */

section {
    padding: 5.5rem 0;
}

.section-header {
    margin-bottom: 2.5rem;
}

.section-header--center {
    text-align: center;
}

.section-header--center .section-title {
    margin-left: auto;
    margin-right: auto;
}

.section-eyebrow {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--gold-text);
    margin-bottom: 0.6rem;
}

.section-eyebrow--gold {
    color: var(--gold);
}

.section-title {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    max-width: 16ch;
    color: var(--ink);
}

/* ============ END SECTION: Shared Section Header ============ */

/* ============ SECTION: Travel Destinations ============ */

.travel {
    position: relative;
    z-index: 1;
    background: var(--cream-light);
    padding-top: 12rem;
}

.travel-swiper {
    padding-bottom: 3.5rem;
}

.travel-card {
    display: block;
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    height: 420px;
    transition: var(--transition);
}

.travel-card:hover {
    transform: translateY(-8px);
}

.travel-card:hover .travel-card__img {
    transform: scale(1.08);
}

.travel-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.travel-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(12, 31, 36, 0.85) 0%, rgba(12, 31, 36, 0.1) 50%, transparent 100%);
    z-index: 1;
}

.travel-card__badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    z-index: 2;
    background: rgba(12, 31, 36, 0.3);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.travel-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: 1.5rem;
}

.travel-card__cat {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--gold);
    margin-bottom: 0.4rem;
}

.travel-card__title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.35rem;
}

.travel-card__price {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
}

/* Swiper nav */
.travel-swiper .swiper-button-prev,
.travel-swiper .swiper-button-next {
    width: 48px;
    height: 48px;
    top: 35%;
    background: var(--white);
    border-radius: 50%;
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.travel-swiper .swiper-button-prev:hover,
.travel-swiper .swiper-button-next:hover {
    background: var(--gold);
    box-shadow: 0 8px 24px var(--gold-glow);
}

.travel-swiper .swiper-button-prev::after,
.travel-swiper .swiper-button-next::after {
    font-size: 16px;
    font-weight: 900;
    color: var(--ink);
    transition: var(--transition);
}

.travel-swiper .swiper-button-prev:hover::after,
.travel-swiper .swiper-button-next:hover::after {
    color: var(--white);
}

.travel-swiper .swiper-pagination {
    position: relative;
    bottom: auto;
    margin-top: 2rem;
}

.travel-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: var(--cream-dark);
    opacity: 1;
}

.travel-pagination .swiper-pagination-bullet-active {
    background: var(--gold);
    width: 28px;
    border-radius: 999px;
}

/* ── Travel Responsive ── */

@media (max-width: 768px) {
    section {
        padding: 4rem 0;
    }

    .travel {
        padding-top: 5rem;
    }

    .travel-swiper .swiper-button-prev,
    .travel-swiper .swiper-button-next {
        width: 44px;
        height: 44px;
    }

    .travel-swiper .swiper-button-prev::after,
    .travel-swiper .swiper-button-next::after {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .travel-card {
        height: 340px;
    }

    .travel-swiper .swiper-button-prev,
    .travel-swiper .swiper-button-next {
        width: 44px;
        height: 44px;
    }

    .travel-swiper .swiper-button-prev::after,
    .travel-swiper .swiper-button-next::after {
        font-size: 12px;
    }

    .section-title {
        max-width: none;
        font-size: clamp(1.6rem, 6vw, 2.4rem);
    }
}

@media (hover: none) {
    .travel-card:hover {
        transform: none;
    }

    .travel-card:hover .travel-card__img {
        transform: none;
    }

    .travel-card:active {
        transform: scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {

    .travel-card,
    .travel-card__img,
    .travel-swiper .swiper-button-prev,
    .travel-swiper .swiper-button-next,
    .travel-swiper .swiper-button-prev::after,
    .travel-swiper .swiper-button-next::after {
        transition: none;
    }

    .travel-card:hover {
        transform: none;
    }

    .travel-card:hover .travel-card__img {
        transform: none;
    }
}

/* ============ END SECTION: Travel Destinations ============ */

/* ============ SECTION: Cuba Services ============ */

.cuba {
    background: var(--cream);
}

.cuba-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cuba-panel {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--divider);
    transition: var(--transition);
    display: flex;
    flex-direction: column;
}

.cuba-panel:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-mid);
    border-color: var(--gold-border-hover);
}

.cuba-panel__img-wrap {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.cuba-panel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.cuba-panel:hover .cuba-panel__img {
    transform: scale(1.06);
}

.cuba-panel__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 30%,
            rgba(12, 31, 36, 0.15) 70%,
            rgba(12, 31, 36, 0.4) 100%);
    pointer-events: none;
}

.cuba-panel__body {
    padding: 1.75rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.cuba-panel__icon {
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-soft);
    border-radius: var(--radius-sm);
    color: var(--gold-text);
    margin-bottom: 1rem;
    margin-top: -2.75rem;
    position: relative;
    z-index: 2;
    border: 3px solid var(--white);
    box-shadow: 0 4px 12px rgba(12, 31, 36, 0.1);
}

.cuba-panel__body h3 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.5vw, 1.8rem);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.6rem;
}

.cuba-panel__body p {
    font-size: 0.92rem;
    color: var(--ink-light);
    line-height: 1.65;
    margin-bottom: 1.5rem;
    flex: 1;
}

.cuba-panel__body .btn {
    align-self: flex-start;
}

.cuba-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: auto;
}

.cuba-panel__actions .btn {
    align-self: stretch;
    min-height: 44px;
    padding-inline: 1.25rem;
}

.cuba-panel__actions .btn--ghost {
    background: transparent;
    border: 1px solid rgba(12, 31, 36, 0.18);
    color: var(--ink);
}

.cuba-panel__actions .btn--ghost:hover {
    background: var(--cream);
    border-color: var(--gold);
    color: var(--teal);
}

@media (max-width: 560px) {
    .cuba-panel__actions { flex-direction: column; align-items: stretch; }
    .cuba-panel__actions .btn { justify-content: center; }
}

/* ── Cuba Responsive: 1024px ── */

@media (max-width: 1024px) {
    .cuba-duo {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ── Cuba Responsive: 480px ── */

@media (max-width: 480px) {
    .cuba-duo {
        grid-template-columns: 1fr;
    }

    .cuba-panel__img-wrap {
        height: 180px;
    }
}

/* ── Cuba Touch Devices ── */

@media (hover: none) {
    .cuba-panel:hover {
        transform: none;
        box-shadow: var(--shadow-soft);
    }

    .cuba-panel:hover .cuba-panel__img {
        transform: none;
    }

    .cuba-panel:active {
        transform: scale(0.99);
    }
}

/* ── Cuba Reduced Motion ── */

@media (prefers-reduced-motion: reduce) {

    .cuba-panel,
    .cuba-panel__img {
        transition: none;
    }

    .cuba-panel:hover {
        transform: none;
    }

    .cuba-panel:hover .cuba-panel__img {
        transform: none;
    }
}

/* ============ END SECTION: Cuba Services ============ */

/* ============ SECTION: Services ============ */

.services {
    background: var(--paper);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.service-card {
    position: relative;
    background: var(--white);
    border-radius: 1rem;
    padding: 2rem 1.75rem 1.75rem;
    border: 1px solid var(--divider);
    box-shadow: 0 2px 8px rgba(12, 31, 36, 0.04);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), var(--teal));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(12, 31, 36, 0.12),
        0 8px 16px rgba(12, 31, 36, 0.06);
    border-color: var(--gold-border-hover);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card__number {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--cream-dark);
    line-height: 1;
    transition: color 0.4s ease, transform 0.4s ease;
    user-select: none;
}

.service-card:hover .service-card__number {
    color: var(--gold-soft);
    transform: scale(1.1);
}

.service-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-soft);
    border-radius: 0.75rem;
    color: var(--gold-text);
    margin-bottom: 1.25rem;
    transition: background 0.4s ease, color 0.4s ease,
        transform 0.4s ease, box-shadow 0.4s ease;
}

.service-card:hover .service-card__icon {
    background: var(--gold);
    color: var(--white);
    transform: scale(1.08) rotate(-3deg);
    box-shadow: 0 8px 20px var(--gold-glow);
}

.service-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
    transition: color 0.3s ease;
}

.service-card:hover h3 {
    color: var(--teal);
}

.service-card p {
    color: var(--ink-light);
    font-size: 0.88rem;
    line-height: 1.65;
    flex: 1;
}

.service-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--gold-text);
    margin-top: 1.25rem;
    min-height: 44px;
    transition: color 0.3s ease, gap 0.3s ease;
}

.service-card__link::after {
    content: '→';
    transition: transform 0.3s ease;
}

.service-card:hover .service-card__link {
    color: var(--teal);
    gap: 0.6rem;
}

.service-card:hover .service-card__link::after {
    transform: translateX(4px);
}

.service-card__disclaimer {
    display: block;
    font-size: 0.72rem;
    font-style: italic;
    color: var(--ink-light);
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* Card action row — primary (internal landing) + secondary (WhatsApp) */
.service-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    align-items: center;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(12, 31, 36, 0.08);
}

.service-card__actions .service-card__link {
    margin-top: 0;
}

/* WhatsApp pill — branded green chip with real WA glyph */
.service-card__link--whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.85rem 0.45rem 0.4rem;
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.28);
    color: #1f8a4c;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1;
    min-height: 36px;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.service-card__link--whatsapp::after { content: none; }

.service-card__wa-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #25D366;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.35);
}

.service-card__wa-icon svg { width: 13px; height: 13px; display: block; }

.service-card__link--whatsapp:hover {
    background: #25D366;
    color: #ffffff;
    border-color: #25D366;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(37, 211, 102, 0.32);
    gap: 0.45rem;
}

.service-card__link--whatsapp:hover .service-card__wa-icon {
    background: #ffffff;
    color: #25D366;
    box-shadow: none;
}

.service-card:hover .service-card__link--whatsapp::after { transform: none; }

@media (max-width: 480px) {
    .service-card__actions { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
}

/* -- Services: Tablet (max 1024px) -- */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -- Services: Mobile (max 480px) -- */
@media (max-width: 480px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* -- Services: Touch devices -- */
@media (hover: none) {
    .service-card {
        transform: none;
        box-shadow: 0 2px 8px rgba(12, 31, 36, 0.04);
        border-color: var(--divider);
    }

    .service-card::before {
        transform: scaleX(1);
    }

    .service-card__icon {
        background: var(--gold-soft);
        color: var(--gold-text);
        transform: none;
        box-shadow: none;
    }

    .service-card__link {
        color: var(--gold-text);
    }
}

/* -- Services: Reduced motion -- */
@media (prefers-reduced-motion: reduce) {

    .service-card,
    .service-card::before,
    .service-card__number,
    .service-card__icon,
    .service-card h3,
    .service-card__link,
    .service-card__link::after {
        transition: none;
    }

    .service-card:hover {
        transform: none;
    }

    .service-card:hover .service-card__icon {
        transform: none;
    }

    .service-card:hover .service-card__number {
        transform: none;
    }

    .service-card:hover .service-card__link::after {
        transform: none;
    }
}

/* ============ END SECTION: Services ============ */

/* ============ SECTION: Why Us ============ */

.why-us {
    position: relative;
    background: var(--teal);
    color: var(--paper);
    overflow: hidden;
}

.why-us__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 10% 80%, rgba(200, 150, 46, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 40%);
    pointer-events: none;
}

.why-us__inner {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

.why-us__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 2.5rem;
}

.why-us__cta {
    margin-top: 2.5rem;
}

.why-us__features {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.feature-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    border-bottom: 1px solid var(--white-8);
    transition: background 0.4s ease, transform 0.4s ease;
    border-radius: 0.75rem;
    cursor: default;
}

.feature-row:last-child {
    border-bottom: none;
}

.feature-row:hover {
    background: var(--white-6);
    transform: translateX(8px);
}

.feature-row__num {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--white-10);
    min-width: 2rem;
    transition: color 0.4s ease;
}

.feature-row:hover .feature-row__num {
    color: var(--gold);
}

.feature-row__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 150, 46, 0.1);
    border: 1px solid rgba(200, 150, 46, 0.15);
    border-radius: 0.75rem;
    color: var(--gold);
    flex-shrink: 0;
    transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
}

.feature-row:hover .feature-row__icon {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
    box-shadow: 0 4px 16px rgba(200, 150, 46, 0.3);
    transform: scale(1.05);
}

.feature-row__text h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0.25rem;
    transition: color 0.3s ease;
}

.feature-row:hover .feature-row__text h3 {
    color: var(--gold);
}

.feature-row__text p {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.5;
    transition: color 0.3s ease;
}

.feature-row:hover .feature-row__text p {
    color: rgba(255, 255, 255, 0.8);
}

/* -- Why Us: Tablet (max 1024px) -- */
@media (max-width: 1024px) {
    .why-us__inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
}

/* -- Why Us: Mobile (max 480px) -- */
@media (max-width: 480px) {
    .feature-row {
        flex-wrap: wrap;
        gap: 0.75rem;
        padding: 1.25rem 1rem;
    }

    .feature-row__num {
        display: none;
    }

    .why-us__title {
        font-size: clamp(1.6rem, 6vw, 2.4rem);
    }
}

/* -- Why Us: Touch devices -- */
@media (hover: none) {
    .feature-row:hover {
        transform: none;
        background: transparent;
    }
}

/* -- Why Us: Reduced motion -- */
@media (prefers-reduced-motion: reduce) {

    .feature-row,
    .feature-row__num,
    .feature-row__icon,
    .feature-row__text h3,
    .feature-row__text p {
        transition: none;
    }

    .feature-row:hover {
        transform: none;
    }

    .feature-row:hover .feature-row__icon {
        transform: none;
    }
}

/* ============ END SECTION: Why Us ============ */

/* ============ SECTION: Client Reviews ============ */

.reviews {
    background: var(--cream-light);
    overflow: hidden;
}

.reviews__subtitle {
    font-size: 1rem;
    color: var(--ink-light);
    margin-top: 0.5rem;
    font-weight: 500;
}

.reviews__star {
    width: 16px;
    height: 16px;
    color: var(--cream-strong);
    fill: var(--cream-strong);
}

.reviews__star--filled {
    color: var(--gold);
    fill: var(--gold);
}

.reviews-swiper {
    padding-bottom: 3.5rem !important;
}

.review-card {
    position: relative;
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: var(--radius);
    padding: 2.25rem 2rem 1.75rem;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-soft);
}

.review-card:hover {
    transform: translateY(-6px);
    box-shadow:
        0 20px 50px rgba(12, 31, 36, 0.1),
        0 8px 20px rgba(12, 31, 36, 0.06);
    border-color: var(--gold-border-hover);
}

.review-card__quote {
    position: absolute;
    top: 0.4rem;
    right: 1.5rem;
    font-family: var(--font-display);
    font-size: 5.5rem;
    font-weight: 800;
    color: var(--gold);
    opacity: 0.08;
    line-height: 1;
    pointer-events: none;
}

.review-card__stars {
    display: flex;
    gap: 0.15rem;
    margin-bottom: 1.1rem;
    position: relative;
    z-index: 1;
}

.review-card__text {
    font-size: 0.95rem;
    color: var(--ink-light);
    line-height: 1.75;
    flex: 1;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    font-style: italic;
}

.review-card__author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: relative;
    z-index: 1;
    padding-top: 1.25rem;
    border-top: 1px solid var(--divider);
}

.review-card__avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--teal);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.review-card__name {
    display: block;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
}

.review-card__service {
    display: block;
    font-size: 0.72rem;
    color: var(--gold);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 0.15rem;
}

/* Reviews pagination */
.reviews-pagination .swiper-pagination-bullet {
    background: var(--cream-strong);
    opacity: 1;
    width: 10px;
    height: 10px;
    transition: width 0.3s ease, background 0.3s ease;
}

.reviews-pagination .swiper-pagination-bullet-active {
    background: var(--gold);
    width: 28px;
    border-radius: 5px;
}

@media (max-width: 480px) {
    .review-card {
        padding: 1.75rem 1.25rem 1.5rem;
    }

    .review-card__text {
        font-size: 0.88rem;
        line-height: 1.65;
    }
}

@media (hover: none) {
    .review-card:hover {
        transform: none;
        box-shadow: var(--shadow-soft);
    }
}

@media (prefers-reduced-motion: reduce) {
    .review-card {
        transition: none;
    }
}

/* ============ END SECTION: Client Reviews ============ */

/* ============ SECTION: CTA Contact ============ */

.cta-section {
    background: var(--teal);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 10% 90%, rgba(200, 150, 46, 0.1) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 10%, rgba(255, 255, 255, 0.04) 0%, transparent 40%);
    pointer-events: none;
}

.cta-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.5rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

.cta-info__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.cta-info__desc {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.65;
    margin-bottom: 2.5rem;
    max-width: 40ch;
}

.cta-contact-methods {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cta-method {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--white-6);
    border: 1px solid var(--white-10);
    border-radius: var(--radius-sm);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.cta-method:hover {
    background: var(--white-12);
    border-color: var(--gold-border-strong);
    transform: translateX(4px);
}

.cta-method__icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(200, 150, 46, 0.15);
    border-radius: 50%;
    color: var(--gold);
    flex-shrink: 0;
}

.cta-method__icon svg {
    width: 20px;
    height: 20px;
}

.cta-method__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--teal-muted);
}

.cta-method__value {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--white);
    margin-top: 0.1rem;
}

/* ── CTA Form ── */

.cta-form {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.25rem 2rem;
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.2),
        0 8px 20px rgba(0, 0, 0, 0.1);
}

.cta-form__title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 1.5rem;
}

.cta-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.cta-form__field {
    margin-bottom: 1rem;
}

.cta-form__field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light);
    margin-bottom: 0.4rem;
}

.cta-form__field input,
.cta-form__field select,
.cta-form__field textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(12, 31, 36, 0.12);
    border-radius: var(--radius-xs);
    background: var(--cream-light);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.cta-form__field input:focus,
.cta-form__field select:focus,
.cta-form__field textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
    background: var(--white);
}

.cta-form__field input::placeholder,
.cta-form__field textarea::placeholder {
    color: var(--ink-light);
}

.cta-form__field textarea {
    resize: vertical;
    min-height: 100px;
}

.cta-form__field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230C1F24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.cta-form__submit {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
}

/* ── Form Validation Errors ── */

.cta-form__field.has-error input,
.cta-form__field.has-error select,
.cta-form__field.has-error textarea {
    border-color: var(--error);
    background: var(--error-bg);
}

.cta-form__field.has-error input:focus,
.cta-form__field.has-error select:focus,
.cta-form__field.has-error textarea:focus {
    border-color: var(--error);
    box-shadow: 0 0 0 3px var(--error-soft);
}

.cta-form__error {
    display: none;
    font-size: 0.75rem;
    color: var(--error);
    margin-top: 0.3rem;
    font-weight: 600;
}

.cta-form__field.has-error .cta-form__error {
    display: block;
}

.cta-form__submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ── CF7 Integration Styles ── */

/* ── CF7 form inside .cta-form — match demo styles ── */
.cta-form .wpcf7 {
    width: 100%;
}

.cta-form .wpcf7-form p {
    margin: 0;
}

.cta-form .wpcf7-form br {
    display: none;
}

/* Row layout (Name + Phone side by side) */
.cta-form .contact-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* Field group spacing */
.cta-form .contact-form__group {
    margin-bottom: 1rem;
}

.cta-form .contact-form__group--submit {
    margin-bottom: 0;
}

/* Labels — uppercase, small, weighted */
.cta-form .contact-form__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light);
    margin-bottom: 0.4rem;
}

/* Required asterisk */
.cta-form .contact-form__label .required {
    color: var(--gold);
    margin-left: 0.15em;
}

/* CF7 control wrapper — remove extra spacing between label and field */
.cta-form .wpcf7-form-control-wrap {
    display: block;
    margin: 0;
    padding: 0;
}

/* All form inputs */
.cta-form .contact-form__input,
.cta-form .contact-form__select,
.cta-form .contact-form__textarea,
.cta-form .wpcf7-form-control-wrap input,
.cta-form .wpcf7-form-control-wrap select,
.cta-form .wpcf7-form-control-wrap textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(12, 31, 36, 0.12);
    border-radius: var(--radius-xs);
    background: var(--cream-light);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Focus state */
.cta-form .contact-form__input:focus,
.cta-form .contact-form__select:focus,
.cta-form .contact-form__textarea:focus,
.cta-form .wpcf7-form-control-wrap input:focus,
.cta-form .wpcf7-form-control-wrap select:focus,
.cta-form .wpcf7-form-control-wrap textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
    background: var(--white);
}

/* Placeholder */
.cta-form .contact-form__input::placeholder,
.cta-form .contact-form__textarea::placeholder,
.cta-form .wpcf7-form-control-wrap input::placeholder,
.cta-form .wpcf7-form-control-wrap textarea::placeholder {
    color: var(--ink-light);
}

/* Textarea */
.cta-form .contact-form__textarea,
.cta-form .wpcf7-form-control-wrap textarea {
    resize: vertical;
    min-height: 100px;
}

/* Select with custom arrow */
.cta-form .contact-form__select,
.cta-form .wpcf7-form-control-wrap select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230C1F24' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

/* Submit button */
.cta-form .contact-form__submit,
.cta-form .wpcf7 input[type="submit"] {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    background: var(--gold-button-bg);
    color: var(--white);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    box-shadow: 0 8px 24px var(--gold-glow);
    transition: var(--transition);
    margin-top: 0.5rem;
}

.cta-form .contact-form__submit:hover,
.cta-form .wpcf7 input[type="submit"]:hover {
    background: var(--gold-hover);
    box-shadow: 0 12px 32px var(--gold-glow);
    transform: translateY(-2px);
}

/* ── Inline field validation ── */
.cta-form .wpcf7-not-valid-tip {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--error);
    margin-top: 0.45rem;
    padding: 0.25rem 0;
    letter-spacing: 0.01em;
    animation: cf7-tip-enter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.cta-form .wpcf7-not-valid-tip::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.cta-form .wpcf7-not-valid {
    border-color: var(--error) !important;
    background: var(--error-bg) !important;
    box-shadow: 0 0 0 3px var(--error-soft) !important;
    animation: cf7-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ── Response messages (base) ──
   CF7 6.x uses data-status on the <form> + class on <form>:
     .sent, .failed, .spam, .invalid
   The .wpcf7-response-output div just holds the text.
   We target: form.status .wpcf7-response-output
── */
.cta-form .wpcf7-response-output {
    position: relative;
    margin: 1.25rem 0 0;
    padding: 0.9rem 1.1rem 0.9rem 1.1rem;
    border-radius: var(--radius-xs);
    border: none !important;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 12px rgba(12, 31, 36, 0.06);
    /* Hidden by default until form has a status */
    display: none;
}


.cta-form .wpcf7-response-output::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
}

/* Show response when form has a status class */
.cta-form .sent .wpcf7-response-output,
.cta-form .failed .wpcf7-response-output,
.cta-form .spam .wpcf7-response-output,
.cta-form .invalid .wpcf7-response-output,
.cta-form .unaccepted .wpcf7-response-output,
.cta-form .wpcf7-response-output[style*="display"] {
    display: block;
    animation: cf7-msg-enter 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ── Success (form.sent) ── */
.cta-form .sent .wpcf7-response-output {
    color: #1a5c34;
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.08), rgba(39, 174, 96, 0.03));
}

.cta-form .sent .wpcf7-response-output::after {
    background: #27ae60;
}

/* ── Validation errors (form.invalid) ── */
.cta-form .invalid .wpcf7-response-output,
.cta-form .unaccepted .wpcf7-response-output {
    color: #8a4600;
    background: linear-gradient(135deg, rgba(200, 150, 46, 0.1), rgba(200, 150, 46, 0.04));
}

.cta-form .invalid .wpcf7-response-output::after,
.cta-form .unaccepted .wpcf7-response-output::after {
    background: var(--gold);
}

/* ── Mail send error (form.failed) ── */
.cta-form .failed .wpcf7-response-output {
    color: #7a1b1b;
    background: linear-gradient(135deg, rgba(192, 57, 43, 0.08), rgba(192, 57, 43, 0.03));
}

.cta-form .failed .wpcf7-response-output::after {
    background: var(--error);
}

/* ── Spam blocked (form.spam) ── */
.cta-form .spam .wpcf7-response-output {
    color: var(--ink);
    background: linear-gradient(135deg, rgba(12, 31, 36, 0.07), rgba(12, 31, 36, 0.02));
}

.cta-form .spam .wpcf7-response-output::after {
    background: var(--teal);
}

/* ── CF7 message animations ── */
@keyframes cf7-msg-enter {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cf7-tip-enter {
    0% {
        opacity: 0;
        transform: translateY(-4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cf7-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-4px);
    }

    40% {
        transform: translateX(4px);
    }

    60% {
        transform: translateX(-3px);
    }

    80% {
        transform: translateX(2px);
    }
}

/* ── Google Map (desktop only) ── */

.cta-map {
    margin-top: 1.5rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--white-10);
    opacity: 0.85;
    transition: opacity 0.3s ease;
}

.cta-map:hover {
    opacity: 1;
}

.cta-map iframe {
    display: block;
    border-radius: var(--radius-sm);
}

/* ── CTA Contact Responsive: 768px ── */

@media (max-width: 768px) {
    .cta-split {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .cta-form__row,
    .cta-form .contact-form__row {
        grid-template-columns: 1fr;
    }

    .cta-map {
        display: none;
    }
}

/* ── CTA Contact Responsive: 480px ── */

@media (max-width: 480px) {
    .cta-method {
        padding: 0.85rem 1rem;
    }

    .cta-info__title {
        font-size: clamp(1.6rem, 6vw, 2.4rem);
    }
}

/* ── CTA Contact Touch Devices ── */

@media (hover: none) {
    .cta-method:hover {
        transform: none;
    }
}

/* ── CTA Contact Reduced Motion ── */

@media (prefers-reduced-motion: reduce) {

    .cta-method,
    .cta-form__field input,
    .cta-form__field select,
    .cta-form__field textarea {
        transition: none;
    }
}

/* ============ END SECTION: CTA Contact ============ */

/* ============ SECTION: Blog ============ */

.blog {
    background: var(--cream-light);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.blog-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--divider);
    box-shadow: var(--shadow-soft);
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-mid);
}

.blog-card__img-wrap {
    position: relative;
    overflow: hidden;
    height: 200px;
}

.blog-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-card__img {
    transform: scale(1.06);
}

.blog-card__cat {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    background: rgba(12, 31, 36, 0.3);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    color: var(--white);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.blog-card__body {
    padding: 1.35rem;
}

.blog-card__body time {
    font-size: 0.78rem;
    color: var(--ink-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.blog-card__body h3 {
    font-size: 1.2rem;
    margin: 0.5rem 0 0.4rem;
    line-height: 1.3;
}

.blog-card__body p {
    font-size: 0.88rem;
    color: var(--ink-light);
    line-height: 1.5;
}

.blog-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%;
}

.blog-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--gold);
    margin-top: 0.75rem;
    transition: gap 0.3s ease;
}

.blog-card__cta::after {
    content: '\2192';
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card__cta {
    gap: 0.5rem;
}

.blog-card:hover .blog-card__cta::after {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .blog-grid {
        grid-template-columns: 1fr;
    }
}

@media (hover: none) {
    .blog-card:hover {
        transform: none;
        box-shadow: var(--shadow-soft);
    }

    .blog-card:hover .blog-card__img {
        transform: none;
    }

    .blog-card:active {
        transform: scale(0.98);
    }
}

@media (prefers-reduced-motion: reduce) {

    .blog-card,
    .blog-card__img,
    .blog-card__cta,
    .blog-card__cta::after {
        transition: none;
    }

    .blog-card:hover {
        transform: none;
    }

    .blog-card:hover .blog-card__img {
        transform: none;
    }

    .blog-card:hover .blog-card__cta::after {
        transform: none;
    }
}

/* ============ END SECTION: Blog ============ */

/* ============ BREADCRUMBS ============ */

.breadcrumbs {
    font-size: 0.875rem;
    padding: 1rem 0;
    color: var(--ink);
    line-height: 1.5;
}

.breadcrumbs a {
    color: var(--teal);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.breadcrumbs a:hover,
.breadcrumbs a:focus-visible {
    border-bottom-color: var(--teal);
    text-decoration: none;
}

.breadcrumbs .separator {
    margin: 0 0.6rem;
    color: var(--ink);
    opacity: 0.35;
    font-weight: 400;
}

.breadcrumbs .last,
.breadcrumbs > span:last-child {
    color: var(--ink);
    opacity: 0.7;
}

/* Breadcrumbs on dark backgrounds */
.blog-archive-header .breadcrumbs,
.blog-hero+.blog-content-wrap .breadcrumbs {
    color: rgba(255, 255, 255, 0.7);
}

.blog-archive-header .breadcrumbs a {
    color: var(--gold);
}

/* ============ BLOG PAGES ============ */

/* --- Blog Archive Header --- */
.blog-archive-header {
    background: var(--teal);
    padding: 7rem 0 3rem;
    text-align: center;
}

.blog-archive-header .section-eyebrow--gold {
    color: var(--gold);
}

.blog-archive-header__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3rem);
    color: var(--white);
    margin-top: 0.5rem;
}

.blog-archive-header__subtitle {
    color: var(--glass-text-muted);
    font-size: 1.05rem;
    margin-top: 0.75rem;
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* --- Blog Archive Content --- */
.blog-archive-content {
    background: var(--cream-light);
    padding: 3.5rem 0 4rem;
}

.blog-archive-content .blog-grid {
    margin-bottom: 2.5rem;
}

/* --- Blog Pagination --- */
.blog-pagination {
    margin-top: 2rem;
}

.blog-pagination .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-xs);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--teal);
    background: var(--white);
    border: 1px solid var(--divider);
    transition: var(--transition);
    text-decoration: none;
    gap: 0.35rem;
}

.blog-pagination .page-numbers:hover {
    background: var(--teal);
    color: var(--white);
    border-color: var(--teal);
}

.blog-pagination .page-numbers.current {
    background: var(--gold);
    color: var(--white);
    border-color: var(--gold);
}

.blog-pagination .page-numbers.dots {
    border: none;
    background: none;
    cursor: default;
}

.blog-pagination .page-numbers.dots:hover {
    background: none;
    color: var(--teal);
}

.blog-pagination .prev,
.blog-pagination .next {
    gap: 0.4rem;
}

/* --- Content None (no results) --- */
.content-none {
    text-align: center;
    padding: 4rem 1rem;
}

.content-none__icon {
    color: var(--gold);
    margin-bottom: 1.5rem;
}

.content-none__icon svg,
.content-none__icon [data-lucide] {
    width: 56px;
    height: 56px;
    margin: 0 auto;
}

.content-none__title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    color: var(--ink);
    margin-bottom: 0.75rem;
}

.content-none__message {
    color: var(--ink-light);
    font-size: 1.05rem;
    margin-bottom: 2rem;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* --- Single Post Hero --- */
.blog-hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    background-color: var(--teal);
    overflow: hidden;
}

.blog-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

.blog-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(11, 35, 41, 0.85) 0%,
            rgba(11, 35, 41, 0.4) 50%,
            rgba(11, 35, 41, 0.25) 100%);
    z-index: 1;
}

.blog-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: 8rem;
    padding-bottom: 3rem;
}

.blog-hero__cat {
    display: inline-block;
    background: var(--gold);
    color: var(--white);
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: var(--transition);
    margin-bottom: 1rem;
}

.blog-hero__cat:hover {
    background: var(--gold-hover);
}

.blog-hero__date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--glass-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.blog-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: var(--white);
    line-height: 1.2;
    max-width: 720px;
}

/* --- Single Post Content --- */
.blog-content-wrap {
    background: var(--cream-light);
    padding: 3.5rem 0 2rem;
}

.blog-content {
    max-width: 720px;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--ink);
}

.blog-content>*+* {
    margin-top: 1.5rem;
}

.blog-content h2 {
    font-family: var(--font-display);
    font-size: 1.6rem;
    color: var(--teal);
    margin-top: 2.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.blog-content h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    color: var(--teal);
    margin-top: 2rem;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.blog-content h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.blog-content p {
    color: var(--ink-light);
    line-height: 1.8;
}

.blog-content a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: var(--transition);
}

.blog-content a:hover {
    color: var(--gold-hover);
}

.blog-content ul,
.blog-content ol {
    padding-left: 1.5rem;
    color: var(--ink-light);
    list-style: initial;
}

.blog-content ol {
    list-style: decimal;
}

.blog-content li+li {
    margin-top: 0.5rem;
}

.blog-content blockquote {
    border-left: 4px solid var(--gold);
    padding: 1.25rem 1.5rem;
    background: var(--white);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    font-style: italic;
    color: var(--teal);
    margin: 2rem 0;
}

.blog-content blockquote p {
    color: var(--teal);
}

.blog-content img {
    border-radius: var(--radius-sm);
    height: auto;
}

.blog-content figure {
    margin: 2rem 0;
}

.blog-content figure img {
    width: 100%;
}

.blog-content figcaption {
    font-size: 0.82rem;
    color: var(--ink-light);
    text-align: center;
    margin-top: 0.5rem;
}

.blog-content .wp-block-image {
    margin: 2rem 0;
}

.blog-content .wp-block-image img {
    border-radius: var(--radius-sm);
}

/* --- Tags --- */
.blog-tags {
    max-width: 720px;
    margin: 2rem auto 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.blog-tags__tag {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
    transition: var(--transition);
}

.blog-tags__tag:hover {
    background: var(--teal);
    color: var(--white);
    border-color: var(--teal);
}

/* --- Share --- */
.blog-share {
    max-width: 720px;
    margin: 2rem auto 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--divider);
}

.blog-share__label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--ink);
}

.blog-share__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: var(--white);
    border: 1px solid var(--divider);
    color: var(--teal);
    transition: var(--transition);
}

.blog-share__link:hover {
    background: var(--teal);
    color: var(--white);
    border-color: var(--teal);
}

.blog-share__link svg,
.blog-share__link [data-lucide] {
    width: 16px;
    height: 16px;
}

/* --- Post Navigation --- */
.blog-nav {
    background: var(--white);
    border-top: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
}

.blog-nav__inner {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

.blog-nav__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem 0;
    text-decoration: none;
    color: var(--ink);
    transition: var(--transition);
    flex: 1;
    min-width: 0;
}

.blog-nav__link:hover {
    color: var(--gold);
}

.blog-nav__link--prev {
    text-align: left;
}

.blog-nav__link--next {
    text-align: right;
    justify-content: flex-end;
}

.blog-nav__link--back {
    flex: 0 0 auto;
    justify-content: center;
    padding: 1.5rem 1.5rem;
    color: var(--gold);
    font-weight: 700;
    font-size: 0.88rem;
    border-left: 1px solid var(--divider);
    border-right: 1px solid var(--divider);
}

.blog-nav__link--back:hover {
    background: var(--cream-light);
}

.blog-nav__label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold);
    margin-bottom: 0.25rem;
}

.blog-nav__title {
    display: block;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}

/* --- Related Posts --- */
.blog-related {
    background: var(--cream-light);
    padding: 4rem 0;
}

.blog-related .section-title {
    color: var(--ink);
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .blog-hero {
        min-height: 340px;
    }

    .blog-hero__inner {
        padding-top: 6rem;
        padding-bottom: 2rem;
    }

    .blog-hero__title {
        font-size: 1.6rem;
    }

    .blog-content {
        font-size: 1rem;
    }

    .blog-nav__inner {
        flex-direction: column;
    }

    .blog-nav__link--prev,
    .blog-nav__link--next {
        text-align: left;
        justify-content: flex-start;
    }

    .blog-nav__link--back {
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--divider);
        border-bottom: 1px solid var(--divider);
    }

    .blog-nav__title {
        max-width: 100%;
    }

    .blog-archive-header {
        padding: 6rem 0 2.5rem;
    }
}

@media (max-width: 480px) {
    .blog-hero {
        min-height: 280px;
    }

    .blog-hero__inner {
        padding-top: 5rem;
        padding-bottom: 1.5rem;
    }

    .blog-content blockquote {
        padding: 1rem;
    }

    .blog-share {
        flex-wrap: wrap;
    }

    .blog-pagination .page-numbers {
        min-width: 2.2rem;
        height: 2.2rem;
        font-size: 0.82rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .blog-hero__cat,
    .blog-tags__tag,
    .blog-share__link,
    .blog-nav__link {
        transition: none;
    }
}

/* ============================================================
   404 Error Page
   ============================================================ */

.error-404 {
    background: var(--cream-light);
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}

.error-404__inner {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

.error-404__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--gold-soft);
    color: var(--gold);
    margin-bottom: 1rem;
}

.error-404__icon [data-lucide] {
    width: 32px;
    height: 32px;
}

.error-404__number {
    font-family: var(--font-display);
    font-size: clamp(6rem, 15vw, 10rem);
    font-weight: 900;
    line-height: 1;
    color: var(--gold);
    margin-bottom: 0.25rem;
    letter-spacing: -0.03em;
}

.error-404__title {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 1.8rem);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.75rem;
}

.error-404__description {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink-light);
    margin-bottom: 2rem;
}

.error-404__search {
    margin-bottom: 1.5rem;
}

.error-404__search .search-form {
    display: flex;
    gap: 0.5rem;
    max-width: 420px;
    margin: 0 auto;
}

.error-404__search .search-field {
    flex: 1;
    padding: 0.65rem 1rem;
    border: 1px solid var(--divider);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--white);
    outline: none;
    transition: var(--transition);
}

.error-404__search .search-field:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--gold-soft);
}

.error-404__search .search-submit {
    padding: 0.65rem 1.25rem;
    background: var(--teal);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.error-404__search .search-submit:hover {
    background: var(--teal-light);
}

.error-404__actions {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.error-404__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

@media (max-width: 480px) {
    .error-404 {
        min-height: calc(100vh - 64px);
        padding: 3rem 0;
    }

    .error-404__search .search-form {
        flex-direction: column;
    }

    .error-404__search .search-submit {
        width: 100%;
    }
}

/* ── Blog CTA Banner ── */

.blog-cta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--cream);
    border: 1px solid var(--divider);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-sm);
    padding: 1.5rem 1.75rem;
    margin-top: 2.5rem;
    margin-bottom: 2rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.blog-cta:hover {
    border-color: var(--gold-border-hover);
    box-shadow: 0 4px 20px rgba(12, 31, 36, 0.06);
}

.blog-cta__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gold-soft);
    border-radius: 50%;
    color: var(--gold-text);
    flex-shrink: 0;
}

.blog-cta__icon svg {
    width: 22px;
    height: 22px;
}

.blog-cta__text {
    flex: 1;
    min-width: 0;
}

.blog-cta__text h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 0.15rem;
    line-height: 1.3;
}

.blog-cta__text p {
    font-size: 0.85rem;
    color: var(--ink-light);
    line-height: 1.45;
}

.blog-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.4rem;
    background: var(--teal);
    color: var(--white);
    border-radius: 999px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.85rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px var(--teal-shadow);
}

.blog-cta__btn:hover {
    background: var(--teal-light);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--teal-shadow-hover);
    color: var(--white);
}

.blog-cta__btn svg {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
}

.blog-cta__btn:hover svg {
    transform: translateX(3px);
}

@media (max-width: 768px) {
    .blog-cta {
        flex-wrap: wrap;
        gap: 1rem;
        padding: 1.25rem 1.25rem;
    }

    .blog-cta__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .blog-cta__icon {
        display: none;
    }
}

/* ============ END BLOG PAGES ============ */

/* ============ LEGAL ============ */

.legal {
    padding-top: 8rem;
    padding-bottom: 4rem;
    background-color: var(--paper);
}

.admin-bar .legal {
    padding-top: 10rem;
}

/* ── Header ── */

.legal__header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--divider);
}

.legal__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--teal);
    line-height: 1.2;
    margin-bottom: 0.5rem;
}

.legal__updated {
    font-size: 0.875rem;
    color: var(--ink-light);
    font-style: italic;
}

/* ── Wrapper (sidebar + content) ── */

.legal__wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* ── Table of Contents ── */

.legal__toc {
    background-color: var(--cream-light);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    border: 1px solid var(--divider);
}

.legal__toc-title {
    display: none;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--teal);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--divider);
}

.legal__toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--teal);
    padding: 0;
    padding-bottom: 0.5rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--divider);
    min-height: 44px;
}

.legal__toc-toggle svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.legal__toc-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.legal__toc-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    list-style: none;
}

.legal__toc-list[hidden] {
    display: none;
}

.legal__toc-link {
    display: block;
    padding: 0.5rem 0.75rem;
    font-size: 0.9rem;
    color: var(--ink-light);
    border-radius: var(--radius-xs);
    transition: color var(--transition), background-color var(--transition);
    min-height: 44px;
    display: flex;
    align-items: center;
}

.legal__toc-link:hover {
    color: var(--teal);
    background-color: var(--cream);
}

.legal__toc-link--active {
    color: var(--gold);
    font-weight: 600;
    background-color: var(--gold-soft);
}

/* ── Content ── */

.legal__content {
    max-width: 800px;
    line-height: 1.75;
    color: var(--ink);
}

.legal__content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
    color: var(--teal);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--divider);
    scroll-margin-top: 100px;
}

.legal__content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.legal__content h3 {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--teal-light);
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.legal__content p {
    margin-bottom: 1rem;
    color: var(--ink);
    font-size: 1rem;
}

.legal__content a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition);
}

.legal__content a:hover {
    color: var(--gold-hover);
}

.legal__content ul,
.legal__content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.legal__content ul {
    list-style: disc;
}

.legal__content ol {
    list-style: decimal;
}

.legal__content li {
    margin-bottom: 0.4rem;
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.7;
}

.legal__content li::marker {
    color: var(--gold);
}

.legal__content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background-color: var(--cream-light);
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    color: var(--ink-light);
    font-style: italic;
}

.legal__content blockquote p:last-child {
    margin-bottom: 0;
}

.legal__content table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
    overflow-x: auto;
    display: block;
}

.legal__content thead {
    background-color: var(--teal);
    color: var(--white);
}

.legal__content th,
.legal__content td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid var(--divider);
}

.legal__content th {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.legal__content tbody tr:nth-child(even) {
    background-color: var(--cream-light);
}

.legal__content tbody tr:hover {
    background-color: var(--cream);
}

.legal__content strong {
    font-weight: 600;
    color: var(--ink);
}

.legal__content hr {
    border: none;
    border-top: 1px solid var(--divider);
    margin: 2rem 0;
}

/* ── Responsive: Tablet (768px+) ── */

@media (min-width: 768px) {
    .legal {
        padding: 4rem 0 5rem;
    }

    .legal__header {
        margin-bottom: 3rem;
    }

    .legal__toc-toggle {
        display: none;
    }

    .legal__toc-title {
        display: block;
    }

    .legal__toc-list[hidden] {
        display: flex;
    }
}

/* ── Responsive: Desktop (1024px+) ── */

@media (min-width: 1024px) {
    .legal__wrapper {
        flex-direction: row;
        gap: 3rem;
        align-items: flex-start;
    }

    .legal__toc {
        flex: 0 0 260px;
        position: sticky;
        top: 120px;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
    }

    .legal__content {
        flex: 1;
        min-width: 0;
    }
}

/* ── Responsive: Large desktop (1280px+) ── */

@media (min-width: 1280px) {
    .legal__toc {
        flex: 0 0 280px;
    }

    .legal__wrapper {
        gap: 3.5rem;
    }
}

/* ── Reduced Motion ── */

@media (prefers-reduced-motion: reduce) {
    .legal__toc-toggle svg {
        transition: none;
    }

    .legal__toc-link {
        transition: none;
    }
}

/* ============ END LEGAL ============ */

/* ============ GENERIC PAGE ============ */

.page-generic {
    padding-top: 8rem;
    padding-bottom: 4rem;
    background-color: var(--paper);
}

.admin-bar .page-generic {
    padding-top: 10rem;
}

/* ── Header ── */

.page-generic__header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--divider);
}

.page-generic__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--teal);
    line-height: 1.2;
}

/* ── Content ── */

.page-generic__content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
    color: var(--ink);
}

.page-generic__content h2 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.5vw, 1.625rem);
    font-weight: 700;
    color: var(--teal);
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--divider);
}

.page-generic__content h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.page-generic__content h3 {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 600;
    color: var(--teal-light);
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.page-generic__content h4 {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink);
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.page-generic__content p {
    margin-bottom: 1rem;
    color: var(--ink);
    font-size: 1rem;
}

.page-generic__content a {
    color: var(--gold);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--transition);
}

.page-generic__content a:hover {
    color: var(--gold-hover);
}

.page-generic__content ul,
.page-generic__content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.page-generic__content ul {
    list-style: disc;
}

.page-generic__content ol {
    list-style: decimal;
}

.page-generic__content li {
    margin-bottom: 0.4rem;
    font-size: 1rem;
    color: var(--ink);
    line-height: 1.7;
}

.page-generic__content li::marker {
    color: var(--gold);
}

.page-generic__content blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background-color: var(--cream-light);
    border-left: 4px solid var(--gold);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    color: var(--ink-light);
    font-style: italic;
}

.page-generic__content blockquote p:last-child {
    margin-bottom: 0;
}

.page-generic__content img {
    border-radius: var(--radius-sm);
    margin: 1.5rem 0;
    height: auto;
}

.page-generic__content table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: 0.9375rem;
    overflow-x: auto;
    display: block;
}

.page-generic__content thead {
    background-color: var(--teal);
    color: var(--white);
}

.page-generic__content th,
.page-generic__content td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: 1px solid var(--divider);
}

.page-generic__content th {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.page-generic__content tbody tr:nth-child(even) {
    background-color: var(--cream-light);
}

.page-generic__content tbody tr:hover {
    background-color: var(--cream);
}

.page-generic__content strong {
    font-weight: 600;
    color: var(--ink);
}

.page-generic__content hr {
    border: none;
    border-top: 1px solid var(--divider);
    margin: 2rem 0;
}

/* ── Responsive: Tablet (768px+) ── */

@media (min-width: 768px) {
    .page-generic {
        padding-top: 9rem;
        padding-bottom: 5rem;
    }

    .page-generic__header {
        margin-bottom: 3rem;
    }
}

/* ── Responsive: Desktop (1024px+) ── */

@media (min-width: 1024px) {
    .page-generic {
        padding-top: 10rem;
        padding-bottom: 6rem;
    }
}

/* ============ END GENERIC PAGE ============ */

/* ============ BLOG SINGLE: LAYOUT, TOC, TABLES, FAQ ============ */

/* --- Two-column layout: TOC sidebar + content --- */
.blog-layout {
    display: block;
}

@media (min-width: 1024px) {
    .blog-layout {
        display: grid;
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 3rem;
        align-items: flex-start;
    }
}

/* --- Table of contents --- */
.blog-toc {
    background: var(--cream);
    border: 1px solid rgba(18, 52, 59, 0.08);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin: 1rem 0 2rem;
    font-size: 0.9rem;
}

@media (min-width: 1024px) {
    .blog-toc {
        position: sticky;
        top: 6rem;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
        margin: 0;
    }
}

.blog-toc__title {
    display: none;
    font-family: var(--font-fraunces, "Fraunces", serif);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--teal);
    margin: 0 0 0.75rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (min-width: 1024px) {
    .blog-toc__title {
        display: block;
    }
}

.blog-toc__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--teal);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}

@media (min-width: 1024px) {
    .blog-toc__toggle {
        display: none;
    }
}

.blog-toc__toggle svg {
    transition: transform 0.2s ease;
}

.blog-toc__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.blog-toc__list {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    counter-reset: toc-counter;
}

@media (min-width: 1024px) {
    .blog-toc__list {
        margin-top: 0;
    }
}

.blog-toc__item {
    counter-increment: toc-counter;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.blog-toc__item--sub {
    margin-left: 1rem;
    font-size: 0.85rem;
}

.blog-toc__link {
    color: var(--ink);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 0.6rem;
    margin-left: -0.6rem;
    display: inline-block;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-toc__link:hover,
.blog-toc__link:focus-visible {
    color: var(--teal);
    border-left-color: var(--gold);
    text-decoration: none;
}

/* Smooth scroll for in-page anchors */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* --- Tables in blog content --- */
.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.75rem 0;
    font-size: 0.95rem;
    background: #fff;
    border: 1px solid rgba(18, 52, 59, 0.12);
    border-radius: 8px;
    overflow: hidden;
    table-layout: auto;
}

/* Allow horizontal scroll on small screens without breaking layout */
.blog-content > table,
.blog-content > * > table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .blog-content > table,
    .blog-content > * > table {
        display: table;
        white-space: normal;
    }
}

.blog-content thead {
    background: var(--teal);
    color: #fff;
}

.blog-content thead th {
    text-align: left;
    padding: 0.85rem 1rem;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.blog-content tbody tr {
    border-top: 1px solid rgba(18, 52, 59, 0.08);
}

.blog-content tbody tr:nth-child(even) {
    background: rgba(242, 233, 221, 0.4);
}

.blog-content tbody tr:hover {
    background: rgba(200, 150, 46, 0.08);
}

.blog-content tbody td {
    padding: 0.85rem 1rem;
    vertical-align: top;
    line-height: 1.5;
}

/* Numeric / price columns: don't wrap mid-value */
.blog-content tbody td:nth-child(2),
.blog-content tbody td:nth-child(3) {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .blog-content tbody td:nth-child(2),
    .blog-content tbody td:nth-child(3) {
        white-space: normal;
    }
}

.blog-content tbody strong {
    color: var(--teal);
    font-weight: 700;
}

/* --- FAQ accordion --- */
.blog-faq {
    margin: 1.5rem 0 2rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.blog-faq__item {
    background: #fff;
    border: 1px solid rgba(18, 52, 59, 0.12);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-faq__item[open] {
    border-color: var(--teal);
    box-shadow: 0 2px 12px rgba(18, 52, 59, 0.08);
}

.blog-faq__q {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.25rem;
    padding-right: 3rem;
    font-family: var(--font-fraunces, "Fraunces", serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--teal);
    line-height: 1.4;
    position: relative;
    user-select: none;
}

.blog-faq__q::-webkit-details-marker {
    display: none;
}

.blog-faq__q::after {
    content: "";
    position: absolute;
    right: 1.25rem;
    top: 50%;
    width: 12px;
    height: 12px;
    border-right: 2px solid var(--teal);
    border-bottom: 2px solid var(--teal);
    transform: translateY(-75%) rotate(45deg);
    transition: transform 0.2s ease;
}

.blog-faq__item[open] .blog-faq__q::after {
    transform: translateY(-25%) rotate(-135deg);
}

.blog-faq__q:hover,
.blog-faq__q:focus-visible {
    background: rgba(242, 233, 221, 0.5);
    outline: none;
}

.blog-faq__a {
    padding: 0 1.25rem 1.25rem;
    color: var(--ink);
    line-height: 1.65;
    border-top: 1px solid rgba(18, 52, 59, 0.08);
    margin-top: 0;
}

.blog-faq__a > div > p:first-child {
    margin-top: 1rem;
}

.blog-faq__a > div > p {
    margin: 0 0 0.75rem;
}

.blog-faq__a > div > p:last-child {
    margin-bottom: 0;
}

/* Hide gap before/after FAQ heading H2 in content */
.blog-content > h2 + .blog-faq {
    margin-top: 1rem;
}

/* ============ END BLOG SINGLE IMPROVEMENTS ============ */
/* ═══════════════════════════════════════════════════════════
 * SERVICE LANDING PAGE
 * Dedicated, SEO-optimized landing pages for individual services.
 * Sections: hero, intro, features, process, pricing, gallery,
 *           faq, testimonials, cta-band, related.
 * BEM, mobile-first. Reuses --teal/--gold/--cream/--ink palette.
 * ═══════════════════════════════════════════════════════════ */

.service-page {
    background: var(--paper);
    color: var(--ink);
}

/* ── Hero ─────────────────────────────────────────────────── */
.service-hero {
    position: relative;
    min-height: clamp(420px, 70vh, 720px);
    display: flex;
    align-items: center;
    color: var(--white);
    overflow: hidden;
    isolation: isolate;
}

.service-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.service-hero__image,
.service-hero__video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.service-hero__fallback {
    position: relative;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse at 75% 30%, rgba(246, 185, 21, 0.18), transparent 55%),
        radial-gradient(ellipse at 15% 80%, rgba(2, 48, 71, 0.6), transparent 60%),
        linear-gradient(135deg, var(--teal) 0%, var(--ink) 100%);
    overflow: hidden;
}

.service-hero__fallback::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 253, 248, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 253, 248, 0.04) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse at center, black 0%, transparent 75%);
}

.service-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(2, 48, 71, 0.45) 0%, rgba(12, 31, 36, 0.85) 100%);
}

.service-hero__inner {
    width: 100%;
    padding-block: clamp(4rem, 9vw, 7rem);
}

.service-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 960px) {
    .service-hero__grid {
        grid-template-columns: minmax(0, 1.3fr) minmax(320px, 1fr);
        gap: 4rem;
    }
}

.service-hero__content {
    max-width: 720px;
}

/* Decorative right-side trust card (shown when no hero image/video) */
.service-hero__card {
    position: relative;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(140deg, rgba(246, 185, 21, 0.45), rgba(255, 253, 248, 0.08) 55%, rgba(246, 185, 21, 0.3));
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
    isolation: isolate;
}

.service-hero__card-glow {
    position: absolute;
    inset: -40px;
    background: radial-gradient(closest-side, rgba(246, 185, 21, 0.18), transparent 70%);
    z-index: -1;
    filter: blur(20px);
    pointer-events: none;
}

.service-hero__card-inner {
    background: linear-gradient(160deg, rgba(2, 48, 71, 0.92), rgba(12, 31, 36, 0.95));
    border-radius: 21px;
    padding: 1.75rem 1.75rem 1.5rem;
    backdrop-filter: blur(10px);
}

.service-hero__card-icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--gold), #d99e1a);
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 12px 24px rgba(246, 185, 21, 0.35);
}

.service-hero__card-icon i { width: 26px; height: 26px; }

.service-hero__card-eyebrow {
    color: rgba(255, 253, 248, 0.88);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1rem;
    font-weight: 500;
}

.service-hero__card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.service-hero__card-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--white);
    font-size: 0.92rem;
}

.service-hero__card-list i {
    width: 18px;
    height: 18px;
    color: var(--gold);
    flex-shrink: 0;
}

@media (max-width: 959px) {
    .service-hero__card { display: none; }
}

.service-hero__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 1rem;
}

.service-hero__title {
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.08;
    margin: 0 0 1rem;
    color: var(--white);
    letter-spacing: -0.01em;
}

.service-hero__subtitle {
    font-size: clamp(1rem, 1.3vw, 1.18rem);
    line-height: 1.55;
    color: rgba(255, 253, 248, 0.88);
    max-width: 620px;
    margin: 0 0 2rem;
}

.service-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.service-hero__cta {
    min-height: 48px;
}

.service-hero__cta--ghost {
    background: rgba(255, 253, 248, 0.08);
    border: 1px solid rgba(255, 253, 248, 0.35);
    color: var(--white);
}

.service-hero__cta--ghost:hover {
    background: rgba(255, 253, 248, 0.16);
}

.service-hero__badges {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.service-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.75rem;
    background: rgba(255, 253, 248, 0.1);
    border: 1px solid rgba(246, 185, 21, 0.35);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--white);
    backdrop-filter: blur(6px);
}

.service-hero__badge i {
    width: 14px;
    height: 14px;
    color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
    .service-hero__video {
        display: none;
    }
}

/* ── Breadcrumbs ──────────────────────────────────────────── */
.service-breadcrumbs {
    background: var(--paper);
    padding: 1rem 0;
    font-size: 0.88rem;
    color: rgba(12, 31, 36, 0.7);
    border-bottom: 1px solid var(--divider);
}

.service-breadcrumbs a {
    color: var(--teal);
    text-decoration: none;
}

.service-breadcrumbs a:hover {
    text-decoration: underline;
}

/* ── Intro ────────────────────────────────────────────────── */
.service-intro {
    padding: clamp(3rem, 7vw, 5rem) 0;
}

.service-intro__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media (min-width: 900px) {
    .service-intro__grid {
        grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
        gap: 3rem;
    }
}

.service-intro__heading {
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin: 0 0 1.25rem;
    color: var(--ink);
}

.service-intro__prose {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(12, 31, 36, 0.85);
}

.service-intro__prose p {
    margin: 0 0 1.1rem;
}

.service-intro__prose strong {
    color: var(--teal);
}

.service-intro__prose a {
    color: var(--teal);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.service-intro__facts {
    background: var(--cream);
    border: 1px solid var(--divider);
    border-radius: 16px;
    padding: 1.75rem;
    align-self: start;
    position: sticky;
    top: 100px;
}

.service-intro__facts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.service-intro__fact {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(12, 31, 36, 0.1);
}

.service-intro__fact:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.service-intro__fact-label {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(12, 31, 36, 0.6);
    font-weight: 600;
}

.service-intro__fact-value {
    font-size: 1.05rem;
    color: var(--ink);
    font-weight: 600;
}

/* ── Features ─────────────────────────────────────────────── */
.service-features {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--cream);
}

.service-features__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

@media (min-width: 640px) {
    .service-features__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .service-features__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.service-features__card {
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: 14px;
    padding: 1.75rem;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-features__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(12, 31, 36, 0.08);
    border-color: rgba(246, 185, 21, 0.5);
}

.service-features__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(246, 185, 21, 0.15);
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.service-features__icon i {
    width: 24px;
    height: 24px;
}

.service-features__title {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
    color: var(--ink);
}

.service-features__desc {
    color: rgba(12, 31, 36, 0.75);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
}

/* ── Process ──────────────────────────────────────────────── */
.service-process {
    padding: clamp(3rem, 7vw, 5rem) 0;
}

.service-process__steps {
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .service-process__steps {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 1024px) {
    .service-process__steps {
        grid-template-columns: repeat(4, 1fr);
    }
}

.service-process__step {
    background: var(--paper);
    border: 1px solid var(--divider);
    border-radius: 14px;
    padding: 1.5rem 1.25rem 1.5rem 1.5rem;
    position: relative;
}

.service-process__step-num {
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: 2.5rem;
    color: var(--gold);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
    display: block;
}

.service-process__step-title {
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
    color: var(--ink);
}

.service-process__step-desc {
    font-size: 0.92rem;
    color: rgba(12, 31, 36, 0.72);
    margin: 0;
    line-height: 1.5;
}

/* ── Pricing ──────────────────────────────────────────────── */
.service-pricing {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--ink);
    color: var(--white);
}

.service-pricing .section-title { color: var(--white); }

.service-pricing__intro {
    max-width: 720px;
    margin: 0 auto 2rem;
    text-align: center;
    color: rgba(255, 253, 248, 0.8);
}

.service-pricing__table {
    max-width: 760px;
    margin: 0 auto;
    background: rgba(255, 253, 248, 0.04);
    border: 1px solid rgba(255, 253, 248, 0.12);
    border-radius: 14px;
    overflow: hidden;
}

.service-pricing__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1.5rem;
    align-items: center;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 253, 248, 0.08);
}

.service-pricing__row:last-child { border-bottom: 0; }

.service-pricing__label {
    display: flex;
    flex-direction: column;
}

.service-pricing__label-text {
    font-weight: 600;
    font-size: 1rem;
}

.service-pricing__note {
    font-size: 0.82rem;
    color: rgba(255, 253, 248, 0.6);
    margin-top: 0.15rem;
}

.service-pricing__price {
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: 1.35rem;
    color: var(--gold);
    font-weight: 700;
}

/* ── Gallery ──────────────────────────────────────────────── */
.service-gallery { padding: clamp(3rem, 7vw, 5rem) 0; background: var(--cream); }

.service-gallery__video {
    max-width: 920px;
    margin: 0 auto 2rem;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(12, 31, 36, 0.18);
}

.service-gallery__video iframe { width: 100%; height: 100%; border: 0; }

.service-gallery__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .service-gallery__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .service-gallery__grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}

.service-gallery__item {
    margin: 0;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.service-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.service-gallery__item:hover .service-gallery__img { transform: scale(1.04); }

/* ── FAQ ──────────────────────────────────────────────────── */
.service-faq { padding: clamp(3rem, 7vw, 5rem) 0; }

.service-faq__list {
    max-width: 820px;
    margin: 2.5rem auto 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.service-faq__item {
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.service-faq__item[open] {
    border-color: var(--gold);
    box-shadow: 0 6px 16px rgba(12, 31, 36, 0.06);
}

.service-faq__q {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.5rem;
    font-weight: 600;
    color: var(--ink);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.service-faq__q::-webkit-details-marker { display: none; }

.service-faq__q::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--gold);
    transition: transform 0.2s ease;
    line-height: 1;
}

.service-faq__item[open] .service-faq__q::after {
    content: '−';
}

.service-faq__a {
    padding: 0 1.5rem 1.25rem;
    color: rgba(12, 31, 36, 0.78);
    line-height: 1.6;
}

.service-faq__a p { margin: 0 0 0.75rem; }
.service-faq__a p:last-child { margin: 0; }

/* ── Testimonials ─────────────────────────────────────────── */
.service-testimonials { padding: clamp(3rem, 7vw, 5rem) 0; background: var(--cream); }

.service-testimonials__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .service-testimonials__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .service-testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}

.service-testimonials__card {
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: 14px;
    padding: 1.75rem;
    margin: 0;
}

.service-testimonials__rating {
    display: flex;
    gap: 0.15rem;
    color: var(--gold);
    margin-bottom: 0.75rem;
}

.service-testimonials__rating i { width: 18px; height: 18px; fill: currentColor; }

.service-testimonials__quote {
    font-size: 1rem;
    color: rgba(12, 31, 36, 0.85);
    line-height: 1.6;
    margin: 0 0 1rem;
    font-style: italic;
}

.service-testimonials__cite {
    font-size: 0.88rem;
    color: rgba(12, 31, 36, 0.7);
}

/* ── CTA Band ─────────────────────────────────────────────── */
.service-cta-band {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: linear-gradient(135deg, var(--teal) 0%, var(--ink) 100%);
    color: var(--white);
}

.service-cta-band__inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}

.service-cta-band__heading {
    font-family: var(--font-display, 'Fraunces', serif);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin: 0 0 0.75rem;
    color: var(--white);
}

.service-cta-band__text {
    color: rgba(255, 253, 248, 0.85);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0 0 2rem;
}

.service-cta-band__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.service-cta-band__legal {
    margin: 0 0 0.85rem;
    font-size: 0.88rem;
}

.service-cta-band__legal a {
    color: rgba(255, 253, 248, 0.7);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.service-cta-band__legal a:hover,
.service-cta-band__legal a:focus-visible {
    color: rgba(255, 253, 248, 1);
}

.service-cta-band__address {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: rgba(255, 253, 248, 0.75);
    font-size: 0.92rem;
}

/* ── Related ──────────────────────────────────────────────── */
.service-related { padding: clamp(3rem, 7vw, 5rem) 0; }

.service-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .service-related__grid { grid-template-columns: repeat(3, 1fr); }
}

.service-related__card {
    background: var(--white);
    border: 1px solid var(--divider);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-related__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(12, 31, 36, 0.1);
    border-color: var(--gold);
}

.service-related__media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--cream);
}

.service-related__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.service-related__card:hover .service-related__img { transform: scale(1.05); }

.service-related__body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.service-related__title {
    font-size: 1.15rem;
    margin: 0;
    color: var(--ink);
}

.service-related__desc {
    color: rgba(12, 31, 36, 0.72);
    font-size: 0.92rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.service-related__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--teal);
    font-weight: 600;
    font-size: 0.92rem;
    margin-top: auto;
}

/* ── Service card on homepage — internal link style ───────── */
.service-card--linked {
    cursor: pointer;
}

.service-card__title-link {
    color: inherit;
    text-decoration: none;
}

.service-card__title-link:hover {
    color: var(--teal);
}

/* ═══════════════════════════════════════════════════════════
 * BLOG — inline CTA banners + PDF download box
 * Used inside .blog-content for in-article conversion elements.
 * ═══════════════════════════════════════════════════════════ */

.blog-content .blog-inline-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    background: linear-gradient(135deg, var(--teal) 0%, var(--ink) 100%);
    color: var(--white);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    margin: 2.5rem 0;
    box-shadow: 0 14px 32px rgba(12, 31, 36, 0.15);
}

.blog-content .blog-inline-cta__body {
    flex: 1 1 280px;
}

.blog-content .blog-inline-cta__title {
    margin: 0 0 0.35rem;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 1.25rem;
    line-height: 1.25;
}

.blog-content .blog-inline-cta__text {
    margin: 0;
    color: rgba(255, 253, 248, 0.85);
    font-size: 0.95rem;
    font-style: normal;
    line-height: 1.5;
}

.blog-content .blog-inline-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gold);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-content .blog-inline-cta__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(246, 185, 21, 0.4);
}

.blog-content .blog-inline-cta__btn i {
    width: 18px;
    height: 18px;
}

/* PDF / document download box */
.blog-content .blog-download {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    background: var(--cream);
    border: 1px solid var(--divider);
    border-left: 4px solid var(--gold);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 2rem 0;
}

.blog-content .blog-download__icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 12px;
    background: rgba(246, 185, 21, 0.18);
    color: var(--teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.blog-content .blog-download__icon i { width: 24px; height: 24px; }

.blog-content .blog-download__body {
    flex: 1 1 240px;
}

.blog-content .blog-download__title {
    display: block;
    font-weight: 700;
    color: var(--ink);
    font-style: normal;
    margin-bottom: 0.15rem;
}

.blog-content .blog-download__meta {
    display: block;
    font-size: 0.82rem;
    color: var(--ink-light);
    font-style: normal;
}

.blog-content .blog-download__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--teal);
    color: var(--white);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.2s ease;
}

.blog-content .blog-download__btn:hover {
    background: var(--gold);
    color: var(--ink);
    transform: translateY(-2px);
}

.blog-content .blog-download__btn i { width: 18px; height: 18px; }

@media (max-width: 560px) {
    .blog-content .blog-inline-cta,
    .blog-content .blog-download { flex-direction: column; align-items: flex-start; }
    .blog-content .blog-inline-cta__btn,
    .blog-content .blog-download__btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
 * SERVICE LANDING — Featured Destination + Booking Options
 * ═══════════════════════════════════════════════════════════ */

/* ── Featured Destination ───────────────────────────────── */
.service-featured {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--paper);
}

.service-featured__card {
    display: grid;
    grid-template-columns: 1fr;
    background: var(--white);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 24px 56px -16px rgba(12, 31, 36, 0.18);
    border: 1px solid var(--divider);
}

@media (min-width: 900px) {
    .service-featured__card {
        grid-template-columns: 1.1fr 1fr;
        min-height: 460px;
    }
}

.service-featured__media {
    position: relative;
    overflow: hidden;
    background: var(--cream);
    aspect-ratio: 16 / 10;
}

@media (min-width: 900px) {
    .service-featured__media { aspect-ratio: auto; }
}

.service-featured__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.service-featured__card:hover .service-featured__img { transform: scale(1.04); }

.service-featured__body {
    padding: 2rem 1.75rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1rem;
}

@media (min-width: 900px) {
    .service-featured__body { padding: 2.75rem 2.5rem; }
}

.service-featured__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(246, 185, 21, 0.14);
    color: var(--teal);
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    align-self: flex-start;
}

.service-featured__eyebrow i { width: 14px; height: 14px; color: var(--gold); }

.service-featured__title {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.15;
    color: var(--ink);
    margin: 0;
}

.service-featured__chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.service-featured__chip {
    background: var(--cream);
    color: var(--teal);
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    border: 1px solid var(--divider);
}

.service-featured__text {
    color: rgba(12, 31, 36, 0.78);
    line-height: 1.6;
    font-size: 1rem;
    margin: 0;
}

.service-featured__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.5rem;
}

.service-featured__cta-ghost {
    background: transparent;
    border: 1px solid rgba(12, 31, 36, 0.18);
    color: var(--ink);
}

.service-featured__cta-ghost:hover {
    background: var(--cream);
    border-color: var(--gold);
    color: var(--teal);
}

.service-featured__blog-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    padding: 0.85rem 1rem;
    background: var(--cream);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    border: 1px solid var(--divider);
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.service-featured__blog-link:hover {
    border-color: var(--gold);
    background: var(--white);
    transform: translateY(-2px);
}

.service-featured__blog-link > i {
    width: 22px;
    height: 22px;
    color: var(--gold);
    flex-shrink: 0;
}

.service-featured__blog-link span {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    flex: 1;
}

.service-featured__blog-link small {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-light);
    font-weight: 600;
}

.service-featured__blog-link strong {
    font-size: 0.95rem;
    color: var(--ink);
    margin-top: 0.1rem;
}

.service-featured__blog-arrow {
    width: 18px;
    height: 18px;
    color: var(--teal);
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.service-featured__blog-link:hover .service-featured__blog-arrow { transform: translateX(4px); }

/* ── Booking Options Grid ───────────────────────────────── */
.service-booking {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: var(--cream);
}

.service-booking .section-intro {
    max-width: 640px;
    margin: 0.5rem auto 0;
    text-align: center;
    color: var(--ink-light);
    font-size: 1rem;
}

.service-booking__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

@media (min-width: 640px) {
    .service-booking__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .service-booking__grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
}

.service-booking__card {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--divider);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
}

.service-booking__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(12, 31, 36, 0.12);
    border-color: var(--gold);
}

.service-booking__cover {
    display: block;
}

.service-booking__media {
    position: relative;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: var(--cream);
}

.service-booking__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.service-booking__card:hover .service-booking__img { transform: scale(1.06); }

.service-booking__badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.service-booking__body {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.service-booking__cat {
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--gold);
}

.service-booking__title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    line-height: 1.25;
    color: var(--ink);
    margin: 0;
}

.service-booking__title a {
    color: inherit;
    text-decoration: none;
}

.service-booking__title a:hover { color: var(--teal); }

.service-booking__price {
    color: var(--ink-light);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    flex: 1;
}

.service-booking__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.75rem;
    color: var(--teal);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    align-self: flex-start;
}

.service-booking__cta i {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}

.service-booking__cta:hover { color: var(--ink); }
.service-booking__cta:hover i { transform: translate(3px, -3px); }

/* WhatsApp variant inside booking cards */
.service-booking__cta--whatsapp {
    background: rgba(37, 211, 102, 0.08);
    border: 1px solid rgba(37, 211, 102, 0.28);
    color: #1f8a4c;
    padding: 0.55rem 0.85rem 0.55rem 0.45rem;
    border-radius: 999px;
    align-self: flex-start;
    margin-top: 0.5rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.service-booking__wa-icon {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #25D366;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(37, 211, 102, 0.35);
}

.service-booking__cta--whatsapp:hover {
    background: #25D366;
    color: #ffffff;
    border-color: #25D366;
    transform: translateY(-1px);
}

.service-booking__cta--whatsapp:hover .service-booking__wa-icon {
    background: #ffffff;
    color: #25D366;
    box-shadow: none;
}