/* Windowstein — homepage, v2 "cinematic"
   A dark, lit-gallery ground from the brand's deep teal; brand teal as the one accent; a condensed display
   face that echoes the condensed WINDOWSTEIN logotype. Square corners, flat colour, real photographs.
   Each scene's finished composition is written first; its live layout sits under .scene.is-live. */

:root {
  --ground: #08171a;
  --ground-2: #0d2125;
  --ink: #edf1ec;
  --muted: #a3b6b2;
  --accent: #42aea1;
  --accent-ink: #04201d;
  --paper: #eef0eb;
  --paper-ink: #0b1a1c;
  --paper-muted: #45524f;
  --wall: #d9dcd7;
  --wall-deep: #c2c6c1;

  --font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-text: "Barlow", system-ui, sans-serif;

  --step-small: 0.9375rem;
  --step-body: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --step-lead: clamp(1.3125rem, 1rem + 1vw, 1.875rem);
  --step-title: clamp(1.75rem, 1.2rem + 1.2vw, 2.25rem);
  --step-head: clamp(2.75rem, 1.4rem + 4.6vw, 5.75rem);
  --step-display: clamp(3rem, 0.6rem + 9vw, 10rem);

  --margin: clamp(1.25rem, 3.4vw, 3.5rem);
  --gutter: clamp(1rem, 2vw, 1.75rem);
  --section: clamp(7rem, 13vw, 12rem);
  --bar: 76px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:target { scroll-margin-top: var(--bar); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink); padding: 12px 16px; }
.skip:focus { top: 12px; }
.wrap { padding-inline: var(--margin); }
.nums { font-variant-numeric: tabular-nums; }

/* ---------- type ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; text-wrap: balance; }
.display { font-size: var(--step-display); line-height: 0.9; letter-spacing: -0.02em; }
.head { font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.015em; }
.lead { font-size: var(--step-lead); line-height: 1.3; }
p { text-wrap: pretty; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: var(--step-small); letter-spacing: 0.01em; white-space: nowrap; transition: background-color 220ms ease, color 220ms ease; }
.button--sm { min-height: 44px; padding: 0 20px; }
.roll { display: block; height: 1.3em; line-height: 1.3; overflow: hidden; }
.roll > span { display: block; transition: transform 520ms var(--ease-out); }
.ul { position: relative; display: inline-block; padding-bottom: 3px; }
.ul::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform 480ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--ink); color: var(--ground); }
  .button:hover .roll > span { transform: translateY(-100%); }
  .ul:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
}

/* =========================================================
   BAR
   ========================================================= */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--bar); display: flex; align-items: center; gap: 32px; padding-inline: var(--margin); color: var(--header-ink, var(--ink)); background: transparent; transition: transform 500ms var(--ease-out), color 300ms ease, background-color 300ms ease; }
.bar.is-solid { background: var(--header-bg, var(--ground)); }
.bar.is-hidden { transform: translateY(-100%); }
.mark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: var(--step-title); letter-spacing: 0.04em; text-transform: uppercase; }
.mark__glyph { width: 22px; height: 28px; }
.bar__nav { display: flex; gap: 28px; margin-left: auto; font-size: var(--step-small); font-weight: 500; }
.bar__menu { display: none; font-size: var(--step-small); font-weight: 600; min-height: 44px; padding: 0 4px; }
.menu { position: fixed; inset: 0; z-index: 39; background: var(--ground); padding: calc(var(--bar) + 24px) var(--margin) 32px; display: flex; flex-direction: column; justify-content: space-between; }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 4px; }
.menu nav a { font-family: var(--font-display); font-size: var(--step-head); line-height: 1.05; font-weight: 500; }
.menu p { color: var(--muted); }
@media (max-width: 900px) {
  .bar__nav, .bar__cta { display: none; }
  .bar__menu { display: block; margin-left: auto; }
}

/* =========================================================
   SCENE 1 — the window opens
   ========================================================= */
