/* ===========================================================================
   ArieGuard — Final build
   Structural editorial grid (labelled rails, hairline cell-grids) layered on a
   kinetic dark-luxe motion system. Dark near-black + warm off-white + one
   dialled-down crimson. Fraunces serif display + Hanken Grotesk grotesque.

   Content is fully visible WITHOUT JavaScript. All motion is progressive
   enhancement gated behind the .is-enhanced class added by script.js, animates
   transform/opacity only, and stands down entirely under prefers-reduced-motion.
   =========================================================================== */

/* ===========================================================================
   Self-hosted variable fonts (latin subset). Same-origin so there is no
   third-party DNS/TLS round trip blocking first paint, and no Google Fonts
   CDN dependency (which also keeps the site clean under EU privacy rules).
   Variable axes are preserved, including Fraunces' opsz used by the ampersand.
   =========================================================================== */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url(assets/fonts/fraunces-italic-300-400.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: 'Fraunces';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url(assets/fonts/fraunces-normal-300-500.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: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-normal-300-600.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;
}

/* ---------- Design tokens ---------- */
:root {
  /* palette */
  --bg:           #0B0C0F;   /* near-black base */
  --bg-2:         #0E1014;   /* raised surface */
  --bg-3:         #14161C;   /* card surface */
  --ink:          #ECEAE3;   /* warm off-white text */
  --ink-soft:     #B7B5AD;   /* secondary text */
  --ink-mute:     #807E77;   /* tertiary / meta */
  --ink-faint:    #4C4B47;   /* faintest */
  --ink-bright:   #FCFBF7;   /* warm near-white for hover/active peaks (never pure #fff) */
  --hair:         rgba(236, 234, 227, 0.11);
  --hair-soft:    rgba(236, 234, 227, 0.06);
  --hair-strong:  rgba(236, 234, 227, 0.20);
  --crimson:      #BE4456;   /* dialled-down corporate crimson — rules, dots, bars */
  /* Same crimson, lifted just enough to clear WCAG AA (4.5:1) on --bg for small
     text. #BE4456 measures 3.87:1, which fails for labels and kickers. */
  --crimson-text: #CE5D70;
  --crimson-lo:   #93343F;
  --crimson-soft: rgba(190, 68, 86, 0.12);
  --crimson-glow: rgba(190, 68, 86, 0.45);

  /* type */
  --serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Hanken Grotesk", "Helvetica Neue", Helvetica, sans-serif;

  /* layout */
  --shell-max: 1280px;
  --gut: clamp(20px, 5vw, 64px);
  --rail-w: 210px;
  --section-y: clamp(60px, 11vh, 140px);

  /* motion */
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur:      0.6s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 0.55vw + 0.85rem, 17px);
  line-height: 1.62;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  overflow-x: hidden;      /* fallback for browsers without overflow: clip */
  overflow-x: clip;        /* no horizontal scroll, keeps the sticky nav working */
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: var(--crimson); color: var(--ink-bright); }

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

/* Themed slim scrollbar. macOS overlay scrollbars ignore this; Windows/Linux
   and always-shown scrollbars get a quiet hairline thumb, not the OS default. */
html { scrollbar-width: thin; scrollbar-color: var(--hair-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--hair-strong);
  border: 3px solid var(--bg);
  border-radius: 999px;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); background-clip: padding-box; }

/* Honour a high-contrast preference: firm up hairlines and secondary text */
@media (prefers-contrast: more) {
  :root {
    --hair: rgba(236, 234, 227, 0.24);
    --hair-soft: rgba(236, 234, 227, 0.15);
    --hair-strong: rgba(236, 234, 227, 0.34);
    --ink-soft: #CFCDC5;
    --ink-mute: #A6A49B;
  }
}

.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-left: max(var(--gut), env(safe-area-inset-left));
  padding-right: max(var(--gut), env(safe-area-inset-right));
}

.skip-link {
  position: fixed; left: 16px; top: 16px;
  z-index: 200;
  background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: 4px;
  font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em;
  transform: translateY(calc(-100% - 32px));
  transition: transform 0.25s var(--ease);
}
.skip-link:focus { transform: translateY(0); }

main, .nav, .foot { position: relative; z-index: 1; }

/* =========================================================================
   Atmosphere — slow aurora + grain (GPU-cheap)
   ========================================================================= */
