/* =================================================================
   ANZATO — styles.css
   Premium-but-lean modern studio. Deep ink + vivid teal accent.
   Mobile-first. No framework. Per design brief §3.
   ================================================================= */

/* ---------- Design tokens ---------- */
:root {
  /* Color — restrained palette: ink, off-white paper, two greys, one accent */
  --ink:        #0e0f13;   /* near-black */
  --ink-2:      #16181f;   /* raised surface on dark */
  --ink-3:      #1f222b;   /* hairline-lifted surface on dark */
  --paper:      #f6f5f1;   /* soft off-white background */
  --paper-2:    #fefefe;   /* cards on light */
  --grey:       #5c626d;   /* body grey on light */
  --grey-2:     #969ca8;   /* muted */
  --line:       #e7e4dc;   /* hairlines on light */
  --line-2:     #dcd8cf;   /* slightly stronger hairline */
  --line-dark:  #282c36;   /* hairlines on dark */
  --accent:     #16c79a;   /* vivid teal accent */
  --accent-2:   #0e9e79;   /* accent hover / on light text */
  --accent-soft:#e4f7f1;   /* accent tint */
  --accent-ink: #042019;   /* text on accent */

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

  /* Modular scale (1.25) */
  --fs-xs:   0.78rem;
  --fs-sm:   0.9rem;
  --fs-base: 1.0625rem;
  --fs-lg:   1.2rem;
  --fs-xl:   1.55rem;
  --fs-2xl:  2.1rem;
  --fs-3xl:  2.95rem;
  --fs-4xl:  4.2rem;
  --fs-5xl:  5.2rem;

  /* Spacing rhythm */
  --space-section: clamp(3.75rem, 7.5vw, 6.5rem);

  /* Layout */
  --maxw: 1180px;
  --gutter: 1.4rem;
  --radius: 18px;
  --radius-sm: 11px;
  --radius-lg: 26px;
  --shadow: 0 30px 60px -34px rgba(14, 15, 19, 0.45);
  --shadow-sm: 0 10px 30px -18px rgba(14, 15, 19, 0.35);
  --shadow-accent: 0 18px 40px -18px rgba(22, 199, 154, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Selection & scrollbar ---------- */
::selection { background: var(--accent); color: var(--accent-ink); }
html { scrollbar-color: var(--grey-2) var(--paper); }
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--paper); }
::-webkit-scrollbar-thumb:hover { background: var(--grey-2); }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 300;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

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

.accent-text { color: var(--accent-2); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 200;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
  padding: 0.72rem 1.2rem;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
              color 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
/* light sheen sweep across accent buttons */
.btn--accent::after {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 42%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s var(--ease);
  pointer-events: none;
}
.btn--accent:hover::after { left: 135%; }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.btn--accent {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-accent);
}
.btn--accent:hover { background: var(--accent-2); box-shadow: 0 22px 48px -18px rgba(22, 199, 154, 0.7); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(14,15,19,0.03); }

.btn--lg { padding: 1rem 1.7rem; font-size: var(--fs-base); }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(246, 245, 241, 0.72);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
  background: rgba(246, 245, 241, 0.9);
  box-shadow: 0 8px 30px -22px rgba(14, 15, 19, 0.35);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.nav__brand { display: inline-flex; align-items: center; gap: 0.55rem; }
.nav__mark {
  display: inline-flex;
  align-items: center;
}
.nav__mark img { display: block; height: 30px; width: auto; }
.footer__brand .nav__mark img { height: 28px; }
.nav__word, .footer__word {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.32rem;
  letter-spacing: -0.04em;
}

