/* ===================================================================
   RidgeCraft — Shared design system (used by all Phase 1 pages
   built after the original 7. The first 7 pages have inline CSS
   that mirrors this; consolidate on Webflow build.)
   =================================================================== */

/* Fractul: the brand serif, self-hosted (client holds the web licence).
   One variable file, upright only, wght axis 50-900. Spectral and Georgia
   stay in the --serif stack as fallbacks while it loads (font-display: swap).
   Every page links this file, including the ones with inline style copies,
   so this is the one place the face is declared. */
@font-face {
  font-family: 'Fractul';
  src: url('/assets/fonts/fractul-variable.woff2') format('woff2');
  font-weight: 50 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: oklch(15% 0.01 70);
  --warm-black: oklch(18% 0.012 65);
  --lime: oklch(90.2% 0.14 121);   /* #d1ed7f — RidgeCraft brand lime, exact */
  --lime-deep: oklch(82% 0.13 121);
  --latte: oklch(74% 0.05 70);
  --latte-dark: oklch(52% 0.06 60);
  --mocha: oklch(43% 0.06 50);
  --oat: oklch(93% 0.012 75);
  --warm-gray: oklch(89% 0.008 75);
  --steel: oklch(53% 0.005 70);
  --paper: oklch(97% 0.008 75);
  --serif: 'Fractul', 'Spectral', Georgia, serif;
  --sans: 'Jost', system-ui, sans-serif;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --pad-section: clamp(64px, 8vw, 128px);
  --pad-x: clamp(20px, 5vw, 80px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --max-w: 1440px;

  /* Rebuild system (design direction, 30 Sep 2026). Fractul 900 does the
     talking, Jost does the work. Nothing set under 14px. Lime is an accent
     only: the main button on a screen, or a 2px line. Ease-out only. */
  --display: 'Fractul', 'Spectral', Georgia, serif;
  --fs-display: clamp(48px, 9.72vw + 16px, 140px);
  --fs-h2: clamp(44px, 6.4vw + 12px, 104px);
  --fs-body: clamp(17px, 0.1vw + 16.6px, 18px);
  --fs-label: 14px;
  --ink-soft: oklch(34% 0.012 65);
  --latte-ink: oklch(44% 0.05 60);
  --line: oklch(86% 0.015 75);
  --eo: cubic-bezier(0.25, 1, 0.5, 1);
  --pad-sec: clamp(72px, 10vw, 150px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--sans);
  font-weight: 300;
  overflow-x: clip;
  font-size: 18px;
  line-height: 1.75;
  color: var(--black);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding-inline: var(--pad-x); }
p { max-width: 65ch; }

.eyebrow { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--latte-dark); }
.h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(48px, 6.5vw, 84px); line-height: 1.04; letter-spacing: -0.02em; }
.h1 em { font-style: italic; font-weight: 500; color: var(--latte-dark); }
.h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3.8vw, 48px); line-height: 1.1; letter-spacing: -0.015em; }
.h2 em { font-style: italic; color: var(--latte-dark); font-weight: 500; }
.h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; }
.h4 { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1.2; }
.lede { font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.55; }
.tabular { font-variant-numeric: tabular-nums; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 18px 28px;
  border-radius: 0;
  transition: transform 320ms var(--ease-out), background-color 320ms var(--ease-out), color 320ms var(--ease-out);
  white-space: nowrap;
}
.btn-primary, .menu .btn-primary { background: var(--lime); color: var(--black); }
.btn-primary:hover { transform: translateY(-1px); background: var(--lime-deep); }
.btn-dark, .menu .btn-dark { background: var(--black); color: var(--paper); }
.btn-dark:hover { transform: translateY(-1px); }
.btn-line, .menu .btn-line { background: transparent; color: var(--black); border-bottom: 1px solid var(--black); padding: 6px 0; min-height: 44px; }
.btn-outline { background: transparent; color: var(--black); border: 1px solid var(--black); }
.btn-ghost-dark { background: transparent; color: var(--paper); border: 1px solid oklch(100% 0 0 / 0.25); }
.btn-ghost-dark:hover { border-color: var(--lime); color: var(--lime); }
.btn-bare { border-color: transparent; padding-inline: var(--s-2); }

.lime-mark { width: 32px; height: 2px; background: var(--lime); margin-bottom: var(--s-5); }

/* === A11y: skip-link & focus indicators === */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--s-3);
  z-index: 100;
  background: var(--black);
  color: var(--paper);
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 2px solid var(--lime);
}
.skip-link:focus {
  left: var(--s-3);
  outline: 0;
}
:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
  border-radius: 1px;
}
/* Form fields keep their underline-color focus, but give them a real ring too */
.ef-field input:focus-visible, .ef-field select:focus-visible, .ef-field textarea:focus-visible,
.fb-field input:focus-visible, .fb-field textarea:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* === NAV === */
.nav { position: sticky; top: 0; z-index: 50; background: oklch(97% 0.008 75 / 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--warm-gray); }
.nav-inner { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-7); }
.brand { font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--black); }
.brand .lime-ink { color: var(--lime-deep); }
.menu { display: flex; gap: var(--s-7); align-items: center; list-style: none; }
.menu > li > a:not(.btn), .menu > li > button { font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--black); padding-block: 8px; }
.menu > li > a.active { color: var(--latte-dark); }
.menu > li > a:not(.btn):hover, .menu > li > button:hover { color: var(--latte-dark); }
.menu .has-drop { display: flex; align-items: center; gap: 6px; }
.menu .has-drop::after { content: ''; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform 240ms var(--ease-out); }
.menu .has-drop[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-2px); }
.menu-cta { padding: 12px 22px; font-size: 14px; }

