/* =============================================================================
 * 15th Anniversary page: scoped styles
 * Hybrid treatment: dramatic dark (plum) hero + evolution; light brand sections.
 * Reuses Integral Ed brand tokens from vendor/integralthemes/theme/tokens.css
 * ========================================================================== */

.anniv-body {
  --rail-w: 248px;
  --nav-offset: 88px;        /* clears the global sticky site nav */
  --ink-dark: #f4eef6;       /* light ink on dark plum */
  --ink-dark-2: #c9b6d2;
  --plum-950: #1c0420;
  --plum-900: #2a0730;
  --plum-800: #3a0a42;
  /* clip (not hidden) stops any wide child (e.g. the subway map's
     min-width SVG) from forcing horizontal page scroll, WITHOUT breaking
     the sticky rail the way overflow:hidden would. */
  overflow-x: clip;
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.anniv-layout {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  align-items: start;
}

.anniv-main { min-width: 0; }

/* ── Sticky left rail ───────────────────────────────────────────────────── */
.anniv-rail {
  position: sticky;
  top: 0;
  height: 100vh;
  background: linear-gradient(180deg, var(--plum-950), var(--plum-900));
  color: var(--ink-dark);
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.anniv-rail-inner {
  position: sticky;
  top: var(--nav-offset);
  padding: var(--spacing-lg) var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  max-height: calc(100vh - var(--nav-offset));
  overflow-y: auto;
}

/* On desktop the brand + (hidden) toggle flow as part of the rail column,
   and the panel is always open. The mobile breakpoint flips this to a
   collapsed menu. */
.anniv-rail-top { display: contents; }
.anniv-rail-toggle { display: none; }
.anniv-rail-panel { display: flex; flex-direction: column; gap: var(--spacing-lg); }

.anniv-rail-brand { display: block; text-decoration: none; color: inherit; }
.anniv-rail-15 {
  display: block;
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 0.9;
  background: linear-gradient(120deg, var(--accent-magenta), var(--accent-yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.anniv-rail-15-sub {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--ink-dark-2);
  margin-top: 0.35rem;
}

.anniv-rail-nav { list-style: none; margin: 0; padding: 0; }
.anniv-rail-nav li { margin: 0; }
.anniv-rail-nav a {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-dark-2);
  border-left: 2px solid transparent;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}
.anniv-rail-nav a:hover { color: var(--ink-dark); background: rgba(255, 255, 255, 0.05); }
.anniv-rail-nav .num {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  opacity: 0.7;
}
.anniv-rail-nav .lbl { font-size: 0.92rem; font-weight: 600; }
.anniv-rail-nav li.active a {
  color: #fff;
  border-left-color: var(--accent-yellow);
  background: rgba(255, 255, 255, 0.06);
}
.anniv-rail-nav li.active .num { opacity: 1; color: var(--accent-yellow); }

.anniv-rail-services-h {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dark-2);
  margin: 0 0 0.6rem;
}
.anniv-rail-services-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.anniv-rail-services-list a {
  color: var(--ink-dark-2);
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.28rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: color var(--transition-fast);
}
.anniv-rail-services-list li[class*="svc-"] a::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--svc-c, var(--accent-yellow));
  flex-shrink: 0;
}
.anniv-rail-services-list a:hover { color: var(--accent-yellow); }

/* ── Section scaffolding ────────────────────────────────────────────────── */
.anniv-section {
  position: relative;
  padding: var(--spacing-3xl) clamp(1.5rem, 5vw, 5rem);
  scroll-margin-top: var(--nav-offset);
  overflow: hidden;
}
.anniv-section--alt { background: var(--bg-tertiary); }
.anniv-section--dark {
  background: radial-gradient(120% 120% at 80% 0%, var(--plum-800), var(--plum-950));
  color: var(--ink-dark);
}
.anniv-section--dark h2 { color: #fff; }
/* Lede on the dark + CTA (plum) sections: a brighter lavender for legible
   contrast against the plum (the muted gray washed out). */
.anniv-section--dark .anniv-lede,
.anniv-section--cta .anniv-lede { color: #e3d4ef; }

.anniv-section-head { max-width: 900px; margin: 0 auto var(--spacing-2xl); text-align: left; }
.anniv-kicker {
  font-family: var(--font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-magenta);
}
.anniv-section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  margin: 0.6rem 0 0.8rem;
  line-height: 1.1;
}
.anniv-lede { font-size: 1.08rem; color: var(--text-tertiary); margin: 0.55rem 0 0; max-width: 52ch; }

/* ── "So what" intro band ───────────────────────────────────────────────── */
.anniv-sowhat { padding-top: var(--spacing-2xl); padding-bottom: var(--spacing-2xl); }
.anniv-sowhat-inner { max-width: 900px; margin: 0 auto; text-align: left; }
.anniv-sowhat-inner .anniv-kicker { display: inline-block; margin-bottom: 0.6rem; }
.anniv-sowhat-h {
  font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.05; font-weight: 800;
  margin: 0.2rem 0 1.3rem; color: var(--text-primary); letter-spacing: -0.01em;
}
.anniv-sowhat-you {
  background: linear-gradient(120deg, var(--accent-magenta), var(--accent-yellow));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
/* Two clean tiers: a lead paragraph, then uniform body. Constrained to a
   comfortable reading measure so lines don't sprawl at large widths. */
.anniv-sowhat-p {
  font-size: 1.05rem; line-height: 1.7; color: var(--text-secondary);
  margin: 0 0 1rem; max-width: 60ch;
}
.anniv-sowhat-p:first-of-type { font-size: 1.22rem; line-height: 1.55; color: var(--text-primary); }

/* Learning-objectives callout: a contained, left-aligned card */
.anniv-sowhat-callout {
  margin: 1.8rem 0; max-width: 460px; text-align: left;
  background: var(--bg-tertiary); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); padding: 1.25rem 1.5rem;
}
.anniv-sowhat-objintro { margin: 0 0 0.9rem; font-weight: 600; color: var(--text-primary); font-size: 0.98rem; }
.anniv-sowhat-obj { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.7rem; text-align: left; }
.anniv-sowhat-obj li { font-size: 1.02rem; color: var(--text-secondary); }

/* Storyline-style tickable checkboxes for the learning objectives */
.anniv-check { display: flex; align-items: center; gap: 0.75rem; cursor: pointer; }
.anniv-check-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.anniv-check-box {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 6px;
  border: 2px solid color-mix(in srgb, var(--color-plum) 50%, var(--border-light));
  background: #fff; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
  display: inline-flex; align-items: center; justify-content: center; color: #fff;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.anniv-check-box svg {
  width: 1rem; height: 1rem; opacity: 0; transform: scale(.3);
  transition: opacity .16s ease, transform .22s cubic-bezier(.2,1.5,.4,1);
}
.anniv-check:hover .anniv-check-box { transform: scale(1.06); border-color: var(--color-plum); }
.anniv-check-input:checked + .anniv-check-box { background: var(--color-plum); border-color: var(--color-plum); }
.anniv-check-input:checked + .anniv-check-box svg { opacity: 1; transform: scale(1); }
.anniv-check-input:focus-visible + .anniv-check-box {
  outline: 3px solid color-mix(in srgb, var(--color-plum) 40%, transparent); outline-offset: 2px;
}
.anniv-check-input:checked ~ .anniv-check-label { color: var(--text-primary); }
.anniv-check-label { transition: color .18s ease; }
.anniv-sowhat-cta {
  display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.4rem;
  padding: 0.85rem 1.5rem; border-radius: 999px;
  background: var(--color-plum); color: #fff; font-weight: 700; font-size: 1.05rem;
  text-decoration: none; transition: transform .15s ease, background .15s ease;
}
.anniv-sowhat-cta:hover { background: color-mix(in srgb, var(--color-plum) 84%, #000); transform: translateY(-1px); }

/* ── Hero (intro) ───────────────────────────────────────────────────────── */
.anniv-hero {
  position: relative;
  min-height: calc(100vh - var(--nav-offset));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--spacing-3xl) clamp(1.5rem, 5vw, 5rem);
  background: radial-gradient(130% 120% at 50% -10%, var(--plum-800), var(--plum-950) 70%);
  color: var(--ink-dark);
  scroll-margin-top: var(--nav-offset);
  overflow: hidden;
}
/* width:100% is essential: as a centered flex item (.anniv-hero uses
   align-items:center) with only max-width set, this box would otherwise
   size to its max-content (the unwrapped headline ~900px) and overflow
   narrow viewports. width:100% caps it to the available width so the
   headline, subhead, and counters all wrap to the phone. */
.anniv-hero-content { position: relative; z-index: 2; width: 100%; max-width: 900px; }
.anniv-eyebrow {
  font-family: var(--font-mono, monospace);
  letter-spacing: 0.3em;
  font-size: 0.8rem;
  color: var(--accent-yellow);
  margin: 0 0 1rem;
}
.anniv-hero-title {
  font-size: clamp(2rem, 5.5vw, 4.4rem);
  line-height: 1.07;
  margin: 0 0 1.2rem;
  color: #fff;
  font-weight: 800;
  overflow-wrap: break-word;
  hyphens: auto;
}
.grad-magenta { color: var(--accent-magenta); }
.grad-yellow  { color: var(--accent-yellow); }
.grad-teal    { color: var(--accent-teal); }
.anniv-hero-sub { font-size: 1.15rem; color: var(--ink-dark-2); max-width: 640px; margin: 0 auto 2.4rem; }

/* glow blobs */
.anniv-hero-bgfx { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.anniv-hero-bgfx--soft { opacity: 0.5; }
.glow-blob {
  position: absolute;
  width: 46vw; height: 46vw; max-width: 620px; max-height: 620px;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: anniv-float 14s ease-in-out infinite;
}
.blob-plum    { background: var(--color-plum);    top: -8%;  left: 8%; }
.blob-magenta { background: var(--accent-magenta); bottom: -12%; right: 6%; animation-delay: -4s; }
.blob-teal    { background: var(--accent-teal);    top: 30%;  right: 22%; animation-delay: -8s; }
@keyframes anniv-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(2%, -4%) scale(1.08); }
}

/* counters */
.anniv-counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-lg);
  max-width: 760px;
  margin: 0 auto;
}
.anniv-counter-num {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  background: linear-gradient(120deg, var(--accent-yellow), var(--accent-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.anniv-counter-label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--ink-dark-2);
}
.anniv-scroll-cue {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 2; color: var(--ink-dark-2); font-size: 1.4rem; text-decoration: none;
  animation: anniv-bounce 2s infinite;
}
@keyframes anniv-bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,8px)} }

