/* =============================================================
   HM Wedding & Event Planners — Main Stylesheet
   Concept: Royal Elegance × Modern Celebration
   ============================================================= */

/* ---------- Tokens ---------- */
:root {
    --navy:        #071B33;
    --navy-deep:   #04101F;
    --gold:        #C9A45C;
    --gold-soft:   #E1C98B;
    --gold-pale:   #F3E8CF;
    --ivory:       #FBF8F1;
    --warm-white:  #FFFDFC;
    --text:        #17202A;
    --text-2:      #6E6E6E;
    --border:      #E7E0D4;

    --font-head: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --container: 1280px;
    --radius: 6px;
    --radius-btn: 4px;
    --section-y: 88px;
    --header-h: 112px;
    /* Height of the gold topbar (34px bar + 1px border). The header slides up
       by this amount on scroll so only the navbar stays pinned. */
    --topbar-h: 35px;

    --shadow-soft: 0 24px 50px -30px rgba(7, 27, 51, .45);
    --ease: cubic-bezier(.22, .61, .36, 1);
}

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

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.75;
    color: var(--text);
    background: var(--warm-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Clips the small sideways offset of the scroll-reveal blocks, so content
   can never be dragged left/right on touch devices. Applied to <main> (not
   <html>) so normal page scrolling is unaffected. */
main { overflow-x: clip; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.14;
    color: var(--navy);
    margin: 0 0 .5em;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold); color: var(--navy-deep); }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.img-missing { display: none !important; }

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 9999;
    background: var(--gold);
    color: var(--navy-deep);
    padding: 12px 20px;
    font-weight: 600;
}
.skip-link:focus { left: 0; }

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* ---------- Layout ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 40px;
}
.container--narrow { max-width: 940px; }

.section { padding: var(--section-y) 0; }
/* Anchored sections land with their heading just under the header —
   the section's own top padding is discounted so no empty gap is left. */
section[id] { scroll-margin-top: max(8px, calc(var(--header-h) + 18px - var(--section-y))); }
.section--white  { background: var(--warm-white); }
.section--ivory  { background: var(--ivory); }
.section--soft   { background: #F7F2E7; }
.section--navy   { background: var(--navy); color: #E7EDF5; }

.section--navy h2,
.section--navy h3,
.section--navy h4 { color: #FFFDFC; }

/* ---------- Typography helpers ---------- */
.eyebrow {
    font-family: var(--font-body);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 14px;
}
.eyebrow--light { color: var(--gold-soft); }

.section-title {
    font-size: clamp(2rem, 4vw, 3.3rem);
    letter-spacing: .01em;
    margin-bottom: .35em;
}
.section-title--light { color: #FFFDFC; }

.section-lead {
    max-width: 720px;
    margin: 0 auto;
    color: var(--text-2);
    font-size: 1.03rem;
}
.section-lead--light { color: rgba(233, 238, 245, .78); }

.section-head { margin-bottom: 58px; }
.section-head--center { text-align: center; }

.gold-divider {
    display: block;
    width: 84px;
    height: 2px;
    margin: 26px auto 30px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    position: relative;
}
.gold-divider::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--gold);
}
.gold-divider--left {
    margin: 24px 0 30px;
    background: linear-gradient(90deg, var(--gold), transparent);
}
.gold-divider--left::after { left: 4px; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 50px;
    padding: 13px 30px;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    font-family: var(--font-body);
    font-size: .93rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .35s var(--ease), color .35s var(--ease),
                border-color .35s var(--ease), transform .35s var(--ease),
                box-shadow .35s var(--ease);
}

.btn-gold {
    background: var(--gold);
    border-color: var(--gold);
    color: #1B1405;
}
.btn-gold:hover {
    background: var(--gold-soft);
    border-color: var(--gold-soft);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px -16px rgba(201, 164, 92, .9);
}

.btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .55);
    color: #FFFFFF;
}
.btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold-soft);
    transform: translateY(-2px);
}

.btn-outline-dark {
    background: transparent;
    border-color: var(--navy);
    color: var(--navy);
}
.btn-outline-dark:hover {
    background: var(--navy);
    color: var(--ivory);
    transform: translateY(-2px);
}

.btn-navy {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--ivory);
}
.btn-navy:hover {
    background: var(--navy-deep);
    border-color: var(--gold);
    color: var(--gold-soft);
    transform: translateY(-2px);
}

/* =============================================================
   01. TOP BAR
   ============================================================= */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: top .35s var(--ease);
}

/* Only the navbar is sticky. On scroll the whole header slides up by the
   topbar height, so the gold topbar scrolls away out of view while the
   navbar remains pinned to the top. `top` (not transform) is used on purpose
   so .mobile-menu keeps its own viewport-fixed positioning. */
.site-header.is-scrolled {
    top: calc(var(--topbar-h) * -1);
}

