/* ==========================================================================
   California Cabinets — Design System
   Cabinets | Counters | Flooring — Fresno, CA
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --slate:        #35507a;   /* lightened navy — 8.1:1 with white */
  --slate-deep:   #2a4062;   /* lightened footer / topbar */
  --slate-soft:   #35507a08;
  --brass:        #c6a163;   /* decorative only — rules, icons, borders */
  --brass-light:  #d6b881;
  --brass-pale:   #ece2cf;
  --brass-ink:    #836629;   /* brass TEXT on light backgrounds — 4.5:1+ */
  --brass-glow:   #ecdcc0;   /* brass TEXT on dark backgrounds — 6.0:1+ */

  /* Neutrals */
  --ivory:        #f7f3ea;
  --ivory-warm:   #f1ebdd;
  --linen:        #e9e1d1;
  --ink:          #1c1f24;
  --graphite:     #4a4f57;
  --stone:        #63686f;
  --line:         #ddd4c2;
  --white:        #ffffff;

  /* Type */
  --serif: "Cormorant Garamond", "Georgia", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --nav-h: 84px;
  --pad-x: clamp(1.25rem, 5vw, 5.5rem);
  --sec-y: clamp(4.5rem, 9vw, 8.5rem);
  --maxw: 1360px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ivory);
  color:var(--graphite);
  font-family:var(--sans);
  font-size:16.5px;
  font-weight:300;
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
h1,h2,h3,h4{ margin:0; font-weight:400; color:var(--ink); line-height:1.12; letter-spacing:-.01em; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

/* ---------- Type scale ---------- */
.display{ font-family:var(--serif); font-size:clamp(2.9rem,6.4vw,5.4rem); font-weight:300; line-height:1.02; letter-spacing:-.015em; }
.h1{ font-family:var(--serif); font-size:clamp(2.4rem,4.6vw,4rem); font-weight:300; line-height:1.06; }
.h2{ font-family:var(--serif); font-size:clamp(1.95rem,3.4vw,3.05rem); font-weight:300; line-height:1.12; }
.h3{ font-family:var(--serif); font-size:clamp(1.35rem,2vw,1.85rem); font-weight:400; line-height:1.2; }
.h4{ font-family:var(--sans); font-size:.78rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); }

.eyebrow{
  display:block;
  font-size:.7rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass-ink); margin-bottom:1.25rem;
}
.eyebrow--center{ text-align:center; }
.lede{ font-size:clamp(1rem,1.25vw,1.12rem); line-height:1.8; color:var(--graphite); }
.muted{ color:var(--stone); }
.serif-quote{ font-family:var(--serif); font-style:italic; font-size:clamp(1.15rem,1.7vw,1.5rem); line-height:1.55; color:var(--ink); }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad-x); }
.wrap--narrow{ max-width:940px; }
.section{ padding-block:var(--sec-y); }
/* keep anchor targets clear of the sticky nav */
:target,[id]{ scroll-margin-top:calc(var(--nav-h) + 24px); }
.section--tight{ padding-block:clamp(3rem,5.5vw,5rem); }
.section--ivory{ background:var(--ivory); }
.section--warm{ background:var(--ivory-warm); }
.section--linen{ background:var(--linen); }
.section--slate{ background:var(--slate); color:#e3e9f2; }
.section--slate .h1,.section--slate .h2,.section--slate .h3,.section--slate .h4{ color:var(--white); }
.section--slate .eyebrow{ color:var(--brass-glow); }

.grid{ display:grid; gap:clamp(1.5rem,3vw,3.25rem); }
.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 1.12fr; gap:clamp(2rem,5vw,5rem); align-items:center; }
.split--rev > *:first-child{ order:2; }
.split--even{ grid-template-columns:1fr 1fr; align-items:start; }
.mosaic{ grid-template-columns:1.35fr 1fr 1fr; }
.stack-sm > * + *{ margin-top:1rem; }

/* ---------- Ornament ---------- */
.rule{
  display:flex; align-items:center; justify-content:center;
  gap:.7rem; margin:1.5rem 0;
}
.rule::before,.rule::after{ content:""; height:1px; background:var(--line); flex:1; max-width:150px; }
.rule i{ width:6px; height:6px; background:var(--brass); transform:rotate(45deg); display:block; }
.rule--left{ justify-content:flex-start; margin-left:0; }
.rule--left::after{ display:none; }
.rule--left::before{ max-width:64px; flex:0 0 64px; }

.tick{ width:52px; height:2px; background:var(--brass); display:block; margin-bottom:1.75rem; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1rem 2.1rem;
  font-size:.72rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid transparent; border-radius:1px;
  transition:all .38s var(--ease);
  white-space:nowrap;
}
.btn svg{ transition:transform .38s var(--ease); }
.btn:hover svg{ transform:translateX(5px); }
.btn--solid{ background:var(--slate); color:var(--white); }
.btn--solid:hover{ background:var(--slate-deep); }
.btn--brass{ background:var(--brass); color:var(--ink); }
.btn--brass:hover{ background:#b8924f; color:var(--ink); }
.btn--ghost{ border-color:var(--slate); color:var(--slate); }
.btn--ghost:hover{ background:var(--slate); color:var(--white); }
.btn--light{ border-color:rgba(255,255,255,.55); color:var(--white); }
.btn--light:hover{ background:var(--white); color:var(--slate); border-color:var(--white); }
.btn--onwhite{ background:var(--white); color:var(--slate); }
.btn--onwhite:hover{ background:var(--brass); color:var(--ink); }

.link-arrow{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--slate); padding-bottom:3px;
  border-bottom:1px solid var(--line);
  transition:.34s var(--ease);
}
.link-arrow:hover{ color:var(--brass-ink); border-color:var(--brass); gap:.95rem; }

/* ==========================================================================
   Header / Nav
   ========================================================================== */
.topbar{
  background:var(--slate-deep); color:#b9c4d4;
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.6rem var(--pad-x);
  display:flex; justify-content:center; gap:2.5rem; flex-wrap:wrap;
}
.topbar a{ transition:color .3s; }
.topbar a:hover{ color:var(--brass-glow); }
.topbar span{ opacity:.75; }

