/* ==========================================================================
   CIZELE design system — section components (shared by every page template)
   ========================================================================== */

/* ---- HERO (present on every page) ---- */
.cz-hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;overflow:hidden}
.cz-hero-sentinel{position:absolute;top:1px;width:1px;height:1px}
.cz-hero__bg{position:absolute;inset:0;z-index:0}
/* base.css's `.cz img{height:auto}` (class+element, specificity 0,1,1) was silently beating both
   rules below (plain classes, 0,1,0) regardless of what value either one set — the actual bug here,
   not the percentage-vs-viewport-unit math tried first. Matching the element in the selector (as
   `.czg-h1`'s fix already established elsewhere) restores real specificity so these rules win instead
   of the mobile hero image silently falling back to its raw intrinsic aspect ratio (confirmed by
   measurement: the collapsed height exactly matched 376px scaled by the img's own width/height
   attributes, not any height value declared here at all). */
img.cz-hero__img{position:absolute;inset:0;width:100%;height:116%;object-fit:cover;object-position:center 28%;will-change:transform}
/* The 116% headroom exists only for the desktop image's scroll parallax (GSAP pans .cz-hero__img--d
   by ±6-8%, see cizele.js); the mobile image is never animated and doesn't need it. svh (not %) for
   the mobile override: resolves against the viewport, never an ancestor, so it can't ever hit the
   "indefinite containing-block height" case above — sized past 100% so it still fully covers the hero
   even when stacked content genuinely grows the section taller than one screen. */
img.cz-hero__img--m{display:none;height:135svh}
.cz-hero__scrim{position:absolute;inset:0;background:
  radial-gradient(110% 90% at 70% 30%,transparent,rgba(16,12,16,.35) 55%,var(--bg) 94%),
  linear-gradient(180deg,rgba(16,12,16,.5),transparent 35%,rgba(16,12,16,.82))}
.cz-hero__inner{position:relative;z-index:3;width:100%;padding-bottom:clamp(4rem,11vh,9rem)}
.cz-hero__title{font-size:var(--h1);max-width:15ch;letter-spacing:-.028em}
.cz-hero__sub{max-width:44ch;margin:1.6rem 0 2.4rem;font-size:clamp(1.02rem,1.4vw,1.25rem);color:#e7dbe4}
.cz-hero__acts{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.cz-hero__trust{margin-top:1.6rem;font-size:.8rem;letter-spacing:.04em;color:#cdbfca;display:flex;align-items:center;gap:.5rem}
.cz-hero__trust i{color:var(--gold)}
.cz-hero__cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;color:var(--mut);animation:cz-bob 2.4s var(--e) infinite}
@keyframes cz-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
/* hero alignment variants */
.cz-hero--center .cz-hero__inner{text-align:center}
.cz-hero--center .cz-hero__title{margin-inline:auto}
.cz-hero--center .cz-hero__sub{margin-inline:auto}
.cz-hero--center .cz-hero__acts{justify-content:center}
.cz-hero--split{align-items:center}
.cz-hero--split .cz-hero__inner{padding-bottom:0;display:grid}
@media(min-width:921px){.cz-hero--split .cz-hero__inner{max-width:48%}}

/* ---- INTRO ---- */
.cz-intro{padding:clamp(5rem,12vh,11rem) 0}
.cz-intro__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.cz-intro__h{font-size:var(--h2)}
.cz-intro__body{font-size:1.12rem}

/* ---- CARD GRID ---- */
.cz-cards{padding:clamp(4rem,10vh,9rem) 0}
.cz-cards__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:2.6rem}
.cz-cards__head h2{font-size:var(--h2)}
.cz-cards__intro{max-width:40ch;color:var(--mut)}
.cz-cards__grid{display:grid;gap:clamp(1.1rem,2vw,1.6rem);grid-template-columns:repeat(4,1fr)}
.cz-cards__grid--3{grid-template-columns:repeat(3,1fr)}
.cz-cards__grid--2{grid-template-columns:repeat(2,1fr)}
.cz-card{position:relative;display:block;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 30px 60px -40px #000;background:var(--panel)}
.cz-card__media{position:absolute;inset:0}
.cz-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e)}
.cz-card:hover .cz-card__media img{transform:scale(1.06)}
.cz-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 42%,rgba(10,7,10,.82))}
.cz-card__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.6rem;display:flex;flex-direction:column;gap:.3rem}
.cz-card__meta{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--champ)}
.cz-card__title{font-family:var(--serif);font-size:1.7rem}
.cz-card__go{position:absolute;right:1.4rem;bottom:1.6rem;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;font-size:.7rem;
  transition:background .4s var(--e),color .4s var(--e)}
.cz-card:hover .cz-card__go{background:var(--champ);color:var(--plum-deep)}