/* ── Timeline ───────────────────────────────────────────────────────────── */
.anniv-timeline { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; position: relative; }
.anniv-timeline::before {
  content: ""; position: absolute; left: 18px; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(var(--accent-magenta), var(--accent-teal));
}
.anniv-tl-item { position: relative; padding: 0 0 var(--spacing-xl) 56px; }
.anniv-tl-dot {
  position: absolute; left: 9px; top: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg-primary); border: 3px solid var(--accent-magenta);
}
.anniv-tl-year { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--color-plum); }
.anniv-tl-tag {
  display: inline-block; margin-left: 0.6rem; font-size: 0.65rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.15rem 0.55rem; border-radius: 999px;
  background: var(--bg-accent); color: var(--color-plum); vertical-align: middle;
}
.anniv-tl-title { margin: 0.3rem 0 0.4rem; font-size: 1.15rem; }
.anniv-tl-body { margin: 0; color: var(--text-secondary); }
.anniv-tl-intro { margin: 0 0 0.6rem; color: var(--text-tertiary); font-size: 0.95rem; }
.anniv-tl-img { margin-top: 0.8rem; max-width: 320px; width: 100%; border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

/* ── Split year sub-events: stacked under the year header, each with its
   own small color dot (per event.svc), theme label, body, and chips. ──── */
.anniv-tl-events {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.anniv-tl-event {
  position: relative;
  padding: 0.6rem 0 0.7rem 1.5rem;
  border-left: 2px solid color-mix(in srgb, var(--svc-c, var(--color-plum)) 35%, transparent);
}
.anniv-tl-event-dot {
  position: absolute;
  left: -7px;
  top: 0.85rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--svc-c, var(--color-plum));
  box-shadow: 0 0 0 3px var(--bg-primary),
              0 0 0 5px color-mix(in srgb, var(--svc-c, var(--color-plum)) 18%, transparent);
}
.anniv-tl-event-theme {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--svc-c, var(--color-plum));
}
.anniv-tl-event-body {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}
.anniv-tl-event .anniv-tl-chips {
  margin-top: 0.55rem;
}

/* ── "New to the team" note: one consistent marker per year with hires.
   On narrow screens it sits in-flow at the foot of the entry; from 920px
   up it moves to a RIGHT RAIL that runs parallel to the main timeline
   column, so hires read as their own track alongside the story. ───────── */
.anniv-tl-joins {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.8rem 0 0;
  font-size: 0.92rem;
}
.anniv-tl-joins-label {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-magenta);
  border: 1px solid color-mix(in srgb, var(--accent-magenta) 40%, transparent);
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
}
.anniv-tl-joins-label::before {
  content: "+";
  margin-right: 0.3rem;
  font-weight: 800;
}
.anniv-tl-joins-names { color: var(--text-secondary); }
.anniv-tl-join-name { display: inline; }
.anniv-tl-join-name:not(:last-child)::after { content: ", "; color: var(--text-tertiary); }

/* Desktop: the joins note becomes an absolutely-positioned right gutter.
   IMPORTANT: do NOT grid/flex the .anniv-tl-item itself. Its children
   (year, tag pill, title) rely on normal inline flow; turning them into
   grid items stretches the pill full-width and breaks the dot geometry.
   The item is already position: relative, so an absolute gutter keeps the
   main column's layout untouched at every width. Breakpoint at 1024px so
   tablets keep the in-flow note; the rail only engages where the main
   column still gets comfortable reading width. */
