@charset "UTF-8";
/* ==========================================================================
   sg2026 — Siegel Executive Coaching
   Joomla 5/6 site template stylesheet. Concept 1C "Ledger".

   This is the ONLY stylesheet shipped with the template, and it is
   deliberately uncompressed and sectioned so it can be read and edited
   directly. Do NOT add a minified twin.

   Site-specific and one-off overrides belong in css/local.css, which the
   template loads after this file if it exists. local.css is never shipped
   and never overwritten by a template update — put your changes there.

   CONTENTS
     1.  Fonts
     2.  Tokens
     3.  Base
     4.  Header, navigation and off-canvas
     5.  Hero, and the band above it
     6.  Layout — body grid, main column, sticky rail
     7.  Components
     8.  Footer
     9.  Joomla system output — messages, breadcrumbs, articles, pagination
     10. System pages — error and offline
     11. Responsive
     12. Motion preference
   ========================================================================== */


/* ==========================================================================
   1. FONTS
   Source Serif 4, self-hosted, latin subset. Google serves this family as a
   VARIABLE font (wght axis 200-900), so two files cover all three faces the
   design calls for (400, 600, 400 italic) rather than three static ones.
   No third-party request at runtime.
   ========================================================================== */

/* NOTE: the weight range below is the one place in this file where a literal
   value is permitted in a rule. @font-face descriptors cannot read custom
   properties — they resolve against elements, and an @font-face block is not
   one. Everywhere else, use var(--token). */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-roman.woff2") format("woff2-variations"),
       url("../fonts/source-serif-4-roman.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-serif-4-italic.woff2") format("woff2-variations"),
       url("../fonts/source-serif-4-italic.woff2") format("woff2");
}


/* ==========================================================================
   2. TOKENS
   Every value in this stylesheet is a token or built from one.
   Do not hard-code hexes below this block.

   Palette rationale: the three inks are sampled from assets the client
   cannot change (the sunset hero photograph and the maple leaf), so the
   template can never drift out of step with its own photography.
   ========================================================================== */

:root {
  /* Ground */
  --color-bg: #f3f2f2;              /* page ground ("paper") — the only background on the site */
  --color-surface: #eae9e9;         /* tinted panel — used once, for the PDF download card */
  --color-text: #201e1d;            /* headings, masthead, nav */

  /* Interaction */
  --color-accent: #0088b0;          /* sky cyan — UI chrome, buttons, active nav. NOT body-size links */
  --color-accent-600: #1186ac;      /* hover on the accent fill */
  --color-accent-700: #006786;      /* accent at body-copy size — this is the link colour */
  --color-accent-2: #d6006c;        /* cloud magenta — link hover only, never beside cyan */
  --color-on-accent: #ffffff;       /* text on any accent fill */

  /* Decoration */
  --color-process-yellow: #edbb00;  /* leaf gold — 1.9:1 on paper. DECORATIVE ONLY.
                                       Bullets, section numerals, the card's left edge.
                                       Never text, never an icon that carries meaning. */

  /* Neutrals */
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;     /* hairlines */
  --color-neutral-600: #7d7979;     /* meta labels, copyright — 3.9:1, large/non-text only */
  --color-neutral-700: #605d5d;     /* footer links, captions, the signature */
  --color-neutral-800: #444141;     /* secondary body */
  --color-neutral-900: #2d2b2b;     /* body copy */

  /* Type */
  --font-heading: "Source Serif 4", Georgia, serif;
  --font-body: "Source Serif 4", Georgia, serif;

  /* Spacing — Broadsheet's 1.25x scale */
  --space-none: 0;
  --space-1: 5px;  --space-2: 10px; --space-3: 15px;
  --space-4: 20px; --space-6: 30px; --space-8: 40px;

  /* Radius — square corners throughout; this is a newsprint system */
  --radius-none: 0;         /* 1C is a newsprint system — square corners */
  --radius-sm: 1px; --radius-md: 2px; --radius-lg: 4px;

  /* Grid */
  --gutter: 64px;
  --rail-width: 268px;
  --rail-gap: 56px;
  --header-height: 76px;
  --brand-h: 26px;           /* masthead wordmark cap height */

  /* Type — sizes.
     Every font-size, line-height, letter-spacing and font-weight in this
     stylesheet references one of these. Never write a literal value into a
     rule: change the scale here and the whole site follows, including the
     responsive steps at the bottom of section 11, which redefine these
     tokens rather than overriding individual properties. */
  --fs-hero: 54px;            /* hero h1 */
  --fs-hero-short: 40px;      /* inner-page hero h1, system pages */
  --fs-hero-sub: 21px;
  --fs-h2: 34px;
  --fs-h2-inner: 28px;        /* inner-page h2, Joomla page-header */
  --fs-h3: 24px;
  --fs-h4: 19px;
  --fs-lead: 24px;
  --fs-signature: 30px;
  --fs-subhead: 21px;
  --fs-numeral: 26px;         /* section numerals */
  --fs-kicker: 12px;
  --fs-body: 17px;            /* body copy — drops to 16px on mobile */
  --fs-list: 17px;            /* bullet lists and question rows; held at 17px
                                 on mobile, unlike --fs-body */
  --fs-input: 17px;           /* form controls; 16px+ avoids iOS zoom-on-focus */
  --fs-alert-title: 17px;
  --fs-table: 16px;
  --fs-btn: 18px;
  --fs-nav: 15px;             /* header navigation */
  --fs-cta: 15px;             /* header Contact button */
  --fs-offcanvas: 20px;
  --fs-offcanvas-sub: 17px;
  --fs-icon-btn: 26px;        /* off-canvas close glyph */
  --fs-alert-close: 20px;
  --fs-ui: 15px;              /* form labels, pagination */
  --fs-rail: 15px;            /* rail body copy and plain rail links */
  --fs-rail-link: 16px;       /* rail jump links — one step up from --fs-rail */
  --fs-rail-label: 16px;
  --fs-download-title: 18px;
  --fs-quote: 19px;           /* testimonial body — a step above body copy */
  --fs-quote-by: 15px;        /* testimonial attribution */
  --fs-quote-mark: 64px;      /* the decorative opening quotation mark */
  --fs-footer: 14px;
  --fs-meta: 13px;            /* copyright, captions, breadcrumbs, meta rows */
  --fs-meta-sm: 12px;

  /* Type — line heights */
  --flh-hero: 1.04;
  --flh-hero-short: 1.08;
  --flh-hero-sub: 1.4;
  --flh-h2: 1.12;
  --flh-h2-inner: 1.15;
  --flh-h3: 1.2;
  --flh-h4: 1.3;
  --flh-body: 1.62;
  --flh-lead: 1.5;
  --flh-list: 1.5;
  --flh-subhead: 1.35;
  --flh-quote: 1.6;
  --flh-rail: 1.55;
  --flh-numeral: 1.1;
  --flh-offcanvas: 1.3;
  --flh-none: 1;

  /* Type — weights */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Type — letter spacing */
  --ls-hero: -0.022em;
  --ls-h2: -0.018em;
  --ls-h2-inner: -0.015em;
  --ls-wide: .2em;            /* uppercase labels and kickers */
  --ls-meta: .14em;

  /* Hero.
     --hero-h is written onto the <section> by index.php from the Hero height
     field, so it is a per-style value and the number below is only what
     applies if that attribute is ever missing. --hero-scale is the responsive
     step-down: the field holds a desktop height and this token shrinks it,
     rather than each breakpoint restating a height of its own.
     --hero-bg, --hero-gradient-from/-to and --hero-title-color are likewise
     overridden per style; these are the values used when the corresponding
     template parameter is left empty. */
  --above-hero-py: 24px;   /* the band between the header and the hero */
  --hero-h: 380px;
  --hero-scale: 1;
  --hero-bg: var(--color-text);
  --hero-gradient-angle: 135deg;   /* fixed for now; see the TODO in index.php */
  --hero-gradient-from: var(--color-text);
  --hero-gradient-to: var(--color-accent);
  --hero-title-color: var(--color-on-accent);
  --hero-sub-opacity: .9;          /* the subtitle tracks the title colour */
  --hero-scrim-angle: 95deg;
  --hero-scrim-from: rgba(16,18,28,.72);
  --hero-scrim-mid: rgba(16,18,28,.24);
  --hero-scrim-to: rgba(16,18,28,0);
  --hero-scrim-mid-stop: 66%;

  /* Component metrics */
  --offcanvas-row: 48px;      /* minimum drawer row height / touch target */
  --offcanvas-pad: 11px;      /* with --flh-offcanvas gives a 48px single-line row */
  /* Body-copy measure. `none` lets paragraphs and lists fill their column,
     so a page with no sidebar reads edge to edge instead of wrapping short
     and leaving the right half of the main column empty. Headings, tables,
     figures and cards were never capped, so capping only the prose is what
     made that gap look ragged rather than intentional.
     Set this in local.css to reintroduce a limit site-wide; every prose rule
     reads this one token. Use an ABSOLUTE length — 44rem is a comfortable
     line — and not ch or em: the rules that read this token are set at three
     different sizes (body 17px, quotation 19px, attribution 15px), so a
     font-relative cap resolves to a different width in each and the
     testimonial attribution stops short of the quotation it belongs to.
     Deliberate per-component measures — the hero, the lead-in, the quotation
     block — set their own width and are unaffected. */
  --measure: none;

  --quote-indent: 56px;      /* text clearance beside the quotation mark */
  --quote-measure: 760px;    /* one measure for quote AND attribution, so the
                                attribution right-aligns to the text's edge
                                rather than to the far side of the column */
  --leaf-mark: 26px;         /* decorative leaf beside the rail CTA note */
  --btn-sm-py: 7px;          /* compact button — the masthead Contact link */
  --btn-sm-px: 14px;

  --rail-block-gap: 26px;   /* between items inside one rail module */
  --rail-label-gap: 8px;    /* between a rail label and the list it introduces */
  --section-gap: 56px;
  --numeral-col: 64px;
}