.nav__menu { display: flex; align-items: center; gap: 1.8rem; }
.nav__menu a:not(.btn) {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--grey);
  position: relative;
  transition: color 0.15s var(--ease);
}
.nav__menu a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -5px;
  width: 0; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.22s var(--ease);
}
.nav__menu a:not(.btn):hover { color: var(--ink); }
.nav__menu a:not(.btn):hover::after { width: 100%; }
.nav__menu a:not(.btn).is-active { color: var(--ink); }
.nav__menu a:not(.btn).is-active::after { width: 100%; }
.nav__cta { color: var(--accent-ink) !important; }

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 18px; height: 2px;
  margin-inline: auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 11vw, 9rem) 0 clamp(3.5rem, 8vw, 6.5rem);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(55% 50% at 88% -5%, rgba(22, 199, 154, 0.18), transparent 62%),
    radial-gradient(45% 45% at -5% 25%, rgba(14, 15, 19, 0.05), transparent 60%);
  pointer-events: none;
}
/* slow-drifting aurora glow */
.hero__bg::before {
  content: "";
  position: absolute;
  width: 620px; height: 620px;
  top: -240px; right: -160px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 199, 154, 0.2), transparent 70%);
  filter: blur(46px);
  animation: aurora 16s ease-in-out infinite alternate;
}
.hero__bg::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  bottom: -200px; left: -120px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(22, 199, 154, 0.1), transparent 70%);
  filter: blur(40px);
  animation: aurora 20s ease-in-out infinite alternate-reverse;
}
@keyframes aurora {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-70px, 50px, 0) scale(1.18); }
}
/* subtle dot grid accent */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(14, 15, 19, 0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 60% at 80% 10%, #000 0%, transparent 70%);
  mask-image: radial-gradient(70% 60% at 80% 10%, #000 0%, transparent 70%);
  pointer-events: none;
}
/* floating geometric shapes */
.hero__shapes { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.shape { position: absolute; display: block; opacity: 0.85; }
.shape--ring {
  width: 130px; height: 130px; right: 7%; top: 16%;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0.5;
  animation: float 9s var(--ease) infinite alternate;
}
.shape--dot {
  width: 16px; height: 16px; right: 22%; top: 44%;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(22,199,154,0.14);
  animation: float 7s var(--ease) infinite alternate-reverse;
}
/* The floating dot and bar collided with hero copy at several widths
   (over the subhead at 390px, beside the headline at 900px). The ring
   alone carries the decorative job without ever landing on text. */
.shape--dot, .shape--bar { display: none; }
.shape--bar {
  width: 64px; height: 8px; right: 4%; top: 60%;
  background: var(--ink);
  border-radius: 999px;
  opacity: 0.12;
  transform: rotate(-18deg);
}
@keyframes float {
  from { transform: translateY(0); }
  to   { transform: translateY(-22px); }
}

.hero__inner { position: relative; z-index: 1; }
.hero__copy { max-width: 660px; }
.hero__visual { display: none; }

/* ---------- Hero audit card (illustrative preview of the offer) ---------- */
.auditcard {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transform: rotate(-1.1deg);
  transition: transform 0.5s var(--ease);
}
.auditcard:hover { transform: rotate(0deg) translateY(-4px); }
.auditcard__bar {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.auditcard__dots { display: flex; gap: 5px; }
.auditcard__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); }
.auditcard__url {
  font-family: var(--font-body); font-size: var(--fs-xs); color: var(--grey-2);
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.18rem 0.7rem; flex: 1 1 auto; text-align: center;
}
.auditcard__tag {
  font-family: var(--font-head); font-weight: 600; font-size: 0.62rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-2);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 0.16rem 0.5rem;
}
.auditcard__body { padding: 1.2rem 1.25rem 1.1rem; }
.auditcard__head, .auditcard__afterhead {
  display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.85rem;
}
.auditcard__label {
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink);
}
.auditcard__device { font-size: var(--fs-xs); color: var(--grey-2); }
.auditcard__rings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.miniscore {
  --v: 0; --c: var(--accent);
  display: grid; place-items: center; gap: 0.15rem;
  padding: 0.85rem 0.3rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--paper);
}
.miniscore span {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); color: var(--ink);
  background:
    radial-gradient(closest-side, var(--paper) 78%, transparent 79%),
    conic-gradient(var(--c) calc(var(--v) * 1%), var(--line-2) 0);
}
.miniscore small { font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey-2); }
.auditcard__issues { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.45rem; }
.auditcard__issues li {
  position: relative; padding-left: 1.5rem;
  font-size: var(--fs-sm); color: var(--grey);
}
.auditcard__issues li::before {
  content: "";
  position: absolute; left: 0; top: 0.42em;
  width: 8px; height: 8px; border-radius: 2px;
  background: #d9534f; opacity: 0.75;
}
.auditcard__after { margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.auditcard__delta {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  color: var(--accent-2);
  background: var(--accent-soft); border-radius: 999px; padding: 0.1rem 0.55rem;
}
.auditcard__bars { display: grid; gap: 0.45rem; }
.barline { display: block; height: 9px; border-radius: 999px; background: var(--line); overflow: hidden; }
.barline i {
  display: block; height: 100%; width: var(--w, 40%);
  border-radius: 999px; background: var(--line-2);
}
.barline--good i { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.auditcard__foot { margin-top: 0.7rem; font-size: 0.68rem; color: var(--grey-2); }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.6rem;
}
.hero__eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(22,199,154,0.18);
}
.hero__title {
  font-size: clamp(2.6rem, 7vw, var(--fs-5xl));
  letter-spacing: -0.035em;
  margin-bottom: 1.5rem;
}
.hero__sub {
  font-size: clamp(var(--fs-base), 2.3vw, var(--fs-lg));
  color: var(--grey);
  max-width: 58ch;
  margin-bottom: 2.2rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 1.2rem; }
.hero__note { font-size: var(--fs-sm); color: var(--grey-2); display: flex; align-items: center; gap: 0.5rem; }

/* Hero entrance choreography */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.hero-enter { animation: riseIn 0.85s var(--ease) both; }
.hero__eyebrow.hero-enter { animation-delay: 0.05s; }
.hero__title.hero-enter   { animation-delay: 0.14s; }
.hero__sub.hero-enter     { animation-delay: 0.26s; }
.hero__cta.hero-enter     { animation-delay: 0.38s; }
.hero__note.hero-enter    { animation-delay: 0.48s; }
.hero__stats.hero-enter   { animation-delay: 0.58s; }

/* Word-by-word title reveal (JS adds .is-split and wraps words) */
.hero__title.is-split { animation: none; opacity: 1; filter: none; transform: none; }
.hero__title .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero__title .w__inner {
  display: inline-block;
  animation: wordUp 0.75s var(--ease) both;
  animation-delay: calc(0.1s + var(--i, 0) * 0.05s);
}
@keyframes wordUp {
  from { opacity: 0; transform: translateY(0.95em); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Accent phrase: animated underline stroke */
.hero__title .accent-text { position: relative; white-space: nowrap; }
.hero__title .accent-text::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.02em;
  height: 0.09em;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: strokeIn 0.7s var(--ease) 1.2s both;
}
@keyframes strokeIn { to { transform: scaleX(1); } }

/* Hero stats */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem 2.6rem;
  margin-top: 2.6rem;
  padding-top: 1.7rem;
  border-top: 1px solid var(--line);
}
.stat { display: grid; gap: 0.1rem; }
.stat__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-2xl);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--fs-xs); color: var(--grey-2); text-transform: uppercase; letter-spacing: 0.09em; }

