/* ============================================
   MARS GROUP — Industrial Robots (INOVANCE)
   Design tokens
   ============================================ */
:root{
  --ink: #0a0a0c;
  --ink-2: #131316;
  --steel: #1c1d21;
  --steel-line: #2a2b30;
  --paper: #f6f5f2;
  --paper-2: #eeece7;
  --white: #ffffff;
  --muted: #6b6d73;
  --muted-2: #57585d;
  --accent: #fa5a20;
  --accent-2: #ff7a3d;
  --accent-ink: #b8410f;
  --accent-dim: #3a2117;

  --font-display: 'Space Grotesk', 'Manrope', sans-serif;
  --font-body: 'Manrope', sans-serif;

  --container: 1240px;
  --radius: 14px;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{ box-sizing: border-box; }
html{
  scroll-behavior: smooth;
  scrollbar-color: var(--muted) var(--paper-2);
  scrollbar-width: thin;
  scroll-snap-type: y mandatory;
}
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,p{ margin: 0; }
h1,h2,h3,.section-title,.proof-quote{ text-wrap: balance; }

::selection{ background: var(--accent); color: #fff; }

*:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: var(--paper-2); }
::-webkit-scrollbar-thumb{ background: #cfcdc6; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover{ background: var(--accent); }

.skip-link{
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--accent); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip-link:focus{ left: 0; }

.wrap{ max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.wrap-narrow{ max-width: 820px; }

/* ---------- Type ---------- */
.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: clamp(10px, 1.8vh, 18px);
}
.eyebrow::before{
  content: "";
  width: 22px;
  height: 1px;
  flex: none;
  background: var(--accent);
}
.section-dark .eyebrow,
.hero .eyebrow{
  color: var(--accent-2);
}
.section-dark .eyebrow::before,
.hero .eyebrow::before{
  background: var(--accent-2);
}
.section-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.01em;
  max-width: 16ch;
}
.section-lead{
  margin-top: clamp(10px, 1.8vh, 16px);
  font-size: clamp(15px, 1.9vh, 17px);
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 58ch;
}
.section-dark .section-lead{ color: #a7a8ad; }

/* ---------- Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .35s var(--ease), background .25s, border-color .25s, color .25s;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn:active{ transform: translateY(-1px) scale(.97); }
.btn-accent{ background: var(--accent); color: #fff; }
.btn-accent:hover{ background: var(--accent-2); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: rgba(10,10,12,.2); }
.hero .btn-ghost{ color: #fff; border-color: rgba(255,255,255,.28); }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent); }
.btn-sm{ padding: 11px 20px; font-size: 13px; }
.btn-block{ width: 100%; }

/* ============================================
   HEADER
   ============================================ */
.site-header{
  --h-fg: #fff;
  --h-dim: rgba(255,255,255,.72);
  --h-hover: rgba(255,255,255,.08);
  --h-line: rgba(255,255,255,.08);
  --dd-bg: #16161a;
  --dd-fg: #fff;
  --dd-sub: #8b8d93;
  --dd-hover: rgba(255,255,255,.06);
  --dd-line: rgba(255,255,255,.08);
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--h-line);
  transition: background .3s, border-color .3s;
}
.site-header.is-light{
  --h-fg: var(--ink);
  --h-dim: var(--muted-2);
  --h-hover: rgba(10,10,12,.06);
  --h-line: rgba(10,10,12,.08);
  --dd-bg: rgba(255,255,255,.98);
  --dd-fg: var(--ink);
  --dd-sub: var(--muted);
  --dd-hover: rgba(10,10,12,.04);
  --dd-line: rgba(10,10,12,.08);
  background: rgba(246,245,242,.86);
}
.header-inner{
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  height: 76px;
}

/* logo: light artwork on the dark skin, original on the light one */
.logo{ position: relative; display: block; flex: none; height: 58px; }
.logo-img{ display: block; width: auto; height: 58px; transition: opacity .3s; }
.logo-img-dark{ position: absolute; inset: 0; opacity: 0; }
.site-header.is-light .logo-img-light{ opacity: 0; }
.site-header.is-light .logo-img-dark{ opacity: 1; }

/* ---- desktop nav ---- */
.main-nav{ display: flex; align-items: center; gap: 2px; white-space: nowrap; }
.nav-item{ position: relative; }
.nav-link{
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 9px; border: 0; border-radius: 999px;
  background: transparent;
  font: 500 14px/1 var(--font-body); color: var(--h-dim);
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.nav-link:hover, .nav-item.is-open > .nav-link{ color: var(--h-fg); background: var(--h-hover); }
.nav-link:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-chev{ width: 12px; height: 12px; opacity: .7; transition: transform .3s var(--ease); }
.nav-item.is-open .nav-chev{ transform: rotate(180deg); }
.nav-ext{ font-size: 11px; color: var(--accent); }
/* the section this page belongs to */
.nav-item.is-section > .nav-link{ color: var(--h-fg); }
.nav-item.is-section > .nav-link::after{
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--accent);
}

.dd{
  position: absolute; top: calc(100% + 14px); left: 50%;
  width: 320px; padding: 8px;
  background: var(--dd-bg); color: var(--dd-fg);
  border: 1px solid var(--dd-line); border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  white-space: normal;
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -6px) scale(.98); transform-origin: 50% 0;
  transition: opacity .2s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
.dd::before{ /* hover bridge across the gap */
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}
.nav-item.is-open .dd{
  opacity: 1; visibility: visible; transform: translate(-50%, 0) scale(1);
  transition: opacity .2s ease, transform .35s var(--ease), visibility 0s;
}
.dd-list{ list-style: none; margin: 0; padding: 0; }
.dd-link{
  position: relative; display: block;
  padding: 10px 14px 10px 16px; border-radius: 12px;
  transition: background-color .2s;
}
.dd-link::before{
  content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleY(0); transition: transform .3s var(--ease);
}
.dd-link:hover{ background: var(--dd-hover); }
.dd-link:hover::before, .dd-link.is-current::before{ transform: scaleY(1); }
.dd-link:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; }
.dd-title{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px; line-height: 1.25;
}
.dd-sub{ display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--dd-sub); }
.dd-link.is-current .dd-title{ color: var(--accent); }
.dd-ext{ font-size: 12px; color: var(--accent); }
.dd-here{
  padding: 3px 7px; border-radius: 999px;
  background: rgba(250,90,32,.14); color: var(--accent);
  font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.dd-all{
  display: flex; align-items: center; justify-content: space-between;
  margin: 6px 0 0; padding: 12px 16px 6px;
  border-top: 1px solid var(--dd-line);
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--dd-sub);
  transition: color .2s;
}
.dd-all span{ transition: transform .3s var(--ease); }
.dd-all:hover{ color: var(--accent); }
.dd-all:hover span{ transform: translateX(4px); }

.nav-extra{ display: none; }

/* ---- actions ---- */
.header-actions{ display: flex; align-items: center; gap: 14px; flex: none; }
.header-phone{
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600; color: var(--h-fg);
  white-space: nowrap;
  transition: color .2s;
}
.header-phone:hover{ color: var(--accent); }

/* call button — phones and tablets */
.header-call{
  display: none; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--h-fg) 24%, transparent);
  color: var(--h-fg);
  transition: background-color .25s, border-color .25s, color .25s;
}
.header-call svg{ width: 18px; height: 18px; fill: currentColor; }
.header-call:hover, .header-call:active{ background: var(--accent); border-color: var(--accent); color: #fff; }

/* CTA stays quiet over the hero (it has its own calls to action), turns solid after */
.header-cta{ transition: background-color .35s, border-color .35s, color .35s; }
.site-header.is-over-hero .header-cta{
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); color: #fff;
}
.site-header.is-over-hero .header-cta:hover{ background: var(--accent); border-color: var(--accent); }

.nav-toggle{
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 36px; height: 36px; padding: 0; border: 0; background: transparent; cursor: pointer;
}
.nav-toggle span{ width: 100%; height: 2px; background: var(--h-fg); transition: transform .25s, opacity .25s; }
body.nav-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }


@media (max-width: 480px){
  .wrap{ padding: 0 18px; }
  .header-actions{ gap: 8px; }
  .header-call{ width: 38px; height: 38px; }
  .header-actions .btn-sm{ padding: 10px 14px; font-size: 12px; }
  .logo, .logo-img{ height: 46px; }
  .crumbs li{ font-size: 12px; }
}

