/* Generated by scripts/fetch-fonts.mjs — do not edit by hand.
   Self-hosted so the site makes no third-party requests on load. */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks: these keep font-display:swap from shifting layout. */
@font-face {
  font-family: "Serif Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 97%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Sans Fallback";
  src: local("Helvetica Neue"), local("Helvetica"), local("Arial");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}


/* ==========================================================================
   Altervest — design system

   THE COLOUR LAW, which governs everything below:
   #00AEEF measures 2.53:1 on white. It fails AA text (4.5:1) and it fails the
   3:1 non-text/UI threshold too. On light grounds it is a DECORATION colour
   only — never a `color`, never a `border-color`, never a focus ring. Light-
   ground text and interactive blue is #17629E (6.41:1); light-ground UI strokes
   are #0099CC (3.27:1). Cyan gets to be loud on navy, where it measures 6.08:1.
   ========================================================================== */

:root {
  /* --- Grounds ------------------------------------------------------------ */
  --navy-900: #061527;              /* footer only */
  --navy-800: #081c34;              /* hero dark stop */
  --navy: #0b2545;                  /* primary dark ground */
  --white: #ffffff;
  --bone: #f7f5f2;                  /* warm off-white; cool greys read clinical */

  /* --- Ink ---------------------------------------------------------------- */
  --ink: #12263a;                   /* 15.4:1 on white */
  --ink-muted: #4a6076;             /* 6.5:1 on white */
  --ink-invert: #ffffff;
  --ink-invert-muted: rgba(255, 255, 255, 0.72);

  /* --- Brand -------------------------------------------------------------- */
  --cyan: #00aeef;                  /* graphics + on-navy text */
  --blue: #1c75bc;                  /* graphics only */
  --cyan-ui: #0099cc;               /* light-ground UI strokes */
  --blue-ink: #17629e;              /* light-ground text + links */

  --grad-brand: linear-gradient(60deg, #081c34 0%, #1c75bc 70%, #00aeef 100%);

  /* --- Surfaces ----------------------------------------------------------- */
  --navy-05: #f2f5f8;
  --hairline-light: rgba(18, 38, 58, 0.11);
  --hairline-dark: rgba(255, 255, 255, 0.16);

  /* --- Space -------------------------------------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: clamp(2.5rem, 1.8rem + 2.2vw, 3.5rem);
  --s8: clamp(3.5rem, 2.4rem + 3.4vw, 5rem);
  --s9: clamp(4.5rem, 2.5rem + 6vw, 8rem);

  /* --- Measure ------------------------------------------------------------ */
  --w-page: 1180px;
  --w-wide: 1400px;
  --w-text: 68ch;
  --gutter: clamp(20px, 4vw, 40px);
  --header-h: 88px;

  /* --- Type --------------------------------------------------------------- */
  --font-serif: "Source Serif 4", "Serif Fallback", Georgia, serif;
  --font-sans: "Inter", "Sans Fallback", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-display: clamp(2.25rem, 1.45rem + 3.4vw, 4rem);
  --t-h1: clamp(2rem, 1.5rem + 2.1vw, 3rem);
  --t-h2: clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --t-h3: clamp(1.3rem, 1.15rem + 0.65vw, 1.625rem);
  --t-h4: 1.3125rem;
  --t-lead: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --t-body: 1.1875rem;
  --t-sm: 1rem;
  --t-micro: 0.8125rem;
  --t-eyebrow: 0.75rem;

  /* --- Shape -------------------------------------------------------------- */
  --radius: 2px;
  --shadow-hover: 0 10px 24px -12px rgba(11, 37, 69, 0.28);

  /* --- Motion. Three curves; no control point above y=1, so nothing bounces. */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-instant: 120ms;
  --dur-hover: 180ms;
  --dur-ui: 260ms;
  --dur-reveal: 520ms;
  --dur-hero: 720ms;
  --dur-draw: 900ms;
  --dur-build: 1000ms;
  --stagger: 90ms;
  --reveal-y: 20px;
}

/* Layer 1 of the reduced-motion handling: zero the tokens, so every duration
   and offset derived from them collapses without touching a single rule. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; --dur-hover: 0ms; --dur-ui: 0ms;
    --dur-reveal: 0ms;  --dur-hero: 0ms;  --dur-draw: 0ms;
    --dur-build: 0ms;
    --stagger: 0ms;     --reveal-y: 0px;
  }
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
address { font-style: normal; }

/* Anything a fragment link or the scrollspy focuses must clear the sticky
   header, or the header eats the element the user was sent to. */
:target, [id] { scroll-margin-top: calc(var(--header-h) + var(--s5)); }

/* A focus ring that survives white, bone, navy AND photography: two tones with
   a white separator, so one of the three is always visible. */
:focus-visible {
  outline: 2px solid var(--cyan-ui);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--navy);
  border-radius: var(--radius);
}

