/* ==========================================================================
   LawFiq — inner pages
   Typography and shared components for every page other than the homepage,
   rendered in the client's visual system (site.css). Generated from the
   earlier component sheets plus the skin at the end of this file.
   ========================================================================== */

/* ---- base typography for inner-page markup ---- */
main h1,main h2,main h3,main h4{font-family:var(--serif);font-weight:600;color:var(--navy);letter-spacing:-.015em;line-height:1.1;text-wrap:balance}
main h1{font-size:var(--t-d)}
main h2{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.02em}
main h3{font-size:var(--t-h3);line-height:1.2}
main p{max-width:var(--width-prose);margin:0}
main ul,main ol{margin:0;padding:0}
main a{color:var(--blue)}
.text-muted{color:var(--ink-2)}
.container{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main .eyebrow{display:inline-flex}
main .eyebrow{margin:0}

/* Buttons used by the inner-page markup, in the client's button style */
.button{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:54px;padding:.85rem 1.7rem;border-radius:12px;font-weight:600;font-size:.95rem;text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:.18s var(--ease);font-family:var(--sans);line-height:1.2;text-align:center}
.button--primary{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 16px 30px -16px rgba(29,78,216,.6)}
.button--primary:hover{background:var(--blue-dk);border-color:var(--blue-dk);color:#fff}
.button--secondary{background:transparent;color:var(--navy);border-color:var(--line-2)}
.button--secondary:hover{border-color:var(--navy);background:var(--mist);color:var(--navy)}
.button--on-navy{background:transparent;border-color:var(--line-d);color:#fff}
.button--on-navy:hover{border-color:#fff;background:rgba(245,248,255,.07);color:#fff}
.button[aria-disabled="true"]{opacity:.65;cursor:progress}

/* ==========================================================================
   LawFiq — shared inner-page primitives
   Section landings + service pages (Family, Business, …). Shares the
   homepage's rhythm and restraint; each page composes these pieces
   differently so sections feel authored, not templated. Section-specific
   additions live in their own sheet (business.css). Logical properties only.
   ========================================================================== */

/* --------------------------------------------------------------------
   Inner-page hero
   Base: paper ground, breadcrumbs, generous serif display.
   Variants: --navy (landing), --deep (divorce: quieter, no ornament),
   --mist (wills: ledger-like calm).
   -------------------------------------------------------------------- */
.page-hero {
  position: relative;
  background-color: var(--color-paper);
  border-block-end: var(--hairline) solid var(--color-hairline);
  overflow: hidden;
}

.page-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(3rem, 2.25rem + 3vw, 5.5rem);
}

.page-hero .breadcrumbs {
  color: var(--color-ink-muted);
  margin-block-end: clamp(1.5rem, 1rem + 2vw, 3rem);
}

.page-hero .eyebrow {
  margin-block-end: var(--space-5);
}

.page-hero__title {
  font-size: var(--text-display);
  max-inline-size: 21ch;
  margin-block-end: var(--space-6);
}

.page-hero__lead {
  font-size: var(--text-lg);
  color: var(--color-ink-muted);
  max-inline-size: 38rem;
}

.page-hero__lead + .page-hero__lead {
  margin-block-start: var(--space-4);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-block-start: var(--space-8);
}

/* "Or call …" beside the button: the phone number is the second action
   on every service page, in the hero's own colours. */
.page-hero__alt {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.page-hero__alt a {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
}

.page-hero__alt a:hover {
  color: var(--color-action);
}

.page-hero--navy .page-hero__alt,
.page-hero--deep .page-hero__alt {
  color: var(--color-on-navy-muted);
}

.page-hero--navy .page-hero__alt a,
.page-hero--deep .page-hero__alt a {
  color: var(--color-on-navy);
}

.page-hero--navy .page-hero__alt a:hover,
.page-hero--deep .page-hero__alt a:hover {
  color: var(--color-gold-bright);
}

/* Navy variant — landing page and the most serious subjects */
.page-hero--navy,
.page-hero--deep {
  background-color: var(--color-navy);
  --focus-color: var(--color-gold-bright);
  border-block-end: 0;
}

.page-hero--deep {
  background-color: var(--color-navy-deep);
}

.page-hero--navy .breadcrumbs,
.page-hero--deep .breadcrumbs {
  color: var(--color-on-navy-muted);
}

.page-hero--navy .eyebrow,
.page-hero--deep .eyebrow {
  color: var(--color-gold-bright);
}

.page-hero--navy .page-hero__title,
.page-hero--deep .page-hero__title {
  color: #FFFFFF;
}

.page-hero--navy .page-hero__lead,
.page-hero--deep .page-hero__lead {
  color: var(--color-on-navy-muted);
}

/* Mist variant */
.page-hero--mist {
  background-color: var(--color-mist);
}

/* Girih lattice corner — the landing page's single ornament */
.page-hero__lattice {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(38%, 520px);
  color: var(--color-gold-bright);
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 95%);
  mask-image: linear-gradient(to left, #000 25%, transparent 95%);
  pointer-events: none;
}

html[dir="rtl"] .page-hero__lattice {
  -webkit-mask-image: linear-gradient(to right, #000 25%, transparent 95%);
  mask-image: linear-gradient(to right, #000 25%, transparent 95%);
}

.page-hero__lattice svg {
  inline-size: 100%;
  block-size: 100%;
}

@media (max-width: 767px) {
  .page-hero__lattice {
    display: none;
  }
}

/* Hero with media — text beside a photograph in the plaque mat
   (the homepage hero's construction, reused for section landings). */
.page-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  column-gap: clamp(3rem, 2rem + 4vw, 6rem);
}

/* Even split — for landscape imagery beside the headline
   (service pages), where the 7/5 portrait split would starve it. */
.page-hero__grid--even {
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
}

.page-hero__media {
  margin: 0;
  border: var(--hairline) solid var(--color-gold);
  padding: clamp(0.625rem, 0.5rem + 0.5vw, 1rem);
}

.page-hero--navy .page-hero__media,
.page-hero--deep .page-hero__media {
  border-color: var(--color-gold-bright);
}

.page-hero__media img {
  inline-size: 100%;
  block-size: auto;
}

@media (max-width: 899px) {
  .page-hero__grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-10);
  }
}

/* A single gold rule under the hero content — the plaque line.
   Used on light heroes where the navy ground isn't doing the work. */
.page-hero__rule {
  inline-size: clamp(4rem, 3rem + 4vw, 7rem);
  block-size: 2px;
  background-color: var(--color-gold);
  margin-block-end: var(--space-8);
}

/* --------------------------------------------------------------------
   Entry cards — the landing page's situation-led doorways.
   -------------------------------------------------------------------- */
.entries__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

@media (max-width: 899px) {
  .entries__grid {
    grid-template-columns: 1fr;
  }
}

.entry-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: var(--color-paper);
  border: var(--hairline) solid var(--color-hairline);
  border-block-start: 2px solid var(--color-gold);
  padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.entry-card:hover {
  border-color: var(--color-navy);
  border-block-start-color: var(--color-gold);
}

.entry-card .eyebrow {
  margin-block-end: var(--space-4);
}

.entry-card h3 {
  font-size: var(--text-2xl);
  margin-block-end: var(--space-4);
}

/* The whole card is clickable through the title link */
.entry-card__link {
  color: inherit;
  text-decoration: none;
}

.entry-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.entry-card__link:hover {
  color: var(--color-action);
}

.entry-card p {
  color: var(--color-ink-muted);
  margin-block-end: var(--space-6);
}

.entry-card__go {
  margin-block-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-action);
}

.entry-card__go::after {
  content: "\2192";
  transition: transform var(--duration-base) var(--ease-out);
}

html[dir="rtl"] .entry-card__go::after {
  content: "\2190";
}

.entry-card:hover .entry-card__go::after {
  transform: translateX(4px);
}

html[dir="rtl"] .entry-card:hover .entry-card__go::after {
  transform: translateX(-4px);
}

/* --------------------------------------------------------------------
   Split — two frameworks side by side, each under its own rule.
   The visual argument of the whole section: two columns, one desk.
   -------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10) var(--space-16);
}

@media (max-width: 767px) {
  .split {
    grid-template-columns: 1fr;
  }
}

.split__col {
  border-block-start: 2px solid var(--color-gold);
  padding-block-start: var(--space-6);
}

.split__col--law {
  border-block-start-color: var(--color-navy);
}

.split__col h3 {
  font-size: var(--text-xl);
  margin-block-end: var(--space-2);
}

.split__kicker {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-ink-muted);
  margin-block-end: var(--space-5);
}

.split__col p {
  color: var(--color-ink-muted);
}

.split__col p + p {
  margin-block-start: var(--space-4);
}

/* On navy grounds */
.section--navy .split__col h3 {
  color: #FFFFFF;
}

.section--navy .split__col p,
.section--navy .split__kicker {
  color: var(--color-on-navy-muted);
}

/* Bridge line that closes a split — the "and this is the gap" sentence */
.split-bridge {
  margin-block-start: var(--space-12);
  border: var(--hairline) solid var(--color-hairline);
  padding: var(--space-6) clamp(1.25rem, 1rem + 1.5vw, 2rem);
}

.split-bridge p {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-navy);
  max-inline-size: 52rem;
}

.section--navy .split-bridge {
  border-color: var(--color-hairline-navy);
}

.section--navy .split-bridge p {
  color: var(--color-on-navy);
}

/* --------------------------------------------------------------------
   Ledger — dt/dd rows for term-and-meaning content (mahr, khula,
   intestacy…). Reads like a well-kept register, not a glossary dump.
   -------------------------------------------------------------------- */
.ledger {
  margin: 0;
}

.ledger > div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--space-10);
  row-gap: var(--space-2);
  padding-block: var(--space-6);
  border-block-start: var(--hairline) solid var(--color-hairline);
}

