/* Hero LAYOUT now lives in site.css (.hero). Removed 15 Aug — five parallel copies had
   drifted apart and every fix had to be made five times. This file keeps type/colour only. */
/* =============================================================================
   /services/ — page-unique sections only.
   Everything shared (container, band, btn, arrowlink, t-display-*, t-script,
   eyebrow-rule, marquee, header, footer, card) comes from site.css and is used
   here under its EXISTING class names. Nothing shared is re-skinned below.

   Measured source: design/Services/mockup.png (3204 wide = @2x, halve).
   Full geometry + evidence: notes/spec-services.md.

   NOTE ON THE SIX BANDS: between CSS y1185 and y5201 the mockup contains six
   flat colour bands with ZERO content (spec §1 — verified with a zero-tolerance
   pixel scan). Their heights are the only measured fact about them, so this
   stylesheet sets each band's vertical padding to land on the measured height
   with the real copy from notes/content/services.md inside (spec §9.2 mapping).
   ========================================================================== */

.page-services {
  /* bands 2 and 5 are a second, slightly darker cream — measured #F2EFEA vs the
     page's #F7F4EF. Page-local because no other spec has met it yet; see the
     shared-library request in the build report. */
  --cream-alt: #F2EFEA;
}

/* --- shared page primitives ------------------------------------------------
   Body measure on this page is 544 px (spec §2: the 1168 content box is two
   544 px columns with an 80 px gap; the longest hero line ends at x760 = 217+543).
   Inter-paragraph advance measured 42–43 px against a 27 px line-height, i.e.
   a 16 px paragraph gap, not site.css's default 27. */
.services-prose p { margin: 0 0 16px; }
.services-prose p:last-child { margin-bottom: 0; }

/* Body tracking +.01em — notes/typography.md gives Jost 300 @14px with tracking
   +0.0135em ≈ 0, and on this page the +.01em end of that range is exact. All ten
   hero body lines, ink width build vs mockup:
     at 0      526.6/532.9/253.4 · 427.2 · 528.9/541.2/246.6 · 488.6/517.6/110.4
     at .01em  539.3/523.5/281.3 · 437.3 · 541.5/528.1/279.4 · 500.5/530.7/112.8
     mockup    541.5/525.0/281.5 · 437.0 · 543.0/528.5/279.0 · 501.5/531.0/112.0
   At 0 the wrap points on p1L3 and p3L3 are wrong by 28 and 32 px; at .01em every
   line breaks on the mockup's word and the worst residual is 2.2 px. Page-local
   because it belongs in site.css `body` — see the shared-library request. */
.services-prose,
.services-lead,
.services-list,
.services-closing,
.services-faq__a { letter-spacing: .01em; }

