/* ═══════════════════════════════════════════════════════════════
   SARAF EXPORTS — HOME v2
   Editorial, typographic, warm. Standalone stylesheet.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Jost:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root {
  /* ── Soft Minimal Luxury palette ── */
  --bg-primary:    #F7F4EF;   /* Warm Ivory */
  --bg-secondary:  #EDE6DC;   /* Soft Sand */
  --bg-dark:       #1A1614;   /* retained — dark hero / cities */
  --bg-deeper:     #0E0B09;
  --text-primary:  #2E2E2E;   /* Deep Graphite */
  --text-secondary:#6B6460;   /* warm mid-grey */
  --text-muted:    #B8ADA1;   /* Muted Taupe */
  --accent:        #C8A58C;   /* Dusty Clay — rules, dots, borders only */
  --accent-ink:    #8C6039;   /* Walnut — the accent when it has to be TEXT.
                                 4.98:1 on ivory; --accent itself is 2.08:1. */
  --accent-soft:   rgba(200,165,140,0.72);
  --accent-tint:   rgba(200,165,140,0.10);
  --accent-green:  #2E2E2E;   /* Deep Graphite — replaces forest green */
  --accent-light:  #D2B48C;   /* Natural Oak */
  --border:        #C8BEB5;   /* warm taupe */
  --border-soft:   rgba(46,46,46,0.08);
  --white:         #FFFFFF;

  /* ── Type ──
     Jost is a Futura revival: geometric, monoline, single-storey 'a' — the same
     construction as the SARAF lockup, so page and mark speak one voice. It sets
     smaller than Inter at the same px (shorter x-height), which the size
     corrections further down this file compensate for. */
  --f-display: 'Jost', 'Century Gothic', Futura, sans-serif;
  --f-body:    'Jost', 'Century Gothic', -apple-system, sans-serif;
  --f-mono:    'JetBrains Mono', 'Courier New', monospace;
  --f-script:  'Caveat', cursive;

  --pad-x:     clamp(20px, 4vw, 64px);
  --max-w:     1440px;

  --e-out: cubic-bezier(.22,1,.36,1);
  --e-in-out: cubic-bezier(.6,0,.4,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--f-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 17.5px;
  line-height: 1.6;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: var(--white); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ───────────────────────────────────────────
   TYPOGRAPHY PRIMITIVES
──────────────────────────────────────────── */
.serif { font-family: var(--f-display); font-weight: 300; }
.mono {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.label {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ───────────────────────────────────────────
   LOADER
──────────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--e-out), visibility 0.6s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-display);
}
/* The brand mark, not a letter S. The ring keeps the loading motion; the mark
   itself is held upright — a rotating logo reads as a glitch, not a spinner.
   The ring also needed one accented segment: a plain circle is rotationally
   symmetric, so the old version was animating with nothing visible to show it. */
.loader-mark {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
}
.loader-mark::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: loaderSpin 2s linear infinite;
}
.loader-mark span {
  display: block;
  width: calc(24px * 0.625);   /* mark aspect ratio, 165 × 264 */
  height: 24px;
  background-color: var(--text-primary);
  -webkit-mask: url('../assets/logo-mark.png') no-repeat center / contain;
          mask: url('../assets/logo-mark.png') no-repeat center / contain;
}
@keyframes loaderSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .loader-mark::before { animation: none; border-top-color: var(--border); }
}
.loader-text {
  font-size: 22px;
  font-weight: 300;
  letter-spacing: 0.08em;
  overflow: hidden;
}
.loader-text span { display: inline-block; animation: loaderType 1.4s var(--e-out) both; }
/* SARAF · EXPORT · PALACE — 19 spans. The interval is tightened from .05s to
   .03s so the longer name still lands inside the same ~.6s envelope the
   12-letter version used; the loader dismisses at 1.1s and won't wait. */
