/* =====================================================================
   TRUUS — homepage rebuild (own hand-written CSS)
   All colors, fonts, type scale, spacing and easings extracted from the
   original Webflow stylesheets (truus.webflow.shared.css + 40172.css).
   Nothing aesthetic is invented.
   ===================================================================== */

/* ---------- Fonts (local woff2 from /fonts) ---------- */
@font-face {
  font-family: "DM Sans";
  src: url("fonts/68370ddd1dd328d7914d6512_DMSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/68370dddd220426b437d9058_DMSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/68370ddddfc0b8c8650a15eb_DMSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Epilogue";
  src: url("fonts/68370ddda0a64800e8a300be_Epilogue-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Epilogue";
  src: url("fonts/68370ddd06d737200122a835_Epilogue-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Lora";
  src: url("fonts/68370ddd7f709621a7e3b37a_Lora-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- Design tokens (from :root in source) ---------- */
:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-offwhite: #f0ebe6;
  --color-darkgrey: #2d2d2d;
  --color-darkblue: #4b69f0;
  --color-green: #2d7864;
  --color-blue: #82a0ff;
  --color-maroonred: #a0325a;
  --color-orange: #f5693c;
  --color-lightgreen: #e6fab9;
  --color-pink: #f0befa;
  --color-pastelpink: #ffe1f0;

  --color-light: var(--color-offwhite);
  --color-dark: var(--color-black);
  --color-primary: var(--color-pink);

  /* Radii */
  --border-radius-l: 1.25em;
  --border-radius-m: .75em;
  --border-radius-s: .5em;
  --border-radius: var(--border-radius-l);

  /* Spacing */
  --container-padding-l: 6.75em;
  --container-padding-m: 2.5em;
  --container-padding-s: .75em;
  --container-padding: var(--container-padding-m);
  --section-padding: 12em;
  --gap: 2.5em;

  /* Fluid scaling system (Dennis Snellenberg) — body font-size scales with viewport */
  --size-unit: 16;
  --size-container-ideal: 1440;
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));

  /* Small viewport height unit. JS (setViewportUnit) keeps --vh-in-px in
     sync with 1% of the real innerHeight, mirroring the original
     initCheckWindowHeight. It is the single source of truth so 100*--svh
     and 200*--svh resolve to the actual viewport everywhere. */
  --vh-in-px: 1svh;
  --svh: var(--vh-in-px);

  /* Animation easings (from 40172.css) */
  --animation-default-fast: .4s cubic-bezier(.625, .05, 0, 1);
  --animation-default: .8s cubic-bezier(.625, .05, 0, 1);
  --animation-bounce-fast: .6s cubic-bezier(.35, 1.75, .6, 1);
  --animation-bounce: .8s cubic-bezier(.35, 1.75, .6, 1);
  --animation-ease: .2s ease;
}

@supports not (height: 1svh) {
  :root { --vh-in-px: 8px; }
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --container-padding-l: 3.75em;
    --container-padding-m: 1.75em;
    --size-container-ideal: 834;
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}
/* Mobile landscape */
@media screen and (max-width: 767px) {
  :root {
    --section-padding: 6em;
    --container-padding-l: 1.25em;
    --container-padding-m: 1.25em;
    --container-padding-s: .5em;
    --gap: 1.5em;
    --size-container-ideal: 390;
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}
/* Mobile portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390;
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scrollbar-width: none; scroll-behavior: smooth; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body { -ms-overflow-style: none; }

body {
  margin: 0;
  min-height: 100%;
  background-color: var(--color-light);
  color: var(--color-dark);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: var(--size-font);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

h1, h2, h3, h4, h5, h6, p, ul, li, figure { margin: 0; padding: 0; }
ul, li { list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
img { width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

::selection { background-color: var(--color-primary); color: var(--color-dark); text-shadow: none; }

/* ---------- Typography scale (from 40172.css) ---------- */
.h1, h1 {
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 900;
  font-size: 6em;
  line-height: .95;
  letter-spacing: -.03em;
  text-transform: lowercase;
}
.h2, h2 {
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 900;
  font-size: 4em;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-transform: lowercase;
}
.h3, h3 {
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 900;
  font-size: 2em;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: lowercase;
}
.h4, h4 {
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1.4;
  text-transform: lowercase;
}
.display {
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 900;
  font-size: 8em;
  line-height: .75;
  text-transform: lowercase;
}
/* italic accents are Lora */
.display em, .h1 em, h1 em, .h2 em, h2 em, .h3 em, h3 em, .h4 em, h4 em {
  font-family: "Lora", "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
}
p { font-size: 1.25em; }
.p-s { font-size: .875em; }
.is-balance { text-wrap: balance; }
.is-uppercase { text-transform: uppercase; }

@media screen and (max-width: 767px) {
  .h1, h1 { font-size: 2.5em; }
  .h2, h2 { font-size: 2em; }
  .h3, h3 { font-size: 1.5em; }
  .display { font-size: 3.5em; }
}

/* ---------- Container ---------- */
.container {
  max-width: var(--size-container);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}
.container--l,
.container--large { padding-inline: var(--container-padding-l); }
.container--footer { padding-inline: var(--container-padding-l); }

/* ---------- Tag pill ---------- */
.tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 1.5em;
  padding: .375em .4375em .1875em .375em;
  background-color: var(--color-primary);
  color: var(--color-dark);
  border-radius: 10em 10em 10em 0;
  white-space: nowrap;
}
.tag__label {
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1em;
  line-height: 1;
  text-transform: lowercase;
}
.tag[data-theme="Pink"]        { background-color: var(--color-pink); }
.tag[data-theme="Orange"]      { background-color: var(--color-orange); }
.tag[data-theme="Blue"]        { background-color: var(--color-blue); }
.tag[data-theme="Light Green"] { background-color: var(--color-lightgreen); }
.tag[data-theme="Green"]       { background-color: var(--color-lightgreen); }
.tag[data-theme="Maroon Red"]  { background-color: var(--color-maroonred); color: var(--color-light); }

/* ---------- Buttons ---------- */
.bold-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 4em;
  padding: 1em;
  border-radius: var(--border-radius-s);
  background-color: var(--color-dark);
  color: var(--color-light);
}
.bold-btn__label { font-size: 1.25em; font-weight: 700; line-height: 1.4; }

.draw-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding-block: .625em;
}
.draw-btn__label { font-size: 1.25em; font-weight: 700; line-height: 1.4; }
/* DrawSVG line-draw under buttons reproduced as an animated CSS underline */
.draw-btn__underline {
  display: block;
  width: 100%;
  height: 2px;
  margin-top: .25em;
  background: currentColor;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--animation-default-fast);
}
.draw-btn:hover .draw-btn__underline { transform: scaleX(1); }

