/* Alebu Tech — bundled brand CSS
   Source: clients/alebutech/web/mockups/styles/{tokens,base,patterns,forms,tokens-variant-a}.css
   v3f sign-off: 2026-05-02
*/

/* === tokens.css === */
/* Alebu Tech — design tokens
   Source of truth for the brand system. Do not add colors or type families
   outside this file. Any new values must be derived from these four palette
   hexes or from the two approved type families.
   Referenced: clients/alebutech/brand/moodboard.md */

:root {
  /* Palette — the four approved brand hexes */
  --color-primary: #1E9BD0;       /* cerulean mid-blue — brush stroke */
  --color-secondary: #B0D9E8;     /* pale sky-blue — lighter band */
  --color-base: #E8E6DF;          /* cool off-white canvas */
  --color-text: #1B2A33;          /* near-black — added for body copy */

  /* Derived from the four (tints, shades, neutrals) — NOT new hues */
  --color-primary-dark: #1580AE;
  --color-primary-tint: #5FB5DC;
  --color-base-alt: #F2F0E9;
  --color-surface: #FFFFFF;
  --color-text-muted: #5D6F7C;
  --color-border: #D6D3C9;
  --color-on-dark: #E8E6DF;

  /* Typography — Inter + IBM Plex Sans per moodboard.md. Manrope fallback. */
  --font-heading: 'Inter', 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'IBM Plex Sans', 'Inter', 'Manrope', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale — clamped for fluid responsiveness between 375px and 1280px */
  --type-display-xl: clamp(2.25rem, 4vw + 1rem, 4rem);
  --type-display: clamp(1.875rem, 2.5vw + 1rem, 3rem);
  --type-h1: clamp(1.625rem, 1.8vw + 1rem, 2.375rem);
  --type-h2: clamp(1.375rem, 1.2vw + 1rem, 1.875rem);
  --type-h3: 1.25rem;
  --type-body: 1.0625rem;
  --type-small: 0.9375rem;
  --type-micro: 0.8125rem;

  --leading-display: 1.1;
  --leading-heading: 1.2;
  --leading-body: 1.6;
  --leading-tight: 1.35;

  --tracking-display: -0.01em;
  --tracking-wordmark: 0.16em;

  /* Spacing — 4px base grid */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* Layout widths */
  --container-max: 1280px;
  --container-gutter: clamp(1rem, 4vw, 2rem);
  --reading-max: 40rem;
  --form-max: 28rem;

  /* Radii — minimal, per "less is more" brief */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Borders */
  --border-thin: 1px solid var(--color-border);
  --border-primary: 1px solid var(--color-primary);

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* Focus ring — accessibility */
  --focus-ring: 0 0 0 3px rgba(30, 155, 208, 0.35);
}

/* === base.css === */
/* Base — reset, typography, layout primitives */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--color-primary-dark); text-underline-offset: 0.2em; }
a:hover { color: var(--color-primary); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Headings */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--leading-heading);
  color: var(--color-text);
  letter-spacing: var(--tracking-display);
}
h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); font-weight: 500; }

p, li { max-width: 65ch; }

.display-xl { font-size: var(--type-display-xl); line-height: var(--leading-display); font-weight: 600; font-family: var(--font-heading); letter-spacing: var(--tracking-display); }
.display { font-size: var(--type-display); line-height: var(--leading-display); font-weight: 600; font-family: var(--font-heading); letter-spacing: var(--tracking-display); }
.lede { font-size: 1.125rem; line-height: var(--leading-body); color: var(--color-text); }
.muted { color: var(--color-text-muted); }
.micro { font-size: var(--type-micro); }

/* Layout primitives */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}
.reading {
  max-width: var(--reading-max);
}
.section {
  padding-block: clamp(3rem, 6vw + 1rem, 6rem);
}
.section--tight { padding-block: clamp(2rem, 4vw + 1rem, 4rem); }
.section--base { background: var(--color-base); }
.section--alt { background: var(--color-base-alt); }
.section--surface { background: var(--color-surface); }
.section--primary { background: var(--color-primary); color: var(--color-on-dark); }
.section--secondary { background: var(--color-secondary); color: var(--color-text); }
.section--dark { background: var(--color-text); color: var(--color-on-dark); }
/* Sunrise-amber accent band (Variant A); promoted from v3f inline overrides. */
.section--accent { background: var(--color-accent); color: var(--color-text); }
.section--accent h2 { color: var(--color-text); }

.stack > * + * { margin-block-start: var(--stack-gap, var(--space-4)); }
.stack-lg > * + * { margin-block-start: var(--space-8); }
.stack-xl > * + * { margin-block-start: var(--space-12); }

.center { text-align: center; }
.center-block { margin-inline: auto; }

.grid {
  display: grid;
  gap: var(--space-8);
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Skip link for a11y */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--color-text);
  color: var(--color-on-dark);
  padding: var(--space-2) var(--space-4);
  z-index: 100;
}
.skip-link:focus { top: 0; }

/* Screen-reader-only */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* === patterns.css === */
/* Block patterns — the reusable components defined in
   clients/alebutech/web/wireframes/patterns.md
   Each `.pattern-*` class maps 1:1 to a WordPress block pattern name
   we'll register during Phase E (e.g. alebutech/site-header). */

/* ─── alebutech/site-header ─────────────────────────────────────── */
.pattern-site-header {
  background: var(--color-base);
  border-bottom: var(--border-thin);
  position: sticky;
  top: 0;
  z-index: 20;
}
.pattern-site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}
.pattern-site-header .logo {
  display: inline-flex;
  align-items: center;
  height: 3rem;
}
.pattern-site-header .logo img { height: 100%; width: auto; }
.pattern-site-header nav { display: none; }
.pattern-site-header.is-menu-open nav {
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-base);
  border-bottom: var(--border-thin);
  padding: var(--space-4) var(--space-6) var(--space-6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.pattern-site-header nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-8);
}
.pattern-site-header.is-menu-open nav ul {
  flex-direction: column;
  gap: var(--space-5);
}
.pattern-site-header nav a {
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--type-small);
}
.pattern-site-header nav a:hover { color: var(--color-primary-dark); }
.pattern-site-header .nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: var(--border-thin);
  border-radius: var(--radius-sm);
}
.pattern-site-header .header-cta { display: none; }

