/* =========================================================
   FULL SHEET VIEW — Home
   Palette : Soft Sage / Powder Blue / Light Blue / Warm Ivory
   Type    : Asar (headings) · Palanquin (body)
   ========================================================= */

:root{
  --sage:      #b9c8b3;
  --powder:    #b8d5de;
  --sky:       #d2e8ff;
  --ivory:     #f5f0e8;

  --ivory-lift: #fbf8f2;
  --ink:       #1b211c;
  --ink-soft:  #39433b;
  --ink-mute:  #6d7970;
  --line:      rgba(27,33,28,.14);
  --line-soft: rgba(27,33,28,.08);

  /* heading emphasis: a second colour to pair with the second (italic) style */
  --accent-ink:   #6c7f64;   /* deep sage, for headings on ivory */
  --accent-dark:  #c8d6c1;   /* light sage, for the heading on the hero */

  --on-dark:      #f7f4ec;
  --on-dark-mute: rgba(247,244,236,.70);

  --f-display: "Asar", "Iowan Old Style", Georgia, serif;
  --f-body:    "Palanquin", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* page frame + hero card */
  --frame: clamp(8px, .85vw, 16px);
  --hpad:  clamp(18px, 3.2vw, 62px);
  --r-hero: clamp(18px, 1.8vw, 30px);

  /* the plate of surface cards that overhangs the hero */
  --shelf-drop: clamp(64px, 8vw, 122px);
  --shelf-w: min(50vw, 700px);
  --notch: clamp(30px, 3.4vw, 62px);

  --pad: clamp(20px, 4.4vw, 76px);
  --r-md: 18px;

  --e-out: cubic-bezier(.16,.84,.24,1);
  --e-soft: cubic-bezier(.32,.72,0,1);
  --slide-dur: 6800ms;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(15px,1.02vw,17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -webkit-overflow-scrolling:touch;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3{ font-family:var(--f-display); font-weight:400; margin:0; letter-spacing:-.012em; }
::selection{ background:var(--sage); color:var(--ink); }

/* ---------- scroll progress ---------- */
.scroll-progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:140; pointer-events:none; }
.scroll-progress span{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--sage),var(--powder) 55%,var(--sky));
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-size:.78rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  border-radius:99px; white-space:nowrap;
  transition:transform .5s var(--e-out), background .4s, color .4s, border-color .4s;
}
.btn__ico{ width:18px; height:18px; display:block; flex:none; transition:transform .55s var(--e-out); }
.btn__ico svg{ width:100%; height:100%; display:block; }
.btn--pill{
  padding:6px 7px 6px 24px; gap:18px;
  background:var(--ivory-lift); color:var(--ink);
  box-shadow:0 20px 50px -24px rgba(0,0,0,.6);
}
.btn--pill .btn__ico--fill{
  width:42px; height:42px; border-radius:50%; padding:11px;
  background:var(--sage); color:var(--ink);
  transition:transform .6s var(--e-out), background .4s;
}
.btn--pill:hover{ transform:translateY(-3px); }
.btn--pill:hover .btn__ico--fill{ transform:rotate(-45deg) scale(1.06); background:var(--powder); }
.btn--dark{ background:var(--ink); color:var(--ivory-lift); }
.btn--dark .btn__ico--fill{ background:var(--sage); color:var(--ink); }
.btn--dark:hover .btn__ico--fill{ transform:rotate(45deg) scale(1.06); }

/* =========================================================
   1 — HERO  (one fixed interior, inset rounded card)
   ========================================================= */
.frame{ padding:var(--frame); background:var(--ivory); }
.hero-block{ position:relative; }

.hero{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--r-hero);
  min-height:clamp(560px, calc(100svh - 2 * var(--frame)), 1020px);
  display:flex; flex-direction:column; justify-content:space-between;
  padding-top:clamp(54px,8vh,116px);
  padding-bottom:clamp(150px,21vh,250px);
  background:#12100d; color:var(--on-dark);
}

