/* =================================================================
   EVIAESTHETICS — HOME PAGE (v2)
   Modernized Hermes White-Glove Design System
   All classes prefixed .hm- to avoid conflicts with styles.css
   ================================================================= */

/* =================================================================
   DESIGN SYSTEM EXTENSIONS (champagne gold + dark editorial)
   ================================================================= */
:root {
    --champagne-gold: #D4AF37;
    --champagne-light: #E8C86C;
    --champagne-dark: #B8941F;
    --gradient-champagne: linear-gradient(135deg, #E8C86C 0%, #D4AF37 50%, #B8941F 100%);
    --dark-editorial: #1a1208;
    --dark-editorial-soft: #2a1b0a;
    --dark-editorial-mid: #3d2a18;
}

/* Shared container for hm sections */
.hm-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 2.5rem);
    position: relative;
    z-index: 10;
}

/* Shared eyebrow (reusable) */
.hm-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: var(--hermes-orange, #FF8C00);
    text-transform: uppercase;
    letter-spacing: 3px;
}

.hm-eyebrow-dash {
    width: 32px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--hermes-orange, #FF8C00));
    display: inline-block;
}

.hm-eyebrow-light {
    color: var(--champagne-gold);
}

.hm-eyebrow-light .hm-eyebrow-dash {
    background: linear-gradient(90deg, transparent, var(--champagne-gold));
}

/* Shared section title */
.hm-section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 5.5vw, 3.8rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.hm-title-main {
    display: block;
    color: var(--text-primary, #2A1B0A);
    font-weight: 600;
}

.hm-title-accent {
    display: block;
    background: linear-gradient(135deg, #FF8C00 0%, #FFA500 50%, #FF7A00 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hm-gradient-flow 7s ease-in-out infinite;
    font-style: italic;
    margin-top: 4px;
}

.hm-title-light {
    color: #f5ebd8;
}

.hm-title-light .hm-title-main {
    color: #f5ebd8;
}

.hm-accent-gold {
    background: var(--gradient-champagne);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hm-section-sub {
    font-family: 'Inter', sans-serif;
    font-size: clamp(15px, 2vw, 17px);
    line-height: 1.6;
    color: var(--text-secondary, #5D4E37);
    max-width: 600px;
    margin: 0 auto;
}

/* Shared primary button */
.hm-btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #FF8C00 0%, #FFA500 50%, #FF7A00 100%);
    background-size: 200% 200%;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    letter-spacing: 0.5px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 12px 40px rgba(255, 140, 0, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.2);
    animation: hm-gradient-flow 8s ease-in-out infinite;
}

.hm-btn-primary:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 18px 55px rgba(255, 140, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.hm-btn-primary.hm-btn-gold {
    background: var(--gradient-champagne);
    background-size: 200% 200%;
    box-shadow: 0 12px 40px rgba(212, 175, 55, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.3);
    color: #1a1208;
}

.hm-btn-primary.hm-btn-gold:hover {
    box-shadow: 0 18px 55px rgba(212, 175, 55, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.4);
}

.hm-btn-xl {
    padding: 20px 44px;
    font-size: 16px;
}

.hm-btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transition: left 0.8s ease;
}

.hm-btn-primary:hover .hm-btn-shine {
    left: 100%;
}

.hm-btn-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 2;
}

.hm-btn-label i {
    font-size: 18px;
    transition: transform 0.4s ease;
}

.hm-btn-primary:hover .hm-btn-label i:last-child {
    transform: translateX(4px);
}

.hm-btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.6);
    color: var(--hermes-orange, #FF8C00);
    border: 2px solid rgba(255, 140, 0, 0.3);
    padding: 14px 28px;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(10px);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-btn-ghost:hover {
    background: rgba(255, 140, 0, 0.1);
    border-color: var(--hermes-orange, #FF8C00);
    transform: translateY(-2px);
}

/* Shared frame corners (used across sections) */
.hm-frame-corners,
.hm-exp-quote-corners,
.hm-contact-corners {
    position: absolute;
    inset: -4px;
    pointer-events: none;
    z-index: 5;
}

.hm-fc {
    position: absolute;
    width: 24px;
    height: 24px;
    border: 2.5px solid var(--hermes-orange, #FF8C00);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-fc-tl { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 10px 0 0 0; }
.hm-fc-tr { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 10px 0 0; }
.hm-fc-bl { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 10px; }
.hm-fc-br { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 10px 0; }

/* =================================================================
   SECTION 1 :: CINEMATIC VIDEO HERO (foregrounded)
   ================================================================= */
.hm-cinema-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 640px;
    max-height: 1000px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1208;
}

.hm-video-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hm-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0.85;
}

/* Vignette gradient — darkens edges to focus on video + text legibility */
.hm-video-vignette {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 20%, rgba(26, 18, 8, 0.5) 100%),
        linear-gradient(180deg, rgba(26, 18, 8, 0.35) 0%, transparent 25%, transparent 55%, rgba(26, 18, 8, 0.75) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Subtle grain texture — luxury print feel */
.hm-video-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
    opacity: 0.07;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 3;
}

/* Overlay content */
.hm-hero-overlay {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
}

.hm-hero-inner {
    max-width: 860px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(18px, 3vw, 28px);
}

.hm-hero-eyebrow {
    display: flex;
    align-items: center;
    gap: 18px;
}

.hm-eyebrow-line {
    width: clamp(30px, 5vw, 50px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7));
}

.hm-hero-eyebrow .hm-eyebrow-line:last-child {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), transparent);
}

