/* Hallmark · shape: Manifesto (draw 97d4ce) · genre: modern-minimal · theme: brand · redesign: full · job: hire
 * paper: oklch(21% 0.032 262) / light oklch(97.6% 0.005 75) · accent: oklch(70.5% 0.191 47.6) · display: Lexend · body: Instrument Sans · hero: Poster · nav: edge-aligned (swapped from search-led: the site has nothing to search) · footer: mast · signature: the claim set at poster scale over the live ticker rain and candle strip, then $10M to $200M as the page's largest figure
 * axes: dark/geometric-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: P, the claim is the brand slogan rather than an argument; the Why section carries the argument as a swept statement */
/* Hallmark · waive 38iii · one accented line, once, in the hero h1 only · the orange second line of the slogan is the Aneeru brand signature (og-image, old site), kept as solid ink-free orange */
/* Hallmark · waive 74 · brand/README.md and brand/colors name #f97316 and the slate ramp · the orange and slate are the Aneeru brand kit, kept through the redesign */
/* Hallmark · dropped "AI-powered fintech software" hero badge and the six section eyebrows (About us, Expertise, Customer cases, Why Aneeru, Process, Contact) · 54 names them as eyebrows; the nav still names each section */
/* Hallmark · dropped "What sets us apart" visible label · 54 names it; the words live on as the list's aria-label */
/* Hallmark · reworded "Get started" to "Get in touch" in Expertise · 19 names it as a stock second action */
/* Hallmark · dismissed 23 · the accent display figures are the $10M to $200M signature and the 404 numeral, one each per page */
/* Hallmark · answered F5 · the arrow in its own circle is the brand's arrowed-CTA pattern, kept from the old site */
/* Hallmark · reworded every en dash in copy to a colon or comma · 19 names the dash in copy, meaning kept */

/* ==========================================================================
   Tokens. Every colour and face on the site goes through these. Dark is the
   default paper; .section-light re-maps the same names to the light paper, so
   components never need their own light rules.
   ========================================================================== */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-poster: clamp(2.75rem, 6.2vw + 0.25rem, 6rem);
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.5vw + 1rem, 1.5rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --text-claim: clamp(1.75rem, 2.4vw + 0.75rem, 3rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --nav-h: 4.5rem;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

  /* dark paper (default) */
  --color-paper: oklch(21% 0.032 262);
  --color-paper-2: oklch(24.5% 0.034 262);
  --color-paper-3: oklch(17% 0.028 262);
  --color-ink: oklch(96.5% 0.006 262);
  --color-ink-2: oklch(84% 0.014 262);
  --color-muted: oklch(71% 0.02 262);
  --color-rule: oklch(31% 0.03 262);
  --color-rule-strong: oklch(44% 0.03 262);
  --color-accent: oklch(70.5% 0.191 47.6);          /* #f97316, the brand orange */
  --color-accent-hover: oklch(74% 0.18 47.6);         /* same hue as the brand orange, one step lighter */
  --color-accent-ink: oklch(20% 0.045 45);           /* text on the orange */
  --color-accent-text: oklch(78% 0.145 57);          /* orange as small text on this paper */
  --color-focus: oklch(76% 0.17 55);
  --color-error: oklch(72% 0.16 25);
  --color-success: oklch(80% 0.13 155);
  --color-mask: oklch(15% 0.02 262);                                 /* mask-image solid, never painted */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* light paper, mapped in by .section-light */
  --light-paper: oklch(97.6% 0.005 75);
  --light-paper-2: oklch(99.6% 0.002 75);
  --light-paper-3: oklch(94.5% 0.007 75);
  --light-ink: oklch(22% 0.032 262);
  --light-ink-2: oklch(37% 0.03 262);
  --light-muted: oklch(49% 0.026 262);
  --light-rule: oklch(89.5% 0.01 262);
  --light-rule-strong: oklch(80% 0.014 262);
  --light-accent-text: oklch(54% 0.185 40);          /* #c2410c family, AA on light */
  --light-error: oklch(50% 0.19 27);
  --light-success: oklch(48% 0.12 150);

  --font-display: "Lexend", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --display-weight: 700;
  --radius-card: 1rem; --radius-sm: 0.5rem; --radius-pill: 999px; --rule-hair: 1px;
  --tracking-display: -0.025em;
}