/* ---------- Tech marquee ---------- */
.marquee {
  overflow: hidden;
  padding: 1rem 0;
  border-block: 1px solid var(--line);
  background: var(--paper-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span {
  display: flex;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--grey);
  white-space: nowrap;
}
.marquee__track span::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.7;
  margin-inline: 1.7rem;
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Cursor-aware glow overlay (JS-injected .glow spans) ---------- */
.glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(22, 199, 154, 0.13), transparent 65%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  z-index: 0;
}
.card:hover .glow, .step:hover .glow, .why__item:hover .glow, .case:hover .glow { opacity: 1; }
.card > :not(.glow), .step > :not(.glow), .why__item > :not(.glow) { position: relative; z-index: 1; }
.hero__note::before {
  content: "";
  width: 18px; height: 18px;
  flex: none;
  background: var(--accent-soft);
  border-radius: 50%;
  /* checkmark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e9e79' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------- Section scaffolding ---------- */
.section { padding: var(--space-section) 0; }
.section__head { max-width: 760px; margin-bottom: clamp(2rem, 3.6vw, 3rem); }

/* numbered kicker via counter */
body { counter-reset: sec; }
.section { counter-increment: sec; }
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 1rem;
}
.kicker::before {
  content: counter(sec, decimal-leading-zero);
  font-variant-numeric: tabular-nums;
  color: var(--grey-2);
  letter-spacing: 0.05em;
}
.kicker::after {
  content: "";
  width: 26px; height: 1.5px;
  background: var(--accent);
  border-radius: 2px;
}
.section__head h2 { font-size: clamp(var(--fs-2xl), 4.6vw, var(--fs-3xl)); }
.section__lead { margin-top: 1.1rem; color: var(--grey); font-size: clamp(var(--fs-base), 2vw, var(--fs-lg)); max-width: 62ch; }

/* dark sections reset counter color */
.work .kicker::before { color: var(--grey); }

/* ---------- Offer / steps ---------- */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 1.3rem;
  grid-template-columns: 1fr;
}
.step {
  position: relative;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
  overflow: hidden;
}
.step::after {
  content: "";
  position: absolute;
  left: 0; top: 0; height: 3px; width: 0;
  background: var(--accent);
  transition: width 0.3s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.step:hover::after { width: 100%; }
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 13px;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-lg);
  margin-bottom: 1.1rem;
}
.step h3 { font-size: var(--fs-lg); margin-bottom: 0.5rem; }
.step p { color: var(--grey); font-size: var(--fs-sm); }

/* ---------- Services cards ---------- */
.cards {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: 1fr;
}
.card {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2rem 1.8rem;
  transition: transform 0.24s var(--ease), box-shadow 0.24s var(--ease), border-color 0.24s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--accent); }
.card__icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: var(--accent-soft);
  color: var(--accent-2);
  margin-bottom: 1.3rem;
  transition: transform 0.24s var(--ease);
}
.card:hover .card__icon { transform: scale(1.08) rotate(-3deg); }
.card__icon svg { width: 25px; height: 25px; }
.card h3 { font-size: var(--fs-lg); margin-bottom: 0.5rem; }
.card p { color: var(--grey); font-size: var(--fs-sm); }

