/*
 * Antiques & Coins Exchange — Custom Theme v2.0
 * Palette: Dark #1A1208  |  Gold #C9A84C  |  Ivory #F5F0E8
 * Fonts:   Cinzel (headings)  |  EB Garamond (editorial)  |  Lato (UI)
 * Header:  CSS Grid 1fr auto 1fr — centered logo, Sotheby's split-nav pattern
 */

/* ============================================================
   1. GOOGLE FONTS
   Loaded via <link> in the layout head (faster: no CSS @import
   chain — HTML → fonts CSS → woff2 instead of three round trips).
   Weights in use: Cinzel 600/700 · EB Garamond 400/400i · Lato 400/700.
   ============================================================ */

/* ============================================================
   2. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
    --ac-dark:       #1A1208;
    --ac-dark-alt:   #231810;
    --ac-gold:       #C9A84C;
    --ac-gold-lt:    #E0C47A;
    --ac-gold-dk:    #A88830;
    --ac-ivory:      #F5F0E8;
    --ac-ivory-dk:   #EAE3D5;
    --ac-text-dk:    #2C1D0E;
    --ac-radius:     3px;
    --ac-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ac-transition: .22s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   3. BASE RESET & TYPOGRAPHY
   ============================================================ */
html {
    /* Reserve the scrollbar lane permanently so scroll-locking (intro
       curtain, drawers) never shifts the page sideways. */
    scrollbar-gutter: stable;
}

body {
    font-family: 'Lato', sans-serif;
    background-color: var(--ac-ivory);
    color: var(--ac-text-dk);
    overflow-x: hidden;
}

#main {
    background: transparent !important;
    overflow-x: hidden;
}

h1, h2, h3, h4,
.font-serif, .font-dmserif {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.02em;
}

/* ============================================================
   4. HEADER — Dark theme overrides
   ============================================================ */

/* Layered plate: subtle vertical gradient + stacked shadows give the
   header physical depth; when stuck on scroll it turns to frosted
   glass so content visibly slides beneath it (body.ac-scrolled is
   set by ac-motion.js). */
header.sticky,
header[class*='sticky'] {
    /* The blend: gold warmth radiating from the logo corner, over a
       diagonal espresso → umber → brand-dark sweep. */
    background:
        radial-gradient(ellipse 560px 220% at 0% 50%, rgba(201,168,76,.13), transparent 62%),
        linear-gradient(125deg, #31210e 0%, #211507 34%, #281a0a 68%, var(--ac-dark) 100%) !important;
    box-shadow:
        0 1px 0 rgba(201,168,76,.16),
        0 18px 38px -18px rgba(0,0,0,.7) !important;
    transition: background-color .35s ease, box-shadow .35s ease;
}
body.ac-scrolled header.sticky,
body.ac-scrolled header[class*='sticky'] {
    /* Frosted glass keeps a whisper of the same warmth */
    background:
        radial-gradient(ellipse 560px 220% at 0% 50%, rgba(201,168,76,.09), transparent 62%),
        linear-gradient(125deg, rgba(43,29,12,.82), rgba(26,18,8,.78)) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
    box-shadow:
        0 1px 0 rgba(201,168,76,.28),
        0 24px 52px -18px rgba(0,0,0,.85) !important;
}

/* Remove Bagisto's white border */
header .border-b { border-bottom-color: transparent !important; }

/* Top info bar */
header > div:first-child {
    background: rgba(0,0,0,.22);
    border-bottom: 1px solid rgba(201,168,76,.1) !important;
}

/* Force all header text to ivory */
header a, header span { color: var(--ac-ivory) !important; }
header a:hover        { color: var(--ac-gold)   !important; }

/* Mobile nav dropdown panel has its own white background (see
   header/mobile/index.blade.php) — the ivory-on-dark rule above would make
   its text nearly invisible, so give it back dark text at higher specificity. */
header .ac-mob-menu-panel a,
header .ac-mob-menu-panel span { color: var(--ac-text-dk) !important; }
header .ac-mob-menu-panel a:hover { color: var(--ac-gold) !important; }

/* Shimmer in dark context */
.shimmer, [class*='shimmer'] {
    background: rgba(255,255,255,.07) !important;
    background-image: linear-gradient(
        to right,
        rgba(255,255,255,.07) 0%,
        rgba(255,255,255,.14) 30%,
        rgba(255,255,255,.07) 60%
    ) !important;
}

/* ============================================================
   5. AC HEADER BAR — CSS Grid 1fr auto 1fr
   ============================================================ */
.ac-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    min-height: 86px;
    width: 100%;
    padding: 0 52px;
    background: transparent; /* gradient/glass lives on <header> */
    position: relative;
}
/* Gold seam — a hairline that fades at both ends */
.ac-header-bar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg,
        transparent, rgba(201,168,76,.5) 18%, rgba(201,168,76,.5) 82%, transparent);
}
@media (max-width: 1180px) { .ac-header-bar { padding: 0 28px; } }

/* CENTRE: Logo */
.ac-header-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    padding: 0 2rem;
}
.ac-header-logo img {
    height: 54px;
    width: auto;
    object-fit: contain;
    display: block;
    transition: opacity var(--ac-transition);
}
.ac-header-logo:hover img { opacity: .8; }

/* LEFT: Navigation */
.ac-nav {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: nowrap;
}
.ac-nav__link {
    font-family: 'Lato', sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(245,240,232,.82) !important;
    padding: .5rem .7rem;
    text-decoration: none !important;
    white-space: nowrap;
    transition: color var(--ac-transition);
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    background: none;
    border: none;
    cursor: pointer;
    line-height: 1;
}
.ac-nav__link:hover { color: var(--ac-gold) !important; }
.ac-nav__caret {
    width: 9px; height: 9px;
    transition: transform var(--ac-transition);
    flex-shrink: 0;
    opacity: .65;
}
.ac-nav__item { position: relative; }
.ac-nav__item:hover .ac-nav__caret,
.ac-nav__item:focus-within .ac-nav__caret { transform: rotate(180deg); }

.ac-nav__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background: var(--ac-dark);
    border: 1px solid rgba(201,168,76,.28);
    border-radius: var(--ac-radius);
    min-width: 196px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    padding: .4rem 0;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    box-shadow: 0 18px 44px rgba(0,0,0,.5);
}
.ac-nav__item:hover .ac-nav__dropdown,
.ac-nav__item:focus-within .ac-nav__dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
}
.ac-nav__drop-item {
    display: block;
    padding: .52rem 1.1rem;
    font-family: 'Lato', sans-serif;
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(245,240,232,.7) !important;
    text-decoration: none !important;
    transition: background .14s, color .14s;
}
.ac-nav__drop-item:hover {
    background: rgba(201,168,76,.1);
    color: var(--ac-gold) !important;
}
.ac-nav__drop-divider { height:1px; background:rgba(201,168,76,.14); margin:.3rem 0; }

/* RIGHT: Search + Icons + CTA */
.ac-header-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .9rem;
}

/* ============================================================
   5b. TOP BAR — socials left, blended language select right.
   (Moved out of the header component: a @push('styles') there
   renders after the layout's stack and never reaches the page.)
   ============================================================ */

