/* ==========================================================================
   Oakridge — Shared Styles
   1. Role aliases: --oak-* names resolve to theme.json presets, so Global
      Styles still re-skins everything.
   2. The global resets WordPress does not ship, scoped to our blocks.
   3. Layout + utility primitives shared by every section.
   ========================================================================== */

:root {

  /* --- colour primitives ------------------------------------------------ */
  --oak-color-forest-50:  var(--wp--preset--color--brand-light);
  --oak-color-forest-100: var(--wp--preset--color--brand-tint);
  --oak-color-forest-200: var(--wp--preset--color--brand-line);
  --oak-color-forest-300: var(--wp--preset--color--brand-pale);
  --oak-color-forest-400: var(--wp--preset--color--brand-soft);
  --oak-color-forest-600: var(--wp--preset--color--brand-mid);
  --oak-color-forest-700: var(--wp--preset--color--brand);
  --oak-color-forest-800: var(--wp--preset--color--brand-deep);
  --oak-color-forest-900: var(--wp--preset--color--brand-dark);
  --oak-color-forest-950: var(--wp--preset--color--brand-black);

  --oak-color-clay-50:  var(--wp--preset--color--accent-tint);
  --oak-color-clay-100: var(--wp--preset--color--accent-soft);
  --oak-color-clay-200: var(--wp--preset--color--accent-line);
  --oak-color-clay-400: var(--wp--preset--color--accent-light);
  --oak-color-clay-600: var(--wp--preset--color--accent);
  --oak-color-clay-700: var(--wp--preset--color--accent-deep);
  --oak-color-clay-800: var(--wp--preset--color--accent-darkest);

  --oak-color-white:    var(--wp--preset--color--base);
  --oak-color-grey-50:  var(--wp--preset--color--surface-muted);
  --oak-color-grey-100: var(--wp--preset--color--surface-soft);
  --oak-color-grey-300: var(--wp--preset--color--line);
  --oak-color-grey-400: var(--wp--preset--color--line-strong);
  --oak-color-grey-500: var(--wp--preset--color--text-muted);
  --oak-color-grey-600: var(--wp--preset--color--text-secondary);
  --oak-color-grey-900: var(--wp--preset--color--contrast);
  --oak-color-error:    var(--wp--preset--color--error);

  /* --- colour roles ----------------------------------------------------- */
  --oak-surface-page:        var(--oak-color-white);
  --oak-surface-muted:       var(--oak-color-grey-50);
  --oak-surface-sunken:      var(--oak-color-forest-50);
  --oak-surface-raised:      var(--oak-color-white);
  --oak-surface-inverse:     var(--oak-color-forest-900);
  --oak-surface-inverse-alt: var(--oak-color-forest-800);

  --oak-text-primary:        var(--oak-color-grey-900);
  --oak-text-secondary:      var(--oak-color-grey-600);
  --oak-text-muted:          var(--oak-color-grey-500);
  --oak-text-on-inverse:     var(--oak-color-white);
  --oak-text-on-inverse-dim: var(--oak-color-forest-200);
  --oak-text-brand:          var(--oak-color-forest-700);
  --oak-text-accent:         var(--oak-color-clay-700);

  --oak-border-subtle:  var(--oak-color-grey-300);
  --oak-border-strong:  var(--oak-color-grey-400);
  --oak-border-brand:   var(--oak-color-forest-200);
  --oak-border-inverse: var(--wp--custom--border-inverse);

  --oak-tint-light-soft:     var(--wp--custom--tint-light-soft);
  --oak-tint-light:          var(--wp--custom--tint-light);
  --oak-tint-light-strong:   var(--wp--custom--tint-light-strong);
  --oak-surface-glass:       var(--wp--custom--surface-glass);
  --oak-surface-glass-solid: var(--wp--custom--surface-glass-solid);
  --oak-scrim-forest-soft:   var(--wp--custom--scrim-forest-soft);
  --oak-scrim-forest:        var(--wp--custom--scrim-forest);
  --oak-scrim-forest-mid:    var(--wp--custom--scrim-forest-mid);
  --oak-scrim-forest-deep:   var(--wp--custom--scrim-forest-deep);
  --oak-scrim-caption:       var(--wp--custom--scrim-caption);

  --oak-action-primary-bg:         var(--oak-color-clay-600);
  --oak-action-primary-bg-hover:   var(--oak-color-clay-700);
  --oak-action-primary-text:       var(--oak-color-white);
  --oak-action-secondary-bg:       var(--oak-color-forest-700);
  --oak-action-secondary-bg-hover: var(--oak-color-forest-800);
  --oak-action-secondary-text:     var(--oak-color-white);
  --oak-action-ghost-border:       var(--oak-color-grey-300);
  --oak-action-ghost-text:         var(--oak-color-grey-900);
  --oak-action-ghost-bg-hover:     var(--oak-color-grey-100);

  --oak-focus-ring:        var(--oak-color-clay-600);
  --oak-focus-ring-invert: var(--oak-color-forest-300);

  /* --- typography ------------------------------------------------------- */
  --oak-font-sans:  var(--wp--preset--font-family--sans);
  --oak-font-serif: var(--wp--preset--font-family--serif);

  --oak-weight-regular:  400;
  --oak-weight-medium:   500;
  --oak-weight-semibold: 600;
  --oak-weight-bold:     700;
  --oak-weight-black:    800;

  --oak-text-3xs:     var(--wp--preset--font-size--xxxs);
  --oak-text-2xs:     var(--wp--preset--font-size--xxs);
  --oak-text-xs:      var(--wp--preset--font-size--xs);
  --oak-text-sm:      var(--wp--preset--font-size--sm);
  --oak-text-base:    var(--wp--preset--font-size--base);
  --oak-text-md:      var(--wp--preset--font-size--md);
  --oak-text-lg:      var(--wp--preset--font-size--lg);
  --oak-text-xl:      var(--wp--preset--font-size--xl);
  --oak-text-2xl:     var(--wp--preset--font-size--xxl);
  --oak-text-3xl:     var(--wp--preset--font-size--xxxl);
  --oak-text-4xl:     var(--wp--preset--font-size--xxxxl);
  --oak-text-display: var(--wp--preset--font-size--display);
  --oak-text-stat:    var(--wp--preset--font-size--stat);

  --oak-leading-tight:   var(--wp--custom--leading-tight);
  --oak-leading-snug:    var(--wp--custom--leading-snug);
  --oak-leading-normal:  var(--wp--custom--leading-normal);
  --oak-leading-relaxed: var(--wp--custom--leading-relaxed);
  --oak-leading-loose:   var(--wp--custom--leading-loose);

  --oak-tracking-tighter: var(--wp--custom--tracking-tighter);
  --oak-tracking-tight:   var(--wp--custom--tracking-tight);
  --oak-tracking-normal:  var(--wp--custom--tracking-normal);
  --oak-tracking-wide:    var(--wp--custom--tracking-wide);
  --oak-tracking-widest:  var(--wp--custom--tracking-widest);

  --oak-measure-narrow: var(--wp--custom--measure-narrow);
  --oak-measure-base:   var(--wp--custom--measure-base);
  --oak-measure-wide:   var(--wp--custom--measure-wide);

  /* --- space ------------------------------------------------------------ */
  --oak-space-3xs: var(--wp--preset--spacing--10);
  --oak-space-2xs: var(--wp--preset--spacing--20);
  --oak-space-xs:  var(--wp--preset--spacing--30);
  --oak-space-sm:  var(--wp--preset--spacing--40);
  --oak-space-md:  var(--wp--preset--spacing--50);
  --oak-space-lg:  var(--wp--preset--spacing--60);
  --oak-space-xl:  var(--wp--preset--spacing--70);
  --oak-space-2xl: var(--wp--preset--spacing--80);
  --oak-space-3xl: var(--wp--preset--spacing--90);
  --oak-space-4xl: var(--wp--preset--spacing--100);

  --oak-space-section:       var(--wp--custom--space-section);
  --oak-space-section-tight: var(--wp--custom--space-section-tight);
  --oak-space-gutter:        var(--wp--custom--space-gutter);

  /* --- layout ----------------------------------------------------------- */
  --oak-container-max:    var(--wp--custom--container-max);
  --oak-container-wide:   var(--wp--custom--container-wide);
  --oak-container-text:   var(--wp--custom--container-text);
  --oak-header-height:    var(--wp--custom--header-height);
  --oak-header-height-sm: var(--wp--custom--header-height-sm);

  /* --- radius / shadow / motion ----------------------------------------- */
  --oak-radius-xs:   var(--wp--custom--radius-xs);
  --oak-radius-sm:   var(--wp--custom--radius-sm);
  --oak-radius-md:   var(--wp--custom--radius-md);
  --oak-radius-lg:   var(--wp--custom--radius-lg);
  --oak-radius-xl:   var(--wp--custom--radius-xl);
  --oak-radius-pill: var(--wp--custom--radius-pill);

  --oak-shadow-xs: var(--wp--custom--shadow-xs);
  --oak-shadow-sm: var(--wp--custom--shadow-sm);
  --oak-shadow-md: var(--wp--custom--shadow-md);
  --oak-shadow-lg: var(--wp--custom--shadow-lg);
  --oak-shadow-focus:         var(--wp--custom--shadow-focus);
  --oak-shadow-focus-inverse: var(--wp--custom--shadow-focus-inverse);

  --oak-ease-out:    var(--wp--custom--ease-out);
  --oak-ease-in-out: var(--wp--custom--ease-in-out);
  --oak-duration-fast:   var(--wp--custom--duration-fast);
  --oak-duration-normal: var(--wp--custom--duration-normal);
  --oak-duration-slow:   var(--wp--custom--duration-slow);
  --oak-duration-reveal: var(--wp--custom--duration-reveal);

  /* --- decoration ------------------------------------------------------- */
  --oak-pattern-dot-size:    var(--wp--custom--pattern-dot-size);
  --oak-pattern-dot:         var(--wp--custom--pattern-dot);
  --oak-pattern-dot-inverse: var(--wp--custom--pattern-dot-inverse);

  --oak-z-base:    1;
  --oak-z-raised:  10;
  --oak-z-sticky:  60;
  --oak-z-header:  80;
  --oak-z-overlay: 100;
}