/* ---- the single hero image ----------------------------------------------
   ONE swap point. Replace the url() below with the generated interior
   photograph; everything else (cover crop, exposure, scrim) is already set.
   Keep it in this stylesheet — a relative url() inside a custom property set
   in an inline style attribute resolves against the CSS file, not the page.
   ------------------------------------------------------------------------ */
.hero__bg{
  --hero-img: url("../textures/hero-interior.webp");
  --hero-b: .82;
  position:absolute; inset:0; z-index:-2; overflow:hidden;
}
.hero__bg i{
  position:absolute; inset:-4%;
  /* Two declarations, not two layers. A comma-separated list downloads BOTH
     images on every visit; an overridden declaration downloads none. Anything
     that understands var() takes the webp below; pre-var browsers keep the jpeg. */
  background-image:url("../textures/hero-interior.jpg");
  background-image:var(--hero-img);
  background-size:cover; background-position:center;
  filter:brightness(var(--hero-b)) saturate(.96) contrast(1.02);
  animation:heroDrift 26s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{ transform:scale(1.02) translate3d(0,0,0); }
  to  { transform:scale(1.08) translate3d(-1.2%,-.8%,0); }
}

/* legibility scrim — measured, not decorative */
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,11,9,.66) 0%, rgba(9,11,9,.44) 26%,
                            rgba(9,11,9,.18) 58%, rgba(9,11,9,.62) 100%),
    linear-gradient(97deg, rgba(9,11,9,.54) 0%, rgba(9,11,9,.30) 42%, rgba(9,11,9,.06) 82%);
}

/* ---------- hero copy: full sheet, one line ---------- */
.hero__inner{ position:relative; z-index:5; padding:0 var(--hpad); }
/* the bottom block must stop short of the plate that breaks the hero's edge */
.hero__inner--bottom{ padding-right:calc(var(--shelf-w) + 28px); }

.hero__eyebrow{
  display:flex; align-items:center; gap:13px;
  margin:0 0 clamp(12px,1.4vw,20px);
  font-size:.7rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase;
  color:var(--on-dark-mute);
  opacity:0; transform:translateY(14px);
  animation:fadeUp .9s var(--e-out) .14s forwards;
}
.hero__rule{
  width:clamp(26px,3.4vw,52px); height:1px; background:var(--sage);
  display:block; flex:none; transform:scaleX(0); transform-origin:left;
  animation:growX .9s var(--e-out) .26s forwards;
}

.hero__title{
  /* JS measures the one-line fit and passes it in as --fit; CSS keeps the
     fallback and the mobile scale, so a stale --fit can never win */
  font-size:var(--fit, clamp(1.6rem,6.1vw,8.6rem));
  line-height:1.02;
  margin:0 0 clamp(14px,1.7vw,26px);
  white-space:nowrap;
  text-shadow:0 22px 60px rgba(0,0,0,.42);
}
.line{ display:block; overflow:hidden; padding-bottom:.08em; }
.word{
  display:inline-block;
  transform:translateY(112%) rotate(2deg); opacity:0;
  animation:wordUp 1s var(--e-out) forwards;
}
.hero__title .word:nth-child(1){ animation-delay:.22s }
.hero__title .word:nth-child(2){ animation-delay:.28s }
.hero__title .word:nth-child(3){ animation-delay:.34s }
.hero__title .word:nth-child(4){ animation-delay:.40s }
.hero__title .word:nth-child(5){ animation-delay:.46s }
.hero__title .word:nth-child(6){ animation-delay:.52s }
/* every heading runs two colours and two styles: roman in ink, the emphasis
   word italic in the accent */
.word.italic{ font-style:italic; padding-right:.06em; color:var(--accent-ink); }
.hero .word.italic{ color:var(--accent-dark); }

.hero__sub{
  max-width:56ch; margin:0;
  font-size:clamp(.98rem,1.1vw,1.16rem); color:var(--on-dark-mute);
  opacity:0; transform:translateY(18px);
  animation:fadeUp 1s var(--e-out) .6s forwards;
}

@keyframes wordUp{ to{ transform:translateY(0) rotate(0); opacity:1; } }
@keyframes fadeUp{ to{ opacity:1; transform:translateY(0); } }
@keyframes growX { to{ transform:scaleX(1); } }