.atmosphere {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
  background: radial-gradient(125% 90% at 50% -12%, #14161d 0%, var(--bg) 56%);
}
.atmosphere__aurora {
  position: absolute; inset: -25%;
  /* Softness is baked into the gradient falloff instead of a blur() filter:
     blurring a viewport-sized animated layer costs real GPU time every frame
     and the visual result here is indistinguishable. */
  background:
    radial-gradient(38% 44% at 16% 8%,  rgba(190, 68, 86, 0.16), rgba(190, 68, 86, 0.05) 38%, transparent 66%),
    radial-gradient(40% 46% at 86% 4%,  rgba(58, 70, 104, 0.18), rgba(58, 70, 104, 0.06) 40%, transparent 68%),
    radial-gradient(46% 50% at 60% 96%, rgba(190, 68, 86, 0.08), transparent 68%);
  will-change: transform;
}
.is-enhanced .atmosphere__aurora { animation: aurora 34s ease-in-out infinite alternate; }
@keyframes aurora {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.02) rotate(-1deg); }
  50%  { transform: translate3d(2%, 2%, 0)   scale(1.08) rotate(1.5deg); }
  100% { transform: translate3d(-1%, 1%, 0)  scale(1.03) rotate(-0.5deg); }
}
.atmosphere__grain {
  /* inset:0 (not -50%): the grain never moves, so a viewport-sized tile is
     enough — the oversized layer was 4x the pixels for no visual gain.
     mix-blend-mode removed: blending a fixed full-screen layer forces the
     whole page beneath it to re-composite on every scroll frame. */
  position: absolute; inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* =========================================================================
   Scroll progress hairline
   ========================================================================= */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 150; pointer-events: none;
  background: var(--hair-soft);
}
.progress__bar {
  display: block; height: 100%; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--crimson-lo), var(--crimson));
  will-change: transform;
}

/* =========================================================================
   Shared type primitives
   ========================================================================= */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.85em;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
}
.eyebrow__line {
  width: 2.4em; height: 1px; flex: none;
  background: var(--crimson);
  transform-origin: 0 50%;
}
.eyebrow__est { color: var(--ink-soft); letter-spacing: 0.16em; }

.display {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.018em;
}
.section__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.95rem, 4.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.018em;
  max-width: 20ch;
}
.section__intro {
  margin-top: clamp(20px, 3vh, 34px);
  font-size: clamp(1.02rem, 1.4vw, 1.22rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 54ch;
}
.accent-word {
  color: inherit;
  font-style: inherit;
  font-weight: inherit;
}
.prose { color: var(--ink-soft); line-height: 1.62; }
/* Keep hyphenated brand phrases (e.g. Cross-Border) from breaking at the hyphen */
.nb { white-space: nowrap; }

/* Typographic finish — balance display headings (no lonely last-line words),
   tidy body rag (pretty kills orphans). Progressive; ignored where unsupported. */
.section__title, .firm__statement, .contact__title, .bizline__title,
.step__title, .principle__title, .geo__name, .section__rail-note,
.why__head { text-wrap: balance; }
.hero__lede, .section__intro, .prose, .bizline__desc, .step__desc,
.principle__desc, .geo__copy, .foot__copy { text-wrap: pretty; }

/* =========================================================================
   Navigation (scrollspy-highlighted links)
   ========================================================================= */
.nav {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid transparent;
  /* backdrop-filter is deliberately NOT transitioned: animating it re-samples
     the backdrop every frame of the transition, which is felt on scroll. */
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.nav.is-scrolled {
  /* Solid, not translucent. A see-through bar let the skyline and the big stat
     numerals bleed through as they scrolled underneath, which read as a
     misaligned, smeared strip. Opaque also removes the backdrop-filter, which
     was re-sampling the page behind it on every scroll frame. */
  background: var(--bg);
  border-bottom-color: var(--hair);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 74px;
}
/* padding grows the tap target to >=44px; the nav bar's fixed height absorbs it */
.wordmark { display: inline-flex; align-items: center; gap: 0.65em; padding-block: 6px; }
.wordmark__text {
  font-family: var(--serif); font-weight: 500;
  font-size: 1.32rem; letter-spacing: 0.005em;
}
/* Two-colour wordmark: "Arie" off-white, "Guard" crimson — the brand's
   белая ария + малиновая гард, applied to every on-page wordmark. */
.wm-a { color: var(--ink); transition: color 0.3s var(--ease); }
.wm-g { color: var(--crimson); transition: color 0.3s var(--ease); }
.wordmark:hover .wm-a { color: var(--ink-bright); }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.nav__links a {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 7px;
  font-size: 0.84rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink-soft);
  padding: 6px 0;
  transition: color 0.25s var(--ease);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--crimson);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.4s var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
/* Squared, not a pill. Every other surface on this site is sharp-cornered
   (cards, hairline grids, rails), so a 999px pill was the one foreign shape,
   and the pulsing "live" dot beside it is a product-launch device, not an
   advisory one. Set in the same uppercase, letterspaced key as the section
   kickers so it reads as part of the system. */
.nav__cta {
  display: inline-flex; align-items: center;
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--hair-strong);
  padding: 11px 20px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__cta:hover {
  border-color: var(--crimson);
  background: var(--crimson-soft);
  color: var(--ink-bright);
}
.nav__actions { display: inline-flex; align-items: center; gap: 10px; }
.nav__toggle { display: none; background: none; border: 0; padding: 8px; color: var(--ink); cursor: pointer; }
.nav__toggle svg { display: block; width: 24px; height: 24px; }
/* The in-menu Contact link only exists for the mobile dropdown. */
@media (min-width: 861px) { .nav__links .nav__link-contact { display: none; } }

/* Mobile nav: hamburger dropdown (pattern shared with the Gardiner build,
   restyled to ArieGuard's dark-luxe language). Animates opacity/transform
   only; with JS off the single-page sections remain reachable by scrolling. */
@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: fixed; inset: 74px 0 auto 0; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--hair);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
    padding: 6px var(--gut) 18px;
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s linear 0.2s;
  }
  .nav__links.is-open {
    transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0s;
  }
  .nav__links a {
    display: flex; align-items: baseline; width: 100%;
    padding: 14px 0; font-size: 0.95rem;
    border-bottom: 1px solid var(--hair-soft);
  }
  .nav__links a::after { content: none; }
  .nav__links a:last-child { border-bottom: 0; }
}
@media (max-width: 480px) {
  /* Keep the 320px header from overflowing: the dropdown carries Contact. */
  .nav__cta { display: none; }
}

