/* =========================================================================
   Choosing a Gas Geyser  -  icon rows for the section generator
   Mobile first: base rules are the phone layout, min-width queries add to it.
   ========================================================================= */

.dw-iconrow {
  --dw-navy:   #00263e;
  --dw-blue:   #316a9d;
  --dw-teal:   #00aeac;
  --dw-red:    #ea0029;
  --dw-grey:   #ccd4d8;
  --dw-size:   clamp(106px, 27vw, 160px);  /* step circles: 106 on phones (PDF), 160 on desktop */
  --dw-chip:   clamp(46px, 13vw, 88px);    /* chip squares  */
  --dw-inline: clamp(26px, 7vw, 34px);     /* inline glyphs */

  display: flex;
  flex-wrap: wrap;                 /* connectors wrap with the icons */
  align-items: flex-start;
  /* Dewhot is a left-aligned layout, so rows start at the container edge.
     Centring is opt-in per row via the Row Alignment field. */
  justify-content: flex-start;
  column-gap: clamp(8px, 3vw, 26px);
  row-gap: clamp(20px, 5vw, 34px);
}

.dw-iconrow--left   { justify-content: flex-start; }
.dw-iconrow--centre { justify-content: center; }

/* never let a long row push the page sideways */
.dw-iconrow,
.dw-iconrow__cell,
.dw-iconrow__item { min-width: 0; max-width: 100%; }

/* ---- a cell = the connector that introduces an icon, plus the icon ----
   Keeping them in one flex child means a connector never gets stranded at the
   end of a line: it wraps down together with the icon it belongs to.        */
.dw-iconrow__cell {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  column-gap: clamp(8px, 3vw, 26px);
}

/* ---- one icon + its caption ---- */
.dw-iconrow__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: var(--dw-size);
}

/* Caption alignment follows the STYLE, not the row alignment: a short caption
   under a circle reads best centred on its circle, while a feature block is a
   heading plus body copy and must be left aligned whatever the row does. */
.dw-iconrow--compare .dw-iconrow__item { align-items: flex-start; text-align: left; }

/* Caption line control. Each intended line is its own .dw-line span: block on
   mobile so the caption breaks exactly where the design breaks it, inline from
   768 so it runs as one line. .dw-line--fixed stays broken at every size. */
.dw-iconrow__label .dw-line { display: block; }

.dw-iconrow__label {
  margin-top: 12px;
  font-size: clamp(13px, 3.4vw, 16px);
  font-weight: 500;
  line-height: 1.3;
  color: inherit;
}

/* A caption that marks part of itself up as <b> reads as light text with the
   key words picked out, so the base drops to light and the <b> to 500.
   Captions with no emphasis (Basin /sink, Total Water Demand) stay at 600. */
.dw-iconrow__label:has(b),
.dw-iconrow__label:has(strong) { font-weight: 300; }

.dw-iconrow__label b,
.dw-iconrow__label strong { font-weight: 500; }

/* ---- the shape ---- */
.dw-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--dw-size);
  height: var(--dw-size);
  border-radius: 50%;
  color: #fff;                     /* glyph colour, via currentColor */
  flex: 0 0 auto;
}

/* Round shapes clip their contents, so the number/tick tag's top corners are
   cut by the circle's curve instead of sitting on it as a floating chip.
   Chips are deliberately NOT clipped - their mark is a corner badge that
   overhangs the square. */
.dw-icon--navy,
.dw-icon--blue,
.dw-icon--teal,
.dw-icon--red,
.dw-icon--grey { overflow: hidden; }

.dw-icon--navy { background: var(--dw-navy); }
.dw-icon--blue { background: var(--dw-blue); }
.dw-icon--teal { background: var(--dw-teal); }
.dw-icon--red  { background: var(--dw-red);  }
.dw-icon--grey { background: var(--dw-grey); color: var(--dw-blue); }

.dw-icon--chip-blue,
.dw-icon--chip-teal {
  width: var(--dw-chip);
  height: calc(var(--dw-chip) * 1.13);
  border-radius: 10px;
}
.dw-icon--chip-blue { background: var(--dw-blue); }
.dw-icon--chip-teal { background: var(--dw-teal); }

.dw-icon--bare {
  width: var(--dw-inline);
  height: var(--dw-inline);
  background: none;
  border-radius: 0;
  color: var(--dw-navy);
}

/* ---- the glyph: one SVG, recoloured by CSS ----
   --dw-glyph is set inline per item by the section generator.        */
.dw-icon__glyph {
  display: block;
  width: 52%;
  height: 52%;
  background: currentColor;
  -webkit-mask: var(--dw-glyph) center / contain no-repeat;
          mask: var(--dw-glyph) center / contain no-repeat;
}
.dw-icon--bare .dw-icon__glyph,
.dw-icon--chip-blue .dw-icon__glyph,
.dw-icon--chip-teal .dw-icon__glyph { width: 74%; height: 74%; }

/* ---- number tag / tick tag ----
   Proportions measured off the reference artwork: 15.1% of the circle diameter
   wide, reaching ~21% down into it. The circle clips it, so the top corners
   follow the curve. Square corners, no padding: a fixed shape, not a text chip
   that grows with its content. */
