.site-logo {
  width: auto !important;
  min-width: 220px;
  max-width: 320px;
}

.site-logo .logo-svg,
.footer-logo {
  display: none !important;
}

.brand-wordmark,
.footer-wordmark {
  display: inline-block;
  color: #fff;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: 0;
  text-transform: uppercase;
}

.brand-wordmark {
  font-size: 18px;
  max-width: 260px;
}

.footer-wordmark {
  font-size: 28px;
  max-width: 360px;
}

.roof-monogram {
  color: transparent;
  -webkit-text-stroke: 2px #e96224;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: clamp(84px, 15vw, 220px);
  font-weight: 900;
  line-height: 0.78;
  opacity: 0.9;
}

.roof-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 2rem 0;
}

.roof-index-card {
  display: block;
  min-height: 100%;
  padding: 1.25rem;
  background: #fff;
  border-left: 6px solid #e96224;
  box-shadow: 0 12px 30px rgba(20, 66, 112, 0.13);
}

.roof-index-card h3 {
  color: #144270;
  font-size: 1.2rem;
  margin: 0 0 0.55rem;
}

.roof-index-card p {
  color: #2d2d2d;
  margin: 0;
}

.roof-detail-image {
  min-height: 320px;
  margin: 1.5rem 0 2rem;
  background-size: cover;
  background-position: center;
}

.roof-contact-list {
  display: grid;
  gap: 1rem;
  margin: 2rem 0;
}

.roof-contact-list a,
.roof-contact-list span {
  display: block;
  padding: 1rem 1.25rem;
  background: #f3f3f3;
  color: #144270;
  font-weight: 700;
}

.site-footer a[href="#"] {
  pointer-events: none;
}

@media (max-width: 61.24em) {
  .site-logo {
    min-width: 180px;
  }

  .brand-wordmark {
    font-size: 15px;
  }

  body.nav-active .main-nav {
    display: block;
  }
}

/* Static fallback: slideshow entrance animations never run without the slider JS,
   leaving hero copy at opacity 0. Reveal slide content statically. */
.slideshow-section .slide .copy,
.slideshow-section .slide .svg-box,
.slideshow-section .slide .css-logo-box {
  opacity: 1 !important;
  transform: none !important;
}
.slideshow-section .slide:not(.active) {
  display: none;
}

/* =====================================================================
   MOBILE OPTIMIZATION + FUNCTIONAL HAMBURGER  (Connecticut CR)
   Self-contained; layers on top of the captured BCI theme. The native
   mobile menu reveal is driven by `html.site-nav-active` (already in
   site.min.css); we add a reliable JS toggle, an explicit close (X),
   an overlay, body scroll-lock, and a readable solid drawer background.
   ===================================================================== */

/* ---- Global overflow / media safety net (all viewports) ---- */
html, body { overflow-x: hidden; max-width: 100%; }
img, iframe, video, svg, embed, object { max-width: 100%; }
img, video { height: auto; }
.cms-content img { height: auto; }
table { max-width: 100%; }
pre, code { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; }

/* Close (X) button + overlay are injected into every header; hidden until
   the menu is open and never shown on desktop. */
.crm-nav-close { display: none; }
.crm-nav-overlay { display: none; }

/* Body scroll-lock while the mobile menu is open (belt-and-suspenders on top
   of the theme's own html.site-nav-active overflow rule). */
body.crm-nav-open { overflow: hidden !important; }

/* =====================================================================
   <= 980px : mobile menu behaviour + close X + overlay + readability
   (matches the theme's own 61.24em / ~980px nav breakpoint)
   ===================================================================== */
