/* ============================================================================
   Fine Shine Furniture — homepage prototype
   Concept: "The Joinery Grid". Structure is drawn with hairline members that
   meet at joints; the signature interaction assembles those members on load
   and on scroll. No framework, no build step.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. FONTS */
/* Futura is a licensed typeface and is not bundled here. When a licensed or
   locally supplied Futura is available, drop the files into assets/fonts/ and
   uncomment the block below. Until then the fallback stack (Avenir Next on
   macOS/iOS, Century Gothic on Windows) carries the same geometric character.

@font-face {
  font-family: "Futura";
  src: url("../fonts/futura-book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Futura";
  src: url("../fonts/futura-medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Futura";
  src: url("../fonts/futura-demi.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
*/

/* --------------------------------------------------------------- 2. TOKENS */
:root {
  /* Surfaces, lightest to deepest */
  --white: #FFFFFF;
  --cream: #F6F0E8;
  --timber: #D8C2AE;
  --teak: #4A3328;

  /* Accent. --accent is for lines, borders and large type only (3.19:1 on
     white). --accent-deep is the text- and button-safe variant (5.16:1). */
  --accent: #AE8875;
  --accent-deep: #8A6553;
  --accent-darker: #74533F;

  /* Type */
  --ink: #211B18;
  --muted: #6E625C;
  --border: #E6DDD6;

  /* Per-section colour roles. Sections override these, components read them,
     so no component needs a dark-background variant of its own. */
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --rule: var(--border);
  --focus: var(--accent-deep);

  --font: "Futura", "Avenir Next", "Century Gothic", Arial, sans-serif;

  /* Type scale — display sizes are fluid, body sizes are not. */
  --fs-display: clamp(2.4rem, 1.35rem + 4.4vw, 4.6rem);
  --fs-h2: clamp(1.85rem, 1.25rem + 2.4vw, 3rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
  --fs-lede: clamp(1.02rem, 0.97rem + 0.28vw, 1.18rem);
  --fs-body: 1.0625rem;   /* 17px */
  --fs-small: 0.9375rem;  /* 15px */
  --fs-label: 0.6875rem;  /* 11px, uppercase spec register */

  /* Spacing */
  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --shell: 1320px;
  --sec-y: clamp(4rem, 2.4rem + 6.4vw, 8rem);

  /* Motion — all durations inside the 180–500ms band */
  --t-fast: 180ms;
  --t-mid: 280ms;
  --t-slow: 460ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --tap: 44px; /* minimum interactive target */

  /* How far a full-bleed element must reach past the centred shell to touch
     the viewport edge: the shell's outer margin plus its own gutter. */
  --bleed: calc(max(0px, (100vw - var(--shell)) / 2) + var(--gutter));
}

/* ---------------------------------------------------------------- 3. RESET */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }

/* Focus: always visible, never removed. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
:focus:not(:focus-visible) { outline: none; }

.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 200;
  background: var(--ink); color: var(--white);
  padding: 0.85rem 1.25rem; font-size: var(--fs-small);
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 0.5rem; }

.shell {
  width: 100%; max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ------------------------------------------------------------ 4. TYPE ROLES */

/* The spec register: compact uppercase used for eyebrows, product codes,
   captions and table keys. This is what makes the page read as a workshop
   drawing rather than a shop template. */
.label {
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4;
  color: var(--fg-muted);
  margin: 0;
}
.label--accent { color: var(--accent-deep); }
.label--timber { color: var(--timber); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg);
  min-height: var(--tap);
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.link-arrow svg { transition: transform var(--t-mid) var(--ease); }
.link-arrow:hover { color: var(--accent-deep); border-bottom-color: var(--accent); }
.link-arrow:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------- 5. BUTTONS */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: var(--tap);
  padding: 0.75rem 1.6rem;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: var(--tap); padding: 0.5rem 1.05rem; }
.btn__icon { flex: none; }

.btn--ink { background: var(--ink); color: var(--white); }
.btn--ink:hover { background: var(--teak); }

.btn--accent { background: var(--accent-deep); color: var(--white); }
.btn--accent:hover { background: var(--accent-darker); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--teak); }
.btn--ghost:hover { background: var(--cream); border-color: var(--ink); }

.btn--timber { background: var(--timber); color: var(--ink); }
.btn--timber:hover { background: var(--white); }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  color: var(--fg);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.iconbtn:hover { color: var(--accent-deep); background: var(--cream); }

/* ------------------------------------------------- 6. SIGNATURE: JOINERY */
/* Four 1px members grow out of the corners and travel around the perimeter,
   then two tenon marks fade in last — the joint locking. Horizontal members
   scale on X and vertical members on Y, so line weight stays a crisp 1px
   throughout. Injected by script.js; see the .no-js fallback below. */