.dropdown { position: absolute; left: 0; right: 0; top: 76px; background: var(--paper); border-bottom: 1px solid var(--warm-gray); border-top: 1px solid var(--warm-gray); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 280ms var(--ease-out), transform 280ms var(--ease-out); }
.dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.dropdown-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--warm-gray); }
.drop-card { background: var(--paper); padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-3); transition: background 240ms var(--ease-out); }
.drop-card:hover { background: var(--oat); }
.drop-card.featured { background: var(--oat); }
.drop-card .num { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--latte-dark); }
.drop-card .name { font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--black); }
.drop-card .meta { display: flex; gap: var(--s-4); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--latte-dark); }
.drop-card .desc { font-size: 14px; line-height: 1.6; color: var(--steel); max-width: 38ch; }
.drop-card .arrow { margin-top: auto; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--black); display: inline-flex; gap: 8px; transition: color 240ms var(--ease-out); }
.drop-card .arrow > span { display: inline-block; transition: transform 320ms var(--ease-out); }
.drop-card:hover .arrow > span { transform: translateX(5px); }

/* === Tiered dropdown (Signature -> Semi-Custom -> Custom Elite) ===
   DIY left the dropdown in Oct 2026; its page stays live and the Signature
   catalog links to it. The .diy rules below are kept for that card's return.
   Selectors are by tier name, not by position. The previous version keyed off
   :nth-child, so inserting Semi-Custom as the second card silently handed
   Signature the Custom Elite vitrine treatment. Names do not renumber. */
.nav .dropdown-inner { grid-template-columns: repeat(3, 1fr); }

/* i. DIY — entry point: paper, lighter weight */
.nav .dropdown-inner > .drop-card.diy { background: var(--paper); padding: var(--s-7) var(--s-7) var(--s-6); }
.nav .dropdown-inner > .drop-card.diy:hover { background: var(--oat); }
.nav .dropdown-inner > .drop-card.diy .name { font-size: 22px; }
.nav .dropdown-inner > .drop-card.diy .arrow { color: var(--steel); }
.nav .dropdown-inner > .drop-card.diy:hover .arrow { color: var(--black); }

/* ii. Semi-Custom — the feature: warm oat, lime edge, lime tip on hover.
   The accent is an edge and a flag, never a flood. */
.nav .dropdown-inner > .drop-card.semi { background: var(--oat); padding: var(--s-7); position: relative; }
.nav .dropdown-inner > .drop-card.semi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lime);
}
.nav .dropdown-inner > .drop-card.semi:hover { background: oklch(91% 0.014 75); }
.nav .dropdown-inner > .drop-card.semi .name { font-size: 26px; }
.nav .dropdown-inner > .drop-card.semi:hover .arrow { color: var(--lime-deep); }

/* iii. Signature — the catalog: paper, same weight as DIY */
.nav .dropdown-inner > .drop-card.signature { background: var(--paper); padding: var(--s-7); }
.nav .dropdown-inner > .drop-card.signature:hover { background: var(--oat); }
.nav .dropdown-inner > .drop-card.signature .name { font-size: 22px; }
.nav .dropdown-inner > .drop-card.signature .arrow { color: var(--steel); }
.nav .dropdown-inner > .drop-card.signature:hover .arrow { color: var(--black); }

/* iv. Custom Elite — vitrine register: warm-black, champagne hairlines, paper text */
.nav .dropdown-inner > .drop-card.elite {
  background: var(--warm-black);
  color: var(--paper);
  padding: var(--s-7);
  position: relative;
  box-shadow: inset 0 1px 0 oklch(85% 0.025 80 / 0.65);
  transition: background 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.nav .dropdown-inner > .drop-card.elite:hover {
  background: oklch(22% 0.014 65);
  box-shadow: inset 0 1px 0 oklch(85% 0.025 80);
}
.nav .dropdown-inner > .drop-card.elite .num { color: oklch(85% 0.025 80); }
.nav .dropdown-inner > .drop-card.elite .name { color: var(--paper); font-size: 24px; font-style: italic; font-weight: 500; }
.nav .dropdown-inner > .drop-card.elite .meta { color: oklch(85% 0.025 80); }
.nav .dropdown-inner > .drop-card.elite .desc { color: oklch(100% 0 0 / 0.62); }
.nav .dropdown-inner > .drop-card.elite .arrow { color: oklch(85% 0.025 80); }
.nav .dropdown-inner > .drop-card.elite:hover .arrow { color: var(--paper); }

.nav .dropdown-inner > .drop-card .desc { max-width: 36ch; font-size: 14px; }

/* === Shop dropdown: two plain links, a compact panel under its own button.
   shared.js sets its left edge when it opens. === */
.nav .dropdown.drop-compact { left: 16px; right: auto; width: 440px; max-width: calc(100vw - 32px); border: 1px solid var(--warm-gray); }
.nav .drop-compact .dropdown-inner { grid-template-columns: 1fr; }
.drop-link { display: flex; flex-direction: column; gap: 4px; padding: var(--s-5) var(--s-6); min-height: 44px; background: var(--paper); color: var(--black); transition: background 240ms var(--ease-out); }
.drop-link:hover, .drop-link:focus-visible { background: var(--oat); }
.drop-link .name { font-family: var(--display, var(--serif)); font-weight: 800; font-size: 20px; line-height: 1.2; }
.drop-link .name::after { content: ' →'; font-family: var(--sans); font-weight: 400; color: var(--latte-dark); }
.drop-link .desc { font-size: 15px; line-height: 1.5; color: var(--steel); }

/* === MOBILE BURGER + DRAWER === */
.nav-burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  margin-left: auto;
  position: relative;
}
.nav-burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--black);
  transition: transform 320ms var(--ease-out), opacity 240ms var(--ease-out);
  transform-origin: center;
}
.nav-burger.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-burger.is-open span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--ease-out);
  overflow-y: auto;
}
.mobile-drawer[hidden] { display: none; }
.mobile-drawer.open { opacity: 1; pointer-events: auto; }
.mobile-drawer-inner {
  padding: 96px var(--pad-x) var(--s-7);
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
/* The drawer paints over the burger, so the X lives in the drawer itself,
   in the same spot the burger was: top right, inside the page gutter. */
.mobile-close {
  position: absolute;
  top: 16px;
  right: var(--pad-x);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--black);
  cursor: pointer;
}
.mobile-drawer-inner { position: relative; }
.mobile-menu { list-style: none; padding: 0; margin: 0; }
.mobile-menu li { margin-bottom: var(--s-2); }
.mobile-section { padding: var(--s-3) 0; border-bottom: 1px solid var(--warm-gray); display: flex; flex-direction: column; gap: 6px; }
.mobile-section-key { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--latte-dark); }
.mobile-link {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--black);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--s-3) 0;
  min-height: 44px;
  line-height: 1.25;
}
.mobile-section .mobile-link { padding-top: 0; padding-bottom: var(--s-3); }
.mobile-meta {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--latte-dark);
}
.mobile-rule { height: 1px; background: var(--warm-gray); margin: var(--s-5) 0; }
.mobile-cta {
  margin-top: var(--s-5);
  padding: 18px 28px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}
