/* =============================================================================
   Conservation design system — shared by every page under /conservation/
   /conservation/css/conservation.css
   =============================================================================
   Promoted from the water-conservation-kit redesign (kit.css). Brings
   home-test-v2's CONTENT styling into pages that otherwise keep the live
   site's chrome: its own head.php, main nav, banner and footer.

   Everything is scoped under .cv-layout (sidebar + content) and .cv (content
   only). Nothing here uses a bare element selector at the top level, so this
   file cannot restyle any other part of the page, or any other page.

   Kit-only rules (the photo-beside-list card) stay in
   /conservation/water-conservation-kit/css/kit.css.

   ---------------------------------------------------------------------------
   THREE CONSTRAINTS THAT SHAPE EVERYTHING BELOW
   ---------------------------------------------------------------------------
   1. rem IS 10px ON THIS SITE, NOT 16px.
      Bootstrap 3.1.1 (/css/bootstrap.min.css) sets html { font-size: 62.5% }.
      home-test-v2's tokens are all rem-at-16px, so copied verbatim they render
      at 62.5% size — a 34px heading comes out at 21px. Every size here is
      therefore written as px ÷ 10 (34px → 3.4rem). Because Bootstrap used a
      PERCENTAGE, this still scales with a user's browser font-size setting,
      which hard px values would not.

   2. FONTS ARE THE SITE'S, NOT v2's.
      Ubuntu, as loaded by head.php, at the only two weights it requests: 400
      and 700. No 500 or 600: the browser would fake them from 700.

   3. THE LEGACY CSS WILL STYLE THIS CONTENT UNLESS OUTRANKED.
      custom.css has, among others:
        .flex .main-container p            { font-size: 18px }         (0,2,1)
        .flex .main-container ul li        { line-height: 2.75rem }    (0,2,2)
        a, a:hover, a:focus  { color: #276929 }   a:visited { #4caf50 }
        a:focus, a:hover     { text-decoration: underline }
        .main-container      { overflow: hidden }
      Every element gets its own class and every rule is prefixed with
      .main-container .cv (or .cv-layout for the sidebar), which lands at
      (0,3,0) and above — outranking all of those on specificity alone, so the
      result does not depend on stylesheet order.

   ---------------------------------------------------------------------------
   COMPONENT INDEX (markup lives in each page; this is the vocabulary)
   ---------------------------------------------------------------------------
   intro        cv-eyebrow · cv-rule · cv-title · cv-lead
   text         cv-h3 · cv-body · cv-prose (rich text: p / ul / ol / a)
   containers   cv-card · cv-callout · cv-banner · cv-media
   lists        cv-checklist (+ --compact, --long) · cv-steps · cv-links
   actions      cv-actions · cv-btn (--primary, --secondary) · cv-chip
   disclosure   accordion — shared .awc-bill-faq-* classes, see the note below
   media        cv-videos · cv-photos · cv-programs · cv-lit · cv-posts
   contact      cv-contact · cv-contact-card
   ============================================================================= */

/* ---------------------------------------------------------------- tokens ---- */
/* Scoped to the layout wrapper, not :root, so they cannot reach the rest of the
   page. Palette is verbatim from the customer design system (_ds/tokens). */
.cv-layout {
  --cv-navy:       #263981;
  --cv-navy-900:   #141d45;
  --cv-navy-700:   #1c2b62;
  --cv-navy-100:   #dde2f0;
  --cv-navy-050:   #eceff7;
  --cv-sky:        #00BBF2;
  --cv-sky-700:    #0079a1;
  --cv-green:      #51A145;   /* fills and rules only — see below */
  --cv-green-700:  #3a7531;   /* green TEXT */
  --cv-sand-050:   #f8f5ef;
  --cv-sand-100:   #efe8db;
  --cv-sand-700:   #8d7c5c;
  --cv-ink:        #383435;
  --cv-ink-strong: #231F20;
  --cv-muted:      #6b6667;
  --cv-line:       #e8e5e2;
  --cv-surface:    #ffffff;

  /* CONTRAST NOTE. --cv-green (#51A145) is 3.2:1 on white. That clears the
     3:1 WCAG asks of rules, borders and icons, but FAILS the 4.5:1 needed for
     small text. So green text uses --cv-green-700 (5.4:1), the DS's own
     --status-ok value. */

  /* Fibonacci type scale, px ÷ 10 (see constraint 1) */
  --cv-fib-13: 1.3rem;
  --cv-fib-21: 2.1rem;
  --cv-fib-34: 3.4rem;
  /* Running text opts out of the scale, as it does on home-test-v2: the
     sequence jumps 13 → 21 with nothing readable in between. */
  --cv-text:   1.7rem;
  --cv-lead:   1.8rem;
  /* Widest a block of running text gets. The one number to change if the text
     column should be wider or narrower: .cv-prose, .cv-lead and .cv-body all
     use it. 100ch is about 900px at this size — wide for reading, but it fills
     the content column on a laptop. */
  --cv-measure: 100ch;

  /* φ spacing — v2's values converted to this site's 10px rem */
  --cv-s1: 0.99rem;
  --cv-s2: 1.26rem;
  --cv-s3: 1.6rem;
  --cv-s4: 2.04rem;
  --cv-s5: 2.59rem;
  --cv-s6: 3.29rem;
  --cv-s7: 4.19rem;

  --cv-radius:    4px;
  --cv-radius-sm: 3px;
  --cv-shadow-sm: 0 1px 2px rgba(35, 31, 32, .06), 0 1px 3px rgba(35, 31, 32, .05);
  --cv-shadow-md: 0 2px 4px rgba(35, 31, 32, .08), 0 6px 16px rgba(35, 31, 32, .10);
  --cv-shadow-lg: 0 8px 24px rgba(35, 31, 32, .12);
  --cv-ease:      cubic-bezier(.4, 0, .2, 1);
  --cv-fast:      120ms;
  --cv-base:      180ms;

  font-family: Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color: var(--cv-ink);
}