/* =====================================================================
   SITE NAV
   ===================================================================== */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: 6.5em;
  color: var(--color-light);
  pointer-events: none;
}
.site-nav[data-theme="light"] { color: var(--color-dark); }
.site-nav__inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.site-nav__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 9em;
  height: 2.5em;
  pointer-events: auto;
}
.site-nav__logo svg { width: 100%; height: auto; }

/* Work (left) */
.site-nav__work {
  position: absolute;
  left: 2em;
  display: flex;
  align-items: center;
  height: 2.5em;
  pointer-events: auto;
}
.site-nav__work-btn {
  position: relative;
  display: flex;
  align-items: center;
  height: 2.5em;
  padding-inline: .5em;
}
.site-nav__work-blob {
  position: absolute;
  left: 0;
  width: 3.25em;
  height: 3em;
  background-color: var(--color-orange);
  border-radius: 48% 52% 55% 45% / 50% 48% 52% 50%;
  transform: translate(-15%, -5%);
  transition: transform var(--animation-default);
  z-index: -1;
}
.site-nav__work.is-open .site-nav__work-blob { transform: translate(5%, 9%) rotate(210deg); }
.site-nav__work-label {
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 900;
  font-size: 2em;
  line-height: 1;
  text-transform: lowercase;
}
.site-nav__work-label--close { display: none; }
.site-nav__work.is-open .site-nav__work-label--default { display: none; }
.site-nav__work.is-open .site-nav__work-label--close { display: inline; }

