/* ============================================================
   ADLIUS 2026 Design System
   Implements Adlius Website Style Kit v2 in full.
   Single warm-red family · square corners · Montserrat + Nunito Sans

   Reading order
   01 Tokens              11 Stats
   02 Reset and base      12 FAQ accordion
   03 Accessibility       13 Forms
   04 Layout primitives   14 Breadcrumb
   05 Typographic parts   15 Reading progress
   06 Buttons             16 Long-form and editorial
   07 Navigation          17 Footer
   08 Hero                18 Utilities
   09 GEO answer block    19 Motion
   10 Cards               20 Print

   Motion law: nothing is hidden at rest. Every entrance state lives in
   section 19, behind prefers-reduced-motion: no-preference plus one of two
   classes on <html>: .js (set inline in header.php, so the hero never
   flashes) for pure-CSS effects, and .js-ready (set by main.js) for anything
   only JS can undo. Crawlers, no-JS readers, a failed script and
   reduced-motion readers all get the finished page.
   ============================================================ */

/* ── 01 · Tokens (Style Kit §8.1) ── */
:root {
  /* Colours */
  --color-body:         #290004;   /* Crimson Ink     */
  --color-accent1:      #4F0209;   /* Deep Garnet     */
  --color-cta:          #C20114;   /* Adlius Red      */
  --color-neutral:      #8A8080;   /* Warm Mid-Grey, UI chrome only */
  --color-accent2:      #E5E1E1;   /* Warm Stone      */
  --color-bg:           #FCFAFA;   /* Parchment White */
  --color-white:        #FFFFFF;
  --color-cta-hover:    #A3010F;
  --color-cta-disabled: #E89098;
  --color-a1-hover:     #3A0106;
  --color-divider:      #D4CCCC;
  --color-text-muted:   #6B2029;
  --color-overlay:      rgba(41,0,4,0.72);

  /* Typography */
  --font-heading: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Nunito Sans', 'Helvetica Neue', Arial, sans-serif;
  --leading-tight: 1.15;   /* H1 to H3, architectural */
  --leading-body:  1.65;   /* body copy, open      */
  --measure:       68ch;   /* maximum line length  */

  /* Spacing, 8px scale */
  --space-1: 8px;  --space-2: 16px; --space-3: 24px;
  --space-4: 32px; --space-5: 48px; --space-6: 64px;
  --space-7: 96px; --space-8: 128px;

  /* Layout */
  --max-width:     1200px;
  --content-width: 900px;
  --article-width: 720px;
  --gutter:        24px;
  --radius:        0px; /* square corners, intentional premium signal */
  --transition:    0.2s ease;
  --ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);
  --nav-height:    72px;

  /* Elevation, warm, low, never a glow */
  --shadow-1: 0 2px 16px rgba(41,0,4,0.08);
  --shadow-2: 0 4px 32px rgba(41,0,4,0.14);
  --shadow-3: 0 12px 40px rgba(41,0,4,0.14);
}

/* ── 02 · Reset and base ── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-2));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--leading-body);
  color: var(--color-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--color-cta);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--transition);
}
a:hover { color: var(--color-cta-hover); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  color: var(--color-accent1);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h1 { font-size: clamp(36px, 5vw, 56px); font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: clamp(28px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.01em; }
h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 600; }
h4 { font-size: 18px; font-weight: 700; }
h5, h6 { font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }

p { margin: 0 0 var(--space-3); max-width: var(--measure); }
ul, ol { padding-left: 1.25em; margin: 0 0 var(--space-3); max-width: var(--measure); }
li + li { margin-top: 6px; }
strong, b { font-weight: 700; }
small { font-size: 14px; }
hr { border: 0; border-top: 1px solid var(--color-divider); margin: var(--space-5) 0; }

code, kbd, pre, samp { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; }
code { background: var(--color-accent2); padding: 2px 5px; }
pre { background: var(--color-accent2); padding: var(--space-3); overflow-x: auto; max-width: 100%; }
pre code { background: none; padding: 0; }

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--color-cta); color: var(--color-white); }

/* ── 03 · Accessibility ── */
:focus-visible {
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
}
.section--dark :focus-visible,
.section--red :focus-visible,
.footer :focus-visible,
.hero :focus-visible,
.mobile-nav :focus-visible {
  outline-color: var(--color-bg);
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  z-index: 999;
  background: var(--color-cta); color: var(--color-white);
  font-family: var(--font-heading); font-size: 14px; font-weight: 700;
  padding: 12px 20px; text-decoration: none;
}
.skip-link:focus {
  left: var(--space-2); top: var(--space-2);
  color: var(--color-white);
}

