/* ──────────────────────────────────────────────────────────────
   ORIN Advisory — Website UI Kit
   Component-local styles. Token values come from
   ../../colors_and_type.css.
   ────────────────────────────────────────────────────────────── */

@import url("../../colors_and_type.css?v=2");

/* Website-level token overrides. The brand-system canvas
   (#0A1426) reads slightly too saturated in long-form layouts;
   override to a deeper, more muted midnight navy so the dark
   sections feel senior advisory rather than bright SaaS blue.
   Kept in one place so per-section rules can refer to it. */
:root {
  --bg-canvas: #070D1B;
  --bg-canvas-r: 7;
  --bg-canvas-g: 13;
  --bg-canvas-b: 27;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-canvas);
  color: var(--fg-default);
  font-family: var(--font-body);
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }

/* Layout container */
.container {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container--narrow {
  max-width: var(--content-narrow);
}

/* Generic section */
.section {
  /* Tightened global rhythm — sections breathe but no longer
     create dead air at the transitions. */
  padding-block: clamp(56px, 8vw, 120px);
}
.section--tight { padding-block: clamp(40px, 6vw, 80px); }
/* Principles section sits on clean solid navy (set below, with the
   About backing) — no atmospheric pattern, no overlay. */
.section--tight {
  position: relative;
}
.section--tight > .container { position: relative; z-index: 1; }

/* ── Logo / Brand lockup ───────────────────────────────────── */
.brand-lockup { display: inline-flex; align-items: center; gap: 16px; }
.brand-lockup__mark { width: 38px; height: auto; }
.brand-lockup__bar { width: 1px; height: 28px; background: rgba(198,168,91,0.5); }
.brand-lockup__word {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 23px;
  letter-spacing: 0.34em;
  color: var(--fg-default);
  line-height: 1;
}
.brand-lockup__sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.38em;
  color: var(--accent);
  margin-top: 4px;
}
.brand-lockup--vertical { flex-direction: column; gap: 12px; }
.brand-lockup--vertical .brand-lockup__mark { width: 56px; }
.brand-lockup--vertical .brand-lockup__word { font-size: 30px; }
.brand-lockup--vertical .brand-lockup__sub  { font-size: 11px; padding-left: 10px; }
.brand-lockup--xl .brand-lockup__mark { width: 96px; }
.brand-lockup--xl .brand-lockup__word { font-size: 56px; }
.brand-lockup--xl .brand-lockup__sub  { font-size: 14px; padding-left: 14px; }

/* ── Continuous atmospheric layer ────────────────────────────────
   One faint contour field rendered behind every section so the
   motif reads as a single environmental system, not per-section
   decoration. Sits at body level with z-index: 0; sections sit
   in normal flow (no z-index) so they render above this layer.
   Sections that need their own surface (Pull, Contact) declare
   `position: relative` so they cover this band where required. */
/* Atmospheric layer is positioned absolutely inside the body so it
   scrolls with the page — NOT fixed to the viewport. Sized via JS
   to match document height. Contour band sits behind the upper
   half of the page; wave band sits behind the lower half. */