/* ---- mobile / tablet menu ---- */
@media (max-width: 1180px){
  .nav-toggle{ display: flex; }
  .header-phone{ display: none; }
  .header-call{ display: grid; }
  .main-nav{
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; top: 76px; left: 0; right: 0; bottom: 0;
    background: var(--ink); padding: 8px 28px 32px;
    white-space: normal;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .25s, transform .3s var(--ease), visibility 0s linear .3s;
    overflow-y: auto; overscroll-behavior: contain;
  }
  body.nav-open .main-nav{ opacity: 1; transform: none; visibility: visible; transition: opacity .25s, transform .3s var(--ease), visibility 0s; }
  body.nav-open{ overflow: hidden; }
  /* a backdrop-filter would trap the fixed panel inside the header box */
  body.nav-open .site-header{ backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ink); --h-fg: #fff; }
  body.nav-open .logo-img-light{ opacity: 1; }
  body.nav-open .logo-img-dark{ opacity: 0; }
  .nav-item{ border-bottom: 1px solid rgba(255,255,255,.08); }
  .nav-link{
    width: 100%; height: auto; justify-content: space-between;
    padding: 18px 2px; border-radius: 0;
    font-family: var(--font-display); font-size: 19px; font-weight: 600; color: #fff;
  }
  .nav-link:hover, .nav-item.is-open > .nav-link{ background: transparent; color: #fff; }
  .nav-chev{ width: 16px; height: 16px; }
  .nav-item.is-section > .nav-link::after{ display: none; }
  .nav-item.is-section > .nav-link{ color: var(--accent-2); }

  .dd{
    position: static; width: auto; padding: 0 0 10px;
    background: none; border: 0; border-radius: 0; box-shadow: none;
    backdrop-filter: none; -webkit-backdrop-filter: none;
    opacity: 1; visibility: visible; transform: none;
    display: none;
    --dd-fg: #fff; --dd-sub: #8b8d93; --dd-hover: rgba(255,255,255,.05); --dd-line: rgba(255,255,255,.08);
    color: #fff;
  }
  .nav-item.is-open .dd{ display: block; transform: none; }
  .dd::before{ display: none; }
  .dd-link{ padding: 10px 12px 10px 18px; }
  .dd-all{ margin-top: 2px; padding: 12px 18px 4px; }

  .nav-extra{
    display: flex; flex-direction: column; gap: 6px;
    margin-top: auto; padding-top: 28px;
  }
  .nav-extra-phone{ font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 24px; color: #fff; }
  .nav-extra-mail{ font-size: 15px; color: #a7a8ad; }
  .nav-extra-cta{ margin-top: 14px; justify-content: center; }
}
@media (max-width: 480px){
  .main-nav{ padding: 4px 18px 24px; }
}

/* ============================================
   HERO
   ============================================ */
.hero{ position: relative; height: 100dvh; background: var(--ink); overflow: hidden; }
.hero-pin{
  position: relative;
  height: 100%;
  box-sizing: border-box;
  padding: 92px 0 18px;
}
.hero-grid{
  position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 40%, transparent 90%);
}
.hero-grain{
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Robot fills almost the full hero height, sitting behind the text overlay */
.hero-visual{
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: flex-end; justify-content: center;
}
.hero-circle{
  position: absolute;
  width: min(66vh, 580px); height: min(66vh, 580px);
  border-radius: 50%;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, var(--accent-2) 78%, var(--accent) 100%);
  left: 50%; top: 46%; transform: translate(-52%, -42%);
}
.hero-robot{
  position: relative; z-index: 1;
  height: min(84vh, 800px);
  width: auto;
  max-width: none;
  margin-bottom: min(2vh, 20px);
  filter: drop-shadow(0 40px 50px rgba(0,0,0,.55));
}

.hero-overlay{
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: space-between;
  pointer-events: none;
}
.hero-intro{
  color: #fff; max-width: 480px; pointer-events: auto;
  /* dark halo keeps the copy readable where it crosses the white robot */
  text-shadow: 0 1px 3px rgba(10,10,12,.7), 0 4px 22px rgba(10,10,12,.9), 0 10px 48px rgba(10,10,12,.75);
}
/* breadcrumbs */
.crumbs ol{ list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.crumbs li{ display: inline-flex; align-items: center; font-size: 13px; color: rgba(255,255,255,.62); }
.crumbs li + li::before{ content: ""; width: 4px; height: 4px; margin: 0 10px; border-radius: 50%; background: var(--accent); }
.crumbs a{ color: rgba(255,255,255,.62); transition: color .2s; }
.crumbs a:hover{ color: #fff; }
.crumbs [aria-current]{ color: #fff; }
.hero-intro h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.hero-sub{
  margin-top: 18px;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,.65);
  max-width: 36ch;
}
.hero-link{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px;
  color: #fff;
  text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 4px;
  transition: text-decoration-color .25s;
}
.hero-link span{ display: inline-block; transition: transform .25s; }
.hero-link:hover{ text-decoration-color: var(--accent); }
.hero-link:hover span{ transform: translateX(4px); }

.hero-statement{
  align-self: flex-end;
  text-align: right;
  pointer-events: auto;
  font-family: 'Unbounded', var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 5.4vw, 88px);
  line-height: .96;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 4px 24px rgba(10,10,12,.85), 0 12px 50px rgba(10,10,12,.6);
}

/* Entrance: a single authored moment on load */
.hero-intro, .hero-visual, .hero-statement{
  opacity: 0;
  transform: translateY(18px);
  animation: heroIn .8s cubic-bezier(.16,.84,.44,1) forwards;
}
.hero-visual{ animation-delay: .05s; }
.hero-intro{ animation-delay: .15s; }
.hero-statement{ animation-delay: .3s; }
@keyframes heroIn{
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-intro, .hero-visual, .hero-statement{ animation: none; opacity: 1; transform: none; }
}

@media (max-width: 900px){
  .hero{ height: 100svh; }
  .hero-pin{ padding: 82px 0 16px; }
  /* Landscape image: size by width on narrow screens, or the height-based
     rule fights the global img{max-width:100%} cap and squashes it. */
  .hero-visual{ align-items: center; }
  .hero-robot{
    height: auto;
    width: min(158vw, 700px);
    margin-right: 30vw;   /* centred flex item: shifts it left of centre */
    margin-bottom: -14vh;
  }
  /* scrim between robot and copy: keeps the text legible over the white casing */
  .hero-pin::after{
    content: "";
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(10,10,12,.94) 0%, rgba(10,10,12,.78) 22%, rgba(10,10,12,0) 42%),
      linear-gradient(0deg, rgba(10,10,12,.92) 0%, rgba(10,10,12,.62) 16%, rgba(10,10,12,0) 34%);
  }
  .hero-circle{
    width: min(88vw, 470px); height: min(88vw, 470px);
    left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%);
  }
  .hero-intro h1{ font-size: clamp(24px, 6vw, 34px); }
  .hero-sub{ font-size: 14px; max-width: 30ch; }
  .hero-statement{ font-size: clamp(28px, 9vw, 46px); }
  /* robot now runs under the copy — deepen the halos so both stay readable */
  .hero-intro{
    text-shadow: 0 1px 3px rgba(10,10,12,.9), 0 4px 18px rgba(10,10,12,.95), 0 12px 44px rgba(10,10,12,.85);
  }
  .hero-statement{
    text-shadow: 0 2px 10px rgba(10,10,12,.92), 0 8px 32px rgba(10,10,12,.88), 0 18px 60px rgba(10,10,12,.7);
  }
}

/* ============================================
   SECTIONS
   ============================================ */
/* Every block is one screen tall and snaps into place on scroll */
.hero, .section, .proof, .site-footer{
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.site-footer{ scroll-snap-align: end; }

.section{
  padding: clamp(88px, 11vh, 116px) 0 clamp(24px, 4.5vh, 48px);
  background: var(--paper);
  min-height: 100svh;
  display: flex;
  align-items: center;
}
.section > .wrap{ width: 100%; }
.section-dark{ background: var(--ink); color: #fff; }
.section-dark .section-title{ color: #fff; }
.section-dark .muted{ color: #a7a8ad; }

/* Robots — full-screen product blocks */
.rb{ overflow: hidden; }
.rb-wrap{
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
}
.rb-alt .rb-media{ order: 2; }

/* --- media --- */
.rb-media{
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: min(52vh, 460px);
}
.rb-img{
  position: relative; z-index: 1;
  width: 100%;
  max-width: min(46vw, 620px);
  height: auto;
  max-height: min(62vh, 560px);
  object-fit: contain;
  filter: drop-shadow(0 26px 40px rgba(10,10,12,.22));
}

/* The 6-axis shot carries a wide transparent margin on its left, so sizing it
   by the column width leaves the robot small and pushed to the right. Size it
   by height instead and let the empty part hang over the column. */
/* The 6-axis shot carries a wide transparent margin down its left side: the
   robot itself covers only the middle 61.4% of the canvas (x 384-1327 of 1536).
   Sizing that canvas to the column would leave the robot small and floating
   away from the text, so the image is blown up by 1/0.614 and pulled left by
   the width of that margin — the ROBOT then spans the column exactly, the same
   way the SCARA photo does. Both percentages resolve against the column width,
   so the alignment holds at every viewport. */
/* the copy is indented so it does not sit flush against the container edge
   while the robot hangs in the middle of the block */
#robots-6axis .rb-copy{ padding-left: clamp(14px, 4.5vw, 72px); }
#robots-6axis .rb-media{ display: block; min-width: 0; min-height: 0; }
#robots-6axis .rb-img{
  width: 163%;
  max-width: none;
  height: auto;
  max-height: none;
  margin-left: -45%; /* -0.25 x 163%, plus a nudge left toward the copy */
}

/* --- copy --- */
.rb-tag{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted);
}
.rb-tag span{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--accent-ink);
}
.rb-tag span::before{
  content: ""; width: 22px; height: 1px; background: var(--accent);
}
.rb-title{
  margin-top: clamp(8px, 1.6vh, 16px);
  font-family: 'Unbounded', var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 5.6vw, 86px);
  line-height: .92;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rb-sub{
  margin-top: clamp(6px, 1.2vh, 12px);
  font-family: var(--font-display);
  font-size: clamp(14px, 1.7vh, 17px); font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent-ink);
}
.rb-desc{
  margin-top: clamp(10px, 2vh, 20px);
  font-size: clamp(14px, 1.85vh, 16px);
  line-height: 1.62;
  color: var(--muted-2);
  max-width: 46ch;
}

.rb-specs{
  margin: clamp(16px, 3vh, 32px) 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.8vh, 18px) 24px;
}
.rb-spec{ position: relative; padding-top: clamp(9px, 1.5vh, 14px); border-top: 1px solid rgba(10,10,12,.14); }
.rb-spec::before{
  content: ""; position: absolute; top: -1px; left: 0; width: 26px; height: 2px; background: var(--accent);
}
.rb-spec dt{
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
}
.rb-spec dd{
  margin: 6px 0 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3.9vh, 40px);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.rb-spec dd i{ font-style: normal; font-size: .44em; font-weight: 600; color: var(--muted); margin-left: 4px; }

.rb-link{
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: clamp(16px, 3vh, 30px);
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  color: var(--ink);
  text-decoration: underline; text-decoration-color: rgba(10,10,12,.3); text-underline-offset: 5px;
  transition: text-decoration-color .25s, color .25s;
}
.rb-link span{ display: inline-block; transition: transform .25s; }
.rb-link:hover{ color: var(--accent-ink); text-decoration-color: var(--accent); }
.rb-link:hover span{ transform: translateX(5px); }
.rb-note{
  margin-top: clamp(12px, 2.2vh, 22px);
  font-size: 12.5px; line-height: 1.55;
  color: var(--muted);
  max-width: 48ch;
}