.on-navy :focus-visible,
.menu :focus-visible,
.footer :focus-visible,
.header:not(.is-stuck) :focus-visible,
.section--navy :focus-visible {
  box-shadow: 0 0 0 4px var(--navy), 0 0 0 6px var(--white);
}

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

.skip-link {
  position: absolute;
  top: var(--s3); left: var(--s3);
  z-index: 200;
  padding: var(--s3) var(--s5);
  background: var(--white);
  color: var(--ink);
  font-size: var(--t-sm);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

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

h1, h2, h3, .u-serif {
  font-family: var(--font-serif);
  font-weight: 400;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -0.012em; }
h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -0.01em; }
h3 { font-size: var(--t-h3); line-height: 1.2; }

h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

p { text-wrap: pretty; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-muted);
}

.prose { max-width: var(--w-text); }
.prose p + p { margin-top: var(--s5); }

.eyebrow {
  display: inline-block;
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.section--navy .eyebrow { color: var(--cyan); }

/* The 3px gradient rule that sits under every section eyebrow. Its scaleX draw
   is the smallest recurring motion on the site and the one that ties the
   sections together. */
.eyebrow-rule {
  display: block;
  width: 56px;
  height: 3px;
  margin-top: var(--s3);
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-reveal) var(--ease-out-quart) 120ms;
}

/* Sections that keep the firm's own heading carry the rule alone. */
.eyebrow-rule--bare { margin-top: 0; margin-bottom: var(--s5); }

.is-in .eyebrow-rule,
.eyebrow-rule.is-in { transform: scaleX(1); }

/* When the heading itself is set at eyebrow scale, the mono/uppercase
   treatment has to beat the h1–h3 serif rule that would otherwise win. */
h2.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Every figure, date and phone number aligns down a column. */
.num, time, .tel {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   Links and buttons
   ========================================================================== */

a { color: inherit; }

/* The underline wipes in rather than switching colour — the Pictet move. */
.link,
.prose a,
.footer__col a,
.contact__list a {
  color: var(--blue-ink);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 250ms ease-in-out;
}

.link:hover, .link:focus-visible,
.prose a:hover, .prose a:focus-visible,
.footer__col a:hover, .footer__col a:focus-visible,
.contact__list a:hover, .contact__list a:focus-visible { background-size: 100% 1px; }

.on-navy .link,
.section--navy .prose a,
.footer__col a { color: var(--cyan); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: 14px 28px;
  border: 1px solid currentColor;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  transition:
    background-color var(--dur-hover) var(--ease-out-quart),
    color var(--dur-hover) var(--ease-out-quart);
}

.btn--lg { padding: 18px 36px; }

/* On light grounds: ink outline, fills to ink. */
.btn--solid { color: var(--ink); }
.btn--solid:hover,
.btn--solid:focus-visible { background: var(--ink); color: var(--white); }

/* On navy: white outline, fills to white. Never a brand-colour fill — cyan
   behind white text would be 2.5:1. */
.on-navy .btn--solid,
.section--navy .btn--solid,
.menu .btn--solid,
.footer .btn--solid { color: var(--white); }

.on-navy .btn--solid:hover,
.on-navy .btn--solid:focus-visible,
.section--navy .btn--solid:hover,
.section--navy .btn--solid:focus-visible,
.menu .btn--solid:hover,
.menu .btn--solid:focus-visible,
.footer .btn--solid:hover,
.footer .btn--solid:focus-visible { background: var(--white); color: var(--navy); }

.btn--ghost { color: var(--ink-muted); border-color: var(--hairline-light); }
.btn--ghost:hover { color: var(--ink); border-color: currentColor; }

.btn__arrow { transition: transform var(--dur-hover) var(--ease-out-quart); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ==========================================================================
   Layout
   ========================================================================== */

.container { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: var(--gutter); }
.container--wide { max-width: var(--w-wide); }

.section { padding-block: var(--s9); }
.section--white { background: var(--white); }
.section--bone { background: var(--bone); }

.section--navy {
  background: var(--navy);
  color: var(--ink-invert);
}

.section--navy .lead,
.section--navy p { color: var(--ink-invert-muted); }
.section--navy h1, .section--navy h2, .section--navy h3 { color: var(--ink-invert); }

.section__head { max-width: var(--w-text); margin-bottom: var(--s8); }
.section__head h2 { margin-top: var(--s5); }
.section__head .eyebrow-rule--bare + h2 { margin-top: 0; }
.section__head .lead { margin-top: var(--s5); }

/* Hairlines are inset to the text column and tinted navy rather than grey; a
   full-bleed #ddd rule is what makes a page look like a spreadsheet. */
.rule { height: 1px; background: var(--hairline-light); border: 0; margin: 0; }
.section--navy .rule { background: var(--hairline-dark); }

/* ==========================================================================
   Motion — M2 rise / M3 stagger
   The opacity:0 lives inside a .js scope set by an inline head script, so a
   failed or blocked script can never leave the page blank.
   ========================================================================== */

.js .reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0);
  transition:
    opacity var(--dur-reveal) var(--ease-out-quart),
    transform var(--dur-reveal) var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ==========================================================================
   Header — M8 condense
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition:
    height var(--dur-ui) var(--ease-standard),
    background-color var(--dur-ui) var(--ease-standard),
    box-shadow var(--dur-ui) var(--ease-standard);
}

