/* =====================================================================
   PLH® USA — SLIM
   The same design system as /neo: fluid type scale, one radius, one easing,
   a page that swings between paper and ink as you scroll. What changes is
   the temperament. NEO's identity is colour; SLIM's is light on metal, so
   this sheet holds no accent hue at all — only paper, ink, and the greys
   that steel, aluminium and brass actually are.
   ===================================================================== */

:root {
  /* paper is the default ground; ink swaps the same four tokens */
  --paper: #F3F2EF;
  --ink:   #0B0B0C;
  --soft:  rgba(11,11,12,.58);
  --faint: rgba(11,11,12,.36);
  --hair:  rgba(11,11,12,.14);

  --f: "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fs-eyebrow: .7rem;
  --fs-body:    clamp(1rem, .96rem + .22vw, 1.1rem);
  --fs-lede:    clamp(1.02rem, .98rem + .35vw, 1.24rem);
  --fs-h1:      clamp(2.4rem, 1.5rem + 4.2vw, 5.6rem);
  --fs-display: clamp(3rem, 1.6rem + 7vw, 9rem);

  --gutter: clamp(1.25rem, 3.4vw, 4rem);
  --maxw:   1360px;
  --section: clamp(5rem, 12vh, 10rem);
  --radius: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-out: cubic-bezier(.23, 1, .32, 1);        /* strong ease-out for UI (/animate) */
  --accent: #8A7162;   /* the plate's own bronze (#6c584d averaged off the shot),
                          lifted a quarter to clear 4.5:1 on black */
}

html[data-tone="ink"] {
  color-scheme: dark;
  --paper: #000000;   /* pure black: the hero shot carries its own black ground,
                         and any lighter tone draws a rectangle around it */
  --ink:   #F3F2EF;
  --soft:  rgba(243,242,239,.62);
  --faint: rgba(243,242,239,.38);
  --hair:  rgba(243,242,239,.16);
}
html[data-tone="paper"] { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* no `scroll-behavior: smooth` — it fights Lenis (two smoothings = lag) */

body {
  margin: 0;
  font-family: var(--f);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  transition: background-color .7s var(--ease), color .7s var(--ease);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, ul, li, figure, blockquote, figcaption { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
sup { font-size: .5em; vertical-align: super; }
em { font-style: normal; color: var(--faint); }   /* the second voice of a headline */

section { background: transparent; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--ink); color: var(--paper); padding: .6rem 1rem; }
.skip:focus { left: 0; }

/* ------------------------------------------------------------ type */
/* the eyebrow speaks, it does not label: sentence case, ink, a size you can
   read from a chair — a line that introduces the headline rather than
   filing it */
.eyebrow {
  font-size: clamp(1.02rem, .95rem + .4vw, 1.3rem); line-height: 1.3;
  font-weight: 600; letter-spacing: -.012em; color: var(--ink);
}
.h1 { font-size: var(--fs-h1); font-weight: 600; line-height: .98; letter-spacing: -.035em; }
.h1--set { font-size: clamp(2.2rem, 1.3rem + 3.5vw, 4.7rem); }   /* a headline that has a paragraph to make room for */
.display { font-size: var(--fs-display); font-weight: 600; line-height: .9; letter-spacing: -.045em; }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--soft); max-width: 46ch; }

/* reveals: only elements that start off-screen get them (set in JS) */
[data-rise].will-rise { opacity: 0; transform: translateY(26px); }
[data-rise].risen { opacity: 1; transform: none; transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }

/* the preloader's own styles are inline in <head>, so they paint first */

/* each line of the payoff rises out of its own mask on entry */
.line-mask { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.line { display: block; }

/* ------------------------------------------------------------ header */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(.9rem, 2vw, 1.5rem) var(--gutter);
  transition: transform .3s var(--ease-out);
}
.hdr.is-hidden { transform: translateY(-110%); }
.hdr__mark svg { width: 30px; height: auto; fill: var(--ink); transition: fill .7s var(--ease); }
.hdr__nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.hdr__nav a { font-size: .82rem; color: var(--soft); transition: color .2s ease; }
.hdr__nav a.hdr__cta {
  padding: .5rem 1.05rem; border-radius: 999px; color: var(--ink);
  border: 1px solid var(--hair);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, scale .16s var(--ease-out);
}