/* ── 04 · Layout primitives ── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow  { max-width: calc(var(--content-width) + var(--gutter) * 2); }
.container--article { max-width: calc(var(--article-width) + var(--gutter) * 2); }

.section { padding-block: var(--space-6); position: relative; }
@media (min-width: 1024px) { .section { padding-block: var(--space-7); } }
.section--tight { padding-block: var(--space-5); }

.section--stone { background: var(--color-accent2); }
.section--dark  { background: var(--color-accent1); color: var(--color-bg); }
.section--red   { background: var(--color-cta); color: var(--color-white); }

.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark p, .section--dark li { color: var(--color-bg); }
.section--red h1, .section--red h2, .section--red h3,
.section--red h4, .section--red p, .section--red li { color: var(--color-white); }

/* Adlius Red on Deep Garnet is a prohibited pairing (2.2:1): inline links
   on dark or red sections reverse to parchment instead. */
.section--dark a:not(.btn), .section--red a:not(.btn) {
  color: var(--color-bg);
  text-decoration-color: rgba(252,250,250,0.5);
}
.section--dark a:not(.btn):hover, .section--red a:not(.btn):hover {
  color: var(--color-white);
  text-decoration-color: currentColor;
}
.section--red .eyebrow { color: var(--color-white); }

.grid { display: grid; gap: var(--space-3); }
/* Column counts step up with room to read in, not at the first chance.
   Long-copy pairs (problem cards, case studies) stay single until 860px;
   three- and four-up pass through a two-column stage. */
@media (min-width: 768px) {
  .grid { gap: var(--gutter); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 860px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Split editorial layout: image / narrative side by side (About, Team) */
.split { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 900px) {
  .split { grid-template-columns: 5fr 7fr; gap: var(--space-6); }
  .split--reverse > :first-child { order: 2; }
}

/* Diagonal divider (Style Kit §7.7), last child of the section above. */
.section-diagonal-bottom {
  position: absolute; bottom: -1px; left: 0;
  width: 100%; height: 80px;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
  pointer-events: none;
}
@media (max-width: 767px) { .section-diagonal-bottom { height: 48px; } }

/* ── 05 · Typographic parts ── */
.eyebrow {
  display: block;
  font-family: var(--font-heading);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-cta);
  margin-bottom: var(--space-2);
}
.eyebrow--on-dark { color: var(--color-cta-disabled); }

.lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}
.section--dark .lead, .section--red .lead { color: var(--color-accent2); }

.section-intro { max-width: var(--measure); }
.subheading { max-width: 56ch; }
.caption, figcaption {
  font-size: 13px; line-height: 1.5;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ── 06 · Buttons (Style Kit §5 + §7.4) ── */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700; font-size: 15px;
  line-height: 1.3;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border: none; border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  position: relative; overflow: hidden;
  isolation: isolate;
  transition: background var(--transition), color var(--transition),
              transform 0.15s ease, border-color var(--transition);
}
.btn:active { transform: translateY(1px); }

/* §7.4 hover wash */
.btn--primary::after, .btn--secondary::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0.08);
  opacity: 0; transition: opacity var(--transition);
  pointer-events: none;
}
.btn--primary:hover::after, .btn--secondary:hover::after { opacity: 1; }

.btn--primary { background: var(--color-cta); color: var(--color-white); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-cta-hover); color: var(--color-white); }

.btn--secondary { background: var(--color-accent1); color: var(--color-white); }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--color-a1-hover); color: var(--color-white); }

.btn--ghost {
  background: transparent; color: var(--color-cta);
  border: 2px solid var(--color-cta); padding: 12px 26px;
}
.btn--ghost:hover, .btn--ghost:focus-visible { background: var(--color-cta); color: var(--color-white); }

.btn--ghost-light {
  background: transparent; color: var(--color-bg);
  border: 2px solid var(--color-bg); padding: 12px 26px;
}
.btn--ghost-light:hover, .btn--ghost-light:focus-visible { background: var(--color-bg); color: var(--color-accent1); }

.btn--text {
  background: none; padding: 14px 0; overflow: visible; text-align: left;
  color: var(--color-cta); text-decoration: underline; text-underline-offset: 3px;
}
.btn--text:hover { color: var(--color-cta-hover); }
.btn--text-light { color: var(--color-bg); }
.btn--text-light:hover, .btn--text-light:focus-visible { color: var(--color-accent2); }
.section--red .btn--text-light:hover { color: var(--color-white); }

.btn--nav { padding: 10px 20px; font-size: 14px; }
.btn--block { display: block; width: 100%; }

/* Disabled fill is the kit's token; the label goes to Crimson Ink so the
   state is still readable (white on #E89098 is 2.4:1). */
.btn[aria-disabled="true"], .btn:disabled {
  background: var(--color-cta-disabled); color: var(--color-body);
  cursor: not-allowed; pointer-events: none;
}
.btn[aria-disabled="true"]::before, .btn:disabled::before,
.btn[aria-disabled="true"]::after, .btn:disabled::after { display: none; }

