/* ===================================================================
   COVERAGE GAZETTEER — "THE MEDALLION INDEX" (FINAL)
   Page-scoped: injected as a <style> block on /locations/ only.
   NOTHING here requires editing tools/css/site.input.css.

   THE ORGANISING DEVICE IS THE SITE'S MEDALLION, AND ONLY THE MEDALLION.
   Two sizes, one role — a STATION ON A ROAD:
     34px  four stations seen together on the contents track (the map)
     48px  one at a time, at the head of a county, where it becomes the
           top of a spine running the length of that chapter to a 12px pip.
   Nothing else in this section is a disc.

   ⛔ THE ONE RULE THAT MAKES THIS WORK
   This page is body.sx-skin. site.input.css:2092 re-declares .ico-badge as
   `border-radius:1rem; border-width:0; background:#E8E6DA; color:#697783`
   and only :2151 (`.ico-badge:has(img)`) restores the disc. A NUMERAL IS
   NOT AN IMG. So .ico-badge must NEVER be put on a numeral on this page —
   it would render as a beige rounded SQUARE with slate ink. The site's own
   numbered medallions (.wwc-med, .rc-num) do not use the class either; they
   re-implement the disc. So does this file, below.
   ⛔ And never put `bg-white` on <section class="gz"> or a .gz-chapter:
   `body.sx-skin main section.bg-white:has(.ico-badge)` (2081) repaints a
   whole section into a dark glass panel.

   COLOUR LAW — measured, sRGB, WCAG 2.x. Obey it or a later edit will
   introduce a silent AA failure:
     TEXT on #fff      #262626 15.13 | ink-80 7.93 | ink-72 6.01 | #697783 4.60
     TEXT on #F9F8F6   #262626 14.40 | ink-80 7.67 | ink-72 5.83
                       ⛔ NOT #697783 (4.33)
     TEXT on #E8E6DA   #262626 10.36 | ink-80 6.20
                       ⛔ NOT #697783 (3.67), ⛔ NOT #678096 (3.28)
     TEXT on #dad6c2   #262626 10.36        TEXT on #FC9700  #1a1a1a 7.87
     GRAPHICS/RULES    #678096 4.11/3.88/3.28 · #697783 4.60/4.33/3.67
                       · #E8E6DA 1px hairline · #FC9700 only at >=2px
   #FC9700 is 2.24:1 on white: NEVER text (including glyphs), NEVER a focus
   ring. #678096 is 4.11:1: rules and bars only, never text.
   INK-STEP LAW: inside ANY cream or beige surface, small UI labels step
   from the .66 rung to the .72 rung. (.66 on cream ~4.5-4.8:1 = fail.)
   GREEN IS GONE. #02be7c appears nowhere in this file.
   =================================================================== */

.gz{
  /* ---- ink ---- */
  --gz-ink:#262626;
  --gz-ink-80:rgba(38,38,38,.80);
  --gz-ink-72:rgba(38,38,38,.72);
  --gz-ink-66:rgba(38,38,38,.66);

  /* ---- rules: three WARM weights replacing three cold greys.
     #E8E6DA on white is 1.25:1; the rgba(38,38,38,.10) it replaces was
     1.27:1 — a like-for-like decorative swap. All of this ruling is
     organisation, carries no information, and 1.4.11 does not apply. */
  --gz-hair:#E8E6DA;                  /* between rows, between columns   */
  --gz-mid:#dad6c2;                   /* grid top, running-head weight   */
  --gz-card-bd:#E7E7E7;               /* = .border-border                */
  --gz-road:rgba(105,119,131,.32);    /* the connected-track hairline    */
  --gz-channel:#F6F3EC;               /* the scored channel it sits in   */

  /* ---- fills ---- */
  --gz-wash:rgba(38,38,38,.045);    /* row hover  -> #ECEAE0           */
  --gz-wash-2:rgba(38,38,38,.022);  /* row focus  -> lighter, so they differ */
  --gz-cream:#dad6c2;
  --gz-beige:#E8E6DA;
  --gz-blue:#678096;
  --gz-slate:#697783;
  --gz-accent:#FC9700;

  /* ---- metrics ---- */
  --gz-row:56px;          /* the one ruling; also clears the 44px target */
  --gz-spine:64px;        /* medallion column AND the body indent        */
  --gz-medl:48px;         /* chapter medallion                          */
  --gz-medc:calc(var(--gz-medl) / 2);
  --gz-mods:34px;         /* contents-track medallion                   */
  --gz-modc:calc(var(--gz-mods) / 2);
  --gz-gut:40px;
  --gz-pc:3.75rem;        /* postcode track — widest real value BN11/TN34 */
  --gz-arrow:1rem;
  --gz-tgap:.625rem;
  --gz-pad:48px;          /* card inner padding */
  --gz-idxpad:1rem;       /* the nav's own vertical padding */
  --gz-idxpx:.75rem;      /* station cell padding-left  — LOCKED to the track */
  --gz-idxpy:.75rem;      /* station cell padding-top   — LOCKED to the track */
  --gz-idxgap:1.5rem;
  --gz-idxcol:calc((100% - 3 * var(--gz-idxgap)) / 4);
  --gz-barh:85px;         /* DERIVED: 1rem + 56px pill row + .75rem + 1px rule */

  /* THE ONLY STICKY OFFSET IN THE SECTION. #inner-header is `fixed z-50`
     and --bs-nav-h is 100/108/164/171/174px (site.input.css:571-576).
     A literal top:0 parks this bar behind an opaque header from lg up.
     NEVER hard-code this value. */
  --gz-stick:calc(var(--bs-nav-h, 100px) + .5rem);
  --gz-ease:cubic-bezier(.4,0,.2,1);
  --gz-ease-out:cubic-bezier(.2,.7,.3,1);   /* == the site's --sx-ease */

  /* THE GROUND. The section also carries the compiled .bg-beige class;
     this restates it so the block is self-sufficient. White card on a
     beige band is the pricing page's own arrangement, and it also fixes a
     real bug: the section that follows .gz is bg-lightgrey, so a #F9F8F6
     ground here ran the two together as one grey band. */
  background-color:#E8E6DA;
  padding:4.5rem 0 5rem;
  color:var(--gz-ink);
  -webkit-font-smoothing:antialiased;
}
.gz *,.gz *::before,.gz *::after{box-sizing:border-box}

.gz .gz-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Neutralise any sitewide heading flourish inside the section. No !important:
   .gz h2::after is (0,1,1) and beats a bare h2::after (0,0,1). NOTE this rule
   is (0,1,1) and .gz .gz-sname::after is (0,2,1), so the running-head hairline
   below is unaffected — and .gz-cname-row is a DIV, so its flourish is too. */
.gz h2::before,.gz h2::after,
.gz h3::before,.gz h3::after{content:none}

/* ---------- THE CARD ----------
   Radius, background, border and shadow ALL come from the compiled classes in
   the markup: `bg-white rounded-2xl shadow-custom border border-border`.
   Nothing below re-declares them, so the sheet inherits the 1rem radius, the
   #E7E7E7 border and — because this page is body.sx-skin — the real
   0 20px 46px -24px rgba(38,38,38,.35) lift.

   ⛔ NOTHING in the ancestor chain (.gz, .container, .gz-sheet) may ever get
   overflow:hidden — position:sticky dies silently if it does. The only two
   uses of overflow:hidden in this file are .gz-plate and .gz-answer, and both
   are SIBLINGS of the sticky bar, never ancestors. Check before adding a third. */
.gz .gz-sheet{max-width:1200px;margin:0 auto;padding:0 var(--gz-pad)}

/* ---------- THE MEDALLION ----------
   Ported verbatim from the site's two existing numbered-medallion components,
   .wwc-med (render_home.py:617) and .rc-num/.rc-fig (render_core.py). Both of
   those re-implement the disc rather than use .ico-badge, for the reason at the
   top of this file, and so does this.

   `0 0 0 4px #fff` IS LOAD-BEARING: it is the knockout slot that cuts the
   connected track and the vertical spine cleanly around every disc. Keep it in
   EVERY state. It assumes the disc sits on #fff — it does, because every
   medallion lives inside the white card. */
.gz .gz-num,
.gz .gz-idx-i i{
  box-sizing:border-box;display:grid;place-items:center;flex:none;
  border-radius:9999px;border:2px solid var(--gz-ink);color:var(--gz-ink);
  background-color:#E8E6DA;
  background-image:linear-gradient(180deg,#dad6c2 0%,#E8E6DA 58%,#F6F3EC 100%);
  box-shadow:inset 0 2px 3px rgba(38,38,38,.30),
             inset 0 -2px 2px rgba(255,255,255,.90),
             0 1px 0 rgba(255,255,255,.90),
             0 0 0 4px #fff;
  font-style:normal;font-weight:700;line-height:1;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;
  text-shadow:0 1px 0 rgba(255,255,255,.70);
  -webkit-user-select:none;user-select:none;
  transition:box-shadow 180ms var(--gz-ease),
             background-color 180ms var(--gz-ease),
             color 180ms var(--gz-ease)}

/* ================= 1. MASTHEAD ================= */
/* THE WATERMARK lives here, as a BACKGROUND LAYER on .gz-mast — the site's
   own logo-row idiom (a faded mark behind prose), delivered the only way it
   can be delivered on this page:
     * .logo-row is unusable — `body.sx-skin .logo-row ~ .logo-row::before
       {display:none}` (site.input.css:2255) is (0,3,2) and this page already
       has a logo-row section at render_locations.py:470, BEFORE .gz. Any
       ::before we wrote would lose the specificity fight and never paint.
     * a pseudo-element could overflow, and overflow:hidden is forbidden here.
   A background CANNOT overflow, CANNOT create a scrollbar, and CANNOT be
   suppressed by that sibling rule. Layer 1 is a white veil painted OVER the
   mark, knocking its ~19% peak alpha back to ~8.5%; text over it sits on an
   effective #F7F6F2, so #262626 reads 14.3:1 and ink-72 reads 5.7:1 — every
   protected value still clears its floor. */
.gz .gz-mast{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) max-content;
  gap:2rem 3rem;align-items:end;padding:3rem 0 2rem;
  background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),
                   url("/images/brand/wolves-watermark-400.webp");
  background-repeat:no-repeat,no-repeat;
  background-position:0 0,left -2.5rem center;
  background-size:auto,17rem auto}
