@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Inter:wght@300;400;500;600&display=swap");
@font-face {
  font-family: "Medium";
  src: url("/fonts/medium.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
} /* ========================================================= ROOT / TOKENS ========================================================= */
html {
  scrollbar-gutter: stable;
}
:root {
  --font-display: "Medium", sans-serif;
  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-jet: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --bg: #070707;
  --orange: #ff6b00;
  --orange-rgb: 255 107 0;
  --purple: #8a2be2;
  /* --ink: #4d4b4c; */
  --text-main: #f2f2f2;
  --text-muted: #7e7e7e; /* AA ok op #070707 */
  --text-ghost: #3b393a;
  --grid: var(--orange);
  --line-w: 2px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ratio: calc(1920 / 1080);
  --logo-ratio: 8582 / 4000;
  --intro-logo-ratio: 7504 / 4000;
  --vh: 100vh;
  --leftGap: clamp(56px, 4vw, 96px);
  --rightGap: clamp(72px, 5vw, 120px);
  --bottomGap: clamp(28px, 3vh, 40px);
  --navZoneH: clamp(44px, 5vh, 64px);
  --topbar-h: var(--navZoneH);
  --navH: var(--navZoneH);
  --usableW: calc(100vw - var(--leftGap) - var(--rightGap));
  --usableH: calc(var(--vh) - var(--navZoneH) - var(--bottomGap));
  --frameH: min(calc(var(--usableW) / var(--ratio)), var(--usableH));
  --frameW: calc(var(--frameH) * var(--ratio));
  --x0: calc(var(--leftGap) + ((var(--usableW) - var(--frameW)) / 2));
  --x1: calc(var(--x0) + var(--frameW));
  --y0: calc(var(--navZoneH) + ((var(--usableH) - var(--frameH)) / 2));
  --y1: calc(var(--y0) + var(--frameH));
  --x25: calc(var(--x0) + var(--frameW) * 0.25);
  --x50: calc(var(--x0) + var(--frameW) * 0.5);
  --x75: calc(var(--x0) + var(--frameW) * 0.75);
  --ySplit: calc(var(--y0) + var(--frameH) * 0.52);
  --s: calc(var(--frameW) / 1920px);
  --logo-cell-w: calc(var(--x25) - var(--x0));
  --logo-w: clamp(60px, calc(var(--logo-cell-w) * 0.22), 110px);
  --z-grid: 20;
  --z-content: 100;
  --z-header: 600;
  --z-frame: 700;
  --z-intro: 1200;
  --z-intro-fx: 1210; /* ABOUT */
  --aboutTopRatio: 0.52;
  --aboutTopH: calc(var(--ySplit) - var(--y0));
  --aboutBottomH: calc(var(--y1) - var(--ySplit));
  --aboutPad: clamp(18px, calc(var(--frameW) * 0.022), 40px);
  --aboutHeadingSize: clamp(42px, calc(var(--frameW) * 0.052), 100px);
  --aboutHeadingTracking: 0.04em;
  --aboutScrollH: clamp(44px, calc(var(--frameH) * 0.074), 80px);
  --modHead: clamp(84px, calc(var(--frameH) * 0.18), 180px);
  --modStrip: clamp(42px, calc(var(--frameH) * 0.064), 64px);
  --modHeadSize: clamp(14px, calc(var(--frameW) * 0.0115), 22px);
  --modBodySize: clamp(12px, calc(var(--frameW) * 0.0094), 18px);
  --modPad: clamp(14px, calc(var(--frameW) * 0.012), 22px); /* PROJECTS */
  --projectsScrollFactor: 1;
  --projectsLeftW: 75%;
  --projectsRightW: 25%;
  --projectsTopRatio: 0.52;
  --projectsBottomRatio: 0.48;
  --projectsTopH: calc(var(--ySplit) - var(--y0));
  --projectsBottomH: calc(var(--y1) - var(--ySplit));
  --projectsPad: clamp(18px, calc(var(--frameW) * 0.0145), 28px);
  --projectsGap: clamp(14px, calc(var(--frameW) * 0.012), 24px);
  --projectsKickerSize: clamp(10px, calc(var(--frameW) * 0.0073), 14px);
  --projectsTitleSize: clamp(32px, calc(var(--frameW) * 0.0385), 74px);
  --projectsMetaLabelSize: clamp(9px, calc(var(--frameW) * 0.0057), 11px);
  --projectsMetaValueSize: clamp(12px, calc(var(--frameW) * 0.0094), 18px);
  --projectsTickerSize: clamp(18px, calc(var(--frameW) * 0.0208), 40px);
  --projectsDescSize: clamp(12px, calc(var(--frameW) * 0.0104), 20px);
  --projectsCtaH: clamp(52px, calc(var(--frameH) * 0.069), 74px);
  --projectsCtaSize: clamp(12px, calc(var(--frameW) * 0.0094), 18px);
  --projectsDotW: clamp(24px, calc(var(--frameW) * 0.025), 48px);
  --section-min-h: var(--vh);
  --navCell1Center: calc((var(--x0) + var(--x25)) / 2);
  --navLinksStart: var(--x25);
  --navLinksEnd: var(--x75);
  --navLinksW: calc(var(--navLinksEnd) - var(--navLinksStart));
  --navCell4Center: calc((var(--x75) + var(--x1)) / 2);
  --navCell4W: calc(var(--x1) - var(--x75));

  --navLinkSize: clamp(10px, 0.62vw, 12px);
  --navLinkGapPad: clamp(10px, 0.9vw, 18px);

  --contactPillH: clamp(28px, 2.6vh, 34px);
  --contactPillPadX: clamp(12px, 1.1vw, 18px);
  --contactPillFont: clamp(9px, 0.55vw, 10px);
  --contactPillMaxW: calc(var(--navCell4W) - clamp(16px, 1.4vw, 28px));
}
@supports (height: 100svh) {
  :root {
    --vh: 100svh;
  }
} /* ========================================================= RESET / BASE ========================================================= */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body {
  min-height: 100%;
}
body {
  background: var(--bg);
  color: var(--text-main);
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img,
canvas {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button,
input,
textarea,
select {
  font: inherit;
}
.section {
  min-height: var(--section-min-h);
}

.section:empty {
  min-height: 0;
} /* ========================================================= GLOBAL GRID OVERLAY ========================================================= */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grid);
  background:
    linear-gradient(
      to right,
      transparent calc(var(--x0) - (var(--line-w) / 2)),
      var(--grid) calc(var(--x0) - (var(--line-w) / 2)),
      var(--grid) calc(var(--x0) + (var(--line-w) / 2)),
      transparent calc(var(--x0) + (var(--line-w) / 2))
    ),
    linear-gradient(
      to right,
      transparent calc(var(--x1) - (var(--line-w) / 2)),
      var(--grid) calc(var(--x1) - (var(--line-w) / 2)),
      var(--grid) calc(var(--x1) + (var(--line-w) / 2)),
      transparent calc(var(--x1) + (var(--line-w) / 2))
    ),
    linear-gradient(
      to bottom,
      transparent calc(var(--y0) - (var(--line-w) / 2)),
      var(--grid) calc(var(--y0) - (var(--line-w) / 2)),
      var(--grid) calc(var(--y0) + (var(--line-w) / 2)),
      transparent calc(var(--y0) + (var(--line-w) / 2))
    ),
    linear-gradient(
      to bottom,
      transparent calc(var(--y1) - (var(--line-w) / 2)),
      var(--grid) calc(var(--y1) - (var(--line-w) / 2)),
      var(--grid) calc(var(--y1) + (var(--line-w) / 2)),
      transparent calc(var(--y1) + (var(--line-w) / 2))
    ),
    linear-gradient(
      to right,
      transparent calc(var(--x25) - (var(--line-w) / 2)),
      var(--grid) calc(var(--x25) - (var(--line-w) / 2)),
      var(--grid) calc(var(--x25) + (var(--line-w) / 2)),
      transparent calc(var(--x25) + (var(--line-w) / 2))
    ),
    linear-gradient(
      to right,
      transparent calc(var(--x50) - (var(--line-w) / 2)),
      var(--grid) calc(var(--x50) - (var(--line-w) / 2)),
      var(--grid) calc(var(--x50) + (var(--line-w) / 2)),
      transparent calc(var(--x50) + (var(--line-w) / 2))
    ),
    linear-gradient(
      to right,
      transparent calc(var(--x75) - (var(--line-w) / 2)),
      var(--grid) calc(var(--x75) - (var(--line-w) / 2)),
      var(--grid) calc(var(--x75) + (var(--line-w) / 2)),
      transparent calc(var(--x75) + (var(--line-w) / 2))
    ),
    linear-gradient(
      to bottom,
      transparent calc(var(--ySplit) - (var(--line-w) / 2)),
      var(--grid) calc(var(--ySplit) - (var(--line-w) / 2)),
      var(--grid) calc(var(--ySplit) + (var(--line-w) / 2)),
      transparent calc(var(--ySplit) + (var(--line-w) / 2))
    );
} /* ========================================================= HEADER / NAV ========================================================= */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--navZoneH);
  z-index: var(--z-header);
  pointer-events: none;
}
.nav-rail {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  height: var(--navZoneH);
  background: var(--orange);
  pointer-events: auto;
  z-index: calc(var(--z-header) + 1);
}
.nav-links {
  position: absolute;
  left: var(--navLinksStart);
  top: 0;
  width: var(--navLinksW);
  height: 100%;
  margin: 0;
  padding: 0;
  display: block;
  --navProjectW: 11.2em;
  --navSocialW: 8.06em;
  --navTextGap: clamp(5px, calc((var(--navLinksW) / 2 - 20.9em) / 1.5), 52px);
  font-family: var(--font-display);
  font-size: var(--navLinkSize);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}
