/* ==========================================================================
   Collibri — styles
   Design source: Figma "Collibri.dev" (Homepage 1:2, service states 26:56,
   27:586, 27:598, 27:611, project cards 26:2, 26:3, 27:6).
   Palette in the file is exactly: #000, #fff, #f9f9f9, #fafafa.
   ========================================================================== */

:root {
  --black: #000;
  --white: #fff;
  --surface: #f9f9f9;       /* Our services background */
  --ref-surface: 250 250 250; /* #fafafa reference cards */

  --font: "Funnel Display", system-ui, -apple-system, "Segoe UI", sans-serif;

  --page: 1280px;           /* Figma frame width */
  --gutter: clamp(16px, 5.5vw, 71px);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: 1.1s;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 300;
  color: var(--black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;               /* clip (not hidden) keeps position: sticky working */
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
:focus-visible { outline: 2px solid var(--black); outline-offset: 4px; }

/* Custom cursor: a dot that sits on the pointer + a ring that trails it
   with easing (JS). `difference` blending keeps it legible on white, black
   and video. Mouse / trackpad only; the native cursor comes back while the
   video pop-up (top layer) is open. */
@media (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  html.has-cursor:has(dialog[open]), html.has-cursor:has(dialog[open]) * { cursor: auto !important; }
}
.cursor-dot, .cursor-ring {
  position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none;
  border-radius: 50%; mix-blend-mode: difference;
  opacity: 0; transition: opacity .3s ease;
  will-change: transform;
}
.cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: #fff; }
.cursor-ring { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
.cursor-ring::after {                        /* scale this, not the positioned box */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid #fff;
  transition: transform .45s var(--ease-out), background-color .3s ease;
}
.cursor-dot::after { content: ""; }
html.cursor-visible .cursor-dot, html.cursor-visible .cursor-ring { opacity: 1; }
html.cursor-hover .cursor-ring::after { transform: scale(1.7); background: #fff; }
html.cursor-hover .cursor-dot { opacity: 0; }
html.cursor-down .cursor-ring::after { transform: scale(.75); }
html.cursor-hover.cursor-down .cursor-ring::after { transform: scale(1.45); }
html:has(dialog[open]) .cursor-dot, html:has(dialog[open]) .cursor-ring { opacity: 0; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--black); color: var(--white); padding: 10px 16px;
  transition: top .3s var(--ease-out);
}
.skip:focus { top: 16px; }

/* --------------------------------------------------------------------------
   Reveal system (fly-ins). JS adds .is-in when element enters the viewport.
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transition:
    opacity var(--dur) var(--ease-out) var(--d, 0s),
    transform var(--dur) var(--ease-out) var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translate3d(0, 48px, 0); }
[data-reveal="left"]  { transform: translate3d(-64px, 0, 0); }
[data-reveal="right"] { transform: translate3d(64px, 0, 0); }
[data-reveal="scale"] { transform: scale(.86); }
[data-reveal="fade"]  { transform: translate3d(0, 24px, 0); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
/* Only transforms + opacity animate here (no layout) so scrolling stays smooth.
   At the top the bar is transparent and its content is pushed down so the
   logo sits at y=63 like in Figma; once scrolled it becomes a compact bar. */
.header {
  --bar-h: 76px;
  --top-offset: 48.5px;               /* (63 - (76-47)/2) */
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--bar-h);
  transform: translate3d(0, 0, 0);
  transition: transform .55s var(--ease-out);
}
.header::before {
  content: ""; position: absolute; inset: 0;
  background: rgb(255 255 255 / .9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: 0 1px 0 rgb(0 0 0 / .06);
  opacity: 0; transition: opacity .4s ease;
}
.header__inner {
  position: relative; height: 100%;
  max-width: var(--page); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 81px;
  transform: translate3d(0, var(--top-offset), 0);
  transition: transform .6s var(--ease-out);
}
.header.is-scrolled::before { opacity: 1; }
.header.is-scrolled .header__inner { transform: translate3d(0, 0, 0); }
.header.is-hidden { transform: translate3d(0, -100%, 0); }

.header .logo, .header .nav, .header .menu-btn {
  opacity: 0; transform: translateY(-16px);
  transition: opacity 1s var(--ease-out) .2s, transform 1s var(--ease-out) .2s;
}
.is-loaded .header .logo, .is-loaded .header .nav, .is-loaded .header .menu-btn { opacity: 1; transform: none; }
.is-loaded .header .nav { transition-delay: .35s; }

/* Logo frame 165x47: mark at 0,0 (45x47), wordmark at 17,11.6 (148x33) */
.logo { position: relative; display: block; width: 165px; height: 47px; flex: none; }
.logo__mark { position: absolute; left: 0; top: 0; width: 45.2px; height: 46.95px; }
.logo__word { position: absolute; left: 17px; top: 11.6px; width: 147.9px; height: 33.2px; }

.nav { display: flex; gap: 46px; font-size: 20px; line-height: 37px; font-weight: 300; }
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.menu-btn { display: none; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; min-height: 44px; }
.menu-btn__icon { position: relative; width: 22px; height: 10px; }
.menu-btn__icon i {
  position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor;
  transition: transform .45s var(--ease-out), top .45s var(--ease-out);
}
.menu-btn__icon i:first-child { top: 0; }
.menu-btn__icon i:last-child { top: 8.5px; }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { top: 4.25px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { top: 4.25px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--white);
  display: flex; align-items: flex-end;
  padding: 0 var(--gutter) calc(48px + env(safe-area-inset-bottom));
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s var(--ease-in-out);
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); }
.mobile-menu nav { display: flex; flex-direction: column; gap: 6px; }
.mobile-menu a {
  font-size: 40px; line-height: 1.15; font-weight: 500;
  opacity: 0; transform: translateY(30px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.mobile-menu.is-open a { opacity: 1; transform: none; }
.mobile-menu.is-open a:nth-child(1) { transition-delay: .25s; }
.mobile-menu.is-open a:nth-child(2) { transition-delay: .32s; }
.mobile-menu.is-open a:nth-child(3) { transition-delay: .39s; }
.mobile-menu.is-open a:nth-child(4) { transition-delay: .46s; }

/* --------------------------------------------------------------------------
   Hero — video with the Figma radial vignette (node 3:213)
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: clamp(560px, 54.45vw, 100svh);   /* 697 / 1280 */
  max-width: 1920px; margin: 0 auto;
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; }
.hero__video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);                 /* no opacity:0 — iOS won't autoplay an invisible video */
  transition: transform 2.4s var(--ease-out);
}
.is-loaded .hero__video { transform: scale(1); }
/* Based on the Figma radial (ellipse = box, white at the rim), with the clear
   centre widened so the video reads better. The ellipse now matches the hero
   box exactly, and a linear fade guarantees pure white at the bottom edge,
   so there is no visible seam into the next section. */
.hero__vignette {
  position: absolute; inset: -1px; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 0) 78%, rgb(255 255 255 / 1) 100%),
    /* smaller than the box, nudged up-right away from the bottom-left headline */
    radial-gradient(ellipse var(--vig-size, 45% 47%) at var(--vig-pos, 53% 44%),
      rgb(255 255 255 / 0) 0%,
      rgb(255 255 255 / 0) 52%,
      rgb(255 255 255 / .16) 68%,
      rgb(255 255 255 / .5) 82%,
      rgb(255 255 255 / .9) 94%,
      rgb(255 255 255 / 1) 100%);
}
.hero__title {
  position: absolute; left: max(69px, calc(50% - 571px)); bottom: 66px;
  font-size: 40px; line-height: 45px; font-weight: 500;
}
.hero__line { display: block; overflow: hidden; padding-bottom: 2px; }
.hero__line > span {
  display: inline-block; transform: translateY(105%);
  transition: transform 1.2s var(--ease-out);
}
.is-loaded .hero__line > span { transform: none; }
.is-loaded .hero__line:nth-child(1) > span { transition-delay: .45s; }
.is-loaded .hero__line:nth-child(2) > span { transition-delay: .57s; }
.is-loaded .hero__line:nth-child(3) > span { transition-delay: .69s; }