/* the eyebrow is the compiled .loc26-eyebrow (blue 1.75rem x 2px bar,
   .72rem/700/.14em caps, #262626). Only its margin is set here, so the global
   rule stays the single source of truth for the idiom. */
.gz .gz-eyebrow{margin:0 0 .9rem}
.gz .gz-h2{margin:0;font-size:clamp(1.875rem,3.6vw,2.75rem);font-weight:700;
  text-transform:uppercase;letter-spacing:-.02em;line-height:1.04;
  color:var(--gz-ink);max-width:16ch;text-wrap:balance}
/* the site's heading idiom: a coloured emphasis span inside the h2. SLATE, not
   the pricing page's orange — #697783 is 4.60:1 on white, #FC9700 is 2.24:1 and
   may never be text. This is a contrast fact, not a taste call. */
.gz .gz-h2 span{color:var(--gz-slate)}
.gz .gz-stand{margin:1.25rem 0 0;font-size:1.0625rem;line-height:1.6;
  font-weight:400;color:var(--gz-ink-80);max-width:44ch}
/* the credentials become a cream plate — the same cream as the medallion fill
   at .28 (#F5F4EE). INK-STEP LAW: ink .72 on it is 5.49:1; ink .66 would be
   4.49:1 and fail. */
.gz .gz-cred{margin:0;text-align:right;font-size:.6875rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gz-ink-72);
  line-height:1;font-variant-numeric:tabular-nums;
  background:rgba(218,214,194,.28);border:1px solid var(--gz-hair);
  border-radius:1rem;padding:.35rem 1.15rem}
.gz .gz-cred span{display:block;padding:.6rem 0;
  box-shadow:inset 0 -1px 0 0 var(--gz-hair)}
/* ⛔ THE ONLY POSITIONAL SELECTOR IN THIS FILE. It is in the MASTHEAD, which
   the finder never touches. Do NOT carry this pattern below the sub-groups. */
.gz .gz-cred span:last-child{box-shadow:none}

/* ================= 2. THE PLATE (map as texture, never navigation) =========
   pointer-events:none + tabindex="-1" in the markup make "no map as
   navigation" structural and stop the embed trapping scroll.
   overflow:hidden is SAFE HERE — .gz-plate is a SIBLING of the sticky bar. */
.gz .gz-plate{position:relative;margin:0 0 2rem;height:168px;overflow:hidden;
  background:#fff;border:1px solid var(--gz-card-bd);border-radius:.875rem}
.gz .gz-plate iframe{display:block;width:100%;height:100%;border:0;
  filter:grayscale(1) contrast(.94);opacity:.62;pointer-events:none}
/* CREAM scrim, not white — the map then sits inside the warm palette instead
   of being a cold grey rectangle in a warm card. */
.gz .gz-plate::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(232,230,218,.88) 0%,
    rgba(232,230,218,.30) 46%,rgba(232,230,218,.02) 100%)}
.gz .gz-plate-cap{position:absolute;z-index:2;left:1.25rem;bottom:1rem;
  margin:0;font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gz-ink)}

/* ================= 3. THE CONTENTS TRACK =================
   Four numbered medallions on ONE connected hairline — the site's "road to
   your quote" component, at index scale.

   FILTER SAFETY: the track and its channel are ONE pseudo-element on the
   <nav>, not one per item, so nothing can orphan. The finder never sets
   display:none on a .gz-idx-i (it toggles .is-void and aria-current only), and
   there is no positional selector here — a single drawn line needs no end-cap.

   ⛔ GEOMETRY LOCK: the track's ends are computed from --gz-idxpx / --gz-idxpy
   / --gz-idxpad / --gz-modc. If you change a station's padding you MUST change
   them here in the same commit, in this block AND in the <=660px block. This is
   also why the hover ring below is a box-shadow and not a border: a border
   would add 1px to every one of those sums. */
.gz .gz-idx{position:relative;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gz-idxgap);
  padding:var(--gz-idxpad) 0;
  border-top:1px solid var(--gz-hair);border-bottom:1px solid var(--gz-hair)}
/* THE ROAD. A 6px scored cream channel with the slate hairline painted INSIDE
   it as a gradient stop — one box, the two weights the site's own road uses.
   It runs centre-of-station-1 to centre-of-station-4; each medallion's 4px
   white knockout cuts it. `right` is exact calc, never a percentage: a column
   is (100% - 3 gaps)/4, so the distance from the right edge back to station 4's
   centre is one column minus the cell's left padding minus half a medallion. */
.gz .gz-idx::before{content:"";position:absolute;z-index:0;
  top:calc(var(--gz-idxpad) + var(--gz-idxpy) + var(--gz-modc) - 3px);
  left:calc(var(--gz-idxpx) + var(--gz-modc));
  right:calc(var(--gz-idxcol) - var(--gz-idxpx) - var(--gz-modc));
  height:6px;border-radius:3px;
  background-image:linear-gradient(180deg,
    var(--gz-channel) 0 2px,var(--gz-road) 2px 3px,var(--gz-channel) 3px 6px)}
.gz .gz-idx-i{position:relative;z-index:1;display:block;border:0;
  padding:var(--gz-idxpy) 1.25rem var(--gz-idxpy) var(--gz-idxpx);
  text-decoration:none;border-radius:.75rem;
  /* the site's tile transition list, verbatim (site.input.css:1509) */
  transition:background-color .25s ease,border-color .25s ease,
             transform .25s ease,box-shadow .25s ease}
.gz .gz-idx-i i{width:var(--gz-mods);height:var(--gz-mods);font-size:.9375rem}
.gz .gz-idx-i b{display:block;margin-top:.85rem;font-size:.875rem;
  font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--gz-ink);box-shadow:inset 0 -2px 0 0 transparent;
  transition:box-shadow 160ms var(--gz-ease)}
.gz .gz-idx-i em{display:block;margin-top:.3rem;font-style:normal;
  font-size:.8125rem;font-weight:600;color:var(--gz-ink-66);letter-spacing:.04em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* HOVER = the site's tile idiom: a 2px LIFT plus the soft shadow. The 1px
   hairline that would normally be a border is delivered as a box-shadow ring so
   it takes no layout space and cannot move the track. The disc lifts 2px off
   the road with it; its 4px knockout is deeper than that, so the road stays
   cleanly cut — verified by construction. */
.gz .gz-idx-i:hover{transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(38,38,38,.12),0 0 20px rgba(0,0,0,.05)}
.gz .gz-idx-i:hover b{box-shadow:inset 0 -2px 0 0 var(--gz-mid)}
/* FOCUS is a 3px BLACK outline (15.1:1), painting last, and is visually unlike
   hover (which has no ring of that weight and does lift). */
.gz .gz-idx-i:focus-visible{outline:3px solid var(--gz-ink);outline-offset:2px}
/* CURRENT = an ORANGE ring on the medallion + an ORANGE label underline.
   Orange as a >=2px ring/rule only, never as text. */
.gz .gz-idx-i.is-here i{box-shadow:inset 0 2px 3px rgba(38,38,38,.30),
  inset 0 -2px 2px rgba(255,255,255,.90),0 1px 0 rgba(255,255,255,.90),
  0 0 0 3px var(--gz-accent),0 0 0 7px #fff}
.gz .gz-idx-i.is-here b{box-shadow:inset 0 -2px 0 0 var(--gz-accent)}
/* a county the live filter emptied — the station goes cold. Ink .58 on the
   #F6F3EC fill is ~3.4:1, over the 3:1 a state-bearing graphic needs; the
   struck-through count is what actually carries the meaning, and the cell is
   NEVER dimmed as a whole because it is still a live link. */
.gz .gz-idx-i.is-void i{background-image:none;background-color:var(--gz-channel);
  color:rgba(38,38,38,.58);border-color:rgba(38,38,38,.45);
  text-shadow:none;box-shadow:0 0 0 4px #fff}
.gz .gz-idx-i.is-void em{text-decoration:line-through;text-decoration-thickness:1px}

/* ================= 4. THE FINDER (the ONLY sticky element) =================
   The field is a PILL — the site's control shape. The bar behind it is white
   and INSET to the card's content box (margin:0, no negative margins), because
   a full-bleed white bar inside a rounded, bordered card paints over the card's
   1px border and squares its corners. Nothing is laid out in the horizontal
   padding zone, so an inset bar still occludes everything that scrolls under it.
   There is NO orange in the finder: orange is reserved for ACTION and POSITION,
   and the finder is neither until it produces an answer. */
.gz .gz-bar{position:sticky;top:var(--gz-stick);z-index:12;background:#fff;
  margin:0;padding:1rem 0 .75rem;border-bottom:1px solid var(--gz-hair)}
/* a short fade so rows do not hard-cut at the sticky edge */
.gz .gz-bar::after{content:"";position:absolute;left:0;right:0;top:100%;
  height:14px;pointer-events:none;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,0))}
.gz .gz-bar-in{display:grid;
  grid-template-columns:max-content minmax(12rem,1fr) max-content;
  align-items:center;column-gap:1.25rem;height:var(--gz-row)}
/* max-width:14ch IS LOAD-BEARING: the first grid track is max-content and
   cannot shrink, so an unwrapped label overflows the bar between ~661px and
   ~780px. Do not remove it, and do not put .loc26-eyebrow on this label. */
.gz .gz-lab{font-size:.6875rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gz-ink-66);line-height:1.35;max-width:14ch}
.gz .gz-field-wrap{position:relative;display:block;height:100%;
  background:#F9F8F6;border:1px solid var(--gz-card-bd);border-radius:9999px;
  transition:background-color 160ms var(--gz-ease),
             border-color 160ms var(--gz-ease)}
