/* ============================================================
   EZSTEP × ALLURE® — shared stylesheet, all pages
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
ul{list-style:none;}
input,textarea,select{font:inherit;color:inherit;}

:root{
  --black:#121110;
  --black-2:#1B1917;
  --black-3:#242119;
  --gold:#E8B84B;
  --gold-deep:#B8892E;
  --gold-pale:#F3D999;
  --white:#FFFFFF;
  --ivory:#FAF8F4;
  --ink:#1B1917;
  --ink-soft:#5C574F;
  --line:rgba(18,17,16,0.12);
  --line-invert:rgba(255,255,255,0.14);
  --shadow-soft:0 20px 60px rgba(18,17,16,0.12);
  --shadow-deep:0 30px 80px rgba(0,0,0,0.45);
  /* Legibility stack for white/gold text sitting directly on a photo (no
     background box). Three shadows layered together: a tight near-solid
     ring right against the letterforms so edges stay crisp on a bright
     patch of photo, a mid blur for general contrast, and a wide soft one
     that reads as ambient darkening rather than a hard edge. */
  --legible-shadow:0 1px 2px rgba(0,0,0,.95),0 2px 7px rgba(0,0,0,.9),0 6px 22px rgba(0,0,0,.75);
  --radius-lg:24px;
  --radius-md:14px;
  --radius-sm:8px;
  --container:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.nav-open{overflow:hidden;}

h1,h2,h3,h4{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  color:var(--black);
  line-height:1.1;
  letter-spacing:-0.01em;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6em;
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-deep);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--gold);display:inline-block;}
.on-dark .eyebrow{color:var(--gold);text-shadow:0 2px 8px rgba(0,0,0,.5);}

.container{max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,64px);}
.section{padding-block:clamp(64px,9vw,124px);}
.section-tight{padding-block:clamp(44px,6vw,80px);}
.section-top-tight{padding-top:clamp(16px,2.6vw,32px);}

.section-head{max-width:720px;margin-bottom:clamp(32px,5vw,56px);}
.section-head.center{margin-inline:auto;text-align:center;}
.section-head h2{margin-top:12px;font-size:clamp(1.9rem,1.2rem + 2.4vw,3rem);}
.section-head p{margin-top:16px;color:var(--ink-soft);font-size:1.06rem;max-width:62ch;}
.section-head.center p{margin-inline:auto;}
.on-dark .section-head h2{color:var(--white);}
.on-dark .section-head p{color:rgba(255,255,255,.72);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:16px 32px;border-radius:100px;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:all .35s var(--ease);white-space:nowrap;
}
.btn-gold{background:var(--gold);color:var(--black);border:1px solid var(--gold);}
.btn-gold:hover{background:var(--gold-deep);border-color:var(--gold-deep);transform:translateY(-2px);box-shadow:var(--shadow-soft);color:var(--white);}
.btn-outline-light{background:transparent;color:var(--white);border:1px solid rgba(255,255,255,.5);}
.btn-outline-light:hover{background:var(--white);color:var(--black);transform:translateY(-2px);}
.btn-outline-dark{background:transparent;color:var(--black);border:1px solid var(--black);}
.btn-outline-dark:hover{background:var(--black);color:var(--white);transform:translateY(-2px);}

/* ===== HEADER ===== */
.site-header{position:fixed;top:0;left:0;right:0;z-index:150;padding-block:20px;background:linear-gradient(180deg,rgba(10,9,8,.55) 0%,rgba(10,9,8,.22) 55%,rgba(10,9,8,0) 100%);transition:all .4s var(--ease);}
.site-header.scrolled,.site-header.solid{
  padding-block:14px;
  background-color:rgba(15,13,11,.95);
  background-image:
    repeating-linear-gradient(118deg, rgba(232,184,75,.07) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(28deg, rgba(232,184,75,.05) 0 1px, transparent 1px 64px),
    repeating-radial-gradient(circle at 25% 130%, rgba(232,184,75,.05) 0 1px, transparent 1px 52px);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;}

.brand{display:flex;align-items:center;gap:11px;}
.brand-glyph{width:26px;height:26px;color:var(--gold);flex-shrink:0;}
.brand-text{display:flex;flex-direction:column;line-height:1.1;}
.brand-word{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:700;color:var(--white);letter-spacing:.01em;}
.brand-tag{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);}
.menu-panel-brand .brand-glyph{color:var(--gold);width:22px;height:22px;}

