/* Rawdha Alaqsa Technical Services — website v3
   "Evidence Ledger with a softer homeowner shell": calm statement sections,
   inspectable ledger rows and disclosed evidence units. Original system; no
   third-party fonts, frameworks, icon libraries or trackers.
   Radius is restrained on purpose — 28px only on genuine interactive/media
   objects, and exactly zero on ledgers, rules, tables and document records. */

:root {
  /* Core palette (contrast-tested by tests/contrast_contract.py) */
  --ink: #23485f;             /* deep petrol section ground */
  --ink-soft: #1e2a33;        /* near-black body text on light */
  --ink-muted: #4c5c67;       /* secondary text on light */
  --paper: #ffffff;           /* page ground */
  --sand: #e6e1d2;            /* warm sand alternate band */
  --line: #b0a986;            /* exact Yalla warm-sand hairline rule */
  --line-on-ink: #557b93;     /* hairline rule on petrol */
  --brass: #7a5c14;           /* deep gold accent on light: status, index, action */
  --brass-light: #e1be41;     /* warm gold accent on dark / CTA fill */
  --on-dark-accent: #e1be41;  /* accent token used on every dark surface */
  --paper-on-ink: #f4f6f7;    /* body text on dark */
  --muted-on-ink: #ccd8df;    /* secondary text on dark */

  /* Measure and rhythm */
  --container: 74rem;
  --measure: 68ch;
  --ledger-measure: 46ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --gap-compact: clamp(1rem, 2vw, 1.5rem);
  --section-tight: clamp(2.5rem, 5vw, 4rem);
  --section-wide: clamp(4rem, 10vw, 9rem);

  /* Radius contract: large on media/objects, medium on controls, small on
     badges, and zero on anything that behaves like a document. */
  --radius-media: 28px;
  --radius-control: 14px;
  --radius-badge: 8px;
  --radius-rule: 0;

  /* Targets */
  --tap: 44px;
  --edge-tap: 48px;
  --header-height: 64px;

  /* Motion budget: these are the only permitted durations. */
  --motion-rule: 180ms;
  --motion-mark: 120ms;
  --motion-caption: 150ms;
  --motion-edge: 200ms;

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

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

body {
  margin: 0;
  max-width: 100%;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.65;
  overflow-wrap: break-word;
}

body.is-locked { overflow: hidden; }

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.05rem, 1.4rem + 3vw, 3.7rem); max-width: 20ch; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.6vw, 2.5rem); max-width: 24ch; }
h3 { font-size: clamp(1.18rem, 1.08rem + 0.5vw, 1.42rem); }
h4 { font-size: 1.05rem; }

p, ul, ol, dl, table, figure, blockquote { margin: 0 0 1.15em; }
p, li { max-width: var(--measure); }

a {
  color: var(--brass);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--radius-badge);
}

[id] { scroll-margin-top: calc(var(--header-height) + 1.5rem); }

code { font-family: var(--font-mono); font-size: 0.86em; overflow-wrap: anywhere; }

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

.container.narrow { max-width: 52rem; }

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

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -120px;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 1rem;
  background: var(--ink);
  color: var(--paper-on-ink);
  border-radius: var(--radius-control);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus { top: 0.75rem; }

.staging-strip {
  margin: 0;
  max-width: none;
  padding: 0.5rem var(--gutter);
  background: var(--ink);
  color: var(--muted-on-ink);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: grid;
  grid-template-columns: var(--edge-tap) minmax(0, 1fr) var(--edge-tap);
  align-items: center;
  gap: 0.5rem;
  min-height: var(--header-height);
}

.brand {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap);
  color: var(--ink);
  text-decoration: none;
}

.brand-mark { flex: none; width: 32px; height: 32px; color: var(--brass); }

.brand-text { display: flex; flex-direction: column; line-height: 1.1; }

.brand-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.01em; }

.brand-sub {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.nav-toggle {
  grid-column: 3;
  justify-self: end;
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--edge-tap);
  height: var(--edge-tap);
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

html.js .nav-toggle { display: inline-flex; }

.nav-toggle-bars { position: relative; display: block; width: 20px; height: 2px; background: currentColor; }

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
}

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

.primary-nav {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding-bottom: 0.75rem;
}

.primary-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

.primary-nav li { max-width: none; }

.primary-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding-block: 0.35rem;
  color: var(--ink-soft);
  font-size: 1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.primary-nav a[aria-current="page"] {
  color: var(--ink);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 0 var(--brass);
}

.nav-close {
  align-self: center;
  min-height: var(--tap);
  margin-top: 0.85rem;
  padding: 0 1.2rem;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

html.js .primary-nav { display: none; }
html.js .primary-nav.is-open { display: flex; }
html:not(.js) .nav-close { display: none; }

.nav-cta { display: none; }

@media (min-width: 64rem) {
  .header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.5rem;
  }
  .brand { grid-column: 1; justify-self: start; }
  .nav-toggle { display: none !important; }
  html.js .primary-nav,
  .primary-nav {
    display: flex !important;
    grid-column: 2;
    flex-direction: row;
    justify-content: center;
    padding-bottom: 0;
  }
  .primary-nav ul { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.1rem; }
  .primary-nav a { min-height: var(--tap); padding-block: 0; border-bottom: 2px solid transparent; font-size: 0.92rem; }
  .primary-nav a:hover { border-bottom-color: var(--brass); }
  .primary-nav a[aria-current="page"] { border-bottom-color: var(--brass); box-shadow: none; }
  .nav-close { display: none; }
  .nav-cta {
    grid-column: 3;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 1.1rem;
    background: var(--brass-light);
    color: var(--ink-soft) !important;
    border: 1px solid var(--brass);
    border-radius: var(--radius-control);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
  }
}

/* --------------------------------------------------------------- buttons */

.button,
.button-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-control);
  font-weight: 600;
  text-decoration: none;
}

.button { background: var(--brass-light); color: var(--ink-soft) !important; border: 1px solid var(--brass); }
.button-quiet { background: transparent; color: var(--ink) !important; border: 1px solid var(--ink); }

.section-ink .button { background: var(--on-dark-accent); color: var(--ink-soft) !important; border-color: var(--on-dark-accent); }
.section-ink .button-quiet { color: var(--paper-on-ink) !important; border-color: var(--muted-on-ink); }

.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block: 1.5rem; }

.card-link { display: inline-flex; align-items: center; min-height: var(--tap); font-weight: 600; }

/* ------------------------------------------------------- section tempos */

.section { padding-block: var(--section-tight); border-top: 1px solid var(--line); }
.section-statement { padding-block: var(--section-wide); }
.section-ledger { background: var(--paper); }
.section-evidence { background: var(--sand); }
.section-sand { background: var(--sand); }
.hero { border-top: 0; padding-block: clamp(2.5rem, 7vw, 5.5rem) var(--section-tight); }

.section-ink {
  background: var(--ink);
  color: var(--paper-on-ink);
  border-top-color: var(--line-on-ink);
}

.section-ink h1,
.section-ink h2,
.section-ink h3,
.section-ink h4 { color: var(--paper-on-ink); }

.section-ink a { color: var(--on-dark-accent); }
.section-ink .eyebrow { color: var(--on-dark-accent); }
.section-ink .note,
.section-ink .limit,
.section-ink .app-notice { color: var(--muted-on-ink); }
.section-ink .lede { color: var(--paper-on-ink); }
.section-ink :focus-visible { outline-color: var(--on-dark-accent); }

.eyebrow {
  display: block;
  margin: 0 0 0.85rem;
  max-width: none;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--brass);
}

.lede {
  font-size: clamp(1.06rem, 1rem + 0.5vw, 1.28rem);
  line-height: 1.5;
  color: var(--ink-soft);
}

.note { font-size: 0.9rem; color: var(--ink-muted); }

.limit {
  margin-block: 1rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--brass);
  border-radius: var(--radius-rule);
  font-size: 0.9rem;
  color: var(--ink-muted);
}

.identity-line {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.section-ink .identity-line,
.site-footer .identity-line { color: var(--paper-on-ink); }

.split { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: 1fr; }

@media (min-width: 62rem) {
  .split { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); align-items: start; }
  .split > .split-aside { position: sticky; top: calc(var(--header-height) + 1.5rem); }
}

/* ------------------------------------------------------------------ hero */

.hero-grid { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); grid-template-columns: 1fr; }

@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
}

.hero-arabic {
  margin: 0 0 1.1rem;
  max-width: none;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 1rem + 0.7vw, 1.45rem);
  line-height: 1.7;
  color: var(--ink-muted);
}

.hero-summary { font-size: 1.06rem; color: var(--ink); }

/* ----------------------------------------------- evidence unit (media) */

.evidence-unit {
  margin: 0 0 1.5rem;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
}

.evidence-media img { width: 100%; height: auto; background: var(--sand); }

.evidence-meta {
  display: grid;
  gap: 0.6rem;
  padding: 1rem 1.15rem 1.15rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.evidence-caption { color: var(--ink); font-weight: 600; max-width: var(--measure); }

.evidence-record {
  display: grid;
  gap: 0.15rem 1rem;
  margin: 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  border-radius: var(--radius-rule);
  font-size: 0.8rem;
}

@media (min-width: 34rem) {
  .evidence-record { grid-template-columns: 10rem minmax(0, 1fr); }
}

.evidence-record dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.evidence-record dd { margin: 0 0 0.35rem; max-width: var(--measure); }

.evidence-disclosure { margin: 0; font-size: 0.82rem; color: var(--ink-muted); }

.section-ink .evidence-unit { background: transparent; border-color: var(--line-on-ink); }
.section-ink .evidence-meta,
.section-ink .evidence-record { border-top-color: var(--line-on-ink); color: var(--paper-on-ink); }
.section-ink .evidence-caption { color: var(--paper-on-ink); }
.section-ink .evidence-record dt,
.section-ink .evidence-disclosure { color: var(--muted-on-ink); }

.disclosure-badge {
  display: inline-block;
  align-self: start;
  padding: 0.18rem 0.55rem;
  border: 1px solid var(--brass);
  border-radius: var(--radius-badge);
  color: var(--brass);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-ink .disclosure-badge { border-color: var(--on-dark-accent); color: var(--on-dark-accent); }

.media-note { font-size: 0.86rem; color: var(--ink-muted); }

/* ------------------------------------------------------- ledger (square) */

.ledger {
  counter-reset: ledger;
  list-style: none;
  margin: 1.75rem 0 1.15rem;
  padding: 0;
  border-top: 1px solid var(--line);
  border-radius: var(--radius-rule);
}

.ledger > li {
  counter-increment: ledger;
  display: grid;
  gap: 0.25rem 1.4rem;
  grid-template-columns: 3rem minmax(0, 1fr);
  padding-block: 1.3rem;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-rule);
  max-width: none;
}

.ledger > li::before {
  content: counter(ledger, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--brass);
  padding-top: 0.3rem;
}

.ledger h3 { margin: 0 0 0.3rem; font-size: 1.08rem; }
.ledger p { margin: 0; max-width: var(--measure); }

.section-ink .ledger,
.section-ink .ledger > li { border-color: var(--line-on-ink); }
.section-ink .ledger > li::before { color: var(--on-dark-accent); }

@media (min-width: 62rem) {
  .ledger.ledger-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

/* --------------------------------------------------------- stage rail */

.stage-rail {
  display: grid;
  gap: var(--gap-compact);
  grid-template-columns: 1fr;
  margin-block: 2rem;
  counter-reset: stagerail;
}

@media (min-width: 62rem) {
  .stage-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.stage {
  padding-top: 1.1rem;
  border-top: 3px solid var(--brass);
  border-radius: var(--radius-rule);
}

.section-ink .stage { border-top-color: var(--on-dark-accent); }

.stage-index {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--brass);
}

.section-ink .stage-index { color: var(--on-dark-accent); }

.stage-map,
.stage-limit { font-size: 0.84rem; color: var(--ink-muted); margin-bottom: 0.4rem; }
.section-ink .stage-map,
.section-ink .stage-limit { color: var(--muted-on-ink); }

/* ------------------------------------------------------ service objects */

.service-grid {
  display: grid;
  gap: var(--gap-compact);
  grid-template-columns: 1fr;
  margin-block: 2rem;
}

@media (min-width: 48rem) {
  .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-grid > :last-child { grid-column: 1 / -1; }
}

@media (min-width: 64rem) {
  .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service-grid > :last-child { grid-column: auto; }
}

.service-object {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
}

.service-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 688 / 1060;
  object-fit: cover;
  object-position: center top;
  max-height: 22rem;
  background: var(--sand);
}

.service-body { padding: 1.15rem 1.25rem 1.35rem; }

.service-index {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  color: var(--brass);
}

.service-body h3 { margin-bottom: 0.4rem; }
.service-body h3 a { text-decoration: none; }
.service-body h3 a:hover { text-decoration: underline; }
.service-body p { margin: 0; font-size: 0.94rem; }

/* ------------------------------------------------------------ the story */

.story { margin-block: 2rem; }

.story-track { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-compact); }

