/* ==========================================================================
   Foreground — site
   Layout, sections and components. Depends on tokens.css and base.css.
   ========================================================================== */

/* --- Layout primitives -------------------------------------------------- */
.fg-band { padding-inline: var(--gutter); }
.fg-band--sunken { background: var(--surface-sunken); }
.fg-band--card   { background: var(--surface-card); }

/* --- Background motifs -------------------------------------------------- *
 * One base rule; each instance supplies position, opacity and mask through
 * custom properties. Rendered as ::before so the markup carries no empty
 * decorative elements.
 * ----------------------------------------------------------------------- */
.fg-motif {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fg-motif::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--motif-image);
  background-repeat: no-repeat;
  background-size: 3384px auto;
  background-position: var(--motif-position);
  opacity: var(--motif-opacity);
  -webkit-mask-image: var(--motif-mask);
          mask-image: var(--motif-mask);
}
.fg-motif > * {
  position: relative;
  z-index: 1;
}
/* Instances compositing two masks. */
.fg-motif--home-hero::before,
.fg-motif--home-close::before,
.fg-motif--about-hero::before,
.fg-motif--contact-hero::before {
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

.fg-motif--home-hero::before {
  --motif-image: url("/assets/landscape-light.svg");
  --motif-position: calc(100% + 855px) -100px;
  --motif-opacity: 0.45;
  /* The radial's mid stop is 58%, not the design's 46%. Measured against the real
     composited pixels, 46% let the artwork brighten the background under the tail of
     the hero's two longest lead lines to ~rgb(62,68,101), dropping 20px --text-muted
     to 3.78:1 against the 4.5:1 WCAG 1.4.3 floor. Widening the mask's clear zone
     lifts the worst case to 4.66:1. This applies the design's own stated technique —
     legibility over these grounds is maintained by gradient masking — rather than
     overriding it. See docs/06-qa.md finding 4. */
  --motif-mask:
    linear-gradient(to bottom, transparent 0%, #000 22%, #000 62%, transparent 100%),
    radial-gradient(ellipse 78% 96% at 24% 48%, transparent 0%, rgba(0,0,0,0.3) 58%, #000 82%);
}
.fg-motif--home-mid::before {
  --motif-image: url("/assets/landscape-dark.svg");
  --motif-position: calc(100% + 500px) -500px;
  --motif-opacity: 0.22;
  --motif-mask:
    linear-gradient(to bottom, transparent 0%, #000 24%, #000 74%, transparent 100%);
}
.fg-motif--home-close::before {
  --motif-image: url("/assets/landscape-dark.svg");
  --motif-position: calc(100% + 1000px) -350px;
  --motif-opacity: 0.22;
  --motif-mask:
    linear-gradient(to top, #000 0%, rgba(0,0,0,0.45) 58%, transparent 96%),
    linear-gradient(to left, #000 0%, rgba(0,0,0,0.5) 62%, transparent 100%);
}
.fg-motif--about-hero::before {
  --motif-image: url("/assets/landscape-light.svg");
  --motif-position: calc(100% + 691px) -100px;
  --motif-opacity: 0.4;
  --motif-mask:
    linear-gradient(to bottom, transparent 0%, #000 30%, #000 70%, transparent 100%),
    radial-gradient(ellipse 80% 100% at 26% 50%, transparent 0%, rgba(0,0,0,0.25) 48%, #000 84%);
}
.fg-motif--contact-hero::before {
  --motif-image: url("/assets/landscape-light.svg");
  --motif-position: calc(100% + 220px) -200px;
  --motif-opacity: 0.38;
  --motif-mask:
    linear-gradient(to bottom, transparent 0%, #000 26%, #000 74%, transparent 100%),
    radial-gradient(ellipse 68% 92% at 50% 50%, transparent 0%, rgba(0,0,0,0.3) 44%, #000 80%);
}

/* --- Header ------------------------------------------------------------- */
.fg-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-page);
  padding: 20px var(--gutter);
}
/* Utility pages use the reversed variant: light ground with a rule beneath. */
.fg-header--light {
  background: var(--surface-card);
  border-bottom: 1px solid var(--border-subtle);
}
.fg-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  max-width: var(--container-wide);
  margin-inline: auto;
}
/* The wordmark is 23px tall by design, which leaves the LINK a pixel under the 24px
   floor in WCAG 2.2 SC 2.5.8. It currently passes on the spacing exception (the nav is
   far away), but that depends on layout. Giving the link a 24px min-height satisfies the
   size rule outright and is invisible — the logo itself is untouched. */
.fg-header__brand {
  display: flex;
  align-items: center;
  min-height: 24px;
  line-height: 0;
}
.fg-header__brand img { height: 23px; width: auto; }

.fg-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
}
.fg-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--hit-target-min);
  font-size: var(--fs-nav);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-interactive);
}
.fg-nav__link:hover { color: var(--text-heading); }
/* The current page is marked by weight and a rule as well as colour — the
   designs used colour alone, which is a WCAG 1.4.1 concern. */
.fg-nav__link[aria-current="page"] {
  color: var(--text-heading);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

/* --- Buttons ------------------------------------------------------------ */
.fg-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--hit-target-min);
  padding: 11px var(--space-5);
  font-family: var(--font-ui);
  font-size: var(--fs-nav);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: var(--border-width-button) solid transparent;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--text-body);
  cursor: pointer;
  transition: var(--transition-interactive);
}
.fg-button--lg { padding: 15px 28px; font-size: var(--fs-question); }

.fg-button--primary {
  background: var(--interactive);
  color: var(--interactive-contrast);
}
.fg-button--primary:hover:not(:disabled)  { background: var(--interactive-hover); }
.fg-button--primary:active:not(:disabled) { background: var(--interactive-active); }

.fg-button--secondary {
  border-color: var(--accent-text);
  color: var(--accent-text);
}
.fg-button--secondary:hover:not(:disabled) {
  border-color: var(--accent-text-hover);
  color: var(--accent-text-hover);
  background: var(--accent-text-subtle);
}
.fg-button--secondary:active:not(:disabled) {
  border-color: var(--accent-text-active);
  color: var(--accent-text-active);
  background: var(--accent-text-subtle);
}

.fg-button:disabled,
.fg-button[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--disabled-fg);
  background: var(--disabled-bg);
  border-color: transparent;
}

/* --- Prose links -------------------------------------------------------- *
 * Underlined. The designs set text-decoration: none globally, but an inline
 * link tinted only in accent sits at roughly 2.3:1 against the surrounding
 * heading colour — below the 3:1 that WCAG 1.4.1 requires for colour as the
 * sole distinguishing cue. The underline is the non-colour cue.
 * ----------------------------------------------------------------------- */
.fg-link {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: var(--transition-interactive);
}
.fg-link:hover  { color: var(--link-hover); text-decoration-thickness: 2px; }
.fg-link:active { color: var(--accent-text-active); }

/* --- Eyebrow labels ----------------------------------------------------- */
.fg-eyebrow {
  font-size: var(--fs-label);
  font-weight: var(--weight-medium);
  line-height: var(--lh-compact);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
}
.fg-eyebrow--accent   { color: var(--accent-text); }
.fg-eyebrow--accent-2 { color: var(--accent-2-text); }

/* --- Hero --------------------------------------------------------------- */
.fg-hero {
  background: var(--surface-page);
  border-bottom: 1px solid var(--border-subtle);
  padding-inline: var(--gutter);
}
.fg-hero__inner { margin-inline: auto; }

.fg-hero--home {
  padding-block: clamp(64px, 9vw, 112px) clamp(56px, 8vw, 88px);
}
.fg-hero--home .fg-hero__inner { max-width: var(--container-hero); }

.fg-hero--about {
  padding-block: clamp(64px, 9vw, 104px) clamp(56px, 8vw, 80px);
}
.fg-hero--about .fg-hero__inner { max-width: var(--container-hero-lg); }

.fg-hero--contact {
  padding-block: clamp(64px, 9vw, 104px) clamp(48px, 7vw, 72px);
  text-align: center;
}

.fg-hero .fg-eyebrow {
  display: block;
  margin-bottom: 20px;
  color: var(--accent-2-text);
}
.fg-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  color: var(--text-heading);
  text-wrap: pretty;
}
.fg-hero--home .fg-hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 28px;
}
.fg-hero--about .fg-hero__title {
  font-size: var(--fs-hero-sm);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 26px;
}
.fg-hero--contact .fg-hero__title {
  font-size: var(--fs-hero-contact);
  line-height: var(--lh-tight);
  margin-bottom: 18px;
}
.fg-hero__lead {
  color: var(--hero-lead);
  text-shadow: var(--hero-lead-halo);
  text-wrap: pretty;
}
.fg-hero--home .fg-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  max-width: 700px;
  margin-bottom: 36px;
}
.fg-hero--about .fg-hero__lead {
  font-size: var(--fs-lead-sm);
  line-height: var(--lh-relaxed);
  max-width: 700px;
}
.fg-hero--contact .fg-hero__lead {
  font-size: var(--fs-lead-sm);
  line-height: var(--lh-normal);
  max-width: 560px;
  margin-inline: auto;
}
.fg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* --- Cards -------------------------------------------------------------- */
.fg-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: var(--space-7);
  color: var(--text-body);
  transition: var(--transition-surface);

  /* Inside a card the backdrop changes, so several tokens are rebound to
     values audited against the CARD surface rather than the page. Carried
     over from the design system's measured contrast work. */
  --accent-text: var(--link-on-card);
  --text-muted: var(--text-muted-on-card);
  --link: var(--link-on-card);
  --focus-ring-color: var(--focus-ring-on-card);
  --border-focus: var(--link-on-card);
}
.fg-card--accent   { border-top: var(--border-width-accent) solid var(--accent-text); }
.fg-card--accent-2 { border-top: var(--border-width-accent) solid var(--color-accent-2); }
.fg-card--accent-3 { border-top: var(--border-width-accent) solid var(--color-accent-3); }

