/* ==========================================================================
   Level Headed Construction — services.css
   Page-specific styles for /services.html.

   Layout:
     1. Hero band (full-bleed dark, color/type only, no photo)
     2. Intro band (one paragraph framing the page)
     3. Five alternating service rows (image left/right with copy opposite)
     4. Process band (3-step "How it works" on raised cream panel)
     5. Final CTA band (soft, two buttons)
     6. Footer (minimal — first page on the site to get one)

   Reuses everything from base/components/sections. Only the per-page
   choreography lives here.
   ========================================================================== */

/* Parallax pairing: every direct sibling after the hero sits ABOVE it
   in stacking order so they cover the hero as the page scrolls. The
   hero itself is translated downward at half scroll speed by JS — this
   creates the "hero scrolls slower than the rest" effect, with the
   cream divider being the first thing to glide over the dark band.

   Each sibling gets an explicit cream-soft background so it actually
   covers the hero (the default body bg shows through transparent
   sections by default, which would let the dark hero leak through).
   Sections with their own explicit bg (.section--cream, the divider,
   any dark CTA) override this via more-specific rules.              */
.services-hero ~ * {
  position: relative;
  z-index: 2;
  background-color: var(--cream-soft);
}

/* Honor reduced-motion: skip parallax. The JS bails out for matching
   users; this rule resets any transform that may have been applied
   before the listener attached.                                       */
@media (prefers-reduced-motion: reduce) {
  .services-hero { transform: none !important; }
}

/* ==========================================================================
   1. HERO
   Full-bleed --ink band. Compact (~45vh desktop, ~38vh mobile). Centered
   content stack: eyebrow → thin rust rule → display title → tagline.

   Entrance choreography mirrors the homepage hero's pacing but trimmed —
   no image, no nav, no CTAs to animate. Just the type cascade.
   ========================================================================== */
.services-hero {
  position: relative;
  /* Parallax stacking: hero sits at z:0 and is translated by JS at half
     scroll speed; every sibling after it (cream divider + intro band +
     service rows + cta + footer) gets z:2 below, so they paint OVER
     the hero as they scroll up — the page covers the hero instead of
     scrolling alongside it.                                           */
  z-index: 0;
  will-change: transform;
  /* Vertical gradient from --ink at the top to a warmer medium-brown
     at the bottom. Bridges into the cream content below more naturally
     than a flat dark band, and makes the warm bottom-glow from the
     ::after radial blend in instead of fight against a flat fill.    */
  background: linear-gradient(
    180deg,
    var(--ink) 0%,
    #3D2418 50%,
    #5A3520 100%
  );
  color: var(--cream-soft);
  /* Top padding accounts for the fixed header; bottom is generous so the
     band has air. */
  padding: 140px var(--gutter) 80px;
  min-height: 38vh;
  min-height: 38svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
@media (min-width: 768px) {
  .services-hero {
    padding: 180px var(--gutter) 110px;
    min-height: 45vh;
    min-height: 45svh;
  }
}

/* Subtle warm glow from the bottom-left so the dark band doesn't read as
   completely flat. Pure CSS, GPU-cheap. */
.services-hero::after {
  content: '';
  position: absolute;
  inset: auto -10% -40% -10%;
  height: 60%;
  background: radial-gradient(
    ellipse at 20% 100%,
    rgba(168, 85, 46, 0.22) 0%,
    rgba(168, 85, 46, 0.10) 35%,
    rgba(168, 85, 46, 0)    70%
  );
  pointer-events: none;
}

.services-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  /* Centered stack to match the About hero's identity treatment —
     eyebrow → rule → big stacked title → minimal tagline → scroll cue. */
  text-align: center;
}

/* Pre-state pinned at parse: every animated child starts hidden + offset.
   .is-entering (added on requestAnimationFrame by the inline script in
   services.html) flips them through their keyframes. */
.services-hero__eyebrow,
.services-hero__rule,
.services-hero__title,
.services-hero__tagline,
.services-hero__cue {
  opacity: 0;
}

.services-hero__eyebrow {
  display: inline-block;
  color: var(--cream);
  transform: translateY(8px);
}

/* Thin rust accent — centered now that the hero stack is center-aligned.
   Sweeps in from the center using a horizontal scale. */