@media (min-width: 1024px) {
  .anniv-timeline { max-width: 1120px; }
  /* Reserve the gutter on every entry so the main column width is uniform
     down the whole timeline, with or without hires. */
  .anniv-tl-item { padding-right: 264px; }
  /* Guard: an entry with a short body but several hires must stay tall
     enough that its rail note can't bleed into the next entry. */
  .anniv-tl-item:has(> .anniv-tl-joins) { min-height: 9.5rem; }
  .anniv-tl-item > .anniv-tl-joins {
    position: absolute;
    top: 0.3rem;
    right: 0;
    width: 220px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0 0 0 1rem;
    border-left: 2px solid color-mix(in srgb, var(--accent-magenta) 30%, transparent);
  }
  .anniv-tl-item > .anniv-tl-joins .anniv-tl-joins-names {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .anniv-tl-item > .anniv-tl-joins .anniv-tl-join-name { display: block; }
  .anniv-tl-item > .anniv-tl-joins .anniv-tl-join-name::after { content: none; }
}

/* Sections are positioning contexts (for tour spotlights, glow blobs, etc.) */
.anniv-main section[id] { position: relative; }

/* ── Confetti burst on "celebrate" timeline entries (2026) ──────────────── */
.anniv-tl-item--celebrate { position: relative; }
.anniv-confetti {
  position: absolute;
  inset: -2.5rem 0 0 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}
.anniv-confetti i {
  position: absolute;
  top: 0;
  left: var(--x, 50%);
  width: 9px;
  height: 14px;
  background: var(--c, var(--accent-magenta));
  border-radius: 2px;
  opacity: 0;
  transform: translateY(-10px) rotate(0deg) scale(var(--s, 1));
  animation: anniv-confetti-fall 2.6s cubic-bezier(.25,.46,.45,.94) var(--d, 0s) forwards;
}
/* every third piece is a circle, every fourth a thin ribbon */
.anniv-confetti i:nth-child(3n)  { border-radius: 50%; height: 9px; }
.anniv-confetti i:nth-child(4n)  { width: 5px; height: 18px; }
@keyframes anniv-confetti-fall {
  0%   { opacity: 0; transform: translateY(-12px) rotate(0deg) scale(var(--s, 1)); }
  8%   { opacity: 1; }
  100% { opacity: 0; transform: translateY(260px) rotate(var(--r, 360deg)) scale(var(--s, 1)); }
}
@media (prefers-reduced-motion: reduce) {
  .anniv-confetti { display: none; }
}

/* ── Evolution: subway-map weave ─────────────────────────────────────────── */
.anniv-evolution { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }

/* brand colors mapped to each stream */
.evo-blue    { --evo-c: var(--accent-blue); }
.evo-teal    { --evo-c: var(--accent-teal); }
.evo-yellow  { --evo-c: var(--accent-yellow); }
.evo-magenta { --evo-c: var(--accent-magenta); }
.evo-plum    { --evo-c: var(--primary-light, #b066bd); }
.evo-sky     { --evo-c: #58b0e3; }
.evo-orange  { --evo-c: #f08a3e; }
/* Silver: the founding data stream. Freed up blue for the Growth Strategy
   & Marketing stream so the map matches the service palette. */
.evo-silver  { --evo-c: #c9d3e4; }

/* ── Service palette: one color per service area, reused across blocks.
   Same values as the evo-* swatches so the timeline, the work cards, and
   the "What we do today" list all read as one palette. */
.svc-elearning { --svc-c: var(--accent-yellow); }
.svc-technical { --svc-c: #f08a3e; }
.svc-career    { --svc-c: var(--accent-teal); }
.svc-growth    { --svc-c: var(--accent-blue); }
.svc-platforms { --svc-c: #58b0e3; }
.svc-media     { --svc-c: var(--accent-magenta); }

/* ── Shared chip shape used on the timeline (highlights), project cards
      (service tag), and the services list. Each instance sets --svc-c
      via one of the .svc-* classes above. */
.svc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--svc-c, var(--color-plum)) 14%, transparent);
  color: color-mix(in srgb, var(--svc-c, var(--color-plum)) 78%, #2a1133);
  border: 1px solid color-mix(in srgb, var(--svc-c, var(--color-plum)) 38%, transparent);
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.svc-chip::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--svc-c, var(--color-plum));
}
a.svc-chip, button.svc-chip { cursor: pointer; }
a.svc-chip:hover, a.svc-chip:focus-visible,
button.svc-chip:hover, button.svc-chip:focus-visible {
  background: var(--svc-c, var(--color-plum));
  color: #fff;
  border-color: var(--svc-c, var(--color-plum));
  outline: none;
}
a.svc-chip:hover::before, a.svc-chip:focus-visible::before,
button.svc-chip:hover::before, button.svc-chip:focus-visible::before {
  background: #fff;
}
/* Dark-section variant: chip darkens slightly so the swatch reads against plum bg */
.anniv-section--dark .svc-chip, .anniv-hero .svc-chip, .anniv-section--cta .svc-chip {
  background: color-mix(in srgb, var(--svc-c, var(--color-plum)) 22%, transparent);
  color: #fff;
  border-color: color-mix(in srgb, var(--svc-c, var(--color-plum)) 60%, transparent);
}

/* Timeline chip cluster: sits below body, before image */
.anniv-tl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.7rem 0 0;
}

.anniv-subway-wrap { overflow-x: auto; margin-bottom: var(--spacing-2xl); -webkit-overflow-scrolling: touch; }
.anniv-subway { display: block; width: 100%; min-width: 680px; height: auto; overflow: visible; }

/* In portrait / narrow widths the map is narrower than its 680px min and
   ends up scrolling or clipped, reading "off." The legend cards below
   carry every stream's full detail (year, stage, what we could do, proof),
   so hide the map there and let the legend stand. Landscape phones and up
   (>=680px) keep the map. */
@media (max-width: 680px) {
  .anniv-subway-wrap { display: none; }
  .anniv-evo-list { margin-top: 0.5rem; }
}

.anniv-subway-axis { stroke: rgba(255,255,255,0.18); stroke-width: 1.5; }
.anniv-subway-grid { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
.anniv-subway-tick { fill: var(--ink-dark-2); font-family: var(--font-mono, monospace); font-size: 13px; text-anchor: middle; }

.anniv-subway-line { transition: opacity var(--transition-base); }
.anniv-subway-path {
  fill: none; stroke: var(--evo-c); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--evo-c) 55%, transparent));
}
.anniv-subway-stop { fill: var(--plum-950); stroke: var(--evo-c); stroke-width: 4; }
.anniv-subway-term { fill: var(--evo-c); }
.anniv-subway-label { fill: #fff; font-weight: 700; font-size: 15px; }
.anniv-subway-yr { fill: var(--evo-c); font-family: var(--font-mono, monospace); font-size: 12px; }
.anniv-subway-today { fill: var(--accent-yellow); font-weight: 800; font-size: 15px; }
.anniv-subway-today-sub { fill: var(--ink-dark-2); font-size: 11px; }

/* draw-in animation (lengths/offsets set inline by JS) */
.anniv-subway-path { transition: stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1); }
.anniv-subway-wrap.is-drawn .anniv-subway-path { stroke-dashoffset: 0 !important; }

/* Subway hover: thicken the hovered line, but DON'T dim the rest (per the
   user ask to keep everything vibrant). */
.anniv-subway-line:hover .anniv-subway-path { stroke-width: 7; }

/* Map line <-> legend card hover sync. Hovering either one spotlights both:
   the line thickens + glows, the card mimics its hover state (lift + proof
   reveal handled below alongside the :hover rules). */
.anniv-subway-line.is-spotlit .anniv-subway-path {
  stroke-width: 7;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--evo-c) 80%, transparent));
}
.anniv-subway-line { cursor: pointer; }

/* ── Legend cards: vibrant at rest, proof slides in from below on hover ───
   At rest each card carries a tinted gradient in its stream's color so the
   block reads as colorful, not muted. On hover the card lifts and the
   "proof" detail expands from beneath. */
.anniv-evo-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; max-width: 960px; margin: 0 auto; }
.anniv-evo-row {
  display: flex;
  gap: 0.8rem;
  padding: 1.15rem 1.2rem;
  border-radius: var(--radius-md);
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--evo-c) 22%, transparent),
      color-mix(in srgb, var(--evo-c) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--evo-c) 32%, transparent);
  border-top: 4px solid var(--evo-c);
  position: relative;
  cursor: default;
  transition: transform var(--transition-base),
              border-color var(--transition-base),
              background var(--transition-base),
              box-shadow var(--transition-base);
}
.anniv-evo-row:hover,
.anniv-evo-row:focus-within,
.anniv-evo-row.is-spotlit {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--evo-c) 68%, transparent);
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--evo-c) 32%, transparent),
      color-mix(in srgb, var(--evo-c) 10%, transparent));
  box-shadow: 0 12px 32px color-mix(in srgb, var(--evo-c) 28%, rgba(0,0,0,0.35));
}
.anniv-evo-swatch { flex: 0 0 auto; width: 12px; height: 12px; margin-top: 0.35rem; border-radius: 50%; background: var(--evo-c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--evo-c) 22%, transparent); }
.anniv-evo-rowmain { min-width: 0; }
.anniv-evo-top { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.anniv-evo-year { font-family: var(--font-mono, monospace); color: var(--accent-yellow); font-size: 0.85rem; }
.anniv-evo-stage { font-size: 1.05rem; font-weight: 700; color: #fff; }
.anniv-evo-tagline { color: #fff; opacity: 0.85; font-size: 0.85rem; }
.anniv-evo-what { color: #fff; opacity: 0.92; margin: 0.4rem 0 0; font-size: 0.92rem; }

/* "Proof" is the example detail. Hidden at rest; pops in from below on
   hover/focus. On touch devices (no hover) it's always visible. */
.anniv-evo-proof {
  font-size: 0.85rem;
  color: #fff;
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(.4,0,.2,1),
              opacity 0.3s ease,
              margin-top 0.3s ease;
}
.anniv-evo-row:hover .anniv-evo-proof,
.anniv-evo-row:focus-within .anniv-evo-proof,
.anniv-evo-row.is-spotlit .anniv-evo-proof {
  max-height: 14rem;
  opacity: 1;
  margin-top: 0.55rem;
}
@media (hover: none) {
  .anniv-evo-proof {
    max-height: none;
    opacity: 0.92;
    margin-top: 0.4rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .anniv-evo-row, .anniv-evo-proof { transition: none; }
}

/* ── Projects ───────────────────────────────────────────────────────────── */
.anniv-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--spacing-lg); max-width: 900px; margin: 0 auto; }
.anniv-project {
  background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.anniv-project:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.anniv-project-media { aspect-ratio: 16/9; background: var(--bg-secondary); }
.anniv-project-media img, .anniv-project-media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.anniv-project-body { padding: var(--spacing-md); }
.anniv-project-svc { margin: 0 0 0.5rem; display: inline-flex; }
.anniv-project-meta { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-magenta); }
.anniv-project-title { margin: 0.3rem 0 0.5rem; font-size: 1.15rem; }
.anniv-project-summary { margin: 0; color: var(--text-secondary); font-size: 0.95rem; }
.anniv-project-link { display: inline-block; margin-top: 0.7rem; color: var(--color-plum); font-weight: 600; text-decoration: none; }
.anniv-project-link:hover { text-decoration: underline; }
/* whole-card link / button */
a.anniv-project, a.anniv-project:visited { text-decoration: none; color: inherit; display: block; }
.anniv-project--link { cursor: pointer; }
.anniv-project-cta {
  display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.8rem;
  color: var(--color-plum); font-weight: 700; font-size: 0.92rem;
}
.anniv-project--link:hover .anniv-project-cta { text-decoration: underline; }
.anniv-project--link:focus-visible { outline: 3px solid var(--accent-magenta); outline-offset: 2px; }

/* ── Work modal ─────────────────────────────────────────────────────────── */
html.anniv-modal-open { overflow: hidden; }
.anniv-modal {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: clamp(0.8rem, 3vw, 2.2rem);
  opacity: 0; transition: opacity 0.2s ease;
}
/* The base rule sets display:flex, which overrides the user-agent
   [hidden] { display: none }. Without this rule the overlay stays
   inset:0 fixed even when hidden, swallowing clicks on the page below
   so subsequent ref-links / project cards stop responding. */
.anniv-modal[hidden] { display: none; }
.anniv-modal.is-on { opacity: 1; }
.anniv-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 10, 28, 0.66); backdrop-filter: blur(3px); }
.anniv-modal-card {
  position: relative; z-index: 1; width: min(760px, 100%); max-height: 90vh; overflow-y: auto;
  background: var(--bg-primary); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  transform: translateY(14px) scale(0.985); transition: transform 0.2s ease;
}
.anniv-modal.is-on .anniv-modal-card { transform: none; }
/* live demo embeds (Storyline stories, web apps) need a bigger frame than a
   16:9 video, or their fixed-size player scrolls/clips (e.g. Uncovering Barriers,
   Career Ikigai). Widen the card and give the iframe a tall box. */
.anniv-modal-card--demo { width: min(1080px, 100%); }
.anniv-modal-card--demo .anniv-modal-media { aspect-ratio: auto; height: min(74vh, 720px); }
.anniv-modal-card--demo .anniv-modal-media iframe { object-fit: fill; }
.anniv-modal-close {
  position: absolute; top: 0.6rem; right: 0.6rem; width: 2.2rem; height: 2.2rem; border: 0; cursor: pointer;
  background: var(--bg-secondary); border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--text-secondary);
}
.anniv-modal-close:hover { background: var(--border-light); color: var(--text-primary); }
.anniv-modal-meta { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-magenta); }
.anniv-modal-meta:empty { display: none; }
.anniv-modal-title { margin: 0.3rem 2rem 0.9rem 0; font-size: clamp(1.3rem, 3vw, 1.7rem); }
.anniv-modal-media { aspect-ratio: 16/9; background: var(--bg-secondary); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1.1rem; }
.anniv-modal-media[hidden] { display: none; }
.anniv-modal-media img, .anniv-modal-media iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
/* When the media is a still image (infographics, mockups), let the natural
   aspect ratio decide. Cropping a tall infographic to 16:9 hides the point. */
