/* losslesscorp.com, "Night log".
   Page-local styles over the scroll-craft engine (assets/scrollcraft.css, untouched).
   One night in the visitor's business: blue-black ground lifting to dawn slate,
   lamp amber as the only accent. */

@font-face {
  font-family: "Funnel Display";
  src: url("/assets/fonts/funnel-display-latin.woff2") format("woff2");
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --sc-canvas: #0a0d12;
  --sc-surface: #121722;
  --sc-ink: #efe9df;
  --sc-ink-soft: #aaa397;
  --sc-accent: #f2a541;
  --sc-accent-ink: #1b1206;
  --sc-font-display: "Funnel Display", "Geist", system-ui, sans-serif;
  --sc-font-text: "Geist", system-ui, sans-serif;
  --sc-shadow-color: 222 45% 3%;

  --accent-hover: #f7b862;
  --ink-2: #d3cdc3;          /* lede text: ink pulled one step toward the ground */
  --ink-faint: #8f897f;
  --line: color-mix(in oklab, var(--sc-ink) 14%, transparent);
  --line-strong: color-mix(in oklab, var(--sc-ink) 26%, transparent);
  --r: 12px;
  --bar-h: 64px;
  --rail-w: 0px;
  --edge-left: var(--sc-gutter);

  --t-hero: clamp(2.5rem, 1.25rem + 4.4vw, 5.25rem);
  --t-h2: clamp(2rem, 1.35rem + 2.6vw, 3.6rem);
  --t-h3: clamp(1.3rem, 1.12rem + 0.7vw, 1.7rem);

  color-scheme: dark;
}

/* The rail needs real width; below 1600px it folds into the bar as a clock
   plus a menu. --edge-left is in viewport coordinates (stage copy);
   --wrap-left is the same edge expressed as padding inside a centred .sc-wrap. */
:root { --wrap-left: var(--sc-gutter); }
@media (min-width: 1600px) {
  :root {
    --rail-w: 212px;
    --edge-left: max(var(--sc-gutter), calc(var(--rail-w) + 2.5rem));
    --wrap-left: max(var(--sc-gutter), calc(var(--rail-w) + 2.5rem - max(0px, (100vw - var(--sc-maxw)) / 2)));
  }
}