.nav{
  position:sticky; top:0; z-index:80;
  background:rgba(247,243,234,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .35s;
}
.nav.is-stuck{ box-shadow:0 6px 30px rgba(28,31,36,.08); }
.nav__inner{
  max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad-x);
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.nav__logo img{ height:38px; width:auto; }
.nav__menu{ display:flex; align-items:center; gap:clamp(1rem,2.2vw,2.1rem); }
.nav__menu a{
  font-size:.7rem; font-weight:400; letter-spacing:.17em; text-transform:uppercase;
  color:var(--graphite); padding:.4rem 0;
  border-bottom:1px solid transparent;
  transition:.3s var(--ease);
}
.nav__menu a:hover{ color:var(--ink); }
.nav__menu a.is-active{ color:var(--slate); border-color:var(--brass); }

/* ---------- Dropdown navigation ---------- */
.nav__item{ position:relative; }
.nav__top{
  display:inline-flex; align-items:center; gap:.42rem;
  font-family:inherit; font-size:.7rem; font-weight:400;
  letter-spacing:.17em; text-transform:uppercase;
  color:var(--graphite); padding:.4rem 0;
  background:none; border:0; border-bottom:1px solid transparent;
  cursor:pointer; transition:.3s var(--ease);
}
.nav__top:hover{ color:var(--ink); }
.nav__item.is-active > .nav__top{ color:var(--slate); border-color:var(--brass); }
.nav__caret{ transition:transform .3s var(--ease); opacity:.65; }
.nav__item.is-open .nav__caret{ transform:rotate(180deg); }

/* keeps hover alive while the pointer crosses the gap to the panel */
.nav__item--has-menu::after{
  content:""; position:absolute; left:0; right:0; top:100%; height:.7rem;
}

.nav__drop{
  position:absolute; top:calc(100% + .65rem); left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:238px; padding:.45rem 0; z-index:5;
  background:var(--ivory); border:1px solid var(--line); border-top:2px solid var(--brass);
  box-shadow:0 24px 52px rgba(28,31,36,.14);
  opacity:0; visibility:hidden;
  transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
}
.nav__item.is-open .nav__drop{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.nav__drop a{
  display:block; padding:.72rem 1.3rem;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--graphite); white-space:nowrap; border-bottom:0;
  transition:background .25s var(--ease), color .25s var(--ease), padding-left .25s var(--ease);
}
.nav__drop a:hover{ background:var(--white); color:var(--brass-ink); padding-left:1.55rem; }
.nav__drop a.is-active{ color:var(--slate); }
.nav__drop a.is-active::before{
  content:""; display:inline-block; width:5px; height:5px; margin-right:.55rem;
  background:var(--brass); transform:rotate(45deg); vertical-align:middle;
}
.nav__cta{ display:flex; align-items:center; gap:1.25rem; }
.nav__phone{
  font-size:.78rem; letter-spacing:.08em; color:var(--slate); font-weight:400;
  display:flex; align-items:center; gap:.5rem;
}
.nav__phone:hover{ color:var(--brass-ink); }

.burger{ display:none; width:32px; height:22px; position:relative; }
.burger span{
  position:absolute; left:0; width:100%; height:1.5px; background:var(--ink);
  transition:.35s var(--ease);
}
.burger span:nth-child(1){ top:2px; }
.burger span:nth-child(2){ top:10px; }
.burger span:nth-child(3){ top:18px; }
.burger.is-open span:nth-child(1){ top:10px; transform:rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ top:10px; transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:79;
  background:var(--slate-deep);
  padding:calc(var(--nav-h) + 3rem) var(--pad-x) 3rem;
  display:flex; flex-direction:column; gap:.25rem;
  opacity:0; visibility:hidden; transform:translateY(-12px);
  transition:.4s var(--ease);
  overflow-y:auto;
}
.mobile-menu.is-open{ opacity:1; visibility:visible; transform:none; }
.mobile-menu a{
  font-family:var(--serif); font-size:2rem; color:#e8ecf3;
  padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.09);
}
.mobile-menu .btn{ margin-top:2rem; align-self:flex-start; }
.mobile-menu__meta{ margin-top:auto; padding-top:2.5rem; color:#aab5c6; font-size:.85rem; letter-spacing:.05em; }

/* Grouped drawer — mirrors the desktop dropdowns, but nothing is hidden
   behind an extra tap. Every destination is one thumb away. */
.mobile-menu__group{ margin-top:1.6rem; }
.mobile-menu__group:first-of-type{ margin-top:0; }
.mobile-menu__label{
  display:block; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--brass-glow); margin-bottom:.4rem;
}
.mobile-menu__group a{ font-size:1.6rem; }
.mobile-menu a.is-active{ color:var(--brass-glow); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:clamp(560px,88vh,900px);
  display:flex; align-items:flex-end;
  overflow:hidden; background:var(--slate-deep);
}
.hero__media{ position:absolute; inset:0; }
.hero__media video,.hero__media img{
  width:100%; height:100%; object-fit:cover;
  animation:heroZoom 22s ease-out forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.06);} to{ transform:scale(1);} }
/* Moderate scrim — keeps the video visible; the type panel below does the heavy lifting */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(9,15,26,.62) 0%, rgba(9,15,26,.42) 38%, rgba(9,15,26,.12) 68%, rgba(9,15,26,.04) 100%),
    linear-gradient(to top, rgba(9,15,26,.86) 0%, rgba(9,15,26,.30) 38%, rgba(9,15,26,0) 66%, rgba(9,15,26,.20) 100%),
    rgba(11,17,29,.12);
}
.hero__inner{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding:0 var(--pad-x) clamp(3.5rem,7vw,6rem);
}
/* Type panel — translucent slate so white text clears AAA on any video frame */
.hero__panel{
  max-width:680px;
  padding:clamp(1.9rem,3.2vw,2.9rem) clamp(1.6rem,3vw,2.8rem) clamp(2.1rem,3.4vw,3rem);
  background:linear-gradient(rgba(22,34,58,.80), rgba(22,34,58,.87));
  -webkit-backdrop-filter:blur(6px) saturate(.92);
  backdrop-filter:blur(6px) saturate(.92);
  border-top:2px solid var(--brass);
  box-shadow:0 24px 70px rgba(6,11,20,.4);
}
.hero__title{
  color:var(--white);
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem,5.5vw,4.7rem); line-height:1.06;
  text-transform:uppercase; letter-spacing:.012em;
  max-width:14ch;
  text-shadow:0 2px 14px rgba(6,11,20,.55);
}
.hero__title em{ font-style:normal; color:var(--brass-glow); }
.hero__sub{
  color:rgba(255,255,255,.94); max-width:44ch; margin-top:1.5rem;
  font-size:clamp(.97rem,1.15vw,1.08rem); line-height:1.8;
  text-shadow:0 1px 12px rgba(6,11,20,.8);
}
.hero__eyebrow{ color:var(--brass-glow); text-shadow:0 1px 10px rgba(6,11,20,.8); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.4rem; }
.hero__eyebrow{ color:var(--brass-light); }

.hero__badges{
  position:relative; z-index:2;
  border-top:1px solid rgba(255,255,255,.16);
  margin-top:clamp(2.5rem,5vw,4rem);
  padding-top:1.6rem;
  display:flex; flex-wrap:wrap; gap:clamp(1.5rem,4vw,3.5rem);
}
.hero__badge{ color:rgba(255,255,255,.8); font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; display:flex; align-items:center; gap:.6rem; }
.hero__badge i{ width:5px; height:5px; background:var(--brass); transform:rotate(45deg); display:block; }

.hero-mute{
  position:absolute; right:var(--pad-x); bottom:clamp(3.5rem,7vw,6rem); z-index:3;
  width:46px; height:46px; border:1px solid rgba(255,255,255,.4); border-radius:50%;
  display:grid; place-items:center; color:#fff; transition:.3s;
}
.hero-mute:hover{ background:rgba(255,255,255,.14); }

/* ---------- Page hero (inner pages) — split: type on cream, photo beside ---------- */
.pagehero{
  display:grid; grid-template-columns:1fr 1.08fr;
  background:var(--ivory-warm);
  border-bottom:1px solid var(--line);
  align-items:stretch;
}
.pagehero__inner{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3rem,6vw,6rem) clamp(1.5rem,4vw,4.5rem) clamp(3rem,6vw,6rem) var(--pad-x);
}
.pagehero__inner h1{
  font-family:var(--serif); font-weight:400; color:var(--ink);
  font-size:clamp(2.2rem,4.4vw,3.9rem); line-height:1.06;
}
.pagehero__inner p{ color:var(--graphite); max-width:44ch; margin-top:1.4rem; font-size:1.02rem; line-height:1.8; }
.pagehero__inner .tick{ margin:1.5rem 0 0; }
.pagehero__media{ position:relative; min-height:clamp(300px,42vh,520px); overflow:hidden; background:var(--linen); }
.pagehero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.crumbs{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-ink); margin-bottom:1.1rem; }
.crumbs a{ color:var(--stone); }
.crumbs a:hover{ color:var(--brass-ink); }

/* ==========================================================================
   Cards & media
   ========================================================================== */
