/* ==========================================================================
   Services Page — Editorial luxury with varied rhythm
   ========================================================================== */

/* The masthead paints its own clearance under the fixed header. The nav is
   opaque white and sits above the band, so the page top reads: white bar,
   hairline, warm band, hairline, white content.
   Same pattern and same specificity as the team page: (0,2,1) matches the base
   rule in layout/header.css, and page sheets load after main.css, so this wins
   on source order. */
body .main-content:has(.services-masthead) {
  padding-top: 0;
  padding-bottom: 0;
}

/* ==========================================================================
   MASTHEAD — the title and the statement are one band

   This replaced two separate sections: a huge left-aligned H1 on stark white,
   then ~200px of nothing, then a second Playfair headline of nearly the same
   size, centred. Two titles competing on an empty field with no grid holding
   either of them. Type floating on white is not minimalism, it is an unstyled
   document. What was missing was structure, not ornament.

   Three things supply it here, none of them decorative:

   1. A ground. `--warm-white` is the brand's own page tone (it is what `body`
      is painted with), so the band reads as the page showing through while the
      content below sits on `--white` panels. Subtle on purpose: the hairline
      does the dividing, the tone only has to define the zone.
   2. A repeated grid. Both rows use the same asymmetric 7/5 split, so the
      columns line up down the band. Repetition is what makes a layout read as
      designed rather than arbitrary.
   3. First-baseline alignment (`align-items: baseline`). The subtitle sits on
      the title's first baseline instead of floating mid-column, which ties the
      two together typographically with no magic numbers.

   And no eyebrow above either row. A small wide-tracked label stacked on top of
   every heading is the most recognisable tell of a generated page; both headings
   say what they are without one.

   Home owns the only photographic hero; Team opens white and centred; this
   opens warm, left, and at masthead scale (DESIGN.md §1.3).
   ========================================================================== */
.services-masthead {
  background: var(--warm-white);
  color: var(--navy);
  border-bottom: 1px solid var(--border);
  /* Top padding clears the fixed header; the rest is rhythm. */
  padding: calc(var(--header-height) + var(--space-10)) 0 var(--space-10);
}

@media (min-width: 768px) {
  .services-masthead {
    padding: calc(var(--header-height) + var(--space-12)) 0 var(--space-12);
  }
}

@media (min-width: 1024px) {
  .services-masthead {
    padding: calc(var(--header-height) + var(--space-16)) 0 var(--space-16);
  }
}

.services-masthead-row {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-5);
}

@media (min-width: 1024px) {
  .services-masthead-row {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-16);
    align-items: baseline;
  }
}

.services-masthead-title {
  font-size: var(--font-size-display-lg);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--navy);
  /* Forces the two-word Spanish title onto two lines, which is the shape the
     composition is built around. English fits on one and that is fine. */
  max-width: 12ch;
  margin: 0;
}

.services-masthead-sub {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  max-width: 38ch;
  line-height: 1.6;
  margin: 0;
}

/* Lead row: subtitle sits under the title in the copy cell, and the 5fr cell
   holds the photograph. The photograph stretches the row instead of hanging
   from a baseline, so the lead row opts out of the baseline alignment the
   statement row keeps. */
.services-masthead-copy .services-masthead-sub {
  margin-top: var(--space-5);
}

.services-masthead-figure {
  margin: 0;
  overflow: hidden;
  background: var(--gray-100);
}

.services-masthead-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}

@media (min-width: 1024px) {
  .services-masthead-row--lead { align-items: stretch; }
  .services-masthead-copy { align-self: center; }
  .services-masthead-figure img { aspect-ratio: auto; min-height: 320px; }
}

/* ==========================================================================
   SERVICE ROWS — numbered, hairline-separated

   Replaces a 4-up grid of grey bordered boxes with line-art icons. Three
   problems went with it: the boxes read as a stock feature grid, the copy
   lengths differ so the bottom edge came out ragged, and only three of the four
   have a link so the row never balanced.

   Rows fix all three. Every row is the same shape whatever the copy length, the
   numerals carry the ordering that the icons were failing to, and a missing link
   just leaves space instead of breaking a grid cell.

   Numerals come from a CSS counter, so nothing had to be added to the template
   or the view model. They are generated content, which also means a screen
   reader does not announce them: correct, since they are ordinals, not copy.
   ========================================================================== */
/* Top padding comes from the masthead's own bottom padding plus its hairline,
   so this only owns the space below. It used to run space-20/24 here against
   the feature section's space-20/24 above, which left ~190px of empty white and
   made the new-construction block look like it was floating unattached. */
.services-rows-section {
  padding: var(--space-16) 0 var(--space-12);
  background: var(--white);
}

@media (min-width: 1024px) {
  .services-rows-section { padding: var(--space-20) 0 var(--space-16); }
}

.services-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: service;
  border-top: 1px solid var(--border);
}