.hm-eyebrow-text {
    font-family: 'Inter', sans-serif;
    font-size: clamp(10px, 1.4vw, 12px);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 4px;
}

.hm-hero-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0;
    color: white;
    text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hm-title-l1 {
    display: block;
    font-size: clamp(2.6rem, 7vw, 5rem);
    font-weight: 500;
    color: #f5ebd8;
}

.hm-title-l2 {
    display: block;
    font-size: clamp(3rem, 8.5vw, 6rem);
    font-weight: 700;
    font-style: italic;
    background: linear-gradient(135deg, #FFD700 0%, #E8C86C 30%, #FFA500 55%, #FF8C00 80%, #FFD700 100%);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hm-gradient-flow 6s ease-in-out infinite;
    text-shadow: none;
    filter: drop-shadow(0 4px 20px rgba(0, 0, 0, 0.4));
    margin-top: 4px;
}

.hm-hero-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(18px, 2.4vw, 24px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.92);
    max-width: 620px;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.hm-hero-actions {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 12px;
}

/* Watch tour button — glass pill */
.hm-btn-watch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 22px 10px 10px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 50px;
    color: white;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-btn-watch:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-2px);
}

.hm-watch-icon {
    width: 36px;
    height: 36px;
    background: var(--gradient-champagne);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1208;
    font-size: 16px;
    transition: transform 0.4s ease;
    box-shadow: 0 4px 14px rgba(212, 175, 55, 0.4);
}

.hm-btn-watch:hover .hm-watch-icon {
    transform: scale(1.08);
}