html { scroll-padding-top: calc(var(--bar-h) + 1rem); }
body {
  font-weight: 400;
  letter-spacing: 0;
}
.sc-wrap { padding-left: var(--wrap-left); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.nums { font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 1rem; top: 0.75rem; z-index: 100;
  padding: 0.6rem 1rem; border-radius: var(--r);
  background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

.display {
  font-family: var(--sc-font-display);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.028em;
  text-wrap: balance;
  color: var(--sc-ink);
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.75rem 1.3rem;
  border-radius: var(--r); border: 1px solid transparent;
  font: 600 0.98rem/1.1 var(--sc-font-text); letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out),
              color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--accent {
  background: var(--sc-accent); color: var(--sc-accent-ink);
  box-shadow: 0 1px 0 color-mix(in oklab, #fff 30%, transparent) inset, var(--sc-e1);
}
.btn--quiet {
  background: color-mix(in oklab, var(--sc-canvas) 40%, transparent);
  color: var(--sc-ink); border-color: var(--line-strong);
}
.btn--block { width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .btn--accent:hover { background: var(--accent-hover); }
  .btn--quiet:hover { border-color: color-mix(in oklab, var(--sc-ink) 55%, transparent); }
}
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.6; cursor: progress; transform: none; }

/* ------------------------------------------------------------------- bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--bar-h);
  display: flex; align-items: center; gap: 1rem;
  padding-inline: var(--sc-gutter);
}
.bar::before {
  content: ""; position: absolute; inset: 0 0 -28px 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--sc-canvas) 96%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 95%, transparent) 67%,
    transparent 100%);
}
.mark {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--sc-ink); text-decoration: none;
  font: 600 1.12rem/1 var(--sc-font-display); letter-spacing: -0.01em;
  padding: 0.35rem 0.15rem;
}
.mark__glyph { width: 30px; height: 30px; flex: none; }
.bar__clock {
  font: 500 1.05rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums;
  color: var(--sc-ink); letter-spacing: 0;
  padding-left: 1rem; border-left: 1px solid var(--line);
}
/* Below the rail's width the bar carries the night log: the hour and its name. */
.bar__label { font: 500 0.92rem/1 var(--sc-font-text); color: var(--sc-ink-soft); margin-left: -0.35rem; white-space: nowrap; }
.bar__cta { margin-left: auto; min-height: 42px; padding: 0.6rem 1.05rem; font-size: 0.92rem; }

.menu { position: relative; display: none; }
.menu__toggle {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; min-height: 42px; padding: 0.55rem 0.95rem;
  border: 1px solid var(--line-strong); border-radius: var(--r);
  font: 600 0.92rem/1 var(--sc-font-text); color: var(--sc-ink);
  background: color-mix(in oklab, var(--sc-canvas) 50%, transparent);
}
.menu__toggle::-webkit-details-marker { display: none; }
.menu[open] .menu__toggle { border-color: var(--sc-accent); }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 10px);
  width: min(20rem, calc(100vw - 2 * var(--sc-gutter)));
  padding: 0.5rem; border-radius: var(--r);
  background: color-mix(in oklab, var(--sc-surface) 96%, transparent);
  border: 1px solid var(--line);
  box-shadow: var(--sc-e3);
}
.menu__panel .hours a { padding: 0.8rem 0.75rem; border-radius: calc(var(--r) - 0.5rem); }   /* concentric with the panel */
.menu__panel .hours a:hover { background: color-mix(in oklab, var(--sc-ink) 6%, transparent); }

/* hour list, shared by the rail and the menu */
.hours a {
  display: grid; grid-template-columns: 3.4em 1fr; align-items: baseline; gap: 0.7rem;
  color: var(--sc-ink-soft); text-decoration: none;
  font: 500 0.86rem/1.2 var(--sc-font-text);
  transition: color 160ms var(--sc-ease-out);
}
.hours__h { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.hours a[aria-current="true"] { color: var(--sc-ink); }
.hours a[aria-current="true"] .hours__h { color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .hours a:hover { color: var(--sc-ink); } }

/* ------------------------------------------------------------------ rail */
.rail {
  position: fixed; z-index: var(--sc-z-chrome);
  left: 0; top: 50%; translate: 0 -50%;
  width: var(--rail-w);
  padding: 1.25rem 0 1.25rem calc(var(--sc-gutter) * 0.5 + 0.5rem);
  display: none;
}
.rail::before {
  content: ""; position: absolute; inset: -12vh 0 -12vh 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to right,
    color-mix(in oklab, var(--sc-canvas) 80%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 48%, transparent) 62%,
    transparent 100%);
  mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
}
.rail__clock {
  font: 400 1.75rem/1 var(--sc-font-display); font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; color: var(--sc-ink);
  margin-bottom: 1.1rem;
}
.rail .hours { display: grid; gap: 0.15rem; }
.rail .hours a { padding: 0.42rem 0; position: relative; }
.rail .hours a::before {
  content: ""; position: absolute; left: -0.95rem; top: 50%; width: 0.5rem; height: 1px;
  background: var(--sc-accent); transform: scaleX(0); transform-origin: left;
  transition: transform 220ms var(--sc-ease-out);
}
.rail .hours a[aria-current="true"]::before { transform: scaleX(1); }

