/* RESI Group — supplementary styles for things theme.json cannot express */

/* ---- block styles ---- */
.is-style-panel{
  background: var(--wp--preset--color--panel);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 3px;
}
.is-style-bordered{
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 3px;
}
.is-style-eyebrow{
  font-family: var(--wp--preset--font-family--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--wp--preset--color--brand);
  margin-bottom: 1.2rem;
}
.is-style-lede{
  font-size: var(--wp--preset--font-size--lede);
  color: var(--wp--preset--color--muted);
  max-width: 64ch;
  margin-inline-start: 0;
  margin-inline-end: auto;
}
.has-text-align-center.is-style-lede{ margin-inline: auto; }
.is-style-accent-tail em{
  font-style: normal;
  color: var(--wp--preset--color--brand);
}

/* Hairline grid: cards separated by 1px rules rather than gaps.
   Reads as a table of contents rather than a set of floating boxes. */
.is-style-grid-hairline{
  gap: 0 !important;
  border-top: 1px solid var(--wp--preset--color--line);
  border-left: 1px solid var(--wp--preset--color--line);
}
.is-style-grid-hairline > .wp-block-column{
  border-right: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding: 1.9rem 1.6rem;
  transition: background .18s ease;
}
.is-style-grid-hairline > .wp-block-column:hover{
  background: var(--wp--preset--color--panel);
}
@media (max-width: 781px){
  .is-style-grid-hairline{ border-left: 0; }
  .is-style-grid-hairline > .wp-block-column{ border-right: 0; }
}

/* ---- logo lockup ---- */
.resi-lockup{ display: inline-block; line-height: 1; text-decoration: none; }
.resi-lockup__name{
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800; font-size: 1.4rem; letter-spacing: -.038em;
  color: var(--wp--preset--color--ink);
}
.resi-lockup__sub{
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600; font-size: .575rem;
  letter-spacing: .44em; text-transform: uppercase; text-indent: .04em;
  color: var(--wp--preset--color--brand);
  margin-top: .34rem;
}

/* ---- header ---- */
.resi-header{
  border-bottom: 1px solid var(--wp--preset--color--line);
  background: color-mix(in srgb, var(--wp--preset--color--paper) 94%, transparent);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 40;
}
.resi-header .wp-block-navigation a{ color: var(--wp--preset--color--muted); }
.resi-header .wp-block-navigation a:hover{ color: var(--wp--preset--color--brand); text-decoration: none; }
.wp-block-navigation .wp-block-navigation-submenu__toggle svg{ opacity: .5; }
.wp-block-navigation__submenu-container{
  border: 1px solid var(--wp--preset--color--line) !important;
  border-radius: 3px;
  padding: .4rem 0;
  box-shadow: 0 12px 32px rgba(22,28,38,.08);
}

/* ---- service / audience list rows ---- */
.resi-row{
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  padding: 1.45rem 0;
  border-bottom: 1px solid var(--wp--preset--color--line);
  text-decoration: none;
  transition: padding-left .2s ease;
}
.resi-row:hover{ padding-left: .7rem; text-decoration: none; }
.resi-row__name{
  font-family: var(--wp--preset--font-family--display);
  font-weight: 800;
  font-size: clamp(1.15rem, 1rem + .9vw, 1.6rem);
  color: var(--wp--preset--color--ink);
  transition: color .2s ease;
}
.resi-row:hover .resi-row__name{ color: var(--wp--preset--color--brand); }
.resi-row__meta{
  font-family: var(--wp--preset--font-family--mono);
  font-size: .73rem; color: var(--wp--preset--color--muted); text-align: right;
}

/* ---- client logo strip ---- */
/* White band with hairline rules top and bottom, so it separates from the
   paper background without a tint fighting the logos. */
