/* Page styles for index.html — "floating cards" layout on the Crest design system.
   Colours, type and spacing come from tokens/ (copied from Claude Design). */
/* Fonts load from a <link> in index.html (tokens/fonts.css holds the same URL) so they are not stuck behind this stylesheet. */
@import url('tokens/colors.css');
@import url('tokens/typography.css');
@import url('tokens/spacing.css');
@import url('tokens/shape.css');
@import url('tokens/motion.css');
@import url('tokens/base.css');

:root {
  --page-pad: clamp(20px, 5vw, 64px);
  /* Trading-card language: ivory card, gold edge, small radius, navy-tinted shadow lit from above. */
  --radius-card: 12px;
  --card-shadow: 0 2px 0 rgba(20, 30, 61, .14), 0 28px 48px -20px rgba(12, 18, 40, .55);
  --card-shadow-lift: 0 2px 0 rgba(20, 30, 61, .14), 0 40px 64px -22px rgba(12, 18, 40, .6);
  --dur-card: 260ms;
  --ease-card: cubic-bezier(0.2, 0.7, 0.2, 1);
  --section-space: clamp(96px, 12vw, 160px);
}

/* Tilted card corners must never create a sideways scroll on narrow screens. */
main { overflow-x: hidden; overflow-x: clip; } /* hidden = fallback for browsers without clip */
html { scroll-behavior: smooth; }
main:focus { outline: none; }

/* Skip link: hidden until focused by keyboard. */
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 12px 18px; border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-primary); text-decoration: none;
}
.skip-link:focus { top: 16px; }

/* Focus rings: gold reads on navy (6.9:1) but not on ivory (~2:1), so paper surfaces use navy. */
.section :focus-visible, .card :focus-visible, .card:focus-visible { outline-color: var(--color-primary); }
.container { max-width: 1280px; margin-inline: auto; box-sizing: border-box; padding-inline: var(--page-pad); }
.m0 { margin: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; box-sizing: border-box;
  padding: 0 calc(var(--button-padding-x) - 0.22em) 0 var(--button-padding-x);
  border: 1px solid; border-radius: var(--radius-full);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover);
}
.btn--primary { background: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-deep); border-color: var(--color-primary-deep); color: var(--color-surface); }
.btn--on-band { background: var(--color-surface); color: var(--color-primary); border-color: var(--color-surface); }
.btn--on-band:hover { background: var(--color-neutral); border-color: var(--color-neutral); color: var(--color-primary); }
.btn--ghost-on-band { background: transparent; color: var(--color-surface); border-color: var(--color-on-primary-muted); }
.btn--ghost-on-band:hover { color: var(--color-surface); border-color: var(--color-tertiary); }

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; min-height: 26px; box-sizing: border-box; max-width: 100%;
  padding: 4px calc(12px - 0.22em) 4px 12px; border-radius: var(--radius-full);
  background: var(--color-neutral); color: var(--color-primary); overflow-wrap: anywhere;
}

/* ---------- Card (shared) ---------- */
.card {
  position: relative; box-sizing: border-box;
  background: var(--color-surface); color: var(--color-on-surface);
  border: 1px solid var(--color-tertiary); border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
  transform: rotate(var(--tilt, 0deg)) translateY(var(--drop, 0px));
  transition: transform var(--dur-card) var(--ease-card), box-shadow var(--dur-card) var(--ease-card);
}
/* Hover lift only where a real pointer can hover; on touch a tap would leave the card stuck lifted. */
@media (hover: hover) {
  .card:hover { transform: rotate(0deg) translateY(calc(var(--drop, 0px) - 10px)); box-shadow: var(--card-shadow-lift); z-index: 20; }
}

/* ---------- Top nav (sits on the navy hero) ---------- */
/* Sticky header: navy over the hero, ivory with a gold hairline once the page scrolls (.is-scrolled). */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-primary); color: var(--color-surface);
  box-shadow: 0 1px 0 transparent;
  transition: background-color 280ms var(--ease-card), box-shadow 280ms var(--ease-card);
}
.topnav.is-scrolled { background: var(--color-surface); box-shadow: 0 1px 0 var(--color-tertiary); }
.topnav.is-scrolled .topnav__logo,
.topnav.is-scrolled .topnav__link,
.topnav.is-scrolled .topnav__hi { color: var(--color-primary); }
.topnav.is-scrolled .topnav__logo:hover { color: var(--color-tertiary-ink); }
.topnav.is-scrolled .topnav__burger span { background: var(--color-primary); }
.topnav.is-scrolled :focus-visible { outline-color: var(--color-primary); }
.topnav__logo, .topnav__link, .topnav__hi { transition: color 280ms var(--ease-card), text-decoration-color var(--dur-hover) var(--ease-hover); }
/* Anchor jumps stop below the sticky bar. */
[id] { scroll-margin-top: 80px; }
.topnav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); height: 76px; transition: height 280ms var(--ease-card); }
.topnav.is-scrolled .topnav__bar { height: 64px; }
.topnav__logo {
  color: var(--color-surface); text-decoration: none;
  font-family: var(--font-voice); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: -0.03em;
}
.topnav__logo:hover { color: var(--color-tertiary); }
.topnav__links { display: flex; gap: clamp(20px, 2.4vw, 32px); }
.topnav__link, .topnav__hi {
  color: var(--color-surface); text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 6px; text-decoration-color: transparent;
  transition: text-decoration-color var(--dur-hover) var(--ease-hover);
}
.topnav__link:hover, .topnav__hi:hover { color: var(--color-surface); text-decoration-color: var(--color-tertiary); }
.topnav__hi { text-decoration-color: var(--color-tertiary); }
/* Four links plus "Let's talk" need ~900px; below that the bar keeps the logo and "Let's talk", and the footer carries the full nav. */
.topnav__burger { display: none; }
@media (max-width: 899px) {
  .topnav__links { display: none; }
  .topnav__bar { gap: 16px; }
  .topnav__hi { margin-left: auto; }
  .topnav__burger {
    display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; flex: none; cursor: pointer;
    border-radius: 50%; border: 1px solid var(--color-tertiary); background: transparent;
    transition: background-color var(--dur-hover) var(--ease-hover);
  }
  .topnav__burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--color-surface); transition: background-color 280ms var(--ease-card); }
  .topnav__burger:hover { background: rgba(206, 178, 126, .14); }
}
/* On small phones the menu carries "Let's talk", so the bar keeps just the logo and the button. */
@media (max-width: 479px) { .topnav__hi { display: none; } .topnav__burger { margin-left: auto; } }