.header { color: var(--ink-invert); }

.header__inner {
  width: 100%;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--s6);
}

.header.is-stuck {
  height: 64px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 -1px 0 var(--hairline-light);
  color: var(--ink);
}



.header__brand {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  text-decoration: none;
  margin-right: auto;
}

.logo { width: auto; }
.header__logo { height: 34px; transition: height var(--dur-ui) var(--ease-standard); }
.header.is-stuck .header__logo { height: 28px; }

/* Until it condenses, the header floats over navy on every page, so the mark
   takes the light gradient stops and the outline button takes white. */
.header:not(.is-stuck) .logo { --logo-from: #ffffff; --logo-to: #7fd4f5; }

.header:not(.is-stuck) .btn--solid { color: var(--ink-invert); }

.header:not(.is-stuck) .btn--solid:hover,
.header:not(.is-stuck) .btn--solid:focus-visible {
  background: var(--white);
  color: var(--navy);
}

.header:not(.is-stuck) .btn--ghost { color: rgba(255, 255, 255, 0.72); border-color: var(--hairline-dark); }
.header:not(.is-stuck) .btn--ghost:hover { color: var(--ink-invert); border-color: currentColor; }

@media (max-width: 560px) {
  :root { --header-h: 76px; }
  .header__logo { height: 28px; }
  .header__brand { gap: var(--s2); }
}

.nav { display: none; }

@media (min-width: 900px) {
  .nav { display: block; }
  .nav__list { display: flex; gap: var(--s6); }
}

.nav__link {
  position: relative;
  font-size: var(--t-sm);
  font-weight: 500;
  text-decoration: none;
  padding-block: var(--s2);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 250ms var(--ease-out-quart);
}

.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link.is-current::after { transform: scaleX(1); }

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

.langswitch {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: var(--s2) var(--s3);
  border: 1px solid currentColor;
  border-radius: var(--radius);
  opacity: 0.75;
  transition: opacity var(--dur-hover) var(--ease-out-quart);
}

.langswitch:hover { opacity: 1; }

.header__cta, .header__login { display: none; }

@media (min-width: 900px) {
  .header__cta { display: inline-flex; }
  .header__login { display: inline-flex; }
}

/* --- Burger + slide-in menu ---------------------------------------------- */

.burger {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 0;
  background: none;
  cursor: pointer;
}

@media (min-width: 900px) { .burger { display: none; } }

.burger__box { position: relative; display: block; width: 22px; height: 12px; }

.burger__bar,
.burger__bar::before,
.burger__bar::after {
  position: absolute;
  left: 0;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-ui) var(--ease-standard), opacity var(--dur-instant);
}

.burger__bar { top: 0; }
.burger__bar::before { content: ""; top: 5px; }
.burger__bar::after { content: ""; top: 10px; }

.burger[aria-expanded="true"] .burger__bar { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bar::before { opacity: 0; }
.burger[aria-expanded="true"] .burger__bar::after { transform: translateY(-10px) rotate(-90deg); }

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--navy);
  color: var(--ink-invert);
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-standard);
}

.menu[hidden] { display: none; }
.menu.is-open { opacity: 1; }

.menu__nav { width: 100%; padding: var(--gutter); max-width: 520px; }

.menu__list { counter-reset: m; display: grid; gap: var(--s5); }

.menu__list a {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 8vw, 2.75rem);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: var(--s4);
}

.menu__list a::before {
  counter-increment: m;
  content: "0" counter(m);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--cyan);
}

.menu__foot {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
}

.menu__lang { font-size: var(--t-sm); text-decoration: none; color: var(--cyan); }

body.is-locked { overflow: hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  min-height: min(88vh, 860px);
  margin-top: calc(var(--header-h) * -1);
  padding-top: var(--header-h);
  display: flex;
  align-items: flex-end;
  background: var(--navy-800);
  color: var(--ink-invert);
  overflow: clip;
}

.hero__media { position: absolute; inset: 0; }

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}

