/* ============================================================
   SAISEI® v3 — playful neo-brutalist design system
   ============================================================ */

:root {
  --bone: #f3efe6;
  --bone-dim: #e9e4d7;
  --ink: #181511;
  --ink-soft: color-mix(in srgb, var(--ink) 62%, transparent);
  /* physical colours that must NOT flip with the theme (cursor blend) */
  --bone-static: #f3efe6;
  --ink-static: #181511;
  --orange: #ff4d21;
  --blue: #2c5bff;
  --lime: #c8f04c;
  --lilac: #cdbcff;
  --pink: #ffb6e1;

  --font-display: Clash Display, sans-serif;
  --font-body: General Sans, sans-serif;
  --font-serif: Instrument Serif, serif;

  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-hard-sm: 3px 3px 0 var(--ink);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --nav-h: 84px;
}

/* ---------- dark mode: the exact inversion of the light system ----------
   Every rule below runs on var(--bone)/var(--ink) (or color-mix of them),
   so swapping the two flips the whole page — including the .section--ink
   "contrast sections", which become bone-light islands in dark mode. */
html[data-theme='dark'] {
  --bone: #181511;
  --bone-dim: #23201a;
  --ink: #f3efe6;
}

/* the grain noise is dark — invert it so texture survives on ink */
html[data-theme='dark'] .grain {
  filter: invert(1);
}

/* .page-shell is the Webflow page wrapper with hardcoded bone/ink colours
   baked into the Designer — re-bind it to the vars so the whole page
   (and everything inheriting from it) follows the theme */
.page-shell {
  background-color: var(--bone);
  color: var(--ink);
}

/* more Designer-hardcoded colours re-bound to the theme vars
   (identical rendering in light mode, correct inversion in dark) */
.faq__item,
.faq__q {
  color: var(--ink);
}
.stat__num {
  color: var(--ink);
}
.stat__label {
  color: var(--ink-soft);
}
.ghost .ghost__lead-strong {
  color: var(--bone);
}
/* pastel sticker cards keep their light fills in both themes,
   so their text must stay physically dark */
.value-card {
  color: var(--ink-static);
}

/* step + footer text set in the Designer with literal bone rgba —
   re-bound at the same opacities so they follow the inversion */
.step__text {
  color: color-mix(in srgb, var(--bone) 72%, transparent);
}
.footer__blurb-text {
  color: color-mix(in srgb, var(--bone) 60%, transparent);
}
.footer__col-title {
  color: color-mix(in srgb, var(--bone) 50%, transparent);
}
.footer__link,
.footer__small,
.footer__line {
  color: color-mix(in srgb, var(--bone) 86%, transparent);
}

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

html {
  scroll-behavior: auto;
  overflow-x: clip;
}

body {
  background: var(--bone);
  color: var(--ink);
  //font-family: var(--font-body);
  //font-size: 1.0625rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* the inert Webflow page wrapper: clip horizontal overflow at the in-flow
   root so animation initial-states (e.g. steps parked at x:70) can never
   widen the document — on Android that expands the layout viewport and
   shifts every fixed element (preloader, nav) off-screen.
   position:fixed / pinned elements are unaffected by ancestor clip. */
#smooth-wrapper {
  overflow-x: clip;
}

img,
svg,
canvas,
video {
  display: block;
  max-width: 100%;
}

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

ul {
  list-style: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::selection {
  background: var(--ink);
  color: var(--lime);
}

:focus-visible {
  outline: 2px dashed var(--orange);
  outline-offset: 4px;
}

/* scrollbar hidden — Lenis owns the scroll feel; the page stays scrollable */
html {
  scrollbar-width: none;
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html.has-cursor * {
  cursor: none !important;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 10010;
  padding: 0.7em 1.4em;
  background: var(--ink);
  color: var(--bone);
  border-radius: 99px;
  font-weight: 600;
  transition: top 0.25s var(--ease-out);
}
.skip-link:focus {
  top: 16px;
}

/* ---------- layout helpers ---------- */
.container {
  width: min(1400px, 92vw);
  margin-inline: auto;
}

.section {
  padding-block: clamp(6rem, 13vh, 10rem);
}

.section-tag {
  //font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-bottom: clamp(1.6rem, 3vw, 2.8rem);
}

.h2 {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 0.98;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.h2 em {
  //font-family: var(--font-serif);
  //font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  color: var(--orange);
  //font-size: 1.06em;
  letter-spacing: 0;
}

/* dark sections */
.section--ink {
  background: var(--ink);
  color: var(--bone);
}

.section--ink .section-tag {
  color: color-mix(in srgb, var(--bone) 55%, transparent);
}

/* ---------- grain ---------- */
.grain {
  position: fixed;
  inset: -100%;
  width: 300%;
  height: 300%;
  z-index: 9990;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 9s steps(10) infinite;
}

@keyframes grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-3%, -7%);
  }
  20% {
    transform: translate(-9%, 3%);
  }
  30% {
    transform: translate(5%, -12%);
  }
  40% {
    transform: translate(-4%, 13%);
  }
  50% {
    transform: translate(-9%, -4%);
  }
  60% {
    transform: translate(8%, 2%);
  }
  70% {
    transform: translate(0%, 9%);
  }
  80% {
    transform: translate(3%, 22%);
  }
  90% {
    transform: translate(-7%, 8%);
  }
}

/* ---------- cursor ----------
   Bone-coloured + mix-blend-mode:difference → self-inverts over any backdrop
   (dark ink sections, reel cards, video) with zero section-tracking JS.
   The label state opts OUT of blending and becomes a rotated orange sticker. */
.cursor,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
}

.cursor {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--bone-static); /* physical: difference-blend needs a light colour in BOTH themes */
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: difference;
  rotate: 0deg;
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
    background-color 0.3s, border-color 0.3s, box-shadow 0.3s,
    rotate 0.35s var(--ease-out);
}

/* the dot is the site's ✦ glyph (GSAP owns `transform`, so states
   use the independent `rotate` / `scale` properties) */
