/* ==========================================================================
   Ontruim Direct
   Handwritten CSS, no build step required.
   Upload as-is to any static host (Strato shared hosting included).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand — a fresh, light blue */
  --brand-900: #0a2540;
  --brand-800: #0f4c81;
  --brand-700: #1565a0;
  --brand-600: #1a7fb8;
  --brand-500: #2f9fd6;
  --brand-400: #6fc7ec;

  --ink-900: #0b1620;
  --ink-800: #16242f;
  --ink-700: #2a3d4d;
  --ink-500: #556b7d;
  --ink-400: #7d93a4;
  --ink-200: #d3dee6;
  --ink-100: #ecf2f7;
  --ink-050: #f6fafc;
  --white: #ffffff;

  /* Semantic */
  --bg: var(--white);
  --bg-alt: var(--ink-050);
  --text: var(--ink-800);
  --text-muted: var(--ink-500);
  --accent: var(--brand-700);
  --accent-strong: var(--brand-800);

  /* Type */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --step--1: clamp(0.86rem, 0.83rem + 0.15vw, 0.95rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2: clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem);
  --step-3: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-4: clamp(2.6rem, 1.7rem + 4vw, 5rem);

  /* Space & shape */
  --container: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 8rem);
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgb(11 22 32 / 0.06), 0 2px 8px rgb(11 22 32 / 0.05);
  --shadow: 0 10px 30px -12px rgb(11 22 32 / 0.25);
  --shadow-lg: 0 40px 80px -30px rgb(11 22 32 / 0.45);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 76px;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
  /* Decorative elements (hero glow, marquee track) stick out past the page
     edge. Clipping here as well as on body keeps the layout viewport at the
     screen width — otherwise a fixed element is laid out against the wider
     box and the mobile action bar ends up off-screen. `clip` rather than
     `hidden` so neither element turns into a scroll container — with
     `hidden` first for Safari below 16, which does not know `clip`. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--alt {
  background: var(--bg-alt);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.lead {
  font-size: var(--step-1);
  color: var(--text-muted);
  line-height: 1.55;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 999;
  background: var(--brand-800);
  color: #fff;
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-sm);
  transition: top 0.2s;
}

.skip-link:focus {
  top: 1rem;
}

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--brand-700);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.9rem;
  font-weight: 600;
  font-size: var(--step-0);
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 28px -14px rgb(21 101 160 / 0.9);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

/* Liquid fill on hover */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--brand-500), var(--brand-700));
  transform: translateY(101%);
  transition: transform 0.45s var(--ease-out);
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px -18px rgb(21 101 160 / 0.95);
}

.btn:hover::before {
  transform: translateY(0);
}

.btn:active {
  transform: translateY(-1px);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  box-shadow: none;
  border: 1.5px solid var(--ink-200);
}

.btn--ghost:hover {
  --btn-fg: #fff;
  border-color: transparent;
  box-shadow: 0 18px 36px -18px rgb(21 101 160 / 0.8);
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--brand-800);
  box-shadow: 0 16px 34px -18px rgb(0 0 0 / 0.5);
}

.btn--light:hover {
  --btn-fg: #fff;
}

.btn--lg {
  padding: 1.15rem 2.4rem;
  font-size: var(--step-1);
}

.btn .arrow {
  transition: transform 0.35s var(--ease-out);
}

.btn:hover .arrow {
  transform: translateX(5px);
}

/* --------------------------------------------------------------------------
   5. Topbar + header
   -------------------------------------------------------------------------- */
.topbar {
  background: var(--ink-050);
  border-bottom: 1px solid var(--ink-100);
  font-size: var(--step--1);
  color: var(--ink-700);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 4vw, 3.25rem);
  padding-block: 0.7rem;
}

.topbar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  white-space: nowrap;
  transition: color 0.25s;
}

a.topbar__item:hover {
  color: var(--accent);
}

.topbar__item svg {
  flex: none;
  color: var(--accent);
}

.stars {
  color: #f5a623;
  letter-spacing: 0.08em;
}

/* On a phone the topbar is reduced to the two things worth tapping. */
@media (max-width: 700px) {
  .topbar__inner {
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
  }

  .topbar__item--optional {
    display: none;
  }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgb(255 255 255 / 0.82);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.35s var(--ease-out),
    border-color 0.35s var(--ease-out), background 0.35s var(--ease-out);
}

