/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  :root {
    --primary: #2f6b4f;
    --primaryShade: #3d8a66;
    --primaryDark: #1e4633;
    /* neutral grey — the starter's #4e4b66 reads purple against the green brand */
    --bodyTextColor: #4a4a4a;
    --bodyTextColorWhite: #fafbfc;
    --headerColor: #1a1a1a;
    /* Gold accent for nav hover/active on the green bar. Measures 2.86:1 on
       --primary, below the 4.5 WCAG AA wants — kept as a deliberate brand
       choice. Lightening it to #ffd98a would pass. */
    --navAccent: #e0a43a;
    /* Green for text on dark surfaces. --primary only reaches 2.7-2.9:1 there;
       this holds 8:1+. Several rules referenced this token before it existed,
       so they silently fell back to --primary. */
    --primaryLight: #6fc49a;
    /* Paler still, for green text over a photo. --primaryLight drops to 1.98:1
       on the hero's brightest patch; this holds 3.4:1 across the whole image. */
    --primaryOnPhoto: #c9f2dd;
    /* rgb channels of --primary, for glows and shadows that need alpha */
    --primaryRGB: 47, 107, 79;
    /* 14px - 18px */
    --topperFontSize: clamp(0.875rem, 1.6vw, 1.125rem);
    /* 31px - 56px */
    --headerFontSize: clamp(1.9375rem, 4.5vw, 3.5rem);
    /* 17px - 19px — body copy scales past 1300px instead of sticking at 16px */
    --bodyFontSize: clamp(1.0625rem, 1.15vw, 1.1875rem);
    /* 40px - 88px top and bottom. The floor has to be below 6.5vw or phones
       pin to it and two stacked sections leave a 112px band between them. */
    --sectionPadding: clamp(2.5em, 6.5vw, 5.5em) 1rem;
  }
  /* roboto-regular - latin */
  @font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 400;
    src:
      local(""),
      url("/assets/fonts/roboto-v29-latin-regular.woff2") format("woff2"),
      /* Chrome 26+, Opera 23+, Firefox 39+ */
        url("/assets/fonts/roboto-v29-latin-regular.woff") format("woff");

    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* roboto-700 - latin */
  @font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 700;
    src:
      local(""),
      url("/assets/fonts/roboto-v29-latin-700.woff2") format("woff2"),
      /* Chrome 26+, Opera 23+, Firefox 39+ */
        url("/assets/fonts/roboto-v29-latin-700.woff") format("woff");

    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* roboto-900 - latin */
  @font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 900;
    src:
      local(""),
      url("/assets/fonts/roboto-v29-latin-900.woff2") format("woff2"),
      /* Chrome 26+, Opera 23+, Firefox 39+ */
        url("/assets/fonts/roboto-v29-latin-900.woff") format("woff");

    /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  body,
  html {
    margin: 0;
    padding: 0;
    font-size: 100%;
    font-family: "Roboto", Arial, sans-serif;
    color: var(--bodyTextColor);
    /* overflow-x: hidden here would break position: sticky on the nav — the
       sticky element needs the document itself as its scrollport. Sections
       that could overflow clip themselves instead. */
    overflow-x: clip;
  }
  *,
  *:before,
  *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    transition: background-color 0.3s;
  }
  html.no-transition *,
  html.no-transition *:before,
  html.no-transition *:after {
    transition: none !important;
    animation: none !important;
  }
  .container {
    position: relative;
    width: 92%;
    margin: auto;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0;
    color: var(--headerColor);
  }
  p,
  li,
  a {
    font-size: 1.125rem;
    line-height: 1.5em;
    margin: 0;
  }
  p,
  li {
    color: #575757;
  }
  a:hover,
  button:hover {
    cursor: pointer;
  }

  /* Shared section typography. Each pasted CodeStitch section used to define
     its own sizes, so headings drifted between sections. These are the base;
     sections still override spacing/color where they need to. */
  .cs-topper {
    font-size: var(--topperFontSize);
    line-height: 1.2em;
    text-transform: uppercase;
    text-align: inherit;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.25rem;
    display: block;
  }
  .cs-title {
    font-size: var(--headerFontSize);
    font-weight: 900;
    line-height: 1.2em;
    text-align: inherit;
    max-width: 43.75rem;
    margin: 0 0 1rem 0;
    color: var(--headerColor);
    position: relative;
  }
  .cs-text {
    font-size: var(--bodyFontSize);
    line-height: 1.5em;
    text-align: inherit;
    width: 100%;
    max-width: 40.625rem;
    margin: 0;
    color: var(--bodyTextColor);
  }

  /* Solid primary button. Hover scales up slightly with a soft glow in the
     brand colour — the color never changes, so contrast is identical in
     light and dark themes. */
  .button-solid {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
    width: auto;
    line-height: 3.125em;
    height: 3.125rem;
    text-align: center;
    padding: 0 1.875rem;
    border-radius: 0.25rem;
    position: relative;
    z-index: 1;
    background-color: var(--primary);
    color: #fff;
    transition:
      background-color 0.3s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  .button-solid:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -6px rgba(var(--primaryRGB), 0.55);
  }
  .button-solid:active {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px -4px rgba(var(--primaryRGB), 0.45);
  }
  .skip {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1111111;
  }
}
/* Reset Margins */
@media only screen and (min-width: 1024px) {
  body,
  html {
    padding: 0;
    margin: 0;
  }
}
/* Scale the whole site up on large screens. Every component sizes itself in
   rem-based clamps, so lifting the root size lifts type, spacing and padding
   together. Previously this only kicked in at 2000px, which left everything
   pinned at 16px across the common 1400-1900px range. */
