/* ==========================================================================
   CASA BELLA — DESIGN SYSTEM
   Palette and type derived from the Casa Bella Brand Style Guide (May 2026).
   ========================================================================== */

/* --- 1. TOKENS ----------------------------------------------------------- */
:root{
  /* Brand palette, straight from the guide */
  --bone:      #F1EDE4;
  --cream:     #EBE7DA;
  --greige:    #CDC8BA;
  --taupe:     #574C3F;
  --espresso:  #2E2823;
  --ink:       #1C1815;

  /* Working surfaces */
  --paper:     #F6F3EC;
  --line:      rgba(87,76,63,.16);
  --line-soft: rgba(87,76,63,.09);
  --muted:     #7A6F62;
  --gilt:      #A08551;

  /* Type */
  --display: "Fraunces", "Playfair Display", Georgia, serif;
  --mark:    "Cormorant Garamond", Georgia, serif;
  --sans:    "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Rhythm */
  --gut: clamp(20px, 4.2vw, 64px);
  --sec: clamp(72px, 11vw, 168px);
  --maxw: 1560px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: cubic-bezier(.16,1,.3,1);
}

/* --- 2. RESET ------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--espresso);
  font-family:var(--sans); font-size:16px; line-height:1.6;
  font-weight:380; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,figure,ul{ margin:0; }
ul{ padding:0; list-style:none; }
:focus-visible{ outline:2px solid var(--taupe); outline-offset:3px; }
::selection{ background:var(--taupe); color:var(--bone); }

/* --- 3. TYPE SCALE ------------------------------------------------------- */
.d1{ font-family:var(--display); font-weight:300; font-size:clamp(44px,7.6vw,108px);
     line-height:.96; letter-spacing:-.024em; font-variation-settings:"SOFT" 0,"WONK" 1,"opsz" 144; }
.d2{ font-family:var(--display); font-weight:300; font-size:clamp(34px,4.6vw,66px);
     line-height:1.02; letter-spacing:-.02em; font-variation-settings:"WONK" 1,"opsz" 120; }
.d3{ font-family:var(--display); font-weight:300; font-size:clamp(25px,2.5vw,38px);
     line-height:1.12; letter-spacing:-.014em; }
.d4{ font-family:var(--display); font-weight:340; font-size:clamp(19px,1.5vw,23px);
     line-height:1.25; letter-spacing:-.008em; }

.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  font-weight:520; color:var(--muted);
}
.lede{ font-size:clamp(16px,1.28vw,19px); line-height:1.62; color:var(--taupe); max-width:56ch; }
.small{ font-size:13.5px; color:var(--muted); line-height:1.55; }
.tnum{ font-variant-numeric:tabular-nums; }

/* --- 4. LAYOUT ----------------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.section{ padding-block:var(--sec); }
.rule{ height:1px; background:var(--line-soft); border:0; margin:0; }

.sec-head{
  display:flex; align-items:end; justify-content:space-between;
  gap:32px; flex-wrap:wrap; margin-bottom:clamp(32px,4vw,60px);
}
.sec-head .eyebrow{ display:block; margin-bottom:16px; }

/* --- 5. BUTTONS ---------------------------------------------------------- */
.btn{
  --bg:var(--espresso); --fg:var(--bone);
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--bg); color:var(--fg);
  padding:15px 30px; border-radius:100px;
  font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:500;
  transition:transform .45s var(--ease), background .3s, color .3s, opacity .3s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn--ghost{ --bg:transparent; --fg:var(--espresso); border:1px solid var(--line); }
.btn--ghost:hover{ --bg:var(--espresso); --fg:var(--bone); border-color:var(--espresso); }
.btn--light{ --bg:var(--bone); --fg:var(--espresso); }
.btn--block{ width:100%; }
.btn[disabled]{ opacity:.4; pointer-events:none; }

.link-u{
  display:inline-flex; align-items:center; gap:9px; padding-bottom:3px;
  font-size:12.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:500;
  border-bottom:1px solid var(--line); transition:border-color .3s, gap .3s var(--ease);
}
.link-u:hover{ border-color:var(--espresso); gap:15px; }
.link-u svg{ width:13px; height:13px; }

/* --- 6. LOGO MARK (the brand cartouche) ---------------------------------- */
.mark{
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid currentColor; border-radius:100px;
  padding:7px 20px 8px; position:relative;
  font-family:var(--mark); font-weight:300; font-size:17px;
  letter-spacing:.28em; text-indent:.28em; line-height:1; white-space:nowrap;
}
.mark::before{
  content:""; position:absolute; inset:3px; border:1px solid currentColor;
  border-radius:100px; opacity:.55;
}
.mark--sm{ font-size:13px; padding:5px 15px 6px; }
.mark--lg{ font-size:clamp(20px,2.4vw,30px); padding:13px 34px 14px; }

/* --- 7. HEADER ----------------------------------------------------------- */
.hdr{
  position:fixed; inset:0 0 auto; z-index:900;
  transition:background .45s var(--ease), color .45s var(--ease), box-shadow .45s;
}
.hdr__in{
  display:flex; align-items:center; gap:clamp(20px,3vw,52px);
  height:78px; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
}
.hdr__brand{ flex:0 0 auto; }
.hdr__nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,30px); margin-inline:auto; }
.hdr__act{ display:flex; align-items:center; gap:clamp(10px,1vw,16px); flex:0 0 auto; }

.navlink{
  position:relative; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:500; padding:28px 0; display:inline-flex; align-items:center; gap:7px;
}
.navlink::after{
  content:""; position:absolute; left:0; right:0; bottom:22px; height:1px;
  background:currentColor; transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.navlink:hover::after,.navlink[aria-expanded="true"]::after,.navlink.is-here::after{ transform:scaleX(1); }
.navlink .chev{ width:9px; height:9px; transition:transform .35s var(--ease); }
.navlink[aria-expanded="true"] .chev{ transform:rotate(180deg); }

/* transparent-over-hero state */
.hdr--over{ color:var(--bone); }
.hdr--over .icon-btn{ border-color:rgba(241,237,228,.34); }
.hdr--solid{ background:var(--paper); color:var(--espresso); box-shadow:0 1px 0 var(--line-soft); }

.icon-btn{
  width:38px; height:38px; border-radius:100px; border:1px solid var(--line);
  display:grid; place-items:center; position:relative;
  transition:background .3s, color .3s, border-color .3s;
}
.icon-btn:hover{ background:currentColor; }
.icon-btn:hover svg{ mix-blend-mode:difference; }
.icon-btn svg{ width:16px; height:16px; }
.cart-count{
  position:absolute; top:-4px; right:-4px; min-width:18px; height:18px; padding:0 5px;
  border-radius:100px; background:var(--gilt); color:#fff;
  font-size:10.5px; font-weight:600; display:grid; place-items:center;
  opacity:0; transform:scale(.5); transition:.3s var(--ease);
}
.cart-count.on{ opacity:1; transform:scale(1); }

.burger{ display:none; }

/* --- 8. CATALOGUE MEGA DROPDOWN ------------------------------------------ */
.mega{
  position:fixed; left:0; right:0; top:78px; z-index:880;
  background:var(--paper); color:var(--espresso);
  border-top:1px solid var(--line-soft); box-shadow:0 24px 44px -30px rgba(46,40,35,.4);
  clip-path:inset(0 0 100% 0); pointer-events:none;
  transition:clip-path .5s var(--slow);
}
.mega.open{ clip-path:inset(0 0 0 0); pointer-events:auto; }
.mega__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(34px,3.8vw,62px) var(--gut) clamp(38px,4vw,66px);
}
/* Furniture: categories in spacious columns on one side, one editorial image
   and Shop by Room on the other. Shop by Room is deliberately the smaller of
   the two — it is a second way in, not the way things are categorised. */