.cursor-dot {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bone-static);
  font-size: 13px;
  line-height: 1;
  mix-blend-mode: difference;
  rotate: 0deg;
  scale: 1;
  transition: rotate 0.3s var(--ease-out), scale 0.25s var(--ease-out);
}
.cursor-dot::before {
  content: '✦';
}
.cursor-dot.is-hover {
  rotate: 90deg;
}
.cursor-dot.is-hidden {
  scale: 0;
}

.cursor__label {
  //font-size: 0.66rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-static); /* always dark — it sits on the orange sticker */
  opacity: 0;
  transition: opacity 0.2s;
  white-space: nowrap;
}

.cursor.is-hover {
  width: 64px;
  height: 64px;
  background: color-mix(in srgb, var(--bone-static) 15%, transparent);
}

/* sticker mode — solid orange, ink border, hard shadow, playful tilt */
.cursor.is-label {
  width: 96px;
  height: 96px;
  mix-blend-mode: normal;
  background: var(--orange);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  rotate: -8deg;
}

.cursor.is-label .cursor__label {
  opacity: 1;
}

/* ---------- section wipe (pixel-mosaic anchor transition) ----------
   fixed 14×7 grid of orange blocks; JS fills them randomly, jumps the
   scroll instantly while the screen is covered, then clears them */
.wipe {
  position: fixed;
  inset: 0;
  z-index: 9985; /* above nav (9900) & menu (9890), under grain + cursor */
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  grid-template-rows: repeat(7, 1fr);
  pointer-events: none;
  visibility: hidden;
}

.wipe.is-active {
  visibility: visible;
  pointer-events: auto; /* swallow clicks mid-transition */
}

.wipe span {
  background: var(--orange);
  /* bleed a hair past the cell so fractional grid sizes leave no seams */
  outline: 1px solid var(--orange);
  opacity: 0;
}

/* ---------- preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9980;
  background: var(--ink);
  color: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10%;
  width: 120%;
  height: 12vh;
  background: var(--ink);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}

.preloader__word {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: 0.02em;
}

.preloader__bottom {
  position: absolute;
  left: 4vw;
  right: 4vw;
  bottom: 4.5vh;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.preloader__hint {
  //font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.55;
}

.preloader__count {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1;
  color: var(--orange);
}

.preloader__bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: color-mix(in srgb, var(--bone) 14%, transparent);
}

.preloader__bar span {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
}

/* ---------- buttons & stickers ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1em 2em;
  background: var(--ink);
  color: var(--bone);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-weight: 600;
  //font-size: 0.95rem;
  overflow: hidden;
  white-space: nowrap;
}

.btn::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--orange);
  border-radius: inherit;
  transform: translateY(102%);
  transition: transform 0.45s var(--ease-inout);
}

.btn:hover::before {
  transform: translateY(0);
}

.btn__label {
  position: relative;
  z-index: 1;
  transition: color 0.3s;
}

.btn:hover .btn__label {
  color: var(--ink);
}

.btn--sm {
  padding: 0.75em 1.5em;
  //font-size: 0.85rem;
}

.btn--big {
  padding: 1.25em 2.6em;
  //font-size: clamp(1.05rem, 2vw, 1.45rem);
  box-shadow: var(--shadow-hard);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.btn--ghost .btn__label {
  color: var(--ink);
}

/* ---------- toast (clipboard feedback) — a sticker that pops from the bottom ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: clamp(1.5rem, 4vh, 2.5rem);
  z-index: 9986; /* above nav & menu, under grain + cursor */
  transform: translateX(-50%);
  rotate: -2deg;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.4em;
  background: var(--lime);
  color: var(--ink-static); /* always dark — it sits on lime in both themes */
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  max-width: calc(100vw - 2rem);
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.25s var(--ease-out), translate 0.3s var(--ease-out),
    visibility 0s 0.3s;
}

.toast.is-show {
  visibility: visible;
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.2s var(--ease-out),
    translate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s;
}

.toast__ico {
  color: var(--orange);
  font-size: 1.05em;
}

.toast__mail {
  text-transform: none; /* the address reads as typed, not shouted */
}

@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.is-show {
    transition: none;
    translate: 0 0;
  }
}

/* ---------- theme toggle — a sticker in the nav ---------- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.55em 1.1em;
  background: var(--lilac);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-static); /* always dark — it sits on lilac in both themes */
  white-space: nowrap;
  transform: rotate(-2deg);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
}
.theme-toggle:hover {
  transform: rotate(0deg) translate(-1px, -1px);
}
.theme-toggle:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0 var(--ink);
}
.theme-toggle i {
  font-style: normal;
  color: var(--orange);
}

@media (max-width: 480px) {
  /* tiny screens: just the ✦ chip, no label */
  .theme-toggle span {
    display: none;
  }
  .theme-toggle {
    padding: 0.55em 0.8em;
  }
}

.sticker {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.55em 1.1em;
  background: var(--lime);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  //font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-static); /* always dark — pastel fills don't flip with the theme */
  transform: rotate(var(--rot, -3deg));
  white-space: nowrap;
}

.sticker--lilac {
  background: var(--lilac);
}
.sticker--pink {
  background: var(--pink);
}
.sticker--lime {
  background: var(--lime);
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9900;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-inline: 4vw;
  transition: transform 0.5s var(--ease-out), color 0.35s;
}

.nav--hidden {
  transform: translateY(-110%);
}

/* the nav floats with no backdrop of its own — over ink surfaces (a
   .section--ink behind the nav band, or the open mobile menu) it flips
   its monochrome parts to bone. Driven by JS (initNavContrast); the
   theme vars keep it correct in dark mode, where ink sections render
   as light islands and --bone flips to dark with them. */
.nav--contrast {
  color: var(--bone);
}
.nav--contrast .nav__link::after {
  background: var(--bone);
}
.nav--contrast .nav__clock {
  color: color-mix(in srgb, var(--bone) 62%, transparent);
}
.nav--contrast .burger {
  border-color: var(--bone);
}
.nav--contrast .burger span {
  background: var(--bone);
}

.nav__logo {
  //font-family: var(--font-display);
  font-weight: 700;
  //font-size: 1.45rem;
  letter-spacing: 0.01em;
}