/* ---------- Full-screen menu (tablet + mobile) ---------- */
.menu {
  position: fixed; inset: 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column;
  background: var(--color-primary); color: var(--color-surface);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.menu[hidden] { display: none; }
.menu.is-open { animation: menu-fade 260ms var(--ease-card) both; }
.menu.is-closing { animation: menu-fade 200ms var(--ease-card) reverse both; }
@keyframes menu-fade { from { opacity: 0; } to { opacity: 1; } }
.menu__bar, .menu__body { width: 100%; }
.menu__bar { display: flex; align-items: center; justify-content: space-between; min-height: 76px; flex: none; border-bottom: 1px solid rgba(206, 178, 126, .25); }
.menu__close {
  position: relative; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; flex: none;
  border: 1px solid var(--color-tertiary); background: transparent;
}
.menu__close { display: grid; place-items: center; padding: 0; }
.menu__close span { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; border-radius: 2px; background: var(--color-surface); }
.menu__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.menu__close:hover { background: rgba(206, 178, 126, .14); }
.menu__body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-block: clamp(24px, 5vh, 56px) clamp(28px, 6vh, 56px); }
.menu__list { list-style: none; margin: 0; padding: 0; }
.menu__list li { border-bottom: 1px solid rgba(206, 178, 126, .25); }
.menu__link {
  display: flex; align-items: baseline; gap: clamp(12px, 3vw, 24px); padding-block: clamp(10px, 2.2vh, 18px);
  font-family: var(--font-voice); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05;
  /* Big but sized to fit: "Where I help" stays on one line at 320px, and short landscape screens scale by height. */
  font-size: clamp(30px, min(9vw, 8vh), 64px);
  color: var(--color-surface); text-decoration: none;
  transition: color var(--dur-hover) var(--ease-hover);
}
.menu__link:hover { color: var(--color-tertiary); }
.menu__num { font-family: var(--font-voice); font-weight: 400; font-size: 12px; letter-spacing: .22em; color: var(--color-tertiary); flex: none; min-width: 2.2em; }
.menu__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.menu__cta { margin-bottom: 10px; font-family: var(--font-voice); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; }
.menu__meta { font-family: var(--font-reading); font-size: 15px; color: var(--color-on-primary-muted); text-decoration: none; overflow-wrap: anywhere; }
a.menu__meta:hover { color: var(--color-surface); }
.menu.is-open .menu__list li, .menu.is-open .menu__foot { animation: menu-item 460ms var(--ease-card) both; }
.menu.is-open .menu__list li:nth-child(1) { animation-delay: 60ms; }
.menu.is-open .menu__list li:nth-child(2) { animation-delay: 120ms; }
.menu.is-open .menu__list li:nth-child(3) { animation-delay: 180ms; }
.menu.is-open .menu__list li:nth-child(4) { animation-delay: 240ms; }
.menu.is-open .menu__foot { animation-delay: 320ms; }
@keyframes menu-item { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
body.menu-open { overflow: hidden; }
/* Short screens (small phones, landscape): tighter links and a one-line footer so it all fits without scrolling. */
@media (max-height: 640px) {
  .menu__bar { min-height: 64px; }
  .menu__body { gap: 16px; padding-block: 12px 16px; }
  .menu__link { font-size: clamp(22px, 6.5vh, 40px); padding-block: 6px; }
  .menu__foot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
  .menu__cta { margin-bottom: 0; height: 40px; }
  .menu__foot p.menu__meta { display: none; }
}
@media (min-width: 900px) { .menu { display: none !important; } }

/* ---------- Hero ---------- */
/* Navy runs behind the name and the top of the cards, then ivory takes over, so the hand
   of cards straddles the seam between the two papers. */
.hero {
  --seam: 180px;
  background: linear-gradient(var(--color-primary) 0 calc(100% - var(--seam)), var(--surface-page) calc(100% - var(--seam)));
  padding-bottom: 0;
}
.hero__intro { padding-block: clamp(40px, 7vw, 88px) clamp(48px, 6vw, 72px); display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.hero__status { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--color-on-primary-muted); }
/* Location line: scales down on small screens and wraps only at the dot, never mid-phrase. */
.loc { display: inline; }
.loc__part { white-space: nowrap; }
.hero__status, .site-footer__location { font-size: clamp(10.5px, 2.9vw, 12px); letter-spacing: clamp(0.1em, 0.5vw + 0.06em, 0.22em); line-height: 1.6; }
.hero__name {
  font-family: var(--font-voice); font-weight: 600; color: var(--color-surface);
  font-size: clamp(48px, 12.5vw, 148px); line-height: .9; letter-spacing: -0.045em;
}
.hero__lede { color: var(--color-on-primary-muted); max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }

/* The hand: three cards dealt on the table.
   ≥1024px: overlapping hand across the navy/ivory seam.
   600–1023px: photo card left, the other two stacked beside it.
   <600px: one column, photo first. */
.hand { display: flex; justify-content: center; align-items: flex-start; }
.hand__card { width: 320px; flex: none; }
.hand__card--left { --tilt: -7deg; --drop: 72px; margin-right: -36px; padding: 24px 56px 24px 24px; z-index: 1; }
.hand__card--centre { --tilt: 2.5deg; padding: 14px 14px 20px; z-index: 2; width: 300px; }
.hand__card--right { --tilt: 6deg; --drop: 96px; margin-left: -36px; padding: 24px 24px 24px 60px; z-index: 1; }
.card__title { color: var(--color-secondary); margin-bottom: 20px; }

.stickers { list-style: none; margin: 0; padding: 8px 0 12px; display: flex; flex-direction: column; align-items: flex-start; }
.sticker {
  font-family: var(--font-voice); font-weight: 600; font-size: clamp(22px, 6.4vw, 30px); line-height: 1; letter-spacing: -0.01em;
  padding: .47em .87em .53em; border-radius: var(--radius-full); box-sizing: border-box; max-width: 100%;
  box-shadow: 0 10px 18px -10px rgba(12, 18, 40, .5);
}
.sticker + .sticker { margin-top: -6px; }
.sticker--navy { background: var(--color-primary); color: var(--color-surface); transform: rotate(-4deg); }
.sticker--mist { background: var(--color-neutral); color: var(--color-primary); transform: rotate(3deg) translateX(min(28px, 6vw)); }
.sticker--outline { background: var(--color-surface); color: var(--color-primary); border: 2px solid var(--color-tertiary); transform: rotate(-2deg) translateX(8px); }

@media (max-width: 1023px) {
  .hero { --seam: 0px; background: var(--color-primary); padding-bottom: var(--space-xl); }
  .hand__card, .hand__card--centre { width: auto; margin: 0; padding: 24px; --drop: 0px; }
  .hand__card--centre { padding: 14px 14px 20px; }
  .hand__card--left { --tilt: -1.5deg; }
  .hand__card--centre { --tilt: 1.5deg; }
  .hand__card--right { --tilt: 1.5deg; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .hand { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: auto auto; gap: 28px 32px; align-items: start; max-width: 860px; }
  .hand__card--centre { grid-column: 1; grid-row: 1 / span 2; }
  .hand__card--left { grid-column: 2; grid-row: 1; }
  .hand__card--right { grid-column: 2; grid-row: 2; }
  .sticker { font-size: clamp(22px, 3.2vw, 30px); }
  .sticker--mist { transform: rotate(3deg) translateX(min(28px, 3vw)); }
}
@media (max-width: 599px) {
  .hand { flex-direction: column; align-items: stretch; gap: 28px; max-width: 420px; }
  .hand__card--centre { order: -1; }
  /* Room for the rotated corners so they stay on screen. */
  .hand__card, .hand__card--centre { margin-inline: 6px; }
}

.card__photo { aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--color-neutral); }
.card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; }
.card__caption { display: flex; align-items: baseline; gap: 12px; padding: 16px 6px 0; }
.card__big { font-size: 52px; color: var(--color-primary); }
.card__note { color: var(--color-tertiary-ink); }
.card__foot { color: var(--color-secondary); margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--color-border); }