.topbar {
    position: relative;
    z-index: 4;
    /* Gold bar matched to the logo ring, so it reads differently from the navy navbar */
    background: linear-gradient(90deg, var(--gold) 0%, #D9BC7C 52%, var(--gold) 100%);
    color: rgba(4, 16, 31, .88);
    font-size: .78rem;
    border-bottom: 1px solid rgba(4, 16, 31, .16);
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 34px;
    gap: 16px;
}
.topbar-tagline { margin: 0; letter-spacing: .04em; }
.topbar-tagline-short { display: none; }

.topbar-contact { display: flex; align-items: center; gap: 12px; }
.topbar-sep { color: rgba(4, 16, 31, .32); }

.topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 600;
    letter-spacing: .04em;
    transition: color .3s var(--ease);
}
.topbar-link svg { width: 15px; height: 15px; fill: var(--navy-deep); }
.topbar-link .fa-solid,
.topbar-link .fa-brands { font-size: 15px; line-height: 1; }
/* Brand-coloured icons inside the gold bar */
.topbar-ig i { color: black; }
.topbar-link:hover { color: #04101F; }
.topbar-call-short { display: none; }

/* =============================================================
   02. NAVBAR
   ============================================================= */
.navbar {
    position: relative;
    z-index: 3;
    /* Same solid navy treatment as the sticky state, so the header looks
       identical before and after scrolling (no transparent flash). */
    background: rgba(4, 16, 31, .97);
    box-shadow: 0 18px 36px -26px rgba(0, 0, 0, .9);
    transition: background-color .4s var(--ease),
                border-color .4s var(--ease),
                box-shadow .4s var(--ease);
}
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 78px;
}

/* Sticky state: only a subtle deepening — no extra border or shadow on scroll */
.site-header.is-scrolled .navbar {
    background: rgba(4, 16, 31, .99);
}

/* Brand */
.brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
}
.brand-mark {
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--gold);
    background: rgba(7, 27, 51, .55);
    transition: width .3s var(--ease), height .3s var(--ease);
}
/* Real logo loaded -> keep the gold ring so the dark badge stays visible */
.brand-mark.has-logo {
    overflow: visible;
    border-color: var(--gold);
    background: transparent;
}
.brand-logo {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45))
            drop-shadow(0 0 6px rgba(201, 164, 92, .45));
}
.brand-fallback { line-height: 1; }
.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1.12;
    min-width: 0;
}
.brand-name {
    font-family: var(--font-head);
    font-size: 1.66rem;
    font-weight: 700;
    letter-spacing: .03em;
    line-height: 1.1;
    color: var(--gold-soft);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
    white-space: nowrap;
}
.brand-tagline {
    margin-top: 3px;
    font-family: var(--font-head);
    font-style: italic;
    font-size: .84rem;
    font-weight: 500;
    letter-spacing: .02em;
    line-height: 1.2;
    color: rgba(255, 255, 255, .78);
    white-space: nowrap;
}

/* Desktop nav */
.nav-desktop .nav-list { display: flex; align-items: center; gap: 6px; }
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 14px;
    font-size: .87rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, .9);
    transition: color .3s var(--ease);
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px;
    bottom: 8px;
    height: 1.5px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .38s var(--ease);
}
.nav-link:hover { color: var(--gold-soft); }
.nav-link:hover::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--gold-soft); }

.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-cta { min-height: 46px; padding: 11px 20px; font-size: .8rem; white-space: nowrap; }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 11px;
    background: transparent;
    border: 1px solid rgba(201, 164, 92, .55);
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--gold-soft);
    transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.hamburger.is-active {
    background: rgba(201, 164, 92, .16);
    border-color: var(--gold);
}

/* Mobile menu */
.mobile-menu {
    position: fixed;
    top: 0; right: 0;
    z-index: 2;
    width: min(86vw, 380px);
    height: 100vh;
    height: 100dvh;
    padding: 132px 30px 40px;
    background: var(--navy-deep);
    border-left: 1px solid rgba(201, 164, 92, .3);
    transform: translateX(100%);
    transition: transform .45s var(--ease);
    overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-nav-list { display: flex; flex-direction: column; }
.mobile-nav-link {
    display: flex;
    align-items: center;
    min-height: 54px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-family: var(--font-head);
    font-size: 1.4rem;
    color: #F3F6FA;
    transition: color .3s var(--ease), padding-left .3s var(--ease);
}
.mobile-nav-link:hover,
.mobile-nav-link.is-active {
    color: var(--gold-soft);
    padding-left: 8px;
}

.mobile-menu-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 30px;
}
.mobile-menu-actions .btn { width: 100%; }
.mobile-menu-contact {
    margin-top: 26px;
    font-size: .9rem;
    color: rgba(233, 238, 245, .68);
    text-align: center;
}
.mobile-menu-contact a { color: var(--gold-soft); }

.mobile-overlay {
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(4, 16, 31, .62);
    opacity: 0;
    transition: opacity .4s var(--ease);
}
.mobile-overlay.is-visible { opacity: 1; }

