/* ============================================================
   Agentic Practices — Marketing site composition & motion
   Section layout from the design-system UI kit (kit.css), plus a
   few site-only effects: the live drafting crosshair (showpiece),
   scroll reveals, metric count-up, timeline draw-in. Tokens come
   from tokens.css — nothing hardcoded here that the system owns.
   ============================================================ */

.site { background: var(--paper); color: var(--ink); min-height: 100vh; }

/* Skip link */
.skip-link {
  position: absolute; left: var(--space-4); top: -3rem; z-index: 200;
  background: var(--ink); color: var(--paper-raised);
  padding: 0.5rem 0.875rem; border-radius: var(--radius-md);
  font-family: var(--font-mono); font-size: var(--text-sm);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ---- Nav -------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) var(--gutter);
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.nav--scrolled { border-bottom-color: var(--hairline); }
.nav__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nav__brand svg, .nav__brand img { width: 30px; height: 30px; flex: none; }
.nav__name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--ink); letter-spacing: -0.01em; }
.nav__links { display: flex; align-items: center; gap: var(--space-5); }
.nav__link {
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500;
  color: var(--ink-soft); position: relative; padding: 4px 0; background: none; border: 0; cursor: pointer; text-decoration: none;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1.5px;
  background: var(--signal); transition: right var(--dur-base) var(--ease-out);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { right: 0; }

/* Mobile nav toggle + drawer */
.nav__toggle {
  display: none; flex-direction: column; gap: 5px; justify-content: center;
  width: 42px; height: 42px; padding: 0 10px; background: none;
  border: 1px solid var(--hairline); border-radius: var(--radius-sm); cursor: pointer;
}
.nav__toggle span { display: block; height: 1.5px; background: var(--ink); transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); }
.nav--open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav__toggle { display: flex; }
  .nav__links {
    position: fixed; inset: 64px 0 auto 0; z-index: 49;
    flex-direction: column; align-items: flex-start; gap: var(--space-5);
    padding: var(--space-6) var(--gutter) var(--space-7);
    background: var(--paper-raised); border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-raised);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .nav--open .nav__links { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links .nav__link { font-size: 1.05rem; }
  .nav__links .ap-btn { width: 100%; }
}

/* ---- Section scaffold ------------------------------------ */
.section { padding-block: var(--section-y); }
.section__head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-7); max-width: var(--max-w-narrow); }
.section__title { font-family: var(--font-display); font-weight: 600; font-size: var(--text-title); line-height: 1.08; letter-spacing: -0.015em; margin: 0; }
.section__lead { font-size: var(--text-lead); color: var(--ink-soft); max-width: var(--measure-tight); margin: var(--space-2) 0 0; }

/* ---- Hero ------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem); }
.hero__grid-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--bp-grid); background-size: var(--bp-grid-size);
  -webkit-mask-image: radial-gradient(120% 90% at 18% 8%, #000 0%, transparent 72%);
          mask-image: radial-gradient(120% 90% at 18% 8%, #000 0%, transparent 72%);
}
.hero__inner { position: relative; z-index: 2; max-width: var(--max-w-narrow); }
.hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: var(--text-hero); line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero); color: var(--ink); margin: var(--space-5) 0 var(--space-5);
}
.hero__sub { font-size: var(--text-lead); line-height: 1.5; color: var(--ink-soft); max-width: var(--measure-tight); margin: 0 0 var(--space-3); }
.hero__attr { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-muted); margin: 0 0 var(--space-6); }
.hero__cta { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.hero__meta { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); letter-spacing: var(--tracking-mono); }

/* The accented word gets a draughted underline. Resting state is the
   FINISHED underline (scaleX(1)) so reduced-motion / no-JS users see it at
   rest; the self-drawing animation only runs when motion is welcome. */