/* --- The case (three cards) --------------------------------------------- */
/* Targeted by an explicit class rather than :has(.fg-cases). This rule carries the
   section's entire vertical padding, so where :has() is unsupported the three cards
   would butt straight against the hero and the CTA below. Not worth risking for a
   selector when the markup can just say what it is. */
.fg-cases-band { padding-block: clamp(56px, 8vw, 96px) clamp(40px, 5vw, 56px); }
.fg-cases {
  display: grid;
  /* min() keeps the track from exceeding the viewport at 320px, where the
     gutter leaves only 280px of content width. */
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: clamp(20px, 3vw, 28px);
  max-width: var(--container-wide);
  margin-inline: auto;
}
.fg-cases .fg-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.fg-card__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-card-title);
  line-height: var(--lh-card);
  color: var(--text-heading);
  text-wrap: pretty;
}
.fg-card__body {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* --- CTA bands ---------------------------------------------------------- */
.fg-cta--mid {
  background: var(--surface-band);
  padding: clamp(56px, 7vw, 84px) var(--gutter);
}
.fg-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 36px);
  max-width: var(--container-wide);
  margin-inline: auto;
}
.fg-cta__text {
  flex: 1 1 400px;
  min-width: min(280px, 100%);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-xs);
  line-height: var(--lh-display);
  color: var(--text-heading);
  text-wrap: pretty;
}
.fg-cta__inner .fg-button { white-space: nowrap; }

/* --- Generic content sections ------------------------------------------- */
.fg-section { padding-block: clamp(64px, 8vw, 104px); }
.fg-section__inner { max-width: var(--container-wide); margin-inline: auto; }
.fg-section .fg-eyebrow { display: block; margin-bottom: var(--space-7); }

.fg-section__intro {
  max-width: var(--container-prose);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.fg-lead-display {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-md);
  line-height: var(--lh-display-loose);
  color: var(--text-heading);
  text-wrap: pretty;
}
.fg-prose-lead,
.fg-section__outro p {
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--text-muted);
  text-wrap: pretty;
}
.fg-section__outro {
  margin-top: clamp(28px, 3.5vw, 40px);
  max-width: var(--container-prose);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.fg-section__outro strong { color: inherit; }

/* --- Questions ---------------------------------------------------------- */
.fg-questions {
  margin-top: clamp(24px, 3vw, 32px);
  max-width: var(--container-questions);
  padding-block: 0;
}
.fg-questions__list li {
  display: flex;
  gap: var(--space-4);
  padding-block: 15px;
  font-size: var(--fs-question);
  line-height: var(--lh-compact);
  color: var(--text-body);
  border-top: 1px solid var(--border-subtle);
}
.fg-questions__list li:first-child { border-top: 0; }
.fg-questions__list li::before {
  content: "\2192";
  flex: 0 0 auto;
  color: var(--accent-text);
  font-weight: var(--weight-semibold);
}

/* --- Principles --------------------------------------------------------- */
.fg-principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0 clamp(32px, 5vw, 64px);
}
.fg-principle {
  padding-block: var(--space-7);
  border-top: var(--border-width-rule) solid var(--accent-text);
}
.fg-principle--accent-2 { border-top-color: var(--color-accent-2); }
.fg-principle--accent-3 { border-top-color: var(--color-accent-3); }
.fg-principle__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-principle);
  line-height: var(--lh-display);
  color: var(--text-heading);
  margin-bottom: 10px;
  text-wrap: pretty;
}
.fg-principle__body {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  text-wrap: pretty;
}