.cta-group {
  display: flex; flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* ── 07 · Navigation (Style Kit §5 + §7.3) ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  height: var(--nav-height);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); height: 100%;
}
.nav__logo { display: inline-flex; line-height: 0; }
.nav__logo-img { width: 125px; height: 50px; }

/* Over-hero: transparent on the dark hero, snow logo, parchment links. */
.nav--over-hero { margin-bottom: calc(-1 * var(--nav-height)); }
.nav--over-hero:not(.scrolled) .nav__logo-img--dark { display: none; }
.nav--over-hero:not(.scrolled) .nav__links a { color: var(--color-bg); }
.nav--over-hero:not(.scrolled) .nav__links a:hover { color: var(--color-cta-disabled); }
.nav--over-hero:not(.scrolled) .btn--nav { color: var(--color-bg); border-color: var(--color-bg); }
.nav--over-hero:not(.scrolled) .btn--nav:hover,
.nav--over-hero:not(.scrolled) .btn--nav:focus-visible { background: var(--color-bg); color: var(--color-accent1); }
.nav--over-hero:not(.scrolled) .nav__hamburger-bars span { background: var(--color-bg); }
.nav--over-hero.scrolled .nav__logo-img--light { display: none; }
.nav--solid .nav__logo-img--light { display: none; }

/* Frosted parchment with a hairline, the scrolled and inner-page state. */
.nav--solid,
.nav.scrolled {
  background: rgba(252, 250, 250, 0.82);
  border-bottom-color: var(--color-accent2);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
.nav.scrolled { box-shadow: 0 1px 24px rgba(41,0,4,0.06); }

/* No backdrop-filter support: fall back to a near-opaque parchment bar. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav--solid, .nav.scrolled { background: rgba(252, 250, 250, 0.98); }
}

.nav__links {
  display: flex; gap: var(--space-4);
  list-style: none; margin: 0; padding: 0; max-width: none;
}
.nav__links li { margin: 0; }
.nav__links a {
  font-family: var(--font-heading);
  font-size: 14px; font-weight: 600;
  color: var(--color-body); text-decoration: none;
  transition: color 0.2s ease;
}
.nav__links a:hover { color: var(--color-cta); }
.nav__links .current-menu-item > a,
.nav__links .current_page_item > a { color: var(--color-cta); }

.nav__hamburger {
  display: none;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav__hamburger-bars { display: flex; flex-direction: column; gap: 5px; }
.nav__hamburger-bars span {
  display: block; width: 24px; height: 2px;
  background: var(--color-body);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 900px) {
  .nav__menu, .nav__cta { display: none; }
  .nav__hamburger { display: block; }
}

/* Mobile overlay, full-screen Deep Garnet (Style Kit §5). */
.mobile-nav[hidden] { display: none; }
.mobile-nav {
  position: fixed; inset: 0; z-index: 200;
  background: var(--color-accent1);
  display: flex; flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: calc(var(--nav-height) + var(--space-4)) var(--gutter) var(--space-6);
  overflow-y: auto;
}
.mobile-nav__links {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.mobile-nav__links li { margin: 0; }
.mobile-nav__links a {
  font-family: var(--font-heading);
  font-size: clamp(28px, 8vw, 40px); font-weight: 600;
  line-height: 1.15;
  color: var(--color-bg); text-decoration: none;
}
.mobile-nav__links a:hover, .mobile-nav__links a:focus-visible { color: var(--color-cta-disabled); }
.mobile-nav__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.mobile-nav__nap { font-size: 14px; color: var(--color-accent2); margin: 0; }
.mobile-nav__nap a { color: var(--color-accent2); }

/* With the overlay open the header rides above it (the sticky header makes
   its own stacking context, so the bar itself has to be lifted, not the
   button inside it) and goes transparent: logo and close control only. */
body.nav-open { overflow: hidden; }
body.nav-open .nav {
  z-index: 300;
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.nav-open .nav__logo-img--dark { display: none; }
body.nav-open .nav__logo-img--light { display: block; }
body.nav-open .nav__hamburger-bars span { background: var(--color-bg); }
body.nav-open .nav__hamburger-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav__hamburger-bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav__hamburger-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 08 · Hero (Style Kit §6.1 S1 + §7.2) ── */
.hero {
  position: relative;
  min-height: 88vh;
  display: flex; align-items: center;
  background: var(--color-accent1);
  color: var(--color-bg);
  overflow: hidden;
  padding-block: var(--space-8);
}
.hero--page    { min-height: 40vh; padding-block: var(--space-7); }
.hero--segment { min-height: 80vh; }

.hero__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 600px at 80% 10%, rgba(194,1,20,0.22), transparent 60%),
    radial-gradient(900px 700px at 10% 90%, rgba(41,0,4,0.85), transparent 70%),
    var(--color-accent1);
}
.hero__bg::after {
  /* Faint triangle motif from the mark, abstract brand texture, no stock photography. */
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480' viewBox='0 0 480 480'%3E%3Cg fill='none' stroke='%23FCFAFA' stroke-opacity='0.045' stroke-width='1.5'%3E%3Cpath d='M240 40 440 420H40z'/%3E%3Cpath d='M240 130 380 390H100z'/%3E%3Cpath d='M240 220 320 360H160z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 480px 480px;
  background-position: center;
}
.hero__content { position: relative; z-index: 1; }
.hero__content h1 { color: var(--color-bg); max-width: 16ch; }
.hero--segment .hero__content h1,
.hero--page .hero__content h1 { max-width: 22ch; }
.hero__content .subheading {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--color-accent2);
  max-width: 56ch;
  margin-bottom: var(--space-4);
}
.hero__content p { color: var(--color-accent2); }
.hero__content a:not(.btn) { color: var(--color-bg); }
.hero-word { display: inline-block; }

