/* =========================================================
   Scottsdale Edge Works — Direction 1
   "The Quiet Authority" — Editorial / Minimalist
   =========================================================
   Color system (the only hues allowed; tints/shades of these
   for hairlines and washes are fine):
     Ink        #12191F  primary text / darkest
     Espresso   #3F311E  secondary warm-dark text
     Copper     #A44C1E  the single accent — used 1–2 times total
     Warm White #F8F5EF  primary background
     Charcoal   #1F2024  dark sections
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
  --ink: #12191F;
  --espresso: #3F311E;
  --copper: #A44C1E;
  --warm-white: #F8F5EF;
  --charcoal: #1F2024;

  /* Derived tints (shades of the palette only) */
  --hairline: rgba(18, 25, 31, 0.12);     /* Ink @ 12% — section rules */
  --hairline-light: rgba(248, 245, 239, 0.16); /* Warm White @ 16% — on dark */
  --wash: rgba(63, 49, 30, 0.04);         /* Espresso wash — photo frames */
  --wash-dark: rgba(248, 245, 239, 0.05); /* light wash on charcoal */

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1200px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);

  --space-section: clamp(4rem, 9vw, 8.5rem);
}

/* ---------- Reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scrollbar-gutter: stable;   /* reserve the scrollbar so 100vw .bleed === content width (no desktop jiggle) */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Hairline section rules — the quiet editorial divider */
.rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 0;
  max-width: var(--container);
  margin-inline: auto;
}

/* Eyebrow — small-caps Inter label, wide tracking */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--espresso);
  margin: 0 0 1rem;
}

.eyebrow--light {
  color: rgba(248, 245, 239, 0.78);
}

/* Section titles — large Cormorant, tight leading */
.section-title {
  font-size: clamp(1.65rem, 3.4vw, 2.4rem);
  line-height: 1.08;
  max-width: 16ch;
  margin: 0 0 1.7rem;
  color: var(--ink);
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3.5rem;
  z-index: 1000;
  background: var(--ink);
  color: var(--warm-white);
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  text-decoration: none;
  transition: top 0.18s ease;
}
.skip-link:focus {
  top: 0.75rem;
}

/* ---------- Focus visibility ---------- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 1px;
}

/* =========================================================
   HEADER
   Transparent over Warm White, hairline bottom border,
   small-caps Inter nav.
   ========================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(248, 245, 239, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--hairline);
  transition: padding 0.25s ease;
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.4rem;
  transition: padding-block 0.25s ease;
}

/* Subtle shrink on scroll */
.site-header.is-scrolled .header__inner {
  padding-block: 0.85rem;
}

.header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.header__wordmark {
  height: 46px;
  width: auto;
  transition: height 0.25s ease;
}
.site-header.is-scrolled .header__wordmark {
  height: 38px;
}

/* ---------- Nav ---------- */
.nav__menu {
  display: flex;
  align-items: center;
  gap: 2.25rem;
}

.nav__menu a {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-decoration: none;
  padding: 0.35rem 0;
  position: relative;
  transition: color 0.18s ease;
}

.nav__menu a:hover {
  color: var(--espresso);
}

/* "Visit" nav item gets a quiet underline cue (no copper) */
.nav__cta {
  border-bottom: 1px solid var(--ink);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--hairline);
  cursor: pointer;
}

.nav__toggle-bar {
  display: block;
  width: 20px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
  transform: translateY(3.75px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
  transform: translateY(-3.75px) rotate(-45deg);
}

/* =========================================================
   HERO — type-led, asymmetric editorial grid
   ========================================================= */
.hero {
  padding-block: clamp(2.2rem, 4.5vw, 4.2rem) var(--space-section);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: end;
}

.hero__headline {
  font-size: clamp(2.3rem, 6.2vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 1.15rem;
}

.hero__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  color: var(--espresso);
  margin: 0 0 1.2rem;
  letter-spacing: 0.01em;
}

.hero__copy {
  font-size: 1.02rem;
  color: var(--ink);
  max-width: 42ch;
  margin: 0 0 1.6rem;
}

/* ---------- Text-link CTA (the understated "button") ---------- */
.link-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-decoration: none;
}

/* COPPER ACCENT #1 — the primary CTA underline ("the Edge") */
.link-cta__rule {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--copper);
  transform-origin: left center;
  transition: transform 0.28s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .link-cta:hover .link-cta__rule {
    transform: scaleX(1.18);
  }
}

.link-cta--light {
  color: var(--warm-white);
}

/* =========================================================
   PHOTO PLACEHOLDERS — framed editorial blocks
   Thin hairline border, palette wash, italic caption below.
   ========================================================= */
.photo {
  margin: 0;
}

.photo__frame {
  position: relative;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--hairline);
  background:
    linear-gradient(135deg, var(--wash), rgba(63, 49, 30, 0.015));
  padding: 1.25rem;
  overflow: hidden;
}

/* A quiet ridge/horizon line — the brand's signature motif,
   drawn once across the photo frame so the placeholder still
   reads as "ours". */
.photo__frame::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 58%;
  height: 1px;
  background: var(--hairline);
}
.photo__frame::after {
  content: "Photo coming";
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--espresso);
  opacity: 0.55;
}

.photo__label {
  position: relative;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.4;
  color: var(--espresso);
  max-width: 34ch;
}

.photo__caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--espresso);
  margin-top: 0.75rem;
  padding-left: 0.1rem;
}

.photo__caption--light {
  color: rgba(248, 245, 239, 0.72);
}

/* Aspect ratios per context */
.photo--hero .photo__frame {
  aspect-ratio: 4 / 3;
}
.photo--product .photo__frame {
  aspect-ratio: 4 / 5;
}
.photo--visit .photo__frame {
  aspect-ratio: 4 / 3;
}

/* Dark-themed frame (used in the Visit section) */
.photo__frame--dark {
  border-color: var(--hairline-light);
  background: linear-gradient(135deg, var(--wash-dark), rgba(248, 245, 239, 0.01));
}
.photo__frame--dark::before {
  background: var(--hairline-light);
}
.photo__frame--dark::after {
  color: rgba(248, 245, 239, 0.6);
}
.photo__frame--dark .photo__label {
  color: rgba(248, 245, 239, 0.82);
}

/* =========================================================
   VALUE PROPOSITION
   ========================================================= */
.values {
  padding-block: var(--space-section);
}

.values__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 4vw, 3rem) clamp(2rem, 5vw, 4rem);
}

.value {
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}

.value__num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--espresso);
  margin-bottom: 1rem;
}

.value__title {
  font-size: 1.6rem;
  line-height: 1.15;
  margin-bottom: 0.7rem;
  color: var(--ink);
}

.value__copy {
  font-size: 0.96rem;
  color: var(--ink);
  margin: 0;
  max-width: 38ch;
}

/* =========================================================
   PRODUCT CATEGORIES
   ========================================================= */
.catalog {
  padding-block: var(--space-section);
}

.catalog__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(3rem, 6vw, 4rem);
}

.product__num {
  display: block;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--espresso);
  margin: 1.4rem 0 0.7rem;
}

.product__title {
  font-size: clamp(1.5rem, 2.6vw, 1.95rem);
  line-height: 1.12;
  margin-bottom: 0.8rem;
  color: var(--ink);
}

.product__copy {
  font-size: 0.96rem;
  color: var(--ink);
  margin: 0 0 1.25rem;
}

/* Text link with hairline underline (ink — kept neutral) */
.text-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.2rem;
  transition: border-color 0.18s ease;
}
.text-link:hover {
  border-color: var(--ink);
}

/* =========================================================
   ABOUT / STORY
   ========================================================= */
.about {
  padding-block: var(--space-section);
}

.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.section-title--about {
  margin-bottom: 0;
  max-width: 18ch;
}

.about__body p {
  font-size: 1.04rem;
  color: var(--ink);
  margin: 0 0 1.3rem;
  max-width: 58ch;
}
.about__body p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   SHOWROOM / VISIT — dark section (Charcoal)
   ========================================================= */
.visit {
  background: var(--charcoal);
  color: var(--warm-white);
  padding-block: var(--space-section);
}

.visit__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}

.section-title--visit {
  color: var(--warm-white);
  margin-bottom: 1.6rem;
}

.visit__copy {
  font-size: 1.02rem;
  color: rgba(248, 245, 239, 0.82);
  max-width: 46ch;
  margin: 0 0 2.4rem;
}

/* Visit details list */
.visit__details {
  margin: 3rem 0 0;
  display: grid;
  gap: 1.75rem;
  border-top: 1px solid var(--hairline-light);
  padding-top: 2rem;
}

.visit__detail dt {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(248, 245, 239, 0.6);
  margin-bottom: 0.5rem;
}

.visit__detail dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--warm-white);
}

.visit__detail dd a {
  color: var(--warm-white);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-light);
  transition: border-color 0.18s ease;
}
.visit__detail dd a:hover {
  border-color: var(--warm-white);
}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer {
  background: var(--ink);
  color: var(--warm-white);
  padding-top: clamp(3rem, 6vw, 4.5rem);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.footer__wordmark {
  height: 52px;
  width: auto;
  margin-bottom: 1rem;
}

.footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(248, 245, 239, 0.7);
  margin: 0;
}

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
}

.footer__nav a {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(248, 245, 239, 0.85);
  text-decoration: none;
  transition: color 0.18s ease;
}
.footer__nav a:hover {
  color: var(--warm-white);
}

.footer__contact {
  font-style: normal;
  font-size: 0.92rem;
  line-height: 1.7;
  color: rgba(248, 245, 239, 0.75);
}
.footer__contact a {
  color: var(--warm-white);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-light);
}
.footer__contact a:hover {
  border-color: var(--warm-white);
}

.footer__base {
  border-top: 1px solid var(--hairline-light);
  padding-block: 1.6rem;
}

.footer__base p {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(248, 245, 239, 0.55);
}

/* =========================================================
   RESPONSIVE — mobile-first; layer in the editorial grid
   ========================================================= */

/* --- Up to 760px: mobile nav becomes a panel --- */
@media (max-width: 760px) {
  .nav__toggle {
    display: flex;
  }

  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--warm-white);
    border-bottom: 1px solid var(--hairline);
    padding: 0.5rem var(--gutter) 1.5rem;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.28s ease, visibility 0s linear 0.28s;
  }

  .nav__menu.is-open {
    max-height: 70vh;
    visibility: visible;
    transition: max-height 0.28s ease, visibility 0s;
  }

  .nav__menu li {
    width: 100%;
    border-top: 1px solid var(--hairline);
  }
  .nav__menu li:first-child {
    border-top: 0;
  }

  .nav__menu a {
    display: block;
    width: 100%;
    padding: 1rem 0;
    font-size: 0.85rem;
  }

  .nav__cta {
    border-bottom: 1px solid var(--hairline);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav__menu,
  .link-cta__rule,
  .header__inner,
  .header__wordmark {
    transition: none !important;
  }
}

/* --- 620px and up: 2-up value/product grids --- */
@media (min-width: 620px) {
  .values__grid {
    grid-template-columns: 1fr 1fr;
  }
  .catalog__grid {
    grid-template-columns: 1fr 1fr;
  }
  /* First product spans full width for editorial rhythm */
  .catalog__grid .product:first-child {
    grid-column: 1 / -1;
  }
  .catalog__grid .product:first-child .photo--product .photo__frame {
    aspect-ratio: 16 / 7;
  }
}

/* --- 900px and up: full asymmetric editorial layout --- */
@media (min-width: 900px) {
  /* Hero: type left (wider), photo right */
  .hero__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(3rem, 5vw, 5rem);
  }

  /* Values: 4 across */
  .values__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Catalog: 3 even columns, none spanning */
  .catalog__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .catalog__grid .product:first-child {
    grid-column: auto;
  }
  .catalog__grid .product:first-child .photo--product .photo__frame {
    aspect-ratio: 4 / 5;
  }

  /* About: label column + body column (asymmetric) */
  .about__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(3rem, 6vw, 5.5rem);
    align-items: start;
  }

  /* Visit: info left, photo right */
  .visit__grid {
    grid-template-columns: 1.1fr 0.9fr;
  }
  .visit__details {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 2.5rem;
  }
  .visit__detail--full {
    grid-column: 1 / -1;
  }

  /* Footer: three columns */
  .footer__inner {
    grid-template-columns: 1.4fr 1fr 1fr;
    align-items: start;
  }
}

/* --- Large screens: a touch more air on the hero headline --- */
@media (min-width: 1200px) {
  .hero__headline {
    font-size: 5.4rem;
  }
}

/* =========================================================
   LUXURY ELEVATION PASS — North Scottsdale
   Warmth, printed-paper tactility, and a quiet choreographed
   reveal, layered on top of the editorial base. Palette-locked;
   all motion respects prefers-reduced-motion.
   ========================================================= */

:root {
  /* Warm sand — Warm White carrying a whisper of Espresso (no new hue) */
  --sand: #F1E9DC;
  --sand-deep: #ECE3D2;
  /* A hair more vertical air for the luxury tier */
  --space-section: clamp(4.5rem, 9.5vw, 9.5rem);
}

body {
  line-height: 1.7;
}

/* Faint film grain — printed-paper tactility. Opacity only, palette-neutral. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Warmth behind the hero — a low desert wash, a breath of copper at the top */
.hero {
  background:
    radial-gradient(115% 85% at 88% -10%, rgba(164, 76, 30, 0.055), transparent 58%),
    linear-gradient(180deg, var(--sand) 0%, var(--warm-white) 72%);
}

/* The maker's-hand story sits in a warm band — warmth + editorial rhythm */
.about {
  background: var(--sand);
  border-block: 1px solid var(--hairline);
}
/* Drop the duplicate hairlines that bracket the now-banded About section */
.catalog + .rule,
.about + .rule {
  display: none;
}

