/* ==========================================================================
   Adren Digital — main stylesheet
   Mobile-first. Breakpoints: 600px, 900px, 1200px.

   Contents
   01. Design tokens
   02. Reset and base
   03. Typography
   04. Layout helpers
   05. Buttons, links and icons
   06. Header and navigation
   07. Home hero
   08. Cards (problem, service, feature)
   09. Featured work (case study)
   10. Process steps
   11. Why Adren (dark section)
   12. FAQ accordion
   13. Final CTA band
   14. Footer
   15. Service page hero and illustrations
   16. Contact page and form
   17. Simple pages (thank-you, 404) and prose (privacy)
   18. Scroll-reveal animation
   19. Reduced motion
   ========================================================================== */

/* 01. Design tokens
   ========================================================================== */
:root {
  /* Brand colours (from SPEC.md — do not add colours outside this block) */
  --color-primary: #3B2BE8;
  --color-primary-hover: #2E20C4;
  --color-primary-light: #8B80FF;
  --color-ink: #14112E;
  --color-text-muted: #55526B;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F6F5F1;
  --color-bg-tint: #EFEDFF;
  --color-border: #E4E2EC;

  /* Supporting tokens derived from the brand colours */
  --color-white: #FFFFFF;
  --color-border-strong: #8A87A0;                    /* form field outlines (3:1 on white) */
  --color-error: #B42318;                            /* form validation messages */
  --color-success: #15803D;                          /* "growth" state of the hero Customers chart */
  --color-success-tint: #DCFCE7;
  --color-on-dark-muted: rgb(255 255 255 / 0.76);    /* secondary text on ink */
  --color-on-dark-border: rgb(255 255 255 / 0.14);
  --color-on-dark-surface: rgb(255 255 255 / 0.07);

  /* Shadows are tinted with the ink colour */
  --shadow-sm: 0 1px 2px rgb(20 17 46 / 0.06), 0 2px 10px rgb(20 17 46 / 0.05);
  --shadow-md: 0 10px 30px rgb(20 17 46 / 0.09);
  --shadow-lg: 0 24px 60px rgb(20 17 46 / 0.16);

  /* Type */
  --font-heading: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shape and layout */
  --radius-card: 20px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --container: 1200px;
  --gutter: 20px;
  --header-h: 68px;
  --section-space: clamp(64px, 9vw, 120px);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);        /* smooth settle */
  --ease-pop: cubic-bezier(0.3, 1.5, 0.5, 1);        /* small overshoot for "pop" effects */
}

/* 02. Reset and base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

body.nav-open {
  overflow: hidden; /* stop the page scrolling behind the mobile menu */
}

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

img {
  height: auto;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

p {
  margin: 0;
}

a {
  color: var(--color-primary);
}

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

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

/* Lighter focus ring on dark backgrounds so it stays visible */
.section--dark :focus-visible,
.cta-band__inner :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-primary-light);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 200;
  padding: 12px 18px;
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: var(--radius-md);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* 03. Typography
   ========================================================================== */
h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

h2 {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  letter-spacing: -0.03em;
}

h3 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--color-text-muted);
}

.muted {
  color: var(--color-text-muted);
}

/* 04. Layout helpers
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-space);
  overflow-x: clip; /* sideways reveal animations must never cause horizontal scrolling */
}

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

.section--dark {
  background: var(--color-ink);
  color: var(--color-white);
}

.section--dark h2,
.section--dark h3 {
  color: var(--color-white);
}

.section--dark p {
  color: var(--color-on-dark-muted);
}

.section__head {
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 56px);
  text-align: center;
}

.section__head .lead {
  margin-top: 16px;
}

.card-grid {
  display: grid;
  gap: 20px;
}

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

@media (min-width: 900px) {
  .card-grid {
    gap: 24px;
  }

  .card-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 05. Buttons, links and icons
   ========================================================================== */
.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 14px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.btn .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

/* The upward arrow nudges up on hover — the brand's "growth" detail */
.btn:hover .icon,
.btn:focus-visible .icon {
  transform: translateY(-2px);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover {
  background: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: transparent;
  border-color: var(--color-ink);
  color: var(--color-ink);
}

.btn--secondary:hover {
  background: var(--color-ink);
  color: var(--color-white);
}

/* Secondary button for dark backgrounds */
.btn--on-dark {
  background: transparent;
  border-color: var(--color-on-dark-muted);
  color: var(--color-white);
}

.btn--on-dark:hover {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-ink);
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.7;
  cursor: progress;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Arrow link ("Learn more") */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.text-link .icon {
  width: 18px;
  height: 18px;
  transition: transform 0.2s ease;
}

.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.text-link:hover .icon {
  transform: translateX(3px);
}

/* Small pill label above headings */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--color-bg-tint);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
}

