/* =========================================================
   RAJALAKSHMI JEWELLERS — Shared Stylesheet
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --cream: #F8F2EA;
    --cream-alt: #EFE4D8;
    --cream-deep: #D8C1A5;
    --maroon: #4A2743;
    --maroon-dark: #3A1C32;
    --maroon-darker: #2A1424;
    --gold: #C9A96E;
    --gold-light: #D4AF6A;
    --gold-pale: #F0E1BE;
    --gold-deep: #A3814C;
    --text-dark: #241923;
    --text-muted: #6B514F;
    --white: #ffffff;
    --shadow: 0 10px 40px rgba(36, 25, 35, 0.12);
    --radius: 14px;
    --transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Belt-and-braces reset: outranks Bootstrap's reboot (loaded only on index.php for the hero)
   on element-selector specificity so it can never leak spacing into other sections. */
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd {
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--cream);
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

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

ul { list-style: none; }

h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif;
    color: var(--maroon-dark);
    line-height: 1.2;
    font-weight: 600;
}

.container {
    width: 90%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
}

.section { padding: 5.5rem 0; }
.section-alt { background-color: var(--cream-alt); }
.section-dark {
    background: linear-gradient(160deg, var(--maroon-darker) 0%, var(--maroon-dark) 55%, var(--maroon) 100%);
    color: var(--gold-pale);
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--gold-light); }

.section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 3.2rem;
}
.eyebrow {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 0.9rem;
}
.section-dark .eyebrow { color: var(--gold-light); }
.section-title {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    margin-bottom: 0.9rem;
}
.section-sub {
    color: var(--text-muted);
    font-size: 1.02rem;
}
.section-dark .section-sub { color: rgba(240, 225, 190, 0.75); }

.gold-divider {
    width: 70px;
    height: 3px;
    margin: 1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    position: relative;
}
.gold-divider.left { margin: 1rem 0 0; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    padding: 0.95rem 2.1rem;
    border-radius: 9999px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.btn-gold {
    background: linear-gradient(135deg, var(--gold-light), var(--gold) 55%, var(--gold-deep));
    color: var(--maroon-darker);
    box-shadow: 0 8px 24px rgba(201, 169, 110, 0.35);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(201, 169, 110, 0.45); }
.btn-outline {
    background: transparent;
    border-color: var(--maroon);
    color: var(--maroon);
}
.btn-outline:hover { background: var(--maroon); color: var(--cream); transform: translateY(-3px); }
.section-dark .btn-outline { border-color: var(--gold-light); color: var(--gold-light); }
.section-dark .btn-outline:hover { background: var(--gold-light); color: var(--maroon-darker); }
.btn-block { width: 100%; justify-content: center; }
.btn-sm { padding: 0.6rem 1.4rem; font-size: 0.85rem; }

/* =========================================================
   Announcement bar
   ========================================================= */
.announce-bar {
    background: var(--gold-light);
    color: var(--maroon-darker);
    font-size: 0.90rem;
    letter-spacing: 0.03em;
    position: relative;
    z-index: 1;
}
/* The header's sticky positioning traps the mobile menu panel's z-index inside its
   own stacking context, so the announce bar can still end up painted — and hit-tested
   — above part of the open panel despite its lower z-index (visibility:hidden takes
   it out of both paint order and hit-testing, not just clicks, so the rate ticker
   can't show through the panel's own links either). js/main.js toggles this class
   on nav-toggle click. */
body.nav-menu-open .announce-bar { visibility: hidden; }
.announce-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    gap: 1rem;
    flex-wrap: nowrap;
}
/* Cleared so the announce bar's own left edge stays clear of the oversized navbar
   logo, which intentionally overlaps down into this bar (see .brand-logo below). */
@media (min-width: 641px) {
    .announce-bar .container { padding-left: 172px; }
}
.announce-rate {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.announce-rate-track {
    display: inline-flex;
    gap: 2.5rem;
    white-space: nowrap;
    animation: announce-marquee 24s linear infinite;
    /* No will-change here: it was promoting this element to its own compositor
       layer, which painted above the mobile menu panel regardless of the panel's
       explicit higher z-index — a scrolling rate ticker was eating taps meant for
       the nav links behind it. The animation itself doesn't need the hint. */
}
.announce-bar:hover .announce-rate-track { animation-play-state: paused; }
.announce-rate-track span { color: var(--maroon-darker); font-weight: 700; white-space: nowrap; }
@keyframes announce-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .announce-rate-track { animation: none; }
}
.announce-msg { opacity: 0.8; }

.rates-btn {
    flex: 0 0 auto;
    background: var(--maroon-darker);
    color: var(--gold-light);
    border: none;
    padding: 0.45rem 1.1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}
.rates-btn:hover { background: var(--maroon); transform: translateY(-2px); }

/* =========================================================
   Today's Rates modal card
   ========================================================= */
.rates-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 10, 17, 0.55);
    z-index: 900;
    align-items: center;
    justify-content: center;
    padding: 1.2rem;
}
.rates-modal-overlay.show { display: flex; }
.rates-modal-card {
    position: relative;
    background: var(--cream);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    max-width: 360px;
    padding: 2rem 1.6rem 1.6rem;
    max-height: 85vh;
    overflow-y: auto;
    animation: rates-modal-in 0.25s ease;
}
@keyframes rates-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.rates-modal-card h3 {
    font-family: 'Playfair Display', serif;
    color: var(--maroon-darker);
    font-size: 1.4rem;
    margin-bottom: 0.2rem;
}
.rates-modal-date {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
}
.rates-modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--cream-alt);
    color: var(--maroon-darker);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}