[data-joinery] { position: relative; }
[data-joinery-offset] { --jo: 14px; }

.jframe {
  position: absolute;
  inset: calc(-1 * var(--jo, 0px));
  pointer-events: none;
}
.jline {
  position: absolute;
  background: var(--accent);
  transition: transform var(--t-slow) var(--ease);
}
.jline--t { top: 0; left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left center; }
.jline--r { top: 0; right: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: center top; }
.jline--b { bottom: 0; right: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: right center; }
.jline--l { bottom: 0; left: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: center bottom; }

/* Staggered so the perimeter reads as one continuous member being wrapped. */
.is-assembled .jline--t { transform: scaleX(1); transition-delay: 0ms; }
.is-assembled .jline--r { transform: scaleY(1); transition-delay: 110ms; }
.is-assembled .jline--b { transform: scaleX(1); transition-delay: 220ms; }
.is-assembled .jline--l { transform: scaleY(1); transition-delay: 330ms; }

.jtenon {
  position: absolute; width: 11px; height: 11px;
  border: 1px solid var(--accent-deep);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease) 520ms;
}
.jtenon--tl { top: -3px; left: -3px; border-right: 0; border-bottom: 0; }
.jtenon--br { bottom: -3px; right: -3px; border-left: 0; border-top: 0; }
.is-assembled .jtenon { opacity: 1; }

/* Without JavaScript the frame is simply drawn, not assembled. */
.no-js [data-joinery] {
  outline: 1px solid var(--border);
  outline-offset: var(--jo, 0px);
}

/* Section rules draw left to right when the heading enters the viewport. */
[data-rule] { position: relative; }
[data-rule]::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 1px; background: var(--rule);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-slow) var(--ease);
}
[data-rule].is-revealed::before { transform: scaleX(1); }
.no-js [data-rule]::before { transform: scaleX(1); }

/* Generic scroll reveal */
[data-reveal] {
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .hero__copy > .jframe { display: none; }
  .no-js .hero__copy { outline: none; }
}


/* --------------------------------------------------- 7. ANNOUNCEMENT BAR */
.announce {
  background: var(--teak);
  color: var(--cream);
  --fg: var(--cream);
  --fg-muted: var(--timber);
  --focus: var(--timber);
}
.announce__list {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 0 2.25rem;
  min-height: 40px;
  padding-block: 0.55rem;
}
.announce__item {
  position: relative;
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--cream);
}
/* Joint mark between messages rather than a bullet or a slash. */
.announce__item + .announce__item::before {
  content: ""; position: absolute; left: -1.2rem; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px;
  border: 1px solid var(--timber); transform: rotate(45deg);
  opacity: 0.75;
}

/* ------------------------------------------------------------- 8. HEADER */
.header {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.header.is-stuck { box-shadow: 0 1px 0 var(--border), 0 10px 30px -24px rgba(33, 27, 24, 0.55); }
.header__inner {
  display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 2rem);
  min-height: 72px;
}

.wordmark { display: block; flex: none; padding-block: 0.5rem; }
.wordmark__img { height: 40px; width: auto; }
.wordmark__img--sm { height: 30px; }

.footer__brand .wordmark__img { height: 46px; }
.mobilemenu__head .wordmark__img { height: 30px; }

.nav { display: none; margin-inline-start: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(0.6rem, 1.4vw, 1.5rem); }
.nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: var(--tap);
  padding-inline: 0.45rem;
  font-size: var(--fs-small); font-weight: 500;
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
/* The active/hover marker is a joinery member, not a pill. */
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 14px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-fast) var(--ease);
}
.nav__link:hover { color: var(--accent-deep); }
.nav__link:hover::after,
.nav__link[aria-expanded="true"]::after,
.nav__link.is-current::after { transform: scaleX(1); }
.nav__caret { transition: transform var(--t-fast) var(--ease); }
.nav__link[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

.header__actions { display: flex; align-items: center; gap: 0.35rem; margin-inline-start: auto; }
.header__wa { display: none; }
.iconbtn--menu { margin-inline-end: -0.6rem; }
.burger { display: block; width: 20px; }
.burger i {
  display: block; height: 1px; background: currentColor;
  transition: transform var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease);
}
.burger i + i { margin-top: 5px; }
[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Search panel */
.searchpanel { border-top: 1px solid var(--border); background: var(--cream); }
.searchpanel__form { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.9rem; }
.searchpanel__input {
  flex: 1 1 auto; min-height: var(--tap);
  padding: 0.55rem 0.9rem;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink);
}
.searchpanel__input:focus { border-color: var(--accent); }
.searchpanel__close { flex: none; }