/* Two scrims. The vertical one guarantees the headline band never exceeds
   0.18 relative luminance; the 60deg one carries the brand gradient's
   direction into the photograph so the field feels lit, not filtered. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 21, 39, 0.94) 0%, rgba(6, 21, 39, 0.82) 38%, rgba(6, 21, 39, 0.42) 72%, rgba(6, 21, 39, 0.34) 100%),
    linear-gradient(60deg, rgba(8, 28, 52, 0.75) 0%, rgba(28, 117, 188, 0.16) 70%, rgba(0, 174, 239, 0.1) 100%);
}

.hero__inner {
  position: relative;
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding: var(--s9) var(--gutter) var(--s8);
}

.hero__title {
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -0.015em;
  max-width: 16ch;
}

/* M1 hero-lines: each line masked, inner span rising into place. */
.hero__line { display: block; overflow: hidden; }

.hero__line > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--dur-hero) var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 70ms + 80ms);
}

.js .hero.is-ready .hero__line > span,
html:not(.js) .hero__line > span { transform: none; }

.hero__standfirst {
  margin-top: var(--s6);
  max-width: 46ch;
  font-size: var(--t-lead);
  color: rgba(255, 255, 255, 0.86);
}

.hero__audience {
  margin-top: var(--s4);
  max-width: 52ch;
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline-dark);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}

.hero__actions { margin-top: var(--s7); display: flex; flex-wrap: wrap; gap: var(--s4); }

.hero__foot {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-dark);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, 0.6);
}

.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__scroll svg { animation: nudge 2.6s var(--ease-standard) infinite; }

@keyframes nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scroll svg { animation: none; }
}

/* ==========================================================================
   Who — the firm's own description, set as one large serif statement
   ========================================================================== */

.who__grid { display: grid; gap: var(--s8); }

@media (min-width: 900px) {
  .who__grid { grid-template-columns: 1.35fr 1fr; gap: var(--s9); align-items: start; }
}

.who__statement {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  line-height: 1.28;
  letter-spacing: -0.01em;
  margin-top: var(--s5);
}

.who__body {
  margin-top: var(--s6);
  max-width: var(--w-text);
  /* Stops "after-tax" splitting across lines at its own hyphen. */
  hyphens: none;
}

.who__facts { display: grid; gap: var(--s5); }

.who__fact {
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-light);
}

.who__fact dt {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.who__fact dd {
  margin: var(--s2) 0 0;
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  line-height: 1.2;
}

/* ==========================================================================
   Line-art marks

   These were the icons on the three "Why Altervest" cards. The cards are gone —
   they read as a slide deck — and the marks moved onto the photographic band,
   where the colour is overridden to the on-navy cyan. This is all that is left
   of that block; the .pillars grid and .pillar card rules were deleted rather
   than left behind as styles nothing selects.
   ========================================================================== */

.pillar__icon { color: var(--cyan-ui); }

/* ==========================================================================
   Why choose our firm — three numbered reasons beside a photograph
   ========================================================================== */

.band { display: grid; gap: var(--s7); align-items: center; }
.band + .band { margin-top: var(--s9); }

@media (min-width: 960px) {
  .band { grid-template-columns: 1fr minmax(300px, 40%); gap: var(--s9); }
  .band--wide { grid-template-columns: 1fr minmax(320px, 48%); }

  /* Swap the sides on alternate bands. Ordering rather than re-ordering the
     markup keeps the reading order correct for a screen reader. */
  .band--flip { grid-template-columns: minmax(320px, 48%) 1fr; }
  .band--flip .band__media { order: -1; }
}

.band__text { display: grid; gap: var(--s7); }

.reason {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-light);
}

.reason__num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  line-height: 1.9;
  color: var(--blue-ink);
}

.reason__tag { font-size: var(--t-h3); }
.reason__text { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-muted); }

/* Regulatory qualifier: set as typography, not as small-print mush. */
.reason__note {
  margin-top: var(--s4);
  padding-left: var(--s4);
  border-left: 2px solid var(--cyan-ui);
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--ink-muted);
  max-width: 58ch;
}

.band__media { margin: 0; }

.band__media picture,
.band__media img { width: 100%; border-radius: var(--radius); }

/* --- M13 image-build ------------------------------------------------------
   The photograph builds upward into its frame while the image inside settles
   out of a slight over-scale. Two things make it read as construction rather
   than as a slide: the wipe travels bottom-to-top, and the scale lands ~200ms
   after the wipe finishes, so the picture arrives and then comes to rest.

   That is the point. The brief was images that say stability — stone and steel
   rather than a Jenga tower — and an entrance that assembles and settles says
   the same thing the subjects do. It is also the reason the frame never moves:
   nothing on this page should look like it could still fall over.
   -------------------------------------------------------------------------- */

.js .band__media picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  clip-path: inset(0 0 100% 0);
  transition: clip-path var(--dur-build) var(--ease-out-expo);
}

.js .band__media img {
  transform: scale(1.08);
  transform-origin: center 60%;
  transition: transform calc(var(--dur-build) + 320ms) var(--ease-out-expo);
}

.js .band__media.is-in picture { clip-path: inset(0 0 0 0); }
.js .band__media.is-in img { transform: scale(1); }

