/* ============================================================
   v6 — light editorial (Saya & Associates)
   ------------------------------------------------------------
   An override layer on v5.css, not a replacement. v5 supplies the
   structure (hero-split, bento, pin, steps, matters, ftr); this
   supplies the palette, the type roles and the motion.

   Loaded AFTER v5.css, so it wins on equal specificity.
   Remove the one <link> to go back to dark.

   WHY LIGHT
   22 of the 23 pages are already light. One dark page inside a light
   site reads as a copy-paste accident, and near-black-with-one-bright-
   accent is a documented generated-page signature. The client's stated
   reference is apple.com.

   WHY A SERIF DISPLAY
   The light system it replaces set everything in IBM Plex Sans. A serif
   display over a sans body is the pairing that suits an advocacy
   practice, and EB Garamond is already subset and loaded.

   CONTRAST (computed, not estimated)
     ink #131A24 on #FFFFFF ....... 17.49:1
     ink #131A24 on #F4F4F6 ....... 15.92:1
     grey #5B6470 on #FFFFFF ...... 6.00:1
     bronze #7A5C33 on #FFFFFF .... 6.17:1
     bronze #7A5C33 on #F4F4F6 .... 5.61:1   <- tightest, AA needs 4.5
     white on navy #0A2540 ........ 15.54:1
   ============================================================ */

:root {
  /* ---- ground: cool off-white, not warm cream ---------------------- */
  --paper:    #FFFFFF;
  --paper-2:  #F4F4F6;
  --paper-3:  #EBEBEF;

  /* ---- ink: navy-tinted near-black, never #000 or #111 ------------- */
  --ink:      #131A24;
  --ink-2:    #2C3642;
  --grey:     #5B6470;
  --grey-2:   #7C858F;

  /* ---- one accent. no gradient, no second colour ------------------- */
  --bronze:   #7A5C33;
  --bronze-2: #9A7844;
  --navy:     #0A2540;
  --navy-2:   #133A5E;

  --line:     #DFDFE5;
  --line-2:   #C8C8D0;

  /* shadows carry the navy hue, one light source, from above */
  --shadow-navy:    0 18px 40px rgba(10,37,64,.10), 0 4px 12px rgba(10,37,64,.06);
  --shadow-navy-sm: 0 8px 22px rgba(10,37,64,.08);

  /* motion: a real ease-out. entering and exiting both use it.
     v5's --ease-luxe starts slow, which on a button reads as lag. */
  --ease-out:   cubic-bezier(0.23, 1, 0.32, 1);
  --ease-luxe:  cubic-bezier(0.23, 1, 0.32, 1);

  --focus-ring:    0 0 0 2px var(--paper), 0 0 0 5px var(--bronze);
  --focus-outline: 2px solid var(--bronze);
}

/* ---------- ground ------------------------------------------------- */
body {
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.65;
}

/* The grain stays — flat vector surfaces read as sterile — but a noise
   field tuned for a near-black ground shows as dirt on white. */
body::after { opacity: .022; }

::selection { background: var(--navy); color: #fff; }

/* ---------- type --------------------------------------------------- */
.d1, .d2, .d3 { color: var(--ink); }

/* The gradient-filled italic phrase inside a headline is one of the
   clearest generated-page tells. The headline is one colour, one style. */
.d1 em {
  font-style: normal;
  background: none;
  -webkit-background-clip: border-box; background-clip: border-box;
  -webkit-text-fill-color: var(--ink); color: var(--ink);
}

/* The tracked-out ALL-CAPS mono eyebrow is the second. It becomes a
   plain subject line in the accent, set in the body face. */
.eyebrow {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bronze);
  margin-bottom: 14px;
}

.lede { color: var(--grey); font-size: 19px; }
.body { color: var(--grey); }
.cite, .note { color: var(--grey); }
.note { background: var(--paper-2); border: 0; }

/* ---------- buttons ------------------------------------------------ */
/* v5 set every button, the header CTA and the step labels in tracked-out
   uppercase mono. That is the same ALL-CAPS device as the eyebrow, and on
   a button it costs legibility as well: capitals remove the word shapes
   readers match on. Sentence case, in the body face. */