/* =============================================================
   03. HERO
   ============================================================= */
.hero {
    position: relative;
    height: min(97vh, 940px);
    min-height: 660px;
    background: var(--navy-deep);
    overflow: hidden;
    padding: 0;
    scroll-margin-top: 0;
}
.hero-slider { position: absolute; inset: 0; }

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s var(--ease), visibility 1s var(--ease);
}
.hero-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

.hero-media {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0B2545 0%, var(--navy-deep) 60%);
}
.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
    filter: contrast(1.05) saturate(1.05);
}
.hero-slide.is-active .hero-media img {
    animation: heroZoom 9s var(--ease) forwards;
}

/* The hero photo is deliberately NOT covered by a full-image overlay —
   only the text content sits on its own backdrop panel. */
.hero-content {
    position: relative;
    z-index: 3;
    max-width: var(--container);
    padding-top: var(--header-h);
}
.hero-panel {
    display: inline-block;
    max-width: min(900px, 100%);
    padding: 44px 52px 46px;
    /* Dark glass backdrop — the light copy reads on it no matter how bright
       the hero photo is. (A near-transparent / light panel forced dark copy,
       which vanished whenever the photo behind it was bright.) */
    
    border: 1px solid rgba(201, 164, 92, .6);
    border-radius: 22px;
    box-shadow: 0 40px 80px -46px rgba(0, 0, 0, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(4px);
}
/* Banner slider type — gold label, white heading, off-white description,
   each with a subtle dark shadow so the photo needs no darkening */
/* Gold rule + label on the dark panel */
.hero-panel .hero-kicker {
    color: #D4AF62;
    border-bottom-color: rgba(201, 164, 92, .55);
}
.hero-panel .hero-title     { color: #FFFFFF; text-shadow: 0 2px 18px rgba(4, 16, 31, .55); }
.hero-panel .hero-desc      { color: #F5F5F5; text-shadow: 0 2px 16px rgba(4, 16, 31, .55); }
/* Base .btn-outline is already white-on-dark — no navy override needed */
/* Lighter gold on hover: keeps the label above 4.5:1 on the dark panel */
.hero-panel .btn-outline:hover { color: var(--gold-pale); }
.hero-kicker {
    display: inline-block;
    margin: 0 0 18px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(201, 164, 92, .55);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #D4AF62;                       /* gold small heading */
    /* soft halo — keeps the gold label legible over bright photo patches */
    text-shadow: 0 1px 12px rgba(4, 16, 31, .85);
}
.hero-title {
    max-width: 720px;
    margin: 0 0 22px;
    font-family: var(--font-head);        /* Cormorant Garamond / Playfair family */
    font-size: clamp(2rem, 4.3vw, 3.8rem);
    font-weight: 600;
    line-height: 1.08;
    color: #FFFFFF;
    text-shadow: 0 2px 20px rgba(4, 16, 31, .6);
}
.hero-desc {
    max-width: 590px;
    margin: 0 0 34px;
    font-family: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 1.08rem;
    color: #F5F5F5;
    text-shadow: 0 2px 16px rgba(4, 16, 31, .65);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* Arrows */
.hero-arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: rgba(4, 16, 31, .42);
    border: 1px solid rgba(201, 164, 92, .5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s var(--ease), border-color .3s var(--ease);
}
.hero-arrow svg { width: 22px; height: 22px; fill: #FFFDFC; }
.hero-arrow:hover { background: var(--gold); border-color: var(--gold); }
.hero-arrow:hover svg { fill: var(--navy-deep); }
.hero-arrow--prev { left: 26px; }
.hero-arrow--next { right: 26px; }

/* Dots */
.hero-dots {
    position: absolute;
    left: 50%;
    bottom: 34px;
    z-index: 5;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.hero-dot {
    width: 34px;
    height: 4px;
    padding: 0;
    background: rgba(255, 255, 255, .34);
    border: 0;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color .35s var(--ease), width .35s var(--ease);
}
.hero-dot.is-active { width: 52px; background: var(--gold); }

/* =============================================================
   04. BRAND INTRODUCTION
   ============================================================= */
.intro-inner { max-width: 900px; text-align: center; }
.intro-text {
    font-size: 1.1rem;
    line-height: 1.9;
    color: #4A5361;
}

/* =============================================================
   05. ABOUT
   ============================================================= */
.about-grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: 72px;
    align-items: center;
}

.about-media { position: relative; }
.about-frame {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(135deg, #0B2545, var(--navy-deep));
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-soft);
}
.about-frame::after {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px solid rgba(201, 164, 92, .45);
    border-radius: 3px;
    pointer-events: none;
}
.about-frame img { width: 100%; height: 100%; object-fit: cover; }

.about-badge {
    position: absolute;
    right: -22px;
    bottom: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 20px 26px;
    background: var(--navy);
    border: 1px solid rgba(201, 164, 92, .5);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}
.about-badge-mark {
    font-family: var(--font-head);
    font-size: 2rem;
    font-weight: 700;
    color: var(--gold);
    line-height: 1;
}
.about-badge-text {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(240, 244, 250, .8);
}

.about-content p { color: #4A5361; }

.about-points {
    margin: 26px 0 34px;
    display: grid;
    gap: 12px;
}
.about-points li {
    position: relative;
    padding-left: 30px;
    color: var(--text);
    font-weight: 500;
}
.about-points li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: .72em;
    width: 8px;
    height: 8px;
    background: var(--gold);
    transform: rotate(45deg);
}

/* =============================================================
   06. VISION & MISSION
   ============================================================= */
.vm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
}
.vm-card {
    position: relative;
    padding: 52px 44px;
    /* Near-opaque light card so the copy always reads clearly over the photo */
    
    border: 1px solid rgba(201, 164, 92, .45);
    border-radius: var(--radius);
    text-align: center;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.vm-card::before {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 3px;
    background: var(--gold);
}
.vm-card:hover {
    transform: translateY(-6px);
    border-color: #D9C79A;
    box-shadow: var(--shadow-soft);
}
.vm-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 22px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 164, 92, .55);
    border-radius: 50%;
    background: #FFFDFC;
}
.vm-icon svg { width: 34px; height: 34px; fill: var(--gold); }
.vm-title { font-size: 2.1rem; margin-bottom: 14px; }
/* Darker copy so the text still reads over the translucent card */
.vm-card p { color: #3F4A58; }

/* =============================================================
   07. SERVICES
   ============================================================= */
.service-group { margin-bottom: 62px; }
.service-group:last-of-type { margin-bottom: 44px; }

.service-group-title {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 30px;
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--navy);
}
.service-group-title::before,
.service-group-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border));
}
.service-group-title::after {
    background: linear-gradient(90deg, var(--border), transparent);
}
.service-group-title span { white-space: nowrap; }