/* These figures are still .reveal so the one IntersectionObserver keeps driving
   them, but the build IS their entrance — stacking a fade and a rise on top
   would be three things happening to one photograph at once. */
.js .band__media.reveal { opacity: 1; transform: none; }

/* The caption follows the image up rather than arriving with it. */
.js .band__media .caption {
  opacity: 0;
  transition: opacity var(--dur-reveal) var(--ease-out-quart) 480ms;
}

.js .band__media.is-in .caption { opacity: 1; }

/* Stacked, a portrait crop would run over a full screen on its own; the tall
   frame is only worth it once the image sits beside the text. */
.band__media img { aspect-ratio: 3 / 2; object-fit: cover; }

@media (min-width: 960px) {
  .band__media img { aspect-ratio: 4 / 5; }
  .band__media--wide img { aspect-ratio: 3 / 2; }
}

/* ==========================================================================
   Platform — the two mechanisms, plus the diagram
   ========================================================================== */

.platform__panels { display: grid; gap: var(--s6); margin-bottom: var(--s8); }

@media (min-width: 800px) { .platform__panels { grid-template-columns: 1fr 1fr; gap: var(--s7); } }

.panel { padding-top: var(--s5); border-top: 1px solid var(--hairline-dark); }
.panel h3 { margin-bottom: var(--s5); }
.panel ul { display: grid; gap: var(--s4); }

.panel li {
  position: relative;
  padding-left: var(--s6);
  font-size: var(--t-sm);
  color: var(--ink-invert-muted);
}

.panel li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 14px; height: 1px;
  background: var(--cyan);
}

.panel__note {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline-dark);
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--ink-invert-muted);
}

/* --- Diagram (M5 path-draw) ---------------------------------------------- */

.diagram { margin: 0; }
.diagram__caption {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: var(--s5);
}

.diagram__svg { width: 100%; height: auto; overflow: visible; }

.dg-dot {
  fill: rgba(255, 255, 255, 0.28);
  opacity: 0;
  transition: opacity 420ms var(--ease-out-quart);
  transition-delay: calc(var(--i, 0) * 12ms);
}

.dg-dot--pass { fill: var(--cyan); }
.is-in .dg-dot { opacity: 1; }

.dg-wall, .dg-rail {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  transition: stroke-dashoffset var(--dur-draw) var(--ease-out-expo);
}

.is-in .dg-wall, .is-in .dg-rail { stroke-dashoffset: 0; }

.dg-gate {
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 1;
  stroke-dasharray: 3 5;
  opacity: 0;
  transition: opacity var(--dur-ui) var(--ease-out-quart) 400ms;
}

.is-in .dg-gate { opacity: 1; }

.dg-ring__base { fill: none; stroke: rgba(255, 255, 255, 0.24); stroke-width: 10; }

.dg-ring__alt {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 10;
  stroke-linecap: butt;
  transform: rotate(-90deg);
  /* 2πr ≈ 414.7 at r=66. A 108° alternatives sleeve = 124.4 of arc. */
  stroke-dasharray: 124.4 290.3;
  stroke-dashoffset: 124.4;
  transition: stroke-dashoffset var(--dur-draw) var(--ease-out-expo) 500ms;
}

.is-in .dg-ring__alt { stroke-dashoffset: 0; }

.diagram__legend { display: grid; gap: var(--s5); margin-top: var(--s7); }

@media (min-width: 760px) {
  .diagram__legend { grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
}

.diagram__step { padding-top: var(--s4); border-top: 1px solid var(--hairline-dark); }

.diagram__num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}

.diagram__step h3 { font-size: var(--t-h4); font-family: var(--font-sans); font-weight: 600; margin-top: var(--s3); }
.diagram__step p { margin-top: var(--s2); font-size: var(--t-micro); font-family: var(--font-sans); color: var(--ink-invert-muted); line-height: 1.5; }

/* ==========================================================================
   Exempt market services — full-bleed photographic band

   The Laurentians photograph sits behind the type rather than beside it, the
   way the old site used it. Two details keep that legible: the scrim is a
   vertical gradient so the ridgeline survives instead of flattening to grey,
   and the darkest part of it sits under the heading rather than spread evenly.
   ========================================================================== */

.imageband {
  position: relative;
  overflow: clip;
  background: var(--navy);
  color: var(--ink-invert);
  isolation: isolate;
}

.imageband__media { position: absolute; inset: 0; z-index: -2; }

.imageband__media picture,
.imageband__media img { width: 100%; height: 100%; }
.imageband__media img { object-fit: cover; object-position: center 42%; }

.imageband__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(6, 21, 39, 0.76) 0%, rgba(6, 21, 39, 0.48) 46%, rgba(6, 21, 39, 0.7) 100%),
    linear-gradient(60deg, rgba(8, 28, 52, 0.55) 0%, rgba(11, 37, 69, 0.2) 70%, rgba(0, 174, 239, 0.08) 100%);
}

