/* ============================================================
   PROSPECT — index.html page-specific styles
   ============================================================ */

/* Colours, type, spacing and the shared content patterns come from
   the Prospect Context Protocol via `brand/` (see the header of
   css/global.css). Everything here is page layout plus the few
   display treatments that only exist on this page — all of it
   expressed in brand tokens, never literals, so a change upstream
   lands here automatically.

   Responsive rules for this page live in the single RESPONSIVE
   section at the end of css/global.css — three steps, two knobs.
   Everything here is base (full-size) styling and is placed in the
   `base` cascade layer so those breakpoint rules can override it
   even though this file loads later. */
@layer base {

.page-shell {
  position: relative;
}

/* ── Hero (1.1) ──
   Full-bleed animation, title + tagline centred at the top,
   protected by a scrim that fades down from the top edge. */
.hero {
  position: relative;
  min-height: calc(100vh - 68px);
  overflow: hidden;
}

/* The animation's own page centres its artwork vertically inside
   whatever box it is handed, and that artwork is a wide 2.39:1 band.
   Given the full height of the hero it therefore floated in the middle,
   leaving a deep empty margin between the graphic and the quote below —
   the Isaac hero has no equivalent gap because its artwork is anchored
   near the bottom of the section.

   So the box is pinned to the bottom of the hero and sized close to the
   artwork's own height rather than the hero's. Its width is untouched,
   which is what determines the artwork's scale, so the graphic itself
   renders at exactly the same size as before — only the dead space
   under it goes. max-height keeps it inside the hero on short windows. */
.hero__animation {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(180px, 46vw, 560px);
  max-height: 100%;
  z-index: 0;
  /* The iframe documents paint their own ground as a full-bleed
     <path fill>, recoloured to --linen with the brand migration, so
     the container simply follows the page. */
  background: var(--bg);
}

.hero__animation iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    var(--bg) 0%,
    var(--bg) 16%,
    color-mix(in srgb, var(--bg) 70%, transparent) 26%,
    color-mix(in srgb, var(--bg) 25%, transparent) 36%,
    color-mix(in srgb, var(--bg) 0%, transparent) 46%);
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 72px var(--gutter) 0;
  text-align: center;
}

/* The PROSPECT logotype. This is the mark, not typography — it stays
   in Cormorant Garamond 300 with wide tracking via --font-wordmark,
   the one legitimate use of Cormorant in the system. */
.hero__wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--weight-light);
  font-size: clamp(40px, 5vw, 68px);
  letter-spacing: var(--track-wordmark);
  color: var(--text);
  line-height: var(--leading-tight);
}

.hero__tagline {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--mono-md);
  letter-spacing: var(--track-mono-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 20px;
}

/* ── 1.1.3 — Hero quote ── */
.hero-quote {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px var(--gutter) 72px;
  text-align: center;
}

.hero-quote__rule {
  width: 48px;
  height: var(--hairline);
  background: var(--accent);
  margin: 0 auto 32px;
}

/* Display copy: hierarchy from weight and size, never a family shift,
   never italic, never wide tracking. */
.hero-quote__text {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(23px, 2.6vw, 28px);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-heading);
  color: var(--text);
}

/* ── 1.3 — Who We Are ── */
/* Type comes from the shared body-text rule in global.css. */
.who-we-are__intro {
  margin-bottom: 20px;
}

/* The closing paragraph of the block leaves the gap to the block below. */
.who-we-are__intro:last-child { margin-bottom: 0; }

/* .pillar-row / .pillar-card and their eyebrow + description type are
   brand patterns — see brand/foundations/patterns.css. Nothing to
   restate here. */

/* ── 1.4 — Problems We Solve ── */
/* Type comes from the shared .body-text--intro rule in global.css. */
.problems__intro { margin-bottom: 36px; }


/* ── 1.5 — Use case sections (animated) ──
   Strict 50/50 split: animation full-height on one side, copy on the
   other. The section label sits alone, top-left of the section, above
   both. Sides alternate via .use-case-section--reverse. No gradients —
   the animation's own background is flat, so it blends with no seam. */
.use-case-section {
  position: relative;
  padding-top: 20px;
  margin-bottom: 50px;
}

.use-case__label {
  padding: 0 var(--gutter);
  max-width: var(--content-max);
  margin: 0 auto 12px;
}

.use-case__row {
  display: flex;
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  gap: 56px;
}