.nav-links a {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  height: 100%;
  inline-size: auto;
  min-width: 0;
  color: var(--bg);
  text-decoration: none;
  white-space: nowrap;
}
.nav-links a:nth-child(1) {
  right: calc(50% + var(--navProjectW) + (var(--navTextGap) * 1.5));
}
.nav-links a:nth-child(2) {
  right: calc(50% + (var(--navTextGap) / 2));
}
.nav-links a:nth-child(3) {
  left: calc(50% + (var(--navTextGap) / 2));
}
.nav-links a:nth-child(4) {
  left: calc(50% + var(--navSocialW) + (var(--navTextGap) * 1.5));
}
.logo-mount {
  position: fixed;
  left: var(--navCell1Center);
  top: calc(var(--navZoneH) / 2);
  transform: translate(-50%, -50%);
  z-index: calc(var(--z-header) + 3);
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  isolation: isolate;
  --logo-url: none;
}
.logo-mount img {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.logo-mount::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg);
  -webkit-mask-image: var(--logo-url);
  mask-image: var(--logo-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: left center;
  mask-position: left center;
}
body.intro-complete .logo-mount {
  opacity: 1;
}
.logo {
  width: var(--logo-w);
  height: auto;
}
.logo-float {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 80;
  will-change: transform;
  pointer-events: none;
}
.contact-pill {
  position: fixed;
  left: var(--navCell4Center);
  top: calc(var(--navZoneH) / 2);
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--contactPillH);
  max-width: var(--contactPillMaxW);
  padding: 0 var(--contactPillPadX);
  border-radius: 999px;
  background: var(--bg);
  color: var(--orange);
  font-family: var(--font-display);
  font-size: var(--contactPillFont);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: calc(var(--z-header) + 4);
  transition: opacity 0.18s var(--ease);
}
.menu-toggle,
.mobile-menu,
.mobile-menu-backdrop {
  display: none;
} /* ========================================================= INTRO ========================================================= */
.landing {
  --landingA: 1;
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: grid;
  place-items: center;
  background: rgb(var(--orange-rgb) / var(--landingA));
  pointer-events: none;
}
.landing-hold {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(18px, 2vw, 28px);
}
.landing-mark {
  position: relative;
  width: clamp(240px, 42vw, 560px);
  aspect-ratio: var(--intro-logo-ratio);
}
.plus {
  position: absolute;
  width: 28px;
  height: 28px;
  opacity: 0.95;
  color: var(--bg);
}
.plus::before,
.plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: currentColor;
}
.plus::before {
  width: 22px;
  height: 4px;
}
.plus::after {
  width: 4px;
  height: 22px;
}
.landing-plus {
  opacity: 0;
}
.landing-plus[data-corner="tl"] {
  top: -44px;
  left: -44px;
}
.landing-plus[data-corner="tr"] {
  top: -44px;
  right: -44px;
}
.landing-plus[data-corner="bl"] {
  bottom: -44px;
  left: -44px;
}
.landing-plus[data-corner="br"] {
  bottom: -44px;
  right: -44px;
}
#brandLogo,
#introLogo {
  opacity: 0;
}
#logoPrintFx,
.logo-float {
  z-index: var(--z-intro-fx);
}
.logo-printfx {
  --py: 0;
  --hx: 0;
  --layerH: 1%;
  --studioCut: 0%;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  will-change: transform, opacity;
  transform-origin: top left;
  clip-path: inset(0 0 var(--studioCut) 0);
}
.logo-printfx__printed,
.logo-printfx__layer {
  position: absolute;
  inset: 0;
  background: var(--bg);
  -webkit-mask-image: var(--logo-url);
  mask-image: var(--logo-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}
.logo-printfx__printed {
  -webkit-clip-path: inset(calc((1 - var(--py)) * 100% + var(--layerH)) 0 0 0);
  clip-path: inset(calc((1 - var(--py)) * 100% + var(--layerH)) 0 0 0);
}
.logo-printfx__layer {
  -webkit-clip-path: inset(
    calc((1 - var(--py)) * 100%) calc((1 - var(--hx)) * 100%)
      calc(var(--py) * 100% - var(--layerH)) 0
  );
  clip-path: inset(
    calc((1 - var(--py)) * 100%) calc((1 - var(--hx)) * 100%)
      calc(var(--py) * 100% - var(--layerH)) 0
  );
  opacity: 0.95;
  filter: brightness(1.06);
}
body.is-intro .contact-pill,
body.is-intro .menu-toggle,
body.is-intro .mobile-menu,
body.is-intro .mobile-menu-backdrop {
  opacity: 0;
  pointer-events: none;
} /* ========================================================= SHARED PLUS DOCKING ========================================================= */
.hero-frame,
.about-title,
.projects-frame,
.socials-titlebox,
.contact-titlebox,
.newsletter-card {
  overflow: visible;
  z-index: var(--z-frame);
}
.frame-plus,
.about-title .about-plus,
.projects-frame .projects-plus,
.socials-titlebox .socials-plus,
.contact-titlebox .contact-plus,
.newsletter-card .newsletter-plus {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.frame-plus {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 1;
  pointer-events: none;
  overflow: visible;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.frame-plus::before {
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20001;
  font-family: var(--font-jet);
  font-size: 35px;
  line-height: 1;
  font-weight: 1000;
  color: var(--bg);
  -webkit-text-stroke: 2px var(--orange);
  transform: translate(-50%, -50%) translate(0px, -1px);
}
.hero-frame .fp-tl,
.projects-frame .fp-tl {
  left: 0;
  top: 0;
}
.hero-frame .fp-tr,
.projects-frame .fp-tr {
  right: 0;
  top: 0;
}
.hero-frame .fp-bl,
.projects-frame .fp-bl {
  left: 0;
  bottom: 0;
}
.hero-frame .fp-br,
.projects-frame .fp-br {
  right: 0;
  bottom: 0;
} /* ========================================================= HERO ========================================================= */
.hero {
  position: relative;
  height: var(--vh);
  min-height: 0;
  z-index: var(--z-content);
  pointer-events: auto;
}
.hero-frame {
  position: absolute;
  left: var(--x0);
  top: var(--y0);
  width: var(--frameW);
  height: var(--frameH);
  pointer-events: none;
}
.hero-stage {
  z-index: var(--z-content);
}
.hero-word,
.hero-dark__creatieve,
.hero-dark__de,
.hero-dark__design {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin: 0;
}
@media (min-width: 901px) {
  .hero-stage {
    position: absolute;
    left: var(--x0);
    top: var(--y0);
    width: var(--frameW);
    height: var(--frameH);
    overflow: visible;
  }
  .hero-topline,
  .hero-midstack,
  .hero-dark,
  .hero-designline,
  .hero-bottomline,
  .hero-cta {
    display: contents;
  }
  .hero-word,
  .hero-dark__de,
  .hero-dark__creatieve,
  .hero-dark__design,
  .hero-pill,
  .hero-copy,
  .hero-scroll {
    position: absolute;
    margin: 0;
  }
  .hero-word,
  .hero-dark__de,
  .hero-dark__creatieve,
  .hero-dark__design {
    line-height: 0.82;
  }

  .hero-word {
    font-size: clamp(64px, calc(var(--frameW) * 0.078), 150px);
    color: var(--orange);
  }
  .hero-dark__de,
  .hero-dark__creatieve,
  .hero-dark__design {
    font-size: clamp(64px, calc(var(--frameW) * 0.078), 150px);
    color: var(--text-ghost);
  }
  .word-odd {
    left: 0%;
    top: 1.85%;
  }
  .word-unit {
    left: 27.65%;
    top: 1.85%;
  }
  .hero-dark__de {
    left: 0%;
    top: 17.6%;
  }
  .hero-dark__creatieve {
    left: 18.23%;
    top: 17.6%;
  }
  .hero-dark__design {
    left: 0%;
    top: 34.26%;
  }
  .word-stu {
    left: 46.31%;
    top: 34.26%;
  }
  .word-dio {
    left: 0%;
    top: 52.78%;
  }
  .hero-pill {
    left: 37.5%;
    top: 55.56%;
    width: 21.88%;
    min-width: 250px;
    max-width: 420px;
    height: clamp(64px, calc(var(--frameH) * 0.1019), 110px);
    border-radius: 999px;
    background: var(--purple);
    border: 2px solid var(--bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--font-jet);
    font-size: clamp(14px, calc(var(--frameW) * 0.013), 25px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--bg);
    z-index: 4;
    transform: translateX(-50%);
  }
  .hero-copy {
    left: 37.5%;
    top: 67.15%;
    min-width: 22ch;
    max-width: 22ch;
    font-family: var(--font-jet);
    font-size: clamp(17px, calc(var(--frameW) * 0.0158), 30px);
    line-height: 1.18;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--orange);
    z-index: 4;
    transform: translateX(-50%);
  }
  .hero-scroll {
    left: 75%;
    bottom: 0;
    width: 25%;
    height: clamp(44px, calc(var(--frameH) * 0.074), 80px);
    background: var(--orange);
    display: grid;
    place-items: center;
    text-decoration: none;
    font-family: var(--font-jet);
    font-size: clamp(10px, calc(var(--frameW) * 0.0094), 18px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #0a0a0a;
    z-index: 4;
  }
}
@media (min-width: 901px) and (max-height: 860px) {
  .hero-word,
  .hero-dark__de,
  .hero-dark__creatieve,
  .hero-dark__design {
    font-size: clamp(58px, calc(var(--frameW) * 0.074), 136px);
  }
  .hero-pill {
    height: clamp(56px, calc(var(--frameH) * 0.088), 86px);
    min-width: 220px;
  }
  .hero-copy {
    font-size: clamp(16px, calc(var(--frameW) * 0.0148), 25px);
  }
  .hero-scroll {
    height: clamp(40px, calc(var(--frameH) * 0.06), 64px);
  }
} /* ========================================================= ABOUT ========================================================= */
.about {
  position: relative;
  height: var(--vh);
  z-index: calc(var(--z-content) + 10);
}
.about-frame {
  position: absolute;
  left: var(--x0);
  top: var(--y0);
  width: var(--frameW);
  height: var(--frameH);
  display: grid;
  grid-template-rows: var(--aboutTopH) var(--aboutBottomH);
  min-height: 0;
}
.about-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}
.about-title,
.about-empty,
.about-modules,
.module {
  background: var(--bg);
}
.about-title {
  position: relative;
  min-width: 0;
  min-height: 0;
  border: var(--line-w) solid var(--orange);
  display: grid;
  align-items: center;
  justify-items: start;
  padding: var(--aboutPad);
  overflow: visible;
}
.about-heading {
  margin: 0;
  width: min(100%, 11ch);
  max-width: 100%;
  min-width: 0;
  font-family: var(--font-display);
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: var(--aboutHeadingTracking);
  line-height: 0.84;
  font-size: var(--aboutHeadingSize);
  text-align: left;
}
.about-empty {
  min-width: 0;
  min-height: 0;
}
.about-scroll,
.projects-scroll,
.socials-scroll,
.contact-scroll {
  position: absolute;
  width: calc(var(--x1) - var(--x75));
  height: var(--aboutScrollH);
  background: var(--orange);
  display: grid;
  place-items: center;
  text-decoration: none;
  font-family: var(--font-jet);
  font-size: clamp(10px, calc(var(--frameW) * 0.0094), 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0a0a0a;
  z-index: calc(var(--z-frame) + 5);
}

.about-scroll {
  position: absolute;
  left: var(--x75);
  top: calc(var(--y0) + var(--aboutTopH) - var(--aboutScrollH));
}

.projects-scroll {
  left: var(--x0);
  top: calc(var(--y1) - var(--aboutScrollH));
}

.socials-scroll {
  left: var(--x75);
  top: calc(var(--y0) + var(--socialsTopH) - var(--aboutScrollH));
}
.contact-scroll {
  left: var(--x75);
  top: calc(var(--y0) + var(--contactTopH) - var(--aboutScrollH));
}
.about-modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
  border-top: var(--line-w) solid var(--orange);
}
.module {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-right: var(--line-w) solid var(--orange);
}
.module:last-child {
  border-right: none;
}
.module-head {
  height: var(--modHead);
  min-height: 0;
  padding: clamp(10px, calc(var(--frameW) * 0.008), 18px);
  display: grid;
  place-items: center;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--modHeadSize);
  line-height: 0.95;
  letter-spacing: 0.04em;
  color: var(--orange);
  position: relative;
  z-index: 3;
  transition:
    color 0.18s var(--ease),
    background 0.18s var(--ease);
}
.module-head .label-open {
  display: none;
}
.module-strip {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--modHead);
  height: var(--modStrip);
  background: var(--orange);
  display: grid;
  place-items: center;
  z-index: 4;
  transition: top 0.22s var(--ease);
}
.module-body {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--modHead) + var(--modStrip));
  bottom: var(--modStrip);
  min-height: 0;
  padding: var(--modPad);
  z-index: 2;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  pointer-events: none;
  overflow: auto;
  overscroll-behavior: contain;
  transition:
    clip-path 0.22s var(--ease),
    opacity 0.18s var(--ease),
    top 0.22s var(--ease);
}
.module-body::-webkit-scrollbar {
  width: 6px;
}
.module-body::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 0, 0.35);
}
.module-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(8px, calc(var(--frameH) * 0.01), 12px);
  font-family: var(--font-jet);
  font-size: var(--modBodySize);
  letter-spacing: 0.05em;
  line-height: 1.35;
}
.module-body li {
  position: relative;
  padding-left: 12px;
}
.module-body li::before {
  content: "-";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--orange);
}
.module-body b {
  color: var(--orange);
}
.module-icon {
  --icon: clamp(14px, calc(var(--frameW) * 0.0095), 20px);
  --stroke: clamp(2px, calc(var(--frameW) * 0.0016), 3px);
  width: var(--icon);
  height: var(--icon);
  position: relative;
  display: block;
  transform: translateY(-2px);
}
.module-icon::before,
.module-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #0a0a0a;
  transform: translate(-50%, -50%);
  border-radius: 1px;
}
.module-icon::before {
  width: calc(var(--icon) * 0.95);
  height: var(--stroke);
}
.module-icon::after {
  width: var(--stroke);
  height: calc(var(--icon) * 0.95);
} /* Desktop hover */
@media (hover: hover) and (pointer: fine) {
  .module:hover .module-head .label-closed {
    display: none;
  }
  .module:hover .module-head .label-open {
    display: inline;
  }
  .module:hover .module-head {
    background: var(--orange);
    color: #0a0a0a;
  }
  .module:hover .module-strip {
    top: calc(100% - var(--modStrip));
  }
  .module:hover .module-body {
    top: var(--modHead);
    opacity: 1;
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }
  .module:hover .module-icon::before,
  .module:hover .module-icon::after {
    width: calc(var(--icon) * 0.72);
    height: var(--stroke);
    top: 52%;
  }
  .module:hover .module-icon::before {
    left: 46%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .module:hover .module-icon::after {
    left: 54%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}
@media (min-width: 901px) and (max-height: 860px) {
  :root {
    --modHead: clamp(70px, calc(var(--frameH) * 0.155), 140px);
    --modStrip: clamp(38px, calc(var(--frameH) * 0.055), 56px);
    --aboutScrollH: clamp(40px, calc(var(--frameH) * 0.06), 64px);
    --aboutHeadingSize: clamp(34px, calc(var(--frameW) * 0.044), 82px);
    --modHeadSize: clamp(12px, calc(var(--frameW) * 0.0102), 18px);
    --modBodySize: clamp(11px, calc(var(--frameW) * 0.0083), 16px);
  }
}
/* ========================================================= PROJECTS ========================================================= */

.projects {
  position: relative;
  z-index: calc(var(--z-content) + 5);
}

.projects,
.projects-scroll-space,
.projects-sticky {
  height: var(--vh);
  min-height: var(--vh);
}
.projects-sticky {
  position: relative;
  top: auto;
}
.projects-frame {
  position: absolute;
  left: var(--x0);
  top: var(--y0);
  width: var(--frameW);
  height: var(--frameH);
  min-height: 0;
  overflow: visible;
}
.projects-canvas-cell {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--projectsLeftW);
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  min-height: 0;
}
#projectsCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.projects-side {
  position: absolute;
  left: var(--projectsLeftW);
  width: var(--projectsRightW);
  min-height: 0;
  background: var(--bg);
  border-left: var(--line-w) solid var(--orange);
  overflow: hidden;
}
.projects-side-top,
.projects-side-bottom {
  display: grid;
  gap: var(--projectsGap);
  min-height: 0;
  padding: var(--projectsPad);
}
.projects-side-top {
  top: 0;
  height: var(--projectsTopH);
  border-bottom: var(--line-w) solid var(--orange);
  grid-template-rows: auto auto auto auto;
  align-content: end;
  padding-bottom: clamp(24px, calc(var(--frameH) * 0.045), 48px);
}
.projects-side-bottom {
  top: var(--projectsTopH);
  height: var(--projectsBottomH);
  grid-template-rows: minmax(0, 1fr) auto auto;
  align-content: stretch;
}
.projects-kicker {
  font-family: var(--font-jet);
  font-size: var(--projectsKickerSize);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}