/* two-column section grid — the page's own measured sub-grid, 544 + 80 + 544 */
.services-split {
  display: grid;
  /* Even split as a ratio rather than 544+544 fixed, so the pair fills the 1488 content
     column instead of stopping at the comp's 1168. (Pete, 15 Aug.) */
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* section closing couplet — the copy's own two-line pay-off lines */
.services-closing {
  margin: 32px 0 0;
  font-size: 20px;
  line-height: 31px;
  color: var(--brown);
}
.band--burgundy .services-closing,
.band--brown    .services-closing { color: var(--tan); }

/* section lead line under a centred section heading */
.services-lead { margin: 0; max-width: 544px; }

/* the hero + reserve CTA rows: button then arrow link, measured 16.5 px apart */
.services-ctarow { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }

/* Underline offset. Mockup: label ink 1015→1024, rule 1041.5→1043 — the rule sits
   18 px under the baseline, not the 5 px that shared .arrowlink ships (which put it
   at y1030). Padding is asymmetric because the row is `align-items:center` against
   the 43 px button, so growing only the bottom re-centres the label upward:
     h = 12.4 + 13.2 + 15.4 + 1 = 42  ->  box top 1000 + (43−42)/2 = 1000.5
     label ink top 1000.5 + 12.4 + 2.1 = 1015.0   rule top 1000.5 + 41 = 1041.5
   Row height stays max(43, 42) = 43, so the CTA band geometry is unchanged. */
.services-ctarow .arrowlink { padding: 12.4px 0 15.4px; }

/* Measured hero button box is 183 x 43 with 32.5 px side padding — a larger
   size of the SAME shared .btn (fill, radius 0, 11 px caps label all inherited).
   The nav's .btn stays at its measured 163 x 36. */
.services-btn--lg { min-height: 43px; padding: 0 30px; letter-spacing: .18em; }

/* light variant of the shared .eyebrow-rule for the two dark bands */
.services-rule--light { background: var(--tan); }

/* ------------------------------------------------------------------- hero ---
   Spec §5.2 — band y112 → 1138.5 (1026.5 tall), bg #F7F4EF.
   Right-hand 544 px column of the grid is EMPTY in the mockup (no photo asset
   was exported for this page), so the hero ships one column. */
/* Vertical solve, all against the mockup's ink rows (x216–800, y100–1200):
     script ink top 197.5 · h1 L5 ink top 547.5 · body p1L1 ink top 651.5 ·
     button box 1000→1043 · band bottom 1138.5.
   84.5 + 39 + 16.5 + 360 + 33.5 + 318 + 36.5 + 43 + 95.5 = 1026.5 = 1138.5−112. */

/* script eyebrow — ink 298 x 34.5 at y197.5, baseline ~223.5 */
.services-hero__script { margin: 0 0 16.5px; }

/* H1: the shared .t-display-l — 68px/72px, the measured inner-page h1 in
   notes/typography.md (Young Serif cap 0.7727em; measured cap 51.5–52 -> 67.3).
   Baseline pitch 72 confirmed on the mockup (72/72/73/72, four samples).
   Tracking: .t-display-l ships -.02em, which renders the five measured lines
   1.4 % NARROW (337.4/289.7/405.0/323.6/108.9 vs 341.5/295.5/415.0/328.5/110.0).
   At -.01em they come back 343.5/294.4/412.5/330.4/110.2 — max residual 2.5 px
   on a 415 px line. Page-local, measured; see the shared-library request. */
/* Matched to the Home/Films hero tier (Pete, 15 Aug: "h1 fontsize is wrong"). .t-display-l caps
   at 68px, an inner-page step; the other heroes run to 80. */
.services-hero__title { letter-spacing: -.01em; margin: 0 0 33.5px; font-size: clamp(38px, 5vw, 80px); line-height: 1.0625; }

/* body block: 4 paragraphs, first ink top 651.5, last 940.5 */
.services-hero__body { margin: 0 0 36.5px; }

/* ---------------------------------------------------------- the six bands ---
   Heights below are the measured band heights from spec §1. */
.services-band--alt { background: var(--cream-alt); }

/* band 1 — 623.5 tall, #F7F4EF */
.services-band--1 { padding: 92.25px 0 92.25px; }

/* band 2 — 1055.5 tall, #F2EFEA — /services#wedding lands here */
.services-band--2 { padding: 147px 0 147.5px; scroll-margin-top: 24px; }
.services-band--2 .services-sectionhead { margin-bottom: 84px; }
.services-band--2 .services-grid { row-gap: 72px; }

/* band 3 — 631.5 tall, #5B0D1A (= assets/Services.svg, a flat rect) */
.services-band--3 { padding: 93.5px 0 93px; }
.services-band--3 .services-list li { margin-bottom: 16px; }

/* band 4 — 517.0 tall, #F7F4EF */
.services-band--4 { padding: 126px 0 127px; }

/* band 5 — 583.5 tall, #F2EFEA */
.services-band--5 { padding: 68px 0 67.5px; }
.services-band--5 .services-grid { row-gap: 72px; }

/* band 6 — 605.3 tall, #2E2118 (= assets/Services_2.svg) */
.services-band--6 { padding: 142px 0 143.3px; }
.services-band--6 .services-ctarow { margin-top: 40px; }

/* ------------------------------------------------- section head + 2-up grid --- */
.services-sectionhead { margin: 0 0 64px; }
.services-sectionhead h2 { margin: 0 0 20px; }

.services-grid {
  display: grid;
  /* Even split as a ratio rather than 544+544 fixed, so the pair fills the 1488 content
     column instead of stopping at the comp's 1168. (Pete, 15 Aug.) */
  grid-template-columns: 1fr 1fr;
  gap: 56px 80px;
  align-items: start;
}

/* Young Serif ships ONE weight (400) — `font-weight: 600` here was synthesising
   a fake bold (notes/typography.md). Removed; the tier is carried by size. */
.services-item__title {
  font-size: 23px;
  line-height: 30px;
  font-weight: 400;
  margin: 0 0 14px;
}
.services-item__title::after {
  content: '';
  display: block;
  width: 24px; height: 1px;
  margin: 14px 0 0;
  background: var(--burgundy);
}

/* ------------------------------------------------------------ bullet list ---
   Copy PDF renders these as a plain bulleted list; marker is the site's
   burgundy accent scaled to a 4 px square (matches the square-cornered system —
   nothing on this site is rounded). */
.services-list { margin: 24px 0 0; }
.services-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 12px;
}
.services-list li:last-child { margin-bottom: 0; }
.services-list li::before {
  content: '';
  position: absolute;
  left: 0; top: 12px;
  width: 4px; height: 4px;
  background: currentColor;
  opacity: .7;
}

/* -------------------------------------------------------------------- faq --- */
/* same: no synthetic bold on Young Serif */
.services-faq__q {
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  margin: 0 0 10px;
}
.services-faq__a { margin: 0; }

/* ---------------------------------------------------------------- reserve --- */
.services-reserve__script { margin: 20px 0 0; color: var(--tan); }

/* ==================================================== /services#wedding ======
   The second approved copy document ("Films You'll Watch for the Rest of Your
   Life"). The mockup carries NO comp for it — spec §1 proved every one of the
   six bands empty — so this region is built in the page's own language rather
   than measured: same .band shell, same .services-split / .services-sectionhead
   pairs, same .services-item, .services-list, .services-closing, .btn,
   .card. Everything below is spacing and the one 3-up grid; no new type step,
   no new colour, no new component.

   Vertical padding: the six measured bands above sit between 92 and 147 px of
   top padding (they are height solves, not a scale). 96 px = --sp-7 is squarely
   inside that family and is used uniformly here.
   ========================================================================== */
.services-wed { padding: 96px 0; }
.services-wed--1 { scroll-margin-top: 24px; }

/* the .services-closing couplet appears MID-block in the opening section, so the
   prose that follows it needs the same 32 px advance the couplet takes above. */
.services-closing + .services-prose { margin-top: 32px; }

/* prose that resumes after a .services-list */
.services-prose--afterlist { margin-top: 24px; }

/* the collections section head carries two lead lines, not one */
.services-lead + .services-lead { margin-top: 16px; }

/* inline links inside body copy — the shared .textlink's hairline-underline
   language at body size. Not a new component: it styles <a> inside the page's
   existing prose block, so any prose link on the page matches. */
.services-prose a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(91, 13, 26, .35);
  transition: border-color .18s ease;
}
.services-prose a:hover { border-bottom-color: var(--burgundy); }
.band--burgundy .services-prose a,
.band--brown    .services-prose a { border-bottom-color: rgba(216, 194, 168, .5); }
.band--burgundy .services-prose a:hover,
.band--brown    .services-prose a:hover { border-bottom-color: var(--tan); }

/* .services-item__title's 24px rule is burgundy — invisible on the dark bands */
.band--burgundy .services-item__title::after,
.band--brown    .services-item__title::after { background: var(--tan); }

/* --- real wedding films: 3-up on the same 1168 content box ------------------
   336 + 80 + 336 + 80 + 336 = 1168, i.e. the measured 80 px column gap kept. */