.mobile-foot {
  margin-top: auto;
  padding-top: var(--s-7);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--latte-dark);
}

@media (max-width: 880px) {
  .menu > li:not(.menu-cta-li) { display: none; }
  .menu-cta-li { display: none; }
  .dropdown { display: none; }
  .nav-burger { display: inline-flex; }
}

/* === BREADCRUMBS === */
.crumbs { padding: var(--s-5) 0; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--steel); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a:hover { color: var(--black); }
.crumbs .sep { padding: 0 var(--s-3); color: var(--warm-gray); }

/* === FOOTER === */
.foot { background: var(--warm-black); color: oklch(100% 0 0 / 0.65); padding: var(--s-9) 0 var(--s-5); }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s-7); margin-bottom: var(--s-8); }
.foot-brand { font-family: var(--serif); font-weight: 600; font-size: 22px; color: var(--paper); margin-bottom: var(--s-3); }
.foot-brand .lime-ink { color: var(--lime); }
.foot-tag { font-family: var(--serif); font-style: italic; font-size: 14px; color: oklch(100% 0 0 / 0.62); margin-bottom: var(--s-4); }
.foot-contact { font-size: 14px; line-height: 1.85; color: oklch(100% 0 0 / 0.62); }
.foot-col h2 { font-family: var(--sans); font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--lime); font-weight: 600; margin-bottom: var(--s-4); }
.foot-col ul { list-style: none; }
.foot-col li { margin-bottom: 0; }
.foot-col a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: oklch(100% 0 0 / 0.6); transition: color 200ms var(--ease-out); }
.foot-col a:hover { color: var(--paper); }
.foot-bottom { border-top: 1px solid oklch(100% 0 0 / 0.08); padding-top: var(--s-5); display: flex; justify-content: space-between; font-size: 14px; color: oklch(100% 0 0 / 0.55); }
.foot-bottom em { font-family: var(--serif); }
@media (max-width: 880px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* === PRODUCT PAGE — gallery, config, editorial, materials === */
.product { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; min-height: calc(100vh - 76px - 56px); }
.gallery { background: var(--mocha); position: sticky; top: 76px; height: calc(100vh - 76px); display: flex; flex-direction: column; }
.gallery-main { flex: 1; position: relative; overflow: hidden; }
.gallery-main::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, transparent 30%, oklch(0% 0 0 / 0.2)); }
.gallery-tag { position: absolute; top: var(--s-6); left: var(--s-6); background: var(--paper); padding: 14px 20px; display: flex; align-items: center; gap: var(--s-3); }
.gallery-tag-dot { width: 8px; height: 8px; background: var(--lime); border-radius: 50%; }
.gallery-tag-text { font-family: var(--serif); font-weight: 600; font-size: 14px; }
.gallery-tag-text small { display: block; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--latte-dark); margin-bottom: 2px; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: oklch(100% 0 0 / 0.1); }
.thumb { aspect-ratio: 1.4; cursor: pointer; transition: opacity 0.25s var(--ease-out); opacity: 0.55; }
.thumb.active, .thumb:hover { opacity: 1; }

.info { padding: var(--s-9) var(--pad-x); }
.info .eyebrow { margin-bottom: var(--s-3); display: block; }
.info .h1 { margin-bottom: var(--s-4); }
.info .tagline { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--steel); line-height: 1.5; margin-bottom: var(--s-7); max-width: 42ch; }
.info-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: var(--s-7); border-top: 1px solid var(--warm-gray); border-bottom: 1px solid var(--warm-gray); }
.info-meta-item { padding: var(--s-4) 0; padding-right: var(--s-4); border-right: 1px solid var(--warm-gray); }
.info-meta-item:nth-child(2) { padding-left: var(--s-4); }
.info-meta-item:last-child { border-right: 0; padding-left: var(--s-4); padding-right: 0; }
.meta-key { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel); margin-bottom: 4px; }
.meta-val { font-family: var(--serif); font-weight: 600; font-size: 16px; }

.config { background: var(--paper); padding: var(--s-7); border: 1px solid var(--warm-gray); margin-bottom: var(--s-6); }
.config-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-5) 0; border-bottom: 1px solid var(--warm-gray); }
.config-row:last-of-type { border-bottom: 0; }
.config-label { font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; }
.config-help { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--steel); margin-top: 4px; }
.select { position: relative; min-width: 220px; }
.select select { width: 100%; font-family: var(--sans); font-size: 14px; font-weight: 500; padding: 14px 42px 14px 18px; background: var(--paper); border: 1px solid var(--warm-gray); border-radius: 0; color: var(--black); appearance: none; cursor: pointer; transition: border-color 200ms var(--ease-out); }
.select select:hover, .select select:focus:not(:focus-visible) { border-color: var(--black); }
.select::after { content: ''; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; border-right: 1px solid var(--latte-dark); border-bottom: 1px solid var(--latte-dark); rotate: 45deg; pointer-events: none; }

.total { display: flex; align-items: baseline; justify-content: space-between; padding: var(--s-6) 0; border-top: 2px solid var(--black); margin-bottom: var(--s-5); }
.total-label { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--steel); font-weight: 500; }
.total-amount { font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.cta-wrap { display: flex; flex-direction: column; gap: var(--s-3); }
.cta-fineprint { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--latte-dark); text-align: center; margin-top: 8px; }

