/* ALPS marketing site: recreation of acadialps.com
   Design tokens follow the ALPS Design System.
   ALPS Blue #2299CE is a punctuation color, Deep Navy #103758 anchors dark areas. */

:root {
  --alps-blue: #2299ce;
  --alps-blue-dark: #1a7cab;
  --alps-hero: #2da4f2; /* ALPS hero blue: the header portal button */
  --alps-hero-dark: #1f8fda;
  --navy: #103758;
  --navy-deep: #0c2942;
  --ink: #1d2b36;
  --muted: #5b6b76;
  --line: #d7dee3;
  --bg: #ffffff;
  --bg-soft: #f5f8fa;
  --bg-tint: #eef4f8;
  --radius: 4px;
  --shadow-lift: 0 10px 30px rgba(16, 55, 88, 0.12);
  --wrap: 1180px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --font: "Montserrat", Helvetica, Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; display: block; }
a { color: var(--alps-blue); text-decoration: none; transition: color 150ms var(--ease); }
a:hover { color: var(--alps-blue-dark); }

h1, h2, h3, h4 {
  font-family: var(--font);
  color: var(--navy);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 0.62em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section-soft { background: var(--bg-soft); }
.section-tint { background: var(--bg-tint); }
/* Signature ALPS band: the animated 146deg blue -> navy gradient the original
   uses on the "Global Executive Network" section. */
.section-gradient {
  position: relative; z-index: 2;
  color: #fff;
  background: linear-gradient(146deg, #2ea3f2 0%, #2299ce 45%, #103758 100%);
  background-size: 220% 220%;
  animation: alps-gradient 14s ease infinite;
  box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3);
}
.section-gradient .eyebrow { color: #d6f0fb; }
.section-gradient h2 { color: #fff; }
.section-gradient p { color: rgba(255, 255, 255, 0.9); }
.section-gradient .split-media img { border-color: rgba(255, 255, 255, 0.25); }
@keyframes alps-gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) { .section-gradient { animation: none; } }
.narrow { max-width: 820px; margin-left: auto; margin-right: auto; }
.center { text-align: center; }

.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--alps-blue);
  margin: 0 0 14px;
}
.lead { font-size: 1.2rem; color: var(--muted); }

/* Accent used inline for the blue punctuation words */
.accent { color: var(--alps-blue); }

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 13px 28px;
  border-radius: var(--radius);
  border: 1.5px solid var(--alps-blue);
  background: var(--alps-blue);
  color: #fff;
  cursor: pointer;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.btn:hover { background: var(--alps-blue-dark); border-color: var(--alps-blue-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--alps-blue); }
.btn-ghost:hover { background: var(--alps-blue); color: #fff; }
.btn-light { background: #fff; border-color: #fff; color: var(--navy); }
.btn-light:hover { background: var(--bg-tint); border-color: var(--bg-tint); color: var(--navy); }
.btn-lg { padding: 16px 38px; font-size: 1.02rem; }

/* ---------- Header ----------
   Matches acadialps.com: a plain white bar, the full-color wordmark set at
   128px wide on the left, and the portal call to action as a blue pill on the
   right. The live header carries no navigation, so the section links are kept
   here (the rebuild has more pages to reach) in the same quiet weight. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  box-shadow: 0 1px 0 rgba(16, 55, 88, 0.08);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding-top: 14px; padding-bottom: 14px;
}
.nav-cta .btn {
  font-weight: 600; border-radius: 999px; padding: 13px 30px;
  background: var(--alps-hero); border-color: var(--alps-hero);
}
.nav-cta .btn:hover {
  transform: translateY(-1px);
  background: var(--alps-hero-dark); border-color: var(--alps-hero-dark);
}
.nav-logo img { width: 128px; height: auto; display: block; } /* full-color ALPS wordmark */
.nav-links { display: flex; align-items: center; gap: 34px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  color: var(--navy);
  font-weight: 500;
  font-size: 0.95rem;
  position: relative;
}
.nav-links a:hover { color: var(--alps-blue); }
.nav-links a.active { color: var(--alps-blue); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px;
  height: 2px; background: var(--alps-blue);
}
.nav-portal-item { display: none; } /* button covers this on desktop */
.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
  color: var(--navy);
}
.nav-toggle svg { width: 26px; height: 26px; }

/* Five primary links plus the portal button get tight before the mobile menu. */
@media (max-width: 1120px) {
  .nav-links { gap: 20px; }
  .nav-links a { font-size: 0.88rem; }
}

@media (max-width: 900px) {
  .nav { padding-top: 12px; padding-bottom: 12px; }
  .nav-logo img { width: 108px; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px;
    box-shadow: var(--shadow-lift);
    display: none;
  }
  .nav-links a.active::after { display: none; }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: inline-flex; }
  .nav-cta .btn { display: none; }
  .nav-portal-item { display: block; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 120px 0;
  background: var(--navy);
  color: #fff;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(12, 41, 66, 0.92) 0%, rgba(16, 55, 88, 0.7) 55%, rgba(34, 153, 206, 0.35) 100%);
}
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero p { color: rgba(255, 255, 255, 0.9); font-size: 1.25rem; max-width: 60ch; }
.hero .eyebrow { color: #8fd0ee; }
.hero-actions { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; }

/* Light hero variant used on home */
.hero-light {
  background: var(--bg-soft);
  color: var(--ink);
  padding: 84px 0 92px;
}
.hero-light::after { display: none; }
.hero-light h1 { color: var(--navy); }
.hero-light p { color: var(--muted); }
.hero-light .eyebrow { color: var(--alps-blue); }

/* Mountain hero: the company name and tagline over the snowy Alps panorama.
   No scrim, as on acadialps.com — the type carries its own legibility with the
   live site's navy glow (text-shadow: 0 0 0.3em #103758), which scales with the
   font size instead of dimming the photograph. */
.mountain-hero {
  position: relative;
  text-align: center;
  color: #fff;
  padding: 92px 0 100px;
  overflow: hidden;
  border-bottom: 3px solid var(--alps-blue);
}
/* The panorama sits on its own layer so it can slowly zoom (Ken Burns push-in)
   without scaling the type. */
.mountain-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("/assets/img/White-ALPS.webp");
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
  /* Continuous, gentle Ken Burns push-in: zooms in, drifts back out, forever,
     so the panorama is always subtly alive rather than freezing after one pass. */
  animation: hero-zoom 55s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) { .mountain-hero::before { animation: none; } }
.mountain-hero .wrap { position: relative; z-index: 1; }
.mountain-hero h1 {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Sized against the viewport so the name always holds one line. */
  white-space: nowrap;
  font-size: clamp(1.15rem, 4.1vw, 3.2rem);
  margin: 0 auto;
  /* The live site's single 0.3em navy glow, stacked so the type still holds
     against the brightest part of the sky. */
  text-shadow: 0 0 0.3em var(--navy), 0 0 0.3em var(--navy), 0 0 0.5em var(--navy);
}
/* Sized and tracked so the line spans the same width as the headline above,
   at every viewport: same clamp structure, letter-spacing in em. */
.mountain-hero .hero-tagline {
  margin: 14px auto 0;
  white-space: nowrap;
  font-size: clamp(0.71rem, 2.55vw, 1.99rem);
  letter-spacing: 0.136em;
  font-weight: 700;
  text-transform: uppercase;
  color: #c4dbea;
  text-shadow: 0 0 0.4em var(--navy), 0 0 0.3em var(--navy);
}

/* Two-column hero: styled intro sentence on the left, animated petals on the
   right, matching the original layout. */
.hero-head { max-width: 900px; margin: 0 auto 26px; }
.hero-split {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px; align-items: center;
}
.hero-explainer { min-width: 0; }
/* Sized so the sentence stands as tall as the explainer beside it. The .hero p
   qualifier outranks the generic .hero p size rule. */
.hero p.hero-lead {
  font-size: clamp(1.3rem, 2.5vw, 2.1rem);
  line-height: 1.6;
  font-weight: 500;
  color: var(--navy);
  margin: 0;
}
.hero-lead a { white-space: nowrap; }
/* Solutions / Advisors / Customers: bold navy words with an animated underline
   that grows on hover, echoing the original ".line" links. */
.glow-word {
  color: var(--navy);
  font-weight: 700;
  position: relative;
  border: 0;
}
.glow-word::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--alps-blue);
  transform: scaleX(0); transform-origin: left;
  transition: transform 200ms var(--ease);
}
.glow-word:hover { color: var(--alps-blue); }
.glow-word:hover::after { transform: scaleX(1); }
.hero-explainer { justify-self: center; width: 100%; }