.btn {
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  padding: 14px 26px;
  transition:
    transform .16s var(--ease-out),
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease;
}
.btn:focus-visible { outline: var(--focus-outline); outline-offset: 3px; }
.btn:active, .btn.is-pressed { transform: scale(0.98); }

.btn-solid {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  box-shadow: var(--shadow-navy-sm);
}
.btn-line {
  background: transparent;
  color: var(--navy);
  border-color: var(--line-2);
}

/* Hover lift is gated: a tap on a touch screen fires a false hover and
   would leave the control stuck in its raised state. */
@media (hover: hover) and (pointer: fine) {
  .btn-solid:hover {
    background: var(--navy-2); border-color: var(--navy-2);
    transform: translateY(-1px);
    box-shadow: var(--shadow-navy);
  }
  .btn-line:hover {
    background: var(--paper-2);
    color: var(--navy);
    border-color: var(--navy);
    transform: translateY(-1px);
    box-shadow: none;
  }
}

/* ---------- header ------------------------------------------------- */
.hdr {
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--line);
  transition: transform .25s var(--ease-out);
}
.mark b { color: var(--ink); }
.nav a { color: var(--ink-2); }
.nav a:hover, .nav a.is-active { color: var(--ink); }

/* width animates layout on every hover; scaleX is composited */
.nav a::after {
  width: 100%;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s var(--ease-out);
}
.nav a:hover::after, .nav a.is-active::after { width: 100%; transform: scaleX(1); }

.hdr .cta {
  font-family: var(--sans);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
  padding: 10px 20px;
  box-shadow: none;
}
.hdr .cta:hover { background: var(--navy-2); }
.burger i { background: var(--ink); }

/* ---------- hero --------------------------------------------------- */
/* the two accent washes behind the hero were the dark design's depth */
.hero-bg::before, .hero-bg::after { display: none; }
.hero-frame { border-color: var(--line); background: var(--paper-2); }
.hero-frame-inner { border-color: var(--line); }

/* One orchestrated entrance, in CSS, so GSAP is not loaded for it.
   Reduced motion turns it off below. */
