/* ============================================================
   5&2 Carpet and Tile Care — brand layer
   Loaded after each page's inline template stylesheet. The template's
   colours are already remapped to 5&2 navy (#0F2948) and green (#279828)
   in the inline CSS; this file only holds what the template has no
   equivalent for: the native quote form, the landscape owner cutout,
   neighborhood chips and unlinked city pills.
   ============================================================ */

:root {
  --brand-navy: #0F2948;
  --brand-navy-deep: #0B2140;
}

/* ── Header logo ──
   The template sized and placed its logo for a short, wide wordmark: 70px
   tall, pinned near the left edge and riding up into the white notch. The
   5&2 logo is a stacked badge with a tagline, so it needs more height to
   read, and it sits centred in the white space instead.
   At the top of the page (--tb-p = 0) the logo is centred in the white area
   left of the dark top bar:
   - horizontally on the notch. Its width is max(120px, (100vw - 1240px)/2
     + 370px), the same formula as .topbar__top-left, and its slanted right
     edge averages 20px short of that. The translate starts from the logo's
     layout position, 25px in (the bar's padding), so the offset is
     notch centre - 25px - half the logo's width (height × 640/331).
   - vertically on the 148px of white above the hero. The brand's layout
     centre is 100px down (60px top bar + half the 80px main bar); -27px
     lands the artwork's centre on 74px.
   On scroll --tb-p runs to 1 and the logo shrinks and glides left into the
   compact 96px bar, as the template's does. The mobile bar has no notch. */
@media (min-width: 1081px) {
  .topbar__brand--nav {
    --logo-lg: clamp(100px, 7.5vw, 116px);
    --logo-sm: clamp(64px, 5vw, 76px);
    --notch-w: max(120px, calc((100vw - 1240px) / 2 + 370px));
    --logo-center-x: calc((var(--notch-w) - 20px) / 2 - 25px - var(--logo-lg) * 1.9335 / 2);
    transform: translate(
      calc(var(--logo-center-x) * (1 - var(--tb-p)) + 24px * var(--tb-p)),
      calc(-27px * (1 - var(--tb-p)))
    ) !important;
  }
  .topbar__brand--nav img {
    --tb-logo-lg: var(--logo-lg) !important;
    --tb-logo-sm: var(--logo-sm) !important;
  }
}
@media (max-width: 1080px) { .topbar__brand--nav img { height: 50px !important; } }
.ftr__logo {
  background: #fff; border-radius: 12px; padding: 10px 14px; box-sizing: content-box;
  width: auto !important; height: 88px !important; max-width: none !important;
}

/* Contact page, single column: the form is the point of the page, so it
   goes above the sidebar instead of after it. */
@media (max-width: 960px) { .contact-form-col { order: -1; } }

/* Services dropdown holds 11 links in two columns. */
.tbdrop__panel--multi .tbdrop__item { break-inside: avoid; white-space: nowrap; }

/* ── Hero cutout ──
   The 5&2 cutout is the two owners from the chest up (1.37:1), with a hard
   horizontal bottom edge that runs through both of their arms. The template
   paints its cutout OVER the form and bleeds it to the card edge; here that
   left the cut line lying across the top of the form. Instead the photo is
   centred on the form and sits BEHIND it, and the form overlaps its bottom
   5% so the cut edge disappears behind the card's top edge — the owners
   read as standing behind the quote card.
   The overlap is a share of the image's own height, so it holds at every
   width: height = width × 538/737 (0.73), and 0.73 × 5% ≈ 0.0365. At 5% the
   card edge lands a few pixels under the "CARPET AND TILE CARE" print on
   her shirt; much more and it starts to crowd or clip the print.
   The width cap keeps the arms (94% of the image width) inside the card's
   straight top edge, clear of its rounded corners. Below 960px the template
   hides the cutout entirely, so none of this applies on phones. */
.hero__owners-float {
  margin-right: 0 !important;   /* the template's -30px bleed off-centres it */
  z-index: 1 !important;        /* behind .hero__form-wrap (z-index 2) */
}
.hero__owners-float img {
  width: min(88%, 420px) !important;
  margin: 0 auto calc(min(88%, 420px) * -0.0365) !important;
}

/* The owners photo is landscape (800×533): the van on the left, the couple
   right of centre at x ≈ 345–632. The home "Why choose" section and the
   about page crop it to a 3:4 portrait box, which keeps only half its width
   (400px); 72% slides that window to x ≈ 288–688, centred on the two of
   them. The wider crops (4:3 on phones, the about page's square thumbnail)
   keep more of the width around the same centre, so both stay in frame. */
