/* ============================================================
   Martinelli Interiors - Yacht & Home Upholstery, Viareggio
   Design system mirroring the benettiyachts.com layout language:
   warm paper background, charcoal ink, editorial serif with
   italic connectors, bracketed mono eyebrows, pill buttons.
   ============================================================ */

/* Michroma (SIL Open Font License) stands in for Eurostile Extended:
   same squared, extended construction, and free to embed as a webfont. */
@font-face {
  font-family: "Michroma";
  src: url("../fonts/Michroma-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* GT Super Display Light Italic - the accent italic Benetti uses.
   TRIAL FILE: licensed for testing only, a web licence is required
   from Grilli Type before this site goes public. */
@font-face {
  font-family: "GT Super";
  src: url("../fonts/GT-Super-Display-Light-Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Brand scales -------------------------------------------------
   Blues come from the official palette; the warm side replaces the
   palette's browns with the sand neutrals used across the site. */
:root {
  --blu-notte:   #132027;
  --blu-ardesia: #31373f;
  --blu-grigio:  #646e78;
  --blu-nebbia:  #d4d9e3;

  --avorio: #fff7ee;
  --sabbia: #f2ece2;
  --lino:   #e9e2d5;
  --corda:  #d8cdb8;

  /* Always sit on photography, so they never follow the theme */
  --on-photo:      #fff7ee;
  --on-photo-soft: rgba(255, 247, 238, 0.82);
  --on-photo-dim:  rgba(255, 247, 238, 0.7);
  --scrim:         10, 17, 21;

  /* Semantic tokens - light theme */
  --paper:      var(--sabbia);
  --paper-2:    var(--lino);
  --surface:    var(--avorio);
  --ink:        var(--blu-notte);
  --ink-soft:   rgba(19, 32, 39, 0.78);
  --ink-faint:  rgba(19, 32, 39, 0.65);
  --hairline:   rgba(19, 32, 39, 0.16);
  --line-strong: rgba(19, 32, 39, 0.55);
  --row-hover:  rgba(19, 32, 39, 0.035);
  --shadow:     rgba(19, 32, 39, 0.09);
  --header-bg:  rgba(242, 236, 226, 0.88);
  --taupe:      var(--blu-grigio);
  --footer-bg:  var(--blu-notte);
  --footer-fg:  var(--avorio);
  --footer-fg-soft: rgba(255, 247, 238, 0.78);
  --footer-fg-dim:  rgba(255, 247, 238, 0.5);
  --footer-line:    rgba(255, 247, 238, 0.16);
  --art-invert: 0;

  --serif: "Michroma", "Hanken Grotesk", sans-serif;
  --accent: "GT Super", "Fraunces", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --display-scale: 0.79;
  --ease: cubic-bezier(0.25, 0.6, 0.2, 1);
  --radius: 10px;
  --header-h: 92px;
}

/* Semantic tokens - dark theme, built from the palette blues */
:root[data-theme="dark"] {
  --paper:      var(--blu-notte);
  --paper-2:    #1b252c;
  --surface:    #1a242b;
  --ink:        var(--blu-nebbia);
  --ink-soft:   rgba(212, 217, 227, 0.74);
  --ink-faint:  rgba(212, 217, 227, 0.58);
  --hairline:   rgba(212, 217, 227, 0.17);
  --line-strong: rgba(212, 217, 227, 0.42);
  --row-hover:  rgba(212, 217, 227, 0.05);
  --shadow:     rgba(0, 0, 0, 0.45);
  --header-bg:  rgba(19, 32, 39, 0.9);
  --taupe:      #9aa5b1;
  /* Deeper than the page's blu-notte, so the footer reads as a lower layer */
  --footer-bg:  #0a1115;
  --footer-fg-dim: rgba(255, 247, 238, 0.6);
  --art-invert: 1;
}

html { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--ink); color: var(--paper); }

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

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Controls that sit on photography or on the lightbox backdrop keep a fixed
   ivory ring, with a dark halo so it survives a bright patch of photo. */
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible,
.pill--light:focus-visible {
  outline: 2px solid var(--on-photo);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(var(--scrim), 0.9);
}

/* ---------- Typography ---------- */

.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Italic serif accent phrases inside uppercase display titles */
.display i,
.display em {
  font-family: var(--accent);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0;
  /* The accent runs are mostly lowercase, so what reads as "the same height"
     is the italic x-height against Michroma's caps, not cap against cap.
     Matching caps (1.045) left the lowercase a quarter short; this lifts the
     x-height to ~85% of the cap line, which reads level. */
  font-size: 1.2em;
  line-height: 1;
  color: inherit;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
}

.eyebrow::before { content: "[\00a0\00a0"; color: var(--ink-faint); }
.eyebrow::after { content: "\00a0\00a0]"; color: var(--ink-faint); }

.lead {
  color: var(--ink-soft);
  max-width: 54ch;
  font-size: 1.08rem;
}

/* ---------- Layout ---------- */

.container {
  width: min(1280px, calc(100% - clamp(2.5rem, 6vw, 6rem)));
  margin-inline: auto;
}

.section { padding-block: clamp(5rem, 10vw, 8.5rem); }

.center { text-align: center; }
.center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.9rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}

.pill:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.pill--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pill--solid:hover { background: transparent; color: var(--ink); }

.pill--light { border-color: rgba(255, 247, 238, 0.5); color: var(--on-photo); }
.pill--light:hover { background: var(--on-photo); border-color: var(--on-photo); color: var(--blu-notte); }

.pill .arrow { font-family: var(--sans); }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background 0.45s ease, height 0.45s ease, border-color 0.45s ease, backdrop-filter 0.45s ease;
  border-bottom: 1px solid transparent;
}

.site-header.is-scrolled {
  height: 68px;
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--hairline);
}

.header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.menu-toggle {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.6rem 0;
  z-index: 130;
}

.menu-toggle .glyph {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  width: 34px;
}

.menu-toggle .glyph span {
  height: 1.5px;
  background: currentColor;
  transition: transform 0.4s var(--ease), width 0.4s var(--ease);
}

