/* =========================================================
   DNA Studio — styles
   Design tokens come from the Figma variables (Desktop 1440 /
   Tablet 768 / Mobile 390 modes).
   ========================================================= */

/* ---------- Tokens: desktop (≥1024px) ---------- */
:root {
  /* colours */
  --bg-page: #11140f;
  --bg-surface: #1d2016;
  --bg-surface-raised: #252b1e;
  --bg-ticker: #12140e;
  --text-primary: #e8e2d8;
  --text-muted: #858a7b;
  --text-accent: #a9b18a;
  --text-on-accent: #11140f;
  --text-ticker: #797f66;
  --accent: #a9b18a;
  --accent-hover: #b0b892;
  --accent-pressed: #9ba383;
  --border-subtle: #2d2f25;
  --border-default: #424739;
  --border-strong: #e8e2d8;

  /* fonts */
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* layout */
  --margin: 80px;
  --container: none;   /* content always runs edge-to-edge with --margin gutters */
  --hero-top: 120px;
  --section-gap: 160px;
  --header-gap: 80px;
  --card-pad: 32px;
  --index-col: 108.67px;
  --desc-w: 410.67px;

  /* type scale */
  --fs-label-xs: 20px;
  --fs-label-s: 20px;
  --fs-label-m: 20px;
  --fs-label-l: 32px;
  --fs-label-lead: 24px;
  --fs-label-caption: 16px;
  --fs-body-l: 20px;
  --fs-body-m: 20px;
  --fs-body-s: 20px;
  --fs-h1: 60px;
  --fs-h1-serif: 64px;
  --fs-h2: 44px;
  --fs-h4: 24px;
  --fs-xl: 74px;
  --fs-xl-serif: 100px;
  --fs-display: clamp(84px, 9.03vw, 130px);
  --fs-display-serif: clamp(110px, 11.8vw, 170px);
  --fs-display-light: clamp(84px, 9.03vw, 130px);
  --fs-footer-body: 14px;
  --fs-footer-label: 14px;
  --fs-ticker: 24px;

  /* component sizes */
  --ticker-h: 100px;
  --header-top: 40px;
  --ring: 400px;        /* outer CTA ring */
  --ring-top: 28px;
  --cta-circle: 40px;
  --cta-cy: 64px;       /* centre of the CTA connection circle */
  --cta-pt: 150px;
  --cta-gap: 50px;
  --cta-pb: 40px;
  --social-icon: 44px;
}

/* ---------- Tokens: tablet (768–1023px) ---------- */
@media (max-width: 1023px) {
  :root {
    --margin: 40px;
    --hero-top: 88px;
    --section-gap: 112px;
    --header-gap: 48px;
    --card-pad: 28px;
    --index-col: 89px;
    --desc-w: 332px;

    --fs-label-xs: 16px;
    --fs-label-s: 16px;
    --fs-label-m: 16px;
    --fs-label-l: 26px;
    --fs-label-lead: 18px;
    --fs-label-caption: 14px;
    --fs-body-l: 18px;
    --fs-body-m: 18px;
    --fs-body-s: 18px;
    --fs-h1: 44px;
    --fs-h1-serif: 48px;
    --fs-h2: 36px;
    --fs-h4: 22px;
    --fs-xl: 60px;
    --fs-xl-serif: 80px;
    --fs-display: 72px;
    --fs-display-serif: 94px;
    --fs-display-light: 96px;
    --fs-footer-body: 14px;
    --fs-footer-label: 13px;
    --fs-ticker: 20px;

    --ticker-h: 80px;
    --header-top: 24px;
    --ring: 340px;
    --ring-top: 23.8px;
    --cta-circle: 34px;
    --cta-cy: 54.4px;
    --cta-pt: 128px;
    --cta-gap: 40px;
    --cta-pb: 24px;
    --social-icon: 24px;
  }
}

/* ---------- Tokens: mobile (<768px) ---------- */
@media (max-width: 767px) {
  :root {
    --margin: 20px;
    --section-gap: 80px;
    --header-gap: 32px;
    --card-pad: 24px;
    --index-col: 40px;

    --fs-label-xs: 14px;
    --fs-label-s: 14px;
    --fs-label-m: 14px;
    --fs-label-l: 20px;
    --fs-label-lead: 16px;
    --fs-label-caption: 13px;
    --fs-body-l: 16px;
    --fs-body-m: 16px;
    --fs-body-s: 16px;
    --fs-h1: 30px;
    --fs-h1-serif: 32px;
    --fs-h2: 28px;
    --fs-h4: 20px;
    --fs-xl: 44px;
    --fs-xl-serif: 60px;
    --fs-display-light: 52px;
    --fs-footer-body: 13px;
    --fs-footer-label: 12px;
    --fs-ticker: 16px;

    --ticker-h: 60px;
    --ring: 280px;
    --ring-top: 19.6px;
    --cta-circle: 28px;
    --cta-cy: 44.8px;
    --cta-pt: 105px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;          /* never fake bold/italic — fonts only in the weights from Figma */
  overflow-x: hidden;
}

h1, h2, h3, p, ol, ul, fieldset { margin: 0; padding: 0; }
h1, h2, h3, strong, b { font-weight: inherit; }
ol, ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
em { font-style: normal; }
.accent { color: var(--text-accent); }
.muted { color: var(--text-muted); }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--margin);
}