@media (min-width: 1600px) {
  .rail { display: block; }
  .bar__clock, .bar__label { display: none; }
}
@media (max-width: 1599px) {
  .menu { display: block; }
  .bar__cta { margin-left: auto; }
}
@media (max-width: 720px) {
  .bar__label { display: none; }
}
@media (max-width: 560px) {
  :root { --bar-h: 58px; }
  .bar { gap: 0.6rem; }
  .bar__cta { display: none; }
  .menu { margin-left: auto; }
  .mark { font-size: 1.02rem; }
  .mark__glyph { width: 26px; height: 26px; }
}

/* ============================================================ 22:40 hero */
.hero { background: #07090d; isolation: isolate; --mx: 0; --my: 0; }
.hero__far, .hero__far picture, .hero__poster, .hero__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.hero__far { z-index: 0; overflow: hidden; }
.hero__poster, .hero__video { object-fit: cover; object-position: 30% 50%; max-width: none; }
/* Wide screens: the window plate slides right so the headline owns the dark
   wall; the plate's left edge dissolves into the stage ground. */
@media (min-width: 861px) {
  .hero__far picture, .hero__poster, .hero__video { left: 12vw; }
  .hero__far {
    -webkit-mask-image: linear-gradient(to right, transparent 12vw, #000 26vw);
            mask-image: linear-gradient(to right, transparent 12vw, #000 26vw);
  }
}
.hero__video { opacity: 0; transition: opacity 600ms var(--sc-ease-out); }
.hero__video.is-playing { opacity: 1; }
/* A warm pool where the lamp throws light onto the frame. */
.hero__pool {
  position: absolute; z-index: 1; pointer-events: none;
  right: -6vw; bottom: -10vh; width: 62vw; height: 72vh;
  background: radial-gradient(closest-side, rgb(242 165 65 / 0.16), rgb(242 165 65 / 0.05) 55%, transparent 100%);
  mix-blend-mode: screen;
}
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(6 8 11 / 0.92) 0%, rgb(6 8 11 / 0.7) 26%, rgb(6 8 11 / 0.18) 50%, transparent 64%),
    linear-gradient(0deg, rgb(6 8 11 / 0.55) 0%, transparent 34%);
}
.hero__mid {
  position: absolute; z-index: 4; max-width: none;
  width: clamp(420px, 40vw, 820px); height: auto;
  right: -2vw; bottom: -4vh;
  transform-origin: 70% 100%;
  filter: drop-shadow(0 18px 30px rgb(3 4 6 / 0.55));
}
.hero__near {
  position: absolute; z-index: 6; max-width: none; pointer-events: none;
  /* Sized by width, placed from the copy block: the leaf's top always sits
     16px under the buttons, whatever the viewport's shape (980x928 cutout). */
  --leaf-w: clamp(260px, 22vw, 480px);
  width: var(--leaf-w); height: auto;
  left: -6vw; bottom: calc(clamp(6rem, 21vh, 13rem) - var(--leaf-w) * 0.947 - 16px);
  transform-origin: 0% 100%;
  /* The cutout is nearly black; lift it and catch the lamp on its far edge. */
  filter: blur(1.2px) brightness(1.9) saturate(1.05) drop-shadow(4px -3px 8px rgb(242 165 65 / 0.2));
}
.hero__copy {
  position: absolute; z-index: 5;
  left: var(--edge-left); bottom: clamp(6rem, 21vh, 13rem);
  width: min(44rem, 52vw);
}
.hero__title {
  font-family: var(--sc-font-display);
  /* 7.8em holds exactly three lines: "AI integration / that evolves with /
     your business" (measured: the longest line is 7.46em, two lines would
     need 8.05em). The size keeps that measure on the dark wall, short of the
     window glass, at every width. */
  font-size: min(var(--t-hero), 5.6vw); font-weight: 500;
  line-height: 0.98; letter-spacing: -0.034em;
  text-wrap: balance; max-width: 7.8em;
}
@media (min-width: 1600px) { .hero__title { font-size: min(var(--t-hero), 4.6vw); } }
.hero__lede {
  margin-top: 1.4rem; max-width: 34ch;
  font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.28rem); line-height: 1.5;
  color: var(--ink-2);
}
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero__second {
  position: absolute; z-index: 5;
  left: var(--edge-left); top: 50%; translate: 0 -50%;
  width: min(34rem, 40vw);
  font: 500 clamp(1.9rem, 1.2rem + 2.2vw, 3.2rem)/1.06 var(--sc-font-display);
  letter-spacing: -0.026em; text-wrap: balance;
}

