/* 12D Legal demo — self-contained stylesheet, independent of /assets/site.css
   and every other /demo/*/style.css. critical.css (inlined per page) covers the
   above-the-fold banner/header/hero shape so first paint never waits on this.

   Every color pairing below was computed and verified against WCAG AA (4.5:1
   for text) before this file was written — the discipline established since
   real estate/accounting/physio/doctor/school, all of which hit accessibility
   100 on their first Lighthouse measurement this way. */

/* ---------- self-hosted fonts (Latin subset) ---------- */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/demo/lawyer/fonts/librebaskerville-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/demo/lawyer/fonts/librebaskerville-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/demo/lawyer/fonts/notosans-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- fallback metric overrides, so Libre Baskerville/Noto Sans don't
   visibly reflow the page when they finish loading on an uncached visit.
   Computed with the method this session has settled on as correct, after an
   earlier build's math-only approach (reading a variable font's static
   default-instance tables) turned out wrong whenever the default instance
   doesn't match the page's real usage weight: render a fixed sample directly
   in the browser, in the real web font at the weight it's actually used at,
   and in each fallback at the same weight with NO overrides (so normal OS
   weight matching resolves a true Bold face where one exists), then
   size-adjust = webFontWidth / fallbackWidth, with ascent/descent-override
   recomputed from the web font's own static ascender/descender (assumed
   weight-invariant) divided by that size-adjust. Libre Baskerville ships
   real separate static files per weight (not a variable font), so this
   demo's headings (weight 700) don't have the variable-font-default-instance
   trap Bitter had — but the fallbacks are still measured at 700 directly,
   not assumed, and still use local('Georgia Bold') etc. first since
   local('Georgia') alone pins to Regular on Windows regardless of requested
   weight.
   Georgia and Arial are the Windows/Mac fallbacks; Android ships neither, so
   Noto Serif and Roboto (both preinstalled on Android) back them up —
   measured the same way, except Noto Serif/Roboto aren't installed on this
   Windows dev machine, so their own TTFs were loaded as temporary web fonts
   (not local()) purely to get the width ratio; the shipped @font-face below
   still uses local('Noto Serif ...')/local('Roboto'), since on a real Android
   device those names resolve to the OS's own installed copy, same as Georgia/
   Arial do on Windows/Mac.
   Libre Baskerville vs Georgia:    size-adjust 103.61%, ascent-override 93.62%, descent-override 26.06%
   Libre Baskerville vs Noto Serif: size-adjust 104.47%, ascent-override 92.85%, descent-override 25.85%
   Noto Sans vs Arial:              size-adjust 105.88%, ascent-override 100.96%, descent-override 27.67%
   Noto Sans vs Roboto:             size-adjust 105.76%, ascent-override 101.07%, descent-override 27.70% */
@font-face {
  font-family: 'Baskerville Fallback Georgia';
  font-weight: 700;
  src: local('Georgia Bold'), local('Georgia');
  size-adjust: 103.61%;
  ascent-override: 93.62%;
  descent-override: 26.06%;
}
@font-face {
  font-family: 'Baskerville Fallback NotoSerif';
  font-weight: 700;
  src: local('Noto Serif Bold'), local('Noto Serif');
  size-adjust: 104.47%;
  ascent-override: 92.85%;
  descent-override: 25.85%;
}
@font-face {
  font-family: 'NotoSans Fallback Arial';
  src: local('Arial');
  size-adjust: 105.88%;
  ascent-override: 100.96%;
  descent-override: 27.67%;
}
@font-face {
  font-family: 'NotoSans Fallback Roboto';
  src: local('Roboto');
  size-adjust: 105.76%;
  ascent-override: 101.07%;
  descent-override: 27.70%;
}
/* The two blocks above cover body text at 400 — .eyebrow and .btn actually
   render Noto Sans at 600 (within the declared 400-600 range, so no range
   fix needed here, unlike most of the rest of this pass) but had no
   calibration of their own until now, so they fell out of sync once the
   real webfont finished loading — the same bug fixed for wellness's Work
   Sans eyebrow, and the closest match to it in this whole pass. Also:
   critical.css's own .btn/.lawyer-brand rules were pointing straight at
   the generic family instead of these fallback names at all — fixed
   alongside this (lawyer-brand's own weight, 700, already had a
   calibrated Baskerville face; it just wasn't being referenced).
   Noto Sans@600 vs Arial:  size-adjust 100.44%, ascent-override 106.43%, descent-override 29.17%
   Noto Sans@600 vs Roboto: size-adjust 107.20%, ascent-override 99.72%,  descent-override 27.33% */
@font-face {
  font-family: 'NotoSans Fallback Arial';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial');
  size-adjust: 100.44%;
  ascent-override: 106.43%;
  descent-override: 29.17%;
}
@font-face {
  font-family: 'NotoSans Fallback Roboto';
  font-weight: 600;
  src: local('Roboto SemiBold'), local('Roboto Bold'), local('Roboto');
  size-adjust: 107.20%;
  ascent-override: 99.72%;
  descent-override: 27.33%;
}