@media (max-width: 900px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-intro { max-width: none; text-align: center; margin: 0 auto; }
}

/* ---------- Animated explainer (genuine Tumult Hype embed) ----------
   The original "ALPS Explainer" Hype document runs verbatim from assets/hype/,
   so the petals animate exactly as on acadialps.com. The Hype stage is a fixed
   600x429; .explainer-embed + the scaler in main.js fit it to narrow screens
   by transform-scaling the container to the available width. */
.explainer { width: 100%; max-width: 600px; margin: 0 auto; }
/* The Hype stage is a fixed 600x429. Take it out of flow and clip it so its
   fixed width never forces horizontal overflow on narrow screens; aspect-ratio
   reserves the (scaled) height and the JS scaler sets the transform. */
.explainer-embed {
  position: relative; width: 100%;
  aspect-ratio: 600 / 429;
  overflow: hidden;
}
#alpsexplainer_hype_container {
  position: absolute; top: 0; left: 0;
  transform-origin: top left;
  will-change: transform;
  background: transparent !important;
}
/* The Hype export bakes a white scene background; clear it so the flower blends
   into the hero instead of showing as a white rectangle. */
#alpsexplainer_hype_container > .HYPE_scene { background-color: transparent !important; }

/* ---------- Feature / EMN triad ---------- */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.triad .node {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; text-align: center;
  transition: box-shadow 150ms var(--ease), border-color 150ms var(--ease);
}
.triad .node:hover { box-shadow: var(--shadow-lift); border-color: #c3d0d8; }
.triad .node .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--alps-blue); font-weight: 700; margin-bottom: 8px; }
.triad .node h3 { color: var(--navy); margin-bottom: 6px; }
.triad .node p { color: var(--muted); font-size: 0.95rem; margin: 0; }

/* ---------- Split rows ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-lift); }
.split-body h2 { margin-bottom: 18px; }
.split-body p { color: var(--muted); }

/* Learn More: heading on the left, the three role buttons stacked on the
   right, each carrying its own subtext. */