/* --------------------------------------------------------------------------
   Intro row (13:25): CTA 487x97 + paragraph 584w, gap 68
   -------------------------------------------------------------------------- */
.intro {
  max-width: var(--page); margin: 5px auto 0;
  padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 68px;
}
.cta {
  flex: none; position: relative; overflow: hidden;
  width: 487px; height: 97px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 43px 0 39px;
  border: 1px solid var(--black);
  font-size: 30px; line-height: 37px; font-weight: 500;
  isolation: isolate;
}
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--black); transform: scaleX(0); transform-origin: right;
  transition: transform .6s var(--ease-out);
}
.cta span, .cta__arrow { transition: color .4s ease, filter .4s ease, transform .6s var(--ease-out); }
.cta__arrow { width: 20px; height: 20px; }
@media (hover: hover) {
  .cta:hover::before { transform: scaleX(1); transform-origin: left; }
  .cta:hover span { color: var(--white); }
  .cta:hover .cta__arrow { filter: invert(1); transform: translateX(8px); }
}
.cta:active { transform: scale(.985); }
.intro__text { width: 584px; max-width: 100%; font-size: 20px; line-height: 26px; }

/* --------------------------------------------------------------------------
   Our services (13:28 + states). Desktop keeps Figma geometry:
   corner labels, content row 391 | 107 | 97 | 107 | 416 at y=168.
   -------------------------------------------------------------------------- */
/* Theme: each service click flips the section between light and dark.
   Everything inside draws from --svc-bg / --svc-fg so it cross-fades together. */
.services {
  --svc-bg: var(--surface); --svc-fg: var(--black);
  background: var(--svc-bg); color: var(--svc-fg);
  margin-top: 95px;
  transition: background-color .9s var(--ease-in-out), color .9s var(--ease-in-out);
}
.services :focus-visible { outline-color: currentColor; }
.services .svc-stage__bird img,
.services .svc-acc__head img { transition: filter .9s var(--ease-in-out), transform 1s var(--ease-out); }

