/* Montserrat, self-hosted so no visitor data goes to Google (latin subset from @fontsource/montserrat
   5.3.0, SIL Open Font License: assets/fonts/OFL.txt). Root-relative paths so tools/publish.py
   picks the files up. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/montserrat-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/montserrat-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/montserrat-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ==========================================================================
   ClaveloData brand tokens
   ========================================================================== */
:root {
  /* The six ClaveloData colors (design system tokens.json) */
  --clavelo-navy: #16365e;   /* ink and the dark ground */
  --clavelo-sky: #85d0ed;    /* graphics only on white */
  --clavelo-azure: #3ea5d1;  /* graphics only on white */
  --clavelo-teal: #1ab8d0;   /* graphics only on white */
  --clavelo-blue: #2380ba;   /* large or bold text only on white */
  --clavelo-royal: #0b63a4;  /* text-safe on white: links and accents */
  --clavelo-white: #ffffff;

  /* Semantic tokens: ink on surface, links in accent. Grounds are white or navy, shapes are flat */
  --bg: var(--clavelo-white);
  --bg-2: var(--clavelo-white);
  --panel: var(--clavelo-white);
  --panel-2: rgba(133, 208, 237, 0.22);   /* sky tint */
  --surface: var(--clavelo-white);         /* cards are white with a line border; tints stay for grounds */
  --ground-alt: #e7f6fc;                   /* alternate section ground: sky at 20% on white */
  --surface-2: var(--clavelo-white);
  --surface-hl: rgba(133, 208, 237, 0.16); /* sky tint for highlighted cards */
  --tint: rgba(133, 208, 237, 0.2);
  --line: rgba(22, 54, 94, 0.16);
  --line-strong: rgba(11, 99, 164, 0.4);
  --text: var(--clavelo-navy);
  --text-2: var(--clavelo-navy);
  --muted: rgba(22, 54, 94, 0.8);          /* navy, softened for secondary text (7.4:1) */
  --accent: var(--clavelo-royal);
  --accent-2: var(--clavelo-navy);
  --accent-3: var(--clavelo-royal);
  --good: var(--clavelo-royal);
  --bad: var(--clavelo-navy);
  --on-accent: var(--clavelo-white);
  --shadow: none;
  --glow: 0 0 0 1px var(--line-strong);

  --font-display: "Montserrat", system-ui, sans-serif;
  --font-brand: "Montserrat", system-ui, sans-serif;
  --font-sans: "Montserrat", system-ui, sans-serif;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 8px;
  --radius-icon: 8.8%;
  --max: clamp(1200px, 86vw, 1560px);
  --gutter: clamp(16px, 4vw, 32px);
}

/* Dark islands: navy bands and panels, plus the one featured card per section (navy cards stand
   out on white or sky grounds; never navy on navy) */
.dark {
  --bg: var(--clavelo-navy);
  --bg-2: var(--clavelo-navy);
  --panel: rgba(255, 255, 255, 0.06);
  --panel-2: rgba(255, 255, 255, 0.1);
  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.04);
  --surface-hl: rgba(133, 208, 237, 0.14);
  --tint: rgba(133, 208, 237, 0.14);
  --line: rgba(133, 208, 237, 0.2);
  --line-strong: rgba(133, 208, 237, 0.42);
  --text: var(--clavelo-white);
  --text-2: var(--clavelo-white);
  --muted: rgba(255, 255, 255, 0.82);
  --accent: var(--clavelo-sky);
  --accent-2: var(--clavelo-teal);
  --accent-3: var(--clavelo-teal);
  --good: var(--clavelo-teal);
  --bad: var(--clavelo-sky);
  --on-accent: var(--clavelo-navy);
  --shadow: none;
  --glow: 0 0 0 1px var(--line);
  color: var(--text-2);
  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
/* 15px root: Montserrat runs wide, so the whole rem scale sits a step below 16px */
html { font-size: 15px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


h1, h2, h3, h4 {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.15;
  font-weight: 600;
  margin: 0 0 0.5em;
  letter-spacing: -0.015em;
}
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1.12; }
h1 { font-weight: 700; }
h1 { font-size: clamp(34px, 5vw, 52px); }
h2 { font-size: clamp(26px, 3vw, 34px); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; letter-spacing: 0; }

p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }
img, svg { display: block; max-width: 100%; }
/* A clear focus ring for keyboard users everywhere (WCAG 2.4.7); sky on navy sections */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Smallest text is 0.8rem (12px on the 15px root) so labels stay readable */
/* One family everywhere, no italics (brand type rules) */
button, input, select, textarea, pre, code { font-family: inherit; }
em, i { font-style: normal; }

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

.grad { color: var(--accent); }

.label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--text-2); max-width: 560px; }
.muted { color: var(--muted); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 100; background: var(--panel); color: var(--text); padding: 8px 12px; border-radius: 8px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--clavelo-navy); color: var(--clavelo-white); }
.btn-primary:hover { color: var(--clavelo-white); background: var(--clavelo-royal); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--accent); color: var(--text); }
.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ==========================================================================
   Header
   ========================================================================== */
/* A full-width white bar pinned to the top with a thin line along the bottom. The negative bottom margin lets the first section start
   underneath it. */
.site-header {
  --hdr: 69px;
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 0 calc(-1 * var(--hdr));
  background: var(--clavelo-white);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 820px) {
  .site-header .nav-toggle { flex: none; }
  .site-header .wordmark .logo { height: 26px; }
}
@media (max-width: 420px) {
  .site-header .wordmark .logo { height: 22px; }
}
@media (max-width: 359px) {
  /* Smallest phones: a smaller logo and button so the menu fits */
  .site-header .header-inner { gap: 6px; }
  .site-header .wordmark .logo { height: 20px; }
  .site-header .header-cta { padding: 6px 8px; font-size: 0.8rem; }
  .site-header .nav-toggle { width: 40px; height: 40px; }
}
html { scroll-padding-top: 88px; }
main > section:first-child { padding-top: calc(80px + clamp(48px, 8vw, 104px)); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 24px; }

/* Logo: the supplied horizontal lockup (clavelodata-logo-horizontal from the design system), never
   retyped. Kept at 120px wide or more, the brand's smallest size for it */
.wordmark { display: inline-flex; align-items: center; flex: none; line-height: 0; }
.wordmark .logo { display: block; height: 30px; width: auto; }
/* Footer: the stacked lockup with the tagline */
.footer-grid .wordmark .logo { width: 240px; height: auto; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav a { color: var(--text-2); font-size: 0.95rem; font-weight: 600; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); }
.nav a[aria-current="page"]:not(.btn) { color: var(--accent); }
/* Current page: a small royal dot under the link */
@media (min-width: 821px) {
  .nav a:not(.btn) { position: relative; }
  .nav a[aria-current="page"]:not(.btn)::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--accent); }
}
.nav .btn { color: var(--clavelo-white); padding: 9px 16px; }
.nav .btn:hover { color: var(--clavelo-white); }
/* Phones keep "Book a call" in the header, next to the menu button */
.header-cta { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--text);
}

@media (max-width: 820px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 20px 20px;
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav .btn { display: none; }
  .header-inner { gap: 10px; }
  .header-cta { display: inline-flex; margin-left: auto; padding: 7px 12px; font-size: 0.82rem; white-space: nowrap; }
}

/* ==========================================================================
   Sections
   ========================================================================== */
