/* Waterstone Legal — responsive overrides.
   Base design is inline-styled desktop-first; this file only adapts it below 1280px.
   Overrides use [style*=…] + !important to beat inline styles. Desktop ≥1280 unchanged. */

/* ========== Fluid display type (caps at design size ≥1280px) ========== */
[style*="font-size: 95px"]   { font-size: clamp(40px, 7.42vw, 95px) !important; }
[style*="font-size: 92.5px"] { font-size: clamp(39px, 7.23vw, 92.5px) !important; }
[style*="font-size: 89.5px"] { font-size: clamp(39px, 6.99vw, 89.5px) !important; }
[style*="font-size: 87px"]   { font-size: clamp(38px, 6.8vw, 87px) !important; }
[style*="font-size: 84px"]   { font-size: clamp(37px, 6.56vw, 84px) !important; }
[style*="font-size: 81px"]   { font-size: clamp(36px, 6.33vw, 81px) !important; }
[style*="font-size: 76px"]   { font-size: clamp(35px, 5.94vw, 76px) !important; }
[style*="font-size: 70px"]   { font-size: clamp(34px, 5.47vw, 70px) !important; }
[style*="font-size: 63px"]   { font-size: clamp(31px, 4.92vw, 63px) !important; }
[style*="font-size: 60px"]   { font-size: clamp(30px, 4.69vw, 60px) !important; }
[style*="font-size: 57.5px"] { font-size: clamp(29px, 4.49vw, 57.5px) !important; }
[style*="font-size: 47.5px"] { font-size: clamp(28px, 3.71vw, 47.5px) !important; }
[style*="font-size: 46px"]   { font-size: clamp(27px, 3.59vw, 46px) !important; }
[style*="font-size: 45px"]   { font-size: clamp(27px, 3.52vw, 45px) !important; }
[style*="font-size: 41px"]   { font-size: clamp(26px, 3.2vw, 41px) !important; }
[style*="font-size: 38.5px"] { font-size: clamp(25px, 3.01vw, 38.5px) !important; }
[style*="font-size: 37px"]   { font-size: clamp(24px, 2.89vw, 37px) !important; }
[style*="font-size: 36px"]   { font-size: clamp(24px, 2.81vw, 36px) !important; }
[style*="font-size: 34.5px"] { font-size: clamp(23px, 2.7vw, 34.5px) !important; }

/* Safety: root shells must never force horizontal scroll */
[style*="min-width: 1160px"] { min-width: 0 !important; }

