/* =====================================================================
   SCHWELLE · site.css (concept, k74)
   Direction B1 "Schwellen": stone, light, paper. Heavy, slow, exact.
   Gloock (OFL) for titles, IBM Plex Mono (OFL) for text and labels.
   Modes on <html>: .no-js / .still (static, everything visible) · .motion
   ===================================================================== */

@font-face {
  font-family: "Gloock"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/gloock-400.woff2") format("woff2");
}
@font-face {
  font-family: "Schwelle Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/schwelle-mono-400.woff2") format("woff2");
}

:root {
  /* colour: black/anthracite ground, warm paper, one accent (the warm light of B1) */
  --bg: #0a0908;
  --stone: #141210;
  --fg: #ede6dc;
  --muted: #a39a8e;          /* 7.1:1 on --bg */
  --dim: #8e857a;            /* 5.4:1 on --bg, labels only */
  --line: rgba(237, 230, 220, .14);
  --paper: #e9e4d8;          /* warm paper (approach, contact) */
  --ink: #16130f;
  --ink-muted: #5a534a;      /* 6.0:1 on --paper */
  --ink-line: rgba(22, 19, 15, .16);
  --accent: #d6ad74;         /* warm light; on dark only */
  --accent-ink: #84571f;     /* the same light on paper (lines, focus) */
  --danger: #ffb4a3;         /* error text on dark */
  --danger-ink: #9b2c14;     /* error text on paper, 5.9:1 */

  --serif: "Gloock", "Times New Roman", Georgia, serif;
  --mono: "Schwelle Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --gut: clamp(16px, 4.4vw, 64px);
  --studio-h: 32px;
  --hdr-h: 76px;
  --top-h: calc(var(--studio-h) + var(--hdr-h));
  --mbar-h: 0px;

  --t-micro: 180ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .2);
  --ease-pen: cubic-bezier(.45, .05, .25, 1);
}
@media (max-width: 760px) { :root { --hdr-h: 60px; --mbar-h: 68px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
html.still, html.no-js { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html.still, html.no-js { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--mono); font-size: 15px; line-height: 1.7; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
.sec--paper :focus-visible { outline-color: var(--accent-ink); }
[id] { scroll-margin-top: var(--top-h); }
html { scroll-padding-top: var(--top-h); scroll-padding-bottom: calc(var(--mbar-h) + 16px); }
#main:focus { outline: none; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; z-index: 100; left: 12px; top: 8px; padding: 10px 14px;
  background: var(--fg); color: var(--ink); font-size: 13px; text-decoration: none;
  transform: translateY(-160%); transition: transform var(--t-micro) var(--ease);
}
.skip:focus { transform: none; }

.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gut); }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  padding: 11px 18px; border: 1px solid transparent; border-radius: 0;
  font-family: var(--mono); font-size: 13px; line-height: 1.2; letter-spacing: .02em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--t-micro) ease, color var(--t-micro) ease, border-color var(--t-micro) ease, transform var(--t-micro) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--line { border-color: rgba(237, 230, 220, .5); color: var(--fg); background: transparent; }
.btn--line:hover { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); min-width: 180px; }
.btn--ink:hover { background: #2b251e; border-color: #2b251e; }
.btn--light { background: var(--fg); color: var(--ink); border-color: var(--fg); width: 100%; }
.btn--light:hover { background: #fff8ee; }

/* ---------------- Studio bar (Formschwung) ---------------- */
.studio {
  position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--studio-h);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 var(--gut);
  background: #050404; border-bottom: 1px solid rgba(237, 230, 220, .08);
}
.studio__link {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: var(--studio-h); padding: 0 12px; margin-left: -12px;
  color: var(--muted); font-size: 12px; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: color var(--t-micro) ease;
}
.studio__link::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; } /* 44 px hit area over the 32 px bar */
.studio__arrow { width: 14px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.3; transition: transform var(--t-micro) var(--ease); }
.studio__link:hover { color: var(--fg); }
.studio__link:hover .studio__link::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 44px; } /* 44 px hit area over the 32 px bar */
.studio__arrow { transform: translateX(-2px); }
.studio__link:focus-visible { outline-offset: -4px; }
.studio__flag { color: var(--muted); font-size: 11px; line-height: 1; white-space: nowrap; }