.site-header.is-stuck {
  border-color: var(--ink-100);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(140deg, var(--brand-600), var(--brand-800));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 10px 20px -10px rgb(21 101 160 / 0.9);
}

/* Nav */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.1rem);
}

.nav__link {
  position: relative;
  padding: 0.5rem 0.1rem;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink-700);
  transition: color 0.25s;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.15rem;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--brand-800);
}

.nav__link:hover::after,
.nav__link[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header__cta {
  display: none;
}

@media (min-width: 1100px) {
  .header__cta {
    display: inline-flex;
    padding: 0.7rem 1.4rem;
  }
}

/* Burger */
/* The menu is driven by a checkbox rather than a script, so it works with
   JavaScript unavailable — which is how a downloaded file is previewed on a
   phone. The input sits just before .nav so the sibling selectors reach it. */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* Tapping anywhere outside the open menu closes it, again without a script.
   Only present while the menu is open, and only on the narrow layout. */
.nav-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgb(11 22 32 / 0.35);
}

@media (max-width: 959px) {
  .nav-toggle:checked ~ .nav-scrim {
    display: block;
  }

  /* The scrim has to stay below the header so the burger remains tappable,
     which leaves the fixed bars stacked above it. Drop them under the scrim
     while the menu is open, so a tap anywhere outside the menu closes it. */
  .nav-toggle:checked ~ .action-bar,
  .nav-toggle:checked ~ .floaties,
  .nav-toggle:checked ~ .demo-note {
    z-index: 60;
  }
}

/* Flex column, not grid: the bars must sit a known distance apart for the
   close-state rotation below to land them on top of each other. */
.burger {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  background: var(--ink-050);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--ink-800);
  border-radius: 2px;
  transition: transform 0.35s var(--ease-out), opacity 0.2s;
}

.nav-toggle:checked ~ .site-header .burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle:checked ~ .site-header .burger span:nth-child(2) {
  opacity: 0;
}

.nav-toggle:checked ~ .site-header .burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Keyboard users still need to see where they are. */
.nav-toggle:focus-visible ~ .site-header .burger {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
}

@media (min-width: 960px) {
  .burger {
    display: none;
  }
}

@media (max-width: 959px) {
  .nav {
    position: fixed;
    inset: calc(var(--header-h)) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1rem var(--gutter) 2rem;
    background: #fff;
    border-bottom: 1px solid var(--ink-100);
    box-shadow: var(--shadow);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, transform 0.35s var(--ease-out),
      visibility 0.3s;
  }

  .nav-toggle:checked ~ .site-header .nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }


  .nav__link {
    padding: 0.85rem 0;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--ink-100);
  }

  .nav__link::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 7rem) clamp(4rem, 10vw, 9rem);
  overflow: hidden;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      100deg,
      rgb(8 26 44 / 0.92) 0%,
      rgb(8 26 44 / 0.72) 42%,
      rgb(8 26 44 / 0.35) 70%,
      rgb(8 26 44 / 0.55) 100%
    ),
    radial-gradient(
      120% 80% at 0% 100%,
      rgb(21 101 160 / 0.5),
      transparent 60%
    );
}

/* Animated accent blob */
.hero__glow {
  position: absolute;
  z-index: -1;
  width: 46vw;
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  background: radial-gradient(circle, var(--brand-500), transparent 65%);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}

.hero__glow--a {
  left: -10vw;
  bottom: -18vw;
}

.hero__glow--b {
  right: -8vw;
  top: -14vw;
  animation-duration: 24s;
  animation-direction: alternate-reverse;
  opacity: 0.32;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(6vw, -4vw, 0) scale(1.18);
  }
}

.hero__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  }
}

.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.55rem;
  margin-bottom: 1.4rem;
  font-size: var(--step--1);
  font-weight: 500;
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px;
  backdrop-filter: blur(6px);
}

.hero h1 {
  font-size: var(--step-4);
  margin-bottom: 1rem;
}

/* The accent line is not split into words: `overflow: hidden` on a child of
   a background-clip:text element stops the gradient from painting, so the
   whole line gets one clipping wrapper and the gradient sits on the inner
   span instead. */