.hero__title .accent { position: relative; white-space: nowrap; }
.hero__title .accent::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 2px;
  background: var(--signal); transform: scaleX(1); transform-origin: left center;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__title .accent::after {
    transform: scaleX(0);
    animation: drawUnderline var(--dur-slow) var(--ease-out) 0.7s both;
  }
  @keyframes drawUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---- Drafting crosshair (signature unexpected effect) ----- */
.draft-cursor {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
  contain: strict;
}
.draft-cursor.is-live { opacity: 1; }
.draft-cursor__h, .draft-cursor__v { position: absolute; background: var(--signal); opacity: 0.22; }
.draft-cursor__h { left: 0; right: 0; height: 1px; }
.draft-cursor__v { top: 0; bottom: 0; width: 1px; }
.draft-cursor__dot {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border: 1.5px solid var(--signal); border-radius: 50%; background: color-mix(in srgb, var(--signal) 18%, transparent);
}
.draft-cursor__read {
  position: absolute; transform: translate(14px, 12px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--signal); background: color-mix(in srgb, var(--paper-raised) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal) 28%, transparent);
  padding: 2px 6px; border-radius: var(--radius-sm); white-space: nowrap;
}

/* ---- Proof strip ----------------------------------------- */
.proof { border-block: 1px solid var(--hairline); background: var(--paper-raised); }
.proof__inner { display: flex; flex-wrap: wrap; gap: var(--space-7); padding-block: var(--space-6); align-items: flex-start; }
.proof__item + .proof__item { border-left: 1px solid var(--hairline); padding-left: var(--space-7); }
.proof__note { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); max-width: 22rem; margin-left: auto; align-self: center; }
@media (max-width: 720px) {
  .proof__item + .proof__item { border-left: 0; padding-left: 0; }
  .proof__note { margin-left: 0; }
}

/* ---- Value cards ----------------------------------------- */
.value__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); }
@media (max-width: 720px) { .value__grid { grid-template-columns: 1fr; } }
.about__people { display: grid; gap: var(--space-5); max-width: 44rem; }
.about__photo { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; margin-bottom: var(--space-3); border: var(--border-hair) solid var(--border-card); }
.value__card-num { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); color: var(--signal); }
.value__card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; margin: var(--space-3) 0 var(--space-3); color: var(--ink); }
.value__card-body { font-size: var(--text-base); color: var(--ink-soft); margin: 0; }

/* ---- Who it's for (is / isn't) ---------------------------- */
.fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
@media (max-width: 760px) { .fit { grid-template-columns: 1fr; } }
.fit__col { padding: var(--space-6); border-radius: var(--radius-lg); border: 1px solid var(--hairline); background: var(--paper-raised); }
.fit__col--no { background: var(--paper); }
.fit__head { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.fit__col--yes .fit__head { color: var(--signal); }
.fit__col--no .fit__head { color: var(--clay); }
.fit__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.fit__list li { display: flex; gap: var(--space-3); font-size: var(--text-base); color: var(--ink-soft); line-height: 1.5; }
.fit__list .mark { font-family: var(--font-mono); flex: none; font-weight: 600; }
.fit__col--yes .mark { color: var(--signal); }
.fit__col--no .mark { color: var(--clay); }
.fit__col--yes li strong { color: var(--ink); font-weight: 600; }

/* ---- Programme timeline (showpiece) ---------------------- */
/* Scoped accent inversion — ONLY within #the-programme. Locally swaps the
   roles of signal (cobalt) and clay (warm clay) so the timeline reads as a
   distinct "worked example" zone: clay becomes the signal, cobalt the
   schematic detail. Does NOT touch the global tokens in tokens.css.
   WCAG AA re-checked for every recoloured pairing (paper bg #F0F2F5,
   node bg #FAFBFC):
     blue #2456C4 text/border on #FAFBFC node ... 6.3:1  (text >=4.5, UI >=3)
     blue #2456C4 label/eyebrow on #F0F2F5 ...... 5.8:1  (text >=4.5)
     white #FAFBFC on orange #A85234 last node .. 5.2:1  (text >=4.5)
     orange #A85234 on #F0F2F5 (.phase__out b) .. 4.8:1  (text >=4.5) */
#the-programme {
  --signal:      #A85234;
  --signal-deep: #8A4329;
  --clay:        #2456C4;
  --clay-soft:   #6F94E0;
}
.timeline { display: flex; flex-direction: column; gap: 0; }
.phase { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-5); padding-block: var(--space-5); position: relative; }
.phase + .phase { border-top: 1px solid var(--hairline); }
.phase__rail { display: flex; flex-direction: column; align-items: center; }
.phase__node {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--clay); background: var(--paper-raised);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-weight: 600; font-size: 14px; color: var(--clay);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.phase:last-child .phase__node { border-color: var(--signal); color: var(--text-on-signal); background: var(--signal); }
.phase__line { flex: 1; width: 1.5px; background: var(--hairline); margin-top: 6px; transform-origin: top center; }
.phase:last-child .phase__line { display: none; }
.phase__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--clay); }
.phase__name { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: 6px 0 8px; color: var(--ink); }
.phase__what { font-size: var(--text-base); color: var(--ink-soft); margin: 0 0 6px; }
.phase__out { font-family: var(--font-body); font-size: var(--text-sm); color: var(--ink-muted); margin: 0; }
.phase__out b { color: var(--signal); font-weight: 600; }

