/* ==========================================================================
   v21.css — loaded by home-v21.html ONLY (after v20.css).
   Pavlina's 23 Jul "final thoughts" call: keep the new design, reassemble the
   homepage on the CURRENT zaraconsult.com section order and her verbatim copy.
   Spec: claude.ai artifact 695d00b8 (Part 1) + docs/calls/2026-07-23 transcript.
   ========================================================================== */

/* --- 0 · GLOBAL RHYTHM (review r4): section padding capped at 80px top/bottom
   everywhere (was clamping up to ~129-160 on desktop — too much air), and the
   logo marquee at exactly 40px top/bottom ------------------------------------- */
:root{--sec:80px}
.v16-logos{padding:40px 0}
/* The EU emblem and the programme mark ride in the strip too (Pavlina, 13 Oct: the programme
   wants them at the top of the site). EU rules want the emblem in colour, so these two are
   exempt from the strip's greyscale and fade, and taller, since each carries its own text.
   The band above the footer still carries the full funding statement. */
.v16-logos img.eu{height:clamp(56px,7vw,80px);filter:none;opacity:1}

/* --- 1 · HEADER — DELETED 2026-07-27. chrome.css §1 is the only copy. ---------
   🔴 THIS WAS A LIVE BUG, not dead weight. The 24 Jul refactor lifted these rules
   into chrome.css so the chrome could ship site-wide, but left the originals here,
   and the two files load in OPPOSITE ORDER on the two page types:
       home-v21.html        … v21.css  → /chrome.css     chrome.css wins
       services/*.html      … /chrome.css → /v21.css     v21.css wins
   Every selector was identical, so nothing showed — until chrome.css was edited
   and v21.css was not. Measured before the deletion, the same header rendered its
   utility row at 14.4px on the homepage and 16.8px on /services/payroll at
   1512px wide. Any future edit to the shared chrome would have drifted the same
   way, silently, on half the site.
   ⚠ Nothing was moved here, only removed: every rule (glass tint, the menu's
   fade-in, the utility/menu type ladder, the .nav-util divider, the centred
   nav-row, the always-on red CTA) already exists verbatim in chrome.css §1, which
   loads on all 41 pages. Edit the header THERE. */

/* --- 2 · HERO — her slogan is longer than the v19 line ---------------------- */
/* 🔴 2026-07-27 (George): THE FILM STARTS BELOW THE BAR, like every other page.
   The glass header is transparent by design, so whatever sits at y=0 shows through
   it. On the r7 service pages that is a flat navy band (.p21-hero is navy from 0
   and only its CONTENT is pushed down by --chrome-clear), which reads as one calm
   field behind the lockup. Here it was the moving film: v15's .hero-d pins the
   video at inset:0, so the top ~164px of footage ran behind the bar and the mark
   fought whatever frame happened to be playing.
   The fix keeps the hero's overall height and only moves the film's top edge to
   the bar's bottom, --chrome-h — the same variable the bar sizes itself from, so
   the two can never drift apart at any width or logo size.
   🔴 2026-07-28 (George): THE STRIP THAT IS LEFT BEHIND THE BAR IS NOW WHITE, not
   the navy this shipped with. Navy was chosen to match the r7 service pages, but
   the glass bar is a white tint at .40 over a blur, so navy under it does not read
   as navy — it renders a muted blue-grey (~#a8afc0), and against the white page
   below it reads as a dead grey band rather than a colour. White puts the lockup
   on the same ground as the rest of the page and the bar disappears into it.
   ⚠ It is a GRADIENT WITH A HARD STOP, not `background:#fff`, so the hero keeps a
   dark base under the film: the strip is white down to --chrome-h and navy below,
   which is what the h1's white type would fall back onto if both the film and its
   poster ever failed to paint. One stop, the same variable, so it cannot drift
   from the film's top edge either.
   ⚠ Scoped to v21.css on purpose: home.html (v19) and home-v20.html use .hero-d
   too and do NOT link this file, so the two parked homepages keep the old
   behaviour and stay usable as a before/after comparison.
   ⚠ THE HEIGHT MUST BE STATED, and `auto` is a trap here. A <video> is a REPLACED
   element, so for an absolutely positioned one `height:auto` resolves to the
   INTRINSIC ratio (1920x1080) and `bottom` is then ignored as over-constrained —
   it does not stretch between top and bottom the way a <div> would. Measured with
   auto: 219px tall on a 390px phone (hero 776, so two thirds of the hero lost its
   film) and 810px at 1440 (340px of overflow, silently cropped, so the film was
   framed on the wrong part of the shot). The explicit calc is the whole fix. */