/* ── 09 · GEO answer-first block (Style Kit §5) ── */
.geo-block {
  padding: 20px 24px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-left: 4px solid var(--color-accent1);
  border-radius: 0;
  margin-block: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-1);
  max-width: var(--measure);
}
.geo-block__label {
  display: block;
  font-family: var(--font-heading);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-cta);
  margin-bottom: 6px;
}
.geo-block p { font-size: 16px; line-height: 1.6; margin: 0; max-width: none; color: var(--color-body); }
.section--dark .geo-block {
  background: rgba(252,250,250,0.06);
  border-color: rgba(252,250,250,0.16);
  border-left-color: var(--color-cta-disabled);
  box-shadow: none;
}
.section--dark .geo-block p { color: var(--color-bg); }
.section--dark .geo-block__label { color: var(--color-cta-disabled); }
.section--red .geo-block { border-left-color: var(--color-accent1); box-shadow: none; }

/* ── 10 · Cards (Style Kit §5 + §7.6) ── */
.card { position: relative; }

.card--problem {
  background: var(--color-bg);
  border-left: 4px solid var(--color-cta);
  padding: var(--space-4);
  box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
}
.card--problem:hover { border-left-color: var(--color-accent1); box-shadow: var(--shadow-2); }
.card--problem h3 { margin-bottom: var(--space-2); }
.card--problem .btn { margin-top: auto; align-self: flex-start; }
.card--problem p:last-of-type { margin-bottom: var(--space-3); }

.card--case {
  background: var(--color-white);
  border: 1px solid var(--color-accent2);
  padding: var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
}
.card--case h3 { margin: 0; }
.card--case p { margin: 0; font-size: 16px; }
.card--case .case-stat {
  font-family: var(--font-heading);
  font-size: clamp(40px, 5vw, 48px); font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--color-cta); line-height: 1;
}
.card--case .btn--text { margin-top: auto; align-self: flex-start; }

.card--phase {
  background: var(--color-accent1);
  color: var(--color-bg);
  padding: var(--space-4);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.card--phase h3 { color: var(--color-bg); font-size: 24px; position: relative; z-index: 1; }
.card--phase p  { color: var(--color-accent2); font-size: 16px; position: relative; z-index: 1; }
.card--phase a:not(.btn) { color: var(--color-bg); }
.card--phase .phase-number {
  position: absolute; top: -18px; right: 4px;
  font-family: var(--font-heading);
  font-size: 110px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(252,250,250,0.07);
  line-height: 1; z-index: 0;
  pointer-events: none;
}
.card--phase .phase-deliverable {
  font-size: 14px; font-weight: 700;
  color: var(--color-cta-disabled);
  position: relative; z-index: 1;
  margin: auto 0 0;
  padding-top: var(--space-2);
}

.card--pricing {
  background: var(--color-bg);
  border: 1px solid var(--color-accent2);
  display: flex; flex-direction: column;
}
.card--pricing .pricing__header {
  background: var(--color-accent1);
  color: var(--color-bg);
  font-family: var(--font-heading);
  font-weight: 700; font-size: 18px;
  line-height: 1.3;
  padding: var(--space-2) var(--space-3);
}
.card--pricing .pricing__body { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; }
.card--pricing .pricing__body p { font-size: 16px; }
.card--pricing .btn { margin-top: auto; }

/* ── 11 · Stats ── */
.stat { text-align: left; }
.stat__number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(40px, 5vw, 56px); font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  color: var(--color-cta); line-height: 1.1;
}
.section--dark .stat__number, .section--red .stat__number { color: var(--color-bg); }
.stat__label { font-size: 15px; line-height: 1.45; color: var(--color-text-muted); display: block; }
.section--dark .stat__label, .section--red .stat__label { color: var(--color-accent2); }
.stat-counter { font-variant-numeric: tabular-nums; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-block: var(--space-5);
}