/* timeline draw-in: collapse the connector line until the phase reveals.
   Gated to .js so a no-JS / crawler view shows the finished timeline. */
@media (prefers-reduced-motion: no-preference) {
  .js .phase .phase__line { transform: scaleY(0); transition: transform var(--dur-slow) var(--ease-out); }
  .js .phase.is-revealed .phase__line { transform: scaleY(1); }
  .js .phase__node { transform: scale(0.82); opacity: 0; }
  .js .phase.is-revealed .phase__node { transform: scale(1); opacity: 1; }
}

/* ---- Pricing --------------------------------------------- */
.pricing__switch { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
.pricing__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); align-items: stretch; }
@media (max-width: 980px) { .pricing__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pricing__grid { grid-template-columns: 1fr; } }
.tier { display: flex; flex-direction: column; gap: var(--space-3); position: relative; height: 100%; }
.tier__name { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); }
.tier__who { font-size: var(--text-sm); color: var(--ink-muted); min-height: 2.6em; margin: 0; }
.tier__price { font-family: var(--font-display); font-weight: 900; font-size: 1.75rem; color: var(--ink); line-height: 1.1; }
.tier__price small { font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; color: var(--ink-muted); display: block; letter-spacing: var(--tracking-mono); margin-top: 2px; }
.tier__from { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; color: var(--ink-muted); letter-spacing: var(--tracking-mono); line-height: 1; margin-bottom: 3px; }
.tier__list { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-4); display: flex; flex-direction: column; gap: 8px; }
.tier__list li { font-size: var(--text-sm); color: var(--ink-soft); display: flex; gap: 8px; line-height: 1.4; }
.tier__list li::before { content: "—"; color: var(--signal); flex: none; }
.tier__cta { margin-top: auto; }
.pricing__grid .ap-card { position: relative; }
.tier__ribbon { position: absolute; top: -0.7rem; right: var(--space-5); z-index: 2; }
.pricing__fine { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--space-6); max-width: var(--measure); line-height: 1.6; }