/* ---------- Hero ambient motion: each piece of the hand does its own thing ----------
   Uses the individual translate / rotate / scale properties so it composes with each
   card's --tilt/--drop transform and hover straighten, instead of fighting them.
   Paused while the hero is off screen (.hero:not(.is-live)) and removed under reduced motion. */
.hand__card { animation: card-float var(--float-dur, 6.5s) ease-in-out var(--float-delay, 0s) infinite; }
.hand__card--left   { --float-dur: 6.4s; --float-delay: -1.2s; --sway: -0.8deg; }
.hand__card--centre { --float-dur: 7.6s; --float-delay: -3.4s; --sway: 0.5deg; }
.hand__card--right  { --float-dur: 5.8s; --float-delay: -0.4s; --sway: 0.9deg; }
@keyframes card-float {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  50%      { translate: 0 -12px; rotate: var(--sway, 0.6deg); }
}
.hand__card:hover { animation-play-state: paused; }

.sticker { animation: sticker-wobble var(--wob-dur, 3.6s) ease-in-out var(--wob-delay, 0s) infinite, sticker-pop 7.5s var(--ease-card) var(--pop-delay, 0s) infinite; }
.sticker--navy    { --wob-dur: 3.2s; --wob-delay: -0.6s; --pop-delay: 0.6s; }
.sticker--mist    { --wob-dur: 3.9s; --wob-delay: -2.1s; --pop-delay: 3.1s; }
.sticker--outline { --wob-dur: 4.4s; --wob-delay: -1.3s; --pop-delay: 5.6s; }
@keyframes sticker-wobble {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  33%      { rotate: 2.2deg; translate: 2px -2px; }
  66%      { rotate: -1.6deg; translate: -2px 1px; }
}
/* Mostly idle, then a quick lift-and-settle: three stickers take turns. */
@keyframes sticker-pop {
  0%, 12%, 100% { scale: 1; }
  4%            { scale: 1.09; }
  8%            { scale: 0.98; }
}