/* Mega-menu */
.mega { border-top: 1px solid var(--border); background: var(--white); box-shadow: 0 22px 30px -28px rgba(33, 27, 24, 0.5); }
.mega__inner {
  display: grid; gap: 2rem clamp(1rem, 2.4vw, 2.5rem);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
}
.mega__list { margin-top: 0.9rem; display: grid; gap: 0.1rem; }
.mega__list a {
  display: flex; align-items: center; min-height: var(--tap); padding: 0.3rem 0;
  font-size: var(--fs-small); color: var(--muted);
  transition: color var(--t-fast) var(--ease), padding-left var(--t-fast) var(--ease);
}
.mega__list a:hover { color: var(--ink); padding-left: 6px; }
.mega__col--feature { display: flex; flex-direction: column; gap: 1rem; }
.mega__feature {
  display: block; padding: 1.35rem;
  background: var(--cream);
  border-left: 2px solid var(--accent);
  transition: background-color var(--t-fast) var(--ease);
}
.mega__feature:hover { background: var(--timber); }
.mega__feature-title { display: block; margin: 0.6rem 0 0.9rem; font-size: var(--fs-small); font-weight: 600; }
.mega__all { align-self: start; }

/* Mobile menu */
.mobilemenu { position: fixed; inset: 0; z-index: 150; }
.mobilemenu::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(33, 27, 24, 0.45);
  opacity: 0; transition: opacity var(--t-mid) var(--ease);
}
.mobilemenu.is-open::before { opacity: 1; }
.mobilemenu__panel {
  position: absolute; inset-block: 0; right: 0;
  width: min(92vw, 380px);
  background: var(--white);
  padding: 1.1rem var(--gutter) 2rem;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--ease);
  display: flex; flex-direction: column; gap: 1.25rem;
}
.mobilemenu.is-open .mobilemenu__panel { transform: none; }
.mobilemenu__head { display: flex; align-items: center; justify-content: space-between; }
.mobilemenu__head .iconbtn { margin-inline-end: -0.6rem; }
.mobilemenu__search { display: flex; gap: 0.5rem; }
.mobilemenu__list > li { border-bottom: 1px solid var(--border); }
.mobilemenu__list > li > a,
.mobilemenu__acc {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: 52px;
  font-size: 1.05rem; font-weight: 500;
}
.mobilemenu__acc svg { transition: transform var(--t-mid) var(--ease); color: var(--accent-deep); }
.mobilemenu__acc[aria-expanded="true"] svg { transform: rotate(45deg); }
.mobilemenu__sub { padding: 0 0 0.85rem 0.9rem; border-left: 1px solid var(--accent); margin-bottom: 0.6rem; }
.mobilemenu__sub a { display: block; min-height: var(--tap); display: flex; align-items: center; font-size: var(--fs-small); color: var(--muted); }
.mobilemenu__sub a:hover { color: var(--ink); }
.mobilemenu__cta { width: 100%; }
.mobilemenu__meta { font-size: var(--fs-small); color: var(--muted); }
.mobilemenu__meta a { border-bottom: 1px solid var(--border); }

/* --------------------------------------------------------------- 9. HERO */
.hero { padding-block: clamp(2.25rem, 1.2rem + 4vw, 4.5rem) clamp(3rem, 1.6rem + 5vw, 6rem); }
.hero__grid { display: grid; gap: clamp(2.25rem, 5vw, 4rem); align-items: center; }

.hero__copy { max-width: 34rem; }
.hero__eyebrow { margin-bottom: 1.4rem; }
.hero__title {
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin-bottom: 1.35rem;
}
.hero__lede {
  font-size: var(--fs-lede);
  color: var(--muted);
  max-width: 30rem;
  margin-bottom: 2rem;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 2.25rem; }