.mega__in--furniture{ display:grid; grid-template-columns:1fr minmax(230px,.40fr); gap:clamp(30px,4vw,78px); }
.mega__cols{ display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(16px,2vw,38px); }
.mega__side{ border-left:1px solid var(--line-soft); padding-left:clamp(24px,2.6vw,48px); }
.mega__col h4{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:16px; font-weight:520; }
.mega__col a{
  display:block; padding:7px 0; font-size:15px; color:var(--taupe);
  transition:color .25s, transform .35s var(--ease);
}
.mega__col a:hover{ color:var(--espresso); transform:translateX(5px); }
.mega__col .mega__all{ color:var(--muted); margin-top:10px; }
.mega__promo{ display:block; }
.mega__promo img{ aspect-ratio:4/5; object-fit:cover; border-radius:3px; margin-bottom:16px;
  transition:transform 1.1s var(--slow); }
.mega__promo:hover img{ transform:scale(1.035); }
.mega__promo .eyebrow{ display:block; margin-bottom:8px; }
.mega__promo .d4{ margin-bottom:12px; }
.mega__rooms{ margin-top:clamp(22px,2.4vw,34px); padding-top:clamp(20px,2.2vw,30px); border-top:1px solid var(--line-soft); }
.mega__rooms h4{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; font-weight:520; }
.mega__rooms div{ display:flex; flex-wrap:wrap; gap:7px; }
.mega__rooms a{ border:1px solid var(--line); border-radius:100px; padding:6px 13px;
  font-size:12.5px; color:var(--taupe); transition:border-color .3s, color .3s; }
.mega__rooms a:hover{ border-color:var(--espresso); color:var(--espresso); }

/* Collections: four worlds, image-led, no sub-lists. */
.mega__in--collections{ display:block; }
.mega__worlds{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,30px); }
.mega__world{ display:block; }
.mega__world img{ aspect-ratio:4/5; object-fit:cover; border-radius:3px; margin-bottom:14px;
  transition:transform 1.1s var(--slow); }
.mega__world:hover img{ transform:scale(1.035); }
.mega__world .nm{ display:block; font-family:var(--display); font-weight:340; font-size:20px; line-height:1.2; }
.mega__world .tg{ display:block; font-size:13.5px; color:var(--taupe); margin-top:7px; max-width:26ch; line-height:1.55; }
.mega__world .ct{ display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--gilt); margin-top:11px; }
.mega__foot{ margin-top:clamp(24px,2.6vw,38px); padding-top:20px; border-top:1px solid var(--line-soft); }

/* "Soon" — a sub-category we do not carry stock in yet. Marked, never hidden:
   a category the client is about to stock should not quietly disappear, and
   the destination says so plainly rather than rendering an empty grid. */
.soon{
  display:inline-block; margin-left:8px; vertical-align:1px;
  font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:520;
  color:var(--gilt); border:1px solid rgba(160,133,81,.42); border-radius:100px; padding:2px 7px;
}

/* --- 9. SIDE MENU (mobile) — deliberately NOT full-screen ---------------- */
/* Host clips the off-canvas panels so they never create a horizontal scrollbar. */
.panel-host{ position:fixed; inset:0; z-index:940; overflow:hidden; pointer-events:none; }
.panel-host>*{ pointer-events:auto; }
.panel-host .scrim:not(.on){ pointer-events:none; }

.scrim{
  position:absolute; inset:0; z-index:940; background:rgba(28,24,21,.42);
  backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.scrim.on{ opacity:1; pointer-events:auto; }

.panel{
  position:absolute; top:0; bottom:0; right:0; z-index:950;
  width:min(400px, 84vw);            /* never takes over the whole screen */
  background:var(--paper); color:var(--espresso);
  transform:translateX(101%); transition:transform .55s var(--slow), box-shadow .55s;
  display:flex; flex-direction:column;
}
.panel.open{ transform:none; box-shadow:-30px 0 60px -40px rgba(28,24,21,.7); }
.panel__hd{ display:flex; align-items:center; justify-content:space-between; padding:20px var(--gut); border-bottom:1px solid var(--line-soft); }
.panel__bd{ flex:1; overflow-y:auto; padding:8px var(--gut) 28px; }
.panel__ft{ padding:20px var(--gut) 26px; border-top:1px solid var(--line-soft); }

.acc__hd{
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:17px 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--display); font-weight:340; font-size:21px; text-align:left;
}
.acc__hd .chev{ width:11px; transition:transform .35s var(--ease); }
.acc__hd[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.acc__bd{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s var(--slow); }
.acc__bd>div{ overflow:hidden; }
.acc__hd[aria-expanded="true"]+.acc__bd{ grid-template-rows:1fr; }
.acc__bd a{ display:block; padding:11px 0 11px 2px; color:var(--taupe); font-size:15px; }
/* Second level inside the accordion — Furniture opens onto the categories,
   each of which opens onto its own types. Same hierarchy as the desktop mega
   menu, one finger deeper. */
.acc__hd--sub{ font-family:var(--sans); font-size:13px; font-weight:520;
  letter-spacing:.13em; text-transform:uppercase; padding:14px 0; color:var(--taupe); }
.acc__hd--sub .chev{ width:9px; }
.acc__nest{ padding-left:2px; }
.acc__nest .acc__bd a{ padding-left:14px; font-size:14.5px; }
.acc__lbl{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin:22px 0 4px; font-weight:520; }
.acc__bd .acc__all{ color:var(--muted); }

/* --- 10. HERO ------------------------------------------------------------ */
/* The hero fills the viewport on load. The header is fixed and transparent
   over it (body[data-hero]), so there is deliberately no top offset here — an
   offset is what produced the band of paper above the image on a phone.
   The dark ground matters: any sub-pixel rounding, or a rubber-band overscroll
   on iOS, shows this rather than a flash of cream. */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; background:var(--ink); }
@supports not (height:100svh){ .hero{ min-height:100vh; } }

/* In an in-app browser — WhatsApp, Instagram, LinkedIn — the bottom toolbar is
   drawn over the page. Filling only the SMALL viewport stops the photograph
   dead at the top edge of that toolbar and leaves a band of chrome sitting
   under it, which is what it looks like on a phone.

   So: fill the LARGE viewport, which runs behind the toolbar, and then pad the
   content back up by exactly the height of the chrome (100lvh - 100svh) so the
   headline and the buttons are never underneath it. box-sizing:border-box
   means the padding comes out of the 100lvh rather than adding to it, so the
   hero is still exactly one screen tall. */
