/* ============================================================
   Classic Woodworking & Vanity Inc — Fine Custom Cabinetry
   Design system
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root{
  /* surfaces */
  --ink:        #14110d;
  --ink-2:      #1b1712;
  --ink-3:      #241e17;
  --ink-line:   rgba(227,190,115,.18);

  --ivory:      #f6f1e7;
  --ivory-2:    #efe6d6;
  --paper:      #fbf8f1;

  /* gold */
  --gold:        #e3be73;
  --gold-bright: #f1d693;
  --copper:      #b9722f;
  --gold-grad:   linear-gradient(105deg,#b9722f 0%,#e9c87f 32%,#f3dc9a 50%,#e3b96e 68%,#b9722f 100%);
  --gold-line:   linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold-bright) 50%,var(--gold) 78%,transparent);

  /* text */
  --on-dark:      #ede5d6;
  --on-dark-mut:  #a99d86;
  --on-dark-faint:#6f6553;
  --on-light:     #2a241c;
  --on-light-mut: #6c6151;

  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Jost', system-ui, sans-serif;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--sans);
  font-weight:500;
  font-size:clamp(11px,1vw,13px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.9em;
}
.eyebrow::before{
  content:"";
  width:clamp(24px,4vw,46px);
  height:1px;
  background:var(--gold);
  opacity:.7;
}
.eyebrow.center::after{
  content:"";
  width:clamp(24px,4vw,46px);
  height:1px;
  background:var(--gold);
  opacity:.7;
}

.display{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.02;
  letter-spacing:.005em;
  margin:0;
  text-wrap:balance;
}
.display em{ font-style:italic; font-weight:500; }

.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lede{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(20px,2.3vw,30px);
  line-height:1.45;
  color:var(--on-dark);
}

p{ text-wrap:pretty; }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
section{ position:relative; }
:where([id]){ scroll-margin-top:86px; }
.section-pad{ padding-block:clamp(76px,11vw,156px); }

.light{ background:var(--paper); color:var(--on-light); }
.light .eyebrow{ color:var(--copper); }
.light .eyebrow::before,.light .eyebrow.center::after{ background:var(--copper); opacity:.55; }
.paper{ background:var(--paper); color:var(--on-light); }

/* ---------- buttons ---------- */
.btn{
  --c: var(--ink);
  font-family:var(--sans);
  font-weight:500;
  font-size:13px;
  letter-spacing:.16em;
  text-transform:uppercase;
  display:inline-flex;
  align-items:center;
  gap:.8em;
  padding:16px 30px;
  border:1px solid transparent;
  cursor:pointer;
  transition:all .45s var(--ease);
  background:none;
}
.btn-gold{
  background:var(--gold-grad);
  background-size:160% 100%;
  background-position:0% 0%;
  color:#2a1c08;
}
.btn-gold:hover{ background-position:100% 0%; transform:translateY(-2px); }
.btn-ghost{
  border-color:var(--ink-line);
  color:var(--on-dark);
}
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-bright); }
.light .btn-ghost{ border-color:rgba(42,36,28,.28); color:var(--on-light); }
.light .btn-ghost:hover{ border-color:var(--copper); color:var(--copper); }
.btn .arrow{ transition:transform .4s var(--ease); }
.btn:hover .arrow{ transform:translateX(5px); }

.link-gold{
  font-family:var(--sans);
  font-weight:500;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:.7em;
  padding-bottom:4px;
  border-bottom:1px solid rgba(227,190,115,.35);
  transition:gap .35s var(--ease), border-color .35s;
}
.link-gold:hover{ gap:1.1em; border-color:var(--gold); }

