/* ============================================================
   Media by Emelia — style.css
   Emelia's palette, and one page-long phone the whole site scrolls down.
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Colour */
  /* Emelia's palette */
  --orange:     #C04E20;   /* THE orange — wordmark, block, titles, buttons (one shade everywhere) */
  --orange-deep:var(--orange);
  --orange-hover:#A84318;
  --sky:        #D1E7F5;   /* pale blue — inside the phone */
  --steel:      #386989;   /* steel blue — phone outline, eyebrows, icons */
  --pale:       #EBF5FE;   /* palest blue — page background */
  --on-orange:  #FFFFFF;   /* text on orange boxes: white is the only light colour that passes contrast on this orange */

  --bg:         var(--pale);
  --bg-soft:    transparent;
  --surface:    var(--pale); /* no white: light surfaces use the palest blue */
  --ink:        #203B52;   /* deep steel navy for body text (darker cousin of the steel blue) */
  --ink-soft:   #3E5A70;
  --phone:      var(--steel);
  --accent:     var(--steel);
  --accent-dark:#203B52;
  --blue:       var(--orange);
  --blue-deep:  var(--orange);
  --lemon:      #F3D9C9;   /* soft peach — badges, small notes */
  --tint:       #DDEBF6;   /* icon chips */
  --line:       #BFD6E6;

  /* Type */
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-hand:    'Caveat', 'Segoe Print', cursive;
  --font-text:    'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif; /* running paragraphs: Light 300 */
  --font-mark:        'Bodoni Moda', 'Didot', 'Bodoni 72', serif;          /* hero MEDIA / EMELIA */
  --font-mark-script: 'Corinthia', 'Snell Roundhand', cursive;           /* hero "BY" */
  --font-display: 'Anton', 'Impact', 'Arial Narrow Bold', sans-serif;  /* heavy condensed caps (Montelisa stand-in) */
  --font-label:   'Roboto Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif; /* uppercase, widely spaced labels */

  /* Rhythm */
  --container: 1200px;
  --radius:    20px;
  --blob:      28px 28px 28px 8px;   /* funky: one tight corner */
  --blob-flip: 28px 28px 8px 28px;
  --radius-sm: 12px;
  --section-y: clamp(3.5rem, 7vw, 6rem); /* condensed rhythm */

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 0.35s;

  /* Shadows — soft, never harsh */
  --shadow-sm: 0 1px 2px rgba(20, 33, 61, 0.04), 0 4px 12px rgba(20, 33, 61, 0.04);
  --shadow-md: 0 2px 4px rgba(20, 33, 61, 0.04), 0 12px 32px rgba(20, 33, 61, 0.08);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px; /* clear the sticky nav on anchor jumps */
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* Visible, consistent focus for keyboard users */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--pale);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus-visible { top: 0; }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.container--narrow { max-width: 780px; }

.section { padding-block: var(--section-y); }
.section--soft { background: transparent; }
.section--tight { padding-block: 0 clamp(4rem, 8vw, 6rem); }

.section__head { max-width: 640px; margin-bottom: clamp(2rem, 4.5vw, 3rem); }

.section__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.6vw, 3.9rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Handwritten accent words inside headlines: bigger, steel blue */
.accent {
  font-family: var(--font-hand);
  font-variation-settings: normal;
  font-weight: 600;
  font-size: 1.05em;
  line-height: 0.8;
  letter-spacing: 0;
  text-transform: none;
  color: var(--steel);
  padding-right: 0.1em; /* Caveat leans right; keeps a clear gap before the next word */
}
.section__title--center { text-align: left; }   /* all text is left-aligned site-wide */
/* Keeps the last few words of a paragraph together so one word isn't left alone on the final line */
.nowrap { white-space: nowrap; }
/* Hand-placed line breaks: only on screens wide enough for each line to fit on one row */
.br-wide { display: none; }
@media (min-width: 1000px) { .br-wide { display: inline; } }

/* Periwinkle blue for section titles and subheadings */
.section__title,
.card__title { color: var(--blue); }
.timeline__title { color: var(--blue-deep); }
.expect__item h3 { color: var(--on-orange); }