.story-item {
  max-width: none;
  padding: 1.25rem 1.35rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
}

.story-index {
  display: block;
  margin-bottom: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  color: var(--brass);
}

.story-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.story-controls[hidden] { display: none; }

.story-button {
  min-height: var(--tap);
  padding: 0 1.1rem;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: var(--radius-control);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.story-status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.story:focus-visible { outline: 3px solid var(--brass); outline-offset: 6px; }

/* -------------------------------------------------- pending records */

.pending-grid { display: grid; gap: var(--gap-compact); grid-template-columns: 1fr; margin-block: 2rem; }

@media (min-width: 56rem) {
  .pending-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pending-record {
  padding: 1.35rem 1.4rem;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--radius-rule);
}

.section-ink .pending-record { background: transparent; border-color: var(--line-on-ink); }

.status-line { margin-bottom: 0.6rem; font-size: 0.84rem; color: var(--ink-muted); }
.section-ink .status-line { color: var(--muted-on-ink); }

.record-id { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-muted); }
.section-ink .record-id { color: var(--muted-on-ink); }

.status-pending {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border: 1px dashed var(--brass);
  border-radius: var(--radius-badge);
  color: var(--brass);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.section-ink .status-pending,
.site-footer .status-pending { border-color: var(--on-dark-accent); color: var(--on-dark-accent); }

.gate-list { margin: 1rem 0; padding-left: 1.3rem; }
.gate-list li { margin-bottom: 0.5rem; }

/* --------------------------------------------------------- edge controls */

.edge-controls {
  position: fixed;
  z-index: 30;
  inset-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom));
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  pointer-events: none;
}

.edge-controls[hidden] { display: none; }

.edge-button {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--edge-tap);
  padding: 0 1rem;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-media);
  color: var(--paper-on-ink);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--motion-edge) ease-out;
}

.edge-button:focus-visible { outline: 3px solid var(--on-dark-accent); outline-offset: 3px; }

.edge-start { margin-inline-end: auto; }
.edge-end { margin-inline-start: auto; }

/* -------------------------------------------------------------- modal */

.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }

.modal-backdrop { position: absolute; inset: 0; background: rgba(30, 42, 51, 0.72); }

.modal-panel {
  position: relative;
  width: min(38rem, 100%);
  max-height: min(85vh, 48rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--brass) var(--sand);
  scrollbar-width: auto;
  padding: 1.5rem 1.5rem 2.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
}

.modal-close {
  position: absolute;
  inset-inline-end: 0.75rem;
  top: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--tap);
  padding: 0 0.9rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.modal-panel h2 { margin-top: 2.5rem; }

/* --------------------------------------------------------------- FAQ */

.faq-list { margin-block: 1.75rem; border-top: 1px solid var(--line); border-radius: var(--radius-rule); }

.faq-item { margin: 0; border-bottom: 1px solid var(--line); border-radius: var(--radius-rule); }

.faq-item > summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--tap);
  padding-block: 0.85rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.faq-item > summary::marker { color: var(--brass); }
.faq-body { padding-bottom: 1rem; }
.faq-body :last-child { margin-bottom: 0; }

/* ------------------------------------------------- lists, cards, facts */

.grid { display: grid; gap: var(--gap-compact); grid-template-columns: 1fr; margin-block: 2rem; }

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

.card {
  padding: 1.4rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
}

.card h3 { margin-bottom: 0.4rem; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.section-ink .card { background: transparent; border-color: var(--line-on-ink); }

.callout {
  margin-block: 2rem;
  padding: 1.35rem 1.5rem;
  background: var(--sand);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius-rule);
}

.callout :last-child { margin-bottom: 0; }
.callout h3 { margin-bottom: 0.4rem; }
.section-ink .callout { background: #1b3a4d; border-left-color: var(--on-dark-accent); }
.section-evidence .callout, .section-sand .callout { background: var(--paper); }

.checklist, .exclusion-list { list-style: none; margin: 1rem 0; padding: 0; }
.checklist li, .exclusion-list li { position: relative; padding-left: 1.6rem; margin-bottom: 0.55rem; }

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid var(--brass);
  border-radius: 50%;
}

.section-ink .checklist li::before { border-color: var(--on-dark-accent); }

.exclusion-list li::before { content: "\2014"; position: absolute; left: 0; color: var(--ink-muted); }
.section-ink .exclusion-list li::before { color: var(--muted-on-ink); }

.stage-list { list-style: none; counter-reset: stage; margin: 1.75rem 0 0; padding: 0; }

.stage-list > li {
  counter-increment: stage;
  max-width: none;
  padding-block: 1.6rem;
  border-top: 1px solid var(--line);
  border-radius: var(--radius-rule);
}

.stage-list > li::before {
  content: "Stage " counter(stage);
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
}

.section-ink .stage-list > li { border-top-color: var(--line-on-ink); }
.section-ink .stage-list > li::before { color: var(--on-dark-accent); }

.fact-list { display: grid; gap: 0.3rem 1.5rem; margin: 1.25rem 0; }

@media (min-width: 40rem) { .fact-list { grid-template-columns: 14rem minmax(0, 1fr); } }

.fact-list dt {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.section-ink .fact-list dt { color: var(--muted-on-ink); }
.fact-list dd { margin: 0 0 0.7rem; max-width: var(--measure); }
@media (min-width: 40rem) { .fact-list dd { margin-bottom: 0.3rem; } }

.bands { counter-reset: band; list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: 1rem; }

.bands > li {
  counter-increment: band;
  max-width: none;
  padding: 1.35rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brass);
  border-radius: var(--radius-rule);
}

.band-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 1rem; margin-bottom: 0.5rem; }
.band-index { font-family: var(--font-mono); font-size: 0.78rem; color: var(--brass); letter-spacing: 0.1em; }
.band-name { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--ink); margin: 0; }

.band-value {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--ink-soft);
  background: var(--sand);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-badge);
  white-space: nowrap;
}

.bands p { margin: 0; }

.area-index { display: grid; gap: 0.4rem 1.25rem; grid-template-columns: 1fr; list-style: none; margin: 1.25rem 0 0; padding: 0; }

@media (min-width: 40rem) { .area-index { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .area-index { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.area-index li { max-width: none; }

.area-index a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-rule);
  text-decoration: none;
  font-weight: 600;
}

.area-entry { padding-block: 2rem; border-top: 1px solid var(--line); border-radius: var(--radius-rule); }
.area-entry h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem; }

.tag {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-badge);
  background: var(--sand);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-ink .tag { background: transparent; border-color: var(--line-on-ink); color: var(--muted-on-ink); }

.area-facts { display: grid; gap: 0.35rem 1.5rem; margin: 0.9rem 0 0; }
@media (min-width: 48rem) { .area-facts { grid-template-columns: 12rem minmax(0, 1fr); } }

.area-facts dt {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.area-facts dd { margin: 0 0 0.6rem; max-width: var(--measure); }

/* -------------------------------------------------------- contact routes */

.channel-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }

@media (min-width: 52rem) { .channel-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.channel-list li {
  max-width: none;
  padding: 1.3rem 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  background: var(--paper);
}

.section-ink .channel-list li { background: transparent; border-color: var(--line-on-ink); }

.channel-label {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}

.section-ink .channel-label { color: var(--on-dark-accent); }

.channel-state {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
}

.section-ink .channel-state { color: var(--paper-on-ink); }

.app-notice { display: block; margin-top: 0.35rem; font-size: 0.84rem; line-height: 1.5; color: var(--ink-muted); }

/* --------------------------------------------------------- breadcrumbs */

.breadcrumb { padding-block: 0.85rem; border-bottom: 1px solid var(--line); font-size: 0.84rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.35rem 0.6rem; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { max-width: none; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.6rem; color: var(--ink-muted); }

/* -------------------------------------------------------------- footer */

.site-footer {
  background: var(--ink);
  color: var(--paper-on-ink);
  padding-block: var(--section-tight) 2.5rem;
}

.site-footer h2,
.site-footer h3 { color: var(--paper-on-ink); }
.site-footer a { color: var(--on-dark-accent); }
.site-footer .app-notice,
.site-footer .note { color: var(--muted-on-ink); }
.site-footer :focus-visible { outline-color: var(--on-dark-accent); }

.footer-grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; }

@media (min-width: 48rem) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 68rem) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; } }

.footer-grid h3 {
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-on-ink);
  margin-bottom: 0.9rem;
}

.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { max-width: none; }
.footer-list a { display: inline-flex; align-items: center; min-height: var(--tap); }

.footer-note {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line-on-ink);
  border-radius: var(--radius-rule);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted-on-ink);
}

.footer-note p { max-width: 80ch; }
.footer-note p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- phone corrections
   GOLIVE-1 lane: phone-only legibility and target-size corrections. Scoped
   below 48rem so tablet and desktop rendering is byte-for-byte unchanged.

   WEB-VQA-001 note: the tablet band (768px) was left outside this block and
   measured 25 distinct selectors below 16px — brand-sub at 10.6px, eyebrow
   at 11.8px, nav/footer links at 13.4px. The tablet floor is applied as a
   separate appended block at the end of this file rather than by widening
   this query, so the phone lane stays byte-for-byte as GOLIVE-1 shipped it.
   Same palette, same fonts, same copy — size and hit-area only.

   Two floors are applied:
     * reading text (prose, links, list items, definitions, captions,
       notes, meta) is never below 1rem / 16px;
     * letterspaced uppercase micro-labels (eyebrows, badges, index marks,
       record keys) keep their label role but are lifted off 10-12px to a
       0.86rem / ~13.8px floor, which preserves the visual language. */