.hero-d{background-color:var(--navy);
  background-image:linear-gradient(#fff 0, #fff var(--chrome-h), transparent var(--chrome-h))}
.hero-d video{top:var(--chrome-h);height:calc(100% - var(--chrome-h))}
/* 2026-07-28 (client, Pastel #33): white hero text unreadable on the light frames.
   v15's vertical scrim alone bottoms out at 2.0:1 behind the headline on the
   brightest frame (t=11.96s, measured). Three stacked layers, all brand navy:
   a light uniform veil (steadies contrast across frames), a bottom-left diagonal
   held to 78% so it still covers the headline's right end over the bright window,
   and v15's original vertical. Tuned to the MINIMUM that passes on that frame:
   p98 5.15:1 / worst 3.92:1 at 1440x609, 7.58:1 / 5.78:1 at 390. */
.hero-d::after{top:var(--chrome-h);background:
  linear-gradient(rgba(13,31,60,.22),rgba(13,31,60,.22)),
  linear-gradient(115deg,rgba(13,31,60,.58) 0%,rgba(13,31,60,.44) 45%,rgba(13,31,60,.24) 78%,rgba(13,31,60,0) 100%),
  linear-gradient(180deg,rgba(13,31,60,.10),rgba(10,22,46,.62))}
/* ⚠ AND THE HEADLINE HAS TO CLEAR THE BAR TOO — the r7 pages have always had this
   and the homepage never did. .hero-d is min-height:82vh with align-items:flex-end,
   so on a SHORT screen the block simply overflows upward: measured at the client's
   own 1440x609, the h1 starts at y=70 against a bar bottom of 152.8 — 82.8px of
   "Doing business in Bulgaria" behind the glass. That is pre-existing (identical
   before this round) but it was camouflaged by the film running under the bar, and
   a flat navy strip shows it plainly, so it is fixed here rather than left.
   ⚠ padding-top, NOT a bigger min-height: with box-sizing:border-box the 82vh
   min-height absorbs it, so this is a NO-OP wherever the hero already had room —
   1512x826, 2560x1284, 1280x720 and 390x844 all render byte-identical, the hero
   grows only on the short screens that were overlapping (609px: 499 → 582, still
   inside one screenful). Absolutely-positioned children resolve against the
   padding BOX, whose top edge padding does not move, so the film above stays
   pinned to --chrome-h and does not double up. */
.hero-d{padding-top:var(--chrome-h)}
/* 2026-09-29 (George: a 13" MacBook with the Dock showing must feel as good as a big screen).
   Measured at 1440x609 the headline sat flush on the bar (0px) and at 1280x640 14px under it.
   It now always has air above it, paid for from the padding below on short screens so the
   hero stays one screenful. Tall screens are untouched: min-height absorbs the padding.
   Phones too since 2026-10-06: the Bulgarian hero's longer copy left its headline 30px under the
   bar at 390 (English: 215, where min-height still absorbs this). */
.hero-d{padding-top:calc(var(--chrome-h) + clamp(1.5rem,4.5vh,3rem))}
@media (min-width:760px) and (max-height:700px){
  .hero-d .in{padding-bottom:3rem}
}

/* 2026-07-26 (client): new hero copy — headline, then the two-word promise in the
   display serif, then the reach line as a quiet uppercase rule. The three sizes
   step down hard on purpose so the block reads as one thought, not three decks. */
.hero-d h1{max-width:20ch}
.hero-d .v21-hero-sub{margin:1.05rem 0 0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.45rem,2.7vw,2.25rem);line-height:1.2;color:#fff}
.hero-d .v21-hero-trust{margin:1.15rem 0 0;font-size:clamp(.86rem,1.05vw,1rem);
  font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.88)}

/* review r1 #8 / r2: two ghost buttons from her site, generous size, air under the
   headline; the red CTA is the always-on header button.
   2026-07-26 (client): "Company in Bulgaria" removed — only "Why Bulgaria?" remains */
.hero-d .cta-row{margin-top:2.2rem;display:flex;gap:1rem;flex-wrap:wrap}
.hero-d .cta-row .btn{font-size:1.05rem;padding:1.05rem 2.1rem}
/* 2026-07-26 · the shorter headline made two long mobile lines where the old one made
   four short ones, so it ran under the fixed CONTACT tab (46px, right edge, ~58% down)
   — the copy now keeps a gutter clear of it. And with one button instead of two the
   row sits exactly on the AGA mark's line, so the whole block lifts to clear it. */
@media (max-width:759px){
  .hero-d .in{padding-right:3.4rem;padding-bottom:9rem}
}
/* r5: solid white, blue text — not transparent */
.v21-btn-ghost{background:#fff;color:var(--blue);border:1px solid #fff}
.v21-btn-ghost:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* review r1 #7/#41: the client's AGA wordmark, white on transparent, on the video, bigger */
.v21-aga-hero{position:absolute;right:clamp(1.2rem,3vw,2.6rem);bottom:clamp(1.2rem,3vw,2.6rem);
  z-index:3;filter:drop-shadow(0 2px 10px rgba(10,24,48,.5))}
.v21-aga-hero img{width:clamp(140px,12.5vw,180px);height:auto;display:block}   /* 2026-07-28: 180px cap, was ~293 */
@media (max-width:759px){
  .v21-aga-hero{right:1rem;bottom:6.4rem}   /* above the glass dock */
  .v21-aga-hero img{width:140px}
}

/* review r1 #2: WhatsApp glyph next to the number, cobalt like every utility glyph */
.nav-util .tu-wa{color:var(--blue)}

/* --- 3 · SERVICES — white section; review r1 #11/#13: DARK GREY folders with white
   text, the folder tab the same grey, white papers; heading + lede centered ------ */
.v21-inv{background:#fff}
.v21-inv h2.display{color:var(--blue);max-width:none;margin:0 auto .9rem;text-align:center}
.v21-inv .v21-svclede{max-width:62ch;color:var(--blue);font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.2rem);
  line-height:1.75;margin:0 auto clamp(2.2rem,4.5vw,3.4rem);text-align:center}
/* review r4/r5: ONE variable drives the folder body, the tab chip AND the ruled lines
   on the pop-up papers — the Zara dark navy (near-black read as too foreign) */
.v21-inv{--folder:var(--navy)}
/* 2026-09-29: two folders side by side need ~336px; on a 320px phone the pair ran 16px past
   the screen (tools/verify-inquiry.mjs caught it). One column there; 340 and up keep two. */
@media (max-width:339px){ .v21-inv .svcboxes{grid-template-columns:1fr} }
/* 2026-10-05: Bulgarian titles carry words wider than half a phone ("административно" is
   212px at 390, against a 163px column), so on the Bulgarian page the folders run one per row
   until the grid has room. */
@media (max-width:679px){ :lang(bg) .v21-inv .svcboxes{grid-template-columns:1fr} }
.v21-inv .sb{background:var(--folder)}
.v21-inv .sb::before{background:var(--folder);border-top-color:var(--folder)}
.v21-inv .sb h3{color:#fff}
.v21-inv .sb p{color:rgba(255,255,255,.88)}
.v21-inv .lm{color:#fff;border-color:rgba(255,255,255,.55)}
.v21-inv .sb:hover .lm{border-color:#fff}
.v21-inv .folder .papers b{background:#fff;
  border-color:color-mix(in srgb,var(--folder) 30%,transparent);
  background-image:repeating-linear-gradient(180deg,transparent 0 9px,
    color-mix(in srgb,var(--folder) 22%,transparent) 9px 10px)}

/* --- 4 · WHO WE ARE ---------------------------------------------------------
   2026-07-26 (client): her portrait moved down to Our vision ("снимката ми трябва
   да седи до посланието OUR VISION"), so this is a heading and one sentence. The
   measure is capped — left alone it would run the full 1200px container. */
.v21-whotxt,.v21-whotxt .par{max-width:none}   /* full column, like all body copy (George); was 58ch/62ch, half the row empty (2026-10-06) */
.v21-whotxt .display{margin-bottom:1.2rem}

/* --- 4b · ZARA CONSULT IN NUMBERS (review r1 #14/#16: own section, blue heading,
   stats in centered boxes, captions in body text — no small grey) --------------- */
.v21-numsec{background:#fff;padding-block:var(--sec)}
.v21-numbers .nh{color:var(--blue);margin:0 0 .9rem;text-align:center}   /* r4: centered */
/* 2026-09-28: her tagline under the heading (same voice as .v21-svclede); it now carries
   the gap to the grid that the heading used to. */
.v21-numbers .numlede{max-width:62ch;color:var(--blue);font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.2rem);
  line-height:1.75;margin:0 auto clamp(2rem,4vw,3rem);text-align:center}
.v21-numbers .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.9rem,1.8vw,1.3rem)}
@media (min-width:700px){ .v21-numbers .grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1100px){ .v21-numbers .grid{grid-template-columns:repeat(4,1fr)} }
.v21-numbers .stat{border:1px solid var(--line);background:#fff;text-align:center;
  padding:clamp(1.4rem,2.6vw,2rem) 1rem;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;gap:.6rem}
.v21-numbers .n{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,3.4vw,3.2rem);
  color:var(--blue);line-height:1;font-variant-numeric:tabular-nums}
.v21-numbers .c{font-size:1rem;color:var(--navy);margin:0;line-height:1.45}
/* 2026-10-06: "професионалисти" is ~125px of caption, more than half a phone below 380px, so
   the two Bulgarian columns went uneven (165 against 124 at 360) and ran 3px off a 320 screen. */
@media (max-width:379px){ :lang(bg) .v21-numbers .grid{grid-template-columns:1fr} }

/* --- 5 · WHY BULGARIA — her three paragraphs + the 10 Reasons list.
   Review r1 #17: the list in its own quiet tint box · #18: blue bullets.
   r5: text spans the full container like every other section ------------------- */
.v21-whypars .par{margin-bottom:1.1em;max-width:none}
.v21-whypars .par:last-child{margin-bottom:0}
.v21-reasons{margin-top:clamp(2.8rem,5.5vw,4rem);background:var(--tint);
  padding:clamp(1.8rem,3.6vw,2.8rem)}
.v21-reasons h3{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.7vw,2.15rem);
  color:var(--navy);line-height:1.15;max-width:26ch;margin:0 0 clamp(1.4rem,2.8vw,2rem)}
/* 2026-07-27 (client): the ten reasons are NUMBERED now, and they must read in the
   order her own site prints them — 1-5 down the left column, 6-10 down the right.
   ⚠ The strings were already in her order; what was wrong was the FLOW. A grid fills
   row by row, so the two-column layout laid them out 1,2 / 3,4 / 5,6 ACROSS the rows
   — invisible while every marker was the same square, and plainly wrong the moment
   they carry numbers. Naming the five rows and flowing by COLUMN is the fix. Single
   column below 760px, where the flow is moot. */
/* 2026-09-29 (13" pass): the tint box is white since the light blue was banned, so its side
   padding had become a 46px indent with no box to explain it, and the 26ch cap broke the
   headings into orphans ("for / Business"). The list and its headings sit on the page's edge
   and the headings run one line, like every other section head. */
.v21-reasons{padding-inline:0}
.v21-reasons h3{max-width:none;text-wrap:balance}
.v21-reasons ol{list-style:none;margin:0;padding:0;counter-reset:reason;
  display:grid;grid-template-columns:1fr;gap:.85rem 2.6rem}
@media (min-width:760px){
  .v21-reasons ol{grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);
    grid-auto-flow:column}
}
/* The numeral is a real grid column, not an absolutely-positioned marker, so the two
   fonts align on their BASELINE and a wrapped second line hangs under the text rather
   than under the number. Serif + tabular figures = the same numeral treatment as the
   In-Numbers band above (.v21-numbers .n), so 10 sits flush under 9. */
.v21-reasons li{display:grid;grid-template-columns:1.5rem 1fr;column-gap:.7rem;
  align-items:baseline;counter-increment:reason;
  font-weight:600;color:var(--blue);font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.4}
.v21-reasons li::before{content:counter(reason);font-family:var(--serif);font-weight:500;
  font-size:1.2em;line-height:1;color:var(--blue);text-align:right;
  font-variant-numeric:tabular-nums}
/* 2026-08-05: four of her ten end in a qualifying clause she wrote onto the same line
   ("…, with exemptions in qualifying cases"). At .86em and weight 300 the claim carries
   the row and the condition sits under it, and because it stays INLINE the comma and the
   space stay where she put them — the concatenated <li> is her line unchanged.
   ⚠ .rtxt is what makes that possible. The <li> is a GRID (numeral | text), so a bare
   <span class="qual"> beside the text node is not inline at all — it becomes a THIRD grid
   item and lands in the 1.5rem numeral column, one word per line. One wrapper span puts
   the whole line back into a single cell. Every item carries it, not just the four.
   ⚠ 2026-08-07: the last two lines of this comment used to sit OUTSIDE it. A slash opened
   them, a second comment-close ended them, and the parser therefore read them as the start
   of a selector and swallowed the .qual rule that followed. Her four qualifying clauses had
   been rendering at full weight and full size, on the homepage and on /why-bulgaria, ever
   since. ⚠ Never write a comment-closing sequence inside prose here; that is what caused it,
   and writing it a second time while documenting the first is what caught it.
   /why-bulgaria carries the same ten and loads this file, hence the second selector;
   svc.css names no .qual, so nothing there competes with it. */
