/* ============================================================
   Alcan Landing — page styles
   Extends kit-styles.css. Adds spectrum-driven section rhythm,
   triplet headlines, persona scroll story, editorial services list,
   process band, animated canopy, hero variants.
   All visual tokens come from colors_and_type.css.
   ============================================================ */

/* ---- Tweakable accent (lead spectrum color) ---- */
.alcan {
  --lead: var(--sunrise-600);
  --lead-700: var(--sunrise-700);
  --lead-100: var(--sunrise-100);
  --lead-50:  var(--sunrise-50);
}
.alcan[data-lead="sunrise"] { --lead: var(--sunrise-600); --lead-700: var(--sunrise-700); --lead-100: var(--sunrise-100); --lead-50: var(--sunrise-50); }
.alcan[data-lead="sun"]     { --lead: var(--sun-600);     --lead-700: #5A4400;           --lead-100: var(--sun-100);     --lead-50: var(--sun-50); }
.alcan[data-lead="leaf"]    { --lead: var(--leaf-600);    --lead-700: var(--leaf-700);   --lead-100: var(--leaf-100);    --lead-50: var(--leaf-50); }
.alcan[data-lead="sky"]     { --lead: var(--sky-600);     --lead-700: var(--sky-700);    --lead-100: var(--sky-100);     --lead-50: var(--sky-50); }
.alcan[data-lead="iris"]    { --lead: var(--iris-600);    --lead-700: var(--iris-700);   --lead-100: var(--iris-100);    --lead-50: var(--iris-50); }

/* ---- Page-wide overrides that follow the lead color ---- */
.alcan .header .nav a.active::after { background: var(--lead); }
.alcan .btn-link:hover { color: var(--lead-700); }
.alcan .cta-band::before { background: radial-gradient(circle, color-mix(in oklab, var(--lead) 35%, transparent), transparent 60%); }
.alcan .tm-card .mark { color: var(--lead); }

/* ============================================================
   HERO — 4 tweakable variants
   ============================================================ */

/* Shared hero shell — reset kit's .hero so we control everything */
.alcan .hero { padding: 0; background: var(--paper-100); border-bottom: 1px solid var(--border); }
.alcan .hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-900);
}
.alcan .hero-eyebrow::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--lead);
}
.alcan .hero-eyebrow.on-dark { color: #fff; }

.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- Variant LIVE — Full-bleed video hero (ACTIVE) ---------- */
.alcan .hero-live {
  position: relative; isolation: isolate;
  min-height: min(88vh, 780px);
  display: flex; align-items: center;
  padding: 104px 0;
  background: var(--ink-900);
  border-bottom: 0;
  overflow: hidden;
}
.hero-live .hero-video-wrap { position: absolute; inset: 0; z-index: 0; }
.hero-live .hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
/* Scrim: darkest at left (where copy sits) fading right, plus a base gradient */
.hero-live .hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(14,15,18,0.88) 0%, rgba(14,15,18,0.64) 42%, rgba(14,15,18,0.30) 72%, rgba(14,15,18,0.12) 100%),
    linear-gradient(0deg, rgba(14,15,18,0.55) 0%, rgba(14,15,18,0) 42%);
}
.hero-live .container { position: relative; z-index: 2; max-width: 1180px; }
.hero-live .hero-live-copy { max-width: 680px; }
.hero-live h1 {
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 88px);
  line-height: 0.98; letter-spacing: -0.035em;
  font-weight: 500; color: #fff;
  margin: 22px 0 22px; text-wrap: balance;
}
.hero-live h1 em { font-style: italic; font-weight: 400; color: var(--ink-300); }
.hero-live h1 .mark {
  color: #fff; font-style: normal; position: relative; white-space: nowrap;
  background-image: linear-gradient(90deg, var(--lead) 0%, var(--lead) 100%);
  background-repeat: no-repeat; background-position: 0 100%;
  background-size: 100% 0.12em; padding-bottom: 0.06em;
}
.hero-live .lede {
  font-size: 19px; line-height: 1.55; color: rgba(255,255,255,0.86);
  max-width: 560px; margin: 0 0 32px;
}
.hero-live .hero-cta .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,0.32);
  border-width: 1px; border-style: solid;
}
.hero-live .hero-cta .btn-ghost:hover { background: rgba(255,255,255,0.10); }
.hero-live .hero-trust {
  display: flex; gap: 44px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,0.16);
}
.hero-live .hero-trust .trust-item { display: flex; flex-direction: column; gap: 4px; }
.hero-live .hero-trust .v {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  color: #fff; letter-spacing: -0.01em;
}
.hero-live .hero-trust .k {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400);
}
/* Brand spectrum underline pinned to the base */
.hero-live .hero-spectrum {
  position: absolute; bottom: 0; left: 0; right: 0; height: 6px; z-index: 3;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.hero-live .hero-spectrum span:nth-child(1) { background: var(--sunrise-600); }
.hero-live .hero-spectrum span:nth-child(2) { background: var(--sun-600); }
.hero-live .hero-spectrum span:nth-child(3) { background: var(--leaf-600); }
.hero-live .hero-spectrum span:nth-child(4) { background: var(--sky-600); }
.hero-live .hero-spectrum span:nth-child(5) { background: var(--iris-600); }
/* Accessibility: no autoplay motion — show the poster still instead */
@media (prefers-reduced-motion: reduce) {
  .hero-live .hero-video { display: none; }
  .hero-live .hero-video-wrap {
    background-image: url('../assets/hero/hero-poster.jpg');
    background-size: cover; background-position: center;
  }
}
@media (max-width: 860px) {
  .hero-live { min-height: 0; padding: 76px 0 60px; }
  .hero-live .hero-trust { gap: 26px; }
}

/* ---------- Variant 1 — Editorial split (text + photo + canopy badge) ---------- */
.hero-v1 { padding: 56px 0 0; }
.hero-v1 .container {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 64px; align-items: center;
}
.hero-v1 h1 {
  font-family: var(--font-display);
  font-size: clamp(46px, 6vw, 84px);
  line-height: 0.98; letter-spacing: -0.035em;
  font-weight: 500; color: var(--ink-900);
  margin: 22px 0 22px; text-wrap: balance;
}
.hero-v1 h1 em { font-style: italic; font-weight: 400; color: var(--ink-700); }
.hero-v1 h1 .mark { color: var(--lead); font-style: normal; position: relative; white-space: nowrap; }
.hero-v1 h1 .mark::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.04em;
  height: 0.18em; background: var(--lead-100); z-index: -1;
}
.hero-v1 .lede {
  font-size: 19px; line-height: 1.5; color: var(--ink-700);
  max-width: 520px; margin: 0 0 32px;
}
.hero-v1 .image-wrap { position: relative; }
.hero-v1 .photo {
  position: relative; border-radius: var(--radius-lg);
  overflow: hidden; aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-lg);
}
.hero-v1 .photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-v1 .photo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14,15,18,0) 50%, rgba(14,15,18,0.35) 100%);
  pointer-events: none;
}
.hero-v1 .badge {
  position: absolute; bottom: -28px; left: -28px;
  background: var(--ink-900); color: #fff;
  padding: 20px 22px; border-radius: var(--radius-lg);
  display: flex; align-items: center; gap: 18px;
  box-shadow: var(--shadow-lg);
  max-width: 320px;
}
.hero-v1 .badge .num {
  font-family: var(--font-display); font-size: 56px; font-weight: 500;
  line-height: 0.9; letter-spacing: -0.03em; color: #fff;
}
.hero-v1 .badge .num small { font-size: 28px; color: var(--lead); margin-left: 2px; }
.hero-v1 .badge .lbl {
  font-family: var(--font-sans); font-size: 12px; line-height: 1.35;
  color: var(--ink-300); letter-spacing: 0.04em; max-width: 160px;
}
.hero-v1 .image-wrap.no-image .photo {
  background: var(--paper-200);
  display: flex; align-items: center; justify-content: center;
}
.hero-v1 .image-wrap.no-image .photo img { display: none; }
.hero-v1 .canopy-host {
  position: absolute; top: 28px; right: 28px;
  width: 132px; height: 132px;
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-md);
}