.section-light,
.legal {
  --color-paper: var(--light-paper);
  --color-paper-2: var(--light-paper-2);
  --color-paper-3: var(--light-paper-3);
  --color-ink: var(--light-ink);
  --color-ink-2: var(--light-ink-2);
  --color-muted: var(--light-muted);
  --color-rule: var(--light-rule);
  --color-rule-strong: var(--light-rule-strong);
  --color-accent-text: var(--light-accent-text);
  --color-focus: var(--light-accent-text);
  --color-error: var(--light-error);
  --color-success: var(--light-success);
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-rule-strong) var(--color-paper-3); scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--color-accent);
}
::selection { background: color-mix(in oklab, var(--color-accent) 30%, transparent); color: var(--color-ink); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-synthesis: none;
  letter-spacing: var(--tracking-display);
  line-height: 1.05;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}
h1 { max-width: 20ch; font-size: var(--text-display); }
h2 { max-width: 22ch; font-size: var(--text-section); }
h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; color: var(--color-ink-2); }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.ico { width: 1.25rem; height: 1.25rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Dark surfaces carry a faint grain; light sections are plain paper */
main > section:not(.section-light),
.hero,
.site-footer,
.legal-hero,
.notfound { background-color: var(--color-paper); background-image: var(--noise); color: var(--color-ink); }
.section-light { background: var(--color-paper); color: var(--color-ink); }

/* ==========================================================================
   Buttons: pills, one filled primary, outlined secondary
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 3rem;
  padding: var(--space-xs) var(--space-lg);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn-secondary { background: transparent; color: var(--color-ink); border-color: var(--color-rule-strong); }
.btn-has-icon { padding-right: var(--space-xs); }
.btn-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: color-mix(in oklab, currentColor 12%, transparent);
  transition: transform var(--dur-short) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
  .btn-secondary:hover { border-color: var(--color-ink); }
  .btn:hover .btn-icon { transform: translate(2px, -2px); }
  .btn:hover .btn-icon--down { transform: translateY(2px); }
}

/* ==========================================================================
   Nav: edge-aligned, wordmark left, links and one quiet action right
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-sticky-nav);
  height: var(--nav-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.nav.scrolled { background: var(--color-paper-3); border-bottom-color: var(--color-rule); }
.nav-inner { display: flex; align-items: center; gap: var(--space-xl); height: 100%; }
.nav-logo { display: block; flex-shrink: 0; margin-right: auto; }
.nav-logo img { height: 2rem; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-lg); }
.nav-links a {
  display: block;
  padding-block: var(--space-xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.nav-links a[aria-current] { color: var(--color-ink); border-bottom-color: var(--color-accent); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--color-ink); } }
.nav-right { display: flex; align-items: center; gap: var(--space-sm); }
.btn-nav { min-height: 2.75rem; padding-inline: var(--space-md); font-size: var(--text-sm); }
.btn-nav.btn-has-icon { gap: var(--space-xs); padding-right: var(--space-2xs); }
.btn-nav .btn-icon { width: 1.75rem; height: 1.75rem; }   /* the hero CTA's arrow circle, one step smaller */
.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  cursor: pointer;
  place-items: center;
  align-content: center;
  gap: var(--space-2xs);
}
.nav-toggle span { display: block; width: 1.125rem; height: 1.5px; background: var(--color-ink); transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-micro) var(--ease-out); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.nav-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
}

