/* ===== FINAL CANDIDATE V1.1 ===== */

/* ---- styles/tokens.css ---- */
/* =========================================================================
   HERE4AI - DESIGN TOKENS
   -------------------------------------------------------------------------
   Layer 1  BRAND CONSTANTS  - the five canonical colours. Never change.
   Layer 2  DERIVED NEUTRALS - tints/shades of the canonical colours, used for
                               surfaces and borders. Not new brand colours.
   Layer 3  SEMANTIC ROLES   - what the UI actually consumes. Explorations
                               A/B/C re-map THIS layer; components never read
                               layer 1 directly.
   Layer 4  SCALES           - type, space, radius, shadow, motion, layout.
                               Scales are defined complete on purpose: an
                               exploration picks from them rather than adding
                               one-off values.

   Every contrast pair used for text is verified in tools/check.js.
   ========================================================================= */

:root {
  /* ---- Layer 1 - canonical palette (Source of Truth 4.2) --------------- */
  --brand-navy: #0f2744;
  --brand-coral: #ff8f7f;
  --brand-ivory: #fef9f6;
  --brand-soft-blue: #c7d6f3;
  --brand-slate: #6b7280;

  /* ---- Layer 2 - derived neutrals -------------------------------------
     Day surfaces stay warm (never grey-blue); Night stays navy (never black,
     per Source of Truth 5.2). */
  --derived-ivory-warm: #fdf3ef;
  --derived-ivory-line: #efe1da;
  --derived-navy-900: #0b1d33;
  --derived-navy-800: #12293f;
  --derived-navy-700: #1a3450;
  --derived-navy-line: #24405e;
  --derived-navy-muted: #9aa7bc;

  /* ---- Layer 4 - typography -------------------------------------------
     MASTER CORE ships one interface family (DM Sans, the approved descriptor
     typeface, self-hosted). --font-display is a separate role so an
     exploration can change headline type without touching components. */
  --font-sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --text-2xs: 0.75rem;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --text-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-xl: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem);
  --text-2xl: clamp(1.375rem, 1.22rem + 0.75vw, 1.75rem);
  --text-3xl: clamp(1.625rem, 1.35rem + 1.35vw, 2.375rem);
  --text-4xl: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);

  --leading-tight: 1.12;
  --leading-snug: 1.28;
  --leading-normal: 1.62;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.16em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Layer 4 - spacing (4px base) ------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;

  /* Section rhythm. Information density (Source of Truth 7) is airy: one
     dominant idea per viewport, so vertical rhythm is generous by default. */
  --section-gap: clamp(3.5rem, 2.2rem + 6vw, 7.5rem);

  /* ---- Layer 4 - layout ------------------------------------------------ */
  --width-page: 76rem;
  --width-text: 42rem;
  --gutter: clamp(1.25rem, 0.8rem + 2.2vw, 2.5rem);
  --header-height: 4.5rem;

  /* Breakpoints (also mirrored in tools/check.js):
     sm 30rem / 480px | md 48rem / 768px | lg 64rem / 1024px | xl 80rem / 1280px */

  /* ---- Layer 4 - radius / shadow --------------------------------------- */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(15 39 68 / 6%), 0 2px 8px rgb(15 39 68 / 4%);
  --shadow-md: 0 2px 6px rgb(15 39 68 / 7%), 0 12px 28px rgb(15 39 68 / 7%);
  --shadow-header: 0 1px 0 rgb(15 39 68 / 6%), 0 8px 24px rgb(15 39 68 / 6%);

  /* ---- Layer 4 - motion ------------------------------------------------
     Restrained by instruction: short, few, purposeful (Source of Truth 6). */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 380ms;
  --duration-theme: 260ms;

  /* ---- Layer 4 - brand asset geometry (Logo Rules 10 and 11) ----------- */
  --logo-width-desktop: 10.5rem; /* 168px - above the 120px minimum */
  --logo-width-mobile: 8.75rem; /* 140px - above the 120px minimum */
}

/* =========================================================================
   Layer 3 - SEMANTIC ROLES
   Day is the default. Night is applied by [data-theme="night"] on <html>,
   which the inline bootstrap sets before first paint.
   ========================================================================= */

:root,
[data-theme='day'] {
  color-scheme: light;

  --bg: var(--brand-ivory);
  --bg-alt: var(--derived-ivory-warm);
  --surface: #ffffff;
  --surface-2: var(--derived-ivory-warm);
  --border: var(--derived-ivory-line);
  --border-strong: #dcc8be;

  --text: var(--brand-navy);
  --text-muted: #5b6470; /* 5.74:1 on ivory - darker cut of --brand-slate */

  /* Coral on ivory is 2.12:1. It is an accent surface / rule / marker colour
     on light grounds and is NEVER used for text there. */
  --accent: var(--brand-coral);
  --accent-quiet: #ffe7e1;

  --btn-primary-bg: var(--brand-navy);
  --btn-primary-text: var(--brand-ivory);
  --btn-primary-bg-hover: #163556;
  --btn-secondary-text: var(--brand-navy);
  --btn-secondary-border: var(--brand-navy);
  --btn-secondary-bg-hover: rgb(15 39 68 / 6%);

  --focus-ring: var(--brand-navy);

  --header-bg: transparent;
  --header-bg-scrolled: rgb(254 249 246 / 82%);
  --header-border-scrolled: rgb(15 39 68 / 8%);
}

[data-theme='night'] {
  color-scheme: dark;

  --bg: var(--derived-navy-900);
  --bg-alt: var(--derived-navy-800);
  --surface: var(--derived-navy-800);
  --surface-2: var(--derived-navy-700);
  --border: var(--derived-navy-line);
  --border-strong: #31537a;

  --text: var(--brand-ivory);
  --text-muted: var(--derived-navy-muted); /* 6.97:1 on navy 900 */

  --accent: var(--brand-coral);
  --accent-quiet: rgb(255 143 127 / 16%);

  --btn-primary-bg: var(--brand-coral);
  --btn-primary-text: var(--brand-navy); /* 6.81:1 */
  --btn-primary-bg-hover: #ffa595;
  --btn-secondary-text: var(--brand-ivory);
  --btn-secondary-border: var(--derived-navy-line);
  --btn-secondary-bg-hover: rgb(254 249 246 / 8%);

  --focus-ring: var(--brand-soft-blue);

  --header-bg: transparent;
  --header-bg-scrolled: rgb(11 29 51 / 82%);
  --header-border-scrolled: rgb(199 214 243 / 14%);

  --shadow-sm: 0 1px 2px rgb(4 12 22 / 24%), 0 2px 8px rgb(4 12 22 / 18%);
  --shadow-md: 0 2px 6px rgb(4 12 22 / 26%), 0 12px 28px rgb(4 12 22 / 22%);
  --shadow-header: 0 1px 0 rgb(199 214 243 / 10%), 0 8px 24px rgb(4 12 22 / 28%);
}