.card-grid {
    display: grid;
    gap: 26px;
}
.card-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 5 cards must sit on a single line (Wedding Essentials group) */
.card-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease);
}
.card:hover {
    transform: translateY(-6px);
    border-color: #D9C79A;
    box-shadow: var(--shadow-soft);
}

.card-media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: linear-gradient(135deg, #0B2545, var(--navy-deep));
}
.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .9s var(--ease);
}
.card:hover .card-media img { transform: scale(1.07); }

.card-body { padding: 26px 24px 30px; }
.card-title {
    font-size: 1.5rem;
    margin-bottom: 8px;
    position: relative;
    display: inline-block;
    padding-bottom: 8px;
}
.card-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 30px;
    height: 2px;
    background: var(--gold);
    transition: width .4s var(--ease);
}
.card:hover .card-title::after { width: 64px; }
.card-text {
    margin: 0;
    font-size: .95rem;
    color: var(--text-2);
    line-height: 1.7;
}

.section-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin-top: 20px;
}

/* =============================================================
   08. COMPLETE EVENT EXPERIENCE
   ============================================================= */
.experience-media {
    margin-bottom: 56px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid rgba(201, 164, 92, .35);
    background: linear-gradient(135deg, #0B2545, var(--navy-deep));
    aspect-ratio: 21 / 8;
}
.experience-media img { width: 100%; height: 100%; object-fit: cover; }

.journey {
    position: relative;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 8px;
}
.journey::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 6%;
    right: 6%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(201, 164, 92, .65) 12%, rgba(201, 164, 92, .65) 88%, transparent);
}
.journey-step {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
.journey-dot {
    position: relative;
    z-index: 2;
    width: 22px;
    height: 22px;
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    background: var(--navy);
    display: grid;
    place-items: center;
}
.journey-dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gold);
}
.journey-label {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(233, 238, 245, .88);
}

/* =============================================================
   09. WHY CHOOSE HM
   ============================================================= */
.why-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 70px;
    align-items: center;
}

.why-points {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 32px;
    margin-top: 12px;
}
.why-point {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.why-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 164, 92, .55);
    border-radius: 50%;
    background: var(--warm-white);
    transition: background-color .35s var(--ease), transform .35s var(--ease);
}
.why-icon svg { width: 20px; height: 20px; fill: var(--gold); }
.why-point:hover .why-icon { background: var(--gold-pale); transform: rotate(45deg); }

.why-point h3 {
    font-family: var(--font-body);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .01em;
    margin-bottom: 5px;
    color: var(--navy);
}
.why-point p {
    margin: 0;
    font-size: .93rem;
    color: var(--text-2);
    line-height: 1.65;
}

.why-frame {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(135deg, #0B2545, var(--navy-deep));
    aspect-ratio: 4 / 5;
    box-shadow: var(--shadow-soft);
}
.why-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(201, 164, 92, .4);
    border-radius: var(--radius);
    z-index: 2;
    pointer-events: none;
}
.why-frame img { width: 100%; height: 100%; object-fit: cover; }