@supports (height:100lvh) and (height:100svh){
  .hero{ min-height:100lvh; padding-bottom:calc(100lvh - 100svh); }
}
.hero__media{ position:absolute; inset:0; }
.hero__media img,.hero__media video{
  width:100%; height:100%; object-fit:cover;
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{ from{ transform:scale(1.04) translate3d(0,0,0);} to{ transform:scale(1.13) translate3d(-1.5%,-1.2%,0);} }
/* Two scrims: one vertical for the header and the button row, one from the
   left so the headline keeps its contrast over a bright frame. */
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(28,24,21,.66) 0%, rgba(28,24,21,.34) 42%, rgba(28,24,21,0) 74%),
    linear-gradient(180deg, rgba(28,24,21,.52) 0%, rgba(28,24,21,.14) 32%, rgba(28,24,21,.68) 100%);
}
.hero__in{ position:relative; width:100%; padding-block:clamp(48px,7vw,104px); color:var(--bone); }
.hero__in .d1{ max-width:15ch; text-wrap:balance; }
.hero__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-top:34px; }
.hero__note{ max-width:38ch; font-size:15.5px; color:rgba(241,237,228,.82); }
.hero .eyebrow{ color:rgba(241,237,228,.72); margin-bottom:22px; display:block; }

/* Centred on the right edge, not bottom-right — bottom-right is where the
   hero button row ends up, and the two used to sit on top of each other. */
.scrollcue{ position:absolute; right:var(--gut); top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; font-size:10.5px; letter-spacing:.24em;
  text-transform:uppercase; color:rgba(241,237,228,.6); pointer-events:none; }

/* --- 11. MARQUEE STRIP --------------------------------------------------- */
.strip{ background:var(--espresso); color:var(--bone); padding:15px 0; overflow:hidden; }
.strip__track{ display:flex; gap:56px; width:max-content; animation:slide 44s linear infinite; }
.strip span{ font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; opacity:.8; white-space:nowrap; }
@keyframes slide{ to{ transform:translateX(-50%);} }

/* --- 12. PRODUCT CARD ---------------------------------------------------- */
.grid{ display:grid; gap:clamp(20px,2.2vw,38px) clamp(14px,1.6vw,26px); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

.card{ display:block; position:relative; }
.card__media{
  position:relative; overflow:hidden; background:var(--cream);
  aspect-ratio:4/5; border-radius:2px;
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s var(--slow), opacity .5s;
}
.card__media img.alt{ position:absolute; inset:0; opacity:0; }
.card:hover .card__media img.pri{ opacity:0; }
.card:hover .card__media img.alt{ opacity:1; }
.card:hover .card__media img{ transform:scale(1.045); }
.card__tag{
  position:absolute; top:12px; left:12px; z-index:2;
  background:rgba(246,243,236,.94); color:var(--espresso);
  padding:5px 12px; border-radius:100px;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:560;
}
.card__quick{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  background:rgba(246,243,236,.95); color:var(--espresso);
  padding:12px; border-radius:2px; text-align:center;
  font-size:11.5px; letter-spacing:.15em; text-transform:uppercase; font-weight:520;
  opacity:0; transform:translateY(9px); transition:.4s var(--ease);
}
.card:hover .card__quick{ opacity:1; transform:none; }
.card__body{ padding-top:16px; display:flex; justify-content:space-between; gap:16px; align-items:baseline; }
.card__name{ font-family:var(--display); font-weight:340; font-size:17.5px; line-height:1.25; letter-spacing:-.008em; }
.card__sub{ font-size:12.5px; color:var(--muted); margin-top:5px; }
.card__price{ font-size:14px; white-space:nowrap; color:var(--taupe); }

/* --- 13. RAIL (horizontal scroller) -------------------------------------- */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(260px,25vw);
  gap:clamp(14px,1.6vw,26px); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-inline:var(--gut); scroll-padding-inline:var(--gut);
  scrollbar-width:none; padding-bottom:6px;
}
.rail::-webkit-scrollbar{ display:none; }
.rail>*{ scroll-snap-align:start; }
.railnav{ display:flex; gap:9px; }

/* --- 14. COLLECTION TILES ------------------------------------------------ */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(10px,1.1vw,18px); }
.tile{ position:relative; overflow:hidden; border-radius:2px; aspect-ratio:3/4; display:flex; align-items:flex-end; color:var(--bone); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--slow); }
.tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(28,24,21,0) 38%,rgba(28,24,21,.68) 100%); }
.tile:hover img{ transform:scale(1.06); }
.tile__t{ position:relative; z-index:2; padding:clamp(18px,1.8vw,28px); width:100%; }
.tile__t p{ font-size:13px; color:rgba(241,237,228,.78); margin-top:7px; max-width:26ch; }

/* --- 15. EDITORIAL SPLIT ------------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,90px); align-items:center; }
.split--dark{ background:var(--espresso); color:var(--bone); }
.split--dark .lede,.split--dark .small{ color:rgba(241,237,228,.74); }
.split--dark .eyebrow{ color:rgba(241,237,228,.6); }
.split img{ aspect-ratio:4/5; object-fit:cover; border-radius:2px; }
/* Edge-to-edge variant (Projects). These live as classes, not inline styles,
   so the max-width:960px collapse to a single column can still win. */
.split--flush{ gap:0; }
.split--flush .split__fig{ margin:0; }
.split--flush .split__fig img{ aspect-ratio:1/1; height:100%; }
.split__pad{ padding:clamp(40px,6vw,110px) clamp(24px,5vw,90px); }
.split__txt{ max-width:52ch; }
.split__txt>*+*{ margin-top:22px; }

/* --- 16. TRUST BAR ------------------------------------------------------- */
.trust{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border-block:1px solid var(--line-soft); }
.trust>div{ background:var(--paper); padding:clamp(24px,2.6vw,40px) clamp(18px,2vw,32px); }
.trust h4{ font-family:var(--display); font-weight:340; font-size:18px; margin:14px 0 8px; }
.trust svg{ width:22px; height:22px; stroke:var(--taupe); }

/* --- 17. FOOTER ---------------------------------------------------------- */
.ftr{ background:var(--espresso); color:var(--bone); padding-top:clamp(56px,6vw,96px); }
.ftr a{ color:rgba(241,237,228,.76); transition:color .25s; }
.ftr a:hover{ color:var(--bone); }
.ftr__top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:clamp(26px,3vw,56px); padding-bottom:clamp(44px,5vw,80px); }
.ftr h4{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:rgba(241,237,228,.5); margin-bottom:18px; font-weight:520; }
.ftr li{ padding:6px 0; font-size:14.5px; }
.ftr__bot{ display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap;
  border-top:1px solid rgba(241,237,228,.13); padding-block:24px 30px; font-size:12.5px; color:rgba(241,237,228,.5); }
.subscribe{ display:flex; border-bottom:1px solid rgba(241,237,228,.28); }
.subscribe input{ flex:1; background:none; border:0; padding:11px 0; color:var(--bone); font-size:14.5px; }
.subscribe input::placeholder{ color:rgba(241,237,228,.42); }
.subscribe button{ padding:11px 0 11px 14px; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; }

/* --- 18. CATALOGUE PAGE -------------------------------------------------- */
.pagehead{ padding-top:calc(78px + clamp(40px,5vw,84px)); padding-bottom:clamp(30px,3.4vw,52px); }
.catalogue{ display:grid; grid-template-columns:236px 1fr; gap:clamp(28px,3.4vw,64px); align-items:start; }
.catalogue>*{ min-width:0; }
.grid>*,.pdp>*,.checkout>*,.split>*{ min-width:0; }
.filters{ position:sticky; top:104px; }
.filters h4{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:520; }
.filters__grp+.filters__grp{ margin-top:32px; padding-top:32px; border-top:1px solid var(--line-soft); }
.fbtn{
  display:flex; justify-content:space-between; width:100%; padding:8px 0; text-align:left;
  font-size:14.5px; color:var(--taupe); transition:color .25s;
}
.fbtn:hover{ color:var(--espresso); }
.fbtn[aria-pressed="true"]{ color:var(--espresso); font-weight:520; }
.fbtn[aria-pressed="true"]::before{ content:"—"; margin-right:8px; }
.fbtn span{ color:var(--greige); font-size:12.5px; }