.ledger > div:last-child {
  border-block-end: var(--hairline) solid var(--color-hairline);
}

@media (max-width: 767px) {
  .ledger > div {
    grid-template-columns: 1fr;
  }
}

.ledger dt {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-navy);
}

.ledger dt .ledger__term-note {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-gold-ink);
  margin-block-start: var(--space-2);
}

.ledger dd {
  margin: 0;
  color: var(--color-ink-muted);
}

.ledger dd p + p {
  margin-block-start: var(--space-3);
}

/* --------------------------------------------------------------------
   Steps — a numbered path (how the work proceeds).
   -------------------------------------------------------------------- */
.steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10);
}

.steps--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 899px) {
  .steps,
  .steps--4 {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }
}

.steps__item {
  border-block-start: var(--hairline) solid var(--color-hairline);
  padding-block-start: var(--space-6);
}

.steps__num {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-gold);
  margin-block-end: var(--space-4);
}

.steps__item h3 {
  font-size: var(--text-xl);
  margin-block-end: var(--space-3);
}

.steps__item p {
  color: var(--color-ink-muted);
  font-size: var(--text-md);
}

.section--navy .steps__item {
  border-block-start-color: var(--color-hairline-navy);
}

.section--navy .steps__num {
  color: var(--color-gold-bright);
}

.section--navy .steps__item h3 {
  color: #FFFFFF;
}

.section--navy .steps__item p {
  color: var(--color-on-navy-muted);
}

/* --------------------------------------------------------------------
   Prose — long-form editorial passages with a reading measure.
   -------------------------------------------------------------------- */
.prose {
  max-inline-size: var(--width-prose);
}

.prose p + p {
  margin-block-start: var(--space-4);
}

.prose h3 {
  font-size: var(--text-xl);
  margin-block-start: var(--space-10);
  margin-block-end: var(--space-3);
}

.prose > h3:first-child {
  margin-block-start: 0;
}

/* Marked list — quiet gold dashes, not bullets */
.marked-list {
  list-style: none;
  padding: 0;
  max-inline-size: var(--width-prose);
}

.marked-list li {
  position: relative;
  padding-inline-start: var(--space-6);
  padding-block: var(--space-2);
  color: var(--color-ink-muted);
}

.marked-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--space-2) + 0.75em);
  inline-size: var(--space-4);
  block-size: 2px;
  background-color: var(--color-gold);
}

.marked-list li strong {
  color: var(--color-ink);
  font-weight: 600;
}

.section--navy .marked-list li {
  color: var(--color-on-navy-muted);
}

.section--navy .marked-list li::before {
  background-color: var(--color-gold-bright);
}

.section--navy .marked-list li strong {
  color: var(--color-on-navy);
}

/* Two-column arrangement of prose + list or prose + aside */
.duet {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-10) clamp(3rem, 2rem + 4vw, 6rem);
  align-items: start;
}

@media (max-width: 899px) {
  .duet {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------------------
   Notes — framed asides for cautions and practical points.
   --gold: practical emphasis. --safety: quiet, serious.
   -------------------------------------------------------------------- */
.note {
  border: var(--hairline) solid var(--color-gold);
  padding: var(--space-6) clamp(1.25rem, 1rem + 1.5vw, 2rem);
  max-inline-size: 52rem;
}

.note p {
  font-size: var(--text-md);
  color: var(--color-ink);
  max-inline-size: none;
}

/* Notes placed on navy sections (Partnerships, Structuring): keep the
   text and rule legible on the dark ground. */
.section--navy .note {
  border-color: var(--color-gold-bright);
}

.section--navy .note__label {
  color: var(--color-gold-bright);
}

.section--navy .note p {
  color: var(--color-on-navy);
}

.note p + p {
  margin-block-start: var(--space-3);
}

.note__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink);
  margin-block-end: var(--space-3);
}

.note--safety {
  border-color: var(--color-hairline);
  background-color: var(--color-mist);
}

.note--safety .note__label {
  color: var(--color-navy);
}

.note--safety p {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.note--safety p strong,
.note--safety p a {
  color: var(--color-ink);
}

/* --------------------------------------------------------------------
   FAQ — native disclosure, styled as hairline rows.
   -------------------------------------------------------------------- */
.faqs {
  max-inline-size: 52rem;
}

.faqs details {
  border-block-start: var(--hairline) solid var(--color-hairline);
}

.faqs details:last-child {
  border-block-end: var(--hairline) solid var(--color-hairline);
}

.faqs summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding-block: var(--space-5);
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.faqs summary::-webkit-details-marker {
  display: none;
}

.faqs summary:hover {
  color: var(--color-action);
}

.faqs summary::after {
  content: "+";
  flex-shrink: 0;
  margin-inline-start: auto;
  padding-inline-start: var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--color-gold);
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-out);
}

.faqs details[open] summary::after {
  content: "\2212"; /* minus sign */
}

.faq__answer {
  padding-block-end: var(--space-6);
  color: var(--color-ink-muted);
}

.faq__answer p {
  max-inline-size: 44rem;
}

.faq__answer p + p {
  margin-block-start: var(--space-3);
}

/* --------------------------------------------------------------------
   Advisers — compact reference to the real people behind a service.
   -------------------------------------------------------------------- */
.advisers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8) var(--space-16);
}

@media (max-width: 767px) {
  .advisers {
    grid-template-columns: 1fr;
  }
}

.adviser {
  display: flex;
  align-items: flex-start;
  gap: var(--space-5);
}

.adviser__photo {
  inline-size: 88px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--color-hairline);
}

.adviser h3 {
  font-size: var(--text-lg);
  margin-block-end: var(--space-1);
}

.adviser__role {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink);
  margin-block-end: var(--space-2);
}