/* ==========================================================================
   Resets WordPress does not ship. Scoped to our own blocks.
   ========================================================================== */

/* The design's `*, *::before, *::after { box-sizing: border-box }` and
   `* { margin: 0 }`, scoped to our own sections so WordPress's admin bar and
   any core block outside them keep their defaults. Everything here is wrapped
   in :where() so it carries ZERO specificity: an unwrapped `[class*="oak-"] p`
   scores (0,1,1) and silently outranks the component rule `.oak-hero__lead`,
   which is how the hero lost its 32px lead spacing. */
:where([class*="oak-"], [class*="oak-"] *),
:where([class*="oak-"], [class*="oak-"] *)::before,
:where([class*="oak-"], [class*="oak-"] *)::after { box-sizing: border-box; }

:where([class*="oak-"], [class*="oak-"] *) { margin: 0; }

:where([class*="oak-"]) :where(img, picture, svg, video) { display: block; max-width: 100%; }

:where([class*="oak-"]) :where(img) { height: auto; }

:where([class*="oak-"]) :where(ul, ol) { list-style: none; padding: 0; }

:where([class*="oak-"]) :where(p) { text-wrap: pretty; }

:where([class*="oak-"]) :where(address) { font-style: normal; }

:where([class*="oak-"]) :where(button) { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

/* Form controls inherit the page's font and colour — WordPress ships no such
   reset, and without it every input keeps the UA's line-height: normal and
   sits 8px shorter than the design. */
:where([class*="oak-"]) :where(input, textarea, select) { font: inherit; color: inherit; }

:where([class*="oak-"]) :where(a) { color: inherit; text-decoration: none; }

:where([class*="oak-"]) :where(h1, h2, h3, h4) { text-wrap: balance; }


/* --- document-level behaviour the design depends on ---------------------- */

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Sticky header would otherwise cover every anchor target. */
  scroll-padding-top: calc(var(--oak-header-height) + var(--oak-space-md));
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* `clip`, not `hidden`: hidden would make body a scroll container and break
     the sticky header. */
  overflow-x: clip;
}