.services__inner {
  position: relative; max-width: var(--page); margin: 0 auto;
  height: 525px; padding: 36px 91px 40px 71px;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.services__tabs { display: contents; }
.svc-tab {
  position: relative; justify-self: start;
  font-size: 25px; line-height: 45px; font-weight: 500;
  min-height: 44px; text-align: left;
}
.svc-tab--tl { grid-area: 1 / 1; }
.svc-tab--tr { grid-area: 1 / 1; justify-self: end; text-align: right; }
.svc-tab--bl { grid-area: 3 / 1; }
.svc-tab--br { grid-area: 3 / 1; justify-self: end; text-align: right; }
/* Active underline: 1px black, ~6px below the text line (27:4, 27:597 …) */
.svc-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0);
  transform-origin: left; transition: transform .7s var(--ease-out);
}
.svc-tab--tr::after, .svc-tab--br::after { transform-origin: right; }
.svc-tab[aria-selected="true"]::after { transform: scaleX(1); }
/* Inactive labels are dimmed so the four corners read as tabs */
.svc-tab { color: var(--black); }
.svc-tab[aria-selected="false"] { color: rgb(0 0 0 / .35); }
.services__tabs .svc-tab.is-in {   /* keep the fly-in transition, add colour */
  transition: opacity var(--dur) var(--ease-out) var(--d, 0s), transform var(--dur) var(--ease-out) var(--d, 0s), color .5s ease;
}
@media (hover: hover) {
  .svc-tab[aria-selected="false"]:hover { color: var(--black); }
  .svc-tab:not([aria-selected="true"]):hover::after { transform: scaleX(.35); }
}
/* Autoplay progress: the active underline fills over 7s, then JS advances */
.services.is-auto .svc-tab[aria-selected="true"]::after {
  transform: scaleX(0);
  animation: svc-progress 7s linear forwards;
}
.services.is-paused .svc-tab::after { animation-play-state: paused; }
@keyframes svc-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Intro "loading": before the first service opens, the bird fills bottom-up
   over 5s from a faint silhouette. Same pause rules as the autoplay. */
.svc-stage__bird { position: relative; }
.svc-bird-fill { position: absolute; left: 0; top: 0; opacity: 0; }
.services.is-loading .svc-stage__bird img:first-child { opacity: .12; transition: opacity .6s ease; }
.services.is-loading .svc-bird-fill {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
  animation: svc-fill 5s cubic-bezier(.45, .05, .55, .95) forwards;
}
.services.is-paused .svc-bird-fill { animation-play-state: paused; }
@keyframes svc-fill { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

.svc-stage {
  grid-area: 2 / 1; align-self: center;
  display: grid;
  grid-template-columns: 391fr 97px 416fr;
  column-gap: clamp(24px, 8.36vw, 107px);
  align-items: center;
  width: 100%; max-width: 1118px;
}
.svc-stage__media {
  grid-column: 1; position: relative;
  aspect-ratio: 391 / 188; overflow: hidden;
}
.svc-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0; transform: translateX(-40px) scale(1.06);
  clip-path: inset(0 100% 0 0);
  transition:
    opacity .5s ease,
    transform 1.1s var(--ease-out),
    clip-path .9s var(--ease-out);
}
/* AI systems: image is flipped horizontally in Figma (rotate 180 + flipY) */
.svc-img--mirror { transform: translateX(-40px) scale(-1.06, 1.06); }
/* Websites & Visuals: stretched fill showing the bottom 86% = cover + bottom */
.svc-img--bottom { object-position: 50% 100%; }
.svc-img.is-active { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
.svc-img--mirror.is-active { transform: scaleX(-1); }
.svc-img.is-leaving {
  opacity: 0; clip-path: inset(0 0 0 100%);
  transition: opacity .6s ease .1s, clip-path .6s var(--ease-in-out), transform .6s var(--ease-in-out);
}

.svc-stage__bird { grid-column: 2; width: 97px; }
.svc-stage__bird img {
  width: 96.8px; height: 100.55px;
  transition: transform 1s var(--ease-out);
}
.svc-stage.has-active .svc-stage__bird img { transform: rotate(-6deg) scale(.96); }

.svc-stage__text { grid-column: 3; display: grid; }
.svc-stage__text p {
  grid-area: 1 / 1; align-self: center;
  font-size: 20px; line-height: 42px;
  opacity: 0; transform: translateX(40px);
  transition: opacity .5s ease, transform .9s var(--ease-out);
  pointer-events: none;
}
.svc-stage__text p.is-active {
  opacity: 1; transform: none; pointer-events: auto;
  transition-delay: .12s;
}
.svc-stage__text p.is-leaving { opacity: 0; transform: translateX(-24px); transition-duration: .35s, .5s; }



/* --------------------------------------------------------------------------
   Why us — sticky heading on the left, three statements on the right.
   The statement crossing the middle of the viewport is "active"; the others
   are dimmed. Progress rail 01/02/03 mirrors the active one.
   -------------------------------------------------------------------------- */
.why {
  max-width: var(--page); margin: 95px auto 0; padding: 0 var(--gutter);
  display: grid; grid-template-columns: 5fr 7fr; gap: 64px;
}
.why__sticky { position: sticky; top: calc(50vh - 150px); padding-bottom: 40px; }
.why__title { font-size: 64px; line-height: 64px; font-weight: 500; letter-spacing: -.01em; }
.why__progress { list-style: none; padding: 0; margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.why__progress li {
  display: flex; align-items: center; gap: 14px;
  font-size: 14px; line-height: 20px; opacity: .3;
  transition: opacity .5s ease;
}
.why__progress li::after {
  content: ""; height: 1px; width: 64px; background: var(--black);
  transform: scaleX(.35); transform-origin: left;
  transition: transform .8s var(--ease-out);
}
.why__progress li.is-active { opacity: 1; }
.why__progress li.is-active::after { transform: scaleX(1); }

.why__list { display: flex; flex-direction: column; }
.why__item {
  position: relative;
  min-height: 42vh; padding: 36px 0 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.why__item::before {                      /* top rule, grows when active */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--black); opacity: .15;
}
.why__item::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--black); transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease-out);
}
.why__item.is-active::after { transform: scaleX(1); }
.why__num { font-size: 14px; line-height: 20px; margin-bottom: 14px; }
.why__item h3 { font-size: 64px; line-height: 70px; font-weight: 500; letter-spacing: -.01em; }
.why__item p { margin-top: 16px; max-width: 460px; font-size: 20px; line-height: 32px; }
.why__num, .why__item h3, .why__item p {
  opacity: .22;
  transition: opacity .7s ease, transform .9s var(--ease-out);
}
.why__item h3 { transform: translateX(-6px); }
.why__item.is-active .why__num,
.why__item.is-active h3,
.why__item.is-active p { opacity: 1; transform: none; }
.why__item.is-active p { transition-delay: .08s; }