.services-hero__rule {
  display: block;
  width: 64px;
  height: 2px;
  background: var(--rusty);
  margin: 16px auto 24px;
  transform: scaleX(0);
  transform-origin: center;
}

.services-hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  /* Match the homepage hero title — same clamp, cream face with the
     5-step ink extrusion + soft cast so all hero titles read as one
     family across the site. */
  font-size: clamp(48px, 11vw, 128px);
  line-height: 0.92;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 22px;
  transform: translateY(16px);
  text-shadow:
    1px 1px 0 var(--ink),
    2px 2px 0 var(--ink),
    3px 3px 0 var(--ink),
    4px 4px 0 var(--ink),
    5px 5px 0 var(--ink),
    7px 9px 12px rgba(0, 0, 0, 0.45);
}
/* Accent words inside the hero title render in plain Oswald — the
   global .title__accent (italic Playfair rust) is reserved for body
   contexts where the contrast carries meaning. */
.services-hero__title .title__accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  color: inherit;
  letter-spacing: inherit;
  font-size: 1em;
  text-transform: inherit;
}

.services-hero__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(15px, 1.55vw, 19px);
  line-height: 1.55;
  color: rgba(251, 248, 241, 0.82);
  max-width: 600px;
  margin: 0 auto;
  transform: translateY(12px);
}

/* Smaller "scroll down" cue under the tagline — same treatment as the
   About hero so the two pages feel like part of the same design system.
   Muted color, smaller scale, slight letter-spacing, downward chevron
   appended via ::after.                                               */
.services-hero__cue {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(12px, 1.05vw, 14px);
  letter-spacing: 0.04em;
  line-height: 1.5;
  color: rgba(251, 248, 241, 0.55);
  max-width: 520px;
  margin: 14px auto 0;
  transform: translateY(12px);
}
.services-hero__cue::after {
  content: " \2193"; /* ↓ */
  display: inline-block;
  margin-left: 6px;
  transform: translateY(1px);
  color: rgba(251, 248, 241, 0.45);
}

/* Entrance — fires when JS adds .is-entering on the next frame. */
.services-hero.is-entering .services-hero__eyebrow {
  animation: svcHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 100ms both;
}
.services-hero.is-entering .services-hero__rule {
  animation: svcHeroSweep 700ms cubic-bezier(0.85, 0, 0.15, 1) 250ms both;
}
.services-hero.is-entering .services-hero__title {
  animation: svcHeroFadeUp 700ms cubic-bezier(0, 0.55, 0.45, 1) 350ms both;
}
.services-hero.is-entering .services-hero__tagline {
  animation: svcHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 700ms both;
}
.services-hero.is-entering .services-hero__cue {
  animation: svcHeroFadeUp 600ms cubic-bezier(0, 0.55, 0.45, 1) 900ms both;
}

@keyframes svcHeroFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes svcHeroSweep {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* ==========================================================================
   2. SERVICES DIVIDER
   Thin cream strip between the hero and the intro band — pure visual
   separator, no content.
   ========================================================================== */
.services-divider {
  height: 18px;
  background: var(--cream);
}

/* ==========================================================================
   3. INTRO BAND
   Tighter top padding so it reads as a continuation of the hero, not
   a fresh section.
   ========================================================================== */
.services-intro {
  padding-top: 64px;
  padding-bottom: 32px;
}
@media (min-width: 768px) {
  .services-intro {
    padding-top: 88px;
    padding-bottom: 40px;
  }
}
/* Section-head margin-bottom is too generous for an intro band that has
   no content beneath it inside the same section — pull it back. */
.services-intro .section-head {
  margin-bottom: 0;
}

/* ==========================================================================
   3. SERVICE ROWS
   Two-column grid on desktop (image | copy), stacks on mobile (image always
   above copy regardless of left/right desktop order). Even-indexed rows
   flip the grid via .service-row--reverse so the image alternates sides.
   ========================================================================== */

/* Tighten the per-row vertical padding — five rows with full section padding
   would read as a long page; we want a tighter rhythm. */
.service-row {
  padding-top: 56px;
  padding-bottom: 56px;
}
@media (min-width: 768px) {
  .service-row {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.service-row__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
@media (min-width: 900px) {
  .service-row__grid {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
  }
}
@media (min-width: 1200px) {
  .service-row__grid {
    gap: 96px;
  }
}

/* Reversed rows flip the column order on desktop. Mobile keeps image first. */
@media (min-width: 900px) {
  .service-row--reverse .service-row__grid {
    direction: rtl;
  }
  .service-row--reverse .service-row__grid > * {
    direction: ltr;
  }
}

/* ---- Media column ---- */
.service-row__media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(42, 27, 16, 0.08),
    0 16px 40px rgba(42, 27, 16, 0.12);
  /* 3:2 aspect on the photo container so layout is stable before the image
     loads (no CLS) and so all five rows feel uniform. */
  aspect-ratio: 3 / 2;
}
.service-row__media picture,
.service-row__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Per-row aspect-ratio overrides — for rows whose source photos are
   served uncropped (per client direction), match the container's
   aspect-ratio to the image's natural ratio so object-fit: cover has
   no work to do and no horizontal trim happens. Slight height deltas
   between rows are acceptable in exchange for preserving the source. */
#remodels-interior .service-row__media {
  aspect-ratio: 1500 / 934;
}
#openings-framing .service-row__media {
  aspect-ratio: 1500 / 1108;
}
#electrical-plumbing .service-row__media {
  aspect-ratio: 1500 / 1125;
}