.gz .gz-field-wrap:hover{background:#fff;border-color:var(--gz-mid)}
/* FOCUS IS UNCONDITIONAL AND IS AN OUTLINE (outlines paint last; an inset ring
   would be overpainted). :focus-within, NOT :has(:focus-visible) — .gz-input
   sets outline:0, so a :has()-gated ring leaves engines without :has() with NO
   focus indicator at all. The cost is that a mouse click also rings the pill.
   That is cosmetic; no ring is an accessibility failure. Hover is a fill and
   border change only, so the two are never confusable. */
.gz .gz-field-wrap:focus-within{background:#fff;border-color:var(--gz-ink);
  outline:3px solid var(--gz-ink);outline-offset:3px}
.gz .gz-mag{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);
  width:1rem;height:1rem;fill:none;stroke:var(--gz-ink-66);stroke-width:2;
  pointer-events:none}
.gz .gz-input{width:100%;height:100%;border:0;border-radius:9999px;
  background:transparent;padding:0 3.25rem 0 3rem;font:inherit;font-size:1.0625rem;
  font-weight:500;color:var(--gz-ink);appearance:none;-webkit-appearance:none}
.gz .gz-input::placeholder{color:var(--gz-ink-66);font-weight:400;opacity:1}
.gz .gz-input::-webkit-search-decoration,
.gz .gz-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.gz .gz-input:focus{outline:0}
/* 44x44. The existing JS sets clear.style.display='block', which would DISCARD
   flex centring — so the glyph is centred with line-height, NOT display:flex.
   Do not "improve" this to a flex box. */
.gz .gz-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  display:none;width:44px;height:44px;padding:0;border:0;border-radius:9999px;
  background:transparent;cursor:pointer;color:var(--gz-ink-66);
  font-size:1.375rem;line-height:44px;text-align:center;
  transition:color 140ms var(--gz-ease),background-color 140ms var(--gz-ease)}
.gz .gz-clear:hover{color:var(--gz-ink);background:var(--gz-wash-2)}
.gz .gz-clear:focus-visible{outline:3px solid var(--gz-ink);outline-offset:-3px}
/* the readout is a cream chip. INK-STEP LAW: ink .72 on rgba(218,214,194,.35)
   over white (#F2F1EA) is 5.34:1; .66 would be 4.37:1 and fail. */
.gz .gz-count{display:flex;align-items:baseline;gap:.3rem;white-space:nowrap;
  padding:.45rem .95rem;border-radius:9999px;background:rgba(218,214,194,.35);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1}
.gz .gz-count:focus{outline:0}
.gz .gz-count:focus-visible{outline:3px solid var(--gz-ink);outline-offset:3px}
.gz .gz-count b{font-size:1.25rem;font-weight:700;color:var(--gz-ink);line-height:1}
.gz .gz-count s{text-decoration:none;font-size:1rem;color:var(--gz-ink-72);line-height:1}
.gz .gz-count i{font-style:normal;font-size:1.25rem;font-weight:400;
  color:var(--gz-ink-72);line-height:1}
.gz .gz-count em{font-style:normal;margin-left:.5rem;font-size:.625rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gz-ink-72)}
/* Barlow's self-hosted subset may not carry tnum; the fixed min-widths mean the
   readout cannot shuffle even if the feature is absent. */
.gz .gz-count b,.gz .gz-count i{min-width:2.4ch;text-align:right}

.gz .gz-legend{margin:1.25rem 0 0;padding-left:var(--gz-spine);font-size:.875rem;
  line-height:1.5;color:var(--gz-ink-66);max-width:52ch}

/* ================= 5. THE ANSWER =================
   A white card in the sheet's shape language with a 4px orange spine on the
   left — the .svcx li::before accent-spine idiom, in orange because this is the
   section's action moment. The shadow is hard-coded (not .shadow-custom) because
   this element is built by JS and cannot carry a Tailwind class; the value is
   the sx-skin one, verified. overflow:hidden lets the spine take the radius and
   is safe — .gz-answer is a SIBLING of the sticky bar. Pseudo-elements survive
   the innerHTML assignment, which only replaces children. */
.gz .gz-answer{display:none;position:relative;overflow:hidden;
  margin:1.75rem 0 0 var(--gz-spine);padding:1.5rem 1.75rem 1.75rem;
  background:#fff;border:1px solid var(--gz-card-bd);border-radius:1rem;
  box-shadow:0 20px 46px -24px rgba(38,38,38,.35)}
.gz .gz-answer::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:4px;background:var(--gz-accent)}
.gz .gz-answer.on{display:block;animation:gz-in 220ms var(--gz-ease-out) both}
@keyframes gz-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.gz .gz-answer h3{margin:0;font-size:1.0625rem;font-weight:700;line-height:1.25;
  color:var(--gz-ink);max-width:46ch}
.gz .gz-answer p{margin:.75rem 0 0;font-size:1.0625rem;line-height:1.6;
  color:var(--gz-ink-80);max-width:46ch}
.gz .gz-answer .gz-sub{margin:.5rem 0 0;font-size:.8125rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gz-ink-66);
  font-variant-numeric:tabular-nums}

/* ---------- BUTTONS: SITE PILLS, NO GREEN ANYWHERE ----------
   ⛔⛔ THE SINGLE BIGGEST TRAP IN THIS FILE. GAZ_CSS is an inline <style> in
   the body, so it beats the linked stylesheet on source order in EVERY
   specificity tie — and `.gz .gz-btn-p` (0,2,0) beats `.button-orange` (0,1,0)
   outright. These three selectors declare LAYOUT ONLY, plus :focus-visible (a
   property .button-orange never declares, so there is no conflict). ONE stray
   background, border, border-radius, color, padding, font or :hover here
   silently kills the brand pill and the page still "looks fine".
   site.input.css:660 (".bsh-cta:hover DELETED — it beat .button-orange:hover on
   source order") and :942 record the last two times this happened on this site.
   DO NOT ADD A :hover TO THESE TWO RULES.
     primary   = .button-orange.btn-cta-orange -> #FC9700 fill, #1a1a1a label
                 (7.87:1), #e08600 on hover (6.24:1)
     secondary = .button-orange                -> #dad6c2 cream, #262626 label
                 (10.36:1), inverts to black on hover
   .button-orange declares no `display` (site.input.css:30/982), so as an <a>
   it computes to inline and vertical metrics collapse. That is all we fix. */
.gz .gz-btn-p,.gz .gz-btn-s{display:inline-flex;align-items:center;
  justify-content:center;min-height:48px;line-height:1.15}
.gz .gz-btn-p:focus-visible,.gz .gz-btn-s:focus-visible{
  outline:3px solid var(--gz-ink);outline-offset:3px}
.gz .gz-btns{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;
  margin-top:1.35rem}

/* ================= 6. CHAPTERS =================
   Each county is one leg of the road: medallion -> spine -> pip. */
.gz .gz-chapter{position:relative;margin:0;padding:3.5rem 0 4rem;
  scroll-margin-top:calc(var(--bs-nav-h, 100px) + var(--gz-barh) + 1.5rem)}
/* THE SPINE — the same two weights as the horizontal road, rotated. It starts
   at the medallion's centre (the disc's own 4px white knockout hides the join)
   and ends exactly at the chapter close, where the pip caps it. `bottom:4rem`
   IS the chapter's own bottom padding, so the spine's end and .gz-term's bottom
   edge are the same line BY CONSTRUCTION, in a chapter of 2 towns or 39.
   ⛔ MAINTENANCE COUPLING: if .gz-chapter{padding:3.5rem 0 4rem} ever changes,
   these two numbers change with it, in the same commit, here AND at <=660px.
   FILTER SAFETY: this is on .gz-chapter, which the finder hides WHOLE. Hiding
   sub-groups only shortens the chapter, and an absolutely-positioned top/bottom
   rule simply re-measures. Nothing per-item, nothing positional. */
.gz .gz-chapter::before{content:"";position:absolute;z-index:0;
  top:calc(3.5rem + .35rem + var(--gz-medc));bottom:4rem;
  left:calc(var(--gz-medc) - 3px);width:6px;border-radius:3px;
  background-image:linear-gradient(90deg,
    var(--gz-channel) 0 2px,var(--gz-road) 2px 3px,var(--gz-channel) 3px 6px)}
.gz .gz-chead{position:relative;z-index:1;display:grid;
  grid-template-columns:var(--gz-spine) minmax(0,1fr);align-items:start}
.gz .gz-num{width:var(--gz-medl);height:var(--gz-medl);font-size:1.25rem;
  justify-self:start;margin-top:.35rem}
/* JS-off acknowledgement when a contents-track link is followed: the station
   lights exactly as the scroll-spy would light it. */