.v21-reasons li .qual,.p21-list li .qual{font-weight:300;font-size:.86em;color:var(--muted)}
/* The Bulgarian homepage (2026-10-05): her sentence after the tenth line closes the list. */
.v21-reasons-note{margin:clamp(1.2rem,2.4vw,1.6rem) 0 0;max-width:none;
  font-weight:300;font-size:1.0625rem;line-height:1.7;color:var(--blue)}
/* /why-bulgaria's second ten opens with a sentence of hers between the heading and the
   list — the only .p21-list band on the site that carries one. Body type, and the
   heading gives up most of its own bottom margin so the two read as one unit.
   :has() outranks p21.css's .p21-list h2 on specificity, so the load order is moot. */
.p21-list .cf21-morelede{margin:0 0 clamp(1.4rem,2.6vw,2rem);
  font-family:var(--sans);font-weight:300;color:var(--blue);
  font-size:1.2rem;line-height:1.75;letter-spacing:.015em}
.p21-list h2:has(+ .cf21-morelede){margin-bottom:.9rem}

/* --- 5a · AND 10 MORE REASONS (client copy, 2026-08-05) ----------------------
   2026-08-07 (George): "do it the absolutely exact same way" as the ten above. So the
   block wears .v21-reasons itself and there is nothing here to keep in step with §5 — the
   box, the numerals, the two columns and the type all come from the rules above, and this
   section only adds what the first ten do not have: the continued numbering, her lede, and
   a sentence per item.
   ⚠ THE NUMBERS RUN 11-20, deliberately. Two adjacent lists both numbered 1-10 make "#3"
   ambiguous, and "and 10 more" reads as a continuation. `counter-reset:reason 10` is the
   whole mechanism; delete the 10 to restart at 1.
   The three history states of this section, in git: hover-revealed <details> rows at
   1359bfd, printed in two columns at 966400d, this at HEAD. */
.v21-more{margin-top:clamp(2.4rem,4.5vw,3.4rem)}
/* Wider rows than §5's .85rem while the sentences are in the flow — ten one-liners can sit
   that close, ten three-line items cannot. The hover branch below hands the gap back. */
.v21-more ol{counter-reset:reason 10;row-gap:1.5rem}
.v21-more-lede{margin:0 0 clamp(1.4rem,2.6vw,2rem);max-width:none;
  font-weight:300;font-size:1.0625rem;line-height:1.7;color:var(--blue)}
/* Her sentence. The <li> is a grid (numeral | text), so it needs naming into column 2 or
   it lands under the numeral. Printed is the BASE state, not the fallback: touch devices
   and every width below 760 get her copy in the flow, where it is readable without an
   interaction and indexable without one. */
.v21-more-tip{grid-column:2;display:block;margin-top:.35rem;
  font-weight:300;font-size:.95rem;line-height:1.6;color:var(--muted)}
/* Where the device really has a pointer, the same span lifts out of the flow into a panel.
   ⚠ It is absolutely positioned, and that is the entire point of it: the reveal removed on
   2026-08-06 pushed the list down under the cursor, which is what the client called
   irritating (Pastel 69) and what George objected to. Nothing below this moves. It opens on
   :focus-within as well as :hover, which is why the items carry tabindex in the markup.
   Opacity rather than visibility/display, so the sentence stays in the accessibility tree
   and is read out whether or not it is on screen. */
@media (hover:hover) and (pointer:fine) and (min-width:760px){
  .v21-more ol{row-gap:.85rem}
  .v21-more ol li{position:relative;cursor:help}
  /* The marker that says a line has more behind it (2026-08-07, George: "have kind of a
     question mark in the top right of each one, so we know … it's going to come up a
     pop-up"). Drawn by CSS rather than written into the markup, so it cannot be forgotten
     on an eleventh item and cannot be read out as the word "question mark" by a screen
     reader. It lives INSIDE this query on purpose: with no pointer there is no pop-up to
     promise, and the sentence is printed under the line instead. Raised on the baseline
     so it sits at the top right of the label, like a footnote marker. */
  .v21-more ol li>.rtxt::after{content:"?";display:inline-flex;align-items:center;
    justify-content:center;width:1.5em;height:1.5em;margin-left:.5em;vertical-align:.42em;
    border:1px solid var(--line);border-radius:50%;
    font-family:var(--sans);font-weight:500;font-size:.66em;line-height:1;
    color:var(--blue);opacity:.5;
    transition:opacity .18s ease,border-color .18s ease,background-color .18s ease}
  .v21-more ol li:hover>.rtxt::after,
  .v21-more ol li:focus-within>.rtxt::after{opacity:1;border-color:var(--blue);
    background:var(--blue);color:#fff}
  .v21-more-tip{position:absolute;z-index:6;top:calc(100% + .5rem);left:0;right:0;
    margin:0;padding:.95rem 1.15rem;background:#fff;border:1px solid var(--line);
    box-shadow:0 12px 34px rgba(10,24,48,.14);
    opacity:0;transform:translateY(-.3rem);pointer-events:none;
    transition:opacity .18s ease,transform .18s ease}
  .v21-more ol li:hover>.v21-more-tip,
  .v21-more ol li:focus-within>.v21-more-tip{opacity:1;transform:none}
  /* The last row opens upward instead, so item 15 and item 20 do not drop their panel
     over the tax table below. :nth-child works on the source order, and the source order
     is her order: 5 and 10 are the last of each column. */
  .v21-more ol li:nth-child(5)>.v21-more-tip,
  .v21-more ol li:nth-child(10)>.v21-more-tip{top:auto;bottom:calc(100% + .5rem);
    transform:translateY(.3rem)}
  .v21-more ol li:nth-child(5):hover>.v21-more-tip,
  .v21-more ol li:nth-child(10):hover>.v21-more-tip,
  .v21-more ol li:nth-child(5):focus-within>.v21-more-tip,
  .v21-more ol li:nth-child(10):focus-within>.v21-more-tip{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .v21-more-tip{transition:none;transform:none}
  .v21-more ol li>.rtxt::after{transition:none}
}

/* review r1 #19/#20/#21 + r2 sweep: no faint grey ANYWHERE in the compare zone */
.v20-notlisted{color:var(--navy)}
.v20-notlisted a{color:var(--navy)}
.cmpzone .cnote{color:var(--navy)}
.ccard .cc-keep{color:var(--navy)}
.cmpzone .ccard .cc-h,.cmpzone .ccard .cc-cap{color:var(--navy)}
.cmpzone .ccard.win .cc-h,.cmpzone .ccard.win .cc-cap,
.cmpzone .ccard.win .cc-keep{color:#fff}
/* The "Lower tax" badge sits in the Bulgaria card's top right corner. Below ~900px the card's
   top padding shrank under the badge's height and the badge covered the country name (on a
   phone "BULGAR▮", 2026-10-06). Both cards keep the desktop value, so their figures stay level. */
.cmpzone .ccard{padding-top:2.6rem}
/* below 380px the Bulgarian badge ("По-ниски данъци") wraps to two lines */
@media (max-width:379px){ :lang(bg) .cmpzone .ccard{padding-top:3.6rem} }
.cmpzone .cmp-sub{color:var(--navy)}
.cmpzone .ctable thead th{color:var(--navy)}

/* --- 5b · COMPLIANCE (review r1 #23/#24) ------------------------------------ */
/* carousel arrows (r4): the navbar's transparent-glass look — tint + backdrop blur,
   blue chevron. ONE rule covers BOTH sliders (cities + testimonials). */
.v20-carousel .v20-arrow,.v21-tmo-car .v20-arrow{width:44px;height:44px;
  background:rgba(255,255,255,.45);color:var(--blue);opacity:1;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 4px 14px rgba(10,24,48,.22)}
.v20-carousel .v20-arrow:hover,.v20-carousel .v20-arrow:focus-visible,
.v21-tmo-car .v20-arrow:hover,.v21-tmo-car .v20-arrow:focus-visible{background:rgba(255,255,255,.68)}
.v20-carousel .v20-arrow svg,.v21-tmo-car .v20-arrow svg{filter:none}
.v20-carousel .v20-prev{left:.6rem}
.v20-carousel .v20-next{right:.6rem}
/* "Built to last" — white, no grey */
.v16-tax .qline{color:#fff}

/* --- 6 · VISION + DIPLOMAS (review r1 #25/#26/#29: white section, image 50% /
   text 50%, text solid navy) -------------------------------------------------- */
.v17-creds{background:#fff}
.v17-creds .replay-hint{display:none}   /* review r1 #28: no ↻ chip on the certs clip */
/* 2026-07-26 (client): her portrait comes back into this section, beside the words
   — "снимката ми трябва да седи до посланието OUR VISION". It keeps the uncropped
   vertical framing r4 gave it in Who-we-are (no 4/3 crop), and the TYPE stays the
   solo treatment George tuned over seven rounds: body sans in cobalt, not the
   serif this block originally shipped with. The old .v21-vision-solo modifier is
   gone — with one vision variant on the page its rules simply live here now. */
.v21-vision{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.8rem);align-items:center;
  margin:0 0 clamp(3rem,6vw,4.5rem)}
@media (min-width:900px){ .v21-vision{grid-template-columns:auto 1fr;gap:clamp(2.6rem,5vw,4.5rem)} }
.v21-vision .vimg{width:100%;max-width:360px;margin-inline:auto}
@media (min-width:900px){ .v21-vision .vimg{width:clamp(280px,30vw,400px);max-width:none;margin:0} }
.v21-vision .vimg img{width:100%;height:auto;display:block;background:#0a1830}
.v21-vision .display{margin:0 0 clamp(1.4rem,2.8vw,2rem)}
.v21-vision .vq{font-family:var(--sans);font-weight:400;font-size:clamp(1.05rem,1.5vw,1.2rem);
  line-height:1.75;color:var(--blue);max-width:62ch;margin:0 0 1.1em}
.v21-vision .vq:last-of-type{margin-bottom:0}
.v21-vision figcaption{margin-top:1.3rem;font-size:.9rem;color:var(--navy);letter-spacing:.03em}
.v21-vision figcaption b{color:var(--blue)}

/* --- 7 · TEAM (review r1 #31/#32: white text on the navy, no faded greys) ---- */
.v18-team .teamhead .tlede,.v16-team .tlede{color:#fff}
.v18-team .tcard .brole{color:#fff}
.v18-team .tcard dt{color:#fff}
.v18-team .tcard dd{color:#fff}
.v18-team .tcard .vision{color:#fff}

/* --- 8 · TESTIMONIALS (review r1 #34: auto-slider with the image-slider arrows,
   more compact · r5: INVERTED — white section, cobalt cards, white text) ------- */
.v16-tmo{padding-block:clamp(3rem,6vw,4.5rem);background:#F4F5F7}   /* r7: soft grey so the white cards read */
/* r6: white cards with a soft shadow (the cobalt cards read wrong), centered headline */
.v16-tmo .display{color:var(--blue);text-align:center;margin-inline:auto}
/* the team heading is three short sentences; room for two lines that break between them */
.v18-team .teamhead h2{max-width:26ch;text-wrap:balance}
.v16-tmo .pcq{background:#fff;box-shadow:0 12px 34px rgba(10,24,48,.14)}
.v16-tmo .pcq .q{color:var(--blue)}
/* The Bulgarian homepage (2026-10-05): Bulgarian quotation marks, and the longer heading keeps
   to one line where the 22ch cap would leave "нас" on its own. */
:lang(bg) .pcq .q::before{content:"„"} :lang(bg) .pcq .q::after{content:"“"}
:lang(bg) .proofcards-sec h2{max-width:none;text-wrap:balance}
.v16-tmo .pcq .who{color:var(--navy)}
.v16-tmo .pcq .who b{color:var(--blue)}
.v21-tmo-car{position:relative;margin-top:clamp(1.4rem,2.8vw,2rem);padding-inline:clamp(2.6rem,4vw,3.4rem)}
/* clip sideways only: hidden clipped the cards' shadows top and bottom, which left a flat grey
   bar in every gap between cards (2026-10-06) */
.v21-tmo-view{overflow-x:clip;overflow-y:visible}
.v16-tmo .v21-tmo-track{display:flex;grid-auto-flow:unset;grid-auto-columns:unset;
  gap:clamp(.9rem,1.8vw,1.3rem);overflow:visible;transition:transform .5s ease;
  scroll-snap-type:none;padding:0}
.v21-tmo-track .pcq{flex:0 0 100%}
@media (min-width:700px){ .v21-tmo-track .pcq{flex:0 0 calc((100% - clamp(.9rem,1.8vw,1.3rem))/2)} }
@media (min-width:1020px){ .v21-tmo-track .pcq{flex:0 0 calc((100% - 2*clamp(.9rem,1.8vw,1.3rem))/3)} }
.v21-tmo-car .v20-prev{left:-.3rem}
.v21-tmo-car .v20-next{right:-.3rem}
@media (prefers-reduced-motion:reduce){ .v16-tmo .v21-tmo-track{transition:none} }

/* --- 9 · FAQ (review r1 #35: white, not cream) ------------------------------- */
.v16-faq{background:#fff}

/* --- POLISH (r7): quiet fade-up reveals on scroll. JS adds .v21-rev (so no-JS
   pages stay fully visible); reduced-motion never animates. Deliberately subtle:
   14px rise, 0.55s, tiny sibling stagger via --rd. ---------------------------- */
@media (prefers-reduced-motion:no-preference){
  .v21-rev{opacity:0;transform:translateY(14px);
    transition:opacity .55s ease,transform .55s ease;transition-delay:var(--rd,0s)}
  .v21-rev.is-in{opacity:1;transform:none;transition-delay:var(--rd,0s)}
}

/* --- 10 · FORM (review r1 #36 + r6: the lede is BODY text — same font, weight,
   size and cobalt color as body copy everywhere else on the page) -------------- */
.v17form .formlede{font-family:var(--sans);font-weight:400;color:var(--blue);
  font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.75}
.v17form .fld label{color:var(--navy);font-size:.85rem}
.v17form .fld input::placeholder,.v17form .fld textarea::placeholder{color:#55617e}
.madlibs .below .consent{color:var(--navy)}

/* ============================================================================================
   11 · TAX COMPARISON TABLE (2026-07-26) — rebuilt to the client's "FINAL Comparative Tax
   Table Structure for Website" document. Scoped to .cmpzone throughout, so nothing here can
   reach the parked home-v20 / home.html, which keep the old cards renderer and lab.css alone.

   Her structure: picker + three supporting lines · the two-card summary (she asked to KEEP the
   current design, so the cards are untouched — only their detail list moved out) · then one
   table carrying her three named groups. One table rather than her three separate ones: the
   columns, and the navy Bulgaria spine, then stay aligned the whole way down instead of the
   header repeating three times.
   ------------------------------------------------------------------------------------------- */

/* --- the picker block ------------------------------------------------------ */
.cmpzone .cmp-choose{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,2.7vw,2.15rem);color:var(--navy);line-height:1.15;margin:0}
.cmpzone .cmp-pickrow{margin:clamp(.9rem,1.8vw,1.3rem) 0 0}
.cmpzone .cmp-with{margin:.9rem 0 0;color:var(--navy);
  font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.6}
/* v21.css already sets .v20-notlisted navy, but v20.css scopes it ".v16-why2 .v20-notlisted"
   and wins on specificity, so the line was still rendering muted grey — against the r1 rule
   of no faint grey anywhere in this zone. Match the specificity to settle it. */
.cmpzone .v20-notlisted{margin-top:.55rem;color:var(--navy);font-size:.92rem}
.cmpzone .cmp-scenario{margin:clamp(1.1rem,2vw,1.5rem) 0 0;color:var(--navy);
  font-size:.92rem;line-height:1.6;max-width:74ch}

/* The <select> keeps the serif underlined treatment it had in the old headline, but it is a
   standalone control now, so it sets its own size instead of inheriting the h2's. */
.cmpzone .bigsel{font-size:clamp(1.35rem,2.4vw,1.9rem)}

/* --- the render ------------------------------------------------------------- */
/* .cmp-body animates via max-height and lab.css caps it at 2800px. The summary cards plus a
   14-row table pass that on a narrow screen, and the overflow would be silently clipped. */
.cmpzone .cmp-body.open{max-height:4200px}

.cmpzone .ctwrap{margin-top:clamp(1.8rem,3.4vw,2.6rem)}

/* Two footnotes now instead of one. lab.css caps .cnote at 66ch, which against a full-width
   table stranded the last word on its own line. */
.cmpzone .cnote{max-width:80ch}
.cmpzone .cnote + .cnote{margin-top:.7rem}
/* the FX line rides inside .cmp-body, so it sits directly under the table it qualifies */
.cmpzone .cnote-fx{margin-top:1rem}

/* Wider label column than the stock .ctable: her row labels run long, and the values
   ("10% flat", "€525,839", "Yes · Yes") are all short. */
.ctable-r8 col.c-ml{width:46%}

/* Row labels are <th scope="row"> for screen readers; strip the browser's bold + centring,
   and keep them navy — George's r1 rule: no faint grey anywhere in the compare zone. */
.cmpzone .ctable-r8 tbody th.ml{font-weight:400;color:var(--navy);text-align:left}

/* thead: lab.css paints .bg navy, but .cmpzone .ctable thead th (v21, more specific) repaints
   every header cell navy TEXT — which would put navy on navy and hide "Bulgaria" completely. */
.cmpzone .ctable-r8 thead th.bg{color:#fff}
.cmpzone .ctable-r8 thead td{border-bottom:1.5px solid var(--line)}

/* group bands — her three section names */
.cmpzone .ctable-r8 tr.cgh th{background:var(--tint);color:var(--navy);font-weight:500;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  padding-top:1.15rem;padding-bottom:1.15rem;border-bottom:1px solid var(--line)}

/* her "Highlighted result" row — the net the owner actually keeps */
.cmpzone .ctable-r8 tr.big th.ml{font-weight:500;font-size:1rem}
.cmpzone .ctable-r8 tr.big th.ml,.cmpzone .ctable-r8 tr.big td.them{background:var(--tint)}
.cmpzone .ctable-r8 tr.big td.bg{font-weight:600}

@media (max-width:640px){
  /* Labels this long cannot share a 320px row with two values, so the label takes its own
     line and the two figures sit under it — the same stacking the cards use on mobile. */
  .cmpzone .ctable-r8,.cmpzone .ctable-r8 tbody,.cmpzone .ctable-r8 thead,
  .cmpzone .ctable-r8 tr,.cmpzone .ctable-r8 th,.cmpzone .ctable-r8 td{display:block}
  .cmpzone .ctable-r8 thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .cmpzone .ctable-r8 tr.cgh th{padding:1rem .9rem}
  .cmpzone .ctable-r8 tbody tr:not(.cgh){display:grid;grid-template-columns:1fr 1fr;
    gap:0 .5rem;border-bottom:1px solid var(--line);padding:.75rem 0 0}
  .cmpzone .ctable-r8 tbody tr:not(.cgh) th.ml{grid-column:1 / -1;border-bottom:0;
    padding:0 .9rem .5rem;font-size:.88rem}
  .cmpzone .ctable-r8 tbody td{border-bottom:0;padding:.5rem .9rem;font-size:.95rem}
  /* the value cells carry their own column label, since the <thead> is gone */
  .cmpzone .ctable-r8 tbody td::before{content:attr(data-c);display:block;
    font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;opacity:.75;margin-bottom:.15rem}
  .cmpzone .ctable-r8 tr.big th.ml{font-size:.92rem}
  .cmpzone .ctable-r8 tr.big td{font-size:1.02rem}
}

/* ============================================================================================
   12 · TOTAL EFFECTIVE TAX RATE — the ranked chart (2026-07-27)

   The client's own illustration, rebuilt in markup. Scoped to .tecchart throughout, so nothing
   here reaches the parked home-v20 / home.html. Rows are injected by compare-v21.js.

   ONE SCALE DRIVES EVERYTHING. --valw is the room kept at the right of each track for the value
   that trails the bar; bars are sized against (100% - --valw), and the gridlines and the axis
   labels are inset by exactly the same amount. Change --valw alone and bar, rule and tick all
   stay in register. A bar can therefore never push its own figure off the row, at any width.

   Her chart is charcoal-on-cream with grey type. This one is the site's own palette instead:
   navy bars on --tint, red only on the Bulgaria bar (which is the site's rare-accent rule doing
   exactly what it is for), and NO GREY ANYWHERE — George's standing rule for the compare zone
   covers this block too, so both of her sub-lines are navy, not the grey of her JPG.
   -------------------------------------------------------------------------------------------- */
.tecchart{--lab:9.75rem; --valw:3.5rem; --gap:.85rem; --bar:.95rem;
  margin:clamp(2.6rem,5vw,4rem) 0 0;padding:clamp(1.4rem,3vw,2.4rem);background:var(--tint)}

.tecchart .tec-head{margin:0 0 clamp(1.4rem,2.6vw,2rem)}
/* Same serif treatment as "Choose your country" above it, so the chart reads as the last part
   of the calculator rather than a chart pasted in from somewhere else. */
.tecchart .tec-title{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.5rem,2.7vw,2.15rem);color:var(--navy);line-height:1.15;margin:0}
.tecchart .tec-sub{margin:.5rem 0 0;color:var(--navy);font-size:.92rem;line-height:1.6}
.tecchart .tec-foot{margin:clamp(1.1rem,2vw,1.5rem) 0 0;color:var(--navy);
  font-size:.85rem;line-height:1.6;max-width:88ch}

.tecchart .tec-rows{position:relative}

/* The rules sit behind the bars and span the bar scale only — same left inset as the tracks,
   same right inset as the bars' reserved value room. */
.tecchart .tec-grid{position:absolute;top:0;bottom:0;
  left:calc(var(--lab) + var(--gap));right:var(--valw);pointer-events:none}
.tecchart .tec-grid i{position:absolute;top:0;bottom:0;width:1px;background:var(--line);
  left:calc(var(--x) * 100% / var(--n))}

.tecchart .tec-row{position:relative;display:grid;grid-template-columns:var(--lab) 1fr;
  gap:var(--gap);align-items:center;min-height:1.75rem}
.tecchart .tec-name{text-align:right;color:var(--navy);font-size:.85rem;line-height:1.2}
.tecchart .tec-track{position:relative;display:flex;align-items:center;gap:.5rem;min-width:0}
.tecchart .tec-bar{flex:none;height:var(--bar);min-width:2px;background:var(--navy);
  width:calc(var(--p) * (100% - var(--valw)))}
.tecchart .tec-val{flex:none;color:var(--navy);font-size:.82rem;line-height:1;white-space:nowrap}

/* Bulgaria — the one red in the block. */
.tecchart .tec-row.is-bg .tec-bar{background:var(--red)}
.tecchart .tec-row.is-bg .tec-name,
.tecchart .tec-row.is-bg .tec-val{color:var(--red);font-weight:500}

/* The country currently in the picker above. Cobalt, so it reads as "this is you" without
   competing with the red. :not(.is-bg) keeps Bulgaria red whatever the picker does — it cannot
   be selected today, but the rule says so rather than leaving it to source order. */
.tecchart .tec-row.is-sel:not(.is-bg) .tec-bar{background:var(--blue)}
.tecchart .tec-row.is-sel:not(.is-bg) .tec-name,
.tecchart .tec-row.is-sel:not(.is-bg) .tec-val{color:var(--blue);font-weight:400}

.tecchart .tec-axis{position:relative;height:1.5rem;margin-top:.5rem;
  margin-left:calc(var(--lab) + var(--gap));margin-right:var(--valw)}
.tecchart .tec-axis span{position:absolute;top:.4rem;color:var(--navy);font-size:.76rem;
  left:calc(var(--x) * 100% / var(--n));transform:translateX(-50%)}

/* The bars grow in with the section's own fade-up. Guarded on .v21-rev, which only exists when
   the reveal JS ran — with JS off, or reduced motion, the bars are simply drawn. */
@media (prefers-reduced-motion:no-preference){
  .tecchart.v21-rev .tec-bar{transform:scaleX(0);transform-origin:left center;
    transition:transform .8s cubic-bezier(.22,.61,.36,1)}
  .tecchart.v21-rev.is-in .tec-bar{transform:none;transition-delay:calc(var(--i,0) * 16ms)}
}

/* Narrow: the label column and the type step down together, and the bars thin out so 29 rows
   still fit one screen-and-a-bit instead of becoming a scroll of their own. */
@media (max-width:759px){
  .tecchart{--lab:5.6rem; --valw:2.9rem; --gap:.5rem; --bar:.7rem}
  .tecchart .tec-row{min-height:1.35rem}
  .tecchart .tec-name{font-size:.72rem}
  .tecchart .tec-val{font-size:.72rem}
  .tecchart .tec-axis span{font-size:.68rem}
}

/* Under ~480px the scale is too short to carry seven tick labels — they run into each other
   and print as one smear. Drop to every second tick; the rules themselves all stay. */
@media (max-width:479px){
  .tecchart .tec-axis.can-thin span.alt{display:none}
}

/* ============================================================================================
   13 · THE TOP TEN — the shortlist card, since 2026-07-28 inside the compliance band

   Built on George's mock 2026-07-27 under the ranked chart; MOVED 2026-07-28, on the client's
   own mock, into the navy cities band below, where it takes the place of that section's copy.
   Scoped to .tec10 throughout, so nothing here reaches the parked home-v20 / home.html. The
   circle and the nine cards are injected by compare-v21.js from her workbook; only the three
   head lines are markup.

   🔴 EVERY BREAKPOINT IN THIS BLOCK IS A CONTAINER QUERY, and after the move that is the whole
   point rather than a flourish. The card no longer spans the page — it lives in one half of a
   .split, so at a 1024px viewport it is ~450px wide and at 768px, where the split has stacked,
   it is ~720px. A viewport breakpoint gets that exactly backwards: the ORIGINAL @media rules
   went two-column at 860px, which is a width where this column is now 400px wide and the nine
   cards would have been shredded. Everything therefore answers to `cqw` and to the card's own
   inline size, which is the only measurement that means the same thing in both homes.

   🔴 IT READS ON A DARK GROUND — it was the one block in the compare zone that did, and after
   the move the band it landed in is navy anyway. The consequence is the same either way: a real
   palette problem, solved rather than fudged —
   --red is #990000, a deep maroon chosen to carry CTAs on WHITE. On navy it is two dark
   colours touching and the circle disappears. So the disc is the SAME BRAND RED lightened
   against white until it survives the navy — derived with color-mix rather than picked by eye,
   which is why it is still the brand colour and not a new one. It resolves to #c06161.
   ⚠ THE FALLBACK IS AN @supports BLOCK, NOT TWO DECLARATIONS, and the difference is not
   pedantry. Custom properties accept almost any token sequence at parse time, so the usual
   "declare the simple value, then override it" trick does NOT work here: a browser without
   color-mix would keep the second declaration, fail it at computed-value time, and paint the
   disc TRANSPARENT rather than fall back to the hex. The plain hex is the base value and
   color-mix only overrides it where it is actually understood.
   ⚠ Red still means Bulgaria here and nowhere else, exactly as in the chart above.
   ⚠ NO GREY, per George's standing compare-zone rule: every soft line is white at reduced
   alpha over navy, never a grey ink.
   -------------------------------------------------------------------------------------------- */
/* ⚠ GEORGE OVERRODE THE LIGHTENING, 2026-08-03: "the EU tax ranking should be the same
   colour as Talk to an Expert — that section, the red itself should be the same colour."
   So --r10 is now the brand red itself, #990000, not the lightened #c06161 the note
   above describes. Keep that note: it records WHY the lightening existed, and the
   trade-off is now live — #990000 on the navy card is 1.8:1, so the highlighted row
   reads as a dark block rather than a bright one. The white type inside it is
   unaffected (8.9:1 on #990000), which is why this is a look call and not a
   legibility one. Revert by deleting the two lines below. */
.tec10{--r10:#c06161;
  container-type:inline-size;                 /* everything below measures THIS, not the window */
  margin:0;padding:clamp(1.6rem,3.4vw,2.8rem);background:var(--navy);color:#fff}
@supports (color:color-mix(in srgb,#000 50%,#fff)){
  .tec10{--r10:color-mix(in srgb, var(--red) 62%, #fff)}   /* tracks --red if it ever moves */
}
/* The ground and the padding above are kept for the day it is lifted back out onto a white
   page, and immediately cancelled in the band it actually lives in — which is navy already and
   pads its own columns. */
.v16-tax .tec10{padding:0;background:none}
/* The copy column's stock padding is tuned for 46ch of prose (5.5vw ≈ 79px a side at 1440) and
   would cost this card 160px of the width the nine cards are fighting for. */
.v16-tax .tec10-col{padding:clamp(1.5rem,3vw,3rem);gap:0}
/* ⚠ AND A CEILING, because this column has no text in it to set one. Half of a 2560 screen is
   1184px of card: the nine cards go to 440px each to hold a country name and one figure, which
   reads as nine empty boxes. 50rem leaves the card the ~44rem it already has at 1440 — the
   screen the design is judged on — so every laptop is untouched and only the 27" stops
   stretching.
   🔴 IT IS A `width`, NOT A `max-width`, AND IT IS ON THE COLUMN — both halves matter, and both
   were measured rather than reasoned. An element with container-type:inline-size is forbidden
   from sizing to its own content, so ANY shrink-to-fit link in the chain above it resolves the
   card to ZERO: `max-width`+`margin-inline:auto` ON THE CARD (auto cross-axis margins size a
   flex child to content) and `justify-self:center` ON THE COLUMN (any non-stretch alignment
   sizes a grid item to content) each rendered it 0x1264, with all nine rows collapsed to 128px.
   A definite width does not ask the content anything, so it survives. A container can be given
   a width; it can never shrink-wrap one. */
.v16-tax .tec10-col{width:min(100%,50rem);margin-inline:auto}

.tec10-head{margin:0 0 clamp(1.2rem,3.5cqw,1.9rem)}
.tec10-eyebrow{margin:0;color:var(--r10);font-size:.78rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.4}
/* Same serif as "Choose your country" and the chart title, so both blocks read as one
   instrument rather than two components that happen to follow each other. */
.tec10-title{font-family:var(--serif);font-weight:300;margin:.5rem 0 0;
  font-size:clamp(1.25rem,4.6cqw,1.8rem);color:#fff;line-height:1.15}
.tec10-sub{margin:.4rem 0 0;color:rgba(255,255,255,.82);font-size:.88rem;line-height:1.6}

/* The rule between the hero figure and the list is the mock's, and it only exists side by side
   — stacked, the colour change does the separating on its own.
   ⚠ 520px is measured, not chosen: below it the list's share of the row drops under ~320px and
   the two card columns can no longer hold "Lithuania" on one line. */
.tec10-body{display:grid;gap:clamp(1.4rem,4cqw,2.2rem)}
@container (min-width:520px){
  .tec10-body{grid-template-columns:minmax(0,clamp(10rem,34cqw,16rem)) minmax(0,1fr);
    gap:clamp(1.2rem,3cqw,2.6rem);align-items:center}
  .tec10-lead{border-right:1px solid rgba(255,255,255,.20);
    padding-right:clamp(1.2rem,3cqw,2.6rem)}
  .tec10-disc{width:min(100%,15rem)}
}

.tec10-lead{display:flex;flex-direction:column;align-items:center;gap:1rem}
/* A disc, not a pie: aspect-ratio keeps it perfectly round at every width, and the ring is a
   spread shadow so it costs no extra element and can never fall out of register. */
.tec10-disc{width:min(100%,clamp(11rem,80cqw,15rem));aspect-ratio:1;border-radius:50%;
  background:var(--r10);box-shadow:0 0 0 clamp(.6rem,2cqw,1.1rem) rgba(255,255,255,.09);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.3rem;text-align:center;padding:1rem}
.tec10-badge{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.92);line-height:1.3}
.tec10-country{font-size:clamp(1rem,3.4cqw,1.25rem);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.2;color:#fff}
/* ⚠ NO tabular-nums on these figures, and that is a fix, not an omission. Unica77's tabular
   set gives the DECIMAL POINT a full digit slot, so "14.5%" sets as "14 . 5%" — at 3.6rem it
   reads as broken type. Tabular figures earn their keep when digits stack in a column; here
   every figure sits alone under its own country, so there is nothing to align and the
   proportional set is simply correct. The chart above has the same rule for the same reason. */
.tec10-big{font-size:clamp(2.2rem,11cqw,3rem);font-weight:700;line-height:1;color:#fff}
/* max-width in min() with 100%: side by side this caption sits in a ~215px column, and a bare
   22rem would size the column instead of wrapping inside it. */
.tec10-leadcap{margin:0;max-width:min(100%,22rem);text-align:center;
  color:rgba(255,255,255,.82);font-size:.82rem;line-height:1.5}

/* list-style:none because the rank is a real element we style; `start="2"` on the <ol> keeps
   the semantics honest for anything reading the markup instead of looking at it. */
.tec10-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
/* 🔴 COLUMN FLOW, NOT ROW FLOW — the same trap the numbered 10 Reasons list fell into. A
   two-column grid on its default row flow lays the ranks out 2,3 / 4,5 / 6,7 ACROSS, so the
   eye reading down the left column gets 2,4,6,8,10. Invisible on an unnumbered list, plainly
   wrong the moment the items carry ranks. Five explicit rows + column flow puts 2-6 down the
   left and 7-10 down the right, which is how a ranking is read.
   ⚠ The 5 is tied to the item count: the block renders the top ten minus the lead card, so
   there are always exactly 9. tools/shot-tec10.mjs asserts both the count and the visual
   order, because reading this CSS cannot tell you it broke. */
/* ⚠ 356px, and it has to sit BELOW the body's 520: between the two the disc is stacked on top
   and the list has the whole card to itself, which is exactly where nine single-file rows would
   run the band past 1000px tall. Under 356 (a phone) it goes back to one column. */
@container (min-width:356px){
  .tec10-list{grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);
    grid-auto-flow:column;gap:.7rem .8rem}
}

.tec10-item{display:flex;align-items:center;gap:.85rem;
  padding:.7rem .95rem;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);border-radius:6px}
.tec10-rank{flex:none;width:1.85rem;height:1.85rem;border-radius:50%;
  display:grid;place-items:center;background:#fff;color:var(--navy);
  font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums}
.tec10-c{display:flex;flex-direction:column;min-width:0}
.tec10-name{font-size:.95rem;font-weight:700;line-height:1.3;color:#fff}
.tec10-val{font-size:.88rem;line-height:1.4;color:rgba(255,255,255,.82)}

/* Bulgaria in the LIST, for the day her workbook stops putting it first. Today it is the disc,
   so this rule is dormant — and that is the point of having it. */
.tec10-item.is-bg{background:var(--r10);border-color:var(--r10)}
.tec10-item.is-bg .tec10-rank{color:var(--r10)}

/* The picker marks its country here too, in the same cobalt the chart uses for a selection. */
.tec10-item.is-sel:not(.is-bg){background:var(--blue);border-color:var(--blue)}
.tec10-item.is-sel:not(.is-bg) .tec10-rank{color:var(--blue)}

/* Two columns inside a half-page column is the tightest the cards ever get: at a 1280 viewport
   the list runs ~340px, so a card is ~165px and "Lithuania" has ~90px to land in. The step-down
   below buys that back — and it is keyed to the CARD's width, so it also fires on a phone, where
   the list is one column but the whole page is narrow. */
@container (max-width:620px){
  .tec10-item{padding:.62rem .8rem;gap:.7rem}
  .tec10-rank{width:1.65rem;height:1.65rem;font-size:.76rem}
  .tec10-name{font-size:.9rem}
  .tec10-val{font-size:.84rem}
}

/* ===================== HOW-IT-WORKS TIMELINE · header clearance ==================
   The section was restored to the homepage on 2026-08-03 (the client asked where the
   "horizontal rectangles" had gone; it was cut on 2026-07-23 with the v21 rebuild).
   v20.css pins the sticky panel at top:0 with a flat 110px of top padding, which
   cleared v20's single-row bar. v21's chrome is the TWO-ROW header, ~190px, so the
   heading sat behind it — worst on the client's 609px-tall screen, where it swallowed
   the first line outright. Pin the panel BELOW the bar rather than padding past it,
   and measure the bar instead of guessing: --chrome-h is chrome.css's own figure.
   The scrub still resolves to exactly p=1 at unstick, so the JS needed no change.
   Scope: .v20-tl exists on this page and on home-v20.html, and home-v20.html does not
   load v21.css — so this rule reaches home-v21 and nothing else. */
@media (min-width:980px){
  .v20-tl .v20-tl-stick{
    top:var(--chrome-h);
    height:calc(100vh - var(--chrome-h));
    padding-block:clamp(1.2rem,3vh,2.4rem)}
}

/* Short screens: the client reviews at 1440x609, where the sticky panel overflowed by
   59px — the last row of cards ran off the bottom. Measured, not guessed: h2 180px
   (three lines) + 54px margin + 252px of track against 428px of room. The heading is
   the cheap 60px: it only wrapped to three lines because .display caps its measure, so
   on a short screen let it use the width it already has and tighten the gap under it.
   Type size is untouched. */
/* George, 2026-08-03: "you can widen this a bit, so Bulgaria is not on the third row."
   .display's own measure resolves to ~564px here, which broke the line as
   "From first call to a / running company in / Bulgaria." — one word alone on line 3.
   22ch resolves to ~689px and lands it in TWO lines at every width from 1920 down to
   the point the section goes vertical. This was already the short-screen value; it is
   now the value everywhere, and the media query below keeps only the tighter gap that
   the 609px-tall screen needs. */
.v20-tl h2{max-width:22ch}
@media (min-width:980px) and (max-height:780px){
  .v20-tl h2{margin-bottom:clamp(1.1rem,3vh,1.9rem)}
}
/* The Bulgarian homepage (2026-10-05). Her step texts run about twice the English length, so
   the pinned panel cannot hold them on a short screen at any size on the type ladder. The
   heading takes the full width (two lines, not three), and below 780px of height the timeline
   is not pinned: it renders static and fully drawn, as on mobile and under reduced motion.
   The page's own scrub script stops at the same height. */
:lang(bg) .v20-tl h2{max-width:30ch;text-wrap:balance}   /* two lines; uncapped, line one ran the full 1150px (2026-10-06) */
@media (min-width:980px) and (max-height:779px){
  :lang(bg) .v20-tl .v20-tl-scroll{height:auto}
  :lang(bg) .v20-tl .v20-tl-stick{position:static;height:auto;padding-block:clamp(2.5rem,6vw,4rem)}
  :lang(bg) .v20-tl-fill{transform:scaleX(1)}
  :lang(bg) .v20-tl-node{background:var(--blue);border-color:#fff}
  :lang(bg) .v20-tl-n{opacity:0}
  :lang(bg) .v20-tl-chk{opacity:1;transform:scale(1)}
}


/* George, 2026-08-03 — the ranking red matches the CTA red. See the note at .tec10. */
.tec10{--r10:var(--red)}
@supports (color:color-mix(in srgb,#000 50%,#fff)){ .tec10{--r10:var(--red)} }

/* ===================== ALIGNMENT · THE PAGE READS LEFT ============================
   George, 2026-08-03, reversing his own earlier call after seeing it built: "align the
   entire page left because it feels old school at the moment… except the Teams page."
   So every section head and every intro on the homepage is LEFT, and the ONE exception
   is the team block, which he looked at and kept.
   This supersedes the centring pass from earlier the same day — that block is deleted
   above, not layered over, so there is one statement of the rule and not two.
   Every selector below is homepage-only (checked: .v21-inv, .v21-numbers, .v16-tmo,
   .v16-why2, .v21-whosec and .v17form appear on home-v21.html and nowhere else among
   the six pages that load this file), so about/why-bulgaria/faq/team/team-v22 are
   untouched. */
.v21-inv h2.display{text-align:left;margin-inline:0}
/* .v21-inv .v21-svclede is 0,2,0 above, so a bare .v21-svclede here would lose */
/* 2026-09-28 (client, Teams): the lede under "Services for international businesses in
   Bulgaria" wrapped to three lines inside its 62ch cap and "did not sit well". It now
   spans the full container like every other body paragraph on the site (two lines at 1440). */
.v21-inv .v21-svclede{text-align:left;margin-inline:0;max-width:none}
.v21-numbers .nh{text-align:left}
/* 2026-09-29 (13" pass): her tagline (added 2026-09-28) came in centred under the left
   heading. It reads with the heading, so it sits on the heading's edge. */
.v21-numbers .numlede{text-align:left;margin-inline:0}
/* the tiles too — a left-reading page with centred cards inside it is the same
   old-school feel he is pointing at, just smaller.
   ⚠ text-align alone does NOTHING here: .stat is a flex COLUMN with
   align-items:center, so the number and the caption are centred as flex ITEMS, not as
   text. Both properties have to move together. */
.v21-numbers .stat{text-align:left;align-items:flex-start}
.v16-tmo .display{text-align:left;margin-inline:0}
/* ✅ SECOND EXCEPTION (George, 2026-09-30): the contact form is centred. Heading, lede and form
   share one centre line; inside the form the fields still read from their own left edge. */
.v17form .formhead{text-align:center;margin-inline:auto}
.v17form .ctahead{text-wrap:balance}
.v17form .formlede,.v17form .zform{margin-inline:auto}
.v17form .below .btn{display:flex;width:fit-content;margin-inline:auto}
/* ✅ THE FIRST EXCEPTION — the team block stays centred, his explicit instruction.
   Stated here as well as in v18.css so a future left-alignment sweep does not take it
   out by accident. */
.v18-team .teamhead,
.v18-team .teamhead .display,
.v18-team .teamhead .tlede{text-align:center;margin-inline:auto}

/* The ranking eyebrow goes WHITE (George, 2026-08-03). It was var(--r10); once --r10
   became the un-lightened brand red it fell to ~1.8:1 on the navy at 12.5px, which is
   unreadable. White is the fix he chose, and it is the right one: it removes the second
   red from the card entirely instead of reintroducing the lightened one. 15.9:1. */
.tec10-eyebrow{color:#fff}

/* The fifth timeline card ("We run it") carries two lines of body where the others carry
   three or four, so it rendered visibly shorter than its neighbours (George, 2026-08-03:
   "make the box be as big as the other boxes"). The grid already stretches .v20-tl-item
   to the row height; the CARD inside it was the one sized by its content. Make the item a
   column and let the card take the space. Desktop only — under 980px the timeline is
   vertical and each card should hug its own copy. */
@media (min-width:980px){
  .v20-tl-item{display:flex;flex-direction:column}
  .v20-tl-card{flex:1 1 auto}
}

/* George, same round: "the numbers themselves should be centred, I feel." So the TILES go
   back to centred while the section HEADING stays left with the rest of the page. This
   deliberately overrides the tile half of the left-alignment block above — one narrow
   exception, stated after it so it wins, rather than editing that block and losing the
   record of the general rule. */
.v21-numbers .stat{text-align:center;align-items:center}

/* Her Pastel 56 on the ranking card: "това го направи по-голямо и болдни 'effective'".
   The sub-line steps up from .88rem and the one word she named is bold. Weight only on
   <b>, so the rest of the line keeps its quieter alpha and the emphasis is hers, not a
   general bolding of the sentence. */
.tec10-sub{font-size:1.02rem}
.tec10-sub b{font-weight:700;color:#fff}

/* ===== CERTIFICATIONS — shared by /about and the homepage, 2026-08-04 =============
   The client's new ISO/IEC 27001:2022 certificate (Bureau Veritas, CZE-2600205).
   Lives here rather than in either page's own block because both pages render the
   same mark; /about links v21.css too.

   ⚠ THE BUREAU VERITAS MARK RULES ARE CONTRACTUAL and are checked at their audits.
   Their guide is kept with the artwork in docs/brand/bureau-veritas/. Before you
   touch .bvmark, all of these:
     · 200px wide on a website, 250px MAXIMUM. The SVG canvas includes BV's required
       protective field, so at the 240px set below the badge itself measures exactly
       200. Do not shrink it and do not let a narrower container squeeze it.
     · ITS OWN THREE COLOURS ONLY (#00049E blue, #706F6F grey). Never recolour it to
       --blue, never grayscale it, never drop its opacity. Doing all three is exactly
       what .v16-logos does to the partner logos, which is why the mark is NOT in that
       marquee and must never be moved into it.
     · White grounds only. The mono variant BV supplies is black on transparent, so it
       cannot go on a navy band.
     · The statement must NOT be separated from the logo. The <p> stays inside the same
       <figure> as the <img>; do not move it into a neighbouring column or section.
     · It certifies the MANAGEMENT SYSTEM, not the services. Never write "our services
       are ISO certified".
     · The certified scope is accounting, business consulting, company incorporation,
       tax planning and payroll. It does NOT name legal services or registered address,
       so the mark must not be added to those service pages.
   If the certificate is ever withdrawn, every reference to Bureau Veritas comes down.

   max-width:100% is a safety net for viewports under ~290px, where 240px would
   otherwise overflow. It does not fire on any real device. */
.bvmark{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2.4vw,1.8rem);
  align-items:start;margin:0}
@media (min-width:720px){
  .bvmark{grid-template-columns:240px 1fr;gap:clamp(1.8rem,3.4vw,2.8rem);align-items:center}
}
.bvmark img{width:240px;max-width:100%;height:auto;display:block}
.bvmark figcaption{margin:0}
.bvmark p{margin:0;font-family:var(--sans);font-weight:300;color:var(--blue);
  font-size:1.0625rem;line-height:1.7;max-width:58ch}
.bvmark-links{margin-top:.9rem;font-size:.95rem}
.bvmark-links a{color:var(--blue);border-bottom:1px solid var(--line);padding-bottom:1px}
.bvmark-links a:hover{border-color:var(--blue)}
.bvmark-links .sep{margin:0 .55rem;color:var(--muted)}

/* The register. Hairline rows, name left and what-it-is right: a credential a
   compliance-minded NL/BE owner can check, which a photograph of a framed diploma
   never was. p21.css loads AFTER v21.css on /about, so its .p21-body>* 68ch clamp
   would win at equal specificity — hence the two-class overrides below. */
.p21-body .bvmark,.p21-body .creds21{max-width:none}
/* …and p21.css also gives every .p21-body ul a 1.3rem left margin and every li a
   .5rem bottom margin. Both outrank a single-class selector, so the register came out
   indented ~21px from the heading and its hairlines carried an 8px gap. Two-class
   selectors take it back. If the register ever looks nudged right of the section
   heading again, this is the rule that lost. */
.p21-body .creds21{margin-left:0}
.p21-body .creds21 li{margin-bottom:0}
.creds21{list-style:none;margin:clamp(2.4rem,4.5vw,3.4rem) 0 0;padding:0;
  border-top:1px solid var(--line)}
.creds21 li{display:grid;grid-template-columns:1fr;gap:.3rem;margin:0;
  padding:1.05rem 0;border-bottom:1px solid var(--line)}
@media (min-width:720px){
  .creds21 li{grid-template-columns:19rem 1fr;gap:clamp(1.5rem,3vw,2.5rem);
    align-items:baseline}
}
.creds21 b{font-family:var(--sans);font-weight:500;font-size:1.0625rem;
  letter-spacing:.01em;color:var(--blue)}
.creds21 span{font-family:var(--sans);font-weight:300;font-size:1rem;line-height:1.65;
  color:var(--muted)}

/* Homepage only: the mark sits under her vision, divided from it by the same hairline
   the register uses. Her stated order for this position was "нашата визия, нашите
   дипломи"; the diplomas half went missing on 2026-07-26 when the certification-wall
   clip was pulled, and this is what replaces it. */
.v21-creds{border-top:1px solid var(--line);padding-top:clamp(1.8rem,3.4vw,2.6rem)}

/* EU FUNDING BAND, 2026-08-06, Pastel 85. The Operational Programme mark, static and in
   full colour, directly under the partner marquee (which greyscales, fades and shrinks
   everything it carries, which is why the mark had to come out of it). Homepage only, which
   is where she pinned it; it is deliberately NOT in chrome.css, whose certband reaches 40
   pages. .v16-logos already carries the bottom padding for this pair, so this band adds
   none of its own at the top. The flex row has room for the EU emblem beside it when the
   client sends it; see the comment on the section in home-v21.html. */
/* --- EU FUNDING BAND (Pastel 85) -------------------------------------------
   Sits between </main> and <footer>. A compliance notice, so it reads quiet and
   institutional: white ground, a hairline to separate it from the last section,
   the two emblems centred, the contract identifiers under them, and the full
   prescribed description behind a disclosure.
   ⚠ The wording is programme-mandated. If this band ever needs to shrink, shrink
   the TYPE, never the text.                                                    */
.v21-eufund{background:var(--paper);border-top:1px solid rgba(13,31,60,.12);
  padding:clamp(2.2rem,4.5vw,3.4rem) 0 clamp(2.4rem,5vw,3.6rem)}
.v21-eufund-marks{display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(1.8rem,5vw,4rem);flex-wrap:wrap;max-width:56rem;margin:0 auto}
/* One shared row for the marks so the two captions start on the SAME line however tall each
   file happens to be. Without this the taller EU block pushes its caption down and the pair
   reads as misaligned. */
.v21-eufund-marks{--eu-markh:clamp(90px,11.8vw,128px)}
.v21-eufund-marks figure{margin:0;max-width:24rem;text-align:center;
  display:grid;grid-template-rows:var(--eu-markh) auto;align-items:end;
  flex:0 1 20rem}   /* equal columns: unequal captions had pulled the pair 34px off centre (2026-10-06) */
.v21-eufund-marks img{height:clamp(76px,10vw,108px);width:auto;display:block;margin:0 auto}
/* The EU file carries three lines of type under its flag, so at equal box heights the flag
   itself reads smaller than the programme logo beside it. Size this one up until the two
   MARKS balance, rather than until the two boxes match. */
.v21-eufund-marks figure:first-child img{height:clamp(90px,11.8vw,128px)}
/* ⚠ NOT var(--ink): that token is the cobalt #011E93, and bold cobalt under a logo reads as
   a link. These are labels. Navy keeps them as text and leaves cobalt to mean "clickable",
   which here is only "Read more". */
.v21-eufund-marks figcaption{margin-top:.85rem;font-size:.9375rem;line-height:1.45;
  font-weight:600;color:var(--navy);text-wrap:balance}
.v21-eufund-ref{margin:clamp(1.4rem,3vw,2rem) auto 0;text-align:center;
  font-size:.875rem;line-height:1.6;color:var(--muted)}
/* The disclosure. Keep the marker: it is the affordance telling her the rest is there. */
.v21-eufund-more{margin:1.1rem auto 0;max-width:74ch}
.v21-eufund-more>summary{cursor:pointer;text-align:center;font-size:.875rem;
  font-weight:600;color:var(--blue);padding:.35rem 0}
.v21-eufund-more>summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.v21-eufund-body{margin-top:1.2rem;font-size:.875rem;line-height:1.7;color:var(--muted);
  text-align:left}
.v21-eufund-body p{margin:0 0 .9rem}
.v21-eufund-body .v21-eufund-sub{font-weight:600;color:var(--navy);margin-top:1.2rem}
.v21-eufund-body ul{margin:0 0 .9rem;padding-left:1.15rem}
.v21-eufund-body li{margin:.25rem 0}
.v21-eufund-facts{margin:1.2rem 0 1.4rem;display:grid;gap:.5rem}
.v21-eufund-facts div{display:grid;grid-template-columns:minmax(11rem,auto) 1fr;gap:.35rem 1rem}
.v21-eufund-facts dt{font-weight:600;color:var(--navy)}
.v21-eufund-facts dd{margin:0}
.v21-eufund-sublist{margin:.3rem 0 0;padding-left:1.15rem}
@media (max-width:559px){
  .v21-eufund-facts div{grid-template-columns:1fr;gap:.1rem}
  .v21-eufund-facts dd{margin-bottom:.5rem}
}