/* ---- styles/base.css ---- */
/* =========================================================================
   HERE4AI - BASE
   Reset, document defaults, typography defaults, accessibility primitives.
   ========================================================================= */

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-var.woff') format('woff');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

body {
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--duration-theme) var(--ease-out),
    color var(--duration-theme) var(--ease-out);
}

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

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-4xl);
}
h2 {
  font-size: var(--text-3xl);
}
h3 {
  font-size: var(--text-xl);
}
h4 {
  font-size: var(--text-lg);
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-color: currentColor;
}

/* ---- focus -------------------------------------------------------------
   Focus is visible for keyboard users on every interactive element. The ring
   colour is theme-aware and always at least 3:1 against its ground. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ---- accessibility helpers -------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 100;
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---- unapproved copy marker -------------------------------------------
   Deliberately looks like a build artefact, never like finished copy. */
.pending-copy {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.82em;
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  /* dotted keys such as services.items.0.headline have no break opportunity */
  overflow-wrap: anywhere;
}

/* ---- reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- forced colours ---------------------------------------------------- */
@media (forced-colors: active) {
  .btn,
  .service-card,
  .flow-card,
  .step {
    border: 1px solid CanvasText;
  }
}


/* ---- styles/chrome.css ---- */
/* =========================================================================
   HERE4AI - SHARED CHROME (functional only)
   -------------------------------------------------------------------------
   Rules that exist for correctness, accessibility or brand compliance and
   must therefore be identical in every design exploration:

     - logo geometry and the Logo Rules 11 clear space
     - which logo file is visible in which theme
     - mobile-menu overlay mechanics and scroll containment
     - minimum hit areas
     - the unapproved-copy marker staying non-editorial

   Nothing here carries visual personality. Colour, type, shape, spacing and
   composition belong to each exploration's own layers.
   ========================================================================= */

/* ---- logo ---------------------------------------------------------------
   Logo Rules 10: primary logo minimum 120px wide.
   Logo Rules 11: clear space 0.5X on all sides = 0.064344 x rendered width. */
.logo {
  --logo-w: var(--logo-width-mobile);
  --logo-clear: calc(var(--logo-w) * 0.064344);

  display: inline-flex;
  flex: none;
  align-items: center;
  padding: var(--logo-clear);
  margin: calc(var(--logo-clear) * -1);
  text-decoration: none;
}

.logo__img {
  width: var(--logo-w);
  height: auto;
  aspect-ratio: 550.155 / 97.048;
}

.logo__img--night {
  display: none;
}

[data-theme='night'] .logo__img--day {
  display: none;
}

[data-theme='night'] .logo__img--night {
  display: block;
}

@media (min-width: 48rem) {
  .logo {
    --logo-w: var(--logo-width-desktop);
  }
}

/* ---- hit areas ---------------------------------------------------------- */
.btn,
.control,
.lang__link,
.channel {
  min-height: 2.75rem;
}

.control {
  min-width: 2.75rem;
  cursor: pointer;
}

.btn {
  cursor: pointer;
  text-decoration: none;
}

/* ---- theme toggle glyph swap -------------------------------------------- */
.theme-toggle__icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-toggle__icon--moon {
  display: none;
}

[data-theme='night'] .theme-toggle__icon--sun {
  display: none;
}

[data-theme='night'] .theme-toggle__icon--moon {
  display: block;
}

.menu-icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
}

/* ---- mobile menu mechanics ---------------------------------------------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu[hidden] {
  display: none;
}

@media (min-width: 64rem) {
  .mobile-menu {
    display: none;
  }
}

/* ---- header --------------------------------------------------------------
   Sticky is canonical (Source of Truth 8.4). Everything else is per concept. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* ---- form correctness ---------------------------------------------------- */
.field__error:empty,
.form__status:empty {
  display: none;
}

textarea.field__control {
  resize: vertical;
}

/* ---- section anchoring under the sticky header --------------------------- */
.section,
[id^='conectat-'] {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}


/* ---- final/v1/theme.css ---- */
/* =========================================================================
   FINAL CANDIDATE V1 · art direction
   -------------------------------------------------------------------------
   Peach Flow's universe, refined. Day is an ivory field warmed by peach and
   cooled by lavender; Night is the same field after dusk - warm plum, never
   a cold inversion. The system visuals borrowed from C live inside this
   light: soft-blue arcs, coral waypoints, nothing technical.
   ========================================================================= */

:root,
[data-theme='day'] {
  color-scheme: light;

  --bg: var(--brand-ivory);
  --bg-deep: #fff5f1;
  --surface: rgb(255 255 255 / 76%);
  --surface-solid: #ffffff;
  --surface-2: #fdf2ed;
  --border: rgb(15 39 68 / 8%);
  --border-strong: rgb(15 39 68 / 16%);
  --hairline: rgb(15 39 68 / 11%);

  --text: var(--brand-navy);
  --text-muted: #5b6470;
  /* raised from #7c8494 (3.60:1) so every small label it carries clears AA */
  --text-soft: #69717f;

  --accent: var(--brand-coral);
  --accent-ink: #b2493c; /* 4.9:1 on ivory - a shade of coral, for small type */
  --lavender: #c9c2f0;

  /* three strategic light sources, not an aurora */
  --glow-warm: rgb(255 143 127 / 40%);
  --glow-cool: rgb(201 194 240 / 36%);
  --glow-blue: rgb(199 214 243 / 42%);

  /* the system language, spoken warmly */
  --arc: rgb(139 164 214 / 62%);
  --arc-soft: rgb(139 164 214 / 30%);
  --node: var(--brand-coral);
  --node-ring: rgb(255 143 127 / 20%);

  --btn-primary-bg: var(--brand-navy);
  --btn-primary-text: var(--brand-ivory);
  --btn-primary-bg-hover: #16375a;
  --btn-secondary-text: var(--brand-navy);
  --btn-secondary-border: rgb(15 39 68 / 20%);
  --btn-secondary-bg-hover: rgb(255 255 255 / 84%);

  --focus-ring: var(--brand-navy);

  --glass: rgb(255 255 255 / 66%);
  --glass-line: rgb(255 255 255 / 88%);
  --shadow-soft: 0 1px 3px rgb(160 92 78 / 5%), 0 14px 36px rgb(160 92 78 / 7%);
  --shadow-lift: 0 2px 6px rgb(160 92 78 / 7%), 0 28px 64px rgb(160 92 78 / 11%);
}