/* ---------- Variant 2 — Dark hero, big serif, spectrum underline ---------- */
.hero-v2 { background: var(--ink-900); color: #fff; padding: 88px 0 96px; position: relative; overflow: hidden; }
.hero-v2 .container { position: relative; z-index: 2; max-width: 1180px; }
.hero-v2 .copy { max-width: 880px; }
.hero-v2 h1 {
  font-family: var(--font-display);
  font-size: clamp(54px, 7.2vw, 108px);
  line-height: 0.96; letter-spacing: -0.04em;
  font-weight: 500; color: #fff;
  margin: 28px 0 24px; text-wrap: balance;
}
.hero-v2 h1 em { font-style: italic; font-weight: 400; color: var(--ink-300); }
.hero-v2 h1 .mark {
  color: #fff; font-style: normal; position: relative; white-space: nowrap;
  background-image: linear-gradient(90deg, var(--lead) 0%, var(--lead) 100%);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.12em;
  padding-bottom: 0.08em;
}
.hero-v2 .lede {
  font-size: 21px; line-height: 1.5; color: var(--ink-300);
  max-width: 640px; margin: 0 0 36px;
}
.hero-v2 .hero-cta .btn-primary { background: #fff; color: var(--ink-900); }
.hero-v2 .hero-cta .btn-primary:hover { background: var(--paper-200); }
.hero-v2 .hero-cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.3); border-width: 1px; border-style: solid; }
.hero-v2 .hero-cta .btn-ghost:hover { background: rgba(255,255,255,0.08); }
.hero-v2 .bg-image {
  position: absolute; inset: 0; z-index: 1;
  background-size: cover; background-position: center;
  opacity: 0.32;
  mask-image: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,1) 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,1) 100%);
}
.hero-v2 .bg-spectrum {
  position: absolute; bottom: 0; left: 0; right: 0; height: 6px; z-index: 3;
  display: grid; grid-template-columns: repeat(5, 1fr);
}
.hero-v2 .bg-spectrum span:nth-child(1) { background: var(--sunrise-600); }
.hero-v2 .bg-spectrum span:nth-child(2) { background: var(--sun-600); }
.hero-v2 .bg-spectrum span:nth-child(3) { background: var(--leaf-600); }
.hero-v2 .bg-spectrum span:nth-child(4) { background: var(--sky-600); }
.hero-v2 .bg-spectrum span:nth-child(5) { background: var(--iris-600); }
.hero-v2 .hero-meta {
  display: flex; gap: 48px; margin-top: 56px;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.14);
}
.hero-v2 .hero-meta > div { display: flex; flex-direction: column; gap: 4px; }
.hero-v2 .hero-meta .k {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400);
}
.hero-v2 .hero-meta .v {
  font-family: var(--font-display); font-size: 22px;
  font-weight: 500; color: #fff; letter-spacing: -0.01em;
}

