/* ==========================================================================
   CIZELE design system — base (tokens · typography · chrome · buttons · FX)
   Cinematic, editorial, calm. Carried from the cinematic concept as the site identity.
   ========================================================================== */
@font-face{font-family:"Cormorant Garamond";src:local("Cormorant Garamond");font-display:swap}

:root{
  --bg:#100C10; --bg2:#17111A; --bg3:#1f1622; --panel:#241a2b; --line:rgba(255,255,255,.1);
  --ivory:#F7F3ED; --txt:#ECE6EC; --mut:#9a8e98;
  --plum:#5E3450; --plum-lo:#834d72; --plum-deep:#2E1726;
  --gold:#C9A86A; --champ:#E7D6B6; --ice:#BFD3E6;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;
  --e:cubic-bezier(.16,1,.3,1); --e2:cubic-bezier(.62,.05,.01,.99);
  --wrap:1440px; --gut:clamp(1.3rem,4vw,3.6rem);
  --h1:clamp(3.2rem,8vw,7.6rem); --h2:clamp(2.2rem,5vw,4rem); --h3:clamp(1.6rem,3vw,2.4rem);

  /* ── TYPE SCALE — one predictable ramp, decoupled from heading level. Choose the HTML tag by
     document structure, the size by class/token. Values match the sizes already used site-wide so
     migrating a class to a token is size-neutral. ── */
  --fs-display:clamp(3.2rem,8vw,7.6rem); /* hero display (= --h1) */
  --fs-1:clamp(2.4rem,5.5vw,4.4rem);     /* big page / chapter title */
  --fs-2:clamp(2rem,4vw,3.2rem);         /* major section title */
  --fs-3:clamp(1.5rem,3vw,2.2rem);       /* subsection title */
  --fs-4:clamp(1.25rem,2.2vw,1.55rem);   /* card / small heading */
  --fs-5:clamp(1.05rem,1.6vw,1.25rem);   /* micro heading */
  --fs-body-lg:1.125rem; --fs-body:1rem; --fs-sm:.875rem; --fs-caption:.8rem; --fs-label:.66rem;
  --lh-display:1.02; --lh-tight:1.06; --lh-snug:1.2; --lh-body:1.7;
  --ls-tight:-.02em; --ls-label:.26em;

  /* ── SPACING SCALE (4px base) + fluid section rhythm + vertical flow. Closes the "no spacing
     tokens, every section hard-codes padding" gap. ── */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem; --space-10:8rem;
  --section-y:clamp(3rem,7vh,6rem); --section-y-sm:clamp(2rem,5vh,3.6rem); --section-y-lg:clamp(4rem,10vh,8rem);
  --flow:1.2rem; --flow-sm:.6rem; --flow-lg:2rem;

  /* ── RADIUS + SHADOW SCALES (tokenising the values already used across components). ── */
  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px; --r-pill:999px;
  --shadow-card:0 30px 60px -42px rgba(0,0,0,.85); --shadow-float:0 40px 90px -50px rgba(0,0,0,.9);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body.cz{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);font-weight:340;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.cz h1,.cz h2,.cz h3,.cz h4{font-family:var(--serif);font-weight:500;letter-spacing:-.02em}
/* margin + line-height are ZERO-specificity defaults (:where) so page heading classes and the .cz-fs-*
   utilities set their own spacing without a specificity fight. Previously the reset `.cz h1{margin:0;
   line-height:1.02}` (0,1,1) silently beat every page heading class (0,1,0) — zeroing intended margins
   (headings jammed against the next element) and forcing a 1.02 line-height that clipped serif
   descenders (g/j/p/q/y) into the line below. 1.1 keeps descenders clear by default. */
:where(.cz h1,.cz h2,.cz h3,.cz h4){margin:0;line-height:1.1}
.cz h1{font-size:var(--h1)} .cz h2{font-size:var(--h2)} .cz h3{font-size:var(--h3)} .cz h4{font-size:var(--fs-4)}
.cz h1 em,.cz h2 em,.cz h3 em,.cz h4 em{font-style:italic;color:var(--champ)}
/* Type-size utilities — decouple visual size from heading LEVEL. `.cz .cz-fs-*` (specificity 0,2,0)
   cleanly beats the element defaults `.cz h1/h2/h3` (0,1,1), so a heading whose tag is chosen for
   SEMANTICS can take any SIZE with no specificity fight. This is the sanctioned replacement for the
   one-off `h1.czg-h1` / `h1.civ-hero__title` patches — new work uses these utilities. */
.cz .cz-fs-display{font-size:var(--fs-display)} .cz .cz-fs-1{font-size:var(--fs-1)}
.cz .cz-fs-2{font-size:var(--fs-2)} .cz .cz-fs-3{font-size:var(--fs-3)}
.cz .cz-fs-4{font-size:var(--fs-4)} .cz .cz-fs-5{font-size:var(--fs-5)}
.cz .cz-fs-body{font-family:var(--sans);font-size:var(--fs-body);font-weight:340;letter-spacing:normal;line-height:var(--lh-body)}
.cz a{color:inherit;text-decoration:none}
.cz img{display:block;max-width:100%;height:auto}
.cz-wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.cz-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:var(--fs-label);font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;color:var(--champ);margin-bottom:1.4rem}
.cz-eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.6}
/* Section rhythm — one predictable vertical cadence. Sections migrate onto `.cz-section` (+ --sm/--lg)
   instead of each hard-coding its own padding clamp, so the whole site breathes on one system. */
