/* ==========================================================================
   Home Page Styles
   ========================================================================== */

/**
 * Page-specific styles for the Big Bang Visibility home page (index.php).
 * Uses CSS custom properties from site.css for all colors and spacing.
 * Follows CUBE CSS methodology: Composition, Utility, Block, Exception.
 *
 * Many patterns here (buttons, sections, forms, expandable, footer) are
 * shared with starter-website-packages.css. These live here because the
 * home page only loads site.css + home.css — not the packages page CSS.
 * Candidate for future extraction to site.css once a third page needs them.
 *
 * Semi-transparent colors (8-digit hex #RRGGBBAA — see coding-conventions.md):
 *   Brand-primary tints → the --tint-primary-{faint,soft,edge,glow} scale (B9).
 *   #ffffff1a  white             ~10%  gallery footer border-top
 *
 * Responsive Content-Driven Design Breakpoints (Desktop-First):
 * - Desktop: 1025px+ (base style, no media query)
 * - Laptop:  max-width: 1024px
 * - Tablet:  max-width: 880px (Adjusted from standard of 768px)
 * - Tablet:  max-width: 768px (the canonical step — the dawn hero's limb scale only)
 * - Mobile:  max-width: 480px
 * - Height:  max-height: 680px and min-width: 769px — the dawn hero's compact
 *            mode (measured threshold; derivation on the block)
 */

/* ==========================================================================
   Composition — Layout Structure
   ========================================================================== */

/* The hero's layout lives with its composition in Block — Hero (the dawn):
   its layers are positioned against each other, so splitting the layout from
   the block would separate rules that only make sense together. */

/* What I Do — four structure blocks in a row under the section copy (the
   prototype's single-column layout; the former 40/60 split is gone) */
.structure-blocks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

/* Feature card grid — 3 columns × 2 rows on desktop (6 cards total) */
.feature-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* Process steps — a five-across ordered list; each step launches from its
   node dot along the dotted trajectory (Block — Process Steps) */
.process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0 0;
}

/* Gallery grid — 3 equal columns on desktop */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* ==========================================================================
   Utility — Single-Purpose Classes
   ========================================================================== */

/* Text accent — orange span used for headline emphasis (e.g. "Clear" in hero) */
.text-accent {
  color: var(--color-primary);
}

/* ==========================================================================
   Block — Growth Grid (Everything Else You Need to Grow)
   Compact icon grid — lighter than service cards, awareness-focused.
   ========================================================================== */

/* 5-column grid on desktop */
.growth-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* Each item is a recessed tile — the Texture "recessed tiles for inclusion
   lists" recipe (design.md § Treatment Assignments), resolved from the
   section's role tokens rather than palette tokens (the former
   --color-text-dark / --color-text-muted literals broke the B5 rule). */
.growth-item {
  background-color: var(--surface-recessed);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  padding: var(--space-md);
  text-align: center;
}

/* Icon — the accent role, so it follows the section's family */
.growth-item__icon {
  width: 4.4rem;
  height: 4.4rem;
  margin: 0 auto var(--space-sm);
  color: var(--text-accent);
}

.growth-item__icon svg {
  width: 100%;
  height: 100%;
}

.growth-item__title {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
}

/* Tagline — short outcome-focused line */
.growth-item__tagline {
  font-size: var(--font-size-tiny);
  font-weight: 400;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Single CTA below the grid */
.growth__cta {
  text-align: center;
  margin-top: var(--space-xl);
}

/* ==========================================================================
   Block — Partnerships Section
   ========================================================================== */

/* Full-bleed photo background with dark overlay.
 * <picture> is absolutely positioned and covers the section;
 * .section__container sits above it via z-index.
 */
.partnerships {
  position: relative;
  overflow: hidden;
}

/* Decorative background image — <picture> + <img> fills the section */
.partnerships__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.partnerships__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Ink scrim, heavier on the copy side — the canvas token dimmed at 95 / 85 /
   60 % via color-mix (a one-off surface dim, css-conventions.md § Semi-
   Transparent Colors Tier 2), replacing the flat 55 % black. The photo is the
   surface's texture: this section deliberately carries no starscape
   (design.md § Treatment Assignments — photographic surfaces sit outside the
   tile rule). Copy contrast over the photo is 11.2's pixel record. */
.partnerships::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--color-bg-dark) 95%, transparent) 0%,
    color-mix(in srgb, var(--color-bg-dark) 85%, transparent) 55%,
    color-mix(in srgb, var(--color-bg-dark) 60%, transparent) 100%);
}