section { padding: clamp(40px, 5vw, 64px) 0; position: relative; }
.section-head { max-width: 640px; margin-bottom: 44px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .label { justify-content: center; }
.section-head p { color: var(--text-2); font-size: 1.05rem; margin: 0; }
.divider { border-top: 1px solid var(--line); }

/* Hero */
.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 88px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
/* Hero chart: bars load jumbled and faded and sort into the shape of the logo's arrow (clarity),
   then the arrow itself sweeps in above them from tail to tip (velocity). The arrow is the logo's
   two-tone arrow in its slim cut (brand file clavelodata-arrow-slim), scaled without distortion;
   rebuild it and the bar heights with tools/build_hero_arrow.py (decisions 0013 and 0014). Plays once; shows the finished
   chart with reduced motion. */
.hero-visual { min-width: 0; justify-self: end; width: min(100%, 520px); }
.hero-chart { display: block; width: 100%; height: auto; overflow: visible; }
.hero-chart .base { stroke: var(--line-strong); stroke-width: 1.5; }
.hero-chart rect { transform-box: fill-box; transform-origin: bottom; animation: bar-sort 3s ease-in-out 0.3s both; }
.hero-chart .d { fill: var(--clavelo-royal); }
.hero-chart .l { fill: var(--clavelo-sky); }
/* Where each bar starts before it slides into order (offset and height) */
.hero-chart .b1 { --dx: 260px; --s: 6.93; }
.hero-chart .b2 { --dx: 52px; --s: 7.31; }
.hero-chart .b3 { --dx: 260px; --s: 0.68; }
.hero-chart .b4 { --dx: -156px; --s: 3.18; }
.hero-chart .b5 { --dx: 208px; --s: 0.14; }
.hero-chart .b6 { --dx: -104px; --s: 1.92; }
.hero-chart .b7 { --dx: 0px; --s: 0.27; }
.hero-chart .b8 { --dx: -312px; --s: 0.62; }
.hero-chart .b9 { --dx: -208px; --s: 0.19; }
.hero-chart .a-teal { fill: var(--clavelo-teal); }
.hero-chart .a-blue { fill: var(--clavelo-blue); }
/* Sweep: a left-to-right wipe follows the arrow up its diagonal. Opacity is the fallback for
   browsers without clip-path on SVG, so the arrow never shows before the bars settle. */
.hero-chart .logo-arrow { clip-path: inset(0 100% 0 0); opacity: 0; animation: arrow-sweep 1s cubic-bezier(.5, 0, .2, 1) 3.2s forwards; }
@keyframes bar-sort {
  0%, 32% { transform: translateX(var(--dx)) scaleY(var(--s)); opacity: 0.4; }
  62% { transform: translateX(var(--dx)) scaleY(1); opacity: 0.7; }
  100% { transform: none; opacity: 1; }
}
@keyframes arrow-sweep {
  0% { clip-path: inset(0 100% 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-chart rect { animation: none; }
  .hero-chart .logo-arrow { animation: none; clip-path: none; opacity: 1; }
}
@media (max-width: 1000px) {
  .hero-visual { justify-self: start; width: min(100%, 420px); }
}

/* Section bands alternate white and a pale sky ground so section breaks read. On the sky band,
   cards and boxes turn white so they keep their contrast */
.band-white { background: var(--clavelo-white); }
.band-tint { --surface: var(--clavelo-white); --surface-2: var(--clavelo-white); --panel-2: var(--clavelo-white); background: var(--ground-alt); }
.band-dark { background: var(--clavelo-navy); }
.band-dark h2 { color: var(--text); }
.dash-split { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.dash-split .section-head { margin-bottom: 0; }
.dash-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; }
.dash-points li { position: relative; padding-left: 22px; color: var(--text-2); }
.dash-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); opacity: 0.75; }
.dash-wrap { min-width: 0; max-width: 580px; justify-self: end; width: 100%; }
@media (max-width: 860px) { .dash-split { grid-template-columns: 1fr; } .dash-wrap { justify-self: stretch; } }
.hero h1 { margin-bottom: 20px; }
.hero-note { margin: 16px 0 0; font-size: 0.88rem; color: var(--muted); }
/* Two-column headline so "clarity" and "velocity" start at the same point */
.hero-title { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 0.25em; }
.hero-title > span { white-space: nowrap; }

/* Hero dashboard: an example weekly review an executive would read, on sample data */
.dash { --pad: 22px; margin: 0; padding: var(--pad); overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
/* Pause and play control for the homepage animations (dashboard and diagram) */
.motion-toggle { position: relative; display: inline-flex; align-items: center; gap: 6px; font: 600 0.8rem/1 var(--font-sans); letter-spacing: 0.02em; color: var(--text-2); background: var(--tint); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 5px 10px 5px 8px; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; }
.motion-toggle::after { content: ""; position: absolute; inset: -9px -6px; }
.motion-toggle svg { width: 8px; height: 8px; fill: currentColor; flex: none; }
.motion-toggle:hover { color: var(--text); border-color: var(--accent); }
.motion-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.motion-toggle[hidden] { display: none; }
.dash-slides { display: grid; touch-action: pan-y; }
/* Every slide sits in the same cell, so the card is as tall as the tallest one and never jumps */
.dash-slide { grid-area: 1 / 1; display: flex; flex-direction: column; transition: opacity 0.45s ease, visibility 0.45s; }
/* Shorter slides keep their "needs your attention" list at the bottom, so the card has no empty strip */
.dash-slide > .dash-insights-title { margin-top: auto; }
/* The chart takes any spare height, so every slide fills the card without a gap */
.dash-slide > .dash-chart { flex: 1; display: flex; flex-direction: column; }
.dash-plot { flex: 1; min-height: 110px; }
.dash-bars, .dash-table { flex: 1; }
.dash-bars { align-content: space-evenly; }
.dash-slide:not(.active) { opacity: 0; visibility: hidden; }
.dash-controls { display: flex; align-items: center; gap: 6px; margin: 0 calc(-1 * var(--pad)) calc(-1 * var(--pad)); padding: 6px var(--pad) 12px; background: var(--dash-foot); }
/* Named tabs above the slides, so readers see all four views up front */
.dash-controls { margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 16px; padding: 10px var(--pad); flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.dash-tab { padding: 5px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--clavelo-white); font: 600 0.8rem/1.2 var(--font-sans); color: var(--text-2); cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.dash-tab:hover { border-color: var(--line-strong); color: var(--text); }
.dash-tab[aria-pressed="true"] { background: var(--clavelo-navy); border-color: var(--clavelo-navy); color: var(--clavelo-white); }
.dash-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 480px) { .dash-controls { gap: 4px; } .dash-tab { padding: 5px 8px; } .dash-controls .motion-toggle .motion-label { display: none; } }
.dash-controls .motion-toggle { margin-left: auto; color: var(--text-2); }
@media (prefers-reduced-motion: reduce) { .dash-slide { transition: none; } }
/* Each slide: title, a one-line headline that says what matters, three KPIs with a trend or
   goal, one chart, then what to do about it with the money involved. Marks follow the dataviz
   rules: one hue plus emphasis, hairline solid grid, 2px lines, rounded data ends, direct labels.
   Status uses brand colors told apart by lightness (good royal, warn sky, bad navy) and always
   comes with an arrow, icon or label, never color alone. */
/* The sample dashboard is an example of a client's tool, so it uses ordinary status colors
   (decided Oct 12): green good, amber warning, red bad, each with an arrow, icon or label */
.dash { --dash-top: var(--clavelo-navy); --dash-foot: var(--clavelo-white); --good: #0f9f6e; --good-ink: #0b7a55; --bad: #d4466a; --bad-ink: #b8304f; --warn: #b7791f; --warn-ink: #8a5a12; --grid: rgba(22, 54, 94, 0.08); }
/* Three zones: a tinted header (title and headline), the numbers on white, and a light footer
   with the actions and the slide controls */
.dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0; padding: 16px var(--pad) 0; background: var(--dash-top); }
.dash-head, .dash-lede { --text: var(--clavelo-white); --muted: rgba(255, 255, 255, 0.82); --line: rgba(133, 208, 237, 0.24); }
.dash-title { margin: 0; font-family: var(--font-sans); font-size: 0.98rem; font-weight: 600; letter-spacing: -0.005em; color: var(--text); }
.dash-sub { margin: 2px 0 0; font-size: 0.8rem; color: var(--muted); }
.dash-tag { flex: none; font-size: 0.8rem; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid rgba(133, 208, 237, 0.5); border-radius: var(--radius-sm); padding: 3px 9px; }
.dash-lede { margin: 0 calc(-1 * var(--pad)) 16px; padding: 8px var(--pad) 14px; border-bottom: 1px solid var(--line); background: var(--dash-top); font-size: 0.9rem; font-weight: 600; line-height: 1.4; color: var(--text); }
.dash-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 18px; }
.dash-kpis > div { position: relative; min-width: 0; padding: 0 12px; border-left: 1px solid var(--line); }
.dash-kpis > div:first-child { padding-left: 0; border-left: 0; }
.dash-kpis dt { font-size: 0.8rem; color: var(--muted); }
.dash-kpis dd { margin: 0; }
.dash-val { font-size: 1.45rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--text); }
.dash-delta { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.dash-delta.up { color: var(--good-ink); }
.dash-delta.down { color: var(--bad-ink); font-weight: 700; }
.dash-spark { display: block; width: 64px; height: 20px; margin-top: 6px; overflow: visible; }
.dash-spark polyline { fill: none; stroke: var(--clavelo-azure); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.dash-spark circle { fill: var(--accent); stroke: var(--bg-2); stroke-width: 1.5; }
.dash-meter { position: relative; display: block; height: 6px; margin-top: 12px; margin-right: 6px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); }
.dash-meter > span { display: block; height: 100%; border-radius: 99px; background: var(--accent); }
.dash-meter i { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); }
.dash-chart { margin-bottom: 18px; }
.dash-chart-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.dash-section-title { margin: 0; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); text-align: left; }
.dash-legend { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 0.8rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.dash-legend .key { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--accent); }
.dash-legend .key.plan { margin-left: 8px; border-top: 1.5px dashed var(--muted); }
.dash-legend .key.flag { width: 10px; height: 10px; border: 0; border-radius: 2px; background: var(--warn); }
.dash-legend .key.be { width: 0; height: 12px; border-top: 0; border-left: 1px solid var(--text); opacity: 0.6; }
/* Line chart: lines in an SVG that stretches, labels in HTML so text never stretches */
.dash-plot { position: relative; margin: 0 58px 0 40px; }
.dash-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dash-plot .grid line { stroke: var(--grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.dash-plot .area { fill: color-mix(in srgb, var(--accent) 10%, transparent); }
.dash-plot .actual { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.dash-plot .plan { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.dash-yticks span { position: absolute; left: -40px; width: 34px; transform: translateY(-50%); font-size: 0.8rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.dash-xticks { position: relative; height: 16px; margin: 6px 58px 0 40px; }
.dash-xticks span { position: absolute; top: 0; transform: translateX(-50%); font-size: 0.8rem; color: var(--muted); }
.dash-end { position: absolute; left: 100%; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg-2); }
.dash-end-label { position: absolute; left: 100%; margin-left: 9px; transform: translateY(-50%); font-size: 0.8rem; font-weight: 600; color: var(--text); white-space: nowrap; }
/* Horizontal bars (pipeline): one hue, the stage that needs attention in the warning color */
.dash-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.dash-bars li { display: grid; grid-template-columns: 84px minmax(0, 1fr) 118px; gap: 10px; align-items: center; font-size: 0.8rem; }
.dash-stage { color: var(--text-2); }
.dash-bar span { display: block; height: 12px; min-width: 4px; border-radius: 0 4px 4px 0; background: var(--clavelo-azure); }
.dash-bars li.won .dash-bar span { background: var(--accent); }
.dash-bars li.flag .dash-bar span { background: var(--warn); }
.dash-bar-val { display: flex; gap: 6px; align-items: baseline; justify-content: flex-end; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-bar-val b { font-size: 0.8rem; font-weight: 600; color: var(--text); }
/* Tables with an in-cell bar (channels, accounts) */
.dash-table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.dash-table th, .dash-table td { padding: 6px 0; text-align: left; font-weight: 400; color: var(--text-2); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.dash-table thead th { padding-top: 0; font-size: 0.8rem; color: var(--muted); }
.dash-table tbody th { color: var(--text); font-weight: 600; }
.dash-table tbody tr:last-child > * { border-bottom: 0; }
.dash-table td:nth-child(2) { width: 58px; color: var(--muted); }
.dash-table td:last-child, .dash-table thead th:last-child { width: 48%; }
.dash-roi { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.dash-roi b { text-align: right; color: var(--text); font-weight: 600; }
.dash-roi-bar { position: relative; display: block; }
.dash-roi-bar > span { display: block; height: 10px; border-radius: 0 4px 4px 0; background: var(--accent); }
.dash-3 .dash-roi-bar::before { content: ""; position: absolute; left: 37.14%; top: -9px; bottom: -9px; width: 1px; background: var(--text); opacity: 0.5; }
.dash-table tr.neg .dash-roi-bar > span { background: var(--bad); }
.dash-table tr.neg b { color: var(--bad-ink); }
.dash-roi-bar.risk { border-radius: 0 4px 4px 0; background: rgba(212, 70, 106, 0.12); }
.dash-roi-bar.risk > span { background: var(--bad); }
/* What needs your attention: status icon, the finding, and the money or rate it's worth */
.dash-insights-title { margin: 0 calc(-1 * var(--pad)); padding: 14px var(--pad) 4px; border-top: 1px solid var(--line); background: var(--dash-foot); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); }
.dash-insights { list-style: none; margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad); background: var(--dash-foot); }
.dash-insights li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.dash-insights li:last-child { border-bottom: 0; }
.dash-insights p { margin: 0; font-size: 0.84rem; line-height: 1.45; color: var(--text-2); }
.dash-insights p b { color: var(--text); font-weight: 600; }
.dash-icon { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: 0.8rem; font-weight: 700; color: var(--clavelo-white); }
.dash-insights .bad .dash-icon { background: var(--bad); }
.dash-insights .warn .dash-icon { background: var(--warn); }
.dash-insights .good .dash-icon { background: var(--good); }
.dash-impact { display: flex; align-items: baseline; justify-content: flex-end; gap: 5px; min-width: 64px; white-space: nowrap; font-size: 0.8rem; line-height: 1.3; color: var(--muted); text-align: right; }
.dash-impact b { font-size: 0.92rem; font-weight: 600; color: var(--text); white-space: nowrap; }
@media (max-width: 480px) {
  .dash-lede { font-size: 0.8rem; }
  .dash-kpis > div { padding: 0 8px; }
  .dash-val { font-size: 1.1rem; }
  .dash-spark { width: 100%; max-width: 64px; }
  .dash-delta { font-size: 0.8rem; }
  .dash-bars li { grid-template-columns: 82px minmax(0, 1fr) 52px; gap: 8px; }
  .dash-bar-val span { display: none; }
  .dash-bar-val { font-size: 0.8rem; }
  .dash-table td:nth-child(2) { width: 44px; }
  .dash-impact { min-width: 52px; }
}

/* Homepage close: which of these sounds like you? Light, so it doesn't sit dark against the diagram */
.fit h2 { margin: 6px 0 24px; }
/* Three side-by-side tiles: the situation on top, the service to start with at the bottom */
.fit-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fit-list li { display: flex; }
.fit-list a { flex: 1; display: flex; flex-direction: column; gap: 24px; padding: 26px 24px 22px; border-radius: var(--radius-lg); border-top: 4px solid var(--tone-fit); background: color-mix(in srgb, var(--tone-fit-wash, var(--tone-fit)) 8%, var(--bg-2)); color: inherit; transition: background 0.2s; }
.fit-1 { --tone-fit: var(--clavelo-sky); }
.fit-2 { --tone-fit: var(--clavelo-royal); }
.fit-3 { --tone-fit: var(--clavelo-navy); --tone-fit-wash: var(--clavelo-royal); }
.fit-q { font-family: var(--font-display); font-size: clamp(1.15rem, 1.6vw, 1.35rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--text); }
.fit-a { margin-top: auto; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--tone-fit-wash, var(--tone-fit)) 25%, transparent); }
.fit-a small { display: block; margin-bottom: 4px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.fit-a b { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.fit-list a:hover { background: color-mix(in srgb, var(--tone-fit-wash, var(--tone-fit)) 14%, var(--bg-2)); }
.fit-list a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 900px) {
  .fit-list { grid-template-columns: 1fr; gap: 12px; }
  .fit-list a { gap: 16px; padding: 20px 18px 18px; }
}
/* Homepage close: one line and the two next steps */
.fit-close { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--clavelo-navy); color: var(--clavelo-white); }
.fit-close h2 { margin: 0 0 6px; }
.fit-close p { margin: 0; }
.fit-close .btn-row { margin: 0; }
/* Call-to-action boxes are contained navy cards (not full-width bands): white text (12.2:1), a white
   primary button, an outlined second */
.fit-close h2, .cta h2, .fit-close p, .cta p { color: var(--clavelo-white); }
.fit-close a:not(.btn), .cta a:not(.btn) { color: var(--clavelo-white); text-decoration: underline; text-underline-offset: 3px; }
.fit-close .btn-primary, .cta .btn-primary { background: var(--clavelo-white); color: var(--clavelo-navy); }
.fit-close .btn-primary:hover, .cta .btn-primary:hover { background: var(--clavelo-sky); color: var(--clavelo-navy); }
.fit-close .btn-ghost, .cta .btn-ghost { border-color: rgba(255, 255, 255, 0.7); color: var(--clavelo-white); background: transparent; }
.fit-close .btn-ghost:hover, .cta .btn-ghost:hover { border-color: var(--clavelo-white); background: rgba(255, 255, 255, 0.12); color: var(--clavelo-white); }
.fit-cta { margin-top: 28px; }
.fit-cta .btn-row { margin-top: 0; }
.fit-cta p { margin: 0; max-width: 52ch; color: var(--text-2); }

@media (max-width: 420px) {
  .dash { --pad: 16px; }
}

/* Homepage: many sources in, one set of answers out. Columns joined by animated lines on wide
   screens (drawn by home.js); a top-to-bottom stack joined by CSS lines on phones */
/* Lineage diagram, open on a white section: quiet sources and outputs, and the two things we build
   (warehouse, definitions) as solid navy boxes, so the eye lands on them */
.fg { position: relative; container-type: inline-size; padding: 8px 0 0; }
.fg-pause { position: absolute; top: 16px; right: 16px; z-index: 2; }
.fg-title { margin: 0 0 22px; padding-right: 90px; font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; letter-spacing: 0; color: var(--text); }
.fg-head, .fg-graph { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.05fr) minmax(0, 1.15fr); column-gap: clamp(28px, 5vw, 72px); }
.fg-head { margin-bottom: 14px; }
.fg-head span { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); text-align: center; }
.fg-head .fg-head-build { grid-column: span 2; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); }
.fg-graph { position: relative; align-items: center; }
.fg-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fg-edges path { fill: none; stroke-width: 1.5; }
.fg-edges .edge { stroke: rgba(11, 99, 164, 0.3); }
.fg-edges .flow { stroke: var(--clavelo-teal); stroke-dasharray: 3 11; opacity: 0.9; animation: fg-flow 1.1s linear infinite; }
.fg-edges .ctx.edge { stroke-dasharray: 4 4; }
@keyframes fg-flow { to { stroke-dashoffset: -14; } }
.fg.paused .fg-edges .flow, .fg.paused .fg-link::after { animation-play-state: paused; }
.fg-col { position: relative; z-index: 1; min-width: 0; }
.fg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fg-node { display: flex; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); color: var(--text); font-size: 0.86rem; line-height: 1.3; text-decoration: none; }
.fg-node small { display: block; margin-top: 2px; font-size: 0.8rem; color: var(--text-2); }
.fg-node.ctx { border-style: dashed; border-color: color-mix(in srgb, var(--accent-3) 40%, transparent); }
a.fg-node { transition: border-color 0.2s, background 0.2s; }
a.fg-node:hover { border-color: var(--accent); background: var(--panel-2); color: var(--text); }
a.fg-node:focus-visible { outline: 2px solid var(--accent-3); outline-offset: 2px; }
.fg-icon { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--radius-icon); background: var(--tint); color: var(--accent); }
.fg-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fg-node.ctx .fg-icon { color: var(--accent-3); }
.fg-icon { background: rgba(133, 208, 237, 0.28); color: var(--clavelo-royal); }
.fg-node.hub { gap: 12px; padding: 20px 18px; border: 0; background: var(--clavelo-navy); color: var(--clavelo-white); font-size: 1rem; font-weight: 600; }
.fg-node.hub small { font-weight: 400; color: rgba(255, 255, 255, 0.85); }
.fg-node.hub .fg-icon { background: var(--clavelo-sky); color: var(--clavelo-navy); }
.fg-node.hub .fg-icon { width: 40px; height: 40px; }
.fg-node.hub .fg-icon svg { width: 22px; height: 22px; }
.fg-link { display: none; }
.fg-own { margin: 22px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.84rem; color: var(--text-2); }
.fg-own b { margin-right: 6px; color: var(--accent); font-weight: 600; }
/* On the navy section, like the pre-brand site: a lighter panel, solid navy boxes that read darker
   inside it with white text, and the two hubs in white as the focal point */
