/* Legacy Concrete LLC - service pages
   Page scoped. Loaded only by the four service pages and only after
   styles.css, so every token and shared component comes from there.
   Mobile first. 740px is the site's existing breakpoint. */

/* ----------------------------------------------- header, pinned to solid */

/* .site-header is transparent until script.js adds .is-scrolled, and that same
   class swaps the reversed white logo for the dark one. It works on the home
   page because a dark hero sits behind it. These pages have no hero, so at
   scroll top the white logo and white nav links would be invisible against a
   pale background. Hardcoding .is-scrolled in the markup does not hold either:
   onScroll() runs on load and strips it again below 24px. So the solid state
   is pinned here and the scrolled class becomes a no-op. */
.page-svc .site-header {
  background: rgba(250, 249, 247, .86);
  border-bottom-color: var(--line);
  backdrop-filter: saturate(160%) blur(14px);
}
.page-svc .brand-logo-rev { display: none; }
.page-svc .brand-logo-std { display: block; }
.page-svc .brand-name { color: var(--ink); }
.page-svc .brand-sub { color: var(--slate); }
.page-svc .nav-link,
.page-svc .nav-link:hover,
.page-svc .nav-cta { color: var(--ink); }
.page-svc .nav-cta:hover { color: #FFFFFF; }
.page-svc .burger { border-color: var(--line); }
.page-svc .burger span { background: var(--ink); }

/* ------------------------------------------------------------- utilities */

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------ page shell */

.sv-main {
  /* .site-header is fixed and runs 66-72px tall across the logo's clamp. */
  padding: clamp(96px, 20vw, 132px) 0 clamp(56px, 10vw, 96px);
  background: var(--pale);
}

.sv-sec { margin-top: clamp(38px, 9vw, 60px); }
.sv-sec h2 {
  font-size: clamp(22px, 5.4vw, 30px);
  margin-bottom: 16px;
}

/* ----------------------------------------------------------- page header */

.sv-head { max-width: 62ch; }
.sv-title {
  font-size: clamp(30px, 7.4vw, 50px);
  text-wrap: balance;
}
.sv-lede {
  margin-top: 18px;
  font-size: clamp(17px, 4.3vw, 19px);
  text-wrap: pretty;
}
.sv-lede a { font-weight: 600; }

/* ---------------------------------------------------------- photo strip */

/* Same treatment as the home page gallery items: 4/3, the same radius, the
   same border and placeholder fill. Fluid width, no fixed pixel height, so a
   real photo drops in without touching layout. The ratio is inherited from
   .g-item and should be retuned once real images exist. */
.sv-photos {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(12px, 3vw, 18px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 740px) {
  .sv-photos { grid-template-columns: repeat(3, 1fr); }
}
.sv-photo {
  aspect-ratio: 4 / 3;
  min-height: 170px;
  background: #E9E6E1;
  border: 1px solid var(--line);
  border-radius: 12.75px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow: hidden;
}

/* --------------------------------------------------------- TK placeholder */

/* Deliberately ugly. Every one of these is deleted at go-live, not restyled.
   If one of these ships to production it should be obvious on sight. */
.tk {
  background: var(--accent-tint);
  border: 2px dashed var(--accent);
  border-radius: 10px;
  padding: 13px 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink);
  text-align: left;
}
.sv-photo .tk {
  background: transparent;
  border-color: var(--muted);
  color: var(--slate);
}

/* ------------------------------------------------------ related services */

.sv-related { max-width: 62ch; }
.sv-related-lead { margin-bottom: 14px; }
.sv-related-lead a { font-weight: 600; }
.sv-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sv-links a {
  font-weight: 600;
  font-size: 17px;
}

/* ------------------------------------------------------------- estimate */

.sv-estimate { max-width: 62ch; }