.adviser p {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.section--navy .adviser h3 {
  color: #FFFFFF;
}

.section--navy .adviser__role {
  color: var(--color-gold-bright);
}

.section--navy .adviser p {
  color: var(--color-on-navy-muted);
}

/* --------------------------------------------------------------------
   Related services — quiet cross-links at the foot of each page.
   -------------------------------------------------------------------- */
.related {
  background-color: var(--color-mist);
}

.related__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

@media (max-width: 899px) {
  .related__list {
    grid-template-columns: 1fr;
  }
}

.related__link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background-color: var(--color-paper);
  border: var(--hairline) solid var(--color-hairline);
  padding: var(--space-6);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.related__link:hover {
  border-color: var(--color-navy);
}

.related__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-navy);
}

.related__link:hover .related__title {
  color: var(--color-action);
}

.related__desc {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------
   Next strip — a single quiet cross-link line, used where a full
   related-cards grid would be repetitive.
   -------------------------------------------------------------------- */
.next-strip {
  border: var(--hairline) solid var(--color-hairline);
  padding: var(--space-6) clamp(1.25rem, 1rem + 1.5vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.next-strip + .next-strip {
  margin-block-start: var(--space-4);
}

.next-strip p {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  max-inline-size: 46rem;
}

.next-strip p strong {
  color: var(--color-navy);
  font-weight: 600;
}

.next-strip a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
}

/* --------------------------------------------------------------------
   Utility surfaces
   -------------------------------------------------------------------- */
.section--mist {
  background-color: var(--color-mist);
}

/* Reduced rhythm — for single-strip sections that shouldn't
   command a full section's worth of air. */
.section--tight {
  padding-block: var(--space-12);
}

.section--navy {
  background-color: var(--color-navy);
  --focus-color: var(--color-gold-bright);
  color: var(--color-on-navy);
}

/* Inline links on navy: royal blue vanishes here — use light ink */
.section--navy a:not(.button) {
  color: var(--color-on-navy);
}

.section--navy a:not(.button):hover {
  color: var(--color-gold-bright);
}

.section--navy .section__head h2 {
  color: #FFFFFF;
}

.section--navy .section__head .eyebrow {
  color: var(--color-gold-bright);
}

.section--navy .section__head .text-muted {
  color: var(--color-on-navy-muted);
}



/* ==========================================================================
   LawFiq — Consultation request form
   Shared by the homepage (#book) and the Contact page. The section
   composition (.book), the form panel (.book-form), choice chips, field
   hints, inline validation, the error summary and the live status region.
   main.js validates, posts to /api/enquiry.php and shows the confirmed
   outcome (see the delivery states at the end). Logical properties only.
   ========================================================================== */

/* --------------------------------------------------------------------
   Booking section — navy ground, intro aside, white plaque-mat panel.
   -------------------------------------------------------------------- */
.book {
  background-color: var(--color-navy);
  --focus-color: var(--color-gold-bright);
  color: var(--color-on-navy);
  scroll-margin-block-start: var(--space-8);
}

.book__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-12) clamp(3rem, 2rem + 3vw, 5rem);
  align-items: start;
}

@media (max-width: 899px) {
  .book__grid {
    grid-template-columns: 1fr;
  }
}

.book__intro .eyebrow {
  color: var(--color-gold-bright);
  margin-block-end: var(--space-4);
}

.book__intro h2 {
  color: #FFFFFF;
  margin-block-end: var(--space-4);
}

.book__lead {
  color: var(--color-on-navy-muted);
  margin-block-end: var(--space-8);
}

.book__contact {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-block-end: var(--space-8);
}

.book__contact a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
}

.book__contact a:hover {
  color: var(--color-gold-bright);
}

.book__legal {
  font-size: var(--text-sm);
  color: var(--color-on-navy-muted);
  max-inline-size: 26rem;
  margin-block-end: var(--space-6);
}

.book__safety {
  font-size: var(--text-xs);
  color: var(--color-on-navy-muted);
  max-inline-size: 26rem;
  padding-block-start: var(--space-4);
  border-block-start: var(--hairline) solid var(--color-hairline-navy);
}

.book__safety a {
  color: var(--color-on-navy);
}

/* --------------------------------------------------------------------
   The form panel — white, hairline-framed, the plaque mat again
   -------------------------------------------------------------------- */
.book-form {
  background-color: var(--color-paper);
  --focus-color: var(--color-navy);
  color: var(--color-ink);
  border: var(--hairline) solid var(--color-hairline);
  padding: clamp(1.5rem, 1.25rem + 1.5vw, 2.75rem);
  display: grid;
  gap: var(--space-6);
}

/* Optional note, folded away until wanted: the form asks five things and
   nothing more unless the visitor chooses to write. */
.book-form__more {
  border-block-start: var(--hairline) solid var(--color-hairline);
  padding-block-start: var(--space-4);
}

.book-form__more summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 44px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
  list-style: none;
}

.book-form__more summary::-webkit-details-marker {
  display: none;
}

.book-form__more summary::before {
  content: "+";
  color: var(--color-gold);
  font-size: var(--text-lg);
  line-height: 1;
}

.book-form__more[open] summary::before {
  content: "\2212";
}

.book-form__more summary:hover {
  color: var(--color-action);
}

.book-form__more .field {
  margin-block-start: var(--space-3);
}

.book-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 639px) {
  .book-form__row {
    grid-template-columns: 1fr;
  }
}

.field__optional {
  font-weight: 400;
  color: var(--color-ink-muted);
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  margin-block-start: var(--space-2);
  max-width: none;
}

/* Inline validation message — sits under the control it describes */
.field__error {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-error);
  margin-block-start: var(--space-2);
  max-width: none;
}

.field__error[hidden] {
  display: none;
}

/* Specific consent (UK GDPR Article 9(2)(a)): one unticked checkbox with its
   own wording. Never a generic "I accept the privacy policy" box. */
.field--check {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-3);
  row-gap: var(--space-2);
  align-items: start;
  margin-block-start: var(--space-6);
}

.field--check input[type="checkbox"] {
  inline-size: 1.2rem;
  block-size: 1.2rem;
  margin-block-start: 0.2rem;
  accent-color: var(--color-navy);
}

.field--check label {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink);
}

.field--check .field__error {
  grid-column: 1 / -1;
}

.field--check input[aria-invalid="true"] {
  outline: 2px solid var(--color-error);
  outline-offset: 3px;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--color-error);
  border-width: 2px;
}

/* Choice chips — accessible radios styled as quiet pills */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.chip input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.chip span {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: var(--space-2) var(--space-4);
  border: var(--hairline) solid #9AA8BC;
  border-radius: var(--radius-none);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.chip:hover span {
  border-color: var(--color-navy);
}

.chip input:checked + span {
  background-color: var(--color-navy);
  border-color: var(--color-navy);
  color: #FFFFFF;
}

.chip input:focus-visible + span {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
}

.chip input[aria-invalid="true"] + span {
  border-color: var(--color-error);
}

/* --------------------------------------------------------------------
   Error summary — appears above the fields after a failed submit and
   receives focus, so keyboard and screen-reader users land on the list
   of what needs fixing. Each item links to its field.
   -------------------------------------------------------------------- */
.form-summary {
  border: 2px solid var(--color-error);
  padding: var(--space-5) var(--space-6);
}

.form-summary[hidden] {
  display: none;
}

.form-summary__title {
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--color-error);
  margin-block-end: var(--space-3);
}

.form-summary ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-summary a {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-error);
}

/* --------------------------------------------------------------------
   Actions, notes and the live status region
   -------------------------------------------------------------------- */
.book-form__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.book-form__actions .button {
  justify-self: start;
}

.book-form__actions .button[aria-disabled="true"] {
  opacity: 0.65;
  cursor: progress;
}

.book-form__note,
.book-form__privacy {
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
  max-width: none;
}

/* Live region: empty until there is an outcome to report (sending,
   received, or could not be sent). Framed in gold once it speaks. */