/* ---------------------------------------------------------------- layout ---- */
/* The site's .mt utility puts a fixed 44px above the content row at every
   screen width (neko-framework-layout.css). On a phone that leaves a wide
   empty band between the banner image and the menu bar. Every conservation
   page tags its row `row mt cv-row`; this trims it on narrow screens only and
   touches no other page on the site. */
@media (max-width: 900px) {
  .row.mt.cv-row { margin-top: 1.2rem; }
}

/* The page keeps the site's .flex.ss-mod, so sidebar-beside-content is still
   the site's own layout decision. Two page-scoped adjustments only: */
.cv-layout .main-container {
  /* overflow:hidden on the legacy rule clips the card hover shadow at the
     column edge. min-width:0 is the reason that rule existed — it stops wide
     content forcing the flex item open — so that job is still done. */
  overflow: visible;
  min-width: 0;
  /* The legacy 3em (48px) left padding WAS the nav–content gutter. The gutter
     now comes from column-gap below instead, so it zeroes this. */
  padding-left: 0;
}

/* Nav–content gutter: 64px, up from the legacy 48px.
   column-gap rather than a bigger padding-left on purpose — a column gap only
   exists while the sidebar sits BESIDE the content, so it vanishes on its own
   once the layout stacks, instead of leaving the content indented 64px with
   nothing next to it. */
.cv-layout.flex.ss-mod { column-gap: 6.4rem; }

.cv-layout .cv-side {
  flex: 0 0 26rem;
  align-self: flex-start;
}

/* ============================================================================
   SIDEBAR
   ============================================================================ */
/* Phone-only collapse control. Hidden everywhere until the media query below
   shows it, and only if the script has run. */
.cv-layout .cv-side-toggle { display: none; }

.cv-layout .cv-side-card {
  background: var(--cv-surface);
  border-top: 3px solid var(--cv-green);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-md);
  overflow: hidden;
}

.cv-layout .cv-side-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cv-layout .cv-side-link {
  display: flex;
  align-items: center;
  gap: var(--cv-s2);
  padding: var(--cv-s2) var(--cv-s3);
  font-size: 1.5rem;             /* UI text — off the display scale, like body */
  font-weight: 400;
  line-height: 1.35;
  color: var(--cv-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--cv-line);
  /* Inset rather than a border so the label never shifts on hover. */
  box-shadow: inset 0 0 0 transparent;
  transition: background-color var(--cv-fast) var(--cv-ease),
              color var(--cv-fast) var(--cv-ease),
              box-shadow var(--cv-fast) var(--cv-ease);
}

.cv-layout .cv-side-list li:last-child .cv-side-link { border-bottom: 0; }

/* Every state spelled out: the legacy a:visited would otherwise turn a visited
   menu row bright green, and a:hover would underline it. */
.cv-layout .cv-side-link:link,
.cv-layout .cv-side-link:visited { color: var(--cv-ink); text-decoration: none; }

.cv-layout .cv-side-link:hover,
.cv-layout .cv-side-link:focus-visible {
  color: var(--cv-navy);
  background: var(--cv-navy-050);
  box-shadow: inset 3px 0 0 var(--cv-sky-700);
  text-decoration: none;
}

.cv-layout .cv-side-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  font-size: 1.4rem;
  color: #fff;
  background: var(--cv-navy);
  border-radius: 22%;               /* the v2 squircle */
  transition: background-color var(--cv-fast) var(--cv-ease);
}

.cv-layout .cv-side-link:hover .cv-side-icon { background: var(--cv-sky-700); }

/* Current page: the one row that is filled, so it reads as "you are here". */
.cv-layout .cv-side-link.is-current,
.cv-layout .cv-side-link.is-current:visited {
  color: #fff;
  font-weight: 700;
  background: var(--cv-navy);
  box-shadow: inset 3px 0 0 var(--cv-sky);
}