@media only screen and (min-width: 1400px) {
  body,
  html {
    font-size: 112.5%; /* 18px */
  }
}
@media only screen and (min-width: 1800px) {
  body,
  html {
    font-size: 125%; /* 20px */
  }
}
@media only screen and (min-width: 2400px) {
  body,
  html {
    font-size: 0.85vw;
  }
}
/*-- -------------------------- -->
<---         Navigation         -->
<--- -------------------------- -*/
/* CodeStitch navigation.
   One source of truth, three states:
     • < 64rem  — fixed bar + slide-down mobile panel
     • >= 64rem — inline horizontal nav with hover dropdown
     • body.scroll — compact sticky bar (both sizes)
   Uses the shared --primary / --headerColor tokens so dark mode follows. */

/* ---------- Shared / mobile-first ---------- */
@media only screen and (min-width: 0rem) {
  /* stops the page scrolling behind the open mobile panel */
  body.cs-open {
    overflow: hidden;
  }

  /* Two-tier header: the top bar scrolls away and the green bar sticks. Its
     geometry lives in local.css; this only sets what is shared. */
  #cs-navigation {
    width: 100%;
    padding: 0;
    background-color: #fff;
    box-sizing: border-box;
    position: relative;
    z-index: 10000;
    transition: background-color 0.3s;
  }

  #cs-navigation .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    align-items: center;
    /* logo left, everything else right */
    justify-content: space-between;
    gap: 1rem;
  }

  /* --- Logo --- */
  #cs-navigation .cs-logo {
    /* 120px - 180px. The stock logos are 221x66. */
    width: clamp(7.5rem, 16vw, 11.25rem);
    height: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    color: var(--headerColor);
    z-index: 10;
  }
  #cs-navigation .cs-logo-svg {
    width: 100%;
    height: auto;
    display: block;
  }
  /* Size only — which of the two theme logos is visible is decided by the
     anti-flicker block in base.html and by dark.css. Setting `display` here
     would outrank both and show them stacked. */
  #cs-navigation .cs-logo img {
    width: 100%;
    height: auto;
  }

  /* --- Hamburger --- */
  #cs-navigation .cs-toggle {
    width: 3rem;
    height: 3rem;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
  #cs-navigation .cs-box {
    width: 1.5rem;
    height: 1rem;
    position: relative;
    display: block;
  }
  #cs-navigation .cs-line {
    width: 100%;
    height: 2px;
    background-color: var(--headerColor);
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition:
      transform 0.3s,
      opacity 0.3s,
      top 0.3s;
  }
  #cs-navigation .cs-line1 {
    top: 0;
    transform-origin: center;
  }
  #cs-navigation .cs-line2 {
    top: 50%;
    transform: translateY(-50%);
  }
  #cs-navigation .cs-line3 {
    bottom: 0;
  }
  /* hamburger → X */
  #cs-navigation .cs-toggle.cs-active .cs-line1 {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }
  #cs-navigation .cs-toggle.cs-active .cs-line2 {
    opacity: 0;
  }
  #cs-navigation .cs-toggle.cs-active .cs-line3 {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }

  /* --- Phone + dark toggle --- */
  #cs-navigation .cs-contact-group {
    display: flex;
    align-items: center;
  }
  #cs-navigation .cs-phone {
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--headerColor);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    /* same duration AND easing as the icon's filter, or the two halves of the
       link appear to light up at different speeds */
    transition: color 0.3s ease-in-out;
  }
  #cs-navigation .cs-phone:hover {
    color: var(--primary);
  }
  /* The icon keeps its colour and just scales — transform interpolates
     reliably, unlike swapping between two different filter chains. */
  #cs-navigation .cs-phone-icon {
    width: 1.25rem;
    height: auto;
    transition: transform 0.3s ease-in-out;
  }
  #cs-navigation .cs-phone:hover .cs-phone-icon {
    transform: scale(1.15);
  }
  #cs-navigation #dark-mode-toggle {
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    background-color: transparent;
    border: none;
    display: block;
    /* the sun/moon are absolutely positioned against this */
    position: relative;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
  }
  #cs-navigation #dark-mode-toggle .moon {
    width: 1.25rem;
    height: auto;
    fill: var(--headerColor);
  }
  #cs-navigation #dark-mode-toggle .sun {
    width: 1.25rem;
    height: auto;
  }
}