.eyebrow .icon {
  width: 14px;
  height: 14px;
  stroke-width: 2.5;
}

/* Round tinted icon holder used on cards */
.icon-badge {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: none;
  background: var(--color-bg-tint);
  color: var(--color-primary);
  border-radius: 50%;
}

.icon-badge .icon {
  width: 24px;
  height: 24px;
}

.section--dark .icon-badge {
  background: var(--color-on-dark-surface);
  color: var(--color-primary-light);
}

/* 06. Header and navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  transition: box-shadow 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

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

.site-header__logo {
  display: inline-flex;
  align-items: center;
  margin-left: -8px; /* the logo file has built-in padding; this lines the mark up with the content edge */
  border-radius: 8px;
}

.site-header__logo img {
  width: auto;
  height: 50px;
}

.nav-toggle {
  display: none; /* shown only when JavaScript is available (see below) */
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-right: -10px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 12px;
  color: var(--color-ink);
  cursor: pointer;
}

.nav-toggle .icon {
  width: 26px;
  height: 26px;
}

.nav-toggle__close,
.nav-toggle[aria-expanded="true"] .nav-toggle__open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__close {
  display: block;
}

.site-nav {
  width: 100%;
  padding-bottom: 20px;
}

.site-nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  padding: 10px 0;
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
}

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

.site-nav__link .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

/* Mobile: the Services group is a plain labelled list (no nested dropdown) */
.site-nav__menu-toggle {
  display: none;
}

.site-nav__label {
  display: block;
  margin-top: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-nav__submenu {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}

.site-nav__cta {
  width: 100%;
  margin-top: 16px;
}

/* Mobile menu behaviour (needs JS; without JS the links simply sit under the logo) */
@media (max-width: 899.98px) {
  html:not(.js) .site-header {
    position: static;
  }

  .js .nav-toggle {
    display: inline-flex;
  }

  .js .site-nav {
    position: fixed;
    top: var(--header-h);
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: auto;
    padding: 8px var(--gutter) 28px;
    overflow-y: auto;
    background: var(--color-bg);
    border-top: 1px solid var(--color-border);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .js .site-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
  }

  .js .site-nav__cta {
    margin-top: auto;
  }
}

/* Desktop navigation */
@media (min-width: 900px) {
  :root {
    --header-h: 80px;
  }

  .site-header__logo img {
    height: 56px;
  }

  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    padding-bottom: 0;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: 2px;
  }

  .site-nav__link {
    width: auto;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.9688rem;
  }

  .site-nav__item--menu {
    position: relative;
  }

  .site-nav__menu-toggle {
    display: flex;
  }

  .site-nav__label {
    display: none;
  }

  .site-nav__submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: -8px;
    min-width: 280px;
    margin: 0;
    padding: 8px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
  }

  /* Invisible bridge so the menu does not close while the mouse crosses the gap */
  .site-nav__submenu::before {
    content: "";
    position: absolute;
    top: -12px;
    right: 0;
    left: 0;
    height: 12px;
  }

  .site-nav__submenu .site-nav__link {
    width: 100%;
    border-radius: 10px;
  }

  .site-nav__submenu .site-nav__link:hover {
    background: var(--color-bg-tint);
  }

  .site-nav__item--menu.is-open > .site-nav__submenu,
  html:not(.js) .site-nav__item--menu:focus-within > .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
  }

  .site-nav__item--menu.is-open .site-nav__menu-toggle .icon {
    transform: rotate(180deg);
  }

  .site-nav__cta {
    width: auto;
    min-height: 48px;
    margin-top: 0;
    padding: 12px 22px;
  }
}

@media (min-width: 900px) and (hover: hover) {
  .site-nav__item--menu:hover > .site-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
  }
}

/* 07. Home hero
   ========================================================================== */
.hero {
  padding-block: clamp(36px, 6vw, 80px) clamp(56px, 8vw, 104px);
  overflow-x: clip;
}

.hero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

.hero__title {
  margin-top: 20px;
}

.hero__sub {
  max-width: 34em;
  margin-top: 20px;
}

.hero .btn-row {
  margin-top: 32px;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 24px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.hero__trust .icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  stroke-width: 2.5;
}

@media (max-width: 599.98px) {
  .hero .btn {
    width: 100%;
  }
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 40px;
  }
}

/* Hero illustration: phone mockup with two floating cards (pure CSS + SVG) */
.hero__visual {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-inline: auto;
  padding: 16px 0 24px;
}

/* Soft tinted disc behind the phone */
.hero__visual::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92%;
  aspect-ratio: 1;
  background: var(--color-bg-tint);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.phone {
  position: relative;
  width: 62%;
  max-width: 248px;
  margin-inline: auto;
  padding: 8px;
  background: var(--color-ink);
  border-radius: 36px;
  box-shadow: var(--shadow-lg);
}