.nav-desktop{display:flex;align-items:center;gap:clamp(22px,2.6vw,40px);}
.nav-desktop a{font-size:.85rem;font-weight:500;color:rgba(255,255,255,.88);position:relative;padding-bottom:4px;transition:color .3s var(--ease);}
.nav-desktop a.current{color:var(--gold);}
.nav-desktop a:not(.nav-cta)::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .3s var(--ease);}
.nav-desktop a:not(.nav-cta):hover::after{width:100%;}
.nav-desktop a:not(.nav-cta):hover{color:var(--white);}
.nav-desktop a.nav-cta{padding:11px 24px;border-radius:100px;background:var(--gold);color:var(--black);font-weight:700;letter-spacing:.02em;}
.nav-desktop a.nav-cta:hover{background:var(--gold-deep);color:var(--white);}

.hamburger{display:none;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;width:44px;height:44px;position:relative;z-index:210;}
.hamburger span{display:block;height:2px;background:var(--white);border-radius:2px;transition:all .35s var(--ease);}
.hamburger span:nth-child(1){width:26px;}
.hamburger span:nth-child(2){width:20px;}
.hamburger span:nth-child(3){width:26px;}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);width:26px;background:var(--gold);}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);width:26px;background:var(--gold);}

.menu-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,0.68);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s var(--ease);padding:24px;}
.menu-overlay.active{opacity:1;visibility:visible;}
.menu-panel{
  width:85vw;height:85vh;max-width:560px;max-height:640px;
  background:var(--black-2);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-deep);
  padding:clamp(26px,5vw,42px);display:flex;flex-direction:column;
  transform:scale(.9) translateY(10px);opacity:0;
  transition:transform .4s var(--ease),opacity .4s var(--ease);
  overflow-y:auto;
}
.menu-overlay.active .menu-panel{transform:scale(1) translateY(0);opacity:1;}
.menu-panel-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.12);}
.menu-panel-brand{display:flex;align-items:center;gap:10px;}
.menu-panel-brand span{font-family:'Fraunces',serif;font-size:1.2rem;color:var(--white);}
.menu-close{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:var(--white);transition:all .3s var(--ease);}
.menu-close:hover{background:var(--gold);border-color:var(--gold);color:var(--black);transform:rotate(90deg);}
.menu-panel-nav{display:flex;flex-direction:column;padding-block:18px;flex:1;}
.menu-panel-nav a{display:flex;align-items:baseline;gap:16px;padding:15px 4px;font-family:'Fraunces',serif;font-size:clamp(1.4rem,4.2vw,1.9rem);font-weight:500;color:var(--white);border-bottom:1px solid rgba(255,255,255,.1);transition:color .3s var(--ease),padding-left .3s var(--ease);}
.menu-panel-nav a span{font-family:'Inter',sans-serif;font-size:.7rem;color:var(--gold);letter-spacing:.05em;}
.menu-panel-nav a:hover{color:var(--gold);padding-left:10px;}
.menu-panel-nav a.nav-cta{color:var(--gold);}
.menu-panel-foot{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;}
.menu-panel-foot p{font-size:.8rem;color:rgba(255,255,255,.45);}

@media (min-width:1024px){.hamburger,.menu-overlay{display:none !important;}}
@media (max-width:1023px){.nav-desktop{display:none;}.hamburger{display:flex;}}

/* ===== HOME — 3-slide scroll-snap sequence ===== */
/* Sizing each slide to the real visible screen on mobile.
   Earlier attempts layered a JS-measured window.innerHeight value (written
   to a --vh custom property) on top of a CSS dvh fallback, with the JS
   value taking priority whenever it was present. That was backwards: the
   JS value is what kept spilling the last bit of hero content (the accent
   line) onto the page's white background below the photo on a real
   device, even after the CSS dvh fallback was added and verified correct
   -- because JS runs on every normal visit, its --vh value always won and
   the correct CSS fallback never actually got a chance to apply. Fixed by
   dropping the JS measurement entirely and using only the CSS-native
   "dynamic viewport height" unit, which tracks a mobile browser's
   show/hide toolbar on its own with no script involved. 100svh stays as
   an ancient-browser safety net for engines that don't support dvh. */
