/* ============================================================================
   sections.css — per-section styling, 01 hero → 08 contact.
   Transforms used for the orbit spin / parallax belong to motion.css; the
   static ring layout below uses `translate` + percentage offsets only, so the
   two never fight over the same property.
   ========================================================================== */

/* ==========================================================================
   01 · HERO
   ========================================================================== */
.section--hero {
  isolation: isolate;
  padding-block-start: var(--space-12);
  overflow: clip;
}

.section--hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background-image: var(--mesh-hero);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}

.hero__chip { margin-block-end: var(--space-6); }

.hero__title {
  /* One step down from the display maximum. At --fs-4xl the headline was the
     loudest thing on a consulting page by a wide margin and pushed the deck,
     the buttons and all three metrics below the fold. The line breaks are
     authored in the markup, so the measure only has to stop a third line
     appearing on narrow desktops. */
  font-size: var(--fs-3xl);
  /* Wide enough that the two authored lines each stay on one line — 15ch cut
     "I build cloud platforms" in half and put the headline back to four rows,
     which was the whole complaint. The <span>s do the breaking; the measure
     only has to not fight them. */
  max-inline-size: 24ch;
  margin-block-end: var(--space-6);
}
.hero__line { display: block; }

/* Exactly one clause carries the neon text gradient (>= 24px, 3:1 large text) */
.hero__line--neon { color: var(--c-text); }

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .hero__line--neon {
    background-image: var(--grad-text-neon);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.hero__deck {
  max-inline-size: var(--measure-narrow);
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-block-start: var(--space-8);
}

.hero__actions .btn { inline-size: 100%; }

/* --- Counter rail ------------------------------------------------------- */
.hero__rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--space-10);
  padding-block-start: var(--space-6);
  border-block-start: 1px solid var(--c-border);
}

.metric--rail {
  padding-block: var(--space-3);
}

.metric--rail + .metric--rail { border-block-start: 1px solid var(--c-border); }

.metric--rail .metric__value {
  font-size: var(--fs-2xl);
  color: var(--c-accent);
}

/* Reserve the final width so the count-up causes zero layout shift */
.metric__value--count {
  display: inline-block;
  min-inline-size: 5ch;
}


/* --- Orbit (decorative, aria-hidden) ------------------------------------ */
.hero__orbit {
  display: flex;
  justify-content: center;
}

.orbit {
  /* Sizes are one system. --sweep-period is the single source of truth for the
     radar: sections.css derives every node's blip delay from it below, and
     motion.css drives the beam with it. Change it in one place or the beam and
     the blips drift apart. */
  --orbit-node: 62px;
  --orbit-icon: 34px;
  --orbit-core: 92px;
  --sweep-period: 9s;

  position: relative;
  inline-size: min(100%, 440px);
  aspect-ratio: 1 / 1;
  margin-inline: auto;
}

/* The beam. One conic gradient with a hard leading edge and a long tail, which
   is what a radar sweep actually looks like — the trace fades behind the line
   rather than being a symmetrical wedge. */
.orbit__sweep {
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--c-accent) 30%, transparent) 0deg,
    color-mix(in srgb, var(--c-accent) 10%, transparent) 26deg,
    transparent 74deg,
    transparent 360deg
  );
  pointer-events: none;
}

/* A pool of light under the core, so the centre stays the brightest point. */
.orbit::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  inline-size: 58%;
  block-size: 58%;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--c-accent) 14%, transparent) 0%,
    transparent 70%
  );
  pointer-events: none;
}

/* Static grid. The rings no longer turn: on a radar the grid is the fixed
   reference and the beam is the only thing that moves. */
.orbit__ring {
  position: absolute;
  border: 1px dashed var(--dg-group-stroke);
  border-radius: 50%;
  pointer-events: none;
}

.orbit__ring--1 { inset: 30%; }
.orbit__ring--2 { inset: 16%; }
.orbit__ring--3 { inset: 2%; }