/* ---------- image slots ---------- */
image-slot{
  display:block;
  width:100%;
  height:100%;
  background:
    repeating-linear-gradient(115deg,#211b14 0 2px,transparent 2px 13px),
    linear-gradient(160deg,#2a2219,#18130d 100%);
  background-color:#231c14;
}
.slot-frame{
  position:relative;
  overflow:hidden;
  background:#211a13;
  border:1px solid var(--ink-line);
}
.light .slot-frame{ border-color:rgba(42,36,28,.12); background:#e7ddca; }
.slot-cap{
  position:absolute; left:16px; bottom:14px; z-index:3;
  font-family:var(--sans); font-weight:500;
  font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold);
  pointer-events:none;
  text-shadow:0 1px 10px rgba(0,0,0,.7);
}

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px var(--gutter);
  transition:background .5s var(--ease), padding .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(16,13,10,.82);
  backdrop-filter:blur(14px);
  border-bottom-color:var(--ink-line);
  padding-block:13px;
}
.nav-logo{ display:flex; align-items:center; gap:13px; }
.nav-logo img{ height:34px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
.nav-logo > span{ display:flex; flex-direction:column; justify-content:center; }
.nav-logo .nl-name{
  display:block; white-space:nowrap;
  font-family:var(--serif); font-weight:600; font-size:19px; letter-spacing:.04em;
  line-height:1; color:var(--on-dark);
}
.nav-logo .nl-sub{
  display:block;
  font-family:var(--sans); font-weight:400; font-size:8.5px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--on-dark-mut); margin-top:3px; white-space:nowrap;
}
.nav-links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); }
.nav-links a{
  font-family:var(--sans); font-weight:400; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--on-dark-mut);
  position:relative; padding-block:6px; transition:color .35s;
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--gold); transition:width .4s var(--ease);
}
.nav-links a:hover{ color:var(--on-dark); }
.nav-links a:hover::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:18px; }
.nav-phone{
  font-family:var(--sans); font-weight:400; font-size:12.5px; letter-spacing:.08em;
  color:var(--on-dark-mut); white-space:nowrap;
}
.nav-phone strong{ color:var(--gold); font-weight:500; }
.nav-dealer{
  font-family:var(--sans); font-weight:500; font-size:11.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold);
  border:1px solid var(--ink-line); padding:11px 18px;
  display:inline-flex; align-items:center; gap:.6em; white-space:nowrap;
  transition:border-color .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
}
.nav-dealer span{ transition:transform .35s var(--ease); }
.nav-dealer:hover{ border-color:var(--gold); background:rgba(227,190,115,.08); color:var(--gold-bright); }
.nav-dealer:hover span{ transform:translateX(4px); }
.nav-toggle{
  display:none; width:44px; height:42px; padding:0;
  border:1px solid var(--ink-line); background:rgba(255,255,255,.03);
  border-radius:2px; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.nav-toggle span{ display:block; width:20px; height:1.5px; background:var(--gold); transition:transform .3s var(--ease), opacity .3s var(--ease); }
.nav.open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav.open .nav-toggle span:nth-child(2){ opacity:0; }
.nav.open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
.nav-only-mobile{ display:none; }
.nav.open{ background:rgba(16,13,10,.97); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom-color:var(--ink-line); }

@media (max-width:1080px){
  .nav-phone,.nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-links{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:0; right:0;
    background:rgba(16,13,10,.97); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--ink-line);
    padding:4px var(--gutter) 18px;
    max-height:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none;
    transition:max-height .42s var(--ease), opacity .3s var(--ease), visibility .3s;
  }
  .nav.open .nav-links{ max-height:82vh; overflow-y:auto; opacity:1; visibility:visible; pointer-events:auto; }
  .nav-links a:not(.btn){
    padding:15px 2px; font-size:14px; letter-spacing:.14em; color:var(--on-dark);
    border-bottom:1px solid rgba(227,190,115,.10);
  }
  .nav-links a:not(.btn)::after{ display:none; }
  .nav-only-mobile{ display:block; }
  .nav-links a.nav-only-mobile:not(.btn){ color:var(--gold); }
  .nav-links .btn{ display:flex; width:100%; justify-content:center; margin-top:16px; }
}
@media (max-width:560px){
  .nav-logo .nl-sub{ display:none; }
  .nav-logo .nl-name{ font-size:17px; }
  .nav-logo img{ height:30px; }
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding-top:clamp(96px,12vh,140px);
  padding-bottom:clamp(48px,7vw,90px);
  overflow:hidden;
  background:var(--ink);
}
/* mobile: top-align the hero so the tagline sits directly above the headline, near the top */
@media (max-width:760px){
  .hero{ align-items:flex-start; }
  .hero-inner{ margin-top:8px; }
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media image-slot{ height:100%; }
.hero-img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(14,11,8,.55) 0%,rgba(14,11,8,.14) 28%,rgba(14,11,8,.50) 66%,rgba(14,11,8,.97) 100%),
    linear-gradient(90deg,rgba(14,11,8,.92) 0%,rgba(14,11,8,.55) 36%,rgba(14,11,8,.06) 68%,transparent 100%),
    radial-gradient(95% 90% at 16% 88%,rgba(14,11,8,.82) 0%,rgba(14,11,8,.30) 42%,transparent 66%);
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero h1{
  font-size:clamp(46px,8.7vw,144px); color:var(--on-dark);
  margin-top:.1em; line-height:.96; letter-spacing:-.012em;
  text-shadow:0 4px 60px rgba(0,0,0,.45);
}
.hero h1 em{ display:block; padding-bottom:.16em; }
.hero .lede{ max-width:46ch; margin-top:1.5em; color:var(--on-dark); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top:2.4em; }
@media (max-height:640px){
  .hero h1{ font-size:clamp(38px,6.4vw,92px); }
  .hero .lede{ font-size:16px; margin-top:1.1em; }
  .hero-actions{ margin-top:1.6em; }
}
.hero-meta{
  position:absolute; right:var(--gutter); bottom:clamp(48px,7vw,90px); z-index:2;
  text-align:right; display:flex; flex-direction:column; gap:22px; align-items:flex-end;
}
@media (max-width:900px){ .hero-meta{ display:none; } }
.hero-stat .n{ font-family:var(--serif); font-weight:500; font-size:46px; line-height:1; }
.hero-stat .l{ font-family:var(--sans); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--on-dark-mut); margin-top:6px; }