/* =========================================================================
   Hero
   ========================================================================= */
/* no border-bottom: the following section's border-top already draws that rule,
   and having both painted a 2px divider where every other one is 1px */
.hero { position: relative; }
.hero__inner {
  padding-top: clamp(56px, 13vh, 150px);
  padding-bottom: clamp(40px, 8vh, 88px);
}
.hero__eyebrow { margin-bottom: clamp(26px, 5vh, 52px); }
.hero__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.8rem, 9vw, 7rem);
  line-height: 0.97;
  letter-spacing: -0.025em;
  max-width: 15ch;
}
/* overflow:hidden powers the line-lift reveal, so the box must extend far
   enough below the baseline to clear descenders (the "y" in Advisory). The
   negative margin cancels the extra space so the line rhythm is unchanged. */
.hero__line { display: block; overflow: hidden; padding-bottom: 0.26em; margin-bottom: -0.21em; }
.hero__lift { display: inline-block; }
.hero__accent { color: var(--ink); }
.hero__accent .hero__period { color: var(--crimson); }
.hero__foot {
  margin-top: clamp(38px, 7vh, 76px);
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  border-top: 1px solid var(--hair-soft);
  padding-top: clamp(26px, 4vh, 46px);
}
.hero__lede {
  font-size: clamp(1.05rem, 0.7vw + 0.95rem, 1.32rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}
.hero__actions {
  display: flex; flex-direction: column; gap: 16px;
  align-items: flex-start;
}
@media (max-width: 760px) {
  .hero__foot { grid-template-columns: 1fr; align-items: start; gap: 28px; }
}

/* link-arrow with underline draw */
.link-arrow {
  position: relative;
  display: inline-flex; flex-direction: column; gap: 8px;
  min-width: 220px;
  font-size: 0.98rem; font-weight: 500; letter-spacing: 0.01em;
  color: var(--ink);
}
.link-arrow--muted { color: var(--ink-soft); }
.link-arrow__label { display: inline-flex; align-items: center; gap: 0.55em; }
.link-arrow__label::after {
  content: "\2192"; font-size: 1.05em; color: var(--crimson);
  transition: transform 0.4s var(--ease-out);
}
.link-arrow__line {
  height: 1px; width: 100%;
  background: var(--hair);
  position: relative; overflow: hidden;
}
.link-arrow__line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--crimson);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-out);
}
.link-arrow:hover .link-arrow__label::after { transform: translateX(5px); }
.link-arrow:hover .link-arrow__line::after { transform: scaleX(1); }

/* =========================================================================
   Stat band — animated count-up
   ========================================================================= */
.statband { border-top: 1px solid var(--hair); }
.statband__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.stat {
  position: relative;
  display: flex; flex-direction: column; gap: 0.6rem;
  padding: clamp(30px, 5.5vh, 60px) clamp(16px, 2vw, 36px) clamp(30px, 5.5vh, 60px) 0;
  border-right: 1px solid var(--hair-soft);
}
/* symmetric gutter so the 2nd stat doesn't sit hard against the divider */
.stat + .stat { padding-left: clamp(16px, 2vw, 36px); }
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 4.6vw, 3.7rem);
  line-height: 1; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.stat__label {
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 820px) {
  .stat { padding-right: clamp(16px, 4vw, 36px); }
}
@media (max-width: 440px) {
  .statband__grid { grid-template-columns: 1fr; }
  .stat, .stat + .stat { border-right: 0; border-bottom: 1px solid var(--hair-soft); padding-right: 0; padding-left: 0; }
  .stat:last-child { border-bottom: 0; }
}

/* =========================================================================
   Section structure — editorial grid with a sticky labelled rail
   ========================================================================= */
.section {
  border-top: 1px solid var(--hair);
  padding-block: var(--section-y);
}
.section__grid {
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  gap: clamp(28px, 5vw, 80px);
}
.section__rail { display: flex; flex-direction: column; gap: 14px; }
/* Numbers removed: the crimson kicker is now the rail's anchor, marked with a
   short rule so the editorial structure survives without the numeral. */
.section__kicker {
  position: relative;
  padding-top: 17px;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--crimson-text);
}
.section__kicker::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 24px; height: 2px; background: var(--crimson);
}
.section__rail-note {
  font-family: var(--serif); font-style: italic;
  font-size: 1.02rem; color: var(--ink-soft);
  line-height: 1.3; max-width: 22ch;
}
@media (min-width: 1000px) {
  .section__rail { position: sticky; top: 110px; align-self: start; }
}
/* Collapse the rail exactly where it stops being sticky (1000px). Between 861
   and 999px a 210px non-sticky rail plus the gap squeezed the body column. */
@media (max-width: 999px) {
  .section__grid { grid-template-columns: 1fr; gap: 24px; }
  .section__rail { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; }
  .section__rail-note { flex-basis: 100%; max-width: none; }
}

/* ---------- 01 Firm ---------- */
.firm__statement {
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  line-height: 1.12;
  max-width: 22ch;
  color: var(--ink);
}
.firm__cols {
  margin-top: clamp(34px, 5vh, 60px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  padding-top: clamp(30px, 4vh, 48px);
  border-top: 1px solid var(--hair);
}
.firm__cols p { font-size: 1rem; }
.firm__pillars {
  margin-top: clamp(34px, 6vh, 60px);
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.firm__pillars li {
  padding: 22px 18px 22px 0;
  border-right: 1px solid var(--hair-soft);
  display: flex; flex-direction: column; gap: 7px;
}
/* symmetric gutters: without this the 2nd/3rd cells butt against the hairline */
.firm__pillars li + li { padding-left: 18px; }
.firm__pillars li:last-child { border-right: 0; }
.firm__pillar-k { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.firm__pillar-v { font-family: var(--serif); font-size: 1.02rem; color: var(--ink); }
@media (max-width: 760px) {
  .firm__cols { grid-template-columns: 1fr; }
}
/* Three pillars never divide into two columns without leaving a dead half-cell,
   so go single-column rather than orphan the last one. */
@media (max-width: 620px) {
  .firm__pillars { grid-template-columns: 1fr; }
  .firm__pillars li,
  .firm__pillars li + li { padding-right: 0; padding-left: 0; border-right: 0; border-bottom: 1px solid var(--hair-soft); }
  .firm__pillars li:last-child { border-bottom: 0; }
}

/* =========================================================================
   Marquee — sector ticker
   ========================================================================= */
.marquee-sec {
  border-top: 1px solid var(--hair);
  padding-block: clamp(38px, 6vh, 76px);
  overflow: hidden;
}
.marquee-sec__caption {
  font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: clamp(22px, 3vh, 38px);
}
/* Inline-block rule instead of a flex child so the caption's "&" isn't gapped */
.marquee-sec__caption::before {
  content: ""; display: inline-block; vertical-align: middle;
  width: 2.4em; height: 1px; margin-right: 0.85em;
  background: var(--crimson);
}
.marquee {
  display: flex; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex; align-items: center; flex: none;
  gap: clamp(20px, 3vw, 44px);
  padding-right: clamp(20px, 3vw, 44px);
  white-space: nowrap;
}
.is-enhanced .marquee__track { animation: marquee 48s linear infinite; will-change: transform; }
.marquee:hover .marquee__track,
.marquee.is-paused .marquee__track { animation-play-state: paused; }
/* Drop the compositor layer entirely while parked off-screen */
.marquee.is-paused .marquee__track { will-change: auto; }
.marquee__track span:not(.marquee__sep) {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.marquee__sep { color: var(--crimson); font-size: clamp(1.2rem, 2.4vw, 1.8rem); }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-100%,0,0); } }
@media (prefers-reduced-motion: reduce) {
  .marquee { flex-wrap: wrap; gap: 14px 26px; -webkit-mask-image: none; mask-image: none; }
  /* flex:none would keep the track at max-content width, so it would overflow the
     clipped section and hide the last sectors. Constrain it so wrapping works. */
  .marquee__track { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; padding-right: 0; }
  .marquee__track[aria-hidden="true"] { display: none; }
}

/* =========================================================================
   02 Practice — two business lines (hairline cell-grid)
   ========================================================================= */
.lines {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--hair);
  border: 1px solid var(--hair);
}
.bizline {
  position: relative;
  background: var(--bg);
  padding: clamp(28px, 3.5vw, 48px);
  display: flex; flex-direction: column; gap: 22px;
  overflow: hidden;
  transition: background 0.4s var(--ease);
}
.bizline::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--crimson);
  transform: scaleY(0); transform-origin: 0 0;
  transition: transform 0.55s var(--ease-out);
}
.bizline:hover { background: var(--bg-2); }
.bizline:hover::before { transform: scaleY(1); }
.bizline__head { display: flex; flex-direction: column; gap: 14px; }
.bizline__tag {
  font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--crimson-text);
}
.bizline__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 2.05rem);
  line-height: 1.1; letter-spacing: -0.015em;
  /* Reserve two lines so both cards' descriptions align, even though
     "Cross-border M&A advisory" is one line and the B title wraps to two. */
  min-height: 2.2em;
}
.bizline__desc { color: var(--ink-soft); line-height: 1.6; max-width: 44ch; }
.bizline__caps { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.bizline__caps li {
  position: relative;
  padding: 0 0 12px 17px;
  border-bottom: 1px solid var(--hair-soft);
  font-size: 0.96rem;
}
.bizline__caps li:last-child { border-bottom: 0; padding-bottom: 0; }
.bizline__caps em { color: var(--ink-mute); font-style: normal; }
/* Bullet is positioned, not a flex sibling, so the inline "&" stays tight
   against its letters (fixes the M & A / Control & minority spread). */
.cap__bull {
  position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--crimson);
}
@media (max-width: 760px) { .lines { grid-template-columns: 1fr; } .bizline__title { min-height: 0; } }

