/* ============================================================
   PAGE KINDS — the three spine components that shipped unstyled.
   ============================================================

   NEW FILE, 2 Sep 2026.

   WHAT THIS FIXES, measured before the change over live HTTP at
   1440 with the served theme:

     .cz-contactpanel*   /contact/
     .cz-lateral*        /about-us/ /who-we-are/ /mission/
                         /vision/ /values/
     .cz-choicecard*     the nine `choice` pages in
                         cz_page_kind_map()

   All three were emitted by page-kind-contact.php,
   page-kind-company.php and page-kind-choice.php on 2 Sep and had
   ZERO rules in ANY of the thirteen stylesheets in this theme. The
   only text that mentioned them anywhere was the touch-target patch
   at main.css:4489 and the comment above it saying there was nothing
   to override. That comment ends "whoever writes their real rules
   should take these three declarations with them" — this file is
   that, and it restates the 44px floor at the end so the patch
   becoming redundant cannot cost anything.

   What the reader was actually getting, measured:

     .cz-contactpanel__details   1375px wide, and __form 1375px wide
                                 BELOW it — no two-column relationship
                                 at any width, on the page whose whole
                                 job is being contacted
     .cz-contactpanel__list      a bare <dl>: browser-default 40px dd
                                 indent, <address> in italics, and the
                                 four `dd > a` — both phone lines,
                                 WhatsApp and email — rendering in
                                 inherited body ink with no underline,
                                 so nothing on the page said they were
                                 links
     .cz-contactpanel__hours     a disc-bulleted <ul> with the day and
                                 the time run together on one line
     .cz-lateral__list           a disc-bulleted <ul>. The current item
                                 read "About ConsultZone You are here"
                                 in the same weight, size and colour as
                                 the other four — no state at all, so
                                 not even a colour-only failure of
                                 WCAG 1.4.1, an absent one
     .cz-choicecard              six of them, `display:inline`, 20px
                                 tall, inside an <ol> still carrying
                                 its decimal markers, with __no,
                                 __title and __note indistinguishable
                                 on one line

   ------------------------------------------------------------
   THE CASCADE CONTRACT
   ------------------------------------------------------------
   Enqueued as `cz-page-kinds` with `cz-main` as its only dependency,
   so it is printed after main.css and before nothing that names
   these classes — because nothing else names them at all. There is
   no specificity contest anywhere in this file and there is no
   !important in it (R11).

   The one place source order matters is the touch-target block in
   main.css. `.cz-choicecard` there is (0,1,0) and
   `.cz-contactpanel__list dd > a` is (0,1,2); the rules below tie
   with both and win on order, which is why the floor is restated
   at the foot of this file rather than left to that block.

   prefers-reduced-motion is NOT handled here and must not be:
   main.css:333 already sets `transition-duration: .01ms !important`
   on `*` inside the reduce query, which covers every transition
   below. Adding a second guard here would need an !important of its
   own to beat that one.

   ------------------------------------------------------------
   THE POSITION THESE THREE ARE BUILT FROM
   ------------------------------------------------------------
   R51 governs exhibits rather than navigation, but its reasoning is
   the reasoning here: "structure comes from hairline rules,
   alignment and whitespace — never from a container." So none of
   the three is a filled card. The choice board is six entries under
   six rules, the way a broadsheet index is set; the contact details
   are a rule-separated label/value stack; the lateral is a single
   rail on one hairline. The only filled surface any of them carries
   is `.cz-form`, which main.css:3718 already paints, and which
   earns it by being the one thing on /contact/ a reader is meant to
   act on.

   Every ground here is --cz-paper, so --cz-gold-emph resolves to
   --cz-gold-ink (#856527, 5.40:1 on white) by inheritance from
   :root — none of these three is in the dark-surface opt-out list
   at main.css:3078, and none of them may be added to it without
   changing the grounds below.

   THAT TOKEN IS USED FOR THE 2px STATE RULES TOO, not only for
   text. The bright --cz-gold (#c7a36b) measures 2.36:1 on white,
   and 1.4.11 wants 3:1 of anything carrying the state of a control
   — so a bright-gold rule marking the current page would have been
   the exact defect main.css:75 documents, arriving on a border
   instead of on a letter. It also means one gold value runs through
   each component: eyebrow, dt, numeral, "You are here" and rule.
   ============================================================ */


/* ------------------------------------------------------------
   SHARED — section rhythm.

   R19 says a new section uses `padding-block: var(--cz-y)`. These
   three take a reduced TOP instead, and the reason is R48: all
   three sit directly under `.cz-masthead` or under prose, on the
   same white ground, and the masthead has already paid for that
   join with `padding-bottom: clamp(28px,3vw,48px)` plus its own
   `border-bottom`. A full --cz-y on top of that is 96 + 48 = 144px
   of unbroken white across a hairline, which is R5's "no dead
   white" arriving from the direction R48 describes. The bottom
   value is full, because below each of these the page changes to
   something else.
   ------------------------------------------------------------ */
.cz-contactpanel,
.cz-choiceboard {
  padding-block: clamp(40px, 4vw, 64px) clamp(48px, 4.8vw, 80px);
  /* The join into the prose that follows, marked with a line rather
     than with height — R48. */
  border-bottom: 1px solid var(--cz-line);
}

.cz-lateral {
  /* No border: `.cz-consult` supplies its own ink ground immediately
     below, so the ground change already marks that join. The hairline
     this component needs is INSIDE it, on the list, where it cannot
     double with the masthead's border on /mission/, /vision/ and
     /values/ — three pages with no body copy at all, where the
     lateral lands directly under the masthead. */
  padding-block: clamp(44px, 4.4vw, 72px) clamp(48px, 5vw, 84px);
}

/* The section heading.

   `.cz-pagesec__title` is emitted bare on all four — no `.cz-h2`,
   unlike `.cz-consult__head`'s — so it was falling through to the
   UA h2 default at 24px. Same scale family as `.cz-h2`
   (main.css:2957) one step down, because these head a component
   rather than a whole section of the page.

   `.cz-pagesec` itself is still an empty hook: FIVE templates print
   it and no stylesheet in this theme declares a bare `.cz-pagesec`
   rule. It is not given one here, and that is a decision rather than
   an omission — see the note at the foot of this file. */
.cz-contactpanel .cz-pagesec__title,
.cz-choiceboard .cz-pagesec__title,
.cz-indexlist .cz-pagesec__title,
.cz-landing__routes .cz-pagesec__title {
  margin: 0;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--cz-ink);
  text-wrap: balance;
}

/* The measure goes on the TITLE, not on the head.

   `ch` resolves against the element's OWN font-size, and `__head`
   inherits 16px — so a `max-width: 30ch` there is 264px, not the
   ~660px it reads as, and it set this heading in four lines with
   1100px of nothing beside it. R5's "no dead white" arriving from a
   unit that looks right in the source. Declared on the h2, where
   1ch is a figure of the 40px face. */
.cz-choiceboard .cz-pagesec__title {
  max-width: 26ch;
  font-size: clamp(26px, 1.9vw + 14px, 40px);
}

/* Same scale — these two head a whole section of the page as the
   choice board does — but their own measure, and their own bottom
   margin, because neither template wraps the eyebrow and the heading
   in a `__head` element for it to sit on. 30ch rather than 26ch
   because "These answer most of what comes up before the first call"
   is 54 characters and breaks to three lines at 26. */
.cz-indexlist .cz-pagesec__title,
.cz-landing__routes .cz-pagesec__title {
  max-width: 30ch;
  margin-bottom: clamp(24px, 2.6vw, 40px);
  font-size: clamp(26px, 1.9vw + 14px, 40px);
}

/* B314 — it heads the SECTION now, not one column of two, so it takes the same scale as the other
   section headings on this file's components rather than the reduced one it had. */
.cz-contactpanel .cz-pagesec__title {
  max-width: 30ch;
  margin-bottom: clamp(20px, 2.2vw, 32px);
  font-size: clamp(26px, 1.9vw + 14px, 40px);
}

/* The only inbound link to /thank-you/ on the site (R62). It sits under the row of facts, on the
   prose edge, rather than floating where the form used to be. */
.cz-contactpanel__next {
  margin: clamp(26px, 2.6vw, 40px) 0 0;
  padding-top: clamp(18px, 1.8vw, 24px);
  border-top: 1px solid var(--cz-line);
  font-size: clamp(14.5px, .28vw + 13.6px, 16px);
}


/* ============================================================
   1 · CONTACT PANEL — page-kind-contact.php, /contact/
   ============================================================

   The template's own docblock states the architecture: the panel is
   the page, and the form is content rather than a footer. So the
   grid is weighted to the form — a narrow reference column of
   details on the left, the thing the reader is meant to DO on the
   right, at roughly two and a half times its width.

   That weighting is also what keeps `.cz-form` usable. Its field
   grid is three columns above 1100px (main.css:3757) and that query
   reads the VIEWPORT, not this container, so a form column narrower
   than about 800px at 1440 would put three fields in 170px each. At
   the ratio below it gets 938px at 1440 and 1058px at 1600.
   ============================================================ */

/* B314 — ONE ROW OF FACTS, NOT A COLUMN BESIDE A FORM.
   
   The two-column rule this replaces weighted the grid 1:2.5 toward `.cz-contactpanel__form`, and
   that form is gone: /contact/ now ends on the same homepage form section as every other page, on
   his ruling that the footer must read identically everywhere and that this page is short precisely
   so a reader reaches that form. A narrow 400px details column with nothing to its right would have
   left roughly 1,300px of dead width at 1720 — the defect he has reported on three separate pages
   now, and the reason this rule changed rather than merely losing its second track.
   
   `auto-fit`, not `auto-fill`: with five items in a track that fits six, auto-fill would keep the
   sixth as an empty column and the items would not stretch. auto-fit collapses it. That is the same
   distinction B313 turned on, one component away. */
.cz-contactpanel__inner {
  display: block;
}

/* B314b — THE FORM SITS UNDER THE HEADING, ON THIS PANEL'S LIGHT GROUND.
   
   His instruction of 29 September put the footer's form here as well, unstyled for ink. `.cz-form`
   is authored against `.cz-consult`'s dark ground, so the few properties that assume it are reset
   here and nowhere else — the partial itself is untouched, because it prints at the foot of 226
   pages and this is one panel on one page.
   
   The form takes the full container width rather than a column of it: a seven-field grid in a 400px
   track puts three inputs in 120px each, which is what the old two-column panel was weighted 1:2.5
   to avoid. */
/* B314c — "NOT IN DARK", AND IT TAKES A SIX-CLASS PREFIX TO SAY SO.
   
   His instruction: the footer's form, here, *"not in dark"*. The first version of this block set the
   light colours at (0,2,1) and MEASURED BACK DARK: `rgba(3,6,11,.46)` fields with ink text on a
   white panel — his complaint word for word, and exactly what editorial.css records happening to the
   R69 margin form for the same reason.
   
   The cause is `main.css` ~6995, which paints every `.cz-form` control through
   `body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-form .cz-field input` — a chain at (0,5,2) that no two-class rule can reach. Note which
   properties it sets: `background` and `border-color` only, which is why `color` and the label went
   light on the first attempt and the boxes did not. A partial win is the tell.
   
   So this repeats the same prefix and adds the panel's own class, reaching (0,6,2). Verbose on
   purpose: `!important` would also win, and 08 §14.2 is already a ledger of 267 of them. This is the
   house's own mechanism used the way the house uses it, and the values are the margin form's own
   measured ones (editorial.css ~998) so the site does not end up with two different light greys.
   
   No media query. The margin form's equivalent is inside `@media (min-width: 1401px)` because it
   only exists above that width; this form is on the page at every width. */
body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form {
  background: none;
  border-color: var(--cz-line);
  box-shadow: none;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field label {
  color: #5b6570;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field input,
body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field select,
body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field textarea {
  min-height: 46px;
  background: #fff;
  border-color: #d3dae1;
  color: var(--cz-ink, #050607);
}

/* 4.9:1 on white — the measurement the margin form was built to. */
body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field input::placeholder,
body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field textarea::placeholder {
  color: #6b7683;
  opacity: 1;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field input:focus,
body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field select:focus,
body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field textarea:focus {
  background: #fff;
  border-color: var(--cz-blue, #1769ff);
  box-shadow: 0 0 0 3px rgba(23, 105, 255, .14);
}

/* The dropdown list is drawn by the platform, so the colours go on the options too. */
body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field select option {
  background: #fff;
  color: var(--cz-ink, #050607);
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-form__foot {
  border-top-color: var(--cz-line);
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-form__note {
  color: #5b6570;
}
.cz-contactpanel__form {
  margin: 0 0 clamp(36px, 3.6vw, 56px);
}

.cz-contactpanel__form .cz-form__head {
  display: none;
}

/* The row of facts reads as a footnote to the form above it, so it takes the quieter weight and a
   rule across the top to mark the join (R48). */
.cz-contactpanel__list {
  padding-top: clamp(28px, 2.8vw, 40px);
  border-top: 1px solid var(--cz-line);
}
.cz-contactpanel__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), 1fr));
  gap: clamp(20px, 2.2vw, 36px);
  align-items: start;
}

/* Each fact is its own cell, and the hairline that used to separate five stacked rows now sits on
   top of each one — so the row reads as five facts across rather than one list wrapped. */
.cz-contactpanel__item {
  min-width: 0;
}

/* ---- the details column ---- */

.cz-contactpanel__list {
  margin: clamp(22px, 2.2vw, 32px) 0 0;
}

/* R29.1 requires each of these ONCE, and the template supplies them
   from cz_phone_numbers(), cz_whatsapp() and cz_opening_hours()
   rather than as literals. All this has to do is make them read as
   five separate facts, which is what the rule between them is for. */
.cz-contactpanel__list dt {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cz-line);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-gold-emph);
}

/* Every item carries its rule now, because each is the first (and only) dt inside its own wrapper —
   so `:first-of-type` would strip the rule from ALL FIVE rather than from one. The top rule is what
   makes them read as separate facts (R29.1), so it is declared unconditionally and the old
   first-of-type exception is deliberately not reinstated. */
.cz-contactpanel__item dt {
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid var(--cz-line);
  padding-top: 14px;
}

/* The UA gives dd a 40px inline margin. It was the only thing
   indenting these values and it indented them against nothing —
   there is no second column for it to clear. */
.cz-contactpanel__list dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin: 9px 0 0;
  font-size: clamp(14.5px, .28vw + 13.6px, 16px);
  line-height: 1.55;
  color: var(--cz-text);
}

/* Two anchors in one <dd> — both direct lines — become two rows, so
   each is its own target and neither has to share a line with the
   other at 375px. `align-items: flex-start` keeps each one as wide
   as its own text rather than as wide as the column. */
.cz-contactpanel__list dd > a {
  color: var(--cz-gold-emph);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(133, 101, 39, .42);
  text-underline-offset: 3px;
  transition: color .25s var(--cz-ease), text-decoration-color .25s var(--cz-ease);
}

/* An underline, not colour alone. Gold at ink weight measures 5.40:1
   on white, which passes 1.4.3 — but 1.4.1 is a separate rule and a
   link inside a run of text has to be identifiable without it. */
.cz-contactpanel__list dd > a:hover,
.cz-contactpanel__list dd > a:focus-visible {
  color: var(--cz-ink);
  text-decoration-color: currentColor;
}

.cz-contactpanel__list dd address {
  font-style: normal;
  line-height: 1.6;
}

/* ---- the hours ledger ----

   The typographic break between the details above and the hours.
   Everything above is a label over a value you act on; this is a
   reference table, so it is set as one — denser, quieter, two
   columns on a dotted rule, with the day in the meta grey R17
   reserves for exactly this and the time in ink with tabular
   figures so the four rows align on the colon. Nothing here is a
   link and nothing here is gold. */
.cz-contactpanel__hours {
  width: 100%;
  margin: 3px 0 0;
  padding: 0;
  list-style: none;
}

.cz-contactpanel__hours li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 7px;
  border-bottom: 1px dotted var(--cz-line);
  font-size: 13.5px;
  line-height: 1.45;
}

.cz-contactpanel__hours li:last-child {
  border-bottom: 0;
}

.cz-contactpanel__hours li > span:first-child {
  color: var(--cz-mid);
}

.cz-contactpanel__hours li > span + span {
  flex: none;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cz-text);
}


/* ============================================================
   2 · LATERAL SET — page-kind-company.php
   ============================================================

   Five pages: /about-us/, /who-we-are/, /mission/, /vision/,
   /values/. The template's docblock records that four of them are
   in no menu, in no footer, in no homepage link and excluded from
   the related pool by name — so this rail is the only navigation
   between them anywhere on the site, and it has to look like
   navigation rather than like a list that happens to contain links.

   It is set as ONE rail on ONE hairline, which is a structure no
   other section on this site uses: the choice board below is a
   ruled index, `.cz-related__grid` is auto-fit cards,
   `.cz-consult__facts` is a gapped cell grid and `.cz-routes` is a
   sticky index beside panels (R1 — no page repeats another page's
   structure).
   ============================================================ */

.cz-lateral__list {
  display: flex;
  /* Clear of `.cz-eyebrow`'s own 18px and its 26px gold ::before rule.
     Without this the current item's 2px gold border sits close enough
     under that rule to read as the eyebrow being underlined rather
     than as the rail marking a state. */
  margin: clamp(16px, 1.6vw, 24px) 0 0;
  padding: 0;
  border-top: 1px solid var(--cz-line);
  list-style: none;
}

.cz-lateral__item {
  flex: 1 1 0;
  min-width: 0;
}

/* Two rows, not one line.

   "About ConsultZone" at 16.5px/800 measures ~145px and "YOU ARE
   HERE" ~100px; a fifth of a 978px container at 1024 is 195px, so
   setting them on one baseline overflows the cell by 50px. The
   affordance therefore sits UNDER the title in the rail — which is
   also the only reason this component needs no horizontal scroll
   container at any width in the ladder. */
.cz-lateral__link {
  display: grid;
  /* The affordance follows the WORD, not the cell edge. At 1fr the
     title's column filled a fifth of the container and stranded the
     arrow 250px to its right, which reads as two unrelated things on
     one line rather than as one link. max-content plus a packed track
     list keeps them 10px apart, and the 0 minimum still lets a long
     title wrap rather than push the arrow out of the cell. */
  grid-template-columns: minmax(0, max-content) auto;
  justify-content: start;
  align-items: center;
  column-gap: 10px;
  row-gap: 6px;
  padding: 17px 16px 16px 0;
  /* The rail's own state channel. Transparent on the four that are
     links, gold on the one that is not — see is-current below. */
  border-top: 2px solid transparent;
  margin-top: -1px;
  color: var(--cz-text);
  transition: color .25s var(--cz-ease), border-color .25s var(--cz-ease);
}

