/* ==========================================================================
   SAN JOSE CUSTOM UPHOLSTERY — MAIN STYLESHEET
   Concept: "The Atelier" — tactile, material, editorial.
   Contents:
     01. Base & typography
     02. Layout primitives
     03. Texture & depth utilities
     04. Buttons & links
     05. Top bar
     06. Header & navigation
     07. Mobile menu
     08. Hero
     09. Sections & editorial blocks
     10. Cards (service, project, value)
     11. Before/After slider
     12. Reviews (tabbed)
     13. Process / steps
     14. FAQ accordion
     15. Marquee & supplier strip
     16. Forms
     17. CTA bands
     18. Footer
     19. Sticky mobile action bar
     20. Gallery
     21. Utility pages
     22. Scroll progress, cursor, page transition
     23. Animation primitives
     24. Responsive
     25. Reduced motion & print
   ========================================================================== */

/* ==========================================================================
   01. BASE & TYPOGRAPHY
   ========================================================================== */

html { overflow-x: hidden; }

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--t-on-light);
  background: var(--c-bone);
  overflow-x: hidden;
  font-synthesis-weight: none;
  /* Long unbroken strings (emails, URLs) must never widen the page */
  overflow-wrap: break-word;
}

h1, h2, h3, .display {
  font-family: var(--f-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  font-weight: 500;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-family: var(--f-body); font-weight: 600; letter-spacing: 0; }

@supports (font-variation-settings: normal) {
  h1, h2, .display { font-variation-settings: "SOFT" 0, "WONK" 1, "opsz" 100; }
}

p { max-width: var(--w-text); }
strong { font-weight: 650; }

em.accent {
  font-style: italic;
  color: var(--c-rust);
}

/* Eyebrow label — small-caps tracked */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-rust);
  margin-bottom: var(--sp-5);
}
.eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--c-brass);
  flex: none;
}
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--c-brass);
  flex: none;
}
.on-dark .eyebrow { color: var(--c-brass-light); }

/* Oversized typographic moment */
.giant-mark {
  font-family: var(--f-display);
  font-size: var(--fs-giant);
  line-height: .78;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(176, 138, 74, .30);
  pointer-events: none;
  user-select: none;
}
.on-dark .giant-mark { -webkit-text-stroke-color: rgba(212, 179, 120, .22); }

.lead {
  font-size: clamp(1.15rem, 1.6vw, 1.4rem);
  line-height: var(--lh-loose);
  color: var(--t-on-light-mute);
}
.on-dark .lead { color: var(--t-on-dark-mute); }

.text-mute { color: var(--t-on-light-mute); }
.on-dark, .on-dark p, .on-dark li { color: var(--t-on-dark); }
.on-dark .text-mute { color: var(--t-on-dark-mute); }

/* Pull quote */
.pullquote {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 4vw, 3.25rem);
  line-height: 1.16;
  letter-spacing: var(--ls-display);
  max-width: 20ch;
  position: relative;
  padding-left: var(--sp-6);
}
.pullquote::before {
  content: "";
  position: absolute;
  left: 0; top: .2em; bottom: .2em;
  width: 2px;
  background: linear-gradient(180deg, var(--c-brass), transparent);
}

/* ==========================================================================
   02. LAYOUT PRIMITIVES
   ========================================================================== */

.container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}
.container--wide { max-width: var(--w-max); }
.container--narrow { max-width: 860px; }

.section { padding-block: var(--sp-section); position: relative; }
.section--tight { padding-block: clamp(4rem, 8vw, 7rem); }
.section--flush-top { padding-top: 0; }

/* Asymmetric 12-column grid */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), 1fr);
  gap: var(--sp-6);
}
.col-7  { grid-column: span 7; }
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-4  { grid-column: span 4; }
.col-12 { grid-column: 1 / -1; }

/* Editorial split — alternating offsets.
   start-aligned by default so a short media column does not leave a large
   dead band beside a tall text column; use .split--center to re-centre. */
.split {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.split--center { align-items: center; }
.split__media { grid-column: 1 / 7; }
.split__body  { grid-column: 8 / 13; }
.split--flip .split__media { grid-column: 7 / 13; order: 2; }
.split--flip .split__body  { grid-column: 1 / 6; order: 1; }

.stack > * + * { margin-top: var(--sp-5); }
.stack-lg > * + * { margin-top: var(--sp-7); }

.section-head { max-width: 760px; margin-bottom: clamp(3rem, 6vw, 5rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: var(--z-modal);
  background: var(--c-rust);
  color: #fff;
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--dur-fast) var(--ease-out-expo);
}
.skip-link:focus { top: var(--sp-4); }

/* ==========================================================================
   03. TEXTURE & DEPTH UTILITIES
   ========================================================================== */

/* Grain overlay — keeps dark sections from reading as flat digital color */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Linen weave texture for light material sections */
.weave { position: relative; isolation: isolate; }
.weave::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image:
    repeating-linear-gradient(0deg,   rgba(59,46,36,.6) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg,  rgba(59,46,36,.4) 0 1px, transparent 1px 4px);
}

.on-dark {
  background: var(--c-walnut);
  color: var(--t-on-dark);
}
.on-espresso { background: var(--c-espresso); color: var(--t-on-dark); }
.on-linen { background: var(--c-linen); }
.on-oat { background: var(--c-oat); }

/* Stitched seam divider — the brand's signature rule */
.seam {
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--c-brass) 0 10px,
    transparent 10px 18px
  );
  opacity: .5;
  border: 0;
  margin: 0;
}

/* Brass hairline */
.hairline { height: 1px; background: rgba(176,138,74,.28); border: 0; }
.on-dark .hairline { background: rgba(212,179,120,.22); }

/* Glass surface — only used where there is content behind it */
.glass {
  background: rgba(31, 24, 19, .55);
  backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(140%);
  border: 1px solid rgba(212, 179, 120, .18);
  box-shadow: var(--shadow-lg), var(--shadow-inset-hair);
}
.glass--light {
  background: rgba(247, 243, 236, .72);
  border-color: rgba(59, 46, 36, .12);
}
@supports not (backdrop-filter: blur(4px)) {
  .glass { background: rgba(31, 24, 19, .93); }
  .glass--light { background: rgba(247, 243, 236, .96); }
}

