/* ============================================================================
   svc.css — SERVICE-PAGE LAYOUT LAYER · 2026-08-03 (George's alignment pass)

   WHAT THIS REPLACES: all seven /services/*.html pages carried their own inline
   <style> block holding the .cf21-* rules. They were "copied 1:1 from
   company-formation r7" and had since drifted — seven near-identical copies, no
   two the same, each free to disagree with the others and with the homepage.
   That is why the pages read as George put it: "aligned centrally, then a bit to
   the left, and then the text is centred … totally different and nonsensical
   design." This file is the ONE copy. The seven inline blocks are gone; every
   rule that was in them is here, including the page-specific ones (ul.sub,
   .p21-cta-sub, .cf21-list.tint, .nb), which are generic enough to be shared.

   THE FAULT, MEASURED at 1440 before this file existed (tools/_tmp-measure):
     homepage        every band left-aligned at x=144, pad 70/70,
                     h1 80px · h2 ~52px · body 19.2px/1.75
     service pages   THREE left edges on one page — x=184 (hero, lists, cards),
                     x=234 (centred h2 box), x=331.9 (centred paragraphs) —
                     h2 40px, body 18px/1.55, and alignment flipping
                     centre → centre → left → centre → left down the page.
   Cause: .p21-wrap is 1200px and .cf21-q .p21-txt was 1100px + text-align:center,
   while the homepage container (.wrap in zara.css) is --maxw = 1280px. Three
   containers, three left edges, none of them the homepage's.

   THE LAW THIS FILE SETS:
     1. ONE container   — --maxw + --pad on every band, so x=144 at 1440, the
                          same edge as the homepage, on every section.
     2. ONE alignment   — left. Nothing is centred.
     3. ONE type ladder — the homepage's: h1 ~80 · h2 ~46 · lede 34 · body 19.2/1.75.
     4. NO dividers     — the cobalt hairline over every list cell is gone
                          (George: "remove all the dividers").
     5. ONE seam        — 2x--band between sections, 1x--band between a heading
                          band and the list that belongs to it.

   LOADS AFTER p21.css and BEFORE scale.css (which must stay last in <head> and
   still owns the viewport-height ceilings, including .cf21-hero h1's font-size).
   Every selector here is scoped under a .cf21- or .p21- class on a service page,
   so the shared chrome, the footer, /about, /why-bulgaria and the /lp set — which
   keep their own inline cf21 blocks — cannot be reached by it.
   ============================================================================ */

/* ----------------------------------------------------------------- 1 · CONTAINER
   Every band resolves to the SAME box as the homepage's .wrap: --maxw (1280px)
   with --pad either side. p21.css sets 1200px in three different places and the
   old inline block set 1100px in a fourth; all four are overridden here so there
   is exactly one left edge on the page. Specificity matches p21.css's own
   selectors and this file loads after it, so the later rule wins. */
/* Bands that HAVE a wrapper div (.p21-wrap / .p21-txt): the div is the box. */
.cf21-hero .p21-wrap,
.p21-cards > .p21-wrap,
.cf21-cta .p21-wrap,
.cf21-q .p21-txt{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* Bands that have NO wrapper — .p21-list puts its <h2> and <ul> straight into the
   section — so the gutter goes on the BAND and the children stay plain.
   ⚠ The obvious version (give each child max-width:--maxw + margin-inline:auto)
   is WRONG here and was the first thing tried: any child that then sets its own
   measure, such as a heading at 22ch, is CENTRED by that auto margin rather than
   left on the page's edge. Measured on /services/company-formation and
   /services/vat-oss: list headings at x=404.8 against the page's x=144.
   The max() collapses to --pad once the viewport is narrower than --maxw. */
.p21-list{padding-inline:max(var(--pad),calc((100% - var(--maxw))/2 + var(--pad)))}
.p21-list > *{max-width:none;margin-inline:0;padding-inline:0}

/* ------------------------------------------------------------------ 2 · ALIGNMENT
   Left. The old block centred .cf21-q's whole text column, the list headings and
   the closing CTA, which is what made the page zig-zag against its own
   left-aligned lists and cards. The homepage centres exactly one band (the team
   block) and left-aligns everything else. */
.cf21-q .p21-txt,
.p21-list h2,
.cf21-cta .p21-wrap{text-align:left}
/* ⚠ ONLY the elements INSIDE a container get margin-inline:0. A list band's <h2>
   is itself a direct child of the band — §1's container rule centres it with
   margin-inline:auto — so zeroing it here would pin the 1280px box to x=0 and
   render the heading 84px LEFT of every other left edge on the page. Measured on
   /services/company-formation: heading at x=60 against the page's x=144. */
.cf21-q .p21-txt h2,
.cf21-q .p21-txt p{margin-inline:0}
.cf21-cta .p21-wrap{align-items:flex-start;justify-content:flex-start}

/* ------------------------------------------------------------------ 3 · TYPE
   The homepage ladder, measured off home-v21 at 1440: h1 80 · h2 44.8-57.6 ·
   body 19.2 with line-height 1.75. The service pages were running h2 at 40 and
   body at 18/1.55 — a whole step down on both, which is most of why they read as
   "plain" next to the homepage. */

/* HERO — navy band, white type, top padding clearing the fixed two-row glass
   header (--chrome-clear, owned by scale.css; the fallback clamp is the value the
   service pages have always carried). scale.css owns the h1's font-size too — it
   caps it against viewport HEIGHT for the client's short 1440x609 screen — so
   this only sets the measure.
   ⚠ max-width drops 24ch → 20ch, the homepage's .hero-d h1 value, and
   text-wrap:balance evens the lines. Together they fix George's specific note:
   "Freelancer Registration & Tax Residency in Bulgaria" was breaking with
   "Bulgaria" stranded alone on the last row. balance distributes the words
   across the rows instead of filling each line to the edge and letting the
   remainder orphan. */
.p21-hero.cf21-hero{background:var(--navy);
  padding-top:var(--chrome-clear,clamp(12rem,17vw,15.5rem))}
.cf21-hero h1{max-width:20ch;text-wrap:balance;color:#fff}
/* Declare the existing desktop size here as well as the height cap.
   This preserves the rendered design and makes scale.css only reduce the base. */
@media(min-width:760px){.cf21-hero h1{font-size:clamp(2.8rem,8.4vw,6.875rem)}}
.cf21-hero .p21-lede{font-size:1.2rem;line-height:1.75;letter-spacing:.015em;
  max-width:58ch;color:rgba(255,255,255,.92)}
.cf21-hero .p21-lede + .p21-lede{margin-top:.9rem}   /* bpo's hero carries two */
.cf21-ghost{background:#fff;color:var(--blue);border:1px solid #fff;margin-top:2rem}
.cf21-ghost:hover{background:transparent;color:#fff;border-color:#fff}

/* SECTION HEADING — up from 40px to the homepage's display step. balance again,
   so a two-line heading splits evenly rather than dropping one word. */
.cf21-q .p21-txt h2,
.cf21-list h2,
.cf21-pack .p21-txt h2,
.cf21-cta .p21-cta-line{
  font-family:var(--serif);font-weight:300;color:var(--blue);
  font-size:clamp(1.8rem,3.2vw,2.85rem);line-height:1.1;letter-spacing:-.01em;
  max-width:22ch;text-wrap:balance}

/* HER OPENING SENTENCE — six of the seven pages promote her first line to an h2
   ("Shared Office space is a great alternative…" runs 180 characters). At the
   display step that is a wall of serif; as body copy it loses the job it is
   doing, which is to open the page. So it gets its own step between the two:
   serif, larger than body, well short of a heading, on a reading measure.
   Carried in markup as <h2 class="cf21-lede"> — the heading level is unchanged,
   only its treatment. */
.cf21-q .p21-txt h2.cf21-lede{
  font-size:clamp(1.5rem,2.4vw,2.05rem);line-height:1.35;letter-spacing:-.005em;
  max-width:none;text-wrap:pretty}

/* BODY — homepage parity: 1.2rem on a 1.75 leading. The measure is in rem, not
   ch, for the reason p21.css already documents for the article column: ch
   resolves against each element's own font, so a serif heading and a sans
   paragraph at the same ch value do not share a right edge. */
.cf21-q .p21-txt p,
.cf21-list li,
.cf21-pack .p21-txt li{
  font-family:var(--sans);font-weight:300;color:var(--blue);
  font-size:1.2rem;line-height:1.75;letter-spacing:.015em}
/* ⚠ NO MEASURE CAP — the text spans the full container, 1152px at 1440, which is what
   the homepage does (`.v21-whypars .par{max-width:none}` in v21.css, commented there as
   "text spans the full container like every other section"). George, 2026-08-04, looking
   at /services/company-formation: capping it "makes the text smaller and makes it longer"
   and leaves half the page empty beside it. Do not reintroduce a ch/rem cap here without
   changing the homepage in the same pass — the two must agree. */
.cf21-q .p21-txt p{margin:1.1rem 0 0;max-width:none}
.cf21-q .p21-txt h2 + p{margin-top:1.3rem}
.cf21-q .p21-txt .dotlink{margin-top:1.7rem}
/* A second heading inside one band (freelancers welds "Who is this service for?"
   onto the intro) needs real air above it, not the h2's default. */
.cf21-q .p21-txt .p21-h2-gap{margin-top:clamp(2.6rem,5vw,4rem)}

/* ------------------------------------------------------------------ 4 · LISTS
   ⚠ NO HAIRLINES. p21.css gives every .p21-list li a `border-top:1px solid
   var(--blue)`. On the pages that never added .cf21-list — freelancers' two
   audience/benefit bands — those rules rendered as a full-width cobalt line over
   every cell, which is what George means by "remove all the dividers". The old
   inline block killed them for .cf21-list only, so ONE page showed dividers and
   the others did not. Killed here for every service list, both classes.

   One treatment for all of them: a small cobalt square, two flowing columns,
   body type. columns (not grid) so a short list does not leave row-pairing holes.
   ⚠ .p21-list.tint is now a NO-OP visually — --tint became #ffffff when the light
   blue was banned (zara.css) — but it still changed the SPACING, because the
   seam rule in p21.css reads :not(.tint). See §5. */
.p21-list{background:var(--paper)}
.p21-list h2{max-width:24ch}
/* ⚠ margin-BLOCK / padding-BLOCK only. The <ul> IS the band's container (it is the
   direct child that §1 gives --maxw + --pad to), so a blanket `margin:0;padding:0`
   here wipes that inline padding and the list goes full-bleed to x=0. */
.p21-list ul{list-style:none;display:block;margin-block:0;padding-block:0;
  columns:2;column-gap:clamp(2rem,4vw,4.5rem)}
.p21-list li{
  border-top:0;break-inside:avoid;position:relative;
  padding:0 0 0 1.25rem;margin:0 0 1.05rem;
  font-family:var(--sans);font-weight:300;color:var(--blue);
  font-size:1.2rem;line-height:1.6;letter-spacing:.015em}
.p21-list li::before{content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;background:var(--blue)}
@media (max-width:680px){ .p21-list ul{columns:1} }

/* TITLE + SENTENCE cells (freelancers' "Why Bulgaria?" band): her short title is
   the lead, her sentence sits under it. Serif lead so the two tiers separate
   without a rule, and the cell gets more room beneath it than a plain item. */
.p21-list li .sub{display:block;margin-top:.45rem;
  font-family:var(--sans);font-weight:300;font-size:1.0625rem;line-height:1.6;
  color:var(--muted);letter-spacing:.01em}
.p21-list li:has(> .sub){font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.4rem);
  line-height:1.25;margin-bottom:1.9rem}

/* GROUPED cells — a group name with her bullets nested beneath (freelancers'
   service groups, registered-address's offer). The group name reads as a serif
   lead; the children are body copy, indented, on a smaller square. */
.p21-list li > ul.sub{columns:1;margin:.65rem 0 0;padding:0;list-style:none}
.p21-list li:has(> ul.sub){font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.4rem);
  line-height:1.25;margin-bottom:1.9rem}
.p21-list li > ul.sub li{margin:0 0 .5rem;padding-left:1.05rem;
  font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--muted)}
.p21-list li > ul.sub li::before{width:5px;height:5px;top:.6em;
  background:var(--muted)}

/* ------------------------------------------------------------------ 5 · SEAMS
   2x--band between two sections; 1x--band between a heading band and the list
   that belongs to it — the pair reads as one section, which is what the copy is.
   ⚠ p21.css writes this as `.cf21-q + .p21-list:not(.tint)`. The :not() made
   sense when .tint was a real colour band that earned its own seam; it is white
   now, so on freelancers the rule simply failed and left ~136px of dead white
   between "Who is this service for?" and its own list, while the identical pair
   on accounting sat at 68px. Same markup shape, two different gaps, for a class
   that no longer paints anything. Dropped here, so the pairing is by ROLE. */
.cf21-q{background:var(--paper);padding-block:var(--band)}
.p21-list{padding-block:var(--band)}
.cf21-q + .p21-list{padding-top:0}
.p21-list + .p21-list{padding-top:0}
/* A band that is only a note (one paragraph) right after a list closes that list: BPO's scope
   sentence, the Bulgarian freelancers' eligibility note. On the full seam it floated 226px under
   its list and 190px over the next section, belonging to neither (2026-10-06). */
.p21-list:has(+ .cf21-q > .p21-txt > p:only-child){padding-bottom:0}
.p21-list + .cf21-q:has(> .p21-txt > p:only-child){padding-top:clamp(1.8rem,3.4vw,2.6rem)}

/* ------------------------------------------------------------------ 6 · SPLIT
   The navy photo band. Its text column was padded clamp(2.4rem,5.5vw,5.5rem) =
   79px, starting the text at x=799 against the homepage split's x=763. Matched
   to the homepage so the two read as the same band at the same scale. */
.cf21-pack .p21-txt{padding:clamp(2.2rem,4vw,3.4rem) clamp(2rem,3vw,3rem)}
/* 20ch, not 16: company-formation's "Our LIMITED COMPANY incorporation package
   includes:" broke into four lines in a half-width column at the tighter measure. */
.cf21-pack .p21-txt :is(h2,h3){color:#fff;max-width:20ch}
/* One measure for the panel's paragraph and list, 36rem (2026-10-06): the list had none and the
   longer Bulgarian lines ran to within 45px of the screen edge, under the contact tab, while the
   paragraph above them wrapped at 44ch. */
.cf21-pack .p21-txt p{color:rgba(255,255,255,.88);font-size:1.125rem;
  line-height:1.7;margin-top:1.1rem;max-width:36rem}
.cf21-pack .p21-txt ul{list-style:none;margin:1.6rem 0 0;padding:0;
  display:grid;gap:.95rem;max-width:36rem}
.cf21-pack .p21-txt li{position:relative;padding-left:1.25rem;color:#fff;
  font-size:1.125rem;line-height:1.6}
.cf21-pack .p21-txt li::before{content:"";position:absolute;left:0;top:.55em;
  width:7px;height:7px;background:#fff}

/* ------------------------------------------------------------------ 7 · CARDS
   The reasons grid. Card type raised to sit with the new body step; the heading
   takes the same measure as every other section heading. */
.p21-cards > .p21-wrap > h2{max-width:24ch;text-wrap:balance;
  font-size:clamp(1.8rem,3.2vw,2.85rem)}
.p21-card h3{font-size:clamp(1.25rem,1.8vw,1.5rem);margin-top:0;line-height:1.2}
.p21-card p{color:var(--blue);font-size:1.0625rem;line-height:1.65;margin-top:.6rem}
/* Text-only cards carry no marker (George, 2026-10-06: remove the 01-06 numerals, here and
   everywhere like them). The hairline went on 2026-08-06 and the numerals that replaced it
   go now; the heading alone starts each card.
   On the Bulgarian pages these cards run two columns, not three: at 352px a Bulgarian line
   held about 39 characters and read narrow (George, same day); two columns give about 60. */
@media (min-width:980px){
  :lang(bg) .p21-cards-grid.three:not(:has(.p21-card-img)){grid-template-columns:1fr 1fr}
}

/* ------------------------------------------------------------------ 8 · CTA
   White closing band, stacked LEFT (was a centred column). Mirrors the
   homepage's closing section, which is left-aligned at the same x=144. */
.cf21-cta{background:var(--paper)}
.cf21-cta .p21-wrap{flex-direction:column;gap:1.4rem}
.cf21-cta .p21-cta-sub{font-family:var(--sans);font-weight:300;color:var(--blue);
  font-size:1.2rem;line-height:1.75;letter-spacing:.015em;max-width:none;margin:0}
.cf21-cta .btn{margin-top:.6rem}

/* ------------------------------------------------------------------ 9 · MISC
   .nb — vat-oss's "E-Commerce" must not break across the hyphen in the h1. */
.cf21-hero h1 .nb{white-space:nowrap}

/* .cf21-prose — vat-oss closes on prose inside a list band rather than a list.
   Was centred at 75ch; now the same left column and body step as everything else. */
.cf21-prose{font-family:var(--sans);font-weight:300;color:var(--blue);
  font-size:1.2rem;line-height:1.75;letter-spacing:.015em;max-width:none;margin:1.2rem 0 0}   /* full column like all body copy (2026-10-06) */

/* Her closing CTA line is a short house line on five pages and a full sentence on
   vat-oss, so the measure has to hold both without stranding a word. */
.cf21-cta .p21-cta-line{max-width:26ch}

/* ----------------------------------------------------------------- 10 · MOBILE
   One column, and the hero measure opens up so the balanced h1 does not go
   needlessly narrow on a phone. */
@media (max-width:680px){
  .cf21-hero h1{max-width:none}
  .cf21-q .p21-txt p,
  .cf21-cta .p21-cta-sub{max-width:none}
}
/* "Администриране" at the h2 size is 258px; on a 320 screen the pack's 2rem sides left 256, so
   the Bulgarian panel ran 2px wide (2026-10-06). The page's own 20px edge gives it room. */
@media (max-width:359px){ :lang(bg) .cf21-pack .p21-txt{padding-inline:1.25rem} }