/* --------------------------------------------------------------------------
   Projects carousel (27:465): cards 823x459, gap 45, active centred
   -------------------------------------------------------------------------- */
.projects { margin-top: 95px; overflow: hidden; }
.projects__track {
  --card-w: min(823px, 88vw);
  --gap: 45px;
  position: relative;
  height: calc(var(--card-w) * 459 / 823);
  touch-action: pan-y;
  user-select: none;
}
.project {
  position: absolute; top: 0; left: 50%;
  width: var(--card-w); height: 100%;
  margin-left: calc(var(--card-w) / -2);
  overflow: hidden;
  transform: translateX(calc(var(--rel, 0) * (var(--card-w) + var(--gap))));
  transition: transform 1s var(--ease-out), opacity .6s ease;
  cursor: pointer;
}
.project.no-anim { transition: none; }
.project.is-active { cursor: default; }
.project__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  transition: transform 1.4s var(--ease-out);
  pointer-events: none;
}
.project.is-active .project__img { transform: scale(1); }
.project__ui {
  position: relative; height: 100%;
  padding: 23px 29px 24px;
  display: flex; flex-direction: column; justify-content: space-between;
  color: var(--white);
}
.project__head h3 { font-size: 32px; line-height: 45px; height: 55px; display: flex; align-items: center; font-weight: 600; }
.project__head li { font-size: 14px; line-height: 35px; height: 35px; }
.project__foot { display: flex; align-items: flex-end; justify-content: space-between; }
.project__arrows { display: flex; gap: 11px; }
.arrow-btn {
  width: 31px; height: 31px; background: var(--white); border: 1px solid var(--black);
  display: grid; place-items: center;
  transition: transform .4s var(--ease-out), background-color .3s ease;
  position: relative;
}
.arrow-btn::after { content: ""; position: absolute; inset: -7px; } /* 45px touch target */
.arrow-btn img { width: 20px; height: 20px; }
.arrow-btn--prev img { transform: scaleX(-1); }
@media (hover: hover) {
  .arrow-btn:hover { transform: translateX(3px); }
  .arrow-btn--prev:hover { transform: translateX(-3px); }
}
.project__btn {
  height: 47px; display: inline-flex; align-items: center;
  padding: 0 43px 0 39px;
  background: var(--white); color: var(--black); border: 1px solid var(--black);
  font-size: 16px; line-height: 37px; font-weight: 500;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color .4s ease;
}
.project__btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--black);
  transform: translateY(101%); transition: transform .5s var(--ease-out);
}
@media (hover: hover) {
  .project__btn:hover { color: var(--white); }
  .project__btn:hover::before { transform: none; }
}
/* Inactive cards: image only (as in the Homepage frame) */
.project .project__head, .project .project__foot {
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s ease, transform .8s var(--ease-out);
}
.project .project__foot { transform: translateY(-14px); }
.project.is-active .project__head,
.project.is-active .project__foot { opacity: 1; transform: none; transition-delay: .35s; }
.project:not(.is-active) .project__ui { pointer-events: none; }

/* --------------------------------------------------------------------------
   References (27:632): cards 361x215, gap 17, radial #fafafa overlay
   -------------------------------------------------------------------------- */
.refs { max-width: var(--page); margin: 95px auto 0; padding: 0 var(--gutter); }
.refs__title { text-align: center; font-size: 40px; line-height: 45px; font-weight: 500; }

/* Bento: 6 columns, 3 rows. Feature quote (black) 4x2, image, quotes, CTA. */
.bento {
  margin-top: 45px;
  display: grid; gap: 17px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(210px, auto)) minmax(230px, auto);
  grid-template-areas:
    "f f f f i i"
    "f f f f a a"
    "b b c c d d";
}
.bento > :nth-child(1) { grid-area: f; }
.bento > :nth-child(2) { grid-area: i; }
.bento > :nth-child(3) { grid-area: a; }
.bento > :nth-child(4) { grid-area: b; }
.bento > :nth-child(5) { grid-area: c; }
.bento > :nth-child(6) { grid-area: d; }

.bento__tile {
  position: relative; overflow: hidden;
  background: var(--surface);
  padding: 28px 28px 26px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 22px;
}
.bento__mark {
  display: block; height: 34px;
  font-size: 64px; line-height: 64px; font-weight: 800;
  transition: transform .8s var(--ease-out);
}
.bento__tile blockquote { font-size: 17px; line-height: 28px; flex: 1; }
.bento__tile figcaption { display: flex; flex-direction: column; }
.bento__tile strong { font-size: 20px; line-height: 30px; font-weight: 500; }
.bento__tile figcaption span { font-size: 14px; line-height: 22px; }
.bento__tile figcaption::before {
  content: ""; display: block; width: 36px; height: 1px; background: currentColor; margin-bottom: 14px;
  transform-origin: left; transition: transform .8s var(--ease-out);
}