.value-math { background: var(--oat); padding: var(--s-5) var(--s-6); margin-top: var(--s-5); display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.vm-item { padding-right: var(--s-5); border-right: 1px solid var(--warm-gray); }
.vm-item:last-child { border-right: 0; padding-right: 0; padding-left: var(--s-5); }
.vm-item:nth-child(2) { padding-left: var(--s-5); }
.vm-label { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--latte-dark); font-weight: 600; margin-bottom: 4px; }
.vm-value { font-family: var(--serif); font-weight: 600; font-size: 18px; line-height: 1.2; }
.vm-value em { font-style: italic; color: var(--latte-dark); font-weight: 500; }

/* Editorial section */
.editorial { background: var(--oat); padding: var(--pad-section) 0; }
.editorial-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-9); align-items: start; }
.editorial-h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.15; position: sticky; top: 100px; max-width: 12ch; }
.editorial-h2 em { font-style: italic; color: var(--latte-dark); font-weight: 500; }
.editorial-body p { font-size: 17px; line-height: 1.85; margin-bottom: var(--s-4); color: var(--black); max-width: 60ch; }
.editorial-body p:first-child::first-letter { font-family: var(--serif); font-size: 64px; font-weight: 600; float: left; line-height: 0.92; margin: 8px 14px 0 0; color: var(--latte-dark); }
.spec-list { margin-top: var(--s-7); border-top: 1px solid var(--warm-gray); }
.spec-row { display: grid; grid-template-columns: 200px 1fr; gap: var(--s-7); padding: var(--s-4) 0; border-bottom: 1px solid var(--warm-gray); }
.spec-key { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--latte-dark); font-weight: 600; padding-top: 4px; }
.spec-val { font-size: 15px; line-height: 1.7; }

/* Materials compare */
.materials { background: var(--black); color: var(--paper); padding: var(--pad-section) 0; }
.materials-head { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--s-8); align-items: end; margin-bottom: var(--s-7); }
.materials-eyebrow { color: var(--lime); }
.materials h2 { color: var(--paper); margin-top: var(--s-3); }
.materials h2 em { color: var(--lime); }
.materials p.lede { color: oklch(100% 0 0 / 0.6); }
.mat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: oklch(100% 0 0 / 0.1); }
.mat-col { padding: var(--s-7); background: var(--black); }
.mat-col.them { color: oklch(100% 0 0 / 0.5); }
.mat-tag { font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 500; margin-bottom: var(--s-4); color: oklch(100% 0 0 / 0.4); }
.mat-col.us .mat-tag { color: var(--lime); }
.mat-col h3 { color: var(--paper); margin-bottom: var(--s-5); }
.mat-list { list-style: none; }
.mat-list li { padding: var(--s-3) 0; border-bottom: 1px solid oklch(100% 0 0 / 0.08); display: grid; grid-template-columns: 130px 1fr; gap: var(--s-4); font-size: 14px; }
.mat-list li:last-child { border-bottom: 0; }
.mat-list li > span:first-child { font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; padding-top: 3px; color: oklch(100% 0 0 / 0.4); }
.mat-col.us .mat-list li > span:first-child { color: var(--lime); }
.mat-list li > span:last-child { font-family: var(--serif); }

/* Beyond Signature doorway */
.beyond { background: var(--paper); padding: var(--s-9) 0; border-top: 1px solid var(--warm-gray); border-bottom: 1px solid var(--warm-gray); }
.beyond-inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--s-9); align-items: center; }
.beyond h2 em { color: var(--latte-dark); }
.beyond p { color: var(--steel); margin-top: var(--s-3); max-width: 50ch; }
.beyond-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* Siblings */
.siblings { background: var(--paper); padding: var(--pad-section) 0; }
.siblings-head { margin-bottom: var(--s-7); display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: var(--s-5); }
.siblings-head h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); }
.siblings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 1px; background: var(--warm-gray); }
.sib-card { background: var(--paper); transition: background 280ms var(--ease-out); }
.sib-card:hover { background: var(--oat); }
.sib-photo { aspect-ratio: 5 / 4; }
.sib-info { padding: var(--s-5); }
.sib-num { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--latte-dark); margin-bottom: 4px; }
.sib-name { font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.15; margin-bottom: var(--s-2); }
.sib-meta { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--steel); }

@media (max-width: 880px) {
  .product { grid-template-columns: 1fr; }
  .gallery { position: static; height: auto; min-height: 420px; }
  .info { padding: var(--s-7) var(--pad-x); }
  .config-row { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .select { width: 100%; }
  .editorial-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .editorial-h2 { position: static; max-width: none; }
  .spec-row { grid-template-columns: 1fr; gap: 4px; }
  .editorial-body p:first-child::first-letter { font-size: 48px; }
  .materials-head { grid-template-columns: 1fr; gap: var(--s-3); }
  .mat-grid { grid-template-columns: 1fr; }
  .mat-col { min-width: 0; padding: var(--s-5); }
  .mat-list li { grid-template-columns: 1fr; gap: 4px; }
  .beyond-inner { grid-template-columns: 1fr; gap: var(--s-5); }
  .value-math { grid-template-columns: 1fr; }
  .vm-item { padding: 8px 0 !important; border-right: 0; border-bottom: 1px solid var(--warm-gray); }
  .vm-item:last-child { border-bottom: 0; }
}

/* === Image / video utilities for elevated pages === */
.aspect-21-9 { aspect-ratio: 21 / 9; }
.aspect-4-5 { aspect-ratio: 4 / 5; }
.aspect-3-2 { aspect-ratio: 3 / 2; }
.aspect-1-1 { aspect-ratio: 1 / 1; }

.editorial-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms var(--ease-out); }
.editorial-frame { position: relative; overflow: hidden; background: var(--mocha); }
.editorial-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, oklch(0% 0 0 / 0.35)); pointer-events: none; }

/* SVG-grain overlay you can layer over any solid block */
.grain { position: absolute; inset: 0; opacity: 0.06; mix-blend-mode: multiply; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Editorial caption (small label that sits beside or under photos) */
.cap { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--latte-dark); display: inline-flex; align-items: center; gap: var(--s-2); }
.cap::before { content: ''; width: 8px; height: 1px; background: var(--lime); display: inline-block; }

