/* ==========================================================================
   Saliah Mokwena Attorneys Inc. Option A
   Built only from docs/DESIGN-option-a-v1.md. Every value below is in that file.
   Heraldic, type-led, no photography. Radius 0. One scarce gold accent.
   ========================================================================== */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
  /* Colour, DESIGN §3 */
  --dark:           #141210;
  --dark-elevated:  #1F1B16;
  --dark-hairline:  #2E2820;

  --ivory:          #FAF6EF;
  --ivory-soft:     #F2ECE1;
  --ivory-hairline: #E3D9C8;

  --gold:           #C2922E;
  --gold-bright:    #D9AE4C;
  --gold-deep:      #8A6519;

  --ink-on-dark:    #F7F3EC;
  --body-on-dark:   #B5AC9E;
  --ink-on-light:   #1A1713;
  --body-on-light:  #574E43;

  /* Spacing ladder, DESIGN §5. Base unit 4px. */
  --s1:  4px;
  --s2:  8px;
  --s3:  16px;
  --s4:  24px;
  --s5:  32px;
  --s6:  48px;
  --s7:  64px;
  --s8:  96px;
  --s9:  128px;

  --container: 1120px;
  --measure:   720px;
  --gutter:    24px;

  --section-y: 96px;
  --hero-y:    128px;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

@media (max-width: 767px) {
  :root {
    --gutter:    16px;
    --section-y: 56px;
    --hero-y:    72px;
  }
}

/* ---- 2. Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* overflow-x lives on the root, not on body. On body it makes body a scroll
     container and the sticky site header stops sticking. */
  overflow-x: hidden;
  /* So an in-page anchor does not land underneath the sticky header. */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--ivory);
  color: var(--body-on-light);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul { padding: 0; list-style: none; }

a { color: inherit; }

/* Radius 0 everywhere. The floating WhatsApp button is the one exception. */
button, input, select, textarea { border-radius: 0; font: inherit; color: inherit; }

/* Focus ring, DESIGN §7. Never removed. */
:focus-visible {
  outline: 2px solid var(--gold-deep);
  outline-offset: 2px;
}
.on-dark :focus-visible,
.topbar :focus-visible,
.sticky :focus-visible,
.wa-float:focus-visible {
  outline-color: var(--gold-bright);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--dark);
  padding: var(--s3) var(--s4);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* ---- 3. Type scale, DESIGN §4 ------------------------------------------- */
.hero-title {
  font-family: var(--serif);
  font-size: 76px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.05;
}
.display-lg {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.25px;
  line-height: 1.15;
}
.display-md {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}
.title {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.1px;
  line-height: 1.3;
}
.lead {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.45;
}
.body-sm {
  font-size: 15px;
  line-height: 1.6;
}
.micro {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  line-height: 1.4;
}
.numeral {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1;
  color: var(--gold);
}
.fine {
  font-size: 13px;
  line-height: 1.6;
}

/* Italic for emphasis inside a heading, never bold. DESIGN §4. */
.display-lg em, .display-md em, .hero-title em { font-style: italic; }

@media (max-width: 767px) {
  .hero-title { font-size: 42px; letter-spacing: -0.5px; }
  .display-lg { font-size: 32px; }
  .display-md { font-size: 26px; }
  .title      { font-size: 18px; }
  .lead       { font-size: 21px; }
  .numeral    { font-size: 40px; }
  body        { font-size: 16px; }
}

