/*
 * Urban Specialists theme.
 *
 * This is the SINGLE source of truth for colour, fonts, type scale,
 * spacing, radii and shadows used across the site. Every page must link
 * this file, and must not declare any hard-coded colour, font-size or
 * spacing value (hex/rgb/hsl/px literals) outside this file — a pytest
 * test enforces that.
 *
 * Palette sampled from the Urban Specialists logo
 * (web/assets/urban-specialists-logo.png):
 *   - Navy #003C60 (the wordmark and the "S"): headings, links, dark bands
 *   - Orange #F06C18 (the "U"): the one action colour (primary buttons)
 *   - Light blue #3C90CC: small accents on dark navy surfaces
 * Inter for both headings (bold, like the logo's wordmark) and body text.
 * All colour, spacing, radius and shadow values live in the :root token
 * block below; every rule after it consumes those tokens via var() only.
 */

/* ======== FONT FACES ======== */

@font-face {
  font-family: 'Inter';
  src: url('../assets/Inter-Variable.ttf') format('truetype-variations'),
       url('../assets/Inter-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}

/* ======== DESIGN TOKENS ======== */

:root {
  /* Brand palette (sampled from the Urban Specialists logo) */
  --navy: #003c60;
  --orange: #f06c18;
  --sky: #3c90cc;

  /* Brand images: the full logo (wordmark) and the "US" mark alone.
     (url() in a custom property resolves against this stylesheet.) */
  --brand-logo: url('../assets/urban-specialists-logo.png');
  --brand-mark: url('../assets/urban-specialists-mark.png');

  /* Neutrals */
  --ink: #12212e;
  --paper: #f5f7fa;
  --muted: #4f5b67;
  --line: #d5dde5;

  /* Derived shades, named by role so component rules never repeat a
     literal. */
  --ink-soft: #0b2c45;
  --ink-deep: #002a44;
  --navy-hover: #00507f;
  --orange-hover: #f5873f;
  --sky-light: #8cc4ea;
  --panel: #e8eef4;
  --border-strong: #b9c6d3;
  --placeholder: #66727e;
  --text-on-ink-muted: #d2dde7;
  --focus-ring: #3c90cc;
  --danger: #9c2e22;
  --danger-bg: #fbe9e7;
  --success: #255f30;
  --success-bg: #e9f3ea;
  --warning: #7d4a12;
  --warning-bg: #f6ecdc;
  --info: #1d5a85;
  --info-bg: #e6f0f8;

  /* Semantic colour aliases consumed by the component rules below. */
  --ll-color-bg: var(--paper);
  --ll-color-bg-elevated: #ffffff;
  --ll-color-bg-panel: var(--panel);
  --ll-color-bg-panel-alt: var(--panel);
  --ll-color-border: var(--line);

  --ll-color-text: var(--ink);
  --ll-color-text-muted: var(--muted);
  --ll-color-text-on-accent: var(--ink-deep);

  /* The action colour (primary buttons) is the logo's orange, with dark
     navy text on it (orange behind white text would fail contrast). */
  --ll-color-accent: var(--orange);
  --ll-color-accent-hover: var(--orange-hover);
  /* Emphasis on light surfaces (links, step numbers, eyebrows). */
  --ll-color-accent-muted: var(--navy);
  /* Accent text on the dark navy bands (hero, tagline, footer). */
  --ll-color-accent-on-dark: var(--sky-light);

  --ll-color-success: var(--success);
  --ll-color-danger: var(--danger);
  --ll-color-danger-text: var(--danger);
  --ll-color-warning: var(--warning);
  --ll-color-info: var(--info);

  --ll-color-link: var(--navy);
  --ll-color-link-hover: var(--navy-hover);

  /* Fonts */
  --ll-font-heading: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --ll-font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-weight-heading: 700;

  /* Type scale (mockup: 15px/1.6 body, 31px h3, display headings via clamp) */
  --font-size-body: 16px;
  --font-size-h1: clamp(2.25rem, 5vw, 4rem);
  --font-size-h2: clamp(1.75rem, 3.4vw, 2.75rem);
  --font-size-h3: 24px;
  --line-height-body: 1.6;
  --line-height-heading: 1.1;

  /* Spacing scale: 4, 8, 12, 16, 24, 32, 48, 64, 96 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;

  /* Legacy spacing aliases for component compatibility, mapped onto the
     4/8/12/16/24/32/48/64/96 scale above (no new values introduced). */
  --ll-space-xs: var(--space-sm);
  --ll-space-sm: var(--space-lg);
  --ll-space-md: var(--space-xl);
  --ll-space-lg: var(--space-3xl);
  --ll-space-xl: var(--space-4xl);

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  --ll-radius-sm: var(--radius-sm);
  --ll-radius-md: var(--radius-md);
  --ll-radius-lg: var(--radius-lg);

  /* Shadows (one soft elevation shadow, per the design system) */
  --shadow-panel: 0 var(--space-sm) var(--space-xl) rgba(0, 42, 68, 0.12);
  --ll-shadow-panel: var(--shadow-panel);

  /* Layout */
  --ll-max-width: 720px;
  --max-logo-width: 220px;
  --auth-logo-width: 96px;

  /* Component-level sizing and spacing, mapped onto the spacing scale. */
  --font-size-sm: 0.8rem;
  --font-size-xs: 0.85rem;
  --font-size-base: 0.9rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.1rem;

  --border-width: 1px;
  --border-width-focus: 3px;
  --outline-offset: 5px;

  --component-gap-xs: var(--space-sm);
  --component-gap-sm: var(--space-md);
  --component-padding-sm: var(--space-sm);
  --component-padding-md: var(--space-md);
  --component-padding-lg: var(--space-md);
  --component-padding-xl: var(--space-xl);

  --letter-spacing-tight: -0.035em;
  --letter-spacing-base: 0.02em;
  --letter-spacing-heading: -0.02em;

  --min-tap-target: 44px;

  /* ---- Landing page tokens (mockup: hero, tagline band, steps, ---- */
  /* ---- sign-up panel, dark footer) -- all consumed via var() only. */

  /* Overlay darkness levels used for photo scrims (hero + story photo),
     expressed as alpha tokens so the landing page never writes rgba()
     literals itself. */
  --overlay-strong: 0.93;
  --overlay-mid: 0.6;
  --overlay-soft: 0.05;
  --overlay-base: 0.5;
  --overlay-fade: 0;

  /* Dark surface tokens for the hero and footer bands (mockup's near-
     navy), plus the hairline that separates them from the content. */
  --ll-color-bg-dark: var(--ink-deep);
  --ll-color-border-dark: var(--navy-hover);
  --ll-color-text-on-dark: #ffffff;
  --ll-color-text-on-dark-muted: var(--text-on-ink-muted);

  /* Landing-page layout sizing, named by role rather than repeating
     raw numbers in component rules. */
  --ll-landing-max-width: 1200px;
  --ll-hero-min-height: 420px;
  --ll-step-number-size: 48px;
  --ll-landing-logo-height: 48px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--ll-color-bg);
  color: var(--ll-color-text);
  font-family: var(--ll-font-body);
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--ll-space-lg) var(--ll-space-sm);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

@media (min-width: 640px) {
  body {
    padding: var(--space-4xl) var(--space-2xl);
  }
}

/*
 * Landing page body modifier: the mockup's hero, tagline band, steps,
 * sign-up and footer sections are full-bleed (edge to edge), unlike
 * every other page's single centred .ll-card. Only index.html adds
 * this class to <body>; it overrides the shared centred/padded body
 * layout above with the same tokens, not new values.
 */
body.ll-landing {
  display: block;
  align-items: initial;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--ll-font-heading);
  font-weight: var(--font-weight-heading);
  color: var(--ll-color-accent-muted);
  letter-spacing: var(--letter-spacing-heading);
  line-height: var(--line-height-heading);
  margin-top: 0;
}

a {
  color: var(--ll-color-link);
  text-decoration: none;
}

a:hover,
a:focus {
  color: var(--ll-color-link-hover);
  text-decoration: underline;
}

:focus-visible {
  outline: var(--border-width-focus) solid var(--focus-ring);
  outline-offset: var(--outline-offset);
}

.ll-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ll-space-xs);
  margin-bottom: var(--ll-space-lg);
  position: relative;
  width: 100%;
  max-width: var(--ll-max-width);
}

/*
 * Interior pages (the parent wizard) reuse the landing page's brand
 * lockup (logo + wordmark, see .ll-brand/.ll-brand-name below) inside
 * their own .ll-header, but sit on the light card background instead
 * of a dark hero/footer, so the lockup needs ink text here rather than
 * the on-dark white the landing page uses.
 */
.ll-header .ll-brand {
  color: var(--ll-color-text);
}

/*
 * The wordmark next to the logo is wide enough to collide with the
 * absolutely-positioned Sign out button (.ll-header-signout, top
 * right) on a phone-width header, so it's hidden until there's room
 * for both -- the same collapse-on-narrow approach the landing page's
 * own nav already uses. The logo alone still identifies the page.
 */
.ll-header .ll-brand-name {
  display: none;
}

@media (min-width: 640px) {
  .ll-header .ll-brand-name {
    display: inline;
  }
}