@media (max-width: 47.99rem) {
  /* -- reading text floor: 16px ------------------------------------- */
  .note,
  .limit,
  .media-note,
  .stage-map,
  .stage-limit,
  .status-line,
  .app-notice,
  .evidence-disclosure,
  .evidence-meta,
  .story-status,
  .identity-line,
  .breadcrumb,
  .footer-note,
  .service-body p,
  .band-value,
  .evidence-record,
  .evidence-record dd,
  .fact-list dd,
  .area-facts dd,
  .ledger p,
  .faq-body,
  .edge-button,
  .story-button,
  .modal-close,
  .nav-close { font-size: 1rem; }

  .evidence-caption { font-size: 1rem; }
  .ledger h3 { font-size: 1.12rem; }
  .band-name { font-size: 1.25rem; }
  .channel-state { font-size: 1.12rem; }
  .hero-summary { font-size: 1.08rem; }

  /* Mono runs stay proportionate to the raised body size. */
  code { font-size: 1em; }

  /* -- micro-label floor: 1rem / 16px, label role preserved ---------- */
  .brand-sub,
  .eyebrow,
  .disclosure-badge,
  .status-pending,
  .tag,
  .service-index,
  .story-index,
  .stage-index,
  .band-index,
  .record-id,
  .channel-label,
  .footer-grid h3,
  .staging-strip,
  .stage-list > li::before,
  .evidence-record dt,
  .fact-list dt,
  .area-facts dt { font-size: 1rem; }

  /* Letterspacing tuned for the 10-12px label sizes would push the
     longest labels toward the gutter at 16px, so ease it back
     proportionally. The uppercase label role is unchanged. */
  .brand-sub { letter-spacing: 0.08em; }
  .eyebrow,
  .footer-grid h3 { letter-spacing: 0.1em; }
  .staging-strip { letter-spacing: 0.04em; }
  .disclosure-badge,
  .status-pending,
  .tag { letter-spacing: 0.06em; }
  .service-index,
  .story-index,
  .stage-index,
  .band-index,
  .record-id,
  .channel-label,
  .stage-list > li::before,
  .evidence-record dt,
  .fact-list dt,
  .area-facts dt { letter-spacing: 0.06em; }

  /* -- tap targets --------------------------------------------------- */
  /* Breadcrumb links were 38x19; give them a real 44px hit area. */
  .breadcrumb { padding-block: 0.6rem; }
  .breadcrumb ol { gap: 0.1rem 0.6rem; align-items: center; }
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    min-width: var(--tap);
    padding-inline: 0.25rem;
  }

  /* Footer links already cleared 44px tall but shrank to 38px wide;
     make them fill the column so the whole row is tappable. */
  .footer-list a {
    display: flex;
    width: 100%;
    padding-inline: 0.15rem;
  }

  /* Card and service headings act as links; give the link itself the
     full 44px row rather than the 28px text box. */
  .service-body h3 a,
  .ledger h3 a,
  .card h3 a {
    display: flex;
    align-items: center;
    min-height: var(--tap);
  }

  /* Inline links inside running prose stay inline by design (WCAG 2.2
     target-size exempts them); widen the line box so neighbouring
     targets are not crowded and the underline is easy to hit. */
  main p,
  main li,
  .footer-note p { line-height: 1.75; }
  main p a,
  main li a,
  .footer-note a { padding-block: 0.15rem; }

  /* -- rhythm -------------------------------------------------------- */
  /* Keep the two floating edge buttons inside the 360px gutter now that
     their label sits at 16px. */
  .edge-controls { gap: 0.5rem; }
  .edge-button { padding: 0 0.85rem; gap: 0.3rem; }

  .band-head { gap: 0.3rem 0.75rem; }
  .area-entry h3 { gap: 0.4rem 0.7rem; }
}

/* On the narrowest phones (320-375) the band price range is a nowrap
   token; at the corrected 16px size its min-content width exceeds the
   band padding box and pushed the page 2px wide at 320. Tighten the band
   padding and let the range break at its spaces rather than overflow.
   Verified: no horizontal overflow at 320/360/390/414. */
@media (max-width: 23.4375rem) {
  .bands > li { padding: 1.35rem 1.15rem; }
  .band-value { white-space: normal; }
}

/* ------------------------------------------------------ motion, contrast */

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

@media (prefers-contrast: more) {
  :root {
    --ink-muted: #38464f;
    --line: #8c8058;
    --brass: #5f4610;
    --muted-on-ink: #eef4f7;
  }
  a { text-decoration-thickness: 2px; }
}

@media (forced-colors: active) {
  .card,
  .callout,
  .bands > li,
  .channel-list li,
  .service-object,
  .story-item,
  .pending-record,
  .modal-panel,
  .evidence-unit { border: 1px solid CanvasText; }
  .button,
  .button-quiet,
  .nav-cta,
  .edge-button,
  .story-button,
  .modal-close,
  .nav-close { border: 1px solid ButtonText; }
}

@media print {
  .site-header,
  .staging-strip,
  .edge-controls,
  .modal,
  .skip-link { display: none !important; }
  body { background: #fff; color: #000; }
  .faq-body { display: block !important; }
}

/* ============================================================ GOLIVE-2
   Desktop visual quality and alignment pass (task t_5d95b019).
   Correction and polish only: no brand colour, font, copy or imagery
   change, and no mobile/responsive breakpoint is introduced or altered.
   Every rule below is either a control-state rule (hover/focus, applies
   at all widths by design) or gated at >=44rem/64rem, i.e. desktop. */

/* 1. Control sizing — one confident button height across the site.
   .button/.button-quiet computed to 49px while .story-button, .nav-close
   and .modal-close sat at 44px, so control rows read as uneven. All
   controls now share the same min-height and horizontal padding rhythm.
   Heights only grow, so no tap target is reduced. */
.button,
.button-quiet,
.nav-cta,
.nav-close,
.story-button,
.modal-close {
  min-height: 49px;
}

.nav-close,
.story-button,
.modal-close {
  align-items: center;
  justify-content: center;
  padding-inline: 1.4rem;
}

/* .nav-close is menu-only furniture and stays display:none at >=64rem —
   never re-assert its display here. */
.story-button,
.modal-close { display: inline-flex; }

/* 2. Hover states — previously only three hover rules existed in the whole
   sheet, so most interactive objects were visually inert on desktop.
   These use existing tokens only. */
.button:hover,
.nav-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper) !important;
}

.section-ink .button:hover {
  background: var(--paper-on-ink);
  border-color: var(--paper-on-ink);
  color: var(--ink) !important;
}

.button-quiet:hover,
.story-button:hover,
.nav-close:hover,
.modal-close:hover {
  background: var(--sand);
}

.section-ink .button-quiet:hover {
  background: transparent;
  border-color: var(--on-dark-accent);
  color: var(--on-dark-accent) !important;
}

.card-link:hover { text-decoration-thickness: 2px; }

.service-object:hover,
.card:hover { border-color: var(--brass); }

.section-ink .service-object:hover,
.section-ink .card:hover { border-color: var(--on-dark-accent); }

.button,
.button-quiet,
.nav-cta,
.nav-close,
.story-button,
.modal-close,
.card,
.service-object {
  transition: background-color var(--motion-mark) ease,
              border-color var(--motion-mark) ease,
              color var(--motion-mark) ease;
}

/* 3. Card grids — equalise the internal baseline so the trailing link in
   each card of a row sits on one line instead of floating at whatever
   height the copy ends. Grid already stretches the boxes; this aligns
   what is inside them. Desktop-only (grid becomes multi-column at 44rem). */
@media (min-width: 44rem) {
  .grid-2 > .card,
  .grid-3 > .card {
    display: flex;
    flex-direction: column;
  }

  .grid-2 > .card > p:last-child,
  .grid-3 > .card > p:last-child { margin-top: auto; }

  .grid-2 > .card > p:last-child:has(.card-link),
  .grid-3 > .card > p:last-child:has(.card-link) { padding-top: 0.35rem; }

  .service-object .service-body {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  .service-object .service-body > p:last-child { margin-bottom: 0; }
}

/* 4. Vertical rhythm — the trailing paragraph/link of a section block was
   inheriting a 1.15em margin that read as a different gap depending on
   what preceded it. Normalise the closing element of every section. */
@media (min-width: 64rem) {
  .section > .container > :last-child,
  .section > .container > * > :last-child { margin-bottom: 0; }

  .split > .split-aside > :last-child { margin-bottom: 0; }
}

/* 5. Focus — the global outline is brass on light and gold on ink; both
   pass 3:1 against their grounds. Make it unmissable and never clipped by
   a card edge, and give controls a matching offset so focus never reads
   as a border change. */
:focus-visible { outline-width: 3px; outline-offset: 3px; }

.button:focus-visible,
.button-quiet:focus-visible,
.nav-cta:focus-visible,
.nav-close:focus-visible,
.story-button:focus-visible,
.modal-close:focus-visible { outline-offset: 4px; }

.card:focus-within,
.service-object:focus-within { border-color: var(--brass); }

.section-ink .card:focus-within,
.section-ink .service-object:focus-within { border-color: var(--on-dark-accent); }

@media (prefers-reduced-motion: reduce) {
  .button,
  .button-quiet,
  .nav-cta,
  .nav-close,
  .story-button,
  .modal-close,
  .card,
  .service-object { transition-duration: 0.001ms !important; }
}

/* 6. Service plate crop — REVIEWED AND DELIBERATELY NOT CHANGED.
   The 688x1060 illustrations render object-fit:cover, top-anchored, into a
   22rem box, which clips the base of the drawing. An object-fit:contain
   alternative was built and rendered at 1440 and 1920: because each
   controlled asset carries its own cream ground and rounded corner, contain
   produced visible vertical seams where the asset ground met --sand, which
   is worse than the clean top-anchored crop. The crop is intentional
   framing, the subject reads correctly, and changing the plate assets
   themselves is outside this lane. Left as-is; recorded in
   evidence/GOLIVE_DESKTOP.md as an accepted, not a hidden, defect. */



/* ============================================================ WEB-AR-001
   Arabic RTL support (task t_41279b6b).

   APPENDED BLOCK ONLY. No rule above this comment is edited, reordered or
   deleted, and every selector below is qualified with `.rtl-page` (set on
   <body> of the six /ar/villa-renovation/ pages) or [dir="rtl"], so no
   English-facing rule is reachable from these declarations. Removing this
   block restores the stylesheet to its exact pre-WEB-AR-001 state.

   What it does, and nothing more:
     1. Arabic-first font stack (the Latin display serif has no Arabic).
     2. Mirrors the handful of physical-direction rules the shared
        components still use (padding-left / border-left / left / margin-right).
     3. Removes uppercase + wide letter-spacing from Arabic label text —
        both are meaningless in Arabic script and letter-spacing actively
        breaks the joined letterforms.
     4. Latin-locked elements (phone number, English nav links) are kept
        LTR inside the RTL flow. */

/* 1. Type ------------------------------------------------------------- */

.rtl-page {
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Al Bayan", "Segoe UI",
               "Dubai", "Tahoma", system-ui, sans-serif;
  line-height: 1.85;
}

.rtl-page h1,
.rtl-page h2,
.rtl-page h3,
.rtl-page h4,
.rtl-page .brand-name,
.rtl-page .faq-item > summary {
  font-family: "Noto Naskh Arabic", "Geeza Pro", "Al Bayan", "Dubai",
               "Tahoma", Georgia, serif;
  line-height: 1.45;
}

/* Arabic has no case and does not tolerate tracking. */
.rtl-page .eyebrow,
.rtl-page .fact-list dt,
.rtl-page .evidence-record dt,
.rtl-page .brand-sub,
.rtl-page .identity-line,
.rtl-page .disclosure-badge,
.rtl-page .status-pending {
  text-transform: none;
  letter-spacing: 0;
  font-family: inherit;
}

.rtl-page .ledger > li::before {
  letter-spacing: 0;
}

/* 2. Direction mirroring for shared components ------------------------ */

.rtl-page .skip-link { left: auto; right: 0.75rem; }

.rtl-page .limit {
  padding-left: 0;
  padding-right: 0.9rem;
  border-left: 0;
  border-right: 2px solid var(--brass);
}

.rtl-page .callout {
  border-left: 0;
  border-right: 3px solid var(--ink);
}

.rtl-page .section-ink .callout {
  border-left-color: transparent;
  border-right-color: var(--on-dark-accent);
}

.rtl-page .checklist li,
.rtl-page .exclusion-list li {
  padding-left: 0;
  padding-right: 1.6rem;
}

.rtl-page .checklist li::before,
.rtl-page .exclusion-list li::before {
  left: auto;
  right: 0;
}

.rtl-page .gate-list { padding-left: 0; padding-right: 1.3rem; }

.rtl-page .bands > li {
  border-left: 1px solid var(--line);
  border-right: 3px solid var(--brass);
}

.rtl-page .breadcrumb li + li::before { margin-right: 0; margin-left: 0.6rem; }

.rtl-page .nav-toggle-bars::before,
.rtl-page .nav-toggle-bars::after { left: auto; right: 0; }

/* 3. Latin-locked runs inside the Arabic flow -------------------------- */

.rtl-page a[href^="tel:"],
.rtl-page a[href^="mailto:"],
.rtl-page a[hreflang="en"],
.rtl-page [lang="en"] {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-body);
}

.rtl-page .footer-list a[hreflang="en"],
.rtl-page .primary-nav a[hreflang="en"] { display: inline-block; }