/* Hide Google Translate injected toolbar */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-ZVi9od-aZ2wEe-OiiCO { display: none !important; }
body.translated-ltr,
body.translated-rtl { top: 0 !important; margin-top: 0 !important; }

/* Top bar shell — the deepest layer of the header stack */
.ac-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: .35rem 52px;
    border-bottom: 1px solid rgba(201,168,76,.12);
    background: #120c04;
}
.ac-topbar-shimmer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: .5rem 52px;
    border-bottom: 1px solid rgba(201,168,76,.12);
    background: #120c04;
}
@media (max-width: 1180px) { .ac-topbar, .ac-topbar-shimmer { padding-left: 28px; padding-right: 28px; } }

/* Social icons (left) */
.ac-topbar__social { display: flex; align-items: center; gap: .2rem; }
.ac-topbar__social a {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    color: rgba(245,240,232,.42);
    transition: color .18s ease, background .18s ease, transform .18s ease;
}
.ac-topbar__social a:hover {
    color: var(--ac-gold);
    background: rgba(201,168,76,.12);
    transform: translateY(-1px);
}

/* Language selector — blended ghost style */
.ac-lang-wrap { display: inline-flex; align-items: center; }
.ac-lang-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .45rem center;
    border: 1px solid transparent;
    border-radius: 3px;
    color: rgba(245,240,232,.5);
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .26rem 1.5rem .26rem .55rem;
    transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.ac-lang-select:hover {
    border-color: rgba(201,168,76,.28);
    background-color: rgba(201,168,76,.07);
    color: var(--ac-gold);
}
.ac-lang-select:focus {
    outline: none;
    border-color: rgba(201,168,76,.5);
    color: var(--ac-gold);
}
.ac-lang-select option {
    background-color: #1A1208;
    color: #F5F0E8;
    font-family: 'Lato', sans-serif;
    font-size: .8rem;
    letter-spacing: 0;
    text-transform: none;
}

/* Header search is an icon link now (.ac-icon-link) — the catalogue
   page carries the search input. */

/* Vertical gold seam between CTA and the brand lockup */
.ac-header-divider {
    width: 1px; height: 36px; flex-shrink: 0;
    background: linear-gradient(180deg, transparent, rgba(201,168,76,.4), transparent);
    margin: 0 .35rem;
}

/* Icon buttons */
.ac-icon-link {
    color: rgba(245,240,232,.72) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: color var(--ac-transition);
    flex-shrink: 0;
    font-size: 1.35rem;
}
.ac-icon-link:hover { color: var(--ac-gold) !important; }
.ac-icon-link span  { color: inherit !important; }

/* Header CTA button */
.ac-btn-header {
    background: transparent;
    border: 1px solid rgba(201,168,76,.45);
    color: var(--ac-gold) !important;
    font-family: 'Lato', sans-serif;
    font-size: .69rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .44rem .95rem;
    border-radius: var(--ac-radius);
    text-decoration: none !important;
    transition: background var(--ac-transition), border-color var(--ac-transition), color var(--ac-transition);
    white-space: nowrap;
    display: inline-block;
    flex-shrink: 0;
    line-height: 1;
}
.ac-btn-header:hover {
    background: var(--ac-gold);
    border-color: var(--ac-gold);
    color: var(--ac-dark) !important;
}

/* ============================================================
   6. GLOBAL BUTTONS
   ============================================================ */
.ac-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .85rem 2rem;
    font-family: 'Cinzel', serif;
    font-size: .78rem; font-weight: 600; letter-spacing: .08em;
    text-transform: uppercase; border-radius: var(--ac-radius);
    text-decoration: none !important;
    transition: all var(--ac-transition);
    cursor: pointer; border: none; white-space: nowrap; line-height: 1;
}
.ac-btn--gold {
    background: var(--ac-gold); color: var(--ac-dark) !important;
    box-shadow: 0 4px 16px rgba(201,168,76,.26);
}
.ac-btn--gold:hover {
    background: var(--ac-gold-lt); transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201,168,76,.36);
}
.ac-btn--outline {
    background: transparent; border: 1.5px solid var(--ac-gold); color: var(--ac-gold) !important;
}
.ac-btn--outline:hover { background: var(--ac-gold); color: var(--ac-dark) !important; }
.ac-btn--outline-light {
    background: transparent; border: 1.5px solid rgba(245,240,232,.55); color: var(--ac-ivory) !important;
}
.ac-btn--outline-light:hover {
    background: rgba(245,240,232,.1); border-color: var(--ac-ivory);
}
.ac-btn--dark {
    background: var(--ac-dark); color: var(--ac-ivory) !important;
}
.ac-btn--dark:hover { background: rgba(26,18,8,.82); transform: translateY(-2px); }
.ac-btn--ghost {
    background: rgba(26,18,8,.12); border: 1.5px solid rgba(26,18,8,.28); color: var(--ac-dark) !important;
}
.ac-btn--ghost:hover { background: rgba(26,18,8,.22); }
.ac-btn--whatsapp { background: #25D366; color: #fff !important; }
.ac-btn--whatsapp:hover { background: #1fb957; transform: translateY(-2px); }
.ac-btn--lg  { padding: 1rem 2.4rem; font-size: .84rem; }
.ac-btn--xl  { padding: 1.15rem 2.8rem; font-size: .9rem; }
.ac-btn--sm  { padding: .52rem 1.2rem; font-size: .7rem; }

/* Bagisto primary button → gold */
.primary-button, button.primary-button, a.primary-button {
    background: var(--ac-gold) !important; border-color: var(--ac-gold) !important;
    color: var(--ac-dark) !important; font-family: 'Cinzel', serif !important;
    font-weight: 600 !important; letter-spacing: .06em !important;
}
.primary-button:hover { background: var(--ac-gold-lt) !important; }

/* ============================================================
   7. SECTION UTILITIES
   ============================================================ */
.ac-section          { padding: 5rem 0; }
.ac-section--sm      { padding: 3rem 0; }
.ac-section--dark     { background: var(--ac-dark); }
.ac-section--charcoal { background: var(--ac-dark-alt); }
.ac-section--ivory    { background: var(--ac-ivory); }
.ac-section--white    { background: #fff; }
.ac-container { max-width: 1360px; margin: 0 auto; padding: 0 2rem; }
.ac-section__pre {
    font-family: 'Lato', sans-serif; font-size: .72rem; letter-spacing: .22em;
    text-transform: uppercase; color: var(--ac-gold); margin: 0 0 .5rem; display: block;
}
.ac-section__title {
    font-family: 'Cinzel', serif; font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: 700; margin: 0 0 .9rem; line-height: 1.18; letter-spacing: .02em;
}
.ac-section__sub {
    font-family: 'EB Garamond', serif; font-size: 1.06rem; color: #6a5040;
    max-width: 560px; margin: 0 auto 2.5rem; line-height: 1.78;
}
.ac-section__header--center { text-align: center; }
.ac-section__header--center .ac-section__sub { margin: 0 auto 2.5rem; }
.text-gold        { color: var(--ac-gold)  !important; }
.text-ivory       { color: var(--ac-ivory) !important; }
.text-ivory-muted { color: rgba(245,240,232,.58) !important; }
.text-dark        { color: var(--ac-dark)  !important; }

/* ============================================================
   8. HERO SECTION
   ============================================================ */
.ac-hero {
    position: relative; height: 100vh; min-height: 580px;
    overflow: hidden; display: flex; align-items: flex-end; justify-content: center;
}
.ac-hero__video, .ac-hero__image {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.ac-hero__overlay {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(
        to bottom,
        rgba(26,18,8,.42) 0%,
        rgba(26,18,8,.66) 50%,
        rgba(26,18,8,.92) 100%
    );
}
.ac-hero__content {
    position: relative; z-index: 2; text-align: center;
    padding: 0 1.5rem clamp(3.5rem, 8vh, 6rem);
    max-width: 880px;
    margin-bottom: 110px;
}
.ac-hero__title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2.9rem, 6.6vw, 5.2rem);
    font-weight: 700; color: var(--ac-ivory);
    line-height: 1.14; letter-spacing: .02em;
    margin: 0 0 1rem;
    text-shadow: 0 2px 30px rgba(0,0,0,.55);
}
.ac-hero__sub {
    font-family: 'EB Garamond', serif;
    font-size: clamp(1.2rem, 2.4vw, 1.55rem);
    font-style: italic; color: rgba(245,240,232,.8);
    line-height: 1.65; margin: 0 0 2.2rem;
}
/* In an italic line, emphasis flips to roman — italic <em> is invisible */
.ac-hero__sub em { font-style: normal; }
/* Let the subtitle wrap naturally on narrow screens */
@media (max-width: 480px) { .ac-hero__sub br { display: none; } }
.ac-hero__actions {
    display: flex; align-items: center; justify-content: center;
    gap: 1rem; flex-wrap: wrap;
}
.ac-hero__scroll {
    position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
    z-index: 3; display: flex; flex-direction: column; align-items: center; gap: .4rem;
    color: rgba(245,240,232,.55); font-family:'Lato',sans-serif;
    font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
}
.ac-hero__scroll-line {
    width: 1px; height: 28px;
    background: linear-gradient(to bottom, rgba(201,168,76,.55), transparent);
    animation: scrollPulse 1.8s ease-in-out infinite;
}
@keyframes scrollPulse {
    0%, 100% { opacity: .35; }
    50%       { opacity: 1; }
}

/* ============================================================
   9. GOLD MARQUEE TICKER
   ============================================================ */
.ac-marquee { background: var(--ac-gold); overflow: hidden; padding: .65rem 0; user-select: none; }
.ac-marquee__track {
    display: flex; align-items: center; gap: 0;
    animation: marqueeScroll 45s linear infinite;
    white-space: nowrap; width: max-content;
}
.ac-marquee__item {
    font-family: 'Cinzel', serif; font-size: .7rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ac-dark);
    padding: 0 2rem;
}
.ac-marquee__dot { color: rgba(26,18,8,.38); font-size: .5rem; flex-shrink: 0; }
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ac-marquee__track { animation: none; } }