/* Tools: a spotlight walks the chips one at a time (10 chips × 0.7s = one 7s lap). */
.hand__card--right .chip { animation: chip-live 7s linear calc(var(--n, 0) * 0.7s) infinite; }
.hand__card--right .chip:nth-child(1)  { --n: 0; }
.hand__card--right .chip:nth-child(2)  { --n: 1; }
.hand__card--right .chip:nth-child(3)  { --n: 2; }
.hand__card--right .chip:nth-child(4)  { --n: 3; }
.hand__card--right .chip:nth-child(5)  { --n: 4; }
.hand__card--right .chip:nth-child(6)  { --n: 5; }
.hand__card--right .chip:nth-child(7)  { --n: 6; }
.hand__card--right .chip:nth-child(8)  { --n: 7; }
.hand__card--right .chip:nth-child(9)  { --n: 8; }
.hand__card--right .chip:nth-child(10) { --n: 9; }
@keyframes chip-live {
  0%, 12%, 100% { background: var(--color-neutral); color: var(--color-primary); }
  2%, 9%        { background: var(--color-primary); color: var(--color-surface); }
}

/* Photo card: a foil sheen sweeps across, like light catching a trading card. */
.card__photo { position: relative; }
.card__photo::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 47%, rgba(206, 178, 126, .25) 52%, transparent 62%);
  translate: -120% 0; animation: foil-sweep 6.5s ease-in-out 1.5s infinite;
}
@keyframes foil-sweep {
  0%, 55%  { translate: -120% 0; }
  85%, 100% { translate: 120% 0; }
}

.hero:not(.is-live) .hand__card, .hero:not(.is-live) .sticker, .hero:not(.is-live) .chip,
.hero:not(.is-live) .card__photo::after { animation-play-state: paused; }

/* ---------- Brands strip: endless logo slider ---------- */
.brands { padding-block: clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--color-border); }
/* Desktop hero cards hang ~100px below the hero; give the strip room so they don't cover it. */
@media (min-width: 1024px) { .brands { padding-top: 150px; } }
.brands__inner { display: flex; flex-direction: column; gap: 24px; }
.brands__title { color: var(--color-secondary); }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.logo {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: clamp(160px, 22vw, 220px); height: 96px; box-sizing: border-box; padding: 12px 20px;
  border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface);
  transition: border-color var(--dur-hover) var(--ease-hover);
}
.logo:hover { border-color: var(--color-tertiary); }
/* Real logo files: greyscale at rest so mismatched brand colours sit quietly, full colour on hover. */
.logo img { max-width: 100%; max-height: 44px; object-fit: contain; filter: grayscale(1) opacity(.75); transition: filter var(--dur-hover) var(--ease-hover); }
.logo:hover img { filter: none; }
.logo__word { font-family: var(--font-voice); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; color: var(--color-primary); white-space: nowrap; }
.logo__sub { font-family: var(--font-reading); font-style: italic; font-size: 13px; color: var(--color-secondary); white-space: nowrap; }
.logo--placeholder { border-style: dashed; }
.logo--placeholder .logo__word { color: var(--color-secondary); font-weight: 400; }
.marquee--logos.is-running .marquee__list { padding-right: 16px; }
.marquee--logos .marquee__track { animation-duration: 32s; }
@media (max-width: 599px) {
  .logo { width: 150px; height: 80px; }
  .logo__word { font-size: 19px; }
}

/* ---------- Testimonials: one quote at a time ---------- */
.quotes { max-width: 920px; display: flex; flex-direction: column; gap: 24px; }
/* All slides share one grid cell, so the stage is as tall as the longest quote and nothing jumps. */
.quotes__stage { display: grid; }
.quote {
  grid-area: 1 / 1; margin: 0; --tilt: -1deg;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 52px);
  display: flex; flex-direction: column; gap: 24px;
  /* Waiting slides sit 16px low and rise in (vertical, so they never poke past the screen edge). */
  opacity: 0; visibility: hidden; translate: 0 16px;
  transition: opacity 500ms var(--ease-card), translate 500ms var(--ease-card), visibility 0s linear 500ms, transform var(--dur-card) var(--ease-card), box-shadow var(--dur-card) var(--ease-card);
}
.quote.is-active { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 500ms var(--ease-card), translate 500ms var(--ease-card), visibility 0s, transform var(--dur-card) var(--ease-card), box-shadow var(--dur-card) var(--ease-card); }
.quote__tag { position: absolute; top: 20px; right: 24px; color: var(--color-secondary); border: 1px solid var(--color-tertiary); border-radius: var(--radius-full); padding: 3px 10px 3px 12px; font-size: 10px; }
.quote__mark { font-family: var(--font-reading); font-size: clamp(72px, 9vw, 112px); line-height: .6; height: .45em; color: var(--color-tertiary); }
.quote__text p { font-family: var(--font-reading); font-style: italic; font-size: clamp(20px, 2.6vw, 28px); line-height: 1.45; color: var(--color-on-surface); max-width: 40ch; text-wrap: pretty; }
.quote__author { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--color-border); }
.quote__avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--color-primary); color: var(--color-tertiary); font-family: var(--font-voice); font-weight: 600; font-size: 18px; border: 1px solid var(--color-tertiary); }
.quote__who { display: flex; flex-direction: column; gap: 2px; }
.quote__name { font-family: var(--font-voice); font-weight: 600; font-size: 18px; color: var(--color-on-surface); }
.quote__role { font-family: var(--font-reading); font-style: italic; font-size: 15px; color: var(--color-secondary); }