.cv-layout .cv-side-link.is-current .cv-side-icon { color: var(--cv-navy); background: #fff; }

/* "Return Home" is a way back, not a destination — set apart on sand. */
.cv-layout .cv-side-link--home,
.cv-layout .cv-side-link--home:visited {
  color: var(--cv-navy);
  font-weight: 700;
  background: var(--cv-sand-050);
}

.cv-layout .cv-side-link--home .cv-side-icon { color: var(--cv-navy); background: var(--cv-sand-100); }

.cv-layout .cv-side-promo {
  display: block;
  /* 60% of the sidebar's width — 40% smaller than the full-width promo it
     replaced — and centred under the menu card. */
  width: 60%;
  margin-inline: auto;
  margin-top: var(--cv-s4);
  border-radius: var(--cv-radius);
  overflow: hidden;
  box-shadow: var(--cv-shadow-sm);
  transition: box-shadow var(--cv-base) var(--cv-ease);
}

.cv-layout .cv-side-promo:hover { box-shadow: var(--cv-shadow-lg); }
.cv-layout .cv-side-promo img { display: block; width: 100%; height: auto; }

/* ============================================================================
   CONTENT
   ============================================================================ */
.main-container .cv { display: flex; flex-direction: column; gap: var(--cv-s7); padding-bottom: var(--cv-s6); }

/* A flex item defaults to min-width:auto, so wide content (the owl carousel,
   long URLs) would stretch the column instead of fitting it. */
.main-container .cv > * { min-width: 0; }

/* ---- intro ---- */
.main-container .cv .cv-eyebrow {
  display: block;
  font-size: var(--cv-fib-13);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--cv-green-700);
}

/* The 64x4 rule under every eyebrow on the v2 slides. */
.main-container .cv .cv-rule {
  display: block;
  width: 6.4rem;
  height: 4px;
  margin: var(--cv-s2) 0 0;
  background: var(--cv-green);
}

/* The 16px above the title only exists to separate it from the eyebrow and
   rule. With nothing above it (every page but the conservation home), drop it. */
.main-container .cv header > .cv-title:first-child { margin-top: 0; }

/* custom.css has `@media (max-width: 720px) { header { position: absolute } }`
   aimed at the site's own header, but it matches ANY bare <header> element —
   including this page intro. On a phone the intro was pulled out of the flow
   and the first paragraph slid up underneath the title. */
.main-container .cv header { position: static; }

.main-container .cv .cv-title {
  margin: var(--cv-s3) 0 0;
  font-family: inherit;
  font-size: var(--cv-fib-34);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--cv-navy);
}

.main-container .cv .cv-lead {
  margin: var(--cv-s3) 0 0;
  max-width: var(--cv-measure);
  font-size: var(--cv-lead);
  line-height: 1.6;
  color: var(--cv-ink);
}

.main-container .cv .cv-body {
  margin: 0;
  max-width: var(--cv-measure);
  font-size: var(--cv-text);
  line-height: 1.6;
  color: var(--cv-ink);
}

/* Body copy that follows a list or a row of buttons. */
.main-container .cv .cv-body--after { margin-top: var(--cv-s4); }

/* Links inside lead and body copy. */
.main-container .cv .cv-lead a,
.main-container .cv .cv-lead a:link,
.main-container .cv .cv-lead a:visited,
.main-container .cv .cv-body a,
.main-container .cv .cv-body a:link,
.main-container .cv .cv-body a:visited,
.main-container .cv .cv-contact-text a,
.main-container .cv .cv-contact-text a:link,
.main-container .cv .cv-contact-text a:visited {
  color: var(--cv-sky-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.main-container .cv .cv-lead a:hover,
.main-container .cv .cv-lead a:focus-visible,
.main-container .cv .cv-body a:hover,
.main-container .cv .cv-body a:focus-visible,
.main-container .cv .cv-contact-text a:hover,
.main-container .cv .cv-contact-text a:focus-visible { color: var(--cv-navy); }

/* ---- section headings ---- */
.main-container .cv .cv-h3 {
  margin: 0 0 var(--cv-s4);
  font-family: inherit;
  font-size: var(--cv-fib-21);
  font-weight: 700;
  line-height: 1.25;
  color: var(--cv-navy);
}

/* ---- rich text ----
   For running copy that is genuinely paragraphs and lists. Everything inside
   is restated because the legacy rules reach every p, ul, ol and li in
   .main-container. */
.main-container .cv .cv-prose { max-width: var(--cv-measure); }

.main-container .cv .cv-prose p {
  margin: 0 0 var(--cv-s3);
  font-size: var(--cv-text);
  line-height: 1.6;
  color: var(--cv-ink);
}

.main-container .cv .cv-prose ul,
.main-container .cv .cv-prose ol {
  margin: 0 0 var(--cv-s3);
  padding-left: 2.4rem;
}

.main-container .cv .cv-prose ul { list-style: disc; }
.main-container .cv .cv-prose ol { list-style: decimal; }
.main-container .cv .cv-prose ol.cv-roman { list-style: lower-roman; }

.main-container .cv .cv-prose li {
  margin: 0 0 var(--cv-s1);
  padding: 0;
  font-size: var(--cv-text);
  line-height: 1.6;
  color: var(--cv-ink);
}

.main-container .cv .cv-prose li > ul,
.main-container .cv .cv-prose li > ol { margin: var(--cv-s1) 0 0; }

.main-container .cv .cv-prose > :last-child { margin-bottom: 0; }

.main-container .cv .cv-prose strong { font-weight: 700; color: var(--cv-ink-strong); }

.main-container .cv .cv-prose a,
.main-container .cv .cv-prose a:link,
.main-container .cv .cv-prose a:visited {
  color: var(--cv-sky-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.main-container .cv .cv-prose a:hover,
.main-container .cv .cv-prose a:focus-visible { color: var(--cv-navy); }

/* ---- split: text columns that use the width the cards below it use ----
   .cv-prose is capped at 72ch for readability, which on a wide screen leaves
   the right of the page empty beside full-width components. Put prose blocks
   side by side in a .cv-split and the width gets used without lengthening any
   line.

   No breakpoint: auto-fit makes the columns stack whenever two of them (38rem
   each) would not fit the content column. That column loses 260px to the
   sidebar, so a viewport-width media query would misjudge it. */
.main-container .cv .cv-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(38rem, 1fr));
  gap: var(--cv-s5) var(--cv-s6);
  align-items: start;
}

.main-container .cv .cv-split .cv-prose { max-width: 76ch; }
/* A card in a split fills its column; the text inside keeps its own padding. */
.main-container .cv .cv-split .cv-card.cv-prose { max-width: none; }

/* ---- card: white, green top rule ---- */
.main-container .cv .cv-card {
  padding: var(--cv-s5) var(--cv-s6);
  background: var(--cv-surface);
  border-top: 3px solid var(--cv-green);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-md);
}

/* ---- checklists ---- */
.main-container .cv .cv-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* line-height and font-size restated because the legacy
   `.flex .main-container ul li` sets 18px on a 2.75rem (44px) line — which
   would space this list out to nearly double. */
.main-container .cv .cv-check {
  display: flex;
  align-items: flex-start;
  gap: var(--cv-s2);
  padding: var(--cv-s2) 0;
  font-size: var(--cv-text);
  line-height: 1.4;
  color: var(--cv-ink-strong);
  border-bottom: 1px solid var(--cv-line);
}

.main-container .cv .cv-check:last-child { border-bottom: 0; }

.main-container .cv .cv-check > i {
  flex: 0 0 auto;
  margin-top: 0.2em;          /* optical alignment with the first text line */
  font-size: 1.6rem;
  color: var(--cv-green);     /* an icon, so 3:1 applies, and it passes */
}

.main-container .cv .cv-check-text { min-width: 0; }

.main-container .cv .cv-check-note {
  display: block;
  margin-top: 0.3rem;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--cv-muted);
}