/* ---------- tokens ---------- */
:root {
  --ink: #2A2A2E;
  --ink-soft: #4A4A50;
  --paper: #FAF9F6;
  --stone: #EDEAE3;
  --oxblood: #6B1F2A;
  --oxblood-dark: #5C1A23;
  --brass: #8A6D2E;
  --brass-text: #6B5222;
  --line: #E2DED3;
  --font-display: 'Libre Baskerville', 'Baskerville Fallback Georgia', 'Baskerville Fallback NotoSerif', Georgia, 'Noto Serif', serif;
  --font-body: 'Noto Sans', 'NotoSans Fallback Arial', 'NotoSans Fallback Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max: 1200px;
  --gutter: clamp(20px, 4vw, 64px);
  --nav-breakpoint: 900px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
body.bci-modal-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--oxblood-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; margin: 0 0 0.45em; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(52px, 8vw, 104px) 0; }
.eyebrow { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; color: var(--oxblood-dark); margin: 0 0 0.9em; }
.section-head { max-width: 640px; margin: 0 0 3em; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lede { font-size: 1.08rem; color: var(--ink-soft); }

/* ---------- focus & skip link ---------- */
:focus-visible { outline: 3px solid var(--oxblood-dark); outline-offset: 2px; border-radius: 2px; }
.skip-link {
  position: absolute; left: -999px; top: auto;
  background: var(--ink); color: #fff;
  padding: 10px 18px; z-index: 300; font-weight: 600;
}
.skip-link:focus { left: 0; top: 0; }

/* ---------- demo banner ---------- */
.demo-banner {
  background: var(--ink); color: #fff;
  font-size: 0.86rem; padding: 10px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: center;
  text-align: center; position: relative; z-index: 60;
}
.demo-banner p { margin: 0; font-weight: 400; }
.demo-banner a { color: #fff; text-decoration: underline; font-weight: 500; }
.demo-banner__cta {
  background: var(--oxblood); color: #fff;
  text-decoration: none; padding: 0.35rem 0.8rem; border-radius: 999px;
  font-weight: 500; white-space: nowrap; min-height: 44px;
  display: inline-flex; align-items: center;
}
.demo-banner__cta:hover { background: #4E161D; }


.demo-banner__book { display: inline-flex; align-items: center; min-height: 24px; }
.demo-banner__link-short { display: none; }
@media (max-width: 1023px) {
  .demo-banner__link-full { display: none; }
  .demo-banner__link-short { display: inline; }
}/* ---------- Bar Council disclaimer modal ---------- */
.bci-modal {
  display: none;
  position: fixed; inset: 0; z-index: 500;
  background: rgba(42, 42, 46, 0.72);
  align-items: center; justify-content: center; padding: 20px;
}
.bci-modal.show { display: flex; }
.bci-modal__dialog {
  background: var(--paper); max-width: 560px; width: 100%;
  padding: clamp(28px, 4vw, 40px); border-top: 4px solid var(--oxblood);
  max-height: 88vh; overflow-y: auto;
}
.bci-modal__dialog h2 { font-size: 1.3rem; }
.bci-modal__dialog p { color: var(--ink-soft); font-size: 0.96rem; }
.bci-modal__actions { display: flex; gap: 14px; margin-top: 1.6em; flex-wrap: wrap; }

/* ---------- header / nav ---------- */
.lawyer-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 249, 246, 0.95); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
  padding: 20px 0;
}
.lawyer-header.is-scrolled { padding: 10px 0; box-shadow: 0 8px 24px rgba(42, 42, 46, 0.1); }
.lawyer-header__wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.lawyer-brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; color: var(--ink);
  margin-right: auto; white-space: nowrap;
}
.lawyer-brand span { color: var(--oxblood-dark); }
.lawyer-nav__links {
  list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center;
}
.lawyer-nav__links a { color: var(--ink); font-weight: 500; font-size: 0.91rem; white-space: nowrap; }
.lawyer-nav__links a:hover { color: var(--oxblood-dark); text-decoration: none; }
.lawyer-header__actions { display: flex; align-items: center; gap: 14px; }
.lawyer-nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; font-size: 1.25rem; line-height: 1;
  background: transparent; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; color: var(--ink);
}
@media (max-width: 899px) {
  .lawyer-nav__toggle { display: flex; }
  .lawyer-nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 20px;
  }
  .lawyer-nav__links.is-open { display: flex; }
  .lawyer-nav__links li { width: 100%; }
  .lawyer-nav__links a { display: block; padding: 11px 4px; width: 100%; }
}
@media (min-width: 900px) {
  .lawyer-nav__links { display: flex !important; position: static; }
}
@media (max-width: 479px) {
  .lawyer-cta-full { display: none; }
  .lawyer-brand { font-size: 1.08rem; }
  .lawyer-header__wrap { gap: 10px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  line-height: inherit; padding: 14px 28px; border-radius: 4px; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #18181B; }
.btn--oxblood { background: var(--oxblood); color: #fff; }
.btn--oxblood:hover { background: #4E161D; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--oxblood-dark); }
.btn--small { padding: 10px 20px; font-size: 0.84rem; line-height: normal; }
.btn--whatsapp { background: #2E7D4F; color: #fff; }
.btn--whatsapp:hover { background: #255F3D; }

/* ---------- hero (asymmetric, full-bleed media) ---------- */
.hero { padding: 0; position: relative; }
.hero__wrap {
  max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero__media { border-radius: 4px; overflow: hidden; }
.hero__media img { width: 100%; height: auto; }
.hero__media picture img { aspect-ratio: 1088 / 1360; }
@media (min-width: 641px) { .hero__media picture img { aspect-ratio: 2400 / 1344; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.8em; }
.hero__meta { margin-top: 1.6em; display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 899px) {
  .hero__wrap { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
}

/* ---------- service/about top image — hero-grade ---------- */
.page-hero { padding: 0; }
.page-hero__wrap {
  max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.page-hero__media { border-radius: 4px; overflow: hidden; background: var(--stone); }
.page-hero__media img { width: 100%; height: auto; display: block; }
@media (max-width: 899px) { .page-hero__wrap { grid-template-columns: 1fr; } .page-hero__media { order: -1; } }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 26px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1023px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: 0 16px 36px rgba(42, 42, 46, 0.1); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--stone); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.card__body h2, .card__body h3 { font-size: 1.18rem; font-weight: 700; margin: 0 0 0.3em; }
.card__meta { font-size: 0.84rem; color: var(--ink-soft); margin: 0 0 0.6em; }

.section--stone { background: var(--stone); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink .eyebrow { color: #fff; }
.section--ink .lede { color: #CECED2; }

/* ---------- advocate profile ---------- */
.profile-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0.6em 0; }
.profile-card__qual { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: var(--oxblood-dark); background: var(--stone); padding: 4px 12px; border-radius: 20px; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-item summary { font-weight: 600; cursor: pointer; font-size: 1.0rem; color: var(--ink); }
.faq-item p { margin: 0.8em 0 0; color: var(--ink-soft); }
.faq-disclaimer { font-size: 0.84rem; color: var(--ink-soft); font-style: italic; margin-top: 1.2em; padding-top: 1.2em; border-top: 1px solid var(--line); }

/* ---------- contact form ---------- */
.contact-form { display: grid; gap: 16px; max-width: 520px; }
.contact-form label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--font-body); font-size: 0.95rem; background: #fff; color: var(--ink);
}
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form__note { font-size: 0.84rem; color: var(--ink-soft); }

/* ---------- footer ---------- */
.lawyer-footer { background: var(--ink); color: #CECED2; padding: 56px 0 30px; }
.lawyer-footer__wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; }
.lawyer-footer a { color: #CECED2; }
.lawyer-footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: #fff; margin-bottom: 0.4em; }
.lawyer-footer__heading { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.9em; }
.lawyer-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.lawyer-footer__legal { max-width: var(--max); margin: 38px auto 0; padding: 20px var(--gutter) 0; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.76rem; color: #9C9CA2; }
@media (max-width: 760px) { .lawyer-footer__wrap { grid-template-columns: 1fr; } }

/* ---------- booking modal (built by script.js) ---------- */
.booking-overlay {
  position: fixed; inset: 0; background: rgba(42, 42, 46, 0.6); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.booking-modal {
  background: var(--paper); max-width: 540px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 32px clamp(20px, 4vw, 38px); position: relative;
  border-top: 3px solid var(--oxblood);
}
.booking-modal__close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  border: 1px solid var(--line); background: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.booking-step__title { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--oxblood-dark); margin-bottom: 0.7em; }
.booking-options { display: grid; gap: 10px; margin-top: 18px; }
.booking-option {
  text-align: left; padding: 13px 16px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-family: var(--font-body); font-size: 0.94rem; color: var(--ink);
}
.booking-option:hover { border-color: var(--oxblood-dark); }
.booking-option[aria-pressed="true"] { border-color: var(--oxblood-dark); background: var(--stone); font-weight: 600; }
.booking-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 18px; }
.booking-date {
  padding: 11px 6px; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--font-body); font-size: 0.8rem; text-align: center; line-height: 1.3;
}
.booking-date:hover { border-color: var(--oxblood-dark); }
.booking-date[aria-pressed="true"] { border-color: var(--oxblood-dark); background: var(--stone); font-weight: 600; }
.booking-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 18px; }
.booking-nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 10px; }
.booking-final { text-align: center; }
.booking-final p { font-size: 1rem; }
.booking-final__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.booking-final__cal { margin-top: 12px; font-size: 0.88rem; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }