/* ============================================================
   Luxury Home Collections
   Light, warm, editorial. Catalogue-first architecture.
   ============================================================ */

:root{
  --paper:   #fcfbf9;
  --paper-2: #f5f2ec;
  --paper-3: #ece7de;

  --ink:   #1b1a18;
  --body:  #4c4842;
  --muted: #8a857c;

  --line:   #e4ded4;
  --line-2: #cfc7ba;

  --brass:   #9a7b45;
  --brass-2: #b8934f;
  --brass-t: #f3ede2;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --gut: clamp(18px, 4.5vw, 60px);
  --maxw: 1340px;
  --headh: 104px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --shadow: 0 1px 2px rgba(27,26,24,.04), 0 12px 32px rgba(27,26,24,.08);
}

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

body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--sans); font-size:16px; font-weight:300; line-height:1.72;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; color:var(--ink); }
p{ margin:0 0 1.1em; }
button{ font-family:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }

.skip{ position:absolute; left:-9999px; top:0; z-index:400; background:var(--brass); color:#fff; padding:12px 20px; }
.skip:focus{ left:0; }
::selection{ background:var(--brass); color:#fff; }
:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }

/* ---------- type ---------- */
.eyebrow{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); font-weight:500; margin:0 0 18px; }
.display{ font-family:var(--serif); font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.12; font-weight:300; margin:0 0 22px; }
.display em{ font-style:italic; color:var(--brass); }
.lede{ font-size:clamp(1rem,1.4vw,1.14rem); color:var(--body); line-height:1.78; max-width:58ch; }
.section-head{ max-width:62ch; margin-bottom:clamp(40px,5vw,68px); }
.section-head--center{ margin-inline:auto; text-align:center; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  padding:16px 32px; border:1px solid transparent; cursor:pointer;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .3s var(--ease), box-shadow .4s var(--ease);
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:var(--brass); transform:translateY(-2px); box-shadow:var(--shadow); }
.btn--ghost{ border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn--ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn--full{ width:100%; }

/* ============================================================
   HEADER
   ============================================================ */

.nav{ position:fixed; inset:0 0 auto 0; z-index:150; background:var(--paper); }

.util{
  border-bottom:1px solid var(--line); background:var(--paper-2);
  overflow:hidden; max-height:40px;
  transition:max-height .4s var(--ease), opacity .3s var(--ease);
}
.nav.is-stuck .util{ max-height:0; opacity:0; }
.util__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
  display:flex; align-items:center; gap:22px; height:40px;
}
.util__now{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:11px; letter-spacing:.08em; color:var(--ink); font-weight:400;
  padding-right:20px; margin-right:2px; border-right:1px solid var(--line-2);
}
.util__now i{
  width:6px; height:6px; border-radius:50%; background:#3f9c52; flex:none;
  box-shadow:0 0 0 3px rgba(63,156,82,.16);
}
.util a{ font-size:11px; letter-spacing:.1em; color:var(--muted); white-space:nowrap; transition:color .3s var(--ease); }
.util a:hover{ color:var(--brass); }
.util__gap{ flex:1; }
.util__social{ display:flex; gap:13px; }
.util__social a{ width:15px; height:15px; color:var(--muted); }
.util__social svg{ width:100%; height:100%; display:block; }
.util__social a:hover{ color:var(--brass); }

.bar{ border-bottom:1px solid var(--line); background:rgba(252,251,249,.96); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.bar__inner{
  max-width:var(--maxw); margin:0 auto; padding:0 var(--gut);
  display:flex; align-items:center; gap:18px; height:64px;
}

.menu-btn{
  display:flex; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; margin-left:-9px; background:none; border:0; cursor:pointer; padding:0; flex:none;
  position:relative; z-index:220;
}
.menu-btn span{ display:block; height:1.5px; width:24px; background:var(--ink); transition:transform .45s var(--ease), opacity .25s var(--ease), background .3s var(--ease); }
.menu-btn:hover span{ background:var(--brass); }
.menu-btn.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.menu-btn.is-open span:nth-child(2){ opacity:0; }
.menu-btn.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.brand{ display:flex; align-items:center; gap:11px; color:var(--ink); flex:none; }
.brand__mark{ width:26px; height:26px; color:var(--brass); flex:none; }
.brand__text{ display:block; line-height:1; }
.brand__l1{ display:block; font-family:var(--serif); font-size:1.2rem; white-space:nowrap; color:var(--ink); }
.brand__l2{ display:block; margin-top:4px; font-size:8.5px; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--brass); white-space:nowrap; }

