/* ==========================================================================
   Madera Furniture Company — main.css
   Palette derived from the logo mark (#503B1C, hue 36deg).
   Contrast verified: brass/ink 6.71:1 · brass-ink/bone 5.85:1 · muted-d/bone 5.67:1
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Ground */
  --ink:        #14100D;
  --ink-2:      #1F1813;
  --ink-3:      #2A211A;
  --walnut:     #43291A;
  --oak:        #8A6440;

  /* Accent — brass is scarce by design */
  --brass:      #C08A3E;   /* on dark only */
  --brass-lift: #E0AC5E;
  --brass-ink:  #7A5320;   /* accent text on light grounds */
  --brand:      #503B1C;   /* sampled from logo */

  /* Light */
  --bone:       #F3EDE4;
  --linen:      #E4D9C8;
  --paper:      #FBF8F3;

  /* Type */
  --text-dark:    #14100D;
  --text-light:   #F3EDE4;
  --text-muted-d: #6B5A4A;
  --text-muted-l: #B8A48C;

  /* Fonts */
  --font-display: "Fraunces", "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Layered shadows — never a single value */
  --shadow-1: 0 1px 2px rgba(20,16,13,.10), 0 2px 6px rgba(20,16,13,.08);
  --shadow-2: 0 2px 4px rgba(20,16,13,.10), 0 8px 20px rgba(20,16,13,.10), 0 18px 40px rgba(20,16,13,.08);
  --shadow-3: 0 4px 8px rgba(20,16,13,.12), 0 16px 32px rgba(20,16,13,.14), 0 40px 80px rgba(20,16,13,.16), 0 0 0 1px rgba(192,138,62,.10);
  --inner-lift: inset 0 1px 0 rgba(255,255,255,.06);

  /* Rhythm */
  --shell: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --section-y: clamp(4.5rem, 10vw, 9rem);

  /* Motion */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  /* Z-scale */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 30;
  --z-overlay: 50;
  --z-modal: 60;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bone);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
/* Inline SVGs carry no intrinsic size. Without a default, an icon dropped into
   prose expands to fill its container. Every component rule below overrides this. */
svg { width: 1.05em; height: 1.05em; flex: none; }
/* Icons sitting in a run of text should sit on the baseline, not above it. */
p svg, .link svg, li svg { display: inline-block; vertical-align: -.15em; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: 2px;
}
.dark :focus-visible, .band--dark :focus-visible { outline-color: var(--brass-lift); }

::selection { background: var(--brass); color: var(--ink); }

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: var(--z-modal);
  background: var(--ink); color: var(--text-light);
  padding: .75rem 1.25rem; border-radius: 0 0 4px 4px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Typography ---------- */
.display, h1, h2.section-title, .piece__title {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.02;
}
h1, .h1 { font-size: clamp(2.75rem, 7vw, 6.5rem); }
.h2, h2.section-title { font-size: clamp(2rem, 4.6vw, 3.75rem); line-height: 1.06; }
.h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); font-family: var(--font-display); font-weight: 400; line-height: 1.18; letter-spacing: -.01em; }

/* Signature move: one italic brass word per major heading */
.accent-word { font-style: italic; color: var(--brass-ink); }
.band--dark .accent-word, .dark .accent-word { color: var(--brass); }

.eyebrow {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brass-ink);
  display: flex; align-items: center; gap: .75rem;
  margin: 0 0 1.25rem;
}
.eyebrow::before {
  content: ""; width: 2rem; height: 1px; background: currentColor; opacity: .7;
  flex: none;
}
.band--dark .eyebrow, .dark .eyebrow { color: var(--brass); }

.lede { font-size: clamp(1.0625rem, 1.5vw, 1.3rem); line-height: 1.65; color: var(--text-muted-d); max-width: 62ch; }
.band--dark .lede, .dark .lede { color: var(--text-muted-l); }

/* ---- Dark-surface accent overrides -------------------------------------
   --brass (#C08A3E) is 6.71:1 on ink but only 2.42:1 on bone, so it is a
   dark-ground colour only; --brass-ink (#7A5320) is its light-ground twin.
   .hero, .page-hero and .cta-band are dark surfaces that are NOT .band--dark,
   so they must be listed explicitly or accents render at ~2.2:1 on them.     */
.hero .eyebrow, .page-hero .eyebrow, .cta-band .eyebrow, .footer .eyebrow,
.hero .accent-word, .page-hero .accent-word, .cta-band .accent-word,
.hero .step__n, .page-hero .step__n, .cta-band .step__n { color: var(--brass); }

.hero .lede, .page-hero .lede, .cta-band .lede,
.hero .muted, .page-hero .muted, .cta-band .muted { color: var(--text-muted-l); }

.hero .btn--ghost, .page-hero .btn--ghost, .cta-band .btn--ghost { --btn-fg: var(--brass); }
.hero .btn--ghost:hover, .page-hero .btn--ghost:hover, .cta-band .btn--ghost:hover { color: var(--ink); }
.prose p { max-width: 68ch; margin-bottom: 1.15em; }
.prose p:last-child { margin-bottom: 0; }
.muted { color: var(--text-muted-d); }
.band--dark .muted, .dark .muted { color: var(--text-muted-l); }

/* ---------- 4. Layout ---------- */
.shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.section { padding-block: var(--section-y); position: relative; }
.band--dark { background: var(--ink); color: var(--text-light); }
.band--ink2 { background: var(--ink-2); color: var(--text-light); }
.band--linen { background: var(--linen); }
.band--paper { background: var(--paper); }

/* Grain overlay — inline SVG turbulence, zero requests. Makes dark read as wood. */
.band--dark::after, .band--ink2::after, .grain::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .05;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.band--dark > *, .band--ink2 > * { position: relative; z-index: 2; }

.section-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }

/* Animated brass hairline */
.rule {
  height: 1px; background: var(--brass); opacity: .45;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1s var(--ease);
}
.rule.is-visible { transform: scaleX(1); }

/* ---------- 5. Buttons & links ---------- */
.btn {
  --btn-fg: var(--ink);
  --btn-bg: var(--brass);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px;
  padding: .95rem 2rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid var(--btn-bg);
  border-radius: 2px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-1);
  transition: transform .26s var(--ease), box-shadow .26s var(--ease), color .26s var(--ease), border-color .26s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--brass-lift);
  transform: scaleX(0); transform-origin: left;
  transition: transform .32s var(--ease);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn:hover::before { transform: scaleX(1); }
.btn:active { transform: translateY(0); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--brass-ink); border-color: currentColor; }
.btn--ghost::before { background: var(--brass); }
.btn--ghost:hover { color: var(--ink); border-color: var(--brass); }
.band--dark .btn--ghost, .dark .btn--ghost { --btn-fg: var(--brass); }
.band--dark .btn--ghost:hover, .dark .btn--ghost:hover { color: var(--ink); }

.btn[disabled], .btn[aria-busy="true"] { opacity: .6; cursor: not-allowed; transform: none; }

/* Underline drawn from the left — no text-decoration anywhere */
.link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size .35s var(--ease), color .2s var(--ease);
  padding-bottom: 2px;
}
.link:hover, .link:focus-visible { background-size: 100% 1px; }

/* ---------- 6. Top bar ---------- */
.topbar {
  background: var(--ink);
  color: var(--text-muted-l);
  font-size: .8125rem;
  border-bottom: 1px solid rgba(192,138,62,.16);
  position: relative; z-index: var(--z-raised);
}
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 40px; padding-block: .35rem; flex-wrap: wrap; }
.topbar__group { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.topbar a { display: inline-flex; align-items: center; gap: .5rem; transition: color .2s var(--ease); }
.topbar a:hover { color: var(--brass-lift); }
.topbar svg { width: 15px; height: 15px; flex: none; color: var(--brass); }
.topbar__socials { display: flex; gap: .35rem; }
.topbar__socials a {
  width: 34px; height: 34px; justify-content: center; border-radius: 50%;
  border: 1px solid rgba(192,138,62,.28);
}
.topbar__socials a:hover { background: var(--brass); border-color: var(--brass); }
.topbar__socials a:hover svg { color: var(--ink); }
@media (max-width: 900px) { .topbar__addr { display: none; } }
@media (max-width: 560px) { .topbar__email { display: none; } }

/* ---------- 7. Header ---------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: transparent;
  transition: background .4s var(--ease), backdrop-filter .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 84px; position: relative; z-index: 1; }
/* In the transparent state the nav sits directly on hero photography, so its
   contrast would depend on whatever the image happens to be. This scrim makes
   legibility independent of the picture. It fades out once the glass bar takes over. */
.header:not(.header--solid)::before {
  content: ""; position: absolute; inset: 0 0 -56px 0; z-index: 0; pointer-events: none;
  /* Holds ~.80 opacity across the whole header band and only fades BELOW it, so
     the nav's lower edge never lands in the faded zone over a bright hero. */
  background: linear-gradient(to bottom,
    rgba(20,16,13,.86) 0%, rgba(20,16,13,.80) 52%, rgba(20,16,13,.62) 68%,
    rgba(20,16,13,.28) 86%, rgba(20,16,13,0) 100%);
  transition: opacity .4s var(--ease);
}
.header.is-stuck::before { opacity: 0; }
.header.is-stuck {
  background: rgba(20,16,13,.72);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: rgba(192,138,62,.18);
  box-shadow: var(--shadow-2), var(--inner-lift);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .header.is-stuck { background: rgba(20,16,13,.96); }
}
/* Pages without a dark hero need the solid treatment immediately */
.header--solid { background: rgba(20,16,13,.94); border-bottom-color: rgba(192,138,62,.18); }

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 46px; width: auto; }
@media (max-width: 480px) { .brand img { height: 38px; } }