.hero h1 .accent {
  display: block;
  overflow: hidden;
  padding-bottom: 0.08em;
}

.hero h1 .accent__inner {
  display: inline-block;
  background: linear-gradient(100deg, var(--brand-400), #bfe9ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transform: translateY(110%);
  transition: transform 0.9s var(--ease-out);
  transition-delay: 280ms;
}

.is-revealed .hero h1 .accent__inner,
h1.is-revealed .accent__inner {
  transform: translateY(0);
}

.hero__text {
  max-width: 46ch;
  font-size: var(--step-1);
  color: rgb(255 255 255 / 0.82);
  margin-bottom: 2rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.hero__actions .btn--ghost {
  --btn-fg: #fff;
  border-color: rgb(255 255 255 / 0.35);
}

/* Trust row under the hero copy */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 2.25rem;
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.8);
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
}

.hero__trust svg {
  color: var(--brand-400);
  flex: none;
}

/* --------------------------------------------------------------------------
   7. Quote card (glass form)
   -------------------------------------------------------------------------- */
.quote-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--radius-lg);
  background: rgb(22 36 47 / 0.72);
  border: 1px solid rgb(255 255 255 / 0.12);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow: var(--shadow-lg);
}

.quote-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--brand-400);
  margin-bottom: 0.35rem;
}

.quote-card__badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-400);
  box-shadow: 0 0 0 0 rgb(111 199 236 / 0.7);
  animation: pulse 2.2s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 10px rgb(111 199 236 / 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgb(111 199 236 / 0);
  }
}

.quote-card h2 {
  font-size: var(--step-2);
  color: #fff;
  margin-bottom: 1.5rem;
}

.form-grid {
  display: grid;
  gap: 1.35rem 1.1rem;
}

@media (min-width: 520px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .field--full {
    grid-column: 1 / -1;
  }
}

/* Floating-label field */
.field {
  position: relative;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 1.4rem 0 0.55rem;
  color: #fff;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid rgb(255 255 255 / 0.28);
  border-radius: 0;
  transition: border-color 0.3s;
}

.field textarea {
  min-height: 108px;
  resize: vertical;
}

.field select {
  appearance: none;
  cursor: pointer;
}

.field select option {
  color: var(--ink-800);
}

.field label {
  position: absolute;
  left: 0;
  top: 1.25rem;
  font-size: var(--step-0);
  color: rgb(255 255 255 / 0.65);
  pointer-events: none;
  transform-origin: left top;
  transition: transform 0.28s var(--ease-out), color 0.28s;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--brand-400);
}

.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select[data-filled="true"] + label {
  transform: translateY(-1.15rem) scale(0.78);
  color: var(--brand-400);
}

.field__chevron {
  position: absolute;
  right: 0;
  top: 1.5rem;
  color: rgb(255 255 255 / 0.5);
  pointer-events: none;
}

.form-note {
  margin-top: 1.25rem;
  font-size: 0.82rem;
  color: rgb(255 255 255 / 0.55);
}

.form-status {
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  display: none;
}

.form-status.is-visible {
  display: block;
}

.form-status--ok {
  background: rgb(52 168 83 / 0.16);
  color: #b6f2cc;
  border: 1px solid rgb(52 168 83 / 0.4);
}

.form-status--err {
  background: rgb(255 107 107 / 0.14);
  color: #ffc9c9;
  border: 1px solid rgb(255 107 107 / 0.4);
}

/* Honeypot */
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   8. Marquee (logo / usp strip)
   -------------------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  background: var(--brand-900);
  color: rgb(255 255 255 / 0.85);
  padding-block: 1rem;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 8%,
    #000 92%,
    transparent
  );
}