/* ---------------- Header ---------------- */
.hdr {
  position: fixed; z-index: 50; top: var(--studio-h); left: 0; right: 0; height: var(--hdr-h);
  display: flex; align-items: center; gap: 28px; padding: 0 var(--gut);
  color: var(--fg); background: transparent; border-bottom: 1px solid transparent;
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}
.hdr.is-solid { background: rgba(10, 9, 8, .96); border-bottom-color: var(--line); }
.hdr.is-ink { color: var(--ink); }
.hdr__brand { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-right: auto; text-decoration: none; white-space: nowrap; }
.hdr__wm { font-family: var(--serif); font-size: 22px; line-height: 1; letter-spacing: .16em; }
.hdr__desc { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); transition: color 300ms ease; }
.hdr.is-ink .hdr__desc { color: var(--ink-muted); }
.hdr__list { display: flex; align-items: center; gap: 30px; }
.hdr__list a {
  position: relative; display: inline-block; padding: 13px 0; font-size: 13px; letter-spacing: .03em; text-decoration: none;
  color: inherit; opacity: .86; transition: opacity var(--t-micro) ease;
}
.hdr__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform 320ms var(--ease);
}
.hdr__list a:hover { opacity: 1; }
.hdr__list a:hover::after { transform: scaleX(1); transform-origin: left; }
.hdr__navcta { display: none; }
.hdr.is-ink .btn--line { color: var(--ink); border-color: rgba(22, 19, 15, .5); }
.hdr.is-ink .btn--line:hover { background: var(--ink); color: var(--paper); }
.hdr__menu {
  display: none; align-items: center; gap: 10px; min-height: 44px; margin-right: -10px; padding: 0 10px;
  background: none; border: 0; color: inherit; font-size: 13px; letter-spacing: .04em; cursor: pointer; white-space: nowrap;
}
.hdr__menu-i { position: relative; width: 18px; height: 9px; }
.hdr__menu-i::before, .hdr__menu-i::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform 260ms var(--ease);
}
.hdr__menu-i::before { top: 0; }
.hdr__menu-i::after { bottom: 0; }
.hdr__menu[aria-expanded="true"] .hdr__menu-i::before { transform: translateY(4px) rotate(45deg); }
.hdr__menu[aria-expanded="true"] .hdr__menu-i::after { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1080px) { .hdr__desc { display: none; } }
@media (max-width: 900px) {
  .hdr__cta { display: none; }
  .hdr__menu { display: inline-flex; }
  .hdr__nav {
    position: absolute; top: 100%; left: 0; right: 0; padding: 12px var(--gut) 28px;
    background: var(--bg); border-bottom: 1px solid var(--line); color: var(--fg);
    display: none;
  }
  .hdr__nav.is-open { display: block; }
  .no-js .hdr__nav { display: none; }
  .hdr__list { flex-direction: column; align-items: stretch; gap: 0; }
  .hdr__list li { border-top: 1px solid var(--line); }
  .hdr__list a { display: block; padding: 16px 0; font-family: var(--serif); font-size: 28px; letter-spacing: 0; opacity: 1; }
  .hdr__list a::after { display: none; }
  .hdr__navcta { display: block; }
  .hdr__navcta a { font-family: var(--mono); font-size: 14px; color: var(--accent); }
  .hdr.is-open { background: var(--bg); color: var(--fg); }
  .no-js .hdr__menu { display: none; }
}
@media (max-width: 380px) { .hdr__wm { font-size: 19px; letter-spacing: .12em; } }