.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.nav__link {
  position: relative;
  font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-light);
  padding: .5rem 0;
  transition: color .25s var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__link:hover { color: var(--brass-lift); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__link[aria-current="true"]::after { transform: scaleX(1); }
.nav__link[aria-current="page"], .nav__link[aria-current="true"] { color: var(--brass); }
/* parent-of-current reads as active but slightly quieter than the page itself */
.nav__link[aria-current="true"]::after { opacity: .55; }

/* Dropdown */
.nav__item { position: relative; }
.nav__toggle { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; }
.nav__toggle svg { width: 11px; height: 11px; transition: transform .3s var(--ease); }
.nav__item.is-open .nav__toggle svg { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + .75rem); left: 50%; translate: -50% 0;
  min-width: 260px; padding: .6rem;
  background: rgba(31,24,19,.88);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(192,138,62,.2);
  border-radius: 4px;
  box-shadow: var(--shadow-3), var(--inner-lift);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .nav__menu { background: rgba(31,24,19,.99); }
}
.nav__item.is-open .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu a {
  display: block; padding: .7rem .9rem; border-radius: 3px;
  font-size: .875rem; color: var(--text-muted-l);
  transition: background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.nav__menu a:hover { background: rgba(192,138,62,.14); color: var(--text-light); padding-left: 1.2rem; }

@media (max-width: 1024px) { .nav--desktop { display: none; } }

/* Scroll progress */
.progress {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  opacity: 0; transition: opacity .3s var(--ease);
}
.header.is-stuck .progress { opacity: 1; }

/* Burger */
.burger {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  background: none; border: 1px solid rgba(192,138,62,.3); border-radius: 3px; cursor: pointer;
}
.burger span { display: block; width: 20px; height: 1.5px; background: var(--text-light); position: relative; transition: background .2s var(--ease); }
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 1.5px; background: var(--text-light);
  transition: transform .3s var(--ease), top .3s var(--ease);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 1024px) { .burger { display: inline-flex; } .header__cta { display: none; } }

/* Mobile overlay */
.mobile-nav {
  position: fixed; inset: 0; z-index: var(--z-overlay);
  background: rgba(20,16,13,.95);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  padding: 6rem var(--gutter) 3rem;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .38s var(--ease), visibility .38s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; }
.mobile-nav__list { display: flex; flex-direction: column; gap: .25rem; }
.mobile-nav__list a {
  display: block; padding: .85rem 0;
  font-family: var(--font-display); font-size: 1.75rem; font-weight: 300;
  color: var(--text-light);
  border-bottom: 1px solid rgba(192,138,62,.14);
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .2s var(--ease);
}
.mobile-nav.is-open .mobile-nav__list a { opacity: 1; transform: none; transition-delay: calc(var(--i) * 45ms + 100ms); }
.mobile-nav__list a:hover, .mobile-nav__list a[aria-current="page"] { color: var(--brass); }
.mobile-nav__sub a { font-size: 1.0625rem; font-family: var(--font-body); padding-left: 1.25rem; color: var(--text-muted-l); }
.mobile-nav__foot { margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1rem; }

body.no-scroll { overflow: hidden; }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(620px, 92svh, 1000px);
  display: flex; align-items: flex-end;
  overflow: hidden;
  background: var(--ink);
  margin-top: -84px; padding-top: 84px;   /* pull under the transparent header */
}
.hero__media { position: absolute; inset: -8% 0 -8%; z-index: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 1.6s var(--ease-io);
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; }
/* Ken Burns — slow drift instead of faked video */
.hero__slide.is-active img { animation: kenburns 14s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.13); } }

/* Three stacked scrims. The left-to-right pass is the one that guarantees the
   headline stays legible over bright imagery (these are daylight interiors). */
.hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right, rgba(20,16,13,.90) 0%, rgba(20,16,13,.72) 34%, rgba(20,16,13,.30) 62%, rgba(20,16,13,.12) 100%),
    linear-gradient(to top, rgba(20,16,13,.92) 0%, rgba(20,16,13,.45) 40%, rgba(20,16,13,.10) 72%, rgba(20,16,13,.40) 100%),
    radial-gradient(120% 80% at 18% 100%, rgba(67,41,26,.45), transparent 62%);
}
@media (max-width: 900px) {
  .hero__scrim { background:
    linear-gradient(to top, rgba(20,16,13,.94) 0%, rgba(20,16,13,.72) 45%, rgba(20,16,13,.5) 100%); }
}
.hero__inner { position: relative; z-index: 3; width: 100%; padding-block: clamp(3rem, 8vw, 6.5rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

.hero h1 { color: var(--text-light); margin-bottom: 1.75rem; max-width: 16ch; }
.hero .lede { color: rgba(243,237,228,.82); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

/* Floating glass spec card — one of only three glass uses */
.spec-card {
  padding: 1.75rem 2rem;
  background: rgba(31,24,19,.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(192,138,62,.18);
  border-radius: 4px;
  box-shadow: var(--shadow-3), var(--inner-lift);
  min-width: 240px;
  animation: float 8s ease-in-out infinite;
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .spec-card { background: rgba(31,24,19,.94); }
}
.spec-card dl { display: grid; gap: 1.1rem; margin: 0; }
.spec-card dt { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: .15rem; }
.spec-card dd { margin: 0; font-family: var(--font-display); font-size: 1.5rem; color: var(--text-light); line-height: 1.1; }

@keyframes float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(-.35deg); } }

.hero__scroll {
  position: absolute; left: 50%; bottom: 1.75rem; translate: -50% 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase; color: var(--brass);
  animation: float 6s ease-in-out infinite;
}
.hero__scroll span.line { display: block; width: 1px; height: 42px; background: linear-gradient(var(--brass), transparent); }
@media (max-width: 900px) { .hero__scroll { display: none; } }

/* Page hero (interior pages) */
.page-hero {
  position: relative; overflow: hidden; background: var(--ink); color: var(--text-light);
  min-height: clamp(380px, 52vh, 560px);
  display: flex; align-items: flex-end;
  margin-top: -84px; padding-top: 84px;
}
.page-hero__media { position: absolute; inset: -8% 0 -8%; z-index: 0; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(20,16,13,.95) 0%, rgba(20,16,13,.60) 55%, rgba(20,16,13,.58) 100%),
    linear-gradient(to right, rgba(20,16,13,.55) 0%, rgba(20,16,13,.20) 70%, rgba(20,16,13,.10) 100%);
}
.page-hero__inner { position: relative; z-index: 2; width: 100%; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.page-hero h1 { max-width: 18ch; }
.page-hero .lede { color: rgba(243,237,228,.82); margin-top: 1.25rem; }

/* Breadcrumbs — light-ground by default; dark surfaces override.
   (privacy/terms render crumbs on a linen band, not over a dark hero.) */
.crumbs { font-size: .8125rem; color: var(--text-muted-d); margin-bottom: 1.5rem; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.crumbs li { display: flex; align-items: center; gap: .5rem; }
.crumbs li + li::before { content: "/"; color: var(--brass-ink); opacity: .7; }
.crumbs a:hover { color: var(--brass-ink); }
.page-hero .crumbs, .band--dark .crumbs, .band--ink2 .crumbs { color: var(--text-muted-l); }
.page-hero .crumbs li + li::before, .band--dark .crumbs li + li::before { color: var(--brass); }
.page-hero .crumbs a:hover, .band--dark .crumbs a:hover { color: var(--brass-lift); }

/* ---------- 9. Category / bento grid ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(.85rem, 1.5vw, 1.35rem); }
.bento > *:nth-child(1) { grid-column: span 4; }
.bento > *:nth-child(2) { grid-column: span 2; }
.bento > *:nth-child(3) { grid-column: span 2; }
.bento > *:nth-child(4) { grid-column: span 2; }
.bento > *:nth-child(5) { grid-column: span 2; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento > * { grid-column: span 1 !important; }
  .bento > *:nth-child(1) { grid-column: span 2 !important; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .bento > * { grid-column: span 1 !important; }
}

.tile {
  position: relative; display: block; overflow: hidden;
  border-radius: 3px; min-height: 280px;
  background: var(--ink-2);
  box-shadow: var(--shadow-2);
  cursor: pointer;
  transform-style: preserve-3d;
  transition: box-shadow .5s var(--ease);
}
.bento > *:nth-child(1).tile { min-height: 440px; }
.tile:hover { box-shadow: var(--shadow-3); }
.tile__img { position: absolute; inset: 0; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.tile:hover .tile__img img { transform: scale(1.06); }
.tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(20,16,13,.9) 0%, rgba(20,16,13,.45) 42%, rgba(20,16,13,.05) 75%);
  transition: background .5s var(--ease);
}
.tile:hover .tile__scrim { background: linear-gradient(to top, rgba(20,16,13,.94) 0%, rgba(20,16,13,.6) 50%, rgba(20,16,13,.15) 85%); }
/* Specular highlight that tracks the pointer on 3D tilt */
.tile__gloss {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(30rem 30rem at var(--mx, 50%) var(--my, 50%), rgba(224,172,94,.22), transparent 60%);
  transition: opacity .4s var(--ease);
}
.tile:hover .tile__gloss { opacity: 1; }
.tile__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1.35rem, 2.5vw, 2.25rem);
  color: var(--text-light);
  transform: translateZ(28px);
}
.tile__title { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 400; line-height: 1.12; }
.tile__meta { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: .6rem; }
.tile__desc {
  font-size: .9375rem; color: var(--text-muted-l); margin-top: .5rem;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s var(--ease), opacity .4s var(--ease), margin-top .4s var(--ease);
}
.tile:hover .tile__desc, .tile:focus-visible .tile__desc { max-height: 6rem; opacity: 1; }
.tile__more { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); margin-top: .85rem; }
.tile__more svg { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.tile:hover .tile__more svg { transform: translateX(5px); }

/* ---------- 10. Featured pieces ---------- */
.pieces { display: grid; gap: clamp(3.5rem, 8vw, 7rem); }
.piece { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.piece__media { grid-column: 1 / span 7; position: relative; }
.piece__body { grid-column: 8 / span 5; }
.piece:nth-child(even) .piece__media { grid-column: 6 / span 7; order: 2; }
.piece:nth-child(even) .piece__body { grid-column: 1 / span 5; order: 1; }
@media (max-width: 860px) {
  .piece { grid-template-columns: 1fr; }
  .piece__media, .piece__body,
  .piece:nth-child(even) .piece__media, .piece:nth-child(even) .piece__body { grid-column: 1 / -1; order: unset; }
}
.piece__frame { position: relative; overflow: hidden; border-radius: 3px; box-shadow: var(--shadow-3); }
.piece__frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 1s var(--ease); }
/* Portrait subjects (the founder) must not be cropped to the 4:3 landscape default. */
.piece__frame--portrait img { aspect-ratio: 4 / 5; }
.piece:hover .piece__frame img { transform: scale(1.04); }
.piece__year {
  position: absolute; top: 1.25rem; right: 1.25rem; z-index: 2;
  padding: .45rem .9rem; border-radius: 2px;
  font-size: .75rem; letter-spacing: .14em;
  background: rgba(31,24,19,.6);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(192,138,62,.22); color: var(--brass);
}
.piece__title { font-size: clamp(1.6rem, 3vw, 2.5rem); margin-bottom: .5rem; }
.piece__mat { font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-ink); margin-bottom: 1.15rem; }
.band--dark .piece__mat { color: var(--brass); }