.frame{ position:relative; overflow:hidden; background:var(--linen); }
.frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease); }
.frame:hover img{ transform:scale(1.045); }
.frame--tall{ aspect-ratio:3/4; }
.frame--sq{ aspect-ratio:1/1; }
.frame--wide{ aspect-ratio:4/3; }
.frame--pano{ aspect-ratio:16/10; }
.frame--arch{ border-radius:9999px 9999px 6px 6px; }

.card{ background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column; transition:.4s var(--ease); }
.card:hover{ transform:translateY(-5px); box-shadow:0 20px 48px rgba(28,31,36,.09); border-color:var(--brass-pale); }
.card__body{ padding:1.7rem 1.6rem 1.9rem; display:flex; flex-direction:column; gap:.75rem; flex:1; }
.card__body .h4{ letter-spacing:.15em; }
.card__body p{ font-size:.94rem; color:var(--stone); line-height:1.7; }
.card__body .link-arrow{ margin-top:auto; align-self:flex-start; }

/* Service list rows (inspo right column) */
.svc-rows{ border-top:1px solid var(--line); }
.svc-row{
  display:flex; align-items:center; gap:1.1rem;
  padding:1.15rem .35rem; border-bottom:1px solid var(--line);
  transition:.32s var(--ease);
}
.svc-row:hover{ padding-inline:.9rem .35rem; background:rgba(198,161,99,.075); }
.svc-row__icon{ width:34px; flex:0 0 34px; color:var(--brass); }
.svc-row__icon svg{ width:100%; height:auto; }
.svc-row__label{ font-size:.94rem; letter-spacing:.02em; color:var(--ink); }
.svc-row__arrow{ margin-left:auto; color:var(--brass); transition:transform .32s var(--ease); }
.svc-row:hover .svc-row__arrow{ transform:translateX(5px); }

/* Stat boxes */
.stat{ border:1px solid var(--line); padding:1.05rem 1.4rem; display:flex; align-items:center; gap:1.1rem; background:rgba(255,255,255,.55); }
.stat__num{ font-family:var(--serif); font-size:2.1rem; line-height:1; color:var(--slate); }
.stat__lbl{ font-size:.72rem; letter-spacing:.15em; text-transform:uppercase; color:var(--stone); }

/* Value pillars */
.pillars{ background:var(--ivory-warm); border:1px solid var(--line); padding:clamp(2rem,4vw,3.25rem); }
.pillar{ text-align:center; padding-inline:clamp(.5rem,1.5vw,1.5rem); }
.pillar + .pillar{ border-left:1px solid var(--line); }
.pillar__icon{ color:var(--brass); margin:0 auto 1.1rem; width:42px; }
.pillar h4{ font-family:var(--sans); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:.7rem; color:var(--ink); }
.pillar p{ font-size:.88rem; color:var(--stone); line-height:1.7; }

/* Process steps */
.steps{ counter-reset:s; }
.step{ display:grid; grid-template-columns:auto 1fr; gap:1.5rem; padding:1.6rem 0; border-bottom:1px solid var(--line); }
.step:last-child{ border-bottom:0; }
.step__n{
  counter-increment:s; font-family:var(--serif); font-size:1.5rem; color:var(--brass-ink);
  width:52px; height:52px; border:1px solid var(--brass-pale); border-radius:50%;
  display:grid; place-items:center; flex:0 0 52px;
}
.step__n::before{ content:"0" counter(s); }
.step h3{ margin-bottom:.4rem; }
.step p{ font-size:.94rem; color:var(--stone); }

/* ---------- Company knowledge page ---------- */
.dossier{ display:grid; grid-template-columns:230px 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.dossier__nav{ position:sticky; top:calc(var(--nav-h) + 24px); }
.dossier__nav ul{ list-style:none; margin:0; padding:0; display:grid; gap:.15rem; border-left:1px solid var(--line); }
.dossier__nav a{
  display:block; padding:.5rem 0 .5rem 1.1rem; margin-left:-1px;
  border-left:1px solid transparent;
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--stone);
  transition:.3s var(--ease);
}
.dossier__nav a:hover{ color:var(--ink); border-left-color:var(--brass); }

.dblock{ padding-block:clamp(2rem,3.5vw,3rem); border-bottom:1px solid var(--line); }
.dblock:first-child{ padding-top:0; }
.dblock:last-child{ border-bottom:0; }
.dblock h2{ font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.3rem); font-weight:400; margin-bottom:1.1rem; }
.dblock h3{ font-family:var(--sans); font-size:.78rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink); margin:1.9rem 0 .6rem; }
.dblock p{ max-width:74ch; }
.dblock ul{ max-width:74ch; padding-left:1.1rem; margin:.6rem 0 0; }
.dblock li{ margin-bottom:.45rem; }
.dblock li::marker{ color:var(--brass); }

.facts{ display:grid; grid-template-columns:auto 1fr; gap:.05rem 1.75rem; margin:0; }
.facts dt{
  font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone);
  padding:.7rem 0; border-bottom:1px solid var(--line); white-space:nowrap;
}
.facts dd{ margin:0; padding:.7rem 0; border-bottom:1px solid var(--line); color:var(--ink); font-size:.95rem; }
.facts dd a{ border-bottom:1px solid var(--line); }
.facts dd a:hover{ color:var(--brass-ink); border-color:var(--brass); }

.svc-def{ border-left:2px solid var(--brass-pale); padding-left:1.35rem; margin-bottom:1.9rem; }
.svc-def h3{ margin-top:0; }

.area-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.area-tags span{
  padding:.45rem 1.1rem; border:1px solid var(--line); border-radius:999px;
  font-size:.72rem; letter-spacing:.1em; color:var(--graphite); background:var(--white);
}

@media (max-width:900px){
  .dossier{ grid-template-columns:1fr; }
  .dossier__nav{ position:static; }
  .dossier__nav ul{ display:flex; flex-wrap:wrap; gap:.4rem; border-left:0; }
  .dossier__nav a{ padding:.45rem .95rem; border:1px solid var(--line); border-radius:999px; margin:0; }
  .facts{ grid-template-columns:1fr; gap:0; }
  .facts dt{ border-bottom:0; padding-bottom:0; }
  .facts dd{ padding-top:.25rem; }
}

/* ---------- Family band (homepage, high) ---------- */
.familyband{ background:var(--ivory-warm); border-bottom:1px solid var(--line); overflow:hidden; }
.familyband__grid{
  display:grid; grid-template-columns:1.1fr .9fr; align-items:stretch;
  max-width:var(--maxw); margin-inline:auto;
}
.familyband__copy{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(3rem,5.5vw,5.25rem) clamp(1.75rem,3vw,3rem) clamp(3rem,5.5vw,5.25rem) var(--pad-x);
}
.familyband__kicker{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.75rem,3.2vw,2.9rem); line-height:1.12; color:var(--ink);
  margin:0 0 1.25rem;
}
.familyband__kicker em{ font-style:normal; display:block; color:var(--brass-ink); }
.familyband__names{
  margin-top:1.75rem; padding-top:1.4rem; border-top:1px solid var(--line);
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--stone);
}
.familyband__media{ position:relative; overflow:hidden; min-height:clamp(420px,58vh,640px); background:var(--linen); }
.familyband__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 18%; }
.familyband__tag{
  position:absolute; left:0; bottom:0; z-index:2;
  background:var(--slate); color:#fff;
  padding:.72rem 1.35rem;
  font-size:.63rem; letter-spacing:.22em; text-transform:uppercase;
}

@media (max-width:1080px){
  .familyband__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .familyband__grid{ grid-template-columns:1fr; }
  .familyband__copy{ padding-inline:var(--pad-x); }
  .familyband__media{ min-height:440px; }
}