/* Depth: each plane moves at its own rate off the act's progress. */
@media (prefers-reduced-motion: no-preference) {
  .hero__far {
    scale: calc(1 + var(--sc-p, 0) * 0.06);
    translate: calc(var(--mx) * -5px) calc(var(--sc-p, 0) * -2.2vh + var(--my) * -3px);
  }
  .hero__pool { animation: pool 7.5s ease-in-out infinite alternate; }
  .hero__mid {
    scale: calc(1 + var(--sc-p, 0) * 0.12);
    translate: calc(var(--sc-p, 0) * 3vw + var(--mx) * 10px) calc(var(--sc-p, 0) * 6vh + var(--my) * 6px);
  }
  .hero__near {
    scale: calc(1 + var(--sc-p, 0) * 0.3);
    translate: calc(var(--sc-p, 0) * -9vw + var(--mx) * 22px) calc(var(--sc-p, 0) * 14vh + var(--my) * 12px);
  }
}
@keyframes pool { from { opacity: 0.78; } to { opacity: 1; } }

@media (max-width: 860px) {
  .hero__poster, .hero__video { object-position: 50% 50%; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgb(6 8 11 / 0.93) 0%, rgb(6 8 11 / 0.84) 34%, rgb(6 8 11 / 0.36) 52%, transparent 66%),
      linear-gradient(0deg, rgb(6 8 11 / 0.5) 0%, transparent 30%);
  }
  .hero__copy {
    left: var(--sc-gutter); right: var(--sc-gutter); width: auto;
    top: calc(var(--bar-h) + 1.5rem); bottom: auto;
  }
  .hero__title { font-size: clamp(2.3rem, 1.2rem + 5.4vw, 3.4rem); }
  .hero__lede { margin-top: 1rem; font-size: 1.05rem; }
  .actions { margin-top: 1.4rem; }
  .actions .btn { flex: 1 1 auto; }
  .hero__second { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: calc(var(--bar-h) + 2rem); translate: none; }
  .hero__mid { width: min(76vw, 420px); right: -10vw; bottom: -3vh; }
  .hero__near { width: min(54vw, 300px); left: -14vw; bottom: -5vh; }
  .hero__pool { width: 90vw; height: 50vh; right: -20vw; }
}

/* ======================================================= 23:15 your stack */
.act-stack { padding-block: clamp(5rem, 13vh, 10rem) clamp(4rem, 9vh, 7rem); }
.stack__title { max-width: 14ch; }
.stack__list {
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  display: grid; gap: clamp(0.9rem, 2.2vh, 1.5rem);
  font: 400 clamp(1.15rem, 0.95rem + 0.9vw, 1.65rem)/1.3 var(--sc-font-text);
  color: var(--sc-ink-soft);
}
.stack__tool {
  font-family: var(--sc-font-display); font-weight: 500;
  font-size: 1.32em; letter-spacing: -0.02em; color: var(--sc-ink);
}
/* Slices sit off-register, the way the tools do. */
@media (min-width: 861px) {
  .stack__list li:nth-child(1) { margin-left: 0; }
  .stack__list li:nth-child(2) { margin-left: 22%; }
  .stack__list li:nth-child(3) { margin-left: 7%; }
  .stack__list li:nth-child(4) { margin-left: 34%; }
  .stack__list li:nth-child(5) { margin-left: 13%; }
  .stack__list li:nth-child(6) { margin-left: 41%; }
  .stack__list li:nth-child(7) { margin-left: 4%; }
  .stack__list li:nth-child(8) { margin-left: 27%; }
}