.anniv-modal-media:has(img) { aspect-ratio: auto; background: transparent; }
.anniv-modal-media:has(img) img { height: auto; max-height: 70vh; object-fit: contain; }
/* Logos and small cover marks (SVG) are usually transparent and small, so
   give them a tinted background and a comfortable bounding box rather than
   letting them render at their intrinsic 1-inch size. */
.anniv-modal-media:has(img[src$=".svg"]) {
  background: var(--bg-tertiary, #f5f5f5);
  padding: 2.4rem 1.5rem;
}
.anniv-modal-media:has(img[src$=".svg"]) img {
  max-height: 160px;
  max-width: 360px;
  margin: 0 auto;
}
.anniv-modal-body { color: var(--text-secondary); font-size: 1rem; line-height: 1.6; }
.anniv-modal-body p { margin: 0 0 0.8rem; }
.anniv-modal-actions { margin-top: 1.2rem; }
.anniv-modal-actions:empty { display: none; }
.anniv-modal-btn {
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.7rem 1.2rem; border-radius: 999px;
  background: var(--color-plum); color: #fff; font-weight: 700; text-decoration: none; font-size: 0.95rem;
}
.anniv-modal-btn:hover { background: color-mix(in srgb, var(--color-plum) 84%, #000); }
@media (prefers-reduced-motion: reduce) {
  .anniv-modal, .anniv-modal-card { transition: none; }
}

/* ── Tenure chart ───────────────────────────────────────────────────────── */
.anniv-tenure { max-width: 760px; margin: 0 auto var(--spacing-2xl); display: grid; gap: 0.7rem; }
.anniv-tenure-row { display: grid; grid-template-columns: 3.4rem 1fr 2.6rem; align-items: center; gap: 0.8rem; }
.anniv-tenure-year { font-family: var(--font-mono, monospace); font-size: 0.85rem; color: var(--text-tertiary); }
.anniv-tenure-bar { height: 22px; background: var(--bg-secondary); border-radius: 999px; overflow: hidden; }
.anniv-tenure-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-teal), var(--color-plum)); border-radius: 999px; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.anniv-tenure-row.is-visible .anniv-tenure-bar > i { width: var(--w); }
.anniv-tenure-val { font-weight: 700; text-align: right; }

/* ── Team cards (photo reveal on hover, link to vanity profile) ──────────── */
/* Team is a horizontal carousel: scroll/swipe through everyone, with arrows on
   desktop. Cards are fixed-width snap items. */
.anniv-team-holder { position: relative; }
.anniv-team {
  display: flex; gap: var(--spacing-md);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 0.4rem 0.25rem 1.3rem;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.anniv-team > .anniv-member { flex: 0 0 auto; width: clamp(152px, 44vw, 186px); scroll-snap-align: start; }
.anniv-team-arrow {
  position: absolute; top: calc(50% - 1rem); transform: translateY(-50%); z-index: 6;
  width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 1px solid var(--border-light);
  background: var(--bg-primary); color: var(--text-primary); cursor: pointer; font-size: 1.15rem;
  box-shadow: var(--shadow-md); display: none; align-items: center; justify-content: center;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.anniv-team-holder.has-overflow .anniv-team-arrow { display: inline-flex; }
.anniv-team-arrow--prev { left: -0.6rem; }
.anniv-team-arrow--next { right: -0.6rem; }
.anniv-team-arrow:hover:not(:disabled) { transform: translateY(-50%) scale(1.08); }
.anniv-team-arrow:disabled { opacity: 0.25; cursor: default; }

/* Subtle "join our team" line under the team carousel */
.anniv-team-join { margin: var(--spacing-lg) 0 0; font-size: 0.95rem; color: var(--text-secondary); }
.anniv-team-join a { color: var(--color-plum); font-weight: 700; text-decoration: none; }
.anniv-team-join a:hover { text-decoration: underline; }
.anniv-member {
  display: block; text-decoration: none; color: inherit; border-radius: var(--radius-lg);
  overflow: hidden; background: var(--bg-primary); border: 1px solid var(--border-light);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.anniv-member.is-visible { transition-delay: var(--d, 0ms); }
a.anniv-member:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg, 0 14px 40px rgba(96,11,104,0.18)); }

.anniv-member-frame {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: linear-gradient(140deg, var(--color-plum), var(--accent-magenta));
  display: flex; align-items: center; justify-content: center;
}
.anniv-member-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: grayscale(0.35) contrast(1.02); transition: filter var(--transition-base), transform var(--transition-base);
}
a.anniv-member:hover .anniv-member-photo { filter: grayscale(0); transform: scale(1.06); }
.anniv-member-initials { font-size: 2.4rem; font-weight: 800; color: rgba(255,255,255,0.9); letter-spacing: 0.04em; }

.anniv-member-badge {
  position: absolute; top: 0.55rem; right: 0.55rem; z-index: 2;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; color: var(--color-plum);
  background: var(--color-yellow); padding: 0.18rem 0.5rem; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.anniv-member-cta {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.6rem 0.7rem 0.6rem;
  font-size: 0.78rem; font-weight: 700; color: #fff; text-align: center;
  background: linear-gradient(to top, rgba(28,4,32,0.82), transparent);
  opacity: 0; transform: translateY(8px); transition: opacity var(--transition-base), transform var(--transition-base);
}
a.anniv-member:hover .anniv-member-cta { opacity: 1; transform: translateY(0); }

.anniv-member-info { padding: 0.7rem 0.8rem 0.85rem; }
.anniv-member-name { display: block; font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.anniv-member-role { display: block; color: var(--text-tertiary); font-size: 0.78rem; margin-top: 0.15rem; line-height: 1.3; }

/* ── Desktop "featured + grid" team ──────────────────────────────────────────
   Below 980px the markup is the mobile carousel (feature panel hidden). At
   980px+ the stage becomes two columns: a large featured teammate beside a
   wrapping grid of faces; hover/click a face to feature it. */
.anniv-team-feature { display: none; }
@media (min-width: 980px) {
  .anniv-team-stage {
    display: grid; grid-template-columns: minmax(280px, 330px) 1fr;
    gap: var(--spacing-xl); align-items: start;
  }
  .anniv-team-feature {
    display: block; position: sticky; top: calc(var(--nav-offset) + 1rem);
    background: var(--bg-primary); border: 1px solid var(--border-light);
    border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md);
  }
  .anniv-team-feature-frame {
    aspect-ratio: 4 / 5; overflow: hidden;
    background: linear-gradient(140deg, var(--color-plum), var(--accent-magenta));
    display: flex; align-items: center; justify-content: center;
  }
  .anniv-team-feature-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
  .anniv-team-feature-body { padding: 1.1rem 1.3rem 1.4rem; }
  .anniv-team-feature-badge {
    display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em;
    color: var(--color-plum); background: var(--color-yellow);
    padding: 0.2rem 0.6rem; border-radius: 999px;
  }
  .anniv-team-feature-name { margin: 0.55rem 0 0.15rem; font-size: 1.55rem; line-height: 1.1; }
  .anniv-team-feature-role { margin: 0 0 0.85rem; color: var(--text-secondary); font-size: 0.98rem; }
  .anniv-team-feature-link { color: var(--color-plum); font-weight: 700; text-decoration: none; font-size: 0.95rem; }
  .anniv-team-feature-link:hover { text-decoration: underline; }

  /* the grid of faces (no carousel scroll/arrows on desktop) */
  .anniv-team-holder .anniv-team-arrow { display: none !important; }
  .anniv-team {
    display: grid !important; overflow: visible !important;
    grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
    gap: 0.7rem; padding: 0.2rem 0 0; scroll-snap-type: none;
  }
  .anniv-team > .anniv-member { width: auto !important; cursor: pointer; }
  .anniv-team > .anniv-member .anniv-member-cta { display: none; }
  .anniv-team > .anniv-member .anniv-member-info { padding: 0.45rem 0.55rem 0.6rem; }
  .anniv-team > .anniv-member .anniv-member-name { font-size: 0.8rem; }
  .anniv-team > .anniv-member .anniv-member-role { display: none; }
  .anniv-team > .anniv-member.is-featured { outline: 2px solid var(--color-plum); outline-offset: 1px; }
}

/* ── Clients: 2x2 testimonial grid ──────────────────────────────────────
   Each card carries its own svc-* class so a top color band + decorative
   quote mark take on that client's hue. Distinct color per card makes the
   four feel differentiated at a glance instead of a uniform wall. */
.anniv-clients-featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-xl);
  max-width: 900px;
  margin: var(--spacing-xl) auto var(--spacing-2xl);
}