/* ---- 4. Bands and container --------------------------------------------- */
.band {
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.band--dark      { background: var(--dark);         color: var(--body-on-dark); }
.band--elevated  { background: var(--dark-elevated); color: var(--body-on-dark); }
.band--ivory     { background: var(--ivory);        color: var(--body-on-light); }
.band--soft      { background: var(--ivory-soft);   color: var(--body-on-light); }

.wrap {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.measure { max-width: var(--measure); }
.prose p + p { margin-top: var(--s4); }
.prose { max-width: 68ch; }

/* ---- 5. Section heading block ------------------------------------------- */
/* micro-label, the 40px gold accent rule, then the heading. DESIGN §6. */
.eyebrow { color: var(--gold-deep); }
.on-dark .eyebrow { color: var(--gold-bright); }

.rule40 {
  width: 40px;
  height: 2px;
  background: var(--gold);
  border: 0;
  margin: var(--s3) 0 var(--s5);
}

.head h2 { color: var(--ink-on-light); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: var(--ink-on-dark); }
.on-dark { color: var(--body-on-dark); }

/* ---- 6. Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 var(--s6);
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.9px;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
/* Gold fill always takes a dark label. White on gold measures 2.82:1. DESIGN §3. */
.btn--gold {
  background: var(--gold);
  color: var(--dark);
  border-color: var(--gold);
}
.btn--gold:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

.btn--ghost-dark {
  background: transparent;
  color: var(--ink-on-dark);
  border-color: var(--dark-hairline);
}
.btn--ghost-dark:hover { border-color: var(--gold); }

.btn--ghost-light {
  background: transparent;
  color: var(--ink-on-light);
  border-color: var(--ivory-hairline);
}
.btn--ghost-light:hover { border-color: var(--gold-deep); }

.btn--sm { min-height: 40px; padding: 0 var(--s4); }

/* ---- 7. Site header ----------------------------------------------------- */
/* Sticky on every page. Crest and name left, the page menu centre, the phone
   number and the WhatsApp button right. Under 800px the three menu links wrap
   onto their own row beneath the brand. No toggle, so nothing can be hidden
   with no way of reaching it, and nothing depends on hover. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--dark);
  border-bottom: 1px solid var(--dark-hairline);
}
.topbar__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--s5);
  row-gap: 0;
  min-height: 72px;
  padding-top: var(--s2);
  padding-bottom: var(--s2);
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--ink-on-dark);
}
.topbar__crest { width: 34px; height: auto; }
.topbar__name { display: block; transition: color 150ms ease; }
.topbar__brand:hover .topbar__name { color: var(--gold-bright); }

.topbar__nav {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
  gap: var(--s6);
}
.topbar__nav a {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--body-on-dark);
  white-space: nowrap;
  padding: var(--s3) 0;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.topbar__nav a:hover { color: var(--ink-on-dark); }
.topbar__nav a[aria-current="page"] {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex: 0 0 auto;
  margin-left: auto;
}
.topbar__tel {
  color: var(--ink-on-dark);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
}
.topbar__tel:hover { color: var(--gold-bright); }

@media (max-width: 800px) {
  .topbar__in { column-gap: var(--s3); padding-bottom: 0; }
  .topbar__brand { flex: 1 1 auto; min-height: 56px; }
  .topbar__actions { margin-left: 0; gap: var(--s3); }
  .topbar__tel { font-size: 14px; }
  .topbar__crest { width: 30px; }
  .topbar__nav {
    order: 3;
    flex: 1 0 100%;
    justify-content: flex-start;
    gap: var(--s5);
    border-top: 1px solid var(--dark-hairline);
  }
  .topbar__nav a { padding: var(--s2) 0 10px; }
}

@media (max-width: 460px) {
  /* The number is still one tap away on the fixed bar at the foot of the screen. */
  .topbar__tel { display: none; }
  .topbar__actions .btn--sm { padding: 0 var(--s3); }
}

/* ---- 8. Hero ------------------------------------------------------------ */
.hero {
  background: var(--dark);
  color: var(--body-on-dark);
  padding-top: var(--hero-y);
  padding-bottom: var(--hero-y);
  text-align: center;
}
.hero__logo {
  width: 194px;
  height: auto;
  margin: 0 auto var(--s7);
}
.hero__title {
  color: var(--ink-on-dark);
  max-width: 640px;
  margin: 0 auto;
}
.hero__lead {
  max-width: 740px;
  margin: var(--s6) auto 0;
  color: var(--body-on-dark);
}
.hero__lead strong { color: var(--ink-on-dark); font-weight: 600; }
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3);
  margin-top: var(--s7);
}
.hero__addr {
  margin-top: var(--s7);
  color: var(--body-on-dark);
}

@media (max-width: 767px) {
  .hero__logo { width: 150px; margin-bottom: var(--s6); }
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
}