/* Signature bottom-left */
.hm-hero-signature {
    position: absolute;
    bottom: clamp(24px, 4vh, 48px);
    left: clamp(24px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 11;
}

.hm-sig-kicker {
    font-family: 'Cormorant Garamond', serif;
    font-size: 14px;
    font-style: italic;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
}

.hm-sig-name {
    font-family: 'Dancing Script', cursive;
    font-size: clamp(22px, 2.6vw, 30px);
    color: var(--champagne-light);
    font-weight: 600;
    line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.hm-sig-credentials {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-top: 4px;
}

/* Vertical scroll flourish */
.hm-hero-scroll {
    position: absolute;
    bottom: clamp(24px, 4vh, 48px);
    right: clamp(24px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    z-index: 11;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.hm-scroll-line {
    width: 1px;
    height: 80px;
    background: linear-gradient(180deg, transparent, var(--champagne-light), transparent);
    animation: hm-scroll-flow 2.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.hm-scroll-text {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 4px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

/* =================================================================
   SECTION 2 :: TRUST SIGNATURE BAND
   ================================================================= */
.hm-trust-band {
    position: relative;
    padding: clamp(24px, 4vh, 32px) 0;
    background: linear-gradient(180deg, #FFFCF8 0%, #FFFEF9 100%);
    border-bottom: 1px solid rgba(255, 140, 0, 0.08);
    border-top: 1px solid rgba(255, 140, 0, 0.08);
}

.hm-trust-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 2.5rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3vw, 32px);
    flex-wrap: wrap;
}

.hm-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: clamp(12px, 1.5vw, 13px);
    font-weight: 600;
    color: var(--text-secondary, #5D4E37);
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.hm-trust-item:hover {
    color: var(--hermes-orange, #FF8C00);
}

.hm-trust-item i {
    font-size: 18px;
    color: var(--hermes-orange, #FF8C00);
}

.hm-trust-item:nth-child(odd) i {
    color: var(--champagne-gold);
}

.hm-trust-divider {
    width: 1px;
    height: 24px;
    background: linear-gradient(to bottom, transparent, rgba(255, 140, 0, 0.25), transparent);
}

/* =================================================================
   SECTION 3 :: ABOUT TEASER
   ================================================================= */
.hm-about {
    position: relative;
    padding: clamp(70px, 10vh, 110px) 0;
    background: linear-gradient(180deg, #FFFEF9 0%, #FFF8F0 50%, #FFFCF8 100%);
    overflow: hidden;
}

.hm-about-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hm-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: hm-orb-drift 25s ease-in-out infinite;
}

.hm-orb-1 {
    width: 450px;
    height: 450px;
    top: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent 70%);
}

.hm-orb-2 {
    width: 350px;
    height: 350px;
    bottom: -80px;
    right: -80px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.06), transparent 70%);
    animation-delay: -12s;
}

.hm-about-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(40px, 6vw, 70px);
    align-items: center;
}

/* Portrait side */
.hm-about-portrait {
    position: relative;
    max-width: 480px;
    justify-self: center;
}

.hm-portrait-frame {
    position: relative;
    aspect-ratio: 4 / 5;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    padding: 10px;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.12),
        0 12px 40px rgba(255, 140, 0, 0.08);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-portrait-frame:hover {
    transform: translateY(-6px);
}

.hm-portrait-frame:hover .hm-fc {
    opacity: 1;
    transform: scale(1.1);
}

.hm-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 18px;
    transition: transform 0.8s ease;
}

.hm-portrait-frame:hover .hm-portrait-img {
    transform: scale(1.03);
}

.hm-portrait-badge {
    position: absolute;
    bottom: -20px;
    right: -16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: white;
    border: 2px solid rgba(255, 140, 0, 0.2);
    border-radius: 16px;
    padding: 12px 18px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
    animation: hm-badge-float 4s ease-in-out infinite;
    z-index: 10;
}

.hm-portrait-badge i {
    color: var(--champagne-gold);
    font-size: 26px;
}

.hm-portrait-badge div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.hm-portrait-badge span {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #5D4E37);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hm-portrait-badge strong {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #2A1B0A);
}

/* Content side */
.hm-about-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.hm-about-lead {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(19px, 2.4vw, 23px);
    font-style: italic;
    line-height: 1.5;
    color: var(--text-primary, #2A1B0A);
    padding-left: 20px;
    border-left: 3px solid var(--champagne-gold);
    margin: 4px 0;
}

.hm-about-body {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary, #5D4E37);
    margin: 0;
}

.hm-about-pills {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding: 18px 0;
    border-top: 1px solid rgba(255, 140, 0, 0.15);
    border-bottom: 1px solid rgba(255, 140, 0, 0.15);
    margin: 8px 0;
}

.hm-pill {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 140, 0, 0.15);
    border-radius: 14px;
    transition: all 0.4s ease;
}

.hm-pill:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 140, 0, 0.35);
    box-shadow: 0 8px 24px rgba(255, 140, 0, 0.1);
}

.hm-pill-num {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--hermes-orange, #FF8C00);
    line-height: 1;
}

.hm-pill-label {
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary, #5D4E37);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hm-about-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* =================================================================
   SECTION 4 :: SERVICES ENHANCEMENTS
   (builds on existing .hermes-services-section in styles.css)
   ================================================================= */

/* Filter pills row */
.hm-filter-pills {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0 auto 40px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 140, 0, 0.15);
    border-radius: 60px;
    max-width: fit-content;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.06);
}

.hm-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    background: transparent;
    border: none;
    border-radius: 50px;
    color: var(--text-secondary, #5D4E37);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.hm-filter-pill i {
    font-size: 16px;
    color: inherit;
}