/* ============================================================ WEB-VQA-001
   Visual judgement pass (task t_c0b2a1a6) — correction and polish only.

   APPENDED BLOCK ONLY. No rule above this comment is edited, reordered or
   deleted. No palette token, no copy, no contact route, no GA4 tag and no
   layout structure is changed. Removing this block restores the stylesheet
   to its exact pre-WEB-VQA-001 state.

   Every item below traces to a defect observed in a live screenshot at
   test-output/vqa/shots/ or in the capture telemetry at
   test-output/vqa/live-mobile.json / live-wide.json. */

/* 1. Tablet legibility floor -------------------------------------------
   Measured: at 768x1024 the live site renders 25 distinct selectors below
   16px on 30/30 routes (brand-sub 10.6px, eyebrow 11.8px, nav and footer
   links 13.4px, evidence-record dt 11.2px, dd 12.8px). The 16px floor
   shipped in GOLIVE-1 stops at 47.99rem, so the whole tablet band fell
   through it. This lifts the same selectors, with the same reduced
   letter-spacing treatment, across 48rem-63.99rem. Desktop is untouched. */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .note,
  .limit,
  .media-note,
  .stage-map,
  .stage-limit,
  .status-line,
  .app-notice,
  .evidence-disclosure,
  .evidence-meta,
  .story-status,
  .identity-line,
  .breadcrumb,
  .footer-note,
  .service-body p,
  .band-value,
  .evidence-record,
  .evidence-record dd,
  .fact-list dd,
  .area-facts dd,
  .ledger p,
  .faq-body,
  .evidence-caption { font-size: 1rem; }

  .brand-sub,
  .eyebrow,
  .disclosure-badge,
  .status-pending,
  .tag,
  .service-index,
  .story-index,
  .stage-index,
  .band-index,
  .record-id,
  .channel-label,
  .footer-grid h3,
  .stage-list > li::before,
  .evidence-record dt,
  .fact-list dt,
  .area-facts dt { font-size: 1rem; }

  .brand-sub { letter-spacing: 0.08em; }
  .eyebrow,
  .footer-grid h3 { letter-spacing: 0.1em; }
  .disclosure-badge,
  .status-pending,
  .tag { letter-spacing: 0.06em; }
  .service-index,
  .story-index,
  .stage-index,
  .band-index,
  .record-id,
  .channel-label,
  .stage-list > li::before,
  .evidence-record dt,
  .fact-list dt,
  .area-facts dt { letter-spacing: 0.06em; }

  .primary-nav a,
  .footer-list a { font-size: 1rem; }

  /* Mono runs stay proportionate to the raised body size, as on phones. */
  code { font-size: 1em; }
}

/* 2. Stacked evidence figures --------------------------------------------
   Observed on every trade service page (kitchen y~1080, bathroom y~1085,
   wardrobes y~1077 at 1440): two .evidence-unit figures in the same column
   butt together with only the collapsed figure margin between them, which
   reads as a layout fault rather than two separate exhibits. Give a
   sibling figure the same separation the section above it uses. */
.evidence-unit + .evidence-unit { margin-top: 2rem; }
.evidence-unit + .media-note { margin-top: 1.5rem; }

/* 3. Inline pending badges ------------------------------------------------
   Observed on areas/ (three occurrences per viewport) and gallery/: the
   .status-pending pill sits inline with the "Reviewed <date>" run that
   follows it, riding ~3px above that text's baseline and forcing the date
   to orphan-wrap onto its own line on narrow widths. Align the pill to the
   text it shares a line with and keep it from being split from its label. */
.status-pending {
  vertical-align: baseline;
  margin-inline-end: 0.35rem;
}

dd > .status-pending:first-child { margin-bottom: 0.15rem; }

/* 4. Heading orphans ------------------------------------------------------
   Observed: "How a Al Barsha 3 project runs" drops the numeral onto its own
   line at 1440; the Arabic h1s orphan "بارك" and "ميدوز"; gallery breaks
   "Eight fields, all of / them". text-wrap:balance is a progressive
   enhancement — browsers without it render exactly as before. */
h1, h2, h3 { text-wrap: balance; }
.lede { text-wrap: pretty; }

/* 5. Trailing figure spacing inside a split column ------------------------
   Observed on villa-renovation/* and services/*: the figure column of a
   .split ends flush against the next section's top rule because the
   figure's own bottom margin collapses into the section padding. */
.split > div > .evidence-unit:last-child { margin-bottom: 0; }

/* ============================================================ WEB-FIX-001
   Layout and typography defect pass (task t_74fb78d1, owner Asaad).

   APPENDED BLOCK ONLY. No rule above this comment is edited, reordered or
   deleted. No palette token VALUE is changed (distribution only), no copy,
   no heading, no contact route, no GA4 tag, no image is added or removed,
   and no Arabic page text is touched. Deleting this block restores the
   stylesheet to its exact pre-WEB-FIX-001 state.

   Every item traces to a measured before-state in
   test-output/webfix001/probe-before.json and a before screenshot in
   test-output/webfix001/before/. See evidence/LAYOUT_DEFECT_FIXES.md. */

/* --- 1. FOOTER DOMINANCE -------------------------------------------------
   Measured before (mobile 390, full-page): footer 1843-2126px tall on every
   route. On the short routes that is 27% of /faqs/ and 30% of /privacy/ —
   the footer out-weighs the page. Causes: a single-column stack of 8+4+8
   link rows each forced to a 44px row, 2.25rem grid gaps, and a four-
   paragraph legal note repeated at full length.

   Fix, phones only (<48rem), so tablet/desktop rhythm is untouched:
     * the two pure-navigation columns (Site, Services) go two-up, which
       halves their stack height while every row keeps its 44px target;
     * grid gap and block padding tightened;
     * the legal note's paragraph rhythm tightened.
   Nothing is removed and no link is dropped, so the footer remains a full
   sitemap for crawlers and for keyboard users. */
@media (max-width: 47.99rem) {
  .site-footer { padding-block: 2.25rem 1.75rem; }

  .footer-grid { gap: 1.5rem; }

  .footer-grid h3 { margin-bottom: 0.5rem; }

  /* Two-up the navigation columns. Row height is unchanged (min-height
     stays var(--tap)); only the number of rows halves. */
  .footer-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }

  .footer-list a { padding-inline: 0.15rem; }

  .footer-note { margin-top: 1.75rem; padding-top: 1.25rem; }
  .footer-note p { margin-bottom: 0.7rem; }
}

/* --- 2. COLUMN MISALIGNMENT ---------------------------------------------
   Measured before at 1440: /faqs/ paints 5 containers at x=122 and one at
   x=298; /privacy/ paints 3 at x=122 and 5 at x=298. That second edge is
   `.container.narrow` (max-width 52rem) sitting inside sections whose hero,
   CTA and footer use the 74rem container — two competing left edges down
   one page, which is exactly the "reads as broken" finding.

   Fix: keep the narrow reading measure (it is a legibility decision, not an
   accident) but anchor it to the SAME left edge as every other container
   instead of centring it. One edge down the page at every width. */
.container.narrow {
  margin-inline: auto;
  max-width: var(--container);
}

.container.narrow > * {
  max-width: 52rem;
}

/* The narrow column's own grid/flex children must not be re-clamped twice. */
.container.narrow > .faq-list,
.container.narrow > .ledger,
.container.narrow > .grid { max-width: 52rem; }

/* --- 3. FIGURE GAPS -----------------------------------------------------
   Measured before: adjacent .evidence-unit figures inside a shared column
   sit 32px apart on kitchen, bathroom and areas at all three viewports —
   less than the 1.5rem figure margin reads as, and visibly tighter than the
   surrounding rhythm, so the pair looks butted rather than paired.
   WEB-VQA-001 added `+ .evidence-unit { margin-top: 2rem }`, which the
   collapsed 1.5rem bottom margin partly ate. Set the separation explicitly
   and give paired figures a real gutter. */
.evidence-unit + .evidence-unit { margin-top: 2.5rem; }

@media (min-width: 48rem) {
  .evidence-unit + .evidence-unit { margin-top: 3rem; }
}

/* Where two figures are laid side by side in a grid, give them a true
   gutter and equal heights rather than whatever the content produces. */
.evidence-pair {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: 1fr;
  align-items: stretch;
}

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

.evidence-pair > .evidence-unit {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.evidence-pair > .evidence-unit + .evidence-unit { margin-top: 0; }
.evidence-pair > .evidence-unit > .evidence-meta { flex: 1; }

/* --- 4. FIGURE / HEADING MISALIGNMENT -----------------------------------
   In a .split the aside carries the eyebrow + h2 and the body column opens
   with a figure. The heading block's own top margin is zero but the figure
   inherits the section's flow position, so the figure top lands ~40px below
   the heading's cap height at >=62rem. Pull the first figure of the body
   column up onto the heading line. Gated to the width at which .split
   actually becomes two columns, so the stacked mobile order is unaffected. */
@media (min-width: 62rem) {
  .split > div > .evidence-unit:first-child,
  .split > div > .evidence-pair:first-child { margin-top: -0.35rem; }

  .split > .split-aside > .eyebrow:first-child { margin-top: 0; }
}

/* --- 5. TEXT UNDER 16px -------------------------------------------------
   Measured before at 1440: 520 sub-16px text occurrences across 30 distinct
   selectors — nav/footer links 13.4-14.7px, evidence-record dt 11.2px and
   dd 12.8px, .eyebrow 11.8px, .disclosure-badge 10.6px, .brand-sub 10.6px,
   .evidence-caption 13.8px, .evidence-disclosure 13.1px. The phone lane
   (GOLIVE-1) and the tablet lane (WEB-VQA-001) both lift these; DESKTOP was
   never covered, so the whole evidence/meta system reads at 10-13px on the
   viewport most owners review the site on.

   The card's hard floor is "body text on mobile must never be below 16px" —
   already true, and re-asserted below for every width so no future rule can
   drop under it. Reading text goes to 16px everywhere; the letterspaced
   uppercase micro-labels are lifted to 0.85rem/13.6px at >=64rem, which
   preserves their label role (they are not body text) while removing the
   10.6px sizes that read as fine print. */
.note,
.limit,
.media-note,
.stage-map,
.stage-limit,
.status-line,
.app-notice,
.evidence-disclosure,
.evidence-meta,
.evidence-caption,
.evidence-record,
.evidence-record dd,
.fact-list dd,
.area-facts dd,
.ledger p,
.faq-body,
.story-status,
.identity-line,
.breadcrumb,
.footer-note,
.service-body p,
.band-value,
.primary-nav a,
.footer-list a,
.nav-cta,
.edge-button,
.card-link { font-size: 1rem; }

/* A .status-pending PARAGRAPH is running text carrying a phone link, not a
   pill; only the inline span form is a micro-label. */
p.status-pending,
p.status-pending a { font-size: 1rem; }

/* Mono runs stay proportionate to the body size at every width, as the
   phone and tablet lanes already do. */
code { font-size: 1em; }

@media (min-width: 64rem) {
  .eyebrow,
  .disclosure-badge,
  .brand-sub,
  span.status-pending,
  .tag,
  .service-index,
  .story-index,
  .stage-index,
  .band-index,
  .record-id,
  .channel-label,
  .footer-grid h3,
  .stage-list > li::before,
  .evidence-record dt,
  .fact-list dt,
  .area-facts dt { font-size: 0.85rem; }

  .eyebrow,
  .footer-grid h3 { letter-spacing: 0.14em; }
  .brand-sub { letter-spacing: 0.12em; }
  .disclosure-badge,
  .status-pending,
  .tag { letter-spacing: 0.07em; }
}

/* --- 6. LONG UNBROKEN LISTS ---------------------------------------------
   Measured before: /how-it-works/ .stage-list runs 4023px unbroken on
   mobile; the 10-row .ledger runs 2074px on kitchen, bathroom and the
   community template; /services/ .bands runs 1137px. A reader gets no
   landmark for two full screens.

   Fix without touching copy or structure:
     * a ledger of seven rows or more goes two-column at >=62rem (the
       existing .ledger-two rule proves the pattern; `:has()` generalises it
       to any long ledger, which is where the wall starts);
     * alternate ledger rows take a very light sand wash so the eye can
       count position within the list;
     * the first stage-list row takes a gold rule so the sequence reads as
       stations rather than another run of paragraphs. */
@media (min-width: 62rem) {
  .ledger:has(> li:nth-child(7)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 3rem;
    align-items: start;
  }

  .ledger:has(> li:nth-child(7)) > li { break-inside: avoid; }
}

.ledger > li:nth-child(even) { background: color-mix(in srgb, var(--sand) 34%, transparent); }
.section-evidence .ledger > li:nth-child(even),
.section-sand .ledger > li:nth-child(even) { background: color-mix(in srgb, var(--paper) 55%, transparent); }
.section-ink .ledger > li:nth-child(even) { background: color-mix(in srgb, var(--paper) 5%, transparent); }

.ledger > li { padding-inline: 0.6rem; }

.stage-list > li { border-top-width: 1px; }
.stage-list > li::before { color: var(--brass); }

.stage-list > li:first-child { border-top: 3px solid var(--brass); }

/* --- 7. FAQ AFFORDANCE ---------------------------------------------------
   Before: nine <summary> rows rendering as underlined links with only the
   UA triangle marker, which the vision pass read as a sitemap. Replace the
   default marker with an explicit, animated plus/minus disclosure sign in
   gold, and give the row a hover/open state so it reads as a control. */
.faq-item > summary { list-style: none; position: relative; padding-inline-end: 2.5rem; }
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }

.faq-item > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.35rem;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.425rem;
  background:
    linear-gradient(var(--brass), var(--brass)) center / 100% 2px no-repeat,
    linear-gradient(var(--brass), var(--brass)) center / 2px 100% no-repeat;
  transition: transform var(--motion-mark) ease, opacity var(--motion-mark) ease;
}

.faq-item[open] > summary::after { transform: rotate(90deg); background-size: 100% 2px, 0 100%; }

.faq-item > summary:hover { color: var(--brass); }
.faq-item[open] > summary { color: var(--brass); }

.section-ink .faq-item > summary::after,
.site-footer .faq-item > summary::after {
  background:
    linear-gradient(var(--on-dark-accent), var(--on-dark-accent)) center / 100% 2px no-repeat,
    linear-gradient(var(--on-dark-accent), var(--on-dark-accent)) center / 2px 100% no-repeat;
}

.section-ink .faq-item > summary:hover,
.section-ink .faq-item[open] > summary { color: var(--on-dark-accent); }

@media (prefers-reduced-motion: reduce) {
  .faq-item > summary::after { transition-duration: 0.001ms !important; }
}

/* --- 8. DEAD VERTICAL GAPS ----------------------------------------------
   /faqs/ y~770-840: the hero section closes with a .limit block whose
   bottom margin stacks on top of the next section's padding, leaving a
   ~70px band of nothing between two rules. Collapse the trailing margin of
   the last child of any section container at every width (GOLIVE-2 already
   did this at >=64rem only, which is why it survived on mobile). */
.section > .container > :last-child,
.section > .container > * > :last-child { margin-bottom: 0; }

.hero .limit:last-child,
.hero .note:last-child { margin-bottom: 0; }

/* --- 9. BADGE BASELINE --------------------------------------------------
   The .status-pending / .disclosure-badge pills are inline-block with their
   own padding, so at y~1265 on /areas/ and /gallery/ they ride above the
   run of text they share a line with. WEB-VQA-001 set vertical-align on
   .status-pending only; .disclosure-badge and .tag have the same geometry
   and the same bug. Align all three to the text baseline and give the pill
   a line-height that matches its neighbours. */
.status-pending,
.disclosure-badge,
.tag {
  vertical-align: baseline;
  line-height: 1.35;
}

.disclosure-badge,
.tag { margin-inline-end: 0.35rem; }

.evidence-meta > .disclosure-badge { align-self: start; }

/* --- 10. GOLD DISTRIBUTION ----------------------------------------------
   The four vision passes found gold "appears almost nowhere" — before this
   block it carried buttons, list counters and focus rings and essentially
   nothing else, leaving cream and petrol to hold 70-90% of every page.

   Distribution only: no token VALUE changes. WCAG AA is a hard floor, so
   #e1be41 (--brass-light, ~1.7:1 on white) is used ONLY as a fill, rule or
   mark, never behind body text; anything that carries text on a light
   ground uses --brass #7a5c14 (4.9:1 on white). On the petrol ground gold
   is the established accent already (--on-dark-accent). */

/* Section eyebrows get a short gold rule, so every section opens with the
   accent instead of only the ones with a button. */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 2px;
  margin-inline-end: 0.6rem;
  vertical-align: 0.28em;
  background: var(--brass-light);
}

.section-ink .eyebrow::before { background: var(--on-dark-accent); }

/* Section rules: the hairline that opens every section picks up a gold
   leading segment, which reads as a deliberate system at scroll speed. */
.section { position: relative; }

.section::before {
  content: "";
  position: absolute;
  inset-block-start: -1px;
  inset-inline-start: 0;
  width: clamp(3rem, 8vw, 7rem);
  height: 3px;
  background: var(--brass-light);
}

.hero::before { content: none; }
.section-ink::before { background: var(--on-dark-accent); }

/* Active navigation state already uses a gold underline; make the same
   mark available on hover so the accent is present during interaction. */
.primary-nav a:hover { box-shadow: inset 0 -3px 0 0 var(--brass-light); }

/* Card and evidence objects take a gold top rule rather than a flat sand
   border on all four sides — accent without changing the border token. */
.card,
.service-object,
.evidence-unit { border-top: 3px solid var(--brass-light); }

.section-ink .card,
.section-ink .service-object { border-top-color: var(--on-dark-accent); }

/* Quiet buttons pick up a gold edge so a CTA pair reads as one system. */
.button-quiet { border-color: var(--brass); }

/* Callouts already carry a petrol left rule; alternate it to gold so the
   accent recurs down long documents. */
.callout { border-left-color: var(--brass-light); }
.section-ink .callout { border-left-color: var(--on-dark-accent); }

/* Checklist ticks and ledger counters are the highest-frequency marks on
   the site; they were --brass only. Keep --brass where the mark sits on
   white (it is a glyph, treated as text) and use the lighter gold for the
   purely geometric tick ring, which carries no text. */
.checklist li::before { border-color: var(--brass-light); }
.section-ink .checklist li::before { border-color: var(--on-dark-accent); }



/* ============================================================ WEB-UPLIFT-001
   Hero, section rhythm and accent distribution — task t_c872af45, agent
   hermes-video, 2026-08-28. Appended block; every rule below is additive and
   deleting this fence restores the stylesheet to its exact pre-WEB-UPLIFT-001
   state. No palette VALUE is changed (petrol #23485f, sand #b0a986/#e6e1d2,
   gold #e1be41, brass #7a5c14 are used exactly as tokenised); no copy, no
   contact route, no GA4 tag, no HTML. Gold #e1be41 is never used for body
   text on light — the darkened brass token carries all gold-toned text.
   ------------------------------------------------------------------------ */

/* 1. HERO — every route now opens on a petrol band ------------------------
   The hero was heading + two buttons + grey microcopy on white on all 30
   routes. It is now a full-bleed petrol ground with a gold hairline, a gold
   eyebrow, white headline and the media card sitting on the dark as a lifted
   white object. Body copy inside the hero is --paper-on-ink (#f4f6f7) on
   #23485f = 11.1:1; secondary copy is --muted-on-ink (#ccd8df) = 7.0:1. Both
   clear AA comfortably. The evidence card keeps its own light ground, so
   every provenance badge, caption, record and disclosure line keeps the exact
   contrast it was contract-tested at. */

.hero {
  position: relative;
  background:
    radial-gradient(120% 100% at 82% 0%, #2b5772 0%, rgba(43, 87, 114, 0) 62%),
    linear-gradient(180deg, #23485f 0%, #1d3d51 100%);
  color: var(--paper-on-ink);
  border-top: 0;
  border-bottom: 1px solid var(--line-on-ink);
  padding-block: clamp(2.75rem, 7vw, 6rem) clamp(2.75rem, 7vw, 5.5rem);
}

/* Gold rule across the top of the hero band — the site's first accent. */
.hero::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brass-light) 0%, var(--brass-light) 22%, rgba(225, 190, 65, 0) 70%);
}

.hero h1,
.hero h2,
.hero h3 { color: var(--paper-on-ink); }
.hero h1 { max-width: 18ch; letter-spacing: -0.015em; }

.hero .eyebrow {
  position: relative;
  padding-inline-start: 2.6rem;
  color: var(--on-dark-accent);
}

.hero .eyebrow::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.52em;
  width: 1.9rem;
  height: 2px;
  background: var(--brass-light);
}

.hero .hero-arabic { color: var(--muted-on-ink); }
.hero .hero-summary,
.hero .lede { color: var(--paper-on-ink); }
.hero .note,
.hero .limit { color: var(--muted-on-ink); }
.hero .limit { border-left-color: var(--brass-light); }
.hero .identity-line { color: var(--paper-on-ink); }
.hero a:not(.button):not(.button-quiet) { color: var(--on-dark-accent); }
.hero :focus-visible { outline-color: var(--on-dark-accent); }

/* Primary CTA gains real presence on the dark ground; the secondary reads as
   a light outline rather than the invisible petrol-on-petrol it would be. */
.hero .button {
  background: var(--brass-light);
  color: var(--ink-soft) !important;
  border-color: var(--brass-light);
  padding: 0.72rem 1.7rem;
  font-size: 1.02rem;
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.75);
}

.hero .button:hover { background: #ecce62; }

.hero .button-quiet {
  color: var(--paper-on-ink) !important;
  border-color: var(--muted-on-ink);
  padding: 0.72rem 1.7rem;
  font-size: 1.02rem;
}

.hero .button-quiet:hover { border-color: var(--brass-light); background: rgba(225, 190, 65, 0.12); }
.hero .button-row { margin-block: 1.75rem 1.25rem; }

/* Hero media reads as a large-format object, not a thumbnail. */
.hero .evidence-unit {
  border-color: rgba(176, 169, 134, 0.55);
  box-shadow: 0 26px 60px -32px rgba(0, 0, 0, 0.85);
}

@media (min-width: 62rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); align-items: start; }
  .hero .evidence-hero .evidence-media img { aspect-ratio: 5 / 4; object-fit: cover; }
}

/* Figures appended after the hero grid (and after any section container by
   the imagery lane) sat full-bleed and unaligned. Re-align them to the same
   measure as every other object on the page. NOTE for WEB-IMG-002: these
   figures are outside .container in the markup; this is a containment
   correction only — no figure is added, removed or re-captioned. */
.section > .evidence-unit {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  margin-block-start: clamp(1.5rem, 3vw, 2.25rem);
  padding-inline: 0;
}

@media (min-width: 78rem) {
  .section > .evidence-unit { max-width: calc(var(--container) - (2 * var(--gutter))); }
}

/* 2. SECTION RHYTHM ------------------------------------------------------
   Statement and ledger sections were both plain white, so long routes ran
   four and five identical treatments in a row. A statement section that
   follows a white section now takes the warm sand ground, which guarantees no
   more than two consecutive identical treatments on any route in the tree. */