.home-snap{height:100svh;height:100dvh;min-height:560px;overflow-y:scroll;scroll-snap-type:y mandatory;scrollbar-width:none;-ms-overflow-style:none;}
.home-snap::-webkit-scrollbar{display:none;}
.hs-slide{scroll-snap-align:start;scroll-snap-stop:always;height:100svh;height:100dvh;min-height:560px;position:relative;overflow:hidden;color:var(--white);display:flex;flex-direction:column;}
@media (prefers-reduced-motion: reduce){.home-snap{scroll-snap-type:none;}}

/* --- Slide 1: hero photo, text left, feature row + accent overlaid at the bottom --- */
.hs-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03);}
.hs-hero::before{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(8,7,6,.84) 0%,rgba(8,7,6,.64) 30%,rgba(8,7,6,.4) 46%,rgba(8,7,6,.2) 60%,rgba(8,7,6,.2) 74%,rgba(8,7,6,.8) 100%),
  linear-gradient(100deg,rgba(8,7,6,.6) 0%,rgba(8,7,6,.24) 42%,rgba(8,7,6,.04) 60%);}
.hs-hero-copy{position:relative;z-index:2;max-width:540px;padding:clamp(88px,13vh,140px) clamp(20px,4vw,56px) 0;}

/* mobile-only quick nav, sits inside the hero slide (so it scrolls away
   with slide 1) just under the header's wordmark */
.hs-quicknav{display:none;}
@media(max-width:1023px){
  .hs-quicknav{display:flex;align-items:center;gap:9px;margin-bottom:16px;}
  .hs-quicknav a{color:var(--white);font-size:.7rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;text-shadow:var(--legible-shadow);}
  .hs-quicknav a:hover,.hs-quicknav a:active{color:var(--gold-pale);}
  .hs-quicknav .qn-sep{width:1px;height:11px;background:rgba(255,255,255,.55);flex-shrink:0;}
}
.hs-hero-copy .hero-rule{width:50px;height:2px;background:var(--gold);margin:14px 0;}
.hs-hero-copy h1,.hs-hero-copy .hero-tag,.hs-hero-copy .hero-sub{text-shadow:var(--legible-shadow);}
.hs-hero-copy .eyebrow{color:var(--gold);text-shadow:var(--legible-shadow);}
.hs-hero-copy h1{color:var(--white);font-size:clamp(1.6rem,1.05rem + 2.4vw,2.6rem);margin-top:12px;font-weight:700;max-width:13ch;}
.hs-hero-copy h1 .gold{color:var(--gold);}
.hs-hero-copy .hero-tag{margin-top:12px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-pale);}
.hs-hero-copy .hero-sub{margin-top:8px;max-width:42ch;font-size:.9rem;color:rgba(255,255,255,.82);}

.hs-hero-foot{position:relative;z-index:2;margin-top:auto;padding:0 clamp(14px,3vw,44px) clamp(16px,3.4vh,30px);}
.hs-feature-row{display:flex;justify-content:space-between;gap:4px;}
.hs-feature-row li{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;min-width:0;text-align:center;}
.hs-feature-row .ico{display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.hs-feature-row .ico svg{width:22px;height:22px;stroke:var(--white);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 2px rgba(0,0,0,.95)) drop-shadow(0 2px 8px rgba(0,0,0,.75));}
.hs-feature-row span{font-size:.56rem;font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:rgba(255,255,255,.95);line-height:1.25;text-shadow:var(--legible-shadow);}
/* Accent line: no solid background box anymore — legibility instead comes
   from the strengthened bottom gradient above (the photo's own darkest
   band) plus a tight, high-contrast stacked text-shadow tuned to hold up
   on both light and dark patches of any room photo. */
.hs-accent{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px;}
.hs-accent .line{width:36px;height:1px;background:rgba(232,184,75,.8);flex-shrink:0;filter:drop-shadow(0 1px 2px rgba(0,0,0,.85)) drop-shadow(0 2px 6px rgba(0,0,0,.6));}
.hs-accent span:not(.line){font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-pale);white-space:nowrap;text-shadow:var(--legible-shadow);}
@media(max-width:680px){
  .hs-feature-row span{display:none;}
  .hs-feature-row .ico svg{width:17px;height:17px;}
  .hs-accent{gap:8px;margin-top:12px;}
  .hs-accent span:not(.line){font-size:.56rem;letter-spacing:.08em;}
  .hs-accent .line{width:14px;}
}
@media(max-width:400px){
  .hs-hero-copy{padding-top:clamp(78px,12vh,120px);}
  .hs-hero-copy .hero-sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
}