/* =========================================================================
   03 Approach — principles (hairline cell-grid)
   ========================================================================= */
.principles {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--hair);
  border: 1px solid var(--hair);
}
.principle {
  position: relative;
  background: var(--bg);
  padding: clamp(26px, 3vw, 44px);
  display: flex; flex-direction: column; gap: 14px;
  transition: background 0.4s var(--ease);
}
.principle::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--crimson);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.55s var(--ease-out);
}
.principle:hover { background: var(--bg-2); }
.principle:hover::after { transform: scaleX(1); }
.principle__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.3rem, 2vw, 1.7rem);
  letter-spacing: -0.012em;
  color: var(--crimson-text);
}
.principle__desc { color: var(--ink-soft); line-height: 1.55; font-size: 0.96rem; }
@media (max-width: 620px) { .principles { grid-template-columns: 1fr; } }

/* =========================================================================
   04 Process — stepper with line-draw spine
   ========================================================================= */
.stepper {
  position: relative;
  margin-top: clamp(40px, 6vh, 72px);
  display: grid; gap: 0;
  padding-left: 2.6rem;
}
.stepper__spine {
  position: absolute; left: 0.55rem; top: 0.6rem; bottom: 0.6rem;
  width: 1px; background: var(--hair); overflow: hidden;
}
.stepper__spine-fill {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--crimson), var(--crimson-lo));
  transform: scaleY(0); transform-origin: 50% 0;
  will-change: transform;
}
.is-enhanced .stepper__spine-fill { transition: transform 0.12s linear; }
.step {
  position: relative;
  padding: clamp(20px, 3.2vh, 34px) 0 clamp(20px, 3.2vh, 34px) 1.4rem;
  border-bottom: 1px solid var(--hair-soft);
}
.step:first-child { padding-top: 0; }
.step:last-child { border-bottom: 0; padding-bottom: 0; }
.step__node {
  position: absolute; left: calc(-2.6rem + 0.55rem - 4px);
  top: clamp(20px, 3.2vh, 34px);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--ink-mute);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.step:first-child .step__node { top: 0.2rem; }
.step.is-active .step__node {
  border-color: var(--crimson); background: var(--crimson);
  box-shadow: 0 0 0 4px var(--crimson-soft);
}
.step__num {
  display: block;
  font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--crimson-text); font-weight: 600;
  margin-bottom: 0.7em;
}
.step__title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.25rem, 2.1vw, 1.7rem);
  line-height: 1.14; letter-spacing: -0.014em;
}
.step__desc { margin-top: 0.6em; color: var(--ink-soft); line-height: 1.55; max-width: 56ch; }