/* ============================================================
   10. CATEGORY GRID
   ============================================================ */
.ac-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}
/* A lone trailing card in the final row spans full width as a featured entry */
.ac-categories-grid > *:last-child:nth-child(3n+1) {
    grid-column: 1 / -1;
    aspect-ratio: 21 / 8;
}
@media (max-width: 900px)  { .ac-categories-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .ac-categories-grid > *:last-child:nth-child(3n+1) { grid-column: auto; aspect-ratio: 4/3; } }
@media (max-width: 480px)  { .ac-categories-grid { grid-template-columns: 1fr; } }

.ac-cat-card {
    position: relative; display: block;
    border-radius: 4px; overflow: hidden; aspect-ratio: 4/3;
    background: var(--ac-dark-alt); transition: transform .35s var(--ac-ease);
}
.ac-cat-card::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 24px 52px rgba(0,0,0,.45);
    opacity: 0; transition: opacity .35s var(--ac-ease);
    pointer-events: none;
}
.ac-cat-card:hover { transform: translateY(-5px); }
.ac-cat-card:hover::after { opacity: 1; }
.ac-cat-card__link { position: absolute; inset: 0; display: block; text-decoration: none !important; z-index: 0; }
.ac-cat-card__image-wrap { position: absolute; inset: 0; overflow: hidden; }
.ac-cat-card__image {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 1.1s var(--ac-ease), filter 1.1s var(--ac-ease);
}
.ac-cat-card:hover .ac-cat-card__image { transform: scale(1.06); filter: brightness(1.1) saturate(1.05); }
.ac-cat-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(26,18,8,.8) 0%,
        rgba(26,18,8,.68) 14%,
        rgba(26,18,8,.52) 28%,
        rgba(26,18,8,.34) 44%,
        rgba(26,18,8,.19) 60%,
        rgba(26,18,8,.08) 76%,
        rgba(26,18,8,.02) 90%,
        transparent 100%
    );
    z-index: 1;
}
/* A darker layer, visible by default, that fades out smoothly on hover to
   reveal the lighter base gradient and let the image read through more clearly.
   Animating opacity (rather than the gradient stops directly) is what keeps
   the fade smooth in every browser. */
.ac-cat-card__overlay::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(26,18,8,.95) 0%,
        rgba(26,18,8,.87) 14%,
        rgba(26,18,8,.72) 28%,
        rgba(26,18,8,.53) 44%,
        rgba(26,18,8,.34) 60%,
        rgba(26,18,8,.17) 76%,
        rgba(26,18,8,.05) 90%,
        transparent 100%
    );
    opacity: 1;
    transition: opacity .9s var(--ac-ease);
}
/* On hover, ease the shadow back so the brighter image reads through more clearly */
.ac-cat-card:hover .ac-cat-card__overlay::after { opacity: 0; }
.ac-cat-card__body {
    position: absolute; top: 0; left: 0; right: 0;
    z-index: 2; padding: 1.6rem 1.5rem 1.4rem;
}
.ac-cat-card__name {
    font-family: 'Cinzel', serif; font-size: 1.3rem; font-weight: 700;
    color: var(--ac-ivory); letter-spacing: .03em; margin: 0 0 .5rem; line-height: 1.25;
    text-shadow: 0 2px 14px rgba(0,0,0,.6);
}
.ac-cat-card__items {
    font-family: 'Lato', sans-serif; font-size: .92rem; line-height: 1.55;
    color: rgba(245,240,232,.78); margin: 0 0 .7rem;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 1px 10px rgba(0,0,0,.55);
}
.ac-cat-card__browse {
    font-family: 'Lato', sans-serif; font-size: .82rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ac-gold); margin: 0;
    transition: letter-spacing var(--ac-transition);
}
.ac-cat-card:hover .ac-cat-card__browse { letter-spacing: .16em; }

.ac-cat-card__upload-btn {
    position: absolute; bottom: .7rem; right: .7rem; z-index: 3;
    display: flex; align-items: center; gap: .35rem;
    font-family: 'Lato', sans-serif; font-size: .65rem; letter-spacing: .04em;
    color: var(--ac-ivory); background: rgba(26,18,8,.82);
    border: 1px solid rgba(201,168,76,.6); border-radius: 3px;
    padding: .35rem .6rem; cursor: pointer;
    transition: background .25s var(--ac-ease);
}
.ac-cat-card__upload-btn:hover { background: rgba(201,168,76,.9); color: var(--ac-dark); }