.hero__cta{
  display:flex; align-items:center; gap:clamp(16px,2.2vw,32px); flex-wrap:wrap;
  margin-top:clamp(20px,2.4vw,34px);
  opacity:0; transform:translateY(20px);
  animation:fadeUp 1s var(--e-out) .72s forwards;
}
.hero__link{
  position:relative; font-size:.76rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-mute);
  padding-bottom:4px; transition:color .35s;
}
.hero__link::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:currentColor; transform:scaleX(.28); transform-origin:left;
  transition:transform .6s var(--e-out);
}
.hero__link:hover{ color:var(--on-dark); }
.hero__link:hover::after{ transform:scaleX(1); }
.hero__link--dark{ color:var(--ink-mute); }
.hero__link--dark:hover{ color:var(--ink); }

/* ---------- the note under the hero, left of the plate ---------- */
.hero-foot{
  /* must exceed the plate's overhang, or the plate touches the next section */
  min-height:calc(var(--shelf-drop) + 28px);
  padding:clamp(24px,2.8vw,40px) calc(var(--shelf-w) + 28px) 0 var(--hpad);
}
.hero-note{
  margin:0; max-width:48ch; color:var(--ink-soft);
  font-size:clamp(.98rem,1.1vw,1.16rem); line-height:1.6;
}

/* =========================================================
   THE EIGHT FAMILIES — a plate breaking the hero's bottom edge
   ========================================================= */
.shelf{
  position:absolute; right:0; bottom:calc(-1 * var(--shelf-drop)); z-index:20;
  display:flex; align-items:stretch; gap:clamp(8px,.8vw,14px);
  width:var(--shelf-w);
  padding:clamp(14px,1.3vw,22px) clamp(14px,1.3vw,20px);
  background:var(--ivory);
  border-radius:clamp(20px,2.2vw,38px) 0 0 0;
  animation:shelfIn 1.2s var(--e-out) .55s both;
}
@keyframes shelfIn{
  from{ transform:translateY(calc(var(--shelf-drop) + 100%)); }
  to  { transform:translateY(0); }
}
/* a smooth concave fillet where the plate meets the hero's bottom edge.
   Overlaps the plate by 1px on each side so no hairline seam can show. */
.shelf::before{
  content:""; position:absolute;
  left:calc(-1 * var(--notch)); bottom:calc(var(--shelf-drop) - 1px);
  width:calc(var(--notch) + 1px); height:calc(var(--notch) + 1px);
  background:radial-gradient(circle at 0 0,
             rgba(245,240,232,0) 0 var(--notch), var(--ivory) var(--notch));
  pointer-events:none;
}

/* ---- material sources -------------------------------------------------
   These MUST live in this stylesheet, not in an inline style attribute:
   Chrome resolves a relative url() inside a custom property against the
   stylesheet that USES var(), not the document, so an inline
   --tex:url('assets/...') silently 404s as assets/css/assets/...
   ---------------------------------------------------------------------- */
[data-tex="fabric"]   { --tex:url("../textures/fabric-420.webp"); }
[data-tex="texture"]  { --tex:url("../textures/texture-420.webp"); }
[data-tex="wooden"]   { --tex:url("../textures/wooden-420.webp"); }
[data-tex="thermolam"]{ --tex:url("../textures/thermolam-420.webp"); }
[data-tex="edgebands"]{ --tex:url("../textures/edgebands-420.webp"); }
[data-tex="laminates"]{ --tex:url("../textures/laminates-420.webp"); }
[data-tex="louvers"]  { --tex:url("../textures/louvers-420.webp"); }
[data-tex="charcoal"] { --tex:url("../textures/charcoal-420.webp"); }