.use-case-section--reverse .use-case__row {
  flex-direction: row-reverse;
}

.use-case__animation {
  flex: 1 1 0;
  padding-bottom: 10px;
  /* Same ground as the page — see .hero__animation above. */
  background: var(--bg);
}

/* Overflow copy — anything beyond the first paragraph runs full-width
   below the row instead of stacking inside the text column. Longer text
   was growing .use-case__row taller than the animation's own aspect
   ratio, which stretched (and cropped) the graphic to match; keeping
   the row itself short and moving the rest of the copy below fixes
   that at the source rather than capping text length. Holds one of the
   floating-bubble containers — no styling of its own, just width and
   position, so the bubble is the only visible frame. */
.use-case__more {
  max-width: calc(var(--content-max) - var(--gutter) * 2);
  margin: 40px auto 0;
}

.use-case__more:empty { display: none; }

.use-case__more .use-case__body {
  max-width: none;
}

.use-case__more .use-case__body + .use-case__body {
  margin-top: 18px;
}

/* Each animation's container is matched to that specific artwork's own
   aspect ratio (computed from its cropped viewBox), so "slice" fill-mode
   needs zero cropping in either direction — a shared ratio was cropping
   the narrower-ratio animations (e.g. Dashboards) vertically. */
/* Every one of these ratios is the drawing's own, measured off a render
   rather than taken from its viewBox — all four viewBoxes carried empty
   canvas that the iframe dutifully reserved as part of the graphic, which
   is why the dashboards and context drawings looked smaller than their
   neighbours. Cropped at source on 23 August 2026:

     dashboards   284px of dead canvas on the left      → 268 0 1056 857
     context      186 left, 225 right, 163 top          → 170 147 1068 672
     succession   150 above the artwork                 → 38 134 1320 695
     workflows    199 above the artwork                 → 29 183 1325 551

   If a drawing is ever redrawn, re-measure rather than trusting its
   viewBox: none of the four was tight. */
.animation-dashboards { aspect-ratio: 1.232; }
.animation-context { aspect-ratio: 1.589; }
.animation-succession { aspect-ratio: 1.899; }
.animation-workflows { aspect-ratio: 2.405; }

.use-case__animation iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: none;
}

.use-case__text {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Type comes from the shared body-text rule in global.css. */

.use-case__body + .use-case__body {
  margin-top: 18px;
}

/* Breathing room inside the copy column, previously set per paragraph
   with inline margins: the opening paragraph clears the top of the
   animation, and the bubble sits well clear of the copy above it. */
.use-case__text > .use-case__body:first-child { margin-top: 36px; }
.use-case__text > .bubble { margin-top: 36px; }

/* ── 1.6 — Flagship Products ── */
.products-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

.product-card {
  background: var(--surface);
  border: var(--border-1) solid var(--border);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  /* Grid items default to min-width: auto, which lets long unbreakable
     content push the card wider than its track. */
  min-width: 0;
}

.product-card--isaac {
  border-top: var(--border-2) solid var(--accent);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}

.product-card--isaac:hover {
  background: color-mix(in srgb, var(--gold) 6%, var(--surface));
}

.product-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.product-card__crease {
  width: 55px;
  height: auto;
}

.product-card__badge {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  font-size: var(--mono-xs);
  letter-spacing: var(--track-mono-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  border: var(--border-1) solid var(--ash);
  padding: 4px 10px;
}

/* Product logotypes — the wordmark treatment, as in the nav. */
.product-card__name {
  font-family: var(--font-wordmark);
  font-weight: var(--weight-light);
  font-size: 30px;
  letter-spacing: 6px;
  color: var(--text);
}

.product-card__name--muted {
  color: var(--ash);
  font-size: 22px;
}

.product-card__meta {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  font-size: var(--mono-xs);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 20px;
}

.product-card__cta {
  margin-top: 20px;
  align-self: flex-start;
}

/* ── 1.7 — Contact CTA ── */
.contact-cta {
  text-align: left;
}

.contact-cta__anchor {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: clamp(28px, 4vw, 40px);
  line-height: var(--leading-snug);
  letter-spacing: var(--track-display);
  color: var(--text);
  max-width: 28ch;
}

/* Type comes from the shared body-text rule (--muted) in global.css. */
.contact-cta__support {
  margin-top: 20px;
  max-width: 75ch;
}

.contact-cta__cta {
  margin-top: 40px;
}

}