/* HaideraLabs. Grammar: Rooms. Every room is a hard cut onto its own ground.
   The engine (scrollcraft.css) is the mechanism; this file is the building. */

@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --sc-canvas:     #0B0D10;
  --sc-surface:    #15181C;
  --sc-ink:        #ECEAE4;
  --sc-ink-soft:   #A3A8AD;
  --sc-accent:     #EBD3A2;
  --sc-accent-ink: #14120F;
  --sc-font-display: "Geist", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;
  --sc-shadow-color: 215 30% 3%;

  --hl-night: #050607;
  --hl-paper-ink: #17150F;
  --hl-chrome-h: 4.25rem;
  --hl-error: #F2A88F;
}

html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }

body { font-feature-settings: "ss01", "cv11"; }
.hl-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.hl-skip {
  position: fixed; left: var(--sc-gutter); top: 0.75rem; z-index: 100;
  padding: 0.6rem 0.9rem; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink); text-decoration: none;
  transform: translateY(-160%); transition: transform var(--sc-d-fast) var(--sc-ease-out);
}
.hl-skip:focus-visible { transform: none; }

/* ------------------------------------------------------------- chrome -- */
.hl-chrome {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4);
  padding: max(1rem, env(safe-area-inset-top)) var(--sc-gutter) 1rem;
  pointer-events: none; color: var(--sc-ink);
  transition: color var(--sc-d-slow) var(--sc-ease-out);
}
.hl-chrome > * { pointer-events: auto; }
.hl-chrome.is-light { color: var(--hl-paper-ink); --hl-line: color-mix(in oklab, var(--hl-paper-ink) 30%, transparent); }
/* While the walk-through is mid-way, bright sky and dark concrete both sit
   under the bar. Difference blending keeps every glyph legible over either. */