.marquee__track {
  display: flex;
  width: max-content;
  gap: 3.5rem;
  animation: scroll-x 32s linear infinite;
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.marquee__item svg {
  color: var(--brand-400);
}

@keyframes scroll-x {
  to {
    transform: translateX(-50%);
  }
}

/* --------------------------------------------------------------------------
   9. Intro / about split
   -------------------------------------------------------------------------- */
.split {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--wide-left {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.section__title {
  font-size: var(--step-3);
  margin: 0.8rem 0 1.2rem;
}

.ghost-word {
  position: absolute;
  left: 50%;
  top: 2rem;
  transform: translateX(-50%);
  font-size: clamp(4rem, 14vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--ink-100);
  opacity: 0.75;
  z-index: -1;
  pointer-events: none;
  white-space: nowrap;
  user-select: none;
}

.check-list {
  display: grid;
  gap: 0.85rem;
  margin: 1.75rem 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-weight: 500;
}

.check-list svg {
  flex: none;
  margin-top: 0.25rem;
  color: var(--brand-600);
}

/* Image with frame accent */
.figure {
  position: relative;
}

.figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.figure::after {
  content: "";
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  border: 2px solid var(--brand-500);
  border-radius: var(--radius-lg);
  z-index: -1;
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   10. Stats
   -------------------------------------------------------------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
}

@media (min-width: 780px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat__value {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(160deg, var(--brand-600), var(--brand-800));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}

.stat__label {
  margin-top: 0.6rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   11. Services
   -------------------------------------------------------------------------- */
.services {
  position: relative;
  isolation: isolate;
  color: #fff;
  overflow: hidden;
}

.services__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.services__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.services__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(11 22 32 / 0.9),
    rgb(11 22 32 / 0.82)
  );
}

.services__grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.8rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .services__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1060px) {
  .services__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .services__intro {
    grid-column: span 1;
  }
}

.services__intro h2 {
  font-size: var(--step-3);
  margin-bottom: 1rem;
}

.services__intro p {
  color: rgb(255 255 255 / 0.72);
  margin-bottom: 1.75rem;
}

/* Card with tilt + reveal */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink-800);
  transform-style: preserve-3d;
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
  will-change: transform;
}

.card:hover {
  box-shadow: var(--shadow-lg);
}

.card__img {
  position: absolute;
  inset: 0;
}

.card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out), filter 0.5s;
}

.card:hover .card__img img {
  transform: scale(1.08);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgb(11 22 32 / 0.15) 0%,
    rgb(11 22 32 / 0.55) 55%,
    rgb(11 22 32 / 0.92) 100%
  );
  transition: opacity 0.4s;
}

.card__body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: 1.5rem;
}

.card__title {
  font-size: var(--step-1);
  margin-bottom: 0.4rem;
}

.card__desc {
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.75);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out), opacity 0.35s,
    margin-top 0.5s var(--ease-out);
}

.card:hover .card__desc,
.card:focus-within .card__desc {
  max-height: 7rem;
  opacity: 1;
  margin-top: 0.35rem;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--brand-400);
}

.card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------------------
   12. Steps
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  counter-reset: step;
}

@media (min-width: 640px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

.step {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out),
    border-color 0.4s;
}

.step:hover {
  transform: translateY(-6px);
  border-color: transparent;
  box-shadow: var(--shadow);
}

.step__num {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  border-radius: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(150deg, var(--brand-600), var(--brand-800));
  box-shadow: 0 12px 24px -12px rgb(21 101 160 / 0.9);
}

.step__num::before {
  content: counter(step);
}

.step h3 {
  font-size: var(--step-1);
  margin-bottom: 0.45rem;
}

.step p {
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Connecting line on desktop */
@media (min-width: 640px) {
  .step::before {
    content: "";
    position: absolute;
    top: 3rem;
    right: -1.2rem;
    width: 1.2rem;
    height: 2px;
    background: repeating-linear-gradient(
      90deg,
      var(--ink-200) 0 4px,
      transparent 4px 8px
    );
  }
  .step:nth-child(2n)::before,
  .step:last-child::before {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   13. Reviews
   -------------------------------------------------------------------------- */
.reviews {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 860px) {
  .reviews {
    grid-template-columns: repeat(3, 1fr);
  }
}

.review {
  padding: 1.9rem 1.6rem 1.6rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.review:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.review__stars {
  color: #f5a623;
  letter-spacing: 0.12em;
  margin-bottom: 0.85rem;
}

.review p {
  font-size: 0.98rem;
  color: var(--ink-700);
}

.review__author {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ink-100);
}

.review__avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--brand-800);
  background: var(--ink-100);
}

.review__name {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.3;
}

.review__meta {
  font-size: 0.82rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 0.75rem;
  max-width: 820px;
}

.faq__item {
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}

.faq__item[open] {
  border-color: var(--brand-500);
  box-shadow: var(--shadow-sm);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.4rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q .icon {
  flex: none;
  color: var(--accent);
  transition: transform 0.35s var(--ease-out);
}

.faq__item[open] .faq__q .icon {
  transform: rotate(45deg);
}

.faq__a {
  padding: 0 1.4rem 1.35rem;
  font-size: 0.98rem;
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   15. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(120deg, var(--brand-800), var(--brand-900));
}

.cta-band::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 60vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-600), transparent 65%);
  filter: blur(70px);
  opacity: 0.55;
  z-index: -1;
  animation: drift 20s ease-in-out infinite alternate;
}