.atmos {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100%;
  pointer-events: none;
  /* Clip the wave pseudo-element so it can't push the document's
     scroll height past the footer. */
  overflow: hidden;
  z-index: 0;
  /* Global continuous wave layer — pulled WAY back so the dark
     sections read as calm, structured navy rather than a wave
     background. A whisper of contour remains for depth only. */
  opacity: 0.12;
  background-image: url('../../assets/contour-pattern.svg');
  background-repeat: no-repeat;
  background-size: 120% auto;
  background-position: -8% 12%;
  /* Slow, almost imperceptible drift on the contour layer. */
  animation: atmosContourDrift 120s ease-in-out infinite;
  will-change: background-position;
}
.atmos::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 55%; height: 50%;
  background-image: url('../../assets/wave-pattern.svg');
  background-repeat: no-repeat;
  background-size: 110% auto;
  background-position: right center;
  opacity: 0.16;
  /* Wave layer drifts on a different cadence in the opposite
     direction so the two layers gently pass each other. */
  animation: atmosWaveDrift 160s ease-in-out infinite;
  will-change: background-position, transform;
}
@keyframes atmosContourDrift {
  0%, 100% { background-position: -8% 12%; }
  50%      { background-position: -5% 14%; }
}
@keyframes atmosWaveDrift {
  0%, 100% { background-position: right center; transform: translate3d(0, 0, 0); }
  50%      { background-position: 96% center;   transform: translate3d(-6px, 2px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .atmos, .atmos::after { animation: none; }
}
/* "Built on three principles" sits inside the About narrative —
   match the smaller, quieter treatment of the About internal
   labels rather than reading as a separate primary section. */
.section--tight .eyebrow {
  font-size: 10px;
  color: rgba(198, 168, 91, 0.70);
}
.topnav, .hero, .section, .pull, .contact, .footer { position: relative; z-index: 1; }
.contact { isolation: isolate; }

/* ── Hero North Star easter egg ─────────────────────────────────
   A small four-point ORIN star in the upper-right of the hero.
   In its default state it's almost invisible; as the cursor moves
   closer the JS layer raises --p (0..1) and the star brightens
   and scales. A soft radial halo blooms in unison so the effect
   reads as a light source coming alive, not just a hover state. */
/* North Star — a small, quiet navigation point, not an icon.
   Default: small + low opacity, no halo. Cursor proximity raises
   --p (0..1) for a gentle brighten + slight scale. The bloom is
   gone; only a whisper drop-shadow appears at full proximity so
   the mark reads as a light catching, never a sticker. */
.hero__star {
  position: absolute;
  top: 20%;
  right: 14%;
  width: 52px;
  height: 52px;
  pointer-events: none;
  z-index: 1;
}
.hero__star-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* Small at rest (~0.46), only a touch larger on proximity. --p is
     set at runtime via inline style; min() is inlined so the DS
     compiler doesn't read it as a token. */
  transform: scale(calc(0.46 + 0.20 * min(var(--p, 0), 1)));
  transform-origin: center;
  transition: transform 560ms var(--ease-standard);
  will-change: transform;
  /* Distant-star breathing — opacity only, so it multiplies over the
     mark without touching the proximity transform. Slow (9s) and
     gentle so it reads as a star breathing, not an animation. */
  animation: heroStarBreathe 10s ease-in-out infinite;
}
.hero__star-mark {
  fill: var(--accent);
  /* Understated at rest but a touch more present than before (0.48
     floor), lifting toward full presence on proximity. */
  opacity: calc(0.48 + 0.42 * min(var(--p, 0), 1));
  transition: opacity 560ms var(--ease-standard);
  /* No glow at rest — a faint, tight catch-light only near full proximity. */
  filter: drop-shadow(0 0 calc(1px + 4px * min(var(--p, 0), 1)) rgba(198, 168, 91, calc(0.30 * min(var(--p, 0), 1))));
  /* Scale-only pulse — independent of the mark's proximity opacity.
     A barely-there 9s breath, offset from the opacity cycle. */
  animation: heroStarPulse 10s ease-in-out infinite;
  transform-origin: center;
}
/* Two-channel distant-star pulse: a slow opacity breathe on the svg
   and a barely-there scale pulse on the mark. Neither touches the
   property the proximity response uses on its own element, so hover
   brightening + scaling still read cleanly. */
@keyframes heroStarBreathe {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
@keyframes heroStarPulse {
  0%, 100% { transform: scale(0.97); }
  50%      { transform: scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__star-svg, .hero__star-mark { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__star-svg, .hero__star-mark {
    transition: none;
  }
}
/* Mobile — the star is a tiny, static navigation point tucked into
   the top-right corner, well clear of the headline. No halo, no
   hover dance. ~14px effective (28px box × 0.46). */
@media (max-width: 760px) {
  .hero__star { width: 28px; height: 28px; top: 13%; right: 7%; }
}

/* ── Per-section wave overlays ──────────────────────────────────
   The global .atmos layer carries a continuous contour + wave
   through the document. These per-section overlays add quiet
   variation so each block has its own atmospheric treatment
   rather than reading as one repeated pattern. */

/* Hero — calm, editorial, spacious. No background wave/topography;
   the only atmospheric element is the canvas HeroFlowField, and
   even that stays invisible until the cursor approaches the star.
   The hero rests on the plain midnight-navy canvas. */

/* Canvas flow field — sits behind the hero content + star, never
   captures pointer events, responsive to the hero box. */
.hero__flow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__flow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
/* Layer the hero explicitly: wash (::before) at 0, flow field at 0,
   star at 1, content container at 2. We must NOT blanket-set
   `position` on all hero children — that would clobber the absolute
   positioning of the flow wrap and the star. */
.hero .container { position: relative; z-index: 2; }
.hero__flow { z-index: 0; }
.hero__star { z-index: 1; }

/* Approach / Positioning / Services sit on calm navy — the per-
   section background waves were removed so the dark sections read
   as structured and quiet. Section separators (below) now carry
   the visual rhythm between sections instead of texture. */
#approach > *,
.pull > *,
#services > * { position: relative; z-index: 1; }

/* Contact — a single, very faint gold-toned wave on the paper
   background, almost like a premium print foil. This is the one
   retained texture: it warms the otherwise-stark paper panel and
   reads as foil, not a SaaS wave. */
#contact::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-color: rgba(198, 168, 91, 0.08);
  -webkit-mask-image: url('../../assets/wave-pattern.svg');
          mask-image: url('../../assets/wave-pattern.svg');
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: 150% auto;
          mask-size: 150% auto;
  -webkit-mask-position: right bottom;
          mask-position: right bottom;
}
#contact > .container { position: relative; z-index: 1; }

/* ── Section separator ──────────────────────────────────────────
   Booklet-style punctuation between major sections: a hairline that
   fades in from both edges toward a small gold ORIN star at the
   centre. Restrained, never decorative. Sits on the page container
   width so it aligns with the content grid. */
.section-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  /* The separator carries its own vertical breathing room; adjacent
     sections keep their padding, so this adds a calm beat between. */
  padding-block: clamp(8px, 2vw, 28px);
}
/* Standardised across the whole page: identical width, thickness,
   opacity, star size and vertical rhythm on every separator. Strength
   pulled back ~12% from before so they guide rhythm without competing
   with content. */
.section-sep__line {
  flex: 1;
  height: 1px;
  max-width: 360px;
  background: linear-gradient(
    to right,
    rgba(198, 168, 91, 0) 0%,
    rgba(198, 168, 91, 0.19) 100%
  );
}
.section-sep__line:last-child {
  background: linear-gradient(
    to right,
    rgba(198, 168, 91, 0.19) 0%,
    rgba(198, 168, 91, 0) 100%
  );
}
.section-sep__star {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0.50;
}

/* ── Top nav ────────────────────────────────────────────────── */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Tightened left padding (15px) — keeps the monogram close to
     the page edge while preserving the wider right gutter for the
     CTA. */
  padding: 18px var(--gutter) 18px 15px;
  /* Solid midnight navy — no transparency or backdrop blur — so
     the navbar reads as the same colour over both dark and paper
     sections as the user scrolls. */
  background: var(--bg-canvas);
  /* Header hairline — kept deliberately navy/grey (never gold); gold
     stays reserved for meaning + brand moments. A touch more present
     than --divider-soft so the bar reads as anchored. */
  border-bottom: 1px solid rgba(245, 243, 238, 0.10);
}
/* Centre the monogram between the left page edge and the ORIN
   wordmark — the gold bar returns as a divider between mark and
   word. Gaps either side of the bar sum to one left-padding so
   the total mark→word distance matches edge→mark. */
.topnav .brand-lockup { gap: calc((15px - 1px) / 2); }
.topnav .brand-lockup__bar { display: block; }
.topnav__menu { display: flex; gap: 40px; }
.topnav__menu a {
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-default);
  position: relative;
  padding-bottom: 4px;
  transition: color var(--dur-base) var(--ease-standard);
  cursor: pointer;
}
.topnav__menu a:hover { color: var(--accent-hover); }
.topnav__menu a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  /* Subtle ORIN gold underline — refined and understated (1px,
     softened gold) rather than a bright/thick bar. */
  height: 1px;
  background: rgba(198, 168, 91, 0.62);
}