/* ---------- 11. Process timeline ---------- */
.timeline { position: relative; display: grid; gap: clamp(3rem, 7vw, 6rem); padding-left: clamp(2.5rem, 6vw, 5rem); }
.timeline::before {
  content: ""; position: absolute; left: clamp(.6rem, 1.6vw, 1.4rem); top: .5rem; bottom: .5rem; width: 1px;
  background: rgba(192,138,62,.22);
}
.timeline__draw {
  position: absolute; left: clamp(.6rem, 1.6vw, 1.4rem); top: .5rem; width: 1px;
  background: var(--brass); transform-origin: top; height: 0;
  transition: height .1s linear;
}
.step { position: relative; }
.step::before {
  content: ""; position: absolute; left: calc(clamp(2.5rem, 6vw, 5rem) * -1 + clamp(.6rem, 1.6vw, 1.4rem) - 5px);
  top: .45rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink); border: 1px solid var(--brass);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.band--dark .step::before { background: var(--ink); }
.step.is-visible::before { background: var(--brass); box-shadow: 0 0 0 5px rgba(192,138,62,.18); }
/* Defaults to the light-ground accent; dark bands override below. */
.step__n { font-family: var(--font-display); font-size: .875rem; letter-spacing: .2em; color: var(--brass-ink); margin-bottom: .6rem; }
.band--dark .step__n, .band--ink2 .step__n { color: var(--brass); }
.step__title { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 300; margin-bottom: .75rem; }

