/* ==========================================================================
   Renzo Builds — Design System
   Direction: architectural shop drawing.

   One accent, drawn from the materials the ICP actually works with:
   gunite plaster, still water, weathered stone. No neon, no gradient blobs.

   Contrast ratios below are computed, not guessed. Re-verify if any value
   changes. Body text must clear 4.5:1, large text and UI boundaries 3:1.
   ========================================================================== */

:root {
  /* --- Ground ------------------------------------------------------------ */
  --paper:      #EDEBE5;   /* bone — primary ground                        */
  --paper-deep: #E3E1D8;   /* recessed band                               */
  --night:      #121513;   /* dark band, not near-black                    */
  --night-soft: #1B1F1C;

  /* --- Ink --------------------------------------------------------------- */
  --ink:        #161917;   /* 15.4:1 on night, 13.2:1 on paper              */
  --ink-mid:    #2A2E2B;
  --stone:      #5F635D;   /* 5.14:1 on paper — secondary text             */
  --stone-on-night: #A8ADA6; /* 7.1:1 on night                              */

  /* --- Rules ------------------------------------------------------------- */
  --line:       #C7C6BC;
  --line-firm:  #9A9A8E;
  --line-night: #2E332F;

  /* --- Accent ------------------------------------------------------------ */
  --patina:         #2E5E52; /* 6.21:1 on paper — links, marks            */
  --patina-deep:    #1E4439; /* 9.4:1 on paper — accent text              */
  --patina-on-night:#7FBFAC; /* 8.71:1 on night                            */

  /* --- Type -------------------------------------------------------------- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 3.2rem);
  --step-4:  clamp(2.6rem, 1.8rem + 4vw, 5rem);
  --step-5:  clamp(3.2rem, 1.6rem + 7.5vw, 8.5rem);

  /* --- Space ------------------------------------------------------------- */
  --gap: clamp(1.25rem, 0.9rem + 1.6vw, 2rem);
  --band: clamp(4.5rem, 3rem + 7vw, 9rem);
  --edge: clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
  --measure: 62ch;

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 180ms;
  --t-base: 420ms;
  --t-slow: 780ms;

  --focus: var(--patina);
}

/* ==========================================================================
   Reset — deliberately small. No framework, no preflight, per Invariant 2.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header must never fully cover a focused element (WCAG 2.4.11) */
  scroll-padding-top: 5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* belt — the real fix is no fixed-width children */
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 1px;
}
.band--night :focus-visible { outline-color: var(--patina-on-night); }

/* ==========================================================================
   Structure
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: 82rem;
  margin-inline: auto;
  padding-inline: var(--edge);
}

.band { padding-block: var(--band); position: relative; }
.band--deep { background: var(--paper-deep); }
.band--night { background: var(--night); color: var(--paper); }
/* A dark band must never inherit a light-ground colour. Headings default to
   --ink (1.04:1 on --night) which is effectively invisible — set it explicitly. */
.band--night h1, .band--night h2, .band--night h3 { color: var(--paper); }

/* Full-bleed hairline — the shop-drawing signature */
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 0.85rem 1.25rem; font-family: var(--mono); font-size: var(--step--1);
}
.skip:focus { left: var(--edge); top: 0; }

/* ==========================================================================
   Type
   ========================================================================== */

.eyebrow {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--patina-deep);
  font-weight: 500;
}
.band--night .eyebrow { color: var(--patina-on-night); }

h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  text-wrap: balance;
}

.h-display { font-size: var(--step-5); letter-spacing: -0.05em; line-height: 0.92; }
.h-1 { font-size: var(--step-4); letter-spacing: -0.04em; line-height: 0.98; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 46ch;
  color: var(--ink-mid);
  text-wrap: pretty;
}
.band--night .lede { color: var(--stone-on-night); }

.prose { max-width: var(--measure); color: var(--stone); text-wrap: pretty; }
.band--night .prose { color: var(--stone-on-night); }

.mono { font-family: var(--mono); font-size: var(--step--1); letter-spacing: 0.02em; }

/* ==========================================================================
   Header
   ========================================================================== */