.section-statement:not(.hero):not(.section-ink):not(.section-evidence):not(.section-sand) {
  background: linear-gradient(180deg, #faf8f3 0%, #f4f1e8 100%);
}

.section-ledger + .section-ledger:not(.section-ink):not(.section-sand) {
  background: linear-gradient(180deg, #faf8f3 0%, #f4f1e8 100%);
}

/* Petrol bands get a gold hairline instead of a dim blue one, so a dark band
   announces itself rather than fading in. */
.section-ink { border-top: 2px solid var(--brass-light); }
.section-ink .eyebrow { color: var(--on-dark-accent); }

/* Every section head carries a short gold rule above its eyebrow — the
   cheapest, most repeatable way to put the accent on all 30 routes. */
.section > .container > .eyebrow,
.section > .container > * > .eyebrow {
  position: relative;
  padding-top: 0.95rem;
}

.section > .container > .eyebrow::before,
.section > .container > * > .eyebrow::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2.4rem;
  height: 3px;
  background: var(--brass-light);
}

/* The hero eyebrow uses the inline rule defined in §1, not the stacked one. */
.hero .eyebrow { padding-top: 0; }
.hero .eyebrow::before { top: 0.52em; width: 1.9rem; height: 2px; }

/* 3. CARDS AND GRIDS ------------------------------------------------------
   Cards were flat outlines with no state. They now sit on white with a
   restrained shadow, lift on hover and reveal a gold top rule, and share one
   focus treatment. Motion stays inside the site's existing budget tokens. */

.card,
.service-object {
  position: relative;
  transition: transform var(--motion-rule) ease, box-shadow var(--motion-rule) ease,
              border-color var(--motion-rule) ease;
}

.card { box-shadow: 0 1px 2px rgba(30, 42, 51, 0.04); }

.card::after,
.service-object::after {
  content: "";
  position: absolute;
  inset-inline: -1px;
  top: -1px;
  height: 3px;
  background: var(--brass-light);
  border-start-start-radius: var(--radius-media);
  border-start-end-radius: var(--radius-media);
  opacity: 0;
  transition: opacity var(--motion-mark) ease;
}

.card:hover,
.service-object:hover {
  transform: translateY(-3px);
  border-color: var(--brass);
  box-shadow: 0 18px 34px -24px rgba(30, 42, 51, 0.55);
}

.card:hover::after,
.service-object:hover::after,
.card:focus-within::after,
.service-object:focus-within::after { opacity: 1; }

.section-ink .card:hover { border-color: var(--on-dark-accent); transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
  .card,
  .service-object { transition: none; }
  .card:hover,
  .service-object:hover,
  .section-ink .card:hover { transform: none; }
}

/* The evidence grid reads as a designed set rather than stacked exhibits. */
.evidence-unit { transition: box-shadow var(--motion-rule) ease, border-color var(--motion-rule) ease; }
.evidence-unit:hover { border-color: var(--brass); box-shadow: 0 16px 32px -26px rgba(30, 42, 51, 0.6); }

/* 4. ACCENT DISTRIBUTION --------------------------------------------------
   Gold previously appeared only on buttons. It now marks numbered steps,
   section rules, the active nav item, quotes and card links. Gold is used as
   a GROUND or a RULE only; all gold-toned TEXT on light keeps --brass
   (#7a5c14, 6.5:1 on white). #e1be41 carries no body text anywhere. */

/* Numbered step markers — ledger, stage list and bands. */
.stage-list > li::before,
.ledger > li::before,
.bands > li .band-index { color: var(--brass); }

.stage { border-top-width: 4px; border-top-color: var(--brass-light); }
.bands > li { border-left-width: 4px; border-left-color: var(--brass-light); }
.callout { border-left-width: 4px; border-left-color: var(--brass-light); }
.section-ink .callout { border-left-color: var(--on-dark-accent); }

/* Active nav state, made unmistakable at desktop width. */
@media (min-width: 64rem) {
  .primary-nav a[aria-current="page"] { border-bottom-width: 3px; border-bottom-color: var(--brass-light); }
}

.primary-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 0 var(--brass-light); }

/* Quote marks. */
blockquote {
  position: relative;
  padding-inline-start: 2.4rem;
  border-inline-start: 3px solid var(--brass-light);
}

blockquote::before {
  content: "\201C";
  position: absolute;
  inset-inline-start: 0.5rem;
  top: -0.15em;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--brass-light);
}

/* Card links get a gold underline on hover instead of a thicker brass one. */
.card-link { text-decoration-color: var(--brass); }
.card-link:hover { text-decoration-color: var(--brass-light); text-decoration-thickness: 3px; }

/* Checklist ticks read as gold discs rather than hairline circles. */
.checklist li::before { background: var(--brass-light); border-color: var(--brass); }
.section-ink .checklist li::before { background: var(--on-dark-accent); border-color: var(--on-dark-accent); }

/* Breadcrumb current position. */
.breadcrumb li:last-child { color: var(--ink); font-weight: 600; }

/* 5. FOOTER WEIGHT -------------------------------------------------------
   The footer is the only other petrol ground on the site; give it the same
   gold hairline so the page closes the way it opens. */
.site-footer { border-top: 3px solid var(--brass-light); }

/* ============================================================ WEB-COMP-001
   Content components — task t_a1b2ce28, agent hermes-video, 2026-08-28.
   Appended fenced block. Every rule below is additive; deleting this fence
   restores the stylesheet to its exact pre-WEB-COMP-001 state. No palette
   VALUE is changed, no contact route, no GA4 tag. All gold-toned TEXT on a
   light ground uses --brass (#7a5c14, 6.5:1 on white); #e1be41 appears only
   as a ground, a rule or a marker, never as body text on light.

   Components: .comp-factstrip, .comp-inex, .comp-timeline, .comp-chain,
   .comp-pullquote, .comp-cta, plus an accordion affordance for .faq-item.
   Everything is logical-property based (inline-start/inline-end), so RTL on
   the six /ar/ routes mirrors without a single direction-specific override.
   ------------------------------------------------------------------------ */

:root {
  --sand-pale: #f4f2ea;   /* WEB-COMP-001 only: a lighter tint of --sand #e6e1d2,
                             used as a component ground. No existing token value
                             is altered; this is an addition, not a redefinition. */
}

/* 1. FACT STRIP ---------------------------------------------------------
   Factual statements about how the company operates, set as a designed
   horizontal strip with gold rules. No numbers, no claims — each item is a
   restatement of a policy already published in the page copy. */

.comp-factstrip {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  margin-block: clamp(1.75rem, 4vw, 2.75rem);
  border-top: 3px solid var(--brass-light);
  border-bottom: 1px solid var(--line);
  background: var(--sand-pale);
}

.comp-factstrip > li {
  list-style: none;
  margin: 0;
  padding: clamp(1rem, 2.4vw, 1.45rem) clamp(1rem, 2.6vw, 1.6rem);
  border-top: 1px solid var(--line);
}

.comp-factstrip > li:first-child { border-top: 0; }

.comp-factstrip .fact-key {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.comp-factstrip .fact-note {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

.comp-factstrip .fact-key::before {
  content: "";
  display: block;
  width: 1.75rem;
  height: 3px;
  margin-bottom: 0.6rem;
  background: var(--brass-light);
}

@media (min-width: 48rem) {
  .comp-factstrip { grid-template-columns: repeat(2, 1fr); }
  .comp-factstrip > li { border-top: 1px solid var(--line); }
  .comp-factstrip > li:nth-child(-n+2) { border-top: 0; }
  .comp-factstrip > li:nth-child(even) { border-inline-start: 1px solid var(--line); }
}

@media (min-width: 64rem) {
  .comp-factstrip { grid-template-columns: repeat(4, 1fr); }
  .comp-factstrip > li { border-top: 0; border-inline-start: 1px solid var(--line); }
  .comp-factstrip > li:first-child { border-inline-start: 0; }
}

/* On a dark ground the strip inverts rather than punching a light hole. */
.section-ink .comp-factstrip,
.hero .comp-factstrip {
  background: rgba(255, 255, 255, 0.045);
  border-bottom-color: var(--line-on-ink);
}
.section-ink .comp-factstrip > li,
.hero .comp-factstrip > li { border-color: var(--line-on-ink); }
.section-ink .comp-factstrip .fact-key,
.hero .comp-factstrip .fact-key { color: var(--paper-on-ink); }
.section-ink .comp-factstrip .fact-note,
.hero .comp-factstrip .fact-note { color: var(--muted-on-ink); }

/* 2. INCLUSIONS / EXCLUSIONS ---------------------------------------------
   The differentiator, given the most visual weight on the site: two columns,
   one petrol-headed and one sand-headed, with tick and rule marks drawn in
   CSS so no image request is added. */

.comp-inex {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  grid-template-columns: 1fr;
  margin-block: clamp(1.75rem, 4vw, 2.75rem);
}

@media (min-width: 52rem) {
  .comp-inex { grid-template-columns: 1fr 1fr; }
}

.comp-inex > .inex-col {
  border: 1px solid var(--line);
  border-top: 4px solid var(--brass-light);
  background: #fff;
  padding: clamp(1.1rem, 2.6vw, 1.75rem);
}

.comp-inex > .inex-col.is-out {
  border-top-color: var(--ink);
  background: var(--sand-pale);
}

.comp-inex .inex-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.2;
  color: var(--ink);
}

.comp-inex .inex-tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
  white-space: nowrap;
}

.comp-inex .is-out .inex-tag { color: var(--ink); }

.comp-inex .inex-lede {
  margin: 0 0 1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

.comp-inex ul { list-style: none; margin: 0; padding: 0; }

.comp-inex li {
  position: relative;
  margin: 0;
  padding: 0.72rem 0 0.72rem 2.15rem;
  padding-inline-start: 2.15rem;
  padding-inline-end: 0;
  border-top: 1px solid var(--line);
  font-size: 0.97rem;
  line-height: 1.55;
}

.comp-inex li:first-child { border-top: 0; }

/* Included: a gold disc with a drawn tick. */
.comp-inex .is-in li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.95rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: var(--brass-light);
  border: 1px solid var(--brass);
}

.comp-inex .is-in li::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.44rem;
  top: 1.24rem;
  width: 0.32rem;
  height: 0.62rem;
  border: solid var(--ink-soft);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Excluded: a petrol ring with a drawn bar. Shape, not colour alone. */
.comp-inex .is-out li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.95rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ink);
}

.comp-inex .is-out li::after {
  content: "";
  position: absolute;
  inset-inline-start: 0.33rem;
  top: 1.55rem;
  width: 0.72rem;
  height: 2px;
  background: var(--ink);
}

.comp-inex .inex-foot {
  margin: 1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

/* 3. PROCESS TIMELINE ----------------------------------------------------
   Vertical connected markers on mobile, a stepped horizontal run on desktop.
   The connector is drawn on the list, so it never orphans on the last item. */

.comp-timeline {
  position: relative;
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.comp-timeline > li {
  position: relative;
  margin: 0;
  padding: 0 0 1.9rem 3.3rem;
  padding-inline-start: 3.3rem;
  padding-inline-end: 0;
}

.comp-timeline > li:last-child { padding-bottom: 0; }

/* The rail. */
.comp-timeline > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 1.06rem;
  top: 2.3rem;
  bottom: -0.1rem;
  width: 2px;
  background: var(--line);
}

.comp-timeline > li:last-child::before { display: none; }

/* The numbered marker. */
.comp-timeline .tl-index {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--brass-light);
  border: 2px solid var(--brass);
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.comp-timeline h3,
.comp-timeline .tl-title {
  margin: 0.15rem 0 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
  line-height: 1.25;
  color: var(--ink);
}

.comp-timeline p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.comp-timeline .tl-limit {
  margin-top: 0.5rem;
  padding-inline-start: 0.8rem;
  border-inline-start: 3px solid var(--brass-light);
  font-size: 0.87rem;
  color: var(--ink-muted);
}

/* Desktop: a STEPPED layout, not columns.

   A horizontal column run was tried first and rendered as six 190px-wide
   ribbons of body copy — measured in the browser, not guessed. These stages
   carry multi-paragraph descriptions, so the desktop treatment keeps the
   vertical rail and instead widens the marker gutter and constrains the
   measure, which is what actually makes a timeline readable at width.
   The rail, the numbered markers and the direction of travel are unchanged. */
@media (min-width: 64rem) {
  .comp-timeline > li {
    padding-inline-start: 5rem;
    padding-bottom: 2.6rem;
  }
  .comp-timeline > li::before {
    inset-inline-start: 1.6rem;
    top: 3.4rem;
  }
  .comp-timeline .tl-index {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.12rem;
  }
  .comp-timeline h3,
  .comp-timeline .tl-title { font-size: 1.35rem; }
  .comp-timeline p { max-width: 70ch; }
}

/* Where a timeline's items are genuinely short (a stage map rather than a
   narrative), the horizontal run is the better reading, so it is opt-in via
   a modifier rather than applied blindly to every list. */
@media (min-width: 64rem) {
  .comp-timeline.is-compact {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: clamp(1rem, 2vw, 1.6rem);
  }
  .comp-timeline.is-compact > li {
    padding: 3.1rem 0 0;
    padding-inline: 0;
  }
  .comp-timeline.is-compact > li::before {
    inset-inline-start: 2.2rem;
    inset-inline-end: -1.6rem;
    top: 1.1rem;
    bottom: auto;
    width: auto;
    height: 2px;
  }
  .comp-timeline.is-compact > li:last-child::before { display: none; }
}

.section-ink .comp-timeline h3,
.section-ink .comp-timeline .tl-title { color: var(--paper-on-ink); }
.section-ink .comp-timeline p,
.section-ink .comp-timeline .tl-limit { color: var(--muted-on-ink); }
.section-ink .comp-timeline > li::before { background: var(--line-on-ink); }

/* 4. EVIDENCE-CHAIN DIAGRAM ---------------------------------------------
   The chain rendered as connected linked plates rather than a list. Each
   plate carries its position, so the direction of travel is unambiguous. */

.comp-chain {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.75rem) 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: 1fr;
  counter-reset: chain;
}

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