.projects-title {
  font-family: var(--font-display);
  font-size: var(--projectsTitleSize);
  line-height: 0.84;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--orange);
  max-width: 100%;
  word-break: break-word;
}
.projects-meta {
  display: grid;
  gap: clamp(10px, calc(var(--frameW) * 0.0073), 14px);
  padding-top: clamp(10px, calc(var(--frameW) * 0.0094), 18px);
  border-top: var(--line-w) solid var(--orange);
}
.projects-meta-item {
  display: grid;
  gap: 4px;
}
.projects-meta-label {
  font-family: var(--font-jet);
  font-size: var(--projectsMetaLabelSize);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}
.projects-meta-value {
  font-family: var(--font-display);
  font-size: var(--projectsMetaValueSize);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-main);
}
.projects-ticker {
  min-height: 0;
  overflow: hidden;
  border-top: var(--line-w) solid var(--orange);
  padding-top: clamp(10px, calc(var(--frameW) * 0.0094), 18px);
  display: flex;
  align-items: center;
}
.projects-ticker__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.projects-ticker__inner,
.projects-ticker__clone {
  display: flex;
  align-items: center;
  gap: clamp(18px, calc(var(--frameW) * 0.0145), 28px);
  width: max-content;
  flex: 0 0 auto;
}
.projects-ticker span {
  display: inline-block;
  white-space: nowrap;
  font-family: var(--font-jet);
  font-size: var(--projectsTickerSize);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.projects-desc {
  min-height: 0;
  overflow: auto;
  padding-right: 8px;
  font-family: var(--font-jet);
  font-size: var(--projectsDescSize);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--text-main);
}
.projects-desc::-webkit-scrollbar {
  width: 6px;
}
.projects-desc::-webkit-scrollbar-thumb {
  background: rgba(255, 107, 0, 0.35);
}
.projects-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--projectsCtaH);
  width: 100%;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--purple);
  border: 2px solid var(--bg);
  color: var(--bg);
  text-decoration: none;
  text-transform: uppercase;
  font-family: var(--font-jet);
  font-size: clamp(14px, calc(var(--frameW) * 0.013), 25px);
  letter-spacing: 0.12em;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
}
.projects-cta.is-disabled {
  pointer-events: none;
  cursor: default;
  background: var(--purple);
  color: var(--bg);
}
.projects-dots {
  display: flex;
  gap: 10px;
}
.projects-dot {
  appearance: none;
  border: 0;
  cursor: pointer;
  width: var(--projectsDotW);
  min-width: 24px;
  height: 3px;
  background: rgba(255, 107, 0, 0.24);
}
.projects-dot.is-active {
  background: var(--orange);
}
.projects-mobile-next {
  display: grid;
  place-items: center;
  position: absolute;
  right: clamp(12px, 1.2vw, 18px);
  top: var(--projectsTopH);
  transform: translateY(-50%);
  width: clamp(46px, calc(var(--frameW) * 0.032), 60px);
  height: clamp(46px, calc(var(--frameW) * 0.032), 60px);
  border: 2px solid var(--orange);
  border-radius: 999px;
  background: rgba(7, 7, 7);
  z-index: 8;
  cursor: pointer;
  pointer-events: auto;
}

.projects-mobile-next::before {
  content: "";
  display: block;
  width: clamp(10px, calc(var(--frameW) * 0.0075), 14px);
  height: clamp(10px, calc(var(--frameW) * 0.0075), 14px);
  border-top: 2px solid var(--orange);
  border-right: 2px solid var(--orange);
  transform: translateX(-1px) rotate(45deg);
}

.projects-mobile-next:active {
  transform: translateY(-50%) scale(0.96);
}
.projects-mobile-next[hidden],
.projects-dots[hidden],
.projects-dot[hidden] {
  display: none !important;
}
/* ========================================================= PROJECTS ========================================================= */

/* ───────────────────────────────────────────── */
/* PAGE 3 (SOCIALS) — desktop schaalbaar */
/* ───────────────────────────────────────────── */

.socials {
  position: relative;
  height: var(--vh);
  z-index: calc(var(--z-content) + 8);

  --socialsTopRatio: 0.52;
  --socialsTopH: calc(var(--frameH) * var(--socialsTopRatio));
  --socialsBottomH: calc(var(--frameH) - var(--socialsTopH));

  --socialGap: 0px;
  --socialCardSize: min(
    calc((var(--frameW) - (var(--socialGap) * 3)) / 4),
    var(--socialsBottomH)
  );

  --socialHeadingSize: clamp(42px, calc(var(--frameW) * 0.052), 100px);
  --socialCopySize: clamp(13px, calc(var(--frameW) * 0.0105), 20px);
  --socialMetaSize: clamp(10px, calc(var(--frameW) * 0.0072), 14px);
  --socialNameSize: clamp(16px, calc(var(--frameW) * 0.014), 28px);
  --socialHandleSize: clamp(10px, calc(var(--frameW) * 0.0085), 16px);
  --socialCardPad: clamp(12px, calc(var(--frameW) * 0.012), 24px);
}

.socials-frame {
  position: absolute;
  left: var(--x0);
  top: var(--y0);
  width: var(--frameW);
  height: var(--frameH);
  display: grid;
  grid-template-rows: var(--socialsTopH) var(--socialsBottomH);
  min-height: 0;
  overflow: hidden;
  z-index: var(--z-frame);
}

.socials-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

.socials-titlebox,
.socials-intro,
.socials-grid,
.social-card {
  background: var(--bg);
}

.socials-titlebox {
  min-width: 0;
  min-height: 0;
  border: var(--line-w) solid var(--orange);
  display: grid;
  align-items: center;
  justify-items: start;
  padding: clamp(18px, calc(var(--frameW) * 0.022), 40px);
}

.socials-heading {
  margin: 0;
  width: min(100%, 8ch);
  max-width: 100%;
  min-width: 0;
  font-family: var(--font-display);
  font-size: var(--socialHeadingSize);
  line-height: 0.84;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
  text-align: left;
}

.socials-intro {
  min-width: 0;
  min-height: 0;
  border-left: var(--line-w) solid var(--orange);
  display: grid;
  align-content: end;
  padding: clamp(18px, calc(var(--frameW) * 0.018), 32px);
}

.socials-copy {
  margin: 0;
  max-width: 22ch;
  font-family: var(--font-jet);
  font-size: var(--socialCopySize);
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}

.socials-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: stretch;
  gap: var(--socialGap);
  height: 100%;
  min-height: 0;
  padding-top: 0;
}

.social-card {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  padding: var(--socialCardPad);
  display: grid;
  grid-template-rows: auto 1fr;
  align-self: stretch;
  text-decoration: none;
  transition:
    background 0.18s var(--ease),
    transform 0.18s var(--ease),
    border-color 0.18s var(--ease);
  overflow: hidden;
}

.social-card::after {
  content: "\2197\FE0E";
  position: absolute;
  top: var(--socialCardPad);
  right: var(--socialCardPad);
  font-family: var(--font-jet), monospace;
  font-size: clamp(14px, calc(var(--frameW) * 0.0105), 20px);
  line-height: 1;
  color: var(--orange);
  transform: translateY(-0.18em);
}

.social-card__meta {
  font-family: var(--font-jet);
  font-size: var(--socialMetaSize);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 107, 0, 0.72);
  transition: color 0.18s var(--ease);
}

.social-card__content {
  align-self: end;
  display: grid;
  gap: clamp(6px, calc(var(--frameH) * 0.008), 12px);
  position: relative;
  z-index: 2;
}

.social-card__icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity 0.2s var(--ease),
    transform 0.22s var(--ease);
}

.social-card__icon img {
  width: clamp(112px, calc(var(--frameW) * 0.11), 210px);
  height: clamp(112px, calc(var(--frameW) * 0.11), 210px);
  object-fit: contain;
  display: block;
  transition: transform 0.22s var(--ease);
}

.social-card--instagram .social-card__icon img {
  transform: scale(1.04);
}