/* =============================================================
   10. PROCESS
   ============================================================= */
.process {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 34px;
}
.process::before {
    content: "";
    position: absolute;
    top: 43px;
    left: 11%;
    right: 11%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
    z-index: 0;
}
.process-step {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 0 8px;
}
.process-num {
    display: grid;
    place-items: center;
    width: 86px;
    height: 86px;
    margin: 0 auto 22px;
    border: 1px solid var(--gold);
    border-radius: 50%;
    background: var(--warm-white);
    font-family: var(--font-head);
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--gold);
    transition: background-color .4s var(--ease), color .4s var(--ease), transform .4s var(--ease);
}
.process-step:hover .process-num {
    background: var(--navy);
    color: var(--gold-soft);
    transform: translateY(-4px);
}
.process-title { font-size: 1.6rem; margin-bottom: 8px; }
.process-step p {
    font-size: .95rem;
    color: var(--text-2);
    max-width: 260px;
    margin: 0 auto;
}

/* =============================================================
   11. GALLERY
   ============================================================= */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 42px;
}
.filter-btn {
    min-height: 44px;
    padding: 9px 22px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-2);
    cursor: pointer;
    transition: all .35s var(--ease);
}
.filter-btn:hover { border-color: var(--gold); color: var(--navy); }
.filter-btn.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: var(--gold-soft);
}

.gallery-grid {
    columns: 3;
    column-gap: 22px;
}
.gallery-item {
    break-inside: avoid;
    margin-bottom: 22px;
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(135deg, #0B2545, var(--navy-deep));
    position: relative;
}
.gallery-item.is-hidden { display: none; }

.gallery-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.gallery-open img {
    width: 100%;
    height: auto;
    transition: transform .8s var(--ease);
}
.gallery-open:hover img { transform: scale(1.06); }

.gallery-caption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 44px 18px 16px;
    background: linear-gradient(to top, rgba(4, 16, 31, .78), transparent);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .4s var(--ease), transform .4s var(--ease);
    text-align: left;
}
.gallery-caption span {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-soft);
}
.gallery-open:hover .gallery-caption,
.gallery-open:focus-visible .gallery-caption { opacity: 1; transform: translateY(0); }

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    background: rgba(4, 16, 31, .94);
}
.lightbox.is-open { display: flex; }
.lightbox-img {
    max-width: min(1100px, 92vw);
    max-height: 82vh;
    width: auto;
    height: auto;
    border: 1px solid rgba(201, 164, 92, .4);
    border-radius: var(--radius);
    object-fit: contain;
}
.lightbox-caption {
    position: absolute;
    bottom: 34px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gold-soft);
}
.lightbox-btn {
    position: absolute;
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: rgba(7, 27, 51, .7);
    border: 1px solid rgba(201, 164, 92, .5);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s var(--ease);
}
.lightbox-btn svg { width: 22px; height: 22px; fill: #FFFDFC; }
.lightbox-btn:hover { background: var(--gold); }
.lightbox-btn:hover svg { fill: var(--navy-deep); }
.lightbox-close { top: 26px; right: 26px; }
.lightbox-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 26px; top: 50%; transform: translateY(-50%); }

/* =============================================================
   12. REVIEWS
   ============================================================= */
/* Clips the horizontally scrolled review cards so they can never widen the page */
.reviews-slider {
    max-width: 1080px;
    margin: 0 auto;
    overflow: hidden;
    /* Dark glass backdrop — no white box. The tint sits over the photo so the
       copy stays readable while the background image still shows through.
       The card inside stays transparent so it inherits this. 
    background: rgba(4, 16, 31, .72);
    box-shadow: 0 30px 66px -46px rgba(0, 0, 0, .75);
    border: 1px solid rgba(201, 164, 92, .45);*/

    border-radius: var(--radius);

    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(3px);

}
.reviews-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    transition: transform .6s var(--ease);
}
.review-card {
    margin: 0;
    padding: 46px 52px;
    /* The dark glass backdrop comes from .reviews-slider */
    background: transparent;
    text-align: center;
}
.review-quote {
    display: block;
    font-family: var(--font-head);
    font-size: 4.6rem;
    line-height: .6;
    /* Soft gold reads clearly against the dark glass panel */
    color: var(--gold-soft);
    margin-bottom: 20px;
}
.review-text {
    font-family: var(--font-head);
    font-size: 1.5rem;
    font-style: italic;
    line-height: 1.6;
    color: var(--warm-white);
    max-width: 760px;
    margin: 0 auto 26px;
}
.review-meta { display: flex; flex-direction: column; gap: 3px; }
.review-name {
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-size: .86rem;
    color: var(--warm-white);
}
.review-event {
    font-size: .78rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 75%);
}

.reviews-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 34px;
}
/* Controls sit on the dark glass panel, so they use light outlines (not navy) */
.review-arrow {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color .3s var(--ease);
}
.review-arrow svg { width: 20px; height: 20px; fill: var(--warm-white); }
.review-arrow:hover { background: var(--gold); border-color: var(--gold); }
.review-arrow:hover svg { fill: var(--navy-deep); }