/* ---------------- Hero ---------------- */
.hero { position: relative; background: var(--bg); }
.hero__stage { position: relative; }
.hero__media { position: absolute; inset: 0; overflow: hidden; background: var(--bg); }
.hero__poster, .hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__poster { object-fit: cover; object-position: 50% 50%; }
.hero__canvas { visibility: hidden; }
.hero__canvas.is-live { visibility: visible; }
.hero__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(10, 9, 8, .82) 0%, rgba(10, 9, 8, .58) 32%, rgba(10, 9, 8, .2) 52%, rgba(10, 9, 8, 0) 66%),
    linear-gradient(to right, rgba(10, 9, 8, .62) 0%, rgba(10, 9, 8, .3) 34%, rgba(10, 9, 8, 0) 56%);
  transition: opacity 300ms ease;
}
.hero__shade-top {
  position: absolute; inset: 0 0 auto; height: 34%; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 9, 8, .7) 0%, rgba(10, 9, 8, .52) 45%, rgba(10, 9, 8, 0) 100%);
  transition: opacity 300ms ease;
}
.hero.is-hink .hero__shade-top { opacity: 0; }
/* once the light reaches the title, a paper veil takes the place of the dark shade: dark ink stays readable on mixed light */
.hero__veil {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms ease;
  background: linear-gradient(to top, rgba(233, 228, 216, .94) 0%, rgba(233, 228, 216, .82) 30%, rgba(233, 228, 216, .5) 46%, rgba(233, 228, 216, 0) 66%);
}
.hero.is-ink .hero__veil { opacity: 1; }
.hs__num { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.hs__t {
  font-family: var(--serif); font-weight: 400; color: var(--fg);
  font-size: clamp(52px, 9.4vw, 136px); line-height: .95; letter-spacing: -.01em;
  text-shadow: 0 0 40px rgba(10, 9, 8, .5);
  transition: color 300ms ease, text-shadow 300ms ease;
}
.hs__t .ln { display: block; }
.hs__sub { max-width: 34em; margin-top: 26px; font-size: 14px; line-height: 1.7; color: #d2c8bb; text-shadow: 0 0 16px rgba(10, 9, 8, .8), 0 1px 2px rgba(10, 9, 8, .7); transition: color 300ms ease; }
.still .hs__t, .still .hs__sub, .no-js .hs__t, .no-js .hs__sub { text-shadow: none; }
.still .hs[data-stage="0"] .hs__t, .no-js .hs[data-stage="0"] .hs__t { text-shadow: 0 0 40px rgba(10, 9, 8, .5); }
.still .hs[data-stage="0"] .hs__sub, .no-js .hs[data-stage="0"] .hs__sub { text-shadow: 0 0 16px rgba(10, 9, 8, .8), 0 1px 2px rgba(10, 9, 8, .7); }
.hero__steps {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; line-height: 2.2; color: #b3a99c; text-align: right;
}
.hero__steps li { transition: color 300ms ease; }
.hero__steps li.is-on { color: var(--fg); }
.hero__steps .hero__n::before {
  content: ""; display: inline-block; width: 18px; height: 1px; margin: 0 12px 4px 0; background: var(--accent); vertical-align: middle;
  transform: scaleX(0); transform-origin: right; transition: transform 300ms var(--ease);
}
.hero__steps li.is-on .hero__n::before { transform: none; }
.hero__foot {
  display: flex; justify-content: space-between; gap: 24px;
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #b9afa2;
}
.hero__hint-s { display: none; }
.hero__end { display: none; }

/* still / no-js: a complete picture. Poster + first stage on screen one, stages II and III below, then the end frame. */
.still .hero__stage, .no-js .hero__stage { min-height: 100svh; display: grid; grid-template-rows: minmax(100svh, auto) auto; }
.still .hero__media, .no-js .hero__media { grid-area: 1 / 1; position: relative; height: 100%; min-height: 100svh; }
.still .hero__copy, .no-js .hero__copy, .still .hero__titles, .no-js .hero__titles { display: contents; }
.still .hs, .no-js .hs { position: relative; padding: 0 var(--gut); }
.still .hs[data-stage="0"], .no-js .hs[data-stage="0"] { grid-area: 1 / 1; align-self: end; padding-bottom: calc(110px + var(--mbar-h)); max-width: 820px; }
.still .hs[data-stage="1"], .no-js .hs[data-stage="1"] { grid-row: 2; padding-top: clamp(96px, 12vw, 160px); }
.still .hs[data-stage="2"], .no-js .hs[data-stage="2"] { grid-row: 3; padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(96px, 12vw, 160px); }
.still .hero__steps, .no-js .hero__steps, .still .hero__canvas, .no-js .hero__canvas { display: none; }
.still .hero__foot, .no-js .hero__foot { grid-area: 1 / 1; align-self: end; position: relative; z-index: 1; padding: 0 var(--gut) calc(40px + var(--mbar-h)); justify-content: flex-end; }
.still .hero__hint, .no-js .hero__hint { display: none; }
.still .hero__end, .no-js .hero__end { display: block; height: min(100svh, 62.5vw); min-height: 420px; position: relative; overflow: hidden; }
.still .hero__end img, .no-js .hero__end img { width: 100%; height: 100%; object-fit: cover; }
.still .hero__end::after, .no-js .hero__end::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
  background: linear-gradient(to bottom, rgba(20, 18, 16, 0), var(--stone));
}

/* motion: one pinned stage, scroll = time of the shot */
.motion .hero { height: 420vh; }
.motion .hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.motion .hero__copy {
  position: absolute; left: var(--gut); bottom: calc(132px + var(--mbar-h)); width: min(900px, calc(100% - 2 * var(--gut) - 250px));
}
.motion .hero__titles { display: grid; }
.motion .hs { grid-area: 1 / 1; align-self: end; }
.motion .hs__num { display: none; }
.motion .hs__t .ln { overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.motion .hs__t .ln > span {
  display: block; transform: translate3d(0, 130%, 0);
  transition: transform 240ms var(--ease-in);
}
.motion .hs.is-past .hs__t .ln > span { transform: translate3d(0, -130%, 0); }
.motion .hs.is-on .hs__t .ln > span { transform: none; transition: transform 340ms var(--ease) 200ms; }
.motion .hs.is-on .hs__t .ln + .ln > span { transition-delay: 240ms; }
.motion .hs__sub { opacity: 0; transition: opacity 220ms ease, color 300ms ease; }
.motion .hs.is-on .hs__sub { opacity: 1; transition: opacity 320ms ease 260ms, color 300ms ease; }
.motion .hs:not(.is-on) { pointer-events: none; }
.motion .hero__steps { position: absolute; right: var(--gut); bottom: calc(132px + var(--mbar-h)); }
.motion .hero__foot { position: absolute; left: var(--gut); right: var(--gut); bottom: calc(40px + var(--mbar-h)); }

/* the hero's last 120 px fade into the stone of Practice (motion: over the pinned stage at the end) */
.motion .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 2; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20, 18, 16, 0), var(--stone));
}
.hero__foot { transition: opacity 300ms ease, color 300ms ease; }
.motion .hero.is-end .hero__foot { opacity: 0; }

