/* ==========================================================================
   Sections — in page order. Each block is a stable GSAP / ScrollTrigger target.
   ========================================================================== */

/* ---------- 1. HERO ---------------------------------------------------- */
.hero-section {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr .6fr; align-items: center; gap: 16px 10px;
  height: var(--hero-h); padding-bottom: 40px;
  background: var(--c-ink); color: #fff;
}
.hero__content { width: 84%; margin: 60px 0 0 auto; }
.hero__eyebrow {
  font-family: var(--f-display); font-weight: 400; color: #fff;
  font-size: max(28px, 2.917vw); line-height: 1.143; letter-spacing: 0;
}
.hero__rotator { display: grid; color: var(--c-lime); }
/* Heading letters: masked words; every "t" = white lower stem + the Positiv mark on top (the logo's treatment) */
.hero__mask { display: inline-block; vertical-align: top; padding: .28em .16em .18em; margin: -.28em -.16em -.18em; overflow: hidden; }
.hero__char {
  display: inline-block; position: relative; line-height: 1.2;   /* fixed in em so the logo-mark offsets hold at every font size */ opacity: 0; transform: translateY(118%) rotate(6deg); transform-origin: 0 100%;
  transition: transform 1s var(--ease-out), opacity .6s ease, color .35s ease;
  transition-delay: calc(var(--i) * 34ms + 120ms), calc(var(--i) * 34ms + 120ms), 0s;
}
.hero__eyebrow.is-in .hero__char { opacity: 1; transform: none; }
.hero__eyebrow.is-ready .hero__char { transition-delay: 0s; }
.hero__eyebrow.is-gsap .hero__char { opacity: 1; transform: none; transition: none; }   /* GSAP owns the motion */

@media (prefers-reduced-motion: reduce) { .hero__char { opacity: 1; transform: none; transition: none; } }

.hero__word {
  grid-area: 1 / 1; font-family: var(--f-display); font-weight: 700; letter-spacing: 0;
  font-size: 56px; line-height: 68px;
  opacity: 0; transform: translateY(24px);
  transition: opacity .25s ease, transform .6s var(--ease-out);
}
.hero__word.is-active { opacity: 1; transform: none; transition-delay: .22s, .22s; }
/* GSAP rotator: the words stay stacked in one grid cell; only the active one is visible, its letters are animated */
.hero__rotator.is-gsap-rot { position: relative; }
.hero__rotator.is-gsap-rot .hero__word { opacity: 1; transform: none; transition: none; visibility: hidden; }
.hero__rotator.is-gsap-rot .hero__word.is-active { visibility: visible; }
.rot-mask { display: inline-block; vertical-align: top; overflow: hidden; padding: .16em .12em .26em; margin: -.16em -.12em -.26em; }
.rot-char { display: inline-block; will-change: transform, filter; transform-origin: 50% 80%; }

.hero__lead { color: var(--c-paper-2); padding: 20px 0 60px; font-size: 16px; line-height: 24px; letter-spacing: 0; }
.hero__actions { display: flex; gap: 20px; padding-bottom: 40px; }

/* Hero buttons: the hover inverts both colours with a circular fill that grows from the bottom edge.
   "Get in touch" (lime) is filled with the page's dark → dark button, lime text; "See our work" does the reverse. */
.hero__actions .btn {
  position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--c-lime);
  transition: color .45s var(--ease-out) .05s, transform .4s var(--ease-out);
}
.hero__actions .btn::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: var(--fill); transform: translate(-50%, -50%) scale(0);
  transition: transform .7s var(--ease-out);
}
.hero__actions .btn--lime { --fill: var(--c-ink); background: var(--c-lime); color: var(--c-ink); }
.hero__actions .btn--outline { --fill: var(--c-lime); background: transparent; color: var(--c-lime); }
.hero__actions .btn--lime:hover { color: var(--c-lime); }
.hero__actions .btn--outline:hover { background: transparent; color: var(--c-ink); }
.hero__actions .btn:hover::before, .hero__actions .btn:focus-visible::before { transform: translate(-50%, -50%) scale(1.15); }
.hero__actions .btn:active { transform: translateY(0) scale(.98); }
@media (prefers-reduced-motion: reduce) { .hero__actions .btn, .hero__actions .btn::before { transition-duration: .01ms; } }

.hero__media {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; height: var(--hero-h); margin-right: 16px; overflow: hidden;
}
.hero__col { overflow: hidden; }
.hero__track { display: flex; flex-direction: column; gap: 16px; animation: marquee-y 60s linear infinite; }
.hero__col--reverse .hero__track { animation-direction: reverse; }
.hero__col:nth-child(3) .hero__track { animation-duration: 75s; }
.hero__col:nth-child(2) .hero__track { animation-duration: 90s; }
.hero__set { display: flex; flex-direction: column; gap: 16px; }
.hero__tile {
  width: 100%; border-radius: var(--r-media);
  background-size: cover; background-position: 50%; background-repeat: no-repeat;
}
.hero__tile--s { height: 187px; }
.hero__tile--l { height: 272px; }
.hero__media.is-js .hero__track { animation: none; will-change: transform; }   /* JS drives the columns (drift, wheel, drag) */
.hero__col { cursor: default; touch-action: pan-y; }
.hero__col.is-dragging .hero__tile { pointer-events: none; }
.hero__tile { position: relative; overflow: hidden; }   


.hero__fade {
  position: absolute; inset: 0 0 auto; height: var(--hero-h); pointer-events: none;
  background: linear-gradient(#211d1d, #8f8f8f00 35%, #80808000 60%, #211d1d);
}
@keyframes marquee-y { to { transform: translateY(calc(-50% - 8px)); } }
@keyframes marquee-x { to { transform: translateX(var(--shift, -50%)); } }  /* --shift = one set width, set by main.js */

/* ---------- 2. CLIENT LOGOS ------------------------------------------- */
.clients-section { padding: 120px 0 60px; overflow: hidden; }
.clients__title {
  text-align: center; margin-bottom: 28px;
  font-size: 20px; font-weight: 400; line-height: 40px;
}
.clients__title em { font-style: normal; font-family: var(--f-display); font-weight: 600; font-size: 24px; color: inherit; }
.logo-marquee { position: relative; display: flex; align-items: center; height: 101px; overflow: hidden; }
/* a short soft fade at both edges only, so the logos in the middle stay fully visible */
.logo-marquee::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, var(--c-paper) 3%, rgb(242 242 237 / 0) 22%, rgb(242 242 237 / 0) 78%, var(--c-paper) 97%);
}
.logo-marquee__track { display: flex; width: max-content; animation: marquee-x 40s linear infinite; }
.logo-marquee--reverse .logo-marquee__track { animation-direction: reverse; }  /* row 2 runs the opposite way */
.logo-marquee__set { display: flex; align-items: center; gap: 80px; padding-right: 80px; }  /* padding = gap, so the loop seam is invisible */
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee.is-js { cursor: default; touch-action: pan-y; user-select: none; -webkit-user-select: none; }   /* normal pointer over the logos (no custom drag ball) */
.drag-cursor { display: none !important; position: fixed; left: 0; top: 0; z-index: 2500; width: 0; height: 0; pointer-events: none; }
.drag-cursor__ball {
  position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-lime); color: var(--c-ink);
  border: 1.5px solid var(--c-ink);                     /* thin ring so the yellow reads on the pale background */
  box-shadow: 0 3px 10px rgb(33 29 29 / .18);
  transform: scale(0); transition: transform .25s var(--ease-out);
}
.drag-cursor.is-visible .drag-cursor__ball { transform: scale(1); }
.drag-cursor.is-down .drag-cursor__ball { transform: scale(.82); }
.logo-marquee.is-js .logo-marquee__track { animation: none; will-change: transform; }   /* JS drives the rows: drift, drag, momentum */
.client-logo img { pointer-events: none; -webkit-user-drag: none; }
.client-logo__angel { position: relative; display: block; width: 124px; height: 22px; }   /* the Figma "Angel East" logo with its mark (already #393939 like the others) */
.client-logo .client-logo__angel img { position: absolute; display: block; max-width: none; }
.client-logo__angel img:first-child { inset: 0 83.1% 3.89% 0; width: 16.9%; height: 96.11%; }
.client-logo__angel img:last-child { inset: 13.64% 0 0 19.69%; width: 80.31%; height: 86.36%; }
.client-logo { flex: none; display: flex; align-items: center; }
.client-logo img { max-width: none; }   /* natural SVG size (~125×27–46) and built-in #393939 fill — as on the live site */
/* Placeholder box (still used by the testimonial logo strip) */
.logo-slot {
  display: grid; place-items: center; min-width: 140px; height: 48px;
  border: 1px dashed rgb(33 29 29 / .25); border-radius: 8px;
  color: rgb(33 29 29 / .45); font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}