/* Premium, restrained product interaction — the image lifts on hover */
.photo--product .photo__frame {
  transition: transform 0.55s var(--ease-lux),
    box-shadow 0.55s ease, border-color 0.3s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .product:hover .photo--product .photo__frame {
    transform: translateY(-5px);
    box-shadow: 0 22px 48px -30px rgba(18, 25, 31, 0.5);
    border-color: rgba(18, 25, 31, 0.22);
  }
}

/* Quiet choreographed reveal (JS adds .reveals-on + .js-reveal, then .is-visible).
   Uses a keyframe animation with `both` fill so it ALWAYS settles visible — a
   transition here can stick at opacity:0 on some Chrome compositing paths. */
body.reveals-on .js-reveal {
  opacity: 0;
}
body.reveals-on .js-reveal.is-visible {
  animation: sew-reveal-in 0.8s var(--ease-lux) var(--reveal-delay, 0ms) both;
}
@keyframes sew-reveal-in {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.reveals-on .js-reveal {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}

/* =========================================================
   CONVERSION + SEO PASS — proof strip, booking form,
   persistent CTA, a11y target sizes, intentional placeholders.
   ========================================================= */

/* Larger nav tap targets (WCAG 2.5.8) */
.nav__menu a {
  padding-block: 0.55rem;
}

/* Placeholder panels read as intentional tonal blocks, not "missing" */
.photo__frame {
  background: linear-gradient(135deg, rgba(63, 49, 30, 0.07), rgba(63, 49, 30, 0.02));
}

/* ---------- Proof / trust strip ---------- */
.proof {
  padding-block: clamp(2.75rem, 5vw, 4.25rem);
}
.proof__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
}
.proof__item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
}
.proof__num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  line-height: 1.05;
  color: var(--ink);
}
.proof__label {
  font-size: 0.95rem;
  color: var(--espresso);
  max-width: 30ch;
}
@media (min-width: 720px) {
  .proof__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
  .proof__item {
    border-top: 0;
    border-left: 1px solid var(--hairline);
    padding-top: 0.25rem;
    padding-left: clamp(1.5rem, 3vw, 2.5rem);
  }
  .proof__item:first-child {
    border-left: 0;
    padding-left: 0;
  }
}

/* ---------- Booking form (in the dark Visit section) ---------- */
.booking {
  margin: 0 0 2.75rem;
  display: grid;
  gap: 1.1rem;
  max-width: 34rem;
}
.booking__row {
  display: grid;
  gap: 1.1rem;
}
@media (min-width: 560px) {
  .booking__row {
    grid-template-columns: 1fr 1fr;
  }
}
.field {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.field label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(248, 245, 239, 0.74);
}
.field__opt {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(248, 245, 239, 0.62);
}
.field input,
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--warm-white);
  background: rgba(248, 245, 239, 0.05);
  border: 1px solid var(--hairline-light);
  border-radius: 4px;
  padding: 0.72rem 0.85rem;
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.field textarea {
  resize: vertical;
  min-height: 3.4rem;
}
/* custom chevron for the select (warm-white) */
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23F8F5EF' stroke-opacity='0.6' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--copper);
  background: rgba(248, 245, 239, 0.08);
}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--warm-white); /* AA-safe non-text contrast on Charcoal */
  outline-offset: 2px;
}
.btn--book {
  justify-self: start;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  background: var(--warm-white);
  border: 0;
  border-radius: 4px;
  padding: 0.9rem 1.6rem;
  cursor: pointer;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.btn--book:hover {
  transform: translateY(-1px);
}
.btn--book:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}
.booking__status {
  display: block;
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(248, 245, 239, 0.92);
  min-height: 1px;
}
.booking__status.is-err {
  border-left: 2px solid var(--copper);
  padding-left: 0.7rem;
}
.booking__fineprint {
  display: block;
  font-size: 0.82rem;
  color: rgba(248, 245, 239, 0.5);
}

/* ---------- Persistent "Book a Visit" CTA ---------- */
.book-fab {
  position: fixed;
  z-index: 200;
  right: 1.5rem;
  bottom: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--warm-white);
  background: var(--ink);
  border: 1px solid rgba(248, 245, 239, 0.16);
  padding: 0.9rem 1.45rem;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 14px 32px -14px rgba(18, 25, 31, 0.55);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  visibility: hidden; /* removes the link from the tab order while hidden */
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.18s ease,
    visibility 0s linear 0.3s;
}
body.show-book-fab .book-fab {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.18s ease,
    visibility 0s linear 0s;
}
.book-fab:hover {
  background: var(--charcoal);
}
@media (max-width: 600px) {
  .book-fab {
    right: 0;
    left: 0;
    bottom: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    text-align: center;
    padding: 1rem;
    box-shadow: 0 -10px 28px -14px rgba(18, 25, 31, 0.5);
  }
  body.show-book-fab .site-footer {
    padding-bottom: 4.75rem;
  }
  /* While the Visit section (and its own submit button) is on screen,
     drop the bottom bar so it never overlaps the form. */
  body.show-book-fab.at-visit .book-fab {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .book-fab {
    transition: opacity 0.2s linear;
    transform: none;
  }
}

/* =========================================================
   WCAG 1.4.11 non-text contrast — dark-section fixes
   ========================================================= */
/* Form field borders to >=3:1 against Charcoal */
.field input,
.field select,
.field textarea {
  border-color: rgba(248, 245, 239, 0.32);
}
/* Focus rings on dark surfaces use Warm White (copper is <3:1 on Charcoal) */
.visit a:focus-visible,
.visit button:focus-visible,
.btn--book:focus-visible,
.book-fab:focus-visible,
.site-footer a:focus-visible {
  outline-color: var(--warm-white);
}

/* =========================================================
   BOOKING + GALLERY PASS — pronounced CTA, Google scheduler,
   click-through galleries, "coming soon" placeholders.
   ========================================================= */

/* Pronounced hero CTA — solid Ink button with a copper "Edge" */
.btn-primary {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--warm-white);
  background: var(--ink);
  padding: 1rem 1.9rem;
  border-radius: 2px;
  text-decoration: none;
  box-shadow: inset 0 -3px 0 var(--copper);
  transition: transform 0.18s ease, background 0.18s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  background: var(--charcoal);
}

/* Placeholder panels read as intentional "coming soon", not raw notes */
.photo__frame {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.45rem;
}
.photo__frame::after {
  content: none; /* drop the old corner "Photo coming" tag */
}
.photo__soon {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--espresso);
  opacity: 0.62;
}
.photo__hint {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.95rem, 1.5vw, 1.2rem);
  line-height: 1.35;
  color: var(--espresso);
  opacity: 0.9;
  max-width: 28ch;
}
.photo__frame--dark .photo__soon {
  color: rgba(248, 245, 239, 0.6);
}
.photo__frame--dark .photo__hint {
  color: rgba(248, 245, 239, 0.85);
}

/* Click-through / auto-rotating product gallery */
.carousel {
  position: relative;
  overflow: hidden;
}
.carousel__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform 0.6s var(--ease-lux);
}
.carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  margin: 0;
}
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--hairline);
  background: rgba(248, 245, 239, 0.9);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.carousel:hover .carousel__arrow,
.carousel:focus-within .carousel__arrow {
  opacity: 1;
}
.carousel__arrow--prev { left: 0.6rem; }
.carousel__arrow--next { right: 0.6rem; }
.carousel__arrow:hover { background: var(--warm-white); }
@media (hover: none) {
  .carousel__arrow { opacity: 1; } /* always visible on touch */
}
.carousel__dots {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.85rem;
}
.carousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--hairline);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.carousel__dot.is-active {
  background: var(--copper);
  transform: scale(1.3);
}
.carousel__dot:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .carousel__track { transition: none; }
}

/* Google Appointment Schedule embed (dark Visit section) */
.scheduler {
  margin: 0 0 1.1rem;
  border-radius: 8px;
  overflow: hidden;
  /* Light surface so Google's (transparent / theme-following) widget is legible
     on the dark Visit section. color-scheme:light keeps it from going dark-mode. */
  background: #ffffff;
  color-scheme: light;
  box-shadow: 0 20px 46px -26px rgba(0, 0, 0, 0.6);
}
.scheduler__frame {
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
  background: #ffffff;
  color-scheme: light;
}
@media (max-width: 560px) {
  .scheduler__frame { height: 740px; }
}
.visit__alt {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(248, 245, 239, 0.7);
  margin: 0 0 2.5rem;
}
.visit__alt a {
  color: var(--warm-white);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(248, 245, 239, 0.4);
}
.visit__alt a:hover {
  text-decoration-color: var(--warm-white);
}

/* =========================================================
   FINISHED-FURNITURE 2-up + RAW-SLABS feature section
   ========================================================= */
/* Clean 2-up grid for finished furniture (overrides the 3-up editorial rhythm) */
@media (min-width: 620px) {
  .catalog__grid--two {
    grid-template-columns: 1fr 1fr;
  }
  .catalog__grid--two .product:first-child {
    grid-column: auto;
  }
  .catalog__grid--two .product:first-child .photo--product .photo__frame {
    aspect-ratio: 4 / 5;
  }
}

/* Raw-slabs feature — carousel + maker-focused copy, side by side */
.slabs-feature {
  padding-block: var(--space-section);
}
.slabs__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.photo--slab .photo__frame {
  aspect-ratio: 4 / 3;
}
.slabs__copy .section-title {
  margin-bottom: 1.4rem;
}
.slabs__lead {
  font-size: 1.04rem;
  color: var(--ink);
  max-width: 46ch;
  margin: 0 0 1.8rem;
}
@media (min-width: 860px) {
  .slabs__grid {
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(3rem, 5vw, 5rem);
  }
}

/* =========================================================
   FINISHED-FURNITURE feature block + BOOKING MODAL
   ========================================================= */
/* Furniture feature — copy left, gallery right (mirrors the slabs block) */
.feature {
  padding-block: var(--space-section);
}
.feature__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.feature__lead {
  font-size: 1rem;
  color: var(--ink);
  max-width: 46ch;
  margin: 0 0 1.2rem;
}
.photo--feature .photo__frame {
  aspect-ratio: 3 / 2;
}
@media (min-width: 860px) {
  .feature__grid {
    grid-template-columns: 0.95fr 1.05fr;
    gap: clamp(3rem, 5vw, 5rem);
  }
}

/* Light button variant for the dark Visit section */
.btn-primary--light {
  color: var(--ink);
  background: var(--warm-white);
}
.btn-primary--light:hover {
  background: #ffffff;
}
.visit .btn-primary {
  margin-bottom: 1.25rem;
}

/* Booking modal */
.modal[hidden] {
  display: none;
}
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.modal.is-open {
  opacity: 1;
}
.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 25, 31, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(560px, 100%);
  max-height: 90vh;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  color-scheme: light;
  box-shadow: 0 40px 84px -30px rgba(0, 0, 0, 0.6);
  transform: translateY(14px) scale(0.99);
  transition: transform 0.25s ease;
}
.modal.is-open .modal__dialog {
  transform: none;
}
.modal__close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  opacity: 0.6;
  font-size: 1.9rem;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  transition: opacity 0.18s ease, background 0.18s ease;
}
.modal__close:hover {
  opacity: 1;
  background: rgba(18, 25, 31, 0.07);
}
.modal__close:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.modal__frame {
  display: block;
  width: 100%;
  height: min(78vh, 720px);
  border: 0;
  background: #ffffff;
}
body.modal-open {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .modal,
  .modal__dialog {
    transition: opacity 0.2s linear;
    transform: none;
  }
}

/* =========================================================
   ELEVATION PASS — type scale, tonal rhythm, material depth,
   signature moments, premium micro-motion. Palette-locked.
   (Appended last so it intentionally overrides earlier rules.)
   ========================================================= */

/* ---- 1.1 Fluid type scale with one dramatic display tier ---- */
:root {
  --step-hero: clamp(2.5rem, 6vw, 4.8rem);
  --step-title: clamp(1.8rem, 3.9vw, 2.9rem);
  --step-value: 1.4rem;
  --sand: #F1E9DC;
  --sand-deep: #ECE2D1;
  --space-lg: clamp(7rem, 13vw, 13rem);
  --space-md: clamp(4.5rem, 9.5vw, 9.5rem);
  --space-sm: clamp(2.5rem, 5vw, 4.25rem);
}
.hero__headline {
  font-size: var(--step-hero);
  line-height: 1.04;            /* was 0.96 — Cormorant reads cramped sub-1.0 */
  letter-spacing: -0.018em;     /* was -0.03em — over-tight */
  font-weight: 400;
  text-wrap: balance;
  font-feature-settings: "liga" 1, "dlig" 1;
}
@media (min-width: 1200px) {
  .hero__headline { font-size: var(--step-hero); } /* retire the old fixed 5.4rem */
}
.section-title {
  font-size: var(--step-title);
  line-height: 1.04;
  font-weight: 400;
  text-wrap: balance;
}
.value__title { font-size: var(--step-value); font-weight: 500; }
.eyebrow { letter-spacing: 0.18em; }
.value__copy, .product__copy, .feature__lead, .slabs__lead { line-height: 1.62; }

/* ---- 1.3 Differential vertical rhythm ---- */
.about, .visit { padding-block: var(--space-lg); }
.proof { padding-block: var(--space-sm); }

/* ---- 1.2 Tonal architecture: section background rhythm ---- */
.about { background: var(--sand-deep); }
.proof { background: var(--sand); }
.bleed { width: 100vw; margin-inline: calc(50% - 50vw); }

/* ---- 1.4 + §4 Material-depth "specimen plate" placeholders ---- */
.photo__frame {
  position: relative;
  background:
    radial-gradient(120% 90% at 50% 38%, transparent 55%, rgba(18, 25, 31, 0.07)),
    repeating-linear-gradient(180deg, rgba(63, 49, 30, 0.05) 0 1px, transparent 1px 15px),
    linear-gradient(135deg, rgba(63, 49, 30, 0.08), rgba(63, 49, 30, 0.02));
  box-shadow:
    inset 0 1px 0 rgba(248, 245, 239, 0.5),
    inset 0 0 0 1px var(--hairline),
    inset 0 0 44px rgba(18, 25, 31, 0.06);
  border: 0;
}
/* copper registration crop marks (decorative, 40% — exempt from the copper cap) */
.photo__frame::before,
.photo__frame::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(164, 76, 30, 0.4);
  top: 14px;
  left: 14px;
  border-right: 0;
  border-bottom: 0;
  background: none;
}
.photo__frame::after {
  top: auto;
  left: auto;
  bottom: 14px;
  right: 14px;
  border: 1.5px solid rgba(164, 76, 30, 0.4);
  border-left: 0;
  border-top: 0;
}
.photo__soon {
  position: absolute;
  bottom: 13px;
  left: 16px;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  opacity: 0.45;
}
.photo__hint {
  font-style: italic;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  opacity: 0.92;
}
.photo__frame--dark {
  background:
    radial-gradient(120% 90% at 50% 38%, transparent 55%, rgba(0, 0, 0, 0.25)),
    repeating-linear-gradient(180deg, rgba(248, 245, 239, 0.04) 0 1px, transparent 1px 15px),
    linear-gradient(135deg, rgba(248, 245, 239, 0.06), rgba(248, 245, 239, 0.01));
  box-shadow:
    inset 0 0 0 1px var(--hairline-light),
    inset 0 0 44px rgba(0, 0, 0, 0.25);
}
/* duotone hook so real photos inherit one art-directed look at swap time */
.photo__frame img { filter: sepia(0.2) saturate(0.85) contrast(1.06) brightness(1.02); }

/* ---- 2.2 Numbered editorial spine: oversized ghost numerals ---- */
[data-index] { position: relative; }
[data-index]::before {
  content: attr(data-index);
  position: absolute;
  top: clamp(1.5rem, 4vw, 3rem);
  left: var(--gutter);
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(4rem, 9vw, 8rem);
  line-height: 1;
  color: rgba(18, 25, 31, 0.06);
  pointer-events: none;
  z-index: 0;
}
.visit[data-index]::before { color: rgba(248, 245, 239, 0.07); }
[data-index] > .container { position: relative; z-index: 1; }

/* ---- 3.3 "Now on the floor" species marquee ---- */
.marquee {
  border-block: 1px solid var(--hairline);
  overflow: hidden;
  padding-block: 1.1rem;
}
.marquee__track {
  display: flex;
  gap: 0;
  width: max-content;
  white-space: nowrap;
}
.marquee__group {
  display: flex;
  align-items: center;
  padding-right: 0; /* items carry their own spacing */
}
.marquee__item {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--espresso);
  padding-inline: 1.6rem;
}
.marquee__sep {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  background: var(--copper);
  opacity: 0.85;
  flex: 0 0 auto;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee__track { animation: marquee 38s linear infinite; }
  .marquee:hover .marquee__track { animation-play-state: paused; }
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---- 3.1 Full-bleed Ink pull-quote band (the dark crescendo) ---- */
.quote-band {
  background: var(--ink);
  color: var(--warm-white);
  padding-block: var(--space-lg);
  text-align: center;
}
.quote-band__q {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.4rem, 2.7vw, 1.95rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 22ch;
  margin: 0 auto;
  text-wrap: balance;
}
.quote-band__cite {
  display: block;
  margin-top: 0.9rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248, 245, 239, 0.55);
}

/* ---- 2.3 Values: sticky title + big serif numerals, no card borders ---- */
.value__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--espresso);
  letter-spacing: 0;
  text-transform: none;
  margin: 0;
}
.value { border-top: 0; padding-top: 0; }
.value__title { margin-top: 0.4rem; }
@media (min-width: 900px) {
  .values .container { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(3rem, 6vw, 6rem); align-items: start; }
  .values__head { position: sticky; top: 120px; }
  .values__grid { grid-template-columns: 1fr; gap: clamp(2.75rem, 4vw, 3.75rem); }
  .value { display: grid; grid-template-columns: 3.5rem 1fr; column-gap: 1.5rem; align-items: baseline; }
  .value > .value__num { grid-column: 1; grid-row: 1 / 3; align-self: start; }
}

/* ---- 2.7 Proof: big copper numerals, oldstyle figures, short dividers ---- */
.proof__num {
  font-size: clamp(2.6rem, 5vw, 4rem);
  color: var(--ink);
  font-feature-settings: "onum" 1;
  line-height: 1;
}
.proof__item:first-child .proof__num { color: var(--copper); }
.proof__item { border-top: 0; padding-top: 0; }
@media (min-width: 720px) {
  .proof__item { border-left: 1px solid var(--hairline); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
  .proof__item:first-child { border-left: 0; padding-left: 0; }
  .proof__item:nth-child(2) { margin-top: 1.5rem; }
}

/* ---- 2.1 Hero: a commanding image-stage that bleeds to the edge ---- */
.hero__copy { max-width: 32ch; }
@media (min-width: 900px) {
  .hero { align-items: stretch; }
  .hero__grid {
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: center;
  }
  .hero__lead { align-self: center; }
  .hero .photo--hero {
    margin-right: calc(50% - 50vw);
  }
  .hero .photo--hero .photo__frame {
    aspect-ratio: auto;
    height: clamp(480px, 52vw, 720px);
    border-left: 2px solid var(--copper);
  }
}
.hero__meta {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--espresso);
  opacity: 0.7;
  margin: 0 0 1.4rem;
}

/* ---- 5.6 Directional underline-wipe on links ---- */
.nav__menu a,
.footer__nav a,
.text-link,
.visit__detail dd a,
.visit__alt a {
  position: relative;
}
.nav__menu a::after,
.footer__nav a::after,
.visit__detail dd a::after,
.visit__alt a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s var(--ease-lux);
}
.nav__menu a:hover::after,
.footer__nav a:hover::after,
.visit__detail dd a:hover::after,
.visit__alt a:hover::after { transform: scaleX(1); }
.nav__cta { border-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .nav__menu a::after, .footer__nav a::after,
  .visit__detail dd a::after, .visit__alt a::after { transition: none; }
}

/* ---- 5.8 Scroll-progress copper hairline ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--copper);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 200;
  pointer-events: none;
}

/* ---- 2.5 About: pinned title rail ---- */
@media (min-width: 900px) {
  .about__lead { position: sticky; top: 20vh; align-self: start; }
}
.about__prov {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--espresso);
  margin: 1rem 0 0;
}

/* ---- 2.8 Visit: lit warm wash + designed threshold ---- */
.visit {
  background:
    radial-gradient(90% 70% at 100% 0%, rgba(164, 76, 30, 0.06), transparent 55%),
    var(--charcoal);
}
.visit__detail dd, .visit__detail--addr {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12rem;
}
.threshold {
  height: 120px;
  background: linear-gradient(180deg, var(--sand) 0%, var(--charcoal) 100%);
}

/* ---- To-the-Trade band (designer ICP) ---- */
.trade {
  background: var(--sand-deep);
  padding-block: var(--space-sm);
}
.trade__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 2rem; }
.trade__line { font-family: var(--font-display); font-size: clamp(1.28rem, 2.5vw, 1.85rem); margin: 0; flex: 1 1 20ch; }

/* =========================================================
   Robust keyframe reveals — opacity TRANSITIONS can stick at
   their start value in some Chrome configs (verified live);
   keyframe ANIMATIONS settle reliably via `both` fill.
   ========================================================= */
.modal.is-open { animation: sew-modal-in 0.22s ease both; }
.modal.is-open .modal__dialog { animation: sew-dialog-in 0.3s var(--ease-lux) both; }
@keyframes sew-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sew-dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
body.show-book-fab .book-fab { animation: sew-fab-in 0.3s ease both; }
@keyframes sew-fab-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal.is-open, .modal.is-open .modal__dialog, body.show-book-fab .book-fab {
    animation-duration: 0.01ms;
  }
}

/* =========================================================
   ROUND 2 REFINEMENT (luxury-critique panel) — appended last,
   overrides earlier rules. Real font weights live in fonts.css.
   ========================================================= */

/* ---- R2.1 Copper discipline — pull the accent back to ~3 moments
   (hero CTA inset edge, hero photo keyline, scroll-progress). ---- */
.marquee__sep { background: rgba(63, 49, 30, 0.30); opacity: 1; }
.proof__item:first-child .proof__num { color: var(--ink); }
.photo__frame::before,
.photo__frame::after { border-color: rgba(63, 49, 30, 0.28); }

/* ---- R2.2 Warmer, branded specimen wells: drop the graph-paper grain,
   add the two-peak ridge motif, vary grain angle per section. ---- */
.photo__frame {
  --grain-angle: 128deg;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 72'%3E%3Cpath d='M0 58 L52 34 L90 45 L138 15 L172 39 L214 25 L280 52' fill='none' stroke='%2312191F' stroke-opacity='0.16' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center 58% / clamp(150px, 56%, 320px) auto no-repeat,
    radial-gradient(125% 95% at 50% 36%, transparent 50%, rgba(18, 25, 31, 0.06)),
    repeating-linear-gradient(var(--grain-angle), rgba(63, 49, 30, 0.05) 0 1.5px, rgba(63, 49, 30, 0.012) 1.5px 12px),
    linear-gradient(162deg, var(--sand-deep), rgba(63, 49, 30, 0.04));
}
.photo--hero .photo__frame { --grain-angle: 135deg; }
.photo--feature .photo__frame { --grain-angle: 96deg; }
.photo--slab .photo__frame { --grain-angle: 7deg; }
.photo--visit .photo__frame { --grain-angle: 120deg; }
.photo__frame--dark {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 72'%3E%3Cpath d='M0 58 L52 34 L90 45 L138 15 L172 39 L214 25 L280 52' fill='none' stroke='%23F8F5EF' stroke-opacity='0.20' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center 58% / clamp(150px, 56%, 320px) auto no-repeat,
    radial-gradient(125% 95% at 50% 36%, transparent 50%, rgba(0, 0, 0, 0.22)),
    repeating-linear-gradient(120deg, rgba(248, 245, 239, 0.04) 0 1.5px, rgba(248, 245, 239, 0.008) 1.5px 12px),
    linear-gradient(162deg, rgba(248, 245, 239, 0.05), rgba(248, 245, 239, 0.012));
}

/* ---- R2.3 Hero rebalance — shorter, top-aligned, contained plate ---- */
@media (min-width: 900px) {
  .hero__grid { align-items: start; }
  .hero__lead { align-self: start; }
  .hero .photo--hero { margin-right: 0; }
  .hero .photo--hero .photo__frame {
    height: clamp(440px, 44vw, 580px);
    border-left-width: 2px;
  }
}

/* ---- R2.4 Type plumbing — calmer leading, uniform measure,
   receded body ink, oldstyle figures on serif numerals. ---- */
body { line-height: 1.62; }
.about__body { line-height: 1.62; }
.hero__copy, .feature__lead, .slabs__lead, .about__body p, .value__copy {
  color: rgba(18, 25, 31, 0.80);
}
.feature__lead, .slabs__lead, .visit__copy { max-width: 52ch; }
.about__body p { max-width: 56ch; }
.value__num, [data-index]::before { font-feature-settings: "onum" 1; }
.hero__headline { font-feature-settings: "liga" 1; }

/* ---- R2.5 Decorative subtraction — single numbering via softened ghost ---- */
[data-index]::before { color: rgba(18, 25, 31, 0.05); }
.visit[data-index]::before { color: rgba(248, 245, 239, 0.06); }

/* ---- R2.6 Differentiate mirrored galleries + breathe the back half ---- */
.feature--furniture { padding-block: clamp(1.5rem, 3vw, 2.4rem) var(--space-md); }
.slabs-feature { padding-block: var(--space-lg); }
.trade { padding-block: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) {
  .about__grid { align-items: start; }
  .about__lead { position: sticky; top: 116px; }
}

/* ---- R2.7 Hero CTA row + browse-first secondary link ---- */
.hero__cta-row {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 3vw, 2rem);
  flex-wrap: wrap;
}
.hero__secondary {
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--espresso);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.hero__secondary:hover { color: var(--ink); }

/* ---- R2.8 Honest "photography in progress" reassurance ---- */
.feature__note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--espresso);
  max-width: 64ch;
  margin: 0 0 1rem;
}

/* ---- R2.9 Square the primary button; soften the desktop floating CTA ---- */
.btn-primary { border-radius: 0; }
@media (min-width: 720px) {
  .book-fab {
    background: var(--warm-white);
    color: var(--ink);
    border: 1px solid var(--hairline);
    box-shadow: 0 10px 30px -12px rgba(18, 25, 31, 0.28);
    padding: 0.72rem 1.25rem;
    font-size: 0.72rem;
  }
}

/* ---- R2.10 Branded booking-modal header before the Google iframe ---- */
.modal__head {
  background: var(--warm-white);
  color: var(--ink);
  padding: clamp(1.4rem, 3vw, 1.9rem) clamp(1.5rem, 4vw, 2.4rem) clamp(1rem, 2.5vw, 1.35rem);
  border-bottom: 1px solid var(--hairline);
}
.modal__wordmark { height: 32px; width: auto; margin-bottom: 0.55rem; display: block; }
.modal__title {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 500;
  line-height: 1.1;
  margin: 0 0 0.3rem;
  color: var(--ink);
}
.modal__reassure {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(18, 25, 31, 0.7);
  margin: 0;
  max-width: 48ch;
}
.modal__frame { height: min(62vh, 560px); }