.services-grid--films {
  /* 3 equal proportional tracks; 336px each was the comp's measure inside 1168. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 80px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.services-film__link { display: block; text-decoration: none; color: inherit; }
.services-film__media { aspect-ratio: 3 / 4; margin: 0 0 20px; }
.services-film__media img { transition: transform .5s ease; }
.services-film__link:hover .services-film__media img { transform: scale(1.03); }
.services-film__title { margin: 0 0 8px; }
.services-film__meta  { margin: 0 0 12px; }
.services-film__desc  { margin: 0; letter-spacing: .01em; }

/* the line that closes the films section, under the grid */
.services-wed__outro { margin: 48px 0 0; max-width: 544px; letter-spacing: .01em; }

/* --- the document's own closing CTA ---------------------------------------- */
.services-wed__cta { margin: 40px 0 0; }
.services-wed__script { margin: 16px 0 0; color: var(--tan); }
.services-wed__cta .services-ctarow { margin-top: 28px; }
.services-wed__alt { margin: 24px 0 0; }

/* ============================================================== responsive ===
   Breakpoints are the site-wide ones set in site.css (1200 / 900 / 600); the
   mockups are desktop-only so everything below is the site's design call, not a
   reproduction. Columns are declared in px above to match the measured grid, so
   each breakpoint hands them back to the fluid track.
   ========================================================================== */
@media (max-width: 1200px) {
  .services-split,
  .services-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .services-grid { gap: 48px; }
  /* 0-1-0 above, so this 0-1-0 wins on order — keep the films row 3-up here */
  .services-grid--films { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
}

@media (max-width: 900px) {
  .services-split,
  .services-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .services-hero__title { line-height: 1.03; margin-bottom: 32px; }
  .services-band--1,
  .services-band--3,
  .services-band--4 { padding: 72px 0; }
  .services-band--2,
  .services-band--5,
  .services-band--6 { padding: 72px 0; }
  .services-sectionhead { margin-bottom: 40px; }
  /* The desktop band-height solve above is written as band-scoped rules (0-2-0),
     which out-specify the 0-1-0 resets in this block — hand them back explicitly. */
  .services-band--2 .services-sectionhead { margin-bottom: 40px; }
  .services-band--2 .services-grid,
  .services-band--5 .services-grid { row-gap: 32px; }
  .services-band--3 .services-list li { margin-bottom: 12px; }
  .services-ctarow .arrowlink { padding: 0 0 5px; }
  .services-wed { padding: 72px 0; }
  .services-wed__outro { max-width: none; }
  /* the films row stays a row down to 600 — three 3:4 stills read as a set */
  .services-grid--films { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .services-film__media { margin-bottom: 14px; }
}

@media (max-width: 600px) {
  /* the measured hard breaks are kept at every width — each of the five lines
     fits the 375 px floor, and removing them would join the text nodes into one
     unbreakable string (there is no whitespace around the <br>s). */
  .services-hero__title { line-height: 1.06; }
  .services-closing { font-size: 18px; line-height: 28px; }
  .services-ctarow { gap: 20px; }
  .services-band--1,
  .services-band--2,
  .services-band--3,
  .services-band--4,
  .services-band--5,
  .services-band--6 { padding: 56px 0; }
  .services-wed { padding: 56px 0; }
  .services-grid--films { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .services-wed__outro { margin-top: 32px; }
  /* .t-display-s clamps to 26px here while .services-item__title is a fixed 23,
     so the CTA's repeated heading would sit almost level with its own h2 — step
     it down to keep the two tiers apart. */
  .services-wed__cta .services-item__title { font-size: 20px; line-height: 27px; }
}

/* ============================================================ split hero ===
   Copy left / photograph right (15 Aug), the shape Home, Films and About share. The comp
   shipped this hero as a single text column because no photo was ever exported for the page;
   IMG_5205 (client-supplied) now fills the right half. Pulled up under the transparent header
   like the others, which is also why the nav needs the light treatment + scrim here. */

/* Centred continuation of the hero lede — same shape as .idx-intro on Home. */
.services-intro { padding: 104px 0; border-bottom: 1px solid var(--tan); }
.services-intro__copy { max-width: 62em; margin-inline: auto; text-align: center; }
.services-intro__copy p { margin: 0 0 24px; }
.services-intro__copy p:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .services-intro { padding: 72px 0; } }
@media (max-width: 600px) { .services-intro { padding: 56px 0; } }

/* The experience splitsec keeps its closing line style; give the films carousel cards a fixed
   sensible media crop inside the track (the source stills are portrait). */
#real-films .carousel { margin-top: 48px; }

/* Full column width in the split hero (Pete, 15 Aug: "nothing full width"). The comp's measures
   were solved for a one-column hero ~530px wide; in the split the copy column is much wider and
   a capped body stopped well short of the heading above it. */

/* FAQ heading centred over the accordion (Pete, 15 Aug: "center title here"). The accordion is a
   62em column centred in the band, so a left-aligned heading floated well away from it. */
#faq .services-sectionhead { text-align: center; }