.rates-modal-close:hover { background: var(--gold-pale); }
.rates-modal-group { margin-bottom: 1.2rem; }
.rates-modal-group:last-of-type { margin-bottom: 0.8rem; }
.rates-modal-label {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--gold-deep);
    margin-bottom: 0.5rem;
}
.rates-modal-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.5rem 0;
    border-bottom: 1px dashed var(--cream-deep);
    color: var(--maroon-dark);
    transition: background 0.25s ease, padding-left 0.25s ease;
}
.rates-modal-row:hover { background: rgba(201, 169, 110, 0.1); padding-left: 6px; }
.rates-modal-row:last-child { border-bottom: none; }
.rates-modal-row strong { font-size: 1rem; color: var(--maroon-darker); }
.rates-modal-row strong em { font-style: normal; font-weight: 400; font-size: 0.78rem; color: var(--text-muted); }
.rates-modal-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

/* =========================================================
   Navbar
   ========================================================= */
/* z-index is above .nav-overlay (540) and .nav-links.mobile-open (550): this element
   establishes its own stacking context (position + z-index), which traps its
   descendants' z-index values inside it for comparisons against anything OUTSIDE
   it — so .nav-links.mobile-open's 550 only ranked it against its own siblings
   here, not against .nav-overlay, which sits as a separate element later in the
   DOM. With this at only 500, the whole header (mobile menu included) painted
   and hit-tested BELOW the overlay, so taps meant for a menu link actually landed
   on the overlay, which just closes the menu instead of navigating. */
.site-header-sticky {
    position: sticky;
    top: 0;
    z-index: 560;
}
.navbar {
    background: rgba(42, 20, 36, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 106, 0.15);
}
.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0;
    flex-wrap: wrap;
    row-gap: 0.5rem;
}
/* .brand's height is back to the navbar's original (88px) so the bar itself never
   changes size. The logo is oversized relative to that and deliberately overlaps
   down into the gold announce bar below (see .announce-bar .container padding-left,
   which clears that bar's own text out of the way) — a floating-badge treatment,
   not a layout bug. top is biased (not centered) so it never crosses above the
   page's very top edge, where it would actually get clipped by the viewport. */
.brand {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 168px;
    min-height: 88px;
}
.brand-mark,
.brand-logo,
.brand img { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.brand:hover .brand-mark,
.brand:hover .brand-logo,
.brand:hover img { transform: scale(1.06) rotate(-3deg); }
.brand-name { transition: color 0.3s ease; }
.brand:hover .brand-name { color: var(--cream); }
.brand-mark,
.brand-logo,
.brand img {
    position: absolute;
    left: 0;
    top: -40px;
    width: 180px;
    height: 180px;
}
.brand-logo, .brand img { filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.4)); }
.brand-mark {
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--maroon-darker);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 2.5rem;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35), 0 10px 22px rgba(0, 0, 0, 0.4);
}

/* Logo image sizing (actual image uses .brand-logo) */
.brand-logo, .brand img {
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.95rem;
    font-weight: 700;
    color: var(--gold-light);
    letter-spacing: 0.02em;
}
.brand-tag {
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-light);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2.2rem;
}
.nav-links a {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--cream);
    position: relative;
    padding: 0.25rem 0;
    transition: var(--transition);
}
.nav-links a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -4px;
    width: 0; height: 2px;
    background: var(--gold-light);
    transition: width 0.3s ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold-light); }
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }

.nav-actions { display: flex; align-items: center; gap: 1rem; }
.nav-call {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    color: var(--cream);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    z-index: 600;
}
.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--gold-light);
    transition: var(--transition);
}
.nav-toggle:hover span { background: var(--cream); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Breakpoint is wider than the usual 1024px tablet cutoff: at 1025-1280px the full
   desktop nav (brand + 5 links + call-to-action) no longer fits the container width
   and wraps onto a second row, so the mobile menu takes over earlier than usual. */
@media (max-width: 1300px) {
    .nav-links, .nav-call { display: none; }
    .nav-toggle { display: flex; }
    /* On narrow phones the brand block and the "Book Appointment" + hamburger group
       don't fit on one navbar row and wrap onto a second, and how tall that wrapped
       header ends up varies by device/font rendering — too unpredictable to pad the
       panel around. Instead, once the menu is open, the toggle (still needed as the
       close button) detaches from the navbar's flow entirely and pins to a fixed
       corner, so the panel only ever has to clear that one known, constant position. */
    .nav-toggle.open {
        position: fixed;
        top: 1.3rem;
        right: 5%;
    }
    .nav-links.mobile-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0; right: 0;
        height: 100vh;
        width: 78%;
        max-width: 320px;
        background: var(--maroon-darker);
        padding: 6.5rem 2rem 2rem;
        gap: 1.8rem;
        box-shadow: -10px 0 40px rgba(0,0,0,0.15);
        z-index: 550;
    }
    .brand { padding-left: 120px; min-height: 76px; }
    .brand-logo, .brand img, .brand-mark {
        top: -18px;
        width: 130px;
        height: 130px;
    }
    .announce-bar .container { padding-left: 130px; }
}
@media (max-width: 640px) {
    .brand { padding-left: 76px; min-height: 64px; }
    .brand-logo, .brand img, .brand-mark {
        top: 0;
        width: 64px;
        height: 64px;
    }
    .brand-name { font-size: 1.1rem; }
    .brand-tag { font-size: 0.66rem; }
    .announce-bar .container { padding-left: 0; }
}

/* Slightly reduce brand name to fit shorter navbar */
.brand-name { font-size: 1.7rem; }

/* =========================================================
   Hero v3 — immersive editorial breakout composition
   The visual is a full-bleed panel that overrides the .container constraint
   and spans the full section height; text sits in the left zone in normal
   flow. This is deliberately NOT a symmetric two-column grid.
   ========================================================= */
