/* 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; }