/* ---------- Work / case studies (dark) ---------- */
.work {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.work::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(60% 50% at 90% 0%, #000, transparent 70%);
  mask-image: radial-gradient(60% 50% at 90% 0%, #000, transparent 70%);
  pointer-events: none;
}
.work .container { position: relative; z-index: 1; }
.work .kicker { color: var(--accent); }
.work .section__lead { color: var(--grey-2); }

.case {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.8rem;
  align-items: center;
  padding: 1.8rem;
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--ink-2), var(--ink-3));
  margin-bottom: 1.6rem;
  transition: border-color 0.24s var(--ease), transform 0.24s var(--ease);
}
.case:hover { border-color: rgba(22,199,154,0.4); transform: translateY(-3px); }
.case:last-child { margin-bottom: 0; }
.case__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.case__tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.case__body h3 { font-size: var(--fs-xl); margin-bottom: 0.8rem; }
.case__body p { color: var(--grey-2); font-size: var(--fs-sm); margin-bottom: 0.8rem; }
.case__result { color: #cdd3dd !important; }
.case__result strong { color: var(--paper); }
.case__meta { font-size: var(--fs-xs) !important; color: var(--grey) !important; }
.case--feature .case__body h3 { font-size: clamp(var(--fs-xl), 3.4vw, var(--fs-2xl)); }
/* flagship case gets a quiet accent halo */
.case--feature {
  border-color: rgba(22, 199, 154, 0.28);
  box-shadow: 0 0 70px -40px rgba(22, 199, 154, 0.5);
}
.case--feature:hover { border-color: rgba(22, 199, 154, 0.55); }

/* Device mockups */
.mockup {
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #0a0c10;
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow);
  transition: transform 0.3s var(--ease);
}
.case:hover .mockup { transform: translateY(-2px) scale(1.01); }
.mockup__bar {
  display: flex;
  gap: 6px;
  padding: 11px 13px;
  background: #13161c;
  border-bottom: 1px solid var(--line-dark);
}
.mockup__bar span { width: 11px; height: 11px; border-radius: 50%; background: #3a3f4b; }
.mockup__bar span:first-child { background: #ff5f57; }
.mockup__bar span:nth-child(2) { background: #febc2e; }
.mockup__bar span:nth-child(3) { background: #28c840; }
.mockup--split { display: grid; grid-template-columns: 1fr 1fr; }
.mockup--split .placeholder-img { border-radius: 0; }

.placeholder-img {
  position: relative;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.018) 0 14px, rgba(255,255,255,0.045) 14px 28px),
    linear-gradient(160deg, #1d212a, #111419);
  color: var(--grey-2);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-base);
}
.placeholder-img small { font-weight: 500; font-size: var(--fs-xs); color: var(--grey); }
.mockup__img .shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  z-index: 1;
}
.placeholder-img--before { background: linear-gradient(160deg, #24272f, #15171c); }
.placeholder-img--after { background: linear-gradient(160deg, rgba(22,199,154,0.22), #0f2e28); color: #bdeede; }

/* ---------- Instant site check ---------- */
.check { background: var(--paper); }
.check__panel {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: var(--shadow-sm);
}
.check__form { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.check__input {
  flex: 1 1 260px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.95rem 1.3rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.check__input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper-2);
  box-shadow: 0 0 0 3px rgba(22, 199, 154, 0.18);
}
.check__hint { margin-top: 0.9rem; font-size: var(--fs-sm); color: var(--grey-2); }
.check__hint.is-error { color: #d9534f; }

.check__results { margin-top: 1.8rem; border-top: 1px solid var(--line); padding-top: 1.6rem; }
.scoregrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
}
.score {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
}
.score__ring {
  --v: 0;
  --c: var(--accent);
  flex: none;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--c) calc(var(--v) * 1%), var(--line-2) 0);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-sm);
}
.score__ring span {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  color: var(--ink);
}
.score__label { font-size: var(--fs-sm); font-weight: 500; line-height: 1.3; }
.score__label small { display: block; color: var(--grey-2); font-size: var(--fs-xs); font-weight: 400; }

.check__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1rem;
}
.metric {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--paper);
  border: 1px solid var(--line);
}
.metric span { font-size: var(--fs-xs); color: var(--grey-2); text-transform: uppercase; letter-spacing: 0.06em; }
.metric strong { display: block; font-family: var(--font-head); font-size: var(--fs-lg); margin-top: 0.15rem; }
.metric strong small { font-size: var(--fs-xs); color: var(--grey); font-weight: 400; }