.hero-v3 {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(55% 65% at 82% 22%, rgba(201, 169, 110, 0.15), transparent 65%),
        radial-gradient(45% 55% at 12% 88%, rgba(201, 169, 110, 0.07), transparent 60%),
        linear-gradient(160deg, var(--maroon-darker) 0%, #241923 55%, var(--maroon-dark) 100%);
    color: var(--cream);
    padding: clamp(2.75rem, 6vw, 4rem) 0;
}
@media (min-width: 992px) {
    .hero-v3 {
        min-height: clamp(600px, 80vh, 860px);
        padding: 0;
        display: flex;
        align-items: center;
    }
}

/* Subtle grain so the gradient never reads flat */
.hero-v3-texture {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.05;
    mix-blend-mode: overlay;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Large, near-invisible logo watermark — positioned relative to the content
   container itself (not the whole section), so it is always centred behind
   the heading rather than pinned to the section's raw left edge. On desktop
   it's bounded to roughly the left half (where the image doesn't bleed);
   on mobile/tablet, where everything stacks, it centres on the full width
   of the (now full-width) content column. */
.hero-v3-logo-watermark {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    animation: heroV3FadeInWatermark 2.2s ease 0.3s forwards;
}
@media (min-width: 992px) {
    .hero-v3-logo-watermark { width: 58%; justify-content: flex-start; padding-left: 2%; }
}
.hero-v3-logo-watermark img {
    width: clamp(280px, 64vw, 440px);
    max-width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: screen;
    filter: blur(3px) drop-shadow(0 0 55px rgba(212, 175, 106, 0.2));
}
@media (min-width: 992px) {
    .hero-v3-logo-watermark img { width: clamp(380px, 34vw, 560px); }
}
@keyframes heroV3FadeInWatermark { to { opacity: 0.07; } }

.hero-v3-glow {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(38% 50% at 80% 45%, rgba(212, 175, 106, 0.22), transparent 70%);
    animation: heroV3FadeIn 1.6s ease 0.2s forwards;
    transition: transform 0.7s ease-out;
    will-change: transform;
}
@keyframes heroV3FadeIn { to { opacity: 1; } }

/* ---------- Visual: breaks out of the container, spans the full section ---------- */
.hero-v3-visual {
    position: relative;
    z-index: 3;
    margin: 0 0 2rem;
}
@media (min-width: 992px) {
    .hero-v3-visual {
        position: absolute;
        inset: 0 0 0 auto;
        width: 46%;
        margin: 0;
        /* Feather the whole left edge to transparent instead of clipping to a hard
           (even rounded) rectangle — lets the section's own dark gradient show
           through underneath so the photo appears to dissolve out of the
           background rather than sit in a separate panel next to it. */
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0.75) 34%, #000 52%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.25) 20%, rgba(0, 0, 0, 0.75) 34%, #000 52%);
    }
}
/* height (not min-height) below 992px: on mobile/tablet this element's own parent
   (.hero-v3-visual) has no definite height of its own, so height:100% here computes
   as indefinite too — which then cascades down through .hero-v3-media-zoom,
   .hero-v3-slides and .hero-v3-slide (all height:100%) and collapses the actual
   <img> to zero height, hiding the whole jewellery photo. Nothing inside this
   element is in normal flow (the slides/veil are all position:absolute), so a fixed
   height behaves identically to the old min-height while actually being definite
   enough for those descendants to resolve their own height:100% against. Desktop
   (min-width:992px below) never hits this: .hero-v3-visual becomes absolutely
   positioned with inset:0 there, which is itself a definite height. */
.hero-v3-visual-tilt {
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
}
@media (min-width: 992px) {
    /* Here .hero-v3-visual is absolutely positioned with inset:0 (see above), which
       gives it a genuinely definite height, so percentage height is safe again and
       lets this element (and the desktop-only visual panel) fill that full height. */
    .hero-v3-visual-tilt { height: 100%; }
}
.hero-v3-media-zoom {
    width: 100%;
    height: 100%;
}
.hero-v3-slides { position: relative; width: 100%; height: 100%; }
.hero-v3-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    overflow: hidden;
    transition: opacity 1.2s ease;
}
.hero-v3-slide.active { opacity: 1; z-index: 2; }
.hero-v3-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1);
}
.hero-v3-slide.active img {
    animation: heroV3ZoomIn 6s ease-out forwards;
}
@keyframes heroV3ZoomIn {
    from { transform: scale(1); }
    to   { transform: scale(1.1); }
}
.hero-v3-fallback {
    width: 50%;
    max-width: 260px;
    height: auto;
    position: absolute;
    inset: 0;
    margin: auto;
}
.hero-v3-visual-veil {
    position: absolute;
    inset: 0;
    z-index: 3;
    /* Long, soft wash that keeps darkening/tinting the visible part of the photo
       well past where the mask above has already faded it in, so the two curves
       overlap into one continuous reveal instead of a visible seam. */
    background:
        linear-gradient(90deg, rgba(36, 25, 35, 0.92) 0%, rgba(36, 25, 35, 0.62) 22%, rgba(36, 25, 35, 0.28) 42%, rgba(36, 25, 35, 0.08) 60%, transparent 78%),
        linear-gradient(180deg, rgba(36, 25, 35, 0.05), rgba(36, 25, 35, 0.3) 100%);
    pointer-events: none;
}

/* ---------- Feature icon row (under the CTAs) ---------- */
.hero-v3-features {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
    margin-top: 1.7rem;
    opacity: 0;
    transform: translateY(20px);
    animation: heroV3FadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.25s forwards;
}
.hero-v3-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(248, 242, 234, 0.82);
    transition: color 0.3s ease;
}
.hero-v3-feature:hover { color: var(--gold-light); }
.hero-v3-feature-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--gold-light);
    transition: transform 0.3s ease;
}
.hero-v3-feature:hover .hero-v3-feature-icon { transform: scale(1.15); }