/* ==========================================================================
   3. BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* The closed off-canvas drawer is parked beyond the right edge. `clip`
     contains it without establishing a scroll container — `hidden` would, and
     that silently breaks the sticky header and sticky rail. */
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-neutral-900);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--flh-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0;
}
h1 { font-size: var(--fs-hero); line-height: var(--flh-hero); letter-spacing: var(--ls-hero); }
h2 { font-size: var(--fs-h2); line-height: var(--flh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--flh-h3); }
h4 { font-size: var(--fs-h4); line-height: var(--flh-h4); }

p { margin: 0 0 var(--space-3); text-wrap: pretty; max-width: var(--measure); }

/* LINK AFFORDANCE.
   No resting underline. Links are carried by colour, plus size and weight
   where they form a list (see the rail's jump links). Content links pick up
   an underline on hover and on keyboard focus so the target is confirmed
   before the click. */
a {
  color: var(--color-accent-700);
  text-decoration: none;
  transition: color 120ms ease;
}
a:hover { color: var(--color-accent-2); }

/* Inside article text, confirm on hover/focus. */
.sec-main p a:hover,
.sec-main p a:focus-visible,
.sec-main li a:hover,
.sec-main li a:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

img { max-width: 100%; height: auto; }

/* The sticky header must never cover a focused element or an anchor target */
h1, h2, h3, [id] { scroll-margin-top: calc(var(--header-height) + 10px); }

.container {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

/* Skip link — first focusable element on the page */
.sec-skip {
  position: absolute; left: var(--space-2); top: -100px; z-index: 20;
  background: var(--color-text); color: var(--color-bg);
  padding: var(--space-2) var(--space-4);
}
.sec-skip:focus { top: var(--space-2); color: var(--color-bg); }

/* Buttons — square corners, no elevation */
.btn {
  display: inline-block; font-family: var(--font-body); font-size: var(--fs-btn);
  padding: var(--space-1); border: 0; border-radius: var(--radius-none); cursor: pointer;
  margin: var(--space-2) 0;
  text-align: center; transition: background 150ms ease;
}
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-on-accent); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-block { display: block; width: 100%; }

/* Compact variant, for buttons that sit inside dense chrome such as the
   masthead. Resets .btn's vertical margin, which exists for buttons in flowing
   content and would otherwise push the header row out of alignment. */
.btn-sm {
  font-size: var(--fs-cta);
  padding: var(--btn-sm-py) var(--btn-sm-px);
  margin: 0;
  white-space: nowrap;
}

/* The compact box is under the 44px minimum touch target, so extend the hit
   area with an overlay rather than growing the button — the painted box stays
   exactly as drawn. */