.check__cta {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.check__cta p { color: var(--grey); font-size: var(--fs-sm); max-width: 46ch; margin: 0; }
.check__report { flex: 0 0 auto; }
.report__form { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.report__input {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 0.7rem 1.1rem;
  min-width: 200px;
}
.report__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(22, 199, 154, 0.18);
}
.report__status { margin-top: 0.6rem; font-size: var(--fs-sm); }
.report__status.is-success { color: var(--accent-2); }
.report__status.is-error { color: #d9534f; }
.check__spinner {
  display: inline-block;
  width: 15px; height: 15px;
  border: 2px solid rgba(4,32,25,0.35);
  border-top-color: var(--accent-ink);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  vertical-align: -2px;
  margin-right: 6px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Before/After compare slider ---------- */
.compare {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  --pos: 50%;
}
.compare__layer { position: absolute; inset: 0; }
.compare__layer .placeholder-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  aspect-ratio: auto;
}
.compare__before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare__divider {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  background: var(--accent);
  transform: translateX(-1px);
  pointer-events: none;
  z-index: 3;
}
.compare__grip {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.compare__grip::before {
  content: "";
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.compare__range {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
}
.compare__range:focus-visible + .compare__tag,
.compare__range:focus-visible { outline: none; }
.compare__range:focus-visible ~ .compare__divider .compare__grip {
  box-shadow: 0 0 0 4px rgba(22,199,154,0.45), 0 4px 16px rgba(0,0,0,0.4);
}
.compare__tag {
  position: absolute;
  bottom: 12px;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(10,12,16,0.72);
  color: #fff;
  z-index: 3;
  pointer-events: none;
}
.compare__tag--before { left: 12px; }
.compare__tag--after { right: 12px; }

@media (min-width: 560px) {
  .scoregrid { grid-template-columns: repeat(4, 1fr); }
  .check__metrics { grid-template-columns: repeat(4, 1fr); }
  .score { flex-direction: column; text-align: center; gap: 0.6rem; padding: 1.2rem 0.8rem; }
  .score__label { font-size: var(--fs-xs); }
}

/* ---------- Process timeline ---------- */
.timeline {
  display: grid;
  gap: 2rem 2.5rem;
  grid-template-columns: 1fr;
  position: relative;
}
.phase {
  border-left: 2px solid var(--line-2);
  padding: 0.1rem 0 0.5rem 1.6rem;
  position: relative;
}
.phase::before {
  content: "";
  position: absolute;
  left: -8px; top: 4px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 3px rgba(22,199,154,0.2);
  animation: pulse 3.2s var(--ease) infinite;
}
.phase:nth-child(2)::before { animation-delay: 0.8s; }
.phase:nth-child(3)::before { animation-delay: 1.6s; }
.phase:nth-child(4)::before { animation-delay: 2.4s; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(22,199,154,0.2); }
  50%      { box-shadow: 0 0 0 7px rgba(22,199,154,0.08); }
}
.phase__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--accent-2);
  letter-spacing: 0.04em;
}
.phase h3 { font-size: var(--fs-lg); margin: 0.3rem 0 0.4rem; }
.phase p { color: var(--grey); font-size: var(--fs-sm); }

/* ---------- About ---------- */
.about__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  align-items: center;
}
.about__text h2 { margin: 0.4rem 0 1.2rem; font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); }
.about__text p { color: var(--grey); margin-bottom: 1.1rem; }
.about__text strong { color: var(--ink); font-weight: 600; }
.about__card {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 2.2rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.about__card::before {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(22,199,154,0.35), transparent 65%);
  pointer-events: none;
}
.facts { list-style: none; padding: 0; display: grid; gap: 1.2rem; position: relative; }
.facts li { display: grid; gap: 0.25rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--line-dark); }
.facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.facts span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--grey-2); }
.facts strong { font-family: var(--font-head); font-weight: 600; font-size: var(--fs-base); }

.link-arrow {
  color: var(--accent-2);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.link-arrow:hover { border-bottom-color: var(--accent-2); }

/* ---------- Why ---------- */
.why__grid {
  display: grid;
  gap: 1.3rem;
  grid-template-columns: 1fr;
}
.why__item {
  padding: 1.7rem;
  border-radius: var(--radius);
  background: var(--paper-2);
  border: 1px solid var(--line);
  position: relative;
  padding-left: 2rem;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.why__item::before {
  content: "";
  position: absolute;
  left: 0; top: 1.9rem; bottom: 1.9rem;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}
.why__item:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }
.why__item h3 { font-size: var(--fs-lg); margin-bottom: 0.45rem; }
.why__item p { color: var(--grey); font-size: var(--fs-sm); }

/* ---------- CTA band ---------- */
.cta-band__inner {
  background: linear-gradient(135deg, var(--ink), #14171f 60%, #0c1f1a);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: clamp(3rem, 7vw, 5rem);
  text-align: center;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.cta-band__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 70%);
  mask-image: radial-gradient(70% 90% at 50% 0%, #000, transparent 70%);
}
.cta-band__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(50% 90% at 50% 0%, rgba(22,199,154,0.28), transparent 70%);
  pointer-events: none;
  animation: ctaGlow 7s ease-in-out infinite alternate;
}
@keyframes ctaGlow {
  from { opacity: 0.75; transform: translateX(-4%); }
  to   { opacity: 1; transform: translateX(4%); }
}
.cta-band h2 { font-size: clamp(var(--fs-2xl), 5vw, var(--fs-3xl)); margin-bottom: 1rem; position: relative; text-wrap: balance; }
/* `balance` keeps this from breaking into three lines with a two-word orphan. */
.cta-band p { color: var(--grey-2); max-width: 52ch; margin: 0 auto 2rem; position: relative; text-wrap: balance; }
.section__head h2, .case__body h3 { text-wrap: balance; }
.cta-band .btn { position: relative; }

/* ---------- Contact ---------- */
.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.4rem;
  align-items: start;
}
.contact__intro h2 { margin: 0.4rem 0 1.2rem; font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); }
.contact__intro p { color: var(--grey); margin-bottom: 1.1rem; }
.contact__founder { font-size: var(--fs-sm); }