/* ---- Copy column ---- */
.service-row__copy {
  /* Constrain the reading width so paragraphs don't get too wide on
     ultra-wide screens. */
  max-width: 540px;
}

.service-row__index {
  display: block;
  margin-bottom: 14px;
  /* Slightly muted vs. default eyebrow rusty — the row's heading is the
     star of the row, not the index. */
  color: rgba(158, 60, 14, 0.85);
}

.service-row__copy h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 20px;
}

.service-row__copy p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 24px;
  max-width: 520px;
}

/* "What this covers" mini-label above the list */
.service-row__list-label {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  color: var(--neutral-500) !important;
  margin: 0 0 12px !important;
}

/* Tag-style bullet list — pill chips that read as services rather than
   a long bulleted prose list. */
.service-row__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-row__list li {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--ink);
  padding: 8px 14px;
  background: var(--cream);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(42, 27, 16, 0.08);
  white-space: nowrap;
}

/* ==========================================================================
   3b. ONE-STOP SHOP BAND
   Dark statement section between the service rows and the process band.
   Reuses the global .section--ink variant (dark bg, cream-soft text) and
   layers a 3-up check list + closer line on top. The parallax-pairing
   rule at the top of this file forces every hero sibling to cream-soft —
   we override its background-color here so the dark band actually paints
   dark.
   ========================================================================== */

/* Win the cascade against .services-hero ~ * { background-color: cream-soft }
   set above. Specificity (0,2,0) > (0,1,0). */
.services-hero ~ .services-one-stop {
  background-color: var(--ink);
}

.services-one-stop {
  position: relative;
  overflow: hidden;
  /* Full-bleed: drop the panel radius/shadow so the section reads as a
     horizontal band (like the hero) rather than a floating card. */
  border-radius: 0;
  box-shadow: none;
  padding-top: 88px;
  padding-bottom: 88px;
}
@media (min-width: 768px) {
  .services-one-stop {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* Soft warm radial glow in the bottom-right — same warm-corner treatment
   as the hero so the two dark bands on the page share a visual language. */
.services-one-stop::after {
  content: '';
  position: absolute;
  inset: auto -10% -30% -10%;
  height: 60%;
  background: radial-gradient(
    ellipse at 80% 100%,
    rgba(168, 85, 46, 0.22) 0%,
    rgba(168, 85, 46, 0.10) 35%,
    rgba(168, 85, 46, 0)    70%
  );
  pointer-events: none;
}

/* ---- Head ---- */
.services-one-stop__head {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto 56px;
}
@media (min-width: 768px) {
  .services-one-stop__head {
    margin-bottom: 80px;
  }
}
.services-one-stop__head .eyebrow {
  display: block;
  margin-bottom: 14px;
}
.services-one-stop__head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--cream);
  margin: 0 0 22px;
}
/* Match the hero-title behavior — .title__accent renders in Oswald rust
   instead of italic Playfair so the band feels like a continuation of
   the hero typography. */