/* ---------- Mobile panel: below 1024px ---------- */
@media only screen and (max-width: 63.9375rem) {
  /* the phone number is the only contact item small screens keep inline */
  #cs-navigation .cs-contact-group {
    display: none;
  }

  /* hamburger goes last so it sits at the far right of the bar */
  #cs-navigation .cs-nav {
    order: 3;
    display: flex;
    align-items: center;
  }
  #cs-navigation #dark-mode-toggle {
    order: 2;
    margin-left: auto;
  }

  /* slide-down panel */
  #cs-navigation .cs-ul-wrapper {
    width: 100%;
    max-height: 0;
    background-color: #fff;
    box-shadow: 0 12px 24px rgba(26, 26, 26, 0.12);
    overflow: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999;
    transition:
      max-height 0.35s ease,
      visibility 0.35s;
    visibility: hidden;
  }
  #cs-navigation.cs-active .cs-ul-wrapper {
    /* generous ceiling: the panel is never this tall, so it animates fully open */
    max-height: min(80vh, 43.75rem);
    visibility: visible;
    overflow-y: auto;
  }

  #cs-navigation .cs-ul {
    width: 100%;
    margin: 0;
    /* No vertical padding of its own: each link's 1rem already gives the first
       and last items half the 2rem gap that sits between two links. */
    padding: 0 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #cs-navigation .cs-li {
    width: 100%;
    list-style: none;
    border-bottom: 1px solid rgba(26, 26, 26, 0.08);
  }
  /* The CTA is last in source order but `order: -1` moves it to the top of the
     panel, so the item before it is always the visual last. Both need no
     divider — :last-of-type alone would leave one trailing under Contact. */
  #cs-navigation .cs-li:last-of-type,
  #cs-navigation .cs-li:has(+ .cs-li-cta) {
    border-bottom: none;
  }
  #cs-navigation .cs-li-link {
    width: 100%;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.2em;
    text-decoration: none;
    padding: 1rem 0;
    color: var(--headerColor);
    display: block;
    box-sizing: border-box;
    transition: color 0.3s;
  }
  #cs-navigation .cs-li-link:hover,
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
  }

  /* dropdown → accordion */
  #cs-navigation .cs-dropdown-toggle {
    width: 100%;
    font-family: inherit;
    text-align: left;
    background-color: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
  }
  #cs-navigation .cs-drop-icon {
    width: 0.9375rem;
    height: auto;
    transition: transform 0.3s;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-icon {
    transform: rotate(180deg);
  }
  #cs-navigation .cs-drop-ul {
    width: 100%;
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition:
      max-height 0.3s ease,
      padding 0.3s;
  }
  #cs-navigation .cs-dropdown.cs-active .cs-drop-ul {
    max-height: 25rem;
    padding-bottom: 0.5rem;
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
  }
  #cs-navigation .cs-drop-link {
    font-size: 1rem;
    font-weight: 400;
    padding: 0.75rem 0 0.75rem 1rem;
    color: var(--bodyTextColor);
  }
  /* the hub link is the parent of the four below it, not a fifth service */
  #cs-navigation .cs-drop-link-all {
    font-weight: 700;
    color: var(--headerColor);
  }
}