/* --- entrance choreography --- */
.rb-wrap .rb-img,
.rb-wrap .rb-tag,
.rb-wrap .rb-title,
.rb-wrap .rb-sub,
.rb-wrap .rb-desc,
.rb-wrap .rb-spec,
.rb-wrap .rb-link,
.rb-wrap .rb-note{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.rb-wrap .rb-img{ transform: translateY(26px) scale(.96); }

.rb-wrap.is-visible .rb-img,
.rb-wrap.is-visible .rb-tag,
.rb-wrap.is-visible .rb-title,
.rb-wrap.is-visible .rb-sub,
.rb-wrap.is-visible .rb-desc,
.rb-wrap.is-visible .rb-spec,
.rb-wrap.is-visible .rb-link,
.rb-wrap.is-visible .rb-note{
  opacity: 1;
  transform: none;
}
.rb-wrap.is-visible .rb-img{ transition-duration: 1s; transition-delay: .12s; }
.rb-wrap.is-visible .rb-tag{ transition-delay: .1s; }
.rb-wrap.is-visible .rb-title{ transition-delay: .17s; }
.rb-wrap.is-visible .rb-sub{ transition-delay: .23s; }
.rb-wrap.is-visible .rb-desc{ transition-delay: .29s; }
.rb-wrap.is-visible .rb-spec:nth-child(1){ transition-delay: .35s; }
.rb-wrap.is-visible .rb-spec:nth-child(2){ transition-delay: .41s; }
.rb-wrap.is-visible .rb-spec:nth-child(3){ transition-delay: .47s; }
.rb-wrap.is-visible .rb-spec:nth-child(4){ transition-delay: .53s; }
.rb-wrap.is-visible .rb-link{ transition-delay: .58s; }
.rb-wrap.is-visible .rb-note{ transition-delay: .64s; }

/* Applications — index list with a live preview */
.ap-head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  align-items: end;
  gap: clamp(16px, 4vw, 64px);
}
.ap-lead{ font-size: clamp(15px, 1.9vh, 17px); line-height: 1.6; color: #a7a8ad; max-width: 42ch; padding-bottom: 4px; }

.ap-grid{
  margin-top: clamp(22px, 4.4vh, 48px);
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  gap: clamp(24px, 3.6vw, 56px);
  height: min(60vh, 580px);
}

/* the index */
.ap-list{ display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.1); }
.ap-row{
  position: relative;
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 14px;
  padding: 0 4px;
  border: 0; border-bottom: 1px solid rgba(255,255,255,.1);
  background: none;
  font: inherit; text-align: left;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  transition: color .35s ease;
}
.ap-row::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--ease);
}
.ap-row:hover{ color: rgba(255,255,255,.72); }
.ap-row:focus-visible{ outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.ap-row[data-active]{ color: #fff; }
.ap-row[data-active]::after{ transform: scaleX(1); }

.ap-num{
  font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .08em;
  color: rgba(255,255,255,.28);
  transition: color .35s;
}
.ap-row[data-active] .ap-num{ color: var(--accent-2); }
.ap-name{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(19px, min(3.1vh, 2vw), 28px); line-height: 1.1; letter-spacing: -0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .5s var(--ease);
}
.ap-row[data-active] .ap-name{ transform: translateX(8px); }
.ap-arrow{
  font-size: 20px; color: var(--accent);
  opacity: 0; transform: translateX(-10px);
  transition: opacity .35s, transform .45s var(--ease);
}
.ap-row[data-active] .ap-arrow{ opacity: 1; transform: none; }

/* the preview */
.ap-view{
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink-2);
  isolation: isolate;
}
.ap-panel{ position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; }
.ap-panel[data-active]{ z-index: 2; }

/* the new photo wipes up over the old one; the old one only disappears once covered */
.ap-photo{
  position: relative; flex: 1 1 auto; min-height: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.14);
  transition: clip-path 0s linear .85s, transform 0s linear .85s;
}
.ap-panel[data-active] .ap-photo{
  clip-path: inset(0 0 0 0);
  transform: scale(1);
  transition: clip-path .85s cubic-bezier(.7,0,.2,1), transform 1.6s var(--ease);
}
.ap-panel::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,12,.45) 0%, rgba(10,10,12,0) 22%);
  opacity: 0; transition: opacity .3s .85s;
}
.ap-panel[data-active]::after{ opacity: 1; transition: opacity .5s; }

.ap-count{
  position: absolute; top: 18px; left: 18px; z-index: 1;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(10,10,12,.55);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em;
  color: #fff;
  opacity: 0; transition: opacity .2s;
}
.ap-caption{
  position: relative; z-index: 1; flex: none;
  padding: clamp(16px, 2.6vh, 28px) clamp(20px, 2.4vw, 32px) clamp(18px, 2.8vh, 30px);
  background: #16161a;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0s linear .85s;
}
.ap-panel[data-active] .ap-caption{ clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.7,0,.2,1) .1s; }
.ap-kicker{
  flex-basis: 100%;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2);
}
.ap-desc{
  flex-basis: 100%; margin-top: 8px; max-width: 56ch;
  font-size: clamp(14.5px, 1.9vh, 17px); line-height: 1.5; color: #e4e4e7;
}
.ap-ops{ flex: 1 1 auto; margin-top: clamp(12px, 1.8vh, 16px); display: flex; flex-wrap: wrap; gap: 6px; }
.ap-ops li{
  padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 999px;
  background: rgba(255,255,255,.05);
  font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.9);
  white-space: nowrap;
}
.ap-cta{
  margin-top: clamp(12px, 1.8vh, 16px); flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 14.5px;
  transition: background .25s, transform .35s var(--ease);
}
.ap-cta span{ transition: transform .3s var(--ease); }
.ap-cta:hover{ background: var(--accent-2); transform: translateY(-2px); }
.ap-cta:hover span{ transform: translateX(4px); }

.ap-count, .ap-caption > *{ opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.ap-panel[data-active] .ap-count{ opacity: 1; transform: none; transition: opacity .5s .45s; }
.ap-panel[data-active] .ap-caption > *{ opacity: 1; transform: none; transition: opacity .55s ease, transform .65s var(--ease); }
.ap-panel[data-active] .ap-kicker{ transition-delay: .4s; }
.ap-panel[data-active] .ap-desc{ transition-delay: .48s; }
.ap-panel[data-active] .ap-ops{ transition-delay: .54s; }
.ap-panel[data-active] .ap-cta{ transition-delay: .62s; }
.ap-panel:not([data-active]) .ap-cta{ pointer-events: none; }

/* entrance */
.ap-wrap:not(.is-visible) .ap-head > *,
.ap-wrap:not(.is-visible) .ap-row,
.ap-wrap:not(.is-visible) .ap-view{ opacity: 0; }
.ap-wrap.is-visible .ap-head > *{ animation: av-up .8s var(--ease) backwards; }
.ap-wrap.is-visible .ap-head > :nth-child(2){ animation-delay: .1s; }
.ap-wrap.is-visible .ap-row{ animation: av-side .7s var(--ease) calc(.2s + var(--i) * .07s) backwards; }
.ap-wrap.is-visible .ap-view{ animation: ap-view-in 1.1s cubic-bezier(.7,0,.2,1) .25s backwards; }
@keyframes ap-view-in{ from{ clip-path: inset(0 0 0 100% round 22px); } to{ clip-path: inset(0 0 0 0 round 22px); } }

/* In work — expanding panels */
.wk-head{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: end;
  gap: clamp(16px, 4vw, 64px);
}
.wk-title{ max-width: 20ch; }
.wk-lead{
  font-size: clamp(15px, 1.9vh, 17px);
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 44ch;
  padding-bottom: 4px;
}

.wk-panels{
  --wk-dur: 6.5s;
  margin-top: clamp(18px, 3.6vh, 40px);
  display: flex;
  gap: clamp(8px, .9vw, 14px);
  height: min(54vh, 520px);
}
.wk-panel{
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
  transition: flex-grow .8s var(--ease);
}
.wk-panel[data-active]{ flex-grow: 4.6; }

.wk-photo{
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.5) contrast(1.1);
  transform: scale(1.12);
  transition: filter .8s var(--ease), transform 1.2s var(--ease);
}
.wk-panel[data-active] .wk-photo{ filter: none; transform: scale(1.02); }
/* slow push-in while the panel is on screen */
.wk-panel[data-playing] .wk-photo{ animation: wk-push var(--wk-dur) linear forwards; }
@keyframes wk-push{ from{ transform: scale(1.02); } to{ transform: scale(1.1); } }

.wk-panel::after{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,10,12,.12) 0%, rgba(10,10,12,0) 22%, rgba(10,10,12,.62) 48%, rgba(10,10,12,.9) 68%, rgba(10,10,12,.96) 100%);
}
.wk-body{ text-shadow: 0 2px 14px rgba(0,0,0,.55); }