/* ---------- Variant 3 — Triplet-only typography hero (no image) ---------- */
.hero-v3 { padding: 96px 0 96px; }
.hero-v3 .container { max-width: 1180px; }
.hero-v3 .triplet {
  font-family: var(--font-display);
  font-size: clamp(64px, 10vw, 168px);
  font-weight: 500; line-height: 0.92; letter-spacing: -0.045em;
  color: var(--ink-900); margin: 32px 0;
  display: flex; flex-wrap: wrap; gap: 0.2em 0.18em;
}
.hero-v3 .triplet span { position: relative; padding-right: 0.04em; }
.hero-v3 .triplet span::after {
  content: '.'; color: var(--lead); margin-left: 0.02em;
}
.hero-v3 .lede-row {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 64px; align-items: end; margin-top: 28px;
  border-top: 1px solid var(--border-strong); padding-top: 36px;
}
.hero-v3 .lede {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px); font-weight: 400;
  line-height: 1.35; color: var(--ink-800);
  max-width: 580px;
}
.hero-v3 .lede em { color: var(--lead-700); font-style: italic; }
.hero-v3 .hero-cta { justify-content: flex-end; }

/* ---------- Variant 4 — Spectrum blocks (5 colored panels) ---------- */
.hero-v4 { padding: 64px 0 0; }
.hero-v4 .container { max-width: var(--container-wide); }
.hero-v4 .top {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 48px; align-items: end; padding-bottom: 36px;
}
.hero-v4 h1 {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.2vw, 96px); line-height: 0.96;
  letter-spacing: -0.035em; font-weight: 500; color: var(--ink-900);
  margin: 18px 0 0; text-wrap: balance;
}
.hero-v4 h1 em { font-style: italic; color: var(--ink-700); }
.hero-v4 .lede {
  font-size: 18px; line-height: 1.5; color: var(--ink-700);
  max-width: 460px; margin: 0 0 22px;
}
.hero-v4 .blocks {
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: 380px;
  border-top: 1px solid var(--border);
}
.hero-v4 .block {
  position: relative; padding: 28px 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  cursor: pointer; transition: all 220ms var(--ease-out);
  border-right: 1px solid rgba(255,255,255,0.18);
  overflow: hidden;
}
.hero-v4 .block:last-child { border-right: 0; }
.hero-v4 .block:hover { flex: 1.3; }
.hero-v4 .block .eyebrow {
  font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.85);
}
.hero-v4 .block h3 {
  font-family: var(--font-display); font-size: 28px;
  line-height: 1.05; letter-spacing: -0.02em;
  font-weight: 500; color: #fff; margin: 0;
}
.hero-v4 .block .arrow {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.16);
  display: inline-flex; align-items: center; justify-content: center;
  align-self: flex-start; transition: transform 220ms var(--ease-out);
}
.hero-v4 .block .arrow i { width: 16px; height: 16px; color: #fff; }
.hero-v4 .block:hover .arrow { transform: translate(4px, -4px); background: #fff; }
.hero-v4 .block:hover .arrow i { color: var(--ink-900); }
.hero-v4 .block.sunrise { background: var(--sunrise-600); }
.hero-v4 .block.sun     { background: var(--sun-600);     color: var(--ink-900); }
.hero-v4 .block.sun .eyebrow { color: rgba(14,15,18,0.7); }
.hero-v4 .block.sun h3, .hero-v4 .block.sun .arrow i { color: var(--ink-900); }
.hero-v4 .block.sun .arrow { background: rgba(14,15,18,0.14); }
.hero-v4 .block.leaf    { background: var(--leaf-600); }
.hero-v4 .block.sky     { background: var(--sky-600); }
.hero-v4 .block.iris    { background: var(--iris-600); }

/* ============================================================
   ANIMATED CANOPY (the tree-mark visual anchor)
   ============================================================ */
.canopy-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.canopy-svg .trunk { transform-origin: 50% 100%; }
.canopy-svg .dot { transform-origin: center; transform-box: fill-box; }
@keyframes canopy-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
@keyframes canopy-drift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.canopy-svg .d1 { animation: canopy-pulse 3.6s ease-in-out infinite; }
.canopy-svg .d2 { animation: canopy-pulse 3.6s ease-in-out infinite 0.24s; }
.canopy-svg .d3 { animation: canopy-pulse 3.6s ease-in-out infinite 0.48s; }
.canopy-svg .d4 { animation: canopy-pulse 3.6s ease-in-out infinite 0.72s; }
.canopy-svg .d5 { animation: canopy-pulse 3.6s ease-in-out infinite 0.96s; }
.canopy-svg g.canopy { animation: canopy-drift 5.2s ease-in-out infinite; transform-origin: center; }

/* ============================================================
   SPECTRUM BAR — full-bleed 5-color signature device
   ============================================================ */
.spectrum-bar { display: grid; grid-template-columns: repeat(5, 1fr); height: 8px; }
.spectrum-bar span:nth-child(1) { background: var(--sunrise-600); }
.spectrum-bar span:nth-child(2) { background: var(--sun-600); }
.spectrum-bar span:nth-child(3) { background: var(--leaf-600); }
.spectrum-bar span:nth-child(4) { background: var(--sky-600); }
.spectrum-bar span:nth-child(5) { background: var(--iris-600); }

/* ============================================================
   TRIPLET OPENER — section opener with 3 verbs + supporting line
   ============================================================ */
.triplet-opener { padding: var(--section-y) 0; background: var(--paper-100); position: relative; }
.triplet-opener.dark { background: var(--ink-900); color: #fff; }
.triplet-opener.alt  { background: var(--paper-200); }
.triplet-opener .container { max-width: var(--container-wide); }
.triplet-opener .row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end;
}
.triplet-opener .verbs {
  font-family: var(--font-display);
  font-size: clamp(48px, 6.5vw, 96px);
  font-weight: 500; line-height: 0.95; letter-spacing: -0.035em;
  color: var(--ink-900);
}
.triplet-opener.dark .verbs { color: #fff; }
.triplet-opener .verbs span { display: block; position: relative; }
.triplet-opener .verbs span:nth-child(1) .dot { background: var(--lead); }
.triplet-opener .verbs span .dot {
  display: inline-block;
  width: 0.16em; height: 0.16em; border-radius: 50%;
  background: var(--lead); margin-left: 0.04em;
  vertical-align: 0.06em;
}
.triplet-opener .supporting {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 400; line-height: 1.4; color: var(--ink-800);
  max-width: 520px;
}
.triplet-opener.dark .supporting { color: var(--ink-300); }
.triplet-opener .supporting em { color: var(--lead-700); font-style: italic; }
.triplet-opener.dark .supporting em { color: var(--lead); }

/* ============================================================
   PERSONA SCROLL STORY
   Sticky portrait/visual on the left, scrolling chapters on the right.
   Each chapter is color-coded with one spectrum color.
   ============================================================ */
.persona { padding: var(--section-y) 0; background: var(--paper-100); position: relative; }
.persona .container { display: grid; grid-template-columns: 1fr 1.05fr; gap: 80px; align-items: start; }

.persona .sticky {
  position: sticky; top: 80px;
  display: flex; flex-direction: column; gap: 24px;
}
.persona .portrait {
  position: relative; border-radius: var(--radius-lg);
  overflow: hidden; aspect-ratio: 4 / 5;
  background: var(--paper-200);
  box-shadow: var(--shadow-md);
}
.persona .portrait img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9) contrast(1.02); }
.persona .portrait .badge {
  position: absolute; bottom: 16px; left: 16px;
  background: rgba(14,15,18,0.86); color: #fff;
  padding: 12px 14px; border-radius: var(--radius-md);
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: 12px;
  backdrop-filter: blur(8px);
}
.persona .portrait .badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--lead)); }
.persona .portrait .badge b { font-family: var(--font-display); font-size: 14px; font-weight: 500; }
.persona .portrait .badge span { color: var(--ink-300); font-size: 11px; letter-spacing: 0.04em; }