/* ============================================================
   11. APPRAISAL CTA SECTION
   ============================================================ */
.ac-appraisal-cta {
    position: relative; overflow: hidden;
    background: var(--ac-dark);
}
.ac-appraisal-cta__bg {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: .15;
}
.ac-appraisal-cta__inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 4rem; align-items: center;
    padding: 5rem 2rem; max-width: 1360px; margin: 0 auto;
}
@media (max-width: 860px) {
    .ac-appraisal-cta__inner { grid-template-columns: 1fr; }
    .ac-appraisal-cta__image { display: none; }
}
.ac-appraisal-cta__actions { display: flex; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.ac-appraisal-cta__image { border-radius: 4px; overflow: hidden; aspect-ratio: 4/3; }
.ac-appraisal-cta__image img {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 4px; border: 1px solid rgba(201,168,76,.18);
}

/* ============================================================
   12. HOW IT WORKS — STEPS
   ============================================================ */
.ac-steps-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem;
}
@media (max-width: 900px) { .ac-steps-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ac-steps-grid { grid-template-columns: 1fr; } }

.ac-step {
    text-align: center; padding: 2rem 1.2rem;
    border: 1px solid rgba(201,168,76,.15); border-radius: 4px;
    background: rgba(201,168,76,.03);
    transition: border-color var(--ac-transition), background var(--ac-transition);
}
.ac-step:hover { border-color: rgba(201,168,76,.38); background: rgba(201,168,76,.06); }
.ac-step__number {
    font-family: 'Cinzel', serif; font-size: 2.2rem; font-weight: 700;
    color: var(--ac-gold); opacity: .45; line-height: 1; margin-bottom: .9rem; display: block;
}
.ac-step__title {
    font-family: 'Cinzel', serif; font-size: .9rem; font-weight: 700;
    letter-spacing: .04em; margin: 0 0 .6rem; color: var(--ac-dark);
}
.ac-step__desc {
    font-family: 'EB Garamond', serif; font-size: .96rem;
    color: #6a5040; line-height: 1.72; margin: 0;
}

/* ============================================================
   13. STATS BAR
   ============================================================ */
.ac-stats-bar {
    background: var(--ac-dark);
    border-top: 1px solid rgba(201,168,76,.16);
    border-bottom: 1px solid rgba(201,168,76,.16);
    padding: 3.5rem 2rem;
}
.ac-stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 2rem; max-width: 1360px; margin: 0 auto; text-align: center;
}
@media (max-width: 700px) { .ac-stats-grid { grid-template-columns: repeat(2, 1fr); } }
.ac-stat__number {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 700; color: var(--ac-gold); display: block; line-height: 1; margin-bottom: .4rem;
}
.ac-stat__label {
    font-family: 'Lato', sans-serif; font-size: .7rem;
    letter-spacing: .15em; text-transform: uppercase; color: rgba(245,240,232,.55); display: block;
}

/* ============================================================
   14. TESTIMONIALS
   ============================================================ */
.ac-testimonials-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
@media (max-width: 900px) { .ac-testimonials-grid { grid-template-columns: 1fr; } }
.ac-testimonial {
    position: relative;
    background: rgba(201,168,76,.05); border: 1px solid rgba(201,168,76,.18);
    border-radius: 4px; padding: 1.8rem;
    transition: border-color var(--ac-transition);
}
.ac-testimonial::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    box-shadow: 0 18px 42px rgba(0,0,0,.42); opacity: 0; transition: opacity .35s ease;
}
.ac-testimonial:hover { border-color: rgba(201,168,76,.42); }
.ac-testimonial:hover::after { opacity: 1; }
.ac-testimonial__stars { color: var(--ac-gold); font-size: .95rem; letter-spacing: .08em; margin-bottom: .8rem; display: block; }
.ac-testimonial__quote {
    font-family: 'EB Garamond', serif; font-size: 1rem; font-style: italic;
    color: rgba(245,240,232,.76); line-height: 1.72; margin: 0 0 1.2rem; border: none; padding: 0;
}
.ac-testimonial__author {
    font-family: 'Lato', sans-serif; font-size: .76rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ac-gold); display: block;
}
.ac-testimonial__location { font-size: .7rem; color: rgba(245,240,232,.55); letter-spacing: .04em; }

/* ============================================================
   15. GALLERY STRIP
   ============================================================ */
.ac-gallery-strip {
    display: grid; grid-template-columns: repeat(5, 1fr);
    height: 320px; overflow: hidden;
}
@media (max-width: 700px) {
    .ac-gallery-strip { grid-template-columns: repeat(3, 1fr); height: 220px; }
}
.ac-gallery-item {
    position: relative; overflow: hidden; display: block; text-decoration: none !important;
}
.ac-gallery-item img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s var(--ac-ease);
}
.ac-gallery-item:hover img { transform: scale(1.06); }
.ac-gallery-item__overlay {
    position: absolute; inset: 0; background: rgba(26,18,8,.52);
    opacity: 0; transition: opacity .3s ease;
    display: flex; align-items: center; justify-content: center;
}
.ac-gallery-item:hover .ac-gallery-item__overlay { opacity: 1; }
.ac-gallery-item__overlay span {
    font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ac-ivory);
    border: 1px solid rgba(245,240,232,.45); padding: .35rem .85rem; border-radius: var(--ac-radius);
}

/* Gallery wipe-in: CSS animation replaces IntersectionObserver so the strip
   always shows. clip-path on an element causes IO.intersectionRatio = 0 in
   some browsers, which means threshold 0.12 is never reached and is-visible
   is never applied — hence the empty-space bug. */
@keyframes acGallerySlide {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}
html.ac-js .ac-gallery-item {
    animation: acGallerySlide 0.8s var(--ac-ease) both;
}
html.ac-js .ac-gallery-item:nth-child(1) { animation-delay: 0s; }
html.ac-js .ac-gallery-item:nth-child(2) { animation-delay: 0.11s; }
html.ac-js .ac-gallery-item:nth-child(3) { animation-delay: 0.22s; }
html.ac-js .ac-gallery-item:nth-child(4) { animation-delay: 0.33s; }
html.ac-js .ac-gallery-item:nth-child(5) { animation-delay: 0.44s; }
@media (prefers-reduced-motion: reduce) {
    html.ac-js .ac-gallery-item { animation: none; }
}

/* ============================================================
   16. CONTACT STRIP (gold bar CTA)
   ============================================================ */
.ac-contact-strip { background: var(--ac-gold); padding: 2.8rem 2rem; }
.ac-contact-strip__inner {
    max-width: 1360px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 2rem; flex-wrap: wrap;
}
.ac-contact-strip__title {
    font-family: 'Cinzel', serif; font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 700;
    color: var(--ac-dark); margin: 0 0 .2rem; letter-spacing: .02em;
}
.ac-contact-strip__sub {
    font-family: 'EB Garamond', serif; font-size: 1rem;
    color: rgba(26,18,8,.68); margin: 0; font-style: italic;
}
.ac-contact-strip__actions {
    display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; flex-shrink: 0;
}

/* ============================================================
   17. PRODUCT CAROUSELS — Bagisto override
   ============================================================ */