.masthead {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.masthead__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--gap); min-height: 4.5rem;
}

.brand {
  display: inline-flex; align-items: baseline; gap: 0.15em;
  font-weight: 600; font-size: 1.15rem; letter-spacing: -0.04em;
}
.brand__mark { color: var(--patina); }
.brand__tail { font-weight: 400; color: var(--stone); letter-spacing: -0.03em; }

.nav { display: flex; align-items: center; gap: clamp(1rem, 0.4rem + 1.6vw, 2rem); }
.nav a {
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--stone); padding-block: 0.4rem;
  transition: color var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--patina-deep); }
.nav a.btn, .nav a.btn:hover { color: var(--paper); }

@media (max-width: 34rem) {
  .nav a[data-optional] { display: none; }
}

/* Below ~26rem the full nav no longer fits beside the wordmark. Collapse to
   the primary action only; the footer keeps full section access. Measured:
   the previous layout overflowed 320px viewports by 50px. */
@media (max-width: 26rem) {
  .nav a[data-secondary] { display: none; }
  .nav .btn { padding-inline: 0.9rem; font-size: 0.72rem; letter-spacing: 0.04em; }
  .nav .btn__arrow { display: none; }
  .brand { font-size: 1.05rem; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
  padding: 1.05rem 1.5rem;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
  min-height: 3rem; /* comfortably past the 24px AA floor */
}
.btn:hover { background: var(--patina-deep); border-color: var(--patina-deep); }

.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.band--night .btn { background: var(--paper); color: var(--night); border-color: var(--paper); }
.band--night .btn:hover { background: var(--patina-on-night); border-color: var(--patina-on-night); color: var(--night); }

.btn__arrow { transition: transform var(--t-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translate(3px, -3px); }

/* ==========================================================================
   Hero — the largest typographic moment on the page
   ========================================================================== */

.hero { padding-block: clamp(3.5rem, 2rem + 8vw, 7rem) clamp(3rem, 2rem + 5vw, 5.5rem); }

.hero__grid {
  display: grid; gap: var(--gap);
  grid-template-columns: 1fr;
}
@media (min-width: 62rem) {
  .hero__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end; }
}

.hero__title { margin-block: 1.5rem 0; }
.hero__title em { font-style: normal; color: var(--patina); }

.hero__aside { display: grid; gap: 1.75rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem;
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding-top: 1.15rem; border-top: 1px solid var(--line);
}
.hero__meta li { font-family: var(--mono); font-size: var(--step--1); color: var(--stone); }

/* ==========================================================================
   Section header — numbered, as on a drawing sheet
   ========================================================================== */

.sect__head {
  display: grid; gap: 1.25rem var(--gap);
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
@media (min-width: 58rem) {
  .sect__head { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; }
}
.sect__num { display: block; margin-bottom: 1.1rem; }

/* ==========================================================================
   SIGNATURE — the work index as a specification schedule
   Spend the boldness here, and only here.
   ========================================================================== */

.schedule { border-top: 1px solid var(--ink); }

.schedule__row {
  display: grid; gap: 0.4rem 1.5rem;
  grid-template-columns: 1fr;
  padding-block: clamp(1.35rem, 1rem + 1.4vw, 2.1rem);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  transition: background var(--t-fast) var(--ease);
}
@media (min-width: 52rem) {
  .schedule__row { grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
}

.schedule__row:hover { background: color-mix(in srgb, var(--paper-deep) 60%, transparent); }

.schedule__id {
  font-family: var(--mono); font-size: var(--step--1);
  color: var(--patina-deep); letter-spacing: 0.08em;
}
.schedule__name {
  font-size: var(--step-2); font-weight: 500; letter-spacing: -0.03em;
  line-height: 1.1;
}
.schedule__tag {
  font-family: var(--mono); font-size: var(--step--1);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--stone);
}
/* Pending work is still real planned work. Greying the name would read as
   "dead link" rather than "in flight" — the status tag carries that signal. */
.schedule__row--pending .schedule__name { color: var(--ink-mid); }

/* A published concept is a real, reachable artifact. Give it a visible
   affordance so it does not look like the pending rows beside it. */
.schedule__row--live { position: relative; }
.schedule__row--live .schedule__name { color: var(--ink); }
.schedule__row--live .schedule__tag { color: var(--patina-deep); }
.schedule__row--live:hover { background: color-mix(in srgb, var(--paper-deep) 80%, transparent); }
.schedule__row--live:hover .schedule__name,
.schedule__row--live:focus-visible .schedule__name { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.schedule__row--live .schedule__id::after { content: " ↗"; }

/* ==========================================================================
   Capability list — rules and type, not cards
   ========================================================================== */

.caps { border-top: 1px solid var(--line); }
.caps__item {
  display: grid; gap: 0.35rem 1.5rem;
  grid-template-columns: 1fr;
  padding-block: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 48rem) {
  .caps__item { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.15fr); }
}
.caps__num { font-family: var(--mono); font-size: var(--step--1); color: var(--patina-deep); }
.caps__title { font-size: var(--step-2); font-weight: 500; letter-spacing: -0.03em; line-height: 1.1; }

/* ==========================================================================
   Process — stepped, connected
   ========================================================================== */

.process { display: grid; gap: 0; border-top: 1px solid var(--ink); }
@media (min-width: 56rem) { .process { grid-template-columns: repeat(5, 1fr); } }

.process__step {
  padding: clamp(1.4rem, 1rem + 1.4vw, 2rem) clamp(1rem, 0.6rem + 1.4vw, 1.75rem);
  border-bottom: 1px solid var(--line);
  position: relative;
}
@media (min-width: 56rem) {
  .process__step { border-bottom: 0; border-right: 1px solid var(--line); }
  .process__step:last-child { border-right: 0; }
}
.process__num { font-family: var(--mono); font-size: var(--step--1); color: var(--patina-deep); }
.process__name { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; margin-top: 0.5rem; }
.process__note { color: var(--stone); margin-top: 0.5rem; font-size: var(--step--1); line-height: 1.55; }

/* ==========================================================================
   Engagements — real pricing, taken from business/CANON.md
   ========================================================================== */

.tiers { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 52rem) { .tiers { grid-template-columns: repeat(3, 1fr); } }

.tier { background: var(--paper); padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); display: flex; flex-direction: column; gap: 1.1rem; }
.band--night .tier__name { color: var(--ink); }
@media (min-width: 52rem) {
  .tier--flag { background: var(--night); color: var(--paper); }
  .band--night .tier.tier--flag .tier__name { color: var(--paper); }
  .tier--flag .tier__price,
  .tier--flag .mono,
  .tier--flag .tier__flag { color: var(--patina-on-night); }
  .tier--flag .prose { color: var(--stone-on-night); }
}

.tier__name { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; }
.tier__price { font-family: var(--mono); font-size: var(--step-2); letter-spacing: -0.01em; color: var(--patina-deep); }
.tier__list { display: grid; gap: 0.55rem; margin-top: 0.25rem; }
.tier__list li {
  font-size: var(--step--1); line-height: 1.5; color: var(--stone);
  padding-left: 1.1rem; position: relative;
}
.tier__list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.5rem; height: 1px; background: var(--line-firm);
}
.tier__flag {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--patina-deep);
}