/* ------------------------------------------------------------- hero */
.hero { min-height: 100svh; display: grid; align-items: center; }
.hero__stage {
  position: relative;
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding: clamp(7rem, 15vh, 10rem) var(--gutter) clamp(3rem, 8vh, 5rem);
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: clamp(2rem, 5vw, 5rem);
}

/* The media slot: a still today, a video tomorrow — same box either way.
   Nothing is laid over it: the shot carries its own black ground, and any
   gradient on top would read as a wash across the rectangle. */
.hero__media { position: relative; margin: 0; justify-self: center; }
.hero__media img,
.hero__media video { width: auto; max-height: min(74vh, 700px); }

/* The three states share one box once JS is in charge; the class is set
   inline in <head> so they never flash stacked before the swap. Without
   JS — or without GSAP, if the CDN is blocked — they stack as plain copy
   and every line stays readable. */
.hero__copy { display: grid; gap: 1.6rem; align-content: center; }
.js .hero__copy { grid-template-rows: auto minmax(0, 1fr); }
.js .hero__state {
  grid-row: 2; grid-column: 1; align-self: center;
  opacity: 0; transform: translateY(18px); pointer-events: none;
  transition: opacity .5s var(--ease), transform .6s var(--ease);
}
.js .hero__state.is-on { opacity: 1; transform: none; pointer-events: auto; }
.js.no-gsap .hero__state { grid-row: auto; opacity: 1; transform: none; }
.js.no-gsap .hero__copy { gap: 2.6rem; }
.js.no-gsap .hero__state--name { position: static; grid-column: 1 / -1; margin-top: 2.6rem; }
.js.no-gsap .wordmark span { background-position: 0 100%; }

.display em { color: var(--accent); }

/* Lifted verbatim from /neo: .hero__quote and .hero__big. Same weight, same
   tracking, same leading — the two landings are one family. */
.quote { font-size: clamp(2.7rem, 1.5rem + 4.8vw, 4.6rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.06; max-width: 16ch; }
.quote p { font: inherit; letter-spacing: inherit; }
.quote footer { margin-top: 1.4rem; font-size: .32em; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--soft); }
.triad { display: grid; }
.triad li { font-size: clamp(2.8rem, 1.6rem + 5.2vw, 6.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1; }

/* The signature: everything NEO's is not. NEO lands as solid mass; this one
   arrives hollow — a hairline whatever the type size — and then fills, letter
   by letter, from the bottom up. Four letters on four beats, because the plate
   has four keys and it is handing them over. */
.js .hero__state--name,
.hero__state--name {
  position: absolute; inset: 0; z-index: 3;
  grid-area: 1 / 1 / -1 / -1;   /* without this the cell, not the stage, is the containing block */
  display: grid; place-items: center; text-align: center;
}
.wordmark { font-size: clamp(4.5rem, 21vw, 18rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.wordmark span {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--ink);
  /* a hard stop, not a blend: the fill has an edge that travels */
  background-image: linear-gradient(to top, var(--ink) 50%, rgba(0,0,0,0) 50%);
  background-size: 100% 200%;
  background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  transition: background-position 1.05s var(--ease);
}
.hero__state--name.is-on .wordmark span { background-position: 0 100%; }
.hero__state--name.is-on .wordmark span:nth-child(2) { transition-delay: .13s; }
.hero__state--name.is-on .wordmark span:nth-child(3) { transition-delay: .26s; }
.hero__state--name.is-on .wordmark span:nth-child(4) { transition-delay: .39s; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark span { color: var(--ink); }
}

/* and the plate hands over: it wipes itself away upward, on the same beat */
.hero__media { transition: clip-path .95s var(--ease); clip-path: inset(0 0 0 0); }
.hero.is-name .hero__media { clip-path: inset(0 0 100% 0); }


/* -------------------------------------------------------------- rail */
.rail { overflow: hidden; }
.rail__pin { height: 100svh; display: flex; align-items: center; }
.rail__track {
  display: flex; align-items: center; gap: clamp(2rem, 4vw, 4rem);
  width: max-content; padding: 0 var(--gutter);
  will-change: transform;
}
.rail__item { flex: 0 0 auto; }
.rail__item img { height: min(70vh, 680px); width: auto; }
@media (max-width: 860px) {
  .rail__pin { height: auto; padding: clamp(3rem, 8vh, 5rem) 0; }
  .rail__track {
    width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-bottom: .5rem;
  }
  .rail__track::-webkit-scrollbar { display: none; }
  .rail__item { scroll-snap-align: center; }
  .rail__item img { height: 52vh; }
  /* with GSAP in charge the strip pins and the scroll pans it, as on desktop */
  .rail.is-pinned .rail__pin { height: 100svh; padding: 0; }
  .rail.is-pinned .rail__track { width: max-content; overflow: visible; scroll-snap-type: none; padding-bottom: 0; }
  .rail.is-pinned .rail__item img { height: 58svh; }
}

/* --------------------------------------------------------- manifesto */
.manifesto {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--section) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vh, 2.6rem) clamp(2rem, 5vw, 5rem); align-items: center;
}
.manifesto .h1 { grid-column: 1; grid-row: 1; }
.manifesto__shot { grid-column: 2; grid-row: 1; margin: 0; justify-self: center; }
.manifesto__shot img { width: min(100%, 520px); height: auto; }
.manifesto .lede { grid-column: 2; grid-row: 2; max-width: 40ch; justify-self: center; }