/* Nodes are placed from an angle with trigonometry rather than by hand-typed
   percentages: --a is the bearing clockwise from twelve o'clock, exactly what
   the conic gradient uses, so a node's blip delay is simply its bearing as a
   fraction of the sweep period. cos/sin take the bearing minus 90deg because
   trigonometric zero points east while the sweep's zero points north. */
.orbit__node {
  --a: 0deg;
  --r: 34%;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--orbit-node);
  block-size: var(--orbit-node);
  inset-inline-start: calc(50% + var(--r) * cos(var(--a) - 90deg));
  inset-block-start:  calc(50% + var(--r) * sin(var(--a) - 90deg));
  translate: -50% -50%;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background-color: var(--c-surface-raised);
  box-shadow: var(--shadow-1);
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow   var(--dur-base) var(--ease-standard);
}

.orbit__node img {
  inline-size: var(--orbit-icon);
  block-size: var(--orbit-icon);
  object-fit: contain;
}

.orbit__node:hover {
  border-color: var(--c-accent);
  box-shadow: var(--glow-accent-sm);
}

/* Bearings, and the delay each one implies. delay = bearing / 360 * period.
   Written out rather than calculated so the numbers can be read at a glance
   when one of them looks wrong on screen. */
.orbit__node--1  { --a:  20deg; --r: 24%; --blip: 0.50s; }
.orbit__node--2  { --a:  70deg; --r: 36%; --blip: 1.75s; }
.orbit__node--3  { --a: 110deg; --r: 24%; --blip: 2.75s; }
.orbit__node--4  { --a: 145deg; --r: 47%; --blip: 3.63s; }
.orbit__node--5  { --a: 180deg; --r: 36%; --blip: 4.50s; }
.orbit__node--6  { --a: 215deg; --r: 47%; --blip: 5.38s; }
.orbit__node--7  { --a: 250deg; --r: 24%; --blip: 6.25s; }
.orbit__node--8  { --a: 285deg; --r: 36%; --blip: 7.13s; }
.orbit__node--9  { --a: 320deg; --r: 47%; --blip: 8.00s; }
.orbit__node--10 { --a: 345deg; --r: 47%; --blip: 8.63s; }

.orbit__core {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  inline-size: var(--orbit-core);
  block-size: var(--orbit-core);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-lg);
  background-color: var(--c-surface-raised);
  box-shadow: var(--glow-accent-md);
}

/* ==========================================================================
   02 · APPROACH — the calmest section: no glow, no accent but the numerals
   ========================================================================== */
.approach__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.approach__item { max-inline-size: var(--measure-narrow); }

.approach__item + .approach__item {
  padding-block-start: var(--space-8);
  border-block-start: 1px solid var(--c-border);
}

.approach__index {
  display: block;
  margin-block-end: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-text-faint);
}

.approach__title { font-size: var(--fs-lg); }

.approach__body-text {
  margin-block-start: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

/* ==========================================================================
   03 · SERVICES
   ========================================================================== */
.services__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}

.service-card__index {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-eyebrow);
  color: var(--c-text-faint);
  transition: color var(--dur-fast) var(--ease-standard);
}

.service-card__icon {
  display: inline-flex;
  color: var(--c-accent);
}

.service-card__body {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  max-inline-size: var(--measure-narrow);
}

.service-card::after {
  content: "";
  display: block;
  margin-block-start: auto;
  block-size: 1px;
  background-image: var(--grad-rule-neon);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.service-card:hover,
.service-card:focus-within,
.case-card:not(.case-card--featured):hover,
.case-card:not(.case-card--featured):focus-within {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--c-accent) 55%, transparent);
  box-shadow: var(--shadow-2), var(--glow-accent-sm);
}

.service-card:hover .service-card__index,
.service-card:focus-within .service-card__index { color: var(--c-accent); }

.service-card:hover::after,
.service-card:focus-within::after { opacity: 1; }