.cz-lateral__title {
  grid-column: 1;
  font-size: clamp(14.5px, .3vw + 13.6px, 16.5px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.cz-lateral__go {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  color: var(--cz-mid);
  transition: color .25s var(--cz-ease);
}

/* R16: a hover state informs. The rule above the item lights, the
   arrow travels — main.css:130 already moves `.arrow` 4px on
   `a:hover` — and nothing moves the item itself. */
a.cz-lateral__link:hover,
a.cz-lateral__link:focus-visible {
  border-top-color: var(--cz-gold-emph);
  color: var(--cz-ink);
}

a.cz-lateral__link:hover .cz-lateral__go,
a.cz-lateral__link:focus-visible .cz-lateral__go {
  color: var(--cz-gold-emph);
}

/* ---- the current item ----

   WCAG 1.4.1: colour may not be the only thing that carries this.
   Four cues, three of them not colour:

     1. "You are here", printed by the template as real text
     2. a 2px rule above the item where the others have none
     3. weight 800 against 600, and ink against --cz-text
     4. it is a <span>, not an <a> — no pointer, no hover, and
        aria-current="page" for anything that is not looking

   The gold is the fourth cue, not the only one. */
.cz-lateral__item.is-current .cz-lateral__link {
  border-top-color: var(--cz-gold-emph);
  color: var(--cz-ink);
  cursor: default;
}

.cz-lateral__item.is-current .cz-lateral__title {
  font-weight: 800;
}

.cz-lateral__here {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cz-gold-emph);
}


/* ============================================================
   3 · CHOICE BOARD — page-kind-choice.php
   ============================================================

   Six routes, above the prose, on the nine pages where the reader
   has not decided yet. The template drops the current page from its
   own board and verifies every candidate against a published page
   before returning it, so there is never a seventh and never a 404.

   Six entries under six rules. No card, no fill, no border box —
   the number, the type scale and the rule do the work, and the hit
   area is the whole cell rather than the 20px line of text it was.
   ============================================================ */

.cz-choiceboard__head {
  margin-bottom: clamp(26px, 2.8vw, 44px);
}

.cz-choiceboard__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 2.8vw, 52px);
  row-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cz-choiceboard__item {
  border-top: 1px solid var(--cz-line);
}

/* The anchor IS the cell. `display: grid` on the <a> is what turns a
   20px line of text into a target the whole entry deep — which is
   the tap-target fix and the design in one declaration rather than a
   min-height bolted on afterwards. */
.cz-choicecard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  column-gap: 14px;
  align-items: start;
  padding: 17px 0 clamp(20px, 2vw, 28px);
  /* The state channel, as on the lateral: a transparent rule that
     goes gold, so hover changes weight rather than colour alone. */
  border-top: 2px solid transparent;
  margin-top: -1px;
  transition: border-color .3s var(--cz-ease);
}

.cz-choicecard__no {
  grid-column: 1;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--cz-gold-emph);
}

.cz-choicecard__go {
  grid-column: 2;
  grid-row: 1;
  display: inline-flex;
  align-self: start;
  margin-top: -3px;
  color: var(--cz-mid);
  transition: color .3s var(--cz-ease);
}

.cz-choicecard__title {
  grid-column: 1 / -1;
  margin-top: 12px;
  font-size: clamp(17px, .5vw + 15.4px, 21px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.022em;
  color: var(--cz-ink);
  text-wrap: balance;
  transition: color .3s var(--cz-ease);
}

.cz-choicecard__note {
  grid-column: 1 / -1;
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cz-mid);
  text-wrap: pretty;
}

.cz-choicecard:hover,
.cz-choicecard:focus-visible {
  border-top-color: var(--cz-gold-emph);
}

.cz-choicecard:hover .cz-choicecard__go,
.cz-choicecard:focus-visible .cz-choicecard__go {
  color: var(--cz-gold-emph);
}


/* ============================================================
   4 · INDEX LEDGER — page-kind-index.php
   ============================================================

   ADDED 3 Sep 2026, and it is the same defect this file was written
   for, one spine further along: `.cz-indexlist`, `__list`, `__row`,
   `__no`, `__main`, `__title`, `__stand` and `__meta` had ZERO rules
   in ALL FOURTEEN stylesheets. Routes: /faqs/, /blogs/, /articles/ —
   every page cz_page_kind_map() sends to the `index` spine, eight
   rows on each.

   What the reader was getting, measured over live HTTP at 1440 with
   the served theme before this block:

     ol.cz-indexlist__list   browser-default decimal markers, so
                             every row was numbered TWICE — once by
                             the UA at "1." and once by the template's
                             own `<span class="cz-indexlist__no">01`
     .cz-indexlist__row      no rule, no separation: eight
                             destinations run together as one
                             undifferentiated block of text
     the anchor              inline, so the target was the 20px line
                             of the title and not the row
     __no / __title /        four spans of different jobs at one
     __stand / __meta        inherited 16px, in one inherited colour,
                             with "01", the headline, the standfirst
                             and "20 min read" reading as a single
                             run-on sentence
     h2.cz-pagesec__title    UA h2, 24px, tight against the list

   THE STRUCTURE, and why it is not one of the four already here.
   This is a LEDGER: three tracks on a shared baseline — a numeral
   gutter, the entry, and a right-hand meta rail — with every row on
   a hairline. The choice board above is a three-column grid of
   stacked cells; the lateral is a single horizontal rail; the
   contact panel is an asymmetric two-column split; `.cz-routes` is
   a sticky index beside dark panels. A full-width ruled ledger whose
   numerals and reading times align in two vertical rails is a shape
   none of them makes (R1), and it is the shape a printed contents
   page has had for two hundred years, which is what this component
   is.

   No card, no fill, no panel. The rules, the numeral rail and the
   type scale carry it (R51). ============================================================ */

.cz-indexlist {
  /* Reduced top for the same R48 reason as the three above: on /faqs/
     and /blogs/ this follows prose, and on /articles/ — 0 words — it
     follows the masthead, which has already paid for that join with
     its own padding and bottom border. No section border in either
     direction: the first row's hairline opens the component from
     inside it, so it cannot double with the masthead's on /articles/,
     and `.cz-consult` below supplies an ink ground that marks the
     closing join by changing colour. */
  padding-block: clamp(40px, 4vw, 64px) clamp(48px, 4.8vw, 80px);
}

.cz-indexlist__list {
  margin: 0;
  padding: 0;
  /* The template prints "01".."08" itself, in a styled gutter. Left
     alone the UA printed its own decimal marker as well, so every row
     carried two numbers that disagreed about their own format. */
  list-style: none;
}

.cz-indexlist__row {
  border-top: 1px solid var(--cz-line);
}

/* The anchor IS the row — same single declaration that fixes the tap
   target and builds the design, as on `.cz-choicecard`.

   `align-items: baseline` is what makes this a ledger rather than
   three stacked columns: the 12px numeral, the ~22px headline and the
   12px reading time sit on ONE baseline, so the eye reads across a
   row and down a rail at the same time. Aligning to `start` instead
   put the numeral's cap 6px above the headline's and the rails
   stopped being rails. */
.cz-indexlist__row > a {
  display: grid;
  grid-template-columns: minmax(0, 42px) minmax(0, 1fr) minmax(0, max-content);
  align-items: baseline;
  column-gap: clamp(14px, 1.6vw, 28px);
  padding: 20px 0 clamp(22px, 2.2vw, 30px);
  /* The state channel this file uses on every ruled component: a
     transparent 2px rule that goes gold, so hover adds a LINE rather
     than only changing a colour. */
  border-top: 2px solid transparent;
  margin-top: -1px;
  transition: border-color .3s var(--cz-ease);
}

.cz-indexlist__no {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
  color: var(--cz-gold-emph);
}

.cz-indexlist__main {
  min-width: 0;
}

.cz-indexlist__title {
  display: block;
  font-size: clamp(17px, .55vw + 15.2px, 22px);
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -.024em;
  color: var(--cz-ink);
  text-wrap: balance;
  transition: color .3s var(--cz-ease);
}

/* The leading line, not the whole excerpt.

   cz_standfirst()'s second argument is a target, not a truncation:
   where a post carries its own excerpt the function returns it whole,
   so the eight rows on /faqs/ arrive here carrying between 84 and 367
   characters. Left to run, one row was five lines deep and its
   neighbour was one, and a ledger whose rows differ by 4:1 in height
   is a list of paragraphs rather than an index.

   Clamped to two lines VISUALLY rather than cut in PHP, so nothing is
   lost to a screen reader or to in-page search, and so the row keeps
   its full text if a browser ignores the property — the failure mode
   is a taller row, never a missing sentence. */
.cz-indexlist__stand {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: 74ch;
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cz-mid);
  text-wrap: pretty;
}

/* The right-hand rail. Tabular figures so "8 min read" and
   "20 min read" align on the digit rather than on the word, which is
   the whole reason a ledger has a right rail at all. */
.cz-indexlist__meta {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
  color: var(--cz-mid);
}

/* Three cues, two of them not colour: a 2px rule appears where there
   was none, the title takes an underline, and the numeral brightens.
   WCAG 1.4.1 is satisfied twice over before the colour is counted. */
.cz-indexlist__row > a:hover,
.cz-indexlist__row > a:focus-visible {
  border-top-color: var(--cz-gold-emph);
}

.cz-indexlist__row > a:hover .cz-indexlist__title,
.cz-indexlist__row > a:focus-visible .cz-indexlist__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--cz-gold-emph);
}