/* ---- Case / outcomes (dark) ------------------------------ */
.case { background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: clamp(2rem, 5vw, 4rem); position: relative; overflow: hidden; }
.case__grid-bg { position: absolute; inset: 0; opacity: 0.5;
  background-image: linear-gradient(rgba(246,242,234,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(246,242,234,0.05) 1px, transparent 1px);
  background-size: var(--bp-grid-size); }
.case__inner { position: relative; z-index: 1; }
.case .ap-eyebrow { color: var(--signal-on-dark); }
.case__quote { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.3; color: var(--paper); margin: var(--space-4) 0; max-width: 32ch; }
.case__quote b { color: var(--signal-on-dark); font-weight: 600; }
.case__attr { font-family: var(--font-mono); font-size: var(--text-sm); color: #9aa3b0; }
.case__metrics { display: flex; gap: var(--space-7); margin-top: var(--space-7); flex-wrap: wrap; }
.case__metric .v { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--signal-on-dark); line-height: 1; }
.case__metric .l { font-family: var(--font-mono); font-size: var(--text-xs); color: #9aa3b0; margin-top: 6px; max-width: 18ch; }

/* ---- FAQ -------------------------------------------------- */
.faq { display: flex; flex-direction: column; max-width: var(--max-w-narrow); }
.faq__item { border-top: 1px solid var(--hairline); }
.faq__item:last-child { border-bottom: 1px solid var(--hairline); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; gap: var(--space-5); align-items: center;
  padding: var(--space-5) 0; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--ink); }
.faq__sign { font-family: var(--font-mono); color: var(--signal); flex: none; transition: transform var(--dur-base) var(--ease-out); }
.faq__a { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease-out); }
.faq__a-inner { padding-bottom: var(--space-5); color: var(--ink-soft); font-size: var(--text-base); max-width: var(--measure); }
.faq__item--open .faq__sign { transform: rotate(45deg); }

/* ---- Contact / scoping form ------------------------------ */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; gap: var(--space-7); } }
.contact__form { display: flex; flex-direction: column; gap: var(--space-4); }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 480px) { .contact__row { grid-template-columns: 1fr; } }
.contact__list { list-style: none; padding: 0; margin: var(--space-5) 0 0; display: flex; flex-direction: column; gap: 10px; }
.contact__list li { display: flex; gap: 10px; font-size: var(--text-base); color: var(--ink-soft); }
.contact__list .num { font-family: var(--font-mono); color: var(--clay); font-size: var(--text-sm); flex: none; }
.contact__error { color: var(--danger); font-family: var(--font-mono); font-size: var(--text-xs); margin: 0; min-height: 1em; }
.contact__ok { background: var(--paper-raised); border: 1px solid var(--signal); border-radius: var(--radius-lg); padding: var(--space-6); }
.contact__ok h3 { margin: 0 0 var(--space-3); }

/* ---- Footer ---------------------------------------------- */
.footer { background: var(--paper-sunk); border-top: 1px solid var(--paper-edge); position: relative; }
.footer__grid-bg { position: absolute; inset: 0; background-image: var(--bp-grid); background-size: var(--bp-grid-size); opacity: 0.6; }
.footer__inner { position: relative; z-index: 1; padding-block: var(--space-8); display: flex; justify-content: space-between; gap: var(--space-7); flex-wrap: wrap; }
.footer__brand .nav__name { font-size: 1.25rem; }
.footer__tag { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); margin-top: var(--space-3); max-width: 32ch; line-height: 1.6; }
.footer__cols { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.footer__col h4 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--ink-muted); margin: 0 0 var(--space-4); font-weight: 500; }
.footer__col a { display: block; font-size: var(--text-sm); color: var(--ink-soft); margin-bottom: 10px; }
.footer__col a:hover { color: var(--signal); }
.footer__legal { position: relative; z-index: 1; border-top: 1px solid var(--paper-edge); padding-block: var(--space-4); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.footer__legal p { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); margin: 0; }