/* ========================================================== 02:00 silence */
.act-silence {
  min-height: 92vh; min-height: 92svh;
  display: grid; place-items: center end;
  padding-inline: var(--wrap-left) calc(var(--sc-gutter) + 4vw);
}
.silence__hour {
  font: 300 clamp(5.5rem, 3rem + 13vw, 15rem)/1 var(--sc-font-display);
  font-variant-numeric: tabular-nums; letter-spacing: -0.04em;
  color: #262a31;
}
.act-silence [data-sc-in] { transition-duration: 1400ms; }

/* ========================================================= 03:00 the peak */
.peak { background: #06080b; }
.peak .sc-stage__poster { object-position: 60% 50%; }
.peak__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; display: none;
}
.has-reassembly .peak__canvas { display: block; }
.peak__scrim {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(6 8 11 / 0.82) 0%, rgb(6 8 11 / 0.5) 22%, transparent 44%),
    linear-gradient(0deg, rgb(6 8 11 / 0.72) 0%, transparent 26%);
}
.peak__copy {
  position: absolute; z-index: 5;
  left: var(--edge-left); top: calc(var(--bar-h) + clamp(1.5rem, 6vh, 4rem));
  width: min(44rem, 60vw);
}
.peak__title { max-width: 18ch; }
.peak__line {
  margin-top: 1.1rem; max-width: 36ch;
  font-size: clamp(1.08rem, 0.98rem + 0.4vw, 1.3rem); line-height: 1.5;
  color: var(--ink-2);
}
.peak__motto {
  position: absolute; z-index: 5;
  right: var(--sc-gutter); bottom: clamp(2.5rem, 9vh, 6rem);
  font: 500 clamp(1.6rem, 1.1rem + 1.9vw, 2.8rem)/1.05 var(--sc-font-display);
  letter-spacing: -0.024em; text-align: right;
}
@media (max-width: 860px) {
  .peak .sc-stage__poster { object-position: 58% 50%; }
  .peak__copy { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: calc(var(--bar-h) + 1.25rem); }
  .peak__title { font-size: clamp(1.9rem, 1.1rem + 4vw, 2.6rem); }
  .peak__line { font-size: 1.02rem; margin-top: 0.8rem; }
  .peak__motto { left: var(--sc-gutter); right: var(--sc-gutter); text-align: left; bottom: calc(env(safe-area-inset-bottom) + 2.5rem); }
}

/* ===================================================== 04:30 what we build */
.act-services { padding-block: clamp(4rem, 10vh, 8rem) clamp(5rem, 12vh, 9rem); }
.ledger { margin-top: clamp(2.5rem, 6vh, 4rem); border-top: 1px solid var(--line); }
.ledger__row {
  display: grid; grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1.2fr); gap: 1.5rem 3rem;
  padding-block: clamp(1.4rem, 3.2vh, 2.1rem);
  border-bottom: 1px solid var(--line);
}
.ledger dt {
  font: 500 var(--t-h3)/1.15 var(--sc-font-display); letter-spacing: -0.018em; color: var(--sc-ink);
}
.ledger dd { color: var(--sc-ink-soft); max-width: 58ch; }
.ledger dd p + p { margin-top: 0.75rem; }
.ledger__figure {
  font: 500 clamp(1.5rem, 1.15rem + 1.3vw, 2.2rem)/1.1 var(--sc-font-display);
  letter-spacing: -0.02em; color: var(--sc-ink);
}
.ledger__figure .nums { color: var(--sc-accent); }