.section__lede {
  margin-top: 1.1rem;
  color: var(--ink-soft);
  font-size: 1.125rem;
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  font-family: var(--font-label);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--center { display: block; text-align: left; } /* every label sits left-aligned, even in centred sections */

/* Handwritten accent — used in exactly two places, on purpose */
.hand {
  font-family: var(--font-hand);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--speed) var(--ease),
    color var(--speed) var(--ease),
    transform var(--speed) var(--ease),
    box-shadow var(--speed) var(--ease),
    border-color var(--speed) var(--ease);
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--orange-deep);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--orange-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--line);
}
.btn--ghost:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

.btn--light {
  background: var(--lemon);
  color: var(--ink);
}
.btn--light:hover {
  background: #FFE3CF;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.btn--lg { padding: 1em 1.9em; font-size: 1rem; }
.btn--full { width: 100%; }
.btn--nav { padding: 0.65em 1.3em; }

/* ---------- Navigation ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(207, 233, 251, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}
.nav.is-scrolled {
  background: rgba(207, 233, 251, 0.9);
  border-bottom-color: var(--line);
}

.nav__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 84px;
  transition: height var(--speed) var(--ease);
}
.nav.is-scrolled .nav__inner { height: 66px; } /* nav gently shrinks on scroll */

/* ---------- Logo: the hero wordmark in miniature ----------
   Same fonts, proportions and overlaps as the big "MEDIA BY EMELIA",
   so every placement reads as one logo. Set the size with font-size. */
.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
  white-space: nowrap;
  font-family: var(--font-mark);
  font-optical-sizing: auto;   /* sturdier hairlines at small sizes */
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--orange);
}
.logo__word { text-transform: uppercase; }
.logo__by {
  display: inline-block;
  font-family: var(--font-mark-script);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.88em;
  line-height: 0;
  margin-inline: -0.25em -0.17em;    /* same tuck as the hero: B over the A, Y meets the E */
  transform: translateY(-0.174em);   /* same lift as the hero */
}
.nav__logo { font-size: 1.5rem; }

.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.nav__links > a:not(.btn) {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: color var(--speed) var(--ease);
}
.nav__links > a:not(.btn):hover,
.nav__links > a.is-active { color: var(--ink); }