.specrow { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.specrow li {
  position: relative;
  font-size: var(--fs-label);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  color: var(--muted);
}
.specrow li + li::before {
  content: ""; position: absolute; left: -0.78rem; top: 50%;
  width: 4px; height: 4px; margin-top: -2px;
  border: 1px solid var(--accent); transform: rotate(45deg);
}
.hero__trust { padding-top: 1.35rem; border-top: 1px solid var(--border); }

.hero__figure { position: relative; }
.hero__img { width: 100%; height: auto; }
.hero__caption {
  position: absolute; left: 0; bottom: -2.1rem;
  color: var(--accent-deep);
}

/* ------------------------------------------------------ 10. SECTION SHELL */
/* Only .section owns vertical rhythm. Modifiers change colour and nothing
   else, so section padding can never be cancelled by a later selector. */
.section { padding-block: var(--sec-y); }
/* In-page anchors land below the sticky header rather than under it. */
.section[id] { scroll-margin-top: 84px; }
.section[tabindex="-1"]:focus { outline: none; }
.section--cats { background: var(--white); }
.section--products { background: var(--cream); }
.section--custom { background: var(--white); }
.section--heritage {
  background: var(--teak);
  color: var(--cream);
  --fg: var(--cream);
  --fg-muted: var(--timber);
  --rule: rgba(216, 194, 174, 0.32);
  --focus: var(--timber);
}

.sechead {
  display: grid; gap: 1.25rem;
  padding-top: 1.6rem;
  margin-bottom: clamp(2rem, 3.5vw, 3.25rem);
}
.sechead__title {
  font-size: var(--fs-h2);
  font-weight: 500; line-height: 1.06; letter-spacing: -0.02em;
  text-wrap: balance;
}
.sechead__aside { display: grid; gap: 0.9rem; justify-items: start; }
.sechead__note { font-size: var(--fs-small); color: var(--muted); max-width: 34rem; }

/* --------------------------------------------------------- 11. CATEGORIES */
/* Finger joint: alternate columns drop, so the two rows interlock rather than
   sitting as a flat grid. The offset is removed below 900px. */
.catgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(0.85rem, 2vw, 1.5rem);
}
.catcard__link { display: block; }
/* A fixed ratio plus object-fit keeps the row aligned whatever ratio the
   supplied photograph happens to be. */
.catcard__media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--cream);
}
.catcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.catcard__link:hover .catcard__media img { transform: scale(1.03); }
/* Tenon marks appear at two corners on hover — the micro-echo of the hero. */
.catcard__media::before,
.catcard__media::after {
  content: ""; position: absolute; width: 16px; height: 16px;
  border: 1px solid var(--white);
  opacity: 0; transform: scale(0.6);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-mid) var(--ease);
}
.catcard__media::before { top: 10px; left: 10px; border-right: 0; border-bottom: 0; transform-origin: top left; }
.catcard__media::after { bottom: 10px; right: 10px; border-left: 0; border-top: 0; transform-origin: bottom right; }
.catcard__link:hover .catcard__media::before,
.catcard__link:hover .catcard__media::after,
.catcard__link:focus-visible .catcard__media::before,
.catcard__link:focus-visible .catcard__media::after { opacity: 1; transform: scale(1); }

.catcard__name {
  display: flex; align-items: center;
  min-height: var(--tap);
  padding-top: 0.7rem;
  font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.01em;
  border-top: 1px solid var(--border);
  margin-top: 0.85rem;
  transition: color var(--t-fast) var(--ease);
}
.catcard__link:hover .catcard__name { color: var(--accent-deep); }

/* ----------------------------------------------------------- 12. PRODUCTS */
/* The tab rail scrolls only on the narrowest screens. When it does, a fade at
   the right edge is added by script.js so the overflow is never silent. */
.tabs { position: relative; }
.tabs::after {
  content: ""; position: absolute; top: 0; right: 0;
  width: 52px; height: 46px;
  background: linear-gradient(to right, rgba(246, 240, 232, 0), var(--cream));
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
.tabs.has-more::after { opacity: 1; }

.tabs__bar {
  display: flex; gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__bar::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  min-height: var(--tap);
  padding: 0.6rem 1.05rem;
  font-size: var(--fs-small); font-weight: 600; white-space: nowrap;
  color: var(--muted);
  transition: color var(--t-fast) var(--ease);
}
.tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent-deep);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-mid) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); }
.tab.is-active::after { transform: scaleX(1); }

.tabs__panel:focus-visible { outline-offset: 6px; }
.tabs__foot { margin-top: 1.75rem; }

.prodgrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.2vw, 1.75rem);
}
.prodcard {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  transition: border-color var(--t-fast) var(--ease);
}
.prodcard:hover { border-color: var(--accent); }
.prodcard__media {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 1 / 1;
  background: var(--cream);
}
.prodcard__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.prodcard:hover .prodcard__media img { transform: scale(1.03); }