@media (max-width: 700px) {
  html { scroll-padding-top: calc(var(--oak-header-height-sm) + var(--oak-space-md)); }
}

:focus-visible {
  outline: none;
  box-shadow: var(--oak-shadow-focus);
  border-radius: var(--oak-radius-xs);
}

.oak-is-inverse :focus-visible { box-shadow: var(--oak-shadow-focus-inverse); }

::selection {
  background-color: var(--oak-color-forest-800);
  color: var(--oak-color-white);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ==========================================================================
   blockGap: our sections stack edge to edge, so no gap between them.
   Plain class selectors beat core's :where() rules.
   ========================================================================== */

.wp-site-blocks > [class*="oak-"],
.entry-content > [class*="oak-"],
.wp-block-post-content > [class*="oak-"] { margin-block-start: 0; margin-block-end: 0; }

.wp-site-blocks > .wp-block-template-part { margin-block-start: 0; margin-block-end: 0; }


/* ==========================================================================
   Layout primitives and utilities — ported verbatim from the static site's
   base.css by wp-build/tools/port_css.py (token + class rename only).
   ========================================================================== */

.oak-container {
  width: 100%;
  max-width: calc(var(--oak-container-max) + var(--oak-space-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--oak-space-gutter);
}

.oak-container--wide {
  max-width: calc(var(--oak-container-wide) + var(--oak-space-gutter) * 2);
}

.oak-container--text { max-width: calc(var(--oak-container-text) + var(--oak-space-gutter) * 2); }

.oak-section { padding-block: var(--oak-space-section); position: relative; }

.oak-section--tight { padding-block: var(--oak-space-section-tight); }

.oak-section--muted { background-color: var(--oak-surface-muted); }

.oak-section--sunken { background-color: var(--oak-surface-sunken); }

.oak-section--inverse {
  background-color: var(--oak-surface-inverse);
  color: var(--oak-text-on-inverse-dim);
}

.oak-section--inverse h2,
.oak-section--inverse h3,
.oak-section--inverse h4 { color: var(--oak-text-on-inverse); }


/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */

.oak-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.oak-skip-link {
  position: absolute;
  top: var(--oak-space-2xs);
  left: var(--oak-space-2xs);
  z-index: var(--oak-z-overlay);
  padding: var(--oak-space-2xs) var(--oak-space-sm);
  background-color: var(--oak-surface-inverse);
  color: var(--oak-text-on-inverse);
  border-radius: var(--oak-radius-sm);
  font-size: var(--oak-text-sm);
  font-weight: var(--oak-weight-semibold);
  transform: translateY(-160%);
  transition: transform var(--oak-duration-fast) var(--oak-ease-out);
}

.oak-skip-link:focus-visible { transform: translateY(0); }

.oak-lead {
  font-size: var(--oak-text-lg);
  line-height: var(--oak-leading-relaxed);
  color: var(--oak-text-secondary);
  max-width: var(--oak-measure-base);
}

.oak-section--inverse .oak-lead { color: var(--oak-text-on-inverse-dim); }

.oak-measure-narrow { max-width: var(--oak-measure-narrow); }
.oak-measure-base   { max-width: var(--oak-measure-base); }
.oak-measure-wide   { max-width: var(--oak-measure-wide); }


/* ==========================================================================
   Shared components used by more than one section — ported verbatim from
   components.css by wp-build/tools/port_css.py.
   ========================================================================== */

.oak-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.oak-icon--sm { width: 1em; height: 1em; }
.oak-icon--lg { width: 1.75rem; height: 1.75rem; }
.oak-icon--xl { width: 2.25rem; height: 2.25rem; }
.oak-icon--solid { fill: currentColor; stroke: none; }


/* --------------------------------------------------------------------------
   Eyebrow — small label above a heading
   -------------------------------------------------------------------------- */

.oak-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--oak-space-2xs);
  font-size: var(--oak-text-2xs);
  font-weight: var(--oak-weight-bold);
  letter-spacing: var(--oak-tracking-widest);
  text-transform: uppercase;
  color: var(--oak-text-brand);
  margin-bottom: var(--oak-space-sm);
}