[class*='product-card'], .product-card {
    border: 1px solid rgba(201,168,76,.14) !important;
    border-radius: 4px !important;
    overflow: hidden;
}
.ac-carousel-section [class*='product-card'] {
    transition: transform .35s var(--ac-ease), border-color .35s ease !important;
    position: relative;
}
.ac-carousel-section [class*='product-card']:hover {
    transform: translateY(-5px) !important;
    border-color: rgba(201,168,76,.42) !important;
}

/* ============================================================
   18. SCROLL REVEALS (only transform + opacity — GPU-safe)
   Hidden states are scoped to html.ac-js (set by an inline
   script in the layout) so content is never lost without JS.
   --ac-d is the per-element stagger delay set by ac-motion.js.
   ============================================================ */
/* Uses the standalone `translate`/`scale` properties (NOT `transform`)
   so reveals compose with elements' own transforms — hover lifts,
   translateX centring etc. keep working during and after the reveal. */
html.ac-js .ac-reveal {
    opacity: 0; translate: 0 34px;
    transition: opacity .8s ease var(--ac-d, 0s), translate .8s var(--ac-ease) var(--ac-d, 0s);
}
html.ac-js .ac-reveal--left  { opacity:0; translate:-34px 0; transition:opacity .8s ease var(--ac-d,0s), translate .8s var(--ac-ease) var(--ac-d,0s); }
html.ac-js .ac-reveal--right { opacity:0; translate:34px 0;  transition:opacity .8s ease var(--ac-d,0s), translate .8s var(--ac-ease) var(--ac-d,0s); }
html.ac-js .ac-reveal--scale { opacity:0; scale:.95;         transition:opacity .8s ease var(--ac-d,0s), scale .8s var(--ac-ease) var(--ac-d,0s); }
html.ac-js .ac-reveal.is-visible,
html.ac-js .ac-reveal--left.is-visible,
html.ac-js .ac-reveal--right.is-visible {
    opacity: 1; translate: 0 0;
}
html.ac-js .ac-reveal--scale.is-visible { opacity: 1; scale: 1; }
/* Legacy fixed delays (still used by blade-coded --d1..d6) */
.ac-reveal--d1 { --ac-d: .08s; }
.ac-reveal--d2 { --ac-d: .18s; }
.ac-reveal--d3 { --ac-d: .28s; }
.ac-reveal--d4 { --ac-d: .38s; }
.ac-reveal--d5 { --ac-d: .48s; }
.ac-reveal--d6 { --ac-d: .58s; }

/* Cinematic clip-wipe reveal (gallery strip, imagery) */
html.ac-js .ac-reveal-clip {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s var(--ac-ease) var(--ac-d, 0s);
}
html.ac-js .ac-reveal-clip.is-visible { clip-path: inset(0 0 0 0); }

/* Masked line-rise (hero / display titles) */
.ac-line { display: block; overflow: hidden; }
.ac-line__in { display: inline-block; }

/* Bagisto's compiled app.css declares `* { font-family: Poppins }` —
   a DIRECT rule on every element, which beats fonts inherited from a
   styled ancestor. Restore inheritance on bare inline wrappers inside
   our components (hero title lines, emphasis, brand lockups). */
.ac-line, .ac-line__in,
.ac-hero__sub em,
.ac-header-logo__name em,
.ac-footer-brand__logo span {
    font-family: inherit;
}
html.ac-js .ac-reveal-lines .ac-line__in {
    transform: translateY(115%);
}
html.ac-js .ac-reveal-lines.is-visible .ac-line__in {
    animation: acLineUp 1.05s var(--ac-ease) forwards;
    animation-delay: calc(var(--ac-d, 0s) + var(--ac-line-d, 0s));
}
.ac-line:nth-child(2) .ac-line__in { --ac-line-d: .16s; }
.ac-line:nth-child(3) .ac-line__in { --ac-line-d: .32s; }
@keyframes acLineUp { to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    html.ac-js .ac-reveal, html.ac-js .ac-reveal--left, html.ac-js .ac-reveal--right,
    html.ac-js .ac-reveal--scale, html.ac-js .ac-reveal-clip,
    html.ac-js .ac-reveal-lines .ac-line__in {
        opacity: 1 !important; transform: none !important;
        translate: none !important; scale: none !important;
        transition: none !important; animation: none !important;
        clip-path: none !important;
    }
}

/* ============================================================
   19. SCROLL PROGRESS BAR
   ============================================================ */
#ac-scroll-progress {
    position: fixed; top: 0; left: 0; height: 2px;
    background: linear-gradient(90deg, var(--ac-gold-dk), var(--ac-gold), var(--ac-gold-lt));
    z-index: 9999; width: 0%; pointer-events: none; transition: width .05s linear;
}

/* ============================================================
   20. ATMOSPHERIC (no animation — zero GPU cost)
   ============================================================ */
body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background:
        radial-gradient(ellipse at 4% 92%, rgba(201,168,76,.05) 0%, transparent 38%),
        radial-gradient(ellipse at 96% 8%, rgba(201,168,76,.04) 0%, transparent 38%);
}

/* ============================================================
   21. FOOTER  (#ac-footer)
   ============================================================ */