/* --------------------------------------------------------- thickness */
.thick {
  max-width: var(--maxw); margin: 0 auto;
  padding: var(--section) var(--gutter);
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.thick__head { display: grid; gap: 1.4rem; justify-items: start; }
.thick__head .lede { max-width: 54ch; margin-top: .4rem; }

/* The drawing. Hairlines, a centre axis, a dimension pair: the vocabulary of
   a technical elevation, because that is what a specifier reads. The profile
   extrudes out of the wall as the section scrolls into place, and the number
   counts with it. Every stroke also stands still on its own if nothing runs. */
/* Three beats across the section: the argument, the object, the measurement.
   With the number under the drawing the right half fell away empty; beside it,
   the pair reads the way a dimensioned plate does. */
.draw {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: clamp(1.4rem, 3vw, 3rem);
  align-items: center;
}
.draw__wf {
  grid-column: 1; grid-row: 1 / span 2;
  width: auto; height: min(62vh, 540px); max-width: 100%; overflow: visible;
}
.draw .ln { fill: none; stroke: var(--ink); stroke-width: 1.1; }
.draw .ax { stroke: var(--ink); stroke-width: .6; opacity: .3; stroke-dasharray: 14 4 2 4; }
.draw .ext,
.draw .dim { stroke: var(--ink); stroke-width: .7; fill: none; }
.draw .wall { stroke: var(--ink); stroke-width: 1.1; opacity: .45; }
.draw .ext { opacity: .5; }
.draw .face { fill: var(--ink); fill-opacity: .12; stroke: var(--ink); stroke-width: 1.1; }
.draw .tx {
  fill: var(--faint); font-family: var(--f); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
}
.draw__num {
  grid-column: 2; grid-row: 1; align-self: end;
  display: flex; align-items: baseline; gap: .8rem;
  font-size: clamp(3rem, 2rem + 5vw, 7rem); font-weight: 600; letter-spacing: -.05em; line-height: .9;
}
.draw__num i { font-style: normal; font-size: .42em; vertical-align: super; margin-left: -.1em; color: var(--faint); }
.draw__sub { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }
.draw figcaption { grid-column: 2; grid-row: 2; align-self: start; padding-top: 1.1rem; font-size: .88rem; color: var(--soft); max-width: 30ch; }

/* ---------------------------------------------------- configurations */
.cfg, .surf, .sys, .proj {
  max-width: var(--maxw); margin: 0 auto; padding: var(--section) var(--gutter);
}
.cfg__head .lede, .surf__head .lede { max-width: 58ch; }
.cfg__head, .surf__head, .sys__head, .proj__head { display: grid; gap: 1.4rem; justify-items: start; margin-bottom: clamp(2.5rem, 7vh, 5rem); }
.cfg__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); }
.cfg__art { padding: clamp(1rem, 3vh, 2rem) 0; display: grid; place-items: center; }
.cfg__art img { width: min(100%, 440px); height: auto; }
.cfg__item h3 { margin: 1.4rem 0 .5rem; font-size: 1.24rem; font-weight: 600; letter-spacing: -.02em; }
.cfg__item p { color: var(--soft); font-size: .95rem; max-width: 30ch; }