/* ---------- Vertical slide indicator — far left edge of the whole section ----------
   Below 992px the visual/content stack vertically, so the indicator anchors to the
   top-left corner (over the image) to stay clear of the heading below it. At 992px+
   the indicator is tied to the same left-gutter formula as .container itself (rather
   than a viewport-relative clamp()), so its right edge can never drift into the
   content column regardless of viewport width — a fixed vw-based offset used to
   collide with the heading text across most laptop widths (~992-1400px). */
.hero-v3-indicator {
    position: absolute;
    z-index: 4;
    left: 1rem;
    top: 3rem;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    font-family: 'Playfair Display', serif;
    font-size: 0.8rem;
    opacity: 0;
    animation: heroV3FadeIn 1s ease 1.7s forwards;
}
@media (min-width: 992px) {
    .hero-v3-indicator {
        left: calc((100% - min(90%, 1240px)) / 2 - 2.5rem);
        top: 50%;
        transform: translateY(-50%);
    }
}
.hero-v3-indicator::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 1.4rem;
    bottom: 1.4rem;
    width: 1px;
    background: rgba(248, 242, 234, 0.18);
    transform: translateX(-50%);
    z-index: -1;
}
.hero-v3-indicator-num {
    color: rgba(248, 242, 234, 0.45);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: color 0.4s ease, font-weight 0.4s ease;
}
.hero-v3-indicator-num.active { color: var(--gold-light); font-weight: 700; }

/* ---------- Content ---------- */
.hero-v3-container { position: relative; z-index: 5; }
.hero-v3-content { position: relative; z-index: 1; max-width: 460px; }
.hero-v3-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1.1rem 0.5rem 0.9rem;
    border-radius: 999px;
    background: rgba(212, 175, 106, 0.08);
    border: 1px solid rgba(212, 175, 106, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 1.5rem;
    opacity: 0;
    transform: translateY(20px);
    animation: heroV3FadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s forwards;
}
.hero-v3-eyebrow-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold-light);
    box-shadow: 0 0 0 rgba(212, 175, 106, 0.5);
    animation: heroV3DotPulse 2.2s ease-in-out infinite;
}
@keyframes heroV3DotPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(212, 175, 106, 0.5); }
    50% { box-shadow: 0 0 0 5px rgba(212, 175, 106, 0); }
}
@keyframes heroV3FadeUp { to { opacity: 1; transform: translateY(0); } }

.hero-v3-title { margin-bottom: 0; }
.hero-v3-title-line,
.hero-v3-title em {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 4.4vw, 3.8rem);
    line-height: 1.06;
    letter-spacing: -0.01em;
    font-weight: 600;
    opacity: 0;
    transform: translateY(24px);
    animation: heroV3FadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-v3-title-line { color: var(--cream); animation-delay: 0.3s; }
.hero-v3-title em {
    font-style: italic;
    animation-delay: 0.45s;
    color: var(--gold-light);
    background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold-light) 35%, #fff6df 50%, var(--gold-light) 65%, var(--gold-deep) 100%);
    background-size: 220% auto;
    background-position: 0% 50%;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .hero-v3-title em {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        animation: heroV3FadeUp 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.45s forwards, heroV3TextShimmer 6s linear 1.3s infinite;
    }
}
@keyframes heroV3TextShimmer { to { background-position: -220% 50%; } }

.hero-v3-connector {
    display: block;
    width: 60px;
    height: 2px;
    margin: 1.3rem 0;
    background: linear-gradient(90deg, var(--gold-light), transparent);
    transform: scaleX(0);
    transform-origin: left center;
    animation: heroV3ConnectorDraw 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}
@keyframes heroV3ConnectorDraw { to { transform: scaleX(1); } }

.hero-v3-tagline {
    font-family: 'Cormorant Garamond', 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--gold-light);
    letter-spacing: 0.01em;
    margin-bottom: 0.7rem;
    opacity: 0;
    transform: translateY(20px);
    animation: heroV3FadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
}
.hero-v3-sub {
    color: rgba(248, 242, 234, 0.72);
    font-size: 0.96rem;
    line-height: 1.6;
    max-width: 400px;
    margin-bottom: 1.9rem;
    opacity: 0;
    transform: translateY(20px);
    animation: heroV3FadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.98s forwards;
}
.hero-v3-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    opacity: 0;
    transform: translateY(20px);
    animation: heroV3FadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.12s forwards;
}
.hero-v3-cta .btn { position: relative; overflow: hidden; letter-spacing: 0.03em; }
.hero-v3-cta .btn::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg);
    transition: left 0.65s ease;
}
.hero-v3-cta .btn:hover::after { left: 130%; }
.hero-v3-cta .btn-gold:hover { box-shadow: 0 0 0 1px rgba(212,175,106,0.4), 0 14px 34px rgba(201, 169, 110, 0.5); }
.hero-v3-btn-arrow { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.hero-v3-cta a:hover .hero-v3-btn-arrow { transform: translateX(4px); }
.hero-v3-cta .btn-outline {
    background: rgba(248, 242, 234, 0.04);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-color: rgba(212, 175, 106, 0.5);
    color: var(--gold-light);
}
.hero-v3-cta .btn-outline:hover {
    background: rgba(212, 175, 106, 0.12);
    border-color: var(--gold-light);
    color: var(--gold-light);
    box-shadow: 0 8px 26px rgba(212, 175, 106, 0.18);
}

@media (prefers-reduced-motion: reduce) {
    .hero-v3-logo-watermark,
    .hero-v3-glow,
    .hero-v3-slide img,
    .hero-v3-features,
    .hero-v3-eyebrow,
    .hero-v3-eyebrow-dot,
    .hero-v3-title-line,
    .hero-v3-title em,
    .hero-v3-connector,
    .hero-v3-tagline,
    .hero-v3-sub,
    .hero-v3-cta {
        animation: none !important;
        transition: none !important;
    }
    .hero-v3-slide img { transform: none !important; }
    .hero-v3-glow,
    .hero-v3-features,
    .hero-v3-eyebrow,
    .hero-v3-title-line,
    .hero-v3-title em,
    .hero-v3-tagline,
    .hero-v3-sub,
    .hero-v3-cta {
        opacity: 1 !important;
        transform: none !important;
    }
    .hero-v3-logo-watermark { opacity: 0.07 !important; }
    .hero-v3-connector { transform: scaleX(1) !important; }
}

/* Sub-page header banner (Collections / About / Contact) */
.page-banner {
    background: linear-gradient(155deg, var(--maroon-darker) 0%, var(--maroon-dark) 55%, var(--maroon) 100%);
    color: var(--cream);
    padding: 4.5rem 0 3.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 50% 0%, rgba(201, 169, 110,0.22), transparent 60%);
}
.page-banner .container { position: relative; z-index: 2; }
.page-banner .eyebrow { color: var(--gold-light); }
.page-banner h1 { color: var(--cream); font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0.8rem; }
.breadcrumb {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.86rem;
    color: rgba(248, 242, 234, 0.6);
}
.breadcrumb a { color: var(--gold-light); transition: color 0.3s ease; }
.breadcrumb a:hover { color: var(--cream); }