.paths-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 56px; align-items: center;
}
.paths-intro h2 { margin: 0; }
.paths-stack { display: flex; flex-direction: column; gap: 18px; }
.path-btn {
  display: block; padding: 22px 28px;
  background: var(--navy); color: #fff; border-radius: var(--radius);
  transition: background 150ms var(--ease), box-shadow 150ms var(--ease), transform 150ms var(--ease);
}
.path-btn:hover { background: var(--alps-blue); box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.path-btn .path-role {
  display: block; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em;
}
.path-btn .path-sub {
  display: block; margin-top: 6px;
  color: rgba(255, 255, 255, 0.75); font-size: 0.95rem; line-height: 1.5;
}
.path-btn:hover .path-sub { color: rgba(255, 255, 255, 0.9); }

/* ---------- Global network section ----------
   A deep field for the canvas globe in globe.js to sit in: the ALPS gradient
   pulled down to night, with the blue kept for the atmosphere and the copy. */
.globe-section {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 120% at 78% 30%, rgba(34, 153, 206, 0.26) 0%, rgba(34, 153, 206, 0) 55%),
    linear-gradient(146deg, #14456b 0%, #103758 45%, #071a2b 100%);
}
.globe-section h2 { color: #fff; }
.globe-section p { color: rgba(255, 255, 255, 0.86); }
.globe-section .eyebrow { color: #8fd0ee; }
.globe-split { align-items: center; gap: 64px; }
.globe-stage {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.globe-stage canvas {
  display: block; width: 100%; height: 100%;
  cursor: grab;
  touch-action: pan-y; /* horizontal swipe steers the globe, vertical scrolls */
}
.globe-stage.is-dragging canvas { cursor: grabbing; }
/* Stands in until the canvas takes over (no JS, or no 2D context). */
.globe-fallback {
  position: absolute; inset: 0; margin: auto;
  width: 92%; opacity: 0.45;
}
.globe-stage[data-globe-ready] .globe-fallback { display: none; }

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 150ms var(--ease), transform 150ms var(--ease), border-color 150ms var(--ease);
}
.card:hover { box-shadow: var(--shadow-lift); border-color: #c3d0d8; }
.card-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-tint); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { color: var(--navy); font-size: 1.15rem; }
.card-body p { color: var(--muted); font-size: 0.94rem; flex: 1; }
.card-link { margin-top: 12px; font-weight: 600; font-size: 0.9rem; color: var(--alps-blue); }
.card-link::after { content: " \2192"; }

/* ---------- Feature grid (3 value props) ---------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.feature {
  padding: 30px 26px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
}
.feature .num {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-tint); color: var(--alps-blue); font-weight: 700; margin-bottom: 16px;
}
.feature h3 { color: var(--navy); font-size: 1.12rem; }
.feature p { color: var(--muted); font-size: 0.94rem; margin: 0; }

/* ---------- Testimonials ----------
   One quote at a time in a scroll-snap carousel: swipe or scroll the track,
   or use the arrows and dots that main.js wires up. */
.quote-carousel {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
}
.quote-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none; /* dots and arrows show position */
  border-radius: var(--radius);
}
.quote-track::-webkit-scrollbar { display: none; }
.quote-track:focus-visible { outline: 2px solid var(--alps-blue); outline-offset: 3px; }
.quote-slide {
  flex: 0 0 100%;
  min-width: 100%;
  scroll-snap-align: center;
  margin: 0;
  padding: 46px 56px 42px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}
.quote-slide + .quote-slide { margin-left: 24px; }
.quote-slide::before {
  content: "\201C"; font-size: 4.4rem; color: var(--alps-blue);
  line-height: 0.6; display: block; margin-bottom: 14px; opacity: 0.5;
}
.quote-slide p {
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ink);
  max-width: 58ch;
  margin: 0 auto 1.1em;
}
.quote-slide cite {
  display: block; font-style: normal; font-weight: 600; color: var(--navy);
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.quote-slide cite::before {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: var(--alps-blue); margin: 0 auto 14px;
}
.quote-arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--navy);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease), color 150ms var(--ease);
}
.quote-arrow:hover { color: var(--alps-blue); border-color: var(--alps-blue); box-shadow: var(--shadow-lift); }
.quote-dots {
  grid-column: 1 / -1;
  display: flex; justify-content: center; gap: 10px; margin-top: 24px;
}
.quote-dot {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  border: 0; background: #b9cdda; cursor: pointer;
  transition: background 150ms var(--ease), transform 150ms var(--ease);
}
.quote-dot:hover { background: var(--alps-blue-dark); }
.quote-dot[aria-current="true"] { background: var(--alps-blue); transform: scale(1.35); }

/* ---------- Callout band ---------- */
.band {
  background: var(--navy); color: #fff; text-align: center; padding: 80px 0;
}
.band h2 { color: #fff; }
.band p { color: rgba(255, 255, 255, 0.85); max-width: 60ch; margin-left: auto; margin-right: auto; }
.podcast-player { margin: 28px auto 0; max-width: 640px; }
.podcast-player iframe { display: block; width: 100%; }
/* Calendly scheduler framed in white so its light UI reads on the navy band */
.calendly-embed {
  max-width: 760px; margin: 34px auto 0;
  background: #fff; border-radius: 8px; overflow: hidden;
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, 0.5);
}
.consult-alt { margin: 20px auto 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); }
.consult-alt a { color: #8fd0ee; }

/* ---------- Article ---------- */
.article-hero {
  background: var(--navy); color: #fff; padding: 96px 0 84px; position: relative; overflow: hidden;
}
.article-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(12,41,66,0.9), rgba(16,55,88,0.6));
}
.article-hero .hero-bg { opacity: 0.4; }
/* An insight hero carrying a photograph: let the picture read, and weight the
   scrim to the left so the headline keeps its contrast while the subject, which
   sits right of the text, stays visible. */
.article-hero.has-hero-img .hero-bg { opacity: 0.9; }
.article-hero.has-hero-img::after {
  background: linear-gradient(100deg,
    rgba(8, 20, 32, 0.95) 0%, rgba(9, 24, 39, 0.88) 34%,
    rgba(11, 30, 48, 0.5) 66%, rgba(11, 30, 48, 0.22) 100%);
}
/* Narrow screens crop the picture and the copy runs full width, so the scrim
   turns vertical and the frame shifts off the text. */