/* ------------------------------------------------------- orientation */
.orient[hidden], .proj[hidden] { display: none; }
.orient {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) var(--section);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.orient__head { display: grid; gap: 1.6rem; justify-items: start; }
.orient__ctrl { display: flex; gap: .6rem; }
.pill {
  font: inherit; font-size: .82rem; cursor: pointer;
  padding: .55rem 1.1rem; border-radius: 999px;
  background: transparent; color: var(--soft); border: 1px solid var(--hair);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, scale .16s var(--ease-out);
}
.pill.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.orient__stage {
  position: relative; display: grid; place-items: center;
  min-height: clamp(340px, 56vh, 560px); touch-action: pan-y;   /* vertical scroll stays the page's */
}
.orient__stage canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; }
.orient__stage canvas:active { cursor: grabbing; }
.orient__stage.is-3d .orient__plate { display: none; }        /* the CSS plate hands over */
.orient__hint {
  position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%);
  display: none; align-items: center; gap: .5rem; pointer-events: none;
  font-size: .78rem; letter-spacing: .04em; color: var(--faint);
  transition: opacity .5s var(--ease);
}
.orient__hint span { font-size: 1rem; line-height: 1; }
.orient__stage.is-3d .orient__hint { display: flex; }
.orient__hint.is-gone { opacity: 0; }
.orient__plate {
  width: 120px; height: 360px; border-radius: 6px;
  border: 1px solid var(--hair);
  background: linear-gradient(115deg, rgba(255,255,255,.06), rgba(255,255,255,.14) 45%, rgba(255,255,255,.03));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 26px 18px;
  transition: width .9s var(--ease), height .9s var(--ease), flex-direction 0s;
}
.orient__key { flex: 1; width: 100%; border-radius: 3px; background: var(--ink); opacity: .18; }
.orient__stage.is-h .orient__plate { width: 360px; height: 120px; flex-direction: row; padding: 18px 26px; }

/* ---------------------------------------------------------- surfaces */