.cta-band__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
  text-align: center;
  justify-items: center;
}

@media (min-width: 900px) {
  .cta-band__inner {
    grid-template-columns: 1.4fr auto;
    text-align: left;
    justify-items: start;
  }
}

.cta-band h2 {
  font-size: var(--step-3);
  margin-bottom: 0.6rem;
}

.cta-band p {
  color: rgb(255 255 255 / 0.8);
  max-width: 55ch;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink-800);
  color: rgb(255 255 255 / 0.72);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  font-size: 0.95rem;
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 760px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr;
  }
}

.site-footer h3 {
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 1.1rem;
}

.footer__list {
  display: grid;
  gap: 0.65rem;
  padding: 0;
  list-style: none;
}

.footer__list a {
  transition: color 0.25s, transform 0.25s var(--ease-out);
  display: inline-block;
}

.footer__list a:hover {
  color: var(--brand-400);
  transform: translateX(4px);
}

.footer__contact {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.4rem;
}

.footer__contact a:hover {
  color: var(--brand-400);
}

.footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  font-size: 0.85rem;
  color: rgb(255 255 255 / 0.55);
}

/* --------------------------------------------------------------------------
   17. Floating actions (WhatsApp + back to top)
   -------------------------------------------------------------------------- */
.floaties {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  gap: 0.7rem;
  justify-items: end;
}

.fab {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  border: 0;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s;
}

.fab:hover {
  transform: translateY(-4px) scale(1.05);
}

.fab--wa {
  background: #25d366;
}

.fab--top {
  width: 46px;
  height: 46px;
  background: var(--ink-800);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
}

.fab--top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.fab--wa::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgb(37 211 102 / 0.6);
  animation: pulse 2.6s infinite;
  pointer-events: none;
}

.fab-wrap {
  position: relative;
}

/* --------------------------------------------------------------------------
   17b. Mobile action bar
   --------------------------------------------------------------------------
   On a phone the two things a visitor actually wants are always one thumb
   away, pinned to the bottom of the screen.
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 92;
  display: none;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom));
  background: rgb(255 255 255 / 0.92);
  border-top: 1px solid var(--ink-100);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 -8px 24px -18px rgb(11 22 32 / 0.6);
}

.action-bar .btn {
  padding: 0.85rem 1rem;
  font-size: 0.95rem;
  white-space: nowrap;
}

.action-bar__main {
  flex: 1;
  min-width: 0;
}

.action-bar__icon {
  flex: none;
  width: 52px;
  padding: 0.85rem 0;
}

.action-bar__icon--wa {
  color: #128c40;
  border-color: rgb(18 140 64 / 0.35);
}

@media (max-width: 780px) {
  .action-bar {
    display: flex;
  }

  /* Keep the page clear of the bar, and retire the floating buttons — the
     bar already carries calling and WhatsApp. */
  body {
    padding-bottom: 5rem;
  }

  .floaties {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   17c. Phone refinements
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .hero {
    padding-block: 2.5rem 3.5rem;
  }

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .hero__actions .btn {
    width: 100%;
    padding-inline: 1.25rem;
    font-size: 1rem;
  }

  .hero__trust {
    gap: 0.45rem 1rem;
    margin-top: 1.75rem;
  }

  .cta-band__actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .cta-band__actions .btn {
    width: 100%;
  }

  /* The oversized watermark word costs more than it adds on a narrow screen. */
  .ghost-word {
    display: none;
  }

  .service-row {
    padding-block: 2.25rem;
  }

  .timeline__item {
    padding-left: 1.75rem;
  }
}