@media (max-width: 61.24em) {

  /* Make the hamburger an obvious, easy-to-tap target. */
  .site-nav-hamburger {
    display: block !important;
    width: 56px;
    min-height: 56px;
    z-index: 1002;
  }
  .site-nav-hamburger [tab-trigger],
  #site-nav-hamburger { cursor: pointer; }

  /* Solid, readable backdrop behind the full-screen menu so menu text is
     never sitting on top of page text. (Native rule leaves it transparent.) */
  html.site-nav-active .site-header-inner {
    background-color: #144270 !important;
    background-image: linear-gradient(160deg, #144270 0%, #0d2f50 100%) !important;
  }
  html.site-nav-active .site-header { background-color: #144270 !important; }

  /* Dim overlay (covers the scaled-down page behind the menu). */
  html.site-nav-active .crm-nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 998;
    background: rgba(8, 24, 44, 0.55);
  }

  /* Explicit, clearly visible CLOSE (X) button, top-right of the drawer. */
  html.site-nav-active .crm-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 14px;
    right: 14px;
    width: 48px;
    height: 48px;
    z-index: 1003;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #e96224;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    -webkit-appearance: none;
    appearance: none;
    line-height: 1;
  }
  .crm-nav-close svg { width: 22px; height: 22px; display: block; pointer-events: none; }
  html.site-nav-active .crm-nav-close:hover,
  html.site-nav-active .crm-nav-close:focus { background: #cc4425; outline: none; }

  /* Keep the revealed nav above the overlay and give the link list room. */
  html.site-nav-active .main-nav-container { z-index: 1000; }
  .main-nav-list { padding-top: 4.25em; }

  /* Readability + tap sizing for the big menu links. The theme styles the
     top-level links at 2.5em with an orange text-stroke on white; clamp the
     size on small phones so long labels (e.g. "BUILDING TYPES") don't overflow
     and keep each link a comfortable tap height. */
  .main-nav-list .root.link {
    font-size: clamp(1.6rem, 7.5vw, 2.5rem) !important;
    line-height: 1.05 !important;
    word-break: break-word;
  }
  .main-nav-list .root.link-container { min-height: 52px; }
  .main-nav-list .root.link,
  .top-nav-list .link { min-height: 48px; }

  /* Drop-down (sub) links inside the open menu: readable + tappable. */
  .main-nav-list .drop-down .link {
    color: #144270;
    font-size: 1.05rem;
    line-height: 1.3;
    padding: 0.7em 1em;
    min-height: 46px;
  }
}

/* =====================================================================
   <= 768px : layout stacking, padding, hero scaling, tap targets
   ===================================================================== */
@media (max-width: 768px) {

  /* Body copy stays legible on phones. */
  body { font-size: 16px; }
  .content.cms-content, .cms-content p, .page-content p { line-height: 1.6; }

  /* Hero / section heading scaling so giant display type fits 375px. */
  .inside-header-section h1,
  .image-section h1,
  .content-section--wrapper h1 { font-size: clamp(1.65rem, 7vw, 2.6rem); line-height: 1.12; }
  .content-section--wrapper h2 { font-size: clamp(1.35rem, 5.5vw, 2rem); }

  /* Comfortable side padding so content isn't jammed to the screen edge. */
  .content-section--wrapper { padding-left: 18px; padding-right: 18px; }
  .content-section { padding-top: 1.75rem; padding-bottom: 1.75rem; }

  /* Card / index grids -> single (theme grid already auto-fits, force 1 col). */
  .roof-index-grid { grid-template-columns: 1fr; gap: 1rem; }

  /* Contact split (info + form) stacks. */
  .wwwlu-h-contact-section .wwwlu-h-contact-shell,
  .wwwlu-h-contact-shell { display: block; }
  .wwwlu-h-contact-shell .col-md-5,
  .wwwlu-h-contact-shell .col-md-7 { width: 100%; max-width: 100%; }
  .wwwlu-h-contact-shell .col-md-5 { margin-bottom: 1.25rem; }

  /* Generic multi-column flex/grid rows -> stack. */
  .flex-groups, .flex-group, .columns, .row.multi-col { display: block !important; }

  /* Footer: logo + links stack, links readable & tappable. */
  .footer-info-module { display: block; text-align: center; }
  .footer-info-module .subgroup { width: 100%; margin: 0 auto 1.25rem; }
  .footer-links { display: flex; flex-direction: column; align-items: center; gap: 2px; }
  .footer-links li a { display: block; padding: 12px 8px; min-height: 44px; }
  .site-footer .social-icons { justify-content: center; }

  /* Tap targets: buttons, form controls, contact list rows, nav. */
  .button,
  button[type="submit"],
  .wwwlu-h-contact-form input,
  .wwwlu-h-contact-form select,
  .wwwlu-h-contact-form textarea {
    min-height: 46px;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }
  .wwwlu-h-contact-form button[type="submit"] { width: 100%; }
  .roof-contact-list a,
  .roof-contact-list span { min-height: 48px; display: flex; align-items: center; }

  /* Maps / embeds never exceed the viewport. */
  .wwwlu-h-contact-map, .wwwlu-h-footer-map { width: calc(100% - 24px); }
  .wwwlu-h-contact-map iframe, .wwwlu-h-footer-map iframe { width: 100%; }
}

/* Very small phones: tighten the monogram and hero so nothing overflows. */
@media (max-width: 480px) {
  .roof-monogram { font-size: clamp(64px, 22vw, 120px); }
  .content-section--wrapper { padding-left: 14px; padding-right: 14px; }
}


/* Connecticut 2026 visual refresh: evergreen / slate / brass. */
:root {
  --ct-ink: #14201f;
  --ct-evergreen: #123c34;
  --ct-deep: #0b2421;
  --ct-sage: #6f8c7c;
  --ct-mist: #f3f0e8;
  --ct-brass: #c7a85b;
  --ct-white: #ffffff;
}

body { background: var(--ct-mist); color: var(--ct-ink); }
.roof-monogram { -webkit-text-stroke-color: var(--ct-brass); }
.orange, .root.link:hover, .footer-links a:hover, .main-nav-list .root.link:hover { color: var(--ct-brass) !important; }
.button, .nav-item.close-button, button[type="submit"] {
  background: var(--ct-evergreen) !important;
  color: var(--ct-white) !important;
  border-color: var(--ct-evergreen) !important;
}
.button:hover, .nav-item.close-button:hover, button[type="submit"]:hover { background: var(--ct-deep) !important; }
.button.ghost { background: transparent !important; color: var(--ct-white) !important; border: 1px solid rgba(255,255,255,.65) !important; }
.arrow-accent, .button-arrow, .decorative-banner { background-color: var(--ct-brass) !important; }
.site-header-inner, .site-header { background-color: rgba(11,36,33,.94) !important; }
.top-nav, .secondary-nav { background-color: var(--ct-deep) !important; }
.brand-wordmark, .footer-wordmark { color: var(--ct-white); }

.ct-hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: end;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.ct-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(90deg, rgba(11,36,33,.92), rgba(18,60,52,.68) 48%, rgba(11,36,33,.26));
}
.ct-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(115deg, transparent 0 42%, rgba(199,168,91,.28) 42.25% 42.7%, transparent 43% 100%);
  animation: ct-scan 8s ease-in-out infinite;
}
.ct-hero-inner { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 26vh 0 12vh; color: var(--ct-white); }
.ct-hero h1 { max-width: 980px; font-size: clamp(3rem, 9vw, 8.6rem); line-height: .88; letter-spacing: 0; margin: .08em 0 .25em; text-transform: uppercase; }
.ct-hero p { max-width: 720px; font-size: clamp(1.05rem, 1.8vw, 1.45rem); line-height: 1.45; }
.ct-kicker { color: var(--ct-brass); font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.ct-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.ct-hero-motion { position: absolute; inset: 0; pointer-events: none; }
.ct-hero-motion span { position: absolute; width: 34vw; height: 2px; background: rgba(199,168,91,.75); transform-origin: left center; animation: ct-line 7s ease-in-out infinite; }
.ct-hero-motion span:nth-child(1) { top: 22%; left: 8%; transform: rotate(18deg); }
.ct-hero-motion span:nth-child(2) { top: 48%; left: 52%; animation-delay: 1.2s; transform: rotate(-16deg); }
.ct-hero-motion span:nth-child(3) { bottom: 20%; left: 22%; animation-delay: 2.4s; transform: rotate(9deg); }
@keyframes ct-scan { 0%,100% { transform: translateX(-16%); opacity:.55; } 50% { transform: translateX(16%); opacity:1; } }
@keyframes ct-line { 0%,100% { clip-path: inset(0 100% 0 0); opacity:.25; } 45%,60% { clip-path: inset(0 0 0 0); opacity:.9; } }

.ct-home-taxonomy, .ct-home-focus, .ct-home-locations { background: var(--ct-mist); padding: clamp(64px, 8vw, 120px) 0; }
.ct-home-focus { background: var(--ct-evergreen); color: var(--ct-white); }
.ct-home-taxonomy h2, .ct-home-focus h2, .ct-home-locations h2 { font-size: clamp(2.2rem, 5.2vw, 5rem); line-height: .95; max-width: 920px; margin: .12em 0 .55em; }
.ct-taxonomy-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; border: 1px solid rgba(20,32,31,.18); background: rgba(20,32,31,.18); }
.ct-path-card { min-height: 260px; padding: 28px; background: var(--ct-white); color: var(--ct-ink); display:flex; flex-direction:column; justify-content:space-between; text-decoration:none; }
.ct-path-card span { color: var(--ct-evergreen); font-size: 1.25rem; font-weight: 900; text-transform: uppercase; }
.ct-path-card p { margin: 24px 0 0; color: #3d4a47; }
.ct-focus-lists { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.ct-focus-lists div { border-top: 2px solid var(--ct-brass); padding-top: 18px; }
.ct-focus-lists h3 { color: var(--ct-white); margin: 0 0 16px; }
.ct-focus-lists a { display:block; color: var(--ct-white); text-decoration:none; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.ct-section-heading { display:flex; gap: 24px; align-items:end; justify-content:space-between; margin-bottom: 28px; }
.ct-location-grid { display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ct-location-tile { min-height: 250px; display:flex; align-items:end; padding: 18px; background-size:cover; background-position:center; color: var(--ct-white); text-decoration:none; position:relative; overflow:hidden; }
.ct-location-tile:before { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(11,36,33,.08), rgba(11,36,33,.82)); }
.ct-location-tile span { position:relative; font-size:1.35rem; font-weight:900; text-transform:uppercase; }

.roof-index-grid.ct-index-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; width: min(1220px, 100%); }
.roof-index-card.ct-index-card { border: 1px solid rgba(18,60,52,.18); border-left: 0; border-top: 6px solid var(--ct-brass); box-shadow: 0 18px 50px rgba(11,36,33,.08); transition: transform .2s ease, box-shadow .2s ease; }
.roof-index-card.ct-index-card:hover { transform: translateY(-4px); box-shadow: 0 24px 70px rgba(11,36,33,.16); }
.roof-index-card h3 { color: var(--ct-evergreen); }
.ct-inner-hero { min-height: 58svh; display:flex; align-items:end; }
.ct-inner-hero .content-section--wrapper { position:relative; z-index:2; padding-bottom: clamp(58px, 8vw, 112px); }
.ct-inner-hero h1 { color:#fff; font-size: clamp(2.7rem, 7vw, 7.4rem); line-height:.9; max-width: 1100px; margin:.14em 0 0; text-transform:uppercase; }
.ct-index-section { background: linear-gradient(180deg, var(--ct-mist), #fff); padding: clamp(54px, 7vw, 96px) 0; }
.ct-index-main { width:min(1220px, calc(100% - 48px)); margin:0 auto; }
.ct-index-content { background:#fff; padding: clamp(24px, 4vw, 54px); box-shadow: 0 24px 90px rgba(11,36,33,.1); border-top:8px solid var(--ct-brass); }
.ct-directory.taxonomy-directory { width:100%; margin:0; padding:0; }
.ct-directory .taxonomy-directory__grid { gap: 16px; }
.ct-directory .taxonomy-directory__card { background:#f8f7f1; border:1px solid rgba(18,60,52,.14); border-top:5px solid var(--ct-brass); color: var(--ct-ink); box-shadow: none; }
.ct-directory .taxonomy-directory__card:hover { background: var(--ct-evergreen); color:#fff; transform: translateY(-3px); }
.ct-directory .taxonomy-directory__card h3 { color: inherit; }
.ct-directory .taxonomy-directory__card p { color: inherit; opacity:.82; }
.ct-detail-section { background: linear-gradient(180deg, var(--ct-mist), #fff); padding: clamp(54px, 7vw, 96px) 0; }
.ct-detail-main { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.ct-detail-content { background: var(--ct-white); padding: clamp(28px, 5vw, 62px); box-shadow: 0 24px 90px rgba(11,36,33,.1); border-top: 8px solid var(--ct-brass); }
.ct-detail-content .wwwlu-h-breadcrumbs { width: 100%; margin: 0 0 22px; padding: 0; color: var(--ct-evergreen); }
.ct-detail-content > h1 { color: var(--ct-evergreen); font-size: clamp(2rem, 5vw, 4.5rem); line-height: .98; margin: 0 0 28px; }
.ct-detail-content p { font-size: 1.03rem; line-height: 1.8; color: #263633; }
.ct-faq-block { margin-top: 48px; padding: 32px; background: #f6f4ed; border-left: 6px solid var(--ct-brass); }
.ct-faq-block h2 { margin-top:0; color: var(--ct-evergreen); }
.ct-faq-block details { padding: 16px 0; border-top: 1px solid rgba(18,60,52,.18); }
.ct-faq-block summary { color: var(--ct-evergreen); font-weight: 900; cursor: pointer; }
.ct-related-links ul { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; list-style:none; margin: 20px 0 0; padding: 0; }
.ct-related-links a { display:block; padding: 16px; background: var(--ct-evergreen); color: #fff; text-decoration:none; min-height: 100%; }
.ct-contact-card { margin-top: 18px; }
.ct-contact-card .wwwlu-h-contact-shell { background: var(--ct-evergreen); color: #fff; padding: clamp(24px, 4vw, 46px); }
.ct-contact-card input, .ct-contact-card select, .ct-contact-card textarea { border: 0; padding: 14px 15px; background:#fff; color: var(--ct-ink); }
.roof-contact-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.roof-contact-list a { background: var(--ct-evergreen); color:#fff; text-decoration:none; overflow-wrap:anywhere; }
.ct-map-embed { border: 8px solid rgba(199,168,91,.35); box-shadow: 0 20px 70px rgba(11,36,33,.18); }
.ct-map-embed iframe { min-height: 220px; }

.ct-seo-footer { color: #fff; }
.ct-seo-footer .site-footer--wrapper { padding: clamp(56px, 7vw, 92px) min(4vw, 60px) 28px; }
.ct-footer-inner { position: relative; z-index: 2; display:grid; grid-template-columns:minmax(260px,.8fr) minmax(0,1.8fr); gap: clamp(28px, 5vw, 70px); width:min(1280px,100%); margin: 0 auto; }
.ct-footer-brand p { max-width: 44ch; }
.ct-footer-contact { display:grid; gap: 8px; }
.ct-footer-contact a { color:#fff; overflow-wrap:anywhere; }
.ct-footer-links { display:grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 22px; }
.ct-footer-col h3 { color: var(--ct-brass); text-transform: uppercase; font-size:.9rem; }
.ct-footer-col a { display:block; color:#fff; text-decoration:none; padding: 6px 0; font-size:.96rem; }
.ct-seo-footer .legal { position:relative; z-index:2; text-align:center; margin: 28px 0 0; color: rgba(255,255,255,.86); }
.ct-seo-footer .wwwlu-h-footer-map { position:relative; z-index:2; width:min(920px,100%); margin-top: 38px; }

@media (max-width: 61.24em) {
  html.site-nav-active .main-nav-container {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 1001 !important;
    overflow-y: auto !important;
    padding: 92px 22px 36px !important;
    background: linear-gradient(160deg, var(--ct-deep), var(--ct-evergreen)) !important;
  }
  /* Clean mobile menu: prominent top-level rows on the dark gradient, with
     sub-links shown as indented, lighter rows beneath each (no white cards). */
  html.site-nav-active .main-nav-list { display:flex !important; flex-direction:column !important; gap: 2px !important; padding-top: 0 !important; }
  html.site-nav-active .main-nav-list .root.link-container {
    display:block !important; width:100% !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    overflow: visible !important;
  }
  html.site-nav-active .main-nav-list .root.link-container > .inner > a.root.link {
    display:block !important;
    background: transparent !important;        /* kill the captured white-fill box */
    color:#fff !important; -webkit-text-stroke: 0 !important;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 1.35rem !important; font-weight: 800 !important;
    text-transform: uppercase; text-decoration: none;
    letter-spacing: .01em;
    padding: 15px 4px !important; min-height: 52px;
  }
  /* The phone (last/contact) row -> brass to stand out as the CTA. */
  html.site-nav-active .main-nav-list .root.link-container[root="contact"] > .inner > a.root.link,
  html.site-nav-active .main-nav-list .root.link-container:last-child > .inner > a.root.link { color: var(--ct-brass) !important; }
  /* Sub-links: indented, lighter, on the gradient (NOT white cards). */
  html.site-nav-active .main-nav-list .root.drop-down {
    display:block !important; position:static !important;
    opacity:1 !important; visibility:visible !important; transform:none !important;
    background: transparent !important; box-shadow:none !important; border:0 !important;
    padding: 0 0 10px !important;
  }
  html.site-nav-active .main-nav-list .root.drop-down .inner { display:block !important; padding:0 !important; }
  html.site-nav-active .main-nav-list .root.drop-down .link-container { background:transparent !important; border:0 !important; }
  html.site-nav-active .main-nav-list .root.drop-down a.link {
    display:block !important; width:auto !important;
    color: rgba(255,255,255,.82) !important; -webkit-text-stroke:0 !important;
    font-size: 1rem !important; font-weight: 500 !important; text-transform:none;
    text-decoration:none; line-height:1.3;
    padding: 11px 4px 11px 18px !important; min-height: 44px;
    border-left: 2px solid rgba(199,168,91,.5);
    margin-left: 2px;
  }
  html.site-nav-active .main-nav-list .root.drop-down a.link:hover { color:#fff !important; }
  html.site-nav-active .crm-nav-close { background: var(--ct-brass) !important; color: var(--ct-deep) !important; }
}

@media (max-width: 900px) {
  .ct-taxonomy-grid, .ct-focus-lists, .ct-location-grid, .ct-footer-inner, .ct-footer-links { grid-template-columns: 1fr; }
  .ct-section-heading { display:block; }
  .ct-hero { min-height: 92svh; }
  .ct-hero-inner { width: calc(100% - 32px); padding: 24vh 0 10vh; }
  .ct-detail-main { width: calc(100% - 28px); }
  .ct-detail-content { padding: 24px; }
}

/* =====================================================================
   CONNECTICUT REBUILD  (ctfix1)  — restore a real, readable site.
   The captured ag-iowa.com header (off-canvas slide-out) broke during
   the de-fingerprint / de-WordPress passes: the header bar collapsed to
   ~40px, the logo escaped below it, the hamburger went display:none, and
   the absolute-positioned slide-out menu lost its size (width/height 0)
   so the nav could not open on ANY viewport. The global site.min.css
   `h1{color:#144270}` also bled into the home hero (dark-navy text on a
   bright photo). Everything below rebuilds the header as a normal solid
   bar with an inline desktop nav + a working mobile drawer, fixes the
   home-hero contrast + viewport fit, and adds a sitewide contrast net.
   Self-contained, !important-guarded so it wins over site.min.css.
   ===================================================================== */

:root {
  --ct-header-h: 78px;
  --ct-orange: #e96224;
}

/* ---------- HEADER SHELL ---------------------------------------------- */
/* Solid evergreen bar, fixed, full width, with real height. Neutralize
   the captured theme's odd transforms / negative offsets. */
.site-header,
html:not(.site-nav-active) .site-header {
  position: fixed !important;
  top: 0; right: 0; left: 0;
  z-index: 1000 !important;
  background: rgba(11, 36, 33, 0.97) !important;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
  /* NOTE: no backdrop-filter here — it creates a containing block that would
     trap the position:fixed mobile drawer (nested in the header) to the bar's
     height. The bar is already near-opaque so blur isn't needed. */
}
/* Subtle blur only on desktop, where the drawer doesn't exist. */
@media (min-width: 62em) {
  .site-header { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.site-header-inner {
  position: relative !important;
  top: 0 !important;
  z-index: 5 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
  width: min(1320px, calc(100% - 48px));
  margin: 0 auto;
  padding: 0;
  min-height: var(--ct-header-h);
}
/* Keep the body clear of the fixed header. */
body { padding-top: var(--ct-header-h); }
body.home { padding-top: 0; }            /* hero sits under the bar on purpose */
/* Decorative animated underline: pin it to the bottom edge, no layout cost. */
.nav-line { top: auto !important; bottom: 0 !important; }

/* Top utility nav (Hartford, CT + phone) is redundant with the brand + the
   phone CTA pill, and its absolute-ish placement collided with the CTA.
   Hide it; the phone lives in the CTA and the city lives in the hero kicker. */
.site-header .top-nav { display: none !important; }
/* Hide the dev-only secondary nav for good. */
.secondary-nav, [shows-at="dev-mode-only"] { display: none !important; }

/* ---------- BRAND / LOGO --------------------------------------------- */
.site-header .main-nav {
  order: 1;
  position: static !important;
  background: transparent !important;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 30px;
  min-width: 0;
}
.site-header .site-logo {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 14px 0 !important;
  flex: 0 0 auto;
}
.site-header .brand-wordmark {
  color: #fff !important;
  font-family: "Hanken Grotesk", sans-serif;
  font-weight: 900;
  font-size: 17px !important;
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}
.site-header .brand-wordmark br { display: inline; }

/* ---------- DESKTOP INLINE NAV (>= 992px) ---------------------------- */
@media (min-width: 62em) {
  /* The captured markup nests .main-nav-container (the whole menu) INSIDE
     .site-nav-hamburger, so we must NOT display:none the hamburger wrapper
     on desktop or the menu disappears. Instead, neutralize the wrapper to a
     normal flex item and hide only the burger ICON. */
  .site-header .site-nav-hamburger {
    display: flex !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
  .site-header .site-nav-hamburger > .hamburger,
  .site-header .site-nav-hamburger > [tab-trigger] { display: none !important; }
  .crm-nav-close, .crm-nav-overlay { display: none !important; }

  .site-header .main-nav-container {
    width: 100% !important;
    flex: 1 1 auto;
    min-width: 0;
  }
  .site-header .main-nav-list {
    position: static !important;
    width: auto !important;
    left: auto; right: auto;
    display: flex !important;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin: 0 !important;
    transition: none !important;
    transform: none !important;
    background: transparent !important;
    overflow: visible !important;
  }
  .site-header .main-nav-list > .root.link-container {
    position: relative;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
  }
  .site-header .main-nav-list > .root.link-container > .inner { display: block; }
  .site-header .main-nav-list > .root.link-container > .inner > a.root.link {
    display: flex;
    align-items: center;
    width: auto !important;
    background: transparent !important;       /* kill captured white-fill box */
    color: #fff !important;
    -webkit-text-stroke: 0 !important;
    font-family: "Hanken Grotesk", sans-serif;
    font-size: 0.92rem !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 10px 14px !important;
    white-space: nowrap;
    border-radius: 4px;
    transition: color 0.18s ease, background-color 0.18s ease;
  }
  /* Last container is the phone -> render as an orange CTA pill. */
  .site-header .main-nav-list > .root.link-container[root="contact"] > .inner > a.root.link,
  .site-header .main-nav-list > .root.link-container:last-child > .inner > a.root.link {
    background: var(--ct-orange) !important;
    color: #fff !important;
    margin-left: 10px;
    padding: 10px 18px !important;
    border-radius: 999px;
    font-weight: 800;
  }
  .site-header .main-nav-list > .root.link-container[root="contact"] > .inner > a.root.link:hover,
  .site-header .main-nav-list > .root.link-container:last-child > .inner > a.root.link:hover {
    background: #cc4425 !important; color: #fff !important;
  }
  .site-header .main-nav-list > .root.link-container > .inner > a.root.link:hover {
    color: var(--ct-brass) !important;
    background: rgba(255, 255, 255, 0.08);
  }

  /* Dropdown panels: hidden, revealed on hover/focus of the parent. */
  .site-header .main-nav-list .root.drop-down {
    position: absolute !important;
    top: calc(100% + 6px);
    left: 0;
    min-width: 248px;
    background: #fff !important;
    border-top: 3px solid var(--ct-orange);
    box-shadow: 0 22px 60px rgba(11, 36, 33, 0.28);
    border-radius: 0 0 8px 8px;
    padding: 8px 0 !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 50;
  }
  .site-header .main-nav-list > .root.link-container:hover > .inner > .root.drop-down,
  .site-header .main-nav-list > .root.link-container:focus-within > .inner > .root.drop-down {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  /* Right-align dropdowns for the last menus so they don't run off-screen. */
  .site-header .main-nav-list > .root.link-container:nth-last-child(-n+2) .root.drop-down { left: auto; right: 0; }
  .site-header .main-nav-list .root.drop-down .inner { display: block; padding: 0 !important; }
  .site-header .main-nav-list .root.drop-down .link-container { display: block; overflow: visible; }
  .site-header .main-nav-list .root.drop-down a.link {
    display: block;
    width: auto !important;
    color: var(--ct-evergreen) !important;
    -webkit-text-stroke: 0 !important;
    font-size: 0.92rem !important;
    font-weight: 600;
    text-transform: none;
    text-decoration: none;
    padding: 10px 20px !important;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .site-header .main-nav-list .root.drop-down a.link:hover {
    background: var(--ct-mist);
    color: var(--ct-deep) !important;
  }
}

/* ---------- MOBILE: visible burger + working drawer (< 992px) -------- */
@media (max-width: 61.99em) {
  .site-header .top-nav { display: none !important; }   /* declutter the bar */
  .site-header .main-nav { width: 100%; justify-content: space-between; align-items: center; gap: 0; }

  /* Wrapper holds the burger icon AND the (hidden) drawer container. Keep the
     wrapper itself compact at the bar; the drawer is positioned fixed when
     open via the html.site-nav-active rules below/earlier. */
  .site-nav-hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative !important;
    width: 52px; height: 52px;
    margin-left: auto;
    flex: 0 0 auto;
    cursor: pointer;
    z-index: 1002;
  }
  /* Draw three solid bars (the captured 70%-wide bar reads as a thin line). */
  .site-nav-hamburger .hamburger,
  .site-nav-hamburger .hamburger:before,
  .site-nav-hamburger .hamburger:after {
    position: absolute;
    left: 50%; transform: translateX(-50%);
    width: 26px !important; height: 2.5px !important;
    background: #fff !important;
    border-radius: 2px;
    transition: none !important;
  }
  .site-nav-hamburger .hamburger { top: 50% !important; right: auto !important; margin: 0 !important; }
  .site-nav-hamburger .hamburger:before { content: ""; top: -8px !important; right: auto !important; }
  .site-nav-hamburger .hamburger:after  { content: ""; top: 8px !important;  right: auto !important; }

  /* Closed: the menu (nested inside the hamburger wrapper) is fully hidden. */
  .main-nav-container { display: none !important; }

  /* Open: full-screen fixed drawer with a solid evergreen gradient so the
     menu text never sits over page content. Explicit edges (top/right/bottom/
     left) so the panel reliably fills the viewport regardless of source order. */
  html.site-nav-active .main-nav-container {
    display: block !important;
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 1001 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 84px 20px 40px !important;
    background: linear-gradient(160deg, var(--ct-deep), var(--ct-evergreen)) !important;
  }
  html.site-nav-active .main-nav-list {
    position: static !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding-top: 0 !important;
    transform: none !important;
    transition: none !important;
  }
  html.site-nav-active body, body.crm-nav-open { overflow: hidden !important; }
}

/* ---------- HOME HERO: contrast + viewport fit ----------------------- */
/* The dark gradient + photo were at negative z-index (behind the element's
   own background image) so the photo was never darkened and the global
   navy h1 color showed through. Move the darkening overlay IN FRONT of the
   photo (positive z-index) and force light hero type. */
.ct-hero { isolation: isolate; align-items: center !important; }
.ct-hero:before {
  z-index: 1 !important;                 /* in front of the bg photo */
  background: linear-gradient(115deg, rgba(8,24,22,0.86) 0%, rgba(11,36,33,0.68) 46%, rgba(11,36,33,0.34) 100%) !important;
}
.ct-hero:after { z-index: 2 !important; }
.ct-hero-motion { z-index: 2; }
.ct-hero-inner {
  position: relative;
  z-index: 3;
  padding: calc(var(--ct-header-h) + 6vh) 0 9vh !important;
}
.ct-hero h1,
.ct-hero .ct-hero-inner h1 {
  color: #fff !important;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  font-size: clamp(2.6rem, 7vw, 6.6rem) !important;
}
.ct-hero p { color: rgba(255, 255, 255, 0.94) !important; }
.ct-hero .ct-kicker { color: var(--ct-brass) !important; }

/* The animated word-slider band sits right under the hero; if the slider JS
   doesn't run, the list still reads fine — just give it a dark band. */
.word-slider-container { background: var(--ct-deep); color: #fff; padding: 22px 0; text-align: center; }
.word-slider-container p { color: var(--ct-brass); margin: 0 0 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; font-size: .82rem; }
.word-slider-container .word-list { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; align-items: center; }
.word-slider-container .word-list a { color: #fff; text-decoration: none; font-weight: 800; text-transform: uppercase; opacity: .9; }
.word-slider-container .word-list a:hover { color: var(--ct-brass); }

/* ---------- SITEWIDE CONTRAST NET ----------------------------------- */
/* Inner-page heroes (inside-header-section): force readable light type and a
   guaranteed dark overlay even if the bg image 404s (e.g. the stray
   /filesimages/... contact leak). */
.inside-header-section { position: relative; isolation: isolate; background: var(--ct-evergreen); }
.inside-header-section .bg-img.bg-overlay.dark:after,
.inside-header-section .bg-overlay.dark:after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, rgba(8,24,22,0.82), rgba(11,36,33,0.55));
}
.inside-header-section .content-section--wrapper { position: relative; z-index: 2; }
.inside-header-section h1 { color: #fff !important; }
.inside-header-section .ct-kicker { color: var(--ct-brass) !important; }

/* Accordion/"Roof Work" cards on the home page: keep dark text on the light
   card and white on imagery rows. */
.accordion-table h3 { color: var(--ct-evergreen); }
.accordion-table .content h4 { color: var(--ct-evergreen); }
.accordion-table .content p { color: #2d3a37; }
.stroke-title { color: var(--ct-evergreen); }
.large-title-section .stroke-title { color: rgba(18,60,52,.16); -webkit-text-stroke: 1px var(--ct-evergreen); }

/* Generic guard: never render the brand/CTA orange text on orange, and make
   sure any leftover theme link defaulting to #000 on a dark band is legible. */
.outline-section.primary-theme { background: var(--ct-evergreen); color: #fff; }
.outline-section.primary-theme .title { color: #fff; }

/* ---------- FOOTER: clean columns, no overflow ----------------------- */
.ct-seo-footer { position: relative; isolation: isolate; }
.ct-seo-footer .bg-img.bg-overlay.dark:after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(8,24,22,.86), rgba(11,36,33,.92));
}
.ct-footer-inner, .ct-seo-footer .legal, .ct-seo-footer .wwwlu-h-footer-map, .wwwlu-footer-legal { position: relative; z-index: 2; }
.ct-footer-links { gap: 22px 26px; }
.ct-footer-col a:hover { color: var(--ct-brass); }
.wwwlu-footer-legal a:hover { color: var(--ct-brass); }

@media (max-width: 1100px) {
  .ct-footer-links { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .ct-footer-inner { grid-template-columns: 1fr; text-align: left; }
  .ct-footer-links { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .ct-footer-brand p { max-width: none; }
}
@media (max-width: 440px) {
  .ct-footer-links { grid-template-columns: 1fr; }
}

/* ---------- BODY TYPE: actually use the loaded font ------------------ */
/* site.min.css still hard-codes the removed Typekit face "quatro" on <body>;
   point body copy at the loaded Google fonts. Headings already use Hanken
   Grotesk via the ct-* rules. */
body, .cms-content, .page-content, .content { font-family: "Open Sans", "Hanken Grotesk", system-ui, sans-serif; }
h1, h2, h3, h4, .brand-wordmark, .footer-wordmark, .ct-kicker { font-family: "Hanken Grotesk", "Open Sans", system-ui, sans-serif; }

/* Avoid a double-H1 visual clash on contact/about (hero H1 + body H1):
   demote the in-body duplicate to look like the section's lede heading. */
.content.cms-content > h1 { font-size: clamp(1.9rem, 4vw, 3rem); color: var(--ct-evergreen); margin-top: 0; }


/* Connecticut homepage contrast and footer cleanup. */
.ct-home-focus {
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(243,240,232,.96)),
    radial-gradient(circle at top right, rgba(199,168,91,.22), transparent 38%);
  border-bottom: 1px solid rgba(18,60,52,.14);
  border-top: 1px solid rgba(18,60,52,.14);
  color: var(--ct-ink);
}
.ct-home-focus .content-section--wrapper {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.ct-home-focus .ct-kicker { color: #806119 !important; }
.ct-home-focus h2 {
  color: var(--ct-evergreen);
  margin-bottom: .28em;
  text-shadow: none;
}
.ct-home-focus .ct-focus-copy p:not(.ct-kicker) {
  color: #263633 !important;
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.68;
  max-width: 64ch;
}
.ct-home-focus .ct-focus-lists {
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(18,60,52,.16);
  box-shadow: 0 24px 70px rgba(11,36,33,.12);
  gap: 0;
  margin-top: 0;
  padding: clamp(18px, 2.5vw, 30px);
}
.ct-home-focus .ct-focus-lists div {
  border-left: 1px solid rgba(18,60,52,.12);
  border-top: 4px solid var(--ct-brass);
  padding: 18px 18px 4px;
}
.ct-home-focus .ct-focus-lists div:first-child { border-left: 0; }
.ct-home-focus .ct-focus-lists h3 {
  color: var(--ct-evergreen);
  font-size: .88rem;
  letter-spacing: .08em;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.ct-home-focus .ct-focus-lists a {
  align-items: center;
  border-bottom: 1px solid rgba(18,60,52,.13);
  color: #173e36 !important;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  line-height: 1.25;
  min-height: 46px;
  padding: 12px 0;
}
.ct-home-focus .ct-focus-lists a::after {
  color: var(--ct-brass);
  content: "\2192";
  flex: 0 0 auto;
  font-weight: 900;
}
.ct-home-focus .ct-focus-lists a:hover {
  color: #081816 !important;
  text-decoration: underline;
  text-decoration-color: var(--ct-brass);
  text-underline-offset: 4px;
}

.ct-seo-footer {
  background: #071c1a;
  color: #fff;
}
.ct-seo-footer .site-footer--wrapper {
  padding: clamp(58px, 7vw, 98px) min(5vw, 72px) 30px;
}
.ct-seo-footer .bg-img.bg-overlay.dark {
  opacity: .38;
  filter: saturate(.75) contrast(1.05);
}
.ct-seo-footer .bg-img.bg-overlay.dark:after {
  background:
    linear-gradient(135deg, rgba(5,17,16,.96) 0%, rgba(10,35,31,.9) 48%, rgba(7,28,26,.98) 100%),
    radial-gradient(circle at 84% 16%, rgba(199,168,91,.2), transparent 30%);
}
.ct-footer-inner {
  align-items: start;
  grid-template-columns: minmax(280px, .72fr) minmax(0, 2fr);
}
.ct-footer-brand {
  background: rgba(255,255,255,.065);
  border: 1px solid rgba(255,255,255,.14);
  padding: clamp(22px, 3vw, 34px);
}
.ct-footer-brand .footer-wordmark {
  font-size: clamp(1.85rem, 3vw, 3rem);
}
.ct-footer-brand p {
  color: rgba(255,255,255,.82);
  font-size: 1rem;
  line-height: 1.65;
}
.ct-footer-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.ct-footer-contact a {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  font-weight: 800;
  padding: 10px 14px;
  text-decoration: none;
}
.ct-footer-links {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.12);
  gap: 0;
  padding: clamp(18px, 2.5vw, 30px);
}
.ct-footer-col {
  border-left: 1px solid rgba(255,255,255,.11);
  padding: 0 18px;
}
.ct-footer-col:first-child { border-left: 0; }
.ct-footer-col h3 {
  border-bottom: 1px solid rgba(199,168,91,.45);
  color: #f1d88a;
  letter-spacing: .08em;
  margin: 0 0 12px;
  padding-bottom: 10px;
}
.ct-footer-col a {
  color: rgba(255,255,255,.82);
  line-height: 1.25;
  padding: 8px 0;
}
.ct-footer-col a:hover,
.ct-footer-contact a:hover,
.ct-seo-footer .legal a:hover {
  color: #fff !important;
  text-decoration: underline;
  text-decoration-color: var(--ct-brass);
  text-underline-offset: 4px;
}
.ct-seo-footer .wwwlu-h-footer-map {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
  margin: clamp(30px, 4vw, 48px) auto 0;
  overflow: hidden;
  width: min(1180px, 100%);
}
.ct-seo-footer .wwwlu-h-footer-map iframe { min-height: 260px; }
.ct-seo-footer .legal {
  border-top: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.78);
  margin: 34px auto 0;
  padding-top: 20px;
  width: min(1180px, 100%);
}
.wwwlu-footer-legal {
  background: #061613;
  color: rgba(255,255,255,.72);
  position: relative;
  z-index: 2;
}

@media (max-width: 980px) {
  .ct-home-focus .content-section--wrapper,
  .ct-footer-inner { grid-template-columns: 1fr; }
  .ct-home-focus .ct-focus-lists { grid-template-columns: 1fr; }
  .ct-home-focus .ct-focus-lists div,
  .ct-footer-col { border-left: 0; }
  .ct-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-footer-col { border-top: 1px solid rgba(255,255,255,.11); padding: 18px 12px 0; }
  .ct-footer-col:nth-child(-n+2) { border-top: 0; }
}

@media (max-width: 560px) {
  .ct-footer-links { grid-template-columns: 1fr; }
  .ct-footer-col:nth-child(-n+2) { border-top: 1px solid rgba(255,255,255,.11); }
  .ct-footer-col:first-child { border-top: 0; }
  .ct-footer-contact a { width: 100%; justify-content: center; }
}