[data-theme='night'] {
  color-scheme: dark;

  /* warm plum dusk - the same field after dark */
  --bg: #120f26;
  --bg-deep: #0d0b1d;
  --surface: rgb(255 236 230 / 6%);
  --surface-solid: #1b1733;
  --surface-2: #211b3a;
  --border: rgb(255 226 216 / 11%);
  --border-strong: rgb(255 226 216 / 20%);
  --hairline: rgb(255 226 216 / 14%);

  --text: #fdf2ec;
  --text-muted: #c2b6c8;
  --text-soft: #a094ae;

  --accent: var(--brand-coral);
  --accent-ink: #ffb3a5;
  --lavender: #b9aef0;

  --glow-warm: rgb(255 120 100 / 26%);
  --glow-cool: rgb(150 120 230 / 26%);
  --glow-blue: rgb(96 124 214 / 22%);

  /* soft blue still reads as the connective tissue, just deeper */
  --arc: rgb(150 172 226 / 52%);
  --arc-soft: rgb(150 172 226 / 24%);
  --node: var(--brand-coral);
  --node-ring: rgb(255 143 127 / 22%);

  --btn-primary-bg: var(--brand-coral);
  --btn-primary-text: #26140f;
  --btn-primary-bg-hover: #ffa898;
  --btn-secondary-text: #fdf2ec;
  --btn-secondary-border: rgb(255 226 216 / 24%);
  --btn-secondary-bg-hover: rgb(255 226 216 / 9%);

  --focus-ring: #ffc7ba;

  --glass: rgb(255 236 230 / 7%);
  --glass-line: rgb(255 236 230 / 15%);
  --shadow-soft: 0 1px 3px rgb(5 3 14 / 36%), 0 14px 36px rgb(5 3 14 / 42%);
  --shadow-lift: 0 2px 6px rgb(5 3 14 / 40%), 0 28px 64px rgb(5 3 14 / 48%);
}


/* ---- final/v1/layout.css ---- */
/* =========================================================================
   FINAL CANDIDATE V1 · type scale, rhythm and the glow system
   -------------------------------------------------------------------------
   Peach Flow's character, held to editorial discipline: one clear typographic
   hierarchy, one spacing rhythm, and light used three times rather than
   everywhere.
   ========================================================================= */

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-italic-var.woff') format('woff');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- type scale ------------------------------------------------------
     H1 is dominant by a clear margin at every width; H2 is strong but never
     a second H1; long headings stay comfortable on a 360px screen. */
  --fs-display: clamp(2.25rem, 1.45rem + 3.4vw, 4rem);
  --fs-h2: clamp(1.55rem, 1.22rem + 1.45vw, 2.4rem);
  --fs-h2-quiet: clamp(1.4rem, 1.14rem + 1.12vw, 2rem);
  --fs-h3: clamp(1.08rem, 1.01rem + 0.34vw, 1.32rem);
  --fs-lead: clamp(1.02rem, 0.99rem + 0.26vw, 1.18rem);
  --fs-body: 1rem;
  --fs-sm: 0.925rem;
  --fs-xs: 0.8rem;
  --fs-2xs: 0.72rem;

  --lh-display: 1.08;
  --lh-heading: 1.16;
  --lh-body: 1.68;
  --lh-read: 1.75; /* long-form measure, About */

  --wt-display: 700;
  --wt-heading: 650;
  --wt-sub: 600;
  --wt-body: 400;

  /* ---- rhythm ----------------------------------------------------------
     Airy, but never idling. Mobile starts at 52px, not 72px. */
  --section-y: clamp(3.25rem, 2.15rem + 4.6vw, 7rem);
  --section-y-air: clamp(4.25rem, 2.4rem + 7.4vw, 9.5rem);
  --head-gap: clamp(1.75rem, 1.15rem + 2.2vw, 3.25rem);
  --block-gap: clamp(1rem, 0.7rem + 1.1vw, 1.75rem);
  --measure: 62ch;

  --shell-w: 78rem;
}

html {
  overflow-x: clip;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-x: clip;
}

h1,
h2,
h3 {
  font-family: var(--font-sans);
  line-height: var(--lh-heading);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-display);
  font-weight: var(--wt-display);
  line-height: var(--lh-display);
  letter-spacing: -0.028em;
}

h2 {
  font-size: var(--fs-h2);
  font-weight: var(--wt-heading);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: var(--wt-sub);
  letter-spacing: -0.012em;
}

/* ---- field --------------------------------------------------------------- */
.shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page {
  position: relative;
  isolation: isolate;
}

.section {
  position: relative;
  overflow: clip;
  padding-block: var(--section-y);
}

/* ---- the glow system ------------------------------------------------------
   Three moments carry light: the opening, the pause, the landing. Connected
   gets one quiet cool wash to mark the transition. Nothing else glows. */
.glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(84px);
}

.glow--hero-warm {
  inset-block-start: -18%;
  inset-inline-end: -12%;
  width: min(62vw, 42rem);
  aspect-ratio: 1.15;
  background: var(--glow-warm);
  animation: drift 46s var(--ease-in-out) infinite alternate;
}

.glow--hero-cool {
  inset-block-start: 34%;
  inset-inline-start: -22%;
  width: min(52vw, 34rem);
  aspect-ratio: 1.5;
  background: var(--glow-cool);
}

.glow--connected {
  inset-block-start: -12%;
  inset-inline-start: 24%;
  width: min(64vw, 44rem);
  aspect-ratio: 1.9;
  background: var(--glow-blue);
  opacity: 0.7;
}

.glow--exhale-warm {
  inset-block-start: -26%;
  inset-inline-start: -6%;
  width: min(74vw, 50rem);
  aspect-ratio: 1.25;
  background: var(--glow-warm);
  animation: drift 54s var(--ease-in-out) infinite alternate-reverse;
}

.glow--exhale-cool {
  inset-block-end: -30%;
  inset-inline-end: -10%;
  width: min(66vw, 44rem);
  aspect-ratio: 1.2;
  background: var(--glow-cool);
}

.glow--contact {
  inset-block-end: -24%;
  inset-inline-end: -14%;
  width: min(58vw, 38rem);
  aspect-ratio: 1.3;
  background: var(--glow-warm);
  opacity: 0.85;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(2.5%, 3%, 0) scale(1.07);
  }
}

/* ---- ambient motion is gated by presence -----------------------------------
   Every looping animation on the page is paused unless its section carries
   `is-live`, which the motion layer toggles as sections enter and leave the
   viewport. Two things follow: nothing animates off-screen, and returning to a
   section brings it back to life instead of leaving it frozen after the first
   downward pass. */
:is(.hero, .connected, .process, .exhale, .contact)
  :is(.glow, .orb, .hero__thread-spark, .arc__pulse, .converge__halo, .converge__spark) {
  animation-play-state: paused;
}

 /* two classes on purpose: the animation shorthand in the component layer is
    declared later and would otherwise reset the play state back to running */
.process .step__bead::after {
  animation-play-state: paused;
}

:is(.hero, .connected, .process, .exhale, .contact).is-live
  :is(.glow, .orb, .hero__thread-spark, .arc__pulse, .converge__halo, .converge__spark) {
  animation-play-state: running;
}

.process.is-live .step__bead::after {
  animation-play-state: running;
}

/* the halo is switched on by `.converge.is-drawn`, whose shorthand outranks
   the generic gate above - so it gets its own pair at matching specificity */
.exhale .converge.is-drawn .converge__halo {
  animation-play-state: paused;
}

.exhale.is-live .converge.is-drawn .converge__halo {
  animation-play-state: running;
}

