/* ==========================================================================
   WEBTALES — fixes.css

   UI/UX bug-report remediation (report dated 2026-09-07, 110 items).
   Loaded AFTER main.css so these rules win without editing the base file.
   Every block is tagged with the bug number(s) it closes.

   Three root causes account for roughly half the report:

   R1  content-visibility / contain-intrinsic-size:auto 900px on every
       section reserved a 900px placeholder for off-screen sections. On
       mobile that renders as huge blank gaps, white strips and jumping
       scroll. Neutralised in section R1.
   R2  The inlined critical CSS carried a bare h1{color:#fff} and an
       unscoped .wt-btn--ghost{color:#fff}. Fixed at source in
       inc/critical-css.php; the guards here are belt-and-braces.
   R3  Ghost buttons sitting on dark sections that were not in main.css's
       whitelist rendered ink-on-ink — invisible until hover.
   ========================================================================== */


/* R1 — PHANTOM BLANK SPACE ================================================
   Bug_30 Bug_56 Bug_61 Bug_69 Bug_72 Bug_76 Bug_77 Bug_89 Bug_104 Bug_105
   Bug_107 Bug_110
   The perf win was not worth a dozen layout defects. Sections now size
   themselves. If this is reinstated later, use a per-section
   contain-intrinsic-size, never a blanket 900px. */
.wt-section,
.wt-band,
.wt-cta,
.wt-quoteband,
.wt-why,
.wt-logo-marquee,
.wt-svc-section {
  content-visibility: visible;
  contain-intrinsic-size: none;
}


/* R2/R3 — BUTTON + HEADING VISIBILITY =====================================
   Bug_16 Bug_49 Bug_71 — "button is an empty box until you hover/click". */
