/* ==========================================================================
   FrameFix - RESPONSIVE LAYER
   Desktop above 1120px is the signed-off design and is not touched here.
   Below that this is a real mobile pass, not the prototype's safety net:
   a hamburger drawer, single-column stacks, touch-sized targets, and a
   before/after slider that works under a thumb.
   ========================================================================== */

/* ==========================================================================
   <= 1240px - keep the gutter off the edge on small laptops
   ========================================================================== */
@media (max-width: 1280px) {
  :root { --ff-gutter: 28px; }
}

/* ==========================================================================
   <= 1120px - two-column collapse, nav becomes a drawer
   ========================================================================== */
@media (max-width: 1120px) {

  :root { --ff-gutter: 24px; }

  /* Fluid headings */
  .ff-h1-hero, .ff-hero h1 { font-size: clamp(34px, 5.6vw, 66px); }
  .ff-h1, .ff-pagehead h1  { font-size: clamp(30px, 4.8vw, 56px); }
  .ff-h2                    { font-size: clamp(26px, 4vw, 44px); }
  .ff-h2-sub, .ff-darkband h2, .ff-faq-layout h2, .ff-ba-panel h2 { font-size: clamp(24px, 3.6vw, 40px); }
  .ff-ctaband h2            { font-size: clamp(28px, 4.4vw, 48px); }

  /* Header: hide the pill nav, show the toggle */
  .ff-nav { display: none; }
  .ff-navtoggle { display: inline-flex; }
  .ff-header__inner { gap: 16px; }
  .ff-header__actions { margin-left: auto; }

  /* Three-up grids become two-up */
  .ff-svc-grid,
  .ff-proj-grid,
  .ff-post-grid,
  .ff-scopes,
  .ff-gallery-grid,
  .ff-areas-grid,
  .ff-rev-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Five-up badge row becomes three */
  .ff-badges__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Six-up tiles become four */
  .ff-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* Asymmetric two-column layouts stack */
  .ff-darkband__grid,
  .ff-darkband__grid--warranty,
  .ff-steps-layout,
  .ff-faq-layout,
  .ff-ba-panel,
  .ff-svchero__grid,
  .ff-about-grid,
  .ff-estimate-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }

  /* Panels lose some inset */
  .ff-darkband__panel { padding: 40px 32px 36px; border-radius: 24px; }
  .ff-ba-panel { padding: 32px; border-radius: 24px; }
  .ff-ctaband { padding: 48px 32px; border-radius: 24px; }
  .ff-form { padding: 32px 28px; }
  .ff-panel { padding: 32px 28px; }

  /* Hero */
  .ff-hero__inner { padding: 72px var(--ff-gutter) 76px; min-height: 0; }
  .ff-hero__quote { align-self: flex-start; flex: 1 1 100%; max-width: 420px; }

  /* Service sub-nav stops sticking so it cannot cover content */
  .ff-svcnav { position: static; }

  /* Project rows stack with the image on top */
  .ff-proj-row { grid-template-columns: minmax(0, 1fr); }
  .ff-proj-row:nth-child(even) .ff-proj-row__frame { order: 0; }
  .ff-proj-row__frame { min-height: 300px; }
  .ff-proj-row__body { padding: 32px 28px; }
}

/* ==========================================================================
   <= 900px
   ========================================================================== */