.social-card--tiktok .social-card__icon img {
  transform: scale(0.8);
}

.social-card--behance .social-card__icon img {
  transform: scale(0.72);
}

.social-card--linkedin .social-card__icon img {
  transform: scale(0.66);
}

.social-card__name {
  font-family: var(--font-display);
  font-size: var(--socialNameSize);
  line-height: 0.92;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
  transition: color 0.18s var(--ease);
}

.social-card__handle {
  font-family: var(--font-jet);
  font-size: var(--socialHandleSize);
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.18s var(--ease);
}

.social-card:hover {
  background: var(--orange);
  transform: translateY(-2px);
}

.social-card:hover .social-card__icon {
  opacity: 1;
  transform: scale(1);
}

.social-card:hover::after,
.social-card:hover .social-card__meta,
.social-card:hover .social-card__name,
.social-card:hover .social-card__handle {
  color: var(--bg);
}

/* ========================================================= CONTACT ========================================================= */
.contact {
  position: relative;
  height: var(--vh);
  z-index: calc(var(--z-content) + 7);

  --contactTopRatio: 0.52;
  --contactTopH: calc(var(--frameH) * var(--contactTopRatio));
  --contactBottomH: calc(var(--frameH) - var(--contactTopH));
  --contactHeadingSize: clamp(42px, calc(var(--frameW) * 0.052), 100px);
  --contactCopySize: clamp(13px, calc(var(--frameW) * 0.0105), 20px);
  --contactEmailSize: clamp(16px, calc(var(--frameW) * 0.016), 30px);
  --contactMetaSize: clamp(10px, calc(var(--frameW) * 0.0072), 14px);
  --contactKickerSize: clamp(10px, calc(var(--frameW) * 0.0072), 14px);
  --contactNameSize: clamp(18px, calc(var(--frameW) * 0.017), 34px);
  --contactDescSize: clamp(11px, calc(var(--frameW) * 0.0088), 16px);
  --contactCardPad: clamp(16px, calc(var(--frameW) * 0.0135), 28px);
}

.contact-frame {
  position: absolute;
  left: var(--x0);
  top: var(--y0);
  width: var(--frameW);
  height: var(--frameH);
  display: grid;
  grid-template-rows: var(--contactTopH) var(--contactBottomH);
  min-height: 0;
  z-index: var(--z-frame);
}

.contact-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

.contact-titlebox,
.contact-intro,
.contact-actions,
.contact-card {
  background: var(--bg);
}

.contact-titlebox {
  border: var(--line-w) solid var(--orange);
  display: grid;
  align-items: center;
  justify-items: start;
  padding: clamp(18px, calc(var(--frameW) * 0.022), 40px);
  min-width: 0;
  min-height: 0;
}

.contact-heading {
  margin: 0;
  width: min(100%, 8ch);
  max-width: 100%;
  font-family: var(--font-display);
  font-size: var(--contactHeadingSize);
  line-height: 0.84;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
  text-align: left;
}

.contact-intro {
  border-left: var(--line-w) solid var(--orange);
  border-right: var(--line-w) solid var(--orange);
  display: grid;
  align-content: end;
  gap: clamp(18px, calc(var(--frameH) * 0.022), 32px);
  padding: clamp(18px, calc(var(--frameW) * 0.018), 32px);
  min-width: 0;
  min-height: 0;
}

.contact-copy {
  margin: 0;
  max-width: 26ch;
  font-family: var(--font-jet);
  font-size: var(--contactCopySize);
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
}

.contact-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-height: 0;
}

.contact-card {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-top: var(--line-w) solid var(--orange);
  border-bottom: var(--line-w) solid var(--orange);
  border-left: var(--line-w) solid var(--orange);
  padding: var(--contactCardPad);
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  transition:
    background 0.18s var(--ease),
    color 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.contact-card:last-child {
  border-right: var(--line-w) solid var(--orange);
}

.contact-card::after {
  content: "\2197\FE0E";
  position: absolute;
  top: var(--contactCardPad);
  right: var(--contactCardPad);
  font-family: var(--font-jet), monospace;
  font-size: clamp(14px, calc(var(--frameW) * 0.0105), 20px);
  line-height: 1;
  color: currentColor;
  transform: translateY(-0.18em);
}

.contact-card__meta {
  font-family: var(--font-jet);
  font-size: var(--contactMetaSize);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.8;
}

.contact-card__content {
  align-self: end;
  display: grid;
  gap: clamp(8px, calc(var(--frameH) * 0.01), 16px);
}

.contact-card__kicker {
  font-family: var(--font-jet);
  font-size: var(--contactKickerSize);
  line-height: 1.1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.82;
}

.contact-card__name {
  font-family: var(--font-display);
  font-size: var(--contactNameSize);
  line-height: 0.9;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
}

.contact-card__desc {
  max-width: 24ch;
  font-family: var(--font-jet);
  font-size: var(--contactDescSize);
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: inherit;
  opacity: 0.82;
}

.contact-card {
  color: var(--orange);
}

.contact-card:hover {
  transform: translateY(-2px);
}

.contact-card:hover {
  background: var(--orange);
  color: var(--bg);
}

/* ========================================================= NEWSLETTER ========================================================= */
.newsletter-section {
  position: relative;
  height: var(--vh);
  z-index: calc(var(--z-content) + 6);
}

.newsletter-frame {
  position: absolute;
  left: var(--x0);
  top: var(--y0);
  width: var(--frameW);
  height: var(--frameH);
  z-index: var(--z-frame);
}

.newsletter-card {
  position: relative;
  width: 100%;
  height: 100%;
  padding: clamp(24px, calc(var(--frameW) * 0.028), 54px);
  border: var(--line-w) solid var(--orange);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, calc(var(--frameH) * 0.022), 28px);
  text-align: center;
  overflow: visible;
}

.newsletter-top {
  width: min(100%, 760px);
  display: grid;
  justify-items: center;
  gap: 12px;
}

.newsletter-kicker {
  font-family: var(--font-jet);
  font-size: clamp(12px, calc(var(--frameW) * 0.008), 15px);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--orange);
}

.newsletter-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(56px, calc(var(--frameW) * 0.071), 118px);
  line-height: 0.82;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--orange);
}

.newsletter-copy {
  width: min(100%, 640px);
  font-family: var(--font-jet);
  font-size: clamp(14px, calc(var(--frameW) * 0.011), 18px);
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.88);
}

.newsletter-benefits {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.newsletter-benefit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 107, 0, 0.5);
  color: var(--orange);
  font-family: var(--font-jet);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.newsletter-embed-shell {
  width: min(100%, 760px);
  display: grid;
  justify-items: center;
  gap: 16px;
}

.newsletter-form-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.newsletter-form-wrapper > * {
  margin-inline: auto !important;
}

.newsletter-embed-note {
  width: min(100%, 920px);
  font-family: var(--font-jet);
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}

@media (max-width: 1280px) and (min-width: 901px) {
  :root {
    --leftGap: clamp(32px, 3vw, 56px);
    --rightGap: clamp(40px, 3.5vw, 72px);
    --bottomGap: clamp(20px, 2.2vh, 32px);
    --navZoneH: clamp(40px, 4.5vh, 56px);
    --aboutHeadingSize: clamp(38px, calc(var(--frameW) * 0.047), 82px);
    --modHead: clamp(72px, calc(var(--frameH) * 0.155), 144px);
    --modStrip: clamp(38px, calc(var(--frameH) * 0.058), 56px);
    --modHeadSize: clamp(12px, calc(var(--frameW) * 0.0105), 18px);
    --modBodySize: clamp(11px, calc(var(--frameW) * 0.0088), 16px);
    --projectsTitleSize: clamp(28px, calc(var(--frameW) * 0.034), 58px);
    --projectsTickerSize: clamp(15px, calc(var(--frameW) * 0.0175), 30px);
    --projectsDescSize: clamp(11px, calc(var(--frameW) * 0.0092), 17px);
    --projectsCtaH: clamp(48px, calc(var(--frameH) * 0.064), 66px);
    --socialHeadingSize: clamp(36px, calc(var(--frameW) * 0.045), 80px);
    --socialCopySize: clamp(12px, calc(var(--frameW) * 0.0094), 18px);
    --socialNameSize: clamp(15px, calc(var(--frameW) * 0.0128), 24px);
    --contactHeadingSize: clamp(36px, calc(var(--frameW) * 0.045), 80px);
    --contactCopySize: clamp(12px, calc(var(--frameW) * 0.0094), 18px);
    --contactNameSize: clamp(16px, calc(var(--frameW) * 0.0145), 26px);
    --contactDescSize: clamp(10px, calc(var(--frameW) * 0.008), 14px);
  }

  .nav-links {
    font-size: clamp(9px, 0.65vw, 11px);
    padding: 0;
  }

  .contact-pill {
    min-height: clamp(26px, 2.3vh, 30px);
    padding: 0 clamp(10px, 0.9vw, 14px);
    font-size: clamp(8px, 0.52vw, 10px);
  }

  .hero-pill {
    min-width: 210px;
    max-width: 320px;
    height: clamp(56px, calc(var(--frameH) * 0.086), 82px);
    font-size: clamp(13px, calc(var(--frameW) * 0.0118), 19px);
  }

  .hero-copy {
    min-width: 21ch;
    max-width: 21ch;
    font-size: clamp(16px, calc(var(--frameW) * 0.0136), 23px);
  }

  .projects-side-top,
  .projects-side-bottom {
    padding: clamp(16px, calc(var(--frameW) * 0.012), 22px);
  }

  .projects-title {
    max-width: 10.5ch;
  }

  .projects-desc {
    line-height: 1.42;
  }

  .newsletter-card {
    padding: clamp(22px, calc(var(--frameW) * 0.022), 40px);
  }

  .newsletter-title {
    font-size: clamp(48px, calc(var(--frameW) * 0.058), 92px);
  }

  .newsletter-copy {
    width: min(100%, 560px);
  }

  .newsletter-benefits,
  .newsletter-embed-shell {
    width: min(100%, 680px);
  }
}