/* Right cluster — language toggle + CTA. */
.topnav__end {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.40);
}
.lang-toggle__sep {
  display: inline-block;
  width: 1px;
  height: 9px;
  background: rgba(212, 177, 90, 0.45);
}
.lang-toggle__btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 4px 0;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-standard);
}
.lang-toggle__btn:hover { color: rgba(245, 243, 238, 0.85); }
.lang-toggle__btn.is-active { color: var(--accent); }
.lang-toggle__btn:focus-visible {
  outline: 1px solid rgba(198, 168, 91, 0.55);
  outline-offset: 3px;
}

/* Burger — hidden on desktop, shown on mobile breakpoint. The icon
   swaps from two hairline bars to a quiet ORIN four-point star
   when the sheet is open. Both states share the same SVG so the
   transition feels like a single mark transforming. */
.topnav__burger {
  display: none;
  position: relative;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: var(--fg-default);
}
.topnav__burger-icon {
  width: 100%;
  height: 100%;
  transition: transform 600ms var(--ease-standard);
  transform-origin: 16px 16px;
}
.topnav__burger-bars,
.topnav__burger-star {
  transition: opacity 320ms var(--ease-standard),
              transform 600ms var(--ease-standard);
}
.topnav__burger-bars { transform-origin: 16px 16px; }
/* The star sits inside a group translated to (16, 16), so its
   local origin is already at the icon centre — animate from (0, 0)
   in its own coordinate space. */
.topnav__burger-star { transform-origin: 0 0; opacity: 0; transform: scale(0.5) rotate(-30deg); }
.topnav__burger-bars { opacity: 1; }
.topnav.is-open .topnav__burger { color: var(--accent); }
.topnav.is-open .topnav__burger-bars { opacity: 0; transform: scale(0.9); }
.topnav.is-open .topnav__burger-star { opacity: 1; transform: scale(1) rotate(0); }
@media (prefers-reduced-motion: reduce) {
  .topnav__burger-icon,
  .topnav__burger-bars,
  .topnav__burger-star { transition-duration: 0ms; }
}

/* Mobile sheet — full-viewport drawer that hosts nav, CTA, lang. */
.topnav__sheet {
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--bg-canvas);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 360ms var(--ease-standard),
              transform 360ms var(--ease-standard);
  display: flex;
  flex-direction: column;
}
/* The atmospheric wave continues quietly behind the sheet so the
   overlay never feels like a separate UI surface. */
.topnav__sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('../../assets/wave-pattern.svg');
  background-repeat: no-repeat;
  background-size: 140% auto;
  background-position: right 70%;
  opacity: 0.10;
}
.topnav__sheet.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.topnav__sheet-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 32px;
  padding: 40px 24px 32px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
}
.topnav__sheet-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  border-top: 1px solid rgba(245, 243, 238, 0.08);
}
.topnav__sheet-nav li { border-bottom: 1px solid rgba(245, 243, 238, 0.08); }
.topnav__sheet-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 28px;
  letter-spacing: -0.005em;
  color: var(--fg-default);
  text-decoration: none;
  padding: 22px 0;
  transition: color var(--dur-base) var(--ease-standard);
}
.topnav__sheet-nav a::after {
  content: "→";
  font-family: var(--font-mono);
  font-size: 16px;
  color: rgba(245, 243, 238, 0.30);
  transition: color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.topnav__sheet-nav a:hover { color: var(--accent-hover); }
.topnav__sheet-nav a:hover::after { color: var(--accent); transform: translateX(4px); }
.topnav__sheet-nav a.is-active { color: var(--accent); }
.topnav__sheet-nav a.is-active::after { color: var(--accent); }

.topnav__sheet-cta {
  align-self: stretch;
  justify-content: center;
  margin-top: auto;
}
/* Lang sits as a quiet utility band beneath the CTA — same footer
   group rather than a free-floating control. */
.topnav__sheet-lang {
  align-self: center;
  padding-top: 18px;
  gap: 24px;
  font-size: 11px;
  letter-spacing: 0.24em;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tr-button);
  text-transform: uppercase;
  padding: 14px 26px;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  transition: background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn--gold {
  background: #B89E55;
  color: var(--orin-navy-900);
}
.btn--gold:hover { background: #C6AB60; }
.btn--outline {
  background: transparent;
  color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(191, 163, 98, 0.55);
}
.btn--outline:hover {
  background: rgba(198,168,91,0.08);
  color: var(--accent-hover);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.btn--ghost {
  background: transparent;
  color: var(--fg-default);
  box-shadow: inset 0 0 0 1px rgba(245,243,238,0.26);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 1px rgba(245,243,238,0.48); }
.btn:active { transform: translateY(1px); }
.btn .arrow { width: 22px; height: 1px; background: currentColor; position: relative; opacity: 0.75; transition: opacity 0.3s ease; }
.btn .arrow::after {
  content: ""; position: absolute; right: -1px; top: -2px;
  width: 5px; height: 5px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover .arrow { opacity: 1; }

/* ── Eyebrow / rule helpers ─────────────────────────────────── */
.eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
}
.eyebrow--muted { color: var(--fg-muted); }
.rule-gold { display: block; width: 56px; height: 1px; background: var(--accent); border: none; }

/* ── Hero ───────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* Hero height tuned so centered content sits in the upper third
     of standard laptop viewports — CTAs land comfortably above
     the fold without crowding the headline. */
  min-height: 600px;
  padding-bottom: 56px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* Hero motif removed — the global .atmos layer carries the
   contour + wave through the hero now. */
.hero__bg { display: none; }
.hero__bg-DISABLED {
  position: absolute;
  top: -60px; right: -100px; bottom: -60px; left: -180px;
  pointer-events: none;
  background-image: url('../../assets/contour-pattern.svg');
  background-repeat: no-repeat;
  background-size: 95% auto;
  background-position: -40px 65%;
  opacity: 0.9;
  will-change: transform;
  animation: orinDriftA 64s cubic-bezier(0.45, 0, 0.55, 1) -18s infinite;
}
.hero__bg::after {
  content: "";
  position: absolute;
  /* Wave bleeds off bottom-right edge */
  right: -180px; bottom: -140px;
  width: 75%; height: 70%;
  background-image: url('../../assets/wave-pattern.svg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right bottom;
  opacity: 0.55;
  will-change: transform;
  animation: orinDriftB 88s cubic-bezier(0.45, 0, 0.55, 1) -32s infinite;
}

/* ── Layered drift ────────────────────────────────────────────────
   Two independent contour layers translate 2–6px on long async
   cycles. Calmer than parallax, slower than ambient motion. The
   intent is that the user notices only if they stay on the page. */
@keyframes orinDriftA {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(4px, -3px, 0); }
}
@keyframes orinDriftB {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-3px, 5px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg, .hero__bg::after { animation: none; }
}

/* ── Animated signal points (overlay on hero) ────────────────────
   Three async stars pulsing 6 → 13% over 11–17s, each anchored
   onto a contour intersection rather than floating in negative
   space. A 0.7px gold drop-shadow gives faint embedded luminance
   without a glow effect. Negative animation-delay puts each star
   mid-cycle on load. */
.hero__signals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  will-change: transform;
  animation: orinDriftC 76s cubic-bezier(0.45, 0, 0.55, 1) -47s infinite;
}
.hero__signals svg { width: 100%; height: 100%; display: block; }
@keyframes orinSignal {
  0%, 100% { opacity: 0.06; }
  50%      { opacity: 0.13; }
}
.hero__signals .signal {
  animation: orinSignal var(--dur, 14s) cubic-bezier(0.45, 0, 0.55, 1) infinite;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 0 0.7px rgba(191, 163, 98, 0.40));
  transform-box: fill-box;
}
@media (prefers-reduced-motion: reduce) {
  .hero__signals .signal { animation: none; opacity: 0.10; }
}

/* Signal layer carries its own micro-drift, slightly out of phase
   with the contour and wave beds so the depth never resolves
   into a single moving picture. */
@keyframes orinDriftC {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-2px, -2px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__signals { animation: none; }
}
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  max-width: 760px;
  /* Optical left alignment — Montserrat carries a small left
     side-bearing at display sizes, so the headline's visual edge
     sits a hair right of the grid. A negative indent pulls the
     whole stack back so the copy and CTA row share one optical
     axis with the rest of the page. */
  margin-left: -2px;
}
.hero__headline {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--fg-default);
  margin: 0;
  text-wrap: balance;
}
.hero__headline .g { color: var(--accent-text); }
/* Supporting sentence — sits in the same optical family as the
   headline (display face, light weight, gentle negative tracking)
   so it reads as a continuation of the statement, not body copy.
   Sits CLOSE to the headline (problem → solution). */
.hero__sub {
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(20px, 2.1vw, 27px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  /* Calmer than the headline — softer off-white so it reads as a
     quiet answer, not a second headline competing for weight. */
  color: rgba(245, 243, 238, 0.82);
  max-width: 520px;
  text-wrap: balance;
}
.hero__sub .g { color: var(--accent-text); }
/* Tagline — the quiet answer (principle). Sits FURTHER below the
   supporting sentence than the sentence sits below the headline,
   so the reading rhythm steps Problem → Solution → Principle. */
.hero__signature {
  margin: 30px 0 0;
  font-family: var(--font-display);
  font-weight: 500;
  /* Matches the footer tagline treatment (11px / 0.34em / gold) so the
     hero signature and footer signature read as one brand thread. */
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  /* Idle opacity sits at a legible gold (reads as a quiet signature,
     not greyed-out placeholder); the flow component raises it toward
     1.0 in JS as the lines unfold. CSS keeps a soft release. */
  opacity: 0.62;
  transition: opacity 480ms var(--ease-standard);
  pointer-events: none;
}
.hero__ctas { display: flex; gap: 14px; margin-top: 44px; }
@media (prefers-reduced-motion: reduce) {
  /* No unfolding interaction, so show the tagline at a fixed legible
     gold rather than its low idle opacity. */
  .hero__signature { opacity: 0.85; transition: none; }
}

/* ── About ──────────────────────────────────────────────────── */
/* About — the ORIN identity story: headline, then a pinned two-column
   scene — the scroll-driven symbol sequence on the left, the static
   Origo / Orion etymology on the right as the rational anchor. */
.about {
  padding-top: clamp(56px, 8vw, 120px);
  padding-bottom: clamp(48px, 6vw, 88px);
  background: var(--bg-canvas);
}
/* Head aligns to the same left grid and rhythm as every other
   section header (left-aligned in .container, matching max-width and
   bottom margin) — nested inside .container so it does NOT pick up
   the container's auto-centering. */
.abx__head { max-width: 720px; margin-bottom: 56px; }
.abx__title { margin-top: 18px; }
.abx__sub { margin-top: 18px; color: #f5f3ee; font-weight: 300; }

/* Two columns: story slider | static etymology. */
.abx__scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(48px, 7vw, 120px);
  align-items: center;
  width: 100%;
  margin-top: clamp(24px, 4vw, 48px);
}
/* LEFT — autoplaying identity slider. */
.abx__slider {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 3.5vw, 44px);
}
.abx__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(24px, 3vw, 40px);
  width: 100%;
  /* --star / --frame are set inline per active state by React and
     animate via the transitions on .abx-star / .abx-frame below. */
  --star: 1;
  --frame: 0;
}