.nav__logo sup {
  //font-size: 0.55em;
  color: var(--orange);
}

.nav__links {
  display: flex;
  gap: clamp(1.2rem, 2.6vw, 2.4rem);
}

.nav__link {
  position: relative;
  font-weight: 500;
  //font-size: 0.95rem;
  padding-block: 0.3em;
}

.nav__link sup {
  //font-size: 0.62em;
  color: var(--orange);
  font-weight: 600;
}

.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s var(--ease-inout);
}

.nav__link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav__meta {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.nav__clock {
  //font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.burger {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  flex-shrink: 0;
}

.burger span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 20px;
  height: 2px;
  background: var(--ink);
  transform: translate(-50%, calc(-50% - 4px));
  transition: transform 0.35s var(--ease-inout);
}

.burger span:last-child {
  transform: translate(-50%, calc(-50% + 4px));
}

.burger.is-open span:first-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

.burger.is-open span:last-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* ---------- mobile menu ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 9890;
  background: var(--ink);
  color: var(--bone);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3rem;
  padding: 12vh 8vw 6vh;
  clip-path: inset(0% 0% 100% 0%);
  pointer-events: none;
}

.menu.is-open {
  pointer-events: auto;
}

.menu__links {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

.menu__link {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(2.4rem, 8.5vw, 4.6rem);
  text-transform: uppercase;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  transition: color 0.25s;
}

.menu__link sup {
  //font-size: 0.32em;
  color: var(--orange);
  //font-family: var(--font-body);
}

.menu__link:hover {
  color: var(--orange);
}

.menu__foot {
  //font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.6;
}

/* ---------- hero (particle resurrection) ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-h);
  padding-bottom: 4vh;
  overflow: clip;
  text-align: center;
}

.hero__inner {
  position: relative;
  z-index: 2;
  width: min(1400px, 92vw);
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  //font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.hero__eyebrow .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--orange);
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.55);
    opacity: 0.6;
  }
}

.hero__particles {
  position: relative;
  width: 100%;
  height: clamp(240px, 44vh, 470px);
  margin-top: clamp(1rem, 2.5vh, 2rem);
}

.hero__particles canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__caption {
  position: absolute;
  bottom: -1.9em;
  left: 0.5rem;
  //font-family: var(--font-serif);
  //font-style: italic;
  //font-size: 1rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.hero__caption--hint {
  left: auto;
  right: 0.5rem;
  //font-size: 0.88rem;
  opacity: 0.75;
}

.hero__caption.is-swap {
  animation: capIn 0.45s var(--ease-out);
}

@keyframes capIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__statement {
  margin-top: clamp(3rem, 7vh, 4.6rem);
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(1.5rem, 3.2vw, 2.7rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.hero__statement-mask {
  display: block;
  overflow: hidden;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

.hero__statement-inner {
  display: block;
}

.hero__statement em {
  //font-family: var(--font-serif);
  //font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  //font-size: 1.12em;
  color: var(--orange);
}

.hero__flower {
  display: inline-block;
  //font-size: 0.6em;
  color: var(--orange);
  vertical-align: 0.3em;
  margin-left: 0.18em;
  animation: spin 9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.hero__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: clamp(1.8rem, 4vh, 2.8rem);
}

.sticker--float {
  position: absolute;
  z-index: 3;
}

.sticker--float:nth-of-type(1) {
  top: 22%;
  left: 6%;
}

.sticker--float:nth-of-type(2) {
  top: 19%;
  right: 6%;
}

.sticker--float:nth-of-type(3) {
  bottom: 13%;
  left: 7%;
}

.hero__badge {
  position: absolute;
  z-index: 3;
  bottom: 5.5vh;
  right: 4vw;
  width: 110px;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__badge svg {
  position: absolute;
  inset: 0;
  animation: spin 16s linear infinite;
}

.hero__badge text {
  //font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--ink);
  //font-family: var(--font-body);
}

.hero__badge-arrow {
  //font-size: 1.5rem;
  animation: bob 1.8s ease-in-out infinite;
}

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

/* ---------- marquee ---------- */
.marquee {
  border-block: 2px solid var(--ink);
  padding-block: clamp(0.9rem, 2vh, 1.4rem);
  overflow: hidden;
  background: var(--bone);
}

.marquee--accent {
  background: var(--orange);
}

.marquee__inner {
  display: flex;
  width: max-content;
  will-change: transform;
}

.marquee__part {
  display: flex;
  align-items: center;
  gap: clamp(1.6rem, 3vw, 3rem);
  padding-right: clamp(1.6rem, 3vw, 3rem);
  flex-shrink: 0;
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(1.7rem, 3.6vw, 3.2rem);
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee__part i {
  //font-style: normal;
  color: var(--orange);
  //font-size: 0.75em;
}

.marquee--accent .marquee__part i {
  color: var(--bone);
}

/* ---------- about ---------- */
.about__text {
  //font-family: var(--font-display);
  font-weight: 500;
  //font-size: clamp(1.7rem, 3.6vw, 3.3rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  max-width: min(1100px, 100%);
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: clamp(4rem, 9vh, 7rem);
  padding-top: 2.6rem;
  border-top: 2px solid var(--ink);
}

.stat__row {
  display: flex;
  align-items: flex-start;
}

.stat__num {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(2.8rem, 5.6vw, 5rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat__plus {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: 1.6rem;
  color: var(--orange);
  margin-top: 0.3em;
}

.stat p {
  margin-top: 0.5rem;
  //font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

/* ---------- logo wall ---------- */
.logos {
  border-block: 2px solid var(--ink);
  background: var(--bone-dim);
  padding-block: clamp(2.6rem, 6vh, 4.4rem);
}

.logos__tag {
  text-align: center;
  //font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}

.logos__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.logos__grid li {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.5em;
  padding: 1.4rem 1rem;
  border: 1px dashed color-mix(in srgb, var(--ink) 25%, transparent);
  margin: -0.5px;
  transition: background-color 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}

.logos__grid li:hover {
  background: var(--ink);
  color: var(--bone);
  transform: rotate(-1.5deg) scale(1.04);
  z-index: 1;
}

.logos__name {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(1rem, 1.6vw, 1.35rem);
  text-transform: uppercase;
  white-space: nowrap;
}

.logos__year {
  //font-family: var(--font-serif);
  //font-style: italic;
  //font-size: 0.85em;
  color: var(--orange);
}

/* ---------- work: project reel (stacked deck + sliding details) ---------- */
.reel {
  position: relative;
  z-index: 1;
  background: var(--bone);
  border-top: 2px solid var(--ink);
}

.reel__head {
  padding-block: clamp(5rem, 11vh, 8rem) clamp(2rem, 5vh, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
}

.reel__hint {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-soft);
}

/* the pinned stage — full viewport, only a 1.5rem gutter on every edge */
.reel__pin {
  position: relative;
  height: 100svh;
}

.reel__stage {
  height: 100%;
  display: flex; /* DOM order sets sides: content LEFT, video RIGHT */
  gap: 1.5rem; /* gutter between the two columns */
  padding-left: 1.5rem; /* gutter to the page edges */
  padding-right: 1.5rem; /* gutter to the page edges */
}

.reel__details {
  flex: 1 1 auto;
  min-width: 0;
} /* content cards — left */
.reel__media {
  flex: 0 0 54%;
  min-width: 0;
} /* video cards — right (the hero) */

/* ---- both decks: a relative pile inside its pane; cards are absolutely stacked + transformed
       by GSAP. overflow:hidden clips cards still parked below the pile (and contains the stack) ---- */
.rm-stack,
.rd-stack {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* content cards: fill the column width (its pile peeks from the 7% top room) */
.rd-card {
  position: absolute;
  top: 7%;
  bottom: 7%;
  left: 0;
  right: 0;
  will-change: transform;
  transform-origin: 50% 50%;
}

/* video cards: sized to each video's aspect ratio (JS sets width/height). Anchored at the top &
   centred horizontally; JS sets the vertical position (the column scrolls them one after another). */
.rm-card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: 80%; /* fallback until JS fits it to the detected ratio */
  height: 64%;
  will-change: transform;
  transform-origin: 50% 50%;
}

.rm-tile {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 24px;
  background: var(--rm-bg, var(--ink));
}
.rm-card.is-live .rm-tile {
  cursor: pointer;
}

.rm-poster,
.rm-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* fill the tile edge-to-edge — the box is already the video's ratio, so no real crop */
  display: block;
  filter: saturate(1.06) contrast(1.03);
}

.rm-video {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.rm-video.is-ready {
  opacity: 1;
}

/* depth dim for the cards waiting behind the front (driven by --card-dim) */
.rm-tile::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--ink);
  opacity: var(--card-dim, 0);
  pointer-events: none;
}

/* ---- content cards: per-project colour panels (their own stacked deck, left) ---- */
.rd-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.85rem, 1.8vh, 1.6rem);
  /* extra top room so the corner slide number never collides with the eyebrow */
  padding: clamp(2.75rem, 5.5vw, 4.75rem) clamp(1.75rem, 4vw, 3.5rem)
    clamp(1.75rem, 4vw, 3.5rem);
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 30px;
  background: var(--rd-bg, var(--bone));
  color: var(--rd-fg, var(--ink));
}
/* depth dim for the content cards waiting behind the front (driven by --card-dim) */
.rd-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--ink);
  opacity: var(--card-dim, 0);
  pointer-events: none;
}
.rd-card > * {
  position: relative;
  z-index: 3;
} /* content above the dim overlay */
.rd-card.is-live {
  cursor: pointer;
}