/* Work modal */
.work-modal {
  position: absolute;
  top: 3em;
  left: 0;
  width: 22em;
  max-width: 90vw;
  padding: 1em;
  background-color: var(--color-light);
  color: var(--color-dark);
  border-radius: var(--border-radius-m);
  box-shadow: 0 1em 3em rgba(0,0,0,.15);
}
.work-modal[hidden] { display: none; }
.work-modal__list { display: flex; flex-direction: column; gap: 1em; }
.work-card { display: flex; gap: 1em; align-items: center; }
.work-card__image {
  flex: none;
  width: 5em;
  height: 5em;
  border-radius: var(--border-radius-s);
  overflow: hidden;
}
.work-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s cubic-bezier(.425,1,.6,1); }
.work-card:hover .work-card__image img { transform: scale(1.1) rotate(5deg); }
.work-card__content { display: flex; flex-direction: column; gap: .4em; align-items: flex-start; }
.work-card__title {
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 900;
  font-size: 1.25em;
  line-height: 1.1;
  text-transform: lowercase;
}
.work-modal__cta { margin-top: 1em; }

/* WhatsApp (right) */
.site-nav__whatsapp {
  position: absolute;
  right: 2em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  pointer-events: auto;
}
.site-nav__whatsapp-btn { width: 2.5em; height: 2.5em; }
.site-nav__whatsapp-btn svg { width: 100%; height: 100%; }
.whatsapp-modal {
  position: absolute;
  top: 3em;
  right: 0;
  width: 18em;
  max-width: 90vw;
  padding: 1.5em;
  background-color: var(--color-light);
  color: var(--color-dark);
  border-radius: var(--border-radius-m);
  box-shadow: 0 1em 3em rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  gap: 1em;
}
.whatsapp-modal[hidden] { display: none; }
.whatsapp-modal__qr {
  width: 8em; height: 8em; align-self: center;
  background:
    repeating-linear-gradient(0deg, var(--color-dark) 0 .5em, transparent .5em 1em),
    repeating-linear-gradient(90deg, var(--color-dark) 0 .5em, transparent .5em 1em);
  background-blend-mode: multiply;
  border-radius: var(--border-radius-s);
  opacity: .85;
}
.whatsapp-modal__title { font-size: 1.25em; }
.whatsapp-modal__p { font-size: .9em; }

@media screen and (max-width: 767px) {
  .site-nav__work { left: 1em; }
  .site-nav__whatsapp { right: 1em; }
  .work-modal { left: 0; }
}

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--color-light);
  padding: var(--container-padding-s);
  height: calc(100 * var(--svh));
  min-height: 40em;
}
.hero__video {
  position: absolute;
  inset: var(--container-padding-s);
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--color-dark);
}
.hero__poster { width: 100%; height: 100%; object-fit: cover; }
.hero__fade {
  position: absolute;
  inset: 0;
  border-radius: var(--border-radius);
  background-image: linear-gradient(0deg, var(--color-dark), rgba(0,0,0,.25) 50%, rgba(0,0,0,.25));
  opacity: .7;
  pointer-events: none;
}
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  padding-bottom: 4em;
}
.hero__title {
  max-width: 14em;
  text-align: center;
  color: var(--color-light);
}
.hero__word { display: inline-block; }

/* =====================================================================
   HORIZONTAL WORDS
   ===================================================================== */
.words {
  margin-top: calc(var(--container-padding-s) * -1);
  height: calc(200 * var(--svh));
  overflow: clip;
  background-color: var(--color-light);
}
.words__sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: calc(100 * var(--svh));
  min-height: 30em;
  overflow: hidden;
}
.words__heading {
  white-space: nowrap;
  width: max-content;
  padding-inline: 6vw;
  will-change: transform;
}
.words__bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: var(--section-padding);
}
.words__bottom-text {
  max-width: 30em;
  padding-inline: var(--container-padding-m);
}