.why {
  margin-top: clamp(34px, 5vh, 56px);
  padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--hair);
}
.why__head {
  font-family: var(--serif); font-style: italic;
  font-size: 1.3rem; color: var(--ink);
  margin-bottom: 1.4em;
}
.why__grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px clamp(28px, 4vw, 56px);
}
.why__grid li {
  display: flex; gap: 14px; align-items: baseline;
  color: var(--ink-soft); font-size: 1rem;
}
.why__dash { flex: none; width: 22px; height: 1px; background: var(--crimson); transform: translateY(-5px); }
@media (max-width: 700px) { .why__grid { grid-template-columns: 1fr; } }

/* =========================================================================
   05 Coverage — global framing (hairline cell-grid)
   ========================================================================= */
.geo {
  margin-top: clamp(40px, 6vh, 72px);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--hair);
  border: 1px solid var(--hair);
}
.geo__region {
  position: relative;
  background: var(--bg);
  padding: clamp(28px, 3vw, 46px);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 240px;
  transition: background 0.45s var(--ease);
}
.geo__region:hover { background: var(--bg-2); }
.geo__name {
  position: relative;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  padding-top: 20px;
  /* Reserve two lines so the copy aligns across all three columns even when a
     name wraps (e.g. "North America" vs one-line "Europe"/"Middle East"). */
  min-height: calc(20px + 2.24em);
}
.geo__copy { color: var(--ink-soft); line-height: 1.62; }
@media (max-width: 760px) {
  .geo { grid-template-columns: 1fr; }
  .geo__region { min-height: 0; }
  .geo__name { min-height: 0; }
}

/* =========================================================================
   06 Contact — single mailto
   ========================================================================= */
.contact__body { display: flex; flex-direction: column; align-items: flex-start; }
.contact__title {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.2rem, 6vw, 4.2rem);
  line-height: 1.04; letter-spacing: -0.02em;
}
.contact__mail {
  position: relative;
  display: inline-flex; flex-direction: column; gap: 6px;
  margin-top: clamp(30px, 5vh, 52px);
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3.4vw, 2.3rem);
  color: var(--ink);
}
.contact__mail-line {
  display: block; height: 1px; width: 100%;
  background: var(--hair-strong);
  position: relative; overflow: hidden;
}
.contact__mail-line::after {
  content: ""; position: absolute; inset: 0;
  background: var(--crimson);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.55s var(--ease-out);
}
.contact__mail:hover { color: var(--ink-bright); }
.contact__mail:hover .contact__mail-line::after { transform: scaleX(1); }
.contact__geo {
  margin-top: clamp(26px, 4vh, 40px);
  font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* =========================================================================
   Footer
   ========================================================================= */
.foot {
  border-top: 1px solid var(--hair);
  padding-block: clamp(36px, 6vh, 64px);
}
.foot__inner {
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px 40px; align-items: start;
}
.foot__brand { display: flex; flex-direction: column; gap: 6px; }
/* negative margin cancels the padding, so the hit area grows without moving anything */
.foot__mark {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 500;
  display: inline-block; padding-block: 5px; margin-block: -5px;
}
.foot__tag {
  font-family: var(--serif); font-style: italic;
  font-size: 0.86rem; color: var(--ink-mute); letter-spacing: 0.04em;
}
.foot__nav { display: flex; gap: 22px; font-size: 0.86rem; }
.foot__nav a { position: relative; color: var(--ink-soft); padding-bottom: 3px; transition: color 0.25s var(--ease); }
.foot__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--crimson); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.35s var(--ease-out);
}
.foot__nav a:hover { color: var(--ink); }
.foot__nav a:hover::after { transform: scaleX(1); }
.foot__copy {
  grid-column: 1 / -1;
  color: var(--ink-mute); font-size: 0.8rem;
  border-top: 1px solid var(--hair-soft); padding-top: 22px;
  max-width: 60ch;
}
@media (max-width: 700px) {
  .foot__inner { grid-template-columns: 1fr; }
  .foot__nav { flex-wrap: wrap; }
}

/* =========================================================================
   Reveal motion (progressive enhancement)
   Without JS / under reduced-motion everything is fully visible.
   ========================================================================= */