.resi-clientband{
  border-top: 1px solid var(--wp--preset--color--line);
  border-bottom: 1px solid var(--wp--preset--color--line);
}
.resi-clients{ overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.resi-clients__track{
  display: flex; align-items: center; gap: 3.2rem; width: max-content;
  /* Lower = faster. Change this one number to retime the strip. */
  --resi-marquee-speed: 26s;
  animation: resi-marquee var(--resi-marquee-speed) linear infinite;
}
/* The whole band is white, so the logos need no plate — several of the supplied
   marks are JPEGs with a baked-in white background and now sit flush. */
.resi-clients:hover .resi-clients__track{ animation-play-state: paused; }
.resi-clients__track img{
  height: 34px; width: auto; object-fit: contain;
  transition: transform .2s ease;
}
.resi-clients__track img:hover{ transform: scale(1.04); }
.resi-clients__track img.is-lead{ height: 46px; }
@keyframes resi-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce){
  .resi-clients{ overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
  .resi-clients__track{ animation: none; }
}

/* ---- network band ---- */
.resi-network{
  border-top: 1px solid var(--wp--preset--color--line);
  background: var(--wp--preset--color--panel);
}
.resi-network__grid{
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--wp--preset--color--line);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 3px; overflow: hidden;
}
.resi-network__item{
  background: var(--wp--preset--color--paper);
  padding: 1.1rem 1.2rem; text-decoration: none; display: block;
  transition: background .18s ease;
}
.resi-network__item:hover{ background: var(--wp--preset--color--panel); text-decoration: none; }
.resi-network__item b{
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600; font-size: .88rem; color: var(--wp--preset--color--ink);
  margin-bottom: .3rem;
}
.resi-network__item span{
  font-size: .8rem; color: var(--wp--preset--color--muted); line-height: 1.45; display: block;
}
.resi-network__item.is-here{ border-left: 2px solid var(--wp--preset--color--brand); }
.resi-network__item.is-here b{ color: var(--wp--preset--color--brand); }
/* Unlaunched brands are text, never links — a live URL on a placeholder
   is a thin page that gets indexed and drags on the whole group. */
.resi-network__item.is-soon{ background: var(--wp--preset--color--panel); cursor: default; }
.resi-network__item.is-soon b{ color: var(--wp--preset--color--muted); }
.resi-network__item.is-soon span{
  font-family: var(--wp--preset--font-family--mono);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--wp--preset--color--brand);
}

