/* ==========================================================================
   Filippi Legal Consultancy — Design System
   Black and gold.

   Canvas: near-black · one rationed gold accent · law photography that
           carries motion · hairline borders, never heavy shadows
   Type:   Gellix (DM Sans) — whisper-weight 300 display at 90–120px,
           quiet 400 body, 0.35em uppercase eyebrow labels
   ========================================================================== */

:root {
  /* ---- colour ---------------------------------------------------------- */
  --color-obsidian: #0a0908;
  --color-onyx: #14120e;
  --color-graphite: #1f1c16;
  --color-ember: #2e2a20;
  --color-ash: #8b8378;
  --color-smoke: #a89f92;
  --color-parchment: #c9c2b6;
  --color-bone: #faf7f0;
  --color-gold: #d4b06a;
  --color-pale-gold: #e6cd9a;
  --color-deep-gold: #6b5320;

  --gradient-gold: linear-gradient(100.7deg, #e8d5a3 8.74%, #c19a3f 92.06%);
  --gradient-gold-soft: linear-gradient(140deg, #e6cd9a, #b8912f);

  /* the translucent washes — glass lifted off the black */
  --glass-fill: rgba(31, 28, 22, 0.62);
  --glass-fill-strong: rgba(46, 42, 32, 0.75);
  --hairline: #2e2a20;
  --hairline-bright: rgba(212, 176, 106, 0.28);
  --nav-fill: rgba(10, 9, 8, 0.86);

  /* ---- type ------------------------------------------------------------ */
  --font-gellix: "Gellix", "DM Sans", "GT Walsheim", "Inter", ui-sans-serif,
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  --text-caption: 12px;
  --leading-caption: 1.3;
  --tracking-caption: 0.35em;
  --text-body-sm: 14px;
  --leading-body-sm: 1.45;
  --tracking-body-sm: 0.08px;
  --text-body: 16px;
  --leading-body: 1.55;
  --tracking-body: -0.01em;
  --text-subheading: 18px;
  --leading-subheading: 1.5;
  --tracking-subheading: -0.01em;
  --text-heading-sm: 22px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.02em;
  --text-heading: 26px;
  --leading-heading: 1.2;
  --tracking-heading: -0.02em;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1.1;
  --tracking-heading-lg: -0.03em;
  --text-display: 90px;
  --leading-display: 1;
  --tracking-display: -0.04em;
  --text-display-xl: 120px;
  --leading-display-xl: 0.9;
  --tracking-display-xl: -0.04em;

  /* fluid equivalents — the token above is always the ceiling */
  --fluid-display-xl: clamp(3rem, 8vw, 120px);
  --fluid-display: clamp(2.5rem, 6.2vw, 90px);
  --fluid-heading-lg: clamp(2rem, 4.4vw, 48px);
  --fluid-heading: clamp(1.5rem, 2.5vw, 26px);
  --fluid-heading-sm: clamp(1.3rem, 2vw, 22px);

  /* ---- spacing (4px base) ---------------------------------------------- */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-60: 60px;
  --spacing-80: 80px;
  --spacing-100: 100px;
  --spacing-112: 112px;
  --spacing-136: 136px;

  /* ---- layout ---------------------------------------------------------- */
  --page-max-width: 1200px;
  --section-gap: clamp(76px, 9vw, 132px);
  --card-padding: 40px;
  --element-gap: 20px;
  --nav-height: 80px;

  /* ---- radius ---------------------------------------------------------- */
  --radius-cards: 30px;
  --radius-images: 30px;
  --radius-buttons: 999px;
  --radius-tags: 999px;
  --radius-small: 10px;
  --radius-tight: 3px;

  /* ---- surfaces (four tiers imply depth; no drop shadows) -------------- */
  --surface-obsidian: #0a0908;
  --surface-onyx: #14120e;
  --surface-graphite: #1f1c16;
  --surface-ember: #2e2a20;

  /* ---- elevation — the only two glows in the system --------------------- */
  --elevation-float: 0 0 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px #2e2a20;
  --elevation-frame: 0 0 0 1px #2e2a20, inset 0 0 80px rgba(0, 0, 0, 0.6);

  /* ---- motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.24, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur-med: 0.45s;
  --dur-slow: 0.95s;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  background: var(--color-obsidian);
}

[id] {
  scroll-margin-top: 7rem;
}

body {
  position: relative;
  font-family: var(--font-gellix);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-smoke);
  background: var(--color-obsidian);
  font-feature-settings: "ss01" on, "cv11" on;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Cross-page fade: the black closes over the page and reopens on arrival. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999;
  background: var(--color-obsidian);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s var(--ease-out);
}

body.page-enter::after {
  opacity: 1;
  transition: none;
}

body.page-leave::after {
  opacity: 1;
  pointer-events: auto;
  transition-duration: 0.3s;
}

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

a {
  color: var(--color-bone);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}

a:hover {
  color: var(--color-gold);
}

ul,
ol {
  list-style: none;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-gellix);
  font-weight: var(--font-weight-light);
  color: var(--color-bone);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  text-wrap: balance;
}

h1 {
  font-size: var(--fluid-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: var(--fluid-heading-lg);
  margin-bottom: var(--spacing-24);
}

h3 {
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

h4 {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-body-sm);
}

p {
  text-align: left;
  hyphens: none;
}

strong,
b {
  font-weight: var(--font-weight-medium);
  color: var(--color-bone);
}

::selection {
  background: var(--color-gold);
  color: var(--color-obsidian);
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: var(--radius-tight);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.container {
  width: min(var(--page-max-width), 100% - var(--spacing-40));
  margin-inline: auto;
}

.section {
  padding-block: var(--section-gap);
}

.section-head {
  max-width: 60rem;
  margin-bottom: var(--spacing-60);
}

.section-head h2 {
  max-width: 20ch;
  margin-bottom: var(--spacing-24);
}

.section-head p:not(.eyebrow) {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-ash);
  max-width: 48ch;
}

/* ---- the eyebrow label ---------------------------------------------------
   12px, uppercase, 0.35em tracking, gold, preceded by a 6px dot.
   -------------------------------------------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--spacing-20);
}

.eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  flex-shrink: 0;
}

/* ---- the underline accent ------------------------------------------------
   A 3px gold line under a single display word — the focal point that keeps
   the whisper-weight headline from floating away.
   -------------------------------------------------------------------------- */
.u {
  position: relative;
  white-space: nowrap;
}

.u::after {
  content: "";
  position: absolute;
  left: 0.02em;
  right: 0.02em;
  bottom: 0.04em;
  height: 3px;
  border-radius: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.85s var(--ease-out) 0.25s;
}

.u.drawn::after {
  transform: scaleX(1);
}

/* under a scrubbed word the line follows the word's own progress, both
   ways; elsewhere inside a scrubbed block it draws as the block lights */
.scrub-words .u::after {
  transform: scaleX(var(--t, 1));
  transition: transform 0.2s var(--ease-out);
}

.reveal .u:not(.w)::after {
  transform: scaleX(clamp(0, (var(--rp, 1) - 0.55) / 0.3, 1));
  transition: transform 0.2s var(--ease-out);
}

.rule {
  height: 1px;
  background: var(--hairline);
  border: 0;
}

/* --------------------------------------------------------------------------
   Buttons — every action is a 999px pill
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  font-family: var(--font-gellix);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  letter-spacing: var(--tracking-body);
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-buttons);
  background: none;
  /* 13px/26px keeps the tap target at the 44px accessibility floor */
  padding: 13px 26px;
  transition: background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease), transform var(--dur-med) var(--ease-out);
}

.btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease-out);
}