/* --------------------------------------------------------------------------
   18. Scroll progress bar
   -------------------------------------------------------------------------- */
.progress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 100;
  height: 3px;
  width: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--brand-500), var(--brand-400));
}

/* --------------------------------------------------------------------------
   19. Subpage hero
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  background: linear-gradient(115deg, var(--brand-900), var(--ink-800));
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: auto -5% -60% auto;
  width: 55vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-600), transparent 65%);
  filter: blur(80px);
  opacity: 0.45;
  z-index: -1;
  animation: drift 22s ease-in-out infinite alternate;
}

.page-hero h1 {
  font-size: var(--step-3);
  margin: 0.6rem 0 1rem;
  max-width: 18ch;
}

.page-hero p {
  max-width: 58ch;
  color: rgb(255 255 255 / 0.78);
  font-size: var(--step-1);
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: var(--step--1);
  color: rgb(255 255 255 / 0.6);
}

.breadcrumbs a:hover {
  color: var(--brand-400);
}

.breadcrumbs span[aria-current] {
  color: #fff;
}

/* --------------------------------------------------------------------------
   20. Service detail rows
   -------------------------------------------------------------------------- */
.service-row {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--ink-100);
}

.service-row:last-child {
  border-bottom: 0;
}

@media (min-width: 880px) {
  .service-row {
    grid-template-columns: 1fr 1fr;
  }
  .service-row:nth-child(even) .service-row__media {
    order: -1;
  }
}

.service-row h2 {
  font-size: var(--step-2);
  margin: 0.7rem 0 0.9rem;
}

.service-row__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.pill {
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--brand-800);
  background: rgb(47 159 214 / 0.1);
  border: 1px solid rgb(47 159 214 / 0.22);
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   21. Values / team
   -------------------------------------------------------------------------- */
.value-grid {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 700px) {
  .value-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.value {
  padding: 1.75rem 1.5rem;
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

.value:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}

.value__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 1.1rem;
  border-radius: 16px;
  color: var(--brand-700);
  background: rgb(47 159 214 / 0.12);
}

.value h3 {
  font-size: var(--step-1);
  margin-bottom: 0.45rem;
}

.value p {
  font-size: var(--step--1);
  color: var(--text-muted);
}

/* Timeline */
.timeline {
  display: grid;
  gap: 0;
  max-width: 720px;
  margin-top: 2.5rem;
}

.timeline__item {
  position: relative;
  padding: 0 0 2.25rem 2.5rem;
  border-left: 2px solid var(--ink-100);
}

.timeline__item:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}

.timeline__item::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 0.35rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--brand-600);
  border: 3px solid #fff;
  box-shadow: 0 0 0 3px rgb(47 159 214 / 0.2);
}

.timeline__year {
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.timeline__item h3 {
  font-size: var(--step-1);
  margin: 0.25rem 0 0.4rem;
}

.timeline__item p {
  color: var(--text-muted);
  font-size: 0.98rem;
}

/* --------------------------------------------------------------------------
   22. Contact page
   -------------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 940px) {
  .contact-grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.contact-card {
  padding: clamp(1.6rem, 3vw, 2.25rem);
  background: #fff;
  border: 1px solid var(--ink-100);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.contact-list {
  display: grid;
  gap: 1.4rem;
  margin-top: 1.75rem;
  padding: 0;
  list-style: none;
}

.contact-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.contact-list__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--brand-700);
  background: rgb(47 159 214 / 0.12);
}

.contact-list__label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.contact-list__value {
  font-weight: 600;
  font-size: 1.05rem;
}

.contact-list a.contact-list__value:hover {
  color: var(--accent);
}

/* The quote card is dark by default; on the contact page it sits on white. */
.quote-card--light {
  background: var(--ink-800);
  border-color: rgb(255 255 255 / 0.08);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.map-embed {
  margin-top: 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ink-100);
  box-shadow: var(--shadow-sm);
}

.map-embed img,
.map-embed iframe {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  border: 0;
}

/* --------------------------------------------------------------------------
   23. Scroll reveal
   --------------------------------------------------------------------------
   One transition, several entrances. Set the direction with the attribute
   value; `--reveal-delay` (or data-stagger on a parent) handles sequencing.

     <div data-reveal>            fades up      (default)
     <div data-reveal="left">     slides in from the left
     <div data-reveal="right">    slides in from the right
     <div data-reveal="scale">    settles in from slightly small
     <div data-reveal="wipe">     uncovers itself, for imagery
   -------------------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(var(--reveal-x, 0), var(--reveal-y, 28px), 0)
    scale(var(--reveal-scale, 1));
  transition: opacity 0.75s var(--ease-out), transform 0.85s var(--ease-out),
    clip-path 0.9s var(--ease-out), filter 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="left"] {
  --reveal-x: -44px;
  --reveal-y: 0;
}

[data-reveal="right"] {
  --reveal-x: 44px;
  --reveal-y: 0;
}

[data-reveal="scale"] {
  --reveal-y: 18px;
  --reveal-scale: 0.94;
}

[data-reveal="wipe"] {
  --reveal-y: 0;
  --reveal-scale: 1.06;
  clip-path: inset(0 0 100% 0);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  filter: none;
}

/* Once the entrance has played, stop reserving a compositor layer and drop
   the clip — a lingering clip-path would cut off anything an element draws
   outside its own box, such as the offset frame on .figure. */
[data-reveal].is-settled {
  will-change: auto;
  clip-path: none;
}

/* --------------------------------------------------------------------------
   24. Line reveal for headings
   --------------------------------------------------------------------------
   JS wraps each word in .line > .line__inner. The outer span clips, the
   inner one slides up from behind it, so the text appears to rise off the
   baseline rather than simply fade.
   -------------------------------------------------------------------------- */
.line {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
}

.line__inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.85s var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
}

