/* Clone overrides. Load LAST. Fixes horizontal layouts that depend on the
   Squarespace carousel JS runtime (which we strip for the static clone). */

/* Services carousel on homepage: let Squarespace's native carousel script
   (user-items-list-carousel) size the slideshow-holder + position slides.
   Earlier override forced a flexbox scroller which shrank slides to 240w
   instead of source's 415w. */

/* "HOW TO GET STARTED" section: source pins the left column (heading +
   patio image) via position:sticky at runtime so the right column's 3
   steps scroll through it. Without the JS that sets the sticky, clone
   scrolls both columns together. Bake the sticky in CSS. */
section[data-section-id="65ca49d22e550f044cf0469e"] .fe-block-yui_3_17_2_1_1707754032095_5466 {
  position: sticky !important;
  top: 153px !important;
  align-self: start !important;
  height: min-content !important;
}

/* Testimonial section ("I MUST SAY - TOP ROCK DESIGN IS JUST THAT,
   AT THE TOP."): extract.py collapsed the padding when it baked
   customSectionHeight:10 and dropped section-height--medium. Add the
   vertical breathing room back. */
section[data-section-id="65b406453f35a67b08d19ea5"] > .content-wrapper {
  padding-top: 8vmax !important;
  padding-bottom: 8vmax !important;
}

/* Full Squarespace image sliders (.sqs-gallery-block-slider): leave images
   at their natural size and rely on the existing .sqs-wrapper horizontal
   stack. We don't force widths here because the hero uses the same
   selector and its images must stay at source-natural sizes. */

/* The Squarespace carousel JS (when it runs partially) sometimes sets an
   inline `left: -Npx` on the active-slide wrapper to animate to a mid-strip
   position. Without the full runtime those transitions never complete and
   the first image sits off-screen. Force the strip back to left:0 so the
   first slide paints. */
.sqs-gallery-design-strip .sqs-wrapper.sqs-active-slide,
.sqs-gallery-design-strip .sqs-wrapper.sqs-gallery-design-strip-slide {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

/* Homepage hero: every autoplay image must fill the complete gallery frame.
   Squarespace otherwise sizes portrait and 3:2 slides from their intrinsic ratio,
   which exposes the previous and next images at the frame edges. */
section[data-section-id="65b177be47caba2e86122c58"]
  .fe-block-yui_3_17_2_1_1706127805262_6115
  .sqs-gallery-design-strip
  .sqs-wrapper {
  display: flex !important;
  width: 100% !important;
  height: 100% !important;
}

section[data-section-id="65b177be47caba2e86122c58"]
  .fe-block-yui_3_17_2_1_1706127805262_6115
  .sqs-gallery-design-strip-slide {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 50% 50% !important;
}

/* Keep white hero copy readable across the full image set without placing it
   inside an opaque text box. The center-weighted scrim protects the headline
   and paragraph while leaving the outer image composition visible. */
section[data-section-id="65b177be47caba2e86122c58"]
  .fe-block-yui_3_17_2_1_1706127805262_6115
  .sqs-gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      rgba(4, 27, 32, 0.24) 0%,
      rgba(4, 27, 32, 0.44) 28%,
      rgba(4, 27, 32, 0.5) 50%,
      rgba(4, 27, 32, 0.44) 72%,
      rgba(4, 27, 32, 0.24) 100%
    ),
    linear-gradient(
      180deg,
      rgba(4, 27, 32, 0.08) 0%,
      rgba(4, 27, 32, 0.16) 45%,
      rgba(4, 27, 32, 0.28) 100%
    );
}

/* Some Squarespace blocks default to display:none waiting for JS to
   initialize -- force them visible since there's no JS to init them. */