/* ---------- Desktop: 1024px and up ---------- */
@media only screen and (min-width: 64rem) {
  #cs-navigation .cs-toggle {
    display: none;
  }

  #cs-navigation .cs-container {
    /* logo | nav | contact — nav takes the slack */
    justify-content: flex-start;
    gap: clamp(1rem, 3vw, 2.5rem);
  }

  #cs-navigation .cs-nav {
    /* push the contact group to the far right */
    margin-right: auto;
    display: flex;
    align-items: center;
  }
  #cs-navigation .cs-ul-wrapper {
    /* no panel on desktop — always visible, no transitions to fight */
    max-height: none;
    visibility: visible;
    overflow: visible;
    background-color: transparent;
    box-shadow: none;
    position: static;
  }
  #cs-navigation .cs-ul {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    /* 16px - 36px — the nav breathes with the viewport instead of wrapping */
    gap: clamp(1rem, 2.4vw, 2.25rem);
  }
  #cs-navigation .cs-li {
    list-style: none;
    display: flex;
    align-items: center;
    position: relative;
  }
  #cs-navigation .cs-li-link {
    /* 16px - 19px */
    font-size: clamp(1rem, 1.25vw, 1.1875rem);
    font-weight: 500;
    line-height: 1.5em;
    text-decoration: none;
    white-space: nowrap;
    margin: 0;
    padding: 0.5rem 0;
    background-color: transparent;
    border: none;
    color: var(--headerColor);
    display: flex;
    align-items: center;
    gap: 0.375rem;
    position: relative;
    transition: color 0.3s;
    cursor: pointer;
    font-family: inherit;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link.cs-active {
    color: var(--primary);
    font-weight: 700;
  }

  /* --- Dropdown --- */
  #cs-navigation .cs-drop-icon {
    width: 0.75rem;
    height: auto;
    transition: transform 0.3s;
  }
  #cs-navigation .cs-dropdown:hover .cs-drop-icon,
  #cs-navigation .cs-dropdown:focus-within .cs-drop-icon {
    transform: rotate(180deg);
  }
  #cs-navigation .cs-drop-ul {
    min-width: 15rem;
    margin: 0;
    padding: 0.5rem 0;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 12px 32px rgba(26, 26, 26, 0.16);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    transition:
      opacity 0.25s,
      visibility 0.25s,
      transform 0.25s;
  }
  /* hover AND focus-within, so keyboard users get the same menu */
  #cs-navigation .cs-dropdown:hover .cs-drop-ul,
  #cs-navigation .cs-dropdown:focus-within .cs-drop-ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  #cs-navigation .cs-drop-li {
    list-style: none;
    width: 100%;
  }
  #cs-navigation .cs-drop-link {
    width: 100%;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5em;
    text-decoration: none;
    padding: 0.625rem 1.25rem;
    color: var(--bodyTextColor);
    display: block;
    box-sizing: border-box;
    transition:
      background-color 0.3s,
      color 0.3s;
  }
  /* the underline animation is a top-level-only affordance */
  #cs-navigation .cs-drop-link:before {
    display: none;
  }
  #cs-navigation .cs-drop-link:hover {
    background-color: rgba(255, 186, 25, 0.12);
    color: var(--headerColor);
  }
  /* the hub link is the parent of the four below it, not a fifth service */
  #cs-navigation .cs-drop-link-all {
    font-weight: 700;
    color: var(--headerColor);
    border-bottom: 1px solid rgba(26, 26, 26, 0.1);
    margin-bottom: 0.25rem;
    padding-bottom: 0.75rem;
  }

  #cs-navigation .cs-contact-group {
    gap: clamp(0.75rem, 1.5vw, 1.25rem);
    flex-shrink: 0;
  }
  #cs-navigation .cs-phone {
    font-size: clamp(1rem, 1.25vw, 1.1875rem);
  }
  #cs-navigation .cs-logo {
    /* 144px - 200px — scale with the bigger nav type */
    width: clamp(9rem, 13vw, 12.5rem);
    margin-right: clamp(1rem, 2.5vw, 2.5rem);
  }
}