@media (max-width: 720px) {
  .article-hero.has-hero-img .hero-bg { object-position: 32% center; opacity: 0.8; }
  .article-hero.has-hero-img::after {
    background: linear-gradient(172deg,
      rgba(8, 20, 32, 0.94) 0%, rgba(9, 24, 39, 0.9) 52%, rgba(11, 30, 48, 0.62) 100%);
  }
}
/* A cutout portrait (transparent background) can't fill a wide hero the way a
   photo does: cover would blow it up to a headless crop. Stand it whole
   against the hero's right edge instead, fully opaque and painted above the
   hero scrim (the text wrap still sits higher, at z-index 2). */
.hero-bg--portrait { object-fit: contain; object-position: right bottom; }
.article-hero .hero-bg--portrait { opacity: 1; z-index: 1; }
.article-hero .wrap { position: relative; z-index: 2; }
.article-hero .eyebrow { color: #8fd0ee; }
.article-hero h1 { color: #fff; max-width: 20ch; }
.article-hero .sub { color: rgba(255,255,255,0.9); font-size: 1.2rem; }
.prose { max-width: 808px; margin: 0 auto; padding: 0 24px; }
.prose p { font-size: 1.08rem; color: #2b3946; }
.prose h2 { margin-top: 2em; margin-bottom: 0.62em; }
.prose h3 { color: var(--navy); margin-top: 1.7em; margin-bottom: 0.55em; }
.prose blockquote {
  margin: 1.6em 0; padding: 8px 0 8px 26px; border-left: 3px solid var(--alps-blue);
  font-size: 1.18rem; font-weight: 500; color: var(--navy); line-height: 1.5;
}
.prose .pull {
  font-size: 1.3rem; font-weight: 600; color: var(--navy); text-align: center;
  margin: 1.8em 0;
}
.laws { list-style: none; padding: 0; margin: 2em 0; counter-reset: law; display: grid; gap: 14px; }
.laws li {
  display: flex; gap: 18px; align-items: baseline;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px;
}
.laws li::before {
  counter-increment: law; content: counter(law);
  font-weight: 700; color: var(--alps-blue); font-size: 1.4rem; min-width: 28px;
}
.laws .law-name { text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; font-weight: 700; color: var(--navy); display: block; margin-bottom: 4px; }
.laws .law-desc { color: var(--muted); font-size: 0.98rem; }

.sml-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 2em 0; }
.sml-step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 22px; text-align: center; }
.sml-step .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--alps-blue); font-weight: 700; }
.sml-step h3 { color: var(--navy); margin: 8px 0 6px; }
.sml-step p { color: var(--muted); font-size: 0.94rem; margin: 0; }

/* related articles */
.related { border-top: 1px solid var(--line); }

/* ---------- Footer ----------
   Big-four consulting register: a deep field under a thin brand-blue accent,
   a masthead row (wordmark + one-line statement), four hairline-separated
   link columns, an affiliations strip, and a small legal bar. Structure over
   ornament; hairlines carry the grid. */
.site-footer {
  background: var(--navy-deep);
  color: rgba(255,255,255,0.75);
  padding: 0 0 36px;
  border-top: 3px solid var(--alps-hero);
  font-size: 0.9rem;
}
.footer-masthead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
  padding: 56px 0 36px;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.footer-logo { height: 44px; width: auto; filter: brightness(0) invert(1); align-self: center; }