/* the hero plate's feature cards */
[data-feat="full-sheet-view"]   { --tex:url("../features/full-sheet-view-420.webp"); }
[data-feat="immersive-360"]     { --tex:url("../features/immersive-360-420.webp"); }
[data-feat="premium-grade"]     { --tex:url("../features/premium-grade-420.webp"); }
[data-feat="trending-designs"]  { --tex:url("../features/trending-designs-420.webp"); }
[data-feat="anti-scratch"]      { --tex:url("../features/anti-scratch-420.webp"); }
[data-feat="strong-durable"]    { --tex:url("../features/strong-durable-420.webp"); }
[data-feat="anti-termite"]      { --tex:url("../features/anti-termite-420.webp"); }
[data-feat="water-resistant"]   { --tex:url("../features/water-resistant-420.webp"); }
[data-feat="anti-yellow"]       { --tex:url("../features/anti-yellow-420.webp"); }

.shelf__strip{
  display:flex; gap:clamp(8px,.8vw,14px);
  overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:2px;                    /* so the first card's ring is never clipped */
  margin:-2px;
}

/* While the plate drives itself, smooth-scrolling and snapping both fight the
   per-frame scrollLeft writes: the first queues an animation for every frame,
   the second tugs the strip back to a card edge. The prev/next buttons pass
   behavior:'smooth' explicitly, so they are unaffected. */
.shelf__strip.is-auto{ scroll-behavior:auto; scroll-snap-type:none; }

.shelf__strip::-webkit-scrollbar{ display:none; }

.chip{
  position:relative; flex:none; scroll-snap-align:start;
  width:clamp(132px,12.4vw,196px); aspect-ratio:3/4;
  border-radius:clamp(12px,1.2vw,18px); overflow:hidden;
  text-align:left; color:var(--on-dark);
  transition:transform .6s var(--e-out);
}
.chip__media{
  position:absolute; inset:0;
  background-image:var(--tex); background-size:cover; background-position:center;
  transition:transform .9s var(--e-out);
  filter:brightness(.94);
}
.chip::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(10,13,10,.26) 0%,rgba(10,13,10,0) 34%,rgba(10,13,10,.84) 100%);
}
.chip__badge{
  position:absolute; top:9px; left:9px; z-index:3;
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(251,248,242,.9); color:var(--ink);
  transition:background .4s, transform .5s var(--e-out);
}
.chip__badge svg{ width:16px; height:16px; }
.chip__body{
  position:absolute; inset:auto 0 0 0; z-index:3;
  padding:10px clamp(10px,.9vw,14px) clamp(10px,.9vw,14px);
  display:flex; flex-direction:column; gap:3px;
}
.chip__body b{
  font-family:var(--f-display); font-weight:400; font-size:clamp(.94rem,1.05vw,1.16rem);
  line-height:1.1;
}
.chip__body em{
  font-style:normal; font-size:.7rem; line-height:1.34; color:rgba(247,244,236,.78);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.chip:hover{ transform:translateY(-8px); }
.chip--feat{ cursor:default; }
.chip--feat:hover{ transform:none; }
.chip:hover .chip__media{ transform:scale(1.07); }
.chip:hover .chip__badge{ background:var(--sage); transform:rotate(-8deg); }

.shelf__nav{
  display:flex; flex-direction:column; gap:8px;
  align-self:center; flex:none;
}
.shelf__btn{
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--line); color:var(--ink);
  display:grid; place-items:center;
  transition:background .35s, transform .45s var(--e-out), border-color .35s, opacity .3s;
}
.shelf__btn svg{ width:16px; height:16px; }
.shelf__btn:hover{ background:var(--sage); border-color:transparent; transform:scale(1.07); }
.shelf__btn[disabled]{ opacity:.3; pointer-events:none; }

/* =========================================================
   2 — COLLECTION / BENTO
   ========================================================= */
.collection{
  position:relative;
  padding:clamp(72px,9vh,140px) var(--pad) clamp(80px,10vh,140px);
  background:
    /* flat ivory behind the overhanging plate so the two never show a seam */
    linear-gradient(180deg, var(--ivory) 0, var(--ivory) calc(var(--shelf-drop) + 28px),
                            rgba(245,240,232,0) calc(var(--shelf-drop) + 220px)),
    radial-gradient(110% 62% at 94% 26%, rgba(210,232,255,.42), transparent 62%),
    radial-gradient(84% 54% at -8% 44%, rgba(185,200,179,.34), transparent 64%),
    var(--ivory);
}

