/* ==========================================================================
   avocatleonte.ro — design system
   Source: design/reference/*.html (Claude Design artboards). Tokens, grid and
   components are shared by every page; page-specific CSS lives in its own
   file (home.css, answer.css, legal.css) and is linked via front matter `styles`.
   Rules of the system: warm paper, near-black ink, one accent (oxblood).
   No icons, no shadows, no rounded corners, no gradients. Structure comes from
   hairline rules, running numbers and a 12-column grid.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL OFL 1.1 — see fonts/OFL.txt) ---------- */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-latin.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: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-ro.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0218-021B, U+015E-015F, U+0162-0163; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-italic-latin.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: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/instrument-serif-italic-ro.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0218-021B, U+015E-015F, U+0162-0163; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("../fonts/plex-sans-var-latin.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 Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/plex-mono-400-latin.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 Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/plex-mono-500-latin.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; }
/* The Plex files from Google Fonts have no "→" (U+2192). This 1.5 KB subset of IBM Plex Mono Medium supplies the
   four arrows (renamed, as the OFL requires for a Modified Version); it sits second in the --sans and --mono stacks. */
@font-face { font-family: "Leonte Arrows"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/leonte-arrows.woff2") format("woff2");
  unicode-range: U+2190-2193; }
/* The only Latin Extended letters the site uses are the Romanian ones (â, î are in the latin files). These 2–6 KB
   subsets of the Plex latin-ext files replace the full 13–31 KB files; renamed for the same OFL reason as above.
   A font file is cached for a year (_headers): a changed font gets a new file name. */
@font-face { font-family: "Leonte Sans RO"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("../fonts/leonte-sans-ro.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0218-021B, U+015E-015F, U+0162-0163; }
@font-face { font-family: "Leonte Mono RO"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/leonte-mono-400-ro.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0218-021B, U+015E-015F, U+0162-0163; }
@font-face { font-family: "Leonte Mono RO"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/leonte-mono-500-ro.woff2") format("woff2");
  unicode-range: U+0102-0103, U+0218-021B, U+015E-015F, U+0162-0163; }
/* Metric-matched local fallbacks for the first paint on slow connections (nothing is downloaded). Instrument Serif
   is about 24% narrower than Georgia (iOS, Windows, Mac) and 30% narrower than Noto Serif (Android): unadjusted, an
   h1 wraps onto an extra line and the page jumps when the web font arrives. Roboto (Android) for the sans. */
@font-face { font-family: "Instrument Serif Fallback G"; src: local("Georgia"); size-adjust: 76%; }
@font-face { font-family: "Instrument Serif Fallback N"; src: local("Noto Serif"), local("NotoSerif-Regular"); size-adjust: 70%; }
@font-face { font-family: "Leonte Sans Fallback"; font-weight: 400; src: local("Roboto"), local("Roboto-Regular"); size-adjust: 101.5%; }
@font-face { font-family: "Leonte Sans Fallback"; font-weight: 500; src: local("Roboto Medium"), local("Roboto-Medium"); size-adjust: 101.5%; }

/* ---------- Tokens ---------- */
:root {
  /* colour — every text/background pair used below is ≥ 4.5:1 (WCAG AA) */
  --paper: #F4F3EE;
  --surface: #EAE8E0;
  --panel: #DEDBD1;
  --ink: #15150F;
  --muted: #4E4E43;        /* body-secondary; 7.4:1 on paper, 6.8:1 on surface */
  --subtle: #635F51;       /* meta lines, breadcrumbs; 5.6:1 on paper */
  --rule: #D4D1C5;
  --rule-strong: #C2BEAF;
  --rule-on-surface: #C9C5B8;
  --accent: #7B2D26;       /* oxblood; 8.4:1 on paper */
  --accent-hover: #59201B;
  --dark: #1A1A14;
  --on-dark: #EDEBE2;
  --on-dark-muted: #B4AF9F;
  --on-dark-subtle: #9A9585;
  --on-dark-rule: #33322A;
  --highlight: #F3E3A6;    /* preview-only markers */

  /* type */
  --serif: "Instrument Serif", "Instrument Serif Fallback G", "Instrument Serif Fallback N", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", "Leonte Arrows", "Leonte Sans RO", "Leonte Sans Fallback", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Leonte Arrows", "Leonte Mono RO", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fs-h1: clamp(2.35rem, 1.55rem + 2.6vw, 3.5rem);     /* 37 → 56 */
  --fs-h2: clamp(1.9rem, 1.5rem + 1.25vw, 2.375rem);    /* 30 → 38 */
  --fs-h3: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);     /* 24 → 30 */
  --fs-h4: clamp(1.35rem, 1.25rem + 0.3vw, 1.5rem);     /* 21 → 24 */
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --fs-body: 1.0625rem;   /* 17px — the audience skews 40+; never smaller for running text */
  --fs-small: 1.0625rem;  /* 17px: running text never below 17px; set notes apart with colour (--muted), not size */
  --fs-fine: 0.875rem;    /* 14px — legal fine print only */
  --fs-label: 0.75rem;    /* 12px mono caps */

  /* layout */
  --page-max: 1440px;
  --gutter: clamp(20px, 6.67vw, 96px);
  --col-gap: 24px;
  --section-y: clamp(56px, 4rem + 3vw, 96px);
  --measure: 37.5rem;      /* ≈ 75 characters of 17px Plex Sans */
  --measure-lead: 42rem;   /* ≈ 74 characters of the 21px lead */
  --header-h: 84px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; scroll-padding-bottom: 24px; }  /* a focus ring scrolled into view is never cut off; the call bar rule below wins under 900px */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: -0.008em; color: var(--ink); text-wrap: balance; }
h1 { font-size: var(--fs-h1); line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4 { font-size: var(--fs-h4); line-height: 1.25; }
p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
table { border-collapse: collapse; width: 100%; }
sup { font-size: 0.7em; line-height: 0; }
b, strong { font-weight: 500; }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-hover); }
a.plain, .plain a { text-decoration: none; color: inherit; }
a.plain:hover, .plain a:hover { color: var(--accent); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.on-dark :focus-visible, .cta-dark :focus-visible, .site-footer :focus-visible { outline-color: var(--on-dark); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--gutter); top: -100px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; font-weight: 500; text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--paper); }