/* ---- FAQ ---- */
.resi-faq details{
  border-bottom: 1px solid var(--wp--preset--color--line);
  padding: 1.1rem 0;
}
.resi-faq summary{
  cursor: pointer; list-style: none;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600; font-size: 1rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.resi-faq summary::-webkit-details-marker{ display: none; }
.resi-faq summary::after{
  content: "+"; color: var(--wp--preset--color--brand);
  font-family: var(--wp--preset--font-family--mono); font-size: 1.1rem; flex: none;
}
.resi-faq details[open] summary::after{ content: "\2013"; }
.resi-faq details > p{
  margin: .8rem 0 0; color: var(--wp--preset--color--muted); max-width: 68ch;
}

/* ---- footer ---- */
.resi-footer{ border-top: 1px solid var(--wp--preset--color--line); }
.resi-footer a{ color: var(--wp--preset--color--muted); }
.resi-footer a:hover{ color: var(--wp--preset--color--brand); }
.resi-legal{
  font-family: var(--wp--preset--font-family--mono);
  font-size: .68rem; letter-spacing: .02em; color: var(--wp--preset--color--muted);
}

/* ---- utility ---- */
.resi-mono{ font-family: var(--wp--preset--font-family--mono); font-size: .72rem; letter-spacing: .08em; }
/* WordPress's constrained layout centres any child that has a max-width, by
   applying auto margins. That silently centres every measure-limited paragraph,
   so the start margin is pinned back to zero. */
.resi-measure{
  max-width: 66ch;
  margin-inline-start: 0;
  margin-inline-end: auto;
}
/* Anything deliberately centred still wins. */
.has-text-align-center.resi-measure{ margin-inline: auto; }


:where(.wp-block-button__link):focus-visible,
:where(a):focus-visible{ outline: 2px solid var(--wp--preset--color--brand); outline-offset: 3px; }

/* ---- services grid (14 items) ---- */
.resi-grid{
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  background: var(--wp--preset--color--line);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 3px; overflow: hidden;
}
.resi-grid__item{
  background: var(--wp--preset--color--paper);
  padding: 1.6rem 1.5rem; text-decoration: none; display: block;
  transition: background .18s ease;
}
.resi-grid__item:hover{ background: var(--wp--preset--color--panel); text-decoration: none; }
.resi-grid__item .n{
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .66rem; font-weight: 500; letter-spacing: .12em;
  color: var(--wp--preset--color--brand); margin-bottom: .8rem;
}
.resi-grid__item b{
  display: block;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600; font-size: .98rem; line-height: 1.25;
  color: var(--wp--preset--color--ink); margin-bottom: .45rem;
}
.resi-grid__item:hover b{ color: var(--wp--preset--color--brand); }
.resi-grid__item > span:not(.n){
  display: block; font-size: .88rem; line-height: 1.5;
  color: var(--wp--preset--color--muted);
}

/* ---- footer layout ---- */
.resi-footer__grid{
  display: grid; gap: 2.4rem 2.6rem;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  align-items: start;
}
@media (max-width: 900px){ .resi-footer__grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .resi-footer__grid{ grid-template-columns: 1fr; } }
.resi-footer__brand p{
  margin: 1.1rem 0 0; font-size: .92rem; color: var(--wp--preset--color--muted); max-width: 30ch;
}
.resi-footer__head{
  font-family: var(--wp--preset--font-family--mono);
  font-size: .68rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase;
  color: var(--wp--preset--color--brand); margin: 0 0 .9rem;
}
.resi-footer__col ul{ list-style: none; margin: 0; padding: 0; }
.resi-footer__col li{ margin-bottom: .5rem; }
.resi-footer__col a{ font-size: .88rem; color: var(--wp--preset--color--muted); }
.resi-footer__col a:hover{ color: var(--wp--preset--color--brand); }

/* ---- embed placeholder ---- */
.resi-embed{
  min-height: 300px; border: 1px dashed var(--wp--preset--color--line);
  border-radius: 3px; background: var(--wp--preset--color--panel);
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .72rem; letter-spacing: .08em; line-height: 2;
  color: var(--wp--preset--color--muted);
}

/* HOUSED sits last in the nav and earns a little emphasis */
.resi-nav-housed a{ color: var(--wp--preset--color--brand) !important; }

/* ---- world map ---- */
.resi-mapwrap{ margin: .5rem 0 2.4rem; }
/* Active countries carry an explicit fill attribute so they render correctly
   everywhere; this override lets a child theme retint them to its own accent. */
.resi-map .c.on path{ fill: var(--wp--preset--color--brand); }
.resi-map{ width: 100%; height: auto; display: block; }
.resi-map .c.on:hover{ opacity: .78; }

.resi-countries{
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--wp--preset--color--line);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 3px; overflow: hidden;
}
.resi-countries > div{
  background: var(--wp--preset--color--paper);
  padding: 1.3rem 1.4rem;
}
.resi-countries .r{
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .66rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  color: var(--wp--preset--color--brand); margin-bottom: .85rem;
}
.resi-countries b{
  display: block; font-family: var(--wp--preset--font-family--body);
  font-weight: 400; font-size: .92rem; color: var(--wp--preset--color--ink);
  padding: .18rem 0;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE
   Core blocks (columns, navigation) stack on their own below
   782px. Everything below is the custom components, which do not.
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 782px){

  /* Service and audience rows: name over meta, not squashed beside it */
  .resi-row{
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    padding: 1.15rem 0;
  }
  .resi-row__meta{ text-align: left; }
  .resi-row:hover{ padding-left: 0; }   /* no hover state on touch */

  /* Client strip: tighter gaps, smaller marks, faster loop */
  .resi-clients__track{ gap: 2rem; --resi-marquee-speed: 20s; }
  .resi-clients__track img{ height: 24px; }
  .resi-clients__track img.is-lead{ height: 30px; }

  /* Services grid: single column, tighter */
  .resi-grid{ grid-template-columns: 1fr; }
  .resi-grid__item{ padding: 1.3rem 1.2rem; }
  .resi-grid__item .n{ margin-bottom: .5rem; }

  /* Network band: single column */
  .resi-network__grid{ grid-template-columns: 1fr; }
  .resi-network__item{ padding: .95rem 1.1rem; }

  /* Country list: two up rather than one, it is short text */
  .resi-countries{ grid-template-columns: 1fr 1fr; }
  .resi-countries > div{ padding: 1rem 1.1rem; }
  .resi-countries b{ font-size: .86rem; }

  /* Embeds: less dead space if the widget is slow or blocked */
  .resi-embed{ min-height: 240px !important; }

  /* FAQ: larger tap target on the summary row */
  .resi-faq details{ padding: .95rem 0; }
  .resi-faq summary{ font-size: .95rem; min-height: 44px; align-items: center; }

  /* Footer link rows: 44px tap targets */
  .resi-footer__col li{ margin-bottom: 0; }
  .resi-footer__col a{
    display: block; padding: .6rem 0; font-size: .92rem;
  }
  .resi-footer__brand p{ max-width: none; }

  /* Nav overlay: proper tap targets, submenus always open */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item > a{ padding: .55rem 0; font-size: 1.05rem; }
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container{
      border: 0 !important; box-shadow: none; padding-left: .9rem;
    }
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__submenu-container a{ font-size: .95rem; padding: .45rem 0; }

  /* Lockup: slightly smaller so it never collides with the burger */
  .resi-lockup__name{ font-size: 1.24rem; }
  .resi-lockup__sub{ font-size: .53rem; letter-spacing: .38em; }
}