/* ── 12 · FAQ accordion (Style Kit §7.8) ── */
.faq { border-top: 1px solid var(--color-accent2); max-width: var(--measure); }
.faq__item { border-bottom: 1px solid var(--color-accent2); }
.faq__heading { margin: 0; font-size: inherit; }
.faq__question {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-3);
  width: 100%; padding: 20px 0;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-heading);
  font-size: 17px; font-weight: 600; line-height: 1.35;
  color: var(--color-body);
  transition: color var(--transition);
}
.faq__question:hover { color: var(--color-cta); }
.faq__icon {
  width: 20px; height: 20px; flex-shrink: 0;
  color: var(--color-cta);
  transition: transform 0.3s ease;
}
.faq__item.open .faq__icon { transform: rotate(45deg); }
.faq__answer { overflow: hidden; }
.faq__answer p { font-size: 16px; margin: 0; padding-bottom: 20px; }
/* Collapse is a JS behaviour, keyed on .js-ready (set by main.js, not the
   inline snippet): if main.js never runs, every answer stays open and readable. */
.js-ready .faq__answer { max-height: 0; }
.js-ready .faq__item.open .faq__answer { max-height: var(--faq-h, 60rem); }

.section--dark .faq, .section--dark .faq__item { border-color: rgba(252,250,250,0.18); }
.section--dark .faq__question { color: var(--color-bg); }
.section--dark .faq__icon { color: var(--color-cta-disabled); }

/* ── 13 · Forms (Style Kit §5 Form Elements) ── */
.optin { display: flex; gap: var(--space-2); max-width: 560px; }
.optin__input, .form-field input, .form-field textarea, .form-field select {
  flex: 1; width: 100%;
  border: 1px solid var(--color-accent2);
  background: var(--color-white);
  padding: 14px 16px;
  font-family: var(--font-body); font-size: 16px;
  color: var(--color-body);
  border-radius: 0;
}
.optin__input::placeholder, .form-field input::placeholder, .form-field textarea::placeholder {
  color: var(--color-neutral);
}
.optin__input:focus, .form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--color-cta);
  outline: 2px solid var(--color-cta);
  outline-offset: 2px;
}
.optin__input[aria-invalid="true"], .form-field input[aria-invalid="true"] { border-color: var(--color-cta); border-width: 2px; }
.form-error { display: block; font-size: 13px; color: var(--color-cta); margin: 6px 0 0; }
.optin__fineprint, .form-fineprint {
  font-size: 12px; line-height: 1.5;
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  max-width: 60ch;
}
.section--red .optin__fineprint, .section--red .form-fineprint { color: var(--color-white); }
.section--dark .optin__fineprint, .section--dark .form-fineprint { color: var(--color-accent2); }
.section--red .optin__submit { background: var(--color-accent1); }
.section--red .optin__submit:hover { background: var(--color-a1-hover); }

.form-field { display: block; margin-bottom: var(--space-3); max-width: 560px; }
.form-field > label,
.form-field > span:first-child {
  display: block;
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 6px;
}
@media (max-width: 600px) { .optin { flex-direction: column; } }

/* ── 14 · Breadcrumb ── */
.breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 var(--space-3); padding: 0; max-width: none;
  font-size: 13px;
}
.breadcrumb li { margin: 0; color: var(--color-accent2); }
.breadcrumb li + li::before { content: '→'; margin-right: 8px; color: var(--color-neutral); }
.breadcrumb a { color: var(--color-accent2); text-decoration-color: rgba(229,225,225,0.5); }
.breadcrumb a:hover { color: var(--color-bg); }

/* ── 15 · Reading progress bar ── */
.progress-bar {
  position: fixed; top: 0; left: 0;
  width: 100%; height: 2px;
  z-index: 300; pointer-events: none;
}
#reading-progress { display: block; height: 100%; width: 0; background: var(--color-cta); }

/* ── 16 · Long-form and editorial (Style Kit §6.7) ── */
.article-hero {
  background: var(--color-accent1);
  color: var(--color-bg);
  padding-block: var(--space-7) var(--space-6);
}
.article-hero h1 { color: var(--color-bg); font-size: clamp(30px, 4vw, 44px); max-width: 24ch; }
.article-hero p { color: var(--color-accent2); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: 14px; color: var(--color-accent2); }
.article-meta a { color: var(--color-accent2); }
.article-meta .sep { color: var(--color-neutral); }