.hm-filter-pill:hover {
    color: var(--hermes-orange, #FF8C00);
    background: rgba(255, 140, 0, 0.06);
}

.hm-filter-pill.active {
    background: linear-gradient(135deg, #FF8C00 0%, #FFA500 100%);
    color: white;
    box-shadow: 0 8px 22px rgba(255, 140, 0, 0.3);
}

.hm-filter-pill.active i {
    color: white;
}

.hm-pill-count {
    padding: 2px 8px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    display: inline-block;
}

.hm-filter-pill:not(.active) .hm-pill-count {
    background: rgba(255, 140, 0, 0.12);
    color: var(--hermes-orange, #FF8C00);
}

/* Service card additions */
.hermes-service-card {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hermes-service-card.hm-filtered-out {
    opacity: 0.25;
    transform: scale(0.96);
    filter: grayscale(0.6);
    pointer-events: none;
}

/* Category tag on card image */
.hm-card-cat-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: 30px;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: var(--hermes-orange, #FF8C00);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    z-index: 5;
}

/* Meta row (duration + price) */
.hm-card-meta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin: -8px 0 20px;
    padding: 12px 0;
    border-top: 1px solid rgba(255, 140, 0, 0.1);
    border-bottom: 1px solid rgba(255, 140, 0, 0.1);
}

.hm-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary, #5D4E37);
    letter-spacing: 0.3px;
}

.hm-meta-item i {
    color: var(--hermes-orange, #FF8C00);
    font-size: 14px;
}

/* Card action row (Details + Book) */
.hm-card-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}

.hm-card-btn-primary {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 18px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.1), rgba(255, 165, 0, 0.06));
    border: 1.5px solid rgba(255, 140, 0, 0.25);
    border-radius: 50px;
    color: var(--hermes-orange, #FF8C00);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-card-btn-primary:hover {
    background: linear-gradient(135deg, #FF8C00, #FFA500);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(255, 140, 0, 0.3);
}

.hm-card-btn-primary .hermes-btn-arrow {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.hm-card-btn-primary:hover .hermes-btn-arrow {
    transform: translateX(3px);
}

.hm-card-btn-book {
    padding: 12px 22px;
    background: linear-gradient(135deg, var(--dark-editorial-soft) 0%, var(--dark-editorial-mid) 100%);
    border: none;
    border-radius: 50px;
    color: var(--champagne-light);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
}

.hm-card-btn-book:hover {
    background: var(--gradient-champagne);
    color: #1a1208;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(212, 175, 55, 0.35);
}

/* "View All" card */
.hermes-service-card.hm-view-all-card .hermes-card-inner {
    background: linear-gradient(135deg, var(--dark-editorial-soft) 0%, var(--dark-editorial-mid) 50%, var(--dark-editorial-soft) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    overflow: hidden;
    position: relative;
}

.hm-view-all-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: clamp(40px, 5vw, 60px) 32px;
    height: 100%;
    min-height: 520px;
    color: white;
    text-decoration: none;
    gap: 16px;
    position: relative;
    transition: all 0.5s ease;
}

.hm-view-all-icon {
    width: 80px;
    height: 80px;
    background: var(--gradient-champagne);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1208;
    font-size: 32px;
    box-shadow: 0 15px 45px rgba(212, 175, 55, 0.3);
    margin-bottom: 12px;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hermes-service-card.hm-view-all-card:hover .hm-view-all-icon {
    transform: rotate(-8deg) scale(1.08);
}

.hm-view-all-inner h3 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--champagne-light);
    margin: 0;
    letter-spacing: -0.01em;
}

.hm-view-all-inner p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: rgba(245, 235, 216, 0.7);
    line-height: 1.6;
    margin: 0;
    max-width: 240px;
}

.hm-view-all-arrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 28px;
    background: transparent;
    border: 1.5px solid var(--champagne-gold);
    border-radius: 50px;
    color: var(--champagne-light);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.4s ease;
}

.hermes-service-card.hm-view-all-card:hover .hm-view-all-arrow {
    background: var(--gradient-champagne);
    color: #1a1208;
    border-color: transparent;
}

.hm-view-all-arrow i {
    transition: transform 0.3s ease;
}

.hermes-service-card.hm-view-all-card:hover .hm-view-all-arrow i {
    transform: translateX(4px);
}

.hm-va-shine {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.15), transparent 50%),
        radial-gradient(circle at 70% 80%, rgba(255, 140, 0, 0.1), transparent 50%);
    pointer-events: none;
}