.menu-toggle .glyph span:nth-child(1) { width: 100%; }
.menu-toggle .glyph span:nth-child(2) { width: 62%; }

.menu-toggle:hover .glyph span:nth-child(2) { width: 100%; }

.brand { justify-self: center; display: inline-flex; }

.brand .logo-mark { height: 15px; }

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
}

.header-links {
  display: flex;
  gap: 2.4rem;
}

/* Theme toggle: shows the theme it will switch to */
.theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}

.theme-toggle:hover {
  border-color: var(--line-strong);
  background: var(--ink);
  color: var(--paper);
}

.theme-toggle svg { width: 17px; height: 17px; display: block; }

/* Language switch: shows the language it will switch to */
.lang-toggle {
  height: 38px;
  padding-inline: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), color 0.35s var(--ease);
}

.lang-toggle:hover {
  border-color: var(--line-strong);
  background: var(--ink);
  color: var(--paper);
}

.theme-toggle .icon-sun { display: none; }

.header-cta {
  height: 38px;
  padding-inline: 1.3rem;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: background 0.35s var(--ease), color 0.35s var(--ease);
}

.header-cta:hover { background: transparent; color: var(--ink); }

.header-call {
  width: 34px;
  height: 34px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
}

.header-call svg { width: 16px; height: 16px; display: block; }

.theme-toggle--menu { display: none; justify-self: end; }

/* Pages opening on a full-bleed photo or video: until the header gains its
   own background on scroll, its controls sit on the media and take the
   on-photo colours instead of the theme's ink. */
.has-cover .site-header:not(.is-scrolled) {
  --ink: var(--on-photo);
  --paper: var(--blu-notte);
  --hairline: rgba(255, 247, 238, 0.32);
  --line-strong: rgba(255, 247, 238, 0.6);
  color: var(--on-photo);
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* Logos are painted with currentColor through an SVG mask, so a mark always
   matches the text next to it, in either theme, from one source file. */
.logo-mark {
  display: block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.logo-mark--wordmark {
  -webkit-mask-image: url("../img/logo-esteso.svg");
          mask-image: url("../img/logo-esteso.svg");
  aspect-ratio: 344.1 / 29.44;
}

.logo-mark--monogram {
  -webkit-mask-image: url("../img/logo-m.svg");
          mask-image: url("../img/logo-m.svg");
  aspect-ratio: 165 / 99;
}

.logo-mark--badge {
  -webkit-mask-image: url("../img/logo-badge.svg");
          mask-image: url("../img/logo-badge.svg");
  aspect-ratio: 237 / 180;
}

.header-links a {
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
  transition: opacity 0.3s ease;
}

.header-links a:hover,
.header-links a[aria-current="page"] { opacity: 1; }

/* ---------- Full-screen menu ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s var(--ease), visibility 0s linear 0.5s;
}

.menu-overlay.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.5s var(--ease);
}

.menu-overlay-bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
}

.menu-overlay-bar .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.menu-close {
  justify-self: start;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.6rem 0;
}

.menu-overlay-bar .logo-mark { height: 15px; }

.menu-overlay-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
}

.menu-overlay-links a {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(clamp(2rem, 5.4vw, 3.6rem) * var(--display-scale));
  line-height: 1.28;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), color 0.3s ease;
}

.menu-overlay.is-open .menu-overlay-links a {
  opacity: 1;
  transform: none;
  transition-delay: calc(0.07s * var(--i, 0) + 0.12s);
}

.menu-overlay-links a:hover { color: var(--taupe); }

/* Hovering one entry fades the others back; the stagger delay belongs to
   the entrance animation only, so it is zeroed here or the dim would lag */
.menu-overlay.is-open .menu-overlay-links:hover a,
.menu-overlay.is-open .menu-overlay-links:focus-within a {
  opacity: 0.3;
  transition: opacity 0.35s ease, transform 0.6s var(--ease), color 0.3s ease;
  transition-delay: 0s;
}

.menu-overlay.is-open .menu-overlay-links:hover a:hover,
.menu-overlay.is-open .menu-overlay-links:focus-within a:focus-visible {
  opacity: 1;
}

.menu-overlay-links a .idx {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
}

.menu-overlay-foot {
  padding-block: 2rem;
  border-top: 1px solid var(--hairline);
}

.menu-overlay-foot .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- Hero (campaign style) ---------- */

.hero {
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5.5rem));
  text-align: center;
}

.hero .eyebrow { display: inline-block; margin-bottom: 2.2rem; }

.hero .display {
  font-size: calc(clamp(2.4rem, 6.2vw, 5.2rem) * var(--display-scale));
  max-width: 22ch;
  margin-inline: auto;
}

.hero .lead {
  margin: 2rem auto 0;
}

.hero .pill { margin-top: 2.4rem; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: 2.4rem;
}

.hero-actions .pill { margin-top: 0; }

/* Full-bleed hero: the atelier film plays behind the copy, under a scrim.
   Everything inside reads the on-photo palette so it holds in both themes. */
.hero--cover {
  --ink: var(--on-photo);
  --ink-soft: var(--on-photo-soft);
  --ink-faint: var(--on-photo-dim);
  --paper: var(--blu-notte);
  --line-strong: rgba(255, 247, 238, 0.6);
  position: relative;
  /* capped so the hero does not stretch on very tall or portrait screens */
  min-height: min(100svh, 1100px);
  display: grid;
  /* a plain auto track would grow to the title's unwrapped width */
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  padding-block: calc(var(--header-h) + 2rem) clamp(3rem, 7vw, 5rem);
  color: var(--on-photo);
  overflow: hidden;
  isolation: isolate;
}

.hero-media { position: absolute; inset: 0; z-index: -1; }

.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(var(--scrim), 0.62), rgba(var(--scrim), 0.5) 45%, rgba(var(--scrim), 0.78));
}

.hero--cover .lead { color: var(--on-photo-soft); }

/* ---------- Numbers strip ---------- */

.stats { padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1rem, 2vw, 1.5rem); }