.persona .meta-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 22px;
}
.persona .meta-card h6 {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-500);
  margin: 0 0 14px;
}
.persona .meta-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; }
.persona .meta-card dt { font-family: var(--font-mono); font-size: 11px; color: var(--ink-500); letter-spacing: 0.04em; padding-top: 2px; }
.persona .meta-card dd { margin: 0; font-family: var(--font-sans); font-size: 13.5px; color: var(--ink-800); font-weight: 500; }
.persona .meta-card dd .pip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 0px; }
.persona .meta-card dd .pip.sunrise { background: var(--sunrise-600); }
.persona .meta-card dd .pip.sun     { background: var(--sun-600); }
.persona .meta-card dd .pip.leaf    { background: var(--leaf-600); }
.persona .meta-card dd .pip.sky     { background: var(--sky-600); }
.persona .meta-card dd .pip.iris    { background: var(--iris-600); }

.persona .narrative {
  display: flex; flex-direction: column; gap: 0;
}
.persona .narrative > .lede {
  font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 400; line-height: 1.35; color: var(--ink-900);
  margin: 0 0 48px; max-width: 560px; text-wrap: balance;
}
.persona .narrative > .lede em { font-style: italic; color: var(--lead-700); }

.chapter {
  position: relative;
  padding: 32px 0 36px 56px;
  border-top: 1px solid var(--border);
  --c: var(--lead);
}
.chapter:last-child { border-bottom: 1px solid var(--border); }
.chapter::before {
  content: ''; position: absolute; left: 0; top: 52px;
  width: 38px; height: 1px; background: var(--c);
}
.chapter .num {
  position: absolute; left: 0; top: 32px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--c);
}
.chapter h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px); font-weight: 500;
  line-height: 1.1; letter-spacing: -0.015em;
  color: var(--ink-900); margin: 18px 0 10px;
  text-wrap: balance;
}
.chapter h3 em { color: var(--c); font-style: italic; }
.chapter p { font-size: 16px; line-height: 1.6; color: var(--ink-700); margin: 0 0 16px; max-width: 540px; }
.chapter .tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c);
}
.chapter .tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.chapter .quote {
  margin-top: 18px; padding: 14px 18px;
  background: color-mix(in oklab, var(--c) 6%, transparent);
  border-left: 2px solid var(--c);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display); font-style: italic;
  font-size: 16px; line-height: 1.5; color: var(--ink-800);
  max-width: 540px;
}
.chapter.c-sunrise { --c: var(--sunrise-700); }
.chapter.c-sun     { --c: #5A4400; }
.chapter.c-leaf    { --c: var(--leaf-700); }
.chapter.c-sky     { --c: var(--sky-700); }
.chapter.c-iris    { --c: var(--iris-700); }

/* ============================================================
   SERVICES — editorial split list (NOT cards)
   Left column = service rows; right column = sticky preview pane
   that changes based on the hovered row.
   ============================================================ */
.services-edit { padding: var(--section-y) 0; background: var(--paper-200); }
.services-edit .container { max-width: var(--container-wide); }
.services-edit .layout {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px;
}
.services-edit .list { display: flex; flex-direction: column; }
.services-edit .row-item {
  position: relative;
  display: grid; grid-template-columns: 60px 1fr auto;
  align-items: start; gap: 24px;
  padding: 32px 0;
  border-top: 1px solid var(--border-strong);
  cursor: pointer;
  transition: padding-left 220ms var(--ease-out);
  --c: var(--ink-900);
}
.services-edit .row-item:last-child { border-bottom: 1px solid var(--border-strong); }
.services-edit .row-item .num {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; color: var(--c); padding-top: 8px;
}
.services-edit .row-item h3 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.05;
  color: var(--ink-900); margin: 0 0 12px;
  transition: color 220ms var(--ease-out);
}
.services-edit .row-item p {
  font-size: 15.5px; line-height: 1.55; color: var(--ink-700);
  margin: 0; max-width: 480px;
}
.services-edit .row-item .pip {
  width: 56px; height: 56px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--border);
  transition: all 220ms var(--ease-out);
}
.services-edit .row-item .pip i { width: 22px; height: 22px; color: var(--c); }
.services-edit .row-item:hover { padding-left: 12px; }
.services-edit .row-item:hover h3 { color: var(--c); }
.services-edit .row-item:hover .pip { background: var(--c); border-color: var(--c); transform: scale(1.05); }
.services-edit .row-item:hover .pip i { color: #fff; }
.services-edit .row-item.active h3 { color: var(--c); }
.services-edit .row-item.active .pip { background: var(--c); border-color: var(--c); }
.services-edit .row-item.active .pip i { color: #fff; }
.services-edit .row-item.c-sunrise { --c: var(--sunrise-700); }
.services-edit .row-item.c-sun     { --c: #5A4400; }
.services-edit .row-item.c-leaf    { --c: var(--leaf-700); }
.services-edit .row-item.c-sky     { --c: var(--sky-700); }
.services-edit .row-item.c-iris    { --c: var(--iris-700); }

.services-edit .preview {
  position: sticky; top: 96px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ink-900);
  display: flex; align-items: stretch; justify-content: stretch;
  box-shadow: var(--shadow-lg);
  transition: background 320ms var(--ease-out);
}
.services-edit .preview-canvas {
  position: relative; flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 32px;
  color: #fff;
}
.services-edit .preview .eyebrow { color: rgba(255,255,255,0.84); font-size: 11px; }
.services-edit .preview .eyebrow::before { background: #fff; }
.services-edit .preview h4 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500; line-height: 1.08; letter-spacing: -0.02em;
  margin: 14px 0 12px; color: #fff;
}
.services-edit .preview p {
  font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.82);
  max-width: 380px; margin: 0;
}
.services-edit .preview-art {
  position: absolute; inset: 0; opacity: 0.7; pointer-events: none;
}

/* spectrum bg variants for preview */
.preview.bg-sunrise { background: var(--sunrise-700); }
.preview.bg-sun     { background: #5A4400; }
.preview.bg-leaf    { background: var(--leaf-700); }
.preview.bg-sky     { background: var(--sky-700); }
.preview.bg-iris    { background: var(--iris-700); }

/* ============================================================
   PROCESS — big spectrum numerals (5 steps)
   ============================================================ */
.process-band { padding: var(--section-y) 0; background: var(--paper-100); }
.process-band .container { max-width: var(--container-wide); }
.process-band .grid {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 0; border-top: 1px solid var(--border-strong);
}
.process-band .step {
  padding: 32px 22px 32px 0;
  border-right: 1px solid var(--border);
  background: none;
  position: relative; border-radius: 0; border-top: 0; border-bottom: 0; border-left: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.process-band .step:last-child { border-right: 0; padding-right: 0; }
.process-band .step::before { display: none; }
.process-band .step .big {
  font-family: var(--font-display);
  font-size: clamp(56px, 6vw, 96px); line-height: 0.9;
  font-weight: 500; letter-spacing: -0.04em;
  color: var(--c);
  margin: 0 0 6px;
}
.process-band .step h4 {
  font-family: var(--font-display); font-size: 22px; font-weight: 500;
  letter-spacing: -0.015em; color: var(--ink-900); margin: 0;
}
.process-band .step p { font-size: 14px; line-height: 1.55; color: var(--ink-700); margin: 0; max-width: 220px; }
.process-band .step .tag {
  font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c);
  display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 16px;
}
.process-band .step.s-sunrise { --c: var(--sunrise-700); }
.process-band .step.s-sun     { --c: #5A4400; }
.process-band .step.s-leaf    { --c: var(--leaf-700); }
.process-band .step.s-sky     { --c: var(--sky-700); }
.process-band .step.s-iris    { --c: var(--iris-700); }

/* ============================================================
   STATS BAND — dark, spectrum-tinted small caps
   ============================================================ */
.stats-band { background: var(--ink-900); color: #fff; padding: 72px 0; }
.stats-band .container { max-width: var(--container-wide); }
.stats-band .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stats-band .stat { padding: 0 32px; border-right: 1px solid rgba(255,255,255,0.16); }
.stats-band .stat:first-child { padding-left: 0; }
.stats-band .stat:last-child { border-right: 0; padding-right: 0; }
.stats-band .stat .num {
  font-family: var(--font-display);
  font-size: clamp(56px, 6.4vw, 96px);
  line-height: 0.9; letter-spacing: -0.03em; font-weight: 500;
  color: #fff;
}
.stats-band .stat .num small { font-size: 0.42em; margin-left: 4px; color: var(--c, #fff); }
.stats-band .stat .lbl {
  font-family: var(--font-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-300);
  margin-top: 18px;
}
.stats-band .stat .sub { font-size: 13.5px; color: var(--ink-400); margin-top: 6px; max-width: 220px; line-height: 1.5; }
.stats-band .stat.s-sunrise { --c: var(--sunrise-500); }
.stats-band .stat.s-sun     { --c: var(--sun-500); }
.stats-band .stat.s-leaf    { --c: var(--leaf-500); }
.stats-band .stat.s-sky     { --c: var(--sky-500); }

/* ============================================================
   LOGO WALL — fancier than the kit version
   ============================================================ */
.logo-wall { background: var(--paper-100); padding: 96px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.logo-wall .container { max-width: var(--container-wide); }
.logo-wall .head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 32px; margin-bottom: 40px; flex-wrap: wrap;
}
.logo-wall h3 {
  font-family: var(--font-display); font-size: clamp(28px, 3vw, 36px);
  font-weight: 500; letter-spacing: -0.02em; color: var(--ink-900);
  margin: 14px 0 0; max-width: 600px; text-wrap: balance;
}
.logo-wall .head .right {
  font-family: var(--font-sans); font-size: 14px; color: var(--ink-700);
  max-width: 360px; line-height: 1.55;
}
.logo-wall .grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border-top: 1px solid var(--border);
}
.logo-wall .logo {
  padding: 32px 18px; min-height: 132px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  border-right: 1px solid var(--border);
  font-family: var(--font-display); font-size: 21px; font-weight: 500;
  color: var(--ink-700); letter-spacing: -0.01em;
  gap: 8px;
  transition: all 220ms var(--ease-out);
  position: relative;
}
.logo-wall .logo:nth-child(6n) { border-right: 0; }
.logo-wall .logo:nth-child(n+7) { border-top: 1px solid var(--border); }
.logo-wall .logo .tag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.16em; color: var(--ink-500);
}
.logo-wall .logo::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--c, var(--lead)); opacity: 0; transition: opacity 200ms var(--ease-out);
}
.logo-wall .logo:hover { color: var(--ink-900); }
.logo-wall .logo:hover::before { opacity: 1; }
.logo-wall .logo:nth-child(5n+1) { --c: var(--sunrise-600); }
.logo-wall .logo:nth-child(5n+2) { --c: var(--sun-600); }
.logo-wall .logo:nth-child(5n+3) { --c: var(--leaf-600); }
.logo-wall .logo:nth-child(5n+4) { --c: var(--sky-600); }
.logo-wall .logo:nth-child(5n)   { --c: var(--iris-600); }

/* ============================================================
   TESTIMONIALS — pull-quote treatment with portrait
   ============================================================ */
.testimonials { padding: var(--section-y) 0; background: var(--paper-100); }
.testimonials .container { max-width: var(--container-wide); }
.testimonials .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.testimonials .quote-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px 44px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 28px;
  --c: var(--lead);
}
.testimonials .quote-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--c);
}
.testimonials .quote-card.c-sunrise { --c: var(--sunrise-600); }
.testimonials .quote-card.c-leaf    { --c: var(--leaf-600); }
.testimonials .quote-card.c-sky     { --c: var(--sky-600); }
.testimonials .quote-card.c-iris    { --c: var(--iris-600); }
.testimonials .quote-card q {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px); line-height: 1.35;
  font-weight: 400; color: var(--ink-900);
  font-style: italic; quotes: none;
  text-wrap: balance;
}
.testimonials .quote-card q::before, .testimonials .quote-card q::after { content: none; }
.testimonials .quote-card .attr {
  display: flex; align-items: center; gap: 16px;
  padding-top: 24px; border-top: 1px solid var(--border);
  margin-top: auto;
}
.testimonials .quote-card .av {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--c); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  flex-shrink: 0;
}
.testimonials .quote-card .who b { display: block; font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--ink-900); letter-spacing: -0.01em; }
.testimonials .quote-card .who span { font-family: var(--font-sans); font-size: 13px; color: var(--ink-600); }