.hl-chrome.is-blend { color: #fff; mix-blend-mode: difference; --hl-line: rgb(255 255 255 / 0.5); }
.hl-chrome.is-blend .hl-plan__room.is-current { fill: #fff; stroke: #fff; }
.hl-chrome.is-blend .hl-cta { border-color: rgb(255 255 255 / 0.6); }
.hl-chrome__start, .hl-chrome__end { display: flex; align-items: center; gap: var(--sc-5); }

.hl-mark { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none; }
/* The mark is the real logo, traced to a single-colour vector; the word follows the lockup. */
.hl-mark__glyph { width: 2.1rem; height: auto; aspect-ratio: 438 / 368; flex: none; }
.hl-mark__word { font-weight: 650; font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; }

.hl-plan { display: flex; align-items: center; gap: 0.75rem; position: relative; }
.hl-plan svg { width: 6.5rem; height: 1.5rem; overflow: visible; cursor: pointer; }
.hl-plan__room {
  fill: transparent; stroke: var(--hl-line, var(--sc-hairline-strong)); stroke-width: 1;
  transition: fill var(--sc-d-base) var(--sc-ease-out), stroke var(--sc-d-base) var(--sc-ease-out);
}
.hl-plan__room.is-current { fill: var(--sc-accent); stroke: var(--sc-accent); }
.hl-chrome.is-light .hl-plan__room.is-current { fill: var(--hl-paper-ink); stroke: var(--hl-paper-ink); }
@media (hover: hover) and (pointer: fine) {
  .hl-plan__room:not(.is-current):hover { fill: color-mix(in oklab, currentColor 18%, transparent); }
}
.hl-plan__here { font-size: var(--sc-t-xs); color: inherit; opacity: 0.72; white-space: nowrap; min-width: 7rem; }
.hl-plan__links { list-style: none; margin: 0; padding: 0; }
.hl-plan__links a {
  position: absolute; left: 0; top: 100%; margin-top: 0.4rem;
  padding: 0.3rem 0.6rem; border-radius: var(--sc-r-sm);
  background: var(--sc-surface); color: var(--sc-ink); font-size: var(--sc-t-xs); white-space: nowrap;
  transform: translateY(-4px); opacity: 0; pointer-events: none;
}
.hl-plan__links a:focus-visible { opacity: 1; transform: none; pointer-events: auto; }

.hl-inspect {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.45rem 0.2rem; border: 0; background: none; cursor: pointer;
  font-size: var(--sc-t-sm); color: inherit;
}
.hl-inspect__track {
  position: relative; width: 1.9rem; height: 1.1rem; border-radius: var(--sc-r-pill);
  border: 1px solid var(--hl-line, var(--sc-hairline-strong));
  transition: background var(--sc-d-base) var(--sc-ease-out), border-color var(--sc-d-base) var(--sc-ease-out);
}
.hl-inspect__knob {
  position: absolute; top: 50%; left: 0.18rem; width: 0.66rem; height: 0.66rem; border-radius: 50%;
  background: currentColor; opacity: 0.8; translate: 0 -50%;
  transition: transform var(--sc-d-base) var(--sc-ease-out), background var(--sc-d-base) var(--sc-ease-out);
}
.hl-inspect[aria-pressed="true"] .hl-inspect__track { background: var(--sc-accent); border-color: var(--sc-accent); }
.hl-inspect[aria-pressed="true"] .hl-inspect__knob { transform: translateX(0.8rem); background: var(--sc-accent-ink); opacity: 1; }
.hl-inspect:active .hl-inspect__track { transform: scale(0.96); }

.hl-cta {
  display: inline-flex; align-items: center; padding: 0.5rem 0.95rem;
  border-radius: var(--sc-r-pill); border: 1px solid var(--hl-line, var(--sc-hairline-strong));
  color: inherit; text-decoration: none; font-size: var(--sc-t-sm); white-space: nowrap;
  transition: background var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hl-cta:hover { background: var(--sc-accent); border-color: var(--sc-accent); color: var(--sc-accent-ink); }
}
.hl-cta:active { transform: scale(0.97); }

.hl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0.9rem 1.45rem; border: 0; border-radius: var(--sc-r-pill);
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 550; font-size: var(--sc-t-base); text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: var(--sc-e1), inset 0 1px 0 rgb(255 255 255 / 0.35);
  transition: background var(--sc-d-fast) var(--sc-ease-out), transform var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .hl-btn:hover { background: #F4E2BC; } }
.hl-btn:active { transform: scale(0.97); }
.hl-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* --------------------------------------------------------- room 1: slot -- */
.hl-hero__stage { background: var(--hl-night); }
.hl-plane { position: absolute; inset: 0; will-change: transform; }
.hl-plane :is(img, picture) { display: block; width: 100%; height: 100%; max-width: none; }
.hl-plane img { object-fit: cover; }
.hl-plane--far { z-index: 0; }
.hl-plane--far img { object-position: 50% 74%; }
.hl-plane--wall { z-index: 1; transform-origin: 50.2% 49.2%; }
.hl-dust { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.hl-bloom {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 22% 52% at 50% 50%,
    rgb(255 240 214 / 0.85) 0%, rgb(235 211 162 / 0.28) 40%, transparent 72%);
  mix-blend-mode: screen;
}
.hl-hero__scrim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(to top right,
    rgb(5 6 7 / 0.86) 0%, rgb(5 6 7 / 0.55) 28%, rgb(5 6 7 / 0.12) 52%, transparent 66%);
}
.hl-hero__copy {
  left: max(var(--sc-gutter), 10vw); right: auto; bottom: clamp(3rem, 11vh, 8rem);
  max-width: min(44rem, 70vw);
}
.hl-hero__title {
  font-size: clamp(3.1rem, 6vw, 6.25rem);
  font-weight: 540; letter-spacing: -0.048em; line-height: 0.92;
  max-width: 6.2em;
}
.hl-hero__lede { margin-top: var(--sc-5); max-width: min(34ch, calc(50vw - max(var(--sc-gutter), 10vw) - 2.5rem)); color: color-mix(in oklab, var(--sc-ink) 86%, var(--sc-ink-soft)); }
.hl-hero__actions { margin: var(--sc-6) 0 0; }
.hl-plane--near { z-index: 25; pointer-events: none; }
.hl-pillar { position: absolute; top: -2%; bottom: -2%; width: 11vw; will-change: transform; }
.hl-pillar--l { left: 0; background: linear-gradient(90deg, #020303 0%, #040506 48%, rgb(6 7 9 / 0.7) 78%, rgb(6 7 9 / 0) 100%); }
.hl-pillar--r { right: 0; background: linear-gradient(270deg, #020303 0%, #040506 48%, rgb(6 7 9 / 0.7) 78%, rgb(6 7 9 / 0) 100%); }
.hl-hero__beat {
  left: max(var(--sc-gutter), 10vw); right: auto; top: clamp(6.5rem, 20vh, 13rem); bottom: auto;
  z-index: 21; color: var(--hl-paper-ink);
}
.hl-beat {
  margin: 0; max-width: 17ch; color: inherit;
  font-size: var(--sc-t-2xl); font-weight: 500; line-height: 1.04; letter-spacing: -0.032em; text-wrap: balance;
}

/* ------------------------------------------------------- room 2: method -- */
.hl-method {
  position: relative; background: var(--sc-surface);
  padding-block: clamp(5rem, 14vh, 10rem) var(--sc-section);
}
.hl-kicker {
  margin: 0 0 var(--sc-7); font-size: var(--sc-t-sm); font-weight: 500;
  letter-spacing: 0.02em; color: var(--sc-accent);
}
.hl-method__steps { list-style: none; margin: 0; padding: 0; }
.hl-step {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr);
  gap: var(--sc-5) var(--sc-8); align-items: baseline;
  padding-block: var(--sc-6) var(--sc-7); border-top: 1px solid var(--sc-hairline);
}
.hl-step__line {
  margin: 0; font-size: var(--sc-t-3xl); font-weight: 520; line-height: 1;
  letter-spacing: -0.042em; text-wrap: balance;
}
.hl-step__how { margin: 0; color: var(--sc-ink-soft); max-width: 40ch; text-wrap: pretty; }
.hl-crack { position: relative; display: inline-block; color: transparent; }
.hl-crack::before, .hl-crack::after {
  content: attr(data-text) / ""; position: absolute; inset: 0; color: var(--sc-ink);
}
.hl-crack::before { clip-path: inset(0 0 54% 0); }
.hl-crack::after {
  clip-path: inset(46% 0 0 0); color: var(--sc-accent);
  transform: translate3d(0, 0, 0); transition: transform 900ms var(--sc-ease-out) 260ms;
}
.hl-step--break.sc-in .hl-crack::after { transform: translate3d(0.06em, 0.015em, 0); }

/* --------------------------------------------------- room 3: work, peak -- */
.hl-work__stage { background: var(--hl-night); }
.hl-work__line {
  position: absolute; left: 50%; top: 14%; bottom: 14%; width: 1px; z-index: 2; opacity: 0;
  background: linear-gradient(to bottom, transparent, var(--sc-accent) 20%, #FFF4DE 50%, var(--sc-accent) 80%, transparent);
  will-change: opacity, transform;
}
.hl-work__slit { position: absolute; inset: 0; z-index: 1; clip-path: inset(0 50% 0 50%); will-change: clip-path; }
.hl-scene {
  position: absolute; left: 50%; top: 50%;
  width: max(100vw, 177.78svh); height: max(56.25vw, 100svh);
  translate: -50% -50%; will-change: transform;
  --pw: 10.38%; --contact: 39.5%;
}
.hl-scene picture, .hl-scene__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hl-phones { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.hl-phone {
  position: absolute; bottom: var(--contact); left: calc(var(--cx) - var(--pw) / 2);
  width: var(--pw); aspect-ratio: 9 / 19.5;
  padding: 0.42%; border-radius: 15% / 7%;
  background: #0C0D0F;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 1.4vw 1.8vw 3vw -1vw rgb(0 0 0 / 0.7);
  opacity: 0; will-change: transform, opacity;
  --lit: 1;
}
.hl-phone:nth-child(1) { --cx: 22%; }
.hl-phone:nth-child(2) { --cx: 34%; --lit: 0.86; }
.hl-phone:nth-child(3) { --cx: 46%; --lit: 0.62; }
.hl-phone img {
  display: block; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 0; border-radius: 13% / 6%;
}
/* The same screen in Arabic and Turkish, stacked on the English one; scroll crossfades them. */
.hl-phone img.hl-phone__alt {
  position: absolute; z-index: 1; left: 0.42%; top: 0.194%;
  width: calc(100% - 0.84%); height: calc(100% - 0.388%);
  opacity: 0; will-change: opacity;
}
.hl-phone::before { z-index: 2; }
.hl-langs {
  position: absolute; left: var(--mid-cx, 34%); top: calc(100% - var(--contact) + 2.4%); translate: -50% 0;
  display: flex; gap: 1.1em; margin: 0; white-space: nowrap;
  font-size: clamp(0.68rem, 0.4rem + 0.5vw, 0.86rem); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgb(236 234 228 / 0.36); opacity: 0; will-change: opacity;
}
.hl-langs [lang='ar'] { letter-spacing: 0; font-size: 1.15em; text-transform: none; }
.hl-langs span { transition: color var(--sc-d-slow) var(--sc-ease-out); }
.hl-langs span.is-active { color: var(--sc-accent); }
.hl-phone::before {
  content: ""; position: absolute; inset: 0.42%; border-radius: 13% / 6%; pointer-events: none;
  background: linear-gradient(118deg, rgb(255 236 200 / 0.2) 0%, rgb(255 236 200 / 0) 36%, rgb(0 0 0 / 0.16) 100%),
              rgb(4 5 6 / calc((1 - var(--lit)) * 0.75));
}
.hl-phone::after {
  content: ""; position: absolute; left: -8%; right: -30%; bottom: -3.2%; height: 5%;
  background: radial-gradient(closest-side, rgb(0 0 0 / 0.78), rgb(0 0 0 / 0));
  z-index: -1;
}
.hl-work__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(270deg, rgb(5 6 7 / 0.88) 0%, rgb(5 6 7 / 0.6) 30%, rgb(5 6 7 / 0.08) 55%, transparent 64%);
}
.hl-work__copy {
  inset-inline: auto; left: auto; right: var(--sc-gutter);
  top: clamp(7rem, 21vh, 13rem); bottom: auto;
  max-width: min(30rem, 34vw);
}
.hl-work__title { font-size: var(--sc-t-3xl); font-weight: 540; letter-spacing: -0.045em; }
.hl-work__lede { margin-top: var(--sc-5); }
.hl-work__body { margin-top: var(--sc-4); }
.hl-links { display: flex; flex-wrap: wrap; gap: var(--sc-3) var(--sc-5); margin: var(--sc-6) 0 0; font-size: var(--sc-t-sm); }
.hl-links a, .hl-founder a, .hl-form__alt a, .hl-foot a {
  color: var(--sc-ink); text-decoration-color: color-mix(in oklab, var(--sc-accent) 70%, transparent);
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .hl-links a:hover, .hl-founder a:hover, .hl-form__alt a:hover, .hl-foot a:hover { color: var(--sc-accent); }
}

/* ------------------------------------------------------ room 4: ledger -- */
.hl-ledger { position: relative; background: var(--sc-canvas); padding-block: var(--sc-section); }
.hl-ledger__title { font-size: var(--sc-t-3xl); font-weight: 540; letter-spacing: -0.045em; margin-bottom: var(--sc-8); }
.hl-ledger__rows { margin: 0; }
.hl-row {
  display: grid; grid-template-columns: minmax(11rem, 0.85fr) minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: var(--sc-3) var(--sc-7); align-items: baseline;
  padding-block: var(--sc-6); border-top: 1px solid var(--sc-hairline);
}
.hl-row:last-child { border-bottom: 1px solid var(--sc-hairline); }
.hl-row dt { font-size: var(--sc-t-xl); font-weight: 520; letter-spacing: -0.03em; line-height: 1.1; }
.hl-row dd { margin: 0; }
.hl-row__what { max-width: 44ch; text-wrap: pretty; }
.hl-row__tools { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.hl-founder { margin-top: var(--sc-9); max-width: 44rem; }
.hl-founder p { margin: 0; color: var(--sc-ink-soft); }
.hl-founder p + p { margin-top: var(--sc-3); color: var(--sc-ink); font-size: var(--sc-t-lg); line-height: 1.4; letter-spacing: -0.015em; }

/* -------------------------------------------------------- room 5: desk -- */
.hl-desk { position: relative; background: var(--sc-canvas); padding-top: clamp(4rem, 10vh, 8rem); }
.hl-desk__grid {
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: var(--sc-8); align-items: center;
  padding-inline: var(--sc-gutter); max-width: 96rem; margin-inline: auto;
}
.hl-desk__photo { margin: 0; aspect-ratio: 1349 / 1530; max-height: 82svh; overflow: hidden; border-radius: 2px; }
.hl-desk__photo img { width: 100%; height: 100%; object-fit: cover; max-width: none; }
.hl-desk__form-wrap { position: relative; max-width: 34rem; }
.hl-desk__title { font-size: var(--sc-t-3xl); font-weight: 540; letter-spacing: -0.045em; margin-bottom: var(--sc-7); }
.hl-form { display: grid; gap: var(--sc-6); }
.hl-field { display: grid; gap: var(--sc-2); }
.hl-field label { font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hl-field :is(input, textarea) {
  width: 100%; padding: 0.7rem 0 0.75rem; border: 0; border-bottom: 1px solid var(--sc-hairline-strong);
  border-radius: 0; background: transparent; font-size: var(--sc-t-lg); line-height: 1.4;
  transition: border-color var(--sc-d-fast) var(--sc-ease-out);
}
.hl-field textarea { resize: vertical; min-height: 7.5rem; }
.hl-field :is(input, textarea):hover { border-bottom-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.hl-field :is(input, textarea):focus { border-bottom-color: var(--sc-accent); }
.hl-field :is(input, textarea):focus-visible { outline-offset: 6px; }
.hl-field :is(input, textarea)[aria-invalid="true"] { border-bottom-color: var(--hl-error); }
.hl-form__error { margin: 0; color: var(--hl-error); font-size: var(--sc-t-sm); }
.hl-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-5); margin: var(--sc-2) 0 0; }
.hl-form__note { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); max-width: 30ch; }
.hl-form__alt { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.hl-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sc-3);
  margin-top: var(--sc-section); padding: var(--sc-6) var(--sc-gutter) max(var(--sc-6), env(safe-area-inset-bottom));
  border-top: 1px solid var(--sc-hairline); font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
}
.hl-foot p { margin: 0; }
.hl-foot__brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.hl-foot__mark { width: 1.5rem; height: auto; aspect-ratio: 438 / 368; color: var(--sc-ink); }

/* ------------------------------------------------- signature: Inspect -- */
.hl-blueprint {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0;
  background-image:
    linear-gradient(to right, rgb(235 211 162 / 0.075) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(235 211 162 / 0.075) 1px, transparent 1px),
    linear-gradient(to right, rgb(235 211 162 / 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(235 211 162 / 0.03) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 12px 12px, 12px 12px;
  transition: opacity var(--sc-d-slow) var(--sc-ease-out);
}
.hl-photo { transition: filter 520ms var(--sc-ease-out); }
html.is-inspect .hl-blueprint { opacity: 1; }
html.is-inspect .hl-photo { filter: grayscale(1) contrast(1.45) brightness(0.74); }
html.is-inspect .hl-phone img { filter: grayscale(1) contrast(1.15); }
html.is-inspect [data-inspect] { outline: 1px dashed var(--sc-accent); outline-offset: 8px; }
html.is-inspect .hl-crack::after { color: var(--sc-ink); }

.hl-anno {
  position: absolute; z-index: 30; width: min(21rem, calc(100vw - 2 * var(--sc-gutter)));
  margin: 0; padding: 0.85rem 1rem 0.95rem;
  border: 1px dashed var(--sc-accent); border-radius: 2px;
  background: rgb(8 10 12 / 0.92);
  opacity: 0; visibility: hidden; transform: translate3d(0, 8px, 0);
  transition: opacity var(--sc-d-slow) var(--sc-ease-out), transform var(--sc-d-slow) var(--sc-ease-out), visibility 0s linear var(--sc-d-slow);
}
html.is-inspect .hl-anno {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--sc-d-slow) var(--sc-ease-out), transform var(--sc-d-slow) var(--sc-ease-out), visibility 0s;
}
.hl-anno::before {
  content: ""; position: absolute; top: 1.15rem; width: 2.25rem; height: 1px;
  background: var(--sc-accent); right: 100%;
}
.hl-anno__k { margin: 0 0 0.35rem; font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-accent); letter-spacing: 0; }
.hl-anno__v { margin: 0; font-size: var(--sc-t-xs); line-height: 1.55; color: color-mix(in oklab, var(--sc-ink) 82%, var(--sc-ink-soft)); }
.hl-anno--hero   { right: var(--sc-gutter); top: clamp(6rem, 18vh, 10rem); }
.hl-anno--method { right: var(--sc-gutter); top: clamp(5rem, 14vh, 10rem); }
.hl-anno--work   { left: var(--sc-gutter); top: clamp(5.5rem, 12vh, 8rem); }
.hl-anno--work::before, .hl-anno--desk::before { right: auto; left: 100%; }
.hl-anno--ledger { right: var(--sc-gutter); top: var(--sc-section); }
.hl-anno--desk   { right: 0; top: -1.5rem; transform: translate3d(0, calc(-100% + 8px), 0); }
html.is-inspect .hl-anno--desk { transform: translate3d(0, -100%, 0); }

.hl-readout {
  position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 58;
  translate: -50% 0; max-width: calc(100vw - 2 * var(--sc-gutter));
  display: flex; align-items: center; gap: var(--sc-4);
  padding: 0.55rem 0.9rem; border: 1px solid var(--sc-accent); border-radius: var(--sc-r-pill);
  background: rgb(8 10 12 / 0.94); font-size: var(--sc-t-xs); white-space: nowrap;
}
.hl-readout[hidden] { display: none; }
.hl-readout__title { margin: 0; color: var(--sc-accent); font-weight: 500; }
.hl-readout dl { margin: 0; display: flex; gap: var(--sc-4); }
.hl-readout dl > div { display: flex; gap: 0.4rem; }
.hl-readout dt { color: var(--sc-ink-soft); }
.hl-readout dd { margin: 0; font-family: var(--sc-font-mono); font-variant-numeric: tabular-nums; color: var(--sc-ink); }
@media (max-width: 860px) {
  .hl-readout { border-radius: 2px; white-space: normal; flex-direction: column; align-items: flex-start; gap: 0.35rem; width: calc(100vw - 2 * var(--sc-gutter)); }
  .hl-readout dl { flex-wrap: wrap; gap: 0.25rem var(--sc-4); }
}

/* ------------------------------------------------------- no-js floor -- */
.no-js [data-sc-cue], .no-js [data-sc-in], .no-js [data-sc-stagger] > * { opacity: 1; transform: none; }
.no-js .hl-work__slit { clip-path: none; }
.no-js .hl-phone { opacity: 1; }
.no-js .hl-hero__beat, .no-js .hl-inspect { display: none; }

/* ------------------------------------------------------ reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .hl-hero__beat, .hl-dust, .hl-bloom { display: none; }
  .hl-work__slit { clip-path: none; }
  .hl-phone { opacity: 1; }
  .hl-langs { opacity: 1; }
  .hl-work__line { display: none; }
  .hl-crack::after { transition: none; }
}

/* -------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  .hl-chrome { padding-block: max(0.8rem, env(safe-area-inset-top)) 0.8rem; }
  .hl-chrome__start, .hl-chrome__end { gap: var(--sc-3); }
  .hl-plan__here, .hl-mark__word { display: none; }
  .hl-plan svg { width: 5rem; }
  .hl-cta { padding: 0.45rem 0.75rem; }

  .hl-pillar { width: 4.5vw; }
  .hl-hero__copy { left: var(--sc-gutter); right: var(--sc-gutter); max-width: none; bottom: max(2rem, calc(env(safe-area-inset-bottom) + 1.25rem)); }
  .hl-hero__title { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .hl-hero__title { max-width: none; }
  .hl-hero__lede { font-size: var(--sc-t-base); max-width: 34ch; }
  .hl-hero__scrim {
    background: linear-gradient(to top, rgb(5 6 7 / 0.96) 0%, rgb(5 6 7 / 0.9) 30%, rgb(5 6 7 / 0.74) 44%, rgb(5 6 7 / 0.2) 58%, transparent 68%);
  }
  .hl-hero__beat { left: var(--sc-gutter); right: var(--sc-gutter); top: clamp(5.5rem, 16svh, 8rem); }
  .hl-beat { font-size: var(--sc-t-xl); }

  .hl-step { grid-template-columns: 1fr; padding-block: var(--sc-5) var(--sc-6); }
  .hl-step__line { font-size: var(--sc-t-2xl); }

  .hl-work__copy {
    inset-inline: var(--sc-gutter); right: var(--sc-gutter); top: auto; max-width: none;
    bottom: max(1.75rem, calc(env(safe-area-inset-bottom) + 1rem));
  }
  .hl-work__title { font-size: var(--sc-t-2xl); }
  .hl-work__lede { font-size: var(--sc-t-base); margin-top: var(--sc-3); }
  .hl-work__body { font-size: var(--sc-t-sm); margin-top: var(--sc-2); }
  .hl-links { margin-top: var(--sc-4); }
  .hl-work__scrim {
    background: linear-gradient(to top, rgb(5 6 7 / 0.95) 0%, rgb(5 6 7 / 0.82) 30%, rgb(5 6 7 / 0.2) 46%, transparent 54%);
  }

  .hl-row { grid-template-columns: 1fr; gap: var(--sc-2); padding-block: var(--sc-5); }
  .hl-desk__grid { grid-template-columns: 1fr; gap: var(--sc-7); }
  .hl-desk__photo { max-height: 46svh; aspect-ratio: 4 / 3; }
  .hl-anno, .hl-anno--desk { position: relative; inset: auto; margin-top: var(--sc-5); transform: none; display: none; }
  html.is-inspect .hl-anno { display: block; transform: none; }
  .hl-anno::before { display: none; }
  .hl-anno--hero, .hl-anno--work { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); top: 4.5rem; width: auto; margin: 0; }
}
@media (max-width: 860px) and (max-height: 720px) {
  .hl-work__body { display: none; }
  .hl-work__title { font-size: var(--sc-t-xl); }
  .hl-work__lede { font-size: var(--sc-t-sm); line-height: 1.5; }
  .hl-hero__title { font-size: clamp(2.3rem, 11vw, 3rem); }
}
@media (max-aspect-ratio: 3/4) {
  .hl-scene { width: max(100vw, 56.27svh); height: max(177.7vw, 100svh); --pw: 21%; --contact: 39.5%; --mid-cx: 50%; }
  /* On a phone the copy sits on the plinth face, so the language row moves above the screens. */
  .hl-langs { top: calc(100% - var(--contact) - 31%); }
  .hl-phone:nth-child(1) { --cx: 25%; }
  .hl-phone:nth-child(2) { --cx: 50%; }
  .hl-phone:nth-child(3) { --cx: 75%; }
}