.cz-section{padding-block:var(--section-y)}
.cz-section--sm{padding-block:var(--section-y-sm)}
.cz-section--lg{padding-block:var(--section-y-lg)}
/* Vertical flow — consistent gap between stacked headings / paragraphs / CTAs. */
.cz-flow>*+*{margin-top:var(--flow)}
.cz-flow--sm>*+*{margin-top:var(--flow-sm)}
.cz-flow--lg>*+*{margin-top:var(--flow-lg)}

/* prose (wysiwyg output) */
.cz-prose{color:#d7cbd4;font-size:1.05rem;line-height:1.7}
.cz-prose p{margin:0 0 1rem;max-width:62ch}
.cz-prose a{color:var(--champ);text-decoration:underline;text-underline-offset:3px}

/* ---- film grain ---- */
.cz-grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:60;pointer-events:none;opacity:.045;
  mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:cz-grain 7s steps(6) infinite}
@keyframes cz-grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-4%)}75%{transform:translate(-3%,2%)}100%{transform:translate(0,0)}}

/* ---- gemstone glow orb ---- */
.cz-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none;z-index:0;mix-blend-mode:screen;will-change:transform}
.cz-orb--plum{background:radial-gradient(circle,rgba(131,77,114,.85),transparent 70%)}
.cz-orb--gold{background:radial-gradient(circle,rgba(201,168,106,.6),transparent 70%)}

/* ==========================================================================
   Buttons — "button-in-button" Font Awesome trailing icon
   ========================================================================== */
/* ── Unified CTA system — warm "atelier lacquer / glass". Two languages only:
   PRIMARY = filled lacquer (warm pearl on dark, plum on light) · SECONDARY = frosted glass outline.
   Materially rich (layered gradient + inset highlight + tinted shadow), DECISIVE contrast, refined
   lift-on-hover + settle-on-active micro-motion. The trailing icon disc is always a clear focal jewel. */
.cz-btn{position:relative;display:inline-flex;align-items:center;gap:.7rem;border-radius:999px;
  padding:.85rem .8rem .85rem 1.6rem;font-family:var(--sans);font-size:.685rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;white-space:nowrap;border:1px solid transparent;cursor:pointer;min-height:50px;isolation:isolate;
  -webkit-font-smoothing:antialiased;will-change:transform;
  transition:transform .4s var(--e),box-shadow .4s var(--e),background-color .4s var(--e),border-color .4s var(--e),color .4s var(--e)}
.cz-btn>span:first-child{transform:translateY(.04em);white-space:nowrap}
.cz-btn__ic{width:34px;height:34px;flex:0 0 34px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  transition:transform .4s var(--e),background-color .4s var(--e),box-shadow .4s var(--e)}
.cz-btn__ic i{font-size:.8rem;transition:transform .4s var(--e)}
/* Refined interaction: lift on hover, settle on active. Icon disc glows + arrow nudges along its axis. */
.cz-btn:hover{transform:translateY(-2px)}
.cz-btn:active{transform:translateY(0)}
.cz-btn:hover .cz-btn__ic i{transform:translate(1px,-1px)}
.cz-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--ink,#15090f),0 0 0 4px var(--champ,#C9A86A)}

/* PRIMARY · pearl lacquer — for dark backgrounds (default hero/cta). Warm champagne pearl, INK text
   at near-max contrast. Warm-dark hairline + outer ring keep it delineated on bright imagery. */