/* ==========================================================================
   04. BUTTONS & LINKS
   ========================================================================== */

.btn {
  --btn-bg: var(--c-rust);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 1.05rem 2.25rem;
  font-family: var(--f-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-md);
  transition:
    transform var(--dur-base) var(--ease-out-expo),
    box-shadow var(--dur-base) var(--ease-out-expo),
    color var(--dur-base) var(--ease-out-expo),
    border-color var(--dur-base) var(--ease-out-expo);
  will-change: transform;
}
/* Wipe fill on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--c-espresso);
  transform: translateY(101%);
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.btn:hover, .btn:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.btn:hover::before, .btn:focus-visible::before { transform: translateY(0); }
.btn:active { transform: translateY(-1px); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--t-on-light);
  border-color: rgba(59, 46, 36, .28);
  box-shadow: none;
}
.btn--ghost::before { background: var(--c-walnut); }
.btn--ghost:hover { --btn-fg: var(--t-on-dark); border-color: transparent; }

/* Ghost buttons sitting on photography need a readable backing, not just a border */
.on-dark .btn--ghost,
.hero .btn--ghost,
.cta-band .btn--ghost,
.page-hero .btn--ghost {
  --btn-fg: var(--t-on-dark);
  border-color: rgba(212, 179, 120, .55);
  background: rgba(20, 16, 13, .42);
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
  box-shadow: var(--shadow-sm);
}
.on-dark .btn--ghost::before,
.hero .btn--ghost::before,
.cta-band .btn--ghost::before,
.page-hero .btn--ghost::before { background: var(--c-brass); }
.on-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.cta-band .btn--ghost:hover,
.page-hero .btn--ghost:hover { --btn-fg: var(--c-espresso); border-color: transparent; }

.btn--brass { --btn-bg: var(--c-brass); --btn-fg: var(--c-espresso); box-shadow: var(--shadow-brass); }
.btn--brass::before { background: var(--c-brass-light); }
.btn--brass:hover { --btn-fg: var(--c-espresso); }

.btn--lg { padding: 1.25rem 2.75rem; font-size: 0.9375rem; }
.btn--full { width: 100%; }

.btn__icon { width: 1em; height: 1em; flex: none; transition: transform var(--dur-base) var(--ease-out-expo); }
.btn:hover .btn__icon { transform: translateX(4px); }

/* Text link with wiping underline */
.link-under {
  position: relative;
  display: inline-block;
  font-weight: 600;
  padding-bottom: 2px;
}
.link-under::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.link-under:hover::after, .link-under:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-rust);
}
.link-arrow svg { width: 1.1em; height: 1.1em; transition: transform var(--dur-base) var(--ease-out-expo); }
.link-arrow:hover svg { transform: translateX(5px); }
.on-dark .link-arrow { color: var(--c-brass-light); }

/* ==========================================================================
   05. TOP BAR
   ========================================================================== */

.topbar {
  background: var(--c-espresso);
  color: var(--t-on-dark-mute);
  font-size: var(--fs-xs);
  letter-spacing: .02em;
  position: relative;
  z-index: var(--z-header);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 44px;
  padding-block: var(--sp-2);
}
.topbar__group { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.topbar__item svg { width: 13px; height: 13px; color: var(--c-brass); flex: none; }
a.topbar__item:hover { color: var(--c-brass-light); }

.topbar__socials { display: flex; align-items: center; gap: var(--sp-3); }
.topbar__social {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border: 1px solid rgba(212, 179, 120, .25);
  border-radius: 50%;
  transition: background var(--dur-fast) var(--ease-out-expo),
              color var(--dur-fast) var(--ease-out-expo),
              transform var(--dur-fast) var(--ease-out-expo);
}
.topbar__social svg { width: 13px; height: 13px; }
.topbar__social:hover {
  background: var(--c-brass);
  color: var(--c-espresso);
  transform: translateY(-2px);
}

/* ==========================================================================
   06. HEADER & NAVIGATION
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  transition: background var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo);
  border-bottom: 1px solid transparent;
}
/* Transparent over hero */
.header--over-hero { background: transparent; }
.header--over-hero .nav__link,
.header--over-hero .logo { color: var(--t-on-dark); }

/* Condensed glass bar after scroll */
.header.is-stuck {
  background: rgba(20, 16, 13, .82);
  backdrop-filter: blur(var(--blur-glass)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(150%);
  border-bottom-color: rgba(212, 179, 120, .16);
  box-shadow: var(--shadow-md);
}
.header.is-stuck .nav__link, .header.is-stuck .logo { color: var(--t-on-dark); }
@supports not (backdrop-filter: blur(4px)) {
  .header.is-stuck { background: rgba(20, 16, 13, .96); }
}

/* Solid header on inner pages that do not have a dark hero */
.header--solid {
  background: var(--c-espresso);
  border-bottom-color: rgba(212, 179, 120, .16);
}
.header--solid .nav__link, .header--solid .logo { color: var(--t-on-dark); }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 84px;
  transition: min-height var(--dur-base) var(--ease-out-expo);
}
.header.is-stuck .header__inner { min-height: 68px; }

/* --- Brand mark: the client's own logo file --- */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  flex: none;
  color: var(--t-on-dark);
}
/* The supplied logo is a transparent PNG with near-black lettering, so on the
   dark header it needs a light plate behind it to stay legible. */