.comp-chain > li {
  counter-increment: chain;
  position: relative;
  margin: 0;
  padding: 1.05rem 1.1rem 1.05rem 1.1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brass-light);
}

.comp-chain > li::before {
  content: counter(chain, decimal-leading-zero);
  display: block;
  margin-bottom: 0.45rem;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
}

/* Direction of travel: a chevron between plates, mirrored under RTL by the
   logical inset and the scaleX flip below. */
.comp-chain > li::after {
  content: "";
  position: absolute;
  inset-inline-end: -0.55rem;
  top: 50%;
  width: 0.55rem;
  height: 2px;
  background: var(--brass-light);
  transform: translateY(-50%);
}

.comp-chain > li:last-child::after { display: none; }

.comp-chain .chain-title {
  display: block;
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink);
  margin-bottom: 0.3rem;
}

.comp-chain .chain-body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-muted);
}

.section-ink .comp-chain > li { background: rgba(255, 255, 255, 0.05); border-color: var(--line-on-ink); border-inline-start-color: var(--on-dark-accent); }
.section-ink .comp-chain > li::before { color: var(--on-dark-accent); }
.section-ink .comp-chain .chain-title { color: var(--paper-on-ink); }
.section-ink .comp-chain .chain-body { color: var(--muted-on-ink); }

/* 5. PULL QUOTE ----------------------------------------------------------
   Generous display type on a sentence that is already in the page copy.
   Never a new claim, never attributed to a person. */

.comp-pullquote {
  margin: clamp(2rem, 5vw, 3.25rem) 0;
  padding: clamp(1.2rem, 3vw, 2rem) 0 clamp(1.2rem, 3vw, 2rem) clamp(1.5rem, 4vw, 2.75rem);
  padding-inline-start: clamp(1.5rem, 4vw, 2.75rem);
  padding-inline-end: 0;
  border-inline-start: 4px solid var(--brass-light);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.comp-pullquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3.1vw, 1.85rem);
  line-height: 1.32;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 26ch;
}

.comp-pullquote .pq-source {
  display: block;
  margin-top: 0.85rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass);
}

.section-ink .comp-pullquote p { color: var(--paper-on-ink); }
.section-ink .comp-pullquote .pq-source { color: var(--on-dark-accent); }
.section-ink .comp-pullquote { border-color: var(--line-on-ink); border-inline-start-color: var(--on-dark-accent); }
.hero .comp-pullquote p { color: var(--paper-on-ink); }

/* 6. FAQ ACCORDION -------------------------------------------------------
   The markup is already <details>/<summary>, so every answer stays in the
   page and remains linkable with JavaScript off. What was missing was the
   affordance: a visible chevron, a hit area, a focus ring and an open state.
   Native <details> carries the correct ARIA (button + expanded) already, so
   nothing here overrides the semantics. */

.faq-item {
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--line);
  background: #fff;
  margin-block: 0.55rem;
}

.faq-item[open] {
  border-inline-start-color: var(--brass-light);
  box-shadow: 0 1px 0 0 rgba(30, 42, 51, 0.06);
}

.faq-item > summary {
  position: relative;
  display: block;
  list-style: none;
  cursor: pointer;
  padding: clamp(0.95rem, 2.2vw, 1.25rem) 3.2rem clamp(0.95rem, 2.2vw, 1.25rem) clamp(1rem, 2.4vw, 1.4rem);
  padding-inline-start: clamp(1rem, 2.4vw, 1.4rem);
  padding-inline-end: 3.2rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.7vw, 1.14rem);
  line-height: 1.35;
  color: var(--ink);
  min-height: 2.75rem;
}

.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::marker { content: ""; }

/* The affordance: a bordered square with a chevron drawn from two borders. */
.faq-item > summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 1.05rem;
  top: 50%;
  width: 0.62rem;
  height: 0.62rem;
  margin-top: -0.42rem;
  border: solid var(--brass);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 180ms ease;
}

.faq-item[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -0.16rem;
}

.faq-item > summary:hover { background: var(--sand-pale); }

.faq-item > summary:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: -3px;
}

.faq-item .faq-body {
  padding: 0 clamp(1rem, 2.4vw, 1.4rem) clamp(1rem, 2.4vw, 1.4rem);
  border-top: 1px solid var(--line);
  padding-top: 0.95rem;
}

.faq-item .faq-body > :first-child { margin-top: 0; }
.faq-item .faq-body > :last-child { margin-bottom: 0; }

/* Open animation, suppressed under a reduced-motion preference. */
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-body { animation: comp-faq-open 200ms ease-out; }
}

@keyframes comp-faq-open {
  from { opacity: 0; transform: translateY(-0.35rem); }
  to   { opacity: 1; transform: none; }
}

/* 7. CTA BLOCK -----------------------------------------------------------
   Every route closes on a designed block rather than a bare link. Petrol
   ground, gold hairline, all three existing contact routes visible. No
   contact destination is introduced or altered by this stylesheet. */

.comp-cta {
  position: relative;
  margin-block: clamp(2.25rem, 5vw, 3.5rem) 0;
  padding: clamp(1.75rem, 4.5vw, 3rem) clamp(1.25rem, 4vw, 3rem);
  background:
    radial-gradient(110% 120% at 88% 0%, #2b5772 0%, rgba(43, 87, 114, 0) 60%),
    linear-gradient(180deg, #23485f 0%, #1d3d51 100%);
  color: var(--paper-on-ink);
  border-top: 3px solid var(--brass-light);
}

.comp-cta .cta-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-accent);
}

.comp-cta h2,
.comp-cta .cta-title {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.6vw, 2.15rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--paper-on-ink);
  max-width: 20ch;
}

.comp-cta .cta-lede {
  margin: 0 0 1.35rem;
  max-width: 58ch;
  font-size: clamp(0.98rem, 1.6vw, 1.06rem);
  line-height: 1.6;
  color: var(--paper-on-ink);
}

.comp-cta .cta-routes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 0 0 1.15rem;
  padding: 0;
  list-style: none;
}

.comp-cta .cta-routes > li { margin: 0; }

.comp-cta .cta-routes a {
  display: inline-block;
  padding: 0.68rem 1.35rem;
  border: 1px solid var(--line-on-ink);
  color: var(--paper-on-ink);
  text-decoration: none;
  font-size: 0.96rem;
  line-height: 1.3;
  min-height: 2.75rem;
}

.comp-cta .cta-routes a:hover {
  border-color: var(--on-dark-accent);
  background: rgba(255, 255, 255, 0.06);
}

.comp-cta .cta-routes .is-primary {
  background: var(--brass-light);
  border-color: var(--brass-light);
  color: var(--ink-soft);
  font-weight: 600;
}

.comp-cta .cta-routes .is-primary:hover {
  background: #eccd5e;
  border-color: #eccd5e;
  color: var(--ink-soft);
}

.comp-cta .cta-routes a:focus-visible {
  outline: 3px solid var(--on-dark-accent);
  outline-offset: 3px;
}

.comp-cta .cta-limit {
  margin: 0;
  padding-inline-start: 0.9rem;
  border-inline-start: 3px solid var(--brass-light);
  max-width: 64ch;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--muted-on-ink);
}

/* 8. RTL MIRRORING -------------------------------------------------------
   Every rule above uses logical properties, so the six /ar/ routes mirror
   automatically. Two glyphs are drawn with transforms and therefore need an
   explicit flip; nothing else is direction-specific. */

[dir="rtl"] .comp-chain > li::after { transform: translateY(-50%) scaleX(-1); }