/* ============================================================
   5 · LANDING — page-kind-landing.php, /thank-you/
   ============================================================

   ADDED 3 Sep 2026. `.cz-landing`, `.cz-landing__hours`,
   `.cz-landing__routes`, `__list`, `__title` and `__note`: zero rules
   in all fourteen stylesheets. One route, /thank-you/, and it is the
   page every form on this site sends its reader to.

   Measured before this block, at 1440:

     .cz-landing            no padding of its own, and the 13-word
                            confirmation set at the full 1360px
                            container width
     .cz-landing__hours     a bare <dl>: the UA's 40px dd indent
                            against nothing, and each row rendering
                            as "Monday – Thursday 9:00 – 18:00" in one
                            inherited weight, size and colour — the
                            day and the hours indistinguishable
     .cz-landing__list      a disc-bulleted <ul>; the four anchors
                            inline, so each target was one line of
                            text, with the title, the note and the
                            arrow running together
     h2.cz-pagesec__title   UA h2, 24px

   TWO STRUCTURES, and neither repeats one already in this file.

   The hours are a HORIZONTAL BAND — one label over four columns.
   /contact/ sets the same facts as a vertical dotted ledger in a
   narrow reference column, because there they sit beside a form in a
   two-column panel. Here the page is short, centred and has nothing
   else in it, so the same content takes the shape the space wants: a
   row of four, day quiet above hours loud, which reads at a glance as
   "when will I hear back" rather than as a table to be studied. Same
   facts, same source (cz_opening_hours()), different geometry — which
   is R1 working rather than R1 broken.

   The routes are a MANIFEST — title, note and arrow on one baseline
   in three aligned columns, rows on hairlines. Nothing else on this
   site sets an entry's title and its explanatory note on a shared
   baseline; the choice board stacks them, the lateral drops the note
   entirely, `.cz-route` puts them in a dark panel. A departures-board
   line is a fifth shape.
   ============================================================ */

.cz-landing {
  /* Under the masthead, which has paid for the join already (R48). */
  padding-block: clamp(34px, 3.4vw, 52px) clamp(40px, 4vw, 64px);
}

/* A confirmation is one sentence. At the full container it was set
   across 1360px at 1440 and 1520px at 1600 — R5's "no dead white"
   with the white on the right of a single line of type. */
.cz-landing .cz-prose {
  max-width: 62ch;
}

.cz-landing__hours {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(20px, 2.4vw, 44px);
  row-gap: 18px;
  max-width: 62ch;
  margin: clamp(32px, 3.4vw, 52px) 0 0;
}

.cz-landing__hours dt {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  padding-top: 16px;
  border-top: 1px solid var(--cz-line);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-gold-emph);
}

/* The UA's 40px inline indent on a dd indents against nothing here —
   the same defect the contact list had, arriving on a different
   element in a different template. */
.cz-landing__hours dd {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 0;
}

.cz-landing__hours dd > span:first-child {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .06em;
  color: var(--cz-mid);
}

.cz-landing__hours dd > span + span {
  font-size: clamp(14.5px, .28vw + 13.6px, 16px);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  color: var(--cz-text);
}

/* ---- the manifest ---- */

.cz-landing__routes {
  /* No bottom border and no closing rule: the footer's own ink ground
     is immediately below and a ground change marks a join on its own
     (R48). The last row's hairline is the component's own foot. */
  padding-block: clamp(44px, 4.4vw, 72px) clamp(48px, 5vw, 84px);
}

.cz-landing__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cz-landing__list li {
  border-top: 1px solid var(--cz-line);
}

.cz-landing__list li:last-child {
  border-bottom: 1px solid var(--cz-line);
}

/* Three tracks on one baseline. The title track is a clamp rather
   than a fraction so the notes start at the same x on every row —
   `max-content` sized it to each row's own title and the second
   column staggered by up to 90px, which is a list of four things
   rather than a manifest of one thing four times. */
.cz-landing__list li > a {
  display: grid;
  grid-template-columns: minmax(0, clamp(200px, 22vw, 330px)) minmax(0, 1fr) 18px;
  align-items: baseline;
  column-gap: clamp(18px, 2.2vw, 40px);
  padding: 18px 0 20px;
  border-top: 2px solid transparent;
  margin-top: -1px;
  transition: border-color .3s var(--cz-ease);
}

.cz-landing__title {
  font-size: clamp(16px, .38vw + 14.6px, 19px);
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -.02em;
  color: var(--cz-ink);
  text-wrap: balance;
}

.cz-landing__note {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cz-mid);
  text-wrap: pretty;
}

/* The arrow is a bare `<svg class="arrow">` — the template gives it no
   wrapper, so it is reached through the list. main.css:127 already
   sizes it 18px and main.css:128 already travels it 4px on `a:hover`,
   so the movement is inherited and only the colour is declared here.
   `align-self: center` because the row is baseline-aligned and a glyph
   with no text in it has no baseline worth sharing. */
.cz-landing__list .arrow {
  align-self: center;
  color: var(--cz-mid);
  transition: color .3s var(--cz-ease);
}

/* Three cues again, and here the non-colour one is free: the arrow
   travels 4px under main.css:128 whatever this file says. */
.cz-landing__list li > a:hover,
.cz-landing__list li > a:focus-visible {
  border-top-color: var(--cz-gold-emph);
}

.cz-landing__list li > a:hover .arrow,
.cz-landing__list li > a:focus-visible .arrow {
  color: var(--cz-gold-emph);
}


/* ============================================================
   RESPONSIVE

   Each query is responsible for one band. The two that are written
   open-ended — 900 and 760 — are open-ended DELIBERATELY, because
   what they declare is what every width below them should also get;
   the one that is not is bounded on both sides. That is the rule
   §3.4 of 08-DESIGN-SYSTEM states and the trap it records: a bare
   max-width written for a tablet adjustment once matched 375px and
   collapsed the prose column to 135px.
   ============================================================ */

/* ---- the choice board, 761-1100: two columns ---- */
@media (min-width: 761px) and (max-width: 1100px) {
  .cz-choiceboard__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- below 900: the contact panel stops being two columns ---- */
@media (max-width: 900px) {
  .cz-contactpanel__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(30px, 5vw, 44px);
  }

  /* The details keep a measure of their own rather than running the
     full width of a tablet — a five-row label/value list set at
     860px is a line length nothing needs. */
  .cz-contactpanel__details {
    max-width: 46ch;
  }
}

/* ---- below 860: the lateral rail becomes a stack ---- */
@media (max-width: 860px) {
  .cz-lateral__list {
    display: block;
    border-top: 0;
  }

  .cz-lateral__item {
    border-top: 1px solid var(--cz-line);
  }

  /* A stack is closed at the bottom; a rail is not. The horizontal
     form sits ON one rule and needs no second one under it. */
  .cz-lateral__item:last-child {
    border-bottom: 1px solid var(--cz-line);
  }

  .cz-lateral__link {
    /* A full-width row has an edge worth reaching, so the affordance
       goes back to it — the opposite call from the rail above, for
       the opposite reason. */
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: normal;
    padding: 14px 0 14px 14px;
    border-top: 0;
    border-left: 2px solid transparent;
    margin-top: 0;
    row-gap: 0;
  }

  /* Full-width rows have room the rail cell did not, so the
     affordance comes back onto the title's own line at the right
     edge — the arrow and the label occupy the same slot because a
     given item has one or the other, never both. */
  .cz-lateral__here {
    grid-column: 2;
    grid-row: 1;
  }

  /* The state channel rotates with the layout: a rule above the item
     when the rail is horizontal, a rule beside it when it is
     vertical. Same 2px, same gold, same three non-colour cues. */
  .cz-lateral__item.is-current .cz-lateral__link {
    border-top-color: transparent;
    border-left-color: var(--cz-gold-emph);
  }

  a.cz-lateral__link:hover,
  a.cz-lateral__link:focus-visible {
    border-top-color: transparent;
    border-left-color: var(--cz-gold-emph);
  }
}

/* ---- below 860: the manifest stops sharing a baseline ----

   The three tracks hold to 860 and no further: at 861 the title track
   is 200px (the clamp floor) and "Eleven zones we are an authorized
   channel partner for" has ~570px, which is still a manifest. Below
   it the note would be narrower than the title it explains, so the
   two swap from columns to rows and the arrow keeps the top line. */
@media (max-width: 860px) {
  .cz-landing__list li > a {
    grid-template-columns: minmax(0, 1fr) 18px;
    align-items: start;
    row-gap: 7px;
  }

  .cz-landing__title {
    grid-column: 1;
    grid-row: 1;
  }

  .cz-landing__note {
    grid-column: 1;
    grid-row: 2;
  }

  .cz-landing__list .arrow {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin-top: 1px;
  }
}