@media (min-width: 48rem) {
  .pattern-site-header nav { display: block; }
  .pattern-site-header .nav-toggle { display: none; }
  .pattern-site-header .header-cta { display: inline-flex; }
}

/* ─── alebutech/site-footer ─────────────────────────────────────── */
.pattern-site-footer {
  background: var(--color-text);
  color: var(--color-on-dark);
  padding-block: var(--space-16) var(--space-8);
  margin-top: var(--space-24);
}
.pattern-site-footer .footer-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}
.pattern-site-footer h4 {
  color: var(--color-on-dark);
  font-size: var(--type-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}
.pattern-site-footer ul { list-style: none; padding: 0; }
.pattern-site-footer li + li { margin-top: var(--space-3); }
.pattern-site-footer a { color: var(--color-on-dark); text-decoration: none; }
.pattern-site-footer a:hover { color: var(--color-secondary); }
.pattern-site-footer .footer-brand p { color: var(--color-secondary); max-width: 22ch; }
.pattern-site-footer .footer-brand .logo-lockup {
  display: inline-flex;
  height: 2rem;
  margin-bottom: var(--space-4);
}
.pattern-site-footer .footer-brand .logo-lockup img { height: 100%; width: auto; }
.pattern-site-footer .footer-legal {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(232, 230, 223, 0.15);
  font-size: var(--type-micro);
  color: var(--color-secondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

@media (min-width: 48rem) {
  .pattern-site-footer .footer-grid { grid-template-columns: 1.3fr 1fr 1.3fr; }
}

/* ─── alebutech/hero-credibility ────────────────────────────────── */
.pattern-hero-credibility {
  background: var(--color-base);
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw + 1rem, 8rem);
}
.pattern-hero-credibility::before {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(176, 217, 232, 0.35) 55%,
      rgba(30, 155, 208, 0.18) 100%);
  pointer-events: none;
}
.pattern-hero-credibility .container {
  position: relative;
  z-index: 1;
  max-width: 56rem;
}
.pattern-hero-credibility h1 {
  font-size: var(--type-display-xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 600;
  max-width: 22ch;
}
.pattern-hero-credibility .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* Horizon SVG — geometric echo of the moodboard painting */
.pattern-hero-credibility .horizon {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  height: 40%;
  opacity: 0.85;
  z-index: 0;
}

/* ─── alebutech/hero-image (split: text left, photo right) ──────── */
.pattern-hero-image {
  background: var(--color-base);
  padding-block: clamp(2.5rem, 5vw + 1rem, 5rem);
  position: relative;
  overflow: hidden;
}
.pattern-hero-image .hero-image-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  align-items: center;
}
.pattern-hero-image .hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
.pattern-hero-image .hero-text h1 {
  font-size: var(--type-display-xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 600;
  max-width: 18ch;
}
.pattern-hero-image .hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.pattern-hero-image .hero-image-frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(135deg, var(--color-base-alt) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
  box-shadow: 0 12px 28px -16px rgba(27, 42, 51, 0.25);
}
.pattern-hero-image .hero-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Subtle horizon line at the bottom of the image — brand continuity */
.pattern-hero-image .hero-image-frame::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%);
  z-index: 1;
}
.pattern-hero-image .hero-image-caption {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-4);
  font-size: var(--type-micro);
  color: var(--color-text);
  background: rgba(232, 230, 223, 0.92);
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  z-index: 2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Placeholder treatment if the image is missing — keeps layout clean */
.pattern-hero-image .hero-image-frame.is-placeholder {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-8);
}
.pattern-hero-image .hero-image-frame.is-placeholder .placeholder-mark {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--type-small);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
}

@media (min-width: 56rem) {
  .pattern-hero-image .hero-image-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: var(--space-16);
    min-height: 28rem;
  }
}

/* ─── alebutech/trust-pillars ───────────────────────────────────── */
.pattern-trust-pillars .pillars {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}
.pattern-trust-pillars .pillar h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-primary);
  display: inline-block;
}
.pattern-trust-pillars .pillar p { color: var(--color-text); font-size: 1.0625rem; max-width: 28ch; }

@media (min-width: 48rem) {
  .pattern-trust-pillars .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--space-12); }
}

/* ─── alebutech/modalities-list ─────────────────────────────────── */
.pattern-modalities {
  text-align: center;
}
.pattern-modalities h2 {
  font-size: var(--type-h2);
  margin-bottom: var(--space-6);
}
.pattern-modalities .modality-line {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1vw + 0.75rem, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text);
  line-height: 1.4;
  max-width: 50rem;
  margin-inline: auto;
}
.pattern-modalities .modality-line .sep { color: var(--color-primary); margin-inline: var(--space-2); }
.pattern-modalities .modality-footnote {
  margin-top: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--type-small);
}

/* ─── alebutech/since-2003 ──────────────────────────────────────── */
.pattern-since-2003 {
  text-align: center;
}
.pattern-since-2003 .year {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 8vw + 1rem, 7.5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.pattern-since-2003 .year-prefix {
  display: block;
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.25rem);
  font-weight: 500;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: var(--space-4);
}
.pattern-since-2003 p {
  margin-top: var(--space-6);
  font-size: 1.125rem;
  max-width: 32rem;
  margin-inline: auto;
  color: var(--color-text);
}

/* ─── alebutech/pdf-capture-tease (Home compact variant) ────────── */
.pattern-pdf-tease {
  background: var(--color-base-alt);
  border: var(--border-thin);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  display: grid;
  gap: var(--space-6);
  align-items: center;
  grid-template-columns: 1fr;
}
.pattern-pdf-tease h2 { font-size: var(--type-h2); }
.pattern-pdf-tease p { color: var(--color-text); }
@media (min-width: 48rem) {
  .pattern-pdf-tease { grid-template-columns: 1.6fr 1fr; gap: var(--space-10); }
  .pattern-pdf-tease .pdf-tease-cta { justify-self: end; }
}