/* collapsed state: the whole panel is the button */
.wk-hit{
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(14px, 2vh, 22px) 0;
  border: 0; background: transparent; color: #fff;
  font: inherit; text-align: center;
  cursor: pointer;
}
.wk-hit:focus-visible{ outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 18px; }
.wk-num{
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: .12em; color: rgba(255,255,255,.6);
  transition: color .3s, opacity .35s var(--ease);
}
.wk-label{
  align-self: center;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: 'Unbounded', var(--font-display); font-weight: 600;
  font-size: clamp(14px, 1.6vw, 19px); letter-spacing: .02em;
  white-space: nowrap;
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
.wk-panel:not([data-active]):hover .wk-photo{ filter: grayscale(.6) brightness(.68) contrast(1.1); }
.wk-panel:not([data-active]):hover .wk-num{ color: var(--accent-2); }
.wk-panel:not([data-active]):hover .wk-label{ transform: rotate(180deg) translateY(6px); }
.wk-panel[data-active] .wk-hit{ cursor: default; }
.wk-panel[data-active] .wk-num,
.wk-panel[data-active] .wk-label{ opacity: 0; }

/* expanded state */
.wk-body{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: clamp(18px, 3vh, 34px) clamp(20px, 2.6vw, 38px) clamp(24px, 3.6vh, 40px);
  color: #fff;
  opacity: 0; transform: translateY(18px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}
.wk-panel[data-active] .wk-body{
  opacity: 1; transform: none;
  transition: opacity .6s ease .35s, transform .7s var(--ease) .35s;
}
.wk-kicker{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
}
.wk-kicker span{ color: rgba(255,255,255,.55); }
.wk-kicker span::after{
  content: ""; display: inline-block; vertical-align: middle;
  width: 22px; height: 1px; margin-left: 10px; background: var(--accent-2);
}
.wk-name{
  margin-top: clamp(8px, 1.4vh, 14px);
  font-family: 'Unbounded', var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4.2vh, 50px); line-height: 1.02; letter-spacing: -0.02em;
  white-space: nowrap;
}
.wk-desc{
  margin-top: clamp(8px, 1.4vh, 14px);
  max-width: 46ch;
  font-size: clamp(14px, 1.9vh, 17px); line-height: 1.5;
  color: rgba(255,255,255,.82);
}
.wk-tags{
  margin-top: clamp(12px, 2vh, 20px);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.wk-tags li{
  padding: 7px 13px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 999px;
  background: rgba(10,10,12,.35);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.9);
  white-space: nowrap;
}

/* auto-advance timer */
.wk-progress{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  height: 3px; background: rgba(255,255,255,.12);
  opacity: 0; transition: opacity .3s;
}
.wk-panel[data-active] .wk-progress{ opacity: 1; }
.wk-progress i{
  display: block; height: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
}
.wk-panel[data-playing] .wk-progress i{ animation: wk-timer var(--wk-dur) linear forwards; }
@keyframes wk-timer{ to{ transform: scaleX(1); } }
.wk[data-paused] .wk-panel .wk-progress i,
.wk[data-paused] .wk-panel .wk-photo{ animation-play-state: paused; }

/* entrance */
.wk-wrap .wk-head > *{
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.wk-wrap .wk-head > :nth-child(2){ transition-delay: .12s; }
.wk-wrap .wk-panel{
  opacity: 0; transform: translateY(40px);
  transition:
    flex-grow .8s var(--ease),
    opacity .9s var(--ease) calc(.22s + var(--i) * .09s),
    transform .9s var(--ease) calc(.22s + var(--i) * .09s);
}
.wk-wrap.is-visible .wk-head > *,
.wk-wrap.is-visible .wk-panel{ opacity: 1; transform: none; }

/* Advantages — spec sheet */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.av-wrap{
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
  grid-template-areas:
    "intro   grid"
    "compare grid";
  grid-template-rows: auto 1fr;
  column-gap: clamp(28px, 5vw, 84px);
  align-items: start;
}
.av-intro{ grid-area: intro; }
.av-compare{ grid-area: compare; align-self: end; }
.av-grid{ grid-area: grid; align-self: center; }

.av-title{ max-width: 18ch; }
.av-lead{
  margin-top: clamp(10px, 1.8vh, 16px);
  font-size: clamp(15px, 1.9vh, 17px);
  line-height: 1.6;
  color: var(--muted-2);
  max-width: 44ch;
}

/* industrial vs cobot */
.av-compare{
  margin-top: clamp(18px, 3.4vh, 34px);
  border-top: 1px solid rgba(10,10,12,.14);
}
.av-row{
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.15fr;
  gap: 14px;
  align-items: center;
  padding: clamp(9px, 1.5vh, 14px) 0;
  border-bottom: 1px solid rgba(10,10,12,.1);
  font-size: 14px;
  line-height: 1.35;
  color: var(--ink);
}
.av-row > [role="rowheader"]{ color: var(--muted-2); }
.av-row > [role="cell"]:last-child{ color: var(--muted-2); }
.av-row-head{
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.av-row-head > :nth-child(2){ color: var(--accent-ink); }
.av-row .is-win{ font-weight: 600; color: var(--ink); }
.av-row .is-win::before{
  content: ""; display: inline-block; vertical-align: middle;
  width: 6px; height: 6px; margin: -2px 8px 0 0; border-radius: 50%;
  background: var(--accent);
}

/* stat tiles */
.av-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.2vw, 16px);
}
.av-tile{
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(168px, 27vh, 250px);
  padding: clamp(16px, 2.6vh, 28px) clamp(18px, 2vw, 28px) clamp(26px, 3.8vh, 40px);
  border: 1px solid rgba(10,10,12,.08);
  border-radius: 18px;
  background: #fff;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.av-tile:hover{
  transform: translateY(-4px);
  border-color: rgba(250,90,32,.35);
  box-shadow: 0 18px 40px rgba(10,10,12,.08);
}
.av-tile-dark{ background: var(--ink); border-color: var(--ink); color: #fff; }
.av-tile-dark:hover{ border-color: var(--accent); box-shadow: 0 18px 40px rgba(10,10,12,.22); }

.av-label{
  font-family: var(--font-display); font-weight: 600;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}
.av-tile-dark .av-label{ color: rgba(255,255,255,.55); }

.av-num{
  margin-top: auto;
  padding-top: 14px;
  display: flex; align-items: baseline;
  white-space: nowrap;
  font-family: 'Unbounded', var(--font-display); font-weight: 700;
  font-size: clamp(36px, 5.6vh, 66px); line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.av-num small,
.av-num i{
  font-family: var(--font-display); font-style: normal; font-weight: 600;
  font-size: .3em; letter-spacing: 0;
  color: var(--muted);
}
.av-num small{ margin-right: .5em; }
.av-num i{ margin-left: .45em; }
.av-accent{ color: var(--accent); }
.av-num > .av-accent:first-child{ margin-right: .08em; }
.av-num > span + .av-accent{ margin: 0 .04em; }
.av-tile-dark .av-num i{ color: rgba(255,255,255,.55); }

.av-note{
  margin-top: clamp(8px, 1.3vh, 12px);
  max-width: 32ch;
  font-size: 14px; line-height: 1.45;
  color: var(--muted-2);
}
.av-tile-dark .av-note{ color: rgba(255,255,255,.66); }

/* ruler along the bottom edge of every tile */
.av-tile::after{
  content: "";
  position: absolute; left: clamp(18px, 2vw, 28px); right: clamp(18px, 2vw, 28px); bottom: 0;
  height: 12px;
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 48px) left bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 8px) left bottom / 100% 6px no-repeat;
  color: rgba(10,10,12,.2);
  transform: scaleX(0); transform-origin: left center;
}
.av-tile-dark::after{ color: rgba(255,255,255,.22); }

/* entrance: keyframes with backwards fill, so once they finish the tiles
   are back under their own transitions and the hover lift is not delayed */
@keyframes av-up{ from{ opacity: 0; transform: translateY(26px); } }
@keyframes av-side{ from{ opacity: 0; transform: translateX(-14px); } }
@keyframes av-ruler{ to{ transform: scaleX(1); } }

.av-wrap:not(.is-visible) .av-intro > *,
.av-wrap:not(.is-visible) .av-row,
.av-wrap:not(.is-visible) .av-tile{ opacity: 0; }

.av-wrap.is-visible .av-intro > *{ animation: av-up .8s var(--ease) backwards; }
.av-wrap.is-visible .av-intro > :nth-child(2){ animation-delay: .08s; }
.av-wrap.is-visible .av-intro > :nth-child(3){ animation-delay: .16s; }
.av-wrap.is-visible .av-row{ animation: av-side .7s var(--ease) backwards; }
.av-wrap.is-visible .av-row:nth-child(1){ animation-delay: .55s; }
.av-wrap.is-visible .av-row:nth-child(2){ animation-delay: .63s; }
.av-wrap.is-visible .av-row:nth-child(3){ animation-delay: .71s; }
.av-wrap.is-visible .av-row:nth-child(4){ animation-delay: .79s; }
.av-wrap.is-visible .av-tile{ animation: av-up .9s var(--ease) calc(.2s + var(--i) * .1s) backwards; }
.av-wrap.is-visible .av-tile::after{ animation: av-ruler 1.4s var(--ease) calc(.6s + var(--i) * .1s) forwards; }

/* Approach — cinematic manifesto */
.proof{
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.pf-bg{
  position: absolute; inset: -2%;
  background-size: cover; background-position: center;
  transform: scale(1.12);
  filter: saturate(.75) contrast(1.05);
}
.pf.is-lit .pf-bg{ animation: pf-drift 16s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes pf-drift{ from{ transform: scale(1.12); } to{ transform: scale(1.02); } }

.pf-shade{
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,12,.94) 0%, rgba(10,10,12,.82) 42%, rgba(10,10,12,.4) 100%),
    linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 35%, rgba(10,10,12,.7) 100%);
}

.pf-inner{
  position: relative; z-index: 1;
  width: 100%;
  padding-top: clamp(84px, 10vh, 110px);
  padding-bottom: clamp(28px, 5vh, 56px);
}

.pf-kicker{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 600;
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
}
.pf-kicker::before{ content: ""; width: 22px; height: 1px; background: var(--accent-2); }

.pf-statement{
  margin-top: clamp(16px, 3vh, 32px);
  max-width: 25ch;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(28px, min(4.1vw, 6.2vh), 64px);
  line-height: 1.12; letter-spacing: -0.025em;
  text-wrap: pretty;
}
.pf-statement em{ font-style: normal; }

/* word-by-word light-up; words are wrapped by main.js */
.pf-word{
  color: rgba(255,255,255,.16);
  transition: color .55s ease;
  transition-delay: calc(var(--w, 0) * 70ms);
}
.pf.is-lit .pf-word{ color: #fff; }
.pf.is-lit .pf-statement em .pf-word{ color: var(--accent-2); }

.pf-foot{
  margin-top: clamp(22px, 4.4vh, 48px);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "line line" "sign link";
  row-gap: clamp(14px, 2.2vh, 22px);
  align-items: center;
}
.pf-line{ grid-area: line; display: block; height: 1px; background: rgba(255,255,255,.14); }
.pf-line i{
  display: block; height: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--pf-total, 2.4s) cubic-bezier(.4,0,.2,1) .2s;
}
.pf.is-lit .pf-line i{ transform: scaleX(1); }

.pf-sign{ grid-area: sign; font-size: 15px; color: rgba(255,255,255,.62); }
.pf-link{
  grid-area: link;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  transition: background .3s, border-color .3s, color .3s;
}
.pf-link span{ transition: transform .3s var(--ease); }
.pf-link:hover{ background: var(--accent); border-color: var(--accent); }
.pf-link:hover span{ transform: translateX(4px); }