:is(.article-body, .entry-content) { padding-block: var(--space-6); }
:is(.article-body, .entry-content) > * {
  max-width: var(--article-width);
  margin-left: auto; margin-right: auto;
}
:is(.article-body, .entry-content) > h2 { margin-top: var(--space-5); }
:is(.article-body, .entry-content) > h3 { margin-top: var(--space-4); }
:is(.article-body, .entry-content) > h2:first-child, :is(.article-body, .entry-content) > h3:first-child { margin-top: 0; }
:is(.article-body, .entry-content) > p, :is(.article-body, .entry-content) > ul, :is(.article-body, .entry-content) > ol { max-width: var(--article-width); }
:is(.article-body, .entry-content) li { margin-top: 8px; }
:is(.article-body, .entry-content) img, :is(.article-body, .entry-content) figure { margin-block: var(--space-4); }
:is(.article-body, .entry-content) figure > figcaption { margin-top: var(--space-1); }
:is(.article-body, .entry-content) > .alignwide, :is(.article-body, .entry-content) > .table-wrap, :is(.article-body, .entry-content) > figure.alignwide {
  max-width: var(--content-width);
}
:is(.article-body, .entry-content) > .alignfull { max-width: none; }
:is(.article-body, .entry-content) blockquote {
  border-left: 4px solid var(--color-cta);
  background: var(--color-bg);
  font-family: var(--font-heading);
  font-size: 22px; font-style: italic; font-weight: 600; line-height: 1.35;
  color: var(--color-accent1);
  margin-block: var(--space-4);
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
}
:is(.article-body, .entry-content) blockquote p { font-size: inherit; margin: 0; max-width: none; }
:is(.article-body, .entry-content) blockquote cite {
  display: block; margin-top: var(--space-2);
  font-family: var(--font-body); font-size: 14px; font-style: normal; font-weight: 400;
  color: var(--color-text-muted);
}

.article-disclaimer {
  background: var(--color-accent2);
  border-left: 4px solid var(--color-neutral);
  padding: var(--space-2) var(--space-3);
  font-size: 15px;
  margin-bottom: var(--space-4);
}

.related { background: var(--color-bg); border-top: 1px solid var(--color-accent2); }
.post-card {
  background: var(--color-white);
  border: 1px solid var(--color-accent2);
  padding: var(--space-3);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.post-card img { margin-bottom: var(--space-2); }
.post-card__date { font-size: 13px; color: var(--color-text-muted); }
.post-card h3 { font-size: 19px; margin: 0; }
.post-card h3 a { color: var(--color-accent1); text-decoration: none; }
.post-card h3 a:hover { color: var(--color-cta); }
.post-card p { font-size: 15px; margin: 0; }

/* Pagination */
.pagination, .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-1); font-family: var(--font-heading); font-size: 14px; font-weight: 600; }
.page-numbers {
  display: inline-block; padding: 8px 14px;
  border: 1px solid var(--color-accent2);
  text-decoration: none; color: var(--color-body);
}
.page-numbers:hover { border-color: var(--color-cta); color: var(--color-cta); }
.page-numbers.current { background: var(--color-cta); border-color: var(--color-cta); color: var(--color-white); }
.screen-reader-text + .nav-links { margin-top: 0; }

/* Tables (deliverables, comparisons, classic-editor content) */
.table-wrap { overflow-x: auto; margin-block: var(--space-4); -webkit-overflow-scrolling: touch; }
table.adlius-table, :is(.article-body, .entry-content) table { width: 100%; border-collapse: collapse; font-size: 15px; margin-block: var(--space-4); }
.adlius-table caption, :is(.article-body, .entry-content) table caption {
  caption-side: bottom; text-align: left;
  font-size: 13px; color: var(--color-text-muted); padding-top: var(--space-1);
}
.adlius-table th, :is(.article-body, .entry-content) table th {
  font-family: var(--font-heading); font-weight: 700; text-align: left;
  background: var(--color-accent1); color: var(--color-bg);
  padding: 12px 16px;
  vertical-align: bottom;
}
.adlius-table td, :is(.article-body, .entry-content) table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.adlius-table tbody tr:nth-child(even) td { background: rgba(229,225,225,0.35); }
.adlius-table--numeric td { font-variant-numeric: tabular-nums; }

/* Company facts <dl> */
.facts-list { max-width: var(--article-width); }
.facts-list dt {
  font-family: var(--font-heading); font-weight: 700; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-cta); margin-top: var(--space-3);
}
.facts-list dd { margin: 4px 0 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-divider); }

/* CTA band, left-aligned by design. Add .text-center to the section for the
   rare centred variant; the brand does not centre everything. */
.cta-band .cta-group { margin-top: var(--space-4); }
.cta-band h2 { max-width: 22ch; }
.cta-band__body { max-width: var(--measure); }

/* Guarantee points */
.promise-points { list-style: none; padding: 0; margin: 0; max-width: none; display: grid; gap: var(--space-3); }
.promise-points li {
  background: rgba(252,250,250,0.05);
  border-left: 4px solid var(--color-cta);
  padding: var(--space-3);
  margin: 0;
}
.promise-points strong { font-family: var(--font-heading); display: block; margin-bottom: 4px; }
@media (min-width: 900px) { .promise-points { grid-template-columns: repeat(3, 1fr); } }

