/* 12D Accounting demo — self-contained stylesheet, deliberately independent of
   /assets/site.css and every other /demo/*/style.css. Loaded via the
   preload+swap pattern (see each page's <head>) — critical.css (inlined per
   page) covers the above-the-fold banner/header/hero shape so first paint
   never waits on this file.

   Every color pairing below was computed and verified against WCAG AA
   (4.5:1 for text) before this file was written, not discovered via a
   failing Lighthouse run afterward — the lesson paid for on the dentist
   demo and confirmed again on real estate's own clean first pass. */

/* ---------- self-hosted fonts (Latin subset) ---------- */
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url('/demo/accounting/fonts/lora-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;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/demo/accounting/fonts/plexsans-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 Lora/IBM Plex Sans don't visibly
   reflow the page when they finish loading on an uncached visit. Measured
   the same way as every recent demo: a fixed sample rendered in the real web
   font at the weight it's actually used at (600 for headings, 400 for body),
   and in each fallback at the same weight with no overrides, so normal OS
   weight matching resolves a true Bold face where one exists. Georgia/Arial
   are the Windows/Mac fallbacks; Noto Serif/Roboto (not installed on this
   dev machine, measured via their own TTFs loaded as temporary web fonts)
   back them up on Android — the shipped CSS below still uses local() for all
   four, since on the right OS those names resolve to its own installed copy.
   h1/h2 render at weight 500 (the largest above-the-fold text, so that's the
   weight measured); h3/h4 render at 600 — cross-checked by applying the
   500-measured size-adjust to a 600-weight render: residual error 0.880%
   (Georgia) and 1.049% (Noto Serif), both well under 3%, so one fallback
   @font-face per family covers both weights.
   Lora vs Georgia:    size-adjust 91.14%,  ascent-override 110.38%, descent-override 30.06%
   Lora vs Noto Serif: size-adjust 96.94%,  ascent-override 103.78%, descent-override 28.27%
   Plex vs Arial:      size-adjust 100.92%, ascent-override 101.57%, descent-override 27.25%
   Plex vs Roboto:     size-adjust 100.99%, ascent-override 101.50%, descent-override 27.23% */
@font-face {
  font-family: 'Lora Fallback Georgia';
  font-weight: 500;
  src: local('Georgia Bold'), local('Georgia');
  size-adjust: 91.14%;
  ascent-override: 110.38%;
  descent-override: 30.06%;
}
@font-face {
  font-family: 'Lora Fallback NotoSerif';
  font-weight: 500;
  src: local('Noto Serif Medium'), local('Noto Serif'), local('Noto Serif Bold');
  size-adjust: 96.94%;
  ascent-override: 103.78%;
  descent-override: 28.27%;
}
@font-face {
  font-family: 'Plex Fallback Arial';
  src: local('Arial');
  size-adjust: 100.92%;
  ascent-override: 101.57%;
  descent-override: 27.25%;
}
@font-face {
  font-family: 'Plex Fallback Roboto';
  src: local('Roboto');
  size-adjust: 100.99%;
  ascent-override: 101.50%;
  descent-override: 27.23%;
}
/* The two blocks above cover body text at 400 — .eyebrow and .btn actually
   render at 600 (confirmed above the fold: hero/header buttons and the
   eyebrow line) and had no calibration of their own until now, so they
   fell out of sync once the real webfont finished loading, the same class
   of bug fixed for wellness's Work Sans eyebrow. Also: critical.css's own
   .eyebrow/.btn/.accounting-brand rules were pointing straight at the
   generic family instead of these fallback names at all — fixed alongside
   this, not just the missing weight.
   Plex@600 vs Arial:  size-adjust 96.57%,  ascent-override 106.14%, descent-override 28.48%
   Plex@600 vs Roboto: size-adjust 103.06%, ascent-override 99.46%,  descent-override 26.68% */
@font-face {
  font-family: 'Plex Fallback Arial';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial');
  size-adjust: 96.57%;
  ascent-override: 106.14%;
  descent-override: 28.48%;
}
@font-face {
  font-family: 'Plex Fallback Roboto';
  font-weight: 600;
  src: local('Roboto SemiBold'), local('Roboto Bold'), local('Roboto');
  size-adjust: 103.06%;
  ascent-override: 99.46%;
  descent-override: 26.68%;
}

/* ---------- tokens ---------- */
:root {
  --ink: #1C2E28;
  --ink-soft: #3E544C;
  --paper: #FAFAF6;
  --mist: #E8ECE6;
  --gold: #9C7A2E;
  --gold-dark: #7A5D24;
  --gold-text: #6B5020;
  --line: #DCE3D9;
  --font-display: 'Lora', 'Lora Fallback Georgia', 'Lora Fallback NotoSerif', Georgia, 'Noto Serif', serif;
  --font-body: 'IBM Plex Sans', 'Plex Fallback Arial', 'Plex 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;
}
img { max-width: 100%; display: block; }
a { color: var(--ink-soft); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; margin: 0 0 0.45em; color: var(--ink); }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); font-weight: 500; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 500; }
h3 { font-size: clamp(1.12rem, 1.8vw, 1.35rem); font-weight: 600; }
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.12em; text-transform: uppercase; font-size: 0.74rem; color: var(--gold-text); 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.1rem; color: var(--ink-soft); }