/* ---- 9. Credential bar -------------------------------------------------- */
.creds {
  background: var(--dark-elevated);
  padding-top: var(--s6);
  padding-bottom: var(--s6);
}
.creds__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.creds__item { padding-right: var(--s4); }
.creds__item + .creds__item {
  border-left: 1px solid var(--dark-hairline);
  padding-left: var(--s4);
}
.creds__label { color: var(--gold-bright); }
.creds__value {
  margin-top: var(--s2);
  color: var(--ink-on-dark);
  /* The original build sets the credential values at the lead token's smaller
     step so all four sit on one line across the bar. */
  font-size: 21px;
}

@media (max-width: 767px) {
  .creds__grid { grid-template-columns: 1fr; }
  .creds__item { padding-right: 0; }
  .creds__item + .creds__item {
    border-left: 0;
    padding-left: 0;
    margin-top: var(--s4);
  }
}

/* ---- 10. Urgent block: the full-height gold rule ------------------------ */
.urgent {
  border-left: 2px solid var(--gold);
  padding-left: var(--s5);
  max-width: var(--measure);
}
.urgent h2 { margin-top: var(--s4); color: var(--ink-on-light); }
.urgent .prose { margin-top: var(--s5); }
.urgent .btn { margin-top: var(--s6); }

/* ---- 11. Practice areas ------------------------------------------------- */
.sched {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  margin-top: var(--s8);
  align-items: start;
}
.sched__head {
  display: flex;
  align-items: baseline;
  gap: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--ivory-hairline);
}
.sched__head h3 { color: var(--ink-on-light); }
.sched__item {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--ivory-hairline);
}
.sched__item:last-child { border-bottom: 0; }
.sched__item p:first-child { color: var(--ink-on-light); }
.sched__item p + p { margin-top: var(--s1); color: var(--body-on-light); }

.more {
  margin-top: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--ivory-hairline);
}

@media (max-width: 767px) {
  .sched { grid-template-columns: 1fr; gap: var(--s6); margin-top: var(--s6); }
}

/* ---- 12. Three steps ---------------------------------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  margin-top: var(--s8);
  align-items: start;
}
.steps__n { display: block; }
.steps h3 {
  margin-top: var(--s3);
  color: var(--ink-on-light);
}
.steps p { margin-top: var(--s2); }

@media (max-width: 767px) {
  .steps { grid-template-columns: 1fr; gap: var(--s6); margin-top: var(--s6); }
}

/* ---- 13. Courts and map ------------------------------------------------- */
.courts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s7);
  margin-top: var(--s8);
  align-items: start;
}
.courts__item {
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--ivory-hairline);
}
.courts__item:first-child { padding-top: 0; }
.courts__item:last-child { border-bottom: 0; }
.courts__item p:first-child { color: var(--ink-on-light); }
.courts__item p + p { margin-top: var(--s1); }

.map {
  border: 1px solid var(--ivory-hairline);
  background: var(--ivory-soft);
}
.map iframe {
  width: 100%;
  height: 380px;
  border: 0;
}
.map-link { margin-top: var(--s3); display: inline-flex; }

@media (max-width: 767px) {
  .courts { grid-template-columns: 1fr; gap: var(--s6); margin-top: var(--s6); }
  .map iframe { height: 280px; }
}

/* ---- 14. Enquiry form --------------------------------------------------- */
.form { max-width: var(--measure); margin-top: var(--s8); }
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s4);
}
.field { margin-bottom: var(--s5); }
.field label {
  display: block;
  margin-bottom: var(--s2);
  color: var(--gold-deep);
}
.field input,
.field select,
.field textarea {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: var(--s2) var(--s3);
  background: var(--ivory-soft);
  border: 1px solid var(--ivory-hairline);
  color: var(--ink-on-light);
  font-size: 17px;
  transition: border-color 150ms ease;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--gold-deep); }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  margin-bottom: var(--s6);
}
.consent input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--gold-deep);
}
.consent label { display: block; }
.consent a { color: var(--gold-deep); }

.form__note { margin-top: var(--s4); color: var(--body-on-light); }

@media (max-width: 767px) {
  .form { margin-top: var(--s6); }
  .form__row { grid-template-columns: 1fr; gap: 0; }
}