.quotes__controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.quotes__dots { display: flex; gap: 8px; padding-inline: 4px; }
.quotes__dot { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1px solid var(--color-tertiary); background: transparent; cursor: pointer; transition: background-color var(--dur-hover) var(--ease-hover), width var(--dur-hover) var(--ease-hover); position: relative; }
/* Bigger invisible hit area for thumbs. */
.quotes__dot::after { content: ""; position: absolute; inset: -12px; }
.quotes__dot[aria-current="true"] { width: 28px; border-radius: var(--radius-full); background: var(--color-primary); border-color: var(--color-primary); }
.quotes__toggle { margin-left: auto; height: 44px; padding: 0 16px 0 18px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-primary); cursor: pointer; }
.quotes__toggle:hover { border-color: var(--color-primary); }
.quotes__progress { height: 2px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.quotes__progress span { display: block; height: 100%; background: var(--color-tertiary); transform-origin: left center; scale: 0 1; }
.quotes__progress span.is-running { animation: quote-progress var(--quote-interval, 5s) linear forwards; }
.quotes.is-paused .quotes__progress span { animation-play-state: paused; }
@keyframes quote-progress { to { scale: 1 1; } }
@media (max-width: 599px) {
  .quote { --tilt: 0deg; }
  .quote__tag { position: static; align-self: flex-start; }
  .quotes__toggle { margin-left: 0; }
  .quotes__controls { justify-content: space-between; }
  /* 13 dots: slimmer so they fit on one line between the arrows. */
  .quotes__dots { gap: 6px; padding-inline: 0; }
  .quotes__dot { width: 8px; height: 8px; }
  .quotes__dot[aria-current="true"] { width: 20px; }
}

/* ---------- Section CTAs: a closing prompt + "Let's talk" at the end of each section ---------- */
.section-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: clamp(56px, 7vw, 96px); padding-top: 28px; border-top: 1px solid var(--color-tertiary);
}
.section-cta__prompt {
  font-family: var(--font-voice); font-weight: 300; font-size: clamp(24px, 3.2vw, 36px); line-height: 1.15; letter-spacing: -0.02em;
  color: var(--color-on-surface); max-width: 24ch; text-wrap: balance;
}
.section-cta--on-band .section-cta__prompt { color: var(--color-surface); }
.section-cta__btn { flex: none; }
.section-cta__btn span { display: inline-block; transition: translate var(--dur-hover) var(--ease-hover); }
.section-cta__btn:hover span, .section-cta__btn:focus-visible span { translate: 4px 0; }
/* Phones: the prompt sits above a full-width button that's easy to hit with a thumb. */
@media (max-width: 599px) {
  .section-cta { flex-direction: column; align-items: stretch; }
  .section-cta__btn { width: 100%; height: 48px; }
}

/* ---------- Hero CV link: revealed from the "Book a call" CTA ---------- */
.hero__cv { display: inline-flex; }
/* Mouse / trackpad: hidden until the CTA row is hovered or holds keyboard focus, then it slides out. */
@media (hover: hover) and (pointer: fine) {
  .hero__cv {
    opacity: 0; visibility: hidden; translate: -12px 0;
    transition: opacity 240ms var(--ease-card), translate 240ms var(--ease-card), visibility 0s linear 240ms;
  }
  .hero__actions:hover .hero__cv, .hero__actions:focus-within .hero__cv {
    opacity: 1; visibility: visible; translate: 0 0;
    transition: opacity 240ms var(--ease-card), translate 240ms var(--ease-card), visibility 0s;
  }
}
/* Wide enough for it: out of flow so the centred CTA stays centred; the CV slides out to its right. */
@media (hover: hover) and (pointer: fine) and (min-width: 600px) {
  .hero__actions { position: relative; }
  .hero__cv { position: absolute; left: calc(100% + 12px); top: 0; white-space: nowrap; }
}
/* Touch screens have no hover, so the CV stays reachable as a quiet text link under the CTA. Narrow windows stack the same way to keep the CTA centred. */
@media (hover: none), (pointer: coarse), (max-width: 599px) {
  .hero__actions { flex-direction: column; align-items: center; gap: 14px; }
  .hero__cv .btn { height: auto; padding: 4px 0; border: 0; background: none; text-decoration: underline; text-decoration-color: var(--color-tertiary); text-underline-offset: 6px; }
}

/* ---------- Section heads ---------- */
.section { padding-block: var(--section-space); }
.section-head { display: flex; flex-direction: column; gap: 16px; margin-bottom: clamp(48px, 6vw, 80px); }
.section-head__eyebrow { display: flex; align-items: baseline; gap: 14px; color: var(--color-tertiary-ink); }
.section-head__num { color: var(--color-tertiary-ink); padding-right: 14px; border-right: 1px solid var(--color-tertiary); }
.section-head__title { max-width: 20ch; font-size: clamp(36px, 5vw, 56px); color: var(--color-on-surface); text-wrap: balance; }
.section-head__lede { max-width: 60ch; color: var(--color-secondary); text-wrap: pretty; }
.section-head--on-band .section-head__eyebrow, .section-head--on-band .section-head__num,
.band .section-head__eyebrow, .band .section-head__num { color: var(--color-tertiary); }
.section-head--on-band .section-head__title { color: var(--color-surface); }

/* ---------- Story: 2×2 spread of experience cards ---------- */
.spread { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 48px; }
.spread__card { padding: 32px; display: flex; flex-direction: column; gap: 10px; }
.spread__card:nth-child(4n+1) { --tilt: -1.4deg; }
.spread__card:nth-child(4n+2) { --tilt: 1.6deg; --drop: 40px; }
.spread__card:nth-child(4n+3) { --tilt: 1deg; }
.spread__card:nth-child(4n+4) { --tilt: -1.8deg; --drop: 40px; }
.spread__years { color: var(--color-tertiary-ink); }
.spread__company { font-size: 26px; color: var(--color-on-surface); }
.spread__role { color: var(--color-secondary); font-style: italic; }
.spread__points { margin: 10px 0 0; padding: 14px 0 0; border-top: 1px solid var(--color-border); list-style: none; display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 799px) {
  .spread { grid-template-columns: 1fr; gap: 28px; }
  .spread__card:nth-child(n) { --drop: 0px; --tilt: 0.8deg; }
  .spread__card:nth-child(even) { --tilt: -0.8deg; }
}