/* Hamburger */
.nav__toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.nav__toggle-bar {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform var(--speed) var(--ease), top var(--speed) var(--ease);
}
.nav__toggle-bar:nth-child(1) { top: 17px; }
.nav__toggle-bar:nth-child(2) { top: 25px; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { top: 21px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero { position: relative; }
/* Phone width, shared by the hero and the page-long phone */
main {
  --phone-w: min(72vw, 800px);
  --frame: 7px;                          /* phone outline thickness */
  --screen-pad: clamp(2rem, 6vw, 4.5rem); /* breathing room inside the screen */
}

/* The stage shows the top half of the phone above the orange block */
.hero__stage {
  position: relative;
  /* top half of the screen: the phone and wordmark. The orange block fills the rest. */
  height: 50vh;
  height: 50svh;
  /* never so short that the wordmark crowds the phone's speaker */
  min-height: calc(108px + var(--phone-w) * 0.12 + min(10.75vw, 129px));
}

.hero__mark-container {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

/* Wordmark sizes itself to its container (cqi) so it stays on one line */
.hero__mark-wrap { container-type: inline-size; }

.hero__mark {
  display: flex;
  align-items: baseline;
  gap: 0.1em;
  white-space: nowrap;
  font-family: var(--font-mark);
  font-optical-sizing: auto;  /* finer hairlines at big sizes */
  font-size: 10.75vw;
  font-size: 10.75cqi;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
  color: var(--blue);
  /* letters stand exactly on the orange block (measured against Bodoni Moda 900) */
  margin-bottom: -0.13em;  /* a little overlap (invisible, same orange) so no blue sliver shows */
}
.hero__mark-word { display: inline-block; text-transform: uppercase; }
/* On phones the wordmark is small, so use Bodoni's sturdier small-size cut:
   thicker hairlines that don't fade away */
@media (max-width: 560px) {
  .hero__mark { font-optical-sizing: none; font-variation-settings: "opsz" 11; }
}
.hero__mark-by {
  font-family: var(--font-mark-script);
  font-weight: 700;   /* Corinthia's bold, so the strokes hold up next to the heavy capitals */
  text-transform: uppercase;   /* script capitals: BY */
  font-size: 0.88em;
  line-height: 0;     /* BY's size never shifts where MEDIA and EMELIA sit */
  letter-spacing: 0;
  color: var(--orange);
  margin-inline: -0.25em -0.17em;  /* tucks in so BY just overlaps the A and the E */
}

.hero__mark > span {
  opacity: 0;
  transform: translateY(0.18em);
  animation: mark-in 1s var(--ease) forwards;
}
.hero__mark > span:nth-child(2) { animation-delay: 0.12s; }
.hero__mark > span:nth-child(3) { animation-delay: 0.22s; }
.hero__mark > .hero__mark-by { --rest: -0.174em; } /* B level with the capitals; the Y's tail dips into the block */
@keyframes mark-in {
  to { opacity: 1; transform: translateY(var(--rest, 0)); }
}

/* Solid orange block the phone stands in */
.hero__block {
  position: relative;
  isolation: isolate;
  overflow: hidden;          /* text slides up out of view through the block's top edge */
  min-height: 50vh;          /* fills the bottom half of the screen */
  min-height: 50svh;
  color: #fff;
  padding: clamp(3rem, 6vw, 4.75rem) 0 clamp(6rem, 10vw, 8rem);
}
/* The orange itself, on its own layer so script.js can fade it as you scroll */
.hero__block::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--orange-deep);
  opacity: var(--block-fade, 1);
}
.hero__block > .container { will-change: transform, opacity; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
  opacity: 0;
  animation: fade-up 0.9s var(--ease) 0.45s forwards;
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.hero__lede {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 30rem;
}

.hero__copy {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.92);
  max-width: 32rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}
/* Buttons inverted on the orange block */
.hero__block .btn--primary { background: var(--pale); color: var(--ink); }
.hero__block .btn--primary:hover { background: var(--sky); }
.hero__block .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.hero__block .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.14); } /* soft light wash */
.hero__block :focus-visible { outline-color: #fff; }

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.85);
}
.hero__scroll-text {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero__scroll-line {
  width: 1.5px;
  height: 34px;
  background: rgba(255, 255, 255, 0.3);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  transform: translateY(-100%);
  animation: scroll-drip 2.2s var(--ease) infinite;
}
@keyframes scroll-drip {
  0%   { transform: translateY(-100%); }
  55%  { transform: translateY(0); }
  100% { transform: translateY(100%); }
}

/* ---------- The page-long phone ---------- */
/* main is the phone's frame of reference; sections sit above it. */
main { position: relative; }
main > .section, main > .hero { position: relative; z-index: 1; }
/* With the scroll effect on, the hero sits above the next section, whose top is tucked under the orange */
.hero-fx main > .hero { z-index: 2; }

.phone {
  position: absolute;
  top: 108px;                       /* same spot as the hero phone */
  bottom: 3rem;                     /* ends just above the footer */
  left: 50%;
  width: var(--phone-w);
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: var(--bg);           /* screen matches the page outside the phone */
  border: var(--frame) solid var(--phone);
  border-radius: calc(var(--phone-w) * 0.115);
}
/* Speaker, camera, side buttons, home bar */
.phone__speaker, .phone__camera, .phone__btn, .phone__home {
  position: absolute;
  background: var(--phone);
}
.phone__speaker {
  top: calc(var(--phone-w) * 0.062);
  left: 50%;
  width: calc(var(--phone-w) * 0.13);
  height: calc(var(--phone-w) * 0.03);
  transform: translateX(-70%);
  border-radius: 999px;
}
.phone__camera {
  top: calc(var(--phone-w) * 0.062);
  left: calc(50% + var(--phone-w) * 0.085);
  width: calc(var(--phone-w) * 0.034);
  height: calc(var(--phone-w) * 0.034);
  border-radius: 50%;
}
.phone__btn { width: 6px; border-radius: 3px; }
.phone__btn--l { left: -13px; top: calc(var(--phone-w) * 0.45); height: calc(var(--phone-w) * 0.17); }
.phone__btn--r { right: -13px; top: calc(var(--phone-w) * 0.55); height: calc(var(--phone-w) * 0.27); }
.phone__home {
  bottom: calc(var(--phone-w) * 0.03);
  left: 50%;
  width: calc(var(--phone-w) * 0.34);
  height: 6px;
  transform: translateX(-50%);
  border-radius: 999px;
}

/* Inside the phone: content sits within the screen, well clear of the outline */
.inside .container {
  max-width: var(--phone-w);
  padding-inline: calc(var(--frame) + var(--screen-pad));
}
.inside .section__title--center { text-align: left; }

/* Outside: only boxes (cards, pills, panels, the form) spill past the phone.
   Loose text (headings, intro copy) stays inside the screen on both sides. */
.outside .section__head {
  width: var(--phone-w);
  max-width: var(--phone-w);
  margin-inline: calc((100% - var(--phone-w)) / 2);
  padding-inline: calc(var(--frame) + var(--screen-pad));
}
.outside .contact {
  margin-left: calc((100% - var(--phone-w)) / 2 + var(--frame) + var(--screen-pad));
}
.outside .contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); } /* narrower gap so the headline sits evenly beside the form */