/* --- Slide 2: collage — full-bleed background photo + two layered, overlapping photo cards --- */
.hs-collage{padding:0;background:var(--black);}
.hs-collage-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;filter:saturate(1.02) contrast(1.02);opacity:.88;transition:opacity .22s ease;}
.hs-collage::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(8,7,6,.9) 0%,rgba(8,7,6,.66) 30%,rgba(8,7,6,.26) 52%,rgba(8,7,6,.46) 100%);}
.hs-collage-copy{position:relative;z-index:2;max-width:400px;padding:clamp(90px,15vh,150px) clamp(20px,4vw,56px) 0;}
.hs-collage-copy .eyebrow{color:var(--gold);text-shadow:var(--legible-shadow);}
.hs-collage-copy h2{color:var(--white);margin-top:10px;font-size:clamp(1.5rem,1.05rem + 2vw,2.3rem);max-width:11ch;text-shadow:var(--legible-shadow);}
.hs-collage-copy p{color:rgba(255,255,255,.9);margin-top:10px;max-width:36ch;font-size:.9rem;text-shadow:var(--legible-shadow);}
/* One continuous, fluid size for the card box across every viewport width
   (clamp floor -> vw-scaled middle -> clamp ceiling) instead of a flip
   between one fixed "desktop" size and one fixed "mobile" size. The old
   two-value approach held the cards at their full, near-540px desktop size
   all the way down to 780px before suddenly snapping small — so narrowing
   a laptop window (or any tablet-ish width) showed the photos still
   covering most of the screen right up until the cliff. This scales
   smoothly the whole way down, and the desktop ceiling itself is smaller
   than before too. */
.hs-collage-cards{position:absolute;z-index:2;right:clamp(14px,4vw,56px);bottom:clamp(18px,7vh,90px);width:clamp(180px,32vw,430px);height:clamp(160px,28vw,340px);}
.cc-card{position:absolute;overflow:hidden;border-radius:6px;box-shadow:0 26px 54px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.14);cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease);}
.cc-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.cc-card img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.05) contrast(1.03);transition:opacity .22s ease;}
.cc-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:clamp(8px,1.4vw,12px) clamp(10px,2vw,20px);color:var(--white);font-size:clamp(.6rem,1.3vw,.72rem);background:linear-gradient(0deg,rgba(8,7,6,.85) 0%,rgba(8,7,6,0) 65%);text-shadow:var(--legible-shadow);}
.cc-card figcaption b{display:block;font-family:'Fraunces',serif;font-size:clamp(.76rem,1.7vw,.94rem);font-weight:600;}
.cc-card-a{left:0;top:0;width:65%;height:78%;transform:rotate(-3.5deg);z-index:2;}
.cc-card-b{right:0;bottom:0;width:56%;height:56%;transform:rotate(3deg);z-index:3;}
.cc-card-a:hover,.cc-card-a:focus-visible{transform:rotate(-3.5deg) translateY(-6px) scale(1.02);box-shadow:0 30px 60px rgba(0,0,0,.6);}
.cc-card-b:hover,.cc-card-b:focus-visible{transform:rotate(3deg) translateY(-6px) scale(1.02);box-shadow:0 30px 60px rgba(0,0,0,.6);}
@media(max-width:780px){
  .hs-collage-copy{max-width:280px;padding-top:clamp(80px,14vh,120px);}
}

/* --- Slide 3: provenance --- */
.hs-provenance{color:var(--ink);background:var(--white);align-items:center;justify-content:center;overflow-y:auto;}
.hs-provenance .container{width:100%;}
.hs-provenance .split{gap:32px;}
.hs-provenance .split-media img{aspect-ratio:5/4;}
.hs-provenance .split-body{display:flex;flex-direction:column;justify-content:center;}
@media(min-width:900px){
  .hs-provenance .split{height:min(64vh,560px);align-items:stretch;gap:76px;}
  .hs-provenance .split-media{height:100%;}
  .hs-provenance .split-media img{height:100%;aspect-ratio:auto;}
}

