/* ============================================================================
   7HAUS KITCHENS — Premium design system
   Warm material palette · editorial layout · geometric "7" motif
   ============================================================================ */

/* ---------- Tokens ---------- */
:root{
  /* Warm material palette (derived from the kitchens themselves) */
  --cream:        #f4efe8;   /* primary background */
  --cream-2:      #efe8de;   /* alt surface */
  --paper:        #faf7f2;   /* lightest */
  --ink:          #221b15;   /* primary text (warm near-black) */
  --ink-soft:     #4a4036;   /* secondary text */
  --ink-mute:     #8c8175;   /* muted / captions */
  --espresso:     #241e1a;   /* dark section background */
  --espresso-2:   #2f2722;   /* dark surface */
  --bronze:       #9a7b4f;   /* metallic accent */
  --bronze-deep:  #7c6240;
  --bronze-soft:  #c2a578;
  --greige:       #b9ac9a;   /* warm neutral */
  --line:         #d9cfc2;   /* hairline on light */
  --line-dk:      #4a3f36;   /* hairline on dark */
  --blush:        #d8b9ab;   /* soft accent from chairs */

  /* Type */
  --serif: "Fraunces", "Georgia", serif;
  --geo:   "Jost", "Helvetica Neue", Arial, sans-serif;   /* geometric caps, matches wordmark */
  --sans:  "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif; /* readable body */

  /* Scale (fluid) */
  --step--1: clamp(0.86rem, 0.82rem + 0.2vw, 0.95rem);
  --step-0:  clamp(1.0625rem, 1.02rem + 0.25vw, 1.18rem);  /* body ~17-19px */
  --step-1:  clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
  --step-2:  clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-3:  clamp(2.2rem, 1.7rem + 2.4vw, 3.6rem);
  --step-4:  clamp(2.8rem, 1.9rem + 4.2vw, 5.6rem);
  --step-5:  clamp(3.4rem, 2rem + 6.6vw, 8rem);

  /* Space */
  --gut: clamp(1.25rem, 1rem + 2.4vw, 3.25rem);   /* page gutter */
  --sec: clamp(4.5rem, 3rem + 6vw, 9rem);          /* section rhythm */

  --maxw: 1480px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --tr: .5s var(--ease);

  --radius: 2px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
html.lenis{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  font-family:var(--sans);
  font-size:var(--step-0);
  line-height:1.75;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  font-weight:400;
}
img,svg,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--bronze); color:var(--paper); }
:focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; border-radius:1px; }
.skip{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--ink); color:var(--paper); padding:.9em 1.4em; font-family:var(--geo); letter-spacing:.12em; text-transform:uppercase; font-size:.75rem; }
.skip:focus{ left:1rem; top:1rem; }

/* ---------- Type ---------- */
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  line-height:1.04;
  letter-spacing:-0.012em;
  color:var(--ink);
  font-optical-sizing:auto;
}
h1{ font-size:var(--step-4); }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-2); }
p{ max-width:62ch; }
strong,b{ font-weight:600; color:var(--ink); }
em{ font-style:italic; }

.serif{ font-family:var(--serif); }
.eyebrow{
  font-family:var(--geo);
  font-size:var(--step--1);
  text-transform:uppercase;
  letter-spacing:.32em;
  font-weight:500;
  color:var(--bronze-deep);
  display:inline-flex;
  align-items:center;
  gap:.75em;
}
.eyebrow::before{
  content:""; width:2.4em; height:1px; background:var(--bronze);
  display:inline-block; opacity:.7;
}
.eyebrow.no-rule::before{ display:none; }