/* ==========================================================================
   Industries
   ========================================================================== */

/* ==========================================================================
   CTA
   ========================================================================== */

.cta { text-align: center; }
.cta__inner { display: grid; gap: 1.75rem; justify-items: center; max-width: 44rem; margin-inline: auto; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

.cta__note {
  font-family: var(--mono); font-size: var(--step--1); color: var(--stone);
  padding-top: 1.5rem; border-top: 1px solid var(--line);
  width: 100%;
}
.band--night .cta__note { color: var(--stone-on-night); border-color: var(--line-night); }

/* ==========================================================================
   Footer
   ========================================================================== */

.foot { padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); }
.foot__in { display: grid; gap: 1.5rem; }
@media (min-width: 44rem) { .foot__in { grid-template-columns: 1fr auto; align-items: center; } }
.foot__links { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; }
.foot__links a {
  font-family: var(--mono); font-size: var(--step--1); color: var(--stone);
  /* WCAG 2.5.8 (AA) floor is 24x24 CSS px. These links are text-only with no
     padding, so their height was just the mono line-height — 22px, under the
     bar. inline-flex + min-height fixes it without changing the visual rhythm. */
  display: inline-flex; align-items: center; min-height: 2rem;
}
.foot__links a:hover { color: var(--patina); }