.logo__img {
  height: 46px;
  width: auto;
  display: block;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  background: var(--c-bone);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-slow) var(--ease-spring),
              box-shadow var(--dur-base) var(--ease-out-expo);
}
.logo:hover .logo__img {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.header.is-stuck .logo__img { height: 40px; }

/* Legacy SVG lockup pieces — retained so an inline mark still renders if used */
.logo__mark { width: 38px; height: 38px; flex: none; transition: transform var(--dur-slow) var(--ease-spring); }
.logo:hover .logo__mark { transform: rotate(-6deg) scale(1.06); }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__name {
  font-family: var(--f-display);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo__name em { font-style: normal; color: var(--c-rust-bright); }
.logo__sub {
  font-size: 0.5625rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--c-brass);
  margin-top: 4px;
  white-space: nowrap;
}

/* --- Nav --- */
.nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.25rem); list-style: none; margin: 0; padding: 0; }
.nav__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .02em;
  padding-block: var(--sp-2);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--c-brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.nav__link:hover::after, .nav__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__link[aria-current="page"] { color: var(--c-brass-light); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__cta { flex: none; }
.header__cta .btn { padding: .8rem 1.6rem; }

/* Burger */
.burger {
  display: none;
  width: 46px; height: 46px;
  place-items: center;
  border: 1px solid rgba(212, 179, 120, .3);
  border-radius: 50%;
  color: var(--t-on-dark);
  flex: none;
}
.burger__bars { display: block; width: 18px; height: 12px; position: relative; }
.burger__bars span {
  position: absolute;
  left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out-expo),
              opacity var(--dur-fast) linear;
}
.burger__bars span:nth-child(1) { top: 0; }
.burger__bars span:nth-child(2) { top: 5px; }
.burger__bars span:nth-child(3) { top: 10px; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* ==========================================================================
   07. MOBILE MENU
   ========================================================================== */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(20, 16, 13, .96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-gutter) var(--sp-8);
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out-expo),
              visibility 0s linear var(--dur-base);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mobile-menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out-expo), visibility 0s;
}
.mobile-menu__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-8); }
.mobile-menu__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.mobile-menu__item { border-bottom: 1px solid rgba(212, 179, 120, .14); overflow: hidden; }
.mobile-menu__link {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-block: var(--sp-5);
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  color: var(--t-on-dark);
  letter-spacing: var(--ls-display);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out-expo),
              color var(--dur-fast) var(--ease-out-expo);
}
.mobile-menu.is-open .mobile-menu__link { transform: translateY(0); }
.mobile-menu__link:hover { color: var(--c-brass-light); }
.mobile-menu__num {
  font-family: var(--f-body);
  font-size: .6875rem;
  letter-spacing: .2em;
  color: var(--c-brass);
  flex: none;
}
.mobile-menu__foot { margin-top: var(--sp-7); display: grid; gap: var(--sp-4); }
.mobile-menu__contact {
  display: flex; flex-direction: column; gap: var(--sp-2);
  color: var(--t-on-dark-mute); font-size: var(--fs-sm);
}
.mobile-menu__contact a { display: inline-flex; align-items: center; gap: var(--sp-2); }
.mobile-menu__contact svg { width: 14px; height: 14px; color: var(--c-brass); }

/* ==========================================================================
   08. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: clamp(680px, 94vh, 1000px);
  display: flex;
  align-items: center;
  background: var(--c-espresso);
  color: var(--t-on-dark);
  overflow: hidden;
  isolation: isolate;
  margin-top: -84px;      /* pull under the transparent header */
  /* Reserve room for the header above and the stat strip below so the
     content block is centred in the space that is actually free. */
  padding-top: calc(84px + var(--sp-7));
  padding-bottom: calc(var(--hero-stats-h, 104px) + var(--sp-7));
}
.hero__bg {
  position: absolute;
  inset: -8% 0 -8% 0;      /* overscan so parallax never reveals an edge */
  z-index: -3;
  will-change: transform;
}
.hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  /* Ken Burns — the site has no video, so the hero breathes instead */
  animation: kenburns 26s var(--ease-in-out) infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.2%, -1.6%, 0); }
}
/* Layered scrims: vertical for legibility + warm colour wash */
.hero__scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(20,16,13,.86) 0%, rgba(20,16,13,.55) 34%, rgba(20,16,13,.72) 72%, rgba(20,16,13,.95) 100%),
    linear-gradient(105deg, rgba(20,16,13,.92) 12%, rgba(143,50,19,.20) 58%, transparent 92%);
}
.hero__content { position: relative; z-index: 2; max-width: 940px; }
/* Slightly tighter than --fs-hero so three lines + lead + actions fit the viewport */
.hero__title {
  font-size: clamp(2.9rem, 6.6vw, 6rem);
  line-height: .98;
  margin-bottom: var(--sp-5);
}
.hero__title .line { display: block; overflow: hidden; }
.hero__title .word { display: inline-block; }
.hero__title em {
  font-style: italic;
  color: var(--c-brass-light);
  position: relative;
}
.hero__lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.65;
  color: var(--t-on-dark-mute);
  max-width: 54ch;
  margin-bottom: var(--sp-6);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* Hero stat strip along the bottom */
.hero__stats {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  border-top: 1px solid rgba(212, 179, 120, .18);
  background: linear-gradient(180deg, rgba(20,16,13,0), rgba(20,16,13,.55));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.hero__stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  padding-block: var(--sp-5);
}
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat__num {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1;
  color: var(--c-brass-light);
}
.stat__label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t-on-dark-mute);
}

/* Scroll cue — parked at the right edge, clear of the hero CTAs */
.scroll-cue {
  position: absolute;
  right: var(--sp-gutter);
  bottom: calc(var(--hero-stats-h, 104px) + var(--sp-5));
  z-index: 3;
  display: grid; justify-items: center; gap: var(--sp-2);
  font-size: .625rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t-on-dark-mute);
}
.scroll-cue__line { width: 1px; height: 44px; background: linear-gradient(180deg, var(--c-brass), transparent); overflow: hidden; }
.scroll-cue__line::after {
  content: ""; display: block; width: 100%; height: 40%;
  background: var(--c-brass-light);
  animation: cue 2.2s var(--ease-in-out) infinite;
}
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }

/* Inner page hero */
.page-hero {
  position: relative;
  background: var(--c-espresso);
  color: var(--t-on-dark);
  padding-block: clamp(5rem, 11vw, 9rem) clamp(4rem, 8vw, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
.page-hero__bg { position: absolute; inset: 0; z-index: -2; opacity: .3; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(110deg, rgba(20,16,13,.96) 25%, rgba(20,16,13,.72) 70%, rgba(143,50,19,.28) 100%);
}
.page-hero__title { font-size: var(--fs-h1); margin-bottom: var(--sp-4); }
.page-hero__lead { max-width: 60ch; color: var(--t-on-dark-mute); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.page-hero .giant-mark {
  position: absolute;
  right: -2%; bottom: -22%;
  z-index: -1;
}

/* Breadcrumbs */
.breadcrumb { margin-bottom: var(--sp-5); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); letter-spacing: .04em; }
.breadcrumb li { display: flex; align-items: center; gap: var(--sp-2); color: var(--t-on-dark-mute); }
.breadcrumb li + li::before { content: "/"; color: var(--c-brass); opacity: .7; }
.breadcrumb a:hover { color: var(--c-brass-light); }
.breadcrumb [aria-current="page"] { color: var(--c-brass-light); }

/* ==========================================================================
   09. SECTIONS & EDITORIAL BLOCKS
   ========================================================================== */

/* Image block that bleeds past the section edge */
.media-frame {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.media-frame img { width: 100%; height: 100%; object-fit: cover; }
.media-frame--tall { aspect-ratio: 4 / 5; }
.media-frame--wide { aspect-ratio: 4 / 3; }
.media-frame--square { aspect-ratio: 1; }

/* Brass rule offset behind an image — editorial layering */
.media-stack { position: relative; }
.media-stack::before {
  content: "";
  position: absolute;
  inset: -18px -18px 40px 40px;
  border: 1px solid rgba(176, 138, 74, .45);
  border-radius: var(--radius-md);
  z-index: -1;
}
.media-stack__caption {
  position: absolute;
  left: var(--sp-5); bottom: var(--sp-5);
  right: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  color: var(--t-on-dark);
  z-index: 3;
}

/* Margin note — caption set in the outer column */
.margin-note {
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--t-on-light-mute);
  padding-left: var(--sp-4);
  border-left: 1px solid var(--c-brass);
}
.on-dark .margin-note { color: var(--t-on-dark-mute); }

/* Checklist */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.checklist li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.checklist svg { width: 20px; height: 20px; flex: none; color: var(--c-rust); margin-top: 3px; }
.on-dark .checklist svg { color: var(--c-brass-light); }

/* Two-column feature list */
.feature-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-6) var(--sp-7); }

/* ==========================================================================
   10. CARDS
   ========================================================================== */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.card-grid--3 { grid-template-columns: repeat(3, 1fr); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Service card — 3D tilt target */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--c-bone);
  border: 1px solid rgba(59, 46, 36, .10);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transform-style: preserve-3d;
  transition: box-shadow var(--dur-base) var(--ease-out-expo),
              transform var(--dur-base) var(--ease-out-expo),
              border-color var(--dur-base) var(--ease-out-expo);
  will-change: transform;
}
.card:hover {
  box-shadow: var(--shadow-xl);
  border-color: rgba(176, 138, 74, .38);
}
.on-dark .card {
  background: var(--c-walnut-soft);
  border-color: rgba(212, 179, 120, .14);
}
/* Cursor-tracking specular highlight */
.card__sheen {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 244, 224, .16),
    transparent 62%
  );
  transition: opacity var(--dur-base) var(--ease-out-expo);
}
.card:hover .card__sheen { opacity: 1; }

.card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-oat); }
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out-expo), filter var(--dur-slow) var(--ease-out-expo);
}
.card:hover .card__media img { transform: scale(1.06); }
.card__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(20,16,13,.62));
  opacity: .85;
}
.card__tag {
  position: absolute;
  top: var(--sp-4); left: var(--sp-4);
  z-index: 2;
  padding: .34rem .8rem;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t-on-dark);
  background: rgba(20, 16, 13, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 179, 120, .28);
  border-radius: var(--radius-pill);
}
.card__body { padding: clamp(1.5rem, 2.4vw, 2rem); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.card__title { font-family: var(--f-display); font-size: var(--fs-h3); letter-spacing: var(--ls-display); }
.card__text { font-size: var(--fs-sm); color: var(--t-on-light-mute); line-height: var(--lh-loose); flex: 1; }
.on-dark .card__text { color: var(--t-on-dark-mute); }
.card__foot { margin-top: var(--sp-3); }
/* Full-card click target without nesting interactive elements */
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 4; }

/* Numbered index on cards */
.card__index {
  position: absolute;
  right: var(--sp-5); top: var(--sp-4);
  z-index: 2;
  font-family: var(--f-display);
  font-size: 3.25rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247, 243, 236, .5);
}

/* Value card — icon-led, no photo */
.value {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--c-bone);
  border: 1px solid rgba(59, 46, 36, .10);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo);
}
.value:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.on-dark .value { background: var(--c-walnut-soft); border-color: rgba(212,179,120,.14); }
.value__icon {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  margin-bottom: var(--sp-5);
  border-radius: var(--radius-sm);
  background: linear-gradient(140deg, rgba(196,69,26,.14), rgba(176,138,74,.14));
  border: 1px solid rgba(176, 138, 74, .3);
  color: var(--c-rust);
}
.on-dark .value__icon { color: var(--c-brass-light); }
.value__icon svg { width: 24px; height: 24px; }
.value__title { font-family: var(--f-display); font-size: var(--fs-h4); font-weight: 600; margin-bottom: var(--sp-3); letter-spacing: var(--ls-display); }
.value__text { font-size: var(--fs-sm); color: var(--t-on-light-mute); line-height: var(--lh-loose); }
.on-dark .value__text { color: var(--t-on-dark-mute); }

/* ==========================================================================
   11. BEFORE / AFTER SLIDER
   ========================================================================== */