.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding-bottom:22px; margin-bottom:clamp(24px,2.6vw,40px); border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.selectish{ border:1px solid var(--line); border-radius:100px; padding:9px 16px; font-size:12.5px;
  letter-spacing:.1em; text-transform:uppercase; background:none; }
.catgroup+.catgroup{ margin-top:clamp(48px,5vw,88px); }
.catgroup__hd{ display:flex; align-items:baseline; gap:16px; margin-bottom:clamp(20px,2.2vw,34px); }
.catgroup__hd .rulefill{ flex:1; height:1px; background:var(--line-soft); }

/* Edge-to-edge on a phone so the last category peeks past the gutter rather
   than stopping dead at it — the peek is what says "there is more". */
.chips{ display:none; gap:8px; overflow-x:auto; scrollbar-width:none;
  margin-inline:calc(var(--gut) * -1); padding:0 var(--gut) 14px; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ border:1px solid var(--line); border-radius:100px; padding:8px 15px; white-space:nowrap;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--taupe); }
.chip[aria-pressed="true"]{ background:var(--espresso); color:var(--bone); border-color:var(--espresso); }

/* --- 19. PRODUCT PAGE ---------------------------------------------------- */
.pdp{ display:grid; grid-template-columns:1.32fr 1fr; gap:clamp(28px,4vw,88px); align-items:start;
  padding-top:calc(78px + clamp(26px,3vw,50px)); }
.gallery{ display:grid; gap:10px; }
.gallery__main{ position:relative; background:var(--cream); border-radius:2px; overflow:hidden; aspect-ratio:4/5; }
.gallery__main img{ width:100%; height:100%; object-fit:cover; }
.gallery__thumbs{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; }
.gallery__thumbs button{ border-radius:2px; overflow:hidden; aspect-ratio:1; background:var(--cream);
  opacity:.55; transition:opacity .3s, outline-color .3s; outline:1px solid transparent; outline-offset:-1px; }
.gallery__thumbs button[aria-current="true"]{ opacity:1; outline-color:var(--taupe); }
.gallery__thumbs img{ width:100%; height:100%; object-fit:cover; }
.zoombtn{ position:absolute; right:12px; bottom:12px; background:rgba(246,243,236,.92); border-radius:100px;
  padding:9px 15px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; }

.pdp__info{ position:sticky; top:104px; }
.pdp__price{ font-family:var(--display); font-weight:340; font-size:26px; }
.qty{ display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:100px; }
.qty button{ width:42px; height:46px; font-size:17px; }
.qty span{ min-width:30px; text-align:center; font-size:15px; }

.tabs{ margin-top:clamp(28px,3vw,44px); border-top:1px solid var(--line-soft); }
.tabs__hd{ display:flex; gap:20px; flex-wrap:wrap; padding-top:20px; }
.tabs__hd button{ font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:var(--muted);
  padding-bottom:9px; border-bottom:1px solid transparent; transition:.3s; }
.tabs__hd button[aria-selected="true"]{ color:var(--espresso); border-color:var(--espresso); }
.tabs__bd{ padding-top:22px; font-size:15px; color:var(--taupe); line-height:1.7; }
.spec-row{ display:flex; gap:20px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.spec-row dt{ flex:0 0 128px; font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); padding-top:2px; }
.spec-row dd{ margin:0; flex:1; }

.assure{ display:grid; gap:2px; margin-top:26px; background:var(--line-soft); border:1px solid var(--line-soft); border-radius:2px; }
.assure div{ background:var(--paper); padding:14px 16px; display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--taupe); }
.assure svg{ width:16px; height:16px; flex:0 0 16px; margin-top:3px; stroke:var(--gilt); }

/* --- 20. CART DRAWER ----------------------------------------------------- */
.line{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-soft); }
.line img{ width:82px; height:100px; object-fit:cover; border-radius:2px; background:var(--cream); flex:0 0 82px; }
.line__mid{ flex:1; min-width:0; }
.line__name{ font-family:var(--display); font-size:16px; font-weight:340; line-height:1.3; }
.line__rm{ font-size:12px; color:var(--muted); text-decoration:underline; text-underline-offset:3px; margin-top:8px; }
.empty{ text-align:center; padding:56px 0; color:var(--muted); }

/* --- 21. CHECKOUT -------------------------------------------------------- */
.checkout{ display:grid; grid-template-columns:1.25fr .9fr; gap:clamp(28px,4vw,80px); align-items:start;
  padding-top:calc(78px + clamp(30px,3.4vw,56px)); }
.steps{ display:flex; gap:0; margin-bottom:clamp(30px,3.4vw,48px); flex-wrap:wrap; }
.step{ flex:1; min-width:150px; padding:16px 18px 16px 0; border-top:2px solid var(--line-soft); }
.step.on{ border-top-color:var(--espresso); }
.step b{ display:block; font-family:var(--display); font-weight:340; font-size:16.5px; margin-bottom:5px; }
.step .n{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

.field{ margin-bottom:18px; }
.field label{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input,.field select,.field textarea{
  width:100%; background:transparent; border:1px solid var(--line); border-radius:2px;
  padding:13px 14px; font-size:15px; transition:border-color .3s;
}
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--taupe); outline:none; }
.field--half{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.summary{ background:var(--cream); border-radius:3px; padding:clamp(22px,2.4vw,34px); position:sticky; top:104px; }
.totrow{ display:flex; justify-content:space-between; padding:9px 0; font-size:14.5px; color:var(--taupe); }
.totrow--big{ border-top:1px solid var(--line); margin-top:10px; padding-top:16px;
  font-family:var(--display); font-size:20px; color:var(--espresso); }
.wa-note{ display:flex; gap:12px; align-items:flex-start; background:var(--paper);
  border:1px solid var(--line-soft); border-radius:3px; padding:15px; margin-top:20px; font-size:13.5px; color:var(--taupe); }
.wa-note svg{ width:18px; flex:0 0 18px; margin-top:2px; }
/* With an empty selection this is filled with nothing — without this it still
   paints as a blank padded box under the summary. */
.wa-note:empty{ display:none; }

.done{ max-width:620px; margin-inline:auto; text-align:center; padding-block:clamp(60px,8vw,120px); }
.done__badge{ width:66px; height:66px; border-radius:100px; border:1px solid var(--line);
  display:grid; place-items:center; margin:0 auto 26px; }
.done__badge svg{ width:26px; stroke:var(--gilt); }
.timeline{ text-align:left; margin-top:36px; border-top:1px solid var(--line-soft); }
.timeline li{ display:flex; gap:16px; padding:18px 0; border-bottom:1px solid var(--line-soft); }
.timeline .dot{ width:26px; height:26px; border-radius:100px; border:1px solid var(--line); flex:0 0 26px;
  display:grid; place-items:center; font-size:11.5px; color:var(--muted); }
.timeline b{ font-family:var(--display); font-weight:340; font-size:17px; display:block; margin-bottom:3px; }

.demo-flag{ background:var(--gilt); color:#fff; text-align:center; padding:8px 16px;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  position:fixed; inset:0 0 auto; z-index:960; }
body.has-flag{ padding-top:34px; }
body.has-flag .hdr{ top:34px; }
body.has-flag .mega{ top:112px; }
body.has-flag .panel-host{ top:34px; }

/* --- 22. REVEAL ANIMATION ------------------------------------------------ */
.rv{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--slow), transform .9s var(--slow); }
.rv.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .rv{ opacity:1; transform:none; }
}