.divider {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--border-subtle);
}

/* Mono label — shared style */
.mono, .link, .btn, .section-header__marker, .field__label, .chip span,
.pillar__label, .card__top span, .card__title, .service__num, .panel__label,
.work-card__title, .faq-item__q span, .faq__more p, .quick__direct p,
.group-heading, .cta__label, .cta__heading, .menu-btn, .hero__meta {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ---------- Text link with underline ---------- */
.link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 7px;
  font-size: var(--fs-label-xs);
  letter-spacing: 0.08em;
  white-space: nowrap;
  transition: color .25s;
}
.link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width .3s ease;
}
/* Nav link (header): underline only. Footer link / text link: accent colour + underline. */
.link:hover::after, .link:focus-visible::after { width: 100%; }
.footer__nav .link:hover, .footer__legal a:hover, .link--icon:hover { color: var(--text-accent); }

/* ---------- Buttons — states from the Figma "Button" component ----------
   Primary   default: gradient + glow · hover: #D4DEAD, dark text · active: cream, dark text
   Secondary default: accent outline · hover: #797F66, cream text   · active: cream, dark text
   Light     default: cream outline  · hover: cream, dark text      · active: cream, dark text
   Solid     default: cream          · hover: accent/hover + glow   · active: accent/pressed + glow */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-label-s);
  letter-spacing: 0.1em;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .2s ease;
}
/* hover/active fill: one flat colour that fades in over the default look */
.btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--btn-fill, transparent);
  opacity: 0;
  transition: opacity .3s ease, background-color .15s ease;
}
.btn:is(:hover, :active)::before { opacity: 1; }
.btn img { flex-shrink: 0; transition: transform .3s ease, filter .3s ease; }
.btn:hover img { transform: translate(3px, -3px); }
.btn:active { transform: scale(.98); }

.btn--l { height: 80px; padding-inline: 48px; }
.btn--l img { width: 40px; height: 40px; }
.btn--m { height: 64px; padding-inline: 40px; }
.btn--m img { width: 32px; height: 32px; }
.btn--s { height: 52px; padding-inline: 32px; gap: 8px; }
.btn--s img { width: 24px; height: 24px; }
.btn--full { width: 100%; }

.btn .icon-m { display: none; }

/* icon recolouring: cream / accent arrows → dark (on light fills) or cream */
.btn--primary:is(:hover, :active) img,
.btn--secondary:active img,
.btn--light:is(:hover, :active) img { filter: brightness(0); }
.btn--secondary:hover:not(:active) img { filter: brightness(0) invert(.9); }

/* Primary */
.btn--primary {
  color: var(--text-primary);
  border-color: var(--accent);
  background-color: transparent;
  background-image: linear-gradient(100.66deg, rgba(169,177,138,.5) 28.372%, rgba(218,227,180,.5) 62.994%);
  box-shadow: -5px -5px 5.4px 0 rgba(255,255,255,.25), 5px 5px 5.4px 0 #31341e;
}
.btn--primary { --btn-fill: #d4dead; }
.btn--primary:hover { border-color: #d4dead; color: var(--text-on-accent); }
.btn--primary:active { --btn-fill: var(--text-primary); border-color: var(--text-primary); color: var(--text-on-accent); }

/* Secondary */
.btn--secondary {
  color: var(--text-accent);
  border-color: var(--accent);
  filter: drop-shadow(0 0 20px rgba(169,177,138,.1)) drop-shadow(0 0 10px rgba(169,177,138,.2));
}
.btn--secondary { --btn-fill: var(--text-ticker); }
.btn--secondary:hover { border-color: var(--text-ticker); color: var(--text-primary); }
.btn--secondary:active { --btn-fill: var(--text-primary); border-color: var(--text-primary); color: var(--text-on-accent); }

/* Light */
.btn--light { color: var(--text-primary); border-color: var(--text-primary); }
.btn--light { --btn-fill: var(--text-primary); }
.btn--light:is(:hover, :active) { color: var(--text-on-accent); }

/* Solid */
.btn--solid { color: var(--text-on-accent); background-color: var(--text-primary); }
.btn--solid { --btn-fill: var(--accent-hover); }
.btn--solid:hover { box-shadow: 0 0 12px rgba(169,177,138,.25); }
.btn--solid:active { --btn-fill: var(--accent-pressed); box-shadow: 0 0 12px rgba(169,177,138,.25); }

/* Icon button (round 48px, work cards / next case) */
.work-card__open, .icon-btn { transition: background-color .25s ease, filter .25s ease, transform .3s ease; }
.work-card__open--light:hover, .work-card:hover .work-card__open--light { background: var(--accent-hover); filter: drop-shadow(0 0 20px rgba(169,177,138,.1)) drop-shadow(0 0 10px rgba(169,177,138,.2)); }
.work-card__open--light:active { background: var(--accent-pressed); }
.work-card__open--dark:hover, .work-card:hover .work-card__open--dark { background: var(--bg-surface-raised); filter: drop-shadow(0 0 20px rgba(169,177,138,.1)) drop-shadow(0 0 10px rgba(169,177,138,.2)); }
.work-card__open--dark:active { background: var(--border-default); }

/* =========================================================
   HEADER
   ========================================================= */
.top { position: relative; overflow: hidden; }   /* the hero blob must never widen the page (iPhone would zoom out) */

.grid-lines {
  position: absolute;
  inset: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 0;
}
.grid-lines span { width: 1px; height: 100%; background: var(--border-subtle); }

.header {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--header-top);
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 89px;
}
.logo img { width: 89px; height: 29px; }
.logo span {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 8px;          /* Figma trims the text box to cap height: logo block = 47px */
  letter-spacing: 0.14em;
  color: #fff;
  text-transform: lowercase;
}

.nav { display: flex; gap: 40px; }
.nav .link { padding-bottom: 7px; }

.menu-btn {
  display: none;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding-inline: 20px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: var(--fs-label-xs);
  letter-spacing: 0.08em;
}
.burger { display: flex; flex-direction: column; gap: 6px; }
.burger i { display: block; width: 18px; height: 1.5px; background: var(--text-primary); transition: transform .3s; }
.menu-btn[aria-expanded="true"] .burger i:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .burger i:last-child { transform: translateY(-3.75px) rotate(-45deg); }

/* full-screen menu (tablet & mobile) — "Menu — Mobile" frame */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  padding-top: var(--header-top);
  padding-bottom: 40px;
  background: var(--bg-page);
  overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; }