.wt-btn--ghost {
  background: transparent;
  color: var(--wt-ink);
  border-color: var(--wt-ink);
}
.wt-hero .wt-btn--ghost,
.wt-svc-hero .wt-btn--ghost,
.wt-about-hero .wt-btn--ghost,
.wt-post-hero .wt-btn--ghost,
.wt-band .wt-btn--ghost,
.wt-why .wt-btn--ghost,
.wt-quoteband .wt-btn--ghost,
.wt-svc-cta-inline .wt-btn--ghost,
.wt-svc-side--dark .wt-btn--ghost,
.wt-footer .wt-btn--ghost,
.wt-section--ink .wt-btn--ghost {
  color: #fff;
  border-color: #fff;
}
.wt-hero .wt-btn--ghost:hover,
.wt-svc-hero .wt-btn--ghost:hover,
.wt-about-hero .wt-btn--ghost:hover,
.wt-post-hero .wt-btn--ghost:hover,
.wt-band .wt-btn--ghost:hover,
.wt-why .wt-btn--ghost:hover,
.wt-quoteband .wt-btn--ghost:hover,
.wt-svc-cta-inline .wt-btn--ghost:hover,
.wt-svc-side--dark .wt-btn--ghost:hover,
.wt-footer .wt-btn--ghost:hover,
.wt-section--ink .wt-btn--ghost:hover {
  background: #fff;
  color: var(--wt-ink);
}
/* The amber CTA band keeps ink-on-amber. */
.wt-cta .wt-btn--ghost { color: var(--wt-ink); border-color: var(--wt-ink); }
.wt-cta .wt-btn--ghost:hover { background: var(--wt-ink); color: #fff; }

/* Bug_47 Bug_80 Bug_87 Bug_99 — page titles on light backgrounds. */
h1 { color: var(--wt-ink); }
.wt-hero h1,
.wt-svc-hero h1,
.wt-about-hero h1,
.wt-post-hero h1,
.wt-section--ink h1,
.wt-why h1 { color: #fff; }
.wt-banner h1,
.wt-banner h1.wt-fold-after { color: var(--wt-ink); }


/* GLOBAL: INTERACTIVE FEEDBACK ============================================
   Bug_08 Bug_24 Bug_73 Bug_86 — every clickable thing gets a hover state. */
.wt-content a:not(.wt-btn):not(.wt-link),
.wt-svc-prose a:not(.wt-btn),
.wt-tabs__panel a:not(.wt-btn),
.wt-faq__answer a:not(.wt-btn) {
  text-decoration: underline;
  text-decoration-color: var(--wt-amber);
  text-decoration-thickness: 2px;
  text-underline-offset: .18em;
  transition: color .15s var(--wt-ease), background-color .15s var(--wt-ease);
}
.wt-content a:not(.wt-btn):not(.wt-link):hover,
.wt-svc-prose a:not(.wt-btn):hover,
.wt-tabs__panel a:not(.wt-btn):hover,
.wt-faq__answer a:not(.wt-btn):hover {
  color: var(--wt-fold);
  background: var(--wt-wash);
}
.wt-rail a { transition: color .15s var(--wt-ease); }
.wt-rail a:hover { color: var(--wt-fold); text-decoration: underline; text-decoration-color: var(--wt-amber); text-decoration-thickness: 2px; }
.wt-link { transition: background-color .15s var(--wt-ease), color .15s var(--wt-ease); }
.wt-link:hover { background: var(--wt-wash); color: var(--wt-fold); }
.wt-related a strong { transition: color .15s var(--wt-ease); }
.wt-related a:hover strong { color: var(--wt-fold); }

/* Bug_07 — product CTA needed a real hover, not a 2% darkening. */
.wt-btn--ink:hover { background: var(--wt-fold); border-color: var(--wt-fold); color: var(--wt-ink); }

/* Bug_10 — "Read more" on team cards. */
.wt-member__more { transition: color .15s var(--wt-ease), border-color .15s var(--wt-ease); }
.wt-member__more:hover { color: var(--wt-fold); border-bottom-color: var(--wt-fold); }


/* BREADCRUMBS =============================================================
   Bug_21 Bug_57 Bug_73 — alignment, consistent type, hover, and no longer
   floating in a disconnected box of its own. */
.wt-crumbs {
  padding-block: var(--wt-s3);
  font-size: var(--wt-fs-xs);
  background: var(--wt-tint);
  border-bottom: 1px solid var(--wt-rule);
}
.wt-crumbs ol { align-items: center; gap: var(--wt-s1) var(--wt-s2); line-height: 1.5; }
.wt-crumbs li { display: inline-flex; align-items: center; font-size: var(--wt-fs-xs); }
.wt-crumbs a {
  color: var(--wt-ink-2);
  text-decoration: none;
  padding: .1rem .15rem;
  border-bottom: 1px solid transparent;
  transition: color .15s var(--wt-ease), border-color .15s var(--wt-ease);
}
.wt-crumbs a:hover { color: var(--wt-ink); border-bottom-color: var(--wt-amber); }
.wt-crumbs [aria-current="page"] { color: var(--wt-ink); font-weight: 600; }
/* Sits flush under a dark hero rather than as a separate slab. */
.wt-post-hero + .wt-crumbs,
.wt-svc-hero + .wt-crumbs { border-top: 0; }
/* Bug_72 — no dead gap between the nav and the first content block. */
.wt-crumbs + .wt-banner,
.wt-crumbs + .wt-section { padding-top: var(--wt-s6); }


/* HEADER / NAVIGATION =====================================================
   Bug_32 — logo and burger were oversized on small screens.
   Bug_33 — the screen-reader "Menu" span was being painted as a 20x2 white
            bar, so the close icon showed a stray dash beside it.
   Bug_34 — "Get a proposal" filled the panel width for no reason. */
.wt-nav__toggle span.wt-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  background: none !important;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.wt-nav__toggle span.wt-sr-only::before,
.wt-nav__toggle span.wt-sr-only::after { content: none !important; display: none !important; }

@media (max-width: 1120px) {
  .wt-logo img { max-height: 38px; max-width: 170px; }
  .wt-nav__toggle { width: 44px; height: 44px; }
  .wt-nav .wt-btn-row { margin-top: var(--wt-s5); }
  .wt-nav .wt-btn-row .wt-btn {
    width: auto;
    align-self: flex-start;
    padding: .7rem 1.25rem;
    font-size: var(--wt-fs-sm);
  }
  .wt-nav .wt-btn-row { display: flex; }
}

/* Bug_46 Bug_52 Bug_58 — current page must be highlighted, at every level,
   on desktop dropdowns and in the mobile panel, and ONLY the current one. */
.wt-nav .sub-menu li.current-menu-item > a,
.wt-nav .sub-menu li.current_page_item > a {
  background: var(--wt-wash);
  color: var(--wt-ink);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--wt-amber);
}
@media (max-width: 1120px) {
  .wt-nav > ul > li.current-menu-item > a,
  .wt-nav > ul > li.current-menu-ancestor > a,
  .wt-nav > ul > li.current_page_ancestor > a {
    color: var(--wt-amber);
    font-weight: 700;
  }
  .wt-nav .sub-menu li.current-menu-item > a,
  .wt-nav .sub-menu li.current_page_item > a {
    background: transparent;
    color: var(--wt-amber);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--wt-amber);
    padding-left: var(--wt-s3);
  }
  /* Non-current submenu items stay neutral — no blanket highlight. */
  .wt-nav .sub-menu li:not(.current-menu-item):not(.current_page_item) > a { color: #d8d8d6; font-weight: 500; }
}


/* TYPE SCALE ON MOBILE ====================================================
   Bug_45 Bug_63 Bug_102 — headings were sized for desktop and wrapped over
   three or four lines on a 360px viewport, which is what produced most of
   the "excessive vertical space" reports. */
@media (max-width: 700px) {
  :root {
    --wt-fs-h1: clamp(1.75rem, 7vw, 2.25rem);
    --wt-fs-h2: clamp(1.4rem, 5.6vw, 1.85rem);
    --wt-fs-h3: clamp(1.2rem, 4.6vw, 1.45rem);
    --wt-fs-h4: clamp(1.05rem, 4vw, 1.2rem);
    --wt-section-y: clamp(2.5rem, 8vw, 3.5rem);
  }
  .wt-lede { font-size: 1rem; line-height: 1.55; }
  .wt-section-head { margin-bottom: var(--wt-s6); }
  .wt-section-head p { font-size: var(--wt-fs-base); margin-top: var(--wt-s3); }
  .wt-faq__item summary { font-size: var(--wt-fs-base); padding-block: var(--wt-s4); }
  .wt-faq__answer { font-size: var(--wt-fs-sm); }
  .wt-content, .wt-svc-prose { font-size: var(--wt-fs-sm); }
  .wt-content > p:first-of-type { font-size: var(--wt-fs-base); }
}

/* Bug_62 Bug_35 Bug_50 Bug_101 — CTA buttons were rendering far larger
   than their text on mobile. Size them to content and keep the two
   primary CTAs side by side. */
@media (max-width: 700px) {
  .wt-btn { padding: .7rem 1.15rem; font-size: var(--wt-fs-sm); }
  .wt-btn--sm { padding: .55rem .9rem; font-size: var(--wt-fs-xs); }
  .wt-btn-row { gap: var(--wt-s3); }
  .wt-btn-row .wt-btn { flex: 0 1 auto; }
  .wt-cta__inner .wt-btn-row,
  .wt-svc-cta-inline .wt-btn-row { flex-wrap: nowrap; }
  .wt-cta__inner .wt-btn-row .wt-btn,
  .wt-svc-cta-inline .wt-btn-row .wt-btn { white-space: nowrap; padding-inline: .9rem; }
  /* Full-width only where it is genuinely a form submit. */
  .wt-btn--block { width: 100%; padding-block: .85rem; }
}


/* HOMEPAGE ================================================================ */

/* Bug_02 — at 1920 the hero column stopped at 720px and left the right
   half empty. Let it breathe on very wide screens. */
@media (min-width: 1500px) {
  :root { --wt-container: 1440px; }
  .wt-hero__inner { max-width: 860px; }
}

/* Bug_96 — the four hero stats were a wrapping flex row, so they never
   lined up. A grid makes them a clean 4-up / 2-up. */
.wt-hero__proof {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--wt-s5);
}
@media (max-width: 700px) {
  .wt-hero__proof { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wt-s4) var(--wt-s5); }
  .wt-hero__proof strong { font-size: 1.4rem; }
}