/* slide number — top-left corner of the content card (moved off the video tile) */
.rd-card > .rd-num {
  position: absolute;
  z-index: 4;
  top: clamp(1.1rem, 2.6vw, 2rem);
  left: clamp(1.5rem, 3.4vw, 2.6rem);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.8rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--rd-fg, var(--ink));
  opacity: 0.55;
  pointer-events: none;
}

.rd-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--rd-accent, currentColor);
}
.rd-eyebrow i {
  //font-style: normal;
  opacity: 0.55;
}

.rd-title {
  font-family: var(--font-display);
  font-weight: 600;
  /* capped so long names (TENUTA SANT'APOLLONIA) clear the card edge */
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* services — a quiet serif-italic index (the site's "aside" voice), star-separated
   like the marquee (Strategy ✦ Identity ✦ …). Deliberately NOT another pill row. */
.rd-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.6em;
  row-gap: 0.15em;
  max-width: 36ch;
}

.rd-tag {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.55vw, 1.45rem);
  line-height: 1.35;
  text-transform: lowercase;
  color: var(--rd-fg, currentColor);
  white-space: nowrap;
}

.rd-tags__star {
  align-self: center;
  font-style: normal;
  font-size: 0.55em;
  line-height: 1;
  color: var(--rd-accent, currentColor);
}

/* visit button — the site's signature solid .btn: inked fill, hard tinted shadow,
   orange wipe + lift on hover, press-down on click */
.rd-visit {
  --rd-visit-shadow: color-mix(
    in srgb,
    var(--rd-fg, var(--ink)) 30%,
    var(--rd-bg, var(--bone))
  );
  position: relative;
  align-self: flex-start;
  margin-top: clamp(0.5rem, 1.4vh, 1rem);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1em 1.9em;
  background: var(--rd-fg, var(--ink));
  border: 2px solid var(--rd-fg, var(--ink));
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rd-bg, var(--bone));
  white-space: nowrap;
  box-shadow: 4px 4px 0 var(--rd-visit-shadow);
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out);
}
.rd-visit::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--orange);
  border-radius: inherit;
  transform: translateY(102%);
  transition: transform 0.45s var(--ease-inout);
}
.rd-visit:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--rd-visit-shadow);
}
.rd-visit:hover::before {
  transform: translateY(0);
}
.rd-visit:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--rd-visit-shadow);
}
.rd-visit__label,
.rd-visit__ico {
  position: relative;
  z-index: 1;
  transition:
    color 0.3s,
    transform 0.3s var(--ease-out);
}
.rd-visit:hover .rd-visit__label,
.rd-visit:hover .rd-visit__ico {
  color: var(--ink);
}
.rd-visit:hover .rd-visit__ico {
  transform: translate(0.12em, -0.12em);
}