.sqs-block-content,
.sqs-html-content,
.sqs-layout:not(.sqs-blocks-composer) {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Lazy-loaded images: force load */
img[data-image],
img.loaded,
img.sqs-intrinsic {
  opacity: 1 !important;
}

/* Sticky header keeps the nav visible on scroll (source has this). */
@media screen and (min-width: 767px) {
  header.header,
  header#header {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }
}

/* Dot-nav pips + arrows under galleries we don't restore. For the native
   user-items-list-carousel the script DOES render arrows, so those are kept. */
.sqs-pagination-wrapper,
.sqs-gallery-controls,
.sqs-gallery-meta-container .sqs-gallery-design-stacked-dots {
  display: none !important;
}

/* ---------------------------------------------------------------------
   Sections hidden on the source site (display:none at runtime).
   Enumerated via measured computed styles on the live Squarespace URLs.
   Hiding the same sections here keeps the clone's section flow + height
   in sync with source. Rebuild with tools/find-hidden-sections.mjs if
   source layout ever changes. --------------------------------------- */
section[data-section-id="65b3fb31fe3e7a06c647878e"],
section[data-section-id="65e614af371e101f83f3df47"],
section[data-section-id="65e614c985b30e6df3f92816"],
section[data-section-id="65e614e572264f674ca32a0b"] {
  display: none !important;
}

/* Fidelity mobile repair 2026-05-11: match live source mobile hero/process behavior */
@media (max-width: 767px) {
  /* The live source hides the small hero eyebrow + logo blocks on mobile; keep the
     white TR mark in the header instead. */
  section[data-section-id="65b177be47caba2e86122c58"] .fe-block-fac2cc5ca7917d00c778,
  section[data-section-id="65b177be47caba2e86122c58"] .fe-block-yui_3_17_2_1_1706287234336_1562 {
    display: none !important;
  }

  /* Squarespace normally adds scaleIn/fadeIn after animation. In the static clone
     those classes never arrive, leaving header controls scaled down and the hero
     CTA text/background faded out. */
  header.header .header-display-mobile .preScale,
  section[data-section-id="65b177be47caba2e86122c58"] .preFade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  section[data-section-id="65b177be47caba2e86122c58"] h1 {
    font-size: 56.3058px !important;
    line-height: 44.5942px !important;
    letter-spacing: 2.81529px !important;
  }
  section[data-section-id="65b177be47caba2e86122c58"] p {
    font-size: 16.1622px !important;
    line-height: 26.0211px !important;
  }
}

/* Tekton staging placeholders: disable live client-system writes on preview. */
.tekton-staging-form-placeholder {
  min-height: 220px;
  border: 2px dashed rgba(12, 54, 62, 0.45);
  border-radius: 10px;
  background: rgba(12, 54, 62, 0.06);
  color: #0c363e;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  text-align: center;
  font-family: inherit;
}
.tekton-staging-form-placeholder strong {
  display: block;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tekton-staging-form-placeholder span {
  max-width: 34rem;
  line-height: 1.5;
}

/* Semantic heading repairs preserve the captured Squarespace typography even
   when the underlying H-level changes. This keeps SEO structure independent
   from visual scale. */
.tekton-preserve-h1 {
  font-family: Teko, sans-serif !important;
  font-size: 105.856px !important;
  line-height: 83.838px !important;
  letter-spacing: 5.2928px !important;
}

.tekton-preserve-h2 {
  font-family: Teko, sans-serif !important;
  font-size: 85.12px !important;
  line-height: 71.5008px !important;
  letter-spacing: 4.256px !important;
}

.tekton-preserve-h3 {
  font-family: Teko, sans-serif !important;
  font-size: 59.2px !important;
  line-height: 53.28px !important;
  letter-spacing: 2.96px !important;
}

.tekton-preserve-h4 {
  font-family: barlow-m, barlow, sans-serif !important;
  font-size: 15px !important;
  line-height: 14.88px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
}

.tekton-preserve-h4:not(.tekton-utility-heading):not(.tekton-pre-h1-label) {
  margin-top: 0 !important;
  margin-bottom: 32px !important;
}

.tekton-featured-marquee {
  font-family: Teko, sans-serif !important;
  font-size: 67.84px !important;
  line-height: 94.976px !important;
  letter-spacing: 3.392px !important;
  margin: 0 !important;
}

.tekton-pre-h1-label {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Blog card titles were authored as H1s but use the smaller grid-title scale.
   Keep that scale after they become correctly nested H3s. */
.blog-title.tekton-preserve-h1 {
  font-size: 59.2px !important;
  line-height: 59.2px !important;
  letter-spacing: 2.96px !important;
}

section[data-section-id="65b909c85c695f0b6cf3390e"] .tekton-preserve-h4 {
  font-size: 13px !important;
  line-height: 12.896px !important;
  letter-spacing: 1.3px !important;
}

/* Captured Squarespace headings use white-space:pre-wrap together with explicit
   <br> tags. Collapsing formatting whitespace preserves the authored breaks but
   prevents source newlines from creating a second, empty line. */
.sqs-html-content :is(h1, h2, h3, h4, h5, h6) {
  white-space: normal !important;
}

/* Body-copy links keep the surrounding text color in every state while the
   underline provides the visual link cue. Navigation, cards, and buttons are
   intentionally excluded. */
main .sqs-html-content p a,
main .sqs-html-content p a:visited,
main .sqs-html-content p a:hover,
main .sqs-html-content p a:active {
  color: inherit !important;
  text-decoration: underline !important;
  text-decoration-color: currentColor !important;
}

/* About Us family labels stay legible wherever they overlap the light texture. */
.tekton-about-us .fe-block-d22fac630bdb7b2e4934 {
  grid-area: 12 / 6 / 14 / 10 !important;
}

.tekton-about-us #block-d22fac630bdb7b2e4934,
.tekton-about-us #block-yui_3_17_2_1_1711550734529_68030 {
  background: transparent !important;
  padding: 0 !important;
}

.tekton-about-us #block-d22fac630bdb7b2e4934 span,
.tekton-about-us #block-yui_3_17_2_1_1711550734529_68030 span {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.95) !important;
}

@media (min-width: 768px) {
  .tekton-about-us .fe-block-d22fac630bdb7b2e4934 {
    grid-area: 10 / 20 / 12 / 25 !important;
  }
}

/* Laptop widths place the Nate & Tia label over the light diagonal portion of
   the section. Move it down onto teal while keeping it beside the photo. */
@media (min-width: 768px) and (max-width: 1366px) {
  .tekton-about-us .fe-block-d22fac630bdb7b2e4934 {
    grid-area: 12 / 20 / 14 / 25 !important;
  }
}

/* Inspiration hero: restore readable white H1 copy and keep the CTA clear of
   the following image section. */
.tekton-inspiration main article.page-regions > section.region > section:first-of-type h1,
.tekton-inspiration main article.page-regions > section.region > section:first-of-type h1 span {
  color: #fff !important;
}

.tekton-inspiration main article.page-regions > section.region > section:first-of-type > .content-wrapper {
  padding-bottom: max(72px, 6vw) !important;
}

/* Keep the Packages H1 broad enough to use the available desktop hero width
   rather than stacking every word on a separate line. */
@media (min-width: 768px) {
  .tekton-packages main article.page-regions > section.region > section:first-of-type h1 {
    width: min(760px, 52vw) !important;
    max-width: none !important;
    font-size: 85.12px !important;
    line-height: 71.5008px !important;
    letter-spacing: 4.256px !important;
  }

  .tekton-packages main article.page-regions > section.region > section:first-of-type .sqs-html-content:has(h1) {
    width: min(760px, 52vw) !important;
    max-width: none !important;
  }
}

/* Match the Walkways & Driveways H1 to the established service-page heading
   scale without changing the captured hero grid or imagery. */
body.tekton-walkways-driveways #block-3d99a97cb44dac35eb45 h1 {
  font-size: 95.872px !important;
  line-height: 75.9306px !important;
  letter-spacing: 4.7936px !important;
}