.oak-eyebrow::before {
  content: "";
  width: 24px;
  height: 2px;
  background-color: var(--oak-color-clay-600);
  flex: none;
}

.oak-section--inverse .oak-eyebrow { color: var(--oak-color-forest-300); }
.oak-section--inverse .oak-eyebrow::before { background-color: var(--oak-color-clay-400); }


/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.oak-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oak-space-2xs);
  padding: 0.9375rem var(--oak-space-md);
  border-radius: var(--oak-radius-sm);
  font-size: var(--oak-text-sm);
  font-weight: var(--oak-weight-bold);
  letter-spacing: var(--oak-tracking-normal);
  line-height: 1.2;
  text-align: center;
  border: 1px solid transparent;
  transition: background-color var(--oak-duration-fast) var(--oak-ease-out),
              border-color var(--oak-duration-fast) var(--oak-ease-out),
              transform var(--oak-duration-fast) var(--oak-ease-out),
              box-shadow var(--oak-duration-fast) var(--oak-ease-out);
}

.oak-btn:hover { transform: translateY(-1px); }
.oak-btn:active { transform: translateY(0); }

.oak-btn--primary {
  background-color: var(--oak-action-primary-bg);
  color: var(--oak-action-primary-text);
  box-shadow: var(--oak-shadow-sm);
}