/*
 * Same dark footer as the landing page (.ll-site-footer, brand +
 * copyright), reused on interior pages where it sits inside the
 * page's own padded layout rather than full-bleed -- inset with the
 * card radius and separated from the content above it.
 */
/* Interior pages (parent, mentor, reviewer): add inset styling to the
   footer so it sits within the page's centered layout with visible
   separation from content above. */
body:not(.ll-landing) .ll-site-footer {
  margin-top: var(--space-3xl);
  border-radius: var(--ll-radius-lg);
  width: 100%;
  max-width: var(--ll-max-width);
  margin-left: auto;
  margin-right: auto;
}

.ll-logo {
  max-width: var(--max-logo-width);
  height: auto;
}

/* The full Urban Specialists logo at the top of the sign-in cards. */
.ll-auth-logo {
  display: block;
  width: var(--auth-logo-width);
  aspect-ratio: 148 / 176;
  margin: 0 auto var(--space-xl);
  background: var(--brand-logo) center / contain no-repeat;
}

/*
 * Sign out button: shown in the same place (top-right of the header)
 * on every signed-in page -- mentor, parent and reviewer. Pages that
 * aren't signed in (index.html, the account/sign-in pages,
 * no-access.html) simply don't include this element.
 */
.ll-header-signout {
  position: absolute;
  top: 0;
  right: 0;
  padding: var(--component-padding-sm) var(--component-padding-xl);
  font-size: var(--font-size-xs);
  min-height: var(--min-tap-target);
}

/*
 * Reuses the landing page's .ll-brand lockup (logo + wordmark, defined
 * in the LANDING PAGE section below) inside an inner page's .ll-header
 * -- same markup and logo sizing, just recoloured for a light card
 * background instead of the landing page's dark photo hero.
 */
.ll-header .ll-brand,
.ll-header .ll-brand:hover,
.ll-header .ll-brand:focus {
  color: var(--ll-color-text);
}

/*
 * On a narrow phone, the wordmark (unlike the old bare logo) is wide
 * enough to run under the absolutely-positioned Sign out button in the
 * header's top-right corner -- so give it room to sit below instead.
 */
@media (max-width: 639px) {
  .ll-header .ll-brand {
    margin-top: var(--min-tap-target);
  }
}

.ll-tagline {
  font-family: var(--ll-font-heading);
  color: var(--ll-color-accent-muted);
  font-size: var(--font-size-lg);
  letter-spacing: 0.08em;
  text-align: center;
}

.ll-card {
  width: 100%;
  max-width: var(--ll-max-width);
  background-color: var(--ll-color-bg-elevated);
  border: var(--border-width) solid var(--ll-color-border);
  border-radius: var(--ll-radius-lg);
  box-shadow: var(--ll-shadow-panel);
  padding: var(--ll-space-lg);
  margin-bottom: var(--ll-space-md);
}

@media (min-width: 640px) {
  .ll-card {
    padding: var(--space-3xl);
  }
}

/*
 * Phones: the card's desktop padding plus the page's left only ~230px for
 * content, so the step indicator overflowed and button labels broke onto
 * two lines. Halve the padding, and let a row of buttons wrap onto full-width
 * lines rather than squeezing their labels.
 */
@media (max-width: 639px) {
  .ll-card {
    padding: var(--ll-space-md);
  }

  .ll-card .ll-actions {
    flex-wrap: wrap;
    gap: var(--ll-space-xs);
  }

  .ll-card .ll-actions .ll-btn {
    flex: 1 0 auto;
    max-width: 100%;
  }
}

