/* The real happyrobot fonts, self-hosted (same setup happyrobot uses).
     Non-commercial use per the licence held. Tobias = serif display,
     Suisse Intl = grotesque body/UI. Inter stays as a metric fallback for
     weights Suisse Book (400-only) doesn't ship. */
  @font-face {
    font-family: "Tobias";
    src: url("../fonts/Tobias-Regular.woff2") format("woff2"),
         url("../fonts/Tobias-Regular.otf") format("opentype");
    font-weight: 400; font-style: normal; font-display: swap;
  }
  @font-face {
    font-family: "Suisse Intl";
    src: url("../fonts/SuisseIntl-Book.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
  }
  /* Suisse Regular is one step heavier than Book — map it to weight 500 so
     medium-weight UI text (wordmark, quad titles) gets a real cut instead of
     the browser faux-bolding Book. */
  @font-face {
    font-family: "Suisse Intl";
    src: url("../fonts/SuisseIntl-Regular.woff2") format("woff2"),
         url("../fonts/SuisseIntl-Regular.ttf") format("truetype");
    font-weight: 500; font-style: normal; font-display: swap;
  }
  :root {
    --bg: #FBFBFA;
    --bg-sand: #EBE6D2;      /* HR measured: platform section + CTA panel */
    --bg-sand-2: #F3F1E6;    /* HR measured: philosophy cards */
    --ink: #0E0D0C;
    --ink-60: rgba(14,13,12,0.6);  /* HR's universal body-copy colour */
    --muted: #858484;        /* HR measured: <em> two-tone headline gray */
    --navy: #0A1929;         /* HR measured: dark statement band */
    --hair: rgba(14,13,12,0.12);
    --btn-fg: #FCFCFC;
    --nav-h: 58px;            /* compact solid white nav bar (HR framing) */
    --font: "Suisse Intl", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --display: "Tobias", Georgia, "Times New Roman", serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  html { scroll-padding-top: 68px; }  /* keep in-page anchor jumps clear of the fixed nav */

  /* Skip-to-content link — visually hidden until keyboard focus (WCAG 2.4.1 Bypass Blocks). */
  .skip-link { position: absolute; left: 8px; top: -60px; z-index: 1000; background: var(--ink); color: var(--btn-fg); padding: 10px 16px; border-radius: 6px; font: 500 0.875rem/1 var(--font); text-decoration: none; transition: top .18s var(--ease); }
  .skip-link:focus { top: 8px; outline: 2px solid var(--btn-fg); outline-offset: 2px; }

  /* HR's page-edge peach glow — fixed full-viewport overlay, three layered
     inset shadows in #D97757 (measured off the live site). Non-interactive. */
  .page-glow { display: none; }

  /* happyrobot serif headings + two-tone continuation phrase */
  h1, h2 {
    font-family: var(--display);
    font-optical-sizing: auto;
  }
  .muted { color: var(--muted); }

  html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-anchor: none; }

  body {
    font-family: var(--font);
    font-weight: 400;
    font-size: 0.875rem;      /* HR base: 14px Suisse */
    line-height: 1.5;
    color: #fff;
    /* Warm near-white page surface — the hero's 16px inset margin shows this
       (happyrobot's exact treatment). */
    background: #FBFBFA;
    overflow-x: hidden;
  }

  /* ---------- HERO (happyrobot exact framing) ----------
     The hero is inset on the page: flush below the full-width white nav, with a
     16px warm-white margin on the left, right, and bottom (the page surface shows
     through). SHARP corners — no rounding. It scrolls away under the fixed nav.
     Matches HR exactly: margin 56px 16px 16px; height calc(100vh - nav - 16px).
     On phones it goes full-bleed (HR drops the side/bottom margins below md). */
  .hero-frame {
    background: #FBFBFA;
    padding: var(--nav-h) 16px 16px;
  }

  /* Fills the first screen: viewport minus the nav and the 16px bottom margin. */
  .hero {
    position: relative;
    height: calc(100svh - var(--nav-h) - 16px);
    min-height: 520px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    isolation: isolate;
    border-radius: 0;
  }

  /* Full-bleed orb field — the oak scene rendered as tens-of-thousands of
     colour-matched WebGL particles. Cover-fits the hero (engine crops with a
     hair of overscan, so no black edge ever shows). Dark navy fallback holds
     until the first frame paints. Density/size live in the HERO_ORBS config in
     the module script. */
  .hero__bg {
    position: absolute;
    inset: 0;
    z-index: -3;
    display: block;
    width: 100%;
    height: 100%;
    background: #0a0e19;
  }

  /* Layer 1 — directional navy scrim (top + bottom heavier, keeps middle readable) */
  .hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
      linear-gradient(180deg,
        rgba(10,12,30,0.28) 0%,
        rgba(10,12,30,0.14) 30%,
        rgba(10,12,30,0.20) 55%,
        rgba(10,12,30,0.32) 80%,
        rgba(8,9,22,0.42) 100%);
  }

  /* Layer 2 — single soft radial darkening directly behind the central text column.
     (Corner-vignette radial removed: the directional scrim already handles edges; one
      honest radial reads cleaner/more premium than triple-veiling the fresco.) */
  .hero__vignette {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(60% 50% at 50% 43%, rgba(8,9,22,0.42) 0%, rgba(8,9,22,0.16) 50%, rgba(8,9,22,0) 80%);
  }

  /* ---------- NAV (happyrobot solid white bar) ----------
     Full-width fixed bar, solid near-white, ALWAYS — sits above the hero card
     (not over the painting). 1px bottom hairline; a faint shadow lifts in once
     you scroll. Logo + wordmark stay ink; black Contacto button on the right. */
  /* Fixed positioning layer only — transparent, non-interactive so the gaps
     around the floating pill let clicks through to the content beneath. */
  .nav-wrap {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    background: transparent;
    pointer-events: none;
  }

  /* The visual bar. DOCKED (at top): full-width solid bar flush to the edges
     with a 1px bottom hairline only (happyrobot's resting nav). On scroll it
     lifts into a floating pill — margin/radius/border/bg/blur/shadow animate. */
  .nav {
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 clamp(16px, 1.6vw, 25px); /* HR: ~25px gutter, logo left, button right */
    height: var(--nav-h);
    background: #FCFCFC;
    border: 1px solid transparent;
    border-bottom-color: var(--hair);
    /* No backdrop-filter at rest: the docked bar is opaque, so blur(0)+saturate
       only cost a per-frame filter pass with zero visible effect. The pill state
       adds the real blur once scrolled. */
    transition:
      margin 0.45s var(--ease),
      border-radius 0.45s var(--ease),
      border-color 0.45s var(--ease),
      background 0.45s var(--ease),
      box-shadow 0.45s var(--ease);
  }

  /* FLOATING PILL (scrolled down) — happyrobot: bar lifts off into an inset,
     rounded, translucent, blurred pill with a full border + shadow. Desktop
     only (HR disables it below md). Matches HR: margin 0.5cm 1.5cm 0; radius 4px;
     bg rgba(252,252,252,0.82); blur(12px). */
  @media (min-width: 768px) {
    .nav-wrap.is-scrolled .nav {
      margin: 19px 57px 0;
      border-radius: 4px;
      border-color: var(--hair);
      background: rgba(252, 252, 252, 0.82);
      backdrop-filter: blur(12px) saturate(1.4);
      -webkit-backdrop-filter: blur(12px) saturate(1.4);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); /* HR measured */
    }
  }

  /* ---------- BRAND LOCKUP (orb glyph + Providence™ wordmark) ----------
     Live HTML text so the wordmark renders in the page's @font-face Suisse. */
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    line-height: 1;
  }

  /* Orb glyph — CSS radial-gradient sphere echoing the particle orb rgb(10,14,25).
     Crisp (no particle texture). Faint light ring so it reads over the painting;
     softer, inkier ring once it sits on the light scrolled bar. */
  /* WebGL particle-orb mark — Three.js simplex-noise points rendered into this
     canvas by the module at the end of <body>. White particles over the dark
     hero; the module swaps them to navy once the nav flips to the light bar. */
  .orb-glyph {
    width: 22px;
    height: 22px;
    display: block;
    flex-shrink: 0;
  }

  /* Wordmark — Suisse Intl, ink on the white bar. Compact (HR scale). */
  .brand-word {
    font-family: var(--font);
    font-weight: 500;
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--ink);
  }
  .brand-word .tm {
    font-size: 0.5em;
    vertical-align: super;
    letter-spacing: 0;
    margin-left: 0.04em;
  }

  /* CTA — always-black button, legible over hero and scrolled bar alike. */
  .nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;                 /* HR exact: 32px tall */
    padding: 0 16px;
    border-radius: 4px;
    text-decoration: none;
    color: var(--btn-fg);
    font-weight: 400;             /* HR exact: regular weight */
    font-size: 0.875rem;          /* 14px */
    line-height: 1;
    letter-spacing: -0.005em;
    background: var(--ink);
    border: 1px solid transparent;
    transition: background .35s var(--ease), transform .35s var(--ease);
    white-space: nowrap;
  }
  .nav-cta:hover {
    background: #26231f;
    transform: translateY(-1px);
  }
  .nav-cta svg { width: 13px; height: 13px; }

  /* Nav responsive — compact bar tightens its gutters. */
  @media (max-width: 768px) {
    .brand-word { font-size: 0.95rem; }
    .nav-cta { font-size: 0.84rem; padding: 6px 13px; }
  }
  @media (max-width: 480px) {
    .nav { gap: 10px; }
    .orb-glyph { width: 20px; height: 20px; }
    /* icon-only CTA on phones to avoid nav overflow */
    .nav-cta { padding: 8px; }
    .nav-cta .nav-cta__label { display: none; }
    .nav-cta svg { width: 15px; height: 15px; }
  }

  /* ---------- HERO CONTENT ---------- */
  .hero__body {
    position: relative;
    z-index: 4;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 56px 24px 40px;
  }

  .stage { width: 100%; max-width: 1100px; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    text-shadow: 0 1px 10px rgba(0,0,0,0.55);
  }
  .eyebrow .dot { display: none; }

  h1 {
    margin: 26px auto 0;
    max-width: 22ch;
    font-family: var(--display);
    font-optical-sizing: auto;
    font-weight: 400;                      /* Tobias ships 400 only (HR) */
    font-size: clamp(2.8rem, 6.9vw, 6.5rem); /* HR: 104px @1512 = 6.9vw */
    line-height: 0.9;                      /* HR: 93.6/104 */
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  h1 .br { display: block; }

  .subhead {
    margin: 22px auto 0;
    max-width: 560px;
    text-wrap: balance;
    font-size: clamp(0.9rem, 1.1vw, 1rem);  /* HR body scale */
    font-weight: 400;
    line-height: 1.5;
    color: rgba(255,255,255,0.9);
    text-shadow: 0 1px 2px rgba(0,0,0,0.55), 0 2px 16px rgba(0,0,0,0.5);
  }

  /* ---------- PRIMARY CTA ---------- */
  .cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 30px;
    padding: 10px 18px;
    border-radius: 4px;
    text-decoration: none;
    font-family: var(--font);
    font-weight: 400;          /* HR: buttons are regular weight */
    font-size: 14px;
    letter-spacing: -0.005em;
    color: var(--btn-fg);
    background: var(--ink);
    border: 1px solid transparent;
    transition: transform .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease);
  }
  .cta:hover {
    transform: translateY(-1px);
    background: #26231f;
  }
  .cta:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
  .cta svg { width: 16px; height: 16px; }

  /* Ghost / secondary button — transparent + hairline border */
  .cta--ghost {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--hair);
  }
  .cta--ghost:hover { background: rgba(14,13,12,0.04); }

  /* ---------- MARQUEE ---------- */
  /* Slow monochrome tool strip (Harvey-style) — no capsules; white marks +
     names drift across a thin band with soft edge-dissolve. */
  .marquee {
    position: relative;
    z-index: 4;
    margin: clamp(40px, 6vh, 64px) auto 0;
    width: 100%;
    max-width: 1040px;
    overflow: hidden; /* self-contained clip, independent of body overflow-x */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  /* Seamless -50% loop requires the two duplicated halves to wrap gap-perfectly.
     The track's total horizontal padding (22 + 22 = 44px) MUST equal `gap`.
     If you change `gap`, change the horizontal padding to match or a half-gap
     seam reappears at every loop. */
  .marquee__track {
    display: flex;
    align-items: center;
    width: max-content;
    gap: 44px;
    padding: 4px 22px;
    animation: scroll 64s linear infinite;   /* calmer pace */
  }
  .marquee:hover .marquee__track { animation-play-state: paused; }

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

  /* one flowing item — no background, no border; monochrome white */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity .3s var(--ease);
  }
  .pill:hover { opacity: 1; }
  .pill__badge {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    background: rgba(255,255,255,0.16);
    color: #fff;
    letter-spacing: -0.02em;
    flex-shrink: 0;
  }
  .pill__logo {
    width: 22px; height: 22px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
    filter: brightness(0) invert(1);   /* monochrome to white */
  }
  .pill__name {
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: #fff;
  }

  .caption {
    position: relative;
    z-index: 4;
    margin-top: 22px;
    margin-bottom: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255,255,255,0.62);
    text-align: center;
    text-shadow: 0 1px 10px rgba(0,0,0,0.5);
    padding: 0 24px;
  }

  /* ---------- FEATURE SECTION (Pango "Trusted by" pattern) ----------
     White section that scrolls up as the hero compresses. Trust label → muted
     client logo row → large statement + subhead. */
  .feature {
    position: relative;
    z-index: 1;
    background: var(--bg);
    color: var(--ink);
    padding: clamp(70px, 12vh, 150px) 24px clamp(120px, 22vh, 240px);
    text-align: center;
  }
  /* Centered uppercase eyebrow above the client grid (happyrobot "Trusted
     by 150+ enterprises" treatment). */
  .client-eyebrow {
    font-size: 0.875rem;          /* 14px — HR */
    font-weight: 400;
    letter-spacing: 0.05em;       /* HR exact: 0.7px at 14px */
    text-transform: uppercase;
    color: var(--ink-60);         /* HR: ink at 60% */
  }
  /* 5-column grayscale logo grid — placeholder Fortune 500 marks (vendored
     SVGs in assets/logos/brands/); swap for real client logos later. */
  .client-grid {
    margin: clamp(46px, 7vh, 70px) auto 0;
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: clamp(24px, 3vw, 56px);
    row-gap: clamp(40px, 6vh, 64px);
    align-items: center;
    justify-items: center;
  }
  .client-grid img {
    height: clamp(26px, 3.2vw, 40px);
    width: auto;
    max-width: 100%;
    filter: grayscale(1);
    opacity: 0.48;
    transition: opacity 0.3s var(--ease);
  }
  .client-grid img:hover { opacity: 0.82; }
  @media (max-width: 900px) { .client-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 540px) { .client-grid { grid-template-columns: repeat(2, 1fr); } }

  .feature__statement {
    margin: clamp(90px, 16vh, 190px) auto 0;
    max-width: 880px;
  }
  .feature h2 {
    font-family: var(--display);
    font-optical-sizing: auto;
    font-size: clamp(2.1rem, 3vw, 2.9rem);  /* HR H2: 3vw */
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--ink);
  }
  .feature__sub {
    margin: clamp(20px, 3vh, 32px) auto 0;
    max-width: 620px;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink-60);
    text-wrap: balance;
  }

  /* Scroll-reveal — fade/slide up as each element enters the viewport. */
  .reveal-up {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  }
  .reveal-up.in { opacity: 1; transform: none; }
  .reveal-up.d1 { transition-delay: 0.06s; }
  .reveal-up.d2 { transition-delay: 0.14s; }
  .reveal-up.d3 { transition-delay: 0.22s; }

  /* ---------- REUSABLE SECTION PRIMITIVES ----------
     happyrobot warm-neutral language: warm near-white surface, Inter body,
     Fraunces serif headings, monochrome ink accent, hairline cards. Shared across body sections. */
  .section {
    position: relative;
    z-index: 1;
    background: var(--bg);
    color: var(--ink);
    padding: clamp(64px, 9vh, 96px) 24px;   /* HR: 96px standard rhythm */
  }
  .section__inner { max-width: 1280px; margin: 0 auto; } /* HR: ~1361 @1512 */

  /* ---------- ENTRANCE ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeUp 0.9s var(--ease) forwards;
  }
  .reveal.d1 { animation-delay: 0.08s; }
  .reveal.d2 { animation-delay: 0.18s; }
  .reveal.d3 { animation-delay: 0.28s; }
  .reveal.d4 { animation-delay: 0.38s; }
  .reveal.d5 { animation-delay: 0.50s; }
  .reveal.d6 { animation-delay: 0.62s; }

  @keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal { animation: none; opacity: 1; transform: none; }
    .marquee__track { animation: none; }
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 768px) {
    h1 { max-width: 14ch; }
    /* HR drops the hero side/bottom margins below md — full-bleed on phones. */
    .hero-frame { padding: var(--nav-h) 0 0; }
    .hero { height: calc(100svh - var(--nav-h)); }
  }

  @media (max-width: 480px) {
    :root { --nav-h: 52px; }                /* tighter bar on phones */
    .hero__body { padding: 40px 18px 32px; }
    h1 { font-size: clamp(1.95rem, 8.6vw, 2.5rem); max-width: 14ch; }
    .subhead { font-size: 1rem; }
    .marquee { margin-top: 40px; }
    .marquee__track { gap: 34px; padding: 4px 17px; }
    .pill { gap: 8px; }
    .pill__name { font-size: 0.88rem; }
  }

  /* ==========================================================================
     HAPPYROBOT PATTERN KIT — type-led, hairline-driven primitives.
     Shared by the trust statement + HR-clone sections.
     ========================================================================== */

  /* 1 ── EDITORIAL SECTION HEADER (two-column band) ── */
  .ed-head {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: end;   /* HR: lede baseline sits with the headline, not the eyebrow */
    padding-bottom: clamp(28px, 4vh, 48px);
    border-bottom: 1px solid var(--hair);
    margin-bottom: clamp(44px, 7vh, 84px);
  }
  .ed-eyebrow {
    display: block;
    font-family: var(--font);
    font-size: 0.75rem;          /* HR: 12px */
    font-weight: 400;
    letter-spacing: 0.025em;     /* HR: 0.3px @12px */
    text-transform: uppercase;
    color: var(--ink);           /* HR: near-black, not muted */
  }
  .ed-head__title {
    margin-top: clamp(16px, 2.4vh, 26px);
    font-family: var(--display);
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: clamp(2.1rem, 3vw, 2.9rem);  /* HR H2: 3vw */
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
    text-wrap: balance;
  }
  .ed-head__title .muted { color: var(--muted); }
  .ed-head__lede {
    margin: 0;
    padding-top: 0;
    max-width: 384px;            /* HR measured lede column */
    font-size: 0.875rem;         /* HR: 14/20 */
    font-weight: 400;
    line-height: 1.45;
    color: var(--ink-60);
    text-wrap: pretty;
  }

  .ed-head--center {
    display: block;
    text-align: center;
    border-bottom: 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(56px, 8.5vh, 104px);   /* more air before the content below */
  }
  .ed-head--center .ed-head__title {
    margin-top: clamp(20px, 3vh, 34px);           /* looser eyebrow → title */
    font-size: clamp(2.1rem, 3vw, 2.9rem);
    line-height: 1.05;                            /* room for descenders (y, p, g) */
  }
  .ed-head--center .ed-head__lede {
    margin: clamp(24px, 3.6vh, 40px) auto 0;      /* looser title → lede */
    padding-top: 0;
    max-width: 60ch;
  }

  @media (max-width: 820px) {
    .ed-head { grid-template-columns: 1fr; gap: clamp(16px, 3vh, 26px); }
    .ed-head__lede { max-width: 60ch; padding-top: 0; }
  }


  /* ============================================================
     HAPPYROBOT-CLONE SECTIONS (placeholder content, appended) 
     Scoped class prefixes: cr- wk- pf- rw- ph- cb-
     ============================================================ */

  /* ===== HR SECTION: cta-band ===== */