.idx{ font-family:var(--geo); font-weight:300; color:var(--bronze); letter-spacing:.04em; }

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap-wide{ width:100%; padding-inline:var(--gut); }
.section{ padding-block:var(--sec); position:relative; }
.section--tight{ padding-block:clamp(3rem,2rem + 3vw,5rem); }
.dark{ background:var(--espresso); color:var(--cream); }
.dark h1,.dark h2,.dark h3,.dark h4{ color:var(--paper); }
.dark .eyebrow{ color:var(--bronze-soft); }
.dark .eyebrow::before{ background:var(--bronze-soft); }
.dark p{ color:#cdc4b8; }
.lead{ font-size:var(--step-1); line-height:1.5; color:var(--ink-soft); font-weight:400; max-width:30ch; }
.dark .lead{ color:#d8cfc3; }
.measure{ color:var(--ink-soft); }
.hr{ height:1px; background:var(--line); border:0; }
.dark .hr{ background:var(--line-dk); }

/* Reveal animation (gated behind .js so no-JS users see everything) */
html.js [data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
html.js [data-reveal].in{ opacity:1; transform:none; }
[data-reveal-d="1"]{ transition-delay:.08s; }
[data-reveal-d="2"]{ transition-delay:.16s; }
[data-reveal-d="3"]{ transition-delay:.24s; }
[data-reveal-d="4"]{ transition-delay:.32s; }
[data-reveal-d="5"]{ transition-delay:.40s; }

/* Image reveal mask */
.imgmask{ position:relative; overflow:hidden; background:var(--cream-2); }
.imgmask img{ width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease-out); }
html.js .imgmask img{ transform:scale(1.06); }
html.js .imgmask::after{
  content:""; position:absolute; inset:0; background:var(--cream);
  transform-origin:top; transform:scaleY(1); transition:transform 1.1s var(--ease-out);
}
.imgmask.in::after{ transform:scaleY(0); }
.imgmask.in img{ transform:scale(1); }
.dark .imgmask{ background:var(--espresso-2); }
.dark .imgmask::after{ background:var(--espresso); }

/* ============================================================================
   HEADER
   ============================================================================ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:90;
  padding-block:clamp(.7rem,.5rem + .6vw,1.1rem);
  transition:background .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), padding .4s var(--ease);
  color:var(--cream);
}
.header__bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.header.solid{ background:rgba(244,239,232,.86); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); color:var(--ink); box-shadow:0 1px 0 var(--line); }
.header.hide{ transform:translateY(-104%); }
.header__logo{ display:flex; align-items:center; gap:.7rem; flex:0 0 auto; }
.header__logo img{ height:46px; width:auto; transition:filter .5s var(--ease), height .4s var(--ease); filter:invert(1) brightness(2); }
.header.solid .header__logo img{ filter:none; }
.header__logo .mark{ display:none; }

/* Nav */
.nav{ display:flex; align-items:center; gap:clamp(1.25rem,.4rem + 1.9vw,3rem); }
.nav > li{ position:relative; }
.nav__link{
  font-family:var(--geo); text-transform:uppercase; letter-spacing:.2em;
  font-size:.78rem; font-weight:500; padding-block:1.4rem; display:inline-flex; align-items:center; gap:.45em;
  position:relative; white-space:nowrap;
}
.nav__link .caret{ width:.5em; height:.5em; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .35s var(--ease); opacity:.7; }
.nav__link::after{ content:""; position:absolute; left:0; bottom:1.05rem; height:1px; width:0; background:currentColor; transition:width .45s var(--ease); }
.nav__item:hover .nav__link::after, .nav__link.current::after{ width:1.3em; }
.nav__item:hover .nav__link .caret{ transform:translateY(1px) rotate(45deg); }

/* Dropdown */
.menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  min-width:248px; background:var(--paper); color:var(--ink);
  border:1px solid var(--line); padding:.6rem; opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  box-shadow:0 30px 60px -30px rgba(34,27,21,.4);
}
.nav__item:hover .menu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.menu a{
  display:flex; align-items:baseline; gap:.7rem; padding:.7rem .85rem;
  font-family:var(--sans); font-size:.98rem; color:var(--ink-soft); transition:background .3s, color .3s; position:relative;
}
.menu a .mi{ font-family:var(--geo); font-size:.68rem; color:var(--bronze); letter-spacing:.1em; min-width:1.6em; }
.menu a:hover{ background:var(--cream-2); color:var(--ink); }

.header__cta{ display:flex; align-items:center; gap:1.1rem; flex:0 0 auto; }

/* Burger */
.burger{ display:none; width:30px; height:18px; position:relative; }
.burger span{ position:absolute; left:0; height:1.5px; width:100%; background:currentColor; transition:transform .4s var(--ease), opacity .3s; }
.burger span:nth-child(1){ top:0; } .burger span:nth-child(2){ top:8px; } .burger span:nth-child(3){ top:16px; }
body.menu-open .burger span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:80; background:var(--espresso); color:var(--cream);
  padding:clamp(5rem,12vh,8rem) var(--gut) 3rem; overflow-y:auto;
  transform:translateY(-100%); transition:transform .6s var(--ease); visibility:hidden;
}
body.menu-open .drawer{ transform:none; visibility:visible; }
.drawer__group{ border-top:1px solid var(--line-dk); padding-block:.4rem; }
.drawer__head{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.22em; font-size:.78rem; color:var(--bronze-soft); padding-block:1.1rem; display:flex; justify-content:space-between; width:100%; }
.drawer__sub{ display:grid; gap:.2rem; padding-bottom:1.1rem; }
.drawer__sub a{ font-family:var(--serif); font-size:1.4rem; color:var(--cream); padding-block:.3rem; }
.drawer__sub a:hover{ color:var(--bronze-soft); }
.drawer a.solo{ font-family:var(--serif); font-size:1.7rem; display:block; padding-block:1rem; border-top:1px solid var(--line-dk); }

/* ============================================================================
   BUTTONS / LINKS
   ============================================================================ */
.btn{
  --c:var(--ink); --bg:var(--ink); --fg:var(--paper);
  font-family:var(--geo); text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; font-weight:500;
  display:inline-flex; align-items:center; gap:.8em; padding:1.05em 1.9em;
  position:relative; overflow:hidden; border:1px solid var(--bg); color:var(--fg);
  background:var(--bg); transition:color .5s var(--ease), border-color .4s; isolation:isolate;
}
.btn::before{ content:""; position:absolute; inset:0; background:var(--bronze); transform:scaleX(0); transform-origin:left; transition:transform .55s var(--ease); z-index:-1; }
.btn:hover{ color:var(--paper); border-color:var(--bronze); }
.btn:hover::before{ transform:scaleX(1); }
.btn .arw{ transition:transform .45s var(--ease); }
.btn:hover .arw{ transform:translateX(.35em); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--ink); }
.dark .btn--ghost{ --fg:var(--cream); border-color:var(--greige); }
.btn--lg{ padding:1.2em 2.4em; font-size:.84rem; }

/* Text link with wipe underline */
.tlink{
  font-family:var(--geo); text-transform:uppercase; letter-spacing:.18em; font-size:.78rem; font-weight:500;
  display:inline-flex; align-items:center; gap:.7em; padding-bottom:.35em; position:relative; color:var(--bronze-deep);
}
.dark .tlink{ color:var(--bronze-soft); }
.tlink::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform:scaleX(1); transform-origin:right; transition:transform .5s var(--ease); }
.tlink:hover::after{ transform:scaleX(0); }
.tlink .arw{ transition:transform .45s var(--ease); }
.tlink:hover .arw{ transform:translateX(.4em); }

/* ============================================================================
   HERO
   ============================================================================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; color:var(--cream); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; z-index:-2; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; transform:scale(1.08); }
.hero.ready .hero__bg img{ animation:kenburns 18s var(--ease-out) forwards; }
@keyframes kenburns{ to{ transform:scale(1); } }
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(20,15,11,.58) 0%, rgba(20,15,11,.12) 26%, rgba(20,15,11,.2) 55%, rgba(20,15,11,.86) 100%); }
.hero__inner{ width:100%; padding-bottom:clamp(3rem,6vh,6rem); padding-top:8rem; }
.hero__eyebrow{ color:var(--bronze-soft); margin-bottom:1.6rem; }
.hero h1{ font-size:var(--step-5); line-height:.98; max-width:16ch; color:var(--paper); text-shadow:0 2px 40px rgba(20,15,11,.45); }
.hero .tlink{ color:var(--paper); }
.hero__meta{ margin-top:clamp(1.5rem,3vh,2.6rem); display:flex; flex-wrap:wrap; align-items:center; gap:1.4rem 2.2rem; }
.hero__scroll{ position:absolute; right:var(--gut); bottom:clamp(3rem,6vh,6rem); display:flex; flex-direction:column; align-items:center; gap:.8rem; font-family:var(--geo); text-transform:uppercase; letter-spacing:.25em; font-size:.66rem; writing-mode:vertical-rl; color:var(--cream); opacity:.8; }
.hero__scroll i{ width:1px; height:54px; background:var(--cream); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; inset:0; background:var(--bronze-soft); animation:scrolldrop 2.2s var(--ease) infinite; }
@keyframes scrolldrop{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(100%);} }

/* Page hero (interior pages) */
.phero{ position:relative; padding-top:clamp(8rem,16vh,12rem); padding-bottom:clamp(2.5rem,5vw,4.5rem); }
.phero .idxbar{ display:flex; align-items:center; gap:1rem; margin-bottom:1.4rem; }
.phero h1{ max-width:18ch; }
.phero__lead{ margin-top:1.8rem; }
.crumbs{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.2em; font-size:.7rem; color:var(--ink-mute); display:flex; gap:.6em; align-items:center; }
.crumbs a:hover{ color:var(--bronze-deep); }
.crumbs span{ color:var(--bronze); }