.btn-sm { position: relative; }
.btn-sm::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 44px;
}


/* ==========================================================================
   4. HEADER, NAVIGATION AND OFF-CANVAS
   The header separates from the page with a 1px hairline, never a shadow.
   ========================================================================== */

.sec-header {
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--color-neutral-300);
}

.sec-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
  padding: 14px var(--gutter);
  transition: padding 180ms ease;
}

/* The wordmark must be able to give up width. With `flex: none` and a fixed
   height it forced the burger off-screen on a 320px phone. Capping by
   max-height AND max-width lets it scale down only when the bar runs out of
   room, and never distorts. */
.sec-brand { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.sec-brand img {
  height: auto; width: auto;
  max-height: var(--brand-h); max-width: 100%;
  transition: max-height 180ms ease;
}

/* Condensed state — added by JS after 120px of scroll */
.sec-header.is-condensed .sec-header__inner { padding-block: 8px; }
.sec-header.is-condensed .sec-brand img { max-height: 22px; }

/* Primary nav. Links must never break mid-label. */
.sec-nav ul {
  display: flex; gap: 14px; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.sec-nav li { position: relative; }
.sec-nav a {
  display: inline-block;
  color: var(--color-text); font-size: var(--fs-nav);
  white-space: nowrap; padding: 4px 0;
}
.sec-nav a:hover { color: var(--color-accent-700); }
.sec-nav .current > a,
.sec-nav [aria-current="page"] { color: var(--color-accent); }

/* Dropdowns. NOTE: these also require the Joomla menu module setting
   "Show Sub-menu Items = Yes" and "End Level = All" — with the default "No",
   Joomla only renders children for the active branch and no CSS can fix it. */
.sec-nav ul ul {
  position: absolute; top: 100%; left: 0; z-index: 10;
  display: block; min-width: 200px; padding: 8px 0;
  flex-direction: column; gap: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-neutral-300);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
.sec-nav li:hover > ul,
.sec-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.sec-nav ul ul a { display: block; padding: 6px 16px; white-space: nowrap; }

/* Header CTA — kept out of the menu position so it survives the nav collapse */
/* CONTACT MENU ITEM, styled as a button in the masthead only.
   Opt-in and location-scoped: set Link Class = `menu_contact` on the Contact
   menu item (Menus > item > Link Type > Link Class). The same menu module can
   then be used in the header and the footer — here it is a button, in the
   footer it is an ordinary footer link, because this rule is scoped to
   .sec-header and nothing else.

   Specificity is deliberately above `.sec-nav [aria-current="page"]` so the
   label stays white when Contact is the current page, instead of turning
   accent-on-accent. */
.sec-header .sec-nav a.menu_contact {
  position: relative;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: var(--fs-cta);
  padding: var(--btn-sm-py) var(--btn-sm-px);
  white-space: nowrap;
}
.sec-header .sec-nav a.menu_contact:hover  { background: var(--color-accent-600); color: var(--color-on-accent); }
.sec-header .sec-nav a.menu_contact:active { background: var(--color-accent-700); }

/* 44px hit area without growing the painted box. */
.sec-header .sec-nav a.menu_contact::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* `header-cta` is the MOBILE home for the Contact button.
   Hidden on desktop, where the Contact menu item carries the button instead —
   otherwise the two would render side by side. It reappears at exactly the
   breakpoint the navigation collapses, so the button never leaves the bar.
   The position applies no styling of its own to whatever is placed in it. */
.sec-header-cta { display: none; align-items: center; }
.sec-header-cta p { margin: 0; max-width: none; }

/* Burger — 44x44 hit area at every width */
.sec-burger {
  display: none; width: 44px; height: 44px; flex: none;
  background: none; border: 0; padding: 10px; cursor: pointer;
}
.sec-burger__box,
.sec-burger__box::before,
.sec-burger__box::after {
  display: block; width: 22px; height: 2px;
  background: var(--color-text); content: "";
  transition: transform 180ms ease;
}
.sec-burger__box::before { transform: translateY(-7px); }
.sec-burger__box::after  { transform: translateY(5px); }

/* Off-canvas drawer — slides from the right, full height */
.sec-offcanvas {
  position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); z-index: 30;
  background: var(--color-bg);
  padding: var(--space-8) var(--space-6);
  transform: translateX(100%);
  transition: transform 220ms ease;
  overflow-y: auto;
}
.sec-offcanvas[hidden] { display: block; visibility: hidden; }
.sec-offcanvas.is-open { transform: none; visibility: visible; }
.sec-offcanvas ul { list-style: none; margin: 0; padding: 0; }
/* A fixed 48px line-height turned every wrapped label into what looked like
   two separate menu items. Row height now comes from padding plus a normal
   line-height, so a long label wraps as one item and still clears 48px. */
.sec-offcanvas a {
  display: block;
  font-size: var(--fs-offcanvas);
  line-height: var(--flh-offcanvas);
  padding: var(--offcanvas-pad) 0;
  min-height: var(--offcanvas-row);
  color: var(--color-text);
}
.sec-offcanvas a:hover { color: var(--color-accent-700); }
.sec-offcanvas ul ul { padding-left: var(--space-4); }
.sec-offcanvas ul ul a { font-size: var(--fs-offcanvas-sub); }

.sec-offcanvas__close {
  position: absolute; top: var(--space-3); right: var(--space-3);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  font-size: var(--fs-icon-btn); line-height: var(--flh-none); color: var(--color-text);
}

.sec-backdrop {
  position: fixed; inset: 0; z-index: 25;
  background: rgba(16, 18, 28, .45);
  opacity: 0; visibility: hidden;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.sec-backdrop.is-open { opacity: 1; visibility: visible; }

/* Applied to <body> while the drawer is open, to lock background scroll */
body.sec-no-scroll { overflow: hidden; }


/* ==========================================================================
   5. HERO, AND THE BAND ABOVE IT
   Template-owned region, not a module — it renders on every page and the
   title comes from the page.

   Which of the four renderings applies is a template-style parameter (Hero
   rendering), and index.php writes the chosen height and colours onto the
   section as custom properties. `hide` emits no section at all, so there is
   no rule for it here.

   The height is a min-height, not a height: the section centres its text with
   flexbox and grows if the heading needs more room, so a short hero on a
   narrow screen wraps instead of clipping its own title.

   The 152%/-26% image overscan is what lets the parallax translate without
   exposing an edge; do not reduce it if you raise the parallax rate.
   ========================================================================== */

/* The above-hero band. Full-bleed like the hero, with the site container
   inside it so a module here lines up with the rest of the page. index.php
   renders it on the Home layout only, and only when the position holds a
   module, so there is no empty state to style around.

   Deliberately plain: it carries the page ground and the vertical rhythm and
   nothing else. Give the module a Module Class, or write to css/local.css, to
   make it look like anything in particular — do NOT style it by position
   name. */
.sec-above-hero {
  background: var(--color-bg);
  padding-block: var(--above-hero-py);
}

/* Module prose brings its own trailing margin; without this it stacks on top
   of the band's own padding and the gap above the hero doubles. */
.sec-above-hero > .container > :last-child { margin-bottom: var(--space-none); }

.sec-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: calc(var(--hero-h) * var(--hero-scale));
  overflow: hidden;
  background-color: var(--hero-bg);
}

/* Fixed angle, two stops. Both colours fall back to tokens, so a gradient
   with only one field filled still renders. */
.sec-hero--gradient {
  background-image: linear-gradient(var(--hero-gradient-angle),
                                    var(--hero-gradient-from),
                                    var(--hero-gradient-to));
}

.sec-hero__img {
  position: absolute; top: -26%; left: 0; width: 100%; height: 152%;
  object-fit: cover; object-position: 50% 46%;
  will-change: transform;
}

/* Angled, not flat — the type side stays dark while the sunset stays
   legible on the right. Guarantees >= 7:1 behind the h1. Photographic
   rendering only: a solid or gradient hero is a colour the site owner chose
   outright and gets no overlay, so choose one dark enough for the heading.
   Re-test if the hero image is ever swapped through the template param. */
.sec-hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(var(--hero-scrim-angle),
                              var(--hero-scrim-from),
                              var(--hero-scrim-mid) var(--hero-scrim-mid-stop),
                              var(--hero-scrim-to));
}