/* =====================================================================
   FUTURE
   ===================================================================== */
.future {
  padding-top: .5em;
  padding-bottom: var(--section-padding);
  overflow: clip;
}
.future__head { display: flex; justify-content: center; text-align: center; }
.future__title { max-width: 14em; }
.future__cards {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding-top: 10em;
  padding-bottom: 7.5em;
}
.future__shape {
  position: absolute;
  width: 33em;
  height: 33em;
  background-color: var(--color-blue);
  border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
  z-index: 0;
}
.future__card { position: relative; z-index: 1; margin-block: 2em; }
.future-image {
  width: 16em;
  border-radius: var(--container-padding-s);
  overflow: hidden;
}
.future-image img { width: 100%; height: 100%; object-fit: cover; }
.future__card--1 { transform: translateY(-1.75em) rotate(-7.5deg); }
.future__card--2 { margin-left: -4em; transform: translateY(1.75em) rotate(3.5deg); }
.future__card--3 { margin-left: -2.5em; transform: translateY(-1.75em) rotate(-5deg); }
.future__card--4 { margin-left: -2.375em; transform: translateY(0) rotate(3.5deg); }

.future__flying-tag { position: relative; z-index: 2; pointer-events: none; }
.future__flying-tag--1 { transform: translate(-1em, -7em) rotate(-8deg); }
.future__flying-tag--1 .tag { background-color: var(--color-pink); }
.future__flying-tag--2 { transform: translate(-2em, 6em) rotate(6deg); }
.future__flying-tag--2 .tag { background-color: var(--color-orange); }
.future__flying-tag--3 { transform: translate(2em, -6em) rotate(7deg); }
.future__flying-tag--3 .tag { background-color: var(--color-lightgreen); }
.future__flying-tag .tag__label { font-size: 1.25em; }

.future__foot { display: flex; justify-content: center; text-align: center; }
.future__text { max-width: 34em; }

@media screen and (max-width: 767px) {
  .future__cards { gap: 1.5em; }
  .future__card { margin: 0 !important; transform: rotate(-4deg) !important; }
  .future__card:nth-child(even) { transform: rotate(3deg) !important; }
  .future__shape { width: 22em; height: 22em; }
  .future__flying-tag { transform: none !important; }
}

/* =====================================================================
   WORK SLIDER  (vanilla replacement for Flickity)
   ===================================================================== */
.slider-section {
  padding-block: var(--section-padding);
  background-color: var(--color-dark);
  color: var(--color-light);
  overflow: hidden;
}
.slider { position: relative; }
.slider__viewport {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 26em;
  perspective: 1200px;
}
.slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}
.slider__item {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Original: gsap elastic.out(1.2,1), 0.6s. Approximated with an
     overshoot cubic-bezier so cards spring as they reorder. */
  transition: transform .6s cubic-bezier(.34, 1.56, .64, 1),
              opacity .4s ease;
  will-change: transform, opacity;
}
/* Flick card */
.flick-card {
  position: relative;
  width: 14em;
  border: .25em solid var(--color-dark);
  border-radius: var(--border-radius);
  background-color: var(--color-dark);
  overflow: hidden;
  user-select: none;
}
.flick-card__media {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  transition: opacity var(--animation-ease);
}
.flick-card__tag {
  position: absolute;
  left: .75em;
  bottom: .75em;
  opacity: 0;
  transform: translate(25%, 100%) rotate(10deg);
  transform-origin: right bottom;
  transition: opacity var(--animation-default-fast), transform var(--animation-bounce-fast);
}
.flick-card__tag .tag__label { font-size: 1.25em; }
.flick-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 1em;
  opacity: 0;
  transition: opacity var(--animation-default-fast), transform var(--animation-bounce-fast);
  transform: translateY(.5em);
}
.type {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .35em .75em;
  background-color: rgba(100,100,100,.3);
  border-radius: 50em;
  backdrop-filter: blur(1em);
}
.type__icon { width: 1em; height: 1em; }
.type__label { font-size: 1.125em; line-height: 1; }
.flick-card__sticker { width: 3.5em; height: auto; }