.stats-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.stats-grid li { display: grid; gap: 0.7rem; align-content: start; }

.stats-grid .stat-num {
  font-family: var(--serif);
  font-size: calc(clamp(2rem, 4.4vw, 3.4rem) * var(--display-scale));
  line-height: 1;
  color: var(--ink);
}

.stats-grid .stat-label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--ink-faint);
  max-width: 24ch;
}

.value-title {
  font-size: calc(clamp(1.8rem, 4vw, 3.2rem) * var(--display-scale));
  max-width: 24ch;
  margin: 1.6rem auto 0;
}

/* ---------- Clients marquee ----------
   Two identical groups, each carrying its own trailing gap, so a -50%
   translation lands exactly one group over: the loop has no seam. */

.clients {
  --logo-gap: clamp(3.5rem, 7vw, 7rem);
  padding-block: clamp(4.5rem, 8vw, 7rem);
  border-block: 1px solid var(--hairline);
  overflow: hidden;
}

.clients .eyebrow {
  display: block;
  text-align: center;
  margin-bottom: clamp(2.8rem, 5vw, 4rem);
}

/* Static wrapper: the fade must not travel with the animated track */
.marquee-viewport {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* CSS animation is the no-JS fallback; main.js takes over to ease the
   speed down on hover rather than stopping the strip dead. */
.marquee {
  display: flex;
  width: max-content;
  animation: marquee-slide 46s linear infinite;
}

.marquee.js-driven { animation: none; }

.marquee-group {
  display: flex;
  align-items: center;
  gap: var(--logo-gap);
  padding-right: var(--logo-gap);
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.marquee-group li {
  flex: 0 0 auto;
  width: clamp(130px, 14vw, 190px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.marquee-group a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: 0.9rem;
}

.marquee-group img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(var(--art-invert));
  opacity: 0.38;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}

.marquee-group a:hover img,
.marquee-group a:focus-visible img {
  opacity: 0.9;
  transform: scale(1.06);
}

@keyframes marquee-slide {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .clients { overflow-x: auto; }
  .marquee { animation: none; }
}

/* ---------- Brand network ----------
   Two rows drifting in opposite directions. Each row is authored with a
   single group; main.js appends a hidden clone so the loop can wrap.
   Without JS the rows fall back to plain scrollable strips (see the
   noscript styles in each page head). */

.brands {
  /* The logo canvases carry their own whitespace, so the gap stays tight */
  --logo-gap: clamp(0.8rem, 1.8vw, 1.6rem);
  padding-block: clamp(4.5rem, 8vw, 7rem);
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}

.brands .eyebrow {
  display: block;
  text-align: center;
  margin-bottom: clamp(2.8rem, 5vw, 4rem);
}

.brands .eyebrow:has(+ .brands-note) { margin-bottom: 1rem; }

.brands-note {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.92rem;
  margin: 0 auto clamp(2.4rem, 4.5vw, 3.4rem);
  padding-inline: 1.5rem;
}

.brands .marquee { animation: none; }

.brands .marquee-viewport + .marquee-viewport {
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
}

/* Every logo file shares the same 600x225 canvas with the mark scaled to a
   constant visual area, so one uniform slot renders them perceptually even. */
.brands .marquee-group li { width: clamp(170px, 17vw, 230px); }

.brands .marquee-group img {
  width: 100%;
  max-height: none;
  opacity: 0.4;
}

.brands .marquee-group li:hover img { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .brands .marquee-viewport {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ---------- Manifesto ---------- */

.manifesto { padding-block: clamp(7rem, 13vw, 12rem); }

.manifesto .display {
  font-size: calc(clamp(1.4rem, 3.1vw, 2.5rem) * var(--display-scale));
  line-height: 1.42;
  max-width: 34ch;
  margin-inline: auto;
}

/* ---------- Feature trio ---------- */

/* Slightly translucent so the fixed dot field reads through the tint */
.trio { background: color-mix(in srgb, var(--paper-2) 86%, transparent); }

.trio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.trio-card { display: grid; gap: 1.2rem; align-content: start; }

.trio-card figure {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.trio-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.trio-card:hover img { transform: scale(1.05); }

.trio-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-top: 0.6rem;
}

.trio-card p { color: var(--ink-soft); font-size: 0.98rem; }

.trio-card .pill { justify-self: start; margin-top: 0.4rem; }

/* ---------- Creations slider ---------- */

.creations { overflow: hidden; }

.creations-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.6rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.creations-head .display { font-size: calc(clamp(2.2rem, 5vw, 4.2rem) * var(--display-scale)); }

.slider {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 8.6;
  min-height: 440px;
  background: rgb(var(--scrim));
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.9s var(--ease);
  pointer-events: none;
}

.slide.is-active { opacity: 1; pointer-events: auto; }

.slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.8s var(--ease);
}

.slide.is-active img { transform: scale(1); }

.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--scrim), 0.92) 10%, rgba(var(--scrim), 0.72) 36%, rgba(var(--scrim), 0.36) 60%, transparent 86%);
}

.slide-caption {
  position: absolute;
  left: clamp(1.6rem, 4vw, 3.2rem);
  right: clamp(1.6rem, 4vw, 3.2rem);
  bottom: clamp(1.6rem, 4vw, 2.8rem);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem;
  color: var(--on-photo);
}

.slide-caption h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(clamp(1.7rem, 3.4vw, 2.8rem) * var(--display-scale));
  text-transform: uppercase;
  line-height: 1.05;
}

.slide-caption .tagline {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-photo-dim);
  margin-top: 0.7rem;
}

.slide-caption .pill { flex-shrink: 0; }

.slider-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4rem;
  margin-top: 1.4rem;
}

.slider-counter {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}

.slider-arrows { display: flex; gap: 0.7rem; }

.slider-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s ease, color 0.35s ease;
}

.slider-arrow:hover { background: var(--ink); color: var(--paper); }

/* ---------- Row list (visit / highlights) ---------- */

.rows { border-top: 1px solid var(--hairline); }