.phone__screen {
  position: relative;
  aspect-ratio: 9 / 18;
  overflow: hidden;
  background: var(--color-bg);
  border-radius: 28px;
}

/* Speaker notch */
.phone__screen::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  z-index: 1;
  width: 34%;
  height: 12px;
  background: var(--color-ink);
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
}

/* The simple local-business website shown on the phone */
.mock-site {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 30px 12px 12px;
  font-size: 0.6875rem;
  line-height: 1.3;
}

.mock-site__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mock-site__logo {
  width: 42%;
  height: 8px;
  background: var(--color-ink);
  border-radius: var(--radius-pill);
}

.mock-site__menu {
  width: 16px;
  height: 8px;
  border-top: 2px solid var(--color-ink);
  border-bottom: 2px solid var(--color-ink);
}

.mock-site__hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 12px;
  background: var(--color-bg-tint);
  border-radius: 14px;
}

.mock-site__title {
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-ink);
}

.mock-site__btn {
  padding: 6px 12px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.mock-site__tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mock-site__tiles span {
  aspect-ratio: 4 / 3;
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.mock-site__lines {
  display: grid;
  gap: 6px;
}

.mock-site__lines span {
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
}

.mock-site__lines span:last-child {
  width: 60%;
}

.float-card {
  position: absolute;
  z-index: 2;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}

.float-card--chart {
  top: 47%;
  left: 0;
  width: 132px;
}

.float-card--customers {
  top: 7%;
  right: 0;
  width: 132px;
  transition: border-color 0.4s ease, scale 0.5s var(--ease-pop);
}

.float-card--chart > svg,
.float-card--customers > svg {
  width: 100%;
  height: auto;
  margin-top: 6px;
}

/* Customers chart: jumps up and turns green while a "Get a free quote" button is
   hovered or focused (main.js adds .is-boosted to the hero visual). */
.float-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  transition: color 0.4s ease;
}

.float-card__trend {
  width: 16px;
  height: 16px;
  opacity: 0;
  translate: 0 4px;
  stroke-width: 2.5;
  transition: opacity 0.4s ease, translate 0.4s ease;
}

.float-card--customers .float-card__line,
.float-card--customers .float-card__area {
  transition: opacity 0.4s ease;
}

.float-card--customers .float-card__line--boost {
  stroke: var(--color-success);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transition: stroke-dashoffset 0.9s var(--ease-out), opacity 0.2s ease;
}

.float-card--customers .float-card__area--boost {
  fill: var(--color-success-tint);
  opacity: 0;
}

.is-boosted .float-card--customers {
  border-color: var(--color-success);
  scale: 1.06;
}

.is-boosted .float-card__head {
  color: var(--color-success);
}

.is-boosted .float-card__trend {
  opacity: 1;
  translate: none;
}

.is-boosted .float-card--customers .float-card__line,
.is-boosted .float-card--customers .float-card__area {
  opacity: 0.22;
}

.is-boosted .float-card--customers .float-card__line--boost {
  stroke-dashoffset: 0;
  opacity: 1;
}

.is-boosted .float-card--customers .float-card__area--boost {
  opacity: 1;
  transition-delay: 0.25s;
}

.float-card__line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.float-card__area {
  fill: var(--color-bg-tint);
}

.float-card--maps {
  right: 0;
  bottom: 9%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.float-card--maps .icon-badge {
  width: 36px;
  height: 36px;
}

.float-card--maps .icon-badge .icon {
  width: 18px;
  height: 18px;
}

.float-card__sub {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* The float uses the separate `translate` property so it can run together with the
   pop-in (scale) and the boost (scale) without the animations overwriting each other. */
@keyframes float {
  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -10px;
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

/* Page-load entrance: content rises into place instead of simply being there */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}

@keyframes disc-in {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .hero__content > *,
  .page-hero__grid > :first-child > *,
  .page-intro > *,
  .simple-page .container > * {
    animation: rise 0.7s var(--ease-out) backwards;
  }

  .hero__content > :nth-child(2),
  .page-hero__grid > :first-child > :nth-child(2),
  .page-intro > :nth-child(2),
  .simple-page .container > :nth-child(2) {
    animation-delay: 0.08s;
  }

  .hero__content > :nth-child(3),
  .page-hero__grid > :first-child > :nth-child(3),
  .simple-page .container > :nth-child(3) {
    animation-delay: 0.16s;
  }

  .hero__content > :nth-child(4),
  .page-hero__grid > :first-child > :nth-child(4),
  .simple-page .container > :nth-child(4) {
    animation-delay: 0.24s;
  }

  .hero__content > :nth-child(5) {
    animation-delay: 0.32s;
  }

  .phone,
  .page-hero__art {
    animation: rise 0.9s var(--ease-out) 0.15s backwards;
  }

  .hero__visual::before {
    animation: disc-in 1s var(--ease-out) backwards;
  }

  .float-card {
    animation: pop-in 0.5s var(--ease-pop) backwards, float 6s ease-in-out infinite;
  }

  .float-card--customers {
    animation-delay: 0.55s, -1.5s;
  }

  .float-card--chart {
    animation-delay: 0.7s, 0s;
  }

  .float-card--maps {
    animation-delay: 0.85s, -3s;
  }
}

@media (min-width: 600px) {
  .hero__visual {
    max-width: 440px;
  }

  .float-card--chart,
  .float-card--customers {
    width: 152px;
  }
}

/* 08. Cards (problem, service, feature)
   ========================================================================== */
.card {
  padding: 28px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.card h3 {
  margin-top: 20px;
}

.card p {
  margin-top: 10px;
  color: var(--color-text-muted);
}

/* Service cards on the home page — the whole card is clickable */
.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  isolation: isolate; /* keeps the stage and spotlight layers behind the text */
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.service-card:hover,
.service-card:focus-within {
  border-color: var(--color-primary-light);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* Soft spotlight that follows the mouse (main.js sets --mx / --my) */
.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--color-bg-tint), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.service-card:hover::before {
  opacity: 1;
}

/* Round "stage" in the top-right corner. It peeks in at rest, then slides into the
   card and plays a small animated scene on hover, keyboard focus, or (on touch
   screens) when the card scrolls into view — main.js adds .is-playing. */
.service-card__stage {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: clamp(128px, 36%, 168px); /* small enough to stay clear of the card text */
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg-tint);
  border-radius: 50%;
  opacity: 0.75;
  translate: 28% -28%;
  transition: translate 0.55s var(--ease-out), opacity 0.4s ease;
}

.service-card:is(:hover, :focus-within, .is-playing) .service-card__stage {
  opacity: 1;
  translate: 13% -13%;
}

.scene {
  width: 100%;
  height: 100%;
}

/* Scene parts animate from their own centre / edge */
.scene [class*="a-"] {
  transform-box: fill-box;
  transform-origin: center;
}

.scene .a-grow {
  transform-origin: left center;
}

.scene .a-draw {
  stroke-dasharray: 1;
}

.scene .a-ring,
.scene .a-heart {
  opacity: 0;
}

@keyframes scene-pop {
  from {
    opacity: 0;
    transform: scale(0.2);
  }
}

@keyframes scene-grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes scene-rise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

@keyframes scene-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes scene-drop {
  0% {
    opacity: 0;
    transform: translateY(-46px);
  }

  55% {
    opacity: 1;
    transform: translateY(0);
  }

  72% {
    transform: translateY(-9px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes scene-ring {
  0% {
    opacity: 0.9;
    transform: scale(0.4);
  }

  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@keyframes scene-heart {
  0% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-46px) scale(1.15);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .service-card:is(:hover, :focus-within, .is-playing) .a-pop {
    animation: scene-pop 0.5s var(--ease-pop) both;
  }

  .service-card:is(:hover, :focus-within, .is-playing) .a-grow {
    animation: scene-grow 0.6s var(--ease-out) both;
  }

  .service-card:is(:hover, :focus-within, .is-playing) .a-rise {
    animation: scene-rise 0.5s var(--ease-out) both;
  }

  .service-card:is(:hover, :focus-within, .is-playing) .a-draw {
    animation: scene-draw 0.7s ease-out both;
  }

  .service-card:is(:hover, :focus-within, .is-playing) .a-drop {
    animation: scene-drop 0.8s ease-out both;
  }

  .service-card:is(:hover, :focus-within, .is-playing) .a-ring {
    animation: scene-ring 1.6s ease-out infinite;
  }

  .service-card:is(:hover, :focus-within, .is-playing) .a-heart {
    animation: scene-heart 1.8s ease-out infinite;
  }

  /* Delays that sequence the parts of a scene. Same specificity as the rules above
     and placed after them, so they win without !important. */
  .service-card .scene .d1 { animation-delay: 0.12s; }
  .service-card .scene .d2 { animation-delay: 0.24s; }
  .service-card .scene .d3 { animation-delay: 0.36s; }
  .service-card .scene .d4 { animation-delay: 0.48s; }
  .service-card .scene .d5 { animation-delay: 0.6s; }
  .service-card .scene .d6 { animation-delay: 0.72s; }
  .service-card .scene .d7 { animation-delay: 0.9s; }
}

.service-card h3 {
  margin-top: 20px;
  font-size: 1.5rem;
}

.service-card > p {
  margin-top: 10px;
  color: var(--color-text-muted);
}

.check-list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

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

.check-list .icon {
  width: 18px;
  height: 18px;
  margin-top: 4px;
  color: var(--color-primary);
  stroke-width: 2.5;
}

.service-card .text-link {
  margin-top: auto;
  padding-top: 24px;
}

/* Stretch the link over the whole card */
.service-card .text-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-card);
}

@media (min-width: 900px) {
  .card,
  .service-card {
    padding: 36px 32px;
  }
}

/* 09. Featured work (case study)
   ========================================================================== */
.case {
  display: grid;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.case + .case {
  margin-top: 24px;
}

.case__media {
  display: grid;
  align-content: center;
  padding: 36px 9% 40px;
  background: var(--color-bg-tint);
}

/* Extra screenshots under the laptop */
.case__shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 34px;
}

.case__shots img {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
}

.device-laptop {
  position: relative;
  padding: 9px 9px 11px;
  background: var(--color-ink);
  border-radius: 14px 14px 0 0;
}

/* Laptop base */
.device-laptop::after {
  content: "";
  position: absolute;
  right: -7%;
  bottom: -10px;
  left: -7%;
  height: 10px;
  background: var(--color-ink);
  border-radius: 0 0 14px 14px;
}

.device-laptop__screen {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg);
  border-radius: 6px;
}

.device-laptop__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* Clearly marked placeholder for content that has not been supplied yet */
.placeholder {
  display: grid;
  place-items: center;
  padding: 10px;
  border: 2px dashed var(--color-primary-light);
  border-radius: 10px;
  background: var(--color-bg-tint);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--color-primary);
  overflow-wrap: anywhere;
}

.device-laptop__screen .placeholder {
  width: 88%;
  height: 80%;
}

.case__body {
  padding: 32px 24px;
}

.case__body h3 {
  margin-top: 16px;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.case__body > p {
  margin-top: 14px;
  color: var(--color-text-muted);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  padding: 6px 12px;
  background: var(--color-bg-tint);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Result figures (only real numbers, supplied with the client's permission) */
.results {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.result {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px 20px;
  background: var(--color-bg-tint);
  border-radius: var(--radius-md);
}

.result__value {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--color-primary);
}

.result__label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink);
}

.case__body .btn {
  margin-top: 28px;
}

@media (min-width: 900px) {
  .case {
    grid-template-columns: 1.05fr 1fr;
  }

  .case__body {
    align-self: center;
    padding: 48px;
  }

  /* Second project: picture on the right so the two cards alternate */
  .case--reverse {
    grid-template-columns: 1fr 1.05fr;
  }

  .case--reverse .case__media {
    order: 2;
  }
}

/* 10. Process steps
   ========================================================================== */
.steps {
  display: grid;
  gap: 32px;
}

.step {
  position: relative;
  padding-left: 68px;
}

.step__num {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
}

/* Connecting line: vertical on mobile */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 48px;
  bottom: -32px;
  left: 23px;
  width: 2px;
  background: var(--color-border);
}

.step h3 {
  padding-top: 10px;
}

.step p {
  margin-top: 8px;
  color: var(--color-text-muted);
}

@media (min-width: 900px) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }

  .step {
    padding-top: 72px;
    padding-left: 0;
  }

  /* Connecting line: horizontal on desktop */
  .step:not(:last-child)::before {
    top: 23px;
    right: -32px;
    bottom: auto;
    left: 48px;
    width: auto;
    height: 2px;
  }

  .step h3 {
    padding-top: 0;
  }
}