/* ---- Orchestrated hero load (resting state always visible) - */
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: fadeUp var(--dur-slow) var(--ease-out) both; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  /* Scroll reveals — hidden start only when JS is present (.js), so a
     no-JS / crawler / print view always shows content at rest. */
  .js .reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
  .js .reveal.is-revealed { opacity: 1; transform: none; }
  .js .reveal[data-reveal-delay="1"] { transition-delay: 80ms; }
  .js .reveal[data-reveal-delay="2"] { transition-delay: 160ms; }
  .js .reveal[data-reveal-delay="3"] { transition-delay: 240ms; }
  .js .reveal[data-reveal-delay="4"] { transition-delay: 320ms; }
  .js .reveal[data-reveal-delay="5"] { transition-delay: 400ms; }

  /* ---- Reveal modifiers (richer, system-consistent motion) ----
     Each rides the SAME .reveal/.is-revealed + IntersectionObserver as
     above and only overrides the resting (hidden) transform, so no-JS and
     reduced-motion users keep the finished, fully-visible layout. */

  /* Directional — content slides in from a side instead of straight up. */
  .js .reveal--left  { transform: translate3d(-26px, 0, 0); }
  .js .reveal--right { transform: translate3d(26px, 0, 0); }
  .js .reveal--left.is-revealed,
  .js .reveal--right.is-revealed { transform: none; }

  /* Subtle scale — cards settle in from slightly small + low. */
  .js .reveal--scale { transform: translateY(18px) scale(0.965); transform-origin: 50% 85%; }
  .js .reveal--scale.is-revealed { transform: none; }

  /* Clip / wipe — large panels uncover bottom-up (pairs with the base lift). */
  .js .reveal--clip {
    clip-path: inset(0 0 14% 0 round var(--radius-lg));
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out),
                clip-path var(--dur-slow) var(--ease-out);
  }
  .js .reveal--clip.is-revealed { clip-path: inset(0 0 0 0 round var(--radius-lg)); }

  /* Section-head rule draws itself in beneath the eyebrow/title. */
  .js .section__head--rule { position: relative; padding-bottom: var(--space-4); }
  .js .section__head--rule::after {
    content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 3.25rem;
    background: var(--signal); border-radius: var(--radius-pill);
    transform: scaleX(0); transform-origin: left center;
    transition: transform var(--dur-slow) var(--ease-out); transition-delay: 140ms;
  }
  .js .section__head--rule.is-revealed::after { transform: scaleX(1); }
}
@media print {
  .fade-up, .reveal { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ---- Imagery slots (blueprint schematics) ---------------- */
/* Wide drafting band beneath the hero — a 3:2 schematic cropped to a slim
   band so it sets the tone without competing with the fold or the proof
   strip directly below it. */
.img-band { padding-block: 0; margin-block: var(--space-6) var(--space-2); }
.img-band__figure {
  margin: 0; overflow: hidden;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--paper-raised); box-shadow: var(--shadow-inset);
}
.img-band__figure img {
  display: block; width: 100%; height: auto;
  max-height: 300px; object-fit: cover; object-position: center 40%;
}

/* Programme: the timeline keeps the lead; a tall schematic that echoes its
   node-and-rail motif sits alongside on desktop and stacks under it on
   narrow screens (kept small so it never crowds the steps). */
.programme__layout { display: grid; grid-template-columns: 1fr; gap: var(--space-7); align-items: start; }
.programme__figure { margin: 0; }
.programme__figure img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--paper-raised);
  /* Mirror across the horizontal axis (top<->bottom) so the schematic's
     progression runs top-to-bottom, matching the on-page timeline. */
  transform: scaleY(-1);
}
@media (min-width: 920px) {
  .programme__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-8); }
  .programme__figure { position: sticky; top: 6rem; }
}
@media (max-width: 560px) {
  .programme__figure { max-width: 16rem; margin-inline: auto; }
}

/* ---- Mobile sticky CTA (thumb-zone conversion bar) -------- */
/* Desktop / no-JS: never shown. Only the mobile breakpoint paints it,
   and even then JS reveals it via .mobile-cta--show. Reuses the same
   860px breakpoint as the mobile nav drawer. */
.mobile-cta { display: none; }