.footer-statement {
  margin: 0; max-width: 52ch;
  font-size: 0.98rem; color: rgba(255,255,255,0.66);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 48px;
  padding: 44px 0 48px;
}
.footer-col h4 {
  color: rgba(255,255,255,0.5); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 18px;
}
.footer-col a { display: block; color: rgba(255,255,255,0.78); font-size: 0.9rem; padding: 6px 0; }
.footer-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Affiliations: the marks sit on their own hairline-bounded strip. */
.footer-affiliations {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.footer-affiliations img { height: 22px; filter: brightness(0) invert(1); opacity: 0.8; }
.footer-affiliations a:hover img { opacity: 1; }
/* Colored partner mark: a white plaque keeps it legible on the navy.
   Declared after the invert rule so the filter does not white it out. */
.footer-badge { background: #fff; border-radius: var(--radius); padding: 7px 11px; display: inline-flex; }
.footer-affiliations .footer-badge img { height: 28px; width: auto; filter: none; opacity: 1; }
.footer-affiliations .footer-award img { height: 56px; filter: none; opacity: 1; }

.footer-legal {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.8rem; color: rgba(255,255,255,0.45);
}
.footer-legal-links { display: flex; gap: 26px; }
.footer-legal-links a { color: rgba(255,255,255,0.6); }
.footer-legal-links a:hover { color: #fff; }

/* ---------- Platform / advisor landing page ---------- */
.platform-hero {
  color: #fff; text-align: center;
  padding: 116px 0 104px;
  background: linear-gradient(146deg, #2ea3f2 0%, #2299ce 45%, #103758 100%);
  background-size: 220% 220%;
  animation: alps-gradient 16s ease infinite;
  border-bottom: 3px solid var(--alps-blue);
}
.platform-hero .eyebrow { color: #d6f0fb; }
.platform-hero h1 { color: #fff; max-width: 20ch; margin: 0 auto 22px; text-shadow: 0 2px 16px rgba(12, 41, 66, 0.35); }
.platform-hero .lead { color: rgba(255, 255, 255, 0.92); max-width: 62ch; margin: 0 auto; font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
.platform-hero .hero-actions { justify-content: center; margin-top: 34px; }
@media (prefers-reduced-motion: reduce) { .platform-hero { animation: none; } }

/* Compact value tiles (accelerators, outcomes) */
.mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 20px; }
.mini {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 26px 24px;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.mini:hover { border-color: #c3d0d8; box-shadow: var(--shadow-lift); }
.mini .accent-bar { width: 34px; height: 3px; background: var(--alps-blue); border-radius: 2px; margin-bottom: 16px; }
.mini h3 { font-size: 1.06rem; color: var(--navy); margin-bottom: 6px; }
.mini p { color: var(--muted); font-size: 0.9rem; margin: 0; }

/* Tags (Board priorities, markets): squared per the design system, not pills */
.tag-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.tag {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 17px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; font-size: 0.92rem; font-weight: 500; color: var(--navy);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.tag:hover { border-color: #c3d0d8; box-shadow: var(--shadow-lift); }
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--alps-blue); flex: none; }

/* Executive role badges */
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; }
.role {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 26px 18px; text-align: center;
}
.role .role-abbr { font-size: 1.55rem; font-weight: 700; color: var(--alps-blue); letter-spacing: 0.02em; }
.role .role-full { font-size: 0.8rem; color: var(--muted); margin-top: 8px; }

/* Industry grid */
.industry-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.industry {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 18px 20px; font-weight: 500; color: var(--navy); font-size: 0.95rem;
  display: flex; align-items: center; gap: 12px;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.industry:hover { border-color: #c3d0d8; box-shadow: var(--shadow-lift); }
.industry .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--alps-blue); flex: none; }

/* Contrast: conventional path vs the ALPS model */
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
.contrast-col { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 30px 28px; }
.contrast-col.is-alps { border-color: var(--alps-blue); box-shadow: var(--shadow-lift); }
.contrast-col .k { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--muted); }
.contrast-col.is-alps .k { color: var(--alps-blue); }
.contrast-col h3 { font-size: 1.15rem; color: var(--navy); margin: 8px 0 18px; }
.contrast-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.contrast-col li { padding-left: 24px; position: relative; color: var(--muted); font-size: 0.96rem; }
.contrast-col li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.contrast-col.is-alps li { color: var(--ink); }
.contrast-col.is-alps li::before { background: var(--alps-blue); }

.sub-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--muted); margin: 40px 0 16px; }

/* ---------- Advisor Insights (blog) ---------- */
/* Index list: text-forward rows, one per entry. */
.insight-list { display: grid; gap: 20px; }
.insight-item {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 32px;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.insight-item:hover { box-shadow: var(--shadow-lift); border-color: var(--alps-blue); }
.insight-item-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; color: var(--muted);
}
.insight-item-meta .topic { color: var(--alps-blue); font-weight: 700; }
.insight-item h3 { color: var(--navy); font-size: 1.32rem; margin-bottom: 10px; }
.insight-item p { color: var(--muted); font-size: 0.98rem; max-width: 78ch; }
.insight-item .card-link { display: inline-block; margin-top: 14px; }

/* Entry header meta line, sitting under the hero sub-headline. */
.insight-meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600;
}
.article-hero .insight-meta span { color: #8fd0ee; font-size: 11px; }

/* Every insight opens with this summary block, before the argument. */
/* Article layout: the argument on the left, the summary alongside it on the
   right. The summary is first in the source, so it is read first without CSS
   and by a screen reader; grid placement is what moves it to the second
   column. It sticks through the read, since the governing thought is worth
   keeping in view, and drops back above the prose below 1100px. */
.insight-layout {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: minmax(0, 760px) 320px;
  gap: 48px; justify-content: center; align-items: start;
}
.insight-layout .prose { grid-column: 1; grid-row: 1; max-width: none; margin: 0; padding: 0; }
.insight-layout .insight-summary {
  grid-column: 2; grid-row: 1;
  position: sticky; top: 100px; margin-bottom: 0; padding: 24px 26px;
  /* On a short viewport the pinned box would run past the fold, so it scrolls
     inside itself rather than losing its last bullet. */
  max-height: calc(100vh - 124px); overflow-y: auto;
}
.insight-layout .insight-summary p { font-size: 0.98rem; margin-bottom: 16px; }
.insight-layout .insight-summary li { font-size: 0.94rem; }

@media (max-width: 1100px) {
  .insight-layout { grid-template-columns: minmax(0, 760px); gap: 0; }
  .insight-layout .prose { grid-column: 1; grid-row: 2; }
  .insight-layout .insight-summary {
    grid-column: 1; grid-row: 1;
    position: static; margin-bottom: 44px; padding: 30px 32px;
  }
  .insight-layout .insight-summary p { font-size: 1.02rem; margin-bottom: 18px; }
  .insight-layout .insight-summary li { font-size: 1rem; }
}

.insight-summary {
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 32px; margin-bottom: 12px;
}
.insight-summary h2 {
  margin: 0 0 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--alps-blue); font-weight: 700;
}
.insight-summary p { font-size: 1.02rem; color: var(--ink); margin: 0 0 18px; }
.insight-summary ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.insight-summary li { position: relative; padding-left: 22px; color: var(--ink); font-size: 1rem; }
.insight-summary li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--alps-blue);
}

/* Situation / Complication / Resolution / Value Proposition headings. */
/* A section opens on the brand's accent bar rather than a full-width hairline.
   The 2px navy rule is spoken for by the ruled lists and the figure strip, and
   a short mark reads as the start of something where a line across the measure
   reads as the end of what came before. */
.scr { margin-top: 3.4em; padding-top: 0; border-top: 0; }
.scr::before {
  content: ""; display: block; width: 34px; height: 3px; border-radius: 2px;
  background: var(--alps-blue); margin-bottom: 22px;
}
.scr .scr-k {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700; color: var(--muted); margin-bottom: 8px;
}
.scr h2 { margin: 0 0 0.65em; }

/* Headline figures inside an insight. */
.stat-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0;
  margin: 2.4em 0; border-top: 2px solid var(--navy);
}
.stat {
  background: none; border: 0; border-left: 1px solid var(--line); border-radius: 0;
  padding: 22px 26px 0; text-align: left;
}
.stat:first-child { border-left: 0; padding-left: 0; }
.stat-num { font-size: 2rem; font-weight: 700; color: var(--navy); letter-spacing: -0.02em; line-height: 1.05; }
.stat-label { font-size: 0.85rem; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* Sequence chips (Discover -> Understand -> ...). */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2em 0; }
.flow-step {
  display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: 9px 18px; font-size: 0.85rem; font-weight: 600; color: var(--navy);
}
.flow-step:first-child { border-color: var(--alps-blue); color: var(--alps-blue); }
.flow-arrow { color: var(--muted); font-size: 0.9rem; }