/* ---------- Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--tight-top { padding-top: clamp(16px, 1rem + 1vw, 24px); }
.section--alt { background: var(--surface); border-block: 1px solid var(--rule); }
.section--alt + .section--alt { border-top: 0; }

.grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--col-gap); align-items: start; }
@media (min-width: 900px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
}

/* Section heading: label alone on the left, heading + intro in cols 4–11 */
.section-head { margin-bottom: clamp(28px, 1.5rem + 1.2vw, 44px); }
.section-head__label { margin-bottom: 14px; }
.section-head__body > * + * { margin-top: 18px; }
.section-head__body > p, .section-head__body > .gate > p { max-width: var(--measure); font-size: var(--fs-body); color: var(--muted); line-height: 1.75; }
@media (min-width: 900px) {
  .section-head__label { grid-column: 1 / span 3; margin-bottom: 0; padding-top: 12px; }
  .section-head__body { grid-column: 4 / span 8; }
}

/* ---------- Type utilities ---------- */
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.5;
}
.eyebrow--muted { color: var(--muted); }
.num { font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--accent); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); }
.lead { font-size: var(--fs-lead); font-weight: 300; line-height: 1.6; color: var(--muted); }
@media (max-width: 899px) { .lead { font-weight: 400; } }  /* 300 only where the lead is large (desktop) */
.muted { color: var(--muted); }
.small { font-size: var(--fs-small); line-height: 1.7; }
.fine { font-size: var(--fs-fine); line-height: 1.75; color: var(--muted); }
.meta { font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.06em; color: var(--subtle); }
.prose > * + * { margin-top: 1.1em; }
.prose p, .prose li { color: var(--muted); line-height: 1.8; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose ul > li { position: relative; padding-left: 1.4em; }
.prose ul > li + li { margin-top: 0.5em; }
.prose ul > li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.prose ol { counter-reset: prose-ol; }
.prose ol > li { counter-increment: prose-ol; position: relative; padding-left: 2.2em; }
.prose ol > li + li { margin-top: 0.5em; }
.prose ol > li::before { content: counter(prose-ol, decimal-leading-zero); position: absolute; left: 0; top: 0.25em; font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--accent); }
.measure { max-width: var(--measure); }
.nowrap { white-space: nowrap; }  /* keeps Romanian clitics ("m-ați", "v-ar") and "avocat–client" from breaking */
.link-arrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--accent);
}
.link-arrow::after { content: "\00A0→"; content: "\00A0→" / ""; }  /* second form: decorative, not read aloud */
.link-arrow:hover { text-decoration: underline; }

