:root{
  --paper: #EEF0EF;
  --paper-raised: #F8F9F8;
  --ink: #14171A;
  --ink-soft: #4A4F54;
  --muted: #9AA0A0;
  --line: #D8DBDA;
  --accent: #D6482A;
  --accent-dim: #FBE2D9;

  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; margin:0; padding:0; }
html{ scroll-behavior: smooth; }

body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* subtle paper grain — keeps the flat colour from feeling too clean/synthetic */
body::before{
  content:'';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.035;
  z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a{ color: inherit; }

.wrap{
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 28px;
}

body > .wrap, footer{ position: relative; z-index: 1; }

/* ---------- Top bar ---------- */
.topbar{
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(238,240,239,0.9);
  backdrop-filter: blur(6px);
  z-index: 10;
}
.topbar .wrap{
  display:flex;
  justify-content: space-between;
  align-items:center;
  padding: 18px 28px;
}
.brand{
  font-family: var(--display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.brand .dot{ color: var(--accent); }
.nav-links{
  display:flex;
  gap: 26px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
}
.nav-links a{ text-decoration:none; padding-bottom: 3px; border-bottom: 1px solid transparent; }
.nav-links a:hover{ color: var(--ink); }
.nav-links a[aria-current="page"]{ color: var(--ink); border-bottom-color: var(--accent); }
.work-with-us{
  font-family: var(--mono);
  font-size: 13px;
  text-decoration: none;
  border: 1px solid var(--ink);
  padding: 8px 14px;
  border-radius: 3px;
  transition: background .15s ease, color .15s ease;
  white-space: nowrap;
}
.work-with-us:hover{ background: var(--ink); color: var(--paper); }

/* ---------- Mobile nav (toggle + panel) ----------
   Both pieces are display:none by default, so above the 760px breakpoint
   they never render and the desktop nav is untouched. The media query at
   the bottom of this file is the only place they are switched on. */
.nav-toggle{
  display: none;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.nav-toggle:hover{ border-color: var(--accent); color: var(--accent); }
.nav-toggle .bars{
  display: block;
  position: relative;
  width: 18px;
  height: 12px;
}
.nav-toggle .bars span{
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle .bars span:nth-child(1){ top: 0; }
.nav-toggle .bars span:nth-child(2){ top: 5px; }
.nav-toggle .bars span:nth-child(3){ top: 10px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){ opacity: 0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

.mobile-nav{
  display: none;
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  border-top: 1px solid transparent;
  transition: max-height .25s ease, visibility .25s ease, border-top-color .25s ease;
}
.mobile-nav.open{
  max-height: 420px;
  visibility: visible;
  border-top-color: var(--line);
}
/* .topbar .wrap also matches this element, so the row layout it sets
   (space-between / align-items:center) is explicitly reset here. */
.mobile-nav .wrap{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding-top: 4px;
  padding-bottom: 20px;
}
.mobile-nav a{
  font-family: var(--mono);
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a:hover{ color: var(--ink); }
.mobile-nav a[aria-current="page"]{ color: var(--ink); }
.mobile-nav a[aria-current="page"]::before{
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 9px;
  vertical-align: middle;
}
.mobile-nav .mobile-nav-cta{
  margin-top: 18px;
  padding: 13px 16px;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 3px;
}
.mobile-nav .mobile-nav-cta:hover{ background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ---------- Hero ---------- */
.hero{
  padding: 60px 0 56px;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items:center;
}
h1{
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 4.8vw, 50px);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.hero p.lead{
  margin-top: 18px;
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 48ch;
}
.hero-stats{
  display:flex;
  gap: 28px;
  margin-top: 28px;
}
.hero-stats .stat .num{
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
}
.hero-stats .stat .label{
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.hero-visual{
  aspect-ratio: 4/5;
  border-radius: 10px;
  border: 1px solid var(--line);
  position: relative;
  overflow:hidden;
}
.hero-visual img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Trust bar (brand wordmark marquee, index only) ----------
   Two identical groups of wordmarks sit side by side inside the track, so
   animating the track by exactly -50% lands the second group precisely where
   the first started and the loop is seamless. The second group is
   aria-hidden so the brand list is only announced once. Each wordmark is its
   own .marquee-item element, so swapping a name for an <img> later is a
   one-element change. */
.trustbar{ padding: 34px 0 38px; }
.marquee{
  position: relative;
  overflow: hidden;
  min-height: 40px; /* space reserved up front so nothing shifts */
  margin-top: 6px;
  /* Multi-stop ramp rather than a single hard 7%/93% cut, so wordmarks
     dissolve into the page instead of being clipped by a visible edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 4%, #000 13%, #000 87%, rgba(0,0,0,0.35) 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.35) 4%, #000 13%, #000 87%, rgba(0,0,0,0.35) 96%, transparent 100%);
}
.marquee-track{
  display: flex;
  width: max-content;
  /* 16 wordmarks per group, kept at roughly the same ~30px/s reading pace the
     9-name version ran at, so the longer list doesn't speed the loop up. */
  animation: marquee-scroll 60s linear infinite;
}
.marquee-group{
  display: flex;
  flex: 0 0 auto;
  /* Both groups carry the same drift, so the seam between them never moves
     and the loop stays seamless. See the coast/resume note below. */
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.marquee-item{
  --mq-pad: 26px;
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 40px;
  padding: 0 var(--mq-pad);
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: color .25s ease;
}
/* Hairline tick between wordmarks. It sits exactly on the boundary between two
   items, so the gap reads as a measured editorial list rather than a run-on. */
.marquee-item::before{
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 11px;
  margin-top: -5.5px;
  background: var(--line);
}
/* Accent rule that draws out from the centre on hover. Absolutely positioned
   and scaled, so it can never nudge the track's width or reflow the list. */
.marquee-item::after{
  content: '';
  position: absolute;
  left: var(--mq-pad);
  right: var(--mq-pad);
  bottom: 5px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- Marquee, cursor treatment (desktop pointers only) ----------
   Gated on a real hover-capable pointer so touch devices never get a stuck
   :hover state and keep the plain, always-scrolling strip.

   Pausing an infinite linear animation is, on its own, an abrupt full stop.
   The groups carry a second, transitioned transform that eases 22px further
   in the direction of travel at the moment the animation pauses, 22px being
   almost exactly the distance the track covers in the 0.7s the ease-out runs
   for, so it reads as the list coasting to a halt. On the way out the same
   ease-out unwinds that offset while the animation resumes at full speed:
   the backwards drift is largest at the instant of release and decays, so
   the net motion ramps up rather than snapping back to speed.

   Under the cursor the rest of the list recedes to --muted and the wordmark
   being pointed at comes forward to --ink with the accent rule beneath it,
   so the interaction is per-name rather than the whole strip just freezing. */
@media (hover: hover) and (pointer: fine){
  .marquee:hover .marquee-track{ animation-play-state: paused; }
  .marquee:hover .marquee-group{ transform: translateX(-22px); }
  .marquee:hover .marquee-item{ color: var(--muted); }
  .marquee:hover .marquee-item:hover{ color: var(--ink); }
  .marquee:hover .marquee-item:hover::after{ transform: scaleX(1); }
}

@media (min-width: 761px){
  /* A little more air per name now the list runs to 16. */
  .marquee-item{ --mq-pad: 32px; letter-spacing: 0.045em; }
}

/* ---------- Scroll reveal (index + contact + partnerships) ----------
   The hidden start state is deliberately scoped under .js-reveal, a class
   script.js adds to <html>. With JS disabled, blocked or broken there is no
   .js-reveal ancestor, so none of these rules ever match and every .reveal
   element renders in its normal, fully visible state. Only opacity and the
   slide offset are touched, so nothing around a revealing element moves.

   The effect repeats: script.js adds .is-revealed while an element is in
   view and takes it off again when it leaves, in either scroll direction.
   That means the revealed state is a state the element sits in for as long
   as it is on screen, so there is deliberately NO .js-reveal .reveal.is-revealed
   rule here. Such a rule would be three classes deep and would permanently
   outrank a two-class hover rule like .work-card:hover, pinning the card's
   transform and killing its hover lift. Writing the hidden state as
   :not(.is-revealed) instead means that once an element is revealed nothing
   in this system styles it at all and its own rules apply untouched.

   The slide uses the standalone `translate` property rather than
   transform: translateY(), so it composes with the transform-based hover
   lifts on cards instead of competing with them: an element can be sliding
   up and lifting on hover at the same time. Browsers without `translate`
   simply fade with no slide.

   The transition sits on the bare .reveal class, outside the .js-reveal
   scope, because both directions of the effect need it: the fade in is
   governed by the style the element transitions INTO, which is the state
   where the hidden rule no longer matches. A transition on its own animates
   nothing until a value actually changes, so with JS off it is inert.

   The per-item stagger arrives as the --reveal-delay custom property, set
   inline by script.js. It is written into these two transitions only, rather
   than as an inline transition-delay, which would apply to every transition
   the element has and would leave a card's hover lift lagging behind the
   pointer by up to a quarter of a second. */
.reveal{
  transition:
    opacity .45s ease-out var(--reveal-delay, 0ms),
    translate .45s ease-out var(--reveal-delay, 0ms);
}
.js-reveal .reveal:not(.is-revealed){
  opacity: 0;
  translate: 0 18px;
}

/* ---------- Sections ---------- */
section{ padding: 64px 0; border-top: 1px solid var(--line); }
h2{
  font-family: var(--display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
}
.section-eyebrow{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  padding-left: 11px;
  border-left: 2px solid var(--accent);
}

/* ---------- Page intro (contact page header) ---------- */
.page-intro{ padding: 60px 0 8px; max-width: 70ch; }
.page-intro h1{ margin-top: 12px; }
.page-intro .lead{ margin-top: 14px; font-size: 17px; color: var(--ink-soft); max-width: 56ch; }

/* Behind-the-scenes photo on the partnerships page - mobile only, sits
   between the intro lead and the brand-copy paragraph to break up the two
   blocks of text. Hidden on desktop, where the page already has plenty of
   visual variety from the carousel below. */
.partnerships-bts{ display: none; }

/* ---------- Carousel (shared by YouTube + brand work) ---------- */
.carousel{
  display:flex;
  align-items:center;
  gap: 12px;
}
.carousel-viewport{
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.carousel-track{
  display:flex;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.car-btn{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: border-color .15s ease, color .15s ease;
}
.car-btn:hover{ border-color: var(--accent); color: var(--accent); }

.embed-label{
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.05em;
}

.yt-card{
  box-sizing: border-box;
  padding-right: 16px;
  text-decoration: none;
  color: var(--ink);
  display:block;
}
.yt-thumb{
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper-raised);
}
.yt-thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .2s ease; }
.yt-card:hover .yt-thumb img{ transform: scale(1.04); }
.yt-card:hover .yt-card-title{ color: var(--accent); }
.yt-card-title{
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.3;
  transition: color .15s ease;
}

.social-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.work-card{
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-raised);
  text-decoration: none;
  color: var(--ink);
  display:flex;
  flex-direction: column;
  /* These cards also carry .reveal, and this declaration sits later in the
     file at the same specificity as the .reveal one, so it wins outright and
     has to carry the reveal properties itself or the fade would not run
     here. The hover lift keeps its own quick .15s timing because it rides on
     `transform` while the reveal slide rides on `translate`. */
  transition:
    transform .15s ease,
    border-color .15s ease,
    opacity .45s ease-out var(--reveal-delay, 0ms),
    translate .45s ease-out var(--reveal-delay, 0ms);
}
.work-card:hover{ transform: translateY(-3px); border-color: var(--accent); }
.work-thumb{
  flex: 1;
  background: linear-gradient(150deg, #DDE1DF, #C9CECB);
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding: 12px;
  min-height: 120px;
  overflow: hidden;
}
.work-thumb img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.platform-pill{
  position: relative;
  z-index: 1;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(255,255,255,0.85);
  padding: 4px 9px;
  border-radius: 20px;
}
.work-body{ padding: 16px; }
.work-body .platform{
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.work-body .title{
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
}

/* Brand paragraph + campaign boxes */
.brand-copy p{
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 68ch;
}
.brand-copy p .names{
  color: var(--ink);
  font-weight: 500;
}

.campaign-card{
  box-sizing: border-box;
  padding-right: 20px;
  display:block;
}
.campaign-card .campaign-card-inner{
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-raised);
  text-decoration: none;
  color: var(--ink);
  display:block;
  transition: transform .15s ease, border-color .15s ease;
}
.campaign-card a.campaign-card-inner:hover{ transform: translateY(-3px); border-color: var(--accent); }
.campaign-photo{
  aspect-ratio: 4/3;
  overflow: hidden;
}
.campaign-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.campaign-photo.placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(150deg, #DDE1DF, #C9CECB);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.campaign-body{ padding: 16px; }
.campaign-body .brand-name{
  font-family: var(--display);
  font-weight: 600;
  font-size: 16px;
}
.campaign-body .desc{
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* Partnerships contact / SEO section */
.contact-info{
  max-width: 78ch;
}
.contact-info h2{ margin-bottom: 18px; }
.contact-info p{
  font-size: 16px;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.contact-info strong{ color: var(--ink); font-weight: 600; }
.faq-block{
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.faq-item h3{
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 6px;
}
.faq-item p{
  font-size: 15px;
  color: var(--ink-soft);
  margin-bottom: 0;
}
.contact-info .direct-email{
  display:inline-block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 15px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
}
.contact-info .direct-email:hover{ border-bottom-color: var(--accent); }

/* Newsletter — latest issue feature */
.newsletter-feature{
  display:grid;
  grid-template-columns: 220px 1fr;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-top: 24px;
}
.issue-cover{ display:block; background: var(--line); }
.issue-cover img{ width:100%; height:100%; object-fit:cover; display:block; min-height: 180px; }
.issue-body{ padding: 28px; display:flex; flex-direction:column; justify-content:center; gap: 8px; }
.issue-tag{
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.issue-title{
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.01em;
}
.issue-excerpt{ color: var(--ink-soft); font-size: 15px; max-width: 54ch; }
.issue-actions{ display:flex; gap: 22px; margin-top: 10px; flex-wrap: wrap; align-items:center; }
.issue-link{
  font-family: var(--mono);
  font-size: 13px;
  text-decoration:none;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 18px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background .15s ease;
}
.issue-link:hover{ background: var(--accent); }
.issue-sub{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.issue-sub:hover{ color: var(--ink); border-bottom-color: var(--ink); }

/* No Pickles — launch story + issue archive */
.launch-links{ display:flex; gap: 22px; flex-wrap: wrap; margin-top: 20px; }
.launch-links a{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.launch-links a:hover{ color: var(--ink); border-bottom-color: var(--ink); }

.issue-archive{ margin-top: 24px; display:flex; flex-direction:column; }
.issue-archive-item{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
}
.issue-archive-item:first-child{ border-top: none; }
.issue-archive-item:hover .issue-archive-title{ color: var(--accent); }
.issue-archive-title{
  font-family: var(--display);
  font-weight: 500;
  font-size: 15px;
  transition: color .15s ease;
}
.issue-archive-date{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Contact - subtle */
.contact-line{
  padding: 40px 0;
  border-top: 1px solid var(--line);
  display:flex;
  justify-content: space-between;
  align-items:center;
  flex-wrap: wrap;
  gap: 16px;
}
.contact-line p{
  font-size: 15px;
  color: var(--ink-soft);
}
.contact-line a.email{
  font-family: var(--mono);
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-dim);
}
.contact-line a.email:hover{ border-bottom-color: var(--accent); }

footer{
  padding: 24px 0 40px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  display:flex;
  justify-content: space-between;
}

@media (max-width: 760px){
  .hero{ grid-template-columns: 1fr; }
  .hero-visual{ order:-1; aspect-ratio: 16/10; }
  .social-row{ grid-template-columns: 1fr; }
  .newsletter-feature{ grid-template-columns: 1fr; }
  .issue-cover img{ aspect-ratio: 16/9; min-height: 0; }
  .nav-links{ display:none; }
  .work-with-us{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav{ display:block; }
  .contact-line{ flex-direction:column; align-items:flex-start; }
  footer{ flex-direction:column; gap:6px; }
  .partnerships-bts{
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0 32px;
  }
  .marquee-item{ --mq-pad: 18px; font-size: 14px; letter-spacing: 0.03em; }
  /* Narrower names at this size mean a shorter track, so the duration comes
     down with it and the strip scrolls at the same pace it does on desktop. */
  .marquee-track{ animation-duration: 46s; }
  .marquee{
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 9%, #000 91%, transparent 100%);
  }
}

/* ---------- Reduced motion ----------
   Everything that moves is switched off here: the marquee sits still (and
   drops its duplicate half, which only exists to make the loop seamless),
   and revealed content is simply present with no fade or slide. The JS side
   checks the same media query, so the counters skip straight to their final
   values. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .marquee{ overflow-x: auto; }
  .marquee-track{ animation: none; }
  .marquee-track > [aria-hidden="true"]{ display: none; }
  /* No coast/resume drift either, the strip is scrolled by hand here. */
  .marquee-group,
  .marquee:hover .marquee-group{ transform: none; transition: none; }
  .marquee-item, .marquee-item::after{ transition: none; }
  /* Matches the two selectors the reveal system now uses, so the hidden
     state is cancelled whichever class combination an element happens to be
     in. Nothing here sets `transform`, so the cards' hover lifts are left
     alone. */
  .reveal{ transition: none; }
  .js-reveal .reveal:not(.is-revealed){
    opacity: 1;
    translate: none;
    transition: none;
  }
}