.row-item {
  display: grid;
  grid-template-columns: 200px 140px 1fr auto;
  align-items: center;
  gap: clamp(1.2rem, 3vw, 2.5rem);
  padding-block: 1.7rem;
  border-bottom: 1px solid var(--hairline);
  transition: background 0.3s ease;
}

.row-item:hover { background: var(--row-hover); }

.row-when {
  font-family: var(--mono);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.row-when small {
  display: block;
  font-size: 0.68rem;
  color: var(--ink-faint);
  letter-spacing: 0.2em;
}

.row-tag {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.row-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.8vw, 1.45rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

.row-arrow { color: var(--ink-faint); transition: transform 0.35s var(--ease), color 0.35s ease; }

.row-item:hover .row-arrow { transform: translateX(6px); color: var(--ink); }

/* Tabs above highlights */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tabs[hidden], .tab-btn[hidden] { display: none; }

.tab-btn {
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.6rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.35s ease;
}

.tab-btn:hover { border-color: var(--ink-faint); color: var(--ink); }

.tab-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.row-item.is-hidden { display: none; }

/* ---------- Legal pages ---------- */

.legal { max-width: 760px; }

.legal h2 {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 2.6rem 0 0.9rem;
}

.legal p, .legal li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
}

.legal ul { list-style: none; }

.legal li {
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0.9rem;
}

.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.legal b { color: var(--ink); font-weight: 600; }

/* ---------- News articles ---------- */

.article { max-width: 820px; }

.article-hero { margin-bottom: clamp(2rem, 4vw, 3rem); }

.article-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}

.article p {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
}

.article figure { margin: clamp(2rem, 4vw, 3rem) 0; }

.article figure img {
  width: 100%;
  border-radius: var(--radius);
}

.article figcaption {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.7rem;
}

.article-back {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
}

.article-back:hover { color: var(--ink); }

/* ---------- Fleet register ----------
   Deliberately quiet: a single collapsed bar that opens into a compact,
   mono-set index. It documents the track record without competing with
   the gallery above it. */

.register-section { padding-block: 0 clamp(2rem, 4vw, 3rem); }

.register { border-block: 1px solid var(--hairline); }

.register summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: 1.3rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}

.register summary:hover { color: var(--ink); }

.register summary::-webkit-details-marker { display: none; }

.reg-arrow {
  font-family: var(--mono);
  font-size: 1rem;
  line-height: 1;
  transition: transform 0.35s var(--ease);
}

.register[open] .reg-arrow { transform: rotate(45deg); }

.register-grid {
  columns: 3;
  column-gap: clamp(2.5rem, 5vw, 4rem);
  padding: 0.8rem 0 2.4rem;
}

.register-block {
  break-inside: avoid;
  margin-bottom: 1.9rem;
}

.register-block h3 {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.45rem;
}

.register-block p {
  font-family: var(--mono);
  font-size: 0.66rem;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

@media (max-width: 980px) {
  .register-grid { columns: 2; }
}

@media (max-width: 600px) {
  .register-grid { columns: 1; }
}

/* ---------- Pre-footer campaign ---------- */

.campaign {
  background: color-mix(in srgb, var(--paper-2) 86%, transparent);
  text-align: center;
}

.campaign .eyebrow { display: inline-block; margin-bottom: 2rem; }

.campaign .display {
  font-size: calc(clamp(2.4rem, 5.6vw, 4.6rem) * var(--display-scale));
  max-width: 20ch;
  margin-inline: auto;
}

.campaign .lead { margin: 1.8rem auto 0; }

.campaign .pill { margin-top: 2.4rem; }

/* visit rows merged under the showroom photo; campaign centers text, rows read left */
.campaign-rows { margin-top: clamp(2rem, 4vw, 3.2rem); text-align: left; }

.campaign-rows .campaign-cta { text-align: center; margin: 0; }

/* ---------- Contact form ---------- */

.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.6rem, 3vw, 2.4rem);
  max-width: 720px;
  margin: clamp(2.5rem, 5vw, 4rem) auto 0;
  text-align: left;
}

.contact-form .field { display: grid; gap: 0.6rem; }

.contact-form .field--wide { grid-column: 1 / -1; }

.contact-form label {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0.6rem 0.1rem;
  transition: border-color 0.3s ease;
}

.contact-form textarea { resize: vertical; min-height: 130px; }

.contact-form select {
  width: 100%;
  min-width: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-strong);
  border-radius: 0;
  padding: 0.6rem 0.1rem;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 5px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.contact-form select option { color: #132027; background: #fff7ee; }

.contact-form select:hover,
.contact-form select:focus-visible { border-color: var(--ink); }

.contact-form label small {
  font-size: inherit;
  letter-spacing: inherit;
  color: var(--ink-faint);
  margin-left: 0.5em;
}

/* Honeypot: real visitors never see or reach it */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-note a { text-decoration: underline; text-underline-offset: 3px; }

.form-status {
  grid-column: 1 / -1;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: 0.95rem;
  color: var(--ink);
}

.form-status[data-state="pending"] { color: var(--ink-soft); border-color: var(--hairline); }

/* Contact page top: the direct contacts sit beside the form so both are
   in view on arrival, without scrolling. */
.contact-top { padding-top: calc(var(--header-h) + clamp(1.5rem, 4vw, 3.5rem)); }

.contact-top-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.contact-intro .eyebrow { display: inline-block; margin-bottom: 1.6rem; }

.contact-intro .display { font-size: calc(clamp(2rem, 4.2vw, 3.4rem) * var(--display-scale)); }

.contact-direct {
  list-style: none;
  margin-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--hairline);
}

.contact-direct li {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding-block: 0.95rem;
  border-bottom: 1px solid var(--hairline);
}