/* ---------- Buttons (real <a>/<button>, never divs) ---------- */
.btn-call {
  display: inline-flex; flex-direction: column; gap: 3px;
  background: var(--ink); color: var(--paper);
  padding: 15px 30px; text-decoration: none;
  min-height: 48px;
}
.btn-call:hover { background: #2B2B22; color: var(--paper); }
.btn-call__label { font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #C4BFAE; }
.btn-call__number { font-family: var(--mono); font-size: 1.1875rem; font-weight: 500; letter-spacing: 0.01em; color: var(--paper); }
.btn-call--light { background: var(--paper); color: var(--ink); }
.btn-call--light:hover { background: #FFFFFF; }
.btn-call--light .btn-call__label { color: var(--subtle); }
.btn-call--light .btn-call__number { color: var(--ink); }

.btn-line {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 26px;
  border: 1px solid var(--rule-strong); color: var(--ink);
  font-size: 0.9375rem; font-weight: 500; text-decoration: none; background: transparent;
}
.btn-line:hover { border-color: var(--ink); color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px 16px; }
@media (max-width: 599px) {
  .btn-row { flex-direction: column; }
  .btn-row > .btn-call { align-items: center; }
}

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.site-header__inner { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 900px) { .site-header__inner { min-height: var(--header-h); } }
.brand { display: flex; flex-direction: column; justify-content: center; min-height: 44px; gap: 2px; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__name { font-family: var(--serif); font-size: clamp(1.1875rem, 1rem + 0.5vw, 1.4375rem); line-height: 1.1; }
.brand__role { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); line-height: 1.5; }

/* Below 900px the fixed call bar is the call button, so the header holds only the brand and a labelled menu. */
.nav { display: flex; align-items: center; gap: 10px; }
.nav__list { display: none; }
.nav__call { font-family: var(--mono); font-weight: 500; text-decoration: none; }
.nav__call--desktop { display: none; }
.nav__menu { position: relative; }
.nav__menu > summary {
  list-style: none; cursor: pointer; min-width: 44px; height: 44px; padding: 0 14px;
  border: 1px solid var(--rule-strong);
  display: flex; align-items: center;
  font-family: var(--mono); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink);
}
.nav__menu > summary::-webkit-details-marker { display: none; }
.nav__menu[open] > summary { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.nav__panel {
  position: absolute; right: 0; top: calc(100% + 11px); z-index: 40;  /* above the call bar (30): a landscape phone opens the panel over it */
  width: min(86vw, 320px); background: var(--paper); border: 1px solid var(--ink);
  padding: 8px 20px;
}
.nav__panel a { display: block; padding: 14px 0; border-top: 1px solid var(--rule); color: var(--ink); text-decoration: none; font-weight: 500; }
.nav__panel li:first-child a { border-top: 0; }
@media (min-width: 900px) {
  .brand__name, .brand__role, .nav__list a, .nav__call--desktop { white-space: nowrap; }
  .brand__role { letter-spacing: 0.14em; }
  .nav { gap: 28px; }
  .nav__list { display: flex; align-items: center; gap: 28px; }
  .nav__list a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--ink); text-decoration: none; font-size: 0.875rem; font-weight: 500; }
  .nav__list a:hover, .nav__list a[aria-current="page"] { color: var(--accent); }
  .nav__sep { width: 1px; height: 22px; background: var(--rule); }
  .nav__list a.nav__call--desktop { color: var(--accent); }
  .nav__menu { display: none; }
}
/* 900–1199px: six nav items and the brand only fit on one line with the brand stacked */
@media (min-width: 900px) and (max-width: 1199px) {
  .brand { align-items: flex-start; gap: 3px; }
  .nav, .nav__list { gap: 22px; }
}
@media (min-width: 1200px) {
  .brand { flex-direction: row; align-items: baseline; gap: 14px; min-height: 0; padding-block: 10px; }
}

/* ---------- Portrait ---------- */
/* The studio portrait has a pure-white backdrop; multiply lets it sit on the paper
   instead of in a white box. On dark grounds use .portrait--framed. */
.portrait { position: relative; background: var(--paper); }
.portrait img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.portrait figcaption { margin-top: 10px; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--subtle); }
.portrait--framed { background: #FFFFFF; border: 1px solid var(--rule-strong); }
.portrait--framed img { mix-blend-mode: normal; }

/* ---------- Ruled lists (practice areas, steps) ---------- */
.ruled > * { border-top: 1px solid var(--rule); }
.ruled > *:first-child { border-top-color: var(--ink); }
.ruled > *:last-child { border-bottom: 1px solid var(--rule); }
.ruled--surface > * { border-top-color: var(--rule-on-surface); }
.ruled--surface > *:last-child { border-bottom-color: var(--rule-on-surface); }

.row { padding-block: clamp(24px, 1rem + 1.5vw, 40px); }
.row__num { display: block; margin-bottom: 8px; }
.row__title { margin-bottom: 16px; }
@media (min-width: 900px) {
  .row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--col-gap); align-items: start; }
  .row__num { grid-column: 1 / span 1; padding-top: 7px; margin: 0; }
  .row__title { grid-column: 2 / span 4; margin: 0; }
  .row__body { grid-column: 7 / span 6; }
}