/* Slide states (set by JS). Opacity + z-index are applied inline by app.js
   to mirror the original getCfg() tiers (active=1, ±1/±2=1, ±3+=0). The tag +
   meta reveal only on the active (centered) card. */
.slider__item[data-state="active"] .flick-card__media { opacity: 1; }
.slider__item[data-state="active"] .flick-card__tag {
  opacity: 1; transform: translate(0,0) rotate(0deg);
}
.slider__item[data-state="active"] .flick-card__meta {
  opacity: 1; transform: translateY(0);
}

.slider__bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  margin-top: 2.5em;
}
.slider__nav {
  flex: none;
  width: 2.75em;
  height: 2.75em;
  font-size: 1.25em;
  border-radius: 50%;
  border: 2px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--animation-ease), color var(--animation-ease);
}
.slider__nav:hover { background-color: var(--color-light); color: var(--color-dark); }
.slider__info {
  position: relative;
  width: 22em;
  height: 6em;
  text-align: center;
}
.slider__info-item {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .25em;
  opacity: 0;
  visibility: hidden;
  transform: translateX(0);
  transition: var(--animation-bounce-fast);
}
.slider__info-item.is-active { opacity: 1; visibility: visible; }
.slider__info-title {
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 900;
  font-size: 2em;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: lowercase;
  text-wrap: balance;
}
.slider__info-cta { font-size: 1.25em; font-weight: 700; }

@media screen and (max-width: 767px) {
  .slider__viewport { height: 30em; }
  .flick-card { width: 11em; }
}

/* =====================================================================
   TEAM
   ===================================================================== */
.team {
  padding-top: 1em;
  padding-bottom: var(--section-padding);
  background-color: var(--color-dark);
  color: var(--color-light);
  overflow: hidden;
}
.team__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-bottom: 12em;
}
.team__title { max-width: 16em; }
.team__title em { white-space: nowrap; }

.team__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.5em;
  align-items: start;
}
.team__shape {
  position: absolute;
  width: 24em;
  height: 28em;
  border-radius: 46% 54% 52% 48% / 54% 46% 54% 46%;
  z-index: 0;
}
.team__shape--1 { background-color: var(--color-green); top: -6em; left: 10%; }
.team__shape--2 { background-color: var(--color-darkblue); bottom: -6em; right: 8%; }

.team-card {
  position: relative;
  z-index: 1;
  margin: 0;
  border-radius: var(--border-radius-l);
  background-color: var(--color-darkgrey);
  overflow: hidden;
}
.team-card img { width: 100%; height: 100%; object-fit: cover; }
.team-card--1 { grid-column: 1; transform: rotate(-3deg); }
.team-card--2 { grid-column: 2; transform: translateY(2em) rotate(2deg); }
.team-card--3 { grid-column: 3; transform: rotate(-2deg); }
.team-card--4 { grid-column: 4; transform: translateY(2em) rotate(3deg); }
.team-card--5 { grid-column: 5; transform: rotate(-4deg); }
.team-card--6 { grid-column: 6; transform: translateY(1em) rotate(2deg); aspect-ratio: 4 / 5; }

/* Image-cycle card */
.team-card[data-image-cycle] { position: relative; }
.team-card[data-image-cycle] img { position: absolute; inset: 0; transition: opacity .5s ease; }
.team-card[data-image-cycle] img[hidden] { display: block; opacity: 0; }
.team-card[data-image-cycle] img:first-child { position: relative; }

@media screen and (max-width: 991px) {
  .team__grid { grid-template-columns: repeat(3, 1fr); }
  .team-card { grid-column: auto !important; }
}
@media screen and (max-width: 479px) {
  .team__grid { grid-template-columns: repeat(2, 1fr); }
  .team__head { padding-bottom: 5em; }
}

/* =====================================================================
   SERVICES
   ===================================================================== */