/* =========================================================
   ROUND 3 POLISH (luxury-critique panel, final code pass to
   the code-alone ceiling) — appended last, overrides earlier.
   ========================================================= */

/* ---- R3.2 Cap empty wells so they stop out-massing the type ---- */
@media (min-width: 900px) {
  .hero .photo--hero .photo__frame { height: clamp(360px, 38vw, 480px); }
}
.photo--feature .photo__frame,
.photo--slab .photo__frame,
.photo--visit .photo__frame { max-height: 460px; }

/* ---- R3.6 Recess the plates with a finish (highlight + inner vignette) ---- */
.photo__frame {
  box-shadow:
    inset 0 1px 0 rgba(248, 245, 239, 0.5),
    inset 0 -44px 60px -44px rgba(18, 25, 31, 0.12),
    inset 0 0 0 1px var(--hairline);
}
.photo__frame--dark {
  box-shadow:
    inset 0 1px 0 rgba(248, 245, 239, 0.06),
    inset 0 -44px 60px -44px rgba(0, 0, 0, 0.30),
    inset 0 0 0 1px var(--hairline-light);
}

/* ---- R3.3 Proof strip: distinct scale for the numeral vs the phrases ---- */
.proof__item:first-child .proof__num { font-size: clamp(2.6rem, 5vw, 3.4rem); }
.proof__item:nth-child(2) .proof__num,
.proof__item:nth-child(3) .proof__num {
  font-weight: 500;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

/* ---- R3.4 Values: one numbering system (per-value numerals; drop the ghost) ---- */
.values[data-index]::before { display: none; }

/* ---- R3.7 Tonal wash so furniture → values → about read as 3 movements ---- */
.values { background: var(--sand); }

/* ---- R3.8 Marquee: slower drift + edge mask + slightly firmer separators ---- */
.marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track { animation-duration: 130s; will-change: transform; }
.marquee__sep { background: rgba(63, 49, 30, 0.45); }

/* ---- R3.9 Type-system refinements ---- */
.eyebrow { font-weight: 500; }
.section-title { max-width: 18ch; }
.section-title--about { max-width: 24ch; }

/* ---- R4 Hero headline sizing for the 2-line "Grown in Arizona. / Finished by hand."
   so each sentence sets on one line instead of ragged-wrapping. ---- */
.hero__headline { font-size: clamp(2.5rem, 5.4vw, 4.4rem); }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.18fr 0.82fr; }
}

/* ---- R5 Remove the oversized ghost section numerals (client request) ---- */
[data-index]::before { display: none !important; }

/* =========================================================
   DEPTH PASS (luxury-background research) — kills the "flat
   stacked blocks" feel with soft tonal seams, lit fills,
   perceptible grain, earned dark ramps, and warm vignettes.
   All STATIC (reduced-motion irrelevant), palette-locked
   (color-mix of existing tokens only), AA-safe (text fills
   untouched; overlays are pointer-events:none edge decor).
   Appended last; overrides earlier rules.
   ========================================================= */

/* Dissolve the hard hairline dividers (replaced by soft tonal seams) */
.rule { display: none; }

/* Seam / wash hosts */
.feature--furniture, .slabs-feature, .values, .about, .trade, .proof {
  position: relative; isolation: isolate;
}
.feature--furniture > *, .slabs-feature > *, .values > *,
.about > *, .trade > *, .proof > * { position: relative; z-index: 1; }

/* --- Soft tonal seams: a section's bottom bleeds into the color below it,
   sitting in the bottom padding so it never touches text. --- */
.values::after, .about::after, .slabs-feature::after, .trade::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 150px; z-index: 0; pointer-events: none;
}
.values::after        { background: linear-gradient(to bottom, transparent, var(--sand-deep)); }
.about::after         { background: linear-gradient(to bottom, transparent, var(--warm-white)); }
.slabs-feature::after { background: linear-gradient(to bottom, transparent, var(--sand-deep)); }
.trade::after         { background: linear-gradient(to bottom, transparent, var(--sand)); }

/* --- Per-section directional wash + faint warm radial "studio light" so the
   flat fills read as lit surfaces. Solid token stays the base/AA fallback. --- */