.gz .gz-chapter:target .gz-num{box-shadow:inset 0 2px 3px rgba(38,38,38,.30),
  inset 0 -2px 2px rgba(255,255,255,.90),0 1px 0 rgba(255,255,255,.90),
  0 0 0 3px var(--gz-accent),0 0 0 7px #fff}
/* THE COUNTY RULE. 2px #678096 (4.11:1 — a rule, comfortably over the 3:1 a
   graphic needs), carrying the site's literal signature flourish on its head:
   body.sx-skin main h2.relative::after is a 54px rounded bar in orange
   (site.input.css:1629). Reproduced at the rule's own 2px so the two sit flush,
   and FLAT ORANGE rather than the compiled orange->#F6BB06 gradient, because
   the locked palette reserves #F6BB06 for review stars.
   SAFE: .gz-cname-row is a <div>, so `.gz h2::after{content:none}` above
   cannot reach it. */
.gz .gz-cname-row{position:relative;display:flex;align-items:baseline;
  gap:1.5rem;flex-wrap:wrap;padding-bottom:.85rem;
  border-bottom:2px solid var(--gz-blue)}
.gz .gz-cname-row::after{content:"";position:absolute;left:0;bottom:-2px;
  width:54px;height:2px;border-radius:2px;background:var(--gz-accent)}
.gz .gz-cname{margin:0;font-size:clamp(2rem,4.4vw,3.25rem);font-weight:700;
  text-transform:uppercase;letter-spacing:-.015em;line-height:.94;color:var(--gz-ink)}
.gz .gz-cname a{color:inherit;text-decoration:none;
  box-shadow:inset 0 -3px 0 0 transparent;transition:box-shadow 160ms var(--gz-ease)}
.gz .gz-cname a:hover{box-shadow:inset 0 -3px 0 0 var(--gz-accent)}
.gz .gz-cname a:focus-visible{outline:3px solid var(--gz-ink);outline-offset:4px}
.gz .gz-ccount{margin-left:auto;font-size:.8125rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gz-ink-66);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.gz .gz-cnote{margin:1.25rem 0 0;font-size:1.0625rem;line-height:1.62;
  color:var(--gz-ink-80);max-width:46ch}
.gz .gz-cnote b{color:var(--gz-ink);font-weight:700}
/* The merged Hampshire & Kent chapter has no single hub URL for its h2, so both county
   hubs are linked from the note instead. Without this they drop to a footer link only. */
.gz .gz-cnote a{color:var(--gz-ink);text-decoration:none;font-weight:600;
  box-shadow:inset 0 -2px 0 0 var(--gz-accent);transition:box-shadow 140ms var(--gz-ease)}
.gz .gz-cnote a:hover{box-shadow:inset 0 -4px 0 0 var(--gz-accent)}
.gz .gz-cnote a:focus-visible{outline:3px solid var(--gz-ink);outline-offset:3px}
.gz .gz-body{position:relative;z-index:1;padding-left:var(--gz-spine)}

/* ================= 7. SUB-GROUPS =================
   ⛔ FILTER SAFETY: spacing below this line is UNIFORM. There is NO
   :first-child, :last-child, :nth-child or :last-of-type anywhere from here
   down. The finder sets display:none on individual <li>, on whole .gz-sgroup
   blocks AND on whole .gz-chapter sections (render_locations.py GAZ_JS), so a
   positional selector would silently retarget the moment anything is hidden. */
.gz .gz-sgroup{margin:0;padding-top:2.5rem}
.gz .gz-sname{display:flex;align-items:center;gap:1rem;margin:0 0 .75rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gz-ink-66);line-height:1}
.gz .gz-sname > span{order:1;flex:none}
/* (0,2,1) — outranks the .gz h3::after neutraliser at (0,1,1). */
.gz .gz-sname::after{content:"";order:2;flex:1 1 auto;height:1px;
  background:var(--gz-hair)}
.gz .gz-sname > em{order:3;flex:none;font-style:normal;font-weight:700;
  letter-spacing:.1em;color:var(--gz-ink-66);font-variant-numeric:tabular-nums;
  white-space:nowrap}

/* ================= 8. THE RULED GRID =================
   Only the rule colours warm up; the mechanics are untouched. This is
   deliberate: the site's own ruled field on this very page (the firm-facts
   table, `border border-black/10 rounded-xl overflow-hidden`) rounds at the
   OUTER boundary and never per row. A 65-row index that rounds every row stops
   being a column of aligned names and becomes a bag of chips.

   ⛔ Horizontal ruling is painted on the CONTAINER as a repeating gradient
   locked to --gz-row, never per item. Consequences:
     * a group of 13 in 3 columns leaves 2 blank cells, and those read as unused
       ruled lines, not as a hole;
     * when the finder hides <li>s the grid re-flows, the container height
       shrinks and the gradient re-tiles — no orphaned rules;
     * nothing depends on DOM position surviving a filter.
   background-origin defaults to padding-box, so the gradient starts BELOW the
   1px border-top and line 1 lands at exactly 55-56px.

   Vertical column rules are two absolutely-positioned pseudo-elements.
   Absolutely-positioned children of a grid container are NOT grid items, so
   they take no part in placement. Their x is exact calc, never a percentage:
   `left:33.3333%` is 6.7px off the true gutter centre once column-gap exists. */
.gz .gz-grid{position:relative;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:var(--gz-gut);row-gap:0;grid-auto-rows:var(--gz-row);
  border-top:1px solid var(--gz-mid);
  background-image:repeating-linear-gradient(to bottom,
    rgba(38,38,38,0) 0,
    rgba(38,38,38,0) calc(var(--gz-row) - 1px),
    var(--gz-hair) calc(var(--gz-row) - 1px),
    var(--gz-hair) var(--gz-row));
}
.gz .gz-grid::before,.gz .gz-grid::after{content:"";position:absolute;
  top:0;bottom:0;width:1px;background:var(--gz-hair);pointer-events:none}
.gz .gz-grid::before{left:calc((100% - var(--gz-gut) * 2) / 3
  + var(--gz-gut) / 2 - .5px)}
.gz .gz-grid::after{left:calc(((100% - var(--gz-gut) * 2) / 3) * 2
  + var(--gz-gut) * 1.5 - .5px)}
.gz .gz-grid li{margin:0;padding:0;min-width:0}

/* ================= 9. THE TOWN LINE =================
   THREE tracks, because THE DOTTED LEADER IS GONE (see the spec's kill list).
   The three laid-out children — name, postcode, arrow — map exactly onto them;
   .gz-lead is display:none, so it takes no track. The name track is 1fr, so the
   flexible space that used to carry the leader is simply space, the postcode is
   still hard right, and the ellipsis hazard the 2.5rem floor existed to defend
   against no longer exists to be defended against.

   PAINT ORDER inside .gz-tile, which is why all of these coexist:
     background-color (hover wash)
       -> inset box-shadow (this row's hairline, repainted over the wash)
         -> content
           -> ::before (orange marker, a positioned descendant)
             -> outline (paints LAST — which is why focus is an OUTLINE and
                NOT an inset ring; ::before at left:0 would overpaint a ring).

   ⛔ NO LIFT HERE, and this is the one borrowed idiom deliberately refused.
   These rows sit on a container-painted 56px ruling; a row that translates off
   its own rule reads as a rendering fault. The site's OTHER hover idiom is used
   instead — the creme wash of .svc-cards li:hover / .card-hov-creme — in the
   medallion's own #dad6c2 at .50. Measured on that wash: names 12.66:1,
   postcodes 6.96:1, the "Removals" sub-label 5.56:1. The lift lives where it
   belongs: on the four free-standing contents stations and the chapter CTA. */
.gz .gz-tile{position:relative;display:grid;
  grid-template-columns:minmax(0,max-content) minmax(2rem,1fr) var(--gz-pc) var(--gz-arrow);
  column-gap:var(--gz-tgap);align-items:center;
  height:100%;min-height:var(--gz-row);padding:0 .5rem 0 .6rem;
  text-decoration:none;background-color:transparent;
  box-shadow:inset 0 -1px 0 0 var(--gz-hair);
  transition:background-color 140ms var(--gz-ease)}
/* A single hairline, not dots. It connects the name to its figure the way an
   index does, and unlike a dot pattern it cannot collapse into something that
   reads as an ellipsis at any width. Decorative and aria-hidden. */
.gz .gz-lead{display:block;min-width:0;align-self:center;height:1px;margin:0;
  transform:translateY(1px);background:rgba(38,38,38,.13);
  transition:background 140ms var(--gz-ease)}
.gz .gz-tile:hover .gz-lead,.gz .gz-tile:focus-visible .gz-lead{background:rgba(38,38,38,.26)}
.gz .gz-tile::before{content:"";position:absolute;left:0;top:8px;bottom:9px;
  width:3px;border-radius:0 3px 3px 0;background:var(--gz-accent);opacity:0;
  transition:opacity 140ms var(--gz-ease)}
.gz .gz-tile:hover{background-color:var(--gz-wash)}
.gz .gz-tile:hover::before,.gz .gz-tile:focus-visible::before{opacity:1}
/* FOCUS is deliberately unlike HOVER: hover is a warm wash and no ring; focus
   is a 3px black ring (15.1:1) over a LIGHTER wash. */
.gz .gz-tile:focus-visible{outline:3px solid var(--gz-ink);outline-offset:-3px;
  background-color:var(--gz-wash-2)}

/* ⛔ Town names NEVER truncate and NEVER ellipsis. They wrap. Two lines at
   16px/1.2 = 38px, inside the 56px rule, so wrapping is non-destructive at 3
   and 2 columns. At 1 column the rows go auto. */
.gz .gz-name{min-width:0;font-size:1rem;font-weight:600;line-height:1.2;
  letter-spacing:-.005em;color:var(--gz-ink);
  white-space:normal;overflow-wrap:break-word;overflow:visible;text-overflow:clip}