.form-status {
  font-size: var(--text-sm);
  color: var(--color-ink);
  max-width: none;
}

.form-status:not(:empty) {
  border: var(--hairline) solid var(--color-gold);
  padding: var(--space-4) var(--space-5);
}

.form-status p + p {
  margin-block-start: var(--space-2);
}

/* Template markup for the status message is never rendered directly */
.book-form template {
  display: none;
}

/* --------------------------------------------------------------------
   Delivery states (server submission)
   -------------------------------------------------------------------- */

/* Honeypot: off-screen for people, present in the markup for bots.
   Not display:none, which some scripts skip; never focusable. */
.book-form__hp {
  position: absolute;
  inset-inline-start: -10000px;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
}

/* After a confirmed send the questions fall away and only the
   confirmation remains in the panel. */
.book-form.is-sent > :not(.book-form__actions),
.book-form.is-sent .book-form__actions > :not(.form-status) {
  display: none;
}

.form-status:focus {
  outline: 2px solid var(--focus-color);
  outline-offset: 3px;
}

.form-status a {
  color: var(--color-navy);
}


/* ==========================================================================
   LawFiq — About
   Additions on top of sections.css. Type-led hero with the girih corner,
   the four real portraits in a compact profile grid, and two note
   variants. Everything else is composed from the shared primitives.
   Logical properties only.
   ========================================================================== */

.about-hero {
  max-inline-size: 48rem;
}

.page-hero--about .page-hero__lattice {
  color: var(--color-gold);
  opacity: 0.35;
}

/* Profile grid — the homepage team cards, reused here without home.css */
.people {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-12) var(--space-16);
}

@media (max-width: 767px) {
  .people {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }
}

.person {
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
}

.person__photo {
  inline-size: clamp(104px, 9vw + 72px, 150px);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  flex-shrink: 0;
  background-color: var(--color-hairline);
}

.person h3 {
  font-size: var(--text-lg);
  margin-block-end: var(--space-2);
}

.person__role {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink);
  margin-block-end: var(--space-3);
}

.person__bio {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* Notes */
.about-note {
  margin-block-start: var(--space-12);
}

.about-note--navy {
  border-color: var(--color-gold-bright);
}

.about-note--navy .note__label {
  color: var(--color-gold-bright);
}

.about-note--navy p {
  color: var(--color-on-navy);
}


/* ==========================================================================
   LawFiq — Contact
   Additions on top of sections.css and forms.css. Type-led: the hero
   carries the practical details in a ruled card beside the headline;
   everything else is composed from the shared primitives.
   Logical properties only.
   ========================================================================== */

.page-hero--contact .page-hero__grid {
  align-items: start;
}

@media (max-width: 899px) {
  /* Match sections.css's mobile collapse — the override above outranks it */
  .page-hero--contact .page-hero__grid {
    grid-template-columns: 1fr;
  }
}

/* Contact card — a small ledger of the ways to reach us */
.contact-card {
  margin: 0;
  border-block-start: 2px solid var(--color-gold);
  max-inline-size: 30rem;
  justify-self: end;
  inline-size: 100%;
}

@media (max-width: 899px) {
  .contact-card {
    justify-self: start;
  }
}

.contact-card > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  column-gap: var(--space-4);
  padding-block: var(--space-4);
  border-block-end: var(--hairline) solid color-mix(in srgb, var(--color-gold) 45%, transparent);
}

.contact-card dt {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink);
  padding-block-start: 0.35em;
}

.contact-card dd {
  margin: 0;
  color: var(--color-ink);
}

.contact-card dd a {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: none;
}

.contact-card dd a:hover {
  color: var(--color-action);
}

.contact-card address {
  font-style: normal;
}



/* ==========================================================================
   LawFiq — Education & Training
   Additions on top of sections.css. The page is a prospectus, not a
   course shop: numerals, fine rules, an index, real faculty. Logical
   properties only.
   ========================================================================== */

/* --------------------------------------------------------------------
   Hero — headline beside a ruled index of the learning strands.
   -------------------------------------------------------------------- */
.page-hero--prospectus .page-hero__inner {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

.page-hero--prospectus .page-hero__grid {
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  align-items: start;
}

@media (max-width: 899px) {
  /* Match sections.css's mobile collapse — the override above outranks it */
  .page-hero--prospectus .page-hero__grid {
    grid-template-columns: 1fr;
  }
}

.strand-index {
  list-style: none;
  padding: 0;
  margin: 0;
  border-block-start: 2px solid var(--color-gold);
}

.strand-index li {
  border-block-end: var(--hairline) solid color-mix(in srgb, var(--color-gold) 45%, transparent);
}

.strand-index a {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: var(--space-4);
  align-items: baseline;
  padding-block: var(--space-5);
  color: inherit;
  text-decoration: none;
}

.strand-index__num {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: 600;
  line-height: 1;
  color: var(--color-gold);
}

.strand-index__title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-navy);
  transition: color var(--duration-fast) var(--ease-out);
}

.strand-index a:hover .strand-index__title {
  color: var(--color-action);
}

.strand-index__desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  margin-block-start: var(--space-1);
}

/* --------------------------------------------------------------------
   Strands — the four learning areas, each under its own numeral.
   -------------------------------------------------------------------- */
.strands {
  list-style: none;
  padding: 0;
  margin: 0;
}

.strand {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  column-gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-block-start: var(--hairline) solid var(--color-hairline);
  scroll-margin-block-start: 6rem;
}

.strand:last-child {
  border-block-end: var(--hairline) solid var(--color-hairline);
}

@media (max-width: 899px) {
  .strand {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
  }
}

.strand__num {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1;
  color: var(--color-gold);
}

.strand h3 {
  font-size: var(--text-2xl);
  margin-block-end: var(--space-2);
}

.strand__for {
  color: var(--color-ink-muted);
  max-inline-size: 40rem;
}

.strand__body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-6) var(--space-10);
  margin-block-start: var(--space-6);
}

@media (max-width: 767px) {
  .strand__body {
    grid-template-columns: 1fr;
  }
}

.strand__label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink);
  margin-block-end: var(--space-3);
}

.strand__formats {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------
   Faculty — the navy section with the fine lattice, and three real
   portraits in the plaque mat.
   -------------------------------------------------------------------- */
.section--lattice {
  position: relative;
  overflow: hidden;
}

.section--lattice > .container {
  position: relative;
  z-index: 1;
}

.faculty__lattice {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(38%, 520px);
  color: var(--color-gold-bright);
  opacity: 0.3;
  -webkit-mask-image: linear-gradient(to left, #000 25%, transparent 95%);
  mask-image: linear-gradient(to left, #000 25%, transparent 95%);
  pointer-events: none;
}

html[dir="rtl"] .faculty__lattice {
  -webkit-mask-image: linear-gradient(to right, #000 25%, transparent 95%);
  mask-image: linear-gradient(to right, #000 25%, transparent 95%);
}

.faculty__lattice svg {
  inline-size: 100%;
  block-size: 100%;
}

@media (max-width: 767px) {
  .faculty__lattice {
    display: none;
  }
}

.faculty {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-10) var(--space-8);
}

@media (max-width: 899px) {
  .faculty {
    grid-template-columns: 1fr;
    max-inline-size: 36rem;
  }
}

.faculty__figure {
  margin: 0 0 var(--space-5);
  border: var(--hairline) solid var(--color-gold-bright);
  padding: clamp(0.625rem, 0.5rem + 0.5vw, 1rem);
  max-inline-size: 300px;
}

.faculty__figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.faculty h3 {
  font-size: var(--text-xl);
  color: #FFFFFF;
  margin-block-end: var(--space-1);
}

.faculty__role {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-bright);
  margin-block-end: var(--space-3);
}

.faculty p {
  font-size: var(--text-sm);
  color: var(--color-on-navy-muted);
}

/* --------------------------------------------------------------------
   Availability — one honest block, gold-framed. No course cards.
   -------------------------------------------------------------------- */
.availability {
  border: var(--hairline) solid var(--color-gold);
  padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  max-inline-size: 56rem;
}

.availability .eyebrow {
  margin-block-end: var(--space-4);
}

.availability h2 {
  font-size: var(--text-3xl);
  margin-block-end: var(--space-4);
}

.availability p {
  color: var(--color-ink-muted);
}

.availability__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-6);
  margin-block-start: var(--space-8);
}

.availability__alt {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}


/* ==========================================================================
   LawFiq — For Institutions
   Additions on top of sections.css. The professional pathway is secondary
   to Family and Business and is composed almost entirely from the shared
   primitives: a light type-led hero with the tighter girih corner, and a
   three-up variant of the adviser strip. Logical properties only.
   ========================================================================== */

.institutions-hero {
  max-inline-size: 48rem;
}

.page-hero--institutions .page-hero__lattice {
  color: var(--color-gold);
  opacity: 0.35;
}

/* Three advisers side by side on wide screens */
@media (min-width: 1024px) {
  .advisers--trio {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8) var(--space-10);
  }
}