/* --- 23. RESPONSIVE ------------------------------------------------------ */
@media (max-width:1180px){
  .grid--4{ grid-template-columns:repeat(3,1fr); }
  .tiles{ grid-template-columns:repeat(2,1fr); }
  .ftr__top{ grid-template-columns:1fr 1fr; }
  /* The editorial image is the first thing to go — five spacious category
     columns are the point of the menu, the picture is the garnish. */
  .mega__in--furniture{ grid-template-columns:1fr; }
  .mega__side{ border-left:0; padding-left:0; border-top:1px solid var(--line-soft);
    padding-top:clamp(20px,2.2vw,30px); margin-top:clamp(22px,2.4vw,34px); }
  .mega__promo{ display:none; }
  .mega__worlds{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:960px){
  .hdr__nav{ display:none; }
  .burger{ display:grid; }
  .mega{ display:none; }
  .catalogue{ grid-template-columns:1fr; }
  .filters{ display:none; }
  .chips{ display:flex; }
  .pdp{ grid-template-columns:1fr; }
  .pdp__info{ position:static; }
  .checkout{ grid-template-columns:1fr; }
  .summary{ position:static; }
  .split{ grid-template-columns:1fr; }
  .split img{ aspect-ratio:16/11; }
  .split--flush .split__fig img{ aspect-ratio:16/11; }
  .trust{ grid-template-columns:1fr 1fr; }
}
@media (max-width:680px){
  .grid--4,.grid--3{ grid-template-columns:repeat(2,1fr); }
  /* Two-up is for product cards. A pair of editorial tiles side by side on a
     390px screen leaves each one narrower than its own title. */
  .grid--2{ grid-template-columns:1fr; }
  .tiles{ grid-template-columns:1fr; }
  .ftr__top{ grid-template-columns:1fr; }
  .trust{ grid-template-columns:1fr; }
  .gallery__thumbs{ grid-template-columns:repeat(5,1fr); }
  .field--half{ grid-template-columns:1fr; }
  .scrollcue{ display:none; }
  /* Four controls plus the cartouche will not fit a 390px row at full size.
     Everything in the bar shrinks together rather than one of the controls
     being dropped — a wishlist you cannot reach on a phone is not a
     wishlist. */
  .hdr__in{ gap:12px; }
  .hdr__act{ gap:7px; }
  .hdr__brand .mark{ font-size:12.5px; padding:5px 13px 6px; letter-spacing:.2em; text-indent:.2em; }
  .icon-btn{ width:34px; height:34px; }
  .icon-btn svg{ width:15px; height:15px; }
  .card__quick{ display:none; }
  .card__body{ flex-direction:column; gap:6px; }
  .card__name{ font-size:16px; }
  .card__price{ font-size:13.5px; }
  .card__sub{ display:none; }
}

/* ==========================================================================
   24. PAGE PRIMITIVES
   Reusable classes for About, Projects, Contact, Policies and 404.
   Nothing here is page-specific inline layout — every grid lives as a class
   so the mobile collapse at the bottom of this section can always win.
   ========================================================================== */

/* --- 24.1 Search overlay -------------------------------------------------- */
.srch{
  position:fixed; inset:0; z-index:970; display:grid; align-items:start;
  visibility:hidden; opacity:0; transition:opacity .35s var(--ease), visibility .35s;
}
.srch.open{ visibility:visible; opacity:1; }
.srch__scrim{ position:absolute; inset:0; background:rgba(28,24,21,.42); backdrop-filter:blur(2px); }
.srch__panel{
  position:relative; background:var(--paper); color:var(--espresso);
  border-bottom:1px solid var(--line-soft); box-shadow:0 26px 50px -34px rgba(46,40,35,.55);
  transform:translateY(-14px); transition:transform .45s var(--slow);
  max-height:100svh; overflow-y:auto;
}
.srch.open .srch__panel{ transform:none; }
.srch__in{ max-width:var(--maxw); margin-inline:auto; padding:clamp(18px,2.2vw,30px) var(--gut) clamp(22px,2.6vw,36px); }
.srch__field{ display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.srch__field svg{ width:19px; height:19px; flex:0 0 19px; stroke:var(--muted); }
.srch__field input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  font-family:var(--display); font-weight:300; font-size:clamp(22px,2.6vw,34px);
  letter-spacing:-.014em; padding:4px 0;
}
.srch__field input::placeholder{ color:var(--greige); }
/* The UA clear button is a blue X in Chrome — off-palette, and redundant next
   to the overlay's own close control. */
.srch__field input::-webkit-search-cancel-button,
.srch__field input::-webkit-search-decoration{ -webkit-appearance:none; appearance:none; }
.srch__hint{ margin-top:12px; }
.srch__res{ margin-top:clamp(16px,2vw,26px); }
.srch__row{ display:flex; gap:16px; align-items:center; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.srch__row:hover{ background:var(--cream); }
.srch__row img{ width:56px; height:70px; object-fit:cover; border-radius:2px; background:var(--cream); flex:0 0 56px; }
.srch__row>span{ min-width:0; }
.srch__row .nm{ display:block; font-family:var(--display); font-weight:340; font-size:17px; line-height:1.25; }
.srch__row .sb{ display:block; font-size:12.5px; color:var(--muted); margin-top:4px; }
.srch__row .pr{ margin-left:auto; font-size:14px; color:var(--taupe); white-space:nowrap; }
.srch__all{ margin-top:20px; }

/* --- 24.2 Editorial full-width figure ------------------------------------ */
.fig-wide{ margin:0; }
.fig-wide img{ width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:2px; background:var(--cream); }
.fig-wide figcaption{ margin-top:14px; }

/* --- 24.3 Numbered beats (a process, a set of principles) ---------------- */
.beats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);
  border-block:1px solid var(--line-soft); }
.beats--3{ grid-template-columns:repeat(3,1fr); }
.beats--5{ grid-template-columns:repeat(5,1fr); }
.beats>div{ background:var(--paper); padding:clamp(26px,2.8vw,42px) clamp(20px,2.2vw,34px); }
.beats--dark{ background:rgba(241,237,228,.16); border-color:rgba(241,237,228,.16); }
.beats--dark>div{ background:var(--espresso); }
.beats .n{ font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--gilt); }
.beats h3{ font-family:var(--display); font-weight:340; font-size:clamp(19px,1.6vw,23px);
  line-height:1.22; letter-spacing:-.008em; margin:14px 0 12px; }
.beats p{ font-size:14.5px; line-height:1.68; color:var(--taupe); }
.beats--dark p{ color:rgba(241,237,228,.74); }

/* --- 24.4 Two-column prose (a stated position, a long argument) ---------- */
.prose2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,80px); align-items:start; }
.prose2 .col>*+*{ margin-top:20px; }