.hero .scene-stage { height: 100svh; min-height: 600px; overflow: hidden; background: var(--ground); }
.hero__intro, .hero__view { position: absolute; inset: 0; }
.hero__view img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; filter: brightness(0.8); }
.hero__cross { display: none; }
.hero__copy { position: absolute; z-index: 3; left: var(--margin); top: calc(var(--bar) + 4vh); max-width: 34ch; }
.hero__sub { font-size: var(--step-body); margin-bottom: 28px; }
.hero__name { position: absolute; z-index: 2; left: 0; right: 0; bottom: -0.04em; margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 18.6vw; line-height: 0.8; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; white-space: nowrap; color: var(--ink); }
.hero__name > span { display: inline-block; overflow: hidden; padding-top: 0.06em; }
.hero__name b { display: inline-block; font-weight: inherit; }
.hero__cap { position: absolute; z-index: 3; right: var(--margin); top: calc(var(--bar) + 4vh); max-width: 22ch; text-align: right; font-size: var(--step-small); color: var(--ink); }

/* live: the photograph starts as a window in the dark, cut by its mullion and transom */
.hero { --ap-t: 15%; --ap-r: 33%; --ap-b: 27%; --ap-l: 33%; }
html.js .hero.is-live .hero__view { clip-path: inset(var(--ap-t) var(--ap-r) var(--ap-b) var(--ap-l)); }
html.js .hero.is-live .hero__view img { transform: scale(1.3); }
html.js .hero.is-live .hero__cross { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero__v, .hero__h { position: absolute; background: var(--ground); }
.hero__v { left: 50%; top: var(--ap-t); bottom: var(--ap-b); width: 12px; margin-left: -6px; }
.hero__h { left: var(--ap-l); right: var(--ap-r); top: calc(var(--ap-t) + (100% - var(--ap-t) - var(--ap-b)) * 0.34); height: 12px; }
html.js .hero.is-live .hero__cap { opacity: 0; }
@media (max-width: 767px) {
  .hero { --ap-t: 30%; --ap-r: 12%; --ap-b: 30%; --ap-l: 12%; }
  .hero__copy { top: calc(var(--bar) + 8px); max-width: none; right: var(--margin); }
  .hero__cap { top: auto; bottom: calc(18.6vw + 28px); left: var(--margin); right: auto; text-align: left; }
}

/* load sequence: settled by 1.1s; the scroll takes over after */
@media (prefers-reduced-motion: no-preference) {
  html.js .hero__intro { animation: intro-open 1300ms var(--ease-in-out) both; }
  html.js .hero__name b { animation: rise-up 900ms var(--ease-expo) both; animation-delay: 100ms; }
  html.js .hero__s b { animation-delay: 180ms; }
  html.js .hero__copy > * { animation: fade-up 600ms var(--ease-out) both; animation-delay: 200ms; }
  html.js .hero__copy > * + * { animation-delay: 280ms; }
  html.js .bar { animation: fade 800ms ease both; animation-delay: 300ms; }
}
@keyframes intro-open { from { clip-path: inset(50% 50% 50% 50%); } to { clip-path: inset(0); } }
@keyframes rise-up { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* =========================================================
   MANIFESTO — ink fill and rolling figures
   ========================================================= */
.manifest { padding-block: var(--section); }
.manifest__h { max-width: 15ch; }
.manifest__h .w { display: inline-block; }
.manifest__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: clamp(64px, 8vw, 120px); align-items: end; }
.manifest__photo { grid-column: 1 / 6; }
.manifest__photo .par { aspect-ratio: 4 / 5; overflow: hidden; }
.manifest__photo img { width: 100%; height: 116%; object-fit: cover; margin-top: -8%; }
.manifest__photo figcaption { margin-top: 12px; font-size: var(--step-small); color: var(--muted); }
.manifest__text { grid-column: 7 / 13; padding-bottom: 40px; }
.manifest__text .lead { max-width: 38ch; margin-bottom: 28px; }
.manifest__text p:not(.lead) { max-width: 52ch; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(96px, 12vw, 176px); }
.stats dt { font-family: var(--font-display); font-weight: 500; font-size: var(--step-head); line-height: 0.9; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.stats dd { margin-top: 14px; max-width: 24ch; color: var(--muted); font-size: var(--step-small); }
@media (max-width: 760px) {
  .manifest__grid { display: block; }
  .manifest__photo { width: 78%; }
  .manifest__text { margin-top: 48px; padding: 0; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 48px; }
}

/* =========================================================
   SCENE 2 — held picture, passing systems
   ========================================================= */
.products .scene-stage { padding: var(--section) var(--margin); }
.products__h { font-size: var(--step-head); line-height: 0.95; }
.products__names, .products__count { display: none; }
.products__items { margin-top: 72px; display: grid; gap: clamp(72px, 9vw, 128px); }
.prod { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.prod__fig { grid-column: 6 / 13; grid-row: 1; aspect-ratio: 3 / 2; overflow: hidden; }
.prod__fig img { width: 100%; height: 100%; object-fit: cover; }
.prod__text { grid-column: 1 / 5; grid-row: 1; }
.prod__text h3 { font-size: var(--step-lead); font-weight: 600; letter-spacing: 0; margin-bottom: 14px; font-family: var(--font-text); }
.prod__text p { max-width: 40ch; }
.prod__spec { margin-top: 12px; font-size: var(--step-small); color: var(--muted); }
@media (max-width: 760px) {
  .prod { display: block; }
  .prod__text { margin-top: 20px; }
}

.products.is-live .scene-stage { padding: 0; }
.products.is-live .products__h { position: absolute; left: var(--margin); top: calc(var(--bar) + 16px); font-size: var(--step-lead); font-family: var(--font-text); font-weight: 500; letter-spacing: 0; color: var(--muted); }
.products.is-live .products__names { display: block; position: absolute; left: var(--margin); top: 28%; z-index: 2; }
.products__names li { font-family: var(--font-display); font-weight: 500; font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.015em; opacity: 0.26; transition: opacity 500ms ease, transform 600ms var(--ease-out); }
.products.is-live:not([data-beat]) .products__names li:nth-child(1),
.products[data-beat="0"] .products__names li:nth-child(1),
.products[data-beat="1"] .products__names li:nth-child(2),
.products[data-beat="2"] .products__names li:nth-child(3),
.products[data-beat="3"] .products__names li:nth-child(4) { opacity: 1; transform: translateX(24px); }
.products.is-live .products__count { display: block; position: absolute; top: calc(var(--bar) + 16px); left: calc(50vw - var(--margin) - 8ch); width: 8ch; text-align: right; font-size: var(--step-lead); color: var(--muted); }
.products__count span { display: none; }
.products.is-live:not([data-beat]) .products__count span:nth-child(1),
.products[data-beat="0"] .products__count span:nth-child(1),
.products[data-beat="1"] .products__count span:nth-child(2),
.products[data-beat="2"] .products__count span:nth-child(3),
.products[data-beat="3"] .products__count span:nth-child(4) { display: inline; }
.products.is-live .products__items { position: absolute; inset: 0; margin: 0; display: block; pointer-events: none; }
.products.is-live .prod { position: absolute; inset: 0; display: block; pointer-events: none; }
.products.is-live .prod__fig, .products.is-live .prod__text { pointer-events: auto; }
.products.is-live .prod__fig { position: absolute; top: calc(var(--bar) + 16px); bottom: var(--margin); right: var(--margin); width: 48vw; aspect-ratio: auto; }
.products.is-live .prod__text { position: absolute; left: var(--margin); bottom: var(--margin); width: min(40ch, 38vw); }
@media (max-width: 767px) {
  .products.is-live .products__names { display: none; }
  .products.is-live .products__count { left: auto; right: var(--margin); }
  .products.is-live .prod__fig { top: calc(var(--bar) + 64px); bottom: auto; left: var(--margin); width: auto; height: 44svh; }
  .products.is-live .prod__text { width: auto; right: var(--margin); bottom: 28px; }
  .products.is-live .prod__text h3 { font-family: var(--font-display); font-size: var(--step-title); font-weight: 500; line-height: 1; }
}

/* =========================================================
   PLAN — the live thing, a paper chapter
   ========================================================= */
.plan { background: var(--paper); color: var(--paper-ink); padding-block: var(--section); }
.plan__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.plan__copy { grid-column: 1 / 5; }
.plan__sub { margin-top: 24px; max-width: 36ch; }
.plan__form { margin-top: 40px; display: grid; gap: 28px; }
.plan__nojs { margin-top: 32px; display: none; }
html:not(.js) .plan__form, html:not(.js) .plan__open { display: none; }
html:not(.js) .plan__nojs { display: block; }
.choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.choice legend { padding: 0; margin-bottom: 10px; font-size: var(--step-small); color: var(--paper-muted); }
.choice__row { display: flex; flex-wrap: wrap; gap: 6px; }
.choice label { position: relative; cursor: pointer; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; background: rgba(11, 26, 28, 0.07); font-size: var(--step-small); font-weight: 500; transition: background-color 200ms ease, color 200ms ease; }
.choice span i { width: 14px; height: 14px; background: var(--sw); flex: none; }
.choice input:checked + span { background: var(--paper-ink); color: var(--paper); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .choice input:not(:checked) + span:hover { background: rgba(11, 26, 28, 0.14); } }
.size { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.size__item span { display: flex; justify-content: space-between; font-size: var(--step-small); color: var(--paper-muted); margin-bottom: 12px; }
.size__item output { color: var(--paper-ink); font-weight: 600; }
.plan__sum { max-width: 36ch; }
.plan__form .button { justify-self: start; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; background: rgba(11, 26, 28, 0.16); }
input[type="range"]::-moz-range-track { height: 6px; background: rgba(11, 26, 28, 0.16); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; background: var(--paper-ink); transition: transform 140ms var(--ease-out); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 0; background: var(--paper-ink); }
input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
.plan__stage-wrap { grid-column: 6 / 13; }
.plan__stage { position: relative; aspect-ratio: 5 / 4; max-height: 82svh; width: 100%; background: var(--wall); overflow: hidden; }
.plan__view { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(16% 21% 22% 21%); }
.win { position: absolute; left: 21%; top: 16%; width: 58%; height: 62%; perspective: 1600px; --fp: 14px; --sp: 16px; --frame: #f3f4f1; --open: 0.35; --travel: 0px; --ov: 0px; }
.win::after { content: ""; position: absolute; left: -4%; right: -4%; top: 100%; height: max(10px, calc(var(--fp) * 0.9)); background: var(--wall-deep); }
.win__frame { position: absolute; inset: 0; border: var(--fp) solid var(--frame); }
.sash { position: absolute; top: var(--fp); bottom: var(--fp); width: calc((100% - 2 * var(--fp)) / 2 + var(--ov)); border: var(--sp) solid var(--frame); background: rgba(214, 232, 230, 0.16); transform-style: preserve-3d; }
.sash::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.06); }
.sash--l { left: var(--fp); transform-origin: 0 50%; }
.sash--r { right: var(--fp); transform-origin: 100% 50%; z-index: 2; }
.sash__handle { position: absolute; top: 46%; width: max(4px, calc(var(--sp) * 0.38)); height: 9%; background: var(--handle, #9aa09f); }
.sash--l .sash__handle { right: calc(var(--sp) * -0.7); }
.sash--r .sash__handle { left: calc(var(--sp) * -0.7); }
.win[data-style="sliding"] .sash--r { transform: translateX(calc(var(--open) * var(--travel) * -1)); }
.win[data-style="casement"] .sash--l { transform: rotateY(calc(var(--open) * -64deg)); }
.win[data-style="casement"] .sash--r { transform: rotateY(calc(var(--open) * 64deg)); }
.win[data-style="casement"] .sash { background: rgba(214, 232, 230, 0.22); }
.win[data-style="fixed"] .sash--r { display: none; }
.win[data-style="fixed"] .sash--l { width: calc(100% - 2 * var(--fp)); }
.win[data-style="fixed"] .sash__handle { display: none; }
.dim { position: absolute; font-size: var(--step-small); color: #505755; white-space: nowrap; }
.dim--w { left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); }
.dim--h { top: 50%; left: calc(100% + 14px); transform: translateY(-50%) rotate(90deg); transform-origin: 0 50%; }
.plan__open { display: flex; align-items: center; gap: 20px; margin-top: 20px; font-size: var(--step-small); color: var(--paper-muted); }
.plan__open input { flex: 1; }
.plan__open[hidden] { display: flex; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .sash { transition: transform 420ms var(--ease-out); }
  .plan__view { transition: clip-path 420ms var(--ease-out); }
  .win { transition: left 420ms var(--ease-out), top 420ms var(--ease-out), width 420ms var(--ease-out), height 420ms var(--ease-out); }
  .win.is-dragging, .win.is-dragging .sash, .plan__stage.is-dragging .plan__view { transition: none; }
}
@media (max-width: 900px) {
  .plan__inner { display: flex; flex-direction: column; }
  .plan__copy { display: contents; }
  .plan__copy > h2 { order: 0; }
  .plan__sub { order: 1; }
  .plan__stage-wrap { order: 2; width: 100%; margin-top: 40px; }
  .plan__form, .plan__nojs { order: 3; }
  .size { grid-template-columns: 1fr; }
  .plan__form .button { justify-self: stretch; }
}
@media (max-width: 600px) { .plan__stage { aspect-ratio: 4 / 5; } }

/* =========================================================
   SCENE 3 — the projects pass sideways
   ========================================================= */
.work .scene-stage { padding-block: var(--section); }
.work__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.work__count { display: none; }
.work__track { display: flex; gap: var(--gutter); margin-top: 56px; padding-inline: var(--margin); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--margin); scrollbar-width: none; }
.work__track::-webkit-scrollbar { display: none; }
.panel { flex: 0 0 min(78vw, 720px); scroll-snap-align: start; }
.panel__fig { aspect-ratio: 16 / 10; overflow: hidden; background: var(--ground-2); }
.panel__fig img { width: 100%; height: 100%; object-fit: cover; transition: scale 900ms var(--ease-soft); }
.panel h3 { margin-top: 22px; font-size: var(--step-title); line-height: 1; }
.panel p { margin-top: 10px; max-width: 46ch; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .panel:hover .panel__fig img { scale: 1.04; } }

.work.is-live .scene-stage { padding: 0; }
.work.is-live .work__head { position: absolute; top: calc(var(--bar) + 16px); left: 0; right: 0; }
.work.is-live .work__count { display: block; font-size: var(--step-lead); color: var(--muted); }
.work__count span { display: none; }
.work.is-live:not([data-beat]) .work__count span:nth-child(1),
.work[data-beat="0"] .work__count span:nth-child(1), .work[data-beat="1"] .work__count span:nth-child(2),
.work[data-beat="2"] .work__count span:nth-child(3), .work[data-beat="3"] .work__count span:nth-child(4),
.work[data-beat="4"] .work__count span:nth-child(5), .work[data-beat="5"] .work__count span:nth-child(6) { display: inline; }
.work.is-live .work__track { position: absolute; left: 0; bottom: var(--margin); margin: 0; overflow: visible; width: max-content; padding-right: var(--margin); gap: 4vw; }
.work.is-live .panel { flex-basis: 56vw; }
.work.is-live .panel__fig { aspect-ratio: auto; height: calc(100svh - var(--bar) - 300px); max-height: 64vh; }
.work.is-live .panel__fig img { width: 118%; max-width: none; margin-left: -9%; }

/* =========================================================
   CLIENTS — the marquee
   ========================================================= */
.clients { padding-top: var(--section); overflow: hidden; }
.clients__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.clients__head h2 { grid-column: 1 / 8; max-width: 18ch; }
.clients__head p { grid-column: 9 / 13; color: var(--muted); }
.marquee { margin-top: clamp(64px, 8vw, 112px); overflow: hidden; }
.marquee__track { display: flex; align-items: center; width: max-content; gap: 0.32em; font-family: var(--font-display); font-weight: 500; font-size: clamp(4rem, 1rem + 10vw, 11rem); line-height: 1.1; letter-spacing: -0.015em; white-space: nowrap; }
.marquee__track i { flex: none; width: 0.24em; height: 0.32em; border: 0.055em solid var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { width: auto; flex-wrap: wrap; white-space: normal; font-size: clamp(2.5rem, 1rem + 5vw, 5rem); padding-inline: var(--margin); }
}
@media (max-width: 760px) {
  .clients__head { display: block; }
  .clients__head p { margin-top: 20px; }
}

/* =========================================================
   FACTORY — sticky title, parallax steps
   ========================================================= */
.factory { padding-block: var(--section); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.factory__side { grid-column: 1 / 6; position: sticky; top: calc(var(--bar) + 24px); }
.factory__side h2 { max-width: 6ch; }
.factory__side p { margin-top: 32px; max-width: 38ch; color: var(--muted); }
.steps { grid-column: 7 / 13; display: grid; gap: clamp(72px, 9vw, 136px); }
.step figure .par { aspect-ratio: 4 / 3; overflow: hidden; }
.step:nth-child(even) figure { width: 74%; margin-left: auto; }
.step:nth-child(even) figure .par { aspect-ratio: 4 / 5; }
.step img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; }
.step h3 { margin-top: 22px; font-size: var(--step-title); line-height: 1; }
.step p { margin-top: 10px; max-width: 40ch; color: var(--muted); }
.step:nth-child(even) > div { margin-left: 26%; }
@media (max-width: 760px) {
  .factory { display: block; }
  .factory__side { position: static; margin-bottom: 64px; }
  .step:nth-child(even) > div { margin-left: 0; }
}

/* =========================================================
   QUOTE — the picture opens like a window
   ========================================================= */
.quote { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
.quote__frame { position: absolute; inset: 0; }
.quote__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; filter: brightness(0.58); }
.quote__words { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; padding-block: calc(var(--bar) + 16px) var(--margin); }
.quote__h { font-family: var(--font-text); font-size: var(--step-lead); font-weight: 500; }
.quote__fig { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.quote__fig blockquote { grid-column: 1 / 9; margin: 0; }
.quote__fig blockquote p { font-family: var(--font-display); font-weight: 500; font-size: var(--step-title); line-height: 1.08; max-width: 24ch; }
.quote__fig figcaption { grid-column: 9 / 13; text-align: right; }
@media (max-width: 760px) {
  .quote__fig { display: block; }
  .quote__fig figcaption { text-align: left; margin-top: 16px; font-size: var(--step-small); }
}

/* =========================================================
   FAQ
   ========================================================= */
.faq { background: var(--ground-2); padding-block: var(--section); }
.faq__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.faq__col { grid-column: 1 / 7; }
.acc { margin-top: 56px; }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; min-height: 64px; padding: 14px 0; font-size: var(--step-lead); font-weight: 500; line-height: 1.25; transition: color 200ms ease; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 2px 100% no-repeat; transition: transform 400ms var(--ease-out); } /* taste-skill-ignore: a plus sign drawn with two flat bars */
.acc details[open] summary::after { transform: rotate(135deg); }
.acc__a { overflow: hidden; }
.acc__a p { padding-bottom: 24px; color: var(--muted); max-width: 54ch; }
@media (hover: hover) and (pointer: fine) { .acc summary:hover { color: var(--accent); } }
.faq__pics { grid-column: 8 / 13; position: relative; margin-bottom: 120px; }
.faq__tall .par { aspect-ratio: 3 / 4; overflow: hidden; }
.faq__tall img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; }
.faq__sq { position: absolute; left: -22%; bottom: -60px; width: 46%; }
.faq__sq video { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 42% 30%; background: #0b1416; }
.faq__sq figcaption { position: absolute; top: calc(100% + 10px); left: 0; font-size: var(--step-small); color: var(--muted); max-width: 26ch; }
@media (max-width: 900px) {
  .faq__grid { display: flex; flex-direction: column; }
  .faq__pics { width: 100%; margin: 72px 0 140px; }
  .faq__tall { width: 80%; }
  .faq__sq { left: auto; right: 0; width: 46%; }
}

/* =========================================================
   VISIT
   ========================================================= */
.visit { position: relative; height: 100svh; min-height: 680px; overflow: hidden; }
.visit__img { position: absolute; inset: 0; overflow: hidden; }
.visit__img img { width: 100%; height: 120%; margin-top: -10%; object-fit: cover; object-position: 50% 62%; }
.visit__card { position: absolute; top: calc(var(--bar) + 24px); right: var(--margin); width: 410px; background: var(--paper); color: var(--paper-ink); padding: 32px 32px 0; }
.visit__card h2 { font-size: var(--step-title); line-height: 1; }
.visit__card address { margin-top: 20px; font-style: normal; }
.hours { width: 100%; margin-top: 20px; border-collapse: collapse; }
.hours th { text-align: left; font-weight: 400; padding: 4px 0; }
.hours td { text-align: right; padding: 4px 0; }
.visit__tel { margin-top: 20px; }
.visit__btn { display: flex; width: calc(100% + 64px); margin: 28px -32px 0; min-height: 60px; }
@media (max-width: 760px) {
  .visit { height: auto; min-height: 0; overflow: visible; }
  .visit__img { position: relative; height: 70svh; }
  .visit__card { position: relative; top: auto; right: auto; width: auto; margin: -80px var(--margin) 0; }
}

/* =========================================================
   FOOTER — the name returns at full width
   ========================================================= */
.foot { background: var(--ground); padding-top: var(--section); overflow: hidden; }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 32px; }
.foot__h { max-width: 10ch; }
.foot__act { display: flex; align-items: center; gap: 28px; }
.foot__tel { font-size: var(--step-lead); font-weight: 500; }
.foot__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gutter); margin-top: clamp(80px, 9vw, 128px); font-size: var(--step-small); color: var(--muted); }
.foot__cols strong { color: var(--ink); font-weight: 600; }
.foot__links { display: grid; gap: 6px; font-size: var(--step-body); color: var(--ink); justify-items: start; }
.foot__name { margin-top: clamp(56px, 7vw, 96px); font-family: var(--font-display); font-weight: 600; font-size: 18.6vw; line-height: 0.8; letter-spacing: -0.01em; text-transform: uppercase; text-align: center; white-space: nowrap; color: var(--accent); overflow: hidden; padding-top: 0.04em; }
.foot__name span { display: inline-block; }
.foot__legal { padding-block: 28px; font-size: var(--step-small); color: var(--muted); }
@media (max-width: 760px) {
  .foot__cols { grid-template-columns: 1fr; gap: 28px; }
  .foot__act { flex-wrap: wrap; }
}

/* =========================================================
   QUIET MOTION — entrances armed just ahead of the fold
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-armed:not(.is-in) { opacity: 0; transform: translateY(32px); transition: none; }
  .js .shutter[data-reveal] { opacity: 1; transform: none; clip-path: inset(0); transition: clip-path 900ms var(--ease-in-out); }
  .js .shutter[data-reveal] img { transition: scale 1600ms var(--ease-soft); }
  .js .shutter[data-reveal].is-armed:not(.is-in) { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: none; }
  .js .shutter[data-reveal].is-armed:not(.is-in) img { scale: 1.25; transition: none; }
  .js [data-split] .split-line { transition: transform 1000ms var(--ease-expo); transition-delay: calc(var(--li, 0) * 90ms); }
  .js [data-split].is-armed:not(.is-in) .split-line { transform: translateY(110%); transition: none; }
  .js .foot__name span { transition: transform 1400ms var(--ease-expo); }
  .js .foot__name.is-armed:not(.is-in) span { transform: translateY(100%); transition: none; }
}