.services-one-stop__head h2 .title__accent {
  font-family: inherit;
  font-style: normal;
  font-weight: inherit;
  letter-spacing: inherit;
  font-size: 1em;
  text-transform: inherit;
  color: var(--rusty);
}
.services-one-stop__lede {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.55vw, 19px);
  line-height: 1.6;
  color: rgba(251, 248, 241, 0.82);
  margin: 0 auto;
  max-width: 600px;
}

/* ---- Three-up check list ---- */
.services-one-stop__list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1080px;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .services-one-stop__list {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}
@media (min-width: 1100px) {
  .services-one-stop__list {
    gap: 56px;
  }
}

.services-one-stop__item {
  position: relative;
  /* Mobile: icon left of text. Desktop: icon stacks above text. */
  padding-left: 56px;
  min-height: 40px;
}
@media (min-width: 768px) {
  .services-one-stop__item {
    padding-left: 0;
    padding-top: 56px;
    text-align: left;
  }
}

/* Circular check badge — rust-tinted ring with rust glyph. */
.services-one-stop__check {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--rusty);
  background: rgba(158, 60, 14, 0.14);
  border: 1.5px solid rgba(158, 60, 14, 0.55);
  border-radius: 50%;
}
.services-one-stop__check svg {
  width: 22px;
  height: 22px;
  display: block;
}
@media (min-width: 768px) {
  .services-one-stop__check {
    width: 48px;
    height: 48px;
  }
  .services-one-stop__check svg {
    width: 26px;
    height: 26px;
  }
}

.services-one-stop__item h3 {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(18px, 1.9vw, 22px) !important;
  line-height: 1.2 !important;
  letter-spacing: 0.005em !important;
  text-transform: uppercase;
  color: var(--cream) !important;
  margin: 0 0 10px !important;
}
.services-one-stop__item p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(251, 248, 241, 0.78);
  margin: 0;
  max-width: none;
}

/* ---- Closer line ---- */
.services-one-stop__close {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--cream-soft) !important;
  margin: 56px auto 0;
  max-width: 720px;
}
@media (min-width: 768px) {
  .services-one-stop__close {
    margin-top: 80px;
  }
}
.services-one-stop__close-accent {
  color: var(--rusty);
}

/* Stagger the three check items on reveal — uses --i set inline. */
.services-one-stop__item.reveal {
  transition-delay: calc(var(--i, 0) * 120ms);
}

/* ==========================================================================
   4. PROCESS BAND (cream raised panel, 3 steps)
   Horizontal on desktop, stacks on mobile. Big numeric markers, short copy.
   ========================================================================== */
.services-process {
  /* Pull a hair tighter than default --section pad — the band sits between
     two soft sections and we don't want it dominating the page. */
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (min-width: 768px) {
  .services-process {
    padding-top: 112px;
    padding-bottom: 112px;
  }
}

.process {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .process {
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
  }
}

.process__step {
  position: relative;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}

.process__num {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--rusty);
  margin-bottom: 14px;
}

.process__title {
  font-family: var(--font-display) !important;
  font-weight: 700 !important;
  font-size: clamp(22px, 2.4vw, 28px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ink) !important;
  margin: 0 0 12px !important;
}

.process__step p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  max-width: none;
}

/* ==========================================================================
   5. FINAL CTA BAND
   Centered, single message + two buttons. Quiet — no rust band, no shouting.
   ========================================================================== */
.services-cta {
  padding-top: 88px;
  padding-bottom: 120px;
}
@media (min-width: 768px) {
  .services-cta {
    padding-top: 120px;
    padding-bottom: 160px;
  }
}

.services-cta__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.services-cta__inner .eyebrow {
  display: block;
  margin-bottom: 12px;
}
.services-cta__inner h2 {
  margin: 0 0 12px;
  font-size: clamp(28px, 3.6vw, 40px);
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.services-cta__inner p {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0 auto 28px;
  max-width: 460px;
}

.services-cta__buttons {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ==========================================================================
   6. FOOTER
   Inner-page footer uses the homepage's full layout (defined in
   sections.css) but recolored to the dark --ink band the inner pages
   already used. The override is just the background; everything
   else inherits cleanly because the homepage footer was already
   designed for cream-on-dark.
   ========================================================================== */
.site-footer {
  background: var(--ink);
}

/* ==========================================================================
   REDUCED MOTION
   Flatten every entrance animation. Hero shows finished state immediately.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .services-hero__eyebrow,
  .services-hero__rule,
  .services-hero__title,
  .services-hero__tagline {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}