/* Visual — the ORIN symbol. --star and --frame are set per active
   slide (Direction: star only · Structure: frame only · Clarity:
   both) and cross-dissolve via these transitions. */
.abx__visual {
  width: 100%;
  max-width: 280px;
}
.abx__svg { width: min(180px, 56vw); height: auto; display: block; margin: 0 auto; overflow: visible; }
.abx-frame {
  opacity: var(--frame);
  stroke-opacity: 0.92;
  transition: opacity 1.1s ease;
}
.abx-star {
  opacity: calc(0.02 + 0.98 * var(--star));
  transform: scale(calc(0.82 + 0.18 * var(--star)));
  transform-origin: 100px 112px;
  transform-box: view-box;
  transition: opacity 1.1s ease, transform 1.1s ease;
}

/* Principle caption beneath the mark — soft cross-dissolve between
   DIRECTION → STRUCTURE → CLARITY as the slider advances. */
.abx__caption { position: relative; width: 100%; min-height: 96px; }
.abx__caption-item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.9s ease, transform 0.9s ease;
  pointer-events: none;
}
.abx__caption-item.is-active {
  opacity: 1;
  transform: none;
}
.abx__caption-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.abx__caption-body {
  margin: 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245, 243, 238, 0.78);
  max-width: 340px;
}

/* Slider controls — understated 01 / 02 / 03 markers, no boxes. */
.abx__dots {
  display: flex;
  align-items: center;
  gap: 28px;
}
.abx__dot {
  appearance: none;
  background: none;
  border: none;
  padding: 6px 2px;
  cursor: pointer;
  position: relative;
}
.abx__dot-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: rgba(245, 243, 238, 0.40);
  transition: color 0.5s ease;
}
.abx__dot::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.abx__dot:hover .abx__dot-num { color: rgba(245, 243, 238, 0.72); }
.abx__dot.is-active .abx__dot-num { color: var(--accent-text); }
.abx__dot.is-active::after { transform: scaleX(1); opacity: 1; }
.abx__dot:focus-visible { outline: 1px solid rgba(198, 168, 91, 0.6); outline-offset: 3px; }

/* Story — Origo / Orion etymology and the bridge line. Static in the
   right column, the rational anchor beside the slider. */
.abx__story {
  display: flex;
  flex-direction: column;
  gap: 26px;
  max-width: 520px;
}
@media (prefers-reduced-motion: reduce) {
  .abx__caption-item, .abx-star, .abx-frame { transition: none; }
}
.abx__name-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: rgba(198, 168, 91, 0.70);
  line-height: 1;
}
.abx__etymology {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.abx__etymology-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 24px;
}
.abx__etymology-row dt {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.005em;
  color: var(--accent);
}
.abx__etymology-row dd {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.55;
  color: #f5f3ee;
}
.abx__bridge {
  margin: 0;
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 243, 238, 0.78);
  text-wrap: pretty;
}

/* ── Section header ─────────────────────────────────────────── */
.section-head { display: flex; flex-direction: column; gap: 18px; margin-bottom: 56px; max-width: 720px; }
.section-head__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--fg-default);
  margin: 0;
  text-wrap: balance;
}
.section-head__title .g { color: var(--accent-text); }
.section-head__sub {
  font-size: 16px;
  line-height: 1.65;
  /* Default to the canonical off-white at reduced weight so dark
     sections share one body-copy color. Light sections override. */
  font-weight: 300;
  color: #f5f3ee;
  max-width: 520px;
}
/* Services credibility line — sits under the lead-in as quiet
   supporting context (experience, not a CV). Lighter and a touch
   smaller so it reads as background, never competing with the
   headline or the accordion below. */
.section-head__sub--meta {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(245, 243, 238, 0.62);
  max-width: 580px;
}

/* ── Services list (accordion) ──────────────────────────────────
   A quiet vertical list. Each row is a header (num · title · +).
   Click to expand; the "+" rotates to "×". A single open row at
   a time keeps the rhythm calm. Transparent rows let the global
   atmospheric layer read through. */
.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--divider-soft);
}
.service-row {
  border-bottom: 1px solid var(--divider-soft);
}
.service-row__header {
  width: 100%;
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 34px 8px;
  background: transparent;
  border: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: background var(--dur-base) var(--ease-standard);
}
.service-row__header:hover { background: rgba(245, 243, 238, 0.025); }
.service-row__header:focus-visible { outline: none; background: rgba(245, 243, 238, 0.04); }
.service-row__num {
  /* Editorial numbering matched to the Approach steps (display face,
     light weight, large + calm) rather than a small monospace index,
     so Services reads from the same type system, not SaaS/dashboard. */
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1;
  color: var(--accent);
  letter-spacing: 0;
}
.service-row__headings {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.service-row__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 1.9vw, 25px);
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: #f5f3ee;
  margin: 0;
  text-wrap: balance;
}
.service-row.is-open .service-row__title { color: var(--accent-text); }
/* Short client situation/question — calmer, lighter weight so the
   collapsed row reads instantly: title (what) + situation (when). */
.service-row__situation {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.4;
  color: rgba(245, 243, 238, 0.52);
  letter-spacing: 0.002em;
  text-wrap: pretty;
}