.bar__links{ display:flex; align-items:center; gap:30px; margin-left:auto; }
.bar__links a, .mega-btn{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--body);
  background:none; border:0; cursor:pointer; padding:8px 0; position:relative;
  display:inline-flex; align-items:center; gap:8px; transition:color .3s var(--ease);
}
.bar__links a::after, .mega-btn::after{
  content:""; position:absolute; left:0; bottom:2px; height:1px; width:0;
  background:var(--brass); transition:width .35s var(--ease);
}
.bar__links a:hover, .mega-btn:hover{ color:var(--ink); }
.bar__links a:hover::after, .mega-btn:hover::after, .mega-btn.is-open::after{ width:100%; }
.mega-btn{ white-space:nowrap; }
.mega-btn svg{ width:10px; height:7px; flex:none; transition:transform .35s var(--ease); }
.mega-btn.is-open svg{ transform:rotate(180deg); }

.wish-btn{
  display:flex; align-items:center; gap:6px; background:none; border:0; cursor:pointer;
  padding:8px; color:var(--ink); flex:none; margin-left:6px;
}
.wish-btn svg{ width:20px; height:20px; }
.wish-btn__count{
  font-size:10px; font-weight:500; min-width:17px; height:17px; padding:0 4px;
  border-radius:9px; background:var(--line); color:var(--muted);
  display:grid; place-items:center; transition:background .3s var(--ease), color .3s var(--ease);
}
.wish-btn.has-items .wish-btn__count{ background:var(--brass); color:#fff; }
.wish-btn:hover{ color:var(--brass); }

/* ---------- mega menu ---------- */
.mega{
  border-bottom:1px solid var(--line); background:var(--paper);
  box-shadow:0 16px 36px rgba(27,26,24,.08);
  opacity:0; transform:translateY(-8px);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.mega.is-open{ opacity:1; transform:none; }
.mega[hidden]{ display:none; }

.mega__inner{
  max-width:var(--maxw); margin:0 auto; padding:clamp(26px,3vw,40px) var(--gut) clamp(30px,3.4vw,44px);
  display:grid; grid-template-columns:1fr 1fr 1fr 1.05fr; gap:clamp(24px,3vw,48px);
}
.mega__h{
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
  font-family:var(--sans); font-weight:500; margin:0 0 16px; padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.mega__list{ list-style:none; margin:0; padding:0; }
.mega__list button{
  display:flex; align-items:center; gap:10px; width:100%;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:7px 0; font-family:var(--serif); font-size:1.14rem; color:var(--ink);
  transition:color .25s var(--ease), padding-left .25s var(--ease);
}
.mega__list button:hover{ color:var(--brass); padding-left:5px; }
.mega__list em{ margin-left:auto; font-style:normal; font-family:var(--sans); font-size:10px; color:var(--muted); }
.sw{ width:13px; height:13px; border-radius:50%; border:1px solid var(--line-2); flex:none; display:inline-block; }

.mega__col--promo{ border-left:1px solid var(--line); padding-left:clamp(20px,2.4vw,36px); }
.mega__promo{ display:block; width:100%; background:none; border:0; padding:0; cursor:pointer; text-align:left; }
.mega__promo-media{ display:block; overflow:hidden; aspect-ratio:4/3; background:var(--paper-3); }
.mega__promo-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.mega__promo:hover .mega__promo-media img{ transform:scale(1.05); }
.mega__promo-name{ display:block; font-family:var(--serif); font-size:1.24rem; color:var(--ink); margin-top:12px; }
.mega__promo-more{ display:block; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); margin-top:5px; }

/* ============================================================
   FULL SITE MENU
   ============================================================ */
.menu{ position:fixed; inset:0; z-index:140; background:var(--paper); opacity:0; transition:opacity .4s var(--ease); overflow-y:auto; }
.menu.is-open{ opacity:1; }
.menu[hidden]{ display:none; }
.menu__inner{
  min-height:100%; max-width:var(--maxw); margin:0 auto;
  padding:calc(var(--headh) + 40px) var(--gut) 70px;
  display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(36px,5vw,80px); align-items:start;
}
.menu__nav{ display:flex; flex-direction:column; }
.menu__nav a{
  display:flex; align-items:baseline; gap:18px;
  font-family:var(--serif); font-size:clamp(1.5rem,3.4vw,2.4rem); line-height:1.25; color:var(--ink);
  padding:9px 0; border-bottom:1px solid var(--line);
  opacity:0; transform:translateY(14px);
  transition:color .3s var(--ease), opacity .5s var(--ease), transform .5s var(--ease);
}
.menu.is-open .menu__nav a{ opacity:1; transform:none; }
.menu.is-open .menu__nav a:nth-child(1){ transition-delay:.05s }
.menu.is-open .menu__nav a:nth-child(2){ transition-delay:.10s }
.menu.is-open .menu__nav a:nth-child(3){ transition-delay:.15s }
.menu.is-open .menu__nav a:nth-child(4){ transition-delay:.20s }
.menu.is-open .menu__nav a:nth-child(5){ transition-delay:.25s }
.menu.is-open .menu__nav a:nth-child(6){ transition-delay:.30s }
.menu.is-open .menu__nav a:nth-child(7){ transition-delay:.35s }
.menu.is-open .menu__nav a:nth-child(8){ transition-delay:.40s }
.menu__nav a:hover{ color:var(--brass); }
.menu__nav a em{ font-family:var(--sans); font-style:normal; font-size:10px; letter-spacing:.2em; color:var(--brass); flex:none; width:20px; }

.menu__meta{ padding-top:12px; }
.menu__open{ font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--brass); font-weight:500; margin:0 0 12px; }
.menu__meta > p{ font-size:14px; color:var(--body); max-width:42ch; }
.menu__meta dl{ margin:22px 0 0; }
.menu__meta dl > div{ display:flex; gap:16px; padding:11px 0; border-top:1px solid var(--line); }
.menu__meta dt{ flex:0 0 70px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding-top:3px; }
.menu__meta dd{ margin:0; font-size:13.5px; color:var(--body); }

/* ============================================================
   1. HERO PROMO GRID
   ============================================================ */
.promo{ padding:calc(var(--headh) + clamp(22px,3vw,42px)) 0 clamp(50px,6vw,84px); }
.promo__grid{ display:grid; grid-template-columns:1.55fr 1fr 1fr; gap:clamp(12px,1.4vw,20px); }

.pro{
  position:relative; display:block; padding:0; border:0; cursor:pointer; overflow:hidden;
  background:var(--paper-3); text-align:left; aspect-ratio:3/4;
}
.pro--lead{ aspect-ratio:auto; }
.pro__media{ position:absolute; inset:0; display:block; }
.pro__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.pro:hover .pro__media img{ transform:scale(1.05); }
.pro::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,18,15,.72) 0%, rgba(20,18,15,.22) 42%, rgba(20,18,15,0) 70%);
}
.pro__body{ position:relative; z-index:2; display:block; padding:clamp(20px,2.4vw,34px); height:100%; display:flex; flex-direction:column; justify-content:flex-end; }
.pro__kicker{ display:block; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:#e8d9b8; margin-bottom:8px; }
.pro__title{ display:block; font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.5rem); line-height:1.1; color:#fff; }
.pro__cta{ display:inline-flex; align-items:center; gap:8px; margin-top:14px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#fff; transition:gap .3s var(--ease); }
.pro:hover .pro__cta{ gap:14px; }

/* ============================================================
   2. QUALITY CLAIM
   ============================================================ */
.claim{ position:relative; min-height:clamp(420px,54vh,560px); display:flex; align-items:center; overflow:hidden; }
.claim__media{ position:absolute; inset:0; background:var(--paper-3); }
.claim__media img{ width:100%; height:100%; object-fit:cover; }
.claim__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to right, rgba(252,251,249,.97) 0%, rgba(252,251,249,.9) 38%, rgba(252,251,249,.35) 66%, rgba(252,251,249,0) 100%);
}
.claim__inner{ position:relative; z-index:2; padding-block:clamp(50px,6vw,80px); }
.claim .lede{ max-width:46ch; margin-bottom:28px; }

