/* ==========================================================================
   CSW Building & Joinery — enhancement layer
   Render profile lifted from the site's OWN computed styles (getComputedStyle
   on live staging, homepage + /builders/ + /landscaping/), NOT a house template.

     display   Outfit 600, text-transform: capitalize
               h1 64px/89.6px  h2 48px/62.4px  h3 32px/41.6px
     kicker    Outfit 600 14px capitalize (NOT uppercase micro-tracked)
     body      "DM Sans" 400 16px/26.4px  #454F5E
     ground    #FEF9E1 cream
     ink       #0F172A navy
     accent    #FD9800 orange   secondary #FFC72C
     buttons   DM Sans 500 16px / ls .5px / pad 14px 32px / radius 4px
     hero      photo cover + solid black overlay at .5, pad 200px 64px 40px 40px
     cards     photo-background panels, 40px padding, zero radius, white text
     cta band  linear-gradient(rgba(0,5,47,0) 16%, #0F172A 16%) over a photo

   Astra + Elementor global CSS is aggressive, so injected typography and colour
   is explicit px and !important throughout. Versioned link (?v=N) because
   /wp-content/ is cached immutable for a year by vercel.json.
   ========================================================================== */

.csw-x {
  --csw-ground: #FEF9E1;
  --csw-ink: #0F172A;
  --csw-body: #454F5E;
  --csw-accent: #FD9800;
  --csw-accent-2: #FFC72C;
  --csw-line: #E4DCBC;
  --csw-display: Outfit, sans-serif;
  --csw-text: "DM Sans", sans-serif;
  background: var(--csw-ground);
}

.csw-x *,
.csw-x *::before,
.csw-x *::after { box-sizing: border-box; }