/* ============================================================================
   GRIDS / COMPONENTS
   ============================================================================ */
.grid{ display:grid; gap:clamp(1.4rem,1rem + 1.6vw,2.6rem); }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,6rem); align-items:center; }
.split--40{ grid-template-columns:0.85fr 1.15fr; }
.split--60{ grid-template-columns:1.15fr 0.85fr; }

/* Section header */
.shead{ display:grid; grid-template-columns:1fr; gap:1.2rem; max-width:var(--maxw); }
.shead--row{ grid-template-columns:1fr auto; align-items:end; gap:2rem; }
.shead h2{ max-width:18ch; }
.shead .measure{ max-width:42ch; }

/* Story columns (about) */
.story{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,1rem + 2vw,3.4rem); }
.story__col h3{ font-size:var(--step-1); margin-bottom:1.1rem; }
.story__col .num{ font-family:var(--geo); font-size:.8rem; letter-spacing:.2em; color:var(--bronze); display:block; margin-bottom:1.2rem; }
.pull{ font-family:var(--serif); font-size:var(--step-2); line-height:1.18; letter-spacing:-.01em; max-width:24ch; }
.pull b{ color:var(--bronze); font-weight:400; font-style:italic; }

/* Offerings list */
.offer{ border-top:1px solid var(--line); }
.dark .offer{ border-color:var(--line-dk); }
.offer__row{ display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:center; padding-block:clamp(1.1rem,.6rem + 1vw,1.9rem); border-bottom:1px solid var(--line); transition:padding-left .5s var(--ease); }
.dark .offer__row{ border-color:var(--line-dk); }
.offer__row:hover{ padding-left:1rem; }
.offer__row .n{ font-family:var(--geo); color:var(--bronze); font-size:.85rem; letter-spacing:.12em; }
.offer__row h3{ font-size:clamp(1.4rem,1rem + 1.6vw,2.4rem); }
.offer__row .arw{ color:var(--bronze); transition:transform .5s var(--ease); }
.offer__row:hover .arw{ transform:translateX(.5rem); }

/* Feature (alternating image/text) */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,7rem); align-items:center; }
.feature + .feature{ margin-top:var(--sec); }
.feature--rev .feature__media{ order:2; }
.feature__media{ aspect-ratio:4/5; }
.feature__media.wide{ aspect-ratio:16/11; }
.feature__body .eyebrow{ margin-bottom:1.4rem; }
.feature__body h3{ margin-bottom:1.2rem; }

/* Cards */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(360px,100%),1fr)); gap:clamp(1.4rem,1rem + 1.5vw,2.6rem); }
.card{ display:flex; flex-direction:column; }
.card__media{ aspect-ratio:3/4; margin-bottom:1.3rem; }
.card__media.sq{ aspect-ratio:1/1; }
.card__media.land{ aspect-ratio:4/3; }
.card h3{ font-size:var(--step-1); }
.card .meta{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.18em; font-size:.72rem; color:var(--ink-mute); margin-top:.5rem; }
.card .desc{ color:var(--ink-soft); margin-top:.7rem; font-size:.98rem; }

/* Swatch grid (fronts) */
.swatches{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:clamp(.7rem,.4rem + .6vw,1.2rem); }
.swatch{ position:relative; }
.swatch__img{ aspect-ratio:62/100; overflow:hidden; background:var(--cream-2); }
.swatch__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease-out); }
.swatch:hover .swatch__img img{ transform:scale(1.07); }
.swatch__name{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; color:var(--ink-soft); margin-top:.6rem; }

/* Masonry-ish gallery (CSS columns) */
.masonry{ column-count:3; column-gap:clamp(.8rem,.5rem + 1vw,1.6rem); }
.masonry .m-item{ break-inside:avoid; margin-bottom:clamp(.8rem,.5rem + 1vw,1.6rem); }
.masonry .m-item .imgmask{ width:100%; }
/* masonry images render at natural ratio; width/height attrs reserve the space so
   nothing collapses before lazy-load (prevents layout shift + broken scroll height) */