/* ---------- focus & skip link ---------- */
:focus-visible { outline: 3px solid var(--gold-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: 200; font-weight: 500;
}
.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; }
.demo-banner__cta {
  background: var(--gold-dark); 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: #5E451C; }


.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; }
}/* ---------- header / nav ---------- */
.accounting-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 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;
}
.accounting-header.is-scrolled { padding: 10px 0; box-shadow: 0 8px 24px rgba(28, 46, 40, 0.1); }
.accounting-header__wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.accounting-brand {
  font-family: var(--font-display); font-weight: 600; font-size: 1.42rem; color: var(--ink);
  margin-right: auto; white-space: nowrap;
}
.accounting-brand span { color: var(--gold-dark); }
.accounting-nav__links {
  list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center;
}
.accounting-nav__links a { color: var(--ink); font-weight: 500; font-size: 0.91rem; white-space: nowrap; }
.accounting-nav__links a:hover { color: var(--gold-dark); text-decoration: none; }
.accounting-header__actions { display: flex; align-items: center; gap: 14px; }
.accounting-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) {
  .accounting-nav__toggle { display: flex; }
  .accounting-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;
  }
  .accounting-nav__links.is-open { display: flex; }
  .accounting-nav__links li { width: 100%; }
  .accounting-nav__links a { display: block; padding: 11px 4px; width: 100%; }
}
@media (min-width: 900px) {
  .accounting-nav__links { display: flex !important; position: static; }
}
@media (max-width: 479px) {
  /* "Book a consultation" shortens to "Book" below ~480px — lesson from
     hospital/dentist/real-estate, where the full label overflowed the
     header row next to a longer brand name and the ☰ toggle at 360/390px. */
  .accounting-cta-full { display: none; }
  /* "12D Accounting" is longer than every prior demo's own brand name
     (12D Hospital/Dental/Realty) — shortening the CTA alone wasn't enough
     to clear 360/390px, confirmed via a direct Playwright measurement, so
     the brand text and header gap also shrink slightly at this width. */
  .accounting-brand { font-size: 1.18rem; }
  .accounting-header__wrap { gap: 12px; }
}

/* ---------- 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: #122019; }
.btn--gold { background: var(--gold-dark); color: #fff; }
.btn--gold:hover { background: #5E451C; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--gold-dark); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.btn--ghost-light:hover { border-color: #fff; }
.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 is reused on service/about pages for a plain,
   differently-shaped <img> — this aspect-ratio is specific to the home
   hero's own art-directed <picture> variants, so it's scoped to only match
   an <img> inside a <picture>, never the bare-<img> reuse elsewhere
   (lesson from spa/hospital/dentist/real-estate, applied from the start). */
.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/who-we-work-with page top image — hero-grade, not lazy ---------- */
.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(--mist); }
.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(28, 46, 40, 0.1); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--mist); }
.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.2rem; font-weight: 600; margin: 0 0 0.3em; }
.card__meta { font-size: 0.84rem; color: var(--ink-soft); margin: 0 0 0.6em; }

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

/* ---------- who-we-work-with profile tiles ---------- */
.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.04em; color: var(--gold-text); background: var(--mist); padding: 4px 12px; border-radius: 20px; }

/* ---------- documents checklist ---------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li { position: relative; padding-left: 30px; }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0.1em; color: var(--gold-dark); font-weight: 700; }

/* ---------- gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery-grid img { aspect-ratio: 1; object-fit: cover; }
@media (max-width: 639px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

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

/* ---------- contact form ---------- */
.contact-form { display: grid; gap: 16px; max-width: 520px; }
.contact-form label { display: block; font-weight: 500; 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 ---------- */
.accounting-footer { background: var(--ink); color: #CBD6D1; padding: 56px 0 30px; }
.accounting-footer__wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr; gap: 36px; }
.accounting-footer a { color: #CBD6D1; }
.accounting-footer__brand { font-family: var(--font-display); font-size: 1.25rem; color: #fff; margin-bottom: 0.4em; }
.accounting-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; }
.accounting-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.accounting-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: #9CAB9F; }
@media (max-width: 760px) { .accounting-footer__wrap { grid-template-columns: 1fr; } }

/* ---------- booking modal (built by script.js) ---------- */
.booking-overlay {
  position: fixed; inset: 0; background: rgba(28, 46, 40, 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(--gold);
}
.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(--gold-text); 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(--gold-dark); }
.booking-option[aria-pressed="true"] { border-color: var(--gold-dark); background: var(--mist); font-weight: 500; }
.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(--gold-dark); }
.booking-date[aria-pressed="true"] { border-color: var(--gold-dark); background: var(--mist); font-weight: 500; }
.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; }