.feature--furniture {
  background-color: var(--warm-white);
  background-image:
    radial-gradient(120% 90% at 26% 14%, color-mix(in oklab, var(--warm-white) 92%, #fff) 0%, transparent 60%),
    linear-gradient(135deg, var(--warm-white) 0%, var(--sand) 130%);
}
.slabs-feature {
  background-color: var(--warm-white);
  background-image:
    radial-gradient(120% 90% at 74% 16%, color-mix(in oklab, var(--warm-white) 92%, #fff) 0%, transparent 60%),
    linear-gradient(135deg, var(--warm-white) 0%, var(--sand) 130%);
}
.values {
  background-color: var(--sand);
  background-image:
    radial-gradient(120% 85% at 28% 16%, color-mix(in oklab, var(--sand) 90%, #fff) 0%, transparent 58%),
    linear-gradient(135deg, var(--sand) 0%, color-mix(in oklab, var(--sand) 88%, var(--sand-deep)) 100%);
}
.about {
  background-color: var(--sand-deep);
  background-image:
    radial-gradient(120% 85% at 72% 14%, color-mix(in oklab, var(--sand-deep) 91%, #fff) 0%, transparent 58%),
    linear-gradient(135deg, var(--sand-deep) 0%, color-mix(in oklab, var(--sand-deep) 90%, var(--espresso)) 100%);
}
.proof {
  background-color: var(--sand);
  background-image:
    radial-gradient(120% 90% at 50% 10%, color-mix(in oklab, var(--sand) 91%, #fff) 0%, transparent 60%),
    linear-gradient(135deg, var(--sand) 0%, var(--sand-deep) 130%);
}
.trade {
  background-color: var(--sand-deep);
  background-image:
    linear-gradient(135deg, var(--sand-deep) 0%, color-mix(in oklab, var(--sand-deep) 90%, var(--espresso)) 130%);
}

/* --- Grain: lift the global paper tooth into the visible-but-refined band --- */
body::after { opacity: 0.06; }
/* Screen-blend grain on the big dark areas so Ink/Charcoal read as lit
   material rather than flat hex. */
.visit, .site-footer { position: relative; isolation: isolate; }
.visit > *, .site-footer > * { position: relative; z-index: 1; }
.visit::after, .site-footer::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='sewn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sewn)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* --- Earned dark ramps (darkness rationed to two moments) --- */
/* Tall, warm-routed descent into the Visit close (replaces the 120px hard cut) */
.threshold {
  height: 240px;
  background: linear-gradient(180deg,
    var(--sand) 0%,
    var(--sand-deep) 18%,
    color-mix(in oklab, var(--sand-deep) 55%, var(--espresso)) 46%,
    var(--espresso) 74%,
    var(--charcoal) 100%);
}
/* The ONE mid-page dark exhale: ease into (top) and out of (bottom) the Ink band,
   both ramps living in the band's own padding clear of the centered text. */
.quote-band { position: relative; isolation: isolate; }
.quote-band > * { position: relative; z-index: 1; }
.quote-band::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0;
  height: 150px; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--warm-white) 0%,
    color-mix(in oklab, var(--espresso) 60%, var(--ink)) 68%,
    var(--ink) 100%);
}
.quote-band::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 0;
  height: 150px; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    var(--ink) 0%,
    color-mix(in oklab, var(--espresso) 55%, var(--sand)) 44%,
    var(--sand) 100%);
}

/* --- Warm-espresso vignettes to seat the bands (gallery-wall depth) --- */
.values, .about { box-shadow: inset 0 0 120px rgba(63, 49, 30, 0.05); }
.visit, .site-footer { box-shadow: inset 0 38px 60px -44px rgba(8, 10, 12, 0.55); }

/* ---- Booking modal: robust fallback when the Google embed is blocked
   (mobile third-party iframe/cookie protection renders it blank) ---- */
.modal__fallback {
  font-family: var(--font-body);
  font-size: 0.76rem;
  line-height: 1.5;
  color: rgba(18, 25, 31, 0.6);
  margin: 0.6rem 0 0;
}
.modal__fallback a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.modal__newtab { font-weight: 600; }

.modal__mobile { display: none; }
.modal__mobile-lead {
  font-family: var(--font-body); font-size: 0.96rem; line-height: 1.55;
  color: var(--ink); margin: 0;
}
.modal__mobile-alt {
  font-family: var(--font-body); font-size: 0.85rem; color: rgba(18, 25, 31, 0.6); margin: 0;
}
.modal__mobile-alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 700px) {
  .modal__frame { display: none; }     /* the embed is unreliable on mobile */
  .modal__fallback { display: none; }  /* superseded by the panel below */
  .modal__mobile {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 1.1rem; padding: clamp(1.4rem, 5vw, 2rem); background: #fff;
  }
  .modal__mobile .btn-primary { align-self: stretch; text-align: center; }
}

/* =========================================================
   COPPER EXPANSION — Strategy "Label & the Edge" + interaction
   layer. ~3 → ~9 quiet copper line/label moments. Copper stays
   a line/label/edge accent: NO fills, NO copper on headlines /
   backgrounds / dark-section text. (Dial up/down levers noted.)
   ========================================================= */

/* At-rest: section eyebrows become the copper "label" color.
   LIGHT sections only — dark-section .eyebrow--light stays warm-white
   (copper on Ink ≈ 3:1 fails AA). 600 weight holds the small size at ~4.5:1. */
.eyebrow:not(.eyebrow--light) { color: var(--copper); font-weight: 600; }

/* Interaction: every link's underline-wipe lights up in the brand accent
   (absent at rest — the idle page is unchanged). */
.nav__menu a::after,
.footer__nav a::after,
.visit__detail dd a::after,
.visit__alt a::after { background: var(--copper); }

/* The one converting nav item gets a standing copper underline (the logo's "Edge"). */
.nav__menu a.nav__cta::after { transform: scaleX(1); background: var(--copper); }

/* Text-link hover warms to copper; the inline → / ↗ arrow inherits color. */
.text-link:hover { color: var(--copper); border-color: var(--copper); }

/* Primary button: deepen the copper edge on hover (body stays ink — never filled). */
.btn-primary:hover { box-shadow: inset 0 -4px 0 var(--copper); }

/* Floating CTA: copper keyline on hover (body stays dark — never copper-filled). */
.book-fab:hover { border-color: var(--copper); box-shadow: inset 0 -2px 0 var(--copper); }

/* ---- Dribbble steal: unified motion tokens + italic 'hand.' hero accent ---- */
:root { --ease-lux: cubic-bezier(0.16, 1, 0.3, 1); --stagger: 75ms; }
/* the artisan word set in Cormorant italic — the "hand" shows in the letterform */
.hero__hand { font-style: italic; }

/* =========================================================
   PHOTO-GATED SETUP (Dribbble steal) — make real photos land
   art-directed: one consistent warm grade, a clip-path "curtain"
   reveal (works on placeholders NOW + photos later), Ken-Burns
   hero settle. Dormant where there's no <img>.
   ========================================================= */

/* A real <img> fills the specimen frame and inherits ONE warm grade,
   so mismatched phone photos read as a single collection. */
.photo__frame img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(0.88) contrast(1.05) sepia(0.12) brightness(0.97);
}

/* Directional clip-path "curtain" reveal on every plate. Keyframe with `both`
   fill always settles fully open (can't stick). Only runs when motion is on
   (body.reveals-on is added by JS only when prefers-reduced-motion is off). */
@keyframes sew-wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
body.reveals-on .js-reveal.is-visible .photo__frame {
  animation: sew-wipe 0.85s var(--ease-lux) var(--reveal-delay, 0ms) both;
}

/* Ken-Burns settle for a future hero photo (dormant until a real <img> exists). */
@keyframes sew-kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: no-preference) {
  .photo--hero .photo__frame img { animation: sew-kenburns 1.8s var(--ease-lux) both; transform-origin: 60% 38%; }
}

/* =========================================================
   SMOOTHER SECTION TRANSITIONS — the depth-pass ramps were
   short + routed through a muddy gray midtone (read as a band).
   Now: taller, eased MULTI-STOP gradients routed entirely
   through WARM wood tones (white→sand→sand-deep→espresso→ink),
   so every transition dissolves smoothly. Overrides above.
   ========================================================= */

/* Warm seams: taller + gentler (small tonal steps, won't band) */
.values::after, .about::after, .slabs-feature::after, .trade::after {
  height: clamp(160px, 20vh, 250px);
}

/* Mid-page dark exhale — into the Ink band (top): warm-routed, no gray */
.quote-band::before {
  height: clamp(170px, 22vh, 270px);
  background: linear-gradient(to bottom,
    var(--warm-white) 0%,
    var(--sand) 17%,
    var(--sand-deep) 32%,
    color-mix(in oklab, var(--sand-deep) 50%, var(--espresso)) 48%,
    var(--espresso) 67%,
    color-mix(in oklab, var(--espresso) 52%, var(--ink)) 85%,
    var(--ink) 100%);
}
/* ...and out of it (bottom), back to the warm Values section */
.quote-band::after {
  height: clamp(170px, 22vh, 270px);
  background: linear-gradient(to bottom,
    var(--ink) 0%,
    color-mix(in oklab, var(--espresso) 52%, var(--ink)) 16%,
    var(--espresso) 33%,
    color-mix(in oklab, var(--sand-deep) 50%, var(--espresso)) 52%,
    var(--sand-deep) 70%,
    var(--sand) 88%,
    var(--sand) 100%);
}

/* The long warm descent into the dark Visit close */
.threshold {
  height: clamp(240px, 32vh, 360px);
  background: linear-gradient(180deg,
    var(--sand) 0%,
    var(--sand-deep) 13%,
    color-mix(in oklab, var(--sand-deep) 50%, var(--espresso)) 31%,
    var(--espresso) 54%,
    color-mix(in oklab, var(--espresso) 52%, var(--ink)) 76%,
    var(--ink) 92%,
    var(--charcoal) 100%);
}

/* =========================================================
   SUBTLE TRANSITIONS (client: the tall dark-dimming ramps were
   too dramatic / "hideous"). Replace with SHORT, soft, warm
   feathers — the dark bands get a quiet gentle edge, not a big
   dimming zone. Warm seams kept short + light. Overrides above.
   ========================================================= */
.values::after, .about::after, .slabs-feature::after, .trade::after {
  height: 80px;
}
.quote-band::before {
  height: 72px;
  background: linear-gradient(to bottom, var(--warm-white), var(--espresso) 60%, var(--ink));
}
.quote-band::after {
  height: 72px;
  background: linear-gradient(to bottom, var(--ink), var(--espresso) 40%, var(--sand));
}
.threshold {
  height: 140px;
  background: linear-gradient(180deg, var(--sand), var(--sand-deep) 24%, var(--espresso) 64%, var(--ink) 90%, var(--charcoal));
}

/* ---- Real-photo placements: figured slab (Slabs) + sawmill (About story) ---- */
.photo--about { grid-column: 1 / -1; width: 100%; margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.photo--about .photo__frame { aspect-ratio: auto; height: clamp(280px, 34vw, 480px); }

/* =========================================================
   CLEAN CRISP SECTION EDGES (client: remove the dark dimming +
   every warm feather — maximally minimal). Section transitions
   become clean edges; the dark bands start/end crisply. The
   subtle per-section lit washes stay so it's clean, not flat.
   ========================================================= */
.values::after, .about::after, .slabs-feature::after, .trade::after { display: none; }
.quote-band::before, .quote-band::after { display: none; }
.threshold { display: none; }

/* =========================================================
   FULL-BLEED PHOTO HERO (audit #1 lever) — the headline sits
   over a dimmed real Arizona-walnut slab. Replaces the contained
   two-column plate; text flips to warm-white over an ink scrim.
   ========================================================= */
.hero--photo {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(540px, 86vh, 860px);
  display: flex; align-items: center;
  padding-block: clamp(3.5rem, 9vh, 7rem);
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: saturate(0.85) contrast(1.06) brightness(0.9);
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(18,25,31,0.88) 0%, rgba(18,25,31,0.66) 36%, rgba(18,25,31,0.26) 70%, rgba(18,25,31,0.42) 100%),
    linear-gradient(180deg, rgba(18,25,31,0.22) 0%, rgba(18,25,31,0) 32%, rgba(18,25,31,0.55) 100%);
}
.hero--photo .container { position: relative; z-index: 2; }
.hero--photo .hero__grid { display: block; }
.hero--photo .hero__lead { max-width: 40rem; }
.hero--photo .eyebrow { color: rgba(248, 245, 239, 0.82); }
.hero--photo .hero__headline { color: var(--warm-white); }
.hero--photo .hero__tagline { color: rgba(248, 245, 239, 0.92); }
.hero--photo .hero__copy { color: rgba(248, 245, 239, 0.84); }
.hero--photo .hero__secondary { color: rgba(248, 245, 239, 0.85); }
.hero--photo .hero__secondary:hover { color: #fff; }
@media (max-width: 700px) {
  .hero__bg { object-position: 50% 28%; }
  .hero__scrim {
    background: linear-gradient(180deg, rgba(18,25,31,0.5) 0%, rgba(18,25,31,0.32) 26%, rgba(18,25,31,0.74) 100%);
  }
}

/* Hero framing refinement — favor the slab face, vignette the garage edges */
.hero__bg { object-position: 50% 47%; }
.hero__scrim {
  background:
    radial-gradient(130% 105% at 32% 48%, transparent 34%, rgba(18,25,31,0.5) 100%),
    linear-gradient(90deg, rgba(18,25,31,0.9) 0%, rgba(18,25,31,0.66) 38%, rgba(18,25,31,0.3) 72%, rgba(18,25,31,0.5) 100%),
    linear-gradient(180deg, rgba(18,25,31,0.24) 0%, rgba(18,25,31,0) 32%, rgba(18,25,31,0.6) 100%);
}
@media (max-width: 700px) {
  .hero__bg { object-position: 50% 45%; }
  .hero__scrim {
    background:
      radial-gradient(140% 100% at 50% 40%, transparent 30%, rgba(18,25,31,0.45) 100%),
      linear-gradient(180deg, rgba(18,25,31,0.5) 0%, rgba(18,25,31,0.3) 26%, rgba(18,25,31,0.76) 100%);
  }
}

/* Hero REGRADE (R2 audit): the scrim buried the walnut figure near-black on the
   right. Lift the wood, keep the upper-right grain bright, dark only where text
   sits (left) and where the floor clutter is (bottom). */
/* Lighter, warmer hero so the walnut glows honey and OWNS the right ~55%;
   ink protection contained to the left where the text sits (Joe 2026-06-22 audit). */
.hero__bg { filter: brightness(1.06) contrast(1.08) saturate(1.0) sepia(0.08); object-position: 50% 46%; }
.hero__scrim {
  background:
    radial-gradient(150% 120% at 82% 26%, rgba(18,25,31,0) 0%, rgba(18,25,31,0.12) 55%, rgba(18,25,31,0.42) 100%),
    linear-gradient(90deg, rgba(18,25,31,0.86) 0%, rgba(18,25,31,0.5) 24%, rgba(18,25,31,0) 46%, rgba(18,25,31,0) 100%),
    linear-gradient(180deg, rgba(18,25,31,0.16) 0%, rgba(18,25,31,0) 30%, rgba(18,25,31,0.55) 100%);
}
@media (max-width: 700px) {
  /* mobile: text spans wider, so keep a fuller protective wash */
  .hero__bg { filter: brightness(1.04) contrast(1.08) saturate(1.0) sepia(0.08); object-position: 50% 42%; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(18,25,31,0.62) 0%, rgba(18,25,31,0.44) 40%, rgba(18,25,31,0.34) 64%, rgba(18,25,31,0.72) 100%);
  }
}

/* FIX: un-stick the About heading — it was pinned (leftover rhythm experiment)
   and the full-width mill photo added later scrolls up and overlaps it. */
@media (min-width: 900px) {
  .about__lead { position: static; }
}

/* =========================================================
   FIXES (2026-06-21): floating-CTA hover legibility + at-visit
   hide; proof-strip alignment.
   ========================================================= */
/* Floating "Book a Showroom Visit" pill is warm-white w/ ink text on desktop —
   the charcoal hover made the text invisible. Keep it light + legible on hover. */
@media (min-width: 720px) {
  .book-fab:hover { background: var(--sand-deep); color: var(--ink); }
}
/* And don't let it float over the Visit section (which has its own book CTA). */
body.show-book-fab.at-visit .book-fab {
  opacity: 0; pointer-events: none; visibility: hidden; transform: translateY(120%);
}

/* Proof strip: align the three figures on one line — drop the stagger offset and
   give all three the same serif size so "50+" / "Hand-finished" / "By appointment"
   line up cleanly. */
.proof__item:nth-child(2) { margin-top: 0; }
.proof__item:first-child .proof__num,
.proof__item:nth-child(2) .proof__num,
.proof__item:nth-child(3) .proof__num {
  font-size: clamp(2rem, 3.6vw, 2.5rem);
  font-weight: 500;
}
@media (min-width: 720px) {
  .proof__grid { align-items: start; }
}


/* =====================================================================
   ON-THE-FLOOR CENTER-FOCUS GALLERY  (#furniture)
   APPEND LAST in styles.css so it wins over earlier .feature rules.
   Tokens used (all already defined): --ink --espresso --copper
   --warm-white --hairline --wash --gutter --container --font-display
   --font-body --space-section --ease-lux. The cards reuse the existing
   .photo__frame specimen-plate look + brand grade filter.
   ===================================================================== */

/* intro block (centered, replaces the old 2-col copy) ----------------- */
.feature--furniture .feature__intro {
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
}
.feature--furniture .feature__intro .feature__lead { margin-inline: auto; max-width: 70ch; }
.feature--furniture .feature__intro .text-link { margin-top: 0.25rem; }

/* the band ------------------------------------------------------------ */
.floor {
  /* local knobs — retune sizing here, one place */
  --floor-card: min(50vw, 540px);        /* active card width (desktop)   */
  --floor-gap: clamp(1rem, 3vw, 2.25rem);/* gap between cards             */
  --floor-ease: var(--ease-lux);
  position: relative;
  margin-top: clamp(2rem, 5vw, 3.75rem);
}
@media (max-width: 699px) { .floor { --floor-card: 82vw; } }

/* the scroller -------------------------------------------------------- */
.floor__viewport {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--floor-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* push first/last card to dead-center; same value as scroll-padding */
  padding-inline: max(var(--gutter), calc((100% - var(--floor-card)) / 2));
  scroll-padding-inline: max(var(--gutter), calc((100% - var(--floor-card)) / 2));
  /* extra vertical room so the lifted/shadowed active card isn't clipped */
  padding-block: clamp(0.75rem, 2vw, 1.5rem);
  overscroll-behavior-x: contain;        /* no page back-swipe / chaining */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                 /* Firefox */
  outline: none;
}
.floor__viewport::-webkit-scrollbar { display: none; }     /* WebKit */
.floor__viewport:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 6px;
  border-radius: 2px;
}

/* a card -------------------------------------------------------------- */
.floor__cell {
  flex: 0 0 var(--floor-card);
  scroll-snap-align: center;
  scroll-snap-stop: always;
  margin: 0;
}
.floor__item {
  margin: 0;
  /* compositor-only props animate */
  transform: scale(0.94);
  opacity: 0.5;
  filter: saturate(0.82);
  transition:
    transform 0.5s var(--floor-ease),
    opacity 0.5s var(--floor-ease),
    filter 0.5s var(--floor-ease);
  will-change: transform, opacity;
}
.floor__item.is-active,                      /* set by JS on the centered card */
.floor:not([data-floor-ready]) .floor__item  /* NO-JS: every card full-presence */
{
  transform: none;
  opacity: 1;
  filter: saturate(1);
}

/* frame: reuse the specimen-plate; make the img fill UNDER the 1.25rem mat.
   The existing .photo__frame is display:flex; align-items:flex-end with its
   own padding + ::after "Photo coming" badge + ::before ridge — we keep all
   of that and just absolutely-position the img to cover the inner area. */
.floor__item .photo__frame {
  aspect-ratio: 4 / 3;
  transition: box-shadow 0.5s var(--floor-ease);
}
.floor__item .photo__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* inherits the site-wide grade: sepia(.12) saturate(.92) contrast(1.02) */
}
.floor__item.is-active .photo__frame {
  box-shadow:
    0 22px 48px -22px rgba(18, 25, 31, 0.45),
    0 6px 16px -10px rgba(18, 25, 31, 0.30);
}

/* caption: only the centered piece's caption is fully lit -------------- */
.floor__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-top: 1rem;
  padding-inline: 0.15rem;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.5s var(--floor-ease) 0.05s,
    transform 0.5s var(--floor-ease) 0.05s;
}
.floor__item.is-active .floor__cap,
.floor:not([data-floor-ready]) .floor__cap { opacity: 1; transform: none; }

.floor__cell[data-gallery] .photo__frame::after {
  content: "More views \25B8";                 /* subtle affordance for gallery pieces */
  position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2;
  /* reset the decorative crop-mark ::after sizing so the pill fits its text */
  width: auto; height: auto; border: 0; white-space: nowrap;
  font-family: var(--font-body); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: #F8F5EF; background: rgba(18, 25, 31, 0.6);
  padding: 0.36rem 0.74rem; border-radius: 999px; pointer-events: none;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}
.floor__item.is-active .photo__frame::after,
.floor:not([data-floor-ready]) .floor__cell[data-gallery] .photo__frame::after {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .floor__cell[data-gallery] .photo__frame::after { transition: none; }
}

.floor__species {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.1;
  color: var(--ink);
}
.floor__type {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--espresso);
}
.floor__dim {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--espresso);
  opacity: 0.7;
  margin-left: auto;                 /* push dimensions to the right edge */
}
.floor__dim::before { content: none; }   /* copper tick removed per Dennis */

/* controls: prev · copper progress rail · next ------------------------ */
.floor__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.85rem, 2.5vw, 1.5rem);
  width: min(var(--container), calc(100% - 2 * var(--gutter)));
  margin: clamp(1.5rem, 4vw, 2.25rem) auto 0;
}
.floor__arrow {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;                      /* WCAG 2.2 AA target size (2.5.8) */
  display: grid;
  place-items: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    border-color 0.3s var(--floor-ease),
    color 0.3s var(--floor-ease),
    transform 0.3s var(--floor-ease),
    opacity 0.3s var(--floor-ease);
}
.floor__arrow:hover { border-color: var(--copper); color: var(--copper); transform: translateY(-1px); }
.floor__arrow:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.floor__arrow[disabled] { opacity: 0.3; cursor: default; pointer-events: none; transform: none; }

.floor__progress {
  position: relative;
  flex: 1 1 auto;
  max-width: 240px;
  height: 2px;
  background: var(--hairline);
  border-radius: 2px;
  overflow: hidden;
}
.floor__progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 16%;                        /* JS sets the real width */
  background: var(--copper);
  transition: width 0.45s var(--floor-ease);
}