/* Toggle — closed: thin plus. Open: ORIN Direction star (same
   geometry as the mobile menu Easter egg). The two states share
   one SVG so the transition reads as a single mark transforming. */
.service-row__toggle {
  position: relative;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(191, 163, 98, 0.55);
  border-radius: 50%;
  color: var(--accent);
  flex-shrink: 0;
  transition: border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard);
}
.service-row__header:hover .service-row__toggle {
  border-color: var(--accent);
  background: rgba(198, 168, 91, 0.08);
}
.service-row__toggle-icon {
  width: 16px;
  height: 16px;
  overflow: visible;
}
.service-row__toggle-plus,
.service-row__toggle-star {
  transform-origin: 12px 12px;
}
/* Plus → star swap. Transitions/animations on these get stuck or
   drop at their start value in this runtime, so the swap is an
   instant, dependable state change: on open the plus hides and the
   ORIN star shows at full opacity. */
.service-row__toggle-plus { opacity: 1; }
.service-row__toggle-star { opacity: 0; transform: scale(0.45) rotate(-30deg); transform-origin: 12px 12px; }
.service-row.is-open .service-row__toggle { background: rgba(198, 168, 91, 0.10); }
.service-row.is-open .service-row__toggle-plus { opacity: 0; }
.service-row.is-open .service-row__toggle-star {
  opacity: 1;
  transform: scale(1) rotate(0);
}
@media (prefers-reduced-motion: reduce) {
  .service-row__toggle-star { transition-duration: 0ms; }
}

/* Collapsible panel — animate max-height (robust across nested grid
   content, where the 0fr→1fr track trick collapses). The cap is
   generous so the tallest expanded copy (and mobile's stacked blocks)
   never clips; easing still reads as a calm reveal. */
.service-row__panel {
  max-height: 0;
  overflow: hidden;
}
.service-row.is-open .service-row__panel { max-height: 3200px; }
.service-row__panel-inner {
  overflow: hidden;
  min-height: 0;
}
.service-row.is-open .service-row__panel-inner {
  padding-top: 20px;
  padding-bottom: 56px;
}
/* Three labelled blocks — offset to align under the title column
   (clear of the number gutter), then split into four columns so the
   expanded state reads as a premium advisory catalogue entry. */
.service-row__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 3vw, 52px);
  padding-left: 112px;
  padding-right: 8px;
}
.service-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Thin gold hairline above each block ties the three together as
     one structured row without SaaS-style card chrome. */
  border-top: 1px solid rgba(198, 168, 91, 0.28);
  padding-top: 16px;
}
.service-block__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.service-block__body {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(14px, 1.05vw, 15px);
  font-weight: 300;
  line-height: 1.62;
  color: rgba(245, 243, 238, 0.74);
  text-wrap: pretty;
}
/* WHAT WE SUPPORT — capability list. Restrained editorial bullets:
   a thin gold tick mark via ::before, no SaaS chips or icons. */
.service-block__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.service-block__list-item {
  position: relative;
  padding-left: 16px;
  font-size: clamp(13px, 1vw, 14px);
  font-weight: 300;
  line-height: 1.4;
  color: rgba(245, 243, 238, 0.74);
}
.service-block__list-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 1px;
  background: var(--accent);
  opacity: 0.7;
}

/* ── Pull statement ─────────────────────────────────────────── */
.pull {
  background: var(--bg-canvas);
  position: relative;
  overflow: hidden;
}
/* Pull-statement local motif removed — the global .atmos layer
   carries the wave through this section. */
.pull__bg { display: none; }
.pull__quote {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--fg-default);
  max-width: 880px;
  margin: 0;
  text-wrap: balance;
}
.pull__quote .g { color: var(--accent-text); }
.pull__attr {
  position: relative; z-index: 1;
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.pull__attr-rule { width: 32px; height: 1px; background: var(--accent); }

/* ── Approach — alignment puzzle ────────────────────────────── */
.apx__head { max-width: 760px; }
.apx__title { margin-top: 18px; }
.apx__sub { margin-top: 18px; color: #f5f3ee; font-weight: 300; }

.apx__body {
  margin-top: clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

/* Visual — the four sectors + North Star. Square, centred. */
.apx__visual {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  --asm: 0;
}
.apx__svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Sectors: dark fill, thin gold outline only. Outline brightens
   subtly as the ring assembles (driven by --asm). */
.apx-piece__shape {
  fill: rgba(255, 255, 255, 0.018);
  stroke: var(--accent);
  stroke-width: 1;
  stroke-opacity: calc(0.34 + 0.30 * var(--asm));
  vector-effect: non-scaling-stroke;
}
/* North Star — matches the ORIN mark. Soft glow grows gently with
   assembly; never a heavy bloom. */
.apx-star path {
  fill: var(--accent);
  opacity: calc(0.62 + 0.30 * var(--asm));
  filter: drop-shadow(0 0 calc(2px + 8px * var(--asm)) rgba(198, 168, 91, calc(0.18 * var(--asm))));
}
/* Once the puzzle is complete, the star breathes — a very slow,
   quiet pulse (same language as the hero star). */
.apx__visual.is-aligned .apx-star path {
  animation: apxStarPulse 9s ease-in-out infinite;
}
@keyframes apxStarPulse {
  0%, 100% { opacity: 0.86; }
  50%      { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .apx__visual.is-aligned .apx-star path { animation: none; }
}

/* Piece labels — SVG textPaths riding each piece's outer arc, so
   they translate with their piece. Quiet; clarify as the ring closes. */
.apx-piece__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  fill: rgba(245, 243, 238, 0.82);
  opacity: calc(0.45 + 0.55 * var(--asm));
  /* Glyph centres ride the arc at the annulus mid-radius, so the
     label sits engraved at equal distance from inner and outer
     edge — for both normal and reversed (bottom) arcs. */
  dominant-baseline: central;
}

/* Alignment message + compact process. */
.apx__message-title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: #f5f3ee;
  margin: 0;
}
.apx__message-title .g { color: var(--accent-text); }
.apx__message-sub {
  margin: 20px 0 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(245, 243, 238, 0.82);
  max-width: 460px;
}
.apx__process {
  margin-top: clamp(28px, 3.5vw, 44px);
  padding-top: 24px;
  border-top: 1px solid var(--divider-soft);
}
.apx__process-label {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.45);
}
.apx__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 40px;
}
.apx__step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 14px;
  row-gap: 6px;
  align-items: baseline;
}
.apx__step-num {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--accent);
  padding-top: 2px;
}
.apx__step-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-default);
}
.apx__step-body {
  grid-column: 2;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: rgba(245, 243, 238, 0.7);
  max-width: 280px;
}