/* the end of the shot: the page fills the frame, the ink turns dark */
.hero.is-ink .hero__shade { opacity: 0; }
.hero.is-ink .hs__t { color: var(--ink); text-shadow: 0 0 40px rgba(233, 228, 216, .7); }
.hero.is-ink .hs__sub { color: var(--ink); text-shadow: 0 0 16px rgba(233, 228, 216, .9); }
.hero.is-ink .hero__steps { color: #463f37; }
.hero.is-ink .hero__steps li.is-on { color: var(--ink); }
.hero.is-ink .hero__steps li.is-on .hero__n::before { background: var(--accent-ink); }
.hero.is-ink .hero__foot { color: var(--ink); }

@media (max-width: 760px) {
  .hero__hint-l, .hero__concept { display: none; }
  .hero__hint-s { display: inline; }
  .hero__shade { background: linear-gradient(to top, rgba(10, 9, 8, .9) 0%, rgba(10, 9, 8, .62) 34%, rgba(10, 9, 8, 0) 62%); }
  .hero__veil { background: linear-gradient(to top, rgba(233, 228, 216, .95) 0%, rgba(233, 228, 216, .84) 34%, rgba(233, 228, 216, .5) 50%, rgba(233, 228, 216, 0) 66%); }
  /* on phones the stage label sits under the header, where bright light passes: it carries its own dark chip */
  .hero.is-ink .hero__steps li.is-on { color: var(--fg); }
  .hero.is-ink .hero__steps li.is-on .hero__n::before { background: var(--accent); }
  .hs__sub { font-size: 13px; margin-top: 18px; }
  .motion .hero__copy { bottom: calc(76px + var(--mbar-h)); width: calc(100% - 2 * var(--gut)); }
  .motion .hero__steps {
    top: calc(var(--top-h) + 20px); bottom: auto; left: var(--gut); right: auto; text-align: left;
    display: grid; line-height: 1.4; font-size: 11px;
  }
  /* one label at a time in one slot: no layout shift when the stage changes */
  .motion .hero__steps li { grid-area: 1 / 1; justify-self: start; opacity: 0; transition: opacity 300ms ease; padding: 5px 10px; margin-left: -10px; background: rgba(10, 9, 8, .78); }
  .motion .hero__steps li.is-on { opacity: 1; }
  .motion .hero__steps .hero__n::before { width: 12px; margin-right: 8px; transform-origin: left; }
  .motion .hero__foot { bottom: calc(28px + var(--mbar-h)); }
}
@media (max-width: 760px) {
  .hero__steps li { white-space: nowrap; }
}

/* ---------------- Sections ---------------- */
.sec { position: relative; padding: clamp(96px, 13vw, 184px) 0; }
.sec--dark, .sec--stone {
  --s-fg: var(--fg); --s-muted: var(--muted); --s-dim: var(--dim); --s-line: var(--line); --s-rule: rgba(237, 230, 220, .55);
  --s-accent: var(--accent); --s-pen: rgba(237, 230, 220, .42); --s-box: rgba(237, 230, 220, .28);
}
.sec--paper {
  --s-fg: var(--ink); --s-muted: var(--ink-muted); --s-dim: var(--ink-muted); --s-line: var(--ink-line); --s-rule: rgba(22, 19, 15, .55);
  --s-accent: var(--accent-ink); --s-pen: rgba(22, 19, 15, .45); --s-box: rgba(22, 19, 15, .3);
  background: var(--paper); color: var(--ink);
}
.sec--dark { background: var(--bg); color: var(--fg); }
.sec--stone { background: var(--stone); color: var(--fg); }
.sec__head { max-width: 760px; margin-bottom: clamp(56px, 7vw, 96px); }
.kicker { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--s-dim); margin-bottom: 22px; }
.kicker::before { content: ""; display: inline-block; width: 22px; height: 1px; margin: 0 12px 4px 0; background: var(--s-accent); vertical-align: middle; }
.sec__t { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.6vw, 84px); line-height: 1; letter-spacing: -.005em; text-wrap: balance; }
.sec__intro { max-width: 36em; margin-top: 26px; color: var(--s-muted); }