/* ---------- Dark mode ---------- */
@media only screen and (min-width: 0rem) {
  /* A black shadow is invisible against the dark page, so the bar has no edge.
     A soft white one separates it from the content below. */
  body.dark-mode #cs-navigation {
    background-color: var(--dark);
    box-shadow: 0 2px 16px rgba(255, 255, 255, 0.14);
  }
  body.scroll.dark-mode #cs-navigation {
    box-shadow: 0 2px 20px rgba(255, 255, 255, 0.2);
  }
  body.dark-mode #cs-navigation .cs-logo,
  body.dark-mode #cs-navigation .cs-logo-svg,
  body.dark-mode #cs-navigation .cs-phone,
  body.dark-mode #cs-navigation .cs-li-link {
    color: #fff;
  }
  body.dark-mode #cs-navigation .cs-line {
    background-color: #fff;
  }
  body.dark-mode #cs-navigation #dark-mode-toggle .moon {
    fill: #fff;
  }
  /* The nav bar is brand green in both themes, so the active and hovered
     links keep the same accent — var(--primary) here would be green on
     green. */
  body.dark-mode #cs-navigation .cs-li-link:hover,
  body.dark-mode #cs-navigation .cs-li-link.cs-active,
  body.dark-mode #cs-navigation .cs-dropdown-toggle:hover {
    color: var(--navAccent);
  }
  body.dark-mode #cs-navigation .cs-phone:hover {
    color: var(--navAccent);
  }
  /* and tint the icon gold to match the label */
  /* the phone/chevron icons ship dark — flip them so they read on dark */
  body.dark-mode #cs-navigation .cs-phone-icon,
  body.dark-mode #cs-navigation .cs-drop-icon {
    filter: brightness(0) invert(1);
  }
  body.dark-mode #cs-navigation .cs-drop-ul {
    background-color: var(--medium);
  }
  body.dark-mode #cs-navigation .cs-li {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  /* the slide-down panel only exists below 1024px — on desktop the wrapper is
     just an inline container and must stay transparent */
  @media only screen and (max-width: 63.9375rem) {
    body.dark-mode #cs-navigation .cs-ul-wrapper {
      background-color: var(--medium);
    }
  }
  body.dark-mode #cs-navigation .cs-drop-link {
    color: var(--bodyTextColorWhite);
  }
  body.dark-mode #cs-navigation .cs-drop-link-all {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.15);
  }
  body.dark-mode #cs-navigation .cs-drop-link:hover {
    background-color: rgba(224, 164, 58, 0.16);
    color: #fff;
  }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #cs-navigation,
  #cs-navigation * {
    transition-duration: 0.01ms !important;
  }
}
<---   Interior Page Header     -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #int-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
    min-height: 30vh;
  }
  #int-hero:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.7;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #int-hero picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
  }
  #int-hero picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #int-hero h1 {
    color: #fff;
    font-size: 2.13333333rem;
    text-align: center;
    margin: 0 auto;
    position: relative;
    width: 96%;
    max-width: 31.25rem;
    margin-top: 4.375rem;
    margin-bottom: 1.875rem;
  }
  #int-hero p {
    color: #fff;
    text-align: center;
    max-width: 25rem;
    margin: auto;
    margin-bottom: 1.875rem;
    display: block;
    width: 96%;
  }
}
/* Tablet */
@media only screen and (min-width: 48em) {
  #int-hero {
    font-size: 100%;
  }
  #int-hero h1 {
    font-size: 4rem;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #int-hero {
    min-height: 18.75rem;
    height: auto;
    /* Padding is set by the Roza banner block further down, which sizes it
       against the fixed two-tier header. Leaving the stock desktop values here
       overrode that, so the title sat tight under the nav. */
    background-attachment: fixed;
    font-size: inherit;
  }
}
/*-- -------------------------- -->
<---           Footer           -->
<--- -------------------------- -*/
/* Mobile — stacked and centred. Colours are keyed to the brand green so
   the footer reads as the same family as the accent panels. */