/* Services footer CTA */
.hm-services-footer {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.hm-services-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 28px;
    background: transparent;
    border: 1.5px solid rgba(255, 140, 0, 0.3);
    border-radius: 50px;
    color: var(--hermes-orange, #FF8C00);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-services-cta:hover {
    background: linear-gradient(135deg, #FF8C00, #FFA500);
    color: white;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 140, 0, 0.3);
}

.hm-services-cta i {
    transition: transform 0.3s ease;
}

.hm-services-cta:hover i {
    transform: translate(3px, -3px);
}

/* =================================================================
   SECTION 5 :: THE EXPERIENCE (warm champagne cream editorial)
   ================================================================= */
.hm-experience {
    position: relative;
    padding: clamp(80px, 12vh, 130px) 0;
    background: linear-gradient(135deg, #FFF8F0 0%, #F8ECD8 50%, #FDF4E3 100%);
    overflow: hidden;
    color: var(--text-primary, #2A1B0A);
}

/* Refined editorial dividers at top and bottom */
.hm-experience::before,
.hm-experience::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(60%, 700px);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(184, 148, 31, 0.45), transparent);
    z-index: 2;
}

.hm-experience::before { top: 0; }
.hm-experience::after { bottom: 0; }

.hm-exp-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Very subtle grain — almost invisible, just adds tactile quality */
.hm-exp-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E");
    opacity: 0.025;
    mix-blend-mode: multiply;
}

.hm-exp-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    animation: hm-orb-drift 28s ease-in-out infinite;
}

.hm-exp-orb-1 {
    width: 520px;
    height: 520px;
    top: -150px;
    left: -150px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.18), transparent 70%);
}

.hm-exp-orb-2 {
    width: 420px;
    height: 420px;
    bottom: -100px;
    right: -100px;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.12), transparent 70%);
    animation-delay: -14s;
}