/* Vertical timeline (used inside the phone at every width) */
.timeline.timeline--vertical { grid-template-columns: 1fr; row-gap: 0; }
.timeline.timeline--vertical::before { display: none; }
.timeline--vertical .timeline__step {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 1.5rem;
  padding-bottom: 2.75rem;
}
.timeline--vertical .timeline__step::before {
  content: "";
  position: absolute;
  left: 23px;
  top: 48px;
  bottom: 0;
  width: 1.5px;
  background: var(--line);
}
.timeline--vertical .timeline__step:last-child { padding-bottom: 0; }
.timeline--vertical .timeline__step:last-child::before { display: none; }
.timeline--vertical .timeline__marker { margin-bottom: 0; flex-shrink: 0; }
.timeline--vertical .timeline__title { margin-top: 0.6rem; }
.timeline--vertical .timeline__copy { max-width: none; }
.process__note { margin-top: 2.5rem; }

/* Swipe-in reveal for "screens" inside the phone (case study, about) */
.reveal--swipe { transform: translateX(56px); }
.reveal--swipe.is-visible { transform: none; }

/* ---------- Image placeholders ---------- */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--orange);
  box-shadow: var(--shadow-sm);
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.photo:hover { transform: scale(1.015); box-shadow: var(--shadow-md); }

.photo__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  color: var(--on-orange);
  text-align: center;
  padding: 1rem;
}
.photo__icon { width: 44px; height: 44px; opacity: 0.85; margin-bottom: 0.35rem; }
.photo__label { font-size: 0.875rem; font-weight: 600; color: var(--on-orange); }
.photo__hint  { font-size: 0.8125rem; color: var(--ink-soft); }

.photo--compare  { aspect-ratio: 4 / 5; width: 100%; }
/* A real photo filling its frame (About portrait) */
.photo__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.photo--portrait { aspect-ratio: 3 / 4; width: 100%; border-radius: 999px 999px var(--radius) var(--radius); } /* arch */
.photo--compare  { aspect-ratio: 4 / 5; }

/* ---------- Problem ---------- */
.problem__body {
  margin-top: 2rem;
  text-align: left;
  display: grid;
  gap: 2.25rem;   /* a little more air between the three paragraphs */
  font-size: 1.1875rem;
  color: var(--ink-soft);
}
.problem__highlight {
  display: grid;
  justify-items: start;
  gap: 0.6rem;
  color: var(--ink);
}
/* The name, set like the big wordmark: Inter 800 with the handwritten "by" */
.problem__mark { font-size: clamp(1.25rem, 5.6vw, 2.6rem); }
/* Second line in the handwritten face, matching the headline accents */
.problem__line {
  display: block;
  font-family: var(--font-hand);
  font-size: clamp(1.75rem, 3.4vw, 2.2rem);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
}

/* Half the usual gap between this section and Services */
#problem { padding-bottom: 0; }
/* Half the usual gap between the service cards and "Who it's for" */
#services { padding-bottom: 0; }
/* Much smaller gap between "No niche restrictions." and "How we work" (a quarter of the usual) */
#who { padding-bottom: 0; }
#process { padding-top: calc(var(--section-y) * 0.5); }
/* A third smaller: About → What you can expect → FAQ, and the quote panel → Contact */
#about   { padding-bottom: calc(var(--section-y) * 2 / 3); }
#expect  { padding-top: calc(var(--section-y) * 2 / 3); padding-bottom: calc(var(--section-y) * 2 / 3); }
#faq     { padding-top: calc(var(--section-y) * 2 / 3); }
#pricing { padding-bottom: calc(clamp(4rem, 8vw, 6rem) * 2 / 3); }
#contact { padding-top: calc(var(--section-y) * 2 / 3); }
/* Half the usual gap between the last-minute note and the case study */
#process    { padding-bottom: calc(var(--section-y) / 2); }
#case-study { padding-top: calc(var(--section-y) / 2); }