/* The visible "Removals" suffix was REMOVED (owner, 2026-08-19). It rendered the
   anchor text of all 65 links as "{Town} Removals" — the exact pattern withdrawn
   earlier in this project and settled against in the July adjudication at
   render_locations.py:6003. The full name is restored on the <a> via aria-label,
   which is the approved compromise: it is not visible repetition, and Google does
   not read aria-label as anchor text, so it carries no stuffing risk either way.
   The rule below is kept as a no-op guard in case a suffix is ever re-added. */
.gz .gz-name i{display:none}
/* ink .72 on the cream wash is 5.56:1, under its 6.01:1 on-white figure — so
   hover STRENGTHENS the sub-label to .80 (7.10:1 on the wash) rather than
   letting the fill erode a protected value. */
.gz .gz-tile:hover .gz-name i,
.gz .gz-tile:focus-visible .gz-name i{color:var(--gz-ink-80)}
.gz .gz-pc{justify-self:end;text-align:right;white-space:nowrap;
  font-size:.8125rem;font-weight:600;letter-spacing:.05em;color:var(--gz-ink-80);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"lnum" 1;
  transition:color 140ms var(--gz-ease)}
.gz .gz-tile:hover .gz-pc,.gz .gz-tile:focus-visible .gz-pc{color:var(--gz-ink)}
/* the arrow's slot is permanently reserved, so nothing shifts on hover.
   ⛔ INK, NOT ORANGE. This glyph is TEXT; #FC9700 is 2.24:1 on white and the
   shipped build violated its own rule here. */
.gz .gz-ch{justify-self:end;width:var(--gz-arrow);text-align:right;
  font-size:.9375rem;line-height:1;color:var(--gz-ink);
  opacity:0;transform:translateX(-3px);
  transition:opacity 180ms var(--gz-ease-out),transform 180ms var(--gz-ease-out)}
.gz .gz-tile:hover .gz-ch,.gz .gz-tile:focus-visible .gz-ch{opacity:1;transform:none}

/* ================= 10. THE CHAPTER CLOSE =================
   The end of a leg. The spine terminates in a PIP — the medallion reduced to a
   full stop — and the county CTA is the site's cream pill. */
.gz .gz-term{position:relative;display:flex;flex-wrap:wrap;align-items:center;
  gap:1rem 2.5rem;margin:3rem 0 0;padding:1.5rem 0 0;
  border-top:1px solid var(--gz-hair)}
/* absolutely-positioned children of a FLEX container are NOT flex items, so
   this pip cannot join the row. left = 24 - 64 - 6 = -46px, and .gz-term starts
   at +64px inside .gz-body, so the pip lands at x=18..30, centre 24 — dead on
   the spine. bottom:-6px centres it on .gz-term's bottom edge, which is exactly
   where .gz-chapter::before stops. */
.gz .gz-term::before{content:"";position:absolute;
  left:calc(var(--gz-medc) - var(--gz-spine) - 6px);bottom:-6px;
  width:12px;height:12px;border-radius:9999px;
  background:var(--gz-cream);border:2px solid var(--gz-ink);
  box-shadow:0 0 0 4px #fff}
/* LAYOUT ONLY — see the button warning above. This <a> carries .button-orange. */
.gz .gz-term a{display:inline-flex;align-items:center;justify-content:center;
  flex:none;min-height:48px;line-height:1.15}
/* ⛔ THE ONLY :hover ON A BRAND PILL IN THIS FILE, and it declares EXACTLY TWO
   properties — transform and box-shadow — neither of which .button-orange
   declares, so it cannot ambush the pill's fill, border or label. This is the
   site's own .loc26-tile lift. Do not add a third property to this rule. */
.gz .gz-term a:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(0,0,0,.05)}
.gz .gz-term a span{font-size:1.0625rem;line-height:1;margin-left:.55rem;
  transition:transform 180ms var(--gz-ease-out)}
.gz .gz-term a:hover span{transform:translateX(4px)}
.gz .gz-term a:focus-visible{outline:3px solid var(--gz-ink);outline-offset:3px}
.gz .gz-dist{flex:1 1 16rem;min-width:0;margin:0;font-size:.8125rem;line-height:1.45;
  color:var(--gz-ink-66);font-variant-numeric:tabular-nums}
.gz .gz-dist span{display:block;margin-bottom:.15rem;font-size:.625rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gz-ink)}
.gz .gz-term-note{flex:none;font-size:.6875rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gz-ink-66);font-variant-numeric:tabular-nums}

/* ================= 11. THE TWO-TOWN CHAPTER =================
   Explicit placement, NOT auto-flow: the finder can hide .gz-sgroup, and
   auto-placement would then pull .gz-term up into row 1.
   CHANGED FROM `grid-row:1/-1` ON THE DESK: the desk is taller than a two-town
   list, so a row-spanning desk made .gz-body bottom out BELOW .gz-term and the
   spine overran its pip. The desk now takes row 1 / col 2 and the close spans
   the full width of row 2. Placement is still fully explicit, so the original
   requirement (auto-flow must never pull .gz-term into row 1) still holds, and
   .gz-term is now the LAST box in every chapter without exception — the single
   invariant the spine depends on. */
.gz .gz-chapter--edge .gz-body{display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  grid-template-rows:auto auto;column-gap:var(--gz-gut);align-items:start}
.gz .gz-chapter--edge .gz-sgroup{grid-column:1;grid-row:1}
.gz .gz-chapter--edge .gz-desk{grid-column:2;grid-row:1;align-self:start}
.gz .gz-chapter--edge .gz-term{grid-column:1 / -1;grid-row:2}
.gz .gz-chapter--edge .gz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.gz .gz-chapter--edge .gz-grid::before{left:calc(50% - .5px)}
.gz .gz-chapter--edge .gz-grid::after{display:none}
/* the desk is a beige CARD, not a beige slab. On #E8E6DA: body copy and the
   .loc26-eyebrow caps 10.36:1, the eyebrow's #678096 bar 3.28:1 (a graphic),
   ink-80 6.20:1. ⛔ #697783 is 3.67:1 on this surface and is NEVER text here. */
.gz .gz-desk{margin-top:2.5rem;padding:1.5rem 1.5rem 1.75rem;
  background:var(--gz-beige);border:1px solid var(--gz-cream);border-radius:1rem;
  box-shadow:0 20px 46px -24px rgba(38,38,38,.20)}
.gz .gz-desk .gz-eyebrow{margin:0 0 .9rem}
.gz .gz-desk-line{margin:0 0 1.1rem;font-size:1rem;line-height:1.55;color:var(--gz-ink)}
.gz .gz-desk .gz-btns{margin-top:0}

/* ================= 12. EMPTY STATE ================= */
.gz .gz-empty{display:none;margin:1.75rem 0 0 var(--gz-spine);
  padding:1.75rem;background:#F9F8F6;border:1px solid var(--gz-card-bd);
  border-radius:1rem}
.gz .gz-empty.on{display:block}
/* ⛔ ink .72, not .66 — #697783 and the .66 rung both fail on #F9F8F6. */
.gz .gz-empty p{margin:0 0 1rem;font-size:1.0625rem;line-height:1.6;
  color:var(--gz-ink-80);max-width:48ch}
.gz .gz-empty strong{color:var(--gz-ink);font-weight:700}
.gz .gz-empty .gz-btns{margin-top:0}

/* ================= 13. FILTERING STATE =================
   .is-filtering is set on the .gz root while the query is non-empty. Two
   results stranded across three ruled columns is the exact moment a finder
   stops feeling attended-to, so the index narrows to one column around the
   question and the decorative plate steps out of the way.
   BORDER AUDIT (do this for every display:none you add): .gz-plate is a
   self-contained bordered card with its own 2rem bottom margin — nothing else
   relies on it for a border, a radius or a shadow edge. Safe to hide. */
.gz.is-filtering .gz-plate{display:none}
.gz.is-filtering .gz-grid{grid-template-columns:minmax(0,1fr);max-width:34rem}
.gz.is-filtering .gz-grid::before,
.gz.is-filtering .gz-grid::after{display:none}
/* the edge chapter's body flattens to normal flow while filtering, and in DOM
   order the desk is the LAST child — so .gz-term is no longer the bottom box
   and the spine would overrun. Drop the spine and its pip for THAT chapter
   only; the other three keep theirs, because .gz-term is still last in a
   flattened flow. */
.gz.is-filtering .gz-chapter--edge .gz-body{display:block}
.gz.is-filtering .gz-chapter--edge::before,
.gz.is-filtering .gz-chapter--edge .gz-term::before{display:none}
.gz.is-filtering .gz-desk{margin-top:2.5rem}

/* ================= 14. RESPONSIVE ================= */

/* --- 1024px: 2 columns. Fixed rows and the container ruling are kept —
       raggedness is at most one cell and the measure is generous.
       --gz-medl drops to 42px, so --gz-medc becomes 21px and the spine
       re-derives to left:18px / centre 21px automatically. --- */
@media (max-width:1024px){
  .gz{--gz-gut:32px;--gz-pad:32px;--gz-spine:56px;--gz-medl:42px;
      --gz-mods:32px;--gz-idxgap:1rem;--gz-idxpx:.6rem}
  .gz .gz-mast{background-size:auto,13rem auto;background-position:0 0,left -2rem center}
  .gz .gz-plate{height:144px}
  .gz .gz-num{font-size:1.125rem}
  .gz .gz-idx-i{padding-right:.5rem}
  .gz .gz-idx-i b{font-size:.8125rem;margin-top:.7rem}
  .gz .gz-cname-row{gap:1rem}
  .gz .gz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gz .gz-grid::before{left:calc(50% - .5px)}
  .gz .gz-grid::after{display:none}
  .gz .gz-chapter--edge .gz-body{display:block}
  .gz .gz-chapter--edge::before,
  .gz .gz-chapter--edge .gz-term::before{display:none}
  .gz .gz-desk{margin-top:2.5rem}
  .gz .gz-cred{text-align:left}
}

/* --- 660px: ONE column. The container ruling is switched OFF and every
       hairline comes from the tile's own inset shadow, because rows now grow to
       fit a wrapped name. Raggedness cannot exist at 1 column, so nothing is
       lost. The bar goes STATIC: a sticky control under a ~108px header on a
       short phone viewport is not calm. THE ROAD ROTATES rather than
       disappearing — four stations stacked with the channel running down
       through their knockouts, the site's own vertical-timeline shape. --- */
@media (max-width:660px){
  .gz{--gz-spine:0px;--gz-gut:0px;--gz-pad:20px;--gz-mods:34px;--gz-medl:40px;
      --gz-idxpad:1.5rem;--gz-idxpx:.75rem;padding:2.5rem 0 3rem}
  .gz .gz-mast{grid-template-columns:minmax(0,1fr);gap:1.5rem;padding:2rem 0 1.5rem;
    background-size:auto,11rem auto;background-position:0 0,left -2rem center}
  .gz .gz-h2{max-width:none}
  .gz .gz-cred{text-align:left;padding:.35rem 1rem}
  .gz .gz-plate{height:120px}

  .gz .gz-idx{grid-template-columns:minmax(0,1fr);grid-auto-rows:56px;column-gap:0}
  /* rows are a fixed 56px here and the disc is align-self:center, so the disc
     centre is 28px into each row and both ends of the channel are exact.
     ⛔ assumes grid-auto-rows:56px AND exactly four items — a fifth county
     needs both numbers re-derived. */
  .gz .gz-idx::before{top:calc(var(--gz-idxpad) + 28px - 3px);
    height:calc(100% - 2 * var(--gz-idxpad) - 56px);
    left:calc(var(--gz-idxpx) + var(--gz-modc) - 3px);right:auto;width:6px;
    background-image:linear-gradient(90deg,
      var(--gz-channel) 0 2px,var(--gz-road) 2px 3px,var(--gz-channel) 3px 6px)}
  .gz .gz-idx-i{display:grid;grid-template-columns:var(--gz-mods) minmax(0,1fr);
    grid-template-rows:auto auto;column-gap:1rem;align-content:center;
    padding:0 var(--gz-idxpx);min-height:56px}
  .gz .gz-idx-i i{grid-column:1;grid-row:1 / span 2;align-self:center}
  .gz .gz-idx-i b{grid-column:2;grid-row:1;margin-top:0}
  .gz .gz-idx-i em{grid-column:2;grid-row:2;margin-top:.15rem}

  .gz .gz-bar{position:static}
  .gz .gz-bar::after{display:none}
  .gz .gz-bar-in{grid-template-columns:minmax(0,1fr);height:auto;row-gap:.7rem}
  .gz .gz-lab{max-width:none}
  .gz .gz-field-wrap{height:52px}
  .gz .gz-count{justify-self:start}
  .gz .gz-legend,.gz .gz-body{padding-left:0}
  .gz .gz-answer,.gz .gz-empty{margin-left:0}
  .gz .gz-answer{padding:1.35rem 1.25rem 1.5rem}

  .gz .gz-chapter{padding:2.5rem 0 3rem}
  /* no spine on a phone: the body is no longer indented, so there is no column
     for it to live in. The medallion still heads every county. */
  .gz .gz-chapter::before,.gz .gz-term::before{display:none}
  .gz .gz-chead{grid-template-columns:minmax(0,1fr);gap:.9rem}
  .gz .gz-num{margin-top:0;font-size:1.0625rem}
  .gz .gz-ccount{margin-left:0;width:100%}
  .gz .gz-grid,
  .gz .gz-chapter--edge .gz-grid,
  .gz.is-filtering .gz-grid{grid-template-columns:minmax(0,1fr);max-width:none;
    grid-auto-rows:minmax(var(--gz-row),auto);background-image:none}
  .gz .gz-grid::before,.gz .gz-grid::after{display:none}
  .gz .gz-tile{padding:.5rem .5rem .5rem .6rem;align-items:center}
  .gz .gz-term{flex-direction:column;align-items:flex-start;gap:1rem}
  /* ⛔ MOBILE FIX (measured at 320/360/390): flex-basis resolves against the
     MAIN axis, so `flex:1 1 16rem` from the row layout became a 256px minimum
     HEIGHT once the close flipped to column — a dead gap between the districts
     and the phone number. .gz-dist MUST be flex:0 1 auto here. */
  .gz .gz-dist{flex:0 1 auto;width:100%}
  .gz .gz-term-note{flex:0 1 auto}
  /* the plate is only 120px tall here and the caption wraps to two lines, so a
     left-to-right scrim leaves it on top of the map labels. Fade bottom-upward
     instead: the caption always lands on near-solid cream. */
  .gz .gz-plate::after{background:linear-gradient(180deg,
    rgba(232,230,218,.26) 0%,rgba(232,230,218,.52) 42%,rgba(232,230,218,.97) 100%)}
  .gz .gz-plate-cap{right:1.25rem;bottom:.75rem;line-height:1.35}
  /* ⛔ MOBILE FIX (measured at 320/360/390): the running head's `> span` is
     flex:none in the base rule and cannot shrink. "Horsham, Mid Sussex and the
     Gatwick corridor" is 337px wide in a 288px column — it overflowed and
     pushed the count clean off-screen. Give the name its own line; the rule and
     the count share the next. .gz-sname MUST be allowed to wrap. */
  .gz .gz-sname{flex-wrap:wrap;row-gap:.4rem}
  .gz .gz-sname > span{flex:1 1 100%;min-width:0}
  .gz .gz-sname::after{flex:1 1 2rem;min-width:1.5rem}
}

/* --- 380px: tighten the tracks only. "Removals" stays VISIBLE — hiding it
       would change the accessible name of all 65 links. --- */
@media (max-width:380px){
  .gz{--gz-pc:3.5rem;--gz-arrow:.875rem;--gz-tgap:.5rem;--gz-mods:30px}
  .gz .gz-h2{font-size:1.625rem}
  .gz .gz-name{font-size:.9375rem}
  .gz .gz-name i{display:block;margin-left:0;margin-top:.15rem}
  .gz .gz-plate{height:104px}
  .gz .gz-idx-i i{font-size:.875rem}
  .gz .gz-input{padding:0 3rem 0 2.75rem;font-size:1rem}
  .gz .gz-mag{left:1rem}
  .gz .gz-btn-p,.gz .gz-btn-s{width:100%}
}

/* ================= 15. REDUCED MOTION =================
   Every state is carried by colour, weight, border or shadow, so removing all
   movement loses no information. A killed transition-DURATION still leaves the
   killed-to-instant transform in place, which is why the lifts are explicitly
   reset rather than merely un-animated. */
@media (prefers-reduced-motion:reduce){
  .gz *,.gz *::before,.gz *::after{
    transition-duration:1ms!important;animation-duration:1ms!important;
    animation-delay:0ms!important;animation-iteration-count:1!important;
    scroll-behavior:auto!important}
  .gz .gz-idx-i:hover{transform:none}
  .gz .gz-term a:hover{transform:none}
  .gz .gz-ch{opacity:1;transform:none}              /* arrow always present */
  .gz .gz-tile:hover .gz-ch,
  .gz .gz-tile:focus-visible .gz-ch{transform:none}
  .gz .gz-term a:hover span{transform:none}
  .gz .gz-answer.on{animation:none;opacity:1;transform:none}
}

/* ================= 16. FORCED COLOURS =================
   Backgrounds and box-shadows are dropped by the OS, so the medallion, the road
   and the spine are rebuilt out of borders and system colours. */
@media (forced-colors:active){
  .gz .gz-mast{background-image:none}
  .gz .gz-tile:hover,.gz .gz-tile:focus-visible{background:Highlight;color:HighlightText}
  .gz .gz-num,.gz .gz-idx-i i{border:2px solid CanvasText;background:Canvas;color:CanvasText}
  .gz .gz-idx-i.is-here i,.gz .gz-chapter:target .gz-num{
    forced-color-adjust:none;background:Highlight;color:HighlightText;
    border-color:HighlightText}
  .gz .gz-idx::before,.gz .gz-chapter::before{
    background-image:none;background-color:CanvasText}
  .gz .gz-term::before{background:CanvasText;border-color:CanvasText}
  .gz .gz-cname-row::after,.gz .gz-answer::before{background:Highlight}
  .gz .gz-idx-i:hover{box-shadow:none;outline:1px solid CanvasText}
}

/* ================= 17. PRINT =================
   This page gets printed for the office. The card flattens; the road survives
   as outlined discs and a hairline. */