.imageband__inner { position: relative; }
.imageband__head { max-width: var(--w-text); }

/* --- Split variant: heading in its own column, points listed beside it ------
   The pillars used to be three bordered cards in a row, which read as a slide.
   Removing the boxes is most of the fix; holding the heading in a narrow column
   is the rest, because it turns three equal panels into one list to read down.
   -------------------------------------------------------------------------- */

.imageband__scrim--split {
  /* Pale sky over ice — a brighter picture than the Laurentians, so it takes a
     heavier hand. Measured in scripts/check-scrims.py. */
  background:
    linear-gradient(to bottom, rgba(6, 21, 39, 0.78) 0%, rgba(6, 21, 39, 0.58) 50%, rgba(6, 21, 39, 0.76) 100%),
    linear-gradient(60deg, rgba(8, 28, 52, 0.6) 0%, rgba(11, 37, 69, 0.24) 70%, rgba(0, 174, 239, 0.08) 100%);
}

.whyband { display: grid; gap: var(--s7); }

@media (min-width: 960px) {
  .whyband { grid-template-columns: minmax(260px, 32%) 1fr; gap: var(--s9); align-items: start; }
}

.whyband__head h2 { margin-top: var(--s5); }
.whyband__head .lead { margin-top: var(--s5); color: var(--ink-invert-muted); }

.whyband__points { display: grid; gap: var(--s6); }

.wpoint {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s5);
  align-items: start;
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-dark);
}

.wpoint .pillar__icon { color: var(--cyan); }
.wpoint__tag { font-size: var(--t-h3); }
.wpoint__text { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-invert-muted); }

/* Two classes, because `.imageband .caption` below zeroes the caption margin.
   That rule is for the caption tucked under the exempt-market note, and without
   the extra specificity here it also flattened this credit onto the last line of
   the pillar list beside it. */
.imageband .caption.imageband__credit { margin-top: var(--s8); text-align: right; }
.imageband__head h2 { margin-top: var(--s5); }
.imageband__head .lead { margin-top: var(--s5); color: var(--ink-invert-muted); }

.services {
  display: grid;
  gap: var(--s5);
  margin-top: var(--s8);
}

@media (min-width: 700px) { .services { grid-template-columns: repeat(2, 1fr); gap: var(--s6); } }
@media (min-width: 1000px) { .services { grid-template-columns: repeat(4, 1fr); } }

.service {
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-dark);
  display: grid;
  gap: var(--s3);
}

.service__num { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--cyan); }

.service__name {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  line-height: 1.2;
}

.imageband__foot {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-dark);
  display: grid;
  gap: var(--s4);
}

@media (min-width: 800px) {
  .imageband__foot { grid-template-columns: 1fr auto; align-items: baseline; gap: var(--s7); }
}

.imageband__note {
  font-size: var(--t-micro);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
  max-width: 68ch;
}

.imageband .caption { margin-top: 0; color: rgba(255, 255, 255, 0.62); }

.caption {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-muted);
}

/* ==========================================================================
   Team
   ========================================================================== */

.team__grid { display: grid; gap: var(--s6); }

@media (min-width: 620px) { .team__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .team__grid { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } }

/* A two-person team. Four columns would leave half the row empty, and shrinking
   the portraits to fill it would make the firm look smaller than it is. */
.team__grid--pair { gap: var(--s7); }

@media (min-width: 760px) {
  .team__grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  .team__grid--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }
}

.member__media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  /* Matches the studio grey the portraits sit on, so nothing flashes while
     an image decodes. */
  background: #9b9b9b;
}

.member__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  /* M12 portrait-warm. The portraits are already framed to a common head size
     and eye line at build time, so all this has to do is lift the grade. */
  filter: grayscale(1) contrast(1.04);
  transition: filter var(--dur-ui) var(--ease-out-quart);
}

@media (hover: hover) {
  .member:hover .member__media img,
  .member:focus-within .member__media img { filter: grayscale(0) contrast(1); }
}

.member__name { margin-top: var(--s5); font-size: var(--t-h3); }

.member__link {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 250ms ease-in-out;
}

.member__link:hover,
.member__link:focus-visible { background-size: 100% 1px; }

.member__cred {
  margin-top: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--blue-ink);
}

.member__role { margin-top: var(--s3); font-size: var(--t-sm); color: var(--ink-muted); }

/* --- Team page: full biographies ----------------------------------------- */

.bio { padding-block: var(--s8); border-top: 1px solid var(--hairline-light); }
.bio:first-of-type { border-top: 0; }

.bio__grid { display: grid; gap: var(--s6); }

@media (min-width: 860px) {
  .bio__grid { grid-template-columns: 320px 1fr; gap: var(--s8); align-items: start; }
}

@media (min-width: 1100px) { .bio__grid { grid-template-columns: 420px 1fr; gap: var(--s9); } }