/* ---- below 760: one column everywhere ---- */
@media (max-width: 760px) {
  .cz-choiceboard__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cz-choiceboard__head {
    max-width: none;
  }

  /* Four hours columns become two. Not one: the four values are 8-14
     characters and a single column would run the band four rows deep
     for no gain. Measured at 375 the container is 343px, so a column
     is 155px against "Monday – Thursday" at 12px/700 ≈ 112px and
     "By appointment" at 16px/700 ≈ 118px — both inside the track. */
  .cz-landing__hours {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- below 620: the ledger drops its right rail ----

   620 is the breakpoint 08-DESIGN-SYSTEM §3.4 records as the one that
   already releases the prose measure and stacks the postnav, and it
   is the width at which a three-track row stops working here: the
   meta rail needs ~86px and the numeral gutter 42px, leaving the
   headline under 400px on a 560px container. The reading time moves
   under the standfirst, where it reads as what it is — a property of
   the entry, not a column of the ledger. */
@media (max-width: 620px) {
  .cz-indexlist__row > a {
    grid-template-columns: minmax(0, 28px) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 10px;
  }

  .cz-indexlist__main {
    grid-column: 2;
    grid-row: 1;
  }

  .cz-indexlist__meta {
    grid-column: 2;
    grid-row: 2;
    text-align: left;
  }
}


/* ============================================================
   THE TOUCH FLOOR — R7, 44px.

   Restated here rather than left in main.css:4489. Those three
   declarations were an emergency floor written against components
   that had no rules at all; every selector in them ties with a rule
   above and this file prints later, so leaving the floor over there
   would make it depend on which of two files happens to load last.

   Measured at 375 and 414 with touch emulation, the design above
   already clears 44px on all three without help — a choice card is
   ~118px deep, a lateral row ~53px, a dd anchor 21px. The anchor is
   the one that needs the floor, and it gets it as a padded row
   rather than as a stretched hit box, so the underline still sits
   against the text.

   Gated on (pointer: coarse) so desktop rendering is untouched,
   which is how 19-MOBILE-A11Y-AUDIT measures it.
   ============================================================ */
@media (pointer: coarse) {
  /* Two anchors in one <dd> are already two rows; at 44px each the
     row height is the separation, so the 7px gap comes off. */
  .cz-contactpanel__list dd {
    gap: 0;
  }

  .cz-contactpanel__list dd > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .cz-lateral__link {
    min-height: 44px;
  }

  .cz-choicecard {
    min-height: 44px;
  }

  /* Both new rows clear the floor on their own at 375 — a ledger row
     measures ~104px and a manifest row ~76px — so these two never
     fire in practice. They are declared anyway, because "the design
     already clears it" is a measurement of today's copy: a
     single-line title with no standfirst would take a ledger row to
     41px, and a floor that only holds for the content that happens to
     be published is not a floor. */
  .cz-indexlist__row > a,
  .cz-landing__list li > a {
    min-height: 44px;
  }
}

/* R7 and R16 both say hover-only affordances are neutralised under
   (hover: none) — which is a different question from how big the
   target is, and is why this is a second query rather than more
   declarations in the one above. A tap leaves :hover stuck on many
   mobile browsers; a gold rule stuck under the last thing the reader
   touched is a false current-state on a component whose entire job
   is saying which page you are on. */
@media (hover: none) {
  a.cz-lateral__link:hover {
    border-top-color: transparent;
    border-left-color: transparent;
    color: var(--cz-text);
  }

  a.cz-lateral__link:hover .cz-lateral__go {
    color: var(--cz-mid);
  }

  .cz-choicecard:hover {
    border-top-color: transparent;
  }

  .cz-choicecard:hover .cz-choicecard__go {
    color: var(--cz-mid);
  }

  .cz-contactpanel__list dd > a:hover {
    color: var(--cz-gold-emph);
    text-decoration-color: rgba(133, 101, 39, .42);
  }

  /* Same reason as the two above: a tap leaves :hover stuck, and a
     gold rule and an underline left under the last row a reader
     touched read as "you are here" on two components whose whole job
     is offering somewhere to go. */
  .cz-indexlist__row > a:hover {
    border-top-color: transparent;
  }

  .cz-indexlist__row > a:hover .cz-indexlist__title {
    text-decoration: none;
  }

  .cz-landing__list li > a:hover {
    border-top-color: transparent;
  }

  .cz-landing__list li > a:hover .arrow {
    color: var(--cz-mid);
  }

  /* The current item is a STATE, not a hover. It is a <span>, so no
     :hover rule above can reach it — restated here only so the
     neutralisation cannot be read as switching it off. */
  .cz-lateral__item.is-current .cz-lateral__link {
    border-top-color: var(--cz-gold-emph);
  }
}

@media (hover: none) and (max-width: 860px) {
  .cz-lateral__item.is-current .cz-lateral__link {
    border-top-color: transparent;
    border-left-color: var(--cz-gold-emph);
  }
}


/* ============================================================
   `.cz-pagesec` — LOOKED AT, DELIBERATELY LEFT ALONE.

   It is a shared hook on TEN elements across SIX templates, and no
   stylesheet in this theme declares a bare `.cz-pagesec` rule. It is
   tempting to give it the one thing every one of those ten wants —
   `padding-block: var(--cz-y)`, which is what R19 says a new section
   takes — and collapse six declarations into one.

   THAT WOULD BREAK FIVE OF THE TEN. Enumerated rather than assumed:

     .cz-choiceboard   cz-pagesec   page-kind-choice.php:59
     .cz-consult       cz-pagesec   page-kind-choice.php:130
     .cz-lateral       cz-pagesec   page-kind-company.php:131
     .cz-consult       cz-pagesec   page-kind-company.php:159
     .cz-contactpanel  cz-pagesec   page-kind-contact.php:64
     .cz-indexlist     cz-pagesec   page-kind-index.php:58
     .cz-consult       cz-pagesec   page-kind-index.php:85
     .cz-landing__routes cz-pagesec page-kind-landing.php:66
     .cz-related       cz-pagesec   page-kind-service.php:94
     .cz-consult       cz-pagesec   page-kind-service.php:123

   `.cz-consult` declares its own `padding-block: var(--cz-y)` at
   main.css:3699 and `.cz-related` at article.css:258. Both are
   (0,1,0). A bare `.cz-pagesec` here is also (0,1,0), and this file
   prints after both — so it would win on SOURCE ORDER on four
   templates nobody asked to change, in four files this file does not
   own. That is §23.1 exactly, and §23.1 records the project losing to
   it four times.

   The five components that do want the rhythm are not asking for the
   same value either: each of the five blocks above takes a reduced
   TOP and a full bottom, and the reduction differs by what sits above
   it — a masthead border on one page, prose on another, an ink ground
   on a third. That is R48 reasoning, and R48 is about the JOIN, which
   a section cannot know about from its own class.

   So `.cz-pagesec` stays an empty hook. What it is actually good for
   is what it is being used for here: a name to hang a per-component
   `__title` rule off, which is where this file uses it and nowhere
   else. Making it carry layout is a cross-file change and belongs to
   whoever owns main.css and article.css (§12.5) — the change is to
   move `.cz-consult`'s and `.cz-related`'s padding onto a
   `.cz-pagesec` rule in main.css, where source order is on its side,
   not to add a competing one here.
   ============================================================ */

/* ---- /contact/: the link under the enquiry form (17 September 2026) ----

   The forms confirm in place, so /thank-you/ — what happens after an
   enquiry — had no way in. One line under the form, set like the
   panel's own links (gold at ink weight, underlined, R17: gold is
   emphasis, never a fill), with a 44px target (R7). */
.cz-contactpanel__next {
  margin: 16px 0 0;
}
.cz-contactpanel__next a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--cz-gold-emph);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(133, 101, 39, .42);
  text-underline-offset: 3px;
  transition: color .25s var(--cz-ease), text-decoration-color .25s var(--cz-ease);
}
.cz-contactpanel__next a:hover,
.cz-contactpanel__next a:focus-visible {
  color: var(--cz-ink);
  text-decoration-color: currentColor;
}

/* ---- /sitemap/: the generated sections (17 September 2026) ----

   template-parts/content/sitemap-extras.php. The topic index is 96
   short links, so it runs in columns rather than as one long list;
   each item keeps the prose marker and a 44px target (R7).
   `.cz-sitemap-extras .cz-sitemap-topics` (0,2,0) outranks
   `.cz-prose ul` (0,1,1) without !important. */
.cz-sitemap-extras {
  margin-top: clamp(32px, 3vw, 48px);
}
.cz-sitemap-extras .cz-sitemap-topics {
  columns: 2 16rem;
  column-gap: 36px;
  margin: 12px 0 0;
}
.cz-sitemap-extras .cz-sitemap-topics li {
  break-inside: avoid;
  margin-top: 0;
}
.cz-sitemap-extras .cz-sitemap-topics a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  line-height: 1.3;
}

/* HAND-OFF PANEL — 18 Sep 2026.
   His instruction: a highlighted button to finvisors.ae on /vat-corporate-tax/
   and /tax-and-financial-advisory/, because that firm does the tax work. The
   panel earns its weight with a gold emphasis rule and a tinted ground, not a
   card: the action itself is blue, since gold is never a button fill (R17).
   Sits inside .cz-reading__body or .cz-page__single, so it needs no container
   of its own — the 28px inner padding is its only inset, and the button keeps a
   44px target (R7). */
.cz-handoff {
  margin-top: clamp(36px, 3.4vw, 56px);
  border-left: 3px solid var(--cz-gold);
  background: var(--cz-paper-2);
}
.cz-handoff__inner {
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 32px);
  max-width: 68ch;
}
.cz-handoff__eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cz-gold-emph);
}
.cz-handoff__title {
  margin: 0 0 10px;
  font-size: clamp(19px, 1.2vw + 13px, 25px);
  line-height: 1.22;
  font-weight: 700;
  letter-spacing: -.01em;
  text-wrap: balance;
  color: var(--cz-ink);
}
.cz-handoff__note {
  margin: 0 0 18px;
  font-size: 15.5px;
  line-height: 1.66;
  color: var(--cz-text);
  text-wrap: pretty;
}
.cz-handoff__cta {
  min-height: 44px;
}