/* Marquee strip */
.strip{ overflow:hidden; border-block:1px solid var(--line); background:var(--white); padding:1.4rem 0; }
.strip__track{ display:flex; gap:clamp(2.5rem,6vw,6rem); width:max-content; animation:slide 38s linear infinite; align-items:center; }
.strip:hover .strip__track{ animation-play-state:paused; }
.strip__track span{ font-family:var(--serif); font-size:clamp(1.15rem,2.2vw,1.9rem); color:var(--stone); white-space:nowrap; display:flex; align-items:center; gap:clamp(2.5rem,6vw,6rem); }
.strip__track i{ width:6px; height:6px; background:var(--brass); transform:rotate(45deg); display:block; }
@keyframes slide{ to{ transform:translateX(-50%);} }

/* Vendor logos */
.vendor-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
/* Column-count variants live here rather than as inline styles — an inline
   grid-template-columns outranks every media query and stayed 5-up on phones. */
.vendor-grid--5{ grid-template-columns:repeat(5,1fr); }
.vendor-grid--2{ grid-template-columns:repeat(2,1fr); }
.vendor-cell{ background:var(--white); aspect-ratio:16/7; display:grid; place-items:center; padding:1.5rem; transition:.35s; overflow:hidden; }
.vendor-cell:hover{ background:var(--ivory-warm); }
.vendor-cell img{
  max-height:var(--logo-h,56px); max-width:100%; width:auto; object-fit:contain;
  /* supplied logos are dark-on-white, not transparent — multiply drops the
     white box so they sit clean on the warm hover background too */
  mix-blend-mode:multiply;
  filter:grayscale(1); opacity:.62; transition:.35s var(--ease);
}
.vendor-cell:hover img{ filter:none; opacity:1; }

/* Each supplied logo has a different aspect ratio and a different amount of
   built-in whitespace, so a single max-height makes them read at wildly
   different sizes. These per-brand heights normalise the optical weight —
   tune the number, not the markup, if one looks off. */
.vendor-cell[data-logo="omega"]      { --logo-h:78px; }
.vendor-cell[data-logo="diamond"]    { --logo-h:76px; }
/* Mantra ships as a square file with the wordmark sitting low in a sea of
   whitespace. Scaling it to match the others overflows the cell, so instead
   we crop to the wordmark: cover-fit a short, full-width window and push the
   focal point down the image. */
.vendor-cell[data-logo="mantra"] img{
  max-height:none; height:48px; width:100%;
  object-fit:cover; object-position:center 48%;
}
.vendor-cell[data-logo="waypoint"]   { --logo-h:44px; }
.vendor-cell[data-logo="naturekast"] { --logo-h:48px; }
.vendor-cell[data-logo="topknobs"]   { --logo-h:72px; }
.vendor-cell[data-logo="jeffrey"]    { --logo-h:66px; }

/* typographic stand-in for brands without a supplied logo */
.vendor-word{ text-align:center; color:var(--stone); transition:color .35s var(--ease); }
.vendor-word b{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.35rem); letter-spacing:.06em; color:var(--graphite);
  transition:color .35s var(--ease);
}
.vendor-word span{ display:block; font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; margin-top:.35rem; }
.vendor-cell:hover .vendor-word b{ color:var(--ink); }
.vendor-cell:hover .vendor-word{ color:var(--brass-ink); }

/* Gallery */
.gal{ columns:3; column-gap:clamp(.6rem,1.2vw,1.1rem); }
.gal figure{ margin:0 0 clamp(.6rem,1.2vw,1.1rem); break-inside:avoid; position:relative; overflow:hidden; cursor:zoom-in; background:var(--linen); }
.gal img{ width:100%; height:auto; transition:transform .9s var(--ease), filter .5s; }
.gal figure:hover img{ transform:scale(1.05); }
.gal figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top,rgba(23,35,58,.55),transparent 45%);
  opacity:0; transition:.4s;
}
.gal figure:hover::after{ opacity:1; }
.gal figcaption{
  position:absolute; left:1.1rem; bottom:1rem; z-index:2;
  color:#fff; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  opacity:0; transform:translateY(8px); transition:.4s var(--ease);
}
.gal figure:hover figcaption{ opacity:1; transform:none; }

.filters{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:clamp(2rem,4vw,3rem); }
.chip{
  padding:.62rem 1.5rem; border:1px solid var(--line); border-radius:999px;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone);
  background:var(--white); transition:.32s var(--ease);
}
.chip:hover{ border-color:var(--brass); color:var(--ink); }
.chip.is-on{ background:var(--slate); border-color:var(--slate); color:var(--white); }

/* Lightbox */
.lb{
  position:fixed; inset:0; z-index:200; background:rgba(15,20,32,.965);
  display:grid; place-items:center; padding:clamp(1rem,4vw,3.5rem);
  opacity:0; visibility:hidden; transition:.35s var(--ease);
}
.lb.is-open{ opacity:1; visibility:visible; }
.lb img{ max-width:100%; max-height:86vh; object-fit:contain; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.lb__x,.lb__prev,.lb__next{
  position:absolute; width:52px; height:52px; border:1px solid rgba(255,255,255,.28);
  border-radius:50%; display:grid; place-items:center; color:#fff; transition:.3s;
}
.lb__x:hover,.lb__prev:hover,.lb__next:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.lb__x{ top:clamp(1rem,3vw,2.2rem); right:clamp(1rem,3vw,2.2rem); }
.lb__prev{ left:clamp(.6rem,2.5vw,2.2rem); top:50%; transform:translateY(-50%); }
.lb__next{ right:clamp(.6rem,2.5vw,2.2rem); top:50%; transform:translateY(-50%); }
.lb__count{ position:absolute; bottom:clamp(1rem,3vw,2.2rem); left:50%; transform:translateX(-50%); color:rgba(255,255,255,.65); font-size:.72rem; letter-spacing:.22em; }

/* Video section */
.vidblock{ position:relative; overflow:hidden; background:var(--slate-deep); }
.vidblock video{ width:100%; height:100%; object-fit:cover; }
.vidblock--framed{ aspect-ratio:16/10; border:1px solid var(--line); }
.play-badge{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:84px; height:84px; border-radius:50%; background:rgba(255,255,255,.9);
  display:grid; place-items:center; color:var(--slate); z-index:3;
  transition:.35s var(--ease);
}
.play-badge:hover{ transform:translate(-50%,-50%) scale(1.08); background:#fff; }
.play-badge.is-hidden{ opacity:0; visibility:hidden; }

/* Testimonial */
.quote-card{ background:var(--white); border:1px solid var(--line); padding:clamp(1.8rem,3vw,2.6rem); display:flex; flex-direction:column; gap:1.2rem; height:100%; }
.stars{ color:var(--brass-ink); letter-spacing:.2em; font-size:.85rem; }
.quote-card p{ font-family:var(--serif); font-size:1.12rem; line-height:1.6; color:var(--ink); font-style:italic; }
.quote-card cite{ font-style:normal; font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); margin-top:auto; }

/* CTA band */
.cta-band{ background:var(--slate); color:#fff; }
.cta-band .wrap{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; padding-block:clamp(2.5rem,5vw,3.75rem); }
.cta-band h2{ font-family:var(--serif); font-weight:300; font-size:clamp(1.8rem,3.2vw,2.75rem); color:#fff; }
.cta-band p{ color:rgba(255,255,255,.7); font-size:.95rem; margin-top:.4rem; }

/* Forms */
.form{ display:grid; gap:1.15rem; }
.field label{ display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); margin-bottom:.5rem; }
.field input,.field select,.field textarea{
  width:100%; padding:.95rem 1.05rem;
  border:1px solid var(--line); border-radius:2px; background:var(--white);
  font-family:var(--sans); font-size:.95rem; font-weight:300; color:var(--ink);
  transition:.3s;
}
.field textarea{ min-height:150px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:0; border-color:var(--brass); box-shadow:0 0 0 3px rgba(198,161,99,.20); }
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem; }

.info-list{ display:grid; gap:1.5rem; }
.info-item{ display:grid; grid-template-columns:auto 1fr; gap:1.1rem; align-items:start; }
.info-item__ic{ color:var(--brass); width:22px; margin-top:3px; }
.info-item h4{ margin-bottom:.25rem; }
.info-item p,.info-item a{ font-size:.95rem; color:var(--stone); }
.info-item a:hover{ color:var(--brass-ink); }

/* Team */
.member{ text-align:left; }
.member .frame{ margin-bottom:1.1rem; }
.member h3{ font-size:1.35rem; margin-bottom:.15rem; }
.member .role{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-ink); }
.member p{ font-size:.92rem; color:var(--stone); margin-top:.7rem; }