/* ---------- Services ---------- */
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;              /* every card the same height */
  gap: 1.25rem;
  /* as wide as the phone plus a small overlap past each side of the outline */
  --overlap: clamp(0.75rem, 2.5vw, 1.75rem);
  width: calc(var(--phone-w) + 2 * var(--overlap));
  margin-inline: calc((100% - var(--phone-w)) / 2 - var(--overlap));
}

.card {
  background: var(--orange);
  color: var(--on-orange);
  border: none;
  border-radius: var(--blob);
  padding: 1.75rem 1.6rem;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
/* scoped to the grid so the hover beats the reveal's resting transform */
.services__grid .card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

/* Orange cards: white text, outlined icon chip */
.card .card__title,
.card .card__copy { color: var(--on-orange); }
.card .card__icon {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: var(--on-orange);
}

.card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--tint);
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.card__icon svg { width: 24px; height: 24px; }

.card__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.card__copy { font-size: 0.9375rem; color: var(--ink-soft); }

/* ---------- Who I work with ---------- */
.who { text-align: left; }
.who__copy {
  margin-top: 1.5rem;
  font-size: 1.1875rem;
  color: var(--ink-soft);
}
.who__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 0.6rem;
  margin-top: 2rem;
}
.who__tags span {
  padding: 0.45em 1.1em;
  border-radius: 999px;
  border: 1px solid var(--orange);
  background: var(--orange);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--on-orange);
  transition: transform var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease);
}
/* On laptops and wider, start a new row of tags at "Local businesses" */
.who__tags-break { display: none; }
@media (min-width: 1000px) {
  .who__tags-break { display: block; flex-basis: 100%; height: 0; }
  /* row spacing comes from the tags' own margins, so the invisible break adds none */
  .who__tags { row-gap: 0; }
  .who__tags span { margin-block: 0.3rem; }
}
.who__tags span:hover { transform: translateY(-2px); background: var(--orange-hover); border-color: var(--orange-hover); }
.who__note {
  margin-top: 1.5rem;
  font-family: var(--font-hand);
  font-size: clamp(1.9rem, 3.6vw, 2.4rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--steel);
}
.who .accent { display: block; line-height: 1; margin-top: 0.05em; }   /* "no time to post it." on its own line */

/* ---------- Timeline ---------- */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  counter-reset: step;
  position: relative;
}
/* Connecting line across the markers (desktop) */
.timeline::before {
  content: "";
  position: absolute;
  top: 24px;
  left: calc(12.5% + 24px);
  right: calc(12.5% + 24px);
  height: 1.5px;
  background: var(--line);
}

.timeline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.timeline__marker {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  border: 1.5px solid var(--orange);
  margin-bottom: 1.5rem;
  transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
  z-index: 1; /* sit above the connecting line */
}
.timeline__num {
  font-family: var(--font-label);
  font-size: 1rem;
  font-weight: 500;
  color: var(--on-orange);
}
.timeline__step:hover .timeline__marker {
  border-color: var(--orange-hover);
  background: var(--orange-hover);
}

.timeline__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.timeline__copy {
  font-size: 1.125rem;   /* same as the other intro/body text */
  color: var(--ink-soft);
  max-width: 16.5rem;
}