/* ==========================================================================
   LawFiq — Insights
   Additions on top of sections.css. The landing is an editorial gateway:
   type-led, numbered topic pathways, a ledger of standards. The second
   half of this sheet is the reusable article pattern for future pieces —
   defined now so that the first real article needs no new CSS. Nothing
   here is a blog grid. Logical properties only.
   ========================================================================== */

/* --------------------------------------------------------------------
   Hero device — the section name in both scripts, set as type.
   Decorative only (aria-hidden); the heading carries the meaning.
   -------------------------------------------------------------------- */
.reading-mark {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-4);
  border-inline-end: 2px solid var(--color-gold);
  padding-inline-end: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-block: var(--space-2);
}

.reading-mark__word {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  line-height: 1;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.reading-mark__word--ar {
  font-family: var(--font-arabic-display);
  font-style: normal;
  font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
  line-height: 1.2;
}

.reading-mark__rule {
  display: block;
  inline-size: clamp(3rem, 2rem + 3vw, 5rem);
  block-size: 1px;
  background-color: var(--color-gold);
}

@media (max-width: 899px) {
  .reading-mark {
    display: none;
  }
}

/* --------------------------------------------------------------------
   Topic pathways — four numbered entries, each with a short reading path
   into existing pages. A register, not a card grid.
   -------------------------------------------------------------------- */
.topics {
  list-style: none;
  padding: 0;
  margin: 0;
  border-block-start: 2px solid var(--color-gold);
}

.topic {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  column-gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-block-end: var(--hairline) solid var(--color-hairline);
  scroll-margin-block-start: 6rem;
}

@media (max-width: 899px) {
  .topic {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
  }
}

.topic__num {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: 1;
  color: var(--color-gold);
}

.topic__body h3 {
  font-size: var(--text-2xl);
  margin-block-end: var(--space-3);
}

.topic__body > p {
  color: var(--color-ink-muted);
  max-inline-size: 40rem;
  margin-block-end: var(--space-6);
}

.topic__paths {
  list-style: none;
  padding: 0;
  margin: 0;
  max-inline-size: 44rem;
}

.topic__paths li {
  border-block-start: var(--hairline) solid var(--color-hairline);
}

.topic__paths a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  row-gap: var(--space-1);
  align-items: baseline;
  padding-block: var(--space-4);
  text-decoration: none;
  color: inherit;
}

.topic__paths a::after {
  content: "\2192";
  grid-row: 1 / span 2;
  grid-column: 2;
  align-self: center;
  color: var(--color-gold);
  transition: transform var(--duration-base) var(--ease-out);
}

html[dir="rtl"] .topic__paths a::after {
  content: "\2190";
}

.topic__paths a:hover::after {
  transform: translateX(4px);
}

html[dir="rtl"] .topic__paths a:hover::after {
  transform: translateX(-4px);
}

.topic__path-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-navy);
  transition: color var(--duration-fast) var(--ease-out);
}

.topic__paths a:hover .topic__path-title {
  color: var(--color-action);
}

.topic__path-desc {
  grid-column: 1;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------
   Pieces list — for the "Latest" register once real pieces exist.
   Mirrors the homepage insight rows, plus a meta line. Not rendered on
   the landing until there is something real to list.
   -------------------------------------------------------------------- */
.pieces {
  list-style: none;
  padding: 0;
  margin: 0;
}

.piece {
  border-block-start: var(--hairline) solid var(--color-hairline);
}

.piece:last-child {
  border-block-end: var(--hairline) solid var(--color-hairline);
}

.piece a {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  column-gap: var(--space-10);
  row-gap: var(--space-2);
  align-items: baseline;
  padding-block: var(--space-6);
  text-decoration: none;
  color: inherit;
}

@media (max-width: 767px) {
  .piece a {
    grid-template-columns: 1fr;
  }
}

.piece__kicker {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink);
}

.piece__title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--color-navy);
  transition: color var(--duration-fast) var(--ease-out);
}

.piece a:hover .piece__title {
  color: var(--color-action);
}

.piece__standfirst {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.piece__meta {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------
   Article pattern — for future pieces at /insights/<slug>/.
   Header (kicker, title, standfirst, byline) above a single reading
   column; key points in a gold note; the closing note carries the
   general-information line and the regulatory statement.
   -------------------------------------------------------------------- */
.article__header {
  max-inline-size: 48rem;
}

.article__kicker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink);
  margin-block-end: var(--space-5);
}

.article__title {
  font-size: var(--text-display);
  margin-block-end: var(--space-6);
}

.article__standfirst {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  color: var(--color-ink-muted);
  max-inline-size: 40rem;
}

.article__byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-block-start: var(--space-8);
  padding-block-start: var(--space-5);
  border-block-start: var(--hairline) solid var(--color-hairline);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

.article__byline strong {
  color: var(--color-ink);
  font-weight: 600;
}

.article__body {
  max-inline-size: 44rem;
}

.article__body h2 {
  font-size: var(--text-2xl);
  margin-block-start: var(--space-12);
  margin-block-end: var(--space-4);
}

.article__body h3 {
  font-size: var(--text-xl);
  margin-block-start: var(--space-10);
  margin-block-end: var(--space-3);
}

.article__body p + p {
  margin-block-start: var(--space-4);
}

.article__body .marked-list {
  margin-block: var(--space-4);
}

.article__keypoints {
  margin-block: var(--space-8);
}

.article__keypoints .marked-list li {
  color: var(--color-ink);
}

.article__update {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  border-inline-start: 2px solid var(--color-gold);
  padding-inline-start: var(--space-4);
  margin-block: var(--space-8);
}

.article__foot {
  margin-block-start: var(--space-12);
  max-inline-size: 44rem;
}


/* ==========================================================================
   LawFiq — Legal documents
   Legal & Regulatory Information, Privacy Notice, Accessibility Statement.
   A document layout: a short hero, a sticky contents list beside one
   reading column, definition tables for facts. Fully typographic; prints
   cleanly (see base.css). Logical properties only.
   ========================================================================== */

.doc-hero {
  max-inline-size: 48rem;
}

.doc-meta {
  margin-block-start: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-ink-muted);
}

/* Contents beside the document */
.doc {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  column-gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

@media (max-width: 899px) {
  .doc {
    grid-template-columns: 1fr;
    row-gap: var(--space-10);
  }
}

.doc__contents {
  position: sticky;
  inset-block-start: var(--space-8);
}

@media (max-width: 899px) {
  .doc__contents {
    position: static;
    border: var(--hairline) solid var(--color-hairline);
    padding: var(--space-5) var(--space-6);
  }
}

.doc__contents .eyebrow {
  margin-block-end: var(--space-3);
}

.doc__contents ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-block-start: 2px solid var(--color-gold);
}

.doc__contents li {
  border-block-end: var(--hairline) solid var(--color-hairline);
}

.doc__contents a {
  display: flex;
  align-items: center;
  min-block-size: 40px;
  padding-block: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
}

.doc__contents a:hover {
  color: var(--color-action);
}

/* The reading column */
.doc__body {
  max-inline-size: 46rem;
}

.doc__body h2 {
  font-size: var(--text-2xl);
  margin-block-start: var(--space-12);
  margin-block-end: var(--space-4);
  padding-block-start: var(--space-6);
  border-block-start: var(--hairline) solid var(--color-hairline);
  scroll-margin-block-start: var(--space-8);
}

.doc__body > h2:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.doc__body h3 {
  font-size: var(--text-lg);
  margin-block-start: var(--space-8);
  margin-block-end: var(--space-2);
}

.doc__body p {
  color: var(--color-ink);
}

.doc__body p + p {
  margin-block-start: var(--space-4);
}

.doc__body .marked-list {
  margin-block: var(--space-4) var(--space-6);
}

.doc__body .marked-list li {
  color: var(--color-ink);
}

.doc__body code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  font-size: 0.9em;
  background-color: var(--color-mist);
  padding: 0.1em 0.4em;
}

/* Fact tables — company details, data categories */
.doc__table {
  margin: var(--space-4) 0 var(--space-6);
  border-block-start: var(--hairline) solid var(--color-hairline);
}

.doc__table > div {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  column-gap: var(--space-6);
  row-gap: var(--space-1);
  padding-block: var(--space-4);
  border-block-end: var(--hairline) solid var(--color-hairline);
}

@media (max-width: 639px) {
  .doc__table > div {
    grid-template-columns: 1fr;
  }
}

.doc__table dt {
  font-weight: 600;
  color: var(--color-navy);
}

.doc__table dd {
  margin: 0;
  color: var(--color-ink);
}

/* Print: the contents list is navigation; the column takes the page */
@media print {
  .doc {
    display: block;
  }

  .doc__contents {
    display: none;
  }

  .doc__body {
    max-inline-size: none;
  }

  .doc__body h2 {
    border-block-start-color: #000;
  }
}


/* ==========================================================================
   LawFiq — Mediation gateway
   Additions on top of sections.css. The gateway is the quiet wing of the
   site: light ground, no photograph, one typographic device. Everything
   else is composed from the shared primitives. Logical properties only.
   ========================================================================== */

/* --------------------------------------------------------------------
   Hero — light, spacious, type-led.
   The single device is the word الصُّلح set live in Amiri (English page)
   or "Sulh" in Source Serif italic (Arabic page). It is typography, not
   calligraphy: one word, one rule, one caption.
   -------------------------------------------------------------------- */
.page-hero--sulh .page-hero__inner {
  padding-block: clamp(4rem, 3rem + 4vw, 7rem);
}

.page-hero--sulh .page-hero__grid {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: end;
}

.sulh-mark {
  justify-self: end;
  text-align: end;
  border-inline-end: 2px solid var(--color-gold);
  padding-inline-end: clamp(1.5rem, 1rem + 2vw, 3rem);
  padding-block: var(--space-2);
}

.sulh-mark__word {
  display: block;
  font-family: var(--font-arabic-display);
  font-weight: 400;
  font-size: clamp(5rem, 3.5rem + 7vw, 10rem);
  /* Amiri's deep descenders (the final ح) need the taller line box, or
     the word overprints the caption beneath it. */
  line-height: 1.5;
  color: var(--color-navy);
}

.sulh-mark__word--latin {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(4rem, 3rem + 6vw, 8.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
}

.sulh-mark__caption {
  margin-block-start: var(--space-4);
  margin-inline-start: auto;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  max-inline-size: 20rem;
}

@media (max-width: 899px) {
  /* Match sections.css's mobile collapse — the override above outranks it */
  .page-hero--sulh .page-hero__grid {
    grid-template-columns: 1fr;
  }

  .sulh-mark {
    justify-self: start;
    text-align: start;
    border-inline-end: 0;
    border-inline-start: 2px solid var(--color-gold);
    padding-inline-end: 0;
    padding-inline-start: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  }

  .sulh-mark__word {
    font-size: clamp(4rem, 3rem + 6vw, 6rem);
  }

  .sulh-mark__word--latin {
    font-size: clamp(3.5rem, 2.5rem + 5vw, 5rem);
  }

  .sulh-mark__caption {
    margin-inline-start: 0;
  }
}

/* --------------------------------------------------------------------
   The mediator — the page's one human image, at real scale: the
   approved portrait in the plaque mat beside the role, defined.
   -------------------------------------------------------------------- */
.mediator {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--space-10) clamp(3rem, 2rem + 4vw, 6rem);
  align-items: start;
}

@media (max-width: 899px) {
  .mediator {
    grid-template-columns: 1fr;
  }
}

.mediator__figure {
  margin: 0;
  border: var(--hairline) solid var(--color-gold);
  padding: clamp(0.625rem, 0.5rem + 0.5vw, 1rem);
  max-inline-size: 360px;
}

.mediator__figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

.mediator__name {
  font-size: var(--text-2xl);
  margin-block-end: var(--space-1);
}

.mediator__role {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--color-gold-ink);
  margin-block-end: var(--space-5);
}



/* ==========================================================================
   LawFiq — Business section
   Additions on top of sections.css. The Business pages share the site's
   primitives but compose them at a tighter, more commercial pitch: a
   denser entry grid for six doors, and nothing else new — restraint is
   the differentiator. Logical properties only.
   ========================================================================== */

/* Six situation doors: two columns on tablet, three on wide screens,
   so the landing reads as a considered index rather than a long list. */
@media (min-width: 1100px) {
  .entries__grid--trio {
    grid-template-columns: repeat(3, 1fr);
  }

  .entries__grid--trio .entry-card h3 {
    font-size: var(--text-xl);
  }
}


/* =============================================================
   Skin: the client's look applied to the inner-page components
   (soft radii, blue accents, layered cards, calm spacing).
   ============================================================= */
.section{padding:var(--sec) 0}
.section--tight{padding:clamp(2rem,4vw,3rem) 0}
.section--mist{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section--navy{position:relative;overflow:hidden}
.section__head{max-width:62ch;margin-bottom:clamp(2.5rem,4.5vw,3.75rem)}
.section__head .eyebrow{margin-bottom:1.05rem}
.section__head h2{margin-bottom:1.05rem}
.section__head .text-muted{font-size:var(--t-lg);line-height:1.55}
.section--navy .section__head .text-muted{color:#B9C7E0}

/* page hero */
.page-hero{border-bottom:1px solid var(--line);background:#fff}
.page-hero--mist{background:var(--mist)}
.page-hero--navy,.page-hero--deep{background:var(--navy);border-bottom:0}
.page-hero--deep{background:#08152a}
.page-hero__inner{padding:clamp(2.5rem,4vw,4rem) var(--gutter) clamp(3rem,5vw,5rem)}
.page-hero .breadcrumbs{margin-bottom:clamp(1.5rem,2.5vw,2.5rem);font-size:var(--t-cap)}
.page-hero .eyebrow{margin-bottom:1.25rem}
.page-hero__title{max-width:18ch;margin-bottom:1.25rem}
.page-hero--navy .page-hero__title,.page-hero--deep .page-hero__title{color:#fff}
.page-hero__lead{font-size:var(--t-lg);line-height:1.6;color:var(--ink-2);max-width:52ch}
.page-hero--navy .page-hero__lead,.page-hero--deep .page-hero__lead{color:#C7D3E8}
.page-hero--navy .eyebrow,.page-hero--deep .eyebrow{color:var(--blue-lt)}
.page-hero--navy .eyebrow::before,.page-hero--deep .eyebrow::before{background:var(--blue-lt)}
.page-hero__rule{display:none}
.page-hero__actions{margin-top:2rem;gap:1rem 1.5rem}
.page-hero__alt{font-size:var(--t-sm);color:var(--ink-2)}
.page-hero__alt a{font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--navy);text-decoration:none;border-bottom:1px dashed var(--blue);padding-bottom:1px}
.page-hero--navy .page-hero__alt,.page-hero--deep .page-hero__alt{color:#B9C7E0}
.page-hero--navy .page-hero__alt a,.page-hero--deep .page-hero__alt a{color:#fff;border-bottom-color:var(--blue-lt)}
.page-hero__media{border:0;padding:0;border-radius:var(--r-media);overflow:hidden;box-shadow:var(--shadow)}
.page-hero__media img{display:block;width:100%;height:auto}
.page-hero__lattice{display:none}
.page-hero__grid{column-gap:clamp(2rem,5vw,4.5rem)}

/* lists and rows */
.marked-list li{color:var(--ink-2);padding:.75rem 0 .75rem 1.75rem;border-top:1px solid var(--line);font-size:var(--t-body)}
.marked-list li:first-child{border-top:0}
.marked-list li::before{width:11px;height:2px;top:1.4em;background:var(--blue)}
.marked-list li strong{color:var(--navy)}
.section--navy .marked-list li{border-top-color:var(--line-d);color:#EAF1FF}
.section--navy .marked-list li strong{color:#fff}
.section--navy .marked-list li::before{background:var(--blue-lt)}

.split{gap:1.25rem clamp(1.25rem,2.4vw,1.9rem)}
.split__col{border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.6rem,2.4vw,2.15rem);background:linear-gradient(180deg,var(--tint),#fff);box-shadow:var(--shadow-sm)}
.split__col--law{background:linear-gradient(180deg,var(--mist),#fff)}
.split__col h3{font-size:var(--t-h4);margin-bottom:.4rem}
.split__kicker{color:var(--blue);letter-spacing:.08em;margin-bottom:1rem}
.split__col p{color:var(--ink-2);line-height:1.6}
.split__col .marked-list li{border-top-color:var(--line)}
.section--navy .split__col{background:rgba(245,248,255,.05);border-color:var(--line-d);box-shadow:none}
.section--navy .split__col h3{color:#fff}
.section--navy .split__col p,.section--navy .split__kicker{color:#C7D3E8}
.split-bridge{margin-top:1.5rem;border:0;border-radius:var(--r-feat);background:var(--navy);color:#fff;padding:clamp(1.6rem,2.6vw,2.2rem) clamp(1.75rem,3vw,2.5rem);box-shadow:var(--shadow)}
.split-bridge p{color:#fff;font-family:var(--serif);font-weight:500;font-size:var(--t-lg);line-height:1.45;max-width:62ch}
.split-bridge a{color:var(--blue-lt)}
.section--navy .split-bridge{background:var(--navy-2);border:1px solid var(--line-d)}

.ledger>div{border-top:1px solid var(--line);padding:1.5rem 0}
.ledger>div:last-child{border-bottom:1px solid var(--line)}
.ledger dt{font-size:var(--t-h4);color:var(--navy)}
.ledger dt .ledger__term-note{color:var(--blue);letter-spacing:.08em}
.ledger dd,.ledger dd p{color:var(--ink-2);line-height:1.6}

.steps{gap:1.5rem}
.steps__item{border-top:0;border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(1.5rem,2.2vw,1.9rem);background:#fff;box-shadow:var(--shadow-sm)}
.steps__num{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:1.2rem;margin-bottom:1rem}
.steps__item h3{font-size:var(--t-h4);margin-bottom:.45rem}
.steps__item p{color:var(--ink-2);font-size:var(--t-sm);line-height:1.55}
.section--navy .steps__item{background:rgba(245,248,255,.05);border-color:var(--line-d);box-shadow:none}
.section--navy .steps__num{background:var(--blue);color:#fff}
.section--navy .steps__item h3{color:#fff}
.section--navy .steps__item p{color:#C7D3E8}
.section--mist .steps__item{background:#fff}

/* FAQ (details rows) */
.faqs{max-width:820px}
.faqs details{border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r-card);background:#fff;margin-bottom:.75rem;overflow:hidden}
.faqs details:last-child{border-bottom:1px solid var(--line)}
.faqs summary{padding:1.15rem 1.4rem;font-size:1.08rem;color:var(--navy);align-items:center}
.faqs summary::after{color:var(--blue);font-size:1.5rem;margin-left:auto;padding-left:1rem}
.faqs summary:hover{color:var(--blue)}
.faqs .faq__answer{padding:0 1.4rem 1.25rem;color:var(--ink-2);line-height:1.65}

/* notes */
.note{border:1px solid var(--line);border-radius:var(--r-feat);background:var(--tint);padding:1.6rem;box-shadow:var(--shadow-sm);max-width:52rem}
.note__label{color:var(--blue);letter-spacing:.09em}
.note p{color:var(--ink-2);font-size:var(--t-sm)}
.note--safety{background:rgba(123,63,74,.06);border-color:rgba(200,120,130,.35)}
.note--safety .note__label{color:#8C2F2F}
.note--safety p strong,.note--safety p a{color:var(--ink)}
.section--navy .note{background:rgba(245,248,255,.05);border-color:var(--line-d);box-shadow:none}
.section--navy .note__label{color:var(--blue-lt)}
.section--navy .note p{color:#EAF1FF}

/* entry cards (doors) */
.entries__grid{gap:clamp(1.25rem,2vw,1.75rem)}
.entries__grid--trio{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.entries__grid--trio{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.entries__grid--trio{grid-template-columns:1fr}}
.entry-card{border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r-feat);padding:clamp(1.9rem,2.8vw,2.5rem);box-shadow:0 30px 60px -45px rgba(11,31,58,.4);transition:transform .2s,box-shadow .2s,border-color .2s}
.entry-card:hover{transform:translateY(-6px);border-color:var(--blue-lt);border-top-color:var(--blue-lt)}
.entry-card .eyebrow{margin-bottom:1rem}
.entry-card h3{font-size:clamp(1.3rem,1.8vw,1.6rem);margin-bottom:.6rem}
.entry-card p{color:var(--ink-2);font-size:var(--t-body);line-height:1.55}
.entry-card__go{color:var(--blue)}

/* advisers / people */
.advisers{gap:1.5rem}
.advisers--trio{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.advisers--trio{grid-template-columns:1fr}}
.adviser{border:1px solid var(--line);border-radius:var(--r-card);padding:1.25rem;background:#fff;box-shadow:var(--shadow-sm)}
.adviser__photo{border-radius:12px;width:88px}
.adviser h3{font-size:1.12rem}
.adviser__role{color:var(--blue);letter-spacing:.08em}
.adviser p{color:var(--ink-2);font-size:var(--t-sm)}
.section--navy .adviser{background:rgba(245,248,255,.05);border-color:var(--line-d);box-shadow:none}
.section--navy .adviser h3{color:#fff}
.section--navy .adviser__role{color:var(--blue-lt)}
.section--navy .adviser p{color:#C7D3E8}
.people{gap:1.5rem}
.person{border:1px solid var(--line);border-radius:var(--r-feat);padding:1.5rem;background:#fff;box-shadow:var(--shadow-sm)}
.person__photo{border-radius:14px}
.person__role{color:var(--blue);letter-spacing:.08em}
.person__bio{color:var(--ink-2)}

/* CTA band */
.cta-band{background:var(--navy);border:0;position:relative;overflow:hidden}
.cta-band__inner{padding:var(--sec) var(--gutter);max-width:var(--wrap);margin:0 auto}
.cta-band .eyebrow{color:var(--blue-lt);margin-bottom:1rem}
.cta-band .eyebrow::before{background:var(--blue-lt)}
.cta-band h2{color:#fff;max-width:24ch;margin-bottom:1rem}
.cta-band__lead{color:#B9C7E0;font-size:var(--t-lg);margin-bottom:2rem;max-width:52ch}
.cta-band .cta-band__alt{color:#B9C7E0;font-size:var(--t-sm)}
.cta-band .cta-band__alt a{color:#fff;font-family:var(--serif);font-weight:600;font-size:1.15rem;border-bottom:1px dashed var(--blue-lt);padding-bottom:1px;text-decoration:none}

/* next strip and related */
.next-strip{border:1px solid var(--line);border-radius:var(--r-card);background:var(--tint);padding:1.25rem 1.5rem;box-shadow:var(--shadow-sm)}
.next-strip p{color:var(--ink-2)}
.next-strip p strong{color:var(--navy)}
.next-strip a{font-weight:600;color:var(--blue);text-decoration:none}
.related__link{border-radius:var(--r-card)}

/* breadcrumbs */
.breadcrumbs a{color:inherit;text-decoration:none}
.page-hero--navy .breadcrumbs,.page-hero--deep .breadcrumbs{color:#B9C7E0}
.page-hero:not(.page-hero--navy):not(.page-hero--deep) .breadcrumbs{color:var(--muted)}

/* prose blocks used by inner pages keep their measure */
main .prose{margin:0}
.duet{gap:2rem clamp(2rem,4vw,4rem)}

/* mediation mark and mediator card */
.sulh-mark{border-right-color:var(--blue-lt)}
.sulh-mark__word{color:var(--navy)}
.mediator{border:1px solid var(--line);border-radius:var(--r-feat);padding:clamp(1.5rem,2.5vw,2.25rem);background:#fff;box-shadow:var(--shadow-sm)}
.mediator__figure img{border-radius:14px}
.mediator__role{color:var(--blue);letter-spacing:.08em}

/* insights topics */
.topic__num{color:var(--blue)}
.topic__paths a{border-radius:12px}

/* contact card */
.contact-card{border-top:2px solid var(--blue);border:1px solid var(--line);border-radius:var(--r-feat);padding:1.25rem 1.5rem;background:#fff;box-shadow:var(--shadow-sm)}
.contact-card dt{color:var(--blue)}

/* legal documents */
.legal__contents a,.legal__body a{color:var(--blue)}

/* ---- consultation form: the client's panel look on our markup ---- */
.book{background:var(--navy);color:#F5F8FF;position:relative;overflow:hidden}
.book .eyebrow{color:var(--blue-lt)}
.book .eyebrow::before{background:var(--blue-lt)}
.book__intro h2{color:#fff;margin:1.05rem 0}
.book__lead{color:#B9C7E0;font-size:var(--t-lg);line-height:1.6;margin-bottom:1.6rem}
.book__contact a{color:#fff;font-family:var(--serif);font-weight:600;font-size:1.4rem;text-decoration:none}
.book__contact a:hover{color:var(--blue-lt)}
.book__legal,.book__safety{color:#8FA2C4;font-size:var(--t-sm);line-height:1.55}
.book__safety{border-top:1px solid var(--line-d)}
.book__safety a,.book__safety strong{color:#fff}
.book-form{background:var(--navy-2);border:1px solid var(--line-d);border-radius:var(--r-feat);padding:clamp(1.6rem,2.6vw,2.1rem);box-shadow:var(--shadow);color:#F5F8FF;--focus-color:#7AA2F0}
.book-form label,.book-form legend{font-size:var(--t-cap);letter-spacing:.06em;text-transform:uppercase;color:#8FA2C4;font-weight:600;margin-bottom:.65rem;display:block}
.book-form .field__optional{text-transform:none;letter-spacing:0;font-weight:400;color:#8FA2C4}
.book-form input[type="text"],.book-form input[type="email"],.book-form input[type="tel"],.book-form textarea,.book-form select{width:100%;background:rgba(245,248,255,.06);border:1px solid var(--line-d);border-radius:var(--r);color:#fff;font:inherit;font-size:var(--t-sm);padding:.78rem .9rem;transition:border-color .16s}
.book-form select option{color:#0F172A}
.book-form input:focus,.book-form textarea:focus,.book-form select:focus{outline:none;border-color:var(--blue-lt)}
.book-form textarea{resize:vertical;min-height:82px}
.book-form .chips{margin-bottom:0}
.book-form .chip span{min-height:44px;padding:.55rem 1rem;border:1px solid rgba(245,248,255,.24);background:transparent;color:#fff;border-radius:var(--r-pill);font-size:var(--t-sm);font-weight:500}
.book-form .chip:hover span{border-color:#fff}
.book-form .chip input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.book-form .chip input:focus-visible+span{outline:2px solid var(--blue-lt);outline-offset:2px}
.book-form .field__hint{color:#8FA2C4}
.book-form .field__error{color:#F0A6AE}
.book-form input[aria-invalid="true"],.book-form select[aria-invalid="true"],.book-form textarea[aria-invalid="true"]{border-color:#F0A6AE}
.book-form .chip input[aria-invalid="true"]+span{border-color:#F0A6AE}
.form-summary{border:1px solid rgba(200,120,130,.45);background:rgba(123,63,74,.18);border-radius:var(--r);padding:1rem 1.25rem}
.form-summary__title,.form-summary a{color:#F0D6DA}
.book-form__more{border-top:1px solid var(--line-d)}
.book-form__more summary{color:#fff;text-transform:none;letter-spacing:0;font-size:var(--t-sm)}
.book-form__more summary::before{color:var(--blue-lt)}
.field--check label{text-transform:none;letter-spacing:0;font-weight:400;color:#C7D3E8;font-size:var(--t-sm);line-height:1.5;margin:0}
.field--check input[type="checkbox"]{accent-color:var(--blue)}
.field--check input[aria-invalid="true"]{outline-color:#F0A6AE}
.book-form__actions .button{width:100%}
.book-form__privacy,.book-form__note{color:#8FA2C4}
.book-form__privacy a,.book-form__note a{color:#B9C7E0}
.form-status{color:#F5F8FF}
.form-status:not(:empty){border-color:var(--blue-lt);border-radius:var(--r)}
.form-status a{color:#fff}
.emergency{background:rgba(123,63,74,.18);border:1px solid rgba(200,120,130,.35);border-radius:var(--r);padding:.85rem 1rem;font-size:var(--t-sm);color:#F0D6DA;line-height:1.5;margin:0}
.emergency b{color:#fff}
.safe-check{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-sm);color:#C7D3E8;line-height:1.5;text-transform:none;letter-spacing:0;font-weight:400}
.safe-check input{margin-top:.25rem;width:18px;height:18px;flex:0 0 auto;accent-color:var(--blue)}

/* reveal on scroll for inner-page groups */
@media (prefers-reduced-motion:no-preference){
  [data-reveal="group"]>*{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
  [data-reveal="group"].in>*{opacity:1;transform:none}
  [data-reveal="group"].in>:nth-child(2){transition-delay:.07s}
  [data-reveal="group"].in>:nth-child(3){transition-delay:.14s}
  [data-reveal="group"].in>:nth-child(n+4){transition-delay:.21s}
}

/* breadcrumbs (was in the old components sheet) */
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.breadcrumbs a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline;text-underline-offset:.2em}
.breadcrumbs li+li::before{content:"/";margin-right:.5rem;opacity:.5}
.breadcrumbs [aria-current]{font-weight:600}
/* hero phone link on light heroes must not inherit the navy-band colour */
.page-hero:not(.page-hero--navy):not(.page-hero--deep) .page-hero__alt a{color:var(--navy)}
.section--navy .prose p,.section--navy .prose li{color:#C7D3E8}
.page-hero .page-hero__alt{color:var(--ink-2)}
.page-hero--navy .page-hero__alt,.page-hero--deep .page-hero__alt{color:#B9C7E0}