.cb-band {
  background: var(--navy);
  padding: 0;
}
.cb-panel {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  width: 100%;
  border-radius: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(104px, 13vw, 184px) 24px;
}
.cb-panel__orb {                            /* ambient particle field behind the CTA */
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(660px, 94%); aspect-ratio: 1;
  opacity: 0.42; pointer-events: none;
}
.cb-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(26px, 4vh, 42px);
  max-width: 720px;
}
.cb-title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.2rem, 3.2vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 20ch;
  color: #fff;
  margin: 0;
}
.cb-actions { display: flex; }
.cb-actions .cta { background: #fff; color: var(--navy); }
.cb-actions .cta:hover { background: rgba(255,255,255,0.9); transform: translateY(-1px); }
@media (max-width: 820px) {
  .cb-inner {
    gap: clamp(24px, 4vh, 36px);
  }
}

  /* ==========================================================================
     V3 — mnlabs-structure components, built on the v2 design system.
     Scoped prefixes: nav-links, qb (quote), fo (founder), st (steps),
     sv (service cards), au (automation), av (audiovisual), cm (community),
     fq (faq), ft (footer). Reuses .section / .ed-head / .cta / tokens.
     ========================================================================== */
  .section--sand { background: var(--bg-sand); }
  .section--tint { background: var(--bg-sand-2); }
  .tac { text-align: center; }

  /* nav centre links */
  .nav-links { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 30px); }
  .nav-links a {
    font-size: 0.875rem; color: var(--ink-60); text-decoration: none;
    letter-spacing: -0.005em; transition: color .25s var(--ease);
  }
  .nav-links a:hover { color: var(--ink); }
  @media (max-width: 860px) { .nav-links { display: none; } }

  /* founder quote band (navy, centred serif) */
  .qb { position: relative; z-index: 1; background: var(--navy); color: #fff; padding: clamp(72px,12vh,140px) 24px; }
  .qb__inner { max-width: 980px; margin: 0 auto; text-align: center; }
  .qb__eyebrow { display:block; font-size:0.75rem; letter-spacing:0.14em; text-transform:uppercase; color: rgba(255,255,255,0.45); margin-bottom: clamp(22px,4vh,38px); }
  .qb__quote { font-family: var(--display); font-weight:400; font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.14; letter-spacing:-0.02em; text-wrap: balance; }
  /* HappyRobot scroll-lit reveal: words start dim and light to white as the
     band scrolls up through the viewport (JS wraps words + toggles .is-lit). */
  .qb__word { color: rgba(255,255,255,0.26); transition: color .35s var(--ease); }
  .qb__word.is-lit { color: #fff; }
  @media (prefers-reduced-motion: reduce) { .qb__word { color: #fff; } }
  .qb__cite { margin-top: clamp(22px,3.5vh,34px); font-size:0.9rem; color: rgba(255,255,255,0.65); }
  .qb__cite strong { color:#fff; font-weight:500; }

  /* founder bio — two columns */
  .fo-grid { display:grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px,4vw,64px); align-items:center; }
  .fo-portrait { aspect-ratio: 4/5; border-radius: 10px; background: linear-gradient(150deg,#22333f,#0A1929); display:grid; place-items:center; overflow:hidden; }
  .fo-orb { width: min(100%, 360px); aspect-ratio: 1; display:block; }
  .fo-cards { display:grid; gap: clamp(22px,3vh,34px); }
  .fo-card__k { display:block; font-size:0.75rem; letter-spacing:0.05em; text-transform:uppercase; color: var(--ink); margin-bottom:10px; }
  .fo-card__t { font-family: var(--display); font-weight:400; font-size: clamp(1.35rem,2.2vw,1.85rem); line-height:1.06; letter-spacing:-0.02em; margin-bottom:12px; color: var(--ink); }
  .fo-card__b { font-size:0.95rem; line-height:1.55; color: var(--ink-60); max-width: 52ch; }
  @media (max-width: 820px){ .fo-grid{ grid-template-columns:1fr; } .fo-portrait{ max-width:320px; } }

  /* Sobre nosotros — vision (Legora-style; particle orbs instead of photos) */
  .vis__grid { display:grid; grid-template-columns: 0.82fr 1.28fr; gap: clamp(40px,6vw,96px); align-items:stretch; }
  .vis__aside { display:flex; flex-direction:column; justify-content:space-between; gap: clamp(48px,10vh,120px); }
  .vis__title { font-family: var(--display); font-weight:400; font-size: clamp(2.1rem,3.2vw,3rem); line-height:1.04; letter-spacing:-0.02em; color: var(--ink); margin-top: clamp(12px,2vh,20px); }
  .vis__founder { display:flex; align-items:flex-end; gap:18px; }
  .vis__portrait { width: clamp(120px,13vw,180px); aspect-ratio: 4/5; background: var(--ink); overflow:hidden; flex-shrink:0; }
  .vis__portrait img, .vis__panel img { width:100%; height:100%; object-fit:cover; display:block; }
  .vis__id { display:flex; flex-direction:column; gap:3px; padding-bottom:8px; }
  .vis__name { font-family: var(--font); font-weight:500; font-size:1rem; color: var(--ink); }
  .vis__role { font-size:0.9rem; color: var(--ink-60); }
  .vis__main { display:flex; flex-direction:column; gap: clamp(36px,6vh,72px); }
  .vis__copy { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,4vw,56px); }
  .vis__col { display:flex; flex-direction:column; gap: clamp(16px,2.4vh,22px); }
  .vis__col p { font-size:0.95rem; line-height:1.6; color: var(--ink-60); max-width:44ch; }
  .vis__panel { width:100%; aspect-ratio: 16/10; background: var(--ink); overflow:hidden; }
  .vis__orb { width:100%; height:100%; display:block; }
  @media (max-width: 900px){
    .vis__grid { grid-template-columns:1fr; gap: clamp(36px,6vh,56px); }
    .vis__aside { flex-direction:column; gap: clamp(28px,5vh,44px); }
  }
  @media (max-width: 768px){
    .vis__title { font-size: clamp(2rem,9vw,2.8rem); }
    .vis__copy { grid-template-columns:1fr; gap: clamp(20px,3.5vh,28px); }
    .vis__col p { max-width:none; }
    .vis__panel { aspect-ratio: 4/3; }
  }

  /* numbered steps (Formación / Proceso) */
  .st-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.6vw,24px); }
  .st-card { background:#fff; border:1px solid var(--hair); border-radius:10px; padding: clamp(24px,2.4vw,34px); display:flex; flex-direction:column; gap:14px; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
  .st-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(14,13,12,0.08); }
  .section--sand .st-card { background:#FBFBFA; }
  .st-num { width:38px; height:38px; border-radius:50%; background: var(--ink); color:#fff; display:grid; place-items:center; font-size:0.95rem; font-weight:500; }
  .st-card h3 { font-family: var(--display); font-weight:400; font-size:1.4rem; letter-spacing:-0.01em; color: var(--ink); }
  .st-card p { font-size:0.92rem; line-height:1.55; color: var(--ink-60); }
  @media (max-width: 820px){ .st-grid{ grid-template-columns:1fr; } }

  /* badge note (FUNDAE) */
  .badge-note { display:inline-flex; align-items:center; gap:8px; margin-top: clamp(28px,4vh,44px); padding:9px 18px; border-radius:100px; background: var(--bg-sand-2); border:1px solid var(--hair); font-size:0.84rem; color: var(--ink); }
  .badge-note svg { width:15px; height:15px; stroke: var(--ink); }

  /* service cards (Consultoría) 2×2 */
  .sv-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(16px,1.6vw,22px); }
  .sv-card { background:#fff; border:1px solid var(--hair); border-radius:10px; padding: clamp(22px,2vw,30px); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
  .section--sand .sv-card { background:#FBFBFA; }
  .sv-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(14,13,12,0.08); }
  .sv-card__ico { width:42px; height:42px; border-radius:9px; background: var(--bg-sand-2); display:grid; place-items:center; margin-bottom:16px; }
  .sv-card__ico svg { width:20px; height:20px; stroke: var(--ink); fill:none; }
  .sv-card h3 { font-size:1.05rem; font-weight:500; margin-bottom:8px; letter-spacing:-0.01em; color: var(--ink); }
  .sv-card p { font-size:0.9rem; line-height:1.5; color: var(--ink-60); }
  @media (max-width: 640px){ .sv-grid{ grid-template-columns:1fr; } }

  /* chatbot use-case tags */
  .tag-cloud { display:flex; flex-wrap:wrap; gap:10px; }
  .tag { padding:9px 16px; border-radius:100px; background:#fff; border:1px solid var(--hair); font-size:0.88rem; color: var(--ink); transition: background .25s var(--ease); }
  .section--sand .tag { background:#FBFBFA; }
  .tag:hover { background: var(--bg-sand-2); }


  /* Cómo trabajamos — scroll-pinned particle-morph chapter (pure-white stage) */
  .hww { position: relative; height: 360vh; background: #FFFFFF; }
  /* feather the seam between the warm page and the pure-white stage */
  .hww::before, .hww::after { content:""; position:absolute; left:0; right:0; height:64px; pointer-events:none; z-index:2; }
  .hww::before { top:0; background: linear-gradient(#FBFBFA, #FFFFFF); }
  .hww::after { bottom:0; background: linear-gradient(#FFFFFF, #FBFBFA); }
  .hww__sticky { position: sticky; top: var(--nav-h); height: calc(100svh - var(--nav-h)); display:flex; align-items:center; overflow:hidden; }
  .hww__grid { display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,80px); align-items:center; max-width:1280px; width:100%; margin:0 auto; padding:0 24px; }
  .hww__steps { max-width:520px; }
  .hww__title { margin-top: clamp(12px,2vh,20px); }
  .hww__list { list-style:none; margin-top: clamp(24px,4vh,44px); }
  .hww-step { border-top:1px solid var(--hair); padding: clamp(15px,2.1vh,23px) 0; opacity:.34; transition: opacity .5s var(--ease); }
  .hww-step__num { font-family: var(--font); font-size:12px; letter-spacing:.08em; color: var(--ink-60); font-variant-numeric: tabular-nums; transition: color .4s var(--ease); }
  .hww-step__t { font-family: var(--display); font-weight:400; font-size: clamp(1.4rem,2.4vw,1.9rem); letter-spacing:-0.01em; color: var(--ink); margin-top:6px; }
  .hww-step__wrap { display:grid; grid-template-rows:0fr; opacity:0; transition: grid-template-rows .55s var(--ease), opacity .45s var(--ease); }
  .hww-step__wrap > * { overflow:hidden; min-height:0; }
  .hww-step__b { color: var(--ink-60); margin-top:10px; line-height:1.55; max-width:42ch; }
  .hww-step.is-active { opacity:1; }
  .hww-step.is-active .hww-step__num { color: var(--navy); }
  .hww-step.is-active .hww-step__wrap { grid-template-rows:1fr; opacity:1; }
  .hww-step.is-past { opacity:.5; }
  .hww-step.is-past .hww-step__num { color: var(--ink); }
  .hww__pane { width:100%; display:flex; align-items:center; justify-content:center; }
  .hww__canvas { width:100%; aspect-ratio:1/1; max-height:70vh; display:block; }
  @media (prefers-reduced-motion: reduce) {
    .hww-step, .hww-step__wrap { transition:none; opacity:1; }
    .hww-step__wrap { grid-template-rows:1fr; }
  }
  /* Mobile "Cómo trabajamos": the desktop 360vh pinned scroll-scrub is off on
     phones (JS staticMode paints the finished orb once). Restyle that static
     state as a calm orb emblem + a connected numbered vertical stepper. */
  @media (max-width: 768px) {
    .hww { height:auto; }
    .hww__sticky { position:static; height:auto; padding: clamp(48px,8vh,80px) 0; }
    .hww__grid { grid-template-columns:1fr; gap: clamp(26px,5vh,40px); }
    .hww__steps { max-width:none; }
    .hww__pane { order:-1; margin-bottom: clamp(8px,2vh,16px); }
    .hww__canvas { width: min(200px,54vw); max-width:200px; height:auto; aspect-ratio:1/1; margin:0 auto; }
    .hww__title { font-size: clamp(2rem,8vw,2.6rem); }
    .hww__list { margin-top: clamp(22px,4vh,32px); }
    .hww-step { position:relative; border-top:0; opacity:1; padding: 0 0 clamp(22px,3.6vh,32px) 44px; }
    .hww-step:last-child { padding-bottom:0; }
    .hww-step::before { content:""; position:absolute; left:13.5px; top:6px; bottom:0; width:1px; background: var(--hair); }
    .hww-step:last-child::before { display:none; }
    .hww-step__num { position:absolute; left:0; top:0; width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--bg); border:1px solid var(--hair); color: var(--navy); font-size:11px; z-index:1; }
    .hww-step__wrap { grid-template-rows:1fr; opacity:1; }
    .hww-step__t { font-size:1.3rem; margin-top:1px; }
    .hww-step__b { font-size:1rem; line-height:1.6; max-width:none; margin-top:8px; }
  }

  /* community testimonials + big stat */
  .cm-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.6vw,22px); }
  .cm-card { background:#fff; border:1px solid var(--hair); border-radius:10px; padding: clamp(22px,2vw,28px); display:flex; flex-direction:column; gap:18px; }
  .cm-card p { font-size:0.95rem; line-height:1.5; color: var(--ink); }
  .cm-who { display:flex; align-items:center; gap:11px; margin-top:auto; }
  .cm-av { width:36px; height:36px; border-radius:50%; background: linear-gradient(150deg,#22333f,#0A1929); flex-shrink:0; }
  .cm-who b { font-size:0.85rem; font-weight:500; display:block; color: var(--ink); }
  .cm-who span { font-size:0.78rem; color: var(--ink-60); }
  .cm-stat { text-align:center; margin-top: clamp(44px,6vh,72px); }
  .cm-stat b { font-family: var(--display); font-weight:400; font-size: clamp(3rem,7vw,5rem); letter-spacing:-0.03em; color: var(--ink); }
  .cm-stat span { display:block; font-size:0.95rem; color: var(--ink-60); margin-top:4px; }
  @media (max-width: 820px){ .cm-grid{ grid-template-columns:1fr; } }

  /* FAQ accordion */
  .fq-list { max-width: 820px; margin: clamp(8px,2vh,20px) auto 0; border-top:1px solid var(--hair); }
  .fq-item { border-bottom:1px solid var(--hair); }
  .fq-item summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:18px; padding: clamp(18px,2.4vh,24px) 4px; font-size:1.02rem; font-weight:500; color: var(--ink); }
  .fq-item summary::-webkit-details-marker { display:none; }
  .fq-ico { position:relative; flex-shrink:0; width:20px; height:20px; transition: transform .3s var(--ease); }
  .fq-item[open] .fq-ico { transform: rotate(45deg); }
  .fq-ico::before, .fq-ico::after { content:""; position:absolute; background: var(--ink); }
  .fq-ico::before { left:0; top:9px; width:20px; height:2px; }
  .fq-ico::after { top:0; left:9px; width:2px; height:20px; }
  .fq-ico::before, .fq-ico::after { transition: transform .3s var(--ease); }
  /* Smooth open/close: JS wraps the body in .fq-reveal (overflow-clipped, height
     animated); the body fades + slides slightly so it doesn't feel stiff. */
  .fq-reveal { overflow:hidden; height:0; transition: height .44s cubic-bezier(0.22,1,0.36,1); }
  .fq-item__body { padding: 0 4px clamp(20px,2.6vh,26px); font-size:0.95rem; line-height:1.6; color: var(--ink-60); max-width: 66ch; opacity:0; transform: translateY(-6px); transition: opacity .34s var(--ease), transform .44s cubic-bezier(0.22,1,0.36,1); }
  .fq-item[open] .fq-item__body { opacity:1; transform: none; }
  @media (prefers-reduced-motion: reduce) { .fq-reveal, .fq-item__body { transition:none; } }

  /* integraciones — big navy band, two cycling columns (AI + tools) paired by a + */
  .ic-section { background: var(--navy); color:#fff; padding: clamp(96px,16vh,184px) 24px; }
  .ic-head { text-align:center; max-width: 760px; margin: 0 auto clamp(52px,9vh,96px); }
  .ic-eyebrow { display:block; color: rgba(255,255,255,0.5); }
  .ic-title { font-family: var(--display); font-weight:400; font-size: clamp(2.2rem,4vw,3.4rem); line-height:1.06; letter-spacing:-0.02em; color:#fff; margin-top: clamp(16px,2.6vh,28px); text-wrap:balance; }
  .ic-sub { margin: clamp(18px,2.8vh,28px) auto 0; max-width: 48ch; font-size:1rem; line-height:1.55; color: rgba(255,255,255,0.6); }
  .ic-pair { display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: clamp(16px,3vw,52px); max-width: 1120px; margin: 0 auto; }
  .ic-col { position:relative; overflow:hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 34%, #000 66%, transparent 100%);
  }
  .ic-col--ai { text-align:right; }
  .ic-col--tool { text-align:left; }
  .ic-track { will-change: transform; }
  .ic-item { font-family: var(--display); font-weight:400; font-size: clamp(1.7rem,3.4vw,3rem); line-height:1.5; letter-spacing:-0.02em; white-space:nowrap; transition: color .55s var(--ease); }
  .ic-col--ai .ic-item { color: rgba(255,255,255,0.20); }
  .ic-col--ai .ic-item.is-active { color:#fff; }
  .ic-col--tool .ic-item { color: rgba(255,255,255,0.20); }
  .ic-col--tool .ic-item.is-active { color:#fff; }
  .ic-plus { font-family: var(--display); font-size: clamp(1.5rem,3vw,2.6rem); color: rgba(255,255,255,0.38); line-height:1; }
  /* Mobile Integraciones: stack to ONE centred item per column (paired with
     JS VISIBLE=3) so it reads "Claude / + / Slack" — one AI+tool pairing, no
     orphaned "+", long names stay inside the clipped column. */
  @media (max-width: 768px) {
    .ic-head { margin-bottom: clamp(36px,6vh,60px); }
    .ic-pair { grid-template-columns: 1fr; gap: 6px; max-width: 440px; margin: 0 auto; }
    .ic-col--ai, .ic-col--tool { text-align:center; }
    .ic-item { font-size: clamp(1.5rem,5.8vw,2.05rem); line-height:1.5; }
    .ic-plus { font-size: 1.6rem; color: rgba(255,255,255,0.5); margin: 0 auto; }
  }
  @media (max-width: 480px) {
    .ic-item { font-size: clamp(1.4rem,6.4vw,1.9rem); letter-spacing: -0.03em; }
  }
  @media (prefers-reduced-motion: reduce) { .ic-item { transition:none; } }

  /* SERVICIOS — Harvey-style vertical capabilities cycle on a warm panel.
     [ left label | center cycling list | right ghost CTA ] */
  .svc { background: var(--bg); min-height: 100svh; display: flex; align-items: center; padding: clamp(60px,9vh,110px) 24px; }
  .svc__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(150px,0.8fr) auto minmax(150px,0.8fr); gap: clamp(28px,5vw,72px); align-items: center; }
  .svc__label { font-size: 1rem; line-height: 1.45; color: var(--ink); font-weight: 500; max-width: 20ch; }
  .svc__cycle { position: relative; overflow: hidden; width: 100%; justify-self: center;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 32%, #000 68%, transparent 100%); }
  .svc__track { will-change: transform; }
  .svc-item { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem,3.6vw,3.1rem); line-height: 1.42; letter-spacing: -0.02em; color: rgba(14,13,12,0.18); text-align: center; white-space: nowrap; transition: color .55s var(--ease); }
  .svc-item.is-active { color: var(--ink); }
  .svc__cta { justify-self: end; margin-top: 0; }
  @media (prefers-reduced-motion: reduce) { .svc-item { transition: none; } }
  @media (max-width: 768px) {
    .svc { min-height: auto; padding: clamp(64px,11vh,110px) var(--gutter); }
    .svc__inner { grid-template-columns: 1fr; gap: clamp(20px,4vh,32px); justify-items: center; text-align: center; }
    .svc__label { max-width: 28ch; text-align: center; }
    .svc-item { font-size: clamp(1.7rem,7vw,2.4rem); }
    .svc__cta { justify-self: center; width: 100%; max-width: 320px; justify-content: center; }
  }

  /* compliance & security band (navy, hairline-divided cert columns) */
  .cmpl { background: var(--navy); color:#fff; }
  .cmpl__head { max-width: 620px; margin-bottom: clamp(72px, 13vh, 170px); }
  .cmpl__title { font-family: var(--display); font-weight:400; font-size: clamp(1.9rem,3.4vw,2.9rem); line-height:1.08; letter-spacing:-0.02em; color:#fff; text-wrap:balance; }
  .cmpl__lead { margin-top: clamp(34px,5vh,64px); max-width: 52ch; font-size:0.95rem; line-height:1.65; color: rgba(255,255,255,0.6); }
  .cmpl__grid { display:grid; grid-template-columns: repeat(5,1fr); border-top:1px solid rgba(255,255,255,0.14); }
  .cmpl__cert { display:flex; flex-direction:column; min-height: 300px; padding: clamp(26px,2.2vw,34px) clamp(16px,1.5vw,26px) clamp(28px,3vh,38px); border-left:1px solid rgba(255,255,255,0.14); }
  .cmpl__cert:first-child { border-left:0; padding-left:0; }
  .cmpl__cert h3 { font-size:1.02rem; font-weight:500; color:#fff; margin-bottom:12px; letter-spacing:-0.01em; }
  .cmpl__cert p { font-size:0.88rem; line-height:1.55; color: rgba(255,255,255,0.55); }
  .cmpl__seal { margin-top:auto; padding-top: 28px; }
  .cmpl__seal svg { width:58px; height:58px; display:block; }
  @media (max-width: 900px) {
    .cmpl__grid { grid-template-columns: repeat(2,1fr); }
    .cmpl__cert { min-height:0; padding: 26px 22px 30px; border-left:1px solid rgba(255,255,255,0.14); border-top:1px solid rgba(255,255,255,0.14); }
    .cmpl__cert:first-child { padding-left:22px; }
    .cmpl__cert:nth-child(odd) { border-left:0; padding-left:0; }
    .cmpl__seal { padding-top: 22px; }
  }
  @media (max-width: 560px) {
    .cmpl__grid { grid-template-columns: 1fr; border-top:0; }
    .cmpl__cert, .cmpl__cert:first-child, .cmpl__cert:nth-child(odd) { border-left:0; padding: 26px 0; border-top:1px solid rgba(255,255,255,0.14); }
    .cmpl__seal { padding-top: 18px; }
  }

  /* CTA-final extras */
  .cb-sub { margin: clamp(14px,2vh,18px) auto 0; max-width: 54ch; font-size:1rem; line-height:1.5; color: rgba(255,255,255,0.72); }
  .cb-chips { display:flex; gap:22px; justify-content:center; flex-wrap:wrap; margin-top: clamp(18px,2.4vh,24px); font-size:0.85rem; color: rgba(255,255,255,0.6); }
  .cb-chips span { display:inline-flex; align-items:center; gap:7px; }
  .cb-chips svg { width:15px; height:15px; stroke: currentColor; fill:none; }

  /* footer */
  .ft { position: relative; z-index:1; background: var(--navy); color:#fff; padding: clamp(56px,8vh,90px) 24px clamp(28px,4vh,38px); }
  .ft__inner { max-width:1280px; margin:0 auto; }
  .ft__top { display:grid; grid-template-columns: 1.25fr 2fr; gap: clamp(40px,6vw,96px); padding-bottom: clamp(40px,6vh,60px); border-bottom:1px solid rgba(255,255,255,0.12); }
  .ft__brand-col { display:flex; flex-direction:column; align-items:flex-start; gap: clamp(16px,2.4vh,24px); max-width: 30ch; }
  .ft__brand { display:flex; align-items:center; gap:10px; }
  .ft__brand .brand-word { color:#fff; font-size:1.05rem; }
  .ft__lead { font-family: var(--display); font-weight:400; font-size: clamp(1.4rem,2.4vw,2rem); letter-spacing:-0.02em; line-height:1.15; color:#fff; max-width: 20ch; }
  .ft__brand-col .cta { background:#fff; color: var(--navy); margin-top: clamp(4px,1vh,10px); }
  .ft__brand-col .cta:hover { background: rgba(255,255,255,0.9); }
  .ft__cols { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(24px,3vw,52px); }
  .ft__col { display:flex; flex-direction:column; gap:11px; }
  .ft__col-h { font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color: rgba(255,255,255,0.5); margin-bottom:5px; }
  .ft__col a { color: rgba(255,255,255,0.72); text-decoration:none; font-size:0.92rem; transition: color .25s var(--ease); }
  .ft__col a:hover { color:#fff; }
  .ft__bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:22px; font-size:0.82rem; color: rgba(255,255,255,0.5); }
  .ft__links a { color: rgba(255,255,255,0.5); text-decoration:none; margin-left:20px; }
  .ft__links a:hover { color:#fff; }
  .ft .cta { background:#fff; color: var(--navy); }
  .ft .cta:hover { background: rgba(255,255,255,0.88); }

  /* ==========================================================================
     MOBILE OVERHAUL — everything below is scoped to max-width (or reduced-motion)
     so desktop (>768, >860 for nav) stays pixel-identical. Designed via a
     multi-agent mobile workflow. Order matters: 768 block, then 480 refinements,
     then reduced-motion.
     ========================================================================== */

  /* ---- Mobile nav: burger + full-screen overlay (scoped to 860 to match the
     breakpoint where .nav-links already vanish, closing that dead zone) ---- */
  .nav-burger { display: none; }
  .mobile-menu { display: none; }
  body.menu-open { overflow: hidden; }
  @media (max-width: 860px) {
    /* Mobile nav = burger only (HappyRobot pattern); the CTA lives in the menu. */
    .nav-cta { display: none; }
    .nav-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; margin-right: -6px; padding: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
    .nav-burger span { display: block; width: 20px; height: 1.5px; margin: 0 auto; background: var(--ink); border-radius: 2px; transition: transform .35s var(--ease), opacity .2s var(--ease); }
    .nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
    .nav-burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
    .mobile-menu { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 40; padding: calc(var(--nav-h) + 26px) 22px 28px; background: var(--bg); background-image: radial-gradient(120% 78% at 50% 0%, rgba(235,230,210,0.55) 0%, rgba(251,251,250,0) 58%); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .4s var(--ease), transform .4s var(--ease), visibility .4s; }
    .mobile-menu.is-open { opacity: 1; visibility: visible; transform: none; }
    .mobile-menu__links { display: flex; flex-direction: column; }
    .mobile-menu__links a { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; padding: 15px 0; border-bottom: 1px solid var(--hair); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
    .mobile-menu.is-open .mobile-menu__links a { opacity: 1; transform: none; }
    .mobile-menu.is-open .mobile-menu__links a:nth-child(1){ transition-delay:.06s; }
    .mobile-menu.is-open .mobile-menu__links a:nth-child(2){ transition-delay:.12s; }
    .mobile-menu.is-open .mobile-menu__links a:nth-child(3){ transition-delay:.18s; }
    .mobile-menu.is-open .mobile-menu__links a:nth-child(4){ transition-delay:.24s; }
    .mobile-menu__cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: auto; width: 100%; min-height: 54px; box-sizing: border-box; border-radius: 4px; background: var(--ink); color: var(--btn-fg); font-family: var(--font); font-size: 1rem; font-weight: 400; letter-spacing: -0.005em; text-decoration: none; }
    .mobile-menu__cta svg { width: 16px; height: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .nav-burger span { transition: none; }
    .mobile-menu { transition: opacity .2s linear, visibility .2s; transform: none; }
    .mobile-menu__links a { transition: opacity .3s linear; transform: none; }
  }

  /* ---- Consolidated mobile (<=768) ---- */
  @media (max-width: 768px) {
    /* gutter + vertical rhythm */
    :root { --gutter: 20px; }
    .feature { padding: clamp(48px,9vh,80px) var(--gutter) clamp(64px,12vh,104px); }
    .section { padding: clamp(52px,7vh,72px) var(--gutter); }
    .qb { padding: clamp(56px,10vh,96px) var(--gutter); }
    .ic-section { padding: clamp(64px,10vh,104px) var(--gutter); }
    .ft { padding-left: var(--gutter); padding-right: var(--gutter); }
    .cb-band { padding: var(--gutter); }
    .cb-panel { padding: clamp(64px,10vw,96px) var(--gutter); }
    /* body-copy 16px floor */
    .ed-head__lede, .fo-card__b, .st-card p, .sv-card p, .au-why__item p,
    .av-card > p, .av-list li, .cm-card p, .fq-item__body, .cmpl__lead,
    .cmpl__cert p, .cb-sub, .ic-sub { font-size: 1rem; }
    /* touch targets */
    .cta { min-height: 48px; padding: 13px 20px; font-size: 15px; }
    .nav-cta { min-height: 44px; }
    .tag { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 18px; }
    /* hero */
    h1 { font-size: clamp(2.4rem, 6.6vw, 3.5rem); }
    .subhead { font-size: 1rem; }
    .hero { min-height: 480px; }
    .hero__body .cta { display: flex; width: 100%; max-width: 340px; margin-left: auto; margin-right: auto; justify-content: center; }
    /* client logos */
    .client-eyebrow { font-size: 0.8rem; max-width: 24ch; margin: 0 auto; text-wrap: balance; }
    .client-grid { margin-top: clamp(32px,5vh,44px); column-gap: 28px; row-gap: clamp(26px,4.5vh,38px); }
    .client-grid img { height: 28px; opacity: 0.55; }
    /* founder quote */
    .qb__eyebrow { margin-bottom: 20px; }
    .qb__quote { font-size: clamp(1.5rem, 6.4vw, 2rem); line-height: 1.2; }
    .qb__word { color: rgba(255,255,255,0.34); }
    /* founder bio */
    .fo-grid { gap: clamp(28px,4.5vh,40px); }
    .fo-portrait { width: 100%; max-width: 300px; margin-inline: auto; aspect-ratio: 1/1; }
    .fo-orb { width: min(100%, 300px); }
    .fo-cards { gap: clamp(24px,3.4vh,32px); }
    .fo-card__t { font-size: 1.3rem; }
    .fo-card__b { line-height: 1.6; }
    /* editorial headers */
    .ed-head { gap: 12px; padding-bottom: clamp(22px,3.5vh,32px); margin-bottom: clamp(34px,5vh,52px); }
    .ed-head__title { margin-top: 12px; font-size: clamp(1.9rem,6.8vw,2.4rem); line-height: 1.08; }
    .ed-head__lede { margin-top: 2px; line-height: 1.55; max-width: none; }
    .ed-head--center { margin-bottom: clamp(40px,6vh,64px); }
    .ed-head--center .ed-head__title { margin-top: 16px; font-size: clamp(1.9rem,6.8vw,2.4rem); }
    .ed-head--center .ed-head__lede { margin-top: clamp(18px,2.6vh,26px); }
    /* Formación steps + FUNDAE */
    .st-grid { gap: 14px; }
    .st-card { padding: 22px 20px; gap: 12px; }
    .st-card h3 { font-size: 1.28rem; }
    .st-card p { line-height: 1.55; }
    .st-card:active { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,13,12,0.08); }
    .badge-note { padding: 12px 20px; font-size: 0.92rem; }
    /* Consultoría */
    .sv-card { padding: 22px 20px; }
    .sv-card h3 { font-size: 1.05rem; }
    .sv-card p { line-height: 1.5; }
    .sv-card:active { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(14,13,12,0.08); }
    .partner-row { gap: 24px 28px; margin-top: clamp(22px,3vh,30px); }
    .partner-row img { height: 22px; opacity: 0.8; }
    /* Automatizaciones + Audiovisual */
    .av-card { padding: 24px 22px; border-radius: 12px; }
    .av-card h3 { font-size: 1.45rem; }
    .av-card > p { line-height: 1.55; max-width: none; }
    .av-list li { line-height: 1.55; }
    .au-code__bar { padding: 10px 13px; }
    .au-code__name { font-size: 0.7rem; }
    .au-code pre { font-size: 0.68rem; line-height: 1.65; padding: 14px 15px; -webkit-overflow-scrolling: touch; }
    /* Comunidad */
    .cm-grid { gap: 14px; }
    .cm-card { padding: 24px 22px; }
    .cm-card p { line-height: 1.55; }
    .cm-stat { margin-top: clamp(36px,6vh,56px); }
    /* Compliance → single-column list, seal on top, no orphan */
    .cmpl__head { margin-bottom: clamp(40px,7vh,64px); }
    .cmpl__grid { grid-template-columns: 1fr; border-top: 1px solid rgba(255,255,255,0.14); }
    .cmpl__cert, .cmpl__cert:first-child, .cmpl__cert:nth-child(odd) { min-height: 0; border-left: 0; border-top: 0; border-bottom: 1px solid rgba(255,255,255,0.14); padding: 24px 2px; }
    .cmpl__cert:last-child { border-bottom: 0; padding-bottom: 0; }
    .cmpl__seal { order: -1; margin: 0 0 14px; padding-top: 0; }
    .cmpl__seal svg { width: 44px; height: 44px; }
    .cmpl__cert h3 { font-size: 1.08rem; margin-bottom: 7px; }
    /* FAQ */
    .fq-item summary { padding: 20px 2px; font-size: 1.05rem; gap: 14px; min-height: 56px; -webkit-tap-highlight-color: transparent; }
    .fq-item__body { line-height: 1.65; padding: 0 2px 22px; }
    .fq-ico { width: 22px; height: 22px; }
    .fq-ico::before { top: 10px; left: 0; width: 22px; }
    .fq-ico::after { left: 10px; top: 0; height: 22px; }
    /* CTA final */
    .cb-actions { width: 100%; justify-content: center; }
    .cb-actions .cta { width: 100%; max-width: 360px; }
    .cb-chips { gap: 12px 20px; }
    /* Footer */
    .ft__top { grid-template-columns: 1fr; gap: clamp(36px,6vh,48px); }
    .ft__brand-col { max-width: none; }
    .ft__brand-col .cta { width: 100%; max-width: 360px; justify-content: center; }
    .ft__cols { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
    .ft__lead { font-size: clamp(1.5rem, 7vw, 1.9rem); max-width: none; }
    .ft__bottom { flex-direction: column; gap: 14px; }
    .ft__links { display: flex; gap: 16px 20px; flex-wrap: wrap; }
    .ft__links a { margin-left: 0; min-height: 44px; display: inline-flex; align-items: center; }
  }

  /* ---- Phone refinements (<=480) ---- */
  @media (max-width: 480px) {
    :root { --gutter: 16px; }
    h1 { font-size: clamp(1.95rem, 8.6vw, 2.5rem); }   /* keep the smaller phone hero headline (wins over the 768 cap) */
    .nav-cta { min-width: 44px; min-height: 44px; }
    .client-grid { column-gap: 20px; row-gap: 30px; }
    .client-grid img { height: 26px; }
    .qb__quote { font-size: clamp(1.5rem, 6.6vw, 2rem); }
    .fo-portrait { max-width: 240px; }
    .fo-orb { width: min(100%, 240px); }
    .ed-head__title, .ed-head--center .ed-head__title { font-size: clamp(1.72rem, 7.6vw, 2.05rem); }
    .sv-grid { gap: 14px; }
    .av-card { padding: 22px 18px; }
    .av-metrics { gap: 16px; }
    .av-metric b { font-size: 1.55rem; }
    .au-code pre { font-size: 0.62rem; padding: 13px; }
    .cm-card { padding: 22px 18px; }
    /* headline caps + break-word safety (after section rules so they resolve first) */
    .ic-title { font-size: clamp(1.9rem, 8vw, 2.3rem); }
    .cmpl__title { font-size: clamp(1.75rem, 7.4vw, 2.2rem); }
    .feature h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
    .cb-title { font-size: clamp(1.9rem, 8vw, 2.4rem); }
    .ft__lead { font-size: clamp(1.5rem, 6vw, 1.9rem); }
    .cm-stat b { font-size: clamp(2.8rem, 13vw, 3.6rem); }
    h1, h2, .ic-title, .cmpl__title, .qb__quote, .ed-head__title,
    .cb-title, .ft__lead, .fo-card__t, .av-card h3, .hww-step__t { overflow-wrap: break-word; }
  }

  /* ---- Reduced-motion: no reveal animations, no card transitions ---- */
  @media (prefers-reduced-motion: reduce) {
    .reveal-up { opacity: 1 !important; transform: none !important; transition: none; }
    .st-card, .sv-card, .cm-card { transition: none; }
  }

  /* ===== Service detail pages (automatizaciones, formaciones, …) ===== */
  .sp-hero { position: relative; padding: calc(var(--nav-h) + clamp(64px,11vh,140px)) 24px clamp(40px,6vh,72px); text-align: center; }
  .sp-hero__eyebrow { display:inline-block; font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color: var(--ink-60); margin-bottom: clamp(16px,2.4vh,24px); }
  .sp-hero__title { font-family: var(--display); font-weight:400; font-size: clamp(2.6rem,5.6vw,4.6rem); line-height:1.0; letter-spacing:-0.025em; color: var(--ink); max-width: 15ch; margin: 0 auto; }
  .sp-hero__sub { margin: clamp(20px,2.8vh,30px) auto 0; max-width: 54ch; font-size: 1.05rem; line-height:1.5; color: var(--ink-60); }
  .sp-hero .cta { margin-top: clamp(26px,3.6vh,40px); }
  .sp-hero__visual { max-width: 1040px; margin: clamp(48px,7vh,84px) auto 0; }
  .sp-hero__visual .au-code { max-width: 720px; margin: 0 auto; background: var(--navy); border-color: rgba(255,255,255,0.12); box-shadow: 0 40px 80px -40px rgba(14,13,12,0.45); text-align: left; }
  .brand { color: var(--ink); }

  /* generic capability grid reused across service pages */
  .cap-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(16px,1.8vw,26px); margin-top: clamp(28px,4vh,44px); }
  .cap { border-top:1px solid var(--hair); padding: clamp(20px,2.4vh,28px) 0 0; }
  .cap__ico { width:34px; height:34px; color: var(--ink); margin-bottom:16px; }
  .cap__ico svg { width:100%; height:100%; stroke: currentColor; fill:none; }
  .cap h3 { font-family: var(--display); font-weight:400; font-size:1.3rem; letter-spacing:-0.01em; color: var(--ink); margin-bottom:9px; }
  .cap p { font-size:0.95rem; line-height:1.55; color: var(--ink-60); max-width:34ch; }
  @media (max-width: 820px){ .cap-grid { grid-template-columns:1fr; gap: 4px; } }
  @media (max-width: 768px){ .sp-hero__title { font-size: clamp(2.2rem,10vw,3rem); } }

  /* ===== HappyRobot-faithful feature system (service pages v2) ===== */
  .hr-hero { text-align:center; padding: calc(var(--nav-h) + clamp(70px,12vh,150px)) 24px clamp(20px,4vh,44px); }
  .hr-hero__eyebrow { display:inline-block; font-size:0.75rem; letter-spacing:0.025em; text-transform:uppercase; color:var(--ink); margin-bottom: clamp(16px,2.2vh,22px); }
  .hr-hero__title { font-family:var(--display); font-weight:400; font-size:clamp(3rem,7vw,5.4rem); line-height:0.98; letter-spacing:-0.03em; color:var(--ink); max-width:15ch; margin:0 auto; }
  .hr-hero__sub { margin: clamp(20px,3vh,30px) auto 0; max-width:48ch; font-size:1rem; line-height:1.5; color:var(--ink-60); }
  .hr-hero .cta { margin-top: clamp(24px,3.4vh,36px); }
  .hr-stage { max-width:1180px; margin: clamp(48px,7vh,88px) auto 0; border:1px solid var(--hair); background: linear-gradient(120deg,#efe4d2 0%,#c7d2dd 42%,#d8cfe0 68%,#f0e7d8 100%); padding: clamp(40px,5vw,66px) clamp(24px,5vw,66px); overflow:hidden; min-height: clamp(300px,42vw,520px); display:flex; align-items:center; justify-content:center; }

  .hr-feature { padding: clamp(56px,9vh,120px) 0; }
  .hr-feature__inner { max-width:1240px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(40px,5vw,96px); align-items:center; }
  .hr-feature--flip .hr-feature__panel { order:2; }
  .hr-feature__panel { background: var(--bg-sand); border:1px solid var(--hair); min-height: clamp(360px,32vw,460px); display:grid; place-items:center; padding: clamp(26px,3.4vw,50px); position:relative; overflow:hidden; }
  .hr-feature__eyebrow { display:block; font-size:0.75rem; letter-spacing:0.025em; text-transform:uppercase; color:var(--ink); }
  .hr-feature__title { font-family:var(--display); font-weight:400; font-size:clamp(2rem,3.3vw,3rem); line-height:1.0; letter-spacing:-0.02em; color:var(--ink); margin-top:14px; max-width:16ch; }
  .hr-caplist { margin-top: clamp(22px,3vh,34px); }
  .hr-cap { padding: clamp(17px,2.3vh,23px) 0; border-top:1px solid var(--hair); }
  .hr-cap:last-child { border-bottom:1px solid var(--hair); }
  .hr-cap h3 { font-family:var(--font); font-weight:500; font-size:1rem; color:var(--ink); margin-bottom:7px; }
  .hr-cap p { font-size:0.95rem; line-height:1.56; color:var(--ink-60); max-width:46ch; }


  @media (max-width: 900px){
    .hr-feature__inner { grid-template-columns:1fr; gap: clamp(28px,4vh,40px); }
    .hr-feature--flip .hr-feature__panel { order:0; }
    .hr-hero__title { font-size: clamp(2.7rem,12.6vw,3.4rem); line-height: 0.95; }
    .hr-stage { min-height:auto; padding: clamp(24px,6vw,40px) clamp(20px,5vw,32px); }
    /* HR mobile proportions (measured on happyrobot.ai): eyebrow -> 24px -> title; h2 36px */
    .hr-hero__eyebrow { margin-bottom: 24px; }
    .hr-feature__title { margin-top: 24px; font-size: clamp(2.1rem,9.2vw,2.25rem); }
  }


  /* ===== Motion polish — mockups animate in on reveal (safe: visible by default) ===== */
  @media (prefers-reduced-motion: no-preference) {
    @keyframes mkRise { from { opacity:0; transform: translateY(16px) scale(0.985); } to { opacity:1; transform:none; } }
    @keyframes mkDraw { from { stroke-dashoffset: 460; } to { stroke-dashoffset: 0; } }
    .hr-feature__panel.in .mk, .hr-feature__panel.in .au-code, .hr-feature__panel.in .partner-row,
    .hr-feature__panel.in .av-metrics, .hr-feature__panel.in .av-list,
    .hr-feature__panel.in .mk-stack > *, .hr-stage.in .mk-stack > *, .hr-stage.in > .mk {
      animation: mkRise .7s var(--ease) both;
    }
    .hr-feature__panel.in .mk-stack > *:nth-child(2), .hr-stage.in .mk-stack > *:nth-child(2){ animation-delay:.07s }
    .hr-feature__panel.in .mk-stack > *:nth-child(3), .hr-stage.in .mk-stack > *:nth-child(3){ animation-delay:.14s }
    .hr-feature__panel.in .mk-stack > *:nth-child(4), .hr-stage.in .mk-stack > *:nth-child(4){ animation-delay:.21s }
    .hr-feature__panel.in .mk-stack > *:nth-child(5), .hr-stage.in .mk-stack > *:nth-child(5){ animation-delay:.28s }
    .hr-feature__panel.in .mk-chart .line { animation: mkDraw 1.15s var(--ease) .25s both; }
  }

  /* ============================================================
     Rich product-UI mockups (HappyRobot-grade). Composed from CSS/SVG only.
     ============================================================ */
  /* panels: bigger, mockup can bleed to an edge like a window into the app */
  .hr-feature__panel { padding: clamp(30px,3.6vw,54px); }
  .hr-feature__panel--bleed { padding: 0; }
  .hr-feature__panel--bleed .ui { border-radius: 16px 0 0 16px; }
  .hr-feature__panel--dark { background: linear-gradient(150deg,#11202e,#0A1929 60%,#141b26); }
  .hr-feature__panel--sage { background: #c7d3c0; }
  .hr-feature__panel--warm { background: linear-gradient(150deg,#efe4d2,#e6dcc8); }
  .hr-feature__stagewrap { width:100%; max-width:520px; }

  .ui { background:#fff; border:1px solid rgba(14,13,12,0.07); border-radius:16px; box-shadow: 0 34px 70px -34px rgba(14,13,12,0.42), 0 2px 8px -2px rgba(14,13,12,0.08); overflow:hidden; text-align:left; width:100%; }
  .ui__bar { display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid rgba(14,13,12,0.06); }
  .ui__bar h4 { font-family:var(--font); font-size:0.84rem; font-weight:600; color:var(--ink); }
  .ui__bar .sp { margin-left:auto; }
  .ui__body { padding:15px 16px; }
  .ui__pad { padding:16px; }

  .ui-metrics { display:grid; grid-template-columns: repeat(4,1fr); gap:9px; }
  .ui-metric { border:1px solid rgba(14,13,12,0.08); border-radius:11px; padding:11px 12px; }
  .ui-metric__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }
  .ui-metric__l { font-size:0.62rem; letter-spacing:0.01em; color:var(--ink-60); }
  .ui-metric__ico { width:22px; height:22px; border-radius:7px; display:grid; place-items:center; font-size:0.7rem; }
  .ui-metric__ico svg { width:13px; height:13px; }
  .ui-metric__v { font-size:1.18rem; font-weight:600; color:var(--ink); letter-spacing:-0.01em; display:flex; align-items:center; gap:6px; }

  .ui-list__h { display:flex; align-items:center; justify-content:space-between; font-size:0.66rem; color:var(--ink-60); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:9px; }
  .ui-row { display:flex; align-items:center; gap:9px; padding:6.5px 0; font-size:0.76rem; color:var(--ink); border-top:1px solid rgba(14,13,12,0.05); }
  .ui-row:first-of-type { border-top:0; }
  .ui-row .sp { margin-left:auto; color:var(--ink-60); font-size:0.7rem; }
  .dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .dot--green{ background:#22c55e; } .dot--amber{ background:#f59e0b; } .dot--red{ background:#ef4444; } .dot--blue{ background:#3b82f6; } .dot--slate{ background:#94a3b8; }
  .pulse{ position:relative; } .pulse::after{ content:''; position:absolute; inset:-3px; border-radius:50%; border:1px solid currentColor; opacity:0; animation: pulseRing 2.2s infinite; }
  @keyframes pulseRing { 0%{ transform:scale(0.6); opacity:0.5; } 100%{ transform:scale(1.9); opacity:0; } }

  .ui-av { width:36px; height:36px; border-radius:50%; flex-shrink:0; display:grid; place-items:center; font-size:0.72rem; font-weight:600; color:#fff; }
  .ui-av--a{ background:linear-gradient(135deg,#6366f1,#a855f7); } .ui-av--b{ background:linear-gradient(135deg,#0ea5e9,#22c55e); } .ui-av--c{ background:linear-gradient(135deg,#f59e0b,#ef4444); }

  .ui-chat { display:flex; flex-direction:column; gap:11px; }
  .ui-msg { max-width:84%; }
  .ui-msg__w { font-size:0.62rem; color:var(--ink-60); margin-bottom:4px; display:flex; align-items:center; gap:6px; }
  .ui-msg__b { padding:9px 12px; border-radius:13px; font-size:0.78rem; line-height:1.42; }
  .ui-msg--in .ui-msg__b { background:rgba(14,13,12,0.055); color:var(--ink); border-top-left-radius:4px; }
  .ui-msg--out { align-self:flex-end; text-align:right; }
  .ui-msg--out .ui-msg__b { background:var(--navy); color:#fff; border-top-right-radius:4px; text-align:left; }
  .type { display:inline-flex; gap:3px; align-items:center; padding:9px 12px; background:rgba(14,13,12,0.055); border-radius:13px; border-top-left-radius:4px; }
  .type span { width:5px; height:5px; border-radius:50%; background:var(--ink-60); animation: typedot 1.3s infinite; }
  .type span:nth-child(2){ animation-delay:.18s; } .type span:nth-child(3){ animation-delay:.36s; }
  @keyframes typedot { 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:.9; transform:translateY(-3px);} }

  .ui-fields { display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-top:12px; }
  .ui-field__l { display:flex; align-items:center; gap:5px; font-size:0.62rem; color:var(--ink-60); margin-bottom:4px; }
  .ui-field__l svg { width:12px; height:12px; }
  .ui-field__v { font-size:0.76rem; color:var(--ink); font-weight:500; }

  .ui-badge { display:inline-flex; align-items:center; gap:5px; padding:2.5px 8px; border-radius:100px; font-size:0.62rem; font-weight:500; }
  .ui-badge--live{ background:rgba(34,197,94,0.12); color:#15803d; } .ui-badge--warn{ background:rgba(245,158,11,0.14); color:#b45309; } .ui-badge--info{ background:rgba(59,130,246,0.12); color:#1d4ed8; }

  .ui-input { display:flex; align-items:center; gap:10px; border:1px solid rgba(14,13,12,0.1); border-radius:13px; padding:11px 14px; font-size:0.78rem; color:var(--ink-60); }
  .ui-input .sp { margin-left:auto; }
  .ui-input svg { width:15px; height:15px; color:var(--ink-60); }
  .ui-sug { border:1px solid rgba(14,13,12,0.08); border-radius:11px; padding:11px 13px; }
  .ui-sug__t { font-size:0.8rem; font-weight:500; color:var(--ink); margin-bottom:4px; }
  .ui-sug__s { font-size:0.72rem; color:var(--ink-60); line-height:1.4; }

  /* workflow nodes v2 (icon + title + subtitle, connectors) */
  .ui-node2 { display:flex; align-items:center; gap:11px; background:#fff; border:1px solid rgba(14,13,12,0.1); border-radius:12px; padding:11px 14px; box-shadow:0 14px 30px -20px rgba(14,13,12,0.42); }
  .ui-node2--on { background:var(--navy); border-color:var(--navy); }
  .ui-node2--on .ui-node2__t{ color:#fff; } .ui-node2--on .ui-node2__s{ color:rgba(255,255,255,0.6); }
  .ui-node2__ico { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex-shrink:0; background:rgba(14,13,12,0.05); }
  .ui-node2__ico svg{ width:16px; height:16px; }
  .ui-node2--on .ui-node2__ico{ background:rgba(255,255,255,0.12); }
  .ui-node2__t { font-size:0.79rem; font-weight:500; color:var(--ink); }
  .ui-node2__s { font-size:0.64rem; color:var(--ink-60); margin-top:1px; }
  .ui-wire { width:1.5px; height:20px; background:rgba(14,13,12,0.16); margin:5px 0 5px 28px; }
  .ui-wire--branch { position:relative; }

  /* app icon chip grid (integrations) */
  .ui-apps { display:grid; grid-template-columns: repeat(4,1fr); gap:10px; }
  .ui-app { display:flex; flex-direction:column; align-items:center; gap:7px; border:1px solid rgba(14,13,12,0.07); border-radius:12px; padding:13px 8px; font-size:0.64rem; color:var(--ink-60); }
  .ui-app img { width:26px; height:26px; object-fit:contain; }

  /* mini area chart inside ui */
  .ui-chart { width:100%; height:96px; display:block; }
  .ui-chart .fill{ fill: url(#uigrad); } .ui-chart .line{ fill:none; stroke: var(--navy); stroke-width:2; }
  .ui-bars { display:flex; align-items:flex-end; gap:7px; height:80px; }
  .ui-bar { flex:1; background: linear-gradient(180deg, rgba(10,25,41,0.85), rgba(10,25,41,0.35)); border-radius:4px 4px 0 0; }

  @media (max-width: 900px){ .ui-metrics{ grid-template-columns:repeat(2,1fr);} .ui-apps{ grid-template-columns:repeat(3,1fr);} .ui-fields{ grid-template-columns:repeat(2,1fr);} }

  /* ============================================================
     Agenda — lead pipeline (faithful HappyRobot "Book a demo" replica)
     ============================================================ */
  .agd { display:flex; min-height:100svh; }
  .agd__col { display:flex; flex-direction:column; justify-content:center; padding: calc(var(--nav-h) + clamp(40px,7vh,80px)) clamp(26px,4.4vw,70px) clamp(40px,7vh,80px); }
  .agd__col--form { flex:1 1 46%; }
  .agd__col--aside { flex:1 1 54%; }
  .agd__col--aside { background:#faf9f6; border-left:1px solid var(--hair); text-align:center; align-items:center; }
  .agd__form-wrap { width:100%; max-width:600px; }
  .agd__title { font-family:var(--display); font-weight:400; font-size:clamp(2.6rem,4.6vw,3.5rem); line-height:1.0; letter-spacing:-0.02em; color:var(--ink); }
  .agd__sub { margin-top:8px; font-size:0.875rem; line-height:1.43; color:rgba(0,0,0,0.6); max-width:46ch; }
  .agd__progress { margin-top:12px; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink-60); }
  .agd-form { margin-top:30px; }

  .agd-step { display:none; }
  .agd-step.is-current { display:block; animation: agdIn .45s var(--ease) both; }
  @keyframes agdIn { from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none; } }
  .agd-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .agd-field { display:flex; flex-direction:column; margin-bottom:0; }
  .agd-field--full { grid-column:1/-1; }
  .agd-field label { font-size:0.875rem; font-weight:400; color:var(--ink); margin-bottom:10px; }
  .agd-field label .req { color:#c0563b; }
  .agd-field input, .agd-field select, .agd-field textarea {
    font-family:var(--font); font-size:1rem; color:var(--ink); background:#eeeeee;
    border:1px solid transparent; border-radius:8px; padding:8px 12px; width:100%; appearance:none; line-height:1.6; min-height:44px;
    transition: background .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  }
  .agd-field input::placeholder, .agd-field textarea::placeholder { color:#6b6862; }
  .agd-field textarea { resize:vertical; min-height:104px; }
  .agd-field select { color:#5c5a55; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c5a55' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
  .agd-field select.filled { color:var(--ink); }
  .agd-field input:focus, .agd-field select:focus, .agd-field textarea:focus { outline:none; background:#fff; border-color:var(--ink); box-shadow:0 0 0 3px rgba(14,13,12,0.08); }
  .agd-field input.err, .agd-field select.err { border-color:#c0563b; background:#fff; box-shadow:0 0 0 3px rgba(192,86,59,0.1); }
  .agd-field .hint { font-size:0.78rem; color:var(--ink-60); margin-top:6px; }
  .agd-field .hint:empty { display:none; }
  .agd-field .hint.err { color:#c0563b; }
  .agd-phone { display:flex; }
  .agd-phone select { width:auto; border-radius:8px 0 0 8px; border-right:1px solid rgba(14,13,12,0.08); padding:11px 24px 11px 12px; background-position:right 7px center; }
  .agd-phone input { border-radius:0 8px 8px 0; }

  .agd-consent { display:flex; align-items:flex-start; gap:10px; margin:4px 0; font-size:0.8rem; line-height:1.5; color:var(--ink-60); }
  .agd-consent input { margin-top:2px; width:16px; height:16px; accent-color:var(--ink); flex-shrink:0; }
  .agd-consent.err { color:#c0563b; }

  .agd-actions { display:flex; align-items:center; gap:12px; margin-top:32px; }
  .agd-btn { font-family:var(--font); font-size:0.875rem; line-height:1; font-weight:400; cursor:pointer; border-radius:4px; padding:8px 16px; border:1px solid transparent; display:inline-flex; align-items:center; gap:8px; transition:transform .18s var(--ease), background .2s; }
  .agd-btn svg { width:15px; height:15px; }
  .agd-btn--primary { background:var(--ink); color:var(--btn-fg); }
  .agd-btn--primary:hover { transform:translateY(-1px); }
  .agd-btn--ghost { background:#fff; color:var(--ink); border-color:var(--hair); }
  .agd-btn--ghost:hover { background:var(--bg-sand-2); }
  .agd-fine { font-size:0.76rem; line-height:1.5; color:var(--ink-60); margin-top:16px; }
  .agd-fine a { color:var(--ink); text-decoration:underline; }

  .agd-done { display:none; }
  .agd-done.is-current { display:block; animation: agdIn .5s var(--ease) both; }
  .agd-done__ico { width:52px; height:52px; border-radius:50%; background:rgba(34,197,94,0.12); color:#15803d; display:grid; place-items:center; margin-bottom:20px; }
  .agd-done__ico svg { width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2.4; }

  .agd-aside { width:100%; max-width:560px; }
  .agd-aside__h { font-family:var(--display); font-weight:400; font-size:clamp(1.5rem,2.3vw,1.875rem); letter-spacing:-0.02em; color:var(--ink); line-height:1.0; }
  .agd-aside__sub { margin-top:8px; font-size:0.875rem; color:rgba(0,0,0,0.6); }
  .agd-aside__vis { margin:clamp(26px,4.5vh,44px) 0; display:flex; justify-content:center; }
  .agd-aside__trust { font-size:0.68rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--ink-60); margin-bottom:18px; }
  .agd-aside__logos { display:flex; align-items:center; justify-content:center; gap:clamp(16px,3vw,32px); flex-wrap:wrap; }
  .agd-aside__logos img { height:22px; width:auto; opacity:0.55; }

  @media (max-width:860px){
    .agd { flex-direction:column; }
    .agd__col--aside { order:-1; border-left:0; border-bottom:1px solid var(--hair); padding-top:calc(var(--nav-h) + 32px); padding-bottom:34px; }
    /* form sits BELOW the aside on mobile, so it doesn't need the nav-height top pad */
    .agd__col--form { padding-top: clamp(30px,5vh,46px); padding-bottom: clamp(40px,7vh,64px); }
    .agd-grid { grid-template-columns:1fr; gap:16px; }
    .agd-aside__vis { display:none; }
    .agd-aside__trust { margin-top: clamp(22px,3.5vh,32px); }
  }

  /* motion for the rich .ui mockups */
  @media (prefers-reduced-motion: no-preference) {
    .hr-feature__panel .ui, .hr-stage .ui { will-change: transform, opacity; }
    .hr-feature__panel.in .ui, .hr-stage.in .ui { animation: mkRise .8s var(--ease) both; }
    .ui-chart .line { stroke-dasharray: 470; }
    .hr-feature__panel.in .ui-chart .line { animation: mkDraw 1.3s var(--ease) .45s both; }
  }

  /* ============================================================
     Legal / policy pages — simple readable prose column
     ============================================================ */
  .legal { max-width: 760px; margin: 0 auto; padding: calc(var(--nav-h) + clamp(40px,7vh,72px)) clamp(22px,5vw,32px) clamp(60px,10vh,110px); }
  .legal h1 { font-family: var(--display); font-weight:400; font-size: clamp(2rem,4vw,2.8rem); letter-spacing:-0.02em; line-height:1.05; color: var(--ink); margin-bottom: clamp(16px,2.4vh,24px); }
  .legal h2 { font-size:1.1rem; font-weight:500; letter-spacing:-0.01em; color: var(--ink); margin: clamp(26px,3.4vh,38px) 0 10px; }
  .legal p, .legal li { font-size:0.95rem; line-height:1.62; color: var(--ink-60); }
  .legal p { margin-bottom: 14px; }
  .legal ul { margin: 0 0 14px 1.15em; display:grid; gap:6px; }
  .legal a { color: var(--ink); text-decoration: underline; }
  .legal strong { color: var(--ink); font-weight:500; }