/* ---- shared section head --------------------------------------------------- */
.head {
  max-width: 42rem;
  margin-bottom: var(--head-gap);
}

.head--wide {
  max-width: 50rem;
}

.head__title {
  margin-bottom: var(--space-3);
}

.head__intro {
  max-width: 38rem;
  color: var(--text-muted);
  font-size: var(--fs-lead);
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.05em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ---- entrance ------------------------------------------------------------- */
[data-rise] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 0.8s var(--ease-out), transform 0.9s var(--ease-out);
}

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

@media (prefers-reduced-motion: reduce) {
  [data-rise] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* ambient drift, repeating pulses, convergence motion and decorative glow
     animation are removed outright - the page stays complete without them */
  .arc__pulse,
  .converge__halo,
  .converge__spark,
  .hero__thread-spark {
    display: none;
  }

  .step__bead::after {
    display: none;
  }

  .orb,
  .glow {
    animation: none !important;
  }

  .arc__line,
  .curve__path,
  .sweep__path,
  .hero__thread-path,
  .converge__strands path {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
}


/* ---- final/v1/components.css ---- */
/* =========================================================================
   FINAL CANDIDATE V1 · components
   Soft asymmetric lozenges and warm glass, with two arc-based signatures.
   ========================================================================= */

/* ---- buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.78rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.2;
  transition: transform 0.35s var(--ease-out), background-color 0.25s var(--ease-out),
    box-shadow 0.35s var(--ease-out), border-color 0.25s var(--ease-out);
}

.btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  box-shadow: var(--shadow-soft);
}

.btn--primary:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

.btn--secondary {
  background: var(--glass);
  border-color: var(--btn-secondary-border);
  color: var(--btn-secondary-text);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.btn--secondary:hover {
  background: var(--btn-secondary-bg-hover);
  transform: translateY(-2px);
}

.btn--lg {
  padding: 0.95rem 1.8rem;
  font-size: var(--fs-body);
}

.btn--block {
  width: 100%;
}

/* ---- the brand area: logo + the canonical tagline -------------------------
   The tagline is HTML next to the logo, never inside the frozen artwork. It
   appears in exactly one place at a time: the capsule when the header has the
   room, the hero when it does not. */
.brand {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.85rem;
  min-width: 0;
}

.brand__tagline {
  display: none;
  padding-inline-start: 0.9rem;
  border-inline-start: 1px solid var(--border);
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.008em;
  white-space: nowrap;
}

/* The hero carries the tagline until the capsule is wide enough for it. */
.brand-line {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-xs);
  font-weight: 500;
}

.brand-line__mark {
  flex: none;
  width: 1.35rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.85;
}

@media (min-width: 80rem) {
  .brand__tagline {
    display: inline;
  }

  .brand-line {
    display: none;
  }
}

/* ---- header: a lighter capsule -------------------------------------------- */
.header {
  padding-block: var(--space-3);
}

.header__capsule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: min(var(--shell-w), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  min-height: 3.5rem;
  padding: 0.4rem 0.6rem 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out),
    box-shadow 0.4s var(--ease-out);
}

.header[data-scrolled='true'] .header__capsule {
  background: var(--glass);
  border-color: var(--glass-line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
}

.header__cta {
  display: none;
}

.nav {
  display: none;
  min-width: 0;
}

.nav__list {
  display: flex;
  gap: clamp(0.9rem, 0.2rem + 1.4vw, 1.85rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding-block: 0.3rem;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  color: var(--text-muted);
  transition: color 0.25s var(--ease-out);
}

.nav__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0.25rem;
  height: 2.5px;
  border-radius: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current='true'] {
  color: var(--text);
}

.nav__link:hover::after,
.nav__link[aria-current='true']::after {
  transform: scaleX(1);
}

.control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  transition: background-color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.control:hover {
  background: var(--btn-secondary-bg-hover);
  transform: translateY(-1px);
}

.theme-toggle__icon {
  width: 1.02rem;
  height: 1.02rem;
}

.menu-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.lang {
  display: none;
  flex: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.lang__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.3rem;
  min-height: 2.25rem;
  padding-inline: 0.5rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-decoration: none;
  color: var(--text-muted);
}

.lang__link[aria-current='true'] {
  background: var(--accent);
  color: #26140f;
}

.header__menu-toggle {
  display: inline-flex;
}

/* The language switch only earns header space once the header has room; below
   that it lives in the mobile menu, so the logo never drops under 120px. */
@media (min-width: 48rem) {
  .lang {
    display: inline-flex;
  }
}

@media (min-width: 64rem) {
  .nav {
    display: block;
  }

  .header__cta {
    display: inline-flex;
  }

  .header__menu-toggle {
    display: none;
  }
}

/* ---- mobile menu ---------------------------------------------------------- */
.mobile-menu {
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg-deep);
}

.mobile-menu__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 4.25rem;
  padding-inline: var(--gutter);
}