.collection__head{
  width:min(100%,1560px); margin:0 auto clamp(40px,5.4vw,74px);
}
.eyebrow{
  display:flex; align-items:center; gap:14px; margin:0 0 clamp(14px,1.6vw,22px);
  font-size:.72rem; font-weight:500; letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-mute);
}
.eyebrow__rule{ width:clamp(30px,4vw,56px); height:1px; background:var(--ink-mute); opacity:.5; display:block; flex:none; }
.eyebrow--center{ justify-content:center; }

.section-title{ font-size:clamp(1.85rem,3.4vw,3.4rem); line-height:1.06; margin:0; white-space:nowrap; }
.section-sub{ max-width:58ch; margin:clamp(14px,1.3vw,20px) 0 0; color:var(--ink-soft); font-size:clamp(.98rem,1.05vw,1.1rem); }

[data-reveal-title] .word{ transform:translateY(112%) rotate(2deg); opacity:0; }
[data-reveal-title].is-in .word{ animation:wordUp 1.05s var(--e-out) forwards; }
[data-reveal-title].is-in .word:nth-child(1){ animation-delay:.05s }
[data-reveal-title].is-in .word:nth-child(2){ animation-delay:.12s }
[data-reveal-title].is-in .word:nth-child(3){ animation-delay:.19s }
[data-reveal-title].is-in .word:nth-child(4){ animation-delay:.26s }
[data-reveal-title].is-in .word:nth-child(5){ animation-delay:.33s }

[data-reveal]{
  opacity:0; transform:translateY(26px); filter:blur(5px);
  transition:opacity .9s var(--e-out), transform .9s var(--e-out), filter .9s var(--e-out);
}
[data-reveal].is-in{ opacity:1; transform:none; filter:none; }
[data-delay="2"]{ transition-delay:.14s } [data-delay="3"]{ transition-delay:.24s }
[data-delay="4"]{ transition-delay:.34s }

.bento{
  width:min(100%,1560px); margin:0 auto;
  display:grid; grid-template-columns:repeat(12,1fr);
  grid-auto-rows:clamp(158px,15.4vw,224px);
  gap:clamp(8px,.85vw,14px);
}
.tile--fabric   { grid-column:1/6;   grid-row:1/3; }
.tile--wooden   { grid-column:6/13;  grid-row:1/2; }
.tile--charcoal { grid-column:6/9;   grid-row:2/4; }
.tile--laminates{ grid-column:9/13;  grid-row:2/3; }
.tile--thermolam{ grid-column:1/4;   grid-row:3/5; }
.tile--louvers  { grid-column:4/6;   grid-row:3/5; }
.tile--edge     { grid-column:9/13;  grid-row:3/5; }
.tile--texture  { grid-column:6/9;   grid-row:4/5; }

/* Categories added through the admin. The eight above are hand-placed, filling rows 1
   to 4 exactly; a tile with no rule of its own fell back to a single auto cell and
   appeared as a thumbnail in the corner. Four columns of twelve gives three to a row,
   and two rows matches the proportions of the tiles above. grid-row is left to flow, so
   they land in row 5 onward rather than hunting for a gap in the fixed block. */
.tile--custom   { grid-column:auto/span 4; grid-row:auto/span 2; }

.tile{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:var(--r-md); background:var(--ivory-lift);
  box-shadow:0 26px 60px -44px rgba(27,33,28,.7);
  opacity:0; transform:translateY(46px) scale(.975);
  clip-path:inset(0 0 8% 0 round var(--r-md));
  transition:opacity .95s var(--e-out), transform 1.05s var(--e-out), clip-path 1.05s var(--e-out), box-shadow .6s var(--e-out);
  transition-delay:calc(var(--i,0) * 70ms);
}
.tile.is-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0 round var(--r-md)); }
.tile:hover{ box-shadow:0 40px 80px -44px rgba(27,33,28,.62); }

.tile__media{ position:absolute; inset:-28px 0; z-index:-2; overflow:hidden; will-change:transform; }
.tile__media img{
  width:100%; height:100%; object-fit:cover; transform:scale(1.06);
  transition:transform 1.1s var(--e-out);
}
.tile:hover .tile__media img{ transform:scale(1.14); }

.tile__body{
  position:absolute; inset:auto 0 0 0; z-index:2;
  padding:clamp(16px,1.5vw,26px);
  display:grid; grid-template-columns:1fr auto; align-items:end; gap:4px 14px;
  color:var(--ink);
  background:linear-gradient(180deg,rgba(251,248,242,0) 0%,rgba(251,248,242,.72) 34%,rgba(251,248,242,.94) 100%);
}
.tile__num{ grid-column:1/-1; font-size:.62rem; font-weight:600; letter-spacing:.24em; opacity:.5; }
.tile__name{ grid-column:1/2; font-size:clamp(1.32rem,1.85vw,2.1rem); line-height:1.06; }
.tile__desc{
  grid-column:1/2; margin:.35em 0 0; max-width:34ch;
  font-size:.86rem; line-height:1.5; color:var(--ink-soft);
  opacity:0; transform:translateY(12px); max-height:0; overflow:hidden;
  transition:opacity .55s var(--e-out), transform .65s var(--e-out), max-height .65s var(--e-out);
}
.tile:hover .tile__desc{ opacity:1; transform:none; max-height:7em; }
.tile__go{
  grid-column:2/3; grid-row:2/3;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); color:var(--ink);
  transition:background .45s, transform .55s var(--e-out), border-color .45s;
}
.tile__go svg{ width:17px; height:17px; }
.tile:hover .tile__go{ background:var(--sage); border-color:transparent; transform:rotate(-45deg); }

.tile__swatch{
  position:absolute; top:14px; left:14px; z-index:3;
  width:26px; height:26px; border-radius:50%;
  background:var(--sw); border:2px solid rgba(255,255,255,.72);
  box-shadow:0 8px 22px -10px rgba(0,0,0,.6);
  transform:scale(0) rotate(-30deg);
  transition:transform .6s var(--e-out) .05s;
}
.tile.is-in .tile__swatch{ transform:scale(1) rotate(0); }

.tile--wooden .tile__body,
.tile--charcoal .tile__body,
.tile--louvers .tile__body{
  color:var(--on-dark);
  background:linear-gradient(180deg,rgba(12,14,12,0) 0%,rgba(12,14,12,.55) 38%,rgba(12,14,12,.88) 100%);
}
.tile--wooden .tile__desc,
.tile--charcoal .tile__desc,
.tile--louvers .tile__desc{ color:var(--on-dark-mute); }
.tile--wooden .tile__go,
.tile--charcoal .tile__go,
.tile--louvers .tile__go{ color:var(--on-dark); border-color:rgba(247,244,236,.4); }

/* =========================================================
   3 — THANK YOU
   ========================================================= */
.thanks{
  position:relative; overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% 120%, rgba(184,213,222,.6), transparent 65%),
    radial-gradient(70% 50% at 10% -10%, rgba(210,232,255,.55), transparent 60%),
    var(--ivory-lift);
  border-top:1px solid var(--line-soft);
}

/* a fine ticker, not a headline */
.marquee{
  overflow:hidden; padding:clamp(9px,.9vw,13px) 0;
  border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.45);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.marquee__track{
  display:flex; align-items:center; width:max-content;
  animation:marquee 40s linear infinite;
}
/* JS clones this group until half the track is wider than the viewport, so the
   -50% loop can never expose a gap at any width */
.marquee__group{
  display:flex; align-items:center; gap:clamp(12px,1.3vw,20px);
  flex:0 0 auto; padding-right:clamp(12px,1.3vw,20px);
}
.marquee__track span{
  font-family:var(--f-display); font-size:clamp(.9rem,1.15vw,1.22rem);
  color:var(--ink); opacity:.44; white-space:nowrap;
}
.marquee__track i{ color:var(--sage); font-style:normal; font-size:.7rem; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%) } }