.ba {
  position: relative;
  aspect-ratio: 1;
  /* --ba-ratio lets a pair match its source images instead of being cropped */
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
  user-select: none;
  touch-action: pan-y;
  background: var(--c-walnut);
  cursor: ew-resize;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ba__after { z-index: 1; }
/* Before layer is clipped by the divider position */
.ba__before-wrap {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden;
  width: var(--pos, 50%);
  will-change: width;
}
.ba__before-wrap .ba__img {
  width: var(--frame-w, 100%);
  max-width: none;
}
.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  z-index: 4;
  width: 2px;
  background: var(--c-brass-light);
  transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(20,16,13,.35), 0 0 22px rgba(212,179,120,.55);
  will-change: left;
}
.ba__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-brass);
  color: var(--c-espresso);
  box-shadow: var(--shadow-brass), 0 0 0 6px rgba(212,179,120,.16);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out-expo);
}
.ba:hover .ba__grip { transform: translate(-50%, -50%) scale(1.08); }
.ba__grip:focus-visible { outline: 2px solid var(--c-bone); outline-offset: 4px; }
.ba__grip svg { width: 22px; height: 22px; pointer-events: none; }
.ba__label {
  position: absolute;
  top: var(--sp-4);
  z-index: 3;
  padding: .34rem .85rem;
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--t-on-dark);
  background: rgba(20,16,13,.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(212,179,120,.25);
  border-radius: var(--radius-pill);
  pointer-events: none;
}
.ba__label--before { left: var(--sp-4); }
.ba__label--after  { right: var(--sp-4); }

/* Landscape pair (539x303 source) — keep its native shape.
   Both sliders sit in the same row, so use a shared 4/3 compromise on wide
   screens: close enough to each source that neither crops badly, and the two
   figures stay visually aligned. */
.ba--wide { aspect-ratio: 4 / 3; }
@media (max-width: 768px) {
  .ba--wide { aspect-ratio: 16 / 10; }
}

.ba-caption {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--t-on-light-mute);
}
.on-dark .ba-caption { color: var(--t-on-dark-mute); }

/* ==========================================================================
   12. REVIEWS (tabbed by service category)
   ========================================================================== */

.reviews__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-6);
  margin-bottom: var(--sp-7);
}
.reviews__score { display: flex; align-items: center; gap: var(--sp-4); }
.reviews__score-num { font-family: var(--f-display); font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; color: var(--c-brass-light); }
.reviews__score-meta { display: flex; flex-direction: column; gap: var(--sp-2); }
.stars { display: inline-flex; gap: 3px; color: var(--c-star); }
.stars svg { width: 17px; height: 17px; }
.reviews__source { font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--t-on-dark-mute); }

/* Tabs */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  position: relative;
  margin-bottom: var(--sp-7);
  border-bottom: 1px solid rgba(212, 179, 120, .18);
  padding-bottom: var(--sp-3);
}
.tab {
  position: relative;
  padding: .7rem 1.25rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--t-on-dark-mute);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out-expo), background var(--dur-fast) var(--ease-out-expo);
}
.tab:hover { color: var(--t-on-dark); background: rgba(212, 179, 120, .08); }
.tab[aria-selected="true"] { color: var(--c-espresso); background: var(--c-brass); font-weight: 600; }

.tabpanel { display: none; }
.tabpanel.is-active { display: block; animation: panelIn var(--dur-slow) var(--ease-out-expo); }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: clamp(1.6rem, 2.6vw, 2.25rem);
  background: var(--c-walnut-soft);
  border: 1px solid rgba(212, 179, 120, .14);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo);
}
.review:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(212,179,120,.32); }
.review__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.review__text { font-size: var(--fs-sm); line-height: var(--lh-loose); color: var(--t-on-dark); flex: 1; }
.review__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid rgba(212,179,120,.14); }
.review__author { display: flex; align-items: center; gap: var(--sp-3); }
.review__avatar {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--c-rust), var(--c-rust-deep));
  color: #fff;
  font-weight: 600;
  font-size: var(--fs-sm);
  flex: none;
}
.review__name { font-weight: 600; font-size: var(--fs-sm); }
.review__meta { font-size: var(--fs-xs); color: var(--t-on-dark-mute); }
.review__g { width: 18px; height: 18px; flex: none; }

/* Placeholder state for review slots awaiting real content */
.review--placeholder {
  border-style: dashed;
  border-color: rgba(212, 179, 120, .35);
  background: rgba(42, 33, 26, .5);
}
.review--placeholder .review__text { color: var(--t-on-dark-mute); font-style: italic; }

/* ==========================================================================
   13. PROCESS / STEPS
   ========================================================================== */

.steps { display: grid; gap: var(--sp-6); counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  padding-block: var(--sp-6);
  border-top: 1px solid rgba(176, 138, 74, .26);
  transition: background var(--dur-base) var(--ease-out-expo);
}
.on-dark .step { border-top-color: rgba(212,179,120,.16); }
.step__num {
  font-family: var(--f-display);
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-brass);
  min-width: 2.2ch;
  transition: color var(--dur-base) var(--ease-out-expo);
}
.step:hover .step__num { color: var(--c-brass); }
.step__title { font-family: var(--f-display); font-size: var(--fs-h3); margin-bottom: var(--sp-3); letter-spacing: var(--ls-display); }
.step__text { color: var(--t-on-light-mute); line-height: var(--lh-loose); }
.on-dark .step__text { color: var(--t-on-dark-mute); }

/* ==========================================================================
   14. FAQ ACCORDION
   ========================================================================== */

.faq { border-top: 1px solid rgba(176, 138, 74, .26); }
.on-dark .faq { border-top-color: rgba(212,179,120,.16); }
.faq__item { border-bottom: 1px solid rgba(176, 138, 74, .26); }
.on-dark .faq__item { border-bottom-color: rgba(212,179,120,.16); }
.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  text-align: left;
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.9vw, 1.5rem);
  letter-spacing: var(--ls-display);
  color: inherit;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.faq__q:hover { color: var(--c-rust); }
.on-dark .faq__q:hover { color: var(--c-brass-light); }
.faq__icon {
  position: relative;
  width: 34px; height: 34px;
  flex: none;
  border: 1px solid rgba(176, 138, 74, .45);
  border-radius: 50%;
  transition: background var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--dur-base) var(--ease-out-expo), opacity var(--dur-fast) linear;
}
.faq__icon::before { width: 13px; height: 1.5px; }
.faq__icon::after  { width: 1.5px; height: 13px; }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--c-brass); color: var(--c-espresso); transform: rotate(180deg); }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.faq__a {
  overflow: hidden;
  height: 0;
  transition: height var(--dur-base) var(--ease-out-expo);
}
.faq__a-inner { padding-bottom: var(--sp-6); padding-right: clamp(0px, 6vw, 80px); color: var(--t-on-light-mute); line-height: var(--lh-loose); }
.on-dark .faq__a-inner { color: var(--t-on-dark-mute); }