.loader-text span:nth-child(1){animation-delay:.0s}
.loader-text span:nth-child(2){animation-delay:.03s}
.loader-text span:nth-child(3){animation-delay:.06s}
.loader-text span:nth-child(4){animation-delay:.09s}
.loader-text span:nth-child(5){animation-delay:.12s}
.loader-text span:nth-child(6){animation-delay:.18s}   /* space */
.loader-text span:nth-child(7){animation-delay:.21s}
.loader-text span:nth-child(8){animation-delay:.24s}
.loader-text span:nth-child(9){animation-delay:.27s}
.loader-text span:nth-child(10){animation-delay:.30s}
.loader-text span:nth-child(11){animation-delay:.33s}
.loader-text span:nth-child(12){animation-delay:.36s}
.loader-text span:nth-child(13){animation-delay:.42s}  /* space */
.loader-text span:nth-child(14){animation-delay:.45s}
.loader-text span:nth-child(15){animation-delay:.48s}
.loader-text span:nth-child(16){animation-delay:.51s}
.loader-text span:nth-child(17){animation-delay:.54s}
.loader-text span:nth-child(18){animation-delay:.57s}
.loader-text span:nth-child(19){animation-delay:.60s}
@keyframes loaderType {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ───────────────────────────────────────────
   SIDE RAIL (fixed left column)
──────────────────────────────────────────── */
.rail {
  position: fixed;
  left: 0; top: 0;
  width: 48px; height: 100vh;
  background: var(--bg-primary);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
  z-index: 90;
  writing-mode: vertical-rl;
}
.rail-top {
  font-family: var(--f-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3em;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: var(--text-primary);
}
.rail-center {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.rail-bottom {
  writing-mode: horizontal-tb;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--text-muted);
}
.rail-bottom .rail-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  animation: railPulse 2.2s ease-in-out infinite;
}
@keyframes railPulse { 0%,100%{opacity:1}50%{opacity:.3} }
@media (max-width: 900px) { .rail { display: none; } }

/* ───────────────────────────────────────────
   TOP BAR
──────────────────────────────────────────── */
.bar {
  position: fixed;
  top: 0; left: 48px; right: 0;
  /* Tightened from 18px so the taller brand lockup doesn't push the bar down
     with it — the logo grew, the header height barely moved. */
  padding: 13px var(--pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 80;
  mix-blend-mode: difference;
  color: #F7F4EF;
}
.bar.scrolled {
  mix-blend-mode: normal;
  background: rgba(247, 244, 239, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
@media (max-width: 900px) { .bar { left: 0; } }

/* ── Brand lockup ──
   The bar runs `mix-blend-mode: difference` until it scrolls, so the mark can't
   be a flat raster — it has to take the bar's own colour the way the wordmark
   used to. The PNG is an alpha mask (ink coverage only, no baked colour); the
   fill comes from currentColor, which inverts over the hero and turns graphite
   once .scrolled paints the ivory bar. Alpha carries the artwork's tonal step,
   so "export palace" stays lighter than SARAF in both states. */
.bar-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.bar-logo-mark {
  display: block;
  width: calc(58px * 2.7143);   /* lockup aspect ratio, 456 × 168 */
  height: 58px;
  background-color: currentColor;
  -webkit-mask: url('../assets/logo-lockup.png') no-repeat center / contain;
          mask: url('../assets/logo-lockup.png') no-repeat center / contain;
}
/* Accessible name + SEO text, kept out of the visual bar */
.bar-logo-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* No mask support: fall back to the wordmark this replaced */
@supports not ((-webkit-mask: url('')) or (mask: url(''))) {
  .bar-logo-mark { display: none; }
  .bar-logo-text {
    position: static;
    width: auto; height: auto;
    margin: 0; overflow: visible;
    clip-path: none;
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 500;
    letter-spacing: 0.06em;
  }
}
@media (max-width: 900px) {
  .bar-logo-mark {
    width: calc(42px * 2.7143);
    height: 42px;
  }
}
.bar-nav {
  display: flex;
  gap: 36px;
  list-style: none;
}
.bar-nav a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
  padding: 4px 0;
  transition: opacity 0.3s;
}
.bar-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--e-out);
}
.bar-nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.bar-cta {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 22px;
  border: 1px solid currentColor;
  border-radius: 100px;
  transition: background 0.4s, color 0.4s, border-color 0.4s;
}
/* The fill and the label must be set independently. `background: currentColor`
   resolves against the element's own colour, and the hover rules change that
   colour too — so both moved together and the label vanished into the fill. */
.bar:not(.scrolled) .bar-cta:hover {
  background: var(--bg-primary);
  border-color: var(--bg-primary);
  color: #2C2C2C;
}
.bar.scrolled .bar-cta:hover {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--bg-primary);
}

.bar-menu-btn {
  display: none;
  width: 30px; height: 22px;
  position: relative;
  background: none; border: none;
  /* A button doesn't inherit colour, so currentColor fell back to the UA black —
     which the bar's difference blend turned ivory-on-ivory. Take the bar's colour
     like every other control in here. */
  color: inherit;
  cursor: pointer;
}
.bar-menu-btn span {
  position: absolute;
  left: 0; width: 100%; height: 1.5px;
  background: currentColor;
  transition: transform 0.4s, opacity 0.4s;
}
.bar-menu-btn span:nth-child(1) { top: 0; }
.bar-menu-btn span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.bar-menu-btn span:nth-child(3) { bottom: 0; }
@media (max-width: 900px) {
  .bar-nav, .bar-cta { display: none; }
  .bar-menu-btn { display: block; }
}

/* ═══════════════════════════════════════════
   01 · HERO
═══════════════════════════════════════════════ */
/* ═══════════════════════════════════════════
   01 · HERO — Slideshow
═══════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 132px var(--pad-x) 48px;
  padding-left: calc(var(--pad-x) + 48px);
  overflow: hidden;
  background: var(--bg-deeper);
  color: var(--bg-primary);
}

/* ── The log face ──
   An <img> rather than a CSS background, so a photograph of a real cut log
   can be dropped in at assets/hero-endgrain.svg with nothing else changing;
   object-fit copes with either aspect ratio. */
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 38% 46%;
  display: block;
  animation: hero-drift 44s var(--e-in-out) infinite alternate;
}
/* Legibility scrim: heavy where the type sits, clear over the outer rings. */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(14,11,9,0.95) 0%, rgba(14,11,9,0.80) 34%,
                            rgba(14,11,9,0.44) 64%, rgba(14,11,9,0.18) 100%),
    linear-gradient(to top, rgba(14,11,9,0.80) 0%, rgba(14,11,9,0) 40%);
}
@keyframes hero-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.2%, -1%, 0); }
}

.hero-headline { position: relative; z-index: 2; max-width: 940px; }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.66);
  margin-bottom: 30px;
}
.hero-kicker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hero-title {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(52px, 9vw, 148px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--bg-primary);
  text-wrap: balance;
}
.hero-title em { font-style: italic; color: var(--accent); }

.hero-tagline {
  margin-top: 30px;
  max-width: 46ch;
  font-size: clamp(15.5px, 1.15vw, 18.5px);
  line-height: 1.8;
  color: rgba(247, 244, 239, 0.76);
  text-wrap: pretty;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }
.hero .btn-pill { border-color: rgba(247, 244, 239, 0.44); color: var(--bg-primary); }
.hero .btn-pill:hover { border-color: var(--bg-primary); }
.hero .btn-pill-filled {
  background: var(--bg-primary);
  border-color: var(--bg-primary);
  color: var(--text-primary);
}
.hero .btn-pill-filled:hover { background: var(--accent); border-color: var(--accent); color: #211812; }

/* ── Marquee strip (below hero) ──
   Readability pass: the track was --text-muted on --bg-secondary, which is
   1.78:1 — far below the 4.5:1 WCAG AA needs, and worse in practice because
   the text is small, widely tracked and moving. Four changes: darker ink
   (4.69:1), a little more size, tighter tracking, and a slower scroll.
   Hovering pauses it so a figure can actually be read. */
.hero-marquee {
  width: 100%;
  height: 46px;
  overflow: hidden;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.hero-marquee-track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  animation: marquee 64s linear infinite;
}
.hero-marquee:hover .hero-marquee-track,
.hero-marquee:focus-within .hero-marquee-track { animation-play-state: paused; }
.hero-marquee-track span { display: inline-flex; align-items: center; gap: 48px; }
.hero-marquee-track .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
@keyframes marquee { to { transform: translateX(-50%); } }

@media (max-width: 600px) {
  /* less tracking again on small screens, where the strip is busiest */
  .hero-marquee-track { font-size: 12px; letter-spacing: 0.12em; gap: 32px; }
  .hero-marquee-track span { gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-marquee-track { animation: none; }
  .hero-marquee { overflow-x: auto; }
}

/* ── Bottom bar: figures + scroll cue ──
   Static. The previous version sat at opacity:0 and was faded in by JS adding
   .revealed to .hero; with no timed reveal left, that gate would render this
   permanently invisible. */
.hero-bottom {
  position: relative;
  z-index: 2;
  margin-top: auto;
  padding-top: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.hero-meta { display: flex; flex-wrap: wrap; gap: clamp(26px, 4vw, 62px); }
.hero-meta-num {
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(26px, 2.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--bg-primary);
  font-variant-numeric: tabular-nums;
}
.hero-meta-lbl {
  margin-top: 10px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.52);
}
.hero-bottom-scroll {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(247, 244, 239, 0.52);
}
.hero-bottom-scroll-line {
  width: 62px; height: 1px;
  background: linear-gradient(to right, var(--accent), rgba(247, 244, 239, 0));
}

@media (max-width: 900px) {
  .hero { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .hero-bg img { object-position: 46% 42%; }
  .hero-scrim {
    background: linear-gradient(180deg, rgba(14,11,9,0.90) 0%, rgba(14,11,9,0.60) 46%, rgba(14,11,9,0.94) 100%);
  }
  .hero-bottom { padding-top: 46px; }
  .hero-bottom-scroll { display: none; }
}
/* Below ~360px the 52px floor pushes "begins as a log." onto a third line.
   Drop the floor just for those widths so the headline stays two lines. */
@media (max-width: 360px) {
  .hero-title { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg img { animation: none; transform: scale(1.04); }
}

/* ═══════════════════════════════════════════
   02 · MANIFESTO
═══════════════════════════════════════════════ */
.manifesto {
  padding: clamp(120px, 18vh, 200px) var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  background: var(--bg-primary);
  position: relative;
}
@media (max-width: 900px){ .manifesto { padding-left: var(--pad-x); } }

.manifesto-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 60px;
}
.manifesto-head .num { font-family: var(--f-mono); font-size: 12px; color: var(--text-secondary); letter-spacing: 0.2em; }
.manifesto-head .dash { width: 48px; height: 1px; background: var(--border); }
.manifesto-head .label-txt {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
/* ── THE GRAIN — letters fill with wood ─────────────────── */
.manifesto-quote-wrap {
  position: relative;
  max-width: 1200px;
}

/* Base typographic rules shared by both layers */
.manifesto-quote {
  font-family: var(--f-display);
  font-size: clamp(34px, 6vw, 92px);
  line-height: 1.05;
  font-weight: 300;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144;
  margin: 0;
}

/* ─ Layer 1 · Outline layer (the "draft") ───────────────── */
.mq-outline {
  position: relative;
  z-index: 1;
  color: transparent;
  -webkit-text-stroke: 0.022em var(--text-primary);
}
.mq-outline em {
  font-style: italic;
  font-weight: 400;
  color: transparent;
  -webkit-text-stroke: 0.022em var(--accent);
}
.mq-outline .struck {
  position: relative;
  color: transparent;
  -webkit-text-stroke: 0.022em var(--text-muted);
}

/* Strike-through bar — now fires AFTER grain fill completes */
.mq-outline .struck::after {
  content: '';
  position: absolute;
  top: 55%; left: -4%; right: -4%;
  height: 2px;
  background: var(--text-muted);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--e-out) 2.05s;
}
.manifesto.revealed .mq-outline .struck::after { transform: scaleX(1); }

/* ─ Layer 2 · Wood-grain fill, masked to rise ───────────── */
.mq-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  color: transparent;

  /* Pale-oak grain for the non-accent words */
  background-image:
    /* Fine horizontal grain lines */
    repeating-linear-gradient(
      0deg,
      rgba(46, 28, 12, 0.18) 0px,
      rgba(46, 28, 12, 0.18) 1px,
      transparent 1px,
      transparent 6px
    ),
    /* Wider soft banding */
    repeating-linear-gradient(
      0deg,
      rgba(76, 52, 28, 0.10) 0px,
      rgba(76, 52, 28, 0.10) 2px,
      transparent 2px,
      transparent 14px
    ),
    /* Base tonal gradient — warm oak */
    linear-gradient(
      180deg,
      #D6B486 0%,
      #BC9860 30%,
      #946C38 65%,
      #6D4D22 100%
    );
  background-repeat: repeat;
  -webkit-background-clip: text;
          background-clip: text;

  /* Rising mask — transparent at top, opaque at bottom.
     At position 0% the transparent end is within the text (nothing shows).
     At position 100% the opaque end is within the text (full fill). */
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 46%,
    rgba(0,0,0,0.28) 50%,
    rgba(0,0,0,0.78) 54%,
    #000 58%,
    #000 100%
  );
          mask-image: linear-gradient(
    180deg,
    transparent 0%,
    transparent 46%,
    rgba(0,0,0,0.28) 50%,
    rgba(0,0,0,0.78) 54%,
    #000 58%,
    #000 100%
  );
  -webkit-mask-size: 100% 300%;
          mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 0% 0%;
          mask-position: 0% 0%;
  transition:
    mask-position 1.85s cubic-bezier(0.45, 0.08, 0.35, 1) 0.2s,
    -webkit-mask-position 1.85s cubic-bezier(0.45, 0.08, 0.35, 1) 0.2s;
}
.manifesto.revealed .mq-grain {
  -webkit-mask-position: 0% 100%;
          mask-position: 0% 100%;
}

/* Accent words fill with a richer, sheesham-dark grain */
.mq-grain em {
  font-style: italic;
  font-weight: 400;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(12, 4, 2, 0.32) 0px,
      rgba(12, 4, 2, 0.32) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(30, 12, 6, 0.16) 0px,
      rgba(30, 12, 6, 0.16) 2px,
      transparent 2px,
      transparent 12px
    ),
    linear-gradient(
      180deg,
      #7A4428 0%,
      #56281A 35%,
      #311509 70%,
      #180702 100%
    );
  background-repeat: repeat;
  -webkit-background-clip: text;
          background-clip: text;
}

