/*
 * Luxury themes (Admin → Design & Themes): loaded after style.css when a theme other than Classic is active,
 * followed by the theme's own file in assets/css/themes/. This file has three parts:
 *   1. every page: the shared components restyled from the theme's variables (header, buttons, page banners,
 *      cards, footer…), so inner pages take the theme's look without changes to their markup;
 *   2. the home page sections ("lx-", printed by includes/home/sections.php);
 *   3. the finishing details (motion, ornaments, glints, hover, grain…), each switched on by the theme;
 *   4. the ways to show the diamonds (shaped frames, spotlight, the rail, one shape in focus);
 *   5. film: full-screen pictures in motion (slow zoom, light sweep, slideshow, bands that drift on scroll).
 * A theme sets the --lx-* variables below (and the site's own --ink, --brand, --gold…, --font, --serif).
 */
:root {
    --lx-bg: #fff;
    --lx-text: #262422;
    --lx-muted: #6b6760;
    --lx-line: #e6e0d6;
    --lx-alt: #f6f3ee;
    --lx-surface: #fff;
    --lx-photo: #f4f1ec;
    --lx-link: var(--lx-text);
    --lx-label: #8a6d3b;
    --lx-accent: #1c1a1a;
    --lx-accent-text: #fff;
    --lx-accent-hover: #3a3735;
    --lx-dark: #141313;
    --lx-dark-text: #f4f1ec;
    --lx-dark-muted: #b9b4aa;
    --lx-dark-label: #c9b48a;
    --lx-dark-line: rgba(255, 255, 255, .14);
    --lx-header-bg: rgba(255, 255, 255, .96);
    --lx-header-text: #262422;
    --lx-header-line: var(--lx-line);
    --lx-hero-bg: var(--lx-alt);
    --lx-hero-text: var(--lx-text);
    --lx-hero-muted: var(--lx-muted);
    --lx-hero-label: var(--lx-label);
    --lx-footer-bg: var(--lx-dark);
    --lx-footer-text: var(--lx-dark-muted);
    --lx-footer-head: var(--lx-dark-text);
    --lx-stage: radial-gradient(circle at 50% 45%, #fff, var(--lx-alt) 70%);
    --lx-h-weight: 500;
    --lx-h-case: none;
    --lx-h-spacing: 0;
    --lx-h-scale: 1;
    --lx-label-spacing: .24em;
    --lx-nav-case: uppercase;
    --lx-nav-spacing: .14em;
    --lx-nav-size: .74rem;
    --lx-btn-radius: 0;
    --lx-btn-case: uppercase;
    --lx-btn-spacing: .16em;
    --lx-btn-size: .76rem;
    --lx-radius: 0;
    --lx-section: clamp(3.75rem, 7vw, 6.25rem);
    /* a fine paper grain; a theme uses it with --lx-grain: var(--lx-grain-paper) */
    --lx-grain-paper: 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ======================================================================== 1. Every page */
body { background: var(--lx-bg); color: var(--lx-text); }
h1, h2, h3, h4 { color: var(--lx-text); }
h1, h2 { font-weight: var(--lx-h-weight); text-transform: var(--lx-h-case); letter-spacing: var(--lx-h-spacing); }
.lead, .section-head p, .muted { color: var(--lx-muted); }
a { color: var(--lx-link); }
a:hover { color: var(--lx-text); }
:focus-visible { outline-color: var(--lx-label); }
.eyebrow { color: var(--lx-label); letter-spacing: var(--lx-label-spacing); font-weight: 500; }
.link-arrow { color: var(--lx-link); font-weight: 500; letter-spacing: .02em; }
.link-arrow:hover { color: var(--lx-label); }

/* Buttons: one primary style and one outline, as luxury houses use */
.btn, .btn-brand {
    border-radius: var(--lx-btn-radius);
    background: var(--lx-accent);
    border-color: var(--lx-accent);
    color: var(--lx-accent-text);
    font-size: var(--lx-btn-size);
    font-weight: 500;
    letter-spacing: var(--lx-btn-spacing);
    text-transform: var(--lx-btn-case);
}
.btn:hover, .btn-brand:hover { background: var(--lx-accent-hover); border-color: var(--lx-accent-hover); color: var(--lx-accent-text); transform: none; box-shadow: none; }
.btn-lg { padding: 1.05rem 2rem; font-size: var(--lx-btn-size); }
.btn-outline { background: transparent; border-color: currentColor; color: var(--lx-text); }
.btn-outline:hover { background: var(--lx-text); border-color: var(--lx-text); color: var(--lx-bg); }
.btn-light { background: var(--lx-dark-text); border-color: var(--lx-dark-text); color: var(--lx-dark); }
.btn-light:hover { background: transparent; border-color: var(--lx-dark-text); color: var(--lx-dark-text); }
.btn-ghost, .btn-ghost-light, .btn-ghost-dark { border-radius: var(--lx-btn-radius); }
.wa-btn, .wa-float, .wa-form .wa-btn { letter-spacing: normal; text-transform: none; font-size: 1rem; }

/* Announcement line and header */
.announce { background: var(--lx-dark); color: var(--lx-dark-text); font-size: .76rem; letter-spacing: .06em; }
.announce a { color: var(--lx-dark-label); }
.announce p > .icon { color: var(--lx-dark-label); }
.site-header { background: var(--lx-header-bg); border-bottom-color: var(--lx-header-line); }
.site-nav a:not(.btn), .nav-group-toggle {
    color: var(--lx-header-text);
    font-size: var(--lx-nav-size);
    font-weight: 500;
    letter-spacing: var(--lx-nav-spacing);
    text-transform: var(--lx-nav-case);
}
.site-nav a:not(.btn):hover, .site-nav a.active, .nav-group-toggle:hover, .nav-group-toggle.active { color: var(--lx-header-text); font-weight: 500; }
.site-nav a:not(.btn)::after, .nav-group-toggle::after { background: currentColor; }
.site-nav .btn { padding: .6rem 1.1rem; }
.nav-sub { border-radius: var(--lx-radius); border-color: var(--lx-line); }
.nav-sub a, .nav-sub strong { text-transform: none; letter-spacing: normal; }
.locale-switch summary { color: var(--lx-header-text); border-color: var(--lx-header-line); border-radius: var(--lx-btn-radius); }
.locale-switch summary .icon { color: currentColor; }
.nav-toggle { color: var(--lx-header-text); border-color: var(--lx-header-line); }

/* Centred crest: logo in the middle, the menu on a line below (wide screens) */
@media (min-width: 1281px) {
    [data-header="center"] .header-inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas: "left brand right" "nav nav nav";
        align-items: center;
        height: auto;
        padding-top: .9rem;
        row-gap: .35rem;
    }
    [data-header="center"] .brand { grid-area: brand; justify-self: center; }
    [data-header="center"] .locale-switch { grid-area: right; justify-self: end; }
    [data-header="center"] .site-nav { grid-area: nav; justify-content: center; padding-bottom: .45rem; }
    [data-header="center"] { scroll-padding-top: 140px; }
}
@media (max-width: 1280px) {
    .site-nav { background: var(--lx-header-bg); border-bottom-color: var(--lx-header-line); }
    .site-nav a:not(.btn), .nav-group-toggle { font-size: .9rem; border-bottom-color: var(--lx-header-line); }
    .site-nav a.active, .nav-group-toggle.active { color: var(--lx-header-text); text-decoration: underline; text-underline-offset: 5px; }
    .site-nav .nav-sub strong { color: var(--lx-header-text); }
    .site-nav .nav-sub small { color: inherit; opacity: .7; }
}

/* Inner page banners */
.page-hero { background: var(--lx-hero-bg); color: var(--lx-hero-muted); }
.page-hero h1 { color: var(--lx-hero-text); }
.page-hero .eyebrow, .page-hero-light .eyebrow { color: var(--lx-hero-label); }
.page-hero-light { background: var(--lx-hero-bg); border-bottom-color: var(--lx-line); }
.page-hero-light h1 { color: var(--lx-hero-text); }
.page-hero-light::after { background: var(--lx-hero-label); }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color: inherit; }
.page-hero .btn, .page-hero .btn-brand, .page-hero .btn-ghost-light {
    background: var(--lx-hero-btn, var(--lx-accent));
    border-color: var(--lx-hero-btn, var(--lx-accent));
    color: var(--lx-hero-btn-text, var(--lx-accent-text));
}
.page-hero .btn:hover { background: transparent; border-color: var(--lx-hero-text); color: var(--lx-hero-text); }
/* Price list and gold-rate banners: badges and currency pills follow the banner's colours */
.pl-updated > span, .pl-currency a, .gold-updated { border-color: var(--lx-hero-line, rgba(0, 0, 0, .16)); border-radius: var(--lx-btn-radius); }
.pl-date, .gold-updated, .gold-crumbs a, .gold-source a { color: var(--lx-hero-label); }
.pl-unit, .pl-currency-label, .gold-crumbs, .gold-source { color: var(--lx-hero-muted); }
.pl-currency a { color: var(--lx-hero-text); }
.pl-currency a:hover { border-color: var(--lx-hero-text); color: var(--lx-hero-text); }
.pl-currency a.active { background: var(--lx-hero-btn, var(--lx-accent)); border-color: var(--lx-hero-btn, var(--lx-accent)); color: var(--lx-hero-btn-text, var(--lx-accent-text)); }
.gold-source a:hover { color: var(--lx-hero-text); }

/* Sections and cards */
.section-alt, .testimonials-block { background: var(--lx-alt); }
.service-card, .post-card, .testimonial, .value-card, .team-card, .process-card, .benefit-card, .style-card, .guide-card,
.service-detail, .form-card, .mv-card, .brand-card, .stats-grid, .shape-chip, .shape-detail, .gold-card, .zarna-live, .pl-notes {
    border-radius: var(--lx-radius);
    box-shadow: none;
}
.service-card, .post-card, .testimonial, .value-card, .team-card, .process-card, .benefit-card, .style-card, .guide-card,
.service-detail, .form-card, .mv-card, .brand-card, .stats-grid, .shape-chip { background: var(--lx-surface); border-color: var(--lx-line); }
.service-card:hover, .post-card:hover { box-shadow: none; border-color: var(--lx-text); transform: none; }
.service-card h3, .post-card h3, .team-card h3, .brand-card h3 { font-weight: var(--lx-h-weight); }
.icon-box { background: var(--lx-alt); border-color: var(--lx-line); color: var(--lx-label); }
.service-card:hover .icon-box { background: var(--lx-accent); border-color: var(--lx-accent); color: var(--lx-accent-text); }
.testimonial::before { color: var(--lx-label); }
.avatar { background: var(--lx-accent); color: var(--lx-accent-text); }
.post-cat, .team-card .role { color: var(--lx-label); }
.stat strong { font-weight: var(--lx-h-weight); }
.form-card input, .form-card textarea, .form-card select { border-radius: var(--lx-radius); background: var(--lx-bg); }
.price-table thead th { background: var(--lx-dark); }
.price-table thead th.pl-q { color: var(--lx-dark-label); }
.zarna-buy, .journey-section { background: var(--lx-alt); }

/* Dark bands: call to action, notes, marquee, footer */
.cta, .cta-brand { background: var(--lx-dark); color: var(--lx-dark-muted); }
.cta h2 { color: var(--lx-dark-text); }
.pl-notes, .zarna-live { background: var(--lx-dark); }
.marquee { background: var(--lx-dark); color: var(--lx-dark-text); }
.marquee li .icon { color: var(--lx-dark-label); }
.site-footer { background: var(--lx-footer-bg); color: var(--lx-footer-text); border-top-color: var(--lx-line); }
.site-footer h2 { color: var(--lx-footer-head); }
.site-footer a, .footer-bottom { color: var(--lx-footer-text); }
.site-footer a:hover { color: var(--lx-footer-head); }
.footer-bottom { border-top-color: var(--lx-dark-line); }
.site-footer .social-icons a { border-color: var(--lx-dark-line); }

/* The shape picker and captions of the 3D diamond on light stages */
.lx-picker button { border-color: var(--lx-line); background: var(--lx-surface); border-radius: var(--lx-radius); }
.lx-picker button.is-active { border-color: var(--lx-text); background: var(--lx-surface); box-shadow: none; }

/* ======================================================================== 2. Home page sections */
.lx-section { padding: var(--lx-section) 0; }
.lx-label {
    display: block;
    margin-bottom: 1.1rem;
    font-family: var(--font);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: var(--lx-label-spacing);
    text-transform: uppercase;
    color: var(--lx-label);
}
.lx-head { max-width: 760px; margin: 0 auto clamp(2.5rem, 5vw, 4rem); text-align: center; }
.lx-head h2, .lx-intro h2, .lx-feature-copy h2, .lx-story-copy h2, .lx-certified h2, .lx-visit-card h2, .lx-closing h2 {
    font-size: calc(clamp(2rem, 4vw, 3.2rem) * var(--lx-h-scale));
    line-height: 1.1;
}
.lx-head p { margin: 1rem auto 0; max-width: 600px; color: var(--lx-muted); }
.lx-link {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid currentColor;
    color: var(--lx-text);
    font-size: .74rem;
    font-weight: 500;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.lx-link .icon { transition: transform .3s; }
.lx-link:hover { color: var(--lx-label); }
.lx-link:hover .icon { transform: translateX(4px); }
.lx-more { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; text-align: center; }
.lx-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.lx-btn-alt { background: transparent; border-color: currentColor; color: var(--lx-text); }
.lx-btn-alt:hover { background: var(--lx-text); border-color: var(--lx-text); color: var(--lx-bg); }

/* Pictures sit on a tint like studio shots: jewellery photos (white backgrounds) are multiplied onto it; the
   loose-diamond pictures (lx-dia) are transparent and are shown whole */
.lx-tile-media, .lx-feature-media, .lx-hero-media figure { background: var(--lx-photo); overflow: hidden; }
.lx-feature-media img, .lx-hero-media img { mix-blend-mode: multiply; }

/* ---------- Hero: the 3D diamond on a stage ---------- */
.lx-hero { position: relative; overflow: hidden; }
.lx-hero h1 { font-size: calc(clamp(2.6rem, 6vw, 5rem) * var(--lx-h-scale)); line-height: 1.04; margin-bottom: .35em; }
.lx-hero-text { max-width: 36rem; color: var(--lx-muted); font-size: 1.05rem; }
.lx-hero-stage { background: var(--lx-stage); }
.lx-stage { position: relative; display: grid; place-items: center; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.lx-stage .hero-gem { width: 70%; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .18)); }
.lx-stage-caption { position: absolute; left: 0; right: 0; bottom: 2%; margin: 0; transform: none; text-align: center; font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--lx-muted); }
.lx-stage-wrap { display: grid; justify-items: center; gap: 1rem; }
.lx-picker { justify-content: center; }

/* centred: text above, the stone on display below */
.lx-hero--center { padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); text-align: center; }
.lx-hero--center .lx-hero-copy { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); }
.lx-hero--center .lx-hero-text { margin: 0 auto; }
.lx-hero--center .lx-actions { justify-content: center; }
.lx-hero--center .lx-stage-wrap { margin-top: clamp(1rem, 3vw, 2rem); }

/* full screen: the stone in the spotlight on the right, the words at the foot on the left */
.lx-hero--full {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 2rem;
    min-height: min(calc(100svh - 120px), 900px);
    padding: 2rem max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 3rem;
}
.lx-hero--full .lx-hero-copy { align-self: end; }
.lx-hero--full .lx-stage { width: min(100%, 620px, 68svh); }

/* ---------- Hero: photography ---------- */
.lx-hero-photo { display: grid; align-items: center; }
.lx-hero-media { position: relative; }
.lx-hero-media figure { margin: 0; }
.lx-hero-media img { width: 100%; height: 100%; object-fit: cover; }

/* split: words left, the piece on a tinted panel right */
.lx-hero--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.lx-hero--split .lx-hero-copy { padding: clamp(3rem, 6vw, 6rem) clamp(1.5rem, 6vw, 6rem); max-width: 720px; justify-self: end; }
.lx-hero--split .lx-hero-media figure { aspect-ratio: 1; }

/* banner: a wide band, the words over the left side */
.lx-hero--banner { grid-template-columns: 1fr; min-height: min(78svh, 760px); background: var(--lx-photo); }
.lx-hero--banner .lx-hero-media { grid-area: 1 / 1; justify-self: end; width: min(62%, 860px); height: 100%; }
.lx-hero--banner .lx-hero-media figure { height: 100%; }
.lx-hero--banner .lx-hero-copy { grid-area: 1 / 1; position: relative; z-index: 2; width: 100%; max-width: var(--container); margin: 0 auto; padding: 4rem var(--gutter); }
.lx-hero--banner .lx-hero-copy > * { max-width: 560px; }

/* editorial: oversized words beside a large piece, a second piece overlapping it */
.lx-hero--editorial {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    padding: clamp(2.5rem, 5vw, 4.5rem) max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) clamp(3.5rem, 7vw, 6rem);
}
.lx-hero--editorial .lx-hero-copy { position: relative; z-index: 2; }
.lx-hero--editorial .lx-hero-media { position: relative; }
.lx-hero--editorial .lx-hero-photo-1 { aspect-ratio: 4 / 5; }
.lx-hero--editorial .lx-hero-photo-2 { position: absolute; left: -13%; bottom: -7%; width: 42%; aspect-ratio: 3 / 4; box-shadow: 0 24px 60px rgba(0, 0, 0, .14); }

/* ---------- Statement and story ---------- */
.lx-intro-inner { max-width: 820px; text-align: center; }
.lx-intro p { margin: 1.4rem auto 2rem; max-width: 640px; color: var(--lx-muted); font-size: 1.08rem; }

.lx-story-inner { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.lx-story-media { position: relative; margin: 0; }
.lx-story-media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--lx-radius); }
.lx-story-media figcaption { margin-top: .9rem; font-size: .85rem; font-weight: 500; letter-spacing: .06em; }
.lx-story-media figcaption small { display: block; color: var(--lx-muted); font-weight: 400; letter-spacing: 0; }
.lx-story-copy p { color: var(--lx-muted); }
.lx-story-quote { font-family: var(--serif); font-size: 1.3rem; line-height: 1.5; color: var(--lx-text) !important; font-style: italic; }
.lx-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1.4rem; margin: 2.2rem 0; padding: 1.6rem 0; border-top: 1px solid var(--lx-line); border-bottom: 1px solid var(--lx-line); }
.lx-figures dt { font-family: var(--serif); font-size: 2.2rem; line-height: 1; color: var(--lx-text); }
.lx-figures dd { margin: .4rem 0 0; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lx-muted); }

/* ---------- Tiles: what we supply, the shapes on a rail ---------- */
.lx-tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 2.4vw, 2.2rem) clamp(1rem, 2vw, 1.6rem); }
.lx-tile { display: grid; align-content: start; color: var(--lx-text); }
a.lx-tile:hover { color: var(--lx-text); }
.lx-tile-media { position: relative; display: block; aspect-ratio: 1; border-radius: var(--lx-radius); }
.lx-tile-media img { width: 100%; height: 100%; transition: transform 1s cubic-bezier(.2, .7, .2, 1); }
.lx-tile:hover .lx-tile-media img { transform: scale(1.05) rotate(-2deg); }
.lx-tile-body { display: grid; justify-items: start; gap: .45rem; padding-top: 1.2rem; }
.lx-tile-body .lx-label { margin: 0; }
.lx-tile h3 { margin: 0; font-family: var(--serif); font-size: calc(1.45rem * var(--lx-h-scale)); font-weight: var(--lx-h-weight); line-height: 1.2; letter-spacing: var(--lx-h-spacing); text-transform: var(--lx-h-case); }
.lx-tile p { margin: 0; font-size: .9rem; color: var(--lx-muted); }
.lx-tile .lx-link { margin-top: .6rem; }
.lx-tile-meta { font-size: .78rem; color: var(--lx-muted); }
.lx-tile-badge { position: absolute; top: .75rem; right: .75rem; display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: 999px; background: rgba(255, 255, 255, .82); color: #1a1a1a; font-size: .66rem; font-weight: 600; letter-spacing: .08em; }
.lx-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.lx-tags li { padding: .22rem .6rem; border: 1px solid var(--lx-line); border-radius: var(--lx-btn-radius); font-size: .72rem; color: var(--lx-text); }

/* ---------- The assortment at a glance ---------- */
.lx-spec-band { padding: clamp(2.2rem, 4vw, 3rem) 0; border-bottom: 1px solid var(--lx-line); }
.lx-spec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.5rem; }
.lx-spec { display: grid; align-content: start; gap: .45rem; padding-left: 1.2rem; border-left: 1px solid var(--lx-line); }
.lx-spec:first-child { border-left: 0; padding-left: 0; }
.lx-spec strong { font-family: var(--serif); font-size: calc(clamp(1.9rem, 3vw, 2.6rem) * var(--lx-h-scale)); font-weight: var(--lx-h-weight); line-height: 1.05; color: var(--lx-text); }
.lx-spec--text strong { font-size: calc(clamp(1.05rem, 1.6vw, 1.3rem) * var(--lx-h-scale)); line-height: 1.3; padding-top: .35rem; }
.lx-spec span { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lx-muted); }
.lx-band-dark.lx-spec-band { border-bottom: 0; }
.lx-band-dark .lx-spec { border-left-color: var(--lx-dark-line); }
.lx-band-dark .lx-spec strong { color: var(--lx-dark-text); }
.lx-band-dark .lx-spec span { color: var(--lx-dark-muted); }

/* ---------- The price list ---------- */
.lx-pricelist-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.lx-pricelist-date { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 1rem 0; font-size: .82rem; color: var(--lx-label); }
.lx-pricelist-copy > p:not([class]) { color: var(--lx-muted); }
.lx-pricelist-copy .lx-actions .icon { margin-right: .4rem; vertical-align: -3px; }
.lx-pricelist-more { display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 1.4rem 0 0; font-size: .85rem; }
.lx-pricelist-more a { display: inline-flex; align-items: center; gap: .4rem; color: var(--lx-text); border-bottom: 1px solid var(--lx-line); }
.lx-sheet { position: relative; padding: clamp(1.5rem, 3vw, 2.4rem); background: var(--lx-surface); border: 1px solid var(--lx-line); border-radius: var(--lx-radius); box-shadow: 0 24px 60px rgba(0, 0, 0, .07); }
.lx-sheet-title { margin: 0 0 .8rem; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--lx-label); }
.lx-sheet table { width: 100%; margin-bottom: 1.4rem; border-collapse: collapse; font-size: .84rem; }
.lx-sheet th, .lx-sheet td { padding: .5rem .4rem; border-bottom: 1px solid var(--lx-line); text-align: left; }
.lx-sheet thead th { font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--lx-muted); }
.lx-sheet tbody th { font-weight: 600; color: var(--lx-text); }
.lx-sheet-stones { position: absolute; right: -6%; bottom: -14%; width: 44%; height: auto; pointer-events: none; }

/* ---------- How to buy ---------- */
.lx-step-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2.4rem); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.lx-step { position: relative; display: grid; align-content: start; gap: .6rem; padding-top: 1.4rem; border-top: 1px solid var(--lx-text); }
.lx-step-num { font-size: .74rem; letter-spacing: .2em; color: var(--lx-label); }
.lx-step .icon { color: var(--lx-label); }
.lx-step h3 { margin: 0; font-family: var(--serif); font-size: calc(1.3rem * var(--lx-h-scale)); font-weight: var(--lx-h-weight); line-height: 1.25; letter-spacing: var(--lx-h-spacing); text-transform: var(--lx-h-case); }
.lx-step p { margin: 0; font-size: .92rem; color: var(--lx-muted); }
.lx-steps-actions .lx-actions { justify-content: center; margin-top: clamp(2.2rem, 4vw, 3rem); }

/* ---------- Jewellery, briefly ---------- */
.lx-jewellery { padding: clamp(2.8rem, 5vw, 4rem) 0; border-top: 1px solid var(--lx-line); }
.lx-jewellery-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.lx-jewellery h2 { font-size: calc(clamp(1.5rem, 2.6vw, 2.1rem) * var(--lx-h-scale)); line-height: 1.15; }
.lx-jewellery-copy p { margin: .8rem 0 1.4rem; color: var(--lx-muted); }
.lx-jewellery-pieces { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: 0; padding: 0; list-style: none; }
.lx-jewellery-pieces a { display: block; aspect-ratio: 1; overflow: hidden; background: var(--lx-photo); border-radius: var(--lx-radius); }
.lx-jewellery-pieces img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.lx-jewellery-pieces a:hover img { transform: scale(1.06); }

/* ---------- Editorial feature ---------- */
.lx-feature-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.lx-feature--reverse .lx-feature-media { order: 2; }
.lx-feature-media { margin: 0; aspect-ratio: 1; border-radius: var(--lx-radius); }
.lx-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.lx-feature-copy p { margin: 1.2rem 0 2rem; color: var(--lx-muted); font-size: 1.05rem; }
.lx-feature--tint { background: var(--lx-alt); }

/* ---------- Certified stones, benefits, statements ---------- */
.lx-certified { background: var(--lx-alt); }
.lx-certified-inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.lx-certified p { color: var(--lx-muted); max-width: 600px; }
.lx-certified-figure { display: grid; gap: .3rem; padding: 2rem 0 2rem 2rem; border-left: 1px solid var(--lx-line); color: var(--lx-text); }
.lx-certified-figure[hidden] { display: none; }
.lx-certified-inner:has(> .lx-certified-figure[hidden]) { grid-template-columns: minmax(0, 1fr); }
.lx-live { display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .6rem; font-size: .7rem !important; letter-spacing: .2em; text-transform: uppercase; color: var(--lx-muted); }
.lx-band-dark .lx-live { color: var(--lx-dark-muted); }
.lx-live-meta { font-size: .78rem; }
.lx-certified-figure .is-changed { animation: live-change 1.2s ease-out; }
.lx-certified-figure strong { font-family: var(--serif); font-size: calc(clamp(3rem, 6vw, 4.6rem) * var(--lx-h-scale)); font-weight: var(--lx-h-weight); line-height: 1; }
.lx-certified-figure span { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; }
.lx-certified-figure small { color: var(--lx-muted); }

.lx-benefits { padding: clamp(3rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--lx-line); }
.lx-benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; text-align: center; }
.lx-benefit, .lx-benefit-link { display: grid; justify-items: center; gap: .6rem; color: var(--lx-text); }
.lx-benefit .icon { color: var(--lx-label); margin-bottom: .3rem; }
.lx-benefit strong { font-size: .8rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
.lx-benefit span { font-size: .88rem; color: var(--lx-muted); max-width: 240px; }
.lx-benefits--line { border-bottom: 1px solid var(--lx-line); }

.lx-statement-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.lx-statement { padding-top: 1.6rem; border-top: 1px solid var(--lx-text); }
.lx-statement-num { font-size: .74rem; letter-spacing: .2em; color: var(--lx-label); }
.lx-statement h3 { margin: 1rem 0 .7rem; font-family: var(--serif); font-size: calc(1.7rem * var(--lx-h-scale)); font-weight: var(--lx-h-weight); line-height: 1.2; }
.lx-statement p { color: var(--lx-muted); margin: 0; }

/* ---------- Shapes, words, journal, visit, closing ---------- */
.lx-shape-row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .8rem; }
.lx-shape { display: grid; justify-items: center; gap: .7rem; padding: 1.2rem .3rem; color: var(--lx-text); text-align: center; border: 1px solid transparent; border-radius: var(--lx-radius); transition: border-color .3s; }
.lx-shape:hover { border-color: var(--lx-line); color: var(--lx-text); }
.lx-shape .shape-svg { width: 64px; height: 64px; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.lx-shape:hover .shape-svg { transform: rotate(-12deg) scale(1.08); }
.lx-shape span { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }

.lx-quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.lx-quote { margin: 0; padding-top: 1.6rem; border-top: 1px solid var(--lx-line); }
.lx-quote blockquote { margin: 0 0 1.2rem; font-family: var(--serif); font-size: 1.25rem; line-height: 1.5; color: var(--lx-text); }
.lx-quote figcaption { font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.lx-quote figcaption small { display: block; margin-top: .2rem; color: var(--lx-muted); letter-spacing: 0; text-transform: none; font-weight: 400; }

.lx-journal .post-card { border: 0; background: transparent; }
.lx-journal .post-card-body { padding: 1.2rem 0 0; }

.lx-visit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.lx-visit-card { padding: clamp(2rem, 5vw, 4rem); background: var(--lx-alt); border-radius: var(--lx-radius); }
.lx-visit-card p { color: var(--lx-muted); margin: 1rem 0 1.8rem; }
.lx-visit-hours { margin-top: -1rem !important; }
.lx-visit-card--alt { background: var(--lx-dark); color: var(--lx-dark-muted); }
.lx-visit-card--alt h2 { color: var(--lx-dark-text); }
.lx-visit-card--alt p { color: var(--lx-dark-muted); }
.lx-visit-card--alt .lx-label { color: var(--lx-dark-label); }
.lx-visit-card--alt .lx-link { color: var(--lx-dark-text); }

.lx-marquee { margin-top: 0; }
.lx-closing-inner { max-width: 820px; text-align: center; }
.lx-closing p { color: var(--lx-muted); }
.lx-closing .lx-actions { justify-content: center; }

/* ---------- Dark band (any section) ---------- */
.lx-band-dark, .lx-certified.lx-band-dark { background: var(--lx-dark); color: var(--lx-dark-muted); }
.lx-band-dark h2, .lx-band-dark h3, .lx-band-dark .lx-shape, .lx-band-dark .lx-certified-figure { color: var(--lx-dark-text); }
.lx-band-dark p, .lx-band-dark .lx-head p, .lx-band-dark .lx-certified-figure small { color: var(--lx-dark-muted); }
.lx-band-dark .lx-label { color: var(--lx-dark-label); }
.lx-band-dark .lx-link { color: var(--lx-dark-text); }
.lx-band-dark .lx-certified-figure { border-left-color: var(--lx-dark-line); }
.lx-band-dark .lx-shape:hover { border-color: var(--lx-dark-line); color: var(--lx-dark-text); }
.lx-band-dark .lx-btn { background: var(--lx-dark-text); border-color: var(--lx-dark-text); color: var(--lx-dark); }
.lx-band-dark .lx-btn:hover { background: transparent; color: var(--lx-dark-text); }
.lx-band-dark .lx-visit-card { background: rgba(255, 255, 255, .05); }
.lx-band-dark .lx-visit-card:not(.lx-visit-card--alt) h2 { color: var(--lx-dark-text); }
.lx-band-dark .lx-visit-card--alt { background: var(--lx-bg); }
.lx-band-dark .lx-visit-card--alt h2 { color: var(--lx-text); }
.lx-band-dark .lx-visit-card--alt p { color: var(--lx-muted); }
.lx-band-dark .lx-visit-card--alt .lx-label { color: var(--lx-label); }
.lx-band-dark .lx-visit-card--alt .lx-link { color: var(--lx-text); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1100px) {
    .lx-shape-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lx-tile-grid, .lx-step-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
    .lx-feature-inner, .lx-story-inner, .lx-certified-inner, .lx-visit-grid, .lx-pricelist-inner, .lx-jewellery-inner { grid-template-columns: minmax(0, 1fr); }
    .lx-sheet-stones { right: -2%; bottom: -8%; width: 34%; }
    .lx-feature--reverse .lx-feature-media { order: 0; }
    .lx-certified-figure { padding: 1.6rem 0 0; border-left: 0; border-top: 1px solid var(--lx-line); }
    .lx-band-dark .lx-certified-figure { border-top-color: var(--lx-dark-line); }
    .lx-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lx-statement-grid, .lx-quote-grid { grid-template-columns: minmax(0, 1fr); }
    .lx-hero--full { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 1.5rem; }
    .lx-hero--full .lx-stage-wrap { order: -1; }
    .lx-hero--split { grid-template-columns: minmax(0, 1fr); }
    .lx-hero--split .lx-hero-copy { justify-self: stretch; max-width: none; padding: 2.5rem var(--gutter) 3rem; }
    .lx-hero--split .lx-hero-media { order: -1; }
    .lx-hero--banner { min-height: 0; }
    .lx-hero--banner .lx-hero-media { grid-area: auto; width: 100%; aspect-ratio: 1; height: auto; }
    .lx-hero--banner .lx-hero-copy { grid-area: auto; padding: 2.5rem var(--gutter) 3rem; }
    .lx-hero--editorial { grid-template-columns: minmax(0, 1fr); }
    .lx-hero--editorial .lx-hero-media { margin: 0 0 0 18%; }
    .lx-hero--editorial .lx-hero-photo-2 { left: -24%; width: 44%; }
    .lx-story-media { max-width: 460px; }
}
@media (max-width: 560px) {
    .lx-tile-grid, .lx-step-grid { grid-template-columns: minmax(0, 1fr); }
    .lx-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lx-spec:nth-child(odd) { border-left: 0; padding-left: 0; }
    .lx-jewellery-pieces { gap: .5rem; }
    .lx-benefit-grid { grid-template-columns: minmax(0, 1fr); }
    .lx-actions .btn { width: 100%; }
}

/* ======================================================================== 3. Finishing details */

/* Slower, softer reveals as the page scrolls (the shared .reveal system in main.js) */
.js .reveal { translate: 0 22px; transition: opacity 1.1s ease var(--reveal-delay, 0ms), translate 1.2s cubic-bezier(.2, .7, .2, 1) var(--reveal-delay, 0ms), transform .3s, box-shadow .3s, border-color .3s; }

/* Large photos open like a curtain and settle */
.js .lx-feature-media.reveal, .js .lx-story-media.reveal, .js .lx-look.reveal .lx-look-media { clip-path: inset(0 0 16% 0); transition: clip-path 1.5s cubic-bezier(.2, .7, .2, 1), opacity 1.1s ease, translate 1.2s cubic-bezier(.2, .7, .2, 1); }
.js .lx-feature-media.reveal.is-visible, .js .lx-story-media.reveal.is-visible, .js .lx-look.reveal.is-visible .lx-look-media { clip-path: inset(0); }
.js .lx-feature-media.reveal img, .js .lx-look.reveal .lx-look-media img { transform: scale(1.08); transition: transform 2s cubic-bezier(.2, .7, .2, 1); }
.js .lx-feature-media.reveal.is-visible img, .js .lx-look.reveal.is-visible .lx-look-media img { transform: none; }

/* The hero's words arrive one after another (never fully transparent, so they count as painted at once) */
@keyframes lx-rise { from { opacity: .01; transform: translateY(16px); } }
.js .lx-hero-copy > * { animation: lx-rise 1.2s cubic-bezier(.2, .7, .2, 1) both; }
.js .lx-hero-copy > :nth-child(2) { animation-delay: .12s; }
.js .lx-hero-copy > :nth-child(3) { animation-delay: .24s; }
.js .lx-hero-copy > :nth-child(4) { animation-delay: .36s; }
.lx-hero-copy, .lx-stage-wrap, .lx-hero-media { position: relative; z-index: 1; }

/* Headline accent: the last words set apart; a theme makes them italic, coloured or outlined */
.lx-hero h1 em, .lx-intro h2 em { font-style: italic; color: var(--lx-accent-word, inherit); }

/* Section numbers (I, II, III…) before the labels */
.lx-num { display: var(--lx-numerals, none); }
.lx-num::after { content: var(--lx-num-sep, "\00a0\00a0·\00a0\00a0"); }

/* A small diamond between hairlines under section titles */
.lx-ornament { display: var(--lx-ornament, none); align-items: center; justify-content: center; gap: .9rem; margin: 1.5rem auto 0; color: var(--lx-ornament-color, var(--lx-label)); }
.lx-ornament::before, .lx-ornament::after { content: ""; width: 46px; height: 1px; background: currentColor; opacity: .6; }
.lx-ornament svg { display: block; }
.lx-band-dark .lx-ornament { color: var(--lx-dark-label); }

/* Points of light twinkling over a stage */
.lx-glints { position: absolute; inset: 0; z-index: 0; display: var(--lx-glints, none); pointer-events: none; }
.lx-glints i { position: absolute; width: 18px; height: 18px; opacity: 0; color: var(--lx-glint, #fff); animation: lx-twinkle 5s ease-in-out infinite; }
.lx-glints i::before, .lx-glints i::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; background: linear-gradient(transparent, currentColor, transparent); }
.lx-glints i::before { width: 1px; height: 100%; }
.lx-glints i::after { width: 100%; height: 1px; background: linear-gradient(90deg, transparent, currentColor, transparent); }
.lx-glints i:nth-child(1) { left: 12%; top: 22%; animation-delay: .2s; }
.lx-glints i:nth-child(2) { left: 28%; top: 70%; animation-delay: 1.6s; transform: scale(.7); }
.lx-glints i:nth-child(3) { left: 46%; top: 14%; animation-delay: 3.1s; }
.lx-glints i:nth-child(4) { left: 63%; top: 30%; animation-delay: .9s; width: 26px; height: 26px; }
.lx-glints i:nth-child(5) { left: 78%; top: 62%; animation-delay: 2.4s; }
.lx-glints i:nth-child(6) { left: 88%; top: 18%; animation-delay: 4s; width: 12px; height: 12px; }
.lx-glints i:nth-child(7) { left: 6%; top: 82%; animation-delay: 2.9s; width: 12px; height: 12px; }
.lx-glints i:nth-child(8) { left: 55%; top: 84%; animation-delay: 1.2s; }
.lx-glints i:nth-child(9) { left: 36%; top: 40%; animation-delay: 3.6s; width: 10px; height: 10px; }
@keyframes lx-twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 45%, 55% { opacity: .9; transform: scale(1) rotate(45deg); } }

/* "Scroll" with a falling line at the foot of the hero */
.lx-scroll-cue { position: absolute; left: 50%; bottom: 1.1rem; z-index: 2; display: var(--lx-scroll-cue, grid); justify-items: center; gap: .55rem; translate: -50% 0; font-size: .6rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--lx-cue, var(--lx-muted)); pointer-events: none; }
.lx-scroll-cue i { position: relative; display: block; width: 1px; height: 40px; overflow: hidden; background: color-mix(in srgb, currentColor 30%, transparent); }
.lx-scroll-cue i::after { content: ""; position: absolute; left: 0; top: -100%; width: 1px; height: 100%; background: currentColor; animation: lx-cue 2.4s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes lx-cue { to { top: 100%; } }

/* ---------- Mosaic (what we supply): one tall picture beside two ---------- */
.lx-look-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.lx-look { position: relative; display: block; overflow: hidden; border-radius: var(--lx-radius); color: var(--lx-text); }
.lx-look:hover { color: var(--lx-text); }
.lx-look-1 { grid-row: 1 / span 2; }
.lx-look-media { display: block; height: 100%; background: var(--lx-photo); }
.lx-look-2 .lx-look-media, .lx-look-3 .lx-look-media { aspect-ratio: 16 / 11; }
.lx-look-media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.lx-look:hover .lx-look-media img { transform: scale(1.04); transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); }
/* the caption sits on a small card, like a museum label, so it never runs over the piece */
.lx-look-caption { position: absolute; left: clamp(1.2rem, 2.6vw, 2rem); bottom: clamp(1.2rem, 2.6vw, 2rem); max-width: min(78%, 360px); display: grid; justify-items: start; gap: .35rem; padding: 1.1rem 1.4rem 1.2rem; background: var(--lx-surface); border-radius: var(--lx-radius); box-shadow: 0 12px 30px rgba(0, 0, 0, .06); }
.lx-look-caption .lx-label { margin: 0; }
.lx-look-caption strong { font-family: var(--serif); font-size: calc(clamp(1.4rem, 2.4vw, 2.2rem) * var(--lx-h-scale)); font-weight: var(--lx-h-weight); line-height: 1.1; letter-spacing: var(--lx-h-spacing); text-transform: var(--lx-h-case); }
.lx-look-more { display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem; padding-bottom: .25rem; border-bottom: 1px solid currentColor; font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; }

/* ---------- The founder's words ---------- */
.lx-founder { background: var(--lx-dark); color: var(--lx-dark-muted); text-align: center; }
.lx-founder-inner { max-width: 920px; }
.lx-founder-mark { display: block; height: 3.2rem; font-family: var(--serif); font-size: 7rem; line-height: .9; color: var(--lx-dark-label); }
.lx-founder blockquote { margin: 1.4rem auto 2.2rem; font-family: var(--serif); font-size: calc(clamp(1.6rem, 3.2vw, 2.6rem) * var(--lx-h-scale)); font-weight: var(--lx-h-weight); line-height: 1.32; color: var(--lx-dark-text); }
.lx-founder-name { margin: 0 0 1.8rem; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lx-dark-text); }
.lx-founder-name small { display: block; margin-top: .35rem; font-size: .86rem; letter-spacing: 0; text-transform: none; color: var(--lx-dark-muted); }
.lx-founder .lx-link { color: var(--lx-dark-text); }