.contact__form {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 1.15rem;
}
.field { display: grid; gap: 0.4rem; }
.field label { font-size: var(--fs-sm); font-weight: 500; }
.field__opt { color: var(--grey-2); font-weight: 400; }
.field input, .field textarea {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-sm);
  padding: 0.78rem 0.9rem;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease), background 0.15s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper-2);
  box-shadow: 0 0 0 3px rgba(22, 199, 154, 0.18);
}
.field textarea { resize: vertical; }
/* Error state only AFTER the visitor has interacted. The old `:invalid`
   rule painted every empty required field red on page load, because an
   input with no placeholder attribute never matches `:placeholder-shown`. */
.field input:user-invalid:not(:focus),
.field textarea:user-invalid:not(:focus) { border-color: #d9534f; }
.field input.is-invalid, .field textarea.is-invalid { border-color: #d9534f; }

.form__status { font-size: var(--fs-sm); min-height: 1.2em; }
.form__status.is-success { color: var(--accent-2); }
.form__status.is-error { color: #d9534f; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--grey-2); padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; }
.footer__inner {
  display: grid;
  gap: 2.2rem;
  grid-template-columns: 1fr;
}
.footer__brand .nav__mark { color: var(--accent); background: rgba(22,199,154,0.16); }
.footer__brand { display: grid; gap: 0.6rem; align-content: start; }
.footer__brand-row { display: inline-flex; align-items: center; gap: 0.55rem; }
.footer__brand .footer__word { color: var(--paper); }
.footer__tag { font-size: var(--fs-sm); max-width: 36ch; }
.footer__nav { display: flex; flex-wrap: wrap; gap: 1.3rem; align-content: start; }
.footer__nav a, .footer__meta a { font-size: var(--fs-sm); color: var(--grey-2); transition: color 0.15s var(--ease); }
.footer__nav a:hover, .footer__meta a:hover { color: var(--paper); }
.footer__meta { display: grid; gap: 0.5rem; align-content: start; }
.footer__meta p { font-size: var(--fs-xs); color: var(--grey); margin-top: 0.4rem; }

.placeholder-text { color: var(--grey); font-style: italic; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  filter: blur(5px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease), filter 0.75s var(--ease);
  will-change: opacity, transform, filter;
}
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
/* stagger children inside grids */
.steps .reveal.is-visible:nth-child(2),
.cards .reveal.is-visible:nth-child(2),
.timeline .reveal.is-visible:nth-child(2),
.why__grid .reveal.is-visible:nth-child(2) { transition-delay: 0.08s; }
.steps .reveal.is-visible:nth-child(3),
.cards .reveal.is-visible:nth-child(3),
.timeline .reveal.is-visible:nth-child(3),
.why__grid .reveal.is-visible:nth-child(3) { transition-delay: 0.16s; }
.cards .reveal.is-visible:nth-child(4),
.timeline .reveal.is-visible:nth-child(4),
.why__grid .reveal.is-visible:nth-child(4) { transition-delay: 0.24s; }
.cards .reveal.is-visible:nth-child(5) { transition-delay: 0.32s; }
.cards .reveal.is-visible:nth-child(6) { transition-delay: 0.4s; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (min-width: 600px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 880px) {
  :root { --gutter: 2.2rem; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(4, 1fr); }
  .case {
    grid-template-columns: 1.05fr 1fr;
    gap: 2.6rem;
    padding: 2.4rem;
  }
  .case--feature { grid-template-columns: 1.15fr 1fr; }
  .case--concept { grid-template-columns: 1.2fr 1fr; }
  .about__grid { grid-template-columns: 1.35fr 0.9fr; gap: 3.5rem; }
  .contact__grid { grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; }
  .footer__inner { grid-template-columns: 1.5fr 1fr 1fr; }
}

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

  /* Hero becomes a two-column composition: copy left, audit card right,
     stats spanning the full width underneath. */
  .hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.92fr);
    align-items: center;
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .hero__copy { max-width: 620px; }
  .hero__visual { display: block; justify-self: end; width: 100%; max-width: 430px; }
  .hero__stats { grid-column: 1 / -1; }
  .hero__title { font-size: clamp(2.9rem, 3.9vw, 3.65rem); }
  /* The card now occupies the right side, so the loose floating shapes
     either move out of its way or step aside entirely. */
  .shape--ring { right: 2%; top: 6%; }
  .shape--dot, .shape--bar { display: none; }
}

/* Services: six cards read best as a 3-column grid */
@media (min-width: 720px) {
  .cards--six { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1000px) {
  .cards--six { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile nav */
@media (max-width: 879px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    position: fixed;
    inset: 72px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 0.5rem var(--gutter) 1.4rem;
    box-shadow: var(--shadow);
    transform: translateY(-130%);
    transition: transform 0.32s var(--ease);
    visibility: hidden;
  }
  .nav__menu.is-open { transform: translateY(0); visibility: visible; }
  .nav__menu a:not(.btn) { padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
  .nav__menu a:not(.btn)::after { display: none; }
  .nav__cta { margin-top: 1rem; }
  .shape--ring { width: 90px; height: 90px; }
}

/* ---------- Small-screen refinements ---------- */
@media (max-width: 599px) {
  /* The eyebrow is too long to sit in a pill on a phone: two wrapped lines
     inside a rounded chip read as a mistake. Drop to a plain label. */
  .hero__eyebrow {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0.1rem 0;
    margin-bottom: 1.1rem;
    align-items: flex-start;
    font-size: var(--fs-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-2);
    line-height: 1.55;
  }
  .hero__eyebrow-dot { flex: none; margin-top: 0.45em; }

  .hero__title { font-size: clamp(2.3rem, 8.6vw, 3rem); }
  .hero__sub { margin-bottom: 1.8rem; }

  /* Equal-width stacked CTAs. Auto-width buttons of different lengths
     stacked on top of each other looked unfinished. */
  .hero__cta { display: grid; grid-template-columns: 1fr; gap: 0.7rem; }
  .hero__cta .btn { width: 100%; }

  .hero__stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.3rem 1.2rem;
    margin-top: 2.1rem;
    align-items: start;
  }

  /* The floating shapes were landing on top of the hero copy at phone
     widths. Decorative, so they simply step out. */
  .shape--dot, .shape--bar { display: none; }
  .shape--ring { opacity: 0.5; }

  .check__form { display: grid; grid-template-columns: 1fr; }
  .check__form .btn { width: 100%; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .hero-enter, .hero__title .w__inner, .hero__title .accent-text::after { animation: none; opacity: 1; transform: none; filter: none; }
  .hero__title .accent-text::after { transform: scaleX(1); }
  .btn:hover, .card:hover, .step:hover, .case:hover, .why__item:hover { transform: none; }
  .shape, .hero__bg::before, .hero__bg::after, .marquee__track, .phase::before, .cta-band__inner::after { animation: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}