.products { margin-top: clamp(5rem, 13vh, 9rem); }
.products__head p { margin-top: 0.9rem; color: var(--sc-ink-soft); max-width: 46ch; }
.products__grid {
  margin-top: clamp(2rem, 5vh, 3rem);
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(1.25rem, 3vw, 2.5rem);
}
.product {
  position: relative; padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r);
  background: linear-gradient(180deg, color-mix(in oklab, var(--sc-surface) 92%, #fff 2%), var(--sc-surface));
  box-shadow: var(--sc-edge), var(--sc-e2);
}
.product:nth-child(2) { margin-top: clamp(2rem, 7vh, 4.5rem); }
.product__name { font: 500 clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem)/1.05 var(--sc-font-display); letter-spacing: -0.024em; }
.product p { margin-top: 0.9rem; color: var(--sc-ink-soft); max-width: 44ch; }
.product__link {
  display: inline-block; margin-top: 1.4rem; padding-block: 0.35rem;
  color: var(--sc-accent); font-weight: 600; text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--sc-accent) 45%, transparent);
  text-underline-offset: 0.3em;
}
.product__link:hover { text-decoration-color: currentColor; }

@media (max-width: 860px) {
  .ledger__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .products__grid { grid-template-columns: 1fr; }
  .product:nth-child(2) { margin-top: 0; }
}

/* ===================================================== 05:15 how it works */
.process { display: grid; align-items: center; }
.process__inner { padding-top: var(--bar-h); }
.process__head p { margin-top: 0.9rem; color: var(--sc-ink-soft); font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); }
.process__head .display { max-width: 16ch; }
.process__track { position: relative; margin-top: clamp(2.5rem, 7vh, 4.5rem); }
.process__line {
  position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line);
}
.process__fill {
  position: absolute; inset: 0; background: var(--sc-accent);
  transform-origin: 0 50%;
  transform: scaleX(min(1, calc(var(--sc-p, 0) * 1.25)));
}
.process__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.step { position: relative; padding-top: 2rem; }
.step::before {
  content: ""; position: absolute; top: -5px; left: 0; width: 11px; height: 11px; border-radius: 50%;
  background: var(--sc-canvas); border: 1px solid var(--sc-accent);
  box-shadow: 0 0 0 4px var(--sc-canvas);
}
.step__when { font: 500 0.88rem/1.2 var(--sc-font-text); color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.step__name { margin-top: 0.85rem; font: 500 var(--t-h3)/1.1 var(--sc-font-display); letter-spacing: -0.02em; }
.step p:last-child { margin-top: 0.7rem; color: var(--sc-ink-soft); max-width: 34ch; }
@media (prefers-reduced-motion: reduce) {
  .process__fill { transform: none; }
}
@media (max-width: 860px) {
  .process__track { margin-top: 2rem; padding-left: 1.5rem; }
  .process__line { left: 0; right: auto; top: 0.3rem; bottom: 0.3rem; width: 1px; height: auto; }
  .process__fill { transform-origin: 50% 0; transform: scaleY(min(1, calc(var(--sc-p, 0) * 1.25))); }
  .process__steps { grid-template-columns: 1fr; gap: 1.6rem; }
  .step { padding-top: 0; }
  .step::before { top: 0.2rem; left: calc(-1.5rem - 5px); }
  .step__name { margin-top: 0.4rem; }
  .step p:last-child { margin-top: 0.4rem; font-size: 0.98rem; }
}
@media (max-width: 860px) and (prefers-reduced-motion: reduce) { .process__fill { transform: none; } }

/* ============================================================ 05:50 why us */
.act-why { position: relative; padding-block: clamp(5rem, 13vh, 10rem); isolation: isolate; }
.why__light {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 76% 30%, rgb(176 190 214 / 0.2), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
}
.why {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  grid-template-areas: "title title" "body mate" "figures figures";
  gap: clamp(2.5rem, 6vh, 4rem) clamp(2rem, 5vw, 5rem);
}
.why__title { grid-area: title; max-width: 17ch; font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.4rem); }
.why__body { grid-area: body; display: grid; gap: 1.1rem; max-width: 56ch; color: var(--sc-ink-soft); font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem); }
.why__warm { margin-top: 0.6rem; color: var(--sc-ink); font: 500 clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem)/1.2 var(--sc-font-display); letter-spacing: -0.015em; }
.why__mate { grid-area: mate; }
.why__mate-title { font: 500 var(--t-h3)/1.15 var(--sc-font-display); letter-spacing: -0.018em; }
.why__mate > p { margin-top: 0.8rem; color: var(--sc-ink-soft); }
.promises { margin-top: 1.8rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem 1.6rem; }
.promises dt { font-weight: 600; color: var(--sc-ink); }
.promises dd { margin-top: 0.3rem; color: var(--sc-ink-soft); font-size: 0.95rem; line-height: 1.5; }
.figures {
  grid-area: figures;
  display: flex; flex-wrap: wrap; gap: 0.75rem 3rem;
  padding-top: clamp(1.5rem, 4vh, 2.5rem); border-top: 1px solid var(--line);
  color: var(--sc-ink-soft); font-size: 1rem;
}
.figures .nums { font: 500 clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem)/1 var(--sc-font-display); color: var(--sc-ink); letter-spacing: -0.02em; margin-right: 0.35rem; }
@media (max-width: 960px) {
  .why { grid-template-columns: 1fr; grid-template-areas: "title" "body" "mate" "figures"; }
}
@media (max-width: 520px) {
  .promises { grid-template-columns: 1fr; }
  .figures { flex-direction: column; }
}