/* Practice areas: three typographic cards, a hairline drawn on entry and on hover */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 56px); }
.card { position: relative; padding: 34px 0 40px; }
.card__rule, .card__hover { position: absolute; left: 0; right: 0; height: 1px; }
.card__rule { top: 0; background: var(--s-rule); }
.card__hover { bottom: 0; background: var(--s-accent); transform: scaleX(0); transform-origin: right; transition: transform 520ms var(--ease); }
.card:hover .card__hover { transform: scaleX(1); transform-origin: left; }
.card__t { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; margin-bottom: 22px; }
.card__x { font-size: 14px; line-height: 1.75; color: var(--s-muted); }
.motion .cards .card__rule { transform: scaleX(0); transform-origin: left; transition: transform 1100ms var(--ease-pen); }
.motion .cards.is-in .card__rule { transform: none; }
.motion .cards.is-in .card:nth-child(2) .card__rule { transition-delay: 160ms; }
.motion .cards.is-in .card:nth-child(3) .card__rule { transition-delay: 320ms; }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; gap: 8px; } .card { padding: 28px 0 34px; } }

/* Approach: three stages, each one line written as it enters */
.steps { border-top: 1px solid var(--s-line); }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px clamp(24px, 4vw, 64px); padding: clamp(40px, 5vw, 72px) 0; border-bottom: 1px solid var(--s-line); }
.step__num { font-family: var(--serif); font-size: clamp(64px, 8vw, 120px); line-height: .85; color: var(--s-accent); }
.step__t { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 44px); line-height: 1.05; margin-bottom: 18px; }
.step__x { max-width: 38em; color: var(--s-muted); }
.pen { position: relative; display: block; height: 9px; margin-top: 30px; max-width: 38em; overflow: hidden; }
.pen__track { position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--s-pen); }
.pen__nib { position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--s-accent); opacity: 0; }
.motion .pen__track { transform: translate3d(-100%, 0, 0); transition: transform 1800ms var(--ease-pen); }
.motion .step.is-in .pen__track { transform: none; }
.motion .step.is-in .pen__nib { animation: nib 1800ms var(--ease-pen) both; }
@keyframes nib { 0% { opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 760px) { .step { grid-template-columns: 1fr; } }

/* The firm: two monograms, no photographs */
.people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); }
.mono {
  display: flex; align-items: center; justify-content: center; width: clamp(120px, 12vw, 168px); aspect-ratio: 1;
  margin-bottom: 34px; border: 1px solid var(--s-box); overflow: hidden;
}
.mono__l { display: block; font-family: var(--serif); font-size: clamp(76px, 8vw, 112px); line-height: 1; color: var(--s-fg); padding-top: .06em; }
.motion .mono__l { transform: translate3d(0, 110%, 0); transition: transform 1000ms var(--ease); }
.motion .person.is-in .mono__l { transform: none; }
.motion .person:nth-child(2).is-in .mono__l { transition-delay: 180ms; }
.person__n { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 44px); line-height: 1.05; }
.person__r { margin-top: 10px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--s-accent); }
.person__x { max-width: 34em; margin-top: 20px; color: var(--s-muted); }
.firm__note { margin-top: clamp(48px, 6vw, 80px); font-size: 12px; color: var(--s-dim); }
@media (max-width: 760px) { .people { grid-template-columns: 1fr; } }