/* ==========================================================================
   15. MARQUEE & SUPPLIER STRIP
   ========================================================================== */

.marquee {
  overflow: hidden;
  border-block: 1px solid rgba(176, 138, 74, .26);
  padding-block: var(--sp-5);
  -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 {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  width: max-content;
  animation: marquee 38s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
.marquee__item {
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: var(--ls-display);
  color: var(--t-on-light-mute);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}
.on-dark .marquee__item { color: var(--t-on-dark-mute); }
.marquee__item::after { content: "◆"; font-size: .5em; color: var(--c-brass); }

/* Supplier logo strip */
.suppliers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(2rem, 6vw, 5rem); }
.suppliers img {
  height: 34px;
  width: auto;
  opacity: .55;
  filter: grayscale(1);
  transition: opacity var(--dur-base) var(--ease-out-expo), filter var(--dur-base) var(--ease-out-expo);
}
.suppliers img:hover { opacity: 1; filter: grayscale(0); }
.supplier-name {
  font-family: var(--f-display);
  font-size: 1.25rem;
  letter-spacing: .02em;
  color: var(--t-on-light-mute);
  opacity: .7;
  transition: opacity var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo);
}
.supplier-name:hover { opacity: 1; color: var(--c-rust); }
.on-dark .supplier-name { color: var(--t-on-dark-mute); }

/* ==========================================================================
   16. FORMS
   ========================================================================== */

.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }

.field { position: relative; display: flex; flex-direction: column; }
.field__input,
.field__select,
.field__textarea {
  width: 100%;
  padding: 1.5rem 1rem .65rem;
  font-size: var(--fs-sm);
  color: var(--t-on-light);
  background: rgba(247, 243, 236, .6);
  border: 1px solid rgba(59, 46, 36, .22);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-base) var(--ease-out-expo),
              box-shadow var(--dur-base) var(--ease-out-expo),
              background var(--dur-base) var(--ease-out-expo);
  appearance: none;
}
.field__textarea { min-height: 148px; resize: vertical; padding-top: 1.7rem; }
.field__select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C4F42' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
  padding-right: 2.75rem;
}
.field__label {
  position: absolute;
  left: 1rem; top: 1.05rem;
  font-size: var(--fs-sm);
  color: var(--t-on-light-mute);
  pointer-events: none;
  transform-origin: left top;
  transition: transform var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo);
}
/* Float the label when focused or filled */
.field__input:focus + .field__label,
.field__input:not(:placeholder-shown) + .field__label,
.field__textarea:focus + .field__label,
.field__textarea:not(:placeholder-shown) + .field__label,
.field__select:focus + .field__label,
.field__select.has-value + .field__label {
  transform: translateY(-.62rem) scale(.76);
  color: var(--c-rust);
}
.field__select + .field__label { transform: translateY(-.62rem) scale(.76); }

.field__input:focus,
.field__select:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--c-brass);
  background: var(--c-bone);
  box-shadow: 0 0 0 3px rgba(176, 138, 74, .16);
}
.field.has-error .field__input,
.field.has-error .field__select,
.field.has-error .field__textarea {
  border-color: var(--c-error);
  box-shadow: 0 0 0 3px rgba(163, 52, 27, .12);
}
.field__error {
  display: none;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--c-error);
}
.field.has-error .field__error { display: block; }
.field__req { color: var(--c-rust); }

/* File input */
.field__file {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px dashed rgba(59, 46, 36, .3);
  border-radius: var(--radius-sm);
  background: rgba(247, 243, 236, .5);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out-expo), background var(--dur-base) var(--ease-out-expo);
}
.field__file:hover { border-color: var(--c-brass); background: var(--c-bone); }
.field__file input { position: absolute; opacity: 0; width: .1px; height: .1px; }
.field__file svg { width: 26px; height: 26px; color: var(--c-rust); flex: none; }
.field__file-text { font-size: var(--fs-sm); }
.field__file-text strong { display: block; }
.field__file-text span { color: var(--t-on-light-mute); font-size: var(--fs-xs); }

/* Radio group */
.radio-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: .6rem 1.1rem;
  font-size: var(--fs-sm);
  border: 1px solid rgba(59, 46, 36, .22);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out-expo), background var(--dur-fast) var(--ease-out-expo), color var(--dur-fast) var(--ease-out-expo);
}
.radio input { position: absolute; opacity: 0; }
.radio:has(input:checked) { background: var(--c-rust); color: #fff; border-color: transparent; }
.radio:has(input:focus-visible) { outline: 2px solid var(--c-brass); outline-offset: 2px; }

/* Honeypot — hidden from humans, visible to bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form__note { font-size: var(--fs-xs); color: var(--t-on-light-mute); }
.form__status {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  display: none;
}
.form__status.is-visible { display: block; }
.form__status--error { background: rgba(163, 52, 27, .1); border: 1px solid rgba(163, 52, 27, .3); color: var(--c-error); }
.form__status--success { background: rgba(75, 107, 62, .1); border: 1px solid rgba(75, 107, 62, .3); color: var(--c-success); }

.btn.is-loading { pointer-events: none; opacity: .75; }
.btn.is-loading .btn__label { opacity: .4; }
.btn__spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-loading .btn__spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   17. CTA BANDS
   ========================================================================== */

.cta-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--c-espresso);
  color: var(--t-on-dark);
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
.cta-band__bg { position: absolute; inset: 0; z-index: -2; opacity: .22; }
.cta-band__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta-band::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, rgba(20,16,13,.95) 20%, rgba(143,50,19,.5) 100%);
}
.cta-band__inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.cta-band__title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.cta-band__actions { display: flex; flex-direction: column; gap: var(--sp-4); }
.cta-band__phone {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--radius-md);
}
.cta-band__phone svg { width: 30px; height: 30px; color: var(--c-brass-light); flex: none; }
.cta-band__phone-num { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: var(--ls-display); }
.cta-band__phone-label { font-size: var(--fs-xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--t-on-dark-mute); }