/* ===== SPLIT (brand page) ===== */
.split{display:grid;grid-template-columns:1fr;gap:52px;align-items:center;}
.split-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;filter:saturate(1.05) contrast(1.03);}
.split-body p{color:var(--ink-soft);margin-top:16px;max-width:58ch;}
.split-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;padding-top:28px;border-top:1px solid var(--line);}
.split-stats .num{font-family:'Fraunces',serif;font-size:clamp(1.7rem,1.3rem + 1.3vw,2.4rem);color:var(--gold-deep);font-weight:700;}
.split-stats .lbl{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-top:4px;}
@media(min-width:900px){.split{grid-template-columns:0.85fr 1fr;gap:76px;}}
.split.reverse{direction:rtl;}
.split.reverse > *{direction:ltr;}

/* ===== CONSTRUCTION / TECH ===== */
.tech-wrap{display:grid;grid-template-columns:1fr;gap:44px;align-items:center;}
@media(min-width:900px){.tech-wrap{grid-template-columns:1fr 0.95fr;}}
.tech-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);background:var(--black);max-width:380px;margin-inline:auto;padding:22px;}
.tech-media img{width:100%;height:auto;display:block;}
@media(min-width:900px){.tech-media{margin-inline:0;margin-right:auto;}}
.tech-list{margin-top:22px;display:flex;flex-direction:column;gap:16px;}
.tech-list li{display:flex;gap:14px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.tech-list b{font-family:'Fraunces',serif;color:var(--black);font-size:1.02rem;display:block;}
.tech-list span{color:var(--ink-soft);font-size:.92rem;}
.tech-num{font-family:'Fraunces',serif;font-style:italic;color:var(--gold-deep);font-size:1.3rem;flex-shrink:0;width:28px;}

/* ===== WHY-US (folded FAQ, prose not accordion) ===== */
.why-grid{display:grid;grid-template-columns:1fr;gap:32px;margin-top:36px;}
@media(min-width:700px){.why-grid{grid-template-columns:1fr 1fr;}}
.why-item h4{font-family:'Fraunces',serif;font-size:1.08rem;color:var(--black);}
.why-item p{color:var(--ink-soft);margin-top:8px;font-size:.94rem;max-width:48ch;}

/* ===== FEATURES ===== */
.features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;}
@media(min-width:700px){.features-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:1100px){.features-grid{grid-template-columns:repeat(5,1fr);}}
.feature{background:var(--white);padding:34px 22px;text-align:center;}
.feature-ico{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;margin-inline:auto;}
.feature-ico svg{width:24px;height:24px;stroke:var(--gold-deep);fill:none;stroke-width:1.4;}
.feature h3{margin-top:16px;font-size:1rem;}
.feature p{margin-top:8px;color:var(--ink-soft);font-size:.85rem;}

/* ===== COLLECTIONS PAGE — full-bleed hero photo, everything overlaid on it ===== */
.collection-stage{position:relative;height:91vh;min-height:580px;max-height:840px;overflow:hidden;background:var(--black-2);}
.collection-photo{position:absolute;inset:0;}
.collection-photo img{width:100%;height:100%;object-fit:cover;object-position:center 50%;opacity:0;transition:opacity .5s var(--ease);}
.collection-photo img.active{opacity:1;position:relative;}
.collection-photo img:not(.active){position:absolute;inset:0;}
.collection-photo img[data-code="01"]{object-position:center 80%;}
.collection-photo img[data-code="02"]{object-position:center 62%;}
.collection-photo img[data-code="03"]{object-position:center 64%;}
.collection-photo img[data-code="04"]{object-position:center 68%;}
.collection-photo img[data-code="06"]{object-position:center 68%;}
.collection-photo img[data-code="07"]{object-position:center 68%;}
.collection-photo img[data-code="08"]{object-position:center 68%;}
.collection-photo img[data-code="09"]{object-position:center 66%;}
.collection-photo img[data-code="10"]{object-position:center 68%;}
.collection-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,.62) 0%,rgba(10,9,8,.1) 26%,rgba(10,9,8,0) 42%);pointer-events:none;z-index:1;}
.collection-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,8,.78) 0%,rgba(10,9,8,.15) 46%,rgba(10,9,8,0) 62%);pointer-events:none;z-index:1;}
.collection-top-overlay{position:absolute;top:0;left:0;right:0;z-index:2;padding:clamp(88px,11vw,124px) clamp(20px,5vw,64px) 0;color:var(--white);}
.collection-top-overlay .breadcrumb{padding:0;color:rgba(255,255,255,.68);}
.collection-top-overlay .breadcrumb a{color:rgba(255,255,255,.68);}
.collection-top-overlay .breadcrumb a:hover{color:var(--gold);}
.collection-top-overlay h1{color:var(--white);margin-top:10px;font-size:clamp(1.3rem,1.05rem + 1.1vw,1.8rem);max-width:22ch;}
.collection-top-overlay p{color:rgba(255,255,255,.76);margin-top:6px;font-size:.86rem;max-width:56ch;}

.collection-bottom-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 clamp(20px,5vw,64px) clamp(20px,3.2vh,32px);color:var(--white);}
.collection-info-inner{padding-bottom:clamp(14px,2vh,20px);}
.collection-code{font-size:.72rem;letter-spacing:.14em;color:var(--gold-pale);text-transform:uppercase;}
.collection-name{font-family:'Fraunces',serif;font-size:clamp(1.5rem,1.15rem + 1.6vw,2.2rem);color:var(--white);margin-top:6px;}
.collection-room{font-size:.88rem;color:rgba(255,255,255,.78);margin-top:6px;max-width:56ch;}
.placeholder-note{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 14px;border-radius:100px;background:rgba(232,184,75,.16);border:1px solid rgba(232,184,75,.4);font-size:.74rem;color:var(--gold-pale);letter-spacing:.03em;}

/* swatch selector — hovers directly on the photo, one even line, no separate strip */
.swatch-rail{display:flex;align-items:flex-start;justify-content:space-between;gap:5px;padding-top:20px;border-top:1px solid rgba(255,255,255,.16);}
/* display:block (rather than the native <button> default) matters here:
   a plain <button> gets an internal centering behavior for its content, so
   once the row's flex layout stretches each button to match the tallest
   one (a 2-line colorway name like "Amsterdam Light Tan" vs. a 1-line one
   like "Ice Maple"), buttons with a shorter label were quietly centering
   their contents and shifting the swatch square down a few pixels relative
   to the ones with a taller label -- the squares were identically sized,
   just not top-aligned with each other. display:block plus align-items:
   flex-start on the row (above) forces plain top-anchored stacking for
   every button regardless of how many lines its label wraps to. */
.swatch-btn{display:block;flex:1;min-width:0;max-width:78px;text-align:center;background:none;border:none;cursor:pointer;}
.swatch-btn .sw-img-wrap{display:block;width:100%;aspect-ratio:1/1;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.28);transition:all .3s var(--ease);}
.swatch-btn img{width:100%;height:100%;object-fit:cover;}
.swatch-btn.active .sw-img-wrap{border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,184,75,.28);}
.swatch-btn:hover .sw-img-wrap{transform:translateY(-2px);}
.swatch-btn .sw-label{display:block;margin-top:7px;font-size:.62rem;color:rgba(255,255,255,.82);line-height:1.2;}
.swatch-btn.active .sw-label{color:var(--gold-pale);font-weight:700;}
@media(max-width:680px){
  .swatch-btn .sw-label{display:none;}
  .swatch-rail{gap:5px;}
}

.collection-statement{padding:26px 0 clamp(40px,6vw,64px);}
.collection-statement p{max-width:62ch;margin-inline:auto;color:var(--ink-soft);font-family:'Fraunces',serif;font-size:1.08rem;font-style:italic;text-align:center;}

/* ===== PROCESS ===== */
.process-wrap{position:relative;border-radius:var(--radius-lg);overflow:hidden;color:var(--white);background:var(--black);}
.process-wrap::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(115deg, rgba(232,184,75,.05) 0 3px, transparent 3px 34px);
}
.process-inner{position:relative;z-index:2;padding:clamp(38px,6vw,76px);}
.process-steps{display:grid;grid-template-columns:1fr;gap:0;margin-top:44px;}
@media(min-width:820px){.process-steps{grid-template-columns:repeat(4,1fr);}}
.p-step{padding:24px 20px 24px 0;border-top:1px solid rgba(255,255,255,.14);}
@media(min-width:820px){.p-step{border-top:none;border-left:1px solid rgba(255,255,255,.14);padding:4px 22px;}.p-step:first-child{border-left:none;padding-left:0;}}
.p-step .p-index{font-family:'Fraunces',serif;font-style:italic;font-size:2.1rem;color:var(--gold);}
.p-step h4{color:var(--white);margin-top:8px;font-size:1.02rem;}
.p-step p{color:rgba(255,255,255,.68);font-size:.86rem;margin-top:8px;}