.thanks__inner{
  position:relative; z-index:2;
  padding:clamp(80px,13vh,180px) var(--pad) clamp(60px,8vh,110px);
  text-align:center; width:min(100%,1000px); margin:0 auto;
}
.thanks__title{ font-size:clamp(2.4rem,5.6vw,5.5rem); line-height:.98; margin:0 0 clamp(18px,2.4vw,32px); }
.thanks__title .line{ padding-bottom:.08em; }
.thanks__sub{ max-width:38ch; margin:0 auto; color:var(--ink-soft); font-size:clamp(1rem,1.2vw,1.22rem); }
.thanks__bands{ display:flex; justify-content:center; gap:10px; margin:clamp(30px,4vw,52px) auto 0; }
.thanks__bands span{ display:block; width:clamp(46px,6vw,90px); height:8px; border-radius:99px; background:var(--c); }
.thanks__actions{
  display:flex; justify-content:center; align-items:center; gap:clamp(18px,2.4vw,34px);
  flex-wrap:wrap; margin-top:clamp(34px,4.6vw,60px);
}

.foot{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px var(--pad);
  border-top:1px solid var(--line-soft);
  font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute);
}
.foot__mid{ text-transform:none; letter-spacing:.04em; opacity:.7; font-weight:300; }
.foot__credit a{ text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px;
  transition:color .3s, text-decoration-color .3s; }
.foot__credit a:hover{ color:var(--ink); text-decoration-color:currentColor; }

/* =========================================================
   GSAP TAKEOVER
   When GSAP + ScrollTrigger load, JS owns every entrance and
   scroll-linked move, so the CSS start states must stand down.
   Without GSAP the CSS/IntersectionObserver path below still runs.
   ========================================================= */
html.gsap-on [data-reveal],
html.gsap-on .tile,
html.gsap-on .hero__cta{
  opacity:1; transform:none; filter:none; clip-path:none;
  transition:none; animation:none;
}
html.gsap-on [data-reveal-title] .word,
html.gsap-on .hero__title .word,
html.gsap-on .hero__eyebrow,
html.gsap-on .hero__rule,
html.gsap-on .hero__sub,
html.gsap-on .tile.is-in .tile__swatch,
html.gsap-on .tile__swatch{
  opacity:1; transform:none; animation:none;
}
html.gsap-on .shelf{ animation:none; }
/* a CSS transition on a property GSAP writes every frame fights the tween and
   makes the motion lag — hover-only transitions stay, animated ones stand down */
html.gsap-on .tile{ transition:box-shadow .6s var(--e-out); }
html.gsap-on .tile__swatch{ transition:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1180px){
  :root{ --shelf-w:min(54vw,560px); }
}

@media (max-width:900px){
  /* the plate now takes most of the width, so the bottom copy stops sitting
     beside it and goes above it at full width instead */
  .hero{ padding-bottom:clamp(180px,25vh,260px); }
  .hero__inner--bottom{ padding-right:var(--hpad); }
  .hero-foot{ padding-right:var(--hpad); }

  .hero__title{ white-space:normal; font-size:clamp(2rem,7.4vw,3.6rem); }
  .section-title{ white-space:normal; }
  .hero__sub{ max-width:46ch; }
  :root{ --shelf-w:min(70vw,470px); }

  .bento{ grid-auto-rows:clamp(150px,21vw,210px); }
  .tile--fabric   { grid-column:1/7;  grid-row:1/3; }
  .tile--wooden   { grid-column:7/13; grid-row:1/2; }
  .tile--laminates{ grid-column:7/13; grid-row:2/3; }
  .tile--charcoal { grid-column:1/7;  grid-row:3/5; }
  .tile--louvers  { grid-column:7/13; grid-row:3/4; }
  .tile--thermolam{ grid-column:7/13; grid-row:4/5; }
  .tile--edge     { grid-column:1/7;  grid-row:5/6; }
  .tile--texture  { grid-column:7/13; grid-row:5/6; }
  /* Two to a row at this width; a third would be too narrow for the name to sit well. */
  .tile--custom   { grid-column:auto/span 6; grid-row:auto/span 2; }
}