/* In normal flow, not absolutely positioned — that is what lets the section
   grow rather than clip when the heading is taller than the set height. */
.sec-hero__text { position: relative; width: 100%; }

.sec-hero__text h1 { color: var(--hero-title-color); max-width: 15ch; }
.sec-hero__sub {
  margin: 14px 0 0; font-size: var(--fs-hero-sub); line-height: var(--flh-hero-sub); font-style: italic;
  color: var(--hero-title-color);
  opacity: var(--hero-sub-opacity);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  max-width: none;
}
.sec-hero--short h1 {
  font-size: var(--fs-hero-short); line-height: var(--flh-hero-short); letter-spacing: var(--ls-h2);
  max-width: 24ch;
}


/* ==========================================================================
   6. LAYOUT — body grid, main column, sticky rail
   ========================================================================== */

.sec-body {
  display: grid;
  grid-template-columns: 1fr var(--rail-width);
  gap: var(--rail-gap);
}
.sec-body--wide { grid-template-columns: 1fr; }

.sec-main { counter-reset: sec; min-width: 0; }
.sec-main > * { min-width: 0; }

/* Numbered sections.
   The 01/02/03 marks are generated here with a CSS counter, never authored
   into the article, and they are aria-hidden. The selector is a descendant
   selector on purpose: Joomla wraps component output in a div, so authored
   <section> elements are grandchildren of .sec-main, not children. */
.sec-main section { padding-top: var(--section-gap); }

.sec-numbered .sec-main section {
  display: grid;
  grid-template-columns: var(--numeral-col) 1fr;
  gap: 24px;
}
.sec-numbered .sec-main section::before {
  content: counter(sec, decimal-leading-zero);
  counter-increment: sec;
  font-size: var(--fs-numeral); line-height: var(--flh-numeral);
  color: var(--color-process-yellow);
  font-variant-numeric: tabular-nums;
}
.sec-numbered .sec-main section > * { min-width: 0; }

/* Module regions in the content column (above-content / below-content) sit on
   the same grid as the sections, with an empty numeral cell, so a plain
   Custom HTML module lines up with the article text and needs no wrapper
   markup of its own. */
.sec-main .sec-region { padding-top: var(--section-gap); }
.sec-numbered .sec-main .sec-region {
  display: grid;
  grid-template-columns: var(--numeral-col) 1fr;
  gap: 24px;
}
.sec-numbered .sec-main .sec-region::before { content: ""; }
.sec-numbered .sec-main .sec-region > * { min-width: 0; }

/* The lead paragraph block ("Hi, I'm Pat Siegel") leaves the numeral empty */
.sec-numbered .sec-main section.sec-section--unnumbered::before {
  content: "";
  counter-increment: none;
}

/* Headings in the main column open a gap before whatever follows them.
   Components that carry their own top margin (.sec-list, .sec-split,
   .sec-questions) collapse against this rather than doubling it, so every
   heading gets the same 20px of air whether a list or a paragraph is next. */
.sec-main h2,
.sec-main h3 { margin-bottom: var(--space-4); }

/* Inner pages: counter off, numeral column removed, smaller h2 */
.sec-layout-default .sec-main h2 { font-size: var(--fs-h2-inner); line-height: var(--flh-h2-inner); letter-spacing: var(--ls-h2-inner); }

/* Sticky rail */
.sec-rail {
  position: sticky; top: var(--header-height); align-self: start;
  padding-top: 44px;
  display: flex; flex-direction: column; gap: 26px;
  /* Base type for the whole column, inherited rather than re-declared per
     element — so a module's own styles never have to out-specify the rail. */
  font-size: var(--fs-rail);
  line-height: var(--flh-rail);
}
/* Specificity note: `.sec-rail p` below is (0,1,1) and the label is often a
   <p>, so the label rule is qualified to match it and win deterministically.
   Without this the label silently inherits the body-copy colour. */
/* The Header Tag is an admin choice (h3 by default), so the label must look
   the same whichever element it lands on — including font-weight, which the
   heading reset would otherwise set to semibold. */
.sec-rail .sec-rail__label {
  font-size: var(--fs-rail-label); letter-spacing: var(--ls-wide); text-transform: uppercase;
  font-weight: var(--fw-normal);
  color: var(--color-process-yellow);
  margin: 0; max-width: none;
}
.sec-rail nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sec-rail nav a { color: var(--color-neutral-900); }
.sec-rail nav a:hover { color: var(--color-accent-700); }
.sec-rail hr { border: 0; height: 1px; background: var(--color-neutral-300); margin: 0; }
.sec-rail p { color: var(--color-neutral-700); }
.sec-rail img { display: block; }