.prodcard__body {
  display: flex; flex-direction: column; flex: 1 1 auto;
  gap: 0.3rem;
  padding: 1.05rem 1.05rem 1.15rem;
  border-top: 1px solid var(--border);
}
.prodcard__badge {
  align-self: flex-start;
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.35rem;
  color: var(--ink);
  background: var(--timber);
}
/* Badges carry a text label, never colour alone. */
.prodcard__badge--promo { background: var(--accent-deep); color: var(--white); }
.prodcard__cat { color: var(--accent-deep); }
.prodcard__name {
  font-size: var(--fs-h3); font-weight: 500; line-height: 1.24; letter-spacing: -0.01em;
  margin-top: 0.15rem;
}
.prodcard__name a { transition: color var(--t-fast) var(--ease); }
.prodcard__name a:hover { color: var(--accent-deep); }
/* The whole card is clickable, but only the title is a real link. */
.prodcard__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.prodcard { position: relative; }
.prodcard__code { color: var(--muted); }
.prodcard__price {
  margin-top: 0.35rem;
  font-size: var(--fs-small); font-weight: 600;
}
.prodcard__actions {
  display: flex; flex-direction: column; align-items: stretch; gap: 0.55rem;
  margin-top: auto; padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
/* "View details" spans the card as a spec row; the whole card is the link. */
.prodcard__view {
  pointer-events: none;
  justify-content: space-between;
  min-height: 0;
  padding-block: 0.2rem 0.5rem;
}
.prodcard:hover .prodcard__view { color: var(--accent-deep); border-bottom-color: var(--accent); }
.prodcard:hover .prodcard__view svg { transform: translateX(5px); }

.wabtn {
  position: relative; z-index: 2;
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: var(--tap); min-width: var(--tap);
  padding: 0.4rem 0.75rem;
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--white); background: var(--accent-deep);
  transition: background-color var(--t-fast) var(--ease);
}
.wabtn:hover { background: var(--accent-darker); }

/* ------------------------------------------------------------- 13. CUSTOM */
.custom__grid { display: grid; gap: clamp(2.25rem, 5vw, 4.5rem); align-items: center; }
.custom__figure img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.custom__body { max-width: 36rem; }
.custom__title {
  font-size: var(--fs-h2); font-weight: 500; line-height: 1.06; letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 1rem 0 1.1rem;
}
.custom__lede { color: var(--muted); font-size: var(--fs-lede); margin-bottom: 2rem; }

/* Three ordered steps — the numbering is real sequence, not decoration. */
.steps { margin-bottom: 2.25rem; border-top: 1px solid var(--border); }
.steps__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.2rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
}
.steps__num { color: var(--accent-deep); }
.steps__name { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.005em; }
.steps__note { font-size: var(--fs-small); color: var(--muted); }

/* ----------------------------------------------------------- 14. HERITAGE */
.heritage__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
.heritage__title {
  font-size: var(--fs-h2); font-weight: 500; line-height: 1.06; letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 1rem 0 1.2rem;
  color: var(--white);
}
.heritage__lede { color: var(--timber); font-size: var(--fs-lede); margin-bottom: 2rem; max-width: 38rem; }
.heritage__figure img {
  width: 100%; height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* The panel is held by a bracket rather than a closed frame: the top and left
   members meet at a tenon, and the other two run off the page with the image. */
.heritage__figure .jline--r,
.heritage__figure .jline--b,
.heritage__figure .jtenon--br { display: none; }
.heritage__figure .jtenon { border-color: var(--accent); }
/* The bracket must not reach past the bled edge, or it widens the document. */
.heritage__figure .jframe { right: 0; }

.factgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}
.factgrid__cell {
  padding: 1.4rem 1.25rem 1.5rem 0;
  border-bottom: 1px solid var(--rule);
}
.factgrid__cell + .factgrid__cell { border-left: 1px solid var(--rule); padding-left: 1.25rem; }
.factgrid__k { color: var(--timber); margin-bottom: 0.55rem; }
.factgrid__v {
  font-size: var(--fs-body); font-weight: 500; line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--cream); margin: 0;
}

/* The supplied client logos are mixed — some dark artwork on transparent, some
   with an opaque white background — so they cannot sit on the teak band. The
   strip becomes a white plaque mounted at the foot of the section instead. */
.trusted {
  background: var(--white);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: calc(-1 * var(--sec-y));
  padding-block: clamp(1.75rem, 3vw, 2.75rem);
  --fg: var(--ink);
  --fg-muted: var(--muted);
  --focus: var(--accent-deep);
}
.trusted__title { color: var(--muted); margin-bottom: 1.35rem; }
.trusted__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 1.25rem;
  align-items: center;
}
.trusted__item { display: flex; align-items: center; justify-content: center; }
.trusted__item img {
  height: 40px; width: auto; max-width: 100%;
  object-fit: contain;
}
@media (min-width: 900px) {
  /* Source logos are 156x56, so 48px stays a downscale and keeps them crisp. */
  .trusted__item img { height: 48px; }
}

/* ---------------------------------------------------------- 15. FINAL CTA */
.finalcta { background: var(--cream); padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.finalcta__inner { display: grid; gap: 1.75rem; align-items: center; }
.finalcta__title {
  font-size: var(--fs-h2); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em;
  text-wrap: balance; max-width: 20ch;
}
.finalcta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ------------------------------------------------------------- 16. FOOTER */
.footer { background: var(--white); border-top: 1px solid var(--border); padding-block: clamp(2.75rem, 4vw, 4rem) 2rem; }
.footer__grid { display: grid; gap: 2.25rem clamp(1.5rem, 3vw, 3rem); }
.footer__desc { font-size: var(--fs-small); color: var(--muted); max-width: 34rem; margin: 0.9rem 0 1.2rem; }
.footer__contact { display: grid; gap: 0.15rem; }
.footer__contact a,
.footer__col a {
  display: inline-flex; align-items: center;
  min-height: var(--tap);
  font-size: var(--fs-small); color: var(--muted);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.footer__contact a:hover,
.footer__col a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.footer__h { margin-bottom: 0.6rem; color: var(--ink); }
.footer__base {
  display: flex; flex-wrap: wrap; gap: 0.75rem 1.75rem;
  align-items: center; justify-content: space-between;
  margin-top: clamp(2.25rem, 4vw, 3rem);
  padding-top: 1.35rem;
  border-top: 1px solid var(--border);
}
.footer__copy { font-size: var(--fs-small); color: var(--muted); }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer__legal a {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-size: var(--fs-small); color: var(--muted); border-bottom: 1px solid transparent;
}
.footer__legal a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ------------------------------------------------- 17. STICKY WHATSAPP CTA */
/* Sits above the safe area, clears the footer, never spans the full width. */
.stickywa {
  position: fixed; z-index: 90;
  right: var(--gutter);
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: var(--tap); padding: 0.6rem 1.1rem;
  background: var(--accent-deep); color: var(--white);
  font-size: var(--fs-label); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  box-shadow: 0 8px 24px -10px rgba(33, 27, 24, 0.6);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility var(--t-mid);
}
.stickywa.is-shown { opacity: 1; visibility: visible; transform: none; }
.stickywa:hover { background: var(--accent-darker); }

/* ================================================== 18. RESPONSIVE STEPS */

/* --- below 600px: single-column cards, stacked trust line ---------------- */
@media (max-width: 599px) {
  [data-joinery-offset] { --jo: 9px; }
  /* A full-bleed card on a phone reads better in a shorter crop. */
  .catcard__media { aspect-ratio: 3 / 2; }
  .prodcard__media { aspect-ratio: 4 / 3; }
  /* Stacked rather than wrapped, so no joint mark is stranded on line two. */
  .specrow { flex-direction: column; gap: 0.3rem; }
  .specrow li + li::before { content: none; }
  .tab { padding-inline: 0.7rem; }
}

/* --- 600px: cards get a third column of breathing room ------------------ */
@media (min-width: 600px) {
  .catgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prodgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trusted__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .steps__item { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.25rem 1.25rem; }
  .steps__num { grid-row: span 2; padding-top: 0.35rem; }
  .factgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 768px: tablet -------------------------------------------------------- */
@media (min-width: 768px) {
  .sechead {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end; gap: 2rem;
  }
  .sechead__aside { justify-items: start; }
  .prodgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .finalcta__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .stickywa { display: none; } /* the header CTA is visible from here up */
}

/* --- 900px: desktop layout, mega-menu, finger-joint offset ---------------- */
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.86fr); gap: clamp(3rem, 5.5vw, 5.5rem); }
  .hero__copy { --jo: clamp(20px, 2.2vw, 30px); max-width: 36rem; }
  .hero__figure { --jo: 16px; }

  .catgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 34px; }
  .catcard:nth-child(even) { transform: translateY(34px); }

  .prodgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .custom__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1fr); }
  .heritage__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
  /* Bleed the panel to the viewport's right edge, out of the centred shell. */
  .heritage__figure {
    --jo: 16px;
    margin-right: calc(-1 * var(--bleed));
  }
  .factgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .footer__grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: auto; }
}

/* --- 1000px: the desktop nav replaces the drawer -------------------------- */
@media (min-width: 1000px) {
  /* One row of six; update this count if the customer list changes. */
  .trusted__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .nav { display: block; }
  .header__wa { display: inline-flex; }
  .iconbtn--menu { display: none; }
  .header__actions { margin-inline-start: 0; }
}

/* --- 1000-1279px: the nav and the CTA cannot both have full width here, so
       the WhatsApp CTA collapses to its icon. The label stays in the
       accessibility tree, so the button keeps its name. ---------------------- */