/* "manufacture" never fills — stays hollow, then gets struck */
.mq-grain .struck {
  background: none;
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .mq-grain {
    transition: none;
    -webkit-mask-position: 0% 100%;
            mask-position: 0% 100%;
  }
  .mq-outline .struck::after { transition: none; transition-delay: 0s; }
}
/* ── THE SIGNATURE — handwritten ink + wax seal ── */
.manifesto-sig {
  margin-top: 64px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(18px, 2.4vw, 32px);
}

/* Handwritten signature svg */
.sig-draw {
  width: clamp(280px, 34vw, 430px);
  height: auto;
  overflow: visible;
}

/* The signature text group — revealed by clip-path animating l→r */
.sig-group {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 2s cubic-bezier(0.45, 0.1, 0.3, 0.92) 3.1s;
}
.manifesto.revealed .sig-group {
  clip-path: inset(0 0 0 0);
}

.sig-text {
  font-family: var(--f-script);
  font-size: 56px;
  font-weight: 600;
  fill: #2E2E2E;
  letter-spacing: -0.5px;
}
.sig-sub {
  font-family: var(--f-script);
  font-size: 22px;
  font-weight: 400;
  fill: #6B6460;
  letter-spacing: 0.3px;
}

/* Ink bleed blobs — subtle dots of extra ink at pen lifts */
.sig-blob {
  fill: #2E2E2E;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.manifesto.revealed .sig-blob-a { opacity: 0.55; transition-delay: 3.95s; }
.manifesto.revealed .sig-blob-b { opacity: 0.45; transition-delay: 4.3s; }
.manifesto.revealed .sig-blob-c { opacity: 0.4;  transition-delay: 4.65s; }
.manifesto.revealed .sig-blob-d { opacity: 0.45; transition-delay: 4.85s; }

/* Letterpress wax seal — sits to the LEFT of the signature, sized to span both lines */
.sig-seal {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.6) rotate(-18deg);
  transform-origin: 50% 50%;
  transition:
    opacity 0.55s ease 5.3s,
    transform 0.8s cubic-bezier(0.25, 1.55, 0.45, 1) 5.3s;
}
.manifesto.revealed .sig-seal {
  opacity: 1;
  transform: scale(1) rotate(-6deg);
}

/* One size variable drives both the ring SVG and the mark inside it, so they
   can't drift apart at a breakpoint. Colour moves up to the container so the
   masked mark inherits the same currentColor the rings use. */
.sig-seal {
  --seal-size: clamp(92px, 11vw, 128px);
  position: relative;
  color: #8B5E3C;
}
.sig-seal svg {
  width: var(--seal-size);
  height: var(--seal-size);
  color: inherit;
  filter: drop-shadow(0 3px 4px rgba(139,94,60,0.22));
}
/* The brand mark, replacing the "SE" letters. Sized to sit inside the inner
   ring (r=19 of a 64 viewBox ≈ 59% of the seal) with room to breathe. */
.seal-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--seal-size) * 0.175);   /* mark ratio 165 × 264 */
  height: calc(var(--seal-size) * 0.28);
  background-color: currentColor;
  -webkit-mask: url('../assets/logo-mark.png') no-repeat center / contain;
          mask: url('../assets/logo-mark.png') no-repeat center / contain;
}
.seal-outer,
.seal-inner,
.seal-hatch {
  fill: none;
  stroke: currentColor;
}
.seal-outer { stroke-width: 1.2; opacity: 0.85; }
.seal-inner { stroke-width: 0.6; opacity: 0.45; }
.seal-hatch { stroke-width: 1.1; opacity: 0.55; }
@media (max-width: 520px){
  .sig-text { font-size: 46px; }
  .sig-sub  { font-size: 18px; }
  .manifesto-sig { gap: 16px; }
  .sig-seal { --seal-size: 78px; }
}

@media (prefers-reduced-motion: reduce) {
  .sig-group,
  .sig-blob,
  .sig-seal {
    transition: none;
    clip-path: none;
    opacity: 1;
    transform: none;
  }
  .manifesto.revealed .sig-seal { transform: rotate(-5deg); }
}

/* ═══════════════════════════════════════════
   03 · RINGS — Timeline as tree rings
═══════════════════════════════════════════════ */
.rings {
  padding: clamp(80px, 10vh, 140px) var(--pad-x) clamp(120px, 14vh, 180px);
  padding-left: calc(48px + var(--pad-x));
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  position: relative;
  overflow: clip; /* clip ≠ hidden — clips visually without breaking sticky */
}
@media (max-width: 900px){ .rings { padding-left: var(--pad-x); } }

.rings-head {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  margin-bottom: 80px;
}
@media (max-width: 900px){ .rings-head { grid-template-columns: 1fr; gap: 24px; } }