/* Accordion */
.acc{ border-top:1px solid var(--line); }
.acc__item{ border-bottom:1px solid var(--line); }
.acc__q{ width:100%; text-align:left; padding:1.35rem 2.5rem 1.35rem 0; position:relative; font-size:1.02rem; color:var(--ink); }
.acc__q::after{ content:"+"; position:absolute; right:.3rem; top:50%; transform:translateY(-50%); color:var(--brass-ink); font-size:1.35rem; font-weight:300; transition:.3s; }
.acc__item.is-open .acc__q::after{ content:"–"; }
.acc__a{ max-height:0; overflow:hidden; transition:max-height .45s var(--ease); }
.acc__a p{ padding-bottom:1.4rem; font-size:.95rem; color:var(--stone); max-width:70ch; }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer{ background:var(--slate-deep); color:#aab5c6; padding-block:clamp(3.25rem,6vw,5rem) 0; font-size:.9rem; }
.footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:clamp(2rem,4vw,3.5rem); }
.footer__logo{ height:40px; width:auto; margin-bottom:1.35rem; }
.footer h4{ color:#fff; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; margin-bottom:1.3rem; font-family:var(--sans); font-weight:500; }
.footer ul{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.footer a:hover{ color:var(--brass-glow); }
.footer p{ line-height:1.8; }
.social{ display:flex; gap:.7rem; margin-top:1.5rem; }
.social a{
  width:38px; height:38px; border:1px solid rgba(255,255,255,.18); border-radius:50%;
  display:grid; place-items:center; color:#c3ccd9; transition:.3s var(--ease);
}
.social a:hover{ background:var(--brass); border-color:var(--brass); color:#fff; }
.footer__bar{
  margin-top:clamp(2.5rem,5vw,4rem); border-top:1px solid rgba(255,255,255,.11);
  padding-block:1.5rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.78rem; color:#a3aec0;
}

/* Google reviews badge — sitewide trust signal in the footer bar */
.gbadge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem .9rem; border:1px solid rgba(255,255,255,.18); border-radius:2px;
  color:#dbe2ee; font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  transition:.3s var(--ease);
}
.gbadge:hover{ border-color:var(--brass); color:#fff; background:rgba(255,255,255,.06); }
.gbadge svg{ flex:0 0 15px; }

/* Sticky mobile call bar */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:var(--slate); display:none;
  grid-template-columns:1fr 1fr; gap:1px;
}
.callbar a{
  padding:1rem; text-align:center; color:#fff;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.callbar a:last-child{ background:var(--brass); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.1s; }
.reveal[data-d="2"]{ transition-delay:.2s; }
.reveal[data-d="3"]{ transition-delay:.3s; }
.reveal[data-d="4"]{ transition-delay:.4s; }

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

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .nav__menu{ display:none; }
  .nav__phone{ display:none; }
  .burger{ display:block; }
  .footer__grid{ grid-template-columns:1fr 1fr; }
  .g-4{ grid-template-columns:repeat(2,1fr); }
  .vendor-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
  :root{ --nav-h:70px; }
  .split,.split--even,.pagehero{ grid-template-columns:1fr; }
  .pagehero__inner{ padding-inline:var(--pad-x); }
  .pagehero__media{ min-height:280px; order:-1; }
  .split--rev > *:first-child{ order:0; }
  .mosaic{ grid-template-columns:1fr 1fr; }
  .g-3{ grid-template-columns:1fr 1fr; }
  .gal{ columns:2; }
  .pillar + .pillar{ border-left:0; border-top:1px solid var(--line); padding-top:2rem; margin-top:2rem; }
  .form__row{ grid-template-columns:1fr; }
  .topbar{ gap:1.25rem; font-size:.62rem; }
  .callbar{ display:grid; }
  body{ padding-bottom:52px; }
  .hero-mute{ bottom:auto; top:calc(var(--nav-h) + 1.5rem); }
}
@media (max-width:600px){
  body{ font-size:16px; }
  .g-2,.g-3,.g-4,.mosaic{ grid-template-columns:1fr; }
  .gal{ columns:1; }
  .vendor-grid{ grid-template-columns:repeat(2,1fr); }
  .footer__grid{ grid-template-columns:1fr; }
  .cta-band .wrap{ flex-direction:column; align-items:flex-start; }
  .topbar span:nth-child(2){ display:none; }
  .hero__badges{ gap:.8rem 1.5rem; }
}

/* ==========================================================================
   MOBILE POLISH
   Phone-specific corrections layered over the breakpoints above.
   ========================================================================== */

/* --- Header -------------------------------------------------------------
   The logo is a flex item next to a long CTA; without an explicit basis the
   browser shrinks the <a> and squashes the image to an unreadable sliver. */
.nav__logo{ flex:0 0 auto; }
.nav__logo img{ display:block; }

@media (max-width:1080px){
  .nav__inner{ gap:1rem; }
  .nav__cta{ gap:.75rem; }
  .nav__cta .btn{ padding:.75rem 1.05rem; font-size:.64rem; letter-spacing:.12em; white-space:nowrap; }
  /* 44px hit area for the burger without moving the bars off-centre */
  .burger{ width:44px; height:44px; margin-right:-10px; }
  .burger span{ left:6px; width:32px; }
  .burger span:nth-child(1){ top:14px; }
  .burger span:nth-child(2){ top:21px; }
  .burger span:nth-child(3){ top:28px; }
  .burger.is-open span:nth-child(1){ top:21px; transform:rotate(45deg); }
  .burger.is-open span:nth-child(3){ top:21px; transform:rotate(-45deg); }
}

@media (max-width:600px){
  /* The sticky bar at the bottom already carries Call + Book a Visit, so the
     header CTA is a duplicate that costs the logo its legibility. */
  .nav__cta .btn{ display:none; }
  .nav__inner{ gap:.75rem; }
  .nav__logo img{ height:34px; }
  .nav.is-stuck .nav__logo img{ height:30px; }
  .topbar{ gap:1rem; font-size:.6rem; letter-spacing:.12em; }
}

/* --- Forms --------------------------------------------------------------
   iOS zooms the whole page when a focused input renders below 16px. */
@media (max-width:860px){
  .field input,.field select,.field textarea{ font-size:16px; padding:.9rem 1rem; }
  .field textarea{ min-height:120px; }
  .field label{ font-size:.64rem; }
  .form{ gap:1rem; }
}

/* --- Sticky call bar ----------------------------------------------------
   Real tap height, and clearance for the iPhone home indicator. */
.callbar a{ min-height:54px; }
@media (max-width:860px){
  .callbar{ padding-bottom:env(safe-area-inset-bottom, 0px); }
  body{ padding-bottom:calc(54px + env(safe-area-inset-bottom, 0px)); }
}

/* --- Buttons ------------------------------------------------------------
   Full-width stacked CTAs read better than two half-width ones on a phone. */
@media (max-width:600px){
  .btn{ padding:.95rem 1.4rem; }
  .hero__actions{ flex-direction:column; align-items:stretch; gap:.7rem; }
  .hero__actions .btn{ justify-content:center; width:100%; }
}

/* --- Consult popup ------------------------------------------------------ */
@media (max-width:600px){
  .consult{ padding:.75rem; }
  .consult__panel{ max-height:94vh; }
  .consult__body{ padding:1.5rem 1.25rem 1.75rem; }
  .consult__media{ min-height:120px; }
  .consult__opts{ gap:.5rem; }
  .consult__opt{ padding:.9rem 1rem; }   /* ~48px tall */
  .thanks__panel{ padding:2rem 1.35rem 2.25rem; }
  .thanks__actions .btn{ width:100%; justify-content:center; }
}

/* --- Vendor logo grids --------------------------------------------------
   Five brands don't fit across a phone; step them down rather than squashing
   each logo into a 70px column. */
@media (max-width:1080px){
  .vendor-grid--5{ grid-template-columns:repeat(3,1fr); }
  .vendor-grid--2{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .vendor-grid,
  .vendor-grid--5,
  .vendor-grid--2{ grid-template-columns:repeat(2,1fr); }
  .vendor-cell{ padding:1.15rem; aspect-ratio:16/8; }
}

/* --- Overflow guard -----------------------------------------------------
   Marquee strips and wide grids can push the document sideways; a phone
   viewport has no tolerance for it. */
@media (max-width:860px){
  html,body{ overflow-x:hidden; }
}

/* ==========================================================================
   MOTION LAYER
   ========================================================================== */

/* ---- Scroll progress bar ---- */
.progress{
  position:fixed; top:0; left:0; height:2px; z-index:120;
  width:0%; background:linear-gradient(90deg,var(--brass),var(--brass-light));
  transition:width .12s linear; pointer-events:none;
}

/* ---- Reveal variants ---- */
.reveal,[data-anim]{ will-change:opacity,transform; }
[data-anim]{ opacity:0; transition:opacity .95s var(--ease), transform .95s var(--ease), clip-path 1.1s var(--ease); }
[data-anim="up"]     { transform:translateY(34px); }
[data-anim="down"]   { transform:translateY(-28px); }
[data-anim="left"]   { transform:translateX(-42px); }
[data-anim="right"]  { transform:translateX(42px); }
[data-anim="scale"]  { transform:scale(.94); }
[data-anim="blur"]   { filter:blur(9px); transition:opacity .9s var(--ease), filter .9s var(--ease); }
[data-anim].is-in{ opacity:1; transform:none; filter:none; }

/* image curtain wipe */
[data-anim="wipe"]{ opacity:1; clip-path:inset(0 0 100% 0); }
[data-anim="wipe"].is-in{ clip-path:inset(0 0 0 0); }
[data-anim="wipe-l"]{ opacity:1; clip-path:inset(0 100% 0 0); }
[data-anim="wipe-l"].is-in{ clip-path:inset(0 0 0 0); }

/* auto-stagger children */
[data-stagger] > *{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-stagger].is-in > *{ opacity:1; transform:none; }
[data-stagger].is-in > *:nth-child(1){ transition-delay:.05s }
[data-stagger].is-in > *:nth-child(2){ transition-delay:.14s }
[data-stagger].is-in > *:nth-child(3){ transition-delay:.23s }
[data-stagger].is-in > *:nth-child(4){ transition-delay:.32s }
[data-stagger].is-in > *:nth-child(5){ transition-delay:.41s }
[data-stagger].is-in > *:nth-child(6){ transition-delay:.50s }
[data-stagger].is-in > *:nth-child(7){ transition-delay:.59s }
[data-stagger].is-in > *:nth-child(8){ transition-delay:.68s }
[data-stagger].is-in > *:nth-child(n+9){ transition-delay:.75s }

/* ---- Ornament draw-in ---- */
.tick{ transform-origin:left center; transform:scaleX(0); transition:transform .85s var(--ease) .18s; }
.is-in .tick, .reveal.is-in .tick, .pagehero .tick{ transform:scaleX(1); }
.rule::before,.rule::after{ transform-origin:center; transition:transform .9s var(--ease) .1s; }
.rule i{ transition:transform .6s var(--ease) .5s, opacity .6s .5s; }

/* ---- Eyebrow letterspacing settle ---- */
.eyebrow{ transition:letter-spacing .9s var(--ease), opacity .7s; }
[data-anim] .eyebrow, .reveal .eyebrow{ letter-spacing:.42em; }
[data-anim].is-in .eyebrow, .reveal.is-in .eyebrow{ letter-spacing:.28em; }

/* ---- Hero entrance ---- */
.hero__panel{ animation:panelIn 1.15s var(--ease) .25s both; }
@keyframes panelIn{ from{ opacity:0; transform:translateY(38px); } to{ opacity:1; transform:none; } }
.hero__panel > *{ animation:heroLine .9s var(--ease) both; }
.hero__panel > *:nth-child(1){ animation-delay:.5s }
.hero__panel > *:nth-child(2){ animation-delay:.62s }
.hero__panel > *:nth-child(3){ animation-delay:.76s }
.hero__panel > *:nth-child(4){ animation-delay:.9s }
@keyframes heroLine{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }
.hero__badges{ animation:heroLine 1s var(--ease) 1.05s both; }
.hero-mute{ animation:heroLine .8s var(--ease) 1.3s both; }

/* scroll cue */
.scrollcue{
  position:absolute; left:50%; bottom:1.4rem; z-index:3; transform:translateX(-50%);
  width:1px; height:46px; background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.75));
  animation:cue 2.4s ease-in-out infinite;
}
@keyframes cue{ 0%,100%{ opacity:.25; transform:translateX(-50%) scaleY(.55);} 50%{ opacity:1; transform:translateX(-50%) scaleY(1);} }

/* ---- Nav condense on scroll ---- */
.nav{ transition:box-shadow .35s, background .35s; }
.nav__inner{ transition:height .4s var(--ease); }
.nav.is-stuck .nav__inner{ height:calc(var(--nav-h) - 14px); }
.nav__logo img{ transition:height .4s var(--ease); }
.nav.is-stuck .nav__logo img{ height:32px; }
.nav__menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
  background:var(--brass); transition:width .38s var(--ease);
}
.nav__menu a{ position:relative; }
.nav__menu a:hover::after{ width:100%; }