.ov__photo-wrap img { object-position: 72% center; }
/* height: auto — the <img> carries width/height attributes to reserve
   space while it loads, and the height one would otherwise pin it at 533px
   and override the template's aspect-ratio (3:4, square below 720px). */
.abt-owner__photo { object-fit: cover; object-position: 72% center; height: auto; }

/* ── City pills without a dedicated page ── */
.city-pill--plain { cursor: default; }
.city-pill--plain:hover { transform: none; }

/* ── Area pages: neighborhood chips ── */
.area-hoods__label {
  font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  margin: 20px 0 10px;
}
.area-hoods { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.area-hood {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(39,152,40,0.10); color: var(--brand-navy);
  border: 1px solid rgba(39,152,40,0.25);
}
.area-hoods__zips { font-family: var(--font-body); font-size: 13px; color: var(--paper-faint); margin: 0 0 20px; }

/* ── Native quote form (modal, contact page, service pages) ── */
.qf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qf__field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.qf__field--full { grid-column: 1 / -1; }
.qf__field label {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-dim);
}
.qf__field input, .qf__field select, .qf__field textarea {
  font-family: var(--font-body); font-size: 16px; color: var(--paper);
  background: #fff; border: 1px solid rgba(15,41,72,0.18); border-radius: 8px;
  padding: 12px 14px; width: 100%; box-sizing: border-box;
  transition: border-color 120ms, box-shadow 120ms;
}
.qf__field textarea { resize: vertical; min-height: 84px; }
.qf__field input:focus, .qf__field select:focus, .qf__field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(39,152,40,0.22);
}
.qf__field input.is-invalid { border-color: #C2272D; box-shadow: 0 0 0 3px rgba(194,39,45,0.15); }
.qf__submit { width: 100%; justify-content: center; margin-top: 16px; }
.qf__status { font-family: var(--font-body); font-size: 14px; margin: 10px 0 0; min-height: 1em; color: var(--paper-dim); }
.qf__status.is-error { color: #C2272D; }
.qf__status.is-ok { color: #1E7A1F; font-weight: 600; }
@media (max-width: 520px) { .qf__grid { grid-template-columns: 1fr; } }

.qm { max-width: 560px; }
.qm__foot a { color: var(--accent); font-weight: 600; }

/* Service page form card (the template embedded an iframe here). */
.svc-form--native {
  background: #fff; border: 1px solid var(--surface-divider);
  border-radius: 16px; padding: 28px; box-shadow: var(--shadow-card);
}
.svc-form--native .contact-form-eyebrow {
  font-family: var(--font-display); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent);
}
.svc-form__h {
  font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1.05;
  text-transform: uppercase; color: var(--paper); margin: 6px 0 18px;
}
.contact-embed .qf { margin-top: 8px; }

/* ── Reviews rail on sub-pages ──
   The template's service, area, about and contact pages render the reviews
   rail but only the home page stylesheet carries its heading and card rules,
   so they showed up unstyled. Same rules as the home page. */
.rv-hd { text-align: center; margin-bottom: 48px; }
.rv-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(39,152,40,0.12);
  font-family: var(--font-display); font-weight: 600;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 18px;
}
.rv-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 4vw, 48px); line-height: 1.05;
  text-transform: uppercase; letter-spacing: -0.02em;
  color: var(--paper); margin: 0;
}
.rv-line {
  width: 64px; height: 3px; border-radius: 2px;
  background: var(--accent); margin: 20px auto 0;
}
.rv-stage { position: relative; }
.reviews__btn {
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--surface-panel); border: 1px solid var(--surface-divider);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: var(--paper);
  transition: background 120ms var(--ease-snappy), border-color 120ms, color 120ms;
}
.reviews__btn:hover { background: var(--accent); border-color: var(--accent); color: #0F2948; }
.review:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); }
.review__qmark {
  position: absolute; top: -6px; left: -6px;
  color: var(--accent); opacity: 0.08; pointer-events: none;
}
.review__stars { display: flex; gap: 3px; margin-bottom: 14px; position: relative; z-index: 1; }
.review__body {
  font-family: var(--font-body); font-size: 14px; line-height: 1.75;
  color: var(--paper-dim); margin: 0 0 20px; flex: 1; position: relative; z-index: 1;
}
.review__foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--surface-divider);
  position: relative; z-index: 1;
}
.review__avatar {
  width: 44px; height: 44px; border-radius: 999px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #F4F1EC;
}
.review__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 14px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--paper);
}
.review__meta { font-family: var(--font-body); font-size: 12px; color: var(--paper-faint); margin-top: 2px; }
@media (max-width: 640px) {
  .rv-hd { text-align: left; margin-bottom: 24px; }
  .rv-line { margin-left: 0; }
}