.review-dots { display: flex; gap: 9px; }
.review-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: background-color .3s var(--ease);
}
.review-dot.is-active { background: var(--gold); border-color: var(--gold); }

/* =============================================================
   13. FAQ
   ============================================================= */
.faq-list { display: grid; gap: 14px; }
.faq-item {
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.faq-item.is-open { border-color: #D9C79A; box-shadow: var(--shadow-soft); }
.faq-q { margin: 0; }

.faq-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
    min-height: 64px;
    padding: 18px 26px;
    background: transparent;
    border: 0;
    text-align: left;
    font-family: var(--font-head);
    font-size: 1.32rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
}
.faq-toggle:hover { color: #0B2545; }

.faq-icon {
    position: relative;
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border: 1px solid var(--gold);
    border-radius: 50%;
}
.faq-icon::before,
.faq-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--gold);
    transform: translate(-50%, -50%);
    transition: transform .35s var(--ease), opacity .3s var(--ease);
}
.faq-icon::before { width: 11px; height: 1.5px; }
.faq-icon::after  { width: 1.5px; height: 11px; }
.faq-item.is-open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq-a {
    padding: 0 26px 22px;
    color: var(--text-2);
    font-size: .98rem;
    line-height: 1.8;
}
.faq-a p { margin: 0; }

/* =============================================================
   14. FINAL CTA
   ============================================================= */
.cta-final {
    position: relative;
    padding: 84px 0;                       /* was 130px — the section ran long */
    background: var(--navy-deep);
    overflow: hidden;
    text-align: center;
}
.cta-media { position: absolute; inset: 0; }
.cta-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
/* No colour overlay — the photo is meant to read clearly (the copy sits on
   its own glass card instead, so nothing is left competing with the image).
   To dim it again later, re-add: <div class="cta-overlay"></div> after
   .cta-media plus  position:absolute; inset:0;  with a gradient. */
/* One unified glass card holding eyebrow + heading + copy + buttons, so the
   block reads as a single designed unit instead of a box over loose text.
   Scoped to .cta-final (not bare .cta-content) so the .container padding
   override in responsive.css can never flatten the card. */
.cta-final .cta-content {
    position: relative;
    z-index: 2;
    max-width: 880px;
    padding: 46px 52px 50px;
    background: rgba(4, 16, 31, .72);
    border: 1px solid rgba(201, 164, 92, .45);
    border-radius: 22px;
    box-shadow: 0 40px 80px -46px rgba(0, 0, 0, .8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
/* Copy sits on a solid surface now — halos would only muddy it */
.cta-content .eyebrow,
.cta-content .section-title,
.cta-content .cta-text { text-shadow: none; }
.cta-text {
    max-width: 640px;
    margin: 0 auto 30px;
    color: rgba(233, 238, 245, .88);
    font-size: 1.06rem;
}
.cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
/* The heading lives inside the card now, so it drops the extra chip (border,
   radius, dark fill) that the shared .cta-heading rules give it further down */
.cta-final .cta-content .cta-heading {
    max-width: none;
    margin: 0 0 16px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* =============================================================
   15. CONTACT
   ============================================================= */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: 46px;
    align-items: start;
}

.contact-info {
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 34px 32px 38px;
}
.contact-photo {
    border-radius: var(--radius);
    overflow: hidden;
    background: linear-gradient(135deg, #0B2545, var(--navy-deep));
    aspect-ratio: 1 / 1;
    margin-bottom: 26px;
}
.contact-photo img { width: 100%; height: 100%; object-fit: cover; }

.contact-name { font-size: 1.75rem; margin-bottom: 20px; }

.contact-list { display: grid; gap: 20px; margin-bottom: 30px; }
.contact-list li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--text-2);
}
.contact-list a { color: var(--navy); font-weight: 600; }
.contact-list a:hover { color: var(--gold); }
.contact-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 164, 92, .5);
    border-radius: 50%;
    background: var(--ivory);
}
.contact-icon svg { width: 17px; height: 17px; fill: var(--gold); }
.contact-icon i { font-size: 17px; line-height: 1; color: var(--gold); }

.contact-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.contact-actions .btn { flex: 1 1 auto; }