.main-container .cv .cv-check a,
.main-container .cv .cv-check a:link,
.main-container .cv .cv-check a:visited {
  color: var(--cv-sky-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.main-container .cv .cv-check a:hover,
.main-container .cv .cv-check a:focus-visible { color: var(--cv-navy); }

/* Paragraph-length items (general tips): looser line, more air. */
.main-container .cv .cv-checklist--long .cv-check { padding: var(--cv-s3) 0; line-height: 1.6; }

/* ---- callout: the DS's own notice pattern ----
   --status-notice-surface (sand-100) with a --status-notice (sand-700) rule.
   An eligibility restriction or a heads-up, which is exactly what that pair is
   for. */
.main-container .cv .cv-callout {
  padding: var(--cv-s5) var(--cv-s6);
  background: var(--cv-sand-100);
  border-left: 4px solid var(--cv-sand-700);
  border-radius: var(--cv-radius);
}

.main-container .cv .cv-callout .cv-body { margin-bottom: var(--cv-s3); }
.main-container .cv .cv-callout .cv-body:last-child { margin-bottom: 0; }
.main-container .cv .cv-callout strong { font-weight: 700; color: var(--cv-ink-strong); }
.main-container .cv .cv-callout .cv-h3 { margin-bottom: var(--cv-s3); }

.main-container .cv .cv-checklist--compact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--cv-s6);
}

/* Two columns means two "last" rows — keep both without a divider. */
.main-container .cv .cv-checklist--compact .cv-check { border-bottom-color: rgba(141, 124, 92, .22); }
.main-container .cv .cv-checklist--compact .cv-check:nth-last-child(-n+2) { border-bottom: 0; }

/* Text beside a logo (e.g. the WaterSense label). */
.main-container .cv .cv-media {
  display: flex;
  align-items: center;
  gap: var(--cv-s5);
}

.main-container .cv .cv-media-body { flex: 1 1 auto; min-width: 0; }
.main-container .cv .cv-media img { flex: 0 0 auto; display: block; width: 12rem; height: auto; border-radius: var(--cv-radius-sm); }

/* ---- banner: a whole-row link to a related page ---- */
.main-container .cv .cv-banner,
.main-container .cv .cv-banner:link,
.main-container .cv .cv-banner:visited {
  display: flex;
  align-items: center;
  gap: var(--cv-s3);
  padding: var(--cv-s4) var(--cv-s5);
  font-size: var(--cv-text);
  line-height: 1.45;
  color: var(--cv-navy);
  text-decoration: none;
  background: var(--cv-navy-050);
  border-left: 4px solid var(--cv-sky-700);
  border-radius: var(--cv-radius);
  transition: background-color var(--cv-fast) var(--cv-ease);
}

.main-container .cv .cv-banner:hover,
.main-container .cv .cv-banner:focus-visible {
  color: var(--cv-navy);
  background: var(--cv-navy-100);
  text-decoration: none;
}