.services {
  padding-top: var(--section-padding);
  padding-bottom: 19.125em;
  overflow: clip;
}
.services__head {
  display: flex;
  justify-content: center;
  text-align: center;
  padding-bottom: 10em;
}
.services__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 3em;
}
.services-card {
  position: relative;
  width: 19.25em;
  padding: 2em 1.5em;
  border-radius: var(--border-radius-m);
  background-color: var(--color-green);
  color: var(--color-light);
}
.services-card--green     { background-color: var(--color-green); transform: rotate(4deg); }
.services-card--blue      { background-color: var(--color-darkblue); transform: rotate(-5deg); }
.services-card--orange    { background-color: var(--color-orange); transform: rotate(6deg); }
.services-card--maroonred { background-color: var(--color-maroonred); transform: rotate(-6deg); }
.services-card--pink      { background-color: var(--color-pink); color: var(--color-dark); transform: rotate(5deg); }
.services-card__title {
  max-width: 7em;
  margin-bottom: .5em;
  padding-bottom: .35em;
  border-bottom: .15em solid currentColor;
}
.services-card__list { display: flex; flex-direction: column; gap: .5em; }
.services-card__li {
  position: relative;
  padding-left: 1.25em;
  font-size: 1.25em;
  line-height: 1.1;
}
.services-card__li::before {
  content: "";
  position: absolute;
  left: 0; top: .15em;
  width: .55em; height: .7em;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media screen and (max-width: 767px) {
  .services { padding-bottom: var(--section-padding); }
  .services__head { padding-bottom: 4em; }
  .services-card { transform: none !important; }
  .services-card__li { font-size: 1.125em; }
}

/* =====================================================================
   CLIENTS
   ===================================================================== */
.clients { padding-bottom: var(--section-padding); }
.clients__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8.2em;
}
.clients__col-title {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  max-width: 32em;
  margin-top: 3em;
  padding-top: 5.625em;
}
.clients__title { max-width: 8em; }

.clients__marquee {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 34em;
}
.marquee {
  position: relative;
  display: flex;
  gap: 1em;
  width: 27.625em;
  height: 100%;
  overflow: hidden;
}
.marquee__col {
  display: flex;
  flex-direction: column;
  gap: 1em;
  flex: 1;
  animation: marquee-up 30s linear infinite;
}
.marquee__col--flipped { animation-direction: reverse; }
@keyframes marquee-up {
  to { transform: translateY(-50%); }
}
.marquee-logo {
  flex: none;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1;
  padding: 1.5em;
  border-radius: var(--border-radius-m);
  background-color: var(--color-pink);
}
/* Col 1 has a 3-logo set duplicated (6 children): colour by position mod 3 */
.marquee__col .marquee-logo:nth-child(3n+1) { background-color: var(--color-pink); }
.marquee__col .marquee-logo:nth-child(3n+2) { background-color: var(--color-darkblue); }
.marquee__col .marquee-logo:nth-child(3n+3) { background-color: var(--color-orange); }
/* Flipped col has a 5-logo set duplicated (10 children): colour by position mod 5 */
.marquee__col--flipped .marquee-logo:nth-child(5n+1) { background-color: var(--color-pink); }
.marquee__col--flipped .marquee-logo:nth-child(5n+2) { background-color: var(--color-lightgreen); }
.marquee__col--flipped .marquee-logo:nth-child(5n+3) { background-color: var(--color-blue); }
.marquee__col--flipped .marquee-logo:nth-child(5n+4) { background-color: var(--color-green); }
.marquee__col--flipped .marquee-logo:nth-child(5n+5) { background-color: var(--color-maroonred); }
.marquee-logo img { width: 100%; height: auto; object-fit: contain; }
.marquee__fade {
  position: absolute;
  left: 0; right: 0;
  height: 6em;
  pointer-events: none;
  z-index: 2;
}
.marquee__fade--top { top: 0; background: linear-gradient(to bottom, var(--color-light), transparent); }
.marquee__fade--bottom { bottom: 0; background: linear-gradient(to top, var(--color-light), transparent); }

