/* Ragged Edge / Marshmallow-style case study — look and feel port.
   Typeface: itc-avant-garde-gothic-pro (Adobe Typekit, 300 + 700, roman + italic). */

:root {
  --cream: #fbf8f5;
  --ink: #181f1f;
  --pink: #ff8bd0;
  --orange: #f05a1e;
  --lilac: #c9b8ff;
  --sky: #9fd4ff;
  --grey: rgba(24, 31, 31, 0.55);
  --rule: rgba(24, 31, 31, 0.14);
  --gutter: 40px;
  --radius: 24px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "itc-avant-garde-gothic-pro", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.45;
}

img,
video {
  display: block;
  width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow {
  max-width: 860px;
}

/* ---------- type scale ---------- */
.display {
  font-weight: 700;
  font-size: clamp(3.2rem, 11vw, 10rem);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
}

.h1 {
  font-weight: 700;
  font-size: clamp(2.2rem, 5.6vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
}

.h2 {
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
}

.lede {
  font-size: clamp(1.15rem, 1.9vw, 1.75rem);
  line-height: 1.34;
  letter-spacing: -0.01em;
  margin: 0;
}

.body-copy {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.5;
  margin: 0;
}

.eyebrow {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 18px;
}

.muted {
  color: var(--grey);
}

/* ---------- header ---------- */
header.site {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  mix-blend-mode: difference;
  color: #fff;
}

.brand-logo {
  position: fixed;
  top: 22px;
  left: var(--gutter);
  z-index: 61;
  display: flex;
  align-items: center;
}

.brand-logo img {
  display: block;
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1) sepia(0.3) saturate(0.2) hue-rotate(0deg);
}

header.site .mark {
  display: none;
}

header.site nav {
  display: flex;
  gap: 26px;
  font-size: 0.85rem;
}

@media (max-width: 800px) {
  header.site nav {
    display: none;
  }
}

/* ---------- hero ---------- */
.hero {
  padding-top: 190px;
  padding-bottom: 40px;
}

.hero .display {
  margin-bottom: 28px;
}

.hero .lede {
  max-width: 720px;
}


/* ---------- chapter rail ---------- */
.chapters {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: rgba(251, 248, 245, 0.8);
  backdrop-filter: blur(10px);
  pointer-events: none;
}

.chapters .inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(12px, 1.6vw, 28px);
  padding: 18px var(--gutter);
  font-family: "itc-avant-garde-gothic-pro", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  pointer-events: auto;
}

.chapters a {
  white-space: nowrap;
  color: #8b8b86;
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  transition: color 0.3s ease;
}

.chapters a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.chapters a:hover::after,
.chapters a.is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.chapters a:hover,
.chapters a.is-active {
  color: #ff5a00;
}

.chapters .chapter-logo {
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  padding: 0;
}

.chapters .chapter-logo::after,
.chapters .chapter-logo:hover::after {
  display: none;
}

.chapters .chapter-logo img {
  height: clamp(26px, 3.2vw, 36px);
  width: auto;
  transition: transform 0.2s ease, filter 0.35s ease, opacity 0.35s ease;
  display: block;
  filter: grayscale(100%) brightness(2.1) contrast(0.18);
  opacity: 0.45;
}

.chapters.is-scrolled .chapter-logo img {
  filter: none;
  opacity: 1;
}

.chapters .chapter-logo:hover img {
  transform: scale(1.08);
}

.chapters.is-scrolled .chapter-logo:hover img {
  transform: scale(1.08);
}

@media (max-width: 700px) {
  .chapters .chapter-logo {
    margin-right: 12px;
    flex-shrink: 0;
  }
}

@media (max-width: 700px) {
  .chapters .inner {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .chapters .inner::-webkit-scrollbar {
    display: none;
  }
}


/* ---------- sections ---------- */
section.block {
  padding-top: clamp(42px, 6vw, 84px);
  padding-bottom: clamp(42px, 6vw, 84px);
}

/* ---------- graphic divider ---------- */
.graphic-block {
  padding-top: clamp(48px, 6vw, 90px);
  padding-bottom: 0;
}

.graphic-block .media {
  border-radius: 0;
  background: transparent;
}

.graphic-block img {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}


.split {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}

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

@media (max-width: 900px) {
  .split,
  .duo {
    grid-template-columns: 1fr;
  }
}

.media {
  border-radius: var(--radius);
  overflow: hidden;
  background: #efe9e3;
}

.media.tint-pink {
  background: var(--pink);
}
.media.tint-orange {
  background: var(--orange);
}
.media.tint-lilac {
  background: var(--lilac);
}

.stack > * + * {
  margin-top: 20px;
}

.stat {
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}

.stat .figure {
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: -0.035em;
}

.quote {
  padding-top: clamp(64px, 9vw, 130px);
  padding-bottom: clamp(64px, 9vw, 130px);
  text-align: center;
}

.quote p {
  font-weight: 700;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 auto;
  max-width: 18ch;
}

.quote .attrib {
  margin-top: 32px;
  font-size: 0.95rem;
}

.chapter-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin-bottom: clamp(28px, 5vw, 56px);
}

.chapter-head .num {
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
}

.band {
  background: var(--ink);
  color: var(--cream);
}

.band .muted {
  color: rgba(251, 248, 245, 0.6);
}

.band .chapter-head,
.band .stat {
  border-color: rgba(251, 248, 245, 0.2);
}

/* ---------- end / footer ---------- */
.endcap {
  padding-top: clamp(90px, 14vw, 200px);
  padding-bottom: clamp(90px, 14vw, 200px);
  text-align: center;
}

.endcap .display {
  letter-spacing: -0.04em;
}

.pill {
  display: inline-block;
  margin-top: 36px;
  padding: 14px 28px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.9rem;
  transition:
    background 0.25s ease,
    color 0.25s ease;
}

.pill:hover {
  background: var(--ink);
  color: var(--cream);
}

footer.site {
  background: var(--ink);
  color: var(--cream);
  padding: clamp(40px, 5vw, 80px) 0 40px;
}

footer.site .cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

@media (max-width: 900px) {
  footer.site .cols {
    grid-template-columns: 1fr 1fr;
  }
}

footer.site .k {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 248, 245, 0.55);
  margin-bottom: 10px;
}

footer.site .legal {
  margin-top: 64px;
  padding-top: 20px;
  border-top: 1px solid rgba(251, 248, 245, 0.2);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: space-between;
  font-size: 0.78rem;
  color: rgba(251, 248, 245, 0.6);
}

/* ---------- reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}

/* ---------- animated UI dashboard marquee ---------- */
.dash {
  padding-top: clamp(56px, 8vw, 110px);
  padding-bottom: 0;
  overflow: hidden;
}

.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.marquee-track {
  display: flex;
  gap: 28px;
  width: max-content;
  animation: marquee-slide 46s linear infinite;
}

.marquee:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marquee-slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

.tile {
  position: relative;
  flex: 0 0 auto;
  width: 230px;
  height: 230px;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  font-weight: 700;
  overflow: hidden;
}