@media (min-width: 1000px) and (max-width: 1279px) {
  .nav__list { gap: 0.55rem; }
  .header__wa { padding-inline: 0; width: var(--tap); }
  .header__wa .btn__label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

/* --- 1200px: widen the editorial spine ----------------------------------- */
@media (min-width: 1200px) {
  .sechead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .sechead__aside {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end; gap: 2rem;
  }
}

/* ------------------------------------------ 19. REDUCED MOTION & PRINT */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* Everything is shown in its final state rather than animated into it. */
  .jline--t, .jline--b { transform: scaleX(1); }
  .jline--r, .jline--l { transform: scaleY(1); }
  .jtenon { opacity: 1; }
  [data-rule]::before { transform: scaleX(1); }
  [data-reveal] { opacity: 1; transform: none; }
  .catcard__link:hover .catcard__media img,
  .prodcard:hover .prodcard__media img { transform: none; }
}

@media print {
  .header, .announce, .stickywa, .mobilemenu, .mega, .searchpanel { display: none !important; }
  body { color: #000; }
}

/* ============================================ 20. HERO ENTRANCE ORCHESTRATION
   .hero-anim is added by script.js only when motion is allowed, so the hero
   is never hidden for no-JS or reduced-motion visitors. */
.hero-anim .hero__eyebrow,
.hero-anim .hero__title,
.hero-anim .hero__lede,
.hero-anim .hero__actions,
.hero-anim .hero__trust,
.hero-anim .hero__figure img,
.hero-anim .hero__caption {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.hero-anim .hero__figure img { transform: translateY(0) scale(1.015); }

.hero-anim.is-loaded .hero__eyebrow,
.hero-anim.is-loaded .hero__title,
.hero-anim.is-loaded .hero__lede,
.hero-anim.is-loaded .hero__actions,
.hero-anim.is-loaded .hero__trust,
.hero-anim.is-loaded .hero__figure img,
.hero-anim.is-loaded .hero__caption {
  opacity: 1;
  transform: none;
}
/* The image lands first, then the copy assembles beneath the joinery lines. */
.hero-anim .hero__figure img { transition-delay: 60ms; }
.hero-anim .hero__eyebrow   { transition-delay: 160ms; }
.hero-anim .hero__title     { transition-delay: 220ms; }
.hero-anim .hero__lede      { transition-delay: 300ms; }
.hero-anim .hero__actions   { transition-delay: 370ms; }
.hero-anim .hero__trust     { transition-delay: 430ms; }
.hero-anim .hero__caption   { transition-delay: 430ms; }

/* ================================== 21. ANNOUNCEMENT ROTATION (MOBILE ONLY)
   Applied by script.js below 768px. Five seconds per message, so each one is
   comfortably readable; hovering or focusing the bar pauses it. */
.announce.is-rotating .announce__list {
  display: block;
  position: relative;
  text-align: center;
}
.announce.is-rotating .announce__item {
  display: none;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.announce.is-rotating .announce__item.is-active { display: block; opacity: 1; }
.announce.is-rotating .announce__item + .announce__item::before { content: none; }


/* ============================================================ 22. PRODUCT PAGE
   Gallery, specification and inquiry. Same tokens, same joinery language.
   ========================================================================== */
.product { padding-block: clamp(2rem, 1.2rem + 3vw, 4rem) var(--sec-y); }
.product__grid { display: grid; gap: clamp(2rem, 4vw, 4rem); align-items: start; }

.product__stage { position: relative; overflow: hidden; background: var(--cream); }
.product__stage-link { display: block; cursor: zoom-in; }
.product__stage-img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.product__zoomhint {
  position: absolute; left: 0.9rem; bottom: 0.9rem;
  padding: 0.4rem 0.7rem;
  background: rgba(33, 27, 24, 0.72); color: var(--cream);
  pointer-events: none;
}

.product__thumbs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem; margin-top: 0.6rem;
}
.product__thumb-link {
  display: block; position: relative;
  border: 1px solid var(--border);
  transition: border-color var(--t-fast) var(--ease);
}
.product__thumb-link img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.product__thumb-link:hover { border-color: var(--accent); }
/* Selection is marked by a border and a tenon, never by colour alone. */
.product__thumb-link.is-active { border-color: var(--accent-deep); }
.product__thumb-link.is-active::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 2px;
  background: var(--accent-deep);
}

.product__info { max-width: 34rem; }
.product__title {
  font-size: var(--fs-h2); font-weight: 500; line-height: 1.06;
  letter-spacing: -0.02em; text-wrap: balance;
  margin: 0.75rem 0 0.6rem;
}
.product__code { color: var(--muted); margin-bottom: 0.9rem; }
.product__price { font-size: 1.2rem; font-weight: 600; margin-bottom: 1.4rem; }
.product__desc { color: var(--muted); margin-bottom: 1.75rem; }
.product__desc > * + * { margin-top: 0.9rem; }

.product__spec { border-top: 1px solid var(--border); margin-bottom: 1.75rem; }
.product__spec-row {
  display: grid; gap: 0.15rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}
.product__spec-row dt { color: var(--muted); }
.product__spec-row dd { margin: 0; font-size: var(--fs-small); }

.product__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.75rem; }
.btn--wide { flex: 1 1 15rem; }
.product__trust { padding-top: 1.35rem; border-top: 1px solid var(--border); }

@media (min-width: 600px) {
  .product__spec-row { grid-template-columns: 9rem minmax(0, 1fr); gap: 0.25rem 1.25rem; align-items: baseline; }
}
@media (min-width: 900px) {
  .product__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .product__stage { --jo: 16px; }
}

/* ------------------------------------------------------------ 23. LIGHTBOX */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: auto 1fr;
  background: rgba(33, 27, 24, 0.94);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.75rem var(--gutter);
}
.lightbox__count { color: var(--timber); margin: 0; }
.lightbox__btn,
.lightbox__nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  color: var(--cream);
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.lightbox__btn:hover,
.lightbox__nav:hover { color: var(--white); background: rgba(246, 240, 232, 0.14); }
.lightbox__btn:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid var(--timber); outline-offset: 2px; }

.lightbox__stage {
  display: grid; place-items: center;
  padding: 0 var(--gutter) clamp(1rem, 4vw, 3rem);
  overflow: auto;
}
.lightbox__img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  cursor: zoom-in;
  transition: transform var(--t-mid) var(--ease);
}
.lightbox__img.is-zoomed { transform: scale(2.2); cursor: zoom-out; }

.lightbox__nav { position: absolute; top: 50%; margin-top: -22px; display: none; }
.lightbox.has-nav .lightbox__nav { display: inline-flex; }
.lightbox__nav--prev { left: 0.5rem; }
.lightbox__nav--next { right: 0.5rem; }

/* ---------------------------------------------------------- 24. PAGINATION */
.fs-pagination { margin-top: clamp(2rem, 4vw, 3rem); }
.fs-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.fs-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap); min-height: var(--tap);
  padding-inline: 0.75rem;
  font-size: var(--fs-small); font-weight: 600;
  border: 1px solid var(--border);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fs-pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent-deep); }
.fs-pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: var(--white); }

/* ------------------------------------------------------------- 25. PROSE */
.fs-prose { max-width: 44rem; }
.fs-prose > * + * { margin-top: 1.1rem; }
.fs-prose h2 { font-size: var(--fs-h3); font-weight: 600; margin-top: 2rem; }
.fs-prose a { color: var(--accent-deep); border-bottom: 1px solid var(--border); }
.fs-prose a:hover { border-bottom-color: var(--accent); }
.fs-prose ul { list-style: disc; padding-left: 1.25rem; }
.fs-prose li + li { margin-top: 0.35rem; }

@media (prefers-reduced-motion: reduce) {
  .lightbox__img.is-zoomed { transform: scale(2.2); }
}

/* ==================================================== 26. SETUP NOTES (ADMIN)
   Shown only to signed-in users who can edit, where a section would otherwise
   be silently empty. Deliberately looks like scaffolding, not like the design.
   ========================================================================== */
.fs-setup-note {
  border: 1px dashed var(--accent);
  background: var(--cream);
  padding: clamp(1.1rem, 2vw, 1.6rem);
  max-width: 44rem;
}
.fs-setup-note__title {
  font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em;
  margin: 0.5rem 0 0.35rem;
}
.fs-setup-note__body { font-size: var(--fs-small); color: var(--muted); margin-bottom: 1.1rem; }
.section--heritage .fs-setup-note { background: transparent; border-color: var(--timber); }
.section--heritage .fs-setup-note__title { color: var(--white); }
.section--heritage .fs-setup-note__body { color: var(--timber); }

/* ============================================ 27. THIRD-PARTY BADGE CLEARANCE
   Google's reCAPTCHA badge is fixed bottom-right, exactly where the mobile
   inquiry button sits. Lift it clear rather than hide it — hiding the badge is
   only permitted if you add Google's attribution text instead.
   ========================================================================== */
@media (max-width: 767px) {
  .grecaptcha-badge {
    bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}