/* ==========================================================================
   Hero: Poster. The ticker rain and the candle strip are the canvas; the
   claim rests low and left on its calmest part.
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(36rem, 100svh, 60rem);
  padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-3xl);
  isolation: isolate;
  overflow: clip;
}
.hero-content { position: relative; z-index: var(--z-raised); }
.hero h1 { font-size: var(--text-poster); line-height: 1.0; max-width: 16ch; letter-spacing: -0.035em; }
.hero h1 .hero-accent { color: var(--color-accent); }   /* the slogan's second line in brand orange, solid, roman */
.hero-sub { max-width: 46ch; margin-top: var(--space-lg); font-size: var(--text-lead); line-height: 1.45; color: var(--color-ink-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }

/* One settle on arrival: the copy slides 14px up into place, visible from the first frame, and
   under reduced motion the base rule at the foot turns it off. No fade: Chrome does not count an
   element at opacity 0 for LCP, and the h1 is the LCP element. To bring the fade back, put
   `opacity: 0;` before the transform below (or revert the commit "hero settle: slide only"). */
@keyframes settle { from { transform: translateY(14px); } }
.hero-content > * { animation: settle 0.7s var(--ease-out) backwards; }
.hero-content > :nth-child(2) { animation-delay: 90ms; }
.hero-content > :nth-child(3) { animation-delay: 180ms; }

/* Ticker rain: three small animated WebP tiles (scripts/hero/rain.py), each repeated over the
   hero and layered. The animation lives inside the images (0.2 s frames, seamless loops), so
   there is no CSS animation and no JS. Small tiles because animated images are decoded on the
   CPU: cost grows with tile size; sizes differ so the layers never line up into a visible
   repeat. main.js sets them after `load` (.is-loaded) so they never delay the first paint.
   Bump ?v= after regenerating (/assets is cached 7 days). */
.hero-rain { position: absolute; inset: 0; z-index: -1; pointer-events: none; background-repeat: repeat; }
.hero-rain.is-loaded {
  background-image:
    url("/assets/images/hero-rain-1.webp?v=4"),
    url("/assets/images/hero-rain-2.webp?v=4"),
    url("/assets/images/hero-rain-3.webp?v=4");
  background-position: 0 0, 0 144px, 0 72px;   /* x must stay 0: each layer owns its columns (mod 3), see rain.py */
}
@media (prefers-reduced-motion: reduce) {
  .hero-rain.is-loaded {
    background-image:
      url("/assets/images/hero-rain-1-still.webp?v=4"),
      url("/assets/images/hero-rain-2-still.webp?v=4"),
      url("/assets/images/hero-rain-3-still.webp?v=4");
  }
}

/* Candlestick chart: one static, seamless strip (scripts/hero/candles.py, drawn at 2x) repeated
   along a track one period wider than the hero. main.js moves the track one candle (14 px) to
   the left once a second and wraps after a period (1680 px): a transform on its own layer, so
   the GPU only re-places the finished image, nothing is decoded or redrawn. */
.hero-chart { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-chart-track {
  position: absolute;
  left: 0;
  top: 20%;
  width: calc(100% + 1680px);
  height: 240px;
  background: url("/assets/images/hero-candles.webp?v=1") 0 0 / 1680px 240px repeat-x;
  will-change: transform;
}

/* Clear the canvas behind the claim (low left), keep it full at the top right */
.hero-rain,
.hero-chart {
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 18% 88%, transparent 38%, var(--color-mask) 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 18% 88%, transparent 38%, var(--color-mask) 100%);
}

/* ==========================================================================
   Sections: shared rhythm and head blocks
   ========================================================================== */
main > section { padding-block: var(--section-gap-s); }
#work, #why-aneeru { padding-block: var(--section-gap); }
.section-head { display: grid; gap: var(--space-lg); margin-bottom: var(--space-2xl); }
.section-head.split {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
  column-gap: var(--gap-columns);
}
.section-head-side { display: grid; justify-items: start; gap: var(--space-lg); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}
.tag .ico { width: 1rem; height: 1rem; color: var(--color-accent-text); }

/* ==========================================================================
   Results: the figures straight after the claim
   ========================================================================== */
.results { padding-top: var(--space-3xl); border-top: 1px solid var(--color-rule); }
.metrics {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
  border-top: 1px solid var(--color-rule-strong);
}
.metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-xl) var(--space-xl) var(--space-xl) 0;
}
.metric + .metric { padding-left: var(--space-xl); border-left: 1px solid var(--color-rule); }
.metric:last-child { padding-right: 0; }
.metric-label {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
}
.metric-label .ico { color: var(--color-accent-text); }
.metric-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  column-gap: var(--space-sm);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-3xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.metric-unit { font-family: var(--font-body); font-size: var(--text-md); font-weight: 400; letter-spacing: 0; color: var(--color-muted); }
.metric-text { margin-top: var(--space-md); max-width: 34ch; color: var(--color-ink-2); }
/* The lead: a broker's revenue, $10M to $200M, the largest figure on the page */
.metric--lead .metric-figure { font-variant-numeric: tabular-nums; font-size: clamp(3rem, 5vw + 0.5rem, 5.5rem); color: var(--color-accent); }
.metric--lead .metric-figure--was { font-variant-numeric: tabular-nums; font-size: var(--text-3xl); color: var(--color-muted); }