@media (max-width: 860px) {
  .mobile-cta {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    padding: var(--space-3) var(--gutter);
    /* iOS safe area so the button clears the home indicator */
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--paper-raised);
    border-top: 1px solid var(--hairline);
    box-shadow: 0 -6px 20px rgba(27, 26, 23, 0.07);
    transform: translateY(110%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .mobile-cta--show { transform: translateY(0); }
  .mobile-cta__meta {
    display: block; text-align: center;
    font-family: var(--font-mono); font-size: var(--text-xs);
    letter-spacing: var(--tracking-mono); color: var(--ink-muted);
    margin-bottom: var(--space-2);
  }
  /* Don't fight the mobile drawer: when the menu is open, drop the bar.
     (Sibling selector outranks .mobile-cta--show, so it wins.) */
  .nav--open ~ .mobile-cta { transform: translateY(110%); }
}

/* ============================================================
   /surveys — participant surveys & diagnostics.
   A "drafting console": per-survey pages sharing a left-hand
   numbered index-rail; each form is mounted like a schematic
   sheet on a blueprint-gridded table. Reuses tokens, .container,
   .ap-eyebrow, .ap-btn, .big-numeral, the fade-up entrance and the
   blueprint grid (--bp-grid). Only the layout/menu/console framing
   is new here — no new tokens.
   ============================================================ */
.survey-layout {
  display: grid;
  grid-template-columns: 15.5rem 1fr;
  gap: clamp(var(--space-6), 5vw, var(--space-9));
  align-items: start;
  padding-block: clamp(2rem, 6vw, 4.5rem);
}

/* ---- Left-hand index-rail ------------------------------------ */
.survey-nav { position: sticky; top: 5.5rem; }
.survey-nav__title {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
  color: var(--ink-muted); margin: 0 0 var(--space-4); padding-left: var(--space-4);
}
/* The list carries a faint vertical "drafting" rule; active items
   overlay a solid cobalt bar on top of it (blueprint-timeline motif). */
.survey-nav__list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 2px;
  position: relative;
}
.survey-nav__list::before {
  content: ""; position: absolute; left: 0; top: var(--space-2); bottom: var(--space-2);
  width: 1px; background: var(--hairline-soft);
}
.survey-nav__link {
  display: block; position: relative; padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-soft); font-weight: var(--weight-medium); line-height: 1.35;
  transition: color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.survey-nav__link::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: transparent; transition: background var(--dur-fast) var(--ease-out);
}
.survey-nav__link:hover { color: var(--ink); background: var(--surface-card); }
.survey-nav__link:hover::before { background: var(--hairline); }
.survey-nav__link.is-current {
  color: var(--signal); background: var(--surface-card);
  font-weight: var(--weight-semibold);
}
.survey-nav__link.is-current::before { background: var(--signal); }
.survey-nav__n {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono); color: var(--ink-muted); margin-right: var(--space-2);
}
.survey-nav__link.is-current .survey-nav__n { color: var(--signal); }
.survey-nav__when {
  display: block; font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: 400; color: var(--ink-muted); margin-top: 3px;
}
.survey-nav__sep { margin: var(--space-5) 0; border: 0; border-top: var(--border-hair) solid var(--hairline-soft); }
.survey-nav__back {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding-left: var(--space-4); color: var(--ink-muted);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono);
  transition: color var(--dur-fast) var(--ease-out);
}
.survey-nav__back:hover { color: var(--signal); }

/* ---- Main column (relative, to anchor the ghost numeral) ----- */
.survey-main { position: relative; min-width: 0; }
.survey-main .section__title { font-size: clamp(1.6rem, 3.5vw, 2.25rem); margin: var(--space-3) 0 0; max-width: 20ch; }

/* Oversized ghosted numeral sitting behind the heading. */
.survey__bignum {
  position: absolute; top: -0.35em; right: 0; z-index: 0;
  font-family: var(--font-display); font-weight: var(--weight-black);
  font-size: clamp(5rem, 13vw, 11rem); line-height: 0.8;
  color: var(--hairline-soft); letter-spacing: var(--tracking-tight);
  pointer-events: none; user-select: none;
}
.survey-head, .survey-embed { position: relative; z-index: 1; }