/* ==========================================================================
   THE LEGAL PAGES' SECTION LIST — /privacy-policy/, /terms-of-use/, /sitemap/
   ==========================================================================

   Measured at 375px on 20 September 2026, while checking his *"proper
   rendering for both mobile and desktop view"*: the disclosure that opens
   these pages' section list was **25px tall** and entirely unstyled. Every
   `.cz-legal__*` class the template writes had no rule anywhere in the
   theme — `grep -rn "cz-legal" assets/css/` returned nothing — so the
   browser's own <details> marker and default type were what shipped on
   three pages.

   25px is under the 44px touch floor (R7), and a bare marker against this
   type is the "weak html page" look he has complained about elsewhere. So:
   a real control, house hairlines, and the list in two columns where there
   is room for two.

   No motion: a disclosure that animates its own height fights the sticky
   header, and R16 wants nothing moving that does not have to. The marker
   rotates, which is a transform on a 10px glyph, and it is switched off
   under prefers-reduced-motion with everything else. */

.cz-legal__toc {
  margin: 0 0 clamp(28px, 3vw, 44px);
  padding: 0;
  border-top: 1px solid var(--cz-line);
  border-bottom: 1px solid var(--cz-line);
}

.cz-legal__toc > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 0;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cz-text);
}

/* The default triangle, gone on both engines, replaced below. */
.cz-legal__toc > summary::-webkit-details-marker {
  display: none;
}

.cz-legal__toc > summary::marker {
  content: '';
}

.cz-legal__toc > summary::before {
  content: '';
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-right: 1.5px solid var(--cz-gold);
  border-bottom: 1.5px solid var(--cz-gold);
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .28s var(--cz-ease, ease);
}

.cz-legal__toc[open] > summary::before {
  transform: rotate(-135deg) translate(-1px, -1px);
}

.cz-legal__toc > summary:focus-visible {
  outline: 2px solid var(--cz-gold);
  outline-offset: 3px;
}

.cz-legal__toclist {
  margin: 0 0 18px;
  padding: 0 0 0 2px;
  list-style: none;
  counter-reset: cz-legal-toc;
}

.cz-legal__tocitem {
  margin: 0;
  counter-increment: cz-legal-toc;
}

.cz-legal__tocitem a {
  display: block;
  min-height: 44px;
  padding: 11px 0 11px 30px;
  position: relative;
  font-size: 15px;
  line-height: 1.45;
  color: var(--cz-text);
  text-decoration: none;
  border-top: 1px solid rgba(8, 10, 13, .06);
}

.cz-legal__tocitem:first-child a {
  border-top: 0;
}

.cz-legal__tocitem a::before {
  content: counter(cz-legal-toc);
  position: absolute;
  left: 0;
  top: 12px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--cz-mid);
}

.cz-legal__tocitem a:hover,
.cz-legal__tocitem a:focus-visible {
  color: var(--cz-gold);
}

/* An H3 is a subsection: indented, and its number is not part of the count. */
.cz-legal__tocitem--h3 a {
  padding-left: 48px;
  font-size: 14px;
  color: var(--cz-mid);
}

.cz-legal__tocitem--h3 a::before {
  left: 22px;
}

.cz-legal__foot {
  margin: clamp(28px, 3vw, 44px) 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cz-line);
  font-size: 15px;
  color: var(--cz-mid);
}

