/* ==========================================================================
   Nodal — layout + motion rebuild of a Nuxt/GSAP single-page site.
   Grid, type scale, spacing and easing follow the reference 1:1.
   ========================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
img, picture, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { background: unset; border: unset; color: unset; font: inherit; letter-spacing: inherit; margin: unset; padding: unset; width: fit-content; }
h1, h2, h3, h4, h5, h6 { all: unset; line-height: 100%; }
a { color: inherit; text-decoration: none; }
a, button { cursor: pointer; }
li, ul { list-style: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- tokens ---------- */
:root {
  --c-bg: #ede8e8;
  --c-light: #fff;
  --c-dark: #000;
  --c-accent: #beff8b;
  --c-secondary: #d5bafb;
  --c-text: #000;
  --c-bg-brand: #9dbbc5;
  --c-placeholder: #c0dfe9;
  --radius: 1.4rem;
  --radius-s: 1rem;

  --columns: 6;
  --gutter: 1rem;
  --width: calc(100vw - 2rem);
  --size: 390;
  --offset: calc((100vw - var(--width)) / 2);
  --offset-half: calc((100vw - var(--width)) / 4);
  --offset-double: calc(100vw - var(--width));
  --gutter-half: calc(var(--gutter) / 2);
  --gutter-double: calc(var(--gutter) * 2);
  --height: 100svh;
  --col: calc((var(--width) - (var(--columns) - 1) * var(--gutter)) / var(--columns));
  --col-1: calc(var(--col) * 1);
  --col-2: calc(var(--col) * 2 + var(--gutter) * 1);
  --col-3: calc(var(--col) * 3 + var(--gutter) * 2);
  --col-4: calc(var(--col) * 4 + var(--gutter) * 3);
  --col-5: calc(var(--col) * 5 + var(--gutter) * 4);
  --col-6: calc(var(--col) * 6 + var(--gutter) * 5);
  --col-7: calc(var(--col) * 7 + var(--gutter) * 6);
  --col-8: calc(var(--col) * 8 + var(--gutter) * 7);
  --col-9: calc(var(--col) * 9 + var(--gutter) * 8);
  --col-10: calc(var(--col) * 10 + var(--gutter) * 9);

  --ease-smooth: cubic-bezier(.5, 0, 0, 1);
  --ease-expo: cubic-bezier(.19, 1, .22, 1);

  --ff-base: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-display: "Unbounded", "Inter Tight", Helvetica, sans-serif;
}
@media screen and (min-width: 768px) {
  :root { --columns: 10; --gutter: 2rem; --width: calc(100vw - 5rem); --size: 1024; }
}
@media screen and (min-width: 1024px) {
  :root { --columns: 10; --gutter: 4rem; --width: calc(100vw - 5rem); --size: 1920; }
}