.anniv-client-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 2rem 2rem 1.6rem;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.anniv-client-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

/* Top color band picks up --svc-c from the per-card svc-* class */
.anniv-client-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: var(--svc-c, var(--color-plum));
}

/* Decorative oversized quote mark, low-opacity in the svc color */
.anniv-client-mark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 0.7;
  color: var(--svc-c, var(--color-plum));
  opacity: 0.28;
  margin: 0.4rem 0 -0.6rem;
  user-select: none;
}

.anniv-client-quote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--text-primary);
  font-style: normal;
}

.anniv-client-attribution {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.anniv-client-attribution strong {
  display: inline;
  color: var(--text-primary);
  font-weight: 700;
}

.anniv-client-story {
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

.anniv-client-logo {
  display: block;
  max-height: 36px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  margin-top: auto;
  align-self: flex-start;
  opacity: 0.85;
}

.anniv-client-name {
  margin-top: auto;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--svc-c, var(--color-plum));
}

/* Stack to a single column at narrower widths so each testimonial keeps
   the same proportional balance as on desktop. */
@media (max-width: 820px) {
  .anniv-clients-featured {
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
  }
  .anniv-client-card { padding: 1.6rem 1.6rem 1.3rem; }
  .anniv-client-mark { font-size: 3.6rem; }
}
.anniv-logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--spacing-lg); align-items: center; justify-items: center; }
.anniv-logos img { max-width: 130px; max-height: 56px; object-fit: contain; filter: grayscale(1); opacity: 0.7; transition: filter var(--transition-base), opacity var(--transition-base); }
.anniv-logos img:hover { filter: grayscale(0); opacity: 1; }

/* ── Service areas (Today) + CTA ────────────────────────────────────────── */
.anniv-section--cta { background: radial-gradient(120% 120% at 20% 0%, var(--plum-800), var(--plum-950)); color: var(--ink-dark); }
.anniv-section--cta h2 { color: #fff; }
.anniv-services { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--spacing-md); max-width: 900px; margin: 0 auto var(--spacing-2xl); }
.anniv-service {
  display: block; padding: var(--spacing-md); border-radius: var(--radius-md); text-decoration: none;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: #fff;
  transition: background var(--transition-fast), transform var(--transition-fast);
  /* When the anchor also carries a .svc-* class, the left edge becomes the
     service color so the legend reads at a glance against the dark plum. */
  border-left: 4px solid var(--svc-c, rgba(255,255,255,0.25));
}
.anniv-service:hover { background: rgba(255,255,255,0.1); transform: translateY(-3px); }
.anniv-service-name { font-weight: 700; }
.anniv-service-arrow { color: var(--accent-yellow); }
/* Closing CTA: the scroll-mode twin of the tour finale card (white card on the
   dark Today section), so both endings read the same. */
.anniv-cta-box {
  text-align: center; max-width: 620px; margin: 0 auto;
  background: var(--bg-primary); border-radius: var(--radius-lg);
  box-shadow: 0 30px 80px rgba(0,0,0,0.4); padding: clamp(1.8rem, 4vw, 2.8rem);
}
.anniv-cta-kicker { font-family: var(--font-mono, monospace); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-magenta); margin: 0; }
.anniv-cta-box h3 { font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--text-primary); margin: 0.45rem 0 0.6rem; }
.anniv-cta-sub { color: var(--text-secondary); margin: 0 auto 1.5rem; max-width: 44ch; }
.anniv-cta-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.anniv-cta-tourlink {
  display: inline-block; margin-top: 1.25rem; background: none; border: 0; padding: 0;
  color: var(--text-tertiary); font-size: 0.85rem; font-family: inherit; cursor: pointer; text-decoration: underline;
}
.anniv-cta-tourlink:hover { color: var(--text-primary); }

/* ── Reveal-on-scroll ───────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ── Empty-state hint (shown when data not yet filled in) ───────────────── */
.anniv-empty {
  border: 1px dashed var(--border-medium); border-radius: var(--radius-md);
  padding: var(--spacing-lg); text-align: center; color: var(--text-tertiary);
  font-size: 0.9rem; grid-column: 1 / -1; max-width: 760px; margin: 0 auto;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Below 880px the sticky left rail collapses into a compact bar with a
   hamburger menu icon; tapping it drops down the section nav + services. */
@media (max-width: 880px) {
  .anniv-layout { grid-template-columns: 1fr; }
  .anniv-rail {
    position: sticky; top: var(--nav-offset); z-index: 60;
    height: auto; border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .anniv-rail-inner {
    position: static; max-height: none; overflow: visible;
    flex-direction: column; gap: 0; padding: 0.55rem clamp(1rem, 4vw, 2rem);
  }
  .anniv-rail-top {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .anniv-rail-brand { display: flex; align-items: baseline; gap: 0.55rem; }
  .anniv-rail-15 { font-size: 1.7rem; }
  .anniv-rail-15-sub { margin-top: 0; }

  .anniv-rail-toggle {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: rgba(255,255,255,0.08); color: var(--ink-dark);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 999px;
    padding: 0.45rem 0.85rem; font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.04em; cursor: pointer; transition: background var(--transition-fast);
  }
  .anniv-rail-toggle:hover { background: rgba(255,255,255,0.14); }
  .anniv-rail-toggle-bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; width: 16px; height: 12px; }
  .anniv-rail-toggle-bars span { display: block; height: 2px; width: 100%; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
  .anniv-rail.is-open .anniv-rail-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .anniv-rail.is-open .anniv-rail-toggle-bars span:nth-child(2) { opacity: 0; }
  .anniv-rail.is-open .anniv-rail-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

  .anniv-rail-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    background: linear-gradient(180deg, var(--plum-900), var(--plum-950));
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 16px 40px rgba(0,0,0,0.45);
    gap: 0; padding: 0 clamp(1rem, 4vw, 2rem);
    max-height: 0; overflow: hidden;
    transition: max-height .28s ease, padding .28s ease;
  }
  .anniv-rail.is-open .anniv-rail-panel {
    max-height: 78vh; overflow-y: auto;
    padding: 0.7rem clamp(1rem, 4vw, 2rem) 1.1rem;
  }
  .anniv-rail-nav { display: block; }
  .anniv-rail-nav a { padding: 0.7rem 0.6rem; }
  .anniv-rail-services { display: block; margin-top: 1rem; }
}

/* Phone polish: tighten the hero so the headline + counters breathe and
   the four counters settle into a clean 2x2. */
@media (max-width: 600px) {
  .anniv-hero { padding: var(--spacing-2xl) 1.25rem; min-height: auto; }
  .anniv-hero-sub { font-size: 1.02rem; margin-bottom: 1.8rem; }
  .anniv-counters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-md) var(--spacing-sm);
    max-width: 420px;
  }
  .anniv-counter-label { font-size: 0.78rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .anniv-evo-bar > i, .anniv-tenure-bar > i, .glow-blob, .anniv-scroll-cue { transition: none; animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Project links (video + case study) ─────────────────────────────────── */
.anniv-project-links { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; }

/* ── Teammate name auto-links + hover/focus preview ──────────────────────── */
.anniv-name {
  font-weight: 700; color: var(--accent-magenta); text-decoration: none;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent-magenta) 55%, transparent);
  cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast);
}
.anniv-name:hover, .anniv-name:focus-visible { color: var(--accent-yellow); border-bottom-color: var(--accent-yellow); outline: none; }
.anniv-name--plain { color: inherit; border-bottom: 0; cursor: default; }
/* on dark sections, keep names readable */
.anniv-section--dark .anniv-name, .anniv-hero .anniv-name { color: var(--accent-yellow); border-bottom-color: color-mix(in srgb, var(--accent-yellow) 55%, transparent); }
.anniv-section--dark .anniv-name:hover, .anniv-hero .anniv-name:hover { color: #fff; border-bottom-color: #fff; }

/* Portfolio refs ([ref:slug]label[/ref] in body copy): same visual rhythm as
   teammate names but using primary plum + solid underline so the two link
   types stay distinguishable (names = magenta dotted; portfolio = plum solid). */
.anniv-portfolio-link {
  font-weight: 600; color: var(--color-plum, var(--primary)); text-decoration: none;
  border-bottom: 1.5px solid color-mix(in srgb, var(--color-plum, var(--primary)) 50%, transparent);
  cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast);
}
.anniv-portfolio-link:hover, .anniv-portfolio-link:focus-visible {
  color: var(--accent-magenta); border-bottom-color: var(--accent-magenta); outline: none;
}
.anniv-section--dark .anniv-portfolio-link, .anniv-hero .anniv-portfolio-link {
  color: var(--accent-teal); border-bottom-color: color-mix(in srgb, var(--accent-teal) 55%, transparent);
}
.anniv-section--dark .anniv-portfolio-link:hover, .anniv-hero .anniv-portfolio-link:hover {
  color: #fff; border-bottom-color: #fff;
}