.trust-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-xl);
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  font-weight: 600;
}
.trust-bar li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.trust-bar .ico { width: 1.125rem; height: 1.125rem; color: var(--color-muted); }

/* ==========================================================================
   About: split, the intro left, what sets us apart as a ruled list right
   ========================================================================== */
.about-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: calc(var(--gap-columns) * 3);
  align-items: start;
}
.about-intro { display: grid; gap: var(--space-lg); }
.about-intro h2 { margin-bottom: var(--space-xs); }
.about-intro p:not(.lead) { max-width: 52ch; color: var(--color-ink-2); }
.apart { border-top: 1px solid var(--color-ink); }
.apart-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-lg);
  border-bottom: 1px solid var(--color-rule);
}
.apart-item h3 { grid-column: 1; }
.apart-item p:not(.tag) { grid-column: 1; max-width: 56ch; color: var(--color-ink-2); }
.apart-item .tag { grid-column: 2; grid-row: 1; align-self: center; }

/* ==========================================================================
   Expertise: an index of six services, title, area and one line per row
   ========================================================================== */
.services { border-top: 1px solid var(--color-rule-strong); }
.service {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr);
  column-gap: var(--gap-columns);
  align-items: baseline;
  padding-block: var(--space-xl);
  border-bottom: 1px solid var(--color-rule);
}
.service .ico { align-self: start; width: 1.5rem; height: 1.5rem; color: var(--color-accent-text); }
.service-sub { color: var(--color-accent-text); font-size: var(--text-sm); font-weight: 600; }
.service-text { color: var(--color-ink-2); max-width: 52ch; }

/* ==========================================================================
   Customer cases: the work, six cards in mixed spans, the AML case leads
   ========================================================================== */
.cases {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gap-columns);
}
/* Bento: the .case--lead card opens across the full width, then three, then the last two in halves */
.case { grid-column: span 4; display: flex; }
.case.case--lead { grid-column: 1 / -1; }
.case:nth-last-child(-n + 2):not(.case--lead) { grid-column: span 6; }
.case-core {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-xl);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-card);
}
.case-meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 600;
}
.case-meta .ico { color: var(--color-accent-text); }
.case-core > p:not([class]) { color: var(--color-ink-2); max-width: 56ch; }
.case-result {
  display: grid;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
}
.case-result strong {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
}
.case-result span { color: var(--color-muted); font-size: var(--text-sm); max-width: 44ch; }
.case--lead .case-core {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  align-content: start;
  column-gap: var(--space-3xl);
  padding: var(--space-2xl);
}
.case--lead .case-core > :not(.case-result) { grid-column: 1; }
.case--lead h3 { font-size: var(--text-2xl); }
.case--lead .case-result {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: stretch;
  align-content: end;
  margin-top: 0;
  padding-top: 0;
  padding-left: var(--space-2xl);
  border-top: 0;
  border-left: 1px solid var(--color-rule);
}
.case--lead .case-result strong { font-size: clamp(3rem, 5vw + 0.5rem, 5.5rem); line-height: 1; }

/* ==========================================================================
   Why Aneeru: the argument as one swept statement, then three numbered reasons
   ========================================================================== */
.why-claim {
  max-width: 36ch;
  margin-top: var(--space-xl);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-claim);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-ink-2);
}
/* One reveal on the page: the claim sweeps in once when it reaches the viewport. Hidden only
   once main.js has armed its observer (.is-armed) and motion is welcome, so it is never blank
   without script; print always shows it */
@media (prefers-reduced-motion: no-preference) {
  .why-claim.is-armed { clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--ease-out); }
  .why-claim.is-armed.is-in { clip-path: inset(0 0 0 0); }
}
@media print {
  .why-claim.is-armed { clip-path: none; }
}
.why-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-columns);
  margin-top: var(--space-3xl);
  counter-reset: why;
}
.why-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule-strong);
  counter-increment: why;
}
.why-item::before {
  content: counter(why);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-3xl);
  line-height: 1;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.why-item p:not(.tag) { color: var(--color-ink-2); }