@media only screen and (min-width: 0em) {
  #footer {
    /* Same green as the sticky nav bar, so the page opens and closes on it. */
    background: var(--primary);
    padding: clamp(3.5rem, 8vw, 5rem) 1rem clamp(1.5rem, 3vw, 2rem);
    text-align: center;
  }
  #footer .container {
    width: 100%;
    max-width: 82.5rem;
    margin: auto;
  }
  #footer .left-section {
    margin: 0 0 clamp(2.5rem, 6vw, 3.5rem);
  }
  #footer .left-section .logo {
    display: inline-block;
    height: 3.125rem;
    margin: 0 0 1.25rem;
  }
  #footer .left-section .logo img {
    width: auto;
    height: 100%;
    display: block;
  }
  #footer .left-section p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
    max-width: 34ch;
    margin: 0 auto;
  }
  #footer .right-section {
    width: 100%;
    margin: 0;
  }
  #footer .right-section .lists {
    display: grid;
    gap: clamp(2.25rem, 6vw, 3rem);
    margin: 0;
  }
  #footer .right-section .lists ul {
    padding: 0;
    margin: 0;
  }
  #footer .right-section .lists ul li {
    list-style: none;
    margin-bottom: 0.625rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.5;
  }
  #footer .right-section .lists ul li:last-of-type {
    margin-bottom: 0;
  }
  #footer .right-section .lists ul li a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.85);
    transition: color 0.3s;
  }
  #footer .right-section .lists ul li a:hover {
    color: #fff;
  }
  #footer .right-section .lists ul h2 {
    color: #fff;
    font-size: 1rem;
    line-height: 1.2;
    /* Room for the accent rule sitting below the heading. */
    margin: 0 0 1.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    position: relative;
  }
  #footer .right-section .lists ul h2:before {
    content: "";
    position: absolute;
    display: block;
    height: 0.125rem;
    width: 3.5rem;
    /* White, not --primaryShade: that green is too close to the new
       background to register. */
    background: rgba(255, 255, 255, 0.45);
    bottom: -0.75rem;
    /* Centred under the heading on mobile; pinned left once the lists
       sit side by side. */
    left: 50%;
    transform: translateX(-50%);
  }
  #footer .credit {
    /* 0.85, not 0.7 — 0.7 on the green only reached 4.02:1 (needs 4.5) */
    color: rgba(255, 255, 255, 0.85);
    width: 100%;
    max-width: 82.5rem;
    margin: clamp(3rem, 7vw, 4rem) auto 0;
    padding-top: clamp(1.25rem, 3vw, 1.75rem);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    line-height: 1.8;
    font-size: 0.875rem;
  }
  #footer .credit a {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: inherit;
  }
  #footer .credit a:hover {
    text-decoration: underline;
    text-underline-offset: 0.125rem;
  }
  #footer .credit .copyright {
    display: block;
    font-size: inherit;
  }
}
/* Tablet - 700px: the three lists sit side by side, so columns go left-aligned.
   The logo and blurb above them stay centred until the desktop split. */
@media only screen and (min-width: 43.75em) {
  #footer .right-section .lists {
    grid-template-columns: repeat(3, auto);
    justify-content: center;
    gap: clamp(2.5rem, 7vw, 5rem);
    text-align: left;
  }
  #footer .right-section .lists ul h2:before {
    left: 0;
    transform: none;
  }
}
/* Small Desktop - 1024px: blurb left, lists right. */
@media only screen and (min-width: 64em) {
  #footer {
    padding-left: 2rem;
    padding-right: 2rem;
  }
  #footer .container {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(3rem, 6vw, 6rem);
  }
  #footer .left-section {
    /* Sized by its own copy rather than a fixed width, but not so wide the
       lists get squeezed. */
    flex: 0 1 auto;
    max-width: 24rem;
    margin: 0;
    text-align: left;
  }
  #footer .left-section p {
    margin-left: 0;
  }
  #footer .left-section .logo {
    height: 4.125rem;
  }
  #footer .right-section .lists {
    justify-content: start;
  }
  #footer .right-section {
    flex: 0 1 auto;
    width: auto;
  }
  #footer .right-section .lists ul li a {
    position: relative;
  }
  #footer .right-section .lists ul li a:before {
    content: "";
    position: absolute;
    display: block;
    height: 0.125rem;
    width: 0%;
    background: #fff;
    bottom: -0.1875rem;
    left: 0;
    transition: width 0.3s;
  }
  #footer .right-section .lists ul li a:hover:before {
    width: 100%;
  }
  #footer .credit .copyright {
    display: inline-block;
  }
}
@media (prefers-reduced-motion: reduce) {
  #footer .right-section .lists ul li a:before {
    transition: none;
  }
}
/* Dark Mode — the green nav bar keeps --primary, so the footer does too.
   One green sitewide: a second, darker one only read as a mismatch next to
   the --primary buttons sitting on it. */