.csw-x__wrap {
  max-width: 1024px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Theme sets scroll-margin nowhere; sticky-ish headers eat anchors. */
.csw-x [id] { scroll-margin-top: 48px; }

/* ---------- shared type ------------------------------------------------- */
.csw-x h2.csw-h2 {
  font-family: var(--csw-display) !important;
  font-size: 48px !important;
  line-height: 62.4px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  color: var(--csw-ink) !important;
  letter-spacing: normal !important;
  margin: 0 0 24px !important;
}
.csw-x h3.csw-h3 {
  font-family: var(--csw-display) !important;
  font-size: 32px !important;
  line-height: 41.6px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  color: var(--csw-ink) !important;
  letter-spacing: normal !important;
  margin: 0 0 14px !important;
}
.csw-x h4.csw-h4 {
  font-family: var(--csw-display) !important;
  font-size: 22px !important;
  line-height: 30px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  color: var(--csw-ink) !important;
  margin: 0 0 10px !important;
}
.csw-x p, .csw-x li {
  font-family: var(--csw-text) !important;
  font-size: 16px !important;
  line-height: 26.4px !important;
  font-weight: 400 !important;
  color: var(--csw-body) !important;
}
.csw-x p { margin: 0 0 18px !important; }
.csw-x p:last-child { margin-bottom: 0 !important; }
.csw-x .csw-kicker {
  font-family: var(--csw-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  letter-spacing: normal !important;
  line-height: 20px !important;
  margin: 0 0 12px !important;
}

/* ---------- buttons ----------------------------------------------------- */
.csw-x .csw-btn {
  display: inline-block;
  font-family: var(--csw-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: 0.5px !important;
  padding: 14px 32px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.csw-x .csw-btn--primary {
  background: var(--csw-accent) !important;
  color: #FEF9E1 !important;
  border-color: var(--csw-accent) !important;
}
.csw-x .csw-btn--primary:hover,
.csw-x .csw-btn--primary:focus-visible {
  background: #E28800 !important;
  border-color: #E28800 !important;
  color: #FFFFFF !important;
}
.csw-x .csw-btn--ghost {
  background: transparent !important;
  color: #FFFFFF !important;
  border-color: #FFFFFF !important;
}
.csw-x .csw-btn--ghost:hover,
.csw-x .csw-btn--ghost:focus-visible {
  background: #FFFFFF !important;
  color: var(--csw-ink) !important;
}
/* Site's own white-on-dark button. Label darkened from the theme's #FD9800 to #9A5600
   so it clears 4.5:1 on white; at this size the shade reads as the same brand orange. */
.csw-x .csw-btn--light {
  background: #FFFFFF !important;
  color: #9A5600 !important;
  border-color: #FEF9E1 !important;
  box-shadow: rgba(0, 0, 0, 0.5) 0 24px 80px -8px;
}
.csw-x .csw-btn--light:hover,
.csw-x .csw-btn--light:focus-visible { background: #FEF9E1 !important; color: #834900 !important; }
.csw-x a:focus-visible,
.csw-x button:focus-visible,
.csw-x summary:focus-visible {
  outline: 3px solid var(--csw-accent-2);
  outline-offset: 3px;
}

/* ---------- hero -------------------------------------------------------- */
.csw-x__hero {
  position: relative;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  padding: 200px 64px 40px 40px;
  /* Legacy /builders/ hero measures 657px tall at 1440. Matched so the new pages
     read with the same presence rather than as a shallow banner. */
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* Legacy overlay is solid black at .5, which works because the donor photo is dark.
   The CSW upload pool includes bright paving and turf shots, so the overlay is a
   gradient weighted to the lower left where the copy sits. Legible on every photo. */
.csw-x__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .5) 55%, rgba(0, 0, 0, .38) 100%),
    linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .58));
}
/* Legacy hero copy starts 120px from the left edge at 1440, not centred. */
.csw-x__hero > .csw-x__wrap {
  position: relative;
  margin: 0;
  padding-left: 80px;
  padding-right: 0;
}
.csw-x__hero .csw-kicker {
  color: #FFFFFF !important;
  margin: 0 0 6px !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
}
.csw-x__hero h1 {
  font-family: var(--csw-display) !important;
  font-size: 64px !important;
  line-height: 89.6px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  color: #FFFFFF !important;
  letter-spacing: normal !important;
  margin: 0 0 14px !important;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.csw-x__hero p {
  color: #FFFFFF !important;
  max-width: 620px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.csw-x__crumbs { margin: 0 0 28px; font-family: var(--csw-text) !important; font-size: 14px !important; }
.csw-x__crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.csw-x__crumbs li { font-size: 14px !important; line-height: 20px !important; color: #F4EFD8 !important; }
.csw-x__crumbs li + li::before { content: "/"; margin-right: 8px; color: #C9C2A8; }
.csw-x__crumbs a { color: #FFFFFF !important; text-decoration: underline; text-underline-offset: 3px; }
.csw-x__crumbs a:hover { color: var(--csw-accent-2) !important; }
.csw-x__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ---------- generic band ------------------------------------------------ */
.csw-x__band { padding: 80px 40px; }
.csw-x__band--tight { padding: 56px 40px; }
.csw-x__band--white { background: #FFFFFF; }
.csw-x__lede p { font-size: 17px !important; line-height: 29px !important; }
/* 1024px of 16px text is ~120 characters a line. Prose capped at a readable measure
   while still filling most of the site's own container. */
.csw-x__lede p,
.csw-x__detail p,
.csw-x__regs > .csw-x__wrap > p,
.csw-x__reg p,
.csw-x__reg li,
.csw-x__faq .csw-x__answer p,
.csw-x__steps li p { max-width: 80ch; }

/* ---------- photo panel cards (the site's signature card) --------------- */
.csw-x__panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}
.csw-x__panel {
  position: relative;
  padding: 40px;
  min-height: 300px;
  background-size: cover;
  background-position: 50% 50%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.csw-x__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(15, 23, 42, .35), rgba(15, 23, 42, .82));
}
.csw-x__panel > * { position: relative; }
.csw-x__panel h3 {
  font-family: var(--csw-display) !important;
  font-size: 32px !important;
  line-height: 41.6px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  color: #FFFFFF !important;
  margin: 0 0 10px !important;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .6);
}
.csw-x__panel p {
  color: #F3EFE2 !important;
  margin: 0 !important;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .65);
}

/* ---------- reasons row ------------------------------------------------- */
.csw-x__reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.csw-x__reason { border-top: 3px solid var(--csw-accent); padding-top: 18px; }

/* ---------- the regulatory block (this vertical's real substance) ------- */
.csw-x__regs { background: var(--csw-ink); }
.csw-x__regs h2.csw-h2 { color: #FFFFFF !important; }
.csw-x__regs > .csw-x__wrap > p { color: #D7DCE6 !important; }
.csw-x__reg {
  background: rgba(255, 255, 255, .05);
  border-left: 4px solid var(--csw-accent);
  padding: 28px 30px;
  margin-top: 24px;
}
.csw-x__reg h3 {
  font-family: var(--csw-display) !important;
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  color: #FFFFFF !important;
  margin: 0 0 12px !important;
}
.csw-x__reg p, .csw-x__reg li { color: #D7DCE6 !important; }
.csw-x__reg ul { margin: 0 0 0 20px; padding: 0; }
.csw-x__reg li { margin-bottom: 8px; }
.csw-x__reg li:last-child { margin-bottom: 0; }
.csw-x__reg-note {
  display: block;
  margin-top: 16px;
  font-family: var(--csw-text) !important;
  font-size: 14px !important;
  line-height: 22px !important;
  color: #A9B3C4 !important;
}

/* ---------- detail stack ------------------------------------------------ */
.csw-x__detail { border-top: 1px solid var(--csw-line); padding-top: 32px; margin-top: 32px; }
.csw-x__detail:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.csw-x__steps { list-style: none; margin: 0; padding: 0; counter-reset: cswstep; }
.csw-x__steps li {
  counter-increment: cswstep;
  position: relative;
  padding-left: 56px;
  margin-bottom: 24px;
}
.csw-x__steps li::before {
  content: counter(cswstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--csw-accent);
  color: #FFFFFF;
  font-family: var(--csw-display);
  font-weight: 600;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- FAQ --------------------------------------------------------- */
.csw-x__faq details {
  background: #FFFFFF;
  border: 1px solid var(--csw-line);
  border-left: 4px solid var(--csw-accent);
  border-radius: 4px;
  margin-bottom: 12px;
}
.csw-x__faq summary {
  cursor: pointer;
  list-style: none;
  padding: 20px 56px 20px 24px;
  position: relative;
  font-family: var(--csw-display) !important;
  font-size: 19px !important;
  line-height: 27px !important;
  font-weight: 600 !important;
  color: var(--csw-ink) !important;
}
.csw-x__faq summary::-webkit-details-marker { display: none; }
.csw-x__faq summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 27px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--csw-accent);
  border-bottom: 2px solid var(--csw-accent);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.csw-x__faq details[open] summary::after { transform: rotate(-135deg); top: 31px; }
.csw-x__faq .csw-x__answer { padding: 0 24px 22px; }

/* ---------- designed internal-link block -------------------------------- */
.csw-x__links { background: #FFFFFF; }
.csw-x__linkgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.csw-x__linkbtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--csw-accent) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  padding: 18px 22px;
  border-radius: 4px;
  font-family: var(--csw-text) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: .5px !important;
  line-height: 22px !important;
  transition: background-color .2s ease, transform .2s ease;
}
.csw-x__linkbtn svg { flex: 0 0 auto; }
.csw-x__linkbtn:hover,
.csw-x__linkbtn:focus-visible { background: #C06E00 !important; transform: translateY(-3px); }
.csw-x__linkbtn--ghost {
  background: #FFFFFF !important;
  color: var(--csw-ink) !important;
  border: 1px solid var(--csw-line);
}
.csw-x__linkbtn--ghost:hover,
.csw-x__linkbtn--ghost:focus-visible { background: #FEF9E1 !important; color: var(--csw-ink) !important; }

/* ---------- CTA band (the site's 16% photo/navy signature) --------------- */
.csw-x__cta {
  background-size: cover;
  background-position: 50% 30%;
  padding: 120px 40px 80px;
  position: relative;
}
.csw-x__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 5, 47, 0) 16%, #0F172A 16%);
}
.csw-x__cta > .csw-x__wrap { position: relative; }
.csw-x__cta h2.csw-h2 { color: #FFFFFF !important; text-shadow: 0 2px 16px rgba(0, 0, 0, .5); }
.csw-x__cta p { color: #E8ECF3 !important; }
.csw-x__cta a:not(.csw-btn) { color: var(--csw-accent-2) !important; }
.csw-x__ctagrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.csw-x__ctalist { list-style: none; margin: 0 0 26px; padding: 0; }
.csw-x__ctalist li { color: #E8ECF3 !important; margin-bottom: 10px; }
.csw-x__ctalist strong { color: #FFFFFF !important; font-family: var(--csw-display); font-weight: 600; }

/* ---------- hub --------------------------------------------------------- */
.csw-x__group { margin-bottom: 64px; }
.csw-x__group:last-child { margin-bottom: 0; }
.csw-x__grouphead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 2px solid var(--csw-line);
  padding-bottom: 14px;
  margin-bottom: 26px;
}
.csw-x__grouphead a {
  font-family: var(--csw-text) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: #C06E00 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.csw-x__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.csw-x__card {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--csw-line);
  border-radius: 4px;
  padding: 26px 24px;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.csw-x__card:hover,
.csw-x__card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--csw-accent);
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .45);
}
.csw-x__card h3 {
  font-family: var(--csw-display) !important;
  font-size: 21px !important;
  line-height: 28px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  color: var(--csw-ink) !important;
  margin: 0 0 8px !important;
}
.csw-x__card p { font-size: 15px !important; line-height: 24px !important; margin: 0 !important; }

/* ---------- responsive -------------------------------------------------- */
@media (max-width: 1024px) {
  .csw-x__hero { padding: 150px 40px 40px; min-height: 500px; }
  .csw-x__hero > .csw-x__wrap { padding-left: 0; }
  .csw-x__hero h1 { font-size: 48px !important; line-height: 62px !important; }
  .csw-x h2.csw-h2 { font-size: 38px !important; line-height: 48px !important; }
  .csw-x h3.csw-h3 { font-size: 27px !important; line-height: 36px !important; }
  .csw-x__panels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csw-x__reasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csw-x__linkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csw-x__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .csw-x__ctagrid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .csw-x__hero { padding: 110px 20px 44px; min-height: 420px; }
  .csw-x__hero h1 { font-size: 34px !important; line-height: 44px !important; }
  .csw-x__wrap { padding-left: 20px; padding-right: 20px; }
  .csw-x__band, .csw-x__band--tight { padding: 52px 20px; }
  .csw-x__cta { padding: 80px 20px 56px; }
  .csw-x h2.csw-h2 { font-size: 29px !important; line-height: 39px !important; }
  .csw-x h3.csw-h3 { font-size: 23px !important; line-height: 31px !important; }
  .csw-x__reg h3 { font-size: 20px !important; line-height: 28px !important; }
  .csw-x__panels,
  .csw-x__reasons,
  .csw-x__linkgrid,
  .csw-x__cards { grid-template-columns: minmax(0, 1fr); }
  .csw-x__panel { min-height: 240px; padding: 28px; }
  .csw-x__reg { padding: 22px 20px; }
  .csw-x__faq summary { font-size: 17px !important; line-height: 25px !important; padding: 17px 48px 17px 18px; }
  .csw-x__faq summary::after { right: 18px; top: 24px; }
  .csw-x__faq .csw-x__answer { padding: 0 18px 18px; }
  .csw-x__actions .csw-btn { flex: 1 1 100%; text-align: center; }
  .csw-x__steps li { padding-left: 48px; }
}

@media (max-width: 359px) {
  .csw-x__hero h1 { font-size: 29px !important; line-height: 38px !important; }
  .csw-x h2.csw-h2 { font-size: 25px !important; line-height: 34px !important; }
  .csw-x__wrap { padding-left: 14px; padding-right: 14px; }
  .csw-x__band, .csw-x__band--tight { padding: 44px 14px; }
  .csw-x__hero { padding: 104px 14px 40px; }
  .csw-x__cta { padding: 72px 14px 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .csw-x *, .csw-x *::before, .csw-x *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
  .csw-x__linkbtn:hover, .csw-x__card:hover { transform: none; }
}

/* ==========================================================================
   IA wiring on the LEGACY mirrored pages.
   These rules must not change how a mirrored page looks. The card links
   inherit colour and weight so the card is visually identical until hover;
   the home page hub band sits below the mirrored content, above the footer.
   ========================================================================== */

/* Sub service card headings were bare <h3> with no link. Now linked, still identical. */
.ssm-card-link,
.ssm-card-link:visited {
  color: inherit !important;
  font: inherit !important;
  text-decoration: none !important;
  background: none !important;
}
.ssm-card-link:hover,
.ssm-card-link:focus-visible {
  color: inherit !important;
  text-decoration: underline !important;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.ssm-card-link:focus-visible { outline: 3px solid #FFC72C; outline-offset: 4px; }

/* Home page services band */
.ssm-hub {
  background: #0F172A;
  padding: 80px 40px;
}
.ssm-hub__wrap { max-width: 1024px; margin: 0 auto; }
.ssm-hub__h {
  font-family: Outfit, sans-serif !important;
  font-size: 48px !important;
  line-height: 62.4px !important;
  font-weight: 600 !important;
  text-transform: capitalize !important;
  color: #FFFFFF !important;
  margin: 0 0 16px !important;
}
.ssm-hub__p {
  font-family: "DM Sans", sans-serif !important;
  font-size: 16px !important;
  line-height: 26.4px !important;
  color: #D7DCE6 !important;
  max-width: 80ch;
  margin: 0 0 32px !important;
}
.ssm-hub__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.ssm-hub__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 22px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-left: 4px solid #FD9800;
  border-radius: 4px;
  background: rgba(255, 255, 255, .05);
  text-decoration: none !important;
  transition: background-color .2s ease, transform .2s ease;
}
.ssm-hub__card:hover,
.ssm-hub__card:focus-visible { background: rgba(255, 255, 255, .12); transform: translateY(-3px); }
.ssm-hub__card:focus-visible { outline: 3px solid #FFC72C; outline-offset: 3px; }
.ssm-hub__t {
  font-family: Outfit, sans-serif !important;
  font-size: 19px !important;
  line-height: 26px !important;
  font-weight: 600 !important;
  color: #FFFFFF !important;
}
.ssm-hub__n {
  font-family: "DM Sans", sans-serif !important;
  font-size: 14px !important;
  line-height: 20px !important;
  color: #B9C2D0 !important;
}
.ssm-hub__cta {
  display: inline-block;
  font-family: "DM Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: .5px !important;
  padding: 14px 32px !important;
  border-radius: 4px !important;
  background: #FD9800 !important;
  color: #FEF9E1 !important;
  border: 1px solid #FD9800 !important;
  text-decoration: none !important;
}
.ssm-hub__cta:hover,
.ssm-hub__cta:focus-visible { background: #E28800 !important; border-color: #E28800 !important; color: #FFFFFF !important; }
.ssm-hub__cta:focus-visible { outline: 3px solid #FFC72C; outline-offset: 3px; }

@media (max-width: 1024px) {
  .ssm-hub__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ssm-hub__h { font-size: 38px !important; line-height: 48px !important; }
}
@media (max-width: 767px) {
  .ssm-hub { padding: 52px 20px; }
  .ssm-hub__grid { grid-template-columns: minmax(0, 1fr); }
  .ssm-hub__h { font-size: 29px !important; line-height: 39px !important; }
  .ssm-hub__cta { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ssm-hub__card { transition: none; }
  .ssm-hub__card:hover { transform: none; }
}