/* =========================================================================
   BRANCH PAGES  (single-branch.php, archive-branch.php)
   Loaded only on branch pages (inc/branches.php).

   The page body is built with the Section Generator; each section is styled
   here by its Section Class:
     branch-intro   two coloured columns, edge to edge, contact buttons
     branch-team    team slider, "..." opens the bio
     branch-strip   three photos, edge to edge
     branch-ranges  product range pills with a tick
     branch-areas   areas we supply + tick list
   Any page can use these classes; the file just has to be loaded there.
   ========================================================================= */

.branch-page {
  --branch-red: #e30613;
  --branch-blue: #236092;
  --branch-navy: #1d3659;
  --branch-dark: #001538;
  --branch-card: #ececec;
  /* the buying-guide tick (Icon Row "tick", images/icons/tick.svg) */
  --branch-tick: url("../images/icons/tick.svg");
}

/* Bold is Hind semi-bold (600) throughout, as in the design */
.branch-page strong,
.branch-page b {
  font-weight: 600;
}

/* ---- Round red contact buttons ([branch_icons]) ------------------------ */

.dw-round-icons {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.dw-round-icon,
.medium-blue-box p a.dw-round-icon,
.dark-blue-box p a.dw-round-icon,
.light-blue-box p a.dw-round-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--branch-red, #e30613);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.dw-round-icon:hover,
.dw-round-icon:focus,
.medium-blue-box p a.dw-round-icon:hover,
.dark-blue-box p a.dw-round-icon:hover,
.light-blue-box p a.dw-round-icon:hover {
  background: #000;
  color: #fff;
  transform: translateY(-2px);
}

/* Phone number pill: on desktop (a real mouse), hovering a phone button grows
   it into a long pill - the handset stays on the left and the number slides
   out to its right, in the same black as the hovered button. The buttons
   beside it slide along to make room. The whole pill is the tel: link.
   Touch screens keep the plain round button. */
.dw-round-icon__label {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  /* .dw-round-icons a... beats the box-colour rules (e.g. .medium-blue-box p
     a.dw-round-icon) and .branch-team .dw-round-icon that fix the width */
  .dw-round-icons a.dw-round-icon.dw-round-icon--phone {
    --btn: 44px;
    width: auto;
    min-width: var(--btn);
    justify-content: flex-start;
    border-radius: 999px;
    transition: background-color 0.2s ease;
  }

  .branch-team .dw-round-icons a.dw-round-icon.dw-round-icon--phone {
    --btn: 34px;
  }

  .dw-round-icons a.dw-round-icon--phone svg {
    flex: 0 0 auto;
    width: calc(var(--btn) * 0.92);
    height: calc(var(--btn) * 0.92);
    margin: 0 calc(var(--btn) * 0.04);
  }

  .dw-round-icon--phone .dw-round-icon__label {
    display: block;
    flex: 0 0 auto;
    max-width: 0;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.2px;
    white-space: nowrap;
    transition: max-width 0.3s ease, padding 0.3s ease;
  }

  .branch-team .dw-round-icon--phone .dw-round-icon__label {
    font-size: 14px;
  }

  .dw-round-icons a.dw-round-icon.dw-round-icon--phone:hover,
  .dw-round-icons a.dw-round-icon.dw-round-icon--phone:focus-visible {
    transform: none;
  }

  /* the space after the number matches the handset's space before it, so
     the number sits centred on the whole pill */
  .dw-round-icon--phone:hover .dw-round-icon__label,
  .dw-round-icon--phone:focus-visible .dw-round-icon__label {
    max-width: 240px;
    padding-left: 4px;
    padding-right: calc(var(--btn) + 4px);
  }


  /* Team cards: not enough room to push the email button and dots along, so
     the pill opens OVER the email button instead (it is longer, so it covers
     it completely). The button keeps its round size; the label draws the
     pill behind the handset. */
  .branch-team .dw-round-icons a.dw-round-icon.dw-round-icon--phone {
    position: relative;
    z-index: 0;
    width: var(--btn);
    justify-content: center;
  }

  .branch-team .dw-round-icons a.dw-round-icon--phone .dw-round-icon__label {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    max-width: none;
    padding: 0 calc(var(--btn) + 4px);
    border-radius: 999px;
    background: #000;
    pointer-events: none;
    clip-path: inset(0 100% 0 0 round 999px);
    transition: clip-path 0.3s ease;
  }

  .branch-team .dw-round-icons a.dw-round-icon--phone:hover,
  .branch-team .dw-round-icons a.dw-round-icon--phone:focus-visible {
    z-index: 3;
  }

  .branch-team .dw-round-icons a.dw-round-icon--phone:hover .dw-round-icon__label,
  .branch-team .dw-round-icons a.dw-round-icon--phone:focus-visible .dw-round-icon__label {
    max-width: none;
    padding: 0 calc(var(--btn) + 4px);
    clip-path: inset(0 0 0 0 round 999px);
    pointer-events: auto;
  }
}

/* Icon sizes, as a share of the 44px button (so the smaller team buttons
   scale too). Phone, email and the clock hands are drawn on the full circle;
   the map pin fills its own box, so it is drawn smaller. */
.dw-round-icon svg {
  width: 92%;
  height: 92%;
}

/* WhatsApp / chat: the button IS the speech bubble - no circle behind it,
   the bubble filled red (currentColor) with three white dots inside. */
.dw-round-icon.dw-round-icon--whatsapp,
.medium-blue-box p a.dw-round-icon--whatsapp,
.dark-blue-box p a.dw-round-icon--whatsapp,
.light-blue-box p a.dw-round-icon--whatsapp {
  background: none;
  border-radius: 0;
  color: var(--branch-red, #e30613);
}

.dw-round-icon.dw-round-icon--whatsapp:hover,
.dw-round-icon.dw-round-icon--whatsapp:focus,
.medium-blue-box p a.dw-round-icon--whatsapp:hover,
.dark-blue-box p a.dw-round-icon--whatsapp:hover,
.light-blue-box p a.dw-round-icon--whatsapp:hover {
  background: none;
  color: #000;
}

.dw-round-icon--whatsapp svg {
  width: 100%;
  height: 100%;
}

.dw-round-icon--map svg {
  width: 48%;
  height: 48%;
}

.dw-round-icon--hours svg {
  width: 100%;
  height: 100%;
}

/* ---- Hero (standard heroBanner.php) on branches ------------------------ */
/* Matches the branch artwork: "Dewhot" / branch name on two lines (the name
   is in a <span> in the heading field), the three bold lines at ~60% of the
   heading size, the "We supply..." line smaller and light at ~45%, the same
   gap between the three parts, and the box sized to its content with equal
   padding all round. */

/* phones: the box spans the full width under the photo, so bigger type */
.branch-page .hero-text-container {
  padding-top: 40px;
  padding-bottom: 40px;
}

.branch-page .hero-text .banner-heading h1,
.branch-page .hero-text .banner-heading p {
  font-size: 40px;
  line-height: 100%;
  margin-bottom: 18px;
}

.branch-page .hero-text .banner-heading h1 span {
  display: block;
}

.branch-page .hero-text > p:first-of-type {
  font-size: 24px;
  line-height: 1.2;
  margin-bottom: 18px;
}

.branch-page .hero-text > p:last-of-type {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.35;
  margin-bottom: 0;
}

@media screen and (min-width: 600px) {
  .branch-page .hero-text .banner-heading h1,
  .branch-page .hero-text .banner-heading p {
    font-size: 48px;
    margin-bottom: 22px;
  }

  .branch-page .hero-text > p:first-of-type {
    font-size: 29px;
    margin-bottom: 22px;
  }

  .branch-page .hero-text > p:last-of-type {
    font-size: 21px;
  }
}

@media screen and (min-width: 768px) {
  /* the theme's box is a fixed square with the text absolutely centred;
     on branches it grows with its content and keeps even padding */
  .branch-page .hero-text-container {
    height: auto;
    max-height: none;
    padding: 40px;
  }

  .branch-page .hero-text-container .container {
    height: auto;
    overflow: visible;
  }

  .branch-page .hero-text {
    position: static;
    transform: none;
    width: auto;
  }

  .branch-page .hero-text .banner-heading h1,
  .branch-page .hero-text .banner-heading p {
    font-size: 30px;
    margin-bottom: 14px;
  }

  .branch-page .hero-text > p:first-of-type {
    font-size: 19px;
    margin-bottom: 14px;
  }

  .branch-page .hero-text > p:last-of-type {
    font-size: 15px;
  }
}

@media screen and (min-width: 992px) {
  .branch-page .hero-text-container {
    padding: 56px;
  }

  .branch-page .hero-text .banner-heading h1,
  .branch-page .hero-text .banner-heading p {
    font-size: 41px;
    margin-bottom: 20px;
  }

  .branch-page .hero-text > p:first-of-type {
    font-size: 25px;
    margin-bottom: 20px;
  }

  .branch-page .hero-text > p:last-of-type {
    font-size: 18px;
  }
}

/* ---- Intro: two coloured columns, edge to edge (branch-intro) ---------- */

.branch-intro .section-col.container-mod {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.branch-intro .section-col > .row {
  margin: 0;
}

.branch-intro .section-column {
  padding: 0;
}

.branch-intro .column-content {
  height: 100%;
  padding: 60px 30px;
}

.branch-intro .sec-text-col p {
  font-size: 18px;
  line-height: 1.45;
}

.branch-intro .sec-text-col p.branch-lead {
  font-size: 22px;
  line-height: 1.3;
  font-weight: 300;
}

.branch-intro .sec-text-col p.branch-lead strong {
  font-weight: 600;
}

.branch-intro .dw-round-icons {
  margin-top: 16px;
}

.branch-intro .sec-text-col h2 {
  font-size: 28px;
  line-height: 1.15;
  font-weight: 500; /* Hind medium, as in the design */
  margin-bottom: 30px;
}

@media screen and (min-width: 992px) {
  .branch-intro .section-column:first-child {
    flex: 0 0 63%;
    max-width: 63%;
  }

  .branch-intro .section-column:last-child {
    flex: 0 0 37%;
    max-width: 37%;
  }

  .branch-intro .section-column:first-child .column-content {
    padding: 110px 8% 110px 8vw;
  }

  .branch-intro .section-column:last-child .column-content {
    padding: 110px 6vw 110px 4.5vw;
  }

  .branch-intro .sec-text-col p {
    font-size: 21px;
  }

  .branch-intro .sec-text-col p.branch-lead {
    font-size: 28px;
  }

  .branch-intro .sec-text-col h2 {
    font-size: 32px;
    max-width: 300px;
  }
}

/* Tick lists: blue circle (branch-checks) or white circle (branch-ticks) */

.branch-page ul.branch-checks,
.branch-page ul.branch-ticks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.branch-page ul.branch-checks li,
.branch-page ul.branch-ticks li {
  position: relative;
  color: #fff;
}

.branch-page ul.branch-checks li::before,
.branch-page ul.branch-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  border-radius: 50%;
}

.branch-page ul.branch-checks li::after,
.branch-page ul.branch-ticks li::after {
  content: "";
  position: absolute;
  -webkit-mask: var(--branch-tick) center / contain no-repeat;
  mask: var(--branch-tick) center / contain no-repeat;
}

.branch-page ul.branch-checks li {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-left: 58px;
  margin-bottom: 28px;
  font-size: 21px;
  font-weight: 500; /* medium */
  line-height: 1.2;
}

.branch-page ul.branch-checks li::before {
  top: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  background: var(--branch-blue);
}

.branch-page ul.branch-checks li::after {
  left: 11.5px;
  top: 50%;
  width: 17px;
  height: 17px;
  margin-top: -8.5px;
  background: #f2f2f2;
}

.branch-page ul.branch-ticks li {
  padding-left: 38px;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 1.4;
}

.branch-page ul.branch-ticks li::before {
  top: 1px;
  width: 25px;
  height: 25px;
  background: #fff;
}

.branch-page ul.branch-ticks li::after {
  left: 6px;
  top: 7px;
  width: 13px;
  height: 13px;
  background: var(--branch-blue);
}

/* ---- Team slider (branch-team) ---------------------------------------- */

.branch-team .section-heading h2 {
  font-size: 32px;
  font-weight: 600;
}

/* Phones (below 768): edge to edge, no side gutter - the cards either side
   peek in from the screen edges (Slick centre mode / list padding). */
.branch-team .section-slider {
  width: 100%;
  max-width: none;
  margin: 30px 0 0;
  padding: 0;
}

/* From 768 the slider is exactly as wide as the text inside .container-mod
   (cali.css: 90vw with 30px padding; 900px with 15px; 85vw with 15px),
   so the outer card edges line up with the headings and the other sections.
   The list reaches 20px past each side to take up the cards' 20px padding;
   the arrows sit outside, in the page margin. */
@media screen and (min-width: 768px) {
  .branch-team .section-slider {
    width: calc(90vw - 60px);
    margin: 30px auto 0;
  }

  .branch-team .section-slider .slick-list {
    margin: 0 -20px;
  }
}

@media screen and (min-width: 992px) {
  .branch-team .section-slider {
    width: 870px;
  }
}

@media screen and (min-width: 1200px) {
  .branch-team .section-slider {
    width: calc(85vw - 30px);
  }
}

/* Equal-height cards: the slides stretch to the tallest card (cali.css) and
   each card fills its slide down to the grey panel, so the panels line up.
   The bio opens over the photo (below), so a card never changes height. */
.branch-team .section-slider .slick-slide {
  display: flex;
  flex-direction: column;
}

.branch-team .slider-box .slider-content,
.branch-team .slider-box .sec-text-image-block,
.branch-team .slider-box .slider-text {
  flex: 1 1 auto;
}

.branch-team .slider-box .slider-content {
  display: flex;
  flex-direction: column;
}

.branch-team .slider-box {
  padding: 0 20px;
  /* the narrow-card text sizes below go by the card's own width */
  container-type: inline-size;
}

/* 24px between cards from 992 (40px below) */
@media screen and (min-width: 992px) {
  .branch-team .slider-box {
    padding: 0 12px;
  }

  .branch-team .section-slider .slick-list {
    margin: 0 -12px;
  }
}

.branch-team .slider-content {
  padding: 0;
  width: 100%;
}

.branch-team .sec-text-image-block {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
}

.branch-team .slider-text-image {
  aspect-ratio: 346 / 310;
  overflow: hidden;
  margin: 0;
}

.branch-team .slider-text-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.branch-team .sec-text-image-block {
  position: relative; /* holds the pinned button row and the bio overlay */
}

.branch-team .slider-text {
  background: var(--branch-card);
  /* bottom padding leaves room for the button row pinned below:
     24px gap + 34px buttons + 24px gap */
  padding: 22px 30px 82px 40px;
}

.branch-team .slider-text h3 {
  font-size: 22px;
  font-weight: 500; /* names: Hind medium */
  margin: 0 0 2px;
  color: #000;
}

.branch-team .slider-text p {
  margin: 0;
  color: #000;
}

.branch-team .slider-text p.team-role {
  font-size: 16px;
  line-height: 1.3;
  margin-bottom: 10px;
}

/* Phone / email / "..." row pinned to the bottom of every card, so the
   buttons line up across the slider whatever the length of the role. */
.branch-team .slider-text p.team-contact {
  position: absolute;
  left: 40px;
  right: 30px;
  bottom: 24px;
  margin: 0;
}

.branch-team .team-contact .dw-round-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.branch-team .dw-round-icon {
  width: 34px;
  height: 34px;
}

/* "..." button: three red dots; a red close cross while the bio is open.
   Fixed size, so the row doesn't shift when it swaps. */
.dw-more-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* no focus box after a click (the blue box); keyboard users still get the
   dots / cross growing on focus, below */
.dw-more-toggle:focus {
  outline: none;
  box-shadow: none;
}

.dw-more-toggle::before,
.dw-more-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 3px;
  margin: -1.5px 0 0 -11px;
  border-radius: 2px;
  background: var(--branch-red, #e30613);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dw-more-toggle::before { transform: rotate(45deg) scale(0.4); }
.dw-more-toggle::after  { transform: rotate(-45deg) scale(0.4); }

.is-open .dw-more-toggle span {
  opacity: 0;
  transform: scale(0);
}

.is-open .dw-more-toggle::before { opacity: 1; transform: rotate(45deg); }
.is-open .dw-more-toggle::after  { opacity: 1; transform: rotate(-45deg); }

.is-open .dw-more-toggle:hover::before,
.is-open .dw-more-toggle:focus-visible::before { transform: rotate(45deg) scale(1.15); }
.is-open .dw-more-toggle:hover::after,
.is-open .dw-more-toggle:focus-visible::after  { transform: rotate(-45deg) scale(1.15); }

.dw-more-toggle span {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--branch-red, #e30613);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.dw-more-toggle:hover span,
.dw-more-toggle:focus-visible span {
  transform: scale(1.25);
}

/* Bio: opens OVER the card - photo, name and role - down to the button row,
   so nothing moves and the buttons (with the close cross) stay in view.
   Scrolls only if the text is longer than the card. */
.branch-team .team-bio {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 82px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 28px 30px 20px 40px;
  background: var(--branch-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.branch-team .is-open .team-bio {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

.branch-team .team-bio p {
  font-size: 16px;
  line-height: 1.35;
}

.branch-team .team-bio p:last-child {
  margin-bottom: 0;
}

.branch-team .slick-prev,
.branch-team .slick-next {
  top: 40%;
}

/* Arrows (50px boxes) centred in the page margin beside the cards. */
@media screen and (min-width: 768px) {
  .branch-team .slick-prev { left: calc(-2.5vw - 40px); }
  .branch-team .slick-next { right: calc(-2.5vw - 40px); }
}

@media screen and (min-width: 992px) {
  .branch-team .slick-prev { left: calc(192.5px - 25vw); }
  .branch-team .slick-next { right: calc(192.5px - 25vw); }
}

@media screen and (min-width: 1200px) {
  .branch-team .slick-prev { left: calc(-3.75vw - 32.5px); }
  .branch-team .slick-next { right: calc(-3.75vw - 32.5px); }
}

@media screen and (max-width: 599px) {
  .branch-team .slider-box {
    padding: 0 8px;
  }

  .branch-team .slider-text {
    padding: 20px 20px 80px;
  }

  .branch-team .slider-text p.team-contact {
    left: 20px;
    right: 20px;
    bottom: 22px;
  }

  .branch-team .team-bio {
    bottom: 80px;
    padding: 30px 20px 12px;
  }

}

/* Phones and small tablets (below 768): the open bio's text is sized from the
   card's own width (cqi = 1% of the card, .slider-box is a size container),
   so each card gets the biggest text that still fits the longest bio - about
   15.5px on a 390px phone, 17.5px at 430, up to 18px; never below 13px on the
   narrowest cards (320 screens, and 480-519 where Slick's side peeks grow). */
@media screen and (max-width: 767px) {
  .branch-team .team-bio {
    padding-top: 24px;
    padding-bottom: 10px;
  }

  .branch-team .team-bio p {
    font-size: clamp(13px, 5.5cqi, 18px);
    line-height: 1.3;
  }
}

/* Narrow team cards (under 310px wide - e.g. 2 per row near 768, 3 per row
   at 992-1199, 4 at 1400+, 5 at 1700+): smaller name and bio text so every bio fits. A
   container query on .slider-box, so it follows the card width, not the
   screen width. From 768 - phones have their own sizes above. */
@media screen and (min-width: 768px) {
  @container (max-width: 309px) {
    .branch-team .slider-box .slider-text h3 {
      font-size: 20px;
    }

    .branch-team .slider-box .slider-text {
      padding-left: 30px;
      padding-right: 24px;
    }

    .branch-team .slider-box .slider-text p.team-contact {
      left: 30px;
      right: 24px;
    }

    .branch-team .slider-box .team-bio {
      padding: 22px 24px 12px 30px;
    }

    .branch-team .slider-box .team-bio p {
      font-size: 14px;
      line-height: 1.3;
    }
  }
}

/* ---- Photo strip (branch-strip) ---------------------------------------- */

.branch-strip .section-block {
  display: flex;
}

.branch-strip .section-block > .third {
  flex: 1 1 0;
  min-width: 0;
  position: static;
}

.branch-strip .sec-image-block {
  position: static;
  height: auto;
  aspect-ratio: 476 / 385;
}

.branch-strip .sec-image-block img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Product ranges (branch-ranges) ------------------------------------ */
/* Rounded pills with the tick inside, in staggered rows: every other row is
   pushed right by half a pill, and a faint outline pill runs off each end of
   every row. 1 per row on phones, 2 from 768, 3 from 992. The pills are sized
   so a row plus the half-pill shift exactly fills the container (n + 0.5
   pills across), so the first row starts on the heading's edge and the shifted
   row ends on the container's right edge. The outline pills are decoration
   only (pseudo-elements). --pill-h height, --gap between pills (across and
   down). */

.branch-ranges {
  overflow: hidden;
  --pill-h: 44px;
  --gap: 12px;
  --per-row: 1;
}

/* same width as the heading's container (.container-mod), not the wider
   .section-col one, so the pills line up with the heading: full width below
   576, 90vw to 991, then 900px and 85vw (below) */
.branch-ranges .section-col.container-mod {
  max-width: none;
}

@media screen and (min-width: 576px) {
  .branch-ranges .section-col.container-mod {
    max-width: 90vw;
  }
}

.branch-ranges .section-heading h2 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 30px;
}

.branch-ranges .section-col > .row {
  margin-left: calc(var(--gap) / -2);
  margin-right: calc(var(--gap) / -2);
  flex-wrap: wrap;
  row-gap: var(--gap); /* same as the gap between pills; replaces the theme's 40px on .row-eq-height */
}

.branch-ranges .section-col .section-column {
  position: relative;
  flex: 0 0 calc(100% / (var(--per-row) + 0.5));
  max-width: calc(100% / (var(--per-row) + 0.5));
  padding: 0 calc(var(--gap) / 2);
  margin-bottom: 0;
}

.branch-ranges .column-content,
.branch-ranges .sec-text-col,
.branch-ranges .sec-text-col p {
  margin: 0;
  padding: 0;
  height: 100%;
}

.branch-ranges a.branch-pill,
.dark-blue-box p a.branch-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--pill-h);
  /* same padding both sides, so the label is centred on the whole pill */
  padding: 0 calc(var(--pill-h) + 2px);
  border-radius: 999px;
  background: var(--branch-blue);
  color: #fff;
  font-size: 17px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

/* "Gas " hidden on phones (below) - it is its own flex item inside the pill,
   so keep its trailing space where it shows */
.branch-ranges .pill-hide-mobile {
  white-space: pre;
}

/* tick in a white circle, inside the pill on the left. --dot is the circle's
   share of the pill height; the gap on its left equals the gap above and
   below it: (pill height - circle) / 2. */
.branch-ranges a.branch-pill {
  --dot-size: calc(var(--pill-h) * var(--dot, 0.5)); /* 0.54 below 768 */
  --dot-gap: calc((var(--pill-h) - var(--dot-size)) / 2);
}

.branch-ranges a.branch-pill::before {
  content: "";
  position: absolute;
  left: var(--dot-gap);
  top: 50%;
  width: var(--dot-size);
  height: var(--dot-size);
  transform: translateY(-50%);
  border-radius: 50%;
  background: #f2f2f2;
}

.branch-ranges a.branch-pill::after {
  content: "";
  position: absolute;
  left: calc(var(--dot-gap) + var(--dot-size) * 0.235);
  top: 50%;
  width: calc(var(--dot-size) * 0.53);
  height: calc(var(--dot-size) * 0.53);
  transform: translateY(-50%);
  background: var(--branch-blue);
  -webkit-mask: var(--branch-tick) center / contain no-repeat;
  mask: var(--branch-tick) center / contain no-repeat;
}

.branch-ranges a.branch-pill:hover,
.branch-ranges a.branch-pill:focus,
.dark-blue-box p a.branch-pill:hover {
  background: var(--branch-red);
  color: #fff;
  transform: translateY(-3px); /* slight rise, like the round contact buttons */
}

@media (prefers-reduced-motion: reduce) {
  .branch-ranges a.branch-pill:hover,
  .branch-ranges a.branch-pill:focus {
    transform: none;
  }
}

/* Outline pills off the ends of a row: the first pill of a row draws one to
   its left (::before), the last draws one to its right (::after). Which pills
   are first / last depends on how many fit per row - set below with content. */
.branch-ranges .section-column::before,
.branch-ranges .section-column::after {
  position: absolute;
  top: 0;
  width: calc(100% - var(--gap));
  height: var(--pill-h);
  border: 1.5px solid rgba(35, 96, 146, 0.75);
  border-radius: 999px;
  pointer-events: none;
}

.branch-ranges .section-column::before { right: calc(100% + var(--gap) / 2); }
.branch-ranges .section-column::after  { left: calc(100% + var(--gap) / 2); }

/* Shorter labels where the pills are narrowest - below 480, 600-849 (two
   per row) and 992-1399:
   "Gas " is wrapped in .pill-hide-mobile on the longer ones
   (Gas Space Heaters -> Space Heaters, Gas Accessories -> Accessories). */
@media screen and (max-width: 479px), screen and (min-width: 600px) and (max-width: 849px), screen and (min-width: 992px) and (max-width: 1399px) {
  .branch-ranges .pill-hide-mobile {
    display: none;
  }
}

/* smaller tick circle below 768 */
@media screen and (max-width: 767px) {
  .branch-ranges {
    --dot: 0.54;
  }
}

/* Phones: one per row; every other row shifted by half a pill */
@media screen and (max-width: 599px) {
  .branch-ranges .section-column:nth-child(even) {
    transform: translateX(50%);
  }
  .branch-ranges .section-column::before,
  .branch-ranges .section-column::after {
    content: "";
  }
}

/* Large phones / small tablets: two per row from 600 */
@media screen and (min-width: 600px) {
  .branch-ranges {
    --per-row: 2;
    --gap: 14px;
  }
}

@media screen and (min-width: 600px) and (max-width: 767px) {
  .branch-ranges {
    --pill-h: 42px;
  }
}

@media screen and (min-width: 600px) and (max-width: 679px) {
  .branch-ranges a.branch-pill,
  .dark-blue-box p a.branch-pill {
    font-size: 15px;
  }
}

/* Tablet: two per row; rows 2, 4... shifted (pattern from 600, below) */
@media screen and (min-width: 768px) {
  .branch-ranges {
    --pill-h: 54px;
    --gap: 22px;
    --per-row: 2;
  }

  .branch-ranges a.branch-pill,
  .dark-blue-box p a.branch-pill {
    font-size: 19px;
  }
}

@media screen and (min-width: 600px) and (max-width: 991px) {
  .branch-ranges .section-column:nth-child(4n + 3),
  .branch-ranges .section-column:nth-child(4n + 4) {
    transform: translateX(50%);
  }
  .branch-ranges .section-column:nth-child(odd)::before,
  .branch-ranges .section-column:nth-child(even)::after {
    content: "";
  }
}

/* Desktop: three per row (col-lg-4); rows 2, 4... shifted */
@media screen and (min-width: 992px) {
  .branch-ranges {
    --pill-h: 58px;
    --gap: 28px;
    --per-row: 3;
  }

  .branch-ranges .section-col.container-mod {
    max-width: 900px;
  }

  .branch-ranges .section-heading h2 {
    font-size: 38px;
  }

  .branch-ranges a.branch-pill,
  .dark-blue-box p a.branch-pill {
    font-size: 23px;
  }

  .branch-ranges .section-column:nth-child(6n + 4),
  .branch-ranges .section-column:nth-child(6n + 5),
  .branch-ranges .section-column:nth-child(6n + 6) {
    transform: translateX(50%);
  }
  .branch-ranges .section-column:nth-child(3n + 1)::before,
  .branch-ranges .section-column:nth-child(3n)::after {
    content: "";
  }
}

/* narrowest pill widths in each range: one size smaller so the longest
   label stays on one line inside the pill */
@media screen and (max-width: 379px) {
  .branch-ranges {
    --pill-h: 40px;
  }

  .branch-ranges a.branch-pill,
  .dark-blue-box p a.branch-pill {
    font-size: 15px;
  }
}

@media screen and (max-width: 359px) {
  .branch-ranges a.branch-pill,
  .dark-blue-box p a.branch-pill {
    font-size: 14px;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .branch-ranges {
    --pill-h: 54px;
  }

  .branch-ranges a.branch-pill,
  .dark-blue-box p a.branch-pill {
    font-size: 18px;
  }
}

@media screen and (min-width: 1200px) {
  .branch-ranges .section-col.container-mod {
    max-width: 85vw;
  }
}

/* ---- Areas + why visit (branch-areas) ---------------------------------- */

.branch-areas .sec-text-col h2 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 20px;
}

.branch-areas .sec-text-col p {
  font-size: 18px;
  line-height: 1.9;
}

.branch-areas .section-column + .section-column {
  margin-top: 30px;
}

@media screen and (min-width: 992px) {
  .branch-areas .section-column + .section-column {
    margin-top: 0;
  }

  .branch-areas .sec-text-col h2 {
    font-size: 36px;
  }

  .branch-areas .sec-text-col p {
    font-size: 20px;
    line-height: 2;
    max-width: 440px;
  }
}

/* ---- Reviews ------------------------------------------------------------ */

.branch-page .home-testimonials h2 {
  font-weight: 400;
}

.branch-page .home-testimonials h2 strong {
  font-weight: 600;
}

/* ---- Visit section (template-parts/branchVisit.php) -------------------- */

.branch-visit__intro h2 {
  font-size: 28px;
  font-weight: 400;
  margin-bottom: 20px;
}

.branch-visit__intro h2 strong {
  font-weight: 600;
}

.branch-visit__intro p {
  font-size: 18px;
  line-height: 1.5;
  max-width: 1080px;
}

.branch-visit__grid {
  display: grid;
  gap: 30px;
  margin-top: 40px;
}

.branch-visit__map {
  position: relative;
  aspect-ratio: 640 / 355;
  background: #e9e9e9;
}

.branch-visit__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.branch-visit__details h3 {
  color: #fff;
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 12px;
}

.branch-visit__details h3 + .branch-hours,
.branch-visit__details h3 + .branch-address {
  margin-bottom: 30px;
}

.branch-page .branch-hours {
  margin: 0;
}

.branch-page .branch-hours__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: 17px;
  line-height: 1.45;
}

.branch-page .branch-hours dt {
  font-weight: 600;
}

.branch-page .branch-hours dd {
  margin: 0;
}

.branch-visit .branch-hours,
.branch-visit .branch-address,
.branch-visit .branch-parking {
  color: #fff;
}

.branch-page .branch-address {
  font-style: normal;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
}

.branch-visit__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 10px;
}

.branch-visit__actions .btn {
  margin: 0;
}

@media screen and (min-width: 992px) {
  .branch-visit__intro h2 {
    font-size: 36px;
  }

  .branch-visit__intro p {
    font-size: 20px;
  }

  .branch-visit__grid {
    /* map 60% / details 40% - a fixed 640px map left the details only
       ~185px wide at 992, so the headings and address wrapped badly */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 45px;
    align-items: stretch;
  }

  /* the map fills the full height of the details column beside it */
  .branch-visit__map {
    aspect-ratio: auto;
    height: 100%;
    min-height: 300px;
  }
}

/* ---- Hub (archive-branch.php) ------------------------------------------ */

.branch-hub__col {
  margin-bottom: 30px;
}

.branch-hub__card {
  height: 100%;
  padding: 30px;
}

.branch-hub__card h2 {
  font-size: 26px;
}

.branch-hub__card h2 a {
  color: inherit;
}

.branch-hub__card .dw-round-icons {
  margin: 10px 0 20px;
}