#ac-footer {
    background: var(--ac-dark);
    border-top: 1px solid rgba(201,168,76,.2);
    color: var(--ac-ivory); font-family: 'Lato', sans-serif;
}
.ac-footer-top {
    display: grid; grid-template-columns: 1.4fr 1fr 1.1fr 1.2fr;
    gap: 2.5rem; padding: 4rem 2rem; max-width: 1360px; margin: 0 auto;
}
@media (max-width: 1100px) { .ac-footer-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (max-width: 560px)  { .ac-footer-top { grid-template-columns: 1fr; } }
.ac-footer-brand__logo {
    font-family: 'Cinzel', serif; font-size: 1.12rem; font-weight: 700;
    color: var(--ac-ivory) !important; text-decoration: none !important;
    letter-spacing: .04em; display: inline-block; margin-bottom: .85rem;
}
.ac-footer-brand__logo span { color: var(--ac-gold); }
.ac-footer-brand__tagline {
    font-family: 'EB Garamond', serif; font-size: .95rem;
    color: rgba(245,240,232,.48); line-height: 1.75; margin: 0 0 1.1rem; max-width: 276px;
}
.ac-footer-brand__badge {
    display: inline-flex; align-items: center; gap: .32rem; font-size: .68rem;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ac-gold);
    background: rgba(201,168,76,.07); border: 1px solid rgba(201,168,76,.18);
    border-radius: 2px; padding: .23rem .62rem; margin: 0 .28rem .28rem 0;
}
.ac-footer-col__heading {
    font-family: 'Cinzel', serif; font-size: .73rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; color: var(--ac-gold);
    margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid rgba(201,168,76,.16);
}
.ac-footer-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .45rem; }
.ac-footer-nav a {
    font-size: .82rem; color: rgba(245,240,232,.52) !important;
    text-decoration: none !important; transition: color var(--ac-transition); display: flex; align-items: center; gap: .4rem;
}
.ac-footer-nav a:hover { color: var(--ac-gold) !important; }
.ac-footer-contact-item {
    display: flex; align-items: flex-start; gap: .62rem; font-size: .83rem;
    color: rgba(245,240,232,.52); margin-bottom: .8rem; line-height: 1.55;
}
.ac-footer-contact-item svg { color: var(--ac-gold); flex-shrink: 0; margin-top: .13rem; }
.ac-footer-contact-item a { color: inherit !important; text-decoration: none !important; transition: color var(--ac-transition); }
.ac-footer-contact-item a:hover { color: var(--ac-gold) !important; }
.ac-footer-social { display: flex; gap: .65rem; margin-top: 1.2rem; }
.ac-footer-social a {
    width: 33px; height: 33px; border: 1px solid rgba(201,168,76,.2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: rgba(245,240,232,.52) !important; text-decoration: none !important;
    transition: border-color var(--ac-transition), color var(--ac-transition), background var(--ac-transition);
}
.ac-footer-social a:hover { border-color: var(--ac-gold); background: rgba(201,168,76,.1); color: var(--ac-gold) !important; }
.ac-footer-bottom {
    border-top: 1px solid rgba(201,168,76,.1); padding: 1.15rem 2rem;
    max-width: 1360px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
}
.ac-footer-bottom p { font-size: .73rem; color: rgba(245,240,232,.55); margin: 0; }
.ac-footer-bottom a { color: rgba(245,240,232,.55) !important; text-decoration: none !important; transition: color var(--ac-transition); }
.ac-footer-bottom a:hover { color: var(--ac-gold) !important; }
.ac-footer-bottom-links { display: flex; gap: 1.1rem; }

/* ============================================================
   22. INNER PAGES
   ============================================================ */
.ac-inner-hero {
    background: var(--ac-dark); padding: 4rem 2rem 3.5rem;
    text-align: center; border-bottom: 1px solid rgba(201,168,76,.16);
    position: relative; overflow: hidden;
}
.ac-inner-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(201,168,76,.07) 0%, transparent 55%),
                radial-gradient(ellipse at 70% 50%, rgba(201,168,76,.05) 0%, transparent 55%);
    pointer-events: none;
}
.ac-inner-hero__pre   { font-family:'Lato',sans-serif; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ac-gold); margin-bottom:.6rem; display:block; position:relative; }
.ac-inner-hero__title { font-family:'Cinzel',serif; font-size:clamp(1.8rem,4vw,3rem); font-weight:700; color:var(--ac-ivory); margin:0 0 .6rem; position:relative; }
.ac-inner-hero__sub   { font-family:'EB Garamond',serif; font-size:1.1rem; color:rgba(245,240,232,.6); max-width:540px; margin:0 auto; line-height:1.72; font-style:italic; position:relative; }

/* ============================================================
   23. FORMS
   ============================================================ */
.ac-form-label { display:block; font-family:'Lato',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ac-text-dk); margin-bottom:.36rem; }
.ac-form-input, .ac-form-select, .ac-form-textarea { width:100%; padding:.74rem 1rem; font-family:'EB Garamond',serif; font-size:1rem; border:1px solid var(--ac-ivory-dk); border-radius:var(--ac-radius); background:#fff; color:var(--ac-text-dk); transition:border-color var(--ac-transition); outline:none; appearance:none; }
.ac-form-input:focus, .ac-form-select:focus, .ac-form-textarea:focus { border-color:var(--ac-gold); box-shadow:0 0 0 3px rgba(201,168,76,.1); }
.ac-form-textarea { min-height:120px; resize:vertical; }
.ac-form-group { margin-bottom:1.2rem; }

/* ============================================================
   24. ACCESSIBILITY
   ============================================================ */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
:focus-visible { outline: 2px solid var(--ac-gold); outline-offset: 3px; }
.skip-to-main-content-link { position:absolute; top:-9999px; left:50%; transform:translateX(-50%); background:var(--ac-gold); color:var(--ac-dark); padding:.6rem 1.2rem; border-radius:0 0 4px 4px; font-family:'Cinzel',serif; font-size:.8rem; z-index:10000; text-decoration:none; }
.skip-to-main-content-link:focus { top:0; }

/* ============================================================
   25. SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--ac-ivory-dk); }
::-webkit-scrollbar-thumb { background:var(--ac-gold); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--ac-gold-lt); }

/* ============================================================
   26. INTRO CURTAIN  (#ac-intro — outside #app, removed by JS)
   First visit per session only. Two dark panels part like
   theatre curtains after the watch logo & ring present.
   ============================================================ */
#ac-intro {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    pointer-events: all;
}
#ac-intro[data-skip] { display: none; }
html:not(.ac-js) #ac-intro { display: none; }
body.ac-intro-lock { overflow: hidden; }
#ac-intro::before, #ac-intro::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 85%;
    background: var(--ac-dark);
    transition: transform .95s cubic-bezier(.77, 0, .18, 1);
    will-change: transform; /* pre-promoted: the curtain parts while the
                               page beneath is still rastering */
}
#ac-intro::before { left: 0; transform: translateX(-40%); }
#ac-intro::after  { right: 0; transform: translateX(40%); }
.ac-intro__inner {
    position: relative; z-index: 2; text-align: center;
    transition: opacity .45s ease, transform .45s ease;
    will-change: opacity, transform;
}
/* Keep animated glyph/image layers on the GPU at a stable raster scale —
   prevents the "sharpen snap" when a scale animation finishes. */
.ac-intro__logo, .ac-intro__word { will-change: transform, opacity; backface-visibility: hidden; }
/* All intro animations are transform/opacity ONLY (GPU-composited) —
   letter-spacing/width animations ran on the main thread and stuttered
   while the page loaded underneath. Animations start when ac-motion.js
   adds .ac-intro--play (after the logo image + Cinzel have loaded), so
   nothing pops in mid-show. */