.bento__tile--feature { background: var(--black); color: var(--white); padding: 44px 48px 40px; }
.bento__tile--feature .bento__mark { font-size: 120px; line-height: 110px; height: 70px; }
.bento__tile--feature blockquote { font-size: 30px; line-height: 42px; font-weight: 300; max-width: 620px; display: flex; align-items: center; }
.bento__tile--feature strong { font-size: 24px; }
.bento__tile--feature figcaption span { font-size: 15px; }

.bento__tile--image { padding: 0; }
.bento__tile--image img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%;
  transition: transform 1.6s var(--ease-out);
}

.bento__tile--cta {
  background: var(--white); border: 1px solid var(--black);
  isolation: isolate;
}
.bento__tile--cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--black);
  transform: translateY(101%); transition: transform .7s var(--ease-out);
}
.bento__cta-text { font-size: 36px; line-height: 42px; font-weight: 500; transition: color .4s ease; }
.bento__cta-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 18px; font-weight: 500; transition: color .4s ease;
}
.bento__cta-row img { transition: transform .6s var(--ease-out), filter .4s ease; }

@media (hover: hover) {
  .bento__tile:not(.bento__tile--cta):hover .bento__mark { transform: translateY(-4px) rotate(-4deg); }
  .bento__tile:hover figcaption::before { transform: scaleX(1.8); }
  .bento__tile--image:hover img { transform: scale(1.06); }
  .bento__tile--cta:hover::before { transform: none; }
  .bento__tile--cta:hover .bento__cta-text, .bento__tile--cta:hover .bento__cta-row { color: var(--white); }
  .bento__tile--cta:hover .bento__cta-row img { filter: invert(1); transform: translateX(8px); }
}

/* --------------------------------------------------------------------------
   Founders — editorial rows. On entry (.is-in): top rule draws across,
   photo opens with a circular reveal, text + skills cascade (--i stagger).
   -------------------------------------------------------------------------- */
.founders { max-width: var(--page); margin: 95px auto 0; padding: 0 var(--gutter); }
.founders__title { font-size: 40px; line-height: 45px; font-weight: 500; }
.founders__rows { margin-top: 40px; }
.frow {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr);
  column-gap: 40px; align-items: start;
  padding: 36px 0 40px;
  isolation: isolate;
}
.frow:last-child { border-bottom: 1px solid rgb(0 0 0 / .12); }
.frow::before {                                 /* top rule draws in */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--black);
  transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out);
}
.frow::after {                                  /* hover wash */
  content: ""; position: absolute; inset: 0 calc(-1 * var(--gutter) / 2); z-index: -1;
  background: var(--surface); opacity: 0; transition: opacity .5s ease;
}
.frow.is-in::before { transform: scaleX(1); }
@media (hover: hover) {
  .frow:hover::after { opacity: 1; }
  .frow:hover .frow__photo img:not(.frow__ph) { transform: scale(1.08); }
}

.frow__who { display: flex; align-items: center; gap: 18px; }
.frow__photo {
  position: relative; flex: none; width: 76px; height: 76px; border-radius: 50%; overflow: hidden;
  background: var(--surface); display: grid; place-items: center;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1s var(--ease-out) .2s;
}
.frow:hover .frow__photo { background: #eee; }
.frow.is-in .frow__photo { clip-path: circle(50% at 50% 50%); }
.frow__photo > img:not(.frow__ph) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.frow__ph { width: 40%; height: auto; opacity: .18; }
.frow__who h3 { font-size: 24px; line-height: 30px; font-weight: 500; }
.frow__role { margin-top: 2px; font-size: 14px; line-height: 20px; color: rgb(0 0 0 / .55); }
.frow__bio { font-size: 17px; line-height: 28px; }
.frow__mail { display: inline-block; margin-top: 16px; position: relative; font-size: 15px; font-weight: 500; }
.frow__mail::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform-origin: left; transition: transform .5s var(--ease-out);
}
@media (hover: hover) { .frow__mail:hover::after { transform: scaleX(0); transform-origin: right; } }

.frow__skills { display: flex; flex-direction: column; }
.frow__skills li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 7px 0; border-bottom: 1px solid rgb(0 0 0 / .1);
  font-size: 15px; line-height: 20px;
}
.frow__skills li:first-child { padding-top: 0; }
.frow__skills span { font-size: 11px; color: rgb(0 0 0 / .45); min-width: 18px; }

