/* ProLine — WordPress bridge layer.
   The only purpose of this file is to neutralise block-editor defaults that
   fight the approved Gate 3 composition. It contains no design decisions of its
   own, so the ported files (tokens/app/motion/sections/enhance/charts) stay
   byte-identical to the frozen source and remain trivially re-portable.

   Every rule below cites the core default it cancels. */

/* Core emits `:where(.wp-site-blocks) > * { margin-block-start: <blockGap> }`,
   which pushed the whole composition down by 24px at every viewport. The ported
   design owns its own vertical rhythm through --section-y and --rhythm-*. */
.wp-site-blocks > *,
.wp-site-blocks > main > * {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* The template wraps <main> in a layout group. It must not introduce a width
   constraint: .shell already governs measure, and the hero and aperture bands
   are deliberately full-bleed. */
.wp-site-blocks > main {
  max-width: none;
  padding: 0;
}

/* The header, loader and spine are position-fixed overlays lifted out of flow.
   The div the template part renders around them must not create a stacking or
   sizing context of its own. */
.wp-site-blocks > div:has(> .header),
.wp-site-blocks > div:has(> .loader) {
  display: contents;
}

/* Core's block-library reset gives figures a bottom margin that the hero card
   composition does not expect. */
.hero__card {
  margin: var(--s-6) 0 0;
}

/* The footer template part wrapper must not re-introduce the block gap between
   the consultation band and the contact band, which the aperture edge relies on
   overlapping by exactly --r-aperture. */
.wp-site-blocks > div:has(> .footer) {
  display: contents;
}

/* The floating navigation yields when the final footer enters view. This keeps
   the footer fully readable on short laptop screens and returns the navigation
   immediately when the user scrolls upward. */
.header {
  transition: transform var(--d-2) var(--e-out), opacity var(--d-1) var(--e-out);
}
body.footer-view .header {
  transform: translateY(calc(-100% - var(--s-3)));
  opacity: 0;
  pointer-events: none;
}

/* ---- Capability bus: six stations ------------------------------------
   Gate 3 approved a four-station bus. The service taxonomy is six, so the
   bus was extended; the signal-path concept, station geometry and travelling
   cyan segment are unchanged. Owner-approved 2026-08-07, before/after frames
   in docs/evidence/.

   `--stations` drives the width of the travelling segment in sections.css, so
   it must match the station count or the highlight lands in the wrong place. */
.cap__bus--six { --stations: 6; }
.cap__bus--six .cap__stations { grid-template-columns: repeat(6, 1fr); }

/* Six across is too tight below the widest desktop; step down rather than
   letting the labels collide. */
@media (max-width: 1439px) {
  .cap__bus--six .cap__stations { grid-template-columns: repeat(3, 1fr); row-gap: var(--s-5); }
  .cap__bus--six { --stations: 3; }
  .cap__bus--six .cap__line { display: none; }
}
@media (max-width: 900px) {
  .cap__bus--six .cap__stations { grid-template-columns: repeat(2, 1fr); }
  .cap__bus--six { --stations: 2; }
}
@media (max-width: 520px) {
  .cap__bus--six .cap__stations { grid-template-columns: 1fr; }
  .cap__bus--six { --stations: 1; }
}

/* The station dot is absolutely positioned against the bus; with wrapped rows
   it must anchor to its own station instead. */
@media (max-width: 1439px) {
  .cap__bus--six .station { position: relative; }
  .cap__bus--six .station::before { top: 0; }
}

/* Link from each panel through to the full service page. */
.cap__more { margin-top: var(--s-3); }
.cap__more a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: var(--fs-small); font-weight: 600; color: var(--blue-500);
  text-decoration: none; border-bottom: 1px solid currentColor;
}
.cap__more a:hover { color: var(--cyan-400); }

/* Service-specific editorial artwork. It explains each capability without
   presenting fabricated interfaces, metrics or client evidence. */
.cap__media {
  position: relative;
  isolation: isolate;
  min-height: clamp(160px, 16vw, 220px);
  margin-top: var(--s-2);
  overflow: hidden;
  border: 1px solid rgb(23 95 234 / 24%);
  border-radius: var(--r-control);
  background: var(--navy-950);
  box-shadow: 0 18px 42px rgb(4 18 38 / 14%);
}
.cap__media picture,
.cap__media img {
  display: block;
  width: 100%;
  height: 100%;
}
.cap__media picture {
  position: absolute;
  inset: 0;
}
.cap__media img {
  object-fit: cover;
  filter: saturate(.92) contrast(1.03);
  transition: scale 500ms cubic-bezier(.22, 1, .36, 1);
}
.cap__media::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid rgb(255 255 255 / 9%);
  border-radius: inherit;
  background:
    linear-gradient(180deg, rgb(3 12 28 / 4%), transparent 58%, rgb(3 12 28 / 24%)),
    linear-gradient(90deg, rgb(3 12 28 / 8%), transparent 32%);
  content: "";
  pointer-events: none;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cap__panel:hover .cap__media img { scale: 1.025; }
}

@media (max-width: 900px) {
  .cap__media { min-height: 150px; }
}

/* Method is the final homepage content section before the consultation band.
   A shorter lower edge reveals that next action as an intentional handoff on
   laptop and desktop screens instead of leaving a cropped-looking fragment. */
@media (min-width: 901px) {
  #method { padding-bottom: clamp(36px, 5vh, 56px); }
}

/* ---- Editable brand principle ----------------------------------------
   The Gate 3 markup used a <blockquote>. It is now an editable paragraph, so
   the same treatment is bound to a class instead of the element. A statement of
   principle is arguably not a quotation, so this is also the more accurate
   semantic. */
.why__principle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-statement);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* ---- Beat captions ----------------------------------------------------
   The narrative beats used <h3>, which created an h1 -> h3 jump in the
   homepage outline. They are timed captions rather than document sections, so
   they are now paragraphs carrying the same treatment the heading had. */
.beat__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  color: var(--text-dark);
}
.cinema .beat__title { font-size: var(--fs-h3); }