.process__note {
  margin: clamp(3rem, 6vw, 4.5rem) 0 0;
  max-width: 34rem;
  padding: 1.6rem 2rem;
  border-radius: var(--blob);
  background: var(--orange);
  color: var(--on-orange);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  text-align: left;
  text-wrap: balance;
}
.process__note-lead {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* ---------- Case study ---------- */
.case__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.case__client {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.case__client .eyebrow { margin-bottom: 0.35rem; }
.case__client > div { min-width: 0; } /* lets the big name wrap on very small phones */

.case__avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 4px var(--surface), var(--shadow-sm);
}
.case__avatar--placeholder {
  display: grid;
  place-items: center;
  background: var(--orange);
  color: var(--on-orange);
}
.case__avatar--placeholder svg { width: 30px; height: 30px; }

.case__copy {
  color: var(--ink-soft);
  font-size: 1.0625rem;
}

.case__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

.case__shot { position: relative; }

/* Before / After labels sit on the image, top-left */
.case__label {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  padding: 0.4em 0.95em;
  border-radius: 999px;
  background: var(--orange);
  border: 1.5px solid var(--on-orange);
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-orange);
  box-shadow: var(--shadow-sm);
  pointer-events: none;
}

/* ---------- Before / after reels ----------
   Two strips of Vix's posts running continuously across the full screen width
   (they spill past the phone like the other boxes). Before runs left, After
   runs right. Each list holds two copies of the six posts, so sliding exactly
   one copy's width brings it back to the start without a jump. */
#case-study { overflow-x: hidden; overflow-x: clip; }
.reels {
  --reel-h: clamp(220px, 28vw, 340px);
  --reel-gap: clamp(0.75rem, 1.6vw, 1.25rem);
  --reel-time: 50s;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.reel__label { margin-bottom: 0.75rem; }
.reel { overflow: hidden; padding-block: 0.25rem 1.75rem; }
.reel__track {
  display: flex;
  gap: var(--reel-gap);
  width: max-content;
  animation: reel-scroll var(--reel-time) linear infinite;
}
.reel--reverse .reel__track { animation-direction: reverse; }
@keyframes reel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--reel-gap) / 2)); }
}
/* Every post sits in the same 4:5 frame; posts of other shapes are shown whole, never cropped */
.reel__item {
  flex: none;
  height: var(--reel-h);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--sky);
  box-shadow: var(--shadow-sm);
}
.reel__item img { width: 100%; height: 100%; object-fit: contain; }
/* Pause only when the button is pressed */
.reels.is-paused .reel__track { animation-play-state: paused; }
.reel__toggle {
  padding: 0.6em 1.3em;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
}
.reel__toggle:hover { border-color: var(--ink); background: rgba(32, 59, 82, 0.06); }

/* ---------- About ---------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.about__media { position: relative; max-width: 300px; margin-bottom: 2.25rem; }
/* Sits just below the frame so it stays readable on the pale blue, not on the photo */
.about__note {
  position: absolute;
  right: 0.25rem;
  bottom: -2.5rem;
  transform: rotate(-6deg);
  font-size: 1.65rem;
}

.about__intro {
  margin-top: 1rem;
  color: var(--ink-soft);
}

.about__list {
  margin-top: 1.75rem;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.about__list li {
  position: relative;
  padding: 1rem 0 1rem 2rem;
  border-bottom: 1px solid var(--line);
  line-height: 1.55;
}
/* Small navy tick before each statement */
.about__list li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.45rem;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- What you can expect ---------- */
.expect__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}
.expect__item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem 1rem 1rem;
  background: var(--orange);
  border: none;
  border-radius: 999px;
  transition: transform var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
.expect__grid .expect__item:hover { transform: translateY(-4px) rotate(-1deg); box-shadow: var(--shadow-md); }
.expect__icon {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  color: var(--on-orange);
}
.expect__icon svg { width: 20px; height: 20px; }
.expect__item h3 {
  font-family: var(--font-label);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}
.expect__item p {
  margin-top: 0.15rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--on-orange);
}

/* ---------- Quote panel ---------- */
.quote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1.75rem, 5vw, 3.5rem);
  border-radius: var(--radius);
  background: var(--orange);
  color: var(--on-orange);
}
.quote__title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.02;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.quote__text { max-width: 40rem; }
.quote__text p { color: var(--on-orange); }
.quote__title, .quote .accent { color: var(--on-orange); }
.quote :focus-visible { outline-color: var(--on-orange); }

/* ---------- FAQ ---------- */
.faq {
  border-top: 1px solid var(--line);
}
.faq__item { border-bottom: 1px solid var(--line); }

.faq__heading { font-size: inherit; font-weight: inherit; }

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  text-align: left;
  padding: 1.5rem 0.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color var(--speed) var(--ease);
}
.faq__question:hover { color: var(--accent); }