/* Form controls never force layout width */
:is(main, section) :is(input, select, textarea) { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* Two-column form grids: clamp tracks so a long <select>'s option text can't blow the
   row out (this scrolled the page sideways at 1280 on Careers, 1100-1160 on Contact).
   Where content already fits, equal tracks render identically. */
:is(main, section) [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }

/* ========== Mobile nav chrome (dormant ≥1161px) ========== */
header:has(.ws-mnav-box) { position: relative; }
.ws-mnav-box { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ws-mnav-btn { display: none; position: absolute; top: 50%; right: 20px; transform: translateY(-50%); width: 48px; height: 48px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 3px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.ws-mnav-btn span { display: block; width: 20px; height: 2px; background: #FFFFFF; border-radius: 2px; }
.ws-mnav-box:focus-visible ~ .ws-mnav-btn { outline: 3px solid #7FCBE4; outline-offset: 2px; }
.ws-mnav-panel { display: none; }

@media (max-width: 1160px) {
  /* Horizontal-overflow backstop. On the page WRAPPER, never on html/body: any
     overflow-x value there makes iOS Safari document-anchor position:fixed
     elements (the mobile menu and offer bar ride away with the scroll), and
     `hidden` additionally coerces overflow-y to auto, making body the scroller
     (iOS then never collapses its toolbar and window.scrollY stays 0, breaking
     in-page anchors). The wrapper holds all page content, so it backstops the
     same overflow; ws.js hoists the fixed elements out to <body>, above the
     clip. `clip` because it crops without creating a scroll container. */
  body > div:first-of-type { overflow-x: clip; }
  .ws-mnav-btn { display: flex; }
  header > div:first-of-type > nav { display: none !important; }
  header > div:first-of-type { padding-right: 88px !important; }
  /* No overflow lock on html/body: both are height:100% here, so `overflow: hidden` clamps
     scrollTop to 0 and the reader loses their place on open. The panel is an opaque
     position:fixed inset:0 overlay, so background scroll is never visible anyway. */

  /* The header's inline z-index:10 caps the panel's stacking context, so the body-level
     offer bar (fixed, z-index 90) paints over the open menu and hides its CTA buttons.
     Lift the header above it only while the menu is open. */
  header:has(.ws-mnav-box:checked) { z-index: 600 !important; }
  /* `.ws-open` is set by ws.js, which hoists the panel to <body> so no
     overflow-clipping ancestor can trap it on iOS; the sibling selector is the
     no-JS fallback while the panel is still the checkbox's sibling. */
  .ws-mnav-box:checked ~ .ws-mnav-panel, .ws-mnav-panel.ws-open { display: flex; position: fixed; inset: 0; z-index: 500; background: #090C0D; flex-direction: column; }
  /* Once ws.js hoists the panel to <body>, the lifted header (600, above) would paint
     its logo + burger on top of the open menu — a second logo beside the panel's own.
     The hoisted panel goes higher still; the 500 above stays for the no-JS sibling case,
     where the panel inherits the header's stacking context and 600 already beats the bar. */
  .ws-mnav-panel.ws-open { z-index: 700; }
  .ws-mnav-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.14); flex-shrink: 0; }
  .ws-mnav-close { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; color: #FFFFFF; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 3px; cursor: pointer; }
  .ws-mnav-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 24px; display: flex; flex-direction: column; }
  .ws-mnav-list > a, .ws-mnav-grp > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 4px; font-size: 20px; font-weight: 600; color: #FFFFFF !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1); cursor: pointer; }
  .ws-mnav-grp > summary { list-style: none; }
  .ws-mnav-grp > summary::-webkit-details-marker { display: none; }
  .ws-mnav-grp > summary::after { content: "+"; font-size: 24px; font-weight: 400; color: #7FCBE4; }
  .ws-mnav-grp[open] > summary::after { content: "\2212"; }
  .ws-mnav-sub { display: flex; flex-direction: column; padding: 2px 0 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
  .ws-mnav-sub a { padding: 12px; font-size: 17.5px; font-weight: 500; color: #DEE4E5 !important; border-radius: 3px; }
  .ws-mnav-sub a:hover { background: rgba(255, 255, 255, 0.07); color: #FFFFFF !important; }
  .ws-mnav-tag { padding: 14px 12px 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: #7FCBE4; }
  .ws-mnav-cta { flex-shrink: 0; padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, 0.14); display: flex; flex-direction: column; gap: 10px; }
  .ws-mnav-enq { display: flex; align-items: center; justify-content: center; min-height: 52px; background: #0F4C5C; color: #FFFFFF !important; font-size: 18px; font-weight: 700; border-radius: 3px; }
  .ws-mnav-enq:hover { background: #16617A; }
  .ws-mnav-tel { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 1px solid rgba(255, 255, 255, 0.45); color: #FFFFFF !important; font-size: 18px; font-weight: 600; border-radius: 3px; }
}
@media (max-width: 900px) {
  /* Header CTA cluster: below this the row can't hold logo + phone + portal + button,
     so keep click-to-call only. Portal + primary CTA live in the mobile panel.
     (Targets everything except tel: because each page's CTA href differs.) */
  header > div:first-of-type > div:last-of-type > *:not([href^="tel:"]) { display: none !important; }
}
@media (max-width: 560px) {
  header > div:first-of-type > div:last-of-type { display: none !important; }
}
@media print {
  .ws-mnav-btn, .ws-mnav-panel, .ws-mnav-box { display: none !important; }
}

/* ========== ≤1024px: splits stack, dense grids loosen ========== */
@media (max-width: 1024px) {
  /* Service-page team photos are 4:3 sources; a fixed 280px height crops heads once
     the grid drops below three columns. Keep the full photo instead. */
  .ws-team-card .ws-team-img { height: auto !important; aspect-ratio: 4 / 3; }
  /* Asymmetric split layouts (heroes, story, process, FAQ, enquiry, banners) → single column */
  :is(main, section) [style*="grid-template-columns: minmax(0px, 1.15fr)"],
  :is(main, section) [style*="grid-template-columns: minmax(0px, 1.1fr)"],
  :is(main, section) [style*="grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr)"],
  :is(main, section) [style*="grid-template-columns: auto minmax(0, 1fr) auto"],
  :is(main, section) [style*="grid-template-columns: minmax(0px, 1.05fr)"],
  :is(main, section) [style*="grid-template-columns: minmax(0px, 1.2fr) auto"],
  :is(main, section) [style*="grid-template-columns: minmax(0px, 0.85fr)"],
  :is(main, section) [style*="grid-template-columns: minmax(0px, 0.95fr)"],
  :is(main, section) [style*="grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr)"],
  /* Same splits on the 2026-08-21 regenerated pages, which drop the px from minmax(0…)
     (about/community 1.15, careers/client-portal 0.85, team 1.05, contact 0.95, blog 1fr 1fr) */
  :is(main, section) [style*="grid-template-columns: minmax(0, 1.15fr)"],
  :is(main, section) [style*="grid-template-columns: minmax(0, 1.05fr)"],
  :is(main, section) [style*="grid-template-columns: minmax(0, 1.2fr) auto"],
  :is(main, section) [style*="grid-template-columns: minmax(0, 0.85fr)"],
  :is(main, section) [style*="grid-template-columns: minmax(0, 0.95fr)"],
  :is(main, section) [style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"],
  :is(main, section) [style*="grid-template-columns: 1.02fr"],
  :is(main, section) [style*="grid-template-columns: 1.1fr 0.9fr"],
  :is(main, section) [style*="grid-template-columns: 1.2fr 0.8fr"],
  :is(main, section) [style*="grid-template-columns: 0.8fr 1.2fr"],
  :is(main, section) [style*="grid-template-columns: 1.4fr 1fr"],
  :is(main, section) [style*="grid-template-columns: 1.5fr auto"],
  :is(main, section) [style*="grid-template-columns: 1.6fr auto"],
  :is(main, section) [style*="grid-template-columns: 1fr 1fr 1fr"],
  :is(main, section) [style*="grid-template-columns: 380px 1fr"],
  :is(main, section) [style*="grid-template-columns: 248px"],
  :is(main, section) [style*="grid-template-columns: 200px"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* Card grids: 4 → 2, 3 → 2, 5 → 3 */
  :is(main, section) [style*="grid-template-columns: repeat(4, 1fr)"],
  :is(main, section) [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  :is(main, section) [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  footer [style*="grid-template-columns"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* Kept two-col grids: clamp track min-content so long selects/text can’t blow them out */
  :is(main, section) [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
  /* Trust-band dividers make no sense once wrapped (colors serialize as rgb on the
     older pages, as hex on the service pages) */
  :is(main, section) [style*="border-left: 1px solid rgb(229, 231, 229)"] { border-left: none !important; padding-left: 0 !important; }
  :is(main, section) [style*="border-left: 1px solid #E5E7E5"] { border-left: none !important; }
  :is(main, section) [style*="border-left: 1px solid #E5E7E5"][style*="padding-left: 40px"] { padding-left: 0 !important; }
  /* Sticky rails stack into the flow */
  :is(main, section) [style*="position: sticky"] { position: static !important; }
  /* Breathing room scales down a step */
  :is(main, section) [style*="padding: 104px"] { padding-top: 72px !important; padding-bottom: 72px !important; }
  :is(main, section) [style*="gap: 80px"] { gap: 44px !important; }
  :is(main, section) [style*="gap: 72px"] { gap: 40px !important; }
  :is(main, section) [style*="gap: 64px"] { gap: 36px !important; }
}

/* ========== ≤720px: single column, tighter rhythm ========== */
@media (max-width: 720px) {
  :is(main, section) [style*="grid-template-columns: 1fr 1fr"]:not([style*="1fr 1fr 1fr"]),
  :is(main, section) [style*="grid-template-columns: repeat(2, 1fr)"],
  :is(main, section) [style*="grid-template-columns: repeat(3, 1fr)"],
  :is(main, section) [style*="grid-template-columns: repeat(4, 1fr)"],
  :is(main, section) [style*="grid-template-columns: minmax(0px, 1fr) 180px"],
  :is(main, section) [style*="grid-template-columns: minmax(0px, 1fr) 240px"],
  :is(main, section) [style*="grid-template-columns: minmax(0, 1fr) 240px"],
  :is(main, section) [style*="grid-template-columns: repeat(auto-fit, minmax(560px, 1fr))"],
  :is(main, section) [style*="grid-template-columns: auto minmax(0px, 1fr) auto"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* Team-page "This could be you." card spans 2 of the desktop grid's 4 columns; in the
     single-column grid above that span drags in a phantom implicit column, and every
     other card lands in a 0px track. */
  :is(main, section) [style*="grid-template-columns: repeat(4, 1fr)"] > [style*="grid-column: span 2"] { grid-column: auto !important; }
  /* Team-page partner cards: the side-by-side photo wraps above the text here; let it
     fill the card instead of stopping at its 245px floor. */
  :is(main, section) img[style*="min-width: 245px"] { width: 100% !important; max-width: none !important; min-width: 0 !important; }
  :is(main, section) [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  footer [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }

  /* Gutters: 40 → 20; section rhythm compresses */
  :is(main, section) [style*="max-width: 1240px"], footer [style*="max-width: 1240px"] { padding-left: 20px !important; padding-right: 20px !important; }
  :is(main, section) [style*="padding: 104px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  :is(main, section) [style*="padding: 96px 40px"] { padding-top: 60px !important; padding-bottom: 60px !important; }
  :is(main, section) [style*="padding: 100px 40px 124px"] { padding-top: 60px !important; padding-bottom: 72px !important; }
  :is(main, section) [style*="padding: 110px 40px"] { padding-top: 64px !important; padding-bottom: 64px !important; }
  :is(main, section) [style*="padding: 130px 40px 170px"] { padding-top: 72px !important; padding-bottom: 96px !important; }
  :is(main, section) [style*="padding: 84px 40px"] { padding-top: 52px !important; padding-bottom: 60px !important; }
  :is(main, section) [style*="padding: 88px 40px"] { padding-top: 56px !important; padding-bottom: 56px !important; }
  :is(main, section) [style*="padding: 80px 40px 0"] { padding-top: 52px !important; }
  :is(main, section) [style*="padding: 0 40px 96px"] { padding-bottom: 60px !important; }
  :is(main, section) [style*="padding: 76px 40px 84px"], :is(main, section) [style*="padding: 72px 40px"] { padding-top: 48px !important; padding-bottom: 56px !important; }
  :is(main, section) [style*="padding: 64px 40px 68px"] { padding-top: 44px !important; padding-bottom: 48px !important; }
  :is(main, section) [style*="padding: 56px 40px 140px"] { padding-top: 40px !important; padding-bottom: 80px !important; }
  :is(main, section) [style*="padding: 40px 40px 104px"] { padding-top: 32px !important; padding-bottom: 60px !important; }
  :is(main, section) [style*="padding: 30px 40px"] { padding-top: 24px !important; padding-bottom: 24px !important; }
  footer [style*="padding: 72px 40px 40px"] { padding-top: 48px !important; padding-bottom: 32px !important; }
  header [style*="padding: 24px 40px"] { padding-top: 14px !important; padding-bottom: 14px !important; padding-left: 20px !important; gap: 16px !important; }
  header > div:first-of-type { padding-right: 76px !important; }
  .ws-mnav-btn { right: 16px; width: 44px; height: 44px; }
  header > div:first-of-type > a img { height: 38px !important; }

  /* Dark feature cards lose their oversized padding */
  :is(main, section) [style*="padding: 56px 64px"] { padding: 32px 22px !important; }
  :is(main, section) [style*="padding: 52px 56px"] { padding: 32px 22px !important; }
  :is(main, section) [style*="padding: 48px 56px"] { padding: 32px 22px !important; }
  :is(main, section) [style*="padding: 38px 40px"] { padding: 26px 20px !important; }
  :is(main, section) [style*="padding: 36px 40px"] { padding: 26px 20px !important; }
  :is(main, section) [style*="padding: 30px 36px"] { padding: 24px 20px !important; }

  /* Gaps compress */
  :is(main, section) [style*="gap: 80px"] { gap: 32px !important; }
  :is(main, section) [style*="gap: 72px"] { gap: 32px !important; }
  :is(main, section) [style*="gap: 64px"] { gap: 28px !important; }
  :is(main, section) [style*="gap: 56px"] { gap: 24px !important; }
  :is(main, section) [style*="gap: 48px"] { gap: 24px !important; }
  footer [style*="gap: 56px"] { gap: 32px !important; }
  footer [style*="gap: 40px"] { gap: 24px !important; }

  /* Rows wrap instead of squeezing; nothing refuses to shrink */
  :is(main, section) div[style*="display: flex"]:not([style*="flex-direction: column"]) { flex-wrap: wrap !important; }
  /* …except icon+text rows (round check/number chips, small badge images): keep the
     icon beside the text and let the text wrap internally instead */
  :is(main, section) div[style*="display: flex"]:has(> span[style*="flex-shrink: 0"][style*="border-radius: 50%"]),
  :is(main, section) div[style*="display: flex"]:has(> img[style*="width: 33px"]),
  :is(main, section) div[style*="display: flex"]:has(> img[style*="width: 36px"]),
  :is(main, section) div[style*="display: flex"]:has(> img[style*="width: 38px"]) { flex-wrap: nowrap !important; }
  :is(main, section) div[style*="flex-shrink: 0"] { flex-shrink: 1 !important; }
  footer div[style*="display: flex"] { flex-wrap: wrap !important; }
  :is(main, section) a[style*="white-space: nowrap"], :is(main, section) span[style*="white-space: nowrap"] { white-space: normal !important; }
  :is(main, section) div[style*="align-items: flex-end"] { align-items: flex-start !important; }
  :is(main, section) div[style*="justify-content: flex-end"] { justify-content: flex-start !important; }
  :is(main, section) div[style*="max-width: 360px"] { max-width: none !important; }

  /* Body copy floor */
  :is(main, section) p[style*="font-size: 24px"] { font-size: 18.5px !important; }
  :is(main, section) p[style*="font-size: 20.5px"] { font-size: 18px !important; }

  /* Imagery: decorative offset frames off; tall slots shorten */
  :is(main, section) div[style*="top: 26px; left: 26px"],
  :is(main, section) div[style*="top: 22px; left: 22px"] { display: none !important; }
  :is(main, section) [style*="height: 580px"] { height: min(92vw, 440px) !important; }
  :is(main, section) [style*="height: 560px"] { height: min(90vw, 430px) !important; }
  :is(main, section) [style*="height: 520px"] { height: min(88vw, 420px) !important; }
  :is(main, section) [style*="height: 460px"] { height: min(82vw, 400px) !important; }
  :is(main, section) img[style*="width: 180px"][style*="border-radius: 50%"] { width: 120px !important; height: 120px !important; }
  :is(main, section) img { max-width: 100%; }
  footer img { max-width: 100%; }

  /* Team cards: hover overlay becomes the card body (no hover on touch) */
  .ws-team-more { position: static !important; opacity: 1 !important; pointer-events: auto !important; }
  /* Footer legal line: centred, with the copyright on its own line at the very bottom */
  footer [style*="border-top: 1px solid rgba(246, 250, 252, 0.12)"] { flex-direction: column !important; align-items: center !important; text-align: center; gap: 14px !important; }
  .ws-team-foot { display: none !important; }
  .ws-team-card .ws-team-img, .ws-team-card:hover .ws-team-img, .ws-team-card:focus-within .ws-team-img { filter: none !important; transform: none !important; }
}

/* ========== ≤480px: full-width primary CTAs ========== */
@media (max-width: 480px) {
  :is(main, section) a[style*="padding: 16px 28px"], :is(main, section) a[style*="padding: 15px 26px"] { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; }
  :is(main, section) [style*="grid-template-columns: 96px 1fr"] { grid-template-columns: 72px 1fr !important; }
  /* 5-card bands: two-up is too cramped on a phone */
  :is(main, section) [style*="grid-template-columns: repeat(5, 1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ========== Homepage full-bleed splits & bands ========== */
@media (max-width: 1024px) {
  section[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  section img[style*="min-height: 580px"] { min-height: 0 !important; height: 380px !important; }
  :is(main, section) [style*="padding: 110px 90px"] { padding: 72px 40px !important; }
}
@media (max-width: 720px) {
  section img[style*="min-height: 580px"] { height: 300px !important; }
  :is(main, section) [style*="padding: 110px 90px"] { padding: 52px 20px !important; }
  :is(main, section) [style*="padding: 120px 48px"] { padding: 64px 20px 72px !important; }
  :is(main, section) [style*="padding: 108px 48px"] { padding: 60px 20px !important; }
  :is(main, section) [style*="padding: 100px 48px 0"] { padding: 60px 20px 0 !important; }
  :is(main, section) [style*="max-width: 1120px"], :is(main, section) [style*="max-width: 1000px"], :is(main, section) [style*="max-width: 860px"] { padding-left: 20px !important; padding-right: 20px !important; }
  :is(main, section) [style*="gap: 58px 72px"] { gap: 36px !important; }
  :is(main, section) [style*="gap: 70px"] { gap: 40px !important; }
  :is(main, section) [style*="padding: 48px 0 100px"] { padding: 32px 0 64px !important; }
}

/* ========== Fee tables: reflow to label-over-figures ≤720 ========== */
@media (max-width: 720px) {
  :is(main, section) [style*="minmax(0px, 1fr) 130px 110px 140px"],
  :is(main, section) [style*="minmax(0px, 1fr) 170px 150px 150px"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px 10px !important; padding-left: 16px !important; padding-right: 16px !important; }
  :is(main, section) [style*="minmax(0px, 1fr) 130px 110px 140px"] > :first-child,
  :is(main, section) [style*="minmax(0px, 1fr) 170px 150px 150px"] > :first-child { grid-column: 1 / -1; }
  :is(main, section) [style*="220px minmax(0px, 1fr)"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 4px 10px !important; padding-left: 16px !important; padding-right: 16px !important; }
  :is(main, section) [style*="220px minmax(0px, 1fr)"] > :first-child,
  :is(main, section) [style*="220px minmax(0px, 1fr)"] > :nth-child(2) { grid-column: 1 / -1; }
  /* Regenerated fees page: hourly-rates table (who / excl. VAT / incl. VAT) */
  :is(main, section) [style*="minmax(0, 1fr) 170px 190px"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px 10px !important; padding-left: 16px !important; padding-right: 16px !important; }
  :is(main, section) [style*="minmax(0, 1fr) 170px 190px"] > :first-child { grid-column: 1 / -1; }
  /* Inline email-capture rows stretch, then stack (rows only — never column form fields) */
  :is(main, section) div[style*="display: flex"]:not([style*="flex-direction: column"]):has(> input[type="email"]) { flex-wrap: wrap !important; min-width: 0 !important; }
  :is(main, section) div[style*="display: flex"]:not([style*="flex-direction: column"]) > input[type="email"] { flex: 1 1 140px !important; }
}
@media (max-width: 480px) {
  :is(main, section) div[style*="display: flex"]:not([style*="flex-direction: column"]) > input[type="email"] { flex: 1 1 100% !important; }
  :is(main, section) div[style*="display: flex"]:not([style*="flex-direction: column"]):has(> input[type="email"]) > button { flex: 1 1 auto; }
}

/* ========== 5-track step timelines (step / wait-marker / step / …) ========== */
@media (max-width: 1024px) {
  :is(main, section) [style*="grid-template-columns: 1fr auto 1fr auto 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  /* the even children are the between-steps markers: turn the vertical divider into a band */
  :is(main, section) [style*="grid-template-columns: 1fr auto 1fr auto 1fr"] > :nth-child(2n) {
    border-left: none !important; border-right: none !important;
    border-top: 1px solid rgb(229, 231, 229) !important; border-bottom: 1px solid rgb(229, 231, 229) !important;
    padding: 14px 26px !important; flex-direction: row !important; align-items: baseline !important;
    justify-content: flex-start !important; gap: 9px !important;
  }
}

/* ========== Masonry review wall: 3 CSS columns are unusable narrow ========== */
@media (max-width: 1024px) {
  :is(main, section) [style*="column-count: 3"] { column-count: 2 !important; }
}
@media (max-width: 720px) {
  :is(main, section) [style*="column-count: 3"] { column-count: 1 !important; column-gap: 0 !important; }
}

/* ========== Numbered step rows: trailing pill cluster drops below the label ========== */
@media (max-width: 720px) {
  :is(main, section) [style*="grid-template-columns: 44px 1fr auto"] { grid-template-columns: 44px minmax(0, 1fr) !important; gap: 14px 16px !important; padding-left: 20px !important; padding-right: 20px !important; }
  :is(main, section) [style*="grid-template-columns: 44px 1fr auto"] > :last-child { grid-column: 2 / -1; }
  :is(main, section) [style*="grid-template-columns: 44px 1fr"]:not([style*="1fr auto"]) { gap: 14px !important; }
}

/* ========== Offer ticker (top bar) ==========
   The ticker carries real class names (ws-offerbar-*), so nothing here needs
   to string-match inline styles. */
@media (max-width: 900px) {
  .ws-offerbar-pill { display: none !important; }
}
@media (max-width: 720px) {
  .ws-offerbar > div { gap: 10px !important; padding: 7px 6px 7px 12px !important; }
  .ws-offerbar-msg { font-size: 13.5px !important; }
  .ws-offerbar a { font-size: 13.5px !important; padding: 8px 13px !important; }
}

/* ========== Small-type floor: nothing under 12px on a phone or portrait tablet ========== */
@media (max-width: 900px) {
  [style*="font-size: 10px"],
  [style*="font-size: 10.5px"],
  [style*="font-size: 11px"],
  [style*="font-size: 11.5px"] { font-size: 12px !important; }
  [style*="font-size: 10px"][style*="letter-spacing: 0.18em"],
  [style*="font-size: 10.5px"][style*="letter-spacing: 0.12em"],
  [style*="font-size: 11.5px"][style*="letter-spacing: 0.14em"] { letter-spacing: 0.05em !important; }
}

/* ========== Touch targets ==========
   Standalone text links get a 44px hit box via vertical padding. On an inline anchor
   padding grows the hit/paint area without moving a single line of layout; on a flex
   child it adds real height, which is what we want there too. */
@media (max-width: 900px) {
  :is(main, section, nav) :is(div, h2, h3, h4, dd, td) > a:not([style*="padding"]):not([style*="display"]):not([style*="position"]) {
    padding-top: 12px; padding-bottom: 12px;
  }
  :is(main, section) input[type="checkbox"] { width: 22px !important; height: 22px !important; flex-shrink: 0; }
  :is(main, section) :is(a, button)[style*="padding: 7px 14px"] { padding-top: 11px !important; padding-bottom: 11px !important; }
  :is(main, section) :is(a, button)[style*="padding: 10px 20px"] { padding-top: 13px !important; padding-bottom: 13px !important; }
  .ws-offerbar button { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
}
@media (max-width: 1160px) {
  header > div:first-of-type > div:last-of-type > a[href^="tel:"] { padding-top: 12px; padding-bottom: 12px; }
}