/* ---------- 12. Stats / counters ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.stat__num { font-family: var(--font-display); font-size: clamp(2.5rem, 5.5vw, 4.25rem); font-weight: 300; line-height: 1; color: var(--brass); }
.stat__label { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted-l); margin-top: .65rem; }
.band--linen .stat__num, .band--paper .stat__num { color: var(--brass-ink); }
.band--linen .stat__label, .band--paper .stat__label { color: var(--text-muted-d); }

/* ---------- 13. Reviews ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; }
.chip {
  min-height: 44px; padding: .6rem 1.15rem;
  font-size: .8125rem; font-weight: 500; letter-spacing: .06em;
  background: transparent; color: var(--text-muted-d);
  border: 1px solid rgba(20,16,13,.18); border-radius: 999px;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.chip:hover { border-color: var(--brass-ink); color: var(--brass-ink); }
.chip[aria-pressed="true"] { background: var(--brass-ink); border-color: var(--brass-ink); color: var(--paper); }
.band--dark .chip { color: var(--text-muted-l); border-color: rgba(192,138,62,.28); }
.band--dark .chip:hover { color: var(--brass-lift); border-color: var(--brass); }
.band--dark .chip[aria-pressed="true"] { background: var(--brass); border-color: var(--brass); color: var(--ink); }

.reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; }
.review {
  position: relative; display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid rgba(192,138,62,.16);
  border-radius: 4px; overflow: hidden;
  box-shadow: var(--shadow-2);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), opacity .35s var(--ease);
}
.band--linen .review, .band--paper .review { background: var(--paper); border-color: rgba(20,16,13,.1); }
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.review.is-hidden { display: none; }
.review__img { aspect-ratio: 16 / 11; overflow: hidden; background: var(--ink-3); }
.review__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.review:hover .review__img img { transform: scale(1.05); }
.review__body { padding: clamp(1.35rem, 2.5vw, 1.9rem); display: flex; flex-direction: column; gap: .9rem; flex: 1; }
.review__top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.review__stars { display: flex; gap: .15rem; color: var(--brass); }
.review__stars svg { width: 15px; height: 15px; }
.review__g { width: 20px; height: 20px; flex: none; }
.review__g svg { width: 100%; height: 100%; }
.review__cat { display: inline-block; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.band--linen .review__cat, .band--paper .review__cat { color: var(--brass-ink); }
.review__quote { font-size: .9375rem; line-height: 1.72; color: var(--text-muted-l); position: relative; }
.band--linen .review__quote, .band--paper .review__quote { color: var(--text-muted-d); }
.review__quote.is-clamped {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}
.review__author { font-family: var(--font-display); font-size: 1.0625rem; color: var(--text-light); margin-top: auto; }
.band--linen .review__author, .band--paper .review__author { color: var(--text-dark); }
.review__expand {
  align-self: flex-start; background: none; border: 0; cursor: pointer; padding: .35rem 0;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--brass);
}
.band--linen .review__expand, .band--paper .review__expand { color: var(--brass-ink); }
.review__expand:hover { text-decoration: underline; }
.review--empty { align-items: flex-start; justify-content: center; padding: 2rem; text-align: left; border-style: dashed; }

.reviews-head { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); margin-bottom: 2rem; }
.rating-badge { display: flex; align-items: center; gap: 1rem; }
.rating-badge__score { font-family: var(--font-display); font-size: 2.75rem; line-height: 1; color: var(--brass); }
.band--linen .rating-badge__score, .band--paper .rating-badge__score { color: var(--brass-ink); }

/* ---------- 14. CTA band ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--ink); color: var(--text-light); }
.cta-band__media { position: absolute; inset: -10% 0 -10%; z-index: 0; }
.cta-band__media img { width: 100%; height: 100%; object-fit: cover; }
.cta-band__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(20,16,13,.94) 12%, rgba(20,16,13,.72) 55%, rgba(20,16,13,.5)); }
.cta-band__inner { position: relative; z-index: 2; padding-block: clamp(4rem, 9vw, 7rem); }
.cta-band h2 { max-width: 18ch; margin-bottom: 1.25rem; }

/* ---------- 15. Forms ---------- */
.form { display: grid; gap: 1.35rem; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
@media (max-width: 700px) { .form__row { grid-template-columns: 1fr; } }
.field { position: relative; display: flex; flex-direction: column; gap: .45rem; }
.field label { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted-d); }
.band--dark .field label { color: var(--text-muted-l); }
.field .req { color: var(--brass-ink); }
.band--dark .field .req { color: var(--brass); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 52px; padding: .85rem 1rem;
  background: var(--paper); color: var(--text-dark);
  border: 1px solid rgba(20,16,13,.18); border-radius: 3px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.band--dark .field input, .band--dark .field select, .band--dark .field textarea {
  background: rgba(243,237,228,.05); color: var(--text-light); border-color: rgba(192,138,62,.26);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brass);
  box-shadow: 0 0 0 3px rgba(192,138,62,.22);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
  border-color: #B3402F; box-shadow: 0 0 0 3px rgba(179,64,47,.18);
}
.field__err { font-size: .8125rem; color: #C4523F; min-height: 1.2em; }
.band--dark .field__err { color: #E88C79; }
.field--check { flex-direction: row; align-items: flex-start; gap: .75rem; }
.field--check input { min-height: 0; width: 20px; height: 20px; margin-top: .25rem; flex: none; accent-color: var(--brass-ink); }
.field--check label { text-transform: none; letter-spacing: 0; font-size: .875rem; font-weight: 400; line-height: 1.6; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; overflow: hidden; }

.form__status {
  padding: 1.15rem 1.35rem; border-radius: 3px; font-size: .9375rem;
  border: 1px solid rgba(192,138,62,.3); background: rgba(192,138,62,.1);
}
.form__status[hidden] { display: none; }
.form__status--ok { border-color: rgba(120,150,110,.45); background: rgba(120,150,110,.14); }
.form__status--err { border-color: rgba(179,64,47,.5); background: rgba(179,64,47,.12); }

/* ---------- 16. Contact / NAP ---------- */
.nap { display: grid; gap: 1.5rem; }
.nap__item { display: flex; gap: 1rem; align-items: flex-start; }
.nap__item svg { width: 20px; height: 20px; color: var(--brass); flex: none; margin-top: .3rem; }
.band--linen .nap__item svg, .band--paper .nap__item svg { color: var(--brass-ink); }
.nap__label { font-size: .6875rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted-d); margin-bottom: .2rem; }
/* .footer is a dark surface but is not .band--dark, so it needs listing here. */
.band--dark .nap__label, .band--ink2 .nap__label, .footer .nap__label { color: var(--text-muted-l); }
.footer .nap__item svg { color: var(--brass); }
.nap__value { font-size: 1.0625rem; }

.map-embed { position: relative; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-2); background: var(--ink-2); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map-poster {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
  background: var(--ink-2); color: var(--text-light); cursor: pointer; border: 0; width: 100%;
}
.map-poster svg { width: 34px; height: 34px; color: var(--brass); }
/* The poster is a dark tile inside a light band — muted text must flip. */
.map-poster .muted { color: var(--text-muted-l); }

/* ---------- 17. Team ---------- */
/* Explicit column counts rather than auto-fill: there are exactly 6 people and
   4 dog cards, and auto-fill orphaned the 6th person alone on a second row. */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem); }
@media (min-width: 560px)  { .team { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) {
  .team--people { grid-template-columns: repeat(6, 1fr); }   /* 6 -> one clean row */
  .team--dogs   { grid-template-columns: repeat(4, 1fr); }   /* 4 -> one clean row */
}
.member { text-align: left; }
.member__ph {
  aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; margin-bottom: 1rem;
  background: linear-gradient(150deg, var(--ink-3), var(--walnut));
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-1);
  position: relative;
}
.member__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.member:hover .member__ph img { transform: scale(1.05); }
.member__ph picture { width: 100%; height: 100%; }
/* Warm the portraits toward the palette so a mixed set of phone snaps reads
   as one series rather than an album. Lifts on hover. */
.member__ph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(67,41,26,.30), rgba(20,16,13,.06));
  mix-blend-mode: multiply;
  transition: opacity .5s var(--ease);
}
.member:hover .member__ph::after { opacity: .35; }
.member__initial { font-family: var(--font-display); font-size: 3rem; color: rgba(192,138,62,.5); }
.member__name { font-family: var(--font-display); font-size: 1.25rem; }
.member__role { font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass-ink); margin-top: .2rem; }
.band--dark .member__role { color: var(--brass); }