/* the kicker and footer fade in around the statement */
.pf-kicker, .pf-sign, .pf-link{
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.pf.is-lit .pf-kicker{ opacity: 1; transform: none; }
.pf.is-lit .pf-sign,
.pf.is-lit .pf-link{ opacity: 1; transform: none; transition-delay: var(--pf-total, 2.4s); }

/* Process — timeline */
.ps-head{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: end;
  gap: clamp(16px, 4vw, 64px);
}
.ps-title{ max-width: 16ch; }
.ps-aside{ display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-bottom: 4px; }
.ps-lead{ font-size: clamp(15px, 1.9vh, 17px); line-height: 1.6; color: #a7a8ad; max-width: 40ch; }
.ps-cta{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  transition: background .25s, transform .35s var(--ease);
}
.ps-cta span{ transition: transform .3s var(--ease); }
.ps-cta:hover{ background: var(--accent-2); transform: translateY(-2px); }
.ps-cta:hover span{ transform: translateX(4px); }

.ps-steps{
  --node: 50px;
  --gap: clamp(14px, 2vw, 30px);
  --step: .42s;                         /* time for the runner to cross one link */
  margin-top: clamp(30px, 6.5vh, 72px);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap);
  counter-reset: none;
}
.ps-step{ position: relative; display: flex; flex-direction: column; }

/* link to the next node: a dim track with an orange fill running over it */
.ps-step:not(:last-child)::before,
.ps-step:not(:last-child)::after{
  content: "";
  position: absolute;
  top: calc(var(--node) / 2);
  left: calc(var(--node) + 10px);
  right: calc(var(--gap) * -1 + 10px);
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
}
.ps-step:not(:last-child)::before{ background: rgba(255,255,255,.14); }
.ps-step:not(:last-child)::after{
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--step) linear calc(.35s + var(--i) * var(--step) + .12s);
}

.ps-node{
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: var(--node); height: var(--node);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  background: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .04em;
  color: rgba(255,255,255,.5);
  transition:
    background .35s ease calc(.35s + var(--i) * var(--step)),
    border-color .35s ease calc(.35s + var(--i) * var(--step)),
    color .35s ease calc(.35s + var(--i) * var(--step)),
    box-shadow .5s ease calc(.35s + var(--i) * var(--step)),
    transform .35s var(--ease);
}

.ps-body{
  flex: 1;
  display: flex; flex-direction: column;
  margin-top: clamp(16px, 2.8vh, 26px);
  padding-right: 6px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(.45s + var(--i) * var(--step));
}
.ps-name{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(17px, 2.3vh, 21px); line-height: 1.2;
  min-height: 2.4em; /* one- and two-line titles keep the descriptions level */
  transition: color .3s;
}
.ps-desc{
  margin-top: 10px;
  margin-bottom: clamp(12px, 2vh, 18px);
  font-size: clamp(13.5px, 1.8vh, 15px); line-height: 1.55;
  color: #a7a8ad;
}
.ps-result{
  margin-top: auto; /* results line up along the bottom of the row */
  padding-top: clamp(10px, 1.6vh, 14px);
  border-top: 1px dashed rgba(255,255,255,.16);
  font-size: 14px; line-height: 1.4; font-weight: 600; color: #fff;
}
.ps-result span{
  display: block; margin-bottom: 4px;
  font-family: var(--font-display); font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
}

/* the runner arrives: link fills, node lights, copy rises */
.ps-wrap.is-visible .ps-step::after{ transform: scaleX(1); }
.ps-wrap.is-visible .ps-node{
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 0 0 6px rgba(250,90,32,.14);
}
.ps-wrap.is-visible .ps-body{ opacity: 1; transform: none; }

.ps-step:hover .ps-node{ transform: scale(1.08); }
.ps-step:hover .ps-name{ color: var(--accent-2); }

/* heading rises first */
.ps-wrap .ps-head > *{
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.ps-wrap .ps-head > :nth-child(2){ transition-delay: .1s; }
.ps-wrap.is-visible .ps-head > *{ opacity: 1; transform: none; }

/* Lead form */
.lf-wrap{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 84px);
  align-items: center;
}
.lf-title{ max-width: 21ch; }
.lf-lead{
  margin-top: clamp(10px, 1.8vh, 16px);
  max-width: 46ch;
  font-size: clamp(15px, 1.9vh, 17px); line-height: 1.6;
  color: var(--muted-2);
}

/* what happens after the request */
.lf-next{ margin-top: clamp(18px, 3.4vh, 34px); }
.lf-next li{
  display: grid; grid-template-columns: 44px 1fr; gap: 12px;
  padding: clamp(10px, 1.6vh, 14px) 0;
  border-top: 1px solid rgba(10,10,12,.1);
}
.lf-next li:last-child{ border-bottom: 1px solid rgba(10,10,12,.1); }
.lf-step{
  padding-top: 2px;
  font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .08em;
  color: var(--accent-ink);
}
.lf-next b{ font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.lf-next p{ margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--muted-2); }

.lf-direct{
  margin-top: clamp(16px, 3vh, 28px);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px;
  font-size: 14px; color: var(--muted);
}
.lf-direct a{
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  color: var(--ink);
  border-bottom: 1px solid rgba(10,10,12,.2);
  transition: color .2s, border-color .2s;
}
.lf-direct a:hover{ color: var(--accent-ink); border-color: var(--accent); }

/* the form card */
.lf-form{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: clamp(10px, 1.7vh, 16px);
  padding: clamp(20px, 3.4vh, 34px) clamp(20px, 2.6vw, 36px);
  border-radius: 22px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 30px 70px rgba(10,10,12,.2);
}
.lf-form::before{
  content: ""; position: absolute; z-index: -1;
  top: -40%; right: -30%; width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(250,90,32,.28) 0%, rgba(250,90,32,0) 65%);
  pointer-events: none;
}
.lf-form-title{
  font-family: 'Unbounded', var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.7vh, 25px); letter-spacing: -0.01em;
}