.btn:hover svg {
  transform: translateX(4px);
}

.btn:active {
  transform: scale(0.98);
  transition-duration: 0.1s;
}

/* the signature gold pill — one primary action per view */
.btn-primary {
  background-image: var(--gradient-gold);
  color: var(--color-obsidian);
  font-weight: var(--font-weight-semibold);
}

.btn-primary:hover {
  color: var(--color-obsidian);
  opacity: 0.88;
}

/* the outlined action — gold border and text */
.btn-gold {
  border-color: var(--color-gold);
  color: var(--color-gold);
}

.btn-gold:hover {
  color: var(--color-pale-gold);
  border-color: var(--color-pale-gold);
  background: rgba(212, 176, 106, 0.1);
}

/* the ghost outline — used in the nav and for quiet actions */
.btn-outline {
  border-color: rgba(250, 247, 240, 0.5);
  color: var(--color-bone);
}

.btn-outline:hover {
  border-color: var(--color-bone);
  background: rgba(250, 247, 240, 0.07);
}

.btn-sm {
  font-size: var(--text-body-sm);
  padding: 9px 18px;
}

/* --------------------------------------------------------------------------
   Navigation — 80px, sitting directly on the canvas, no border
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 140;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: transparent;
  transition: transform 0.55s var(--ease-out),
    background-color var(--dur-med) var(--ease);
}

.site-header.scrolled {
  background: var(--nav-fill);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header.hidden {
  transform: translateY(-105%);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-40);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
  color: var(--color-bone);
}

.brand:hover {
  color: var(--color-bone);
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--color-gold);
}

.brand-name {
  display: block;
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-subheading);
  line-height: 1.1;
}

.brand-sub {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-ash);
  margin-top: 3px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--spacing-32);
}

.nav-links a {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-parchment);
  padding-block: 10px;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-fast) var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-bone);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

.nav-cta {
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 130;
}

.nav-toggle span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--color-bone);
  transition: all 0.3s var(--ease);
}

.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 20px; }
.nav-toggle span:nth-child(3) { top: 26px; }

body.menu-open .nav-toggle span:nth-child(1) {
  top: 20px;
  transform: rotate(45deg);
}

body.menu-open .nav-toggle span:nth-child(2) {
  opacity: 0;
}

body.menu-open .nav-toggle span:nth-child(3) {
  top: 20px;
  transform: rotate(-45deg);
}

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: var(--color-obsidian);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--spacing-40);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease), visibility var(--dur-med);
}

body.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
}

body.menu-open {
  overflow: hidden;
}

.mobile-menu a {
  font-size: clamp(1.8rem, 8vw, 34px);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--tracking-heading-lg);
  color: var(--color-bone);
  padding-block: var(--spacing-16);
  border-bottom: 1px solid var(--hairline);
  transform: translateY(18px);
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease),
    color var(--dur-fast) var(--ease);
}

.mobile-menu a:hover {
  color: var(--color-gold);
}

body.menu-open .mobile-menu a {
  transform: none;
  opacity: 1;
}

.mobile-menu a:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu a:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu a:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu a:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu a:nth-child(5) { transition-delay: 0.25s; }

.mobile-menu .menu-langs {
  margin-top: var(--spacing-40);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ==========================================================================
   LAW IMAGERY IN MOTION
   Photography is the one dramatic asset: full-bleed, uncropped, with the
   type sitting on it. Every frame carries motion — a slow drift, a gold
   beacon sweeping across, and a wipe as it enters the viewport.
   ========================================================================== */