.masonry .imgmask img{ height:auto; }

/* Horizontal scroll gallery */
.hscroll{ display:flex; gap:clamp(1rem,.6rem + 1vw,1.8rem); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:1.4rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.hscroll .h-item{ flex:0 0 clamp(260px,40vw,460px); scroll-snap-align:start; }
.hscroll .h-item .imgmask{ aspect-ratio:3/4; }
/* never leave horizontally-scrolled gallery images masked */
.hscroll .imgmask::after{ display:none; }
.hscroll .imgmask img{ transform:none; }
.hscroll .cap{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.16em; font-size:.72rem; color:var(--ink-mute); margin-top:.8rem; }

/* Project index (blog/multi-unit) */
.pindex{ border-top:1px solid var(--line); }
.pindex__row{ display:grid; grid-template-columns:5rem 1fr auto; gap:1.4rem; align-items:center; padding-block:clamp(1.2rem,.8rem + 1vw,2.1rem); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.pindex__row .n{ font-family:var(--geo); color:var(--bronze); font-size:.82rem; letter-spacing:.12em; }
.pindex__row h3{ font-size:clamp(1.5rem,1rem + 2vw,2.8rem); transition:transform .55s var(--ease), color .4s; }
.pindex__row:hover h3{ transform:translateX(.7rem); color:var(--bronze-deep); }
.pindex__row .peek{ position:absolute; right:6rem; top:50%; width:160px; height:108px; transform:translateY(-50%) scale(.9); opacity:0; pointer-events:none; transition:opacity .5s var(--ease), transform .5s var(--ease); overflow:hidden; z-index:2; }
.pindex__row:hover .peek{ opacity:1; transform:translateY(-50%) scale(1); }
.pindex__row .peek img{ width:100%; height:100%; object-fit:cover; }
.pindex__row .date{ font-family:var(--geo); font-size:.72rem; letter-spacing:.14em; color:var(--ink-mute); text-transform:uppercase; }

/* Address columns (multi-unit completed) */
.addr{ columns: 4 200px; column-gap:clamp(1.5rem,1rem + 2vw,3.5rem); }
.addr li{ padding-block:.55rem; border-bottom:1px solid var(--line); font-size:.98rem; color:var(--ink-soft); break-inside:avoid; display:flex; gap:.7rem; }
.addr li::before{ content:"7"; font-family:var(--serif); font-style:italic; color:var(--bronze); font-size:.85em; }
.dark .addr li{ border-color:var(--line-dk); color:#c8bfb3; }

/* Showroom mosaic */
.mosaic{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(120px,16vw,220px); gap:clamp(.7rem,.4rem + .8vw,1.3rem); }
.mosaic .imgmask{ width:100%; height:100%; }
.m-a{ grid-column:span 3; grid-row:span 2; }
.m-b{ grid-column:span 3; }
.m-c{ grid-column:span 2; }
.m-d{ grid-column:span 4; grid-row:span 2; }
.m-w2{ grid-column:span 2; } .m-w3{ grid-column:span 3; } .m-w4{ grid-column:span 4; }
.m-h2{ grid-row:span 2; }

/* Founder */
.founder{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(2rem,5vw,6rem); align-items:center; }
.founder__media{ aspect-ratio:4/5; max-width:440px; }
.founder blockquote{ font-family:var(--serif); font-size:var(--step-2); line-height:1.2; letter-spacing:-.01em; }
.founder .sign{ margin-top:2rem; }
.founder .sign .nm{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.2em; font-size:.82rem; }
.founder .sign .rl{ color:var(--bronze-deep); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-family:var(--geo); margin-top:.4rem; }

/* Marquee */
.marquee{ overflow:hidden; padding-block:clamp(2rem,3vw,3.4rem); border-block:1px solid var(--line-dk); }
.marquee__track{ display:flex; gap:2.5rem; width:max-content; animation:marq 28s linear infinite; }
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee span{ font-family:var(--serif); font-size:clamp(2.2rem,5vw,5rem); color:transparent; -webkit-text-stroke:1px var(--bronze-soft); letter-spacing:-.01em; display:inline-flex; align-items:center; gap:2.5rem; }
.marquee span::after{ content:"·"; -webkit-text-stroke:0; color:var(--bronze); }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* Stat / quick facts */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,1rem + 2vw,3rem); }
.fact .k{ font-family:var(--serif); font-size:var(--step-3); color:var(--ink); line-height:1; }
.dark .fact .k{ color:var(--paper); }
.fact .l{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.18em; font-size:.74rem; color:var(--ink-mute); margin-top:1rem; }

/* Spec list (stones thickness/formats) */
.spec{ display:grid; gap:.2rem; }
.spec li{ display:flex; gap:1rem; align-items:baseline; padding-block:.7rem; border-bottom:1px solid var(--line); }
.dark .spec li{ border-color:var(--line-dk); }
.spec li b{ font-family:var(--geo); letter-spacing:.1em; color:var(--bronze-deep); font-weight:500; min-width:7ch; }
.dark .spec li b{ color:var(--bronze-soft); }

/* Brand strip (partners/appliances logos as text chips) */
.brands{ display:flex; flex-wrap:wrap; gap:.8rem 1rem; }
.brand-chip{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.2em; font-size:.82rem; color:var(--ink-soft); border:1px solid var(--line); padding:.8em 1.4em; transition:border-color .4s, color .4s, background .4s; }
.brand-chip:hover{ border-color:var(--bronze); color:var(--ink); }
.dark .brand-chip{ border-color:var(--line-dk); color:#cdc4b8; }

/* CTA band */
.ctaband{ position:relative; overflow:hidden; }
.ctaband .wrap{ position:relative; z-index:2; text-align:center; display:grid; justify-items:center; gap:1.8rem; }
.ctaband h2{ max-width:20ch; }

/* ============================================================================
   CONTACT
   ============================================================================ */
.contact{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,6rem); }
.cinfo dl{ display:grid; gap:0; }
.cinfo .crow{ display:grid; grid-template-columns:auto 1fr; gap:1.4rem; padding-block:1.3rem; border-bottom:1px solid var(--line-dk); align-items:baseline; }
.cinfo dt{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.2em; font-size:.72rem; color:var(--bronze-soft); }
.cinfo dd{ font-size:1.1rem; color:var(--cream); }
.cinfo dd a:hover{ color:var(--bronze-soft); }
.form{ display:grid; gap:1.3rem; }
.field{ position:relative; }
.field label{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.16em; font-size:.7rem; color:var(--ink-mute); display:block; margin-bottom:.6rem; }
.dark .field label{ color:var(--greige); }
.field input,.field textarea,.field select{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--line-dk);
  padding:.7rem 0; font-family:var(--sans); font-size:1.05rem; color:var(--cream); transition:border-color .4s;
}
.field input::placeholder,.field textarea::placeholder{ color:#867c70; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--bronze-soft); }
.field select{ color:var(--cream); }
.field select option{ background:var(--espresso); }

/* ============================================================================
   FOOTER
   ============================================================================ */
.footer{ background:var(--espresso); color:var(--cream); padding-top:clamp(4rem,3rem + 4vw,7rem); position:relative; overflow:hidden; }
.footer__mark{ position:absolute; right:-4%; top:-10%; width:min(46vw,560px); opacity:.05; filter:invert(1); pointer-events:none; }
.footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:clamp(2rem,3vw,4rem); position:relative; z-index:2; }
.footer__brand .logo{ height:54px; filter:invert(1) brightness(2); margin-bottom:1.8rem; }
.footer__brand p{ color:#bdb4a8; max-width:34ch; }
.fcol h4{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.2em; font-size:.74rem; color:var(--bronze-soft); margin-bottom:1.4rem; font-weight:500; }
.fcol ul{ display:grid; gap:.7rem; }
.fcol a{ color:#cdc4b8; font-size:.98rem; transition:color .3s, padding-left .3s; }
.fcol a:hover{ color:var(--cream); padding-left:.35rem; }
.fnews{ display:grid; gap:1rem; }
.fnews p{ color:#bdb4a8; }
.fnews form{ display:flex; border-bottom:1px solid var(--line-dk); }
.fnews input{ flex:1; background:transparent; border:0; color:var(--cream); padding:.8rem 0; font-family:var(--sans); }
.fnews input:focus{ outline:none; }
.fnews button{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.16em; font-size:.74rem; color:var(--bronze-soft); padding-left:1rem; }
.fnews button:hover{ color:var(--cream); }
.social{ display:flex; gap:1.2rem; margin-top:1.8rem; }
.social a{ font-family:var(--geo); text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; color:#bdb4a8; padding-bottom:.3rem; border-bottom:1px solid transparent; transition:color .3s, border-color .3s; }
.social a:hover{ color:var(--cream); border-color:var(--bronze); }
.footer__bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-block:2.4rem; margin-top:clamp(3rem,4vw,5rem); border-top:1px solid var(--line-dk); font-family:var(--geo); text-transform:uppercase; letter-spacing:.14em; font-size:.68rem; color:#8a8073; position:relative; z-index:2; }

/* ============================================================================
   LIGHTBOX
   ============================================================================ */
.lb{ position:fixed; inset:0; z-index:120; background:rgba(20,15,11,.94); display:flex; align-items:center; justify-content:center; padding:clamp(1rem,4vw,4rem); opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s; }
.lb.open{ opacity:1; visibility:visible; }
.lb img{ max-width:100%; max-height:86vh; object-fit:contain; box-shadow:0 40px 80px -30px #000; transform:scale(.96); transition:transform .5s var(--ease-out); }
.lb.open img{ transform:scale(1); }
.lb__close,.lb__nav{ position:absolute; color:var(--cream); font-family:var(--geo); letter-spacing:.1em; font-size:.8rem; opacity:.8; transition:opacity .3s, color .3s; }
.lb__close{ top:clamp(1rem,3vw,2.4rem); right:clamp(1rem,3vw,2.4rem); text-transform:uppercase; }
.lb__nav{ top:50%; transform:translateY(-50%); width:54px; height:54px; border:1px solid var(--line-dk); border-radius:50%; display:grid; place-items:center; }
.lb__nav:hover,.lb__close:hover{ opacity:1; color:var(--bronze-soft); }
.lb__nav.prev{ left:clamp(1rem,3vw,2.4rem); } .lb__nav.next{ right:clamp(1rem,3vw,2.4rem); }
.lb__count{ position:absolute; bottom:clamp(1rem,3vw,2.4rem); left:50%; transform:translateX(-50%); color:#bdb4a8; font-family:var(--geo); letter-spacing:.2em; font-size:.72rem; }

/* ============================================================================
   PRELOADER
   ============================================================================ */
html:not(.js) .preload{ display:none; }
.preload{ position:fixed; inset:0; z-index:200; background:var(--cream); display:grid; place-items:center; transition:opacity .8s var(--ease), visibility .8s; }
.preload.done{ opacity:0; visibility:hidden; }
.preload svg{ width:96px; height:auto; }
.preload .ln{ fill:none; stroke:var(--ink); stroke-width:6; stroke-dasharray:1; stroke-dashoffset:1; }
.preload.go .ln{ animation:draw 1.5s var(--ease-out) forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ============================================================================
   404
   ============================================================================ */
.e404{ min-height:100svh; display:grid; place-items:center; text-align:center; }
.e404 .big{ font-family:var(--serif); font-size:clamp(6rem,22vw,18rem); line-height:.8; color:var(--bronze); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:1080px){
  .footer__top{ grid-template-columns:1fr 1fr; gap:2.5rem; }
  .footer__brand{ grid-column:1 / -1; }
  .masonry{ column-count:2; }
}
@media (max-width:880px){
  .nav, .header__cta .btn{ display:none; }
  .burger{ display:block; }
  .split, .feature, .founder, .contact, .story, .facts{ grid-template-columns:1fr; }
  .feature--rev .feature__media{ order:0; }
  .split--40,.split--60{ grid-template-columns:1fr; }
  .g-2,.g-3,.g-4{ grid-template-columns:1fr 1fr; }
  .shead--row{ grid-template-columns:1fr; }
  .mosaic{ grid-template-columns:repeat(2,1fr); }
  .m-a,.m-b,.m-c,.m-d,.m-w2,.m-w3,.m-w4{ grid-column:span 1; grid-row:span 1; }
  .pindex__row .peek{ display:none; }
  .addr{ columns:2 140px; }
}
@media (max-width:560px){
  .masonry{ column-count:1; }
  .g-2,.g-3,.g-4{ grid-template-columns:1fr; }
  .swatches{ grid-template-columns:repeat(2,1fr); }
  .pindex__row{ grid-template-columns:3rem 1fr; }
  .pindex__row .date{ display:none; }
  .addr{ columns:1; }
  .hero__scroll{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
  .imgmask::after{ display:none; }
  .hero__bg img{ transform:none; }
}