/* Pull-quote block — editorial moment */
.pullquote { padding: var(--pad-section) 0; background: var(--paper); }
.pullquote-inner { max-width: 920px; margin: 0 auto; text-align: center; }
.pullquote blockquote { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(28px, 4vw, 56px); line-height: 1.18; letter-spacing: -0.01em; color: var(--black); }
.pullquote blockquote em { color: var(--latte-dark); font-style: italic; font-weight: 500; }
.pullquote .attribution { margin-top: var(--s-7); font-size: 14px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--latte-dark); }

/* === FADE === */
[data-fade] { opacity: 0; transform: translateY(20px); transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
[data-fade].in { opacity: 1; transform: none; }
/* Decelerating stagger. The gap between siblings narrows as the group lands,
   so a row reads as one gesture instead of a metronome. */
[data-fade="2"] { transition-delay: 110ms; }
[data-fade="3"] { transition-delay: 200ms; }
[data-fade="4"] { transition-delay: 272ms; }
[data-fade="5"] { transition-delay: 330ms; }
[data-fade="6"] { transition-delay: 376ms; }
@media (prefers-reduced-motion: reduce) {
  [data-fade] { opacity: 1; transform: none; transition: none; transition-delay: 0s; }
}

/* Configurator price pulse — feedback when total updates */
@keyframes pricepulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.total-amount.pulse { animation: pricepulse 380ms cubic-bezier(0.22, 1, 0.36, 1); }

/* Editorial select styling — refined dropdown for product configurators */
.config .select select, .info .select select {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--warm-gray);
  padding: 14px 36px 14px 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--black);
  cursor: pointer;
  transition: border-bottom-color 240ms cubic-bezier(0.22, 1, 0.36, 1), padding-bottom 240ms cubic-bezier(0.22, 1, 0.36, 1);
  width: 100%;
}
.config .select select:hover, .info .select select:hover { border-bottom-color: var(--latte-dark); }
.config .select select:focus-visible, .info .select select:focus-visible { border-bottom-color: var(--lime); outline: 0; }

/* Inquiry form states — sending, failed, sent. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 10px 0 0; font-size: 14px; line-height: 1.45; flex-basis: 100%; }
.form-status:empty { display: none; }
.form-status.is-error { color: #a3241c; }
.form-status.is-success { color: #2f6b3a; }
button[type="submit"]:disabled { opacity: 0.6; cursor: progress; }


/* === PAGE TRANSITIONS ===
   Cross-document View Transitions. One metaphor site-wide: the page crossfades
   into the next instead of hard-cutting. Chromium honours it; every other
   browser ignores the at-rule and navigates the way it always did. */
@view-transition { navigation: auto; }

/* === REDUCED MOTION ===
   One place that turns the motion layer off. Everything added here animates
   only transform and opacity, so switching it off costs the layout nothing. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  ::view-transition-group(*),
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
  .drop-card .arrow > span,
  .ind-photo img,
  .editorial-img,
  .thumb { transition: none !important; }
}


/* === STICKY MOBILE CTA === */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  gap: 1px;
  background: oklch(100% 0 0 / 0.14);
  transform: translateY(100%);
  transition: transform 320ms var(--ease-out);
  padding-bottom: env(safe-area-inset-bottom);
}
.sticky-cta.in { transform: translateY(0); }
.sticky-cta a {
  min-height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
}
.sticky-cta-go { flex: 1 1 auto; background: var(--lime); color: var(--black); }
.sticky-cta-tel { flex: 0 0 34%; background: var(--black); color: var(--paper); }
@media (max-width: 700px) {
  /* position lives in here too: the bar is a phone-only component, and a
     checker reading the stylesheet should be able to see that. */
  .sticky-cta { display: flex; position: fixed; }
  body { padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticky-cta { transition: none; }
}

/* Checkout error, shown under a Buy button when /api/checkout refuses.
   Hidden until site/checkout.js has something to say. */
.checkout-error {
  margin-top: var(--s-3);
  font-size: 14px;
  line-height: 1.5;
  color: var(--mocha);
  max-width: 44ch;
}
.checkout-error[hidden] { display: none; }

/* L2 front: decide from the first screen, details stay below. */
.read-first { padding: var(--s-6) 0 var(--s-8); }
.read-count { font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--latte-dark); margin: 0 0 12px; }
.read-offer { font-family: var(--serif); font-weight: 600; font-size: clamp(26px, 3vw, 34px); line-height: 1.2; margin: 0 0 12px; max-width: 22ch; }
.read-cost { font-size: 18px; line-height: 1.6; margin: 0 0 20px; max-width: 40ch; }
.read-card { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; margin: 0 0 20px; }
.read-card div { background: var(--oat); padding: 16px 18px; }
.read-card .read-label { display: block; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--latte-dark); margin: 0 0 8px; }
.read-card .read-value { display: block; font-size: 18px; line-height: 1.45; font-weight: 400; }
.read-index { list-style: none; margin: 28px 0 0; padding: 0; max-width: 40em; }
.read-index li { border-top: 1px solid var(--warm-gray); }
.read-index a { display: flex; align-items: center; min-height: 48px; padding: 8px 0; color: inherit; text-decoration: none; font-size: 18px; }
.read-index a:hover { color: var(--latte-dark); }
@media (max-width: 700px) { .read-card { grid-template-columns: 1fr; } }
.btn[aria-busy="true"] { opacity: 0.68; cursor: progress; }

/* The iOS 16px form-zoom floor is NOT here. Several pages carry an inline
   <style> that mirrors this file and wins on source order, so the rule lives in
   site/_partials/head-tail.html, which the build injects last into every head. */

/* Short scannable lists in place of prose paragraphs. Inherits text color so it
   works on light and dark bands; the marker is a short latte rule, not a dot. */
.tight-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; max-width: 60ch; }
.tight-list li { font-size: max(1em, 16px); position: relative; padding-left: 22px; margin-bottom: var(--s-3); line-height: 1.55; }
.tight-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 12px; height: 1px; background: var(--latte-dark); }
.tight-list li:last-child { margin-bottom: 0; }
.tight-list strong { font-weight: 500; }
.tight-list + p { margin-top: var(--s-5); }