/* ---- slide counter — over the stage, above the dealt cards, always legible ---- */
.reel__counter {
  position: absolute;
  z-index: 700;
  bottom: clamp(0.75rem, 2vw, 1.25rem);
  right: clamp(0.75rem, 2vw, 1.25rem);
  padding: 0.5rem 1rem;
  background: var(--bone);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
}

/* ---- reduced-motion / no-GSAP fallback: a plain, readable, un-pinned pair of columns ---- */
.reel--static .reel__pin {
  height: auto;
}
.reel--static .reel__stage {
  height: auto;
  align-items: stretch;
}
.reel--static .rm-stack,
.reel--static .rd-stack {
  height: auto;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.reel--static .rm-card,
.reel--static .rd-card {
  position: relative;
  inset: auto;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
  width: auto;
  margin: 0;
  height: 56svh;
}
.reel--static .rm-tile::after,
.reel--static .rd-card::after {
  opacity: 0 !important;
}
.reel--static .reel__counter {
  display: none;
}

/* ---- mobile: stack video over content (still pinned + scrubbed) ---- */
@media (max-width: 767.98px) {
  .reel__stage {
    flex-direction: column;
    gap: 0.85rem;
    padding-inline: 1rem;
    padding-top: 0.75rem;
  }
  /* video on top with ~40% of the stage, details card ~60% below —
     the JS fits each video inside its pane, so the card is never clipped */
  .reel__media {
    flex: 1 1 auto;
    min-height: 0;
    order: -1;
  }
  .reel__details {
    flex: 0 0 58%;
  }
  .rd-card {
    top: 3%;
    bottom: 3%;
    padding: 3.2rem 1.5rem 1.6rem;
  }
  .rd-card > .rd-num {
    font-size: clamp(1.5rem, 7vw, 2.4rem);
  }
  .rd-title {
    font-size: clamp(2rem, 8vw, 3rem);
  }
  .rd-tag {
    font-size: 1rem;
  }
  .rd-visit {
    padding: 0.85em 1.6em;
    font-size: 0.9rem;
  }
}

/* ---------- work: the archive ---------- */
.archive {
  padding-block: clamp(4rem, 9vh, 7rem) clamp(6rem, 12vh, 9rem);
  border-top: 2px solid var(--ink);
  position: relative;
  z-index: 6;
  background: var(--bone);
}

.archive__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.6rem, 3vh, 2.6rem);
}

.archive__title {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(1.5rem, 3vw, 2.4rem);
  text-transform: uppercase;
}

.archive__title em {
  //font-family: var(--font-serif);
  //font-style: italic;
  font-weight: 400;
  text-transform: lowercase;
  color: var(--orange);
  //font-size: 1.08em;
}

.archive__count {
  //font-family: var(--font-serif);
  //font-style: italic;
  //font-size: 1.05rem;
  color: var(--ink-soft);
}

.archive__list {
  border-top: 2px solid var(--ink);
}

.archive__row {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr 90px 50px;
  align-items: center;
  gap: 1.5rem;
  padding: 1.35rem 0.4rem;
  border-bottom: 2px solid var(--ink);
  transition: padding-left 0.35s var(--ease-out);
}

.archive__row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bone-dim);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s var(--ease-inout);
}

.archive__row:hover {
  padding-left: 1.2rem;
}

.archive__row:hover::before {
  transform: scaleY(1);
}

.archive__name {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  text-transform: uppercase;
  line-height: 1;
}

.archive__cat {
  //font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}

.archive__year {
  //font-family: var(--font-serif);
  //font-style: italic;
  color: var(--ink-soft);
}

.archive__arrow {
  //font-size: 1.4rem;
  justify-self: end;
  transition: transform 0.3s var(--ease-out), color 0.3s;
}

.archive__row:hover .archive__arrow {
  transform: translate(4px, -4px);
  color: var(--orange);
}

.archive__row--cta .archive__name,
.archive__row--cta .archive__arrow {
  color: var(--orange);
}

/* floating archive thumbnail */
.thumb-float {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9930;
  width: 290px;
  height: 195px;
  border: 2px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: var(--bone-dim);
}

.thumb-float img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- process (dark) ---------- */
.process__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

.process__blurb {
  margin-top: 1.6rem;
  color: color-mix(in srgb, var(--bone) 65%, transparent);
  max-width: 42ch;
}

.process__steps {
  position: relative;
  /* min bound keeps ~20px of air between the 54px bubble and the text
     (the old 3.6rem floor left a 4px gap on mobile) */
  padding-left: clamp(4.6rem, 5vw, 4.75rem);
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vh, 5rem);
}

.process__line {
  position: absolute;
  left: 26px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  background: var(--orange);
  transform: scaleY(0);
  transform-origin: top;
}

.step {
  position: relative;
}

/* bone squircle + hard orange shadow — same language as the ghost case-file
   card (cream surface / orange offset), tilted like the hero stickers */
.step__bubble {
  position: absolute;
  left: calc(-1 * clamp(4.6rem, 5vw, 4.75rem));
  top: 0;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  //font-size: 1.5rem;
  background: var(--bone);
  border: none;
  border-radius: 18px;
  box-shadow: 4px 4px 0 var(--orange);
  rotate: -3deg;
  transition: rotate 0.3s var(--ease-out);
}
.step:nth-child(even) .step__bubble {
  rotate: 3deg;
}
.step:hover .step__bubble {
  rotate: 0deg;
}

/* .ghost__point-mark markup+base styles live in Webflow — these rules
   override them (this sheet loads after Webflow's) to match .step__bubble */
.ghost__point .ghost__point-mark {
  background: var(--bone);
  border: none;
  border-radius: 15px;
  box-shadow: 3px 3px 0 var(--orange);
  rotate: -3deg;
  transition: rotate 0.3s var(--ease-out);
}
.ghost__point:nth-child(even) .ghost__point-mark {
  rotate: 3deg;
}
.ghost__point:hover .ghost__point-mark {
  rotate: 0deg;
}