.is-enhanced [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
/* Promote only elements still waiting to reveal; drop the layer once revealed */
.is-enhanced [data-reveal]:not(.is-in) { will-change: opacity, transform; }
.is-enhanced [data-reveal].is-in { opacity: 1; transform: none; }

/* eyebrow line draw */
.is-enhanced .eyebrow__line { transform: scaleX(0.001); transition: transform 0.9s var(--ease) 0.15s; }
.is-enhanced .hero.is-loaded .hero__eyebrow .eyebrow__line { transform: scaleX(1); }

/* Hero orchestrated load reveal */
.is-enhanced [data-hero] { opacity: 0; }
.is-enhanced .hero__lift { transform: translateY(140%); }
.is-enhanced .hero__eyebrow,
.is-enhanced .hero__lede,
.is-enhanced .hero__actions { transform: translateY(20px); }

.is-enhanced .hero.is-loaded [data-hero] {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.9s var(--ease), transform 1s var(--ease);
}
.is-enhanced .hero.is-loaded .hero__lift {
  transform: translateY(0);
  transition: transform 1.1s var(--ease-out);
}
.is-enhanced .hero.is-loaded [data-hero="1"] { transition-delay: 0.05s; }
.is-enhanced .hero.is-loaded [data-hero="2"] .hero__lift { transition-delay: 0.18s; }
.is-enhanced .hero.is-loaded [data-hero="3"] .hero__lift { transition-delay: 0.30s; }
.is-enhanced .hero.is-loaded [data-hero="4"] { transition-delay: 0.50s; }
.is-enhanced .hero.is-loaded [data-hero="5"] { transition-delay: 0.62s; }

/* =========================================================================
   Reduced motion — kill all motion, keep everything visible & static
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .is-enhanced [data-reveal],
  .is-enhanced [data-hero],
  .is-enhanced .hero__lift {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .is-enhanced .eyebrow__line { transform: scaleX(1) !important; transition: none !important; }
  .is-enhanced .atmosphere__aurora,
  .is-enhanced .marquee__track { animation: none !important; }
  .stepper__spine-fill { transform: scaleY(1) !important; transition: none !important; }
  .progress { display: none; }
  .bizline, .principle { transition: none; }
}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 560px) {
  .hero__title { font-size: clamp(2.5rem, 12vw, 3.6rem); }
  .foot__inner { gap: 18px 40px; }
}

/* ============================================================
   IMAGERY — finance-grade skyline media (redesign pass)
   Decorative, dark, behind content. Scrims protect legibility.
   No people, no identifiable locale. Reduced-motion safe.
   ============================================================ */

/* --- Hero skyline --- */
.hero__inner, .statband { position: relative; z-index: 1; }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 72% 82%;
  opacity: 0.74;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(177deg, var(--bg) 2%, rgba(11,12,15,0.44) 42%, rgba(11,12,15,0.16) 72%, var(--bg) 100%),
    linear-gradient(94deg, var(--bg) 2%, rgba(11,12,15,0.44) 38%, rgba(11,12,15,0) 80%);
}
@media (max-width: 760px) {
  .hero__media img { opacity: 0.56; object-position: 62% 72%; }
  .hero__media::after {
    background: linear-gradient(180deg, var(--bg) 6%, rgba(11,12,15,0.50) 54%, var(--bg) 100%);
  }
}

/* --- Cinematic statement band --- */
.band {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: clamp(340px, 54vh, 540px);
  border-top: 1px solid var(--hair); /* bottom rule comes from the next section */
}
.band__media { position: absolute; inset: 0; z-index: 0; }
.band__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  opacity: 0.80;
}
.band::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(135% 120% at 12% 50%, rgba(11,12,15,0.90), rgba(11,12,15,0.36) 58%, rgba(11,12,15,0.68)),
    linear-gradient(90deg, rgba(11,12,15,0.94), rgba(11,12,15,0.04) 72%);
}
.band__inner { position: relative; z-index: 2; padding-block: clamp(52px, 9vh, 104px); }
.band__eyebrow {
  font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--crimson-text); font-weight: 600; margin-bottom: 1.15rem;
}
.band__quote {
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.7rem, 3.8vw, 3.1rem); line-height: 1.14; letter-spacing: -0.02em;
  color: var(--ink); max-width: 19ch; text-wrap: balance;
}
.band__quote .band__accent { color: var(--crimson); font-style: italic; }
@media (min-width: 900px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .band__media img { transform: scale(1.06); transition: transform 1.6s var(--ease-out); }
  .band:hover .band__media img { transform: scale(1.12); }
}

/* --- Coverage faint backdrop --- */
.section--global { position: relative; overflow: hidden; }
.section--global > .shell { position: relative; z-index: 1; }
.section__media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.section__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 64%; opacity: 0.34;
}
.section__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg), rgba(11,12,15,0.52) 48%, var(--bg));
}

/* ===========================================================================
   Refinements pass — de-templated symbols, cleaner email glyph, footer credit
   =========================================================================== */