.hero-media,
.page-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* ---- the home hero is a fixed scene ---------------------------------------
   The photograph alone fills the top half of the viewport, pinned there; the
   page arrives over it like a curtain rather than pushing it away. main.js
   writes --hp (0 as the page loads, 1 once the photograph is fully covered).
   The band is as tall as the hero itself (--hero-h, measured by main.js).
   -------------------------------------------------------------------------- */
.hero-media {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--hero-h, 50svh);
}

/* a letterbox crop of the statue reads best a little above centre */
.hero-bg {
  object-position: 58% 40%;
}

/* no type sits on this frame, so the wash only grades the edges and
   dissolves the foot of the band into the black beneath it */
.hero-media::after {
  background:
    linear-gradient(
      96deg,
      rgba(10, 9, 8, 0.5) 0%,
      rgba(10, 9, 8, 0.12) 40%,
      rgba(10, 9, 8, 0.22) 100%
    ),
    linear-gradient(to top, var(--color-obsidian) 0%, rgba(10, 9, 8, 0) 34%);
}

/* once covered, the scene need not be composited at all */
.hero.is-covered .hero-media {
  visibility: hidden;
}

/* everything after the hero is the curtain, so it needs its own black */
.hero ~ *,
.site-footer {
  position: relative;
  z-index: 1;
  background-color: var(--color-obsidian);
}

/* the WebGL pass over the photograph — hidden until main.js has it running */
.hero-gl {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: none;
  filter: grayscale(0.28) sepia(0.32) saturate(1.05) contrast(1.1)
    brightness(0.66);
}

.hero-media.gl-on .hero-gl {
  display: block;
}

.hero-media.gl-on .hero-bg {
  visibility: hidden;
  animation: none;
}

.hero-bg,
.page-hero-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* graded to the palette: warmed toward gold with the blacks crushed down
     to the canvas, so the photograph reads as part of the page */
  filter: grayscale(0.28) sepia(0.32) saturate(1.05) contrast(1.1)
    brightness(0.66);
  transform: scale(1.08);
  will-change: transform;
  animation: ken-burns 36s var(--ease) infinite alternate;
}

@keyframes ken-burns {
  from {
    transform: scale(1.08) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.18) translate3d(-2.2%, -1.6%, 0);
  }
}

/* the wash that keeps type legible over the photograph */
.hero-media::after,
.page-hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      96deg,
      rgba(10, 9, 8, 0.93) 14%,
      rgba(10, 9, 8, 0.66) 50%,
      rgba(10, 9, 8, 0.34) 100%
    ),
    linear-gradient(to top, var(--color-obsidian) 1%, rgba(10, 9, 8, 0) 42%);
}

/* the signal flare: a single gold beacon streaking across the frame */
.beacon {
  position: absolute;
  top: 0;
  left: -30%;
  z-index: 1;
  width: 26%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(212, 176, 106, 0.06) 38%,
    rgba(230, 205, 154, 0.24) 50%,
    rgba(212, 176, 106, 0.06) 62%,
    transparent 100%
  );
  filter: blur(6px);
  animation: beacon-sweep 12s var(--ease) infinite;
}

@keyframes beacon-sweep {
  0%,
  62% {
    transform: translateX(0);
    opacity: 0;
  }
  66% {
    opacity: 1;
  }
  96% {
    transform: translateX(500%);
    opacity: 0;
  }
  100% {
    transform: translateX(500%);
    opacity: 0;
  }
}

/* ---- in-page law photographs ---------------------------------------------
   Each is wiped open as it enters the viewport, its image settling out of a
   slow push-in. JS decides when; the wipe and settle are pure CSS.
   -------------------------------------------------------------------------- */
.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-images);
  background: var(--color-onyx);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-out);
}

.shot-in {
  clip-path: inset(0 0 0 0);
}

.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.3) sepia(0.3) saturate(1) contrast(1.08)
    brightness(0.72);
  transform: scale(1.16);
  transition: transform 1.6s var(--ease-out), filter var(--dur-slow) var(--ease);
}

.shot-in img {
  transform: scale(1);
}

.shot:hover img {
  transform: scale(1.05);
  filter: grayscale(0.05) sepia(0.14) saturate(1.08) contrast(1.05) brightness(0.9);
}

/* a gold grade that blooms in on hover — the accent stroke, rationed */
.shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 78% 12%,
    rgba(212, 176, 106, 0.26),
    rgba(212, 176, 106, 0) 62%
  );
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}

.shot:hover::after {
  opacity: 1;
}

.shot-caption {
  position: absolute;
  left: var(--spacing-24);
  bottom: var(--spacing-24);
  z-index: 2;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-bone);
}