/* the .ghost section is styled in Webflow with hardcoded colours — re-bind
   its surface + text to the theme vars so it inverts like .section--ink
   (the cream case-file card inside is a "paper prop": it stays cream) */
.ghost {
  background-color: var(--ink);
}
.ghost .ghost__title,
.ghost .ghost__point-title {
  color: var(--bone);
}
.ghost .ghost__lead {
  color: color-mix(in srgb, var(--bone) 72%, transparent);
}
.ghost .ghost__point-text {
  color: color-mix(in srgb, var(--bone) 62%, transparent);
}
.ghost .section-tag {
  color: color-mix(in srgb, var(--bone) 55%, transparent);
}

.step__meta {
  display: inline-block;
  //font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--orange);
  margin-bottom: 0.7rem;
}

.step__meta i {
  //font-style: normal;
  color: color-mix(in srgb, var(--bone) 40%, transparent);
}

.step__body h3 {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(1.7rem, 3.4vw, 2.7rem);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 0.8rem;
}

.step__body p {
  color: color-mix(in srgb, var(--bone) 72%, transparent);
  max-width: 48ch;
}

/* ---------- services ---------- */
.services .h2 {
  margin-bottom: clamp(2.4rem, 5vh, 4rem);
}

.services__list {
  border-top: 2px solid var(--ink);
}

.service {
  position: relative;
  display: grid;
  grid-template-columns: 90px 1fr 1.1fr 60px;
  align-items: center;
  gap: 2rem;
  padding-block: clamp(1.8rem, 4vh, 3rem);
  border-bottom: 2px solid var(--ink);
  transition: padding-left 0.4s var(--ease-out);
}

.service:hover {
  padding-left: 1.4rem;
}

.service::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--bone-dim);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.4s var(--ease-inout);
}

.service:hover::before {
  transform: scaleY(1);
}

.service__num {
  //font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.service__name {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(1.9rem, 4.2vw, 3.6rem);
  text-transform: uppercase;
  line-height: 1;
}

.service__desc {
  color: var(--ink-soft);
  max-width: 46ch;
}

.service__arrow {
  //font-size: 1.9rem;
  justify-self: end;
  transition: transform 0.35s var(--ease-out);
}

.service:hover .service__arrow {
  transform: translate(6px, -6px) rotate(8deg);
  color: var(--orange);
}

/* floating service preview card */
.preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9930;
  width: 270px;
  height: 190px;
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-hard);
  pointer-events: none;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.preview::before {
  //font-size: 4rem;
  line-height: 1;
}

.preview.p1 {
  background: linear-gradient(135deg, var(--lime), var(--bone));
}
.preview.p1::before {
  content: '🔭';
}
.preview.p2 {
  background: linear-gradient(135deg, var(--lilac), var(--pink));
}
.preview.p2::before {
  content: '🎨';
}
.preview.p3 {
  background: linear-gradient(135deg, var(--blue), var(--lilac));
}
.preview.p3::before {
  content: '⚡';
}
.preview.p4 {
  background: linear-gradient(135deg, var(--orange), var(--pink));
}
.preview.p4::before {
  content: '🌀';
}

/* ---------- values ---------- */
.values__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}

.value-card {
  background: var(--bg, var(--lilac));
  border: 2px solid var(--ink);
  border-radius: 24px;
  box-shadow: var(--shadow-hard);
  padding: clamp(1.8rem, 3vw, 2.6rem);
  transform: rotate(var(--rot, 0deg));
  transition: translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.value-card:hover {
  translate: 0 -8px;
  box-shadow: 9px 12px 0 var(--ink);
}

.value-card__num {
  //font-size: 1.7rem;
  display: block;
  margin-bottom: 1.2rem;
}

.value-card h3 {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1.05;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.value-card p {
  //font-size: 0.98rem;
  line-height: 1.55;
}

.value-card em {
  //font-family: var(--font-serif);
  //font-style: italic;
  //font-size: 1.1em;
}

/* ---------- team ---------- */
.team .h2 {
  margin-bottom: clamp(2.4rem, 5vh, 4rem);
}

.team__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.4rem, 2.6vw, 2.6rem);
}

.team-card {
  background: var(--bone);
  border: 2px solid var(--ink);
  border-radius: 22px;
  box-shadow: var(--shadow-hard);
  padding: clamp(1.6rem, 2.4vw, 2.2rem);
  text-align: center;
  transform: rotate(var(--rot, 0deg));
  transition: translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.team-card:hover {
  translate: 0 -8px;
  box-shadow: 9px 12px 0 var(--ink);
}

.team-card__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(86px, 8vw, 116px);
  height: clamp(86px, 8vw, 116px);
  margin: 0 auto 1.3rem;
  background: var(--bg, var(--lime));
  background-image: radial-gradient(
    circle,
    color-mix(in srgb, var(--ink) 14%, transparent) 13%,
    transparent 14%
  );
  background-size: 14px 14px;
  border: 2px solid var(--ink);
  border-radius: 50%;
}

.team-card__face {
  //font-size: clamp(2.4rem, 3.4vw, 3.2rem);
  line-height: 1;
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}

.team-card:hover .team-card__face {
  transform: scale(1.18) rotate(-8deg);
}

.team-card h3 {
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: 1.45rem;
  text-transform: uppercase;
}

.team-card__role {
  margin-top: 0.25rem;
  //font-size: 0.9rem;
  font-weight: 500;
}

.team-card__silly {
  margin-top: 0.5rem;
  //font-family: var(--font-serif);
  //font-style: italic;
  //font-size: 0.98rem;
  color: var(--orange);
}

.team__foot {
  margin-top: 2.2rem;
  text-align: center;
  //font-family: var(--font-serif);
  //font-style: italic;
  color: var(--ink-soft);
}

/* ---------- testimonials ---------- */
.quotes .h2 {
  margin-bottom: clamp(2.4rem, 5vh, 4rem);
}

.quotes__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 3rem);
  align-items: start;
}