/* ── Contact ────────────────────────────────────────────────── */
/* Clean transition: the dark sections end on navy, the last separator
   sits at the boundary, and the paper Contact section begins cleanly
   with a crisp edge — no fade, fog or gradient overlay. */
.contact {
  background: var(--bg-paper);
  color: var(--fg-on-paper);
  position: relative;
}
.contact .eyebrow { color: var(--orin-slate-600); }
.contact .section-head__title { color: var(--orin-navy-900); }
.contact .section-head__title .g { color: var(--accent-text); }
.contact .section-head__sub { color: var(--fg-on-paper-muted); font-weight: 300; }
/* Contact meta — directory of names, phone, email. Quieter weight
   so it reads as supporting information, not a header band. */
.contact__meta-block .value { font-weight: 300; }
.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 28px; margin-top: 24px; }
.contact__field { display: flex; flex-direction: column; gap: 8px; }
.contact__field--full { grid-column: 1 / -1; }
.contact__label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orin-slate-600);
}
.contact__input, .contact__textarea {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--orin-navy-900);
  background: transparent;
  border: none;
  /* Hairline that reads as a quiet baseline rather than a field. */
  border-bottom: 1px solid rgba(10,20,38,0.12);
  border-radius: 0;
  padding: 10px 0;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-standard);
  width: 100%;
}
/* Dropdown — strip the native pill and give it the same hairline
   treatment as the text inputs. The chevron is a small inline SVG
   set in the muted text colour. */
select.contact__input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='rgba(71,82,91,0.6)' stroke-width='1'><path d='M1 1.5 L6 6 L11 1.5' /></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 10px 7px;
  cursor: pointer;
}
select.contact__input:focus {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23BFA362' stroke-width='1'><path d='M1 1.5 L6 6 L11 1.5' /></svg>");
}
.contact__input:focus, .contact__textarea:focus { border-bottom-color: var(--accent); }
.contact__input::placeholder, .contact__textarea::placeholder { color: rgba(71, 82, 91, 0.78); }
.contact__textarea { resize: vertical; min-height: 90px; }
.contact__submit { grid-column: 1 / -1; margin-top: 12px; justify-self: start; }
.contact__meta {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-top: 40px;
  border-top: 1px solid rgba(10,20,38,0.10);
}
.contact__meta-block .label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--orin-slate-600);
  margin-bottom: 8px;
}
.contact__meta-block .value {
  font-size: 15px;
  color: var(--orin-navy-900);
  line-height: 1.5;
}
.contact__meta-block .value a:hover { color: var(--accent); }

/* ── Footer ─────────────────────────────────────────────────── */
.footer {
  /* Footer brand-lockup follows the same left grid as the topnav
     (15px left edge + matching brand-lockup gap), so header and
     footer read as one consistent frame around the page. */
  padding: 18px var(--gutter) 18px 15px;
  border-top: 1px solid var(--divider-soft);
}
.footer .brand-lockup { gap: calc((15px - 1px) / 2); }
.footer .brand-lockup__bar { display: block; }
.footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}
.footer__meta {
  font-size: 12px;
  color: rgba(245, 243, 238, 0.55);
  display: flex;
  align-items: center;
  gap: 24px;
}
.footer__tag {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.34em;
  color: var(--accent);
  text-transform: uppercase;
}

/* ── Toast (form submit confirmation) ───────────────────────── */
.toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-surface-raised);
  color: var(--fg-default);
  padding: 14px 22px;
  border-radius: 4px;
  font-size: 13px;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--divider);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
  z-index: 100;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Responsive ─────────────────────────────────────────────────
   Three breakpoints: 1100 (tablet), 760 (mobile-landscape), 480
   (mobile-portrait). Hierarchy and tone unchanged at every size —
   the system reflows, never compresses. */

/* All page content sits above the atmospheric layer. */
@media (max-width: 1100px) {
  :root { --gutter: clamp(28px, 5vw, 56px); }
  .topnav { padding: 20px var(--gutter) 20px 15px; }
  .topnav__menu { gap: 28px; }
  .topnav__menu a { font-size: 12px; }
  .hero { min-height: 540px; padding-bottom: 72px; }
  .hero__headline { font-size: clamp(44px, 6vw, 72px); }
  .hero__bg { background-size: 105% auto; background-position: -40px 70%; }
  .apx__body { gap: 64px; }
  .pull__quote { font-size: clamp(26px, 3.2vw, 38px); }
  .contact__form { gap: 24px 20px; }
}

/* Mobile landscape / large phone — collapse menu, stack grids,
   surface CTA, scale headlines, ensure motifs never collide. */