/* Content above the image and overlay */
.partnerships .section__container {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Block — Hero (the dawn)
   ========================================================================== */

/* Home's Reserved elevation (01-prd-marketing-restyle.md FR 13; design.md
   § Treatment Assignments → Reserved, "Dawn hero composition"): a sunrise
   cresting a brand-rust planet limb — home's own cosmic expression,
   deliberately distinct from /founding-client's burst-and-rings identity.
   Three decorative layers sit under the copy, in paint order: the star field
   (::before, z 0) and the sun (z 0), then the planet (z 1) so the sun crests
   from BEHIND the limb, then the content (z 2). Every colour derives from an
   existing token through color-mix() — the brand hue is never a literal alpha
   (css-conventions.md § Brand Tint Scale); the one net-new hue is
   --color-sun-gold (FR 3). Ported from the approved prototype. Where a
   gradient stop is not a tint-scale rung it is a one-off stop of this
   composition, not a recurring wash, so it stays an inline mix on the token
   rather than minting a rung nothing else would consume. */
.hero-dawn {
  position: relative;
  display: flex;
  align-items: center;
  /* svh, not bare vh: vh resolves to the largest viewport and overstates on
     iOS by the toolbar height (css-conventions.md § Viewport Units). */
  min-height: 88vh;
  min-height: 88svh;
  /* The bottom padding is the stage the limb's crest occupies below the copy. */
  padding: var(--space-2xl) var(--space-md) clamp(16rem, 18vw, 26rem);
  overflow: hidden;
}

/* Star field on its own layer so the entrance can fade it in — the denser
   hero tile, not the section tile (FR 3). */
.hero-dawn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--stars-hero);
  pointer-events: none;
}

/* Sunrise — crests behind the limb, centred a hair below the arc line (~13.7vw
   at x = 68vw) so only the hot core breaks the horizon. Two radials: the sun's
   own temperature scale (white-gold heart → gold disc → orange falloff — hotter
   than anything the planet carries), then a restrained corona on the glow and
   soft rungs. */
.hero-dawn__sun {
  position: absolute;
  z-index: 0;
  left: 68vw;
  bottom: 13.45vw;
  width: 40vw;
  height: 40vw;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      color-mix(in srgb, var(--color-text-light) 55%, var(--color-sun-gold)) 1.5%,
      var(--color-sun-gold) 6%,
      color-mix(in srgb, var(--color-primary) 85%, transparent) 9.5%,
      color-mix(in srgb, var(--color-primary) 38%, transparent) 13%,
      transparent 18%),
    radial-gradient(circle,
      var(--tint-primary-glow) 0%,
      var(--tint-primary-soft) 30%,
      transparent 62%);
  pointer-events: none;
}

/* Planet limb — a 240vw circle whose top arc cuts the hero's bottom edge; the
   apex sits right of centre (translateX −45%) so the horizon rises toward the
   sun. Brand-rust terrain lit along a terminator toward the sun-crest: the
   gradient centres sit at 52.5% 0% in circle-space, directly under the sun.
   The base is the ink canvas darkened with black — black is anchorless, so the
   literal is the right form (css-conventions.md § Semi-Transparent Colors,
   Tier 3). The 1px edge and the two glows are the glow / soft rungs. */
.hero-dawn__planet {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 0;
  width: 240vw;
  height: 240vw;
  transform: translate(-45%, 94%);
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--color-bg-dark) 55%, #000);
  background-image:
    /* the crest's highlight, directly under the sun */
    radial-gradient(ellipse 18% 1.6% at 52.5% 0.2%, color-mix(in srgb, var(--color-primary) 45%, transparent) 0%, transparent 75%),
    /* lit ground beneath the cresting sun — the edge rung (30%) */
    radial-gradient(ellipse 7% 3.2% at 52.5% 0%, var(--tint-primary-edge) 0%, transparent 70%),
    /* the terminator: rust fading into the night side */
    radial-gradient(ellipse 55% 4.5% at 53% 0%, color-mix(in srgb, var(--color-primary-dark) 48%, var(--color-bg-dark)) 0%, color-mix(in srgb, var(--color-primary-dark) 20%, var(--color-bg-dark)) 45%, transparent 85%);
  border: 1px solid var(--tint-primary-glow);
  box-shadow:
    0 0 6rem 0.5rem var(--tint-primary-glow),
    0 0 22rem 5rem var(--tint-primary-soft);
  pointer-events: none;
}

/* Terrain mottling — the --noise-terrain tile (FR 3) soft-light-blended over
   the disc and masked to the sun-grazed crest, so the texture shows on the lit
   side and dissolves into the night side instead of reading as flat static
   across the whole planet. A tiled image, not a live feTurbulence filter: the
   limb animates on entrance, and a 240vw filter region would re-rasterise
   with it. The mask's stops are alpha only (black = opaque), so they stay
   literal. */