/* ============================================================
   INSIGHTS GRID (re-using kit base, slight tightening)
   ============================================================ */
.insights-section { padding: var(--section-y) 0; background: var(--paper-200); }
.insights-section .container { max-width: var(--container-wide); }
.insights-section .head {
  display: flex; align-items: end; justify-content: space-between;
  flex-wrap: wrap; gap: 32px; margin-bottom: 44px;
}
.insights-section .head h2 {
  font-family: var(--font-display); font-size: clamp(32px, 4vw, 50px);
  font-weight: 500; letter-spacing: -0.025em; line-height: 1.05;
  margin: 14px 0 0; color: var(--ink-900); max-width: 640px;
}

/* ============================================================
   CTA BAND — already styled in kit; just tweak inner copy widths
   ============================================================ */
.alcan .cta-band { padding: 104px 0; }
.alcan .cta-band h2 { max-width: 880px; }
.alcan .cta-band::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: linear-gradient(90deg,
    var(--sunrise-600) 0% 20%, var(--sun-600) 20% 40%, var(--leaf-600) 40% 60%,
    var(--sky-600) 60% 80%, var(--iris-600) 80% 100%);
}
.alcan .cta-band .triplet-line {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 60px);
  font-weight: 500; line-height: 1.02; letter-spacing: -0.025em;
  color: #fff; margin: 14px 0 18px;
}
.alcan .cta-band .triplet-line .dot { color: var(--lead); }