/* 11. Why Adren (dark section)
   ========================================================================== */
.why-grid {
  display: grid;
  gap: 16px;
}

.why-item {
  display: flex;
  gap: 18px;
  padding: 28px 24px;
  background: var(--color-on-dark-surface);
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-card);
}

.why-item p {
  margin-top: 8px;
}

@media (min-width: 600px) {
  .why-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (min-width: 900px) {
  .why-item {
    padding: 36px 32px;
  }
}

/* 12. FAQ accordion (<details>/<summary>)
   ========================================================================== */
.faq {
  display: grid;
  gap: 12px;
  max-width: 820px;
  margin-inline: auto;
}

.faq__item {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

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

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 20px;
  border-radius: 16px;
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

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

.faq__q .icon {
  width: 22px;
  height: 22px;
  color: var(--color-primary);
  transition: transform 0.2s ease;
}

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

.faq__a {
  padding: 0 20px 20px;
  color: var(--color-text-muted);
}

@media (min-width: 900px) {
  .faq__q {
    padding: 20px 28px;
  }

  .faq__a {
    padding: 0 28px 24px;
  }
}

/* 13. Final CTA band
   ========================================================================== */
.cta-band {
  padding-block: 0 var(--section-space);
}

.cta-band__inner {
  position: relative;
  overflow: hidden;
  padding: clamp(44px, 8vw, 96px) clamp(24px, 6vw, 80px);
  background: var(--color-ink);
  color: var(--color-white);
  border-radius: 28px;
  text-align: center;
}

/* Large faint upward arrow, echoing the logo mark */
.cta-band__inner::before {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -110px;
  width: 300px;
  height: 300px;
  border-top: 44px solid var(--color-on-dark-surface);
  border-left: 44px solid var(--color-on-dark-surface);
  border-radius: 28px 0 0 0;
  transform: rotate(45deg);
  pointer-events: none;
}

.cta-band__inner > * {
  position: relative;
}

.cta-band h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.04em;
  color: var(--color-white);
}

.cta-band p {
  max-width: 36em;
  margin: 18px auto 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: var(--color-on-dark-muted);
}

.cta-band .btn-row {
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 599.98px) {
  .cta-band .btn {
    width: 100%;
  }

  /* Smaller arrow on phones so it stays a background detail */
  .cta-band__inner::before {
    right: -50px;
    bottom: -90px;
    width: 200px;
    height: 200px;
    border-width: 30px;
  }
}

/* 14. Footer
   ========================================================================== */
.site-footer {
  padding-block: 64px 28px;
  background: var(--color-ink);
  color: var(--color-on-dark-muted);
}

.site-footer__grid {
  display: grid;
  gap: 40px;
}

.site-footer__logo {
  display: inline-block;
  margin-left: -8px;
  border-radius: 8px;
}

.site-footer__logo img {
  width: auto;
  height: 56px;
}

.site-footer__brand p {
  max-width: 26em;
  margin-top: 12px;
}

.site-footer__heading {
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-white);
}