/* --- Closing block ------------------------------------------------------ */
.fg-closing { padding-block: clamp(56px, 8vw, 88px) clamp(64px, 9vw, 104px); }
.fg-closing__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 6vw, 72px);
}
.fg-closing__teaser {
  /*max-width: 900px;*/
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-sm);
  line-height: var(--lh-display-relaxed);
  color: var(--text-heading);
  text-wrap: pretty;
}
.fg-closing__teaser .fg-link { white-space: nowrap; }
.fg-closing__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 44px);
  padding: clamp(32px, 4vw, 52px);
}
.fg-closing__cta-text {
  flex: 1 1 380px;
  min-width: min(260px, 100%);
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  color: var(--text-heading);
  text-wrap: pretty;
}
.fg-closing__cta .fg-button { white-space: nowrap; }

/* --- Principals (about) ------------------------------------------------- */
.fg-principals-band { padding-block: clamp(56px, 8vw, 88px); }
.fg-principals {
  max-width: var(--container-people);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5vw, 56px);
}
.fg-principal {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(28px, 4vw, 48px);
}
.fg-principal__portrait {
  flex: 0 0 240px;
  width: 240px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
}
.fg-principal__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
}
.fg-principal__body {
  flex: 1 1 400px;
  min-width: min(280px, 100%);
}
.fg-principal__name {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-name);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  margin-bottom: var(--space-5);
}
.fg-principal__bio {
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  color: var(--text-muted);
  max-width: 62ch;
  text-wrap: pretty;
}
.fg-principal__bio + .fg-principal__bio {
  margin-top: var(--space-4);
}

/* --- Contact form ------------------------------------------------------- */
.fg-form-band {
  padding-block: clamp(48px, 7vw, 80px) clamp(64px, 9vw, 96px);
}
.fg-form {
  max-width: var(--container-form);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: clamp(28px, 4vw, 40px);
}
.fg-field { display: flex; flex-direction: column; gap: var(--space-2); }
.fg-field__label {
  font-size: var(--fs-nav);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-compact);
  color: var(--text-body);
}
.fg-required { color: var(--color-error); }

.fg-input,
.fg-textarea {
  width: 100%;
  padding: 13px 14px;
  font-family: var(--font-ui);
  font-size: var(--fs-body-sm);
  line-height: 1.4;
  color: var(--text-body);
  background: var(--surface-sunken);
  border: var(--border-width-input) solid var(--border-input);
  border-radius: var(--radius-input);
  transition: var(--transition-interactive);
}
.fg-input { min-height: 46px; }
.fg-textarea { min-height: 130px; resize: vertical; }
.fg-input::placeholder,
.fg-textarea::placeholder { color: var(--text-muted-on-input); }
.fg-input:hover:not(:disabled),
.fg-textarea:hover:not(:disabled) { border-color: var(--border-strong); }
.fg-input:focus-visible,
.fg-textarea:focus-visible { border-color: var(--border-focus); }
.fg-input:disabled,
.fg-textarea:disabled {
  cursor: not-allowed;
  color: var(--disabled-fg);
  background: var(--disabled-bg);
  border-color: var(--disabled-border);
}

/* Error state, no JavaScript. :user-invalid fires only after the person has
   actually interacted with the field, so nothing is marked wrong on load. */
.fg-field__error {
  display: none;
  font-size: var(--fs-label);
  line-height: var(--lh-compact);
  color: var(--color-error);
}
.fg-input:user-invalid,
.fg-textarea:user-invalid { border-color: var(--color-error); }
.fg-input:user-invalid ~ .fg-field__error,
.fg-textarea:user-invalid ~ .fg-field__error { display: block; }

.fg-form__submit { align-self: flex-start; }

/* --- Utility pages (404, thanks) ---------------------------------------- */
.fg-page--utility {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.fg-utility {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
  min-height: 68vh;
  padding: clamp(68px, 9.5vw, 116px) var(--gutter) clamp(88px, 13vw, 160px);
}
.fg-utility__inner {
  width: 100%;
  max-width: var(--container-utility);
  margin-inline: auto;
}
.fg-utility .fg-eyebrow { display: block; margin-bottom: var(--space-5); }
.fg-utility__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--fs-hero-sm);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-heading);
  margin-bottom: var(--space-9);
  text-wrap: pretty;
}
/* 20px is the design's value and is not a step on the space scale. */
.fg-page--thanks .fg-utility__title { margin-bottom: 20px; }
.fg-utility__lead {
  font-size: var(--fs-lead-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  margin-bottom: var(--space-9);
  text-wrap: pretty;
}

/* --- Footer ------------------------------------------------------------- */
.fg-footer {
  background: var(--surface-page);
  border-top: 1px solid var(--border-subtle);
  padding: clamp(48px, 7vw, 72px) var(--gutter);
}
.fg-footer__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}
.fg-footer__brand { height: 20px; width: auto; }
.fg-nav--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.fg-nav--stacked .fg-nav__link { min-height: 0; }