/* ---- 15. Privacy notice ------------------------------------------------- */
.annexure {
  margin-top: var(--s9);
  padding-top: var(--section-y);
  border-top: 1px solid var(--ivory-hairline);
}
.annexure dl { margin-top: var(--s6); max-width: var(--measure); }
.annexure dt { color: var(--gold-deep); margin-top: var(--s5); }
.annexure dt:first-of-type { margin-top: 0; }
.annexure dd { margin: var(--s2) 0 0; }

@media (max-width: 767px) {
  .annexure { margin-top: var(--s7); }
}

/* ---- 16. Footer --------------------------------------------------------- */
.foot {
  background: var(--dark);
  color: var(--body-on-dark);
  padding-top: var(--section-y);
  padding-bottom: var(--section-y);
}
.foot__logo { width: 180px; height: auto; }
.foot__tagline {
  margin-top: var(--s5);
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--gold);
}
.foot__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s7);
  margin-top: var(--s8);
}
.foot__grid h2 { color: var(--gold-bright); }
.foot__grid p, .foot__grid ul { margin-top: var(--s4); }
.foot__grid strong { color: var(--ink-on-dark); font-weight: 600; }
.foot__grid a { color: var(--body-on-dark); text-decoration: underline; text-underline-offset: 3px; }
.foot__grid a:hover { color: var(--gold-bright); }
.foot__grid li + li { margin-top: var(--s2); }

.foot__base {
  margin-top: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--dark-hairline);
}
.foot__base p + p { margin-top: var(--s3); }
.foot__base a { color: var(--gold-bright); }

@media (max-width: 767px) {
  .foot__logo { width: 150px; }
  .foot__grid { grid-template-columns: 1fr; gap: var(--s6); margin-top: var(--s7); }
}

/* ---- 17. WhatsApp float and the sticky call bar ------------------------- */
/* The circle is the one exception to radius 0. DESIGN §6. */
.wa-float {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 40;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--dark);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease;
}
.wa-float:hover { background: var(--gold-bright); }
.wa-float svg { width: 28px; height: 28px; }

.sticky { display: none; }

@media (max-width: 767px) {
  .wa-float { display: none; }
  .sticky {
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: var(--dark);
    box-shadow: 0 -1px 0 var(--dark-hairline);
    animation: bar-in 300ms ease both;
  }
  .sticky a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 56px;
    text-decoration: none;
    font-family: var(--sans);
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--ink-on-dark);
  }
  .sticky a + a { background: var(--gold); color: var(--dark); }
  .sticky svg { width: 18px; height: 18px; }
  body { padding-bottom: 56px; }
}

@keyframes bar-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- 18. Page 2: the schedule ------------------------------------------- */
.page-head { padding-top: var(--s7); padding-bottom: var(--s7); }
.page-head .back { text-decoration: none; }
.page-head .back:hover { color: var(--gold-bright); }

.matter { max-width: var(--measure); }
.matter + .matter {
  margin-top: var(--s8);
  padding-top: var(--s7);
  border-top: 1px solid var(--ivory-hairline);
}
.on-dark .matter + .matter { border-top-color: var(--dark-hairline); }
.matter__intro { margin-top: var(--s5); }

.rows { margin-top: var(--s6); }
.rows__row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--ivory-hairline);
}
.on-dark .rows__row { border-bottom-color: var(--dark-hairline); }
.rows__row:last-child { border-bottom: 0; }
.rows__n {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gold-deep);
}
.on-dark .rows__n { color: var(--gold-bright); }
.rows__t { color: var(--ink-on-light); }
.on-dark .rows__t { color: var(--ink-on-dark); }
.rows__d { margin-top: var(--s1); }

.cols2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--s7);
}

@media (max-width: 767px) {
  .rows__row { grid-template-columns: 40px 1fr; gap: var(--s3); }
  .cols2 { grid-template-columns: 1fr; }
}