/* One chrome-rendered module in the rail. Stacks its own contents on the
   same 26px rhythm the rail uses between blocks — measured off the mockup,
   where the leaf note sits 26px above the CTA and the jump links sit 26px
   above the hairline.

   Spacing uses `gap`, NOT sibling margins. A module may emit a <script> as
   part of its content, which lands between the label and the list — an
   adjacent-sibling rule then targets the script instead of the list and the
   label spacing silently reverts. Flex `gap` ignores display:none children
   entirely, so the script cannot affect it.

   The label is pulled back to sit tight against the list it introduces. */
.sec-rail__block {
  display: flex; flex-direction: column;
  gap: var(--rail-block-gap);
}
/* The block sets its rhythm with `gap`, so its own children must not also
   carry bottom margins — a paragraph's default margin would stack on top of
   the gap and open the spacing well past the measured 26px. */
.sec-rail__block > p { margin-bottom: 0; }
.sec-rail__block > .sec-rail__label {
  margin-bottom: calc(var(--rail-label-gap) - var(--rail-block-gap));
}

/* "On This Page" module (mod_sg2026_toc). Styled here rather than in the
   module so it inherits the template's tokens; the rules are written to stand
   alone so the module also works outside the rail. */
.sg2026-toc ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.sg2026-toc li { margin: 0; }
/* One step up from the rail's 15px/400 body scale, so the jump links read as
   navigation without needing an underline. Specificity is raised past
   `.sec-rail nav a` (0,1,2), which would otherwise reset the size. */
.sg2026-toc a {
  font-size: var(--fs-rail-link); font-weight: var(--fw-medium);
  color: var(--color-neutral-900);
}
.sg2026-toc a:hover { color: var(--color-accent-700); }
.sg2026-toc a.is-current { color: var(--color-accent); }
.sg2026-toc--bullets li { display: flex; gap: 12px; align-items: baseline; }
.sg2026-toc--bullets li::before {
  content: ""; flex: none; width: 6px; height: 6px;
  background: var(--color-process-yellow);
}

/* Kicker, lead, signature ------------------------------------------------ */
.sec-kicker {
  font-size: var(--fs-kicker); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 10px;
}
.sec-lead { font-size: var(--fs-lead); line-height: var(--flh-lead); max-width: 56ch; color: var(--color-text); }
.sec-signature { font-size: var(--fs-signature); font-style: italic; color: var(--color-neutral-700); margin: 14px 0 0; }
.sec-subhead {
  font-size: var(--fs-subhead); line-height: var(--flh-subhead); font-style: italic;
  color: var(--color-text); max-width: 46ch; margin: 0 0 var(--space-6);
}

/* Leaf bullet list ------------------------------------------------------- */
/* The marker is a 6px square in leaf gold — the leaf reduced to a printer's
   mark. It is a ::before, not an image, so it costs no request. */
.sec-list {
  list-style: none; padding: 0; margin: 20px 0 var(--space-4);
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 32px;
  font-size: var(--fs-list); line-height: var(--flh-list);
}
.sec-list li { display: flex; gap: 12px; align-items: baseline; }
.sec-list li::before {
  content: ""; flex: none; width: 6px; height: 6px;
  background: var(--color-process-yellow);
}
.sec-list li.is-wide { grid-column: 1 / -1; }

/* AUTO-STYLED LISTS.
   On the Home layout every ordinary bulleted list an editor types becomes a
   leaf list — no class to remember, no code view. Higher specificity than the
   generic article list rule in section 9, so it wins wherever it applies.
   Menus, breadcrumbs, pagination and the question list are excluded. */
.sec-layout-home .sec-main ul:not(.sec-questions):not(.breadcrumb):not(.pagination):not([class*="mod-"]) {
  list-style: none; padding: 0; margin: 20px 0 var(--space-4);
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px 32px;
  font-size: var(--fs-list); line-height: var(--flh-list);
  max-width: none;
}
.sec-layout-home .sec-main ul:not(.sec-questions):not(.breadcrumb):not(.pagination):not([class*="mod-"]) > li {
  display: flex; gap: 12px; align-items: baseline; margin-bottom: 0;
}
.sec-layout-home .sec-main ul:not(.sec-questions):not(.breadcrumb):not(.pagination):not([class*="mod-"]) > li::before {
  content: ""; flex: none; width: 6px; height: 6px;
  background: var(--color-process-yellow);
}
/* An odd final item would sit alone in the left column; let it span. */
.sec-layout-home .sec-main ul > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* MODULE-CLASS UTILITIES.
   These are opt-in: an administrator types the class into
   Module > Advanced > Module Class and the chrome puts it on the wrapper.
   They are deliberately NOT bound to a position — a rule attached to a
   position styles whatever happens to be dropped there, which makes one
   module impossible to change without changing all of them.

   `sec-leaf-note`  — turns list items into leaf-marked bullets. Applies to
                      <li> ONLY, never to <p>, so ordinary paragraphs can be
                      added to the module freely. The leaf is decorative, so
                      it is a background rather than an <img> an editor has to
                      insert and alt-text correctly.
   `sec-btn-block`  — makes buttons in this module span the column.
   Both are documented in TEMPLATE-GUIDE.md. */
.sec-leaf-note ul,
.sec-leaf-note ol { list-style: none; margin: 0; padding: 0; }

.sec-leaf-note li {
  padding-left: calc(var(--leaf-mark) + 12px);
  background-image: url("../images/leaf.png");
  background-repeat: no-repeat;
  background-position: 0 0.25em;
  background-size: var(--leaf-mark) auto;
  min-height: var(--leaf-mark);
}
.sec-leaf-note li + li { margin-top: var(--space-2); }

.sec-btn-block .btn { display: block; width: 100%; }

/* Explicit markup is still honoured if a module supplies its own leaf. */
.sec-rail__note { display: flex; align-items: flex-start; gap: 12px; }
.sec-rail__note img { width: var(--leaf-mark); flex: none; }
.sec-rail__note p { margin: 0; }

/* Question list ---------------------------------------------------------- */
/* Rows, not bullets — a checklist the reader works through. These rules are
   the one sanctioned exception to the no-dividers rule: they belong to a
   single list component, not to page structure. */