.hero-dawn__planet::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--noise-terrain);
  mix-blend-mode: soft-light;
  opacity: 0.65;
  -webkit-mask-image: radial-gradient(ellipse 45% 5% at 53% 0%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 45% 5% at 53% 0%, #000 0%, rgba(0, 0, 0, 0.5) 55%, transparent 100%);
}

/* Copy — above the composition, asymmetric: text-left at a reading measure
   inside the full-width frame, so the sunrise owns the right of the stage. */
.hero-dawn__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Hero eyebrow — the eyebrow register (tiny / 700 / 0.14em on --text-accent)
   WITHOUT the section spark: the prototype keeps the hero's kicker glyph-free.
   Page-scoped for that reason; whether FR 18's rule puts the spark here too is
   10.1's / 11.7's call. */
.hero-dawn__eyebrow {
  font-size: var(--font-size-tiny);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--space-md);
}

/* Headline — the serif display face at a fluid size; balance keeps the three
   <br>-set lines even where a wrap would leave a stub. */
.hero-dawn__headline {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: clamp(4.4rem, 6.4vw, 8rem);
  line-height: 1.08;
  text-wrap: balance;
  color: var(--text);
  max-width: 90rem;
  margin-bottom: var(--space-md);
}

/* The hand-drawn underline under "Clear" — a self-drawing underline is
   Reserved (design.md § Treatment Assignments), home's second Reserved spend
   beside the dawn (FR 13). An inline SVG stroke rather than a border so it can
   waver. PRD § 8's ascender watch, resolved 2026-08-28: at the prototype's
   bottom: -0.16em the stroke sat ~30 px under "Clear"'s baseline at 80 px —
   the cap-line of "Solid" on the next line at line-height 1.08 — and read as
   collision at 1440, 768 and 480; -0.04em still touched them at 768 and 480.
   DM Serif Display's content area is taller than the 1.08 line box, so the
   interline gap is ~0 and the only clear room is the descender space under
   "Clear" (no descenders in the word): at +0.04em the stroke sits on the
   baseline and clears the next line's caps at every tested width. */
.underline-drawn {
  position: relative;
  white-space: nowrap;
}

.underline-drawn svg {
  position: absolute;
  left: 0;
  bottom: 0.04em;
  width: 100%;
  height: 0.3em;
  overflow: visible;
}

.underline-drawn path {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-linecap: round;
}

.hero-dawn__subhead {
  font-size: var(--font-size-large);
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 64rem;
  margin: 0 0 var(--space-lg);
}

/* CTA group — the button row, then the honesty meta line beneath it. */
.hero-dawn__cta-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.hero-dawn__cta-row {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ==========================================================================
   Block — Founding Teaser (Founding Client Program band)
   ========================================================================== */

/* Campaign entry band (01-prd-founding-client-offer.md FR 7) — a slim dark strip between the hero and
   What I Do. Overrides the section-system vertical padding so it reads as a
   band, not a full section (home.css loads after site.css, so this wins over
   the responsive .section padding rules too — the band stays slim at every
   width). The faint center glow echoes the campaign page's big-bang motif.
   Retired at campaign close-out (tasks-01-prd-founding-client-offer.md
   § Close-out). Surface: the raised dark canvas (.section--dark-alt in the
   markup, 01-prd-marketing-restyle.md FR 12) — a solid tone step below the
   dawn's star field, tile-free by surface type, so no .starscape and no
   hairline top border (the step itself is the boundary). Operator choice at
   restyle task 11.7 from three rendered options; until then the band was ink
   with the tile layered under this glow (11.1). */
.founding-teaser {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  background-image: radial-gradient(ellipse 70% 120% at 50% 50%, var(--tint-primary-faint), transparent);
}

/* The offer line — heading weight sits at 500 so the <strong> segments
   ("three founding clients") register against it */
.founding-teaser__line {
  font-size: var(--font-size-2xl);
  font-weight: 500;
  line-height: 1.5;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-lg);
}

/* Urgency tag — the typewriter face (Courier Prime), the campaign's "honesty voice" for deadline metas */
.founding-teaser__urgency {
  margin-top: var(--space-sm);
  font-family: var(--font-typewriter);
  font-size: var(--font-size-tiny);
  color: var(--text-muted);
}

/* ==========================================================================
   Block — Secondary Hero (What I Do)
   ========================================================================== */

/* Structure blocks — four pillars in a row (grid in Composition). No cards,
   no shadows: a hairline rule above each block does the work. */
.structure-block {
  border-top: 1px solid var(--border-hairline);
  padding-top: var(--space-md);
}

/* Title — bold sans at xl (the prototype's "bumped" size, one step above the
   large body-label rung), anchored by the star glyph below. */
.structure-block__title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