.service-row {
  counter-increment: service;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-8) 0 var(--space-8) var(--space-12);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition-base);
}

.service-row::before {
  content: counter(service, decimal-leading-zero);
  position: absolute;
  top: var(--space-8);
  left: 0;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  color: var(--cobalt);
  line-height: 1.5;
}

/* Desktop: copy on the left, link parked on the right, baselines aligned. */
@media (min-width: 900px) {
  .service-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-10);
    padding-left: var(--space-16);
  }
}

.service-row-title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 var(--space-2);
}

.service-row-text {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.65;
  max-width: 62ch;
  margin: 0;
}

.service-row-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--navy);
  white-space: nowrap;
  transition: gap var(--transition-base), color var(--transition-fast);
}

.service-row-link svg { width: 12px; height: 12px; }

/* The arrow travelling is the whole hover. No lift, no shadow, no fill. */
.service-row-link:hover { gap: var(--space-3); color: var(--cobalt); }

@media (min-width: 900px) {
  .service-row-link { padding-top: 0.5em; }
}

/* ==========================================================================
   NEW CONSTRUCTION — a claim, a way in, and four stages drawn as a sequence

   White, not navy: the renders read better over white.

   History worth keeping, because two of these were real bugs. The copy block
   once carried `.container` (so `margin: 0 auto`) while overriding its width down
   to 62ch, which parked a narrow column dead-centre under container-width
   images. Then the four stages rendered as a vertical hairline list, the same
   shape as the numbered service rows directly above them. Then they became a
   ruled four-column table, which was right about the axis and wrong about the
   content: these are not four parallel specs, they are four stages in order.

   So they are drawn as a sequence now, and the section is stripped to what
   earns its place. The eyebrow is gone and so is the paragraph that restated
   the four stages in prose immediately above them.
   ========================================================================== */
.services-feature {
  background: var(--white);
  color: var(--navy);
  padding: var(--space-12) 0 0;
}

@media (min-width: 1024px) {
  .services-feature { padding: var(--space-16) 0 0; }
}

/* Two-column composition mirroring the masthead: claim + CTA left, step flow
   right, collage below. One skeleton for the whole page. */
.services-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: var(--space-10);
}

@media (min-width: 1024px) {
  .services-feature-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--space-16);
    align-items: center;
  }
}

.services-feature-title {
  font-size: var(--font-size-display-sm);
  font-weight: 400;
  line-height: 1.08;
  color: var(--navy);
  letter-spacing: -0.02em;
  max-width: 20ch;
  margin: 0 0 var(--space-8);
}

/* The section's single cobalt element, and its focal point. It sits under the
   title because that is the order of the thought: what we do, then how to see
   it. */
.services-feature-cta {
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .services-feature-title { margin-bottom: var(--space-10); }
}

/* --- Step flow ----------------------------------------------------------
   The same four approved strings, drawn as the process they describe: a
   vertical rail of nodes joined by a thin line, label beside each node. All
   of it is CSS pseudo-elements on the <ol>/<li>, so the markup stays a plain
   ordered list.

   Why a rail and not arrows or numbers: the arrow-per-step version left the
   first step bare (it read as a missing arrow, i.e. a bug), and the page
   already has one numbered list in the 01-04 service rows; repeating either
   device made the section read as more text. Nodes on a line read as one
   drawing.

   Geometry: each li is a two-column grid (rail cell, label). The node ring
   centres on the label's first text line; the connecting segment fills the
   rest of the rail cell, stopping 6px short of each node on both sides so
   the ring breathes. Spacing between steps lives as padding on the label,
   which stretches the row and therefore the segment with it, so a label that
   wraps to two lines never breaks the rail.

   The rail is grey and the nodes navy: connective tissue stays quiet, and
   the section's one cobalt element stays the CTA. */
.services-steps {
  --step-node: 12px;
  --step-ring: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.services-step {
  display: grid;
  grid-template-columns: var(--step-node) minmax(0, 1fr);
  column-gap: var(--space-4);
  font-size: var(--font-size-base);
  line-height: 1.5;
  --step-line: calc(1.5 * var(--font-size-base));
}

/* Node: an open ring, filled with the section's white so the rail never
   shows through it. */
.services-step::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: var(--step-node);
  height: var(--step-node);
  border-radius: 50%;
  border: var(--step-ring) solid var(--navy);
  background: var(--white);
  margin-top: calc(var(--step-line) / 2 - var(--step-node) / 2);
}

/* Connecting segment: same grid cell as the node, stretched to the row's
   full height. It starts 6px below the node; the matching 6px gap above the
   next node falls out of the next li's own node offset, so the clearance is
   symmetric without touching the neighbour. */
.services-step:not(:last-child)::after {
  content: "";
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  align-self: stretch;
  width: 1px;
  background: var(--gray-300);
  margin-top: calc(var(--step-line) / 2 + var(--step-node) / 2 + 6px);
}