@media print{
  .gz{background:#fff;padding:0}
  .gz .gz-mast{background-image:none;padding:0 0 1.5rem}
  .gz .gz-plate,.gz .gz-bar,.gz .gz-legend,.gz .gz-answer,.gz .gz-empty{display:none}
  .gz .gz-sheet{max-width:none;padding:0;border:0;border-radius:0;box-shadow:none}
  .gz .gz-num,.gz .gz-idx-i i{box-shadow:none;background-image:none;
    background-color:#fff;text-shadow:none;-webkit-print-color-adjust:exact;
    print-color-adjust:exact}
  .gz .gz-chapter::before,.gz .gz-idx::before,.gz .gz-term::before{display:none}
  .gz .gz-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gz .gz-grid::after{display:none}
  .gz .gz-chapter{break-inside:auto;padding:1.5rem 0 2rem}
  .gz .gz-chead{break-after:avoid}
  .gz .gz-ch{display:none}
}

/* ============================================================================
   THE TOWN TILE — FINAL. Page-scoped, all selectors under .gz.
   Appended AFTER sections 9 / 14 / 15 / 16, so it beats them on source order.
   ⛔ Because of that, every shipped rule this block contradicts is re-declared
   here — including the @media 660 / 380 / reduced-motion / forced-colours
   blocks. Media queries carry NO specificity, so an un-re-declared base rule
   below would win at every width. Each one is flagged ⛔RE-DECL.

   ⛔ FILTER LAW (written down so nobody breaks it later):
     - anything spanning more than one tile is painted on the CONTAINER;
     - anything per-tile lives ENTIRELY inside .gz-tile, so it vanishes with
       its own <li>.
   There is no :first-child / :last-child / :nth-child / :nth-of-type anywhere
   in this block, and the 56px ruling stays on .gz-grid. A hidden <li> leaves a
   ruled blank cell exactly as it does today; a hidden .gz-sgroup takes its own
   .gz-grid — and therefore its own ruling — with it. Nothing can orphan.

   ⛔ CONTRAST IS A CONSTRAINT ON THE CARD, NOT JUST ON THE TILE. Every figure
   below assumes the grid sits on the #fff rounded-2xl card. If that card is
   ever warmed, re-derive .gz-pc's ink before shipping.
   ========================================================================== */

.gz{
  /* ---- the chip: a fixed object. Same 50x22 at 1440, at 1024, at 320, in
     every state, for all 65 towns. Nothing about it derives from content —
     that is the ONLY reason the column can be exact. ---- */
  --gz-chip-w:50px;
  --gz-chip-h:22px;
  --gz-chip-r:3px;                 /* 13.6% of height: too small to read as a
                                      pill, too large to read as an artifact  */
  --gz-chip-face:#F6F3EC;          /* the section's own scored-channel cream  */
  --gz-chip-face-on:#E8E6DA;       /* one rung down the same ladder           */
  --gz-chip-seat:#678096;          /* THE BRAND. de-chroma lever, one token:
                                      --gz-chip-seat:rgba(38,38,38,.14)       */
  /* the dish is a CONSTANT ink overlay, not a colour. That is what lets the
     hover deepen the cut by animating background-COLOR only.
     ⛔ never transition background-image between two gradients — engines that
     cannot interpolate snap the fill at 0ms while the shadow still eases. */
  --gz-chip-dish:linear-gradient(180deg,
      rgba(38,38,38,.04) 0%, rgba(38,38,38,0) 62%);

  /* ---- the connective. Ink is a PROPORTION of the rule's own length: the
     image is 200% wide, so the rest state shows stops 0→50% and the engaged
     state shows 50→100%. A 225px rule and a 155px rule therefore carry the
     same weight, and 65 rules of 65 different lengths stop being quantities
     the eye compares. ⛔ DO NOT flatten this to a solid value.
     ⛔ rgba(218,214,194,0), never `transparent` — `transparent` is transparent
     BLACK and interpolating toward it fringes grey. ---- */
  --gz-lead-ink:linear-gradient(90deg,
      rgba(218,214,194,0)    0%,
      rgba(218,214,194,.28) 25%,
      rgba(218,214,194,.55) 50%,   /* rest far end ≈ #EBE9DD ≈ the row ruling */
      rgba(218,214,194,.80) 75%,
      rgba(218,214,194,1)  100%);  /* = #dad6c2, the section's own warm rule  */

  /* ---- tile tracks. MY OWN tokens on purpose: the shipped --gz-pc /
     --gz-tgap / --gz-arrow are re-valued at 380px and would silently desync
     the seam. Nothing in this block reads them. ---- */
  --gz-lead-inset:14px;            /* name → leader                          */
  --gz-arrow-track:1.75rem;        /* 12px gap + 16px glyph, reserved at rest */
  --gz-tile-wash:#F9F8F6;          /* hover ground — WARM. The shipped
                                      --gz-wash is a cool rgba ink and is the
                                      same temperature error this design
                                      removes from the leader.               */
  --gz-tile-press:#F6F3EC;
  --gz-e:cubic-bezier(.4,0,.2,1);
  --gz-eo:cubic-bezier(.2,.7,.3,1);
}

/* ---- THE ROW -------------------------------------------------------------
   column-gap:0 is load-bearing: the leader must TOUCH the chip's side wall,
   so the gaps live on the items and only that one gap is zero. The arrow's
   12px gap lives INSIDE its 28px track for the same reason.
   The hover ground is opaque, which is safe: the tile covers its whole 56px
   band and its own inset hairline re-paints the container's row rule at the
   identical y in the identical colour. ---- */
.gz .gz-tile{position:relative;display:grid;
  grid-template-columns:minmax(0,max-content) minmax(2rem,1fr)
                        var(--gz-chip-w) var(--gz-arrow-track);
  column-gap:0;align-items:center;
  height:100%;min-height:56px;padding:0 .5rem 0 .6rem;
  text-decoration:none;background-color:transparent;
  box-shadow:inset 0 -1px 0 0 #E8E6DA;
  transition:background-color 140ms var(--gz-e)}

/* the #FC9700 bar is retired. Orange is the action colour; 65 orange ticks on
   a coverage index is decoration, and at 2.24:1 it can never carry state. The
   shipped :hover::before / :focus-visible::before rules set opacity only, so
   killing `content` here is sufficient. */
.gz .gz-tile::before{content:none}

/* ---- THE NAME ------------------------------------------------------------
   lh 1.2 → 1.15 and 600 kept: the air is bought in the type, never by touching
   --gz-row. Two lines = 36.8px inside 56px.
   ⛔ overflow-wrap:break-word is MANDATORY. In a minmax(0,max-content) track
   the automatic minimum size is 0, so "Hurstpierpoint" (122px, no hyphen, no
   space) would otherwise overflow into the leader instead of wrapping. ---- */
.gz .gz-name{min-width:0;align-self:center;
  font-size:1rem;font-weight:600;line-height:1.15;letter-spacing:-.005em;
  color:#262626;white-space:normal;overflow-wrap:break-word;word-break:normal;
  overflow:visible;text-overflow:clip}
.gz .gz-name i{display:none}       /* no-op guard: the "Removals" suffix stays
                                      retired even if it is ever re-emitted   */

/* ---- THE CONNECTIVE ------------------------------------------------------
   The lead box is the SAME height as the chip and centred the same way, so the
   two boxes are identical and any sub-pixel row centring applies to both. The
   hairline is then positioned 10px inside that shared box — the pixel directly
   above the chip's centre line, an integer in the chip's own frame, at every
   row height. This is why the rule is decoupled from .gz-name's metrics: a
   font-size change at a breakpoint can no longer move it.
   One continuous line — never dashed, dotted or repeating — so the rejected
   ellipsis-lookalike cannot come back. Minimum visible run is 32px − 14px
   = 18px at the track floor. ---- */
.gz .gz-lead{display:block;min-width:0;align-self:center;
  height:var(--gz-chip-h);margin:0 0 0 var(--gz-lead-inset);
  transform:none;                            /* the shipped translateY(1px) is
                                                gone — it put the rule 1px off
                                                the chip it now meets         */
  background-color:transparent;
  background-image:var(--gz-lead-ink);
  background-repeat:no-repeat;
  background-size:200% 1px;
  background-position:0% 10px;               /* x: the LEFT half. y: fixed.   */
  transition:background-position 220ms var(--gz-eo)}

/* ---- THE INLAY -----------------------------------------------------------
   NOT A BADGE. Four mechanics make it a cut:
     1. the face is DARKER than its ground (#F6F3EC on #fff, 1.11:1);
     2. the dish runs dark→light TOP TO BOTTOM — the axis of a concavity, and
        the same axis as this page's own .gz-num medallion;
     3. the edges are ASYMMETRIC — shadowed top wall, hairline side walls, a
        coloured seat on the floor. A badge has one uniform stroke;
     4. there is NO outer shadow, and both x and y are content-independent.
   padding-left:.06em offsets the content box so the centring cancels the
   trailing letter-space: OPTICAL, not mechanical. ---- */
.gz .gz-pc{box-sizing:border-box;
  justify-self:end;align-self:center;
  display:grid;place-items:center;text-align:center;
  width:var(--gz-chip-w);height:var(--gz-chip-h);
  padding:1px 0 0 .06em;
  border-radius:var(--gz-chip-r);
  background-color:var(--gz-chip-face);
  background-image:var(--gz-chip-dish);
  box-shadow:
    inset 0 1px 1.5px 0 rgba(38,38,38,.13),   /* the top wall, in shadow      */
    inset 0 -1px 0 0 var(--gz-chip-seat),     /* the seat — brand blue        */
    inset 0 0 0 1px rgba(38,38,38,.07);       /* the cut's perimeter          */
  font-size:.8125rem;font-weight:600;line-height:1;letter-spacing:.06em;
  color:rgba(38,38,38,.80);white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;    /* belt AND braces: the shorthand
                                                 alone is unreliable across the
                                                 self-hosted Barlow subsets   */
  transition:background-color 140ms var(--gz-e),
             box-shadow       140ms var(--gz-e),
             color            140ms var(--gz-e)}

/* ---- THE ARROW: the only static link affordance for a non-hovering mouse
   user, and the reason its 28px track is permanently reserved. ---- */
.gz .gz-ch{justify-self:end;align-self:center;
  width:1rem;text-align:right;
  font-size:.9375rem;line-height:1;color:#262626;
  opacity:0;transform:translateX(-3px);
  transition:opacity 180ms var(--gz-eo),transform 180ms var(--gz-eo)}

/* ---- FOCUS ---------------------------------------------------------------
   ⛔ THIS RULE MUST STAY ABOVE :hover. It kills the shipped focus wash
   (--gz-wash-2) at equal specificity (0,3,0), and putting :hover after it
   means a focused-AND-hovered row correctly keeps the hover fill.
   Focus = ring, no wash. Hover = wash, no ring. Two independent axes.
   outline-offset is NEGATIVE because row-gap is 0 — an outside ring would
   straddle the neighbouring rows. Outline still paints last. ---- */
.gz .gz-tile:focus-visible{outline:3px solid #262626;outline-offset:-3px;
  background-color:transparent}

/* ---- HOVER: the material steps one rung down its own ladder. Nothing that
   was not there at rest is added. No lift, no shadow, no ring, no bar. ---- */
.gz .gz-tile:hover{background-color:var(--gz-tile-wash)}

/* ⛔ the shipped rule at :6933 uses the `background` SHORTHAND, which resets
   background-image to none at (0,4,0). The gradient must therefore be
   re-declared here, not just re-positioned. */
.gz .gz-tile:hover .gz-lead,
.gz .gz-tile:focus-visible .gz-lead{
  background-color:transparent;
  background-image:var(--gz-lead-ink);
  background-position:100% 10px}              /* the rule inks up INTO the cut */

/* the chip is never re-coloured, it is CUT DEEPER. Load-bearing: leave it at
   #F6F3EC while the ground warms to #F9F8F6 and the value step collapses —
   hovering a row would erase the design's only material. */
.gz .gz-tile:hover .gz-pc,
.gz .gz-tile:focus-visible .gz-pc{
  background-color:var(--gz-chip-face-on);color:#262626;
  box-shadow:
    inset 0 1px 2px 0 rgba(38,38,38,.20),
    inset 0 -1px 0 0 var(--gz-chip-seat),
    inset 0 0 0 1px rgba(38,38,38,.10)}

.gz .gz-tile:hover .gz-ch,
.gz .gz-tile:focus-visible .gz-ch{opacity:1;transform:none}

/* ---- ACTIVE: the press pushes the inlay further in. (0,4,0) — same as the
   hover rules, so it MUST stay below them. ---- */
.gz .gz-tile:active{background-color:var(--gz-tile-press);
  transition-duration:60ms}
.gz .gz-tile:active .gz-pc{
  box-shadow:
    inset 0 2px 3px 0 rgba(38,38,38,.26),
    inset 0 -1px 0 0 var(--gz-chip-seat),
    inset 0 0 0 1px rgba(38,38,38,.12);
  transition-duration:60ms}

/* ---- RESPONSIVE ----------------------------------------------------------
   GRID CHANGES: NONE. Nothing in this block declares .gz-grid, so the shipped
   3→2→1 column steps, the container ruling, the two gutter rules and their
   switch-off at 660 remain authoritative and untouched.
   ≥1025 — 3 columns. Name box 224px at a 1104px measure, 184px at the 3-column
           pinch, against a 131px longest name ("Shoreham-by-Sea").
   ≤1024 — 2 columns. NOTHING here changes; the leader simply gets longer, and
           because its ink is a proportion of its own length it does not get
           heavier. That is why this treatment needs zero overrides at 1024.
   ---- */

@media (max-width:660px){
  /* 1 column, rows auto, container ruling already off — so each tile's own
     inset bottom hairline becomes the only rule. Filter-safe by construction:
     it is a bottom edge every VISIBLE tile carries, so hidden rows can neither
     orphan nor double it. ⛔RE-DECL of the shipped :7154 padding. */
  .gz .gz-tile{padding:.5rem .5rem .5rem .6rem;align-items:center}
  /* the chip does NOT scale. It is the one invariant across every breakpoint,
     which is what makes the phone the same object as the desktop. */

  /* ⛔ DROP THE ARROW TRACK ON TOUCH. The arrow is opacity:0 at rest and only
     surfaces on :hover / :focus-visible — neither of which a touch device can
     produce. Reserving 1.5-1.75rem for it left a dead strip down the right of
     all 65 rows and held the chip column 28px in from the edge, so the one
     thing that is supposed to be exact did not look exact. Guarded on
     (hover:none) rather than width alone, so a NARROW DESKTOP window keeps its
     arrow and its hover affordance. */
  @media (hover:none){
    .gz .gz-tile{grid-template-columns:minmax(0,max-content) minmax(2rem,1fr)
                                       var(--gz-chip-w)}
    .gz .gz-ch{display:none}
  }
}

@media (max-width:380px){
  /* ⛔RE-DECL of the shipped :7181 --gz-pc / --gz-arrow / --gz-tgap block and
     of .gz-name{font-size:.9375rem}. My tracks do not read those tokens, so
     only these three lines are needed — and the leader needs NO pairing here,
     because it is sized by --gz-chip-h, not by the name's font. */
  .gz{--gz-lead-inset:12px;--gz-arrow-track:1.5rem}
  .gz .gz-name{font-size:.9375rem}
  .gz .gz-name i{display:none}     /* the shipped 380 rule re-shows the suffix */
  /* measured at 320: sheet 280 − 9.6 − 8 − 50 − 24 − 12 = 176px of name box
     against a 123px "Shoreham-by-Sea" at 15px/600. Nothing wraps; if a longer
     name ever does, the row is auto-height here and grows. */
}

/* ---- REDUCED MOTION ------------------------------------------------------
   ⛔RE-DECL: the shipped section-15 block sets .gz .gz-ch{opacity:1} at
   (0,2,0) — my base rule is the same specificity and LATER, so it would win
   and the arrow would vanish for these users. Every state here is carried by
   colour, shadow or border, so removing the movement loses nothing. ---- */
@media (prefers-reduced-motion:reduce){
  .gz .gz-tile,.gz .gz-lead,.gz .gz-pc,.gz .gz-ch{transition:none}
  .gz .gz-ch{opacity:1;transform:none}
  .gz .gz-tile:hover .gz-ch,
  .gz .gz-tile:focus-visible .gz-ch{opacity:1;transform:none}
}

/* ---- FORCED COLOURS ------------------------------------------------------
   The OS drops background-image and box-shadow, so the recess is rebuilt out
   of a BORDER (borders are re-coloured and survive; box-shadows are not).
   box-sizing:border-box keeps the chip at exactly 50x22, so the column holds.
   ⛔RE-DECL: my :hover / :focus-visible rules above are later in source than
   the shipped section-16 Highlight rule and would otherwise beat it — and the
   forced palette would then overwrite #F9F8F6 with Canvas, losing the state
   entirely. ---- */
@media (forced-colors:active){
  .gz .gz-pc{border:1px solid CanvasText;box-shadow:none;
    background-image:none;background-color:Canvas;color:CanvasText}
  .gz .gz-lead{background-image:none;background-color:GrayText;height:1px}
  .gz .gz-tile:hover,.gz .gz-tile:active{background-color:Highlight;
    color:HighlightText}
  .gz .gz-tile:hover .gz-name,.gz .gz-tile:hover .gz-ch{color:HighlightText}
  .gz .gz-tile:hover .gz-pc,.gz .gz-tile:focus-visible .gz-pc,
  .gz .gz-tile:active .gz-pc{background-color:Canvas;color:CanvasText;
    border-color:HighlightText;box-shadow:none}
  .gz .gz-tile:focus-visible{outline-color:Highlight}
}

/* ---- PRINT ---------------------------------------------------------------
   Do not ask a laser printer for a 1.11:1 fill. The material flattens to an
   outlined slot in the page's own warm beige, so the two-part row still reads
   as two parts on paper. ---- */
@media print{
  .gz .gz-tile{background:none;box-shadow:inset 0 -1px 0 0 #dad6c2}
  .gz .gz-lead{background-image:none;background-color:#dad6c2;height:1px}
  .gz .gz-pc{background-image:none;background-color:#fff;box-shadow:none;
    border:1px solid #dad6c2;color:#262626}
  .gz .gz-ch{display:none}
}

/* ---- intro firm-facts plate (scoped .gzi) ---- */
.gzi-plate{background:#F6F3EC;border:1px solid #dad6c2;border-radius:1rem;padding:.35rem 1.35rem;margin:1.75rem 0 .5rem}.gzi-plate dl{display:grid;grid-template-columns:minmax(9rem,auto) minmax(0,1fr);gap:0;margin:0}.gzi-plate dt,.gzi-plate dd{margin:0;padding:.85rem 0;border-bottom:1px solid #E8E6DA}.gzi-plate dt{padding-right:1.75rem;font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(38,38,38,.72);line-height:1.6}.gzi-plate dd{font-size:1rem;font-weight:500;color:#262626;line-height:1.5}.gzi-plate dt:nth-last-of-type(1),.gzi-plate dd:nth-last-of-type(1){border-bottom:0}.gzi-eyebrow{display:flex;align-items:center;gap:.55rem;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#262626;margin:0 0 .55rem}.gzi-eyebrow::before{content:"";display:block;width:1.75rem;height:2px;background:#678096;flex:none}@media (max-width:560px){.gzi-plate dl{grid-template-columns:minmax(0,1fr);gap:0}.gzi-plate dt{padding:.85rem 0 .1rem;border-bottom:0}.gzi-plate dd{padding:0 0 .85rem}}