/* pagination dots ----------------------------------------------------- */
.floor__dots {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: clamp(1rem, 3vw, 1.6rem);
}
.floor__dot {
  width: 2.5rem;                     /* ~40px hit area; visual is the ::after */
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
}
.floor__dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(63, 49, 30, 0.28);
  transition: background 0.3s var(--floor-ease), transform 0.3s var(--floor-ease);
}
.floor__dot:hover::after { background: rgba(63, 49, 30, 0.5); }
.floor__dot[aria-selected="true"]::after { background: var(--copper); transform: scale(1.35); }
.floor__dot:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }

/* sr-only helper (add once; harmless if it already exists in the sheet) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* NO-JS FALLBACK ------------------------------------------------------ */
/* JS adds [data-floor-ready] on init. Until/unless it does, every card is
   full-presence (handled above) and the controls are hidden — leaving a
   clean, usable native scroll-snap row. */
.floor:not([data-floor-ready]) .floor__controls,
.floor:not([data-floor-ready]) .floor__dots { display: none; }

/* =====================================================================
   REDUCED MOTION — degrade to a plain scroll-snap row.
   No scale / fade / desaturate / lift; every card fully lit & legible.
   Arrows/dots still work (JS jumps instantly — see js).
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .floor__item,
  .floor__item .photo__frame {
    transform: none !important;
    opacity: 1 !important;
    filter: saturate(1) !important;
    transition: none !important;
  }
  .floor__cap { opacity: 1 !important; transform: none !important; transition: none !important; }
  .floor__viewport { scroll-behavior: auto; }
  .floor__progress-fill, .floor__arrow, .floor__dot::after { transition: none !important; }
}

/* Contain the full-bleed gallery so the 100vw band can't add a hair of
   horizontal page overflow when a vertical scrollbar is present. */
.feature--furniture { overflow-x: clip; }

/* Page-level horizontal clip: every full-bleed band uses 100vw, which exceeds
   content width by the scrollbar width when a vertical scrollbar is present.
   overflow-x: clip removes that hairline overflow WITHOUT creating a scroll
   container (so it does NOT break the sticky header, unlike overflow:hidden). */
html { overflow-x: clip; }


/* =====================================================================
   ON-THE-FLOOR — LOOP + CENTER-FOCUS + SPACE UPGRADE
   APPEND AT THE VERY END OF styles.css (after line 2764). It is the last
   .floor* block, so every rule here wins by cascade over earlier ones.
   Only transform/opacity/filter animate. Palette untouched.
   ===================================================================== */

/* --- center bigger in LAYOUT too (was min(62vw,720px) / 82vw) --- */
.floor { --floor-card: min(52vw, 600px); }
@media (max-width: 699px) { .floor { --floor-card: 84vw; } }

/* --- stronger de-emphasis + graduated near/far falloff.
   .is-near / .is-active are JS-set + mutually exclusive, so order is safe. */
.floor__item {
  transform: scale(0.86);             /* was .94 */
  opacity: 0.32;                      /* was .5  */
  filter: saturate(0.62); /* dropped the 0.4px sub-pixel blur — no-op that forced a repaint each cycle */
  transform-origin: center bottom;    /* side cards sink slightly */
}
.floor__item.is-near {                /* JS toggles on real +-1 (and clones) */
  transform: scale(0.90);
  opacity: 0.5;
  filter: saturate(0.78);
}
.floor__item.is-active,                       /* centered card (JS) */
.floor:not([data-floor-ready]) .floor__item { /* NO-JS: every card full-presence */
  transform: none;
  opacity: 1;
  filter: saturate(1);
}
.floor__item.is-active .photo__frame {        /* deeper lift on the hero card */
  box-shadow:
    0 30px 60px -28px rgba(18, 25, 31, 0.50),
    0 10px 22px -12px rgba(18, 25, 31, 0.32);
}

/* --- clones: visually identical but inert to hit-testing/focus.
   (JS also sets aria-hidden + inert + tabindex=-1; this is belt-and-suspenders.) */
.floor__cell[data-floor-clone] .floor__item { pointer-events: none; }

/* --- vertical tightening: collapse compounded margins (4:3 card height untouched) */
.floor { margin-top: clamp(1.25rem, 3vw, 2rem); }              /* was clamp(2,5vw,3.75) */
.floor__viewport { padding-block: clamp(0.5rem, 1.3vw, 0.9rem); } /* was clamp(.75,2vw,1.5) */
.floor__cap { margin-top: 0.65rem; }                           /* was 1rem */
.floor__controls { margin-top: clamp(0.9rem, 2.2vw, 1.4rem); } /* was clamp(1.5,4vw,2.25) */
.floor__dots { margin-top: clamp(0.5rem, 1.4vw, 0.8rem); }     /* was clamp(1,3vw,1.6) */
.feature--furniture { padding-block-end: clamp(2.25rem, 5vw, 3.5rem); } /* trim dead bottom space */

/* --- loop mode: defensively guarantee arrows never read disabled --- */
.floor[data-floor-loop] .floor__arrow[disabled] {
  opacity: 1; pointer-events: auto; cursor: pointer; transform: none;
}

/* --- REDUCED MOTION: neutralize the NEW blur + near tier + origin --- */
@media (prefers-reduced-motion: reduce) {
  .floor__item {
    transform-origin: center !important;
    filter: saturate(1) !important;
  }
  .floor__item.is-near {
    transform: none !important;
    opacity: 1 !important;
    filter: saturate(1) !important;
  }
}

/* ====================================================================
   FLOOR: tighten the gap between the intro copy and the rail
   (the "Book a viewing" link was removed; collapse the dead space).
   ==================================================================== */
.feature--furniture .feature__intro { margin-bottom: 0; }
.feature--furniture .feature__intro > *:last-child { margin-bottom: 0; }
.floor { margin-top: clamp(0.6rem, 1.6vw, 1.1rem); }   /* was clamp(1.25,3vw,2) */

/* ====================================================================
   FLOOR CLICK AFFORDANCE — centered piece zooms; neighbors recenter.
   ==================================================================== */
.floor[data-floor-ready] .floor__item { cursor: pointer; }
.floor[data-floor-ready] .floor__item.is-active { cursor: zoom-in; }

/* ====================================================================
   FLOOR LIGHTBOX — click the centered piece to enlarge it.
   Ink backdrop, warm-white caption; pauses auto-advance (handled in JS).
   Keyframe-driven for render robustness; reduced-motion safe.
   ==================================================================== */
.lightbox {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { animation: sew-lb-fade 0.26s var(--ease-lux) both; }
.lightbox.is-open .lightbox__dialog { animation: sew-lb-pop 0.34s var(--ease-lux) both; }
@keyframes sew-lb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sew-lb-pop {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: none; }
}
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: clamp(2.6rem, 7vw, 3.2rem); height: clamp(2.6rem, 7vw, 3.2rem); border-radius: 50%;
  border: 1px solid rgba(248, 245, 239, 0.35); background: rgba(18, 25, 31, 0.5);
  color: #F8F5EF; font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0 0 0.15em;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.lightbox__nav:hover { background: var(--copper); border-color: var(--copper); }