@media (max-width: 900px) {

  .ff-section, .ff-section--flush { padding-bottom: 72px; }
  .ff-section, .ff-pagehead, .ff-section--head { padding-top: 56px; }
  .ff-services { padding-bottom: 72px; }
  .ff-darkband { padding: 64px var(--ff-gutter); }
  .ff-darkband--tight { padding: 0 var(--ff-gutter) 72px; }

  .ff-badges { padding-top: 48px; }
  .ff-badges__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .ff-symptoms { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ff-pricing { grid-template-columns: minmax(0, 1fr); }
  .ff-sectors, .ff-sectorpair { grid-template-columns: minmax(0, 1fr); }
  .ff-why-grid { grid-template-columns: minmax(0, 1fr); }
  .ff-form__grid { grid-template-columns: minmax(0, 1fr); }

  .ff-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}

/* ==========================================================================
   <= 820px - phone layout, mobile action bar appears
   ========================================================================== */
@media (max-width: 820px) {

  :root { --ff-gutter: 20px; }

  /* The fixed bottom bar needs clearance above the footer and the widget */
  .ff-mobilebar { display: grid; }
  .ff-footer { padding-bottom: 96px; }
  .ff-quick { bottom: 78px; right: 16px; }

  /* Single column everywhere that still had two */
  .ff-svc-grid,
  .ff-proj-grid,
  .ff-post-grid,
  .ff-scopes,
  .ff-rev-grid,
  .ff-rev-grid--3,
  .ff-areas-grid { grid-template-columns: minmax(0, 1fr); }

  .ff-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .ff-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

  /* Hero */
  .ff-hero__inner { padding: 56px var(--ff-gutter) 60px; gap: 32px; }
  .ff-hero__lead { font-size: 17px; margin-bottom: 26px; }
  .ff-hero__ctas { gap: 10px; margin-bottom: 28px; }
  .ff-hero__cta, .ff-hero__cta--ghost { width: 100%; text-align: center; padding: 16px 24px; }
  .ff-hero__stats { gap: 22px; }
  .ff-hero__stat-n { font-size: 23px; }
  .ff-hero__rating { flex-wrap: wrap; row-gap: 4px; }

  /* Section heads stop trying to sit side by side */
  .ff-sechead { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 28px; }

  /* Cards */
  .ff-svc-card__frame { height: 210px; }
  .ff-svc-grid--lg .ff-svc-card__frame { height: 230px; }
  .ff-proj-card__frame { height: 220px; }
  .ff-post-card__frame { height: 190px; }
  .ff-proj-row__frame { min-height: 240px; }

  /* Steps */
  .ff-step { grid-template-columns: 48px 1fr; gap: 16px; padding: 20px 0; }
  .ff-step__n { font-size: 26px; }

  /* Reviews */
  .ff-rev { padding: 26px 24px; }
  .ff-rev__text, .ff-rev-grid--3 .ff-rev__text { font-size: 17px; }

  /* Dark band quote pair stacks */
  .ff-darkband__quotes-pair { grid-template-columns: minmax(0, 1fr); }

  /* CTA band buttons go full width so they are thumb-sized */
  .ff-ctaband__row { flex-direction: column; align-items: stretch; }
  .ff-ctaband__primary,
  .ff-ctaband__wa,
  .ff-ctaband__tel { width: 100%; justify-content: center; text-align: center; }

  /* Before / after - bigger knob, drag hint, no ew-resize cursor on touch */
  .ff-ba { cursor: default; }
  .ff-ba__handle { width: 56px; margin-left: -28px; }
  .ff-ba__handle::before { left: 27px; }
  .ff-ba__knob { width: 48px; height: 48px; }
  .ff-ba__label { font-size: 10px; padding: 5px 9px; top: 10px; }
  .ff-ba__label--before { left: 10px; }
  .ff-ba__label--after { right: 10px; }

  /* Article */
  .ff-article__body { font-size: 16.5px; }
  .ff-article__body h2 { font-size: 25px; margin-top: 34px; }
  .ff-article__body h3 { font-size: 20px; }
  .ff-article__body blockquote { font-size: 19px; padding-left: 18px; }

  /* Footer */
  .ff-footer__cols { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-bottom: 32px; }
  .ff-footer__bottom { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ff-footer__accred { gap: 16px; }

  /* Quick connect panel must fit the viewport */
  .ff-quick__panel { width: min(292px, calc(100vw - 32px)); }
}

/* ==========================================================================
   <= 600px
   ========================================================================== */
@media (max-width: 600px) {

  .ff-gallery-grid { grid-template-columns: minmax(0, 1fr); }
  .ff-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ff-badges__grid { grid-template-columns: minmax(0, 1fr); }

  .ff-darkband__panel { padding: 30px 22px; }
  .ff-ba-panel { padding: 22px; }
  .ff-ctaband { padding: 36px 22px; }
  .ff-form { padding: 26px 20px; }
  .ff-panel { padding: 26px 22px; }
  .ff-svc-card { padding: 20px 20px 20px; }
  .ff-proj-card__body { padding: 20px 22px 22px; }
  .ff-rev { padding: 22px 20px; }
  .ff-why { padding: 26px 22px; }
  .ff-scope { padding: 24px 22px; }
  .ff-pricing__card { padding: 26px 22px; }
  .ff-area { padding: 22px 20px; }
  .ff-aside__card { padding: 24px 22px; }
  .ff-proj-row__body { padding: 26px 20px; }

  /* Announcement bar gets terse - only what matters on a phone */
  .ff-announce__inner { gap: 12px; padding: 9px var(--ff-gutter); font-size: 12.5px; }
  .ff-announce__hide-sm { display: none; }

  /* Header brand wordmark only */
  .ff-brand__tag { font-size: 8px; letter-spacing: .14em; }
  .ff-tel-pill { display: none; } /* the mobile bar carries Call */

  .ff-faq__q { font-size: 16.5px; gap: 14px; padding: 18px 0; }
  .ff-faq__a p { font-size: 15px; }

  .ff-article__hero { border-radius: var(--ff-r-frame); margin-bottom: 26px; }
  .ff-svchero__frame { border-radius: var(--ff-r-frame); }
  .ff-about__frame { border-radius: var(--ff-r-frame); }

  .ff-404 { padding: 72px var(--ff-gutter) 90px; }
  .ff-404 h1 { font-size: 64px; }
  .ff-404__links { flex-direction: column; align-items: stretch; }
  .ff-404__links .ff-btn { width: 100%; }

  .ff-searchform { flex-direction: column; }

  /* Quick-connect button collapses to the glyph */
  .ff-quick__btn { padding: 0; width: 56px; justify-content: center; }
  .ff-quick__btn [data-ff-quick-label] { display: none; }
}

/* ==========================================================================
   <= 430px - small phones
   ========================================================================== */
@media (max-width: 430px) {

  :root { --ff-gutter: 16px; }

  .ff-hero h1 { font-size: clamp(28px, 8.4vw, 36px); }
  .ff-hero__stats { gap: 16px; }
  .ff-hero__stat-n { font-size: 20px; }
  .ff-hero__stat-l { font-size: 12px; }
  .ff-hero__quote { padding: 14px 16px; }

  .ff-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ff-tile { padding: 12px 10px 10px; }
  .ff-tile__dia { height: 74px; }
  .ff-tile__name { font-size: 12px; }

  .ff-svc-card__frame { height: 180px; }
  .ff-proj-card__frame { height: 190px; }
  .ff-post-card__frame { height: 170px; }
  .ff-proj-row__frame { min-height: 200px; }

  .ff-ctaband h2 { font-size: clamp(24px, 7.6vw, 32px); }
  .ff-ctaband__lead { font-size: 16px; }

  .ff-mobilebar a { font-size: 13px; gap: 5px; }

  .ff-footer__badges img { max-width: 100%; height: auto; }

  /* Long uppercase meta lines wrap rather than overflow */
  .ff-proj-card__meta,
  .ff-proj-row__meta,
  .ff-article__meta { letter-spacing: .06em; }
}

/* ==========================================================================
   Landscape phones - the hero must not eat the whole screen
   ========================================================================== */
@media (max-height: 520px) and (orientation: landscape) {
  .ff-hero__inner { min-height: 0; padding-block: 48px; }
  .ff-drawer { max-height: calc(100vh - 60px); }
}

/* ==========================================================================
   Print - a quote sheet a customer can actually keep
   ========================================================================== */
@media print {
  .ff-announce,
  .ff-header,
  .ff-quick,
  .ff-mobilebar,
  .ff-svcnav,
  .ff-ctaband,
  .ff-footer__soc,
  .ff-footer__badges { display: none !important; }

  body { font-size: 12pt; }
  .ff-hero { background: none; }
  .ff-hero__scrim, .ff-hero__scrim--v, .ff-hero__img { display: none; }
  .ff-hero h1, .ff-hero__lead, .ff-hero__stat-n { color: #000; text-shadow: none; }
  .ff-card, .ff-svc-card, .ff-proj-card { break-inside: avoid; box-shadow: none; }
  .ff-faq__a { grid-template-rows: 1fr !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ==========================================================================
   SERVICE DETAIL - responsive
   ========================================================================== */
@media (max-width: 1120px) {
  .ff-svcbody { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ff-svcside {
    position: static;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 8px;
  }
  .ff-svcside__label { width: 100%; margin-bottom: 0; }
  .ff-svcside a { flex: 1 1 auto; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .ff-typerows { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .ff-symptomgrid { grid-template-columns: minmax(0, 1fr); }
  .ff-svcquote { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ff-svcquote .ff-btn { width: 100%; }
}

@media (max-width: 820px) {
  .ff-svcmain { gap: 32px; }
  .ff-svcmain__h { font-size: clamp(22px, 5.2vw, 30px); }
  .ff-svchero__lead { font-size: 19px; }
  .ff-svchero__ctas { flex-direction: column; align-items: stretch; }
  .ff-svchero__ctas > a { width: 100%; text-align: center; }
  .ff-scoperow { grid-template-columns: 34px 1fr; gap: 14px; padding: 20px 20px; }
  .ff-methodlist li { grid-template-columns: 26px 1fr; gap: 14px; }
  .ff-svcquote { padding: 26px 22px; }
  .ff-svcquote__text { font-size: 18px; }
}

@media (max-width: 600px) {
  .ff-typerow { grid-template-columns: 64px 1fr; gap: 14px; padding: 16px 16px; }
  .ff-typerow__dia { height: 60px; }
  .ff-symptomgrid li { padding: 14px 16px; }
  .ff-symptomgrid li > span:last-child { font-size: 15px; }
}

/* ==========================================================================
   Reviews / About / Project detail - responsive
   ========================================================================== */
@media (max-width: 1120px) {
  .ff-ratingbar { grid-template-columns: auto 1fr; gap: 28px; }
  .ff-ratingbar__links { grid-column: 1 / -1; }
  .ff-statgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .ff-ratingbar { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 26px 24px; text-align: left; }
  .ff-ratingbar__score { text-align: left; }
  .ff-ratingbar__links { flex-direction: column; }
  .ff-ratingbar__links .ff-btn { width: 100%; }
  .ff-projdetail { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .ff-statgrid { grid-template-columns: minmax(0, 1fr); }
  .ff-stat { padding: 22px 20px; }
  .ff-ratingbar__n { font-size: 42px; }
}