/* Very small screens: the world map becomes unreadable rather than merely
   small, so let it scroll horizontally at a usable size instead of shrinking. */
@media (max-width: 560px){
  .resi-mapwrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--wp--preset--spacing--40) * -1);
    padding-inline: var(--wp--preset--spacing--40);
  }
  .resi-map{ min-width: 520px; }
  .resi-countries{ grid-template-columns: 1fr; }
}

/* Long unbroken words (domains, service names) must never force a sideways
   scroll on a 320px screen. */
@media (max-width: 400px){
  h1, h2, h3, .resi-row__name, .resi-grid__item b{ overflow-wrap: break-word; }
  .resi-network__item span{ overflow-wrap: anywhere; }
}


/* ═══════════════════════════════════════════════════════════
   ALIGNMENT
   WordPress's constrained layout squeezes every child of a full-width
   group down to the global content size (760px) and centres it with
   auto margins marked !important. Headings and paragraphs therefore
   start at different left edges depending on their own max-width,
   which reads as an unexplained indent. Two rules fix it.
   ═══════════════════════════════════════════════════════════ */

/* 1. Every direct child of a full-bleed section gets the full 1180px
      column, so the column itself is what is centred — not the text. */
.wp-block-group.alignfull.is-layout-constrained > *{
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 1b. Reading-width limits must survive rule 1, or lines run the full
       1180px, which is far too long to read comfortably.

   The offset matters: these are direct children of a full-bleed group, so
   margin-left:0 would pin them to the page edge rather than to the 1180px
   column the headings sit in. max(0px, (100% - 1180px) / 2) reproduces
   exactly the inset the column has, and collapses to zero once the viewport
   is narrower than the column. */
.wp-block-group.alignfull.is-layout-constrained > .resi-measure,
.wp-block-group.alignfull.is-layout-constrained > .is-style-lede,
.wp-block-group.alignfull.is-layout-constrained > .is-style-eyebrow,
.wp-block-group.alignfull.is-layout-constrained > p:not(.has-text-align-center),
.wp-block-group.alignfull.is-layout-constrained > ul:not(.has-text-align-center),
.wp-block-group.alignfull.is-layout-constrained > ol:not(.has-text-align-center){
  margin-left: max(0px, calc((100% - 1180px) / 2)) !important;
  margin-right: auto !important;
}
.wp-block-group.alignfull.is-layout-constrained > .resi-measure{ max-width: 66ch !important; }
.wp-block-group.alignfull.is-layout-constrained > .is-style-lede{ max-width: 64ch !important; }
.wp-block-group.alignfull.is-layout-constrained > ul:not(.has-text-align-center),
.wp-block-group.alignfull.is-layout-constrained > ol:not(.has-text-align-center){ max-width: 70ch !important; }

/* Inside columns there is no full-bleed offset, so plain zero is correct. */
.wp-block-column > .resi-measure,
.wp-block-column > .is-style-lede,
.wp-block-column > p:not(.has-text-align-center){
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* 3. Anything deliberately centred still centres. */
.has-text-align-center,
.wp-block-group.alignfull.is-layout-constrained > .has-text-align-center,
.wp-block-buttons.is-content-justification-center{
  margin-left: auto !important;
  margin-right: auto !important;
}

/* 4. Tighter column gap. The heading/body split on service pages was
      reading as a gulf rather than a relationship. */
.wp-block-columns{ column-gap: 2.4rem !important; }
@media (min-width: 1100px){
  .wp-block-columns{ column-gap: 2.8rem !important; }
}




/* ---- services grid, native block version ----
   The old .resi-grid markup stays below for anything still using it; these
   rules style the editable core/group grid so it looks identical. */
.resi-cells{
  gap: 1px !important;
  background: var(--wp--preset--color--line);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 3px;
  overflow: hidden;
}
.resi-cell{
  background: var(--wp--preset--color--paper);
  padding: 1.6rem 1.5rem;
  margin: 0 !important;
  transition: background .18s ease;
}
.resi-cell:hover{ background: var(--wp--preset--color--panel); }
.resi-cell > *{ margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
.resi-cell__n{
  font-family: var(--wp--preset--font-family--mono);
  font-size: .66rem !important; font-weight: 500; letter-spacing: .12em;
  color: var(--wp--preset--color--brand); margin: 0 0 .8rem !important;
}
.resi-cell__t{
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600 !important; font-size: .98rem !important; line-height: 1.25;
  letter-spacing: -.01em; margin: 0 0 .45rem !important;
}
.resi-cell:hover .resi-cell__t{ color: var(--wp--preset--color--brand); }
.resi-cell__d{ margin: 0 0 .9rem !important; line-height: 1.5; }

/* The "View service" line is the real link. On the front end its anchor is
   stretched invisibly over the whole card, so the box stays clickable — but in
   the editor it is just a line of text, leaving the title safe to click into. */
.resi-cell{ position: relative; }
.resi-cell__go{
  margin: 0 !important;
  font-family: var(--wp--preset--font-family--mono);
  font-size: .68rem !important; letter-spacing: .08em;
}
.resi-cell__go a{
  color: var(--wp--preset--color--brand);
  text-decoration: none;
}
.resi-cell__go a::after{
  content: ""; position: absolute; inset: 0; z-index: 1;
}
.resi-cell:hover .resi-cell__go a{ text-decoration: underline; }

/* Declared unconditionally rather than behind a feature query, so the grid
   does not depend on the WordPress version shipping core grid layout. Where
   core does emit its own grid rules, they simply match these. */
.resi-cells{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
@media (max-width: 782px){
  .resi-cells{ grid-template-columns: 1fr !important; }
  .resi-cell{ padding: 1.3rem 1.2rem; }
}


/* ---- podcast player ----
   Buzzsprout injects an iframe that will happily run the full width of its
   container, so it is boxed into a panel and capped. */
.resi-podplayer{
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 3px;
  background: var(--wp--preset--color--panel);
  padding: 1rem;
  max-width: 620px;
  overflow: hidden;
}
.resi-podplayer > div,
.resi-podplayer iframe{
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  border: 0;
}
/* On the standalone HOUSED page the player is the main event, so it centres
   in its section rather than hugging the left. */
.resi-podplayer.is-wide{ max-width: 820px; }
@media (max-width: 782px){
  .resi-podplayer{ padding: .7rem; max-width: none; }
}


/* ---- listen-on platform links ---- */
.resi-listen{
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.resi-listen__l{
  font-family: var(--wp--preset--font-family--mono);
  font-size: .66rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--wp--preset--color--muted);
  margin-right: .3rem;
}
.resi-listen__i{
  font-family: var(--wp--preset--font-family--display);
  font-weight: 600; font-size: .78rem;
  color: var(--wp--preset--color--ink);
  border: 1px solid var(--wp--preset--color--line);
  border-radius: 2px;
  padding: .42rem .8rem;
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.resi-listen__i:hover{
  color: var(--wp--preset--color--brand);
  border-color: var(--wp--preset--color--brand);
  background: var(--wp--preset--color--panel);
  text-decoration: none;
}
@media (max-width: 782px){
  .resi-listen__l{ width: 100%; margin-bottom: .2rem; }
  .resi-listen__i{ padding: .5rem .85rem; font-size: .82rem; }
}


/* ---- hero image ----
   Pages imported before v1.4.1 carry a 4/3.1 crop inline. Capping the height
   here brings those down too, without needing the pages rebuilt. */
.wp-block-columns .wp-block-image.is-style-bordered img{
  max-height: 380px;
  object-fit: cover;
  width: 100%;
}
@media (max-width: 1100px){
  .wp-block-columns .wp-block-image.is-style-bordered img{ max-height: 320px; }
}
@media (max-width: 782px){
  .wp-block-columns .wp-block-image.is-style-bordered img{ max-height: 260px; }
}

/* ---- heading / body splits on service and audience pages ----
   Built as two columns: a narrow label column with the heading, body copy
   beside it. That left the text stranded in a channel down the right.

   No modern selectors and no feature queries here — the columns block already wraps by
   default, so forcing the label column to full width pushes its sibling onto
   the next line. Plain flex behaviour, works everywhere. */
.wp-block-column[style*="flex-basis:38%"],
.wp-block-column[style*="flex-basis:26%"]{
  flex-basis: 100% !important;
  width: 100% !important;
  flex-grow: 0 !important;
}
.wp-block-column[style*="flex-basis:38%"] + .wp-block-column,
.wp-block-column[style*="flex-basis:26%"] + .wp-block-column{
  flex-basis: 100% !important;
  width: 100% !important;
  margin-top: .5rem;
}
/* The heading no longer needs the bottom margin it carried as a column. */
.wp-block-column[style*="flex-basis:38%"] > :last-child,
.wp-block-column[style*="flex-basis:26%"] > :last-child{ margin-bottom: 0 !important; }

/* A wider measure for these passages — they carry the most text on the page,
   and 66ch was making them read like a column of newsprint. */
.wp-block-column[style*="flex-basis:38%"] + .wp-block-column > p,
.wp-block-column[style*="flex-basis:26%"] + .wp-block-column > p,
.wp-block-column[style*="flex-basis:38%"] + .wp-block-column > ul,
.wp-block-column[style*="flex-basis:26%"] + .wp-block-column > ul{
  max-width: 84ch !important;
  margin-left: 0 !important;
}


/* When columns wrap, the block gap becomes a row gap and opens a hole between
   a heading and the text beneath it. Zero it globally, then restore spacing
   only where stacked columns genuinely need it. */
.wp-block-columns{ row-gap: 0 !important; }

@media (max-width: 781px){
  .wp-block-column + .wp-block-column{ margin-top: 2rem; }
}

/* The heading/body split needs almost none — they are one unit. */
.wp-block-column[style*="flex-basis:38%"] + .wp-block-column,
.wp-block-column[style*="flex-basis:26%"] + .wp-block-column{
  margin-top: .35rem !important;
}