/* ==========================================================================
   Motion — one idea, used sparingly.
   Native-first: opacity/transform only, so CLS stays at zero and
   compositing stays on the GPU. JS adds a class; CSS does the work.
   ========================================================================== */

/* Hidden state is gated behind a class the script adds. If the script never
   runs, throws, or is blocked, none of this applies and the page is simply
   visible. An animation must never be able to hide the content. */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}

.reveal-ready [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Honour the OS preference: strip vestibular triggers, keep state feedback. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .btn__arrow { transition: none; }
  .btn:hover .btn__arrow { transform: none; }
}

@media print {
  .masthead, .skip { display: none; }
  body { background: #fff; color: #000; }
}

/* ==========================================================================
   Small utilities — kept here so the markup carries no inline style.
   ========================================================================== */

.note-gap { margin-top: var(--gap); }
.note-gap--wide { margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.center { text-align: center; }
.foot__tag { color: var(--stone); margin-top: 0.6rem; }

/* ==========================================================================
   RHYTHM

   Every section previously began at the same left edge with the same width.
   Eight sections of identical geometry is a template, not a layout — it is
   the "identical container rhythm" anti-pattern, and it makes a long page
   feel longer. The bands below deliberately break the measure in four
   different ways. Variation is the point; none of it is decoration.
   ========================================================================== */

/* 2 — Wide. Breaks the measure outward, for the spec sheet. */
.wrap--wide { max-width: 96rem; }

/* 3 — Narrow head, full-width body. A single column pushed off the centre
   line, so the page has something other than "text starting at the left".
   Only the heading is offset: the schedule below needs the full measure,
   and a viewport media query cannot see a narrow container. */
@media (min-width: 62rem) {
  /* Single column, not the two-column head used elsewhere: at display size
     a 34rem column breaks to two words a line, which reads as broken rather
     than deliberate. The offset is the position, not the narrowness. */
  .sect__head--offset {
    max-width: 50rem; margin-left: auto; margin-right: 5%;
    display: block;
  }
  .sect__head--offset .prose { max-width: 44ch; margin-top: 1.75rem; }
}

/* 4 — Mirrored. The argument sits left and the detail right, inverting the
   measure the rest of the page uses. */
.sect--mirror .sect__head { grid-template-columns: 1fr; }
@media (min-width: 58rem) {
  .sect--mirror .sect__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .sect--mirror .sect__head > :first-child { order: 2; }
  .sect--mirror .sect__head > :last-child  { order: 1; }
}
.sect--mirror .sect__num { text-align: right; display: block; }

/* ==========================================================================
   EDITORIAL VOICE

   Archivo carries everything structural. A serif is introduced for exactly
   one job: the sentence that states a position. One additional face, used
   once per page at most, is a decision rather than a theme.
   ========================================================================== */

.statement {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 0.9rem + 2.2vw, 2.75rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.22;
  letter-spacing: -0.012em;
  text-wrap: balance;
  color: var(--ink);
}
.statement em { font-style: normal; color: var(--patina-deep); }
.statement--inset { max-width: 26ch; margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.band--night .statement { color: var(--paper); }
.band--night .statement em { color: var(--patina-on-night); }

/* ==========================================================================
   QUALIFYING PROFILE

   Replaces the category chip wall. The copy said "we are not looking for a
   category" and then listed twelve of them. The canon already defines the
   real test, so the test is what the section shows.
   ========================================================================== */

.tests { border-top: 1px solid var(--line); }

.tests__row {
  display: grid; gap: 0.4rem 1.5rem;
  grid-template-columns: 1fr;
  padding-block: clamp(1.4rem, 1.05rem + 1.4vw, 2.15rem);
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
@media (min-width: 52rem) { .tests__row { grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.05fr); } }

.tests__n { font-family: var(--mono); font-size: var(--step--1); color: var(--patina-deep); }
.tests__t { font-size: var(--step-1); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.tests__d { color: var(--stone); font-size: var(--step-0); line-height: 1.55; }
.tests__why { display: block; font-family: var(--mono); font-size: var(--step--1); color: var(--stone); margin-top: 0.35rem; }

.footnote-list {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem;
  font-family: var(--mono); font-size: var(--step--1); color: var(--stone);
  padding-top: 1.15rem; margin-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* 5 — Narrow, anchored left. Leaves a deliberate empty column on the right,
   which the page does not elsewhere. Reads as a margin note, not a gap. */
.sect--inset { max-width: 60rem; margin-left: var(--edge); margin-right: auto; }
@media (min-width: 62rem) { .sect--inset { margin-left: 8%; } }

/* ========================================================================
   THE WEBSITE TAKING SHAPE — four useful chapters, one assembled screen.
   Static flow is the default; the pinned sequence is a progressive upgrade.
   ======================================================================== */
.journey { margin-top: clamp(2rem, 4vw, 4rem); border-top: 1px solid var(--line-night); }
.journey__chapters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding-block: 0.7rem; border-bottom: 1px solid var(--line-night); }
.journey__chapters button { display: none; gap: 0.4rem; align-items: center; min-height: 2.75rem; padding: 0.55rem 0.65rem; border: 1px solid transparent; background: transparent; color: var(--stone-on-night); font: 500 0.68rem var(--mono); letter-spacing: 0.04em; cursor: pointer; }
.journey__chapters button span { color: var(--paper); font: 500 var(--step--1) var(--display); letter-spacing: 0; }
.journey__chapters button[aria-current="step"] { border-color: var(--patina-on-night); background: var(--night-soft); color: var(--patina-on-night); }
.journey__chapters button:focus-visible { outline: 2px solid var(--patina-on-night); outline-offset: 2px; }
.journey__chapter { display: grid; grid-template-columns: minmax(13rem, 0.72fr) minmax(0, 1.5fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(2rem, 4vw, 4rem) 0; border-bottom: 1px solid var(--line-night); }
.journey__copy { max-width: 32rem; }
.journey__index, .journey__craft { display: block; color: var(--patina-on-night); font: 0.7rem/1.5 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.journey__copy h3 { margin: 0.8rem 0; color: var(--paper); font-size: clamp(1.55rem, 1.1rem + 1.8vw, 2.65rem); line-height: 1.04; letter-spacing: -0.04em; text-wrap: balance; }
.journey__copy p { max-width: 43ch; margin: 0 0 1.25rem; color: var(--stone-on-night); line-height: 1.6; }
.journey__craft { color: var(--stone-on-night); letter-spacing: 0.055em; text-transform: none; }
.site-screen { position: relative; min-height: clamp(17rem, 31vw, 27rem); overflow: hidden; border: 1px solid #5b645b; background: var(--paper); color: var(--ink); box-shadow: 0 1.4rem 3.5rem #080b0999; }
.site-screen__chrome { height: 2rem; display: flex; align-items: center; gap: 0.35rem; padding-inline: 0.75rem; background: #e3e1d8; border-bottom: 1px solid #c7c6bc; }
.site-screen__chrome i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: #85877f; }
.site-screen__chrome span { margin: auto; color: #5f635d; font: 0.62rem var(--mono); }
.site-screen__body { position: relative; min-height: calc(clamp(17rem, 31vw, 27rem) - 2rem); padding: clamp(1rem, 3vw, 2.5rem); }
.site-screen__brand { display: flex; flex-direction: column; width: fit-content; font: 600 0.78rem/1.05 var(--display); letter-spacing: 0.1em; }
.site-screen__brand b { margin-top: 0.25rem; color: var(--stone); font: 0.53rem var(--mono); letter-spacing: 0.11em; }
.site-screen__headline { margin: 1.3rem 0 0.9rem; font-size: clamp(2.3rem, 5vw, 5rem); font-weight: 500; line-height: 0.98; letter-spacing: -0.04em; }
.site-screen__headline em, .identity-art em, .service-title em { color: var(--patina); font-family: var(--serif); font-weight: 400; }
.site-screen__body > p { max-width: 35ch; margin: 0.8rem 0 1rem; color: var(--stone); font-size: clamp(0.72rem, 1.3vw, 0.92rem); line-height: 1.45; }
.site-screen__cta { display: inline-flex; gap: 2rem; align-items: center; padding: 0.65rem 0.8rem; background: var(--patina); color: var(--paper); font: 0.68rem var(--mono); }
.site-screen__cta b { font-size: 1rem; }
.site-screen--message .site-screen__body { background: linear-gradient(110deg, var(--paper) 55%, #d0d5c7 55%); }
.identity-art { position: relative; display: grid; place-items: center; height: clamp(8rem, 17vw, 14rem); margin-top: 0.7rem; overflow: hidden; background: #d9ded3; }
.identity-art span { z-index: 1; color: #293a30; font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: 0.82; font-weight: 600; letter-spacing: -0.04em; }
.identity-art i { position: absolute; width: 35%; aspect-ratio: 1; right: 12%; border-radius: 50% 50% 4% 50%; background: #78917a; transform: rotate(-35deg); }
.identity-art b { position: absolute; bottom: 0.55rem; left: 0.7rem; color: #45534a; font: 0.55rem var(--mono); }
.site-screen--identity .site-screen__body { background: #e8e9df; }
.service-title, .contact-title { margin: 1rem 0 0.8rem; font-size: clamp(1.8rem, 4.2vw, 3.8rem); line-height: 1.02; letter-spacing: -0.04em; }
.service-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; margin-top: 1rem; }
.service-cards span { padding: 0.6rem; border: 1px solid #c7c6bc; font-size: 0.72rem; }
.service-cards b { display: block; margin-bottom: 0.5rem; color: var(--patina); font: 0.6rem var(--mono); }
.site-screen--experience .site-screen__body { background: linear-gradient(90deg, var(--paper) 0 68%, #d9dfd6 68%); }
.site-screen--connection .site-screen__body { max-width: 42rem; margin-inline: auto; }
.contact-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin: 0.8rem 0; }
.contact-fields span { min-height: 2.1rem; padding: 0.55rem; border: 1px solid #c7c6bc; color: var(--stone); font: 0.58rem var(--mono); }
.contact-fields span:last-child { grid-column: 1 / -1; min-height: 3rem; }
.journey__skip { display: inline-flex; gap: 0.45rem; align-items: center; margin-left: auto; padding: 0.6rem 0.35rem; color: var(--patina-on-night); font: 0.68rem var(--mono); text-decoration-thickness: 1px; text-underline-offset: 0.3rem; white-space: nowrap; }

/* Enhanced desktop: the same screen turns through chapters as the reader scrolls. */
.journey.is-enhanced { position: relative; height: 360svh; border: 0; }
.journey.is-enhanced .journey__chapters button { display: inline-flex; }
.journey.is-enhanced .journey__chapters { position: sticky; z-index: 5; top: 5rem; background: var(--night); }
.journey.is-enhanced .journey__sequence { position: sticky; top: 10rem; height: min(66svh, 43rem); min-height: 27rem; perspective: 1100px; }
.journey.is-enhanced .journey__chapter { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1.5fr); gap: clamp(1.5rem, 4vw, 4rem); padding: 1.5rem 0; border: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: none; transition: opacity 220ms ease, visibility 0s linear 560ms; }
.journey.is-enhanced .journey__chapter.is-active { z-index: 2; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.journey.is-enhanced .journey__chapter.is-past { z-index: 1; }
.journey.is-enhanced .site-screen { transform: rotateY(56deg) translateX(2rem) scale(.94); transform-origin: left center; transform-style: preserve-3d; backface-visibility: hidden; box-shadow: 14px 14px 0 -1px #788378, 27px 27px 0 -2px var(--patina), 0 1.4rem 3.5rem #080b0999; transition: transform 560ms var(--ease), box-shadow 560ms var(--ease); }
.journey.is-enhanced .journey__chapter.is-active .site-screen { transform: rotateY(0) translateX(0) scale(1); box-shadow: 4px 5px 0 -1px #788378, 8px 9px 0 -2px var(--patina), 0 1.4rem 3.5rem #080b0999; }
.journey.is-enhanced .journey__chapter.is-past .site-screen { transform-origin: right center; transform: rotateY(-56deg) translateX(-2rem) scale(.94); }
@media (max-height: 680px) and (min-width: 60rem) {
  .journey.is-enhanced .journey__sequence { top: 8rem; height: calc(100svh - 9rem); min-height: 0; }
  .journey.is-enhanced .journey__chapter { padding-block: 0.75rem; }
  .journey.is-enhanced .site-screen { min-height: 0; height: 100%; }
  .journey.is-enhanced .site-screen__body { min-height: 0; }
}
@media (max-width: 59.99rem) {
  .journey__chapter { grid-template-columns: 1fr; }
  .site-screen { min-height: 18rem; }
  .site-screen__body { min-height: 16rem; }
}
@media (max-width: 59.99rem) and (min-height: 700px) {
  .journey.is-enhanced .journey__chapters { top: 4.5rem; }
  .journey.is-enhanced .journey__sequence { top: 10.5rem; height: calc(100svh - 11.5rem); min-height: 0; }
  .journey.is-enhanced .journey__chapter { grid-template-columns: 1fr; align-content: start; gap: 0.65rem; padding: 0.35rem 0; }
  .journey.is-enhanced .journey__copy h3 { margin: 0.25rem 0 0.35rem; font-size: clamp(1.25rem, 3.5vw, 1.75rem); line-height: 1.08; }
  .journey.is-enhanced .journey__copy p { margin: 0 0 0.45rem; font-size: 0.82rem; line-height: 1.4; }
  .journey.is-enhanced .journey__craft { font-size: 0.62rem; }
  .journey.is-enhanced .site-screen { min-height: 13rem; height: auto; }
  .journey.is-enhanced .site-screen__body { min-height: 0; height: auto; padding: 0.8rem; }
  .journey.is-enhanced .site-screen__headline { margin-top: 0.7rem; font-size: clamp(2.1rem, 8vw, 3.3rem); }
  .journey.is-enhanced .site-screen__body > p { margin: 0.65rem 0; font-size: 0.7rem; }
  .journey.is-enhanced .identity-art { height: clamp(6rem, 18svh, 9rem); }
  .journey.is-enhanced .service-title, .journey.is-enhanced .contact-title { margin-top: 0.6rem; font-size: clamp(1.6rem, 6vw, 2.5rem); }
  .journey.is-enhanced .service-cards { margin-top: 0.55rem; }
  .journey.is-enhanced .service-cards span { padding: 0.4rem; }
  .journey.is-enhanced .contact-fields { margin: 0.45rem 0; }
  .journey.is-enhanced .contact-fields span { min-height: 1.8rem; padding: 0.4rem; }
  .journey.is-enhanced .site-screen__cta { padding: 0.45rem 0.65rem; }
  .journey.is-enhanced .journey__chapter.is-past .site-screen { transform-origin: right center; }
}
@media (max-width: 30rem) {
  .journey__chapters { gap: 0; }
  .journey__chapters button { padding-inline: 0.35rem; font-size: 0.59rem; }
  .journey__chapters button span { font-size: 0.75rem; }
  .site-screen { min-height: 17rem; }
  .site-screen__body { min-height: 15rem; padding: 1rem; }
  .journey__copy h3 { font-size: 1.7rem; }
  .journey__skip { font-size: 0.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .journey.is-enhanced { height: auto; }
  .journey.is-enhanced .journey__chapters, .journey.is-enhanced .journey__sequence { position: static; height: auto; }
  .journey.is-enhanced .journey__chapter { position: relative; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none; }
  .journey.is-enhanced .journey__chapter .site-screen { transform: none; box-shadow: 0 1.4rem 3.5rem #080b0999; }
}