/* ---- EDITORIAL SPLIT ---- */
.cz-split{padding:clamp(5rem,12vh,11rem) 0}
.cz-split__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.cz-split--left .cz-split__media{order:-1}
.cz-split__text h2{font-size:var(--h2);margin-bottom:1.4rem}
.cz-split__text .cz-btn{margin-top:1.4rem}
.cz-split__media{position:relative;aspect-ratio:5/6;border-radius:16px;overflow:hidden;box-shadow:0 50px 90px -50px #000}
.cz-split__media img{width:100%;height:100%;object-fit:cover}

/* ---- EDUCATION ---- */
.cz-edu{padding:clamp(4rem,10vh,9rem) 0}
.cz-edu__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.cz-edu__grid--noimg{grid-template-columns:1fr}
.cz-edu__media{aspect-ratio:5/6;border-radius:16px;overflow:hidden;box-shadow:0 50px 90px -50px #000}
.cz-edu__media img{width:100%;height:100%;object-fit:cover}
.cz-edu__copy h2{font-size:var(--h2);margin-bottom:1.8rem}
.cz-edu__points{display:grid;gap:1.4rem}
.cz-edu__grid--noimg .cz-edu__points{grid-template-columns:1fr 1fr}
.cz-pt{display:flex;gap:1rem;align-items:flex-start}
.cz-pt__ic{flex:0 0 44px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(201,168,106,.4);color:var(--gold)}
.cz-pt h4{font-family:var(--serif);font-size:1.45rem;margin:0 0 .3rem}
.cz-pt p{color:var(--mut);font-size:.96rem;margin:0;max-width:42ch}

/* ---- TESTIMONIALS ---- */
.cz-tst{padding:clamp(4rem,10vh,9rem) 0;background:linear-gradient(180deg,var(--bg),var(--bg2),var(--bg))}
.cz-tst__head{text-align:center;margin-bottom:3rem}
.cz-tst__head h2{font-size:var(--h2)}
.cz-tst__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.cz-tst__card{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:2rem}
.cz-tst__stars{color:var(--champ);letter-spacing:.2em;margin-bottom:1rem;font-size:.8rem}
.cz-tst__card blockquote{font-family:var(--serif);font-size:1.4rem;line-height:1.32;margin:0 0 1.3rem}
.cz-tst__card figcaption{font-size:.78rem;letter-spacing:.1em;color:var(--mut);text-transform:uppercase}

/* ---- FAQ ---- */
.cz-faq{padding:clamp(4rem,10vh,9rem) 0}
.cz-faq__wrap{max-width:880px}
.cz-faq__head{text-align:center;margin-bottom:2.6rem}
.cz-faq__head h2{font-size:var(--h2)}
.cz-faq__item{border-bottom:1px solid var(--line)}
.cz-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;cursor:pointer;
  list-style:none;padding:1.4rem 0;font-family:var(--serif);font-size:1.35rem}
.cz-faq__item summary::-webkit-details-marker{display:none}
.cz-faq__ic{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:.72rem;transition:transform .4s var(--e)}
.cz-faq__item[open] .cz-faq__ic{transform:rotate(45deg);color:var(--gold)}
.cz-faq__a{padding:0 0 1.6rem}

/* ---- CTA ---- */
.cz-cta{position:relative;text-align:center;padding:clamp(7rem,15vh,13rem) 0;overflow:hidden}
.cz-cta__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;z-index:0}
.cz-cta__orb{width:42vw;height:42vw;left:29%;top:-4%}
.cz-cta__inner{position:relative;z-index:2}
.cz-cta h2{font-size:clamp(2.6rem,7vw,6rem);margin-bottom:1.4rem}
.cz-cta p{color:#cdbfca;max-width:46ch;margin:0 auto 2.6rem}

/* ---- FOOTER ---- */
.cz-foot{background:#0b080b;border-top:1px solid var(--line);padding:4rem 0 2.4rem;color:#8a7e88}
.cz-foot__wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;align-items:start}
.cz-foot__brand .cz-brand{color:#fff;display:inline-block;margin-bottom:.8rem}
.cz-foot__list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;font-size:.82rem;letter-spacing:.06em}
.cz-foot__contact{display:grid;gap:.7rem;font-size:.9rem}
.cz-foot__contact a{display:flex;align-items:center;gap:.6rem}
.cz-foot__contact i{color:var(--champ);width:1rem}
.cz-foot__social{display:flex;gap:1rem;margin-top:.5rem;font-size:1.1rem}
.cz-foot__fine{max-width:var(--wrap);margin:2.6rem auto 0;padding-inline:var(--gut);font-size:.74rem;letter-spacing:.08em;opacity:.7;border-top:1px solid var(--line);padding-top:1.6rem}

@media(max-width:980px){
  .cz-intro__grid,.cz-split__grid,.cz-edu__grid{grid-template-columns:1fr}
  .cz-split--left .cz-split__media{order:0}
  .cz-cards__grid,.cz-cards__grid--3{grid-template-columns:1fr 1fr}
  .cz-tst__grid{grid-template-columns:1fr}
  .cz-foot__wrap{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  img.cz-hero__img--d{display:none} img.cz-hero__img--m{display:block}
  .cz-cards__grid,.cz-cards__grid--3,.cz-cards__grid--2,.cz-edu__grid--noimg .cz-edu__points{grid-template-columns:1fr}
  .cz-foot__wrap{grid-template-columns:1fr}
}

/* ==========================================================================
   CURATED SECTION TONES (editor-controlled, brand-safe — remap a few tokens only).
   Appended last so a tone wins over a section's own default background.
   ========================================================================== */
.cz-tone--plum{background:linear-gradient(180deg,#3a1c31,#241019);color:#f3e9ef;--mut:#cdb3c4;--champ:#E7D6B6}
.cz-tone--ivory{background:var(--ivory);color:#1c191c;--mut:#6b6470;--champ:var(--plum)}
.cz-tone--champagne{background:#ece0cb;color:#2a2026;--mut:#7a6f63;--champ:var(--plum)}
/* light tones: flip prose + card surfaces so contrast stays correct */
.cz-tone--ivory .cz-prose,.cz-tone--champagne .cz-prose{color:#4a434a}
.cz-tone--ivory .cz-prose a,.cz-tone--champagne .cz-prose a{color:var(--plum)}
.cz-tone--ivory .cz-eyebrow,.cz-tone--champagne .cz-eyebrow{color:var(--plum)}
.cz-tone--ivory.cz-tst,.cz-tone--champagne.cz-tst{background:var(--ivory)}
.cz-tone--ivory .cz-tst__card,.cz-tone--champagne .cz-tst__card{background:#fff;border-color:rgba(33,27,32,.12)}
.cz-tone--ivory .cz-tst__card blockquote,.cz-tone--champagne .cz-tst__card blockquote{color:#2a2026}
.cz-tone--ivory .cz-faq__item,.cz-tone--champagne .cz-faq__item{border-color:rgba(33,27,32,.14)}
.cz-tone--ivory .cz-pt__ic,.cz-tone--champagne .cz-pt__ic{border-color:rgba(74,37,63,.35);color:var(--plum)}
.cz-tone--ivory .cz-soft::before,.cz-tone--champagne .cz-soft::before{display:none}

/* ==========================================================================
   MOBILE NAV DRAWER (premium glass panel; burger morphs to X)
   ========================================================================== */
.cz-mobilenav{position:fixed;inset:0;z-index:49;display:flex;flex-direction:column;justify-content:center;gap:1.6rem;
  padding:6rem var(--gut) 3rem;background:rgba(16,12,16,.94);backdrop-filter:blur(26px) saturate(1.3);
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .5s var(--e),transform .6s var(--e),visibility .5s}
.cz-menu-open .cz-mobilenav{opacity:1;visibility:visible;transform:none}
.cz-mobilenav li{list-style:none;margin:0}
.cz-mobilenav a{display:inline-block;font-family:var(--serif);font-size:2rem;color:#fff;letter-spacing:.01em;
  opacity:0;transform:translateY(14px);transition:opacity .5s var(--e),transform .5s var(--e)}
.cz-menu-open .cz-mobilenav a{opacity:1;transform:none}
.cz-menu-open .cz-mobilenav li:nth-child(1) a{transition-delay:.08s}
.cz-menu-open .cz-mobilenav li:nth-child(2) a{transition-delay:.14s}
.cz-menu-open .cz-mobilenav li:nth-child(3) a{transition-delay:.2s}
.cz-menu-open .cz-mobilenav li:nth-child(4) a{transition-delay:.26s}
.cz-menu-open .cz-mobilenav li:nth-child(5) a{transition-delay:.32s}
.cz-mobilenav .cz-btn{align-self:flex-start;margin-top:1rem;font-size:.74rem}
/* grouped submenus in the drawer: parent as a quiet label, children stacked + indented */
.cz-mobilenav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}
.cz-mobilenav .menu-item-has-children>a{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--champ);opacity:1;font-family:var(--sans);pointer-events:none}
.cz-mobilenav .sub-menu{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.cz-mobilenav .sub-menu a{font-size:1.6rem}
.cz-menu-open{overflow:hidden}
/* burger morph */
.cz-menu-open .cz-burger span:first-child{transform:translateY(4px) rotate(45deg)}
.cz-menu-open .cz-burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.cz-menu-open .cz-head{color:#fff}

/* ==========================================================================
   MOBILE POLISH — strong defaults so future edits are content-only
   ========================================================================== */
@media(max-width:920px){
  :root{--h1:clamp(2.6rem,11vw,4.2rem);--h2:clamp(2rem,7.5vw,3rem)}
  /* CTAs: calmer, more premium on phones — smaller type, tighter pill, real 46px tap target */
  .cz-btn{min-height:46px;padding:.72rem .72rem .72rem 1.3rem;font-size:.64rem;letter-spacing:.13em;gap:.6rem}
  .cz-btn__ic{width:28px;height:28px;flex-basis:28px}
  .cz-btn__ic i{font-size:.68rem}
  .cz-hero{min-height:92svh}
  .cz-hero__inner{padding-bottom:clamp(3rem,9vh,5rem)}
  .cz-hero__title{max-width:18ch}
  .cz-hero__sub{font-size:1.05rem}
  /* Side by side, not stacked: two CTAs sharing the row equally reads far more considered on a phone
     than one pill sitting directly above the other. Each button shrinks to fit its half rather than
     forcing single-line text past the available width. */
  .cz-hero__acts{gap:.6rem;width:100%;max-width:400px;flex-wrap:nowrap}
  .cz-hero--center .cz-hero__acts{margin-inline:auto}
  .cz-hero__acts .cz-btn{flex:1 1 0;min-width:0;justify-content:center;padding-left:.9rem}
  .cz-hero__acts .cz-btn span:first-child{white-space:normal;text-align:left}
  .cz-hero--split .cz-hero__inner{max-width:none}
  /* sections breathe but don't sprawl on phones */
  .cz-intro,.cz-cards,.cz-split,.cz-edu,.cz-tst,.cz-faq{padding-block:clamp(3.2rem,10vh,5rem)}
  .cz-intro__body{font-size:1.05rem}
  .cz-split__media,.cz-edu__media{aspect-ratio:4/5}
  .cz-card{aspect-ratio:3/4}
  .cz-cta{padding-block:clamp(4.5rem,14vh,8rem)}
}
@media(max-width:620px){
  .cz-wrap{--gut:1.25rem}
  .cz-cards__head{flex-direction:column;align-items:flex-start;gap:.8rem}
  .cz-cards__grid{gap:1rem}
  .cz-card{aspect-ratio:4/5}
  .cz-faq__item summary{font-size:1.15rem}
  .cz-foot__wrap{gap:1.6rem}
}

/* ==========================================================================
   CURATED PER-SECTION APPEARANCE — spacing · accent · background (editor controls)
   ========================================================================== */
/* spacing: curated steps, override component padding */
.cz-space--flush{padding-block:0 !important}
.cz-space--compact{padding-block:clamp(2.2rem,5vh,3.4rem) !important}
.cz-space--spacious{padding-block:clamp(6rem,15vh,11rem) !important}

/* accent: remap the champagne token within the section (eyebrow / emphasis / links) */
.cz-accent--gold{--champ:var(--gold)}
.cz-accent--plum{--champ:#c489ad}

/* decorative background layer (image / video / gradient) */
.cz-has-bg{position:relative;overflow:hidden}
.cz-has-bg>.cz-wrap{position:relative;z-index:2}
.cz-secbg{position:absolute;inset:0;z-index:0;pointer-events:none}
.cz-secbg__media{width:100%;height:100%;object-fit:cover}
.cz-secbg__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,12,16,.74),rgba(16,12,16,.84))}
.cz-secbg--gradient{background:
  radial-gradient(120% 90% at 18% 12%,rgba(131,77,114,.34),transparent 60%),
  radial-gradient(120% 90% at 90% 92%,rgba(201,168,106,.16),transparent 55%),
  linear-gradient(180deg,var(--bg2),var(--bg))}

/* ==========================================================================
   STATISTICS / proof-points section
   ========================================================================== */
.cz-stats{padding-block:clamp(3.5rem,9vh,6.5rem)}
.cz-stats__head{max-width:60ch;margin:0 auto clamp(2rem,5vh,3.4rem);text-align:center}
.cz-stats__intro{color:var(--mut);margin-top:.8rem}
.cz-stats__grid{display:grid;gap:clamp(1rem,3vw,2.4rem);grid-template-columns:repeat(4,1fr)}
.cz-stats__grid--1{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
.cz-stats__grid--2{grid-template-columns:repeat(2,1fr);max-width:760px;margin-inline:auto}
.cz-stats__grid--3{grid-template-columns:repeat(3,1fr)}
.cz-stat{text-align:center;padding:clamp(1.4rem,3.5vh,2.3rem) 1rem;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(247,243,237,.05),rgba(247,243,237,.02));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.06)}
.cz-stat__value{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,5vw,4.2rem);line-height:1;color:var(--champ)}
.cz-stat__label{display:block;margin-top:.7rem;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
@media(max-width:760px){.cz-stats__grid,.cz-stats__grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.cz-stats__grid,.cz-stats__grid--2,.cz-stats__grid--3{grid-template-columns:1fr}}

/* ==========================================================================
   ATMOSPHERE + FLOATING BRAND SEAL (homepage signature thread)
   ========================================================================== */
.cz-main{position:relative;z-index:1} /* keep content above the fixed atmosphere */
.cz-atmos{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.7;
  background:radial-gradient(58vw 58vw at 82% 6%,rgba(94,52,80,.20),transparent 60%),
            radial-gradient(48vw 48vw at 10% 90%,rgba(201,168,106,.09),transparent 60%)}
.cz-mark{display:inline-flex}
.cz-mark svg,.cz-mark img{display:block;width:100%;height:100%;object-fit:contain}
.cz-motif{position:fixed;left:calc(50% + var(--mx,0vw));top:var(--my,12vh);
  transform:translate(-50%,-50%) rotate(var(--mr,0deg));width:clamp(64px,7vw,118px);aspect-ratio:1;
  z-index:2;pointer-events:none;opacity:calc(var(--mo,0)*.92);
  filter:drop-shadow(0 14px 26px rgba(0,0,0,.45)) drop-shadow(0 0 22px rgba(201,168,106,.4));transition:opacity .6s var(--e)}
.cz-motif svg{display:block;width:100%;height:100%}
@media(max-width:760px){.cz-motif{width:58px;opacity:calc(var(--mo,0)*.7)}}
@media(prefers-reduced-motion:reduce){.cz-motif{display:none} .cz-atmos{opacity:.5}}

/* ==========================================================================
   CAROUSEL SYSTEM (scroll-snap + clean arrows; native swipe on mobile)
   ========================================================================== */
.cz-carousel__nav{display:flex;gap:.6rem;flex:0 0 auto}
.cz-carousel__btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line);background:transparent;
  color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.78rem;
  transition:background .35s var(--e),border-color .35s var(--e),opacity .35s var(--e)}
.cz-carousel__btn:hover{background:rgba(255,255,255,.08);border-color:var(--gold)}
.cz-carousel__btn:disabled{opacity:.28;cursor:default}
/* icon standardisation — consistent glyph scale + true centring inside circular wrappers */
.cz-pt__ic i{font-size:1rem;line-height:1}
.cz-carousel__btn i{font-size:.9rem;line-height:1}
.cz-hero__cue i{font-size:1rem;line-height:1}
.cz-faq__ic i{line-height:1}
.cz-pt__ic,.cz-carousel__btn,.cz-faq__ic{transition:border-color .35s var(--e),color .35s var(--e),background .35s var(--e),transform .4s var(--e)}
.cz-carousel__track{display:flex;gap:clamp(1rem,2vw,1.6rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.5rem var(--gut) 1.4rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cz-carousel__track::-webkit-scrollbar{display:none}
.cz-slide{scroll-snap-align:start;flex:0 0 auto}
/* Scroll-position indicator, a quiet "how far through this rail am I" cue rather than dots-per-
   slide (which would need per-slide markup); scaleX driven from JS scroll-progress math. */
.cz-carousel__progress{margin:0 var(--gut);height:2px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.cz-carousel__progress span{display:block;height:100%;width:100%;transform-origin:left center;transform:scaleX(.06);
  background:var(--champ);transition:transform .25s var(--e)}
@media(prefers-reduced-motion:reduce){.cz-carousel__progress span{transition:none}}
/* Dot navigation — one dot per real slide, generated by cizele.js. The primary mobile affordance
   (arrows are desktop-oriented); larger invisible hit-area on touch keeps taps comfortable. */
.cz-carousel__dots{display:flex;justify-content:center;gap:.55rem;margin-top:1.4rem;flex-wrap:wrap}
.cz-carousel__dot{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.22);transition:background .3s var(--e),transform .3s var(--e)}
.cz-carousel__dot:hover{background:rgba(255,255,255,.5)}
.cz-carousel__dot.is-on{background:var(--champ);transform:scale(1.2)}
.cz-carousel__dot:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--champ)}
.cz-tone--ivory .cz-carousel__dot,.cz-tone--champagne .cz-carousel__dot{background:rgba(33,26,30,.2)}
.cz-tone--ivory .cz-carousel__dot.is-on,.cz-tone--champagne .cz-carousel__dot.is-on{background:var(--plum)}
@media(max-width:768px){.cz-carousel__dot{width:9px;height:9px}.cz-carousel__dot::after{content:"";position:absolute;inset:-9px}}

/* lifestyle gallery */
.cz-gallery{padding:clamp(4rem,10vh,9rem) 0}
.cz-gallery__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:1.8rem}
.cz-gallery__head h2{font-size:var(--h2)}
.cz-gallery .cz-slide{width:clamp(250px,30vw,400px)}
.cz-slide__media{display:block;aspect-ratio:4/5;border-radius:16px;overflow:hidden;box-shadow:0 30px 60px -40px #000}
.cz-slide__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e)}
a.cz-slide:hover .cz-slide__media img{transform:scale(1.05)}
.cz-slide__cap{display:block;margin-top:.9rem;font-size:.82rem;letter-spacing:.04em;color:var(--mut)}

/* ── The cut feature: one ring at real scale, cuts offered beneath ────────────────────────────
   Third iteration of this section, and the reasoning matters because the first two were both
   "correct" and still wrong.

   v1 was a hover-to-flip card. It hid half the content, needed a heading that instructed the
   visitor to hover, took two taps on touch to reach its own link, and concealed three genuinely
   mismatched ring/stone pairings because you had to hover each card to see any pairing at all.

   v2 was a rail of four bordered cards. Honest, but a product-grid pattern: four identical boxes,
   each roughly 55% empty, the stone reduced to a grey thumbnail. A jewellery house does not present
   four small boxed things in a row.

   v3 shows one piece properly. No card, no border, no panel — the ring sits on the open ground at a
   size that lets it be looked at, with the cuts as a quiet row beneath. Nothing is hidden and
   nothing requires hover, so it behaves identically on touch. */
.cz-feature{padding:clamp(4rem,9vh,7rem) 0;position:relative}
.cz-feature__inner{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
h2.cz-feature__h{font-size:var(--fs-1);line-height:var(--lh-tight);letter-spacing:var(--ls-tight);
  max-width:18ch;margin:0 0 clamp(2.5rem,5vw,4rem)}

.cz-feature__body{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:center}

/* The stage is deliberately not a card: no background, no border, no radius. The renders are cut
   out on transparency, so the ground already IS the presentation surface. A fixed aspect keeps the
   rail from jumping as cuts of different proportion swap in. */
/* 5/4 rather than square: a ring is wider than it is tall, and a square stage left a band of
   empty ground under every render. */
.cz-feature__stage{position:relative;aspect-ratio:5/4;max-height:min(46vh,430px)}
.cz-feature__ring{position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:scale(.985);
  transition:opacity .55s var(--e),transform .55s var(--e),visibility 0s linear .55s}
.cz-feature__ring.is-on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.cz-feature__ring img{width:100%;height:100%;object-fit:contain;
  /* A real object casts a shadow; a cut-out floating on a flat ground reads as a sticker. */
  filter:drop-shadow(0 26px 34px rgba(0,0,0,.55))}

.cz-feature__copy{max-width:38ch}
.cz-feature__cut{margin:0;font-family:var(--sans);font-size:.72rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--champ)}
.cz-feature__name{margin:.75rem 0 0;font-family:var(--serif);font-size:clamp(2rem,3.4vw,2.9rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--ivory)}
.cz-feature__desc{margin:1rem 0 0;font-size:1.02rem;line-height:1.65;color:#B9AEB8;max-width:34ch}
.cz-feature__cta{display:inline-flex;align-items:center;gap:.6rem;margin-top:1.9rem;
  font-family:var(--sans);font-size:.82rem;letter-spacing:.06em;color:var(--ivory);
  text-decoration:none;padding-bottom:.45rem;border-bottom:1px solid rgba(231,214,182,.4);
  transition:border-color .3s ease,color .3s ease,gap .3s var(--e)}
.cz-feature__cta:hover{color:var(--champ);border-bottom-color:var(--champ);gap:.85rem}
.cz-feature__cta:focus-visible{outline:2px solid var(--champ);outline-offset:4px;border-radius:2px}
.cz-feature__cta i,.cz-feature__cta .czi{font-size:.72rem}

/* The cut selector. A hairline rule carries the row so the buttons read as one instrument rather
   than four detached chips, and the active cut is marked by BOTH a champagne rule and full-opacity
   type — never colour alone. */
.cz-feature__cuts{display:flex;gap:clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2.25rem,4vw,3.25rem);
  padding-top:1.4rem;border-top:1px solid var(--line);flex-wrap:wrap}
.cz-feature__cutbtn{position:relative;display:flex;align-items:center;gap:.85rem;padding:.75rem 0 .9rem;
  background:none;border:0;cursor:pointer;font:inherit;color:inherit;opacity:.52;
  transition:opacity .3s ease}
.cz-feature__cutbtn:hover{opacity:.85}
.cz-feature__cutbtn.is-on{opacity:1}
/* The active marker is a rule that grows from the left, not a fill — quieter, and it reads as a
   selection on the same hairline the row already sits on. */
.cz-feature__cutbtn::after{content:"";position:absolute;left:0;right:0;top:-1.4rem;height:1px;
  background:var(--champ);transform:scaleX(0);transform-origin:left center;
  transition:transform .45s var(--e)}
.cz-feature__cutbtn.is-on::after{transform:scaleX(1)}
.cz-feature__cutbtn:focus-visible{outline:2px solid var(--champ);outline-offset:4px;border-radius:3px}
.cz-feature__chip{flex:0 0 auto;width:30px;height:30px;display:grid;place-items:center}
/* Line-art SVG, so it inherits the row's own opacity and needs no blend trickery. The stone
   PHOTOS were tried here first and could not work: they ship on a light studio card, and no blend
   mode removes a light background from a light-on-light source — they read as grey UI tiles. */
.cz-feature__chip img{width:100%;height:100%;object-fit:contain;opacity:.9}
.cz-feature__lbl{font-family:var(--sans);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ivory);white-space:nowrap}

/* Light grounds */
.cz-tone--ivory .cz-feature__name,.cz-tone--champagne .cz-feature__name{color:var(--plum-deep)}
.cz-tone--ivory .cz-feature__desc,.cz-tone--champagne .cz-feature__desc{color:#5c4f58}
.cz-tone--ivory .cz-feature__cut,.cz-tone--champagne .cz-feature__cut,
.cz-tone--ivory .cz-feature__lbl,.cz-tone--champagne .cz-feature__lbl{color:var(--plum)}
.cz-tone--ivory .cz-feature__cta,.cz-tone--champagne .cz-feature__cta{color:var(--plum-deep)}


@media(max-width:900px){
  .cz-feature__body{grid-template-columns:1fr;gap:clamp(1.5rem,5vw,2.5rem)}
  .cz-feature__stage{aspect-ratio:4/3;max-height:44vh}
  .cz-feature__copy{max-width:none}
  /* The row would wrap into a ragged block at this width; a single scrolling line keeps it one
     instrument and keeps every cut reachable with a thumb. */
  .cz-feature__cuts{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    gap:2rem;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut)}
  .cz-feature__cuts::-webkit-scrollbar{display:none}
  .cz-feature__cutbtn{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){
  .cz-feature__ring{transition:opacity .2s linear,visibility 0s linear .2s;transform:none}
  .cz-feature__ring.is-on{transform:none}
  .cz-feature__cutbtn::after{transition:none}
  .cz-feature__cta{transition:none}
}


/* testimonials as carousel */
.cz-tst__head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;text-align:left;margin-bottom:2.2rem}
.cz-tst__head h2{font-size:var(--h2)}
.cz-carousel--quotes .cz-slide{width:clamp(300px,33vw,420px);white-space:normal}
.cz-carousel--quotes .cz-tst__card{height:100%}

@media(max-width:620px){
  .cz-gallery .cz-slide{width:78vw}
  .cz-carousel--quotes .cz-slide{width:84vw}
  .cz-gallery__head,.cz-tst__head{flex-direction:column;align-items:flex-start;gap:1rem}
}

/* ==========================================================================
   Gemstone Shape Selector — "Begin with a shape" (revived + modernised)
   Each cut is a sculpted gem disc; hover lifts it with a gold ring + champagne glow; clicking lands
   in the Diamonds browser pre-filtered. Intelligent, tactile, unmistakably atelier.
   ========================================================================== */
.cz-shapesel{position:relative;padding:clamp(4.5rem,9vh,7.5rem) 0;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cz-shapesel__orb{width:46vw;height:46vw;left:60%;top:-14%;opacity:.4}
.cz-shapesel__head{display:grid;grid-template-columns:1fr;gap:1.1rem;margin-bottom:clamp(2.4rem,5vh,3.6rem);max-width:760px}
.cz-shapesel__title{font-size:clamp(2.1rem,4.4vw,3.3rem)}
.cz-shapesel__sub{color:var(--mut);max-width:60ch;font-size:1.02rem;line-height:1.6}
@media(min-width:860px){
  .cz-shapesel__head{grid-template-columns:1.1fr .9fr;align-items:end;max-width:none}
  .cz-shapesel__sub{margin-bottom:.3rem}
}
.cz-shapesel__row{display:grid;grid-template-columns:repeat(10,1fr);gap:.7rem;list-style:none;margin:0;padding:0}
.cz-shapesel__cell{min-width:0}
.cz-shapesel__shape{display:flex;flex-direction:column;align-items:center;gap:.85rem;padding:1.4rem .4rem 1.1rem;
  border-radius:18px;border:1px solid transparent;position:relative;isolation:isolate;
  transition:transform .45s var(--e),background .45s var(--e),border-color .45s var(--e),box-shadow .45s var(--e)}
/* the gem disc */
.cz-shapesel__disc{display:flex;align-items:center;justify-content:center;width:74px;height:74px;border-radius:999px;
  background:radial-gradient(120% 120% at 50% 22%,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid var(--line);box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
  transition:transform .45s var(--e),border-color .45s var(--e),box-shadow .45s var(--e),background .45s var(--e)}
.cz-shapesel__disc img{width:46px;height:46px;object-fit:contain;opacity:.82;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.4));transition:opacity .45s var(--e),transform .45s var(--e),filter .45s var(--e)}
.cz-shapesel__label{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--txt);opacity:.86;transition:color .4s var(--e),opacity .4s var(--e)}
.cz-shapesel__go{position:absolute;bottom:.55rem;left:50%;transform:translate(-50%,6px);opacity:0;
  font-size:.6rem;color:var(--champ);transition:opacity .4s var(--e),transform .4s var(--e)}
/* hover / focus — lift, gold ring, gem glow, arrow reveal */
.cz-shapesel__shape:hover,.cz-shapesel__shape:focus-visible{transform:translateY(-6px);outline:none;
  border-color:rgba(201,168,106,.28);background:linear-gradient(180deg,rgba(201,168,106,.07),rgba(201,168,106,.02));
  box-shadow:0 26px 48px -28px rgba(201,168,106,.5),0 2px 10px -6px rgba(0,0,0,.5)}
.cz-shapesel__shape:hover .cz-shapesel__disc,.cz-shapesel__shape:focus-visible .cz-shapesel__disc{
  border-color:rgba(228,207,158,.85);box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 0 0 1px rgba(228,207,158,.4),0 0 26px -4px rgba(201,168,106,.55);transform:scale(1.04)}
.cz-shapesel__shape:hover .cz-shapesel__disc img,.cz-shapesel__shape:focus-visible .cz-shapesel__disc img{opacity:1;transform:scale(1.06)}
.cz-shapesel__shape:hover .cz-shapesel__label,.cz-shapesel__shape:focus-visible .cz-shapesel__label{color:var(--champ);opacity:1}
.cz-shapesel__shape:hover .cz-shapesel__go,.cz-shapesel__shape:focus-visible .cz-shapesel__go{opacity:.9;transform:translate(-50%,0)}
.cz-shapesel__foot{margin-top:clamp(2rem,4vh,3rem);display:flex;justify-content:center}
/* staggered reveal-in (uses [data-cz-reveal-group] → .is-in cascade) */
.cz-shapesel.is-in .cz-shapesel__cell{animation:cz-shaperise .7s var(--e) both;animation-delay:calc(var(--cz-i,0)*45ms + .1s)}
@keyframes cz-shaperise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* On light tones the disc/labels flip to ink for contrast */
.cz-tone--ivory .cz-shapesel__label,.cz-tone--champagne .cz-shapesel__label{color:var(--plum-deep)}
.cz-tone--ivory .cz-shapesel__disc img,.cz-tone--champagne .cz-shapesel__disc img{filter:none;opacity:.9}
@media(max-width:980px){.cz-shapesel__row{grid-template-columns:repeat(5,1fr);gap:.6rem}}
@media(max-width:560px){.cz-shapesel__row{grid-template-columns:repeat(4,1fr)}.cz-shapesel__disc{width:62px;height:62px}.cz-shapesel__disc img{width:38px;height:38px}}
@media(prefers-reduced-motion:reduce){
  .cz-shapesel.is-in .cz-shapesel__cell{animation:none}
  .cz-shapesel__shape:hover,.cz-shapesel__shape:focus-visible{transform:none}
}