.dark .fg { padding: 28px 32px 20px; border: 1px solid rgba(133, 208, 237, 0.22); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.06); }
.dark .fg-node { background: var(--clavelo-navy); border-color: rgba(133, 208, 237, 0.2); color: var(--clavelo-white); }
.dark .fg-node small { color: rgba(255, 255, 255, 0.85); }
.dark .fg-icon { background: rgba(133, 208, 237, 0.16); color: var(--clavelo-sky); }
.dark .fg-node.hub { background: rgba(133, 208, 237, 0.2); border: 1px solid rgba(133, 208, 237, 0.55); color: var(--clavelo-white); }
.dark .fg-node.hub small { color: rgba(255, 255, 255, 0.88); }
.dark .fg-node.hub .fg-icon { background: var(--clavelo-sky); color: var(--clavelo-navy); }
.dark .fg-edges .edge { stroke: rgba(133, 208, 237, 0.35); }
@media (max-width: 680px) { .dark .fg { padding: 18px 14px 14px; } }
/* Phones and narrow panels: one stage under another, joined by a flowing vertical line */
@container (max-width: 700px) {
  .fg-head, .fg-edges { display: none; }
  .fg-graph { display: flex; flex-direction: column; align-items: stretch; }
  .fg-title { padding-right: 0; margin-top: 30px; }
  .fg-col[data-label]::before { content: attr(data-label); display: block; width: max-content; margin: 0 auto 10px; padding: 3px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--clavelo-white); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
  .dark .fg-col[data-label]::before { background: var(--clavelo-navy); }
  .fg-group { padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
  .fg-group[data-label]::before { margin-top: -24px; }
  .fg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .fg-node { height: 100%; padding: 7px 8px 7px 7px; gap: 8px; font-size: 0.8rem; }
  .fg-node small { font-size: 0.8rem; }
  .fg-icon { width: 26px; height: 26px; }
  .fg-icon svg { width: 14px; height: 14px; }
  .fg-node.hub { max-width: 340px; margin-inline: auto; }
  .fg-link { display: block; position: relative; height: 34px; }
  .fg-link::before, .fg-link::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 0; transform: translateX(-50%); border-left: 1.5px solid var(--line-strong); }
  .fg-link::after { border-left: 0; width: 1.5px; background: repeating-linear-gradient(to bottom, var(--accent-3) 0 3px, transparent 3px 14px); background-size: 1.5px 14px; opacity: 0.7; animation: fg-drop 1.1s linear infinite; }
  .fg-group + .fg-link { margin-top: 0; }
  .fg-link + .fg-group { margin-top: 14px; }
}
@container (max-width: 520px) {
  /* Outputs carry a second line, so they get the full width; sources stay two across */
  .fg-group:not(:first-of-type) .fg-list { grid-template-columns: 1fr; }
}
@container (max-width: 300px) {
  .fg-list { grid-template-columns: 1fr; }
}
@keyframes fg-drop { from { background-position: 0 0; } to { background-position: 0 14px; } }

@media (prefers-reduced-motion: reduce) {
  .fg-edges .flow, .fg-link::after { animation: none; }
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-2);
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.dark .chip { font-size: 0.8rem; background: var(--tint); }

.page-hero { padding: clamp(56px, 8vw, 96px) 0 clamp(32px, 5vw, 56px); overflow: hidden; }
.page-hero h1 { font-size: clamp(32px, 4.6vw, 48px); max-width: 16ch; }

/* ==========================================================================
   Stats strip
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--text); border-bottom: 1px solid var(--line); }
.stat { padding: 24px 28px 24px 0; }
.stat + .stat { padding-left: 28px; border-left: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: center; }
.stat-num { margin-bottom: 0 !important; font-family: var(--font-display); font-size: clamp(2.6rem, 4.5vw, 3.6rem); font-weight: 600; line-height: 1; color: var(--text); letter-spacing: -0.02em; margin-bottom: 10px; }
.stat-num span { color: var(--muted); }
.stat p { margin: 0; font-size: 0.93rem; }
.nowrap { white-space: nowrap; }
.stat-src { display: inline-block; margin-left: 2px; padding: 0 4px; border-radius: 4px; color: var(--accent); font-size: 0.9em; text-decoration: none; }
.stat-src:hover { background: var(--tint); }
.stat-src:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ==========================================================================
   Data stack diagram
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }

/* Whatever section follows the stats strip sits closer to it */
.approach-intro { grid-template-columns: 1fr 1.05fr; align-items: stretch; gap: 0 56px; margin-bottom: 40px; }
/* The heading gets its own row, so the paragraph and the checkmarks start level beneath it */
.approach-intro > div { display: contents; }
.approach-intro h2 { margin: 0; grid-column: 1; grid-row: 1; }
@media (max-width: 680px) { .approach-intro { margin-bottom: 32px; } }

/* ==========================================================================
   Bento service grid
   ========================================================================== */
.tile {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
  color: var(--text-2);
  transition: border-color 0.25s, transform 0.25s;
}
.tile:hover { border-color: var(--tone, var(--accent)); color: var(--text-2); }
.tile.static:hover { transform: none; border-color: var(--line); }
.tile.static.feature:hover { border-color: var(--line); }
.tile .mini-list { margin: 4px 0 18px; }
.tile.wide { grid-column: span 3; }
.tile.full { grid-column: 1 / -1; }

/* Context layer: a metric with the notes, calls, and threads linked to it */

.tile.feature { grid-column: span 3; grid-row: span 2; }
/* The assessment is the offer most clients start with: the pitch and a button on the left, what
   it covers on the right */
.stage-grid > .tile.feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 56px; align-items: center; padding: clamp(24px, 3.5vw, 40px); border: 1px solid color-mix(in srgb, var(--tone-wash, var(--tone)) 45%, transparent); }
.offer-main .btn { margin-top: 8px; }
/* Icon and "Where most clients start" sit on one row, the label as a small pill */
.offer-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.tile.feature .offer-top .icon, .tile .offer-top .icon { margin: 0; }
.tile .offer-top .kicker { margin: 0; padding: 5px 12px; border-radius: 99px; background: color-mix(in srgb, var(--tone-wash, var(--tone)) 22%, var(--clavelo-white)); }
.tile.feature .offer-list { margin: 0; padding-left: clamp(0px, 3vw, 40px); border-left: 1px solid var(--line); }
@media (max-width: 760px) { .stage-grid > .tile.feature { grid-template-columns: 1fr; } .tile.feature .offer-list { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); } }
/* Services hero: the eight service icons as a mosaic beside the title */
.hero-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.svc-mosaic { display: grid; grid-template-columns: repeat(4, 72px); gap: 14px; justify-content: end; }
.svc-mosaic span { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-icon); color: var(--tone-on, var(--clavelo-white)); background: var(--tone); }
.svc-mosaic span:nth-child(-n+4) { transform: translateX(-43px); }
.svc-mosaic svg { width: 30px; height: 30px; }
@media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; } .svc-mosaic { display: none; } }
main > section.svc-hero:first-child { padding-top: calc(80px + clamp(36px, 5vw, 64px)); padding-bottom: 36px; }


/* Each service gets its own accent: a colored top edge, icon chip, and kicker */
/* Tones are the mark's blues and navy. --tone fills shapes; --tone-ink is the text-safe pair
   (royal for the light blues, navy for navy), since only navy and royal are body-text safe on white */
.tile { --tone: var(--accent); }
.tile, .stage, .familiar-card, .stage-bar li, .stage-group { --tone-ink: var(--clavelo-royal); --tone-on: var(--clavelo-white); }
.tone-blue { --tone: var(--clavelo-azure); --tone-ink: var(--clavelo-royal); --tone-on: var(--clavelo-navy); }
.tone-indigo { --tone: var(--clavelo-royal); --tone-ink: var(--clavelo-royal); --tone-on: var(--clavelo-white); }
.tone-cyan { --tone: var(--clavelo-teal); --tone-ink: var(--clavelo-royal); --tone-on: var(--clavelo-navy); }
.tone-green, .tone-amber, .tone-rose { --tone: var(--clavelo-navy); --tone-ink: var(--clavelo-navy); --tone-wash: var(--clavelo-royal); --tone-on: var(--clavelo-white); }
.tone-violet, .tone-teal { --tone: var(--clavelo-blue); --tone-ink: var(--clavelo-royal); --tone-on: var(--clavelo-white); }
.tile[class*="tone-"]::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tone); }
.tile .icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-icon); color: var(--tone-on, var(--clavelo-white)); background: var(--tone); margin-bottom: 18px; }
.tile .icon svg { width: 22px; height: 22px; }
.tile h3 { margin-bottom: 8px; }
.tile p { margin: 0 0 18px; font-size: 0.95rem; }
.tile .meta { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px; }
.tile .kicker { font-family: var(--font-sans); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tone, var(--accent)); margin-bottom: 10px; }
.tile.feature h3 { font-family: var(--font-display); font-weight: 600; font-size: 2rem; letter-spacing: -0.02em; }
.tile.feature .big-price { font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; color: var(--tone); letter-spacing: 0; margin: 0 0 12px; }
.mini-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; font-size: 1rem; }
.mini-list li { display: flex; gap: 10px; }
.mini-list li::before { content: "✓"; color: var(--tone, var(--accent)); font-weight: 600; }

/* ==========================================================================
   Feature row (why us / guardrails)
   ========================================================================== */
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature {
  padding: 24px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.feature .num { font-size: 0.8rem; color: var(--accent); margin-bottom: 16px; display: block; }
.feature .icon { width: 36px; height: 36px; color: var(--accent); margin-bottom: 16px; }
.tile.feature .icon { width: 40px; height: 40px; margin-bottom: 18px; }
.feature h3 { font-size: 1.1rem; margin-bottom: 6px; }
.feature p { margin: 0; font-size: 0.92rem; }

/* Industry chips */

.industry {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
  color: var(--text-2);
  transition: border-color 0.2s;
}
.industry:hover { border-color: var(--accent); color: var(--text-2); }
.industry .icon { width: 28px; height: 28px; color: var(--accent); }
.industry h3 { font-size: 1.05rem; margin: 0; }
.industry p { margin: 0; font-size: 0.88rem; }

/* ==========================================================================
   Method stepper
   ========================================================================== */
.stepper { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.step-tabs { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line); }
.step-tab {
  all: unset;
  cursor: pointer;
  padding: 18px 12px;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--muted);
  border-right: 1px solid var(--line);
  position: relative;
  transition: color 0.2s, background 0.2s;
}
.step-tab:last-child { border-right: 0; }
.step-tab .n { display: block; font-size: 0.8rem; font-weight: 400; margin-bottom: 4px; }
.step-tab:hover { color: var(--text); }
.step-tab[aria-selected="true"] { color: var(--text); background: var(--tint); }
.step-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); }
.step-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.step-panel { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding: 36px; }
.step-panel[hidden] { display: none; }
.step-panel h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; }
.step-panel p { margin: 0; font-size: 1.02rem; }
.step-out { border-left: 1px solid var(--line); padding-left: 32px; }
.step-out .k, .step-q .k { font-family: var(--font-sans); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; display: block; }
.step-out .v { color: var(--text); margin-bottom: 20px; }
.step-out .v:last-child { margin-bottom: 0; }
.step-out .mini-list { color: var(--text-2); }

/* Tier toggle */

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

/* Workflow diagram */
.flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; align-items: stretch; }
@keyframes flowline { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ==========================================================================
   Services page detail cards
   ========================================================================== */

.svc {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.svc.hl { border-color: var(--line-strong); box-shadow: var(--glow); }
.svc .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.svc .icon { width: 40px; height: 40px; border-radius: var(--radius-icon); display: grid; place-items: center; background: var(--tint); color: var(--accent); border: 1px solid var(--line); }
.svc .icon svg { width: 20px; height: 20px; }
.svc h3 { margin-bottom: 6px; }
.svc .price { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin: 14px 0 2px; }
.svc .dur { font-size: 0.8rem; color: var(--muted); margin-bottom: 18px; }
.svc > p { font-size: 0.95rem; }
.svc .mini-list { margin-bottom: 0; }

/* Industries page */

/* ==========================================================================
   About
   ========================================================================== */
.about-top { padding-top: clamp(40px, 6vw, 72px); }
.bio { max-width: 62ch; margin-top: 8px; }
.bio-links { margin: 4px 0 0; font-weight: 600; }
.bio p { margin: 0 0 1em; }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta {
  position: relative;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 72px);
  text-align: center;
  border: 0;
  background: var(--clavelo-navy);
  color: var(--clavelo-white);
  overflow: hidden;
}
.cta > * { position: relative; }
.cta h2 { max-width: 24ch; margin-inline: auto; }
.cta p { max-width: 520px; margin: 0 auto; font-size: 1.05rem; }
.cta .btn-row { justify-content: center; }

/* ==========================================================================
   Forms
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
/* Contact page: booking sits beside the title so the calendar is in view without scrolling */
main > section.contact-top:first-child { padding-bottom: 32px; }
/* Compact page header (Why us, About): a short tinted band, then straight into the content */
main > section.page-hero.compact:first-child { padding-top: calc(80px + clamp(32px, 4.5vw, 56px)); padding-bottom: 28px; }
.page-hero.compact h1 { max-width: none; margin-bottom: 10px; }
.page-hero.compact .lead { max-width: 720px; margin-bottom: 0; }
.page-hero.compact + section { padding-top: clamp(32px, 4vw, 48px); }
/* About opens on white, so the title flows straight into the founder card */
.page-hero.compact.band-white + section { padding-top: 8px; }
/* Why us: the header is a contained navy box on white, not a full-width band */
main > section.why-hero:first-child { padding-bottom: 0; }
.why-hero-box { padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px); border-radius: var(--radius-lg); background: var(--clavelo-navy); }
.why-hero-box .lead { color: var(--clavelo-white); }
.contact-top-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact-intro { position: sticky; top: 104px; }
.contact-intro h1 { font-size: clamp(32px, 4.4vw, 44px); margin-bottom: 14px; }
.contact-intro .lead { margin-bottom: 24px; }
/* The button is for phones, which don't get the embedded calendar */
.book-head { padding: 22px; margin-bottom: 24px; border-radius: var(--radius); background: var(--panel-2); }
.next-steps { margin-top: 8px; }
.next-steps .label { display: block; margin-bottom: 14px; }
/* Desktop: heading and a short line on the left, the form on the right */
.contact-form-wrap { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact-form-wrap .section-head { margin: 0; }
@media (max-width: 1000px) { .contact-form-wrap { grid-template-columns: 1fr; } }
.book-head h2 { margin: 0 0 4px; font-size: 1.35rem; }
.book-head p { margin: 0 0 16px; color: var(--text-2); }
.to-message { margin: 18px 0 0; font-weight: 600; }
.to-message a { color: var(--accent); }
/* Tall enough for Google's whole scheduler, so the page scrolls rather than the box */
.booking-wrap { position: relative; border-radius: var(--radius); background: var(--clavelo-white); box-shadow: var(--shadow); }
.booking-loading { position: absolute; top: 120px; left: 0; right: 0; margin: 0; text-align: center; font-weight: 600; color: var(--text-2); }
.booking-wrap.loaded .booking-loading { display: none; }
.booking-alt { margin: 0; padding: 12px 20px 16px; border-top: 1px solid var(--line); text-align: center; font-size: 0.9rem; color: var(--text-2); }
.booking-alt a { color: var(--accent); font-weight: 600; }
.booking { position: relative; display: block; width: 100%; height: 1080px; border: 0; border-radius: var(--radius); background: transparent; }
@media (max-width: 1000px) { .contact-top-grid { grid-template-columns: 1fr; } .contact-intro { position: static; } }
/* The "Open the calendar" button shows on every screen, so booking works even when the embed is
   blocked or fails to load. Phones and tablets get only the button: Google's embedded scheduler
   doesn't take taps reliably */
@media (max-width: 1000px) { .booking-wrap { display: none; } }
@media (max-width: 680px) { .book-head .btn { width: 100%; justify-content: center; } }
.form-card { padding: 32px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.form-status { margin: 10px 0 0; min-height: 1.4em; font-size: 0.9rem; color: var(--good); }
.form-status.bad { color: var(--bad); font-weight: 600; }
/* Inline errors under each field; the text says what's wrong, so color isn't the only cue */
.field-error { margin: 6px 0 0; font-size: 0.85rem; font-weight: 600; color: #b8304f; }
.field-error::before { content: "! "; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #b8304f; }
/* Invisible Turnstile takes no space; if it ever asks for a click, its box shows here */
.turnstile:not(:empty) { margin: 0 0 12px; }
.req { color: var(--accent); font-weight: 600; }
.opt { font-weight: 400; color: var(--muted); }
.form-legend { margin: 0 0 4px; font-size: 0.82rem; color: var(--muted); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form { display: grid; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row.form-row-single { grid-template-columns: 1fr; }
label { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 0.85rem; color: var(--text); margin-bottom: 8px; }
input, select, textarea {
  width: 100%;
  font: inherit;
  font-size: 0.98rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
select option { background: var(--bg-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
textarea { min-height: 120px; resize: vertical; }
.timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.timeline li { position: relative; padding: 0 0 24px 36px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: attr(data-n); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--accent); color: var(--accent); font-size: 0.8rem; display: grid; place-items: center; }
.timeline li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: 28px; bottom: 4px; width: 1px; background: var(--line-strong); }
.timeline b { color: var(--text); display: block; }
.timeline span { font-size: 0.92rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
/* A pale sky band with the navy stacked logo, so it reads apart from the white header without
   adding another navy block */
.site-footer { background: var(--clavelo-navy); padding: 56px 0 32px; font-size: 0.92rem; }
.site-footer .legal-links a:hover, .footer-grid a:hover { color: var(--clavelo-sky); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-grid > div { min-width: 0; }
.site-footer a[href^="mailto:"] { overflow-wrap: anywhere; }
.footer-grid h2 { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--text-2); }
.footer-grid a:hover { color: var(--accent-2); }
.footer-bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; color: var(--muted); font-size: 0.85rem; }
.footer-note { margin: 14px 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.5; }

/* ==========================================================================
   Scroll reveal (only when JS is running)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .hero-grid, .split { grid-template-columns: 1fr; gap: 44px; }
  .approach-intro { row-gap: 0; }
  .tile, .tile.wide { grid-column: span 1; }
  .tile.feature { grid-column: span 2; grid-row: auto; }
  .tile.full { grid-column: 1 / -1; }
  .features { grid-template-columns: repeat(2, 1fr); }
  .step-tabs { grid-template-columns: repeat(4, 1fr); }
  .step-tab:nth-child(4) { border-right: 0; }
  .step-tab:nth-child(-n+4) { border-bottom: 1px solid var(--line); }
  .flow { grid-template-columns: 1fr; gap: 20px; }
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .stats { grid-template-columns: 1fr; }
  .stat, .stat + .stat { border-left: 0; border-bottom: 1px solid var(--line); padding: 20px 0; }
  .stat:last-child { border-bottom: 0; }
  .features, .form-row, .footer-grid { grid-template-columns: 1fr; }
  .tile.feature { grid-column: span 1; }
  .step-tabs { grid-template-columns: repeat(4, 1fr); }
  .step-tab { padding: 14px 4px; font-size: 0.8rem; }
  .step-panel { grid-template-columns: 1fr; padding: 24px; gap: 24px; }
  .step-out { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 20px; }
}

/* Founder headshot sits over the initials fallback */

/* ==========================================================================
   Approach: build order, upgrade path, trust boundary
   ========================================================================== */
.build-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: none; }
.build-steps li { display: grid; grid-template-columns: auto 1fr; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.build-steps .n { font-size: 0.8rem; color: var(--accent); padding-top: 3px; }
.build-steps h4 { margin: 0 0 6px; }
.build-steps p { margin: 0; font-size: 0.9rem; }
.build-steps li:nth-child(3) { border-color: var(--line-strong); background: var(--surface-hl); }

.up-k { display: block; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.upgrade { display: grid; gap: 14px; }
.up-cell small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted); margin-top: 3px; }
.up-tiers { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 14px; }
.up-rowlabels { display: grid; grid-template-rows: 48px repeat(4, 1fr); gap: 10px; padding: 18px 0; }
.up-rowlabels span { align-self: center; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.up-rowlabels span:nth-child(1) { grid-row: 2; }
.up-rowlabels span:nth-child(2) { grid-row: 3; }
.up-rowlabels span:nth-child(3) { grid-row: 4; }
.up-rowlabels span:nth-child(4) { grid-row: 5; }
.up-tier { display: grid; grid-template-rows: 48px repeat(4, 1fr); gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.up-tier h3 { margin: 0; font-size: 1.05rem; align-self: center; }
.up-tier h3 small { display: block; font-size: 0.8rem; font-weight: 400; color: var(--muted); margin-top: 2px; }
.up-cell { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); color: var(--text); font-size: 0.92rem; font-weight: 600; text-align: center; }
.up-cell.none { border-style: dashed; color: var(--muted); font-weight: 400; background: transparent; }
.up-cell.hl { border-color: var(--accent); background: var(--surface-hl); }
.up-cell.hl small { color: var(--accent); }
.up-note { max-width: 70ch; margin: 6px 0 0; font-size: 0.92rem; color: var(--text-2); }
.up-note b { color: var(--text); }

.boundary { position: relative; display: grid; grid-template-columns: 1fr auto 1.6fr; gap: 28px; align-items: center; padding: 32px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.bd-side { display: grid; gap: 14px; }
.bd-side.client { gap: 12px; }
.bd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bd-arrow { justify-self: center; width: 2px; height: 18px; background: var(--line-strong); position: relative; }
.bd-arrow::after { content: ""; position: absolute; left: -4px; bottom: -2px; border: 5px solid transparent; border-top-color: var(--line-strong); border-bottom: 0; }
.bd-line { align-self: stretch; display: flex; justify-content: center; border-left: 2px dashed var(--line-strong); min-width: 0; }
.bd-line span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 0 8px; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); align-self: center; }
.bd-tag { font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--good); }
.bd-never { padding: 12px 14px; border-radius: var(--radius); border: 1px dashed var(--bad); font-size: 0.8rem; color: var(--text-2); }
.bd-never .up-k { color: var(--bad); }

@media (max-width: 1000px) {
  .build-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .build-steps { grid-template-columns: 1fr; }
  .up-tiers { grid-template-columns: 1fr; }
  .up-rowlabels { display: none; }
  .boundary { grid-template-columns: 1fr; padding: 20px; gap: 18px; }
  .bd-line { border-left: 0; border-top: 2px dashed var(--line-strong); padding-top: 8px; }
  .bd-line span { writing-mode: horizontal-tb; transform: none; }
  .bd-pair { grid-template-columns: 1fr; }
}

/* ==========================================================================
   About: personal intro, story, career, promises
   ========================================================================== */
.about-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 3vw, 40px); }
.about-intro { display: grid; grid-template-columns: 380px 1fr; gap: clamp(32px, 6vw, 72px); align-items: center; }
.about-intro h1 { margin-bottom: 20px; }
.about-intro .lead { max-width: 58ch; color: var(--text); }
.about-intro p { max-width: 58ch; }
.story { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(24px, 5vw, 64px); align-items: start; position: relative; padding-top: 40px; }
.story::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.story h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); position: sticky; top: 96px; }
.story .bio { max-width: 64ch; font-size: 1.05rem; }
.promises { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; }
.promises b { display: block; color: var(--text); font-size: 1.05rem; margin-bottom: 6px; }
.promises p { margin: 0; }
@media (max-width: 1000px) {
  .about-intro { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; }
  .story h2 { position: static; }
}
@media (max-width: 680px) {
  .promises { grid-template-columns: 1fr; }
}

/* Careers */
/* Why us: three tiles, an example flow and a comparison list */

.stage-grid.why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.why-grid .tile h3 { margin: 0 0 8px; font-size: 1.15rem; }
.why-grid .tile p { margin: 0; }
.why-num { display: block; margin-bottom: 10px; font-size: 1.6rem; font-weight: 700; color: var(--tone-ink); }
.why-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; counter-reset: none; }
.why-flow li { position: relative; padding: 22px; border-radius: var(--radius-lg); background: var(--clavelo-white); border: 1px solid var(--line); border-top: 4px solid var(--tone); box-shadow: var(--shadow); }
.why-flow li + li::before { content: "→"; position: absolute; left: -31px; top: 50%; transform: translateY(-50%); font-size: 1.3rem; font-weight: 700; color: var(--clavelo-navy); }
.why-flow .k { display: block; margin-bottom: 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tone-ink); }
.why-flow p { margin: 0; }
.why-flow .why-q { font-size: 1.1rem; font-weight: 600; color: var(--text); }
.why-compare { display: grid; gap: 12px; }
.why-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.why-row h3 { margin: 0; font-size: 1.05rem; }
.why-row p { margin: 0; }
.why-row .them { color: var(--text-2); }
.why-row .us { padding-left: 16px; border-left: 3px solid var(--clavelo-royal); color: var(--text); }
.why-row .us b { display: block; margin-bottom: 2px; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--clavelo-royal); }
@media (max-width: 900px) {
  .stage-grid.why-grid, .why-flow { grid-template-columns: 1fr; }
  .why-flow { gap: 34px; }
  .why-flow li + li::before { content: "↓"; left: 50%; top: -29px; transform: translateX(-50%); }
  .why-row { grid-template-columns: 1fr; gap: 10px; }
}