/* ─── alebutech/newsletter-embed ────────────────────────────────── */
.pattern-newsletter-embed {
  background: var(--color-secondary);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
}
.pattern-newsletter-embed h2 { font-size: var(--type-h2); margin-bottom: var(--space-3); }
.pattern-newsletter-embed p { margin-bottom: var(--space-6); max-width: 36rem; }
.pattern-newsletter-embed form {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
  max-width: 32rem;
}
@media (min-width: 32rem) {
  .pattern-newsletter-embed form {
    grid-template-columns: 1fr auto;
  }
}

/* ─── alebutech/aalborg-heritage ────────────────────────────────── */
.pattern-aalborg {
  background: var(--color-base-alt);
  position: relative;
  overflow: hidden;
}
.pattern-aalborg .container { position: relative; z-index: 1; }
.pattern-aalborg h2 { font-size: var(--type-h2); margin-bottom: var(--space-6); max-width: 20ch; }
.pattern-aalborg p { max-width: 36rem; font-size: 1.0625rem; }
.pattern-aalborg .horizon-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.3;
  pointer-events: none;
}

/* ─── alebutech/contact-form ────────────────────────────────────── */
.pattern-contact-form {
  background: var(--color-surface);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  border: var(--border-thin);
}
.pattern-contact-form h2 { font-size: var(--type-h2); margin-bottom: var(--space-6); }

.contact-two-col {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .contact-two-col { grid-template-columns: 1.6fr 1fr; }
}
.contact-direct {
  background: var(--color-base-alt);
  padding: clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
}
.contact-direct h3 { margin-bottom: var(--space-4); }
.contact-direct dt { font-size: var(--type-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); margin-top: var(--space-4); }
.contact-direct dt:first-of-type { margin-top: 0; }
.contact-direct dd { margin-inline-start: 0; font-size: 1.0625rem; margin-top: var(--space-1); }
.contact-direct dd a { color: var(--color-text); text-decoration: none; border-bottom: var(--border-primary); }
.contact-direct dd a:hover { color: var(--color-primary-dark); }

/* ─── alebutech/pdf-capture (full, on /downloads) ───────────────── */
.pattern-pdf-capture-panel {
  background: var(--color-surface);
  padding: clamp(2rem, 4vw, 2.5rem);
  border-radius: var(--radius-lg);
  border: var(--border-thin);
}
.pattern-pdf-capture-panel h2 { font-size: var(--type-h2); margin-bottom: var(--space-6); }
.pattern-pdf-capture-panel .privacy {
  margin-top: var(--space-4);
  font-size: var(--type-micro);
  color: var(--color-text-muted);
}

/* ─── alebutech/request-bid (Pipeline-item request/offer form) ──── */
.pattern-request-bid {
  background: var(--color-surface);
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  border: var(--border-thin);
}
.pattern-request-bid h2 { font-size: var(--type-h2); margin-bottom: var(--space-2); }
.pattern-request-bid .form-intro {
  font-size: 1.0625rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.pattern-request-bid .field-group {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 36rem) {
  .pattern-request-bid .field-group--two { grid-template-columns: 1fr 1fr; }
}
/* Neutralise the global `.field + .field` margin inside grid cells so grid alignment holds. */
.pattern-request-bid .field-group .field + .field { margin-top: 0; }
/* Restore vertical rhythm between groups and between group → standalone field. */
.pattern-request-bid .field-group + .field-group,
.pattern-request-bid .field-group + .field,
.pattern-request-bid .field + .field-group {
  margin-top: var(--space-5);
}
.pattern-request-bid .field .optional {
  font-size: var(--type-micro);
  color: var(--color-text-muted);
  font-weight: 400;
  margin-inline-start: 0.4em;
}
.pattern-request-bid .field-hint {
  display: block;
  font-size: var(--type-micro);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.pattern-request-bid .price-input {
  position: relative;
}
.pattern-request-bid .price-input::before {
  content: "€";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0.875rem;
  display: inline-flex;
  align-items: center;
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: 1.0625rem;
}
.pattern-request-bid .price-input input { padding-inline-start: 2rem; }
.pattern-request-bid .privacy {
  margin-top: var(--space-4);
  font-size: var(--type-micro);
  color: var(--color-text-muted);
}

/* ─── alebutech/request-system-context (system being requested) ─── */
.pattern-request-system-context {
  background: var(--color-base-alt);
  border: var(--border-thin);
  border-left: 4px solid var(--color-primary);
  padding: clamp(1.25rem, 2.5vw, 1.5rem) clamp(1.5rem, 3vw, 2rem);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-6);
}
.pattern-request-system-context .eyebrow {
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.pattern-request-system-context .system {
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-2);
}
.pattern-request-system-context .meta {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  margin: 0;
}
.pattern-request-system-context .status-pill {
  font-size: var(--type-micro);
  font-weight: 500;
  padding: 0.2em 0.7em;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-secondary);
  color: var(--color-text);
  white-space: nowrap;
}
.pattern-request-system-context .status-pill--refurb { background: var(--color-accent-tint); }
.pattern-request-system-context .status-pill--sourcing { background: var(--color-secondary); }
.pattern-request-system-context .status-pill--ready { background: var(--color-primary-tint); }
.pattern-request-system-context .status-pill--reserved { background: var(--color-border); color: var(--color-text-muted); }