/* ============================================================
   Small responsive concessions
   ============================================================ */
@media (max-width: 960px) {
  .hero-v1 .container,
  .hero-v4 .top,
  .persona .container,
  .services-edit .layout,
  .triplet-opener .row,
  .testimonials .grid,
  .hero-v3 .lede-row {
    grid-template-columns: 1fr; gap: 32px;
  }
  .hero-v4 .blocks, .process-band .grid, .stats-band .grid, .logo-wall .grid, .insights-grid, .spectrum-bar {
    grid-template-columns: repeat(2, 1fr); height: auto;
  }
  .spectrum-bar { display: none; }
  .persona .sticky, .services-edit .preview { position: static; }
}

/* ============================================================
   SITE EXTRAS — static-build helpers
   Replaces inline styles that lived in the React prototype.
   ============================================================ */

/* Hero V1 trust row */
.hero-v1 .hero-trust {
  display: flex; gap: 28px; margin-top: 36px; padding-top: 28px;
  border-top: 1px solid var(--border); flex-wrap: wrap;
}
.hero-v1 .trust-item { display: flex; flex-direction: column; gap: 2px; }
.hero-v1 .trust-item .v {
  font-family: var(--font-display); font-size: 17px; font-weight: 500;
  color: var(--ink-900); letter-spacing: -0.01em;
}
.hero-v1 .trust-item .k {
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-600);
  letter-spacing: 0.04em;
}