/* ==========================================================================
   18. FOOTER
   ========================================================================== */

.footer { background: var(--c-espresso); color: var(--t-on-dark-mute); position: relative; }
.footer__main {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(4rem, 7vw, 6rem);
}
.footer__brand-text { font-size: var(--fs-sm); line-height: var(--lh-loose); margin-top: var(--sp-5); max-width: 38ch; }
.footer__title {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-brass);
  margin-bottom: var(--sp-5);
}
.footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.footer__list a { transition: color var(--dur-fast) var(--ease-out-expo), padding-left var(--dur-fast) var(--ease-out-expo); }
.footer__list a:hover { color: var(--c-brass-light); padding-left: 5px; }

.footer__contact { display: grid; gap: var(--sp-4); font-size: var(--fs-sm); }
.footer__contact-item { display: flex; align-items: flex-start; gap: var(--sp-3); }
.footer__contact-item svg { width: 15px; height: 15px; color: var(--c-brass); flex: none; margin-top: 5px; }
.footer__contact-item a:hover { color: var(--c-brass-light); }

.footer__map {
  margin-top: var(--sp-5);
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(212, 179, 120, .2);
  filter: grayscale(1) contrast(.9) brightness(.85);
  transition: filter var(--dur-slow) var(--ease-out-expo);
}
.footer__map:hover { filter: grayscale(0) contrast(1) brightness(1); }
.footer__map iframe { display: block; width: 100%; height: 160px; border: 0; }

.footer__socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer__social {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(212, 179, 120, .28);
  border-radius: 50%;
  transition: background var(--dur-base) var(--ease-out-expo), color var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
}
.footer__social svg { width: 16px; height: 16px; }
.footer__social:hover { background: var(--c-brass); color: var(--c-espresso); transform: translateY(-3px); }

.footer__bottom {
  border-top: 1px solid rgba(212, 179, 120, .16);
  padding-block: var(--sp-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--fs-xs);
}
.footer__credit a {
  color: var(--c-brass-light);
  font-weight: 600;
  transition: color var(--dur-fast) var(--ease-out-expo);
}
.footer__credit a:hover { color: var(--c-rust-bright); }
.footer__legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.footer__legal a:hover { color: var(--c-brass-light); }

/* ==========================================================================
   19. STICKY MOBILE ACTION BAR  (<=768px only)
   ========================================================================== */

.mobile-bar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-mobilebar);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  gap: var(--sp-3);
  background: rgba(20, 16, 13, .88);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-top: 1px solid rgba(212, 179, 120, .22);
  box-shadow: 0 -8px 32px rgba(20, 16, 13, .4);
  transform: translateY(110%);
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.mobile-bar.is-visible { transform: translateY(0); }
.mobile-bar.is-hidden { transform: translateY(110%); }
.mobile-bar__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: .85rem 1rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  transition: transform var(--dur-fast) var(--ease-out-expo), filter var(--dur-fast) var(--ease-out-expo);
}
.mobile-bar__btn:active { transform: scale(.97); }
.mobile-bar__btn svg { width: 19px; height: 19px; flex: none; }
.mobile-bar__btn--call { background: var(--c-rust); }
.mobile-bar__btn--wa { background: #1FAF54; }
@supports not (backdrop-filter: blur(4px)) {
  .mobile-bar { background: rgba(20, 16, 13, .97); }
}

/* ==========================================================================
   20. GALLERY
   ========================================================================== */

.filter-bar { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.filter {
  padding: .62rem 1.3rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--t-on-light-mute);
  border: 1px solid rgba(59, 46, 36, .2);
  border-radius: var(--radius-pill);
  transition: all var(--dur-fast) var(--ease-out-expo);
}
.filter:hover { border-color: var(--c-brass); color: var(--t-on-light); }
.filter[aria-pressed="true"] { background: var(--c-walnut); color: var(--t-on-dark); border-color: transparent; }

.masonry {
  columns: 3;
  column-gap: clamp(1rem, 2vw, 1.5rem);
}
.masonry__item {
  break-inside: avoid;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo), opacity var(--dur-base) var(--ease-out-expo);
  display: block;
}
.masonry__item:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.masonry__item img { width: 100%; height: auto; display: block; transition: transform var(--dur-slow) var(--ease-out-expo); }
.masonry__item:hover img { transform: scale(1.04); }
.masonry__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg, transparent, rgba(20,16,13,.85));
  color: var(--t-on-dark);
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out-expo), transform var(--dur-base) var(--ease-out-expo);
}
.masonry__item:hover .masonry__cap { opacity: 1; transform: translateY(0); }
.masonry__item.is-hidden { display: none; }

/* Horizontal scroll rail — one per key page */
.rail {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-5);
  scrollbar-width: thin;
  scrollbar-color: var(--c-brass) transparent;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { height: 5px; }
.rail::-webkit-scrollbar-track { background: rgba(176,138,74,.14); border-radius: 10px; }
.rail::-webkit-scrollbar-thumb { background: var(--c-brass); border-radius: 10px; }
.rail__item {
  flex: 0 0 clamp(260px, 30vw, 400px);
  scroll-snap-align: start;
}

/* ==========================================================================
   21. UTILITY PAGES (404, thank-you)
   ========================================================================== */

.util {
  min-height: 78vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: var(--sp-9);
  background: var(--c-espresso);
  color: var(--t-on-dark);
  position: relative;
  overflow: hidden;
}
.util__code {
  font-family: var(--f-display);
  font-size: clamp(6rem, 18vw, 14rem);
  line-height: .85;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--c-brass);
  margin-bottom: var(--sp-5);
}
.util__icon {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  margin: 0 auto var(--sp-6);
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(196,69,26,.2), rgba(176,138,74,.2));
  border: 1px solid rgba(212,179,120,.4);
  color: var(--c-brass-light);
}
.util__icon svg { width: 38px; height: 38px; }
.util__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-7); }