/* ------------------------------------------------------ architecture */
.arch { position: relative; min-height: 100svh; display: grid; align-items: end; }
.arch__shot { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.arch__shot img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.03); }   /* the shot is dark already: the white plate stays white */
.arch__shot::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6,6,7,.85) 0%, rgba(6,6,7,.35) 38%, rgba(6,6,7,0) 65%);
}
.arch__copy { position: relative; z-index: 2; max-width: var(--maxw); width: 100%; margin: 0 auto; padding: var(--section) var(--gutter); }
.arch__copy .h1 { color: #F3F2EF; text-shadow: 0 2px 40px rgba(0,0,0,.5); }
.arch__copy em { color: rgba(243,242,239,.6); }

/* ----------------------------------------------------------- systems */
.sys__brands[hidden] { display: none; }
.sys__brands {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; padding-bottom: clamp(3rem, 8vh, 5rem); border-bottom: 1px solid var(--hair);
}
.sys__brands img { width: auto; max-width: 100%; max-height: 26px; margin: 0 auto; opacity: .5; filter: grayscale(1); transition: opacity .4s var(--ease); }
html[data-tone="ink"] .sys__brands img { filter: grayscale(1) invert(1); }

.faq { margin-top: clamp(2rem, 6vh, 4rem); }
.faq details { border-bottom: 1px solid var(--hair); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.4rem 2.5rem 1.4rem 0; position: relative;
  font-size: clamp(1.05rem, .98rem + .5vw, 1.4rem); font-weight: 500; letter-spacing: -.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%; width: 12px; height: 12px;
  border-right: 1.5px solid var(--soft); border-bottom: 1.5px solid var(--soft);
  transform: translateY(-70%) rotate(45deg); transition: transform .4s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq__a { padding: 0 3rem 1.6rem 0; color: var(--soft); max-width: 66ch; display: grid; gap: .75em; }
.faq__a ul { list-style: disc; padding-left: 1.2em; display: grid; gap: .3em; }
.faq__a strong { color: var(--ink); font-weight: 600; }
.faq__a a { text-decoration: underline; text-underline-offset: .18em; }

/* ---------------------------------------------------------- projects */
.proj__rail {
  display: flex; gap: clamp(1rem, 2vw, 1.6rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1.5rem; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: none;
}
.proj__rail::-webkit-scrollbar { display: none; }
.proj__rail li { flex: 0 0 min(72vw, 620px); scroll-snap-align: start; }
.proj__rail figure { margin: 0; }
.proj__frame { display: block; overflow: hidden; }
.proj__rail img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  filter: grayscale(1) contrast(1.04);
  -webkit-user-drag: none; user-select: none;
}
.proj__rail figcaption { display: flex; justify-content: space-between; gap: 1rem; padding-top: .9rem; font-size: .88rem; }
.proj__rail figcaption span { color: var(--faint); text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-eyebrow); align-self: center; }
.proj__seg {
  display: flex; flex-wrap: wrap; gap: .6rem; margin-top: clamp(2.5rem, 6vh, 4rem);
}
.proj__seg li { border: 1px solid var(--hair); border-radius: 999px; padding: .5rem 1.05rem; font-size: .82rem; color: var(--soft); }

/* --------------------------------------------------------- datasheet */
.ask {
  max-width: var(--maxw); margin: 0 auto; padding: var(--section) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start;
}
.ask__copy { display: grid; gap: 1.4rem; justify-items: start; }
.ask__form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; }
.hp { position: absolute; left: -9999px; }
.fld { display: grid; gap: .4rem; }
.fld--wide { grid-column: 1 / -1; }
.fld label { font-size: var(--fs-eyebrow); letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.fld input[type="text"], .fld input[type="email"] {
  font: inherit; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--hair); padding: .55rem 0;
  transition: border-color .35s var(--ease);
}
.fld input:focus { outline: none; border-bottom-color: var(--ink); }
.fld--consent { grid-column: 1 / -1; display: flex; align-items: center; gap: .7rem; }
.fld--consent label { text-transform: none; letter-spacing: 0; font-size: .9rem; color: var(--soft); }
.fld--consent input {
  appearance: none; -webkit-appearance: none; flex: 0 0 auto;
  width: 16px; height: 16px; border: 1px solid var(--hair); border-radius: 3px;
  background: transparent; display: grid; place-items: center; cursor: pointer;
}
.fld--consent input:checked { background: var(--ink); border-color: var(--ink); }
.fld--consent input:checked::after {
  content: ""; width: 9px; height: 5px; margin-top: -2px;
  border-left: 2px solid var(--paper); border-bottom: 2px solid var(--paper);
  transform: rotate(-45deg);
}
.btn {
  grid-column: 1 / -1; justify-self: start; font: inherit; font-weight: 600; cursor: pointer;
  padding: .9rem 1.7rem; border-radius: 999px;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink);
  transition: background-color .2s ease, color .2s ease, scale .16s var(--ease-out);
}
.btn[disabled] { opacity: .5; cursor: default; }
.ask__status { grid-column: 1 / -1; font-size: .92rem; color: var(--soft); min-height: 1.4em; }