.services-step-label {
  grid-column: 2;
  grid-row: 1;
  font-weight: 500;
  color: var(--navy);
  padding-bottom: var(--space-6);
}

.services-step:last-child .services-step-label {
  padding-bottom: 0;
}

/* --- The plate set ------------------------------------------------------
   Mobile is the default: a horizontal scroll-snap strip. Native, no
   JavaScript, and at 82% width the next plate peeks past the edge so it reads
   as scrollable without a visible scrollbar. Most traffic arrives on a phone
   from a shared link, so this is the case that gets designed first.
*/
.services-plates {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Aligns the first plate's left edge with the copy above it. */
  padding: 0 var(--space-4) var(--space-2);
  margin-top: var(--space-10);
}

.services-plates::-webkit-scrollbar { display: none; }

.services-plate {
  flex: 0 0 82%;
  scroll-snap-align: center;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  /* Holds the box while a lazy image resolves, so the strip never reflows. */
  background: var(--gray-100);
}

.services-plate img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* Biased up: in every render the architecture sits above the midline and the
     lower third is lawn or driveway. */
  object-position: center 42%;
}

/* The aerial is composed around its centre, unlike the three elevations. */
.services-plate:nth-child(4) img { object-position: center 50%; }

/* Desktop: a full-bleed offset mosaic on a 12-column grid. The wide plate takes
   7 columns and swaps sides between the two rows, which is what makes the block
   read as composed rather than as a gallery, and being full bleed is what stops
   it reading as a small centred island.

   Nothing is wider than ~58vw on purpose. The source renders top out at ~1600px
   (see scripts/build-plates.sh), so a 100vw plate would ask a retina laptop for
   2880px and get 1600. The 1800px cap is the same constraint at the other end.
   Row height is a clamp rather than an aspect-ratio so both rows stay flush.
*/
@media (min-width: 768px) {
  .services-plates {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: clamp(200px, 30vw, 480px);
    gap: var(--space-1);
    overflow: visible;
    scroll-snap-type: none;
    max-width: 1800px;
    margin: var(--space-12) auto 0;
    padding: 0;
  }

  .services-plate {
    flex: initial;
    aspect-ratio: auto;
  }

  .services-plate:nth-child(1) { grid-column: 1 / 8;  grid-row: 1; }
  .services-plate:nth-child(2) { grid-column: 8 / 13; grid-row: 1; }
  .services-plate:nth-child(3) { grid-column: 1 / 6;  grid-row: 2; }
  .services-plate:nth-child(4) { grid-column: 6 / 13; grid-row: 2; }
}

/* ==========================================================================
   FINAL CTA — dark
   ========================================================================== */
.services-final-cta {
  padding: var(--space-24) 0;
  text-align: center;
  background: var(--navy);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.services-final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(43, 94, 212, 0.12), transparent 60%);
  pointer-events: none;
}

.services-final-cta > .container { position: relative; }

.services-final-cta-title {
  font-size: var(--font-size-display-sm);
  font-weight: 400;
  line-height: 1.1;
  color: var(--white);
  margin: var(--space-2) 0 var(--space-4);
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}

.services-final-cta-body {
  font-size: var(--font-size-lg);
  color: rgba(255, 255, 255, 0.78);
  max-width: 50ch;
  margin: 0 auto var(--space-8);
  line-height: 1.55;
}

.services-final-cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ==========================================================================
   SHARED — eyebrow + stats + why-us
   (Home page defines these too; both pages load their own stylesheet so
   re-declaring keeps services self-contained.)
   ========================================================================== */



/* Stats strip */
.stats-strip {
  --stats-bg: var(--gray-50);
  --stats-border: var(--border);
  --stats-label-color: var(--gray-600);
}

/* Why us */
.why-us {
  padding: var(--space-24) 0;
  background: var(--white);
}
@media (min-width: 1024px) { .why-us { padding: var(--space-32) 0; } }

.why-us-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-16);
}
.why-heading {
  font-size: var(--font-size-display-sm);
  font-weight: 400;
  line-height: 1.1;
  color: var(--navy);
  margin: var(--space-4) 0 var(--space-5);
}
.why-intro {
  font-size: var(--font-size-lg);
  color: var(--gray-600);
  line-height: 1.6;
}
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10) var(--space-8);
  max-width: 1100px;
  margin: 0 auto;
}
@media (min-width: 640px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
  .why-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-12) var(--space-8); }
}
.why-item { text-align: left; }
.why-icon { width: 48px; height: 48px; color: var(--navy); margin-bottom: var(--space-5); }
.why-icon svg { width: 100%; height: 100%; }
.why-item-title {
  font-family: var(--font-body);
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 var(--space-3);
}
.why-item-body {
  font-size: var(--font-size-base);
  color: var(--gray-600);
  line-height: 1.6;
  margin: 0;
}

/* Nothing page-specific left to quiet under reduced motion: the header has no
   entrance animation, the plates do not move, and `.reveal` is handled centrally
   in components/reveal.css. */