.ll-step-indicator {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ll-space-xs);
  margin-bottom: var(--ll-space-md);
  font-family: var(--ll-font-body);
  color: var(--ll-color-text-muted);
  font-size: var(--font-size-xs);
}

/* Wrap between steps, never inside one ("FCRA Consent" stays on one line). */
.ll-step-indicator > span {
  white-space: nowrap;
}

.ll-step-indicator .ll-step-current {
  color: var(--ll-color-accent-muted);
  font-weight: bold;
}

.ll-field {
  margin-bottom: var(--ll-space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--component-gap-xs);
}

.ll-field label {
  font-size: var(--font-size-base);
  color: var(--ll-color-text-muted);
}

.ll-field input,
.ll-field textarea,
.ll-field select {
  background-color: var(--ll-color-bg-elevated);
  border: var(--border-width) solid var(--border-strong);
  border-radius: var(--ll-radius-sm);
  color: var(--ll-color-text);
  padding: var(--component-padding-md) var(--component-padding-xl);
  font-family: var(--ll-font-body);
  font-size: var(--font-size-md);
  min-height: var(--min-tap-target);
}

.ll-field input::placeholder,
.ll-field textarea::placeholder {
  color: var(--placeholder);
}

.ll-field input:focus,
.ll-field textarea:focus,
.ll-field select:focus {
  outline: var(--border-width-focus) solid var(--ll-color-accent);
  outline-offset: var(--outline-offset);
}

.ll-field-hint {
  font-size: var(--font-size-sm);
  color: var(--ll-color-text-muted);
}

.ll-checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: var(--component-gap-sm);
  margin-bottom: var(--ll-space-sm);
}

.ll-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--ll-space-sm);
  margin-top: var(--ll-space-md);
}

.ll-btn {
  font-family: var(--ll-font-body);
  font-size: var(--font-size-md);
  font-weight: 600;
  padding: var(--component-padding-lg) var(--component-padding-xl);
  border-radius: var(--ll-radius-md);
  border: var(--border-width) solid transparent;
  cursor: pointer;
  min-height: var(--min-tap-target);
  transition: filter 0.2s, transform 0.2s, background-color 0.2s, border-color 0.2s, color 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .ll-btn {
    transition: none;
  }
}

.ll-btn-primary {
  background-color: var(--ll-color-accent);
  color: var(--ll-color-text-on-accent);
}

.ll-btn-primary:hover,
.ll-btn-primary:focus {
  background-color: var(--ll-color-accent-hover);
}

.ll-btn-secondary {
  background-color: transparent;
  color: var(--ll-color-text);
  border-color: var(--ll-color-border);
}

.ll-btn-secondary:hover,
.ll-btn-secondary:focus {
  border-color: var(--ll-color-accent);
  color: var(--ll-color-accent-muted);
}

.ll-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ll-alert {
  border-radius: var(--ll-radius-sm);
  padding: var(--ll-space-xs) var(--ll-space-sm);
  margin-bottom: var(--ll-space-sm);
  font-size: var(--font-size-base);
}

.ll-alert-error {
  background-color: var(--danger-bg);
  border: var(--border-width) solid var(--ll-color-danger);
  color: var(--ll-color-danger-text);
}

.ll-alert-success {
  background-color: var(--success-bg);
  border: var(--border-width) solid var(--ll-color-success);
  color: var(--ll-color-success);
}

.ll-alert-info {
  background-color: var(--info-bg);
  border: var(--border-width) solid var(--ll-color-info);
  color: var(--ll-color-info);
}

.ll-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ll-list-item {
  background-color: var(--ll-color-bg-panel);
  border: var(--border-width) solid var(--ll-color-border);
  border-radius: var(--ll-radius-md);
  padding: var(--ll-space-sm);
  margin-bottom: var(--ll-space-xs);
}

/*
 * A child row inside a .ll-list-item: the child's name/birth date on
 * the left, Edit/Remove controls on the right (Story 13). Wraps on
 * narrow screens instead of forcing the actions off-screen.
 */
.ll-child-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ll-space-xs);
}

.ll-child-label {
  color: var(--ll-color-text);
}

.ll-child-actions {
  display: flex;
  gap: var(--ll-space-xs);
  flex-shrink: 0;
}

.ll-child-actions .ll-btn {
  padding: var(--component-padding-sm) var(--component-padding-xl);
  font-size: var(--font-size-xs);
}

/*
 * The inline Edit form that opens under a child's row. Visually set
 * apart from the row above it so it reads as "editing this child"
 * rather than a second, unrelated row.
 */
.ll-child-edit-form {
  margin-top: var(--ll-space-sm);
  padding-top: var(--ll-space-sm);
  border-top: var(--border-width) solid var(--ll-color-border);
}

.ll-footer {
  margin-top: var(--ll-space-xl);
  color: var(--ll-color-text-muted);
  font-size: var(--font-size-sm);
  text-align: center;
}

.ll-link-row {
  text-align: center;
  margin-top: var(--ll-space-sm);
  font-size: var(--font-size-base);
  color: var(--ll-color-text-muted);
}

/*
 * Layout/visibility utilities so pages never need an inline style="" --
 * every presentational value stays in this one token-driven file.
 */
.ll-hidden {
  display: none;
}

.ll-actions-center {
  justify-content: center;
  gap: var(--ll-space-xl);
}

.ll-actions-start {
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

/*
 * A small uppercase label above a heading, matching the mockup's
 * ".eyebrow" treatment -- used sparingly to introduce a card's purpose
 * (e.g. "Family sign-up") before the h1/h2 beneath it.
 */
.ll-eyebrow {
  display: block;
  text-transform: uppercase;
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ll-color-accent-muted);
  margin-bottom: var(--ll-space-xs);
}

/*
 * A labelled section within a card (e.g. "Add a child", "Delete my
 * profile") -- separated from what's above it with generous space and
 * a quiet rule, so it reads as its own step rather than a continuation
 * of the form above.
 */
.ll-section {
  margin-top: var(--ll-space-xl);
  padding-top: var(--ll-space-xl);
  border-top: var(--border-width) solid var(--ll-color-border);
}

.ll-section-title {
  font-size: var(--font-size-h3);
  margin-bottom: var(--ll-space-sm);
}

/*
 * A visually distinct zone around an irreversible action (delete
 * profile), echoing the mockup's ".notice" treatment but built from
 * the danger tokens rather than a one-off colour.
 */
.ll-danger-zone {
  margin-top: var(--ll-space-xl);
  padding: var(--ll-space-lg);
  background-color: var(--danger-bg);
  border: var(--border-width) solid var(--ll-color-danger);
  border-radius: var(--ll-radius-md);
}

.ll-danger-zone .ll-section-title {
  color: var(--ll-color-danger-text);
}

.ll-danger-zone .ll-field-hint {
  color: var(--ll-color-text);
}

/* ======== LANDING PAGE (index.html) ======== */
/*
 * Mirrors the original design mockup's section order: a full-bleed photo
 * hero with the site header on top of it, a dark tagline band, a
 * three-step "purpose" section, a photo beside the sign-up panel, and
 * a dark footer. Every value below is a var() reference into the
 * tokens declared in :root -- no new literals are introduced here.
 */

.ll-site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ll-space-sm);
  padding: var(--space-xl) var(--space-xl);
  position: relative;
  z-index: 1;
}

/* Interior pages (parent, mentor, reviewer): adapt the site header to
   centered layout instead of full-bleed. */
body:not(.ll-landing) .ll-site-header {
  justify-content: center;
  padding: var(--space-xl) var(--ll-space-sm);
  width: 100%;
  max-width: var(--ll-max-width);
}

.ll-brand {
  display: flex;
  align-items: center;
  gap: var(--ll-space-sm);
  text-decoration: none;
  color: var(--ll-color-text-on-dark);
}

.ll-brand:hover,
.ll-brand:focus {
  color: var(--ll-color-text-on-dark);
  text-decoration: none;
}

/* The logo mark's navy "S" disappears on the dark navy bands, so it
   always sits on its own small white tile, on light pages too, so it
   looks the same everywhere. */
.ll-brand .ll-logo {
  height: var(--ll-landing-logo-height);
  width: auto;
  max-width: none;
  padding: var(--space-xs);
  background-color: var(--ll-color-bg-elevated);
  border-radius: var(--ll-radius-md);
}

.ll-brand-name {
  font-family: var(--ll-font-heading);
  font-weight: var(--font-weight-heading);
  font-size: var(--font-size-lg);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ll-site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  font-size: var(--font-size-xs);
}

.ll-site-nav a {
  color: var(--ll-color-text-on-dark);
  text-decoration: none;
}

.ll-site-nav a:hover,
.ll-site-nav a:focus {
  color: var(--ll-color-accent-on-dark);
  text-decoration: none;
}

/* Sign in sits on a solid navy chip so it stays readable over any part
   of the hero photo (the top-right corner is often a bright window). */
.ll-site-nav .ll-nav-signin {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-tap-target);
  padding: 0 var(--space-lg);
  border-radius: var(--ll-radius-md);
  background-color: var(--ink-deep);
  color: var(--ll-color-text-on-dark);
  font-weight: 600;
  white-space: nowrap;
}

.ll-site-nav .ll-nav-signin:hover,
.ll-site-nav .ll-nav-signin:focus {
  background-color: var(--navy-hover);
  color: var(--ll-color-text-on-dark);
}

@media (max-width: 700px) {
  .ll-site-nav a:not(.ll-nav-signin) {
    display: none;
  }

  .ll-site-header .ll-brand-name {
    font-size: var(--font-size-base);
    letter-spacing: var(--letter-spacing-base);
  }

}

/* Photo hero: full-bleed background image with a dark scrim gradient
   so the header and headline stay readable over any photo. */
.ll-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ll-color-bg-dark);
  color: var(--ll-color-text-on-dark);
  min-height: var(--ll-hero-min-height);
  display: flex;
  flex-direction: column;
}

.ll-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: -2;
}

.ll-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 30, 50, var(--overlay-strong)), rgba(0, 30, 50, var(--overlay-mid)) 35%, rgba(0, 30, 50, var(--overlay-soft)) 74%),
    linear-gradient(0deg, rgba(0, 30, 50, var(--overlay-base)), rgba(0, 30, 50, var(--overlay-fade)) 35%),
    linear-gradient(180deg, rgba(0, 30, 50, var(--overlay-mid)), rgba(0, 30, 50, var(--overlay-fade)) 22%);
}

.ll-hero-content {
  position: relative;
  z-index: 1;
  max-width: 760px;
  padding: var(--space-3xl) var(--space-xl) var(--space-4xl);
}

.ll-hero-content h1 {
  color: var(--ll-color-text-on-dark);
  font-size: var(--font-size-h1);
}

.ll-hero-content p {
  max-width: 460px;
  font-size: var(--font-size-lg);
  line-height: var(--line-height-body);
  color: var(--ll-color-text-on-dark-muted);
  margin: var(--space-xl) 0 var(--space-xl);
}

.ll-hero .ll-eyebrow {
  color: var(--ll-color-accent-on-dark);
}

/* The hero's secondary ("I'm a Mentor") button sits over a dark photo,
   unlike every other .ll-btn-secondary which sits on a light card --
   it needs light text/border instead of the shared dark-ink default. */
.ll-hero .ll-btn-secondary {
  color: var(--ll-color-text-on-dark);
  border-color: var(--ll-color-text-on-dark-muted);
}

.ll-hero .ll-btn-secondary:hover,
.ll-hero .ll-btn-secondary:focus {
  border-color: var(--ll-color-accent-on-dark);
  color: var(--ll-color-accent-on-dark);
}

/* Dark tagline band between the hero and the three-step section. */
.ll-tagline-band {
  margin: 0;
  padding: var(--space-xl) var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xl);
  background-color: var(--ll-color-bg-dark);
  color: var(--ll-color-accent-on-dark);
  font-family: var(--ll-font-heading);
  font-size: var(--font-size-lg);
  letter-spacing: 0.08em;
  text-align: center;
  border-top: var(--border-width) solid var(--ll-color-border-dark);
}

/* Three-step "purpose" section. */
.ll-steps-section {
  padding: var(--space-4xl) var(--space-xl);
}

.ll-steps-section h2 {
  text-align: center;
  margin-bottom: var(--space-3xl);
}

.ll-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  max-width: var(--ll-landing-max-width);
  margin: 0 auto;
}

@media (min-width: 900px) {
  .ll-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ll-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: var(--border-width) solid var(--ll-color-border);
}

@media (min-width: 900px) {
  .ll-step {
    padding-bottom: 0;
    border-bottom: 0;
    padding-left: var(--space-2xl);
    border-left: var(--border-width) solid var(--ll-color-border);
  }

  .ll-step:first-child {
    padding-left: 0;
    border-left: 0;
  }
}

.ll-step-number {
  flex-shrink: 0;
  width: var(--ll-step-number-size);
  height: var(--ll-step-number-size);
  border: var(--border-width) solid var(--ll-color-accent-muted);
  background-color: transparent;
  color: var(--ll-color-accent-muted);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--ll-font-heading);
  font-size: var(--font-size-lg);
}

.ll-step-icon {
  color: var(--sky);
  margin-bottom: var(--ll-space-xs);
  width: var(--space-2xl);
  height: var(--space-2xl);
}

.ll-step h3 {
  font-size: var(--font-size-h3);
  margin-bottom: var(--ll-space-xs);
}

.ll-step p {
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--ll-color-text-muted);
  margin-top: var(--ll-space-xs);
}

/* Sign-up section: a photo beside the "Let's get started" panel. */
.ll-signup-section {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .ll-signup-section {
    grid-template-columns: 1fr 1fr;
    min-height: var(--ll-hero-min-height);
  }
}

.ll-story {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--ink-soft);
  color: var(--ll-color-text-on-dark);
  min-height: var(--ll-hero-min-height);
}

.ll-story-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;   /* a portrait photo in a wide box: keep the faces, not the table */
  z-index: -2;
}

.ll-story::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(0deg, rgba(0, 0, 0, var(--overlay-strong)), rgba(0, 0, 0, var(--overlay-fade)) 60%);
}

.ll-story-copy {
  position: absolute;
  left: var(--space-xl);
  right: var(--space-xl);
  bottom: var(--space-3xl);
  z-index: 1;
}

.ll-story-copy h2 {
  color: var(--ll-color-text-on-dark);
  font-size: var(--font-size-h2);
}

.ll-story-copy::after {
  content: '';
  display: block;
  width: var(--space-3xl);
  height: var(--border-width-focus);
  background-color: var(--ll-color-accent);
  margin-top: var(--space-xl);
}

.ll-signup-panel {
  padding: var(--space-3xl) var(--space-xl);
  align-self: center;
  text-align: center;
}

.ll-signup-panel .ll-actions {
  justify-content: center;
}

.ll-signup-panel > p {
  margin: var(--ll-space-sm) 0 var(--space-xl);
  color: var(--ll-color-text-muted);
}

/* Dark site footer. */
.ll-site-footer {
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  background-color: var(--ll-color-bg-dark);
  color: var(--ll-color-text-on-dark);
  border-top: var(--border-width) solid var(--ll-color-border-dark);
  margin-top: 0;
  text-align: left;
  font-size: var(--font-size-sm);
}

.ll-site-footer .ll-brand {
  flex-shrink: 0;
}

.ll-site-footer .ll-brand-subtitle {
  display: block;
  text-transform: uppercase;
  color: var(--ll-color-accent-on-dark);
  font-size: var(--font-size-xs);
  letter-spacing: 0.18em;
  margin-top: var(--ll-space-xs);
}

.ll-site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  font-size: var(--font-size-sm);
  color: var(--ll-color-text-on-dark-muted);
}

.ll-site-footer-links a {
  color: var(--ll-color-text-on-dark-muted);
  text-decoration: none;
}

.ll-site-footer-links a:hover,
.ll-site-footer-links a:focus {
  color: var(--ll-color-accent-on-dark);
  text-decoration: underline;
}

.ll-site-footer p {
  color: var(--ll-color-text-on-dark-muted);
  margin: 0;
}

/* Urban Specialists contact details, in every page's footer. */
.ll-site-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-style: normal;
  color: var(--ll-color-text-on-dark-muted);
}

.ll-site-contact a {
  color: var(--ll-color-text-on-dark-muted);
  text-decoration: underline;
}

.ll-site-contact a:hover,
.ll-site-contact a:focus {
  color: var(--ll-color-accent-on-dark);
}

.ll-site-footer p a {
  color: inherit;
  text-decoration: underline;
}

.ll-site-footer p a:hover,
.ll-site-footer p a:focus {
  color: var(--ll-color-accent-on-dark);
}

/* Links inside running text are underlined, not told apart by colour alone. */
.ll-card p:not(.ll-link-row) a {
  text-decoration: underline;
}