/* Email "@" — neutral grotesque glyph, a touch smaller, tight to the letters */
.contact__mail .at {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 400;
  color: inherit;
  font-size: 0.84em;
  padding: 0 0.04em;
  vertical-align: 0.02em;
}

/* Coverage regions — a quiet crimson rule that extends on hover */
.geo__name::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 26px; height: 2px; background: var(--crimson);
  transform-origin: 0 50%;
  transition: transform 0.5s var(--ease-out);
}
.geo__region:hover .geo__name::before { transform: scaleX(1.7); }


/* ===========================================================================
   Cleaner ampersand — replace the ornate Fraunces "&" glyph site-wide with a
   simple grotesque ampersand. Keeps "M&A" etc. but drops the calligraphic look.
   =========================================================================== */
/* One font throughout: the ampersand takes the family, weight and style of
   whatever sets it, so it never reads as a foreign glyph inside a headline.
   Only the tracking is neutralised so display letter-spacing can't crush it. */
.amp {
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: 0;
  /* Pin the optical size to the text end of the axis. At display opsz Fraunces
     serves a swashy ampersand; at opsz 9 it is the calm, classic one. Weight
     still inherits (font-weight is not overridden here), and the sans has no
     opsz axis so this is inert wherever the ampersand is set in Hanken. */
  font-variation-settings: "opsz" 9;
}

/* ===========================================================================
   MOBILE REFINEMENTS — full small-screen pass
   Touch ergonomics, safe-area, overflow guards and type tuning so the page
   reads and taps perfectly from 320px up. Additive and motion-safe: nothing
   here alters the desktop layout above its breakpoint.
   =========================================================================== */

/* Anchored sections clear the sticky header when jumped to */
.hero, .section, .band, .marquee-sec { scroll-margin-top: clamp(78px, 9vh, 96px); }

/* Thumb-sized hit area on the menu button (>=44px), kept optically flush */
.nav__toggle { padding: 11px; margin-right: -11px; }

@media (max-width: 860px) {
  /* Dropdown never taller than the screen; momentum-scrolls if it is; clears the notch */
  .nav__links {
    max-height: calc(100vh - 74px);
    max-height: calc(100dvh - 74px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-left: max(var(--gut), env(safe-area-inset-left));
    padding-right: max(var(--gut), env(safe-area-inset-right));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  /* Freeze the page behind the open menu */
  body.nav-open { overflow: hidden; }
}

/* Phones — tighten vertical rhythm and rule out any horizontal overflow */
@media (max-width: 600px) {
  :root { --section-y: clamp(50px, 8vh, 96px); }

  /* Lift the hero into view: the sticky header already claims 74px, so the
     desktop top padding left ~90px of dead space above the headline on a short
     phone. Tighter padding + eyebrow gap brings the value prop above the fold. */
  .hero__inner { padding-top: clamp(34px, 6vh, 80px); }

  /* A long email can never push the layout wide; it wraps only if it must */
  .contact__mail-text { overflow-wrap: break-word; }

  /* Tighter eyebrow gap lifts the headline; wraps gracefully on the narrowest phones */
  .hero__eyebrow { margin-bottom: clamp(22px, 4vh, 40px); flex-wrap: wrap; row-gap: 6px; }

  /* Comfortable measure + generous, thumb-friendly tap targets */
  .section__intro { max-width: 100%; }
  .hero__actions .link-arrow { padding-block: 6px; }
  .foot__nav { gap: 4px 22px; }
  .foot__nav a { padding-block: 11px; }
  .contact__mail { padding-block: 4px; }
}

/* Touch devices get comfortable hit areas at ANY width: a 1024px tablet is
   still a finger, not a mouse, and width alone never told us that. Scoped to
   coarse pointers so the approved desktop spacing is untouched. */
@media (pointer: coarse) {
  .nav__links a { padding-block: 12px; }
  .nav__cta { padding-block: 12px; }
  .foot__nav a { padding-block: 11px; }
  .hero__actions .link-arrow { padding-block: 8px; }
  .contact__mail { padding-block: 8px; }
}

/* Narrow phones (<=380px) — genuinely step the display type DOWN. The vw-based
   preferred values here must stay below what the base clamps already resolve to
   at this width, or the "guard" silently scales type up instead of down. */
@media (max-width: 380px) {
  .hero__title { font-size: clamp(2.15rem, 11vw, 2.6rem); }
  .contact__mail { font-size: clamp(1.1rem, 5.2vw, 1.35rem); }
  .marquee__track span:not(.marquee__sep) { font-size: clamp(1.2rem, 5.6vw, 1.45rem); }
}