.why-item .tag { margin-top: auto; }

/* ==========================================================================
   Process: six numbered steps, three across
   ========================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2xl) var(--gap-columns);
  counter-reset: step;
}
.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-ink);
  counter-increment: step;
}
.step::before {
  content: counter(step);
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--color-accent-text);
  font-variant-numeric: tabular-nums;
}
.step p:not(.step-tag) { color: var(--color-ink-2); }
.step-tag { margin-top: auto; padding-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); font-weight: 600; }

/* ==========================================================================
   Contact: the ask on the left, the form on the right in one inset well
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: calc(var(--gap-columns) * 3);
  align-items: start;
}
.contact-intro { display: grid; gap: var(--space-xl); }
.next-steps { display: grid; gap: var(--space-lg); counter-reset: next; }
.next-steps li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
  counter-increment: next;
  color: var(--color-ink-2);
}
.next-steps li::before {
  content: counter(next);
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: var(--text-lg);
  color: var(--color-accent-text);
}
.next-steps strong { color: var(--color-ink); font-weight: 600; }
.direct { display: grid; gap: var(--space-xs); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.direct-label { color: var(--color-muted); font-size: var(--text-sm); }
.direct-mail {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  width: fit-content;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--display-weight);
  letter-spacing: -0.015em;
  text-decoration: none;
  transition: color var(--dur-micro) var(--ease-out);
}
.direct-mail .ico { width: 1.5rem; height: 1.5rem; color: var(--color-accent-text); }
@media (hover: hover) and (pointer: fine) { .direct-mail:hover { color: var(--color-accent-text); } }

.contact-form {
  display: grid;
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-paper-3);
  border-radius: var(--radius-card);
}
.field-group { display: grid; gap: var(--space-xs); }
.field-group label { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.req { color: var(--color-accent-text); }
.optional { color: var(--color-muted); font-weight: 400; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-md);
  transition: border-color var(--dur-micro) var(--ease-out);
}
.contact-form textarea { resize: vertical; min-height: 8.5rem; line-height: 1.5; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
@media (hover: hover) and (pointer: fine) {
  .contact-form input:hover,
  .contact-form textarea:hover { border-color: var(--color-muted); }
}
.contact-form [aria-invalid="true"] { border-color: var(--color-error); }
.field-error { min-height: 1lh; color: var(--color-error); font-size: var(--text-sm); }
.field-error:empty { min-height: 0; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn-submit { justify-self: start; }
.btn-submit[aria-busy="true"] { cursor: progress; }
.form-note { color: var(--color-muted); font-size: var(--text-sm); }
.form-note a { color: var(--color-ink-2); }
.form-msg { font-size: var(--text-sm); }
.form-msg:empty { display: none; }
.form-msg.is-success { color: var(--color-success); }
.form-msg.is-error { color: var(--color-error); }
.form-msg a { color: var(--color-ink); }

/* ==========================================================================
   Progress HUD: shown after the hero, hidden while the form is on screen
   ========================================================================== */