/* =========================================================
   Trust strip
   ========================================================= */
.trust-strip {
    background: var(--cream-alt);
    border-top: 1px solid rgba(74, 39, 67,0.08);
    border-bottom: 1px solid rgba(74, 39, 67,0.08);
}
.trust-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    padding: 2.2rem 0;
}
.trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    transition: transform 0.3s ease;
}
.trust-item:hover { transform: translateY(-4px); }
.trust-item .icon-circle { width: 46px; height: 46px; }
.trust-item span {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-dark);
    letter-spacing: 0.01em;
    transition: color 0.3s ease;
}
.trust-item:hover span { color: var(--gold-deep); }

/* =========================================================
   Icon circle (used everywhere placeholder icons appear)
   ========================================================= */
.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-pale), var(--gold-light) 60%, var(--gold));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 6px 16px rgba(163, 129, 76,0.25);
    transition: var(--transition);
}
.icon-circle svg { width: 55%; height: 55%; stroke: var(--maroon-dark); fill: none; stroke-width: 1.6; transition: var(--transition); }
.icon-circle.on-dark {
    background: linear-gradient(135deg, rgba(212, 175, 106,0.2), rgba(201, 169, 110,0.12));
    box-shadow: inset 0 0 0 1px rgba(212, 175, 106,0.35);
}
.icon-circle.on-dark svg { stroke: var(--gold-light); }
.icon-circle:hover { transform: scale(1.1) rotate(-6deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 10px 22px rgba(163, 129, 76,0.4); }
.icon-circle.on-dark:hover { box-shadow: inset 0 0 0 1px rgba(212, 175, 106,0.6), 0 10px 22px rgba(212, 175, 106,0.25); }

/* =========================================================
   Category grid (Home: Shop by Category)
   ========================================================= */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
}
.category-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.2rem 1.4rem;
    text-align: center;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid rgba(74, 39, 67,0.06);
}
.category-card:hover { transform: translateY(-8px); box-shadow: 0 20px 46px rgba(74, 39, 67,0.16); }
.category-thumb {
    width: 92px; height: 92px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, var(--gold-pale), var(--gold-light) 45%, var(--gold-deep) 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.55);
    transition: var(--transition);
}
.category-card:hover .category-thumb { transform: scale(1.08) rotate(-4deg); }
.category-thumb svg { width: 48%; height: 48%; stroke: var(--maroon-darker); fill: none; stroke-width: 1.5; }
.category-thumb img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.category-card h4 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.category-card p { font-size: 0.82rem; color: var(--text-muted); }

/* =========================================================
   Product / collection cards
   ========================================================= */
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}
.product-card {
    background: var(--white);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid rgba(74, 39, 67,0.06);
}
.product-card:hover { transform: translateY(-6px); box-shadow: 0 22px 48px rgba(74, 39, 67,0.18); }
.product-thumb {
    position: relative;
    aspect-ratio: 4 / 3.4;
    background:
        radial-gradient(circle at 25% 20%, rgba(255,255,255,0.5), transparent 45%),
        linear-gradient(135deg, var(--gold-pale), var(--gold-light) 45%, var(--gold-deep) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-thumb svg { width: 38%; height: 38%; stroke: var(--maroon-darker); fill: none; stroke-width: 1.4; opacity: 0.85; transition: transform 0.4s ease; }
.product-thumb img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.product-card:hover .product-thumb img { transform: scale(1.08); }
.product-card:hover .product-thumb svg { transform: scale(1.1) rotate(-4deg); }
.product-badge {
    position: absolute;
    top: 12px; left: 12px;
    background: var(--maroon-dark);
    color: var(--gold-light);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.7rem;
    border-radius: 9999px;
}
.product-info { padding: 1.3rem 1.4rem 1.5rem; }
.product-cat { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); font-weight: 600; }
.product-info h4 { font-size: 1.08rem; margin: 0.35rem 0 0.5rem; }
.product-info p { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1rem; }
.product-foot { display: flex; align-items: center; justify-content: flex-end; }
.product-link { font-size: 0.85rem; font-weight: 600; color: var(--maroon); display: inline-flex; align-items: center; gap: 0.3rem; transition: var(--transition); }
.product-link:hover { color: var(--gold-deep); transform: translateX(4px); }

/* Zoom affordance on product images (collections page) */
.product-thumb.has-zoom { cursor: zoom-in; }
.product-thumb.has-zoom::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(36, 25, 35, 0.28);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}
.product-thumb.has-zoom::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 44px; height: 44px;
    margin: -22px 0 0 -22px;
    border-radius: 50%;
    background: rgba(248, 242, 234, 0.95) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1424' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'%3E%3C/line%3E%3Cline x1='11' y1='8' x2='11' y2='14'%3E%3C/line%3E%3Cline x1='8' y1='11' x2='14' y2='11'%3E%3C/line%3E%3C/svg%3E") center/20px no-repeat;
    opacity: 0;
    transform: scale(0.7);
    transition: var(--transition);
    z-index: 2;
    pointer-events: none;
}
.product-thumb.has-zoom:hover::after { opacity: 1; }
.product-thumb.has-zoom:hover::before { opacity: 1; transform: scale(1); }