.contact-direct .k {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.contact-direct a {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  color: var(--ink);
  overflow-wrap: anywhere;
  transition: opacity 0.3s ease;
}

.contact-direct a:hover { opacity: 0.65; }

.contact-intro .lead { margin: 0; font-size: 1rem; }

.contact-top .contact-form { margin: 0; max-width: none; }

#map { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Attachments: the file input covers the whole zone, so a click, a key
   press or a drop anywhere on it reaches the native control */
.dropzone {
  position: relative;
  display: grid;
  gap: 0.35rem;
  justify-items: center;
  padding: clamp(1.4rem, 3vw, 2rem) 1.2rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.dropzone:hover, .dropzone.is-over { border-color: var(--ink); }

.dropzone.is-over {
  border-style: solid;
  background: color-mix(in srgb, var(--ink) 7%, transparent);
}

.dropzone:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }

.contact-form .dropzone input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.dropzone-text { font-size: 0.95rem; color: var(--ink); }

.dropzone-text span { text-decoration: underline; text-underline-offset: 0.2em; }

.dropzone-hint { font-size: 0.8rem; color: var(--ink-faint); }

.file-list { list-style: none; display: grid; gap: 0.4rem; }

.file-list li {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

.file-list .file-name { color: var(--ink); overflow-wrap: anywhere; }

.file-list .file-meta { font-family: var(--mono); font-size: 0.68rem; color: var(--ink-faint); white-space: nowrap; }

.file-remove {
  margin-left: auto;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.file-remove:hover { color: var(--ink); }

.form-status[data-state="error"] { color: #e0876f; border-color: #e0876f; }

/* ---------- Request sent: confirmation dialog ---------- */

.sent {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(30rem, calc(100vw - 2rem));
  border: 1px solid var(--hairline);
  border-radius: calc(var(--radius) + 4px);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 30px 80px var(--shadow);
}

.sent[open] { animation: sent-in 0.5s var(--ease) both; }

.sent::backdrop {
  background: rgba(var(--scrim), 0.66);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

@keyframes sent-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
}

/* A compass: the ring draws, the needle swings wide, hunts and settles
   on its heading, then keeps a faint tremor like a real card at sea */
.sent-art {
  display: grid;
  place-items: center;
  padding-top: clamp(1.8rem, 6vw, 2.4rem);
}

.sent-compass {
  width: clamp(120px, 34vw, 150px);
  height: auto;
  overflow: visible;
}

.sent-compass * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sent-compass text {
  fill: currentColor;
  stroke: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0;
  text-anchor: middle;
  opacity: 0.75;
}

.sent-ring { stroke-dasharray: 1; stroke-dashoffset: 1; }

.sent-ticks { opacity: 0; }

.sent-needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(36deg); }

.sent-compass .sent-needle-north { fill: currentColor; }

.sent-compass .sent-pivot { fill: var(--surface); }

.sent[open] .sent-ring { animation: sent-draw 1.1s cubic-bezier(0.45, 0, 0.2, 1) 0.15s forwards; }

.sent[open] .sent-ticks { animation: sent-fade 0.7s ease 0.7s forwards; }

.sent[open] .sent-needle {
  animation: sent-seek 3s cubic-bezier(0.3, 0, 0.2, 1) 0.3s both, sent-tremor 4.5s ease-in-out 3.4s infinite;
}

@keyframes sent-draw { to { stroke-dashoffset: 0; } }

@keyframes sent-fade { to { opacity: 1; } }

@keyframes sent-seek {
  0% { transform: rotate(-150deg); }
  35% { transform: rotate(60deg); }
  52% { transform: rotate(20deg); }
  66% { transform: rotate(45deg); }
  78% { transform: rotate(31deg); }
  88%, 100% { transform: rotate(36deg); }
}

@keyframes sent-tremor {
  0%, 100% { transform: rotate(36deg); }
  30% { transform: rotate(34.2deg); }
  65% { transform: rotate(37.6deg); }
}

.sent-body {
  display: grid;
  gap: 1rem;
  justify-items: center;
  padding: clamp(1.4rem, 4vw, 1.8rem) clamp(1.3rem, 5vw, 2.2rem) clamp(1.6rem, 5vw, 2.1rem);
  text-align: center;
}

.sent-title {
  font-family: var(--serif);
  font-size: calc(clamp(1.5rem, 5.2vw, 2rem) * var(--display-scale) * 1.2);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}

.sent-title i {
  font-family: var(--accent);
  font-size: 1.2em;
  font-style: italic;
  font-weight: 300;
  line-height: 1;
  text-transform: none;
}

.sent-text { max-width: 38ch; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }

.sent-body form { margin-top: 0.4rem; }

@media (prefers-reduced-motion: reduce) {
  .sent[open] .sent-ring { animation: none; stroke-dashoffset: 0; }
  .sent[open] .sent-ticks { animation: none; opacity: 1; }
  .sent[open] .sent-needle { animation: none; }
}

/* ---------- FAQ ---------- */

.faq { max-width: 820px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; border-top: 1px solid var(--hairline); }

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

.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: 1.4rem;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.5vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.faq summary::-webkit-details-marker { display: none; }

.faq details[open] .reg-arrow { transform: rotate(45deg); }

.faq p { color: var(--ink-soft); max-width: 62ch; padding-bottom: 1.6rem; }

.faq p a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.contact-form input:hover,
.contact-form textarea:hover,
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { border-color: var(--ink); }

.contact-form-foot {
  grid-column: 1 / -1;
  display: grid;
  gap: 1rem;
  justify-items: start;
  margin-top: 0.4rem;
}

.form-note { font-size: 0.85rem; color: var(--ink-faint); }

/* ---------- Page hero (inner pages) ---------- */

.page-hero {
  padding-top: calc(var(--header-h) + clamp(3rem, 7vw, 5rem));
  text-align: center;
}

.page-hero .eyebrow { display: inline-block; margin-bottom: 2rem; }

.page-hero .display {
  font-size: calc(clamp(2.5rem, 6vw, 5rem) * var(--display-scale));
  max-width: 18ch;
  margin-inline: auto;
}

.page-hero .lead { margin: 1.8rem auto 0; }

/* ---------- Services (family list style) ---------- */

.family {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 520px;
  display: flex;
  align-items: flex-end;
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  background: rgb(var(--scrim));
}

.family img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}

.family:hover img { transform: scale(1.04); }

.family::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(var(--scrim), 0.94) 12%, rgba(var(--scrim), 0.78) 38%, rgba(var(--scrim), 0.4) 62%, transparent 88%);
}