.faq__chevron {
  position: relative;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.faq__chevron::before,
.faq__chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.75px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--speed) var(--ease);
}
.faq__chevron::before { transform: translate(-50%, -50%); }
.faq__chevron::after  { transform: translate(-50%, -50%) rotate(90deg); }
.faq__question[aria-expanded="true"] .faq__chevron::after { transform: translate(-50%, -50%) rotate(0deg); }

/* Smooth open/close via the grid-rows trick — no JS height maths */
.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
}
.faq__answer-inner { overflow: hidden; }
.faq__answer-inner p {
  padding: 0 0.25rem 1.6rem;
  color: var(--ink-soft);
  max-width: 60ch;
}
.faq__item.is-open .faq__answer { grid-template-rows: 1fr; }

/* ---------- Contact ---------- */
.section--contact { background: transparent; }

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

.contact__copy { margin-top: 1.25rem; color: var(--ink-soft); max-width: 30rem; }
.contact__cta { margin-top: 2rem; }

.contact__details {
  margin-top: 2.25rem;
  display: grid;
  gap: 0.75rem;
}
.contact__details li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9375rem;
}
.contact__details svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.contact__details a {
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  transition: border-color var(--speed) var(--ease);
}
.contact__details a:hover { border-color: var(--ink); }

.contact__form {
  background: var(--orange);
  color: var(--on-orange);
  border: none;
  border-radius: var(--blob);
  padding: clamp(1.75rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 1.25rem;
  scroll-margin-top: 120px;
}

.field { display: grid; gap: 0.45rem; align-content: start; min-width: 0; }
.field input, .field select, .field textarea { width: 100%; min-width: 0; }
.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.field__optional {
  font-weight: 400;
  color: var(--on-orange);
  font-size: 0.8125rem;
  margin-left: 0.25rem;
}
.field label {
  font-family: var(--font-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.field__optional { font-family: var(--font-body); text-transform: none; letter-spacing: 0; }
.field input,
.field select,
.field textarea {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--pale);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  transition: border-color var(--speed) var(--ease), background-color var(--speed) var(--ease);
  resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: #8A90A6; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: #8FC3E3; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--pale);
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--on-orange);
}
.contact__form :focus-visible { outline-color: var(--on-orange); }
/* Submit button inverted so it stands out on the orange form */
.contact__form .btn--primary { background: var(--pale); color: var(--ink); }
.contact__form .btn--primary:hover { background: var(--sky); }
.field input.is-invalid,
.field textarea.is-invalid { border-color: #C56A5A; }

.contact__success {
  text-align: left;
  font-weight: 600;
  color: var(--on-orange);
}

/* Custom select arrow so it matches the inputs */
.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5572' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 16px;
}

/* ---------- Running text: Roboto Condensed Light ----------
   Paragraph copy only; buttons, menu, form fields, tags and FAQ questions stay in Inter. */
.hero__copy,
.section__lede,
.problem__body > p:not(.problem__highlight),
.card__copy,
.who__copy,
.timeline__copy,
.process__note,
.case__copy,
.about__intro,
.about__list li,
.expect__item p,
.faq__answer-inner p,
.quote__text p,
.contact__copy,
.contact__success {
  font-family: var(--font-text);
  font-weight: 300;
}

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: 3rem;
}
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.footer__logo { font-size: 1.5rem; }
.footer__links { display: flex; flex-wrap: wrap; gap: 1.75rem; }
.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--ink-soft);
  transition: color var(--speed) var(--ease);
}
.footer__links a:hover { color: var(--ink); }
.footer__links svg { width: 18px; height: 18px; }
.footer__copyright { font-size: 0.8125rem; color: var(--ink-soft); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Service cards slide in from off-screen: left column from the left,
   right column from the right (alternating when stacked on phones),
   and slide back out the same way as they leave the screen (script.js 3c).
   Each card sits in a .services__slot that stays put, so the page can tell
   when the slot scrolls into view even while the card is still off-screen. */
#services { overflow-x: hidden; overflow-x: clip; }  /* no sideways scroll while cards wait off-screen */
.services__slot { display: flex; min-width: 0; }
.services__slot > .card { flex: 1; }
.services__slot:nth-child(odd)  { --slide-from: calc(-50vw - 100%); }
.services__slot:nth-child(even) { --slide-from: calc(50vw + 100%); }
.services__grid .card.reveal {
  transform: translateX(var(--slide-from, 0));
  box-shadow: 0 0 0 transparent, 0 0 0 transparent, inset 0 0 0 100vmax rgba(255, 255, 255, 0); /* same shape as the hover shadow, so it fades smoothly */
  transition:
    opacity 1.1s var(--ease),
    transform 1.1s var(--ease),
    box-shadow var(--speed) var(--ease);
}
.services__grid .card.reveal.is-visible { transform: none; }
/* Hover: lift plus the same soft light wash as "See My Work" */
.services__grid .card.reveal.is-visible:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md), inset 0 0 0 100vmax rgba(255, 255, 255, 0.14);
}