/* ==========================================================================
   04 · ARCHITECTURES
   ========================================================================== */
.arch__tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* keeps the offset focus ring off the clipping edge */
  padding-block: var(--space-1);
  margin-block-end: var(--space-8);
  border-block-end: 1px solid var(--c-border);
  scrollbar-width: thin;
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    black var(--space-6),
    black calc(100% - var(--space-6)),
    transparent 100%
  );
}

.arch-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
  min-block-size: var(--tap-min);
  padding: var(--space-3) var(--space-5);
  scroll-snap-align: start;
  border-radius: var(--r-md) var(--r-md) 0 0;
  background-color: transparent;
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--c-border-interactive);
  transition:
    color var(--dur-base) var(--ease-in-out-quint),
    background-color var(--dur-base) var(--ease-in-out-quint),
    box-shadow var(--dur-base) var(--ease-in-out-quint);
}

.arch-tab:hover {
  color: var(--c-text);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--c-accent) 40%, transparent);
}

/* Selection is never colour-only: a mono marker joins the underline */
.arch-tab[aria-selected="true"] {
  color: var(--c-text);
  background-color: var(--c-accent-wash);
  box-shadow: inset 0 -2px 0 var(--c-accent), var(--glow-accent-sm);
}

.arch-tab[aria-selected="true"]::before {
  content: "●";
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  line-height: 1;
  color: var(--c-accent);
}

.arch__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8);
}

.arch__panel-title { margin-block-end: var(--space-4); }

.arch__stage { min-inline-size: 0; }

.arch__diagram {
  /* inline-size is pinned so aspect-ratio only ever resolves the BLOCK size.
     Without it a min-height from diagrams.css back-solves the width and the
     stage overflows its column on narrow viewports. */
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  padding: 1px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background-color: var(--dg-stage);
  overflow: hidden;
}

.arch__nodes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}

.arch__notes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-content: start;
}

.arch__note + .arch__note {
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--c-border);
}

.arch__note-label {
  display: block;
  margin-block-end: var(--space-2);
  color: var(--c-accent);
}

.arch__note-body {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  max-inline-size: var(--measure-narrow);
}

/* With JavaScript the tab label names the panel; without it the panel needs
   its own visible heading, and every panel is shown as a stacked list. */
.js .arch__panel-title {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

html:not(.js) .arch__tabs { display: none; }
html:not(.js) .arch__diagram { display: none; }

html:not(.js) .arch__panel[hidden] { display: grid !important; }

html:not(.js) .arch__panel + .arch__panel {
  margin-block-start: var(--space-12);
  padding-block-start: var(--space-12);
  border-block-start: 1px solid var(--c-border);
}

/* ==========================================================================
   05 · EXPERTISE — density is the message
   ========================================================================== */
.expertise__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
}

/* the shell hairline is a grid item here — the row gap already spaces it */
.expertise__body::before,
.contact__body::before { margin-block-end: 0; }

.expertise__label {
  display: block;
  margin-block-end: var(--space-4);
}

.cert {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-3);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--c-text);
}

.cert + .cert { border-block-start: 1px solid var(--c-border); }

.cert__marker {
  font-family: var(--font-mono);
  color: var(--c-accent);
  flex: none;
}

.cert-also {
  margin-block-start: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.chip-group + .chip-group { margin-block-start: var(--space-8); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ==========================================================================
   06 · WORK
   ========================================================================== */
.work__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gutter);
}

.case-card__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.case-card__num { color: var(--c-text-faint); }

.case-card__body {
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
  max-inline-size: var(--measure);
}

.case-card__metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-block-start: var(--space-2);
}

.case-card__metrics .metric__value { font-size: var(--fs-xl); }
.case-card__metrics .metric__label { max-inline-size: 18ch; }

.case-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: auto;
  padding-block-start: var(--space-4);
}