.quote-card {
  position: relative;
  background: var(--bg, var(--bone-dim));
  border: 2px solid var(--ink);
  border-radius: 24px;
  box-shadow: var(--shadow-hard);
  padding: clamp(2rem, 3vw, 2.8rem);
  transform: rotate(var(--rot, 0deg));
  transition: translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.quote-card:hover {
  translate: 0 -8px;
  box-shadow: 9px 12px 0 var(--ink);
}

.quote-card__mark {
  display: block;
  //font-family: var(--font-serif);
  //font-size: 4rem;
  line-height: 0.5;
  color: var(--orange);
  margin-bottom: 1.1rem;
}

.quote-card blockquote {
  //font-family: var(--font-display);
  font-weight: 500;
  //font-size: clamp(1.15rem, 1.8vw, 1.45rem);
  line-height: 1.3;
}

.quote-card figcaption {
  margin-top: 1.4rem;
  //font-size: 0.9rem;
  color: var(--ink-soft);
}

.quote-card figcaption strong {
  color: var(--ink);
}

.quote-card__stars {
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  color: var(--orange);
  letter-spacing: 0.12em;
  //font-size: 0.85rem;
}

/* ---------- FAQ ---------- */
.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: start;
}

.faq__list {
  border-top: 2px solid var(--ink);
}

.faq__item {
  border-bottom: 2px solid var(--ink);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  padding: 1.4rem 0.2rem;
  text-align: left;
  //font-family: var(--font-display);
  font-weight: 600;
  //font-size: clamp(1.1rem, 2vw, 1.5rem);
  transition: color 0.25s, padding-left 0.3s var(--ease-out);
}

.faq__q:hover {
  color: var(--orange);
  padding-left: 0.8rem;
}

.faq__icon {
  //font-style: normal;
  //font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
  border-radius: 50%;
  transition: transform 0.4s var(--ease-inout), background-color 0.3s,
    color 0.3s;
}

.faq__item.is-open .faq__icon {
  transform: rotate(45deg);
  background: var(--orange);
  border-color: var(--orange);
  color: var(--bone);
}

.faq__a {
  height: 0;
  overflow: hidden;
}

.faq__a-inner {
  padding: 0.2rem 0.2rem 1.6rem;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ---------- CTA ---------- */
.cta {
  text-align: center;
  padding-block: clamp(7rem, 18vh, 13rem);
  overflow: clip;
}

.cta__kicker {
  //font-family: var(--font-serif);
  //font-style: italic;
  //font-size: clamp(1.15rem, 2.4vw, 1.7rem);
  color: var(--ink-soft);
  margin-bottom: 1.4rem;
}

.cta__title {
  //font-family: var(--font-display);
  font-weight: 700;
  //font-size: clamp(3.6rem, 15vw, 15rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: -0.03em;
  margin-bottom: clamp(2.4rem, 6vh, 4.4rem);
}

.cta__star {
  display: inline-block;
  color: var(--orange);
  //font-size: 0.5em;
  vertical-align: 0.45em;
  margin-left: 0.1em;
  animation: spin 8s linear infinite;
}

.cta__sub {
  margin-top: 2.2rem;
  //font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ---------- footer ---------- */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--bone);
  padding-top: clamp(4.5rem, 9vh, 7rem);
  overflow: hidden;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 7vh, 5rem);
  border-bottom: 1px solid color-mix(in srgb, var(--bone) 18%, transparent);
}

.footer__logo {
  //font-family: var(--font-display);
  font-weight: 700;
  //font-size: 1.9rem;
  margin-bottom: 1rem;
}

.footer__logo sup {
  //font-size: 0.5em;
  color: var(--orange);
}

.footer__col--blurb p:last-child {
  color: color-mix(in srgb, var(--bone) 60%, transparent);
  max-width: 30ch;
}

.footer__col h4 {
  //font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--bone) 50%, transparent);
  margin-bottom: 1.2rem;
}

.footer__col a,
.footer__col p {
  display: block;
  padding-block: 0.32em;
  color: color-mix(in srgb, var(--bone) 86%, transparent);
  //font-size: 0.98rem;
}

.footer__col a {
  width: fit-content;
  transition: color 0.25s, transform 0.25s var(--ease-out);
}

.footer__col a:hover {
  color: var(--orange);
  transform: translateX(6px);
}

.footer__col small {
  opacity: 0.55;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem;
  //font-size: 0.82rem;
  color: color-mix(in srgb, var(--bone) 55%, transparent);
}

.footer__top {
  color: var(--bone);
  font-weight: 600;
  transition: color 0.25s;
}

.footer__top:hover {
  color: var(--orange);
}

.footer__watermark {
  //font-family: var(--font-display);
  font-weight: 700;
  //font-size: clamp(5rem, 19vw, 21rem);
  line-height: 0.78;
  text-align: center;
  letter-spacing: -0.02em;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--bone) 30%, transparent);
  user-select: none;
  margin-bottom: -0.06em;
}

.footer__watermark span {
  transition: color 0.35s, -webkit-text-stroke-color 0.35s;
}