/* ---------- The house in figures ---------- */
.lx-figures-band { padding: clamp(3rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--lx-line); border-bottom: 1px solid var(--lx-line); }
.lx-figures-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lx-figure-item { display: grid; justify-items: center; align-content: start; gap: .7rem; padding: .4rem 1rem; text-align: center; border-left: 1px solid var(--lx-line); }
.lx-figure-item:first-child { border-left: 0; }
.lx-figure-item strong { font-family: var(--serif); font-size: calc(clamp(2.6rem, 5vw, 4.4rem) * var(--lx-h-scale)); font-weight: var(--lx-h-weight); line-height: 1; color: var(--lx-text); }
.lx-figure-item span { max-width: 210px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--lx-muted); }
.lx-band-dark.lx-figures-band { border-color: transparent; }
.lx-band-dark .lx-figure-item { border-left-color: var(--lx-dark-line); }
.lx-band-dark .lx-figure-item strong { color: var(--lx-dark-text); }
.lx-band-dark .lx-figure-item span { color: var(--lx-dark-muted); }

/* ---------- Header: compact once the page moves; footer: the crest ---------- */
.site-header { transition: box-shadow .4s ease; }
.is-scrolled .site-header { box-shadow: 0 10px 30px rgba(0, 0, 0, .06); }
@media (min-width: 1281px) {
    [data-header="center"] .brand-logo { transition: height .4s cubic-bezier(.2, .7, .2, 1); }
    [data-header="center"] .header-inner { transition: padding .4s cubic-bezier(.2, .7, .2, 1); }
    [data-header="center"].is-scrolled .header-inner { padding-top: .35rem; row-gap: 0; }
    [data-header="center"].is-scrolled .brand-logo { height: 36px; }
    [data-header="center"].is-scrolled .site-nav { padding-bottom: .2rem; }
}
.lx-footer-crest { display: grid; justify-items: center; gap: 1.1rem; margin-bottom: 3.2rem; padding-bottom: 3rem; border-bottom: 1px solid var(--lx-dark-line); text-align: center; }
.lx-footer-rule { width: 64px; height: 1px; background: var(--lx-dark-label); }
.lx-footer-logo img { width: auto; height: 64px; }
.lx-footer-crest p { margin: 0; font-size: .7rem; letter-spacing: .32em; text-transform: uppercase; color: var(--lx-footer-text); }
.lx-footer-crest + .footer-grid > div:first-child > .brand { display: none; }

/* ---------- Paper grain over the whole page (themes switch it on with --lx-grain) ---------- */
body::after { content: ""; position: fixed; inset: 0; z-index: 55; pointer-events: none; background-image: var(--lx-grain, none); }

@media (max-width: 960px) {
    .lx-look-grid { grid-template-columns: minmax(0, 1fr); }
    .lx-look-1 { grid-row: auto; }
    .lx-look-1 .lx-look-media { aspect-ratio: 4 / 5; }
    .lx-figures-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
    .lx-figure-item:nth-child(3) { border-left: 0; }
    .lx-scroll-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .js .lx-hero-copy > *, .lx-glints i, .lx-scroll-cue i::after { animation: none; }
    .js .lx-feature-media.reveal, .js .lx-story-media.reveal, .js .lx-look.reveal .lx-look-media { clip-path: none; }
    .js .lx-feature-media.reveal img, .js .lx-look.reveal .lx-look-media img { transform: none; }
}

/* ======================================================================== 4. Ways to show the diamonds */

/* Shaped frames: a theme sets --lx-frame-radius (arch: 100vmax 100vmax 0 0, circle: 50%) or --lx-frame-clip (octagon…) */
.lx-tile-media, .lx-feature-media, .lx-explorer-main {
    border-radius: var(--lx-frame-radius, var(--lx-radius));
    clip-path: var(--lx-frame-clip, none);
}
.js .lx-feature-media.reveal.is-visible { clip-path: var(--lx-frame-clip, inset(0)); }
.lx-hero-media figure { transition: translate .9s cubic-bezier(.2, .7, .2, 1); }

/* On dark bands the stones float on a faint glow; with lx-spot they lie in a pool of light (--lx-spot…) */
.lx-band-dark .lx-tile-media, .lx-band-dark .lx-explorer-main {
    background: var(--lx-tile-dark, radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .13), rgba(255, 255, 255, .03) 70%));
}
.lx-spot .lx-tile-media, .lx-spot .lx-explorer-main {
    background: var(--lx-spot, radial-gradient(circle at 50% 44%, #fff 0 34%, #ebe8e2 58%, #b9b5ad 100%));
}
.lx-band-dark.lx-spot .lx-tile-media, .lx-band-dark.lx-spot .lx-explorer-main {
    background: var(--lx-spot-dark, radial-gradient(circle at 50% 44%, #fff 0 30%, #e4e1db 50%, #8f8b84 78%, #4a4844 100%));
}
.lx-band-dark .lx-tile, .lx-band-dark a.lx-tile:hover { color: var(--lx-dark-text); }
.lx-band-dark .lx-tile p, .lx-band-dark .lx-tile-meta { color: var(--lx-dark-muted); }
.lx-band-dark .lx-tags li { border-color: var(--lx-dark-line); color: var(--lx-dark-text); }

/* ---------- A rail that scrolls sideways ---------- */
.lx-rail-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.lx-rail-head .lx-head { margin: 0; text-align: left; }
.lx-rail-head .lx-ornament { justify-content: flex-start; margin-left: 0; }
.lx-rail-nav { display: flex; flex: none; gap: .5rem; }
.lx-rail-nav button { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; border: 1px solid var(--lx-line); border-radius: var(--lx-btn-radius); background: transparent; color: var(--lx-text); cursor: pointer; transition: background .3s, color .3s, border-color .3s, opacity .3s; }
.lx-rail-nav button:hover { background: var(--lx-text); border-color: var(--lx-text); color: var(--lx-bg); }
.lx-rail-nav button:disabled { opacity: .3; pointer-events: none; }
.lx-rail-nav button:first-child .icon { transform: scaleX(-1); }
.lx-rail {
    --lx-rail-edge: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: clamp(250px, 27vw, 400px);
    gap: clamp(1rem, 2vw, 1.6rem);
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: 0 var(--lx-rail-edge) .4rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--lx-rail-edge);
    scrollbar-width: none;
}
.lx-rail::-webkit-scrollbar { display: none; }
.lx-rail > .lx-tile { scroll-snap-align: start; }
.lx-rail .lx-tile-media { aspect-ratio: 4 / 5; }
.lx-rail-section .lx-more { padding: 0 max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); }
.lx-band-dark .lx-rail-nav button { border-color: var(--lx-dark-line); color: var(--lx-dark-text); }
.lx-band-dark .lx-rail-nav button:hover { background: var(--lx-dark-text); color: var(--lx-dark); }

/* ---------- One shape in focus ---------- */
.lx-explorer-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.lx-explorer-media { position: relative; }
.lx-explorer-main { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--lx-photo); cursor: zoom-in; }
.lx-explorer-main img { width: 100%; height: 100%; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.lx-explorer-main img.is-changing { opacity: .1; }
.lx-explorer-main.is-zoomed img { transform: scale(1.8); }
.lx-explorer-3d { position: absolute; left: 50%; bottom: 1.2rem; display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .88); color: #1a1a1a; font: 600 .7rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; translate: -50% 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.lx-explorer-3d:hover { background: #fff; }
.lx-explorer-copy h2 { font-size: calc(clamp(2rem, 4vw, 3.2rem) * var(--lx-h-scale)); line-height: 1.1; }
.lx-explorer-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; max-width: 380px; margin: 1.6rem 0 1.5rem; }
.lx-explorer-tabs button { display: grid; place-items: center; aspect-ratio: 1; padding: .4rem; border: 1px solid var(--lx-line); border-radius: var(--lx-radius); background: var(--lx-surface); cursor: pointer; opacity: .7; transition: opacity .3s, border-color .3s; }
.lx-explorer-tabs button:hover, .lx-explorer-tabs button.is-active { opacity: 1; }
.lx-explorer-tabs button.is-active { border-color: var(--lx-text); }
.lx-explorer-tabs .shape-svg { width: 78%; height: auto; }
.lx-explorer-name { margin: 0 0 .5rem; font-family: var(--serif); font-size: calc(1.8rem * var(--lx-h-scale)); font-weight: var(--lx-h-weight); letter-spacing: var(--lx-h-spacing); text-transform: var(--lx-h-case); }
.lx-explorer-summary { margin: 0; color: var(--lx-muted); }
.lx-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; margin: 1.6rem 0 0; border-top: 1px solid var(--lx-line); }
.lx-specs div { padding: .8rem 0; border-bottom: 1px solid var(--lx-line); }
.lx-specs dt { font-size: .64rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--lx-muted); }
.lx-specs dd { margin: .2rem 0 0; font-size: .95rem; color: var(--lx-text); }
.lx-band-dark .lx-explorer-name, .lx-band-dark .lx-specs dd { color: var(--lx-dark-text); }
.lx-band-dark .lx-explorer-summary, .lx-band-dark .lx-specs dt { color: var(--lx-dark-muted); }
.lx-band-dark .lx-specs, .lx-band-dark .lx-specs div { border-color: var(--lx-dark-line); }
.lx-band-dark .lx-explorer-tabs button { border-color: var(--lx-dark-line); background: rgba(255, 255, 255, .05); }
.lx-band-dark .lx-explorer-tabs button.is-active { border-color: var(--lx-dark-text); }
.lx-band-dark .lx-btn-alt { color: var(--lx-dark-text); }
.lx-band-dark .lx-btn-alt:hover { background: var(--lx-dark-text); border-color: var(--lx-dark-text); color: var(--lx-dark); }

/* ---------- Hero: three arched windows under the words ---------- */
.lx-hero--trio { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: clamp(3rem, 6vw, 5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem); text-align: center; }
.lx-hero--trio .lx-hero-copy { max-width: 820px; }
.lx-hero--trio .lx-hero-text { margin: 0 auto; }
.lx-hero--trio .lx-actions { justify-content: center; }
.lx-hero--trio .lx-hero-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(.8rem, 2.4vw, 2rem); width: min(100%, 1080px); margin-top: clamp(2.5rem, 5vw, 4rem); }
.lx-hero--trio .lx-hero-media figure { aspect-ratio: 3 / 4; border-radius: 100vmax 100vmax 0 0; }
.lx-hero--trio .lx-hero-media .lx-hero-photo-2 { aspect-ratio: 3 / 4.6; }

/* The loose-diamond pictures are transparent: shown whole, never multiplied (after every photo rule above) */
img.lx-dia { mix-blend-mode: normal; object-fit: contain; }
.lx-assortment--mosaic .lx-look-1 img.lx-dia { object-position: 50% 28%; }
.lx-assortment--mosaic .lx-look-2 img.lx-dia, .lx-assortment--mosaic .lx-look-3 img.lx-dia { display: block; width: 58%; margin-left: 40%; }