/* ---------- 18. FAQ ---------- */
.faq { display: grid; gap: .75rem; max-width: 80ch; }
.faq__item { border: 1px solid rgba(20,16,13,.12); border-radius: 3px; overflow: hidden; background: var(--paper); }
.band--dark .faq__item { border-color: rgba(192,138,62,.18); background: var(--ink-2); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.25rem 1.5rem; min-height: 60px;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-display); font-size: 1.125rem;
  transition: background .25s var(--ease);
}
.faq__q:hover { background: rgba(192,138,62,.07); }
.faq__q svg { width: 16px; height: 16px; color: var(--brass-ink); flex: none; transition: transform .35s var(--ease); }
.band--dark .faq__q svg { color: var(--brass); }
.faq__item.is-open .faq__q svg { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { padding: 0 1.5rem 1.35rem; color: var(--text-muted-d); font-size: .9375rem; }
.band--dark .faq__a p { color: var(--text-muted-l); }

/* ---------- 19. Gallery + lightbox ---------- */
.gallery { columns: 3; column-gap: clamp(.85rem, 1.5vw, 1.35rem); }
@media (max-width: 900px) { .gallery { columns: 2; } }
@media (max-width: 560px) { .gallery { columns: 1; } }
.gallery__item {
  break-inside: avoid; margin-bottom: clamp(.85rem, 1.5vw, 1.35rem);
  position: relative; overflow: hidden; border-radius: 3px; cursor: pointer;
  box-shadow: var(--shadow-1); display: block; width: 100%; padding: 0; border: 0; background: none;
  transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.gallery__item:hover { box-shadow: var(--shadow-3); transform: translateY(-3px); }
.gallery__item img { width: 100%; transition: transform .9s var(--ease); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__cap {
  position: absolute; inset: auto 0 0 0; padding: 1.5rem 1.25rem .95rem;
  background: linear-gradient(to top, rgba(20,16,13,.88), transparent);
  color: var(--text-light); font-size: .875rem; text-align: left;
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.gallery__item:hover .gallery__cap, .gallery__item:focus-visible .gallery__cap { opacity: 1; transform: none; }

.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(20,16,13,.96);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0; visibility: hidden; transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 82vh; object-fit: contain; box-shadow: var(--shadow-3); }
.lightbox__cap { position: absolute; left: 0; right: 0; bottom: 1.5rem; text-align: center; color: var(--text-muted-l); font-size: .875rem; padding-inline: 1rem; }
.lightbox__btn {
  position: absolute; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  background: rgba(31,24,19,.7); color: var(--text-light);
  border: 1px solid rgba(192,138,62,.25); border-radius: 50%; cursor: pointer;
  transition: background .25s var(--ease);
}
.lightbox__btn:hover { background: var(--brass); color: var(--ink); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: 1.25rem; right: 1.25rem; }
.lightbox__prev { left: 1.25rem; top: 50%; translate: 0 -50%; }
.lightbox__next { right: 1.25rem; top: 50%; translate: 0 -50%; }

/* ---------- 20. Marquee ---------- */
.marquee { overflow: hidden; position: relative; padding-block: 1.5rem; border-block: 1px solid rgba(192,138,62,.18); }
.marquee__track { display: flex; gap: 3.5rem; width: max-content; animation: slide 42s linear infinite; }
.marquee__track span {
  font-family: var(--font-display); font-size: clamp(1.15rem, 2.2vw, 1.8rem); font-weight: 300;
  color: var(--text-muted-l); white-space: nowrap; display: flex; align-items: center; gap: 3.5rem;
}
.marquee__track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--brass); }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- 21. Footer ---------- */
.footer { position: relative; background: var(--ink); color: var(--text-muted-l); padding-top: clamp(3.5rem, 7vw, 5.5rem); }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3.5rem; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } }
.footer__logo img { height: 52px; width: auto; margin-bottom: 1.25rem; }
.footer__tag { font-family: var(--font-display); font-size: 1.15rem; color: var(--text-light); font-style: italic; }
.footer h3 { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); margin-bottom: 1.35rem; }
.footer__links { display: grid; gap: .7rem; }
.footer__links a { font-size: .9375rem; transition: color .2s var(--ease), padding-left .25s var(--ease); }
.footer__links a:hover { color: var(--brass-lift); padding-left: .35rem; }
.footer__socials { display: flex; gap: .6rem; margin-top: 1.5rem; }
.footer__socials a {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(192,138,62,.28); border-radius: 50%;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.footer__socials a:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); transform: translateY(-2px); }
.footer__socials svg { width: 17px; height: 17px; }
.footer__bottom {
  border-top: 1px solid rgba(192,138,62,.16);
  padding-block: 1.75rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: .8125rem;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__credit a { color: var(--brass); }
.footer__credit a:hover { color: var(--brass-lift); }

/* ---------- 22. Sticky mobile action bar ---------- */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: none;
  padding: .5rem .65rem calc(.5rem + env(safe-area-inset-bottom));
  background: rgba(20,16,13,.9);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid rgba(192,138,62,.22);
  box-shadow: 0 -8px 32px rgba(20,16,13,.4);
  transform: translateY(110%);
  transition: transform .45s var(--ease);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
  .mobile-bar { background: rgba(20,16,13,.98); }
}
.mobile-bar.is-visible { transform: none; }
.mobile-bar__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.mobile-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
  min-height: 56px; padding: .4rem;
  border-radius: 3px;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-light);
  border: 1px solid rgba(192,138,62,.22);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.mobile-bar a:hover, .mobile-bar a:active { background: var(--brass); color: var(--ink); }
