/*
Theme Name: Alebu Tech
Theme URI: https://alebutech.com
Author: Pio @ Agentic Marketing Solutions
Description: Custom block-pattern theme for Alebu Tech — pre-used radiology and nuclear medicine systems, since 2003.
Version: 0.2.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alebutech
Tags: block-patterns, classic, custom
*/

/* ============================================================
   Generated by skills/wp-build — do not edit by hand.
   Source: clients/alebutech/web/mockups/styles/
   ============================================================ */

/* -- Design tokens (from 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 typography & layout (from 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;
}


/* -- Forms (from 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); }


/* -- Block patterns (from 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);
}

.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.7725rem; }
.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); }


/* -- Palette variant overrides (from tokens-variant-a.css)
      Loaded LAST so its pattern-level rules win the cascade. -- */
/* 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); }


/* -- WP-specific resets -- */
.wp-block-button__link {
  font-family: var(--font-heading);
  font-weight: 500;
}
.skip-link.screen-reader-text:focus {
  background: var(--color-primary);
  color: var(--color-on-dark);
  padding: var(--space-3) var(--space-4);
  z-index: 100;
}
.alignwide { max-width: var(--container-max); margin-inline: auto; }
.alignfull { width: 100%; max-width: none; }