/* ============================================================
   Responsive
   ============================================================ */

/* Tablet */
@media (max-width: 1024px) {
  .timeline { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
  .timeline::before { display: none; }
  .expect__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Narrow two-column contact layout: stack the paired form fields */
@media (min-width: 821px) and (max-width: 1024px) {
  .field-row { grid-template-columns: 1fr; }
}

/* Hamburger menu: below this width the links no longer fit on one row */
@media (max-width: 960px) {
  html { scroll-padding-top: 84px; }

  .nav__toggle { display: block; }

  .nav__links {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(20rem, 85vw);
    background: rgba(214, 237, 252, 0.98);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-left: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.75rem;
    padding: 6rem 2.5rem 3rem;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
    box-shadow: -24px 0 60px rgba(20, 33, 61, 0.06);
  }
  .nav__links.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.45s var(--ease), visibility 0s;
  }
  .nav__links > a:not(.btn) { font-size: 1.25rem; font-weight: 600; color: var(--ink); }
  .nav__links .btn--nav { margin-top: 0.5rem; padding: 0.9em 1.8em; font-size: 1rem; }

}

/* Stacked layouts */
@media (max-width: 820px) {
  .hero, main { --phone-w: min(86vw, 520px); }
  .outside .contact { margin-left: 0; grid-template-columns: 1fr; }
  .outside .contact__intro {
    width: var(--phone-w);
    margin-inline: calc((100% - var(--phone-w)) / 2);
    padding-inline: calc(var(--frame) + var(--screen-pad));
  }
  .hero__grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .hero__actions { margin-top: 1.5rem; }
  .hero__scroll { display: none; }
  .hero__block { padding-bottom: 4rem; }

  .case__head { grid-template-columns: 1fr; align-items: start; }
  .about, .contact { grid-template-columns: 1fr; }
  .about__media { max-width: 100%; }
  .about__media { margin-inline: auto; width: 100%; }
  .about__note { right: 0.5rem; }

  .quote { flex-direction: column; align-items: flex-start; }

  /* Vertical timeline with a left rail */
  .timeline { grid-template-columns: 1fr; row-gap: 0; }
  .timeline__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 1.5rem;
    padding-bottom: 2.75rem;
  }
  .timeline__step::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 48px;
    bottom: 0;
    width: 1.5px;
    background: var(--line);
  }
  .timeline__step:last-child { padding-bottom: 0; }
  .timeline__step:last-child::before { display: none; }
  .timeline__marker { margin-bottom: 0; flex-shrink: 0; }
  .timeline__title { margin-top: 0.6rem; }
  .timeline__copy { max-width: none; }
}

/* Small phones */
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .services__grid, .expect__grid { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .services__grid { --overlap: 0.75rem; grid-auto-rows: 1fr; } /* still all the same size when stacked */
  .case__compare { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .hero__actions .btn { flex: 1 1 auto; }
  .case__client { gap: 1rem; }
  .case__avatar { width: 64px; height: 64px; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* Very small phones (320–360px): keep long words clear of the phone edge */
@media (max-width: 360px) {
  .section__title { font-size: 2.1rem; }
  .contact__details li { font-size: 0.75rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .hero__grid, .hero__mark > span { opacity: 1; transform: none; animation: none; }
  /* Reels stand still and can be scrolled sideways by hand instead */
  .reel { overflow-x: auto; }
  .reel__track { animation: none; }
  .reel__item[aria-hidden="true"], .reel__toggle { display: none; }
  .hero__mark > .hero__mark-by { transform: translateY(var(--rest)); }
}