.mobile-menu__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5) var(--gutter) var(--space-8);
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-menu__link {
  display: block;
  padding: var(--space-4) var(--space-5);
  border-radius: 1.6rem 2.1rem 1.8rem 2.3rem;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.mobile-menu__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.mobile-menu__footer .lang {
  display: inline-flex;
}

/* =========================================================================
   HERO
   ========================================================================= */
.hero {
  padding-block: clamp(2.25rem, 1.2rem + 4vw, 5rem) clamp(3.5rem, 2rem + 6vw, 7.5rem);
}

.hero__grid {
  display: grid;
  gap: clamp(2rem, 0.8rem + 5vw, 4.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.hero__lead {
  max-width: 43rem;
}

.hero__title {
  margin-bottom: var(--space-5);
}

.hero__line {
  display: block;
}

.hero__line--marked {
  position: relative;
  display: inline-block;
}

.hero__line-text {
  position: relative;
  z-index: 1;
}

.sweep {
  position: absolute;
  left: -1%;
  bottom: -0.1em;
  width: 102%;
  height: 0.3em;
  overflow: visible;
}

.sweep__path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-linecap: round;
  opacity: 0.78;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  vector-effect: non-scaling-stroke;
}

.is-ready .sweep__path {
  animation: draw-in 1.1s 0.4s var(--ease-out) forwards;
}

@keyframes draw-in {
  to {
    stroke-dashoffset: 0;
  }
}

.hero__subtitle {
  max-width: 33rem;
  margin-bottom: var(--space-6);
  color: var(--text-muted);
  font-size: var(--fs-lead);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* organic forms: present on mobile too, so the hero never leaves a dead zone */
.hero__forms {
  position: relative;
  height: 11.5rem;
  margin-top: var(--space-2);
}

.orb {
  position: absolute;
  display: block;
  background: var(--glass);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.orb--1 {
  inset-block-start: 4%;
  inset-inline-end: 6%;
  width: 46%;
  height: 46%;
  border-radius: 56% 44% 62% 38% / 52% 58% 42% 48%;
  animation: float-1 18s var(--ease-in-out) infinite alternate,
    breathe-1 13s var(--ease-in-out) infinite alternate;
}

.orb--2 {
  inset-block-start: 38%;
  inset-inline-start: 4%;
  width: 40%;
  height: 44%;
  border-radius: 44% 56% 38% 62% / 58% 42% 58% 42%;
  background: linear-gradient(150deg, var(--glow-warm), transparent 74%), var(--glass);
  animation: float-2 21s var(--ease-in-out) infinite alternate,
    breathe-2 16s var(--ease-in-out) infinite alternate;
}

.orb--3 {
  inset-block-end: 4%;
  inset-inline-end: 22%;
  width: 33%;
  height: 30%;
  border-radius: 62% 38% 48% 52% / 44% 56% 44% 56%;
  background: linear-gradient(210deg, var(--glow-cool), transparent 72%), var(--glass);
  animation: float-3 24s var(--ease-in-out) infinite alternate,
    breathe-1 19s var(--ease-in-out) infinite alternate;
}

@keyframes float-1 { to { transform: translate3d(-9px, 14px, 0) rotate(-3deg); } }
@keyframes float-2 { to { transform: translate3d(12px, -11px, 0) rotate(4deg); } }
@keyframes float-3 { to { transform: translate3d(-7px, -12px, 0) rotate(-2deg); } }

/* a barely-there change of shape: the forms feel like they are settling,
   never like they are performing */
@keyframes breathe-1 {
  from { border-radius: 56% 44% 62% 38% / 52% 58% 42% 48%; }
  to   { border-radius: 48% 52% 54% 46% / 58% 46% 54% 42%; }
}

@keyframes breathe-2 {
  from { border-radius: 44% 56% 38% 62% / 58% 42% 58% 42%; }
  to   { border-radius: 52% 48% 48% 52% / 48% 54% 46% 52%; }
}

/* The thread keeps a slow travelling highlight once it has drawn itself, so
   the hero is alive on every return, not only on first entry. */
.hero__thread-spark {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 3 97;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: thread-spark 9s linear infinite;
}

.hero.is-live .hero__thread-spark {
  opacity: 0.75;
}

@keyframes thread-spark {
  to { stroke-dashoffset: 0; }
}

.hero__thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero__thread-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.38;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.is-ready .hero__thread-path {
  animation: draw-in 2.2s 0.3s var(--ease-out) forwards;
}

@media (min-width: 48rem) {
  .hero__forms {
    height: 20rem;
  }
}

@media (min-width: 64rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
  }

  .hero__forms {
    height: 28rem;
    margin-top: 0;
  }
}

/* =========================================================================
   SERVICES - the cascade
   ========================================================================= */
.cascade {
  display: flex;
  flex-direction: column;
  gap: clamp(1.1rem, 0.7rem + 1.4vw, 2.1rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cascade__item {
  position: relative;
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.35rem);
  border-radius: 1.75rem 2.4rem 1.9rem 2.6rem;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.cascade__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.cascade__index {
  position: absolute;
  inset-block-start: -0.55rem;
  inset-inline-end: 1.1rem;
  font-size: clamp(3.25rem, 2.2rem + 4vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--accent);
  opacity: 0.13;
  pointer-events: none;
}

.cascade__label {
  position: relative;
  margin-bottom: var(--space-2);
  font-style: italic;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.cascade__title {
  position: relative;
  max-width: 24ch;
  margin-bottom: var(--space-3);
}

.cascade__copy {
  position: relative;
  max-width: 56ch;
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 64rem) {
  .cascade__item {
    width: 80%;
  }

  .cascade__item--2 {
    margin-inline-start: 10%;
  }

  .cascade__item--3 {
    margin-inline-start: 20%;
  }
}

/* ---- flow link + disclosure ------------------------------------------------ */
.flow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 24px;
  padding-block: 0.3rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.flow-link::-webkit-details-marker {
  display: none;
}

.flow-link__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  transition: transform 0.4s var(--ease-out);
}

.flow-link:hover .flow-link__dot,
details[open] > .flow-link .flow-link__dot {
  transform: scale(1.9);
}

.reveal__panel {
  margin-top: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: 1.1rem 1.6rem 1.1rem 1.6rem;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
}

.disclosure__note {
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-xs);
}

.reveal__link {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* =========================================================================
   CONNECTED - signature one: three arcs through the canonical flows
   ========================================================================= */
.lanes {
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 0.8rem + 2vw, 3.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lane {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(0.9rem, 0.7rem + 0.9vw, 1.6rem);
  border-top: 1px solid var(--hairline);
}

.lane:first-child {
  border-top: 0;
}

.lane__meta {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.lane__index {
  font-style: italic;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
}

.lane__verb {
  font-size: 1.02rem;
  font-weight: 650;
  letter-spacing: 0.07em;
}

.lane__label {
  margin-top: 0.15rem;
  font-style: italic;
  font-size: var(--fs-xs);
  color: var(--text-soft);
}

.lane__copy {
  max-width: 46ch;
  margin-top: var(--space-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ---- the arc --------------------------------------------------------------
   The curve and the waypoints are generated from one point list, so a dot can
   never sit off its line. Two orientations, one source. */
.arc {
  position: relative;
  height: var(--v-h);
  padding-inline-start: 0.5rem;
}

.arc__svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.arc__svg--h {
  display: none;
  width: 100%;
  height: 150px;
}

.arc__svg--v {
  display: block;
  width: 76px;
  height: 100%;
}

.arc__line {
  fill: none;
  stroke: var(--arc);
  stroke-width: 1.7;
  stroke-linecap: round;
}

.arc__pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 4 96;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: arc-pulse 7s linear infinite;
}

.connected.is-live .arc__pulse {
  opacity: 0.85;
}

.lane:nth-child(2) .arc__pulse { animation-delay: 2.3s; }
.lane:nth-child(3) .arc__pulse { animation-delay: 4.6s; }

@keyframes arc-pulse {
  to {
    stroke-dashoffset: 0;
  }
}

/* Waypoints anchor on the POINT, not on the label box: the dot is the thing
   that must sit on the curve, so the wrapper is a zero-size anchor and the
   label hangs off it. */
.wp {
  position: absolute;
  inset-inline-start: var(--mx);
  inset-block-start: var(--my);
  width: 0;
  height: 0;
}

.wp__dot {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  width: 0.62rem;
  height: 0.62rem;
  margin: -0.31rem 0 0 -0.31rem;
  border-radius: 999px;
  background: var(--bg);
  border: 2px solid var(--node);
  transition: background-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}

.lane.is-in .wp__dot {
  background: var(--node);
  box-shadow: 0 0 0 5px var(--node-ring);
}

.wp--last .wp__dot {
  width: 0.78rem;
  height: 0.78rem;
  margin: -0.39rem 0 0 -0.39rem;
}

.lane.is-in .wp--last .wp__dot {
  box-shadow: 0 0 0 7px var(--node-ring);
}

.wp__text {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.85rem;
  transform: translateY(-50%);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  color: var(--text);
}

.wp--last .wp__text {
  font-weight: 700;
}

@media (min-width: 62rem) {
  .lane {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: clamp(1.5rem, 0.6rem + 2.2vw, 3rem);
    align-items: center;
  }

  .arc {
    height: 150px;
    padding-inline-start: 0;
  }

  .arc__svg--v {
    display: none;
  }

  .arc__svg--h {
    display: block;
  }

  .wp {
    inset-inline-start: var(--dx);
    inset-block-start: var(--dy);
  }

  /* on the wide arc the label sits clear of the line, above or below */
  .wp__text {
    inset-inline-start: 50%;
    transform: translateX(-50%);
    font-size: 0.72rem;
  }

  .wp--up .wp__text {
    inset-block-start: auto;
    inset-block-end: 0.95rem;
  }

  .wp--down .wp__text {
    inset-block-start: 0.95rem;
  }
}

/* =========================================================================
   PROCESS - the organic path
   ========================================================================= */
.curve {
  position: relative;
}

.curve__svg {
  /* width and offset are chosen so the curve's centre line lands exactly on
     the bead column - the beads must never float beside their own path */
  position: absolute;
  inset-block: 1.35rem;
  inset-inline-start: 0;
  width: 3.45rem;
  height: calc(100% - 2.7rem);
  overflow: visible;
}

.curve__path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.4;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw, 0));
  transition: stroke-dashoffset 2s var(--ease-out);
}

.steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 0.9rem + 1.9vw, 2.75rem);
  margin: 0;
  list-style: none;
}

/* Two classes on purpose: the base reset targets ol[class], which would
   otherwise out-specify a single-class rule and flatten the bead column. */
.curve .steps {
  padding: 0 0 0 3.5rem;
}

.step {
  position: relative;
  max-width: 34rem;
}

.step__bead {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: -2.2rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 999px;
  background: var(--bg);
  border: 2.5px solid var(--accent);
  transition: transform 0.5s var(--ease-out), background-color 0.5s var(--ease-out);
}

.step.is-in .step__bead {
  background: var(--accent);
  transform: scale(1.2);
}

/* a slow ring that travels the five beads in turn: the path stays alive on
   every visit without replaying any text entrance */
.step__bead::after {
  content: '';
  position: absolute;
  inset: -0.3rem;
  border-radius: 999px;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: bead-ring 9s var(--ease-out) infinite;
}

.step:nth-child(2) .step__bead::after { animation-delay: 1.1s; }
.step:nth-child(3) .step__bead::after { animation-delay: 2.2s; }
.step:nth-child(4) .step__bead::after { animation-delay: 3.3s; }
.step:nth-child(5) .step__bead::after { animation-delay: 4.4s; }

@keyframes bead-ring {
  0%   { transform: scale(0.55); opacity: 0; }
  8%   { opacity: 0.5; }
  26%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

.step__index {
  display: block;
  margin-bottom: 0.3rem;
  font-style: italic;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent-ink);
}

.step__name {
  margin-bottom: 0.25rem;
}

.step__copy {
  max-width: 46ch;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

@media (min-width: 64rem) {
  .curve__svg {
    inset-inline-start: 50%;
    width: 11rem;
    transform: translateX(-50%);
  }

  .curve .steps {
    padding: 0;
  }

  .step {
    width: 41%;
  }

  .step--l {
    margin-inline-end: auto;
    text-align: right;
  }

  .step--r {
    margin-inline-start: auto;
  }

  .step--l .step__bead {
    inset-inline-start: auto;
    inset-inline-end: -18%;
  }

  .step--r .step__bead {
    inset-inline-start: -18%;
  }

  .step--l .step__copy {
    margin-inline-start: auto;
  }
}

/* =========================================================================
   DIFFERENTIATION - signature two: many paths, one warm point
   ========================================================================= */
.exhale {
  padding-block: var(--section-y-air);
  text-align: center;
}

.exhale__inner {
  max-width: 60rem;
}

.exhale__text {
  max-width: 46rem;
  margin-inline: auto;
}

.exhale__title {
  margin-bottom: var(--space-5);
  font-size: clamp(1.8rem, 1.25rem + 2.4vw, 2.9rem);
}

.exhale__body {
  margin-inline: auto;
  max-width: 40rem;
  color: var(--text-muted);
  font-size: var(--fs-lead);
}

.converge {
  margin-top: clamp(2rem, 1rem + 3vw, 3.5rem);
}

.converge__svg {
  width: 100%;
  overflow: visible;
}

/* narrow screens get their own composition, not a squeezed wide one */
.converge__svg--narrow {
  display: block;
  height: clamp(9rem, 6rem + 14vw, 12rem);
}

.converge__svg--wide {
  display: none;
  height: clamp(8rem, 4rem + 12vw, 13rem);
}

@media (min-width: 48rem) {
  .converge__svg--narrow {
    display: none;
  }

  .converge__svg--wide {
    display: block;
  }
}

.converge__strands path {
  fill: none;
  stroke: var(--arc);
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 0.88;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--draw, 0));
  transition: stroke-dashoffset 2.4s var(--ease-out);
}

.converge__strands path:nth-child(2) { transition-delay: 0.12s; }
.converge__strands path:nth-child(3) { transition-delay: 0.24s; }
.converge__strands path:nth-child(4) { transition-delay: 0.06s; }
.converge__strands path:nth-child(5) { transition-delay: 0.18s; }
.converge__strands path:nth-child(6) { transition-delay: 0.3s; }

.converge__point {
  fill: var(--accent);
  filter: drop-shadow(0 0 10px var(--node-ring));
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.2);
  transition: opacity 0.8s 1.5s var(--ease-out), transform 0.9s 1.5s var(--ease-out);
}

.converge[style*='--draw'] .converge__point,
.converge.is-drawn .converge__point {
  opacity: 1;
  transform: scale(1);
}

.converge__halo {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.converge.is-drawn .converge__halo {
  animation: halo 4.5s 2s var(--ease-out) infinite;
}

/* the strands keep a slow travelling light after they have drawn, so the
   convergence reads as ongoing rather than finished */
.converge__spark {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 2.5 97.5;
  stroke-dashoffset: 100;
  opacity: 0;
  animation: converge-spark 11s linear infinite;
}

.converge__sparks path:nth-child(2) { animation-delay: 3.6s; }
.converge__sparks path:nth-child(3) { animation-delay: 7.2s; }

.exhale.is-live .converge.is-drawn .converge__spark {
  opacity: 0.55;
}

@keyframes converge-spark {
  to { stroke-dashoffset: 0; }
}

@keyframes halo {
  0% { transform: scale(0.35); opacity: 0.5; }
  70% { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* =========================================================================
   ABOUT - Peach Flow surface, editorial reading
   ========================================================================= */
.about__grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 2.6vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.about__heading {
  max-width: 16ch;
  margin-bottom: var(--space-4);
}

.about__metrics {
  padding-top: var(--space-4);
  border-top: 1px solid var(--hairline);
}

.about__metrics-label {
  display: block;
  margin-bottom: 0.3rem;
  font-style: italic;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-ink);
}

.about__metrics-value {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-wrap: balance;
}

.about__body {
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-read);
}

.about__body > p + p {
  margin-top: var(--block-gap);
}

.about__lead {
  margin-bottom: var(--block-gap);
  color: var(--text);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.55;
}

@media (min-width: 62rem) {
  .about__grid {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  }

  .about__aside {
    position: sticky;
    top: 6.5rem;
  }
}

/* =========================================================================
   CONTACT - rebalanced
   ========================================================================= */
.contact__grid {
  display: grid;
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* The headline is an H2, not a second H1: quieter step, tighter measure. */
.contact__title {
  max-width: 18ch;
  margin-bottom: var(--space-3);
  font-size: var(--fs-h2-quiet);
}

.contact__subtitle {
  max-width: 40ch;
  margin-bottom: var(--space-5);
  color: var(--text-muted);
  font-size: var(--fs-body);
}

.channels-block {
  margin-top: var(--space-7);
}

.channels__label {
  display: block;
  margin-bottom: var(--space-3);
  font-style: italic;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.channel {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: transform 0.3s var(--ease-out);
}

.channel:hover {
  transform: translateY(-2px);
}

.channel__kind {
  font-size: var(--fs-2xs);
  color: var(--text-soft);
}

.channel__value {
  font-weight: 600;
}

/* Lighter card: less padding, softer shadow, tighter field rhythm. */
.form {
  padding: clamp(1.25rem, 0.9rem + 1.2vw, 1.85rem);
  border-radius: 1.6rem 2.2rem 1.6rem 2.2rem;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.field + .field {
  margin-top: var(--space-4);
}

.field__label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-muted);
}

.field__control {
  width: 100%;
  padding: 0.68rem 0.95rem;
  border: 1px solid var(--border-strong);
  border-radius: 0.85rem;
  background: var(--surface-solid);
  color: var(--text);
  font-size: var(--fs-sm);
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}

.field__control::placeholder {
  color: var(--text-soft);
  opacity: 1;
}

.field__control:hover {
  border-color: var(--text-soft);
}

textarea.field__control {
  min-height: 6.5rem;
  border-radius: 1rem;
}

.field__error {
  display: block;
  margin-top: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--accent-ink);
}

.field[data-invalid='true'] .field__control {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--node-ring);
}

.form__foot {
  margin-top: var(--space-5);
}

.form__status {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: 1rem;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  font-size: var(--fs-sm);
}

@media (min-width: 62rem) {
  .contact__grid {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}

/* =========================================================================
   NOTICE + FOOTER
   ========================================================================= */
.notice {
  padding-block: var(--space-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
}

.notice__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: var(--shell-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.notice__tag {
  flex: none;
  padding: 0.15em 0.6em;
  border-radius: 999px;
  background: var(--accent);
  color: #26140f;
  font-family: var(--font-mono);
  font-size: 0.9em;
  font-weight: 700;
}

.footer {
  position: relative;
  z-index: 1;
  margin-top: clamp(1.5rem, 0.8rem + 2.4vw, 3.25rem);
  padding-block: clamp(2.5rem, 1.6rem + 2.6vw, 4.25rem) var(--space-6);
  border-radius: clamp(1.75rem, 0.9rem + 3.4vw, 3.25rem) clamp(1.75rem, 0.9rem + 3.4vw, 3.25rem) 0 0;
  background: var(--bg-deep);
}

.footer__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}

.footer__tagline {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-style: italic;
  font-size: var(--fs-sm);
}

.footer__heading {
  margin-bottom: var(--space-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
}

.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.footer__slot {
  padding: var(--space-3) var(--space-4);
  border-radius: 1rem;
  border: 1px dashed var(--border-strong);
  color: var(--text-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
}

@media (min-width: 48rem) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }
}


/* ---- final/v1/sectors.css ---- */
/* =========================================================================
   FINAL CANDIDATE V1 · "Pentru ce tipuri de business?"
   -------------------------------------------------------------------------
   Additive only. Every value below is an existing token, and the card surface
   is the one the Services cascade already uses - same fill, same hairline,
   same soft shadow, same asymmetric radius, same lift on hover. Nothing new
   is introduced: no colour, no type size, no radius, no shadow, no motion.
   ========================================================================= */

/* ---- the seven ----------------------------------------------------------
   SEVEN is the awkward number, and the layout answers it rather than hiding
   it. A 12-column field lets the first four cards take three columns each and
   the last three take four, so the section reads as two complete rows of
   different rhythm instead of two rows and an orphan. Nothing is padded out
   to force a square, and no eighth category is invented to make the maths
   convenient - the copy says the list is only indicative, and the shape of the
   grid should say the same thing. */
.sectors__grid {
  display: grid;
  gap: clamp(0.9rem, 0.6rem + 1.1vw, 1.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sectors__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* one step tighter than a cascade card: these hold two lines, not five */
  padding: clamp(1.15rem, 0.85rem + 1vw, 1.6rem);
  border-radius: 1.75rem 2.4rem 1.9rem 2.6rem;
  background: var(--surface);
  border: 1px solid var(--glass-line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}

.sectors__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.sectors__title {
  margin: 0;
  font-size: var(--fs-h2-quiet);
  font-weight: var(--wt-heading);
  /* the card titles are short; balancing stops a two-word orphan line */
  text-wrap: balance;
}

.sectors__examples {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  /* The separators are middots inside one supplied string. Relaxing the line
     height keeps the run readable when it wraps to three lines on a phone. */
  line-height: 1.65;
}

/* ---- the closing note ---------------------------------------------------
   Deliberately NOT an eighth card. It answers a different question, so it gets
   a different form: no surface, no border, no shadow - just a hairline above
   it, the way the page separates a thought from the block it follows. */
.sectors__closing {
  max-width: 46rem;
  margin-top: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  padding-top: clamp(1.25rem, 0.9rem + 1.4vw, 2rem);
  border-top: 1px solid var(--glass-line);
}

.sectors__closing-title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-h2-quiet);
  font-weight: var(--wt-heading);
}

.sectors__closing-text {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-lead);
}

/* ---- two columns once there is room ------------------------------------
   The seventh spans both tracks rather than sitting alone beside a gap. */
@media (min-width: 40rem) {
  .sectors__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sectors__item:last-child {
    grid-column: 1 / -1;
  }
}

/* ---- the 4 + 3 field ---------------------------------------------------- */
@media (min-width: 64rem) {
  .sectors__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    /* Both rows get ONE height, the taller row's. The two rows differed only
       because the narrower cards in row one wrap their title to a second line
       - a content accident, not a design intention, and it read as two
       unrelated bands. Equalising the TRACKS is the fix the grid already
       offers: no width is touched, no type is shrunk, nothing is truncated,
       and no card gets padding of its own. The cards stretch to the track,
       their content stays top-aligned, and the section reads as one field.
       Desktop only - tablet and mobile already have even rows. */
    grid-auto-rows: 1fr;
  }

  .sectors__item {
    grid-column: span 3;
  }

  /* the second row: three wider cards, which is also where the longest
     example runs live, so nothing is squeezed to fit a column it outgrew */
  .sectors__item:nth-child(n + 5) {
    grid-column: span 4;
  }

  /* the tablet rule above must not follow us here */
  .sectors__item:last-child {
    grid-column: span 4;
  }
}


/* ---- final/v1/newsletter.css ---- */
/* =========================================================================
   FINAL CANDIDATE V1 · newsletter
   -------------------------------------------------------------------------
   Additive only. Every value below comes from a token FINAL V1 already
   defines - no new colour, no new type size, no new spacing step, no new
   decorative idea. The block reads as the page's own quiet closing note
   before Contact, not as a widget dropped on top of it.
   ========================================================================= */

.newsletter {
  /* one step tighter than a full section: this is a coda, not a chapter */
  padding-block: clamp(2.5rem, 1.7rem + 3.4vw, 5rem);
}

/* The block sits on the page's own left axis, like every section around it.
   It used to be a narrow centred column, which read as an island dropped into
   a left-aligned page - the eye lost the margin it had been following since
   the hero. So `.newsletter__inner` keeps the full shell width (that is what
   puts it on the shared axis) and the CONTENT inside it is what stays narrow:
   measure is a property of the text, not a reason to move the block. The right
   side is left open on purpose - the whitespace there is the breathing room
   this coda needs, and filling it would make the section shout. */
.newsletter__inner {
  text-align: start;
}

.newsletter__title {
  font-size: var(--fs-h2-quiet);
  font-weight: var(--wt-heading);
  margin-bottom: var(--space-3);
}

.newsletter__lead {
  max-width: 46rem;
}

.newsletter__subtitle {
  max-width: 36rem;
  color: var(--text-muted);
  font-size: var(--fs-lead);
}

/* ---- the form -----------------------------------------------------------
   One row on anything wider than a phone; stacked below that. The control and
   the button share a height so the row reads as a single object. */
.newsletter__form {
  display: grid;
  gap: var(--space-3);
  /* the row is the one thing that must not run the full width of the page:
     an email field 78rem wide looks like a mistake, not like generosity */
  max-width: 34rem;
  margin-top: clamp(1.5rem, 1rem + 1.6vw, 2.25rem);
  text-align: start;
}

.newsletter__field {
  margin: 0;
}

.newsletter__field .field__control {
  width: 100%;
}

.newsletter__action .btn {
  width: 100%;
}

.newsletter__status:not(:empty) {
  grid-column: 1 / -1;
  margin-top: var(--space-1);
  font-size: var(--fs-sm);
  text-align: start;
}

/* the success line is the one moment this block earns colour */
.newsletter__status[data-state='ok'] {
  color: var(--accent-ink);
  font-weight: 600;
}

.newsletter__status[data-state='error'] {
  color: var(--accent-ink);
}

.newsletter__fineprint {
  /* it has to be read next to the button, so it keeps the form's measure */
  max-width: 34rem;
  margin-top: var(--space-3);
  color: var(--text-soft);
  font-size: var(--fs-xs);
  text-align: start;
}

/* The consent sentence is part of the fineprint, not a second paragraph: it
   has to be READ next to the button, but it must not compete with the offer. */
.newsletter__consent {
  display: block;
  margin-top: 0.15rem;
}

/* The bot trap is removed from the page for every real user and every assistive
   technology. It is not `display:none` on the input alone, because some bots
   skip hidden inputs - the wrapper is what disappears. */
.newsletter__trap {
  /* Moved off-screen rather than clipped to 1px: a clipped wrapper still leaves
     the input a real layout box, which makes it hard to prove it is invisible.
     Off-screen is unambiguous, and unlike `display:none` it stays in the DOM
     where a form-filling bot will still find and fill it. */
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

@media (min-width: 34rem) {
  .newsletter__form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .newsletter__action .btn {
    width: auto;
    /* match the control's height so the pair reads as one row */
    min-height: 3rem;
  }

  .newsletter__field .field__control {
    min-height: 3rem;
  }
}


/* ---- final/v1/contact-form.css ---- */
/* =========================================================================
   FINAL CANDIDATE V1 · contact form — launch functionality only
   -------------------------------------------------------------------------
   Two rules, both required by behaviour that did not exist before. Nothing
   here changes the form's design: no colour, no type, no spacing, no layout.
   ========================================================================= */

/* The bot trap. Off-screen rather than display:none, because a hidden input is
   exactly what a bot skips - and the wrapper is what moves, so the input keeps
   a real layout box that a filler will populate. */
.contact__trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* The submitting state. The button had no disabled appearance because nothing
   could disable it until now; without this it looks pressable while a request
   is in flight, which invites a second submission. */
.btn:disabled {
  opacity: 0.6;
  cursor: progress;
  transform: none;
}


/* ---- final/v1/legal.css ---- */
/* =========================================================================
   FINAL CANDIDATE V1 · legal documents
   -------------------------------------------------------------------------
   Reading, not design. Every value is an existing FINAL V1 token; the only
   decisions here are the ones a long legal text actually needs - a narrow
   measure, generous leading, and headings that separate sections without
   shouting. No new colour, no new typeface, no animation.
   ========================================================================= */

.legal {
  padding-block: var(--section-y) var(--section-y-air);
}

.legal__doc {
  /* ~70 characters: long enough not to fragment legal sentences, short enough
     to stay readable through nine sections */
  max-width: 44rem;
}

.legal__title {
  font-size: var(--fs-h2);
  font-weight: var(--wt-heading);
  margin-bottom: var(--head-gap);
}

.legal__h2 {
  font-size: var(--fs-h3);
  font-weight: var(--wt-sub);
  margin-block: clamp(2rem, 1.4rem + 2vw, 3rem) var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
}

.legal__h3 {
  font-size: var(--fs-body);
  font-weight: 650;
  margin-block: var(--space-6) var(--space-2);
}

.legal__p {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  line-height: var(--lh-read);
}

.legal__list {
  margin: 0 0 var(--space-4);
  padding-inline-start: 1.15rem;
  color: var(--text-muted);
  line-height: var(--lh-read);
}

.legal__list li {
  margin-bottom: var(--space-1);
}

/* The document opens with the operator's details as a run of short lines. They
   are one paragraph in the source and must stay one block visually, set apart
   from the prose around them without being restyled into a "card". */
.legal__p:has(br) {
  color: var(--text);
}

.legal__back {
  margin-top: var(--section-y);
  padding-top: var(--space-5);
  border-top: 1px solid var(--hairline);
  font-size: var(--fs-sm);
}

/* The two footer links replace the repeated company block. Same list styling
   the footer already uses for its other two columns. */
.footer__legal-links {
  margin: 0;
}