@media (max-width: 1080px) and (min-width: 901px) {
  :root {
    --projectsTitleSize: clamp(26px, calc(var(--frameW) * 0.031), 50px);
    --projectsDescSize: clamp(10px, calc(var(--frameW) * 0.0086), 15px);
    --projectsTickerSize: clamp(14px, calc(var(--frameW) * 0.0155), 24px);
    --aboutHeadingSize: clamp(34px, calc(var(--frameW) * 0.043), 68px);
  }

  .hero-word,
  .hero-dark__de,
  .hero-dark__creatieve,
  .hero-dark__design {
    font-size: clamp(52px, calc(var(--frameW) * 0.066), 112px);
  }

  .hero-pill {
    left: 37.5%;
    top: 56.25%;
    min-width: 190px;
  }

  .hero-copy {
    left: 37.5%;
    top: 67.85%;
    min-width: 20ch;
    max-width: 20ch;
  }

  .social-card__icon img {
    width: clamp(96px, calc(var(--frameW) * 0.09), 156px);
    height: clamp(96px, calc(var(--frameW) * 0.09), 156px);
  }

  .projects-cta {
    padding-inline: 12px;
    font-size: clamp(10px, calc(var(--frameW) * 0.008), 13px);
    letter-spacing: 0.12em;
  }

  .newsletter-benefits,
  .newsletter-embed-shell {
    width: min(100%, 560px);
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  :root {
    --bottomGap: clamp(14px, 1.8vh, 22px);
    --navZoneH: clamp(38px, 4vh, 48px);
    --aboutTopRatio: 0.48;
    --projectsTopRatio: 0.5;
    --socialsTopRatio: 0.48;
    --contactTopRatio: 0.48;
  }

  .hero-pill {
    height: clamp(48px, calc(var(--frameH) * 0.072), 62px);
  }

  .hero-copy {
    font-size: clamp(15px, calc(var(--frameW) * 0.0126), 21px);
  }

  .projects-title {
    line-height: 0.88;
  }

  .newsletter-title {
    font-size: clamp(48px, calc(var(--frameW) * 0.06), 96px);
  }

  .newsletter-card {
    gap: clamp(14px, calc(var(--frameH) * 0.018), 22px);
  }
}

@media (min-width: 901px) and (max-height: 860px) {
  .socials {
    --socialHeadingSize: clamp(34px, calc(var(--frameW) * 0.044), 82px);
    --socialCopySize: clamp(12px, calc(var(--frameW) * 0.0093), 18px);
    --socialNameSize: clamp(14px, calc(var(--frameW) * 0.012), 24px);
    --socialHandleSize: clamp(10px, calc(var(--frameW) * 0.0076), 14px);
  }

  .contact {
    --contactHeadingSize: clamp(34px, calc(var(--frameW) * 0.044), 82px);
    --contactCopySize: clamp(12px, calc(var(--frameW) * 0.0093), 18px);
    --contactEmailSize: clamp(14px, calc(var(--frameW) * 0.0135), 24px);
    --contactNameSize: clamp(16px, calc(var(--frameW) * 0.014), 28px);
    --contactDescSize: clamp(10px, calc(var(--frameW) * 0.008), 14px);
  }

  .newsletter-title {
    font-size: clamp(48px, calc(var(--frameW) * 0.06), 98px);
  }

  .newsletter-copy {
    font-size: clamp(13px, calc(var(--frameW) * 0.0095), 16px);
  }
}

@media (max-width: 900px) {
  html,
  body {
    overscroll-behavior-y: none;
  }

  body {
    touch-action: pan-x pinch-zoom;
  }

  :root {
    --mobile-title-panel-h: clamp(88px, 24vw, 124px);
    --mobile-scroll-bottom-pad: clamp(10px, 2.4vh, 18px);
    --mobile-box-line: calc(var(--line-w) / 2);
    --mobile-section-top-h: calc(var(--frameH) * 0.25);
    --mobile-section-grid-h: calc(var(--frameH) * 0.5);
  }

  .socials {
    position: relative;
    height: calc(var(--vh) - var(--headerH));
    max-height: none;
    min-height: calc(var(--vh) - var(--headerH));
    display: block;
    padding: 0;
  }

  .socials-frame {
    position: absolute;
    left: var(--x0);
    top: 0;
    right: auto;
    width: var(--frameW);
    height: var(--frameH);
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-rows: var(--mobile-section-top-h) var(--mobile-section-grid-h);
    align-content: start;
    overflow: hidden;
    transform: none;
  }

  .socials-top {
    grid-template-columns: 1fr;
    min-height: var(--mobile-section-top-h);
  }

  .socials-titlebox {
    padding: 10px 12px 14px;
    min-height: 0;
    height: 100%;
    border: var(--line-w) solid var(--orange) !important;
    align-items: center;
    justify-items: center;
  }

  .socials-heading {
    width: 100%;
    max-width: none;
    font-size: clamp(24px, 7.2vw, 40px);
    line-height: 0.84;
    text-align: center;
  }

  .socials-heading br {
    display: none;
  }

  .socials-intro {
    border-left: none;
    border-top: none;
    border-bottom: var(--line-w) solid var(--orange);
    padding: 14px;
  }

  .socials-copy {
    max-width: 100%;
    font-size: clamp(11px, 2.9vw, 14px);
    line-height: 1.22;
  }

  .socials-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 0;
    padding-top: 0;
    height: 100%;
    min-height: 0;
    border-top: none;
  }

  .social-card {
    height: 100%;
    aspect-ratio: auto;
    min-height: 0;
    padding: 14px;
    border: none !important;
    background: var(--bg);
    -webkit-tap-highlight-color: transparent;
  }

  .social-card:nth-child(odd) {
    border-left: var(--line-w) solid var(--orange) !important;
    border-right: var(--line-w) solid var(--orange) !important;
    border-bottom: var(--line-w) solid var(--orange) !important;
  }

  .social-card:nth-child(even) {
    border-right: var(--line-w) solid var(--orange) !important;
    border-bottom: var(--line-w) solid var(--orange) !important;
  }

  .social-card::after {
    display: block;
    top: 12px;
    right: 12px;
    font-size: 15px;
  }

  .social-card__meta {
    display: block;
    position: absolute;
    top: 14px;
    left: 14px;
    font-size: clamp(8px, 2.1vw, 10px);
    line-height: 1;
    letter-spacing: 0.14em;
    color: var(--orange);
  }

  .social-card__icon {
    opacity: 1;
    transform: scale(1);
  }

  .social-card__icon img {
    width: clamp(64px, 16vw, 104px);
    height: clamp(64px, 16vw, 104px);
    filter: brightness(0) saturate(100%) invert(44%) sepia(96%) saturate(2786%)
      hue-rotate(5deg) brightness(102%) contrast(103%);
  }

  .social-card__name {
    display: none;
  }

  .social-card__content {
    display: none;
  }

  .social-card:hover {
    background: var(--bg);
    transform: none;
  }

  .social-card:active,
  .social-card:focus,
  .social-card:focus-visible {
    background: var(--bg);
    transform: none;
    outline: none;
  }

  .social-card:hover .social-card__icon,
  .social-card:active .social-card__icon,
  .social-card:focus .social-card__icon,
  .social-card:focus-visible .social-card__icon {
    opacity: 1;
    transform: scale(1);
  }

  .social-card:hover::after,
  .social-card:active::after,
  .social-card:focus::after,
  .social-card:focus-visible::after {
    color: var(--orange);
  }

  .social-card:hover .social-card__meta,
  .social-card:active .social-card__meta,
  .social-card:focus .social-card__meta,
  .social-card:focus-visible .social-card__meta {
    color: var(--orange);
  }

  .contact {
    position: relative;
    height: calc(var(--vh) - var(--headerH));
    max-height: none;
    min-height: calc(var(--vh) - var(--headerH));
    display: block;
    padding: 0;
  }

  .contact-frame {
    position: absolute;
    left: var(--x0);
    top: 0;
    width: var(--frameW);
    height: var(--frameH);
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--mobile-section-top-h) var(--mobile-section-grid-h);
    align-content: start;
    overflow: hidden;
    transform: none;
  }

  .contact-top {
    grid-template-columns: 1fr;
    min-height: var(--mobile-section-top-h);
  }

  .contact-titlebox {
    padding: 10px 12px 14px;
    min-height: 0;
    height: 100%;
    border: var(--line-w) solid var(--orange) !important;
    align-items: center;
    justify-items: center;
  }

  .contact-heading {
    width: 100%;
    max-width: none;
    font-size: clamp(24px, 7.2vw, 40px);
    line-height: 0.84;
    text-align: center;
  }

  .contact-intro {
    display: none;
  }

  .contact-copy {
    display: none;
  }

  .contact-email {
    width: 100%;
    min-height: 42px;
    justify-content: center;
    padding: 0 14px;
    font-size: clamp(12px, 3.4vw, 16px);
    text-align: center;
  }

  .contact-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 0;
    height: 100%;
    min-height: 0;
  }

  .contact-card {
    min-height: 0;
    height: 100%;
    padding: 14px 16px 12px;
    border: none;
    display: block;
  }

  .contact-card:nth-child(1) {
    border-left: var(--line-w) solid var(--orange);
    border-right: var(--line-w) solid var(--orange);
    border-bottom: var(--line-w) solid var(--orange);
  }

  .contact-card:nth-child(2) {
    border-right: var(--line-w) solid var(--orange);
    border-bottom: var(--line-w) solid var(--orange);
  }

  .contact-card:nth-child(3) {
    grid-column: 1 / -1;
  }

  .contact-card:last-child {
    border-left: var(--line-w) solid var(--orange);
    border-right: var(--line-w) solid var(--orange);
    border-bottom: var(--line-w) solid var(--orange);
  }

  .contact-card::after {
    display: block;
    top: 12px;
    right: 12px;
    font-size: 15px;
  }

  .contact-card__content {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
  }

  .contact-card__name {
    position: static;
    width: 100%;
    max-width: calc(100% - 20px);
    font-size: clamp(15px, 4.1vw, 22px);
    line-height: 0.92;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
  }

  .contact-card:nth-child(2) .contact-card__name {
    font-size: 0;
  }

  .contact-card:nth-child(2) .contact-card__name::before {
    content: "DM";
    font-size: clamp(15px, 4.1vw, 22px);
    line-height: 0.92;
  }

  .contact-card__meta {
    display: block;
    position: absolute;
    top: 14px;
    left: 16px;
    font-size: clamp(8px, 2.1vw, 10px);
    line-height: 1;
    letter-spacing: 0.14em;
    opacity: 0.9;
  }

  .contact-card__kicker {
    display: none;
  }

  .contact-card__desc {
    display: none;
  }

  .contact-card:hover,
  .contact-card:active,
  .contact-card:focus,
  .contact-card:focus-visible {
    background: var(--bg);
    color: var(--orange);
    transform: none;
    outline: none;
  }

  .newsletter-section {
    position: relative;
    height: calc(var(--vh) - var(--headerH));
    min-height: calc(var(--vh) - var(--headerH));
    display: block;
    padding: 0;
    overflow: hidden;
  }

  .newsletter-frame {
    position: absolute;
    left: var(--x0);
    top: 0;
    width: var(--frameW);
    height: var(--frameH);
    min-height: 0;
    margin: 0;
    display: grid;
  }

  .newsletter-card {
    width: 100%;
    min-height: 0;
    height: 100%;
    border: var(--mobile-box-line) solid var(--orange);
    justify-content: center;
    gap: 12px;
    padding: 14px 12px;
    overflow: hidden;
  }

  .newsletter-title {
    font-size: clamp(38px, 12vw, 62px);
  }

  .newsletter-copy {
    font-size: 12px;
    width: min(100%, 300px);
  }

  .newsletter-benefits {
    gap: 8px;
  }

  .newsletter-benefit {
    min-height: 28px;
    padding: 0 10px;
    font-size: 9px;
    letter-spacing: 0.08em;
  }

  .newsletter-embed-shell {
    width: 100%;
    gap: 10px;
  }

  .newsletter-embed-note {
    font-size: 9px;
  }

  .newsletter-embed-note {
    font-size: 10px;
    width: 100%;
  }
}
/* ========================================================= MOBILE ========================================================= */
@media (max-width: 900px) {
  :root {
    --headerH: 56px;
    --topbar-h: var(--headerH);
    --mobileInsetX: 10px;
    --mobileInsetY: 8px;
    --x0: var(--mobileInsetX);
    --x1: calc(100vw - var(--mobileInsetX));
    --frameW: calc(var(--x1) - var(--x0));
    --y0: var(--headerH);
    --frameH: calc(var(--vh) - var(--y0) - var(--mobileInsetY));
    --y1: calc(var(--y0) + var(--frameH));
    --x25: calc(var(--x0) + var(--frameW) * 0.25);
    --x50: calc(var(--x0) + var(--frameW) * 0.5);
    --x75: calc(var(--x0) + var(--frameW) * 0.75);
    --ySplit: calc(var(--y0) + var(--frameH) * 0.52);
    --logo-w: clamp(44px, 14vw, 60px);
    --heroInsetX: clamp(10px, 3vw, 18px);
    --heroTopGap: clamp(4px, 1vw, 10px);
    --heroWordSize: clamp(
      2.8rem,
      calc((var(--frameW) - (var(--heroInsetX) * 3) - var(--heroTopGap)) / 7),
      5rem
    );
    --heroDeDarkSize: calc(var(--heroWordSize) * 0.42);
    --heroDarkSize: calc(var(--heroWordSize) * 0.85);
    --yCenter: calc((var(--y0) + var(--y1)) / 2);
    --yQuarterTop: calc((var(--y0) + var(--yCenter)) / 2);
    --yQuarterBottom: calc((var(--yCenter) + var(--y1)) / 2);
    --moduleColH-mobile: clamp(35vh, 35vh, 35vh);
    --projectsScrollFactor: 1.8;
    --menuBtnW: clamp(42px, 11vw, 48px);
    --menuGap: clamp(8px, 2vw, 12px);
  }
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }
  body::after {
    background:
      linear-gradient(
        to right,
        transparent calc(var(--x0) - (var(--line-w) / 2)),
        var(--grid) calc(var(--x0) - (var(--line-w) / 2)),
        var(--grid) calc(var(--x0) + (var(--line-w) / 2)),
        transparent calc(var(--x0) + (var(--line-w) / 2))
      ),
      linear-gradient(
        to right,
        transparent calc(var(--x50) - (var(--line-w) / 2)),
        var(--grid) calc(var(--x50) - (var(--line-w) / 2)),
        var(--grid) calc(var(--x50) + (var(--line-w) / 2)),
        transparent calc(var(--x50) + (var(--line-w) / 2))
      ),
      linear-gradient(
        to right,
        transparent calc(var(--x1) - (var(--line-w) / 2)),
        var(--grid) calc(var(--x1) - (var(--line-w) / 2)),
        var(--grid) calc(var(--x1) + (var(--line-w) / 2)),
        transparent calc(var(--x1) + (var(--line-w) / 2))
      ),
      linear-gradient(
        to bottom,
        transparent calc(var(--y0) - (var(--line-w) / 2)),
        var(--grid) calc(var(--y0) - (var(--line-w) / 2)),
        var(--grid) calc(var(--y0) + (var(--line-w) / 2)),
        transparent calc(var(--y0) + (var(--line-w) / 2))
      ),
      linear-gradient(
        to bottom,
        transparent calc(var(--yQuarterTop) - (var(--line-w) / 2)),
        var(--grid) calc(var(--yQuarterTop) - (var(--line-w) / 2)),
        var(--grid) calc(var(--yQuarterTop) + (var(--line-w) / 2)),
        transparent calc(var(--yQuarterTop) + (var(--line-w) / 2))
      ),
      linear-gradient(
        to bottom,
        transparent calc(var(--yCenter) - (var(--line-w) / 2)),
        var(--grid) calc(var(--yCenter) - (var(--line-w) / 2)),
        var(--grid) calc(var(--yCenter) + (var(--line-w) / 2)),
        transparent calc(var(--yCenter) + (var(--line-w) / 2))
      ),
      linear-gradient(
        to bottom,
        transparent calc(var(--yQuarterBottom) - (var(--line-w) / 2)),
        var(--grid) calc(var(--yQuarterBottom) - (var(--line-w) / 2)),
        var(--grid) calc(var(--yQuarterBottom) + (var(--line-w) / 2)),
        transparent calc(var(--yQuarterBottom) + (var(--line-w) / 2))
      ),
      linear-gradient(
        to bottom,
        transparent calc(var(--y1) - (var(--line-w) / 2)),
        var(--grid) calc(var(--y1) - (var(--line-w) / 2)),
        var(--grid) calc(var(--y1) + (var(--line-w) / 2)),
        transparent calc(var(--y1) + (var(--line-w) / 2))
      );
  } /* header */
  .topbar {
    height: var(--headerH);
    z-index: calc(var(--z-header) + 100);
    display: block;
    padding: 0;
  }
  .nav-rail {
    height: var(--headerH);
    z-index: calc(var(--z-header) + 101);
    display: block;
    padding: 0;
  }
  .nav-links {
    display: none !important;
  }
  .logo-mount {
    left: calc(var(--x0) + clamp(10px, 2.6vw, 14px));
    top: calc(var(--headerH) / 2);
    transform: translateY(-50%);
    z-index: calc(var(--z-header) + 103);
  }
  .contact-pill {
    left: auto;
    right: calc(var(--x0) + var(--menuBtnW) + var(--menuGap));
    top: calc(var(--headerH) / 2);
    transform: translateY(-50%);
    min-width: 0;
    max-width: calc(100vw - ((var(--x0) * 2) + var(--menuBtnW) + 72px));
    height: clamp(26px, 5vw, 30px);
    padding: 0 clamp(10px, 2.2vw, 14px);
    font-size: clamp(7px, 1.7vw, 9px);
    letter-spacing: 0.06em;
    z-index: calc(var(--z-header) + 103);
  }
  .menu-toggle {
    display: inline-flex;
    position: fixed;
    right: var(--x0);
    top: calc(var(--headerH) / 2);
    transform: translateY(-50%);
    width: var(--menuBtnW);
    height: clamp(32px, 8vw, 36px);
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    pointer-events: auto;
    z-index: calc(var(--z-header) + 103);
    appearance: none;
    -webkit-appearance: none;
    transition: opacity 0.18s var(--ease);
  }
  .menu-toggle span {
    display: block;
    width: 16px;
    height: 2px;
    background: var(--bg);
    transition:
      transform 0.22s var(--ease),
      opacity 0.18s var(--ease);
  }
  .menu-toggle.is-open span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }
  .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: var(--headerH) 0 0 0;
    background: var(--bg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s var(--ease);
    z-index: calc(var(--z-header) + 104);
  }
  .mobile-menu {
    display: block;
    position: fixed;
    left: var(--x0);
    top: calc(var(--headerH) + 10px);
    width: var(--frameW);
    background: var(--bg);
    border: var(--line-w) solid var(--orange);
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition:
      opacity 0.22s var(--ease),
      transform 0.22s var(--ease);
    z-index: calc(var(--z-header) + 105);
    overflow: visible;
  }
  .mobile-menu a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 56px;
    padding: 0 16px;
    border-bottom: var(--line-w) solid var(--orange);
    text-decoration: none;
    color: var(--orange);
    background: var(--bg);
    font-family: var(--font-display);
    font-size: clamp(14px, 4.2vw, 18px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .mobile-menu a:last-child {
    border-bottom: none;
  }
  body.menu-open {
    overflow: hidden;
  }
  body.menu-open .mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body.menu-open .mobile-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  } /* hero */
  .hero {
    height: var(--vh);
    min-height: 0;
  }
  .hero-frame {
    left: var(--x0);
    top: var(--y0);
    width: var(--frameW);
    height: var(--frameH);
  }
  .frame-plus::before {
    font-size: 32px;
    -webkit-text-stroke: 1.5px var(--orange);
  }
  .hero-stage {
    --heroWordStackH: clamp(150px, 25vw, 250px);
    --upperHalfH: calc(var(--yCenter) - var(--y0));
    --upperHalfOffset: calc((var(--upperHalfH) - var(--heroWordStackH)) / 2);
    --heroCtaTop: calc(
      (var(--yCenter) - var(--y0)) + (var(--heroWordSize) * 0.1)
    );
    --heroPillH: 38px;
    --heroPillTop: calc(
      var(--heroCtaTop) + clamp(1px, calc(var(--frameW) * 0.02), 18px)
    );
    position: absolute;
    left: calc(var(--x0) / 2);
    top: var(--y0);
    width: var(--frameW);
    height: var(--frameH);
    padding: max(10px, var(--upperHalfOffset)) 18px
      calc(var(--frameH) - var(--upperHalfH)) 18px;
    display: grid;
    grid-template-columns: max-content max-content 1fr;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "odd unit ." "de de ." "creatieve creatieve creatieve" "design design design" "studio studio studio";
    column-gap: clamp(6px, 2vw, 14px);
    row-gap: 0.18rem;
    align-content: center;
    overflow: visible;
  }
  .hero-topline,
  .hero-dark,
  .hero-designline {
    display: contents !important;
  }
  .hero-bottomline {
    display: block !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
  }
  .hero-word,
  .hero-dark__de,
  .hero-dark__creatieve,
  .hero-dark__design {
    position: static !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto;
    height: auto;
    min-width: 0;
  }
  .hero-word {
    font-size: var(--heroWordSize);
    line-height: 0.82;
    color: var(--orange);
    z-index: 2;
  }
  .hero-dark__de,
  .hero-dark__creatieve,
  .hero-dark__design {
    display: block !important;
    font-size: var(--heroDarkSize);
    line-height: 0.82;
    color: var(--text-ghost);
    z-index: 1;
  }
  .word-odd {
    grid-area: odd;
    justify-self: start;
    margin-top: 15px;
  }
  .word-unit {
    grid-area: unit;
    justify-self: start;
    margin-top: 15px;
    margin-left: clamp(-2px, -0.6vw, -6px);
  }
  .hero-dark__de {
    grid-area: de;
    justify-self: start;
    margin-top: 1.5rem;
    /* font-size: var(--heroDeDarkSize); */
  }
  .hero-dark__creatieve {
    grid-area: creatieve;
    justify-self: start;
    margin-top: 1px;
  }
  .hero-dark__design {
    grid-area: design;
    justify-self: start;
    align-self: end;
    margin-top: 0;
  }
  .word-stu {
    grid-area: studio;
    justify-self: start;
    align-self: end;
    display: inline-flex !important;
    align-items: flex-end;
    font-size: 0;
    line-height: 1;
    margin-top: 2px;
  }
  .word-stu::before,
  .word-stu::after {
    font-family: var(--font-display);
    font-size: var(--heroWordSize);
    line-height: 0.82;
    color: var(--orange);
    letter-spacing: 0.02em;
  }
  .word-stu::before {
    content: "STU";
  }
  .word-stu::after {
    content: "DIO+";
    margin-left: 0.08em;
  }
  .word-dio {
    display: none !important;
  }
  .hero-copy {
    position: absolute !important;
    left: var(--x0);
    top: var(--heroCtaTop);
    /* width: min(300px, calc(50% - 28px)); */
    max-width: 300px;
    min-width: 0;
    font-size: clamp(0.95rem, calc(var(--frameW) * 0.038), 1.5rem);
    line-height: 1.12;
    letter-spacing: 0.08em;
    text-align: left;
    padding-left: 0.5rem;
    padding-top: 0.5rem;
    color: var(--orange);
    z-index: 4;
  }
  .hero-pill {
    position: absolute !important;
    left: 75%;
    right: auto;
    top: var(--heroPillTop);
    width: auto;
    min-width: clamp(150px, calc(var(--frameW) * 0.36), 208px);
    height: clamp(46px, calc(var(--frameW) * 0.105), 54px);
    padding: 0 26px;
    border-radius: 999px;
    background: var(--purple);
    border: 2px solid var(--bg);
    color: var(--bg);
    text-decoration: none;
    font-family: var(--font-jet);
    font-size: clamp(12px, 2.4vw, 12px);
    letter-spacing: 0.08em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    z-index: 4;
  }
  .hero-scroll {
    position: absolute !important;
    left: var(--x50);
    top: var(--mobile-scroll-top);
    bottom: auto;
    transform: none !important;
    width: calc(var(--x1) - var(--x50));
    height: auto;
    padding: 0;
    margin: 0;
    background: transparent !important;
    display: block;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--orange);
    z-index: 4;
    animation: mobileScrollFloat 1.5s ease-in-out infinite;
  }

  .hero-scroll::before {
    content: none !important;
    display: none !important;
  }
  .hero-scroll::before {
    content: "⌄";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 2rem;
    font-size: 2rem;
    line-height: 1;
    font-family: var(--font-display);
    color: var(--orange);
    pointer-events: none;
  }

  @media (min-width: 600px) {
    :root {
      --heroWordSize: clamp(3.35rem, calc(var(--frameW) * 0.086), 4.35rem);
      --heroDarkSize: calc(var(--heroWordSize) * 0.78);
    }

    .hero-stage {
      --heroWordStackH: clamp(190px, 28vw, 230px);
      --heroCtaTop: calc(
        (var(--yCenter) - var(--y0)) + clamp(58px, 7.5vw, 78px)
      );
      row-gap: 0.08rem;
    }

    .hero-dark__de {
      margin-top: clamp(0.75rem, 1.8vw, 1.1rem);
    }

    .hero-dark__creatieve,
    .hero-dark__design,
    .word-stu {
      margin-top: 0;
    }

    .hero-copy {
      top: var(--heroCtaTop);
      left: calc(var(--x0) + clamp(12px, 2.8vw, 24px));
      max-width: 18ch;
      font-size: clamp(1.05rem, calc(var(--frameW) * 0.027), 1.32rem);
      line-height: 1.12;
      padding-left: 0;
      padding-top: 0;
    }

    .hero-pill {
      top: calc(var(--heroCtaTop) + 4px);
      left: 75%;
      min-width: clamp(176px, calc(var(--frameW) * 0.29), 226px);
      height: clamp(46px, calc(var(--frameW) * 0.07), 54px);
    }
  }

  /* about */
  .about {
    position: relative;
    height: calc(var(--vh) - var(--headerH));
    max-height: none;
    min-height: calc(var(--vh) - var(--headerH));
    display: block;
    padding: 0;
  }
  .about-frame {
    position: absolute;
    left: var(--x0);
    top: 0;
    width: var(--frameW);
    height: var(--frameH);
    min-height: 0;
    margin: 0;
    display: grid;
    grid-template-rows: calc(var(--frameH) * 0.25) calc(var(--frameH) * 0.5);
    align-content: start;
    overflow: hidden !important;
  }
  .about-top {
    display: grid;
    grid-template-columns: 1fr !important;
    min-height: calc(var(--frameH) * 0.25);
    width: 100%;
  }
  .about-title {
    width: 100% !important;
    max-width: none !important;
    min-width: 0;
    border: var(--line-w) solid var(--orange) !important;
    display: grid;
    place-items: center;
    place-content: center;
    min-height: 0;
    height: 100%;
    padding: 10px 16px 14px;
  }
  .about-heading {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    font-size: clamp(28px, 7.8vw, 42px);
    line-height: 0.84;
    letter-spacing: 0.03em;
    text-align: center;
  }
  .about-modules {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    align-items: stretch !important;
    min-height: 0 !important;
    height: 100%;
    border-top: none !important;
    border-bottom: none !important;
  }
  .about-modules .module:last-child {
    grid-column: 1 / -1;
  }
  .about-modules .module:first-child {
    border-left: var(--line-w) solid var(--orange) !important;
    border-right: var(--line-w) solid var(--orange) !important;
  }
  .about-modules .module:nth-child(2) {
    border-right: var(--line-w) solid var(--orange) !important;
  }
  .module {
    height: 100% !important;
    min-height: 0 !important;
    border-bottom: var(--line-w) solid var(--orange) !important;
    border-right: none !important;
  }
  .about-modules .module:last-child {
    border-left: var(--line-w) solid var(--orange) !important;
    border-right: var(--line-w) solid var(--orange) !important;
  }
  .module-head {
    height: calc(100% - 26px) !important;
    padding: 0 16px 4px !important;
    font-size: clamp(13px, 3.8vw, 17px) !important;
    line-height: 0.96 !important;
    background: var(--bg) !important;
    color: var(--orange) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .module-strip {
    top: auto !important;
    bottom: 0 !important;
    height: 26px !important;
    z-index: 5 !important;
    transition:
      background 0.18s var(--ease),
      height 0.22s var(--ease);
  }
  .module-body {
    top: 0 !important;
    bottom: 26px !important;
    width: 100% !important;
    padding: 14px 16px 12px !important;
    border-top: none !important;
    opacity: 0 !important;
    clip-path: inset(0 0 100% 0) !important;
    pointer-events: none !important;
    z-index: 4 !important;
    font-size: 0.68rem !important;
    background: var(--bg) !important;
  }
  .module-body ul {
    font-size: 0.68rem !important;
    line-height: 1.22 !important;
  }
  .module-body li {
    padding-left: 12px !important;
  }
  .module.is-open .module-head {
    background: var(--orange) !important;
    color: #0a0a0a !important;
  }
  .module.is-open .module-strip {
    top: auto !important;
    bottom: 0 !important;
    height: 34px !important;
    background: #0a0a0a !important;
    border-top: var(--line-w) solid var(--orange);
  }
  .module-icon {
    transition: transform 0.18s var(--ease);
  }
  .module-icon::before,
  .module-icon::after {
    transition:
      transform 0.18s var(--ease),
      width 0.18s var(--ease),
      height 0.18s var(--ease),
      left 0.18s var(--ease),
      top 0.18s var(--ease),
      background 0.18s var(--ease);
  }
  .module.is-open .module-icon::before,
  .module.is-open .module-icon::after {
    width: calc(var(--icon) * 0.72);
    height: var(--stroke);
    top: 52%;
    background: var(--orange);
  }
  .module.is-open .module-icon::before {
    left: 46%;
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .module.is-open .module-icon::after {
    left: 54%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
  .module.is-open .module-body {
    top: 0 !important;
    bottom: 34px !important;
    opacity: 1 !important;
    clip-path: inset(0 0 0 0) !important;
    pointer-events: auto !important;
  }
  .about-scroll,
  .projects-scroll,
  .socials-scroll,
  .contact-scroll {
    position: absolute !important;
    left: var(--x50) !important;
    top: var(--mobile-scroll-top) !important;
    bottom: auto !important;
    transform: none !important;
    width: calc(var(--x1) - var(--x50));
    height: auto;
    padding: 0;
    margin: 0;
    background: transparent !important;
    display: block;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 0.7rem;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    color: var(--orange);
    z-index: 4;
    animation: mobileScrollFloat 1.5s ease-in-out infinite;
  }
  .about-scroll,
  .projects-scroll,
  .socials-scroll,
  .contact-scroll,
  .hero-scroll {
    text-align: center;
    z-index: calc(var(--z-frame) + 8);
    pointer-events: auto;
  }
  .about-scroll::before,
  .projects-scroll::before,
  .socials-scroll::before,
  .contact-scroll::before {
    content: "⌄";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    width: 2rem;
    font-size: 2rem;
    line-height: 1;
    font-family: var(--font-display);
    color: var(--orange);
    pointer-events: none;
  } /* projects */

  .about-scroll::before,
  .projects-scroll::before,
  .socials-scroll::before,
  .contact-scroll::before {
    content: none !important;
    display: none !important;
  }

  .projects {
    min-height: calc(var(--vh) * var(--projectsScrollFactor));
  }
  .projects-scroll-space {
    min-height: calc(var(--vh) * var(--projectsScrollFactor));
  }
  .projects-frame {
    --projectsLeftW: 100%;
    --projectsRightW: 100%;
    --projectsTopH: calc(var(--yCenter) - var(--y0));
    --projectsBottomH: calc(var(--yQuarterBottom) - var(--yCenter));
    height: var(--frameH);
  }
  .projects-canvas-cell {
    width: 100%;
    height: var(--projectsTopH);
    border-bottom: var(--line-w) solid var(--orange);
  }
  #projectsCanvas {
    pointer-events: none;
  }
  .projects-side {
    top: var(--projectsTopH);
    left: 0;
    width: 50%;
    height: var(--projectsBottomH);
    border-left: none;
    min-height: 0;
    overflow: visible;
  }
  .projects-side-top {
    border-bottom: none;
    border-right: var(--line-w) solid var(--orange);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .projects-scroll {
    left: var(--x50) !important;
  }

  .projects-side-bottom {
    left: 50%;
    padding: 12px;
    grid-template-rows: minmax(0, 1fr) auto;
  }
  .projects-kicker {
    display: none;
  }
  .projects-title {
    font-size: clamp(28px, 8.6vw, 44px);
    text-align: center;
    margin: 0;
  }
  .projects-meta {
    display: none;
  }
  .projects-meta-label {
    font-size: 8px;
  }
  .projects-meta-value {
    font-size: 10px;
  }
  .projects-ticker {
    display: none;
  }
  .projects-desc {
    font-size: 11px;
    line-height: 1.4;
    padding-right: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .projects-cta {
    position: absolute;
    left: 0;
    top: 100%;
    width: calc(100% - 24px);
    min-height: 38px;
    height: 38px;
    margin: 12px;
    font-size: 9px;
    letter-spacing: 0.08em;
    border-radius: 999px;
    z-index: calc(var(--z-frame) + 7);
  }
  .projects-dots {
    gap: 6px;
  }
  .projects-dot {
    width: 20px;
    height: 2px;
  }

  .hero-scroll,
  .about-scroll,
  .projects-scroll,
  .socials-scroll,
  .contact-scroll {
    position: fixed !important;
    left: calc(var(--x50) + (var(--line-w) / 2)) !important;
    right: calc(100% - var(--x1) + (var(--line-w) / 2)) !important;
    top: var(--yQuarterBottom) !important;
    bottom: auto !important;
    transform: none !important;
    width: auto;
    height: calc(var(--y1) - var(--yQuarterBottom));
    margin: 0;
    padding: 0 12px var(--mobile-scroll-bottom-pad);
    box-sizing: border-box;
    background: transparent !important;
    display: grid !important;
    align-items: end;
    justify-items: center;
    white-space: nowrap;
    text-align: center;
    z-index: calc(var(--z-frame) + 8);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    animation: mobileScrollFloat 1.5s ease-in-out infinite;
  }

  .hero-scroll::before,
  .about-scroll::before,
  .projects-scroll::before,
  .socials-scroll::before,
  .contact-scroll::before {
    content: none !important;
    display: none !important;
  }

  body[data-active-section="hero"] .hero-scroll,
  body[data-active-section="about"] .about-scroll,
  body[data-active-section="projects"] .projects-scroll,
  body[data-active-section="socials"] .socials-scroll,
  body[data-active-section="contact"] .contact-scroll {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .projects-frame > .frame-plus {
    display: block;
  }
  .projects-mobile-next {
    display: grid;
    place-items: center;
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: 2px solid var(--orange);
    border-radius: 999px;
    background: rgba(7, 7, 7);
    z-index: 6;
    cursor: pointer;
    pointer-events: auto;
  }
  .projects-mobile-next::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--orange);
    border-right: 2px solid var(--orange);
    transform: translateX(-1px) rotate(45deg);
  }
  .projects-mobile-next:active {
    transform: translateY(-50%) scale(0.96);
  }
}
@media (max-width: 480px) {
  .hero-scroll,
  .about-scroll,
  .projects-scroll,
  .socials-scroll,
  .contact-scroll {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 0.64rem;
    letter-spacing: 0.1em;
  }

  .contact-pill {
    max-width: calc(100vw - ((var(--x0) * 2) + var(--menuBtnW) + 60px));
    font-size: 8px;
    letter-spacing: 0.04em;
  }
  .mobile-menu a {
    min-height: 52px;
    padding: 0 14px;
    font-size: clamp(12px, 4.1vw, 16px);
  }
  .menu-toggle {
    width: 40px;
    height: 32px;
  }
  .menu-toggle span {
    width: 15px;
  }
}

/* ========================================================= FAQ ========================================================= */
.faq {
  position: relative;
  height: var(--vh);
  z-index: calc(var(--z-content) + 5);
  --faqTopH: calc(var(--frameH) * 0.24);
  --faqPad: clamp(14px, calc(var(--frameW) * 0.013), 22px);
  --faqStripW: clamp(38px, calc(var(--frameW) * 0.05), 52px);
  --faqHeadingSize: clamp(34px, calc(var(--frameW) * 0.039), 72px);
  --faqCopySize: clamp(11px, calc(var(--frameW) * 0.0088), 15px);
  --faqQuestionSize: clamp(14px, calc(var(--frameW) * 0.0118), 22px);
  --faqAnswerSize: clamp(11px, calc(var(--frameW) * 0.0083), 13px);
  --faqNumberSize: clamp(9px, calc(var(--frameW) * 0.0068), 12px);
}

.faq-frame {
  position: absolute;
  left: var(--x0);
  top: var(--y0);
  width: var(--frameW);
  height: var(--frameH);
  display: grid;
  grid-template-rows: var(--faqTopH) minmax(0, 1fr);
  min-height: 0;
}

.faq-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

.faq-titlebox,
.faq-intro,
.faq-item {
  background: var(--bg);
}

.faq-titlebox {
  border: var(--line-w) solid var(--orange);
  padding: clamp(18px, calc(var(--frameW) * 0.022), 40px);
  display: grid;
  align-content: center;
  gap: 18px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.faq-kicker {
  margin: 0;
  font-family: var(--font-jet);
  font-size: clamp(10px, calc(var(--frameW) * 0.0072), 13px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 107, 0, 0.72);
}

.faq-heading {
  margin: 0;
  width: min(100%, 6.8ch);
  display: grid;
  gap: 0;
  font-family: var(--font-display);
  font-size: var(--faqHeadingSize);
  line-height: 0.82;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--orange);
}

.faq-heading span {
  display: block;
}

.faq-intro {
  border-top: var(--line-w) solid var(--orange);
  border-right: var(--line-w) solid var(--orange);
  border-bottom: var(--line-w) solid var(--orange);
  padding: clamp(18px, calc(var(--frameW) * 0.018), 32px);
  display: grid;
  align-content: center;
  gap: 18px;
  min-width: 0;
  min-height: 0;
}

.faq-copy {
  margin: 0;
  max-width: 34ch;
  font-family: var(--font-jet);
  font-size: var(--faqCopySize);
  line-height: 1.65;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.84);
}

.faq-list {
  min-height: 0;
  height: 100%;
  border-left: var(--line-w) solid var(--orange);
  border-right: var(--line-w) solid var(--orange);
  border-bottom: var(--line-w) solid var(--orange);
  background: var(--bg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  overflow: hidden;
}

.faq-column {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.faq-column:first-child {
  border-right: var(--line-w) solid var(--orange);
}

.faq-item {
  position: relative;
  min-width: 0;
  min-height: 0;
  height: auto;
  align-self: stretch;
  border-top: var(--line-w) solid var(--orange);
  border-right: var(--line-w) solid var(--orange);
  background: var(--bg);
  transition: background 0.18s var(--ease);
  overflow: hidden;
  isolation: isolate;
}

.faq-item::before {
  content: attr(data-faq);
  position: absolute;
  top: var(--faqPad);
  left: var(--faqPad);
  z-index: 4;
  font-family: var(--font-jet);
  font-size: var(--faqNumberSize);
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 107, 0, 0.62);
  pointer-events: none;
}

.faq-item:hover {
  background: rgba(255, 107, 0, 0.025);
}

.faq-question {
  appearance: none;
  border: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  position: relative;
  cursor: pointer;
  padding: 0;
  text-align: left;
  z-index: 3;
  display: block;
}

.faq-question__text {
  position: absolute;
  top: 0;
  right: var(--faqStripW);
  bottom: 0;
  left: 0;
  padding: calc(var(--faqPad) + 14px) var(--faqPad) var(--faqPad);
  background: var(--bg);
  font-family: var(--font-display);
  font-size: var(--faqQuestionSize);
  line-height: 0.95;
  letter-spacing: 0.02em;
  color: var(--orange);
  text-wrap: balance;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  transition:
    opacity 0.16s var(--ease),
    visibility 0.16s var(--ease),
    transform 0.22s var(--ease);
}

.faq-question::before {
  content: none;
}

.faq-question__strip {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--faqStripW);
  background: var(--orange);
  display: grid;
  place-items: center;
  z-index: 4;
  transition:
    right 0.22s var(--ease),
    left 0.22s var(--ease);
}

.faq-icon {
  --icon: clamp(16px, calc(var(--frameW) * 0.0102), 22px);
  --stroke: clamp(2px, calc(var(--frameW) * 0.0016), 3px);
  transform: none;
  transition: transform 0.18s var(--ease);
}

.faq-icon::before,
.faq-icon::after {
  background: var(--bg);
  transition:
    transform 0.18s var(--ease),
    width 0.18s var(--ease),
    height 0.18s var(--ease),
    left 0.18s var(--ease),
    top 0.18s var(--ease),
    background 0.18s var(--ease);
}

.faq-answer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: calc(var(--faqPad) + 2px) var(--faqPad) var(--faqPad)
    calc(var(--faqPad) + 16px);
  font-family: var(--font-jet);
  font-size: var(--faqAnswerSize);
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.84);
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
  transition:
    opacity 0.16s var(--ease),
    visibility 0.16s var(--ease),
    transform 0.22s var(--ease);
}

