/* Final gutter-installation hardening pass. Page-scoped overrides only. */
.gutter-install-page .gi-section-intro p { color: #586474; }
.gutter-install-page .gi-quote-review { margin: 22px 0 0; padding: 18px 20px; border: 1px solid rgba(30,60,114,.13); border-left: 4px solid var(--accent); border-radius: 14px; background: rgba(255,255,255,.78); box-shadow: 0 10px 26px rgba(30,60,114,.07); }
.gutter-install-page .gi-quote-review .gi-review-stars { color: var(--accent); letter-spacing: 2px; margin-bottom: 8px; }
.gutter-install-page .gi-quote-review blockquote { margin: 0 0 8px; color: var(--primary-dark); font-weight: 600; line-height: 1.6; }
.gutter-install-page .gi-quote-review figcaption { color: #586474; font-size: .9rem; }
.gutter-install-page .gi-budget-error { min-height: 1.35em; margin: 10px 0 0; color: #8f2f21; font-weight: 700; }
.gutter-install-page .gi-inline-cta .btn, .gutter-install-page .gi-result-convert .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.gutter-install-page .gi-review-dot { position: relative; width: 44px !important; height: 44px !important; min-width: 44px; min-height: 44px; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; }
.gutter-install-page .gi-review-dot::after { content: ''; position: absolute; width: 9px; height: 9px; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #b5bdc8; transition: transform .2s ease, background .2s ease; }
.gutter-install-page .gi-review-dot.active::after, .gutter-install-page .gi-review-dot[aria-current="true"]::after { background: var(--accent); transform: translate(-50%,-50%) scale(1.35); }
@media (prefers-reduced-motion: reduce) { .gutter-install-page .gi-review-dot::after { transition: none; } }

/* --- Layout pass: anchor offset, column balance, floating-control density --- */

/* The site header is fixed (74px scrolled). Without this, every CTA that jumps
   to the form parks the kicker and the form heading underneath it. */
.gutter-install-page #gutter-quote,
.gutter-install-page #gutter-planner,
.gutter-install-page #main-content { scroll-margin-top: 96px; }

/* The copy column (benefits + review) runs taller than the form column, so the
   height difference used to collect as one dead white block under the button.
   Centering the form splits it evenly and reads as padding. */
.gutter-install-page .gi-quote-form { display: flex; flex-direction: column; justify-content: center; }
.gutter-install-page .gi-quote-form > * { flex: none; }

/* Keep the navy headline from breaking into a four-line rag in a narrow column. */
.gutter-install-page .gi-quote-copy h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); line-height: 1.16; }

/* This page already repeats Call in the hero, every inline CTA, the form helper
   and the mobile dock. The floating phone bubble is redundant clutter next to
   the Services pill and back-to-top control. */
.gutter-install-page .floating-cta { display: none !important; }

/* The shared header is rgba(255,255,255,.95); content scrolling under it ghosts
   through and turns the trust strip into a smear. Opaque on this page. */
.gutter-install-page header { background-color: #fff; }

@media (max-width: 820px) {
  /* Stacked, the copy panel used to push the fields ~860px below the fold, so a
     "Free Estimate" tap landed on marketing copy instead of the form. Fields
     first; the copy panel still follows as reinforcement. The copy panel holds
     no focusable elements, so visual order and tab order stay in agreement. */
  .gutter-install-page .gi-quote-form { order: -1; }
  .gutter-install-page .gi-quote-copy h2 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
}

/* --- Bottom cluster: nothing is removed, nothing overlaps --- */

/* The Services pill and back-to-top were on different offsets (82px / 84px) and
   tall enough to land on the footer's last row at every width. Put them on one
   shared baseline and extend the footer's own padding so they sit inside the
   footer's background instead of on top of its content. */
.gutter-install-page .floating-service-trigger,
.gutter-install-page .back-to-top { bottom: 20px; }
.gutter-install-page footer { padding-bottom: 104px; }

@media (max-width: 640px) {
  /* Above the fixed dock, still on one shared baseline. */
  .gutter-install-page .floating-service-trigger,
  .gutter-install-page .back-to-top { bottom: 80px; }
  .gutter-install-page footer { padding-bottom: 104px; }
}

/* Mid-page, the pill and the arrow could still land on the estimate form's
   submit button. They step aside while the form is on screen and return
   immediately after — present everywhere else, never covering the CTA. */
.gutter-install-page .floating-service-trigger,
.gutter-install-page .back-to-top { transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }
.gutter-install-page.gi-form-in-view .floating-service-trigger,
.gutter-install-page.gi-form-in-view .back-to-top {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px);
}
@media (prefers-reduced-motion: reduce) {
  .gutter-install-page .floating-service-trigger,
  .gutter-install-page .back-to-top { transition: none; }
}