.tile .t-label {
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.tile .t-foot {
  margin-top: auto;
}

.tile .t-num {
  font-size: 3.4rem;
  line-height: 0.85;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.tile .t-sub {
  font-weight: 300;
  font-size: 0.8rem;
  color: var(--grey);
}

.bar {
  margin-top: 12px;
  height: 7px;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--ink);
  transition: width 0.25s linear;
}

.bar.bar-pink span { background: var(--pink); }

.t-stone { background: #ded7cc; }
.t-cream { background: #efe9e3; }
.t-pink { background: var(--pink); }
.t-pink-soft { background: #ffc4e6; }
.t-green { background: #2f4a3c; color: var(--cream); }
.t-blue { background: #b4cbdd; }
.t-slate { background: #8aa5b8; }
.t-peach { background: #f4c79a; }
.t-rust { background: #c2712a; }

.tile.circle { border-radius: 50%; align-items: center; justify-content: center; }
.tile.hex { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); border-radius: 0; align-items: center; justify-content: center; text-align: center; }
.tile.pin { border-radius: 50% 50% 50% 6px; transform: rotate(-45deg); align-items: center; justify-content: center; }
.tile.pin > * { transform: rotate(45deg); text-align: center; }

.t-big {
  font-size: 4.4rem;
  line-height: 0.85;
  letter-spacing: -0.05em;
}

.t-caps {
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 10px;
}

.arrow-spin {
  width: 122px;
  height: 122px;
  animation: arrow-nudge 2.4s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes arrow-nudge {
  0%, 55%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, -10px); }
}

.pillette {
  align-self: flex-start;
  margin-top: 10px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 700;
}

.tabs {
  display: flex;
  gap: 4px;
  background: var(--cream);
  border-radius: 999px;
  padding: 4px;
  font-size: 0.7rem;
  font-weight: 300;
}

.tabs b {
  background: #ded7cc;
  border-radius: 999px;
  padding: 4px 10px;
  font-weight: 700;
  animation: tab-hop 6s steps(1) infinite;
}

.tabs i { padding: 4px 8px; font-style: normal; opacity: 0.6; }

@keyframes tab-hop {
  0% { transform: translateX(0); }
  25% { transform: translateX(0); }
  50% { transform: translateX(6px); }
  100% { transform: translateX(0); }
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.mini {
  background: #ded7cc;
  border-radius: 8px;
  padding: 8px;
  font-size: 0.6rem;
  font-weight: 300;
  height: 62px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mini svg { width: 18px; height: 18px; }

.hexform {
  position: relative;
  width: 76px;
  height: 84px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  animation: bob 3.2s ease-in-out infinite;
}

.hexform.small { width: 58px; height: 64px; background: #7d8f43; }
.hexform.big { background: var(--pink); margin-top: -18px; animation-delay: 0.4s; }

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

.eye {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  position: relative;
  animation: blink 4.5s infinite;
}

.eye::after {
  content: "";
  position: absolute;
  inset: 3px 3px auto auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ink);
}

.hexform.small .eye { background: transparent; }
.hexform.small .eye::after { inset: 0; width: 100%; height: 4px; border-radius: 4px 4px 0 0; background: var(--ink); }

@keyframes blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}

.route {
  width: 100%;
  padding: 22px 18px;
  background: var(--pink);
  clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
  text-align: center;
  font-size: 1.9rem;
  letter-spacing: -0.03em;
}

.tile.tall { height: auto; }

.drive-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 300;
  font-size: 0.72rem;
  margin-top: 8px;
}

.dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
}

.dot.fill { background: var(--ink); }

.stack-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 0 0 auto;
  width: 260px;
}

.stack-col .tile { width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .arrow-spin,
  .hexform,
  .eye,
  .tabs b {
    animation: none;
  }
}

.tabs { white-space: nowrap; }
.tabs b, .tabs i { white-space: nowrap; }
.mini { font-size: 0.58rem; line-height: 1.1; }

/* --- EU cover / Paris tile --- */
.tile-lg { width: 300px; height: 300px; }

.paris {
  position: absolute;
  right: -14px;
  bottom: 0;
  width: 235px;
  height: auto;
  z-index: 0;
}

.paris-form {
  position: absolute;
  left: 26px;
  bottom: 0;
  width: 120px;
  height: 128px;
  background: var(--pink);
  border-radius: 34px 34px 0 0;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding-bottom: 62px;
  animation: rise 5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.paris-form::before {
  content: "";
  position: absolute;
  left: -30px;
  bottom: 0;
  width: 60px;
  height: 74px;
  background: var(--pink);
  border-radius: 26px 26px 0 0;
}

@keyframes rise {
  0%, 12% { transform: translateY(120px); }
  32%, 84% { transform: translateY(0); }
  100% { transform: translateY(120px); }
}

/* --- staggered stacking, as in the reference --- */
.marquee-track { align-items: flex-start; }
.marquee { padding: 10px 0 80px; }
.marquee-group { align-items: flex-start; }



/* ============ dashboard tiles: scaled to match the reference ============ */
.marquee-group { gap: 34px !important; }
.marquee-track { gap: 34px; }


.tile {
  width: 300px;
  height: 300px;
  border-radius: 18px;
  padding: 26px;
}

.tile .t-label {
  font-size: 1.75rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.tile .t-num {
  font-size: 5.2rem;
  letter-spacing: -0.05em;
}

.tile .t-sub {
  font-size: 1rem;
  color: var(--ink);
}

.t-big { font-size: 6.4rem; }
.t-caps { font-size: 0.9rem; letter-spacing: 0.2em; margin-top: 14px; }

.bar { height: 8px; background: #cbc3b7; margin-top: 16px; }
.tile.t-cream .bar { background: #ded7cc; height: 26px; border-radius: 999px; }
.tile.t-cream .bar span { border-radius: 999px; }

/* MOT */
.t-stone .t-num { font-size: 5.6rem; }

/* hexagon and pin tiles keep square footprint */
.tile.hex, .tile.pin, .tile.circle { width: 300px; height: 300px; }
.tile.pin { border-radius: 50% 50% 50% 8px; }
.arrow-spin { width: 175px; height: 175px; }

/* quote card */
.stack-col { width: 340px; gap: 16px; }
.tabs { font-size: 0.95rem; padding: 6px; border-radius: 999px; }
.tabs b { padding: 8px 18px; }
.tabs i { padding: 8px 14px; }
.mini { height: 92px; font-size: 0.85rem; border-radius: 12px; padding: 12px; }
.mini svg { width: 26px; height: 26px; }
.stack-col .tile { padding: 22px; }
.stack-col .tile .t-num { font-size: 5rem; }

/* price */
.t-pink .t-sub { text-decoration: underline; }
.pillette { font-size: 0.9rem; padding: 9px 18px; }

/* route banner */
.route { font-size: 2.9rem; padding: 30px 18px; }

/* characters */
.hexform { width: 104px; height: 116px; gap: 13px; }
.hexform.small { width: 82px; height: 92px; }
.hexform.big { margin-top: -26px; }
.eye { width: 20px; height: 20px; background: #fff; }
.eye::after { inset: 4px 4px auto auto; width: 10px; height: 10px; }
.hexform.small .eye { background: transparent; width: 22px; height: 12px; }
.hexform.small .eye::after { inset: 0; width: 100%; height: 5px; border-radius: 5px 5px 0 0; }

/* Paris tile */
.tile-lg { width: 380px; height: 380px; }
.paris { width: 290px; }
.paris-form { width: 150px; height: 150px; border-radius: 40px 40px 0 0; padding-bottom: 74px; }

@media (max-width: 860px) {
  .tile, .tile.hex, .tile.pin, .tile.circle { width: 240px; height: 240px; }
  .tile-lg { width: 280px; height: 280px; }
  .stack-col { width: 280px; }
}


/* ---- fixes: price, pin, bump ---- */
.t-pink .t-num { font-size: 3.6rem; }
.t-pink .t-foot > div:first-child { flex-wrap: wrap; }

.tile.pin {
  border-radius: 50% 50% 0 50%;
  transform: rotate(45deg);
}
.tile.pin > * { transform: rotate(-45deg); }

.bump-art {
  position: relative;
  margin-top: auto;
  height: 150px;
}
.bump-art .spanner {
  position: absolute;
  right: 46px;
  bottom: 22px;
  width: 150px;
  transform: rotate(-8deg);
  animation: bob 3.6s ease-in-out infinite;
}
.bumpform {
  position: absolute;
  right: -6px;
  bottom: 0;
  width: 130px;
  height: 92px;
  background: var(--pink);
  border-radius: 26px 26px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 1.5rem;
  color: var(--ink);
}


/* stagger without clobbering tile transforms (positive offsets so nothing clips) */
.marquee-group > * { margin-top: 26px; }
.marquee-group > *:nth-child(3n + 1) { margin-top: 0; }
.marquee-group > *:nth-child(3n + 3) { margin-top: 56px; }

.tile.pin .t-big { font-size: 5rem; }
.tile.pin .t-caps { font-size: 0.8rem; }

/* pin without nested rotation */
.tile.pin {
  transform: none !important;
  border-radius: 0 !important;
  clip-path: path("M150 300 C150 300 0 170 0 108 A150 108 0 0 1 300 108 C300 170 150 300 150 300 Z");
  align-items: center;
  justify-content: flex-start;
  padding-top: 62px;
}
.tile.pin > * { transform: none !important; text-align: center; }


.circle-arrow {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--ink);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.circle-arrow svg { width: 26px; height: 26px; }
.circle-arrow:hover { transform: translateX(8px) scale(1.08); }


/* ============ footer wordmark ============ */
.wordmark {
  display: flex;
  align-items: flex-end;
  gap: 22px;
  margin-top: 40px;
}
.wordmark .mascot {
  width: 78px;
  height: 66px;
  background: var(--pink);
  border-radius: 22px 22px 4px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  animation: bob 3.4s ease-in-out infinite;
}
.wm-text {
  font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 9rem);
  line-height: 0.8;
  letter-spacing: -0.04em;
}

/* uploaded vector shapes */
.arrow-spin { transform-origin: 50% 50%; }
.arrow-spin path { transform: rotate(-45deg); transform-origin: 50% 50%; }
.marshforms { display: flex; align-items: flex-end; justify-content: flex-end; width: 100%; }
.marshforms-svg { width: 82%; height: auto; display: block; animation: bob 3.2s ease-in-out infinite; }
@media (min-width: 900px) { .marshforms-svg { width: 88%; } }

/* EU cover artwork (uploaded vector) */
.paris { left: 0; right: 0; bottom: 0; width: 100%; }
@media (min-width: 900px) { .paris { width: 100%; } }

/* app tile + bump artwork (uploaded vectors) */
.marshforms-svg.app-forms { width: 78%; }
.bump-art { position: relative; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.bump-art-img { width: 100%; height: auto; display: block; }

/* ============ dark shell, matching the original site ============ */
:root { --paper: #292924; --cream: #fbf8f5; --ink: #fbf8f5; }
body { background: #fbf8f5; color: #181f1f; }
main { background: #fbf8f5; }
.muted { color: rgba(251, 248, 245, 0.6); }
section.band { background: rgba(251, 248, 245, 0.05); }
footer.site { background: var(--paper); color: var(--cream); }
hr, .stat, .cols > div { border-color: rgba(251, 248, 245, 0.18) !important; }
.media, .hero-media { background: rgba(24, 31, 31, 0.06); }
.pill { border-color: rgba(251, 248, 245, 0.4); color: var(--cream); }

/* giant clipped wordmark */
.topmark {
  position: absolute;
  top: -0.34em;
  left: 0;
  right: 0;
  font-weight: 700;
  font-size: clamp(4rem, 13.2vw, 15rem);
  line-height: 1;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--cream);
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* pill nav */
header.site {
  mix-blend-mode: normal;
  color: var(--cream);
  justify-content: space-between;
  top: 0;
  padding: 22px var(--gutter);
}
header.site nav { gap: 8px; font-size: 0.95rem; }
header.site nav a {
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(251, 248, 245, 0.14);
  transition: background 0.25s ease, color 0.25s ease;
}
header.site nav a:hover { background: rgba(251, 248, 245, 0.28); }
header.site nav a.is-current { background: #d8e8dc; color: #292924; }
header.site .nav-left { margin-left: 58px; }
.brand-logo { top: 22px; }

/* hero */
.hero { padding-top: clamp(60px, 8vw, 110px); padding-bottom: 0; }
.hero-pictogram {
  display: block;
  width: clamp(48px, 7vw, 84px);
  height: auto;
  margin: 0 0 clamp(12px, 1.6vw, 22px);
}
.hero-kicker {
  margin: 0 0 clamp(18px, 2.4vw, 34px);
  font-family: "itc-avant-garde-gothic-pro", "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  font-size: clamp(2.1rem, 3.3vw, 3.15rem);
  letter-spacing: -0.01em;
}
.hero-title {
  margin: 0;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.56rem, 8.64vw, 7.68rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: none;
}
.hero-title .small-caps {
  font-family: inherit;
  font-weight: inherit;
  text-transform: none;
  font-size: inherit;
  letter-spacing: inherit;
  vertical-align: baseline;
}
.hero-media {
  margin: clamp(8px, 1.2vw, 16px) calc(-1 * var(--gutter)) 0;
  width: calc(100% + (var(--gutter) * 2));
  border-radius: 0;
  overflow: hidden;
  background: var(--paper);
}
.hero-media video,
.hero-media img { display: block; width: 100%; height: auto; }

@media (max-width: 800px) { .topmark { display: none; } header.site .nav-left { margin-left: 0; } }
.topmark { display: none !important; }

/* ============ overview block, matching the original layout ============ */
.intro-copy { max-width: 1240px; }
.intro-copy > * + * { margin-top: clamp(24px, 3.2vw, 44px); }
.intro-lede + .intro-lede { margin-top: clamp(24px, 3.2vw, 44px) !important; }
.intro-lede {
  margin: 0;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.32vw, 2.08rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
}

.overview-grid {
  display: grid;
  grid-template-columns: minmax(200px, 22%) 1fr;
  gap: clamp(24px, 5vw, 80px);
  margin-top: clamp(70px, 10vw, 150px);
  padding-top: 26px;
  border-top: 1px solid rgba(251, 248, 245, 0.18);
}
@media (max-width: 800px) { .overview-grid { grid-template-columns: 1fr; } }

.ov-title { margin: 0; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; }
.ov-body { max-width: 520px; }
.ov-sub { margin: clamp(26px, 3.4vw, 44px) 0 10px; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.02em; }
.ov-body > .ov-sub:first-child { margin-top: 0; }
.ov-body .body-copy {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 1.18rem;
  line-height: 1.35;
}
.ov-stat { margin-top: clamp(26px, 3.4vw, 44px); }
.ov-figure {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.02em;
}
.ov-figure .plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--cream);
  font-size: 1.15rem;
  line-height: 0;
  flex: 0 0 auto;
}
.ov-figure .plus.arrow-icon svg {
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  transform-origin: center;
}
.ov-figure .plus.arrow-icon svg path { fill: #ffffff; }

/* ============ media reveal: slide up with a slow zoom-out ============ */
.media, .hero-media { overflow: hidden; }
.media.reveal img, .media.reveal video,
.hero-media.reveal img, .hero-media.reveal video {
  transform: scale(1.18);
  transform-origin: 50% 50%;
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.media.reveal.in img, .media.reveal.in video,
.hero-media.reveal.in img, .hero-media.reveal.in video { transform: scale(1); }
.media.reveal, .hero-media.reveal { transform: translateY(56px); }

@media (prefers-reduced-motion: reduce) {
  .media.reveal img, .media.reveal video,
  .hero-media.reveal img, .hero-media.reveal video { transform: none; transition: none; }
}

/* ============ header hides on scroll down, returns on scroll up ============ */
header.site, .brand-logo {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}
body.nav-hidden header.site, body.nav-hidden .brand-logo {
  transform: translateY(-140%);
  opacity: 0;
  pointer-events: none;
}

/* overview sits on the light paper, as in the original */
#overview {
  background: #fbf8f5;
  color: #181f1f;
  max-width: none;
  padding-top: clamp(90px, 11vw, 136px);
  padding-left: calc((100vw - min(1440px, 100vw)) / 2 + var(--gutter));
  padding-right: calc((100vw - min(1440px, 100vw)) / 2 + var(--gutter));
}
#overview .overview-grid { border-top-color: rgba(24, 31, 31, 0.18); }
#overview .muted { color: rgba(24, 31, 31, 0.55); }
#overview .ov-figure .plus { background: #181f1f; color: #fbf8f5; }
#overview .media { background: rgba(24, 31, 31, 0.07); margin-top: clamp(90px, 12vw, 190px); }

/* ============ full-bleed media with a slow parallax drift ============ */
.media.bleed {
  border-radius: 0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  height: clamp(320px, 62vh, 780px);
  position: relative;
  overflow: hidden;
}
.media.bleed img,
.media.bleed video {
  position: absolute;
  inset: -14% 0;
  width: 100%;
  height: 128%;
  object-fit: cover;
  will-change: transform;
}
/* the parallax drift owns the transform, so skip the reveal zoom here */
.media.bleed.reveal img,
.media.bleed.reveal video { transform: none; transition: none; }
.media.bleed.reveal { transform: none; opacity: 1; }

/* Create hero image: keep natural aspect ratio so the gap below is exact */
#create .media.bleed {
  height: auto;
  min-height: 0;
  aspect-ratio: 1730 / 740;
}
#create .media.bleed img,
#create .media.bleed video {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none !important;
}


/* ============ hero title scaled to 150% ============ */
.hero-title { font-size: clamp(2.25rem, 4.35vw, 3.9rem); line-height: 1.22; letter-spacing: -0.01em; }

/* ============ Define, on the light paper like the original ============ */
#define.define-light {
  background: #fbf8f5;
  color: #181f1f;
  max-width: none;
  padding-left: calc((100vw - min(1440px, 100vw)) / 2 + var(--gutter));
  padding-right: calc((100vw - min(1440px, 100vw)) / 2 + var(--gutter));
}
.define-title {
  border-top: 1px solid rgba(24, 31, 31, 0.22);
  padding-top: 26px;
  margin: 0 0 clamp(20px, 2.6vw, 34px);
  font-family: "itc-avant-garde-gothic-pro", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
}

.define-lede {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.9vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0 0 clamp(56px, 8vw, 120px);
  max-width: 46ch;
  margin-left: clamp(0px, 10vw, 200px);
}
.pull-quote {
  display: grid;
  grid-template-columns: clamp(0px, 10vw, 200px) minmax(0, 1fr) auto;
  gap: 0 24px;
  align-items: start;
  border-top: 1px solid rgba(24, 31, 31, 0.22);
  padding-top: clamp(36px, 5vw, 70px);
}
.pull-quote .qmark {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(3rem, 6vw, 5.5rem);
  font-weight: 600;
  line-height: 0.9;
  color: #181f1f;
}
.pull-quote-body p {
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.9vw, 2.6rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 44ch;
  text-align: left;
}
.pull-quote-body .attrib {
  margin-top: clamp(36px, 5vw, 76px);
  font-size: clamp(1.05rem, 1.6vw, 1.5rem);
  line-height: 1.25;
}
@media (max-width: 800px) {
  .define-lede { margin-left: 0; max-width: none; }
  .pull-quote { grid-template-columns: auto 1fr; }
  .pull-quote .qmark-close { display: none; }
}

/* ============ slogan banner + statement duo ============ */
.slogan-banner {
  background: #0600ff;
  padding: clamp(40px, 6vw, 90px) clamp(18px, 4vw, 64px);
  min-height: 55vh;
  display: flex;
  align-items: center;
  justify-content: center;

}
.tint-sec.slogan-banner { background: transparent; }
  .slogan-banner .slogan {
  margin: 0;
  color: #fbf8f5;
  font-family: "itc-avant-garde-gothic-pro", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 12vw, 12rem);
  line-height: 0.86;
  text-align: center;
  letter-spacing: -0.04em;
  max-width: 12ch;
}
.tint-sec.slogan-banner .slogan { color: #181f1f; }



.statement-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  background: #fbf8f5;
}
.statement-panel {
  background: #fbf8f5;
  color: #181f1f;
  display: flex;
  align-items: flex-start;
  padding: clamp(40px, 6vw, 96px) clamp(24px, 4vw, 72px);
  min-height: clamp(360px, 46vw, 720px);
}
.statement-panel .statement {
  margin: 0;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.7rem, 3.6vw, 3.4rem);
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: 20ch;
}
.statement-panel .statement em { font-style: italic; }
.statement-media { overflow: hidden; background: #fbf8f5; }
.statement-media video,
.statement-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 800px) {
  .statement-duo { grid-template-columns: 1fr; }
  .statement-media { height: 60vw; }
}
.statement-media.icon-block .statement-gif {
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  display: block;
}

/* ---- hero video true full bleed, edge to edge ---- */
.hero-media {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}

/* ---- tighten the gap between the overview motion graphic and Define ---- */
#overview.block { padding-bottom: 0; }
#overview .media.bleed { margin-bottom: 0; }
#define.define-light { padding-top: clamp(34px, 4.5vw, 64px); padding-bottom: clamp(18px, 3vw, 38px); }

/* ============ Create, light paper like the original ============ */
#create.define-light {
  background: #fbf8f5;
  color: #181f1f;
  padding-top: clamp(28px, 4vw, 60px);
}
#create .define-lede { margin-bottom: clamp(48px, 7vw, 96px); }
.cr-grid {
  display: grid;
  grid-template-columns: minmax(200px, 22%) 1fr;
  gap: 24px;
  align-items: start;
  margin: clamp(48px, 7vw, 100px) 0;
}
.cr-label {
  margin: 0;
  font-family: "itc-avant-garde-gothic-pro", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
}
.cr-copy {
  margin: 0;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.9vw, 1.7rem);
  line-height: 1.32;
  max-width: 44ch;
}
@media (max-width: 800px) {
  .cr-grid { grid-template-columns: 1fr; }
  .cr-copy { max-width: none; }
}

/* ---- marshforms block, hairline rule + full grid sheet like the original ---- */
.cr-grid.rule {
  border-top: 1px solid rgba(24, 31, 31, 0.25);
  padding-top: clamp(22px, 2.4vw, 34px);
}
.cr-grid.rule .cr-copy { max-width: 34ch; }
.media.sheet {
  border-radius: 0;
  margin-left: calc(50% - 50vw + 16px);
  margin-right: calc(50% - 50vw + 16px);
  width: calc(100vw - 32px);
  max-width: calc(100vw - 32px);
  background: #f7efe7;
  overflow: hidden;
}
.media.sheet video,
.media.sheet img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  transform: none;
}
.media.sheet.reveal video,
.media.sheet.reveal img { transform: none; }


/* ---- Big statement (Your difference makes the difference) ---- */
.big-statement{
  background:#fbf8f5;
  color:#181f1f;
  padding:clamp(90px,14vw,190px) var(--gutter);
  text-align:center;
}
.big-statement-text{
  font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;
  font-weight:700;
  font-size:clamp(3rem,11vw,9.5rem);
  line-height:.92;
  letter-spacing:-.035em;
  margin:0;
}
.big-statement-mark{
  font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;
  font-weight:700;
  font-size:clamp(1.6rem,3.4vw,3rem);
  letter-spacing:-.02em;
  margin:clamp(40px,6vw,80px) 0 0;
}
/* commit uses light paper treatment */
#commit.define-light{background:#fbf8f5;color:#181f1f;padding-top:clamp(48px,6vw,88px);padding-bottom:clamp(18px,3vw,34px);}
#commit.define-light .define-lede{margin-bottom:clamp(12px,2vw,24px);}

/* ---- Scroll tint zone (cream -> pink -> mint -> cream) ---- */
.tint-zone{position:relative;overflow:clip;}
.tint-layer{
  position:sticky;top:0;height:100vh;margin-bottom:-100vh;
  z-index:0;background:#fbf8f5;transition:background-color .12s linear;
  pointer-events:none;
}
.tint-sec{position:relative;z-index:1;background:transparent;color:#181f1f;
  padding:clamp(40px,5vw,80px) var(--gutter);}
#reality.tint-sec{padding-top:clamp(14px,1.6vw,24px);}
#reality.tint-sec .cr-grid:first-child{margin-top:0;}
.tint-sec .cr-grid{margin-bottom:0;}
.tint-sec .cr-grid.tight{margin-bottom:0;}
.tint-bridge{min-height:12vh;padding:0;}


/* ---- Pull quote (pink band) ---- */
.quote-band{min-height:100vh;display:flex;align-items:center;}
.quote-band .wrap{width:100%;}
.pull-quote{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(24px,6vw,80px);
  align-items:start;
}
.pull-quote .pq-mark{
  font-family:"Source Serif 4",Georgia,serif;font-weight:600;
  font-size:clamp(4rem,7vw,7rem);line-height:.7;
}
.pull-quote .pq-body{max-width:min(100%,1000px);}
.pull-quote .pq-body p{
  font-family:"Source Serif 4",Georgia,serif;font-weight:400;
  font-size:clamp(1.6rem,3.2vw,3.1rem);line-height:1.2;margin:0;
}
.pull-quote .pq-body .pq-attrib{margin-top:clamp(36px,5vw,70px);}

/* ---- Mint endcap ---- */
.endcap-mint{padding-bottom:clamp(90px,14vw,200px);}

.endcap-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;
  border-top:1px solid rgba(24,31,31,.35);padding-top:22px;
}
.endcap-edge{font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.2rem,2.2vw,2rem);margin:0;}
.pill-dark{
  display:block;width:max-content;margin:clamp(90px,14vw,200px) auto 0;
  background:#181f1f;color:#fbf8f5;text-decoration:none;
  font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.3rem,2.4vw,2.2rem);
  padding:.5em 1.1em;border-radius:999px;
}

/* ---- Newsletter ---- */
.inbox{color:#181f1f;padding:clamp(40px,5vw,80px) var(--gutter);}
.inbox-title{
  font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;font-weight:400;
  font-size:clamp(2rem,6.4vw,5.4rem);letter-spacing:-.03em;line-height:1;
  border-top:1px solid rgba(24,31,31,.35);padding-top:26px;margin:0 0 18px;
}
.inbox-sub{
  font-family:"Source Serif 4",Georgia,serif;font-size:clamp(1.1rem,1.8vw,1.55rem);
  line-height:1.35;margin:0 0 clamp(28px,4vw,52px);color:rgba(24,31,31,.85);
}
.inbox-form{display:flex;gap:14px;flex-wrap:wrap;}
.inbox-form input{
  flex:0 1 420px;border:1px solid rgba(24,31,31,.5);border-radius:999px;background:transparent;
  padding:1em 1.4em;font-family:"Source Serif 4",Georgia,serif;font-size:1.1rem;color:inherit;
}
.inbox-form button{
  border:0;border-radius:999px;background:#181f1f;color:#fbf8f5;cursor:pointer;
  font-family:"Source Serif 4",Georgia,serif;font-size:1.2rem;padding:1em 1.8em;
}
.inbox-note{margin-top:22px;font-size:.85rem;opacity:.6;line-height:1.5;}


/* ============ two-up portrait media pair ============ */
.media-duo.bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.media-duo .media.portrait {
  border-radius: 0;
  height: clamp(280px, 33vw, 620px);
  overflow: hidden;
  position: relative;
  background: rgba(24, 31, 31, 0.07);
}
.media-duo .media.portrait img,
.media-duo .media.portrait video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (max-width: 760px) {
  .media-duo.bleed { grid-template-columns: 1fr; }
  .media-duo .media.portrait { height: 62vw; }
}

/* ============ modular infographic grid ============ */
.dash {
  background: var(--cream, #fbf8f5);
  color: var(--ink);
  padding-top: clamp(40px, 5vw, 70px);
  padding-bottom: clamp(56px, 8vw, 110px);
}

.dash-grid {
  --u: 300px;
  --gap: 26px;
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: var(--u);
  grid-template-rows: var(--u);
  gap: var(--gap) !important;
  align-items: stretch;
}

.dash-grid > * { align-self: stretch; }

.dash-grid .tile,
.dash-grid .tile.hex,
.dash-grid .tile.pin,
.dash-grid .tile.circle,
.dash-grid .tile-lg {
  width: 100%;
  height: 100%;
  /* rounded on top, square at the bottom */
  border-radius: 34px 34px 0 0;
  clip-path: none;
  transform: none;
  padding: clamp(18px, 1.8vw, 26px);
}

.dash-grid .m-1x1 { grid-column: span 1; }
.dash-grid .m-2x1 { grid-column: span 2; }

/* stacked columns fill one module height exactly */
.dash-grid .stack-col {
  width: 100%;
  height: 100%;
  gap: var(--gap);
  display: flex;
  flex-direction: column;
}
.dash-grid .stack-col .tile { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; }
.dash-grid .stack-col .route { flex: 0 0 auto; }

/* the quote module is one tile spanning two columns */
.dash-grid .stack-col.m-2x1 .tile { flex: 1 1 100%; }

.dash-grid .tile .t-num { font-size: clamp(2.6rem, 4vw, 4.4rem); }
.dash-grid .t-stone .t-num { font-size: clamp(3rem, 5vw, 5rem); }
.dash-grid .t-big { font-size: clamp(3.6rem, 6vw, 5.6rem); }
.dash-grid .arrow-spin { width: 58%; height: 58%; }

/* centred badge content (AU, 18, 10) */
.dash-grid .t-centre {
  margin: auto;
  text-align: center;
}

/* arrow tile */
.dash-grid .arrow-tile { align-items: center; justify-content: center; }

/* route rectangle */
.dash-grid .route-tile { align-items: center; justify-content: center; }
.dash-grid .route-tile .route {
  padding: 0;
  font-size: clamp(2.6rem, 5vw, 5.4rem);
  line-height: 0.9;
  white-space: nowrap;
}

/* fat progress bar */
.dash-grid .bar-fat { height: 26px; border-radius: 999px; background: #ded7cc; }
.dash-grid .bar-fat span { border-radius: 999px; }

/* pie chart */
.pie-wrap { display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.pie { width: 74%; max-height: 62%; transform: rotate(-90deg); overflow: visible; }
.pie-seg { animation: pie-draw 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
.pie-a { --seg: 46; }
.pie-b { --seg: 34; animation-delay: 0.18s; }
.pie-c { --seg: 18; animation-delay: 0.36s; }
@keyframes pie-draw {
  0% { stroke-dasharray: 0 100; }
  38%, 88% { stroke-dasharray: var(--seg) 100; }
  100% { stroke-dasharray: var(--seg) 100; }
}

/* graphic motion inside tiles */
.mf-drift { animation: mf-up 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
.mf-drift-b { animation: mf-up 3.6s ease-in-out infinite 0.5s; transform-origin: 50% 100%; }
.mf-blink { animation: mf-blink 4.2s steps(1, end) infinite; transform-origin: 50% 50%; }
.mf-eye { animation: mf-blink 3.4s steps(1, end) infinite; transform-origin: 50% 50%; }
.mf-spin-x { animation: mf-wink 3.8s ease-in-out infinite; transform-origin: 50% 50%; }
.mf-cloud { animation: mf-cloud 6.5s ease-in-out infinite; }

@keyframes mf-up {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes mf-blink {
  0%, 92%, 100% { opacity: 1; }
  94%, 98% { opacity: 0.15; }
}
@keyframes mf-wink {
  0%, 70%, 100% { transform: rotate(0deg); }
  85% { transform: rotate(45deg); }
}
@keyframes mf-cloud {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(6px); }
}

@media (prefers-reduced-motion: reduce) {
  .mf-drift, .mf-drift-b, .mf-blink, .mf-eye, .mf-spin-x, .mf-cloud, .pie-seg { animation: none; }
}

.marquee-track { align-items: stretch; }
.marquee { padding: 10px 0 30px; }


@media (max-width: 1100px) {
  .dash-grid { --u: 240px; --gap: 20px; }
}
@media (max-width: 700px) {
  .dash-grid { --u: 200px; --gap: 14px; }
}

/* ============ poster duo ============ */
.poster-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 1.6vw, 24px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px 0 0;
  background: var(--cream, #fbf8f5);
}



.poster {
  position: relative;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 48px);
}

.poster-dark { background: #292924; color: var(--cream, #fbf8f5); }
.poster-green { background: #42cbfd; position: relative; align-items: center; justify-content: center; overflow: hidden; }

.poster-title {
  font-weight: 700;
  font-size: clamp(2.4rem, 5.2vw, 5.4rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0;
}

.poster-arrow {
  margin-top: clamp(20px, 3vw, 40px);
  width: clamp(72px, 8vw, 108px);
  height: clamp(72px, 8vw, 108px);
  background: #42cbff;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.poster-arrow svg { width: 46%; height: 46%; }

.poster-mark {
  margin: auto 0 0;
  font-weight: 700;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  letter-spacing: -0.02em;
}

.poster-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .poster-duo { grid-template-columns: 1fr; }
}

/* ============ two-up landscape media pair (verbal identity) ============ */
.media-duo.wide { margin-top: clamp(40px, 5vw, 80px); }
.media-duo.wide .media {
  height: clamp(280px, 32vw, 620px);
  border-radius: 0;
  overflow: hidden;
}
.media-duo.wide .media video,
.media-duo.wide .media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 800px) {
  .media-duo.wide { grid-template-columns: 1fr; }
  .media-duo.wide .media { height: 56vw; }
}

/* ============ campaign boards (after verbal identity) ============ */
.camp {
  margin: clamp(14px, 1.6vw, 24px) auto 0;
  width: 80%;
  max-width: 944px;
  display: grid;
  gap: 16px;
}



.camp-board {
  position: relative;
  background: #262b25;
  color: #f4efe6;
  padding: clamp(26px, 3.4vw, 54px);
  min-height: clamp(360px, 42vw, 700px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.camp-words {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: "itc-avant-garde-gothic-pro", "Archivo", sans-serif;
  font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 6.4rem);
  line-height: .96;
  letter-spacing: -.03em;
  max-width: 62%;
}
.camp-kicker {
  position: absolute;
  top: clamp(26px, 3.4vw, 54px);
  right: clamp(26px, 3.4vw, 54px);
  margin: 0;
  max-width: 22ch;
  text-align: left;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(1rem, 1.7vw, 1.7rem);
  line-height: 1.2;
}
.camp-mark {
  position: absolute;
  right: clamp(26px, 3.4vw, 54px);
  bottom: clamp(26px, 3.4vw, 54px);
  margin: 0;
  font-family: "itc-avant-garde-gothic-pro", "Archivo", sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2.8rem);
  letter-spacing: -.02em;
}
.camp-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.camp-olive {
  background: #7a8a35;
  color: #1d2416;
  padding: clamp(24px, 3vw, 46px);
  min-height: clamp(360px, 40vw, 700px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.camp-copy {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.2rem, 2.1vw, 2.1rem);
  line-height: 1.25;
  max-width: 22ch;
}

.camp-name {
  margin: 0;
  font-family: "itc-avant-garde-gothic-pro", "Archivo", sans-serif;
  font-weight: 700;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  letter-spacing: -.03em;
  line-height: 1;
}
.camp-panel {
  background: #f4efe6;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.camp-panel video,
.camp-panel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.camp-wide {
  overflow: hidden;
  height: clamp(240px, 30vw, 520px);
  background: #f4efe6;
}

.camp-wide video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 800px) {
  .camp-duo { grid-template-columns: 1fr; }
  .camp-words { max-width: 100%; }
  .camp-kicker { position: static; margin-top: 24px; }
  .camp-mark { position: static; margin-top: 18px; }
}

/* keep the infographic row perfectly aligned (override staggered offsets) */
.dash-grid.marquee-group > *,
.dash-grid.marquee-group > *:nth-child(3n + 1),
.dash-grid.marquee-group > *:nth-child(3n + 3) { margin-top: 0 !important; }

/* poster uses the infographic arrow, pointing right */
.poster-arrow .arrow-spin { width: 46%; height: 46%; animation: none; }
.poster-arrow .arrow-spin path { transform: none; }


/* ============ infographic grid: corrections pass ============ */
.marquee { -webkit-mask-image: none !important; mask-image: none !important; }

/* every module is a perfect square column */
.dash-grid .m-1x1,
.dash-grid .m-2x1,
.dash-grid > * { grid-column: span 1 !important; }

/* tighter corners: rounded top, square bottom */
.dash-grid .tile,
.dash-grid .tile.hex,
.dash-grid .tile.pin,
.dash-grid .tile.circle,
.dash-grid .tile-lg { border-radius: 16px 16px 0 0 !important; }

/* black type on every colour */
.dash-grid,
.dash-grid .tile,
.dash-grid .tile .t-sub,
.dash-grid .tile.t-green,
.dash-grid .tile.t-slate,
.dash-grid .tile.t-rust { color: #292924 !important; }

/* stacked pair keeps the square module height */
.dash-grid .stack-col { gap: var(--gap); }
.dash-grid .stack-col > .tile { flex: 1 1 0 !important; height: auto; min-height: 0; overflow: hidden; }
.dash-grid .stack-col .route { font-size: clamp(1.6rem, 2.4vw, 2.6rem); }
.dash-grid .stack-col .t-num { font-size: clamp(1.8rem, 2.6vw, 2.8rem); }
.dash-grid .stack-col .drive-row { font-size: 0.72rem; }

/* the arrow keeps its circle */
.dash-grid .arrow-tile {
  border-radius: 50% !important;
  align-items: center;
  justify-content: center;
}
.dash-grid .arrow-spin { width: 38%; height: 38%; }

/* graphics scaled back inside the squares */
.dash-grid .marshforms-svg { width: 86%; height: auto; margin: 0 auto; display: block; }
.dash-grid .paris { width: 72%; height: auto; position: absolute; right: 8%; bottom: 0; }
.dash-grid .pie { width: 58%; max-height: 58%; }
.dash-grid .bump-art-img { width: 70%; margin: auto; display: block; }
.dash-grid .t-big { font-size: clamp(2.8rem, 4.4vw, 4.2rem); }
.dash-grid .tile .t-num { font-size: clamp(2.2rem, 3.2vw, 3.4rem); }

/* dark tiles lightened so black type reads */
.dash-grid .tile.t-green { background: #a8b46a; }
.dash-grid .tile.t-rust { background: #e39a55; }
.dash-grid .tile.t-slate { background: #a9c0d1; }
.dash-grid .marshforms { width: 100%; }
.dash-grid .marshforms-svg { width: 100%; }


/* ---- statement duo: dark panel reinstated, image flush ---- */
.statement-duo { background: #fbf8f5; gap: 0; align-items: stretch; }
.statement-panel { background: #292924 !important; color: #f7f1ea !important; align-items: center; }
.statement-panel .statement { color: #f7f1ea !important; }
.statement-media { background: #f7f1ea; }
.statement-media img { object-fit: cover; object-position: center; }

/* ============ footer, light contact layout ============ */
footer.site{background:#fbf8f5 !important;color:#181f1f !important;position:relative;z-index:2;
  padding:clamp(40px,6vw,90px) 0 40px;}
footer.site .contact-rows{border-top:1px solid rgba(24,31,31,.18);}
footer.site .contact-row{
  display:grid;grid-template-columns:230px 1fr auto;align-items:start;gap:24px;
  padding:22px 0;border-bottom:1px solid rgba(24,31,31,.18);
}
footer.site .c-label{font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;font-weight:700;
  font-size:clamp(1.1rem,1.6vw,1.5rem);letter-spacing:-.01em;}
footer.site .c-value{font-family:"Source Serif 4",Georgia,serif;font-weight:500;
  font-size:clamp(1.1rem,1.7vw,1.55rem);line-height:1.25;}
footer.site .c-copy{border:0;background:transparent;cursor:pointer;color:rgba(24,31,31,.45);
  font-family:"Source Serif 4",Georgia,serif;font-size:1.05rem;padding:0;}
footer.site .c-copy:hover{color:#181f1f;}
footer.site .foot-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:clamp(40px,6vw,80px) 0 clamp(40px,6vw,80px);}
footer.site .foot-social{display:flex;gap:12px;}
footer.site .foot-pill{display:inline-block;border-radius:999px;background:#181f1f;color:#fbf8f5;
  text-decoration:none;font-family:"Source Serif 4",Georgia,serif;font-size:1rem;padding:.7em 1.5em;}
footer.site .foot-nav{display:grid;grid-template-columns:230px 1fr;gap:24px;
  border-top:1px solid rgba(24,31,31,.18);padding-top:26px;}
footer.site .foot-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
footer.site .foot-nav a{color:#181f1f;text-decoration:none;font-family:"Source Serif 4",Georgia,serif;
  font-size:1.05rem;}
footer.site .foot-nav a:hover{opacity:.6;}
@media (max-width:760px){
  footer.site .contact-row{grid-template-columns:1fr auto;}
  footer.site .c-label{grid-column:1 / -1;}
  footer.site .foot-nav{grid-template-columns:1fr 1fr;}
}

/* ============ product chooser ============ */
.products{background:#fbf8f5;color:#292924;position:relative;z-index:2;
  padding:clamp(56px,8vw,120px) 0 clamp(40px,6vw,90px);text-align:center;}
.prod-title{font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;font-weight:700;
  font-size:clamp(2.6rem,7vw,5.2rem);letter-spacing:-.03em;line-height:1;margin:0;}
.prod-sub{font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;
  font-size:clamp(1.1rem,2.2vw,1.9rem);margin:.4em 0 clamp(34px,5vw,64px);}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,32px);text-align:left;}
.prod-card{background:#efe9df;border-radius:16px;padding:clamp(22px,2.6vw,34px);
  display:flex;flex-direction:column;gap:18px;}
.prod-icon{width:clamp(110px,12vw,160px);height:clamp(70px,7vw,95px);object-fit:contain;object-position:left bottom;display:block;}
.prod-card h3{font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.02em;margin:0;}
.prod-card p{font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;
  font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.45;margin:0;flex:1;}
.prod-cta{display:block;text-align:center;text-decoration:none;background:#ff85c2;color:#292924;
  font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;font-weight:700;
  border-radius:999px;padding:1em 1.6em;transition:background .2s ease;}
.prod-cta:hover{background:#ff6fb5;}
@media (max-width:860px){.prod-grid{grid-template-columns:1fr;}}

/* WHY CHOOSE */
.why{background:#fbf8f5;color:#292924;position:relative;z-index:2;padding:clamp(14px,2vw,24px) 0 clamp(20px,3vw,50px)}
/* reduced gap between Fixathons and the up/down cards */
.block + .why{margin-top:clamp(-30px, -2.2vw, -12px)}
#fixathons { padding-bottom: clamp(20px, 2.5vw, 32px); }
#why { padding-top: clamp(20px, 2.5vw, 34px); }
.why-title{display:flex;align-items:center;gap:22px;
  font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(34px,4.6vw,64px);line-height:1.02;margin:0 0 clamp(78px,10vw,130px)}
.why-arrow{flex:0 0 auto;width:clamp(44px,4vw,58px);height:clamp(44px,4vw,58px);border-radius:50%;
  background:#ff5a01;color:#fbf8f5;display:grid;place-items:center;overflow:hidden}
.why-arrow svg{width:56%;height:56%}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:stretch}
.why-card{position:relative;background:#EFE7DC;border-radius:14px;padding:clamp(24px,2.4vw,34px);
  display:flex;flex-direction:column;justify-content:flex-start}
.why-icon{position:static;width:clamp(100px,9vw,120px);height:clamp(100px,9vw,120px);display:block;margin:0 0 18px;object-fit:cover;object-position:center}
.why-card h3{font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;font-weight:700;
  font-size:clamp(20px,1.7vw,27px);line-height:1.15;letter-spacing:-.015em;margin:0 0 18px}
.why-body{font-size:clamp(15px,1.15vw,18px);line-height:1.5;margin:0}
.why-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.why-list li{position:relative;padding-left:32px;font-size:clamp(15px,1.15vw,18px);line-height:1.45}
.why-list li::before{content:"";position:absolute;left:2px;top:.35em;width:16px;height:9px;
  border-left:2.4px solid #292924;border-bottom:2.4px solid #292924;transform:rotate(-45deg)}
@media(max-width:900px){
  .why-grid{grid-template-columns:1fr;gap:26px}
  .why-icon{width:92px;height:92px}
}
@media(max-width:560px){
  .why-icon{width:80px;height:80px}
  .why-card{padding:22px 20px 24px}
}


/* FEATURE TRIO */
.feat{background:#fbf8f5;color:#292924;position:relative;z-index:2;padding:clamp(22px,3vw,44px) 0 clamp(10px,2vw,30px)}
.feat-title{font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;font-weight:700;
  letter-spacing:-.025em;font-size:clamp(34px,5.2vw,74px);line-height:1;margin:0 0 clamp(34px,4vw,58px);text-align:center;color:#292924}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:stretch}
.feat-card{background:#EFE7DC;border-radius:14px;padding:clamp(22px,2.2vw,32px);display:flex;flex-direction:column}
.feat-art{height:clamp(140px,13vw,190px);display:flex;align-items:flex-end;justify-content:flex-start;margin-bottom:20px}
.feat-art img{max-height:100%;max-width:clamp(110px,10vw,150px);width:auto;height:auto;display:block}
.feat-card h3{font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;font-weight:700;
  font-size:clamp(24px,2.1vw,34px);line-height:1.06;letter-spacing:-.02em;margin:0 0 24px}
.feat-card p{margin:0;font-size:clamp(16px,1.25vw,20px);line-height:1.42}
@media(max-width:900px){.feat-grid{grid-template-columns:1fr}.feat-title{text-align:left}}

/* BENEFIT QUAD */
.quad{background:#fbf8f5;color:#292924;position:relative;z-index:2;padding:clamp(50px,7vw,110px) 0 clamp(10px,2vw,30px)}
.quad-title{font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;font-weight:700;
  letter-spacing:-.025em;font-size:clamp(32px,4.4vw,62px);line-height:1;margin:0 0 clamp(32px,4vw,56px)}
.quad-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;align-items:stretch}
.quad-card{background:#EFE7DC;border-radius:14px;padding:clamp(20px,1.8vw,28px);display:flex;flex-direction:column}
.quad-art{height:clamp(110px,10vw,150px);display:flex;align-items:flex-end;margin-bottom:18px}
.quad-art img{max-height:100%;max-width:100%;width:auto;height:auto;display:block}
.quad-card h3{font-family:"itc-avant-garde-gothic-pro","Archivo",sans-serif;font-weight:700;
  font-size:clamp(20px,1.6vw,26px);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px}
.quad-card p{margin:0;font-size:clamp(15px,1.05vw,17px);line-height:1.42}
@media(max-width:1000px){.quad-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.quad-grid{grid-template-columns:1fr}}

/* ===== COVER GRID ===== */
.cover{ padding: clamp(60px,8vw,120px) 0 clamp(24px,3vw,48px); }
.cover-wrap{ max-width:1440px; margin:0 auto; padding:0 clamp(20px,4vw,60px); box-sizing:border-box; display:grid; grid-template-columns: 44% 56%; gap: clamp(24px,4vw,60px); align-items:start; }
.cover-intro{ position:sticky; top: 90px; padding-right: clamp(20px,4vw,70px); }
.cover-title{ font-family: var(--font-display, 'itc-avant-garde-gothic-pro', sans-serif); font-weight:700;
  font-size: clamp(38px,4.6vw,68px); line-height:1.02; letter-spacing:-.02em; margin:0 0 22px; color:#292924; }
.cover-num{ display:inline-flex; align-items:center; justify-content:center; width:1.5em; height:1.5em; flex:none;
  border-radius:50%; background:#292924; color:#fbf8f5; font-size:.4em; margin-right:.5em; vertical-align:.5em; line-height:1; }
.cover-lead{ font-size: clamp(16px,1.25vw,19px); line-height:1.45; max-width:34ch; color:#292924; }
.cover-grid{ min-width:0; display:grid; grid-template-columns:repeat(2,1fr); gap: clamp(14px,1.6vw,26px); }
.cover-card{ min-width:0; background:#F2EBE1; border-radius:16px; padding: clamp(20px,2vw,30px); display:flex; flex-direction:column; }
.cover-art{ height:110px; display:flex; align-items:flex-end; margin-bottom:22px; }
.cover-art img{ height:100%; width:auto; max-width:100%; object-fit:contain; object-position:left bottom; }
.cover-card h3{ font-family: var(--font-display, 'itc-avant-garde-gothic-pro', sans-serif); font-weight:700;
  font-size: clamp(20px,1.7vw,27px); line-height:1.12; letter-spacing:-.01em; margin:0 0 18px; color:#292924; }
.cover-card p{ font-size: clamp(15px,1.1vw,18px); line-height:1.45; margin:0; color:#292924; }
@media (max-width: 1000px){
  .cover-wrap{ grid-template-columns:1fr; }
  .cover-intro{ position:static; padding-right:0; }
}
@media (max-width: 640px){ .cover-grid{ grid-template-columns:1fr; } }

/* ============ RAINBOW SCENE (full-bleed, bottom of page) ============ */
.arcband{
  /* change any of these to recolour the whole scene */
  --arc-sky:#FFC800;
  --arc-1:#FF88C8;   /* outer band */
  --arc-2:#0061EF;
  --arc-3:#2A4636;
  --arc-sun:#C26B2A;
  --arc-face:#292924;
  --arc-eye-white:#FBF8F5;
  --arc-cloud:#FBF5E9;
  position:relative; width:100%; overflow:hidden; line-height:0;
  background:#fbf8f5;
}
.arcband svg{ display:block; width:100%; height:auto; }
.arcband .arc-rain{ transform-box:view-box; transform-origin:center;
  animation:arc-bob 6s ease-in-out infinite; }
@keyframes arc-bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.arcband .arc-blink{ animation:arc-blink 5.2s infinite; transform-box:fill-box; transform-origin:center; }
.arcband .arc-pupil{ transform-box:fill-box; transform-origin:center; animation:arc-look 7s ease-in-out infinite; }
@keyframes arc-look{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-34px,4px)}
  45%{transform:translate(12px,-10px)}
  70%{transform:translate(-14px,10px)}
}
@keyframes arc-blink{ 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.08)} }
.arcband .arc-cloud{ animation:arc-drift 16s ease-in-out infinite; }
.arcband .arc-cloud.c2{ animation-duration:22s; animation-direction:reverse; }
@media (prefers-reduced-motion:reduce){ .arcband *{ animation:none !important; } }


/* ---- statement media: blue icon block with looping icons ---- */
.statement-media.icon-block{
  background: #eeeeee !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.icon-loop{
  position: relative;
  width: 36%;
  aspect-ratio: 1 / 1;
}
.icon-loop img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0;
  transform: scale(.92);
  animation: iconCycle 7.5s linear infinite;
}
.icon-loop img:nth-child(1){ animation-delay: 0s; }
.icon-loop img:nth-child(2){ animation-delay: 1.5s; }
.icon-loop img:nth-child(3){ animation-delay: 3s; }
.icon-loop img:nth-child(4){ animation-delay: 4.5s; }
.icon-loop img:nth-child(5){ animation-delay: 6s; }
@keyframes iconCycle{
  0%    { opacity: 0; transform: scale(.92); }
  2%    { opacity: 1; transform: scale(1); }
  18%   { opacity: 1; transform: scale(1); }
  20%   { opacity: 0; transform: scale(1.06); }
  100%  { opacity: 0; transform: scale(.92); }
}

/* ---- M300 footer ---- */
.m300-footer {
  background: #fbf8f5;
  color: #181f1f;
  padding: clamp(30px, 4vw, 60px) 0 clamp(40px, 5vw, 80px);
  border-top: 1px solid rgba(24, 31, 31, .18);
  position: relative;
  z-index: 2;
}
.m300-footer .wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-by,
.footer-legal {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  line-height: 1.4;
  margin: 0;
  color: #000000;
  opacity: 1;
}


/* ---- fixed chapter menu ---- */
.chapters { display: block !important; background: transparent !important; border: 0 !important; }

/* ---- tighter spacing: 6-in-10 -> Talks, and smaller poster ---- */
#talks { padding-top: clamp(18px, 2.5vw, 32px); }
#talks .define-title { padding-top: 12px; }
.poster-duo { width: 80%; max-width: 944px; }

/* ---- blue slogan banner matches section width below ---- */
.slogan-banner:not(.tint-sec) {
  width: 80%;
  max-width: 944px;
  margin-inline: auto;
  min-height: clamp(320px, 34vw, 520px);
}

/* ---- statement pair aligns with the blue banner above ---- */
.statement-duo {
  width: 80%;
  max-width: 944px;
  margin-inline: auto;
}

/* ---- fixed scroll-direction arrow ---- */
.scroll-arrow {
  position: fixed;
  right: clamp(14px, 2vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  width: clamp(44px, 5vw, 56px);
  height: clamp(44px, 5vw, 56px);
  border-radius: 50%;
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(24, 31, 31, 0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
  pointer-events: auto;
}

.scroll-arrow:hover,
.scroll-arrow:focus-visible {
  background: rgba(24, 31, 31, 0.62);
  outline: none;
}

.scroll-arrow svg {
  width: 52%;
  height: 52%;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-arrow.is-up svg {
  transform: rotate(180deg);
}

@media (max-width: 640px) {
  .scroll-arrow {
    right: 10px;
    width: 42px;
    height: 42px;
  }
}


/* ---- motion pass: hover zoom on cards ---- */
.feat-card, .cover-card, .why-card, .quad-card {
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s ease;
  will-change: transform;
}
.feat-card:hover, .cover-card:hover, .why-card:hover, .quad-card:hover {
  transform: scale(1.035);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.why-card:hover .why-icon { transform: translateY(-6px) rotate(-4deg); }
.why-icon { transition: transform .45s cubic-bezier(.2,.7,.3,1); }

/* ---- typewriter for the language words ---- */
.camp-words li { overflow: visible; }
.camp-words { max-width: 72%; }
.camp-words li .tw {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
  padding-bottom: .22em;
  margin-bottom: -.22em;
  vertical-align: bottom;
}
.camp-words li.is-typing .tw {
  animation: tw-type var(--tw-duration, 0.9s) steps(var(--tw-steps, 8), end) forwards;
}
@keyframes tw-type { from { width: 0 } to { width: var(--tw-width, 100%) } }


/* ---- cover cards drift with scroll ---- */
.cover-card { will-change: transform; transform: translate3d(0, var(--drift, 0px), 0); }
.cover-card:hover { transform: translate3d(0, var(--drift, 0px), 0) scale(1.035); }

/* ---- why arrow motion ---- */
.why-arrow svg { animation: why-nudge 2.4s ease-in-out infinite; }
@keyframes why-nudge {
  0%, 100% { transform: translateX(-8%) }
  50% { transform: translateX(12%) }
}
.why-title:hover .why-arrow { transform: scale(1.08); }
.why-arrow { transition: transform .4s cubic-bezier(.2,.7,.3,1); }

/* ---- statement gif slightly smaller inside its box ---- */
.statement-media.icon-block .statement-gif {
  width: 86%;
  height: 86%;
  margin: auto;
  object-fit: contain;
}
.statement-media.icon-block { display: grid; place-items: center; }

/* ============ motion pass 2 ============ */

/* 1. scroll-triggered section reveals (auto-tagged headings + lead copy) */
.sreveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--sr-delay, 0s);
}
.sreveal.in { opacity: 1; transform: none; }

/* 2. hairline divider draw-in */
.cr-grid.rule { border-top: 0; position: relative; }
.cr-grid.rule::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(24, 31, 31, 0.25);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.cr-grid.rule.line-in::before { transform: scaleX(1); }

/* 3. staggered card entrances */
.feat-card.reveal, .cover-card.reveal, .why-card.reveal, .quad-card.reveal {
  transition-delay: var(--stagger, 0s) !important;
}

/* 4. scroll arrow bob */
.scroll-arrow { animation: arrow-bob 2.6s ease-in-out infinite; }
.scroll-arrow:hover { animation-play-state: paused; }
@keyframes arrow-bob {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% + 7px)); }
}
.scroll-arrow.is-up { animation-name: arrow-bob-up; }
@keyframes arrow-bob-up {
  0%, 100% { transform: translateY(-50%); }
  50% { transform: translateY(calc(-50% - 7px)); }
}

/* 5. slogan banner clipped mask reveal */
.slogan-banner .slogan.reveal {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 105% 0);
  transition: clip-path 1.1s cubic-bezier(.16,1,.3,1);
}
.slogan-banner .slogan.reveal.in { clip-path: inset(0 0 -10% 0); }

/* 6. typewriter trailing cursor */
.camp-words li .tw::after { content: none; }
.camp-words li.is-caret {
  position: relative;
  overflow: visible;
  width: fit-content;
}
.camp-words li.is-caret::after {
  content: "";
  position: absolute;
  right: -0.14em;
  top: 0.12em;
  bottom: 0.12em;
  width: 2px;
  background: currentColor;
  animation: caret-blink .75s steps(1, end) infinite;
}
.camp-words li.is-caret.caret-out::after {
  animation: none;
  opacity: 0;
  transition: opacity .5s ease;
}
@keyframes caret-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }

/* 8. nav hover lift + orange dot */
.chapters .chapter-link {
  position: relative;
  transition: transform .28s cubic-bezier(.2,.7,.3,1), color .25s ease;
}
.chapters .chapter-link:hover,
.chapters .chapter-link:focus-visible { transform: translateY(-2px); }
.chapters .chapter-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ff5a00;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity .25s ease, transform .25s ease;
}
.chapters .chapter-link:hover::after,
.chapters .chapter-link:focus-visible::after,
.chapters .chapter-link.is-active::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  .sreveal { opacity: 1; transform: none; transition: none; }
  .cr-grid.rule::before { transform: scaleX(1); }
  .scroll-arrow { animation: none; }
  .slogan-banner .slogan.reveal { clip-path: none; }
}

/* ---- content protection ---- */
html, body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input, textarea, [contenteditable="true"] {
  -webkit-user-select: text;
  user-select: text;
}

img, video {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

a img, button img, .chapter-logo img {
  pointer-events: auto;
}

/* ---- newsletter submit button states ---- */
.inbox-form button.inbox-submit{
  position:relative;overflow:hidden;min-width:11.5em;
  transition:background .35s ease,color .35s ease,transform .25s ease;
}
.inbox-form button.inbox-submit .lbl{
  display:block;transition:transform .38s cubic-bezier(.22,.7,.3,1),opacity .28s ease;
}
.inbox-form button.inbox-submit .lbl-done{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  transform:translateY(110%);opacity:0;
}
.inbox-form button.inbox-submit.is-sending{opacity:.75;cursor:progress;}
.inbox-form button.inbox-submit.is-done{background:#ff5a00;color:#fff;transform:scale(1.02);}
.inbox-form button.inbox-submit.is-done .lbl-idle{transform:translateY(-110%);opacity:0;}
.inbox-form button.inbox-submit.is-done .lbl-done{transform:translateY(0);opacity:1;}
.inbox-form button.inbox-submit.is-error{background:#8b1d1d;color:#fff;}