/* Long-form legal copy */
.prose h2 { font-size: var(--fs-h3); margin-top: var(--sp-8); margin-bottom: var(--sp-4); }
.prose h3 { font-size: var(--fs-h4); font-family: var(--f-body); font-weight: 650; margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.prose p, .prose li { color: var(--t-on-light-mute); line-height: var(--lh-loose); }
.prose ul { padding-left: var(--sp-5); display: grid; gap: var(--sp-2); }
.prose a { color: var(--c-rust); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   22. SCROLL PROGRESS, CURSOR, PAGE TRANSITION
   ========================================================================== */

.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-modal);
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--c-rust), var(--c-brass-light));
  will-change: transform;
  pointer-events: none;
}

/* Custom cursor — desktop pointer devices only, enabled by JS */
.cursor-dot, .cursor-ring { display: none; }
@media (hover: hover) and (pointer: fine) {
  body.has-cursor .cursor-dot,
  body.has-cursor .cursor-ring {
    display: block;
    position: fixed;
    top: 0; left: 0;
    z-index: var(--z-modal);
    pointer-events: none;
    border-radius: 50%;
    will-change: transform;
  }
  body.has-cursor .cursor-dot {
    width: 6px; height: 6px;
    background: var(--c-rust-bright);
    transform: translate(-50%, -50%);
  }
  body.has-cursor .cursor-ring {
    width: 32px; height: 32px;
    border: 1px solid rgba(176, 138, 74, .75);
    transform: translate(-50%, -50%);
    transition: width var(--dur-base) var(--ease-out-expo),
                height var(--dur-base) var(--ease-out-expo),
                background var(--dur-base) var(--ease-out-expo),
                border-color var(--dur-base) var(--ease-out-expo);
  }
  body.has-cursor.cursor-grow .cursor-ring {
    width: 68px; height: 68px;
    background: rgba(176, 138, 74, .12);
    border-color: var(--c-brass-light);
  }
}

/* Fabric-wipe page transition */
.page-wipe {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--c-espresso);
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
}
.page-wipe.is-in {
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform 520ms var(--ease-out-expo);
}
.page-wipe.is-out {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 620ms var(--ease-out-expo);
}

/* ==========================================================================
   23. ANIMATION PRIMITIVES
   ========================================================================== */

/* Scroll-triggered entrance — staggered fade + rise */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--dur-reveal) var(--ease-out-expo),
              transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
[data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
[data-reveal="right"] { transform: translate3d(32px, 0, 0); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="left"].is-revealed,
[data-reveal="right"].is-revealed { transform: translate3d(0, 0, 0); }
[data-reveal="scale"].is-revealed { transform: scale(1); }

/* Clip-path mask wipe for split headline lines */
.reveal-line { display: block; overflow: hidden; }
.reveal-line > span {
  display: block;
  transform: translate3d(0, 105%, 0);
  transition: transform var(--dur-reveal) var(--ease-out-expo);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform;
}
.is-revealed .reveal-line > span,
.reveal-line.is-revealed > span { transform: translate3d(0, 0, 0); }

/* Parallax layer */
[data-parallax] { will-change: transform; }

/* Magnetic button wrapper */
[data-magnetic] { display: inline-block; will-change: transform; }

/* ==========================================================================
   24. RESPONSIVE
   ========================================================================== */

@media (max-width: 1180px) {
  .footer__main { grid-template-columns: 1fr 1fr; }
  .card-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .nav__list, .header__cta { display: none; }
  .burger { display: grid; }
  /* Several layouts set an explicit grid-column inline (e.g. style="grid-column:1/6").
     Inline styles beat a plain selector, so !important is required here to collapse
     the editorial split to one column on small screens. Without it the columns keep
     their desktop spans and push the page into horizontal overflow. */
  .split > *,
  .split__media, .split__body,
  .split--flip .split__media, .split--flip .split__body { grid-column: 1 / -1 !important; }
  .split--flip .split__media { order: 0; }
  .split--flip .split__body { order: 1; }
  .media-stack::before { inset: -12px -12px 24px 24px; }
  .cta-band__inner { grid-template-columns: 1fr; }
  .masonry { columns: 2; }
  .card-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .hero__stats-inner { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .col-7, .col-6, .col-5, .col-4 { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .mobile-bar { display: flex; }
  /* Reserve space so the sticky bar never covers the footer */
  body { padding-bottom: 76px; }

  .topbar__group--secondary { display: none; }
  .topbar__inner { justify-content: space-between; gap: var(--sp-3); }

  .hero { min-height: 88vh; }
  .hero__stats-inner { grid-template-columns: repeat(2, 1fr); }
  .scroll-cue { display: none; }

  .card-grid--3, .card-grid--2, .card-grid--4 { grid-template-columns: 1fr; }
  .masonry { columns: 1; }
  .form__row { grid-template-columns: 1fr; }
  .footer__main { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; gap: var(--sp-3); }
  .reviews__head { flex-direction: column; align-items: flex-start; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .pullquote { padding-left: var(--sp-4); }
  .util__actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .hero__stats-inner { grid-template-columns: 1fr 1fr; }
  .logo__img, .header.is-stuck .logo__img { height: 38px; padding: 5px 9px; }
  .logo__sub { display: none; }
  .footer__bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  .ba__grip { width: 44px; height: 44px; }
}

/* ==========================================================================
   25. REDUCED MOTION & PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .reveal-line > span { transform: none !important; }
  .hero__bg img { animation: none !important; }
  .marquee__track { animation: none !important; }
  .scroll-cue__line::after { animation: none !important; }
  .mobile-menu__link { transform: none !important; }
  .page-wipe { display: none !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  .scroll-progress { display: none !important; }
  .btn:hover, .card:hover, .value:hover, .review:hover, .masonry__item:hover { transform: none !important; }
}

@media print {
  .topbar, .header, .mobile-bar, .mobile-menu, .scroll-progress,
  .cta-band, .footer__map, .scroll-cue { display: none !important; }
  body { background: #fff; color: #000; padding-bottom: 0; }
  .hero, .page-hero, .on-dark, .on-espresso { background: #fff !important; color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; }
}