/* Two biographies on the page, so they get a rule between them rather than
   running together. */
.bio + .bio { margin-top: var(--s8); }

.bio__media { border-radius: var(--radius); overflow: hidden; background: #9b9b9b; }
.bio__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.bio__name { font-size: var(--t-h1); }

.bio__cred {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-ink);
}

.bio__role { margin-top: var(--s4); font-size: var(--t-lead); color: var(--ink); }
.bio__text { margin-top: var(--s6); max-width: var(--w-text); }
.bio__text p + p { margin-top: var(--s5); }
.bio__text p { color: var(--ink-muted); }

/* ==========================================================================
   Providers
   ========================================================================== */

.providers {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: center;
}

.provider {
  display: grid;
  place-items: center;
  padding: var(--s6) var(--s5);
  background: var(--white);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius);
  min-height: 116px;
  transition: border-color var(--dur-hover) var(--ease-out-quart);
}

/* Providers that link fill their whole tile, so the target is the card and
   not just the logo inside it. */
.provider__link {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
}

.provider img {
  /* Square marks are exported taller than wordmarks (see process-images.py),
     so the cap here is on the box, not on every logo's own height. */
  max-height: 56px;
  max-width: 82%;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.66;
  transition: filter var(--dur-ui) var(--ease-out-quart), opacity var(--dur-ui) var(--ease-out-quart);
}

@media (hover: hover) {
  .provider:hover { border-color: var(--cyan-ui); }
  .provider:hover img { filter: grayscale(0); opacity: 1; }
}

/* ==========================================================================
   Legal (privacy policy and terms)

   Long-form clauses, set narrow. The measure is the whole design here: a legal
   page nobody can read is a legal page nobody reads.
   ========================================================================== */

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

.legal__head { margin-bottom: var(--s8); }

.legal__updated {
  margin-top: var(--s4);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.02em;
  color: var(--ink-muted);
}

.legal__section { margin-top: var(--s8); }

.legal__heading {
  font-size: var(--t-h3);
  margin-bottom: var(--s5);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--hairline-light);
}

.legal__p { margin-top: var(--s4); }
.legal__p strong { color: var(--ink); }

.legal__note {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--hairline-light);
  font-size: var(--t-micro);
  color: var(--ink-muted);
}

/* ==========================================================================
   Page hero with a photograph (contact)
   ========================================================================== */

.pagehero {
  position: relative;
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + var(--s9)) 0 var(--s9);
  background: var(--navy-800);
  color: var(--ink-invert);
  overflow: clip;
}

.pagehero__media { position: absolute; inset: 0; }
.pagehero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }

.pagehero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 21, 39, 0.95) 0%, rgba(6, 21, 39, 0.86) 45%, rgba(6, 21, 39, 0.62) 100%),
    linear-gradient(60deg, rgba(8, 28, 52, 0.7) 0%, rgba(28, 117, 188, 0.14) 70%, rgba(0, 174, 239, 0.08) 100%);
}

.pagehero__inner { position: relative; }
.pagehero__inner h1 { margin-top: var(--s5); max-width: 18ch; }
.pagehero__inner .lead { margin-top: var(--s5); color: rgba(255, 255, 255, 0.78); max-width: 46ch; }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact__grid { display: grid; gap: var(--s8); }

@media (min-width: 900px) { .contact__grid { grid-template-columns: 1fr 1.2fr; gap: var(--s9); align-items: start; } }

.contact__address {
  margin-top: var(--s5);
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  line-height: 1.45;
}

.contact__record { display: grid; margin-top: var(--s7); }

.record {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: var(--s4);
  padding-block: var(--s4);
  border-top: 1px solid var(--hairline-light);
  align-items: baseline;
}

.record:last-child { border-bottom: 1px solid var(--hairline-light); }

.record__key {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.record__value { margin: 0; font-size: var(--t-sm); }

.contact__privacy { margin-top: var(--s7); max-width: 46ch; }

.contact__privacyHeading {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: var(--s3);
}

.contact__privacy p { font-size: var(--t-micro); line-height: 1.65; color: var(--ink-muted); }

/* The form gets a card so it reads as the primary action on the page without
   needing a louder colour to say so. */
.formcard {
  padding: var(--s7);
  background: var(--bone);
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius);
}

.formcard__lead { margin-top: var(--s3); }

.field-row { display: grid; gap: var(--s5); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }

.form { display: grid; gap: var(--s5); margin-top: var(--s6); }
.field { display: grid; gap: var(--s2); }