.menu-close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--fs-label-xs);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mobile-menu__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-block: 40px 31px;
  max-width: 688px;
}
.mobile-menu nav { width: 100%; display: flex; flex-direction: column; }
.mobile-menu nav a {
  padding-block: 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  transition: color .25s;
}
.mobile-menu nav a:hover { color: var(--text-accent); }
.mobile-menu__cta { width: 100%; margin-top: 64px; }
.mobile-menu__social {
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: var(--fs-footer-label);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mobile-menu__social a:hover { color: var(--text-primary); }
body.menu-open { overflow: hidden; }

/* "Overlay — Form sent" */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 20, 15, .7);
  backdrop-filter: blur(4px);
}
.modal[hidden] { display: none; }
.modal__box {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 32px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 20px;
  text-align: center;
}
.modal__box h2 { font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.02em; }
.modal__box p { font-size: 16px; line-height: 1.6; }
.modal__box .btn { font-size: 14px; }

/* the full desktop nav needs ~1180px; below that the header uses the menu button */
@media (max-width: 1279px) {
  .nav, .header__cta { display: none; }
  .menu-btn { display: inline-flex; }
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding-top: var(--hero-top);
  padding-bottom: 96px;
}

.hero__meta { display: none; }

.hero__title {
  font-weight: 600;
  font-size: var(--fs-display);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.hero__line { display: block; }
.hero__line--dna { padding-left: 25.47%; } /* 326 / 1280 */
.hero__line--dna em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-display-serif);
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-accent);
}

.hero__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.hero__subtitle { font-size: var(--fs-body-l); line-height: 1.4; }

/* ---------- Hero cursor blob (drawn by initHeroReveal in main.js) ----------
   "difference" inverts whatever is under the blob: cream text → dark,
   dark background → light green. */
.hero-blob {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  pointer-events: none;
  visibility: hidden;
  will-change: transform;
}
.hero-blob--invert { mix-blend-mode: difference; }
.hero-blob--tint { z-index: 5; mix-blend-mode: multiply; }

/* tablet */
@media (max-width: 1023px) {
  .hero { gap: 56px; padding-bottom: 72px; }
  .hero__line--dna { padding-left: 89px; }
  .hero__bottom { flex-direction: column; align-items: flex-start; gap: 32px; }
  .hero__btn { height: 64px; padding-inline: 40px; }
  .hero__btn .icon-l { display: none; }
  .hero__btn .icon-m { display: block; width: 32px; height: 32px; }
}

/* mobile — "poster" layout */
@media (max-width: 767px) {
  .hero {
    min-height: calc(100svh - 71px);
    justify-content: space-between;
    gap: 48px;
    padding-top: 28px;
    padding-bottom: 40px;
  }
  .hero__meta {
    display: block;
    font-size: 13px;
    line-height: 1.3;
    letter-spacing: 0.08em;
    color: var(--text-muted);
  }
  .hero__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: min(18.87vw, 110px);   /* 73.6 / 390 */
    line-height: 0.86;
    letter-spacing: -0.03em;
  }
  .hero__line { display: contents; }
  .hero__line > span { display: block; }
  .hero__line:last-child > span:last-child { font-size: 1.065em; } /* GROWTH 78.4 */
  .hero__line--dna {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 10px;
    padding-left: 0;
  }
  .hero__line--dna .hero__small { font-size: 0.5435em; letter-spacing: -0.03em; } /* 40 / 73.6 */
  .hero__line--dna em { font-size: 1.834em; line-height: 0.8; } /* 135 / 73.6 */

  .hero__bottom { gap: 24px; align-items: stretch; }
  .hero__bottom::before { content: ""; height: 1px; background: var(--border-subtle); }
  .hero__btn { width: 100%; }
}

/* grid lines count per breakpoint */
@media (max-width: 1023px) {
  .grid-lines span:nth-child(n+4) { display: none; }
}
@media (max-width: 767px) {
  .grid-lines span:nth-child(n+3) { display: none; }
}

/* =========================================================
   TICKER
   ========================================================= */