/* ============================================================
   3. CATEGORY CARDS
   ============================================================ */
.cats{ padding:clamp(64px,8vw,110px) 0; }
.catgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.catcard{
  display:block; padding:0; border:1px solid var(--line); background:var(--paper);
  cursor:pointer; text-align:left; overflow:hidden;
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.catcard:hover{ border-color:var(--brass); transform:translateY(-4px); box-shadow:var(--shadow); }
.catcard__media{ display:block; overflow:hidden; aspect-ratio:5/3; background:var(--paper-3); }
.catcard__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.catcard:hover .catcard__media img{ transform:scale(1.06); }
.catcard__body{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:20px clamp(16px,2vw,24px) 22px; }
.catcard__name{ font-family:var(--serif); font-size:1.5rem; color:var(--ink); }
.catcard__count{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ============================================================
   4. BRAND STORY
   ============================================================ */
.story{ padding:clamp(64px,8vw,110px) 0; background:var(--paper-2); border-block:1px solid var(--line); }
.story__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.story__media{ margin:0; }
.story__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-3); }
.story__text p:nth-of-type(2){ color:var(--muted); }
.story .btn{ margin-top:12px; }

/* ============================================================
   5. FEATURED COLLECTION + PRODUCT CARDS
   ============================================================ */
.feature{ padding:clamp(64px,8vw,110px) 0; }
.feature__head{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,70px); align-items:end; margin-bottom:clamp(32px,4vw,52px); }
.feature__head .display{ margin:0; }

.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(230px,1fr);
  gap:clamp(14px,1.8vw,24px); overflow-x:auto; padding-bottom:12px;
  scroll-snap-type:x mandatory; scrollbar-width:thin;
}
.rail > *{ scroll-snap-align:start; }
.rail--grid{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible; }

.pc{ position:relative; border:1px solid var(--line); background:var(--paper); cursor:pointer; transition:border-color .4s var(--ease), box-shadow .4s var(--ease); }
.pc:hover{ border-color:var(--brass); box-shadow:var(--shadow); }
.pc:hover .pc__name{ color:var(--brass); }
.pc:focus-within{ border-color:var(--brass); }
.pc__hit{ display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; }
.pc__media{ display:block; overflow:hidden; aspect-ratio:1/1; background:var(--paper-3); }
.pc__media img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.pc:hover .pc__media img{ transform:scale(1.05); }

.pc__wish{
  position:absolute; top:10px; right:10px; width:34px; height:34px;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(252,251,249,.92); border:1px solid var(--line); color:var(--muted);
  transition:color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.pc__wish svg{ width:17px; height:17px; }
.pc__wish:hover{ color:var(--brass); border-color:var(--brass); transform:scale(1.08); }
.pc__wish.is-on{ color:#fff; background:var(--brass); border-color:var(--brass); }
.pc__wish.is-on svg path{ fill:currentColor; }

.pc__body{ padding:16px clamp(14px,1.6vw,20px) 20px; }
.pc__name{
  display:block; background:none; border:0; padding:0; cursor:pointer; text-align:left;
  font-family:var(--serif); font-size:1.24rem; color:var(--ink); line-height:1.2; margin-bottom:5px;
  transition:color .25s var(--ease);
}
.pc__name:hover{ color:var(--brass); }
.pc__finish{ margin:0 0 8px; font-size:11px; letter-spacing:.06em; color:var(--muted); }
.pc__rrp{ margin:0; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--brass); }

/* ============================================================
   6. CRAFT
   ============================================================ */
.craft{ padding:clamp(64px,8vw,110px) 0; background:var(--paper-2); border-block:1px solid var(--line); }
.craft__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center; }
.craft__media{ margin:0; }
.craft__media img{ width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--paper-3); }
.craft__media figcaption{ margin-top:12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.ticks{ list-style:none; padding:0; margin:28px 0 0; }
.ticks li{ position:relative; padding-left:24px; margin-bottom:11px; font-size:15px; color:var(--body); }
.ticks li::before{ content:""; position:absolute; left:0; top:12px; width:12px; height:1px; background:var(--brass); }

/* ============================================================
   7. INSPIRATION
   ============================================================ */
.insp{ padding:clamp(64px,8vw,110px) 0; }
.inspgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,28px); }
.insp__item{ margin:0; }
.insp__media{ display:block; overflow:hidden; aspect-ratio:4/3; background:var(--paper-3); }
.insp__media img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease); }
.insp__item:hover .insp__media img{ transform:scale(1.05); }
.insp__title{ display:block; font-family:var(--serif); font-size:1.2rem; color:var(--ink); margin:13px 0 9px; }
.insp__tags{ display:flex; flex-wrap:wrap; gap:6px; }
.insp__tags button{
  background:var(--paper-2); border:1px solid var(--line); cursor:pointer;
  font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  padding:5px 10px; transition:border-color .3s var(--ease), color .3s var(--ease);
}
.insp__tags button:hover{ border-color:var(--brass); color:var(--brass); }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:clamp(64px,8vw,110px) 0; background:var(--paper-2); border-top:1px solid var(--line); }
.contact__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(40px,5vw,80px); align-items:start; }
.contact__details{ margin:32px 0 0; }
.contact__details > div{ display:flex; gap:18px; padding:14px 0; border-top:1px solid var(--line-2); }
.contact__details dt{ flex:0 0 96px; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); padding-top:4px; }
.contact__details dd{ margin:0; color:var(--body); font-size:15px; line-height:1.6; }
.contact__details a{ border-bottom:1px solid var(--line-2); }
.contact__details a:hover{ border-bottom-color:var(--brass); }

.form{ background:var(--paper); border:1px solid var(--line); padding:clamp(22px,2.8vw,38px); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hp{ position:absolute; left:-9999px; }
.field{ margin-bottom:18px; }
.field > label{ display:block; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea{
  width:100%; background:var(--paper); color:var(--ink); border:1px solid var(--line-2); border-radius:0;
  padding:13px 14px; font-family:var(--sans); font-size:15px; font-weight:300;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.field textarea{ resize:vertical; min-height:104px; }
.field ::placeholder{ color:#a9a49b; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(154,123,69,.11); }
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239a7b45' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:11px; padding-right:40px;
}
.field--check{ border:0; padding:0; margin:0 0 20px; min-width:0; }
.field--check legend{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; padding:0; }
.checks{ display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.checks label{
  display:flex; align-items:center; gap:8px; cursor:pointer; padding:9px 11px;
  border:1px solid var(--line-2); background:var(--paper); font-size:13px; color:var(--body);
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.checks label:hover{ border-color:var(--brass); }
.checks label:has(input:checked){ border-color:var(--brass); background:var(--brass-t); color:var(--ink); }
.checks input{
  appearance:none; -webkit-appearance:none; width:14px; height:14px; flex:none; position:relative; margin:0;
  border:1px solid var(--line-2); background:var(--paper);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.checks input:checked{ background:var(--brass); border-color:var(--brass); }
.checks input:checked::after{ content:""; position:absolute; left:4px; top:1px; width:4px; height:8px; border:solid #fff; border-width:0 1.5px 1.5px 0; transform:rotate(45deg); }
.form__note{ margin:14px 0 0; font-size:12px; color:var(--muted); text-align:center; transition:color .3s var(--ease); }
.form__note.is-warn{ color:#a3452f; }

/* ============================================================
   SOCIALS
   ============================================================ */
.socials{ padding:clamp(60px,7vw,100px) 0; border-top:1px solid var(--line); }
.soc{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.6vw,22px); }
.soc--two{ grid-template-columns:repeat(2,1fr); max-width:620px; margin-inline:auto; }
.soc__item{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  padding:clamp(24px,3vw,36px) 14px; border:1px solid var(--line); background:var(--paper);
  transition:border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.soc__item:hover{ border-color:var(--brass); transform:translateY(-4px); box-shadow:var(--shadow); }
.soc__icon{ display:block; width:26px; height:26px; color:var(--brass); }
.soc__icon svg{ width:100%; height:100%; display:block; }
.soc__name{ font-family:var(--serif); font-size:1.22rem; color:var(--ink); }
.soc__handle{ font-size:11.5px; color:var(--muted); }

/* ============================================================
   FOOTER
   ============================================================ */
.foot{ padding:clamp(52px,6vw,80px) 0 34px; background:var(--paper-2); border-top:1px solid var(--line); }
.foot__cols{ display:grid; grid-template-columns:1.6fr repeat(5,1fr); gap:clamp(20px,2.4vw,36px); }
.foot__brandcol p{ margin:14px 0 0; font-size:13px; color:var(--muted); max-width:34ch; }
.foot__addr{ line-height:1.8; }
.foot__addr a{ border-bottom:1px solid var(--line-2); }
.foot__col h4{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin:0 0 14px; }
.foot__col a, .foot__col button{
  display:block; width:100%; text-align:left; background:none; border:0; padding:0 0 9px; cursor:pointer;
  font-family:var(--sans); font-size:13px; font-weight:300; color:var(--body); transition:color .3s var(--ease);
}
.foot__col a:hover, .foot__col button:hover{ color:var(--brass); }
.foot__legal{ margin:clamp(34px,4vw,50px) 0 0; padding-top:22px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }

/* ============================================================
   CATALOGUE OVERLAY
   ============================================================ */
.cat{ position:fixed; inset:0; z-index:200; background:var(--paper); display:flex; flex-direction:column; opacity:0; transition:opacity .35s var(--ease); }
.cat.is-open{ opacity:1; }
.cat[hidden]{ display:none; }

.cat__bar{
  flex:none; display:flex; align-items:center; gap:14px; padding:15px var(--gut);
  border-bottom:1px solid var(--line); background:rgba(252,251,249,.95);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.cat__back{
  background:none; border:0; cursor:pointer; padding:7px 0;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brass);
  display:inline-flex; align-items:center; gap:8px; transition:gap .3s var(--ease), color .3s var(--ease);
}
.cat__back:hover{ gap:13px; color:var(--ink); }
.cat__back[hidden]{ display:none; }
.cat__title{ font-family:var(--serif); font-size:1.3rem; color:var(--ink); margin-inline:auto; padding-inline:8px; text-align:center; }
.cat__close{ background:none; border:0; cursor:pointer; padding:0; flex:none; width:36px; height:36px; color:var(--ink); display:grid; place-items:center; transition:color .3s var(--ease), transform .3s var(--ease); }
.cat__close svg{ width:21px; height:21px; }
.cat__close:hover{ color:var(--brass); transform:rotate(90deg); }

.cat__scroll{ flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.cat__body{ padding-block:clamp(30px,4vw,54px) clamp(50px,7vw,86px); }
.cat__blurb{ font-size:clamp(1rem,1.4vw,1.12rem); color:var(--body); max-width:60ch; margin:0 0 9px; }
.cat__count{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 clamp(24px,3vw,40px); }
.cat__empty{ font-size:15px; color:var(--muted); }

/* product detail */
.pd{ display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start; }
.pd__main{ overflow:hidden; aspect-ratio:4/3; background:var(--paper-3); border:1px solid var(--line); }
.pd__main img{ width:100%; height:100%; object-fit:cover; }
.pd__thumbs{ display:flex; gap:9px; margin-top:9px; flex-wrap:wrap; }
.pd__thumb{ width:78px; aspect-ratio:4/3; padding:0; cursor:pointer; background:var(--paper-3); border:1px solid var(--line); overflow:hidden; opacity:.6; transition:border-color .3s var(--ease), opacity .3s var(--ease); }
.pd__thumb img{ width:100%; height:100%; object-fit:cover; }
.pd__thumb:hover{ opacity:1; }
.pd__thumb.is-active{ border-color:var(--brass); opacity:1; }

.pd__coll{ background:none; border:0; padding:0 0 10px; cursor:pointer; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); }
.pd__coll:hover{ color:var(--ink); }
.pd__name{ font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.5rem); line-height:1.12; margin-bottom:7px; }
.pd__price{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin:0 0 18px; }
.pd__blurb{ font-size:15px; color:var(--body); line-height:1.75; margin-bottom:24px; }
.pd__h{ font-family:var(--sans); font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 11px; padding-top:18px; border-top:1px solid var(--line); }
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:4px; }
.chip{ display:inline-flex; align-items:center; gap:7px; background:var(--paper-2); border:1px solid var(--line-2); cursor:pointer; font-size:11.5px; color:var(--body); padding:6px 11px; transition:border-color .3s var(--ease), color .3s var(--ease); }
.chip:hover{ border-color:var(--brass); color:var(--brass); }
.pd__sizes{ list-style:none; padding:0; margin:0 0 4px; display:flex; flex-wrap:wrap; gap:6px; }
.pd__sizes li{ font-size:11.5px; color:var(--body); border:1px solid var(--line-2); padding:6px 12px; background:var(--paper-2); }
.pd__specs{ margin:0 0 4px; }
.pd__specs > div{ display:flex; gap:18px; padding:10px 0; border-bottom:1px solid var(--line); }
.pd__specs > div:last-child{ border-bottom:0; }
.pd__specs dt{ flex:0 0 40%; font-size:13px; color:var(--muted); }
.pd__specs dd{ margin:0; font-size:13px; color:var(--ink); }
.pd__actions{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:26px; }
.pd__note{ margin:11px 0 0; font-size:12px; color:var(--muted); text-align:center; }
.pd__save.is-on{ border-color:var(--brass); color:var(--brass); background:var(--brass-t); }

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:1180px){
  .foot__cols{ grid-template-columns:1fr 1fr 1fr; }
  .foot__brandcol{ grid-column:1 / -1; margin-bottom:12px; }
  .rail--grid{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:1000px){
  .util__inner a:nth-child(n+4){ display:none; }
  .bar__links a{ display:none; }
  .mega__inner{ grid-template-columns:1fr 1fr; }
  .mega__col--promo{ border-left:0; padding-left:0; grid-column:1 / -1; }
  .mega__promo-media{ aspect-ratio:16/7; }
  .promo__grid{ grid-template-columns:1fr 1fr; }
  .pro--lead{ grid-column:1 / -1; aspect-ratio:16/9; }
  .catgrid{ grid-template-columns:repeat(2,1fr); }
  .story__grid, .craft__grid, .contact__grid{ grid-template-columns:1fr; }
  .story__media, .craft__media{ order:-1; }
  .inspgrid{ grid-template-columns:repeat(2,1fr); }
  .menu__inner{ grid-template-columns:1fr; gap:34px; }
  .pd{ grid-template-columns:1fr; }
  .rail--grid{ grid-template-columns:repeat(2,1fr); }
  .feature__head{ grid-template-columns:1fr; gap:16px; align-items:start; }
}

@media (max-width:760px){
  :root{ --headh:98px; }
  .util__inner a:nth-child(n+3){ display:none; }
  .util__now-hrs{ display:none; }
  .util__now{ padding-right:16px; }
  .soc{ grid-template-columns:repeat(2,1fr); }
  .foot__cols{ grid-template-columns:1fr 1fr; }
  .checks{ grid-template-columns:repeat(2,1fr); }
  .form__row{ grid-template-columns:1fr; gap:0; }
  .claim__scrim{ background:linear-gradient(to bottom, rgba(252,251,249,.94) 0%, rgba(252,251,249,.88) 55%, rgba(252,251,249,.8) 100%); }
}

@media (max-width:560px){
  .promo__grid{ grid-template-columns:1fr; }
  .pro{ aspect-ratio:4/3; }
  .inspgrid{ grid-template-columns:1fr; }
  .mega__inner{ grid-template-columns:1fr; }
  .pd__actions{ grid-template-columns:1fr; }

  /* ---- two per row on phones ----
     One card per screen wasted the viewport and made the range feel
     thinner than it is. Two up, with the card furniture scaled down
     so nothing wraps awkwardly at 375px. */
  .catgrid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .catcard__body{ display:block; padding:12px 12px 15px; }
  .catcard__name{ font-size:1.1rem; line-height:1.2; }
  .catcard__count{ display:block; margin-top:4px; font-size:9px; letter-spacing:.14em; }

  .rail--grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .pc__body{ padding:12px 11px 15px; }
  .pc__name{ font-size:1.04rem; }
  .pc__finish{ font-size:10px; margin-bottom:6px; }
  .pc__rrp{ font-size:9.5px; letter-spacing:.07em; }
  .pc__wish{ width:28px; height:28px; top:7px; right:7px; }
  .pc__wish svg{ width:14px; height:14px; }

  /* the featured rail scrolls — show two plus a peek so it reads as scrollable */
  .rail{ grid-auto-columns:minmax(148px,1fr); gap:10px; }
  .contact__details > div{ flex-direction:column; gap:4px; }
  .contact__details dt{ flex:none; }
  .foot__cols{ grid-template-columns:1fr; }
  /* only the "now open" badge and the socials survive at phone width
     (direct children only — the social icons are nested anchors) */
  .util__inner > a{ display:none; }
  .util__now{ border-right:0; padding-right:0; }

  /* the bar overflows 375px otherwise, pushing the wishlist badge off-screen */
  .bar__inner{ gap:9px; }
  .mega-btn{ font-size:10px; letter-spacing:.09em; gap:6px; }
  .brand{ gap:8px; }
  .brand__mark{ width:22px; height:22px; }
  .brand__l1{ font-size:.98rem; }
  .brand__l2{ font-size:7.5px; letter-spacing:.24em; }
  .wish-btn{ margin-left:0; padding:6px 0 6px 4px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}