/* Contact: sample form, sends nothing */
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 120px); align-items: start; }
.contact__head { margin-bottom: 0; }
.contact__addr { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--ink-line); font-size: 13px; line-height: 1.8; color: var(--ink-muted); }
.form { display: grid; gap: 26px; }
.form__note {
  padding: 12px 14px; border: 1px solid var(--ink-line); font-size: 13px; line-height: 1.5; color: var(--ink);
}
.form__nojs { display: none; }
.no-js .form__nojs { display: inline; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.form__note::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 1px 0; border-radius: 50%; background: var(--accent-ink); }
.field { display: grid; gap: 8px; }
.field__l { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.field__opt { text-transform: none; letter-spacing: .02em; color: var(--ink-muted); }
.field__i {
  width: 100%; min-height: 48px; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(22, 19, 15, .45); border-radius: 0;
  background: transparent; color: var(--ink); font-size: 16px; line-height: 1.5;
  transition: border-color var(--t-micro) ease, box-shadow var(--t-micro) ease;
}
.field__i--area { resize: vertical; min-height: 132px; }
.field__i:hover { border-bottom-color: var(--ink); }
.field__i:focus { outline: none; border-bottom-color: var(--ink); box-shadow: 0 1px 0 0 var(--ink); }
.field__i:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; }
.field__h { font-size: 12px; line-height: 1.5; color: var(--ink-muted); }
.field__e { min-height: 0; font-size: 13px; line-height: 1.4; color: var(--danger-ink); }
.field__e:empty { display: none; }
.field.is-bad .field__i { border-bottom-color: var(--danger-ink); box-shadow: 0 1px 0 0 var(--danger-ink); }
.form__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.form__privacy a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 13px; color: var(--ink-muted); text-underline-offset: 4px; transition: color var(--t-micro) ease; }
.form__privacy a:hover { color: var(--ink); }
.form__status { font-size: 14px; line-height: 1.5; color: var(--ink); }
.form__status:empty { display: none; }
.form__status.is-ok { padding: 14px 16px; background: rgba(22, 19, 15, .06); border-left: 2px solid var(--accent-ink); }
.form__status.is-bad { color: var(--danger-ink); }
@media (max-width: 900px) { .contact__grid { grid-template-columns: 1fr; } }

/* ---------------- Footer ---------------- */
.ft { padding: 72px 0 calc(48px + var(--mbar-h)); background: var(--bg); color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }
.ft__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px 40px; align-items: start; }
.ft__brand { display: grid; gap: 10px; }
.ft__wm { font-family: var(--serif); font-size: 24px; line-height: 1; letter-spacing: .16em; color: var(--fg); }
.ft__desc { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.ft__nav ul { display: grid; gap: 0; }
.ft__nav a, .ft__concept a { text-decoration: none; color: var(--fg); opacity: .86; transition: opacity var(--t-micro) ease; display: inline-flex; align-items: center; min-height: 44px; }
.ft__nav a:hover, .ft__concept a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.ft__concept { grid-column: 1 / -1; padding-top: 28px; border-top: 1px solid var(--line); font-size: 12px; letter-spacing: .04em; }
.ft__concept a { min-height: 0; padding: 12px 0; margin: -12px 0; }
@media (max-width: 760px) { .ft__grid { grid-template-columns: 1fr; } }

/* ---------------- Mobile bottom bar ---------------- */
.mbar { display: none; }
@media (max-width: 760px) {
  .mbar {
    display: block; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; height: var(--mbar-h);
    padding: 12px var(--gut) calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(10, 9, 8, .96); border-top: 1px solid var(--line);
  }
  .studio__flag { font-size: 10.5px; }
}
@media (max-width: 359px) { .studio__flag { display: none; } }

/* ---------------- Reduced motion: no transforms, no transitions that move ---------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0ms !important; transition-delay: 0ms !important; }
}

/* Lenis (lenis.css 1.3.11, the rules this page needs) */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }