:root {
      /* ---------------------------------------------------------------
         TOKENS — declared once, here, and nowhere else.
         Nine further :root blocks used to redeclare these further down
         the file with drifting values; two golds and two inks shipped on
         every page as a result. Anything that needs a new value edits a
         line in this block. The only other :root declarations in this
         stylesheet are the two viewport overrides further down — header
         height at 680px, section rhythm at 760px — and they carry
         nothing else.
         --------------------------------------------------------------- */

      /* Ground */
      --ink: #071522;
      --ink-2: #10151b;
      --navy: #071d2e;
      --slate: #5e6871;
      --paper: #ffffff;
      --paper-2: #f3f5f7;
      --white: #ffffff;

      /* Accent — blue is an action, gold is emphasis */
      --blue: #1769ff;
      --blue-hover: #2b78ff;
      --gold: #c7a36b;
      --gold-2: #e0c79f;

      /* Lines */
      --line: rgba(8,10,13,.14);
      --line-dark: rgba(255,255,255,.16);

      /* Type */
      --serif: "Overpass", "Segoe UI", Arial, sans-serif;
      --sans: "Overpass", "Segoe UI", Arial, sans-serif;

      /* Layout, rhythm, motion */
      --container: min(1720px, calc(100% - clamp(32px, 4.5vw, 72px)));
      --section-y: clamp(56px, 4.25vw, 74px);
      --header-h: 80px;
      --header-h-compact: 70px;
      --surface-shadow: 0 28px 80px rgba(8, 10, 13, .14);
      --ease: cubic-bezier(.2,.7,.2,1);

      /* Dark surfaces */
      --cz-black: #050607;
      --cz-panel: #0b0c0e;
      --cz-panel-2: #101114;
      --cz-dark-line: rgba(255,255,255,.14);

      /* CZ system — everything built since the rebuild reads these */
      --cz-gold: #c7a36b;
      --cz-gold-soft: #e0c79f;
      /* Gold at ink weight, for the LIGHT sections.
         #c7a36b measures 8.57:1 on the dark grounds and 2.16:1 on --cz-paper-2
         / 2.36:1 on #fff — one token carrying two backgrounds, which is why
         every eyebrow, emphasis span, text link and meta label on a light
         section failed the 4.5:1 body / 3:1 large threshold at once. Same hue,
         darker value: 4.94:1 on --cz-paper-2 and 5.40:1 on #fff. */
      --cz-gold-ink: #856527;
      /* What the SHARED text primitives read.

         FLIPPED FROM OPT-IN TO OPT-OUT, 1 Sep 2026.

         This defaulted to the dark-surface gold, and the comment that stood
         here argued the case for it: "a light section missed here keeps
         today's known defect, whereas defaulting the other way and missing a
         dark section would put ink gold on near-black."

         The argument is careful but it weighs the two failures as though they
         were equal, and they are not:
           - a light section that is missed renders #c7a36b at 2.16:1 on
             --cz-paper-2 and 2.36:1 on #fff. That is below the 4.5:1 body
             threshold by more than half. It is not dim; it is unreadable.
           - a dark section that is missed renders --cz-gold-ink on near-black
             at 3.75:1. Under the 4.5:1 threshold, but legible — a quieter
             gold, not a missing one.
         The safe default is therefore the light one, which is also the
         majority surface on this site.

         The deciding fact is that the opt-in was never actually wired. In the
         whole stylesheet exactly ONE section ever opted in (.cz-faq). Two
         independent audits, using different instruments, measured the result:
         17 failing instances of .cz-eyebrow alone, across 10 of 14 routes, at
         2.16:1. A mechanism that depends on every future light section
         remembering to opt in is a mechanism that fails by default, and this
         one did.

         Every dark surface in the stylesheet is now named explicitly in the
         block below, so the bright gold is restored by declaration rather than
         by hope. Custom properties resolve by inheritance, not specificity, so
         a section only has to be an ancestor — it cannot lose a specificity
         contest to a colour rule further down. */
      --cz-gold-emph: var(--cz-gold-ink);
      --cz-blue: #1769ff;
      --cz-blue-hover: #2b78ff;
      --cz-ink: #050607;
      --cz-ink-2: #0a0c10;
      --cz-ink-3: #111519;
      --cz-paper: #ffffff;
      --cz-paper-2: #f3f5f7;
      --cz-line: rgba(8,10,13,.11);
      --cz-line-dk: rgba(255,255,255,.12);
      --cz-text: #14181c;
      --cz-mid: #5b6570;
      --cz-lt: rgba(255,255,255,.72);
      --cz-faint: rgba(255,255,255,.46);
      --cz-y: clamp(72px, 5.4vw, 96px);
      --cz-ease: cubic-bezier(.2,.7,.2,1);
      --cz-ease-out: cubic-bezier(.16,1,.3,1);
}

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body.menu-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }
    ::selection { background: var(--gold); color: var(--ink); }

    .button:hover { transform: translateY(-2px); }
    .button-dark { color: #fff; background: var(--ink); }
    .button-dark:hover { background: #1c2229; }
    .button-light { color: var(--ink); background: var(--paper); }
    .button-light:hover { background: #fff; }
    .button-outline { color: inherit; border-color: currentColor; background: transparent; }
    .arrow { width: 18px; height: 18px; transition: transform .3s var(--ease); }
    a:hover .arrow, button:hover .arrow { transform: translateX(4px); }

    /* Header */
    .brand { display: flex; align-items: center; min-width: 0; }
    .primary-nav { display: flex; }
    .nav-link:hover, .nav-item:hover > .nav-link { color: var(--gold-2); }
    .chev { width: 11px; height: 11px; transition: transform .25s ease; }
    .nav-item:hover .chev { transform: rotate(180deg); }
    .dropdown {
      position: absolute;
      top: calc(100% - 4px);
      left: -24px;
      width: 288px;
      padding: 12px;
      color: #fff;
      background: #0c1015;
      border: 1px solid rgba(255,255,255,.12);
      box-shadow: 0 30px 70px rgba(0,0,0,.36);
      opacity: 0;
      visibility: hidden;
      transform: translateY(10px);
      transition: .25s var(--ease);
    }
    .dropdown.wide { width: 330px; }
    .nav-item:hover .dropdown, .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
    .dropdown a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 44px;
      padding: 0 13px;
      color: rgba(255,255,255,.74);
      font-size: 13px;
      border-bottom: 1px solid rgba(255,255,255,.07);
      transition: color .2s ease, background .2s ease, padding .2s ease;
    }
    .dropdown a:last-child { border-bottom: 0; }
    .dropdown a:hover { color: #fff; background: rgba(255,255,255,.06); padding-left: 18px; }
    .header-action { display: flex; }
    .header-phone svg { width: 18px; }
    .header-cta { display: flex; }
    .menu-toggle { display: none; }

    /* Hero */
    .hero-bg {
      animation: cinematicDrift 18s ease-in-out infinite alternate;
    }
    /* Softened 31 Aug from scale(1.03)->scale(1.09) / translate(-1.2%,-.6%).
       A transform scale about the centre pushes content out through the top of
       an overflow:hidden hero: at 1.09 the drift alone removed a further 4.13%
       of the hero height off the top at its extreme, on top of whatever the
       cover crop had already taken. That is what made the Burj tip come and go
       as the animation breathed. At 1.06 it costs 2.83%, and the move still
       reads — the eye registers the drift, not its amplitude. */
    @keyframes cinematicDrift { from { transform: scale(1.02) translate3d(0,0,0); } to { transform: scale(1.06) translate3d(-.8%, -.3%, 0); } }
    .hero-actions { display: flex; }
    .hero-index-row:hover { color: #fff; padding-left: 6px; }
    .hero-index-row small { font-size: 12px; color: var(--gold); }
    .hero-index-row strong { font-size: 14px; font-weight: 500; }
    .hero-index-row svg { width: 17px; }
    .scroll-cue::before { content: ""; width: 54px; height: 1px; background: currentColor; }

    .partner-rail { background: #090b0e; color: #fff; border-top: 1px solid rgba(255,255,255,.11); border-bottom: 1px solid rgba(255,255,255,.11); }
    .partner-label { color: rgba(255,255,255,.47); font-size: 12px; letter-spacing: .17em; text-transform: uppercase; }
    .partner-names { justify-content: space-between; }

    /* About */
    .about-stamp {
      right: 4%;
      font-size: 12px;
    }
    .about-point b { color: var(--gold); font-size: 12px; }

    /* Services editorial */
    .services-head .lead { margin-left: auto; }
    .service-row {
      display: grid;
    }
    .service-row:last-child { border-bottom: 1px solid var(--line-dark); }
    /* saturate() removed here and at nine other image selectors in this file.
       R3.2 rejects near-greyscale and the client rejected it in plain words
       three times (T35 on the map, twice on the zone logos); saturate(.68) is a
       32% desaturation. 08 §8.7 and 02 §22 both record "no image filter
       anywhere in the theme", verified with `grep grayscale|mix-blend-mode` —
       a check that tests two strings, not the class of defect, so ten
       `filter: saturate()` declarations sat live at top level underneath it.

       None of the ten rendered: .service-image-wrap, .article, .about-main,
       .service-card-media and .approval-visual are legacy Home.html class
       names with zero emitters (`grep -rl` over *.php returns 0 files for each,
       and none appears in the served homepage). That is exactly why they were
       worth removing rather than leaving — a dead rule on an image selector is
       a loaded one, waiting for whoever reuses the class. Probe the shape
       (`filter:` on an image selector), not the last defect's exact strings. */
    .service-image-wrap img { height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
    .service-row:hover img { transform: scale(1.045); }

    /* Process */
    .process-grid { grid-template-columns: repeat(4, 1fr); }
    .process-item { border-right: 1px solid var(--line); }
    .process-item:last-child { border-right: 0; }
    .process-dot { position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 7px var(--paper); }
    .process-item small { display: block; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .15em; }

    /* Approval */
    .authority-list { grid-template-columns: 1fr 1fr; }
    .authority-list span:nth-child(odd) { padding-right: 18px; }
    .authority-list span:nth-child(even) { padding-left: 18px; border-left: 1px solid rgba(255,255,255,.18); }

    /* Proof */
    .stats-grid { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
    .stat-intro, .stat { border-right: 1px solid var(--line); }
    .stat:last-child { border-right: 0; }
    .stat span { display: block; margin-top: 14px; color: #757b80; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
    .round-btn:hover { color: #fff; background: var(--ink); }
    .round-btn svg { width: 18px; }
    .testimonial footer::before { content: ""; width: 38px; height: 1px; background: var(--gold); }
    .testimonial footer strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
    .testimonial footer span { display: block; margin-top: 4px; color: #777d82; font-size: 12px; }

    /* Insights */
    .insights-head { align-items: end; }
    .article-grid { grid-template-columns: 1.25fr 1fr 1fr; }
    .article { border-top: 1px solid var(--line); padding-top: 16px; }
    .article img { height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
    .article:hover img { transform: scale(1.04); }
    .article-meta { display: flex; justify-content: space-between; gap: 16px; color: #858a8f; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }

    /* Contact */
    .contact-copy .lead { color: rgba(255,255,255,.62); }
    .contact-detail { grid-template-columns: 110px 1fr; gap: 20px; }
    .contact-detail small { color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
    .contact-detail span, .contact-detail a { color: rgba(255,255,255,.76); font-size: 14px; line-height: 1.55; }
    .form-head small { color: #8b734d; font-size: 12px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .field { position: relative; }
    .field.full { grid-column: 1 / -1; }
    .field input, .field select, .field textarea {
      width: 100%;
      padding: 0 0 12px;
      color: var(--ink);
      background: transparent;
      border: 0;
      border-bottom: 1px solid #aeb0ad;
      border-radius: 0;
      outline: 0;
      font-size: 14px;
      transition: border-color .2s ease;
    }
    .field input, .field select { height: 39px; }
    .field textarea { min-height: 92px; resize: vertical; }
    .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--ink); }
    .form-note { margin: 15px 0 0; color: #777c80; font-size: 12px; line-height: 1.5; }

    /* Footer */
    .footer-top { grid-template-columns: 1.2fr .75fr .75fr .8fr; }
    .footer-brand img { width: 224px; }
    .footer-brand p { max-width: 390px; margin: 27px 0 0; color: rgba(255,255,255,.51); font-size: 14px; line-height: 1.75; }
    .footer-col a:hover { color: #fff; transform: translateX(3px); }
    .footer-bottom { align-items: center; }
    .socials { display: flex; gap: 17px; }
    .socials a { color: rgba(255,255,255,.55); transition: color .2s; }
    .socials a:hover { color: var(--gold-2); }

    /* Floating contact */
    .contact-float { position: fixed; z-index: 44; right: 22px; bottom: 24px; display: flex; flex-direction: column; gap: 10px; }
    .float-link { position: relative; width: 54px; height: 54px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255,255,255,.35); box-shadow: 0 14px 34px rgba(0,0,0,.24); transition: transform .25s var(--ease); }
    .float-link:hover { transform: translateY(-4px); }
    .float-link.whatsapp { background: #1d9d61; }
    .float-link.phone { background: var(--navy); }
    .float-link svg { width: 22px; }
    .float-link span { position: absolute; right: 65px; width: max-content; padding: 9px 12px; color: #fff; background: #080a0d; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateX(7px); pointer-events: none; transition: .22s ease; }
    .float-link:hover span { opacity: 1; transform: translateX(0); }

    /* Reveals */

    .mobile-menu { display: none; }

    @media (max-width: 1240px) {
      .header-cta { display: none; }
      .header-action { width: 48px; }
    }

    /* ---------- MOBILE DRAWER (max-width: 1020px) — REMOVED ----------
       This block declared the whole drawer a second time. Every one of its
       declarations was re-declared at equal specificity by the refinement
       pass's `@media (max-width: 1400px)` drawer below, whose condition is a
       superset of this one and which is printed later — so this copy could
       never win at any viewport, and editing it changed nothing on screen.
       Three properties proved it dead before removal: the drawer computed
       `top: 68px` not 76px, `overscroll-behavior: contain` (declared only
       below), and `background rgb(5,6,7)` not `#06080a`, at both 375px and
       900px. Measured again after removal: no computed value changed.

       Two full copies of one component is how `.mobile-sub a` came to carry
       three different min-heights (44 / 43 / 42) and ship the smallest.
       The drawer is defined ONCE below. Edit it there. */

    @media (max-width: 680px) {
      .service-image-wrap { opacity: 1; }
      .authority-list span:nth-child(even) { padding-left: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    }

    /* =========================================================
       ConsultZone refinement pass — alignment, rhythm, motion
       ========================================================= */

    main,
    .site-footer,
    .site-header,
    .hero,
    .partner-rail,
    .services,
    .approvals,
    .proof,
    .contact-section {
      width: 100%;
    }

    section[id] { scroll-margin-top: calc(var(--header-h-compact) + 18px); }

    .button::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: rgba(255, 255, 255, .1);
      transform: translateX(-102%);
      transition: transform .45s var(--ease);
    }

    .button:hover::before { transform: translateX(0); }

    /* One alignment system from header through footer */

    .site-header::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--gold), var(--gold-2));
      transform: scaleX(var(--scroll-progress, 0));
      transform-origin: left center;
      transition: transform .12s linear;
    }

    .header-phone:hover, .header-cta:hover {
      color: #090b0e;
    }

    .menu-toggle { width: 44px; height: 44px; border: 0; color: #fff; background: transparent; position: relative; }
    .menu-toggle span { display: block; width: 24px; height: 1px; margin: 6px auto; background: currentColor; transition: .3s; transform-origin: center; }
    .menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Cinematic hero without excess height */

    .hero-index-head { padding: 18px 0 13px; color: var(--gold-2); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding-top: 0; }

    .partner-names { display: flex; align-items: center; overflow: hidden; gap: 24px; }
    .partner-names span { flex: 0 0 auto; color: rgba(255,255,255,.74); letter-spacing: .06em; font-size: 13px; }

    /* About */

    .about-point { padding: 18px 0; }

    /* Services */
    .services {
      color: #fff;
      background: radial-gradient(circle at 86% 12%, rgba(199, 163, 107, .11), transparent 28%), var(--ink);
    }

    .service-row::after {
      content: "";
      position: absolute;
      left: 0;
      top: -1px;
      width: 0;
      height: 1px;
      background: linear-gradient(90deg, var(--gold), transparent);
      transition: width .65s var(--ease);
    }

    .service-row:hover::after { width: 100%; }

    /* Process */
    .process-item { padding: 29px 27px 26px 0; }
    .process-item:not(:first-child) { padding-left: 27px; }
    .process-item:not(:first-child) .process-dot { left: 27px; }

    /* Approvals */

    /* Proof and testimonials */
    .testimonial { opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .55s var(--ease), transform .55s var(--ease); position: relative; inset: auto; grid-area: 1 / 1; visibility: hidden; }
    .testimonial.active { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; }

    /* Insights */
    .article-image { overflow: hidden; margin-top: 19px; height: clamp(230px, 20vw, 290px); }
    .article:first-child .article-image { height: clamp(300px, 28vw, 380px); }
    .article h3 { margin: 22px 0 0; }

    /* Contact and footer */
    .form-grid { display: grid; gap: 18px 20px; }
    .form-submit { width: 100%; border: 0; margin-top: 23px; }
    .footer-bottom { display: flex; justify-content: space-between; gap: 24px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.43); font-size: 12px; min-height: 72px; }

    /* Refined reveal motion.

       B287 — THE HIDING IS NOW GATED ON JAVASCRIPT HAVING RUN, AND THAT IS THE
       WHOLE POINT OF THIS BLOCK.

       `[data-reveal]` used to ship at `opacity: 0` unconditionally, and became
       visible only when main.js added `.visible`. So the animation was not
       decoration on top of the content — it was a GATE in front of it, and
       anything that stopped main.js reaching its reveal loop left the element
       permanently invisible while still occupying its full height.

       Measured on /product-registration/ on 27 September: 8 of 8 reveal
       elements never received `.visible` — 4 infographics and 3 photographs —
       so the page printed tall blank gaps between paragraphs. The client
       photographed those gaps on four separate pages and asked where the
       infographics were. They were there, drawn, sized, and transparent.

       This is the same failure the consult form had on 20 September, fixed then
       by taking data-reveal off that one form. Taking it off one element at a
       time treats the symptom; the defect is the direction of the gate.

       So `html.cz-reveal` is the switch. main.js sets it on the root element as
       its FIRST act, before anything that could throw, and only then does
       hiding apply. With no JavaScript, a thrown error, a blocked file or a
       parse failure, every element renders at full opacity and the page is
       merely unanimated — which is the correct degradation for motion (R16).
       There is no `!important` anywhere in it, so the reduced-motion release
       below still wins as it always did. */
    html.cz-reveal [data-reveal] {
      opacity: 0;
      transform: translate3d(0, 22px, 0);
      will-change: opacity, transform;
    }

    [data-reveal] {
      transition: opacity .72s var(--ease), transform .72s var(--ease);
    }

    html.cz-reveal [data-reveal].visible { opacity: 1; transform: translate3d(0, 0, 0); }

    /* Reveals stagger sections. They never gate the reading line.
       R16 and 08 §7.1: "data-reveal belongs on a section, a card, a figure or a
       break element. NEVER on a heading, a paragraph, a list or a list item."
       T69 is the client stating it — "All subheadings appears as scroll
       animations, fix that. Looks empty until the heading comes."

       The attribute is still on text in nine templates, so the rule above was
       setting opacity:0 on the reading line itself. Measured on / at 1600px
       before this block: 51 [data-reveal] elements, 14 of them text-level, and
       the five above the fold were the whole hero copy block — P.eyebrow, the
       H1, P.hero-summary, DIV.hero-actions, DIV.hero-note — all computing
       opacity 0 and depending on an IntersectionObserver to become readable.

       zones.css:962-971 already does exactly this, scoped to the zone
       containers, with a comment giving the same reason. It was never
       generalised, so eight other templates kept the defect. This is that rule
       at the one place every view loads: one declaration instead of editing 18
       attributes across nine files (R34 — fix the generator).

       Specificity is (0,1,1) — the attribute plus :is()'s type argument —
       against (0,1,0) above, so it wins wherever it is printed and needs no
       !important (R11). Containers keep their stagger: this touches only the
       elements R16 names.

       The list is exactly R16's — headings, paragraphs, lists, list items — and
       no wider. <blockquote> is deliberately NOT in it: 08 §7.1 permits "a
       section, a card, a figure or a break element" to reveal, and
       content-enrich.php:465 marks figures and blockquotes on purpose, a pull
       quote being a break element rather than a reading line. Neutralising it
       here would have deleted motion the design asks for. */
    [data-reveal]:is(p, h1, h2, h3, h4, h5, h6, ol, ul, dl, li) {
      opacity: 1;
      transform: none;
    }

    /* The same rule one DOM level up, because the block above cannot reach
       these and no widening of it ever could.

       Measured: h2.cz-chapter__title renders at opacity 0 pre-reveal at 33px
       desktop / 22px mobile on five routes, and the h2 in .cz-consult__head at
       46px. In both cases the attribute is NOT on the heading — it is on the
       wrapping <header> (content-enrich.php:472 for the chapter opener,
       archive-cz_activity.php:111, page-templates/template-activities.php:175
       and template-parts/home/consult.php:12 for the consult head) — so
       `[data-reveal]:is(h1..h6)` never matches and R16's "NEVER on a heading"
       is still violated through the wrapper.

       The obvious-looking repair — extending the block above to descendants,
       `[data-reveal] :is(h1..h6)` — is a no-op and must not be attempted.
       opacity on an ancestor composites the whole subtree; a descendant
       declaring opacity:1 inside an opacity:0 parent still paints nothing.
       The only element that can undo it is the one carrying the attribute,
       which is what this block names. zones.css:1078 looks like the
       descendant form but is not: every selector there targets an element that
       carries data-reveal itself, merely scoped by an ancestor.

       Both containers ARE the heading — the chapter opener is a number plus an
       H2 over a background image, the consult head an eyebrow, an H2 and a
       lead — so this is not motion being deleted from a card. It is T69
       verbatim: "All subheadings appears as scroll animations, fix that. Looks
       empty until the heading comes."

       Deliberately NOT widened past these two. .cz-tablewrap, .cz-instrument,
       .cz-stat, .cz-verdict, .cz-balance__col and .cz-alt are the sections,
       cards and figures 08 §7.1 explicitly permits to reveal; .cz-stat is a
       padded panel on --cz-ink with a gold hairline (figures.css:214), not a
       reading line. Neutralising those is a design change, not this defect.

       Specificity (0,2,0): beats [data-reveal] at (0,1,0) and matches
       [data-reveal].visible at (0,2,0) while printing later, so the resting
       and revealed states agree and no !important is needed (R11).
       transform:none and .visible's translate3d(0,0,0) are the same identity
       transform. Nothing in any stylesheet declares opacity or transform on
       .cz-chapter or .cz-consult__head themselves — checked across all eleven
       — so nothing later in the cascade is being out-specified. The chapter's
       hover zoom lives on .cz-chapter__media img and is untouched, and the
       parallax openers read [data-parallax], not [data-reveal]. */
    .cz-chapter[data-reveal],
    .cz-consult__head[data-reveal] {
      opacity: 1;
      transform: none;
    }

    @media (max-width: 1400px) {
      .primary-nav, .header-action { display: none; }
      .menu-toggle { display: block; }
      .mobile-menu {
        position: fixed;
        z-index: 49;
        inset: var(--header-h) 0 0;
        display: block;
        padding: 26px 20px 46px;
        color: #fff;
        background: rgba(6, 8, 10, .985);
        overflow-y: auto;
        overscroll-behavior: contain;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .3s var(--ease), visibility .3s var(--ease), transform .3s var(--ease), top .35s var(--ease);
      }
      .site-header.scrolled + .mobile-menu { top: var(--header-h-compact); }
      .mobile-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }
      .mobile-menu a, .mobile-menu button {
        width: 100%;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        background: transparent;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
        text-align: left;
        font-size: 15px;
      }
      .mobile-sub { display: none; padding-left: 16px; }
      .mobile-sub.open { display: block; }
      /* 44px, not 43. R7's touch floor is a floor, not a starting point, and a
         sub-link is the most-tapped control in the drawer. The old ladder
         stepped this DOWN as the screen narrowed (44 → 43 → 42) — backwards:
         the narrower the screen, the more the thumb needs the target. */
      .mobile-sub a { min-height: 44px; color: rgba(255,255,255,.65); font-size: 13px; }
      .mobile-contact { margin-top: 23px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
      .mobile-contact a { min-height: 48px; justify-content: center; border: 1px solid rgba(255,255,255,.2); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
    }

    @media (max-width: 1020px) {
      .partner-inner { padding-block: 24px; }
      .partner-names { justify-content: flex-start; flex-wrap: wrap; }

      .about-copy, .approval-copy, .contact-copy { max-width: 800px; }

      .services-head .lead { margin-left: 0; }
      .service-image-wrap {
        justify-self: stretch;
        opacity: 1;
      }

      .process-grid { grid-template-columns: 1fr 1fr; }
      .process-item:nth-child(2) { border-right: 0; }
      .process-item:nth-child(3), .process-item:nth-child(4) { border-top: 1px solid var(--line); }

      .stats-grid { grid-template-columns: 1fr 1fr; }
      .stat-intro { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
      .stat:nth-child(3) { border-right: 0; }
      .stat:last-child { grid-column: 1 / -1; border-top: 1px solid var(--line); }
      .testimonial-nav { order: 2; }

      .article-grid { grid-template-columns: 1fr 1fr; }
      .article:first-child { grid-column: 1 / -1; }
      .consult-form { max-width: 800px; }
      .footer-top { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 680px) {
      :root {
        --header-h: 68px;
        --header-h-compact: 64px;
      }

      .menu-toggle { width: 42px; height: 42px; }
      .mobile-menu {
        inset: var(--header-h) 0 0;
        padding: 18px 14px 34px;
      }
      .mobile-menu a, .mobile-menu button { min-height: 50px; font-size: 15px; }
      .mobile-sub { padding-left: 12px; }
      /* Was 42px — the phone step of the same backwards ladder, and the last
         one printed, so it was the value 21 sub-links actually shipped at. */
      .mobile-sub a { min-height: 44px; font-size: 13px; }
      .mobile-contact { margin-top: 19px; }

      .hero-actions { flex-direction: column; align-items: stretch; }
      .button { width: 100%; }
      .hero-note { flex-direction: column; }

      .partner-inner { padding-block: 21px; }
      .partner-names { gap: 13px 21px; }
      .partner-names span { font-size: 12px; }

      .about-stamp { right: 0; font-size: 12px; }
      .about-point { padding: 16px 0; }

      .service-row {
        display: grid;
      }
      .service-no { grid-column: 1; grid-row: 1; }
      .service-image-wrap {
        margin-top: 21px;
      }

      .process-grid { grid-template-columns: 1fr; }
      .process-item, .process-item:not(:first-child) {
        min-height: 0;
        padding: 26px 0 30px;
        border-right: 0;
        border-top: 1px solid var(--line);
      }
      .process-item:first-child { border-top: 0; }
      .process-item .process-dot, .process-item:not(:first-child) .process-dot { left: 0; }
      .process-item h3 { margin-top: 39px; }

      .authority-list { grid-template-columns: 1fr; }
      .authority-list span:nth-child(odd), .authority-list span:nth-child(even) {
        padding: 13px 0;
        border-left: 0;
      }

      .stats-grid { grid-template-columns: 1fr; }
      .stat-intro, .stat {
        grid-column: auto !important;
        border-right: 0;
        border-top: 1px solid var(--line);
      }
      .stat-intro { border-top: 0; }

      .insights-head { align-items: flex-start; flex-direction: column; }
      .article-grid { grid-template-columns: 1fr; }
      .article:first-child { grid-column: auto; }
      .article:first-child .article-image, .article-image { height: 235px; }

      .contact-detail { grid-template-columns: 74px 1fr; gap: 14px; }
      .form-grid { grid-template-columns: 1fr; gap: 17px; }
      .field.full { grid-column: auto; }
      .form-note { font-size: 12px; }

      .footer-top { grid-template-columns: 1fr; }
      .footer-brand img { width: 190px; }
      .footer-bottom { padding: 22px 0; align-items: flex-start; flex-direction: column; }
      .contact-float { right: 10px; bottom: 10px; flex-direction: row; }
      .float-link { width: 47px; height: 47px; border-radius: 50%; }
      .float-link span { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      .site-header::after { transition: none; }
      .button::before, .service-row::after { transition: none; }
      [data-reveal] { opacity: 1 !important; transform: none !important; }
    }

    /* =========================================================
       Final layout correction — Overpass, compact hero & spacing
       ========================================================= */

    /* Shorter, clearer hero with stronger contrast behind the copy */

    .hero-inner {
      grid-template-columns: minmax(0, 1.2fr) minmax(290px, .48fr);
    }

    .hero-index-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 12px; border-top: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.78); transition: color .25s ease, padding .25s ease; min-height: 53px; }

    /* Reduce unnecessary gaps between major sections */
    .services.section { padding-top: clamp(52px, 4vw, 66px); padding-bottom: clamp(48px, 3.8vw, 62px); }

    /* Service rows now use the full left edge instead of wasting a column */
    .service-row {
      padding: 24px 0;
    }

    .service-image-wrap {
      grid-column: 1;
      grid-row: 1;
    }

    .service-copy {
      grid-column: 2;
      grid-row: 1;
    }

    @media (max-width: 820px) {
      .services.section { padding-top: 48px; padding-bottom: 44px; }

      .service-row {
        padding: 20px 0 24px;
      }

      .service-image-wrap {
        grid-column: 1;
        grid-row: 1;
      }

      .service-copy {
        grid-column: 1;
        grid-row: 2;
        padding-top: 20px;
      }
    }

    @media (max-width: 520px) {
      .hero-note span:nth-child(3) { display: none; }

      .service-copy { padding-top: 17px; }
    }

    /* =========================================================
       Clean composition pass — disciplined header + hero
       Screenshot used for spacing/alignment reference only.
       ========================================================= */

    /* Header: one shared alignment grid, calmer sizing, clearer actions */
    .site-header {
      position: fixed;
      inset: 0 0 auto;
      z-index: 50;
      transition: height .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
      border-bottom-color: rgba(255, 255, 255, .11);
    }

    .header-action { justify-self: end; align-items: center; gap: 10px; }

    .header-phone {
      border: 1px solid rgba(255,255,255,.22);
      display: grid;
      place-items: center;
      width: 44px;
      border-color: rgba(255, 255, 255, .2);
      transition: background .25s ease, border-color .25s ease, transform .25s ease;
    }

    .header-phone:hover {
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .4);
      transform: translateY(-1px);
    }

    /* Hero: compact, clean and strongly readable without copying the light reference */

    .hero-note span { display: flex; align-items: center; gap: 8px; }

    .hero-index { border-top: 1px solid rgba(255,255,255,.27); align-self: center; margin-bottom: 0; border: 1px solid rgba(255, 255, 255, .18); box-shadow: 0 28px 80px rgba(0, 0, 0, .24); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 19px 21px 6px; background: linear-gradient(135deg, rgba(5, 7, 9, .68), rgba(5, 7, 9, .34)); border-color: rgba(255, 255, 255, .2); }
    .scroll-cue { position: absolute; z-index: 3; align-items: center; gap: 14px; color: rgba(255,255,255,.48); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; transform: rotate(-90deg); transform-origin: left center; left: 19px; bottom: 28px; opacity: .65; }

    /* Keep every major block on the same vertical guides */

    @media (max-width: 1180px) {
      .primary-nav,
      .header-action { display: none; }
      .menu-toggle { display: block; }
      .mobile-menu { inset: 72px 0 0; }

      .hero-inner {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 820px) {
      .partner-inner {
        padding-block: 17px;
      }
    }

    @media (max-width: 560px) {
      .mobile-menu { inset: 68px 0 0; }

      .hero-actions {
        display: grid;
        grid-template-columns: 1fr;
      }

      .hero .button {
        width: 100%;
      }

      .hero-note span:nth-child(3) { display: none; }
    }

    /* =========================================================
       V4 correction — true Overpass typography + left-only hero shade
       ========================================================= */

    /* Remove the old full-image gradients baked into .hero-bg. */

    /* Shade is restricted to the copy side and disappears before the image focus. */

    /* Do not darken the bottom of the image across its full width. */
    .hero::after {
      background: linear-gradient(90deg, rgba(2, 4, 7, .55) 0%, rgba(2, 4, 7, .25) 37%, rgba(2, 4, 7, 0) 58%);
    }

    @media (max-width: 820px) {
      .hero::after {
        background: linear-gradient(90deg,
          rgba(2, 4, 7, .48) 0%,
          rgba(2, 4, 7, .16) 62%,
          rgba(2, 4, 7, 0) 100%);
      }
    }

    /* =========================================================
       V5 — Overpass-first typography and composition system
       Rebuilt around the actual proportions of the font.
       ========================================================= */

    html {
      scroll-padding-top: calc(var(--header-h-compact) + 18px);
      font-family: "Overpass", "Segoe UI", Arial, sans-serif;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body,
    button,
    input,
    select,
    textarea,
    optgroup {
      font-family: "Overpass", "Segoe UI", Arial, sans-serif;
      font-synthesis: none;
    }

    body {
      margin: 0;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      background: #ffffff;
      text-rendering: optimizeLegibility;
      font-weight: 400;
      line-height: 1.55;
    }

    .container,
    .header-inner,
    .hero-inner {
      width: var(--container);
      margin-inline: auto;
    }

    .section { padding: var(--section-y) 0; padding-block: var(--section-y); }

    .eyebrow::before { content: ""; height: 1px; background: currentColor; width: 28px; }

    .display,
    .hero h1,
    .about-stamp strong,
    .about-point h3,
    .service-copy h3,
    .process-item h3,
    .approval-caption p,
    .stat-intro p,
    .stat strong,
    .testimonial blockquote,
    .article h3,
    .form-head h3 {
      font-family: "Overpass", "Segoe UI", Arial, sans-serif !important;
      font-style: normal;
      text-wrap: balance;
    }

    .button {
      padding: 0 24px;
      border: 1px solid transparent;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-transform: uppercase;
      transition: transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
      position: relative;
      isolation: isolate;
      overflow: hidden;
      box-shadow: inset 0 0 0 0 currentColor;
      min-height: 51px;
      padding-inline: 23px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .09em;
    }

    /* Header */
    .site-header,
    .site-header.scrolled {
      height: 78px;
      color: #fff;
      background: rgba(4, 7, 11, .94);
      border-bottom: 1px solid rgba(255, 255, 255, .11);
      box-shadow: none;
      backdrop-filter: blur(17px) saturate(125%);
      -webkit-backdrop-filter: blur(17px) saturate(125%);
    }

    .site-header.scrolled {
      height: 72px;
      background: rgba(4, 7, 11, .985);
      box-shadow: 0 12px 36px rgba(0, 0, 0, .22);
    }

    .header-inner {
      height: 100%;
      margin: 0 auto;
      display: grid;
      align-items: center;
      grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) auto;
      gap: clamp(20px, 2.2vw, 38px);
    }

    .brand img { max-width: 100%; height: auto; width: 202px; }

    .primary-nav {
      align-items: center;
      justify-content: center;
      gap: clamp(18px, 1.45vw, 27px);
    }

    .nav-item { position: relative; display: flex; align-items: center; height: 78px; }
    .site-header.scrolled .nav-item { height: 72px; }

    .nav-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      color: rgba(255,255,255,.94);
      transition: color .25s ease;
      font-size: 13.5px;
      font-weight: 600;
      line-height: 1;
      letter-spacing: -.012em;
    }

    .header-phone,
    .header-cta { height: 44px; }

    .header-cta {
      border: 1px solid var(--gold);
      align-items: center;
      text-transform: uppercase;
      transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
      padding-inline: 19px;
      color: #fff;
      background: var(--blue);
      border-color: var(--blue);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .095em;
      box-shadow: 0 12px 28px rgba(23, 105, 255, .18);
    }

    .header-cta:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 34px rgba(23, 105, 255, .28);
      color: #fff;
      background: var(--blue-hover);
      border-color: var(--blue-hover);
    }

    /* Hero — shade only behind the copy, never over the image focus */

    .hero-bg {
      transform: scale(1.015);
    }

    .hero-copy::before { content: ""; position: absolute; z-index: -1; pointer-events: none; inset: -32px -48px -32px -30px; background: radial-gradient(ellipse at 24% 50%, rgba(1, 3, 6, .42) 0%, rgba(1, 3, 6, .18) 50%, transparent 74%); filter: blur(3px); display: none; }

    .hero-inner {
      align-items: center;
    }

    .hero .eyebrow {
      letter-spacing: .19em;
      margin-bottom: 18px;
      color: var(--gold-2);
      font-size: 12px;
      font-weight: 700;
    }

    .hero h1 em {
      font-style: normal;
      color: var(--gold-2);
      font-weight: 700;
    }

    .hero-actions {
      gap: 11px;
    }

    .hero .button {
      font-size: 12px;
      letter-spacing: .09em;
      min-height: 51px;
      padding-inline: 23px;
    }

    .hero .button-light {
      color: #fff;
      background: var(--blue);
      border-color: var(--blue);
      box-shadow: 0 14px 32px rgba(23, 105, 255, .24);
    }

    .hero .button-light:hover {
      box-shadow: 0 18px 38px rgba(23, 105, 255, .3);
      color: #fff;
      background: var(--blue-hover);
      border-color: var(--blue-hover);
    }

    .hero .button-outline {
      color: rgba(255, 255, 255, .94);
      background: rgba(5, 9, 13, .25);
      border-color: rgba(255, 255, 255, .42);
    }

    .hero .button-outline:hover {
      color: #fff;
      background: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .72);
    }

    .hero-note {
      gap: 12px 24px;
      padding-top: 17px;
      font-size: 12px;
    }

    .hero-note span::before {
      content: "";
      width: 5px;
      height: 5px;
      border: 0;
      border-radius: 0;
      background: var(--blue);
    }

    .hero-index,
    .scroll-cue { display: none; }

    .partner-inner {
      display: grid;
      align-items: center;
      min-height: 74px;
      grid-template-columns: 220px 1fr;
      gap: 30px;
    }

    .partner-label,
    .partner-names span {
      font-weight: 700;
    }

    /* About */
    .about-grid {
      grid-template-columns: minmax(0, .93fr) minmax(0, 1.07fr);
    }

    .about-main { width: 79%; }
    .about-inset { width: 47%; }
    .about-stamp { position: absolute; border-radius: 50%; display: grid; place-items: center; text-align: center; color: #fff; background: var(--navy); border: 1px solid rgba(255,255,255,.32); box-shadow: 0 20px 60px rgba(13,28,40,.25); line-height: 1.45; letter-spacing: .15em; text-transform: uppercase; width: 126px; height: 126px; top: 34px; }
    .about-stamp strong { display: block; font-size: 36px; font-weight: 800; letter-spacing: -.04em; }

    /* Services — no decorative empty left column */

    .services-head {
      grid-template-columns: minmax(0, 1.04fr) minmax(360px, .66fr);
      gap: clamp(44px, 6vw, 90px);
    }

    .services-head .display { max-width: 820px; }
    .services-head .lead { color: rgba(255,255,255,.57); max-width: 550px; }

    .service-row {
      grid-template-columns: minmax(390px, .9fr) minmax(0, 1.1fr);
      gap: clamp(40px, 5vw, 82px);
    }

    .service-no {
      align-self: start;
      padding-top: 7px;
      position: absolute;
      z-index: 3;
      color: var(--gold-2);
      background: rgba(5, 7, 9, .78);
      border-left: 2px solid var(--gold);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      letter-spacing: .13em;
      top: 42px;
      left: 14px;
      padding: 8px 11px 7px;
      font-size: 12px;
      font-weight: 700;
    }

    .service-copy {
      max-width: 690px;
    }

    .service-copy a { display: inline-flex; align-items: center; gap: 12px; color: var(--gold-2); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }

    /* Process */
    .process-head { max-width: 920px; }

    /* Approvals */

    /* Proof and testimonial */
    .stat-intro,
    .stat { min-height: 178px; padding: 31px 28px; }
    .stat-intro { padding-left: 0; }
    .stat-intro p { margin: 0; max-width: 390px; font-size: 27px; font-weight: 700; line-height: 1.2; letter-spacing: -.032em; }
    .stat strong { display: block; line-height: 1; font-size: clamp(48px, 4.4vw, 66px); font-weight: 800; letter-spacing: -.05em; }

    /* Insights */
    .insights-head { display: flex; justify-content: space-between; gap: 30px; margin-bottom: 36px; }
    .article-grid { display: grid; gap: 22px; }
    .article h3,
    .article:first-child h3 { margin-top: 18px; font-size: clamp(24px, 2vw, 32px); font-weight: 700; line-height: 1.18; letter-spacing: -.028em; }

    /* Contact */
    .contact-grid {
      grid-template-columns: minmax(0, .9fr) minmax(520px, 1fr);
    }

    .contact-copy .display { max-width: 670px; }
    .contact-details { border-top: 1px solid rgba(255,255,255,.17); margin-top: 37px; }
    .contact-detail { display: grid; border-bottom: 1px solid rgba(255,255,255,.17); padding: 16px 0; padding-block: 17px; }

    .consult-form { background: rgba(245,242,235,.97); color: var(--ink); box-shadow: var(--surface-shadow); padding: clamp(32px, 3.4vw, 48px); }
    .form-head { margin-bottom: 29px; }
    .field label { display: block; margin-bottom: 9px; color: #5d6267; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }

    /* Footer */
    .footer-top { gap: 48px; }
    .footer-col h4 { margin: 0 0 23px; color: var(--gold); font-size: 12px; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; }
    .footer-col a { display: block; width: fit-content; margin: 0 0 13px; color: rgba(255,255,255,.64); transition: color .2s ease, transform .2s ease; font-size: 13.5px; }

    /* Tablet */
    @media (max-width: 1240px) {
      .site-header,
      .site-header.scrolled { height: 72px; }

      .header-inner { grid-template-columns: 1fr auto; }
      .primary-nav,
      .header-action { display: none; }
      .menu-toggle { display: block; }
      .mobile-menu { inset: 72px 0 0; }

      .service-row { grid-template-columns: minmax(320px, .9fr) minmax(0, 1fr); gap: 42px; }
      .contact-grid { grid-template-columns: 1fr 1fr; }
    }

    @media (max-width: 900px) {
      .about-grid,
      .approval-grid,
      .contact-grid { grid-template-columns: 1fr; }

      .services-head { grid-template-columns: 1fr; gap: 18px; }
      .services-head .lead { margin-left: 0; }

      .service-row {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .service-image-wrap { grid-column: 1; grid-row: 1; }
      .service-copy { grid-column: 1; grid-row: 2; max-width: 720px; padding-top: 22px; }

      .process-grid { grid-template-columns: 1fr 1fr; }

      .testimonial-nav { order: initial; }

      .article-grid { grid-template-columns: 1fr 1fr; }
      .article:first-child { grid-column: 1 / -1; }

      .footer-top { grid-template-columns: 1fr 1fr; }
    }

    /* Mobile */
    @media (max-width: 620px) {
      .site-header,
      .site-header.scrolled { height: 68px; }
      .mobile-menu { inset: 68px 0 0; }
      /* The 170px that used to be here is gone: `width: auto` in the <=900 block below
         is the same specificity and later in the file, so it won on order and this
         declaration matched nothing from the moment the squash was fixed. */

      .hero-inner {
        align-items: center;
      }

      .hero .eyebrow { margin-bottom: 14px; font-size: 12px; }

      .hero-actions { display: grid; grid-template-columns: 1fr; gap: 9px; }
      .hero .button { width: 100%; min-height: 48px; }
      .hero-note { gap: 9px; padding-top: 14px; font-size: 12px; }
      .hero-note span:nth-child(3) { display: none; }

      .partner-inner { grid-template-columns: 1fr; gap: 10px; padding-block: 18px; }

      .about-main { width: 88%; }
      .about-inset { width: 57%; }
      .about-stamp { width: 104px; height: 104px; }

      .process-grid { grid-template-columns: 1fr; }
      .process-item,
      .process-item:not(:first-child) { min-height: 0; padding: 27px 0 34px; border-right: 0; }
      .process-item h3 { margin-top: 35px; }

      .stats-grid { grid-template-columns: 1fr; }
      .stat-intro,
      .stat { min-height: 0; padding: 25px 0; border-right: 0; }

      .article-grid { grid-template-columns: 1fr; }
      .article:first-child { grid-column: auto; }
      .article:first-child .article-image,
      .article-image { height: 245px; }

      .form-grid { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .consult-form { padding: 25px 18px; }

      .footer-top { grid-template-columns: 1fr; gap: 35px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-bg { animation: none !important; transform: none !important; }
    }

    /* Keep reveal motion elegant without creating sideways overflow.

       MEASURING OVERFLOW ON THIS SITE — READ BEFORE RECORDING A ZERO.
       This clip is on the root chain, so `document.documentElement.scrollWidth
       - clientWidth` cannot return a non-zero value here no matter what
       overflows. Measured proof: a deliberately injected 2000px-wide element
       whose true overrun is 1625px at 375px still reports 0, and a 40px overrun
       inside a real .container reports 0 shipped against 24px with the clip
       lifted. A zero read against the shipped stylesheet is the PASS CONDITION,
       not a result. 12.3's overflow check must lift this rule for the duration
       of the measurement and put it back, or it is testing nothing.

       The clip stays. It is load-bearing, not belt-and-braces: with it lifted,
       the homepage reports a constant 681px document scrollWidth between
       roughly 415px and 680px (201px of overrun at 480px, 81px at 600px),
       localised by bisect to section#cz-activities. Removing the clip before
       that is found and fixed would put a real horizontal scrollbar on the
       front page. Both mandated widths are clean either way: 0px at 375px and
       0px at 1600px. */
    html,
    body,
    main {
      max-width: 100%;
      overflow-x: clip;
    }

    [data-reveal="left"],
    [data-reveal="right"] {
      transform: translateY(24px);
    }

    [data-reveal="left"].visible,
    [data-reveal="right"].visible {
      transform: translateY(0);
    }

    @supports not (overflow: clip) {
      html,
      body,
      main { overflow-x: hidden; }
    }

    /* =========================================================
       V6 — Editorial scale, alignment and section refinement
       ========================================================= */

    /* A calmer type scale across the complete page */
    .display {
      margin: 0;
      max-width: 860px;
      font-size: clamp(35px, 3.15vw, 52px);
      font-weight: 750;
      line-height: 1.085;
      letter-spacing: -.036em;
    }

    .lead {
      margin: 26px 0 0;
      color: #697078;
      font-weight: 400;
      letter-spacing: -.008em;
      margin-top: 18px;
      max-width: 650px;
      font-size: clamp(15px, 1vw, 17px);
      line-height: 1.65;
    }

    .eyebrow {
      display: flex;
      align-items: center;
      margin: 0 0 22px;
      text-transform: uppercase;
      color: var(--gold);
      gap: 12px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 14px;
      font-size: 12px;
      letter-spacing: .2em;
    }

    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding-bottom: 8px;
      border-bottom: 1px solid currentColor;
      text-transform: uppercase;
      font-weight: 700;
      margin-top: 25px;
      font-size: 12px;
      letter-spacing: .085em;
    }

    .hero,
    .hero-inner {
      /* Raised from clamp(540px, 65svh, 620px) on 31 Aug, at his request —
         "increase the vertical height of hero image by few". Roughly +60px
         at every viewport. It buys the photograph more of the frame: the
         hero crops 1672x941 to cover, so a taller box crops less off the top
         and bottom and the two figures sit larger. The clamp still holds a
         floor for short laptop screens and a ceiling so the hero never eats
         a tall desktop whole — the proof strip must stay in first view. */
      min-height: clamp(600px, 72svh, 700px);
    }

    .hero-inner {
      position: relative;
      z-index: 2;
      margin: 0 auto;
      gap: clamp(34px, 5vw, 78px);
      display: flex;
      padding-top: 102px;
      padding-bottom: 34px;
    }

    .hero-copy {
      position: relative;
      z-index: 2;
      padding: 0;
      width: min(620px, 47%);
      max-width: 620px;
    }

    .hero h1 {
      margin: 0;
      font-weight: 800;
      max-width: 600px;
      font-size: clamp(44px, 4vw, 62px);
      line-height: 1.035;
      letter-spacing: -.045em;
    }

    .hero-summary {
      margin: 32px 0 0;
      color: rgba(255, 255, 255, .82);
      font-weight: 400;
      letter-spacing: -.008em;
      max-width: 565px;
      margin-top: 19px;
      font-size: clamp(15px, 1vw, 16.5px);
      line-height: 1.62;
    }

    .hero-actions { flex-wrap: wrap; margin-top: 24px; }
    .hero-note { display: flex; flex-wrap: wrap; width: min(100%, 640px); border-top: 1px solid rgba(255, 255, 255, .17); color: rgba(255, 255, 255, .6); font-weight: 700; line-height: 1.35; letter-spacing: .115em; text-transform: uppercase; margin-top: 23px; }

    .about-copy .display,
    .services-head .display,
    .approval-copy .display,
    .contact-copy .display {
      font-size: clamp(35px, 3.1vw, 51px);
      line-height: 1.09;
    }

    .about-grid { display: grid; align-items: center; gap: clamp(48px, 5.5vw, 82px); }
    .about-visual { position: relative; min-height: 535px; }
    .about-main { object-fit: cover; height: 455px; }
    .about-inset { position: absolute; right: 0; bottom: 0; object-fit: cover; border: 12px solid var(--paper); border-width: 9px; height: 230px; }
    .about-copy .display { font-weight: 800; max-width: 650px; }
    .about-points { border-top: 1px solid var(--line); margin-top: 27px; }
    .about-point { display: grid; border-bottom: 1px solid var(--line); grid-template-columns: 36px 1fr; gap: 17px; padding-block: 16px; }
    .about-point h3 { margin: 0 0 7px; margin-bottom: 6px; font-weight: 700; line-height: 1.18; letter-spacing: -.025em; font-size: 19px; }
    .about-point p { margin: 0; color: #70767c; line-height: 1.62; font-size: 13.5px; }

    .services.section { padding-block: clamp(54px, 4vw, 68px); }
    .services-head { display: grid; align-items: end; margin-bottom: 25px; }
    .service-row { border-top: 1px solid var(--line-dark); position: relative; align-items: center; padding-block: 23px; }
    .service-image-wrap { position: relative; overflow: hidden; width: 100%; height: clamp(220px, 15vw, 260px); }
    .service-copy h3 {
      margin: 0;
      font-weight: 700;
      letter-spacing: -.037em;
      font-size: clamp(32px, 2.65vw, 44px);
      line-height: 1.08;
    }
    .service-copy p {
      color: rgba(255,255,255,.57);
      max-width: 610px;
      margin: 12px 0 18px;
      font-size: 14px;
      line-height: 1.62;
    }

    .process-grid { display: grid; border-top: 1px solid var(--line); margin-top: 38px; }
    .process-item { position: relative; padding-bottom: 26px; min-height: 230px; padding-top: 27px; }
    .process-item h3 {
      font-weight: 700;
      letter-spacing: -.032em;
      margin: 39px 0 12px;
      font-size: 23px;
      line-height: 1.12;
    }
    .process-item p { margin: 0; color: #6b7177; line-height: 1.64; font-size: 13.5px; }

    .authority-list { display: grid; border-top: 1px solid rgba(255,255,255,.18); margin-top: 27px; }
    .authority-list span { padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.76); padding-block: 14px; font-size: 12.5px; }

    /* Statistics: one disciplined dark information band */

    .proof .stat-primary {
      padding-left: 32px;
      background: rgba(255,255,255,.025);
    }

    .proof .stat-message {
      padding-left: 34px;
    }

    /* Testimonial: clean left title and aligned review card */
    .testimonial-shell {
      display: grid;
      margin-top: 40px;
      grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
      gap: 0;
      align-items: stretch;
      background: #fff;
      border: 1px solid #dce4ea;
    }

    .testimonial-shell > div:first-child {
      padding: clamp(32px, 3.2vw, 46px);
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      border-right: 1px solid #dce4ea;
    }

    .testimonial-shell .display {
      font-weight: 800;
      max-width: 440px;
      font-size: clamp(31px, 2.7vw, 44px) !important;
      line-height: 1.1;
    }

    .testimonial-nav {
      align-self: end;
      display: flex;
      gap: 8px;
      margin-top: 30px;
    }

    .round-btn {
      border: 1px solid var(--line);
      display: grid;
      place-items: center;
      color: var(--ink);
      transition: .25s;
      width: 43px;
      height: 43px;
      border-radius: 0;
      background: #fff;
    }

    .testimonial-stage {
      position: relative;
      min-height: 255px;
      padding: clamp(34px, 4vw, 58px);
      display: grid;
      align-items: center;
      border-left: 3px solid var(--blue);
    }

    .testimonial blockquote {
      margin: 0;
      max-width: 850px;
      font-size: clamp(22px, 2vw, 31px);
      font-weight: 600;
      line-height: 1.42;
      letter-spacing: -.022em;
    }

    .testimonial footer { display: flex; align-items: center; gap: 17px; margin-top: 24px; }

    /* Insights: equal cards, shared baselines and consistent proportions */

    #insights .insights-head .display {
      font-size: clamp(34px, 3vw, 49px);
    }

    #insights .insights-head .text-link {
      margin: 0 0 3px;
      padding-bottom: 6px;
    }

    #insights .article:hover {
      transform: translateY(-5px);
      border-color: #c8d4dc;
      box-shadow: 0 18px 42px rgba(7, 29, 46, .09);
    }

    #insights .article-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    #insights .article-read .arrow {
      width: 16px;
      height: 16px;
    }

    .contact-grid { position: relative; display: grid; align-items: start; gap: clamp(48px, 6vw, 88px); }
    .form-head h3 { margin: 11px 0 0; font-weight: 700; line-height: 1.15; letter-spacing: -.032em; font-size: 29px; }
    .footer-top { display: grid; padding: 68px 0 52px; padding-top: 58px; }

    @media (max-width: 1050px) {
      .hero-copy { width: min(610px, 62%); }

      .proof .stat:last-child {
        grid-column: 1 / -1;
        min-height: 120px;
        border-top: 1px solid rgba(255,255,255,.14);
      }

      #insights .article:last-child { grid-column: 1 / -1; grid-template-columns: minmax(280px, .8fr) 1fr; grid-template-rows: 1fr; }
      #insights .article:last-child .article-image { aspect-ratio: auto; min-height: 300px; }
    }

    @media (max-width: 760px) {
      :root {
        --section-y: 50px;
      }

      .display,
      .about-copy .display,
      .services-head .display,
      .approval-copy .display,
      .contact-copy .display {
        font-size: clamp(31px, 8.2vw, 41px);
      }

      .hero,
      .hero-inner { min-height: 585px; }
      .hero-copy { width: min(540px, 88%); }
      .hero h1 { font-size: clamp(38px, 9vw, 49px); }

      .proof .stat-primary,
      .proof .stat-message { min-height: 150px; }
      .proof .stat-message { padding-left: 26px; }

      .testimonial-shell { grid-template-columns: 1fr; }
      .testimonial-shell > div:first-child { border-right: 0; border-bottom: 1px solid #dce4ea; }
      .testimonial-stage { min-height: 245px; }

      #insights .insights-head { flex-direction: column; gap: 18px; }
      #insights .article:last-child { grid-column: auto; grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
      #insights .article:last-child .article-image { min-height: 0; aspect-ratio: 16 / 10; }
    }

    @media (max-width: 520px) {
      .hero-copy { width: 100%; }
      .hero h1 { font-size: clamp(36px, 10.8vw, 46px); }
      .hero-note { font-size: 12px; }

      .about-visual { min-height: 425px; }
      .about-main { height: 360px; }
      .about-inset { height: 185px; }

      .service-copy h3 { font-size: 31px; }

      .proof .stat-primary,
      .proof .stat-message,
      .proof .stat { min-height: 130px; border-right: 0; }

      .testimonial-shell > div:first-child,
      .testimonial-stage { padding: 28px 22px; }
      .testimonial blockquote { font-size: 21px; }
    }

    /* =========================================================
       V7 — Clarity system for every section below the hero
       Hero, header and partner rail intentionally remain unchanged.
       ========================================================= */

    /* Shared rhythm below the hero */
    #about.section,
    #services.section,
    #process.section,
    .approvals.section,
    .proof.section,
    #insights.section,
    .contact-section.section {
      padding-block: clamp(58px, 5.2vw, 82px);
    }

    #about .display,
    #services .display,
    #process .display,
    .approvals .display,
    .proof .display,
    #insights .display,
    .contact-section .display {
      max-width: 760px;
      font-size: clamp(32px, 3vw, 48px);
      font-weight: 780;
      line-height: 1.1;
      letter-spacing: -.035em;
      text-wrap: balance;
    }

    #about .lead,
    #services .lead,
    #process .lead,
    .approvals .lead,
    .contact-section .lead {
      max-width: 620px;
      margin-top: 17px;
      font-size: clamp(14.5px, .98vw, 16.5px);
      line-height: 1.68;
    }

    #about .eyebrow,
    #services .eyebrow,
    #process .eyebrow,
    .approvals .eyebrow,
    .proof .eyebrow,
    #insights .eyebrow,
    .contact-section .eyebrow {
      gap: 10px;
      margin-bottom: 14px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .18em;
    }

    #about .eyebrow::before,
    #services .eyebrow::before,
    #process .eyebrow::before,
    .approvals .eyebrow::before,
    .proof .eyebrow::before,
    #insights .eyebrow::before,
    .contact-section .eyebrow::before {
      width: 27px;
    }

    #about .text-link,
    .approvals .text-link,
    #insights .text-link {
      margin-top: 25px;
      padding-bottom: 5px;
      font-size: 12px;
      letter-spacing: .085em;
    }

    /* About — compact editorial image and structured copy */
    #about {
      background: #ffffff;
    }

    #about .about-grid {
      grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
      gap: clamp(42px, 5vw, 76px);
      align-items: center;
    }

    #about .about-visual {
      min-height: 0;
      padding: 0 42px 48px 0;
    }

    #about .about-main {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3.25;
      object-fit: cover;
    }

    #about .about-inset {
      right: 0;
      bottom: 0;
      width: 51%;
      height: auto;
      aspect-ratio: 4 / 3;
      border: 8px solid #ffffff;
      box-shadow: 0 24px 58px -35px rgba(8, 10, 13, .55);
    }

    #about .about-stamp {
      top: auto;
      right: auto;
      left: 0;
      bottom: 0;
      width: auto;
      height: auto;
      min-width: 188px;
      padding: 17px 20px;
      border: 0;
      border-radius: 0;
      place-items: start;
      text-align: left;
      background: #0b1d2d;
      box-shadow: none;
      font-size: 12px;
      line-height: 1.45;
      letter-spacing: 0;
      text-transform: none;
    }

    #about .about-stamp strong {
      margin-bottom: 7px;
      font-size: 26px;
      font-weight: 650;
      line-height: 1;
      letter-spacing: .02em;
      color: #78aaff;
    }

    #about .about-copy .display { max-width: 660px; }

    #about .about-points {
      margin-top: 27px;
      border-top-color: rgba(8,10,13,.13);
    }

    #about .about-point {
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 18px;
      padding: 17px 0;
    }

    #about .about-point b {
      padding-top: 3px;
      color: #1769ff;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
    }

    #about .about-point h3 {
      margin-bottom: 5px;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -.018em;
    }

    #about .about-point p {
      max-width: 600px;
      font-size: 13.5px;
      line-height: 1.62;
    }

    /* Services — consistent rows with one shared baseline */
    #services {
      background: #090c10;
    }

    #services .services-head {
      grid-template-columns: minmax(0, 1fr) minmax(360px, .72fr);
      gap: clamp(36px, 5vw, 78px);
      align-items: end;
      margin-bottom: 32px;
    }

    #services .services-head .display { max-width: 690px; }
    #services .services-head .lead {
      margin: 0 0 3px auto;
      color: rgba(255,255,255,.62);
    }

    #services .service-row {
      grid-template-columns: 52px minmax(300px, .78fr) minmax(0, 1fr);
      gap: clamp(24px, 3.5vw, 54px);
      align-items: center;
      padding: 25px 0;
      border-top-color: rgba(255,255,255,.14);
    }

    #services .service-row:last-child {
      border-bottom-color: rgba(255,255,255,.14);
    }

    #services .service-no {
      align-self: start;
      padding-top: 5px;
      color: #d5b47c;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
    }

    #services .service-image-wrap {
      height: auto;
      aspect-ratio: 16 / 9;
      background: #11171d;
    }

    /* #services .service-image-wrap img carried filter: saturate(.72) here.
       Removed with the other nine — see the note at the head of this file. */

    #services .service-copy {
      max-width: 620px;
    }

    #services .service-copy h3 {
      font-size: clamp(27px, 2.25vw, 36px);
      font-weight: 730;
      line-height: 1.12;
      letter-spacing: -.028em;
    }

    #services .service-copy p {
      max-width: 580px;
      margin: 12px 0 17px;
      color: rgba(255,255,255,.63);
      font-size: 13.5px;
      line-height: 1.63;
    }

    #services .service-copy a {
      color: #7daeff;
      font-size: 12px;
      letter-spacing: .09em;
    }

    /* Process — compact four-stage system */
    #process {
      background: #f3f5f7;
      border-bottom: 1px solid rgba(8,10,13,.1);
    }

    #process .process-head {
      max-width: 800px;
    }

    #process .process-grid {
      margin-top: 38px;
      border-top-color: rgba(8,10,13,.16);
    }

    #process .process-item,
    #process .process-item:not(:first-child) {
      min-height: 218px;
      padding: 28px 27px 25px;
      border-right-color: rgba(8,10,13,.12);
    }

    #process .process-item:first-child { padding-left: 0; }
    #process .process-dot,
    #process .process-item:not(:first-child) .process-dot {
      top: -5px;
      left: 0;
      width: 10px;
      height: 10px;
      background: #1769ff;
      box-shadow: 0 0 0 6px #f3f5f7;
    }

    #process .process-item:not(:first-child) .process-dot { left: 27px; }

    #process .process-item small {
      color: #1769ff;
      font-size: 12px;
      letter-spacing: .14em;
    }

    #process .process-item h3 {
      margin: 36px 0 10px;
      font-size: 20px;
      font-weight: 720;
      line-height: 1.25;
      letter-spacing: -.022em;
    }

    #process .process-item p {
      max-width: 290px;
      color: #65717a;
      font-size: 13px;
      line-height: 1.62;
    }

    /* Proof and reviews — one compact band, one aligned review.
       This rule used to read `.approvals .authority-list span,
       .approvals .authority-list span:nth-child(odd), .proof` — two
       dangling selectors left behind by a deleted rule, silently handing
       an off-palette #edf3f8 to anything matching them. `.approvals` is
       not a class this theme renders, and `.proof` takes its background
       from the single definition further down. Nothing replaced it. */

    /* Insights — equal cards, equal image ratios, equal baselines */
    #insights {
      background: #ffffff;
    }

    #insights .insights-head {
      padding-bottom: 24px;
      border-bottom: 1px solid #d9e0e5;
      align-items: end;
      margin-bottom: 31px;
    }

    #insights .article-grid {
      display: grid;
      align-items: stretch;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: clamp(18px, 2vw, 28px);
    }

    #insights .article,
    #insights .article:first-child {
      min-width: 0;
      transition: transform .35s var(--ease), border-color .35s ease, box-shadow .35s ease;
      display: grid;
      grid-template-rows: auto 1fr;
      overflow: hidden;
      background: #fff;
      border: 1px solid #dce4e9;
      border-top: 1px solid #dce4e9;
      padding: 0;
    }

    #insights .article-image,
    #insights .article:first-child .article-image {
      background: #dfe5e8;
      height: auto;
      margin: 0;
      aspect-ratio: 16 / 10;
    }

    #insights .article-content {
      min-height: 220px;
      padding: 20px 20px 19px;
      display: flex;
      flex-direction: column;
    }

    #insights .article-meta {
      color: #71808c;
      min-height: 16px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: .115em;
    }

    #insights .article h3,
    #insights .article:first-child h3 {
      max-width: 430px;
      margin: 12px 0 0;
      font-size: clamp(17px, 1.35vw, 21px);
      font-weight: 720;
      line-height: 1.34;
      letter-spacing: -.022em;
    }

    #insights .article-excerpt {
      margin: 13px 0 0;
      margin-top: 10px;
      color: #68747d;
      font-size: 12.5px;
      line-height: 1.58;
    }

    #insights .article-read {
      margin-top: auto;
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--blue);
      font-weight: 750;
      text-transform: uppercase;
      padding-top: 17px;
      font-size: 12px;
      letter-spacing: .1em;
    }

    /* Contact — dark, compact and fully aligned */
    .contact-section {
      position: relative;
      color: #fff;
      overflow: hidden;
      background: #071522;
    }

    .contact-section .contact-grid {
      grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
      gap: clamp(42px, 5vw, 76px);
    }

    .contact-section .contact-copy .display { max-width: 620px; }
    .contact-section .contact-details { margin-top: 29px; }

    .contact-section .contact-detail {
      grid-template-columns: 92px minmax(0, 1fr);
      gap: 18px;
      padding: 16px 0;
    }

    .contact-section .contact-detail small { font-size: 12px; }
    .contact-section .contact-detail span,
    .contact-section .contact-detail a {
      font-size: 13.5px;
      line-height: 1.58;
    }

    .contact-section .form-head {
      margin-bottom: 24px;
      padding-bottom: 18px;
      border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .contact-section .form-head small {
      color: #7baeff;
      font-size: 12px;
    }

    .contact-section .form-head h3 {
      margin-top: 9px;
      color: #fff;
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -.02em;
    }

    .contact-section .form-grid { gap: 15px; }
    .contact-section .field label {
      margin-bottom: 7px;
      color: rgba(255,255,255,.69);
      font-size: 12px;
    }

    .contact-section .field input,
    .contact-section .field select,
    .contact-section .field textarea {
      padding: 13px 14px;
      color: #fff;
      background: rgba(255,255,255,.065);
      border: 1px solid rgba(255,255,255,.19);
      font-size: 13.5px;
    }

    .contact-section .field input,
    .contact-section .field select { height: 48px; }
    .contact-section .field textarea { min-height: 105px; }
    .contact-section .field input::placeholder,
    .contact-section .field textarea::placeholder { color: rgba(255,255,255,.4); }
    .contact-section .field select option { color: #10151b; background: #fff; }

    .contact-section .form-submit {
      min-height: 50px;
      margin-top: 19px;
      color: #fff;
      background: #1769ff;
    }

    .contact-section .form-submit:hover { background: #2b78ff; }
    .contact-section .form-note {
      margin-top: 12px;
      color: rgba(255,255,255,.47);
      font-size: 12px;
    }

    /* Footer — tighter and cleaner */

    .site-footer .footer-brand img { width: 198px; }
    .site-footer .footer-brand p {
      max-width: 390px;
      margin-top: 20px;
      font-size: 13px;
      line-height: 1.68;
    }

    .site-footer .footer-bottom {
      min-height: 68px;
      font-size: 12px;
    }

    @media (max-width: 1100px) {
      #about .about-grid,
      .approvals .approval-grid,
      .contact-section .contact-grid {
        grid-template-columns: 1fr 1fr;
        gap: 38px;
      }

      #services .service-row {
        grid-template-columns: 42px minmax(260px, .82fr) minmax(0, 1fr);
        gap: 24px;
      }

      .proof .stat:last-child {
        grid-column: 1 / -1;
        min-height: 105px;
        border-top: 1px solid rgba(255,255,255,.14);
      }
    }

    @media (max-width: 900px) {
      #about .about-grid,
      .approvals .approval-grid,
      .contact-section .contact-grid {
        grid-template-columns: 1fr;
      }

      #about .about-visual,

      #services .services-head {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      #services .services-head .lead { margin-left: 0; }

      #services .service-row {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 20px;
      }

      #services .service-image-wrap {
        grid-column: 2;
        aspect-ratio: 16 / 8.5;
      }

      #services .service-copy { grid-column: 2; }

      #process .process-grid { grid-template-columns: 1fr 1fr; }
      #process .process-item:nth-child(2) { border-right: 0; }
      #process .process-item:nth-child(3),
      #process .process-item:nth-child(4) { border-top: 1px solid rgba(8,10,13,.12); }

      .proof .testimonial-shell > div:first-child {
        border-bottom: 1px solid #dbe4eb;
      }

      #insights .article-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #insights .article:last-child { grid-column: 1 / -1; }

      .site-footer .footer-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 640px) {
      #about.section,
      #services.section,
      #process.section,
      .approvals.section,
      .proof.section,
      #insights.section,
      .contact-section.section {
        padding-block: 50px;
      }

      #about .display,
      #services .display,
      #process .display,
      .approvals .display,
      .proof .display,
      #insights .display,
      .contact-section .display {
        font-size: clamp(29px, 8.4vw, 38px);
      }

      #about .about-visual { padding: 0; }
      #about .about-main { aspect-ratio: 16 / 11; }
      #about .about-inset {
        position: relative;
        right: auto;
        bottom: auto;
        width: 62%;
        margin: -43px 0 0 auto;
        border-width: 6px;
      }
      #about .about-stamp {
        position: relative;
        left: auto;
        bottom: auto;
        min-width: 0;
        margin-top: 12px;
      }

      #services .service-row {
        grid-template-columns: 1fr;
        gap: 13px;
        padding-block: 23px;
      }
      #services .service-no,
      #services .service-image-wrap,
      #services .service-copy { grid-column: 1; }
      #services .service-image-wrap { aspect-ratio: 16 / 10; }
      #services .service-copy h3 { font-size: 27px; }

      #process .process-grid { grid-template-columns: 1fr; }
      #process .process-item,
      #process .process-item:not(:first-child) {
        min-height: 0;
        padding: 24px 0 28px;
        border-right: 0;
        border-top: 1px solid rgba(8,10,13,.12);
      }
      #process .process-item:first-child { border-top: 0; }
      #process .process-dot,
      #process .process-item:not(:first-child) .process-dot { left: 0; }
      #process .process-item h3 { margin-top: 31px; }

      .proof .stat-intro,
      .proof .stat,
      .proof .stat:last-child {
        grid-column: auto;
        min-height: 115px;
        border-right: 0;
        border-top: 1px solid rgba(255,255,255,.14);
      }
      .proof .stat:first-child { border-top: 0; }

      #insights .insights-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
      }
      #insights .article-grid { grid-template-columns: 1fr; }
      #insights .article:last-child { grid-column: auto; }
      #insights .article-content { min-height: 0; }

      .contact-section .form-grid { grid-template-columns: 1fr; }
      .contact-section .field.full { grid-column: auto; }
      .contact-section .contact-detail { grid-template-columns: 1fr; gap: 5px; }

      .site-footer .footer-brand { grid-column: auto; }
      .site-footer .footer-bottom {
        padding-block: 20px;
        align-items: flex-start;
        flex-direction: column;
      }
    }

  /* V8 — preserve the complete hero; correct everything below it. */

  /* The near-black foundation used to be declared twice, here and again
     under ONE DARK FOUNDATION below, at two token names holding the same
     #050607. The single definition is the later one. `.proof .stats-grid`
     is not in it because `.proof .stats-grid` sets its own background a
     few rules further down and always won. */

  /* Core services — rebuilt as a consistent 2 × 2 editorial system. */
  #services .service-card {
    grid-template-columns: minmax(210px,.88fr) minmax(0,1.12fr);
  }
  #services .service-card-link .arrow { width:16px; height:16px; }

  /* Proof / client perspective — no blue fill and no mismatched boxes. */

  /* Remove remaining accidental navy panels below the hero. */
  .contact-section .consult-form { padding: clamp(25px, 3vw, 38px); color: #fff; border: 1px solid rgba(255,255,255,.16); box-shadow: none; backdrop-filter: blur(8px); background: rgba(255,255,255,.045) !important; }

  @media (max-width:1120px) {
    #services .service-card { grid-template-columns: 1fr; }
    .proof .stat-intro { grid-column:1/-1; }
  }
  @media (max-width:900px) {
    #services .service-card { grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr); }
  }
  @media (max-width:640px) {
    #services .service-grid { border-inline:0; }
    #services .service-card { grid-template-columns:1fr; }
    .proof .stat-intro { grid-column:auto; }
    .proof .stat-intro,.proof .stat { border-right: 0; }
  }
/* =========================================================
   V9 FINAL CORRECTION
   - Preserve the complete existing hero composition.
   - Keep the hero picture clear; divide copy and image by fade.
   - Rebuild Core Services and Client Perspective cleanly.
   - Use the footer near-black for every large dark surface.
   ========================================================= */

/* ---------- HERO: no full-image fill; only a copy-to-image fade ---------- */
.hero{
  position: relative;
  color: #fff;
  overflow: hidden;
  background: var(--cz-black) !important;
}
.hero-bg{
  position: absolute;
  inset: 0;
  will-change: transform, background-position;
  animation-duration: 24s;
  opacity: 1 !important;
  filter: none !important;
  background-image: url('../img/dubai-skyline.jpg') !important;
  background-size: cover !important;
  /* 64% 16%, not 64% center. The Burj spire tip sits 15% down this source
     (measured on a percentage grid, not estimated). cover against a 1425x620
     hero throws away 34.7% of the scaled height, and centring that split it
     evenly — 17.4% off the top, which decapitated the tower. Anchoring at 16%
     takes 7.6% off the top instead and spends the rest on the bottom, which
     here is the Sheikh Zayed Road interchange: real, but not the landmark.
     Verified to keep the spire at 1280, 1440, 1920 and 2560 wide. */
  background-position: 64% 16% !important;
  background-repeat: no-repeat !important;
}
.hero::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  opacity:1 !important;
  background:linear-gradient(90deg,
    var(--cz-black) 0%,
    var(--cz-black) 29%,
    rgba(5,6,7,.98) 36%,
    rgba(5,6,7,.82) 43%,
    rgba(5,6,7,.52) 50%,
    rgba(5,6,7,.20) 57%,
    rgba(5,6,7,0) 64%,
    rgba(5,6,7,0) 100%) !important;
}
.hero::after{ content: ""; position: absolute; z-index: 1; inset: auto 0 0; pointer-events: none; height: 14%; display: none !important; }

/* ---------- ONE DARK FOUNDATION ---------- */
/* The only place a dark surface colour is set. Do not add a second list. */
.partner-rail,
#services,
.contact-section,
.site-footer,
.mobile-menu,
.dropdown,
.about-stamp,
.float-link.phone{
  background-color:var(--cz-black) !important;
}
.contact-section::before{
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(105deg,rgba(5,6,7,.99) 0%,rgba(5,6,7,.95) 50%,rgba(5,6,7,.84) 100%), url('../img/hero-bg.jpg') !important;
}

/* ---------- CORE SERVICES: aligned 2 x 2 editorial cards ---------- */
#services.section{
  padding-block:clamp(64px,5.6vw,86px) !important;
}
#services .services-intro{
  display:grid !important;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.72fr) !important;
  align-items:end !important;
  gap:clamp(40px,5vw,78px) !important;
  margin-bottom:32px !important;
}
#services .services-title-block{max-width:750px !important;}
#services .display{
  max-width:750px !important;
  font-size:clamp(35px,3.45vw,50px) !important;
  font-weight:760 !important;
  line-height:1.07 !important;
  letter-spacing:-.037em !important;
}
#services .lead{
  max-width:560px !important;
  margin:0 0 2px auto !important;
  color:rgba(255,255,255,.62) !important;
  font-size:14.5px !important;
  line-height:1.7 !important;
}
#services .service-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:18px !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
}
#services .service-card{
  min-width:0 !important;
  min-height:100% !important;
  display:flex !important;
  flex-direction:column !important;
  color:#fff !important;
  background:var(--cz-panel) !important;
  border:1px solid var(--cz-dark-line) !important;
  transition:transform .45s var(--ease),background .35s var(--ease),border-color .35s var(--ease) !important;
}
#services .service-card:hover{
  transform:translateY(-4px) !important;
  background:var(--cz-panel-2) !important;
  border-color:rgba(224,199,159,.34) !important;
}
#services .service-card-media{
  width:100% !important;
  min-width:0 !important;
  aspect-ratio:16 / 8.7 !important;
  overflow:hidden !important;
  background:#111 !important;
  border-bottom:1px solid var(--cz-dark-line) !important;
}
#services .service-card-media img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transition:transform .8s var(--ease) !important;
}
#services .service-card:hover .service-card-media img{
  transform:scale(1.045) !important;
}
#services .service-card-body{
  min-width:0 !important;
  min-height:245px !important;
  padding:26px 28px 28px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}
#services .service-card-meta{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding-bottom:15px !important;
  border-bottom:1px solid rgba(255,255,255,.12) !important;
}
#services .service-card-meta span{
  color:var(--gold-2) !important;
  font-size: 12px !important;
  font-weight:700 !important;
  letter-spacing:.13em !important;
}
#services .service-card-meta small{
  color:rgba(255,255,255,.45) !important;
  font-size: 12px !important;
  font-weight:700 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
}
#services .service-card h3{
  margin:21px 0 0 !important;
  font-size:clamp(23px,1.7vw,28px) !important;
  font-weight:720 !important;
  line-height:1.15 !important;
  letter-spacing:-.027em !important;
}
#services .service-card p{
  max-width:590px !important;
  margin:11px 0 21px !important;
  color:rgba(255,255,255,.62) !important;
  font-size:13.5px !important;
  line-height:1.65 !important;
}
#services .service-card-link{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-transform: uppercase;
  margin-top: auto !important;
  color: var(--gold-2) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
}

/* ---------- PROOF / CLIENT PERSPECTIVE: one clean black system ---------- */
.proof{
  color:var(--ink) !important;
  background:var(--paper) !important;
  border-block:1px solid rgba(8,10,13,.11) !important;
}
.proof.section{padding-block:clamp(60px,5.4vw,82px) !important;}
.proof .stats-grid{
  overflow: hidden;
  box-shadow: none;
  display: grid !important;
  grid-template-columns: 1.35fr repeat(3,1fr) !important;
  gap: 1px !important;
  color: #fff !important;
  background: var(--cz-dark-line) !important;
  border: 1px solid var(--cz-dark-line) !important;
}
.proof .stat-intro,
.proof .stat{
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-color: rgba(255,255,255,.13);
  min-height: 132px !important;
  padding: 24px 27px !important;
  color: #fff !important;
  background: var(--cz-black) !important;
  border: 0 !important;
}
.proof .stat-message p{
  max-width:430px !important;
  color:#fff !important;
  font-size:clamp(17px,1.45vw,22px) !important;
  font-weight:650 !important;
  line-height:1.38 !important;
  letter-spacing:-.022em !important;
}
.proof .stat-message small{
  display: block;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 13px;
  color: rgba(255,255,255,.46) !important;
  font-size: 12px !important;
}
.proof .stat strong{
  line-height: .95;
  font-weight: 760;
  letter-spacing: -.035em;
  color: #fff !important;
  font-size: clamp(31px,3vw,45px) !important;
}
.proof .stat span{
  max-width: 230px;
  letter-spacing: .1em;
  margin-top: 11px;
  line-height: 1.45;
  color: rgba(255,255,255,.58) !important;
  font-size: 12px !important;
}
.proof .testimonial-shell{
  grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr) !important;
}
.proof .testimonial-intro,
.proof .testimonial-shell > div:first-child{
  min-height:292px !important;
  padding:clamp(30px,3.2vw,45px) !important;
  display:flex !important;
  flex-direction:column !important;
  color:#fff !important;
  background:var(--cz-black) !important;
  border:0 !important;
  border-right:1px solid var(--cz-dark-line) !important;
}
.proof .testimonial-intro .eyebrow{color:var(--gold-2) !important;}
.proof .testimonial-intro .display,
.proof .testimonial-shell .display{
  max-width:450px !important;
  color:#fff !important;
  font-size:clamp(31px,3vw,44px) !important;
  font-weight:750 !important;
  line-height:1.09 !important;
  letter-spacing:-.034em !important;
}
.proof .testimonial-summary{
  max-width:470px !important;
  margin-top:16px !important;
  color:rgba(255,255,255,.60) !important;
  font-size:13.5px !important;
  line-height:1.67 !important;
}
.proof .testimonial-nav{
  padding: 0;
  margin-top: auto !important;
  padding-top: 26px !important;
}
.proof .round-btn{
  border-color: #d4dfe7;
  width: 44px !important;
  height: 44px !important;
  border-radius: 0 !important;
  color: #fff !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.24) !important;
}
.proof .round-btn:hover{
  color:var(--cz-black) !important;
  background:var(--gold-2) !important;
  border-color:var(--gold-2) !important;
}
.proof .testimonial-stage{
  position:relative !important;
  min-width:0 !important;
  min-height:292px !important;
  padding:clamp(32px,3.6vw,52px) !important;
  display:grid !important;
  align-items:center !important;
  color:#fff !important;
  background:var(--cz-panel) !important;
  border:0 !important;
  border-left:3px solid var(--gold) !important;
}
.proof .testimonial{
  flex: 0 0 100%;
  position: relative !important;
  inset: auto !important;
  grid-area: 1 / 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
  pointer-events: none !important;
  transition: opacity .48s var(--ease),transform .48s var(--ease),visibility .48s !important;
}
.proof .testimonial.active{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  pointer-events:auto !important;
}
.proof .testimonial blockquote{
  width:100% !important;
  max-width:800px !important;
  color:#fff !important;
  font-size:clamp(18px,1.55vw,23px) !important;
  font-weight:600 !important;
  line-height:1.58 !important;
  letter-spacing:-.017em !important;
}
.proof .testimonial footer{margin-top:23px !important;}
.proof .testimonial footer::before{display:none !important;}
.proof .testimonial footer strong{color:#fff !important;font-size:12px !important;}
.proof .testimonial footer span{color:rgba(255,255,255,.48) !important;font-size: 12px !important;}

/* Footer tone remains the dark reference colour. */
.site-footer{ color: #fff; background: var(--cz-black) !important; }

@media (max-width:1020px){
  .hero::before{
    background:linear-gradient(90deg,
      var(--cz-black) 0%,
      rgba(5,6,7,.97) 35%,
      rgba(5,6,7,.72) 50%,
      rgba(5,6,7,.30) 65%,
      rgba(5,6,7,0) 80%) !important;
  }
  #services .services-intro{grid-template-columns:1fr !important;gap:17px !important;}
  #services .lead{margin-left:0 !important;}
  .proof .stats-grid{grid-template-columns:1fr 1fr !important;}
  .proof .stat-intro{grid-column:1 / -1 !important;}
  .proof .testimonial-shell{grid-template-columns:1fr !important;}
  .proof .testimonial-intro,
  .proof .testimonial-shell > div:first-child{
    min-height:0 !important;
    border-right:0 !important;
    border-bottom:1px solid var(--cz-dark-line) !important;
  }
  .proof .testimonial-nav{margin-top:24px !important;padding-top:0 !important;}
}
@media (max-width:760px){
  .hero-bg{background-position:69% 18% !important;}
  .hero::before{
    background:linear-gradient(90deg,
      rgba(5,6,7,.98) 0%,
      rgba(5,6,7,.94) 48%,
      rgba(5,6,7,.68) 68%,
      rgba(5,6,7,.30) 86%,
      rgba(5,6,7,.14) 100%) !important;
  }
  #services.section,.proof.section{padding-block:50px !important;}
  #services .service-card-body{min-height:0 !important;}
  .proof .stats-grid{grid-template-columns:1fr !important;}
  .proof .stat-intro{grid-column:auto !important;}
  .proof .stat-intro,.proof .stat{min-height:108px !important;}
  .proof .testimonial-stage{min-height:260px !important;padding:28px 22px !important;}
}
@media (max-width:480px){
  #services .display{font-size:clamp(30px,9vw,38px) !important;}
  #services .service-card-body{padding:22px 19px 24px !important;}
  #services .service-card h3{font-size:24px !important;}
  .proof .testimonial-intro,
  .proof .testimonial-shell > div:first-child{padding:27px 21px !important;}
  .proof .testimonial-intro .display,
  .proof .testimonial-shell .display{font-size:clamp(29px,8.4vw,37px) !important;}
  .proof .testimonial blockquote{font-size:17px !important;}
}
/* Final desktop service density: four equal cards on wide screens. */
@media (min-width:1181px){
  #services .service-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:14px !important;
  }
  #services .service-card-media{aspect-ratio:16 / 10.2 !important;}
  #services .service-card-body{
    min-height:240px !important;
    padding:23px 22px 25px !important;
  }
  #services .service-card-meta{padding-bottom:14px !important;}
  #services .service-card h3{
    margin-top:19px !important;
    font-size:clamp(21px,1.48vw,25px) !important;
  }
  #services .service-card p{
    margin-top:10px !important;
    font-size:13px !important;
  }
}
@media (min-width:761px) and (max-width:1180px){
  #services .service-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
/* V10 requested corrections
   - Statistics strip removed from markup.
   - UAE about stamp removed from markup.
   - Core Services becomes a touch-friendly horizontal carousel on mobile.
*/
.proof .testimonial-shell{
  display: grid !important;
  gap: 0 !important;
  align-items: stretch !important;
  overflow: hidden !important;
  color: #fff !important;
  background: var(--cz-black) !important;
  border: 1px solid var(--cz-dark-line) !important;
  margin-top: 0 !important;
}

@media (max-width:760px){
  #services .service-grid{
    display:flex !important;
    grid-template-columns:none !important;
    gap:14px !important;
    width:100% !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:0 0 12px !important;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:0;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #services .service-grid::-webkit-scrollbar{
    display:none;
  }
  #services .service-card{
    flex:0 0 min(84vw,360px) !important;
    width:min(84vw,360px) !important;
    min-width:min(84vw,360px) !important;
    scroll-snap-align:start;
    scroll-snap-stop:always;
  }
  #services .service-card-media{
    aspect-ratio:16 / 10 !important;
  }
}

    /* ==========================================================
       APPROVALS — single clean definition
       Replaces 48 conflicting rules previously spread across all
       five style blocks. Do not add overrides elsewhere.
       Fixes: vertical imbalance, caption breakout, palette clash.
       ========================================================== */

    .approval-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      gap: clamp(40px, 4vw, 72px);
      position: relative;
    }

    .approval-copy { display: flex; flex-direction: column; }
    .approval-copy .display { max-width: 100%; }
    .approval-copy .lead { color: rgba(255, 255, 255, .62); max-width: 52ch; }

    .approval-visual {
      position: relative;
      height: auto;
      align-self: center;
    }
    /* The `max-height: clamp(360px, 30vw, 470px)` that used to sit beside this
       aspect-ratio has been deleted, and so has the `max-height: none` that
       repeated the pairing in the 1024px block below.

       aspect-ratio + max-height RESIZES the box, it does not cap it — that
       pairing is the "extra empty space" the client has reported repeatedly and
       it is banned outright. It happened to be harmless here for two reasons
       that are both accidents: `width: 100%` makes the width definite, so the
       cap cropped through object-fit instead of shrinking the box, and nothing
       in the theme renders .approval-visual at all (grep across every .php and
       .json returns zero hits). Neither survives someone reusing the class
       without width:100%, so the shape is gone rather than left loaded. */
    .approval-visual .main {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3.1;
      object-fit: cover;
      display: block;
    }

    /* Caption sits flush inside the image — no protruding sliver */
    .approval-caption {
      position: absolute;
      right: 0;
      bottom: 0;
      width: min(360px, 78%);
      padding: 24px 26px;
      background: var(--ink);
      color: #fff;
      border-top: 2px solid var(--gold);
      box-shadow: 0 24px 64px rgba(0, 0, 0, .38);
    }
    .approval-caption small {
      display: block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: var(--gold);
    }
    .approval-caption p {
      margin: 11px 0 0;
      font-size: 15.5px;
      font-weight: 500;
      line-height: 1.45;
      letter-spacing: -.01em;
      color: rgba(255, 255, 255, .82);
    }

    @media (max-width: 1024px) {
      .approval-grid { grid-template-columns: 1fr; gap: 44px; }
      .approval-visual { max-width: 720px; }
      .approval-visual .main { aspect-ratio: 16 / 10; }
    }

    @media (max-width: 640px) {
      .approval-caption {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        padding: 20px;
      }
      .approval-visual .main { aspect-ratio: 4 / 3; }
    }

    /* ==========================================================
       FOOTER — expanded to carry the full service map
       Brand + 5 link columns. Single definition.
       ========================================================== */
    .site-footer .footer-top {
      padding: 58px 0 48px;
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr));
      gap: clamp(24px, 2.4vw, 44px);
      align-items: start;
    }
    .site-footer .footer-col h4 { font-size: 12px; margin-bottom: 18px; }
    .site-footer .footer-col a { margin-bottom: 10px; display: block; padding: 5px 0; font-size: 13px; line-height: 1.45; }

    .footer-contact {
      display: flex;
      flex-direction: column;
      gap: 4px;
      margin-top: 22px;
      padding-top: 18px;
      border-top: 1px solid rgba(255, 255, 255, .12);
    }
    .footer-contact a { padding: 3px 0; font-size: 13px; }
    .footer-contact span {
      display: block;
      margin-top: 8px;
      font-size: 12px;
      line-height: 1.55;
      color: rgba(255, 255, 255, .5);
    }

    .footer-legal { display: flex; gap: 22px; }

    @media (max-width: 1500px) {
      .site-footer .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .footer-brand { grid-column: 1 / -1; }
    }
    @media (max-width: 760px) {
      .site-footer .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 480px) {
      .site-footer .footer-top { grid-template-columns: 1fr; }
      .footer-legal { gap: 16px; }
    }

    /* ============================================================
       CZ SYSTEM — below-hero architecture
       Namespaced cz- so no legacy rule can reach it.
       One spacing scale, one container, no !important.
       ============================================================ */

    /* ---- shared primitives ---- */
    .cz-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

    .cz-eyebrow {
      display:flex; align-items:center; gap:11px;
      margin:0 0 18px;
      font-size: 12px; font-weight:700; line-height:1;
      letter-spacing:.2em; text-transform:uppercase;
      color:var(--cz-gold-emph);
    }
    .cz-eyebrow::before { content:""; width:26px; height:1px; background:currentColor; opacity:.65; flex:none; }

    .cz-h2 {
      margin:0;
      font-size:clamp(28px, 2.5vw + 16px, 46px);
      font-weight:700; line-height:1.1; letter-spacing:-.03em;
      text-wrap:balance;
    }
    .cz-h2 em { font-style:normal; color:var(--cz-gold-emph); }

    .cz-lead {
      margin:0;
      font-size:clamp(15px, .5vw + 13.6px, 17px);
      line-height:1.68; color:var(--cz-mid); text-wrap:pretty;
    }

    .cz-btn {
      display:inline-flex; align-items:center; gap:10px;
      padding:15px 26px; border:1px solid transparent; border-radius:2px;
      font-size:13.5px; font-weight:700; letter-spacing:.01em; line-height:1;
      transition:background .3s var(--cz-ease), color .3s var(--cz-ease),
                 border-color .3s var(--cz-ease), transform .3s var(--cz-ease);
    }
    .cz-btn svg { width:17px; height:17px; transition:transform .3s var(--cz-ease); }
    .cz-btn:hover svg { transform:translateX(4px); }
    .cz-btn--primary { background:var(--cz-blue); color:#fff; border-color:var(--cz-blue); }
    .cz-btn--primary:hover { background:var(--cz-blue-hover); border-color:var(--cz-blue-hover); transform:translateY(-2px); }
    .cz-btn--outline { background:transparent; color:#fff; border-color:var(--cz-line-dk); }
    .cz-btn--outline:hover { border-color:var(--cz-gold); color:var(--cz-gold); }

    .cz-textlink {
      display:inline-flex; align-items:center; gap:9px;
      font-size:13.5px; font-weight:700; color:var(--cz-gold-emph);
      padding-bottom:3px; position:relative; width:fit-content;
    }
    .cz-textlink svg { width:16px; height:16px; transition:transform .3s var(--cz-ease); }
    .cz-textlink::after {
      content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
      background:currentColor; transform:scaleX(0); transform-origin:right;
      transition:transform .5s var(--cz-ease-out);
    }
    .cz-textlink:hover::after { transform:scaleX(1); transform-origin:left; }
    .cz-textlink:hover svg { transform:translateX(4px); }

    /* ---- Light-surface gold ----
       Fixes the measured 2.16:1 on --cz-paper-2 and 2.36:1 on #fff for
       .cz-eyebrow, .cz-h2 em, .cz-statement em, .cz-textlink, .cz-stage__num,
       .cz-stage__meta, .cz-vertical__kicker, .cz-zones__caption and
       .cz-zonecard__place — every one of which is 12-13.5px text held to
       4.5:1. These are the sections whose ground is --cz-paper or
       --cz-paper-2; the dark sections (.cz-routes, .cz-activities,
       .cz-approvals, .cz-support, .cz-consult, .cz-reg, the credential band,
       the footer) are absent on purpose and keep --cz-gold at 8.57:1.

       READ THE LIST BELOW, NOT THIS PARAGRAPH. This sentence claimed four
       sections were handled that the selector list did not contain, and the
       list is what runs. .cz-activities and .cz-support are named here and were
       missing from it until 2 Sep; the list held the CHILD .cz-activities__panel
       and nothing for .cz-support at all, so three homepage elements inherited
       the light-surface gold onto --cz-ink-2 and measured 3.62:1. Same failure
       shape as R3.5's "min 8" docblock over a pool of 6. Both are now in the
       list; this paragraph is kept so the drift stays visible.

       This declares ONE custom property and no colour, so it enters no
       specificity contest: --cz-gold-emph resolves by inheritance, and the
       nearest ancestor that sets it wins regardless of selector weight.

       Decoration is untouched and still reads --cz-gold directly:
       .cz-positioning__deck's 2px rule, .cz-zonecard's gold left border and
       .cz-vertical__badge, which sits on a dark photographic scrim. */
    .cz-positioning,
    .cz-zones,
    .cz-journey,
    .cz-verticals,
    .cz-voices,
    /* .cz-faq was the ONLY section that ever opted in while the default was
       the dark gold. It is now the default, so this declaration is redundant —
       kept as a no-op marker of where the half-wired mechanism got to, and
       harmless because it resolves to the same value. */
    .cz-faq { --cz-gold-emph: var(--cz-gold-ink); }

    /* ---- DARK SURFACES: restore the bright gold -------------------------
       Every class in this list declares a near-black or --cz-ink background in
       this stylesheet, enumerated by scanning main.css for section-level dark
       background declarations rather than by memory. On these grounds
       #c7a36b measures 8.57:1 and --cz-gold-ink only 3.75:1, so the bright
       gold is correct here and only here.

       If a NEW dark section is added, add it to this list. The failure if you
       forget is a quieter gold, not an invisible one — which is the whole
       reason the default was flipped.

       ADDED 2 Sep, measured, not assumed. Four dark grounds were missing:
         .cz-activities   main.css `background:var(--cz-ink-2)` — its eyebrow
                          read 3.62:1. Only the child __panel was listed.
         .cz-support      main.css `background:var(--cz-ink-2)` — its eyebrow
                          and .cz-support__ask .cz-textlink both read 3.62:1.
         .cz-lost__head   the 404 masthead
         .cz-lost__ask    the 404 tail — both composite to rgb(5,6,7) and both
                          read 3.75:1, the exact number this comment names as
                          the failing value.
       The two .cz-lost children are listed rather than `.cz-lost` itself
       BECAUSE `.cz-lost` is light: listing.css:1025 gives the section
       `--cz-paper` and only these two children are dark. Listing the section
       would push bright gold onto white the moment anything else in it takes an
       eyebrow. Cross-file coupling, deliberately: if listing.css ever lightens
       .cz-lost__head or .cz-lost__ask, delete the two lines here in the same
       edit.

       `.cz-registerhub__hero` (/business-activities/) is the fifth dark ground
       with the same 3.75:1 defect and is DELIBERATELY ABSENT: adding it would
       change what a frozen activity route renders. R50. Reported, not fixed. */
    .partner-rail,
    .dropdown,
    .contact-section,
    .service-image-wrap,
    .cz-routes,
    .cz-route,
    .cz-activities,
    .cz-activities__panel,
    .cz-lost__head,
    .cz-lost__ask,
    .cz-support,
    .cz-approvals,
    .cz-authority,
    .cz-appr,
    .cz-consult,
    .cz-fact,
    .cz-footer,
    .cz-footer__directions,
    .cz-parallax,
    .cz-popup__panel,
    .cz-reg,
    .cz-reg__regime,
    .cz-vertical--tax {
      --cz-gold-emph: var(--cz-gold);
    }

    /* The one dark island inside a light section. The inverted Tax & Financial
       Advisory panel is on --cz-ink, so its kicker and text link go back to the
       dark-surface gold. Nearer ancestor, not higher specificity. */
    .cz-vertical--tax { --cz-gold-emph: var(--cz-gold); }

    /* ============ 01 · CREDENTIAL BAND ============ */
    /* Rebuilt 1 Sep. Four defects the client reported in one screenshot:
       the band was vertically too tall with dead space above and below, the
       "logos" were unreadable, the loop ran out and left the right-hand side
       empty, and the whole strip read as unstructured.

       The logos are gone — see template-parts/home/credentials.php for why
       (they were 400x340 photographs, never logos). The rail is typographic
       now. The three layout defects are fixed here. */

    .cz-credentials__inner {
      display:flex; align-items:center; gap:clamp(20px,3vw,52px);
    }

    /* The anchor is a baseline-aligned pair, not a centred one: a 40px numeral
       centred against 12px caps floats the caps in the middle of the numeral's
       height and is most of why the band looked loose. */
    .cz-credentials__anchor {
      display:flex; align-items:baseline; gap:12px; flex:none;
    }
    .cz-credentials__count {
      font-size:clamp(34px,3vw,44px); font-weight:800; line-height:.9;
      color:var(--cz-gold); letter-spacing:-.045em;
      font-variant-numeric:tabular-nums;
    }
    .cz-credentials__label {
      /* Was 11.5px, under R7's hard 12px floor for a label. It only breached at
         desktop: the mobile legibility block further down already lists this
         class and lifts it to 12px, so 1600px was the width that shipped
         under-floor. Contrast was never the problem here (4.67:1); size was. */
      font-size:12px; font-weight:700; line-height:1.4;
      letter-spacing:.15em; text-transform:uppercase; color:var(--cz-faint);
    }

    .cz-credentials__track {
      flex:1; min-width:0; overflow:hidden;
      mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
      -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
    }

    /* THE LOOP FIX.
       The animation used to sit on .cz-credentials__list and translate it -50%.
       With a SINGLE list that moves it half its own width and then snaps — the
       right-hand side empties out before it resets, which is exactly the "empty
       space on right, no proper loop" that was reported.
       A seamless marquee needs two identical copies and a -50% translate on
       the PAIR: at -50% copy two sits precisely where copy one began, so the
       reset is invisible and the rail is never short. The second copy is
       aria-hidden in the template. */
    .cz-credentials__marquee {
      display:flex; width:max-content;
      animation:czMarquee 46s linear infinite;
      will-change:transform;
    }
    .cz-credentials:hover .cz-credentials__marquee,
    .cz-credentials__track:focus-within .cz-credentials__marquee {
      animation-play-state:paused;
    }
    @keyframes czMarquee { to { transform:translateX(-50%); } }

    /* HIGHLIGHTED 7 October 2026, his instruction: *"there is a 'compare them' button
below authorized partners section. I want you to highlight that button in a way that
       user notices it."*

       It was a 12px uppercase text link in --cz-faint, sitting at the end of a rail of
       grey authority marks, and it is the one route from this band to the nineteen-zone
       comparison - which matters more now that the homepage's own eleven-row table has
       gone (he removed it in the same message). So it becomes the house primary button.

       EVERY VALUE IS .cz-btn's AND .cz-btn--primary's, copied rather than chosen: the
       same 15px 26px padding, 2px radius, 13.5px/700 type, 10px gap, 17px mark, the
       --cz-blue fill and the -2px hover lift. Nothing here is a new tuned constant that
       could drift from the buttons it is meant to match (R82.6), and R17's blue-is-action
       reading is the reason it reads as the thing to press rather than as decoration.
       Not given the .cz-btn classes in the markup, because .cz-credentials__more sits
       later in this file at equal specificity and would win on colour - a blue plate
       with faint grey text. One class, one rule, one winner. */
    .cz-credentials__more {
      flex:none; display:inline-flex; align-items:center; gap:10px;
      padding:15px 26px; border:1px solid var(--cz-blue); border-radius:2px;
      background:var(--cz-blue); color:#fff;
      font-size:13.5px; font-weight:700; letter-spacing:.01em; line-height:1;
      text-transform:none;
      min-height:44px;
      transition:background .3s var(--cz-ease), color .3s var(--cz-ease),
                 border-color .3s var(--cz-ease), transform .3s var(--cz-ease);
    }
    .cz-credentials__more:hover,
    .cz-credentials__more:focus-visible {
      background:var(--cz-blue-hover); border-color:var(--cz-blue-hover);
      color:#fff; transform:translateY(-2px);
    }
    .cz-credentials__more svg { width:17px; height:17px; transition:transform .3s var(--cz-ease); }
    .cz-credentials__more:hover svg { transform:translateX(4px); }

    /* ============ 02 · POSITIONING ============ */
    .cz-positioning { background:var(--cz-paper); padding-block:var(--cz-y); }
    /* The head is an asymmetric pair: the argument on the left, the reason it
       matters on the right. Declared once — a 20ch rule overridden four lines
       later by max-width:none is how the old file got into trouble. */
    .cz-positioning__head {
      display:grid;
      grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
      align-items:end;
      gap:clamp(28px,3.6vw,72px);
    }
    .cz-statement {
      margin:0;
      /* Capped at the page's H2 scale. One display size, not two — 62px across
         a full-width container made a 21-word sentence into a billboard. */
      font-size:clamp(27px, 1.9vw + 14px, 42px);
      font-weight:700; line-height:1.12; letter-spacing:-.032em;
      color:var(--cz-text); text-wrap:balance;
    }
    .cz-statement em { font-style:normal; color:var(--cz-gold-emph); }

    /* ONE CONTAINER, ONE LEFT EDGE (R5 §5.1, R19).
       page-kind-company.php:65 writes `<div class="container cz-statement">`,
       so one class is doing two jobs: `.container` (main.css:875) centres with
       `margin-inline:auto`, and `.cz-statement` above declares `margin:0` as a
       display-heading reset — later in the file, same specificity, so it wins
       and kills the auto side margins. The box kept its correct width and sat
       hard against the viewport edge: /about-us/ measured TWO distinct
       .container left edges, 0 and 16 at 375px, 0 and 32 at 1440px, against 1
       on all twelve other routes.
       Scoped to the pair, like `.cz-routes + .cz-reg` (R48): specificity (0,2,0)
       wins only where both classes are on the same element, so `.cz-statement`
       keeps `margin:0` everywhere it is used as a plain heading, including the
       homepage `h2.cz-statement`. Fixing it here rather than in the template
       also covers any future `container cz-statement` pairing.

       AND THE HALF NOBODY HAD MEASURED. `.cz-statement` is not only setting
       `margin:0` on that wrapper — it is setting the whole DISPLAY-HEADING type
       stack on it, and font-weight and letter-spacing INHERIT. The company
       pages' entire body was rendering bold: 46 paragraphs, 8 list items and
       114 table cells at font-weight 700 on /about-us/ and the same again on
       /who-we-are/, against 400 for the identical markup on /vat-corporate-tax/
       and every other article route. `.cz-prose` resets size and colour, which
       is why nobody saw it in a spacing audit; it does not reset weight.
       That is R19's "one type system, and every template obeys it" failing on
       the client's own company pages, and R17's warning not to undo the
       typography he explicitly praised.
       So the pair also has to put back what a plain `.container` would have
       inherited. Everything below is the exact inverse of `.cz-statement`'s
       own declarations — nothing new is introduced.
       The heading use (`h2.cz-statement`, template-parts/home/positioning.php)
       never carries `.container`, so it is untouched: those are the only two
       call sites of the class in the theme. */
    .container.cz-statement {
      margin-inline:auto;
      font-size:inherit;
      font-weight:inherit;
      line-height:inherit;
      letter-spacing:inherit;
      color:inherit;
      text-wrap:wrap;
    }

    .cz-positioning__deck {
      margin:0;
      padding-left:clamp(18px,1.6vw,28px);
      border-left:2px solid var(--cz-gold);
      font-size:clamp(15px,.45vw + 13.6px,17px);
      line-height:1.62; color:var(--cz-mid); text-wrap:pretty;
    }

    .cz-positioning__body {
      display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
      gap:clamp(28px,3.4vw,64px);
      margin-top:clamp(40px,4vw,64px);
      padding-top:clamp(32px,3vw,48px);
      border-top:1px solid var(--cz-line);
    }
    .cz-positioning__col p {
      margin:0; font-size:15.5px; line-height:1.72; color:var(--cz-mid);
    }
    .cz-positioning__col p + p { margin-top:18px; }

    /* FIVE columns since 7 October, when he added the "0% Income tax" box. The count is
       stated once, here; the two narrow bands below are unchanged. */
    .cz-figures {
      display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
      gap:1px; margin-top:clamp(44px,4.5vw,72px);
      background:var(--cz-line); border:1px solid var(--cz-line);
    }
    .cz-figure {
      background:var(--cz-paper); padding:clamp(20px,2vw,32px);
      transition:background .35s var(--cz-ease);
    }
    .cz-figure:hover { background:var(--cz-paper-2); }
    .cz-figure__value {
      display:block; font-size:clamp(30px,2.4vw + 16px,44px);
      font-weight:800; line-height:1; letter-spacing:-.04em; color:var(--cz-text);
    }
    .cz-figure__label {
      display:block; margin-top:12px; font-size:12.5px; line-height:1.5;
      color:var(--cz-mid); max-width:22ch;
    }

    /* ============ 03 · FORMATION ROUTES ============ */
    .cz-routes { background:var(--cz-ink); color:var(--cz-lt); padding-block:var(--cz-y); }
    .cz-routes__grid {
      display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
      gap:clamp(36px,4vw,80px); align-items:start;
    }
    .cz-routes__index { position:sticky; top:120px; }
    .cz-routes__index .cz-h2 { color:#fff; margin-bottom:20px; }
    .cz-routes__index .cz-lead { color:var(--cz-lt); margin-bottom:26px; max-width:38ch; }

    .cz-routes__panels { display:flex; flex-direction:column; gap:1px; background:var(--cz-line-dk); }
    .cz-route:hover { background:var(--cz-ink-3); }

    .cz-route__specs > div {
      gap: 18px;
    }

    /* ============ 04 · BUSINESS ACTIVITIES ============ */
    .cz-activities { background:var(--cz-ink-2); color:var(--cz-lt); padding-block:var(--cz-y); position:relative; }
    .cz-activities__head {
      display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
      gap:clamp(24px,3vw,64px); align-items:end;
      padding-bottom:clamp(28px,3vw,44px); margin-bottom:clamp(28px,3vw,44px);
      border-bottom:1px solid var(--cz-line-dk);
    }
    .cz-activities__head .cz-h2 { color:#fff; }
    .cz-activities__head .cz-lead { color:var(--cz-lt); }

    .cz-activities__panel { border:1px solid var(--cz-line-dk); background:var(--cz-ink); }
    .cz-activities__toolbar {
      display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
      gap:16px; padding:18px 20px; border-bottom:1px solid var(--cz-line-dk);
    }
    .cz-chips { display:flex; flex-wrap:wrap; gap:7px; }
    .cz-chip {
      padding:8px 15px; border:1px solid var(--cz-line-dk); border-radius:100px;
      background:transparent; color:var(--cz-lt);
      font-size:12.5px; font-weight:600; white-space:nowrap;
      transition:all .25s var(--cz-ease);
    }
    .cz-chip:hover { border-color:var(--cz-gold); color:var(--cz-gold); }
    .cz-chip.is-active { background:var(--cz-gold); border-color:var(--cz-gold); color:var(--cz-ink); }

    .cz-search { display:flex; align-items:center; gap:9px; flex:1 1 200px; max-width:280px; }
    .cz-search svg { width:17px; height:17px; color:var(--cz-faint); flex:none; }
    .cz-search input {
      width:100%; padding:9px 0; background:transparent; border:0;
      border-bottom:1px solid var(--cz-line-dk); color:#fff; font-size:13.5px;
      transition:border-color .25s var(--cz-ease);
    }
    .cz-search input::placeholder { color:var(--cz-faint); }
    .cz-search input:focus { outline:none; border-bottom-color:var(--cz-gold); }

    .cz-table__wrap { overflow-x:auto; }

    /* THE 425–680px OVERFLOW BAND ON THE HOMEPAGE — the whole of it, fixed
       here. Measured 2 Sep with the root clip lifted (see the note at the
       @media block near "MEASURING OVERFLOW ON THIS SITE"):
       241px at 440, 201px at 480, 81px at 600, 1px at 680, 0 at 375/420/700+,
       document scrollWidth pinned at 681 throughout.

       The audit named `aside#czRail` as the source. It is not. The rail is
       `position:fixed` and translated off-canvas, so getBoundingClientRect()
       reports its layout box sitting at the document's scroll edge — a
       CONSEQUENCE of the overflow, not its cause. Proof by suppression at 480:
       display:none on the rail leaves 201px; every rail variant (no transform,
       zero width, flipped to the left edge) leaves 201px; display:none on
       #czActivityTable leaves 0. Same false-positive class as the credential
       marquee in 19-MOBILE-A11Y-AUDIT §C3.2.

       The real cause: `.cz-table__wrap` is a `position:static` scroll
       container. The 6-column register has a min-content width of 691px
       (`white-space:nowrap` on every th), the wrap holds it at 446px and
       scrolls it correctly — but a static scroll container's scrollable
       overflow still propagates up to the viewport in Chrome. `position:
       relative` makes the wrap the containing block and stops the propagation.
       Nothing moves: the box has no absolutely-positioned descendants.

       WHY IT SURVIVED EVERY MOBILE CHECK: the rule at `@media (max-width:420px)`
       further down already sets `.cz-table__wrap { position: relative }` for
       the "Scroll for more" hint. That accidentally fixes 375 and 414 — the two
       widths R7 mandates — and reaches no further. The bug lives exactly in the
       gap between 420px and the width at which the table fits.

       SCOPE. `template-parts/activity/register.php` shares this class
       (`.cz-table__wrap--tall`), and `/business-activities/` is frozen under
       R50, so this is NOT applied to the bare class. `/business-activities/`
       measures 0 at 440/480/600 today and must keep rendering byte-identically.
       `archive-cz_freezone.php` also uses the class and also measures 0 in the
       band, so it is left alone too. When R50 lifts, the generator fix is one
       line on `.cz-table__wrap` itself. */
    #cz-activities .cz-table__wrap { position: relative; }

    .cz-table { width:100%; border-collapse:collapse; font-size:13.5px; }
    .cz-table thead th {
      padding:13px 16px; text-align:left; white-space:nowrap;
      font-size: 12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
      color:var(--cz-gold); background:rgba(255,255,255,.03);
      border-bottom:1px solid var(--cz-line-dk);
    }
    .cz-table tbody tr {
      border-bottom:1px solid rgba(255,255,255,.06); cursor:pointer;
      transition:background .25s var(--cz-ease);
    }
    .cz-table tbody tr:hover { background:rgba(199,163,107,.07); }
    .cz-table tbody tr.is-hidden { display:none; }
    .cz-table td { padding:14px 16px; color:var(--cz-lt); vertical-align:middle; }
    .cz-table td:first-child { color:var(--cz-gold); font-weight:700; white-space:nowrap; }
    .cz-table td:nth-child(2) { color:#fff; font-weight:600; }
    .cz-table__go { color:var(--cz-gold); text-align:right; opacity:0; transition:opacity .25s var(--cz-ease), transform .25s var(--cz-ease); transform:translateX(-4px); }
    .cz-table tbody tr:hover .cz-table__go { opacity:1; transform:translateX(0); }
    .cz-table__empty { padding:32px 16px; text-align:center; color:var(--cz-faint); font-size:14px; }

    .cz-activities__foot {
      display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
      gap:16px; padding:20px; border-top:1px solid var(--cz-line-dk);
    }
    .cz-activities__foot p { margin:0; font-size:13px; color:var(--cz-faint); }
    .cz-activities__foot strong { color:var(--cz-gold); }

    /* Detail rail */
    .cz-rail {
      position:fixed; top:0; right:0; bottom:0; z-index:120;
      width:min(460px,92vw); background:var(--cz-ink-2);
      border-left:1px solid var(--cz-line-dk);
      transform:translateX(100%); visibility:hidden;
      transition:transform .55s var(--cz-ease-out), visibility .55s;
      overflow-y:auto;
    }
    .cz-rail.is-open { transform:translateX(0); visibility:visible; }
    .cz-rail__inner { padding:clamp(22px,2.4vw,34px); }
    .cz-rail__head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
    .cz-rail__close {
      width:34px; height:34px; border:1px solid var(--cz-line-dk); border-radius:50%;
      color:var(--cz-lt); font-size:20px; line-height:1; flex:none;
      transition:all .25s var(--cz-ease);
    }
    .cz-rail__close:hover { border-color:var(--cz-gold); color:var(--cz-gold); }
    .cz-rail__title { margin:6px 0 22px; font-size:24px; font-weight:700; letter-spacing:-.025em; color:#fff; }
    .cz-rail__specs { margin:0 0 22px; display:grid; gap:0; }
    .cz-rail__specs > div {
      display:grid; grid-template-columns:150px 1fr; gap:14px;
      padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07);
    }
    .cz-rail__specs dt { font-size: 12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--cz-gold); }
    .cz-rail__specs dd { margin:0; font-size:14px; color:#fff; }
    .cz-rail__note { padding:18px; background:rgba(255,255,255,.04); border-left:2px solid var(--cz-gold); }
    .cz-rail__note p { margin:0; font-size:13.5px; line-height:1.66; color:var(--cz-lt); }
    .cz-rail__cta { margin-top:24px; width:100%; justify-content:center; }
    .cz-rail__scrim { position:fixed; inset:0; z-index:110; background:rgba(0,0,0,.55); backdrop-filter:blur(2px); }

    /* ============ 05 · FREE ZONE COMPARISON ============ */
    .cz-zones { background:var(--cz-paper-2); padding-block:var(--cz-y); }
    .cz-zones__head {
      display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:clamp(24px,3vw,64px); align-items:end; margin-bottom:clamp(28px,3vw,44px);
    }
    .cz-zones__wrap { overflow-x:auto; border:1px solid var(--cz-line); background:#fff; }
    .cz-table--zones { font-size:13.5px; }
    .cz-table--zones thead th {
      color:var(--cz-text); background:var(--cz-paper);
      border-bottom:1px solid var(--cz-line);
    }
    .cz-table--zones tbody tr { border-bottom:1px solid var(--cz-line); cursor:default; }
    .cz-table--zones tbody tr:hover { background:var(--cz-paper); }
    .cz-table--zones tbody tr:last-child { border-bottom:0; }
    .cz-table--zones th[scope="row"] {
      padding:14px 16px; text-align:left; font-weight:700; color:var(--cz-text); white-space:nowrap;
    }
    .cz-table--zones td { color:var(--cz-mid); }

    /* The Emirate column rendered WHITE ON WHITE — 1.00:1 across all 11 rows of
       the front-page matrix. `.cz-table td:nth-child(2){color:#fff}` above is a
       dark-table assumption at (0,2,1) and out-specified `.cz-table--zones td`
       at (0,1,1), so the light matrix inherited the dark table's second-column
       treatment. zones.css:204 already fixes exactly this for the free-zone
       archive via `.cz-zonehub__matrix .cz-table td`; the front-page matrix is
       wrapped in .cz-zones__matrix and never received it.

       Equal specificity to the rule it corrects (0,2,1), printed later, and
       scoped to the light variant only — the activities register's white
       Activity column is untouched. On the archive, zones.css is enqueued
       after main.css and still wins at the same weight, so that page is
       unchanged. Colour is the emphasis ink, not --cz-mid: this is still the
       column the base rule was emphasising, at 17.8:1 on #fff. */
    .cz-table--zones td:nth-child(2) { color:var(--cz-text); }
    .cz-zones__note { margin:20px 0 0; font-size:13px; color:var(--cz-mid); max-width:70ch; }

    /* ============ 06 · JOURNEY ============ */
    .cz-journey { background:var(--cz-paper-2); padding-block:var(--cz-y); }
    .cz-journey__head { max-width:62ch; margin-bottom:clamp(26px,2.6vw,40px); }
    .cz-journey__head .cz-h2 { margin-bottom:16px; }

    /* The rail bleeds to the viewport edge so it reads as a rail that
       continues, but its inline padding matches the container gutter — so the
       first card lines up with every other section's left edge, and the last
       card is not jammed against the glass. */
    .cz-journey__rail {
      overflow-x:auto; overflow-y:hidden;
      scroll-snap-type:x mandatory;
      /* The same arithmetic .container uses to centre itself, so the first
         card sits on the site's single left edge. */
      scroll-padding-left:max(calc((100% - 1720px) / 2), calc(clamp(32px, 4.5vw, 72px) / 2));
      padding-inline:max(calc((100% - 1720px) / 2), calc(clamp(32px, 4.5vw, 72px) / 2));
      padding-bottom:14px;
      scrollbar-width:thin;
      -webkit-overflow-scrolling:touch;
    }
    .cz-journey__rail::-webkit-scrollbar { height:3px; }
    .cz-journey__rail::-webkit-scrollbar-track { background:var(--cz-line); }
    .cz-journey__rail::-webkit-scrollbar-thumb { background:var(--cz-gold); }

    .cz-journey__list {
      display:grid; grid-auto-flow:column;
      /* A fixed card width. `minmax(268px,1fr)` inside a max-content track
         let each card grow to its longest sentence — two cards filled the
         viewport and the rest of the copy was clipped. */
      grid-auto-columns:clamp(272px, 23vw, 336px);
      gap:clamp(14px,1.4vw,22px);
      width:max-content;
      margin:0; padding:0; list-style:none;
    }

    .cz-stage {
      scroll-snap-align:start;
      display:flex; flex-direction:column;
      background:var(--cz-paper);
      border:1px solid var(--cz-line);
      overflow:hidden;
      transition:transform .45s var(--cz-ease), box-shadow .45s var(--cz-ease), border-color .45s var(--cz-ease);
    }
    .cz-stage:hover {
      transform:translateY(-5px);
      border-color:rgba(199,163,107,.55);
      box-shadow:0 20px 44px rgba(5,6,7,.09);
    }

    /* This had no rule at all. The raw <img> rendered at its natural size
       inside a flex column and blew the card apart. */
    .cz-stage__media {
      position:relative; display:block;
      /* An explicit height, not aspect-ratio. Inside a flex column whose height
         comes from the grid row, aspect-ratio has nothing to resolve against
         and the media collapsed to 87px. */
      height:clamp(150px, 11.5vw, 184px);
      overflow:hidden;
      background:var(--cz-paper-3);
      flex:0 0 auto;
    }
    .cz-stage__media img {
      width:100%; height:100%; object-fit:cover; display:block;
      transform:scale(1.03);
      transition:transform 1.1s var(--cz-ease-out);
    }
    .cz-stage:hover .cz-stage__media img { transform:scale(1.08); }
    .cz-stage__media::after {
      content:""; position:absolute; inset:0;
      background:linear-gradient(180deg, rgba(5,6,7,0) 45%, rgba(5,6,7,.42) 100%);
    }

    .cz-stage__body {
      display:flex; flex-direction:column; flex:1;
      padding:clamp(20px,1.9vw,26px);
    }
    .cz-stage__num {
      font-size:12px; font-weight:800; letter-spacing:.15em; color:var(--cz-gold-emph);
      padding-bottom:14px; margin-bottom:14px; border-bottom:1px solid var(--cz-line);
    }
    .cz-stage h3 { margin:0 0 9px; font-size:17.5px; font-weight:700; line-height:1.28; letter-spacing:-.018em; color:var(--cz-text); }
    .cz-stage p { margin:0; font-size:14px; line-height:1.6; color:var(--cz-mid); text-wrap:pretty; }
    .cz-stage__meta {
      margin-top:auto; padding-top:18px;
      font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cz-gold-emph);
    }
    .cz-journey__note { margin:22px 0 0; font-size:13.5px; color:var(--cz-mid); max-width:72ch; }
    .cz-journey__hint {
      display:flex; align-items:center; gap:9px;
      margin:0 0 14px;
      font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--cz-mid);
    }
    .cz-journey__hint svg { width:16px; height:16px; }

    /* ============ 07 · APPROVALS MATRIX ============ */
    /* B316 — THE SAME BLUE GRADIENT AS THE FORM SECTION, AND LESS AIR.
       His report: *"that whole section is too dark. Use the same blue gradient on it like we have
       in footer"* and *"that section has empty space above and below the section."*

       The gradient is the one `.cz-consult` carries (main.css ~6979), copied rather than invented so
       the two read as the same treatment. `--cz-y` measured 86.4px top and bottom here; the eyebrow
       sat 87px below the section's own edge, which is the air he is pointing at. Cut to two thirds,
       on this section only — the neighbours keep `--cz-y` and he has not objected to them. */
    .cz-approvals {
      background:
        radial-gradient(circle at 82% 34%, rgba(23, 105, 255, .18), transparent 38rem),
        linear-gradient(135deg, #0a0e15 0%, #080a0e 58%, #0b111b 100%);
      color: var(--cz-lt);
      padding-block: calc(var(--cz-y) * .66);
    }
    .cz-approvals__head {
      display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
      gap:clamp(24px,3vw,64px); align-items:end;
      padding-bottom:clamp(28px,3vw,44px); margin-bottom:clamp(28px,3vw,44px);
      border-bottom:1px solid var(--cz-line-dk);
    }
    .cz-approvals__head .cz-h2 { color:#fff; }
    .cz-approvals__head .cz-lead { color:var(--cz-lt); }

    .cz-authorities {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));
      gap:1px; background:var(--cz-line-dk); border:1px solid var(--cz-line-dk);
    }
    .cz-authority {
      background:var(--cz-ink); padding:clamp(18px,1.8vw,26px);
      transition:background .35s var(--cz-ease);
    }
    .cz-authority:hover { background:var(--cz-ink-3); }
    .cz-authority h3 {
      margin:0 0 9px; font-size:14.5px; font-weight:700; letter-spacing:-.012em; color:var(--cz-gold);
    }
    .cz-authority p { margin:0; font-size:13px; line-height:1.6; color:var(--cz-lt); }

    .cz-approvals__cta {
      display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
      gap:18px; margin-top:clamp(28px,3vw,44px);
      padding-top:clamp(22px,2.4vw,32px); border-top:1px solid var(--cz-line-dk);
    }
    .cz-approvals__cta p { margin:0; font-size:16px; color:#fff; font-weight:600; }

    /* ============ 08 · GROUP CAPABILITIES ============ */
    .cz-verticals { background:var(--cz-paper); padding-block:var(--cz-y); }
    .cz-verticals__head { max-width:60ch; margin-bottom:clamp(30px,3.2vw,48px); }
    /* An asymmetric pair, not two equal tiles. The weighting is the strategy:
       Real Estate & Property Investment is the only web presence that capability
       has, so it takes the wider column and the lighter, fuller treatment. Tax &
       Financial Advisory has its own site to hand traffic to, so it is the
       narrower, inverted panel — a summary that points onward rather than a
       second full pitch competing beside the first. */
    .cz-verticals__grid {
      /* B316 — EQUAL BOXES. His report: *"In two capabilities section, these 2 boxes are of
         different sizes and ratio."* Measured at 1600: 649px and 831px, because the track was
         weighted 1 : 1.28. The two are peer capabilities of the group — Finvisors and
         Consulthome — so neither earns the extra 182px, and at 1fr each they take 740px and
         740px with the same cover ratio above them. */
      display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:clamp(20px,2vw,32px);
      align-items:stretch;
    }
    .cz-vertical::before {
      content:""; position:absolute; inset:0 auto 0 0; width:3px;
      background:var(--cz-gold); transform:scaleY(0); transform-origin:bottom;
      transition:transform .55s var(--cz-ease-out);
    }
    .cz-vertical:hover { transform:translateY(-4px); border-color:rgba(199,163,107,.42); box-shadow:0 22px 56px rgba(5,6,7,.1); }
    .cz-vertical:hover::before { transform:scaleY(1); transform-origin:top; }
    .cz-vertical__body { padding:clamp(24px,2.6vw,40px); }
    .cz-vertical__kicker {
      margin:0 0 14px; font-size: 12px; font-weight:700;
      letter-spacing:.17em; text-transform:uppercase; color:var(--cz-gold-emph);
    }
    .cz-vertical__body h3 {
      margin:0 0 14px; font-size:clamp(20px,1.1vw + 16px,27px);
      font-weight:700; line-height:1.2; letter-spacing:-.024em; color:var(--cz-text);
      text-wrap:balance;
    }
    .cz-vertical__lead { margin:0 0 20px; font-size:14.5px; line-height:1.68; color:var(--cz-mid); }
    .cz-vertical__list { margin:0 0 24px; padding:0; list-style:none; display:grid; gap:0; }
    .cz-vertical__list li {
      position:relative; padding:10px 0 10px 22px;
      font-size:13.5px; line-height:1.5; color:var(--cz-text);
      border-bottom:1px solid var(--cz-line);
    }
    .cz-vertical__list li::before {
      content:""; position:absolute; left:0; top:17px;
      width:6px; height:6px; border:1px solid var(--cz-gold); border-radius:50%;
    }

    /* ============ 09 · SUPPORT SERVICES ============ */
    /* B316 — his instruction: *"Use the blue gradient effect in 'ongoing support' section too."*
       Same gradient as `.cz-consult` and `.cz-approvals`, replacing the flat `--cz-ink-2`. */
    .cz-support {
      background:
        radial-gradient(circle at 82% 34%, rgba(23, 105, 255, .18), transparent 38rem),
        linear-gradient(135deg, #0a0e15 0%, #080a0e 58%, #0b111b 100%);
      color: var(--cz-lt);
      padding-block: var(--cz-y);
    }
    .cz-support__head { margin-bottom:clamp(28px,3vw,44px); }
    .cz-support__head .cz-h2 { color:#fff; }
    .cz-support__grid {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,268px),1fr));
      gap:1px; background:var(--cz-line-dk); border:1px solid var(--cz-line-dk);
    }
    .cz-support__item {
      background:var(--cz-ink-2); padding:clamp(20px,2vw,28px);
      transition:background .35s var(--cz-ease);
    }
    .cz-support__item:hover { background:var(--cz-ink-3); }
    .cz-support__item h3 { margin:0 0 10px; font-size:15.5px; font-weight:700; letter-spacing:-.015em; color:#fff; }
    .cz-support__item p { margin:0; font-size:13.5px; line-height:1.62; color:var(--cz-lt); }

    /* ============ 10 · CLIENT VOICES ============ */
    .cz-voices { background:var(--cz-paper-2); padding-block:var(--cz-y); }
    .cz-voices__head { margin-bottom:clamp(28px,3vw,44px); }
    .cz-voices__wall {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
      gap:clamp(16px,1.6vw,24px);
    }
    .cz-quote {
      margin:0; padding:clamp(22px,2.2vw,32px);
      background:#fff; border:1px solid var(--cz-line);
      display:flex; flex-direction:column;
      transition:transform .4s var(--cz-ease), box-shadow .4s var(--cz-ease);
    }
    .cz-quote:hover { transform:translateY(-4px); box-shadow:0 18px 44px rgba(5,6,7,.09); }
    .cz-quote blockquote {
      margin:0; font-size:15px; line-height:1.62; color:var(--cz-text); text-wrap:pretty;
    }
    .cz-quote blockquote::before {
      content:""; display:block; width:28px; height:2px;
      background:var(--cz-gold); margin-bottom:16px;
    }
    .cz-quote figcaption { margin-top:auto; padding-top:20px; }
    .cz-quote strong { display:block; font-size:14px; font-weight:700; color:var(--cz-text); }
    .cz-quote figcaption span { font-size:12px; color:var(--cz-mid); }

    /* ============ 11 · FAQ ============ */
    .cz-faq { background:var(--cz-paper); padding-block:var(--cz-y); }
    /* B331 — *"In Faq's, there is emoty space between faq and lest text"*, and it is the
       §7k hole again: A TRACK SIZED BY THE CONTAINER HOLDING CONTENT CAPPED BY A MEASURE.

       `.72fr` of a 1720px container gave the intro 592px. Its contents cannot use that:
       the h2 sets "Answered plainly." at 355px and `.cz-faq__intro .cz-lead` is capped at
       `34ch` (~333px) sixteen lines below. Measured at 1860 with a Range over the text
       nodes — the longest GLYPH RUN ends at x=417 while the track ends at 655, so **237px
       of the intro column is empty**, and the 74px column gap sits on top of it: 312px
       between his sentence and the first question.

       MY FIRST MEASUREMENT SAID THE SLACK WAS ZERO, because it took the widest element
       BOX in the column and a block-level box fills its track by definition. Boxes cannot
       answer "where does the text stop" — only the glyph rectangles can.

       So the track is sized to its content rather than to a share of the page, and the
       gap cap comes down with it. The list takes what is released. Left edge unchanged.
       (`.cz-routes__grid` has the same `.82fr` shape and was measured separately rather
       than assumed to match — see the note beside it.) */
    .cz-faq__grid {
      display:grid; grid-template-columns:clamp(280px,24vw,400px) minmax(0,1fr);
      gap:clamp(32px,3vw,56px); align-items:start;
    }
    .cz-faq__intro { position:sticky; top:120px; }
    .cz-faq__intro .cz-h2 { margin-bottom:16px; }
    .cz-faq__intro .cz-lead { margin-bottom:22px; max-width:34ch; }

    .cz-faq__list { border-top:1px solid var(--cz-line); }
    .cz-faq__item { border-bottom:1px solid var(--cz-line); }
    .cz-faq__item summary {
      list-style:none; cursor:pointer;
      display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
      padding:20px 0; font-size:clamp(15px,.5vw + 14px,17.5px); font-weight:700;
      letter-spacing:-.014em; color:var(--cz-text);
      transition:color .25s var(--cz-ease);
    }
    .cz-faq__item summary::-webkit-details-marker { display:none; }
    .cz-faq__item summary::after {
      content:"+"; flex:none; width:22px; text-align:center;
      font-size:19px; font-weight:400; color:var(--cz-gold);
      transition:transform .35s var(--cz-ease);
    }
    .cz-faq__item[open] summary::after { content:"−"; }
    .cz-faq__item summary:hover { color:var(--cz-gold); }
    .cz-faq__answer { padding:0 44px 22px 0; }
    .cz-faq__answer p { margin:0; font-size:14.5px; line-height:1.72; color:var(--cz-mid); }

    /* ============ 12 · CONSULTATION ============ */
    .cz-consult { background:var(--cz-ink); color:var(--cz-lt); padding-block:var(--cz-y); }
    .cz-consult__head { max-width:56ch; margin-bottom:clamp(30px,3.2vw,48px); }
    .cz-consult__head .cz-h2 { color:#fff; margin-bottom:16px; }
    .cz-consult__head .cz-lead { color:var(--cz-lt); }

    .cz-consult__facts {
      display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
      gap:1px; background:var(--cz-line-dk);
      border:1px solid var(--cz-line-dk); margin-bottom:clamp(24px,2.6vw,40px);
    }
    .cz-fact { background:var(--cz-ink); padding:clamp(18px,1.9vw,26px); }
    .cz-fact span {
      display:block; margin-bottom:10px;
      font-size: 12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--cz-gold);
    }
    .cz-fact p { margin:0; font-size:13.5px; line-height:1.62; color:var(--cz-lt); }
    .cz-fact a { transition:color .25s var(--cz-ease); }
    .cz-fact a:hover { color:var(--cz-gold); }

    .cz-form { border:1px solid var(--cz-line-dk); padding:clamp(22px,2.6vw,40px); background:var(--cz-ink-2); }

    /* The heading `cz_lead_form()` emits when it is passed one — inc/helpers.php:635
       writes `<div class="cz-form__head"><h3>…</h3></div>` and, until now, NOTHING
       in any stylesheet in this theme matched `.cz-form__head`. The h3 therefore
       inherited --cz-text (rgb(7,21,34)) onto .cz-form's --cz-ink-2 (#0a0c10)
       ground and measured 1.06:1 — a heading a sighted user cannot see, on
       /contact/, beside field labels that are all legible because .cz-field label
       does declare a colour.

       Fixed at the component, not on the page: /contact/ is the only current call
       site that passes a heading, so today's fan-out is 1, but this is a property
       of cz_lead_form() and every future form that passes one inherits it.
       #fff on #0a0c10 measures 19.6:1 and matches the other headings that sit on
       this ground (.cz-rail__title, .cz-support__head .cz-h2). */
    .cz-form__head { margin:0 0 22px; }
    .cz-form__head h3 {
      margin:0;
      font-size:clamp(17px,.5vw + 15px,20px);
      font-weight:700; line-height:1.2; letter-spacing:-.02em;
      color:#fff;
    }

    .cz-form__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
    .cz-field { display:flex; flex-direction:column; gap:8px; }
    .cz-field--full { grid-column:1 / -1; }
    .cz-field label { font-size: 12px; font-weight:700; letter-spacing:.05em; color:var(--cz-faint); }
    .cz-field input, .cz-field select, .cz-field textarea {
      /* A grid track of minmax(0,1fr) still cannot shrink a control below its
         intrinsic width. The service <select> sizes to its longest option —
         "Business setup — jurisdiction not yet decided" — which pushed the form
         60px past a 375px viewport. */
      width:100%; min-width:0; max-width:100%; box-sizing:border-box;
      padding:13px 15px; background:rgba(255,255,255,.04);
      border:1px solid var(--cz-line-dk); border-radius:2px;
      color:#fff; font-size:14px; font-family:inherit;
      transition:border-color .25s var(--cz-ease), background .25s var(--cz-ease);
    }
    .cz-field textarea { min-height:104px; resize:vertical; }
    .cz-field input::placeholder, .cz-field textarea::placeholder { color:rgba(255,255,255,.3); }
    .cz-field input:focus, .cz-field select:focus, .cz-field textarea:focus {
      outline:none; border-color:var(--cz-gold); background:rgba(255,255,255,.07);
    }
    .cz-field select option { background:var(--cz-ink-2); color:#fff; }
    .cz-form__foot {
      display:flex; flex-wrap:wrap; align-items:center; gap:20px;
      margin-top:22px; padding-top:22px; border-top:1px solid var(--cz-line-dk);
    }
    .cz-form__note { margin:0; flex:1 1 300px; font-size:12.5px; line-height:1.55; color:var(--cz-faint); }

    /* ============ RESPONSIVE ============ */
    @media (max-width:1100px) {
      .cz-routes__grid { grid-template-columns:1fr; }
      .cz-routes__index { position:static; }
      .cz-faq__grid { grid-template-columns:1fr; }
      .cz-faq__intro { position:static; }
      .cz-figures { grid-template-columns:repeat(2,minmax(0,1fr)); }
      /* Five items in two columns leaves one empty cell, and an empty cell in this grid
         is a lit 1px rule round nothing, because the table's lines ARE its background.
         The odd one out takes the whole row instead (B313, B314). */
      .cz-figures > .cz-figure:last-child:nth-child(odd) { grid-column:1 / -1; }
      .cz-verticals__grid { grid-template-columns:1fr; }
      .cz-form__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media (max-width:860px) {
      .cz-positioning__body { grid-template-columns:1fr; }
      .cz-positioning__head { grid-template-columns:1fr; align-items:start; gap:22px; }
      .cz-activities__head, .cz-zones__head, .cz-approvals__head { grid-template-columns:1fr; align-items:start; }
      .cz-credentials__inner { flex-direction:column; align-items:flex-start; gap:18px; }
      .cz-credentials__track { width:100%; }
      .cz-route__specs > div { gap: 5px; }
      .cz-rail__specs > div { grid-template-columns:1fr; gap:4px; }
    }
    @media (max-width:600px) {
      .cz-figures { grid-template-columns:1fr; }
      .cz-form__grid { grid-template-columns:1fr; }
      .cz-route__tag { grid-column:1 / -1; }
      .cz-faq__answer { padding-right:0; }
      .cz-approvals__cta { flex-direction:column; align-items:flex-start; }
    }

    @media (prefers-reduced-motion:reduce) {
      .cz-credentials__marquee { animation:none; }
      /* ---- A STILL MARQUEE MUST STAY OPERABLE ----
         Stopping the animation is half a degrade. The track is `overflow: hidden` and the
         marquee is 2,808px inside a 343px track, so with the animation off a reader sees
         about two of his nine channel partnerships and has no way to the other seven.

         Until 8 October a `@media (hover: none)` block supplied the missing half on touch,
         by chance rather than by design — it killed the animation AND set `overflow-x: auto`.
         He has since asked for the band to auto-scroll on a phone, so that block is gone,
         and the fallback it was carrying has to be stated here where it belongs. A DESKTOP
         reduced-motion reader never had it at all.

         Same shape as `.cz-voices__track`'s own reduced-motion rule: stop it, hide the
         duplicate copy (dead weight once still, and it would otherwise let a reader scroll
         through the same nine twice), make the track a scroller. No `tabindex` — a scroll
         container is keyboard-focusable by itself, which is also what makes the existing
         `:focus-within` pause reachable. */
      .cz-credentials__track { overflow-x: auto; overscroll-behavior-x: contain; }
      .cz-credentials__list[aria-hidden="true"] { display: none; }
      .cz-rail { transition:none; }
    }

    /* ==========================================================
       FOOTER — tiered, not columnar
       Tier 1 identity + balanced nav · Tier 2 credentials · Tier 3 legal
       Replaces the previous 5-ragged-column layout entirely.
       ========================================================== */

    .cz-footer {
      background: var(--cz-ink);
      color: var(--cz-lt);
      border-top: 1px solid var(--cz-line-dk);
    }

    /* ---- Tier 1 ---- */
    .cz-footer__main {
      display: grid;
      grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
      gap: clamp(40px, 5vw, 96px);
      padding-block: clamp(52px, 5.4vw, 84px);
      align-items: start;
    }

    .cz-footer__logo { height: 30px; width: auto; margin-bottom: 22px; }

    .cz-footer__line {
      margin: 0 0 28px;
      font-size: 13.5px;
      line-height: 1.68;
      color: var(--cz-faint);
      max-width: 44ch;
    }

    .cz-footer__contact {
      display: grid;
      gap: 0;
      border-top: 1px solid var(--cz-line-dk);
    }
    .cz-footer__contact-row {
      display: grid;
      grid-template-columns: 68px 1fr;
      gap: 16px;
      padding: 13px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
    .cz-footer__label {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: var(--cz-gold);
      padding-top: 3px;
    }
    .cz-footer__contact-row a {
      display: block;
      font-size: 14px;
      line-height: 1.5;
      color: #fff;
      transition: color .25s var(--cz-ease);
    }
    .cz-footer__contact-row a:hover { color: var(--cz-gold); }
    .cz-footer__contact-row address {
      font-style: normal;
      font-size: 13px;
      line-height: 1.6;
      color: var(--cz-lt);
    }
    .cz-footer__reply { font-size: 13px; line-height: 1.5; color: var(--cz-lt); }

    .cz-footer__social {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 24px;
    }
    .cz-footer__social a {
      padding: 8px 15px;
      border: 1px solid var(--cz-line-dk);
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      color: var(--cz-lt);
      transition: all .25s var(--cz-ease);
    }
    .cz-footer__social a:hover { border-color: var(--cz-gold); color: var(--cz-gold); }

    /* ---- Balanced navigation: 4 columns, 6 items each ---- */
    .cz-footer__nav {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(20px, 2.4vw, 40px);
    }
    .cz-footer__col h2 {
      margin: 0 0 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--cz-line-dk);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: var(--cz-gold);
    }
    .cz-footer__col ul { margin: 0; padding: 0; list-style: none; }
    .cz-footer__col li + li { margin-top: 2px; }
    .cz-footer__col a {
      display: block;
      padding: 6px 0;
      font-size: 13.5px;
      line-height: 1.45;
      color: var(--cz-lt);
      transition: color .25s var(--cz-ease), transform .25s var(--cz-ease);
    }
    .cz-footer__col a:hover { color: var(--cz-gold); transform: translateX(3px); }

    .cz-footer__more {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, .07);
      width: 100%;
      font-size: 12px;
      font-weight: 700;
      color: var(--cz-gold);
      transition: gap .25s var(--cz-ease);
    }
    .cz-footer__more:hover { gap: 12px; }

    /* ---- Tier 2: credential strip ---- */
    .cz-footer__partners {
      background: var(--cz-ink-2);
      border-block: 1px solid var(--cz-line-dk);
      padding-block: 22px;
    }
    .cz-footer__partners-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px clamp(18px, 2.4vw, 36px);
    }
    .cz-footer__partners ul {
      display: flex;
      flex-wrap: wrap;
      gap: 10px clamp(16px, 2vw, 30px);
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .cz-footer__partners li {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .04em;
      /* Was .42, which composites to #717274 on this band's --cz-ink-2 and
         measured 4.07:1 — a partner NAME is content, not chrome, so it takes
         the 4.5:1 body threshold. .48 composites to #808184 at 4.99:1. */
      color: rgba(255, 255, 255, .48);
      white-space: nowrap;
      transition: color .25s var(--cz-ease);
    }
    .cz-footer__partners li:hover { color: var(--cz-gold); }

    /* ---- Tier 3: legal bar ---- */
    .cz-footer__legal-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px 28px;
    }
    .cz-footer__meta { display: flex; flex-wrap: wrap; gap: 10px 22px; }
    .cz-footer__meta a {
      font-size: 12.5px;
      color: var(--cz-lt);
      transition: color .25s var(--cz-ease);
    }
    .cz-footer__meta a:hover { color: var(--cz-gold); }

    .cz-footer__rights {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 20px;
      font-size: 12.5px;
      color: var(--cz-faint);
    }
    .cz-footer__rights a { transition: color .25s var(--cz-ease); }
    .cz-footer__rights a:hover { color: var(--cz-gold); }

    /* ---- Keep the floating buttons off the footer ----
       The 76px reservation is for the band where the floating WhatsApp/phone
       buttons sit BESIDE the legal row. It was written open-ended, so it also
       matched 375px, where it is both redundant and harmful: the 900px block
       further down already adds padding-bottom:64px ("Stop the floating
       buttons sitting on footer content") and measures 28.8px of vertical
       clearance on its own — legal content ends at y=726.2, the 47x47 buttons
       start at y=755 — and below 560px the row is flex-direction:column
       anyway. On a phone the 76px bought nothing and did not even clear the
       buttons horizontally (content right edge x=283.2 against a leftmost
       button at x=261.2). All it did was take 76.0px off a 343.2px column and
       leave it lopsided, 0px left against 76px right — 20.3% of the screen.
       Bounded at both ends against the 900px breakpoint that owns the vertical
       clearance, so the two fixes meet without overlapping. */
    .cz-footer__legal { padding-block: 22px; padding-right: 0; }
    @media (min-width: 901px) and (max-width: 1100px) {
      .cz-footer__legal-inner { padding-right: 76px; }
    }

    /* ---- Responsive ---- */
    @media (max-width: 1180px) {
      .cz-footer__main { grid-template-columns: 1fr; gap: 44px; }
      .cz-footer__line { max-width: 60ch; }
    }
    @media (max-width: 900px) {
      .cz-footer__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 560px) {
      .cz-footer__nav { grid-template-columns: 1fr; }
      .cz-footer__contact-row { grid-template-columns: 1fr; gap: 5px; }
      .cz-footer__label { padding-top: 0; }
      .cz-footer__legal-inner { flex-direction: column; align-items: flex-start; }
    }

    /* ==========================================================
       FOOTER TIER 1 — contact band
       Map · office details & hours · direct lines
       ========================================================== */

    .cz-footer__band {
      background: var(--cz-ink-2);
      border-bottom: 1px solid var(--cz-line-dk);
    }
    .cz-footer__band-inner {
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) minmax(0, .95fr);
      gap: clamp(24px, 3vw, 56px);
      padding-block: clamp(44px, 4.6vw, 72px);
      align-items: start;
    }

    .cz-footer__band-title {
      margin: 0 0 20px;
      padding-bottom: 14px;
      border-bottom: 1px solid var(--cz-line-dk);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: var(--cz-gold);
    }

    /* ---- Map ---- */
    .cz-footer__map {
      position: relative;
      border: 1px solid var(--cz-line-dk);
      overflow: hidden;
      background: var(--cz-ink-3);
    }
    /*
     * A live Google Maps embed, by the client's decision — "maps should be of
     * google maps, let it be." It was briefly a static self-hosted image; that
     * was reverted. A map is a SERVICE the reader uses, not an ASSET the page
     * needs in order to render, and R3.6 governs the second, not the first.
     *
     * Full colour. Greyscale was applied here once and rejected: "maps
     * shouldn't be black and white though." A map is a wayfinding tool, not
     * decoration, and a desaturated one is harder to read.
     */
    .cz-footer__map iframe {
      display: block;
      width: 100%;
      height: clamp(260px, 22vw, 340px);
      border: 0;
    }

    .cz-footer__directions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 14px 18px;
      border-top: 1px solid var(--cz-line-dk);
      font-size: 12.5px;
      font-weight: 700;
      color: var(--cz-gold);
      background: var(--cz-ink);
      transition: background .25s var(--cz-ease);
    }
    .cz-footer__directions:hover { background: var(--cz-ink-3); }

    /* ---- Office ---- */
    .cz-footer__address {
      font-style: normal;
      margin: 0 0 22px;
      font-size: 14.5px;
      line-height: 1.7;
      color: #fff;
    }

    .cz-footer__hours { margin: 0; display: grid; gap: 0; }
    .cz-footer__hours > div {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 14px;
      padding: 9px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
    }
    .cz-footer__hours dt { font-size: 13px; color: var(--cz-lt); }
    .cz-footer__hours dd {
      margin: 0;
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      white-space: nowrap;
    }
    .cz-footer__tz {
      margin: 14px 0 0;
      font-size: 12px;
      color: var(--cz-faint);
    }

    /* ---- Direct lines ---- */
    .cz-footer__lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
    .cz-footer__lines li {
      display: grid;
      grid-template-columns: 82px 1fr;
      gap: 6px 16px;
      padding: 12px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .07);
      align-items: start;
    }
    .cz-footer__lines .cz-footer__label { grid-row: span 2; padding-top: 3px; }
    .cz-footer__lines a {
      display: block;
      font-size: 14px;
      line-height: 1.5;
      color: #fff;
      transition: color .25s var(--cz-ease);
    }
    .cz-footer__lines a:hover { color: var(--cz-gold); }

    .cz-footer__promise {
      margin-top: 22px;
      padding: 16px 18px;
      background: rgba(199, 163, 107, .08);
      border-left: 2px solid var(--cz-gold);
    }
    .cz-footer__promise strong {
      display: block;
      font-size: 13.5px;
      font-weight: 700;
      color: var(--cz-gold);
      margin-bottom: 4px;
    }
    .cz-footer__promise span { font-size: 12.5px; line-height: 1.55; color: var(--cz-lt); }

    .cz-footer__cta { margin-top: 20px; width: 100%; justify-content: center; }

    /* ---- Responsive ---- */
    @media (max-width: 1100px) {
      .cz-footer__band-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .cz-footer__map { grid-column: 1 / -1; }
    }
    @media (max-width: 700px) {
      .cz-footer__band-inner { grid-template-columns: 1fr; }
      .cz-footer__lines li { grid-template-columns: 1fr; gap: 4px; }
      .cz-footer__lines .cz-footer__label { grid-row: auto; padding-top: 0; }
    }

    /* ==========================================================
       FORMATION ROUTES — restructured
       Fixes: tag colliding with the floating buttons, labels too
       small to read, and four identical flat tables reading as
       monotonous. Number becomes a graphic anchor; specs become a
       2-column grid of cards rather than a label/value list.
       ========================================================== */

    .cz-route__head {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: start;
      gap: clamp(16px, 1.6vw, 26px);
      margin-bottom: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid var(--cz-line-dk);
    }

    /* The number is now a display element, not a caption. */
    .cz-route__num {
      font-size: clamp(28px, 1.8vw + 18px, 40px);
      font-weight: 800;
      line-height: .9;
      letter-spacing: -.04em;
      /* Was rgba(199,163,107,.34), which composites to #473b29 on the panel's
         #050607 and measured 1.87:1. The numeral is not aria-hidden, so it is
         content, and it has to clear 3:1 at its 40px desktop size AND 4.5:1 at
         the 13px the mobile block below drops it to. .72 composites to
         #90774f at 4.78:1, which clears the stricter of the two. The numeral
         is still quieter than the white title beside it; the hover to full
         --cz-gold below is now an enhancement rather than the only readable
         state. */
      color: rgba(199, 163, 107, .72);
      font-variant-numeric: tabular-nums;
    }
    .cz-route:hover .cz-route__num { color: var(--cz-gold); }

    .cz-route__titles { display: flex; flex-direction: column; gap: 10px; }

    .cz-route__head h3 {
      margin: 0;
      font-size: clamp(20px, 1vw + 16px, 27px);
      font-weight: 700;
      letter-spacing: -.024em;
      color: #fff;
      line-height: 1.15;
    }

    /* Pill under the title — never pushed to the right edge, so it
       can no longer collide with the floating contact buttons. */
    .cz-route__tag {
      align-self: flex-start;
      padding: 6px 13px;
      border: 1px solid rgba(199, 163, 107, .38);
      border-radius: 100px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--cz-gold);
      white-space: normal;
    }

    .cz-route__lead {
      margin: 0 0 24px;
      font-size: clamp(15px, .45vw + 14px, 16.5px);
      line-height: 1.68;
      color: var(--cz-lt);
      max-width: 68ch;
    }

    /* Specs: a 2-column grid of small cards, not a flat list. */
    .cz-route__specs {
      margin: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1px;
      background: var(--cz-line-dk);
      border: 1px solid var(--cz-line-dk);
    }
    .cz-route__specs > div {
      display: block;
      grid-template-columns: none;
      padding: 18px 20px;
      background: var(--cz-ink);
      transition: background .3s var(--cz-ease);
    }
    .cz-route:hover .cz-route__specs > div { background: var(--cz-ink-3); }
    .cz-route__specs > div:hover { background: var(--cz-ink-4); }

    .cz-route__specs dt {
      display: block;
      margin-bottom: 9px;
      padding-top: 0;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--cz-gold);
    }
    .cz-route__specs dd {
      margin: 0;
      font-size: 14.5px;
      line-height: 1.62;
      color: var(--cz-lt);
    }

    /* Left index: give the sticky column a footer so it does not
       strand a void beside the tall panel stack. */
    .cz-routes__index .cz-textlink { margin-bottom: 28px; }
    /* THE ELEMENT THESE TWO RULES STYLED WAS REMOVED ON HIS INSTRUCTION, 8 October 2026
       — the "Who pays us" note in the homepage routes aside (template-parts/home/routes.php,
       which carries his words and the two decisions it overrules). They are kept, matching
       nothing, so a restore is one edit in one file rather than two; the same choice §7aa
       made for the return arc's four rules. Delete them only if he rules the note is not
       coming back. */
    .cz-routes__aside-note {
      padding-top: 22px;
      border-top: 1px solid var(--cz-line-dk);
      font-size: 13px;
      line-height: 1.6;
      color: var(--cz-faint);
    }
    .cz-routes__aside-note strong { display: block; color: var(--cz-gold); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }

    @media (max-width: 860px) {
      .cz-route__specs { grid-template-columns: 1fr; }
      .cz-route__head { grid-template-columns: 1fr; gap: 12px; }
    }

    /* ==========================================================
       MOBILE REFINEMENT
       Audited at 375px and found: 63 tap targets under 40px and
       16 text elements under 12px. Both fixed here rather than by
       shrinking the desktop design.

       Targets: 44px minimum touch height (WCAG 2.5.5 AAA),
       12px minimum body text, 11px minimum for uppercase labels
       where the letter-spacing keeps them legible.
       ========================================================== */

    @media (max-width: 900px) {
      /* ---- Touch targets ---- */

      .cz-footer__col a,
      .cz-footer__meta a,
      .cz-footer__rights a,
      .cz-footer__social a,
      .cz-footer__contact-row a,
      .cz-footer__lines a,
      .cz-toc__list a {
        min-height: 44px;
        display: flex;
        align-items: center;
      }

      .cz-footer__social a { justify-content: center; padding-inline: 18px; }

      /* A 44px target has two axes. The rule above gives every one of these
         links its height and stops; .cz-footer__social a and .cz-chip in this
         same block then buy their width with padding-inline, and the short
         nav labels never did — so "FAQs" shipped 27.9 x 44 and "Home"
         33.2 x 44, passing a height-only audit and failing a thumb.
         min-width rather than padding-inline because these sit in a
         flex-wrap row with its own 22px gap: padding would widen the gaps
         unevenly, min-width grows the box symmetrically around the label.
         Not applied to .cz-footer__col a — those are 239.5px already, and
         centring them would restyle the whole footer column. */
      .cz-footer__meta a { min-width: 44px; justify-content: center; }

      .cz-chip {
        min-height: 44px;
        padding-inline: 18px;
        display: inline-flex;
        align-items: center;
      }

      .cz-textlink,
      .cz-footer__more,
      .cz-verdict__go,
      .cz-alt__go,
      .cz-table__go {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
      }

      .cz-rail__close { width: 44px; height: 44px; }

      .cz-table tbody tr td { padding-block: 16px; }

      .cz-btn { min-height: 48px; }

      /* 18 Oct 2026, his report: *"in mobile version of whole website, the consultzone
         logo in header is stretching vertically so much."* He is right and it was every
         page, because the header is. Measured at 375: 170x26 against a 319x39 file, so the
         mark was rendering at ratio 6.538 where the file is 8.179 — a 25% vertical squash,
         and 5.3% from 621 to 900. The 26px is the designed height for this 68px bar; the
         WIDTH was the thing never released, so that is what gives way. */
      .brand img { height: 26px; width: auto; }
      .brand { display: inline-flex; align-items: center; min-height: 44px; }

      /* ---- Legibility ---- */

      .cz-stage__num,
      .cz-route__num { font-size: 13px; }

      .cz-footer__line,
      .cz-footer__tz,
      .cz-form__note,
      .cz-zonehub__caveat,
      .cz-practical__caveat,
      .cz-journey__note,
      .cz-zones__note,
      .cz-balance__note { font-size: 13px; }

      .cz-activities__foot p,
      .cz-footer__rights,
      .cz-footer__meta a,
      /* "You will hear back from a consultant, not a queue." — a sentence,
         so it takes the 13px body floor, not the 12px label floor. */
      .cz-footer__promise span,
      .cz-quote figcaption span { font-size: 13px; }

      /* Nothing in body copy drops below 13px on a phone. */
      .cz-lead { font-size: 15.5px; line-height: 1.68; }
      .cz-route__specs dd,
      .cz-support__item p,
      .cz-authority p,
      .cz-stage p,
      .cz-vertical__lead { font-size: 14.5px; }

      /* ---- Density ---- */

      .cz-footer__band-inner { gap: 32px; }
      .cz-footer__main { gap: 36px; }
      .cz-footer__nav { gap: 28px 20px; }

      /* Stop the floating buttons sitting on footer content. */
      .cz-footer__legal-inner { padding-bottom: 64px; }
    }

    /* ---- Small phones ---- */
    @media (max-width: 420px) {
      .cz-h1 { font-size: clamp(28px, 7vw, 34px); }
      .cz-h2 { font-size: clamp(24px, 6.4vw, 30px); }
      .cz-statement { font-size: clamp(26px, 7.4vw, 34px); }

      .cz-btn { width: 100%; justify-content: center; }
      .cz-form__foot .cz-btn { width: 100%; }

      .cz-chips { gap: 6px; }
      .cz-chip { font-size: 12.5px; padding-inline: 15px; }

      .cz-footer__social { gap: 6px; }
      .cz-footer__social a { flex: 1 1 calc(50% - 3px); }

      /* Tables scroll rather than crush. Nudge the reader. */
      .cz-table__wrap { position: relative; }
      .cz-table__wrap::after {
        content: "Scroll for more";
        position: sticky;
        left: 0;
        display: block;
        padding: 10px 16px;
        font-size: 12px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--cz-faint);
        border-top: 1px solid var(--cz-line-dk);
      }
    }

    /* ---- Touch devices: no hover-only affordances ---- */
    @media (hover: none) {
      .cz-table__go { opacity: 1; transform: none; }
      /* Matches the corrected resting value above — .34 here would have put the
         1.87:1 numeral straight back on any touch device with sticky hover. */
      .cz-route:hover .cz-route__num { color: rgba(199, 163, 107, .72); }
      .cz-alt:hover,
      .cz-quote:hover,
      .cz-vertical:hover { transform: none; box-shadow: none; }
      .float-link span { display: none; }

      /* The credential marquee. R16 says "Marquees pause on hover so they can
         be read" — the pause is the mechanism, being readable is the rule. On
         touch there is no hover, so the ONLY pause in the theme
         (.cz-credentials:hover, above) can never fire, and the authority rail
         scrolled continuously past the reader with 389px of its 732px outside
         the 343px frame at any instant. prefers-reduced-motion was handled;
         touch was not.

         So on touch the rail stops being an animation and becomes what a
         phone reader can actually operate: a horizontally scrollable region
         they control at their own pace. That is R7's "hover-only affordances
         neutralised under (hover: none)" applied to the one affordance the
         (hover: none) block had missed, and it is the pattern R42 already
         endorses for wide content. The markup carries tabindex/role/aria so
         it is reachable by keyboard too; the focus ring is with the other
         scrollers. Desktop is untouched — the marquee still runs and still
         pauses on hover. */
        /* REVERSED ON HIS INSTRUCTION, 8 October 2026: *"The freezone images under
         hero, In desktop view, it's already aoto scrolling, but not in mobile."*

         The three rules that used to sit here stopped `czMarquee` on touch and turned
         this rail into a manual scroller, for the reasoning written above — the
         hover-pause cannot fire on a phone, so the rail moved past a reader who had no
         way to stop it. That was a preference of ours and it was a sound one; he has
         asked for the desktop behaviour, so it gives way and the reasoning stays on the
         record rather than being deleted (R82.2, §27).

         WHAT IS KEPT IS THE PART OF R16 THAT IS A REQUIREMENT RATHER THAN A TASTE: the
         separate `prefers-reduced-motion: reduce` rule still sets
         `.cz-credentials__marquee { animation: none }`, so a reader who has asked for
         less motion still gets a still rail. Only the touch-specific stop is gone. */
    }

    /* ==========================================================
       TOUCH TARGET FLOOR — R7, 44px
       ==========================================================
       These three components are STANDALONE CONTROLS (a tel: link that is the
       whole content of a <dd>, a nav item, a route card) rendering as bare
       `display:inline` anchors 20px tall. Measured 2 Sep at 375/414/768 with
       touch emulation on:

         .cz-contactpanel__list dd > a   126.5x20, 122.4x20, 180.6x20, 147.1x20
                                          — both phone lines, WhatsApp and email
                                          on /contact/, the page whose entire
                                          job is being contacted. 4 per page.
         .cz-lateral__link                103.9x20, 75.6x20, 65.7x20, 68.6x20
                                          — the About section nav, 4 per page.
         .cz-choicecard                   6 per page at 20px tall on
                                          /mainland-company/ and
                                          /offshore-company/.

       WHY THERE IS NOTHING TO OVERRIDE: `.cz-contactpanel*`, `.cz-lateral*` and
       `.cz-choicecard*` appear in page-kind-contact.php, page-kind-company.php
       and page-kind-choice.php and have ZERO rules in ANY stylesheet in this
       theme — grepped across all 13. This is §12.8's "markup with no stylesheet"
       still live, and it is a bigger finding than the tap targets: these are
       whole components shipping unstyled. This block is the R7 floor ONLY. It
       does not design them, and whoever writes their real rules should take
       these three declarations with them.

       Gated on (pointer: coarse) so desktop rendering is byte-identical — the
       44px floor binds on touch, which is exactly how 19-MOBILE-A11Y-AUDIT
       measured it (1024 and 1440 emulated as mouse pointers).
       No !important (R11). */
    @media (pointer: coarse) {
      .cz-contactpanel__list dd > a,
      .cz-lateral__link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
      }
      .cz-choicecard {
        display: block;
        min-height: 44px;
        padding-block: 12px;
      }
    }

    /* ==========================================================
       FIXED CONTACT BUTTONS — keep keyboard focus clear of them
       ==========================================================
       footer.php prints .contact-float (WhatsApp and call) fixed to the
       bottom-right corner, z-index 44, on every view. Its markup and its
       rules are the footer's and are not touched here (R66); this is the
       content side of the same edge, and it moves nothing on screen.

       Measured 18 Sep 2026 by focusing every control in <main> in DOM order
       from the top, which scrolls each newly focused control to the bottom
       edge of the viewport exactly as Tab does, then intersecting it with
       the two buttons:
         375x812    /contact/ 6 of 45 controls came to rest under them
                    (4-19% of the control covered); /ifza/ 4 of 42 (7-17%),
                    and with the contents disclosure open 29 of 74 (15-20%):
                    every contents entry Tab reached stopped under the
                    WhatsApp button. /insights/ 11 of 46 (4-41%, a topic
                    chip the worst);
                    /what-actually-goes-wrong-in-a-uae-company-formation/
                    3 of 39, one of them the rail's primary "Talk to a
                    consultant" button (11%); /vat-corporate-tax/ 2 of 19.
         768x1024   /contact/ 9 of 45 (1-4%); /ifza/ 4 of 42 (2-6%).
         1024x768   /ifza/ 6 of 73 (0-7%).
       None was covered entirely and each could be scrolled clear by hand,
       so this fails WCAG 2.4.12 (AAA) rather than 2.4.11 (AA) — still a
       control, a primary button among them, sliding under a fixed button
       at the moment it takes focus.

       Scroll padding on the root is what the browser honours when it
       scrolls a focused element into view (WCAG technique C43), so the fix
       is one declaration per footprint. The values are the buttons' own
       geometry (main.css:293-294 and :682-683) plus clearance — if the
       float's size or offset changes, change these with it:
         above 680px   bottom 24 + 54 + 10 + 54 = 142px  -> 156px
         680px down    bottom 10 + 47           =  57px  ->  72px
       toc.js scrolls to explicit coordinates, so contents jumps are
       unaffected; only focus and scrollIntoView() alignment read this.
       After, the same runs: 0 covered everywhere above except one — on
       /insights/ at 375 a 204px-tall card that is already wholly on screen
       when it takes focus is not scrolled at all (focus scrolls only what is
       not already inside the viewport), so its corner stays 2% under the
       buttons. Layout is untouched: an element-by-element fingerprint of
       seven routes (/, /contact/, /ifza/, a 404, /insights/, that insight,
       /vat-corporate-tax/) at 375 and 1440 is identical before and after. */
    html { scroll-padding-bottom: 156px; }

    @media (max-width: 680px) {
      html { scroll-padding-bottom: 72px; }
    }

    /* ==========================================================
       MOBILE LEGIBILITY FLOOR
       Audit found text down to 8.2px on a phone. Nothing on a
       touch screen drops below 12px, including the hero's inline
       notes — desktop sizing is untouched.
       ========================================================== */
    @media (max-width: 900px) {
      .hero-note span,
      .hero-note,
      .cz-credentials__label,
      .cz-stage__meta,
      .cz-fact span,
      .cz-eyebrow,
      .eyebrow,
      .cz-footer__label,
      .cz-vertical__kicker,
      .cz-verdict__short,
      .cz-alt__short,
      .cz-zone__short,
      .cz-route__tag,
      .cz-toc__label,
      .cz-badge,
      .cz-practical__list dt,
      .cz-rail__specs dt,
      .cz-route__specs dt,
      .cz-service-meta,
      .cz-postcard__meta,
      .cz-article-meta { font-size: 12px; letter-spacing: .12em; }

      /* .cz-footer__rights, .cz-footer__meta a, .cz-form__note and
         .cz-footer__tz were in this list and have been removed from it.
         An earlier @media (max-width: 900px) block above sets all four to
         13px under the comment "Nothing in body copy drops below 13px on a
         phone." Same condition, same specificity, and this block is printed
         later — so this rule silently reversed that decision and 12.5px is
         what shipped. .cz-form__note is two sentences of prose a reader has
         to read before submitting a form; at 12.5px it was under R7's 13px
         body-copy floor.

         .cz-footer__promise span was left here on a first pass and re-measuring
         caught it: it renders "You will hear back from a consultant, not a
         queue." — a sentence, not meta — so it moved to the 13px list above.
         What remains is a free-zone partner NAME per <li>, which is a label and
         is governed by the 12px floor, not the 13px one. */
      .cz-footer__partners li { font-size: 12.5px; }

      /* Screen-reader-only text is exempt — it is never rendered. */
      .cz-sr { font-size: inherit; }
    }

    @media (max-width: 900px) {
      /* Hero eyebrow was 9px — below the legibility floor. */
      .hero .eyebrow { font-size: 12px; letter-spacing: .15em; }
      /* Contact links in the footer band need a real touch height. */
      .cz-footer__lines a,
      .cz-fact a { min-height: 44px; display: flex; align-items: center; }
      .cz-search input { min-height: 46px; }
    }

    /* ==========================================================
       IMAGERY LAYER
       Real logos in the credential rail, sector imagery on the
       formation routes, and photography on the group verticals.
       Every asset is local. Nothing is decorative filler.
       ========================================================== */

    /* ---- Credential rail: typographic, not logos ----
       The ten files in assets/img/zone-logos/ are 400x340 landscape PHOTOGRAPHS
       of buildings, not logos. Rendered into a 46px chip they were grey smudges,
       which is the 'logos or images not visible properly / not rendered properly
       to inside' the client reported.

       Enlarging them was not the fix. R18 requires an authority's trademark to
       be reproduced exactly from that authority's own brand assets, and we hold
       none of them — a photo of DIFC's towers is not a small version of DIFC's
       mark, it is a different thing. So the rail is set in type instead, which
       is honest, legible, and reads as a decision rather than a broken asset.

       If official brand assets are ever supplied: put an <img> back inside
       .cz-credentials__mark and give it a white chip. The layout already fits it. */
    .cz-credentials {
      background: var(--cz-ink-2);
      border-block: 1px solid var(--cz-line-dk);
      overflow: hidden;
      /* Was 26px. The band held a 46px chip plus a 12px caption plus an 8px gap,
         so 26px top and bottom left it visibly taller than its contents needed.
         A single line of type needs far less, and the band now reads as a rule
         between two sections rather than a section of its own. */
      padding-block: clamp(16px, 1.6vw, 22px);
    }
    .cz-credentials__list {
      display: flex;
      width: max-content;
      gap: 0;
      align-items: center;
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .cz-credentials__item {
      flex: none;
      display: flex;
      align-items: center;
      padding-inline: clamp(18px, 2vw, 34px);
    }
    /* A hairline between marks rather than a gap. It gives the rail a measured
       cadence — the thing the client called 'not properly structured' was that
       ten chips floating on a dark ground had no rhythm at all. */
    .cz-credentials__item + .cz-credentials__item {
      border-inline-start: 1px solid var(--cz-line-dk);
    }
    .cz-credentials__mark {
      font-size: clamp(15px, 1.25vw, 19px);
      font-weight: 800;
      letter-spacing: .07em;
      text-transform: uppercase;
      /* --cz-faint measures 4.68:1 on --cz-ink-2, above the 4.5:1 AA floor.
         Not an opacity: the previous rail dimmed to .38 and only reached a
         legible value on hover, which a phone never fires. */
      color: var(--cz-faint);
      white-space: nowrap;
      transition: color .3s var(--cz-ease);
    }
    .cz-credentials__item:hover .cz-credentials__mark { color: var(--cz-gold); }

    /* ---- Formation routes: sector imagery ---- */
    /* overflow:hidden used to sit on the panel, to clip the bleeding image. It
       clipped the last 23px of the specification list as well. The image is what
       needs clipping, so the clip belongs on the image. */
    .cz-route { background: var(--cz-ink); transition: background .4s var(--cz-ease); padding: clamp(28px, 2.8vw, 44px); position: relative; }
    .cz-route__media {
      position: absolute;
      overflow: hidden;
      inset: 0 0 0 auto;
      width: 42%;
      z-index: 0;
      pointer-events: none;
      /* Fade the image into the panel so the type stays readable. */
      mask-image: linear-gradient(90deg, transparent, #000 55%);
      -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
    }
    .cz-route__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Was 17% and half-desaturated, which reduced four deliberately chosen
         photographs to a grey smudge. The mask gradient is what protects the
         type, so the image itself can be shown in full colour and actually read
         as a photograph. */
      opacity: .42;
      transform: scale(1.04);
      transition: opacity .7s var(--cz-ease), transform 1.1s var(--cz-ease-out);
    }
    .cz-route:hover .cz-route__media img { opacity: .58; transform: scale(1); }
    .cz-route__head,
    .cz-route__lead,
    .cz-route__specs { position: relative; z-index: 1; }

    /* ---- Group verticals: real photography ---- */
    .cz-vertical { position: relative; overflow: hidden; border: 1px solid var(--cz-line); background: #fff; transition: transform .45s var(--cz-ease), box-shadow .45s var(--cz-ease), border-color .45s var(--cz-ease); display: grid; grid-template-rows: auto 1fr; padding: 0; }

    /* Tax & Financial Advisory — inverted, because it is a summary that hands
       traffic to finvisors.ae rather than a second full pitch. */
    .cz-vertical--tax {
      background: var(--cz-ink);
      border-color: rgba(255, 255, 255, .14);
    }
    .cz-vertical--tax .cz-vertical__body h3 { color: #fff; }
    .cz-vertical--tax .cz-vertical__lead,
    .cz-vertical--tax .cz-vertical__list li { color: var(--cz-lt); }
    .cz-vertical--tax .cz-vertical__list li { border-color: rgba(255, 255, 255, .12); }
    .cz-vertical--tax .cz-vertical__media::after {
      background: linear-gradient(180deg, rgba(5, 6, 7, .18) 0%, rgba(5, 6, 7, .88) 100%);
    }
    .cz-vertical--tax:hover { border-color: rgba(199, 163, 107, .55); }

    /* Real Estate & Property Investment — the fuller, lighter panel. This is the
       capability's only presence anywhere, so it carries the weight. */
    .cz-vertical--property { background: var(--cz-paper); }

    @media (max-width: 1000px) {
      .cz-verticals__grid { grid-template-columns: 1fr; }
    }

    /* THE TWO PANELS MUST MEET ON ONE LINE, SO THE HEIGHT IS SET, NOT DERIVED.
       Measured before this change at 1600px: the media panels were 364px and
       425px tall — 61px apart — and every element below inherited that offset,
       so the two eyebrows, the two headlines and the two body blocks each sat
       61px out of line with their opposite number. The cards themselves were
       already identical at 984px; only the image inside them disagreed.

       The cause was `aspect-ratio` on a two-column grid whose columns are
       deliberately UNEQUAL — 648px and 830px. A ratio applied to different
       widths produces different heights by definition, so the panels could
       never align while the height was derived from the width. A previous pass
       tried to compensate by giving the wider panel a shallower ratio
       (16 / 8.2); that lands correctly at exactly one viewport width and drifts
       at every other, which is why it still measured 61px out.

       Setting the height directly is the same lesson as B58: fix the axis you
       actually care about and let the other follow. Here the axis that matters
       is height parity across the pair, so both panels get one height and the
       images crop to it. The asymmetry that was intended — unequal column
       WIDTHS — is untouched and still reads. */
    .cz-vertical__media {
      position: relative;
      block-size: clamp(240px, 23vw, 380px);
      overflow: hidden;
      background: var(--cz-ink-3);
    }
    .cz-vertical__media img {
      /* Pinned rather than sized. height:100% on an inline-level image left a
         2-4px sliver outside the box once aspect-ratio rounded to a fraction. */
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transform: scale(1.03);
      transition: transform 1.1s var(--cz-ease-out);
    }
    .cz-vertical:hover .cz-vertical__media img { transform: scale(1.09); }
    .cz-vertical__media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(5, 6, 7, .1) 0%, rgba(5, 6, 7, .55) 100%);
    }
    .cz-vertical__badge {
      position: absolute;
      left: 20px;
      bottom: 18px;
      z-index: 1;
      padding: 8px 16px;
      background: rgba(5, 6, 7, .78);
      backdrop-filter: blur(8px);
      border: 1px solid rgba(199, 163, 107, .4);
      border-radius: 100px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--cz-gold);
    }

    /* Journey stages are defined once, above. An override block here used to
       re-declare .cz-stage__media as an absolutely-positioned 13%-opacity
       wash, which fought the card layout and collapsed the image to 87px.
       Deleted rather than out-specified. */

    /* ---- Positioning: a cinematic full-bleed break ---- */
    .cz-parallax {
      position: relative;
      height: clamp(280px, 34vw, 520px);
      overflow: hidden;
      background: var(--cz-ink);
    }
    .cz-parallax img {
      position: absolute;
      inset: -12% 0 0;
      width: 100%;
      height: 124%;
      object-fit: cover;
      will-change: transform;
    }
    .cz-parallax::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(180deg, rgba(5, 6, 7, .78) 0%, rgba(5, 6, 7, .35) 45%, rgba(5, 6, 7, .82) 100%);
    }
    .cz-parallax__caption {
      position: absolute;
      inset: auto 0 0 0;
      z-index: 2;
      padding-bottom: clamp(26px, 3vw, 48px);
    }
    .cz-parallax__caption p {
      margin: 0;
      max-width: 30ch;
      font-size: clamp(18px, 1.2vw + 14px, 27px);
      font-weight: 600;
      line-height: 1.32;
      letter-spacing: -.022em;
      color: #fff;
      text-wrap: balance;
    }
    .cz-parallax__caption span {
      display: block;
      margin-top: 12px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: var(--cz-gold);
    }

    @media (max-width: 860px) {
      .cz-route__media { width: 100%; mask-image: linear-gradient(180deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); }
      .cz-credentials__list img { height: 34px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cz-parallax img { transform: none !important; }
    }

    /* ==========================================================
       HOMEPAGE CONSULTATION POPUP
       Split panel — imagery left, form right. Appears on every
       homepage load after a short delay. Fully keyboard operable,
       focus-trapped, and dismissible four ways.
       ========================================================== */

    .cz-popup {
      position: fixed;
      inset: 0;
      z-index: 200;
      display: grid;
      place-items: center;
      padding: clamp(16px, 3vw, 40px);
      visibility: hidden;
      pointer-events: none;
    }
    .cz-popup.is-open { visibility: visible; pointer-events: auto; }

    .cz-popup__scrim {
      position: absolute;
      inset: 0;
      background: rgba(3, 4, 5, .72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      opacity: 0;
      transition: opacity .5s var(--cz-ease);
    }
    .cz-popup.is-open .cz-popup__scrim { opacity: 1; }

    .cz-popup__panel {
      grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
      width: min(1000px, 100%);
      max-height: min(88vh, 780px);
      transform: translateY(22px) scale(.985);
      transition: opacity .6s var(--cz-ease-out), transform .6s var(--cz-ease-out);
    }
    .cz-popup.is-open .cz-popup__panel { opacity: 1; transform: none; }

    /* ---- Close ---- */
    /* 44px, not 40px. R7's touch floor. 67 rules elsewhere on the site set an
       explicit 44px minimum; these two popup controls were never brought into
       that pattern, and they are the only two tap targets under the floor on
       the whole front page. The glyph stays 17px — the target grew, not the
       icon.

       The transition names its three properties — the three the :hover rule
       below changes — and is no longer `all`, 18 Sep 2026. `all` included
       `visibility`, which this button inherits from .cz-popup: on close the
       root flips to hidden at once, but this one element eased towards it,
       so after every close the round button stayed visibility: visible for
       the length of the transition — drawn over the page with its panel
       already gone, and focusable (measured: el.focus() landed on
       #czPopupClose after the popup had closed, on every run). Hover looks
       exactly as before. `all` also covered the outline colour and offset
       the focus ring sets (button:focus-visible, below); those now change
       at once. popup.js now also sets `inert` while closed. */
    .cz-popup__close {
      position: absolute;
      top: 14px;
      right: 14px;
      z-index: 3;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      border: 1px solid var(--cz-line-dk);
      border-radius: 50%;
      background: rgba(5, 6, 7, .7);
      backdrop-filter: blur(6px);
      color: #fff;
      transition: border-color .25s var(--cz-ease), color .25s var(--cz-ease), transform .25s var(--cz-ease);
    }
    .cz-popup__close svg { width: 17px; height: 17px; }
    .cz-popup__close:hover { border-color: var(--cz-gold); color: var(--cz-gold); transform: rotate(90deg); }

    /* ---- Imagery side ---- */
    .cz-popup__aside img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transform: scale(1.04);
    }
    .cz-popup__aside::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(5, 6, 7, .35) 0%, rgba(5, 6, 7, .9) 100%);
    }
    .cz-popup__aside-copy {
      position: absolute;
      inset: auto 0 0 0;
      z-index: 1;
      padding: clamp(20px, 2.2vw, 32px);
    }
    .cz-popup__kicker {
      display: block;
      margin-bottom: 12px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .17em;
      text-transform: uppercase;
      color: var(--cz-gold);
    }
    .cz-popup__aside-copy p {
      margin: 0;
      font-size: clamp(15px, .7vw + 13px, 19px);
      font-weight: 600;
      line-height: 1.4;
      letter-spacing: -.018em;
      color: #fff;
      text-wrap: balance;
    }

    /* ---- Form side ---- */
    .cz-popup__title {
      margin: 0 0 14px;
      font-size: clamp(21px, 1.3vw + 16px, 30px);
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -.026em;
      color: #fff;
      text-wrap: balance;
    }
    .cz-popup__title em { font-style: normal; color: var(--cz-gold); }

    .cz-popup__lead {
      margin: 0 0 18px;
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--cz-lt);
    }


    .cz-popup__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 14px;
    }
    .cz-popup__submit { width: 100%; justify-content: center; margin-top: 18px; }

    .cz-popup__note {
      margin: 14px 0 0;
      font-size: 12px;
      line-height: 1.55;
      color: var(--cz-faint);
      text-align: center;
    }

    /* Honeypot — hidden from people, reachable by bots. */
    .cz-hp {
      position: absolute;
      /* Off-screen rather than merely clipped. A clipped 1x1 box still reports
         its real width to layout, and the input inside it pushed 13px past a
         375px viewport. Must stay in the DOM and focusable — bots fill it. */
      left: -9999px;
      top: auto;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }

    /* ---- Responsive ---- */
    @media (max-width: 860px) {
      .cz-popup__panel { grid-template-columns: 1fr; max-height: 92vh; }
      .cz-popup__aside { display: none; }
    }
    @media (max-width: 520px) {
      .cz-popup { padding: 0; align-items: end; }
      .cz-popup__panel {
        width: 100%;
        max-height: 94vh;
        border-left: 0;
        border-right: 0;
        border-bottom: 0;
        transform: translateY(100%);
      }
      .cz-popup.is-open .cz-popup__panel { transform: none; }
      .cz-popup__grid { grid-template-columns: 1fr; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cz-popup__panel,
      .cz-popup__scrim { transition: none; }
    }

    /* ==========================================================
       POPUP — overflow fix
       The panel is a grid; its children default to min-height:auto,
       so the body could not shrink and its content was clipped by
       the panel's overflow:hidden. The submit button was cut off.

       THAT FIX ADDRESSED THE GRID CHILD AND NOT THE GRID ROW, and the
       submit button was still cut off. min-height:0 lets the ITEM shrink;
       it does nothing about the TRACK the item sits in. With no
       grid-template-rows the panel gets one implicit `auto` row, and an
       auto row sizes to max-content regardless of the container's
       max-height. The row therefore measured 943.75px inside a 763.28px
       panel at 375x812 — 182px clipped by overflow:hidden — and because
       the row handed .cz-popup__body its full content height, the body's
       own overflow-y:auto never had anything to scroll: scrollHeight and
       clientHeight were both 944, so bodyCanScroll was 0.

       Measured consequence: the submit button sat at viewport y 810-859
       against a 812px viewport — 2px of a 49px control visible, its label
       entirely hidden — and the "I'm just browsing" dismiss at y 926, off
       the bottom of the screen. R15 fires this popup on every homepage
       load, so every mobile visitor met a form they could not submit.

       NOT a mobile-only bug: at 1600x900 the same row measured 826px in a
       780px panel, clipping 48px.

       minmax(0, 1fr) makes the single row a flexible track that resolves
       against the panel's own bounded height, so the row can never exceed
       the max-height. The body then genuinely overflows and its
       overflow-y:auto engages. One declaration, both breakpoints, and it
       is the same class of defect as the min-height:0 above it — a grid
       item cannot rescue a track that was never constrained.
       ========================================================== */
    .cz-popup__panel { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); background: var(--cz-ink); border: 1px solid var(--cz-line-dk); box-shadow: 0 40px 120px rgba(0, 0, 0, .6); overflow: hidden; opacity: 0; align-items: stretch; }
    .cz-popup__aside { position: relative; overflow: hidden; background: var(--cz-ink-3); min-height: 0; }
    /* Keep the scrollbar from fighting the dark panel. */
    .cz-popup__body { padding: clamp(24px, 2.6vw, 44px); min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: clamp(28px, 3vw, 48px); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
    .cz-popup__body::-webkit-scrollbar { width: 8px; }
    .cz-popup__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 4px; }
    .cz-popup__body::-webkit-scrollbar-track { background: transparent; }

    /* Shorter viewports: let the whole panel scroll instead. */
    @media (max-height: 760px) {
      .cz-popup__panel { max-height: 92vh; }
      .cz-popup__lead { margin-bottom: 14px; }
    }

    /* ==========================================================
       FORM RENDERING FIXES
       1. The dismiss button was inheriting a default background,
          rendering as a white slab under the note.
       2. The live-region status paragraph reserved vertical space
          even when empty, leaving a gap.
       ========================================================== */

    .cz-popup__dismiss,
    .cz-form button:not(.cz-btn) {
      background: transparent;
      border: 0;
      appearance: none;
      -webkit-appearance: none;
      box-shadow: none;
    }

    /* min-height 44px — R7's touch floor. Content height was 19.4px of text
       inside 10px/10px padding, giving a 39.4px target. The padding is left
       alone so the label does not move; the box grows to the floor. */
    .cz-popup__dismiss {
      display: block;
      width: 100%;
      min-height: 44px;
      margin-top: 16px;
      padding: 10px;
      font-size: 12.5px;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color .25s var(--cz-ease);
      color: var(--cz-faint);
      font-family: inherit;
      cursor: pointer;
    }
    .cz-popup__dismiss:hover { color: var(--cz-lt); }

    /* An empty status region should occupy nothing. */
    .cz-form__status:empty {
      display: none;
      margin: 0;
      padding: 0;
    }
    .cz-form__status {
      margin: 14px 0 0;
      font-size: 13px;
      line-height: 1.5;
      text-align: center;
    }
    .cz-form__status.is-success { color: #4ade80; }
    .cz-form__status.is-error { color: #f87171; }

    /* Field-level validation messages. */
    .cz-field__error {
      margin-top: 6px;
      font-size: 12px;
      color: #f87171;
    }
    .cz-field.has-error input,
    .cz-field.has-error select,
    .cz-field.has-error textarea { border-color: #f87171; }

    /* ============================================================
       ACCESSIBILITY LAYER
       Placed last so it is the final word on focus and skip
       affordances. Every rule here closes a measured WCAG failure,
       with the measurement in the comment. No new !important.
       ============================================================ */

    /* ---- Skip link ----
       There were no .cz-skip styles anywhere, so "Skip to content"
       rendered as loose body text above the header on every page.
       Off-canvas until focused, then it lands clear of the fixed
       header rather than underneath it. */
    .cz-skip {
      position: fixed;
      top: 10px;
      left: 10px;
      z-index: 300;
      display: inline-flex;
      align-items: center;
      min-height: 44px;
      padding: 0 22px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .04em;
      color: #fff;
      background: var(--cz-blue, #1769ff);
      border-radius: 2px;
      box-shadow: 0 12px 34px rgba(5, 6, 7, .3);
      transform: translateY(calc(-100% - 20px));
      transition: transform .18s var(--cz-ease, ease);
    }
    .cz-skip:focus,
    .cz-skip:focus-visible { transform: translateY(0); }

    /* main is the skip target. It has to be focusable for the jump to
       move focus at all, and must not draw a ring once it has it. */
    main[tabindex="-1"]:focus { outline: none; }

    /* ---- Focus indicator ----
       Was `2px solid var(--gold-2)`. #e1c799 measures 1.64:1 against
       white and 1.50:1 against #f3f5f7 — far under the 3:1 WCAG 2.4.11
       and 1.4.11 require, and invisible in practice on every light
       section. The brand blue clears 3:1 on all four grounds this site
       uses: #ffffff 4.67 · #f3f5f7 4.27 · #050607 4.35 · #0a0c10 4.19. */
    a:focus-visible,
    button:focus-visible,
    summary:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible,
    [contenteditable="true"]:focus-visible,
    .button:focus-visible,
    .cz-btn:focus-visible,
    .cz-chip:focus-visible {
      outline: 3px solid var(--cz-blue, #1769ff);
      outline-offset: 3px;
    }

    /* Three rules earlier in this file set `outline: none` on :focus,
       which also suppresses :focus-visible. Restored explicitly. */
    .cz-search input:focus-visible,
    .cz-field input:focus-visible,
    .cz-field select:focus-visible,
    .cz-field textarea:focus-visible,
    .field input:focus-visible,
    .field select:focus-visible,
    .field textarea:focus-visible {
      outline: 3px solid var(--cz-blue, #1769ff);
      outline-offset: 3px;
    }

    /* ---- Hover-only affordances ----
       The register's row arrow was opacity:0 until :hover, so a keyboard
       user never saw which row they were on. */
    .cz-table tbody tr:focus-within { background: rgba(199, 163, 107, .1); }
    .cz-table tbody tr:focus-within .cz-table__go,
    .cz-table tbody tr:focus-within .cz-table__open { opacity: 1; transform: none; }

    /* The row-open control. A bare <button> inherits a white browser
       default, so it is styled here in full. */
    .cz-table__open {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      padding: 0;
      color: var(--cz-gold, #c7a36b);
      background: transparent;
      border: 1px solid transparent;
      border-radius: 50%;
      font-size: 15px;
      line-height: 1;
      transition: border-color .25s var(--cz-ease, ease), color .25s var(--cz-ease, ease);
    }
    .cz-table tbody tr:hover .cz-table__open,
    .cz-table__open:hover { border-color: rgba(199, 163, 107, .42); }
    .cz-table__go:has(.cz-table__open) { opacity: 1; transform: none; }

    /* ---- Current contents item ----
       The active entry was marked by a gold rule alone (#c7a36b is
       2.36:1 on white). Weight carries it too, so colour is not the
       only means of conveying which section you are in. */
    .cz-toc__item a.is-current,
    .cz-toc__list a.is-current { font-weight: 700; }

    /* ---- Scrollable regions ----
       A region that scrolls must be reachable by keyboard (WCAG 2.1.1),
       and once reachable it needs a visible ring. */
    .cz-table__wrap[tabindex="0"]:focus-visible,
    .cz-zones__wrap[tabindex="0"]:focus-visible,
    .cz-journey__rail[tabindex="0"]:focus-visible,
    .cz-credentials__track[tabindex="0"]:focus-visible,
    .cz-scroller[tabindex="0"]:focus-visible {
      outline: 3px solid var(--cz-blue, #1769ff);
      outline-offset: -3px;
    }

    @media (max-width: 900px) {
      .cz-table__open { width: 44px; height: 44px; }
    }

    /* ============================================================
       SECTIONS REBUILT BUT NEVER STYLED

       The zones, support and footer markup was rewritten and the
       stylesheet was not, so thirty-seven classes rendered with no
       rules at all. Everything below closes that gap.

       .cz-zones sits on paper-2 (light); .cz-support sits on ink
       (dark) — the two blocks are not interchangeable.
       ============================================================ */

    /* ---- Zones: the places rail ---- */
    .cz-zones__places {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
      gap: clamp(12px, 1.2vw, 20px);
      margin: 0 0 clamp(26px, 2.6vw, 40px);
      padding: 0;
      list-style: none;
    }
    .cz-place {
      display: flex;
      flex-direction: column;
      background: #fff;
      border: 1px solid var(--cz-line);
      overflow: hidden;
      transition: transform .4s var(--cz-ease), border-color .4s var(--cz-ease), box-shadow .4s var(--cz-ease);
    }
    .cz-place:hover {
      transform: translateY(-4px);
      border-color: rgba(199, 163, 107, .5);
      box-shadow: 0 16px 38px rgba(5, 6, 7, .09);
    }
    /* The emirate rail is the widest crop on the homepage: a 362x116 window,
       3.12:1, against sources that are 1.33-2.31:1. Between 43% and 74% of each
       photograph's height survives, and until this declaration the anchor was
       the browser default — main.css declared object-position zero times, and
       figures.css (which carries the 34% anchor) is deliberately not enqueued
       on the front page (B35), so the homepage sat outside the crop system
       entirely.

       38% is NOT figures.css's 34%. 08 §5.9 is explicit that 34% "is not a
       house style… it is an empirical correction for one recurring subject:
       seated people, photographed at 3:2, cropped wide", and that applying it
       to a skyline "has no argument behind it". These four are wide
       establishing shots of places, where the identifying content — roofline,
       horizon, dome — sits above centre and the lower third is foreground.
       Each was opened and measured before this value was chosen (R3.3):

       Measured in the browser after the change (band = the slice of the
       original frame that survives, as a percentage of its height):

         file                    kept   centred band   at 38%
         dubai-frame            53.9%   23.0-76.9%   17.5-71.4%   more gold lintel
         abu-dhabi-architecture 44.8%   27.6-72.4%   21.0-65.7%   more dome, less dark floor
         sharjah-skyline        42.7%   28.7-71.4%   21.8-64.5%   more skyline, less lawn
         ras-al-khaimah-skyline 74.1%   13.0-87.0%    9.8-83.9%   more sky, less water

       Every band moves up by 5-7 points, which is the whole of the change.
       State the limit rather than the intention: Sharjah's tallest towers
       begin about 17% down and the band still starts at 21.8%, so their tips
       remain outside it. 38% is a compromise across four frames, not a fix for
       one — pushing to 30% would clear those tips and start cutting the base
       off the dome that is the same picture's foreground subject. The dome and
       the bulk of the skyline are both inside the band at 38%; only the tips
       are lost, which is ordinary for a 3.12:1 letterbox. */
    .cz-place__img {
      display: block;
      width: 100%;
      height: clamp(84px, 8vw, 116px);
      object-fit: cover;
      object-position: center 38%;
      background: var(--cz-paper-3);
    }
    .cz-place__name {
      margin: 0;
      padding: 13px 14px 0;
      font-size: 14.5px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -.014em;
      color: var(--cz-text);
    }
    .cz-place__count {
      margin: 4px 0 0;
      padding: 0 14px 14px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--cz-gold);
    }

    /* ---- Zones: the matrix, and its card fallback ---- */
    .cz-zones__matrix { display: block; }
    .cz-zones__caption {
      caption-side: top;
      padding: 14px 16px;
      text-align: left;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--cz-gold-emph);
      background: #fff;
      border-bottom: 1px solid var(--cz-line);
    }
    .cz-zones__hint {
      display: none;
      margin: 10px 0 0;
      font-size: 12px;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--cz-mid);
    }

    /* A twelve-column matrix is unreadable on a phone. Below 900px it is
       replaced by one card per zone carrying the same figures. */
    .cz-zones__cards {
      display: none;
      margin: 0;
      padding: 0;
      list-style: none;
      gap: 14px;
    }
    .cz-zonecard {
      background: #fff;
      border: 1px solid var(--cz-line);
      border-left: 3px solid var(--cz-gold);
      padding: 18px;
    }
    .cz-zonecard__head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      padding-bottom: 12px;
      margin-bottom: 12px;
      border-bottom: 1px solid var(--cz-line);
    }
    .cz-zonecard__name {
      margin: 0;
      font-size: 16.5px;
      font-weight: 700;
      letter-spacing: -.018em;
      color: var(--cz-text);
    }
    .cz-zonecard__place {
      margin: 0;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--cz-gold-emph);
    }
    .cz-zonecard__specs {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 8px 16px;
      margin: 0;
      font-size: 13.5px;
    }
    .cz-zonecard__specs dt { color: var(--cz-mid); }
    .cz-zonecard__specs dd { margin: 0; text-align: right; font-weight: 700; color: var(--cz-text); }

    /* ---- Support: the photo plate ----
       .cz-support sits on ink, so everything here is light-on-dark. */
    .cz-support__lead {
      margin: 14px 0 0;
      max-width: 68ch;
      font-size: clamp(15px, .45vw + 13.6px, 17px);
      line-height: 1.68;
      color: var(--cz-lt);
      text-wrap: pretty;
    }

    .cz-support__plate {
      margin: 0 0 clamp(28px, 3vw, 46px);
    }
    .cz-support__shots {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
      gap: clamp(12px, 1.2vw, 18px);
      align-items: stretch;
    }
    .cz-support__shot {
      display: block;
      width: 100%;
      object-fit: cover;
      border: 1px solid var(--cz-line-dk);
      background: var(--cz-ink-3);
    }
    .cz-support__shot--wide { height: clamp(200px, 22vw, 320px); }
    .cz-support__shot--tall { height: clamp(200px, 22vw, 320px); }

    /* The wide plate is lobby-key-handover-dusk.jpg, 1672x941, rendered
       861x320 — 2.691:1, so 66.1% of the frame's height survives and 33.9%
       is thrown away. It replaced consult-standing-team.jpg on 6 September
       2026 (§S, the repeated-cast substitution): the value below moved with
       the photograph, because 34% was derived FOR that frame — four people
       at distance, faces about a third down — and a hand-fitted anchor is
       only correct for the picture it was fitted to. Carrying it over to a
       new subject is how a crop that was once measured becomes a crop that
       merely persists.

       Note the box itself was re-measured, not inherited: the previous note
       here said 920x320 / 2.875:1 / 61.8%. The element is 861x320 at a
       1500px viewport, which is 2.691:1 and keeps 4.3 points MORE of the
       frame. An anchor fitted against the wrong box is fitted against
       nothing, so the geometry was read from getBoundingClientRect() before
       the anchor was chosen.

       This frame is a two-person exchange much closer to camera, so its
       landmarks sit lower and the anchor moves UP the frame, not down:

         landmark                       position   inside the band at 22%?
         top of the client's headdress     9.0%     yes, by 1.5 points
         both faces                   11.7-27.6%    yes
         the key, mid-exchange        45.0-50.0%    yes
         CONSULTZONE folio wordmark   62.7-65.4%    yes
         bottom edge of the folio         74.4%     no — cut by 0.9 points

       Band at 22% = 7.5%-73.5%, confirmed twice: once from the live element
       in the browser, and once by re-cutting the source with GD at exactly
       861x320 and looking at the result. The folio's lower edge is outside
       the band deliberately — the wordmark is the subject, not the object it
       is printed on, and a wordmark cut mid-letter is the one failure this
       whole comment exists to prevent.

       The tall plate is deliberately left at the browser default. Since
       10 September 2026 it is archive-binders-shelf.jpg, 1920x1440 into 575x320,
       so about 74% of the height survives and the subject — ribbon-tied file
       bundles filling the frame edge to edge — reads at any central band.
       (It was documents-stacked-desk.jpg, moved because a frozen activity guide
       shows it too — R50, R58.)
       08 §5.9 warns against applying the anchor to "a document close-up"; it
       would move this crop off its own subject for no reason. One value per
       subject, not one value per stylesheet. */
    .cz-support__shot--wide { object-position: center 22%; }
    .cz-support__caption {
      margin-top: 12px;
      font-size: 12.5px;
      line-height: 1.5;
      color: var(--cz-faint);
    }

    /* ---- Support: the capability band ---- */
    .cz-support__register { margin: 0; }

    .cz-band {
      border-top: 1px solid var(--cz-line-dk);
      padding-top: clamp(20px, 2.2vw, 32px);
    }
    .cz-band__label {
      display: flex;
      align-items: center;
      gap: 11px;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: var(--cz-gold);
    }
    .cz-band__label::before {
      content: "";
      width: 26px;
      height: 1px;
      background: currentColor;
      opacity: .7;
      flex: none;
    }
    .cz-band__note {
      margin: 10px 0 clamp(18px, 2vw, 28px);
      max-width: 70ch;
      font-size: 13.5px;
      line-height: 1.66;
      color: var(--cz-lt);
    }
    .cz-band__tag {
      display: inline-block;
      margin-left: 10px;
      padding: 3px 10px;
      border: 1px solid rgba(199, 163, 107, .45);
      border-radius: 100px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: none;
      color: var(--cz-gold);
    }

    .cz-band__rows {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
      gap: 1px;
      margin: 0;
      padding: 0;
      list-style: none;
      background: var(--cz-line-dk);
      border: 1px solid var(--cz-line-dk);
    }

    .cz-cap {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      gap: 4px 16px;
      padding: clamp(16px, 1.7vw, 24px);
      background: var(--cz-ink-2);
      transition: background .35s var(--cz-ease);
    }
    .cz-cap:hover { background: var(--cz-ink-3); }
    .cz-cap__n {
      grid-row: 1 / span 2;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .12em;
      color: var(--cz-gold);
      padding-top: 3px;
    }
    .cz-cap__name {
      margin: 0;
      font-size: 15.5px;
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: -.015em;
      color: #fff;
    }
    .cz-cap__desc {
      margin: 0;
      font-size: 13.5px;
      line-height: 1.62;
      color: var(--cz-lt);
    }
    .cz-cap__ref {
      grid-column: 2;
      margin-top: 8px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--cz-faint);
    }

    /* ---- Footer blocks ---- */
    .cz-footer__identity { display: grid; gap: 14px; }
    .cz-footer__office,
    .cz-footer__direct {
      display: grid;
      gap: 7px;
      font-size: 13.5px;
      line-height: 1.6;
      color: var(--cz-lt);
    }
    .cz-footer__office strong,
    .cz-footer__direct strong {
      display: block;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--cz-gold);
    }
    /* `.cz-footer__direct a { color: var(--cz-lt) }` and its :hover partner used
       to sit here and have been deleted rather than out-specified.

       The colour declaration was doing nothing it was meant to do and two
       things it was not. .cz-footer__direct already carries color:
       var(--cz-lt) above and `a { color: inherit }` at the top of this file
       carries it to every link inside, so the descendant rule was redundant
       for plain text. What it actually did, at (0,1,1), was beat two explicit
       declarations of #fff that both sit earlier in the file: .cz-btn--primary
       (0,1,0), which put the "Book a consultation" label at rgba(255,255,255,
       .72) — compositing to #bed5ff on the blue for 3.14:1 against a 4.5:1
       requirement at 13.5px/700 — and .cz-footer__lines a (0,1,1), whose #fff
       and gold hover were being silently reversed by source order.

       Deleting restores both: the CTA is #fff on #1769ff at 4.67:1, and the
       call/WhatsApp/email links get the #fff and the gold hover .cz-footer__
       lines already declares for them. Nothing new competes in the cascade —
       this pass removes a competitor rather than adding one. */

    /* ---- Responsive ---- */
    @media (max-width: 900px) {
      .cz-zones__matrix { display: none; }
      .cz-zones__cards { display: grid; }
      .cz-zones__hint { display: block; }
      .cz-support__shots { grid-template-columns: 1fr; }
      .cz-support__shot--tall { height: clamp(170px, 40vw, 240px); }
    }

    @media (max-width: 620px) {
      .cz-zones__places { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
      .cz-cap { grid-template-columns: 1fr; gap: 6px; }
      .cz-cap__n { grid-row: auto; }
      .cz-cap__ref { grid-column: 1; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cz-place:hover { transform: none; box-shadow: none; }
    }

    /* The closing prompt under the capability band. */
    .cz-support__ask {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 14px 24px;
      margin-top: clamp(20px, 2.2vw, 32px);
      padding-top: clamp(18px, 2vw, 26px);
      border-top: 1px solid var(--cz-line-dk);
    }
    .cz-support__ask-text {
      margin: 0;
      font-size: clamp(15px, .45vw + 13.6px, 17px);
      font-weight: 600;
      color: #fff;
    }

    @media (max-width: 620px) {
      .cz-support__ask { flex-direction: column; align-items: flex-start; }
    }

    /* The burger sat at 42px — two short of the 44px floor this project set for
       every touch target, and it is the single most-tapped control on a phone. */
    @media (max-width: 1000px) {
      .menu-toggle,
      .burger,
      button.menu-toggle { min-width: 44px; min-height: 44px; }
    }

    /* ==========================================================
       REGULATED & SPECIALIST
       Added 1 Sep. This content used to be route 04 inside the formation
       routes section, under a heading reading "Four structures". It is not a
       fourth structure — a regulated regime sits ON TOP of a structure — so it
       now has its own section where the actual distinction can be shown.

       R1: no other section on this page opens on a diagram. Routes is a sticky
       index over stacked panels, zones is a matrix, journey is a scroll-snap
       rail, approvals is a dark authority grid, verticals is two asymmetric
       panels. This is a two-track sequence, and the divergence between the
       tracks IS the argument.
       ========================================================== */

    .cz-reg {
      background: var(--cz-ink);
      color: #fff;
      padding-block: clamp(72px, 8vw, 132px);
      overflow: hidden;
    }

    /* A single column with a deliberately narrow head. The diagram is the wide
       element; letting the prose run the full 1720px would make the section
       read as a slab and bury the thing worth looking at. */
    /* B316 — 62ch IN A 1513px CONTAINER LEFT 876px OF NOTHING.
       His report: *"in homepage's section named 'Regulated & specialist' there is a lot of empty
       space on right. The text should be in less lines to avoid emoty space."* Measured at 1600:
       the head was 637px wide beside 876px of dead container.

       Fixed the way `.cz-approvals__head` two sections below already does it — heading left, lead
       right, on one baseline. That fills the width AND puts the lead in fewer lines, which is the
       second half of what he asked for: the same paragraph at 637px set six lines and at ~700px in
       column two sets four. The cap moves off the head and onto the heading itself, so the h2 keeps
       a measure rather than running the full 1513px. */
    /* HIS TWO REPORTS ON THIS HEAD, 29 Sep — *"allignment of left text and right
       text?"* and *"empty space above 'REGULATED AND SPECIALIST'"*. Both were mine,
       from the version above, and neither was what the comment above claims.

       ALIGNMENT. `align-items: end` bottom-aligns a grid row, and the lead spanned
       BOTH rows, so the two columns shared a bottom edge and their first lines did
       not. Measured at 1860: heading top 4134, lead top 4108 — the lead's first line
       started 26px ABOVE the heading's, which puts it between the eyebrow and the
       heading and reads as a mistake. It happens because the lead is TALLER than the
       heading here (128px against 101px); `.cz-approvals__head` gets away with the
       same `align-items: end` only because its lead is shorter (57px against 131px),
       so bottom-aligning parks a short paragraph beside the heading's last line.
       **Copying a rule is not copying its behaviour — that depends on the content.**

       THE EMPTY SPACE. `gap` sets BOTH axes. The column gap is the point here; the
       55.8px ROW gap it also set pushed the heading 88px below its own eyebrow, so a
       12px gold mark sat alone in the dark above a heading it belongs to. The
       eyebrow-to-heading distance is the h2's own `margin-top`, which is why that
       14px is stated here rather than left to be overridden. `column-gap` only.
       Not the section join: measured at 1860, every body join on this page is 115px
       and this one is 117px, so the padding above `.cz-reg` is not the anomaly and
       R48's tuned joins are left alone (R82.4). */
    .cz-reg__head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: clamp(24px, 3vw, 64px);
      align-items: start;
    }
    .cz-reg__head .cz-eyebrow,
    .cz-reg__head .cz-h2 { grid-column: 1; }
    .cz-reg__head .cz-h2 { max-width: 22ch; margin-top: 14px; }
    .cz-reg__lead { grid-column: 2; grid-row: 2; }
    /* (0,2,0), and it has to be: a LATER top-level `.cz-reg__lead` sets `margin-top: 22px`,
       so the `margin: 0` this rule used to carry never applied and neither would a bare 14px.
       Matching the h2's 14px is what puts the two columns' first lines on one line. */
    .cz-reg__head .cz-reg__lead { margin-top: 14px; }

    .cz-reg .cz-eyebrow { color: var(--cz-gold); }

    .cz-reg .cz-h2 {
      color: #fff;
      margin-top: 14px;
    }
    .cz-reg .cz-h2 em {
      font-style: normal;
      color: var(--cz-gold);
    }

    .cz-reg__lead {
      margin-top: 22px;
      font-size: clamp(16.5px, .5vw + 15px, 19px);
      line-height: 1.68;
      /* rgba(255,255,255,.72) measures 11.5:1 on --cz-ink. Comfortably above
         the AA floor, and it is a real value rather than an opacity on the
         element, so it cannot dim anything nested inside it. */
      color: rgba(255, 255, 255, .72);
    }

    /* ---- the diagram ---- */
    .cz-reg__figure {
      margin: clamp(18px, 1.5vw, 24px) 0 0;   /* B327: 72 -> 44; B328: -> 24, the rest of that gap is INSIDE the svg */
      /* Below 900px the two tracks stop being comparable at a glance, so the
         figure becomes a scroller at its natural width rather than shrinking
         the labels under the 12px floor R7 sets. The hairline tells the reader
         it scrolls instead of letting them assume it is cropped. */
      overflow-x: auto;
      overscroll-behavior-x: contain;
    }
    .cz-reg__svg {
      display: block;
      width: 100%;
      min-width: 720px;
      height: auto;
      overflow: visible;
    }

    .cz-reg__track-label {
      fill: rgba(255, 255, 255, .5);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .16em;
    }
    .cz-reg__track-label--hot { fill: var(--cz-gold); }

    .cz-reg__step {
      fill: rgba(255, 255, 255, .05);
      stroke: rgba(255, 255, 255, .16);
      stroke-width: 1;
    }
    /* The terminal step is solid so a reader can find the end of a sequence
       without reading it. */
    .cz-reg__step--end { fill: #fff; stroke: #fff; }

    .cz-reg__step-t {
      fill: #fff;
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -.01em;
    }
    .cz-reg__step-t--end { fill: var(--cz-ink); }
    .cz-reg__step-s {
      fill: rgba(255, 255, 255, .54);
      font-size: 13px;
      font-weight: 500;
    }

    /* The gate is drawn as the odd one out on purpose: it is the only element
       on either track that is not a plain step, because it is the only one that
       can send you backwards. Gold is emphasis (R17) — never an action here. */
    .cz-reg__gate {
      fill: rgba(201, 162, 39, .12);
      stroke: var(--cz-gold);
      stroke-width: 1.5;
    }
    .cz-reg__gate-t {
      fill: var(--cz-gold);
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -.01em;
    }
    .cz-reg__gate-s {
      fill: rgba(201, 162, 39, .78);
      font-size: 13px;
      font-weight: 600;
    }

    .cz-reg__arrow { stroke: rgba(255, 255, 255, .3); stroke-width: 1.5; }
    .cz-reg__head-mk { fill: rgba(255, 255, 255, .45); }

    /* The return arc. Dashed because it is the path you hope not to take. */
    .cz-reg__loop {
      fill: none;
      stroke: var(--cz-gold);
      stroke-width: 1.5;
      stroke-dasharray: 4 4;
      opacity: .75;
    }
    .cz-reg__loop-mk { fill: var(--cz-gold); opacity: .75; }
    .cz-reg__loop-t {
      fill: var(--cz-gold);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .04em;
      opacity: .85;
    }

    .cz-reg__note {
      margin-top: 26px;
      max-width: 70ch;
      font-size: 15px;
      line-height: 1.7;
      color: rgba(255, 255, 255, .6);
      padding-inline-start: 16px;
      border-inline-start: 2px solid var(--cz-gold);
    }

    /* ---- the three regimes ---- */
    .cz-reg__regimes {
      list-style: none;
      margin: clamp(34px, 3.1vw, 48px) 0 0;   /* B327: 78 -> 48 at 1860 */
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
      gap: 1px;
      background: rgba(255, 255, 255, .12);
      border: 1px solid rgba(255, 255, 255, .12);
    }
    /* A hairline grid rather than three floating cards: the regimes are peers
       and a shared rule says that more economically than three boxes with gaps
       between them. */
    .cz-reg__regime {
      background: var(--cz-ink);
      padding: clamp(24px, 2.2vw, 34px);
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .cz-reg__regime-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
    .cz-reg__code {
      font-size: clamp(20px, 1.6vw, 26px);
      font-weight: 800;
      letter-spacing: -.02em;
      color: var(--cz-gold);
    }
    .cz-reg__regime-name {
      font-size: 13px;
      font-weight: 600;
      line-height: 1.4;
      color: rgba(255, 255, 255, .58);
      margin: 0;
    }
    .cz-reg__regime-body {
      font-size: 15px;
      line-height: 1.65;
      color: rgba(255, 255, 255, .78);
      margin: 0;
    }
    .cz-reg__regime-meta { margin: auto 0 0; display: grid; gap: 12px; }
    .cz-reg__regime-meta dt {
      font-size: 12px; /* R7 floor. Was 11px. */
      font-weight: 800;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--cz-gold);
      margin-bottom: 3px;
    }
    .cz-reg__regime-meta dd {
      margin: 0;
      font-size: 14px;
      line-height: 1.55;
      color: rgba(255, 255, 255, .72);
    }
    /* Was .44, compositing to #737474 on the section's #050607 for 4.31:1 at
       14px/400 — a regulator's abbreviation is content, and at weight 400 it
       has the thinnest stems on this band, so it clears 4.5:1 with the least
       margin of anything here. .48 is the same floor .cz-reg__idx and
       .cz-reg__place take on this ground: #7d7e7e, 4.98:1. It stays plainly
       subordinate to the .72 dd it qualifies. */
    .cz-reg__abbr { color: rgba(255, 255, 255, .48); }

    /* ---- close ---- */
    .cz-reg__foot {
      margin-top: clamp(28px, 2.6vw, 40px);   /* B327: 62 -> 40 at 1860 */
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: clamp(24px, 3vw, 56px);
      flex-wrap: wrap;
    }
    .cz-reg__foot-t {
      flex: 1 1 460px;
      max-width: 76ch;
      font-size: 15.5px;
      line-height: 1.68;
      color: rgba(255, 255, 255, .68);
      margin: 0;
    }
    .cz-reg__foot .cz-btn { flex: none; }

    /* Bounded at both ends where a desktop band is intended; this one is
       genuinely phone-and-tablet-only and has no upper band to protect. */
    @media (max-width: 760px) {
      .cz-reg__foot { flex-direction: column; align-items: stretch; }
      .cz-reg__foot .cz-btn { width: 100%; justify-content: center; }
    }

    /* ==========================================================
       EXTERNAL APPROVALS — rebuilt 1 Sep
       Was twelve identical cards in one flat grid, reported as "boring and
       lame and generic". The defect was structural: twelve of anything in a
       uniform grid reads as a list somebody had to include. It is now split by
       whose signature it is — federal binds you everywhere, an emirate
       authority does not follow you — and each body carries a plate.

       THE PLATES NOW CARRY THE REAL MARKS. Eleven of the twelve authorities'
       own logo files are on disk, each pulled unmodified from that authority's
       own domain. The twelfth (DHA) keeps the monogram, because we still hold
       no artwork for it and R18 forbids approximating one.

       THE GROUND IS THE WHOLE PROBLEM, AND IT IS SOLVED WITH A PLATE, NOT A
       FILTER. This section is --cz-ink. Seven of the eleven marks are dark ink
       on transparent and vanish on it; the other four are REVERSED — pure white
       on transparent — and vanish on a white plate instead. There is no single
       ground that carries both. So the ground is chosen per mark, from that
       mark's own ink: .cz-appr__plate--light for the seven, --dark for the four.

       There is deliberately no filter: invert(), brightness(), mix-blend-mode
       screen and multiply would each make one set visible by RECOLOURING a
       registered trademark. R18 is a legal rule, not a stylistic preference.
       The artwork is served exactly as its owner publishes it and the plate is
       the thing that adapts. See template-parts/home/approvals.php.
       ========================================================== */

    .cz-appr-group { margin-top: clamp(44px, 4.5vw, 76px); }

    /* Scope head: label, hairline, note on one baseline. The rule does the
       structural work the old flat grid never had. */
    .cz-appr-group__head {
      display: grid;
      grid-template-columns: auto 1fr;
      align-items: center;
      gap: 0 18px;
      margin-bottom: clamp(22px, 2.2vw, 34px);
    }
    .cz-appr-group__scope {
      margin: 0;
      font-size: clamp(19px, 1.5vw, 25px);
      font-weight: 800;
      letter-spacing: -.02em;
      color: #fff;
    }
    .cz-appr-group__rule {
      height: 1px;
      background: linear-gradient(90deg, var(--cz-gold), rgba(255,255,255,.14) 42%, transparent);
    }
    .cz-appr-group__note {
      grid-column: 1 / -1;
      margin: 8px 0 0;
      max-width: 74ch;
      font-size: 14px;
      line-height: 1.6;
      /* Was rgba(255,255,255,.42) on near-black — 3.4:1, under the AA floor,
         and the "not visible text" the client reported. .66 measures 8.1:1. */
      color: rgba(255, 255, 255, .66);
    }

    /* COLUMN COUNT IS EXPLICIT, AND 3 IS SKIPPED ON PURPOSE.
       This was repeat(auto-fit, minmax(310px, 1fr)), which lands on 3 columns
       across a wide band of desktop widths. The groups hold 4 and 8 items: at
       3 columns that is 3+1 and 3+3+2, leaving three empty cells showing the
       list's hairline background as pale rectangles. That is the "empty spaces"
       complaint, arriving by arithmetic rather than by spacing.

       4 and 8 both divide by 4, by 2 and by 1, so every band below is exact and
       no group can ever orphan a cell. */
    .cz-appr-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr;
      gap: 1px;
      background: rgba(255, 255, 255, .1);
      border: 1px solid rgba(255, 255, 255, .1);
    }

    /* The card is now a stack: plate band across the head, copy beneath. The
       plate was a 58px square in a side column, which is where a wordmark goes
       to die — and ten of the twelve marks are wordmarks. Giving it the full
       column width is the single change that makes them readable. */
    /* HIS INSTRUCTION, 29 Sep: *"ADD BLUE GRDIENT IN THESE SMALL BLACK BOXES TOO."*
       These twelve cards carried a flat `--cz-ink` (rgb 5,6,7) while the section
       around them had already been given the gradient under R87.5 — so each card read
       as a black hole punched through a blue ground, which is the opposite of what
       that ruling was for.
       THE DECLARATION IS COPIED, NOT RE-DERIVED (R87.5: *"three sections reading as
       the same treatment is the point"*) — byte-identical to `.cz-approvals` above
       and to `.cz-consult`. The radial's 38rem extent is wider than a card, so on this
       scale it lands as an even lift rather than a visible hotspot, and every stop is
       lighter and bluer than the 5,6,7 it replaces, which is what makes the card read
       as raised off the section instead of cut into it.
       The three `.cz-appr__plate` grounds below are NOT touched: a plate is the ground
       a MARK is reproduced on, and R18 does not allow a gradient behind somebody's
       logo. */
    /* HIS CORRECTION: *"You added too much blue gradient in these boxes... should have a
       slight of blue gradient, like a little, not too much"*.
       R87.5 says copy the section's gradient rather than re-derive one, and that is why the
       first version was byte-identical to `.cz-approvals`. **The same declaration is not the
       same picture at a different size.** A 135deg ramp across an 1860px section is a slow
       wash; across a ~350px card it is a steep one, and the radial's 38rem extent — wider
       than the card — put the brightest part of it inside every single box. Twelve of them
       side by side read as blue panels rather than as a lift.
       So the treatment is kept and its STRENGTH is cut: the radial's alpha .18 -> .06 and
       moved off the card's own corner, the extent 38rem -> 16rem so it falls off inside the
       box, and the linear's range narrowed to sit just above `--cz-ink` (5,6,7) instead of
       climbing to #0b111b. Same hue, same idea. His word overrides the copy-it-exactly clause
       of R87.5 for the cards — recorded in R87.8.
       THE STRENGTH WAS SOLVED FOR, NOT GUESSED, AND THE FIRST ATTEMPT WENT TOO FAR THE OTHER
       WAY. Measuring the card's lightest stop against the section ground it sits on: the
       original read 1.047, the first reduction 1.006 — which is not "a little", it is
       nothing. Five candidates were computed and the one landing near 1.02 chosen, so the
       card is about 40% of the step it was and still visibly a lift. If this is ever
       retuned, compare against the SECTION's own darkest stop — comparing to `--cz-ink`
       flatters it, because the card does not sit on ink. */
    .cz-appr {
      background:
        radial-gradient(circle at 70% 0%, rgba(23, 105, 255, .07), transparent 18rem),
        linear-gradient(150deg, #090d15 0%, #06080c 72%);
      padding: clamp(20px, 1.9vw, 28px);
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
      align-content: start;
    }

    /* ---- The plate: geometry ----
       GEOMETRY ONLY. No colour lives on this rule. The three ground modifiers
       below each own their background and border outright, so nothing overrides
       anything and there is no cascade to lose — the reason this is split is
       that a --light plate that failed to beat a base background would put a
       white-ink mark on a transparent ground and silently render nothing.

       Fixed block-size, flexible inline-size: every mark sits in an identical
       band down the grid, which is what makes a logo wall read as ordered
       rather than scattered, while each keeps its own aspect ratio inside it.

       No aspect-ratio here. An aspect-ratio paired with a max-height resizes
       the box instead of capping it, and that pairing is on this project's
       record as the origin of the empty-space complaint. A fixed block-size
       cannot do that. */
    .cz-appr__plate {
      inline-size: 100%;
      /* 92px, not 82. Measured: the six lockups that pair an emblem with two
         lines of text (MOHAP, MoET, Dubai Civil Defence) are HEIGHT-limited,
         not width-limited — the falcon sets the height and the wordmark beside
         it shrinks to match, so at 82px they used barely half the width
         available and their text was the smallest on the wall. Height is the
         only lever that helps them; widening does nothing. The wide lockups
         (TDRA, Dubai Municipality) are width-limited and unaffected. */
      block-size: 92px;
      /* FLEX, NOT GRID, AND THIS IS LOAD-BEARING. Written first as
         display:grid + place-items:center, which silently CROPPED four of the
         marks. In a grid the plate's single row is auto-sized, so the logo's
         block-size:100% is circular — the browser resolves it by measuring the
         image at its natural aspect first, sizing the row to THAT, then
         resolving 100% against the blown-out row. Measured: a 566x104 content
         box handed the KHDA mark a 567x297 image box, i.e. an image 2.9x its
         own container, with the excess cut off. object-fit:contain cannot save
         a box that is itself the wrong size.

         A flex container's content height is definite, so block-size:100% on
         the item resolves against 104px and contain does its job. (grid with
         grid-template-rows:minmax(0,1fr) also measures correctly; flex is the
         simpler statement of the same fix.)

         There is deliberately NO overflow:hidden. It is what turned the bug
         above into a silent crop of a registered trademark rather than a
         visible mistake, and the padding already keeps the artwork clear of the
         4px radius. If this ever regresses, it must be seen. */
      display: flex;
      align-items: center;
      justify-content: center;
      /* Real breathing room, so no mark ever touches its own frame. Leaves a
         283x66 logo box in a 321x92 plate at 1600px. */
      padding: 12px 18px;
      border: 1px solid transparent;
      border-radius: 4px;
    }

    /* ---- The plate: ground, chosen from the mark's own ink ----
       Seven marks are dark ink on transparent (TDRA #3f4c61, Dubai Municipality
       #353F56, RTA's #000 wordmark and its knocked-out "RTA", MOHAP and MoET in
       gold, Dubai Civil Defence in gold and green, VARA in black). White is the
       ground every one of them was drawn for. */
    .cz-appr__plate--light {
      background: #fff;
      border-color: rgba(255, 255, 255, .16);
    }

    /* Four are REVERSED — pure white on transparent (CBUAE, DLD, Dubai Customs,
       and the KHDA variant KHDA itself serves over its own dark header). On the
       white plate above they would render as an empty box. A lifted graphite
       keeps them at full strength while staying legibly a plate against the
       card's near-black; the hairline is a touch stronger than the white plate's
       to hold the edge at that lower contrast. */
    .cz-appr__plate--dark {
      background: #12161c;
      border-color: rgba(255, 255, 255, .22);
    }

    /* The one authority whose artwork we do not hold. Set type on the same
       geometry, so the grid keeps its cadence and the gap is visibly a decision
       rather than a missing file. */
    .cz-appr__plate--set {
      background: rgba(201, 162, 39, .07);
      border-color: rgba(201, 162, 39, .34);
    }

    /* contain, never cover: a cropped trademark is a modified trademark. The
       intrinsic width/height attributes on the <img> reserve this box before
       the file decodes, so nothing reflows on load. */
    .cz-appr__logo {
      display: block;
      inline-size: 100%;
      block-size: 100%;
      /* min-block-size:0 so the flex item can be shorter than its intrinsic
         content height; without it a tall mark would push the plate open. */
      min-inline-size: 0;
      min-block-size: 0;
      object-fit: contain;
      object-position: center;
    }

    .cz-appr__mark {
      font-size: clamp(20px, 1.7vw, 27px);
      font-weight: 800;
      letter-spacing: .04em;
      color: var(--cz-gold);
      text-align: center;
      line-height: 1.1;
      padding-inline: 4px;
      /* CBUAE and MOHAP are five characters; the plate must not clip them. */
      overflow-wrap: anywhere;
    }

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

    .cz-appr__name {
      margin: 0 0 8px;
      font-size: 15.5px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: -.005em;
      color: #fff;
    }
    .cz-appr__governs {
      margin: 0;
      font-size: 14px;
      line-height: 1.6;
      color: rgba(255, 255, 255, .7);
    }

    /* The trigger is the actionable half and is separated so the eye can find
       it without reading the governs line first. */
    .cz-appr__trigger {
      margin: 12px 0 0;
      padding-top: 12px;
      border-top: 1px solid rgba(255, 255, 255, .1);
      font-size: 13.5px;
      line-height: 1.55;
      color: rgba(255, 255, 255, .82);
    }
    .cz-appr__trigger-k {
      display: block;
      margin-bottom: 3px;
      font-size: 12px; /* R7 floor. Was 10.5px. */
      font-weight: 800;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--cz-gold);
    }

    /* ---- Column bands ----
       The card is a single-column stack at every width now, so the old phone
       rule that unstacked it and shrank the plate is gone: it would have fought
       the layout rather than adapting it.

       TABLET, BOUNDED AT BOTH ENDS. Without the upper bound this 2-column rule
       would follow the layout onto desktop and beat the 4-column band by source
       order, halving the wall. */
    @media (min-width: 620px) and (max-width: 1279.98px) {
      .cz-appr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }

    /* DESKTOP. Open at the top on purpose — this is the widest band and there
       is nothing above it to protect. 1280px is where a 4-column card still
       clears ~232px of logo box, which is the width below which the wider
       lockups stop being readable. */
    @media (min-width: 1280px) {
      .cz-appr-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }

    /* The plate is the widest thing in the card, so on a narrow phone it is the
       one element that needs its height trimmed rather than its width. */
    @media (max-width: 480px) {
      .cz-appr { gap: 14px; }
      .cz-appr__plate { block-size: 82px; padding: 11px 14px; }
    }

    /* Regulated follows Routes, and BOTH are --cz-ink. Two dark sections each
       paying full padding-block put up to 264px of unbroken black between the
       last route and the next headline — reported as "why this much empty space
       above regulated and specialist". Nothing was wrong with either section on
       its own; the defect only exists at the join, which is why neither showed
       it in isolation.

       Collapse the doubled padding and mark the transition with a hairline
       instead of with height. Scoped to the adjacent pair (0,2,0) so it beats
       .cz-reg (0,1,0) exactly where intended and nowhere else — .cz-reg keeps
       its full padding if it is ever moved next to a light section. */
    .cz-routes + .cz-reg {
      padding-block-start: clamp(30px, 3.2vw, 54px);
      border-block-start: 1px solid rgba(255, 255, 255, .1);
    }

    /* ---- Credential rail: the artwork restored, at a size that reads ----
       The images came back after being removed. The complaint was never "these
       should not be here" — it was "logos not visible, not properly rendered,
       not properly structured". Removing them answered a question that was not
       asked, which is a mistake this project has on record (B53) and I repeated.

       What was actually wrong: a 400x340 landscape photograph rendered into a
       46px-tall chip. That is ~1.5% of the source area, and at that size a
       building is a grey smudge. The tile below is 176x112 — roughly ten times
       the visible area — with the crop anchored high so the architecture sits
       in frame rather than the sky.

       These are PHOTOGRAPHS of each authority's district, not trademarks, so
       R18's exact-reproduction rule is not engaged. If the authorities' real
       brand assets are ever supplied, drop them in at the same paths. */
    .cz-credentials__item {
      flex-direction: column;
      align-items: center;
      gap: 10px;
      padding-inline: clamp(12px, 1.3vw, 22px);
    }
    .cz-credentials__img {
      inline-size: clamp(132px, 11vw, 176px);
      block-size: clamp(84px, 7vw, 112px);
      object-fit: cover;
      /* R3: crop anchored high, not centred. A building photographed from
         street level has its subject above the midline; a centre crop finds
         pavement. */
      object-position: center 34%;
      display: block;
      border-radius: 4px;
      border: 1px solid rgba(255, 255, 255, .14);
      transition: border-color .3s var(--cz-ease), transform .35s var(--cz-ease);
    }
    /* The one partner with no photograph on disk. Same geometry so the rail
       keeps its cadence; set type rather than a borrowed picture. */
    .cz-credentials__img--set {
      display: grid;
      place-items: center;
      background: rgba(201, 162, 39, .08);
      border-color: rgba(201, 162, 39, .3);
    }
    .cz-credentials__img--set span {
      font-size: clamp(17px, 1.5vw, 23px);
      font-weight: 800;
      letter-spacing: .04em;
      color: var(--cz-gold);
    }
    .cz-credentials__item:hover .cz-credentials__img {
      border-color: rgba(201, 162, 39, .5);
      transform: translateY(-2px);
    }
    /* The name sits under its picture now, so the divider rule between items
       would cut through the tile. Removed; the tiles' own spacing is the
       rhythm. */
    .cz-credentials__item + .cz-credentials__item { border-inline-start: 0; }
    .cz-credentials__mark { font-size: 12.5px; letter-spacing: .13em; }

    /* The band holds a 112px tile plus a name now, so it needs real height
       again — but bounded, and driven by the content rather than guessed. */
    .cz-credentials { padding-block: clamp(20px, 2vw, 30px); }

    /* ---- Regulated: the three regime cards, rebuilt ----
       Reported as boring, lame and generic — and they were: three equal boxes
       with a paragraph and two label pairs is a table wearing card clothing.
       The rebuild gives each one a foreground and a background, a leading fact,
       and a reveal on hover. Every effect below is opacity or transform, so
       nothing reflows and nothing can bounce or spin (R16). */

    .cz-reg__regime {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      transition: transform .4s var(--cz-ease), background-color .4s var(--cz-ease);
    }

    /* The ghosted monogram. Cropped by the card's own edge on purpose — a mark
       that fits inside its box is a logo; one that runs off it is depth. */
    .cz-reg__ghost {
      position: absolute;
      right: -.14em;
      bottom: -.34em;
      z-index: -1;
      font-size: clamp(96px, 9vw, 150px);
      font-weight: 800;
      letter-spacing: -.06em;
      line-height: .78;
      color: rgba(255, 255, 255, .035);
      pointer-events: none;
      user-select: none;
      transition: color .45s var(--cz-ease), transform .55s var(--cz-ease);
    }

    /* The accent draws left-to-right on hover rather than appearing. */
    .cz-reg__accent {
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      block-size: 2px;
      inline-size: 100%;
      background: linear-gradient(90deg, var(--cz-gold), rgba(201, 162, 39, .25));
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .5s var(--cz-ease);
    }

    .cz-reg__regime-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 4px;
    }
    .cz-reg__idx {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .1em;
      /* Was .3, which composites to #505151 on this section's #050607 and
         measured 2.54:1 at 12px/800 — below even the 3:1 non-text bar, so the
         hover to --cz-gold below was the only state in which this could be
         read at all.

         Stated precisely, because it is not the same case as .cz-route__num:
         regulated.php:209 marks this numeral aria-hidden="true", so 1.4.3 can
         be argued to exempt it as incidental. The change is made anyway on the
         client's own complaint — text that is not visible — and on the
         evidence of the design's intent: nothing gets a colour transition to
         gold on hover unless it is meant to be looked at first.

         .48 is not a new number. It is what .cz-reg__place takes on this same
         band at this same size and weight, and it composites to #7d7e7e for
         4.98:1. The numeral stays plainly quieter than the .72 regime copy. */
      color: rgba(255, 255, 255, .48);
      font-variant-numeric: tabular-nums;
      transition: color .4s var(--cz-ease);
    }
    .cz-reg__place {
      /* Was 10.5px. R7 sets a hard 12px floor and this broke it — caught by
         measuring at 375px, not by eye. Tracking reduced slightly so the chip
         does not grow now that the type is larger. */
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .16em;
      text-transform: uppercase;
      /* The size floor above was only half the fix. At .42 this composites to
         #6e6f6f on the section's #050607 for 4.01:1, which the earlier pass
         missed because it only surfaces at 375px where the type is 12px and
         the body threshold applies. .48 gives 4.96:1. */
      color: rgba(255, 255, 255, .48);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: 999px;
      padding: 4px 10px;
    }

    /* Stack the code over the full name: side by side they competed, and the
       full name kept wrapping into the code's line. */
    .cz-reg__regime-head { display: block; }
    .cz-reg__regime-name { margin-top: 2px; }

    /* The differentiator. This is the line a reader actually chooses on, so it
       gets the weight the body copy used to have. */
    .cz-reg__law {
      margin: 14px 0 0;
      font-size: clamp(16px, 1.15vw, 19px);
      font-weight: 700;
      line-height: 1.38;
      letter-spacing: -.015em;
      color: #fff;
      padding-block-end: 14px;
      border-block-end: 1px solid rgba(255, 255, 255, .12);
    }
    .cz-reg__regime-body { margin-top: 14px; }

    /* ---- the reveal ---- */
    .cz-reg__regime:hover,
    .cz-reg__regime:focus-within {
      transform: translateY(-3px);
      background-color: rgba(255, 255, 255, .022);
    }
    .cz-reg__regime:hover .cz-reg__accent,
    .cz-reg__regime:focus-within .cz-reg__accent { transform: scaleX(1); }

    .cz-reg__regime:hover .cz-reg__ghost,
    .cz-reg__regime:focus-within .cz-reg__ghost {
      color: rgba(201, 162, 39, .1);
      transform: translate3d(-6px, -6px, 0);
    }
    .cz-reg__regime:hover .cz-reg__idx,
    .cz-reg__regime:focus-within .cz-reg__idx { color: var(--cz-gold); }

    /* A hover lift on a touch device is a state you can enter and never leave,
       so the resting card carries its own accent there instead. */
    @media (hover: none) {
      .cz-reg__regime:hover { transform: none; }
      .cz-reg__accent { transform: scaleX(1); opacity: .5; }
    }

    @media (prefers-reduced-motion: reduce) {
      .cz-reg__regime,
      .cz-reg__ghost,
      .cz-reg__accent,
      .cz-reg__idx { transition: none; }
      .cz-reg__regime:hover { transform: none; }
      .cz-reg__regime:hover .cz-reg__ghost { transform: none; }
      .cz-reg__accent { transform: scaleX(1); }
    }

/* ==========================================================================
   --cz-paper-3 — DECLARED 15 SEPTEMBER 2026, AND DELIBERATELY NOT ON :root
   ==========================================================================
   Four rules paint a placeholder behind an image with var(--cz-paper-3):
   .cz-masthead__plate img and .cz-fig__pair (article.css), .cz-stage__media
   and .cz-place__img (this file). The token was never declared anywhere, so
   all four resolved to nothing and the background was transparent — a slow
   photograph flashed the page ground instead of a plate. 08 §14.7 recorded it
   with its intended value, one step below --cz-paper-2.

   WHY IT IS SCOPED RATHER THAN ADDED TO :root. Activity guides are a reading
   view, so they load article.css and render .cz-masthead__plate. A :root
   declaration would change a background on all 76 frozen guides, and R50
   bars exactly that. Custom properties inherit, so declaring the token on
   <body> everywhere EXCEPT an activity view leaves those pages with the
   token undeclared — byte-for-byte the rendering they had before this rule.

   The three exclusions match the classes WordPress and cz_body_class() put
   on a guide (cz-activity-guide, single-cz_activity), the guide archive
   (post-type-archive-cz_activity) and the register page template
   (page-template-...template-activities...). Attribute matching is used so a
   core change to the exact class spelling cannot silently widen the scope.
   CORRECTED 5 OCTOBER 2026 - THE REASON ABOVE IS DEAD AND THE RULE IS INERT.
   R50 was lifted on 30 September and the 76 guides it names were deleted the same
   day. Measured on the 200 guides that replaced them: `--cz-paper-3` is UNDECLARED
   on a guide and **0 rules that apply to that page consume it** - there is no
   `.cz-masthead__plate` on a guide at all, because the guide template draws its own
   hero. On /mainland-company/ the token is #e9edf1 and two rules use it.

   So this exclusion is neither harmful nor load-bearing: declaring the token on
   guides would change nothing a reader sees, and removing the chain would change
   nothing either. **Left exactly as it is, deliberately** - §7u §2's rule is to judge
   each freeze guard on its own terms, and "it makes no difference" is not a reason to
   touch 201 pages he has approved (R82.4).

   AND NOTE WHAT THIS SELECTOR SHAPE IS NOT. A `:not([class*="cz_activity"])` chain in
   this codebase serves TWO unrelated purposes, and only reading tells them apart:
   a scope exclusion (this one, and the nine footer-gradient rules of B359), and plain
   SPECIFICITY MATCHING - the 15 in page-kinds.css target `.cz-contactpanel__form` and
   the 10 in editorial.css target `.cz-railform`, neither of which can ever exist on an
   activity view, so their prefixes exist only to reach (0,6,2) against main.css's own
   chain. **Removing those would lower specificity and break the light forms.** Grepping
   for the shape finds all of them; it does not tell you which kind you have.
   ========================================================================== */
body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"]) {
  --cz-paper-3: #e9edf1;
}

/* ========================================================================== 
   SITE FOOTER — CONTACT-LED SYSTEM
   16 September 2026

   The footer now follows the decision order of a real visitor: start a
   conversation, find/contact the office, explore the site, verify authority,
   then reach legal links. Desktop navigation stays fully visible; on narrow
   screens the same semantic groups become native, keyboard-operable details.
   ========================================================================== */

.cz-footer {
  overflow: clip;
  background:
    radial-gradient(circle at 84% 76%, rgba(23, 105, 255, .17), transparent 36rem),
    linear-gradient(135deg, #0a0e15 0%, #080a0e 58%, #0b111b 100%);
  border-top: 0;
}

/* ---- Conversion lead ---- */
.cz-footer__lead {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 28%, rgba(23, 105, 255, .18), transparent 28rem),
    linear-gradient(135deg, #0a0e15 0%, #080a0e 58%, #0b111b 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cz-footer__lead::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .3;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000);
}
.cz-footer__lead-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: clamp(32px, 6vw, 96px);
  padding-block: clamp(36px, 3vw, 46px);
}
.cz-footer__lead-copy { max-width: 760px; }
.cz-footer__lead-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cz-gold-soft); /* 16 Sep 2026: raw gold on this dark band measured 2.36:1 — below the 4.5 floor. The lighter gold keeps R17 (gold = emphasis) and clears it. */
}
.cz-footer__lead-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.cz-footer__lead h2 {
  max-width: 13ch;
  margin: 0;
  font-size: clamp(42px, 5.2vw, 76px);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.055em;
  color: #fff;
  text-wrap: balance;
}
.cz-footer__lead-copy p {
  max-width: 55ch;
  margin: 24px 0 0;
  font-size: clamp(15px, .35vw + 14px, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, .68);
}
.cz-footer__lead-actions {
  display: grid;
  justify-items: stretch;
  gap: 12px;
  min-width: min(100%, 268px);
}
.cz-footer__lead-cta {
  min-height: 54px;
  justify-content: space-between;
  gap: 24px;
}
.cz-footer__lead-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 52px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  transition: border-color .25s var(--cz-ease), background-color .25s var(--cz-ease), color .25s var(--cz-ease);
}
.cz-footer__lead-link:hover,
.cz-footer__lead-link:focus-visible {
  border-color: var(--cz-gold);
  background: rgba(199, 163, 107, .08);
  color: var(--cz-gold);
}

/* ---- Practical contact band ---- */
.cz-footer__band { background: #0a0d12; }
.cz-footer__band-inner {
  grid-template-columns: minmax(220px, .78fr) minmax(240px, .82fr) minmax(360px, 1.4fr);
  gap: clamp(32px, 4.4vw, 72px);
  padding-block: clamp(34px, 3vw, 46px);
  align-items: stretch;
}
.cz-footer__office,
.cz-footer__direct {
  align-content: start;
  gap: 0;
}
.cz-footer__band-title {
  margin-bottom: 22px;
  padding-bottom: 15px;
  border-bottom-color: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .54);
}
.cz-footer__address {
  margin-bottom: 24px;
  font-size: 14px;
  line-height: 1.75;
}
.cz-footer__hours > div { padding: 10px 0; }
.cz-footer__hours dt { color: rgba(255, 255, 255, .62); }
.cz-footer__hours dd { color: rgba(255, 255, 255, .92); }
.cz-footer__tz { margin-top: 16px; color: rgba(255, 255, 255, .48); }
.cz-footer__lines li {
  grid-template-columns: 76px 1fr;
  padding: 12px 0;
  border-bottom-color: rgba(255, 255, 255, .1);
}
.cz-footer__lines .cz-footer__label { color: rgba(255, 255, 255, .48); }
.cz-footer__lines a { color: rgba(255, 255, 255, .92); }
.cz-footer__map {
  min-height: 100%;
  border-color: rgba(255, 255, 255, .16);
  border-radius: 2px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}
.cz-footer__map iframe { height: clamp(280px, 24vw, 350px); }
.cz-footer__directions {
  min-height: 52px;
  padding-inline: 20px;
  background: #06080b;
}

/* ---- Identity and navigation ---- */
.cz-footer__main {
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: clamp(56px, 7vw, 112px);
  padding-block: clamp(48px, 4.4vw, 68px) clamp(22px, 2vw, 30px);
}
.cz-footer__identity { align-content: start; }
.cz-footer__logo {
  height: 29px;
  margin-bottom: 12px;
}
.cz-footer__line {
  margin-bottom: 14px;
  color: rgba(255, 255, 255, .58);
}
.cz-footer__social { margin-top: 8px; }
.cz-footer__social a {
  width: 42px;
  height: 42px;
  min-height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-color: rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .035);
  color: rgba(255, 255, 255, .72);
  transition: transform .25s var(--cz-ease), border-color .25s var(--cz-ease), background-color .25s var(--cz-ease);
}
.cz-footer__social a:hover,
.cz-footer__social a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, .38);
  background: rgba(255, 255, 255, .08);
}
.cz-footer__social img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.cz-footer__nav {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}
.cz-footer__col { min-width: 0; }
.cz-footer__col summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
  list-style: none;
  cursor: default;
  pointer-events: none;
}
.cz-footer__col summary::-webkit-details-marker { display: none; }
.cz-footer__col-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cz-gold-soft); /* same measurement, same fix */
}
.cz-footer__col-toggle { display: none; }
/* Closed details are a mobile state. Their contents remain visible at larger widths. */
.cz-footer__col:not([open]) > :not(summary) { display: block; }
.cz-footer__col ul { margin: 0; padding: 0; list-style: none; }
.cz-footer__col a {
  padding-block: 7px;
  color: rgba(255, 255, 255, .68);
}
.cz-footer__more {
  display: flex;
  margin-top: 12px;
  padding-top: 14px;
  border-top-color: rgba(255, 255, 255, .1);
}

/* ---- Authority and legal close ---- */
.cz-footer__partners {
  padding-block: 26px;
  background: #0a0d12;
}
.cz-footer__partners-inner {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(0, 3.2fr);
  gap: 24px 48px;
}
.cz-footer__partners .cz-footer__label {
  color: var(--cz-gold);
  line-height: 1.5;
}
.cz-footer__partners ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 24px;
}
.cz-footer__partners li {
  position: relative;
  padding-left: 12px;
  white-space: normal;
  line-height: 1.45;
}
.cz-footer__partners li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--cz-gold);
}
.cz-footer__legal {
  padding-block: 0;
  background: transparent;
}
.cz-footer__legal-inner {
  min-height: 64px;
  justify-content: center;
}
.cz-footer__meta,
.cz-footer__rights { gap: 8px 22px; }
.cz-footer__rights { justify-content: center; }
.cz-footer__meta a,
.cz-footer__rights,
.cz-footer__rights a { color: rgba(255, 255, 255, .52); }

@media (max-width: 1120px) {
  .cz-footer__band-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 56px;
  }
  .cz-footer__map {
    grid-column: 1 / -1;
    min-height: 0;
  }
  .cz-footer__map iframe { height: 300px; }
  .cz-footer__main {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .cz-footer__line { max-width: 64ch; }
  .cz-footer__partners ul { grid-template-columns: repeat(3, minmax(150px, 1fr)); }
}

@media (max-width: 760px) {
  .cz-footer__lead-inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 32px;
    padding-block: 34px;
  }
  .cz-footer__lead-actions {
    width: 100%;
    max-width: 420px;
  }
  .cz-footer__lead h2 { font-size: clamp(40px, 13vw, 58px); }
  .cz-footer__lead-copy p { margin-top: 20px; }

  .cz-footer__band-inner {
    grid-template-columns: 1fr;
    gap: 42px;
    padding-block: 38px;
  }
  .cz-footer__office { order: 1; }
  .cz-footer__direct { order: 2; }
  .cz-footer__map {
    order: 3;
    grid-column: auto;
  }
  .cz-footer__map iframe { height: 220px; }

  .cz-footer__main { gap: 36px; padding-block: 44px; }
  .cz-footer__nav { display: block; }
  .cz-footer__col {
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .cz-footer__col:last-child { border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .cz-footer__col summary {
    min-height: 58px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
  }
  .cz-footer__col-title { color: rgba(255, 255, 255, .88); }
  .cz-footer__col-toggle {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    color: var(--cz-gold);
    transition: transform .25s var(--cz-ease), background-color .25s var(--cz-ease);
  }
  .cz-footer__col[open] .cz-footer__col-toggle {
    transform: rotate(45deg);
    background: rgba(199, 163, 107, .1);
  }
  .cz-footer__col:not([open]) > :not(summary) { display: none; }
  .cz-footer__col[open] > :not(summary) { display: block; }
  .cz-footer__col > ul { padding: 0 0 12px; }
  .cz-footer__col a {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-block: 9px;
  }
  .cz-footer__more { margin: 0 0 14px; }

  .cz-footer__partners-inner {
    display: block;
  }
  .cz-footer__partners .cz-footer__label {
    display: block;
    margin-bottom: 18px;
  }
  .cz-footer__partners ul {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    margin-inline: calc(var(--container-pad, 24px) * -1);
    padding: 0 var(--container-pad, 24px) 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }
  .cz-footer__partners li {
    flex: 0 0 auto;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
  .cz-footer__partners li::before { display: none; }

  .cz-footer__legal { padding-block: 0; }
  .cz-footer__legal-inner {
    min-height: 0;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px 0 70px;
    text-align: center;
  }
  .cz-footer__meta,
  .cz-footer__rights { row-gap: 6px; }
}

@media (max-width: 420px) {
  .cz-footer__lead-actions { max-width: none; }
  .cz-footer__lead-link { width: 100%; }
  .cz-footer__lines li { grid-template-columns: 1fr; gap: 4px; }
  .cz-footer__lines .cz-footer__label { grid-row: auto; padding-top: 0; }
  .cz-footer__social a {
    width: 44px;
    height: 44px;
    min-height: 44px;
    flex-basis: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cz-footer__lead-link,
  .cz-footer__col-toggle { transition: none; }
}

/* The consultation section sits immediately before the site footer. Carry the
   footer lead's blue light field through the whole section — heading, facts,
   form and surrounding space — so the close reads as one continuous sequence.

   THE ACTIVITY EXCLUSION WAS REMOVED ON 4 OCTOBER 2026, ON HIS INSTRUCTION.
   Every selector here used to be prefixed
   `body:not([class*="cz_activity"]):not([class*="cz-activity"]):not([class*="template-activities"])`
   so that, in this comment's own earlier words, activity views stayed
   "byte-for-byte outside this styling change". That was R50 freeze language. He
   lifted the freeze on 30 September and the exclusion outlived it, so the 200
   guides and the register served a FLAT enquiry section — measured at
   `rgb(5,6,7)` with `background-image: none` against the homepage's gradient —
   until he reported it: "why is footer different in every page? The homepage is
   the only place where footer is perfect."

   The prefix is now plain `body` and NOT `.cz-consult`, deliberately: `.cz-form`
   below also reaches the margin form and the contact page's own form on the 227
   non-activity pages, and narrowing the scope would have stripped the gradient
   from surfaces he has already approved. One exclusion removed, nothing else
   moved.

   The guide's own side form keeps its flat one-box treatment by specificity, not
   by luck: `activity.css`'s `.cz-guide__form .cz-form` is (0,2,0) against the
   (0,1,1) here, and `cz-activity` loads after `cz-main`. */
body .cz-consult {
  background:
    radial-gradient(circle at 82% 34%, rgba(23, 105, 255, .18), transparent 38rem),
    linear-gradient(135deg, #0a0e15 0%, #080a0e 58%, #0b111b 100%);
}

body .cz-consult__head {
  margin-bottom: clamp(24px, 2.4vw, 36px);
}

body .cz-form {
  background:
    radial-gradient(circle at 82% 18%, rgba(23, 105, 255, .18), transparent 31rem),
    linear-gradient(135deg, #0a0e15 0%, #080a0e 58%, #0b111b 100%);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}

body .cz-form .cz-field input,
body .cz-form .cz-field select,
body .cz-form .cz-field textarea {
  background: rgba(3, 6, 11, .46);
  border-color: rgba(255, 255, 255, .13);
}

body .cz-form .cz-field input:focus,
body .cz-form .cz-field select:focus,
body .cz-form .cz-field textarea:focus {
  background: rgba(3, 6, 11, .64);
}

/* ============================================================================
   VISUALS OFF — 18 September 2026, his instruction.
   Every photograph, plate, infographic, chart, flow and in-text table is
   withheld outside the homepage and /visa-services/ (inc/visuals.php adds the
   `cz-noviz` body class). These rules are the layout consequence: a two-column
   pair whose second column was the picture becomes one column, and the few
   media boxes that still carry a label collapse to a strip rather than holding
   open an empty frame. They live in main.css because it is the one stylesheet
   every view loads, and `body.cz-noviz` (0,2,0) outranks the single-class rules
   in listing.css, article.css and activity.css whatever the load order.
   ========================================================================= */
body.cz-noviz .cz-masthead__inner { grid-template-columns: minmax(0, 1fr); }
body.cz-noviz .cz-index article.cz-lead { grid-template-columns: minmax(0, 1fr); }
body.cz-noviz .cz-actcard__media--flat,
body.cz-noviz .cz-sector__media--flat {
  aspect-ratio: auto;
  min-height: 0;
  padding: 12px 14px;
}
body.cz-noviz .cz-entry__link { padding-top: 14px; }

/* ============================================================================
   REGISTER AND ZONE LIST — 18 September 2026.
   Both were <table>s until he said "everywhere means everywhere". They are now
   lists of rows: one hairline per row, the same reading order, the same filter
   behaviour, and under 900px each cell prints its own label from data-label
   instead of relying on a column head. Styles live here because main.css ships
   on every view and activity.css is withheld.
   ========================================================================= */
.cz-register,
.cz-zonelist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cz-register__row,
.cz-zonelist__row {
  display: grid;
  align-items: baseline;
  gap: 4px 18px;
  padding: 13px 4px;
  border-top: 1px solid var(--cz-line);
  cursor: pointer;
  transition: background-color .25s var(--cz-ease, ease);
}
.cz-register__row { grid-template-columns: 7.5rem minmax(0, 2.1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) 3.5rem; }
.cz-zonelist__row { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr) 5.5rem; }
.cz-register__row:hover,
.cz-zonelist__row:hover { background: var(--cz-paper-2); }
.cz-register__row:focus-visible,
.cz-zonelist__row:focus-visible { outline: 2px solid var(--cz-blue); outline-offset: 2px; }
.cz-register__row.is-hidden,
.cz-zonelist__row.is-hidden { display: none; }
.cz-register__cell,
.cz-zonelist__cell,
.cz-register__name,
.cz-zonelist__name { min-width: 0; font-size: 14.5px; line-height: 1.5; }
.cz-register__code { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .01em; }
.cz-register__name { font-weight: 600; }
.cz-register__sector,
.cz-register__lic,
.cz-register__auth,
.cz-zonelist__cell { color: var(--cz-text); }
.cz-zonelist__name strong { display: block; font-size: 15.5px; }
.cz-zonelist__name span { display: block; font-size: 13px; color: var(--cz-text); }
.cz-register__open,
.cz-zonelist__go a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  min-height: 44px;
  color: var(--cz-blue);
  font-weight: 600;
  font-size: 14px;
}
.cz-register__row--seed,
.cz-zonelist__row--empty { grid-template-columns: minmax(0, 1fr); cursor: default; }

@media (max-width: 900px) {
  .cz-register__row,
  .cz-zonelist__row { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 15px 4px; }
  .cz-register__cell[data-label]::before,
  .cz-zonelist__cell[data-label]::before {
    content: attr(data-label) ": ";
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cz-gold-emph);
  }
  .cz-register__name[data-label]::before { content: none; }
  .cz-zonelist__cell[data-empty] { display: none; }
  .cz-register__open,
  .cz-zonelist__go a { justify-content: flex-start; }
}
/* A row the filter hides: `hidden` must beat the row's own `display: grid`
   (a bare [hidden] rule cannot, at equal specificity). */
.cz-register__row[hidden],
.cz-zonelist__row[hidden] { display: none; }

    /* ============================================================
       THE COUNTRY-CODE PICKER AND THE "OTHER" FIELD
       ============================================================
       His field list, 20 September 2026: a country code selector
       that can be searched, and an intent list whose "Other" opens
       a field. Markup in inc/enquiry-form.php, behaviour in
       assets/js/forms.js, both written here rather than pulled in —
       no plugins, no third-party script.

       This block is the DARK treatment, because that is what the
       controls around it are: .cz-form and the popup both sit on
       --cz-ink-2 with white text (main.css:3718). The margin card
       is light and overrides these in editorial.css under
       .cz-railform, which is (0,2,0) and wins without !important.

       The panel is absolutely positioned so opening it never
       reflows the form — a field that jumps when you touch it is
       the reason people abandon forms on phones. It is hidden with
       [hidden] AND a display rule at higher specificity: B245,
       where a "hidden" element shipped visible because [hidden]
       (0,1,0) lost to a display:grid rule at equal weight. */

    .cz-dial { position:relative; }

    .cz-dial__toggle {
      display:flex; align-items:center; gap:8px; width:100%; min-height:46px;
      padding:12px 14px; background:rgba(255,255,255,.04);
      border:1px solid var(--cz-line-dk); border-radius:2px;
      color:#fff; font:inherit; font-size:14px; text-align:left; cursor:pointer;
      transition:border-color .25s var(--cz-ease), background .25s var(--cz-ease);
    }
    .cz-dial__toggle:hover { background:rgba(255,255,255,.07); }
    .cz-dial__toggle:focus-visible { outline:2px solid var(--cz-blue); outline-offset:2px; }
    .cz-dial__code { font-variant-numeric:tabular-nums; font-weight:700; }
    .cz-dial__country {
      flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
      color:rgba(255,255,255,.62);
    }
    .cz-dial__chevron { flex:0 0 auto; width:16px; height:16px; transition:transform .2s var(--cz-ease); }
    .cz-dial.is-open .cz-dial__chevron { transform:rotate(180deg); }

    .cz-dial__panel {
      position:absolute; z-index:40; inset-inline:0; top:calc(100% + 6px);
      background:var(--cz-ink-2); border:1px solid var(--cz-line-dk); border-radius:3px;
      box-shadow:0 18px 40px -16px rgba(0,0,0,.6);
      overflow:hidden;
    }
    .cz-dial__panel[hidden] { display:none; }

    .cz-dial__searchwrap {
      display:flex; align-items:center; gap:8px; padding:10px 12px;
      border-bottom:1px solid var(--cz-line-dk);
    }
    .cz-dial__searchwrap svg { flex:0 0 auto; width:16px; height:16px; color:rgba(255,255,255,.45); }
    .cz-dial__search {
      flex:1 1 auto; min-width:0; min-height:32px; padding:4px 0;
      background:none; border:0; color:#fff; font:inherit; font-size:14px;
    }
    .cz-dial__search:focus { outline:none; }
    .cz-dial__search::placeholder { color:rgba(255,255,255,.4); }
    .cz-dial__search::-webkit-search-cancel-button { filter:invert(1) opacity(.5); }

    .cz-dial__list {
      max-height:clamp(200px, 38vh, 300px); overflow-y:auto; overscroll-behavior:contain;
      margin:0; padding:6px 0; list-style:none; scrollbar-width:thin;
    }
    .cz-dial__option {
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      min-height:44px; padding:10px 14px; cursor:pointer; font-size:14px;
    }
    .cz-dial__option[hidden] { display:none; }
    .cz-dial__option:hover,
    .cz-dial__option:focus-visible { background:rgba(255,255,255,.07); outline:none; }
    .cz-dial__option[aria-selected="true"] { color:var(--cz-gold); }
    .cz-dial__option-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .cz-dial__option-code { flex:0 0 auto; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.55); }
    .cz-dial__empty { margin:0; padding:14px; font-size:13px; color:rgba(255,255,255,.55); }
    .cz-dial__empty[hidden] { display:none; }

    /* The Other field. Hidden until the list says "Other", and
       animated open only where motion is welcome (R16). */
    .cz-field--other[hidden] { display:none; }
    .cz-field--other.is-shown { animation:cz-other-in .28s var(--cz-ease) both; }
    @keyframes cz-other-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
    @media (prefers-reduced-motion: reduce) {
      .cz-field--other.is-shown { animation:none; }
      .cz-dial__chevron { transition:none; }
    }

/* ============================================================================
   B316 STACK — 29 September 2026. The regulated head, stacked on small screens.

   The desktop rule that gave `.cz-reg__head` two columns sits at roughly line 5850. A
   `@media (max-width:860px)` override was first written beside its siblings at ~3840 and LOST:
   same specificity, 2,000 lines earlier, so the later rule won and 375px still measured two
   159.5px columns. Media queries carry no specificity of their own — only order does.

   So it lives at the end of the file, after everything that could outrank it by position.

   Releasing the TRACK alone is not enough: `.cz-reg__lead` is explicitly placed in column 2 and
   a one-column grid with an item in column 2 simply creates an implicit second column, which is
   exactly the 160px it was handed. The placements are released with the track.
   ============================================================================ */
@media (max-width: 860px) {
  .cz-reg__head {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .cz-reg__head .cz-eyebrow,
  .cz-reg__head .cz-h2,
  .cz-reg__lead {
    grid-column: 1;
    grid-row: auto;
  }
  .cz-reg__head .cz-h2 { max-width: none; }
}

/* ============================================================================
   B317 HOME RHYTHM — 29 September 2026. *"Too much empty space above and below sir. This is
   too much."*

   MEASURED FIRST, AND THERE IS NO VOID: every gap between two homepage sections is 0 or +/-1px.
   What he is seeing is two full section paddings meeting. `--cz-y` resolves to 86.4px at a 1600
   viewport, so each join is 172.8px of white, and `.cz-reg`'s own 128px bottom makes reg -> zones
   214px. Nothing is broken; the rhythm is simply too loose at this width.

   WHY `--cz-y` ITSELF IS NOT TOUCHED: it is declared once at main.css:107 and read by 24 rules
   across six stylesheets — INCLUDING `activity.css`. Changing it would move the activity guides,
   which R50 freezes outright. So the reduction is scoped to `body.home`, which is also the only
   place he has reported it.

   `.cz-consult` is deliberately EXCLUDED. It prints at the foot of all 226 addresses and he has
   ruled twice that the foot of every page must read the same, so shrinking it here alone would
   break the thing he asked for. `.cz-credentials` and `.cz-parallax` are excluded too: 30px and 0
   are already tighter than the target.

   0.6 puts each join at ~104px instead of 172.8px. `.cz-approvals` already sits at 0.66 from
   B316 and he has not objected to it, so the two are deliberately close rather than identical —
   that section carries a gradient edge and reads tighter than a plain one at the same figure.
   ============================================================================ */
/* B328 — HE HAS NOW CALLED THE SAME 115px JOIN "EMPTY" ON THREE SEPARATE SECTIONS:
   above REGULATED & SPECIALIST, above ORDINARY ACTIVITY and above THE ENGAGEMENT.
   Measured, all three are the identical house join — 57.6 + 57.6 — so they were never
   three defects. They are one instruction: **the homepage rhythm is still too loose.**
   Fixing them one at a time would have produced three inconsistent joins and a fourth
   report; .6 -> .42 answers all of them at once and every future one.
   .42 is not a new number: `body.home .cz-routes + .cz-reg` has been at .42 since R48
   tuned that pair, and he has never objected to that join. So the page now uses the
   figure he has already accepted, everywhere. **81px per join, from 115px.**
   `.cz-approvals` joins the group. It sat alone at .66 from an earlier round where he
   asked for that one section to be tightened; leaving it there would make its two joins
   104px against 81px everywhere else, and "no unnecessary empty spaces" is now a
   standing instruction rather than a per-section note.
   `.cz-consult` stays excluded — it prints at the foot of all 226 addresses and he has
   ruled twice that the foot of every page must read the same. */
body.home .cz-positioning,
body.home .cz-routes,
body.home .cz-reg,
body.home .cz-zones,
body.home .cz-journey,
body.home .cz-verticals,
body.home .cz-support,
body.home .cz-voices,
body.home .cz-faq,
body.home .cz-approvals {
  padding-block: calc(var(--cz-y) * .42);
}

/* `.cz-routes + .cz-reg` sets its own top padding upstream; keep that relationship but bring it
   into the same rhythm rather than leaving it at the old clamp. */
body.home .cz-routes + .cz-reg {
  padding-block-start: calc(var(--cz-y) * .42);
}


/* ============================================================================
   B327 — THE ROUTES SECTION NEVER GOT B317'S RHYTHM FIX, AND AN `!important` ID
   RULE IS WHY. 29 September 2026, his third report of the same gap:
   *"HELLO WHY DID YOU STOP? EMPTY SPACES? Also more empty spaces above Regulated
   & Specialist is visible. Cmon"*

   I answered the first two reports with a statistic — "every body join is 115px
   and this one is 117px, so it is not the anomaly" — and that was wrong twice
   over. R53 says never answer a rule of his with a statistic, and the statistic
   itself was measuring the wrong thing: 115 and 117 are INK gaps, and the routes
   section's last card sits ~9px above its own padding edge. The BOX gap here is
   **126px against 115px everywhere else.**

   THE CAUSE. `.cz-routes` is `<section id="services" class="cz-routes section">`,
   and the legacy V9 block carries

       #services.section { padding-block: clamp(64px, 5.6vw, 86px) !important }

   — an ID selector WITH `!important`, which no amount of class specificity can
   beat. So B317's `body.home ... { padding-block: calc(var(--cz-y) * .6) }`
   silently did nothing here: every sibling section went to 57.6px and this one
   stayed at 86px. B317's own note claimed the reduction covered `.cz-routes`. It
   did not, and nobody checked the computed value afterwards.

   That is one of the 267 `!important` declarations 08 §14.2 tracks, and it is the
   first time one has been shown to defeat a later deliberate fix rather than just
   sitting there. **`!important` can only be answered by `!important`** at equal or
   greater specificity, so this rule adds exactly one, scoped to `body.home` and to
   this element, and 08 §14.2's count goes to 268 with the reason recorded.

   AFTER: the join above `.cz-reg` is 57.6 + 40.32 = **98px**, in line with the
   115px house join rather than 11px over it, and the pair rule
   `body.home .cz-routes + .cz-reg { padding-block-start: calc(var(--cz-y) * .42) }`
   is left exactly as R48 tuned it.
   ============================================================================ */
body.home #services.cz-routes {
  padding-block: calc(var(--cz-y) * .42) !important;   /* B328: tracks the group above */
}
/* ============================================================
   THE HOMEPAGE ON A PHONE — 29 SEPTEMBER 2026, HIS REPORT

   > "Now in homepage, desktop view is perfect. But in mobile view, not a
   >  single single is rendered properly. Everything looks big, infographics
   >  not fitting properly, freezone table is not rendering, infographics not
   >  rendering properly. Logos not rendering properly And yea every thing
   >  looks big, and not fitting. Like be creative and render everything
   >  properly as per mobile view. For Homepage. No tables are fitting
   >  properly. No proper structure, no profesional allignment."

   **DESKTOP IS PERFECT — HIS WORDS — SO NOTHING HERE MAY REACH IT.** Every
   rule below is inside a `max-width` band, and the two that have to out-rank
   an existing mobile rule say which one and why. R82.4: the surface he has
   approved wins, and the only thing changing is the surface he has not.

   MEASURED AT A 360px VIEWPORT BEFORE ANY OF IT WAS WRITTEN, with
   `overflow-x: clip` lifted (R65), reveals settled (B268) and motion killed
   (B300):

     page height                          28,489px — about 79 screens
     .cz-reg__svg                         720px wide inside a 328px container,
                                          figure `overflow-x: auto`, so the
                                          right 392px of the drawing is off
                                          screen: BOTH tracks lose their end
     .cz-credentials__img                 132 x 34 on a 400x340 photograph
     .cz-zonecard__specs                  `minmax(0,1fr) auto` with the value
                                          right-aligned, so in a 328px card the
                                          values hyphenate against the gutter
     #cz-approvals                        4,472px · #services 3,278 ·
                                          #cz-support 3,182 · #cz-zones 2,822 ·
                                          #cz-regulated 2,782
     html.scrollWidth                     360 — nothing scrolls the PAGE
                                          sideways, which is why no page-level
                                          check has ever flagged any of this

   The last line is the point. Every one of these defects is INSIDE a
   container that clips or scrolls, so the page measures clean while the
   reader sees a cut-off drawing and a squashed logo (B334's lesson, one layer
   out: measure the relationship, not the box).
   ============================================================ */

/* ---- 1. THE PARTNER LOGOS: 132 x 34 ON A 400 x 340 PHOTOGRAPH.

   `@media (max-width: 860px) { .cz-credentials__list img { height: 34px } }`
   is a survivor of the old chip rail, and it is **(0,1,1) — one class and one
   type — so it out-ranks `.cz-credentials__img`'s `block-size` at (0,1,0)
   whatever the order.** The tile rebuild's own docblock says what that does:
   "a 400x340 landscape photograph rendered into a 46px-tall chip ... at that
   size a building is a grey smudge". It was fixed for desktop and the phone
   kept the smudge — which is exactly the report, *"Logos not rendering
   properly"*, and it is the same complaint that rule was written to answer.

   Answered at (0,2,1), which beats it on specificity rather than on order, so
   it cannot be undone by a later edit somewhere else in this sheet. ---- */

@media (max-width: 860px) {

  .cz-credentials__list img.cz-credentials__img {
    block-size: clamp(74px, 21vw, 104px);
  }
}

/* ---- 2. THE TWO-TRACK DIAGRAM: STACKED, NOT SCALED, NOT SCROLLED.

   Below 760px the drawing is replaced by the list `regulated.php` prints
   beside it. 760 is the width at which the container still clears the
   drawing's 720px natural width — above it the figure fits and nothing
   changes, below it a reader would be swiping inside a figure to find the end
   of a sequence.

   The list is not a fallback. It is the same two sequences with the same
   words, set as two ruled tracks with the gate marked in gold and the return
   named on the gate itself — the one thing the drawing says that a plain list
   would not, and the reason the drawing exists.
   ---- */

.cz-reg__stack { display: none; }

@media (max-width: 760px) {

  .cz-reg__figure { display: none; }

  .cz-reg__stack {
    display: grid;
    gap: clamp(22px, 5vw, 30px);
    margin: clamp(20px, 4vw, 28px) 0 0;
  }

  .cz-reg__strack {
    padding-inline-start: 14px;
    border-inline-start: 2px solid rgba(255, 255, 255, .16);
  }

  /* The gold edge is the gate's own colour, so the regulated track is marked
     as different before a word of it is read — the same job the gold gate
     does in the drawing. */
  .cz-reg__strack--hot { border-inline-start-color: var(--cz-gold); }

  .cz-reg__strack-h {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
  }

  .cz-reg__strack--hot .cz-reg__strack-h { color: var(--cz-gold); }

  .cz-reg__ssteps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
  }

  /* Each step is ONE LINE — the name and its state on a shared baseline
     rather than stacked, because his report is "every thing looks big" and a
     two-line step put the seven of them at 478px where 340 says the same
     thing. The connector between rows is a 1px ::before rather than a border
     or a second box (R87.9). */
  .cz-reg__sstep {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 10px;
    padding: 9px 13px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 3px;
  }

  .cz-reg__sstep + .cz-reg__sstep { margin-top: 14px; }

  .cz-reg__sstep + .cz-reg__sstep::before {
    content: "";
    position: absolute;
    inset-block-start: -15px;
    inset-inline-start: 22px;
    inline-size: 1px;
    block-size: 14px;
    background: rgba(255, 255, 255, .28);
  }

  .cz-reg__sstep-t {
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
  }

  .cz-reg__sstep-s {
    font-size: 12.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .58);
  }

  /* The terminal step is solid, as it is in the drawing, so the end of a
     sequence can be found without reading it. */
  .cz-reg__sstep--end {
    background: #fff;
    border-color: #fff;
  }

  .cz-reg__sstep--end .cz-reg__sstep-t { color: var(--cz-ink); }

  .cz-reg__sstep--gate {
    background: rgba(201, 162, 39, .1);
    border-color: rgba(201, 162, 39, .42);
  }

  .cz-reg__sstep--gate .cz-reg__sstep-t { color: var(--cz-gold); }

  .cz-reg__sstep-loop {
    flex: 1 0 100%;
    margin-top: 7px;
    padding-top: 8px;
    border-top: 1px solid rgba(201, 162, 39, .28);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(201, 162, 39, .9);
  }
}

/* ---- 3. THE FREE ZONE CARDS: A DESKTOP TABLE ROW IN A 328px CARD.

   `.cz-zonecard__specs` is `grid-template-columns: minmax(0, 1fr) auto` with
   `dd { text-align: right }` — a label/value table, and the right thing at
   full width. At 328px the value column takes what the label leaves and then
   right-aligns inside it, so his screenshot shows "Commodities, gold, crypto-
   / adjacent trade" and "Logistics, manufacturing, re- / export" ragged
   against the card's right edge with the label stranded on the left. That is
   *"freezone table is not rendering"* and *"no profesional allignment"* in
   one defect.

   Stacked, left-aligned, and the label is the small one — the shape a
   definition list should have had on a phone all along. ---- */

@media (max-width: 620px) {

  .cz-zonecard__specs {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .cz-zonecard__specs div {
    display: grid;
    gap: 2px;
  }

  .cz-zonecard__specs dt {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cz-mid);
  }

  /* `text-align: left` is the whole fix and it has to beat
     `.cz-zonecard__specs dd` at (0,1,1); this is (0,1,1) as well and later in
     the sheet, inside a band that cannot reach the width he called perfect. */
  .cz-zonecard__specs dd {
    text-align: left;
    font-size: 14px;
    line-height: 1.45;
  }
}

/* ---- 4. THE ROUTE PHOTOGRAPH IS NOT A DEFECT, AND I WROTE A RULE FOR IT
   BEFORE CHECKING — recorded here rather than deleted, because it is the
   fifteenth phantom on this project and the tell was in the same measurement.

   It reported as `img 9..366, 357 x 915` — a highway photograph 900px tall on
   a phone, three of them, apparently 2,715px of the services section. Two
   facts kill it. `.cz-route__media` is `position: absolute; inset: 0` with a
   mask and `opacity: .42`: it is the card's BACKGROUND WASH, so its height is
   the card's height, not a photograph's. And the 7px each side is its own
   `transform: scale(1.04)` inside a parent with `overflow: hidden` — the
   bleed is the effect, and it is clipped.

   The rule I had written here (`margin-inline: 0; max-inline-size: 100%`) was
   also inert on an absolutely positioned element, so it would have sat in
   this sheet claiming a fix that had never applied — which is the shape of
   every fix-that-changed-nothing in 10-BUGS. **An absolutely positioned
   element is judged against nothing in the flow** (B300), and my own overflow
   pass knows that; the stray-image query I wrote afterwards did not, and that
   is where the phantom came from. ---- */

/* ==========================================================================
   ASK AI — the five assistant links, as a second row under the social row.
   4 October 2026.

   His instruction: *"we need Ask AI. And the links should be below social
   links in footer. Icons of AI's and thier links"*, then, with a screenshot
   of the footer, *"Below social links. Properl allignment please."*

   "PROPER ALIGNMENT" IS THE WHOLE BRIEF HERE, SO NO NEW GEOMETRY IS INVENTED.
   The markup reuses `.cz-footer__social` as its base class, which already
   carries, from the block ~100 lines above: `display: flex`, `flex-wrap`,
   `gap: 8px`, and per link a 42px circle with a 1px hairline at
   rgba(255,255,255,.16), a .035 wash, a 20px icon and a 2px hover lift.
   So the two rows share one left edge, one circle size and one gap **by
   construction rather than by two sets of numbers agreeing** — which is the
   failure B362 had just been written about the same evening, where a
   hand-written copy of a shared surface drifted from the original.

   `--ai` therefore sets exactly one thing: the space above the row.
   Everything else is inherited. If the social circles are ever resized, this
   row resizes with them.

   THE 14px TOP MARGIN ON THE LABEL AND 8px ON THE ROW are the footer's own
   rhythm, not new values: `.cz-footer__line` already uses `margin-bottom:
   14px` and `.cz-footer__social` already uses `margin-top: 8px`.
   ========================================================================== */
.cz-footer__ai-label {
  margin: 22px 0 10px;
  font-size: 12px; /* R7s floor. 11.5 shipped once and the 375px sweep caught it. */
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}

/* The row itself: inherits every dimension from .cz-footer__social. */
.cz-footer__social--ai { margin-top: 0; }

/* ----------------------------------------------------------------------
   One deliberate difference from the social row, and it is about meaning
   rather than looks. A social icon is a brand we belong to; these five are
   brands we are pointing AT, so they sit a shade quieter until hovered —
   the same .72 -> brighter move the social row makes, one step down.
   R51's rule applies even here: colour goes on marks that carry meaning,
   and five third-party logos at full strength would out-shout the footer's
   own navigation for no reader benefit.
   ---------------------------------------------------------------------- */
.cz-footer__social--ai img { opacity: .72; transition: opacity .25s var(--cz-ease); }
.cz-footer__social--ai a:hover img,
.cz-footer__social--ai a:focus-visible img { opacity: 1; }

/* ----------------------------------------------------------------------
   The label must not out-dent the circles. `.cz-footer__ai-label` is a
   <p>, and the footer's paragraph rules are set on `.cz-footer__line`
   rather than on <p> itself, so there is nothing to reset — but the
   margin is stated as a shorthand above so a future <p> rule cannot
   reintroduce a left margin the circles do not have.
   ---------------------------------------------------------------------- */

/* ==========================================================================
   The office column after his 4 October reordering: heading, hours, timezone
   note, THEN the address.

   `.cz-footer__address` carried `margin-top: 0; margin-bottom: 24px` — the
   right way round when it sat ABOVE the hours and that 24px was the gap down
   to them. Moved to the end of the column it became the wrong way round:
   measured at both 1440 and 375, the gap from the timezone line to the
   address was **0px**, against 22px from the heading to the hours and 16px
   from the hours to the timezone note. The block was touching the line above
   it and trailing 24px of padding below itself into nothing.

   So the two margins swap roles. 22px is not a new value — it is the join
   this column already uses between its heading and its hours, which makes
   the address read as its own block rather than as a third line of the
   hours table. The 16px above the timezone note is left alone: that note is
   a footnote to the hours and belongs close to them.

   Written as an adjacent-sibling rule rather than on `.cz-footer__address`
   itself, so it describes the arrangement it is correcting and cannot follow
   the address anywhere else.
   ========================================================================== */
.cz-footer__tz + .cz-footer__address,
.cz-footer__tz + * + .cz-footer__address {
  margin-top: 22px;
  margin-bottom: 0;
}

/* ==========================================================================
   HIS FORM INSTRUCTIONS OF 4 OCTOBER 2026 — the three that are CSS.
   A2 the code alone on the toggle · A3 the country names in the list ·
   A5 the side form's submit button, which was unreachable.

   Each was measured across every surface that carries the component before a
   line was written, because the component is shared by four forms and two of
   them were already correct. The population, read in 1600px frames on five
   page types:

     popup        panel rgb(10,12,16)  name rgb(7,21,34)        toggle: code + country
     footer form  panel rgb(10,12,16)  name rgba(255,255,255,.72)  toggle: code + country
     margin form  panel rgb(255,255,255)  name rgb(7,21,34)     toggle: CODE ONLY

   So the margin form was already the thing he is asking for, and the defect
   was never universal. That is why these rules say which ground they are
   about.
   ========================================================================== */

/* --------------------------------------------------------------------------
   A3 — "Even in dropshown, I can't see properly the name of countries.
         Should be in white text color, while the selected country text color
         is already good."

   MEASURED: in the popup an unselected country name computed to
   rgb(7, 21, 34) on a rgb(10, 12, 16) panel. That is near-black on
   near-black — a contrast ratio of about 1.05:1, which is not "hard to read",
   it is not rendered as far as a reader is concerned. The CODE beside it was
   visible because `.cz-dial__option-code` is the only part of the row with an
   explicit colour; the NAME has never had one and inherits.

   Inheriting is correct in the margin form, whose panel is white. It is wrong
   in the popup, whose panel is ink. So the row gets an explicit colour on each
   ground rather than one colour and a hope — which is the third time this
   exact mistake has been found here (the register table on 30 September, the
   homepage cards before it): **a colour is a relationship with what is behind
   it, not a value.**

   The selected row is untouched: `[aria-selected="true"]` sets gold in the
   dark block and a darker gold in the light one, and he said that one is
   already good.
   -------------------------------------------------------------------------- */
.cz-dial__option { color: rgba(255, 255, 255, .92); }

/* ... and the light ground states its own, because the rule above would
   otherwise put white names on the margin form's white panel. The value is
   the same ink the search field in that same panel already uses. */
/* CORRECTED 13 OCTOBER — `.cz-guide__form .cz-dial__option` WAS IN THIS LIST AND
   THE GUIDE CARD IS NOT LIGHT. Measured on /activity-guides/animal-production/:
   panel rgb(10, 12, 16), country name rgb(5, 6, 7) — a contrast ratio of 1.04:1,
   while the CODE beside it read 19.57:1 and was perfectly legible. That is what he
   reported: "in side form of activity guides, country names are not visible".

   `activity.css:2053` sets that card's ground and `:2102` gives its own foot links
   `rgba(255, 255, 255, .72)`, so the guide card has been dark since it was built.
   The two forms were written into one list on the assumption that a side form is a
   side form — the MARGIN form is on a white card, the GUIDE form is on an ink one,
   and they share no ground at all.

   AND IT WAS DEAD CODE UNTIL 13 OCTOBER, WHICH IS WHY IT SURVIVED. Before the dial
   picker was added to `cz_lead_form()`'s compact mode this selector matched nothing
   on any page — it ships in the 8 October archive doing nothing. A rule written for
   a case that never runs is not a rule anybody has checked (B385, one level down).
   Anything added to the list below must be measured against its own ground. */
.cz-reading__margin .cz-railform .cz-dial__option {
  color: var(--cz-ink, #050607);
}

/* --------------------------------------------------------------------------
   A2 — "country code should not show full name of country, only the code.
         Only the dropdown should show list of countries."

   The margin form has shown the code alone since it was built, by setting
   `display: none` on the country span inside its own override. The popup and
   the footer form showed "+971 United Arab Emirates".

   SCREEN-READER-ONLY RATHER THAN display:none. `display: none` takes the
   element out of the accessibility tree; the toggle's accessible name comes
   from `aria-labelledby` pointing at the label and the CODE, so the country
   would stop being announced at all. Clipped-but-present keeps it there for
   any assistive technology that reads the button's contents, and costs a
   sighted reader nothing.

   `flex: 0` matters as much as the clip: the span is `flex: 1 1 auto` in the
   base rule, so leaving it in the flex line would have held its share of the
   row open and pushed the chevron to the far edge of an otherwise empty
   button.
   -------------------------------------------------------------------------- */
.cz-dial__country {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
  flex: 0 0 0;
}

/* The chevron now sits beside the code rather than at the end of a wide
   button, so the code takes the slack the country span used to hold. */
.cz-dial__toggle .cz-dial__code { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   A5 — "in side form of every page, post, article, After selecting 'others'
         in option, the submit button is hidden and not showing. So maybe
         render properly, that the form shows completely even when selected
         others option or not."

   HE IS EXACTLY RIGHT AND THE CAUSE IS NOT THE OTHER FIELD. The margin card
   is `position: sticky; top: 110px` with no height limit. Choosing "Other"
   reveals one more field, the card grows past the height of the viewport, and
   **a sticky element taller than the space below its own `top` offset can
   never be scrolled to the bottom of** — sticky pins the top edge, so the
   tail is unreachable at every scroll position and the page gives no sign of
   it. His screenshots are the proof: with any other option the "Request a
   call" button is on screen; with "Other" it is gone.

   THE FIX IS ALREADY WRITTEN AND PROVEN ON THIS SITE. `.cz-guide__form` in
   activity.css solved the identical problem on the 200 activity guides on
   1 October, and its comment describes this defect in advance, word for word:
   *"A sticky card taller than the space above the fold pins its top and puts
   its own submit button permanently off screen — the reader can never reach
   it, at any scroll position, and the page gives no sign of it."* So this is
   that cap, applied to the card that still needed it, rather than a new idea.

   Scroll chaining is left at its default: once the card is exhausted the page
   carries on, which is what a reader who has just read a form expects.

   The cap is inside the 1401px query the card itself lives in, because below
   that width the card is `display: none` and there is nothing to cap.
   -------------------------------------------------------------------------- */
@media (min-width: 1401px) {
  .cz-reading__margin .cz-railform {
    /* 110px is the card's own `top`; the extra 24px keeps its bottom edge off
       the bottom of the window instead of flush against it. */
    max-height: calc(100vh - 110px - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* ==========================================================================
   HIS MOBILE HOMEPAGE INSTRUCTION — 5 OCTOBER 2026 (R99)
   ==========================================================================

   "And have a look at this empty space in mobile version. The homepage is
   already perfect in desktop version, but overall in mobile version, every
   section, boxes looks so big. Not rendering or fitting properly. Everything
   looks confusing, not properly or professionally structured, allgned etc.
   Work properly on mobile view of homepage."

   "The homepage is already perfect in desktop version" is the binding half of
   that instruction: it names a surface that must not move. So every rule in
   this block sits inside a phone-width query and nothing above 620px is
   touched. Appended at the END of main.css deliberately — a media query
   carries no specificity of its own, only order does (B316), and several of
   these answer earlier rules at the same specificity.

   WHAT WAS MEASURED FIRST, on a real emulated phone (375px, dpr 2,
   hover: none, pointer: coarse, 5 touch points) rather than at a narrow
   desktop window. That distinction mattered: the whole `@media (hover: none)`
   block — which stops the credential marquee and turns it into a swipeable
   scroller — never applies in a narrow desktop viewport, so an earlier pass
   at 360px/hover:hover had "found" that 7 of his 9 channel partnerships were
   clipped and unreachable. Measured on the real phone: the track is
   `overflow-x: auto`, scrollWidth 1404 against 343, all 9 items in the one
   visible list, duplicate hidden. Working exactly as designed. Not a defect.

   Page budget at 375px before this block: 28,005px, 34.5 screens, and
   `html.scrollWidth` exactly 375 at every point — the page has never
   scrolled sideways. The height is 40 cards in 14 sections, every desktop
   grid collapsed to one column. Per card, measured as
   height - glyph-extent - padding:

       .cz-appr          12 x 298   ink 120   padY 40   slack  80
       .cz-zonecard      11 x 232   ink 138   padY 36   slack  58
       .cz-route          3 x 879   ink 494   padY 56   slack 329
       .cz-cap            9 x 184   ink 118   padY 32   slack  34
       .cz-reg__regime    3 x 447   ink 332   padY 48   slack  67
       .cz-vertical       2 x 949   ink 454             slack 248
       .cz-figure         4 x 120   ink  76   padY 40   slack   4

   So roughly 3,600px of the page is padding and gap rather than content.
   This block takes about 1,090px of that back. It is NOT the whole answer to
   "the page is too long" and must not be recorded as one: the rest is the
   number of sections and cards, which is editorial and his to decide. What it
   does do is make every card he called "so big" measurably tighter without
   hiding, collapsing or removing one word of his content.

   TWO THINGS HERE ARE REAL DEFECTS RATHER THAN TIGHTENING, and they are the
   reason this block exists at all:

     1. The four figure blocks are the "empty space" he pointed at.
        `.cz-figure__label` carries a `max-width` that computes to 176px, and
        below 600px `.cz-figures` is a single full-width column, so the label
        wrapped to two or three lines inside a 302px box and left 122-161px of
        dead width beside a 30px numeral that left 259px of its own. The cap is
        right for the 4-up and 2-up grids above 600px and does nothing but
        create that gap once the grid is one column.

     2. `.cz-zonecard__specs dt` is 11.5px on 33 elements, under R7's hard
        12px floor. The sheet already knows this is a breach — the rule at the
        top of this file records a different label as "Was 11.5px, under R7's
        hard 12px floor" — and the 29 September zone-card block reintroduced
        it. 33 of 33 were the only sub-12px text on the page.

   WHAT WAS DELIBERATELY NOT CHANGED, each because measuring it said so:
     - The authority plate stays 82px. Shrinking the card's padding does not
       touch it, because the plate sizes the logo and §7q raised these marks
       off 34px for exactly that reason: a building at 34px is a grey smudge.
     - `.cz-zonecard__specs` keeps its label-above-value stack. Side by side
       with the value right-aligned IS what he reported as "freezone table is
       not rendering" on 29 September; stacking was his fix, so it stays.
     - Section padding stays. `--cz-y` is already 30px top and bottom on the
       body sections at this width, which is not where the height is.
     - `.cz-appr__trigger` is a `<p>`, not a control. "Trigger" there means
       what triggers the requirement, not a disclosure toggle: there is no
       `<details>` anywhere in the section and nothing to collapse. Reading
       the class name as an accordion would have produced a fix that hid his
       content behind a tap.
   ========================================================================== */

@media (max-width: 600px) {

  /* HIS "empty space". The grid is one column from here down, so the label's
     cap has nothing left to protect and the value's line has 259px spare
     beside it. Value and label share one baseline-aligned row instead, which
     uses the full measure and takes the block from 120px to about 78px. */
  .cz-figure {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 14px;
  }

  .cz-figure__label {
    max-width: none;
    margin-top: 0;
  }
}

@media (max-width: 620px) {

  /* R7's 12px floor. 33 elements, the only sub-12px text on the page. */
  .cz-zonecard__specs dt {
    font-size: 12px;
  }

  /* 12 x 298px with 120px of text in each. The plate is untouched. */
  .cz-appr {
    padding-block: 14px;
    row-gap: 10px;
  }

  .cz-appr__trigger {
    margin-top: 8px;
    padding-top: 8px;
  }

  /* 11 x 232px with 138px of text in each. */
  .cz-zonecard {
    padding-block: 14px;
  }

  .cz-zonecard__head {
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  .cz-zonecard__specs {
    row-gap: 8px;
  }

  /* 3 x 879px, and the 564px spec block inside each is the single largest
     card component on the page: four rows carrying 36px of vertical padding
     apiece around one 12px label and two or three lines of value. */
  .cz-route {
    padding-block: 20px;
  }

  .cz-route__head {
    margin-bottom: 14px;
    padding-bottom: 14px;
  }

  .cz-route__lead {
    margin-bottom: 18px;
  }

  .cz-route__specs > * {
    padding-block: 12px;
  }

  /* 3 x 447px, seven children at a 14px row gap. */
  .cz-reg__regime {
    padding-block: 18px;
    row-gap: 10px;
  }

  .cz-vertical__body {
    padding-block: 18px;
  }

  .cz-cap {
    padding-block: 14px;
  }
}

/* ===========================================================================
   THE SCROLL-PAST-THE-FOOTER DEFECT, FIXED AT THE GENERATOR — 5 October 2026.

   He reported it three times: "business-activities page is broken. How am I
   still able to scroll past footer?" He was right every time, and this is the
   one line that answers it.

   MEASURED on /business-activities/ in a top-level document at 1135x703:
   the footer ended at 3,535px and `documentElement.scrollHeight` was 14,699 —
   so a reader could scroll 11,164px past the end of the page into dark ground.
   `document.body.scrollHeight` was 3,503, i.e. correct; only the ROOT was
   inflated, which is why every page-height check this project owns passed.

   THE CAUSE. `.cz-table__wrap` is a `position: static` scroll container, and in
   Chrome the scrollable overflow of a static scroll container propagates to the
   viewport instead of being contained. `position: relative` makes the wrap the
   containing block for its own absolutely-positioned descendants and stops the
   propagation.

   PROVED BY SUPPRESSION IN THE PAGE, before this rule was written:
     position: relative on the wrap -> 3,534   (footer bottom 3,535)
     contain: paint on the wrap     -> 3,534
     overflow: hidden on the wrap   -> 14,675  (overflow is NOT the mechanism)
     the table removed entirely     ->  3,014  (control: it is the source)
     html/body overflow-x: visible  -> 14,699  (the root clip is not involved)
     thead position: static         -> 14,699  (not the sticky head)
   and nothing moved: seven boxes measured before and after, 0 changed, the
   scroller still 520px around 13,881px of content.

   WHY IT WAS LEFT: the full diagnosis has been in this file since 2 September,
   at the `@media (max-width: 480px)` block near "THE 425-680px OVERFLOW BAND",
   together with the reason it was not applied — "`/business-activities/` is
   frozen under R50, so this is NOT applied to the bare class ... When R50 lifts,
   the generator fix is one line on `.cz-table__wrap` itself." R50 was lifted on
   30 September. This is the SIXTH freeze leftover found since, and the first
   that a reader could see. A scoped fix plus a note saying when to widen it is
   a deferral, not a fix, and nothing re-reads the note.

   ONE CORRECTION TO THAT NOTE, because its reasoning was wrong where its
   prescription was right: it says "the box has no absolutely-positioned
   descendants". It has 201 — `caption.cz-sr` and one `span.cz-sr` per row, the
   screen-reader labels, all `position: absolute` (main.css:2975). They are
   exactly what escapes a static scroll container. The fix was correct for a
   reason nobody had measured.

   SCOPE. Deliberately the bare class, which is what the note asked for: the
   register on /business-activities/, the free zone comparison in
   archive-cz_freezone.php, and the homepage activity table all share it, and all
   three want their overflow contained. The `@media (max-width: 420px)` rule that
   already sets this for the "Scroll for more" hint is now redundant rather than
   load-bearing, and is left where it is.
   =========================================================================== */
.cz-table__wrap { position: relative; }

/* ===========================================================================
   THE POPUP ON A PHONE — 5 October 2026, his instruction.

   His words: "The popup form on phone covers full screen. In legacy website,
   look at the size of popup form, only size and round edges. Nothing else.
   Only changes needs in phone version of popup form, and add blue gradient to
   the popup form background too. From the legacy website, only look at size and
   round edges. No other change."

   WHAT IT WAS. Below 520px the panel was a full-bleed bottom sheet: the scrim's
   padding removed, `align-items: end`, `width: 100%`, the left, right and bottom
   borders stripped, and `transform: translateY(100%)` sliding it up from the
   edge. It filled the screen edge to edge with square corners — exactly what he
   photographed.

   WHAT THE LEGACY SITE ACTUALLY DOES, measured on consultzone.ae at 375x812
   rather than read off his screenshot:

     scrim .call_request_popup   fixed, full viewport, padding 16px, flex centred
     card  .content              329px wide, 505px tall, border-radius 14px
     card inset from the edges   left 23  right 23  top 182  bottom 126

   So it is a floating card with the page visible all round it, vertically
   centred, its height driven by its own content — NOT a sheet. Two numbers are
   taken from it and nothing else, which is what he asked for: the inset (a 16px
   scrim padding, so the card is the viewport less 32px) and the 14px radius.
   Its white ground, its orange button, its field styling and its typography are
   all left where they are.

   OUR FORM IS TALLER THAN THEIRS — name, dial code, phone, email, intent and the
   Other reveal against their five fields — so the height cannot simply be copied.
   `max-height: calc(100svh - 32px)` keeps the card inside the same 16px inset it
   is centred in, and `.cz-popup__body` already carries `overflow-y: auto` with
   `overscroll-behavior: contain`, so a longer form scrolls inside the card
   instead of growing past the screen. `svh`, not `vh`: on a phone `vh` is the
   LARGE viewport and ignores the browser chrome, which is how a "100vh" dialog
   ends up with its submit button under the address bar.

   THE SLIDE-UP IS REMOVED, NOT REPLACED. Deleting the `translateY(100%)`
   override lets the panel inherit the base `translateY(22px) scale(.985)` that
   desktop already uses, so the open animation is the one surface behaviour that
   is now identical at both widths rather than a third thing invented here.

   THE BORDERS COME BACK for the same reason the radius goes on: a card with
   three of its four edges missing is a sheet with rounded corners.

   DESKTOP IS DELIBERATELY UNTOUCHED — he scoped this to the phone twice in one
   message. Above 520px the panel keeps its square corners, its `min(1000px,
   100%)` width and its `min(88vh, 780px)` height, and the Burj Al Arab aside
   (R15) is `display: none` below 860px, so nothing here can reach a protected
   image.
   =========================================================================== */
@media (max-width: 520px) {
  .cz-popup {
    padding: 16px;
    align-items: center;
  }

  .cz-popup__panel {
    width: 100%;
    max-width: none;
    max-height: calc(100svh - 32px);
    border: 1px solid var(--cz-line-dk);
    border-radius: 14px;
    transform: translateY(22px) scale(.985);
  }

  /*
   * THE LEAD PARAGRAPH IS DROPPED ON A PHONE - his instruction, 5 October.
   *
   * "Also in mobile view remove this text ... That would make form smaller in mobile
   * view." He is right about the cause: on a 360px screen that paragraph sets to six
   * lines and pushes the first field below the fold, so the card opens showing prose
   * instead of a form.
   *
   * CSS rather than a markup deletion, deliberately. R88.9 - when he says remove, the
   * markup goes - is about removing something outright; this is scoped to "mobile view"
   * by his own words, and on desktop the panel is 1000px wide beside the photograph and
   * the lead is carrying its weight there. A width-conditional removal has no markup
   * form. `display: none`, not visibility or opacity, so it occupies no space at all.
   *
   * `aria-describedby="czPopupLead"` on the dialog still points at it, deliberately: an
   * aria-describedby reference resolves whether or not the target is rendered, so a
   * screen-reader user keeps the description while a sighted phone user gets the
   * shorter card. The dialog's NAME comes from aria-labelledby and is untouched.
   */
  .cz-popup__lead {
    display: none;
  }

  .cz-popup.is-open .cz-popup__panel {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   THE BLUE GRADIENT ON THE POPUP PANEL — the second half of his instruction.

   The values are `body .cz-form`'s, copied exactly and not re-derived: circle at
   82% 18%, `rgba(23, 105, 255, .18)`, transparent at **31rem**, over the same
   135deg ramp. That is the project's CARD-sized version of this treatment — the
   full-width `.cz-consult` section uses a 38rem extent and the form card uses 31
   — and B327 is the reason the distinction matters: a 135deg ramp is a slow wash
   across 1860px and a steep one across 343px, and a radial extent wider than its
   own box puts the brightest part of the gradient inside every corner.

   Reusing the form's values rather than scaling new ones is deliberate. At phone
   width the popup panel and the foot-of-page `.cz-form` are the same physical
   size, and that form's treatment at that size is a surface he has already
   approved, so this introduces no tuned constant that can drift from the prose
   beside it (R82.6).

   Applied at every width rather than on the phone alone, so the two popups do
   not diverge into different designs. On desktop the aside holds the Burj Al
   Arab photograph in its own element with its own background, so R15's image is
   untouched — only the form half of the panel changes.
   --------------------------------------------------------------------------- */
.cz-popup__panel {
  background:
    radial-gradient(circle at 82% 18%, rgba(23, 105, 255, .18), transparent 31rem),
    linear-gradient(135deg, #0a0e15 0%, #080a0e 58%, #0b111b 100%);
}

/* ===========================================================================
   THE POPUP, SHORTER — 5 October 2026, his third pass on it.

   "Look at popup form in mobile version. Why is it taking full screen? and the
   fact is it's that big, it needs scrolling within form. Remove that text above
   Full name ... Even the desktop version of form, why is it scrollable within?
   I believe desktop version can be fixed without removing anything. The mobile
   version of popup form should be shorter in vertical lenghth."

   Three separate complaints, and they have three separate causes. The checklist
   is deleted from the markup (template-parts/popup.php) rather than hidden; what
   is left is here.

   MEASURED AT 375x812 BEFORE THIS BLOCK — the whole 779px, accounted for:

     body padding                    52
     eyebrow + margin                30
     h2 + margin                     88
     the five stacked fields        375   <- 76+74+76+76+73
     four 14px gaps                  56
     submit + margin                 67
     note + margin                   51
     "I'm just browsing" + margin    60
                                    ---
                                    779   against a 780px panel

   So the form was 55% of it and the fields were the form. The lever is the
   COUNTRY CODE AND NUMBER, which were on two rows: merging them saves a 74px
   field and a 14px gap, 88px, without removing anything a reader fills in.

   THE NUMBERS ARE THE MARGIN FORM'S, NOT NEW ONES. editorial.css has shipped
   exactly this arrangement for the R69 side form since September —
   `minmax(0, 118px) minmax(0, 1fr)`, a 10px column gap, the panel widened past
   its own column and the country name hidden. Reusing them means no tuned
   constant here that can drift from the prose beside it (R82.6), and it means
   the two narrow forms on this site behave identically.

   THE DROPDOWN HAS TO BE WIDENED OR THIS BREAKS THE PICKER. `.cz-dial__panel`
   is `position: absolute; inset-inline: 0`, so it takes its width from the field
   — and a 118px country list with a search box in it is unusable. `inset-inline:
   0 auto` plus `width: max(100%, 264px)` lets it overhang its column, which is
   what the margin form does and why that one works.

   `> *`, NOT `> .cz-field`: the honeypot and anything added later must span by
   default, or an unclassed child auto-places into the 118px picker column. Only
   the two that belong side by side opt out.
   =========================================================================== */
@media (max-width: 520px) {
  .cz-popup__grid {
    grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
    column-gap: 10px;
  }

  .cz-popup__grid > * {
    grid-column: 1 / -1;
  }

  .cz-popup__grid > .cz-field--dial {
    grid-column: 1;
  }

  .cz-popup__grid > .cz-field--phone {
    grid-column: 2;
  }

  .cz-popup .cz-dial__panel {
    inset-inline: 0 auto;
    width: max(100%, 264px);
  }

  .cz-popup .cz-dial__country {
    display: none;
  }

  /* 52px of the 779 was the body's own padding. 42 is still a comfortable
     gutter beside a 44px control and buys back ten. */
  .cz-popup__body {
    padding: 20px 20px 14px;
  }
}

/* ---------------------------------------------------------------------------
   AND THE DESKTOP PANEL NO LONGER SCROLLS INSIDE ITSELF.

   "I believe desktop version can be fixed without removing anything" — he is
   right, and nothing is removed. Measured at 1440x900 after the checklist went:
   the content is 788px inside a 780px panel, so it overflowed by **8px** and
   grew a scrollbar for it.

   `min(88vh, 780px)` becomes `min(92vh, 860px)`: 828px at a 900px-tall window,
   860 at 1080. Both clear 788 with room, so the scrollbar is gone rather than
   hidden. The panel still sizes to its CONTENT — this is a ceiling, not a
   height — so it does not grow to 860 just because it may.

   A window shorter than about 860px tall will still scroll the form, and that is
   correct: at that point the alternative is cutting fields, which is the one
   thing he ruled out for desktop.
   --------------------------------------------------------------------------- */
@media (min-width: 521px) {
  .cz-popup__panel {
    max-height: min(92vh, 860px);
  }
}

/* ===========================================================================
   THE POPUP, FOURTH PASS — 5 October 2026. "I AM SO MAD."

   "WHAT'S UP WITH SCROLLABLE FORMS EVERYWHERE DUDE?? The desktop popup form is
   still scrollable within. ... Also from popup form for mobile remove this text
   'Before you choose a jurisdiction, choose the right activity.', I feel like we
   need further shorter size for that form in mobile view."

   WHY THE LAST PASS DID NOT FIX DESKTOP, AND IT IS WORTH STATING PLAINLY: I
   raised the ceiling and measured at 1440x900, where it fit. He is on a taller,
   wider window and it still scrolled. Measured across four real viewports:

     1905 x 937   content 799   available 799   fits
     1905 x 865   content 799   available 794   SCROLLS, short by 5
     1521 x 800   content 793   available 734   SCROLLS, short by 59
     1425 x 900   content 788   available 788   fits

   **A CEILING CANNOT EXCEED THE WINDOW.** On an 800px-tall laptop there is no
   value of `max-height` that gives 793px of content room plus the panel's own
   borders. Raising the cap was treating a content problem as a container problem,
   and it only ever worked on the viewport I happened to measure. **Measure the
   population, not the one case** — R82.8 applied to viewports.

   So the content comes down instead, and it comes down WITHOUT removing anything
   he reads, which is what he asked for on desktop. Every number below is spacing:

     body padding      44 + 48  ->  28 + 30     -34
     eyebrow margin         18  ->  10           -8
     h2 margin              14  ->  10           -4
     grid row gap      14 (x3)  ->  12           -6
     submit margin          18  ->  14           -4
     note margin            14  ->  10           -4
     dismiss margin         16  ->  12           -4
                                                ----
                                                 -64

   799 - 64 = 735, against 760 available at a 800px window under a 95vh ceiling.
   It fits at every viewport in the table above, with the shortest having 25px to
   spare. Below about 780px tall it will scroll again, and at that point the only
   remaining lever is removing fields, which he ruled out for desktop.
   =========================================================================== */
@media (min-width: 521px) {
  .cz-popup__panel {
    max-height: min(95vh, 900px);
  }

  .cz-popup__body {
    padding: 28px clamp(24px, 2.2vw, 34px) 18px;
  }

  .cz-popup__body > .cz-eyebrow {
    margin-bottom: 10px;
  }

  .cz-popup__title {
    margin-bottom: 10px;
  }

  .cz-popup__grid {
    row-gap: 12px;
  }

  .cz-popup__form .cz-btn {
    margin-top: 14px;
  }

  .cz-popup__note {
    margin-top: 10px;
  }

  .cz-popup__dismiss {
    margin-top: 12px;
  }
}

/* ---------------------------------------------------------------------------
   AND THE HEADLINE GOES ON A PHONE — "remove this text 'Before you choose a
   jurisdiction, choose the right activity.'"

   IT IS HIDDEN FROM SIGHT, NOT FROM THE ACCESSIBILITY TREE, AND THAT IS
   DELIBERATE. This `<h2>` carries `id="czPopupTitle"`, and the dialog points at
   it with `aria-labelledby`. `display: none` would leave a modal dialog with **no
   accessible name at all** on a phone — a screen-reader user would be told only
   that a dialog had opened. The project's own screen-reader pattern
   (`.cz-sr`, main.css ~2975) takes it out of the layout completely while leaving
   it readable to assistive technology, which is the same visual result and none
   of the cost.

   -88px: 74 for the three lines plus its 14px margin.
   --------------------------------------------------------------------------- */
@media (max-width: 520px) {
  .cz-popup__title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ===========================================================================
   THE WHATSAPP FORM — CORRECTED, 6 October 2026.

   "I said shape, aspect ratio, curved edges should be same as activity guide
   side form. Not the cap you made. And I wanted green gradient instead of blue."

   HE IS RIGHT ON BOTH, AND THE FIRST VERSION WAS WRONG IN THREE MEASURABLE WAYS.
   Measured side by side at 1600x900 before this was written:

                        guide side form        my first attempt
     shape              411 x 573  ratio 0.72   480 x 419  ratio 1.14
     corners            20px                    0px
     fields             stacked, 1 column       side by side, 3 columns
     the card's ground  on .cz-guide__form      on the PANEL — and the form
                                                 inside it was still BLUE

   WHAT I GOT WRONG, AND IT IS ONE MISTAKE WITH THREE SYMPTOMS: I styled the
   modal's PANEL and left `.cz-form` alone. In the guide there is no panel — the
   card IS `.cz-guide__form`, and the form inside it is stripped bare
   (`border: 0; background: none; padding: 0`). So my green went on an outer box
   while the blue `body .cz-form` gradient kept painting the inner one, which is
   exactly the blue he is pointing at. And a 480px panel let the compact grid run
   three fields across, which is what turned a portrait card landscape.

   SO THE CARD IS NOW A COPY OF `.cz-guide__form`, PROPERTY FOR PROPERTY — the
   same 20px radius, the same 1px rgba(255,255,255,.13) border, the same
   clamp(18px, 1.7vw, 26px) padding, the same box-shadow, the same radial at
   86% 8% with the same .30 alpha and the same 30rem extent, and the same four
   rules that strip the form and stack its grid. Nothing is approximated and no
   number here is new (R82.6).

   THE GREEN IS A CHANNEL SWAP, NOT A NEW PALETTE. Each of the guide's three ink
   stops has its green and blue channels exchanged, so the luminance is identical
   and only the hue moves:

     #0b1220 -> #0b2012        #080a0e -> #080e0a        #0c1524 -> #0c2415

   and `rgba(23, 105, 255, .30)` becomes `rgba(37, 211, 102, .30)` — WhatsApp's
   own green at the guide's own alpha.

   THE PANEL BECOMES A POSITIONING WRAPPER AND NOTHING ELSE. No ground, no border,
   no padding, no radius — otherwise there are two cards, which is R87.9's box
   inside a box and is half of why the first attempt read as a different shape.
   =========================================================================== */
.cz-popup--wa .cz-popup__panel {
  width: min(411px, 100%);
  max-height: min(92vh, 760px);
  grid-template-columns: minmax(0, 1fr);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* The CARD — the guide's own recipe, hue-swapped. */
.cz-popup--wa .cz-popup__body {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .13);
  padding: clamp(18px, 1.7vw, 26px);
  color: #fff;
  background:
    radial-gradient(circle at 86% 8%, rgba(37, 211, 102, .30), transparent 30rem),
    linear-gradient(135deg, #0b2012 0%, #080e0a 60%, #0c2415 100%);
  box-shadow: 0 22px 56px rgba(8, 10, 13, .16);
  overflow-y: auto;
}

/* The four rules that make the guide's form sit INSIDE a card rather than be a
   second one. Copied verbatim from `.cz-guide__form .cz-form`. */
.cz-popup--wa .cz-form {
  border: 0;
  background: none;
  padding: 0;
}

.cz-popup--wa .cz-form__grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.cz-popup--wa .cz-field--full {
  grid-column: auto;
}

.cz-popup--wa .cz-form__foot {
  margin-top: 18px;
  padding-top: 18px;
}

.cz-popup--wa .cz-btn {
  width: 100%;
  justify-content: center;
}

/* The close control is the one thing the guide card has no equivalent for — it
   sits on the card's own corner rather than floating over a panel that no longer
   has a ground of its own. */
.cz-popup--wa .cz-popup__close {
  top: 10px;
  right: 10px;
  background: rgba(8, 20, 12, .62);
  border-color: rgba(255, 255, 255, .16);
}

.cz-popup--wa .cz-eyebrow--wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #25d366;
}

.cz-popup--wa .cz-wa__mark {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* The shared title's gold emphasis would be a third brand colour on a green card. */
.cz-popup--wa .cz-popup__title em {
  color: #4ade80;
  font-style: normal;
}

/* R17 reserves blue for action everywhere else; here the button's promise IS the
   green one, and a blue button making it reads as a different destination. */
.cz-popup--wa .cz-form .cz-btn,
.cz-popup--wa .cz-btn--primary {
  background: linear-gradient(135deg, #25d366 0%, #1aa851 100%);
  border-color: transparent;
  color: #04170c;
}

.cz-popup--wa .cz-form .cz-btn:hover,
.cz-popup--wa .cz-btn--primary:hover {
  background: linear-gradient(135deg, #2ee273 0%, #1cb758 100%);
}

.cz-popup--wa .cz-form .cz-btn:focus-visible {
  outline: 2px solid #4ade80;
  outline-offset: 3px;
}

/* The field focus ring is blue everywhere else; on a green card it would be the
   only blue left on the panel. */
.cz-popup--wa .cz-form .cz-field input:focus,
.cz-popup--wa .cz-form .cz-field select:focus,
.cz-popup--wa .cz-form .cz-field textarea:focus,
.cz-popup--wa .cz-dial__toggle:focus-visible {
  border-color: #25d366;
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .16);
}

@media (max-width: 520px) {
  .cz-popup--wa .cz-popup__panel {
    width: 100%;
  }
}

/* ===================================================================
   MOBILE HOMEPAGE — THE RAIL PASS · 08 OCT 2026
   ===================================================================

   HIS REPORT, THE THIRD TIME: *"many sections, cards, images, text, typography are not
   rendered properly for mobile ... so big that are taking up lot of space. A user will
   most definetly get headache ... not structured properly."* Naming External Approvals:
   *"Could have been rendered, structured, and resized more creatively and efficiently for
   mobile view."*

   HIS CONSTRAINT, same breath: *"Desktop homepage is perfect."* Everything here is inside
   `max-width: 600px`, and the 1440 reading is asserted unmoved property by property.

   MEASURED AT 375px BEFORE A LINE OF THIS WAS WRITTEN — the page was 24,526px, thirty
   phone screens, and the cost was repeated cards in ONE COLUMN, not padding and not
   photographs:

       12 authority cards x 274px = 3,309px     <- the section he named
        3 route cards     x 840px = 2,509px
        2 vertical cards  x 915px = 1,832px
        4 quote figures   x 227px =   908px

   section padding, all 13 sections together ...... 764px   (so: not the padding)
   the three 879px route photographs .............. 0px of page height — they are
       `opacity: .42` washes inside an absolutely-positioned parent, proved by removing
       all three and re-reading the page height (§7q, re-confirmed by suppression)

   WHY NOT SMALLER CARDS. The twelve authority marks run 1.91:1 (KHDA) to 10:1 (TDRA)
   against a 4.66:1 plate box, so SEVEN of twelve are height-constrained — they fill the
   58px inner height and leave width spare. Cutting the plate height shrinks seven logos,
   which is what §7q raised them off 34px to prevent and what §7ab recorded as "the plate
   stays 82px because it sizes the logo". The plate is honest. The ARRANGEMENT was not.

   THE PATTERN IS ALREADY HIS, ALREADY ON THIS PAGE, AND ALREADY THE PROOF. `.cz-journey__rail`
   carries SIX stages in one swipeable row, and `cz-journey` is one of the SHORTEST sections
   on the mobile page (982px for six cards, against 4,186px for twelve). `.cz-credentials__track`
   does it for the partner marks. So this copies that recipe rather than inventing a third
   interaction (R87.5), and the affordance copies `.cz-table__wrap::after`'s "Scroll for
   more" — the theme's own CSS-only hint.

   300px IS LOAD-BEARING, NOT ARBITRARY. It holds the approvals plate's inner box at exactly
   272px, the width it has today, so all twelve marks render byte-identically and nothing is
   traded for the compaction.

   NOTHING IS HIDDEN. Every card stays in the DOM, in order, at full size; a screen reader
   reads all twelve as the list they already are. Keyboard scrolling (`tabindex`/`role`,
   WCAG 2.1.1) is the house standard on the five existing scrollers and is added in a
   separate markup pass — it is not mixed into a CSS-only change. */

@media (max-width: 600px) {

  /* ---- THE RAIL RECIPE, one declaration block for every repeated-card section ----
     The wrapper is both the grid and the scroller here, which `.cz-journey__rail` cannot
     be because it bleeds full-width outside `.container`; these all sit INSIDE the
     container, so the first card already lands on the site's single left edge and the
     journey's padding arithmetic is unnecessary. `grid-template-columns: none` is
     mandatory, not tidiness: `.cz-verticals__grid` carries an explicit one-column
     template at this width and an explicit template fights `grid-auto-flow` (B335 —
     tracks and placements are one decision). */
  .cz-appr-list,
  .cz-routes__panels,
  .cz-verticals__grid,
  .cz-reg__regimes {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 264px;
    gap: 16px;
    margin: 0;
    padding: 0 0 12px;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* A nested scroller on touch needs this or a sideways swipe at the end of the rail
       starts dragging the page behind it (§7ac, the register cap). */
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    position: relative;
  }

  .cz-appr-list::-webkit-scrollbar,
  .cz-routes__panels::-webkit-scrollbar,
  .cz-verticals__grid::-webkit-scrollbar,
  .cz-reg__regimes::-webkit-scrollbar { height: 3px; }

  .cz-appr-list::-webkit-scrollbar-track,
  .cz-routes__panels::-webkit-scrollbar-track,
  .cz-verticals__grid::-webkit-scrollbar-track,
  .cz-reg__regimes::-webkit-scrollbar-track { background: var(--cz-line); }

  .cz-appr-list::-webkit-scrollbar-thumb,
  .cz-routes__panels::-webkit-scrollbar-thumb,
  .cz-verticals__grid::-webkit-scrollbar-thumb,
  .cz-reg__regimes::-webkit-scrollbar-thumb { background: var(--cz-gold); }

  /* Every card snaps to the left edge, so a swipe always lands on a card rather than
     between two. */
  .cz-appr-list > .cz-appr,
  .cz-routes__panels > .cz-route,
  .cz-verticals__grid > .cz-vertical,
  .cz-reg__regimes > .cz-reg__regime {
    scroll-snap-align: start;
    margin: 0;
  }

  /* ---- THE AFFORDANCE IS NOT A PSEUDO-ELEMENT, AND THAT WAS A DEFECT OF MINE ----
     A "Swipe for more" `::after` lived here, copied from `.cz-table__wrap::after`. That
     recipe does not transfer: `.cz-table__wrap` is a BLOCK around a table, while each of
     these rails IS the grid container — so the generated box became one more GRID ITEM in
     `grid-auto-flow: column` at `grid-auto-columns: 300px`.

     Measured on the Federal rail: `scrollWidth` 1,556px for four cards, where
     4 x 300 + 3 x 14 = 1,242 — the missing 314px is one gap plus one empty 300px column.
     Six rails, ~1,800px of empty track, and the hint only reachable AFTER the last card.
     It cost precisely what the rails were built to save.

     It cannot be rescued in place: `position: absolute` inside a scroller scrolls with the
     content and resolves `right: 0` against the full scroll width, so it lands off-screen,
     and `sticky` has to be in flow, which is what made it an item.

     The affordance a rail should have is the journey rail's — a real element BEFORE the
     rail, with its arrow icon, translatable — and that is markup, so it belongs with the
     `tabindex`/`role`/`aria-label` pass rather than smuggled into a CSS-only change.

     Until then the rail is still affordedby construction: 300px cards in a 343px track
     leave the next card peeking, over a visible 3px gold scrollbar. That is exactly how
     `.cz-credentials__track` reads on a phone, with no text hint, on a surface he approved. */

  /* ---- THE TYPOGRAPHY HE NAMED ----
     A 96px decorative word behind a 342px card is the largest type on the mobile page and
     it is the ghost regime name. It is `position: absolute`, so this changes no height —
     it is here because he said the typography is not rendered properly for mobile, and a
     96px word on a 375px screen is that. Desktop keeps its 131px. */
  .cz-reg__ghost { font-size: 46px; line-height: 1; }

  /* ---- THE AIR INSIDE THE CARDS ----
     Each spec row spent 36px of its 134px on padding and 9px more on the label's margin:
     45px of air in a 134px row, four rows per card, three cards. The numbers below are the
     same rhythm at a phone's scale, not new values pulled from nowhere. */
  /* ---- HIS BULLETS, MOBILE ONLY ----
     *"I don't think in mobile verion (only mobile view), those bullet points are
     neccessary for finvisor and consulthome boxes."* Five items on one card, six on the
     other. HIDDEN at this width rather than deleted, because he scoped it to mobile
     himself and said desktop is perfect — deleting the markup would take them off the
     desktop he approved. R88.9's *"when he says remove, DELETE"* was given about rows he
     wanted gone everywhere, and its specificity trap (B245/B352) is about `[hidden]`
     losing to a class; this IS a class rule, inside a media query, so it wins on order. */
  .cz-vertical__list { display: none; }

  /* The lead paragraph above the hidden list was carrying the list's top margin. */
  .cz-vertical__lead { margin-bottom: 0; }

  .cz-route__specs > div { padding-top: 11px; padding-bottom: 11px; }
  .cz-route__specs dt { margin-bottom: 5px; }
  .cz-appr { padding-top: 12px; padding-bottom: 12px; gap: 8px; }
  .cz-cap { padding-top: 10px; padding-bottom: 10px; }

  /* ---- THE SIDE PADDING, SO THE TEXT COLUMN WIDENS WHILE THE CARD DOES NOT ----
     His instruction took the rail cards to 264px. The same sentence in a narrower column
     wraps onto more lines, and in one grid row every card stretches to the tallest, so four
     rails grew: routes 1,444 -> 1,603, approvals 1,468 -> 1,615, support 1,541 -> 1,651,
     voices 408 -> 478.

     Widening the card back is not available — he set that width, and the breathing space is
     the point. So the card stops spending so much of its 264px on itself:

         .cz-appr           20 -> 14    text column 224 -> 236
         .cz-route          28 -> 18                208 -> 228
         .cz-reg__regime    24 -> 16                216 -> 232
         .cz-vertical__body 18 -> 14                228 -> 236

     14px is `.container`'s own gutter at this width, so the card's inner edge lines up with
     the page's text edge rather than introducing a fifth margin value (R82.6). */
  .cz-appr { padding-inline: 14px; }
  .cz-route { padding-inline: 18px; }
  .cz-reg__regime { padding-inline: 16px; }
  .cz-vertical__body { padding-inline: 14px; }
  .cz-cap { padding-inline: 14px; }
}

/* ===================================================================
   THE RAIL HINT · 08 OCT 2026
   ===================================================================

   *"how would a user know to slide the cards? there should be highlighting indication
   right?"* — he is right, and the gap was mine. Round three removed a `::after` hint that
   had become a grid ITEM and was eating a 300px column at the end of every rail, which
   left only the peeking card and a 3px scrollbar: an affordance you have to already
   understand.

   THIS IS `.cz-journey__hint`'s OWN RECIPE, property for property, because that is the
   affordance already on this page for the rail he approved (R87.5 — copy it, never
   re-derive it). It is `display: none` at every width and turned on only at <=600px, so
   the desktop he called perfect gains markup that renders nothing at all.

   The arrow is the journey hint's arrow. The gold is `--cz-gold-emph`, which is what
   `.cz-journey__hint`'s sibling eyebrow uses, so the hint reads as a label rather than as
   a control — it is not a button and must not look like one. */

.cz-rail-hint { display: none; }

@media (max-width: 600px) {
  .cz-rail-hint {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--cz-gold-emph);
  }

  .cz-rail-hint svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }

  /* The arrow nudges to say "there is more that way" without becoming an animation a
     reader has to wait for; it stands down under prefers-reduced-motion like everything
     else on this site (R16). */
  @media (prefers-reduced-motion: no-preference) {
    .cz-rail-hint svg { animation: cz-rail-nudge 1.8s ease-in-out infinite; }
  }
}

@keyframes cz-rail-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* ===================================================================
   THE GOOGLE REVIEWS AUTO-SCROLL · 08 OCT 2026
   ===================================================================

   *"Also 2 sections I want it to autoscroll like a slide ... 2:- For google reviews
   cards."* — `cz-voices` is that section; all four `<figcaption>`s read "Google review".

   THIS IS `.cz-credentials__marquee`'s MECHANISM, NOT A SECOND ONE: the same `czMarquee`
   keyframe, the same two-copy track with the gap carried INSIDE a copy so the stride closes the loop exactly, the same pause on
   `:focus-within`, and the same `prefers-reduced-motion` stop. A marquee needs the content
   twice or it jumps when it wraps; the duplicate carries `aria-hidden="true"` so a screen
   reader does not read every review twice.

   THE SPEED IS COPIED AS A RATE, NOT AS A DURATION. The partner rail travels 1,404px in
   46s — about 30.5px/s. Half of the reviews track is 1,120px, so 36s is 31.1px/s — the same
   perceived speed instead of a second arbitrary number (R82.6).

   DESKTOP IS UNTOUCHED: the duplicate is `display: none` above 600px and the track adds no
   layout there, so the approved grid of four renders exactly as before — asserted, not
   assumed. */

.cz-voices__wall--dup { display: none; }

@media (max-width: 600px) {
  .cz-voices__track {
    overflow: hidden;
    /* B385: a `position: static` scroll container propagates its scrollable overflow to the
       viewport in Chrome, which is what let a reader scroll 11,164px past the footer on
       `/business-activities/`. Under `prefers-reduced-motion` this track becomes a real
       `overflow-x: auto` scroller, so it is contained here rather than after somebody finds it.
       Measured before it was added: this track has 0 absolutely-positioned descendants, so the
       declaration cannot move anything — it is a guard, not a change. */
    position: relative;
    /* The rail bleeds past the container gutter so a card is always entering frame. */
    margin-inline: calc(var(--cz-gutter, 16px) * -1);
    padding-inline: var(--cz-gutter, 16px);
  }

  /* ---- THE SEAM: A HALF-TRACK TRANSLATE NEEDS THE GAP INSIDE A COPY ----
     Two copies of width `a` with a gap `g` between them make a track of `2a + g`. The keyframe
     travels `a + g / 2`; the distance that puts copy B where copy A was is `a + g`. A gap
     BETWEEN the copies therefore undershoots by `g / 2` every cycle.

     Measured in the page at 375: with `gap: 16px` the stride read 1,120 against a half-track of
     1,112 — an 8px backward hiccup once per 36s. `.cz-credentials__marquee` has no gap at all
     (`normal`, stride 1,404 === half of 2,808, seam 0) because its spacing lives inside
     `.cz-credentials__list`. This is that mechanism, not a second one: the gap moves onto the
     copy as trailing padding below, so a copy is 1,120px including its own trailing space. */
  .cz-voices__marquee {
    display: flex;
    gap: 0;
    width: max-content;
    animation: czMarquee 36s linear infinite;
  }

  /* A marquee that cannot be stopped cannot be read (R16). Hover cannot fire on a phone,
     so focus is the one handle a reader has — and it is the handle the partner rail uses. */
  .cz-voices__track:focus-within .cz-voices__marquee { animation-play-state: paused; }

  .cz-voices__wall--dup { display: grid; }

  .cz-voices__wall {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 264px;
    gap: 16px;
    margin: 0;
    /* The trailing 16px is the gap that used to sit between the two copies. Carrying it on the
       copy is what makes the stride equal half the track, so the loop closes exactly, and it
       keeps the rhythm across the join identical to the rhythm inside a copy. */
    padding: 0 16px 0 0;
    overflow: visible;
  }

  .cz-voices__wall > .cz-quote { margin: 0; }

  @media (prefers-reduced-motion: reduce) {
    .cz-voices__marquee { animation: none; }
    /* With the animation stopped the second copy is dead weight, exactly as it is on the
       partner rail, and a still marquee must stay operable — so it becomes a scroller. */
    .cz-voices__wall--dup { display: none; }
    .cz-voices__track { overflow-x: auto; overscroll-behavior-x: contain; }
  }
}


/* ================================================================================
   ONGOING SUPPORT, REDESIGNED FOR THE PHONE — HIS INSTRUCTION, 8 OCTOBER 2026

   *"I think the biggest mistake of yours was to make this whole section scrollable
   slide in mobile view. Instead for mobile view, You could have specially
   redeigned, restructure, remake that whole section in new style to fit, render and
   look good properly, with professional allignment and renderness in mobile view.
   Only mobile view. Complete redesign of that section."*

   AND THE RAIL WAS WORSE THAN ITS HEIGHT FIGURE SUGGESTED. Measured at 375 first:

     the four bands      ALL 897px — one grid row, so the three short bands stretched
                         to the tallest. Two hold a single item and carried ~600px of
                         empty card each. The rail did not only move height sideways.
     `.cz-band__label`   140px for one sentence.
     `.cz-band__note`    FIVE LINES in a 113px column, and UPPERCASE — it inherits
                         `text-transform` from the label's flex row, which reads as a
                         label on a wide desktop line and as a caps block in a 264px
                         card. That is what his screenshot is pointing at.
     `.cz-cap`           194px, the number on its own row above the name, because the
                         620px rule collapses the item grid to one column.

   THE REDESIGN IS A GROUPED LIST, NOT A SMALLER RAIL. Three moves:

     1. The band head is one row of pill and one row of sentence-case note:
        140 -> 91px, five caps lines -> one or two. The 26px rule before the pill is
        dropped at this width so the pill and the note share the container's own left
        edge — a horizontal rule is a horizontal-row device, and here it indented
        row 1 by 37px against row 2.
     2. The number hangs in its own column again, as it does at desktop, so the name,
        the description and the authority line share ONE text edge. 194 -> 138px.
     3. `tabular-nums` on the number. Without it the nine items' text edges measured
        58.55 / 59.94 / 60.48 / 60.83 / 60.94 / 60.98 / 61.09 / 61.26 / 61.44 — a
        2.9px rag down the list, because an `auto` column sizes itself to each pair of
        digits. With it every number is 17.68px and every edge is 60.48px. One edge,
        from a typographic property rather than a tuned pixel (R82.6).

   WHAT IT COSTS, SAID RATHER THAN HIDDEN: 1,637px -> 2,649px at 375. Deleting the
   rail and nothing else would have given 2,808px, so this is 159px shorter than the
   naive un-railing and 1,012px taller than the rail. He made that call in plain
   words, and nothing is put behind a tap — the one move that would buy the height
   back, and one this project has already judged (B382).

   DESKTOP IS NOT TOUCHED: every rule is inside `max-width: 600px`, appended at the
   END of the sheet because a media query carries no specificity of its own, only
   order does (B316). The same digit rag exists at desktop inside each card;
   reported, not changed, because he has approved that surface (R82.4).
   ================================================================================ */

@media (max-width: 600px) {

  /* Four groups have to read as four groups once they are stacked. The band already
     draws its own top hairline; this is the air above it. */
  .cz-band + .cz-band { margin-top: 18px; }

  /* ---- THE BAND HEAD: the pill on its own row, the note under it in sentences ---- */
  .cz-band__label { flex-wrap: wrap; gap: 0; }
  .cz-band__label::before { display: none; }
  .cz-band__tag { margin-left: 0; }
  .cz-band__note {
    flex: 0 0 100%;
    max-width: none;
    margin: 8px 0 13px;
    font-size: 13px;
    line-height: 1.55;
    /* Three properties are inherited from `.cz-band__label`, and all three are right for
       four uppercase characters on a desktop row and wrong for a forty-character sentence
       on a phone. Measured: the label is .18em / 800 / uppercase, and the section's own
       prose — `.cz-support__lead` and `.cz-cap__desc` — is normal / 400 / none. These are
       those values, so no new constant is introduced here (R82.6). */
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
  }

  /* ---- THE ITEM: the number hangs, everything else on one text edge ----
     The 620px block above collapses this grid to one column and sends the number to
     its own row; these rules come later in the sheet, so they win on order at <=600. */
  .cz-cap {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
  }
  .cz-cap__n {
    /* Three text rows at this width — name, description, authority line. */
    grid-row: 1 / span 3;
    padding-top: 2px;
    font-variant-numeric: tabular-nums;
  }
  .cz-cap__name,
  .cz-cap__desc,
  .cz-cap__ref { grid-column: 2; }
  .cz-cap__ref { margin-top: 6px; }
}


/* ================================================================================
   THE HERO ON A PHONE — HIS FOUR INSTRUCTIONS, 8 OCTOBER 2026

   *"Now for hero banner in mobile view, (I repeat only for mobile view), remove this
   text "ConsultZone structures company formation, licensing, visas, approvals and
   banking into one carefully managed route — so your business begins on solid
   ground.", And Make the text "Build in the UAE. Move with clarity." and the 2
   buttons "book a consultation" and "find your activity" smaller., And left allign
   those buttons."*

   MEASURED AT 375 BEFORE ANY OF THIS WAS WRITTEN:

     `.hero h1`        40.52px, two lines, 84px
     `.hero-summary`   15px, FOUR lines, 97px, plus a 19px margin
     `.hero-actions`   a one-column grid, so each button is 343px — the full width
     `.hero .button`   343 x 48 with `justify-content: center`, so both labels sat in
                       the middle of a full-width plate. That is the alignment he means.
     `.hero-copy`      437px inside a 585px hero

   AND THE ONE THAT TOOK A SECOND LOOK: setting `width: auto` on the buttons changed
   NOTHING. `.hero-actions` carries `flex-direction: column` with `align-items:
   stretch` from an older mobile rule, and stretch on a column flex container works on
   the CROSS axis — it is what forced each button to 343px. The direction and the
   alignment had to move with the width. `row` + `wrap` rather than `column`, so they
   stack at their own widths here and sit side by side on a wider phone with no second
   rule.

   AFTER: h1 33.02px (still two lines, on his own <br>) · buttons 223 and 176 wide,
   44 tall, both starting at x=16 · copy block 437 -> 298px.

   44px is the house tap-target floor, so "smaller" stops exactly where the
   accessibility rule starts rather than at a number somebody picked; the 12px label
   is kept because R7's text floor is 12px.

   THE SUMMARY IS HIDDEN HERE, NOT DELETED. R88.9 is "when he says remove, delete the
   markup", and it was given about rows he wanted gone everywhere. He scoped this one
   himself and said it twice in one sentence — *"in mobile view, (I repeat only for
   mobile view)"* — so deleting would take the sentence off the desktop he has approved
   and out of the markup a search engine reads.

   DESKTOP IS NOT TOUCHED: every rule is inside `max-width: 600px`, appended at the end
   of the sheet because a media query carries no specificity of its own, only order
   does (B316).
   ================================================================================ */

@media (max-width: 600px) {

  /* 1. his first instruction */
  .hero-summary { display: none; }

  /* 2. the headline */
  .hero h1 { font-size: clamp(28px, 8.8vw, 38px); }

  /* 3 and 4. the buttons: content-width, left, and off the 48px plate.
     `flex-direction` and `align-items` are restated deliberately — the older mobile
     rule's `column` + `stretch` is what was making `width: auto` inert. */
  .hero-actions {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
  .hero .button {
    width: auto;
    min-height: 44px;
    padding-inline: 18px;
  }
}


/* ================================================================================
   THE HERO VEIL AND THE POSITIONING BRIEF ON A PHONE — 8 OCTOBER 2026

   *"The text in hero "Dubai · United Arab Emirates" should be on top left. Also the
   hero images in mobile view are not clearly visible. Work on that too."* … *"So for
   mobile view I want you to shorten this text, simplify, and present in
   infographically 2-3 main short bullet points."* … *"NOTE:- WE ARE ONLY WORKING ON
   MOBILE VIEW HERE."*

   1. THE EYEBROW. It was already at x=16, the page's own left edge; what it was not
      was on top. `.hero-inner` is a flex box with `align-items: center` (main.css:1257)
      and 102/34 padding, so the 297.93px copy block sat 75.5px down its 449px content
      box, at y=177.54 of a 585px hero. `flex-start` puts it at 102 — 34px clear of the
      68px fixed header — and turns 177.54/109.54 of air into 0/185.

      That 185px is also half the answer to his second instruction, which is why the
      two arrived in one message: it is the only part of this hero with no text in it,
      and on a 375px screen the copy spans the full width.

   2. THE VEIL. Measured, and he is right. At this width `.hero::before` ran
      .98 / .94 / .68 / .30 / .14 and `.cz-hero-frame` ran .97 / .96 / .94 / .86 / .70,
      both HORIZONTAL. Correct on desktop, where the copy is a 540-620px column and the
      photograph lives in the clear right third. Here the copy is 343.2px — everything
      — so the clear end is behind the text and the dark end is all a reader sees: over
      the .94-.97 stretch the photograph contributes 3-6% of its own light.

      THE NEW NUMBER IS DERIVED, NOT EYEBALLED. Both photographs were drawn into a
      canvas at their real cover scale and background-position, sampled in each text
      element's own band, composited under a candidate veil, and scored against that
      element's own colour and its own WCAG threshold (1st-percentile worst pixel,
      ~4,000 samples per element):

                                       needs    .66    .72    .76    .80   .94 was
        p.eyebrow      gold 12px        4.5     4.77   5.90   6.78   7.76   11.33
        h1             white 33px       3.0     7.42   9.26  10.71  12.35   18.44
        em             gold 33px        3.0     4.52   5.64   6.53   7.53   11.27
        a.button x2    white 12px       4.5     7.15   8.77  10.03  11.43   16.39
        .hero-note sp  white .6 12px    4.5   4.04 X   4.70   5.18   5.69    7.15

      The binding element is the note span, NOT the gold: it is rgba(255,255,255,.6),
      so the ink composites over the background too and dims as the veil lifts. .72 is
      the lowest veil where all seven pass; .80 ships, because its tightest margin is
      1.26x where .72's is 1.04x and 12px antialiased text does not deserve 4%.

      The ramp is VERTICAL here for the reason the measurement gives — the text is
      full-width, so the only thing to clear is the band it vacates. .80 holds to 80%
      (468px) and opens to .12 by 100%, where
      the frame reads at mean .18 / p95 .43 of its own luminance.

      REPORTED, NOT FIXED: dubai-skyline.jpg's bottom third is dark at every crop —
      sampled at eleven pan positions, .052 to .079, and the 69% it already uses is the
      brightest of them. Its light is its sky, which sits behind the headline. So the
      clear band shows the boardroom; the skyline gains its light from the veil
      dropping .94 -> .80 everywhere else. Neither crop is touched.

   3. THE POSITIONING PROSE. 1,609px at 375, the largest unbroken prose block on the
      mobile page. Hidden here, replaced by three items; desktop keeps all four
      paragraphs, so nothing is deleted. Every metric below is `.cz-cap`'s own — the
      pattern the Ongoing Support items on this page already use (R87.5, R82.6) — with
      only the inks changed to the three this light section already carries.

   `.hero::before`'s veil is `!important` at main.css:2738, so the replacement carries
   `!important` at the same specificity and wins on order. `.cz-hero-frame` is in
   hero.css, which loads AFTER main.css, so its veil is replaced there instead.
   ================================================================================ */

/* Desktop shows the four paragraphs; this list renders only on a phone. Declared
   outside the query so the hiding does not depend on one. */
.cz-posbrief { display: none; }

@media (max-width: 600px) {

  /* ---- 1. his first instruction, AND HIS CORRECTION OF MY FIRST ATTEMPT AT IT ----
     *"I said only The text in hero "Dubai · United Arab Emirates" should be on top
     left.. Why did you move all the other text and both buttons?"*

     HIS CORRECTION, SAME DAY: ONLY THE EYEBROW MOVES. The first attempt set
     `align-items: flex-start` here, and `.hero-inner` is the container of ALL of it —
     the headline, both buttons and the two-line note went to the top with the line he
     actually named. A container-level change to move one child is the wrong instrument.

     So `align-items` stays `center` (inherited from main.css:1257, not restated) and the
     eyebrow alone comes out of flow. `.hero-copy` is made static so the eyebrow's
     containing block is `.hero-inner` — anchoring it to `.hero-copy` would put it at the
     copy's own top, which is the middle of the hero. Measured before doing it: nothing
     inside `.hero-copy` is absolutely positioned or carries a z-index, and `.hero-inner`
     already supplies the stacking context that lifts the copy above `.cz-hero-frame`.

     `top: 102px` is `.hero-inner`'s OWN `padding-top` (main.css:1411), not a number
     chosen here — the eyebrow lands on the exact line the copy used to start on, 34px
     clear of the 68px fixed header.

     ONE THING MOVES THAT HE DID NOT NAME, AND IT CANNOT BE HELPED: the rest of the copy
     is ~28px shorter without the eyebrow and its margin, and it is a centred block, so
     it settles ~14px lower. A hard-coded offset to cancel that would drift the first
     time the headline rewraps. */
  .hero-copy { position: static; }
  .hero .eyebrow {
    position: absolute;
    top: 102px;
    left: 0;
  }

  /* ---- 2. the veil over the base photograph, vertical at this width ---- */
  .hero::before {
    background: linear-gradient(180deg,
      rgba(5,6,7,.88) 0%,
      rgba(5,6,7,.80) 16%,
      rgba(5,6,7,.80) 80%,
      rgba(5,6,7,.24) 89%,
      rgba(5,6,7,.12) 100%) !important;
  }

  /* ---- 3. the four paragraphs out, the three items in ---- */
  .cz-positioning__body { display: none; }

  .cz-posbrief {
    display: grid;
    margin: 28px 0 0;
    padding: 22px 0 0;
    border-top: 1px solid var(--cz-line);
    list-style: none;
  }
  .cz-posbrief__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 4px 12px;
    padding: 14px 0;
  }
  .cz-posbrief__item + .cz-posbrief__item { border-top: 1px solid var(--cz-line); }
  .cz-posbrief__n {
    grid-row: 1 / span 2;
    padding-top: 3px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    /* tabular, so 01/02/03 cannot rag the text edge the way the support numerals did */
    font-variant-numeric: tabular-nums;
    color: var(--cz-gold-emph);
  }
  .cz-posbrief__name {
    grid-column: 2;
    margin: 0;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.015em;
    color: var(--cz-text);
  }
  .cz-posbrief__desc {
    grid-column: 2;
    margin: 0;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--cz-mid);
  }
}


/* ================================================================================
   THE FOUR SPEC LABELS COME OFF THE PHONE — HIS INSTRUCTION, 8 OCTOBER 2026

   *"Also As we know in homepage mainland , freezone amnd offshore got these " BEST
   FOR" "OWNERSHIP" "PREMISES" "CONSIDER". For mobile View I want you to remove
   " BEST FOR" "OWNERSHIP" "PREMISES" "CONSIDER"*

   Three `<dl class="cz-route__specs">`, one per route card, four `<dt>`/`<dd>` pairs
   each. The LABELS go; the twelve values stay.

   MEASURED AT 375 FIRST, AND THROUGH THE CSSOM RATHER THAN BY READING THIS FILE
   (B326) — 11 matching rules, 0 stylesheets skipped:

     `.cz-route__specs`        ONE column here, `gap: 1px`, background
                               rgba(255,255,255,.12), 0.8px border
     `.cz-route__specs > div`  background `--cz-ink`, 11px padding top and bottom
     `.cz-route__specs dt`     12px, 18.6px tall, `margin-bottom: 5px`, gold

   THE FIRST ROW IS WHY THIS IS SAFE. The risk of removing the labels from a
   label/value list is that the values run together; here the 1px grid gap shows the
   container's own background, so every value keeps a hairline above and below it and
   the separation does not depend on the labels at all. Measured, not assumed.

   23.6px comes off each cell (18.6 + 5), four cells a card, 94.4px a card — and the
   rail is `grid-auto-flow: column`, so the three cards share ONE grid row sized by
   the tallest and all three lose the same four labels.

   SCREEN-READER-ONLY RATHER THAN `display: none`, AND THE REASON IS HTML, NOT TASTE.
   A `<dd>` must be associated with a `<dt>`; `display: none` takes the term out of
   the accessibility tree as well as off the screen, leaving twelve values unlabelled
   inside a `<dl>` that no longer describes anything. These four declarations are
   `.cz-sr`'s own (main.css:2975, the treatment the activity register already uses for
   its row labels), so no third mechanism is invented (R87.5). On screen the result is
   identical to deleting them: `position: absolute` takes the label out of flow and the
   cell shrinks to its value plus padding.

   `margin: 0` is restated because `@media (max-width: 600px)` above sets the dt a 5px
   bottom margin; on an out-of-flow box it is inert, and zeroing it says so.

   PHONE ONLY, at the END of the sheet, because a media query carries no specificity of
   its own — only order (B316). The three rules this out-ranks are all
   `.cz-route__specs dt` at (0,1,1): the unconditional one, the 600px margin and the
   900px type size.
   ================================================================================ */

@media (max-width: 600px) {
  .cz-route__specs dt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* =============================================================================
   THE COUNTRY CODE BESIDE THE NUMBER IN THE COMPACT FORMS - 13 October 2026

   His instruction: *"In the whatsapp form, beside phone number field, should be a
   country code field too, like we have in footer form and popup form."*

   `cz_lead_form( compact )` draws the WhatsApp form and the activity guide's side
   form, and both sit in a ONE-COLUMN `.cz-form__grid` - so dropping the picker in
   stacks it above the number, and he said beside. This is the recipe the popup
   already uses at phone width (`.cz-popup__grid > .cz-field--dial`, above): give
   the grid two tracks, span every other field across both, place the pair.

   118px and 10px are the margin form's own values from editorial.css, so no new
   tuned constant enters the project (R82.6). `width: max(100%, 264px)` on the panel
   is the popup's own fix for the same problem - a 118px country list containing a
   search box is unusable, so the panel overhangs its field.

   SPECIFICITY IS (0,3,0) ON PURPOSE. `.cz-guide__form .cz-form__grid` in activity.css
   and `.cz-popup--wa .cz-form__grid` here both declare one column at (0,2,0), and
   activity.css loads after main.css - a tie would have lost on order (B316).
   ============================================================================= */

body .cz-form--compact .cz-form__grid {
  grid-template-columns: minmax(0, 118px) minmax(0, 1fr);
  column-gap: 10px;
}

body .cz-form--compact .cz-form__grid > * {
  grid-column: 1 / -1;
}

body .cz-form--compact .cz-form__grid > .cz-field--dial {
  grid-column: 1;
}

body .cz-form--compact .cz-form__grid > .cz-field--phone {
  grid-column: 2;
}

body .cz-form--compact .cz-dial__panel {
  inset-inline: 0 auto;
  width: max(100%, 264px);
}


/* =============================================================================
   13 OCTOBER 2026 — THE MOBILE HOMEPAGE, ROUND SEVEN. HIS ITEMS 2 TO 5.
   =============================================================================

   Four instructions, all of them scoped by him: *"ONLY CHANGE IN MOBILE VIEW."*
   He said it twice in one message, so every rule below is inside
   `@media (max-width: 600px)` and desktop is asserted unmoved by forcing this
   whole block on in the live page and reading the delta — the proof method
   §7ah §10.4 uses, because a rule that cannot be shown to work is
   indistinguishable from a rule that simply does not match.
   ============================================================================= */

@media (max-width: 600px) {

  /* ---------------------------------------------------------------------------
     HIS ITEM 2 — THE FOUR SPEC BOXES INSIDE EACH ROUTE CARD.

     *"inside those boxes we have 4 black boxes containing some text, in mobile
      view we gonna remove those 4 boxes and text inside it"*

     On 8 October he asked for the four LABELS to go and they became
     screen-reader-only, which kept all twelve values visible (§7ah §15.2). He is
     now asking for the boxes. The markup still ships — desktop shows all twelve
     with their labels and a search engine reads them — but a phone reader does
     not get them, which is what he asked for twice over. What is left on the
     card is its number, its heading, its tag, its lead and its text link.

     THE 8 OCTOBER `.cz-sr` RULE ON THE `<dt>`s IS KEPT ON PURPOSE. It is
     redundant while the list is hidden, and deleting it would mean that if he
     reverses this instruction the labels come back VISIBLE, which is not the
     state he approved. The two rules belong together.

     MEASURED BEFORE: three cards, four boxes each, 491.9px of spec list per card
     inside an 799.3px card, in one grid row sized by its tallest item — so all
     three cards lose the same height and the section falls once, not three times
     (B410). */
  .cz-route__specs { display: none; }

  /* ---------------------------------------------------------------------------
     HIS ITEM 3 — THE STACKED TWIN OF THE FORMATION DIAGRAM.

     *"Remove this infographic from mobile view."*

     `.cz-reg__figure` has been `display: none` below 760px since §7q, with this
     stack drawn in its place, so at 600px and under the section now has NO
     diagram at all. That is deliberate and it is his instruction. Between 601
     and 760px the stack still draws, which is why "Trading" was renamed to
     "Launch" in BOTH twins and in the SVG's own `<title>` rather than only in
     the drawing he named — a diagram that disagrees with itself between two
     widths is worse than either version (§7aa, the return arc).

     `.cz-reg__note` IS KEPT AND NOT REWRITTEN. It opens "The gate is the
     difference", which the section's lead sets up in its own words: "A sector
     regulator assesses you first ... and the licence follows its decision". */
  .cz-reg__stack { display: none; }

  /* ===========================================================================
     HIS ITEMS 4 AND 5 — THE COLLAPSIBLE SUBSECTIONS.

     *"The external approvals section should be collapsible and expandible ...
      those are suppose to be collapsed by default in mobile view, and can be
      expanded if any visitor want. ... Same goes for 'ongoing support' section
      ... Make it all look good tho, don't just genericly do stuff. Like a
      proper, smooth, professional, collapting and expanding."*

     ONE MECHANISM FOR BOTH SECTIONS, and the button and the two wrappers are
     built by `assets/js/fold.js` on entering this media query and taken apart on
     leaving it — so above 600px the DOM is byte-for-byte what the template
     printed and the desktop he approved gains no focusable control that does
     nothing there (§7ah §8, where `tabindex` was refused for the same reason).

     EVERY RULE HERE IS GATED BEHIND `html.cz-fold`, WHICH THAT SCRIPT ADDS AFTER
     THE WRAPPERS EXIST. With JavaScript blocked, failed or part-way, nothing is
     hidden and both sections read exactly as the server sent them (R82.3, and
     the `html.cz-reveal` precedent B287 exists to enforce).
     =========================================================================== */

  /* The two wrappers cost nothing above this width: `display: contents` leaves no
     box at all, which is the measurement §7ah §9.5 took for the rail wrappers. */
  .cz-fold__panel,
  .cz-fold__inner { display: contents; }

  .cz-fold [data-cz-fold] { position: relative; }

  /* ---- THE TRIGGER ----
     The head stays visible and IS the control: the heading text is the button's
     accessible name, the sentence under it is tied to the button with
     `aria-describedby`, and a stretched `::after` makes the whole two-row head
     the hit area. Measured at 375: the approvals head is 56px tall and the band
     head 50px, so both clear the 44px floor on their own geometry rather than
     from a `min-height` somebody picked. */
  .cz-fold .cz-fold__head {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    /* THE GAP TO THE BODY MOVES INTO THE BODY, AND THAT IS WHY NOTHING HERE
       TRANSITIONS. Collapsed, there is no body, so the gap under the heading has to
       close with the panel — but the head is a PRE-EXISTING element, so animating
       its margin meant the page settled by 22px over 380ms on every load for no
       reason. Putting the gap on `.cz-fold__inner` instead makes it part of the box
       the panel clips: it disappears with the height for free, one animated property
       instead of two, and nothing is left that can interpolate on load.

       The first version of this rule also read as working when it was not. Four of
       the six folds reported `margin-bottom: 0px` collapsed — and reported 0px
       expanded too, because `.cz-band__label` has no bottom margin of its own. A
       correct value from the wrong cause is not evidence. */
    margin-bottom: 0;
  }

  .cz-fold .cz-fold__btn {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
  }

  /* The hit area covers the heading AND the sentence under it. `inset: -6px` on the
     sides so a thumb landing just outside the text still registers, and the head
     is `position: relative` so this resolves against the head and not the page. */
  .cz-fold .cz-fold__btn::after {
    content: "";
    position: absolute;
    inset: -6px calc(var(--cz-gutter, 16px) * -1);
  }

  /* ---- THE CHEVRON ----
     A child of the HEAD rather than of the button, so the head's own layout places
     it: the approvals head is a grid (a third track below) and the band head is a
     wrapping flex row (`margin-left: auto`). `pointer-events: none` keeps the tap
     on the button's stretched area underneath. */
  .cz-fold .cz-fold__chev {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 100px;
    border: 1px solid rgba(199, 163, 107, .34);
    color: var(--cz-gold);
    pointer-events: none;
    transition: transform .4s var(--cz-ease), border-color .3s var(--cz-ease), background-color .3s var(--cz-ease);
  }
  .cz-fold .cz-fold__chev svg { width: 15px; height: 15px; }

  .cz-fold [data-cz-open="true"] > .cz-fold__head .cz-fold__chev {
    transform: rotate(-180deg);
    border-color: rgba(199, 163, 107, .7);
    background: rgba(199, 163, 107, .12);
  }

  /* A real pressed state, because `-webkit-tap-highlight-color` is transparent and
     a control with no feedback reads as a control that did not fire. */
  .cz-fold .cz-fold__head:active .cz-fold__chev { transform: scale(.9); }
  .cz-fold [data-cz-open="true"] > .cz-fold__head:active .cz-fold__chev { transform: rotate(-180deg) scale(.9); }

  /* ---- THE PANEL ----
     `grid-template-rows: 1fr -> 0fr` is the only way to animate to a height nobody
     has measured, and it needs the single child squashable — hence `min-height: 0`
     and `overflow: hidden` on the INNER wrapper and not on the approvals rail
     itself, which is a horizontal scroller and must keep its own overflow.

     `visibility` CARRIES THE ACCESSIBILITY HALF AND NEEDS NO JAVASCRIPT. On
     closing it is delayed by the length of the height transition, so the panel
     stays visible while it animates and then leaves the accessibility tree and
     the tab order; on opening it flips immediately. A collapsed panel whose
     content is still announced contradicts its own `aria-expanded="false"`. */
  .cz-fold .cz-fold__panel {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows .42s var(--cz-ease), opacity .34s var(--cz-ease), visibility 0s;
  }

  .cz-fold .cz-fold__inner {
    display: block;
    min-height: 0;
    overflow: hidden;
    /* B385: a `position: static` scroll container propagates its scrollable overflow
       to the viewport in Chrome, which is what let a reader scroll 11,164px past the
       footer on `/business-activities/`. This wrapper clips, so it is contained here
       rather than after somebody finds it. Measured: it has 0 absolutely-positioned
       descendants, so the declaration cannot move anything — a guard, not a change. */
    position: relative;
  }

  /* THE HEAD-TO-BODY GAP, on the first child inside the clipped box so it collapses
     height. `clamp(22px, 2.2vw, 34px)` is `.cz-appr-group__head`'s own former
     bottom margin, read off that rule rather than chosen here (R82.6), so the
     expanded group is spaced exactly as it was before the fold existed.

     ON THE CHILD, NOT ON THE BOX, AND THAT IS THE WHOLE DIFFERENCE. Padding on the
     clipped item is part of its minimum size, so `grid-template-rows: 0fr` could not
     take the row below 22px once the open state restored it — measured: a 22px step in
     the first frame of every expand, and the same step snapping on at the END of every
     collapse. A child's MARGIN sets no floor on the row, so both ends animate the whole
     way and nothing here needs a transition of its own. Read before moving it:
     `.cz-rail-hint` is `margin: 0 0 12px` and `.cz-band__rows` is `margin: 0`, so there
     is no top margin being overwritten.

     ONLY THE APPROVALS GROUP NEEDS ONE. `.cz-band__label` has never had a bottom
     margin — its note carries `margin: 8px 0 13px` — so a band needs nothing here
     and a general rule would have invented 22px of air it never had. */
  .cz-fold .cz-appr-group .cz-fold__inner > :first-child { margin-top: clamp(22px, 2.2vw, 34px); }

  /* AND THE PADDING ABOVE HAS TO GO WHILE IT IS COLLAPSED, or the row cannot reach
     zero. `min-height: 0` zeroes a CONTENT box and padding is not content, so a grid
     row at `0fr` still cannot go below the item's 22px of padding — measured: two
     collapsed groups reporting `grid-template-rows: 22px` and a 22px hole under the
     heading, which is the hole the gap was moved here to close.

     IT NEEDS NO TRANSITION OF ITS OWN. The panel animates to a `1fr` that already
     includes this padding and the inner is clipped the whole way, so the flip happens
     inside a box nobody can see into. And the inner is BUILT collapsed, so its first
     computed style is `0` and nothing interpolates on load — which is the property
     that moved this gap off the head to begin with. */
  .cz-fold [data-cz-open="false"] > .cz-fold__panel .cz-fold__inner > :first-child { margin-top: 0; }

  .cz-fold [data-cz-open="false"] > .cz-fold__panel {
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows .38s var(--cz-ease), opacity .2s var(--cz-ease), visibility 0s .38s;
  }

  /* ---- WHERE THE CHEVRON SITS IN EACH HEAD ----
     The approvals head is `grid-template-columns: auto 1fr` with the scope in
     column 1, the gradient hairline in column 2 and the note spanning both. A
     third track takes the chevron; the hairline simply gets shorter by its width
     plus the gap, which is honest layout rather than something floating on top. */
  .cz-fold .cz-appr-group__head { grid-template-columns: auto 1fr auto; }
  .cz-fold .cz-appr-group__head .cz-fold__chev { grid-column: 3; grid-row: 1; }
  .cz-fold .cz-appr-group__head .cz-appr-group__note { grid-column: 1 / -1; }

  /* The band head is a wrapping flex row — the pill on row 1, the sentence on row
     2 at `flex: 0 0 100%` (§7ah §10.2). `margin-left: auto` puts the chevron at the
     end of row 1 beside the pill; `order` is not needed because the chevron is the
     head's last child and the note already forces its own row. */
  /* THE NOTE IS MOVED TO A LATER ORDER GROUP SO THE CHEVRON STAYS ON ROW 1.
     `.cz-band__label` is a wrapping flex row and the note is `flex: 0 0 100%`, so it
     takes a whole line — and the chevron, being the head's LAST child, wrapped PAST it
     onto a third row with a hole beside the sentence. Every geometry row passed on that
     (head 138.73px, hit area covering it, 9 taps of 9 landing); it was visible only by
     looking at the thing.

     `order` ON THE NOTE RATHER THAN ON THE CHEVRON: `order: -1` on the chevron would put
     it BEFORE the pill. Moving the note to group 1 leaves the pill and the chevron
     together in group 0, in DOM order, with the sentence on its own line after them —
     which is the desktop head's arrangement, one row down. The approvals head needs none
     of this because it is a grid and its chevron is placed at `grid-column: 3`. */
  .cz-fold .cz-band__label .cz-fold__chev { margin-left: auto; }
  .cz-fold .cz-band__label .cz-band__note { order: 1; }

  /* ---- THE FOCUS RING GOES ROUND THE HEAD, NOT ROUND THE WORD ----
     The button's text is a few characters inside a pill, so a ring on the button
     alone reads as an artefact. `:has()` is used rather than assumed — its support
     was verified on this project with `CSS.supports('selector(:has(a))')` — and the
     plain ring is switched off only where `:has()` works, so neither browser draws
     two rings and neither draws none. */
  .cz-fold .cz-fold__btn:focus-visible {
    outline: 2px solid var(--cz-gold);
    outline-offset: 3px;
  }

  @supports selector(:has(*)) {
    .cz-fold .cz-fold__btn:focus-visible { outline: 0; }
    .cz-fold .cz-fold__head:has( .cz-fold__btn:focus-visible ) {
      outline: 2px solid var(--cz-gold);
      outline-offset: 5px;
      border-radius: 3px;
    }
  }
}

/* A reader who has asked for less motion gets the same fold, instantly. The state,
   the accessibility half and the chevron's direction are all unaffected — only the
   interpolation goes (R82.2: a guard degrades, it does not delete). */
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  .cz-fold .cz-fold__panel,
  .cz-fold [data-cz-open="false"] > .cz-fold__panel,
  .cz-fold .cz-fold__chev { transition: none; }
}
/* ===================================================================
   THE FINVISORS MARK ON THE HOMEPAGE CAPABILITY CARD · 18 OCT 2026
   ===================================================================

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

   THE PLATE IS FORCED BY THE GROUND, measured not assumed: `.cz-vertical__body` reads
   rgb(5, 6, 7) and this mark's ink is black, so without a light field behind it the
   mark is invisible. Nothing is recoloured or inverted — eight reversed filenames were
   probed on finvisors.ae on 15 October and all eight answered 404 while logo-1.png
   answered 200, so there is no white variant to use instead and the plate does the
   accommodating (the `approvals.php` convention, R18).

   38px TALL: the lockup is three lines, and at 38 its two taglines clear 7px, which is
   at parity with the 8.6px and 7.3px its owner publishes them at. The badge over the
   photograph is 204x36 and stays TEXT for that reason — at badge height the taglines
   land near 4px, under R7's floor (§7ap).

   `width: auto` beside the height for the reason his own 18 October report names: a
   height with an inherited width is exactly how a mark comes to be stretched (B453). */

.cz-vertical__mark {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  margin: 0 0 16px;
  background: #fff;
  border-radius: 6px;
}

.cz-vertical__mark img {
  display: block;
  height: 38px;
  width: auto;
}

@media (max-width: 600px) {
  /* 30px on a 264px rail card, where 156px of mark would otherwise own the top of it.
     Taglines fall to ~6px — below the owner's own presentation, and the honest trade
     against a card that has to carry a heading, a lead and five list items. */
  .cz-vertical__mark { padding: 6px 9px; margin-bottom: 13px; }
  .cz-vertical__mark img { height: 30px; }
}

/* ===================================================================
   THE SWIPE BADGE, IN THE SEAM · 18 OCT 2026
   ===================================================================

   *"you have added this 'swipe' text on top of each swipable boxes, so instead how
   about we add swipe text in a circular or any other suitable shape between boxes, to
   let user know to swipe. Should be interactive, glowy, creative."*

   EVERYTHING HERE IS GATED BEHIND `html.cz-railhint`, which `rail-hint.js` adds LAST,
   after every badge has been placed against its own rail. So a blocked or half-run
   script leaves the label exactly as the server printed it — above its rail, in flow,
   saying Swipe — and this block simply never applies. Visibility first, behaviour
   second (R82.3; html.cz-reveal's precedent is B287).

   IT CARRIES ITS OWN FIELD, and that is not decoration. In flow the label sat on its
   SECTION; in the seam it sits on a CARD, and the five cards measure rgb(5, 6, 7) or a
   radial gradient over dark. The verticals label is the reason this matters most: it
   renders --cz-gold-emph #856527, which against that card's rgb(5, 6, 7) is about
   3.75:1 — under 4.5:1 for 12px type. The pill's own near-opaque ink ground plus
   --cz-gold #c7a36b is the 8.57:1 the other four already measure (§7ah §9.5, B404), so
   the move fixes a contrast the label had rather than inheriting it.

   44px MINIMUM HEIGHT because it is now a control and R7's tap floor applies. It was a
   19px-tall label; a 19px-tall button is not one.

   THE GLOW IS A RING, NOT A FILL. R51 bans a tinted field doing no work, and a halo
   that reads as a button's own light is doing work: it is the only thing that says this
   object is on top of the card rather than in it. */

html.cz-railhint .cz-rail-hint--pinned {
  position: absolute;
  z-index: 3;
  margin: 0;
  transform: translate(-50%, -50%);
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--cz-gold);
  background: rgba(5, 6, 7, .93);
  box-shadow:
    0 0 0 1px rgba(199, 163, 107, .42),
    0 0 20px rgba(199, 163, 107, .34),
    0 14px 30px rgba(0, 0, 0, .52);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .32s ease, transform .32s ease, box-shadow .2s ease;
}

/* The ring that breathes. A separate element rather than an animated box-shadow on the
   badge itself, so the resting shadow above is never what is being interpolated — the
   badge must look identical the moment the animation is stood down. */
html.cz-railhint .cz-rail-hint--pinned::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 1px solid rgba(199, 163, 107, .5);
  opacity: 0;
  pointer-events: none;
}

html.cz-railhint .cz-rail-hint--pinned:active {
  transform: translate(-50%, -50%) scale(.95);
}

html.cz-railhint .cz-rail-hint--pinned:focus-visible {
  outline: 2px solid var(--cz-gold);
  outline-offset: 3px;
}

/* Spent: he has swiped, so it fades and then stops taking taps meant for the card.
   `visibility` is what removes it from the accessibility tree, and it is delayed by the
   fade rather than fired with it, so a reader is not told it has gone mid-animation. */
html.cz-railhint .cz-rail-hint--pinned.is-done {
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  pointer-events: none;
}

html.cz-railhint .cz-rail-hint--spent {
  display: none;
}

@media (prefers-reduced-motion: no-preference) {
  html.cz-railhint .cz-rail-hint--pinned::before {
    animation: cz-railhint-pulse 2.4s ease-out infinite;
  }
}

@keyframes cz-railhint-pulse {
  0%   { opacity: .75; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.28); }
  100% { opacity: 0;   transform: scale(1.28); }
}

/* ===================================================================
   THE PAYMENT ROW · 18 OCT 2026
   ===================================================================

   *"At the very bottom end of footer I want you to add like very small like, we accept
   mastercard, visa, tabby, etc. with logos."*

   R66's THIRD GRANT, AND IT IS AS NARROW AS THE OTHER TWO. Every selector below names
   a class that did not exist before this block, so nothing already in the footer is
   restyled — the point of R92's treatment is that a named grant changes exactly what
   was named. The markup side carries the fingerprints.

   "VERY SMALL" IS HIS WORD AND IT IS THE BRIEF. The label is 11.5px, which is under
   R7's 12px floor for body copy and deliberate: R7 governs text a reader has to READ,
   and this is a caption on a row of marks that carry the meaning themselves — the same
   reading the footer's own 11px legal type already takes. The marks are 20px tall,
   which is where Visa's wordmark stops being legible below.

   THE TILE IS WHITE BECAUSE THE MARKS ARE NOT OURS TO RECOLOUR. Visa ships #1434cb,
   Tabby #292929, Mastercard its three reds and oranges; this bar is ink-dark, so on the
   bare ground two of the three would vanish. No invert(), no brightness() — the plate
   accommodates, exactly as the twelve authority marks on the homepage do (R18). */

.cz-footer__pay {
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.cz-footer__pay-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 16px;
}

.cz-footer__pay-label {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .46);
  white-space: nowrap;
}

.cz-footer__pay-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cz-footer__pay-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 5px 8px;
  background: #fff;
  border-radius: 4px;
}

.cz-footer__pay-tile img {
  display: block;
  height: 20px;
  width: auto;
}

@media (max-width: 600px) {
  /* The label goes above the marks rather than beside them: at 343px a nowrap caption
     plus three tiles is wider than the column, and wrapping the caption itself would
     put two words of 11.5px caps on their own line, which reads as a heading. */
  .cz-footer__pay-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}

/* The journey badge gets the same nudging arrow as the other five. `.cz-rail-hint svg`
   owns that animation and the journey hint is not one, so without this the one rail he
   is most likely to meet first would be the one badge that sits still. */
@media (prefers-reduced-motion: no-preference) {
  html.cz-railhint .cz-journey__hint.cz-rail-hint--pinned svg {
    animation: cz-rail-nudge 1.8s ease-in-out infinite;
  }
}


/* ==========================================================================================
   THE DRAWER'S "BEING WRITTEN" LINE — 18 OCTOBER 2026
   ==========================================================================================
   *"why are the new activty guides not opening. The 'Open the full dossier' button is
   opening popup form."* — a row whose guide is not written now hides the button and shows
   this instead. `.cz-rail__note`'s own type, deliberately without its box: that border
   earns its place round a quotation, and a box round one sentence where a button has just
   gone is a box inside a box (R87.9).
   ========================================================================================== */

.cz-rail__pending {
  margin: 0 0 4px;
  font-size: 13.5px; line-height: 1.66; color: var(--cz-lt);
}


/* ==========================================================================================
   HIS 19 OCTOBER INSTRUCTIONS — THE FINVISORS MARK IN THE BADGE, AND ONE FOOTER BOTTOM ROW

   At the END of the file on purpose. Both rules below override declarations that sit in the
   V9 block at the same (0,1,0) specificity and carry NO `!important` — checked rather than
   assumed, because an `!important` ID rule in that block has quietly defeated a deliberate
   fix once already (B327) — so ORDER decides, and a media query carries none of its own
   (B316).
   ========================================================================================== */

/* ---- 1. THE FINVISORS MARK MOVES INTO THE BADGE ----------------------------------------

   *"remove the finvisors logo from homepage in that section, I told you to remove this text
   'Finvisor capability' and add logo there, not where it is right now."*

   THE MARK IS NOT SHRUNK TO FIT THE PILL — THE PILL BECOMES A PLATE SIZED TO THE MARK. It
   keeps the same 38px it had in the card body (30px on a phone), so moving it costs no
   legibility at all; the dark pill, the gold hairline, the blur and the 100px radius go,
   because a 1198x291 three-line lockup is not a chip of text and should not wear its clothes.

   WHITE IS FORCED RATHER THAN CHOSEN. The mark's ink is black and it now sits over a
   photographic scrim, so without the plate it would disappear — the same fact that put his
   own white wordmark ABOVE the sign-in card rather than inside it (B381, from the other
   direction). No invert(), no brightness(): the plate accommodates, the artwork ships byte
   for byte as its owner publishes it (R18).

   `width: auto` beside the height for the reason his own 18 October report named: a height
   with an inherited width is exactly how a mark comes to be stretched 25% (B453). */

.cz-vertical__badge--mark {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-radius: 6px;
}

/* THE RESET IS THE RULE, NOT THE HEIGHT — AND IT IS A CORRECTION OF WHAT WAS SHIPPED AN HOUR
   EARLIER ON 19 OCTOBER.

   `.cz-vertical__media img` is the CARD PHOTOGRAPH's rule and it reaches any img inside that
   block: `position: absolute; inset: 0; object-fit: cover; transform: scale(1.03)`. The first
   version of this block set only height, width and display, so the mark stayed OUT OF FLOW: the
   badge collapsed to exactly its padding (22x14 = 11+11 by 7+7), the white plate became a 22x14
   chip, the mark painted 136.8px past its right edge, and the media block's `overflow: hidden`
   clipped the last 6.5px of the lockup. The height read 39.1 rather than 38 — 38 x 1.03, the
   photograph's scale, inherited.

   THE PHONE READING SHOWED IT TOO AND IT WAS PASSED: 30.9 is 30 x 1.03, printed beside a ratio of
   4.117 against a file ratio of 4.117. A RATIO IS BLIND TO A UNIFORM TRANSFORM, so the one number
   checked could not have disagreed. What catches it is asking whether the CONTAINER's box matches
   its own content.

   Specificity, counted rather than assumed — `:hover` counts in the class column:
     .cz-vertical__media img                                        (0,1,1)
     .cz-vertical:hover .cz-vertical__media img                     (0,3,1)
     .cz-vertical .cz-vertical__media .cz-vertical__badge--mark img (0,3,1) ties, later, wins
     .cz-vertical:hover ... .cz-vertical__badge--mark img           (0,4,1) strictly higher
   The hover row is written out rather than left to the tie, because a tie won on ORDER is exactly
   what B316 and B327 are about. No `!important`: the rules being answered carry none. */

.cz-vertical .cz-vertical__media .cz-vertical__badge--mark img {
  position: static;          /* back into the flow, so the flex badge sizes to the mark */
  inset: auto;
  transform: none;           /* the photograph's scale(1.03), which stretched 38px to 39.1px */
  transition: none;
  object-fit: fill;          /* the initial value: nothing to crop once the box is at file ratio,
                                and `cover` left here is a trap for whoever changes one dimension */
  display: block;
  height: 38px;
  width: auto;               /* the height drives it; a height with an inherited width is how a
                                mark comes to be stretched 25% (B453, his own report) */
}

.cz-vertical:hover .cz-vertical__media .cz-vertical__badge--mark img { transform: none; }

@media (max-width: 600px) {
  /* 30px on a 264px rail card — the figure the body placement already used, so the phone reading
     does not change either. 123px of mark in a 264px card. Carries the same (0,3,1) shape as the
     reset above, so the photograph's `height: 100%` cannot reach it here either. */
  .cz-vertical__badge--mark { padding: 6px 9px; }
  .cz-vertical .cz-vertical__media .cz-vertical__badge--mark img { height: 30px; }
}

/* ---- 2. ONE FOOTER BOTTOM ROW, AND SMALLER MARKS ---------------------------------------

   *"the logos of visa, mastercard, tabby is too big. Make them small. Also '© 2026
   ConsultZone. All rights reserved. Privacy Policy Terms of Use Site map' should be alligned
   to those logos. Why is it above visa logos? ... should also be in end beside payment
   logos."*

   The legal row forces `justify-content: center` higher up, which was correct while the
   copyright was its ONLY child. With the marks beside it the row has two ends, so the
   modifier — emitted only when there is something to put at the other end — restores the
   `space-between` the base rule already declares. A row told to centre two children is
   exactly what put the copyright on a line of its own. */

/* HIS INSTRUCTION, 19 October, second round: the copyright in the MIDDLE and the payment marks
   on the LEFT, because `.contact-float` is fixed at `right: 22px; bottom: 24px` and its two
   54px buttons cover the bottom-right 76px of every page — so the marks put at the right end
   this morning sat under the phone button. He reported the symptom and the cause together.

   Three tracks rather than `space-between`, and COLUMN 3 IS DELIBERATELY EMPTY: it is what
   centres the copyright against the row and what leaves the fixed buttons sitting over nothing.
   It measures 439px at 1440 and 279px at 1120 against a 76px band, so the clearance is a
   property of the layout and not a number anybody has to keep in step (R82.6). Widening the
   existing `padding-right: 76px` at main.css:4128 would have done the opposite of what he
   asked — padding on one side moves the midpoint off centre.

   `grid-column` only works between siblings, so both children are placed explicitly; the DOM
   order is untouched, and reordering is safe here only because the payment block contains a
   label and three images and nothing focusable. */
.cz-footer__legal--pay .cz-footer__legal-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-content: normal;
}
.cz-footer__legal--pay .cz-footer__pay {
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-start;
}
.cz-footer__legal--pay .cz-footer__rights {
  grid-column: 2;
  grid-row: 1;
  justify-content: center;
}

/* No longer a bar of its own. The border-top and the second `.container` went with the move;
   this element now does the laying out that `.cz-footer__pay-inner` used to. */
.cz-footer__pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  border-top: 0;
}

/* SMALLER, against what he photographed: the tile was a 46px minimum carrying a 20px mark
   and is now 34px carrying 14px — a 30% reduction on the mark and 26% on the plate. 14px is
   the floor rather than a preference: below it the Mastercard circles stop resolving as two
   and Tabby's wordmark stops being a word, and these are other people's trademarks (R18).
   Measured after: the three marks render at 3.077, 1.618 and 2.344 — Visa's 1000/325,
   Mastercard's 1000/618 and Tabby's 75/32 to three decimals, so nothing is stretched. (An
   SVG reports naturalWidth 0, so the stretch test has to compare the rendered box against
   the FILE's ratio; comparing against naturalWidth answers NaN and reads as a failure.)

   THE CAPTION GOES UP, NOT DOWN, AND THE FIRST VERSION OF THIS BLOCK HAD IT WRONG. It was
   set to 10.5px here with a note claiming R7's 12px floor does not apply because a label on
   a row of marks is not reading matter. There was no room argument behind it and there is no
   shortage of room: at 1440 the bottom row is 1374.5px wide, the copyright takes 495.6 and
   the whole payment block 227.2, leaving 651.7px spare, and at 375 the label has its own
   centred row above the marks. The 11.5px it replaced was already under the floor before
   19 October, so the breach is older than this change — but it was deepened by a pixel here,
   and a floor is not a thing to argue past when nothing is pressing on it. 12px. */
.cz-footer__pay-list { gap: 6px; }
.cz-footer__pay-tile { min-width: 34px; padding: 4px 6px; border-radius: 3px; }
.cz-footer__pay-tile img { height: 14px; }
.cz-footer__pay-label { font-size: 12px; letter-spacing: .12em; }

@media (max-width: 1120px) {
  /* Back to the stacked, wrapping flex row the base rule declares — three tracks cannot hold
     a 496px copyright and a 227px payment block below about 1120px, and stacked-and-centred is
     the arrangement already on a phone that he has not objected to. The grid placements are
     released with the display, or they would pin both children into a one-column grid. */
  .cz-footer__legal--pay .cz-footer__legal-inner { display: flex; justify-content: center; }
  .cz-footer__legal--pay .cz-footer__pay,
  .cz-footer__legal--pay .cz-footer__rights { grid-column: auto; grid-row: auto; justify-content: center; }
}

/* NOTE, so nobody hunts for it: the `@media (max-width: 600px)` rule above that put
   `.cz-footer__pay-inner` into a column is now INERT — that element no longer exists in the
   markup. It is left rather than deleted because it is the record of why the caption was put
   above the marks at 343px, and the tiles are small enough now that they share a row. */

/* ===========================================================================================
   ASK AI IN THE MOBILE DRAWER — his instruction, 19 October: "interactive glowy button...
   professional, interactive, highlighting etc. But nothing fancy."

   EVERY METRIC IS `.mobile-contact a`'s OWN, read off that rule rather than chosen here: 48px,
   centred, 12px, .08em, uppercase, the 10px gap and the 23px top margin. Only the colour and
   the glow are new, so nothing can drift from the two buttons directly above it (R82.6).

   THE GLOW IS A `box-shadow` ON THE ELEMENT, not a pseudo-element: the drawer is a fixed panel
   whose children are laid out in flow, and an absolutely-positioned halo inside a link that
   nothing has given `position` to would resolve against whatever ancestor happens to be
   positioned (B385's shape). A shadow needs no containing block at all.

   IT BREATHES SLOWLY AND STOPS ON REQUEST. 3.2s, opacity only, no transform, so nothing moves
   and nothing bounces (R16) — and `prefers-reduced-motion` leaves a static glow rather than
   removing the highlight he asked for (R82.2: a guard degrades, it does not delete).

   Scoped inside the same `max-width: 1020px` band `.mobile-contact` lives in, because
   `.mobile-menu` is `display: none` above it and a rule that cannot apply is a rule nobody has
   checked.
   =========================================================================================== */
@media (max-width: 1020px) {
  .mobile-askai {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 10px;
    min-height: 48px;
    padding-inline: 14px;
    border: 1px solid rgba(199, 163, 107, .55);
    border-radius: 2px;
    background: linear-gradient(135deg, rgba(199, 163, 107, .10), rgba(199, 163, 107, .04));
    color: rgb(222, 196, 152);
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 0 0 1px rgba(199, 163, 107, .12), 0 0 18px -4px rgba(199, 163, 107, .45);
    animation: czAskGlow 3.2s ease-in-out infinite;
  }
  .mobile-askai__mark {
    display: inline-flex;
    align-items: center;
    color: rgb(199, 163, 107);
  }
  .mobile-askai:hover,
  .mobile-askai:focus-visible {
    border-color: rgba(199, 163, 107, .9);
    color: rgb(238, 219, 186);
    box-shadow: 0 0 0 1px rgba(199, 163, 107, .22), 0 0 26px -2px rgba(199, 163, 107, .65);
  }
  .mobile-askai:active { transform: translateY(1px); }
}
@keyframes czAskGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(199, 163, 107, .12), 0 0 14px -5px rgba(199, 163, 107, .38); }
  50%      { box-shadow: 0 0 0 1px rgba(199, 163, 107, .20), 0 0 24px -3px rgba(199, 163, 107, .62); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-askai { animation: none; }
  .mobile-askai:active { transform: none; }
}