/* a full-width band, the one landscape frame on a page */
.shot-band {
  aspect-ratio: 21 / 9;
}

/* ---- the route strip: law frames that drift apart as the page scrolls ---- */
.route-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-16);
}

.route-strip .shot {
  aspect-ratio: 3 / 4;
  will-change: transform;
}

/* the framed feature photograph, with its caption sitting inside */
.media-frame {
  position: relative;
  border-radius: var(--radius-images);
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.media-caption {
  position: absolute;
  z-index: 2;
  left: var(--spacing-40);
  right: var(--spacing-40);
  bottom: var(--spacing-40);
}

.media-caption .caption-lede {
  font-size: var(--fluid-heading);
  font-weight: var(--font-weight-light);
  line-height: 1.15;
  letter-spacing: var(--tracking-heading);
  color: var(--color-bone);
}

.media-caption p:last-child {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-top: var(--spacing-12);
}

/* --------------------------------------------------------------------------
   Surfaces — panels and glass cards
   -------------------------------------------------------------------------- */

.panel {
  background: var(--color-onyx);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
}

.glass {
  background: var(--glass-fill);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: var(--elevation-float);
}

/* --------------------------------------------------------------------------
   Icon badges — filled, rounded, gold. No outline icons.
   -------------------------------------------------------------------------- */

.icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-small);
  background: var(--color-deep-gold);
  color: var(--color-pale-gold);
  transition: transform var(--dur-med) var(--ease-out);
}

.icon-badge svg {
  width: 60%;
  height: 60%;
}

.icon-badge-grad {
  background-image: var(--gradient-gold-soft);
  color: var(--color-obsidian);
}

.icon-badge-sm {
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

.card:hover .icon-badge,
.service-block:hover .icon-badge {
  transform: translateY(-3px);
}

/* --------------------------------------------------------------------------
   Hero — a full-bleed law photograph with the type sitting on it
   -------------------------------------------------------------------------- */

/* the band: the whole first screen, photograph only */
.hero {
  position: relative;
  z-index: 0;
  height: 100svh;
  --hp: 0;
}

/* ---- the words, lit by the scroll ----------------------------------------
   The section after the photograph. Its words are unseen until the second
   half of the first screen gives way to the third, then light up in
   reading order as the page scrolls. main.js writes --rp (0 until half a
   screen has scrolled, 1 a third of a screen later): the eyebrow first,
   then the headline word by word (--wi of --wn), then the lede, then the
   actions. The section is nearly a screen tall with its type centred, so
   the headline arrives mid-screen. Without JS, or with reduced motion,
   --rp stays at 1 and everything simply shows.
   -------------------------------------------------------------------------- */
.hero-words {
  --rp: 1;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 92svh;
  padding-block: var(--spacing-40) var(--spacing-60);
  /* the curtain's leading edge is a veil, not a line: clear at the top,
     solid black 36% of the way down, before the type (main.js keeps the
     photograph drawing until that solid part has covered it) */
  background: linear-gradient(
    to bottom,
    rgba(10, 9, 8, 0) 0%,
    rgba(10, 9, 8, 0.3) 14%,
    rgba(10, 9, 8, 0.7) 26%,
    var(--color-obsidian) 36%
  );
}

/* wide enough for the actions and the language chips to share a line */
.hero-inner {
  max-width: 60rem;
}

.hero-words h1 {
  font-size: var(--fluid-display-xl);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-display-xl);
  letter-spacing: var(--tracking-display-xl);
  color: var(--color-bone);
  /* breaks after "thinking," at every size, never leaving a one-word line */
  max-width: 9em;
  margin-bottom: var(--spacing-24);
}

.hero-words .eyebrow {
  opacity: clamp(0, var(--rp) / 0.15, 1);
}

.hero-sub {
  --t: clamp(0, (var(--rp) - 0.6) / 0.25, 1);
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-parchment);
  max-width: 46rem;
  margin-bottom: var(--spacing-32);
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 16px));
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

/* actions and language chips share one row, wrapping where they must */
.hero-foot {
  --t: clamp(0, (var(--rp) - 0.75) / 0.25, 1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16) var(--spacing-32);
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 16px));
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
}

.lang-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-12);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.lang-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 7px 14px;
  border: 1px solid var(--hairline-bright);
  border-radius: var(--radius-tags);
  color: var(--color-parchment);
  letter-spacing: 0.12em;
}

.lang-chips .chip strong {
  font-weight: var(--font-weight-medium);
  color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */

.trust-bar {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--spacing-40);
}

.trust-bar .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-32);
}

.trust-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-12);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-ash);
  transition: color var(--dur-fast) var(--ease);
}

.trust-item:hover {
  color: var(--color-parchment);
}

.trust-item svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--color-gold);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Service cards — asymmetric two-up, never a three-column grid
   -------------------------------------------------------------------------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-24);
}

.card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-16);
  background: var(--glass-fill);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: box-shadow var(--dur-med) var(--ease),
    background-color var(--dur-med) var(--ease);
}

.card:hover {
  background: var(--glass-fill-strong);
  box-shadow: inset 0 0 0 1px var(--hairline-bright);
}

.card h3 {
  color: var(--color-bone);
}

.card p {
  font-size: var(--text-body);
  color: var(--color-smoke);
  max-width: 44ch;
  flex-grow: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-gold);
  margin-top: var(--spacing-4);
}