.sec-questions {
  list-style: none; padding: 0; margin: 22px 0 0;
  font-size: var(--fs-list); line-height: var(--flh-list); counter-reset: q;
}
.sec-questions li {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-neutral-300);
}
.sec-questions li::before {
  content: counter(q, decimal-leading-zero);
  counter-increment: q;
  font-size: var(--fs-meta); color: var(--color-process-yellow);
  font-variant-numeric: tabular-nums;
}

/* Testimonials -----------------------------------------------------------
   Alternative category layout (html/com_content/category/testimonials.php).
   Newsprint logic: no panels — the one panel in this system is a download
   card, not body copy. Definition between entries comes from the same
   hairline the question list uses, and each quote is marked by an oversized
   leaf-gold quotation glyph.

   Leaf gold is 1.9:1 and may never carry meaning, so the glyph is decorative
   generated content only — the quotation is conveyed semantically by
   <blockquote>, and the attribution by <figcaption>. */
.sec-testimonials__title { margin-bottom: var(--space-4); }
.sec-testimonials__intro { max-width: var(--measure); margin-bottom: var(--space-6); }

.sec-quote {
  position: relative;
  margin: 0;
  max-width: var(--quote-measure);
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-neutral-300);
}
.sec-quote:first-of-type { padding-top: var(--space-4); }
.sec-quote:last-of-type { border-bottom: 0; }

/* Reset the generic article blockquote — that rule carries a gold left rule
   and italics, both of which would fight this component. */
.sec-main .sec-quote .sec-quote__text {
  margin: 0;
  padding: 0 0 0 var(--quote-indent);
  border: 0;
  font-style: normal;
  font-size: var(--fs-quote);
  line-height: var(--flh-quote);
  color: var(--color-neutral-900);
}
/* The figure carries the measure, so paragraphs must not impose their own or
   the attribution would align to a different edge than the text. */
.sec-quote__text p { max-width: none; }
.sec-quote__text > :last-child { margin-bottom: 0; }

.sec-quote__text::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--fs-quote-mark);
  line-height: var(--flh-none);
  color: var(--color-process-yellow);
}
.sec-quote:first-of-type .sec-quote__text::before { top: var(--space-2); }

/* Attribution. Italic and the em-dash both come from styles, so the Title
   field holds nothing but the name and organisation. */
/* Qualified past `.sec-main figcaption` (0,1,1), which would otherwise drag
   the attribution down to meta size. */
.sec-main .sec-quote__by,
.sec-quote__by {
  margin: var(--space-3) 0 0;
  padding-left: var(--quote-indent);
  text-align: right;
  font-style: italic;
  font-size: var(--fs-quote-by);
  line-height: var(--flh-rail);
  color: var(--color-neutral-700);
}
.sec-quote__by::before { content: "\2014\00A0"; }

/* The same quotation, hand-written inside an article body ----------------
   For a testimonial dropped into ordinary article text rather than rendered
   by the Testimonials category layout. Editors write:

     <p class="testimonial_content">…the quotation…</p>
     <p class="testimonial_sources">Name, Title, Organisation</p>

   There is no <figure> here to hang the component off, so the pair splits the
   figure's job: testimonial_content is the positioning context, carries the
   top padding and hosts the quotation glyph; testimonial_sources closes the
   block with the bottom padding and hairline. Type, spacing and the glyph all
   read the same tokens as the .sec-quote rules above — including on mobile,
   where the responsive block restates --fs-quote-mark, --quote-indent and
   --fs-quote at :root.

   Width is the one thing that does NOT follow .sec-quote. A testimonial typed
   into an article is body copy and sizes like body copy, so both paragraphs
   read --measure rather than the layout's fixed --quote-measure: they fill the
   column, and they follow the client's --measure override if one is ever set.
   Both must name it, not just inherit it — the attribution right-aligns, so it
   has to end on the same edge as the quotation above it or the em-dash line
   floats off on its own.

   Not reproduced from .sec-quote: the :first-of-type tightening. That exists
   because the layout's first quote sits directly beneath a heading; a
   testimonial in body copy follows arbitrary content, so the uniform spacing
   is the correct default. */
.testimonial_content {
  position: relative;
  margin: 0;
  max-width: var(--measure);
  padding: var(--space-6) 0 0 var(--quote-indent);
  font-style: normal;
  font-size: var(--fs-quote);
  line-height: var(--flh-quote);
  color: var(--color-neutral-900);
}
.testimonial_content::before {
  content: "\201C";
  position: absolute;
  left: 0;
  top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--fs-quote-mark);
  line-height: var(--flh-none);
  color: var(--color-process-yellow);
}

/* Qualified past `.sec-main figcaption` is unnecessary here — these are
   paragraphs — but the base `p` margin still has to be replaced so the gap to
   the quotation matches the figcaption's. */
.testimonial_sources {
  margin: var(--space-3) 0 0;
  max-width: var(--measure);
  padding: 0 0 var(--space-6) var(--quote-indent);
  border-bottom: 1px solid var(--color-neutral-300);
  text-align: right;
  font-style: italic;
  font-size: var(--fs-quote-by);
  line-height: var(--flh-rail);
  color: var(--color-neutral-700);
}
.testimonial_sources::before { content: "\2014\00A0"; }

/* Stands in for .sec-quote:last-of-type: the hairline separates one
   testimonial from the next, so the last of a run must not draw one. */
.testimonial_sources:not(:has(~ .testimonial_content)) { border-bottom: 0; }

/* Philosophy block — headshot beside text -------------------------------- */
.sec-split { display: grid; grid-template-columns: 230px 1fr; gap: 32px; align-items: start; margin-top: var(--space-4); }
.sec-split img { width: 100%; }
/* Article intro image set to float right in the Images and Links tab. */
.sec-split--right { grid-template-columns: 1fr 230px; }
.sec-split--right img { order: 2; }
.sec-split > div > p:first-child { margin-top: 0; }

/* PDF download card ------------------------------------------------------ */
/* The link must carry `download`, and its accessible name must include the
   format and size. */
