/*-- -------------------------- -->
<---        Core Styles         -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  :root {
    --primary: #ffba19;
    --primaryShade: #ffd675;
    --primaryDark: #805d0d;
    --bodyTextColor: #4e4b66;
    --bodyTextColorWhite: #fafbfc;
    --headerColor: #1a1a1a;
    /* 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);
    /* 56px - 88px top and bottom */
    --sectionPadding: clamp(3.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;
  }
  *,
  *: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 gold button. Hover scales up slightly with a soft gold glow — 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: #1a1a1a;
    transition:
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  .button-solid:hover {
    transform: scale(1.05);
    box-shadow: 0 0 24px 4px rgba(255, 186, 25, 0.45);
  }
  .button-solid:active {
    transform: scale(1.02);
    box-shadow: 0 0 16px 2px rgba(255, 186, 25, 0.35);
  }
  .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         -->
<--- -------------------------- -*/
/* Custom header for Acme Roofing.
   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;
  }

  #cs-navigation {
    width: 100%;
    /* 12px - 20px vertical */
    padding: clamp(0.75rem, 1.6vw, 1.25rem) 1rem;
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(26, 26, 26, 0.08);
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    transition:
      padding 0.3s,
      background-color 0.3s,
      box-shadow 0.3s;
  }
  /* compact bar once the page is scrolled */
  body.scroll #cs-navigation {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    box-shadow: 0 2px 16px rgba(26, 26, 26, 0.16);
  }

  #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 {
    /* 104px - 144px (viewBox is 210 wide, not 300) */
    width: clamp(6.5rem, 13vw, 9rem);
    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;
  }

  /* --- 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;
    padding: 0.5rem 1rem 1.5rem;
    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);
  }
  #cs-navigation .cs-li:last-of-type {
    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;
  }
  /* animated underline — only on hover/focus, so the active item is marked by
     color+weight alone and doesn't read as a stray box */
  #cs-navigation .cs-li-link:before {
    content: "";
    width: 0%;
    height: 2px;
    background-color: var(--primary);
    border-radius: 2px;
    position: absolute;
    bottom: 0.125rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-navigation .cs-li-link:hover {
    color: var(--primary);
  }
  #cs-navigation .cs-li-link:hover:before,
  #cs-navigation .cs-li-link:focus-visible:before {
    width: 100%;
  }
  #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 {
    /* 120px - 168px — scale with the bigger nav type */
    width: clamp(7.5rem, 11vw, 10.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;
  }
  body.dark-mode #cs-navigation .cs-li-link:hover,
  body.dark-mode #cs-navigation .cs-li-link.cs-active,
  /* the white rule above also caught :hover — restate it so the phone
     highlights gold in dark mode the same way it does in light */
  body.dark-mode #cs-navigation .cs-phone:hover {
    color: var(--primary);
  }
  /* 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(255, 186, 25, 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) {
  /* Fixed height so every sub-page banner is identical, whether its title
     runs to one line or two. Centring handles the difference. */
  #int-hero {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    z-index: 1;
    height: 15rem;
    padding-top: 4rem;
  }
  /* The banner photo is already dark charcoal, so the stock 0.7 overlay
     crushed it to near-solid black. Lighter here keeps the tile texture
     visible while white text still reads. */
  #int-hero:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.45;
    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;
  }
  /* no vertical margins — the parent centres it, and margins here would make
     a two-line title sit off-centre against a one-line one */
  #int-hero h1 {
    color: #fff;
    font-size: 2.13333333rem;
    line-height: 1.2em;
    text-align: center;
    margin: 0 auto;
    position: relative;
    width: 96%;
    max-width: 43.75rem;
  }
  #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) {
  /* Fixed height, not min-height — a title that wraps to two lines (e.g.
     "Customer Reviews" vs "Storm Damage and Insurance") would otherwise make
     the banner taller on some pages than others. The flex centring keeps one-
     and two-line titles both vertically centred in the same space. */
  #int-hero {
    height: 24rem;
    min-height: 0;
    /* clears the fixed nav; the rest is handled by centring */
    padding-top: 5rem;
    padding-block-end: 0;
    background-attachment: fixed;
    font-size: inherit;
  }
}
/*-- -------------------------- -->
<---          Footer            -->
<--- -------------------------- -*/