/* Case-study testimonial panels need equal breathing room above and below. */
.tekton-case-study section:has(h3 strong) > .content-wrapper {
  padding-top: max(72px, 6vw) !important;
  padding-bottom: max(72px, 6vw) !important;
}

@media (max-width: 767px) {
  body.tekton-walkways-driveways #block-3d99a97cb44dac35eb45 h1 {
    font-size: clamp(42px, 12vw, 52px) !important;
    line-height: 0.88 !important;
    letter-spacing: 0.04em !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
  }

  body.tekton-walkways-driveways #block-3d99a97cb44dac35eb45 h1 .tekton-keep-word {
    display: inline-block;
    white-space: nowrap;
  }

}

/* About page: remove the two decorative scrolling headings. */
.tekton-about-us .fe-block-yui_3_17_2_1_1709562685775_27804,
.tekton-about-us .fe-block-ba0f8184b9864c7a68dd {
  display: none !important;
}

/* Contact page: retain the short textured teal divider while removing its
   three decorative icon/text steps and the circular hero down-arrow. */
section[data-section-id="65df84f7ad24400bf9665032"] .fe-block-yui_3_17_2_1_1709140411784_174570 {
  display: none !important;
}

section[data-section-id="65df8617b0612726c8828e7d"] .fluid-engine {
  display: none !important;
}