.js .hero-copy > *,
.js .hero-visual {
  opacity: 0;
  transform: translateY(14px);
  animation: heroIn .55s var(--ease-out) forwards;
}
.js .hero-copy > *:nth-child(1) { animation-delay: .04s; }
.js .hero-copy > *:nth-child(2) { animation-delay: .10s; }
.js .hero-copy > *:nth-child(3) { animation-delay: .16s; }
.js .hero-copy > *:nth-child(4) { animation-delay: .22s; }
.js .hero-visual               { animation-delay: .16s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* ---------- sections ----------------------------------------------- */
.sec-grey { background: var(--paper-2); border-top: 0; border-bottom: 0; }
.sec-navy { background: var(--navy); }
.on-dark .d1, .on-dark .d2, .on-dark .d3 { color: #fff; }
.on-dark .lede, .on-dark .body { color: rgba(255,255,255,.78); }
.on-dark .eyebrow { color: rgba(255,255,255,.72); }
.sec-navy .btn-solid { background: #fff; color: var(--navy); border-color: #fff; }
.sec-navy .btn-line { color: #fff; border-color: rgba(255,255,255,.45); }
@media (hover: hover) and (pointer: fine) {
  .sec-navy .btn-solid:hover { background: #E8E8ED; border-color: #E8E8ED; }
  .sec-navy .btn-line:hover { background: #fff; color: var(--navy); border-color: #fff; }
}

/* ---------- cards -------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 2px;
  transition: transform .2s var(--ease-out), border-color .2s ease, box-shadow .2s ease;
}
.sec-grey .card { background: var(--paper); }
.card .d3 { color: var(--ink); }
.card p { color: var(--grey); }

/* the gold rule and the gold radial glow were the dark design's accents */
.card::before {
  width: 100%;
  background: var(--bronze);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease-out);
}
.card::after { display: none; }

@media (hover: hover) and (pointer: fine) {
  .card:hover {
    transform: translateY(-3px);
    border-color: var(--line-2);
    box-shadow: var(--shadow-navy);
  }
  .card:hover::before { width: 100%; transform: scaleX(1); }
}

.card-shell { background: var(--paper-2); border-color: var(--line); }

/* ---------- steps -------------------------------------------------- */
.step::before { background: var(--line); }
.step-label {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bronze);
}
.steps { border-color: var(--line); }

/* ---------- pinned media ------------------------------------------- */
.pin-media { background: var(--paper-2); border-color: var(--line); }
.pin-media::before { display: none; }

/* ---------- matters ------------------------------------------------ */
.matters, .matter { border-color: var(--line); }
.matter p { color: var(--grey); }

/* ---------- reveal -------------------------------------------------- */
/* 800ms and 28px on every section is the generated-page motion
   signature. Shorter, shallower, and on a real ease-out. */
.js .rv { transform: translateY(12px); }
.js .rv.in {
  transition: opacity .45s ease, transform .45s var(--ease-out);
}

/* ---------- footer -------------------------------------------------- */
.ftr {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
  color: var(--grey);
}
.ftr h5 {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.ftr p { color: var(--grey); }
.ftr ul a { color: var(--grey); }
.ftr ul a:hover, .ftr ul a.is-active { color: var(--ink); }
.ftr-bot { border-color: var(--line); }
.ftr-bot a, .ftr-bot span { color: var(--grey-2); }
.ftr-bot a:hover { color: var(--ink); }
.disclaimer { color: var(--grey-2); }
/* the footer logo is the dark-ground variant; invert it for light */
.ftr-logo img { filter: none; opacity: 1; }

/* ---------- mobile nav ---------------------------------------------- */
.nav.open {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-navy);
}

/* ---------- skip link ------------------------------------------------ */
.skip:focus { background: var(--navy); color: #fff; }

/* ---------- reduced motion ------------------------------------------- */
/* Fewer and gentler, not zero: colour and opacity still respond, so
   hover and focus keep telling you what is interactive. Only movement
   goes. v5 killed every transition site-wide, feedback included. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .js .hero-copy > *, .js .hero-visual { opacity: 1; transform: none; }
  .js .rv, .js .rv.in { opacity: 1 !important; transform: none !important; }
  .btn, .card, .hdr { transition: background .2s ease, color .2s ease, border-color .2s ease !important; }
  .btn:hover, .btn-solid:hover, .btn-line:hover, .card:hover { transform: none; }
  .nav a::after, .card::before { transition: none; }
}

/* ============================================================
   INNER PAGES
   ------------------------------------------------------------
   The 22 pages beyond the homepage were built on the older markup
   and wore a compatibility shim. They now use this system directly.
   Their headings are bare h1/h2/h3 rather than .d1/.d2/.d3, so the
   display face is applied by element inside a page section — the
   markup stays semantic and nothing needs a class added.
   ============================================================ */

/* ---------- page hero: text only, no full-bleed photograph -------- */
.hero.hero-page {
  min-height: 0;
  padding: clamp(72px, 11vh, 132px) 0 clamp(40px, 6vh, 72px);
  display: block;
}
.hero-page .wrap { max-width: 1180px; }

/* At 1440 the headline occupied the left 40% and the rest of the row was
   empty — whitespace by accident rather than by decision. The headline and
   its lede now sit as two columns, echoing the homepage's split hero, with
   the lede dropped to sit on the headline's last line rather than its first. */
@media (min-width: 900px) {
  .hero-page .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    column-gap: clamp(40px, 6vw, 96px);
    align-items: end;
  }
  .hero-page .eyebrow { grid-column: 1 / -1; }
  .hero-page h1 { grid-column: 1; margin: 0; }
  .hero-page .lede { grid-column: 2; margin: 0 0 10px; }
}

.hero-page h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.6vw, 74px);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 15ch;
  text-wrap: balance;
}
.hero-page .lede { margin-top: 26px; max-width: 46ch; }

/* leftovers from the photographic hero; the markup is gone but a
   stray one on an unmigrated page must not reappear */
.ph-photo, .ph-art, .p-art { display: none; }

/* ---------- headings inside content sections ---------------------- */
.sec h2, .cta-band h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.14;
  letter-spacing: -0.01em;
  color: var(--ink);
  max-width: 22ch;
  text-wrap: balance;
}
.sec h3, .card h3, .step h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: balance;
}
.sec p { color: var(--grey); max-width: 68ch; }
.sec .lede { max-width: 62ch; }

/* ---------- split: copy beside a list ----------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- closing band ------------------------------------------ */
/* v2 drew this as a rounded navy island floating in the section. A
   full-bleed band of the same navy as the homepage CTA reads as one
   site rather than a component borrowed from another one. */
.cta-band {
  background: var(--navy);
  color: #fff;
  border: 0;
  border-radius: 2px;
  padding: clamp(40px, 6vh, 72px) clamp(28px, 4vw, 64px);
}
.cta-band h2 { color: #fff; max-width: 20ch; }
.cta-band .eyebrow { color: rgba(255,255,255,.72); }
.cta-band p, .cta-band .lede { color: rgba(255,255,255,.78); }
.cta-band .btn-solid { background: #fff; color: var(--navy); border-color: #fff; }
.cta-band .btn-line { color: #fff; border-color: rgba(255,255,255,.45); }
@media (hover: hover) and (pointer: fine) {
  .cta-band .btn-solid:hover { background: #E8E8ED; border-color: #E8E8ED; }
  .cta-band .btn-line:hover { background: #fff; color: var(--navy); border-color: #fff; }
}

/* ---------- long-form articles ------------------------------------ */
/* Roughly 68 characters a line, which is where sustained reading sits. */
.prose {
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 40px);
  color: var(--ink-2);
}
.prose h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(25px, 2.6vw, 33px);
  line-height: 1.2;
  color: var(--ink);
  margin: 44px 0 14px;
  max-width: none;
}
.prose h3 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  margin: 30px 0 8px;
}
.prose p, .prose li { font-size: 17.5px; line-height: 1.72; color: var(--ink-2); max-width: none; }
.prose ul, .prose ol { margin: 14px 0 14px 22px; }
.prose li { margin-bottom: 8px; list-style: disc; }
.prose a {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-2);
  transition: text-decoration-color .16s ease;
}
.prose a:hover { text-decoration-color: var(--navy); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose blockquote {
  margin: 26px 0;
  padding-left: 22px;
  border-left: 2px solid var(--bronze);
  color: var(--ink-2);
}

/* ---------- article and list metadata ----------------------------- */
/* Dates and reading times are data: tabular figures stop the columns
   shifting as the digits change. */
.meta, .art-meta {
  font-family: var(--sans);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grey-2);
}
.idx {
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--bronze);
}
.link-u {
  color: var(--navy);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-2);
  transition: text-decoration-color .16s ease;
}
.link-u:hover { text-decoration-color: var(--navy); }
.go { color: var(--navy); font-weight: 500; font-size: 15px; }

.g-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

/* ---------- people ------------------------------------------------- */
.adv {
  border-top: 1px solid var(--line);
  padding-top: clamp(34px, 5vh, 60px);
  margin-top: clamp(34px, 5vh, 60px);
}
.adv-portrait img { border: 0; border-radius: 2px; }
.adv-portrait::after { display: none; }
.adv-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.adv-role { color: var(--bronze); font-size: 16px; margin-top: 6px; }
.adv-enrol { color: var(--grey-2); font-size: 14px; }
.adv-lede { color: var(--ink-2); font-size: 18.5px; line-height: 1.6; max-width: 62ch; }
.adv-body { color: var(--grey); max-width: 68ch; }
.adv-appt {
  border-left: 2px solid var(--bronze);
  padding-left: 18px;
  color: var(--ink-2);
}
.adv-block h4 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bronze);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.adv-list li { color: var(--grey); margin-bottom: 8px; }
.adv-list li b { color: var(--ink); font-weight: 600; }
/* square-cornered tags, not pills */
.adv-tags span {
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--ink-2);
  font-size: 14px;
  padding: 5px 11px;
}
.adv-contact a { color: var(--navy); }

.appts { border-top: 1px solid var(--line); }
.appt { border-top: 1px solid var(--line); }
.appt h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); }
.appt p { color: var(--grey); }

/* ---------- notes --------------------------------------------------- */
.note {
  background: var(--paper-2);
  border: 0;
  border-left: 2px solid var(--bronze);
  border-radius: 2px;
  padding: 18px 22px;
  color: var(--grey);
  font-size: 15.5px;
}