/* ── Assurances ────────────────────────────────────────────────────────────────────────────────
   What the atelier actually commits to. Content comes from Content Cards (placement "assurances"),
   so the wording is the owner's, not the template's.

   Deliberately not the competitor pattern of four identical badge tiles with icon discs — that
   reads as a shipping widget bolted onto a jewellery page, and identical card grids are the most
   recognisable generated-page tell there is. Instead: the promise carries the weight as type, and
   the commitments sit beneath it on one hairline-divided row, closer to a maker's mark than a
   feature list. No box, no icon, no gradient, no lift.

   Sits on the dark ground by default and inverts under .cz-tone--ivory, because it is placed on
   both. Colours are stated for both grounds rather than inherited, so it can never land as
   near-invisible text the way the archive's step titles did. */
.cz-assure{padding:clamp(3.5rem,7vw,6rem) 0;border-top:1px solid var(--line)}
.cz-assure__inner{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.cz-assure__lead{max-width:44ch}
h2.cz-assure__h{margin:0;font-family:var(--serif);font-size:var(--fs-3);line-height:var(--lh-snug);
  letter-spacing:var(--ls-tight);color:var(--ivory)}
.cz-assure__say{margin:.9rem 0 0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--mut);max-width:56ch}

.cz-assure__list{list-style:none;margin:clamp(2.25rem,4vw,3rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(1.5rem,3vw,2.5rem)}
.cz-assure__item{display:flex;flex-direction:column;gap:.5rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.cz-assure__t{font-family:var(--sans);font-size:var(--fs-sm);font-weight:500;letter-spacing:.02em;color:var(--champ)}
.cz-assure__d{font-size:var(--fs-sm);line-height:1.65;color:var(--mut);max-width:34ch}

.cz-tone--ivory .cz-assure,.cz-soft .cz-assure{border-top-color:rgba(46,23,38,.14)}
.cz-tone--ivory h2.cz-assure__h,.cz-soft h2.cz-assure__h{color:var(--plum-deep)}
.cz-tone--ivory .cz-assure__say,.cz-soft .cz-assure__say,
.cz-tone--ivory .cz-assure__d,.cz-soft .cz-assure__d{color:#5c4f58}
.cz-tone--ivory .cz-assure__t,.cz-soft .cz-assure__t{color:var(--plum)}
.cz-tone--ivory .cz-assure__item,.cz-soft .cz-assure__item{border-top-color:rgba(46,23,38,.14)}

@media(max-width:600px){
  /* Stacked, the row becomes a list: close the gap so consecutive hairlines read as one divider
     set rather than three floating fragments. */
  .cz-assure__list{grid-template-columns:1fr;gap:0}
  .cz-assure__item{padding:1.1rem 0 1.25rem}
}