.prose ul.checks { list-style: none; padding: 0; margin: 1.6em 0; display: grid; gap: 12px; }
.prose ul.checks li { position: relative; padding-left: 26px; font-size: 1.04rem; color: #2b3946; }
.prose ul.checks li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 2px; background: var(--alps-blue);
}
.prose .sources { font-size: 0.86rem; color: var(--muted); margin-top: 2.4em; padding-top: 1.4em; border-top: 1px solid var(--line); }

/* Lead-capture CTA that closes an insight: a contained, rounded card rather
   than a full-bleed band. The gradient and rounded corners live on the inner
   wrap so the section keeps whitespace around the card. */
.lead-cta { padding: 60px 20px; }
.lead-cta .wrap {
  background: linear-gradient(120deg, var(--navy-deep) 0%, var(--navy) 60%, #16527f 100%);
  color: #fff; border-radius: 14px;
  max-width: 640px; padding: 48px 40px;
  box-shadow: 0 24px 60px -24px rgba(16, 55, 88, 0.5);
}
.lead-cta .eyebrow { color: #8fd0ee; }
.lead-cta h2 { color: #fff; }
.lead-cta .lead { color: rgba(255, 255, 255, 0.85); max-width: 46ch; margin: 0 auto; }
.lead-form { margin: 26px auto 0; max-width: 440px; }
.lead-fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
.lead-form input[type="email"], .lead-form input[type="text"] {
  width: 100%; padding: 14px 16px; border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.1);
  color: #fff; font-family: var(--font); font-size: 0.98rem;
}
.lead-form input::placeholder { color: rgba(255, 255, 255, 0.55); }
.lead-form input:focus { outline: 2px solid var(--alps-blue); outline-offset: 1px; }
.lead-form .btn { margin-top: 16px; width: 100%; }
.lead-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead-note { min-height: 1.2em; margin-top: 16px; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }
.lead-note.is-ok { color: #8fd0ee; font-weight: 600; }
.lead-note.is-error { color: #ffd9a8; }
.lead-note a { color: #fff; text-decoration: underline; }
.lead-fineprint { margin-top: 14px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.insight-back { padding: 0 24px 8px; }
.insight-back a { font-weight: 600; font-size: 0.9rem; color: var(--alps-blue); }
.insight-back a::before { content: "\2190 "; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .section { padding: 64px 0; }
  .triad, .cards, .features, .sml-steps, .contrast, .paths-split { grid-template-columns: 1fr; }
  .stat-row { grid-auto-flow: row; }
  /* Touch scrolling covers navigation; the dots still show position. */
  .quote-carousel { grid-template-columns: 1fr; gap: 0; }
  .quote-arrow { display: none; }
  .quote-slide { padding: 34px 26px 32px; }
  .quote-slide p { font-size: 1.12rem; }
  .insight-item, .insight-summary { padding: 26px 22px; }
  .stat { border-left: 0; border-top: 1px solid var(--line); padding: 18px 0 0; }
  .stat:first-child { border-top: 0; }
  .lead-fields { grid-template-columns: 1fr; }
  .platform-hero { padding: 88px 0 76px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split.reverse .split-media { order: 0; }
  .hero { padding: 90px 0; }
}
@media (max-width: 620px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-legal { flex-direction: column; align-items: flex-start; }
}

/* ---- Advisor Insight: interactive detail -------------------------------
   The spine of an argument stays short; the evidence sits one click away.
   Everything here degrades to plain, readable markup without JavaScript. */

/* The four control questions an AI deployment answers whether asked or not. */
.prose ul.qs {
  list-style: none; padding: 0; margin: 2.2em 0;
  display: grid; grid-template-columns: 1fr; gap: 0; border-top: 2px solid var(--navy);
}
.prose ul.qs li {
  background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  padding: 16px 0; font-size: 1.06rem; font-weight: 500; color: var(--navy);
}
.prose ul.qs li:last-child { border-bottom: 0; }

/* "Dig deeper" disclosure. Native <details>, so it works with JS disabled
   and lands in the page's find-in-page once opened. */
.prose .dig {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg-soft); margin: 1.6em 0;
}
.prose .dig > summary {
  cursor: pointer; list-style: none; padding: 15px 20px;
  display: flex; align-items: baseline; gap: 12px;
  font-size: 1.02rem; font-weight: 600; color: var(--navy);
}
.prose .dig > summary::-webkit-details-marker { display: none; }
.prose .dig > summary::before {
  content: "+"; flex: 0 0 auto; width: 18px; height: 18px; line-height: 17px;
  text-align: center; border: 1px solid var(--alps-blue); border-radius: 50%;
  color: var(--alps-blue); font-size: 0.8rem; font-weight: 700;
  transform: translateY(1px);
}
.prose .dig[open] > summary::before { content: "\2013"; }
.prose .dig > summary:hover { color: var(--alps-blue); }
.prose .dig > summary:focus-visible { outline: 2px solid var(--alps-blue); outline-offset: -2px; }
.dig-body { padding: 0 20px 18px 50px; }
.dig-body > :first-child { margin-top: 0; }
.dig-body > :last-child { margin-bottom: 0; }
.dig-body p { font-size: 1rem; color: #2b3946; }
.dig-body .dig-lead { color: var(--ink); }
.dig-body .dig-fail { color: var(--muted); font-style: italic; }
.dig-body ul.checks { margin: 0 0 1em; }

/* The five principles: a numbered stack of disclosures. */
.prose ol.principles { list-style: none; padding: 0; margin: 1.8em 0; counter-reset: principle; }
.prose ol.principles > li { counter-increment: principle; margin: 0 0 10px; }
.prose ol.principles .dig { margin: 0; background: #fff; }
.prose ol.principles .dig > summary::before {
  content: counter(principle); border-color: var(--line); color: var(--muted);
}
.prose ol.principles .dig[open] > summary::before {
  border-color: var(--alps-blue); background: var(--alps-blue); color: #fff;
}

/* Path comparison: the existing .flow, plus a trailing label and an ALPS variant. */
/* The label leads each path and takes its own line, so the two paths align.
   It is also the flow's first child, which keeps the .flow-step:first-child
   accent (a highlighted starting step) off these comparison rows. */
.flow-tag {
  flex: 0 0 100%; margin: 0 0 2px;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700; color: var(--muted);
}
.flow.is-alps { margin-top: -0.4em; }
.flow.is-alps .flow-step { border-color: var(--alps-blue); color: var(--alps-blue); }
.flow.is-alps .flow-tag { color: var(--alps-blue); }

/* The compounding cycle. Without JS every panel is visible and it reads as a
   sequence; main.js turns it into a tablist and shows one stage at a time. */
.cycle { margin: 2em 0; }
.cycle-track { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cycle-node {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 9px 16px; font: inherit; font-size: 0.85rem; font-weight: 600;
  color: var(--navy); cursor: pointer; transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.cycle-node:hover { border-color: var(--alps-blue); color: var(--alps-blue); }
.cycle-node:focus-visible { outline: 2px solid var(--alps-blue); outline-offset: 2px; }
.cycle-node[aria-selected="true"] {
  border-color: var(--alps-blue); background: var(--alps-blue); color: #fff;
}
.cycle-n {
  font-size: 0.7rem; font-weight: 700; color: var(--alps-blue);
  background: var(--bg-tint); border-radius: 50%; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
}
.cycle-node[aria-selected="true"] .cycle-n { background: rgba(255, 255, 255, 0.24); color: #fff; }
.cycle-return { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; color: var(--muted); }
.cycle-panel {
  border: 1px solid var(--line); border-left: 3px solid var(--alps-blue);
  border-radius: var(--radius); background: var(--bg-soft); padding: 20px 24px; margin-top: 14px;
}
.cycle-panel h4 { margin: 0 0 8px; font-size: 1.02rem; color: var(--navy); }
.cycle-panel p { margin: 0; font-size: 1rem; color: #2b3946; }
/* JS-enhanced: one stage at a time, in a height-stable panel. */
.cycle.is-enhanced .cycle-panel { display: none; }
.cycle.is-enhanced .cycle-panel.is-active { display: block; }

@media (max-width: 720px) {
  .prose ul.qs { grid-template-columns: 1fr; }
  .dig-body { padding-left: 20px; }
  .flow.is-alps { margin-top: 0; }
}

/* Incident exhibit: a grid of logo cards. Selecting one expands its detail in
   a single panel below the grid, so the cards stay on an even baseline. Reuses
   the data-cycle tablist behaviour; without JS every panel renders in sequence. */
.prose .cases { margin: 1.8em 0; }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.case-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 16px; font: inherit; text-align: left; cursor: pointer;
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.case-card:hover { border-color: var(--alps-blue); }
.case-card:focus-visible { outline: 2px solid var(--alps-blue); outline-offset: 2px; }
.case-card[aria-selected="true"] { border-color: var(--alps-blue); box-shadow: var(--shadow-lift); }
/* Logos sit back until the card is chosen: an editorial reference, not a badge. */
.case-logo {
  height: 20px; width: auto; max-width: 120px; object-fit: contain; object-position: left;
  filter: grayscale(1); opacity: 0.5;
  transition: filter 150ms var(--ease), opacity 150ms var(--ease);
}
.case-card:hover .case-logo,
.case-card[aria-selected="true"] .case-logo { filter: none; opacity: 1; }
.case-co { font-size: 0.82rem; font-weight: 700; color: var(--navy); }
.case-fact { font-size: 0.84rem; color: var(--muted); line-height: 1.45; }
.case-panel {
  border: 1px solid var(--line); border-left: 3px solid var(--alps-blue);
  border-radius: var(--radius); background: var(--bg-soft);
  padding: 22px 26px; margin-top: 12px;
}
.case-panel h4 { margin: 0 0 10px; font-size: 1.02rem; color: var(--navy); }
.case-panel p { font-size: 1rem; color: #2b3946; margin: 0 0 0.8em; }
.case-panel p:last-child { margin-bottom: 0; }
.case-missing { font-size: 0.88rem; color: var(--alps-blue); font-weight: 600; }
.cases.is-enhanced .case-panel { display: none; }
.cases.is-enhanced .case-panel.is-active { display: block; }
@media (max-width: 860px) { .case-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .case-grid { grid-template-columns: 1fr; } }

/* ---- The operating loop -------------------------------------------------
   Five moves, every one of them visible. This is the spine a leadership team
   has to be able to answer out loud, so nothing here hides behind a
   disclosure: the section is meant to be read at a glance and scanned again
   later. Each move carries its command, why it exists, what it takes, and the
   one question that settles whether the enterprise actually holds it. */
.prose ol.loop { list-style: none; padding: 0; margin: 2.4em 0; }
.prose ol.loop > li {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; padding: 0; margin: 0 0 20px;
}
.prose ol.loop > li:last-child { margin-bottom: 0; }
/* The move leads its own heading, set larger than the words that follow it,
   and the whole row sits on the article's left margin rather than indented
   into a column of its own. */
/* Each tenet is one callout: a tinted block behind an ALPS Blue edge, with the
   numeral set large in its own column and everything the tenet says stacked
   beside it. One voice rather than three bands. */
.prose ol.loop > li {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: start;
  background: var(--bg-tint);
  border: 0; border-left: 4px solid var(--alps-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 26px 32px; margin: 0 0 16px;
}
.prose ol.loop > li:last-child { margin-bottom: 0; }
.loop-n {
  font-size: 3.4rem; font-weight: 700; line-height: 0.95; color: var(--alps-blue);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.prose .loop-name {
  margin: 0 0 2px; font-size: 1.9rem; font-weight: 700; line-height: 1.15;
  color: var(--navy); letter-spacing: -0.025em;
}
.prose .loop-cmd {
  margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--navy); line-height: 1.3;
}
.prose .loop-why { margin: 14px 0 0; font-size: 1rem; color: #2b3946; }
.prose .loop-why + .loop-why { margin-top: 0.9em; }
.prose .loop-test {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(34, 153, 206, 0.28);
  font-size: 0.95rem; line-height: 1.55; font-weight: 500; color: var(--navy);
}
.prose .loop-close { margin: 1.4em 0 0; font-size: 1.06rem; font-weight: 500; color: var(--navy); }

/* What the loop earns: four properties of the resulting architecture. */
.prose .gains { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.8em 0; }
.gain {
  border: 1px solid var(--line); border-top: 3px solid var(--alps-blue);
  border-radius: var(--radius); background: var(--bg-soft); padding: 22px 24px;
}
.prose .gain-k {
  margin: 0; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700; color: var(--alps-blue);
}
.gain h4 { margin: 8px 0; font-size: 1.05rem; color: var(--navy); line-height: 1.35; }
.prose .gain p:last-child { margin: 0; font-size: 0.95rem; color: #2b3946; }

@media (max-width: 620px) {
  .prose ol.loop > li { gap: 16px; padding: 20px 20px 22px; }
  .loop-n { font-size: 2.4rem; }
  .prose .gains { grid-template-columns: 1fr; }
}

/* ---- Deeds and exits ---------------------------------------------------
   What an enterprise need not own beside what it must be able to do. The
   exit column carries the accent, since that is the half that matters. */
.prose .exits { margin: 1.8em 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.exits-row { display: grid; grid-template-columns: 1fr 1.5fr; }
.exits-row + .exits-row { border-top: 1px solid var(--line); }
.exits-row > div { padding: 13px 18px; font-size: 0.96rem; line-height: 1.5; }
.exits-deed { color: var(--muted); }
.exits-exit { color: var(--navy); font-weight: 500; border-left: 3px solid var(--alps-blue); }
.exits-head { background: var(--bg-soft); }
.exits-head > div {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
  padding-top: 10px; padding-bottom: 10px;
}
.exits-head .exits-exit { color: var(--alps-blue); }

@media (max-width: 560px) {
  .exits-head { display: none; }
  .exits-row { grid-template-columns: 1fr; }
  .exits-deed::before { content: "Need not own: "; font-weight: 600; color: var(--navy); }
  .exits-exit { border-left: 0; border-top: 1px dashed var(--line); }
  .exits-exit::before { content: "Must be able to: "; font-weight: 600; color: var(--alps-blue); }
}

/* ---- Article figures: hand-built diagram components ---------------------
   HTML/CSS rather than SVG so labels stay legible at every width. */
.prose .fig { margin: 2em 0; }
.prose .fig figcaption { font-size: 0.84rem; color: var(--muted); margin-top: 12px; text-align: center; }
.fig-k {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  font-weight: 700; color: var(--muted); margin-bottom: 10px;
}

/* The sovereignty stack: authority above, foundation below. */
.fig-stack { max-width: 620px; margin: 0 auto; }
.fs-layer { border-radius: 8px; padding: 18px 22px; }
.fs-layer p { margin: 6px 0 0; font-size: 0.9rem; line-height: 1.5; }
.fs-layer.is-top { border: 2px solid var(--alps-blue); background: #fff; }
.fs-layer.is-top .fs-name, .fs-layer.is-top p { color: var(--navy); }
.fs-layer.is-top p { color: #2b3946; }
.fs-layer.is-base { background: var(--navy); }
.fs-layer.is-base .fs-name { color: #fff; }
.fs-layer.is-base p { color: rgba(255, 255, 255, 0.85); }
.fs-name { font-weight: 700; font-size: 1.02rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fs-tag {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
  color: var(--alps-blue); background: var(--bg-tint); border-radius: 999px; padding: 3px 10px;
}
.fs-layer.is-base .fs-tag { color: #d6f0fb; background: rgba(255, 255, 255, 0.14); }
.fs-link {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--alps-blue); padding: 8px 0;
}