/* ------------------------------------------------------------ footer */
.ftr {
  max-width: var(--maxw); margin: 0 auto; overflow: hidden;
  padding: clamp(2rem, 5vh, 3rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
  border-top: 1px solid var(--hair);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
}
.ftr__line, .ftr__nav a { font-size: .84rem; color: var(--soft); }
.ftr__nav { display: flex; flex-wrap: wrap; gap: 1.4rem; }
.ftr__nav a { transition: color .2s ease; }

/* -------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .cfg__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .surf__grid { grid-template-columns: repeat(2, 1fr); }
  .sys__brands { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .hero__stage { grid-template-columns: 1fr; gap: 2.5rem; padding-top: clamp(6rem, 14vh, 9rem); }
  /* Phones get their own shot, the white plate on a dark wall, as the
     ground of the whole first screen: the payoff sits on it, low and left,
     clear of the plate. Only the bottom edge fades, so the photo runs into
     the black page instead of stopping on a line. */
  .hero__stage { padding-top: 0; }
  .hero__media { position: absolute; top: 0; left: 0; right: 0; height: 100svh; z-index: 0; overflow: hidden; }
  .hero__media::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 62%, rgba(0,0,0,.55) 86%, #000 100%); }
  .hero__media img,
  .hero__media video { display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: 64% 40%; }
  .hero__copy { position: relative; z-index: 1; }
  .hero__media { transition: none; will-change: clip-path; }   /* the scroll drives the mask here */
  .wordmark { font-size: 32vw; }
  /* pinned: the states share one cell at the foot of the screen */
  .js .hero__copy { min-height: 100svh; grid-template-rows: minmax(0, 1fr) auto; padding-bottom: clamp(2.5rem, 7svh, 4rem); }
  .js .hero__state { align-self: end; }
  .js .hero__state--name { align-self: stretch; }
  .quote { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 3rem); }
  .triad li { font-size: clamp(2.4rem, 1.4rem + 5vw, 3.4rem); }
  /* stacked (no GSAP, reduced motion): only the payoff sits on the shot */
  .js.no-gsap .hero__copy { min-height: 0; padding-bottom: 0; }
  .js.no-gsap .hero__state[data-state="0"] { min-height: 100svh; display: flex; align-items: flex-end; padding-bottom: clamp(2.5rem, 7svh, 4rem); }
  .thick, .orient, .ask { grid-template-columns: 1fr; }
  .draw { grid-template-columns: 1fr; grid-template-rows: auto auto auto; row-gap: 1.4rem; justify-items: start; }
  .draw__wf { grid-column: 1; grid-row: 1; height: 46vh; }
  .draw__num { grid-column: 1; grid-row: 2; align-self: start; }
  .draw figcaption { grid-column: 1; grid-row: 3; padding-top: 0; }
  .manifesto { grid-template-columns: 1fr; }
  .manifesto .h1, .manifesto__shot, .manifesto .lede { grid-column: 1; grid-row: auto; justify-self: start; }
  .ask__form { grid-template-columns: 1fr; }
  .hdr__nav a:not(.hdr__cta) { display: none; }
  .proj__rail li { flex-basis: 84vw; }
}

/* ===================================================== premium layer
   One idea throughout: every reveal goes from a line to a surface. Headlines
   rise word by word out of their own masks; drawings and photographs open
   like a plate being uncovered; the name fills at the start and at the end.
   Motion is transform, opacity and clip-path only. */

/* split headings (built in JS; the h2 keeps its full text as aria-label) */
.w-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.w { display: inline-block; will-change: transform; }
[data-split="scrub"] .w { will-change: opacity; }

/* a hairline of bronze that measures the page */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 1px; z-index: 95; pointer-events: none;
  background: var(--accent); transform: scaleX(0); transform-origin: 0 50%;
}

/* configurations: the drawing is uncovered left to right, one after another */
.cfg__item .cfg__art img { clip-path: inset(0 0 0 0); }
.cfg__item.will-rise .cfg__art img { clip-path: inset(0 100% 0 0); }
.cfg__item.risen .cfg__art img { clip-path: inset(0 0 0 0); transition: clip-path 1.4s var(--ease) calc(.18s + var(--d, 0ms)); }

/* phones: one frame you swipe, arrows bottom-right (main.js adds
   .is-carousel and the nav; without it the column stays as it was) */