/* Careers: the same tinted tiles as the services stages */
.stage-grid.careers-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stage-grid.careers-roles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.careers-grid .tile h3 { margin: 0 0 8px; font-size: 1.1rem; }
.careers-grid .tile p { margin: 0; }
@media (max-width: 1100px) { .stage-grid.careers-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .stage-grid.careers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .stage-grid.careers-grid, .stage-grid.careers-roles { grid-template-columns: 1fr; } }
.roles { display: grid; }
.role { padding: 24px 0; border-bottom: 1px solid var(--line); }
.role:first-child { padding-top: 0; }
.role-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.role-top h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; }
.role > h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; }
.role-meta { font-size: 0.85rem; color: var(--muted); }
.role p { max-width: 64ch; margin: 0 0 12px; }
.role-apply { font-weight: 600; }

.built { list-style: none; margin: 0; padding: 0; display: grid; }
.built li { padding: 16px 0 16px 28px; border-bottom: 1px solid var(--line); position: relative; }
.built li:first-child { padding-top: 0; }
.built li:last-child { border-bottom: 0; }
.built li::before { content: "✓"; position: absolute; left: 0; top: 16px; color: var(--accent); font-weight: 600; }
.built li:first-child::before { top: 0; }
.built b { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.built span { font-size: 0.95rem; }

/* About: founder section laid out like the About deck. Photo, name and intro beside the systems
   callout, then the career timeline full width (two rows on tablets, down the left on phones).
   The photo file is 900px wide, so it stays sharp at 2x and 3x screens. */
.founder-card { display: grid; gap: 44px; }
.founder-top { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.founder-id { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: center; }
.founder-photo { width: 220px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: var(--radius-lg); background: var(--surface-2); }
.founder-id h2 { margin: 0; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.1; }
.bio-role, .founder-systems h3, .career h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.bio-role { margin: 8px 0 0; font-size: 0.88rem; color: var(--accent); }
.founder-intro { margin: 14px 0 0; font-size: 1rem; line-height: 1.7; color: var(--text-2); }
.founder-systems { padding: 4px 0 4px 24px; border-left: 3px solid var(--accent); }
.founder-systems h3 { margin: 0 0 10px; font-size: 0.88rem; color: var(--accent); }
.founder-systems p { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--text); }
.career { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.career li { position: relative; padding: 30px 32px 0 0; border-top: 2px solid var(--accent); }
.career li:last-child { border-top-color: transparent; }
.career li::before { content: ""; position: absolute; top: -8px; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.career li.now::before { background: var(--text); }
.career h3 { margin: 0 0 8px; font-size: 0.92rem; color: var(--text); }
.career p { margin: 0; font-size: 0.93rem; line-height: 1.6; color: var(--text-2); }
.founder-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.founder-foot p { margin: 0; max-width: 72ch; font-size: 0.92rem; line-height: 1.6; color: var(--text-2); }
.founder-foot .bio-links { font-weight: 600; }
@media (max-width: 1000px) {
  .founder-top { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  .founder-id { grid-template-columns: 200px 1fr; }
  .founder-photo { width: 200px; }
}
@media (max-width: 1100px) {
  .career { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .career li:nth-child(2n) { border-top-color: transparent; }
}
@media (max-width: 560px) {
  .founder-card { gap: 32px; }
  .founder-id { grid-template-columns: 1fr; gap: 16px; }
  .founder-photo { width: 200px; }
  .career { grid-template-columns: 1fr; row-gap: 0; margin-left: 7px; }
  .career li, .career li:nth-child(2n) { padding: 0 0 24px 26px; border-top: 0; border-left: 2px solid var(--accent); }
  .career li:last-child { border-left-color: transparent; padding-bottom: 0; }
  .career li::before { top: 2px; left: -8px; }
}

.principles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.principles div { padding-top: 16px; border-top: 2px solid var(--accent); }
.principles h3 { margin-bottom: 8px; font-size: 1.1rem; }
.principles p { margin: 0; font-size: 0.93rem; }

@media (max-width: 1000px) {
  .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .principles { grid-template-columns: 1fr; gap: 24px; }
}

/* Compact CTA band: headline + line on the left, button on the right */
.cta { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; text-align: left; padding: clamp(28px, 4vw, 40px) clamp(24px, 4vw, 48px); }
.cta h2 { margin: 0 0 6px; max-width: none; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.cta p { margin: 0; max-width: 56ch; font-size: 1rem; }
.cta .btn-row { margin: 0; justify-content: flex-start; flex: 0 1 auto; }

/* FAQ */
.faq { display: grid; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq details:first-child { padding-top: 0; }
.faq summary { cursor: pointer; list-style: none; font-weight: 600; color: var(--text); font-size: 1.05rem; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 400; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; max-width: 64ch; }

/* Legal pages */
.legal { max-width: 70ch; }
.legal h2 { font-family: var(--font-sans); font-weight: 600; font-size: 1.15rem; letter-spacing: 0; margin: 32px 0 8px; }
.legal ul { padding-left: 20px; margin: 0 0 1em; }
.legal li { margin-bottom: 6px; }
.legal b { color: var(--text); }
.legal-links { display: inline-flex; flex-wrap: wrap; gap: 6px 20px; }
.legal-links a { color: var(--muted); }
.legal-links a:hover { color: var(--accent); }
/* Links inside sentences are underlined, not just colored */
.legal p a:not(.btn), .legal li a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Industries: one consistent block per industry */
/* Industries: short cards with the KPIs we build and one question they answer */
/* Industries: grouped by sector, each group in its own tone like the services stages */
.ind-group { padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); scroll-margin-top: 68px; }
.ind-group-head { max-width: 760px; margin-bottom: 24px; padding-top: 20px; border-top: 4px solid var(--tone); }
.ind-group-head h2 { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); }
.ind-group .ind-card { background: color-mix(in srgb, var(--tone-wash, var(--tone)) 10%, var(--clavelo-white)); border-color: color-mix(in srgb, var(--tone-wash, var(--tone)) 30%, transparent); border-top: 3px solid var(--tone); }
.ind-card .ind-kpis li { background: color-mix(in srgb, var(--tone-wash, var(--tone)) 16%, var(--clavelo-white)); }
.ind-jump { display: grid; gap: 14px; padding: 22px; border-radius: var(--radius-lg); background: var(--clavelo-white); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ind-jump > div { padding-left: 14px; border-left: 3px solid var(--tone); }
.ind-jump-group { display: inline-block; margin-bottom: 4px; font-weight: 600; font-size: 0.95rem; color: var(--text); text-decoration: none; }
.ind-jump ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.ind-jump ul a { font-size: 0.86rem; color: var(--text-2); text-decoration: none; }
.ind-jump a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 860px) { .ind-jump { display: none; } }
.ind-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ind-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); scroll-margin-top: 90px; }
.ind-card h3 { margin: 0; font-family: var(--font-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--text); }
.ind-kpis { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ind-kpis li { padding: 3px 9px; border-radius: var(--radius-sm); background: var(--tint); font-size: 0.8rem; color: var(--text-2); }
.ind-ask { margin: 0; font-size: 0.98rem; font-weight: 600; line-height: 1.5; color: var(--text); }
.ind-src { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--text-2); }
.ind-src span { display: block; margin-bottom: 2px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.ind-card .ind-kpis { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr; } .stat, .stat + .stat { border-left: 0; border-bottom: 1px solid var(--line); padding: 20px 0; } .stat:last-child { border-bottom: 0; } }
@media (max-width: 1000px) { .ind-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Groups fill whole rows: four cards in a row of four (two on mid screens), and in the group of
   five the first card spans two columns */
@media (min-width: 1001px) { .ind-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .ind-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 641px) { .ind-cards-5 > :first-child { grid-column: span 2; } }
@media (max-width: 640px) { .ind-cards { grid-template-columns: 1fr; } }

/* ==========================================================================
   Homepage "Built for" links
   ========================================================================== */
.built-for { margin: 18px 0 0; font-size: 0.9rem; line-height: 1.6; color: var(--muted); }

/* ==========================================================================
   AI readiness check
   ========================================================================== */
.readiness { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.rq-list { display: grid; gap: 22px; }
.rq-intro { margin: 0; font-weight: 600; color: var(--text); }
.rq-group { display: grid; gap: 10px; }
.rq-area { margin: 0; font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.rq { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 18px; align-items: center; margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.rq:has(input:checked) { border-color: var(--line-strong); }
.rq-q { display: flex; gap: 10px; margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--text); }
.rq-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--panel-2); font-size: 0.8rem; font-weight: 600; color: var(--accent); }
.rq-opts { display: inline-flex; padding: 3px; border-radius: var(--radius); background: var(--panel-2); }
.rq-opts label { position: relative; margin: 0; cursor: pointer; }
.rq-opts input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.rq-opts span { display: block; padding: 6px 12px; border-radius: var(--radius-sm); font-size: 0.82rem; font-weight: 600; color: var(--text-2); transition: background 0.15s, color 0.15s; }
.rq-opts label:hover span { color: var(--text); }
.rq-opts input:checked + span { background: var(--clavelo-navy); color: var(--clavelo-white); }
.rq-opts input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.rr { position: sticky; top: 96px; padding: 24px; border: 1px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface-hl); box-shadow: var(--shadow); }
.rr-progress { margin: 0 0 6px; font-size: 0.8rem; color: var(--muted); }
.rr-score { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--text); }
.rr-score small { font-size: 1.2rem; color: var(--muted); margin-left: 4px; }
.rr h2 { margin: 10px 0 14px; font-size: 1.3rem; }
.rr p { margin: 0; }
.rr-bars { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.rr-bars li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 0.8rem; color: var(--text-2); }
.rr-track { display: block; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 12%, var(--bg-2)); overflow: hidden; }
.rr-track > span { display: block; width: 0; height: 100%; border-radius: 99px; background: var(--accent); transition: width 0.3s ease; }
/* When finished, only the weakest area keeps the brand color */
.readiness .rr-bars:has(.weak) li:not(.weak) .rr-track > span { background: color-mix(in srgb, var(--accent) 35%, var(--bg-2)); }
.rr-bars li.weak { color: var(--text); font-weight: 600; }
.rr-step { padding-top: 14px; border-top: 1px solid var(--line); }
.rr-step-label { margin: 0 0 4px !important; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.rr-step .btn-row { margin-top: 14px; }
.rr-hint { font-size: 0.86rem; color: var(--muted); }
@media (max-width: 860px) { .readiness { grid-template-columns: 1fr; } .rr { position: static; } }

/* Stage map: the four stages of an engagement, joined by a rail. Clients can enter at any stage. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.stage { display: flex; flex-direction: column; }
.stage-rail { position: relative; height: 14px; margin: 0 0 18px 24px; }
.stage-node { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tone-wash, var(--tone)) 16%, transparent); }
.stage:not(:last-child) .stage-rail::after { content: ""; position: absolute; top: 6px; left: 26px; right: -32px; height: 2px; border-radius: 2px; background: var(--tone); }
.stage-card { flex: 1; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-top: 3px solid var(--tone); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--tone-wash, var(--tone)) 7%, var(--clavelo-white)); }
.stage.core .stage-card { border-color: var(--line-strong); border-top-color: var(--tone); box-shadow: 0 0 0 1px var(--line-strong); }
.stage-num { font-family: var(--font-display); font-weight: 600; font-size: 2.6rem; line-height: 1; letter-spacing: -0.02em; color: var(--tone-ink, var(--accent)); margin-bottom: 14px; }
.stage h3 { margin: 0 0 6px; }
.stage-tag { justify-self: start; align-self: start; margin: 0 0 14px; padding: 4px 8px; border: 1px solid var(--clavelo-navy); border-radius: var(--radius-sm); background: var(--clavelo-navy); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; color: var(--clavelo-white); }
/* What each stage delivers, right under the stage name: the outcome leads, the services follow */
.stage-get { margin: 10px 0 0; font-size: 1.05rem; font-weight: 600; line-height: 1.35; color: var(--tone-ink, var(--text)); }
.stage-get span { display: block; margin-bottom: 2px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.stage-items { list-style: none; margin: 18px 0 16px; padding: 0; }
.stage-items li { border-top: 1px solid var(--line); }
.stage-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; margin: 0 -8px; padding-inline: 8px !important; border-radius: var(--radius); transition: background 0.2s; align-items: center; padding: 12px 0; color: var(--text-2); font-size: 0.88rem; line-height: 1.45; }
.stage-item b { display: block; font-weight: 600; color: var(--text); transition: color 0.2s; }
.stage-item small { display: block; margin-top: 2px; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.stage-item:hover { color: var(--text-2); }
.stage-item:hover b { color: var(--tone-ink); }
.stage-item:hover { background: color-mix(in srgb, var(--tone-wash, var(--tone)) 8%, transparent); }
.stage-item:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.stage-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-icon); color: var(--tone-icon, var(--tone)); background: color-mix(in srgb, var(--tone-wash, var(--tone)) 16%, var(--clavelo-white)); }
.stage-icon svg { width: 22px; height: 22px; }

/* Desktop: line the cards' rows up across all four (number, name, outcome, services), so a
   two-line outcome in one card doesn't push its services below the others */
@media (min-width: 1001px) {
  @supports (grid-template-rows: subgrid) {
    .stages { row-gap: 0; }
    .stage { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
    .stage-card { grid-row: span 4; display: grid; grid-template-rows: subgrid; align-content: start; }
  }
}

/* Services, stage 2: why the foundation comes before AI (linked from the homepage) */
.why-first { margin-top: 20px; padding: 24px 28px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--tone-wash, var(--tone, var(--accent))) 30%, transparent); border-top: 3px solid var(--tone, var(--accent)); background: color-mix(in srgb, var(--tone-wash, var(--tone, var(--accent))) 12%, var(--clavelo-white)); scroll-margin-top: 96px; }
.why-first h3 { margin: 0 0 8px; }
.why-first p { margin: 0; max-width: 78ch; color: var(--text-2); line-height: 1.6; }
.why-first b { color: var(--text); font-weight: 600; }
.why-first.focused { margin: 0 0 clamp(40px, 5vw, 64px); }
@media (max-width: 680px) { .why-first { padding: 20px 18px; } }
/* A quieter version for a short aside: no box, just a rule on the left */
.why-first.why-note { margin-top: clamp(40px, 5vw, 56px); padding: 4px 0 4px 20px; border: 0; border-left: 3px solid var(--tone, var(--accent)); border-radius: 0; background: none; }
.why-note h3 { font-size: 1.05rem; }

/* Homepage "Sound familiar?": heading on the left, the questions buyers ask as separate stacked
   cards on the right. Each row links to the service that answers it. */
.familiar-split { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
.familiar-split .section-head { position: sticky; top: 104px; margin: 0; }
.familiar { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.familiar li { display: flex; }
.familiar-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: baseline; padding: 20px 22px 20px 26px; color: var(--text); flex: 1; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); transition: background 0.2s, border-color 0.2s; }
.familiar-card::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px; border-radius: var(--radius-lg) 0 0 var(--radius-lg); background: var(--tone); }
.familiar-card:hover { color: var(--text); background: color-mix(in srgb, var(--tone-wash, var(--tone)) 8%, var(--surface)); border-color: color-mix(in srgb, var(--tone-wash, var(--tone)) 35%, var(--line)); }
.familiar-card:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.familiar-q { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--font-display); font-size: clamp(1.1rem, 1.5vw, 1.3rem); font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.familiar-link { grid-column: 2; grid-row: 1; font-size: 0.85rem; font-weight: 600; white-space: nowrap; color: var(--tone-ink); }
@media (max-width: 1000px) {
  .familiar-split { grid-template-columns: 1fr; gap: 28px; }
  .familiar-split .section-head { position: static; }
}
/* Phones: the questions become cards you swipe sideways; the edge of the next card shows there's more */
@media (max-width: 680px) {
  .familiar-split { gap: 18px; }
  .familiar { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; border-top: 0; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none; }
  .familiar::-webkit-scrollbar { display: none; }
  .familiar li { display: flex; border-bottom: 0; scroll-snap-align: start; }
  .familiar-card { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 18px 18px 16px; border: 1px solid var(--line); border-top: 3px solid var(--tone); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
  .familiar-card::before { content: none; }
  .familiar-q { font-size: 1.08rem; }
  .familiar-link { margin-top: auto; white-space: normal; }
}

/* A large stage icon in the card's top corner, beside the number (desktop only) */
.stage-card { position: relative; }
.stage-mark { display: none; }
@media (min-width: 1001px) {
  .stage-mark { position: absolute; top: 22px; right: 22px; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-icon); color: var(--tone-icon, var(--tone)); background: color-mix(in srgb, var(--tone-wash, var(--tone)) 16%, var(--clavelo-white)); }
  .stage-mark svg { width: 28px; height: 28px; }
}

/* Stage path animation: once, when the stages scroll into view, the rail draws from 01 to 04,
   each dot lights up as the line reaches it, and its card fades up (about 3 seconds). Before that (and without
   JavaScript, or with reduced motion) everything shows in its finished state. */
.stage:nth-child(1) { --step: 0s; }
.stage:nth-child(2) { --step: 0.3s; }
.stage:nth-child(3) { --step: 0.6s; }
.stage:nth-child(4) { --step: 0.9s; }
/* Phones stack the cards, so each one fades in with no wait; a card with keyboard focus inside is
   always shown, and print shows the finished state */
@media (max-width: 1000px) { .stage { --step: 0s !important; } }
.stages .stage:focus-within .stage-card { opacity: 1 !important; transform: none !important; }
@media print { .js .stages .stage-card, .js .stages .stage-node { opacity: 1 !important; transform: none !important; animation: none !important; } }
.js .stages.in .stage-node { animation: stage-node 0.6s ease-out var(--step) both; }
.js .stages.in .stage-card { animation: stage-card 0.7s ease-out var(--step) both; }
.js .stages.in .stage:not(:last-child) .stage-rail::after { transform-origin: left center; animation: stage-line-x 0.75s ease-in-out calc(var(--step) + 0.2s) both; }
@keyframes stage-node { from { opacity: 0.25; transform: scale(0.4); } 60% { transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }
@keyframes stage-card { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes stage-line-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stage-line-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 1000px) {
  .js .stages.in .stage:not(:last-child) .stage-rail::after { transform-origin: center top; animation-name: stage-line-y; }
}
/* Until it plays, hold everything at the animation's starting point so nothing shows and then
   blinks out. Only when motion is allowed; otherwise the finished state shows straight away. */
@media (prefers-reduced-motion: no-preference) {
  .js .stages:not(.in) .stage-card { opacity: 0; transform: translateY(14px); }
  .js .stages:not(.in) .stage-node { opacity: 0.25; transform: scale(0.4); }
  .js .stages:not(.in) .stage:not(:last-child) .stage-rail::after { transform: scaleX(0); transform-origin: left center; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 1000px) {
  .js .stages:not(.in) .stage:not(:last-child) .stage-rail::after { transform: scaleY(0); transform-origin: center top; }
}

/* Services: a slim bar of the four stages under the intro; each jumps to its section below */
/* Same gap above the stage bar as below it: the hero's bottom padding plus the lead's 20px margin, trimmed */
.stage-bar-band { padding: 0 0 clamp(48px, 5vw, 72px); margin-top: calc(clamp(48px, 4.5vw, 64px) - clamp(32px, 5vw, 56px) - 20px); }
.stage-bar-intro { margin: 0 0 12px; font-size: 1rem; color: var(--text-2); }
.stage-bar ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stage-bar li { display: flex; }
.stage-bar a { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--tone-wash, var(--tone)) 30%, transparent); border-top: 3px solid var(--tone); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--tone-wash, var(--tone)) 12%, var(--clavelo-white)); color: var(--text); transition: background 0.2s, transform 0.2s; }
.stage-bar a:hover { color: var(--text); background: color-mix(in srgb, var(--tone-wash, var(--tone)) 12%, var(--surface)); transform: translateY(-2px); }
.stage-bar a:focus-visible { outline: 2px solid var(--tone); outline-offset: 2px; }
.sb-num { grid-row: span 2; align-self: start; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-icon); font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; line-height: 1; color: var(--tone-on, var(--clavelo-white)); background: var(--tone); }
.sb-name { font-weight: 600; font-size: 1.05rem; }
.sb-get { font-size: 0.92rem; color: var(--text-2); }
@media (max-width: 1000px) { .stage-bar ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stage-bar ol { grid-template-columns: 1fr; gap: 8px; } .stage-bar a { padding: 12px 14px; } }
@media (prefers-reduced-motion: reduce) { .stage-bar a:hover { transform: none; } }

/* Services: detail tiles grouped under each stage */
.stage-group { padding-top: clamp(48px, 5vw, 72px); padding-bottom: clamp(48px, 5vw, 72px); scroll-margin-top: calc(16px - clamp(48px, 5vw, 72px)); }
/* Each stage carries its own color: a thick rule in its tone over the heading and a large number */
.stage-group-head { display: flex; gap: 18px; align-items: baseline; max-width: 760px; margin-bottom: 28px; padding-top: 22px; border-top: 4px solid var(--tone); }
.stage-group-head .stage-num { margin: 0; font-size: clamp(2.6rem, 4vw, 3.4rem); color: var(--tone-ink); }
.stage-grid > .tile { background: color-mix(in srgb, var(--tone-wash, var(--tone)) 12%, var(--clavelo-white)); border-color: color-mix(in srgb, var(--tone-wash, var(--tone)) 30%, transparent); }
.stage-group-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 6px; }
.stage-group-head p { margin: 0; }
.stage-group-head .stage-time { margin-top: 2px; font-size: 0.9rem; font-weight: 600; color: var(--tone-ink); }
.stage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.stage-grid > .tile { grid-column: auto; }
.stage-grid > .tile.feature { grid-column: 1 / -1; grid-row: auto; }

/* Tablet and phone: the rail turns vertical and runs down the left */
@media (max-width: 1000px) {
  .stages { grid-template-columns: 1fr; gap: 16px; }
  .stage { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 18px; }
  .stage-rail { height: auto; margin: 0; }
  .stage-node { top: 30px; }
  .stage:not(:last-child) .stage-rail::after { top: 50px; left: 6px; right: auto; bottom: -26px; width: 2px; height: auto; background: var(--tone); }
  .stage-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: 24px; }
}
@media (max-width: 680px) {
  .stage { column-gap: 12px; }
  .stage-card { padding: 20px 18px; }
  .stage-num { font-size: 2.2rem; }
}

/* Small accent text uses the text-safe ink of the tile's tone */
.tile .kicker, .tile.feature .big-price { color: var(--tone-ink); }

/* ==========================================================================
   Phone refinements
   Kept last so they reliably override earlier rules of equal specificity.
   ========================================================================== */
/* Anchored service tiles land below the sticky header */
.tile[id] { scroll-margin-top: 84px; }

/* Engagement stepper: seven tabs in a four-column grid, so the last one fills the row */
@media (max-width: 1000px) {
  .step-tab:last-child { grid-column: span 2; }
}

/* Team examples on the services page: the same gap above (from the stage bar) and below (to the
   stage 1 rule, after the stage group's own 24px); five tabs in one row; on phones, three then two */
#in-practice { padding: clamp(56px, 6vw, 88px) 0; }
.stepper-teams .step-tabs { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1000px) {
  .stepper-teams .step-tab:last-child { grid-column: auto; }
  .stepper-teams .step-tab:nth-child(4) { border-right: 1px solid var(--line); }
  .stepper-teams .step-tab:nth-child(-n+4) { border-bottom: 0; }
}
@media (max-width: 680px) {
  .stepper-teams .step-tabs { grid-template-columns: repeat(6, 1fr); }
  .stepper-teams .step-tab { grid-column: span 2; font-size: 0.9rem; }
  .stepper-teams .step-tab:nth-child(n+4) { grid-column: span 3; }
  .stepper-teams .step-tab:nth-child(3) { border-right: 0; }
  .stepper-teams .step-tab:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .stepper-teams .step-panel h3 { font-size: 1.5rem; }
}

/* Readiness check on phones: answers stack under each question; the result follows the questions */
@media (max-width: 560px) {
  .rq { grid-template-columns: 1fr; }
  .rq-opts { justify-self: start; }
  .rr-bars li { grid-template-columns: 136px minmax(0, 1fr); }
}

/* Header on phones: a 44px menu button, and a menu that drops down from the bar as a full-width
   light panel, so it reads as part of the header */
@media (max-width: 820px) {
  .nav-toggle { width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  .site-header .nav-toggle[aria-expanded="true"] { background: var(--tint); border-color: var(--accent); color: var(--accent); }
  .site-header .nav {
    top: 100%;
    left: 0;
    right: 0;
    padding: 4px var(--gutter) 8px;
    background: var(--bg);
    border: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line-strong);
    border-radius: 0;
  }
  .site-header .nav a:not(.btn) { color: var(--text); font-size: 1.05rem; }
  .site-header .nav a:not(.btn):nth-last-child(2) { border-bottom: 0; }
  .site-header .nav a:not(.btn):hover { color: var(--accent); }
  .site-header .nav a[aria-current="page"]:not(.btn) { color: var(--accent); }
}