.field label {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.field input,
.field textarea {
  font: inherit;
  font-size: var(--t-sm);
  color: var(--ink);
  padding: var(--s4);
  background: var(--white);
  width: 100%;
  border: 1px solid var(--hairline-light);
  border-radius: var(--radius);
  transition: border-color var(--dur-hover) var(--ease-out-quart);
}

.field input:hover,
.field textarea:hover { border-color: var(--cyan-ui); }

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

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

.form__note { font-size: var(--t-micro); color: var(--ink-muted); }
.form__actions { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }

.newsletter { margin-top: var(--s8); }
.newsletter__lead { margin-top: var(--s5); font-size: var(--t-lead); color: var(--ink-muted); }
.newsletter__action { margin-top: var(--s5); }

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

.footer {
  background: var(--navy-900);
  color: var(--ink-invert);
  padding-block: var(--s9) var(--s6);
}

.footer__cta,
.footer__grid,
.footer__legal {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* The review-build banner only. Kept out of the container list above: adding a
   rule inside that selector list once orphaned .footer__legal and let the CTA
   and the footer grid run full-bleed in monospace cyan. */
.footer__preview {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.footer__cta {
  display: grid;
  gap: var(--s6);
  padding-bottom: var(--s8);
  border-bottom: 1px solid var(--hairline-dark);
}

@media (min-width: 800px) {
  .footer__cta { grid-template-columns: 1fr auto; align-items: end; gap: var(--s8); }
}

.footer__ctaActions { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* On a dark ground the ghost button's default muted ink disappears. */
.footer .btn--ghost { color: rgba(255, 255, 255, 0.78); border-color: var(--hairline-dark); }
.footer .btn--ghost:hover,
.footer .btn--ghost:focus-visible { color: var(--white); border-color: currentColor; }

.footer__ctaText {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink-invert);
}

.footer__ctaText em { font-style: italic; color: var(--cyan); }

.footer__grid { display: grid; gap: var(--s7); padding-block: var(--s8); }

@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s6); } }

.footer__logo { height: 30px; --logo-from: #ffffff; --logo-to: #7fd4f5; }
.footer__tag { display: block; margin-top: var(--s3); color: rgba(255, 255, 255, 0.6); }
.footer__address { margin-top: var(--s5); font-size: var(--t-sm); color: var(--ink-invert-muted); }

.footer__heading {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--s4);
}

.footer__col ul { display: grid; gap: var(--s3); }
.footer__col a { font-size: var(--t-sm); }

/* The language you are already reading is a state, not a destination. */
.footer__current { font-size: var(--t-sm); color: var(--ink-invert-muted); }

.footer__preview {
  margin-top: var(--s3);
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--cyan);
}

.footer__legal {
  padding-top: var(--s6);
  border-top: 1px solid var(--hairline-dark);
  font-size: var(--t-micro);
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s3) var(--s6);
}

.footer__regulatory {
  margin-bottom: var(--s5);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--hairline-dark);
  font-size: var(--t-micro);
  line-height: 1.6;
  color: var(--ink-invert-muted);
}

.footer__regulatory p + p { margin-top: var(--s3); }

.footer__credit a { color: rgba(255, 255, 255, 0.72); text-decoration: none; }
.footer__credit a:hover,
.footer__credit a:focus-visible { color: var(--cyan); }

/* ==========================================================================
   Page heroes (team, contact)
   ========================================================================== */

.pagehead {
  background: var(--navy);
  color: var(--ink-invert);
  margin-top: calc(var(--header-h) * -1);
  padding: calc(var(--header-h) + var(--s8)) 0 var(--s8);
}



.pagehead h1 { margin-top: var(--s5); max-width: 18ch; }
.pagehead .lead { margin-top: var(--s5); color: var(--ink-invert-muted); max-width: var(--w-text); }

/* ==========================================================================
   Layer 2 of reduced motion: the safety net. Anything that animates by any
   route other than a token lands here.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .js .band__media picture { clip-path: none; }
  .js .band__media img { transform: none; }
  .js .band__media .caption { opacity: 1; }
  .dg-wall, .dg-rail { stroke-dashoffset: 0; }
  .dg-dot { opacity: 1; }
  .dg-ring__alt { stroke-dashoffset: 0; }
  .eyebrow-rule { transform: scaleX(1); }
  .hero__line > span { transform: none; }
}

/* ==========================================================================
   Print — this audience prints the team page and hands it to their accountant.
   ========================================================================== */

@media print {
  :root { --ink: #000; --ink-muted: #333; }

  .header, .menu, .burger, .skip-link, .hero__actions,
  .hero__foot, .footer__cta, .diagram__svg { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.5; }

  .section, .pagehead { padding-block: 12pt; background: #fff !important; color: #000 !important; }
  .section--navy *, .pagehead * { color: #000 !important; }
  .hero { min-height: auto; color: #000; }
  .hero__media, .hero__scrim { display: none; }

  .bio, .member { break-inside: avoid; page-break-inside: avoid; }
  .js .reveal { opacity: 1 !important; transform: none !important; }

  /* Resolve links to footnotes, skipping in-page anchors. */
  a[href^="http"]::after,
  a[href^="mailto"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}