.lightbox__nav:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.lightbox__nav--prev { left: clamp(0.6rem, 3vw, 2.5rem); }
.lightbox__nav--next { right: clamp(0.6rem, 3vw, 2.5rem); }
.lightbox__count {
  position: absolute; z-index: 3; bottom: clamp(0.8rem, 3vw, 1.8rem); left: 50%; transform: translateX(-50%);
  font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.14em;
  color: #F8F5EF; background: rgba(18, 25, 31, 0.5); padding: 0.32rem 0.85rem; border-radius: 999px;
}
.lightbox__backdrop {
  position: absolute; inset: 0;
  background: color-mix(in oklab, var(--ink) 90%, #000);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  cursor: zoom-out;
}
.lightbox__dialog {
  position: relative; z-index: 1; margin: 0;
  max-width: min(1100px, 94vw);
  display: flex; flex-direction: column; align-items: center; gap: 0.95rem;
}
.lightbox__img {
  display: block; width: auto; height: auto;
  max-width: 100%; max-height: 84vh;
  object-fit: contain; border-radius: 2px;
  box-shadow:
    0 40px 90px -30px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(248, 245, 239, 0.10);
  filter: brightness(1.02) contrast(1.04) saturate(1.02); /* match page grade */
}
.lightbox__cap {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  letter-spacing: 0.01em; color: var(--warm-white); text-align: center;
}
.lightbox__close {
  position: absolute; top: -2.7rem; right: -0.1rem;
  width: 2.4rem; height: 2.4rem; padding: 0; border: 0;
  background: transparent; color: var(--warm-white);
  font-size: 2rem; line-height: 1; cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.2s var(--ease-lux), background 0.2s var(--ease-lux);
}
.lightbox__close:hover { color: var(--copper); background: rgba(248, 245, 239, 0.10); }
.lightbox__close:focus-visible {
  outline: none; color: var(--copper);
  box-shadow: 0 0 0 2px var(--copper);
}
@media (max-width: 640px) {
  .lightbox__close { top: 0.3rem; right: 0.3rem; background: rgba(18, 25, 31, 0.55); }
  .lightbox__img { max-height: 72vh; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox.is-open, .lightbox.is-open .lightbox__dialog { animation: none; }
  .lightbox.is-open { opacity: 1; }
}

/* ====================================================================
   2026-06-21 — dead-space tightening + Visit/footer restructure + header glitch
   ==================================================================== */

/* HEADER: isolate the blurred sticky bar onto its own compositor layer so it
   doesn't repaint-flicker over the (now 2s) auto-advancing full-bleed gallery. */
.site-header { transform: translateZ(0); backface-visibility: hidden; }

/* FURNITURE: trim the airy top padding (was ~152px). */
.feature--furniture { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ABOUT: pull the mill photo up to the text and trim top/bottom air
   (body→mill gap was ~160px; section padding was ~208px). */
.about { padding-block: clamp(4rem, 8vw, 7rem); }
.about__grid { row-gap: clamp(2.25rem, 4vw, 3.25rem); }
.photo--about { margin-top: 0; }

/* VISIT: single centered booking block — empty photo placeholder removed,
   Studio address deleted, Hours moved to the footer, tighter padding. */
.visit { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.visit__grid { grid-template-columns: 1fr; }
.visit__info { max-width: 60ch; margin-inline: auto; text-align: center; }
.visit__copy { margin-inline: auto; }
.visit__email { margin: 1.7rem 0 0; font-size: 0.95rem; color: rgba(248, 245, 239, 0.7); }
.visit__email a {
  color: var(--warm-white); text-decoration: none;
  border-bottom: 1px solid var(--hairline-light); transition: border-color 0.18s ease;
}
.visit__email a:hover { border-color: var(--warm-white); }

/* FOOTER: keep all four nav links on one line — DESKTOP ONLY. (Unscoped, these
   forced a 3-col footer + nowrap nav on phones = ~677px min width / clipped
   content. Mobile now uses the base 1fr stack + flex-wrap:wrap.) */
@media (min-width: 769px) {
  .footer__inner { grid-template-columns: 1.2fr 1.2fr 1fr; }
  .footer__nav ul { flex-wrap: nowrap; gap: 1.4rem; white-space: nowrap; }
}
.footer__hours { color: rgba(248, 245, 239, 0.75); }

/* ====================================================================
   HEADER GLITCH FIX (2026-06-21) — the real cause.
   The shrink-on-scroll animated the header's PADDING + the logo HEIGHT.
   On a position:sticky header that changes the flow-slot height, which
   reflows ALL content below by ~17px right at the scroll threshold — a
   visible jump that fights the scroll. Fix: keep the header a CONSTANT
   height (no layout change can reflow), and signal scroll with a
   paint-only cue (a touch more opaque glass + a soft lift shadow).
   ==================================================================== */
.site-header { transition: background 0.25s ease, box-shadow 0.25s ease; }
.header__inner { transition: none; }
.header__wordmark { transition: none; }
/* neutralize the size-changing shrink */
.site-header.is-scrolled .header__inner { padding-block: 1.4rem; }
.site-header.is-scrolled .header__wordmark { height: 46px; }
/* paint-only scroll cue (no reflow) */
.site-header.is-scrolled {
  background: rgba(248, 245, 239, 0.95);
  box-shadow: 0 10px 26px -20px rgba(18, 25, 31, 0.55);
}
@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

/* ====================================================================
   SLAB ROTATOR (2026-06-21) — the Slabs feature photo crossfades through
   the raw-slab inventory. The photo-gated rule already makes every
   .photo__frame img position:absolute inset:0 + a shared warm grade, so
   they stack perfectly; we only gate opacity. Reduced-motion → static.
   ==================================================================== */
.slab-rotator__img { opacity: 0; transition: opacity 1.1s var(--ease-lux); }
.slab-rotator__img.is-active { opacity: 1; }
.photo--slab .photo__caption[data-slab-caption] { transition: opacity 0.4s var(--ease-lux); }
@media (prefers-reduced-motion: reduce) {
  .slab-rotator__img { transition: none; }
}

/* ====================================================================
   WIDER, BALANCED CENTERED COPY (2026-06-21) — the furniture intro (52ch)
   and Visit copy (46ch) wrapped too narrow + ragged. Widen the measure
   and balance the line breaks so they read confident, not timid.
   ==================================================================== */
.feature--furniture .feature__intro { max-width: 108ch; }
.feature--furniture .feature__intro .feature__lead { max-width: 108ch; text-wrap: balance; }
.visit__info { max-width: 92ch; }
.visit__copy { max-width: 88ch; text-wrap: balance; }

/* ============================================================
   CTA FINAL — "The Edge" copper fill-wipe (drop-in, appended LAST).
   Overrides all earlier .btn-primary / .btn-primary--light rules.
   Rest = bold solid high-contrast face + a standing copper live-edge
   keyline. Hover/focus = a copper -> deep-copper layer wipes in from
   the left (clip-path) with a forged-metal top sheen, the label inverts
   to warm-white, the button lifts, and the arrow travels.
   Palette-locked. Reduced-motion + no-JS safe. WCAG 2.2 AA verified:
     warm-white on ink / ink on warm-white = 16.29:1
     warm-white on copper #A44C1E = 5.31:1
     warm-white on deep-copper #7E3A17 = 7.70:1
   ============================================================ */

.btn-primary,
.btn-primary--light {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  line-height: 1;
  padding: 1.25rem 2.9rem;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.25s var(--ease-lux),
    box-shadow 0.28s var(--ease-lux),
    color 0.28s var(--ease-lux);
}

/* LIGHT-BG variant (modal / warm-white sections): ink face, warm-white text = 16.29:1 */
.btn-primary {
  color: var(--warm-white);
  background: var(--ink);
  box-shadow:
    inset 0 -3px 0 0 var(--copper),
    0 16px 32px -16px rgba(18, 25, 31, 0.55),
    0 4px 10px -6px rgba(18, 25, 31, 0.4);
}

/* DARK-BG variant (hero photo + charcoal Visit): warm-white face, ink text = 16.29:1,
   deeper two-layer warm lift so it detaches confidently from the dark field */
.btn-primary--light {
  color: var(--ink);
  background: var(--warm-white);
  box-shadow:
    inset 0 -3px 0 0 var(--copper),
    0 20px 44px -14px rgba(18, 25, 31, 0.7),
    0 6px 16px -6px rgba(18, 25, 31, 0.55);
}

/* The copper plane that wipes in on hover/focus, with a forged-metal top sheen */
.btn-primary::before,
.btn-primary--light::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(125% 130% at 50% 0%, rgba(248, 245, 239, 0.20) 0%, rgba(248, 245, 239, 0) 44%),
    linear-gradient(180deg, #B5571F 0%, var(--copper) 52%, #8A3E18 100%);
  opacity: 0;                                   /* crossfades in (no directional wipe) */
  transition: opacity 0.34s var(--ease-lux);
  will-change: opacity;
}

/* Keep any label/icon children above the wipe */
.btn-primary > *,
.btn-primary--light > * {
  position: relative;
  z-index: 1;
}

/* Arrow — inverts + a soft non-directional pop on hover (no slide) */
.btn-primary::after,
.btn-primary--light::after {
  content: "\2192";
  position: relative;
  z-index: 1;
  font-size: 1.05em;
  line-height: 1;
  opacity: 0.75;
  transition: transform 0.28s var(--ease-lux), opacity 0.28s var(--ease-lux), color 0.28s var(--ease-lux);
}
.btn-primary::after { color: var(--copper); }
.btn-primary--light::after { color: var(--copper); }
.modal .btn-primary::after,
.modal .btn-primary--light::after { content: none; }

/* HOVER / FOCUS — copper wipes in, label + arrow invert to warm-white.
   No vertical lift (Joe 2026-06-21: the translateY shift read as the button "jumping up"). */
.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary--light:hover,
.btn-primary--light:focus-visible {
  color: var(--warm-white);
  transform: none;   /* neutralize an earlier .btn-primary:hover translateY(-2px) */
}
/* a soft COPPER GLOW blooms (replaces the dark drop shadow) */
.btn-primary:hover,
.btn-primary:focus-visible {
  box-shadow:
    inset 0 -3px 0 0 #5F2C11,
    0 0 0 1px rgba(164, 76, 30, 0.35),
    0 14px 40px -10px rgba(164, 76, 30, 0.55),
    0 4px 12px -4px rgba(18, 25, 31, 0.4);
}
.btn-primary--light:hover,
.btn-primary--light:focus-visible {
  box-shadow:
    inset 0 -3px 0 0 #5F2C11,
    0 0 0 1px rgba(164, 76, 30, 0.40),
    0 16px 48px -10px rgba(164, 76, 30, 0.6),
    0 6px 16px -6px rgba(18, 25, 31, 0.5);
}
.btn-primary:hover::before,
.btn-primary:focus-visible::before,
.btn-primary--light:hover::before,
.btn-primary--light:focus-visible::before {
  opacity: 1;                                   /* copper crossfades in */
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after,
.btn-primary--light:hover::after,
.btn-primary--light:focus-visible::after {
  color: var(--warm-white);
  opacity: 1;
  transform: scale(1.16);                       /* small pop, no slide */
}

/* Keyboard focus ring — copper outline, off the face so it reads on any background */
.btn-primary:focus-visible,
.btn-primary--light:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}

/* ACTIVE — press into the surface */
.btn-primary:active,
.btn-primary--light:active {
  transform: translateY(0);
  box-shadow:
    inset 0 -3px 0 0 #5F2C11,
    0 6px 14px -8px rgba(18, 25, 31, 0.5);
}

/* REDUCED MOTION / NO-JS — state must not depend on motion. Kill the wipe travel
   and lift; hover/focus still produces a full, instant copper face with warm-white
   text (high-contrast static state) so interactivity stays obvious. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-primary--light,
  .btn-primary::before,
  .btn-primary--light::before,
  .btn-primary::after,
  .btn-primary--light::after {
    transition-duration: 0.001s;
  }
  .btn-primary:hover,
  .btn-primary:focus-visible,
  .btn-primary--light:hover,
  .btn-primary--light:focus-visible,
  .btn-primary:active,
  .btn-primary--light:active {
    transform: none;
  }
  .btn-primary::before,
  .btn-primary--light::before {
    clip-path: inset(0 0 0 0);
    opacity: 0;
    transition: opacity 0.001s;
  }
  .btn-primary:hover::before,
  .btn-primary:focus-visible::before,
  .btn-primary--light:hover::before,
  .btn-primary--light:focus-visible::before {
    opacity: 1;
  }
  .btn-primary:hover::after,
  .btn-primary:focus-visible::after,
  .btn-primary--light:hover::after,
  .btn-primary--light:focus-visible::after {
    transform: none;
  }
}

/* QUOTE BAND — kill the excess vertical dead space (was ~208px each side). */
.quote-band { padding-block: clamp(1rem, 2.2vw, 1.65rem); }

/* FLOOR ARROWS — drop the circle outline; just the chevron. Keeps the 48px
   hit area (WCAG 2.5.8) + the keyboard focus ring; hover tints copper. */
.floor__arrow { border: 0; border-radius: 0; background: transparent; }
.floor__arrow:hover { border-color: transparent; color: var(--copper); }

/* SLAB ROTATOR — subtle borderless prev/next chevrons over the photo.
   Warm-white + a soft dark drop-shadow so they read on bright sky OR dark wood;
   faint at rest, full on hover/focus. Keeps a 44px hit area + keyboard ring. */
.slab-rotator { position: relative; }
.slab-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  color: var(--warm-white);
  filter: drop-shadow(0 1px 4px rgba(18, 25, 31, 0.7));
  opacity: 0.6;
  transition: opacity 0.25s var(--ease-lux), color 0.2s var(--ease-lux),
              transform 0.2s var(--ease-lux);
}
.slab-nav--prev { left: 0.3rem; }
.slab-nav--next { right: 0.3rem; }
.slab-rotator:hover .slab-nav,
.slab-nav:focus-visible { opacity: 1; }
.slab-nav:hover { color: #ffffff; }
.slab-nav:active { transform: translateY(-50%) scale(0.92); }
.slab-nav:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) {
  .slab-nav { transition: none; }
}

/* SLABS — copy LEFT-aligned in the photo+copy split (Joe 2026-06-21: reverted the
   centering — left reads more editorial in a 2-col split + kills the centered orphan).
   Also trim the oversized section padding (was var(--space-lg) ≈ 112–208px). */
.slabs__copy { text-align: left; }
.slabs__copy .section-title,
.slabs__copy .slabs__lead { margin-inline: 0; }
.slabs__copy .slabs__lead { text-wrap: pretty; }
.slabs-feature { padding-block: clamp(4rem, 8vw, 6.5rem); }

/* FLOOR gallery caption centered under the card (Joe 2026-06-21: "center the text"
   on the "What's on the floor" section — the intro was already centered). */
.floor__cap { justify-content: center; text-align: center; }

/* Constrained .section-title blocks hug the left of a centered column (text-align
   centers the text, but the block itself has a narrow max-width + no auto margins).
   Center the heading BLOCK wherever the surrounding copy is centered (Joe 2026-06-21). */
.visit__info .section-title,
.feature--furniture .feature__intro .section-title { margin-inline: auto; max-width: 34ch; }

/* VISIT — "The Showroom" eyebrow removed; trim the top dead space (Joe 2026-06-21). */
.visit { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* Make "Come see the grain in person." pop: italic emphasis on "in person",
   plus a subtle warm glow + micro-scale on hover. Reduced-motion safe. No copper
   on the headline face (brand rule) — the glow is warm-white light, not color. */
.section-title--visit {
  transition: text-shadow 0.4s var(--ease-lux), transform 0.4s var(--ease-lux), color 0.4s var(--ease-lux);
}
.section-title--visit em { font-style: italic; }
.section-title--visit:hover {
  color: #ffffff;
  text-shadow: 0 0 44px rgba(248, 245, 239, 0.55), 0 0 16px rgba(248, 245, 239, 0.40);
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .section-title--visit { transition: none; }
  .section-title--visit:hover { transform: none; }
}

/* ====================================================================
   HEADER slimmer + nav hover + TRADE layout (Joe 2026-06-22)
   ==================================================================== */
/* Slimmer top bar (was ~91px). Keep base + is-scrolled IDENTICAL so the
   constant-height/no-reflow header (the scroll-glitch fix) is preserved. */
.header__inner, .site-header.is-scrolled .header__inner { padding-block: 0.7rem; }
.header__wordmark, .site-header.is-scrolled .header__wordmark { height: 40px; }

/* Animate the nav text on hover: subtle lift + copper (the underline wipe
   already runs). Compositor-only, no reflow. */
.nav__menu a { display: inline-block; transition: color 0.22s var(--ease-lux), transform 0.22s var(--ease-lux); }
.nav__menu a:hover { color: var(--copper); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .nav__menu a:hover { transform: none; } }

/* TRADE band — left content block (eyebrow + copy) + right CTA, vertically
   centered. Replaces the centered 3-across that spread the parts with big gaps. */
.trade__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem 3rem; flex-wrap: wrap;
}
.trade__text { flex: 1 1 30rem; min-width: 0; }
.trade__text .eyebrow { margin: 0 0 0.55rem; }
.trade__line {
  margin: 0; text-align: left; max-width: 42ch; text-wrap: balance;
  font-size: clamp(1.3rem, 2.5vw, 1.85rem);
}
.trade .text-link { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 720px) { .trade__text { flex-basis: 100%; } }

/* Sticky-header offset for in-page anchors — the target heading was hidden
   behind the ~63px sticky header on jump (Joe 2026-06-22). */
:where(#furniture, #slabs, #about, #visit) { scroll-margin-top: 72px; }

/* Footer logo — roughly doubled (Joe 2026-06-22). Aspect held; ~223px wide. */
.footer__wordmark { height: 100px; }

/* FOOTER SOCIAL — Facebook + Instagram (Joe 2026-06-21). Quiet warm-white marks,
   copper on hover; lives under the wordmark/tagline. URLs pending. */
.footer__social {
  list-style: none; margin: 1.15rem 0 0; padding: 0;
  display: flex; gap: 0.85rem;
}
.footer__social li { margin: 0; }
.footer__social a {
  display: inline-flex; color: var(--warm-white); opacity: 0.68;
  transition: opacity 0.2s var(--ease-lux), color 0.2s var(--ease-lux), transform 0.2s var(--ease-lux);
}
.footer__social a:hover { opacity: 1; color: var(--copper); transform: translateY(-1px); }
.footer__social a:focus-visible {
  opacity: 1; color: var(--copper);
  outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .footer__social a { transition: none; }
  .footer__social a:hover { transform: none; }
}

/* ====================================================================
   AUDIT PASS (2026-06-22) — hero line reveal, tap targets, mobile nav,
   hamburger, FAB consistency
   ==================================================================== */
/* Hero headline: line-by-line clip reveal ON LOAD (most-viewed moment).
   Lines are display:block (replaces the old <br>); motion only when allowed. */
.hero__headline .hero__line { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .hero__headline .hero__line {
    clip-path: inset(0 0 102% 0);
    animation: sew-hero-line 0.95s var(--ease-lux) both;
  }
  .hero__headline .hero__line:nth-child(2) { animation-delay: 0.12s; }
}
@keyframes sew-hero-line {
  from { opacity: 0; clip-path: inset(0 0 102% 0); transform: translateY(0.14em); }
  to   { opacity: 1; clip-path: inset(0 0 -8% 0);  transform: none; }
}

/* Tap targets — grow the hit box to >=24px (WCAG 2.5.8) without visual change,
   and give touch users an instant pressed cue (hover underline-wipes never fire). */
.nav__menu a { padding-block: 0.6rem; }
.footer__nav a { display: inline-block; padding-block: 0.5rem; }
.nav__menu a:active, .footer__nav a:active, .text-link:active, .hero__secondary:active { opacity: 0.6; }
@media (max-width: 760px) {
  .text-link, .hero__secondary, .footer__nav a, .visit__email a {
    display: inline-flex; align-items: center; min-height: 44px;
  }
}

/* Mobile hamburger: thin bars were near-invisible on the translucent header. */
.nav__toggle-bar { background: var(--ink); height: 2px; width: 24px; }

/* ====================================================================
   RE-AUDIT POLISH (2026-06-22) — fixes the legibility exposure from the
   lighter hero + a few mobile-crowding nits flagged by the re-score panel.
   ==================================================================== */
/* Hero small text was borderline AA over the now-brighter wood: full warm-white + soft shadow. */
.hero--photo .hero__secondary { color: var(--warm-white); }
.hero--photo .hero__tagline,
.hero--photo .hero__copy,
.hero--photo .hero__secondary { text-shadow: 0 1px 3px rgba(18, 25, 31, 0.55); }

/* Mobile: stop the italic 'hand.' descender crowding the tagline; ease the intro to the edges. */
@media (max-width: 700px) {
  .hero__tagline { margin-top: 0.55rem; }
  .feature--furniture .feature__intro { padding-inline: 0.6rem; }
}

/* FAB: guarantee a 44px touch target (focus-visible ring already defined earlier). */
.book-fab { min-height: 44px; }

/* ====================================================================
   FAQ (2026-06-22) — answer-shaped content for search + AI engines.
   Native <details> accordion: accessible, no JS, content always in the DOM
   (so crawlers/AI extract it even when collapsed).
   ==================================================================== */
.faq { background: var(--warm-white); padding-block: clamp(3.5rem, 7vw, 6rem); }
.faq__inner { max-width: 780px; margin-inline: auto; text-align: center; }
.faq .section-title { margin-inline: auto; }
.faq__list { margin-top: clamp(1.75rem, 4vw, 2.75rem); text-align: left; }
.faq__item { border-top: 1px solid var(--hairline); }
.faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.faq__item summary {
  list-style: none; cursor: pointer; position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  padding: 1.2rem 0.15rem;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.42rem); line-height: 1.25; color: var(--ink);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: 0 0 auto;
  font-family: var(--font-body); font-size: 1.35rem; line-height: 1; color: var(--copper);
  transition: transform 0.25s var(--ease-lux);
}
.faq__item[open] summary::after { content: "−"; }
.faq__item summary:hover { color: var(--espresso); }
.faq__item summary:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 2px; }
.faq__a { padding: 0 0 1.35rem; max-width: 66ch; }
.faq__a p { margin: 0; font-size: 1.02rem; line-height: 1.62; color: rgba(18, 25, 31, 0.78); }
@media (prefers-reduced-motion: reduce) { .faq__item summary::after { transition: none; } }

/* =========================================================
   ARTISAN WORKS — new nav pillar (Dennis's 6/28 edits, 2026-06-28)
   Mirrors the Slabs feature (copy + specimen plate). Photo is a
   PLACEHOLDER pending a styled finished-artisan shot from Dennis.
   ========================================================= */
.artisan { padding-block: clamp(4rem, 8vw, 6.5rem); }
.artisan__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
.artisan__copy { text-align: left; }
.artisan__copy .section-title { margin-bottom: 1.4rem; }
.artisan__lead {
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--ink);
  max-width: 46ch;
  margin: 0 0 1.8rem;
  text-wrap: pretty;
}
@media (min-width: 860px) {
  .artisan__grid {
    grid-template-columns: 0.95fr 1.05fr;   /* copy left, plate right */
    gap: clamp(3rem, 5vw, 5rem);
  }
}
/* Bowl gallery — replaces the single specimen-plate placeholder now that
   real photos are in (2026-07-22). Plain mosaic grid, shared caption below;
   matches the site-wide photo grade but isn't wrapped in .photo__frame
   since there's no single aspect-ratio well here, just a grid of thumbs. */
.artisan__gallery-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.5rem, 1.5vw, 0.85rem);
}
@media (min-width: 560px) {
  .artisan__gallery-photos { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 860px) {
  .artisan__gallery-photos { grid-template-columns: repeat(5, 1fr); }
}
.artisan__thumb {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--hairline);
  filter: saturate(0.88) contrast(1.05) sepia(0.12) brightness(0.97);
  transition: transform 0.4s var(--ease-lux), box-shadow 0.4s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .artisan__thumb:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -18px rgba(18, 25, 31, 0.45);
  }
}
/* Per-bowl caption (species + price) under each thumb (Joe, 2026-07-23) —
   mirrors .floor__species / .floor__price but scaled down for the 2-5up grid. */