.dw-icon__badge,
.dw-icon__mark {
  position: absolute;
  top: -2%;
  left: 50%;
  transform: translateX(-50%);
  width: 15.1%;
  height: 23%;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.dw-icon__badge {
  background: var(--dw-red);
  color: #fff;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  font-size: max(11px, calc(var(--dw-size) * 0.1));
}

.dw-icon__mark {
  background-color: var(--dw-navy);
  color: #fff;
}
.dw-icon__mark--cross { background-color: var(--dw-red); }

.dw-icon__mark::after {
  content: "";
  width: 60%;
  aspect-ratio: 1;
  background: currentColor;
  -webkit-mask: var(--dw-glyph) center / contain no-repeat;
          mask: var(--dw-glyph) center / contain no-repeat;
}

/* on the square chips the mark is a corner badge, not a hanging tag */
.dw-icon--chip-blue .dw-icon__mark,
.dw-icon--chip-teal .dw-icon__mark {
  top: -12%;
  left: auto;
  right: -6%;
  transform: none;
  width: 34%;
  height: 30%;
}

/* ---- connectors: + = or vs ---- */
.dw-iconrow__op {
  flex: 0 0 auto;
  align-self: flex-start;
  /* sit on the centre line of the shape, not of the shape + caption */
  margin-top: calc(var(--dw-size) / 2 - 0.6em);
  display: grid;
  place-items: center;
  font-weight: 700;
  line-height: 1;
  color: var(--dw-navy);
  font-size: clamp(18px, 5vw, 30px);
}

/* the round tokens ("or" and "vs" sit in a filled disc) */
.dw-iconrow__op--or,
.dw-iconrow__op--vs {
  /* same disc as .dw-vs in the two-column rows, so the two "vs" marks on the
     page are one size rather than two */
  width: 56px;
  height: 56px;
  border-radius: 50%;
  font-size: 15px;
  text-transform: lowercase;
  color: #fff;
}
.dw-iconrow__op--or { background: var(--dw-red); }
.dw-iconrow__op--vs { background: var(--dw-navy); }

/* on dark section backgrounds */
.dark-blue-box .dw-iconrow,
.medium-blue-box .dw-iconrow,
.light-blue-box .dw-iconrow,
.black-box .dw-iconrow { color: #fff; }

.dark-blue-box .dw-iconrow__op,
.medium-blue-box .dw-iconrow__op,
.light-blue-box .dw-iconrow__op,
.black-box .dw-iconrow__op { color: #fff; }

.dark-blue-box .dw-icon--bare,
.medium-blue-box .dw-icon--bare,
.light-blue-box .dw-icon--bare,
.black-box .dw-icon--bare { color: #fff; }

/* =========================================================================
   Steps rows on mobile: a real 2-column grid so the circles line up in columns.
   The connectors come OUT of the flow and sit in the gutters - in flow they
   take up width and shove each circle sideways, so row 2 never lines up with
   row 1. From 768 it becomes a single flex row again.
   ========================================================================= */
.dw-iconrow--steps {
  --dw-gap: clamp(34px, 10vw, 52px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--dw-gap);
  row-gap: clamp(24px, 6vw, 36px);
}

/* the cell fills its column so the connector can be placed off the column
   edge rather than off the icon, which is what kept it hugging the circle */
.dw-iconrow--steps .dw-iconrow__cell {
  position: relative;
  width: 100%;
  justify-content: center;
}

/* centred on the circle vertically, and centred in the gap horizontally:
   half the column gap to the left of the column edge. Because the circles are
   centred in equal columns, that is exactly midway between the two circles. */
.dw-iconrow--steps .dw-iconrow__op {
  position: absolute;
  left: 0;
  top: calc(var(--dw-size) / 2);
  transform: translate(calc(-50% - var(--dw-gap) / 2), -50%);
  margin: 0;
}

/* A connector on a LEFT-column cell is a wrapped one - there is no circle to
   its left, so the gutter formula would fling it out to the container edge.
   Tuck it just off the circle instead. */
.dw-iconrow--steps .dw-iconrow__cell:nth-child(odd) .dw-iconrow__op {
  left: calc((100% - var(--dw-size)) / 2);
  transform: translate(calc(-100% - clamp(8px, 2.5vw, 16px)), -50%);
}

/* =========================================================================
   Feature rows: a small icon beside its caption, any number of items.
   One per line on phones, then all on one line from 768 with the cells
   sharing the row equally. These are a supporting step list rather than
   headline circles, so the shape is much smaller than a steps circle.
   ========================================================================= */
.dw-iconrow--feature {
  --dw-size: clamp(60px, 15vw, 68px);
  flex-wrap: wrap;
  column-gap: clamp(20px, 4vw, 40px);
  row-gap: clamp(22px, 5vw, 30px);
}

.dw-iconrow--feature .dw-iconrow__cell { flex: 0 0 100%; }

.dw-iconrow--feature .dw-iconrow__item {
  flex-direction: row;
  align-items: center;
  text-align: left;
  column-gap: clamp(14px, 3vw, 20px);
  width: 100%;
  max-width: none;
}

.dw-iconrow--feature .dw-icon { flex: 0 0 auto; }

.dw-iconrow--feature .dw-iconrow__label {
  flex: 1 1 auto;
  margin-top: 0;
  font-size: 17px;
  font-weight: 300;
}

/* 992, not 768: the captions are set on two fixed lines at 17px, and three of
   those side by side need most of a 950px row - below that they stay stacked,
   one step per line. The gaps tighten in the 992-1199 band so the fixed lines
   still fit without wrapping further. */
@media (min-width: 992px) {
  /* .dw-iconrow doubled up so this beats the later generic column-gap rule */
  .dw-iconrow.dw-iconrow--feature { flex-wrap: nowrap; column-gap: clamp(16px, 3.5vw, 46px); }
  /* basis auto, not 0: the cells then start from their own text width and
     share the slack, so a longer caption gets a wider column instead of all
     three being equal and one of them running an extra line. */
  .dw-iconrow--feature .dw-iconrow__cell { flex: 1 1 auto; min-width: 0; }
}

/* =========================================================================
   Compare rows: a two-up pair (icon beside heading + tick list).
   Mobile stacks the two halves full width with the connector between them.
   From 768 they sit side by side at half the row each, and the connector
   comes out of the flow into the gutter so it never eats column width.
   Distinct from "feature", which puts its caption UNDER the icon and takes
   any number of items.
   ========================================================================= */
.dw-iconrow--compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: clamp(24px, 6vw, 34px);
}

.dw-iconrow--compare .dw-iconrow__cell {
  position: relative;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  /* matches the grid's row-gap, so the connector sits an equal distance from
     the block above it and the block below it */
  row-gap: clamp(24px, 6vw, 34px);
}

/* Stacked, the connector is a divider between the two halves: on the left
   edge with the icons, and with no top margin (that margin exists only to drop
   it onto the circle's centre line when the two sit side by side). */
.dw-iconrow--compare .dw-iconrow__op {
  align-self: center;
  position: relative;
  margin-top: 0;
}

/* PREVIEW: a rule running out to both edges from the connector. The rules are
   over-long and clipped by the row, which saves working out an exact width. */
.dw-iconrow--compare { overflow: hidden; }

.dw-iconrow--compare .dw-iconrow__op--vs::before,
.dw-iconrow--compare .dw-iconrow__op--vs::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100vw;
  height: 1px;
  background: #00263e;
}

.dw-iconrow--compare .dw-iconrow__op--vs::before { right: 100%; margin-right: 14px; }
.dw-iconrow--compare .dw-iconrow__op--vs::after  { left: 100%;  margin-left: 14px; }

/* Caption under the icon, as the design has it. It only moves beside the icon
   at 1200, where the container stops growing and there is room for both.
   The circle-width cap that keeps a step caption tucked under its circle is
   dropped, since this caption is a heading plus a tick list. */
.dw-iconrow--compare .dw-iconrow__item {
  flex-direction: column;
  column-gap: clamp(16px, 3.5vw, 28px);
  width: 100%;
  max-width: none;
}

.dw-iconrow--compare .dw-icon { flex: 0 0 auto; }

.dw-iconrow--compare .dw-iconrow__label {
  display: block;
  flex: 1 1 auto;
  margin-top: 14px;
  font-size: inherit;
  font-weight: 400;
}

.dw-iconrow--compare .dw-iconrow__label > *:first-child { margin-top: 0; }
.dw-iconrow--compare .dw-iconrow__label > *:last-child  { margin-bottom: 0; }

@media (min-width: 768px) {
  /* the two halves sit side by side from here, so a full-width rule would run
     straight across both of them */
  .dw-iconrow--compare { overflow: visible; }
  .dw-iconrow--compare .dw-iconrow__op--vs::before,
  .dw-iconrow--compare .dw-iconrow__op--vs::after { display: none; }

  /* .dw-iconrow doubled up: a later generic `.dw-iconrow { column-gap }` rule
     in this file sits at the same specificity and would otherwise win on
     source order, leaving the connector's gutter maths out of step. */
  .dw-iconrow.dw-iconrow--compare {
    /* wide enough that the 46px connector clears both columns: at 768 this
       leaves ~21px either side, growing to ~42px at 1200. */
    --dw-gap: clamp(88px, 11vw, 130px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--dw-gap);
    align-items: start;
  }

  /* On the circle's centre line, and centred between the two CIRCLES rather
     than between the two columns - in this band the text sits under the icon,
     so column 1's right half is empty and gutter-centring reads as if the dot
     belongs to the second circle.
       circle 1 ends at 160px (var(--dw-size)) from the column's left edge,
       circle 2 starts at the second column's left edge, so the midpoint is
       -50% of a column - half the gutter + half a circle, measured from
       cell 2's left edge.
     Restored to plain gutter-centring at 1200, where the text moves back
     beside the icon and both halves are visually full width. */
  .dw-iconrow--compare .dw-iconrow__op {
    position: absolute;
    top: calc(var(--dw-size) / 2);
    left: calc(-50% + (var(--dw-size) / 2) - (var(--dw-gap) / 2));
    transform: translate(-50%, -50%);
    margin: 0;
  }

}

@media (min-width: 1200px) {
  /* container is at its cap, so there is room to sit side by side again */
  .dw-iconrow--compare .dw-iconrow__item { flex-direction: row; }
  .dw-iconrow--compare .dw-iconrow__label { margin-top: 0; }

  /* text is beside the icon again, so the halves read as full columns and the
     connector belongs in the middle of the gutter */
  .dw-iconrow--compare .dw-iconrow__op {
    left: 0;
    transform: translate(calc(-50% - var(--dw-gap) / 2), -50%);
  }
}

/* ---- tick bullets, coloured to match the icon they sit beside ---- */
.dw-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dw-ticks li {
  position: relative;
  padding-left: 34px;
  margin: 0 0 10px;
}

.dw-ticks li:last-child { margin-bottom: 0; }

.dw-ticks li::before,
.dw-ticks li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.12em;
  width: 22px;
  height: 22px;
}

.dw-ticks li::before {
  border-radius: 50%;
  background: var(--dw-tick, #00aeac);
}

/* white tick drawn as a mask so it inherits no fill from the source file */
.dw-ticks li::after {
  background: #fff;
  -webkit-mask: url("../images/icons/tick.svg") center / 11px 11px no-repeat;
          mask: url("../images/icons/tick.svg") center / 11px 11px no-repeat;
}

.dw-ticks--blue { --dw-tick: #316a9d; }
.dw-ticks--navy { --dw-tick: #00263e; }

/* ---- inline style: small glyphs reading as a sentence ---- */
.dw-iconrow--inline {
  justify-content: flex-start;
  column-gap: clamp(6px, 2vw, 12px);
  row-gap: 10px;
  align-items: center;
}
.dw-iconrow--inline .dw-iconrow__item { max-width: none; }
.dw-iconrow--inline .dw-iconrow__cell { align-items: center; column-gap: clamp(6px, 2vw, 12px); }
.dw-iconrow--inline .dw-iconrow__label { margin-top: 6px; font-weight: 400; }
.dw-iconrow--inline .dw-iconrow__op { margin-top: 0; align-self: center; }

/* chips sit tighter together and centre their connector on the chip */
.dw-iconrow--steps .dw-icon--chip-blue,
.dw-iconrow--steps .dw-icon--chip-teal { --dw-size: var(--dw-chip); }
.dw-iconrow__cell:has(.dw-icon--chip-blue) .dw-iconrow__op,
.dw-iconrow__cell:has(.dw-icon--chip-teal) .dw-iconrow__op {
  margin-top: calc(var(--dw-chip) / 2 - 0.6em);
}

/* =========================================================================
   Tablet and up
   ========================================================================= */
@media screen and (min-width: 768px) {
  .dw-iconrow      { column-gap: clamp(16px, 2.5vw, 34px); }
  .dw-iconrow__item { max-width: calc(var(--dw-size) * 1.35); }

  .dw-iconrow__label .dw-line          { display: inline; }
  .dw-iconrow__label .dw-line--fixed   { display: block; }

}

/* Tablet: 3 across, then the 4th on its own line. A wrapping flex row centres
   that second line as a UNIT, so the = shoves the last circle off-centre.
   A 3-column grid with the 4th cell placed in column 2 puts it exactly under
   the middle circle, and the = sits in the gutter beside it. */
@media screen and (min-width: 768px) {
  .dw-iconrow--steps {
    --dw-gap: clamp(24px, 4vw, 40px);
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--dw-gap);
  }

  .dw-iconrow--steps .dw-iconrow__cell:nth-child(4) { grid-column: 2; }

  /* the phone-only "first in its row" tuck-in does not apply here - cell 3 is
     mid-row now, so every connector uses the gutter formula */
  .dw-iconrow--steps .dw-iconrow__cell:nth-child(odd) .dw-iconrow__op {
    left: 0;
    transform: translate(calc(-50% - var(--dw-gap) / 2), -50%);
  }
}

/* Desktop: the whole equation fits on one line, connectors back in the flow. */
@media screen and (min-width: 992px) {
  .dw-iconrow--steps {
    display: flex;
    flex-wrap: nowrap;
    column-gap: clamp(16px, 2.5vw, 34px);
  }
  .dw-iconrow--steps .dw-iconrow__cell { position: static; width: auto; }

  /* Both selectors listed: the phone wrapped-connector rule is
     .dw-iconrow__cell:nth-child(odd) .dw-iconrow__op (0,4,0), which outranks a
     plain .dw-iconrow--steps .dw-iconrow__op (0,2,0) even inside this query -
     so its transform would survive and shove the second + sideways. */
  .dw-iconrow--steps .dw-iconrow__op,
  .dw-iconrow--steps .dw-iconrow__cell:nth-child(odd) .dw-iconrow__op {
    position: static;
    left: auto;
    transform: none;
    margin: calc(var(--dw-size) / 2 - 0.6em) 0 0 0;
  }
}

/* =========================================================================
   The interactive tool, revealed by a button in any section
   ========================================================================= */
.choose-my-geyser-tool-wrap[hidden],
.dw-tool-shell[hidden] { display: none !important; }

/* =========================================================================
   Anchor links and the sticky header.
   The header is position:sticky - 70px tall on phones, 168px from 992 - so a
   plain #hash lands the target underneath it. scroll-margin-top tells the
   browser where the top of the target really is, which fixes a click AND
   someone arriving on the URL with the hash already in it. The theme's
   .scroll-to handler only covers links that carry class="scroll-to" and an
   attr-target, so it never sees a plain link written in a WYSIWYG.
   Harmless on elements that are never scrolled to - it only applies when the
   element is a scroll target.
   ========================================================================= */
.choose-my-geyser [id],
.dw-tool-shell { scroll-margin-top: 90px; }

@media (min-width: 992px) {
  .choose-my-geyser [id],
  .dw-tool-shell { scroll-margin-top: 188px; }
}

/* =========================================================================
   Hero: copy + house diagram + installed geyser photo.
   The copy sits in a real .container.container-mod so its left edge matches
   every section below. Mobile: copy, then the diagram. From 768 the media is
   pinned to the right edge and the photo joins in.
   ========================================================================= */
.dw-hero {
  position: relative;
  background: #316a9d;
}

.dw-hero__body {
  padding-top: clamp(28px, 7vw, 60px);
  padding-bottom: clamp(30px, 8vw, 64px);
  color: #fff;
}

.dw-hero__eyebrow {
  margin: 0 0 10px;
  font-size: clamp(12px, 3.2vw, 14px);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #b9d0e6;
}

.dw-hero__heading {
  margin: 0 0 16px;
  color: #fff;
  font-weight: 600;
  font-size: 30px;
  line-height: 1.12;
}

/* flat 30px on small phones, scaling from 480 up */
@media screen and (min-width: 480px) {
  .dw-hero__heading { font-size: clamp(30px, 8.5vw, 46px); }
}

/* from 768 the copy shares the hero with the images, so the heading scales
   with the viewport instead of sitting at its phone-width cap */
@media screen and (min-width: 768px) {
  .dw-hero__heading { font-size: 4.5vw; }
}

/* breathing room between the copy and the image panel.
   This sits immediately before the 1200 rule on purpose: both match above
   1200, so the later one has to be the 60px. */
@media screen and (min-width: 992px) {
  .dw-hero__inner { padding-right: 40px; }
}

@media screen and (min-width: 1200px) {
  /* breathing room between the copy and the image panel */
  .dw-hero__inner { padding-right: 60px; }
}

.dw-hero__copy { color: #eaf1f8; }
.dw-hero__copy p { color: inherit; margin-bottom: 0; }
.dw-hero__copy p + p { margin-top: 0.9em; }
.dw-hero__copy strong { color: #fff; }

.dw-hero__media { display: flex; }

.dw-hero__panel { flex: 1 1 0; min-width: 0; }

/* the photo is desktop only */
.dw-hero__panel--photo { display: none; }

/* crop the diagram on phones so it doesn't dominate the fold. A height, not
   aspect-ratio: the img is height:100% of an auto-height box, so it falls back
   to its intrinsic size and stretches the panel before aspect-ratio applies. */
.dw-hero__panel--diagram {
  --dw-hero-pad: clamp(30px, 9vw, 50px);
  position: relative;
  height: clamp(280px, 78vw, 380px);
  background: #2f5f8c center / cover no-repeat;   /* background image set inline */
}

/* The SVG sits on top of the background, centred, capped on BOTH axes.
   It is absolutely positioned on purpose: as a centred grid/flex item a
   percentage max-height does not resolve, so the image aspect-scales off its
   width and spills out of the panel. Against a positioned ancestor the
   percentages resolve against a definite box and the cap actually works. */
.dw-hero__diagram {
  position: absolute;
  /* inset + margin:auto, NOT top/left:50% + translate. With left:50% and an auto
     width the shrink-to-fit space is only the right half of the panel, so the
     image silently caps at half the panel width whatever the max-width says. */
  inset: var(--dw-hero-pad);
  margin: auto;
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100% - 2 * var(--dw-hero-pad));
  max-height: calc(100% - 2 * var(--dw-hero-pad));
}

.dw-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media screen and (min-width: 768px) {
  .dw-hero { display: flex; align-items: stretch; min-height: 400px; }

  /* Full width, so the container centres exactly as it does in every section.
     The media is overlaid on the right; the copy is narrowed to clear it. */
  .dw-hero__body {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
  }

  .dw-hero__body > .container { width: 100%; }

  /* Fill the space up to the image panel exactly, so padding-right alone sets
     the visible gap. Derivation: available = mediaLeft - contentStart, and
     contentStart = (100vw - containerWidth)/2, so with the media at 46%:
     available = 54vw - (100vw - 100%)/2 = 50% + 4vw. */
  .dw-hero__inner { max-width: calc(50% + 4vw); }

  .dw-hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
  }

  .dw-hero__panel--diagram { height: auto; --dw-hero-pad: clamp(24px, 3vw, 52px); }
  /* the photo stays hidden until 1200 so the diagram has the whole media panel */
}

@media screen and (min-width: 992px) {
  .dw-hero { min-height: 500px; }
}

/* From 1400 the three panels are equal thirds: copy | diagram | photo.
   The media block holds two of them, so it takes two thirds of the width.
   Below this the photo stays hidden and the diagram has the media to itself. */
@media screen and (min-width: 1400px) {
  .dw-hero { min-height: 560px; }

  /* copy 2/5, diagram and photo 1.5/5 each - the media block holds both, so 3/5 */
  .dw-hero__media        { width: 60%; }
  .dw-hero__panel--photo { display: block; }

  /* the column narrows here, so the heading returns to its cap */
  .dw-hero__heading { font-size: 46px; }

  /* same derivation, but the media is 60% wide here so the copy gets 40vw:
     available = 40vw - (100vw - 100%)/2 = 50% - 10vw */
  .dw-hero__inner { max-width: calc(50% - 10vw); }
}

/* =========================================================================
   Small text utilities used inside section-generator WYSIWYG columns
   ========================================================================= */
/* "vs" dot dividing two columns. Written as <p class="dw-vs">vs</p> at the END
   of the first column's WYSIWYG. No connecting rule - just the dot.
   It is positioned rather than left in flow, because the column's Button field
   renders AFTER the WYSIWYG: in flow the dot would sit between the copy and
   the button instead of below the whole column. */
.dw-vs {
  position: absolute;
  left: 50%;
  /* clear of the clip edge: overflow:hidden crops at the padding box, so a
     disc sitting flush on it loses its bottom row of pixels */
  bottom: 30px;
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 50%;
  background: #00263e;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-transform: lowercase;
}

/* Stacked, the dot hangs off .column-content - which sits inside the column's
   padding - so `left: 0` lines it up with the artwork and copy above it. The
   column's padding is 15px on phones and 30px near 992, so anchoring to the
   column itself would need a magic number that changes with the breakpoint. */
.choose-my-geyser .section-column:has(.dw-vs) { position: relative; }

.choose-my-geyser .section-column:has(.dw-vs) > .column-content {
  position: relative;
  /* 30 above the disc + 56 disc + 30 below */
  padding-bottom: 116px;
  overflow: hidden;          /* clips the rules either side of the dot */
}

/* PREVIEW */
.dw-vs::before,
.dw-vs::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100vw;
  height: 1px;
  background: #00263e;
}

.dw-vs::before { right: 100%; margin-right: 14px; }
.dw-vs::after  { left: 100%;  margin-left: 14px; }

p.dw-vs,
.light-blue-box p.dw-vs,
.medium-blue-box p.dw-vs,
.dark-blue-box p.dw-vs { color: #fff; }

@media (min-width: 992px) {
  /* Columns are side by side from here, so the dot moves out of the flow and
     into the gutter, level with the illustrations. :has() keeps the
     positioning context on the one column that actually holds a dot, so no
     other column on the site gains a stacking context.
     --dw-vs-top is the drop from the top of the column to the dot's centre. */


  /* widen the channel the dot sits in - the columns' own 40px padding left
     only ~12px either side of a 56px dot. The container width is fixed, so
     this is paid for out of the illustrations' width. */
  /* side by side now: the column becomes the anchor again so `right: 0` lands
     on the true boundary between the two columns, and the foot of the column
     needs no room for the dot */
  .choose-my-geyser .section-column:has(.dw-vs) > .column-content {
    position: static;
    padding-bottom: 0;
    overflow: visible;
  }

  .dw-vs::before,
  .dw-vs::after { display: none; }

  .choose-my-geyser .section-column:has(.dw-vs) { padding-right: 80px; }
  .choose-my-geyser .section-column:has(.dw-vs) + .section-column { padding-left: 80px; }

  .dw-vs {
    left: auto;
    bottom: auto;
    transform: translate(50%, -50%);
    /* level with the middle of the illustration. The illustration is width
       driven, so its centre moves with the viewport - this tracks it.
       Override --dw-vs-top on the column if an artwork sits differently. */
    top: var(--dw-vs-top, clamp(116px, 6.68vw + 45px, 200px));
    right: 0;
    margin: 0;
    transform: translate(50%, -50%);
  }
}

/* Pill label sitting with a column heading. Written as <p class="dw-pill">
   in the column WYSIWYG, so the colour goes on p.dw-pill (0,1,1) to beat
   cali.css's `.clear-box p { color: #333 }`. */
.dw-pill {
  display: inline-block;
  margin: 0 0 16px;
  /* 2px more above than below: uppercase Hind has no descenders, so a line box
     with equal padding leaves the visible letters sitting ~1px high. */
  padding: 8px 20px 6px;
  border-radius: 999px;
  background: #316a9d;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

p.dw-pill,
.light-blue-box p.dw-pill,
.medium-blue-box p.dw-pill,
.dark-blue-box p.dw-pill { color: #fff; }

.dw-pill--teal { background: #00aeac; }
.dw-pill--navy { background: #00263e; }
.dw-pill--red  { background: #ea0029; }

.dw-eyebrow {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Colour is set on p.dw-eyebrow (0,1,1) so it beats cali.css's
   `.clear-box p / .light-grey-box p { color:#333 }` block, which would
   otherwise win on specificity. */
p.dw-eyebrow { color: #316a9d; }

/* teal on the blue block, where the brand blue would sink into the background */
.light-blue-box p.dw-eyebrow { color: #00aeac; }

.medium-blue-box p.dw-eyebrow,
.dark-blue-box p.dw-eyebrow { color: #9dc0dd; }

/* red model label bars in the sizing guide */
.dw-model-label {
  /* block, so the red bar runs the full width of its column */
  display: block;
  margin: 0 0 14px;
  padding: 5px 14px;
  background: #ea0029;
  font-weight: 400;
  font-size: 22.5px;
}

/* on p.dw-model-label so it beats cali.css's `.clear-box p { color: #333 }`,
   which sits at the same specificity as a bare class and wins on order */
p.dw-model-label { color: #fff; }

/* 992-1199 is the tight band: three columns in a container that has not
   reached its cap, so the label drops to 16px there and returns to 22.5px
   once the container steps up at 1200. */
@media (min-width: 992px) {
  .dw-model-label { font-size: 16px; }
}

@media (min-width: 1200px) {
  .dw-model-label { font-size: 22.5px; }
}

/* No rule while the groups are stacked in one column - the design has none
   there, and a single line running the length of the page reads as a border
   on the section rather than as a divider between groups. It comes back at
   768, where the groups sit side by side and the rule separates them. */
.dw-model-group { margin-bottom: 8px; }

/* below 992 the groups run one per row, so each needs air beneath it; from 992
   the grid's row-gap does that job instead */
.dw-model-group { margin-bottom: 40px; }

@media (min-width: 992px) {
  .dw-model-group { margin-bottom: 8px; }
}

@media (min-width: 768px) {
  .dw-model-group { border-left: 1px solid #ea0029; padding-left: 16px; }
}

.dw-model-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  line-height: 1.3;
}

/* Captions sit beside their glyphs by default. Basis 0, not auto: with auto
   the caption's own text width becomes its basis, which overflows the line and
   wraps it under the glyphs - basis 0 lets it take whatever room is left. */
.dw-model-text { flex: 1 1 0; min-width: 0; }

/* Same tight band as the labels: three columns before the container reaches
   its cap, so the caption drops to 16px from 992 and returns to the inherited
   18px at 1200. */
@media (min-width: 992px) {
  .dw-model-text { font-size: 16px; }
}

@media (min-width: 1200px) {
  .dw-model-text { font-size: inherit; }
}

/* ...except on a row marked to stack, where the caption takes a full line of
   its own and so drops under the glyphs. One row in the chart needs this - the
   three-glyph 26-30L row - rather than leaving it to a width threshold. */
.dw-model-row--stack .dw-model-text { flex: 1 0 100%; }

/* Desktop layout for the size chart.
   Each group is its own column in the markup; grid places them the way the
   design arranges them - 5/6L over 8-12L, 16L over 20/21L, 26-30L alone -
   while keeping them in a shared two-row grid. That sharing is the point: the
   second label in every column sits on the same grid row, so the bars line up
   across the chart however tall the group above them happens to be.
   Padding is narrower than the theme's 40px, with the difference given back to
   the row, so the columns gain ~32px of caption while their outer edges stay
   aligned with the heading. Below 992 it is one group per row and none of this
   applies. */
@media (min-width: 992px) {
  .choose-my-geyser .row:has(.dw-model-label) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    row-gap: 40px;
    padding: 0 16px;
  }

  .choose-my-geyser .row:has(.dw-model-label) > .section-column:nth-child(1) { grid-column: 1; grid-row: 1; }
  .choose-my-geyser .row:has(.dw-model-label) > .section-column:nth-child(2) { grid-column: 1; grid-row: 2; }
  .choose-my-geyser .row:has(.dw-model-label) > .section-column:nth-child(3) { grid-column: 2; grid-row: 1; }
  .choose-my-geyser .row:has(.dw-model-label) > .section-column:nth-child(4) { grid-column: 2; grid-row: 2; }
  .choose-my-geyser .row:has(.dw-model-label) > .section-column:nth-child(5) { grid-column: 3; grid-row: 1; }

  /* the theme sizes columns with flex-basis and a 33.33% max-width; inside a
     grid that max-width resolves against the TRACK, squeezing each column to a
     third of its own cell, so both are released here */
  .choose-my-geyser .section-column:has(.dw-model-label) {
    flex: initial;
    width: auto;
    max-width: none;
    padding-left: 24px;
    padding-right: 24px;
  }
}

.dw-glyph-inline {
  flex: 0 0 auto;
  height: 40px;
  width: auto;
}

/* small navy "+" joining two glyphs in a model row */
.dw-model-plus {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  /* Hind's "+" sits ~1px above the middle of its line box, so grid centring
     lands it high in the disc. 2px of top padding shifts the content box down
     by half that and brings the glyph onto the true centre. */
  padding-top: 2px;
  border-radius: 50%;
  background: #00263e;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
}

.dw-model-or {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 6px 0;
  border-radius: 50%;
  background: #ea0029;
  font-size: 16.5px;
  line-height: 1;
}

/* same specificity fix as the label: a bare .dw-model-or loses to cali.css's
   `.clear-box p` on colour and to the theme's paragraph rule on margin, which
   was adding 30px under the disc and only 14px above it. */
p.dw-model-or {
  color: #fff;
  /* the row above already carries an 8px bottom margin, so no top margin here
     keeps the disc an equal 8px from the option above and the one below */
  margin: 0 0 8px;
}

.dw-note { font-size: 0.95rem; }
/* brand red on every background, dark ones included */
.dw-note strong,
.dark-blue-box .dw-note strong,
.light-blue-box .dw-note strong { color: #ea0029; font-weight: 700; }

/* =========================================================================
   Gap in cali.css: the coloured-box link rule covers .grey-box, .medium-blue-box,
   .dark-blue-box and .black-box, but NOT .light-blue-box - so links there fall
   back to the site blue on a blue background. Move this into cali.css alongside
   the other box rules when convenient.
   ========================================================================= */
.light-blue-box p a,
.light-blue-box li a {
  color: #fff;
  text-decoration: none;
}

.light-blue-box p a:hover,
.light-blue-box li a:hover {
  color: #cfe2f3;
}

/* =========================================================================
   Space Below Heading (ACF tick, per section).
   .section-heading was never in cali.css's ".section-block h2, .section-col h2"
   rule, so its headings fall through to Bootstrap's 8px. Rather than change
   that rule and move every existing page, this is opt-in per section.
   ========================================================================= */
/* The gap goes under the LAST thing in the heading block, whatever that is.
   Targeting h2/h3/h4 as well would also push a heading away from its own intro
   paragraph when the field contains both. */
.section-heading.heading-space > *:last-child { margin-bottom: 30px; }

/* =========================================================================
   Heading scale for this page.
   Scoped to .choose-my-geyser (the <main> class on this template) so the rest
   of the site keeps the existing .section-col h2 / .section-block h2 sizing.
   ========================================================================= */
.choose-my-geyser .section-heading h2,
.choose-my-geyser .section-col h2,
.choose-my-geyser .section-block h2 {
  font-size: 31px;
  font-weight: 500;
}

@media screen and (min-width: 992px) {
  .choose-my-geyser .section-heading h2,
  .choose-my-geyser .section-col h2,
  .choose-my-geyser .section-block h2 {
    font-size: 32px;
  }
}

/* h3s on this page are semi-bold. Scoped the same way, so nothing else on the
   site moves. .dw-iconrow__label is listed because an icon-row caption is not
   inside .section-col. */
.choose-my-geyser .section-heading h3,
.choose-my-geyser .section-col h3,
.choose-my-geyser .section-block h3,
.choose-my-geyser .dw-iconrow__label h3 {
  font-weight: 600;
}

/* =========================================================================
   Video modal. Opened by js/choose-geyser.js for any link whose href is a
   YouTube URL, so a normal Section/Column Button becomes a video button just
   by pasting the video's URL into its link field.
   ========================================================================= */
.dw-video {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 40px);
}

.dw-video[hidden] { display: none; }

/* stop the page behind the overlay from scrolling */
html.dw-video-open,
html.dw-video-open body { overflow: hidden; }

.dw-video__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 21, 56, 0.85);
}

.dw-video__dialog {
  position: relative;
  width: 100%;
  max-width: 1000px;
}

.dw-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

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

.dw-video__close {
  position: absolute;
  top: -46px;
  right: 0;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  /* the multiplication sign sits ~2.2px above the middle of its line box, so
     the disc needs a little more padding above than below to centre it */
  padding: 4.5px 0 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #00263e;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.dw-video__close:hover,
.dw-video__close:focus-visible { background: #ea0029; color: #fff; }

/* The modal moves focus to this button when it opens, so a mouse user was
   getting the browser's focus ring for a click they never made. :focus-visible
   keeps the ring for keyboard users - who need it - and drops it for pointer
   users. The explicit ring also follows the circle, which the UA default does
   not do cleanly on a border-radius in Firefox. */
.dw-video__close:focus { outline: none; }

.dw-video__close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* aspect-ratio is well supported, but this keeps the box 16:9 if it is not */
@supports not (aspect-ratio: 16 / 9) {
  .dw-video__frame { height: 0; padding-bottom: 56.25%; }
}

/* =========================================================================
   "Important if you're replacing an electric geyser" panel.
   Section Class: important-section (section colour stays clear-box).

   The grey sits on the two .container children rather than on the section
   itself, so the panel is exactly container width instead of running edge to
   edge. They are the same width and butt together, so they read as one card -
   the 16px gap between them is closed below. Vertical space around the whole
   panel still comes from the section's own padding-top / padding-bottom.
   ========================================================================= */
.choose-my-geyser .important-section > .container {
  background: #f2f2f2;
  margin-bottom: 0;
}

.choose-my-geyser .important-section > .section-heading { padding: 30px 30px 0; }
.choose-my-geyser .important-section > .section-col     { padding: 24px 30px 30px; }

@media (min-width: 768px) {
  .choose-my-geyser .important-section > .section-heading { padding: 40px 40px 0; }
  .choose-my-geyser .important-section > .section-col     { padding: 28px 40px 40px; }
}

/* Bootstrap's .row carries -15px side margins to cancel its columns' gutters.
   The columns have no gutter inside this panel, so the negative margins would
   pull the copy 15px outside the padding and out of line with the heading. */
.choose-my-geyser .important-section .row { margin-left: 0; margin-right: 0; }

/* cali.css gives .section-col.container-mod a wider max-width than a plain
   .container-mod (+30px, then +50px) so that the COLUMN CONTENT still lines up
   with the container. Inside this panel that makes the two halves of the card
   different widths, and the card gets a visible step in its edge - so the
   heading half is matched to the wider one. */
@media (min-width: 768px) {
  .choose-my-geyser .important-section > .section-heading { max-width: calc(90vw + 30px); }
}

@media (min-width: 992px) {
  .choose-my-geyser .important-section > .section-heading { max-width: calc(900px + 50px); }
}

@media (min-width: 1200px) {
  .choose-my-geyser .important-section > .section-heading { max-width: calc(85vw + 50px); }
}

/* the columns sit inside the panel's own padding, so they need none of their
   own on the outer edges - only the gutter between them */
.choose-my-geyser .important-section .section-column { padding-left: 0; padding-right: 0; }

/* Gutter between the two halves. Keyed to the breakpoint class the columns
   actually use, so a stacked column never picks up a one-sided inset:
   col-md-6 goes side by side at 768, col-lg-6 at 992. */
@media (min-width: 768px) {
  .choose-my-geyser .important-section .section-column.col-md-6:first-child { padding-right: 30px; }
  .choose-my-geyser .important-section .section-column.col-md-6:last-child  { padding-left: 30px; }
}

@media (min-width: 992px) {
  .choose-my-geyser .important-section .section-column.col-lg-6:first-child { padding-right: 30px; }
  .choose-my-geyser .important-section .section-column.col-lg-6:last-child  { padding-left: 30px; }
}

/* :is() so this matches the specificity of the two rules above - without the
   class in the selector it is one class lighter and never wins */
@media (min-width: 1200px) {
  .choose-my-geyser .important-section .section-column:is(.col-md-6, .col-lg-6):first-child { padding-right: 40px; }
  .choose-my-geyser .important-section .section-column:is(.col-md-6, .col-lg-6):last-child  { padding-left: 40px; }
}

/* ---- type scale for the panel ---- */
.choose-my-geyser .important-section p.dw-eyebrow {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}

.choose-my-geyser .important-section .section-heading h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

/* :not() so it does not also catch the eyebrow, which is a <p> too and would
   otherwise lose to this rule on source order */
.choose-my-geyser .important-section .section-heading p:not(.dw-eyebrow) {
  font-size: 18px;
  margin-bottom: 0;
}

.choose-my-geyser .important-section .sec-text-col h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 6px;
}

.choose-my-geyser .important-section .sec-text-col p {
  font-size: 16px;
  margin-bottom: 0;
}

/* ---- no gap above the panel on phones ----
   cali.css gives .half-padding-top 40px (base) and 60px from 768. Drop it to
   zero below 480 so the grey card sits straight under the section above, then
   hand it back — the 768 rule still applies on top of this. */
.choose-my-geyser .important-section.half-padding-top {
  padding-top: 0;
}

@media (min-width: 480px) {
  .choose-my-geyser .important-section.half-padding-top {
    padding-top: 40px;
  }
}

/* my 480 rule outweighs cali.css's own 768 step, so restate it here */
@media (min-width: 768px) {
  .choose-my-geyser .important-section.half-padding-top {
    padding-top: 60px;
  }
}

/* ---- the models CTA on the narrowest phones ----
   "Gas Geyser Models & Pricing" needs 246px of the 250px a 320px screen gives
   the button, so the theme's 30px side padding tips it onto two lines. Matched
   on its href so the page's other section buttons keep their normal padding.
   From 360 there is room for the full padding again. */
.choose-my-geyser .section-btn[href*="/gas-geysers/"] {
  padding-left: 10px;
  padding-right: 10px;
  font-size: 16px;
}

@media (min-width: 360px) {
  .choose-my-geyser .section-btn[href*="/gas-geysers/"] {
    padding-left: 30px;
    padding-right: 30px;
    font-size: 18px;
  }
}

/* ---- Typical gas geyser size chart: tighter stacking on phones ----
   Scoped to the section's own class so the model chart can be spaced
   independently of any other use of these blocks. Below 992 the groups run one
   per row; from 992 the desktop grid takes over and the original values apply. */
.choose-my-geyser .typical-size-chart .dw-model-label {
  margin-bottom: 20px;
}

/* While the groups are stacked they are spaced by the row's own row-gap (the
   theme sets 40px on .row.row-eq-height), not by the group margin - so the gap
   is set there and the margin zeroed, otherwise the two add up. */
.choose-my-geyser .typical-size-chart .row {
  row-gap: 20px;
}

.choose-my-geyser .typical-size-chart .dw-model-group {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .choose-my-geyser .typical-size-chart .dw-model-label {
    margin-bottom: 14px;
  }

  .choose-my-geyser .typical-size-chart .dw-model-group {
    margin-bottom: 8px;
  }

  .choose-my-geyser .typical-size-chart .row {
    row-gap: 40px;
  }
}

/* ---- spacing above a column button ----
   The theme gives a column button 40px of top margin on top of the paragraph's
   own 30px, which is too much. Worse, the two columns disagreed: the theme
   zeroes the margin on a paragraph that is the last child, and in the column
   carrying the vs dot the paragraph is not last - the dot is, even though it is
   positioned out of the flow. So one button sat 40px below its copy and the
   other 10px. Zero the paragraph in both cases and let the button set the gap. */
.choose-my-geyser .sec-text-col > p:has(+ .dw-vs) {
  margin-bottom: 0;
}

.choose-my-geyser .column-content > a.btn {
  margin-top: 30px;
}