.main-container .cv .cv-banner-text { flex: 1 1 auto; min-width: 0; }
.main-container .cv .cv-banner strong { font-weight: 700; }
.main-container .cv .cv-banner > i { flex: 0 0 auto; font-size: 1.8rem; color: var(--cv-sky-700); }
.main-container .cv .cv-banner > .cv-banner-arrow { transition: transform var(--cv-fast) var(--cv-ease); }
.main-container .cv .cv-banner:hover > .cv-banner-arrow { transform: translateX(3px); }

/* ---- numbered steps ---- */
.main-container .cv .cv-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cv-step;
}

.main-container .cv .cv-steps > li {
  position: relative;
  counter-increment: cv-step;
  margin: 0;
  padding: var(--cv-s3) 0 var(--cv-s3) 5.2rem;
  font-size: var(--cv-text);
  line-height: 1.55;
  color: var(--cv-ink);
  border-bottom: 1px solid var(--cv-line);
}

.main-container .cv .cv-steps > li:last-child { border-bottom: 0; }

.main-container .cv .cv-steps > li::before {
  content: counter(cv-step);
  position: absolute;
  left: 0;
  top: var(--cv-s3);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  background: var(--cv-navy);
  border-radius: 22%;
}

.main-container .cv .cv-steps ul,
.main-container .cv .cv-steps ol {
  margin: var(--cv-s2) 0 0;
  padding-left: 2.4rem;
}

.main-container .cv .cv-steps ul { list-style: disc; }
.main-container .cv .cv-steps ol { list-style: lower-roman; }

.main-container .cv .cv-steps ul li,
.main-container .cv .cv-steps ol li {
  margin: 0 0 var(--cv-s1);
  padding: 0;
  font-size: var(--cv-text);
  line-height: 1.55;
}

.main-container .cv .cv-steps a,
.main-container .cv .cv-steps a:link,
.main-container .cv .cv-steps a:visited {
  color: var(--cv-sky-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.main-container .cv .cv-steps a:hover,
.main-container .cv .cv-steps a:focus-visible { color: var(--cv-navy); }

.main-container .cv .cv-steps strong { font-weight: 700; color: var(--cv-ink-strong); }

/* ---- buttons ---- */
.main-container .cv .cv-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-s3);
  margin-bottom: var(--cv-s4);
}

.main-container .cv .cv-actions:last-child { margin-bottom: 0; }

/* In an intro the button follows the lead paragraph rather than preceding
   body copy, so the space goes above it instead of below. */
.main-container .cv .cv-actions--intro { margin: var(--cv-s4) 0 0; }

.main-container .cv .cv-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cv-s1);
  padding: var(--cv-s3) var(--cv-s5);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--cv-radius);
  transition: background-color var(--cv-fast) var(--cv-ease),
              color var(--cv-fast) var(--cv-ease),
              border-color var(--cv-fast) var(--cv-ease);
}

/* The arrow nudge, identical to home-test-v2's shared CTA-arrow rule. */
.main-container .cv .cv-btn i { font-size: 0.8em; transition: transform var(--cv-fast) var(--cv-ease); }
.main-container .cv .cv-btn:hover i { transform: translateX(3px); }

/* Every link state stated, so the legacy green, visited green and hover
   underline cannot reach a button. */
.main-container .cv .cv-btn--primary,
.main-container .cv .cv-btn--primary:link,
.main-container .cv .cv-btn--primary:visited {
  color: #fff;
  background: var(--cv-navy);
  border-color: var(--cv-navy);
  text-decoration: none;
}

.main-container .cv .cv-btn--primary:hover,
.main-container .cv .cv-btn--primary:focus-visible,
.main-container .cv .cv-btn--primary:active {
  color: #fff;
  background: var(--cv-navy-700);
  border-color: var(--cv-navy-700);
  text-decoration: none;
}

.main-container .cv .cv-btn--secondary,
.main-container .cv .cv-btn--secondary:link,
.main-container .cv .cv-btn--secondary:visited {
  color: var(--cv-navy);
  background: var(--cv-surface);
  border-color: var(--cv-navy);
  text-decoration: none;
}

.main-container .cv .cv-btn--secondary:hover,
.main-container .cv .cv-btn--secondary:focus-visible,
.main-container .cv .cv-btn--secondary:active {
  color: var(--cv-navy);
  background: var(--cv-navy-050);
  text-decoration: none;
}

/* Small outlined link, for a row of destinations on a card. */
.main-container .cv .cv-chip,
.main-container .cv .cv-chip:link,
.main-container .cv .cv-chip:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem var(--cv-s2);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cv-navy);
  text-decoration: none;
  background: var(--cv-surface);
  border: 1px solid var(--cv-navy-100);
  border-radius: var(--cv-radius);
  transition: background-color var(--cv-fast) var(--cv-ease),
              border-color var(--cv-fast) var(--cv-ease);
}

.main-container .cv .cv-chip:hover,
.main-container .cv .cv-chip:focus-visible {
  color: var(--cv-navy);
  background: var(--cv-navy-050);
  border-color: var(--cv-navy);
  text-decoration: none;
}

.main-container .cv .cv-chip i { font-size: 0.85em; }