/* =========================================================
   Product image lightbox (Collections page)
   ========================================================= */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 10, 17, 0.88);
    z-index: 950;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.lightbox-overlay.show { display: flex; }
.lightbox-content {
    position: relative;
    max-width: min(92vw, 900px);
    max-height: 88vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: lightbox-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes lightbox-in {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}
.lightbox-image {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    background: var(--maroon-darker);
}
.lightbox-caption {
    margin-top: 1.1rem;
    color: var(--cream);
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    text-align: center;
    letter-spacing: 0.01em;
}
.lightbox-close {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(248, 242, 234, 0.3);
    background: rgba(42, 20, 36, 0.6);
    color: var(--cream);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: var(--transition);
}
.lightbox-close:hover { background: var(--gold); color: var(--maroon-darker); transform: rotate(90deg); }
@media (max-width: 640px) {
    .lightbox-overlay { padding: 1rem; }
    .lightbox-close { top: 0.8rem; right: 0.8rem; width: 40px; height: 40px; font-size: 1.35rem; }
    .lightbox-caption { font-size: 1rem; margin-top: 0.8rem; }
}

/* Filter tabs */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.7rem;
    margin-bottom: 3rem;
}
.filter-btn {
    font-family: 'Outfit', sans-serif;
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.6rem 1.4rem;
    border-radius: 9999px;
    border: 1px solid rgba(74, 39, 67,0.2);
    background: var(--white);
    color: var(--text-dark);
    cursor: pointer;
    transition: var(--transition);
}
.filter-btn:hover { border-color: var(--maroon); }
.filter-btn.active {
    background: var(--maroon);
    border-color: var(--maroon);
    color: var(--cream);
}

/* =========================================================
   Why choose us
   ========================================================= */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.2rem;
}
.feature-card {
    display: flex;
    gap: 1.1rem;
    align-items: flex-start;
    padding: 0.6rem;
    border-radius: var(--radius);
    transition: var(--transition);
}
.feature-card:hover { background: rgba(212, 175, 106, 0.06); transform: translateY(-4px); }
.feature-card h4 { font-size: 1.05rem; margin-bottom: 0.4rem; color: var(--gold-light); }
.feature-card p { font-size: 0.88rem; color: rgba(248, 242, 234,0.7); }

/* =========================================================
   Design gallery — center-focused infinite carousel
   ========================================================= */
.carousel-v2-section { overflow: hidden; }
.carousel-v2-stage {
    position: relative;
    height: 420px;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}
.carousel-v2-stage.dragging { cursor: grabbing; }
.carousel-v2-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 360px;
    margin: -180px 0 0 -130px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(36, 25, 35, 0.35);
    will-change: transform, opacity;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.7s ease, box-shadow 0.4s ease;
}
.carousel-v2-item.dragging-active { transition: none; }
.carousel-v2-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.carousel-v2-item.is-center {
    box-shadow: 0 35px 70px rgba(36, 25, 35, 0.45), 0 0 0 3px rgba(212, 175, 106, 0.55);
}
.carousel-v2-item:hover img { filter: brightness(1.08) saturate(1.05); }
.carousel-v2-item img { transition: filter 0.4s ease; }

.carousel-v2-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.7rem;
    margin-top: 2.4rem;
}
.carousel-v2-dot {
    /* Visual dot stays 9px (::after below); the button itself is enlarged to a
       proper touch target so it's easy to tap accurately on mobile. */
    width: 30px; height: 30px;
    border-radius: 50%;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}
.carousel-v2-dot::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 9px; height: 9px;
    margin: -4.5px 0 0 -4.5px;
    border-radius: 50%;
    background: rgba(74, 39, 67, 0.22);
    transition: var(--transition);
}
.carousel-v2-dot:hover::after { background: rgba(74, 39, 67, 0.4); }
.carousel-v2-dot.active::after {
    background: var(--gold);
    transform: scale(1.4);
}

@media (prefers-reduced-motion: reduce) {
    .carousel-v2-item { transition: opacity 0.3s ease, box-shadow 0.3s ease !important; }
}

@media (max-width: 1024px) {
    .carousel-v2-stage { height: 340px; }
    .carousel-v2-item { width: 210px; height: 290px; margin: -145px 0 0 -105px; }
}
@media (max-width: 640px) {
    .carousel-v2-stage { height: 260px; }
    .carousel-v2-item { width: 150px; height: 210px; margin: -105px 0 0 -75px; border-radius: 14px; }
}

/* =========================================================
   Testimonials
   ========================================================= */
.testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem;
}
.testi-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid rgba(74, 39, 67,0.06);
    transition: var(--transition);
}
.testi-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(74, 39, 67,0.16); border-color: rgba(201, 169, 110,0.3); }
.testi-stars { color: var(--gold); font-size: 0.9rem; margin-bottom: 0.9rem; letter-spacing: 0.15em; }
.testi-card p { font-size: 0.92rem; color: var(--text-dark); font-style: italic; margin-bottom: 1.3rem; }
.testi-person { display: flex; align-items: center; gap: 0.8rem; }
.testi-avatar {
    width: 42px; height: 42px; border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-light), var(--gold-deep));
    display: flex; align-items: center; justify-content: center;
    color: var(--maroon-darker); font-family: 'Playfair Display', serif; font-weight: 700;
}
.testi-name { font-size: 0.9rem; font-weight: 600; }
.testi-loc { font-size: 0.76rem; color: var(--text-muted); }