/* ---- Button sheen ---- */
.btn{ position:relative; overflow:hidden; }
.btn::before{
  content:""; position:absolute; inset:0 auto 0 -70%;
  width:55%; transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  transition:left .65s var(--ease); pointer-events:none;
}
.btn:hover::before{ left:125%; }
.btn > *{ position:relative; z-index:1; }
.btn--brass::before{ background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); }

/* ---- Card / media micro-interactions ---- */
.card{ transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s; }
.card:hover{ transform:translateY(-7px); }
.card .frame img{ transition:transform 1.15s var(--ease); }
.card:hover .frame img{ transform:scale(1.07); }
.frame{ transition:box-shadow .45s var(--ease); }

.vendor-cell img{ transition:filter .4s var(--ease), opacity .4s var(--ease), transform .4s var(--ease); }
.vendor-cell:hover img{ transform:scale(1.07); }

.svc-row{ position:relative; }
.svc-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--brass); transform:scaleY(0); transform-origin:center;
  transition:transform .38s var(--ease);
}
.svc-row:hover::before{ transform:scaleY(1); }

.stat{ transition:transform .4s var(--ease), border-color .4s, background .4s; }
.stat:hover{ transform:translateY(-4px); border-color:var(--brass); background:#fff; }

.pillar__icon{ transition:transform .5s var(--ease); }
.pillar:hover .pillar__icon{ transform:translateY(-5px) scale(1.07); }

.step__n{ transition:background .4s var(--ease), color .4s, transform .4s var(--ease); }
.step:hover .step__n{ background:var(--brass); color:#fff; transform:scale(1.06); }

.chip{ transition:.32s var(--ease); }
.chip:hover{ transform:translateY(-2px); }

.social a{ transition:.35s var(--ease); }
.social a:hover{ transform:translateY(-3px) rotate(-6deg); }

.member .frame img{ transition:transform 1.2s var(--ease), filter .6s; }
.member:hover .frame img{ transform:scale(1.05); }

/* gallery stagger */
.gal figure{ opacity:0; transform:translateY(26px) scale(.985); transition:opacity .75s var(--ease), transform .75s var(--ease); }
.gal figure.is-shown{ opacity:1; transform:none; }

/* ---- Parallax media ---- */
.pagehero__media img,[data-parallax]{ will-change:transform; }

/* ---- Video blocks ---- */
.vidblock{ position:relative; }
.vidblock::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.sound-toggle{
  position:absolute; right:1rem; bottom:1rem; z-index:4;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:999px;
  background:rgba(16,25,42,.72); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.28); color:#fff;
  font-size:.62rem; letter-spacing:.18em; text-transform:uppercase;
  transition:.3s var(--ease);
}
.sound-toggle:hover{ background:rgba(16,25,42,.9); border-color:#fff; }
.playing-dot{ width:6px; height:6px; border-radius:50%; background:var(--brass-light); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:.35; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.15);} }