.faq-item.is-open .faq-question__text {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-20px);
}

.faq-item.is-open .faq-answer {
  opacity: 1;
  visibility: visible;
  padding-left: calc(var(--faqPad) + var(--faqStripW) + 16px);
}

.faq-item.is-open .faq-question__strip {
  left: 0;
  right: auto;
  background: var(--bg);
  border-right: var(--line-w) solid var(--orange);
}

.faq-item.is-open .faq-icon::before,
.faq-item.is-open .faq-icon::after {
  width: calc(var(--icon) * 0.72);
  height: var(--stroke);
  top: 52%;
  background: var(--orange);
}

.faq-item.is-open .faq-icon::before {
  left: 46%;
  transform: translate(-50%, -50%) rotate(45deg);
}

.faq-item.is-open .faq-icon::after {
  left: 54%;
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (min-width: 901px) and (max-width: 1360px),
  (min-width: 901px) and (max-height: 820px) {
  .faq {
    --faqTopH: calc(var(--frameH) * 0.28);
    --faqPad: clamp(12px, calc(var(--frameW) * 0.011), 18px);
    --faqStripW: clamp(34px, calc(var(--frameW) * 0.044), 46px);
    --faqHeadingSize: clamp(28px, calc(var(--frameW) * 0.031), 58px);
    --faqCopySize: clamp(10px, calc(var(--frameW) * 0.0076), 13px);
    --faqQuestionSize: clamp(12px, calc(var(--frameW) * 0.0098), 18px);
    --faqAnswerSize: clamp(10px, calc(var(--frameW) * 0.0074), 12px);
  }

  .faq-top {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .faq-titlebox {
    padding: 16px 18px 18px;
    gap: 12px;
  }

  .faq-intro {
    padding: 16px 18px;
  }

  .faq-heading {
    width: min(100%, 7.4ch);
    line-height: 0.84;
  }

  .faq-copy {
    max-width: 40ch;
    line-height: 1.55;
  }

  .faq-question__text {
    padding: calc(var(--faqPad) + 12px) var(--faqPad) var(--faqPad);
  }
}

@media (max-width: 900px) {
  .faq {
    position: relative;
    height: calc(var(--vh) - var(--headerH));
    min-height: calc(var(--vh) - var(--headerH));
    overflow: hidden;
  }

  .faq-frame {
    position: absolute;
    left: var(--x0);
    top: 0;
    width: var(--frameW);
    height: var(--frameH);
    min-height: 0;
    display: grid;
    grid-template-rows: var(--mobile-section-top-h) minmax(0, 1fr);
    align-content: start;
  }

  .faq-top {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 0;
    height: 100%;
  }
  @media (max-width: 900px) {
    .faq {
      position: relative;
      height: calc(var(--vh) - var(--headerH));
      min-height: calc(var(--vh) - var(--headerH));
      overflow: hidden;
    }

    .faq-frame {
      position: absolute;
      left: var(--x0);
      top: 0;
      width: var(--frameW);
      height: var(--frameH);
      min-height: 0;
      display: grid;
      grid-template-rows: var(--mobile-section-top-h) minmax(0, 1fr);
      align-content: start;
    }

    .faq-top {
      display: grid;
      grid-template-columns: 1fr;
      min-height: 0;
      height: 100%;
    }

    .faq-titlebox {
      height: 100%;
      min-height: 0;
      padding: 10px 12px 14px;
      border: var(--line-w) solid var(--orange);
      display: grid;
      place-items: center;
      place-content: center;
      gap: 8px;
      text-align: center;
    }

    .faq-kicker {
      font-size: clamp(8px, 2.1vw, 10px);
      line-height: 1;
      text-align: center;
    }

    .faq-heading {
      width: 100%;
      font-size: clamp(28px, 8.2vw, 42px);
      line-height: 0.84;
    }

    .faq-intro {
      display: none;
    }

    .faq-list {
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 107, 0, 0.55) rgba(255, 107, 0, 0.08);
      -webkit-overflow-scrolling: touch;
    }

    .faq-column:first-child {
      border-right: 0;
    }

    .faq-column {
      display: contents;
    }

    .faq-item {
      flex: none;
      border-right: 0;
      height: auto;
      min-height: 156px;
      overflow: hidden;
    }

    .faq-item[data-faq="01"] {
      order: 1;
    }

    .faq-item[data-faq="02"] {
      order: 2;
    }

    .faq-item[data-faq="03"] {
      order: 3;
    }

    .faq-item[data-faq="04"] {
      order: 4;
    }

    .faq-item[data-faq="05"] {
      order: 5;
    }

    .faq-item[data-faq="06"] {
      order: 6;
    }

    .faq-item[data-faq="07"] {
      order: 7;
    }

    .faq-item[data-faq="08"] {
      order: 8;
    }

    .faq-item::before {
      top: 14px;
      left: 14px;
      font-size: 9px;
    }

    .faq-question {
      min-height: 156px;
      height: auto;
    }

    .faq-question__text {
      position: relative;
      top: auto;
      right: auto;
      bottom: auto;
      left: auto;
      min-height: 156px;
      padding: 24px 52px 12px 12px;
      font-size: 12px;
      line-height: 0.9;
      letter-spacing: 0.015em;
      justify-content: center;
      align-items: center;
      text-align: center;
      text-wrap: balance;
      overflow-wrap: break-word;
    }

    .faq-question__strip {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 36px;
      right: 0;
      left: auto;
    }

    .faq-answer {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      padding: 10px 12px 12px;
      font-size: 10px;
      line-height: 1.5;
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      overflow: hidden;
      transform: none;
    }

    .faq-item.is-open .faq-question__text {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transform: translateX(-16px);
    }

    .faq-item.is-open .faq-answer {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      padding-left: 52px;
    }

    .faq-item.is-open .faq-question__strip {
      left: 0;
      right: auto;
    }
  }

  /* ========================================================= UTILITIES / MOTION ========================================================= */
  #about,
  #projects,
  #socials,
  #contact,
  #newsletter,
  #faq {
    scroll-margin-top: var(--headerH, 56px);
  }
  @keyframes mobileScrollFloat {
    0%,
    100% {
      transform: translateY(0);
      opacity: 0.75;
    }
    50% {
      transform: translateY(6px);
      opacity: 1;
    }
  }
}