/* =========================================================
   CTA banner
   ========================================================= */
.cta-banner {
    background: linear-gradient(120deg, var(--gold-deep), var(--gold) 45%, var(--gold-light));
    color: var(--maroon-darker);
    border-radius: 20px;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    transition: var(--transition);
}
.cta-banner:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(163, 129, 76, 0.35); }
.cta-banner h3 { color: var(--maroon-darker); font-size: clamp(1.3rem, 4vw, 1.7rem); margin-bottom: 0.5rem; }
.cta-banner p { color: rgba(42, 20, 36,0.75); font-size: 0.95rem; }
.cta-banner .btn-outline { border-color: var(--maroon-darker); color: var(--maroon-darker); }
.cta-banner .btn-outline:hover { background: var(--maroon-darker); color: var(--gold-light); }
.cta-banner .btn { white-space: normal; text-align: center; }

/* =========================================================
   About page specifics
   ========================================================= */
.about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 3.5rem;
    align-items: center;
}
.about-photo {
    aspect-ratio: 4/5;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.4), transparent 40%),
        linear-gradient(150deg, var(--gold-pale), var(--gold-light) 50%, var(--gold-deep));
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow);
    position: relative;
}
.about-photo svg { width: 40%; height: 40%; stroke: var(--maroon-darker); fill: none; stroke-width: 1.3; opacity: 0.85; }
.about-photo::after {
    content: 'Photo placeholder';
    position: absolute;
    bottom: 14px; left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(42, 20, 36,0.55);
    background: rgba(255,255,255,0.5);
    padding: 0.3rem 0.8rem;
    border-radius: 9999px;
}
.about-photo.has-photo::after { display: none; }
.about-photo { overflow: hidden; }
.about-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.about-photo:hover img { transform: scale(1.06); }
.quote-photo { transition: transform 0.4s ease; }
.quote-photo:hover { transform: scale(1.05); }
.quote-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

.about-copy p { color: var(--text-muted); margin-bottom: 1.1rem; }

/* ---------------------------------------------------------
   Legal pages (Privacy / Terms / Refund policy)
   --------------------------------------------------------- */
.legal-content { max-width: 820px; margin: 0 auto; }
.legal-content .updated-note { font-size: 0.85rem; color: var(--text-muted); font-style: italic; margin-bottom: 2rem; }
.legal-content h2 { font-size: 1.4rem; margin: 2.2rem 0 1rem; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content h3 { font-size: 1.1rem; margin: 1.6rem 0 0.7rem; }
.legal-content p { color: var(--text-muted); margin-bottom: 1rem; }
.legal-content ul, .legal-content ol { color: var(--text-muted); margin: 0 0 1.2rem 1.3rem; }
.legal-content li { margin-bottom: 0.5rem; }
.legal-content a { color: var(--maroon); text-decoration: underline; text-underline-offset: 2px; }
.legal-content a:hover { color: var(--gold-deep); }

.timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    margin-top: 1rem;
}
.timeline-item {
    text-align: center;
    padding: 1.8rem 1.2rem;
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid rgba(74, 39, 67,0.06);
    transition: var(--transition);
}
.timeline-item:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(74, 39, 67,0.16); border-color: rgba(201, 169, 110,0.3); }
.timeline-year { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--maroon); margin-bottom: 0.4rem; transition: color 0.3s ease; }
.timeline-item:hover .timeline-year { color: var(--gold-deep); }
.timeline-item p { font-size: 0.85rem; color: var(--text-muted); }

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
}
.value-card {
    text-align: center;
    padding: 2rem 1.2rem;
    border-radius: var(--radius);
    transition: var(--transition);
}
.value-card:hover { transform: translateY(-6px); background: rgba(201, 169, 110, 0.07); }
.rate-card-price { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--maroon-dark); font-weight: 700; }
.rate-card-price span { font-family: inherit; font-size: 0.75rem; font-weight: 400; color: var(--text-muted); }

/* Founder quote */
.quote-block {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: 3rem;
    align-items: center;
}
.quote-photo {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, var(--gold-pale), var(--gold-light) 50%, var(--gold-deep));
    box-shadow: inset 0 0 0 4px rgba(255,255,255,0.4);
    display: flex; align-items: center; justify-content: center;
}
.quote-photo svg { width: 42%; height: 42%; stroke: var(--maroon-darker); fill: none; stroke-width: 1.4; }
.quote-block blockquote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.5rem;
    color: var(--gold-pale);
    margin-bottom: 1.2rem;
}
.quote-author { color: var(--gold-light); font-weight: 600; }
.quote-role { font-size: 0.82rem; color: rgba(248, 242, 234,0.6); }

/* =========================================================
   Contact page
   ========================================================= */
.contact-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 3rem;
}
.contact-info-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 1.6rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    box-shadow: var(--shadow);
    border: 1px solid rgba(74, 39, 67,0.06);
    margin-bottom: 1.2rem;
    transition: var(--transition);
}
.contact-info-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(74, 39, 67,0.16); border-color: rgba(201, 169, 110,0.3); }
.contact-info-card h4 { font-size: 1rem; margin-bottom: 0.3rem; }
.contact-info-card p, .contact-info-card a { font-size: 0.88rem; color: var(--text-muted); }
.contact-info-card a { transition: color 0.3s ease; }
.contact-info-card a:hover { color: var(--gold-deep); }

.contact-form {
    background: var(--white);
    border-radius: var(--radius);
    padding: 2.4rem;
    box-shadow: var(--shadow);
    border: 1px solid rgba(74, 39, 67,0.06);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.form-group { margin-bottom: 1.3rem; }
.form-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(74, 39, 67,0.18);
    background: var(--cream);
    font-family: 'Outfit', sans-serif;
    font-size: 0.92rem;
    color: var(--text-dark);
    transition: var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 110,0.18);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.8rem; text-align: center; }