/* Featured card 01 — the only violet moment in this section */
.case-card--featured {
  position: relative;
  overflow: hidden;
  padding: var(--space-8);
  border-color: color-mix(in srgb, var(--c-accent-2) 35%, transparent);
  box-shadow: var(--shadow-2), var(--glow-accent-2);
  gap: var(--space-8);
}

.case-card--featured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-below);
  background-image: var(--grad-neon-soft);
  -webkit-mask-image: linear-gradient(180deg, black, transparent);
  mask-image: linear-gradient(180deg, black, transparent);
  pointer-events: none;
}

.case-card--featured .case-card__body { max-inline-size: var(--measure); }

.case-card--featured .case-card__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.case-note {
  display: flex;
  align-items: center;
  block-size: 100%;
  padding: var(--space-6);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-xs);
  line-height: var(--lh-loose);
  color: var(--c-text-faint);
}

/* ==========================================================================
   07 · READINESS — shell only; quiz.css owns the rendered questions
   ========================================================================== */
#quiz { display: block; }

.quiz__nojs {
  padding: var(--space-6);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
  font-size: var(--fs-sm);
  color: var(--c-text-muted);
}

.js .quiz__nojs { display: none; }

.quiz__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.quiz__progress {
  margin-block-start: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-label);
  color: var(--c-text-faint);
}

.quiz__actions:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-block-start: var(--space-6);
}

#quiz-result {
  margin-block-start: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background-color: var(--c-surface-raised);
  scroll-margin-top: calc(var(--header-h-lg) + var(--space-6));
}

.quiz__result-eyebrow { display: block; margin-block-end: var(--space-3); }

#quiz-score {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-3xl);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: var(--c-accent-ink);
}

#quiz-verdict {
  margin-block-start: var(--space-4);
  max-inline-size: var(--measure-narrow);
  font-size: var(--fs-md);
  color: var(--c-text-muted);
}

.quiz__cta-line {
  margin-block-start: var(--space-6);
  max-inline-size: var(--measure-narrow);
  font-size: var(--fs-sm);
  color: var(--c-text);
}

#quiz-cta { margin-block-start: var(--space-4); }

.quiz__note {
  margin-block-start: var(--space-6);
  font-size: var(--fs-xs);
  color: var(--c-text-faint);
}

/* ==========================================================================
   08 · CONTACT
   ========================================================================== */
.contact__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
}

.contact__email-line { margin-block-end: var(--space-4); }

.contact__form { min-inline-size: 0; }

.form-note { margin-block-start: var(--space-6); }

.contact__submit {
  inline-size: 100%;
  margin-block-start: var(--space-4);
}

/* ==========================================================================
   TABLET — >= 640px
   ========================================================================== */
@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .hero__actions .btn { inline-size: auto; }

  .hero__rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
  }

  .metric--rail + .metric--rail {
    border-block-start: 0;
    border-inline-start: 1px solid var(--c-border);
    padding-inline-start: var(--gutter);
  }

  .orbit { inline-size: min(100%, 380px); }
  .orbit__ring--3 { display: block; }

  .approach__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-lg); }
  .approach__item + .approach__item { padding-block-start: 0; border-block-start: 0; }

  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services__grid-wide { grid-column: span 2; }

  .arch__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--gutter); }
  .arch__note + .arch__note { padding-block-start: 0; border-block-start: 0; }

  .expertise__body { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter-lg); }

  .work__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work__grid-feature { grid-column: span 2; }

  .contact__submit { inline-size: auto; }
}

/* ==========================================================================
   DESKTOP — >= 1024px
   ========================================================================== */