.anniv-name-pop {
  position: fixed; z-index: 100000; pointer-events: none;
  display: flex; gap: 0.7rem; align-items: center; width: 248px; padding: 0.7rem;
  background: #fff; color: var(--text-primary); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); box-shadow: 0 18px 50px rgba(28,4,32,0.28);
  opacity: 0; transform: translateY(6px) scale(0.98); transition: opacity 0.16s ease, transform 0.16s ease;
}
.anniv-name-pop.is-on { opacity: 1; transform: translateY(0) scale(1); }
.anniv-name-pop[hidden] { display: none; }
.anniv-name-pop-img { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; object-position: center top; background: var(--bg-secondary); }
.anniv-name-pop-txt { min-width: 0; display: flex; flex-direction: column; }
.anniv-name-pop-name { font-weight: 800; font-size: 0.95rem; line-height: 1.2; }
.anniv-name-pop-role { font-size: 0.78rem; color: var(--text-tertiary); line-height: 1.25; margin-top: 0.15rem; }
/* little arrow */
.anniv-name-pop::after {
  content: ""; position: absolute; bottom: -6px; left: var(--arrow-x, 50%); transform: translateX(-50%) rotate(45deg);
  width: 12px; height: 12px; background: #fff; border-right: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
}
.anniv-name-pop.below::after { bottom: auto; top: -6px; border-right: 0; border-bottom: 0; border-left: 1px solid var(--border-light); border-top: 1px solid var(--border-light); }