.card-link:hover {
  color: var(--color-pale-gold);
}

.card-link svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-med) var(--ease-out);
}

.card-link:hover svg {
  transform: translateX(4px);
}

/* the closing card of the grid — the invitation, not a service */
.card-cta {
  background: linear-gradient(150deg, rgba(107, 83, 32, 0.55), rgba(20, 18, 14, 0.7));
  justify-content: center;
}

.card-cta h3 {
  font-size: var(--fluid-heading);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--tracking-heading);
}

/* --------------------------------------------------------------------------
   Split / feature sections
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}

.split-start {
  align-items: start;
}

.split-media {
  position: relative;
}

.value-list {
  display: flex;
  flex-direction: column;
  counter-reset: value;
}

.value-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-20);
  padding-block: var(--spacing-24);
  border-top: 1px solid var(--hairline);
}

.value-list li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.value-list li::before {
  counter-increment: value;
  content: "0" counter(value);
  font-size: var(--text-caption);
  letter-spacing: 0.2em;
  color: var(--color-gold);
  line-height: 2.2;
}

.value-list h3 {
  font-size: var(--text-subheading);
  color: var(--color-bone);
  margin-bottom: var(--spacing-8);
}

.value-list p {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-ash);
}

/* --------------------------------------------------------------------------
   Stats highlight band
   -------------------------------------------------------------------------- */

.stat-band {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--spacing-40);
  align-items: center;
  position: relative;
  overflow: hidden;
}

.stat-band::after {
  content: "";
  position: absolute;
  left: var(--card-padding);
  right: var(--card-padding);
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background-image: var(--gradient-gold);
}

.stat-band p.stat-lede {
  font-size: var(--fluid-heading);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-bone);
  max-width: 24ch;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-20) var(--spacing-40);
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stat-item b {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-parchment);
}

.stat-item span {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ash);
}

/* --------------------------------------------------------------------------
   Languages band
   -------------------------------------------------------------------------- */

.lang-stack {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-cards);
  background: var(--glass-fill);
  box-shadow: inset 0 0 0 1px var(--hairline);
  overflow: hidden;
}

.lang-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-20);
  padding: var(--spacing-32) var(--card-padding);
  transition: background-color var(--dur-med) var(--ease);
}

.lang-row + .lang-row {
  border-top: 1px solid var(--hairline);
}

.lang-row:hover {
  background: rgba(46, 42, 32, 0.5);
}

.lang-tag {
  font-size: var(--text-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  padding-top: 5px;
  min-width: 9ch;
}

.lang-row h3 {
  font-size: var(--text-subheading);
  color: var(--color-bone);
  margin-bottom: var(--spacing-8);
}

.lang-row p {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-smoke);
}

/* --------------------------------------------------------------------------
   Process — one hairline step at a time
   -------------------------------------------------------------------------- */

.steps {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-cards);
  border: 1px solid var(--hairline);
  overflow: hidden;
}

.step {
  display: grid;
  grid-template-columns: 88px minmax(0, 22ch) 1fr;
  gap: var(--spacing-24);
  align-items: baseline;
  padding: var(--spacing-32) var(--card-padding);
  transition: background-color var(--dur-med) var(--ease);
}

.step + .step {
  border-top: 1px solid var(--hairline);
}

.step:hover {
  background: rgba(31, 28, 22, 0.5);
}

.step-no {
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}

.step h3 {
  font-size: var(--text-subheading);
  color: var(--color-bone);
}

.step p {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-ash);
}

/* ---- the pinned, sideways read -------------------------------------------
   The stack above is the base layout (phones, reduced motion). Above the
   phone breakpoint main.js adds .is-pinned: the stage sticks to the
   viewport and the steps ride a track that slides left, scroll for scroll,
   until the last one has arrived. The section is given exactly that much
   extra height, so it is ordinary scrolling — never hijacked — read
   sideways. A gold rail below fills with the journey.
   -------------------------------------------------------------------------- */

.process-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-24);
}

.process-counter,
.process-rail {
  display: none;
}

.process-counter {
  font-size: var(--text-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-ash);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-bottom: var(--spacing-8);
}

.process-counter .process-index {
  color: var(--color-gold);
  margin-right: 0.6em;
}

.process-rail {
  height: 1px;
  background: var(--hairline);
}

.process-fill {
  display: block;
  height: 100%;
  background-image: var(--gradient-gold);
  transform-origin: left center;
  transform: scaleX(0);
}

.process.is-pinned {
  /* height is set by main.js: one viewport plus the distance the track travels */
  padding-block: 0;
}

.process.is-pinned .process-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-40);
  overflow: hidden;
}

.process.is-pinned .process-counter,
.process.is-pinned .process-rail {
  display: block;
}

/* the stage's own gap spaces the head from the track */
.process.is-pinned .section-head,
.process.is-pinned .section-head h2 {
  margin-bottom: 0;
}

.process.is-pinned .steps {
  position: relative;
  flex-direction: row;
  gap: var(--spacing-24);
  border: 0;
  border-radius: 0;
  overflow: visible;
  will-change: transform;
}