/* cascade */
.frow__in, .frow__skills li {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity .7s ease calc(.15s + var(--i) * 80ms), transform .9s var(--ease-out) calc(.15s + var(--i) * 80ms);
}
.frow__skills li { transform: translate3d(16px, 0, 0); }
.frow.is-in .frow__in, .frow.is-in .frow__skills li { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .frow { grid-template-columns: 1fr; row-gap: 18px; padding: 26px 0 30px; }
  .frow::after { display: none; }
  .frow__photo { width: 64px; height: 64px; }
  .frow__who h3 { font-size: 22px; line-height: 28px; }
  .frow__bio { font-size: 16px; line-height: 26px; }
  .frow__skills { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .frow__skills li { padding: 6px 12px; border: 1px solid var(--black); font-size: 13px; line-height: 18px; }
  .frow__skills li:first-child { padding-top: 6px; }
  .frow__skills span { display: none; }
}

/* --------------------------------------------------------------------------
   Contact (27:669): phone | gap 114 | title ExtraBold 40 | email
   -------------------------------------------------------------------------- */
.contact {
  max-width: var(--page); margin: 95px auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: center; gap: 114px;
  scroll-margin-top: 30vh;
}
.contact__title { font-size: 40px; line-height: 45px; font-weight: 800; white-space: nowrap; }
.contact__link { font-size: 24px; line-height: 45px; white-space: nowrap; position: relative; }
.contact__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease-out);
}
@media (hover: hover) { .contact__link:hover::after { transform: scaleX(1); transform-origin: left; } }
.contact.is-highlight .contact__title { animation: pulse 1.2s var(--ease-out); }
@keyframes pulse {
  0% { transform: scale(1); }
  35% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Footer (32:117): black, 369h, columns at x=299 y=60, gap 151
   -------------------------------------------------------------------------- */
.footer { background: var(--black); color: var(--white); }
.footer__cols {
  max-width: var(--page); margin: 0 auto; min-height: 369px;
  padding: 60px var(--gutter) calc(60px + env(safe-area-inset-bottom));
  display: flex; gap: 151px; align-items: flex-start; justify-content: center;
}
.footer__col { display: flex; flex-direction: column; }
/* White Collibri symbol as an extra column, top-aligned with the column headings
   (heading line box is 45px; the ~41px mark is centred in it) */
.footer__mark { align-self: flex-start; flex: none; margin-top: 2px; }
.footer__mark img { width: 40px; height: auto; filter: brightness(0) invert(1); }
.refs__dots { display: none; }
.footer__h { font-size: 20px; line-height: 45px; font-weight: 600; margin-bottom: 7px; }
.footer__col a { font-size: 16px; line-height: 45px; opacity: .92; transition: opacity .3s ease, transform .5s var(--ease-out); }
@media (hover: hover) { .footer__col a:hover { opacity: 1; transform: translateX(4px); } }

/* --------------------------------------------------------------------------
   Video pop-up (Miele)
   -------------------------------------------------------------------------- */
.vmodal {
  /* fit the 1536x960 video inside the viewport, leaving room for the caption */
  width: min(1200px, calc(100vw - 48px), calc((100svh - 110px) * 1.6)); max-width: none; max-height: none;
  padding: 0; border: 0; background: transparent; color: var(--white);
  overflow: visible;
  opacity: 0; transform: translateY(24px) scale(.96);
  transition: opacity .45s ease, transform .7s var(--ease-out),
              overlay .45s allow-discrete, display .45s allow-discrete;
}
.vmodal[open] { opacity: 1; transform: none; }
@starting-style { .vmodal[open] { opacity: 0; transform: translateY(24px) scale(.96); } }
.vmodal::backdrop {
  background: rgb(0 0 0 / 0);
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background-color .45s ease, backdrop-filter .45s ease,
              overlay .45s allow-discrete, display .45s allow-discrete;
}
.vmodal[open]::backdrop { background: rgb(0 0 0 / .86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@starting-style { .vmodal[open]::backdrop { background: rgb(0 0 0 / 0); backdrop-filter: blur(0); } }
.vmodal__frame { position: relative; }
.vmodal__video {
  width: 100%; aspect-ratio: 1536 / 960;
  background: var(--black); object-fit: cover;
}
.vmodal__caption { margin-top: 14px; font-size: 16px; line-height: 24px; }
.vmodal__caption strong { font-weight: 600; }
.vmodal__close {
  position: absolute; right: 12px; top: 12px; z-index: 1;
  width: 44px; height: 44px; border: 1px solid rgb(255 255 255 / .6);
  background: rgb(0 0 0 / .45);
  display: grid; place-items: center;
  transition: background-color .3s ease, transform .5s var(--ease-out);
}
.vmodal__close span, .vmodal__close span::after {
  display: block; width: 18px; height: 1.5px; background: var(--white);
  transform: rotate(45deg); transition: background-color .3s ease;
}
.vmodal__close span::after { content: ""; transform: rotate(90deg); }
@media (hover: hover) {
  .vmodal__close:hover { background: var(--white); transform: rotate(90deg); }
  .vmodal__close:hover span, .vmodal__close:hover span::after { background: var(--black); }
}
@media (max-width: 767px) {
  .vmodal { width: calc(100vw - 24px); }
  .vmodal__caption { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   Cookie consent banner + info dialog
   -------------------------------------------------------------------------- */
.consent {
  position: fixed; z-index: 60; left: 24px; bottom: 24px; max-width: 420px;
  background: var(--white); color: var(--black);
  border: 1px solid var(--black); padding: 20px 22px;
  box-shadow: 0 12px 40px rgb(0 0 0 / .12);
  opacity: 0; transform: translateY(24px);
  transition: opacity .5s ease, transform .7s var(--ease-out);
}
.consent.is-in { opacity: 1; transform: none; }
.consent p { font-size: 14px; line-height: 22px; }
.consent__more { font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.consent__actions { display: flex; gap: 10px; margin-top: 16px; }
.consent__btn {
  flex: 1; height: 44px; border: 1px solid var(--black);
  font-size: 15px; font-weight: 500; transition: background-color .3s ease, color .3s ease;
}
.consent__btn--primary { background: var(--black); color: var(--white); }
@media (hover: hover) {
  .consent__btn:hover { background: var(--black); color: var(--white); }
  .consent__btn--primary:hover { background: var(--white); color: var(--black); }
}
.footer__link { font-size: 16px; line-height: 45px; color: var(--white); opacity: .92; text-align: left; }
.cookie-info {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100svh - 48px);
  border: 1px solid var(--black); padding: 32px 30px 28px; color: var(--black);
}
.cookie-info::backdrop { background: rgb(0 0 0 / .5); }
.cookie-info h2 { font-size: 26px; line-height: 32px; font-weight: 500; margin-bottom: 14px; }
.cookie-info h3 { font-size: 16px; font-weight: 600; margin: 18px 0 6px; }
.cookie-info p { font-size: 15px; line-height: 24px; }
.cookie-info a { text-decoration: underline; text-underline-offset: 3px; }
.cookie-info code { font-size: 13px; background: var(--surface); padding: 1px 4px; }
.cookie-info__close { position: absolute; right: 12px; top: 10px; }
.cookie-info__close button { width: 40px; height: 40px; font-size: 26px; line-height: 1; }
@media (max-width: 767px) {
  .consent { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); max-width: none; }
  .footer__link { font-size: 15px; line-height: 36px; text-align: center; }
}

/* ==========================================================================
   Tablet  (768–1199)
   ========================================================================== */
@media (max-width: 1199px) {
  .header { --top-offset: 26px; }
  .header__inner { padding: 0 var(--gutter); }
  .intro { gap: 40px; }
  .cta { width: auto; flex: 0 1 420px; height: 84px; font-size: 26px; gap: 24px; }
  .services__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
  .svc-stage { grid-template-columns: 1fr 72px 1fr; }
  .svc-stage__bird, .svc-stage__bird img { width: 72px; height: auto; }
  .svc-stage__text p { font-size: 18px; line-height: 32px; }
  .why { gap: 40px; }
  .why__title { font-size: 52px; line-height: 54px; }
  .why__item h3 { font-size: 48px; line-height: 54px; }
  .footer__cols { padding-left: var(--gutter); justify-content: center; gap: clamp(40px, 6vw, 96px); }
  .footer__mark img { width: 40px; }
}

/* Services: accordion below 900px (desktop corner layout above) */
.svc-acc { display: none; }
@media (max-width: 899px) {
  .services__inner { height: auto; display: block; padding: 44px var(--gutter) 36px; }
  .services__tabs, .svc-stage { display: none; }
  .svc-acc { display: block; }
  .svc-acc__head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
  .svc-acc__head img { width: 34px; height: auto; }
  .svc-acc__title { font-size: 28px; line-height: 34px; font-weight: 500; }
  .svc-acc__item { border-top: 1px solid currentColor; transition: border-color .9s var(--ease-in-out); }
  .svc-acc__item:last-child { border-bottom: 1px solid currentColor; }
  .svc-acc__btn {
    width: 100%; min-height: 68px; padding: 14px 0;
    display: grid; grid-template-columns: 34px 1fr 28px; align-items: center; gap: 8px;
    text-align: left; -webkit-tap-highlight-color: transparent;
  }
  .svc-acc__num { font-size: 13px; line-height: 1; font-weight: 300; opacity: .6; }
  .svc-acc__label { font-size: 22px; line-height: 28px; font-weight: 500; }
  /* plus -> minus */
  .svc-acc__icon {
    position: relative; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%;
    transition: background-color .4s ease, transform .6s var(--ease-out);
  }
  .svc-acc__icon::before, .svc-acc__icon::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px;
    background: var(--svc-fg); transition: transform .5s var(--ease-out), background-color .4s ease;
  }
  .svc-acc__icon::after { transform: rotate(90deg); }
  .svc-acc__btn[aria-expanded="true"] .svc-acc__icon { background: var(--svc-fg); transform: rotate(180deg); }
  .svc-acc__btn[aria-expanded="true"] .svc-acc__icon::before,
  .svc-acc__btn[aria-expanded="true"] .svc-acc__icon::after { background: var(--svc-bg); }
  .svc-acc__btn[aria-expanded="true"] .svc-acc__icon::after { transform: rotate(0deg); }

  .svc-acc__panel {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .7s var(--ease-out);
  }
  .svc-acc__panel.is-open { grid-template-rows: 1fr; }
  .svc-acc__body { min-height: 0; overflow: hidden; }
  .svc-acc__body img {
    width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
    clip-path: inset(0 100% 0 0); transform: scale(1.06);
    transition: clip-path .9s var(--ease-out) .1s, transform 1.2s var(--ease-out) .1s;
  }
  .svc-acc__body img.is-bottom { object-position: 50% 100%; }
  .svc-acc__body img.is-mirror { transform: scale(-1.06, 1.06); }
  .svc-acc__body p {
    padding: 16px 0 24px; font-size: 16px; line-height: 26px;
    opacity: 0; transform: translateY(12px);
    transition: opacity .5s ease .2s, transform .8s var(--ease-out) .2s;
  }
  .svc-acc__panel.is-open img { clip-path: inset(0 0 0 0); transform: none; }
  .svc-acc__panel.is-open img.is-mirror { transform: scaleX(-1); }
  .svc-acc__panel.is-open p { opacity: 1; transform: none; }

  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas: "f f" "i a" "b c" "d d";
  }
  .bento__tile--image { min-height: 220px; }
  .bento__tile--feature blockquote { font-size: 24px; line-height: 34px; }
}

/* ==========================================================================
   Mobile (<768)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --dur: .9s; }
  [data-reveal="left"]  { transform: translate3d(-32px, 0, 0); }
  [data-reveal="right"] { transform: translate3d(32px, 0, 0); }
  [data-reveal="up"]    { transform: translate3d(0, 32px, 0); }

  .header { --bar-h: 60px; --top-offset: 6px; }
  .header__inner { padding: 0 var(--gutter); }
  .logo { transform-origin: left center; width: 124px; height: 35px; }
  .logo__mark { width: 34px; height: 35.3px; }
  .logo__word { left: 12.8px; top: 8.7px; width: 111.2px; height: 25px; }
  .nav { display: none; }
  .menu-btn { display: inline-flex; }

  /* Hero = full first screen: only the video and the headline */
  .hero { height: 100svh; min-height: 520px; }
  /* Mobile: radial, but wider than the screen (sides cropped, stay clear);
     it fades out under the header at the top and ends above the headline */
  .hero__vignette { --vig-size: 110% 38%; --vig-pos: 50% 41%; }
  .hero__title { left: var(--gutter); right: var(--gutter); bottom: 28px; font-size: 32px; line-height: 38px; }

  .intro { flex-direction: column; align-items: stretch; gap: 22px; margin-top: 36px; }
  .intro__text { order: -1; }
  .cta { flex: none; width: 100%; height: 68px; padding: 0 22px; font-size: 22px; }
  .intro__text { width: auto; font-size: 17px; line-height: 25px; }

  .services { margin-top: 56px; }

  /* Mobile: no sticky, no dimming — plain numbered stack */
  .why { grid-template-columns: 1fr; gap: 20px; margin-top: 56px; }
  .why__sticky { position: static; padding: 0; }
  .why__title { font-size: 40px; line-height: 42px; }
  .why__progress { display: none; }
  .why__item { min-height: 0; padding: 22px 0 26px; }
  .why__item::after { transform: scaleX(1); transition: none; }
  .why__item:first-child::before, .why__item:first-child::after { display: none; }
  .why__item:first-child { padding-top: 4px; }
  .why__num, .why__item h3, .why__item p { opacity: 1; transform: none; }
  .why__num { margin-bottom: 6px; }
  .why__item h3 { font-size: 32px; line-height: 38px; }
  .why__item p { margin-top: 8px; font-size: 16px; line-height: 26px; }

  .projects { margin-top: 56px; }
  .projects__track { --card-w: calc(100vw - 2 * var(--gutter) - 20px); --gap: 12px; height: calc(var(--card-w) * 1.02); }
  .project__img { object-position: 50% 62%; }
  .project__ui { padding: 16px; }
  .project__head h3 { font-size: 24px; line-height: 30px; height: auto; }
  .project__ui::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 45%; z-index: -1; pointer-events: none;
    background: linear-gradient(rgb(0 0 0 / .38), rgb(0 0 0 / 0));
    opacity: 0; transition: opacity .6s ease;
  }
  .project__ui { z-index: 0; }
  .project.is-active .project__ui::before { opacity: 1; }
  .project__head ul { margin-top: 2px; font-size: 13px; line-height: 20px; }
  .project__head li { display: inline; font-size: inherit; line-height: inherit; height: auto; }
  .project__head li:not(:last-child)::after { content: "\00a0\00b7  "; /* nbsp keeps dot on the line, trailing space allows the break */ }
  .project__btn { height: 42px; padding: 0 18px; font-size: 15px; }
  .arrow-btn { width: 36px; height: 36px; }

  .founders { margin-top: 56px; }
  .founders__title { font-size: 32px; line-height: 38px; }

  .refs { margin-top: 56px; }
  .refs__title { font-size: 32px; line-height: 38px; }
  /* Mobile: quotes only, in a swipeable row that bleeds to the screen edges */
  .bento {
    position: relative;   /* offsetParent for the dot maths */
    display: flex; gap: 12px; margin: 24px calc(-1 * var(--gutter)) 0;
    padding: 0 var(--gutter) 4px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .bento::-webkit-scrollbar { display: none; }
  .bento__tile--image, .bento__tile--cta { display: none; }
  .bento__tile {
    flex: 0 0 84%; scroll-snap-align: start;
    padding: 24px 22px; gap: 16px;
    opacity: 1 !important; transform: none !important;   /* off-screen tiles never "enter" the viewport */
  }
  .bento__tile--feature { padding: 24px 22px; }
  .bento__tile--feature .bento__mark { font-size: 64px; line-height: 64px; height: 34px; }
  .bento__tile--feature blockquote { font-size: 19px; line-height: 29px; }
  .bento__tile--feature strong { font-size: 20px; }
  .refs__dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .refs__dots button {
    position: relative; width: 22px; height: 3px; background: rgb(0 0 0 / .18);
    transition: background-color .3s ease, width .5s var(--ease-out);
  }
  .refs__dots button::after { content: ""; position: absolute; inset: -14px -4px; } /* touch target */
  .refs__dots button[aria-current="true"] { width: 40px; background: var(--black); }

  .contact { flex-direction: column; gap: 6px; margin: 64px auto; text-align: center; scroll-margin-top: 20vh; }
  .contact__title { order: -1; font-size: 34px; margin-bottom: 10px; }
  .contact__link { font-size: 20px; line-height: 40px; }

  .footer__cols {
    min-height: 0; flex-direction: column; align-items: center; text-align: center; gap: 30px;
    padding: 48px var(--gutter) calc(48px + env(safe-area-inset-bottom));
  }
  .footer__col { align-items: center; }
  .footer__mark { align-self: center; margin-top: 0; }
  .footer__mark img { width: 36px; }
  .footer__h { font-size: 18px; line-height: 36px; margin-bottom: 2px; }
  .footer__col a { font-size: 15px; line-height: 36px; }
  @media (hover: hover) { .footer__col a:hover { transform: none; } }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; transition-delay: 0s !important; }
  [data-reveal], .hero__line > span, .header .logo, .header .nav, .header .menu-btn { opacity: 1; transform: none; }
  .hero__video { opacity: 1; transform: none; }
}