/* ---- resource links ---- */
.main-container .cv .cv-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.main-container .cv .cv-links li {
  margin: 0;
  padding: var(--cv-s2) 0;
  font-size: 1.6rem;
  line-height: 1.4;
  border-bottom: 1px solid var(--cv-line);
}

.main-container .cv .cv-links li:last-child { border-bottom: 0; }

.main-container .cv .cv-links a,
.main-container .cv .cv-links a:link,
.main-container .cv .cv-links a:visited {
  color: var(--cv-sky-700);
  text-decoration: none;
}

.main-container .cv .cv-links a:hover,
.main-container .cv .cv-links a:focus-visible {
  color: var(--cv-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.main-container .cv .cv-links a i { margin-left: 0.6rem; font-size: 0.85em; opacity: 0.85; }

/* A label that splits one link list into groups. */
.main-container .cv .cv-links li.cv-links-head {
  padding-top: var(--cv-s4);
  font-size: var(--cv-fib-13);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cv-green-700);
  border-bottom: 0;
}

/* ---- accordion ----
   Deliberately NOT styled here. Accordions use the .awc-bill-faq-* classes
   from /css/myawc-styles.css (loaded site-wide by head.php), so they look and
   behave exactly like the ones on /customer-care/pay-a-bill/ and /faq/. Markup
   comes from include/conservation-accordion.php and behaviour from
   /js/awc-accordion.js. Only the two rules below are ours. */

/* Lists inside an answer sit 24px in from the question above them. rem is 10px
   on this site (see constraint 1), so 2.4rem. Scoped to the panel so the same
   list classes elsewhere on the page are untouched. */
.main-container .cv .awc-bill-faq-panel-inner .cv-checklist,
.main-container .cv .awc-bill-faq-panel-inner .cv-links { padding-left: 2.4rem; }

@media print {
  /* Collapsed answers are `hidden`; show them all on paper. */
  .main-container .cv .awc-bill-faq-panel[hidden] { display: block; }
}

/* ---- videos ---- */
.main-container .cv .cv-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: var(--cv-s4);
}

.main-container .cv .cv-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--cv-navy-900);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-sm);
}

.main-container .cv .cv-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---- photos ---- */
.main-container .cv .cv-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cv-s4);
}

.main-container .cv .cv-photos img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-sm);
}

/* ---- program cards (conservation home) ---- */
.main-container .cv .cv-programs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: var(--cv-s6);
}

.main-container .cv .cv-program {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--cv-surface);
  border-top: 3px solid var(--cv-green);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-md);
}

.main-container .cv .cv-program-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cv-s5) var(--cv-s5) var(--cv-s4);
  border-bottom: 1px solid var(--cv-line);
}

.main-container .cv .cv-program-logo img {
  display: block;
  max-width: 100%;
  max-height: 16rem;
  width: auto;
  height: auto;
  object-fit: contain;
}

.main-container .cv .cv-program-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--cv-s4);
  padding: var(--cv-s5);
}

.main-container .cv .cv-program-name {
  margin: 0 0 0.4rem;
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cv-navy);
}

.main-container .cv .cv-program-area {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--cv-ink);
}

/* Pins the link row to the bottom so cards of unequal copy still line up. */
.main-container .cv .cv-program-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cv-s1);
  margin-top: auto;
}

/* ---- literature cards ---- */
.main-container .cv .cv-lit {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: var(--cv-s6);
}

.main-container .cv .cv-lit-card,
.main-container .cv .cv-lit-card:link,
.main-container .cv .cv-lit-card:visited {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--cv-ink-strong);
  text-decoration: none;
  background: var(--cv-surface);
  border-top: 3px solid var(--cv-green);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-md);
  transition: box-shadow var(--cv-base) var(--cv-ease);
}

.main-container .cv .cv-lit-card:hover,
.main-container .cv .cv-lit-card:focus-visible {
  color: var(--cv-navy);
  text-decoration: none;
  box-shadow: var(--cv-shadow-lg);
}

.main-container .cv .cv-lit-card img { display: block; width: 100%; height: auto; }

.main-container .cv .cv-lit-label {
  margin: 0;
  padding: var(--cv-s5);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
}

/* ---- blog posts ---- */
.main-container .cv .cv-posts {
  display: flex;
  flex-direction: column;
  gap: var(--cv-s6);
}

.main-container .cv .cv-post,
.main-container .cv .cv-post:link,
.main-container .cv .cv-post:visited {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--cv-s5);
  align-items: start;
  padding: var(--cv-s5);
  color: var(--cv-ink);
  text-decoration: none;
  background: var(--cv-surface);
  border-top: 3px solid var(--cv-green);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-md);
  transition: box-shadow var(--cv-base) var(--cv-ease);
}

.main-container .cv .cv-post:hover,
.main-container .cv .cv-post:focus-visible {
  color: var(--cv-ink);
  text-decoration: none;
  box-shadow: var(--cv-shadow-lg);
}

.main-container .cv .cv-post img { display: block; width: 100%; height: auto; border-radius: var(--cv-radius-sm); }
.main-container .cv .cv-post-title { margin: 0 0 var(--cv-s1); font-size: 1.9rem; font-weight: 700; line-height: 1.3; color: var(--cv-navy); }
.main-container .cv .cv-post-desc { margin: 0 0 var(--cv-s2); font-size: 1.5rem; line-height: 1.55; }
.main-container .cv .cv-post-date { margin: 0; font-size: var(--cv-fib-13); font-weight: 700; letter-spacing: 0.08em; color: var(--cv-muted); }

