/* =========================================================================
   SKIN: C2 Contracting
   The skeleton is site.css and it is identical to the template. Everything
   that makes this site look like itself lives here and loads after site.css.
   Colours are tokens (tokens.css); this file carries shape, decoration and
   the brand's one motif: the poured edge. A square, straight-cut geometry
   with a single hairline of the lighter blue wherever dark meets light, the
   way a control joint reads on a fresh slab. Keep it about styling. A rule
   that fixes a bug belongs in site.css and in the template, never here.
   ========================================================================= */

/* ---- Shape: squarer than the pool templates. Concrete is not round. ---- */
:root {
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 10px;
}

/* ---- Header: navy top bar so the header reads as two bands --------------- */
.topbar { background: var(--brand-ink); color: rgba(255, 255, 255, 0.86); }
.topbar__item svg { color: var(--brand-accent); }

/* ---- The client's real logo is a raster, not the template's text SVG ----- */
.brand__img { display: block; height: 44px; width: auto; }
.footer__logo { height: 56px; width: auto; }
@media (max-width: 599px) { .brand__img { height: 38px; } }

/* ---- Eyebrows: a short bar in the lighter blue, square ended ------------- */
.eyebrow::before {
  width: 22px; height: 3px; border-radius: 0;
  background: var(--brand-accent);
}

/* ---- Cards: navy hairline, lighter blue on hover ------------------------- */
.card { border-color: rgba(var(--brand-primary-rgb), 0.14); }
a.card:hover, .card--hover:hover { border-color: rgba(var(--brand-accent-rgb), 0.85); }

/* ---- Buttons: a little depth on the primary ------------------------------ */
.btn--primary { background: linear-gradient(180deg, var(--brand-primary) 0%, var(--brand-primary-dk) 100%); }
.btn--primary:hover { background: var(--brand-primary-dk); }

/* ---- The control joint: a thin light-blue rule where dark meets light ---- */
.pagehead { border-bottom: 3px solid var(--brand-accent); }
.footer { border-top: 3px solid var(--brand-accent); }

/* ---- Phone: the hero gets the photo card back ----------------------------
   site.css hides .hero__media on the image hero, which is right on a
   desktop where the photo is already the whole background. On a phone the
   scrim is heavier and the hero read as a column of text with a picture
   behind it, so the card comes back between the stats and the form. Same
   image, already cached as the background, so no extra request.
   ------------------------------------------------------------------------ */
@media (max-width: 899px) {
  body.hero--image .hero__media {
    display: block; margin: 0 0 1.5rem;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), var(--shadow-lg);
  }
  body.hero--image .hero__aside { padding-top: 0; }
}

/* ---- Home hero: a straight poured edge into the first section, not a wave */
body.hero--image .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
  pointer-events: none; background: var(--brand-accent);
}
body.hero--image .hero h1 { text-shadow: 0 2px 24px rgba(var(--brand-ink-rgb), 0.5); }

/* ---- Steps: light blue markers ------------------------------------------- */
.step::before { background: var(--brand-accent); }

/* ---- Mobile bar: navy with light blue icons ------------------------------ */
.ctabar { background: var(--brand-ink); border-top-color: rgba(255, 255, 255, 0.12); }
.ctabar__btn { color: rgba(255, 255, 255, 0.90); border-right-color: rgba(255, 255, 255, 0.10); }
.ctabar__btn svg { color: var(--brand-accent); }
.ctabar__btn:active { background: rgba(255, 255, 255, 0.08); }
.ctabar__btn--call { background: var(--brand-primary); color: var(--brand-white); }
.ctabar__btn--call svg { color: var(--brand-white); }

/* ---- Select chevron in this brand's ink (a data URI cannot read a token) - */
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A1F3D' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---- No stranded cards: every group ends flush, in pairs, or all on one line
   The skeleton's auto-fit grids pick three columns in a mid band and strand
   one item (the trust bar at 600px, the about stats at 600 to 700, the footer
   at 720 to 999). A group only uses a column count its item count divides by:
   four-item groups go 2 / 4, never 3. Same ladder breakpoint as .grid--quad
   so every four-up on the page changes shape at the same width.
   ------------------------------------------------------------------------ */
.trustbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1040px) {
  .trustbar { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Footer: the skeleton goes 1 / 3 / 4. The 3 band strands the contact column. */
@media (min-width: 720px) and (max-width: 999px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr; }
}

/* ---- Agency credit, centred under the footer bar (2026-10-02) ------------
   Own divider and real spacing so it reads as separate from the legal line.
   Dimmed by opacity, never by a near-invisible colour; full strength on hover. */
.footer__credit {
  position: relative; z-index: 1;
  border-top: 1px solid var(--line-on-dark);
  padding-block: 1rem 1.25rem;
  text-align: center; font-size: 0.78rem;
}
.footer__credit p { margin: 0; opacity: 0.7; transition: opacity 0.18s var(--ease); }
.footer__credit p:hover, .footer__credit p:focus-within { opacity: 1; }
.footer__credit a { font-weight: 600; color: inherit; transition: color 0.18s var(--ease); }
.footer__credit a:hover, .footer__credit a:focus-visible { color: var(--brand-accent-lt); }

/* ---- Hero headline set for an eleven-word sentence (user, 2026-10-02) -----
   The skeleton's hero numbers (up to 101px, -4.6px tracking, 0.94 leading,
   weight 500) are tuned for a seven-word line. The keyword headline is
   eleven words, so at those numbers it broke into five or six ragged lines
   and the tight tracking ran letters together. Smaller ceiling so it sets in
   three or four lines, heavier weight, tracking proportional to size, and
   leading that keeps ascenders and descenders apart. */
:root {
  --fs-hero: clamp(2.4rem, 1.6rem + 3.2vw, 4.4rem);   /* fallback without container units */
  --fw-hero: 600;
  --ls-hero: -0.022em;
  --lh-hero: 1.04;
}
/* Above phone width the headline is sized to its own column, not the window.
   The copy column is 480 to 800px depending on the layout, and a size taken
   from the window put "repair and replacement" a few pixels past it, which
   is what broke the sentence into ragged four and five line stacks. At 10cqi
   it sets as three even lines: Concrete driveway / repair and replacement /
   in Orlando, built to last. */
@media (min-width: 708px) {
  body.hero--image .hero__copy { container-type: inline-size; }
  body.hero--image .hero h1 { font-size: clamp(2.6rem, 10cqi, 4.4rem); }
}

/* ---- Phone: a bigger hero headline (user, 2026-10-02) --------------------
   The skeleton's hero size bottoms out at 2.4rem (38px) on a phone. The
   headline carries the search phrase and is the first thing read, so on
   phones it scales with the screen to about 48px. */
@media (max-width: 707px) {   /* 707: where the skeleton's 7vw reaches 3.1rem, so the size never dips */
  :root { --fs-hero: clamp(2.4rem, 12.4vw, 3.1rem); }
}

/* ---- Footer legal row: one baseline (2026-10-02) ---------------------------
   site.css spaces stacked footer lists with `.footer li + li { margin-top }`.
   The legal row is horizontal, so that margin dropped every link after the
   first below "Privacy Policy". Cancel it on the row only. */
.footer__bar li + li { margin-top: 0; }
.footer__bar ul { align-items: baseline; }