/* two steps fill the container; the next one waits in the gutter */
.process.is-pinned .step {
  flex: 0 0 calc((100% - var(--spacing-24)) / 2);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-12);
  min-height: clamp(260px, 38vh, 380px);
  padding: var(--card-padding);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  background: var(--glass-fill);
  transition: border-color var(--dur-slow) var(--ease),
    background-color var(--dur-slow) var(--ease);
}

.process.is-pinned .step-no {
  font-size: var(--fluid-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  line-height: 1;
  color: var(--color-ash);
  margin-bottom: var(--spacing-32);
  transition: color var(--dur-slow) var(--ease);
}

.process.is-pinned .step h3 {
  margin-top: auto;
}

.process.is-pinned .step p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-smoke);
  max-width: 40ch;
}

/* the step at the reading position lights its number gold */
.process.is-pinned .step.is-current {
  border-color: var(--hairline-bright);
  background: var(--glass-fill-strong);
}

.process.is-pinned .step.is-current .step-no {
  color: var(--color-gold);
}

/* --------------------------------------------------------------------------
   Transparency strip
   -------------------------------------------------------------------------- */

.status-lede {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-ash);
  max-width: 46ch;
  margin-bottom: var(--spacing-32);
}

.status-points {
  display: flex;
  flex-direction: column;
}

.status-points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-16);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-ash);
  padding-block: var(--spacing-20);
  border-top: 1px solid var(--hairline);
}

.status-points li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.status-points svg {
  width: 16px;
  height: 16px;
  color: var(--color-gold);
  margin-top: 3px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band .container {
  border-radius: var(--radius-cards);
  border: 1px solid var(--hairline);
  padding: clamp(40px, 6vw, 80px);
  background: radial-gradient(
    120% 140% at 82% 0%,
    rgba(107, 83, 32, 0.42),
    rgba(10, 9, 8, 0) 62%
  );
}

.cta-band h2 {
  font-size: var(--fluid-heading-lg);
  max-width: 18ch;
  margin-bottom: var(--spacing-24);
}

.cta-band p:not(.eyebrow) {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-ash);
  max-width: 46ch;
  margin-bottom: var(--spacing-40);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
}

/* --------------------------------------------------------------------------
   Page hero (inner pages) — a photograph behind the title
   -------------------------------------------------------------------------- */

.page-hero {
  position: relative;
  overflow: hidden;
  background: var(--color-obsidian);
  padding-block: calc(var(--nav-height) + 92px) var(--spacing-80);
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  font-size: var(--fluid-display);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--color-bone);
  max-width: 16ch;
  margin-bottom: var(--spacing-24);
}

.page-hero p:not(.eyebrow) {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-parchment);
  max-width: 48ch;
}

.page-hero-foot {
  margin-top: var(--spacing-40);
}

/* --------------------------------------------------------------------------
   Service detail blocks
   -------------------------------------------------------------------------- */

.service-block {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
  padding-block: var(--section-gap);
  border-top: 1px solid var(--hairline);
}

.service-lede {
  position: sticky;
  top: 120px;
}

.service-index {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--spacing-20);
}

.service-lede .icon-badge {
  margin-bottom: var(--spacing-20);
}

.service-lede .shot {
  aspect-ratio: 4 / 3;
  margin-top: var(--spacing-32);
}

.service-block h2 {
  font-size: var(--fluid-heading);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  margin-bottom: 0;
}

.service-content > p {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-parchment);
  margin-bottom: var(--spacing-32);
  max-width: 52ch;
}

.included h3 {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: var(--spacing-16);
}

.included ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--spacing-32);
}

.included li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-12);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-ash);
  padding-block: var(--spacing-12);
  border-top: 1px solid var(--hairline);
}

.included li svg {
  width: 13px;
  height: 13px;
  color: var(--color-gold);
  margin-top: 5px;
  flex-shrink: 0;
}

.service-note {
  margin-top: var(--spacing-24);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-ash);
  max-width: 62ch;
}

/* --------------------------------------------------------------------------
   Pricing / engagement
   -------------------------------------------------------------------------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-24);
}

.pricing-card {
  border-radius: var(--radius-cards);
  border: 1px solid var(--hairline);
  padding: var(--spacing-32);
  background: transparent;
}

.pricing-card.featured {
  background: var(--glass-fill);
  border-color: var(--color-gold);
}

.pricing-flag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--spacing-12);
}

.pricing-card h3 {
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-light);
  color: var(--color-bone);
  margin-bottom: var(--spacing-12);
}

.pricing-card > p {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-smoke);
  margin-bottom: var(--spacing-20);
}

.pricing-card ul {
  display: flex;
  flex-direction: column;
}

.pricing-card li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-12);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-smoke);
  padding-block: var(--spacing-12);
  border-top: 1px solid var(--hairline);
}

.pricing-card li svg {
  width: 12px;
  height: 12px;
  color: var(--color-gold);
  margin-top: 5px;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Prose (about + legal pages)
   -------------------------------------------------------------------------- */

.prose {
  max-width: 46rem;
}

.prose > * + * {
  margin-top: var(--spacing-20);
}

.prose p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ash);
}

.prose .prose-lede {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  color: var(--color-parchment);
  margin-bottom: var(--spacing-32);
}

.prose h2 {
  font-size: var(--fluid-heading);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--tracking-heading);
  margin-top: var(--spacing-60);
  margin-bottom: var(--spacing-16);
}

.prose a {
  color: var(--color-gold);
}