.is-revealed .line__inner,
.line.is-revealed .line__inner {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   25. Parallax
   --------------------------------------------------------------------------
   JS writes --parallax; the element keeps whatever transform it already had
   by composing on top of this translate.
   -------------------------------------------------------------------------- */
[data-parallax] {
  transform: translate3d(0, var(--parallax, 0px), 0);
  will-change: transform;
}

/* --------------------------------------------------------------------------
   26. Magnetic buttons
   -------------------------------------------------------------------------- */
.btn[data-magnetic] {
  transition: transform 0.25s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

.btn[data-magnetic].is-pulled {
  transform: translate3d(var(--mx, 0), calc(var(--my, 0px) - 3px), 0);
}

/* --------------------------------------------------------------------------
   27. Entrances without JavaScript
   --------------------------------------------------------------------------
   <html> ships with class="no-js"; a one-line script in the head swaps it
   for "js". So this block applies exactly when scripts are unavailable —
   which is how a downloaded file is previewed on a phone.

   Where the browser supports scroll-driven animations the entrance is tied
   to the element scrolling into view, same as the scripted version. Where it
   does not, `animation-timeline` is ignored and the same keyframes simply
   play on load, staggered by the delays already on the markup.
   -------------------------------------------------------------------------- */
@keyframes rv-up {
  from { opacity: 0; transform: translate3d(0, 28px, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes rv-left {
  from { opacity: 0; transform: translate3d(-44px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes rv-right {
  from { opacity: 0; transform: translate3d(44px, 0, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes rv-scale {
  from { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes rv-wipe {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: scale(1.06); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}

@keyframes rv-line {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}

.no-js [data-reveal] {
  opacity: 1;
  transform: none;
  clip-path: none;
  animation: rv-up 0.8s var(--ease-out) both;
  animation-delay: var(--reveal-delay, 0ms);
  animation-timeline: view();
  animation-range: entry 0% entry 55%;
}

.no-js [data-reveal="left"]  { animation-name: rv-left; }
.no-js [data-reveal="right"] { animation-name: rv-right; }
.no-js [data-reveal="scale"] { animation-name: rv-scale; }
.no-js [data-reveal="wipe"]  { animation-name: rv-wipe; }

/* The gradient headline has no script to lift it, so it lifts itself. */
.no-js .accent__inner {
  animation: rv-line 0.9s var(--ease-out) 0.28s both;
}

/* --------------------------------------------------------------------------
   27. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .line__inner {
    transform: none;
  }

  [data-parallax] {
    --parallax: 0px !important;
  }

  .no-js [data-reveal],
  .no-js .accent__inner {
    animation: none !important;
    opacity: 1;
    transform: none;
    clip-path: none;
  }
}