.sec-download {
  display: flex; align-items: center; gap: 18px; max-width: 620px;
  padding: 18px 22px;
  background: var(--color-surface);
  border-left: 4px solid var(--color-process-yellow);
  color: var(--color-text);
  transition: background 150ms ease;
}
.sec-download:hover { background: var(--color-neutral-200); color: var(--color-text); }
.sec-download img { width: 32px; flex: none; }
.sec-download__title { display: block; font-size: var(--fs-download-title); font-weight: var(--fw-semibold); }
.sec-download__meta {
  display: block; font-size: var(--fs-meta); letter-spacing: var(--ls-meta); text-transform: uppercase;
  color: var(--color-neutral-600); margin-top: 3px;
}

/* Scroll reveal ---------------------------------------------------------- */
/* The hidden state is scoped to .js, which is set from script. With JS off
   the page is complete and every section is visible. */
.js [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .7s ease;
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Forms ------------------------------------------------------------------ */
/* Every input gets a persistent visible label — no placeholder-as-label. */
.field {
  display: flex; flex-direction: column; gap: var(--space-1);
  margin-bottom: var(--space-4); max-width: 520px;
}
.field label { font-size: var(--fs-ui); color: var(--color-neutral-800); }
.input,
input[type="text"], input[type="email"], input[type="tel"],
input[type="url"], input[type="password"], input[type="search"],
textarea, select {
  font-family: var(--font-body); font-size: var(--fs-input); padding: 10px 12px;
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-neutral-300);
  border-radius: var(--radius-md);
  max-width: 520px; width: 100%;
}
.input:focus-visible { border-color: var(--color-accent); }


/* ==========================================================================
   8. FOOTER
   No address, phone or email — those live on the Contact page.
   ========================================================================== */

.sec-footer { margin-top: 72px; border-top: 1px solid var(--color-neutral-300); }
.sec-footer__inner {
  display: flex; justify-content: space-between; align-items: center;
  gap: 32px; flex-wrap: wrap;
  padding-block: 26px 44px;
}
.sec-footer ul {
  display: flex; gap: 20px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.sec-footer a { font-size: var(--fs-footer); color: var(--color-neutral-700); white-space: nowrap; }
.sec-footer a:hover { color: var(--color-accent-700); }
.sec-footer__copy { font-size: var(--fs-meta); color: var(--color-neutral-600); }
.sec-footer__copy p { margin: 0; max-width: none; }
/* Hide sub-menus in the footer — it repeats the primary nav, one level only */
.sec-footer ul ul { display: none; }


/* ==========================================================================
   9. JOOMLA SYSTEM OUTPUT
   Styling for markup Joomla generates that the template does not author.
   ========================================================================== */

/* System messages -------------------------------------------------------- */
#system-message-container { margin-top: var(--space-4); }
joomla-alert { display: block; margin-bottom: var(--space-3); }
.alert {
  padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-accent);
  background: var(--color-surface);
  color: var(--color-neutral-900);
}
.alert-success { border-left-color: var(--color-accent-700); }
.alert-warning { border-left-color: var(--color-process-yellow); }
.alert-danger, .alert-error { border-left-color: var(--color-accent-2); }
.alert h4, .alert .alert-heading { font-size: var(--fs-alert-title); margin-bottom: var(--space-1); }
.alert p:last-child { margin-bottom: 0; }
.alert .joomla-alert-close, .alert button.close {
  float: right; background: none; border: 0; cursor: pointer;
  font-size: var(--fs-alert-close); line-height: var(--flh-none); color: var(--color-neutral-700);
}

/* Breadcrumbs ------------------------------------------------------------ */
.sec-breadcrumbs { padding-top: var(--space-4); }
.sec-breadcrumbs ol,
.mod-breadcrumbs, .breadcrumb {
  display: flex; flex-wrap: wrap; gap: 8px;
  list-style: none; margin: 0; padding: 0;
  font-size: var(--fs-meta); color: var(--color-neutral-600);
}
.sec-breadcrumbs a, .breadcrumb a { color: var(--color-neutral-700); }
.sec-breadcrumbs a:hover, .breadcrumb a:hover { color: var(--color-accent-700); }
.breadcrumb-item + .breadcrumb-item::before {
  content: "/"; margin-right: 8px; color: var(--color-neutral-300);
}
.sec-breadcrumbs .divider { color: var(--color-neutral-300); }

/* Article body ----------------------------------------------------------- */
.com-content-article,
.com-content-category-blog,
.item-page { min-width: 0; }

/* Core's blog view wraps every item in its own grid/column scaffolding. The
   sections supplied by the blog_item override provide all the layout this
   design needs, so flatten the wrappers rather than fight them. */
.com-content-category-blog__items,
.blog-items {
  display: block;
  margin: 0; padding: 0;
}
.com-content-category-blog__item,
.blog-item { width: auto; margin: 0; padding: 0; }
.com-content-category-blog > .cat-children { display: none; }

/* The article info block, tags and Read More are NOT hidden here. They are
   controlled by the menu item's own options, and a template that hides them
   in CSS makes those settings appear broken. Switch them off in the menu item
   (Options > Show Author / Show Tags / Read More) instead. */
.sec-main .article-info,
.sec-main .tags { font-size: var(--fs-meta); color: var(--color-neutral-600); }
.sec-main .tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.sec-main .readmore { margin-top: var(--space-3); }
.system-unpublished { border-left: 3px solid var(--color-accent-2); padding-left: var(--space-3); }

.sec-main ul:not(.sec-list):not(.sec-questions):not([class*="mod-"]),
.sec-main ol:not(.sec-questions) {
  max-width: var(--measure); padding-left: var(--space-4); margin: 0 0 var(--space-3);
}
.sec-main li { margin-bottom: var(--space-1); }

.sec-main blockquote {
  margin: var(--space-4) 0; padding-left: var(--space-4);
  border-left: 3px solid var(--color-process-yellow);
  font-style: italic; color: var(--color-neutral-800);
}

.sec-main figure { margin: var(--space-4) 0; }
.sec-main figcaption { font-size: var(--fs-meta); color: var(--color-neutral-700); margin-top: var(--space-1); }

.sec-main table {
  width: 100%; border-collapse: collapse; margin: var(--space-4) 0; font-size: var(--fs-table);
}
.sec-main th, .sec-main td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--color-neutral-300);
}
.sec-main th { font-weight: var(--fw-semibold); color: var(--color-text); }

.page-header h1, .page-header h2 { font-size: var(--fs-h2-inner); line-height: var(--flh-h2-inner); letter-spacing: var(--ls-h2-inner); }
.article-info {
  font-size: var(--fs-meta); color: var(--color-neutral-600);
  margin-bottom: var(--space-3);
}
.article-info dd { display: inline; margin: 0 var(--space-2) 0 0; }
.article-info dt { display: none; }