/* ============================================================
   TOUCH TARGETS
   ------------------------------------------------------------
   Measured at 390px: the brand mark sat at 40px, the burger 37,
   footer list links 19, the legal row 22, and the contact numbers
   27 — against a 44px minimum. Every one of those is a standalone
   link on its own line, so a real hit area costs nothing.

   Links inside a sentence are deliberately excluded: WCAG's
   minimum-target rule exempts inline text links, and padding them
   out would wreck the line rhythm of the long-form pages.
   ============================================================ */
.mark,
.nav a,
.ftr ul a,
.ftr-bot a,
.adv-contact a,
.sec p > a,
.hero p > a,
a.link-u {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
/* sized, but never given a `display` — v5 hides it above 720px and setting
   display here would override that and show it on desktop */
.burger { min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
.ftr ul li { margin-bottom: 0; }

/* long-form prose keeps inline links inline */
.prose p > a, .prose li > a, .disclaimer a, .cta-band p > a {
  display: inline;
  min-height: 0;
}

/* ============================================================
   THE DIRECT ANSWER
   ------------------------------------------------------------
   A reader who arrives on a legal analysis usually arrived with
   one question. This answers it before the argument starts,
   which is also the shape an assistant needs: a retrievable
   chunk that stands on its own without the surrounding page.

   Set slightly larger than the body and marked with the accent
   rule the notes already use, so it reads as the author's own
   summary rather than a widget bolted to the top.
   ============================================================ */
.answer {
  max-width: 68ch;
  margin: clamp(26px, 4vh, 40px) auto 0;
  padding: 0 clamp(20px, 5vw, 40px);
}
.answer h2 {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bronze);
  margin-bottom: 10px;
  max-width: none;
}
.answer p {
  font-size: 18.5px;
  line-height: 1.62;
  color: var(--ink-2);
  border-left: 2px solid var(--bronze);
  padding-left: 22px;
  max-width: none;
}
.answer strong { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) {
  .answer p { font-size: 17px; padding-left: 16px; }
}

/* Available to a screen reader and to a parser, not painted.
   Used where a section is visually obvious but structurally unlabelled,
   which is what made three pages jump from h1 straight to h3. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* the advocate sub-headings, now h3 rather than h4 */
.adv-block h3.adv-sub {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bronze);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

/* ============================================================
   CONSENT BANNER
   ------------------------------------------------------------
   Only ever rendered when a GA4 Measurement ID is configured.

   Accept and Decline are the same size and weight on purpose.
   Making Decline quieter is the standard dark pattern, and both
   the DPDP Act and the GDPR treat consent obtained that way as
   no consent at all — so the pattern buys nothing and costs the
   validity of every acceptance beside it.
   ============================================================ */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  background: var(--paper);
  border-top: 1px solid var(--line);
  box-shadow: 0 -14px 40px rgba(10,37,64,.10);
  animation: consentIn .32s var(--ease-out) both;
}
@keyframes consentIn { from { transform: translateY(100%); } to { transform: none; } }

.consent-in {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px clamp(20px, 5vw, 40px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}
.consent-copy { flex: 1 1 auto; }
.consent h2 {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 5px;
  max-width: none;
}
.consent p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--grey);
  max-width: 74ch;
}
.consent a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

.consent-actions { display: flex; gap: 12px; flex: 0 0 auto; }
.consent-actions .btn { font-size: 15px; padding: 12px 22px; }

@media (max-width: 720px) {
  .consent-in { flex-direction: column; align-items: stretch; gap: 16px; }
  .consent-actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .consent { animation: none; }
}

/* ============================================================
   IMPORTED ARTICLE MEDIA
   ------------------------------------------------------------
   The imported articles arrived with WordPress markup, including
   video at its native 1080px. Anything wider than the measure is
   pulled back rather than allowed to push the page sideways; a
   table keeps its own shape and scrolls inside its own box, so a
   wide table never makes the body scroll.
   ============================================================ */