.cz-btn--light{
  background:linear-gradient(176deg,#FFFCF6 0%,#F4E8CF 60%,#EAD9B6 100%);color:#1a0b11;border-color:rgba(74,37,63,.28);
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),inset 0 -2px 3px rgba(150,112,66,.28),0 0 0 1px rgba(74,37,63,.08),0 16px 34px -16px rgba(58,28,49,.7)}
.cz-btn--light .cz-btn__ic{background:radial-gradient(120% 120% at 50% 22%,#6e3d5f,#3a1c31);color:#fff;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),0 0 0 1.5px rgba(201,168,106,.85),0 3px 8px -3px rgba(0,0,0,.5)}
.cz-btn--light:hover{box-shadow:inset 0 1px 1px rgba(255,255,255,1),inset 0 -2px 3px rgba(150,112,66,.3),0 0 0 1px rgba(74,37,63,.1),0 22px 44px -16px rgba(58,28,49,.78)}
.cz-btn--light:hover .cz-btn__ic{box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 0 0 1.5px rgba(228,207,158,1),0 4px 12px -3px rgba(0,0,0,.55)}

/* PRIMARY · gradient-border lacquer — the plum gradient lives on the BORDER, not the fill.
   Warm-ivory interior + plum-deep label (≈14:1 contrast) reads on light or dark sections; the icon
   disc carries the filled plum jewel so the brand colour stays present. */
.cz-btn--solid{
  background:linear-gradient(176deg,#FFFDF8,#FBF3E6) padding-box,linear-gradient(168deg,#9a5d86 0%,#4a253f 100%) border-box;
  border:1.5px solid transparent;color:var(--plum-deep);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 14px 32px -18px rgba(74,37,63,.55)}
.cz-btn--solid .cz-btn__ic{background:linear-gradient(180deg,#7a456a,#4a253f);color:#fff;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35),0 0 0 1px rgba(201,168,106,.5),0 2px 6px -2px rgba(0,0,0,.4)}
.cz-btn--solid:hover{
  background:linear-gradient(176deg,#FFFFFF,#FFFFFF) padding-box,linear-gradient(168deg,#b06f9a 0%,#5e3450 100%) border-box;
  box-shadow:inset 0 1px 1px rgba(255,255,255,1),0 20px 42px -18px rgba(74,37,63,.72)}
.cz-btn--solid:hover .cz-btn__ic{box-shadow:inset 0 1px 1px rgba(255,255,255,.5),0 0 0 1.5px rgba(228,207,158,1),0 4px 12px -3px rgba(0,0,0,.5)}

/* SECONDARY · frosted atelier glass — DARK glass base so white text/icon read on ANY photo. */
.cz-btn--ghost{
  background:linear-gradient(180deg,rgba(26,14,22,.52),rgba(26,14,22,.38));backdrop-filter:blur(16px) saturate(1.3);
  border-color:rgba(255,255,255,.66);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.28),0 12px 30px -18px rgba(0,0,0,.6)}
.cz-btn--ghost .cz-btn__ic{background:#fff;color:var(--plum-deep);box-shadow:0 2px 6px -2px rgba(0,0,0,.45)}
.cz-btn--ghost:hover{border-color:#fff;background:linear-gradient(180deg,rgba(26,14,22,.6),rgba(26,14,22,.46))}

/* GOLD glass — accent secondary. Dark base so gold text holds contrast on light imagery. */
.cz-btn--leaf{
  background:linear-gradient(180deg,rgba(40,24,14,.46),rgba(40,24,14,.3));backdrop-filter:blur(14px);
  border-color:rgba(201,168,106,.9);color:#F6E9CB;text-shadow:0 1px 2px rgba(0,0,0,.4);box-shadow:inset 0 1px 1px rgba(255,255,255,.2)}
.cz-btn--leaf .cz-btn__ic{background:linear-gradient(180deg,#E2CF9E,#C9A86A);color:var(--plum-deep);box-shadow:0 2px 6px -2px rgba(0,0,0,.4)}

/* On light-tone sections, the frosted glass secondary flips to plum-on-light (keeps contrast). */
.cz-tone--ivory .cz-btn--ghost,.cz-tone--champagne .cz-btn--ghost{
  background:rgba(74,37,63,.05);border-color:rgba(74,37,63,.55);color:var(--plum);text-shadow:none;box-shadow:inset 0 1px 1px rgba(255,255,255,.6)}
.cz-tone--ivory .cz-btn--ghost .cz-btn__ic,.cz-tone--champagne .cz-btn--ghost .cz-btn__ic{background:linear-gradient(180deg,#6a3a5b,#4a253f);color:#fff}

/* Label color MUST win over `.cz a{color:inherit}` (specificity 0,1,1). These a.cz-btn--* selectors
   are (0,2,1) so the button always controls its own contrast regardless of the section's text color. */
.cz a.cz-btn--light{color:#1a0b11}
.cz a.cz-btn--solid{color:var(--plum-deep)}
.cz a.cz-btn--ghost{color:#fff}
.cz a.cz-btn--leaf{color:#F6E9CB}
.cz .cz-tone--ivory a.cz-btn--ghost,.cz .cz-tone--champagne a.cz-btn--ghost{color:var(--plum)}

@media(prefers-reduced-motion:reduce){
  .cz-btn,.cz-btn__ic,.cz-btn__ic i{transition:box-shadow .3s var(--e),border-color .3s var(--e)}
  .cz-btn:hover,.cz-btn:active{transform:none}
  .cz-btn:hover .cz-btn__ic i{transform:none}
}

/* ==========================================================================
   Header — transparent over hero, solidifies on scroll (cizele.js toggles .is-solid)
   ========================================================================== */
.cz-head{position:fixed;inset:0 0 auto;z-index:50;color:#fff;border-bottom:1px solid transparent;
  transition:background .6s var(--e),backdrop-filter .6s var(--e),border-color .6s var(--e),color .5s var(--e)}
.cz-head__row{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:80px;padding-inline:var(--gut)}
.cz-brand{font-family:var(--serif);font-size:1.7rem;letter-spacing:.5em;padding-left:.5em;font-weight:500;line-height:1}
.cz-nav__list{display:flex;gap:2.4rem;list-style:none;margin:0;padding:0;font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.cz-nav__list a{position:relative;opacity:.82;transition:opacity .4s var(--e)}
.cz-nav__list a:hover{opacity:1}
.cz-nav__list a::after{content:"";position:absolute;left:0;bottom:-6px;height:1px;width:0;background:currentColor;transition:width .5s var(--e)}
.cz-nav__list a:hover::after{width:100%}
.cz-head .cz-btn{padding:.4rem .4rem .4rem 1.15rem;font-size:.62rem;letter-spacing:.18em;min-height:42px}
.cz-head .cz-btn__ic{width:28px;height:28px;flex-basis:28px}
.cz-head .cz-btn__ic i{font-size:.68rem}

/* dropdown submenus (Jewellery / Atelier) */
.cz-nav__list .menu-item-has-children{position:relative}
.cz-nav__list .menu-item-has-children>a{display:inline-flex;align-items:center;gap:.45em}
.cz-nav__list .menu-item-has-children>a::after{content:"";position:static;width:5px;height:5px;background:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);
  opacity:.7;transition:transform .35s var(--e)}
.cz-nav__list .menu-item-has-children:hover>a::after{transform:rotate(225deg) translateY(1px)}
.cz-nav__list .sub-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  min-width:212px;list-style:none;margin:0;padding:.5rem;display:flex;flex-direction:column;
  background:rgba(20,14,22,.94);backdrop-filter:blur(18px) saturate(1.2);border:1px solid var(--line);
  border-radius:14px;box-shadow:0 30px 60px -30px #000;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s var(--e),transform .32s var(--e),visibility .32s;z-index:60}
/* Invisible pointer bridge: fills the gap between the trigger and the panel so the cursor never
   leaves the hover chain on its way down. Sits under the visible panel, full width, slightly taller. */
.cz-nav__list .sub-menu::before{content:"";position:absolute;left:-10px;right:-10px;top:-16px;height:22px;background:transparent}
.cz-nav__list .menu-item-has-children:hover>.sub-menu,
.cz-nav__list .menu-item-has-children:focus-within>.sub-menu,
.cz-nav__list .menu-item-has-children.is-open>.sub-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(10px)}
.cz-nav__list .menu-item-has-children.is-open>a::after{transform:rotate(225deg) translateY(1px)}
.cz-nav__list .sub-menu li{margin:0}
.cz-nav__list .sub-menu a{display:block;padding:.66rem .85rem;border-radius:9px;opacity:.85;white-space:nowrap}
.cz-nav__list .sub-menu a::after{display:none}
.cz-nav__list .sub-menu a:hover{opacity:1;background:rgba(255,255,255,.06);color:var(--champ)}
.cz-head.is-solid{background:rgba(16,12,16,.72);backdrop-filter:blur(22px) saturate(1.3);border-color:var(--line)}

/* Brand logo (transparent wordmark) — replaces the typographic mark when set on CIZELE → Images.
   Sized by height so it scales cleanly; the header row's flex centering keeps it aligned. */
.cz-brand--img{display:inline-flex;align-items:center;padding-left:0;letter-spacing:0;line-height:0}
/* `.cz .cz-brand__img` (0,2,0) must out-specify the `.cz img{height:auto}` reset (0,1,1) above,
   or the wordmark renders at its full intrinsic 410×100 and blows out the header row. */
.cz .cz-brand__img{display:block;height:28px;width:auto;max-width:none;object-fit:contain}
.cz-foot .cz-brand__img{height:30px}
@media(max-width:768px){.cz .cz-brand__img{height:22px}}

/* generic page head / prose pages */
.cz-pagehead{padding:160px 0 3rem}
.cz-pagehead h1{position:relative}
.cz-prose.cz-wrap,.cz-prose{padding-bottom:4rem}

/* reveal utility */
[data-cz-reveal]{opacity:0;transform:translateY(40px);filter:blur(6px);
  transition:opacity 1s var(--e),transform 1s var(--e),filter 1s var(--e)}
[data-cz-reveal].is-in{opacity:1;transform:none;filter:none}

/* soft seams so sections bleed instead of hard-cutting.
   NOTE: the old top gradient banded on dark sections (low-quality seam) — removed. */
.cz-soft{position:relative}

/* ── skip link (a11y) ── */
.cz-skip{position:fixed;top:.6rem;left:.6rem;z-index:200;transform:translateY(-160%);
  background:var(--ivory);color:var(--plum-deep);padding:.7rem 1.1rem;border-radius:999px;
  font:600 .8rem/1 var(--sans);letter-spacing:.04em;text-decoration:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:transform .25s var(--e)}
.cz-skip:focus{transform:none;outline:2px solid var(--gold);outline-offset:2px}

/* ── 404 ── */
.cz-404{min-height:70svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:8rem var(--gut) 4rem}
.cz-404__h{font-family:var(--serif);font-weight:500;font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;margin:.6rem 0;max-width:16ch}
.cz-404__p{color:var(--mut);max-width:44ch;margin:0 0 1.8rem;line-height:1.6}
.cz-404__btns{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:center}

/* ── luxury section dividers (subtle, intentional) ── */
.cz-divider{display:flex;align-items:center;justify-content:center;gap:1rem;width:min(var(--wrap),92vw);margin:0 auto;padding:clamp(1.6rem,4vw,2.8rem) 0}
.cz-divider::before,.cz-divider::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(201,168,106,.55),transparent)}
.cz-divider__d{width:9px;height:9px;flex:0 0 auto;transform:rotate(45deg);background:linear-gradient(135deg,var(--champ),var(--gold));box-shadow:0 0 0 4px rgba(201,168,106,.1)}
.cz-divider--tight{padding:clamp(1rem,3vw,1.8rem) 0}
.cz-divider.on-ivory::before,.cz-divider.on-ivory::after{background:linear-gradient(90deg,transparent,rgba(74,37,63,.3),transparent)}

/* ── paired CTAs: side-by-side on mobile whenever they fit (stack only when truly needed) ── */
@media(max-width:600px){
  body .cza-hero__cta,body .cza-cta__btns,body .czb-cta__btns,body .czc-invite__btns,body .cz-404__btns{gap:.5rem;flex-wrap:nowrap}
  body .cza-hero__cta .cz-btn,body .cza-cta__btns .cz-btn,body .czb-cta__btns .cz-btn,body .czc-invite__btns .cz-btn,body .cz-404__btns .cz-btn{
    /* Equal halves, always side by side; labels kept short enough to stay on one line. */
    flex:1 1 0;min-width:0;justify-content:center;gap:.4rem;
    padding:.8rem .6rem;font-size:.6rem;letter-spacing:.02em;white-space:nowrap}
  body .cza-hero__cta .cz-btn .cz-btn__ic,body .cza-cta__btns .cz-btn .cz-btn__ic,body .czb-cta__btns .cz-btn .cz-btn__ic,
  body .czc-invite__btns .cz-btn .cz-btn__ic,body .cz-404__btns .cz-btn .cz-btn__ic{width:24px;height:24px;flex:0 0 24px;font-size:.55rem}
}

/* ── the atelier list — standalone band above the footer (ivory stationery card) ── */
.cz-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cz-news{padding:clamp(2.5rem,7vw,5rem) max(var(--gut),calc((100% - var(--wrap))/2))}
.cz-news__card{position:relative;display:grid;grid-template-columns:1fr;gap:1.6rem;align-items:center;
  background:var(--ivory);color:#241a22;border-radius:26px;
  padding:clamp(2.2rem,6vw,3.6rem) clamp(1.5rem,5vw,4rem);
  box-shadow:0 50px 100px -50px rgba(0,0,0,.85)}
@media(min-width:880px){.cz-news__card{grid-template-columns:1.05fr .95fr;gap:clamp(2rem,4vw,3.5rem)}}
/* fine gold hairline inset frame — quiet stationery detail */
.cz-news__frame{position:absolute;inset:12px;border:1px solid rgba(201,168,106,.4);border-radius:18px;pointer-events:none}
/* floating ring render breaking the card edge */
.cz-news__ring{position:absolute;top:-46px;right:clamp(.5rem,4vw,3rem);width:clamp(96px,12vw,150px);
  transform:rotate(8deg);filter:drop-shadow(0 22px 24px rgba(46,23,38,.35));pointer-events:none}
.cz-news__copy .cz-eyebrow{color:var(--plum)}
.cz-news__t{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;font-size:clamp(1.8rem,4.4vw,2.8rem);line-height:1.1;color:#241a22;margin:.45rem 0 .4rem}
.cz-news__t em{font-style:italic;color:var(--plum)}
.cz-news__m{color:#6a5d68;font-size:.98rem;line-height:1.55;max-width:38ch;margin:0}
.cz-news__form{position:relative}
.cz-news__row{display:flex;gap:.6rem;flex-wrap:wrap}
.cz-news__form input[type=email]{flex:1;min-width:200px;font:400 1rem/1.4 var(--sans);color:#241a22;
  background:#fff;border:1px solid #e2dad0;border-radius:999px;padding:.9rem 1.3rem;transition:border-color .25s,box-shadow .25s}
.cz-news__form input[type=email]::placeholder{color:#b3a9b0}
.cz-news__form input[type=email]:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(94,52,80,.12)}
.cz-news__fine{color:#9a8e98;font-size:.75rem;margin:.8rem 0 0}
.cz-news__msg{margin:.6rem 0 0;font-size:.85rem}
.cz-news__msg.is-ok{color:#1f5c34}
.cz-news__msg.is-err{color:#8a2020}
@media(max-width:600px){.cz-news__ring{top:-34px;width:84px}}

/* ── marketing popup (position + animation set in Appearance → CIZELE Popup) ── */
.cz-pop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:1rem;background:rgba(16,12,16,.6);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s var(--e)}
.cz-pop.is-open{opacity:1}
.cz-pop[hidden]{display:none}
.cz-pop--bottom-right{align-items:flex-end;justify-content:flex-end;background:transparent;backdrop-filter:none;pointer-events:none;padding:1.2rem}
.cz-pop--bottom-left{align-items:flex-end;justify-content:flex-start;background:transparent;backdrop-filter:none;pointer-events:none;padding:1.2rem}
.cz-pop--bottom-right .cz-pop__card,.cz-pop--bottom-left .cz-pop__card{pointer-events:auto;width:min(380px,92vw);box-shadow:0 30px 70px -24px rgba(0,0,0,.65)}
.cz-pop__card{position:relative;width:min(460px,94vw);background:var(--ivory);color:#241a22;border-radius:20px;
  padding:clamp(1.8rem,5vw,2.6rem);text-align:center;box-shadow:0 60px 120px -40px rgba(0,0,0,.8);
  transition:transform .35s var(--e)}
.cz-pop--anim-rise .cz-pop__card{transform:translateY(14px)}
.cz-pop--anim-fade .cz-pop__card{transform:none}
.cz-pop--anim-slide .cz-pop__card{transform:translateY(40px)}
.cz-pop--anim-slide.cz-pop--bottom-right .cz-pop__card{transform:translateX(60px)}
.cz-pop--anim-slide.cz-pop--bottom-left .cz-pop__card{transform:translateX(-60px)}
.cz-pop.is-open .cz-pop__card{transform:none}
.cz-pop__img{display:block;margin:-0.6rem -0.6rem 1rem;border-radius:14px;overflow:hidden;max-height:190px}
.cz-pop__img img{width:100%;height:100%;object-fit:cover}
.cz-pop__cta{margin-top:.4rem}
@media(prefers-reduced-motion:reduce){.cz-pop,.cz-pop__card{transition:none}}
.cz-pop__card .cz-eyebrow{justify-content:center;color:var(--plum)}
.cz-pop__t{font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,4.5vw,2.1rem);line-height:1.1;margin:.5rem 0 .4rem;color:#241a22}
.cz-pop__m{color:#6a5d68;font-size:.95rem;line-height:1.55;margin:0 0 1.3rem}
.cz-pop__form{display:flex;flex-direction:column;gap:.6rem}
.cz-pop__form input[type=email]{width:100%;font:400 1rem/1.4 var(--sans);color:#241a22;background:#fff;
  border:1px solid #e2dad0;border-radius:999px;padding:.85rem 1.2rem;text-align:center;transition:border-color .25s,box-shadow .25s}
.cz-pop__form input[type=email]:focus{outline:none;border-color:var(--plum);box-shadow:0 0 0 3px rgba(94,52,80,.12)}
.cz-pop__form .cz-btn{justify-content:center}
.cz-pop__x{position:absolute;top:.9rem;right:1rem;width:34px;height:34px;border:none;border-radius:50%;
  background:transparent;color:#8a7e88;font-size:1.4rem;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.cz-pop__x:hover{background:rgba(74,37,63,.08);color:#241a22}
.cz-pop__no{margin-top:.9rem;border:none;background:none;color:#8a7e88;font:500 .8rem/1 var(--sans);
  text-decoration:underline;cursor:pointer}
.cz-pop__no:hover{color:var(--plum)}
.cz-pop .cz-news__msg{text-align:center}
.cz-pop .cz-news__msg.is-ok{color:#1f5c34}
.cz-pop .cz-news__msg.is-err{color:#8a2020}

/* ── inline field validation (consultation form) ── */
.czq-fielderr{color:#8a2020;font-size:.78rem;line-height:1.3;margin:.4rem 0 0}
.czq-field.is-invalid input,.czq-field.is-invalid textarea{border-color:#c96a6a;box-shadow:0 0 0 3px rgba(179,18,46,.08)}

/* ── sticky mobile conversion bar ── */
.cz-stickycta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:.6rem;
  padding:.6rem max(var(--gut),.7rem) calc(.6rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(16,12,16,.86),rgba(16,12,16,.96));backdrop-filter:blur(12px);
  border-top:1px solid rgba(231,214,182,.16)}
.cz-stickycta__primary{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.95rem 1rem;border-radius:999px;font:600 .82rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;border:1.5px solid transparent;
  background:linear-gradient(176deg,#FFFDF8,#FBF3E6) padding-box,linear-gradient(168deg,#9a5d86,#4a253f) border-box}
.cz-stickycta__primary i{font-size:.9rem}
/* Same `.cz a{color:inherit}` (0,1,1) vs. single-class (0,1,0) specificity bug as the .cz-btn--*
   fix above — without this the button silently inherited the page's light body-text color instead of
   the dark plum meant to read against its own cream background, showing as washed-out, low-contrast
   text (reported directly: "not showing professionally"). */
.cz a.cz-stickycta__primary{color:var(--plum-deep)}
.cz-stickycta__alt{flex:0 0 auto;width:52px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;text-decoration:none;border:1px solid rgba(231,214,182,.3);background:rgba(255,255,255,.04)}
.cz a.cz-stickycta__alt{color:var(--champ)}
.cz-stickycta__alt i{font-size:1.05rem}
@media(max-width:768px){
  .cz-stickycta{display:flex}
  body{--cz-stickypad:72px}
  .cz-foot{padding-bottom:80px}
  /* heroes bottom-align their CTAs — clear the sticky bar so buttons are never covered */
  body .cza-hero__inner{padding-bottom:calc(clamp(3.5rem,11vw,6.5rem) + 76px)}
  body .czb-hero{padding-bottom:calc(clamp(3.5rem,8vw,5.5rem) + 76px)}
  body .czc-hero{padding-bottom:calc(clamp(3.5rem,9vw,7rem) + 76px)}
}

@media(max-width:920px){
  .cz-nav,.cz-head>.cz-head__row>.cz-btn{display:none}
  .cz-burger{display:flex}
}
/* Buttons — smaller, more refined on phones */
@media(max-width:600px){
  .cz-btn{padding:.7rem .65rem .7rem 1.3rem;font-size:.625rem;letter-spacing:.16em;min-height:44px;gap:.6rem}
  .cz-btn__ic{width:28px;height:28px;flex-basis:28px}
  .cz-btn__ic i{font-size:.7rem}
}
@media(prefers-reduced-motion:reduce){
  .cz-grain{animation:none}
  [data-cz-reveal]{opacity:1;transform:none;filter:none;transition:none}
  html{scroll-behavior:auto}
}

/* ═══ Offset menu — right-side drawer (extra nav, and the mobile menu) ═══ */
/* Signature burger — an intentional, asymmetric mark (top full, middle short & inset, bottom full)
   framed in a fine champagne ring, not a generic three-bar icon. Middle line extends to full width
   on hover; all three resolve to a clean centred X when the drawer is open. */
.cz-burger{display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;cursor:pointer;color:inherit;
  background:none;border:1px solid transparent;border-radius:50%;transition:border-color .4s var(--e),background-color .4s var(--e)}
.cz-burger:hover,.cz-burger:focus-visible{outline:none;border-color:rgba(201,168,106,.55);background:rgba(201,168,106,.06)}
.cz-burger__lines{position:relative;display:flex;flex-direction:column;align-items:flex-end;gap:5px;width:22px;height:15px}
.cz-burger__lines span{display:block;height:1.5px;background:currentColor;border-radius:2px;
  transform-origin:center;transition:transform .5s var(--e),opacity .35s var(--e),width .4s var(--e),background-color .4s var(--e)}
.cz-burger__lines span:nth-child(1){width:100%}
.cz-burger__lines span:nth-child(2){width:62%}
.cz-burger__lines span:nth-child(3){width:100%}
.cz-burger:hover .cz-burger__lines span,.cz-burger:focus-visible .cz-burger__lines span{width:100%;background:var(--champ)}
/* Open state → centred X (each bar spans full width, meets at the middle) */
.cz-menu-open .cz-burger__lines span{width:100%}
.cz-menu-open .cz-burger__lines span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.cz-menu-open .cz-burger__lines span:nth-child(2){opacity:0}
.cz-menu-open .cz-burger__lines span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
body.cz-menu-open{overflow:hidden}

.cz-omenu{position:fixed;inset:0;z-index:190;visibility:hidden;pointer-events:none}
.cz-menu-open .cz-omenu{visibility:visible;pointer-events:auto}
.cz-omenu__scrim{position:absolute;inset:0;background:rgba(16,12,16,.55);opacity:0;transition:opacity .6s var(--e);backdrop-filter:blur(2px)}
.cz-menu-open .cz-omenu__scrim{opacity:1}
.cz-omenu__panel{position:absolute;top:0;right:0;height:100%;width:50%;background:var(--plum-deep);
  transform:translateX(100%);transition:transform .6s var(--e);box-shadow:-40px 0 90px -40px rgba(0,0,0,.8);
  display:flex;flex-direction:column}
.cz-omenu__panel::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 50% at 85% 12%,rgba(231,214,182,.14),transparent 60%);pointer-events:none}
.cz-menu-open .cz-omenu__panel{transform:translateX(0)}
.cz-omenu__close{position:absolute;top:1.4rem;right:1.4rem;z-index:3;width:44px;height:44px;border:1px solid rgba(231,214,182,.3);border-radius:50%;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .3s,transform .3s}
.cz-omenu__close span{position:absolute;width:16px;height:1.5px;background:var(--ivory)}
.cz-omenu__close span:first-child{transform:rotate(45deg)}
.cz-omenu__close span:last-child{transform:rotate(-45deg)}
.cz-omenu__close:hover,.cz-omenu__close:focus-visible{border-color:var(--champ);transform:rotate(90deg)}
.cz-omenu__inner{position:relative;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;justify-content:center;gap:clamp(1.6rem,5vh,3rem);
  padding:clamp(4.5rem,9vh,6rem) clamp(1.6rem,5vw,4rem) clamp(2rem,5vh,3.5rem);
  opacity:0;transition:opacity .5s .15s var(--e)}
.cz-menu-open .cz-omenu__inner{opacity:1}

.cz-omenu__list{list-style:none;margin:0;padding:0}
.cz-omenu__item{border-top:1px solid rgba(231,214,182,.16);padding:clamp(.65rem,2.2vh,1.1rem) 0;
  padding-left:calc(var(--i) * 1.1rem); /* the offset step-in */
  transform:translateX(24px);opacity:0;
  transition:transform .55s var(--e),opacity .55s var(--e);transition-delay:calc(var(--i) * .07s + .18s)}
.cz-menu-open .cz-omenu__item{transform:none;opacity:1}
.cz-omenu__item:last-child{border-bottom:1px solid rgba(231,214,182,.16)}
.cz-omenu__link{display:inline-flex;align-items:baseline;gap:.85rem;text-decoration:none;color:var(--ivory)}
.cz-omenu__num{font-family:var(--serif);font-size:.9rem;color:var(--champ);opacity:.65;font-style:italic}
.cz-omenu__t{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.05;letter-spacing:-.01em;transition:transform .4s var(--e),color .4s var(--e)}
.cz-omenu__link:hover .cz-omenu__t,.cz-omenu__link:focus-visible .cz-omenu__t{color:var(--champ);transform:translateX(10px)}
.cz-omenu__sub{list-style:none;margin:.7rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.3rem 1.3rem}
.cz-omenu__sub a{color:rgba(247,243,237,.66);font-size:.9rem;letter-spacing:.02em;text-decoration:none;transition:color .3s}
.cz-omenu__sub a:hover,.cz-omenu__sub a:focus-visible{color:var(--champ)}

.cz-omenu__foot{display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.cz-omenu__contact{display:flex;gap:1.3rem;flex-wrap:wrap}
.cz-omenu__contact a{color:rgba(247,243,237,.7);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:color .3s}
.cz-omenu__contact a:hover{color:var(--champ)}

/* On phones a half panel is too tight — go (near) full width where it counts */
@media(max-width:768px){.cz-omenu__panel{width:88%;max-width:420px}}
@media(prefers-reduced-motion:reduce){
  .cz-omenu__scrim,.cz-omenu__panel,.cz-omenu__inner,.cz-omenu__item,.cz-omenu__t{transition-duration:.001ms!important;transition-delay:0ms!important}
  .cz-omenu__link:hover .cz-omenu__t{transform:none}
}

/* Footer navigation in two columns (theme locations "footer" and "footer_2"). One list of ten was
   a long single stack that pushed the contact block far down the page on mobile. */
.cz-foot__nav--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem clamp(1.5rem,3vw,3rem);align-items:start}
@media(max-width:520px){.cz-foot__nav--two{gap:.9rem 1.25rem}}