.site-footer a {
  color: var(--color-on-dark-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding-block: 6px;
}

.site-footer__social {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: var(--color-on-dark-surface);
  border: 1px solid var(--color-on-dark-border);
  border-radius: 50%;
  color: var(--color-white);
}

.site-footer__social a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.site-footer__bottom {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-on-dark-border);
  font-size: 0.875rem;
}

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

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
    gap: 48px;
  }

  .site-footer__brand {
    grid-column: auto;
  }
}

/* 15. Service page hero and illustrations
   ========================================================================== */
.page-hero {
  padding-block: clamp(28px, 5vw, 56px) clamp(56px, 8vw, 96px);
}

.page-hero__grid {
  display: grid;
  gap: 40px;
  align-items: center;
}

.page-hero h1 {
  margin-top: 20px;
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
}

.page-hero .lead {
  max-width: 34em;
  margin-top: 20px;
}

.page-hero .btn {
  margin-top: 32px;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--color-border-strong);
}

.breadcrumb a {
  display: inline-block;
  padding-block: 6px;
  color: var(--color-text-muted);
  text-underline-offset: 3px;
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb [aria-current="page"] {
  font-weight: 600;
  color: var(--color-ink);
}

.page-hero__art {
  max-width: 520px;
  margin-inline: auto;
  padding: clamp(20px, 5vw, 44px);
  background: var(--color-bg-tint);
  border-radius: 28px;
}

/* Inline SVG illustrations take their colours from the brand tokens */
.illustration {
  width: 100%;
  height: auto;
}

/* The same colour classes are used by the small animated scenes on the home page
   service cards (.scene). */
:is(.illustration, .scene) .f-primary { fill: var(--color-primary); }
:is(.illustration, .scene) .f-light { fill: var(--color-primary-light); }
:is(.illustration, .scene) .f-ink { fill: var(--color-ink); }
:is(.illustration, .scene) .f-white { fill: var(--color-bg); }
:is(.illustration, .scene) .f-soft { fill: var(--color-bg-soft); }
:is(.illustration, .scene) .f-tint { fill: var(--color-bg-tint); }
:is(.illustration, .scene) .f-border { fill: var(--color-border); }

:is(.illustration, .scene) .s-primary,
:is(.illustration, .scene) .s-white,
:is(.illustration, .scene) .s-border {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(.illustration, .scene) .s-primary { stroke: var(--color-primary); }
:is(.illustration, .scene) .s-white { stroke: var(--color-bg); }
:is(.illustration, .scene) .s-border { stroke: var(--color-border); stroke-width: 2; }
.illustration .s-thick { stroke-width: 11; }                  /* the bold logo-style arrow */
:is(.illustration, .scene) .s-road { fill: none; stroke: var(--color-border); stroke-width: 12; }
.scene .s-road { stroke-width: 7; }
.scene .s-thin { stroke-width: 3; }

@media (min-width: 900px) {
  .page-hero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 56px;
  }

  .page-hero__art {
    width: 100%;
  }
}

/* "Who it's for" block */
.split {
  display: grid;
  gap: 32px;
  align-items: center;
}

.split p {
  margin-top: 16px;
  color: var(--color-text-muted);
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.chip .icon {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  stroke-width: 2.5;
}

@media (min-width: 900px) {
  .split {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}

/* 16. Contact page and form
   ========================================================================== */
.page-intro {
  max-width: 720px;
  margin-bottom: clamp(32px, 5vw, 48px);
}

.page-intro h1 {
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
}

.page-intro .lead {
  margin-top: 16px;
}

.form__note {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
}

.field__hint {
  font-size: 0.9063rem;
}
.contact-grid {
  display: grid;
  gap: 32px;
  align-items: start;
}

.form {
  display: grid;
  gap: 20px;
  padding: 28px 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.form__row {
  display: grid;
  gap: 20px;
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  padding: 0;
  font-weight: 600;
}

.field__optional {
  font-weight: 400;
  color: var(--color-text-muted);
}

.field__input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

textarea.field__input {
  min-height: 140px;
  resize: vertical;
}

.field__input::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.field__input:hover {
  border-color: var(--color-ink);
}

.field__input:focus-visible {
  border-color: var(--color-primary);
  outline-offset: 1px;
  border-radius: var(--radius-md);
}

.field__input[aria-invalid="true"] {
  border-color: var(--color-error);
}

.field__error {
  font-size: 0.9063rem;
  font-weight: 500;
  color: var(--color-error);
}

.checkbox-list {
  display: grid;
  gap: 4px;
  margin-top: 4px;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding-block: 10px;
  cursor: pointer;
}

.checkbox input {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 1px 0 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.checkbox a {
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Honeypot field for spam bots — hidden from people and assistive tech */
.form__honeypot {
  display: none;
}

.form__status {
  padding: 14px 16px;
  background: var(--color-bg-tint);
  border-radius: var(--radius-md);
  font-weight: 500;
}

.form__status--error {
  background: var(--color-bg);
  border: 1.5px solid var(--color-error);
  color: var(--color-error);
}

.form__status a {
  color: inherit;
}

.form .btn {
  justify-self: start;
}

.contact-card {
  padding: 28px 24px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-card);
}

.contact-card h2 {
  font-size: 1.375rem;
  letter-spacing: -0.02em;
}

.contact-card h2:not(:first-child) {
  margin-top: 32px;
}

.contact-list {
  display: grid;
  gap: 4px;
  margin-top: 12px;
}

.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-list a:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-list .icon {
  color: var(--color-primary);
}

.next-steps {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  counter-reset: next;
}

.next-steps li {
  position: relative;
  min-height: 32px;
  padding-left: 46px;
  color: var(--color-text-muted);
  counter-increment: next;
}

.next-steps li::before {
  content: counter(next);
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: 0.9375rem;
  font-weight: 700;
}

.next-steps strong {
  display: block;
  color: var(--color-ink);
}

@media (max-width: 599.98px) {
  .form .btn {
    width: 100%;
  }
}

@media (min-width: 600px) {
  .form {
    padding: 36px 32px;
  }

  .form__row {
    grid-template-columns: 1fr 1fr;
  }

  .checkbox-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 40px;
  }

  .contact-card {
    position: sticky;
    top: calc(var(--header-h) + 24px);
    padding: 36px 32px;
  }
}

/* 17. Simple pages (thank-you, 404) and prose (privacy)
   ========================================================================== */
.simple-page {
  display: grid;
  place-items: center;
  min-height: 64vh;
  padding-block: var(--section-space);
  text-align: center;
}

.simple-page__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 28px;
}

.simple-page .icon-badge {
  width: 72px;
  height: 72px;
  margin: 0 auto 28px;
}

.simple-page .icon-badge .icon {
  width: 32px;
  height: 32px;
}

.simple-page h1 {
  font-size: clamp(2.25rem, 5.2vw, 3.75rem);
}

.simple-page .lead {
  max-width: 32em;
  margin: 20px auto 0;
}

.simple-page .btn-row {
  justify-content: center;
  margin-top: 32px;
}

.prose {
  max-width: 760px;
  margin-inline: auto;
}

.prose h1 {
  font-size: clamp(2.25rem, 5.2vw, 3.5rem);
}

.prose h2 {
  margin-top: 48px;
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  letter-spacing: -0.02em;
}

.prose p,
.prose ul {
  margin-top: 16px;
  color: var(--color-text-muted);
}

.prose ul {
  padding-left: 22px;
  list-style: disc;
}

.prose li + li {
  margin-top: 8px;
}

.prose a {
  font-weight: 600;
  text-underline-offset: 3px;
}

.prose strong {
  color: var(--color-ink);
}

/* 18. Scroll-reveal animation
   Elements start hidden only when JS is running (the .js class is set by main.js),
   so the content is always visible if the script fails to load.
   ========================================================================== */
.js .reveal {
  opacity: 0;
  transform: var(--reveal-from, translateY(36px)); /* each element type sets its own start position below */
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger for items that sit side by side */
.js .reveal:nth-child(2) { transition-delay: 0.1s; }
.js .reveal:nth-child(3) { transition-delay: 0.2s; }
.js .reveal:nth-child(4) { transition-delay: 0.3s; }
.js .reveal:nth-child(5) { transition-delay: 0.1s; }
.js .reveal:nth-child(6) { transition-delay: 0.2s; }

/* --- Start positions ------------------------------------------------------ */

/* Cards grow slightly as they rise */
:is(.card, .service-card, .case, .cta-band__inner).reveal {
  --reveal-from: translateY(40px) scale(0.95);
}

/* Items in two columns come in from their own side */
.why-item.reveal:nth-child(odd),
.split > .reveal:first-child {
  --reveal-from: translateX(-28px);
}

.why-item.reveal:nth-child(even),
.split > .reveal:last-child {
  --reveal-from: translateX(28px);
}

.faq__item.reveal {
  --reveal-from: translateY(20px);
}

/* --- Section headings: the title rises out of a mask ---------------------- */
.js .section__head.reveal {
  opacity: 1;
  transform: none;
}

.js .section__head.reveal h2 {
  clip-path: inset(0 0 100% 0);
  transform: translateY(40%);
  transition: clip-path 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.js .section__head.reveal.is-visible h2 {
  clip-path: inset(-0.3em 0);
  transform: none;
}

/* --- Service cards: bullets follow the card in, then hover takes over ----- */
.js .service-card.reveal .check-list li {
  opacity: 0;
  translate: -14px 0;
  transition: opacity 0.4s ease, translate 0.4s var(--ease-out);
}

.js .service-card.reveal.is-visible .check-list li {
  opacity: 1;
  translate: none;
}

.js .service-card.reveal .check-list li:nth-child(1) { transition-delay: 0.4s; }
.js .service-card.reveal .check-list li:nth-child(2) { transition-delay: 0.5s; }
.js .service-card.reveal .check-list li:nth-child(3) { transition-delay: 0.6s; }

/* main.js adds .is-settled once the reveal has finished, so the hover lift is
   quick and not held back by the stagger delay. */
.js .service-card.reveal.is-settled {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  transition-delay: 0s;
}

.js .service-card.reveal.is-visible:hover,
.js .service-card.reveal.is-visible:focus-within {
  transform: translateY(-4px);
}

/* --- Process steps: number pops, then the line draws to the next step ----- */
.js .step.reveal .step__num {
  opacity: 0;
  scale: 0.3;
  transition: opacity 0.3s ease 0.15s, scale 0.5s var(--ease-pop) 0.15s;
}

.js .step.reveal.is-visible .step__num {
  opacity: 1;
  scale: 1;
}

.js .step.reveal::before {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s ease 0.4s;
}

.js .step.reveal.is-visible::before {
  transform: none;
}

@media (min-width: 900px) {
  .js .step.reveal::before {
    transform: scaleX(0);
    transform-origin: left;
  }
}

/* --- Industry chips pop in one after another ------------------------------ */
.js .chip-list.reveal .chip {
  opacity: 0;
  scale: 0.8;
  transition: opacity 0.35s ease, scale 0.45s var(--ease-pop);
}

.js .chip-list.reveal.is-visible .chip {
  opacity: 1;
  scale: 1;
}

.js .chip-list.reveal .chip:nth-child(1) { transition-delay: 0.15s; }
.js .chip-list.reveal .chip:nth-child(2) { transition-delay: 0.22s; }
.js .chip-list.reveal .chip:nth-child(3) { transition-delay: 0.29s; }
.js .chip-list.reveal .chip:nth-child(4) { transition-delay: 0.36s; }
.js .chip-list.reveal .chip:nth-child(5) { transition-delay: 0.43s; }
.js .chip-list.reveal .chip:nth-child(6) { transition-delay: 0.5s; }

/* --- Case study: screenshots follow the card in --------------------------- */
.js .case.reveal :is(.device-laptop, .case__shots li) {
  opacity: 0;
  translate: 0 28px;
  transition: opacity 0.6s ease 0.25s, translate 0.7s var(--ease-out) 0.25s;
}

.js .case.reveal .case__shots li:nth-child(1) { transition-delay: 0.4s; }
.js .case.reveal .case__shots li:nth-child(2) { transition-delay: 0.5s; }

.js .case.reveal.is-visible :is(.device-laptop, .case__shots li) {
  opacity: 1;
  translate: none;
}

/* --- CTA band: the big arrow slides up behind the text -------------------- */
.js .cta-band__inner.reveal::before {
  opacity: 0;
  translate: 0 90px;
  transition: opacity 0.6s ease 0.25s, translate 1s var(--ease-out) 0.25s;
}

.js .cta-band__inner.reveal.is-visible::before {
  opacity: 1;
  translate: none;
}

/* --- Reading progress line under the header (element is created by main.js) */
.scroll-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--color-primary);
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  pointer-events: none;
}

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

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}