/* Override the title/eyebrow light variants to work on cream */
.hm-experience .hm-title-light,
.hm-experience .hm-title-light .hm-title-main {
    color: var(--text-primary, #2A1B0A);
}

.hm-experience .hm-accent-gold {
    background: linear-gradient(135deg, #B8941F 0%, #D4AF37 40%, #8B6B16 80%, #D4AF37 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: hm-gradient-flow 7s ease-in-out infinite;
}

.hm-experience .hm-eyebrow-light {
    color: #B8941F;
}

.hm-experience .hm-eyebrow-light .hm-eyebrow-dash {
    background: linear-gradient(90deg, transparent, #B8941F);
}

.hm-exp-layout {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(50px, 6vw, 80px);
    align-items: center;
}

.hm-exp-text {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.hm-exp-lead {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(18px, 2.3vw, 22px);
    font-style: italic;
    line-height: 1.6;
    color: var(--text-secondary, #5D4E37);
    max-width: 560px;
    margin: 0;
    padding-left: 20px;
    border-left: 2px solid rgba(184, 148, 31, 0.5);
}

.hm-exp-points {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.hm-exp-point {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: flex-start;
    padding: 22px 0;
    border-bottom: 1px solid rgba(184, 148, 31, 0.22);
    transition: padding 0.4s ease;
}

.hm-exp-point:last-child {
    border-bottom: none;
}

.hm-exp-point:hover {
    padding-left: 6px;
}

.hm-exp-icon {
    width: 48px;
    height: 48px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(184, 148, 31, 0.35);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #B8941F;
    font-size: 22px;
    flex-shrink: 0;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-exp-point:hover .hm-exp-icon {
    background: var(--gradient-champagne);
    color: #1a1208;
    border-color: transparent;
    transform: rotate(-5deg) scale(1.05);
    box-shadow: 0 10px 28px rgba(212, 175, 55, 0.35);
}

.hm-exp-point h4 {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary, #2A1B0A);
    margin: 0 0 6px 0;
    letter-spacing: -0.01em;
}

.hm-exp-point p {
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary, #5D4E37);
    margin: 0;
}

.hm-exp-cta {
    margin-top: 12px;
}

/* Experience quote card — cream version */
.hm-exp-visual {
    position: relative;
}

.hm-exp-quote-card {
    position: relative;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(184, 148, 31, 0.3);
    border-radius: 24px;
    padding: clamp(32px, 5vw, 48px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.04),
        0 8px 25px rgba(184, 148, 31, 0.08);
}

.hm-exp-quote-card:hover {
    transform: translateY(-4px);
    border-color: rgba(184, 148, 31, 0.5);
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.06),
        0 12px 35px rgba(184, 148, 31, 0.14);
}

.hm-exp-quote-card .hm-fc {
    border-color: #B8941F;
    opacity: 0.7;
}

.hm-exp-quote-card:hover .hm-fc {
    opacity: 1;
    transform: scale(1.1);
}

.hm-exp-quote-mark {
    font-family: 'Playfair Display', serif;
    font-size: 120px;
    font-weight: 700;
    color: #B8941F;
    line-height: 0.6;
    opacity: 0.3;
    margin-bottom: 8px;
}

.hm-exp-quote-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(20px, 2.8vw, 26px);
    font-weight: 400;
    font-style: italic;
    line-height: 1.5;
    color: var(--text-primary, #2A1B0A);
    margin: 0 0 24px 0;
    letter-spacing: -0.01em;
}

.hm-exp-quote-cite {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-style: normal;
    padding-top: 20px;
    border-top: 1px solid rgba(184, 148, 31, 0.3);
}

.hm-quote-star-line {
    color: #D4AF37;
    font-size: 14px;
    letter-spacing: 4px;
}

.hm-quote-attribution {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #5D4E37);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* =================================================================
   RESULTS CTA (added to existing results section)
   ================================================================= */
.hm-results-cta {
    text-align: center;
    margin-top: clamp(40px, 6vh, 60px);
    padding-top: clamp(30px, 5vh, 50px);
    border-top: 1px solid rgba(255, 140, 0, 0.1);
}

.hm-results-cta-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(20px, 2.5vw, 26px);
    font-style: italic;
    color: var(--text-primary, #2A1B0A);
    margin: 0 0 24px 0;
}

.hm-results-cta-text em {
    background: linear-gradient(135deg, #FF8C00, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
}

/* =================================================================
   SECTION 9 :: FAQ ACCORDION
   ================================================================= */
.hm-faq {
    position: relative;
    padding: clamp(80px, 12vh, 130px) 0;
    background: linear-gradient(180deg, #FFFCF8 0%, #FFFEF9 100%);
    overflow: hidden;
}

.hm-faq-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hm-orb-faq-1 {
    width: 400px;
    height: 400px;
    top: 10%;
    right: -100px;
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.05), transparent 70%);
    filter: blur(80px);
    animation: hm-orb-drift 26s ease-in-out infinite;
}

.hm-orb-faq-2 {
    width: 320px;
    height: 320px;
    bottom: -80px;
    left: -80px;
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.05), transparent 70%);
    filter: blur(80px);
    animation: hm-orb-drift 26s ease-in-out infinite;
    animation-delay: -13s;
}

.hm-faq-header {
    text-align: center;
    margin-bottom: clamp(50px, 7vh, 70px);
}

.hm-faq-list {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.hm-faq-item {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 140, 0, 0.12);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-faq-item:hover {
    border-color: rgba(255, 140, 0, 0.3);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

.hm-faq-item[open] {
    border-color: rgba(255, 140, 0, 0.4);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08), 0 8px 25px rgba(255, 140, 0, 0.08);
}

.hm-faq-question {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 22px 26px;
    cursor: pointer;
    list-style: none;
    transition: all 0.3s ease;
}

.hm-faq-question::-webkit-details-marker {
    display: none;
}

.hm-faq-question:hover {
    background: rgba(255, 140, 0, 0.03);
}

.hm-faq-num {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--champagne-gold);
    letter-spacing: 2px;
    flex-shrink: 0;
    min-width: 28px;
}

.hm-faq-q-text {
    font-family: 'Playfair Display', serif;
    font-size: clamp(16px, 2vw, 19px);
    font-weight: 600;
    color: var(--text-primary, #2A1B0A);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.hm-faq-toggle {
    width: 36px;
    height: 36px;
    background: rgba(255, 140, 0, 0.1);
    border: 1px solid rgba(255, 140, 0, 0.25);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--hermes-orange, #FF8C00);
    font-size: 20px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex-shrink: 0;
}

.hm-faq-item[open] .hm-faq-toggle {
    background: linear-gradient(135deg, #FF8C00, #FFA500);
    color: white;
    border-color: transparent;
    transform: rotate(45deg);
}

.hm-faq-answer {
    padding: 0 26px 26px calc(26px + 28px + 20px);
    animation: hm-faq-reveal 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-faq-answer p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary, #5D4E37);
    margin: 0 0 14px 0;
}

.hm-faq-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    color: var(--hermes-orange, #FF8C00);
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: gap 0.3s ease;
}

.hm-faq-link:hover {
    gap: 14px;
}

/* =================================================================
   SECTION 10 :: CONTACT PREVIEW
   ================================================================= */
.hm-contact-preview {
    position: relative;
    padding: clamp(80px, 12vh, 130px) 0;
    background: linear-gradient(180deg, #FFFEF9 0%, #FFF8F0 100%);
    overflow: hidden;
}

.hm-contact-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.hm-cp-mesh {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 700px 400px at 30% 20%, rgba(212, 175, 55, 0.08), transparent),
        radial-gradient(ellipse 500px 300px at 70% 80%, rgba(255, 140, 0, 0.06), transparent);
}

.hm-cp-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: hm-orb-drift 25s ease-in-out infinite;
}

.hm-cp-orb-1 {
    width: 380px;
    height: 380px;
    top: 15%;
    left: 10%;
    background: radial-gradient(circle, rgba(255, 140, 0, 0.08), transparent 70%);
}

.hm-cp-orb-2 {
    width: 320px;
    height: 320px;
    bottom: 10%;
    right: 8%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08), transparent 70%);
    animation-delay: -12s;
}

.hm-contact-frame {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(30px);
    border: 1.5px solid rgba(255, 140, 0, 0.18);
    border-radius: 32px;
    padding: clamp(44px, 6vw, 72px) clamp(28px, 5vw, 64px);
    text-align: center;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.08), 0 15px 50px rgba(255, 140, 0, 0.1);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-contact-frame:hover {
    transform: translateY(-6px);
    border-color: rgba(255, 140, 0, 0.3);
    box-shadow: 0 50px 140px rgba(0, 0, 0, 0.12), 0 20px 60px rgba(255, 140, 0, 0.15);
}

.hm-contact-frame .hm-fc {
    width: 32px;
    height: 32px;
    opacity: 0.9;
}

.hm-contact-eyebrow {
    justify-content: center;
}

.hm-contact-title {
    margin-bottom: 20px;
}

.hm-contact-lead {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(17px, 2.2vw, 20px);
    font-style: italic;
    line-height: 1.6;
    color: var(--text-secondary, #5D4E37);
    max-width: 620px;
    margin: 0 auto 36px;
}

.hm-contact-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 36px;
}

.hm-contact-option {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
    background: rgba(255, 255, 255, 0.6);
    border: 1.5px solid rgba(255, 140, 0, 0.15);
    border-radius: 16px;
    text-decoration: none;
    text-align: left;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-contact-option:hover {
    background: rgba(255, 140, 0, 0.06);
    border-color: rgba(255, 140, 0, 0.35);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(255, 140, 0, 0.1);
}

.hm-contact-option.hm-co-primary {
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(212, 175, 55, 0.06));
    border-color: rgba(255, 140, 0, 0.3);
}

.hm-co-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.12), rgba(255, 165, 0, 0.08));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hermes-orange, #FF8C00);
    font-size: 20px;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

.hm-contact-option:hover .hm-co-icon {
    background: linear-gradient(135deg, #FF8C00, #FFA500);
    color: white;
    transform: scale(1.05);
}

.hm-co-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.hm-co-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #2A1B0A);
}

.hm-co-detail {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    color: var(--text-secondary, #5D4E37);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hm-co-arrow {
    color: var(--hermes-orange, #FF8C00);
    font-size: 18px;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.hm-contact-option:hover .hm-co-arrow {
    opacity: 1;
    transform: translate(3px, -3px);
}

.hm-contact-footer-cta {
    display: flex;
    justify-content: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 140, 0, 0.1);
    margin-top: 8px;
}

/* =================================================================
   VIDEO FULLSCREEN MODAL
   ================================================================= */
.hm-video-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.5s;
}

.hm-video-modal.active {
    opacity: 1;
    visibility: visible;
}

.hm-video-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(26, 18, 8, 0.92);
    backdrop-filter: blur(20px);
}

.hm-video-modal-content {
    position: relative;
    z-index: 2;
    width: 92%;
    max-width: 1200px;
    aspect-ratio: 16 / 9;
    transform: scale(0.92);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hm-video-modal.active .hm-video-modal-content {
    transform: scale(1);
}

.hm-video-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    color: white;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease;
    z-index: 3;
}

.hm-video-modal-close:hover {
    background: rgba(255, 140, 0, 0.3);
    border-color: var(--hermes-orange, #FF8C00);
    transform: rotate(90deg);
}

.hm-video-modal-frame {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(212, 175, 55, 0.3);
}

.hm-video-modal-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Lock body scroll when modal open */
body.hm-video-modal-open {
    overflow: hidden;
}

/* =================================================================
   ANIMATIONS
   ================================================================= */
@keyframes hm-gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes hm-orb-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(30px, -25px) scale(1.05); }
    50% { transform: translate(-20px, -30px) scale(0.95); }
    75% { transform: translate(25px, 20px) scale(1.02); }
}

@keyframes hm-badge-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes hm-scroll-flow {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.1); }
}