.oak-btn--primary:hover {
  background-color: var(--oak-action-primary-bg-hover);
  box-shadow: var(--oak-shadow-md);
}

.oak-btn--secondary {
  background-color: var(--oak-action-secondary-bg);
  color: var(--oak-action-secondary-text);
}

.oak-btn--secondary:hover { background-color: var(--oak-action-secondary-bg-hover); }

.oak-btn--ghost {
  background-color: transparent;
  border-color: var(--oak-action-ghost-border);
  color: var(--oak-action-ghost-text);
}

.oak-btn--ghost:hover {
  background-color: var(--oak-action-ghost-bg-hover);
  border-color: var(--oak-border-strong);
}

.oak-btn--on-dark {
  background-color: var(--oak-color-white);
  color: var(--oak-color-forest-900);
}

.oak-btn--on-dark:hover { background-color: var(--oak-color-forest-100); }

.oak-btn--outline-light {
  background-color: transparent;
  border-color: var(--oak-border-inverse);
  color: var(--oak-color-white);
}

.oak-btn--outline-light:hover { background-color: var(--oak-tint-light-soft); }

.oak-btn--lg { padding: 1.125rem var(--oak-space-lg); font-size: var(--oak-text-md); }
.oak-btn--block { display: flex; width: 100%; }


/* Text link with arrow */
.oak-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--oak-space-3xs);
  font-weight: var(--oak-weight-semibold);
  font-size: var(--oak-text-sm);
  color: var(--oak-text-accent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--oak-duration-fast) var(--oak-ease-out),
              gap var(--oak-duration-fast) var(--oak-ease-out);
}

.oak-link-arrow:hover {
  border-bottom-color: currentColor;
  gap: var(--oak-space-2xs);
}

.oak-section--inverse .oak-link-arrow { color: var(--oak-color-forest-200); }


/* --------------------------------------------------------------------------
   Phone display — the primary conversion element
   -------------------------------------------------------------------------- */

.oak-phone-link {
  display: inline-flex;
  align-items: center;
  gap: var(--oak-space-2xs);
  font-weight: var(--oak-weight-bold);
  letter-spacing: var(--oak-tracking-tight);
  color: var(--oak-text-primary);
  transition: color var(--oak-duration-fast) var(--oak-ease-out);
}

.oak-phone-link:hover { color: var(--oak-text-accent); }

.oak-phone-link--xl {
  font-size: var(--oak-text-2xl);
  letter-spacing: var(--oak-tracking-tighter);
}

.oak-phone-link--xl .oak-icon { color: var(--oak-color-clay-600); }

.oak-section--inverse .oak-phone-link { color: var(--oak-color-white); }
.oak-section--inverse .oak-phone-link:hover { color: var(--oak-color-forest-200); }


/* --------------------------------------------------------------------------
   Badge / pill
   -------------------------------------------------------------------------- */