.ticker {
  height: var(--ticker-h);
  overflow: hidden;
  background: var(--bg-ticker);
  border-block: 1px solid var(--border-default);
  display: flex;
  align-items: center;
}
.ticker__track {
  display: flex;
  gap: 35px;
  width: max-content;
  animation: ticker 40s linear infinite;
}
.ticker__track span {
  font-family: "Inter", var(--font-sans);
  font-size: var(--fs-ticker);
  color: var(--text-ticker);
  white-space: pre;
  word-spacing: 1.2em;
}
@keyframes ticker {
  to { transform: translateX(calc(-50% - 17.5px)); }
}

/* =========================================================
   SECTIONS — shared
   ========================================================= */
.section {
  display: flex;
  flex-direction: column;
  gap: var(--header-gap);
  padding-top: var(--section-gap);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.section-header__marker {
  display: flex;
  gap: 16px;
  font-size: var(--fs-label-m);
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.section-header__desc {
  width: var(--desc-w);
  flex-shrink: 0;
  font-size: var(--fs-body-m);
  line-height: 1.6;
}

@media (max-width: 767px) {
  .section-header { flex-direction: column; gap: 16px; }
  .section-header__desc { width: 100%; }
}

/* =========================================================
   01 ABOUT
   ========================================================= */
.about { gap: 80px; }
.about__text { display: flex; flex-direction: column; gap: 80px; }

.about__headline {
  max-width: 83%;
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.about__headline em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h1-serif);
  letter-spacing: 0;
  color: var(--text-accent);
}

.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar { display: flex; flex-direction: column; gap: 16px; }
.pillar__label { font-size: var(--fs-label-xs); letter-spacing: 0.08em; color: var(--text-accent); }
.pillar__desc { font-size: var(--fs-body-m); line-height: 1.6; }

@media (max-width: 1023px) {
  .about { gap: 32px; }
  .about__text { gap: 56px; }
  .about__headline { max-width: none; }
}
@media (max-width: 767px) {
  .about__text { gap: 40px; }
  .pillars { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   02 PROCESS
   ========================================================= */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 96px;
}
/* centre rail */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: var(--border-default);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 16px 1fr;
  align-items: center;
}
.step__node { grid-column: 2; grid-row: 1; position: relative; z-index: 1; width: 16px; height: 16px; }
.step__node img { width: 16px; height: 16px; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 78.37%; /* 495.3 / 632 */
  padding: var(--card-pad);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
}
.step--left .card { grid-column: 1; grid-row: 1; justify-self: start; }
.step--right .card { grid-column: 3; grid-row: 1; justify-self: end; }

/* horizontal connector from card to node */
.step--left .card::after,
.step--right .card::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  width: calc(27.6% + 0px); /* 136.7 / 495.3 */
  background: var(--border-default);
}
.step--left .card::after { left: 100%; }
.step--right .card::after { right: 100%; }

.card__top { display: flex; justify-content: space-between; align-items: center; }
.card__top span { font-size: var(--fs-label-xs); letter-spacing: 0.08em; color: var(--text-muted); }
.card__top img { width: 32px; height: 32px; }
.card__title { font-size: var(--fs-label-l); line-height: 1.2; letter-spacing: 0.1em; font-weight: 400; }
.card__desc { font-size: var(--fs-body-m); line-height: 1.6; }

/* CTA */
.cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cta-gap);
  padding-top: var(--cta-pt);
  padding-bottom: var(--cta-pb);
  text-align: center;
}
.cta__rings { position: absolute; inset: 0; pointer-events: none; }
.ring {
  position: absolute;
  left: 50%;
  top: calc(var(--ring-top) + var(--ring) / 2);
  transform: translate(-50%, -50%);
}
.ring--4 { width: var(--ring); height: var(--ring); }
.ring--3 { width: calc(var(--ring) * .8); height: calc(var(--ring) * .8); }
.ring--2 { width: calc(var(--ring) * .6); height: calc(var(--ring) * .6); }
.ring--1 { width: calc(var(--ring) * .4); height: calc(var(--ring) * .4); }

.cta__line {
  position: absolute;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  top: calc(var(--header-gap) * -1);
  height: calc(var(--header-gap) + var(--cta-cy) - var(--cta-circle) / 2);
  background: var(--border-default);
}
/* circle + dot svgs contain a glow, so they are drawn larger than their visible shape */
.cta__circle {
  position: absolute;
  left: 50%;
  top: var(--cta-cy);
  width: calc(var(--cta-circle) * 1.9);
  max-width: none;
  transform: translate(-50%, -50%);
}
.cta__dot {
  position: absolute;
  left: 50%;
  top: var(--cta-cy);
  width: 44px;
  max-width: none;
  transform: translate(-50%, -50%);
}

.cta__label, .cta__heading, .cta__btn { position: relative; }
.cta__label { font-size: var(--fs-label-m); letter-spacing: 0.1em; }
.cta__heading {
  max-width: 628px;
  font-size: var(--fs-label-l);
  line-height: 1.2;
  letter-spacing: 0.1em;
  font-weight: 400;
}