/* ── Hero "Take the tour" CTA (under the counters) ──────────────────────── */
.anniv-hero-actions {
  margin-top: var(--spacing-xl);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.anniv-tour-start {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.7rem; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 1.05rem; font-weight: 800; color: #1c0420;
  background: linear-gradient(120deg, var(--accent-yellow), var(--accent-magenta));
  box-shadow: 0 8px 24px rgba(184, 53, 123, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.anniv-tour-start:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 12px 30px rgba(184, 53, 123, 0.45); }
.anniv-tour-start-ico { font-size: 0.72em; }
.anniv-hero-or { font-size: 0.85rem; color: var(--ink-dark-2); letter-spacing: 0.02em; }

/* ── Guided tour: spotlight "stage" + control bar ───────────────────────────
   On item steps the page recedes behind a dimmed/blurred backdrop and the
   focused bite-sized piece (a year / service / project) is lifted forward and
   scaled up, like advancing an e-learning slide. */
.anniv-tour-backdrop {
  position: fixed; inset: 0; z-index: 800; pointer-events: none;
  background: radial-gradient(120% 120% at 50% 38%, rgba(20,4,26,0.66), rgba(10,2,14,0.9));
  opacity: 0; transition: opacity 0.4s ease;
  -webkit-backdrop-filter: blur(2.5px); backdrop-filter: blur(2.5px);
}
html.anniv-tour-spot .anniv-tour-backdrop { opacity: 1; }

/* let the focused section's content escape its clip so the lifted card and
   its shadow are not cut off */
.anniv-tour-on .anniv-main > section.is-tour-focus { overflow: visible; }

/* the focused piece: raised above the backdrop, scaled, elevated like a card */
.is-tour-spot {
  position: relative; z-index: 850;
  /* NB: background is intentionally NOT transitioned. Fading it in from
     transparent flashed the dark backdrop through the card (the "black mask"),
     worst on mobile where the card fills the screen. Snap it opaque instead. */
  transition: transform 0.4s cubic-bezier(.2,.85,.25,1), box-shadow 0.4s ease;
}
.anniv-tl-item.is-tour-spot,
.anniv-project.is-tour-spot,
.anniv-evo-row.is-tour-spot {
  border-radius: 18px;
  box-shadow: 0 36px 90px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05);
}
/* timeline year: keep its dot-gutter + joins-rail spacing intact; just lift it
   onto a white card so it reads on the dimmed stage. A little top/bottom breathing
   room via a transparent ring is added with the box-shadow inset. */
.anniv-tl-item.is-tour-spot {
  transform: scale(1.045);
  background: var(--bg-primary, #fff);
  box-shadow: 0 36px 90px rgba(0,0,0,0.55), 0 0 0 1rem var(--bg-primary, #fff);
}
/* Multi-service year split into one card per service: show the year header and
   only the active strand; hide the other strands and the shared intro. */
html.anniv-tour-spot .anniv-tl-item.is-tour-spot.is-tour-split .anniv-tl-event:not(.is-tour-event),
html.anniv-tour-spot .anniv-tl-item.is-tour-spot.is-tour-split .anniv-tl-intro { display: none; }
.anniv-project.is-tour-spot {
  transform: scale(1.14);
  box-shadow: 0 44px 110px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
/* Learning-objectives slide: lift the callout to center stage. During the tour
   the in-band callout is hidden so it ONLY appears as its own focused slide
   (no double-show in the welcome overview). */
html.anniv-tour-on .anniv-sowhat-callout { display: none; }
html.anniv-tour-on .anniv-sowhat-callout.is-tour-spot { display: block; }
.anniv-sowhat-callout.is-tour-spot {
  margin-left: auto; margin-right: auto; transform: scale(1.06);
  background: var(--bg-primary);
  box-shadow: 0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.06);
}
.anniv-evo-row.is-tour-spot {
  transform: scale(1.04);
  background: color-mix(in srgb, var(--evo-c) 26%, #14040f);
}

/* Evolution steps feature the subway map: lift it onto a dark panel and, on a
   service step, dim every line except the one this step is about. */
/* .anniv-evolution makes its own stacking context (z-index:2) which traps the
   lifted map BELOW the backdrop (the "mask"). Raise it above the backdrop when
   the map is the active tour spot so the panel reads. */
html.anniv-tour-spot .anniv-evolution:has(.anniv-subway-wrap.is-tour-spot) { z-index: 850; }
.anniv-subway-wrap { position: relative; }   /* anchor the tour overlay */
.anniv-subway-wrap.is-tour-spot {
  background:
    radial-gradient(120% 120% at 30% 0%, rgba(74, 20, 86, 0.97), rgba(36, 8, 44, 0.97));
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 36px 90px rgba(0,0,0,0.55), inset 0 0 60px rgba(255,255,255,0.04);
}
/* dim the other lines well back so the active one clearly dominates */
html.anniv-tour-spot .anniv-subway-wrap.is-tour-spot .anniv-subway-line:not(.is-spotlit) { opacity: 0.22; }
html.anniv-tour-spot .anniv-subway-wrap.is-tour-spot .anniv-subway-line.is-spotlit { opacity: 1; }

/* the active service's card text, overlaid on the open lower-left of the map */
.anniv-evo-overlay {
  position: absolute; left: clamp(0.75rem, 2vw, 1.6rem); bottom: clamp(2.4rem, 6vh, 4rem);
  width: min(360px, 46%); z-index: 6;
  background: rgba(16, 3, 22, 0.86); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-md);
  padding: 1.1rem 1.25rem; color: #fff; box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.anniv-evo-overlay[hidden] { display: none; }
.anniv-evo-overlay-yr { font-family: var(--font-mono, monospace); font-size: 0.8rem; color: var(--accent-yellow); }
.anniv-evo-overlay-stage { font-size: 1.3rem; line-height: 1.15; margin: 0.2rem 0 0.5rem; color: #fff; }
.anniv-evo-overlay-what { font-size: 0.95rem; line-height: 1.45; color: var(--ink-dark); margin: 0 0 0.5rem; }
.anniv-evo-overlay-proof { font-size: 0.84rem; color: var(--accent-teal); margin: 0; }
.anniv-evo-overlay-proof:empty { display: none; }
@media (max-width: 620px) { .anniv-evo-overlay { position: static; width: auto; margin-top: 0.8rem; } }

/* Client testimonial step: float the card to the center of the screen as a
   LANDSCAPE quote slide, so the (now ~half-size) quote wraps to a few lines and
   the card can never fall offscreen. */
html.anniv-tour-spot .anniv-client-card.is-tour-spot {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(860px, 92vw); max-height: 86vh; overflow-y: auto; z-index: 850;
  text-align: center;
  box-shadow: 0 44px 110px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
}
html.anniv-tour-spot .anniv-client-card.is-tour-spot .anniv-client-quote {
  font-size: clamp(1.1rem, 2.3vw, 1.55rem);
  line-height: 1.4; font-weight: 700; color: var(--text-primary);
}
html.anniv-tour-spot .anniv-client-card.is-tour-spot .anniv-client-mark { font-size: 3.4rem; }
html.anniv-tour-spot .anniv-client-card.is-tour-spot .anniv-client-logo { margin-left: auto; margin-right: auto; }
html.anniv-tour-spot .anniv-client-card.is-tour-spot .anniv-client-story { display: none; }
@media (prefers-reduced-motion: reduce) {
  .is-tour-spot { transition: none; transform: none; }
  .anniv-tour-backdrop { transition: none; }
}

.anniv-tour { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; justify-content: center; pointer-events: none; }
.anniv-tour[hidden] { display: none; }
.anniv-tour-bar {
  pointer-events: auto;
  display: flex; align-items: center; gap: clamp(0.6rem, 2vw, 1.4rem);
  width: min(820px, calc(100% - 1.6rem)); margin-bottom: clamp(0.6rem, 2vw, 1.4rem);
  padding: 0.7rem 0.8rem 0.7rem 1.1rem; border-radius: 999px;
  background: rgba(28, 4, 32, 0.94); color: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
}
.anniv-tour-info { display: flex; align-items: baseline; gap: 0.6rem; min-width: 0; flex: 1; }
.anniv-tour-step { font-family: var(--font-mono, monospace); font-size: 0.78rem; color: var(--accent-yellow); flex: 0 0 auto; }
.anniv-tour-title { font-weight: 800; flex: 0 0 auto; }
.anniv-tour-caption { font-size: 0.88rem; color: var(--ink-dark-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anniv-tour-nav { display: flex; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
.anniv-tour-exit {
  flex: 0 0 auto; border: 1px solid rgba(255,255,255,0.25); background: transparent; color: var(--ink-dark-2);
  border-radius: 999px; padding: 0.4rem 0.8rem; font-size: 0.82rem; cursor: pointer; transition: color .15s, border-color .15s;
}
.anniv-tour-exit:hover { color: #fff; border-color: rgba(255,255,255,0.5); }
.anniv-tour-prev, .anniv-tour-next {
  border: 0; border-radius: 999px; cursor: pointer; font-weight: 700; padding: 0.55rem 1rem; font-size: 0.95rem;
  transition: transform .12s ease, filter .15s ease, opacity .15s ease;
}
.anniv-tour-prev { background: rgba(255,255,255,0.12); color: #fff; padding: 0.55rem 0.85rem; }
.anniv-tour-prev:disabled { opacity: 0.35; cursor: default; }
.anniv-tour-next { background: var(--accent-yellow); color: #1c0420; position: relative; }
.anniv-tour-next:hover { transform: translateY(-1px); filter: brightness(1.05); }
/* Enlarge the Next tap target into the bottom-right corner so a fat-finger
   tap near the edge still advances instead of hitting the card behind it. */
.anniv-tour-next::after {
  content: ""; position: absolute; z-index: 1;
  top: -1.2rem; left: -0.5rem; right: -3.5rem; bottom: -3.5rem;
}

/* Disable double-tap-to-zoom during the tour: rapid Next taps (or a fat-finger
   miss, especially in landscape) were triggering the browser's double-tap zoom,
   which is disconcerting. Pinch-zoom and scrolling are unaffected. */
html.anniv-tour-on,
html.anniv-tour-on body,
html.anniv-tour-on .anniv-tour-bar,
html.anniv-tour-on .anniv-tour-bar *,
html.anniv-tour-on .is-tour-spot,
html.anniv-tour-on .anniv-tour-break,
html.anniv-tour-on .anniv-tour-break *,
html.anniv-tour-on .anniv-tour-finale,
html.anniv-tour-on .anniv-tour-finale * {
  touch-action: manipulation;
}
.anniv-tour-prev:not(:disabled):hover { background: rgba(255,255,255,0.2); }

/* Tour finale: a closing CTA card (schedule + share) above the dimmed stage */
.anniv-tour-finale {
  position: fixed; inset: 0; z-index: 940; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; pointer-events: none;
}
.anniv-tour-finale[hidden] { display: none; }
.anniv-tour-finale-card {
  pointer-events: auto; width: min(560px, 100%);
  background: var(--bg-primary); border-radius: var(--radius-lg);
  box-shadow: 0 44px 110px rgba(0,0,0,0.6); padding: clamp(1.8rem, 4vw, 2.8rem);
  text-align: center;
}
.anniv-tour-finale-kicker { font-family: var(--font-mono, monospace); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-magenta); margin: 0; }
.anniv-tour-finale-h { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0.5rem 0 0.6rem; }
.anniv-tour-finale-sub { color: var(--text-secondary); margin: 0 auto 1.4rem; font-size: 1.02rem; max-width: 44ch; }
.anniv-tour-finale-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.anniv-tour-finale-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.85rem 1.5rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; cursor: pointer; border: 0; text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.anniv-tour-finale-btn--primary { background: var(--color-plum); color: #fff; }
.anniv-tour-finale-btn--primary:hover { background: color-mix(in srgb, var(--color-plum) 84%, #000); transform: translateY(-1px); }
.anniv-tour-finale-btn--ghost { background: transparent; color: var(--color-plum); border: 1px solid color-mix(in srgb, var(--color-plum) 42%, transparent); }
.anniv-tour-finale-btn--ghost:hover { background: color-mix(in srgb, var(--color-plum) 8%, transparent); }
.anniv-tour-finale-foot { display: flex; gap: 1.2rem; justify-content: center; margin-top: 1.3rem; }
.anniv-tour-finale-foot button { background: none; border: 0; color: var(--text-tertiary); font-size: 0.85rem; cursor: pointer; text-decoration: underline; }
.anniv-tour-finale-foot button:hover { color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) { .anniv-tour-finale-btn { transition: none; } }

/* Section-break "slide": announces the next section (e-learning style), with
   Next / Skip and an exit link, styled like the finale card. */
.anniv-tour-break {
  position: fixed; inset: 0; z-index: 945; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; pointer-events: none;
}
.anniv-tour-break[hidden] { display: none; }
.anniv-tour-break-card {
  pointer-events: auto; width: min(620px, 100%); text-align: center;
  background: var(--bg-primary); border-radius: var(--radius-lg);
  box-shadow: 0 44px 110px rgba(0,0,0,0.6); padding: clamp(2rem, 5vw, 3.2rem);
}
.anniv-tour-break-kicker { font-family: var(--font-mono, monospace); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent-magenta); margin: 0; }
.anniv-tour-break-h { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.08; margin: 0.6rem 0 0.55rem; }
.anniv-tour-break-lede { color: var(--text-secondary); margin: 0 auto 1.7rem; font-size: 1.05rem; max-width: 42ch; }
.anniv-tour-break-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.anniv-tour-break-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.85rem 1.6rem; border-radius: 999px;
  font-weight: 700; font-size: 1rem; cursor: pointer; border: 0;
  transition: transform 0.15s ease, background 0.15s ease;
}
.anniv-tour-break-btn--primary { background: var(--color-plum); color: #fff; }
.anniv-tour-break-btn--primary:hover { background: color-mix(in srgb, var(--color-plum) 84%, #000); transform: translateY(-1px); }
.anniv-tour-break-btn--ghost { background: transparent; color: var(--color-plum); border: 1px solid color-mix(in srgb, var(--color-plum) 42%, transparent); }
.anniv-tour-break-btn--ghost:hover { background: color-mix(in srgb, var(--color-plum) 8%, transparent); }
.anniv-tour-break-exit { display: inline-block; margin-top: 1.3rem; background: none; border: 0; color: var(--text-tertiary); font-size: 0.85rem; cursor: pointer; text-decoration: underline; }
.anniv-tour-break-exit:hover { color: var(--text-primary); }
@media (prefers-reduced-motion: reduce) { .anniv-tour-break-btn { transition: none; } }

@media (max-width: 560px) {
  .anniv-tour-caption { display: none; }
  .anniv-tour-bar { gap: 0.6rem; padding: 0.6rem 0.6rem 0.6rem 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .anniv-tour-on .anniv-main > section { transition: none; }
  .anniv-tour-start, .anniv-tour-next, .anniv-tour-prev { transition: none; }
}

/* ── "Spread the word" share popover ─────────────────────────────────────
   Replaces the unpredictable native share sheet with a well-defined
   copy-link confirmation (plus an email option). Anchored to the button
   via fixed positioning set in JS. Reads on both light and dark sections. */
.anniv-share-pop {
  position: fixed;
  z-index: 1000;
  width: 264px;
  background: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.32);
  padding: 0.95rem 1.05rem 1.05rem;
  font-family: var(--font-primary);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}
.anniv-share-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.anniv-share-pop-msg {
  margin: 0 0 0.3rem;
  font-size: 0.98rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.anniv-share-pop-check {
  display: inline-flex;
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-plum);
  color: #fff;
  font-size: 0.72rem;
}
.anniv-share-pop-help {
  margin: 0 0 0.55rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-secondary);
}
.anniv-share-pop-url {
  margin: 0 0 0.7rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.72rem;
  color: var(--text-tertiary);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm, 6px);
  word-break: break-all;
  user-select: all;
}
.anniv-share-pop-email {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-plum);
  text-decoration: none;
}
.anniv-share-pop-email:hover { text-decoration: underline; }
.anniv-share-pop-email:focus-visible { outline: 2px solid var(--color-plum); outline-offset: 2px; }

/* ── Objectives slide: pulse Next when a checkbox is ticked ───────────────────
   The checkboxes confused some users into thinking they were the way forward;
   ticking one now pulses the bar's Next button to point them on. */
@keyframes anniv-next-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 188, 80, 0.6); }
  70%  { box-shadow: 0 0 0 13px rgba(255, 188, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 188, 80, 0); }
}
.anniv-tour-next--pulse { animation: anniv-next-pulse 0.9s ease-out 3; }
@media (prefers-reduced-motion: reduce) {
  .anniv-tour-next--pulse { animation: none; box-shadow: 0 0 0 3px rgba(255, 188, 80, 0.6); }
}

/* ── Frameless mobile tour ────────────────────────────────────────────────────
   On phones the tour becomes a full-screen takeover: hide the global site nav
   and the page's section rail so the spotlight stage uses the whole height
   (the JS centers each step in the space above the playbar). Both return on
   exit because the rules only apply while .anniv-tour-on is set. */
@media (max-width: 880px) {
  html.anniv-tour-on .navbar { display: none !important; }
  html.anniv-tour-on .anniv-rail { display: none !important; }
  html.anniv-tour-on { --nav-offset: 8px; }
  /* let the focused piece breathe and never collide with the bottom bar */
  html.anniv-tour-on.anniv-tour-spot .anniv-main { padding-bottom: 96px; }
}

/* ── Fix tour "black masking" ─────────────────────────────────────────────────
   On item steps the focused card MUST stay opaque against the dimmed backdrop,
   or it reads as a solid black hole. A higher-priority paint (reveal state /
   animation) was pinning these backgrounds transparent, so force them: a white
   card on light sections (timeline / projects), an opaque tinted card on the
   dark evolution rows so their light text still reads. */
html.anniv-tour-spot .anniv-tl-item.is-tour-spot,
html.anniv-tour-spot .anniv-project.is-tour-spot {
  background: var(--bg-primary, #fff) !important;
}
/* Service card: white like the other tour cards (the dark version read dim
   against the dimmed backdrop). Re-color its inner text for a light card. */
html.anniv-tour-spot .anniv-evo-row.is-tour-spot {
  background: #fff !important;
  border: 1px solid var(--border-light);
}
html.anniv-tour-spot .anniv-evo-row.is-tour-spot .anniv-evo-stage { color: var(--text-primary); }
html.anniv-tour-spot .anniv-evo-row.is-tour-spot .anniv-evo-tagline,
html.anniv-tour-spot .anniv-evo-row.is-tour-spot .anniv-evo-what { color: var(--text-secondary); }
html.anniv-tour-spot .anniv-evo-row.is-tour-spot .anniv-evo-year { color: color-mix(in srgb, var(--evo-c) 62%, #2a1133); }
html.anniv-tour-spot .anniv-evo-row.is-tour-spot .anniv-evo-proof { color: color-mix(in srgb, var(--accent-teal) 68%, #15302a); }

/* ── Mobile tour: card-based steps + playbar cleanup ──────────────────────── */
@media (max-width: 880px) {
  /* Playbar: drop the section title (and caption) so the Back arrow is never
     covered; the step count is enough orientation in the bar. */
  html.anniv-tour-on .anniv-tour-title,
  html.anniv-tour-on .anniv-tour-caption { display: none !important; }
  html.anniv-tour-on .anniv-tour-info { flex: 0 0 auto; }
  html.anniv-tour-on .anniv-tour-nav { margin-left: auto; }

  /* Timeline year cards: use the full width (the 56px dot gutter + right joins
     gutter squeezed longer years off the card). */
  html.anniv-tour-spot .anniv-tl-item.is-tour-spot {
    padding-left: 1.2rem !important;
    padding-right: 1.2rem !important;
  }
  html.anniv-tour-spot .anniv-tl-item.is-tour-spot .anniv-tl-dot { display: none; }

  /* Service + teammate steps float to center as opaque cards, like the client
     quotes (the wide subway map and the in-grid member tiles don't frame in
     portrait). */
  html.anniv-tour-spot .anniv-evo-row.is-tour-spot,
  html.anniv-tour-spot .anniv-member.is-tour-spot {
    position: fixed !important; left: 50%;
    /* center in the stage ABOVE the playbar (shift up ~half the bar), and cap
       height so the card always clears the bar, even in short landscape. */
    top: calc(50% - 38px);
    transform: translate(-50%, -50%) !important;
    width: min(440px, 91vw); max-height: calc(100vh - 128px); overflow-y: auto;
    z-index: 850; border-radius: 18px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  /* teammate card: centered photo, name, role */
  html.anniv-tour-spot .anniv-member.is-tour-spot {
    background: var(--bg-primary) !important;
    color: var(--text-primary);
    text-align: center;
    padding: 1.5rem 1.4rem 1.7rem;
  }
  html.anniv-tour-spot .anniv-member.is-tour-spot .anniv-member-frame { margin: 0 auto 1rem; }
  html.anniv-tour-spot .anniv-member.is-tour-spot .anniv-member-cta { display: none; }
  html.anniv-tour-spot .anniv-member.is-tour-spot .anniv-member-info { align-items: center; }

  /* Work/project steps also float to center as a card (they were spotlit
     in-place, so they overflowed and read as masked). Cap the image so the
     title + text fit. */
  html.anniv-tour-spot .anniv-project.is-tour-spot {
    position: fixed !important; left: 50%; top: calc(50% - 38px);
    transform: translate(-50%, -50%) !important;
    width: min(460px, 92vw); max-height: calc(100vh - 128px); overflow-y: auto;
    z-index: 850;
  }
  html.anniv-tour-spot .anniv-project.is-tour-spot .anniv-project-media img {
    max-height: 38vh; object-fit: cover;
  }
}

/* Landscape phones are short and wide: give the centered cards more width so
   their content fits without a long internal scroll. */
@media (max-width: 880px) and (orientation: landscape) {
  html.anniv-tour-spot .anniv-project.is-tour-spot,
  html.anniv-tour-spot .anniv-evo-row.is-tour-spot,
  html.anniv-tour-spot .anniv-member.is-tour-spot {
    width: min(700px, 94vw);
  }
  html.anniv-tour-spot .anniv-project.is-tour-spot .anniv-project-media img { max-height: 30vh; }
  /* teammate: small square photo BESIDE the name/role (stacked would overflow
     the short landscape height). Constrain the photo or it fills the card. */
  html.anniv-tour-spot .anniv-member.is-tour-spot {
    display: flex; align-items: center; gap: 1.3rem; text-align: left;
    padding: 1.1rem 1.3rem;
  }
  html.anniv-tour-spot .anniv-member.is-tour-spot .anniv-member-frame {
    margin: 0; flex: 0 0 auto;
    width: clamp(120px, 42vh, 190px); height: clamp(120px, 42vh, 190px);
    aspect-ratio: 1 / 1; border-radius: var(--radius-md);
  }
  html.anniv-tour-spot .anniv-member.is-tour-spot .anniv-member-info { align-items: flex-start; padding: 0; }
  html.anniv-tour-spot .anniv-member.is-tour-spot .anniv-member-name { font-size: 1.4rem; }
  html.anniv-tour-spot .anniv-member.is-tour-spot .anniv-member-role { display: block; color: var(--text-secondary); font-size: 0.95rem; margin-top: 0.2rem; }
}