.lf-chips{ margin: 0; padding: 0; border: 0; min-width: 0; }
.lf-chips legend,
.lf-form .field label{
  padding: 0;
  font-size: 12.5px; font-weight: 600;
  color: rgba(255,255,255,.6);
}
.lf-chips legend{ margin-bottom: 8px; }
.lf-chip-list{ display: flex; flex-wrap: wrap; gap: 8px; }
.lf-chip{ position: relative; }
.lf-chip input{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.lf-chip span{
  display: inline-block;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  font-size: 13.5px; color: rgba(255,255,255,.85);
  transition: background .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.lf-chip:hover span{ border-color: rgba(255,255,255,.45); }
.lf-chip input:checked + span{ background: var(--accent); border-color: var(--accent); color: #fff; }
.lf-chip input:active + span{ transform: scale(.96); }
.lf-chip input:focus-visible + span{ outline: 2px solid var(--accent-2); outline-offset: 2px; }

.lf-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.field{ display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lf-form .field input,
.lf-form .field textarea{
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font-family: var(--font-body); font-size: 15px;
  resize: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.lf-form .field textarea{ min-height: clamp(64px, 11vh, 96px); }
.lf-form .field input::placeholder,
.lf-form .field textarea::placeholder{ color: rgba(255,255,255,.32); }
.lf-form .field input:hover,
.lf-form .field textarea:hover{ border-color: rgba(255,255,255,.28); }
.lf-form .field input:focus,
.lf-form .field textarea:focus{
  outline: none;
  border-color: var(--accent);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 3px rgba(250,90,32,.25);
}
.lf-form .field input:invalid:not(:placeholder-shown){ border-color: #ff6b5e; }
.lf-form .field input:invalid:not(:placeholder-shown):focus{ box-shadow: 0 0 0 3px rgba(255,107,94,.25); }
.field-required{ color: var(--accent-2); }

.lf-form .field-file{
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border: 1px dashed rgba(255,255,255,.22); border-radius: 10px;
  font-size: 13.5px; color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
/* visually hidden, still focusable and clickable through the label */
.lf-form .field-file input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.lf-form .field-file:hover,
.lf-form .field-file:focus-within{ border-color: var(--accent); color: #fff; }
.lf-file-icon{
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  font-size: 15px; line-height: 1;
  transition: background .2s, transform .3s var(--ease);
}
.lf-form .field-file:hover .lf-file-icon{ background: var(--accent); transform: rotate(90deg); }
.lf-form .field-file.is-attached{ border-style: solid; border-color: rgba(250,90,32,.6); color: #fff; }
.lf-form .field-file.is-attached .lf-file-icon{ background: var(--accent); }
.lf-file-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lf-form .field-check{
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,.55);
}
.lf-form .field-check input{ margin-top: 2px; accent-color: var(--accent); flex: none; }

.lf-submit{ gap: 10px; padding: 16px 28px; font-size: 16px; }
.lf-submit span{ transition: transform .3s var(--ease); }
.lf-submit:hover span{ transform: translateX(5px); }

/* entrance */
.lf-wrap:not(.is-visible) .lf-copy > *,
.lf-wrap:not(.is-visible) .lf-next li,
.lf-wrap:not(.is-visible) .lf-form{ opacity: 0; }
.lf-wrap.is-visible .lf-copy > *{ animation: av-up .8s var(--ease) backwards; }
.lf-wrap.is-visible .lf-copy > :nth-child(2){ animation-delay: .08s; }
.lf-wrap.is-visible .lf-copy > :nth-child(3){ animation-delay: .16s; }
.lf-wrap.is-visible .lf-copy > :nth-child(4){ animation: none; }
.lf-wrap.is-visible .lf-next li{ animation: av-side .7s var(--ease) calc(.3s + var(--i) * .1s) backwards; }
.lf-wrap.is-visible .lf-copy > :nth-child(5){ animation-delay: .6s; }
.lf-wrap.is-visible .lf-form{ animation: lf-in 1s var(--ease) .12s backwards; }
@keyframes lf-in{ from{ opacity: 0; transform: translateY(34px) scale(.98); } }

/* FAQ */
.fq-wrap{
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}
.fq-title{ max-width: 12ch; }
.fq-lead{ margin-top: clamp(10px, 1.8vh, 16px); font-size: clamp(15px, 1.9vh, 17px); line-height: 1.6; color: #a7a8ad; max-width: 32ch; }

.fq-ask{
  margin-top: clamp(22px, 5vh, 48px);
  padding: clamp(18px, 2.8vh, 26px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(250,90,32,.14) 0%, rgba(255,255,255,.03) 55%);
}
.fq-ask-title{ font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: clamp(17px, 2.3vh, 21px); }
.fq-ask-text{ margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: #a7a8ad; }
.fq-ask-actions{ margin-top: clamp(14px, 2.2vh, 20px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.fq-ask-btn{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  transition: background .25s, transform .35s var(--ease);
}
.fq-ask-btn span{ transition: transform .3s var(--ease); }
.fq-ask-btn:hover{ background: var(--accent-2); transform: translateY(-2px); }
.fq-ask-btn:hover span{ transform: translateX(4px); }
.fq-ask-phone{
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.25);
  transition: color .2s, border-color .2s;
}
.fq-ask-phone:hover{ color: var(--accent-2); border-color: var(--accent-2); }

/* accordion */
.fq-list{ border-top: 1px solid rgba(255,255,255,.1); }
.fq-item{
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.fq-item::before{
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: top;
  transition: transform .45s var(--ease);
}
.fq-item[open]:not(.is-closing)::before{ transform: scaleY(1); }

.fq-item summary{
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  gap: 14px;
  padding: clamp(13px, 2.2vh, 20px) 0 clamp(13px, 2.2vh, 20px) 18px;
  list-style: none;
  cursor: pointer;
}
.fq-item summary::-webkit-details-marker{ display: none; }
.fq-item summary:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.fq-num{
  font-family: var(--font-display); font-weight: 600; font-size: 12.5px; letter-spacing: .08em;
  color: rgba(255,255,255,.35);
  transition: color .3s;
}
.fq-q{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(16px, 2.2vh, 19px); line-height: 1.3;
  transition: color .3s;
}
.fq-icon{
  position: relative;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  transition: background .3s, border-color .3s, transform .45s var(--ease);
}
.fq-icon::before,
.fq-icon::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 1.5px; margin: -.75px 0 0 -6px;
  background: #fff; border-radius: 1px;
}
.fq-icon::after{ transform: rotate(90deg); }

.fq-item summary:hover .fq-q{ color: var(--accent-2); }
.fq-item summary:hover .fq-icon{ border-color: var(--accent); }
.fq-item[open]:not(.is-closing) .fq-num{ color: var(--accent-2); }
.fq-item[open]:not(.is-closing) .fq-icon{ background: var(--accent); border-color: var(--accent); transform: rotate(135deg); }

.fq-a{ overflow: hidden; }
.fq-a p{
  padding: 0 48px clamp(14px, 2.4vh, 22px) 66px;
  font-size: clamp(14.5px, 1.9vh, 16px); line-height: 1.6;
  color: #b4b5ba;
  max-width: 68ch;
}
.fq-a a{ color: #fff; border-bottom: 1px solid rgba(255,255,255,.3); transition: color .2s, border-color .2s; }
.fq-a a:hover{ color: var(--accent-2); border-color: var(--accent-2); }

/* entrance */
.fq-wrap:not(.is-visible) .fq-intro > *,
.fq-wrap:not(.is-visible) .fq-item{ opacity: 0; }
.fq-wrap.is-visible .fq-intro > *{ animation: av-up .8s var(--ease) backwards; }
.fq-wrap.is-visible .fq-intro > :nth-child(2){ animation-delay: .08s; }
.fq-wrap.is-visible .fq-intro > :nth-child(3){ animation-delay: .16s; }
.fq-wrap.is-visible .fq-intro > :nth-child(4){ animation-delay: .5s; }
.fq-wrap.is-visible .fq-item{ animation: av-side .7s var(--ease) calc(.18s + var(--i) * .07s) backwards; }

/* Footer */
/* ---------- Footer ---------- */
.ft{
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  padding: clamp(92px, 12.5vh, 124px) 0 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.ft::before{ /* soft warm glow behind the contacts */
  content: ""; position: absolute; right: -10%; top: -30%;
  width: 60vw; height: 60vw; max-width: 820px; max-height: 820px;
  background: radial-gradient(closest-side, rgba(250,90,32,.14), rgba(250,90,32,0));
  pointer-events: none;
}
.ft-wrap{ position: relative; }

.ft-top{
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 6vw, 96px); align-items: end;
  padding-bottom: clamp(28px, 4.4vh, 48px);
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.ft-logo{ display: inline-block; }
.ft-logo img{ display: block; width: clamp(136px, 12vw, 176px); height: auto; }
.ft-tagline{ margin-top: 10px; max-width: 34ch; font-size: 15.5px; line-height: 1.6; color: #a7a8ad; }
.ft-socials{ margin-top: 18px; display: flex; gap: 10px; }
.ft-soc{
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.16); color: #fff;
  transition: background .3s, border-color .3s, transform .35s var(--ease);
}
.ft-soc svg{ width: 19px; height: 19px; fill: currentColor; }
.ft-soc:hover{ background: var(--accent); border-color: var(--accent); transform: translateY(-3px); }

.ft-contact{ justify-self: end; text-align: right; }
.ft-eyebrow{
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2);
}
.ft-phone{
  display: inline-block; margin-top: 12px;
  font-family: 'Unbounded', var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.5vw, 54px); line-height: 1.05; letter-spacing: -0.02em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 6px;
  transition: color .3s, background-size .5s var(--ease);
}
.ft-phone:hover{ color: var(--accent-2); background-size: 100% 2px; }
.ft-contact-row{ margin-top: 14px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px 28px; }
.ft-contact-row a{ font-family: var(--font-display); font-weight: 500; font-size: clamp(16px, 1.5vw, 20px); transition: color .25s; }
.ft-contact-row a:hover{ color: var(--accent-2); }
.ft-contact-meta{ margin-top: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ft-addr, .ft-hours{ display: inline-flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.5; color: #a7a8ad; }
.ft-addr svg, .ft-hours svg{ flex: none; width: 16px; height: 16px; margin-top: 3px; fill: var(--accent); }
.ft-addr{ transition: color .25s; }
.ft-addr:hover{ color: #fff; }

.ft-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px clamp(24px, 4vw, 64px);
  padding: clamp(28px, 4.4vh, 52px) 0 clamp(8px, 1.6vh, 24px);
}
.ft-h{
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; color: #6f7076;
}
.ft-h-2{ margin-top: clamp(16px, 2.6vh, 28px); }
.ft-links{ list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: clamp(6px, 1.1vh, 10px); }
.ft-links a{
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  font-size: 15.5px; color: #d9d9dd;
  transition: color .25s, transform .35s var(--ease);
}
.ft-links a::before{
  content: ""; position: absolute; left: -16px; top: 50%;
  width: 8px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.ft-links a:hover{ color: #fff; transform: translateX(14px); }
.ft-links a:hover::before{ transform: scaleX(1); }
.ft-ext{ font-size: .8em; color: var(--accent-2); }

.ft-word{
  font-family: 'Unbounded', var(--font-display); font-weight: 800;
  font-size: min(10.4vw, 128px); line-height: .78; letter-spacing: -0.03em;
  white-space: nowrap; text-align: center;
  margin: 0 -28px -0.06em; padding-top: .08em;
  color: transparent;
  user-select: none;
}
/* each letter: dim base; a copy in the hero-circle palette fades in under the cursor */
.ft-l{
  --glow: 0;
  position: relative; display: inline-block;
  padding: .14em 0 .08em; margin: -.14em 0 -.08em;
  background: linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 72%, rgba(255,255,255,0) 100%);
  -webkit-background-clip: text; background-clip: text;
  transform: translateY(calc(var(--glow) * -6%));
  transition: transform var(--d, 1.1s) var(--ease);
  cursor: default;
}
.ft-l::after{
  content: attr(data-l);
  position: absolute; inset: 0;
  padding: inherit;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, var(--accent-2) 78%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.25) 100%);
  mask-image: linear-gradient(180deg, #000 62%, rgba(0,0,0,.25) 100%);
  opacity: var(--glow);
  transition: opacity var(--d, 1.1s) ease;
  pointer-events: none;
}
.ft-gap{ display: inline-block; width: .32em; }

.ft-bottom{
  display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap;
  position: relative; padding: 18px 0 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: 13.5px; color: #7c7d83;
}
.ft-bottom a{ transition: color .25s; }
.ft-bottom a:hover{ color: #fff; }
.ft-up{
  margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; color: #fff;
}
.ft-up span{
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  transition: background .3s, border-color .3s, transform .35s var(--ease);
}
.ft-up:hover span{ background: var(--accent); border-color: var(--accent); transform: translateY(-3px); }

/* entrance */
.ft-wrap:not(.is-visible) .ft-brand,
.ft-wrap:not(.is-visible) .ft-contact,
.ft-wrap:not(.is-visible) .ft-col,
.ft-wrap:not(.is-visible) .ft-word{ opacity: 0; }
.ft-wrap.is-visible .ft-brand{ animation: av-up .8s var(--ease) backwards; }
.ft-wrap.is-visible .ft-contact{ animation: av-up .8s var(--ease) .1s backwards; }
.ft-wrap.is-visible .ft-col{ animation: av-up .7s var(--ease) calc(.2s + var(--i) * .08s) backwards; }
.ft-wrap.is-visible .ft-word{ animation: ft-word 1.4s var(--ease) .35s backwards; }
@keyframes ft-word{ from{ opacity: 0; transform: translateY(40%); letter-spacing: .04em; } }
/* desktop: the footer is exactly one screen, the bottom bar sits on the screen's bottom edge */
@media (min-width: 761px){
  .ft{ min-height: 100svh; display: flex; flex-direction: column; }
  .ft-wrap{ flex: 1 0 auto; width: 100%; display: flex; flex-direction: column; }
  .ft-word{ margin-top: auto; }
  .ft-word + .ft-bottom, .ft-bottom{ margin-top: auto; }
  .ft-word + .ft-bottom{ margin-top: 0; }
}
/* leave room for the side dots when the container reaches the screen edge */
@media (min-width: 761px) and (max-width: 1360px){
  .ft-contact{ padding-right: 30px; }
}
/* keep the whole footer — bottom bar included — inside one screen on short laptops */
@media (min-width: 761px) and (max-height: 860px){
  .ft{ padding-top: 88px; }
  .ft-word{ font-size: min(8.6vw, 104px); }
  .ft-phone{ font-size: clamp(28px, 3.2vw, 46px); }
}
@media (min-width: 761px) and (max-height: 799px){
  .ft-word{ font-size: min(8vw, 12.5vh); }
  .ft-top{ padding-bottom: clamp(18px, 3.2vh, 32px); }
  .ft-logo img{ width: clamp(116px, 10vw, 150px); }
  .ft-tagline{ margin-top: 6px; font-size: 14px; line-height: 1.5; }
  .ft-socials{ margin-top: 12px; }
  .ft-soc{ width: 38px; height: 38px; }
  .ft-phone{ margin-top: 6px; font-size: clamp(26px, 2.9vw, 40px); padding-bottom: 4px; }
  .ft-contact-row{ margin-top: 8px; }
  .ft-contact-row a{ font-size: 16px; }
  .ft-contact-meta{ margin-top: 10px; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; }
  .ft-addr, .ft-hours{ font-size: 13.5px; }
  .ft-grid{ padding: clamp(18px, 3vh, 28px) 0 clamp(14px, 2.4vh, 22px); }
  .ft-links{ margin-top: 8px; gap: 5px; }
  .ft-links a{ font-size: 14.5px; }
  .ft-h-2{ margin-top: 12px; }
  .ft-bottom{ padding: 12px 0 14px; }
  .ft-up span{ width: 30px; height: 30px; }
}
@media (min-width: 761px) and (max-height: 660px){
  .ft{ padding-top: 82px; }
  .ft-word{ font-size: min(7vw, 10vh); }
  .ft-tagline{ display: none; }
  .ft-links{ gap: 3px; }
  .ft-links a{ font-size: 14px; }
}
@media (min-width: 761px) and (max-height: 600px){
  .ft-word{ display: none; }
  .ft-word + .ft-bottom{ margin-top: auto; }
}

/* Scroll reveal */
[data-reveal]{ opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-visible{ opacity: 1; transform: none; }

/* Short viewports: trim the densest block so it still clears one screen */
@media (max-height: 780px){
  #robots-6axis .rb-img{ width: 140%; margin-left: -38%; }
  .rb-desc{ font-size: 14px; }
  .rb-note{ font-size: 12px; }
  .ps-desc{ font-size: 13.5px; }
}
/* Anything shorter than this can't hold a full block — let it scroll freely */
@media (max-height: 620px){
  #robots-6axis .rb-img{ width: 112%; margin-left: -32%; }
  html{ scroll-snap-type: y proximity; }
  .section, .proof{ min-height: 0; }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px){
  .fq-wrap{ grid-template-columns: 1fr; gap: 20px; }
  .lf-wrap{ grid-template-columns: 1fr; gap: 24px; }
}

/* ---- Narrow screens: card rows become swipeable, so each block still
        fits one screen instead of growing into a long vertical list ---- */
@media (max-width: 760px){
  .section{ padding: 92px 0 36px; }
  .hero-pin{ padding: 120px 0 80px; }
  .section-title{ font-size: clamp(26px, 7vw, 34px); }
  .section-lead{ font-size: 15px; }

  /* advantages: intro, tiles, then the comparison */
  .av-wrap{
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "grid" "compare";
    grid-template-rows: auto;
  }
  .av-lead{ font-size: 14px; line-height: 1.5; }
  .av-grid{ margin-top: 16px; gap: 8px; }
  .av-tile{ min-height: 0; padding: 12px 14px 20px; border-radius: 14px; }
  .av-label{ font-size: 10px; letter-spacing: .1em; }
  .av-num{ padding-top: 8px; font-size: clamp(24px, 7.4vw, 32px); }
  .av-note{ display: none; }
  .av-tile::after{ left: 14px; right: 14px; height: 8px; }
  .av-compare{ margin-top: 14px; }
  .av-row{ grid-template-columns: .95fr 1fr 1.1fr; gap: 8px; padding: 8px 0; font-size: 12.5px; }
  .av-row-head{ font-size: 9.5px; letter-spacing: .08em; }

  /* manifesto */
  .pf-statement{ max-width: none; font-size: clamp(26px, 7.6vw, 34px); line-height: 1.14; }
  .pf-foot{ grid-template-columns: 1fr; grid-template-areas: "line" "sign" "link"; }
  .pf-sign{ font-size: 14px; }
  .pf-link{ justify-self: start; }

  /* process: vertical timeline */
  .ps-head{ grid-template-columns: 1fr; gap: 10px; }
  .ps-aside{ gap: 12px; }
  .ps-lead{ font-size: 14px; line-height: 1.5; }
  .ps-cta{ display: none; }
  .ps-steps{ --node: 34px; grid-template-columns: 1fr; gap: 0; margin-top: 20px; }
  .ps-step{ display: grid; grid-template-columns: var(--node) 1fr; column-gap: 14px; padding-bottom: 14px; }
  .ps-body{ display: block; }
  .ps-name{ min-height: 0; }
  .ps-step:not(:last-child)::before,
  .ps-step:not(:last-child)::after{
    top: calc(var(--node) + 6px); bottom: 6px;
    left: calc(var(--node) / 2 - 1px); right: auto;
    width: 2px; height: auto; margin-top: 0;
  }
  .ps-step:not(:last-child)::after{ transform: scaleY(0); transform-origin: center top; }
  .ps-wrap.is-visible .ps-step::after{ transform: scaleY(1); }
  .ps-node{ font-size: 11px; }
  .ps-body{ margin-top: 5px; }
  .ps-name{ font-size: 16px; }
  .ps-desc{ margin: 4px 0 0; font-size: 13px; line-height: 1.45; }
  .ps-result{ display: none; }

  /* lead form: the form is the point, the side copy steps back */
  .lf-wrap{ gap: 14px; }
  .lf-title{ font-size: clamp(24px, 6.6vw, 30px); }
  .lf-lead{ font-size: 13.5px; line-height: 1.5; }
  .lf-next, .lf-direct, .lf-form-title{ display: none; }
  .lf-form{ padding: 16px; gap: 10px; border-radius: 18px; }
  .lf-chips legend{ margin-bottom: 6px; }
  .lf-chip-list{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .lf-chip-list::-webkit-scrollbar{ display: none; }
  .lf-chip span{ padding: 7px 12px; font-size: 13px; white-space: nowrap; }
  .lf-row{ grid-template-columns: 1fr; gap: 10px; }
  /* the placeholder carries the hint; the label stays for screen readers */
  .lf-form .field-task label{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .field{ gap: 5px; }
  .lf-form .field input, .lf-form .field textarea{ padding: 10px 12px; font-size: 16px; }
  .lf-form .field textarea{ min-height: 50px; }
  .lf-form .field-file{ padding: 8px 12px; font-size: 13px; }
  .lf-form .field-check{ font-size: 11.5px; }
  .lf-submit{ padding: 14px 20px; }

  /* faq: list first, the "ask us" card shrinks to a single row */
  .fq-wrap{ display: flex; flex-direction: column; gap: 16px; }
  .fq-intro{ display: contents; }
  .fq-intro > .eyebrow, .fq-title{ order: 0; }
  .fq-title{ margin-top: -6px; max-width: none; }
  .fq-lead{ display: none; }
  .fq-list{ order: 1; }
  .fq-ask{ order: 2; margin-top: 0; padding: 10px 10px 10px 16px; border-radius: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .fq-ask-text{ display: none; }
  .fq-ask-title{ font-size: 14px; white-space: nowrap; }
  .fq-ask-actions{ margin-top: 0; }
  .fq-ask-phone{ display: none; }
  .fq-ask-btn{ padding: 10px 16px; font-size: 14px; white-space: nowrap; }
  .fq-item summary{ grid-template-columns: 1fr 30px; gap: 12px; padding: 11px 0 11px 12px; }
  .fq-num{ display: none; }
  .fq-q{ font-size: 15px; }
  .fq-icon{ width: 30px; height: 30px; }
  .fq-a p{ padding: 0 8px 14px 12px; font-size: 14px; line-height: 1.5; }

  /* in-work panels become a vertical accordion */
  .wk-head{ grid-template-columns: 1fr; gap: 10px; }
  .wk-lead{ font-size: 14px; line-height: 1.5; }
  .wk-panels{ flex-direction: column; height: min(54svh, 470px); gap: 8px; }
  .wk-panel{ border-radius: 14px; }
  .wk-panel[data-active]{ flex-grow: 5; }
  .wk-hit{ flex-direction: row; align-items: center; justify-content: flex-start; gap: 14px; padding: 0 18px; text-align: left; }
  .wk-label{ writing-mode: horizontal-tb; transform: none; font-size: 15px; }
  .wk-panel:not([data-active]):hover .wk-label{ transform: translateX(4px); }
  .wk-body{ padding: 16px 18px 20px; }
  .wk-name{ font-size: clamp(21px, 6vw, 28px); }
  /* the short active panel puts the kicker over the bright top of the photo */
  .wk-kicker{ display: none; }
  .wk-name{ margin-top: 0; }
  .wk-desc{ font-size: 14px; }
  .wk-tags{ display: none; }

  /* applications: preview on top, compact index below */
  .ft{ padding-top: 96px; }
  .ft-top{ grid-template-columns: 1fr; gap: 36px; align-items: start; }
  .ft-contact{ justify-self: start; text-align: left; }
  .ft-contact-row{ justify-content: flex-start; flex-direction: column; }
  .ft-contact-meta{ align-items: flex-start; }
  .ft-phone{ font-size: clamp(22px, 7.4vw, 40px); white-space: nowrap; }
  .ft-logo img{ width: 150px; }
  .ft-grid{ grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .ft-col:last-child{ grid-column: 1 / -1; }
  .ft-links a{ font-size: 14.5px; }
  .ft-links a:hover{ transform: none; }
  .ft-links a::before{ display: none; }
  .ft-bottom{ gap: 10px 20px; }
  .ap-head{ grid-template-columns: 1fr; }
  .ap-lead{ display: none; }
  .ap-grid{ margin-top: 16px; grid-template-columns: 1fr; height: auto; gap: 14px; }
  .ap-view{ order: -1; height: min(38svh, 330px); border-radius: 16px; }
  .ap-row{ flex: none; grid-template-columns: 26px minmax(0, 1fr) 20px; gap: 10px; padding: 11px 2px; }
  .ap-num{ font-size: 11px; }
  .ap-name{ font-size: 16px; }
  .ap-row[data-active] .ap-name{ transform: translateX(4px); }
  .ap-arrow{ font-size: 16px; }
  .ap-count{ top: 12px; left: 12px; font-size: 11px; padding: 5px 10px; }
  .ap-caption{ padding: 14px 16px; }
  .ap-kicker{ display: none; }
  .ap-ops{ display: none; }
  .ap-desc{ margin-top: 0; font-size: 13.5px; line-height: 1.45; }
  .ap-cta{ margin-top: 10px; padding: 9px 16px; font-size: 13.5px; }


  /* product blocks stack: image on top, specs below */
  .rb-wrap{ grid-template-columns: 1fr; gap: 8px; }
  .rb-alt .rb-media{ order: 0; }
  .rb-media{ min-height: 0; }
  .rb-img{ max-width: 82vw; max-height: 30vh; }
  /* the stacked layout has no side column to hang over, so the 6-axis
     shot goes back to a plain height cap */
  #robots-6axis .rb-copy{ padding-left: 0; }
  #robots-6axis .rb-media{ display: flex; }
  /* margin, not transform: the reveal animation owns this element's transform */
  #robots-6axis .rb-img{
    width: 96vw; max-width: none; height: auto;
    margin-left: -11.7%; /* offset the canvas's empty left margin */
  }
  .rb-title{ font-size: clamp(34px, 12vw, 54px); }
  .rb-sub{ font-size: 14px; }
  .rb-desc{ font-size: 13.5px; line-height: 1.5; max-width: none; }
  .rb-specs{ margin-top: 14px; gap: 10px 16px; }
  .rb-spec dd{ font-size: 18px; }
  .rb-spec dt{ font-size: 10px; }
  .rb-link{ margin-top: 14px; font-size: 14px; }
  .rb-note{ margin-top: 10px; font-size: 11.5px; }

  .ps-steps{ margin-top: 24px; }
  .ps-result{ display: none; }
}
@media (max-width: 480px){
  .wrap{ padding: 0 18px; }
}

/* ---------- Side dots navigation ---------- */
.side-dots{
  --sd-ink: #fff;
  --sd-dim: rgba(255,255,255,.58);      /* .34 all but vanished on the dark footer (2026-10-16) */
  --sd-label-bg: #fff;
  --sd-label-fg: var(--ink);
  position: fixed; right: clamp(8px, 1.2vw, 22px); top: 50%; z-index: 90;
  transform: translateY(-50%);
}
.side-dots.is-on-light{
  --sd-ink: var(--ink);
  --sd-dim: rgba(10,10,12,.28);
}
.side-dots ol{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; }
.sd-link{
  position: relative;
  display: flex; align-items: center; justify-content: flex-end;
  width: 30px; height: 26px;
  color: inherit; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.sd-dot{
  display: block; width: 8px; height: 8px; margin-right: 11px;
  border-radius: 999px;
  background: var(--sd-dim);
  transition: height .45s var(--ease), background-color .3s, transform .3s var(--ease);
}
.sd-link:hover .sd-dot, .sd-link:focus-visible .sd-dot{ background: var(--sd-ink); transform: scale(1.35); }
.sd-link.is-active .sd-dot{ height: 22px; background: var(--accent); transform: none; }
.sd-link:focus-visible{ outline: none; }
.sd-link:focus-visible .sd-dot{ box-shadow: 0 0 0 3px rgba(250,90,32,.45); }

.sd-label{
  position: absolute; right: 34px; top: 50%;
  padding: 7px 12px; border-radius: 999px;
  background: var(--sd-label-bg); color: var(--sd-label-fg);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  font-family: var(--font-display); font-weight: 600; font-size: 13px; line-height: 1;
  white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translate(8px, -50%);
  transition: opacity .2s ease, transform .3s var(--ease);
}
.side-dots.is-on-light .sd-label{ background: var(--ink); color: #fff; }
.sd-link:hover .sd-label, .sd-link:focus-visible .sd-label{ opacity: 1; transform: translate(0, -50%); }

@media (max-width: 760px), (max-height: 520px){
  .side-dots{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .sd-dot, .sd-label{ transition: none; }
  .dd, .main-nav{ transition: none !important; }
  .ft-wrap .ft-brand, .ft-wrap .ft-contact, .ft-wrap .ft-col, .ft-wrap .ft-word{ opacity: 1 !important; animation: none !important; }
  .ft-l{ transform: none; }
  .ap-wrap .ap-head > *, .ap-wrap .ap-row, .ap-wrap .ap-view{ opacity: 1 !important; animation: none !important; }
  .ap-photo, .ap-panel::after, .ap-count, .ap-caption, .ap-caption > *{ transition: none !important; }
  .fq-wrap .fq-intro > *, .fq-wrap .fq-item{ opacity: 1 !important; animation: none !important; }
  .lf-wrap .lf-copy > *, .lf-wrap .lf-next li, .lf-wrap .lf-form{ opacity: 1 !important; animation: none !important; }
  .ps-step::after, .ps-node, .ps-body, .ps-wrap .ps-head > *{ transition: none !important; }
  .pf-word{ transition: none; }
  .pf-bg{ animation: none !important; transform: none; }
  .pf-line i{ transition: none; }
  .pf-kicker, .pf-sign, .pf-link{ opacity: 1; transform: none; transition: none; }
  .av-wrap .av-intro > *, .av-wrap .av-row, .av-wrap .av-tile{ opacity: 1 !important; animation: none !important; }
  .av-tile::after{ transform: none !important; animation: none !important; }
  .wk-wrap .wk-head > *, .wk-wrap .wk-panel{ opacity: 1; transform: none; }
  .wk-panel .wk-photo{ animation: none !important; }
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
  .rb-wrap .rb-img, .rb-wrap .rb-tag, .rb-wrap .rb-title,
  .rb-wrap .rb-sub, .rb-wrap .rb-desc, .rb-wrap .rb-spec, .rb-wrap .rb-link, .rb-wrap .rb-note{
    opacity: 1; transform: none; transition: none;
  }
}

/* ---- top menu items are links; the arrow next to them opens the dropdown ---- */
.nav-top{ position: relative; display: flex; align-items: center; border-radius: 999px; transition: background-color .2s; }
.nav-top .nav-main{ padding-right: 2px; background: transparent !important; }
.nav-caret{
  display: inline-grid; place-items: center; width: 24px; height: 38px; margin-right: 4px; padding: 0;
  border: 0; border-radius: 999px; background: transparent; color: var(--h-dim); cursor: pointer; transition: color .2s;
}
.nav-caret:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-item.has-dd:hover .nav-top, .nav-item.is-open .nav-top{ background: var(--h-hover); }
.nav-item.has-dd:hover .nav-main, .nav-item.is-open .nav-main, .nav-item.has-dd:hover .nav-caret, .nav-item.is-open .nav-caret{ color: var(--h-fg); }
.nav-item.is-section .nav-main{ color: var(--h-fg); }
.nav-item.is-section .nav-top::after{
  content: ""; position: absolute; left: 9px; right: 9px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--accent);
}
@media (max-width: 1180px){
  .nav-top{ width: 100%; border-radius: 0; }
  .nav-item.has-dd:hover .nav-top, .nav-item.is-open .nav-top{ background: transparent; }
  .nav-top .nav-main{ flex: 1; justify-content: flex-start; }
  .nav-caret{ flex: none; width: 52px; height: 52px; margin: 0 -6px 0 0; color: #fff; border-radius: 14px; background: rgba(255,255,255,.06); }
  .nav-item.is-section .nav-top::after{ display: none; }
  .nav-item.is-section .nav-main{ color: var(--accent-2); }
}

/* narrow phones (360px): the "no answer?" card wraps instead of widening the page */
@media (max-width: 400px){
  .fq-ask{ flex-wrap: wrap; }
  .fq-ask-title{ white-space: normal; }
}

/* ---- sending a request (js/lead.js) ---- */
.lead-trap{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lead-status{ font-size: 14px; line-height: 1.5; }
.lead-status a{ color: inherit; border-bottom: 1px solid currentColor; }
.lead-status.is-wait{ color: rgba(255,255,255,.7); }
.lead-status.is-error{ padding: 12px 14px; border-radius: 12px; background: rgba(255,107,94,.12); border: 1px solid rgba(255,107,94,.4); color: #ffd2cc; }
.oq-form .lead-status.is-wait{ color: var(--muted-2); }
.oq-form .lead-status.is-error{ color: #8f1d12; background: #fdecea; border-color: #f2b8b1; }
.lf-form.is-sending .lf-submit, .oq-form.is-sending .oq-submit{ opacity: .6; cursor: progress; }
.lf-form [aria-invalid="true"], .oq-form [aria-invalid="true"]{ border-color: #ff6b5e !important; }
.lead-done{
  position: relative; isolation: isolate; overflow: hidden; align-self: start;
  display: grid; gap: 10px; padding: clamp(24px, 3.6vh, 36px) clamp(22px, 2.6vw, 36px); border-radius: 22px;
  background: var(--ink); color: rgba(255,255,255,.78); font-size: 15.5px; line-height: 1.55;
  box-shadow: 0 30px 70px rgba(10,10,12,.2); outline: none;
}
.lead-done::before{
  content: ""; position: absolute; z-index: -1; top: -40%; right: -30%; width: 80%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(250,90,32,.28) 0%, rgba(250,90,32,0) 65%); pointer-events: none;
}
.lead-done-title{ font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: clamp(19px, 2.7vh, 24px); line-height: 1.2; color: #fff; }
.lead-done a{ color: var(--accent-2); border-bottom: 1px solid rgba(255,122,61,.4); }
.lf-form[hidden], .oq-form[hidden]{ display: none !important; }   /* the form gives its place to the «sent» panel */