.prose a:hover {
  color: var(--color-pale-gold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.prose ul {
  display: flex;
  flex-direction: column;
}

.prose ul li {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ash);
  padding-block: var(--spacing-16);
  padding-left: var(--spacing-24);
  border-top: 1px solid var(--hairline);
  position: relative;
}

.prose ul li:last-child {
  border-bottom: 1px solid var(--hairline);
}

.prose ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 28px;
  width: 8px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gold);
}

.quote-block {
  margin-block: var(--spacing-40);
  padding: var(--spacing-32) var(--spacing-40);
  border-radius: var(--radius-cards);
  background: var(--glass-fill);
  box-shadow: inset 0 0 0 1px var(--hairline);
  border-left: 2px solid var(--color-gold);
}

.quote-block p,
.prose .quote-block p {
  font-size: var(--fluid-heading);
  font-weight: var(--font-weight-light);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-bone);
  max-width: 32ch;
}

/* --------------------------------------------------------------------------
   Contact page
   -------------------------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}

.contact-info h2 {
  font-size: var(--fluid-heading);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--tracking-heading);
  margin-bottom: var(--spacing-16);
}

.contact-info > p {
  font-size: var(--text-body);
  color: var(--color-ash);
  margin-bottom: var(--spacing-32);
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.contact-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-16);
  align-items: center;
  padding: var(--spacing-16) var(--spacing-20);
  border-radius: var(--radius-small);
  border: 1px solid var(--hairline);
  background: rgba(20, 18, 14, 0.6);
}

.contact-list strong {
  display: block;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-smoke);
  font-weight: var(--font-weight-medium);
  margin-bottom: 4px;
}

.contact-list span,
.contact-list a {
  font-size: var(--text-body);
  color: var(--color-bone);
  overflow-wrap: anywhere;
}

.contact-list a:hover {
  color: var(--color-gold);
}

.notice-box {
  margin-block: var(--spacing-32);
  padding: var(--spacing-24);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--color-gold);
  border-radius: var(--radius-small);
  background: rgba(107, 83, 32, 0.16);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-smoke);
}

.notice-box strong {
  color: var(--color-parchment);
}

/* the form is a glass card — the one raised surface on the page */
.contact-form {
  background: var(--glass-fill);
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  box-shadow: var(--elevation-float);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-20);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-20);
}

.field label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-smoke);
  transition: color var(--dur-fast) var(--ease);
}

.field:focus-within label {
  color: var(--color-gold);
}

.field input,
.field select,
.field textarea {
  font-family: var(--font-gellix);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-body);
  color: var(--color-bone);
  padding: 13px 16px;
  background: var(--color-obsidian);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-small);
  transition: border-color var(--dur-fast) var(--ease);
}

.field select {
  appearance: none;
  cursor: pointer;
  padding-right: var(--spacing-32);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath d='M0 0h9L4.5 6z' fill='%23d4b06a'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.field select option {
  background: var(--color-obsidian);
  color: var(--color-bone);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-gold);
}

.field textarea {
  resize: vertical;
  min-height: 9rem;
  line-height: 1.5;
}

.field ::placeholder {
  color: var(--color-ash);
}

.form-note {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-smoke);
  margin-top: var(--spacing-16);
}

.form-note a {
  color: var(--color-gold);
}

.contact-form .btn {
  margin-top: var(--spacing-4);
}

/* --------------------------------------------------------------------------
   Legal pages
   -------------------------------------------------------------------------- */

.legal-body {
  max-width: none;
}

.legal-body > * {
  max-width: 46rem;
}

.legal-body h2 {
  font-size: var(--fluid-heading);
  font-weight: var(--font-weight-light);
  letter-spacing: var(--tracking-heading);
  margin: var(--spacing-60) 0 var(--spacing-16);
}

.legal-body h3 {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-gold);
  margin: var(--spacing-32) 0 var(--spacing-12);
}

.legal-body p,
.legal-body li {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ash);
}

.legal-body a {
  color: var(--color-gold);
}

.legal-body a:hover {
  color: var(--color-pale-gold);
}

.legal-body p + p {
  margin-top: var(--spacing-16);
}

.legal-body ul,
.legal-body ol {
  margin: var(--spacing-24) 0;
  display: flex;
  flex-direction: column;
  counter-reset: legal;
}

/* the marker is absolutely placed: these items mix <strong> with running
   text, and a grid column would break each inline child onto its own cell */
.legal-body li {
  position: relative;
  padding-left: var(--spacing-32);
  padding-block: var(--spacing-12);
  border-top: 1px solid var(--hairline);
}

.legal-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-gold);
}

.legal-body ol li::before {
  counter-increment: legal;
  content: counter(legal, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: var(--spacing-12);
  font-size: var(--text-caption);
  letter-spacing: 0.1em;
  color: var(--color-gold);
  line-height: 1.9;
}

.legal-meta {
  font-size: var(--text-caption);
  line-height: 1.7;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ash);
  padding-bottom: var(--spacing-24);
  margin-bottom: var(--spacing-32);
  border-bottom: 1px solid var(--hairline);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: var(--spacing-80) var(--spacing-32);
  color: var(--color-ash);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--spacing-40);
  padding-bottom: var(--spacing-60);
}

.footer-brand .brand {
  margin-bottom: var(--spacing-20);
}