/* ---------- Navy band: scoreboard + capabilities ---------- */
.band { background: var(--color-primary); color: var(--color-surface); }
.band__inner { padding-block: var(--section-space); }
.scoreboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 clamp(64px, 8vw, 104px); }
.scoreboard__item { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; padding: 20px 24px 0; border-left: 1px solid rgba(206, 178, 126, .35); }
.scoreboard__item::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--color-tertiary); transform-origin: left center; transition: scale 900ms var(--ease-card); }
.scoreboard__item:first-child { border-left: none; padding-left: 0; }
.scoreboard__item dt { color: var(--color-on-primary-muted); }
.scoreboard__num {
  font-family: var(--font-voice); font-weight: 300; color: var(--color-tertiary);
  font-size: clamp(64px, 9vw, 128px); line-height: .9; letter-spacing: -0.04em;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
@media (max-width: 719px) {
  .scoreboard { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .scoreboard__item { padding-inline: 16px; }
  .scoreboard__item:nth-child(odd) { border-left: none; padding-left: 0; }
}

.index-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.index-row__item { display: flex; flex-direction: column; gap: var(--space-md); padding: 0 var(--space-lg); border-left: 1px solid var(--color-tertiary); min-width: 0; }
.index-row__item:first-child { padding-left: 0; border-left: none; }
.index-row__num { color: var(--color-tertiary); }
.index-row__title { color: var(--color-surface); }
.index-row__body { color: var(--color-on-primary-muted); }
@media (max-width: 899px) {
  .index-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); }
  .index-row__item:nth-child(odd) { padding-left: 0; border-left: none; }
}
@media (max-width: 559px) {
  .index-row { grid-template-columns: 1fr; }
  .index-row__item { padding: 0; border-left: none; }
}
.band__skills { display: flex; flex-direction: column; gap: 16px; border-top: 1px solid rgba(206, 178, 126, .4); padding-top: 32px; margin-top: 64px; }
.band__skills-label { color: var(--color-tertiary); line-height: 1.7; }
.band__industries { color: var(--color-on-primary-muted); font-style: italic; }

/* Core skills marquee: JS duplicates the list into a track and slides it forever.
   Without JS (or with reduced motion) it stays a normal wrapped list. */
.marquee.is-running { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); padding-block: 4px; }
.marquee__track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee.is-running .marquee__list { flex-wrap: nowrap; padding-right: 8px; }
.marquee.is-running .chip { white-space: nowrap; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { translate: -50% 0; } }

/* ---------- Credential highlights: ivory cards dealt onto the navy band ---------- */
.highlights { margin: 0 0 clamp(64px, 8vw, 104px); display: flex; flex-direction: column; gap: 24px; }
.highlights__label { color: var(--color-tertiary); }
.highlights__deck { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.highlight { padding: 24px 22px; display: flex; flex-direction: column; gap: 10px; }
.highlight:nth-child(1) { --tilt: -1.6deg; }
.highlight:nth-child(2) { --tilt: 1.2deg; --drop: 18px; }
.highlight:nth-child(3) { --tilt: -0.8deg; }
.highlight:nth-child(4) { --tilt: 1.7deg; --drop: 18px; }
.highlight__tag { display: inline-flex; align-items: center; gap: 8px; color: var(--color-tertiary-ink); }
.highlight__tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--color-tertiary); }
.highlight__title { font-size: 20px; line-height: 1.25; }
.highlight__body { color: var(--color-on-surface); }
.highlight__source { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--color-border); color: var(--color-tertiary-ink); font-size: 15px; }
@media (max-width: 1099px) { .highlights__deck { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } }
@media (max-width: 599px) {
  .highlights__deck { grid-template-columns: 1fr; gap: 20px; padding-inline: 6px; }
  .highlight:nth-child(n) { --drop: 0px; --tilt: 0.8deg; }
  .highlight:nth-child(even) { --tilt: -0.8deg; }
}

/* ---------- Where I help: entrance animations (only when motion is allowed) ----------
   [data-animate] blocks get .is-in once they scroll into view. */
.motion-ok .scoreboard:not(.is-in) .scoreboard__item::before { scale: 0 1; }
.scoreboard__item:nth-child(2)::before { transition-delay: 120ms; }
.scoreboard__item:nth-child(3)::before { transition-delay: 240ms; }
.scoreboard__item:nth-child(4)::before { transition-delay: 360ms; }

.index-row__item { transition: translate 700ms var(--ease-card), opacity 700ms var(--ease-card), border-color 900ms var(--ease-card); }
.motion-ok .index-row:not(.is-in) .index-row__item { translate: 0 28px; opacity: 0; border-color: transparent; }
.index-row__item:nth-child(2) { transition-delay: 110ms; }
.index-row__item:nth-child(3) { transition-delay: 220ms; }
.index-row__item:nth-child(4) { transition-delay: 330ms; }

.highlight { transition: transform var(--dur-card) var(--ease-card), box-shadow var(--dur-card) var(--ease-card), translate 800ms var(--ease-card), rotate 800ms var(--ease-card), opacity 600ms var(--ease-card); }
.motion-ok .highlights__deck:not(.is-in) .highlight { translate: 0 64px; rotate: -7deg; opacity: 0; }
.highlight:nth-child(2) { transition-delay: 0s, 0s, 120ms, 120ms, 120ms; }
.highlight:nth-child(3) { transition-delay: 0s, 0s, 240ms, 240ms, 240ms; }
.highlight:nth-child(4) { transition-delay: 0s, 0s, 360ms, 360ms, 360ms; }

/* ---------- Process: a fanned hand of seven cards ---------- */
.fan { list-style: none; margin: 0; padding: 0 20px 48px; display: flex; justify-content: center; }
.fan__card {
  flex: 1 1 0; max-width: 176px; min-width: 0; min-height: 236px; padding: 20px 18px; margin-inline: -8px;
  display: flex; flex-direction: column; gap: 8px; transform-origin: 50% 120%;
  --tilt: calc((var(--i) - 3) * 4deg);
  --drop: calc((var(--i) - 3) * (var(--i) - 3) * 5px);
  z-index: calc(var(--i) + 1);
}
.fan__card--last { border-color: var(--color-primary); border-width: 2px; }
.fan__n { font-size: 40px; color: var(--color-tertiary-ink); margin-bottom: auto; }
.fan__title { font-size: 20px; }
.fan__body { color: var(--color-secondary); font-size: 14px; }
@media (max-width: 1023px) {
  .fan { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; padding: 0 4px; }
  .fan__card { max-width: none; min-height: 0; margin: 0; --drop: 0px; --tilt: 1deg; }
  .fan__card:nth-child(even) { --tilt: -1deg; }
  .fan__n { margin-bottom: 12px; }
}

/* ---------- Contact band + calling card ---------- */
.contact { padding-block: var(--section-space) 96px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 64px; }
.contact__pitch { flex: 1 1 420px; display: flex; flex-direction: column; gap: 24px; }
.contact__title {
  font-family: var(--font-voice); font-weight: 600; color: var(--color-surface);
  font-size: clamp(40px, 10.5vw, 112px); line-height: .92; letter-spacing: -0.04em;
}
.contact__intro { color: var(--color-on-primary-muted); max-width: 44ch; }
.calling-card__name { font-size: 26px; }
.calling-card__role { color: var(--color-tertiary-ink); }
.calling-card__list { margin: 22px 0 26px; padding-top: 18px; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 14px; }
.calling-card__list dt { color: var(--color-secondary); }
.calling-card__list dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.calling-card__list a { color: var(--color-primary); }
.calling-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* Social icons: thin gold rings; fill navy on hover (gold on the navy band). */
.socials { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.social { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--color-tertiary); color: var(--color-primary); transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover); }
.social svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.social svg [fill] { stroke: none; }
.social:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-tertiary); }
.socials--on-band { margin-top: 18px; }
.socials--on-band .social { color: var(--color-tertiary); border-color: rgba(206, 178, 126, .5); }
.socials--on-band .social:hover { background: var(--color-tertiary); border-color: var(--color-tertiary); color: var(--color-primary); }

/* ---------- Contact switcher: email / message form / Calendly in one card ---------- */
.contact-switcher { --tilt: 3deg; flex: 1 1 440px; max-width: 560px; padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 20px; }
/* A card holding a form or calendar lies flat and stays put: tilted, moving inputs are hard to use. */
.contact-switcher.is-flat { --tilt: 0deg; }
@media (hover: hover) { .contact-switcher.is-flat:hover { transform: none; box-shadow: var(--card-shadow); } }

.switcher__bar { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 12px; }
.switcher__heading { text-align: center; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.switcher__count { color: var(--color-tertiary-ink); }
.switcher__title { font-size: 22px; }
.switcher__arrow {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--color-surface); color: var(--color-primary); border: 1px solid var(--color-tertiary);
  font: 600 18px/1 var(--font-voice);
  transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover);
}
.switcher__arrow:hover { background: var(--color-primary); color: var(--color-surface); border-color: var(--color-primary); }

.switcher__dots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 4px; border-radius: var(--radius-full); background: var(--color-neutral); }
.switcher__dot {
  min-height: 36px; padding: 6px 8px; border: 0; border-radius: var(--radius-full); cursor: pointer;
  background: transparent; color: var(--color-secondary);
  transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover);
}
.switcher__dot .crest-label { letter-spacing: .14em; white-space: nowrap; }
.switcher__dot:hover { color: var(--color-primary); }
.tab-short { display: none; }
@media (max-width: 419px) {
  /* "Book a call" doesn't fit a third of a 320px card; the short label keeps the accessible name via .tab-long. */
  .tab-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tab-short { display: inline; }
}
.switcher__dot[aria-selected="true"] { background: var(--color-primary); color: var(--color-surface); }

.switcher__panel { display: flex; flex-direction: column; gap: 6px; padding-top: 18px; border-top: 1px solid var(--color-border); animation: panel-in 240ms var(--ease-card); }
.switcher__panel[hidden] { display: none; }
.switcher__panel .btn { align-self: flex-start; }
@keyframes panel-in { from { opacity: 0; } to { opacity: 1; } }

/* Form */
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { color: var(--color-on-surface); }
.field__optional { color: var(--color-secondary); text-transform: none; letter-spacing: 0; font-family: var(--font-reading); font-style: italic; font-size: 13px; }
.field__input {
  /* 17px keeps iOS from zooming on focus; 48px meets touch-target size. */
  font: 400 17px/1.4 var(--font-reading); color: var(--color-on-surface);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  min-height: 48px; padding: 11px 12px; box-sizing: border-box; width: 100%;
  transition: border-color var(--dur-hover) var(--ease-hover);
}
.field__input--area { min-height: 112px; resize: vertical; }
.field__input:hover { border-color: var(--color-secondary); }
.field__input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.field__input[aria-invalid="true"] { border-color: var(--color-error); }
.field__error { color: var(--color-error); }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { align-self: flex-start; margin-top: 4px; }
.contact-form .btn:disabled { opacity: .6; cursor: progress; }
.contact-form__status { color: var(--color-secondary); min-height: 1.5em; }