.ac-intro__logo {
    width: clamp(390px, 52vw, 520px); height: auto; margin: 0 auto 1.5rem; display: block;
    opacity: 0;
    filter: drop-shadow(0 8px 38px rgba(201,168,76,.4));
}
#ac-intro.ac-intro--play .ac-intro__logo {
    animation: acIntroLogo 1.25s var(--ac-ease) .12s forwards;
}
.ac-intro__word {
    font-family: 'Cinzel', serif; font-size: clamp(1.15rem, 2.8vw, 1.6rem); font-weight: 700;
    letter-spacing: .42em; text-transform: uppercase; color: var(--ac-gold);
    text-indent: .42em; /* re-centres tracked uppercase (trailing space) */
    display: block; opacity: 0;
}
#ac-intro.ac-intro--play .ac-intro__word {
    animation: acIntroWord 1s var(--ac-ease) .55s forwards;
}
.ac-intro__rule {
    width: 260px; height: 1px; margin: .9rem auto 0;
    background: linear-gradient(90deg, transparent, var(--ac-gold), transparent);
    transform: scaleX(0);
}
#ac-intro.ac-intro--play .ac-intro__rule {
    animation: acIntroRule .9s var(--ac-ease) .75s forwards;
}
.ac-intro__tag {
    font-family: 'Lato', sans-serif; font-size: .7rem; font-weight: 700;
    letter-spacing: .3em; text-transform: uppercase; text-indent: .3em;
    color: rgba(245,240,232,.45); display: block; margin-top: .9rem;
    opacity: 0;
}
#ac-intro.ac-intro--play .ac-intro__tag {
    animation: acIntroTag .8s ease .95s forwards;
}
@keyframes acIntroLogo { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes acIntroWord { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes acIntroRule { to { transform: scaleX(1); } }
@keyframes acIntroTag  { from { opacity: 0; transform: scale(0.75); } to { opacity: 1; transform: scale(1); } }

/* Quick cut — repeat home visits ([data-quick] set by the skip-check):
   faster but still lets logo finish ~0.4s before the curtain opens. */
#ac-intro[data-quick] .ac-intro__logo { animation-duration: .45s; animation-delay: 0s; }
#ac-intro[data-quick] .ac-intro__word { animation-duration: .35s; animation-delay: .12s; }
#ac-intro[data-quick] .ac-intro__rule { animation-duration: .3s;  animation-delay: .2s; }
#ac-intro[data-quick] .ac-intro__tag  { animation-duration: .25s; animation-delay: .28s; }
#ac-intro.ac-intro--exit { pointer-events: none; }
#ac-intro.ac-intro--exit::before { transform: translateX(-101%); }
#ac-intro.ac-intro--exit::after  { transform: translateX(101%); }
#ac-intro.ac-intro--exit .ac-intro__inner { opacity: 0; transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) { #ac-intro { display: none; } }

/* ============================================================
   27. HEADER LOCKUP — pocket-watch mark + wordmark
   ============================================================ */
.ac-header-logo { gap: .85rem; }
.ac-header-logo__mark {
    height: 58px; width: auto; object-fit: contain; display: block;
    transition: height .3s var(--ac-ease), transform .3s var(--ac-ease);
    transform-origin: 50% 8%;   /* swings from the crown, like a chained watch */
}
.ac-header-logo:hover .ac-header-logo__mark { animation: acWatchSwing 1.6s var(--ac-ease); }
@keyframes acWatchSwing {
    0% { transform: rotate(0); } 22% { transform: rotate(7deg); }
    50% { transform: rotate(-5deg); } 76% { transform: rotate(2.5deg); }
    100% { transform: rotate(0); }
}
.ac-header-logo__text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; }

/* Left cluster — lockup, gold seam, then navigation */
.ac-header-left {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    min-width: 0;
}
.ac-header-left .ac-header-logo { padding: 0; }
.ac-header-logo__name {
    font-family: 'Cinzel', serif; font-size: 1.02rem; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: var(--ac-ivory) !important;
    white-space: nowrap;
}
.ac-header-logo__name em { font-style: italic; color: var(--ac-gold); }
.ac-header-logo__tag {
    font-family: 'Lato', sans-serif; font-size: .62rem; font-weight: 700;
    letter-spacing: .26em; text-transform: uppercase; color: rgba(201,168,76,.75) !important;
    margin-top: .38rem; white-space: nowrap;
}
.ac-header-logo:hover .ac-header-logo__name { color: var(--ac-ivory) !important; }

/* Header condense on scroll (body.ac-scrolled set by ac-motion.js) */
.ac-header-bar { transition: min-height .3s var(--ac-ease); }
body.ac-scrolled .ac-header-bar { min-height: 64px; }
body.ac-scrolled .ac-header-logo__mark { height: 42px; }
body.ac-scrolled .ac-header-logo__tag { display: none; }

/* ============================================================
   28. CINEMATIC HERO — Ken Burns, film grain, vignette
   ============================================================ */
/* NOTE: no transform animation on the video element itself — continuous
   non-integer rescaling of a 1080p video layer shimmers on integrated
   GPUs. The boomerang slow-mo provides the motion instead. */

/* Vignette — pulls the eye to centre like a graded film frame */
.ac-hero::before {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    box-shadow: inset 0 0 240px rgba(10, 6, 2, .62);
}
/* Film grain — SVG turbulence, static. Plain alpha compositing only:
   mix-blend-mode over a playing <video> forces per-frame blending and
   stutters on integrated GPUs. */
.ac-hero::after {
    content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    opacity: .05;
}
.ac-hero__content { will-change: transform, opacity; }

/* ============================================================
   29. WATCH WATERMARK — giant logo ghosted behind sections,
   rotated by scroll via [data-ac-rotate]
   ============================================================ */
.ac-has-watermark { position: relative; overflow: hidden; }
.ac-watermark {
    position: absolute; z-index: 0; pointer-events: none; user-select: none;
    width: clamp(360px, 38vw, 620px); height: auto;
    opacity: .055;
}
.ac-watermark--right { right: -8%; top: 50%; margin-top: -22%; }
.ac-watermark--left  { left: -9%;  top: 50%; margin-top: -20%; }
.ac-section--white .ac-watermark,
.ac-section--ivory .ac-watermark { opacity: .07; filter: saturate(1.4); }
.ac-has-watermark > .ac-container,
.ac-has-watermark > .ac-stats-grid { position: relative; z-index: 1; }

/* ============================================================
   30. MOBILE HEADER BAR — spacer | stacked logo | hamburger
   ============================================================ */
.ac-mobile-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
}
.ac-mobile-bar__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.ac-mobile-bar__right .icon-hamburger { color: var(--ac-gold) !important; }
.ac-mobile-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-decoration: none !important;
}
.ac-mobile-logo img { height: 46px; width: auto; display: block; }
.ac-mobile-logo .ac-header-logo__name { font-size: .8rem; letter-spacing: .12em; }

/* ── Drawer / mini-cart panels ──
   The slide-out panels are white but live INSIDE <header>, where the
   dark-theme rule `header a, header span { color: ivory !important }`
   made every link and icon ivory-on-white (unreadable). Restore dark
   text inside any white panel under the header. */
header .bg-white,
header .bg-white a,
header .bg-white span,
header .bg-white p,
header .bg-white i {
    color: var(--ac-text-dk) !important;
}
header .bg-white a:hover,
header .bg-white a:hover span {
    color: var(--ac-gold-dk) !important;
}
/* Drawer category links — give them the brand's label treatment */
header .bg-white .icon-cancel { font-size: 1.6rem; }

/* ============================================================
   31. GOLD RULE DRAW — under section titles when revealed
   ============================================================ */
.ac-section__header--center .ac-section__title::after {
    content: ''; display: block; width: 72px; height: 2px;
    margin: 1rem auto 0;
    background: linear-gradient(90deg, transparent, var(--ac-gold), transparent);
}
html.ac-js .ac-section__header--center .ac-section__title::after {
    transform: scaleX(0);
    transition: transform .9s var(--ac-ease) .4s;
}
html.ac-js .ac-section__header--center.is-visible .ac-section__title::after {
    transform: scaleX(1);
}

/* ============================================================
   32. PICTURE ELEMENT — normalize display for responsive image wrappers
   ============================================================ */
/* display:contents makes <picture> transparent to layout so the child <img>
   resolves width/height percentages directly against the containing block. */
.ac-cat-card__image-wrap picture,
.ac-gallery-item picture,
.ac-appraisal-cta__image picture,
.ac-referral-strip__img picture,
.ac-cat-intro-img picture { display: contents; }

/* ============================================================
   33. REFERRAL STRIP (home page)
   ============================================================ */