.hud {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-sm);
  background: var(--color-paper-3);
  border: 1px solid var(--color-rule-strong);
  border-radius: var(--radius-pill);
}
/* The HUD only exists with script: main.js drives it */
html:not(.js) .hud { display: none; }
.js .hud {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--dur-short) var(--ease-in), transform var(--dur-short) var(--ease-in), visibility 0s linear var(--dur-short);
}
.js .hud.is-shown {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s;
}
.hud-ring { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; }
.hud-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.hud-ring circle { fill: none; stroke: var(--color-rule); stroke-width: 3; }
.hud-ring .hud-ring-fill { stroke: var(--color-accent); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--progress, 0) * 100); stroke-linecap: round; }
.hud-pct { font-size: 0.625rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.hud-text { display: flex; flex-direction: column; min-width: 6.5rem; line-height: 1.25; }
.hud-kicker { color: var(--color-muted); font-size: var(--text-xs); }
.hud-section { font-size: var(--text-sm); font-weight: 600; }
.hud-cta { min-height: 2.75rem; padding-inline: var(--space-md); font-size: var(--text-sm); }

/* ==========================================================================
   Footer: a mast, the wordmark large over the links
   ========================================================================== */
.site-footer { padding-block: var(--space-3xl) var(--space-xl); background-color: var(--color-paper-3); color: var(--color-ink); border-top: 1px solid var(--color-rule); }
.footer-mast {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--gap-columns);
  align-items: end;
  padding-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-rule);
}
.footer-logo { display: block; width: fit-content; }
.footer-logo img { height: clamp(3rem, 6vw, 5.5rem); width: auto; }
.footer-line { max-width: 40ch; color: var(--color-ink-2); }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl) var(--gap-columns);
  padding-block: var(--space-2xl);
}
.footer-head { margin-bottom: var(--space-md); color: var(--color-muted); font-size: var(--text-sm); }
.footer-col ul { display: grid; gap: var(--space-sm); color: var(--color-ink-2); }
.footer-col a { text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.footer-cta { color: var(--color-accent-text); font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .footer-col a:hover, .footer-bottom a:hover { color: var(--color-ink); text-decoration: underline; } }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-rule);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.footer-bottom a { text-decoration: none; }

/* Privacy page footer: one simple row */
.footer {
  padding-block: var(--space-xl);
  background-color: var(--color-paper-3);
  color: var(--color-ink);
  border-top: 1px solid var(--color-rule);
}
.footer-inner { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-lg) var(--space-xl); }
.footer-inner .footer-logo img { height: 1.75rem; }
.footer-nav-links { display: flex; flex-wrap: wrap; gap: var(--space-lg); font-size: var(--text-sm); }
.footer-nav-links a { color: var(--color-ink-2); text-decoration: none; }
.footer-nav-links a[aria-current] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }
.footer-right { margin-left: auto; color: var(--color-muted); font-size: var(--text-sm); }

/* ==========================================================================
   Privacy page
   ========================================================================== */
.legal-hero { padding-block: var(--space-2xl) var(--space-3xl); border-bottom: 1px solid var(--color-rule); }
.legal-logo { display: block; width: fit-content; margin-bottom: var(--space-3xl); }
.legal-logo img { height: 2rem; width: auto; }
.legal-hero h1 { margin-bottom: var(--space-md); }
.legal-updated { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }
.legal { padding-block: var(--space-3xl) var(--section-gap-s); background: var(--color-paper); color: var(--color-ink); }
.legal-body { max-width: 68ch; }
.legal-body section + section { margin-top: var(--space-xl); padding-top: var(--space-xl); border-top: 1px solid var(--color-rule); }
.legal-body h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.legal-body p,
.legal-body li { color: var(--color-ink-2); }
.legal-body p + p,
.legal-body ul + p,
.legal-body p + ul { margin-top: var(--space-md); }
.legal-body ul { display: grid; gap: var(--space-xs); }
.legal-body ul li { position: relative; padding-left: var(--space-lg); }
.legal-body ul li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 0.5rem; height: 2px; background: var(--color-accent); }
.legal-body strong { color: var(--color-ink); font-weight: 600; }
.legal-body a { color: var(--color-accent-text); }
.legal-facts { display: grid; margin-bottom: var(--space-lg); border-top: 1px solid var(--color-rule); }
.legal-facts div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.legal-facts dt { color: var(--color-muted); }
.legal-facts dd { margin: 0; color: var(--color-ink); }

/* ==========================================================================
   404
   ========================================================================== */