.form-success {
    display: none;
    background: rgba(201, 169, 110,0.12);
    border: 1px solid rgba(201, 169, 110,0.4);
    color: var(--gold-deep);
    padding: 1rem 1.2rem;
    border-radius: 10px;
    font-size: 0.88rem;
    margin-bottom: 1.4rem;
}
.form-success.show { display: block; }

.map-embed {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid rgba(74, 39, 67,0.06);
    margin-top: 2.5rem;
}
.map-embed iframe { width: 100%; height: 360px; border: 0; display: block; }

.hours-list { list-style: none; }
.hours-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.2rem 0.6rem;
    font-size: 0.88rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed rgba(74, 39, 67,0.12);
}
.hours-list li:last-child { border-bottom: none; }
.hours-list span:last-child { color: var(--text-muted); }

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
    background: var(--maroon-darker);
    color: rgba(248, 242, 234,0.7);
    padding: 4.5rem 0 0;
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 2.5rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(248, 242, 234,0.1);
}
.footer-about .brand-name { color: var(--gold-light); font-size: 1.15rem; }
.footer-about p { font-size: 0.86rem; margin: 1rem 0 1.4rem; color: rgba(248, 242, 234,0.6); }
.footer-brand { display: flex; align-items: center; gap: 0.7rem; }
.footer-logo { height: 84px; width: auto; transition: transform 0.4s ease; }
.footer-brand:hover .footer-logo { transform: scale(1.06) rotate(-3deg); }
.footer-bis-logo { height: 44px; width: auto; margin: 1.1rem 0 1.4rem; display: block; transition: transform 0.3s ease; }
.footer-bis-logo:hover { transform: scale(1.05); }
.footer-socials { display: flex; gap: 0.9rem; }
.footer-socials a {
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(248, 242, 234,0.2);
    display: flex; align-items: center; justify-content: center;
    transition: var(--transition);
}
.footer-socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--maroon-darker); }
.footer-col h5 {
    font-family: 'Playfair Display', serif;
    color: var(--gold-light);
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
}
.footer-col ul li { margin-bottom: 0.7rem; }
.footer-col ul li a { font-size: 0.88rem; transition: var(--transition); }
.footer-col ul li a:hover { color: var(--gold-light); padding-left: 4px; }
.footer-link-btn {
    font: inherit;
    font-size: 0.88rem;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: var(--transition);
}
.footer-link-btn:hover { color: var(--gold-light); padding-left: 4px; }
.footer-contact li { display: flex; gap: 0.6rem; font-size: 0.88rem; margin-bottom: 0.9rem; align-items: flex-start; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem 0;
    font-size: 0.8rem;
    color: rgba(248, 242, 234,0.45);
    flex-wrap: wrap;
    gap: 0.8rem;
}
.footer-bottom a { color: rgba(248, 242, 234,0.6); transition: color 0.3s ease; }
.footer-tenure:hover { color: var(--gold-light); }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem; }
.footer-legal a:hover { color: var(--gold-light); }

/* Back to top */
.back-to-top {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--maroon);
    color: var(--gold-light);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 26px rgba(42, 20, 36,0.35);
    opacity: 0; visibility: hidden;
    transform: translateY(12px);
    transition: var(--transition);
    z-index: 400;
    border: none;
    cursor: pointer;
}
.back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--gold); color: var(--maroon-darker); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
    .hero-v3-content { max-width: 460px; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .testi-grid { grid-template-columns: repeat(2, 1fr); }
    .about-grid, .quote-block { grid-template-columns: 1fr; }
    .quote-photo { max-width: 220px; margin: 0 auto; }
    .timeline { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .trust-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
    .rates-btn { padding: 0.4rem 0.8rem; font-size: 0.75rem; }
    .hero-v3 { padding: 2.25rem 0 2.75rem; }
    .hero-v3-visual-tilt { height: 260px; }
    .hero-v3-content { max-width: 100%; }
    .hero-v3-logo-watermark img { width: clamp(200px, 62vw, 300px); }
    .hero-v3-features { gap: 1.1rem; margin-top: 1.4rem; }
    .hero-v3-feature { font-size: 0.68rem; }
    .category-grid, .product-grid, .feature-grid, .testi-grid, .values-grid, .timeline { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .cta-banner { flex-direction: column; text-align: center; }
    .footer-grid { grid-template-columns: 1fr; }
    /* Extra bottom clearance: .back-to-top is fixed 24px from the viewport's bottom-
       right corner (46px tall), and on narrow screens the centered, wrapping legal
       links can land their last item (Admin) right in that corner once scrolled to
       the true page bottom, making it hard to tap without hitting the button instead. */
    .footer-bottom { flex-direction: column; text-align: center; padding-bottom: 4.5rem; }
    .trust-grid { grid-template-columns: repeat(2, 1fr); }
    .section { padding: 3.5rem 0; }
}
@media (max-width: 480px) {
    .trust-grid { grid-template-columns: 1fr; }
    .btn { padding: 0.85rem 1.6rem; font-size: 0.92rem; }
    .cta-banner { padding: 2rem 1.5rem; }
    .contact-info-card, .contact-form { padding: 1.4rem; }
    .value-card, .timeline-item { padding: 1.5rem 1rem; }
    .category-card { padding: 1.6rem 1rem; }
    .testi-card { padding: 1.5rem; }
    .filter-btn { padding: 0.75rem 1.3rem; }
}


@media (max-height: 480px) and (orientation: landscape) {
    .hero-v3 { min-height: auto; padding: 1.75rem 0; }
    .hero-v3-visual-tilt { height: 200px; }
    .map-embed iframe { height: 240px; }
}

/* Overlay behind mobile menu */
.nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(42, 20, 36,0.5);
    z-index: 540;
}
.nav-overlay.show { display: block; }