.rings-title {
  font-family: var(--f-display);
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.rings-title em { font-style: italic; color: var(--accent); }
.rings-desc {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  max-width: 520px;
}

.rings-body {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 60px;
  align-items: start;
}
@media (max-width: 900px){ .rings-body { grid-template-columns: 1fr; } }

.rings-viz {
  position: sticky;
  top: 80px;
  aspect-ratio: 1;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}
.rings-viz svg {
  width: 100%; height: 100%;
  overflow: visible;
}
.rings-viz .ring-circle {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.25;
  transform-origin: center;
  transition: opacity 0.6s, stroke-width 0.6s;
}
.rings-viz .ring-circle.active {
  opacity: 1;
  stroke-width: 1.5;
}
.rings-viz .ring-core {
  fill: var(--accent);
  opacity: 0.9;
}
.rings-viz .ring-year-label {
  font-family: var(--f-display);
  font-size: 14px;
  font-style: italic;
  fill: var(--text-muted);
  opacity: 0;
  transition: opacity 0.4s;
}
.rings-viz .ring-year-label.active { opacity: 1; fill: var(--text-primary); }

.rings-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.ring-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 30px;
  padding: 22px 0 22px 18px;
  border-top: 1px solid var(--border-soft);
  border-left: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.5s var(--e-out), background 0.5s var(--e-out);
}
.ring-item:last-child { border-bottom: 1px solid var(--border-soft); }
.ring-item.active { border-left-color: var(--accent); background: var(--accent-tint); }
.ring-item:hover { border-left-color: var(--border); }
.ring-year {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  transition: color 0.5s var(--e-out);
}
/* The active milestone is marked by colour and the left rule, never by fading
   its siblings — the old opacity:0.45 dropped body copy to 1.89:1. */
.ring-item.active .ring-year { color: var(--accent-ink); font-style: italic; }

.ring-content h4 {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.ring-content p {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════
   04 · WORKSHOP — sticky split with images
═══════════════════════════════════════════════ */
.workshop {
  padding: clamp(80px, 10vh, 140px) 0;
  background: var(--accent-green);
  color: #F7F4EF;
  position: relative;
  overflow: hidden;
}
.workshop-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  gap: 80px;
}
@media (max-width: 900px){
  .workshop-inner { grid-template-columns: 1fr; gap: 40px; padding-left: var(--pad-x); }
}

.workshop-text {
  position: sticky;
  top: 120px;
  align-self: start;
  padding: 40px 0;
}
@media (max-width: 900px){ .workshop-text { position: static; } }
.workshop-eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.4);
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 12px;
}
.workshop-eyebrow::before {
  content: '— 003';
}
.workshop-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 4.8vw, 72px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin-bottom: 30px;
  font-variation-settings: "opsz" 144;
}
.workshop-title em { font-style: italic; color: rgba(245,240,232,0.6); }
.workshop-desc {
  font-size: 16.5px;
  line-height: 1.85;
  color: rgba(245,240,232,0.65);
  max-width: 440px;
  margin-bottom: 40px;
}

.workshop-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.wfig {
  border-top: 1px solid rgba(245,240,232,0.12);
  padding-top: 16px;
}
.wfig-n {
  font-family: var(--f-display);
  font-size: 44px;
  font-weight: 300;
  line-height: 1;
  color: #F7F4EF;
}
.wfig-n em { font-style: italic; }
.wfig-l {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  margin-top: 8px;
}

.workshop-media {
  position: relative;
  align-self: start;
}

.wm-video {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: #000;
  border: 1px solid rgba(245,240,232,0.08);
}
.wm-video video {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: brightness(0.92) contrast(1.04);
  transition: filter 0.8s var(--e-out);
}
.wm-video:hover video { filter: brightness(1) contrast(1); }

/* Graceful fallback while the <video> has no source loaded: the
   black container still reads as a considered "film" placeholder. */
.wm-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(245,240,232,0.04), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

.wm-video-caption {
  position: absolute;
  left: 24px;
  bottom: 22px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #F7F4EF;
  text-shadow: 0 1px 12px rgba(0,0,0,0.5);
}
.wm-video-label {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.wm-video-sub {
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  color: rgba(245,240,232,0.7);
}

/* Play button overlay — centered, clickable, fades out while playing */
.wm-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 1px solid rgba(245,240,232,0.6);
  background: rgba(245,240,232,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #F7F4EF;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.35s var(--e-out),
    border-color 0.35s var(--e-out),
    color 0.35s var(--e-out),
    transform 0.45s var(--e-out),
    opacity 0.4s var(--e-out),
    visibility 0.4s;
  box-shadow: 0 0 0 0 rgba(245,240,232,0.35);
  animation: wm-play-pulse 2.8s var(--e-out) infinite;
}
.wm-play svg {
  width: 28px;
  height: 28px;
  margin-left: 4px; /* optically centre the triangle */
}
.wm-play:hover {
  background: #F7F4EF;
  border-color: #F7F4EF;
  color: var(--accent);
  transform: translate(-50%, -50%) scale(1.05);
  animation: none;
}
.wm-video.is-playing .wm-play {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
@keyframes wm-play-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,240,232,0.35); }
  70%  { box-shadow: 0 0 0 22px rgba(245,240,232,0); }
  100% { box-shadow: 0 0 0 0 rgba(245,240,232,0); }
}

/* While playing, clicking the video pauses and re-shows the button */
.wm-video video { cursor: pointer; }

/* ═══════════════════════════════════════════
   05 · THE HERBARIUM — Specimen cards
═══════════════════════════════════════════════ */
.herbarium {
  padding: clamp(100px, 14vh, 180px) var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  background: var(--bg-primary);
  position: relative;
}
@media (max-width: 900px){ .herbarium { padding-left: var(--pad-x); } }

.herbarium-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 96px;
  gap: 40px;
  flex-wrap: wrap;
}
.herbarium-head-left { max-width: 580px; }
.herbarium-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-top: 18px;
}
.herbarium-title em { font-style: italic; color: var(--accent); }
.herbarium-desc {
  max-width: 460px;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--text-secondary);
}

/* ── Specimen grid — 2 x 2 museum archive ── */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
}
@media (max-width: 900px){ .spec-grid { grid-template-columns: 1fr; gap: 28px; } }