/* ---- gallery grid + lightbox (conservation/js/cv-gallery.js) ----
   Uniform 4:3 tiles, cropped from the top-centre so faces survive portrait
   photos. The full photo, uncropped, is in the lightbox. */
.main-container .cv .cv-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
  gap: var(--cv-s5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Legacy `.flex .main-container ul li` would otherwise set a 44px line-height
   and padding on every tile. */
.main-container .cv .cv-gallery-item { margin: 0; padding: 0; line-height: 0; }
.main-container .cv .cv-gallery-item[hidden] { display: none; }

.main-container .cv .cv-gallery-tile,
.main-container .cv .cv-gallery-tile:link,
.main-container .cv .cv-gallery-tile:visited {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--cv-navy-050);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-md);
  transition: box-shadow var(--cv-base) var(--cv-ease);
}

.main-container .cv .cv-gallery-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 300ms var(--cv-ease);
}

.main-container .cv .cv-gallery-tile:hover,
.main-container .cv .cv-gallery-tile:focus-visible { box-shadow: var(--cv-shadow-lg); }
.main-container .cv .cv-gallery-tile:hover img,
.main-container .cv .cv-gallery-tile:focus-visible img { transform: scale(1.04); }

/* Only promise a zoom once the lightbox script is actually running. */
.main-container .cv .cv-gallery.is-enhanced .cv-gallery-tile { cursor: zoom-in; }

.main-container .cv .cv-gallery-more {
  display: flex;
  justify-content: center;
  margin-top: var(--cv-s5);
}

.main-container .cv .cv-gallery-more[hidden] { display: none; }

/* A <button> styled as .cv-btn: the legacy button rules reset the font. */
.main-container .cv button.cv-btn { font-family: inherit; cursor: pointer; }

/* Lightbox. <dialog> is the browser's own modal: focus trap, Esc to close and
   the dimmed ::backdrop come for free. It is transparent and wide so the photo
   floats on the backdrop; clicks on the transparent part close it. */
.main-container .cv .cv-lightbox {
  position: fixed;
  inset: 0;
  width: min(96vw, 110rem);
  max-width: none;
  height: fit-content;
  max-height: 96vh;
  margin: auto;
  padding: 0;
  color: #fff;
  background: transparent;
  border: 0;
  overflow: visible;
}

.main-container .cv .cv-lightbox::backdrop { background: rgba(20, 29, 69, .9); }

.main-container .cv .cv-lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

/* Shrinks to the photo (it is a flex item centred in the figure), so the
   buttons positioned inside it track the photo's corners and edges. */
.main-container .cv .cv-lightbox-stage {
  position: relative;
  max-width: 100%;
  line-height: 0;
}

.main-container .cv .cv-lightbox-img {
  display: block;
  width: auto;
  height: auto;
  /* Same width as the dialog. A percentage would be circular here: the stage
     is sized by the photo, so the photo cannot be sized by the stage. */
  max-width: min(96vw, 110rem);
  max-height: 78vh;
  background: var(--cv-navy-900);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-lg);
}

.main-container .cv .cv-lightbox-caption {
  max-width: 80ch;
  margin-top: var(--cv-s3);
  padding: 0 var(--cv-s3);
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #fff;
}

.main-container .cv .cv-lightbox-count {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--cv-fib-13);
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: .8;
}

.main-container .cv .cv-lightbox-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  font-size: 1.8rem;
  line-height: 1; /* the stage sets 0 to remove the gap under the photo */
  color: var(--cv-navy);
  background: rgba(255, 255, 255, .95);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--cv-shadow-md);
  cursor: pointer;
  transition: background-color var(--cv-fast) var(--cv-ease), color var(--cv-fast) var(--cv-ease);
}

.main-container .cv .cv-lightbox-btn:hover { color: #fff; background: var(--cv-navy); }
.main-container .cv .cv-lightbox-btn:focus-visible { outline: 3px solid var(--cv-sky); outline-offset: 2px; }

/* Inset from the photo's own edges: close in its top-right corner, the arrows
   centred on its left and right edges. Inside the photo rather than hanging
   off it, so none can be pushed off-screen on a narrow phone. */
.main-container .cv .cv-lightbox-btn--close { top: var(--cv-s2); right: var(--cv-s2); }
.main-container .cv .cv-lightbox-btn--prev  { left: var(--cv-s2);  top: 50%; transform: translateY(-50%); }
.main-container .cv .cv-lightbox-btn--next  { right: var(--cv-s2); top: 50%; transform: translateY(-50%); }

/* ---- contact cards ---- */
.main-container .cv .cv-contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cv-s4);
}

/* Recognisably the client's outlined box, refined into the v2 card: hairline
   border, navy top rule, radius, soft shadow. */
.main-container .cv .cv-contact-card {
  padding: var(--cv-s5) var(--cv-s4);
  text-align: center;
  background: var(--cv-surface);
  border: 1px solid var(--cv-line);
  border-top: 3px solid var(--cv-navy);
  border-radius: var(--cv-radius);
  box-shadow: var(--cv-shadow-md);
}