.family-caption {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: clamp(1.8rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.4rem;
  color: var(--on-photo);
}

.family-caption .idx {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--on-photo-dim);
  display: block;
  margin-bottom: 0.8rem;
}

.family-caption h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(clamp(1.7rem, 3.4vw, 2.8rem) * var(--display-scale));
  text-transform: uppercase;
  line-height: 1.05;
}

.family-caption p {
  margin-top: 0.8rem;
  max-width: 52ch;
  color: var(--on-photo-soft);
  font-size: 0.98rem;
}

/* ---------- Process ---------- */

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.6rem, 3vw, 2.6rem);
  counter-reset: step;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.process-step {
  border-top: 1px solid var(--hairline);
  padding-top: 1.6rem;
  position: relative;
}

.process-step::before {
  counter-increment: step;
  content: "[ 0" counter(step) " ]";
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 0.9rem;
}

.process-step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.35rem;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.process-step p { color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Portfolio ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.filter-btn {
  background: none;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 0.65rem 1.6rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.35s ease;
}

.filter-btn:hover { border-color: var(--ink-faint); color: var(--ink); }

.filter-btn.is-active { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.masonry {
  columns: 3;
  column-gap: clamp(1.2rem, 2vw, 1.8rem);
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: clamp(1.2rem, 2vw, 1.8rem);
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius);
}

.masonry-item img {
  width: 100%;
  height: auto;
  transition: transform 1.2s var(--ease);
}

.masonry-item::after {
  content: attr(data-caption);
  position: absolute;
  inset: auto 0 0 0;
  padding: 2.4rem 1.4rem 1.2rem;
  background: linear-gradient(to top, rgba(var(--scrim), 0.85), transparent);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-photo);
  text-align: left;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.masonry-item:hover::after,
.masonry-item:focus-visible::after { opacity: 1; }

.masonry-item:hover img,
.masonry-item:focus-visible img { transform: scale(1.05); }

.masonry-item.is-hidden { display: none; }

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(var(--scrim), 0.94);
  backdrop-filter: blur(10px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 4rem);
}

.lightbox.is-open { display: flex; }

.lightbox img {
  max-width: 100%;
  max-height: 86vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  background: none;
  border: 1px solid rgba(255, 247, 238, 0.4);
  border-radius: 50%;
  color: var(--on-photo);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.05rem;
  transition: all 0.3s ease;
}

.lightbox-close:hover,
.lightbox-nav:hover { background: var(--on-photo); color: var(--blu-notte); }

.lightbox-close { top: 1.4rem; right: 1.4rem; }
.lightbox-nav.prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 1.4rem; top: 50%; transform: translateY(-50%); }

/* ---------- Atelier ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.split figure {
  border-radius: var(--radius);
  overflow: hidden;
}

.split img {
  width: 100%;
  aspect-ratio: 4 / 3.4;
  object-fit: cover;
}

/* One tall photo with two stacked beside it. The right column sets the
   height; the tall photo fills whatever that comes to. */
.split-media {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(0.5rem, 1vw, 0.9rem);
}

.split-media figure { position: relative; }

.split-media figure:first-child { grid-row: span 2; }

.split-media img { aspect-ratio: 5 / 4; }

.split-media figure:first-child img {
  position: absolute;
  inset: 0;
  height: 100%;
  aspect-ratio: auto;
}

.split .copy { display: grid; gap: 1.5rem; }

.split .copy .display { font-size: calc(clamp(1.9rem, 3.8vw, 3.1rem) * var(--display-scale)); }

.craft-list {
  list-style: none;
  display: grid;
  gap: 1rem;
}

.craft-list li {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1rem;
  color: var(--ink-soft);
  font-size: 0.97rem;
}

/* Craft items can be links (home -> tecnologia.html anchors) */
.craft-list a {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  width: 100%;
  color: inherit;
}

.craft-list a .arrow {
  margin-left: auto;
  transition: transform 0.3s var(--ease);
}

.craft-list a:hover .arrow,
.craft-list a:focus-visible .arrow { transform: translateX(4px); }

.craft-list a:hover b { text-decoration: underline; text-underline-offset: 4px; }

/* Anchored tech sections land below the fixed header */
#piano-da-taglio, #proliner, #mani-esperte, #news { scroll-margin-top: var(--header-h); }

.split--flip figure { order: 2; }

@media (max-width: 860px) {
  .split--flip figure { order: 0; }
}

.craft-list b {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.06rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

.gallery-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.gallery-duo figure { border-radius: var(--radius); overflow: hidden; }

.gallery-duo img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.gallery-duo figure:hover img { transform: scale(1.05); }

.gallery-duo figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.9rem 0.2rem 0;
}

/* ---------- Our heritage: chapter narrative (atelier) ---------- */

.story {
  position: relative;
  isolation: isolate;
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4rem));
  padding-bottom: clamp(4rem, 8vw, 6.5rem);
}

.story > .container { position: relative; z-index: 1; }

.story-chapter {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(3.5rem, 9vw, 9rem);
  align-items: center;
}

/* photo and copy swap sides from one chapter to the next */
.story-chapter:nth-of-type(even) { grid-template-columns: 1fr 1.1fr; }
.story-chapter:nth-of-type(even) .story-media { order: -1; }

.story-chapter + .story-chapter { margin-top: clamp(6rem, 12vw, 10rem); }

.story-copy { display: grid; gap: 1.6rem; justify-items: start; align-content: start; }

.story-copy .display { font-size: calc(clamp(1.7rem, 3.2vw, 2.6rem) * var(--display-scale)); }

.story-copy h1.display { font-size: calc(clamp(2.5rem, 5.2vw, 4.6rem) * var(--display-scale)); }

/* The opening chapter fills its viewport: tall cover photo, stat rows */
.story-chapter:first-of-type .story-media img {
  width: 100%;
  max-height: none;
  height: clamp(420px, 76svh, 780px);
  object-fit: cover;
}