/* Star anchor — a filled four-point star, the block-level focal glyph
   (01-prd-marketing-restyle.md FR 14). Deliberately NOT the spark: the spark
   is the section marker (the eyebrow), and repeating it inside a section
   would spend its wayfinding meaning (operator ruling 2026-08-23; an
   orbit-ring glyph was vetoed as ring-ambiguous). A CSS mask over the accent
   role on a pseudo-element, so nothing reaches assistive technology. */
.structure-block__title::before {
  content: '';
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.5em;
  vertical-align: -0.06em;
  background-color: var(--text-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1 Q13.5 9 23 12 Q13.5 15 12 23 Q10.5 15 1 12 Q10.5 9 12 1 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 1 Q13.5 9 23 12 Q13.5 15 12 23 Q10.5 15 1 12 Q10.5 9 12 1 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Description — muted, explanatory rather than declarative */
.structure-block__description {
  font-size: var(--font-size-small);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* ==========================================================================
   Block — Feature Cards — Built for Performance and Looks
   ========================================================================== */

/* Feature card — a raised card with a hairline on the cream canvas (the
   Texture "hairline borders on raised cards" row), left-aligned icon, title
   and copy per the prototype; resolved from role tokens. */
.feature-card {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-hairline);
  border-radius: 8px;
  padding: var(--space-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.feature-card:hover {
  box-shadow: var(--shadow-5);
  border-color: var(--tint-primary-edge);
}

/* Icon — the accent role for the SVG stroke (currentColor) */
.feature-card__icon {
  width: 4.8rem;
  height: 4.8rem;
  margin-bottom: var(--space-sm);
  color: var(--text-accent);
}

.feature-card__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.feature-card__title {
  font-size: var(--font-size-large);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--space-sm);
}

/* Description — muted, explanatory copy */
.feature-card__description {
  font-size: var(--font-size-small);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* ==========================================================================
   Block — Process Steps (The Strategy Behind the Code)
   ========================================================================== */

/* Home's two one-section Moment spends, both on Process — the page's only
   genuinely sequential section (01-prd-marketing-restyle.md FR 14; design.md
   § Treatment Assignments → Moment): the dotted trajectory with node dots, and
   the ghost glyphs. Ported from /founding-client's timeline
   (founding-client.css § ⑥ How It Works) as a page-scoped copy under home's
   block names — one page uses it, and it promotes to site.css when a second
   does (the 2+ rule). The steps are an <ol>, so the sequence lives in the
   markup and the big numerals are decoration (aria-hidden). Layout (the grid)
   is in the Composition section above. */
.process-step {
  position: relative;
  isolation: isolate;
  padding-top: var(--space-sm);
}

/* Dotted trajectory segment launching each step from its node dot — every
   segment stops short at 40 %, so the steps read as discrete waypoints rather
   than one continuous line. Its draw-in lives in the Exception section. */
.process-step::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 40%;
  height: 2px;
  background-image: repeating-linear-gradient(to right, var(--text-accent) 0 6px, transparent 6px 14px);
  opacity: 0.5;
}

/* Node dot where each step meets the trajectory */
.process-step::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--color-primary);
}

/* Ghost glyphs — hand-imperfect burst (odd steps) and star (even steps) SVGs
   at ghost opacity behind the content. Inline color-mix on the brand tokens:
   16 % is an orange rung the tint scale does not carry, and secondary has no
   tint scale (primary-only by convention) — both still track their hue. The
   star sits at 40 % (the prototype's value): the founding page's 14 % green
   disappears on ink. */
.process-step__ghost {
  position: absolute;
  top: -2.2rem;
  right: 0.4rem;
  z-index: -1;
  width: 10rem;
  height: 10rem;
  pointer-events: none;
}

.process-step__ghost--burst {
  color: color-mix(in srgb, var(--color-primary) 16%, transparent);
}

.process-step__ghost--star {
  color: color-mix(in srgb, var(--color-secondary) 40%, transparent);
}

/* Step numeral — the serif display face, large, brand orange (decorative:
   the <ol> carries the order for assistive technology) */
.process-step__number {
  display: block;
  font-family: var(--font-accent);
  font-size: var(--font-size-5xl);
  line-height: 1;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

/* Icon — the existing line icons, now small and muted. The SVG files carry a
   literal stroke="#ffffff" from their days on the coloured blocks; the CSS
   `stroke` property beats the presentation attribute, so they take
   currentColor here without an asset edit. */
.process-step__icon {
  display: inline-block;
  width: 3.2rem;
  height: 3.2rem;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}

.process-step__icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
}

.process-step__title {
  font-size: var(--font-size-large);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.process-step__description {
  font-size: var(--font-size-small);
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* ==========================================================================
   Block — Service Cards
   ========================================================================== */

/* Pricing section — wider container to give 4-column grid enough room */
#pricing .section__container {
  max-width: 1400px;
}

/* Price figures take the accent role (peach #ffc299 in the ink family), not
   the baseline's brand orange: orange #ff6a00 on the green card measures
   3.11:1 — a large-text pass by 0.11, inside the ~0.2 headroom band
   accessibility-standards.md § Design-Language Rules treats as fragile, and a
   pair contrast.js does not gate — where the accent role measures ≈ 5.7:1.
   The same ruling the island's $150 took (.cta-panel__offer .price), so the
   page's five prices now share one colour. Operator ruling 2026-08-28 at the
   11.0 checkpoint (task list 11.2), deviating from the prototype's orange. */
.pricing .service-card__price .price {
  color: var(--text-accent);
}

/* Pricing grid — 4 columns on desktop so all tiers are visible for comparison */
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

/* ==========================================================================
   Block — CTA Panel (the navy island)
   ========================================================================== */

/* The navy CTA is an island, not a section: a floating panel framed by ink on
   every side, so the navy↔ink seam the wave rule cannot cover never exists
   (design.md § Section Layout Patterns — the island rule; promoted from the
   prototype, 01-prd-marketing-restyle.md FR 15). The section around it is ink
   with the starscape tile; the panel carries .surface--navy in the markup, so
   everything inside — text, muted copy, links, both button variants, the
   recessed capsule — resolves from the navy family and nothing inherits from
   the ink section (the B5 rule, css-conventions.md § Theming). Hairline border
   and shadow are the raised-card recipe; 90 % width so the ink field reads all
   around, capped where a 1200px section container would otherwise cap it. */
.cta-panel {
  width: min(90%, 1360px);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
  border-radius: 12px;
  border: 1px solid var(--border-hairline-light);
  box-shadow: var(--shadow-6);
  /* Copy left at a reading measure, the offer capsule right in its own column.
     The capsule column has a floor: below ~34rem the primary button's label
     ("See What’s Included" at --font-size-large with the .btn side padding)
     wraps — measured 2026-08-28 at 1024 (2 lines) and 800 (3 lines) with a
     bare 1fr. The floor keeps it one line down to the 1024 collapse. */
  display: grid;
  grid-template-columns: 1.7fr minmax(34rem, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.cta-panel__body .section__intro {
  max-width: 68rem;
}

/* Offer capsule — the panel's second column is a recessed product tile (the
   Recessed level of the surface ladder, resolved from .surface--navy), so the
   column carries real content rather than floating buttons. A column flex
   container: the two buttons are flex items and stretch to the capsule's
   width at every viewport, which is what makes them full-width at 768 with
   no extra rule. */
.cta-panel__offer {
  background-color: var(--surface-recessed);
  border: 1px solid var(--border-hairline-light);
  border-radius: 8px;
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  justify-self: end;
  width: 100%;
  max-width: 36rem;
}

.cta-panel__offer-name {
  font-size: var(--font-size-large);
  font-weight: 700;
  color: var(--text);
}

.cta-panel__offer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cta-panel__offer-list li {
  position: relative;
  padding-left: 2rem;
  font-size: var(--font-size-small);
  color: var(--text-muted);
}

/* Bullet — a small accent dot drawn as a pseudo-element, so assistive
   technology reads the list items and nothing else. */
.cta-panel__offer-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-accent);
}

/* The capsule's price takes the navy family's accent role, not the pricing
   cards' orange. Same markup as the cards (.service-card__price .price), but a
   different surface: orange #ff6a00 measures 3.09:1 on the navy-recessed tile
   — a large-text pass by 0.09, and outside what contrast.js gates — where the
   accent role resolves to #ffc299 at ≈5.7:1. Operator ruling 2026-08-28,
   deviating from the prototype (task list 8.4); the pricing cards' figures
   followed at the 11.0 checkpoint, once they measured 3.11:1 on green — see
   the Service Cards block. */
.cta-panel__offer .price {
  color: var(--text-accent);
}

.cta-panel__offer .btn {
  text-align: center;
}

/* ==========================================================================
   Block — Gallery
   ========================================================================== */

/* (The section heading takes the baseline serif from site.css .section__heading
   since restyle task 5.2 — no page override needed.) */

/* Gallery item — a ghost-framed card: the whole link is a transparent card
   with the cream hairline (the same ghost line the pricing cards and the
   island carry), so the starscape shows through the caption and the section
   keeps its Texture; image on top, caption inside the frame below. Hover is
   the card response design.md § Component Behavior prescribes — the edge
   warms to the brand tint and the image shadow deepens — never movement
   (01-prd-marketing-restyle.md FR 11). Operator choice at restyle task 11.7
   (option A of three rendered). A classed <a> falls through to the UA
   stylesheet for anything it does not declare (css-conventions.md § Classed
   Links Must Declare Color — the same gap for text-decoration): without the
   text-decoration below, the browser underlines the whole caption. */
.gallery-item {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border: 1px solid var(--border-hairline-light);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover {
  border-color: var(--tint-primary-edge);
}

/* Image container — fixed aspect ratio for consistent mockup frames.
 * 16:10 is wider than 16:9 and better matches typical website viewport screenshots.
 * object-position: top shows the hero/nav of a site mockup, not the footer.
 */
.gallery-item__image {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 16 / 10;
  background-color: var(--surface-raised); /* the role token, not the ink palette token (B5) */
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-image);
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover .gallery-item__image {
  box-shadow: var(--shadow-image-hover);
}

.gallery-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-item:hover .gallery-item__image img {
  transform: scale(1.03);
}

/* Caption — title and one-line description below the image */
.gallery-item__title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--text); /* role tokens — the card is a classed link, so it declares its own ink (B5) */
  margin-bottom: var(--space-xs);
}

.gallery-item__description {
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 0;
}

/* Gallery footer — full-width row below the grid: label left, CTA right */
.gallery-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid #ffffff1a;
}