.notfound { display: grid; align-items: center; min-height: 100svh; }
.notfound-inner { display: grid; justify-items: start; gap: var(--space-lg); padding-block: var(--space-3xl); }
.notfound-logo { display: block; margin-bottom: var(--space-2xl); }
.notfound-logo img { height: 2rem; width: auto; }
.notfound-code {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(6rem, 16vw, 14rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--color-accent);
}
.notfound .hero-actions { margin-top: var(--space-md); }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --gutter: 32px; --section-gap-s: 96px; --section-gap: 112px; --section-gap-l: 128px; }
  .section-head.split,
  .about-layout,
  .contact-layout,
  .footer-mast { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .about-layout { row-gap: var(--space-2xl); }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric--lead { grid-column: 1 / -1; padding-right: 0; border-bottom: 1px solid var(--color-rule); }
  .metric:nth-child(2) { padding-left: 0; border-left: 0; }
  .service { grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.4fr); row-gap: var(--space-xs); }
  .service .service-sub { grid-column: 2; grid-row: 2; }
  .service .service-text { grid-column: 3; grid-row: 1 / span 2; }
  .cases > .case,
  .cases > .case:nth-child(n) { grid-column: span 6; }
  /* lead full width; five others pair up, so the last one takes the row */
  .cases > .case.case--lead,
  .cases > .case:last-child:not(.case--lead) { grid-column: 1 / -1; }
  .why-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Contact: heading, then the form, then the steps and the email */
  .contact-layout { row-gap: var(--space-xl); }
  .contact-intro { display: contents; }
  .contact-intro h2 { order: 1; }
  .contact-form { order: 2; }
  .next-steps { order: 3; }
  .direct { order: 4; }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
  :root { --gutter: 20px; --section-gap-s: 72px; --section-gap: 80px; --section-gap-l: 96px; --gap-columns: 16px; --nav-h: 4rem; }
  .nav-toggle { display: grid; }
  .btn-nav { display: none; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: grid;
    gap: 0;
    padding: var(--space-xs) var(--gutter) var(--space-lg);
    background: var(--color-paper-3);
    border-bottom: 1px solid var(--color-rule);
  }
  /* Without script there is no menu: the links and toggle go, the "Get in touch" action stays */
  html:not(.js) .nav-toggle,
  html:not(.js) .nav-links { display: none; }
  html:not(.js) .btn-nav { display: inline-flex; }
  .js .nav-links {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur-micro) var(--ease-in), transform var(--dur-micro) var(--ease-in), visibility 0s linear var(--dur-micro);
  }
  .js .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out), visibility 0s;
  }
  .nav:has(.nav-links.open) { background: var(--color-paper-3); }
  .nav-links a { padding-block: var(--space-md); font-size: var(--text-lg); border-bottom: 1px solid var(--color-rule); }
  .nav-links a[aria-current] { border-bottom-color: var(--color-accent); }

  .hero { min-height: min(100svh, 52rem); padding-bottom: var(--space-2xl); }
  .hero-chart-track { top: 14%; }
  .hero-rain { opacity: 0.7; }   /* narrow screens: less behind the copy */
  .hero-rain,
  .hero-chart {
    -webkit-mask-image: linear-gradient(to bottom, var(--color-mask) 0%, var(--color-mask) 30%, transparent 62%);
    mask-image: linear-gradient(to bottom, var(--color-mask) 0%, var(--color-mask) 30%, transparent 62%);
  }
  .hero-actions .btn { flex: 1 1 auto; }

  .metrics { grid-template-columns: minmax(0, 1fr); }
  .metric,
  .metric + .metric { padding: var(--space-lg) 0; border-left: 0; }
  .metric + .metric { border-top: 1px solid var(--color-rule); }
  .metric--lead { border-bottom: 0; }

  .apart-item { grid-template-columns: minmax(0, 1fr); }
  .apart-item .tag { grid-column: 1; grid-row: auto; }
  .service { grid-template-columns: 2rem minmax(0, 1fr); padding-block: var(--space-lg); }
  .service .service-sub { grid-column: 2; grid-row: auto; }
  .service .service-text { grid-column: 2; grid-row: auto; }
  .cases > .case,
  .cases > .case:nth-child(n) { grid-column: 1 / -1; }
  .case-core,
  .case--lead .case-core { padding: var(--space-lg); }
  .case--lead .case-core { grid-template-columns: minmax(0, 1fr); }
  .case--lead .case-result { grid-column: 1; grid-row: auto; padding-left: 0; padding-top: var(--space-lg); border-left: 0; border-top: 1px solid var(--color-rule); }
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .contact-form { padding: var(--space-lg); }
  .btn-submit { justify-self: stretch; }
  .footer-cols { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; }
  .hud { right: var(--space-md); bottom: var(--space-md); }
  .hud-text { display: none; }
  .legal-facts div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
}

/* Reduced motion: every transition and keyframe ends at once */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}