/* ===================================================================
   Rebuild components (design direction, 30 Sep 2026).
   Born on the home page in rebuild 1; shared here so every rebuilt page
   (home, about, portfolio, start, pricing, shop) speaks the same way.
   A rebuilt page puts class="rb" on <body>. Motion hooks are driven by
   /rc-motion.js; with JS off or reduced motion the page is complete and still.
   =================================================================== */

/* Jost, self-hosted: one variable file, so a rebuilt page makes no
   third-party request before it can paint. Declared after any Google Fonts
   link on older pages, so it wins there too. */
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

body.rb { font-size: var(--fs-body); font-weight: 400; line-height: 1.55; }

.eye { font-family: var(--sans); font-weight: 500; font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase; color: var(--latte-ink); margin: 0; max-width: none; }
.h-page { font-family: var(--display); font-weight: 900; font-size: var(--fs-display); line-height: .9; letter-spacing: -.03em; margin: 14px 0 0; text-wrap: balance; }
.h-sec { font-family: var(--display); font-weight: 900; font-size: var(--fs-h2); line-height: .92; letter-spacing: -.03em; margin: 12px 0 0; text-wrap: balance; }
.h-sub { font-family: var(--display); font-weight: 900; font-size: clamp(28px, 1.6vw + 20px, 44px); line-height: 1; letter-spacing: -.02em; margin: 0; }
.ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln > span { display: block; }
.sec { padding: var(--pad-sec) 0; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 48px; margin-bottom: clamp(28px, 4vw, 56px); }
.sec-side { margin: 0 0 .5em; color: var(--ink-soft); max-width: 22em; }
.page-top { padding: clamp(40px, 7vw, 112px) 0 clamp(32px, 5vw, 72px); }
.page-top .lead { margin: clamp(18px, 2vw, 28px) 0 0; color: var(--ink-soft); max-width: 34em; font-size: clamp(18px, .4vw + 16px, 21px); }
.link-x { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; font-size: 17px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .35em; transition: text-underline-offset .4s var(--eo); }
.link-x:hover { text-underline-offset: .5em; }

.bx { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 8px 24px; font-family: var(--sans); font-weight: 600; font-size: 17px; line-height: 1.2; letter-spacing: 0; text-transform: none; border: 1.5px solid currentColor; white-space: nowrap; transition: transform .5s var(--eo), background-color .4s var(--eo), color .4s var(--eo), border-color .4s var(--eo); }
.bx:active { transform: scale(.97); }
.bx-lime { background: var(--lime); border-color: var(--lime); color: var(--black); padding-right: 10px; }
.bx-lime .ic { display: grid; place-items: center; width: 36px; height: 36px; background: var(--black); color: var(--lime); transition: transform .6s var(--eo); }
.bx-lime:hover .ic { transform: translateX(3px); }
.bx-ghost { color: var(--paper); border-color: oklch(100% 0 0 / .7); }
.bx-ghost:hover { background: var(--paper); color: var(--black); border-color: var(--paper); }
.bx-line { color: var(--black); border-color: var(--black); }
.bx-line:hover { background: var(--black); color: var(--paper); }
.bx-text { border-color: transparent; color: var(--paper); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .35em; padding-inline: 12px; }
.bx-text:hover { text-underline-offset: .5em; }
.bx[aria-busy="true"] { opacity: .68; cursor: progress; }

/* Four ways to buy: the price is the biggest thing on each card. */
.ways { background: var(--black); color: var(--paper); }
.ways .eye { color: var(--latte); }
.ways-grid { display: grid; grid-template-columns: 1fr; gap: clamp(12px, 1.4vw, 20px); }
@media (min-width: 761px) { .ways-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .way:nth-child(1) { grid-column: 1 / 6; } .way:nth-child(2) { grid-column: 6 / 13; }
  .way:nth-child(3) { grid-column: 1 / 8; } .way:nth-child(4) { grid-column: 8 / 13; } }
.way { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 20px; min-height: clamp(260px, 26vw, 380px); padding: clamp(22px, 2.6vw, 40px); background: oklch(21% .01 65); border: 1px solid oklch(100% 0 0 / .1); color: inherit; transition: background-color .5s var(--eo), border-color .5s var(--eo); }
.way:hover { background: oklch(25% .012 65); border-color: oklch(100% 0 0 / .22); }
.way.feat::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px; background: var(--lime); }
.way-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.way-name { font-family: var(--display); font-weight: 900; font-size: clamp(26px, 1.2vw + 20px, 36px); line-height: 1; letter-spacing: -.015em; margin: 0; }
.way-lead { font-weight: 500; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: oklch(84% .015 75); }
.way-price { align-self: end; font-family: var(--display); font-weight: 900; font-size: clamp(64px, 6vw + 24px, 128px); line-height: .85; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.way-price small { display: block; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--latte); margin-bottom: 10px; line-height: 1.2; }
.way-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid oklch(100% 0 0 / .12); padding-top: 16px; }
.way-line { color: oklch(86% .015 75); margin: 0; }
.way-go { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid oklch(100% 0 0 / .3); transition: transform .6s var(--eo), background-color .4s var(--eo), color .4s var(--eo); flex: none; }
.way:hover .way-go { transform: translateX(4px); background: var(--paper); color: var(--black); }
.ways .link-x { color: var(--paper); }
@media (max-width: 760px) { .way { min-height: 0; } }