/* ---------- base ---------- */
html { font-size: calc(100vw / var(--size) * 10); }
html, body { font-kerning: none; text-rendering: optimizeSpeed; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
html { scrollbar-width: none; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
body {
  background-color: var(--c-bg);
  color: #000;
  font-family: var(--ff-base);
  font-weight: 500;
  letter-spacing: -.035em;
  font-size: 1.6rem;
  line-height: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#app { min-height: var(--height); }
::selection { background: var(--c-secondary); color: var(--c-accent); }
:focus-visible { border-radius: var(--radius); outline: 2px solid currentColor; outline-offset: 4px; }
body.is-loading { cursor: wait; }

/* ---------- utilities ---------- */
.ff-base { font-family: var(--ff-base); font-weight: 500; }
.ff-regular { font-family: var(--ff-base); font-weight: 400; letter-spacing: -.045em; }
.ff-display { font-family: var(--ff-display); font-weight: 300; letter-spacing: -.02em; }
.fs-130 { font-size: clamp(3rem, .4509803922rem + 6.5359477124vw, 13rem); line-height: 1.1; }
.fs-title-card { font-size: clamp(6rem, 4.2156862745rem + 4.5751633987vw, 13rem); line-height: 1.1; }
.fs-100 { font-size: clamp(3rem, 1.2156862745rem + 4.5751633987vw, 10rem); line-height: 1.1; }
.fs-70 { font-size: clamp(2.8rem, 1.7294117647rem + 2.7450980392vw, 7rem); line-height: 1.1; }
.fs-50 { font-size: clamp(2.5rem, 1.862745098rem + 1.6339869281vw, 5rem); line-height: 1.1; }
.fs-40 { font-size: clamp(2rem, 1.4901960784rem + 1.3071895425vw, 4rem); line-height: 1.1; }
.fs-20 { font-size: clamp(1.6rem, 1.4980392157rem + .2614379085vw, 2rem); line-height: 1.1; }
.fs-base, body { font-size: clamp(1.2rem, 1.0980392157rem + .2614379085vw, 1.6rem); line-height: 1.1; }
.sp-200 { margin-bottom: clamp(10rem, 7.4509803922rem + 6.5359477124vw, 20rem); }
.sp-100 { margin-bottom: clamp(5rem, 3.7254901961rem + 3.2679738562vw, 10rem); }
.sp-60 { margin-bottom: clamp(3rem, 2.2352941176rem + 1.9607843137vw, 6rem); }
.sp-40 { margin-bottom: clamp(2rem, 1.4901960784rem + 1.3071895425vw, 4rem); }
.sp-20 { margin-bottom: clamp(1.5rem, 1.3725490196rem + .3267973856vw, 2rem); }
.c-accent { color: var(--c-accent); }
.tt-u { text-transform: uppercase; }
.tt-c { text-transform: capitalize; }
.ta-c { text-align: center; }
.ta-r { text-align: right; }
.br { white-space: break-spaces; }
@media screen and (min-width: 1024px) {
  .col-4-d { width: var(--col-4); } .col-6-d { width: var(--col-6); } .col-8-d { width: var(--col-8); }
}
@media screen and (min-width: 768px) and (max-width: 1023.8px) {
  .col-4-t { width: var(--col-4); } .col-7-t { width: var(--col-7); }
}
@media screen and (max-width: 767.8px) {
  .col-5-m { width: var(--col-5); } .col-6-m { width: var(--col-6); }
}

/* ---------- text reveal (SplitText lines/words, masked) ---------- */
.js-text { display: inline-block; }
.js-text .line, .js-text .word { transform: translateY(var(--y-percent, 105%)); }
.js-text .line-mask { clip-path: inset(-10% 0 0 0); display: inline-block !important; overflow: visible !important; }
.js-text .word-mask { clip-path: inset(-10% 0 -10% 0); overflow: visible !important; }
.js-text.is-inview .line, .js-text.is-inview .word {
  transform: translateY(0);
  transition: transform var(--speed, .75s) var(--ease-expo) calc(var(--index, 0) * var(--stagger, .1s) + var(--delay, .15s));
}
.js-text:not(.is-inview) .line { transition: none; }

/* mini title */
.mini-t { display: flex; }
.mini-t__index { display: inline-flex; margin-right: var(--gutter); width: var(--col-1); }

/* text with two goo bullets */
.text .js-text { display: inline; }
.text .text__bullet {
  align-items: center; display: inline-flex; height: 1cap; justify-content: space-between;
  margin-right: var(--gutter); transform: translateY(-20%); width: var(--col-1);
}
@media screen and (min-width: 1024px) { .text .text__bullet { filter: url(#meta); } }
.text .text__bullet__el { background: var(--c-accent); border-radius: 3rem; height: 3rem; width: 3rem; scale: 0; }
@media screen and (max-width: 1023.8px) { .text .text__bullet__el { height: 1.5rem; width: 1.5rem; } }
.text.is-inview .text__bullet__el { scale: 1; transition: scale 1s var(--ease-smooth), transform 1s var(--ease-smooth) .5s; will-change: transform; }
.text.is-inview .text__bullet__el:first-child { transform: translate(calc(var(--col-1) / 2 - 50%)); }
.text.is-inview .text__bullet__el:nth-child(2) { transform: translate(calc(var(--col-1) / 2 * -1 + 50%)); }
.svg-defs { position: absolute; width: 0; height: 0; visibility: hidden; }

/* ---------- link (line roll on hover) ---------- */
.link { cursor: pointer; display: inline-flex; height: fit-content; line-height: 100%; position: relative; width: fit-content; }
.link::after { content: ""; inset: -100%; position: absolute; }
.link .link-line { display: inline-flex; line-height: 1.4cap; position: relative; width: 100%; transition: transform 1s var(--ease-expo) calc(.1s * var(--index, 0)); }
.link .link-line::after { bottom: -120%; content: attr(data-label); left: 0; position: absolute; }
.link:hover .link-line { transform: translateY(-120%); }
.link .line-mask, .link .link-line-mask { clip-path: inset(-20% 0 -10% 0); }

/* ---------- media slot (canvas stands in for video) ---------- */
.media { background: var(--c-placeholder); position: relative; }
.media canvas { display: block; height: 100%; width: 100%; opacity: 0; transition: opacity .5s ease; }
.media.is-ready canvas { opacity: 1; }

/* ---------- layout ---------- */
.container { margin-left: auto; margin-right: auto; position: relative; width: var(--width); display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media screen and (min-width: 1024px) { .container { width: calc(var(--width) - var(--offset) * 2); } }
.container.small { max-width: var(--col-8); align-items: stretch; }
.page__inner { min-height: var(--height); }

/* section head: n.00x — TITLE — n.00x */
.s-head { align-items: center; border-bottom: 1px solid; display: flex; justify-content: center; padding: clamp(3rem, 2.2352941176rem + 1.9607843137vw, 6rem); width: 100%; }
.s-head__inner { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: space-between; max-width: var(--col-8); place-content: center; width: 100%; }

/* ---------- loader ---------- */
#app-loader {
  align-items: center; background: var(--c-accent); color: var(--c-text); display: flex;
  height: var(--height); justify-content: center; left: 0; overflow: hidden; position: fixed; top: 0; width: 100vw; z-index: 40;
}
#app-loader.is-done { pointer-events: none; }
#app-loader .progress { background: #000; bottom: var(--offset); height: 2px; transform: scaleX(0); transform-origin: left; }
#app-loader .number, #app-loader .progress { left: var(--offset); position: absolute; width: var(--width); }
#app-loader .number { bottom: calc(var(--offset) + var(--offset-half)); display: flex; }
#app-loader h3 { align-items: center; display: flex; flex-direction: column; justify-content: center; text-align: center; }
@media screen and (min-width: 768px) { #app-loader h3 { flex-direction: row; width: var(--col-8); } }
#app-loader .mask { clip-path: inset(-10% 0 0 0); display: inline-block; white-space: pre; }
#app-loader .word { display: flex; transform: translateY(105%); }

/* ---------- page transition grid (6 x 10 cells) ---------- */
#transition { display: grid; grid-template-rows: auto; height: var(--height); left: 0; pointer-events: none; position: fixed; top: 0; width: 100vw; z-index: 20; }
.transition__line { display: grid; grid-auto-flow: column; }
.transition__cell { background: var(--c-accent); opacity: 0; }
.transition__text { clip-path: inset(-10% -10% -10% -10%); place-self: center; position: absolute; z-index: 2; }
.transition__text__word { color: #fff; display: flex; text-transform: capitalize; transform: translateY(110%); }

/* ---------- cursor ---------- */
#cursor {
  aspect-ratio: 1; background: var(--c-accent); border-radius: 1.2rem; left: 0; top: 0; pointer-events: none; position: fixed;
  transform: translate3d(calc(var(--x, -40) * 1px), calc(var(--y, -40) * 1px), 0); width: 1.2rem; z-index: 45;
}
@media screen and (max-width: 767.8px) { #cursor { display: none; } }

/* ---------- bottom navigation ---------- */
.site-nav {
  bottom: var(--offset); display: flex; justify-content: space-between; left: 0; margin: 0 auto; pointer-events: none;
  position: fixed; right: 0; transition: transform .5s var(--ease-smooth); width: calc(var(--width) - var(--offset-double)); z-index: 25;
}
.hide-nav .site-nav, .lenis-scrolling.scrolling-down .site-nav { transform: translateY(150%); }
@media screen and (max-width: 1023.8px) { .hide-touch-nav .site-nav { transform: translateY(150%); } }
@media screen and (min-width: 768px) { html:has(body.has-menu) .site-nav { transform: translateY(150%); } }

/* section switcher (left) — collapses to the active pill, expands on hover */
.switcher { position: relative; }
@media screen and (max-width: 767.8px) { .switcher { display: none; } }
.switcher__inner { align-items: center; padding: 1rem; pointer-events: all; position: relative; z-index: 10; border-radius: 100px; display: flex; height: 6rem; }
.switcher__bg {
  backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem);
  background-color: color-mix(in oklab, var(--c-light) 40%, transparent);
  border-radius: 100px; display: flex; height: 6rem; left: 0; position: absolute; top: 0; width: var(--w, 20rem); z-index: 5;
}
.switcher__item-bg { background: var(--c-accent); border-radius: 100px; display: flex; height: 4rem; position: absolute; left: 1rem; width: 10rem; z-index: 10; }
.switcher__list { position: relative; z-index: 10; }
.switcher__list-inner { display: flex; position: relative; z-index: 11; }
.switcher__item { border-radius: 100px; }
.switcher__button { cursor: pointer; height: 4rem; padding: 0 3rem; white-space: nowrap; }
.switcher__button span { display: flex; height: .8cap; line-height: .9; position: relative; }

/* main nav (right) */
.nav {
  backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem);
  background-color: color-mix(in oklab, var(--c-light) 40%, transparent);
  border-radius: 100px; display: flex; height: 6rem; padding: 1rem; pointer-events: all; position: relative; width: fit-content; z-index: 15; margin-left: auto;
}
@media screen and (max-width: 767.8px) { .nav { width: 100%; } }
.nav__list { display: flex; }
@media screen and (max-width: 767.8px) { .nav__list { justify-content: space-between; width: 100%; } }
.nav__item { cursor: pointer; position: relative; transition: margin-left .5s var(--ease-expo); }
.nav__item::before {
  background: var(--c-accent); border-radius: 100px; content: ""; height: 100%; pointer-events: none; position: absolute; left: 0; top: 0;
  transform: scale(0); transition: transform .5s var(--ease-expo); width: 100%; z-index: 5;
}
.nav__item.is-highlighted { margin-left: 1rem; }
.nav__item.is-highlighted::before { transform: scale(1); }
.nav__item.is-highlighted:hover::before { transform: scale(.95); }
.nav__item.is-highlighted:active::before { transform: scale(.9); }
.nav__item.is-active { margin-left: 1rem; }
.nav__item:first-child.is-active { margin-left: 0; }
.nav__button { cursor: pointer; height: 4rem; padding: 0 3rem; position: relative; text-transform: capitalize; z-index: 10; }
.nav__button > span { display: flex; height: .8cap; line-height: .9; position: relative; }
.nav__button > span::before {
  background: var(--c-accent); border-radius: .8rem; content: ""; height: .8rem; left: -1.5rem; position: absolute; top: .2rem;
  transform: scale(0); transition: transform .5s var(--ease-expo); width: .8rem;
}
.is-active .nav__button > span::before { transform: scale(1); }
.is-active .nav__button > span { pointer-events: none; }
.nav .only-touch { display: none; }
@media screen and (max-width: 1023.8px) { .nav .only-touch { display: inline-block; } .nav .only-desktop { display: none; } }

/* ---------- recap menu (5 fanned cards) ---------- */
#menu {
  align-items: center; display: flex; height: var(--height); pointer-events: none; position: fixed; top: 0; left: 0; visibility: hidden; width: 100vw; z-index: 20;
}
@media screen and (min-width: 1024px) { #menu { padding: 2.5rem; } }
.menu__inner { display: flex; flex-wrap: nowrap; gap: var(--gutter); height: 100%; padding: 2.5rem; width: 100%; }
.menu__inner::-webkit-scrollbar { display: none; }
@media screen and (min-width: 1024px) {
  .menu__inner { gap: 0; padding: 0; }
  .menu__inner:has(.card:nth-child(2):hover) .card:nth-child(-n+1),
  .menu__inner:has(.card:nth-child(3):hover) .card:nth-child(-n+2),
  .menu__inner:has(.card:nth-child(4):hover) .card:nth-child(-n+3),
  .menu__inner:has(.card:nth-child(5):hover) .card:nth-child(-n+4) { --x: calc(var(--distance) * -1.2); }
  .menu__inner:has(.card:first-child:hover) .card:nth-child(n+2),
  .menu__inner:has(.card:nth-child(2):hover) .card:nth-child(n+3),
  .menu__inner:has(.card:nth-child(3):hover) .card:nth-child(n+4),
  .menu__inner:has(.card:nth-child(4):hover) .card:nth-child(n+5) { --x: calc(var(--distance) * 1.2); }
}
@media screen and (max-width: 1023.8px) { .menu__inner { scroll-padding-inline: 2.5rem; scroll-snap-type: x mandatory; scrollbar-width: none; } }
.menu__close {
  background: #000; border-radius: 10rem; bottom: var(--offset); color: #fff; cursor: pointer; height: 6rem; left: 0; right: 0; margin: 0 auto;
  padding: .4rem 3.5rem 0; position: absolute; transform: translateY(150%) scale(0); transition: transform .5s var(--ease-smooth); z-index: 22;
}
body.has-menu .menu__close { transform: translateY(0) scale(1); transition: transform .5s var(--ease-smooth) 1s; }

.card {
  --x: 0px; --y: 0%;
  background: var(--c-light); border-radius: var(--radius); cursor: pointer; display: grid; gap: 5rem;
  grid-template-rows: auto 1fr 1fr auto; height: 100%; min-width: calc(var(--col-3) + var(--gutter)); overflow: hidden;
  padding: var(--offset); position: relative; transform: translate(var(--x)) translateY(var(--y));
  transition: transform 1s var(--ease-expo); width: calc(var(--col-3) + var(--gutter)); will-change: transform; z-index: var(--z-index);
}
.card[data-rows="3"] { grid-template-rows: auto 1fr auto; }
.card::before { content: ""; position: absolute; inset: -20px; }
.card:nth-child(2n) { background: var(--c-placeholder); }
.card.is-active { z-index: 10 !important; }
.card__top { border-bottom: 1px solid var(--c-text); position: relative; }
.card__top span { display: inline-flex; height: 1cap; line-height: 1.5; position: relative; }
.card__top__inner { display: flex; justify-content: space-between; }
.card__top__inner span { height: auto; line-height: .8; }
@media screen and (min-width: 1024px) {
  .menu__inner.is-hovered .card:not(.is-active) { --y: 1%; }
  .card:not(:first-child) { margin-left: calc(var(--distance) * -1); }
}
@media screen and (max-width: 1023.8px) {
  .card { height: 90%; min-width: var(--col-5); scroll-snap-align: center; width: var(--col-5); }
}
.card__mid { align-content: center; display: grid; position: relative; }
.card__content { position: relative; }
.card__content:empty { display: none; }
.card__media { aspect-ratio: 1.2 / 1; border-radius: var(--radius); margin-inline: auto; overflow: hidden; width: 60%; }
.card__footer { border-bottom: 1px solid var(--c-text); margin-top: auto; padding-bottom: clamp(1.5rem, 1.3725490196rem + .3267973856vw, 2rem); width: 100%; position: relative; }
.card__title { display: flex; justify-content: center; text-align: center; margin-inline: auto; width: 80%; }
.card__list { margin-inline: auto; width: 80%; }
.card__list__item { display: flex; font-size: 2.6rem; justify-content: center; padding: 1rem 0; text-align: center; }
@media screen and (min-width: 768px) { .card__list__item { font-size: 5rem; padding: 2.6rem 0; } }
.card__list__item + .card__list__item { border-top: 1px solid var(--c-text); }
.card .pills-list { width: 90%; }
.card .pill { padding: 2rem; width: 100%; transform: none; }
@media screen and (min-width: 1024px) { .card .pill { padding: 4rem; } }
.card .pill__text { font-size: 2.6rem; opacity: 1; transform: none; }
@media screen and (min-width: 768px) { .card .pill__text { font-size: 5rem; } }

/* ---------- hero ---------- */
.hero {
  align-items: center; background: var(--c-placeholder); border-radius: var(--radius); display: flex; flex-direction: column;
  height: calc(var(--height) - var(--offset-double)); justify-content: space-between; margin: var(--offset); overflow: hidden;
  padding: var(--offset-double); position: relative; width: var(--width);
}
@media screen and (min-width: 768px) { .hero { aspect-ratio: 1870 / 2380; height: unset; min-height: 80vh; } }
.hero__logo { z-index: 10; width: 100%; overflow: hidden; }
.hero__logo svg { width: 100%; height: auto; overflow: visible; }
.hero__content { z-index: 10; }
.hero__text { color: var(--c-accent); }
@media screen and (min-width: 768px) { .hero__text { margin-bottom: var(--col-1); } }
.hero__bg { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 5; }

/* ---------- section: text (pinned blur-out) ---------- */
.section-text {
  align-items: center; display: flex; flex-direction: column; position: relative;
  margin-bottom: clamp(5rem, 3.7254901961rem + 3.2679738562vw, 10rem);
  padding-bottom: clamp(5rem, 3.7254901961rem + 3.2679738562vw, 10rem);
}
.section-text__inner { width: 100%; }

/* ---------- pills (goo stack) ---------- */
.pills { display: flex; flex-direction: column; pointer-events: none; }
.pills-list { align-items: center; display: flex; flex-direction: column; justify-content: center; margin: 0 auto; transform: translateZ(0); width: fit-content; }
@media screen and (min-width: 1024px) { .pills-list { filter: var(--filter-url); } }
.pill {
  align-items: center; background: var(--bg); border-radius: var(--radius); color: var(--color); display: flex; justify-content: center;
  overflow: hidden; padding: 3rem 5rem; position: relative; transform: translateY(calc(-100% * var(--index))) scale(.5);
  transition: background .5s var(--ease-smooth), color .5s var(--ease-smooth); width: 25rem; will-change: transform; z-index: calc(var(--total) - var(--index));
}
@media screen and (min-width: 1024px) { .pill { padding: 8rem 12rem; } }
.pill:nth-child(2n) { border-radius: 20rem; }
.pill__text { display: flex; height: .8cap; line-height: .9; opacity: 0; transform: translateY(120%); white-space: nowrap; }
@media screen and (max-width: 767.8px) { .pill__text { font-size: 3.4rem; } }
.pill__link { display: flex; }

/* ---------- service list / text list (media panels) ---------- */
.service-list, .section-text-list {
  background: var(--c-placeholder); border-radius: var(--radius); margin-left: auto; margin-right: auto; overflow: clip; position: relative; width: var(--width);
}
.service-list { aspect-ratio: 1870 / 2500; }
.section-text-list { aspect-ratio: 1870 / 3000; z-index: 16; }
@media screen and (min-width: 1024px) { .service-list, .section-text-list { aspect-ratio: 1870 / 2000; } }
.service-list > .container, .section-text-list > .container { height: 100%; z-index: 10; justify-content: flex-start; }
.service-list__pills, .section-text-list__pills { margin-bottom: auto; margin-top: auto; }
.service-list__bg, .section-text-list__bg { position: absolute; inset: 0; height: 100%; width: 100%; z-index: 5; }

/* ---------- steps (pinned stepper) ---------- */
.steps { display: flex; height: var(--height); padding: var(--offset-double) var(--offset); width: 100%; }
@media screen and (min-width: 768px) { .steps { align-items: center; justify-content: center; } }
.steps__inner { display: flex; flex-direction: column; gap: calc(var(--col-1) / 3); }
@media screen and (min-width: 768px) { .steps__inner { flex-direction: row; gap: var(--col-1); } }
@media screen and (min-width: 768px) { .steps:not(.is-lrt) .steps__inner { flex-direction: row-reverse; } }
.steps__media {
  aspect-ratio: 720 / 850; background: var(--c-placeholder); border-radius: var(--radius); clip-path: inset(10% round var(--radius));
  display: flex; position: relative; width: var(--col-3); overflow: hidden;
}
.is-inview .steps__media { clip-path: inset(0 round var(--radius)); transition: clip-path 1s var(--ease-smooth); }
@media screen and (min-width: 768px) { .steps__media { width: var(--col-4); } }
.steps__media__inner { aspect-ratio: 720 / 850; overflow: clip; width: 100%; position: relative; }
.steps__media__el {
  filter: blur(1rem); height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transform: scale(1.2); width: 100%;
  transition: transform .5s var(--ease-smooth), opacity .5s var(--ease-smooth), filter .5s var(--ease-smooth);
}
.steps__media__el.active { filter: blur(0); opacity: 1; transform: scale(1); }
.steps__content { display: flex; flex-direction: column; justify-content: space-between; width: var(--col-6); }
@media screen and (min-width: 768px) { .steps__content { width: var(--col-5); } }
.steps__title { display: flex; flex-direction: column; margin-bottom: clamp(5rem, 3.7254901961rem + 3.2679738562vw, 10rem); }
@media screen and (min-width: 768px) { .steps__title { margin-bottom: auto; } }
.steps__title__col { margin-top: .25cap; padding-bottom: .05cap; position: relative; }
@media screen and (max-width: 767.8px) { .steps__title__col { margin-top: .8cap; padding-bottom: .5cap; } }
.steps__category::before, .steps__title__col::before { background: var(--c-dark); bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 100%; }
.steps__heading span { padding: 0 1rem; position: relative; z-index: 0; }
@media screen and (min-width: 768px) { .steps__heading span { padding: 0 2rem; } }
.steps__heading span::before {
  background: var(--accent); border-radius: var(--radius-s); bottom: 0; content: ""; height: 110%; left: 0; position: absolute;
  transform: translateY(-2.5%); width: 0; z-index: -1;
}
@media screen and (min-width: 768px) { .steps__heading span::before { border-radius: var(--radius); } }
.is-inview .steps__heading span::before { transition: width .75s var(--ease-smooth); width: 100%; }
.steps__category { display: flex; flex-direction: column; height: 1.6cap; overflow: clip; padding-top: .3cap; position: relative; }
@media screen and (max-width: 767.8px) { .steps__category { height: 2.4cap; padding-top: .8cap; } }
.steps__category__inner { display: flex; flex-direction: column; transform: translateY(calc(-100% / var(--total) * var(--step))); transition: transform .5s var(--ease-smooth); }
.steps__category__item { height: 1.6cap; line-height: 1.2cap; }
@media screen and (max-width: 767.8px) { .steps__category__item { height: 2.4cap; } }
.steps__descriptions { display: grid; }
.steps__description { grid-area: 1 / 1; opacity: 0; }
.steps__description .char { opacity: .2; }
.steps__description .line { transform: translateY(110%); transition: transform 1s var(--ease-expo); }
.steps__description.is-active { opacity: 1; }
.steps__description.is-active .line { transform: translateY(0); transition: transform 1s var(--ease-expo) calc(var(--index, 0) * 75ms); }

/* ---------- accordion list (where) ---------- */
.accordion-list__media { aspect-ratio: 1 / 1; border-radius: var(--radius); margin-inline: auto; overflow: hidden; }
.accordion { position: relative; width: 100%; }
.accordion__list { position: relative; }
.accordion__item {
  border-bottom: 1px solid var(--c-text); display: flex; justify-content: center; padding: .15cap 0; text-align: center; width: 100%; position: relative;
}
.accordion.is-active .accordion__item { pointer-events: none; }
.accordion__item__title { cursor: pointer; display: flex; line-height: 1.2; overflow: clip; user-select: none; position: relative; z-index: 2; }
.is-open .accordion__item__title { z-index: 17; }
.accordion__item__title span {
  display: block; opacity: 1; padding: .25cap .25cap 0; transform: translateY(0) scale(1);
  transition: transform .75s var(--ease-smooth), opacity .75s var(--ease-smooth);
}
.is-open:not(.is-closing) .accordion__item__title span { opacity: 0; transform: translateY(-100%) scale(0); }
.accordion__bg { background: var(--c-bg); border-radius: var(--radius); position: absolute; will-change: transform; z-index: 1; top: 0; left: 0; }

.accordion__modal {
  align-items: center; border-radius: var(--radius); justify-content: center; opacity: 0; position: fixed; z-index: 17;
  display: flex; height: 80svh; inset: 0; margin: auto; overflow: clip; width: var(--col-6); will-change: width, height, opacity;
}
.accordion__modal[hidden] { display: none; }
.accordion__modal__inner {
  align-self: center; display: flex; flex-direction: column; justify-content: space-between; height: 80svh;
  min-width: var(--col-6); width: var(--col-6); padding: var(--offset-double); flex: none;
}
.accordion__modal__top { display: flex; justify-content: space-between; padding-bottom: 2rem; position: relative; }
.accordion__modal__top::after { background: #000; bottom: 0; content: ""; height: 1px; left: 0; position: absolute; width: 100%; }
.accordion__modal__close { position: relative; }
.accordion__modal__title { align-self: center; display: flex; overflow: clip; }
.accordion__modal__title span { display: flex; }
.accordion__modal__text .line { transform: translateY(110%); transition: transform .5s var(--ease-expo) calc(var(--index, 0) * 25ms); }
.accordion__modal__text.is-active .line { transform: translateY(0); transition: transform 1s var(--ease-expo) calc(var(--index, 0) * 75ms); }

/* ---------- FAQ ---------- */
.faq {
  background: var(--c-light); border-radius: var(--radius); display: flex; flex-direction: column; margin-left: auto; margin-right: auto;
  padding-bottom: clamp(10rem, 7.4509803922rem + 6.5359477124vw, 20rem); position: relative; width: var(--width); z-index: 15;
}
.faq .text { text-align: left; }
.tabs { align-items: center; display: flex; flex-direction: column; margin: 0 auto; user-select: none; width: var(--col-6); z-index: 10; }
@media screen and (min-width: 768px) { .tabs { align-items: flex-start; width: var(--col-8); } }
@media screen and (min-width: 1024px) { .tabs { width: var(--col-6); } }
@media screen and (max-width: 767.8px) { .tabs { --radius-s: 8px; } }
.tabs .line-mask { clip-path: inset(-10% 0 -10% 0); overflow: visible !important; }
.tabs__labels { display: flex; z-index: 10; }
@media screen and (max-width: 767.8px) { .tabs__labels { transform: translate(10%); } }
.tabs__label__wrap {
  background: var(--c-bg); border: 1px solid var(--c-dark); border-top-left-radius: var(--radius-s); border-top-right-radius: var(--radius-s);
  cursor: pointer; display: flex; transform: translate(calc(var(--index) * -2rem)); transition: transform .5s var(--ease-smooth); z-index: var(--z-index); position: relative;
}
.tabs__label__wrap.is-checked { background: var(--c-light); border-bottom: none; }
.tabs__label { cursor: pointer; display: flex; gap: .5rem; padding: 1.5rem 1.5rem .6rem 0; transition: padding .5s var(--ease-smooth), gap .5s var(--ease-smooth); }
@media screen and (min-width: 768px) { .tabs__label { padding: 1.5rem 3rem .6rem 0; } }
.tabs__label__wrap.is-checked .tabs__label { gap: .8rem; padding: 1.5rem 1.5rem .6rem 1.25rem; }
@media screen and (min-width: 768px) { .tabs__label__wrap.is-checked .tabs__label { gap: 1.5rem; padding: 1.5rem 3rem .6rem 2rem; } }
.tabs__label__bullet { background: var(--c-accent); border-radius: 3rem; display: flex; height: 1rem; margin-top: .1rem; transform: scale(0); transition: transform .3s var(--ease-smooth); width: 1rem; flex: none; }
.tabs__label__wrap.is-checked .tabs__label__bullet { transform: scale(1); }
@media screen and (min-width: 768px) { .tabs__label__bullet { height: 3rem; margin-top: .4rem; width: 3rem; } }
.tabs__body {
  border: 1px solid var(--c-dark); border-radius: var(--radius-s); display: flex; flex-direction: column; padding: 2.5rem;
  position: relative; transform: translateY(-1px); z-index: 5; width: 100%;
}
@media screen and (min-width: 768px) { .tabs__body { border-top-left-radius: 0; width: var(--col-8); } }
@media screen and (min-width: 1024px) { .tabs__body { width: var(--col-6); } }
.tabs__question__label {
  border-bottom: 1px solid var(--c-dark); margin-bottom: clamp(1.5rem, 1.3725490196rem + .3267973856vw, 2rem);
  margin-top: clamp(5rem, 3.7254901961rem + 3.2679738562vw, 10rem); padding: clamp(1.5rem, 1.3725490196rem + .3267973856vw, 2rem);
}
.tabs__questions { display: grid; width: var(--col-5); }
@media screen and (min-width: 768px) { .tabs__questions { width: var(--col-6); } }
.tab__content { grid-area: 1 / 1; opacity: 0; padding: 2rem; width: 95%; }
.tab__content .line { transform: translateY(120%); }
.tab__content.is-active { opacity: 1; }
.tab__content.is-active .line { transform: translateY(0); transition: transform 1s var(--ease-expo) calc(var(--index, 0) * 75ms); }
.has-answer-open .tab__content.tab__question .line { transition: none; }
.tab__answer .line { transform: translateY(120%); }
.has-answer-open .tab__content.tab__answer.is-active .line { transform: translateY(0); transition: transform 1s var(--ease-expo) calc(var(--index, 0) * 75ms + var(--extra-delay, 0) * 1s); }
.tabs:not(.has-answer-open) .tab__answer.is-active .line { transform: translateY(120%); transition: none; }
.tabs__controls { align-items: stretch; display: flex; gap: .8rem; margin-top: auto; z-index: 12; position: relative; }
.tabs__controls__cta {
  align-items: center; background: var(--c-accent); border-radius: .5rem; clip-path: inset(0 0 0 0 round .5rem); display: flex;
  padding: 0 2rem; transition: clip-path .3s var(--ease-smooth); width: 100%;
}
@media screen and (max-width: 1023.8px) { .tabs__controls__cta { height: 4rem; } }
.tabs:not(.has-answer-open) .tabs__controls__cta:active { clip-path: inset(.3rem .3rem .3rem .3rem round .5rem); }
.tabs__controls__cta .mask { overflow: hidden; padding-top: .2cap; position: relative; }
.tabs__controls__cta .text { display: flex; position: relative; transform: translateY(0); transition: transform .5s var(--ease-expo); }
.tabs__controls__cta .text::after { content: attr(data-label); left: 0; position: absolute; top: 110%; }
.tabs__controls__cta:hover .text { transform: translateY(-110%); }
.tabs__controls__nav {
  aspect-ratio: 1 / 1; background: var(--c-accent); border-radius: .5rem; display: block; height: 7.3rem; overflow: hidden; position: relative;
  transition: transform .3s var(--ease-smooth); flex: none;
}
@media screen and (max-width: 1023.8px) { .tabs__controls__nav { height: 4rem; } }
.tabs__controls__nav:active { transform: scale(.85); }
.tabs__controls__nav.is-prev { transform: rotate(180deg); }
.tabs__controls__nav.is-prev:active { transform: rotate(180deg) scale(.9); }
.tabs__controls__icon { aspect-ratio: 1; display: flex; height: 100%; position: relative; transform: translate(0) scale(1); width: 100%; }
.tabs__controls__icon svg { width: 100%; height: 100%; }
.tabs__controls__nav:hover .tabs__controls__icon { transform: translate(100%) scale(.1); transition: transform 1s var(--ease-expo); }
.tabs__controls__icon--clone { left: 0; position: absolute; top: 0; transform: translate(-100%) scale(.1); }
.tabs__controls__nav:hover .tabs__controls__icon--clone { transform: translate(0) scale(1); }
.tabs__answers {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: linear-gradient(0deg, #beff8b, #beff8bb3);
  bottom: 2.5rem; display: grid; left: 2.5rem; opacity: 0; overflow: hidden; position: absolute; width: var(--col-6); z-index: 11;
}
.tab__answer { margin-left: 0; padding: var(--offset-double); place-content: start; width: var(--col-5); }
@media screen and (min-width: 768px) { .tab__answer { width: var(--col-7); } }
@media screen and (min-width: 1024px) { .tab__answer { width: var(--col-5); } }

/* ---------- contact ---------- */
.contact { position: relative; z-index: 10; }
.contact__title { margin-inline: auto; text-align: center; }

/* ---------- footer ---------- */
.footer { overflow: hidden; }
.footer__inner { display: flex; flex-direction: column; gap: clamp(3rem, 2.2352941176rem + 1.9607843137vw, 6rem); padding: var(--offset); }
@media screen and (min-width: 768px) { .footer__inner { display: grid; gap: 0; grid-template-columns: repeat(2, 1fr); } }
.footer__col:nth-child(2) .footer__col__title { border-left: 1px solid var(--c-dark); }
.footer__col__title { border-bottom: 1px solid var(--c-dark); display: flex; margin-bottom: clamp(3rem, 2.2352941176rem + 1.9607843137vw, 6rem); }
.footer__col__text { clip-path: inset(-10% 0 0 0); display: flex; position: relative; }
@media screen and (min-width: 768px) {
  .footer__col__text { margin-left: var(--gutter); }
  .footer__col__text.right { margin-left: calc(var(--gutter) + var(--gutter) / 2); }
}
@media screen and (min-width: 1024px) {
  .footer__col__text { margin-left: calc(var(--col-1) + var(--gutter)); }
  .footer__col__text.right { margin-left: calc(var(--col-1) + var(--gutter) + var(--gutter) / 2); }
}
.footer__col__content { border-bottom: 1px solid var(--c-dark); }
.footer__col__content a { display: block; }
@media screen and (max-width: 767.8px) { .footer__col__content.no-margin { border-bottom: none; } }
@media screen and (min-width: 768px) { .footer__col__content--right { border-left: 1px solid var(--c-dark); } }
.footer__bottom { display: flex; gap: var(--gutter-double); justify-content: space-between; padding: 0 var(--offset); }
@media screen and (max-width: 767.8px) { .footer__bottom { font-size: .7em; } }
@media screen and (min-width: 768px) { .footer__bottom { display: grid; gap: var(--gutter); grid-template-columns: repeat(2, 1fr); } }
.footer__bottom__legal { text-align: center; white-space: nowrap; }
@media screen and (min-width: 768px) { .footer__bottom__legal { padding-left: calc(var(--col-1) + var(--gutter)); text-align: left; } }
.footer__bottom__pages { display: flex; gap: var(--gutter); }
@media screen and (max-width: 767.8px) { .footer__bottom__pages { gap: 0; justify-content: center; } }
.footer__bottom__pages li { width: var(--col-1); }