.story-stats {
  list-style: none;
  display: grid;
  width: 100%;
  max-width: 48ch;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.story-stats li {
  display: flex;
  align-items: baseline;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  padding-block: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid var(--hairline);
}

.story-stats .stat-num {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  color: var(--ink);
  min-width: 3.2em;
}

.story-stats .stat-label { color: var(--ink-soft); }

.story-copy .lead { margin: 0; }

.story-copy .eyebrow:not(:first-child) { margin-top: clamp(2.5rem, 5vw, 4rem); }

.story-media figure {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 0 auto;
}

.story-chapter:nth-of-type(even) .story-media figure { margin: 0 auto 0 0; }

.story-media img {
  display: block;
  max-width: 100%;
  width: auto;
  max-height: min(76svh, 680px);
  border-radius: var(--radius);
}

.story-coda { margin-top: clamp(4rem, 8vw, 7rem); }

.story-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(0.5rem, 1.2vw, 1rem);
}

.story-strip img {
  width: 100%;
  aspect-ratio: 2 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

/* every other photo sits lower, so the row reads as six prints, not one band */
.story-strip img:nth-child(even) { margin-top: clamp(1.2rem, 3vw, 2.5rem); }

.story figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 0.9rem 0.2rem 0;
}

.story-text {
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 48ch;
}

.story-close {
  margin: clamp(3.5rem, 7vw, 6rem) auto 0;
  max-width: 56ch;
  text-align: center;
}

/* ---------- Contacts ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.3rem, 2.4vw, 2rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.team-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 2.2rem 1.8rem;
  display: grid;
  gap: 0.4rem;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px var(--shadow);
}

.team-card .monogram {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid var(--ink-faint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--accent);
  font-style: italic;
  font-weight: 300;
  font-size: 1.55rem;
  color: var(--ink);
  margin-bottom: 1rem;
}

.team-card h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.45rem;
  text-transform: uppercase;
}

.team-card .role {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.team-card .pill { justify-self: start; margin-top: 1.1rem; }

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

.contact-info { display: grid; gap: 1.8rem; }

.contact-block h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.3rem;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.contact-block p, .contact-block a { color: var(--ink-soft); }
.contact-block a:hover { color: var(--ink); }

/* The map is our own drawing of the Darsena (tools/make-map.py), used
   as a mask so it takes the page ink in either theme. No frame: its edges
   fade into the page. */
.map-canvas {
  --map-h: clamp(320px, 62vw, 480px);
  position: relative;
  height: var(--map-h);
  overflow: hidden;
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 66%, transparent 100%);
          mask-image: radial-gradient(ellipse closest-side, #000 66%, transparent 100%);
}

/* Always 16:10 with the showroom at its centre, so labels placed in
   percentages stay on their streets however the canvas is cropped */
.map-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(var(--map-h) * 1.6));
  aspect-ratio: 1.6;
  transform: translate(-50%, -50%);
}

.map-ink {
  position: absolute;
  inset: 0;
  background-color: var(--ink);
  -webkit-mask: url("../art/map-viareggio.svg") center / 100% 100% no-repeat;
          mask: url("../art/map-viareggio.svg") center / 100% 100% no-repeat;
}

.map-label {
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink-faint);
}

.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--ink);
}

.map-pin::before {
  content: "";
  position: absolute;
  inset: -9px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  animation: map-ping 2.8s var(--ease) infinite;
}

@keyframes map-ping {
  from { transform: scale(0.55); opacity: 0.9; }
  to { transform: scale(1.9); opacity: 0; }
}

.map-pin-label {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 0.2rem;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--paper) 80%, transparent);
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
}

.map-pin-label small {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.map-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem 1.5rem;
  padding-top: 0.6rem;
}

.map-credit {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.map-credit:hover { color: var(--ink); }

/* ---------- Footer ---------- */

/* Curtain reveal: the footer sticks to the viewport bottom underneath the
   page; main is opaque and stacked above, so scrolling past the last section
   slides the page away like a curtain. The dots canvas lives inside main so
   it keeps painting above main's background but below its content. */

main {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 24px 48px -12px var(--shadow);
}

.site-footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  background: var(--footer-bg);
  color: var(--footer-fg);
  padding: clamp(4rem, 8vw, 6.5rem) 0 2rem;
  margin-top: calc(-1 * var(--radius));
}

.footer-brandmark {
  display: flex;
  justify-content: center;
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

.footer-brandmark .logo-mark { height: clamp(22px, 3.2vw, 36px); }

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--footer-line);
}

.footer-col h4 {
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--footer-fg-dim);
  margin-bottom: 1.2rem;
}

.footer-col ul { list-style: none; display: grid; gap: 0.6rem; }

.footer-col a, .footer-col li {
  font-size: 0.92rem;
  color: var(--footer-fg-soft);
}

.footer-col a:hover { color: var(--footer-fg); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.8rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--footer-fg-dim);
}

.footer-consent {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}

.footer-consent:hover { color: var(--footer-fg); }

/* ---------- Consent notice ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.consent {
  position: fixed;
  left: clamp(0.75rem, 2vw, 1.5rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  z-index: 250;
  display: grid;
  gap: 0.85rem;
  width: min(24rem, calc(100vw - 1.5rem));
  padding: 1.25rem 1.35rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px var(--shadow);
  color: var(--ink);
  animation: consent-in 0.5s var(--ease) both;
}

.consent[hidden], .consent [hidden] { display: none; }

@keyframes consent-in {
  from { opacity: 0; transform: translateY(14px); }
}

.consent-title {
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.consent-text { padding-right: 1.2rem; font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); }

.consent-text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

.consent-close {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-faint);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.consent-close:hover { color: var(--ink); }

.consent-options { display: grid; border-top: 1px solid var(--hairline); }

.consent-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--ink-soft);
  cursor: pointer;
}

.consent-option b { display: block; font-weight: 500; color: var(--ink); }

/* checkbox drawn as a switch */
.consent-option input {
  -webkit-appearance: none;
          appearance: none;
  position: relative;
  flex: none;
  width: 2.1rem;
  height: 1.2rem;
  margin: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.consent-option input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.16rem;
  width: 0.76rem;
  height: 0.76rem;
  border-radius: 50%;
  background: var(--ink-soft);
  transform: translateY(-50%);
  transition: transform 0.2s var(--ease), background-color 0.2s ease;
}