.mobile-bar svg { width: 19px; height: 19px; color: var(--brass); }
.mobile-bar a:hover svg, .mobile-bar a:active svg { color: var(--ink); }
@media (max-width: 768px) {
  .mobile-bar { display: block; }
  .footer { padding-bottom: 84px; }
}

/* ---------- 23. Entrance animations ---------- */
[data-animate] { will-change: opacity, transform; }
[data-animate="fade-up"]    { opacity: 0; transform: translateY(30px); }
[data-animate="fade-in"]    { opacity: 0; }
[data-animate="scale-in"]   { opacity: 0; transform: scale(.94); }

/* clip-reveal clips the INNER wrapper, never the observed element itself.
   IntersectionObserver measures clipped area, so clipping the observed node to
   inset(0 0 100% 0) gives it zero visible area — it would report ratio 0 forever
   and could never trigger the class that reveals it. Deadlock. Clip the child. */
[data-animate="clip-reveal"] > * { clip-path: inset(0 0 100% 0); }
[data-animate="clip-reveal"] img { transform: scale(1.12); }

[data-animate].is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity .8s var(--ease) var(--d, 0ms),
    transform .8s var(--ease) var(--d, 0ms);
}
[data-animate="clip-reveal"] > * { transition: clip-path 1s var(--ease) var(--d, 0ms); }
[data-animate="clip-reveal"].is-visible > * { clip-path: inset(0 0 0 0); }
[data-animate="clip-reveal"].is-visible img { transform: scale(1); transition: transform 1.4s var(--ease) var(--d, 0ms); }
[data-animate].is-visible { will-change: auto; }

/* Split-line headings.
   overflow:hidden is what masks the reveal, but it also clips the descenders of
   an italic display serif ("your story"). Pad the mask box and pull the same
   amount back off the margin so the reveal still works and the type doesn't crop. */
.split-line { display: block; overflow: hidden; padding-bottom: .16em; margin-bottom: -.16em; }
.split-line > span { display: block; transform: translateY(110%); transition: transform .9s var(--ease) var(--d, 0ms); }
.is-visible .split-line > span, .split-line.is-visible > span { transform: none; }

/* Stagger helper */
[data-stagger] > * { --d: calc(var(--i, 0) * 70ms); }

/* ---------- 24. Custom scrollbar (desktop) ---------- */
@media (pointer: fine) {
  ::-webkit-scrollbar { width: 11px; }
  ::-webkit-scrollbar-track { background: var(--ink); }
  ::-webkit-scrollbar-thumb { background: var(--walnut); border-radius: 99px; border: 3px solid var(--ink); }
  ::-webkit-scrollbar-thumb:hover { background: var(--brass-ink); }
  html { scrollbar-color: var(--walnut) var(--ink); scrollbar-width: thin; }
}

/* ---------- 25. Page-transition wipe ---------- */
.wipe {
  position: fixed; inset: 0; z-index: 70; background: var(--bone);
  transform: scaleY(0); transform-origin: bottom; pointer-events: none;
}
.wipe.is-out { transform: scaleY(1); transform-origin: bottom; transition: transform .32s var(--ease-io); }

/* ---------- 26. Utilities ---------- */
.stack-sm > * + * { margin-top: 1rem; }
.stack-md > * + * { margin-top: 1.75rem; }
.stack-lg > * + * { margin-top: 2.75rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(2rem, 5vw, 4.5rem); }
.grid-2--tight { gap: clamp(1.25rem, 3vw, 2.5rem); }
.text-center { text-align: center; }
.mt-lg { margin-top: clamp(2rem, 5vw, 3.5rem); }
.relative { position: relative; }

/* ---------- 27. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-animate], [data-animate] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  [data-animate] img, [data-animate="clip-reveal"] img { transform: none !important; }
  .split-line > span { transform: none !important; }
  .hero__slide.is-active img { animation: none !important; }
  .spec-card, .hero__scroll { animation: none !important; }
  .marquee__track { animation: none !important; }
  .tile { transform: none !important; }
}

/* ---------- 28. No-JS fallback ---------- */
.no-js [data-animate], .no-js [data-animate] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.no-js .split-line > span { transform: none !important; }
.no-js .hero__slide { opacity: 1; }
.no-js .hero__slide ~ .hero__slide { display: none; }
.no-js .review.is-hidden { display: flex; }
/* Without JS every review shows unfiltered, so the "no review in this category
   yet" placeholder has no category to refer to. Hide it rather than assert it. */
.no-js .review--empty { display: none; }
.no-js .filters { display: none; }
.no-js .review__quote.is-clamped { -webkit-line-clamp: unset; mask-image: none; -webkit-mask-image: none; display: block; }
.no-js .review__expand { display: none; }
.no-js .faq__a { grid-template-rows: 1fr; }
.no-js .faq__q svg { display: none; }
.no-js .mobile-bar { transform: none; }
.no-js .map-poster { display: none; }
.no-js .tile__desc { max-height: none; opacity: 1; margin-top: .5rem; }