.oak-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--oak-space-3xs);
  padding: var(--oak-space-3xs) var(--oak-space-xs);
  border-radius: var(--oak-radius-pill);
  font-size: var(--oak-text-3xs);
  font-weight: var(--oak-weight-bold);
  letter-spacing: var(--oak-tracking-wide);
  text-transform: uppercase;
  background-color: var(--oak-color-forest-100);
  color: var(--oak-color-forest-700);
}

.oak-badge--accent {
  background-color: var(--oak-color-clay-100);
  color: var(--oak-color-clay-700);
}

.oak-badge--on-dark {
  background-color: var(--oak-tint-light-strong);
  color: var(--oak-color-white);
}


/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */

.oak-card {
  background-color: var(--oak-surface-raised);
  border: 1px solid var(--oak-border-subtle);
  border-radius: var(--oak-radius-md);
  box-shadow: var(--oak-shadow-sm);
}

.oak-card--flush { padding: 0; overflow: hidden; }
.oak-card--pad { padding: var(--oak-space-md); }
.oak-card--pad-lg { padding: clamp(var(--oak-space-md), 2.4vw, var(--oak-space-xl)); }

.oak-card--inverse {
  background-color: var(--oak-surface-inverse);
  border-color: transparent;
  color: var(--oak-text-on-inverse-dim);
}

.oak-card--inverse h3, .oak-card--inverse h4 { color: var(--oak-text-on-inverse); }


/* --------------------------------------------------------------------------
   Trust bar — small stat / proof row
   -------------------------------------------------------------------------- */

.oak-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--oak-space-xs) var(--oak-space-md);
  font-size: var(--oak-text-xs);
  color: var(--oak-text-secondary);
}

.oak-trust-row li {
  display: flex;
  align-items: center;
  gap: var(--oak-space-3xs);
}

.oak-trust-row .oak-icon { color: var(--oak-color-forest-600); }


/* --------------------------------------------------------------------------
   Stat
   -------------------------------------------------------------------------- */

.oak-stat__value {
  display: block;
  font-size: var(--oak-text-stat);
  font-weight: var(--oak-weight-black);
  letter-spacing: var(--oak-tracking-tighter);
  line-height: 1;
  color: var(--oak-text-brand);
}

.oak-stat__label {
  display: block;
  margin-top: var(--oak-space-2xs);
  font-size: var(--oak-text-xs);
  line-height: var(--oak-leading-normal);
  color: var(--oak-text-secondary);
}

.oak-section--inverse .oak-stat__value { color: var(--oak-color-white); }
.oak-section--inverse .oak-stat__label { color: var(--oak-text-on-inverse-dim); }


/* --------------------------------------------------------------------------
   Section header — two-part, heading left / note right
   -------------------------------------------------------------------------- */

.oak-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--oak-space-md) clamp(var(--oak-space-lg), 6vw, var(--oak-space-3xl));
  align-items: end;
  margin-bottom: clamp(var(--oak-space-xl), 4vw, var(--oak-space-2xl));
}

.oak-section-head__title { max-width: 18ch; }

.oak-section-head__note {
  font-size: var(--oak-text-md);
  line-height: var(--oak-leading-relaxed);
  color: var(--oak-text-secondary);
  max-width: 46ch;
}

.oak-section--inverse .oak-section-head__note { color: var(--oak-text-on-inverse-dim); }

@media (max-width: 860px) {
  .oak-section-head { grid-template-columns: 1fr; align-items: start; }
  .oak-section-head__title { max-width: 22ch; }
}


/* --------------------------------------------------------------------------
   Scroll reveal
   The hidden state applies ONLY after the behaviour snippet confirms it is
   running (it stamps data-oak-reveal="on" on <html> as its first statement).
   If that snippet is ever auto-disabled, every revealed element stays visible
   instead of the page going blank.
   -------------------------------------------------------------------------- */

[data-oak-reveal="on"] .oak-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--oak-duration-reveal) var(--oak-ease-out),
              transform var(--oak-duration-reveal) var(--oak-ease-out);
}

[data-oak-reveal="on"] .oak-reveal[data-revealed="true"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-oak-reveal="on"] .oak-reveal { opacity: 1; transform: none; }
}