/* ========================================================= 06:15 questions */
.act-faq { padding-block: clamp(4rem, 10vh, 8rem); }
.faq { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__title { position: sticky; top: calc(var(--bar-h) + 2rem); }
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center;
  padding: 1.3rem 0.25rem; min-height: 56px;
  font: 500 clamp(1.08rem, 0.98rem + 0.4vw, 1.3rem)/1.35 var(--sc-font-text); color: var(--sc-ink);
  border-radius: var(--r);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; width: 12px; height: 12px; margin-right: 0.35rem;
  border-right: 1.5px solid var(--sc-ink-soft); border-bottom: 1.5px solid var(--sc-ink-soft);
  transform: translateY(-3px) rotate(45deg);
  transition: transform 220ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out);
}
.qa[open] summary::after { transform: translateY(2px) rotate(-135deg); border-color: var(--sc-accent); }
@media (hover: hover) and (pointer: fine) { .qa summary:hover { color: var(--accent-hover); } }
.qa p { padding: 0 3rem 1.6rem 0.25rem; color: var(--sc-ink-soft); max-width: 62ch; }
@media (max-width: 860px) {
  .faq { grid-template-columns: 1fr; }
  .faq__title { position: static; }
  .qa p { padding-right: 0.25rem; }
}

/* ============================================================ 06:40 morning */
.act-close { position: relative; }
.dawn { position: relative; height: 86vh; height: 86svh; overflow: hidden; background: #0e141d; }
.dawn__far { position: absolute; inset: 0; overflow: hidden; }
.dawn__poster, .dawn__video {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 30% 50%;
}
/* The close is the opening room: the same window plate in the same place,
   the same lamp on the same desk, only the light has changed. */
@media (min-width: 861px) {
  .dawn__poster, .dawn__video { left: 12vw; }
  .dawn__far {
    -webkit-mask-image: linear-gradient(to right, transparent 12vw, #000 26vw);
            mask-image: linear-gradient(to right, transparent 12vw, #000 26vw);
  }
}
.dawn__mid {
  position: absolute; z-index: 1; max-width: none;
  width: clamp(420px, 40vw, 820px); height: auto;
  right: -2vw; bottom: 4vh;
  filter: drop-shadow(0 18px 30px rgb(3 4 6 / 0.45));
}
.dawn__video { opacity: 0; transition: opacity 600ms var(--sc-ease-out); }
.dawn__video.is-playing { opacity: 1; }
.dawn__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(0deg, var(--sc-canvas) 0%, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 16%, color-mix(in oklab, var(--sc-canvas) 20%, transparent) 40%, transparent 56%);
}
.close {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 2rem clamp(2rem, 6vw, 6rem);
  align-items: end;
  /* The card starts under the desk line, so the lamp stands on the desk, not on the form. */
  margin-top: -6vh; margin-top: -6svh;
  padding-bottom: clamp(4rem, 10vh, 7rem);
}
.close__info { padding-bottom: 0.5rem; }
.close__title { max-width: 15ch; }
.close__info > p { margin-top: 1.1rem; max-width: 44ch; color: var(--ink-2); }
.close__details { margin-top: 1.8rem; display: grid; gap: 0.5rem; color: var(--sc-ink-soft); }
.close__details a { color: var(--sc-ink); font-weight: 600; text-underline-offset: 0.3em; text-decoration-color: color-mix(in oklab, var(--sc-accent) 60%, transparent); }
.close__details a:hover { text-decoration-color: var(--sc-accent); }

.close__form {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--r);
  background: color-mix(in oklab, var(--sc-surface) 94%, transparent);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: var(--sc-edge), var(--sc-e3);
  display: grid; gap: 1.1rem;
}
.close__form-title { font: 500 1.5rem/1.1 var(--sc-font-display); letter-spacing: -0.018em; margin-bottom: 0.2rem; }
.honey { display: none; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font: 500 0.9rem/1.2 var(--sc-font-text); color: var(--sc-ink); }
.field :is(input, select, textarea) {
  width: 100%; min-height: 48px; padding: 0.7rem 0.9rem;
  border-radius: var(--r); border: 1px solid var(--line-strong);
  background: color-mix(in oklab, var(--sc-canvas) 70%, transparent);
  color: var(--sc-ink); font-size: 1rem;
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out);
}
.field textarea { resize: vertical; min-height: 7.5rem; line-height: 1.5; }
.field select {
  appearance: none; -webkit-appearance: none; padding-right: 2.5rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--sc-ink-soft) 50%), linear-gradient(135deg, var(--sc-ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 52%, calc(100% - 0.9rem) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.field select option { background: var(--sc-surface); color: var(--sc-ink); }
.field ::placeholder { color: #8f897f; opacity: 1; }
.field :is(input, select, textarea):hover { border-color: color-mix(in oklab, var(--sc-ink) 40%, transparent); }
.field :is(input, select, textarea):focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; border-color: transparent; border-radius: var(--r); }
.field :is(input, textarea):user-invalid { border-color: #ef8a72; }
.close__form .btn { margin-top: 0.4rem; }

.foot { border-top: 1px solid var(--line); }
.foot__inner {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem 2.5rem;
  padding-block: 2rem calc(2rem + env(safe-area-inset-bottom));
}
.mark--foot { font-size: 1.05rem; }
.foot__motto { color: var(--sc-ink-soft); font-size: 0.95rem; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; justify-self: end; }
.foot__links a { color: var(--sc-ink-soft); text-decoration: none; font-size: 0.95rem; padding-block: 0.6rem; display: inline-block; }
.foot__links a:hover { color: var(--sc-ink); text-decoration: underline; }
.foot__copy { grid-column: 1 / -1; color: var(--ink-faint); font-size: 0.85rem; }

@media (max-width: 860px) {
  .dawn { height: 64vh; height: 64svh; }
  .dawn__poster, .dawn__video { object-position: 72% 50%; }
  .dawn__mid { width: min(76vw, 420px); right: -10vw; bottom: -3vh; }
  .close { grid-template-columns: 1fr; margin-top: -16svh; }
  .field-row { grid-template-columns: 1fr; }
  .foot__inner { grid-template-columns: 1fr; }
  .foot__links { justify-self: start; }
}