.scroll-hint{
  position:absolute; left:var(--gutter); bottom:26px; z-index:2;
  font-family:var(--sans); font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--on-dark-faint); display:flex; align-items:center; gap:12px;
}
.scroll-hint::after{ content:""; width:40px; height:1px; background:var(--on-dark-faint); animation:scrollline 2.4s var(--ease) infinite; transform-origin:left; }
@keyframes scrollline{ 0%,100%{ transform:scaleX(.3); opacity:.4; } 50%{ transform:scaleX(1); opacity:1; } }

/* ---------- marquee strip ---------- */
.strip{ background:var(--ink-2); border-block:1px solid var(--ink-line); overflow:hidden; padding-block:18px; }
.strip-track{ display:flex; gap:64px; white-space:nowrap; width:max-content; animation:marquee 38s linear infinite; }
.strip-item{ font-family:var(--serif); font-style:italic; font-size:22px; color:var(--on-dark-mut); display:flex; align-items:center; gap:64px; }
.strip-item::after{ content:"✦"; font-size:11px; font-style:normal; color:var(--gold); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ---------- generic section head ---------- */
.head{ max-width:760px; }
.head.center{ margin-inline:auto; text-align:center; }
.head h2{ font-size:clamp(34px,5.2vw,72px); margin-top:.4em; }
.head .sub{ margin-top:1.1em; font-size:clamp(16px,1.4vw,19px); color:var(--on-dark-mut); }
.light .head .sub{ color:var(--on-light-mut); }

/* ---------- pillars ---------- */
.pillars{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:clamp(48px,6vw,84px); background:var(--ink-line); border:1px solid var(--ink-line); }
.light .pillars{ background:rgba(42,36,28,.12); border-color:rgba(42,36,28,.12); }
.pillar{ background:var(--ivory); padding:clamp(30px,3.4vw,52px); }
.pillar .pn{ font-family:var(--serif); font-style:italic; color:var(--copper); font-size:20px; }
.pillar h3{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,2.6vw,33px); margin:.5em 0 .4em; }
.pillar p{ font-size:15px; color:var(--on-light-mut); margin:0; }
@media (max-width:820px){ .pillars{ grid-template-columns:1fr; } }

/* ---------- collections ---------- */
.collections{ display:flex; flex-direction:column; gap:clamp(60px,8vw,130px); margin-top:clamp(56px,7vw,96px); }
.collection{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,80px); align-items:center; }
.collection:nth-child(even){ direction:rtl; }
.collection:nth-child(even) > *{ direction:ltr; }
.collection .c-media{ height:clamp(360px,46vw,560px); }
.c-img{ width:100%; height:100%; object-fit:cover; display:block; }
.c-index{ font-family:var(--serif); font-style:italic; font-size:18px; color:var(--gold); }
.collection h3{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,4.4vw,60px); margin:.2em 0 .1em; line-height:1; }
.collection .c-tag{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,1.8vw,23px); color:var(--on-dark-mut); margin-bottom:1.4em; }
.c-feats{ list-style:none; padding:0; margin:0 0 2em; display:grid; grid-template-columns:1fr 1fr; gap:11px 26px; }
.c-feats li{ font-size:13.5px; color:var(--on-dark); display:flex; gap:11px; align-items:baseline; }
.c-feats li::before{ content:"—"; color:var(--gold); }
@media (max-width:860px){
  .collection,.collection:nth-child(even){ grid-template-columns:1fr; direction:ltr; }
  .collection .c-media{ height:clamp(300px,70vw,440px); }
  .c-feats{ grid-template-columns:1fr; }
}

/* ---------- kitchens ---------- */
.kitchens-feature{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,76px); align-items:center; margin-top:clamp(48px,6vw,84px); }
.kf-media{ height:clamp(340px,44vw,540px); }
.kf-img{ width:100%; height:100%; object-fit:cover; display:block; }
.kf-intro{ font-family:var(--serif); font-style:italic; font-size:clamp(18px,2vw,25px); color:var(--on-light-mut); margin:0 0 1.5em; line-height:1.4; }
.kf-lines{ display:flex; flex-direction:column; gap:1.3em; }
.kf-line h3{ font-family:var(--serif); font-weight:500; font-size:clamp(22px,2.4vw,30px); color:var(--on-light); margin:0 0 .2em; line-height:1; }
.kf-line p{ font-size:14.5px; color:var(--on-light-mut); margin:0; line-height:1.6; }
.kf-note{ margin:1.7em 0; padding-left:18px; border-left:2px solid var(--copper); font-family:var(--serif); font-style:italic; font-size:clamp(16px,1.7vw,20px); color:var(--on-light); line-height:1.5; }
.light .link-gold{ color:var(--copper); border-color:rgba(185,114,47,.4); }
.light .link-gold:hover{ border-color:var(--copper); }
@media (max-width:860px){
  .kitchens-feature{ grid-template-columns:1fr; }
  .kf-media{ height:clamp(260px,64vw,420px); }
}

/* ---------- grades ---------- */
.grades{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,2.6vw,34px); margin-top:clamp(48px,6vw,84px); align-items:stretch; }
@media (max-width:820px){ .grades{ grid-template-columns:1fr; } }
.grade-card{
  position:relative; background:var(--ink-2); border:1px solid var(--ink-line);
  padding:clamp(30px,3.4vw,54px); display:flex; flex-direction:column;
}
.grade-card.featured{
  background:linear-gradient(168deg,#241c12 0%,#1a150e 60%,#161009 100%);
  border-color:rgba(227,190,115,.45);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.grade-card.featured::before{
  content:""; position:absolute; inset:0 0 auto 0; height:2px; background:var(--gold-line);
}
.gc-kicker{ display:flex; justify-content:space-between; align-items:center; gap:14px; }
.gc-tier{ font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--on-dark-mut); }
.grade-card.featured .gc-tier{ color:var(--gold); }
.gc-flag{
  font-family:var(--sans); font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:#2a1c08; background:var(--gold-grad); padding:5px 11px; white-space:nowrap;
}
.gc-flag.muted{ background:none; color:var(--on-dark-faint); border:1px solid var(--ink-line); }
.grade-card h3{ font-family:var(--serif); font-weight:500; font-size:clamp(28px,3vw,42px); margin:1em 0 .1em; line-height:1.04; }
.gc-pos{ font-family:var(--serif); font-style:italic; font-size:clamp(17px,1.6vw,21px); color:var(--on-dark-mut); }
.gc-desc{ font-size:15px; color:var(--on-dark-mut); margin:1.3em 0 1.7em; }
.gc-list{ list-style:none; padding:0; margin:0 0 2.2em; display:flex; flex-direction:column; }
.gc-list li{ font-size:14px; color:var(--on-dark); display:flex; gap:13px; align-items:flex-start; padding:13px 0; border-top:1px solid var(--ink-line); }
.gc-list .tick{ color:var(--gold); flex:none; font-size:13px; line-height:1.5; }
.grade-card.featured .gc-list .tick{ color:var(--gold-bright); }
.gc-foot{ margin-top:auto; }
.gc-price{ font-family:var(--serif); font-size:clamp(20px,1.9vw,25px); color:var(--on-dark); margin-bottom:1.1em; }
.gc-price span{ font-family:var(--sans); font-size:12px; letter-spacing:.04em; color:var(--on-dark-mut); }
.grade-card .btn{ width:100%; justify-content:center; }

/* ---------- process ---------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin-top:clamp(48px,6vw,84px); background:var(--ink-line); border-block:1px solid var(--ink-line); }
.light .steps{ background:rgba(42,36,28,.12); border-color:rgba(42,36,28,.12); }
.step{
  position:relative; overflow:hidden;
  min-height:clamp(440px,40vw,560px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(28px,2.6vw,40px) clamp(22px,2vw,34px) clamp(34px,3.4vw,50px);
  background:var(--ink) center top/cover no-repeat;
}
.step::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(16,13,10,.18) 0%,rgba(16,13,10,.10) 32%,rgba(16,13,10,.68) 64%,rgba(16,13,10,.97) 100%);
  transition:opacity .5s var(--ease);
}
.step:hover::before{ background:linear-gradient(180deg,rgba(16,13,10,.30) 0%,rgba(16,13,10,.22) 32%,rgba(16,13,10,.78) 64%,rgba(16,13,10,.98) 100%); }
.step > *{ position:relative; z-index:1; }
.step .sn{ font-family:var(--serif); font-size:clamp(40px,4vw,62px); line-height:1; }
.step h3{ font-family:var(--sans); font-weight:500; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:1.1em 0 .8em; }
.step p{ font-size:14px; color:var(--on-dark); margin:0; text-shadow:0 1px 10px rgba(0,0,0,.5); }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .steps{ grid-template-columns:1fr; } .step{ min-height:clamp(360px,86vw,460px); } }

/* ---------- craft / construction spec sheet ---------- */
.spec-sheet{
  background:var(--ink-2); border:1px solid var(--ink-line);
  padding:clamp(26px,4vw,60px);
}
.ss-title{ text-align:center; margin-bottom:clamp(32px,4vw,56px); }
.ss-title h2{ font-size:clamp(32px,4.8vw,62px); margin-top:.4em; }

.ss-layout{ display:grid; grid-template-columns:1fr 1.12fr 1fr; gap:clamp(18px,2.2vw,30px); align-items:stretch; }
@media (max-width:920px){ .ss-layout{ grid-template-columns:1fr; } }
.ss-col{ display:flex; flex-direction:column; gap:clamp(18px,2.2vw,30px); }

.ss-figure{ margin:0; position:relative; overflow:hidden; border:1px solid var(--ink-line); min-height:360px; }
.ss-figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 64%; }
.ss-figure figcaption{
  position:absolute; left:14px; bottom:12px; z-index:2;
  font-family:var(--sans); font-weight:500; font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); text-shadow:0 1px 12px rgba(0,0,0,.85);
}
@media (max-width:920px){ .ss-figure{ order:-1; height:clamp(340px,72vw,480px); } }
.ss-diagram{ background:var(--ink); display:flex; align-items:center; justify-content:center; padding:12px; }
.ss-diagram svg{ width:100%; height:100%; }

.ss-thumb{ background:#efe7d6; border:1px solid var(--ink-line); padding:10px; display:flex; align-items:center; justify-content:center; margin-bottom:13px; }
.ss-thumb img{ width:100%; height:104px; object-fit:contain; mix-blend-mode:multiply; }
.ss-thumb-hinge{ margin-bottom:0; }
.ss-thumb-hinge img{ height:100px; }

.ss-box{ background:var(--ink); border:1px solid var(--ink-line); display:flex; flex-direction:column; }
.ss-box.featured{ box-shadow:inset 0 2px 0 var(--gold); background:linear-gradient(170deg,#241c12,#16100a); }
.ss-bar{
  padding:12px 18px; border-bottom:1px solid var(--ink-line);
  background:var(--ink-3);
}
.ss-bar h3{
  font-family:var(--sans); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold); margin:0;
}
.ss-body{ padding:17px 18px 19px; }
.ss-note{ font-family:var(--serif); font-size:14px; color:var(--on-dark); margin:0 0 13px; line-height:1.5; }
.ss-note strong{ color:var(--gold-bright); font-weight:600; }
.ss-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.ss-list li{ font-size:13px; color:var(--on-dark); display:flex; gap:10px; align-items:flex-start; line-height:1.4; }
.ss-list li::before{ content:"✓"; color:var(--gold); flex:none; font-size:11px; line-height:1.45; }
.ss-list li.neg{ color:var(--on-dark-mut); }
.ss-list li.neg::before{ content:"✕"; color:var(--copper); }
.ss-alt{ margin:13px 0 0; padding-top:11px; border-top:1px solid var(--ink-line); font-size:11.5px; color:var(--on-dark-mut); font-style:italic; font-family:var(--serif); }

.ss-wide{ margin-top:clamp(18px,2.2vw,30px); }
.ss-body-split{ display:grid; grid-template-columns:150px 1.05fr 1.15fr; gap:clamp(16px,2.4vw,34px); align-items:center; }
@media (max-width:680px){ .ss-body-split{ grid-template-columns:1fr; gap:14px; } }
.ss-body-split .ss-note{ margin:0; }
.ss-list-row{ flex-direction:row; flex-wrap:wrap; gap:10px 26px; }

.ss-footer{
  text-align:center; margin-top:clamp(28px,3.4vw,48px); padding-top:clamp(20px,2.6vw,32px);
  border-top:1px solid var(--ink-line);
  font-family:var(--serif); font-style:italic; font-size:clamp(18px,2vw,26px); color:var(--on-dark);
}
.ss-footer span{ color:var(--gold); }

.io-block{ margin-top:clamp(56px,7vw,96px); }
.io-head{ max-width:640px; margin-bottom:clamp(28px,3.4vw,44px); }
.io-head h3{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.2vw,40px); margin:.4em 0 0; line-height:1.05; }
.io-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
@media (max-width:900px){ .io-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .io-grid{ grid-template-columns:repeat(2,1fr); } }
.io-card{ margin:0; }
.io-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--ink-line); background:#1b150e; }
.io-card figcaption{ margin-top:11px; font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-mut); line-height:1.4; }
.io-head{ max-width:640px; margin-bottom:clamp(28px,3.4vw,44px); }
.io-head h3{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,3.2vw,40px); margin:.4em 0 0; line-height:1.05; }
.io-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
@media (max-width:900px){ .io-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .io-grid{ grid-template-columns:repeat(2,1fr); } }
.io-card{ margin:0; }
.io-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border:1px solid var(--ink-line); background:#1b150e; }
.io-card figcaption{ margin-top:11px; font-family:var(--sans); font-weight:500; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-mut); line-height:1.4; }

/* ---------- gallery ---------- */
.gallery{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:clamp(48px,6vw,80px); }
.gallery .slot-frame{ min-height:200px; }
.gallery .slot-frame .g-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s var(--ease); }
.gallery .slot-frame:hover .g-img{ transform:scale(1.05); }
.form-thanks{ padding:6px 0 4px; }
.form-thanks h3{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,3vw,36px); line-height:1.1; color:var(--on-light); margin:0; }
.form-thanks p{ margin:.7em 0 0; color:var(--on-light-mut); font-size:15px; line-height:1.6; }
.form-thanks a{ color:var(--copper); }
.g-tall{ grid-column:span 2; grid-row:span 2; }
.g-wide{ grid-column:span 4; }
.g-sq{ grid-column:span 2; }
@media (max-width:820px){
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .g-tall,.g-wide,.g-sq{ grid-column:span 1; grid-row:auto; }
}

/* ---------- quote ---------- */
.quote{ text-align:center; }
.quote .mark{ font-family:var(--serif); font-size:120px; line-height:0; color:var(--gold); opacity:.5; display:block; height:60px; }
.quote blockquote{ font-family:var(--serif); font-weight:400; font-size:clamp(28px,4.4vw,58px); line-height:1.18; margin:0 auto; max-width:18ch; }
.quote .by{ font-family:var(--sans); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:var(--on-light-mut); margin-top:2.4em; }

/* ---------- testimonials ---------- */
.tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,34px); margin-top:clamp(48px,6vw,80px); }
.tcard{ background:var(--ink-2); border:1px solid var(--ink-line); padding:clamp(28px,3vw,44px); display:flex; flex-direction:column; }
.tcard .stars{ color:var(--gold); letter-spacing:4px; font-size:13px; }
.tcard p{ font-family:var(--serif); font-size:clamp(18px,1.7vw,22px); line-height:1.5; color:var(--on-dark); margin:1.1em 0 auto; }
.tcard .who{ margin-top:1.8em; }
.tcard .who .nm{ font-family:var(--sans); font-weight:500; font-size:14px; letter-spacing:.04em; color:var(--gold); }
.tcard .who .loc{ font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--on-dark-faint); margin-top:4px; }
@media (max-width:860px){ .tgrid{ grid-template-columns:1fr; } }

/* ---------- CTA / contact ---------- */
.contact{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(40px,6vw,90px); align-items:center; }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } }
.contact h2{ font-family:var(--serif); font-weight:500; font-size:clamp(36px,5.4vw,76px); line-height:1.02; margin:.3em 0 0; }
.cinfo{ margin-top:2.4em; display:flex; flex-direction:column; gap:24px; }
.cinfo .row .k{ font-family:var(--sans); font-size:10.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--copper); margin-bottom:7px; }
.cinfo .row .v{ font-family:var(--serif); font-size:clamp(20px,2vw,26px); color:var(--on-light); line-height:1.3; }
.cinfo .row a.v:hover{ color:var(--copper); }

.form{ background:var(--paper); border:1px solid rgba(42,36,28,.14); padding:clamp(28px,3.4vw,48px); }
.form .frow{ margin-bottom:20px; }
.form label{ display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-light-mut); margin-bottom:9px; }
.form input,.form textarea,.form select{
  width:100%; background:transparent; border:none; border-bottom:1px solid rgba(42,36,28,.28);
  padding:10px 0; font-family:var(--serif); font-size:19px; color:var(--on-light); outline:none;
  transition:border-color .35s;
}
.form input:focus,.form textarea:focus,.form select:focus{ border-color:var(--copper); }
.form .frow2{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:520px){ .form .frow2{ grid-template-columns:1fr; } }
.form textarea{ resize:vertical; min-height:64px; }
.form button{ width:100%; justify-content:center; margin-top:8px; }

/* ---------- footer ---------- */
.footer{ background:var(--ink); border-top:1px solid var(--ink-line); padding-block:clamp(56px,7vw,90px) 30px; }
.fgrid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
@media (max-width:760px){ .fgrid{ grid-template-columns:1fr; gap:36px; } }
.footer img.fmono{ height:46px; width:auto; margin-bottom:20px; }
.footer .ftag{ font-family:var(--serif); font-style:italic; font-size:20px; color:var(--on-dark-mut); max-width:34ch; }
.footer h5{ font-family:var(--sans); font-weight:500; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); margin:0 0 18px; }
.footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; }
.footer ul a{ font-size:14px; color:var(--on-dark-mut); transition:color .3s; }
.footer ul a:hover{ color:var(--on-dark); }
.fbar{ margin-top:clamp(48px,6vw,76px); padding-top:24px; border-top:1px solid var(--ink-line); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.fbar span{ font-family:var(--sans); font-size:11px; letter-spacing:.1em; color:var(--on-dark-faint); }

/* ---------- reveal animation ----------
   Default = fully visible (safe fallback for non-focused / no-JS loads).
   The hidden-then-animate state is only armed by JS when the page is
   actually visible to a user, so a throttled iframe never freezes content
   at opacity:0. */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion:no-preference){
  body.reveals-armed .reveal{
    opacity:0; transform:translateY(26px);
    transition:opacity 1s var(--ease), transform 1s var(--ease);
  }
  body.reveals-armed .reveal.in{ opacity:1; transform:none; }
  body.reveals-armed .reveal.d1{ transition-delay:.08s; }
  body.reveals-armed .reveal.d2{ transition-delay:.16s; }
  body.reveals-armed .reveal.d3{ transition-delay:.24s; }
  body.reveals-armed .reveal.d4{ transition-delay:.32s; }
}
@media (prefers-reduced-motion:reduce){
  .strip-track,.scroll-hint::after{ animation:none; }
  html{ scroll-behavior:auto; }
}