/* Product cards: photo first, price big. Shop, plus the kits row on home. */
.sh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) clamp(12px, 1.6vw, 24px); }
.sh-card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; gap: 14px 16px; align-items: start; color: inherit; }
.sh-card.big { grid-column: span 2; grid-row: span 2; }
.sh-ph { grid-column: 1 / -1; display: block; background: var(--oat); aspect-ratio: 4 / 5; overflow: hidden; padding: clamp(12px, 1.6vw, 24px); }
.sh-card.big .sh-ph { aspect-ratio: auto; height: 100%; min-height: 0; padding: 0; }
.sh-ph img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 1s var(--eo); }
.sh-card.big .sh-ph img { object-fit: cover; mix-blend-mode: normal; }
.sh-card:hover .sh-ph img { transform: scale(1.03); }
.sh-cap { display: grid; gap: 4px; min-width: 0; }
.sh-name { font-family: var(--display); font-weight: 900; font-size: clamp(20px, .6vw + 17px, 26px); line-height: 1.05; letter-spacing: -.01em; }
.sh-card.big .sh-name { font-size: clamp(28px, 1.6vw + 18px, 44px); max-width: 14ch; }
.sh-sub { font-size: 16px; color: var(--ink-soft); }
.sh-price { font-family: var(--display); font-weight: 900; font-size: clamp(24px, .8vw + 20px, 34px); line-height: 1; letter-spacing: -.02em; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sh-price small { display: block; font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--latte-ink); margin-bottom: 4px; }
.sh-card.big .sh-price { font-size: clamp(48px, 3vw + 28px, 88px); }
.sh-card.big { grid-template-rows: 1fr auto; }
@media (max-width: 960px) {
  .sh-grid { grid-template-columns: 1fr 1fr; }
  .sh-card.big { grid-row: auto; }
  .sh-card.big .sh-ph { aspect-ratio: 4 / 5; height: auto; }
}
@media (max-width: 520px) {
  .sh-card:not(.big) { grid-template-columns: 1fr; }
  .sh-card:not(.big) .sh-price { text-align: left; }
}

/* Fine print folds away: one line to open it, the facts inside. */
.folds { max-width: 980px; }
.fold { border-top: 1px solid var(--line); }
.fold:last-child { border-bottom: 1px solid var(--line); }
.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 14px 0; font-family: var(--display); font-weight: 900; font-size: clamp(22px, .8vw + 18px, 30px); line-height: 1.1; letter-spacing: -.01em; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; flex: none; margin-left: auto; width: 12px; height: 12px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-4px) rotate(45deg); transition: transform .5s var(--eo); }
.fold[open] > summary::after { transform: translateY(3px) rotate(225deg); }
.fold > summary small { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--latte-ink); margin-left: auto; white-space: nowrap; }
.fold > summary small + * { margin-left: 0; }
.fold-body { padding: 4px 0 clamp(28px, 3vw, 44px); }
.fold-body > p { margin: 0 0 14px; color: var(--ink-soft); }
.fold .spec-list { margin: 0 0 14px; border-top: 1px solid var(--line); }
.fold .spec-row { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fold .spec-key { font-size: 14px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; color: var(--latte-ink); padding-top: 3px; }
.fold .spec-val { font-size: 17px; line-height: 1.55; }
.fold a:not(.bx) { text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 600px) { .fold .spec-row { grid-template-columns: 1fr; } }

/* Sideways strips: swipe, mouse-drag, arrow keys, buttons (rc-motion.js). */
.strip { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad-x); scrollbar-width: none; cursor: grab; outline-offset: -2px; }
.strip::-webkit-scrollbar { display: none; }
.strip.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.strip ul { display: flex; gap: clamp(12px, 1.4vw, 20px); list-style: none; margin: 0; padding: 0 var(--pad-x); width: max-content; }
.strip li { scroll-snap-align: start; flex: none; }
.strip img { -webkit-user-drag: none; user-select: none; }
.strip-btns { display: flex; gap: 8px; }
.strip-btns button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--black); color: var(--black); transition: background-color .4s var(--eo), color .4s var(--eo), transform .5s var(--eo); }
.strip-btns button:hover { background: var(--black); color: var(--paper); }
.strip-btns button:active { transform: scale(.94); }

/* The close: one line, one button. */
.close { background: var(--oat); }
.close-in { display: grid; gap: 28px; justify-items: start; }
.close .h-sec { max-width: 13ch; margin: 0; }
.close-note { margin: 0; color: var(--ink-soft); }

/* Scroll motion v2 (rc-motion.js adds .in). Transform, opacity and clip-path only. */
.rc-js [data-reveal] .ln > span { transform: translateY(108%) rotate(1.5deg); transform-origin: 0 100%; transition: transform 1.15s var(--eo); }
.rc-js [data-reveal] .ln + .ln > span { transition-delay: .09s; }
.rc-js [data-reveal] .ln + .ln + .ln > span { transition-delay: .18s; }
.rc-js [data-reveal].in .ln > span { transform: none; }
.rc-js [data-reveal] .eye { opacity: 0; transform: translateY(12px); transition: opacity .8s var(--eo), transform .9s var(--eo); }
.rc-js [data-reveal].in .eye { opacity: 1; transform: none; }
.rc-js [data-scale] { transform: translateY(40px) scale(.96); opacity: 0; transition: transform 1.3s var(--eo), opacity 1s var(--eo); }
.rc-js [data-scale].in { transform: none; opacity: 1; }
/* A photo frame opens from the bottom like a shop door going up, and the photo settles inside it. */
.rc-js [data-wipe] { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s var(--eo); }
.rc-js [data-wipe] img { transform: scale(1.18); transition: transform 1.6s var(--eo); }
.rc-js [data-wipe].in { clip-path: inset(0 0 0 0); }
.rc-js [data-wipe].in img { transform: none; }
.rc-js [data-fade-in] { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--eo), transform 1s var(--eo); }
.rc-js [data-fade-in].in { opacity: 1; transform: none; }
.rc-js [data-stagger] > * { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--eo), transform 1.1s var(--eo); transition-delay: calc(var(--i, 0) * 90ms); }
.rc-js [data-stagger].in > * { opacity: 1; transform: none; }
.rc-js [data-stagger].in > *:hover { transition-delay: 0s; }

/* Photos drift against the scroll. Browsers without scroll timelines keep them still. */
@supports (animation-timeline: view()) {
  [data-parallax] { overflow: hidden; }
  [data-parallax] > img, [data-parallax] > picture { display: block; animation: rc-drift linear both; animation-timeline: view(); animation-range: cover; }
}
@keyframes rc-drift { from { transform: translateY(-7%) scale(1.14); } to { transform: translateY(7%) scale(1.14); } }