/* ---------- 3. FEATURES (stacked cards) ------------------------------- */
.features-section { padding-top: 80px; }
.features__title {
  width: 844px; max-width: 92%; min-width: 320px; margin: 0 auto 70px; text-align: center;
  font-family: var(--f-display); font-weight: 400; font-size: 60px; line-height: 72px;
}
.features__title em { font-style: normal; font-family: var(--f-body); font-weight: 400; font-size: .933em; }
.features__eyebrow { text-align: center; margin-bottom: 8px; font-size: 16px; text-transform: uppercase; color: #393939; }
.features__title.is-split { cursor: default; }
.ft-word { display: inline-block; will-change: transform, opacity, filter; transform-origin: 50% 70%; }

.features__stack { display: flex; flex-direction: column; align-items: center; }  /* space after the stack lives here, not on the last sticky card */
.features__wrap { width: 80%; position: relative; display: flex; flex-direction: column; gap: 76.8px; padding-bottom: 56px; margin-bottom: 76.8px; }   /* gaps measured on staging: 77 between cards, 133 after the last */

.feature-card {
  position: sticky; top: var(--sticky-top, 120px);   /* main.js sets top + height from the window size on desktop */
  transform-origin: 50% 0; backface-visibility: hidden;
  display: grid; grid-template-columns: 1.25fr 1.25fr; place-items: center; row-gap: 20px;
  height: 750px; padding-right: 20px;
  border-radius: var(--r-card); background: var(--c-lime-soft);
}
.feature-card + .feature-card { margin-top: 0; }
.feature-card--yellow { background: var(--c-lime-soft); }
.feature-card--purple { background: var(--c-purple-soft); }
.feature-card--white  { background: #fefefe; }
.feature-card--orange { background: var(--c-orange-soft); }

.feature-card__media {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  width: 96%; height: 96%; border-radius: 15px; overflow: hidden;
  background-size: cover; background-position: 50%; background-repeat: no-repeat;
}
.feature-card--yellow .feature-card__media { background-image: url("../assets/img/feature-card-1.webp"); }
.feature-card--purple .feature-card__media { background-image: url("../assets/img/feature-card-2.webp"); }
.feature-card--white  .feature-card__media { background-image: url("../assets/img/feature-card-3-team.webp"); }
.feature-card--orange .feature-card__media { background-image: url("../assets/img/feature-card-4.webp"); }

/* hover: the picture zooms in a little and the yellow Positiv mark fades in at the bottom-right corner */
.feature-card__media::before {
  content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: 50%;
  transition: transform 1s var(--ease-out); will-change: transform;
}
.feature-card__media::after {
  content: ""; position: absolute; right: 24px; bottom: 24px; width: 60px; height: 57px;
  background: url("../assets/logos/portfolio-hover-logo.svg") right center / 429px 57px no-repeat;   /* only the yellow Positiv mark */
  opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .6s var(--ease-out);
}
.feature-card__media:hover::before { transform: scale(1.06); }
.feature-card__media:hover::after { opacity: 1; transform: none; }
.feature-card__media-inner { width: 80%; padding-bottom: 60px; position: relative; }
.feature-card__media-title {
  display: flex; flex-wrap: wrap; justify-content: center; text-align: center;
  color: #fff; font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: 48px;
}
.feature-card__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.feature-card__tags .tag {
  display: flex; align-items: center; justify-content: center;
  width: 117px; height: 41px; border: 1px solid #fff; border-radius: var(--r-pill); color: #fff;
}

.feature-card__body { width: 80%; display: flex; flex-direction: column; align-items: flex-start; }
.feature-card__label { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 40px; }
.feature-card__icon { width: 64px; height: 64px; flex: none; box-sizing: border-box; padding: 10px; background: #393939; border-radius: 8px; }
.feature-card__label h5 { font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 40px; }
.feature-card__rule { width: 100%; height: 1px; background: #333; opacity: .3; }
.feature-card__copy { margin-top: 40px; width: 100%; }
.feature-card__heading {
  margin-bottom: 20px; font-family: var(--f-display); font-weight: 400; font-size: 40px; line-height: 40px;
}
.feature-card__lead { margin-bottom: 10px; font-size: 16px; font-weight: 500; line-height: 25px; }
.feature-card__text { font-size: 16px; line-height: 25px; }

.feature-card--purple .feature-card__heading { font-size: 38px; margin-bottom: 15px; }
/* feature cards, desktop: more air between the headings and the text, and between the text and the button (not in short windows, where the card is already compact) */
@media (min-width: 768px) {
  .features-section:not(.is-compact) .feature-card .feature-card__heading { margin-bottom: 28px; }
  .features-section:not(.is-compact) .feature-card .feature-card__lead { margin-bottom: 16px; }
  .features-section:not(.is-compact) .feature-card .feature-card__copy .btn--block { margin-top: 36px; }
}

/* Desktop stack motion (driven by main.js): the cards behind darken a touch, the picture settles as its card
   arrives, hover effects pause while the page moves, and the copy staggers in once a card lands. */
@media (min-width: 992px) {
  .feature-card::after {
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none;
    background: #141413; opacity: var(--dim, 0);
  }
  .features-section.is-scrolling .feature-card { will-change: transform; }
  .features-section.is-scrolling .feature-card__media { pointer-events: none; }
  .feature-card__media::before { scale: var(--settle, 1); }      /* separate from the hover zoom (transform), so the two combine */

  /* flexible sizes: the card height follows the window, so the spacing and type follow too */
  .feature-card__label { margin-bottom: clamp(18px, 3.6vh, 40px); }
  .feature-card__copy { margin-top: clamp(18px, 3.6vh, 40px); }
  .feature-card__heading { font-size: clamp(30px, 2.6vw, 40px); line-height: 1.05; }
  .feature-card--purple .feature-card__heading { font-size: clamp(29px, 2.5vw, 38px); }
  .features-section.is-compact .feature-card__text { display: none; }      /* short windows: keep the lead, drop the long paragraph */
  .features-section.is-compact .feature-card__label { gap: 10px; }
  .features-section.is-compact .feature-card__icon { width: 52px; height: 52px; padding: 8px; }

  /* copy reveal */
  .fx-on .feature-card__label, .fx-on .feature-card__heading, .fx-on .feature-card__lead, .fx-on .feature-card__text {
    transition: opacity .9s var(--ease-out), translate .9s var(--ease-out);   /* same fade-up as the site-wide reveal (js/reveal.js) */
  }
  .fx-on .feature-card__rule { transform-origin: 0 50%; transition: scale .9s cubic-bezier(.16, 1, .3, 1) .06s; }
  .fx-on .feature-card__heading { transition-delay: .12s; }
  .fx-on .feature-card__lead { transition-delay: .24s; }
  .fx-on .feature-card__text { transition-delay: .36s; }
  .fx-on .feature-card__copy .btn {
    transition: transform .35s var(--ease-out), background-color .25s, color .25s,
                opacity .9s var(--ease-out) .48s, translate .9s var(--ease-out) .48s;
  }
  .fx-on .feature-card:not(.is-in) :is(.feature-card__label, .feature-card__heading, .feature-card__lead, .feature-card__text, .feature-card__copy .btn) {
    opacity: 0; translate: 0 28px; transition-duration: .2s; transition-delay: 0s;
  }
  .fx-on .feature-card:not(.is-in) .feature-card__rule { scale: 0 1; transition-duration: .2s; transition-delay: 0s; }
}

/* ---------- 4. IMPACT / STATS + PORTFOLIO RAIL ------------------------ */
.impact-section { display: flow-root; background: var(--c-ink); color: #fff; padding-bottom: 120px; overflow: clip; }  /* clip (not hidden) so the sticky rail still pins */
.impact__head { display: flex; flex-direction: column; align-items: center; margin-top: 140px; }
.impact__title { font-weight: 400; font-size: 56px; line-height: 64px; margin-top: 0; text-align: center; }
.impact__sub { min-height: 74px; display: flex; align-items: center; justify-content: center; gap: 15px; font-size: 56px; line-height: 64px; }
.impact__sub .glyph { display: flex; align-items: center; gap: 2px; font-family: var(--f-display); }
.impact__hl { font-family: var(--f-display); font-weight: 600; font-size: 1.0714em; color: var(--c-lime); }

.stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px 82px;
  width: 80%; margin: 70px auto 120px;
}
.stat { display: flex; flex-direction: column; justify-content: flex-end; }
.stat__row { display: flex; align-items: center; gap: 30px; }
.stat__text { color: var(--c-muted-2); font-size: 16px; line-height: 26px; }
.stat__num, .stat__unit { font-family: var(--f-display); font-weight: 400; font-size: 88px; line-height: 88px; color: #fff; }
.stat__value { display: flex; align-items: center; }
/* count-up (js/main.js): the counting digits are drawn here, outside the page text; the real value (.stat__real) stays in the text, visually hidden while counting */
.stat__num.is-counting::before { content: attr(data-shown); content: attr(data-shown) / ""; }
.stat__num.is-counting > .stat__real { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.stat__rule { height: .5px; margin-top: 20px; background: #fdfdfd; opacity: .15; transition: opacity .4s ease; }
.stat:hover .stat__rule { opacity: .4; }   /* the divider brightens a little when its stat is hovered */
.stat__link { display: flex; align-items: center; gap: 15px; margin-top: 12px; font-size: 16px; font-weight: 300; line-height: 26px; }
.stat__link { transition: color .3s ease; }
.stat__link svg { transition: transform .4s var(--ease-out); }
.stat__link:hover { color: var(--c-lime); }                       /* text turns lime, the arrow slides forward */
.stat__link:hover svg { transform: translateX(6px); }

.portfolio { width: 100%; }
.portfolio__pin { display: flex; flex-direction: column; justify-content: center; }
.portfolio__viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.portfolio__viewport::-webkit-scrollbar { display: none; }
.portfolio__track { display: flex; width: max-content; height: 469px; background: var(--c-lime-tint); color: var(--c-ink); user-select: none; -webkit-user-select: none; }
.portfolio-card {
  flex: 0 0 80vw; display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: center;
  height: 469px; padding: 0 48px 0 16px; border-left: 1px solid #dadcc5;
}
.portfolio-card__media {
  width: 100%; height: calc(100% - 32px); border-radius: var(--r-media);
  background-size: cover; background-position: 50%; background-repeat: no-repeat;
}
.portfolio-card__media--1 { background-image: url("../assets/img/portfolio-1.jpg"); }
.portfolio-card__media--2 { background-image: url("../assets/img/portfolio-2.webp"); }
.portfolio-card__media--3 { background-image: url("../assets/img/portfolio-3.webp"); }
.portfolio-card__media--web { background-image: url("../assets/img/service-web.jpg"); }
.portfolio-card__media--fig { background-image: url("../assets/img/portfolio-fig.webp"); }
/* hover (Figma "Hover card project"): the picture zooms a little, the corner logo slides up and out, and the project name + category slide in with the Positiv bolt */
.portfolio-card__media { position: relative; overflow: hidden; }
.portfolio-card__media::before {
  content: ""; position: absolute; inset: 0; background: inherit; background-size: cover; background-position: 50%;
  transition: transform .9s var(--ease-out); will-change: transform;
}
.portfolio-card__media:hover::before { transform: scale(1.09); }
.portfolio-card__media::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 55%; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: linear-gradient(to top, rgb(33 29 29 / .85), rgb(33 29 29 / .45) 45%, transparent);   /* dark shade behind the hover text so it stays readable */
}
.portfolio-card__media:hover::after { opacity: 1; }
.pc-hover { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 28px; height: 57px; overflow: hidden; pointer-events: none; }
.pc-hover__logo { position: absolute; right: 0; top: 0; width: 429px; height: 57px; max-width: none; transition: transform .6s var(--ease-out), opacity .45s ease; }
.pc-hover__text {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; color: #fff;
  height: 57px; transform: translateY(70px); opacity: 0; transition: transform .6s var(--ease-out), opacity .45s ease;
}
.pc-hover__text strong { display: block; font-size: 20px; font-weight: 500; line-height: 26px; }
.pc-hover__text span { display: block; margin-top: 2px; color: var(--c-paper-2); font-size: 15px; line-height: 20px; }
.pc-hover__text img { width: 41px; height: 27px; flex: none; }
.portfolio-card__media:hover .pc-hover__logo { transform: translateY(-70px); opacity: 0; }
.portfolio-card__media:hover .pc-hover__text { transform: none; opacity: 1; }
/* hover (Nov 2026): industry tag, engagement and deliverables, anchored to the bottom so longer lines wrap upwards; the arrow links to the results page */
.pc-hover { height: 168px; }
.pc-hover__logo { top: auto; bottom: 0; }
.pc-hover__text { top: auto; bottom: 0; height: auto; min-height: 57px; align-items: flex-end; gap: 16px; transform: translateY(190px); }
.pc-hover__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pc-hover__tag { font-size: 12px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; color: var(--c-lime); }
.pc-hover__eng { font-size: 17px; font-weight: 500; line-height: 23px; color: #fff; }
.pc-hover__del { font-size: 13px; line-height: 19px; color: var(--c-paper-2); }
.pc-hover__arrow { flex: none; display: block; margin-bottom: 4px; border-radius: 6px; pointer-events: auto; }
.pc-hover__arrow img { display: block; width: 41px; height: 27px; transition: transform .3s var(--ease-out); }
.pc-hover__arrow:hover img { transform: translateX(4px); }
.pc-hover__arrow:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 4px; }
.portfolio-card__media:hover .pc-hover__logo, .portfolio-card__media:focus-within .pc-hover__logo { transform: translateY(-110px); opacity: 0; }
.portfolio-card__media:focus-within .pc-hover__text { transform: none; opacity: 1; }
.portfolio-card__media:focus-within::after { opacity: 1; }
.portfolio-card__info { display: flex; flex-direction: column; justify-content: space-between; height: calc(100% - 50px); }
.portfolio-card__tag {
  display: inline-flex; align-items: center; justify-content: center; align-self: flex-start;
  min-width: 51px; padding: 0 10px; height: 22px; border-radius: 20px; background: #777; color: #fff; font-size: 12px;
}
.portfolio-card__desc { font-size: 14px; line-height: 22px; }
.portfolio-card__logo { position: relative; display: block; width: 124px; height: 22px; margin-bottom: 40px; pointer-events: none; }
.portfolio-card__logo img { position: absolute; display: block; max-width: none; }
.portfolio-card__logo img:first-child { inset: 0 83.1% 3.89% 0; width: 16.9%; height: 96.11%; }
.portfolio-card__logo img:last-child { inset: 13.64% 0 0 19.69%; width: 80.31%; height: 86.36%; }

.portfolio__progress { display: flex; justify-content: center; margin-top: 40px; }
.portfolio__all { display: flex; width: 190px; margin: 40px auto 0; }
.portfolio__bar { width: 30%; height: 5px; border-radius: 20px; background: var(--c-paper-2); overflow: hidden; }
.portfolio__bar-fill { width: 100%; height: 10px; margin-top: -2px; border-radius: 20px; background: var(--c-lime); transform: scaleX(.07); transform-origin: left; }

@media (min-width: 992px) {
  .portfolio.is-pinned .portfolio__pin { position: sticky; top: 0; height: 100vh; }
  .portfolio.is-pinned .portfolio__viewport { overflow: visible; cursor: grab; }
  .portfolio.is-pinned .portfolio__viewport.is-dragging { cursor: grabbing; }
  .portfolio.is-pinned .portfolio__track { will-change: transform; }
}
@media (min-width: 1280px) {
  .portfolio__track, .portfolio-card { height: 600px; }
  .portfolio-card { flex-basis: 47.5vw; }
  .portfolio-card__info { height: calc(100% - 50px); }
}
@media (min-width: 1920px) { .portfolio__progress { margin-top: 60px; } }

/* ---------- 5. SERVICES (sticky video + cards) ------------------------ */
.services-section { display: flex; justify-content: center; align-items: center; }
.services__inner { display: flex; flex-direction: column; align-items: center; margin: 140px 0 120px; width: 100%; }
.services__stage { position: relative; width: 100%; margin-bottom: 70px; }   /* JS sets padding-bottom / margin-bottom on desktop so headline→cards = 70px */
.services__pin { position: sticky; top: 0; z-index: 2; height: 100vh; margin-bottom: -100vh; overflow: hidden; pointer-events: none; }
.services__spacer { height: calc(150vh - 50px); }                                       /* shortened from 325vh: grow (.95vh) + a short hold + approach */

.video-frame {
  position: absolute; pointer-events: auto; left: 2%; top: 13vh; width: 96%; height: 85vh;   /* JS overrides these every frame on desktop */
  border-radius: 24px; overflow: hidden; cursor: none; background: var(--c-paper);   /* same as the page behind: no dark hairline at fractional pixels / rounded corners while it resizes */
}
.video-frame video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); object-fit: cover; }   /* 1px overscan, clipped by the frame */

.services__headline { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; color: var(--c-title); }
.services__eyebrow { position: relative; z-index: 3; margin-bottom: 20px; font-size: 18px; font-weight: 400; }   /* stays readable above the video while it drops in */
.services__lines { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; width: 70%; }
.services__lines h4 { font-family: var(--f-display); font-weight: 700; font-size: 56px; line-height: 72px; }
.services__desc { width: 677px; max-width: 90%; margin-top: 12px; font-size: 20px; line-height: 28px; color: #393939; opacity: .9; }
.services__slot { display: block; width: max(21vh, 150px); height: 70px; border-radius: 20px; }   /* the pill the video lands in */

/* Stacked service card — dimensions measured from the staging build at 1920×1000 */
.svc { position: relative; width: 100%; height: 280vh; display: flex; justify-content: center; align-items: flex-start; }
.svc-card {
  position: sticky; top: 14.2vh; width: 80%; height: 80vh; overflow: hidden;
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px;
  border-radius: 32px; background: var(--c-ink);
}
.svc-text { position: relative; margin-right: 15%; perspective: 1300px; perspective-origin: 50% 50%; }   /* same drum as the pictures */
.svc-panel {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  padding: 0 64px; opacity: 0; transform: translateY(34px); pointer-events: none;
  backface-visibility: hidden;          /* opacity / transform are driven by the scroll in main.js */
}
.svc-panel.is-active { opacity: 1; transform: none; pointer-events: auto; }
.svc-mask { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em .12em .14em; margin: -.06em -.12em -.14em; }
.svc-word { display: inline-block; transform-origin: 0 100%; }
.svc-panel__icon { position: absolute; top: max(40px, 7.4vh); left: 64px; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; background: var(--c-lime); }
.svc-panel__title { margin-bottom: 26px; color: var(--c-lime); font-family: var(--f-display); font-weight: 700; font-size: 56px; line-height: 60px; }
.svc-panel__work { margin-bottom: 30px; }
.svc-label { margin: 10px 0; color: var(--c-muted-2); font-size: 14px; line-height: 18px; font-weight: 400; text-transform: uppercase; }
.svc-label--deliv { margin: 0 0 10px; }
.svc-panel__text { color: var(--c-paper); font-size: 16px; line-height: 20px; }
@media (min-width: 768px) { .svc:not(.is-compact) .svc-panel .svc-panel__text { line-height: 26px; } }   /* services copy: 26px between the lines (not in short windows, where the card is compact) */
.svc-panel__pills { display: flex; flex-wrap: wrap; gap: 16px; width: 80%; }
/* deliverable tags: same pill look and hover as before, but not clickable (spans) */
.svc-pill { display: flex; align-items: center; height: 40px; padding: 0 10px; border: .5px solid var(--c-paper); border-radius: 20px; color: var(--c-paper); font-size: 12px; line-height: 20px; cursor: default; transition: background-color .25s, color .25s; }
.svc-pill:hover { background: var(--c-paper); color: var(--c-ink); }
.svc-panel__num { position: absolute; bottom: max(40px, 7.4vh); left: 64px; padding: 10px 20px; border: .5px solid var(--c-paper); border-radius: 30px; color: var(--c-lime); font-size: 14px; font-weight: 700; letter-spacing: 1.12px; line-height: 20px; }

.svc-media { position: relative; overflow: hidden; }
.svc-tile {
  position: absolute; left: 40px; width: calc(100% - 56px); top: 0; height: 0;
  border-radius: 20px; background-size: cover; background-position: 50%; backface-visibility: hidden;
  overflow: hidden; cursor: default;
}
/* hover: the picture zooms inside its frame and a soft shade appears (the pictures are not clickable) */
.svc-tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; background-size: cover; background-position: 50%;
  transition: transform .9s var(--ease-out); will-change: transform;
}
.svc-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: linear-gradient(to top, rgb(33 29 29 / .55), transparent 50%);
}
.svc-tile.is-hot::before { transform: scale(1.07); }   /* is-hot: set by main.js from real mouse movement */
.svc-tile__dim { position: absolute; inset: 0; border-radius: inherit; background: #141413; opacity: 0; pointer-events: none; }   /* neighbours sit a touch darker (main.js) */
/* desktop: each tile box is the open size and is clipped to its current height (main.js sets --clip), so the front picture can
   grow on hover by revealing more of the image; the shade and the expand button follow the visible edge */
.svc-tile { clip-path: inset(var(--clip, 0px) 0 var(--clip, 0px) 0 round 20px); }
.svc-tile::after { inset: var(--clip, 0px) 0; }
.svc.is-scrolling .svc-tile { pointer-events: none; }                                  /* hover effects pause while the page moves */
.svc.is-scrolling .svc-tile, .svc.is-scrolling .svc-panel { will-change: transform, opacity; }
@media (min-width: 992px) {
  .svc.is-compact .svc-panel__icon, .svc.is-compact .svc-panel__num { display: none; }
  .svc.is-compact .svc-panel__title { font-size: clamp(38px, 3.6vw, 48px); line-height: 1.08; margin-bottom: 16px; }
  .svc.is-compact .svc-panel__work { margin-bottom: 18px; }
  .svc.is-compact .svc-panel__pills { gap: 10px; }
  .svc.is-compact .svc-pill { height: 34px; }
}
.svc-tile.is-hot::after { opacity: 1; }

@media (min-width: 1920px) {
  .svc-panel__title { font-size: 62px; }
  .svc-label { font-size: 14px; }
  .svc-panel__text { font-size: 18px; }
}

/* ---------- 6. TESTIMONIALS ------------------------------------------- */
.testimonials-section { padding: 60px 0 140px; overflow: hidden; }
.testimonials__head { display: flex; align-items: flex-start; width: 80%; margin: 0 auto 40px; }
.testimonials__intro { flex: 0 0 30%; }
.testimonials__eyebrow { margin-bottom: 8px; font-size: 16px; line-height: 33px; color: #211d1d; }
.testimonials__title { font-family: var(--f-body); font-weight: 400; font-size: 28px; line-height: 40px; color: #211d1d; }
.testimonials__title strong { display: block; white-space: nowrap; font-family: var(--f-display); font-weight: 600; font-size: 32px; }

/* Logo tabs: 120×75 buttons, 100px apart, pushed to the right edge of the head (as on the staging site) */
.testimonials__tabs { flex: 1 1 auto; display: flex; justify-content: flex-end; align-items: flex-start; gap: 66px; padding-top: 16px; }   /* starts where the title ends, 876px wide @1905 */
.testi-tab { display: flex; flex-direction: column; gap: 38px; flex: none; text-align: left; cursor: pointer; }
.testi-tab__bar { position: relative; display: block; width: 100%; height: 4px; border-radius: 4px; overflow: hidden; background: #b2b2b2; }
.testi-tab__bar::after { content: ""; position: absolute; inset: 0; border-radius: 4px; background: #17171e; transform: scaleX(0); transform-origin: left; }
.testi-tab.is-active .testi-tab__bar::after { animation: testi-fill 7s linear forwards; }
.testimonials-section.is-paused .testi-tab.is-active .testi-tab__bar::after, .testimonials-section.is-offscreen .testi-tab.is-active .testi-tab__bar::after { animation-play-state: paused; }
@keyframes testi-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .testi-tab.is-active .testi-tab__bar::after { animation: none; transform: scaleX(1); } }
.testi-tab img, .testi-tab .portfolio-card__logo { opacity: .35; transition: opacity .3s; }
.testi-tab > img { height: auto; }
.testi-tab .portfolio-card__logo { margin-bottom: 0; }
.testi-tab:hover img, .testi-tab:hover .portfolio-card__logo { opacity: .65; }
.testi-tab.is-active img, .testi-tab.is-active .portfolio-card__logo { opacity: 1; }
@media (min-width: 768px) { .testi-tab > img[src*="caravel"] { width: 128px; margin-top: -7px; }   /* Caravel is a taller lock-up (icon + tagline): a touch smaller and nudged up so its wordmark sits on the same line as the other tab logos */ }
.testi-tab:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 6px; }

.testimonials__viewport { width: calc(90% + 4px); margin-left: calc(10% - 4px); padding-left: 4px; overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }   /* starts at the 10% line: nothing is ever visible in the left part of the screen; clipped at the page's right edge so the next card peeks in */
.testimonials__viewport.is-dragging { cursor: grabbing; }
.testimonials__viewport img { -webkit-user-drag: none; user-drag: none; }   /* dragging the cards must not start a text selection or a native image drag */
.testimonials__rail { display: flex; gap: 16px; width: 100%; transition: transform 1.2s cubic-bezier(.215, .61, .355, 1); }   /* ease-out-cubic, ≈1.3s as measured */
.testimonials__rail.is-dragging { transition: none; }
.testimonial-card {
  position: relative; flex: 0 0 74.3%; height: 599px;   /* 74.3% of the viewport box = 1274px @1905 */
  border: 1px solid silver; border-radius: var(--r-media); background: #edebf5; overflow: hidden;
}
.testimonial-card--lime  { background: #f7f9e5; }
.testimonial-card--white { background: #fff; }
.testimonial-card--peach { background: #fcf2ef; }
.testimonial-card__copy { position: absolute; z-index: 3; left: 61px; top: 60px; width: 43.7%; }
@media (min-width: 768px) { .testimonial-card .testimonial-card__copy { top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; } }   /* the text block sits in the middle of the card: same air above the quote mark as below the job title */
@media (min-width: 992px) { .testimonial-card[data-card="2"] .testimonial-card__copy { width: 40.5%; } }   /* AngelEast: keep the longer quote clear of the microphone arm */
.testimonial-card__logo { width: 114px; height: 82px; }
.testimonial-card__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left; }
.testimonial-card__title { margin-top: 16px; color: var(--c-purple); font-family: var(--f-display); font-size: 32px; font-weight: 700; line-height: 40px; }
.testimonial-card--lime .testimonial-card__title,
.testimonial-card--white .testimonial-card__title { color: #2b2b2b; }
.testimonial-card--peach .testimonial-card__title { color: #fe572a; }   /* Caravel (Figma): orange title */
.testimonial-card__quote { margin-top: 12px; font-size: 18px; line-height: 24px; }   /* air between the title and the paragraph */
.testimonial-card__rule { width: 70%; height: 1px; margin-top: 32px; background: #0b0a0a; opacity: .16; }
.testimonial-card__name { margin-top: 32px; font-size: 24px; font-weight: 500; line-height: 24px; }
.testimonial-card__role { margin-top: 10px; font-size: 16px; }
.testimonial-card__visual { position: absolute; inset: 0; pointer-events: none; }
.testimonial-card__shape { position: absolute; z-index: 1; top: 0; right: 0; width: 60%; height: 100%; background-position: 50%; background-repeat: no-repeat; background-size: 450px; }
.testimonial-card__shape--a { background-image: url("../assets/img/shape-vector.webp"); }
.testimonial-card__shape--b { background-image: url("../assets/img/shape-intersect-a.webp"); background-size: 500px; }
.testimonial-card__shape--c { background-image: url("../assets/img/shape-intersect-b.webp"); background-size: 500px; }
.testimonial-card__person { position: absolute; z-index: 2; right: 5%; bottom: 0; width: 53%; height: 597px; background-size: cover; background-position: 50% 100%; background-repeat: no-repeat; }
.testimonial-card__person--1 { background-image: url("../assets/img/testimonial-1.webp"); }
.testimonial-card__person--2 { background-image: url("../assets/img/testimonial-2.webp"); }
.testimonial-card__person--3 { background-image: url("../assets/img/testimonial-3.webp"); }
.testimonial-card__person--4 { background-image: url("../assets/img/testimonial-4.webp"); }
/* Caravel (Figma): a tight cut-out, 34.3% wide and 80.3% of the card high, its centre at 70.7% of the card width */
.testimonial-card__person--5 { background-image: url("../assets/img/testimonial-caravel.webp"); left: 53.6%; right: auto; width: 34.3%; height: 80.3%; background-size: contain; background-position: 50% 100%; }
/* Figma "Home * Desktop" testimonials: new portraits, placed as in the design (card 843x473 there, scaled to the card here) */
.testimonial-card__person--light-node { background-image: url("../assets/img/testimonial-light-node.webp"); left: 48.4%; right: auto; width: 45.2%; height: 82.5%; background-size: contain; background-position: 50% 100%; }
.testimonial-card__person--mansour    { background-image: url("../assets/img/testimonial-mansour.webp");    left: 48%; right: auto; width: 50.5%; height: 69%; background-size: contain; background-position: 50% 100%; }
.testimonial-card__person--nabil      { background-image: url("../assets/img/testimonial-nabil.webp");      left: 47.6%; right: auto; width: 41.3%; height: 81.6%; background-size: contain; background-position: 50% 100%; }
.testimonial-card--white .testimonial-card__title { color: var(--c-purple); }   /* Figma: the StrangeBee card's title is purple like Light Node's */

/* ---------- 7. COMPARISON TABLE --------------------------------------- */
.compare-section { display: flex; flex-direction: column; align-items: center; padding: 120px 0; background: var(--c-ink); color: #fff; }
.compare__head { margin-bottom: 80px; text-align: center; }
.compare__title { margin-bottom: 20px; font-family: var(--f-display); font-weight: 700; font-size: 56px; line-height: 64px; }
.compare__sub { margin-top: 10px; font-size: 20px; line-height: 40px; }

.compare__scroll { width: 80%; overflow-x: auto; }
.compare-table {
  display: grid; grid-template-columns: 1.75fr repeat(5, 1fr); grid-auto-rows: 100px;
  min-width: 860px; border-radius: var(--r-card);
}
.compare-table > div { display: flex; align-items: center; justify-content: center; border: .5px solid var(--c-line); border-top: 0; border-left: 0; }
.cell--spacer { opacity: 0; border: 0 !important; }
.cell--brand { background: var(--c-lime); border-top-left-radius: var(--r-media); border: 0 !important; }
.cell--brand img { filter: brightness(0); }
.cell--col-head { background: var(--c-ink-2); color: var(--c-paper-2); font-size: 16px; text-align: center; border-top: .5px solid var(--c-line) !important; }
.cell--col-head:last-of-type { border-top-right-radius: var(--r-media); }
.cell--label { justify-content: flex-start !important; padding-left: 40px; color: var(--c-paper-2); border-left: .5px solid var(--c-line) !important; }
.cell--us { background: var(--c-lime-cell); border-bottom: .5px solid #39393926 !important; border-right: .5px solid #39393926 !important; }
.compare-table .cell--us:last-child { border-bottom: 0 !important; }
.cell--label.is-first { border-top: .5px solid var(--c-line) !important; border-top-left-radius: var(--r-media); }
.cell--label.is-last { border-bottom: .5px solid var(--c-line) !important; border-bottom-left-radius: var(--r-media); }
.compare-table .is-last-row { border-bottom: .5px solid var(--c-line) !important; }
.compare-table .is-last-row.is-last-col { border-bottom-right-radius: var(--r-media); }
.compare-table svg { width: 28px; height: 28px; }
/* hover (as on the live site): the hovered cell's content grows a little and gets a soft glow - the cell itself doesn't change */
.compare-table .cell__txt, .compare-table svg { transition: transform .3s var(--ease-out), filter .3s ease; }
.compare-table .cell__txt { display: inline-block; }
.compare-table > div:not(.cell--spacer):not(.cell--brand):hover .cell__txt,
.compare-table > div:not(.cell--spacer):not(.cell--brand):hover svg { transform: scale(1.05); filter: drop-shadow(0 0 10px rgb(204 255 0 / .6)); }


/* ---------- 8. CTA + FOOTER — rules taken from the staging stylesheet, per breakpoint ------------------- */
.cta-section {
  display: flex; flex-direction: column; justify-content: space-between; gap: 100px;
  width: 100%; height: 1585px; color: #fff;
  background: linear-gradient(rgb(33 29 29 / .47), var(--c-ink)), url("../assets/img/cta-bg.webp");
  background-size: auto, cover; background-position: 0 0, 50%; background-repeat: no-repeat;
}
.cta__inner { display: flex; flex-direction: column; align-items: center; padding-top: 100px; }
.cta__mark { width: 379px; height: 425px; }
.cta__mark img, .cta-mark { width: 379px; height: 420px; display: block; overflow: visible; }
/* the mark keeps its glass look; one soft strip of white light starts on the left edge, climbs, runs over the top and down the right
   side. An SVG mask fades it out as it nears the line below the logo, so the lower part is never lit; then it starts again. */
/* the light is ONE needle-like line: ten hairline layers share one centre, the short ones thicker and the long ones thinner, so they merge into a
   single strip that is thickest and brightest in the middle and runs out to a hair-thin point at both ends. Low opacity, no glow. */
@property --c { syntax: '<number>'; inherits: false; initial-value: .694; }
.cta-mark__head { --L: .05; --w: 1.5; fill: none; stroke: #fff; stroke-width: calc(var(--w) * 1.6); stroke-opacity: .15; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--L) calc(1 - var(--L)); stroke-dashoffset: calc(var(--L) / 2 - var(--c));
  opacity: 0; animation: cta-move 7.5s cubic-bezier(.37, 0, .63, 1) infinite, cta-vis 7.5s linear infinite; }
.js .cta-mark:not(.is-live) .cta-mark__head { animation: none; }   /* waits until the mark is on screen (js/main.js adds .is-live) */
@keyframes cta-move { 0% { --c: .694; } 82%, 100% { --c: 1.5; } }
/* fade in while it is still dim at the left, fade out before the loop restarts, so the restart is never seen */
@keyframes cta-vis { 0% { opacity: 0; } 14% { opacity: .75; } 62% { opacity: .75; } 80%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cta-mark__head { animation: none; opacity: 0; } }
.cta__title { width: 70%; margin: -80px 0 24px; text-align: center; font-family: var(--f-body); font-weight: 400; font-size: 64px; line-height: 64px; color: #fff; }
.cta__title .hero__char { opacity: 1; transform: none; transition: none; }   /* same letters as the hero heading; GSAP drives the entrance */
.cta__text { width: 70%; padding-bottom: 48px; text-align: center; font-size: 20px; line-height: 28px; font-weight: 400; }

/* CTA button: same hover as the hero buttons - the colours invert with a circular fill growing from the bottom edge */
.cta__inner .btn, .portfolio__all {
  position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--c-lime); --fill: var(--c-ink);
  transition: color .45s var(--ease-out) .05s, transform .4s var(--ease-out);
}
.cta__inner .btn::before, .portfolio__all::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 100%; width: 150%; aspect-ratio: 1; border-radius: 50%;
  background: var(--fill); transform: translate(-50%, -50%) scale(0);
  transition: transform .7s var(--ease-out);
}
.cta__inner .btn:hover, .portfolio__all:hover { color: var(--c-lime); }
.cta__inner .btn:hover::before, .cta__inner .btn:focus-visible::before, .portfolio__all:hover::before { transform: translate(-50%, -50%) scale(1.15); }
.portfolio__all:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 4px; }   /* keyboard / #view-all arrival: a ring, not the dark fill (its text would vanish) */
.cta__inner .btn:active, .portfolio__all:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .cta__inner .btn, .cta__inner .btn::before { transition-duration: .01ms; } }
.footer { width: 100%; padding: 70px 0 60px; color: #fff; }
.footer__container { width: 80%; margin: 0 auto; }
.footer__main { display: flex; justify-content: space-between; align-items: stretch; }
.footer__about { display: flex; flex-direction: column; gap: 23px; padding-bottom: 10px; }   /* 15px row gap + 8px inline-svg gap */
.footer__tagline { width: 228px; padding-top: 0; font-family: var(--f-body); font-size: 16px; line-height: 26px; font-weight: 400; color: #fff; }
.footer__links { display: flex; align-items: flex-start; }
.footer__col { padding-left: 60px; }
.footer__col h6 { color: #fff; letter-spacing: -.2px; text-transform: none; font-size: 18px; font-weight: 500; line-height: 32px; white-space: nowrap; }
.footer__col ul { display: flex; flex-direction: column; margin-top: 20px; font-size: 16px; line-height: 26px; letter-spacing: .32px; color: var(--c-muted); }
.footer__col a { display: block; padding-bottom: 10px; transition: color .25s; }   /* each link row = 26px + 10px, as the staging link boxes */
.footer__col a:hover { color: var(--c-lime); }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; padding: 40px 0 20px; }
.footer__copy { font-size: 16px; line-height: 27px; color: var(--c-muted); }
.footer__social { display: flex; }
.footer__social a { display: grid; place-items: center; width: 45px; height: 45px; transition: opacity .25s, transform .25s; }
.footer__social a:hover { opacity: .75; transform: translateY(-2px); }
.footer__rule { position: relative; height: .5px; background: var(--c-paper-2); opacity: .45; transition: opacity .35s ease; }   /* dim at rest, full on hover */
.footer__rule::after { content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }   /* taller hit area: the hairline itself is too thin to hover */
.footer__rule:hover { opacity: 1; }

@media (min-width: 1280px) {
  .cta-section { justify-content: space-around; gap: 120px; }
  .cta__inner { padding-top: 0; }
  .footer { padding-bottom: 0; }
}
@media (min-width: 1920px) {
  .cta-section { height: 1500px; background-position: 0 0, 50% 100%; }
  .cta__title { width: 50%; }
  .cta__text { width: 40%; margin-top: 10px; padding-bottom: 50px; }
  .footer__about { gap: 18px; }
  .footer__links { align-items: flex-start; }
  .footer__col ul { margin-top: 30px; }
  .footer__bottom { padding-bottom: 20px; }
}

/* ---------- Video cursor + modal -------------------------------------- */
.video-cursor-ball {
  position: fixed; left: 0; top: 0; z-index: 2000; pointer-events: none;
  display: grid; place-items: center; width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; background: rgb(33 29 29 / .82); backdrop-filter: blur(6px); color: #fff;
  font-size: 15px; font-weight: 500; text-align: center; line-height: 1.2;
  transform: scale(0); transition: transform .35s var(--ease-out);
}
.video-cursor-ball.is-visible { transform: scale(1); }

.video-modal {
  position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 5vh 4vw;
  background: rgb(33 29 29 / .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.video-modal.is-open { opacity: 1; visibility: visible; }
.video-modal__wrap { position: relative; width: min(1180px, 92vw); transform: translateY(14px) scale(.96); transition: transform .5s var(--ease-out); }
.video-modal.is-open .video-modal__wrap { transform: none; }
.video-modal__container {
  border-radius: 28px; overflow: hidden; background: #0b0a14;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 100px rgb(0 0 0 / .5);
}
.video-modal__close {
  position: absolute; top: -64px; right: 0; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-lime); color: var(--c-ink); cursor: pointer;
  transition: transform .3s var(--ease-out), background-color .2s;
}
.video-modal__close:hover { transform: rotate(90deg); background: #fff; }
.video-modal__close svg { width: 22px; height: 22px; }

/* ---- brand-styled player ---- */
.vplayer { position: relative; aspect-ratio: 16 / 9; background: #000; cursor: pointer; outline: 0; }
.vplayer:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; }
.vplayer:fullscreen video { object-fit: contain; }   /* whole frame in full screen, in either orientation (the card version crops to fill) */
.vplayer:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; }
.vplayer:-webkit-full-screen video { object-fit: contain; }
.vplayer video { display: block; width: 100%; height: 100%; object-fit: cover; }
.vplayer.is-idle:not(.is-paused) { cursor: none; }

.vplayer__center {
  position: absolute; left: 50%; top: 50%; width: 88px; height: 88px; margin: -44px 0 0 -44px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c-lime); color: var(--c-ink);
  box-shadow: 0 10px 40px rgb(0 0 0 / .35);
  transition: opacity .3s ease, transform .4s var(--ease-out);
}
.vplayer__center svg { width: 30px; height: 30px; margin-left: 4px; }
.vplayer__center:hover { transform: scale(1.06); }
.vplayer:not(.is-paused) .vplayer__center { opacity: 0; transform: scale(.8); pointer-events: none; }

.vplayer__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 14px;
  padding: 64px 24px 20px; cursor: default;
  background: linear-gradient(to top, rgb(33 29 29 / .9), rgb(33 29 29 / .55) 55%, transparent);
  transition: opacity .3s ease, transform .3s var(--ease-out);
}
.vplayer.is-idle:not(.is-paused):not(.is-seeking) .vplayer__bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.vplayer__btn {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; background: rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background-color .2s, color .2s, transform .25s var(--ease-out);
}
.vplayer__btn:hover { background: var(--c-lime); color: var(--c-ink); transform: scale(1.06); }
.vplayer__btn--main { background: var(--c-lime); color: var(--c-ink); }
.vplayer__btn--main:hover { background: #fff; }
.vplayer__time, .vplayer__dur { flex: none; min-width: 34px; font-size: 13px; line-height: 1; font-variant-numeric: tabular-nums; color: #fff; }
.vplayer__dur { color: rgb(255 255 255 / .65); text-align: right; }

.vplayer__track { position: relative; flex: 1; height: 24px; cursor: pointer; touch-action: none; outline: 0; }
.vplayer__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: rgb(255 255 255 / .22); }
.vplayer__buffer, .vplayer__fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; width: 0; }
.vplayer__buffer { background: rgb(255 255 255 / .3); }
.vplayer__fill { background: var(--c-lime); }
.vplayer__thumb {
  position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: var(--c-lime); box-shadow: 0 0 0 4px rgb(240 248 121 / .25); transform: scale(0); transition: transform .2s var(--ease-out);
}
.vplayer__track:hover .vplayer__thumb, .vplayer.is-seeking .vplayer__thumb, .vplayer__track:focus-visible .vplayer__thumb { transform: scale(1); }
.vplayer__track:hover::before, .vplayer__track:hover .vplayer__fill, .vplayer__track:hover .vplayer__buffer { height: 6px; margin-top: -3px; }
.vplayer button:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; }

@media (max-width: 767px) {
  .video-modal { padding: 4vh 3vw; }
  .video-modal__close { top: -56px; width: 42px; height: 42px; }
  .vplayer__bar { gap: 10px; padding: 48px 14px 14px; }
  .vplayer__btn { width: 36px; height: 36px; }
  .vplayer__dur { display: none; }
  .vplayer__center { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
}

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

@media (min-width: 1280px) {
  .hero__content { width: 85%; }
}
@media (min-width: 1920px) {
  .impact__head { margin-top: 120px; }
  .stats { gap: 100px; }
  .stat__num, .stat__unit { line-height: 75px; }      /* staging: 88px type on a 75px line */
  .hero__content { width: 84%; }
  .hero__eyebrow { font-size: 4.583vw; line-height: 1.143; }                 /* 88px @1920 */
  .hero__word { font-size: 5.2vw; line-height: 1.143; }   /* 100px @1920: bigger than the 88px heading, like on laptops; the widest name (ServiceNow partners) still clears the image grid by ~90px */
  .hero__content { margin-top: 80px; }
  .hero__lead { width: 70%; padding: 20px 0 40px; font-size: 18px; line-height: 26px; font-weight: 300; }
  .hero__actions { padding-top: 20px; }
  :root { --hero-h: 910px; }
  .features__wrap, .svc-card, .stats, .compare__scroll { max-width: 1700px; }
}

/* Laptops (MacBook 1440-1728px...): cap the hero paragraph like the 70% on large screens, so it stops well before the image grid */
@media (min-width: 992px) and (max-width: 1799px) {
  .hero__lead { max-width: min(560px, 44vw); }
  /* same proportions as the 1920 design (word ~1.13x the heading), ~10% smaller: 62px / 70px on a 1512 MacBook */
  .hero__eyebrow { font-size: 4.1vw; line-height: 1.143; }
  .hero__word { font-size: 4.65vw; line-height: 1.143; }
}

/* Typical full-HD desktops (1800-1919px wide: a 1920 screen with the scrollbar, 1904 windows...) get the large hero type of the 1920 design, so the heading is not a size smaller there */
@media (min-width: 1800px) and (max-width: 1919px) {
  .hero__content { width: 84%; margin-top: 80px; }
  .hero__eyebrow { font-size: 4.583vw; line-height: 1.143; }
  .hero__word { font-size: 5.2vw; line-height: 1.143; }
  .hero__lead { width: 70%; padding: 20px 0 40px; font-size: 18px; line-height: 26px; font-weight: 300; }
  .hero__actions { padding-top: 20px; }
  :root { --hero-h: 910px; }
}

@media (max-width: 991px) {
  :root { --hero-h: auto; }
  .hero-section { display: flex; flex-direction: column; height: auto; padding-top: 110px; padding-bottom: 0; }
  .hero__content { width: 90%; margin: 0 auto; text-align: center; }
  .hero__lead { margin: 0 auto; padding: 20px 0 30px; }
  .hero__actions { justify-content: center; padding-bottom: 20px; }
  .hero__rotator { text-align: center; }
  .hero__media { width: 95%; height: 560px; margin: 24px 0 0 16px; gap: 10px; }
  .hero__fade { height: 100%; }

  .features__title { width: 80%; font-size: 50px; margin-bottom: 40px; }
  .features__stack { padding-bottom: 60px; }
  .feature-card { position: relative; top: auto; grid-template-columns: 1fr; grid-template-rows: auto auto; height: auto; padding: 16px; margin-bottom: 20px; }
  .feature-card__media { width: 100%; height: 420px; }
  .feature-card__body { width: 85%; padding: 20px 0 30px; }
  .feature-card__heading { font-size: 35px; line-height: 35px; }

  .impact__title, .impact__sub { font-size: 40px; line-height: 50px; }
  .impact__sub { flex-direction: column; gap: 0; }
  .stats { grid-template-columns: 1fr; }

  .services__lines h4 { font-size: 40px; line-height: 50px; }
  .services__lines { gap: 0; width: 90%; }
  .services__stage { display: flex; flex-direction: column; align-items: center; gap: 32px; padding-bottom: 0 !important; margin-bottom: 70px !important; }
  .services__pin { position: static; height: auto; margin: 0; width: 92%; overflow: visible; pointer-events: auto; }
  .services__spacer { display: none; }
  .video-frame { position: relative; left: auto; top: auto; width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .services__slot { display: none; }

  .testimonials__intro { flex-basis: 30%; }
  .testimonials__title { font-size: 22px; line-height: 30px; }
  .testimonials__title strong { font-size: 24px; }
  .testimonials__tabs { gap: 20px; }
  .testimonial-card { flex-basis: 85%; }

  .compare-section { padding-top: 40px; }
  .compare__title, .compare__sub { width: 80%; margin-inline: auto; }

  .cta-section { height: auto; gap: 60px; padding: 80px 0 0; }
  .footer { margin-top: 0; }
  .cta__mark { width: 240px; height: 270px; margin-bottom: -50px; }
  .cta__mark img, .cta-mark { width: 240px; height: auto; }
  .cta__title { width: 80%; font-size: 40px; line-height: 50px; }
  .cta__text { width: 70%; }

  .footer { padding: 0 0 40px; }
  .footer__main { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
  .footer__about { align-items: center; }
  .footer__tagline { text-align: center; padding: 19px 0 25px; }
  .footer__links { flex-wrap: wrap; justify-content: center; padding-top: 0; }
  .footer__col { padding: 0 24px 24px; text-align: left; }
  .footer__bottom { flex-direction: column; gap: 10px; padding: 20px 0 10px; }
}

@media (max-width: 767px) {
  .hero__eyebrow { font-size: 3vw; min-height: 0; }
  .hero__eyebrow, .hero__word { line-height: 44px; }
  .hero__eyebrow { font-size: 28px; }
  .hero__word { font-size: 36px; }
  .hero__actions { flex-wrap: wrap; }
  .hero__media { height: 460px; }
  .hero__tile--s { height: 140px; }
  .hero__tile--l { height: 200px; }

  .clients-section { padding-top: 80px; }
  .clients__title { font-size: 20px; line-height: 32px; padding: 0 16px; }
  .logo-marquee__set { gap: 50px; padding-right: 50px; }

  .features__title { font-size: 40px; line-height: 46px; }
  .feature-card__media { height: 340px; }
  .feature-card__media-title { font-size: 30px; line-height: 36px; }
  .feature-card__label h5 { font-size: 28px; line-height: 35px; }
  .feature-card__heading { font-size: 30px; line-height: 35px; }
  .feature-card__lead { font-size: 14px; line-height: 20px; }
  .feature-card__text { font-size: 12px; line-height: 20px; }

  .impact__head { margin-top: 80px; }
  .stat__num, .stat__unit { font-size: 64px; line-height: 64px; }
  .stat__row { gap: 20px; }
  .portfolio-card { grid-template-columns: 1fr; height: auto; flex-basis: 85vw; padding-block: 16px; }
  .portfolio-card__media { height: 300px; }
  .portfolio-card__info { height: auto; gap: 16px; }

  .services__inner { margin: 80px 0; }

  .testimonials-section { padding: 80px 0; }
  .testimonials__head { flex-direction: column; gap: 24px; width: 92%; }
  .testimonials__intro { flex: none; width: 100%; }
  .testimonials__title { font-size: 24px; line-height: 32px; }
  .testimonials__title strong { font-size: 28px; }
  .testimonials__tabs { width: 100%; gap: 12px; justify-content: space-between; padding-top: 0; }
  .testi-tab { width: 22%; gap: 24px; }
  .testi-tab > img, .testi-tab .portfolio-card__logo { max-width: 100%; }
  .testimonials__viewport { width: 92%; margin: 0 auto; padding-left: 0; }
  .testimonial-card { flex-basis: 100%; height: auto; display: flex; flex-direction: column; padding-top: 24px; }
  .testimonial-card__copy { position: static; width: auto; margin: 0 30px; }
  .testimonial-card__title { font-size: 16px; line-height: 24px; }
  .testimonial-card__quote { font-size: 14px; }
  .testimonial-card__name { margin-top: 24px; font-size: 16px; }
  .testimonial-card__role { font-size: 14px; }
  .testimonial-card__visual { position: relative; inset: auto; height: 260px; margin-top: 16px; }
  .testimonial-card__person { height: 100%; width: 70%; right: 0; }
  .testimonial-card__shape { width: 70%; }

  .compare__title { font-size: 36px; line-height: 44px; }
  .compare__sub { font-size: 16px; line-height: 28px; }
  .compare__scroll { width: 92%; }

  .cta__title { width: 92%; font-size: 32px; line-height: 40px; }
  .cta__text { width: 88%; padding-bottom: 40px; }
  .footer__container { width: 90%; }
}

@media (max-width: 991px) {
  /* stacked card becomes a plain list: every panel visible, no pin, no image rotation */
  .svc { height: auto; }
  .svc-card { position: static; width: 92%; height: auto; display: flex; flex-direction: column; background: none; border-radius: 0; gap: 16px; overflow: visible; }
  .svc-text { margin: 0; display: flex; flex-direction: column; gap: 16px; }
  .svc-panel { position: static; opacity: 1; transform: none; pointer-events: auto; padding: 40px 28px; border-radius: 24px; background: var(--c-ink); }
  .svc-panel__title { font-size: 40px; line-height: 44px; }
  .svc-panel__pills { width: 100%; }
  .svc-panel__num { margin-top: 32px; }
  .svc-media { display: none; }
}

/* ==========================================================================
   Mobile / tablet refinements (v2)
   ========================================================================== */
@media (max-width: 991px) {
  .feature-card__media-inner { width: 90%; padding-bottom: 28px; }
  .feature-card__tags { gap: 8px; }
  .feature-card__tags .tag { width: auto; min-width: 100px; height: 38px; padding: 0 18px; font-size: 14px; }
  .stat__row { align-items: flex-start; }
  .compare-table { min-width: 720px; grid-auto-rows: 84px; }
  .compare-table > div { font-size: 14px; }
  .compare__scroll { -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .compare__scroll::after { content: ""; }
}
@media (max-width: 767px) {
  .stat__row { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
  .stat__text { max-width: 100%; }
  .stat__value { align-self: flex-start; }
  .feature-card { padding: 12px; border-radius: 22px; }
  .feature-card__body { width: 90%; }
  .feature-card__media { height: 300px; }
  .feature-card__media-title { font-size: 26px; line-height: 32px; }
  .features__title { width: 92%; }
  .impact__title, .impact__sub { font-size: 32px; line-height: 40px; }
  .stats { width: calc(100% - 40px); }
  .portfolio-card { flex-basis: 88vw; }
  .svc-panel { padding: 28px 22px; }
  .svc-panel__title { font-size: 34px; line-height: 38px; }
  .compare-section { padding-bottom: 64px; }
  .compare-table { min-width: 640px; grid-auto-rows: 72px; grid-template-columns: 1.6fr repeat(5, 1fr); }
  .cell--label { padding-left: 24px; font-size: 13px !important; }
  .cta-section { gap: 40px; padding-top: 64px; }
  .footer__col { padding: 0 18px 20px; }
}
@media (max-width: 479px) {
  .hero__eyebrow { font-size: 26px; }
  .hero__word { font-size: 32px; }
  .hero__actions .btn { padding-inline: 22px; }
  .features__title { font-size: 34px; line-height: 40px; }
  .testimonial-card__copy { margin: 0 22px; }
  .compare__title { font-size: 30px; line-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__track, .logo-marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}
@media (min-width: 600px) and (max-width: 991px) { .compare-table { min-width: 100%; } }

#view-all { scroll-margin-top: 45vh; }   /* target of the "Back to projects" links: the button lands mid-screen */

/* portfolio cards with a clip: the video fills the media box and zooms on hover like the picture cards */
.portfolio-card__media--video::before { display: none; }
.portfolio-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; transition: transform .9s var(--ease-out); }
.portfolio-card__media--video:hover .portfolio-card__video { transform: scale(1.09); }
.portfolio-card__wordmark { display: block; height: 22px; margin-bottom: 40px; font-family: var(--f-display); font-weight: 600; font-size: 22px; line-height: 22px; letter-spacing: -.01em; color: var(--c-ink); }
@media (prefers-reduced-motion: reduce) { .portfolio-card__video { transition: none; } }

/* picture logo in the logo slot (Figma: Caravel logo is 153 x 37) */
.portfolio-card__logo-img { display: block; width: 153px; height: 37px; margin: -7px 0 25px; pointer-events: none; }
/* other logos keep the size set on the <img> (Figma sizes), with the Figma 32px gap above the text */
.portfolio-card__logo-img--auto { width: auto; height: var(--logo-h, 22px); max-width: 100%; margin: 0 0 32px; }

/* ==========================================================================
   Mobile / tablet polish (v3): one 20px gutter, no overlapping chips, no clipped cards, tidy footer, readable copy
   ========================================================================== */
@media (max-width: 991px) {
  /* header: logo and menu button sit on the same 20px gutter as the page (the brand box used to be 35vw wide and centred its logo) */
  #site-header .wbs-container-2 { width: calc(100% - 40px); }
  #site-header .brand, #site-header .brand.w--current { width: auto; height: auto; padding-left: 0; justify-content: flex-start; }
  #site-header .wbs-menu-button-2 { margin-right: -10px; }

  .hero__content { width: calc(100% - 40px); }
  /* stacked feature cards: ~190px of empty space after the last card (wrap padding + margin + stack padding) is trimmed */
  .features__wrap { padding-bottom: 0; margin-bottom: 0; }
  .features__stack { padding-bottom: 24px; }

  /* service cards: the desktop icon chip / counter are absolutely placed on the pinned card; in the stacked list they sit inside every card */
  .svc-text .svc-panel { position: relative; }
  .svc-text .svc-panel__icon { position: static; width: 52px; height: 52px; border-radius: 12px; margin: 0 0 22px; }
  .svc-text .svc-panel__num { position: absolute; top: 28px; right: 22px; bottom: auto; left: auto; margin: 0; padding: 6px 14px; font-size: 12px; line-height: 16px; }

  /* portfolio rail: the track was a fixed 469px tall and cut the card text off; let it follow the card, and snap card by card */
  .portfolio__track { height: auto; align-items: stretch; }
  .portfolio-card { height: auto; }
  .portfolio__viewport { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
  .portfolio-card { scroll-snap-align: start; }

  /* footer: a clean two-column grid instead of centred, ragged columns */
  .footer__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 20px; width: 100%; padding-top: 8px; }
  .footer__col { padding: 0; text-align: left; }
}
@media (max-width: 767px) {
  .footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 420px; margin-inline: auto; }
  .cell--brand img { width: 74px; height: auto; }              /* the logo no longer touches the edges of its yellow header cell */
  .feature-card__text { font-size: 13.5px; line-height: 22px; } /* 12px was below comfortable reading size */
  .testimonial-card__quote { line-height: 24px; }
}

/* ==========================================================================
   Phones: the whole hero fits one screen. The picture columns become three horizontal rows (JS: "Hero image columns") that
   share whatever height the text leaves; copy, buttons and spacing are tightened so nothing is wasted.
   ========================================================================== */
@media (max-width: 767px) {
  .hero-section { min-height: 100vh; min-height: 100svh; padding-top: 84px; }       /* 72px header + 12px */
  .hero__content { margin-top: 0; }
  .hero__eyebrow { font-size: clamp(21px, 6.2vw, 27px); line-height: 1.22; min-height: 0; }
  .hero__word { font-size: clamp(27px, 8vw, 35px); line-height: 1.22; }
  .hero__lead { max-width: 36ch; margin-inline: auto; padding: 10px 0 16px; font-size: 13.5px; line-height: 20px; }
  .hero__actions { flex-wrap: nowrap; gap: 10px; padding: 0 0 18px; }
  .hero__actions .btn { flex: 1 1 0; width: auto; max-width: 168px; height: 44px; font-size: 16px; padding-inline: 8px; }

  .hero__media { flex: 1 1 auto; min-height: 270px; display: grid; grid-template-columns: none; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; height: auto; margin: 0; padding-bottom: 10px; }
  .hero__col { min-height: 0; touch-action: pan-y; }                  /* vertical swipes still scroll the page; sideways swipes drag the row */
  .hero__track { flex-direction: row; width: max-content; height: 100%; gap: 10px; }
  .hero__set { flex-direction: row; height: 100%; gap: 10px; }
  .hero__tile { flex: none; height: 100%; width: auto; aspect-ratio: 132 / 150; }
  .hero__tile--l { aspect-ratio: 196 / 150; }
  .hero__fade { inset: 0; height: 100%; background: linear-gradient(90deg, #211d1d, #8f8f8f00 14%, #80808000 86%, #211d1d); }
}

/* Phones: client logos a touch smaller (zoom on the <img> only, so the marquee still measures its real widths) and tighter vertical rhythm
   between the clients title, the two logo rows and the "Why Positiv" heading */
@media (max-width: 767px) {
  .clients-section { padding: 44px 0 16px; }
  .clients__title { font-size: 18px; line-height: 28px; margin-bottom: 10px; }
  .clients__title em { font-size: 21px; }
  .logo-marquee { height: 58px; }
  .logo-marquee__set { gap: 32px; padding-right: 32px; }
  .client-logo img, .client-logo__angel { zoom: .74; }
  .features-section { padding-top: 32px; }
  .features__title { margin-bottom: 28px; }
}

/* Phones: every heading uses the hero heading's size ("The embedded Creative team for"), so the page reads in one consistent type scale */
@media (max-width: 767px) {
  :root { --h-phone: clamp(21px, 6.2vw, 27px); }
  .hero__eyebrow,
  .clients__title, .clients__title em,
  .features__title, .features__title em,
  .feature-card__label h5, .feature-card__heading, .feature-card--purple .feature-card__heading,
  .impact__title, .impact__sub,
  .services__lines h4,
  .svc-panel__title,
  .testimonials__title, .testimonials__title strong,
  .compare__title,
  .cta__title { font-size: var(--h-phone); line-height: 1.24; }
  .clients__title { line-height: 1.4; }
  .features__title { margin-bottom: 24px; }
  .feature-card__label h5 { line-height: 1.24; }
  .impact__hl { font-size: 1em; line-height: inherit; }
  .footer__col h6 { white-space: normal; overflow-wrap: break-word; }
  .footer__col:last-child { grid-column: 1 / -1; }                         /* "Free tools & resources" gets its own full-width row, so its heading never runs out of a half column */
}

/* Phones: each "Why Positiv" card fills exactly one screen (below the fixed header), so a card is always seen whole while scrolling:
   the picture takes every pixel the text leaves (never less than 40% of the card) and the card name + icon sit on its foot over a dark fade;
   the body wrapper is dissolved so the label and the copy share the card grid. On short phones the long paragraph is dropped (as on short desktop windows). */
@media (max-width: 767px) {
  .feature-card { height: calc(100svh - 100px); min-height: 440px; grid-template-columns: 1fr; grid-template-rows: minmax(40%, 1fr) auto; margin-bottom: 16px; overflow: hidden; }
  .feature-card__media { grid-area: 1 / 1; align-self: stretch; width: 100%; height: auto; min-height: 0; }
  .feature-card__body { display: contents; }
  .feature-card__label { grid-area: 1 / 1; align-self: end; justify-self: stretch; position: relative; z-index: 2; margin: 0; padding: 48px 16px 14px; box-sizing: border-box;
    flex-direction: row; align-items: center; gap: 12px; background: linear-gradient(to top, rgb(20 20 19 / .74), rgb(20 20 19 / 0)); border-radius: 0 0 15px 15px; }
  .feature-card__label h5 { color: #fff; margin: 0; }
  .feature-card__icon { width: 44px; height: 44px; padding: 8px; }
  .feature-card__rule { display: none; }
  .feature-card__copy { grid-area: 2 / 1; align-self: start; justify-self: stretch; width: auto; margin: 14px 5% 6px; }
  .feature-card__heading, .feature-card--purple .feature-card__heading { margin-bottom: 8px; }
  .feature-card__lead { margin-bottom: 8px; }
  .feature-card__text { font-size: 13px; line-height: 20px; }
  .feature-card__copy .btn--block { height: 42px; margin-top: 14px; font-size: 14px; padding: 0 16px; white-space: nowrap; }   /* proportionate to the card copy instead of a 52px/16px block */
}
@media (max-width: 767px) and (max-height: 760px) {
  .feature-card__text { display: none; }
}

/* Phones: the "Output your reps love" block (title + four numbers) fits one screen: each stat becomes a compact row,
   the number on the left and its line on the right, with the spacing following the screen height. */
@media (max-width: 767px) {
  .impact__head { margin-top: clamp(28px, 6svh, 64px); }
  .impact__sub { min-height: 0; }
  .stats { width: calc(100% - 40px); margin: clamp(24px, 4.5svh, 44px) auto clamp(40px, 8svh, 80px); gap: clamp(10px, 2.2svh, 22px); }
  .stat__row, .stat__row:has(> div) { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 16px; }
  .stat__value { flex: 0 0 104px; justify-content: flex-start; }
  .stat__num, .stat__unit { font-size: clamp(40px, 12.5vw, 52px); line-height: 1; }
  .stat__text { flex: 1 1 auto; font-size: 13px; line-height: 19px; }
  .stat__link { margin-top: 6px; font-size: 13px; line-height: 20px; gap: 10px; }
  .stat__link svg { width: 18px; height: 18px; }
  .stat__rule { margin-top: clamp(10px, 2svh, 18px); }
  .impact-section { padding-bottom: 72px; }
}

/* Phones: the portfolio rail shows one card at a time (each card is a full screen wide and snaps into place),
   with a clearer progress bar and a small "swipe" cue under it so it is obvious the rail moves sideways. */
@media (max-width: 767px) {
  .portfolio__viewport { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .portfolio-card { flex: 0 0 100vw; box-sizing: border-box; padding: 20px 20px 24px; border-left: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  .portfolio__progress { flex-direction: column; align-items: center; gap: 14px; margin-top: 24px; }
  .portfolio__bar { width: 56%; max-width: 220px; height: 6px; background: rgb(255 255 255 / .22); }
  .portfolio__progress::after {
    content: "Swipe to see more"; display: inline-flex; align-items: center; gap: 10px;
    font-size: 13px; line-height: 18px; letter-spacing: .02em; color: rgb(255 255 255 / .75);
    animation: pc-swipe-cue 1.8s ease-in-out infinite;
  }
  .portfolio__all { margin-top: 28px; }
}
@keyframes pc-swipe-cue { 0%, 100% { transform: translateX(-6px); opacity: .55; } 50% { transform: translateX(6px); opacity: 1; } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .portfolio__progress::after { animation: none; } }

/* Phones: the four service cards stay stacked one under the other, and each one is as tall as the screen (below the fixed header),
   its content centred, so every card is seen whole while scrolling. */
@media (max-width: 767px) {
  .svc-card { gap: 16px; }
  .svc-text { gap: 16px; }
  .svc-text .svc-panel { min-height: calc(100svh - 100px); box-sizing: border-box; }
}

/* Phones: each service card gets its picture back, at the top of the card, and the Deliverables sit inside the picture
   (on a dark fade so they stay readable); the icon + name and "The work" text follow underneath. */
@media (max-width: 767px) {
  .svc-text .svc-panel {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: minmax(0, 1fr) auto auto; align-items: center;
    padding: 14px 14px 22px; column-gap: 14px;
  }
  .svc-text .svc-panel::before {
    content: ""; grid-area: 1 / 1 / 2 / -1; align-self: stretch; min-height: 180px; border-radius: 18px;
    background-size: cover; background-position: 62% 50%; background-repeat: no-repeat;
  }
  .svc-panel[data-service="brand"]::before     { background-image: linear-gradient(to top, rgb(20 20 19 / .9), rgb(20 20 19 / .4) 48%, transparent 75%), url("../assets/img/svc-brand-v2.webp"); }
  .svc-panel[data-service="sales"]::before     { background-image: linear-gradient(to top, rgb(20 20 19 / .9), rgb(20 20 19 / .4) 48%, transparent 75%), url("../assets/img/svc-sales.webp"); }
  .svc-panel[data-service="web"]::before       { background-image: linear-gradient(to top, rgb(20 20 19 / .9), rgb(20 20 19 / .4) 48%, transparent 75%), url("../assets/img/svc-web.webp"); }
  .svc-panel[data-service="marketing"]::before { background-image: linear-gradient(to top, rgb(20 20 19 / .9), rgb(20 20 19 / .4) 48%, transparent 75%), url("../assets/img/svc-marketing.webp"); }

  /* Deliverables inside the picture: the pills fill the same grid cell, pinned to its bottom, with their own small heading */
  .svc-text .svc-panel__pills {
    grid-area: 1 / 1 / 2 / -1; align-self: end; z-index: 1; width: auto; margin: 0; padding: 0 12px 14px; gap: 6px;
  }
  .svc-text .svc-panel__pills::before {
    content: "Deliverables"; flex: 0 0 100%; margin-bottom: 2px; color: rgb(239 239 235 / .8);
    font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase;
  }
  .svc-text .svc-label--deliv { display: none; }
  .svc-text .svc-pill {
    height: 30px; padding: 0 10px; font-size: 11.5px; border-color: rgb(239 239 235 / .55);
    background: rgb(20 20 19 / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .svc-text .svc-panel__num { top: 28px; right: 28px; z-index: 1; background: rgb(20 20 19 / .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

  .svc-text .svc-panel__icon { grid-area: 2 / 1; width: 44px; height: 44px; margin: 20px 0 0 8px; }
  .svc-text .svc-panel__title { grid-area: 2 / 2; margin: 20px 0 0; align-self: center; }
  .svc-text .svc-panel__work { grid-area: 3 / 1 / 4 / -1; margin: 14px 8px 0; }
}


/* ==========================================================================
   Phones: testimonials, the gap above them, and the compare table (turned on its side)
   ========================================================================== */
@media (max-width: 767px) {
  /* less empty space between the services card and the testimonials (was 80px + 80px) */
  .services__inner { margin-bottom: 16px; }

  /* testimonials: photo on top, compact text under it, the next card peeks in from the right (swipe hint), tabs get a 48px tap target.
     Knobs: --t-photo = photo height, --t-peek = how much of the next card shows. */
  .testimonials-section { --t-photo: 190px; --t-peek: 12%; padding: 40px 0 80px; }
  .testimonials__head { gap: 16px; margin-bottom: 24px; }
  .testimonials__viewport { width: 96%; margin: 0 0 0 4%; padding-left: 0; }
  .testimonial-card { position: relative; flex: 0 0 calc(100% - var(--t-peek)); height: auto; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
  .testimonial-card__visual { order: -1; position: relative; inset: auto; height: var(--t-photo); margin: 0; overflow: hidden; }
  .testimonial-card__shape { width: 100%; background-size: 300px; background-position: 72% 50%; }
  .testimonial-card__person { width: 66%; right: 3%; height: 100%; background-size: cover; background-position: 50% 12%; }
  .testimonial-card__copy { position: static; width: auto; margin: 0; padding: 22px 20px 22px; }
  .testimonial-card__logo { position: absolute; z-index: 4; left: 20px; top: calc(var(--t-photo) - 20px); width: 40px; height: 30px; }
  .testimonial-card__title { margin-top: 16px; font-size: 17px; line-height: 22px; }
  .testimonial-card__quote { margin-top: 6px; font-size: 13.5px; line-height: 21px; }
  .testimonial-card__rule { margin-top: 14px; width: 100%; }
  .testimonial-card__name { margin-top: 14px; font-size: 16px; line-height: 20px; }
  .testimonial-card__role { margin-top: 4px; font-size: 13px; line-height: 18px; }
  .testimonials__tabs { gap: 8px; }
  .testi-tab { padding: 6px 0 10px; min-height: 48px; }
  /* the Angel East logo (icon + word in a 124x22 box) keeps its proportions in the narrow tab, and its fade is applied once, not twice */
  .testi-tab .portfolio-card__logo { height: auto; aspect-ratio: 124 / 22; }
  .testi-tab .portfolio-card__logo img { opacity: 1; }

  /* compare table turned on its side: one row per option (Positiv first), one column per criterion. The cells come in the markup row by row
     (6 per row: label, Positiv, 4 others), so cell (row i, column j) is moved to (row j+1, column i+1). It scrolls sideways; the option names
     stay pinned and the yellow Positiv row is always in view. */
  .compare__scroll { border-radius: 18px; overflow-y: hidden; background: #262222; border: 1px solid rgb(255 255 255 / .12); }   /* the table reads as one rounded card */
  .compare-table { grid-template-columns: 112px repeat(3, 108px) 132px repeat(4, 108px); grid-template-rows: 76px repeat(5, 62px); grid-auto-rows: auto; width: max-content; min-width: 0; border-radius: 0; }   /* the 4th criterion ("Channel/ecosystem fluency") needs the wider column so the word is not split */
  .compare-table > div:nth-child(6n + 1) { grid-row: 1; }
  .compare-table > div:nth-child(6n + 2) { grid-row: 2; }
  .compare-table > div:nth-child(6n + 3) { grid-row: 3; }
  .compare-table > div:nth-child(6n + 4) { grid-row: 4; }
  .compare-table > div:nth-child(6n + 5) { grid-row: 5; }
  .compare-table > div:nth-child(6n) { grid-row: 6; }
  .compare-table > div:nth-child(-n + 6) { grid-column: 1; }
  .compare-table > div:nth-child(n + 7):nth-child(-n + 12) { grid-column: 2; }
  .compare-table > div:nth-child(n + 13):nth-child(-n + 18) { grid-column: 3; }
  .compare-table > div:nth-child(n + 19):nth-child(-n + 24) { grid-column: 4; }
  .compare-table > div:nth-child(n + 25):nth-child(-n + 30) { grid-column: 5; }
  .compare-table > div:nth-child(n + 31):nth-child(-n + 36) { grid-column: 6; }
  .compare-table > div:nth-child(n + 37):nth-child(-n + 42) { grid-column: 7; }
  .compare-table > div:nth-child(n + 43):nth-child(-n + 48) { grid-column: 8; }
  .compare-table > div:nth-child(n + 49):nth-child(-n + 54) { grid-column: 9; }
  .compare-table > div { border: 0 !important; border-right: .5px solid rgb(255 255 255 / .12) !important; border-bottom: .5px solid rgb(255 255 255 / .12) !important; border-radius: 0 !important; }
  .compare-table .cell--spacer { position: sticky; left: 0; z-index: 4; background: #2b2727; opacity: 1; }
  .compare-table .cell--brand, .compare-table .cell--col-head { position: sticky; left: 0; z-index: 3; justify-content: flex-start; padding: 0 10px 0 14px; text-align: left; font-size: 13px; line-height: 17px; box-shadow: 8px 0 12px -8px rgb(0 0 0 / .5); }
  .compare-table .cell--brand { border-radius: 0 !important; box-shadow: none; }   /* square: the rounded frame clips it, so no dark notches at the corners */
  .compare-table .cell--brand img { width: 68px; height: auto; }
  .compare-table > div.cell--label { position: static; justify-content: center !important; padding: 6px; text-align: center; background: #2b2727; border-top: 0 !important; border-left: 0 !important; border-right: 0 !important; }   /* the criteria row is a tinted header band */
  .compare-table .cell--label .cell__txt { overflow-wrap: break-word; font-size: 11.5px; line-height: 15px; letter-spacing: -.1px; }
  .compare-table > div:nth-child(6n) { border-bottom: 0 !important; }       /* no line under the last option row */
  .compare-table > div:nth-child(n + 49) { border-right: 0 !important; }    /* none after the last criterion column */
  .compare-table .cell--us { border-right: .5px solid rgb(57 57 57 / .15) !important; }
}

/* ==========================================================================
   Phones: footer - left-aligned brand block, a hairline, then the four link groups in a tidy 2x2 grid (lime caps headings, 34px tap rows),
   and a bottom bar with the copyright on the left and the social icons on the right.
   ========================================================================== */
@media (max-width: 767px) {
  .footer .footer__container { width: 88%; }
  .footer .footer__main { align-items: stretch; text-align: left; gap: 26px; }
  .footer .footer__about { align-items: flex-start; gap: 14px; padding-bottom: 0; }
  .footer .footer__about img { width: 124px; height: auto; }
  .footer .footer__tagline { width: auto; max-width: 31ch; padding: 0; text-align: left; font-size: 14px; line-height: 22px; opacity: .9; }
  .footer .footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; width: 100%; max-width: none; margin: 0; padding: 24px 0 0; border-top: 1px solid rgb(255 255 255 / .14); }
  .footer .footer__links .footer__col { grid-column: auto; padding: 0; text-align: left; min-width: 0; }   /* "Free tools & resources" now sits in the grid too (its heading wraps) */
  .footer .footer__col h6 { display: flex; align-items: flex-end; min-height: 36px; white-space: normal; margin: 0; font-size: 13px; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: #f0f879; }
  .footer .footer__col ul { margin-top: 10px; }
  .footer .footer__col a { padding: 7px 0; font-size: 14px; line-height: 20px; letter-spacing: 0; }
  .footer .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 0 12px; margin-top: 4px; }
  .footer .footer__copy { font-size: 12.5px; line-height: 18px; }
  .footer .footer__social a { width: 38px; height: 38px; }
}

/* Phones: less empty space above the CTA mark (was 64 + 64 + 100px), more room under the "Book a call" button before the footer (40 -> 72px) */
@media (max-width: 767px) {
  .section.cta-section { padding-top: 24px; }
  .cta-section .cta__inner { padding-top: 40px; padding-bottom: 32px; }
  .cta-section .cta__title { font-size: var(--h-phone); line-height: 1.24; }                  /* same size as the other section headings */
  .cta-section .cta__text { width: 84%; font-size: 14px; line-height: 22px; padding-bottom: 28px; }   /* the paragraph was 20px - as big as the heading */
}

/* Phones: the "Why Positiv" cards sit 16px apart (was 16px margin + the 76.8px desktop gap = 93px) */
@media (max-width: 767px) {
  .features__wrap { gap: 0; }
  .features__stack { padding-bottom: 8px; }
}

/* ==========================================================================
   Touch screens: no blue tap rectangle (Webflow's html.w-mod-touch * sets rgba(51,181,229,.4); the menu rows had a grey one) - a press is
   shown by the element itself instead: buttons shrink a touch, links / list rows / menu rows / tabs fade, social icons shrink.
   ========================================================================== */
@media (hover: none) and (pointer: coarse) {
  * { -webkit-tap-highlight-color: transparent !important; }
  .btn, .btn--block, .vplayer__btn { transition: transform .18s cubic-bezier(.22, 1, .36, 1), opacity .18s ease, background-color .25s, color .25s; }
  .btn:active, .portfolio__all:active { transform: scale(.97); }
  a:not(.btn):active, button:not(.btn):not(.w-nav-button):active, .testi-tab:active, .w-dropdown-toggle:active, .w-dropdown-link:active { opacity: .6; }
  .footer__social a:active { transform: scale(.9); opacity: .8; }
}

/* ---------- Scroll reveal (pricing page + home page; js/reveal.js adds .is-in) ----------
   One motion everywhere: the block fades up 28px over .9s; siblings are staggered .12s via --d. */
.js .pr-reveal:not(.is-done) { transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
.js .pr-reveal:not(.is-in) { opacity: 0; transform: translateY(28px); }
@media (prefers-reduced-motion: reduce) { .js .pr-reveal:not(.is-in) { opacity: 1; transform: none; } .js .pr-reveal:not(.is-done) { transition: none; } }
/* home: the "Brand. Sales. / Web. Marketing." lines hold the video's landing slot, which js/main.js measures, so they fade
   without the 28px rise */
.js .services__lines.pr-reveal:not(.is-in) { transform: none; }

/* round "View" cursor (js/cursor.js): a lime circle replaces the pointer over [data-cursor] elements */
.view-cursor { position: fixed; left: 0; top: 0; z-index: 2000; width: 160px; height: 160px; margin: -80px 0 0 -80px; pointer-events: none; transform: scale(0); will-change: transform; transition: opacity .25s ease; opacity: 0; color: var(--c-lime); }
.view-cursor.is-on { opacity: 1; }
.view-cursor__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: vc-spin 12s linear infinite; }
.view-cursor__ring text { fill: var(--c-lime); font: 600 14px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: .08em; }
.view-cursor__dot { position: absolute; left: 50%; top: 50%; width: 78px; height: 78px; margin: -39px 0 0 -39px; display: grid; place-items: center; border-radius: 50%; box-sizing: border-box; background: var(--c-lime); color: var(--c-ink); }
.view-cursor__dot svg { width: 30px; height: 30px; }
@keyframes vc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .view-cursor__ring { animation: none; } }
@media (hover: hover) and (pointer: fine) { .cursor-view, .cursor-view * { cursor: none !important; } }

/* Caravel testimonial picture on tablets and phones (a tight cut-out, so it is contained, not cropped) */
@media (max-width: 991px) { .testimonials-section .testimonial-card__person--5 { left: auto; right: 0; width: 70%; height: 100%; background-size: contain; background-position: 50% 100%; } }
@media (max-width: 767px) { .testimonials-section .testimonial-card__person--5 { right: 3%; width: 66%; height: 100%; background-size: contain; background-position: 50% 100%; } }
@media (max-width: 991px) { .testimonials-section :is(.testimonial-card__person--light-node, .testimonial-card__person--mansour, .testimonial-card__person--nabil) { left: auto; right: 0; width: 70%; height: 100%; background-size: contain; background-position: 50% 100%; } }
@media (max-width: 767px) { .testimonials-section :is(.testimonial-card__person--light-node, .testimonial-card__person--mansour, .testimonial-card__person--nabil) { right: 3%; width: 66%; height: 100%; background-size: contain; background-position: 50% 100%; } }

/* Footer (Nov 2026): Services, Expertise and Referral Program have no page yet, so they sit dim grey, not clickable and with no hover colour.
   The copyright line carries the Privacy and Terms links. */
.footer__col a:not([href]) { color: rgb(142 142 142 / .45); cursor: default; pointer-events: none; }
.footer__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 28px; }
.footer__legal { display: flex; gap: 24px; font-size: 16px; line-height: 27px; color: var(--c-muted); }
.footer__legal a { transition: color .25s; }
.footer__legal a:hover { color: var(--c-lime); }
.footer__legal a:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 3px; }
@media (max-width: 767px) {
  .footer .footer__meta { flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer .footer__legal { gap: 18px; font-size: 12.5px; line-height: 18px; }
}
@media (min-width: 992px) { .footer__col a[href="/creative-team"], .footer__col a[href="/foundation"] { white-space: nowrap; } }   /* laptops and up: the two pricing links stay on one line */
.footer__col { padding-left: clamp(40px, 4vw, 60px); }   /* a little less space between columns on smaller laptops, so the four groups fit */
@media (min-width: 992px) and (max-width: 1279px) {   /* small laptops: brand block on top, the four link groups spread across the full width */
  .footer__main { flex-direction: column; gap: 40px; }
  .footer__links { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; width: 100%; }
  .footer__col { padding-left: 0; }
}

/* "Run the savings math" (Nov 2026): brand yellow text and arrow. Hover underlines the text and slides the arrow 4px;
   while the link is on screen the arrow nudges right and back, rests and repeats (main.js toggles .is-nudge). No movement with reduced motion. */
.stat__link { color: var(--c-lime); }
.stat__link:hover { color: var(--c-lime); }
.stat__link-txt { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color .2s ease; }
.stat__link:hover .stat__link-txt, .stat__link:focus-visible .stat__link-txt { text-decoration-color: currentColor; }
.stat__link svg { transition: transform .2s ease; }
.stat__link:hover svg, .stat__link:focus-visible svg { transform: translateX(4px); }
.stat__link:focus-visible { outline: 2px solid var(--c-lime); outline-offset: 4px; border-radius: 4px; }
.stat__link.is-nudge svg { animation: statNudge 1.8s ease-in-out .3s infinite both; }   /* nudge right and back, rest, repeat */
.stat__link.is-nudge:hover svg { animation: none; }
@keyframes statNudge { 0%, 46%, 100% { transform: translateX(0); } 23% { transform: translateX(6px); } }   /* ~0.8s move, ~1s rest */
@media (prefers-reduced-motion: reduce) {
  .stat__link svg { transition: none; }
  .stat__link:hover svg, .stat__link:focus-visible svg { transform: none; }
  .stat__link.is-nudge svg { animation: none; }
}
.stat__link { gap: 6px; }   /* the arrow sits close after the text (its icon already has ~5px of space on the left) */
@media (max-width: 767px) { .stat__link { gap: 5px; } }
.nowrap { white-space: nowrap; }   /* keeps a hyphenated word like "in-house" on one line */
.stat__link { font-weight: 400; }   /* a step bolder than the 300 body text around it */

/* ===================================================================

   Tablets and foldables (768-991px): the testimonials use the phone layout (photo on top, text under it, next card peeking in).
   The desktop layout needs a card about 1000px wide: below that the portrait covered the quote and the title ran under the logo tabs.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .testimonials-section { --t-photo: 300px; --t-peek: 12%; padding: 60px 0 80px; }
  .testimonials__head { flex-direction: column; gap: 20px; width: 92%; margin-bottom: 28px; }
  .testimonials__intro { flex: none; width: 100%; }
  .testimonials__title strong { white-space: normal; }
  .testimonials__tabs { width: 100%; gap: 12px; justify-content: space-between; padding-top: 0; }
  .testimonials__viewport { width: 96%; margin: 0 0 0 4%; padding-left: 0; }
  .testimonial-card { position: relative; flex: 0 0 calc(100% - var(--t-peek)); height: auto; padding: 0; display: flex; flex-direction: column; overflow: hidden; }
  .testimonial-card__visual { order: -1; position: relative; inset: auto; height: var(--t-photo); margin: 0; overflow: hidden; }
  .testimonial-card__shape { width: 100%; background-size: 380px; background-position: 72% 50%; }
  .testimonial-card__person { width: 56%; right: 6%; height: 100%; background-size: cover; background-position: 50% 12%; }
  .testimonials-section .testimonial-card__person--5, .testimonials-section :is(.testimonial-card__person--light-node, .testimonial-card__person--mansour, .testimonial-card__person--nabil) { left: auto; right: 6%; width: 56%; height: 100%; background-size: contain; background-position: 50% 100%; }
  .testimonial-card .testimonial-card__copy, .testimonial-card[data-card="2"] .testimonial-card__copy { position: static; width: auto; margin: 0; padding: 28px 32px 30px; display: block; }
  .testimonial-card__logo { position: absolute; z-index: 4; left: 32px; top: calc(var(--t-photo) - 22px); width: 48px; height: 36px; }
  .testimonial-card__title { margin-top: 18px; }
  .testimonial-card__quote { margin-top: 8px; }
  .testimonial-card__rule { margin-top: 18px; width: 100%; }
  .testimonial-card__name { margin-top: 16px; }
  .testimonial-card__role { margin-top: 4px; }
}

/* Phones: a "Why Positiv" card is one screen tall when its text fits, and grows when the type scale makes the text taller than that
   (it used to be a fixed height with hidden overflow, which cut the last lines and the button on 360x780 and 320x568 phones). */
@media (max-width: 767px) {
  .feature-card { height: auto; min-height: max(440px, calc(100svh - 100px)); grid-template-rows: minmax(220px, 1fr) auto; }
}
=======
/* Main buttons (Nov 2026): one size and weight everywhere. 18px regular on desktop and tablet, 16px regular on phones.
   Covers the pill buttons in page content (.btn, Creative Team page .ct-btn, contact FAQ button) and the phone menu's button.
   The :not(#_) only raises priority above the older per-section sizes (14, 15, 16, 17px) without !important.
   The fit quiz and the calculator pop-ups get the same sizes in fit-quiz.css and roi-calculator.css. The header bar's small pill is not a main button. */
:is(.btn, .ct-btn, .faq-side__btn, .mobile-menu-cta):not(#_) { font-size: 18px; font-weight: 400; }
@media (max-width: 767px) { :is(.btn, .ct-btn, .faq-side__btn, .mobile-menu-cta):not(#_) { font-size: 16px; } }
@media (max-width: 359px) { .feature-card__copy .btn--block:not(#_) { padding: 0 4px; } }   /* the smallest phones: the longer card labels keep 16px and fit */

/* The compare table scrolls sideways by touch / trackpad / shift-wheel, but shows no scrollbar (a bar under the card read as a stray shape). */
.compare__scroll { scrollbar-width: none; }
.compare__scroll::-webkit-scrollbar { display: none; }

/* ---------- lazy backgrounds (below the fold) ----------
   The big pictures of the sections under the hero are CSS backgrounds, which the browser downloads at once even when they are far
   below the screen (about 3.3 MB on the home page, all competing with the first paint). They are switched off here until their
   section is within one screen of the viewport: js/main.js then adds .is-near to the [data-section] element and the original rules
   apply again, unchanged. Only with JS on (html.js); without JS nothing is hidden. The hero and the clients strip are not touched. */
html.js [data-section]:not(.is-near) .feature-card--yellow .feature-card__media,
html.js [data-section]:not(.is-near) .feature-card--purple .feature-card__media,
html.js [data-section]:not(.is-near) .feature-card--white .feature-card__media,
html.js [data-section]:not(.is-near) .feature-card--orange .feature-card__media,
html.js [data-section]:not(.is-near) .portfolio-card__media,
html.js [data-section]:not(.is-near) .testimonial-card__shape--a,
html.js [data-section]:not(.is-near) .testimonial-card__shape--b,
html.js [data-section]:not(.is-near) .testimonial-card__shape--c,
html.js [data-section]:not(.is-near) .testimonial-card__person--1,
html.js [data-section]:not(.is-near) .testimonial-card__person--2,
html.js [data-section]:not(.is-near) .testimonial-card__person--3,
html.js [data-section]:not(.is-near) .testimonial-card__person--4,
html.js [data-section]:not(.is-near) .testimonial-card__person--5,
html.js [data-section]:not(.is-near) .testimonial-card__person--light-node,
html.js [data-section]:not(.is-near) .testimonial-card__person--mansour,
html.js [data-section]:not(.is-near) .testimonial-card__person--nabil,
html.js [data-section]:not(.is-near) .svc-tile,
html.js [data-section]:not(.is-near) .svc-panel[data-service="brand"]::before,
html.js [data-section]:not(.is-near) .svc-panel[data-service="sales"]::before,
html.js [data-section]:not(.is-near) .svc-panel[data-service="web"]::before,
html.js [data-section]:not(.is-near) .svc-panel[data-service="marketing"]::before { background-image: none !important; }
html.js .cta-section:not(.is-near) { background-image: none !important; background-color: var(--c-ink) !important; }   /* its text is white: keep the dark base under it until the picture is allowed */