/* The moisture figure was repeated identically on all four cards. It is the
   most consequential number in the section, so it is stated once instead. */
.spec-note {
  max-width: 720px;
  margin: 56px auto 0;
  text-align: center;
  font-size: 16.5px;
  line-height: 1.8;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.spec-note strong { color: var(--text-primary); font-weight: 500; }
@media (max-width: 600px) { .spec-note { text-align: left; margin-top: 36px; } }

/* ── Individual specimen card ── */
.spec {
  position: relative;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  padding: 34px 38px 32px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  transition:
    transform 0.55s var(--e-out),
    box-shadow 0.55s var(--e-out),
    border-color 0.5s var(--e-out),
    background 0.5s var(--e-out);
  overflow: hidden;
}

/* Subtle paper-watermark corner tick — like a mounting tab */
.spec::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 34px; height: 34px;
  background:
    linear-gradient(135deg, var(--bg-secondary) 0 50%, transparent 50% 100%);
  opacity: 0.9;
}
.spec::after {
  content: '';
  position: absolute;
  top: 8px; left: 8px;
  width: 14px; height: 14px;
  border: 1px solid var(--border);
  border-radius: 50%;
  opacity: 0.6;
  pointer-events: none;
}

.spec:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 52px -18px rgba(46,30,18,0.22),
    0 2px 6px -1px rgba(46,30,18,0.05);
  border-color: var(--text-muted);
  background: #FBF8F2;
}

@media (max-width: 560px){
  .spec { padding: 26px 22px 24px; }
}

/* ── Header: specimen number, taxonomy ── */
.spec-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.spec-no {
  font-family: var(--f-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-primary);
}
/* ── Specimen plate (the cross-section) ── */
.spec-plate {
  position: relative;
  background: var(--bg-secondary);
  border: 1px solid var(--border-soft);
  padding: 28px 28px 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 280px;
}
.spec-cross {
  width: clamp(200px, 28vw, 300px);
  height: auto;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.04));
  transition: transform 0.7s var(--e-out);
}
.spec:hover .spec-cross {
  transform: scale(1.02);
}

.spec-scale {
  position: absolute;
  left: 20px;
  bottom: 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  opacity: 0.75;
}