/* tablet & mobile: stacked timeline */
@media (max-width: 1023px) {
  .timeline { gap: 0; }
  .timeline::before { display: none; }
  .step { display: flex; flex-direction: column; align-items: center; }
  .card { width: 100%; }
  .step--left .card::after, .step--right .card::after { display: none; }
  .step__node {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    width: 16px;
  }
  .step__node::before, .step__node::after {
    content: "";
    width: 1px;
    height: 28px;
    background: var(--border-default);
  }
  .step:last-child .step__node { display: none; }
  .cta__btn { height: 64px; padding-inline: 40px; }
  .cta__btn img { width: 32px; height: 32px; }
}
@media (max-width: 767px) {
  .step__node::before, .step__node::after { height: 20px; }
  .cta__heading { max-width: 100%; }
  .cta__btn { width: 100%; }
}

/* =========================================================
   03 SERVICES
   ========================================================= */
.service-list { border-top: 1px solid var(--border-subtle); }

.service {
  border-bottom: 1px solid var(--border-subtle);
  opacity: .7;
  transition: opacity .3s;
}
.service:hover, .service.is-open { opacity: 1; }

.service__head {
  display: flex;
  align-items: center;
  width: 100%;
  padding-block: 24px;
  text-align: left;
}
.service__num {
  flex: 0 0 var(--index-col);
  font-size: var(--fs-label-xs);
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.service__title {
  flex: 1;
  font-size: var(--fs-h1);
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.service__arrow { width: 24px; height: 24px; transition: transform .35s ease; }
.service.is-open .service__arrow { transform: rotate(90deg); }

/* animated height via grid rows */
.service__details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.service.is-open .service__details { grid-template-rows: 1fr; }
.service__inner { overflow: hidden; padding-left: var(--index-col); }

.panel {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  margin-bottom: 24px;
  padding: var(--card-pad);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  opacity: 0;
  transition: opacity .3s ease .1s;
}
.service.is-open .panel { opacity: 1; }

.panel__offer, .panel__included {
  flex: 1 1 0;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.panel__offer .btn { margin-top: 8px; }
.panel__label { font-size: var(--fs-label-xs); letter-spacing: 0.08em; color: var(--text-muted); }
.panel__price {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h1-serif);
  line-height: 1.2;
  color: var(--text-accent);
}
.panel__text { font-size: var(--fs-body-l); line-height: 1.4; }

.features { display: flex; flex-wrap: wrap; gap: 8px; }
.features li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  white-space: nowrap;
}
.features img { width: 14px; height: 14px; }

@media (max-width: 767px) {
  .service__inner { padding-left: 0; }
  .panel__offer, .panel__included { min-width: 100%; }
  .features li { white-space: normal; }
}

/* =========================================================
   04 WORK
   ========================================================= */
.work-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 80px 24px;
}
/* desktop: row 1 shifted right by two columns, row 2 aligned left (as in design) */
.work-card { grid-column: span 5; display: flex; flex-direction: column; gap: 20px; }
.work-card:nth-child(1) { grid-column: 3 / span 5; }
.work-card:nth-child(2) { grid-column: 8 / span 5; }
.work-card:nth-child(3) { grid-column: 1 / span 5; }
.work-card:nth-child(4) { grid-column: 6 / span 5; }

.work-card__image {
  position: relative;
  aspect-ratio: 500 / 419;
  overflow: hidden;
  background: var(--bg-surface);
}
.work-card__image > img {
  position: absolute;
  max-width: none;
  transition: transform .6s ease;
}
.work-card:hover .work-card__image > img { transform: scale(1.03); }

.work-card__open {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: transform .3s ease;
}
.work-card__open img { width: 20px; height: 20px; }
.work-card__open--dark { background: var(--bg-page); border: 1px solid var(--border-default); }
.work-card__open--light { background: var(--text-primary); }

.work-card__info { display: flex; flex-direction: column; gap: 12px; }
.work-card__title {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-label-m);
  letter-spacing: 0.1em;
}
.work-card__desc { font-size: var(--fs-body-m); line-height: 1.6; }

@media (max-width: 1023px) {
  .work-grid { grid-template-columns: 1fr 1fr; gap: 48px 24px; }
  .work-card:nth-child(n) { grid-column: auto; }
}
@media (max-width: 767px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   05 FAQ
   ========================================================= */
.faq {
  flex-direction: row;
  align-items: flex-start;
  gap: 24px;
}
.faq__intro {
  flex: 0 0 32.08%; /* 410.67 / 1280 */
  display: flex;
  flex-direction: column;
  gap: 50px;
}
.faq__title {
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.faq__list { flex: 1; min-width: 0; border-top: 1px solid var(--border-subtle); }

.faq-item { border-bottom: 1px solid var(--border-subtle); }
.faq-item__q {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding-block: var(--card-pad);
  text-align: left;
}
.faq-item__q span { flex: 1; font-size: var(--fs-label-lead); letter-spacing: 0.08em; }
.faq-item__q img { width: 24px; height: 24px; flex-shrink: 0; transition: transform .35s ease; }
.faq-item.is-open .faq-item__q img { transform: rotate(90deg); }

.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .4s ease;
}
.faq-item__a > div { overflow: hidden; }
.faq-item__a p {
  padding-right: 56px;
  padding-bottom: var(--card-pad);
  font-size: var(--fs-body-m);
  line-height: 1.6;
  opacity: 0;
  transition: opacity .3s ease;
}
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-item__a p { opacity: 1; }

.faq__more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 64px;
}
.faq__more p { font-size: var(--fs-label-caption); letter-spacing: 0.1em; white-space: nowrap; }