.ac-referral-strip { background: var(--ac-ivory, #f5f0e8) !important; padding: 5rem 0; }
.ac-referral-strip__inner { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: center; }
.ac-referral-strip__img { text-align: center; }
.ac-referral-strip__img img {
    max-width: 100%; height: auto;
    filter: drop-shadow(0 18px 36px rgba(101,72,38,.28)) drop-shadow(0 4px 10px rgba(101,72,38,.18));
}
.ac-referral-strip__blurb { font-family: 'EB Garamond', serif; font-size: 1.08rem; color: #4a3728; line-height: 1.75; margin: .8rem 0 1.4rem; }
.ac-referral-strip__steps { display: flex; flex-direction: column; gap: .9rem; }
.ac-referral-strip__step { display: flex; align-items: flex-start; gap: 1rem; }
.ac-referral-strip__num {
    flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%;
    background: var(--ac-gold, #c9a84c); color: #1a1208;
    font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; margin-top: .15rem;
}
.ac-referral-strip__step p { font-family: 'EB Garamond', serif; font-size: 1rem; color: #4a3728; margin: 0; line-height: 1.6; }
@media (max-width: 768px) {
    .ac-referral-strip__inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .ac-referral-strip__img { max-width: 300px; margin: 0 auto; }
}

/* ============================================================
   34. CATEGORY CONTENT PAGES (shared — all /category/* routes)
   ============================================================ */
.ac-page-hero{position:relative;min-height:400px;display:flex;align-items:center;background:var(--ac-dark);overflow:hidden}
.ac-page-hero__bg{position:absolute;inset:0;background-size:cover;background-position:center 40%;opacity:.28}
.ac-page-hero__overlay{position:absolute;inset:0;background:linear-gradient(to right,rgba(26,18,8,.95) 40%,rgba(26,18,8,.55) 100%)}
.ac-page-hero__content{position:relative;z-index:1;max-width:1360px;margin:0 auto;padding:5rem 1.5rem}
.ac-page-hero__pre{font-family:'Lato',sans-serif;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ac-gold);margin:0 0 .6rem}
.ac-page-hero__title{font-family:'Cinzel',serif;font-size:clamp(2rem,5vw,3.4rem);color:var(--ac-ivory);margin:0 0 .8rem;line-height:1.15}
.ac-page-hero__sub{font-family:'EB Garamond',serif;font-size:1.18rem;color:#c8b09a;max-width:580px;line-height:1.75;margin:0}
.ac-page-body{max-width:1360px;margin:0 auto;padding:0 1.5rem}
.ac-section-pre{font-family:'Lato',sans-serif;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ac-gold);margin:0 0 .5rem;display:block}
.ac-section-h2{font-family:'Cinzel',serif;font-size:clamp(1.5rem,3vw,2.3rem);color:var(--ac-dark);margin:0 0 1.1rem;line-height:1.25}
.ac-section-h2--ivory{color:var(--ac-ivory)}
.ac-body-p{font-family:'EB Garamond',serif;font-size:1.08rem;line-height:1.8;color:#3d2e1a;margin:0 0 1.1rem}
.ac-page-header-rule{text-align:center;margin-bottom:2.5rem}
.ac-cat-intro{padding:5rem 0}
.ac-cat-intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}
@media(max-width:860px){.ac-cat-intro-grid{grid-template-columns:1fr}}
.ac-cat-intro-img{border-radius:6px;overflow:hidden;aspect-ratio:4/3}
.ac-cat-intro-img img{width:100%;height:100%;object-fit:cover;display:block}
.ac-items-section{padding:5rem 0;background:var(--ac-ivory)}
.ac-items-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
@media(max-width:900px){.ac-items-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.ac-items-grid{grid-template-columns:1fr}}
.ac-item-chip{display:flex;align-items:center;gap:.7rem;padding:.9rem 1.1rem;background:#fff;border:1px solid rgba(201,168,76,.28);border-radius:4px;font-family:'EB Garamond',serif;font-size:1rem;color:var(--ac-dark);transition:border-color .2s,box-shadow .2s}
.ac-item-chip:hover{border-color:rgba(201,168,76,.6);box-shadow:0 2px 12px rgba(201,168,76,.1)}
.ac-item-chip svg{color:var(--ac-gold);flex-shrink:0}
.ac-spotlight-section{padding:5rem 0}
.ac-spotlight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media(max-width:900px){.ac-spotlight-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.ac-spotlight-grid{grid-template-columns:1fr}}
.ac-spotlight-card{border:1px solid var(--ac-ivory-dk,#e8dfc8);border-radius:6px;padding:1.8rem 1.6rem;background:#fff;transition:border-color .2s,box-shadow .2s}
.ac-spotlight-card:hover{border-color:rgba(201,168,76,.45);box-shadow:0 4px 18px rgba(201,168,76,.08)}
.ac-spotlight-card__era{font-family:'Lato',sans-serif;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ac-gold);margin:0 0 .4rem}
.ac-spotlight-card__name{font-family:'Cinzel',serif;font-size:1.05rem;color:var(--ac-dark);margin:0 0 .6rem}
.ac-spotlight-card__desc{font-family:'EB Garamond',serif;font-size:.97rem;color:#5a4a3a;line-height:1.65;margin:0 0 .8rem}
.ac-spotlight-card__value{font-family:'Lato',sans-serif;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ac-gold);padding:.28rem .65rem;border:1px solid rgba(201,168,76,.35);border-radius:2rem;display:inline-block}
.ac-value-section{padding:5rem 0;background:var(--ac-dark)}
.ac-value-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}
@media(max-width:700px){.ac-value-grid{grid-template-columns:1fr}}
.ac-value-card{border:1px solid rgba(201,168,76,.2);border-radius:6px;padding:1.8rem 1.6rem}
.ac-value-card__title{font-family:'Cinzel',serif;font-size:.95rem;color:var(--ac-gold);margin:0 0 .8rem}
.ac-value-card__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.ac-value-card__list li{font-family:'EB Garamond',serif;font-size:.97rem;color:#c8b09a;display:flex;align-items:baseline;gap:.65rem;line-height:1.55}
.ac-value-card__list li::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--ac-gold);flex-shrink:0;margin-top:.35rem}
.ac-cta-dark{background:var(--ac-dark);padding:5rem 0;text-align:center;border-top:1px solid rgba(201,168,76,.15)}
.ac-cta-dark__pre{font-family:'Lato',sans-serif;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ac-gold);display:block;margin-bottom:.6rem}
.ac-cta-dark__title{font-family:'Cinzel',serif;font-size:clamp(1.6rem,3.5vw,2.6rem);color:var(--ac-ivory);margin:0 0 1rem}
.ac-cta-dark__sub{font-family:'EB Garamond',serif;font-size:1.1rem;color:#a89070;max-width:620px;margin:0 auto 2rem;line-height:1.75}
.ac-cta-actions{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap}
.ac-wa-btn{display:inline-flex;align-items:center;gap:.55rem;background:#25D366;color:#fff !important;font-family:'Lato',sans-serif;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;padding:.75rem 1.6rem;border-radius:4px;text-decoration:none;font-weight:700;transition:opacity .2s}
.ac-wa-btn:hover{opacity:.88}
.ac-cat-context{padding:4rem 0;background:var(--ac-ivory)}
.ac-cat-context__inner{max-width:820px;margin:0 auto;text-align:center}