.prose img,
.prose video,
.prose iframe,
.prose figure { max-width: 100%; height: auto; display: block; }
.prose video, .prose iframe { border-radius: 2px; background: var(--paper-2); }
.prose figure { margin: 26px 0; }
.prose figcaption { font-size: 14px; color: var(--grey-2); margin-top: 8px; }
.prose table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15.5px; }
.prose th, .prose td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; }
.prose pre { overflow-x: auto; background: var(--paper-2); padding: 14px 16px; border-radius: 2px; }
.prose code { font-family: var(--mono); font-size: .92em; }

/* ============================================================
   VIDEO
   ------------------------------------------------------------
   A facade, not an iframe. The poster is served from this
   domain and the YouTube player is only created on click, so
   a reader who does not press play sends nothing to Google —
   which is what the cookie policy promises anyone who declined.
   ============================================================ */
.yt { margin: 30px 0; }
.yt-play {
  display: block; position: relative; width: 100%; padding: 0;
  border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
  background: var(--paper-2); cursor: pointer; line-height: 0;
}
.yt-play img { width: 100%; height: auto; display: block; }
.yt-btn {
  position: absolute; left: 50%; top: 50%;
  width: 68px; height: 68px; margin: -34px 0 0 -34px;
  border-radius: 50%; background: rgba(10,37,64,.88);
  transition: background .16s ease, transform .16s var(--ease-out);
}
.yt-btn::after {
  content: ''; position: absolute; left: 27px; top: 22px;
  border-style: solid; border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent #fff;
}
.yt-play:focus-visible { outline: var(--focus-outline); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .yt-play:hover .yt-btn { background: var(--navy); transform: scale(1.06); }
}
.yt iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 2px; }
.yt-cap { margin-top: 10px; font-size: 14.5px; color: var(--grey); }
.yt-cap a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .yt-btn { transition: none; } }

/* ============================================================
   FOOTER PRACTICE LIST
   ------------------------------------------------------------
   The top navigation stays at five items, so the footer is the
   only place every one of the twelve practice areas is linked.
   That is deliberate: it puts a direct link to each practice
   page on all 132 pages, which is what keeps the five newest
   pages one hop from anything already indexed.

   Two columns, by grid rather than by `columns`, because the
   44px touch targets above are inline-flex and a multi-column
   fragmentation context splits those unpredictably. Below the
   footer's own two-column breakpoint the cell is too narrow for
   two lists, so it collapses to one.
   ============================================================ */
.ftr-top { grid-template-columns: 1.1fr 0.8fr 1.7fr 1.3fr; }
.ftr-practices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}
@media (max-width: 900px) {
  .ftr-top { grid-template-columns: 1fr 1fr; }
  .ftr-practices { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ftr-top { grid-template-columns: 1fr; }
  .ftr-practices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   SUBJECT INDEX  (insights.html)
   ------------------------------------------------------------
   108 notes in nine anchored sections. The index is anchors
   rather than a JavaScript filter: the CSP is script-src 'self'
   so a filter would mean new script for what an anchor already
   does, and a filtered list shows a retrieval agent only
   whatever the default filter selected. All 108 links stay in
   one fetch.

   The count is tabular-figure so the numbers line up down the
   wrapped rows rather than drifting.
   ============================================================ */
.idx { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.idx a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 17px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 14.5px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .22s var(--ease-out), background-color .22s var(--ease-out);
}
.idx a span {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--grey);
}
@media (hover: hover) and (pointer: fine) {
  .idx a:hover { border-color: var(--ink); background: var(--paper-2); }
}
.idx a:focus-visible { outline: var(--focus-outline); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .idx a { transition: none; } }

/* an anchored section must not land under the sticky header */
#family, #disputes, #criminal, #tax, #ip,
#property, #data-ai, #banking, #employment { scroll-margin-top: 92px; }

/* ============================================================
   FOOTER OFFICES
   ------------------------------------------------------------
   All four addresses in full on every page, in their own row so
   the contact column does not grow four addresses tall. Four
   across, two on tablets, one on phones.
   ============================================================ */
.ftr-offices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px 40px;
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}
.ftr-offices p { margin-top: 10px; font-size: 13.5px; line-height: 1.65; }
@media (max-width: 900px) { .ftr-offices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ftr-offices { grid-template-columns: 1fr; } }