/* ---- Count-up numerals ---- */
.stat__num{ font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion:reduce){
  [data-anim],[data-stagger] > *,.gal figure{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; }
  .hero__panel,.hero__panel > *,.hero__badges,.hero-mute{ animation:none !important; opacity:1 !important; transform:none !important; }
  .tick{ transform:scaleX(1) !important; }
  .scrollcue,.playing-dot,.strip__track{ animation:none !important; }
  .progress{ display:none; }
}

/* ==========================================================================
   CONSULT POPUP
   ========================================================================== */
.consult{
  position:fixed; inset:0; z-index:150;
  display:grid; place-items:center; padding:clamp(1rem,4vw,2.5rem);
  background:rgba(12,19,32,.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.consult.is-open{ opacity:1; visibility:visible; }
.consult__panel{
  position:relative; width:min(920px,100%); max-height:92vh; overflow:auto;
  background:var(--ivory); border-top:3px solid var(--brass);
  box-shadow:0 40px 100px rgba(6,11,20,.45);
  display:grid; grid-template-columns:.85fr 1fr;
  transform:translateY(22px) scale(.985); transition:transform .45s var(--ease);
}
.consult.is-open .consult__panel{ transform:none; }
.consult__media{ position:relative; overflow:hidden; background:var(--linen); min-height:100%; }
.consult__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.consult__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,19,32,.85), rgba(12,19,32,.15) 60%);
}
.consult__quote{
  position:absolute; left:1.5rem; right:1.5rem; bottom:1.5rem; z-index:2; color:#fff;
}
.consult__quote p{ font-family:var(--serif); font-style:italic; font-size:1.02rem; line-height:1.5; }
.consult__quote cite{ font-style:normal; font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass-glow); display:block; margin-top:.6rem; }
.consult__body{ padding:clamp(1.75rem,3vw,2.75rem); }
.consult__body h2{ font-family:var(--serif); font-weight:400; font-size:clamp(1.5rem,2.4vw,2.05rem); line-height:1.14; margin-bottom:.7rem; }
.consult__body > p{ font-size:.94rem; color:var(--stone); margin-bottom:1.5rem; }

.consult__opts{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-bottom:1.4rem; }
.consult__opt{
  display:flex; align-items:center; gap:.7rem; text-align:left;
  padding:.85rem 1rem; border:1px solid var(--line); background:var(--white);
  font-size:.86rem; color:var(--graphite); transition:.28s var(--ease); border-radius:2px;
}
.consult__opt svg{ color:var(--brass-ink); flex:0 0 20px; }
.consult__opt:hover{ border-color:var(--brass); transform:translateY(-2px); }
.consult__opt.is-picked{ background:var(--slate); border-color:var(--slate); color:#fff; }
.consult__opt.is-picked svg{ color:var(--brass-glow); }

.consult__step2{ display:none; }
.consult__panel.step-2 .consult__step1{ display:none; }
.consult__panel.step-2 .consult__step2{ display:block; }

.consult__x{
  position:absolute; top:.75rem; right:.75rem; z-index:5;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink);
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  transition:.28s var(--ease);
}
.consult__x:hover{ background:var(--white); border-color:var(--brass); transform:rotate(90deg); }
.consult__note{ font-size:.8rem; color:var(--stone); margin-top:1rem; }
.consult__back{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); margin-bottom:1rem; display:inline-block; }
.consult__back:hover{ color:var(--brass-ink); }
.consult__success{ text-align:center; padding:clamp(2rem,4vw,3rem) 0; }
.consult__success svg{ color:var(--brass-ink); margin-bottom:1rem; }

@media (max-width:760px){
  .consult__panel{ grid-template-columns:1fr; }
  .consult__media{ min-height:170px; }
  .consult__quote{ display:none; }
  .consult__opts{ grid-template-columns:1fr; }
}

/* form states shared by page forms + popup */
.form-note{ font-size:.88rem; margin-top:.6rem; }
.form-note--ok{ color:var(--brass-ink); }
.form-note--err{ color:#a4362f; }

/* ==========================================================================
   THANK-YOU MODAL — fires after any successful form submission
   ========================================================================== */
.thanks{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center; padding:clamp(1rem,4vw,2.5rem);
  background:rgba(12,19,32,.74); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:opacity .35s var(--ease), visibility .35s;
}
.thanks.is-open{ opacity:1; visibility:visible; }
.thanks__panel{
  position:relative; width:min(470px,100%); max-height:92vh; overflow:auto;
  background:var(--ivory); border-top:3px solid var(--brass);
  box-shadow:0 40px 100px rgba(6,11,20,.45);
  padding:clamp(2.1rem,4vw,2.9rem) clamp(1.4rem,3.5vw,2.6rem);
  text-align:center;
  transform:translateY(22px) scale(.985); transition:transform .45s var(--ease);
}
.thanks.is-open .thanks__panel{ transform:none; }
.thanks__mark{
  width:60px; height:60px; margin:0 auto 1.2rem; border-radius:50%;
  display:grid; place-items:center; color:var(--brass-ink);
  border:1px solid var(--brass); background:var(--white);
}
.thanks__mark svg path{ stroke-dasharray:22; stroke-dashoffset:22; }
.thanks.is-open .thanks__mark svg path{ animation:thanksTick .55s var(--ease) .22s forwards; }
@keyframes thanksTick{ to{ stroke-dashoffset:0; } }
.thanks__eyebrow{
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--brass-ink); display:block; margin-bottom:.7rem;
}
.thanks__panel h2{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.45rem,2.4vw,1.9rem); line-height:1.15; margin-bottom:.65rem;
}
.thanks__panel p{ font-size:.94rem; color:var(--stone); line-height:1.62; margin:0 auto; max-width:34ch; }
.thanks__actions{ margin-top:1.7rem; display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.thanks__x{
  position:absolute; top:.75rem; right:.75rem; z-index:5;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; color:var(--ink);
  background:rgba(255,255,255,.9); border:1px solid var(--line);
  transition:.28s var(--ease);
}
.thanks__x:hover{ background:var(--white); border-color:var(--brass); transform:rotate(90deg); }

@media (prefers-reduced-motion:reduce){
  .thanks, .thanks__panel{ transition:none; }
  .thanks__mark svg path{ animation:none; stroke-dashoffset:0; }
}
.is-sending{ opacity:.6; pointer-events:none; }

/* ==========================================================================
   REVIEW WALL
   ========================================================================== */
.revwall{ columns:3; column-gap:clamp(.8rem,1.5vw,1.35rem); }
.rev{
  margin:0 0 clamp(.8rem,1.5vw,1.35rem); break-inside:avoid;
  background:var(--white); border:1px solid var(--line);
  padding:clamp(1.3rem,2vw,1.75rem);
  display:flex; flex-direction:column; gap:.85rem;
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease), transform .7s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.rev.is-shown{ opacity:1; transform:none; }
.rev:hover{ box-shadow:0 18px 44px rgba(28,31,36,.09); border-color:var(--brass-pale); }
.rev blockquote{
  margin:0; font-family:var(--serif); font-size:1.06rem; line-height:1.55; color:var(--ink);
}
.rev blockquote::before{ content:"\201C"; color:var(--brass); font-size:1.6em; line-height:0; vertical-align:-.28em; margin-right:.1em; }
.rev figcaption{ margin-top:auto; padding-top:.4rem; border-top:1px solid var(--line); }
.rev figcaption b{ display:block; font-weight:400; font-size:.9rem; color:var(--ink); }
.rev figcaption span{ display:block; font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); margin-top:.3rem; }