.pdf-preview {
  background: var(--color-base-alt);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius-lg);
  border: var(--border-thin);
}
.pdf-preview .pdf-cover {
  aspect-ratio: 8.5 / 11;
  background:
    linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  padding: var(--space-6);
  color: var(--color-on-dark);
  margin-bottom: var(--space-6);
  box-shadow: 0 8px 24px -8px rgba(27, 42, 51, 0.25);
}
.pdf-preview .pdf-cover-mark {
  font-family: var(--font-heading);
  font-weight: 500;
  letter-spacing: var(--tracking-wordmark);
  font-size: 0.9375rem;
  margin-bottom: var(--space-8);
  opacity: 0.9;
}
.pdf-preview .pdf-cover-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem);
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
}
.pdf-preview h3 { font-size: 1.125rem; margin-bottom: var(--space-3); }
.pdf-preview ul {
  list-style: none;
  padding: 0;
}
.pdf-preview li + li { margin-top: var(--space-2); }
.pdf-preview li {
  padding-left: var(--space-6);
  position: relative;
}
.pdf-preview li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.625em;
  width: 0.75rem; height: 2px;
  background: var(--color-primary);
}
.pdf-preview .pdf-meta {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: var(--border-thin);
  font-size: var(--type-micro);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Downloads layout grid */
.downloads-layout {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 48rem) {
  .downloads-layout { grid-template-columns: 1fr 1fr; gap: var(--space-12); }
}

/* ─── Confirmation blocks (thank-you pages) ─────────────────────── */
.pattern-confirmation {
  text-align: center;
  background: var(--color-secondary);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radius-lg);
  max-width: 42rem;
  margin-inline: auto;
}
.pattern-confirmation h1 {
  font-size: var(--type-display);
  margin-bottom: var(--space-6);
}
.pattern-confirmation .download-btn {
  margin-block: var(--space-4) var(--space-6);
}
.pattern-confirmation .subtext { color: var(--color-text); max-width: 32rem; margin-inline: auto; }

.next-steps {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  margin-top: var(--space-16);
}
.next-steps > * { padding: clamp(1.5rem, 3vw, 2rem); border-radius: var(--radius-lg); }
.next-steps .step-card {
  background: var(--color-base-alt);
  border: var(--border-thin);
}
.next-steps .step-card h2 { font-size: 1.375rem; margin-bottom: var(--space-4); }
@media (min-width: 48rem) {
  .next-steps { grid-template-columns: 1fr 1fr; }
}

/* ─── Newsletter page (focused postcard) ────────────────────────── */
.pattern-newsletter-page {
  max-width: 36rem;
  margin-inline: auto;
  text-align: center;
}
.pattern-newsletter-page h1 {
  font-size: var(--type-display);
  margin-bottom: var(--space-4);
}
.pattern-newsletter-page .lede {
  margin-bottom: var(--space-10);
  color: var(--color-text);
  font-size: 1.125rem;
}
.pattern-newsletter-page .pattern-newsletter-embed {
  background: var(--color-surface);
  border: var(--border-thin);
  text-align: left;
}
.pattern-newsletter-page .signature {
  margin-top: var(--space-6);
  font-size: var(--type-small);
  color: var(--color-text-muted);
}

/* Page-level helpers */
.page-hero {
  text-align: center;
  padding-block: clamp(3rem, 6vw + 1rem, 5rem);
}
.page-hero h1 { margin-bottom: var(--space-4); max-width: 22ch; margin-inline: auto; }
.page-hero p { color: var(--color-text); max-width: 38rem; margin-inline: auto; }

.cta-band {
  text-align: center;
  padding-block: clamp(3rem, 5vw, 4rem);
}
.cta-band h2 { font-size: var(--type-h2); margin-bottom: var(--space-6); }

/* ─── v3f sign-off overrides ────────────────────────────────────────
   Promoted from inline <style> in index-simple-v3f.html on 2026-05-02
   per Søren's approval. These are now the canonical values for the
   Variant A palette. Earlier inline-history comments (v3b/v3c/v3d/
   v3e/v3f progressions) are preserved in the mockup file.
   ──────────────────────────────────────────────────────────────── */

/* Site-header — logo enlarged, header padded out, nav and CTA upsized */
.pattern-site-header .logo { height: 6.08rem; }
.pattern-site-header .container { padding-block: 3.45rem; }
.pattern-site-header nav a { font-size: 1.595rem; } /* −10% from v3f 1.7725rem — Systems dropdown made the row feel cramped */
.pattern-site-header .header-cta { font-size: 1.625rem; }

/* Site-footer — flush against the since-2003 block (no top margin) */
.pattern-site-footer { margin-top: 0; }

/* Since-2003 — tightened padding, headline -10px at clamp ends */
.pattern-since-2003 { padding-block: clamp(1.8rem, 3.6vw + 0.45rem, 3.15rem); }
.pattern-since-2003 .year { font-size: clamp(1.875rem, 5vw + 0.125rem, 4.125rem); }
.pattern-since-2003 .year-prefix {
  font-size: clamp(0.875rem, 0.4vw + 0.8rem, 1.0625rem);
  letter-spacing: 0.18em;
}

/* Hero-image — eyebrow pillars line + sunrise-amber accent on the second clause */
.pattern-hero-image .hero-pillars,
.hero-pillars {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: var(--font-heading);
  font-size: var(--type-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin: 0;
}
.pattern-hero-image .hero-pillars .sep,
.hero-pillars .sep { color: var(--color-accent); font-weight: 600; }
.pattern-hero-image .hero-accent { color: var(--color-accent); }

/* Modalities — accent-band variant: dim the dot separators with --color-depth */
.section--accent .pattern-modalities .modality-line .sep { color: var(--color-depth); }

/* Modalities — clickable inline links inside the band (Phase 2 nav surface).
   Links keep the same colour as the surrounding line and pick up the accent
   on hover. Sep dots stay non-interactive. */
.pattern-modalities .modality-line a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}
.pattern-modalities .modality-line a:hover,
.pattern-modalities .modality-line a:focus-visible {
  color: var(--color-depth);
  border-bottom-color: var(--color-depth);
}
.section--accent .pattern-modalities .modality-line a:hover,
.section--accent .pattern-modalities .modality-line a:focus-visible {
  color: var(--color-depth);
  border-bottom-color: var(--color-depth);
}

/* ─── alebutech/nav-dropdown ────────────────────────────────────────
   Click-triggered disclosure submenu for the primary nav. Co-exists
   with the hamburger toggle: on mobile, dropdowns expand inline inside
   .is-menu-open; on desktop, they pop down beneath their parent item.
   See assets/js/nav.js for the controller. */
.pattern-site-header nav .nav-list { /* scope marker, no rendering change */ }
.pattern-site-header nav .nav-item--has-dropdown { position: relative; }
.pattern-site-header nav .nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  cursor: pointer;
}
.pattern-site-header nav .nav-dropdown__chevron {
  font-size: 0.7em;
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-out);
}
.pattern-site-header nav .nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__chevron {
  transform: rotate(180deg);
}
.pattern-site-header nav .nav-dropdown__menu {
  list-style: none;
  padding: 0;
  margin: 0;
  /* Force vertical orientation — the top-level nav ul is display:flex (row),
     which the submenu would otherwise inherit and render horizontally. */
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pattern-site-header nav .nav-dropdown__menu[hidden] { display: none; }
.pattern-site-header nav .nav-dropdown__menu li {
  width: 100%;
}
.pattern-site-header nav .nav-dropdown__item {
  display: block;
  padding: 0.75rem 1rem;
  min-height: 44px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--type-small);
  border-left: 3px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.pattern-site-header nav .nav-dropdown__item:hover,
.pattern-site-header nav .nav-dropdown__item:focus-visible {
  border-left-color: var(--color-accent);
  background: var(--color-base-alt);
}
.pattern-site-header nav .nav-dropdown__item--all,
.pattern-site-header nav .nav-dropdown__item--pipeline { font-weight: 600; }
.pattern-site-header nav .nav-dropdown__item-note {
  margin-inline-start: 0.5em;
  font-weight: 400;
  font-size: var(--type-micro);
  color: var(--color-text-muted);
}
.pattern-site-header nav .nav-dropdown__separator {
  list-style: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-2);
}

/* Mobile (inside .is-menu-open): dropdown lives inline as an indented sub-list. */
.pattern-site-header.is-menu-open .nav-dropdown__menu {
  margin-top: var(--space-3);
  padding-inline-start: var(--space-6);
  border-left: 2px solid var(--color-secondary);
}
.pattern-site-header.is-menu-open .nav-dropdown__menu li + li { margin-top: var(--space-1); }

/* Desktop (≥ 48rem): dropdown is an absolutely-positioned popover. */
@media (min-width: 48rem) {
  .pattern-site-header nav .nav-dropdown__menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 16rem;
    background: var(--color-base);
    border: var(--border-thin);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 28px -12px rgba(27, 42, 51, 0.25);
    padding: var(--space-3);
    z-index: 30;
  }
  .pattern-site-header nav .nav-dropdown__item { padding: 0.5rem 0.75rem; min-height: 0; }
}

/* ─── alebutech/system-catalog (pillar grid) ────────────────────────
   Used on /systems to show the 7 modality cards. Each card is the
   alebutech/system-catalog-card block pattern. */
.pattern-system-catalog .system-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
.pattern-system-catalog__card {
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.pattern-system-catalog__card:hover { border-color: var(--color-accent); transform: translateY(-2px); }
.pattern-system-catalog__card-image {
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-base-alt) 0%, var(--color-secondary) 100%);
  margin-bottom: var(--space-2);
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
  font-family: var(--font-heading);
  font-size: var(--type-micro);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
}
.pattern-system-catalog__card-image::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%);
}
.pattern-system-catalog__card h3 {
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-accent);
  display: inline-block;
  align-self: flex-start;
}
.pattern-system-catalog__card p {
  margin: 0;
  color: var(--color-text);
  font-size: 1.0625rem;
}
.pattern-system-catalog__card .card-cta {
  margin-top: auto;
  padding-top: var(--space-4);
  color: var(--color-primary-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--type-small);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.pattern-system-catalog__card .card-cta:hover,
.pattern-system-catalog__card .card-cta:focus-visible { border-bottom-color: var(--color-primary-dark); }
.pattern-system-catalog__other {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--type-small);
  margin-top: var(--space-8);
}
.pattern-system-catalog__other a {
  color: var(--color-text);
  border-bottom: var(--border-primary);
  text-decoration: none;
  margin-inline-start: 0.5em;
}
.pattern-system-catalog__other a:hover { color: var(--color-primary-dark); }

@media (min-width: 40rem) {
  .pattern-system-catalog .system-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}
@media (min-width: 64rem) {
  .pattern-system-catalog .system-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── alebutech/system-detail (cluster page) ────────────────────────
   Used on /systems/{modality} pages. */
.pattern-system-detail-header {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: 1fr;
  align-items: center;
}
.pattern-system-detail-header .system-detail-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.pattern-system-detail-header h1 {
  font-size: var(--type-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: 600;
  max-width: 18ch;
}
.pattern-system-detail-header .system-detail-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}
.pattern-system-detail-header .system-detail-image {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-base-alt) 0%, var(--color-secondary) 100%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
  box-shadow: 0 12px 28px -16px rgba(27, 42, 51, 0.25);
  display: grid;
  place-items: center;
}
.pattern-system-detail-header .system-detail-image::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 6px;
  background: linear-gradient(90deg, var(--color-secondary) 0%, var(--color-primary) 100%);
}
.pattern-system-detail-header .system-detail-image .placeholder-mark {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--type-small);
  color: var(--color-text-muted);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
}
/* When the figure carries a real (or swapped-in) image, fill the frame. */
.pattern-system-detail-header .system-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (min-width: 56rem) {
  .pattern-system-detail-header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--space-16);
  }
}

.pattern-system-facts {
  background: var(--color-base-alt);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.pattern-system-facts h2 { font-size: var(--type-h2); margin-bottom: var(--space-6); }
.pattern-system-facts dl {
  display: grid;
  gap: var(--space-4) var(--space-8);
  grid-template-columns: 1fr;
  margin: 0;
}
.pattern-system-facts dt {
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.pattern-system-facts dd {
  margin: 0;
  font-size: 1.0625rem;
  color: var(--color-text);
}
@media (min-width: 40rem) {
  .pattern-system-facts dl { grid-template-columns: minmax(10rem, 1fr) 2fr; }
}

.pattern-sample-listing {
  background: var(--color-surface);
  border: var(--border-thin);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  line-height: var(--leading-body);
  color: var(--color-text);
  max-width: 44rem;
  margin-inline: auto;
}
.pattern-sample-listing .listing-label {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.pattern-related-systems h2 { font-size: var(--type-h2); margin-bottom: var(--space-6); }
.pattern-related-systems .related-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}
.pattern-related-systems .related-card {
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  transition: border-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.pattern-related-systems .related-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.pattern-related-systems .related-card strong { font-family: var(--font-heading); font-weight: 600; font-size: 1.125rem; }
.pattern-related-systems .related-card .arrow { color: var(--color-primary-dark); }
@media (min-width: 40rem) {
  .pattern-related-systems .related-grid { grid-template-columns: repeat(3, 1fr); }
}

.pattern-back-to-systems {
  text-align: center;
  padding-block: var(--space-8);
}
.pattern-back-to-systems a {
  font-size: var(--type-small);
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.125rem;
}
.pattern-back-to-systems a:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary-dark);
}

/* Pillar pipeline cross-link band */
.pattern-pipeline-crosslink {
  text-align: center;
}
.pattern-pipeline-crosslink h3 {
  font-size: var(--type-h2);
  margin-bottom: var(--space-3);
}
.pattern-pipeline-crosslink p { color: var(--color-text); max-width: 36rem; margin-inline: auto; }
.pattern-pipeline-crosslink .crosslink-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: var(--space-6);
  font-weight: 600;
  color: var(--color-primary-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.125rem;
}
.pattern-pipeline-crosslink .crosslink-cta:hover,
.pattern-pipeline-crosslink .crosslink-cta:focus-visible {
  border-bottom-color: var(--color-primary-dark);
}

/* ─── alebutech/pipeline ────────────────────────────────────────────
   Used on /systems/pipeline. Card grid of incoming systems. */
.pattern-pipeline-note {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
  color: var(--color-text);
  font-size: 1.0625rem;
}
.pattern-pipeline-list .pipeline-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
.pattern-pipeline-item {
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-md);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "modality status"
    "model    model"
    "meta     meta"
    "cta      cta";
}
.pattern-pipeline-item__modality {
  grid-area: modality;
  font-family: var(--font-heading);
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  align-self: center;
}
.pattern-pipeline-item__status {
  grid-area: status;
  justify-self: end;
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-base-alt);
  white-space: nowrap;
}
.pattern-pipeline-item__status--sourcing { background: var(--color-secondary); }
.pattern-pipeline-item__status--refurb { background: var(--color-accent-tint); }
.pattern-pipeline-item__status--ready { background: var(--color-primary-tint); color: var(--color-text); }
.pattern-pipeline-item__status--reserved { background: var(--color-border); color: var(--color-text-muted); }

.pattern-pipeline-item__model {
  grid-area: model;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: var(--leading-tight);
  margin: 0;
}
.pattern-pipeline-item__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  font-size: var(--type-small);
  color: var(--color-text);
}
.pattern-pipeline-item__meta dt {
  font-size: var(--type-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-right: 0.4em;
  display: inline;
}
.pattern-pipeline-item__meta dd { margin: 0; display: inline; }
.pattern-pipeline-item__meta div { display: inline-flex; align-items: baseline; gap: 0.4em; }
.pattern-pipeline-item__cta {
  grid-area: cta;
  justify-self: start;
  margin-top: var(--space-2);
  color: var(--color-primary-dark);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--type-small);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.125rem;
}
.pattern-pipeline-item__cta:hover,
.pattern-pipeline-item__cta:focus-visible { border-bottom-color: var(--color-primary-dark); }

@media (min-width: 56rem) {
  .pattern-pipeline-list .pipeline-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); }
}

.pattern-pipeline-catalog-link {
  text-align: center;
  font-size: var(--type-small);
  color: var(--color-text-muted);
}
.pattern-pipeline-catalog-link a {
  color: var(--color-text);
  text-decoration: none;
  border-bottom: var(--border-primary);
  margin-inline-start: 0.5em;
}
.pattern-pipeline-catalog-link a:hover { color: var(--color-primary-dark); }

/* === forms.css === */
/* Forms + buttons */

/* Field group */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.field + .field { margin-top: var(--space-5); }
.field label {
  font-size: var(--type-small);
  font-weight: 500;
  color: var(--color-text);
}
.field .required {
  color: var(--color-primary-dark);
  margin-inline-start: 0.1em;
}
.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field .hint { font-size: var(--type-micro); color: var(--color-text-muted); }

/* Inline newsletter form field uses compact styling */
.pattern-newsletter-embed form input {
  padding: 0.75rem 1rem;
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 1rem;
}
.pattern-newsletter-embed form input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Form actions */
.form-actions {
  margin-top: var(--space-6);
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  align-items: center;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.875rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-out),
              border-color var(--duration-base) var(--ease-out),
              color var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
  cursor: pointer;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-surface);
  border: 1px solid var(--color-primary);
}
.btn--primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: var(--color-surface); }

.btn--secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
}
.btn--secondary:hover { background: var(--color-text); color: var(--color-on-dark); }

.btn--ghost {
  background: transparent;
  color: var(--color-primary-dark);
  border: 1px solid var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

.btn--on-dark {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-surface);
}
.btn--on-dark:hover { background: var(--color-base); }

.btn--lg { padding: 1rem 1.75rem; font-size: 1.0625rem; }
.btn--full { width: 100%; }

/* Arrow affordance — no emoji, just a clean arrow */
.btn .arrow {
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-out);
}
.btn:hover .arrow { transform: translateX(2px); }

/* === tokens-variant-a.css (Variant A — Sunrise Horizon) === */
/* Variant A — "Sunrise Horizon" (warm complement)
   Loads AFTER styles.css. Adds Deep Navy + Sunrise Amber on top of
   the four locked brand hexes. Original tokens.css values stay intact;
   this file overrides only what changes and adds new accent variables. */

:root {
  /* New accents — additive, not replacing the four brand hexes */
  --color-depth: #0F3B5C;          /* deep navy — header, footer, dark sections */
  --color-accent: #E8995C;         /* sunrise amber — CTAs, decorative bands */
  --color-accent-dark: #D17F3F;    /* amber hover state */
  --color-accent-tint: #F2B98A;    /* amber lighter — focus/disabled */

  /* Re-derive focus ring around the accent so it harmonises with CTAs */
  --focus-ring: 0 0 0 3px rgba(232, 153, 92, 0.4);
}

/* ─── Header — deep navy band ────────────────────────────────────── */
.pattern-site-header {
  background: var(--color-depth);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pattern-site-header nav a { color: var(--color-on-dark); }
.pattern-site-header nav a:hover { color: var(--color-accent); }
.pattern-site-header.is-menu-open nav {
  background: var(--color-depth);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
.pattern-site-header .nav-toggle {
  color: var(--color-on-dark);
  border-color: rgba(255, 255, 255, 0.25);
}
.pattern-site-header .nav-toggle[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
}
.pattern-site-header .header-cta {
  background: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}
.pattern-site-header .header-cta:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-text);
}

/* ─── Hero — keep canvas, but accent the existing horizon gradient ─ */
.pattern-hero-credibility::before {
  background:
    linear-gradient(to bottom,
      transparent 0%,
      rgba(232, 153, 92, 0.18) 25%,    /* amber sunrise haze */
      rgba(176, 217, 232, 0.4) 60%,
      rgba(30, 155, 208, 0.22) 100%);
}

/* ─── Primary buttons — amber on near-black text ─────────────────── */
.btn--primary {
  background: var(--color-accent);
  color: var(--color-text);
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-text);
}

/* Ghost button picks up navy outline for contrast against amber siblings */
.btn--ghost {
  color: var(--color-depth);
  border-color: var(--color-depth);
}
.btn--ghost:hover {
  border-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
}

/* ─── Trust pillars — amber underline ────────────────────────────── */
.pattern-trust-pillars .pillar h3 {
  border-bottom-color: var(--color-accent);
}

/* ─── Modalities — amber separators ──────────────────────────────── */
.pattern-modalities .modality-line .sep { color: var(--color-accent); }

/* ─── Since-2003 — deep navy block, amber numeric ────────────────── */
.pattern-since-2003 {
  background: var(--color-depth);
  color: var(--color-on-dark);
  padding-block: clamp(4rem, 8vw + 1rem, 7rem);
}
.pattern-since-2003 .year { color: var(--color-accent); }
.pattern-since-2003 .year-prefix { color: var(--color-secondary); }
.pattern-since-2003 p { color: var(--color-on-dark); }

/* ─── PDF tease — keep the soft card, but amber CTA already inherits */
.pattern-pdf-tease { border-color: var(--color-depth); }
.pattern-pdf-tease h2 { color: var(--color-depth); }

/* ─── Newsletter embed — keep the soft sky-blue panel; refine button */
.pattern-newsletter-embed { background: var(--color-secondary); }

/* ─── Footer — deep navy instead of near-black ───────────────────── */
.pattern-site-footer {
  background: var(--color-depth);
}
.pattern-site-footer .footer-legal {
  border-top-color: rgba(255, 255, 255, 0.12);
}

/* Form field focus uses the amber tint */
.field input:focus,
.field textarea:focus,
.field select:focus,
.pattern-newsletter-embed form input:focus {
  border-color: var(--color-accent);
}

/* Required asterisk uses amber for visual rhyme with the CTA */
.field .required { color: var(--color-accent-dark); }

/* Inline link styling — keep readable on canvas, deepen with navy */
a { color: var(--color-depth); }
a:hover { color: var(--color-accent-dark); }

/* Direct contact list — borders pick up amber */
.contact-direct dd a { border-bottom-color: var(--color-accent); }
.contact-direct dd a:hover { color: var(--color-accent-dark); }

/* === Phase E.1 native-block refactor additions ===
   These classes replace inline styles that the static mockups used.
   Gutenberg strips inline `style` attributes on block edit, so we move
   those styles to dedicated modifier classes that survive the round-trip. */

/* Centers the hero-pillars eyebrow on inner-page heroes (mockups used inline display:flex; justify-content:center) */
.hero-pillars--center { display: flex; justify-content: center; flex-wrap: wrap; }

/* Confirmation panel spacing helpers (mockups used inline margin-bottom on hero-pillars) */
.hero-pillars--confirm { margin-bottom: var(--space-4); }
.hero-pillars--newsletter-page { margin-bottom: var(--space-6); }

/* Tight form-actions row (newsletter form used inline margin-top: var(--space-2)) */
.form-actions--tight { margin-top: var(--space-2); }

/* Spacing utilities used inline in mockup CTAs */
.u-mt-8 { margin-top: var(--space-8); }
.u-mt-6 { margin-top: var(--space-6); }

/* Native block compatibility — strip the default wp-block-group margins/padding
   from our brand sections so theme.css spacing wins. Gutenberg applies
   `wp-block-group` and `wp-block-heading` classes whether we want them or not. */
.wp-block-group.section { padding-block: clamp(3rem, 6vw + 1rem, 6rem); }
.wp-block-group.section--tight { padding-block: clamp(2rem, 4vw + 1rem, 4rem); }
.wp-block-group.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-gutter); }

/* Block-editor: kill the editor's default content-area max-width so our
   .container divs can stretch to the full viewport (the editor adds its own
   constrained-layout wrapper that fights our patterns at narrow widths). */
.editor-styles-wrapper .wp-block { max-width: none; }

/* v3f sign-off: footer reverts to near-black so the deep-navy "Since 2003"
   block flows into a darker footer below. Without this, tokens-variant-a's
   navy footer rule wins and the two sections blur together. */
.pattern-site-footer { background: var(--color-text); }

/* Kill block-gap between adjacent full-width brand sections.
   Gutenberg applies a default vertical gap between sibling blocks via
   --wp--style--block-gap, which lets the body off-white show through as a
   thin band between (e.g.) the amber Modalities section and the navy
   Since-2003 section. Brand sections own their own padding-block, so the
   external margin should always be zero. */
main.wp-block-group > section.section,
main#main > section.section,
.wp-block-post-content > section.section { margin-block: 0 !important; }

/* === MailerLite embedded forms: brand-style overrides ===
   MailerLite's embed ships Open Sans + tight padding + 400 px max-width inline.
   Override to match our .field / .btn / .pattern-pdf-capture-panel system.
   Selectors are class-based so all MailerLite forms (Downloads, Newsletter,
   Contact) inherit the same styling. !important is required to beat
   MailerLite's own !important declarations. */

/* Outer wrapper: turn the bare white box into our brand panel + fill column */
.ml-form-embedContainer .ml-form-embedWrapper.embedForm {
  max-width: 100% !important;
  background: var(--color-surface);
  border: var(--border-thin);
  border-radius: var(--radius-lg);
}
.ml-form-embedContainer .ml-form-embedBody {
  padding: clamp(2rem, 4vw, 2.5rem) !important;
}

/* Headline ("Get the PDF" etc.) — Inter, our type-h2 scale */
.ml-form-embedContainer .ml-form-embedContent h4 {
  font-family: var(--font-heading) !important;
  font-size: var(--type-h2) !important;
  font-weight: 600 !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-3) !important;
  line-height: var(--leading-heading) !important;
}

/* Subtext below the heading — body type, muted */
.ml-form-embedContainer .ml-form-embedContent p {
  font-family: var(--font-body) !important;
  font-size: var(--type-small) !important;
  color: var(--color-text-muted) !important;
  line-height: var(--leading-body) !important;
  margin-bottom: var(--space-6) !important;
}

/* Field labels — match .field label */
.ml-form-embedContainer .ml-form-embedBody .ml-block-form .ml-field-group label {
  font-family: var(--font-body) !important;
  font-size: var(--type-small) !important;
  font-weight: 500 !important;
  color: var(--color-text) !important;
  margin-bottom: var(--space-2) !important;
}

/* Inputs — match .field input */
.ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow input {
  font-family: var(--font-body) !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  color: var(--color-text) !important;
  background: var(--color-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-md) !important;
  padding: 0.75rem 1rem !important;
}

/* Field-row spacing — match .field + .field { margin-top: var(--space-5) } */
.ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow {
  margin: 0 0 var(--space-5) 0 !important;
}
.ml-form-embedContainer .ml-form-embedBody .ml-form-fieldRow.ml-last-item {
  margin-bottom: 0 !important;
}

/* Submit button — match .btn--primary.btn--lg.btn--full */
.ml-form-embedContainer .ml-form-embedBody .ml-form-embedSubmit { margin-top: var(--space-6) !important; }
.ml-form-embedContainer .ml-form-embedBody .ml-form-embedSubmit button {
  font-family: var(--font-heading) !important;
  font-size: 1.0625rem !important;
  font-weight: 500 !important;
  padding: 1rem 1.75rem !important;
  background: var(--color-accent) !important;
  color: var(--color-text) !important;
  border-radius: var(--radius-md) !important;
}
.ml-form-embedContainer .ml-form-embedBody .ml-form-embedSubmit button:hover {
  background: var(--color-accent-dark) !important;
}

/* === MailerLite width fix: force the embed to fill its grid column ===
   MailerLite's inline <style> sets width: 400px on .ml-form-embedWrapper.
   max-width:100% does NOT beat that — only width:100% does. Apply at every
   nested level so no inner wrapper re-narrows the form. */
.ml-form-embedContainer,
.ml-form-embedContainer .ml-form-align-center,
.ml-form-embedContainer .ml-form-embedWrapper,
.ml-form-embedContainer .ml-form-embedWrapper.embedForm,
.ml-form-embedContainer .ml-form-embedBody,
.ml-form-embedContainer .ml-form-embedContent,
.ml-form-embedContainer form,
.ml-form-embedContainer .ml-form-formContent,
.ml-form-embedContainer .ml-form-fieldRow,
.ml-form-embedContainer .ml-form-embedSubmit {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Reset MailerLite's text-align:center on the align wrapper so the heading,
   labels, and submit button left-align inside the panel. */
.ml-form-embedContainer .ml-form-align-center {
  text-align: left !important;
}

/* === v1.1.0 header nav refinements (deliverable-only — not in source patterns.css) ===
   - Contact lives in the nav list (so it shows in the mobile menu) but is hidden
     on desktop, where the standalone Contact button covers it.
   - The mobile toggle is an icon-only hamburger that swaps to an X when open. */
.pattern-site-header .nav-toggle {
  border: none;
  background: transparent;
  padding: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--color-on-dark);
  cursor: pointer;
}
.pattern-site-header .nav-toggle:focus-visible {
  outline: 2px solid var(--color-on-dark);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.pattern-site-header .nav-toggle .nav-toggle__icon { display: block; }
.pattern-site-header .nav-toggle .nav-toggle__icon--close { display: none; }
.pattern-site-header.is-menu-open .nav-toggle .nav-toggle__icon--open { display: none; }
.pattern-site-header.is-menu-open .nav-toggle .nav-toggle__icon--close { display: block; }

/* Contact-in-menu shows as a primary button only inside the mobile menu. */
@media (min-width: 48rem) {
  .pattern-site-header nav .nav-item--mobile { display: none; }
}

/* === v1.1.2 Systems dropdown — mobile readability ===
   Inside the open mobile menu the panel is dark navy (variant-a), but the
   dropdown sub-items default to dark text — force them light so they're
   legible. Desktop popover keeps its light background + dark text. */
.pattern-site-header.is-menu-open .nav-dropdown__item { color: var(--color-on-dark); }
.pattern-site-header.is-menu-open .nav-dropdown__item:hover,
.pattern-site-header.is-menu-open .nav-dropdown__item:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  border-left-color: var(--color-accent);
  color: var(--color-on-dark);
}