/* Cards lift; photos zoom inside their frame. */
.sh-card, .tile { transition: transform .7s var(--eo); }
.way { transition: transform .7s var(--eo), background-color .5s var(--eo), border-color .5s var(--eo); }
.sh-card:hover, .tile:hover { transform: translateY(-6px); }
.way:hover { transform: translateY(-4px); }
.sh-ph img, .tile .ph img { transition: transform 1.2s var(--eo); }
.sh-card:hover .sh-ph img { transform: scale(1.05); }

/* Buttons: line and ghost buttons fill from the bottom, lime ones catch a glint,
   and every button leans a few pixels toward the pointer on desktop. */
.bx { position: relative; isolation: isolate; overflow: hidden; translate: var(--mx, 0) var(--my, 0); transition: transform .5s var(--eo), translate .6s var(--eo), background-color .4s var(--eo), color .4s var(--eo), border-color .4s var(--eo); }
.bx-line::before, .bx-ghost::before { content: ""; position: absolute; inset: -1px; z-index: -1; transform: scaleY(0); transform-origin: 50% 100%; transition: transform .55s var(--eo); }
.bx-line::before { background: var(--black); }
.bx-ghost::before { background: var(--paper); }
.bx-line:hover, .bx-ghost:hover { background: transparent; }
.bx-line:hover::before, .bx-ghost:hover::before { transform: none; }
.bx-lime::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, transparent 30%, oklch(100% 0 0 / .45) 50%, transparent 70%); transform: translateX(-120%); transition: transform .9s var(--eo); }
.bx-lime:hover::after { transform: translateX(120%); }

/* Nav: hides going down, back going up. */
.nav { transition: transform .55s var(--eo), background-color .45s var(--eo), border-color .45s var(--eo); }
.nav.nav-hide { transform: translateY(-100%); }

/* Mobile menu: links arrive one after another. */
.mobile-drawer .mobile-link { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--eo), transform .6s var(--eo); }
.mobile-drawer.open .mobile-link { opacity: 1; transform: none; }
.mobile-drawer.open .mobile-link:nth-of-type(2) { transition-delay: .05s; }
.mobile-drawer.open .mobile-link:nth-of-type(3) { transition-delay: .1s; }
.mobile-drawer.open .mobile-link:nth-of-type(n+4) { transition-delay: .15s; }

/* The footer is uncovered as the page lifts off it. Desktop only: on a phone
   the footer is taller than the screen. */
@media (min-width: 1000px) and (min-height: 720px) {
  body.rb main { position: relative; z-index: 1; background: var(--paper); }
  body.rb .foot { position: sticky; bottom: 0; z-index: 0; }
}

/* Lenis (desktop smooth scroll). */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

/* A page's own first screen rises on load, not on scroll, and waits for the
   opening to lift (html.rc-intro is set while it covers the page). Under the
   opening it sits finished, so it paints at once (that paint is what LCP
   measures); the entrance starts from the top the moment the door lifts. */
.page-top .ln > span { animation: rc-up 1.2s var(--eo) .1s both; }
.page-top .ln + .ln > span { animation-delay: .2s; }
.page-top .ln + .ln + .ln > span { animation-delay: .3s; }
.page-top .eye { animation: rc-in .9s var(--eo) 0s both; }
.page-top .lead, .page-top .top-act { animation: rc-in .9s var(--eo) .36s both; }
.page-top [data-wipe-load] { animation: rc-open 1.4s var(--eo) .2s both; }
.page-top [data-wipe-load] img { animation: rc-settle 1.8s var(--eo) .2s both; }
html.rc-intro .page-top .ln > span, html.rc-intro .page-top .eye, html.rc-intro .page-top .lead, html.rc-intro .page-top .top-act,
html.rc-intro .page-top [data-wipe-load], html.rc-intro .page-top [data-wipe-load] img { animation: none; }
@keyframes rc-up { from { transform: translateY(108%) rotate(1.5deg); } to { transform: none; } }
@keyframes rc-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rc-open { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rc-settle { from { transform: scale(1.18); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .rc-js [data-reveal] .ln > span, .rc-js [data-reveal] .eye, .rc-js [data-scale], .rc-js [data-wipe], .rc-js [data-wipe] img,
  .rc-js [data-fade-in], .rc-js [data-stagger] > * { transform: none; opacity: 1; clip-path: none; transition: none; }
  [data-parallax] > img, [data-parallax] > picture { animation: none; }
  .page-top .ln > span, .page-top .eye, .page-top .lead, .page-top .top-act, .page-top [data-wipe-load], .page-top [data-wipe-load] img { animation: none; }
  .bx, .bx .ic, .bx::before, .bx::after, .way, .way-go, .sh-card, .tile, .sh-ph img, .tile .ph img, .strip-btns button, .link-x,
  .fold > summary::after, .nav, .mobile-drawer .mobile-link { transition: none; }
  .sh-card:hover, .tile:hover, .way:hover, .sh-card:hover .sh-ph img { transform: none; }
  .bx { translate: none; }
  .nav.nav-hide { transform: none; }
  .mobile-drawer .mobile-link { opacity: 1; transform: none; }
}

/* Read by screen readers, not shown. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Labels went to 14px in rebuild 2; a long button label wraps on a phone instead of running off it. */
@media (max-width: 600px) { .btn { white-space: normal; text-align: center; max-width: 100%; } }

/* ZIP check: Sam's FreightQuote.mount() markup on /pricing and /faq */
.fq-intro { margin-top: 20px; }
.fq { max-width: 320px; }
.fq label { display: block; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--latte-ink); }
.fq input { width: 100%; min-height: 48px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 17px; }
.fq input:focus { outline: 0; border-bottom-color: var(--black); }
.fq-err:empty { display: none; }
.fq-out { margin-top: 12px; padding-left: 14px; border-left: 2px solid var(--lime); }
.fq-out[hidden] { display: none; }
.fq-zone { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.fq-price { font-family: var(--display); font-weight: 900; font-size: 32px; line-height: 1.1; }
.fq-lines { font-size: 16px; color: var(--ink-soft); }