/* Calendly */
.calendly-frame iframe { display: block; width: 100%; height: 700px; border: 0; border-radius: var(--radius-sm); background: var(--color-surface); }
.calendly-fallback { display: flex; flex-direction: column; gap: 20px; }

@media (max-width: 719px) {
  .contact-switcher { --tilt: 1.5deg; flex-basis: 100%; max-width: none; padding: 22px 20px 24px; }
  .contact-switcher.is-flat { --tilt: 0deg; }
  .switcher__dot .crest-label { letter-spacing: .08em; font-size: 11px; }
  /* Calendly stacks the calendar above the time slots on narrow screens, so it needs more height. */
  .calendly-frame iframe { height: 1040px; }
}
@media (max-width: 599px) { .contact-switcher { margin-inline: 6px; } }

/* ---------- Site footer: brand + location, nav, contact links ---------- */
.site-footer { border-top: 1px solid rgba(206, 178, 126, .4); }
.site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 48px 64px; padding-block: 72px 56px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.site-footer__name { font-family: var(--font-voice); font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; letter-spacing: -0.03em; color: var(--color-surface); }
.site-footer__role { color: var(--color-tertiary); }
.site-footer__location { display: flex; align-items: center; gap: 10px; margin-top: 14px; color: var(--color-on-primary-muted); line-height: 1.6; }
.site-footer__label { color: var(--color-tertiary); margin-bottom: 16px; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__list a { color: var(--color-surface); text-decoration-color: transparent; overflow-wrap: anywhere; }
.site-footer__list a:hover { color: var(--color-surface); text-decoration-color: var(--color-tertiary); }
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; padding-block: 24px 32px; border-top: 1px solid rgba(206, 178, 126, .4); color: var(--color-on-primary-muted); }
.site-footer__bottom .crest-label { color: var(--color-on-primary-muted); }
.site-footer__top { text-decoration-color: transparent; }
.site-footer__top:hover { color: var(--color-surface) !important; text-decoration-color: var(--color-tertiary); }
.site-footer__refs { font-style: italic; }
/* Three columns need ~1100px: below that the brand block (with the unbreakable location halves) spans the full width. */
@media (max-width: 1099px) {
  .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 539px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 40px; padding-block: 56px 40px; }
  .site-footer__bottom { flex-direction: column; }
}

/* ---------- Text reveal: fades in on entering the viewport, out on leaving ---------- */
:root { --dur-reveal: 600ms; --ease-reveal: cubic-bezier(0.2, 0.7, 0.2, 1); }
.reveal { opacity: 0; transition: opacity var(--dur-reveal) var(--ease-reveal); }
.reveal.is-visible { opacity: 1; transition-delay: var(--reveal-delay, 0ms); }
/* Anything holding keyboard focus is always visible, even inside the fade-out band. */
.reveal:focus-visible, .reveal:focus-within { opacity: 1; transition-delay: 0ms; }

/* ---------- Page loader ---------- */
.loader { display: none; }
.is-loading .loader {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: var(--color-primary);
}
.is-loading body { overflow: hidden; }
.loader__mark { overflow: visible; }
.loader__ring { fill: none; stroke: var(--color-tertiary); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: 50% 50%; animation: loader-ring 1.1s var(--ease-card) forwards; }
.loader__l { fill: var(--color-surface); opacity: 0; transform-box: fill-box; animation: loader-rise 600ms var(--ease-card) 250ms forwards; }
.loader__name { margin: 0; font-family: var(--font-voice); font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--color-on-primary-muted); opacity: 0; animation: loader-rise 600ms var(--ease-card) 450ms forwards; }
.loader__bar { width: 120px; height: 1px; background: var(--color-tertiary); transform-origin: left center; scale: 0 1; animation: loader-bar 1.3s var(--ease-card) 200ms forwards; }
.loader.is-done { animation: loader-out 700ms cubic-bezier(0.7, 0, 0.2, 1) forwards; }
@keyframes loader-ring { to { stroke-dashoffset: 0; } }
@keyframes loader-rise { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes loader-bar { to { scale: 1 1; } }
@keyframes loader-out { to { translate: 0 -100%; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .loader__ring { animation: none; stroke-dashoffset: 0; }
  .loader__l, .loader__name { animation: none; opacity: 1; }
  .loader__bar { animation: none; scale: 1 1; }
  .loader.is-done { animation: loader-fade 250ms linear forwards; }
  @keyframes loader-fade { to { opacity: 0; } }
  .hand__card, .sticker, .chip, .card__photo::after, .marquee__track, .menu, .menu * { animation: none !important; }
  .quote { transition: none; translate: none; }
  .card { transition: none; }
  .card:hover { transform: rotate(var(--tilt, 0deg)) translateY(var(--drop, 0px)) !important; }
  .reveal { opacity: 1; transition: none; }
}

/* Print (recruiters do print CVs): show all text, drop tilts, shadows and dark fills. */
@media print {
  .reveal { opacity: 1 !important; }
  .topnav, .skip-link, .menu, .loader, .hero__actions, .section-cta, .quotes__controls, .quotes__progress, .brands, .switcher__bar, .switcher__dots, .switcher__panel .btn { display: none !important; }
  .hero, .band { background: none !important; color: #141B2C; }
  .hero__name, .contact__title, .section-head--on-band .section-head__title, .index-row__title { color: #141B2C; }
  .card { transform: none !important; box-shadow: none; break-inside: avoid; }
  .card__photo::after { display: none; }
  .index-row__item, .highlight { translate: none !important; rotate: none !important; opacity: 1 !important; }
  .scoreboard__item::before { scale: 1 1 !important; }
  * { animation: none !important; }
  .hand, .fan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .hand__card, .fan__card { width: auto; max-width: none; margin: 0; padding: 16px; }
}