.contact-form-wrap {
    background: var(--warm-white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 40px 40px 44px;
}

.form-alert {
    padding: 15px 20px;
    border-radius: var(--radius-btn);
    font-size: .95rem;
    font-weight: 600;
    margin-bottom: 26px;
    border: 1px solid transparent;
}
.form-alert--success {
    background: #F1F8F1;
    border-color: #BFE0BF;
    color: #22541F;
}
.form-alert--error {
    background: #FDF3F0;
    border-color: #F0C9BC;
    color: #8A3B22;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.form-field { margin-bottom: 22px; display: flex; flex-direction: column; }

.form-field label,
.form-services legend {
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 9px;
}
.req { color: #B3402A; }

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    min-height: 50px;
    padding: 13px 16px;
    font-family: var(--font-body);
    font-size: .97rem;
    color: var(--text);
    background: var(--ivory);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    transition: border-color .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    background: #FFFFFF;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 164, 92, .18);
}
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: #C0604A; }

.field-error {
    min-height: 18px;
    font-size: .8rem;
    color: #A63B22;
    margin-top: 5px;
}

.form-services { border: 0; padding: 0; margin: 0 0 22px; }
.form-services legend { padding: 0; }
.service-checks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.check {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 12px;
    background: var(--ivory);
    border: 1px solid var(--border);
    border-radius: var(--radius-btn);
    font-size: .88rem;
    color: var(--text-2);
    cursor: pointer;
    transition: border-color .3s var(--ease), color .3s var(--ease);
}
.check:hover { border-color: var(--gold); color: var(--navy); }
.check input { width: 16px; height: 16px; accent-color: var(--gold); flex: 0 0 auto; }

.form-actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* =============================================================
   16. FOOTER
   ============================================================= */
.site-footer {
    background: var(--navy-deep);
    color: rgba(226, 233, 242, .76);
    padding-top: 78px;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr .8fr 1fr 1.2fr;
    gap: 46px;
    padding-bottom: 60px;
}

.brand--footer .brand-mark { background: rgba(255, 255, 255, .04); }
.brand--footer { margin-bottom: 20px; }

.footer-about { font-size: .95rem; line-height: 1.8; margin-bottom: 16px; }
.footer-tagline {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-style: italic;
    color: var(--gold-soft);
    margin-bottom: 16px;
}
.footer-ig {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .12em;
    /* Logo gold — matches the brand mark ring */
    color: var(--gold);
    transition: color .3s var(--ease);
}
.footer-ig i { font-size: 1.1rem; }
.footer-ig:hover { color: var(--gold-soft); }

.footer-heading {
    font-family: var(--font-body);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: 22px;
    position: relative;
    padding-bottom: 12px;
}
.footer-heading::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 34px;
    height: 2px;
    background: var(--gold);
}

.footer-links { display: grid; gap: 11px; }
.footer-links a {
    font-size: .95rem;
    position: relative;
    display: inline-block;
    transition: color .3s var(--ease), transform .3s var(--ease);
}
.footer-links a::before {
    content: "›";
    color: var(--gold);
    margin-right: 8px;
    opacity: .9;
}
.footer-links a:hover { color: var(--gold-soft); transform: translateX(4px); }

.footer-contact { display: grid; gap: 16px; }
.footer-contact li {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    column-gap: 12px;
    align-items: start;
    font-size: .93rem;
}
/* Every footer icon uses the logo gold */
.footer-contact-icon {
    color: var(--gold);
    font-size: .95rem;
    line-height: 1.5;
    text-align: center;
}
.footer-contact-body { display: grid; gap: 2px; }
.footer-contact-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold);
}
.footer-contact a { color: rgba(226, 233, 242, .82); }
.footer-contact a:hover { color: var(--gold-soft); }

.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); }
/* Two classes so the .container shorthand padding cannot override it */
.footer-bottom .footer-bottom-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding-top: 24px;
    padding-bottom: 24px;
    font-size: .87rem;
}
.footer-bottom p { margin: 0; }
.footer-credit {
    color: rgba(226, 233, 242, .72);
    letter-spacing: .04em;
}
/* Keeps the two parts reading as one correct sentence on wide screens */
@media (min-width: 821px) {
    .footer-credit::before {
        content: "|";
        margin-right: 12px;
        color: rgba(226, 233, 242, .38);
    }
}
.footer-credit-name {
    color: var(--gold-soft);
    font-weight: 600;
}