.cz-legal__foot a {
  color: var(--cz-blue, #1f4f8b);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Two columns once there is room for two, which on these lists there is
   from about 760px — measured, not assumed: /privacy-policy/ carries 21
   sections and /terms-of-use/ 17, so one column runs to two screens on a
   laptop. Bounded at both ends (R7). */
@media (min-width: 760px) {
  .cz-legal__toclist {
    columns: 2;
    column-gap: clamp(24px, 3vw, 56px);
  }

  .cz-legal__tocitem {
    break-inside: avoid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cz-legal__toc > summary::before {
    transition: none;
  }
}

/* ==========================================================================
   THE LEGAL DOCUMENTS, REDESIGNED — 28 September 2026
   ==========================================================================

   His instruction: *"I do Want you to redesign contact, thank-you, privacy
   policy, terms of use pages. Properly professionally structured, alligned, no
   empty space."*

   Measured at 1440 BEFORE anything changed, because two of those words name
   things that turn out not to be wrong: /terms-of-use/ put 91 of 91 painted
   items on ONE left edge, and carried two gaps over 48px whose worst was 119px
   of section padding. Alignment and empty space were both already right, and
   looking for them would have been the expensive direction (R82.4, B300).

   What WAS wrong: seventeen consecutive H2s of equal weight over 4,016 words,
   with the section list — the one thing that makes such a document usable —
   collapsed behind a disclosure. Everything below serves the two fixes the
   template makes: the contents is open, and the clauses are numbered.

   Nothing here is a box (R51). The contents panel is bounded by the hairlines
   it already had; the clause number is a mark in the margin of its own heading,
   not a badge on a tinted field. */

/* THE META LINE — last reviewed, and how many clauses. Two facts a reader of a
   policy is looking for, and both were previously only in the front matter. */
.cz-legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0 0 clamp(20px, 2.2vw, 30px);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cz-mid);
}

/* A hairline between the items rather than a bullet: the separator is
   structure, not a character in the content (R51). */
.cz-legal__metaitem + .cz-legal__metaitem {
  padding-left: 18px;
  border-left: 1px solid var(--cz-line);
}

/* THE EMPTY RIGHT COLUMN, AND WHAT BELONGS IN IT — 28 September 2026.

   He asked, looking at /privacy-policy/ at about 1900px: *"empty spaces on
   right?"* He was right, and no instrument of mine was looking for it. These
   pages are ONE column inside a container that runs to min(1720px, ...), and
   the prose stops at its own measure — so from about 1200px up, everything to
   the right of the text is dead. R69 put a form in that column on every content
   page and explicitly exempted only /contact/, /thank-you/, the homepage,
   /visa-services/ and the guides; the legal pages were never exempted, they
   simply have no track to put anything in.

   A LEAD FORM IS THE WRONG THING TO PUT THERE, and this template's own docblock
   says why: a privacy policy is the page a reader checks when deciding whether
   to trust the form on some other page, so selling to them here reads as bad
   faith. That argument is sound and it rules out the obvious filler.

   The clause index is the right thing. It moves out of the top of the document
   and into the column as a sticky rail, which does three things at once: the
   dead space carries navigation, the document loses the 433px block that sat
   above its first clause, and a reader part-way down a 12,500px policy can still
   see every clause. R9 already requires a docked scrollable contents list for a
   long document, so this is the treatment the project uses, not a new one.

   Below 1180px there is no column to be sticky in, so it returns to the top of
   the document at full width in two columns — the layout measured at 375 and
   1440 before this change. Bounded at both ends (R7). */
@media (min-width: 1180px) {

  /* THE COLUMN IS THE MEASURE, NOT THE CONTAINER — and the first version of this
     got it wrong in a way worth recording.

     `minmax(0, 1fr)` for the text and the rail in column 2 gave column 1 1,328px
     inside the 1,720px container while the prose fills only its own 879px
     measure. Measured at 1900: text 83..961, rail 1483..1803, and FIVE HUNDRED
     AND TWENTY-TWO PIXELS of nothing between them. That is the same void he
     pointed at, moved rather than removed — a rail pinned to the far edge of a
     wide container is not beside the text, it is across the page from it.

     So column 1 is sized to the measure and the grid is packed from the start.
     The text keeps the container's own left edge, which is the masthead's left
     edge and therefore R5's one left edge; the rail sits one gap away from the
     text where a margin note belongs; and the block is capped so there is no
     slack left inside it. What remains to the right of the block is page margin,
     which is what a page is supposed to have. */
  /* B317 — THE RAIL IS ON THE LEFT AND THE CONTENT FILLS THE CONTAINER.

     His correction, 29 Sep: *"I said for terms and priacy pages, the 'Clauses on this page' should
     be on left. And no empty space sideways right and left of content."* I had read an earlier
     message as confirming the right-hand side; it was not, and the later instruction governs.

     The track order is reversed AND the prose is released to fill what is left. The old pair —
     `minmax(0, 920px)` plus a 320px rail plus a 72px gap — summed to 1,312px inside a 1,513px
     container, so roughly 200px sat dead at the right edge on every clause page. That is the
     fourth surface he has reported dead width on, and the rule now is R87.4.

     CONSEQUENCE HE HAS ACCEPTED, recorded rather than argued: with the rail at 320px and the gap
     at 72px the prose takes about 1,120px at a 1600 viewport, which is a longer line than the
     ~880px measure these documents had. He has twice chosen no dead space over the measure, and
     a legal page is scanned by clause rather than read straight through. If he later wants the
     measure back, the answer is to narrow the CONTAINER on these pages, not to reintroduce the
     void — and `.container` centres itself, so that has to be done on the tracks (R5, and the
     mistake recorded in §7k). */
  .cz-page--clauses .cz-legal {
    display: grid;
    grid-template-columns: clamp(260px, 22vw, 320px) minmax(0, 1fr);
    column-gap: clamp(40px, 4vw, 72px);
    row-gap: 0;
    align-items: start;
  }

  /* The measure comes off, or the content cannot fill the track it was just given. */
  .cz-page--clauses .cz-legal > .cz-prose { max-width: none; }

  /* NO `max-width` HERE, AND THAT WAS THE SECOND MISTAKE IN THIS RULE.
     Capping `.cz-legal` at the sum of its tracks looked right and centred the
     whole block, because `.container` positions itself with auto side margins:
     the prose moved from 83px to 286px while the masthead above it stayed at
     83px. Measured at 1900 — a 200px indent under a full-width masthead, which
     is R5's one left edge broken by the fix for a void.

     `justify-content: start` alone packs both tracks against the container's own
     left edge and leaves the remainder as page margin on the right, which is
     what the masthead already does with its own measure. The container keeps its
     width and its margins; nothing is capped. */

  /* Everything that is the document itself stays in the first column. */
  .cz-page--clauses .cz-legal > * {
    grid-column: 2;
    min-width: 0;
  }

  /* B315 — `grid-row: 1 / -1` DID NOT SPAN THE GRID, IT PINNED THE RAIL TO ROW ONE.
     
     `-1` names the last line of the EXPLICIT grid. This grid declares columns only, so its explicit
     row count is zero and `-1` resolves to line 1 — making the declaration `1 / 1`, which is invalid
     and falls back to `1 / span 1`. The rail therefore occupied ROW 1 ALONE and, being fifteen
     clauses tall, made that row 900-odd pixels high. The three content children auto-placed into
     rows 1, 2 and 3, so the prose began BELOW the rail's full height and the left column above it was
     empty. That is the "empty space above" he reported on both legal pages, twice.
     
     Fixed by naming the rows rather than relying on `-1`: the three content children are placed
     explicitly, and the rail spans exactly those three. `row-gap: 0` keeps the joins on the elements'
     own margins, where they were before. */
  .cz-page--clauses .cz-legal > .cz-legal__meta { grid-column: 2; grid-row: 1; }
  .cz-page--clauses .cz-legal > .cz-prose       { grid-column: 2; grid-row: 2; }
  .cz-page--clauses .cz-legal > .cz-legal__foot { grid-column: 2; grid-row: 3; }

  .cz-page--clauses .cz-legal > .cz-legal__toc--open {
    grid-column: 1;
    grid-row: 1 / span 3;
    position: sticky;
    top: calc(var(--header-h, 96px) + 24px);
    margin: 0;
    padding-top: 0;
    border-top: 0;
  }

  /* One column in a 320px rail, and the list scrolls inside the viewport rather
     than running past the bottom of it. */
  .cz-page--clauses .cz-legal__toc--open .cz-legal__toclist {
    /* B315b — THE HORIZONTAL SCROLLBAR HE PHOTOGRAPHED WAS MULTICOL OVERFLOW, NOT LONG TEXT.
       
       `columns: 1` reads like "lay this out in a single column", and it does not: the element is
       still a MULTI-COLUMN CONTAINER with a column count of one. Give a multicol container a
       `max-height` and content that exceeds it does not scroll — it fragments into OVERFLOW COLUMNS
       to the right. Measured: `columnCount` computed to 1, every visible item was 318px inside the
       320px box, and `scrollWidth` was 686 because clause 4 onward had been laid out at x=1388,
       beyond the rail's right edge at 1340. Hiding the overflow would have hidden those clauses.
       
       So the reset is to stop being multicol, which takes BOTH properties: the base rule gives this
       list two columns from 760px, and `column-count: auto` alone would leave `column-width` to
       re-establish the container. As a plain block it scrolls vertically inside its own max-height,
       which is what a sticky rail of fourteen clauses needs. */
    column-count: auto;
    column-width: auto;
    overflow-wrap: anywhere;
    max-height: calc(100vh - var(--header-h, 96px) - 140px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Tighter in the rail than in a full-width block: 15px over two lines in a
     260px column is a wall. The 44px floor is kept (R7). */
  .cz-page--clauses .cz-legal__tocitem a {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 13.5px;
    line-height: 1.4;
  }
}

/* THE CONTENTS, OPEN. It reuses every rule the disclosure version already had —
   the numbered items, the 44px targets, the two columns from 760px — because
   those were written correctly in September and were simply never visible. What
   changes is the frame: a <nav> with a real heading instead of a <summary>
   a reader has to think to click. */
.cz-legal__toc--open {
  margin: 0 0 clamp(30px, 3.4vw, 48px);
  padding: clamp(18px, 2vw, 26px) 0 0;
  border-top: 1px solid var(--cz-ink);
  border-bottom: 1px solid var(--cz-line);
}

.cz-legal__toctitle {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cz-mid);
}

/* THE CLAUSE NUMBER. It hangs in the margin beside its heading so the heading's
   own left edge is the prose edge — one container, one left edge (R5). At the
   narrow end there is no margin to hang in, so it sits inline above the
   heading text instead of pushing it off the measure. */
.cz-legal__num {
  display: block;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  color: var(--cz-gold);
}

/* From 900px the prose column has room to the left, so the number hangs and the
   heading keeps the measure's own edge. Bounded at both ends (R7). */
@media (min-width: 900px) {
  .cz-page--clauses .cz-prose--legal h2 {
    position: relative;
  }

  .cz-page--clauses .cz-prose--legal h2 .cz-legal__num {
    position: absolute;
    left: -52px;
    top: .28em;
    width: 40px;
    margin: 0;
    text-align: right;
  }
}

/* A numbered clause heading carries more weight than an unnumbered one, because
   on this document the heading is the thing a reader scans for. The rule above
   it is the separator — no card, no tint (R51). */
/* The separation is the RULE plus enough air to own it, and no more. First draft
   was 58px of margin over 22px of padding — 80px before every heading, fourteen
   times on /terms-of-use/, which is about 1,120px of separation on one document
   and the opposite of "no empty space". 40 over 14 keeps the clause visibly
   detached, because the hairline is doing the separating and space is only
   giving it room. */
.cz-page--clauses .cz-prose--legal h2 {
  margin-top: clamp(26px, 2.8vw, 40px);
  padding-top: clamp(11px, 1.2vw, 14px);
  border-top: 1px solid var(--cz-line);
}

.cz-page--clauses .cz-prose--legal h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* The anchor lands the heading below the sticky header rather than under it.
   A clause list is only useful if the clause it jumps to is on screen. */
.cz-page--clauses .cz-prose--legal h2[id] {
  scroll-margin-top: calc(var(--header-h, 96px) + 24px);
}

/* THE CLAUSE INDEX IS CAPPED AND SCROLLABLE ON A PHONE — 28 September 2026.

   Measured at 375 after the panel was opened and then cut to clause level: 16
   items, 343 x 1,128px, because a clause title like "How long an enquiry is kept
   depends on whether it became a record we must retain" wraps to two lines in a
   343px column. That is 1.25 screens a reader scrolls past before the document
   starts, which is the empty space he asked to have removed, arriving as a side
   effect of the fix for something else.

   A capped, scrollable contents list is not an invention here — R9 requires
   exactly that for articles ("docked scrollable ToC"), so this is the treatment
   the project already uses where a list is longer than the space for it. It is a
   NAV, not a figure, so R70's ban on a scrollbar inside an exhibit does not
   reach it, and the scroll is vertical in a vertical list.

   50vh keeps it under half the screen on every phone size rather than a pixel
   figure that is right on one device. Bounded at the top end so the desktop
   panel, which fits in two columns, is never capped (R7). */
@media (max-width: 759px) {
  .cz-legal__toc--open .cz-legal__toclist {
    max-height: 50vh;
    overflow-y: auto;
    /* A hairline tells the reader the list continues past the fold. */
    border-bottom: 1px solid var(--cz-line);
    /* iOS momentum inside the list rather than the page behind it. */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* ============================================================================
   B329 — /contact/ REDESIGNED. 29 September 2026.

   *"overall the /contact page looks so plain boring, nothing is professionaly
   alligned, designed and structured. And also the form looks plain and boring
   too. Also a lot of emoty spaces within sections, content and overall many
   places. Redesign the whole contact page ... Should be professional, aestheitc,
   properly structured and alligned."*

   MEASURED BEFORE ANY DESIGN, at 1860 in a 1720px container:

     the h2                789px, sitting alone on a 1720px row
     the FORM              1720px wide, a 3-column grid of 534px fields, and a
                           last field spanning 1638px. A name box 534px wide
     the facts row         a 6-track grid holding 5 items — the sixth resolves
                           to 0px, an empty track
     the FAQ               879px inside a 1720px block: 841px of dead width
     section padding       64 top / 80 bottom, against .cz-consult's 96/96

   So "plain" is accurate and specific: it is one column of full-bleed bands.
   Nothing is beside anything, and a 534px input is not a designed field.

   WHY IT WAS LIKE THAT, AND WHY THAT REASON EXPIRED. B314 deliberately set
   `.cz-contactpanel__inner` to `display: block` and put the facts in one row,
   because at that moment the page had NO form — it had just moved to the shared
   footer section — and a 400px details column with nothing to its right would
   have left ~1,300px of dead width, which is the defect he had already reported
   on three pages. That reasoning was right for a page without a form. **Then his
   own next instruction put a form back on the page (R87.2), and nobody revisited
   the layout decision that the form's absence had justified.** A rule outliving
   its reason, one instruction later.

   THE SHAPE NOW. Two columns: the form is the page's purpose so it leads and
   takes the wider track; the office facts sit beside it instead of under it, in
   a column narrow enough that a fact is a fact rather than a stretched line.
   Nothing is full-bleed, nothing has dead width beside it, and the fields land
   at a real measure.
   ============================================================================ */

/* ---- the panel: two columns from 1080px ---- */
@media (min-width: 1080px) {

  .cz-contactpanel__inner {
    display: grid;
    /* The form track is free; the details track is capped, because a "Phone lines"
       value does not get better at 600px. `minmax(0, …)` on the free track so a
       long unbroken string cannot push the grid wider than the container. */
    grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 408px);
    column-gap: clamp(36px, 3.4vw, 72px);
    align-items: start;
    /* justify-content is not needed: both tracks are sized, and `1fr` consumes the
       slack rather than leaving it between them (the §7k hole). */
  }

  /* Column 1 carries the heading and the form, and it SPANS BOTH ROWS.
     Without the span, row 1's height came from the form column (619px) while the facts
     beside it ended at 549px, so the next-step line — the only thing in row 2 — waited
     for the form to finish and left 98px of nothing under the facts. Spanning the form
     across both rows makes row 1 the facts' own height, so the line follows them at its
     own margin. The two rows exist because column 2 has two items in it, which is what
     `span 2` needs to mean anything (B315's trap, avoided here on purpose). */
  .cz-contactpanel__details {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
  }

  /* Column 2 is the facts. It is lifted out of the details flow and placed, so it
     starts level with the heading rather than below the form. */
  .cz-contactpanel__list {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    padding-top: 0;
    border-top: 0;
  }

  /* One column of facts in a 408px track — five across was the old full-width row
     and it is what produced the empty sixth track. */
  .cz-contactpanel__list {
    display: block;
  }

  .cz-contactpanel__item + .cz-contactpanel__item {
    margin-top: clamp(18px, 1.5vw, 26px);
  }

  /* The next-step line belongs under the facts, in their column. */
  .cz-contactpanel__next {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin-top: clamp(20px, 1.8vw, 28px);
    padding-top: clamp(18px, 1.6vw, 24px);
  }

  /* ---- the form, as a designed surface rather than loose fields ---- */

  /* NO CARD HERE, AND ADDING ONE WAS THE MISTAKE HE CAUGHT IMMEDIATELY:
     *"what's up with borders, so many borders, borders inside borders, boxes in boxes,
     and leavin a lot of empty spaces everywhere, and yea including form too. wtf"*

     `.cz-form` ALREADY carries a four-sided border and 40px of padding from its own base
     rule — it is the surface, and it has been on 226 pages the whole time. I wrapped a
     second bordered, padded, white card around it without reading that rule first, so the
     panel measured: my border at x=62, the form's own border at x=99, then a border on
     every input. **Three nested boxes, with 36px + 40px of padding stacked between the
     outer two** — which is both the borders he saw and the empty space he saw, from one
     change.

     Only the margin stays. One box around the fields, which is what there was before.
     **Check what a component already draws before giving it a surface** — the same class
     of error as B326's "copying a rule is not copying its behaviour", one level out: I
     styled a wrapper without measuring the thing inside it. */
  .cz-contactpanel__form {
    margin: clamp(22px, 2vw, 30px) 0 0;
  }

  /* THE FIELD WIDTH WAS FIXED BY THE TRACK, NOT BY THE COLUMN COUNT — and dropping
     to two columns here was me solving it twice and cancelling myself out.
     The complaint was a 534px name box. That came from a THREE-column grid inside a
     1720px full-bleed form. Putting the form in a 1249px column already takes the
     same three tracks to 380px, which is a field. Overriding to two columns on top of
     that put it straight back to 538px — measured, identical to the number I had just
     removed. So the base grid is left alone and only the track changed. */
  /* (no grid-template-columns override here: `.cz-form__grid`'s own three tracks are
     correct once the form is in a column rather than across the page) */

  /* The submit row sits on a rule, so the card has a foot rather than ending on a
     button floating in padding. */
  /* No extra rule above the submit row either: `.cz-form__foot` already has its own
     spacing, and a hairline there was one more line in a panel he was already calling
     over-ruled. */
}

/* ---- the FAQ's dead width, at every width above the measure ---- */

/* 879px of FAQ inside a 1720px block left 841px of nothing. Three items in two
   columns fill the block and the list still reads top-to-bottom in each column.
   `align-items: start` so a two-line question does not stretch its neighbour. */
@media (min-width: 1200px) {
  /* Two columns ALONE did not close the hole: the list is inside the prose measure, so
     it split 879px into two 411px columns and left the same 841px of nothing beside it.
     A prose paragraph must keep its measure; a list of disclosure controls is not prose
     and has no reading-width argument, so it takes the container and the intro above it
     keeps the measure. Left edge unchanged — the list grows RIGHT only (R5). */
  .cz-contactprose .cz-faqlist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(32px, 3vw, 64px);
    align-items: start;
    max-width: none;
    width: 100%;
  }
  /* AND THE CAP WAS ON THE PARENT, WHICH `width: 100%` CANNOT ESCAPE.
     `.cz-prose { max-width: 74ch }` resolves to 878.7px, so `width: 100%` on the list
     asked for 100% of 879 and got it — the two columns split the measure and the 841px
     stayed exactly where it was. The container has to be released and the MEASURE moved
     onto the things that actually need one, which is every child except the list. */
  .cz-contactprose .cz-prose {
    max-width: none;
  }
  .cz-contactprose .cz-prose > :not(.cz-faqlist) {
    max-width: 74ch;
  }
}

/* ---- the section's own rhythm, to the figure the rest of the site now uses ---- */
.cz-contactpanel {
  padding-top: clamp(34px, 3.2vw, 48px);
  padding-bottom: clamp(38px, 3.6vw, 56px);
}

/* ===================================================================
   THE FINVISORS MARK ON THE HAND-OFF PANEL · 18 OCT 2026
   ===================================================================

   *"Also for finvisiors, use the logo attached for finvisors related sections."*

   NO PLATE, AND THAT IS MEASURED RATHER THAN CHOSEN. This panel's ground reads
   rgb(243, 245, 247) and the mark's own ink is black, so it prints exactly as its
   owner publishes it (R18) — the white plate on /admin/ exists only because those
   two surfaces are ink-dark (§7ao, B381 from the other direction).

   44px TALL, AND THAT IS WHERE THE CEILING COMES FROM. The lockup is three lines:
   FINVISORS, then "Tax consultants", then "A Consult Zone Group Company". At 44px
   the two taglines land near 8.8px and 7.4px, which is at parity with the 8.6px and
   7.3px Finvisors itself shows them at on finvisors.ae. Below about 38px they stop
   being type and become texture, which is why the badge over the homepage photograph
   kept its text instead (§7ap).

   `width: auto` beside the height, because the stretch his own 18 October report was
   about is exactly what a height with an inherited width produces (B453). */

.cz-handoff__mark {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
  margin: 0 0 18px;
}

@media (max-width: 600px) {
  /* 34px keeps the taglines at ~6.8px and ~5.7px — under the owner's own presentation,
     and the honest trade on a 343px column, where 181px of mark would otherwise take
     more than half the width of the panel it introduces. */
  .cz-handoff__mark { height: 34px; margin-bottom: 14px; }
}


/* ===============================================================================================
   THE COUNTRY CODE PICKER ON /contact/ — his report, 19 October: "cant even see the country code
   field in form in contact page."

   MEASURED BEFORE ANYTHING WAS WRITTEN: `+971` in rgb(255,255,255) and the country name in
   rgba(255,255,255,.62), both on a resolved background of rgb(255,255,255). **1.00:1.** The field
   holds the right value and none of it is visible.

   WHY: the block above turns this form light by naming `input`, `select` and `textarea` — the
   controls that existed when it was written on 29 September. The dial toggle is a `<button>` and
   reached /contact/ on 13 October (§7ai §2), so it was never in that list and kept main.css's
   dark-ground inks on a white card. **A rule written against the controls that exist does not cover
   one added later, and nothing fails loudly when it doesn't.**

   B424 is this defect in mirror image: there the guide's side form had its country names at 1.04:1
   because a DARK-ground form had been put in the LIGHT list. Same component, same measurement,
   opposite direction.

   EVERY VALUE IS READ OFF THE SITE'S OWN LIGHT-GROUND PICKER — editorial.css's
   `.cz-reading__margin .cz-railform .cz-dial__*`, the R69 margin form — and the toggle's background
   and border are this panel's own input values. Nothing here is a new tuned constant (R82.6).

   The panel is made light as well, because the margin form does, and a white field opening a black
   dropdown is the inconsistency he objects to by name. The prefix is this block's own chain, so the
   specificity matches and no !important is needed.
   =============================================================================================== */
body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__toggle {
  min-height: 46px;
  background: #fff;
  border-color: #d3dae1;
  color: var(--cz-ink, #050607);
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__toggle:hover {
  background: #fbfcfd;
  border-color: #b9c3cd;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__toggle:focus-visible {
  border-color: var(--cz-blue, #1769ff);
  box-shadow: 0 0 0 3px rgba(23, 105, 255, .14);
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__code {
  color: var(--cz-ink, #050607);
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__country {
  color: #5b6570;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__chevron {
  color: #6b7683;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__panel {
  background: #fff;
  border-color: #d3dae1;
  box-shadow: 0 18px 40px -18px rgba(5, 6, 7, .28);
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__searchwrap {
  border-bottom-color: #e4e8ec;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__searchwrap svg {
  color: #6b7683;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__search {
  background: #fff;
  color: var(--cz-ink, #050607);
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__search::placeholder {
  color: #6b7683;
  opacity: 1;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__option {
  color: var(--cz-ink, #050607);
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__option:hover,
body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__option:focus-visible {
  background: #f3f5f7;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__option[aria-selected="true"] {
  color: var(--cz-gold-ink, #8a6a32);
  font-weight: 700;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__option-code {
  color: #5b6570;
}

body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) .cz-contactpanel__form .cz-form .cz-field--dial .cz-dial__empty {
  color: #5b6570;
}