/* Editor float helpers Joomla's TinyMCE inserts */
.pull-left, .float-start { float: left; margin: 0 var(--space-4) var(--space-3) 0; }
.pull-right, .float-end { float: right; margin: 0 0 var(--space-3) var(--space-4); }

/* Pagination ------------------------------------------------------------- */
.pagination {
  display: flex; flex-wrap: wrap; gap: 12px;
  list-style: none; padding: 0; margin: var(--space-6) 0 0;
  font-size: var(--fs-ui);
}
.pagination .active > * { color: var(--color-accent); }
.counter { font-size: var(--fs-meta); color: var(--color-neutral-600); }


/* ==========================================================================
   10. SYSTEM PAGES — error and offline
   ========================================================================== */

.sec-system {
  min-height: 70vh;
  display: flex; flex-direction: column; justify-content: center;
  padding-block: var(--space-8);
}
.sec-system__code {
  font-size: var(--fs-meta); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: var(--space-2);
}
.sec-system h1 { font-size: var(--fs-hero-short); line-height: var(--flh-hero-short); letter-spacing: var(--ls-h2); max-width: 20ch; }
.sec-system p { margin-top: var(--space-3); }
.sec-system__actions { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.sec-system__brand { margin-bottom: var(--space-8); }
.sec-system__brand img { height: 26px; width: auto; }
.sec-system__detail {
  margin-top: var(--space-6); padding-top: var(--space-3);
  border-top: 1px solid var(--color-neutral-300);
  font-size: var(--fs-meta); color: var(--color-neutral-600);
}
.sec-system__detail pre { white-space: pre-wrap; word-break: break-word; font-size: var(--fs-meta-sm); }

/* .sec-error and .sec-offline are body-level hooks carrying no styles of
   their own — they exist so css/local.css can target one system page
   without touching the other. */


/* ==========================================================================
   11. RESPONSIVE
   Mobile is a first-class target for this build, not an afterthought.
   Body copy never below 16px; touch targets never below 44x44px.
   ========================================================================== */

/* --- 1024-1239px -------------------------------------------------------- */
@media (max-width: 1239px) {
  :root {
    --gutter: 40px; --rail-width: 236px; --rail-gap: 40px;
    --fs-hero: 46px;
    --fs-nav: 14px;

    /* The Hero height fields hold desktop values; each breakpoint scales
       them rather than restating a height, so a style set to 500px steps
       down in the same proportion the design always did. */
    --hero-scale: .9;
  }
  .sec-nav ul { gap: 12px; }
}

/* --- 768-1023px --------------------------------------------------------- */
/* The rail moves BELOW the main content and becomes a horizontal band.
   It keeps its content — do not hide it. */
@media (max-width: 1023px) {
  :root {
    --fs-hero: 38px;
    --fs-hero-sub: 19px;
    --fs-numeral: 18px;
    --hero-scale: .8;
  }

  /* The navigation collapses to the burger here, so the Contact button moves
     from the menu item to the `header-cta` module — one button visible at any
     width, and no reliance on :has(). */
  .sec-nav { display: none; }
  .sec-burger { display: block; }
  .sec-header-cta { display: flex; }

  .sec-body { grid-template-columns: 1fr; }
  .sec-rail {
    position: static; padding-top: 48px;
    flex-direction: row; flex-wrap: wrap; align-items: flex-start;
    gap: 24px 40px;
  }
  .sec-rail > * { flex: 1 1 240px; }

  /* Both the explicit .sec-list and the auto-styled Home lists collapse to a
     single column. The auto-list rule carries the :not() chain, so it needs
     matching specificity here or it stays two-up on mobile. */
  .sec-list,
  .sec-layout-home .sec-main ul:not(.sec-questions):not(.breadcrumb):not(.pagination):not([class*="mod-"]) {
    grid-template-columns: 1fr;
  }

  /* Numerals move from the left margin to an inline mark above the kicker */
  .sec-numbered .sec-main section,
  .sec-numbered .sec-main .sec-region { grid-template-columns: 1fr; gap: 0; }
  .sec-numbered .sec-main section::before { margin-bottom: 8px; }

  .sec-split { grid-template-columns: 1fr; }
  .sec-split img { max-width: 260px; }
}

/* --- Below 768px -------------------------------------------------------- */
@media (max-width: 767px) {
  :root {
    --gutter: 18px;

    /* Body copy never drops below 16px. */
    --fs-body: 16px;
    --fs-hero: 32px;
    --flh-hero: 1.06;
    --fs-hero-sub: 16px;
    --fs-h2: 26px;
    --fs-h2-inner: 24px;
    --fs-lead: 18px;
    --fs-signature: 26px;
    --fs-subhead: 18px;
    --fs-cta: 14px;
    --btn-sm-px: 13px;
    --hero-scale: .7;
    --above-hero-py: 16px;
  }

  /* Parallax off. Below 768px the hero image is a static cover —
     mobile parallax costs more in jank than it returns. */
  .sec-hero__img {
    position: absolute; top: 0; height: 100%;
    transform: none !important;
  }

  /* The rail is a horizontal band only in the 768-1023 tablet range. Below
     768 it stacks, or its 240px flex-basis leaves two cramped columns on a
     mid-size phone. */
  .sec-rail { flex-direction: column; }
  .sec-rail > * { flex: 0 1 auto; }

  .sec-brand img { max-height: 22px; }
  .sec-header__inner { gap: 12px; }

  .sec-questions li { grid-template-columns: 32px 1fr; gap: 12px; }

  /* The quotation mark and its clearance both come down a step. */
  :root { --fs-quote-mark: 44px; --quote-indent: 34px; --fs-quote: 17px; }

  .sec-download { flex-direction: column; align-items: flex-start; max-width: none; }

  .sec-footer__inner { flex-direction: column; align-items: flex-start; gap: 16px; }

  .js [data-reveal] { transform: translateY(12px); transition-duration: .5s; }
}


/* ==========================================================================
   12. MOTION PREFERENCE
   Must stay last. Note the JS also checks matchMedia and skips binding the
   parallax and reveal observers entirely — a CSS override alone would leave
   the scroll handler running.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .sec-hero__img { transform: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}