.main-container .cv .cv-contact-text {
  margin: 0 0 var(--cv-s3);
  font-size: 1.6rem;
  line-height: 1.55;
  color: var(--cv-ink);
}

.main-container .cv .cv-contact-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cv-s1);
  margin: 0;
}

.main-container .cv .cv-contact-link,
.main-container .cv .cv-contact-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--cv-sky-700);
  text-decoration: none;
}

.main-container .cv .cv-contact-link:hover,
.main-container .cv .cv-contact-link:focus-visible {
  color: var(--cv-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.main-container .cv .cv-contact-link i { font-size: 0.85em; opacity: 0.85; }

/* ---- focus ---- */
/* DS focus ring. Declared on the layout so the sidebar gets it too. */
.cv-layout :focus-visible {
  outline: 2px solid var(--cv-sky-700);
  outline-offset: 2px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* The legacy layout keeps the 260px sidebar beside the content until 550px,
   which by ~900px leaves the content column too narrow for cards. These pages
   stack earlier. The menu goes ABOVE the content, collapsed to a single bar
   (see .cv-side-toggle below): it used to sit after the content, which on a
   long page buried the only way to reach the other conservation pages at the
   very bottom. Collapsed, it costs one row of height and is always at the top. */
@media (max-width: 900px) {
  .cv-layout.flex.ss-mod { flex-direction: column; }

  .cv-layout .cv-side {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: var(--cv-s5);
  }

  /* The toggle only exists once the script that drives it has run
     (.cv-side--js, added by include/conservation-sidebar-v2.php). Without
     JavaScript the menu simply stays open above the content. */
  .cv-layout .cv-side--js .cv-side-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cv-s3);
    width: 100%;
    padding: var(--cv-s3) var(--cv-s4);
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
    color: var(--cv-navy);
    background: var(--cv-surface);
    border: 0;
    border-top: 3px solid var(--cv-green);
    border-radius: var(--cv-radius);
    box-shadow: var(--cv-shadow-md);
    cursor: pointer;
  }

  .cv-layout .cv-side-toggle-icon { transition: transform var(--cv-base) var(--cv-ease); }
  .cv-layout .cv-side--js.is-open .cv-side-toggle-icon { transform: rotate(180deg); }

  .cv-layout .cv-side--js .cv-side-body { display: none; margin-top: var(--cv-s3); }
  .cv-layout .cv-side--js.is-open .cv-side-body { display: block; }

  /* Two columns of menu rows while there is room for them. */
  .cv-layout .cv-side-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cv-layout .cv-side-list li:last-child .cv-side-link { border-bottom: 1px solid var(--cv-line); }

  /* Same 40% reduction here: 22rem → 13.2rem. */
  .cv-layout .cv-side-promo { max-width: 13.2rem; }

  /* Stacked, the sidebar is above the content rather than beside it, so there
     is no nav–content gutter to supply: the left padding matches the legacy
     1em on the right instead of staying zero. */
  .cv-layout .main-container { padding-left: 1em; }

  .main-container .cv .cv-card { padding: var(--cv-s4); }
}

@media (max-width: 700px) {
  .main-container .cv .cv-contact { grid-template-columns: 1fr; }
  .main-container .cv .cv-checklist--compact { grid-template-columns: 1fr; }
  .main-container .cv .cv-checklist--compact .cv-check:nth-last-child(2) { border-bottom: 1px solid rgba(141, 124, 92, .22); }
  .main-container .cv .cv-callout { padding: var(--cv-s4); }
  .main-container .cv .cv-title { font-size: 2.8rem; }
  .main-container .cv .cv-photos { grid-template-columns: 1fr; }
  /* Two tiles across on a phone rather than one huge one. */
  .main-container .cv .cv-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cv-s3); }
  .main-container .cv .cv-lightbox-btn { width: 4rem; height: 4rem; }
  .main-container .cv .cv-post { grid-template-columns: 1fr; }
  .main-container .cv .cv-media { flex-direction: column; align-items: flex-start; }
  .main-container .cv .cv-banner { padding: var(--cv-s3) var(--cv-s4); }
}

@media (max-width: 550px) {
  .cv-layout .cv-side-list { grid-template-columns: 1fr; }

  /* Full-width buttons are easier targets than two side by side on a phone. */
  .main-container .cv .cv-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .cv-layout *,
  .cv-layout *::before,
  .cv-layout *::after { transition-duration: 0.01ms !important; }
  .main-container .cv .cv-btn:hover i,
  .main-container .cv .cv-banner:hover > .cv-banner-arrow,
  .main-container .cv .cv-gallery-tile:hover img,
  .main-container .cv .cv-gallery-tile:focus-visible img { transform: none; }
}

@media print {
  .cv-layout .cv-side { display: none; }
  .main-container .cv .cv-lightbox,
  .main-container .cv .cv-gallery-more { display: none; }
  .main-container .cv .cv-card,
  .main-container .cv .cv-contact-card,
  .main-container .cv .cv-program,
  .main-container .cv .cv-lit-card,
  .main-container .cv .cv-post { box-shadow: none; }
}