/* --- 24.5 Bordered cards row (contact routes, closing blocks) ------------ */
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,1.6vw,24px); }
.cards--2{ grid-template-columns:repeat(2,1fr); }
.rcard{
  display:flex; flex-direction:column; gap:12px;
  border:1px solid var(--line); border-radius:3px;
  padding:clamp(24px,2.6vw,36px); background:var(--paper);
}
.rcard svg{ width:20px; height:20px; stroke:var(--gilt); }
.rcard h3{ font-family:var(--display); font-weight:340; font-size:21px; line-height:1.22; }
.rcard p{ font-size:14.5px; line-height:1.66; color:var(--taupe); }
.rcard .link-u,.rcard .btn{ margin-top:auto; align-self:flex-start; }

/* --- 24.6 Notice — honest placeholder / draft-status framing ------------- */
.notice{
  display:flex; gap:12px; align-items:flex-start;
  border:1px solid var(--line); border-left:2px solid var(--gilt); border-radius:2px;
  padding:15px 18px; font-size:13.5px; line-height:1.62; color:var(--taupe);
  background:var(--cream); max-width:78ch;
}
.notice svg{ width:16px; height:16px; flex:0 0 16px; margin-top:3px; stroke:var(--gilt); }

/* --- 24.7 Projects ------------------------------------------------------- */
.proj{ display:grid; grid-template-columns:1.18fr .82fr; gap:clamp(24px,3.4vw,64px); align-items:start; }
.proj+.proj{ margin-top:clamp(56px,7vw,120px); padding-top:clamp(56px,7vw,120px); border-top:1px solid var(--line-soft); }
.proj>*{ min-width:0; }
.proj__media{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1vw,14px); }
.proj__media figure{ margin:0; min-width:0; }
.proj__media img{ width:100%; height:100%; object-fit:cover; border-radius:2px; background:var(--cream); aspect-ratio:1; }
.proj__media figure:first-child{ grid-column:1 / -1; }
.proj__media figure:first-child img{ aspect-ratio:16/11; }
.proj__body>*+*{ margin-top:18px; }
.proj__body .lede{ max-width:46ch; }
.proj__pieces{ display:flex; flex-wrap:wrap; gap:8px; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line); border-radius:100px; padding:8px 15px;
  font-size:12.5px; color:var(--taupe); transition:border-color .3s, color .3s;
}
a.pill:hover{ border-color:var(--espresso); color:var(--espresso); }

/* --- 24.8 Map placeholder — palette-matched, no third-party embed -------- */
.mapfig{ margin:0; }
.mapbox{
  position:relative; width:100%; aspect-ratio:16/7; border-radius:3px; overflow:hidden;
  border:1px solid var(--line); background:var(--cream);
  background-image:
    repeating-linear-gradient(90deg, rgba(87,76,63,.10) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg,  rgba(87,76,63,.10) 0 1px, transparent 1px 84px),
    linear-gradient(120deg, rgba(160,133,81,.10), rgba(205,200,186,.34));
}
.mapbox::before{
  content:""; position:absolute; left:-10%; right:-10%; top:38%; height:22px;
  background:rgba(87,76,63,.13); transform:rotate(-7deg);
}
.mapbox::after{
  content:""; position:absolute; left:24%; top:-10%; bottom:-10%; width:16px;
  background:rgba(87,76,63,.10); transform:rotate(9deg);
}
.mapbox__pin{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
}
.mapbox__dot{ width:14px; height:14px; border-radius:100px; background:var(--gilt);
  box-shadow:0 0 0 7px rgba(160,133,81,.20), 0 0 0 15px rgba(160,133,81,.10); }
.mapbox__lbl{
  background:var(--paper); border:1px solid var(--line); border-radius:100px;
  padding:8px 16px; font-size:12.5px; color:var(--espresso); max-width:min(82vw,420px);
}

/* --- 24.9 Document page (policies) --------------------------------------- */
.doc{ display:grid; grid-template-columns:230px 1fr; gap:clamp(28px,4vw,80px); align-items:start; }
.doc>*{ min-width:0; }
.doc__nav{ position:sticky; top:104px; }
.doc__nav a{ display:block; padding:9px 0; font-size:14.5px; color:var(--taupe); transition:color .25s; }
.doc__nav a:hover{ color:var(--espresso); }
.doc__nav a.is-here{ color:var(--espresso); font-weight:520; }
.doc__nav a.is-here::before{ content:"—"; margin-right:8px; color:var(--gilt); }
.doc__nav h4{ font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-weight:520; margin-bottom:10px; }
.doc__sec+.doc__sec{ margin-top:clamp(48px,5.5vw,92px); padding-top:clamp(40px,4.5vw,72px); border-top:1px solid var(--line-soft); }
.doc__sec{ scroll-margin-top:104px; }
.doc__sec h2{ margin-bottom:20px; }
.doc__sec h3{ font-family:var(--display); font-weight:340; font-size:19px; margin:28px 0 10px; }
.doc__sec p,.doc__sec li{ font-size:15px; line-height:1.72; color:var(--taupe); max-width:70ch; }
.doc__sec p+p,.doc__sec ul+p{ margin-top:14px; }
.doc__sec ul{ margin-top:12px; }
.doc__sec li{ padding-left:18px; position:relative; margin-top:8px; }
.doc__sec li::before{ content:"—"; position:absolute; left:0; color:var(--greige); }

/* --- 24.10 Editorial tile (Projects, in the homepage tile row) ----------- */
.tile--ed{ background:var(--espresso); color:var(--bone); align-items:stretch; }
.tile--ed::after{ display:none; }
.tile--ed .tile__t{
  display:flex; flex-direction:column; justify-content:space-between; height:100%;
  padding:clamp(22px,2.2vw,32px);
}
.tile--ed .eyebrow{ color:var(--gilt); }
.tile--ed p{ color:rgba(241,237,228,.74); font-size:14px; max-width:30ch; margin-top:10px; }
.tile--ed .link-u{ border-color:rgba(241,237,228,.3); align-self:flex-start; }
.tile--ed .rulebox{ height:1px; background:rgba(241,237,228,.2); margin:22px 0; }

/* --- 24.11 Inline form confirmation (contact) ---------------------------- */
.formdone{
  border:1px solid var(--line); border-radius:3px; padding:clamp(26px,3vw,42px);
  background:var(--cream);
}
.formdone__badge{ width:52px; height:52px; border-radius:100px; border:1px solid var(--line);
  display:grid; place-items:center; margin-bottom:20px; }
.formdone__badge svg{ width:22px; stroke:var(--gilt); }
.formdone>*+*{ margin-top:14px; }

/* --- 24.12 Small shared helpers ----------------------------------------- */
.headwide{ max-width:24ch; }
.stack>*+*{ margin-top:20px; }
.stack-sm>*+*{ margin-top:12px; }
.row-btns{ display:flex; gap:12px; flex-wrap:wrap; }
.row-btns--center{ justify-content:center; }
.center-col{ max-width:760px; margin-inline:auto; text-align:center; }
.center-col .lede{ margin-inline:auto; }
.pt0{ padding-top:0; }