@media (max-width: 680px) {
  /* Line breaks: no one-word last lines, no split names */
  p, li, .big-price { text-wrap: pretty; }
  h1, h2, .faq summary { text-wrap: balance; }

  /* Buttons fill the row when they stack */
  .hero .btn-row .btn { flex: 1 1 auto; justify-content: center; }
  .cta { gap: 22px; padding: 28px 20px; }
  .cta .btn-row { flex: 1 1 100%; gap: 10px; }
  .cta .btn { flex: 1 1 auto; justify-content: center; }


  /* Service tiles: even top and bottom spacing */
  .tile .mini-list:last-child { margin-bottom: 0; }
  .tile.feature p { margin-bottom: 14px; }
  .step-tab .n { font-size: 0.8rem; }


  /* Contact form: 16px fields (no iOS zoom), roomier card, full-width send */
  input, select, textarea { font-size: 16px; }
  .form-card { padding: 20px; }
  .form .btn { width: 100%; justify-content: center; }

  /* FAQ: the whole row is the tap target */
  .faq details, .faq details:first-child { padding: 0; }
  .faq summary { padding: 16px 0; }
  .faq details:first-child summary { padding-top: 4px; }
  .faq details p { margin: 0 0 18px; }

  /* Careers: even spacing around the section divider */
  section:has(> .story) + section:has(> .story) { padding-top: 0; }

  /* Footer: two columns of 40px link rows, and less empty space above it */
  .site-footer { margin-top: 0; padding: 40px 0 24px; }
  .footer-grid .wordmark .logo { width: 200px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-grid h2 { margin-bottom: 4px; }
  .footer-grid ul { gap: 0; }
  .footer-grid li a { display: block; padding: 9px 0; line-height: 1.4; }
  .footer-bottom { margin-top: 24px; padding-top: 12px; gap: 0 12px; align-items: center; }
  .footer-bottom .legal-links { gap: 0 20px; align-items: center; }
  .legal-links a { display: inline-block; padding: 10px 0; }
}


@media (max-width: 359px) {
}

/* Keep the stats strip above the fold: hero padding scales with window height */
.hero { padding-bottom: clamp(40px, 6vh, 72px); }
.stat { padding-top: 18px; padding-bottom: 18px; }
.stat-num { font-size: clamp(2.2rem, 3.6vw, 2.9rem); margin-bottom: 6px; }

/* 404: a database that never finishes loading, and a query that found nothing */
.nf { padding: clamp(56px, 8vw, 104px) 0; }
.nf-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.nf h1 { margin: 0 0 12px; }
.nf .lead { margin: 0 0 20px; }
.nf-query { margin: 0 0 24px; padding: 16px 18px; border-radius: var(--radius-lg); background: var(--panel-2); color: var(--text); font-size: 0.86rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
.nf-prompt { color: var(--accent); }
.nf-query [data-404-path] { color: var(--clavelo-royal); font-weight: 600; }
.nf-result { display: inline-block; margin-top: 6px; color: var(--clavelo-navy); font-weight: 600; }
.nf-links { margin: 18px 0 0; color: var(--text-2); }
.nf-art { display: grid; justify-items: center; gap: 10px; }
.nf-art svg { width: min(100%, 300px); height: auto; overflow: visible; }
.nf-track { fill: none; stroke: color-mix(in srgb, var(--accent) 12%, transparent); stroke-width: 8; }
.nf-spin { fill: none; stroke: var(--accent); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 150 504; transform-origin: 120px 120px; animation: nf-spin 1.4s linear 3; }
.nf-body { fill: color-mix(in srgb, var(--accent) 16%, var(--bg-2)); stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.nf-band { fill: none; stroke: var(--accent); stroke-width: 3; opacity: 0.55; }
.nf-top { fill: color-mix(in srgb, var(--accent) 32%, var(--bg-2)); stroke: var(--accent); stroke-width: 3; }
.nf-db text { font: 600 22px var(--font-display); fill: var(--accent); letter-spacing: 0.04em; }
.nf-db { animation: nf-bob 2.8s ease-in-out 1; transform-origin: center; }
.nf-loading { margin: 0; font-size: 0.8rem; color: var(--muted); }
/* Every 404 animation stops within 5 seconds (WCAG 2.2.2), the dots ending visible */
.nf-dots span { animation: nf-dot 1.4s 3 forwards; opacity: 0; }
.nf-dots span:nth-child(2) { animation-delay: 0.2s; }
.nf-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes nf-spin { to { transform: rotate(360deg); } }
@keyframes nf-bob { 50% { transform: translateY(-4px); } }
@keyframes nf-dot { 0%, 20% { opacity: 0; } 40%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nf-dots span { opacity: 1; } }
@media (max-width: 760px) {
  .nf-grid { grid-template-columns: 1fr; }
  .nf-art { order: -1; }
  .nf-art svg { width: 170px; }
}

/* Home: founder band, so visitors see who they'd work with */
.founder-strip { display: grid; grid-template-columns: 200px minmax(0, 680px); gap: 40px; align-items: start; }
.founder-strip-photo { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: var(--radius-lg); background: var(--surface-2); }
.founder-strip-text h2 { margin: 6px 0 12px; }
.founder-strip-text p { color: var(--text-2); }
.founder-strip-text .btn-row { margin-top: 6px; }
@media (max-width: 640px) { .founder-strip { grid-template-columns: 1fr; gap: 22px; } .founder-strip-photo { width: 160px; } }

/* Services: small visual examples inside a few tiles, so non-technical readers can see what each
   thing looks like. Sample content only, labeled "Example". */
.mini { position: relative; margin: 0 0 18px; padding: 14px; border-radius: var(--radius); background: var(--clavelo-white); border: 1px solid var(--line); box-shadow: 0 4px 12px rgba(22, 54, 94, 0.06); font-size: 0.85rem; }
.mini-tag { position: absolute; top: 10px; right: 12px; font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.mini p { margin: 0; }
.mini-term { font-weight: 700; color: var(--text); }
.mini-formula { margin: 6px 0 10px !important; padding: 6px 8px; border-radius: 6px; background: var(--ground-alt); font-weight: 600; color: var(--clavelo-royal); }
.mini-def dl { margin: 0; display: grid; gap: 4px; }
.mini-def dl div { display: flex; justify-content: space-between; gap: 12px; padding-top: 4px; border-top: 1px solid var(--line); }
.mini-def dt { color: var(--muted); }
.mini-def dd { margin: 0; font-weight: 600; color: var(--text); }
.mini-chat { display: grid; gap: 8px; padding-top: 34px; }
.mini-chat .q { justify-self: end; max-width: 85%; padding: 8px 11px; border-radius: 12px 12px 2px 12px; background: var(--clavelo-navy); color: var(--clavelo-white); }
.mini-chat .a { justify-self: start; max-width: 92%; padding: 8px 11px; border-radius: 12px 12px 12px 2px; background: var(--ground-alt); color: var(--text); }
.mini-dash { padding-top: 34px; }
.mini-dash .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mini-dash .kpis div { display: grid; gap: 1px; }
.mini-dash .kpis span { font-size: 0.8rem; color: var(--muted); }
.mini-dash .kpis b { font-size: 1rem; color: var(--text); }
.mini-dash .kpis i { font-style: normal; font-size: 0.8rem; font-weight: 600; }
.mini-dash .up { color: #0b7a55; }
.mini-dash .down { color: #b8304f; }
.mini-dash .bars { display: flex; align-items: flex-end; gap: 5px; height: 48px; margin-top: 12px; padding-top: 6px; border-top: 1px solid var(--line); }
.mini-dash .bars span { flex: 1; border-radius: 3px 3px 0 0; background: var(--clavelo-sky); }
.mini-dash .bars span:last-child { background: var(--clavelo-royal); }
.mini-forecast { padding-top: 34px; }
.mini-forecast svg { display: block; width: 100%; height: auto; }
.mini-forecast .act { fill: none; stroke: var(--clavelo-royal); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mini-forecast .fc { fill: none; stroke: var(--clavelo-royal); stroke-width: 2.5; stroke-dasharray: 4 4; stroke-linecap: round; }
.mini-forecast .band { fill: var(--clavelo-sky); opacity: 0.45; }
.mini-forecast .now { stroke: var(--line-strong); stroke-width: 1; }
.mini-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px !important; font-size: 0.8rem; color: var(--muted); }
.mini-legend .k { display: inline-block; width: 14px; height: 4px; margin-right: 4px; border-radius: 2px; vertical-align: middle; }
.mini-legend .k.act { background: var(--clavelo-royal); }
.mini-legend .k.fc { background: repeating-linear-gradient(90deg, var(--clavelo-royal) 0 4px, transparent 4px 7px); }
.mini-legend .k.band { height: 8px; background: var(--clavelo-sky); opacity: 0.6; }

/* Services stages, desktop: each stage has its own layout instead of a grid of boxes.
   Stage 2 alternates text and picture rows, stage 3 is a picture-first gallery, stage 4 is one
   navy panel split in two. Everything stacks on phones. */
.svc-rows { display: grid; gap: clamp(44px, 6vw, 80px); }
.svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; scroll-margin-top: 84px; }
.svc-row.flip { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.svc-row.flip .svc-row-text { order: 2; }
.svc-row-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.svc-row-head .icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-icon); color: var(--tone-on, var(--clavelo-white)); background: var(--tone); }
.svc-row-head .icon svg { width: 22px; height: 22px; }
.svc-row-head h3 { margin: 0; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.svc-row-text > p { margin: 0 0 16px; font-size: 1.05rem; color: var(--text); }
.svc-row-text .mini-list { margin: 0; }
.svc-row-visual, .svc-col-visual { position: relative; display: grid; place-items: center; padding: clamp(20px, 3vw, 36px); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--clavelo-sky) 34%, var(--clavelo-white)); }
.band-tint .svc-row-visual { background: color-mix(in srgb, var(--clavelo-sky) 48%, var(--clavelo-white)); }
.svc-rows + .why-first { margin-top: clamp(48px, 6vw, 80px); }
.svc-row-visual .mini, .svc-col-visual .mini { width: 100%; max-width: 440px; margin: 0; font-size: 0.92rem; }
.svc-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.5vw, 48px); }
.svc-col { scroll-margin-top: 84px; }
.svc-col-visual { min-height: 260px; margin-bottom: 22px; }
.svc-col > p { margin: 0 0 14px; color: var(--text); }
.svc-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(28px, 4vw, 52px); border-radius: var(--radius-lg); background: var(--clavelo-navy); }
.svc-panel .svc-row-head .icon { background: var(--clavelo-sky); color: var(--clavelo-navy); }
.svc-panel .svc-row-head h3 { color: var(--clavelo-white); }
.svc-half { scroll-margin-top: 84px; }
.svc-half > p { margin: 0 0 16px; color: var(--clavelo-white); }
.svc-panel-or { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--clavelo-sky); font-weight: 600; font-size: 0.9rem; }
@media (max-width: 860px) {
  .svc-row, .svc-row.flip { grid-template-columns: 1fr; gap: 20px; }
  .svc-row.flip .svc-row-text { order: 0; }
  .svc-gallery { grid-template-columns: 1fr; gap: 48px; }
  .svc-col-visual { min-height: 0; }
  .svc-panel { grid-template-columns: 1fr; }
  .svc-panel-or { justify-self: start; }
}
@media (min-width: 861px) and (max-width: 1100px) { .svc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* New examples: data pipeline, CRM fields, call note */
.mini-pipe { display: grid; grid-template-columns: auto 34px minmax(0, 1fr); align-items: center; gap: 10px; padding-top: 36px; }
.pipe-src { display: grid; gap: 6px; }
.pipe-src span { padding: 6px 10px; border-radius: 6px; background: var(--ground-alt); font-weight: 600; color: var(--text); font-size: 0.85rem; }
.pipe-arrows { display: grid; gap: 6px; }
.pipe-arrows i { display: block; height: 2px; margin: 12px 0; background: repeating-linear-gradient(90deg, var(--clavelo-azure) 0 4px, transparent 4px 8px); }
.pipe-wh { display: grid; gap: 6px; padding: 14px; border-radius: var(--radius); background: var(--clavelo-navy); color: var(--clavelo-white); }
.pipe-wh b { font-size: 0.95rem; }
.pipe-wh .ok { font-size: 0.8rem; color: var(--clavelo-sky); }
.pipe-wh .ok::before { content: "✓ "; }
.mini-form { display: grid; gap: 10px; padding-top: 36px; }
.mini-form .form-title { font-weight: 700; color: var(--text); }
.mini-form label { display: grid; gap: 4px; font-size: 0.85rem; font-weight: 600; color: var(--text); }
.mini-form em { font-style: normal; font-weight: 600; font-size: 0.8rem; color: #b8304f; margin-left: 6px; }
.mini-form .sel { position: relative; padding: 8px 30px 8px 10px; border: 1px solid var(--line-strong); border-radius: 6px; font-weight: 400; color: var(--text); background: var(--clavelo-white); }
.mini-form .sel::after { content: "▾"; position: absolute; right: 10px; color: var(--muted); }
.mini-note { display: grid; gap: 8px; padding-top: 36px; }
.mini-note .note-meta { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.mini-note .note-body { padding-left: 10px; border-left: 3px solid var(--clavelo-teal); color: var(--text); }
.mini-note .note-link { justify-self: start; padding: 5px 10px; border-radius: 99px; background: var(--ground-alt); font-size: 0.8rem; color: var(--text-2); }
.svc-panel .mini-list li { color: var(--clavelo-white); }
.svc-panel .mini-list li::before { color: var(--clavelo-sky); }
.svc-col-visual { height: 290px; min-height: 0; }
.mini-form label { display: block; }
.mini-form .sel { display: block; margin-top: 4px; }
@media (max-width: 860px) { .svc-col-visual { height: auto; } }

/* Data Acquisition example: data sets found, bought or started */
.mini-src { display: grid; gap: 10px; padding-top: 36px; }
.mini-src .form-title { font-weight: 700; color: var(--text); }
.mini-src ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mini-src li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; background: var(--ground-alt); }
.mini-src b { font-size: 0.85rem; color: var(--text); }
.mini-src .how { padding: 2px 8px; border-radius: 99px; background: var(--clavelo-white); font-size: 0.8rem; color: var(--text-2); }
.mini-src .ok { font-size: 0.8rem; font-weight: 600; color: #0b7a55; }
.mini-src .ok::before { content: "✓ "; }
@media (max-width: 420px) { .mini-src li { grid-template-columns: minmax(0, 1fr) auto; } .mini-src .ok { grid-column: 2; grid-row: 1; } .mini-src .how { grid-column: 1; justify-self: start; } }

/* Stage 3 showcase: real screenshots for dashboards and the AI Analyst */
.svc-show { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(28px, 4vw, 64px); align-items: center; margin-bottom: clamp(56px, 7vw, 96px); scroll-margin-top: 84px; }
.svc-show.wide { grid-template-columns: 1fr; gap: 28px; }
.svc-show-text > p, .svc-show-text > div > p { margin: 0 0 16px; font-size: 1.05rem; color: var(--text); }
.svc-show-text .mini-list { margin: 0; }
.svc-show-text.two { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.shot { margin: 0; }
.shot img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); box-shadow: 0 14px 36px rgba(22, 54, 94, 0.12); background: var(--clavelo-white); }
.shot figcaption { margin-top: 10px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.shot.phone { display: none; }
@media (max-width: 860px) {
  .svc-show, .svc-show-text.two { grid-template-columns: 1fr; }
  .shots { grid-template-columns: 1fr; }
  .shot.desk { display: none; }
  .shot.phone { display: block; }
}

/* Stage 2: three plain columns (no boxes, no pictures), then KPI & Semantic Layer featured */
.svc-plain { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3.5vw, 48px); margin-bottom: clamp(40px, 5vw, 64px); }
.svc-plain-item { padding-top: 20px; border-top: 3px solid var(--tone); scroll-margin-top: 84px; }
.svc-plain-item > p { margin: 0 0 14px; color: var(--text); }
.svc-plain-item .mini-list { margin: 0; }
.svc-feature { padding: clamp(24px, 3.5vw, 44px); border-radius: var(--radius-lg); background: var(--clavelo-white); box-shadow: 0 10px 30px rgba(22, 54, 94, 0.08); }
.svc-feature-tag { display: inline-block; margin-bottom: 12px; padding: 4px 12px; border-radius: 99px; background: var(--clavelo-navy); color: var(--clavelo-white); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.svc-feature + .why-first { margin-top: clamp(32px, 4vw, 48px); }
/* AI Analyst: tall stacked example beside the text */
.svc-show.flip { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.svc-show.flip .svc-show-text { order: 2; }
.shot.tall { max-width: 480px; justify-self: center; }
@media (max-width: 860px) {
  .svc-plain { grid-template-columns: 1fr; }
  .svc-show.flip { grid-template-columns: 1fr; }
  .svc-show.flip .svc-show-text { order: 0; }
}

/* Machine Learning: text only, intro beside the bullets */
.svc-wide { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(48px, 6vw, 80px); }
@media (max-width: 860px) { .svc-wide { grid-template-columns: 1fr; gap: 0; margin-top: 40px; } }
/* Screenshots open larger when clicked */
.shot-link { position: relative; display: block; cursor: zoom-in; border-radius: var(--radius-lg); }
.shot-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.shot-zoom { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--clavelo-navy); color: var(--clavelo-white); font-size: 1rem; opacity: 0.85; transition: opacity 0.2s; }
.shot-link:hover .shot-zoom, .shot-link:focus-visible .shot-zoom { opacity: 1; }
/* Larger view: opens at a readable size (wide images up to 1100px, tall ones up to 720px) and
   scrolls inside if taller than the window. Fades and grows in gently. */
.lightbox { width: min(1100px, 94vw); max-width: none; max-height: 92vh; margin: auto; padding: 0; border: 0; overflow-x: hidden; overflow-y: auto; border-radius: var(--radius-lg); background: var(--clavelo-white); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overscroll-behavior: contain; }
.lightbox.tall { width: min(720px, 94vw); }
.lightbox::backdrop { background: rgba(10, 25, 45, 0.72); }
.lightbox img { display: block; width: 100%; height: auto; }
.lightbox[open] { animation: lb-in 0.4s cubic-bezier(.2, .7, .2, 1); }
.lightbox[open]::backdrop { animation: lb-fade 0.4s ease; }
@keyframes lb-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes lb-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lightbox[open], .lightbox[open]::backdrop { animation: none; } }
.lightbox-close { position: sticky; top: 10px; float: right; z-index: 1; margin: 10px 10px -50px 0; width: 40px; height: 40px; border: 2px solid var(--clavelo-white); border-radius: 50%; background: var(--clavelo-navy); color: var(--clavelo-white); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.lightbox-close:focus-visible { outline: 3px solid var(--clavelo-sky); outline-offset: 2px; }
/* KPI & Semantic Layer example, styled like the screenshots: an app window on a light ground */
.app-mock { width: 100%; max-width: 520px; margin: 0; padding: 18px 20px 14px; border-radius: 14px; background: var(--clavelo-white); box-shadow: 0 14px 36px rgba(22, 54, 94, 0.12); font-size: 0.85rem; }
.app-dots { display: flex; gap: 6px; margin-bottom: 12px; }
.app-dots i { width: 8px; height: 8px; border-radius: 50%; background: #dbe4ef; }
.app-title { margin: 0 0 10px; font-weight: 700; font-size: 0.95rem; color: var(--text); }
.app-mock table { width: 100%; border-collapse: collapse; }
.app-mock th { padding: 0 8px 6px 0; text-align: left; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.app-mock td { padding: 8px 8px 8px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--text); }
.app-mock td:first-child { font-weight: 600; white-space: nowrap; }
.app-mock td:nth-child(2) { color: var(--text-2); }
.app-mock td.ok { padding-right: 0; white-space: nowrap; font-size: 0.8rem; font-weight: 600; color: #0b7a55; }
.app-mock td.ok::before { content: "✓ "; }
.app-used { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 0.8rem; color: var(--muted); }
.app-used span { padding: 3px 10px; border-radius: 99px; background: var(--clavelo-royal); color: var(--clavelo-white); font-weight: 600; }
.app-note { margin: 10px 0 0; font-size: 0.8rem; color: var(--muted); }
@media (max-width: 520px) { .app-mock thead th:nth-child(3), .app-mock td:nth-child(3) { display: none; } .app-mock td:first-child { white-space: normal; } }

/* Smaller previews on the page; clicking opens the full-size view */
.svc-show { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.svc-show.flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.svc-show .shot { width: 100%; max-width: 520px; justify-self: center; }
.svc-show .shot.tall { max-width: 340px; }
@media (max-width: 860px) {
  .svc-show, .svc-show.flip { grid-template-columns: 1fr; }
  .svc-show .shot { max-width: 420px; }
  .svc-show .shot.tall { max-width: 300px; }
}

/* Dashboard example: screenshot on desktop, an HTML version on phones */
.dash-mobile { display: none; }
@media (max-width: 860px) {
  .svc-show .dash-shot { display: none; }
  .dash-mobile { display: block; justify-self: stretch; max-width: none; }
}
.app-sub { margin: -6px 0 12px; font-size: 0.8rem; color: var(--muted); }
.dm-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 0 14px; }
.dm-kpis div { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.dm-kpis dt { font-size: 0.8rem; color: var(--muted); }
.dm-kpis dd { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--text); }
.dm-kpis dd.up, .dm-kpis dd.flat { font-size: 0.8rem; font-weight: 600; }
.dm-kpis dd.up { color: #0b7a55; }
.dm-kpis dd.flat { color: var(--muted); }
.dm-head { margin: 0 0 8px; font-weight: 700; font-size: 0.9rem; color: var(--text); }
.dm-bars { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.dm-bars li { display: grid; grid-template-columns: 88px minmax(0, 1fr) 48px; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text); }
.dm-bars i { display: block; height: 10px; border-radius: 99px; background: var(--clavelo-royal); }
.dm-bars li.low i { background: #d4466a; }
/* Bar lengths for the mock numbers (kept here, not inline, so the security policy can block inline styles) */
.dm-bars li:nth-child(1) i { width: 100%; }
.dm-bars li:nth-child(2) i { width: 61%; }
.dm-bars li:nth-child(3) i { width: 27%; }
.dm-bars li:nth-child(4) i { width: 8%; }
.dm-bars b { text-align: right; }
.dm-open { width: 100%; justify-content: center; }

/* Home "what your team uses" section: the dashboard and AI Analyst examples take turns in one frame */
.ex-frame { position: relative; aspect-ratio: 1 / 0.95; border-radius: var(--radius-lg); overflow: hidden; background: var(--clavelo-white); border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(22, 54, 94, 0.14); }
.ex-shot { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.8s ease, visibility 0.8s; border-radius: 0; }
.ex-shot.active { opacity: 1; visibility: visible; }
.ex-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.ex-controls { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.ex-controls .motion-toggle { margin-left: auto; color: var(--text-2); }
.ex-note { margin: 8px 0 0; font-size: 0.8rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .ex-shot { transition: none; } }
/* Phones: the featured KPI & Semantic Layer panel drops its inner backdrop so the metric table
   gets the full width */
@media (max-width: 860px) {
  .svc-feature { padding: 22px 18px; }
  .svc-feature .svc-row-visual { padding: 0; background: none; }
  .svc-feature .app-mock { max-width: none; padding: 14px; border: 1px solid var(--line); box-shadow: none; }
}

/* Small helpers that replaced inline style attributes (decision 0001) */
section.flush-top { padding-top: 0; }
.faq.faq-narrow { max-width: 820px; }
.nowrap { white-space: nowrap; }