@media (max-width: 760px) {
  :root { --gutter: 24px; }
  body { font-size: 15px; }

  /* Wave system slightly more present on mobile — the page is
     longer and emptier, so the atmospheric drift needs a little
     more weight to register as continuous movement. */
  .atmos { opacity: 0.42; }

  /* Top nav: collapse desktop nav + CTA cluster, surface burger. */
  .topnav { padding: 18px var(--gutter); }
  .topnav__menu { display: none; }
  .topnav__end { display: none; }
  .topnav__burger { display: inline-flex; align-items: center; justify-content: center; }
  .brand-lockup__bar { display: none; }
  .brand-lockup { gap: 10px; }
  .brand-lockup__mark { width: 26px; }
  .brand-lockup__word { font-size: 16px; letter-spacing: 0.34em; }
  .brand-lockup__sub { font-size: 8px; letter-spacing: 0.38em; margin-top: 2px; padding-left: 0; }

  /* Hero — large but mobile-comfortable headline, stacked CTAs.
     Bottom padding trimmed ~35% to bring About up against the
     hero so the first scroll feels intentional. */
  .hero { min-height: 540px; padding-bottom: 52px; }
  .hero__inner { gap: 0; }
  .hero__headline { font-size: clamp(36px, 9vw, 56px); line-height: 1.05; }
  .hero__sub { font-size: clamp(19px, 5.4vw, 24px); margin-top: 22px; max-width: 92%; }
  /* No line interaction on mobile, so the tagline shows at a fixed,
     clearly-legible gold rather than waiting on --hero-reveal. */
  .hero__signature { margin-top: 14px; font-size: 11px; letter-spacing: 0.30em; opacity: 0.85; }
  .hero__ctas { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 32px; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  /* Sections — reduce vertical pacing but stay premium. */
  .section { padding-block: clamp(56px, 12vw, 88px); }
  .section--tight { padding-block: clamp(40px, 9vw, 68px); }
  .section-head { margin-bottom: 36px; }
  .section-head__title { font-size: clamp(28px, 6.4vw, 40px); line-height: 1.18; }
  .section-head__sub { font-size: 15px; }

  /* Principles — tighter mobile rhythm. Section padding trimmed,
     items closer together, icon → title → rule → body gap reduced
     so the column doesn't dominate the page. */
  .about + .section--tight {
    padding-top: 0;
    padding-bottom: clamp(36px, 7vw, 56px);
  }
  /* About — single column on mobile; the slider keeps autoplaying
     (fade only, no pin/scroll-lock), etymology reads below it. */
  .about { padding-top: clamp(32px, 7vw, 48px); }
  .abx__scene { grid-template-columns: 1fr; gap: clamp(36px, 9vw, 56px); margin-top: clamp(20px, 5vw, 36px); }
  .abx__visual { max-width: 220px; }
  .abx__svg { width: 128px; }
  .abx__caption { min-height: 112px; }
  .abx__caption-body { font-size: 14px; }
  .abx__dots { gap: 24px; }
  .abx__dot { padding: 8px 4px; }
  .abx__story { margin-left: auto; margin-right: auto; }
  .abx__etymology-row { grid-template-columns: 92px 1fr; gap: 16px; }
  .abx__etymology-row dt { font-size: 18px; }
  .abx__etymology-row dd { font-size: 15px; }
  .abx__bridge { font-size: 15px; }

  /* Approach — stack the puzzle above the message. */
  .apx__body { grid-template-columns: 1fr; gap: 40px; }
  .apx__visual { max-width: 320px; }
  .apx__message-title { font-size: clamp(24px, 6vw, 32px); }
  .apx__steps { grid-template-columns: 1fr; gap: 22px; }

  /* Pull statement. */
  .pull__quote { font-size: clamp(22px, 5.4vw, 32px); line-height: 1.40; }

  /* Services — tighter rows on mobile. Hairline divider lines
     remain visible to structure the long-form list. */
  .service-row__header {
    grid-template-columns: 40px 1fr auto;
    gap: 16px;
    padding: 24px 4px;
  }
  .service-row__num { font-size: 11px; }
  .service-row__title { font-size: 17px; }
  .service-row__situation { font-size: 13px; }
  .service-row__cols {
    /* Stack the three blocks vertically on mobile, aligned under the
       title column. */
    grid-template-columns: 1fr;
    gap: 22px;
    padding-left: 56px;
    padding-right: 4px;
  }
  .service-row.is-open .service-row__panel-inner { padding-bottom: 30px; }
  .service-block__body { font-size: 14px; line-height: 1.55; }

  /* Contact — single column form, two-up meta. More breathing
     room between fields, lighter borders, restrained dropdown. */
  .contact__form { grid-template-columns: 1fr; gap: 30px; }
  .contact__input, .contact__textarea { font-size: 15px; }
  .contact__submit { width: 100%; justify-content: center; }
  .contact__meta { grid-template-columns: 1fr 1fr; margin-top: 40px; gap: 24px; padding-top: 32px; }

  /* Footer — reduced padding, understated tagline. Left padding
     stays at 15px to match the topnav even on small screens. */
  .footer { padding: 14px var(--gutter) 18px 15px; }
  .footer__inner { grid-template-columns: 1fr; text-align: left; gap: 12px; }
  .footer__meta { flex-direction: column; align-items: flex-start; gap: 4px; font-size: 11px; color: rgba(245, 243, 238, 0.55); }
  .footer__tag { font-size: 10px; letter-spacing: 0.36em; color: var(--accent); }
}

/* Mobile portrait — small-phone refinements. */
@media (max-width: 480px) {
  .hero__headline { font-size: clamp(32px, 10vw, 44px); }
  .section-head__title { font-size: clamp(26px, 7.5vw, 34px); }
  .pull__quote { font-size: clamp(20px, 5.8vw, 26px); }
  .contact__meta { grid-template-columns: 1fr; }
}

/* Larger screens — keep the original max-width but breathe a little. */
@media (min-width: 1600px) {
  :root { --content-max: 1320px; }
  .hero { min-height: 640px; }
}