[dir="rtl"] .faq-item > summary::after {
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

[dir="rtl"] .faq-item[open] > summary::after {
  border-width: 0 2px 2px 0;
  transform: rotate(-135deg);
}

[dir="rtl"] .comp-inex .is-in li::after { transform: rotate(45deg); }

/* 9. PRINT ---------------------------------------------------------------
   The CTA block is screen furniture; the components themselves print. */
@media print {
  .comp-cta { background: none; color: #000; border-top: 2px solid #000; }
  .comp-cta h2, .comp-cta .cta-title, .comp-cta .cta-lede { color: #000; }
  .faq-item .faq-body { display: block !important; }
}
/* ========================================================= end WEB-COMP-001 */

/* --- WEB-COMP-001 contrast corrections (found by rendered-DOM measurement,
   not by inspection: tools/capture_web_comp_001.py composites every gradient
   stop and alpha layer behind each text node).

   ROOT CAUSE. .hero and .section-ink legitimately recolour their descendant
   text for a dark ground. Three of these components paint their OWN light
   ground (.comp-inex panels, .comp-factstrip on light, .comp-pullquote), so
   when one lands inside a dark section it inherited on-dark text onto a light
   surface: #f4f6f7 body on #f4f2ea measured 1.03:1, and gold links measured
   1.8:1 on white.

   RULE APPLIED: a component that owns its background must also own its
   foreground. These selectors carry a class more than the .hero/.section-ink
   descendant rules they correct, so they win without !important. */

.hero .comp-inex .inex-col,
.section-ink .comp-inex .inex-col {
  color: var(--ink-soft);
}

.hero .comp-inex .inex-head,
.section-ink .comp-inex .inex-head { color: var(--ink); }

.hero .comp-inex .inex-lede,
.hero .comp-inex .inex-foot,
.section-ink .comp-inex .inex-lede,
.section-ink .comp-inex .inex-foot { color: var(--ink-muted); }

/* Links inside a light component keep the on-light accent (brass 6.5:1),
   never the on-dark gold (#e1be41 is 1.8:1 on white). */
.hero .comp-inex a:not(.button):not(.button-quiet),
.section-ink .comp-inex a:not(.button):not(.button-quiet) { color: var(--brass); }

.hero .comp-inex :focus-visible,
.section-ink .comp-inex :focus-visible { outline-color: var(--brass); }

/* The excluded column keeps its petrol marks on its sand ground. */
.hero .comp-inex .is-out .inex-tag,
.section-ink .comp-inex .is-out .inex-tag { color: var(--ink); }

/* Pull quote on a light ground inside a dark section: same principle. The
   quote only inverts when the component itself sits on the dark ground, which
   is handled by the .section-ink .comp-pullquote rules above; the accent line
   must not fall back to brass-on-petrol (1.24:1). */
.section-ink .comp-pullquote .pq-source,
.hero .comp-pullquote .pq-source { color: var(--on-dark-accent); }

/* CTA eyebrow: gold on the radial hotspot #2b5772 measured 4.30:1, just under
   the 4.5:1 floor for small text. The hotspot is decorative, so it is darkened
   to #27506a — gold on it measures 4.74:1 and the band still reads as lit from
   the top right. No palette token changes; this is a gradient stop only. */
.comp-cta {
  background:
    radial-gradient(110% 120% at 88% 0%, #27506a 0%, rgba(39, 80, 106, 0) 60%),
    linear-gradient(180deg, #23485f 0%, #1d3d51 100%);
}
/* ================================================== end WEB-COMP-001 fixes */

/* Pull-quote source line on a dark ground. Gold #e1be41 measures 4.74:1 on the
   flat petrol #23485f but only 4.30:1 where it crosses the hero's radial
   hotspot #2b5772, which is under the 4.5:1 floor for a 12px label. The label
   therefore uses --muted-on-ink (#ccd8df, 7.0:1 on the hotspot) and the gold
   is carried by a rule mark instead, where contrast rules do not apply. */
.section-ink .comp-pullquote .pq-source,
.hero .comp-pullquote .pq-source {
  color: var(--muted-on-ink);
  position: relative;
  padding-inline-start: 2.1rem;
}

.section-ink .comp-pullquote .pq-source::before,
.hero .comp-pullquote .pq-source::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.52em;
  width: 1.5rem;
  height: 2px;
  background: var(--on-dark-accent);
}

/* ============================================================ WEB-IMGREL-001
   Image relevance, before/after comparison, galleries and language switcher.
   Task t_21fa918f · hermes-designer · 2026-08-28.

   APPENDED BLOCK ONLY. No rule above this comment is edited, reordered or
   deleted. Deleting everything from this comment to the end of the file
   returns the stylesheet to its exact pre-WEB-IMGREL-001 state.

   Owner decision (Asaad, via manager, 2026-08-28): image imagery carries no
   visible badge, asset id, truth-status row or caption line. The rules that
   styled that furniture (.disclosure-badge, .evidence-caption,
   .evidence-record, .evidence-disclosure, .media-note) are left in place
   untouched above; the markup that used them has been removed from the pages,
   so those rules now match nothing. Provenance lives in MANIFEST.json.
   -------------------------------------------------------------------------- */

/* --- 1. FIGURE WITHOUT A CAPTION ----------------------------------------
   .evidence-unit was drawn as a bordered card whose bottom edge was closed by
   the caption block. With the caption gone the border reads as an empty tray
   under the image, so the media now sits as a clean bleed inside the radius. */

.evidence-unit {
  border: 0;
  background: transparent;
  border-radius: var(--radius-media);
}

.evidence-unit > .evidence-media {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--sand);
}

.evidence-unit > .evidence-media img { display: block; }

/* --- 2. LANGUAGE SWITCHER ------------------------------------------------
   Small, discreet, top of the header. Inline SVG flags only — no external
   request, so the CSP is unaffected. The active language is a non-link
   span carrying aria-current; the alternate is a real link. Where a route has
   no counterpart in the other language the option renders as an
   aria-disabled span with a visually-hidden explanation. */

.lang-switch {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.lang-switch li { max-width: none; margin: 0; }

.lang-switch a,
.lang-switch span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: var(--tap);
  padding: 0 0.4rem;
  border-radius: var(--radius-control);
  color: var(--ink-muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.lang-switch a:hover { color: var(--ink); }

.lang-switch [aria-current="true"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 0 var(--brass);
}

.lang-switch [aria-disabled="true"] { opacity: 0.45; }

.lang-flag {
  flex: none;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--line);
}

/* The label text is redundant beside the flag on the narrowest phones; the
   accessible name is carried by the visually-hidden span inside the control,
   so hiding the abbreviation loses nothing for assistive technology. */
@media (max-width: 22rem) {
  .lang-code { display: none; }
}

@media (min-width: 64rem) {
  .header-inner { grid-template-columns: auto minmax(0, 1fr) auto auto; }
  .nav-cta { grid-column: 3; }
  .lang-switch { grid-column: 4; justify-self: end; }
}

/* --- 3. BEFORE / AFTER COMPARISON ---------------------------------------
   Two stacked images in a fixed-ratio frame with a draggable divider. The
   handle is a real range input, so keyboard, screen-reader and touch support
   come from the platform rather than from script. With JavaScript off, or
   before hydration, both states are shown side by side and remain readable. */

.ba-set { display: grid; gap: 1.5rem; margin: 1.5rem 0 0; }

@media (min-width: 52rem) {
  .ba-set.ba-set-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ba {
  margin: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--sand);
}

.ba-frame {
  position: relative;
  display: grid;
  gap: 0.5rem;
  isolation: isolate;
}

.ba-pane { position: relative; margin: 0; }

.ba-pane img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-media);
}

.ba-tag {
  position: absolute;
  top: 0.75rem;
  inset-inline-start: 0.75rem;
  z-index: 3;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-control);
  background: rgba(11, 34, 46, 0.82);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Hydrated state: the two panes are stacked and the reveal follows the slider.

   The reveal is an OVERFLOW WINDOW, not a clip-path. A clip-path on an
   absolutely positioned pane inside an isolated stacking context promotes the
   whole frame to a composited layer, and that layer was measured painting
   completely blank at >=900px under software rasterisation while the geometry
   was correct and both images were decoded. An overflow window produces the
   same effect with no compositing dependency, so it survives every renderer.

   The WINDOWED pane is the BEFORE pane, opened from the start edge. Windowing
   the after pane instead would need the inner image pushed back by --ba-pos,
   and a percentage offset resolves against the narrowed pane rather than the
   frame, so the two halves would drift out of register as the handle moves.
   Windowing from the start edge needs no offset at all.

   The frame is locked to 3/2 and every pair asset is 1024x683 (1.4993), so an
   image sized by HEIGHT is exactly frame-width however narrow its own pane has
   been cut. That is what holds the two halves in register. */
html.js .ba-frame.is-live { display: block; aspect-ratio: 3 / 2; }
html.js .ba-frame.is-live .ba-pane { position: absolute; inset: 0; }
html.js .ba-frame.is-live .ba-pane img { height: 100%; object-fit: cover; }

html.js .ba-frame.is-live .ba-pane-after { z-index: 1; }

html.js .ba-frame.is-live .ba-pane-before {
  inset: 0 auto 0 0;
  width: var(--ba-pos, 50%);
  overflow: hidden;
  z-index: 2;
}

/* The windowed pane's image must stay FRAME-width while its own pane is cut to
   --ba-pos, so it cannot be sized from the pane. It is sized by HEIGHT and the
   3/2 frame does the rest. The picture is an absolutely positioned box with a
   shrink-to-fit width, which is measured at 544x725 in the live DOM (half the
   1088 frame), so it does NOT collapse and the image inside it lays out and
   decodes normally. Verified in-browser: see IMAGERY_RELEVANCE.md section 4. */
html.js .ba-frame.is-live .ba-pane-before picture {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  /* The pane is clipped to --ba-pos, but the picture must keep the FULL frame
     width or it collapses to zero and the image never lays out (naturalWidth
     reads 0). Width comes from the frame, not from the clipped pane. */
  width: var(--ba-frame-w, 100vw);
  max-width: none;
  height: 100%;
}

html.js .ba-frame.is-live .ba-pane-before img {
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Tag placement follows what is actually VISIBLE. The before pane is the
   window and it opens from the start edge, so its tag stays at the start; the
   after pane shows through from --ba-pos to the end edge, so its tag must sit
   at the end or the window edge covers it. */
html.js .ba-frame.is-live .ba-pane-after .ba-tag {
  inset-inline-start: auto;
  inset-inline-end: 0.75rem;
}

/* RTL: the reveal runs from the opposite edge so the gesture matches reading
   direction. The window is written against physical left, so the RTL rules
   mirror it explicitly rather than relying on a logical inset. */
[dir="rtl"] html.js .ba-frame.is-live .ba-pane-before,
html.js [dir="rtl"] .ba-frame.is-live .ba-pane-before,
html.js .rtl-page .ba-frame.is-live .ba-pane-before {
  inset: 0 0 0 auto;
}

[dir="rtl"] html.js .ba-frame.is-live .ba-pane-before picture,
html.js [dir="rtl"] .ba-frame.is-live .ba-pane-before picture,
html.js .rtl-page .ba-frame.is-live .ba-pane-before picture {
  left: auto;
  right: 0;
}

.ba-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba-pos, 50%);
  z-index: 4;
  width: 2px;
  margin-inline-start: -1px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(11, 34, 46, 0.35);
  pointer-events: none;
}

.rtl-page .ba-divider { left: auto; right: var(--ba-pos, 50%); margin-inline-start: 0; margin-inline-end: -1px; }

.ba-divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  transform: translate(-50%, -50%);
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: rgba(11, 34, 46, 0.55);
}

.ba-control {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: ew-resize;
}

.ba-control::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.ba-control::-moz-range-track { height: 100%; background: transparent; }

.ba-control::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 0;
}

.ba-control::-moz-range-thumb {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: 0;
}

.ba-control:focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; }

/* Only the hydrated slider is interactive; the unhydrated fallback keeps the
   two panes side by side and the control out of the tab order. */
html:not(.js) .ba-control { display: none; }

.ba-note {
  margin: 0.65rem 0 0;
  font-size: 0.86rem;
  color: var(--ink-muted);
  max-width: var(--measure);
}

.section-ink .ba-note { color: var(--muted-on-ink); }

@media (prefers-reduced-motion: reduce) {
  .ba-pane-after { transition: none !important; }
}

/* --- 4. GALLERY CAROUSEL -------------------------------------------------
   Native CSS scroll-snap carriage. Script only wires the previous/next
   buttons, the live region and the dot state; with JavaScript off the strip
   is still a normal horizontally scrollable list with visible focus. */

.carousel { position: relative; margin: 1.5rem 0 0; }

.carousel-viewport {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 86%;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-viewport { scroll-behavior: auto; }
}

@media (min-width: 40rem) { .carousel-viewport { grid-auto-columns: 46%; } }
@media (min-width: 64rem) { .carousel-viewport { grid-auto-columns: 31%; } }

.carousel-viewport:focus-visible { outline: 3px solid var(--brass); outline-offset: 4px; }

.carousel-slide {
  scroll-snap-align: start;
  margin: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--sand);
}

.carousel-slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.carousel-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
}

.carousel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.carousel-btn:hover { border-color: var(--brass); color: var(--brass); }
.carousel-btn:focus-visible { outline: 3px solid var(--brass); outline-offset: 2px; }
.carousel-btn[disabled] { opacity: 0.35; cursor: default; }
.carousel-btn svg { width: 18px; height: 18px; }

/* The chevrons are drawn pointing forward in the flow direction, so RTL
   mirrors the glyph rather than swapping the button order. */
.rtl-page .carousel-btn svg { transform: scaleX(-1); }

.carousel-status {
  margin-inline-start: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}

.section-ink .carousel-btn { background: transparent; border-color: var(--line-on-ink); color: var(--paper-on-ink); }
.section-ink .carousel-status { color: var(--muted-on-ink); }

html:not(.js) .carousel-controls { display: none; }

/* ── Cookie consent banner (WEB-CONSENT-001) ─────────────────────────────
   Injected by assets/consent.js only when no choice is stored. Fixed to the
   bottom of the viewport; never covers content permanently because it is
   removed from the DOM on either choice. */
.consent-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  background: var(--ink);
  color: var(--paper-on-ink);
  border-top: 1px solid var(--line-on-ink);
  box-shadow: 0 -8px 30px rgba(15, 28, 36, 0.28);
}

.consent-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(0.9rem, 2.4vw, 1.4rem) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  justify-content: space-between;
}

.consent-text {
  margin: 0;
  flex: 1 1 28rem;
  max-width: 62ch;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--paper-on-ink);
}

.consent-link {
  color: var(--on-dark-accent);
  text-underline-offset: 0.2em;
}

.consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  flex: 0 0 auto;
}

.consent-btn {
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 0.7rem 1.4rem;
  border-radius: 28px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
}

.consent-btn-primary {
  background: var(--brass-light);
  color: #1e2a33;
  border-color: var(--brass-light);
  font-weight: 600;
}

.consent-btn-secondary {
  background: transparent;
  color: var(--paper-on-ink);
  border-color: var(--line-on-ink);
}

.consent-btn:hover { filter: brightness(1.06); }

.consent-btn:focus-visible {
  outline: 3px solid var(--on-dark-accent);
  outline-offset: 2px;
}

@media (max-width: 40rem) {
  .consent-inner { flex-direction: column; align-items: stretch; }
  /* In column direction flex-basis would set the HEIGHT, so reset it. */
  .consent-text { flex: 0 0 auto; }
  .consent-actions { justify-content: flex-end; }
}