/* Section heading + sub (services / process / testimonials) */
.services-head {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 500; letter-spacing: -0.025em;
  line-height: 1.05; color: var(--ink-900);
  margin: 14px 0 18px; text-wrap: balance;
}
.services-sub {
  font-size: 18px; color: var(--ink-700); line-height: 1.55;
  max-width: 600px; margin: 0;
}

/* Footer chips */
.footer .footer-chips {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px;
}
.footer .footer-chips span {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-400);
  letter-spacing: 0.08em; padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 4px;
}

/* Footer newsletter */
.footer .footer-news {
  margin-bottom: 16px; color: var(--ink-300); font-size: 14px; max-width: 280px;
}
.footer .footer-subscribe { display: flex; gap: 8px; }
.footer .footer-subscribe input {
  flex: 1; background: #1A1C20; border: 1px solid #2E3138;
  color: #fff; padding: 10px 12px; border-radius: 6px;
  font-family: inherit; font-size: 13px;
}
.footer .footer-subscribe input::placeholder { color: var(--ink-500); }

/* Lucide icons render as inline <i>; size them inside buttons/links */
.btn i[data-lucide] { width: 14px; height: 16px; }

/* ---------- Article pages (blog posts) ---------- */
.breadcrumb { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); padding: 28px 0 0; }
.breadcrumb a { color: var(--ink-500); text-decoration: none; }
.breadcrumb a:hover { color: var(--lead-700); }
.article-hero { padding: 0 0 44px; background: var(--paper-100); border-bottom: 1px solid var(--border); }
.article-hero .container { max-width: 920px; }
.article-hero .meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); margin: 22px 0 12px; }
.article-hero h1 { font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.025em; font-weight: 500; color: var(--ink-900); margin: 0 0 30px; text-wrap: balance; }
.article-hero .thumb { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.article-hero .thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.article-body { max-width: var(--container-narrow); margin: 0 auto; padding: 56px 32px 8px; }
.article-body h2 { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 500; color: var(--ink-900); margin: 44px 0 14px; }
.article-body h2:first-child { margin-top: 0; }
.article-body h3 { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--ink-800); margin: 32px 0 10px; }
.article-body p { font-size: 17px; line-height: 1.7; color: var(--ink-700); margin: 0 0 18px; }
.article-body ul, .article-body ol { padding-left: 1.35em; margin: 0 0 20px; color: var(--ink-700); }
.article-body li { font-size: 17px; line-height: 1.65; margin-bottom: 8px; }
.article-body a { color: var(--lead-700); }
.article-body strong { color: var(--ink-900); }
.article-body .table-wrap { overflow-x: auto; margin: 28px 0; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.article-body .data-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article-body .data-table th, .article-body .data-table td { border-bottom: 1px solid var(--border); padding: 12px 16px; text-align: left; vertical-align: top; color: var(--ink-700); }
.article-body .data-table th { background: var(--paper-200); color: var(--ink-900); font-weight: 600; }
.article-body .data-table tr:last-child td { border-bottom: 0; }
.related-posts { border-top: 1px solid var(--border-strong); margin-top: 56px; padding: 40px 0 64px; }
.related-posts h3 { font-family: var(--font-display); font-size: 26px; font-weight: 500; color: var(--ink-900); margin: 0 0 24px; }
a.insight { text-decoration: none; color: inherit; display: flex; }
@media (max-width: 860px) {
  .article-body { padding-top: 36px; }
  .related-posts .insights-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE LAYER
   Responsive coverage in this build stopped at 960px and never
   reached the shared header/footer chrome, long CTA labels, or
   the tighter content grids — so every page scrolled sideways
   on a phone (~766px of content in a 375px viewport).
   ============================================================ */

/* .hero-media is not a defined class, so its image never got the
   max-width:100% every other image on the site gets. The intrinsic
   900px image set the hero grid's min-content and forced the page
   wider than the viewport on all six hero-v1 pages. */
.hero-media img { max-width: 100%; height: auto; display: block; }

@media (max-width: 820px) {
  /* Header: drop the nav to its own row rather than overflowing off-screen */
  .header-inner { flex-wrap: wrap; row-gap: 10px; }
  .header .nav { order: 3; width: 100%; gap: 22px; overflow-x: auto; }
  .header .nav a { white-space: nowrap; }
  .header .right { margin-left: auto; }

  /* Footer never collapsed: its last column sat ~766px out */
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }

  /* Content grids still locked to their desktop column counts */
  .industry-grid,
  .svc-grid, .svc-grid.three,
  .stat-grid, .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  /* Long labels (e.g. "Take the Seven Pillars of EHS Technology
     Assessment") need 433px and .btn sets white-space:nowrap,
     which forced the whole page wider than the screen. */
  .btn { white-space: normal; text-align: center; justify-content: center; }
  .btn-lg { padding: 14px 20px; }
  .hero-cta, .cta-row { flex-direction: column; align-items: stretch; }
  .hero-cta .btn, .cta-row .btn { width: 100%; }

  /* Single column on phones */
  .footer-grid,
  .industry-grid,
  .svc-grid, .svc-grid.three,
  .stat-grid, .team-grid,
  .insights-grid,
  .process,
  .tm-grid,
  .process-band .grid, .stats-band .grid, .logo-wall .grid { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; gap: 14px; align-items: flex-start; }
  .hero-v1 .hero-trust, .hero-live .hero-trust { flex-wrap: wrap; gap: 20px; }

  /* services rows: drop the decorative pip and stack the track */
  .services-edit .row-item { grid-template-columns: 1fr; gap: 8px; }
  .services-edit .row-item .pip { display: none; }
}

@media (max-width: 640px) {
  /* The offer/contact pages set fixed column counts inline
     (repeat(3,1fr), 1fr 1fr, ...). Inline styles beat stylesheet rules,
     so these grids stayed multi-column on phones and pushed the page
     out to ~660px. !important is the only lever that reaches them, and
     it is scoped to phones so desktop layout is untouched. */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 380px) {
  /* clamp()'s 48px floor is wider than a 320px screen for the longest
     word ("Underperforming"), so the display type set the page width. */
  .triplet-opener .verbs { font-size: 38px; letter-spacing: -0.03em; }
  .container { width: calc(100% - 28px); }
}

/* ============================================================
   HERO POLISH
   ============================================================ */

/* .alcan .hero (0,2,0) out-specifies .hero-v2 (0,1,0), so every
   hero-v2 page needed an inline background to stay dark. Fix it once
   here instead. */
.alcan .hero-v2 { background: var(--ink-900); }

/* Banner photos vary in brightness (the About and Insights shots are lit
   far hotter than the What We Help plant photo), so the white hero copy
   cannot rely on the image alone. Scrim sits above .bg-image (z-index 1)
   and below .container (z-index 2). */
.hero-v2::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10,11,14,0.88) 0%, rgba(10,11,14,0.66) 46%, rgba(10,11,14,0.22) 100%);
}

/* "Live. Stable. Underperforming." — the dot is a separate inline-block,
   so it broke onto its own line after the longest word and the period
   appeared underneath rather than after it. */
.triplet-opener .verbs span { white-space: nowrap; }

/* Hero copy floats up on load. */
@keyframes heroFloatIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.hero-live .hero-live-copy,
.hero-v1 .hero-copy,
.hero-v1 .container > div,
.hero-v2 .copy {
  animation: heroFloatIn 720ms var(--ease-out) both;
}
.hero-v1 .hero-media, .hero-v2 .bg-image {
  animation: heroFloatIn 900ms var(--ease-out) both;
  animation-delay: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .hero-live .hero-live-copy,
  .hero-v1 .hero-copy,
  .hero-v1 .container > div,
  .hero-v2 .copy,
  .hero-v1 .hero-media, .hero-v2 .bg-image { animation: none; }
}