.gallery-footer__label {
  font-size: var(--font-size-small);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-muted-dark);
}

.gallery-footer__cta {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--link);
  text-decoration: none;
  position: relative;
  transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-footer__cta::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--link-hover);
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.gallery-footer__cta:hover {
  color: var(--link-hover);
}

.gallery-footer__cta:hover::after {
  width: 100%;
}

.gallery-footer__cta:focus {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

/* ==========================================================================
   Block — Typography (Page-Specific)
   ========================================================================== */

/* Section intro — same as lead, used for brief section descriptions.
   Muted text via the --text-muted role token (resolves per context: warm/cool
   --color-text-muted, ink/navy --color-text-muted-dark). Replaces the former
   .section--{light,dark,accent} .section__intro overrides (B1+B2). */
.section__intro {
  font-size: var(--font-size-large);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: var(--space-md);
  max-width: 90rem;
  color: var(--text-muted);
}

/* ==========================================================================
   Exception — Animations & Scroll Effects
   ========================================================================== */

/* Dawn choreography (01-prd-marketing-restyle.md FR 13) — the stars appear,
   the horizon settles, the sun crests behind it, then the copy rises in a
   stagger: ~2 s in all, transform and opacity only, deliberately leisurely (an
   operator choice, recorded as a motion-rule exception in design.md
   § Cross-Cutting Motion Rules — do not "optimise" it). Gated on the root
   motion-reduce class: under it no animation is declared at all, so every
   layer sits at its resting state and the finished scene is what paints.
   Every from-state repeats the element's resting transform (translate(-45%,
   94%) for the limb, (-50%, 50%) for the sun), so a killed or skipped
   animation leaves the scene composed, never displaced. Pure CSS — nothing
   starts at opacity 0 outside an animation, so no .js gate is needed
   (css-conventions.md § Progressive Enhancement); the old JS-driven hero
   entrance (hero-animations.js) retired with the old hero. Keyframe names are
   prefixed because page CSS shares the keyframe namespace with site.css. The
   hero-entrance-stagger Moment budget is absorbed here (FR 14). */
@keyframes dawn-fade  { from { opacity: 0; }                                   to { opacity: 1; } }
@keyframes dawn-rise  { from { opacity: 0; transform: translate(-45%, 96%); }  to { opacity: 1; transform: translate(-45%, 94%); } }
@keyframes dawn-crest { from { opacity: 0; transform: translate(-50%, 54%); }  to { opacity: 1; transform: translate(-50%, 50%); } }
@keyframes dawn-lift  { from { opacity: 0; transform: translateY(18px); }      to { opacity: 1; transform: none; } }

html:not(.motion-reduce) .hero-dawn::before    { animation: dawn-fade   900ms        cubic-bezier(0.4, 0, 0.2, 1) both; }
html:not(.motion-reduce) .hero-dawn__planet    { animation: dawn-rise  1300ms  250ms cubic-bezier(0.4, 0, 0.2, 1) both; }
html:not(.motion-reduce) .hero-dawn__sun       { animation: dawn-crest 1600ms  650ms cubic-bezier(0.4, 0, 0.2, 1) both; }
html:not(.motion-reduce) .hero-dawn__eyebrow   { animation: dawn-lift   600ms 1000ms cubic-bezier(0.4, 0, 0.2, 1) both; }
html:not(.motion-reduce) .hero-dawn__headline  { animation: dawn-lift   600ms 1150ms cubic-bezier(0.4, 0, 0.2, 1) both; }
html:not(.motion-reduce) .hero-dawn__subhead   { animation: dawn-lift   600ms 1300ms cubic-bezier(0.4, 0, 0.2, 1) both; }
html:not(.motion-reduce) .hero-dawn__cta-group { animation: dawn-lift   600ms 1450ms cubic-bezier(0.4, 0, 0.2, 1) both; }

/* Process trajectory draw-in (FR 14) — each segment scales in from its node
   dot and the numeral rises, staggered 350 ms per step, once the list scrolls
   into view (main.js stamps is-visible on .process-steps). These are
   JS-dependent initial states, so they sit behind .js (css-conventions.md
   § Progressive Enhancement); under the root motion-reduce class the finished
   state renders and main.js adds the class immediately. Ported from the
   founding timeline (founding-client.css, task 4.6 there). */
.js .process-step::before {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms ease;
}

.js .process-steps.is-visible .process-step::before               { transform: scaleX(1); }
.js .process-steps.is-visible .process-step:nth-child(2)::before  { transition-delay: 350ms; }
.js .process-steps.is-visible .process-step:nth-child(3)::before  { transition-delay: 700ms; }
.js .process-steps.is-visible .process-step:nth-child(4)::before  { transition-delay: 1050ms; }
.js .process-steps.is-visible .process-step:nth-child(5)::before  { transition-delay: 1400ms; }

.js .process-step__number {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.js .process-steps.is-visible .process-step__number                             { opacity: 1; transform: none; }
.js .process-steps.is-visible .process-step:nth-child(2) .process-step__number  { transition-delay: 350ms; }
.js .process-steps.is-visible .process-step:nth-child(3) .process-step__number  { transition-delay: 700ms; }
.js .process-steps.is-visible .process-step:nth-child(4) .process-step__number  { transition-delay: 1050ms; }
.js .process-steps.is-visible .process-step:nth-child(5) .process-step__number  { transition-delay: 1400ms; }

/* Reduced motion — the finished trajectory and numerals, no transition */
html.motion-reduce .process-step::before {
  transform: none;
  transition: none;
}

html.motion-reduce .process-step__number {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ==========================================================================
   Responsive Design — Media Queries
   ========================================================================== */
   
/* --------------------------------------------------------------------------
   Desktop-first design — 1025px+ — no media query
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Pricing breakpoint (max-width: 1260px) — 4 columns → 2 columns
   -------------------------------------------------------------------------- */

@media (max-width: 1260px) {
  .pricing-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Laptop (max-width: 1024px)
  -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  /* Hero — nothing to step: the dawn headline is fluid (clamp) and its copy
     column is full-width */

  /* Pricing — moved to 1260px breakpoint (see above) */

  /* Growth grid — 5 columns is too narrow at 960px, drop to 3 */
  .growth-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* CTA panel — two columns → one. 01-prd-marketing-restyle.md FR 15 asks for
     one column at ≤ 768; it collapses here, a step earlier, because between
     769 and 1024 the two-column split leaves the capsule 220–300 px wide and
     the primary button's label wraps to 2–3 lines (measured 2026-08-28). The
     capsule fills the panel's width; its buttons, as flex items, already fill
     the capsule's. */
  .cta-panel {
    grid-template-columns: 1fr;
  }

  .cta-panel__offer {
    justify-self: stretch;
    max-width: none;
  }

}

/* --------------------------------------------------------------------------
   Tablet (max-width: 880px) - Content-driven responsive design - Adjusted from standard of 768px
   -------------------------------------------------------------------------- */

@media (max-width: 880px) {
  /* Section spacing */
  .section {
    padding-top: var(--section-padding-tablet);
    padding-bottom: var(--section-padding-tablet);
  }

  /* Section headings — step down one type size */
  .section__heading {
    font-size: var(--font-size-3xl);
  }

  /* Structure blocks — 4 columns → 2 */
  .structure-blocks {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Feature cards — 3 columns → 2 columns */
  .feature-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Gallery — 3 columns → 2 columns */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Pricing cards — stays at 2 columns (set in 1024px query) */

  /* Growth grid — 3 columns → 2 columns */
  .growth-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Process steps — 5 across → 3, with room between the rows */
  .process-steps {
    grid-template-columns: repeat(3, 1fr);
    row-gap: var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   Tablet (max-width: 768px) — the canonical tablet step, the dawn hero only
   (01-prd-marketing-restyle.md FR 13 names this width for the limb scale)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* Dawn hero — enlarge the limb relative to the viewport: at phone widths the
     240vw circle reads as a sliver, and a 400vw circle gives a flatter, closer
     horizon (apex 24vw). The sun follows the new arc (apex at x = 70vw). */
  .hero-dawn {
    padding-bottom: clamp(16rem, 34vw, 24rem);
  }

  .hero-dawn__planet {
    width: 400vw;
    height: 400vw;
  }

  .hero-dawn__sun {
    left: 70vw;
    bottom: 23.5vw;
    width: 72vw;
    height: 72vw;
  }

  /* Process steps — 3 across → 2 */
  .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Pricing breakpoint (max-width: 730px) — 2 columns → 1 column
   -------------------------------------------------------------------------- */

@media (max-width: 730px) {
  .pricing-cards {
    grid-template-columns: 1fr;
  }

}

/* --------------------------------------------------------------------------
   Mobile (max-width: 480px)
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
  /* Dawn hero — the CTA row stacks; the copy keeps its fluid size, and the
     400vw limb from the 768 block stays. */
  .hero-dawn__cta-row {
    flex-direction: column;
    width: 100%;
    gap: var(--space-sm);
  }

  .hero-dawn__cta-row .btn {
    width: 100%;
    text-align: center;
  }

  /* Founding teaser — tighten the band and step the offer line down */
  .founding-teaser {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
  }

  .founding-teaser__line {
    font-size: var(--font-size-xl);
  }

  /* Feature cards — 2 columns → 1 column */
  .feature-cards {
    grid-template-columns: 1fr;
  }

  /* Pricing cards — moved to 730px breakpoint (see above) */

  /* Growth grid — 2 columns → 1 column */
  .growth-grid {
    grid-template-columns: 1fr;
  }

  /* Gallery — 2 columns → 1 column */
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  /* Structure blocks — 2 columns → 1 */
  .structure-blocks {
    grid-template-columns: 1fr;
  }

  /* Process steps stack; a horizontal trajectory no longer makes sense, so
     the node dots alone mark the steps (the founding timeline's rule) */
  .process-steps {
    grid-template-columns: 1fr;
  }

  .process-step::before {
    display: none;
  }

}

/* --------------------------------------------------------------------------
   Accessibility — Reduced Motion
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Dawn hero, short-viewport compact mode — a height query, so its threshold
   is MEASURED and the derivation recorded here (css-conventions.md § Height-
   Based Media Queries). Desktop widths only: at ≤ 768 the phone treatment
   stands, where heroes scroll by convention.
   Derivation (prototype review, 2026-08-23, headless Edge, mocked chrome):
   the content column's bottom sat at ≈ 630 px plus a 60 px nav at desktop
   widths, so viewports under 680 px cut the CTA at the fold (repro
   1280×620). Compact mode tightens type and spacing and pulls the horizon up
   behind the copy so both the CTA row and the dawn sit above the fold.
   Re-verified 2026-08-28 with production chrome (nav bar, announcement bar;
   headless Edge, 1280×620, restyle task 9.5): CTA row bottom 525 px, meta
   line 558 px, limb top 534 px — copy and crest above the 620 px fold, so the
   680 px threshold stands unchanged. Without compact mode the same viewport
   puts the CTA row at 630 px (1440×900's value), below the fold.
   -------------------------------------------------------------------------- */

@media (max-height: 680px) and (min-width: 769px) {
  .hero-dawn {
    min-height: 0;
    padding-top: var(--space-xl);
    padding-bottom: clamp(11rem, 13vw, 16rem);
  }

  .hero-dawn__headline {
    font-size: clamp(3.6rem, 5vw, 6rem);
  }

  .hero-dawn__eyebrow {
    margin-bottom: var(--space-sm);
  }

  .hero-dawn__subhead {
    margin-bottom: var(--space-md);
  }
}

/* Legacy OS-level reduced-motion block for the pre-restyle hover motion that
 * survives on this page (the gallery image zoom). Everything the restyle added
 * gates on the root motion-reduce class instead (design.md § Cross-Cutting
 * Motion Rules — the dawn, the trajectory draw-in, the comet in site.css), so
 * this block is the reduced-motion audit's remaining case here, not the
 * pattern to extend: the site's own toggle sets the class without the media
 * query, and a rule that lives only here does not honour it. Color,
 * background, border and opacity transitions are safe to keep — they signal
 * state change without causing motion sickness.
 *
 * The scroll-reveal module checks the preference independently.
 */
@media (prefers-reduced-motion: reduce) {
  /* Feature cards — shorten the color/shadow transitions. No lift left to
     cancel: hover movement retired sitewide (01-prd-marketing-restyle.md FR 11). */
  .feature-card {
    transition: box-shadow 150ms ease,
                border-color 150ms ease,
                background-color 150ms ease;
  }

  /* Gallery image — remove zoom-on-hover */
  .gallery-item__image img {
    transition: none;
  }

  .gallery-item:hover .gallery-item__image img {
    transform: none;
  }

  /* The old process block's numeral hover pulse and its reset used to sit
     here; the numeral has no hover rule since the 10.0 port (a leftover
     reset was ADDING a shadow on hover under reduced motion — removed at
     restyle task 11.3). */
}