@media screen and (max-width: 991px) {
  .clients__row { flex-direction: column; gap: 4em; align-items: center; }
  .clients__col-title { padding-top: 0; margin-top: 0; }
  .marquee-logo img { transform: rotate(90deg); }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { padding-bottom: var(--container-padding-s); }
.footer__tile {
  position: relative;
  margin-inline: var(--container-padding-s);
  padding-block: 6em;
  background-color: var(--color-pastelpink);
  border-radius: var(--border-radius);
  overflow: hidden;
}
.footer__contact { display: flex; flex-wrap: wrap; gap: 3em; }
.footer__col {
  display: flex;
  flex-direction: column;
  gap: 1.75em;
  width: calc(33.33% - 2em);
}
.tag--footer {
  align-self: flex-start;
  height: 2em;
  padding: .625em .625em .4em;
  background-color: var(--color-light);
}
.footer__text { display: flex; flex-direction: column; gap: .25em; }
.footer__line { display: block; }
.footer__line-h3 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 900;
  line-height: 1.2;
  text-transform: lowercase;
}
.footer__btn { align-self: flex-start; }
.footer__note { max-width: 18em; }
.footer__socials { display: flex; }
.socials, .footer__socials { display: flex; gap: 1em; align-items: center; }
.single-social { width: 2.5em; }
.single-social svg { width: 100%; height: auto; }

.footer__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 4em;
}
.footer-logo__svg { width: 100%; height: auto; color: var(--color-dark); }

.credits { position: absolute; right: 1em; bottom: 1em; }
.credits__group {
  opacity: 0;
  visibility: hidden;
  transition: opacity .1s ease .3s;
}
.credits:hover .credits__group { opacity: 1; visibility: visible; transition: opacity .1s ease 0s; }
.credits__tile {
  display: flex;
  gap: 2em;
  margin-bottom: .5em;
  padding: 1em;
  background-color: var(--color-light);
  border-radius: var(--border-radius-m);
  transform: translateY(3em);
  transition: transform var(--animation-default-fast);
}
.credits:hover .credits__tile { transform: translateY(0); }
.credits__col { display: flex; flex-direction: column; }
.credits__label {
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1em;
  text-transform: lowercase;
  opacity: .6;
}
.credits__name {
  font-family: "Epilogue", Arial, sans-serif;
  font-weight: 900;
  font-size: 1.5em;
  text-transform: lowercase;
}
.tag--credits { background-color: var(--color-dark); color: var(--color-light); }

@media screen and (max-width: 767px) {
  .footer__col { width: 100%; }
}

/* =====================================================================
   SCROLL REVEAL (IntersectionObserver toggles .is-revealed)
   Mirrors the original's fade-up-on-enter entrances.
   ===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(2.5em);
  transition: opacity var(--animation-default), transform var(--animation-default);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

[data-reveal-words] .hero__word {
  opacity: 0;
  transform: translateY(.6em);
  transition: opacity var(--animation-default-fast), transform var(--animation-default-fast);
}
[data-reveal-words].is-revealed .hero__word { opacity: 1; transform: none; }
[data-reveal-words].is-revealed .hero__word:nth-child(1) { transition-delay: .00s; }
[data-reveal-words].is-revealed .hero__word:nth-child(2) { transition-delay: .06s; }
[data-reveal-words].is-revealed .hero__word:nth-child(3) { transition-delay: .12s; }
[data-reveal-words].is-revealed .hero__word:nth-child(4) { transition-delay: .18s; }
[data-reveal-words].is-revealed .hero__word:nth-child(5) { transition-delay: .24s; }
[data-reveal-words].is-revealed .hero__word:nth-child(6) { transition-delay: .30s; }
[data-reveal-words].is-revealed .hero__word:nth-child(7) { transition-delay: .36s; }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__col { animation: none; }
  [data-reveal], [data-reveal-words] .hero__word { opacity: 1; transform: none; transition: none; }
  .words { height: auto; }
  .words__sticky { position: static; height: auto; min-height: 0; padding-block: 6em; }
  .words__heading { transform: none !important; white-space: normal; text-align: center; width: auto; }
  .slider__item { transition: none; }
}