/* Bug_06 Bug_38 — product cards: guarantee the logo has room and make the
   product NAME the dominant element, tagline secondary. */
.wt-product { grid-template-columns: 150px 1fr; align-items: start; }
.wt-product img {
  height: auto;
  max-height: 72px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
.wt-product h3 { font-size: var(--wt-fs-sm); font-weight: 600; color: var(--wt-ink-3); order: 2; margin-top: var(--wt-s2); }
.wt-product h4 { font-size: var(--wt-fs-h3); font-weight: 800; color: var(--wt-ink); order: 1; margin-top: 0; line-height: 1.2; }
.wt-product > div { display: flex; flex-direction: column; align-items: flex-start; }
.wt-product p { order: 3; }
.wt-product .wt-btn { order: 4; }
@media (max-width: 560px) {
  .wt-product { grid-template-columns: 1fr; }
  .wt-product img { max-height: 56px; }
}

/* Bug_09 — marquee gaps. Equalise the seam with the internal rhythm and
   give every logo the same slot width so a missing file cannot collapse
   the row. */
.wt-logo-marquee__group { gap: var(--wt-s7); padding-right: var(--wt-s7); }
.wt-logo-marquee img,
.wt-logo-marquee .wt-partner-badge {
  height: 48px;
  min-width: 110px;
  width: auto;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Bug_11 Bug_12 Bug_39 Bug_79 — team profile modal: centre it, stop the
   bio being clipped, and stop the portrait being upscaled into a blur. */
.wt-profile {
  margin: auto;
  max-width: min(880px, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
}
.wt-profile__grid { grid-template-columns: 300px 1fr; max-height: calc(100vh - 2rem); }
.wt-profile__media { background: var(--wt-tint); overflow: hidden; }
.wt-profile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  image-rendering: auto;
}
.wt-profile__body {
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2.25rem 2.25rem 2.75rem;
}
/* A fade cue so a scrollable bio does not look like a cut-off one. */
.wt-profile__bio { padding-bottom: .25rem; }
@media (max-width: 700px) {
  .wt-profile { max-width: calc(100vw - 1.5rem); }
  .wt-profile__grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .wt-profile__media { aspect-ratio: 16/10; }
  .wt-profile__media img { object-position: top center; }
  .wt-profile__body { padding: 1.25rem 1.25rem 2rem; max-height: none; }
  .wt-profile__body h2 { font-size: 1.35rem; }
}

/* Bug_78 — leadership cards: make truncation deliberate and give every
   card the same affordance instead of a sentence that just stops. */
.wt-leader p { overflow-wrap: break-word; }
.wt-leaders .wt-member__more,
.wt-leader .wt-member__more { color: #fff; border-bottom-color: var(--wt-amber); }
.wt-leaders .wt-member__more:hover,
.wt-leader .wt-member__more:hover { color: var(--wt-amber); }


/* FAQ =====================================================================
   Bug_15 Bug_106 — accordion behaviour is wired in fixes.js; this is the
   affordance so an open item reads as open. */
.wt-faq__item[open] > summary { color: var(--wt-fold); }
.wt-faq__item summary:hover { color: var(--wt-fold); }
.wt-faq__item summary:focus-visible { outline-offset: -3px; }


/* FORMS ===================================================================
   Bug_03 Bug_05 Bug_90 Bug_93 Bug_94 — required markers, compact fields,
   and per-field inline errors in an unmistakable red. */
.wt-field label .wt-req,
.wt-req {
  color: #c62828;
  font-weight: 700;
  margin-left: .15em;
}
.wt-field__error,
[data-wt-form-status].wt-field__error {
  color: #c62828;
  font-weight: 600;
}
.wt-field__error--inline {
  display: block;
  margin-top: var(--wt-s2);
  font-size: var(--wt-fs-xs);
  color: #c62828;
  font-weight: 600;
}
.wt-field.is-invalid input,
.wt-field.is-invalid textarea,
.wt-field.is-invalid select {
  border-color: #c62828;
  background: #fff8f8;
}
.wt-field.is-invalid input:focus,
.wt-field.is-invalid textarea:focus,
.wt-field.is-invalid select:focus { border-color: #c62828; box-shadow: 0 0 0 3px rgba(198, 40, 40, .15); }
[data-wt-form-status]:empty { display: none; }
[data-wt-form-status].wt-field__ok { color: #1b5e20; font-weight: 600; }

/* Bug_93 — fields were taller than they needed to be, which made the
   whole contact card feel oversized on a phone. */
@media (max-width: 700px) {
  .wt-field { margin-bottom: var(--wt-s4); }
  .wt-field input,
  .wt-field select { padding: .6rem .8rem; }
  .wt-field textarea { padding: .6rem .8rem; min-height: 104px; }
  .wt-field label { margin-bottom: var(--wt-s1); }
  .wt-miniform { padding: var(--wt-s5); }
}


/* SERVICE PAGES =========================================================== */

/* Bug_27 Bug_48 Bug_53 Bug_64 — the giant decorative watermark number sat
   on top of the heading text at 1366 and duplicated the small "01" label.
   Keep ONE number: the legible label. The watermark is retired rather
   than nudged, because at every width it was either invisible (4% alpha)
   or in the way. */
.wt-svc-section::before,
.wt-why::after { content: none; }

/* Bug_26 Bug_37 Bug_40 — the numbered section label is now the single
   source of the number and is aligned with the heading. */
.wt-svc-head { align-items: start; }
.wt-svc-head__n {
  display: inline-flex;
  align-items: center;
  font-size: var(--wt-fs-xs);
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--wt-fold);
  margin-bottom: var(--wt-s2);
}
.wt-svc-head__title h2 { margin-top: 0; }
.wt-svc-head__intro { align-self: start; }

/* Bug_43 Bug_66 — comparison table must not clip on a phone. The wrapper
   is added by fixes.js; this makes it obviously swipeable. */
.wt-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.wt-table-scroll .wt-compare { min-width: 560px; }
.wt-table-scroll:focus-visible { outline: 3px solid var(--wt-focus); outline-offset: 3px; }
.wt-table-hint {
  display: none;
  margin-top: var(--wt-s2);
  font-size: var(--wt-fs-xs);
  color: var(--wt-ink-3);
}
@media (max-width: 760px) { .wt-table-hint { display: block; } }

/* Bug_44 — the sticky mobile CTA sat on top of the last section and had no
   way to dismiss it. */
@media (max-width: 700px) {
  body { padding-bottom: 0; }
  body.has-sticky-cta { padding-bottom: 68px; }
  .wt-sticky-cta { gap: .5rem; padding: .6rem .75rem; }
  .wt-sticky-cta .wt-btn { padding: .55rem .9rem; font-size: var(--wt-fs-xs); }
  .wt-sticky-cta__close {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    background: none;
    border: 1px solid #555;
    border-radius: 50%;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
  }
  .wt-sticky-cta__close:hover { background: #333; border-color: #777; }
  body.sticky-cta-dismissed .wt-sticky-cta { display: none; }
  body.sticky-cta-dismissed { padding-bottom: 0; }
}

/* Bug_59 Bug_65 Bug_67 — hero and section illustrations were taking a
   third of the screen on a phone. */
@media (max-width: 700px) {
  .wt-svc-art svg,
  .wt-svc-hero__inner .wt-svc-art svg { max-width: 260px; margin-inline: auto; }
  .wt-svc-img--art,
  .wt-svc-side--art img { max-width: 320px; margin-inline: auto; }
  .wt-svc-band img { max-width: 100%; }
  .wt-quoteband__ring { width: min(180px, 55%); }
  .wt-quoteband__icon svg { width: 150px; }
}

/* Bug_68 — service cards were oversized and their content did not line up. */
@media (max-width: 700px) {
  .wt-feature { padding: var(--wt-s5); }
  .wt-feature h3 { font-size: var(--wt-fs-base); }
  .wt-feature p, .wt-feature li { font-size: var(--wt-fs-sm); }
  .wt-feature__icon { width: 36px; height: 36px; padding: 8px; margin-bottom: var(--wt-s3); }
  .wt-features { gap: var(--wt-s4); }
  .wt-pillar { padding: var(--wt-s5); }
  .wt-svc-prose--full > ol > li { padding: var(--wt-s5) var(--wt-s5) var(--wt-s5) 3.5rem; font-size: var(--wt-fs-sm); }
  .wt-svc-prose--full > ol > li::before { left: 1rem; top: 1.25rem; font-size: 1.4rem; }
  .wt-svc-prose ol > li { padding-left: 3.5rem; }
  .wt-svc-prose ol > li::before { left: 1rem; font-size: 1.3rem; }
}

/* Bug_100 — overlapping lines in the "Ready to see where your brand
   stands" callout: the paragraph had a fixed line-height fighting a
   clamped font size. */
.wt-svc-cta-inline p,
.wt-takeaway p,
.wt-svc-side > p {
  line-height: 1.55;
  overflow-wrap: break-word;
  text-decoration: none;
}
.wt-svc-cta-inline { align-items: center; row-gap: var(--wt-s4); }
@media (max-width: 700px) {
  .wt-svc-cta-inline { padding: var(--wt-s5); }
  .wt-svc-cta-inline h3 { font-size: var(--wt-fs-base); }
  .wt-svc-cta-inline p { font-size: var(--wt-fs-xs); }
}

/* Bug_25 — two adjacent paragraphs rendering in different greys. */
.wt-svc-head__intro > p,
.wt-svc-prose > p { color: var(--wt-ink-2); }
.wt-svc-head__intro > p:first-child { color: var(--wt-ink-2); }

/* Bug_29 — "Other services" and "Related services" were showing the same
   cards. Deduped in PHP; this keeps the two blocks visually distinct. */
.wt-related--secondary a { background: var(--wt-tint); }


/* BLOG ====================================================================
   Bug_74 Bug_82 Bug_103 — two cards per row on mobile instead of one
   oversized card, and no full-bleed featured card on small screens. */
@media (max-width: 560px) {
  .wt-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wt-s4); }
  .wt-post__body { padding: var(--wt-s4); }
  .wt-post h3 { font-size: var(--wt-fs-sm); line-height: 1.3; margin-top: var(--wt-s2); }
  .wt-post p { font-size: var(--wt-fs-xs); margin-top: var(--wt-s2); }
  .wt-post__meta { font-size: .75rem; gap: var(--wt-s2); }
  .wt-post__thumb { aspect-ratio: 16/11; }
  /* The featured card stops being special below this width. */
  .wt-post--featured { grid-column: auto; grid-template-columns: 1fr; }
  .wt-post--featured h3 { font-size: var(--wt-fs-sm); }
  .wt-post--featured .wt-post__thumb { aspect-ratio: 16/11; }
  .wt-post--featured p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Bug_103 — even on tablet the featured card should not dwarf the rest. */
@media (min-width: 561px) and (max-width: 900px) {
  .wt-post--featured { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .wt-post--featured h3 { font-size: var(--wt-fs-h3); }
}

/* Bug_83 — "Read the article" on every card, with a hover state. */
.wt-post__more {
  margin-top: auto;
  padding-top: var(--wt-s4);
  font-size: var(--wt-fs-sm);
  font-weight: 700;
  color: var(--wt-ink);
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.wt-post__more span {
  border-bottom: 2px solid var(--wt-amber);
  transition: background-color .15s var(--wt-ease), color .15s var(--wt-ease);
}
.wt-post:hover .wt-post__more span { background: var(--wt-wash); color: var(--wt-fold); }
@media (max-width: 560px) {
  .wt-post__more { font-size: var(--wt-fs-xs); padding-top: var(--wt-s3); }
}

/* Bug_81 — category filter chips were oversized on mobile. */
@media (max-width: 700px) {
  .wt-filters { gap: .4rem; margin-bottom: var(--wt-s6); }
  .wt-filters a { padding: .3rem .7rem; font-size: var(--wt-fs-xs); }
}

/* Bug_109 — pagination buttons. */
@media (max-width: 700px) {
  .wt-pagination { margin-top: var(--wt-s7); }
  .wt-pagination .page-numbers { min-width: 36px; height: 36px; font-size: var(--wt-fs-sm); padding-inline: var(--wt-s2); }
}

/* Bug_84 — share buttons get their platform icons. */
.wt-share a { gap: .45rem; }
.wt-share a svg { width: 16px; height: 16px; flex: 0 0 auto; }
.wt-share a:hover svg { color: var(--wt-ink); }
@media (max-width: 560px) {
  .wt-share { gap: var(--wt-s3); }
  .wt-share a { padding: .4rem .7rem; font-size: var(--wt-fs-xs); }
}

/* Bug_85 — author box content alignment. */
.wt-author-box { text-align: center; }
.wt-author-box__avatar { border: 4px solid var(--wt-paper); box-shadow: 0 6px 20px rgba(0, 0, 0, .12); }
.wt-author-box__title,
.wt-author-box__creds { max-width: 62ch; margin-inline: auto; }
.wt-author-box__bio { text-align: left; }
@media (max-width: 560px) {
  .wt-author-box { padding: var(--wt-s6) var(--wt-s5); }
  .wt-author-box__avatar { width: 92px; height: 92px; }
  .wt-author-box h2 { font-size: var(--wt-fs-h3); }
  .wt-author-box__creds { font-size: var(--wt-fs-sm); }
}

/* Bug_88 — the table of contents was showing the list's own number plus a
   number already baked into the heading text. fixes.js strips the baked-in
   one; this keeps the list tidy. */
.wt-toc ol { padding-left: 1.4em; }
.wt-toc li::marker { color: var(--wt-fold); font-weight: 700; }
.wt-toc a { text-decoration: none; }
.wt-toc a:hover { text-decoration: underline; text-decoration-color: var(--wt-amber); text-decoration-thickness: 2px; color: var(--wt-fold); }

/* Bug_104 Bug_105 Bug_110 — spacing around the tail of an article. */
.wt-author-box { margin-top: var(--wt-s7); }
.wt-prevnext { margin-top: var(--wt-s7); }
.wt-content + .wt-chips { margin-top: var(--wt-s6) !important; }
.wt-cta + .wt-footer { margin-top: 0; }
.wt-cta { margin-bottom: 0; }


/* CONTACT PAGE ============================================================
   Bug_92 Bug_107 Bug_108 — balance the two columns, tighten the office
   block, and lift the info cards off the page. */
.wt-office,
.wt-contact-card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  transition: box-shadow .15s var(--wt-ease), transform .15s var(--wt-ease);
}
.wt-office:hover,
.wt-contact-card:hover { box-shadow: 0 10px 28px rgba(0, 0, 0, .1); transform: translateY(-2px); }
.wt-split > * { align-self: start; }
@media (max-width: 700px) {
  .wt-office { padding: var(--wt-s5); }
  .wt-office p { margin-top: var(--wt-s2); }
  .wt-offices { gap: var(--wt-s4); }
}


/* ABOUT PAGE ==============================================================
   Bug_60 — "Meet the team" content was unreadable on the black hero.
   Bug_97 — the "Why choose" photo was being upscaled and sat off-centre. */
.wt-about-hero,
.wt-about-hero__inner { color: #fff; }
.wt-about-hero h1,
.wt-about-hero h2,
.wt-about-hero h3 { color: #fff; }
.wt-about-hero p,
.wt-about-hero .wt-lede { color: #e2e2e0; }
.wt-about-hero a:not(.wt-btn) { color: #fff; text-decoration-color: var(--wt-amber); }
.wt-about-side__photo img { object-fit: cover; object-position: center; }
.wt-about-side__photo { min-height: 280px; }
.wt-split--wide-media img { width: 100%; height: auto; object-fit: cover; }


/* FOOTER ==================================================================
   Bug_18 Bug_19 — partners were a mix of hotlinked images and text badges
   at different heights, so the row read as broken. One consistent tile for
   every partner, whichever form it takes.
   Bug_51 — the footer was eating a screen and a half on mobile. */
.wt-footer__partners .wt-logos { justify-content: flex-start; gap: var(--wt-s4); }
.wt-footer__partners .wt-logos img,
.wt-footer__partners .wt-partner-badge {
  height: 48px;
  min-width: 112px;
  max-width: 160px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 6px;
  object-fit: contain;
  filter: none;
  opacity: 1;
}
.wt-footer__partners a { display: inline-flex; border-radius: 6px; transition: transform .15s var(--wt-ease), box-shadow .15s var(--wt-ease); }
.wt-footer__partners a:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 0, 0, .3); }
.wt-footer__partners .wt-partner-badge { font-weight: 800; font-size: var(--wt-fs-sm); color: var(--wt-ink); }

.wt-footer__logo-link { display: inline-block; }
.wt-footer__logo-link:hover .wt-footer__logo { opacity: .85; }
.wt-footer__logo { transition: opacity .15s var(--wt-ease); }

@media (max-width: 700px) {
  .wt-footer { padding-top: var(--wt-s7); font-size: var(--wt-fs-xs); }
  .wt-footer__logo { max-height: 32px; margin-bottom: var(--wt-s4); }
  .wt-footer__cols { gap: var(--wt-s6) var(--wt-s5); }
  .wt-footer h5 { font-size: var(--wt-fs-sm); margin-bottom: var(--wt-s3); }
  .wt-footer li + li { margin-top: var(--wt-s2); }
  .wt-footer p, .wt-footer address, .wt-footer a { font-size: var(--wt-fs-xs); line-height: 1.6; }
  .wt-footer__social a { width: 34px; height: 34px; }
  .wt-footer__social svg { width: 15px; height: 15px; }
  .wt-footer__partners { margin-top: var(--wt-s6); padding-top: var(--wt-s5); }
  .wt-footer__partners .wt-logos img,
  .wt-footer__partners .wt-partner-badge { height: 38px; min-width: 88px; padding: 6px 10px; }
  .wt-footer__bar { margin-top: var(--wt-s6); font-size: .75rem; }
}
@media (max-width: 560px) {
  .wt-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wt-footer__cols > :first-child { grid-column: 1 / -1; }
  .wt-footer__cols > :last-child { grid-column: 1 / -1; }
}


/* COUNT-UP STATS ==========================================================
   Bug_20 Bug_22 Bug_23 Bug_28 — the animation is driven by fixes.js.
   Reserve the width so the layout does not jitter while digits change. */
[data-wt-count] { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { [data-wt-count] { transition: none; } }


/* MISC ==================================================================== */

/* Bug_17 — footer logo is a link now; make the focus ring visible. */
.wt-footer__logo-link:focus-visible { outline: 3px solid var(--wt-amber); outline-offset: 4px; }

/* Bug_95 — the post hero no longer stacks an <h1> on top of a banner image
   that already contains the headline. */
.wt-post-hero__inner { max-width: 900px; }
.wt-post-hero h1 { margin-top: var(--wt-s4); }

/* Bug_102 — long unbroken strings were pushing the mobile layout sideways. */
@media (max-width: 700px) {
  .wt-content, .wt-svc-prose, .wt-faq__answer, .wt-post p { overflow-wrap: anywhere; }
  .wt-container { padding-inline: 1.15rem; }
}

/* Bug_47 — the Services page heading needs the same treatment as any
   other banner title. */
.wt-banner .wt-lede { color: var(--wt-ink-2); }
.wt-banner h1 + .wt-lede { margin-top: var(--wt-s5); }