/* ── Magnified grain detail — hidden until hover ── */
.spec-mag {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 96px;
  opacity: 0;
  transform: translate(8px, -4px) scale(0.92);
  transition:
    opacity 0.45s var(--e-out),
    transform 0.55s var(--e-out);
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(46,30,18,0.25));
}
.spec-mag svg {
  display: block;
  width: 100%;
  height: auto;
}
.spec-mag figcaption {
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-primary);
  opacity: 0.75;
}
.spec:hover .spec-mag {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

@media (max-width: 560px){
  .spec-mag { width: 72px; right: 12px; top: 12px; }
}

/* ── Foot: names + measured data ── */
.spec-foot {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.spec-names {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.spec-name {
  font-family: var(--f-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.008em;
  color: var(--text-primary);
}

.spec-botanic {
  font-family: var(--f-body);
  font-size: 13px;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
}
.spec-botanic em { font-style: italic; }

/* one plain sentence on how the wood behaves — replaces the taxonomy rows */
.spec-character {
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Measured properties — typographic data table */
.spec-data {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
}
.spec-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-soft);
  align-items: baseline;
}
.spec-row:last-child { border-bottom: none; }
.spec-row dt {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.spec-row dd {
  font-family: var(--f-display);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1.3;
  letter-spacing: 0.005em;
}

@media (max-width: 420px){
  .spec-row { grid-template-columns: 80px 1fr; gap: 10px; }
  .spec-row dd { font-size: 13.5px; }
}

/* ═══════════════════════════════════════════
   06 · COLLECTIONS — Year numerals
═══════════════════════════════════════════════ */
.collections {
  padding: clamp(100px, 14vh, 180px) 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}
.collections-head {
  padding: 0 var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  margin-bottom: 60px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px){
  .collections-head { grid-template-columns: 1fr; padding-left: var(--pad-x); gap: 24px; }
}
.collections-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-top: 18px;
}
.collections-title em { font-style: italic; color: var(--accent); }
.collections-desc {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--text-secondary);
  max-width: 480px;
  padding-top: 40px;
}

.collections-list {
  list-style: none;
  border-top: 1px solid var(--border);
}
.c-item {
  display: grid;
  grid-template-columns: 220px 1fr 1.2fr 1fr 60px;
  align-items: center;
  gap: 40px;
  padding: 38px var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  max-width: var(--max-w);
  margin: 0 auto;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.5s var(--e-out), padding 0.5s var(--e-out);
  position: relative;
}
@media (max-width: 900px){
  .c-item { grid-template-columns: 80px 1fr 40px; gap: 20px; padding-left: var(--pad-x); }
  .c-item .c-products, .c-item .c-desc { display: none; }
}
.c-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.c-item:hover::before { opacity: 0.04; }
.c-item:hover { padding-left: calc(48px + var(--pad-x) + 8px); }
@media (max-width: 900px){ .c-item:hover { padding-left: calc(var(--pad-x) + 6px); } }

.c-year {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--f-display);
  font-size: clamp(40px, 4.5vw, 80px);
  font-weight: 300;
  line-height: 1;
  color: var(--text-primary);
  font-variation-settings: "opsz" 144;
  transition: color 0.5s, font-style 0.5s;
}
.c-item:hover .c-year { color: var(--accent); font-style: italic; }

.c-name {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
}
.c-desc {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-secondary);
}
.c-products {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
  padding-right: 10px;
}
.c-products-num {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-primary);
  line-height: 1;
}
.c-products-lbl {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.c-arrow {
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: grid; place-items: center;
  transition: all 0.5s var(--e-out);
  justify-self: end;
}
.c-item:hover .c-arrow {
  background: var(--text-primary);
  border-color: var(--text-primary);
  color: var(--white);
  transform: rotate(-45deg);
}
.c-arrow svg { width: 16px; height: 16px; }

.c-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 3px 8px;
  border-radius: 2px;
  margin-left: 10px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════
   07 · CITIES — Global reach marquee
═══════════════════════════════════════════════ */
.cities {
  /* No bottom padding: the regions bar carries 44px below its own text, so a
     further 120px here just left a dead band before the next section. */
  padding: clamp(80px, 12vh, 140px) 0 0;
  background: var(--bg-dark);
  color: #F7F4EF;
  overflow: hidden;
  position: relative;
}
.cities-head {
  padding: 0 var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  max-width: var(--max-w);
  margin: 0 auto clamp(60px, 8vw, 100px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: end;
}
@media (max-width: 900px){
  .cities-head { grid-template-columns: 1fr; padding-left: var(--pad-x); }
}
.cities-title {
  font-family: var(--f-display);
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.cities-title em { font-style: italic; color: var(--accent-light); }
.cities-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 380px;
}
.c-stat {
  border-top: 1px solid rgba(245,240,232,0.12);
  padding-top: 14px;
}
.c-stat-n {
  font-family: var(--f-display);
  font-size: 36px;
  font-weight: 300;
  color: var(--accent-light);
  line-height: 1;
}
.c-stat-l {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  margin-top: 6px;
}

.cities-marquee {
  white-space: nowrap;
  overflow: hidden;
  margin: 24px 0;
  padding: 18px 0;
  border-top: 1px solid rgba(245,240,232,0.12);
  border-bottom: 1px solid rgba(245,240,232,0.12);
}
.cities-marquee-track {
  display: inline-flex;
  gap: 48px;
  animation: marquee 60s linear infinite;
  font-family: var(--f-display);
  font-size: clamp(36px, 6vw, 90px);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -0.01em;
}
.cities-marquee-track span {
  color: rgba(245,240,232,0.65);
  transition: color 0.3s;
}
.cities-marquee-track span:hover { color: #F7F4EF; }
.cities-marquee-track .sep {
  color: rgba(245,240,232,0.25);
  font-family: var(--f-display);
  font-style: normal;
}
.cities-marquee.slow .cities-marquee-track { animation-duration: 90s; animation-direction: reverse; }

.cities-regions {
  padding: 0 var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  max-width: var(--max-w);
  margin: clamp(60px, 8vw, 100px) auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(245,240,232,0.12);
}
@media (max-width: 900px){
  .cities-regions { grid-template-columns: repeat(2, 1fr); padding-left: var(--pad-x); }
}
.cr-cell {
  padding: 30px 24px;
  border-right: 1px solid rgba(245,240,232,0.12);
}
.cr-cell:last-child { border-right: none; }
.cr-lbl {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.6);
  margin-bottom: 10px;
}
.cr-n {
  font-family: var(--f-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 300;
  color: #F7F4EF;
  line-height: 1.05;
  margin-bottom: 8px;
}
.cr-list {
  font-size: 12px;
  line-height: 1.7;
  color: rgba(245,240,232,0.6);
}

/* ═══════════════════════════════════════════
   08 · THE JOINERY — Principles rendered as joints
═══════════════════════════════════════════════ */
.joinery {
  padding: clamp(100px, 14vh, 180px) var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  background: var(--bg-primary);
  position: relative;
}
@media (max-width: 900px){ .joinery { padding-left: var(--pad-x); } }

.joinery-head {
  max-width: 900px;
  margin-bottom: 96px;
}
.joinery-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 5vw, 72px);
  font-weight: 300;
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin-top: 18px;
}
.joinery-title em { font-style: italic; color: var(--accent); }
.joinery-lede {
  max-width: 560px;
  margin-top: 28px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.j-list {
  list-style: none;
  display: grid;
  gap: 0;
}
.j-item {
  display: grid;
  grid-template-columns: 120px 280px 1fr;
  gap: 56px;
  padding: 56px 0;
  border-top: 1px solid var(--border);
  align-items: center;
  transition: background 0.5s var(--e-out);
  color: var(--text-primary);
}
.j-item:last-child { border-bottom: 1px solid var(--border); }
.j-item:hover { background: rgba(200,165,140,0.04); }

@media (max-width: 1080px){
  .j-item { grid-template-columns: 90px 220px 1fr; gap: 36px; }
}
@media (max-width: 900px){
  .j-item {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 44px 0;
  }
  .j-item .j-visual { order: 2; max-width: 320px; }
  .j-item .j-copy   { order: 3; }
  .j-item .j-index  { order: 1; }
}

/* Index column */
.j-index {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 8px;
}
.j-num {
  font-family: var(--f-display);
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
  line-height: 1;
}
.j-kind {
  font-family: var(--f-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Visual column — the joint drawing */
.j-visual {
  position: relative;
  padding: 18px 14px;
  border: 1px solid var(--border-soft);
  background: var(--bg-secondary);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.j-svg {
  width: 100%;
  height: auto;
  color: var(--text-primary);
  display: block;
}
.j-spec {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding-top: 2px;
  border-top: 1px dashed var(--border-soft);
}

/* Copy column */
.j-copy {
  max-width: 560px;
}
.j-title {
  font-family: var(--f-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.j-body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* ── Joint animations — assemble on scroll into view ── */
@keyframes j-slide-in-l {
  from { transform: translateX(-36px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes j-slide-in-r {
  from { transform: translateX(36px); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}
@keyframes j-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes j-slide-in-up {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Default state — parts are offset, waiting to assemble */
.j-item .j-tails,
.j-item .j-tenon,
.j-item .j-finger-l,
.j-item .j-lap-upper {
  transform: translateX(-36px);
  opacity: 0;
}
.j-item .j-pins,
.j-item .j-mortise,
.j-item .j-finger-r,
.j-item .j-lap-lower {
  transform: translateX(36px);
  opacity: 0;
}
.j-item .j-cert,
.j-item .j-lap-peg,
.j-item .j-ticks {
  opacity: 0;
}

/* On enter — each pair slides together */
.j-item.is-in .j-tails,
.j-item.is-in .j-tenon,
.j-item.is-in .j-finger-l,
.j-item.is-in .j-lap-upper {
  animation: j-slide-in-l 1.1s var(--e-out) forwards;
}
.j-item.is-in .j-pins,
.j-item.is-in .j-mortise,
.j-item.is-in .j-finger-r,
.j-item.is-in .j-lap-lower {
  animation: j-slide-in-r 1.1s var(--e-out) forwards;
}
.j-item.is-in .j-cert,
.j-item.is-in .j-lap-peg,
.j-item.is-in .j-ticks {
  animation: j-fade-in 0.8s var(--e-out) 0.9s forwards;
}

/* Hover — micro "flex" of the joint */
.j-item:hover .j-tails,
.j-item:hover .j-tenon,
.j-item:hover .j-finger-l,
.j-item:hover .j-lap-upper {
  transform: translateX(-3px);
  transition: transform 0.6s var(--e-out);
}
.j-item:hover .j-pins,
.j-item:hover .j-mortise,
.j-item:hover .j-finger-r,
.j-item:hover .j-lap-lower {
  transform: translateX(3px);
  transition: transform 0.6s var(--e-out);
}

@media (prefers-reduced-motion: reduce) {
  .j-item .j-tails,
  .j-item .j-tenon,
  .j-item .j-finger-l,
  .j-item .j-lap-upper,
  .j-item .j-pins,
  .j-item .j-mortise,
  .j-item .j-finger-r,
  .j-item .j-lap-lower,
  .j-item .j-cert,
  .j-item .j-lap-peg,
  .j-item .j-ticks {
    transform: none;
    opacity: 1;
    animation: none;
  }
}

/* ═══════════════════════════════════════════
   09 · CLOSE — Final CTA
═══════════════════════════════════════════════ */
.close {
  padding: clamp(120px, 18vh, 200px) var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  background: var(--accent-green);
  color: #F7F4EF;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px){ .close { padding-left: var(--pad-x); } }

/* Watermark: the SARAF wordmark, as a real <img>.
   Previously this was a pseudo-element tinted through a CSS mask. That works,
   but the ink position depended on aspect-ratio resolving on an empty
   pseudo-element and on mask-size/position — and those did not agree between
   engines, so the letters floated above the footer rule in Safari while
   measuring flush in Chromium.
   An <img> has intrinsic dimensions: width + height:auto gives exactly the
   artwork's ratio with nothing to compute, and because the PNG is trimmed to
   the ink, the element's bottom edge IS the letter feet. bottom:0 therefore
   lands them on the footer border in every engine. */
.close-wm {
  position: absolute;
  bottom: 0;
  left: -1.5vw;
  width: min(90vw, 1400px);
  height: auto;
  display: block;
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.close-inner { position: relative; z-index: 1; }


.close-inner {
  position: relative;
  max-width: 1000px;
}
.close-eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.close-eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(245,240,232,0.15);
  max-width: 240px;
}
.close-title {
  font-family: var(--f-display);
  font-size: clamp(44px, 7vw, 120px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
  margin-bottom: 60px;
}
.close-title em { font-style: italic; color: rgba(245,240,232,0.55); }

.close-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 30px;
  border: 1px solid rgba(245,240,232,0.3);
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 0.4s var(--e-out);
  cursor: pointer;
  background: none;
  color: inherit;
  font-family: var(--f-body);
}
.btn-pill:hover {
  background: #F7F4EF;
  color: var(--accent-green);
  border-color: #F7F4EF;
}
.btn-pill-filled {
  background: #F7F4EF;
  border-color: #F7F4EF;
  color: var(--accent-green);
}
.btn-pill-filled:hover {
  background: transparent;
  border-color: #F7F4EF;
  color: #F7F4EF;
}
.btn-pill svg { width: 16px; height: 16px; transition: transform 0.3s; }
.btn-pill:hover svg { transform: translateX(3px); }

/* Two items now that the phone number is gone. Flex rather than a 3-column
   grid so they sit against the left edge instead of leaving a visible hole
   where the third column used to be. */
.close-meta {
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px 72px;
  padding-top: 40px;
  border-top: 1px solid rgba(245,240,232,0.12);
}
@media (max-width: 900px){ .close-meta { flex-direction: column; gap: 24px; } }
.cm-item .cm-l {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(245,240,232,0.5);
  margin-bottom: 10px;
}
.cm-item .cm-v {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 400;
  color: #F7F4EF;
}
.cm-item .cm-v a { transition: color 0.3s; }
.cm-item .cm-v a:hover { color: rgba(245,240,232,0.7); }

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════ */
.foot {
  background: var(--accent-green);
  color: rgba(247,244,239,0.55);
  padding: 40px var(--pad-x);
  padding-left: calc(48px + var(--pad-x));
  border-top: 1px solid rgba(247,244,239,0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
@media (max-width: 900px){ .foot { padding-left: var(--pad-x); } }
.foot a:hover { color: #F7F4EF; }
.foot-links { display: flex; gap: 30px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════
   SCROLL REVEAL UTILITY
═══════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--e-out), transform 1s var(--e-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }

/* ═══════════════════════════════════════════
   CURSOR
═══════════════════════════════════════════════ */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, background 0.3s;
  mix-blend-mode: difference;
}
.cursor.grow { width: 32px; height: 32px; background: var(--accent-soft); }
@media (max-width: 900px), (pointer: coarse) { .cursor { display: none; } }
@media (pointer: fine) { html, body, a, button { cursor: none !important; } }

/* Progress bar */
.progress {
  position: fixed;
  top: 0; left: 48px; right: 0;
  height: 1px;
  background: transparent;
  z-index: 81;
}
@media (max-width: 900px){ .progress { left: 0; } }
.progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0;
  transition: width 0.1s linear;
}