/* ===== CONTACT / ENQUIRIES ===== */
.contact-wrap{display:grid;grid-template-columns:1fr;gap:0;background:var(--black);color:var(--white);border-radius:var(--radius-lg);overflow:hidden;}
@media(min-width:960px){.contact-wrap{grid-template-columns:1fr 1fr;}}
.contact-info{padding:clamp(34px,5vw,60px);}
.contact-info h2{color:var(--white);margin-top:12px;}
.contact-info p{color:rgba(255,255,255,.72);margin-top:14px;max-width:44ch;}
.contact-detail{display:flex;gap:16px;margin-top:24px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);}
.contact-detail svg{width:19px;height:19px;fill:var(--gold);flex-shrink:0;margin-top:2px;}
.contact-detail h4{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.5);}
.contact-detail p{margin-top:4px;color:var(--white);font-size:.96rem;}

.contact-form{background:var(--black-2);padding:clamp(34px,5vw,60px);}
.form-row{display:grid;grid-template-columns:1fr;gap:18px;margin-bottom:18px;}
@media(min-width:520px){.form-row.two{grid-template-columns:1fr 1fr;}}
.field label{display:block;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px;}
.field input,.field select,.field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.28);padding:10px 2px;color:var(--white);font-size:.96rem;transition:border-color .3s var(--ease);}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.35);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);}
.field select option{color:#111;}
.field textarea{resize:vertical;min-height:88px;}
.form-note{font-size:.75rem;color:rgba(255,255,255,.42);margin-top:16px;}
.contact-form .btn{margin-top:8px;width:100%;}
.form-success{display:none;text-align:center;padding:40px 20px;}
.form-success.show{display:block;}
.form-success h3{color:var(--white);}
.form-success p{color:rgba(255,255,255,.7);margin-top:10px;}
.form-error{display:none;margin-top:14px;font-size:.82rem;color:#e88a7a;}
.form-error.show{display:block;}
.contact-form .btn[disabled]{opacity:.6;cursor:default;}
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}

/* ===== FOOTER — one compact line: brand+tagline left, copyright right ===== */
.site-footer{background:var(--black);color:rgba(255,255,255,.68);padding-block:16px;border-top:1px solid var(--gold);}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 16px;}
.footer-brand-mark{display:flex;align-items:center;gap:7px;}
.footer-brand-mark .brand-glyph{width:16px;height:16px;color:var(--gold);}
.footer-brand-word{font-family:'Fraunces',serif;font-size:.86rem;font-weight:700;color:var(--white);letter-spacing:.01em;}
.footer-left{display:flex;align-items:center;gap:10px;}
.footer-origin{font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-pale);}
.footer-copy{font-size:.62rem;color:rgba(255,255,255,.4);}

.to-top{position:fixed;right:22px;bottom:22px;z-index:120;width:46px;height:46px;border-radius:50%;background:var(--gold);color:var(--black);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-soft);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .35s var(--ease);}
.to-top.show{opacity:1;visibility:visible;transform:translateY(0);}
.to-top:hover{background:var(--black);color:var(--gold);}
.to-top svg{width:16px;height:16px;fill:currentColor;}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);}
.reveal.in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto;}.reveal{opacity:1;transform:none;transition:none;}.story-scroll{scroll-snap-type:none;}}

.bg-ivory{background:var(--ivory);}
.bg-black{background:var(--black);}
.text-center{text-align:center;}
.mx-auto{margin-inline:auto;}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* breadcrumb (inner pages) */
.breadcrumb{padding-top:110px;padding-bottom:8px;font-size:.78rem;color:var(--ink-soft);}
.breadcrumb a{color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--gold-deep);}
.breadcrumb .sep{margin-inline:8px;opacity:.5;}