@media (max-width: 960px) {
    .lx-explorer-inner { grid-template-columns: minmax(0, 1fr); }
    .lx-rail { grid-auto-columns: minmax(230px, 62vw); }
    .lx-rail-nav { display: none; }
}
@media (max-width: 560px) {
    .lx-specs { column-gap: 1.2rem; }
    .lx-hero--trio .lx-hero-media { gap: .5rem; }
    /* long labels (e.g. "Buy certified diamonds above 1.00 carat") wrap instead of running out of the button */
    .lx-actions .btn { white-space: normal; line-height: 1.5; letter-spacing: min(var(--lx-btn-spacing), .14em); }
}
@media (prefers-reduced-motion: reduce) {
    .lx-explorer-main.is-zoomed img { transform: none; }
}

/* ======================================================================== 5. Film: full-screen pictures in motion */
/* A theme sets --lx-film-bg, --lx-film-veil(-mid), --lx-film-text/-muted/-label, --lx-shine(-blend), --lx-film-card…, --lx-film-x */

.lx-hero-film { display: grid; align-items: center; min-height: min(calc(100svh - 110px), 980px); background: var(--lx-film-bg, var(--lx-bg)); }
.lx-film-slides { position: absolute; inset: 0; overflow: hidden; }
.lx-film-slides::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lx-film-veil, rgba(251, 250, 248, .92)) 0%, var(--lx-film-veil-mid, rgba(251, 250, 248, .55)) 32%, transparent 58%); pointer-events: none; }
.lx-film-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.8s ease; }
.lx-film-slide.is-active { opacity: 1; }
.lx-film-slide img { width: 100%; height: 100%; object-fit: cover; transform-origin: 66% 55%; }
/* the picture moves closer, very slowly: one long breath, or once per slide */
.lx-hero-film:not([data-lx-film]) .lx-film-slide img { animation: lx-kenburns 24s ease-in-out infinite alternate; }
.lx-hero-film[data-lx-film] .lx-film-slide.is-active img { animation: lx-kenburns 14s ease-out both; }
@keyframes lx-kenburns { from { transform: scale(1); } to { transform: scale(1.1) translate(-1.2%, -.8%); } }
/* a band of light sweeps across the stones every few seconds */
.lx-film-shine { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 36%, var(--lx-shine, rgba(255, 255, 255, .5)) 50%, transparent 64%); mix-blend-mode: var(--lx-shine-blend, screen); transform: translateX(-100%); animation: lx-shine 9s cubic-bezier(.5, 0, .3, 1) 1.2s infinite; pointer-events: none; }
@keyframes lx-shine { 0% { transform: translateX(-100%); } 40%, 100% { transform: translateX(100%); } }
.lx-hero-film .lx-hero-copy { width: 100%; max-width: var(--container); margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--gutter); }
.lx-hero-film .lx-hero-copy > * { max-width: 580px; }
.lx-hero-film h1 { color: var(--lx-film-text, var(--lx-text)); }
.lx-hero-film .lx-label { color: var(--lx-film-label, var(--lx-label)); }
.lx-hero-film .lx-hero-text { color: var(--lx-film-muted, var(--lx-muted)); }
.lx-hero-film .lx-scroll-cue { color: var(--lx-film-muted, var(--lx-muted)); }

/* slideshow: a progress line per slide, and pause */
.lx-film-controls { position: absolute; left: 0; right: 0; bottom: clamp(1.3rem, 3vw, 2.2rem); z-index: 2; display: flex; align-items: center; gap: .5rem; width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.lx-film-dot { position: relative; width: 46px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; }
.lx-film-dot i { position: absolute; left: 0; right: 0; top: 50%; height: 2px; translate: 0 -50%; overflow: hidden; background: color-mix(in srgb, var(--lx-film-text, var(--lx-text)) 25%, transparent); }
.lx-film-dot i::after { content: ""; position: absolute; inset: 0; background: var(--lx-film-text, var(--lx-text)); transform: scaleX(0); transform-origin: left; }
.lx-film-dot.is-active i::after { animation: lx-progress var(--lx-film-delay, 6.5s) linear both; }
.is-paused .lx-film-dot.is-active i::after { animation-play-state: paused; }
@keyframes lx-progress { to { transform: scaleX(1); } }
.lx-film-toggle { display: grid; place-items: center; width: 34px; height: 34px; margin-left: .5rem; padding: 0; border: 1px solid color-mix(in srgb, var(--lx-film-text, var(--lx-text)) 30%, transparent); border-radius: 50%; background: transparent; color: var(--lx-film-text, var(--lx-text)); cursor: pointer; }
.lx-film-toggle .icon:last-child, .is-paused .lx-film-toggle .icon:first-child { display: none; }
.is-paused .lx-film-toggle .icon:last-child { display: block; }

/* ---------- A full-width picture band that drifts as the page scrolls ---------- */
.lx-film-band { position: relative; display: grid; align-items: center; min-height: clamp(440px, 50vw, 720px); overflow: hidden; background: var(--lx-film-bg, var(--lx-alt)); }
.lx-film-band-media { position: absolute; inset: 0; overflow: hidden; }
.lx-film-band-media img { width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
    .lx-film-band-media img { scale: 1.12; animation: lx-drift linear both; animation-timeline: view(); }
    @keyframes lx-drift { from { translate: 0 -5%; } to { translate: 0 5%; } }
}
.lx-film-band-inner { position: relative; z-index: 1; width: 100%; }
.lx-film-band-copy { max-width: 440px; padding: clamp(1.8rem, 3vw, 2.6rem); background: var(--lx-film-card, rgba(251, 250, 248, .86)); border-radius: var(--lx-radius); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lx-film-band--right .lx-film-band-copy { margin-left: auto; }
.lx-film-band-copy .lx-label { color: var(--lx-film-card-label, var(--lx-label)); }
.lx-film-band-copy h2 { font-size: calc(clamp(1.8rem, 3.4vw, 2.8rem) * var(--lx-h-scale)); line-height: 1.1; color: var(--lx-film-card-text, var(--lx-text)); }
.lx-film-band-copy p { margin: 1rem 0 1.6rem; color: var(--lx-film-card-muted, var(--lx-muted)); }
.lx-film-band-copy .lx-link { color: var(--lx-film-card-text, var(--lx-text)); }
/* plain: the words stand on the empty floor of the picture, centred under the stones */
.lx-film-band--plain { align-items: end; }
.lx-film-band--plain .lx-film-band-copy { max-width: 620px; margin: 0 auto; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: center; }

@media (max-width: 760px) {
    .lx-hero-film { display: block; min-height: 0; }
    .lx-film-slides { position: relative; aspect-ratio: 1; }
    .lx-film-slides::after { background: linear-gradient(0deg, var(--lx-film-bg, var(--lx-bg)) 0%, transparent 28%); }
    .lx-film-slide img { object-position: var(--lx-film-x, 66%) 50%; }
    .lx-hero-film .lx-hero-copy { padding: 1.2rem var(--gutter) 3rem; }
    .lx-film-controls { top: calc(100vw - 2.8rem); bottom: auto; }
    .lx-film-band { display: block; min-height: 0; }
    .lx-film-band-media { position: relative; aspect-ratio: 16 / 10; }
    .lx-film-band-copy, .lx-film-band--plain .lx-film-band-copy { max-width: none; margin: 0; padding: 1.8rem 0 2.8rem; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .lx-film-slide img, .lx-film-shine, .lx-film-dot i::after, .lx-film-band-media img { animation: none !important; }
    .lx-film-shine { display: none; }
    .lx-film-slide { transition: none; }
}