/* key–value lines inside a row (e.g. SUCCESIUNI — dezbaterea moștenirii…) */
.kv > * + * { margin-top: 16px; }
.kv__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.kv__key { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.kv__val { color: var(--ink); line-height: 1.65; }
@media (min-width: 600px) { .kv__item { grid-template-columns: 150px minmax(0, 1fr); gap: 24px; } }

/* ---------- Definition list (credentials, contact) ---------- */
.facts { width: 100%; }
.facts__row { border-top: 1px solid var(--rule); padding: 15px 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.facts__row:last-child { border-bottom: 1px solid var(--rule); }
.facts dt { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
.facts dd { color: var(--ink); line-height: 1.6; }
@media (min-width: 600px) { .facts__row { grid-template-columns: 186px minmax(0, 1fr); gap: 24px; } }
.facts--stacked .facts__row { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 18px 0; }
.facts--stacked .facts__row:first-child { border-top-color: var(--ink); }

/* ---------- Tables (fees, comparisons) ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table th, .data-table td { text-align: left; vertical-align: top; padding: 24px; border-bottom: 1px solid var(--rule); }
.data-table th:first-child, .data-table td:first-child { padding-left: 0; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table thead th {
  padding-block: 14px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
}
.data-table tbody tr:last-child > * { border-bottom-color: var(--ink); }
.data-table tbody th { font-family: var(--serif); font-size: var(--fs-h4); font-weight: 400; line-height: 1.25; color: var(--ink); }
.data-table td { color: var(--muted); line-height: 1.7; }
.data-table .figure { font-family: var(--mono); font-size: 1.0625rem; color: var(--ink); line-height: 1.5; }
.data-table .figure--accent { color: var(--accent); font-size: 1.25rem; }
.data-table .figure small { display: block; margin-top: 4px; font-family: var(--sans); font-size: var(--fs-small); line-height: 1.6; color: var(--muted); }
.cell-sub { display: block; margin-top: 4px; font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
/* Below 900px (single-column layout) tables become stacked cards: each row a block, each cell labelled */
@media (max-width: 899px) {
  .data-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table--stack, .data-table--stack tbody, .data-table--stack tr, .data-table--stack th, .data-table--stack td { display: block; width: 100%; }
  .data-table--stack tr { border-top: 1px solid var(--ink); padding: 18px 0 6px; }
  .data-table--stack tbody tr:last-child { border-bottom: 1px solid var(--ink); }
  .data-table--stack th, .data-table--stack td { padding: 0 0 14px; border: 0; max-width: var(--measure); }  /* the rules are on the tr and stay full width */
  .data-table--stack td[data-label]::before, .data-table--stack th[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  }
}

/* ---------- Boxes ---------- */
.note { border: 1px solid var(--accent); padding: clamp(22px, 1rem + 1vw, 30px); }
.note > * + * { margin-top: 12px; }
.note p { color: var(--ink); line-height: 1.75; }
.box { border: 1px solid var(--rule-strong); padding: clamp(22px, 1rem + 1vw, 34px); }
.box > * + * { margin-top: 14px; }
.summary { background: var(--surface); border-left: 3px solid var(--accent); padding: clamp(22px, 1rem + 1.2vw, 34px); }
.summary > * + * { margin-top: 14px; }
.summary p { font-size: var(--fs-lead); font-weight: 400; line-height: 1.7; color: var(--ink); }
.cta-dark { background: var(--ink); color: var(--paper); padding: clamp(26px, 1rem + 1.5vw, 38px); }
.cta-dark > * + * { margin-top: 16px; }
.cta-dark h2, .cta-dark h3 { color: var(--paper); }
.cta-dark p { color: var(--on-dark-muted); }
.pull { max-width: 24em; font-family: var(--serif); font-size: clamp(1.4rem, 1.15rem + 0.8vw, 1.6875rem); line-height: 1.4; color: var(--ink); text-wrap: pretty; }  /* ≈ 70 characters */

/* ---------- Link cards (FAQ teasers, related questions) ---------- */
.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(32px, 2rem + 2vw, 64px); }
@media (min-width: 900px) { .cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { border-top: 1px solid var(--rule-on-surface); padding: 26px 0; display: flex; flex-direction: column; gap: 12px; }
.card--strong { border-top-color: var(--ink); }
.card h3 { font-size: var(--fs-h4); line-height: 1.25; }
.card p:not(.eyebrow) { font-size: var(--fs-body); color: var(--muted); line-height: 1.7; }
a.card { text-decoration: none; color: inherit; }
a.card:hover h3 { color: var(--accent); }

/* ---------- Breadcrumb ---------- */
.crumbs { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--subtle); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 10px; }
.crumbs a { display: inline-block; position: relative; color: var(--subtle); text-decoration: none; }
.crumbs a::before { content: ""; position: absolute; inset: -12px -5px; }  /* 44px tap target; the focus ring stays on the text, clear of a wrapped second line */
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- Footer (dark) ---------- */
.site-footer { background: var(--dark); color: var(--on-dark-muted); padding: clamp(48px, 2rem + 2vw, 64px) 0 clamp(32px, 1.5rem + 1vw, 40px); }
.site-footer a { color: var(--on-dark-muted); text-decoration: none; }
.site-footer a:hover { color: var(--on-dark); text-decoration: underline; }
.site-footer__name { font-family: var(--serif); font-size: 1.625rem; color: var(--on-dark); line-height: 1.2; }
.site-footer__id { font-size: var(--fs-small); line-height: 1.7; font-style: normal; }  /* contact data and hours: running text on a phone */
.site-footer__id strong { color: var(--on-dark); font-weight: 500; }
.site-footer__col-title { display: block; margin-bottom: 2px; font-family: var(--mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark-subtle); }
/* Each link is its own ≥ 44px tap target (padding, not margins); a wrapped link keeps tight leading. */
.site-footer__links { font-size: var(--fs-small); line-height: 1.45; }
.site-footer__links a { display: inline-block; padding-block: 12px; }
.site-footer__tap { display: inline-block; padding-block: 10px; }  /* phone and e-mail in the address: ≈ 45px each */
.site-footer__cols { display: grid; gap: 36px; }
@media (min-width: 900px) {
  .site-footer__links { font-size: var(--fs-fine); }
  .site-footer__id { font-size: var(--fs-fine); line-height: 1.8; }
  .site-footer__cols { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px var(--col-gap); }
  .site-footer__who { grid-column: 1 / -1; }
  .site-footer__nav { grid-column: 1 / span 4; }
  .site-footer__nav2 { grid-column: 5 / span 4; }
  .site-footer__legal { grid-column: 9 / span 4; }
  .site-footer__nav + .site-footer__legal { grid-column: 5 / span 4; }  /* no answer pages live */
}
@media (min-width: 1440px) {
  .site-footer__cols { row-gap: 0; }
  .site-footer__who { grid-column: 1 / span 5; }
  .site-footer__nav { grid-column: 7 / span 2; }
  .site-footer__nav2 { grid-column: 9 / span 2; }
  .site-footer__legal { grid-column: 11 / span 2; }
  .site-footer__nav + .site-footer__legal { grid-column: 9 / span 4; }
}
.site-footer__bottom { margin-top: clamp(36px, 2rem + 1vw, 48px); padding-top: 24px; border-top: 1px solid var(--on-dark-rule); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; }
.site-footer__disclaimer { max-width: 52rem; font-size: var(--fs-fine); line-height: 1.75; color: var(--on-dark-subtle); }
.site-footer__copy { font-family: var(--mono); font-size: 0.75rem; color: var(--on-dark-subtle); white-space: nowrap; }

/* ---------- Mobile call bar ---------- */
.callbar { display: none; }
@media (max-width: 899px) {
  .callbar {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--paper); border-top: 1px solid var(--ink);
    padding-bottom: 0;
  }
  /* The home-indicator inset (iPhone) is inside the buttons, so the black "Sunați" reaches the screen edge */
  .callbar a {
    display: flex; align-items: center; justify-content: center; min-height: calc(56px + env(safe-area-inset-bottom)); padding-inline: 8px; padding-bottom: env(safe-area-inset-bottom); text-align: center;
    font-family: var(--mono); font-size: 0.875rem; font-weight: 500; line-height: 1.3; text-decoration: none; letter-spacing: 0.02em;
  }
  .callbar a:focus-visible { outline-offset: -5px; }  /* inside the bar, so the whole ring stays on screen */
  .callbar__call { flex-direction: column; gap: 2px; background: var(--ink); color: var(--paper); }
  .callbar__call:hover { color: var(--paper); }
  .callbar__call:focus-visible { outline-color: var(--paper); }
  .callbar__label { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: #C4BFAE; }
  .callbar__number { font-size: 1.0625rem; white-space: nowrap; }
  .callbar__wa { font-size: 1rem; color: var(--ink); }
  /* Home page: menu.js slides the bar away while the hero's own call and WhatsApp buttons are on screen. The first
     state is set without animation (--animate comes one frame later). It comes back if it gets keyboard focus. */
  .callbar--animate { transition: transform 0.2s; }
  .callbar--away { transform: translateY(100%); }
  .callbar--away:focus-within { transform: none; }
  body.has-callbar { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  /* Keyboard focus never lands under the bar (WCAG 2.4.11) */
  html { scroll-padding-bottom: calc(56px + env(safe-area-inset-bottom) + 16px); }
}
@media (prefers-reduced-motion: reduce) { .callbar--animate { transition: none; } }

/* ---------- Preview-only markers (never rendered on the live site) ---------- */
.preview-banner {
  background: var(--highlight); color: var(--ink); border-bottom: 1px solid #C9B25A;
  font-family: var(--mono); font-size: 0.9375rem; letter-spacing: 0.02em; line-height: 1.5;
  padding: 10px var(--gutter); text-align: center;
}
/* 44px tap targets without changing the line height (padding, cancelled by a negative margin) */
.preview-banner__link, .public-view-note__link {
  display: inline-block; padding-block: 11px; margin-block: -11px;
  color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap;
}
/* The public view (/versiunea-publica/ on previews): one discreet line, the only thing not on the live site */
.public-view-note {
  background: var(--surface); color: var(--muted); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.02em; line-height: 1.6;
  padding: 8px var(--gutter); text-align: center;
}
.public-view-note__link { color: var(--muted); font-weight: 400; padding-block: 12px; margin-block: -12px; }  /* 13px text: 12px padding for 44px */
@media (max-width: 599px) { .public-view-note__more { display: none; } }  /* stays one or two lines on a phone */
.public-view-note__link:hover { color: var(--accent); }
.gate { outline: 2px dashed #B8962E; outline-offset: 4px; position: relative; }
.gate--missing { background: repeating-linear-gradient(135deg, transparent 0 12px, rgba(243, 227, 166, 0.35) 12px 24px); }
.gate__label {
  display: block; width: fit-content; margin-bottom: 8px;
  background: var(--highlight); color: var(--ink);
  font-family: var(--mono); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; line-height: 1.5;
  padding: 3px 8px;
}
/* the dashed outline reaches 4px outside the span: keep it off the letters and punctuation on either side */
span.gate { outline-offset: 2px; margin-inline: 5px; }
span.gate .gate__label { display: inline; margin: 0 6px 0 0; }
.todo { background: var(--highlight); color: var(--ink); font-family: var(--mono); padding: 0 4px; }
.draft-badge { display: inline-block; background: var(--highlight); color: var(--ink); font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px; }

/* ---------- Forced colours (Windows High Contrast) ---------- */
/* Backgrounds are dropped in this mode; a border keeps the call buttons recognisable as buttons. */
@media (forced-colors: active) {
  .btn-call, .callbar a { border: 1px solid ButtonText; }
}

/* ---------- Print ---------- */
@media print {
  .site-header nav, .callbar, .skip-link, .preview-banner, .public-view-note { display: none !important; }
  body { background: #fff; padding: 0 !important; }
  .section--alt { background: #fff; }
  .site-footer { background: #fff; color: #000; }
  .site-footer * { color: #000 !important; }  /* the footer's light-on-dark rules outrank the two lines around this one */
  .site-footer__bottom { border-top-color: #000; }
  a { color: #000; }
}