/* ---- 19. The one licensed plate ----------------------------------------- */
.plate { margin-top: var(--s7); max-width: var(--measure); }
.plate img { width: 100%; border: 1px solid var(--ivory-hairline); }
.on-dark .plate img { border-color: var(--dark-hairline); }
.plate figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s2) var(--s4);
  margin-top: var(--s3);
  font-size: 13px;
  line-height: 1.6;
  color: var(--body-on-light);
}
.on-dark .plate figcaption { color: var(--body-on-dark); }
.plate a { color: var(--gold-deep); }
.on-dark .plate a { color: var(--gold-bright); }

/* ---- 20. Page 3: about -------------------------------------------------- */
/* Four steps rather than three. Same tokens, same numeral, one more column. */
.steps--four { grid-template-columns: repeat(4, 1fr); gap: var(--s6); }
.on-dark .steps h3 { color: var(--ink-on-dark); }

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

/* The director block: portrait slot beside the biography. */
.bio {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: var(--s7);
  margin-top: var(--s8);
  align-items: start;
}
.bio__name { color: var(--ink-on-dark); }
.bio__role { margin-top: var(--s3); color: var(--gold-bright); }
.bio__creds { margin-top: var(--s2); color: var(--body-on-dark); }
.bio .prose { margin-top: var(--s5); }

/* The portrait slot. Empty on purpose until the client sends her photograph.
   A ruled frame with a caption, never a silhouette and never a stand-in image. */
.portrait { margin: 0; }
.portrait__slot {
  position: relative;
  aspect-ratio: 4 / 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s6);
  background: var(--dark-elevated);
  border: 1px solid var(--dark-hairline);
}
.portrait__slot::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--dark-hairline);
  pointer-events: none;
}
.portrait__label { color: var(--gold-bright); }
.portrait__rule { margin: var(--s4) auto; }
.portrait__note { color: var(--body-on-dark); max-width: 24ch; }
.portrait figcaption {
  margin-top: var(--s3);
  font-size: 13px;
  line-height: 1.6;
  color: var(--body-on-dark);
}

/* Office details, three plain columns. */
.office {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s6);
  margin-top: var(--s7);
}
.office__item p { margin-top: var(--s3); color: var(--ink-on-light); }
.office__item a { color: var(--ink-on-light); text-decoration: underline; text-underline-offset: 3px; }
.office__item a:hover { color: var(--gold-deep); }

/* A two-column row list with an even number of items: both columns end level,
   so the final row in each carries no rule. */
.rows--even .rows__row:nth-last-child(-n+2) { border-bottom: 0; }
@media (max-width: 767px) {
  .rows--even .rows__row:nth-last-child(2) { border-bottom: 1px solid var(--ivory-hairline); }
}

.closing { max-width: var(--measure); }
.closing__tag {
  margin-top: var(--s4);
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  color: var(--gold-bright);
}
.closing__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s7);
}

@media (max-width: 767px) {
  .bio { grid-template-columns: 1fr; gap: var(--s6); margin-top: var(--s6); }
  .portrait__slot { aspect-ratio: 3 / 2; }
  .office { grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s6); }
  .closing__cta { flex-direction: column; align-items: stretch; }
  .closing__cta .btn { width: 100%; }
}

/* ---- 21. Motion, DESIGN §7 ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------------
   Note. A single bordered aside, used where a page has to stop the reader:
   the password warning on the email guide, and the "nothing was sent" panel
   the enquiry form shows a person who left a field empty.
--------------------------------------------------------------------------- */
.note {
  max-width: var(--measure);
  margin-top: var(--s6);
  padding: var(--s5);
  background: #FFFFFF;
  border: 1px solid var(--ivory-hairline);
  border-left: 3px solid var(--gold-deep);
}
.note p + p { margin-top: var(--s3); }
.note strong { color: var(--ink-on-light); font-weight: 600; }
.on-dark .note {
  background: var(--dark-elevated);
  border-color: var(--dark-hairline);
  border-left-color: var(--gold);
}
.on-dark .note strong { color: var(--ink-on-dark); }

/* A plain list inside a note, for the fields a person still has to fill in. */
.note ul { margin: var(--s3) 0 0; padding-left: var(--s4); }
.note li + li { margin-top: var(--s2); }

/* The settings table on the email guide: label left, value right, on one
   hairline grid. Falls to a single column on a phone. */