.footer-brand p {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-ash);
  max-width: 26rem;
}

.footer-col h4 {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-20);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

.footer-col a,
.footer-col li {
  display: inline-block;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-ash);
  transition: color var(--dur-fast) var(--ease);
  overflow-wrap: anywhere;
}

.footer-col a:hover {
  color: var(--color-bone);
}

.footer-disclaimer {
  padding-block: var(--spacing-32);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--color-ash);
  max-width: 78rem;
}

.footer-disclaimer strong {
  color: var(--color-parchment);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-body-sm);
  color: var(--color-ash);
}

.footer-bottom a {
  color: var(--color-ash);
}

.footer-bottom a:hover {
  color: var(--color-bone);
}

/* ---- the coordinate stamp: the brand signing off from its jurisdiction --- */
.coord-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-16);
  margin-top: var(--spacing-40);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--hairline);
  font-size: var(--text-caption);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-ash);
}

.coord-left,
.coord-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.coord-footer svg {
  width: 14px;
  height: 14px;
  color: var(--color-gold);
}

.coord-footer .coord-sep {
  color: var(--color-ember);
}

.coord-value {
  color: var(--color-parchment);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Marquee
   -------------------------------------------------------------------------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding-block: var(--spacing-20);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-drift 52s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-track > span {
  font-size: var(--text-caption);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-ash);
  white-space: nowrap;
  padding-right: var(--spacing-40);
}

@keyframes marquee-drift {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   Word-by-word headline reveal
   -------------------------------------------------------------------------- */

.split-words .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
  transition-delay: calc(var(--wi) * 55ms + 0.12s);
}

.split-words.words-in .w {
  opacity: 1;
  transform: none;
}

/* ---- words lit by the scroll ---------------------------------------------
   On a line marked .scrub-words each word takes its turn on the block's
   progress (--rp, written by main.js): between 0.05 and 0.65 of it, each
   ramping over 0.18, so the last word is lit a little before the block is.
   -------------------------------------------------------------------------- */
.scrub-words .w {
  --t: clamp(0, (var(--rp, 1) - 0.05 - var(--wi, 0) * 0.5 / var(--wn, 1)) / 0.18, 1);
  display: inline-block;
  opacity: var(--t);
  transform: translateY(calc((1 - var(--t)) * 0.3em));
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

/* --------------------------------------------------------------------------
   Reveal animations
   -------------------------------------------------------------------------- */

/* Scrubbed by the scroll: main.js writes --rp (0 → 1) as the element
   travels from the foot of the viewport to a little past its middle, and
   back down on the way up. Without JS it stays at 1 and simply shows. */
.reveal {
  --rp: 1;
  /* fully opaque by 60% of the journey, so a heading's word-by-word
     cascade is not masked by its block still fading */
  opacity: clamp(0, var(--rp) * 1.6, 1);
  transform: translate3d(0, calc((1 - var(--rp)) * 28px), 0);
  transition: opacity 0.2s var(--ease-out), transform 0.2s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  body::after {
    display: none;
  }
  .marquee-track,
  .hero-bg,
  .page-hero-bg,
  .beacon {
    animation: none;
  }
  .beacon {
    display: none;
  }
  .shot {
    clip-path: none;
    transition: none;
  }
  .shot img {
    transform: none;
    transition: none;
  }
  .split-words .w {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-words {
    --rp: 1;
  }
  .scrub-words .w,
  .hero-words .hero-sub,
  .hero-words .hero-foot {
    transition: none;
  }
  .u::after {
    transform: scaleX(1);
    transition: none;
  }
  .site-header,
  .site-header.hidden {
    transition: none;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 68rem) {
  .split,
  .contact-layout,
  .service-block,
  .stat-band {
    grid-template-columns: 1fr;
  }

  .service-lede {
    position: static;
  }

  .split-media {
    order: -1;
  }

  .media-frame {
    aspect-ratio: 16 / 10;
  }

  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .trust-bar .container {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .route-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .step {
    grid-template-columns: 60px 1fr;
    row-gap: var(--spacing-8);
  }

  .step p {
    grid-column: 2;
  }
}

@media (max-width: 48rem) {
  :root {
    --card-padding: 24px;
  }

  .container {
    width: min(var(--page-max-width), 100% - var(--spacing-32));
  }

  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .services-grid,
  .pricing-grid,
  .included ul,
  .form-row,
  .stat-grid {
    grid-template-columns: 1fr;
  }

  .hero-words {
    padding-block: var(--spacing-32) var(--spacing-40);
  }

  .page-hero {
    padding-block: calc(var(--nav-height) + 56px) var(--spacing-40);
  }

  .route-strip {
    gap: var(--spacing-12);
  }

  .media-caption {
    left: var(--spacing-24);
    right: var(--spacing-24);
    bottom: var(--spacing-24);
  }

  .lang-row,
  .step {
    grid-template-columns: 1fr;
    gap: var(--spacing-8);
    padding: var(--spacing-24);
  }

  .stat-band::after {
    left: var(--spacing-24);
    right: var(--spacing-24);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-32);
  }

  .btn {
    width: 100%;
  }

  .nav .btn,
  .btn-inline {
    width: auto;
  }

  /* a long address in a narrow column would otherwise split mid-word */
  .contact-list a {
    font-size: var(--text-body-sm);
  }
}