.artisan__item { margin: 0; }
.artisan__cap {
  margin-top: 0.55rem;
  text-align: center;
  line-height: 1.3;
}
.artisan__species {
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(0.8rem, 1.3vw, 0.92rem);
  color: var(--espresso);
}
.artisan__price {
  display: block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  margin-top: 0.15rem;
}
.artisan__gallery-cap {
  margin: 1rem 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--espresso);
  text-align: center;
}

/* ---- About balance fix (Joe, 2026-07-12): Dennis's longer heading + shorter
   two-paragraph bio left the About grid lopsided — the body text hugged the
   top (dead space below the right column) and the title rail ran taller than
   the copy beside it. Center both columns against each other, set the longer
   title a step smaller so it doesn't tower, and drop the sticky pin (the
   columns are now near-equal height, so pinning only caused top misalignment). ---- */
@media (min-width: 900px) {
  .about__lead { position: static; align-self: center; }
  .about__body { align-self: center; }
  .section-title--about { font-size: clamp(1.9rem, 3.7vw, 2.7rem); max-width: 17ch; }
}

/* ---- FAQ master toggle (Joe, 2026-07-13): collapse the whole FAQ behind one
   toggle so the section is just the "Good to know" heading until clicked. All
   eight Q&As remain in the HTML source (native <details>), so they stay
   crawlable and AI-extractable — collapsing is visual only. ---- */
.faq__collapse { border: 0; text-align: center; }
.faq__collapse > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.6rem;
  border: 1px solid #D8CCB8;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #12191F;
  background: transparent;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.faq__collapse > summary::-webkit-details-marker { display: none; }
.faq__collapse > summary:hover,
.faq__collapse > summary:focus-visible { border-color: #A44C1E; background: rgba(164, 76, 30, 0.05); }
.faq__collapse-icon { position: relative; width: 13px; height: 13px; flex: none; }
.faq__collapse-icon::before,
.faq__collapse-icon::after { content: ""; position: absolute; background: #A44C1E; }
.faq__collapse-icon::before { left: 0; top: 5.5px; width: 13px; height: 2px; }
.faq__collapse-icon::after {
  left: 5.5px; top: 0; width: 2px; height: 13px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.faq__collapse[open] .faq__collapse-icon::after { transform: scaleY(0); opacity: 0; }
.faq__collapse[open] .faq__list { margin-top: clamp(1.5rem, 3vw, 2.25rem); text-align: left; }
@media (prefers-reduced-motion: reduce) {
  .faq__collapse-icon::after, .faq__collapse > summary { transition: none; }
}

/* ---- floor card price (finished-furniture pieces) ---- */
.floor__price{
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  font-weight: 600;
  color: var(--ink);              /* clean dark, no longer reads as a negative */
  white-space: nowrap;
}

/* ---- announcement bar (new furniture) ---- */
.announce{ background: var(--ink); color: #F8F5EF; }
.announce__inner{
  position: relative;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:0.35rem 1.15rem;
  width:min(var(--container), calc(100% - 2*var(--gutter)));
  margin-inline:auto;
  padding:0.62rem 2.2rem 0.62rem 0;
}
.announce__text{
  margin:0; font-family:var(--font-body);
  font-size:0.86rem; letter-spacing:0.02em; color:rgba(248,245,239,0.92);
}
.announce__cta{
  font-family:var(--font-body); font-size:0.75rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase; color:#F8F5EF;
  white-space:nowrap; text-decoration:none; border-bottom:1px solid rgba(248,245,239,0.45); padding-bottom:2px;
  transition:border-color .2s ease, color .2s ease;
}
.announce__cta:hover{ border-color:var(--copper); color:#fff; }
.announce__close{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; color:rgba(248,245,239,0.75);
  font-size:1.35rem; line-height:1; padding:0.15rem 0.55rem;
  transition:color .2s ease;
}
.announce__close:hover{ color:#fff; }
.announce.is-hidden{ display:none; }
@media (max-width:560px){
  .announce__text{ font-size:0.8rem; }
  .announce__inner{ padding-block:0.55rem; }
}

/* ---- current-inventory note under the collection intro ---- */
.feature__note{
  margin:0.7rem auto 0; max-width:76ch;
  font-family:var(--font-body); font-size:0.82rem; line-height:1.55;
  letter-spacing:0.02em; color:var(--espresso); opacity:0.85;
}

/* =========================================================
   JOE ROUND (2026-07-23) — trade/FAQ tightening, arrow visibility,
   furniture-carousel arrow reposition, artisan click-to-enlarge.
   Appended last so it wins the cascade over earlier same-selector rules.
   ========================================================= */

/* ---- Trade band: flip the emphasis (eyebrow bigger, line smaller) and
   widen the text column so it closes the dead gap before the CTA. ---- */
.trade__text .eyebrow {
  font-size: 0.98rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.trade__text { flex: 1 1 32rem; }
.trade__line {
  max-width: 64ch;
  font-size: clamp(0.98rem, 1.5vw, 1.15rem);
  line-height: 1.5;
  color: rgba(18, 25, 31, 0.78);
}
.trade { padding-block: clamp(2rem, 4vw, 3.25rem); }

/* ---- FAQ: trim the section padding + heading gap, shrink the oversized
   pill toggle. Heading + button both stay (heading names the section for
   scan/SEO, button is the interactive affordance) but the section reads
   much less sparse now. ---- */
.faq { padding-block: clamp(2rem, 4vw, 3.25rem); }
.faq .section-title { margin-bottom: 0.9rem; }
.faq__collapse > summary {
  padding: 0.55rem 1.25rem;
  font-size: 0.82rem;
}
.faq__collapse-icon { width: 11px; height: 11px; }
.faq__collapse-icon::before { width: 11px; }
.faq__collapse-icon::after { left: 4.5px; height: 11px; }

/* ---- Slab rotator arrows: solid chip so they read as clickable on any
   photo, at any brightness, without waiting for hover (was opacity 0.6
   borderless glyphs — too faint, especially on touch devices). ---- */
.slab-nav {
  background: rgba(18, 25, 31, 0.45);
  opacity: 1;
  filter: none;
}
.slab-nav:hover { background: rgba(18, 25, 31, 0.7); color: #fff; }
.slab-rotator:hover .slab-nav, .slab-nav:focus-visible { opacity: 1; }

/* ---- Slab rotator arrows, take 2 (Joe, 2026-07-25): move off the photo
   into the quiet margin beside it, same idea as the furniture-carousel
   arrows. Two separate clips were holding them to the photo's own box:
   overflow:hidden on .photo__frame (harmless to lift — every
   .slab-rotator__img is position:absolute inset:0, never larger than the
   frame, and its ::before/::after motifs stay within bounds too, so
   nothing was relying on that clip) — and, less obviously, the sitewide
   clip-path "curtain" reveal (sew-wipe, ~2291 above), which never
   actually releases: animation-fill-mode:both deliberately holds it at
   inset(0 0 0 0) forever ("always settles visible" per that comment),
   and inset(0 0 0 0) still clips anything trying to render outside that
   box even though nothing inside is cropped. Let the curtain play
   normally, then hand clip-path off to a second, near-instant animation
   timed to start the moment the first one ends, so it's free afterward. */
.photo--slab .photo__frame { overflow: visible; }
@keyframes sew-wipe-release { to { clip-path: none; } }
body.reveals-on .js-reveal.is-visible.photo--slab .photo__frame {
  animation-name: sew-wipe, sew-wipe-release;
  animation-duration: 0.85s, 0.01s;
  animation-timing-function: var(--ease-lux), linear;
  animation-delay: var(--reveal-delay, 0ms), calc(0.85s + var(--reveal-delay, 0ms));
  animation-fill-mode: both, forwards;
}
/* Centered in the gutter strip outside the frame edge when the gutter's
   wide enough (desktop); on narrow phone widths the gutter is thinner
   than the chip, so clamp to flush against the true edge instead of
   letting it poke off-page and get clipped by the site's
   overflow-x:clip. Either way, half (or more, on phone) of the 44px
   chip still kisses the photo so it still reads as part of the
   carousel. */
.slab-nav--prev {
  left: max(calc(-1 * var(--gutter)), calc(-0.5 * var(--gutter) - 1.375rem));
}
.slab-nav--next {
  right: max(calc(-1 * var(--gutter)), calc(-0.5 * var(--gutter) - 1.375rem));
}

/* ---- Furniture carousel: move prev/next off the control bar and onto
   the image edges (like the slab rotator), reclaiming the dead strip
   underneath. The progress rail stays, now alone, in the control bar. ---- */
.floor__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  border-radius: 50%;
  background: rgba(18, 25, 31, 0.4);
  color: var(--warm-white);
  opacity: 0.85;
}
.floor__arrow--prev { left: calc(max(var(--gutter), (100% - var(--floor-card)) / 2) + 0.6rem); }
.floor__arrow--next { right: calc(max(var(--gutter), (100% - var(--floor-card)) / 2) + 0.6rem); }
.floor__arrow:hover {
  opacity: 1;
  background: rgba(18, 25, 31, 0.62);
  color: #fff;
  transform: translateY(-50%) translateY(-1px);
}
.floor__arrow:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }
.floor__arrow[disabled] { opacity: 0.25; }
.floor[data-floor-loop] .floor__arrow[disabled] { opacity: 0.85; }
.floor__controls { margin-top: clamp(0.5rem, 1.2vw, 0.8rem); }

/* ---- Artisan gallery: click-to-enlarge trigger button reset (wraps
   each thumb so the whole card is a real, keyboard-reachable button). ---- */
.artisan__trigger {
  display: block;
  width: 100%;
  border: 0;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.artisan__trigger:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: 6px;
}