/* Mobile - 360px */
@media only screen and (min-width: 0rem) {
  #cs-footer-308 {
    /* not var(--sectionPadding) — that puts up to ~110px BELOW the copyright
       bar, which reads as dead space at the bottom of every page */
    padding: clamp(3rem, 6vw, 4.5rem) 1rem 1.5rem;
    background-color: #1a1a1a;
    /* Navigation Links */
  }
  #cs-footer-308 .cs-container {
    width: 100%;
    /* reset on desktop */
    max-width: 43.75rem;
    margin: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2.5rem;
  }
  #cs-footer-308 .cs-logo-group {
    /* takes up all the space, lets the other ul's wrap below it */
    width: 100%;
    position: relative;
  }
  #cs-footer-308 .cs-logo {
    width: 10rem;
    height: auto;
    display: block;
    margin-bottom: 1.5rem;
  }
  /* inline SVG logo — same mark as the nav, white/gold for the dark footer */
  #cs-footer-308 .cs-logo-svg {
    width: 100%;
    height: auto;
    display: block;
  }
  #cs-footer-308 .cs-text {
    /* 14px - 16px */
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.5em;
    margin: 0;
    width: 78%;
    /* changes to 305px at desktop */
    max-width: 26.25rem;
    color: var(--bodyTextColorWhite);
  }
  #cs-footer-308 .cs-nav {
    width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    gap: 0.75rem;
  }
  #cs-footer-308 .cs-nav-li {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #cs-footer-308 .cs-header {
    font-size: 1rem;
    line-height: 1.2em;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--bodyTextColorWhite);
    position: relative;
    display: block;
  }
  #cs-footer-308 .cs-nav-link {
    font-size: 1rem;
    text-decoration: none;
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
    position: relative;
    display: inline-block;
    transition: color 0.3s;
  }
  #cs-footer-308 .cs-nav-link:before {
    /* underline */
    content: "";
    width: 0%;
    height: 0.125rem;
    background: currentColor;
    opacity: 1;
    position: absolute;
    display: block;
    bottom: -0.125rem;
    left: 0;
    transition: width 0.3s;
  }
  #cs-footer-308 .cs-nav-link:hover {
    color: var(--primary);
  }
  #cs-footer-308 .cs-nav-link:hover:before {
    width: 100%;
  }
  #cs-footer-308 .cs-icon {
    width: 1.5rem;
    height: auto;
    margin-right: 0.75rem;
    /* the source SVGs are dark and would vanish on the #1a1a1a footer —
       recolor to brand gold */
    filter: brightness(0) saturate(100%) invert(72%) sepia(63%) saturate(1000%)
      hue-rotate(358deg) brightness(103%) contrast(103%);
  }
  #cs-footer-308 .cs-bottom {
    max-width: 80rem;
    margin: auto;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #484848;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #cs-footer-308 .cs-copyright,
  #cs-footer-308 .cs-copyright-link {
    font-size: 1rem;
    line-height: 1.5em;
    color: var(--bodyTextColorWhite);
  }
  #cs-footer-308 .cs-copyright-link {
    text-decoration: none;
    transition: color 0.3s;
  }
  #cs-footer-308 .cs-copyright-link:hover {
    color: var(--primary);
  }
}
/* Tablet - 768px */
@media only screen and (min-width: 48rem) {
  #cs-footer-308 .cs-container {
    row-gap: 0;
    flex-direction: row;
    justify-content: space-between;
    row-gap: 2.5rem;
  }
  #cs-footer-308 .cs-nav {
    width: auto;
  }
}
/* Small Desktop - 1024px */
@media only screen and (min-width: 64rem) {
  #cs-footer-308 .cs-container {
    max-width: 80rem;
    flex-wrap: nowrap;
    /* align everything to the right */
    justify-content: flex-end;
    column-gap: 5.25rem;
  }
  #cs-footer-308 .cs-logo-group {
    width: 30%;
    max-width: 24.1875rem;
    /* pushes away from everything to the right */
    margin-right: auto;
  }
  #cs-footer-308 .cs-text {
    width: 100%;
  }
}
/*-- -------------------------- -->
<---     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;
  }
}
/*-- -------------------------- -->
<---    Final Call To Action    -->
<--- -------------------------- -*/
/* Mobile */
@media only screen and (min-width: 0em) {
  #cta {
    position: relative;
    padding: 3.125rem 0;
  }
  #cta:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.7;
    top: 0;
    left: 0;
    z-index: -1;
  }
  #cta .container {
    text-align: center;
  }
  #cta picture {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
  }
  #cta picture img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #cta .title {
    font-weight: 900;
    font-size: min(9vw, 3rem);
    line-height: 1.20833333;
    color: #fff;
    position: relative;
    margin-bottom: 2.25rem;
    text-align: center;
  }
  #cta p {
    color: #fff;
    text-align: center;
    opacity: 1;
    margin: auto;
    margin-bottom: 2.25rem;
    width: 96%;
    max-width: 37.375rem;
  }
}
/* Small Desktop */
@media only screen and (min-width: 64em) {
  #cta {
    padding: 10.5rem 0;
  }
}
/* Large Desktop */
@media only screen and (min-width: 1300px) {
  #cta {
    position: relative;
    margin-top: 0;
  }
  #cta:before {
    display: none;
  }
  /* Decorative squares removed — they framed the old inset photo and only
     showed as stray dots above the section once the image went full-bleed. */
  #cta:after {
    display: none;
  }
  #cta .container {
    width: 90.0625%;
    margin: auto;
  }
  /* full-bleed: the inset photo left white gutters and exposed the decorative
     squares pattern at the edges */
  #cta picture {
    width: 100%;
    left: 0;
    transform: none;
  }
  /* the roofline sits low in the frame — bias the crop downward so it isn't
     buried behind the button */
  #cta picture img {
    object-position: center 70%;
  }
  /* Even, moderate wash. A top-heavy gradient flattened the dusk sky into a
     grey slab — this keeps the sky's colour while text still reads. */
  #cta picture:before {
    content: "";
    position: absolute;
    display: block;
    height: 100%;
    width: 100%;
    background: #000;
    opacity: 0.5;
    top: 0;
    left: 0;
    z-index: 1;
  }
}