/* Team (Style Kit §6.4, B&W with a garnet duotone on hover) */
.team-card { text-align: left; }
.team-card__photo {
  filter: grayscale(1);
  transition: filter 0.3s ease;
  aspect-ratio: 4 / 5; object-fit: cover; width: 100%;
}
.team-card:hover .team-card__photo { filter: grayscale(1) sepia(1) hue-rotate(-38deg) saturate(2.4) brightness(0.85); }
.team-card__name { font-size: 20px; margin: var(--space-2) 0 2px; }
.team-card__title { font-size: 14px; color: var(--color-text-muted); margin-bottom: var(--space-1); }

/* Image placeholder frames (until real photography exists) */
.img-placeholder {
  background:
    linear-gradient(135deg, rgba(194,1,20,0.16), transparent 55%),
    var(--color-accent1);
  color: var(--color-accent2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.06em;
  text-transform: uppercase; text-align: center;
  min-height: 280px; width: 100%;
  padding: var(--space-3);
}
.img-placeholder--portrait { aspect-ratio: 4 / 5; min-height: 0; }
.img-placeholder--wide { aspect-ratio: 16 / 9; min-height: 0; }


/* Migrated bodies wrap video in <figure class="video"><iframe>. Core's
   responsive-embeds covers wp-block-embed; this covers the raw markup. */
figure.video, .wp-block-embed__wrapper { margin-block: var(--space-4); }
figure.video iframe, figure.video video, figure.video object,
.wp-block-embed__wrapper iframe {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; border: 0;
}

/* Dark and red bands: the section sets colour and everything inherits it, but
   captions and the facts-list term carry their own. Adlius Red on Deep Garnet
   is a prohibited pairing, so both reverse. */
.section--dark figcaption, .section--red figcaption,
.section--dark .caption, .section--red .caption { color: var(--color-accent2); }
.section--dark .facts-list dt { color: var(--color-cta-disabled); }
.section--red .facts-list dt { color: var(--color-white); }
.section--dark .facts-list dd, .section--red .facts-list dd { border-bottom-color: rgba(252,250,250,0.2); }
.section--dark .adlius-table td, .section--red .adlius-table td { border-bottom-color: rgba(252,250,250,0.2); }
.section--dark .adlius-table tbody tr:nth-child(even) td,
.section--red .adlius-table tbody tr:nth-child(even) td { background: rgba(252,250,250,0.06); }

/* ── 17 · Footer ── */
.footer {
  background: var(--color-body);
  color: var(--color-bg);
  padding-block: var(--space-6) var(--space-4);
}
.footer a { color: var(--color-bg); text-decoration: none; }
.footer a:hover { color: var(--color-cta-disabled); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 600px) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 2fr 1fr 1.2fr 1fr; } }
.footer__tagline { font-size: 14px; line-height: 1.6; color: var(--color-accent2); margin-top: var(--space-2); max-width: 44ch; }
.footer__heading {
  font-family: var(--font-heading); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-neutral); margin-bottom: var(--space-2);
}
.footer__links {
  list-style: none; margin: 0; padding: 0; max-width: none;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 15px;
}
.footer__links li { margin: 0; }
.footer__nap {
  font-style: normal; font-size: 15px;
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: var(--space-2);
}
.footer__nap-name { font-family: var(--font-heading); font-weight: 700; }
.footer__nap-line { color: var(--color-accent2); }
.footer__bottom { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid rgba(252,250,250,0.12); }
.footer__bottom p { font-size: 13px; color: var(--color-neutral); margin: 0; max-width: none; }

/* WooCommerce, square corners and brand buttons only. */
.woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button {
  border-radius: 0 !important;
  font-family: var(--font-heading) !important;
  font-weight: 700 !important;
  background: var(--color-cta) !important;
  color: var(--color-white) !important;
}
.woocommerce .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover { background: var(--color-cta-hover) !important; }

/* ── 18 · Utilities ── */
.text-center { text-align: center; }
.text-center .cta-group { justify-content: center; }
.text-center p, .text-center .lead, .text-center .cta-band__body { margin-inline: auto; }
.measure     { max-width: var(--measure); }
.measure-none { max-width: none; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack-4 > * + * { margin-top: var(--space-4); }
.stack-5 > * + * { margin-top: var(--space-5); }
.gap-top-4 { margin-top: var(--space-4); }
.gap-top-5 { margin-top: var(--space-5); }
.gap-top-6 { margin-top: var(--space-6); }
.hide-below-768 { display: none; }
@media (min-width: 768px) { .hide-below-768 { display: block; } }

/* ── 19 · Motion (Style Kit §7) ────────────────────────────────
   Everything below is opt-in: it needs JS (html.js) and a reader who has
   not asked for reduced motion. Continuous effects also need >= 768px.
   Only transform, opacity and filter animate, never layout.
   ──────────────────────────────────────────────────────────── */

/* Transitions that are interaction feedback, not entrance choreography,
   stay outside the gate; the reduce block below neutralises them. */
.card { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-3); }
.card--phase:hover { box-shadow: 0 12px 40px rgba(41,0,4,0.35); }
.faq__answer { transition: max-height 0.4s var(--ease-entrance); }
#reading-progress { transition: width 0.1s linear; }
.mobile-nav { opacity: 1; transition: opacity 0.3s ease; }