.spec { margin-top: var(--s6); max-width: var(--measure); }
.spec__row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: var(--s4);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--ivory-hairline);
}
.spec__row:first-child { border-top: 1px solid var(--ivory-hairline); }
.spec__k { color: var(--gold-deep); }
.spec__v { color: var(--ink-on-light); word-break: break-word; }
.spec__v span { display: block; color: var(--body-on-light); margin-top: var(--s1); }
@media (max-width: 767px) {
  .spec__row { grid-template-columns: 1fr; gap: var(--s1); }
}

/* Left-aligned pair of buttons. The hero's own row is centred, so pages that
   set their heading flush left need their own. */
.cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* ---------------------------------------------------------------------------
   The custody window. Ported from the retired Option B build, redrawn in this
   design's own language. It states a real legal deadline, so two rules hold:
   sections 59 and 59A are drawn as a SPAN across the whole window, because
   those bail routes are available at any point before the first appearance and
   not at a fixed hour; and the NOW marker appears only when someone supplies a
   real arrest time. A decorative marker on a deadline would be a lie.
--------------------------------------------------------------------------- */
.scale { margin-top: var(--s7); max-width: var(--measure); }
.scale__cap { color: var(--gold-deep); margin-bottom: var(--s6); }

.scale__track {
  position: relative;
  height: 2px;
  background: var(--ivory-hairline);
  margin: var(--s8) 0 var(--s7);
}
.scale__fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0; background: var(--gold);
  transition: width 900ms cubic-bezier(.2,.7,.2,1);
}
.scale.is-drawn .scale__fill { width: 100%; }

.scale__tick {
  position: absolute; top: -4px; width: 1px; height: 10px;
  background: var(--ivory-hairline);
}
.scale__tick--maj { top: -7px; height: 16px; background: #C9BCA6; }

/* The bail span. Sits under the line, full width, because it applies throughout. */
.scale__span {
  position: absolute; top: var(--s4);
  border-top: 1px dashed #C9BCA6;
  padding-top: var(--s2);
}
.scale__span b {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: .04em; color: var(--body-on-light);
}

.scale__mark { position: absolute; bottom: var(--s4); }
.scale__mark--l { left: 0; text-align: left; }
.scale__mark--r { right: 0; text-align: right; }
.scale__mark b {
  /* Deliberately the sans, not the display serif. Cormorant sets figures
     old-style, which renders "00h" as something close to "ooh". On a panel
     stating a legal deadline that is not a trade worth making. */
  display: block; font-family: var(--sans); font-size: 22px;
  font-weight: 700; line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink-on-light);
}
.scale__mark span {
  display: block; margin-top: var(--s1);
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--body-on-light);
}

/* Hidden until a real arrest time is entered. */
.scale__now {
  position: absolute; top: -13px; bottom: -13px; width: 2px;
  background: var(--gold-deep); opacity: 0;
  transition: left 300ms ease, opacity 200ms ease;
}
.scale__now::after {
  content: ""; position: absolute; left: 50%; top: -5px;
  width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: var(--gold-deep);
}
.scale.has-now .scale__now { opacity: 1; }

/* clears the bail-span caption, which is absolutely positioned under the
   track and so does not push the flow along itself. */
.clock { margin-top: var(--s8); }
.clock label {
  display: block; margin-bottom: var(--s2);
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep);
}
.clock input {
  font-family: var(--sans); font-size: 16px;
  padding: 12px var(--s3); min-height: 48px;
  background: #FFFFFF; color: var(--ink-on-light);
  border: 1px solid var(--ivory-hairline); border-radius: 0;
  max-width: 260px; width: 100%;
}
.clock input:hover, .clock input:focus-visible { border-color: var(--gold-deep); }
.clock__out { margin-top: var(--s3); min-height: 1.5em; }
.clock__out b { color: var(--ink-on-light); font-weight: 600; }

.scale__sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (max-width: 767px) {
  .scale__track { margin: var(--s8) 0 var(--s9); }
  .scale__mark b { font-size: 21px; }
  .scale__mark--r { max-width: 46%; }
  .scale__mark--l { max-width: 40%; }
  .scale__span { top: var(--s3); }
  .scale__span b { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .scale__fill { transition: none; }
}