/* ---------- Floating buttons ---------- */
.float-wa {
    position: fixed;
    right: 24px;
    bottom: 36px;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 20px 0 16px;
    background: #1FAF54;
    color: #FFFFFF;
    border-radius: 40px;
    box-shadow: 0 16px 34px -16px rgba(31, 175, 84, .85);
    transition: transform .35s var(--ease), background-color .35s var(--ease);
}
.float-wa svg { width: 28px; height: 28px; fill: #FFFFFF; }
.float-wa-label {
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .05em;
}
.float-wa:hover { transform: translateY(-3px); background: #189B4A; }

.scroll-top {
    position: fixed;
    left: 24px;
    bottom: 26px;
    z-index: 900;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    background: var(--navy);
    border: 1px solid rgba(201, 164, 92, .55);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background-color .3s;
}
.scroll-top svg { width: 20px; height: 20px; fill: var(--gold-soft); }
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { background: var(--gold); }
.scroll-top:hover svg { fill: var(--navy-deep); }

/* =============================================================
   SECTION IMAGERY — background & supporting images
   ============================================================= */

/* Brand introduction image */
.intro-media {
    max-width: 860px;
    margin: 46px auto 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #0B2545, var(--navy-deep));
    box-shadow: var(--shadow-soft);
}
.intro-media img { width: 100%; height: 100%; object-fit: cover; }

/* Vision & Mission background — the photo is a soft backdrop, so it carries a
   heavier white wash (cards sit on top at .95 opacity) */
.vm-section {
    background-color: #F8F4EB;
    background-image:
        linear-gradient(rgba(255, 253, 250, .82), rgba(250, 246, 238, .88)),
        url('../images/vision/hm-vision-mission-wedding-planning.jpg');
		
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Keeps the heading readable while the photo stays visible */
.vm-section .section-title {
    text-shadow: 0 2px 16px rgba(251, 248, 241, .95), 0 0 6px rgba(251, 248, 241, .9);
}
/* Gold label on a light photo is unreadable — navy keeps it visible */
.vm-section .eyebrow {
    color: var(--navy);
    text-shadow: 0 1px 10px rgba(251, 248, 241, .95);
}

/* Process supporting image */
.process-media {
    max-width: 1080px;
    margin: 0 auto 62px;
    aspect-ratio: 16 / 8;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #0B2545, var(--navy-deep));
    box-shadow: var(--shadow-soft);
}
.process-media img { width: 100%; height: 100%; object-fit: cover; }

/* Reviews background — the night photo runs with NO colour overlay (kept clean
   on request). The image is dark by itself; the heading chip plus the text
   halos below handle the bright bokeh lights. */
.reviews {
    position: relative;
    background-color: var(--navy);          /* fallback if the image fails */
    background-image:
        url('../images/reviews/wedding-client-reviews-background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
/* Section heading sits in its own dark chip, so a soft halo is enough */
.reviews .section-title--light,
.reviews .eyebrow--light {
    text-shadow: 0 2px 16px rgba(4, 16, 31, .85);
}

/* The slider has no card panel, so its copy sits directly on the photo —
   a dark halo keeps the white text legible over the bokeh lights. */
.review-text,
.review-name,
.review-event {
    text-shadow: 0 2px 16px rgba(4, 16, 31, .95), 0 0 6px rgba(4, 16, 31, .85);
}
.review-quote { text-shadow: 0 2px 14px rgba(4, 16, 31, .9); }
.review-arrow,
.review-dot { box-shadow: 0 2px 10px rgba(4, 16, 31, .55); }

/* =============================================================
   HEADINGS SITTING ON PHOTOGRAPHS
   Each title below sits directly on a picture, so it gets its own
   backdrop chip — the copy never has to compete with the photo.
   ============================================================= */
.reviews .section-head,
.vm-section .section-head,
.cta-heading {
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    padding: 24px 34px 28px;
    border: 1px solid rgba(201, 164, 92, .5);
    border-radius: 20px;
    box-shadow: 0 30px 66px -46px rgba(0, 0, 0, .75);
}
/* Dark chip behind white / gold text over the dark photos */
.reviews .section-head,
.cta-heading {
    background: rgba(4, 16, 31, .84);
}
/* Light chip behind navy text over the lightened Vision & Mission photo */
.vm-section .section-head { 
    box-shadow: 0 30px 66px -46px rgba(4, 16, 31, .55);
}
.cta-heading { margin-bottom: 26px; }

/* =============================================================
   CLIENT VOICES — tightened vertical rhythm
   The reviews block stacked a full section padding, a padded heading
   chip, a 58px head gap and a deeply padded card, so it ran much
   taller than its copy needed. These overrides live here (after the
   heading-chip rules above) so they win the cascade.
   ============================================================= */
.reviews { --section-y: 54px; }                              /* was 88px */
.reviews .section-head {
    margin-bottom: 30px;                                     /* was 58px */
    padding: 14px 30px 18px;                                 /* was 24px 34px 28px */
}
/* Vertical only — horizontal padding still follows the breakpoints */
.reviews .review-card {
    padding-top: 30px;                                       /* was 46px */
    padding-bottom: 32px;                                    /* was 46px */
}
.reviews .review-text { margin-bottom: 18px; }               /* was 26px */
.reviews .reviews-controls { margin-top: 22px; }             /* was 34px */

/* FAQ layout with supporting image */
.faq-layout {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: 60px;
    align-items: start;
}
.faq-lead {
    color: var(--text-2);
    font-size: 1rem;
    margin-bottom: 28px;
}
.faq-media {
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    background: linear-gradient(135deg, #0B2545, var(--navy-deep));
    box-shadow: var(--shadow-soft);
}
.faq-media img { width: 100%; height: 100%; object-fit: cover; }

/* Footer background */
.site-footer {
    background-image:
        linear-gradient(rgba(4, 16, 31, .32), rgba(4, 16, 31, .55)),
        url('../images/footer/hm-footer-wedding-details.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* ---------- Reveal base state (progressive enhancement) ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.is-visible { opacity: 1; transform: none; }