@media (prefers-reduced-motion: no-preference) {

  /* Scroll-triggered entrances (§7.1). Keyed on .js-ready, which main.js sets:
     a failed script leaves every block visible instead of blank. */
  .js-ready .reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.55s var(--ease-entrance), transform 0.55s var(--ease-entrance);
  }
  .js-ready .reveal.visible { opacity: 1; transform: none; }

  .js-ready .reveal-stagger > * {
    opacity: 0; transform: translateY(20px);
    transition: opacity 0.45s var(--ease-entrance) calc(var(--i, 0) * 80ms),
                transform 0.45s var(--ease-entrance) calc(var(--i, 0) * 80ms);
  }
  .js-ready .reveal-stagger.visible > * { opacity: 1; transform: none; }

  /* Hero headline word reveal (§7.2, LifeLong BlurText technique) */
  .js .hero-word {
    opacity: 0; filter: blur(8px); transform: translateY(14px);
    transition: opacity 0.6s var(--ease-entrance) calc(var(--i, 0) * 60ms),
                filter 0.6s var(--ease-entrance) calc(var(--i, 0) * 60ms),
                transform 0.6s var(--ease-entrance) calc(var(--i, 0) * 60ms);
  }
  .js .hero-word.in { opacity: 1; filter: blur(0); transform: none; }

  /* Cinematic entrance for the supporting hero lines (§7.2) */
  .js .hero__content .eyebrow,
  .js .hero__content .breadcrumb,
  .js .hero__content .subheading,
  .js .hero__content .cta-group,
  .js .hero__content h1.hero-entrance {
    opacity: 0; transform: translateY(32px);
    animation: heroEntrance 0.7s var(--ease-entrance) forwards;
  }
  .js .hero__content h1.hero-entrance { animation-delay: 0.15s; }
  .js .hero__content .eyebrow,
  .js .hero__content .breadcrumb { animation-delay: 0.1s; }
  .js .hero__content .subheading  { animation-delay: 0.45s; }
  .js .hero__content .cta-group   { animation-delay: 0.65s; }

  /* Mobile overlay fade */
  .js .mobile-nav { opacity: 0; }
  .js .mobile-nav.open { opacity: 1; }

  /* Continuous effects: desktop only (§4 of the LifeLong brief). */
  @media (min-width: 768px) {
    /* Hero settle, 1.06 to 1 over 8s, once (§7.2) */
    .js .hero__bg { transform: scale(1.06); transition: transform 8s ease; }
    .js .hero__bg.loaded { transform: none; }

    /* Primary CTA sheen, one slow pass every 6s, nothing else.
       Not on ghost or text buttons: the sheen marks the primary action. */
    .js .btn--primary::before {
      content: ''; position: absolute; inset: 0; z-index: -1;
      background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.22) 50%, transparent 65%);
      transform: translateX(-130%);
      animation: adliusSheen 6s ease-in-out infinite;
      pointer-events: none;
    }
    .js .btn--primary:hover::before { animation-play-state: paused; }
  }
}

@keyframes heroEntrance { to { opacity: 1; transform: none; } }
@keyframes adliusSheen {
  0%, 62% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}

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

/* ── 20 · Print ── */
@media print {
  .nav, .mobile-nav, .progress-bar, .skip-link,
  .footer__nav, .footer__legal-nav, .section-diagonal-bottom,
  .cta-group, .optin, .hero__bg { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
  .hero, .section--dark, .section--red, .card--phase, .footer {
    background: #fff !important; color: #000 !important;
  }
  .hero h1, .section--dark h2, .section--dark h3, .section--dark p,
  .section--red h2, .section--red p, .card--phase h3, .card--phase p,
  .footer, .footer a, .hero__content .subheading { color: #000 !important; }
  .section, .hero { padding-block: 12pt; min-height: 0; }
  h1, h2, h3 { break-after: avoid-page; }
  p, blockquote, li, .card, .geo-block { break-inside: avoid; }
  .card, .geo-block, .card--case, .card--pricing { border: 1px solid #999; box-shadow: none; }
  .article-body > *, .container { max-width: none; }
  .article-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .reveal, .reveal-stagger > *, .hero-word { opacity: 1 !important; transform: none !important; filter: none !important; }
}