@media (min-width: 1024px) {
  /* --- hero: 7 / 5 split --- */
  .hero__inner {
    grid-template-columns: 7fr 5fr;
    gap: var(--gutter-lg);
  }

  .orbit { inline-size: min(100%, 460px); }

  /* --- approach: head 1–5, principles 6–12, same row --- */
  .section__head--narrow { grid-column: 1 / span 5; }

  .approach__body {
    grid-column: 6 / -1;
    grid-row: 1;
    margin-block-start: 0;
  }

  .approach__body::before { display: none; }

  .approach__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* --- services: 3 across, card 07 spans 2 --- */
  .services__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* --- architectures: tabs in one row, diagram 8 / notes 4 --- */
  .arch__tabs {
    overflow-x: visible;
    flex-wrap: wrap;
    mask-image: none;
  }

  .arch-tab { scroll-snap-align: none; }

  .arch__panel {
    grid-template-columns: 8fr 4fr;
    gap: var(--gutter-lg);
    align-items: start;
  }

  /* no-JS: panels are a stacked article list, not a diagram stage + rail */
  html:not(.js) .arch__panel { grid-template-columns: minmax(0, 1fr); }

  .arch__notes { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

  .arch__note + .arch__note {
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--c-border);
  }

  /* --- expertise: certs 1–5, stack 6–12 --- */
  .expertise__body {
    grid-template-columns: 5fr 7fr;
    gap: var(--gutter-lg);
  }

  /* --- work: 3 across, feature full width --- */
  .work__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .work__grid-feature { grid-column: span 3; }

  .case-card--featured {
    display: grid;
    grid-template-columns: 6fr 6fr;
    align-items: start;
  }

  /* --- contact: pitch left, form right --- */
  .contact__body {
    grid-template-columns: 5fr 7fr;
    gap: var(--gutter-lg);
    align-items: start;
  }
}

/* ==========================================================================
   08 · BOOKING — replaces the mail-draft form. The widget itself is a third
   party in a shadow root; everything here is the frame around it.
   ========================================================================== */
.booking {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.booking__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.booking__pulse {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background-color: var(--c-ok);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-ok) 60%, transparent);
}

.booking__lede {
  margin-block-start: var(--space-3);
  max-inline-size: var(--measure);
  color: var(--c-text-muted);
}

.booking__stage {
  position: relative;
  min-block-size: 320px;
  padding: var(--space-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
  overflow: clip;
}

/* A hairline of accent along the top edge, so the stage reads as a live
   surface rather than another empty panel while the widget loads. */
.booking__stage::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 1px;
  background-image: var(--grad-hairline);
}

.booking__skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
}

.booking__skeleton span {
  display: block;
  block-size: 56px;
  border-radius: var(--r-md);
  background-color: var(--c-surface-raised);
}

.booking__skeleton span:nth-child(2) { inline-size: 82%; }
.booking__skeleton span:nth-child(3) { inline-size: 64%; }

.booking__fallback { color: var(--c-text-muted); }

/* --- Contact CTA (replaces the inline widget) ----------------------------- */
.contact__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  max-inline-size: var(--measure);
}

.contact__cta-lede { color: var(--c-text-muted); }

.contact__cta-note {
  font-size: var(--fs-sm);
  color: var(--c-text-faint);
}

/* ==========================================================================
   BOOKING DIALOG — native <dialog>, so the browser owns focus and Escape.
   ========================================================================== */
.book {
  inline-size: min(92vw, 520px);
  max-block-size: min(88vh, 780px);
  padding: 0;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background-color: var(--c-surface);
  color: var(--c-text);
  overflow: hidden;
}

.book::backdrop {
  background-color: color-mix(in srgb, var(--c-bg) 78%, transparent);
  backdrop-filter: blur(6px);
}

.book__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-block-end: 1px solid var(--c-border);
}

.book__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--c-text);
}

.book__pulse {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background-color: var(--c-ok);
}

.book__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tap-min);
  block-size: var(--tap-min);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background-color: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.book__close:hover {
  color: var(--c-text);
  border-color: var(--c-border-strong);
}

.book__stage {
  padding: var(--space-5);
  overflow-y: auto;
}

.book__foot {
  padding: var(--space-4) var(--space-5);
  border-block-start: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  color: var(--c-text-faint);
}