/* --- 24.13 Responsive ---------------------------------------------------- */
@media (max-width:1180px){
  .beats{ grid-template-columns:repeat(2,1fr); }
  .beats--5{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:960px){
  .prose2{ grid-template-columns:1fr; }
  .cards{ grid-template-columns:1fr 1fr; }
  .proj{ grid-template-columns:1fr; }
  .doc{ grid-template-columns:1fr; }
  .doc__nav{ position:static; display:flex; gap:8px; overflow-x:auto; padding-bottom:12px;
    border-bottom:1px solid var(--line-soft); scrollbar-width:none; }
  .doc__nav::-webkit-scrollbar{ display:none; }
  .doc__nav a{ white-space:nowrap; border:1px solid var(--line); border-radius:100px;
    padding:8px 15px; font-size:12.5px; }
  .doc__nav h4{ display:none; }          /* the rail becomes a chip row here */
  .doc__nav a.is-here::before{ content:none; }
  .doc__nav a.is-here{ background:var(--espresso); color:var(--bone); border-color:var(--espresso); }
  .fig-wide img{ aspect-ratio:16/10; }
}
@media (max-width:680px){
  .beats,.beats--3,.beats--5{ grid-template-columns:1fr; }
  .cards,.cards--2{ grid-template-columns:1fr; }
  .mapbox{ aspect-ratio:4/3; }
  .srch__row img{ width:46px; height:58px; flex-basis:46px; }
  .srch__row .pr{ display:none; }
  /* A 128px label column on a 390px screen squeezes the value into three
     words a line. Stack instead — this improves the product page too. */
  .spec-row{ flex-direction:column; gap:5px; }
  .spec-row dt{ flex:0 0 auto; }
}

/* ==========================================================================
   25. MOBILE-FIRST STRIPS, THE NEW HOME PAGE, AND THE NEW PAGES
   Everything added for the navigation restructure lives here so the mobile
   collapse at the end of the file can always win over it.
   ========================================================================== */

/* --- 25.1 Horizontal strip ----------------------------------------------
   The one primitive behind the category strip, the new-in rail, the project
   previews and the product gallery. Edge-to-edge inside a .wrap, snapping,
   and sized so the next card peeks — the peek is what tells a thumb there is
   more to the right without printing an instruction. */
.hstrip{
  display:flex; gap:clamp(10px,1.2vw,18px);
  overflow-x:auto; overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin-inline:calc(var(--gut) * -1);
  padding-inline:var(--gut);
  /* Without this the first card sits flush against the screen edge, out of
     line with every other block on the page. `scroll-snap-align:start` snaps a
     child to the scrollport edge and takes no notice of padding-inline, so the
     browser scrolls to 20px on load and cancels the gutter out. scroll-padding
     is what moves the snap line itself. */
  scroll-padding-inline:var(--gut);
  padding-bottom:4px;
}
.hstrip::-webkit-scrollbar{ display:none; }
.hstrip>*{ scroll-snap-align:start; flex:0 0 auto; }
.hstrip.is-dragging{ scroll-snap-type:none; cursor:grabbing; }
.hstrip.is-dragging a{ pointer-events:none; }

/* --- 25.2 Category strip (Shop Furniture) --------------------------------
   Was a stacked list on a phone, which buried Storage and Decor below the
   fold. Now one swipeable row of tiles at every width. */
.catstrip>*{ width:min(74vw, 320px); }
.cattile{ position:relative; display:flex; align-items:flex-end; overflow:hidden;
  border-radius:2px; aspect-ratio:3/4; color:var(--bone); }
.cattile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.2s var(--slow); }
.cattile::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,24,21,0) 34%,rgba(28,24,21,.74) 100%); }
.cattile:hover img{ transform:scale(1.05); }
.cattile__t{ position:relative; z-index:2; padding:clamp(18px,1.8vw,26px); width:100%; }
.cattile__t h3{ font-family:var(--display); font-weight:340; font-size:clamp(21px,2vw,28px); line-height:1.15; }
.cattile__t p{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(241,237,228,.66); margin-top:9px; }

/* --- 25.3 Product gallery — the main image swipes ------------------------
   The thumbnails stay, but they are now the secondary control. The hero image
   itself is the gallery: one frame per screen, snapping, with the dots and
   the thumbnail rail both following it. */
.gallery__swipe{
  display:flex; gap:8px; overflow-x:auto; scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
  border-radius:2px; background:var(--cream); position:relative;
}
.gallery__swipe::-webkit-scrollbar{ display:none; }
.gallery__swipe.is-dragging{ scroll-snap-type:none; cursor:grabbing; }
.gallery__frame{ flex:0 0 100%; scroll-snap-align:center; aspect-ratio:4/5;
  background:var(--cream); overflow:hidden; border-radius:2px; }
.gallery__frame img{ width:100%; height:100%; object-fit:cover; }
.gdots{ display:flex; gap:7px; justify-content:center; padding-top:12px; }
.gdots button{ width:6px; height:6px; border-radius:100px; background:var(--greige);
  transition:background .3s, transform .3s; padding:0; }
.gdots button[aria-current="true"]{ background:var(--taupe); transform:scale(1.5); }

/* --- 25.4 Full-bleed editorial band --------------------------------------
   Image first, a short line of text over it. Used for the Studio CB feature,
   the Heritage band and the Bespoke band on the home page. */
.band{ position:relative; min-height:min(84svh,760px); display:flex; align-items:flex-end;
  overflow:hidden; color:var(--bone); }
.band__media{ position:absolute; inset:0; }
.band__media img,.band__media video{ width:100%; height:100%; object-fit:cover; }
/* The scrim has to carry the type over whatever frame ends up behind it,
   including a bright one. Two layers: a vertical wash for the header and the
   button row, and a lift from the left so a headline keeps its contrast even
   where the image is pale at the bottom. */
.band__media::after{ content:""; position:absolute; inset:0;
  background:
    linear-gradient(94deg, rgba(28,24,21,.62) 0%, rgba(28,24,21,.30) 46%, rgba(28,24,21,0) 80%),
    linear-gradient(180deg, rgba(28,24,21,.34) 0%, rgba(28,24,21,.08) 30%, rgba(28,24,21,.52) 62%, rgba(28,24,21,.86) 100%); }
.band__in{ position:relative; width:100%; padding-block:clamp(38px,5vw,84px); }
.band__in .eyebrow{ color:rgba(241,237,228,.7); display:block; margin-bottom:16px; }
.band__in .d2{ max-width:17ch; text-wrap:balance; }
.band__in p{ color:rgba(241,237,228,.8); max-width:44ch; margin-top:18px; font-size:15.5px; }
.band__in .row-btns{ margin-top:28px; }
.band--short{ min-height:min(62svh,560px); }
.band--tall{ min-height:min(92svh,860px); }

/* --- 25.5 Worlds (collections) ------------------------------------------- */
.worlds{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.8vw,30px); }
.world{ position:relative; display:flex; align-items:flex-end; overflow:hidden;
  border-radius:2px; aspect-ratio:4/5; color:var(--bone); }
.world img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform 1.3s var(--slow); }
.world::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,24,21,.08) 30%,rgba(28,24,21,.78) 100%); }
.world:hover img{ transform:scale(1.05); }
.world__t{ position:relative; z-index:2; padding:clamp(22px,2.4vw,38px); width:100%; }
.world__t h3{ font-family:var(--display); font-weight:300; font-size:clamp(24px,2.6vw,40px); line-height:1.1; }
.world__t p{ font-size:14.5px; color:rgba(241,237,228,.78); margin-top:12px; max-width:34ch; }
.world__t .ct{ display:block; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gilt); margin-top:16px; }
.worlds--4{ grid-template-columns:repeat(4,1fr); }
.worlds--4 .world{ aspect-ratio:3/4; }