/*-- -------------------------- -->
<---     Scroll Reveal          -->
<--- -------------------------- -*/
/* reveal.js tags elements with .cs-reveal and adds .is-revealed once they
   scroll into view. [data-reveal] is the manual opt-in for the same effect. */
@media only screen and (min-width: 0em) {
  .cs-reveal,
  [data-reveal] {
    opacity: 0;
    transform: translateY(1.5rem);
    transition:
      opacity 0.6s ease,
      transform 0.6s ease;
    will-change: opacity, transform;
  }
  .cs-reveal.is-revealed,
  [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs-reveal,
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/*-- -------------------------- -->
<---   Interior Hero (banner)   -->
<--- -------------------------- -*/
/* Fixed-height banner with the photo behind the title. The stock rules sized
   this for the old nav, which took up layout space; #cs-navigation is
   position:fixed, so the section needs its own height and top clearance or
   the photo drops below the heading instead of sitting behind it. */
@media only screen and (min-width: 0em) {
  #int-hero {
    /* 220px - 400px */
    min-height: clamp(13.75rem, 32vw, 25rem);
    height: auto;
    /* The top padding has to clear the fixed header (~180px at rest) AND then
       add space below it, or the title sits tight under the nav. Roughly
       header + half the remaining band, with the bottom padding smaller so the
       title centres in the visible area rather than in the whole section. */
    padding-top: clamp(9rem, 17vw, 14rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
    position: relative;
    overflow: hidden;
    /* The stock rules above make this a centred flex column, which fights the
       h1's own auto margins and pushes the title off-centre. Normal flow. */
    display: block;
  }
  /* Stock full-bleed overlay, superseded by the gradient on .cs-picture. */
  #int-hero:before {
    display: none;
  }
  #int-hero .cs-picture {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #int-hero .cs-picture:before {
    /* Gradient, not flat black: darkest at the top where the title sits, so the
       photo stays visible lower down instead of going uniformly murky. */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.65) 0%,
      rgba(0, 0, 0, 0.45) 55%,
      rgba(0, 0, 0, 0.3) 100%
    );
    top: 0;
    left: 0;
    z-index: 1;
  }
  #int-hero .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    /* The band is much wider than it is tall, so a centred crop of a 4:3 photo
       shows only the middle — usually floor. Bias upward to keep the room. */
    object-position: center 35%;
  }
  #int-hero h1 {
    width: 92%;
    max-width: 50rem;
    margin: 0 auto;
    text-align: center;
    /* always white: it sits on a photo, so it can't follow the theme */
    color: #fff !important;
    position: relative;
    z-index: 2;
  }
}

/*-- -------------------------- -->
<---            CTA             -->
<--- -------------------------- -*/
/* CodeStitch CTA-51. The photo is a .cs-picture positioned absolute behind
   the content with a dark overlay, which is why the text sits on the image
   instead of above it. */
@media only screen and (min-width: 0rem) {
  #cta-51 {
    padding: var(--sectionPadding);
    position: relative;
  }
  #cta-51 .cs-container {
    width: 100%;
    max-width: 80rem;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 48px - 64px */
    gap: clamp(3rem, 6vw, 4rem);
  }
  #cta-51 .cs-content {
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #cta-51 .cs-title {
    color: var(--bodyTextColorWhite);
  }
  #cta-51 .cs-text {
    margin-bottom: 1rem;
    color: var(--bodyTextColorWhite);
    opacity: 0.8;
  }
  #cta-51 .cs-text:last-of-type {
    margin-bottom: 2rem;
  }
  #cta-51 .cs-button-solid {
    font-size: 1rem;
    /* 46px - 56px */
    line-height: clamp(2.875rem, 5.5vw, 3.5rem);
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    margin: 0;
    color: #fff;
    min-width: 9.375rem;
    padding: 0 1.5rem;
    background-color: var(--primary);
    border-radius: 0.25rem;
    display: inline-block;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    transition:
      background-color 0.3s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  /* the stock component wipes black across on hover, which reads badly on a
     dark photo. Lift + brand glow only — the fill colour stays put. */
  #cta-51 .cs-button-solid:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px -6px rgba(var(--primaryRGB), 0.55);
  }
  #cta-51 .cs-picture {
    height: 100%;
    width: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta-51 .cs-picture:before {
    /* black colour overlay, so white text stays readable on any photo */
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.8;
    top: 0;
    left: 0;
    z-index: 1;
  }
  #cta-51 .cs-picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}