.consent-option input:checked { background: var(--ink); border-color: var(--ink); }

.consent-option input:checked::after { background: var(--surface); transform: translate(0.9rem, -50%); }

.consent-option input:disabled { opacity: 0.45; cursor: default; }

.consent-option input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Refuse and Accept share one style on purpose: neither is the easier click */
.consent-btn {
  flex: 1 1 0;
  padding: 0.65rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.consent-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.consent-btn--wide { flex-basis: 100%; }

.consent-link {
  flex-basis: 100%;
  padding: 0.25rem 0 0;
  border: 0;
  background: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.consent-link:hover { color: var(--ink); }

/* ---------- Animations: intro, words, parallax, transitions ---------- */

/* Lenis smooth scroll */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* Intro preloader (shown once per session via html.show-intro) */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--paper);
  display: none;
  align-items: center;
  justify-content: center;
}

html.show-intro .preloader { display: flex; }

.preloader .logo-mark {
  height: clamp(46px, 6vw, 66px);
  opacity: 0;
  transform: translateY(18px);
  animation: intro-logo 0.9s var(--ease) 0.15s forwards;
}

@keyframes intro-logo {
  to { opacity: 1; transform: none; }
}

.preloader.is-done {
  transform: translateY(-100%);
  transition: transform 0.85s cubic-bezier(0.7, 0, 0.2, 1) 0.1s;
}

/* Masked word-by-word title reveal.
   Generous padding keeps the wide glyph edges outside the clip box. */
.display .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0.18em 0.1em 0.2em;
  margin: -0.18em -0.1em -0.2em;
}

.display .wi {
  display: inline-block;
  transform: translateY(120%);
  transition: transform 1s var(--ease);
  transition-delay: calc(var(--wi, 0) * 0.045s);
  will-change: transform;
}

.display.words-in .wi { transform: none; }

/* Parallax media */
.plx { will-change: transform; }

/* Page fade transitions */
body { animation: page-in 0.6s ease both; }

@keyframes page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.page-leave {
  animation: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ---------- One-line drawings as background art ---------- */

/* ---------- Threads: the one-line drawings ----------
   A single continuous line, the upholsterer's thread, crosses the page as a
   divider between sections and draws one object on its way. It never sits
   behind text. The path is inlined by tools/build.js; main.js feeds --p
   (0 to 1) from the scroll position so the line draws itself. Without JS,
   or with reduced motion, --p is unset and the drawing shows complete. */

.thread {
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding-block: clamp(1rem, 3vw, 2.5rem);
  color: var(--ink);
}

.thread svg {
  flex: none;
  width: clamp(620px, 76vw, 1180px);
  height: auto;
  overflow: visible;
}

.thread path {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--sw, 2);
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--p, 1));
}

.thread + .section { padding-top: clamp(3rem, 6vw, 5rem); }

/* Halftone dot field, the brand's "punto": a canvas grid where a slow
   blob makes the dots swell at its centre and shrink toward the edges.
   One fixed layer per page; sections with their own background (campaign,
   footer) naturally cover it, so it only shows through open paper areas.
   The drawing code reads `color`, so the theme drives the dot colour. */
/* The wrapper spans main's full box; the sticky canvas inside it tracks
   the viewport while main scrolls but is pushed away with main's bottom
   edge, so it can never paint over the footer revealed underneath. */
.dots-wrap {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.dots {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  user-select: none;
  color: var(--ink);
  opacity: 0.08;
}

/* ---------- Reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--d, 0s);
}

.reveal.in-view { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .trio-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; }
  .masonry { columns: 2; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.6rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.4rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .row-item { grid-template-columns: 150px 1fr auto; }
  .row-tag { display: none; }
}

@media (max-width: 860px) {
  .header-links, .header-cta { display: none; }
  .header-call { display: inline-flex; }
  /* Two controls plus a wide wordmark need the logo to give way first */
  .brand .logo-mark { height: 12px; }
  .header-actions { gap: 0.5rem; }
  .lang-toggle { padding-inline: 0.6rem; font-size: 0.6rem; }
  .lang-toggle, .theme-toggle { width: 34px; height: 34px; }
  .lang-toggle { width: auto; min-width: 34px; }
  .split, .contact-split, .contact-top-grid { grid-template-columns: 1fr; }
  .contact-form { grid-template-columns: 1fr; }
  .story-chapter,
  .story-chapter:nth-of-type(even) { grid-template-columns: 1fr; gap: 2rem; }
  .story-chapter + .story-chapter { margin-top: 4.5rem; }
  .story-media { order: -1; }
  .story-media figure,
  .story-chapter:nth-of-type(even) .story-media figure { margin: 0; }
  .story-strip { grid-template-columns: repeat(3, 1fr); }
  .story-strip img { aspect-ratio: 3 / 5; }
  .story-strip img:nth-child(even) { margin-top: 0; }
  .slider { aspect-ratio: auto; height: 70svh; }
  .family { min-height: 420px; }
}

@media (max-width: 600px) {
  .masonry { columns: 1; }
  .team-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  /* date and place share one line above the title; the arrow keeps its column */
  .row-item { grid-template-columns: 1fr auto; row-gap: 0.5rem; padding-block: 1.3rem; }
  .row-when { grid-column: 1 / -1; font-size: 0.72rem; }
  .row-when small { display: inline; margin-left: 0.8em; font-size: inherit; }
  .row-title { font-size: 0.95rem; }
  .theme-toggle--header { display: none; }
  .theme-toggle--menu { display: inline-flex; }
  .hero-actions .pill { width: 100%; justify-content: center; }
  .faq summary { font-size: 0.9rem; }
  .slide-caption { flex-direction: column; align-items: flex-start; }
  .menu-toggle .label { display: none; }
}

/* ---------- Motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
}