/* --- 25.6 Collection landing header -------------------------------------- */
.chero{ position:relative; min-height:min(76svh,700px); display:flex; align-items:flex-end;
  overflow:hidden; color:var(--bone); }
.chero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.chero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(28,24,21,.40) 0%,rgba(28,24,21,.10) 42%,rgba(28,24,21,.78) 100%); }
.chero__in{ position:relative; z-index:2; width:100%; padding-block:clamp(38px,5vw,80px); }
.chero__in .eyebrow{ color:rgba(241,237,228,.7); display:block; margin-bottom:16px; }
.chero__in p{ color:rgba(241,237,228,.82); max-width:46ch; margin-top:16px; font-size:16px; }

/* --- 25.7 Numbered vertical steps (Bespoke) ------------------------------ */
.vsteps{ border-top:1px solid var(--line-soft); }
.vstep{ display:grid; grid-template-columns:76px 1fr; gap:clamp(18px,2.4vw,44px);
  padding:clamp(24px,2.8vw,42px) 0; border-bottom:1px solid var(--line-soft); align-items:start; }
.vstep__n{ font-family:var(--display); font-weight:300; font-size:clamp(28px,3vw,44px);
  color:var(--greige); line-height:1; }
.vstep h3{ font-family:var(--display); font-weight:340; font-size:clamp(21px,2vw,27px);
  line-height:1.2; margin-bottom:10px; }
.vstep p{ font-size:15px; line-height:1.7; color:var(--taupe); max-width:62ch; }

/* --- 25.8 Filter chip row (Projects groups) ------------------------------ */
.chiprow{ display:flex; gap:8px; flex-wrap:wrap; }
.chiprow .chip{ display:inline-flex; }

/* --- 25.9 Not-stocked-yet state ------------------------------------------
   What a "Soon" sub-category lands on. It is an answer, not an empty grid. */
.soonbox{
  border:1px solid var(--line); border-radius:3px; background:var(--cream);
  padding:clamp(30px,3.4vw,56px); text-align:center; max-width:720px; margin-inline:auto;
}
.soonbox .eyebrow{ display:block; color:var(--gilt); margin-bottom:14px; }
.soonbox p{ font-size:15px; line-height:1.7; color:var(--taupe); max-width:56ch; margin-inline:auto; }
.soonbox .row-btns{ justify-content:center; margin-top:26px; }

/* --- 25.10 Wishlist control ---------------------------------------------- */
.wishbtn{
  display:inline-flex; align-items:center; gap:10px; margin-top:14px;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  transition:color .25s;
}
.wishbtn svg{ width:16px; height:16px; stroke:currentColor; transition:fill .25s; fill:none; }
.wishbtn:hover{ color:var(--espresso); }
.wishbtn[aria-pressed="true"]{ color:var(--gilt); }
.wishbtn[aria-pressed="true"] svg{ fill:rgba(160,133,81,.22); }

/* --- 25.11 Small helpers ------------------------------------------------- */
.measure{ max-width:58ch; }
.quiet{ color:var(--muted); }
.lede--tight{ max-width:46ch; }

/* --- 25.12 Responsive ---------------------------------------------------- */
@media (max-width:1180px){
  .worlds--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:960px){
  .band{ min-height:min(72svh,640px); }
  .band--tall{ min-height:min(78svh,700px); }
  .vstep{ grid-template-columns:52px 1fr; }
}
@media (max-width:680px){
  .worlds,.worlds--4{ grid-template-columns:1fr; }
  .world{ aspect-ratio:4/5; }
  .catstrip>*{ width:min(76vw, 300px); }
  .band{ min-height:min(68svh,600px); }
  .band__in .d2{ max-width:14ch; }
  .vstep{ grid-template-columns:1fr; gap:6px; }
  .vstep__n{ font-size:22px; }
  .gallery__frame{ aspect-ratio:3/4; }
}

/* ==========================================================================
   26. STRIP NAVIGATION
   Every horizontal strip on the site gets the same three controls, wired up
   automatically by swipeScan() in site.js: a pair of arrows, a progress bar
   that tracks the scroll, and a count. Nothing here is per-section markup —
   a new strip gets them by carrying `data-swipe`.
   ========================================================================== */

/* --- 26.1 The arrows ----------------------------------------------------- */
.railnav{ display:flex; gap:9px; align-items:center; }
.railnav .icon-btn{ flex:0 0 auto; }
/* Disabled rather than hidden at the ends of the strip: an arrow that vanishes
   makes the row jump, and a disabled one still says which way there is more. */
.railnav .icon-btn[disabled]{ opacity:.28; pointer-events:none; }
.railnav .icon-btn svg{ transition:transform .35s var(--ease); }
.railnav .icon-btn:not([disabled]):hover svg{ transform:translateX(2px); }
.railnav .icon-btn[data-strip-prev]:not([disabled]):hover svg{ transform:translateX(-2px); }
/* A strip that fits has nothing to navigate to. */
.railnav[hidden]{ display:none; }

/* --- 26.2 The progress bar ----------------------------------------------
   A hairline under the strip, the width of the visible fraction. It is the
   only scroll affordance a touch device gets once the scrollbar is hidden. */
.railbar{
  position:relative; height:2px; margin-top:clamp(14px,1.6vw,22px);
  background:var(--line-soft); border-radius:100px; overflow:hidden;
}
.railbar[hidden]{ display:none; }
.railbar span{
  position:absolute; inset-block:0; left:0; display:block;
  background:var(--taupe); border-radius:100px;
  transition:transform .28s var(--ease), width .28s var(--ease);
}
/* On a dark ground — the strip inside a .split--dark or a band. */
.split--dark .railbar{ background:rgba(241,237,228,.18); }
.split--dark .railbar span{ background:var(--bone); }

/* --- 26.3 The count ------------------------------------------------------ */
.railcount{
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap;
  margin-right:4px;
}
.railcount[hidden]{ display:none; }

/* --- 26.4 Section head with controls -------------------------------------
   The arrows live at the end of the section head, next to the link. On a
   phone the head stacks, so the row below keeps the link on the left and the
   arrows hard right where a thumb already is. */
.sec-head__act{ display:flex; align-items:center; gap:clamp(14px,1.6vw,24px); flex-wrap:wrap; }

@media (max-width:680px){
  .sec-head{ flex-direction:column; align-items:stretch; gap:20px; }
  .sec-head__act{ justify-content:space-between; width:100%; flex-wrap:nowrap; }
  .railnav{ margin-left:auto; }
}

/* --- 26.5 Card body inside a strip ---------------------------------------
   Strip cards are wide enough (280–330px) to put the name and the price on
   one line, which is how they read on desktop. The 2-up grid on a 390px
   screen is not — a card there is about 175px wide, and a name sharing that
   line with "Rs. 190,000" has roughly six characters to play with. So the
   row layout is scoped to strips and the grid keeps stacking. */
@media (max-width:680px){
  .hstrip .card__body{ flex-direction:row; align-items:baseline; gap:14px; }
  .hstrip .card__body>div{ min-width:0; }
  .hstrip .card__sub{ display:block; }
  .hstrip .card__price{ margin-left:auto; }
}