section[data-section-id="65df8617b0612726c8828e7d"] {
  min-height: 24px !important;
  height: 24px !important;
  overflow: hidden !important;
}

section[data-section-id="65df8617b0612726c8828e7d"] > .content-wrapper {
  display: none !important;
  padding: 0 !important;
}

/* Homepage Get in Touch CTA: keep the email and phone links legible against
   the dark background at every screen size. */
#block-9ba6307a5cbf99dd3bf5 a,
#block-7b3f46fb19b8fadc2a10 a {
  color: #fff !important;
}

/* Service-area detail pages: separate the first content heading from the
   full-bleed hero. The overview page is intentionally excluded. */
body.tekton-service-area-detail
  main article.page-regions > section.region > section:nth-of-type(2)
  > .content-wrapper {
  padding-top: 40px !important;
}

@media (min-width: 768px) {
  /* Lower the desktop Top Rock wordmark so its visible artwork sits 10px above
     the opening gallery. This also accounts for transparent space in the PNG. */
  section[data-section-id="65b177be47caba2e86122c58"]
    #block-yui_3_17_2_1_1706287234336_1562 {
    margin-top: -12px !important;
  }

  /* This stacked benefit banner is the mobile presentation. The desktop hero
     already carries the same three benefits over the opening image. */
  section[data-section-id="65b95b1c8016f64d0ee151f6"] {
    display: none !important;
  }
}

@media (max-width: 767px) {
  body.tekton-service-area-detail
    main article.page-regions > section.region > section:nth-of-type(2)
    > .content-wrapper {
    padding-top: 28px !important;
  }

  .tekton-preserve-h1 {
    font-size: 68.6656px !important;
    line-height: 54.3832px !important;
    letter-spacing: 3.43328px !important;
  }

  .tekton-preserve-h2 {
    font-size: 56.512px !important;
    line-height: 47.4701px !important;
    letter-spacing: 2.8256px !important;
  }

  .tekton-preserve-h3 {
    font-size: 41.32px !important;
    line-height: 37.188px !important;
    letter-spacing: 2.066px !important;
  }

  .blog-title.tekton-preserve-h1 {
    font-size: 41.32px !important;
    line-height: 41.32px !important;
    letter-spacing: 2.066px !important;
  }

  .tekton-featured-marquee {
    font-size: 46.384px !important;
    line-height: 64.9376px !important;
    letter-spacing: 2.3192px !important;
  }

  /* Stack adjacent-post links so long titles stay readable and their arrows
     remain inside the mobile viewport. */
  .item-pagination--prev-next {
    flex-direction: column;
    gap: 24px;
  }

  .item-pagination-link {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .item-pagination-link .pagination-title-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(100% - 43px);
  }

  .item-pagination-link .item-pagination-icon {
    box-sizing: border-box;
    flex: 0 0 43px;
  }
}