@media (max-width:900px){ .revwall{ columns:2; } }
@media (max-width:600px){ .revwall{ columns:1; } }

/* ==========================================================================
   TRUST BAR + EXTRA MOTION
   ========================================================================== */
.trustbar{
  background:var(--slate-deep); color:#e3e9f2;
  padding:.9rem 0; overflow:hidden; border-bottom:1px solid rgba(255,255,255,.08);
}
.trustbar__track{
  display:flex; gap:clamp(2rem,4vw,4rem); width:max-content;
  animation:slide 46s linear infinite; align-items:center;
}
.trustbar:hover .trustbar__track{ animation-play-state:paused; }
.trustbar__track span{
  display:flex; align-items:center; gap:clamp(2rem,4vw,4rem);
  font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
}
.trustbar__track i{ width:5px; height:5px; background:var(--brass-light); transform:rotate(45deg); display:block; }

/* text mask reveal for headings */
[data-anim="mask"]{ opacity:1; }
[data-anim="mask"] > *{
  display:block; clip-path:inset(0 0 110% 0); transform:translateY(.35em);
  transition:clip-path 1s var(--ease), transform 1s var(--ease);
}
[data-anim="mask"].is-in > *{ clip-path:inset(-20% 0 -20% 0); transform:none; }

/* subtle lift on any bordered surface */
.quote-card{ transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .4s; }
.quote-card:hover{ transform:translateY(-5px); box-shadow:0 18px 44px rgba(28,31,36,.08); border-color:var(--brass-pale); }

.svc-def{ transition:border-color .4s var(--ease), padding-left .4s var(--ease); }
.svc-def:hover{ border-color:var(--brass); padding-left:1.65rem; }

.area-tags span{ transition:.32s var(--ease); }
.area-tags span:hover{ border-color:var(--brass); color:var(--ink); transform:translateY(-2px); }

.dblock h2{ transition:color .4s; }
.facts dd{ transition:color .3s; }
.facts dt:hover + dd{ color:var(--brass-ink); }

/* badge for trust claims */
.claim{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.5rem 1.05rem; border:1px solid var(--brass-pale); border-radius:999px;
  background:rgba(198,161,99,.09);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass-ink);
}
.claim i{ width:5px; height:5px; background:var(--brass); transform:rotate(45deg); display:block; }
.claim--light{ border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:var(--brass-glow); }
.claims-row{ display:flex; flex-wrap:wrap; gap:.6rem; }

@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1 !important; transform:none !important; }
  .trustbar__track{ animation:none !important; }
  [data-anim="mask"] > *{ clip-path:none !important; transform:none !important; }
}

/* ==========================================================================
   MOTION — round two
   ========================================================================== */

/* section headings rise + settle */
[data-anim="rise"]{ opacity:0; transform:translateY(40px) scale(.985); }
[data-anim="rise"].is-in{ opacity:1; transform:none; }

/* image "ken burns" drift while in view */
.frame--drift img{ animation:drift 18s ease-in-out infinite alternate; }
@keyframes drift{ from{ transform:scale(1.02) translate3d(0,0,0);} to{ transform:scale(1.09) translate3d(-1.2%,-1.4%,0);} }

/* card border sweep */
.card{ position:relative; }
.card::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--brass),var(--brass-light));
  transition:width .55s var(--ease);
}
.card:hover::after{ width:100%; }

/* stat numbers pop on hover */
.stat__num{ transition:color .35s var(--ease), transform .35s var(--ease); display:inline-block; }
.stat:hover .stat__num{ color:var(--brass-ink); transform:scale(1.06); }

/* claims shimmer in */
.claim{ transition:transform .35s var(--ease), border-color .35s, background .35s; }
.claim:hover{ transform:translateY(-2px); border-color:var(--brass); }
.claims-row .claim{ opacity:0; transform:translateY(12px); animation:claimIn .7s var(--ease) forwards; }
.claims-row .claim:nth-child(1){ animation-delay:.9s }
.claims-row .claim:nth-child(2){ animation-delay:1.02s }
.claims-row .claim:nth-child(3){ animation-delay:1.14s }
@keyframes claimIn{ to{ opacity:1; transform:none; } }

/* pagehero type sequence */
.pagehero__inner > *{ animation:heroLine .85s var(--ease) both; }
.pagehero__inner > *:nth-child(1){ animation-delay:.12s }
.pagehero__inner > *:nth-child(2){ animation-delay:.22s }
.pagehero__inner > *:nth-child(3){ animation-delay:.32s }
.pagehero__inner > *:nth-child(4){ animation-delay:.42s }
.pagehero__inner > *:nth-child(5){ animation-delay:.52s }
.pagehero__media img{ animation:mediaIn 1.3s var(--ease) both; }
@keyframes mediaIn{ from{ opacity:0; clip-path:inset(0 0 0 100%);} to{ opacity:1; clip-path:inset(0 0 0 0);} }

/* accordion chevron + row hover */
.acc__item{ transition:background .35s var(--ease); }
.acc__item:hover{ background:rgba(198,161,99,.05); }
.acc__q{ transition:padding-left .35s var(--ease), color .3s; }
.acc__item:hover .acc__q{ padding-left:.65rem; color:var(--ink); }

/* footer link slide */
.footer ul a{ display:inline-block; transition:transform .3s var(--ease), color .3s; }
.footer ul a:hover{ transform:translateX(4px); }

/* nav logo subtle scale on hover */
.nav__logo{ display:inline-block; }
.nav__logo img{ transition:height .4s var(--ease), opacity .3s; }
.nav__logo:hover img{ opacity:.78; }

/* chips ripple-ish active state */
.chip{ position:relative; overflow:hidden; }
.chip::before{
  content:""; position:absolute; inset:0; background:var(--slate);
  transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); z-index:-1;
}
.chip.is-on::before{ transform:scaleX(1); }

/* review wall cards tilt in */
.rev:nth-child(odd){ transform:translateY(24px) rotate(-.25deg); }
.rev:nth-child(even){ transform:translateY(24px) rotate(.25deg); }
.rev.is-shown{ transform:none !important; }

@media (prefers-reduced-motion:reduce){
  [data-anim="rise"]{ opacity:1 !important; transform:none !important; }
  .frame--drift img{ animation:none !important; }
  .claims-row .claim{ opacity:1 !important; transform:none !important; animation:none !important; }
  .pagehero__inner > *,.pagehero__media img{ animation:none !important; opacity:1 !important; clip-path:none !important; }
}