.cfg__grid.is-carousel {
  grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 100%; gap: 0;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cfg__grid.is-carousel::-webkit-scrollbar { display: none; }
.cfg__grid.is-carousel .cfg__item { scroll-snap-align: start; scroll-snap-stop: always; }
.cfg__grid.is-carousel .cfg__item p { max-width: 34ch; }
.cfg__grid.is-carousel:focus-visible { outline: 1px solid var(--faint); outline-offset: 6px; }
.cfg__nav { display: flex; align-items: center; justify-content: flex-end; gap: .7rem; margin-top: 2rem; }
.cfg__count { margin-right: auto; font-size: .74rem; letter-spacing: .14em; color: var(--faint); }
.cfg__count b { font-weight: 400; color: var(--ink); }
.cfg__arrow {
  width: 48px; height: 48px; display: grid; place-items: center; padding: 0;
  border: 1px solid rgba(243,242,239,.5); border-radius: 50%; background: none; color: #fff; cursor: pointer;
  transition: opacity .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.cfg__arrow svg { width: 20px; height: 20px; }
.cfg__arrow:active:not(:disabled) { transform: scale(.94); }
.cfg__arrow:disabled { opacity: .28; cursor: default; }
.cfg__arrow:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .cfg__arrow:hover:not(:disabled) { border-color: #fff; }
}


/* architecture: the photograph opens from an inset frame to full bleed (JS) */
.arch__shot { will-change: clip-path; }
.arch__shot img { will-change: transform; }

/* the finish chips exist only when there is a 3D plate to dress */
.orient__finish { display: none; flex-wrap: wrap; gap: .5rem; }
.orient.has-3d .orient__finish { display: flex; }
.chip {
  font: inherit; font-size: .8rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem .45rem .5rem; border-radius: 999px;
  background: transparent; color: var(--soft); border: 1px solid var(--hair);
  transition: color .2s ease, border-color .2s ease, scale .16s var(--ease-out);
}
.chip.is-on { color: var(--ink); border-color: var(--ink); }
.chip__dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.chip__dot--bronze { background: linear-gradient(135deg, #8a7162, #5a463a 55%, #7b6456); }
.chip__dot--silver { background: linear-gradient(135deg, #e8eaec, #9aa0a6 55%, #cfd3d7); }
.chip__dot--inox   { background: linear-gradient(135deg, #d4d2cc, #8e8c86 55%, #bdbbb5); }
.chip__dot--black  { background: linear-gradient(135deg, #4d4f53, #111214 55%, #2f3134); }
.chip__dot--brass  { background: linear-gradient(135deg, #e0cf9f, #9c844f 55%, #c9b27a); }

/* projects: a draggable strip, the photographs sliding inside their frames */
.proj__rail { cursor: grab; }
.proj__rail.is-drag { cursor: grabbing; scroll-snap-type: none; }
.proj__rail.is-drag a, .proj__rail.is-drag img { pointer-events: none; }
.proj__frame img { transform: scale(1.12); will-change: transform; }
.proj__rail figcaption strong { font-weight: 600; }

/* a label that follows the pointer where the page can be dragged */
.cursor { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; }
.cursor__pill {
  display: grid; place-items: center; width: 74px; height: 74px; margin: -37px 0 0 -37px;
  border-radius: 50%; background: var(--ink); color: var(--paper);
  font-size: .72rem; font-weight: 600; letter-spacing: .04em;
  opacity: 0; transform: scale(.6);
  transition: opacity .2s var(--ease-out), transform .25s var(--ease-out), background-color .7s var(--ease), color .7s var(--ease);
}
.cursor.is-on .cursor__pill { opacity: 1; transform: scale(1); }
.cursor.is-on.is-down .cursor__pill { transform: scale(.86); }
@media not all and (hover: hover) and (pointer: fine) { .cursor { display: none; } }

/* focus: visible, thin, bronze — for everyone who arrives by keyboard */
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.pill:focus-visible, .chip:focus-visible, .btn:focus-visible, .hdr__cta:focus-visible { border-radius: 999px; }
.proj__rail:focus-visible { outline-offset: -2px; border-radius: 0; }

/* press feedback: the interface heard you */
.pill:active, .chip:active, .btn:active, .hdr__nav a.hdr__cta:active { scale: .97; }

/* hover only where a real pointer hovers (touch fires false hovers on tap) */
@media (hover: hover) and (pointer: fine) {
  .hdr__nav a:hover, .ftr__nav a:hover { color: var(--ink); }
  .hdr__nav a.hdr__cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .btn:hover { background: transparent; color: var(--ink); }
  .pill:not(.is-on):hover, .chip:not(.is-on):hover { color: var(--ink); border-color: var(--soft); }
  .sys__brands li:hover img { opacity: .9; }
  .proj__rail li:hover .proj__frame img { transform: scale(1.16); transition: transform .8s var(--ease-out); }
  .proj__frame img { transition: transform .8s var(--ease-out); }
  .proj__rail.is-drag li:hover .proj__frame img { transform: scale(1.12); }
}

/* ---------------------------------------------------------- the hand
   A wide frame where the bronze plate takes over from the aluminium one
   (same wall, same gesture), beside a tall one on wallpaper. */
.hand { max-width: var(--maxw); margin: 0 auto; padding: var(--section) var(--gutter); }
.hand__grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(1rem, 2.4vw, 2.2rem); align-items: end; }
.hand figure { margin: 0; overflow: hidden; }
.hand img { display: block; width: 100%; height: auto; }
.hand__swap { position: relative; }
.hand__over { position: absolute; inset: 0; height: 100% !important; object-fit: cover; }
.js .hand__over { clip-path: inset(0 0 0 100%); will-change: clip-path; }
@media (max-width: 860px) { .hand__grid { grid-template-columns: 1fr; } }

.spec {
  margin: clamp(4rem, 10vh, 7rem) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
}
.spec div { padding: 1.4rem 1.6rem 1.6rem 0; border-bottom: 1px solid var(--hair); }
.spec dt { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.spec dd { margin: .5rem 0 0; font-size: .98rem; line-height: 1.45; max-width: 34ch; }

/* ------------------------------------------------------------- band
   The workshop, as a picture on the page rather than behind it: a hairline
   slit that opens to the full frame as it scrolls in, the caption beneath. */
.band { max-width: var(--maxw); margin: 0 auto; padding: var(--section) var(--gutter); }
.band__fig { margin: 0; }
.band__shot { overflow: hidden; aspect-ratio: 1440 / 800; will-change: clip-path; }
.band__shot img {
  width: 100%; height: 100%; object-fit: cover; will-change: transform;
  filter: grayscale(1) contrast(1.06);   /* the blue hose is the only colour in the shot: graded out */
}
.band__cap {
  display: flex; flex-wrap: wrap; gap: 0 .35em; padding-top: 1.2rem;
  font-size: clamp(1.1rem, .95rem + .7vw, 1.6rem); font-weight: 600; letter-spacing: -.02em; line-height: 1.2;
}

/* ---------------------------------------------------------- gallery
   An editorial spread on twelve columns: the work at three sizes, never in
   a row of equals. Offsets are what make it read as a layout, not a grid. */
.gal {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2.4vw, 2.2rem); row-gap: clamp(3rem, 9vh, 6rem);
  margin-top: clamp(3.5rem, 9vh, 6rem);
}
.gal__item { margin: 0; will-change: transform; }
.gal__item--a { grid-column: 1 / span 7; grid-row: 1; }
.gal__item--b { grid-column: 9 / span 4; grid-row: 1; margin-top: 16vh; }
.gal__item--c { grid-column: 2 / span 3; grid-row: 2; align-self: start; }
.gal__item--d { grid-column: 6 / span 7; grid-row: 2; margin-top: 12vh; }
.gal__item--e { grid-column: 1 / span 8; grid-row: 3; }
.gal__item--f { grid-column: 10 / span 3; grid-row: 3; margin-top: 20vh; }
.gal__frame { position: relative; overflow: hidden; }
.gal__frame img { width: 100%; height: auto; display: block; }
.gal__item--a .gal__frame img { aspect-ratio: 4 / 3; object-fit: cover; }   /* the Venice shot is near-square: kept landscape like the slot */
/* the grey copy sits on top of the colour one; only its opacity moves */
.gal__mono { position: absolute; inset: 0; height: 100% !important; object-fit: cover; filter: grayscale(1) contrast(1.04); }
.gal figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; padding-top: .9rem; font-size: .88rem; }
.gal__by { flex: 0 0 100%; font-style: normal; font-size: .8rem; color: var(--soft); }
.gal figcaption strong { font-weight: 600; }
.gal figcaption span { color: var(--faint); text-transform: uppercase; letter-spacing: .14em; font-size: var(--fs-eyebrow); align-self: center; }

@media (max-width: 1000px) {
  .spec { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .gal { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 2.6rem; }
  .gal__item { margin-top: 0 !important; grid-row: auto !important; }
  .gal__item--a, .gal__item--d, .gal__item--e { grid-column: 1 / -1; }
  .gal__item--b, .gal__item--f { grid-column: 2 / -1; }
  .gal__item--c { grid-column: 1 / span 4; }
}
@media (max-width: 560px) {
  .spec { grid-template-columns: 1fr; }
}

/* --------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .js .hero__state { grid-row: auto; opacity: 1; transform: none; }
  .js .hero__copy { gap: 2.5rem; }
  .proj__frame img { transform: none; }
  .cursor, .progress { display: none; }
  .js .hand__over { clip-path: none; opacity: 0; }
  .gal__mono { display: none; }
  .will-rise .cfg__art img { clip-path: none; }
}
html:not(.js) .gal__mono { display: none; }