@keyframes hm-faq-reveal {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* =================================================================
   RESPONSIVE DESIGN
   ================================================================= */
@media (max-width: 1200px) {
    .hm-about-layout {
        gap: 40px;
    }

    .hm-exp-layout {
        gap: 40px;
    }
}

@media (max-width: 992px) {
    .hm-cinema-hero {
        height: 100vh;
        min-height: 600px;
    }

    .hm-hero-scroll,
    .hm-hero-signature {
        display: none;
    }

    .hm-about-layout {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .hm-about-content {
        align-items: center;
    }

    .hm-about-lead {
        border-left: none;
        border-top: 2px solid var(--champagne-gold);
        padding-left: 0;
        padding-top: 18px;
        text-align: center;
    }

    .hm-about-pills {
        justify-content: center;
    }

    .hm-about-cta {
        justify-content: center;
    }

    .hm-exp-layout {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .hm-portrait-badge {
        right: 10%;
    }

    .hm-trust-container {
        gap: 16px;
    }

    .hm-trust-divider {
        display: none;
    }
}

@media (max-width: 768px) {
    .hm-cinema-hero {
        min-height: 560px;
    }

    .hm-title-l1 {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .hm-title-l2 {
        font-size: clamp(2.4rem, 10vw, 3.4rem);
    }

    .hm-hero-sub {
        font-size: 16px;
    }

    .hm-hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 12px auto 0;
    }

    .hm-btn-primary,
    .hm-btn-watch,
    .hm-btn-ghost {
        width: 100%;
        justify-content: center;
    }

    .hm-filter-pills {
        padding: 6px;
        gap: 6px;
    }

    .hm-filter-pill {
        padding: 10px 16px;
        font-size: 12px;
    }

    .hm-filter-pill .hm-pill-count {
        display: none;
    }

    .hm-card-actions {
        flex-direction: column;
    }

    .hm-card-btn-book {
        text-align: center;
    }

    .hm-faq-question {
        grid-template-columns: 1fr auto;
        padding: 18px 20px;
        gap: 14px;
    }

    .hm-faq-num {
        display: none;
    }

    .hm-faq-answer {
        padding: 0 20px 22px;
    }

    .hm-exp-quote-mark {
        font-size: 80px;
    }

    .hm-exp-quote-text {
        font-size: 18px;
    }

    .hm-contact-options {
        grid-template-columns: 1fr;
    }

    .hm-video-modal-close {
        top: -44px;
        width: 38px;
        height: 38px;
    }
}

@media (max-width: 480px) {
    .hm-hero-eyebrow {
        gap: 10px;
    }

    .hm-eyebrow-text {
        letter-spacing: 2.5px;
    }

    .hm-portrait-badge {
        right: 0;
        left: 50%;
        transform: translateX(-50%);
        bottom: -16px;
    }

    .hm-pill {
        padding: 8px 14px;
    }

    .hm-pill-num {
        font-size: 18px;
    }

    .hm-contact-frame {
        padding: 36px 22px;
        border-radius: 24px;
    }

    .hm-contact-frame .hm-fc {
        width: 20px;
        height: 20px;
    }

    .hm-about-portrait {
        max-width: 320px;
    }

    .hm-view-all-inner {
        min-height: 460px;
        padding: 36px 24px;
    }

    .hm-view-all-inner h3 {
        font-size: 24px;
    }
}

/* =================================================================
   ACCESSIBILITY & PERFORMANCE
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
    .hm-orb,
    .hm-exp-orb,
    .hm-cp-orb,
    .hm-orb-faq-1,
    .hm-orb-faq-2,
    .hm-scroll-line,
    .hm-portrait-badge,
    .hm-title-l2,
    .hm-title-accent,
    .hm-btn-primary,
    .hm-video-grain,
    .hm-exp-grain {
        animation: none !important;
    }

    * {
        transition-duration: 0.2s !important;
    }
}

.hm-btn-primary:focus-visible,
.hm-btn-ghost:focus-visible,
.hm-btn-watch:focus-visible,
.hm-filter-pill:focus-visible,
.hm-faq-question:focus-visible {
    outline: 3px solid rgba(255, 140, 0, 0.6);
    outline-offset: 3px;
}

/* Performance hints */
.hm-portrait-frame,
.hm-btn-primary,
.hm-contact-frame,
.hm-exp-quote-card,
.hermes-service-card {
    will-change: transform;
}