/* each letter gets a random bright palette colour (set by JS as --wm-c) */
.footer__watermark span:hover {
  color: var(--wm-c, var(--orange));
  -webkit-text-stroke-color: var(--wm-c, var(--orange));
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {
  .nav__links {
    display: none;
  }
  .nav__clock {
    display: none;
  }
  .burger {
    display: block;
  }

  .service {
    grid-template-columns: 60px 1fr 50px;
    grid-template-areas:
      'num name arrow'
      'num desc arrow';
    row-gap: 0.7rem;
  }
  .service__num {
    grid-area: num;
  }
  .service__name {
    grid-area: name;
  }
  .service__desc {
    grid-area: desc;
  }
  .service__arrow {
    grid-area: arrow;
  }

  .logos__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .team__row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 899px) {
  .archive__row {
    grid-template-columns: 1fr 80px 40px;
    grid-template-areas:
      'name year arrow'
      'cat year arrow';
    row-gap: 0.3rem;
  }
  .archive__name {
    grid-area: name;
  }
  .archive__cat {
    grid-area: cat;
  }
  .archive__year {
    grid-area: year;
    justify-self: end;
  }
  .archive__arrow {
    grid-area: arrow;
  }

  .process__grid {
    grid-template-columns: 1fr;
  }
  .faq__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 760px) {
  :root {
    --nav-h: 70px;
  }

  .nav__meta .btn {
    display: none;
  }

  .hero__particles {
    height: clamp(190px, 32vh, 320px);
  }
  .hero__caption {
    //font-size: 0.85rem;
  }
  .hero__caption--hint {
    display: none;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.4rem;
  }

  .logos__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* services: full-width stack — number + arrow on top, then name, then
     description (the 3-column tablet grid squeezes the text on phones) */
  .service {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'num arrow'
      'name name'
      'desc desc';
    align-items: start;
    gap: 0.55rem 1rem;
    padding-block: 1.6rem;
  }
  .service__desc {
    max-width: none;
  }

  .values__row,
  .quotes__row {
    grid-template-columns: 1fr;
  }
  .value-card,
  .quote-card {
    transform: rotate(0deg);
  }

  .team__row {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }
  .team-card {
    transform: rotate(0deg);
  }

  .hero__badge {
    display: none;
  }
  .sticker--float {
    display: none;
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__col--blurb {
    grid-column: 1 / -1;
  }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .grain,
  .hero__badge svg,
  .hero__flower,
  .cta__star,
  .hero__eyebrow .dot,
  .hero__badge-arrow {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   HOME-NEW adaptations
   The Webflow rebuild renamed a few descendant selectors into explicit
   classes (whtml can't carry tag-descendant selectors). These rules
   re-add the hover/transition behaviour for those renamed classes, plus
   a safeguard to center the footer grid (its .container class was dropped
   on insert).
   ============================================================ */
.logos__cell {
  transition: background-color 0.3s, color 0.3s, transform 0.3s var(--ease-out);
}
.logos__cell:hover {
  background: var(--ink);
  color: var(--bone);
  transform: rotate(-1.5deg) scale(1.04);
  z-index: 1;
}
.footer__link {
  transition: color 0.25s, transform 0.25s var(--ease-out);
}
.footer__link:hover {
  color: var(--orange);
  transform: translateX(6px);
}
.footer__grid,
.footer__bottom {
  width: min(1400px, 92vw);
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   Per-instance tilt + color overrides
   The Webflow build uses explicit modifier classes instead of the mockup's
   inline `--rot` / `--bg` custom properties, so the base .sticker / .value-card
   / .team-card / .quote-card / .team-card__avatar rules above (reading those
   unset vars → defaults) flatten + recolor the cards. These rules are last in
   the cascade so they win; the media query restores the mobile un-rotate.
   ============================================================ */
.sticker--f1 {
  transform: rotate(5deg);
}
.sticker--f2 {
  transform: rotate(-6deg);
}
.sticker--f3 {
  transform: rotate(-3deg);
}

.value-card--1 {
  background-color: var(--lilac);
  transform: rotate(-5deg);
}
.value-card--2 {
  background-color: var(--lime);
  transform: rotate(3deg);
}
.value-card--3 {
  background-color: var(--pink);
  transform: rotate(-2deg);
}

.team-card--1 {
  transform: rotate(-3deg);
}
.team-card--2 {
  transform: rotate(2deg);
}
.team-card--3 {
  transform: rotate(-2deg);
}
.team-card--4 {
  transform: rotate(3deg);
}
.team-card__avatar--lime {
  background-color: var(--lime);
}
.team-card__avatar--lilac {
  background-color: var(--lilac);
}
.team-card__avatar--pink {
  background-color: var(--pink);
}
.team-card__avatar--bone {
  background-color: var(--bone-dim);
}

.quote-card--1 {
  background-color: var(--bone-dim);
  transform: rotate(-3deg);
}
.quote-card--2 {
  background-color: var(--lilac);
  transform: rotate(2deg);
}
.quote-card--3 {
  background-color: var(--lime);
  transform: rotate(-2deg);
}

@media (max-width: 760px) {
  .value-card--1,
  .value-card--2,
  .value-card--3,
  .quote-card--1,
  .quote-card--2,
  .quote-card--3,
  .team-card--1,
  .team-card--2,
  .team-card--3,
  .team-card--4 {
    transform: rotate(0deg);
  }
}

/* ============================================================
   CRT SCREEN (effects/crt.js) — active only when JS adds .crt-on
   ============================================================ */

/* the tube owns scrolling: the document itself must not scroll */
html.crt-on,
html.crt-on body {
  overflow: hidden;
  height: 100%;
}

/* the wrapper becomes a viewport-fixed scroller, oversized by the
   overscan so the warped edge of the tube sits off-viewport */
html.crt-on #smooth-wrapper {
  position: fixed;
  top: -4vh;
  bottom: -4vh;
  left: -3vw;
  right: -3vw;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none; /* scroll anchoring chases transform-pins -> creep */
  scrollbar-width: none;
}
html.crt-on #smooth-wrapper::-webkit-scrollbar {
  display: none;
}

/* the phosphor overlay supersedes the flat grain layer
   (.crt-overlay-on is set whenever the overlay is active — including
   the overlay-only tier on touch devices, where .crt-on is absent) */
html.crt-overlay-on .grain {
  display: none;
}

#crt-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  pointer-events: none;
}

/* the reel pin is sized to the viewport, but the wrapper scroller it pins
   to is oversized by the overscan — so the 100svh pin ends 4vh short of
   the visible bottom (empty strip) and the 1.5rem stage gutter falls
   inside the hidden 3vw side margin (cards start off the visible edge).
   Stretch the pin to the wrapper's full height and pad the stage back
   into the visible area (keep in sync with the overscan margins above
   and OVERSCAN_X/Y in effects/crt.js). */
html.crt-on .reel__pin {
  height: calc(100svh + 8vh);
}
html.crt-on .reel__stage {
  padding-block: 4vh;
  padding-left: calc(1.5rem + 5.5vw);
  padding-right: calc(1.5rem + 5.5vw);
}