@media (max-width:680px){
  :root{ --shelf-drop:0px; }
  .hero{
    min-height:min(76svh,620px);
    padding-top:clamp(64px,11vh,110px);
    padding-bottom:clamp(34px,5vh,60px);
  }
  /* CRITICAL: both of these inherit a right padding derived from --shelf-w so the
     desktop copy clears the plate. There is no plate beside the copy on a phone,
     so the padding must go — left in, it squeezed the sub-line into a 51px column. */
  .hero__inner--bottom{ padding-right:var(--hpad); }
  .hero-foot{ padding:20px var(--hpad) 0; min-height:0; }
  .hero__sub{ max-width:none; }
  .hero-note{ max-width:none; }
  .hero-note br{ display:none; }
  .hero__bg{ --hero-img:url("../textures/hero-interior-900.webp"); --hero-b:1; }
  /* the phone variant is pre-exposed, so drop the live filter and the drift —
     one fewer composited, animated, filtered layer for a mobile GPU to mishandle */
  .hero__bg i{ filter:none; animation:none; }
  .hero::after{
    background:linear-gradient(180deg, rgba(9,11,9,.52) 0%, rgba(9,11,9,.26) 26%,
                                       rgba(9,11,9,.5) 60%, rgba(9,11,9,.78) 100%);
  }
  .hero__title{ font-size:clamp(1.95rem,9.1vw,3.5rem); }
  .section-title{ font-size:clamp(1.8rem,8vw,3rem); white-space:normal; }
  .thanks__title{ font-size:clamp(2.1rem,10.5vw,3.6rem); }

  .hero__link{ padding:13px 0; }   /* 44px touch target */
  .btn--pill{ padding-left:20px; gap:14px; }
  .btn--pill .btn__ico--fill{ width:38px; height:38px; padding:10px; }

  /* the plate becomes a full-width tray under the hero copy */
  .shelf{
    position:relative; right:auto; bottom:auto; width:auto;
    margin:14px 0 0; border-radius:var(--r-hero);
    padding:14px; animation:none;
  }
  /* no hero edge to break into on a phone, and the tray scrolls by touch */
  .shelf::before,
  .shelf__nav{ display:none; }
  .chip{ width:142px; }


  /* Two columns, and only the FIRST and LAST tiles span both. DOM order is
     fabric, wooden, charcoal, laminates, thermolam, louvers, edge, texture — so
     six single-width tiles pair up into three clean rows between them and no
     cell is ever abandoned. A full-width tile placed after an odd number of
     half tiles is what left the holes beside Wooden and Louvers.
     `dense` is a belt-and-braces guard if this order ever changes. */
  .bento{
    grid-template-columns:repeat(2,1fr);
    grid-auto-rows:170px;
    grid-auto-flow:row dense;
  }
  .tile{ grid-column:auto/span 1 !important; grid-row:auto !important; }
  .tile--fabric, .tile--texture{ grid-column:auto/span 2 !important; }
  .tile__desc{ display:none; }
  .tile__name{ font-size:1.16rem; }

  .foot{ justify-content:center; text-align:center; }
  .foot__mid{ order:3; width:100%; }
}

@media (max-width:340px){
  .section-title{ font-size:1.62rem; }
  .hero__title{ font-size:1.78rem; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .word,[data-reveal],.tile,.hero__cta,.hero__eyebrow,.hero__rule,.hero__sub{
    opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important;
  }
  .shelf{ transform:none !important; }
  .marquee__track{ animation:none !important; }
}

/* ---- Custom category tiles ---------------------------------------------
   A category added through the admin uses the same tile markup as the eight
   built-in collections, so it inherits the masonry sizing, the reveal and the
   hover reveal of the description. Only the no-thumbnail case needs styling. */
.tile__media--empty{
  position:absolute; inset:0;
  background:#0c0a09;
  /* A faint grain so a black panel does not read as a failed image. */
  background-image:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.05), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(255,255,255,.035), transparent 50%);
}

/* Without an image there is no photo to sit above, so the name carries the tile. */
.tile--noimage .tile__name{ color:var(--on-dark); }
.tile--noimage .tile__desc{ color:var(--on-dark-mute); }
.tile--noimage .tile__num{ color:rgba(255,255,255,.45); }