.survey__meta {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-mono); color: var(--ink-muted);
  margin: var(--space-4) 0 0;
}
.survey__lead {
  color: var(--ink-soft); max-width: 60ch;
  margin: var(--space-4) 0 0; line-height: var(--leading-body);
}

/* ---- Overview list (on /surveys/) ---------------------------- */
.survey-cards { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.survey-cards a {
  display: flex; align-items: baseline; gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hair) solid var(--border-card); border-radius: var(--radius-md);
  background: var(--surface-card); color: var(--ink); font-weight: var(--weight-semibold);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.survey-cards a:hover { border-color: var(--signal); color: var(--signal); transform: translateX(3px); }
.survey-cards__n { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); }
.survey-cards a:hover .survey-cards__n { color: var(--signal); }
.survey-cards__when { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; color: var(--ink-muted); margin-left: auto; }

/* ---- The form, mounted as a schematic sheet ------------------ */
/* The outer frame is the blueprint "table" (sunk surface + grid);
   the inner sheet is a raised paper panel holding the Tally embed. */
.survey-embed {
  position: relative; margin-top: var(--space-6);
  background-color: var(--surface-well);
  background-image: var(--bp-grid);
  background-size: var(--bp-grid-size);
  border: var(--border-hair) solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
/* Clay registration / crop marks at opposing corners (schematic detail only). */
.survey-embed::before, .survey-embed::after {
  content: ""; position: absolute; width: 12px; height: 12px;
  border: 0 solid var(--clay); pointer-events: none;
}
.survey-embed::before { top: 8px; left: 8px; border-top-width: var(--border-med); border-left-width: var(--border-med); }
.survey-embed::after  { bottom: 8px; right: 8px; border-bottom-width: var(--border-med); border-right-width: var(--border-med); }

/* Mono coordinate / label strip above the sheet. */
.survey-embed__label {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-mono);
  color: var(--ink-muted); margin: 0 0 var(--space-3); padding: 0 var(--space-1);
}
.survey-embed__label b { color: var(--signal); font-weight: var(--weight-medium); }

.survey-embed__sheet {
  background: var(--surface-card);
  border: var(--border-hair) solid var(--border-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  padding: clamp(var(--space-3), 2vw, var(--space-5));
}
/* height is managed by Tally's embed.js (dynamicHeight); min-height only guards
   against a collapsed frame while the widget script loads (needs data-tally-src). */
.survey-embed__sheet iframe { display: block; width: 100%; min-height: 220px; border: 0; background: transparent; }
.survey-embed__fallback { margin: var(--space-4) 0; }

/* ---- Responsive: rail becomes a tab strip above the form ----- */
@media (max-width: 60rem) {
  .survey-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .survey-nav { position: static; }
  .survey-nav__title { padding-left: 0; }
  .survey-nav__list { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
  .survey-nav__list::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 1px; }
  .survey-nav__link { border-radius: 0; padding: var(--space-3) var(--space-2); text-align: center; }
  .survey-nav__link::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 2px; }
  .survey-nav__when { display: none; }
  .survey-nav__sep, .survey-nav__back { display: none; }
  .survey__bignum { font-size: clamp(4rem, 18vw, 7rem); opacity: 0.7; }
}
@media (max-width: 34rem) {
  .survey-nav__list { grid-auto-flow: row; grid-auto-columns: auto; }
  .survey-nav__list::before { left: 0; right: auto; top: var(--space-2); bottom: var(--space-2); width: 1px; height: auto; }
  .survey-nav__link { text-align: left; padding: var(--space-3) var(--space-4); }
  .survey-nav__link::before { top: 0; bottom: 0; left: 0; right: auto; width: 2px; height: auto; }
  .survey__bignum { display: none; }
  .survey-embed { padding: var(--space-4); }
}