@media (max-width: 1023px) {
  .faq { flex-direction: column; gap: 48px; }
  .faq__intro { flex: none; width: 100%; gap: 24px; }
  .faq__list { width: 100%; }
  .faq__more { padding-top: 48px; }
  .faq__more .btn { height: 52px; padding-inline: 32px; }
  .faq__more .btn img { width: 24px; height: 24px; }
}
@media (max-width: 767px) {
  .faq { gap: 40px; }
  .faq__more { flex-direction: column; align-items: stretch; gap: 24px; }
  .faq__more .btn { height: 64px; white-space: normal; }
  .faq-item__a p { padding-right: 0; }
}

/* =========================================================
   QUICK QUESTION
   ========================================================= */
.quick { gap: 44px; }
.quick__content {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 48px;
}
.quick__intro {
  width: 40.57%; /* 519 / 1280 */
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.quick__heading {
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.quick__intro p { font-size: var(--fs-body-m); line-height: 1.6; }

.quick__options {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 20px;
}
.quick__direct { display: flex; align-items: center; gap: 16px; }
.quick__direct p { font-size: var(--fs-label-xs); letter-spacing: 0.08em; color: var(--text-muted); white-space: nowrap; }
.link--icon img { width: 16px; height: 16px; }
.quick__links { display: flex; align-items: center; gap: 24px; }

@media (max-width: 1023px) {
  .quick { gap: 32px; }
  .quick__content { flex-direction: column; align-items: flex-start; gap: 32px; }
  .quick__intro { width: 100%; }
  .quick__options { align-items: flex-start; }
}
@media (max-width: 767px) {
  .quick__options { width: 100%; align-items: stretch; }
  .quick__options .btn { width: 100%; }
  .quick__direct { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* =========================================================
   06 START A PROJECT (form)
   ========================================================= */
.contact { gap: 64px; }
.contact__content {
  display: flex;
  align-items: flex-start;
  gap: 10.36%; /* 132.67 / 1280 */
}
.contact__intro {
  flex: 0 0 40.57%;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.contact__heading {
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.contact__heading em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-xl-serif);
  letter-spacing: 0;
  color: var(--text-accent);
}
.contact__intro p { font-size: var(--fs-body-l); line-height: 1.4; }

.form { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: column; gap: 56px; }
.form__group { display: flex; flex-direction: column; gap: 32px; }
.hp { position: absolute; left: -9999px; }

.group-heading {
  margin-bottom: 32px;   /* <legend> ignores the fieldset's flex gap */
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  font-size: var(--fs-label-xs);
  letter-spacing: 0.08em;
}
/* legend can't be flex in all browsers, so draw the rule on the span */
.group-heading span { display: flex; align-items: center; gap: 16px; width: 100%; white-space: nowrap; }
.group-heading span::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }

.field { display: flex; flex-direction: column; gap: 12px; position: relative; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field__label { font-size: var(--fs-label-xs); letter-spacing: 0.08em; color: var(--text-accent); }
.field__hint { font-size: var(--fs-body-s); line-height: 1.5; color: var(--text-muted); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-body-m);
  line-height: 1.6;
  color: var(--text-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-default);
  border-radius: 0;
  padding: 4px 0 14px;
  outline: none;
  transition: border-color .25s;
}
.field textarea {
  min-height: 128px;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 2px;
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-muted); opacity: 1; }
.field input:focus, .field textarea:focus { border-color: var(--accent); }

.field__error {
  display: none;
  font-size: 14px;
  color: #d9826b;
}
.field.has-error input { border-color: #d9826b; }
.field.has-error .field__error { display: block; }

/* chips (single select) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: flex;
  align-items: center;
  height: 48px;
  padding-inline: 22px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font-size: var(--fs-label-xs);
  letter-spacing: 0.08em;
  transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover span { border-color: var(--accent); }
.chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.chip input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 3px; }

/* checkbox options (multi select) */
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.option--wide { grid-column: 1 / -1; }
.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding-inline: 20px;
  border: 1px solid var(--border-default);
  border-radius: 2px;
  font-size: var(--fs-body-s);
  line-height: 1.5;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.option input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.option__box {
  position: relative;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
}
.option:hover { border-color: var(--accent); }
.option:has(input:checked) { background: var(--bg-surface-raised); border-color: var(--accent-pressed); }
.option input:checked + .option__box {
  border: 0;
  background: var(--accent) url("../assets/icons/checkbox-check.svg") center / 16px no-repeat;
}
.option input:focus-visible + .option__box { outline: 1px solid var(--accent); outline-offset: 3px; }

.form__submit { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.form__note { font-size: var(--fs-footer-body); line-height: 1.5; color: var(--text-muted); text-align: center; }
.form__status { font-size: var(--fs-body-s); text-align: center; color: var(--text-accent); }
.form__status:empty { display: none; }
.form.is-sending button[type="submit"] { opacity: .6; pointer-events: none; }

@media (max-width: 1023px) {
  .contact { gap: 40px; }
  .contact__content { flex-direction: column; gap: 56px; }
  .contact__intro { flex: none; width: 100%; }
  .form__submit .btn { height: 64px; }
  .form__submit .btn img { width: 32px; height: 32px; }
}
@media (max-width: 767px) {
  .field-row { grid-template-columns: 1fr; gap: 32px; }
  .options { grid-template-columns: 1fr; }
  .contact__intro { gap: 32px; }
  .form__submit .btn { white-space: normal; padding-inline: 24px; }
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  position: relative;
  overflow: hidden;
  margin-top: var(--section-gap);
}
.footer__glow {
  position: absolute;
  max-width: none;
  /* ellipse 1522×936 at (519, 354) in a 1440-wide frame; svg includes blur padding */
  width: 2522px;
  left: calc(50% - 720px + 519px - 500px);
  top: calc(354px - 500px);
  pointer-events: none;
}
.footer__inner { position: relative; padding-bottom: 30px; }
.footer__divider { border: 0; height: 1px; margin: 0; background: var(--border-default); }

.footer__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding-top: 40px;
}

.footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer__nav .link { font-size: var(--fs-footer-label); padding-bottom: 6px; }

.footer__brand { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; padding-top: 8px; }
.footer__name {
  font-size: var(--fs-h4);
  line-height: 1.4;
  text-transform: uppercase;
}
.footer__rule { width: 61px; height: 1px; margin: 13px 0 14px; background: var(--text-primary); }
.footer__brand p { font-size: var(--fs-footer-body); line-height: 1.5; }

.footer__social { display: flex; flex-direction: column; align-items: flex-end; gap: 22px; }
.footer__icons { display: flex; gap: 30px; }
.footer__icons a { transition: opacity .25s; }
.footer__icons a:hover { opacity: .7; }
.footer__icons img { width: var(--social-icon); height: var(--social-icon); }

.footer__cta {
  display: inline-flex;
  align-items: flex-end;
  gap: 23px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color .25s;
}
.footer__cta img { width: 12px; height: 12px; margin-bottom: 4px; transition: transform .25s; }
.footer__cta:hover { color: var(--text-accent); }
.footer__cta:hover img { transform: translate(3px, -3px); }

.footer__wordmark {
  display: block;
  margin: -28px 0 8px;
  text-align: center;
  font-weight: 200;
  font-size: var(--fs-display-light);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  font-family: var(--font-mono);
  font-size: var(--fs-footer-label);
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 1024px) {
  .footer { margin-top: 99px; }
}
@media (max-width: 1023px) {
  .footer__inner { padding-bottom: 32px; }
  .footer__bottom { padding-top: 40px; }
  .footer__glow { left: calc(50% - 384px + 276px - 500px); top: calc(401px - 500px); }
  .footer__icons { gap: 16px; }
  .footer__social { gap: 20px; }
  .footer__wordmark { margin: 40px 0; }
}
@media (max-width: 767px) {
  .footer__glow { left: calc(140px - 500px); top: calc(560px - 500px); }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .footer__brand { order: -1; align-items: flex-start; text-align: left; padding-top: 0; }
  .footer__rule { margin: 16px 0; }
  .footer__social { align-items: flex-start; gap: 20px; }
  .footer__wordmark { margin: 40px 0; }
  .footer__bottom { flex-wrap: wrap; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Consent checkbox (form) ---------- */
.consent {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: var(--fs-footer-body);
  line-height: 1.5;
  color: var(--text-muted);
  cursor: pointer;
}
.consent input { position: absolute; opacity: 0; width: 18px; height: 18px; margin: 0; cursor: pointer; }
.consent .option__box { margin-top: 1px; transition: border-color .2s; }
.consent:hover .option__box { border-color: var(--accent); }
.consent input:checked + .option__box {
  border: 0;
  background: var(--accent) url("../assets/icons/checkbox-check.svg") center / 16px no-repeat;
}
.consent input:focus-visible + .option__box { outline: 1px solid var(--accent); outline-offset: 3px; }
.consent a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 3px; transition: color .25s; }
.consent a:hover { color: var(--text-accent); }
.consent-field.has-error .option__box { border-color: #d9826b; }

/* footer legal links */
.footer__legal a { transition: color .25s; }
.footer__legal a:hover { color: var(--text-accent); }
@media (max-width: 767px) { .footer__legal { order: 3; width: 100%; } }

/* ---------- "Concept" label for concept (non-client) projects ---------- */
.concept-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 6px 12px;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  background: rgba(17, 20, 15, .8);
  backdrop-filter: blur(4px);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.concept-tag--inline {
  position: static;
  display: inline-block;
  margin: -4px 0 -4px 12px;   /* don't make the eyebrow line taller */
  padding: 2px 10px;
  font-size: 11px;
  vertical-align: middle;
  background: transparent;
  backdrop-filter: none;
  color: var(--text-muted);
}
@media (max-width: 767px) { .concept-tag--inline { margin: 8px 0 0; } }

/* =========================================================
   MOTION
   ========================================================= */

/* ---------- Process timeline: draws itself on scroll ----------
   JS sets --rail (0→1) on .timeline while scrolling and adds .is-in to
   each step when it reaches the viewport. Hidden states only apply
   when JS is running (html.js) so the page still works without it. */
.js .timeline::before {
  transform: translateX(-50%) scaleY(var(--rail, 0));
  transform-origin: top;
  transition: transform .15s linear;
}
.js .step .card {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.js .step--left .card { transform: translate(-24px, 24px); }
.js .step--right .card { transform: translate(24px, 24px); }
.js .step .card::after {
  transform: scaleX(0);
  transition: transform .5s ease .45s;
}
.js .step--left .card::after { transform-origin: right; }
.js .step--right .card::after { transform-origin: left; }
.js .step__node {
  opacity: 0;
  transform: scale(.3);
  transition: opacity .4s ease .2s, transform .5s cubic-bezier(.3,1.6,.5,1) .2s;
}
.js .step.is-in .card { opacity: 1; transform: none; }
.js .step.is-in .card::after { transform: scaleX(1); }
.js .step.is-in .step__node { opacity: 1; transform: none; }

/* CTA under the timeline fades in after the last step */
.js .cta__line { transform: translateX(-50%) scaleY(0); transform-origin: top; transition: transform .6s ease; }
.js .cta__circle, .js .cta__dot, .js .cta__label, .js .cta__heading, .js .cta__btn {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
}
.js .cta__label, .js .cta__heading, .js .cta__btn { transform: translateY(16px); }
.js .cta.is-in .cta__line { transform: translateX(-50%) scaleY(1); }
.js .cta.is-in .cta__circle, .js .cta.is-in .cta__dot { opacity: 1; transition-delay: .3s; }
.js .cta.is-in .cta__label { opacity: 1; transform: none; transition-delay: .35s; }
.js .cta.is-in .cta__heading { opacity: 1; transform: none; transition-delay: .45s; }
.js .cta.is-in .cta__btn { opacity: 1; transform: none; transition-delay: .55s; }

/* ---------- "Your turn" rings: endless ripple ----------
   All four rings share the outer size and grow from small to big while
   fading out; staggered delays keep 4 rings on screen at all times. */
.ring {
  width: var(--ring) !important;
  height: var(--ring) !important;
  animation: ripple 6s linear infinite;
  will-change: transform, opacity;
}
.ring--1 { animation-delay: 0s; }
.ring--2 { animation-delay: -1.5s; }
.ring--3 { animation-delay: -3s; }
.ring--4 { animation-delay: -4.5s; }
@keyframes ripple {
  0%   { transform: translate(-50%, -50%) scale(.3);  opacity: 0; }
  12%  { opacity: 1; }
  70%  { opacity: .55; }
  100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
}

@media (max-width: 1023px) {
  /* stacked layout: no side offsets, the thread between cards draws in */
  .js .step--left .card, .js .step--right .card { transform: translateY(24px); }
  .js .step__node::before, .js .step__node::after { transform: scaleY(0); transform-origin: top; transition: transform .4s ease .5s; }
  .js .step.is-in .step__node::before, .js .step.is-in .step__node::after { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .step .card, .js .step__node, .js .cta__label, .js .cta__heading, .js .cta__btn { opacity: 1 !important; transform: none !important; }
  .js .cta__circle, .js .cta__dot { opacity: 1 !important; }
  .js .timeline::before, .js .step .card::after, .js .cta__line { transform: none !important; }
  .js .timeline::before, .js .cta__line { transform: translateX(-50%) !important; }
  .ring { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .ring--3 { transform: translate(-50%, -50%) scale(.8); }
  .ring--2 { transform: translate(-50%, -50%) scale(.6); }
  .ring--1 { transform: translate(-50%, -50%) scale(.4); }
}

/* ---------- Mobile fine-tuning to match the 390 frame ---------- */
@media (max-width: 767px) {
  .faq__more .btn, .form__submit .btn { white-space: nowrap; padding-inline: 8px; }
  .footer__inner { padding-bottom: 32px; }
  .footer__top { padding-top: 40px; gap: 40px; }
  .footer__brand { gap: 0; }
  .footer__name { line-height: 1.4; }
  .footer__rule { margin: 16px 0; }
  .footer__nav { gap: 12px; }
  .footer__nav .link { line-height: 1.5; padding-bottom: 6px; }
  .footer__wordmark { margin: 40px 0; line-height: 1; }
  .footer__bottom { padding-top: 40px; row-gap: 12px; }
}
@media (max-width: 1023px) { .cta__heading { max-width: none; } }

/* =========================================================
   EXTRA RESPONSIVE FIXES (small laptops 1024–1279, very small phones)
   ========================================================= */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* FAQ stacks like on tablet: the side column is too narrow here */
  .faq { flex-direction: column; gap: 48px; }
  .faq__intro { flex: none; width: 100%; gap: 24px; }
  .faq__list { width: 100%; }
}
@media (max-width: 1279px) {
  .faq__more { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  /* the footer wordmark shrinks a little on the narrowest phones (52px from 390px up) */
  .footer__wordmark { font-size: clamp(40px, 13.4vw, 52px); }
}
@media (max-width: 359px) {
  .form__submit .btn, .faq__more .btn { white-space: normal; padding-inline: 16px; }
  .form__submit .btn img { width: 24px; height: 24px; }
}

/* ---------- EN / UA language switch (added by tools/i18n.py) ---------- */
.header__end { display: flex; align-items: center; gap: 24px; }
.lang {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.08em;
  line-height: 1;
  color: var(--text-muted);
}
.lang a { padding: 6px 2px; transition: color .25s ease; }
.lang a:hover { color: var(--text-accent); }
.lang a[aria-current="page"] { color: var(--text-primary); pointer-events: none; }
.lang span { opacity: .5; }
.lang--menu { justify-content: center; font-size: 18px; margin-top: 8px; }
@media (max-width: 1279px) { .header__end { gap: 16px; } }
@media (max-width: 767px) { .header .lang { font-size: 14px; gap: 6px; } }