/* ==========================================================================
   SERVICES — layout that only the Services page uses. Loads after
   components.css. Anything here that a third page ends up needing should
   move to components.css rather than being copied.

   Everything visual comes from the global system: the .hero backdrop,
   .accordion, .check-list, .card, .carousel, .testimonial,
   .section-sub, .btn, .cta-block--photo. The rules below are arrangement
   only — no new colours, type sizes or spacing values outside the tokens.
   ========================================================================== */

/* ==========================================================================
   1. HERO — the home hero backdrop, centred rather than two-column.
   ========================================================================== */

.svc-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

.svc-hero__inner h1 { max-width: 14ch; }

/* A lede, not a second title: h3 size at regular weight so it sits under the
   H1 rather than beside it. */
.svc-hero__sub {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  max-width: 32ch;
}

/* ==========================================================================
   2. INTRO — the two H3 lines and the routing CTA, centred under the hero.
   ========================================================================== */

.svc-intro__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
}

/* Marked up as H3 per the page spec, but reads as lede copy — hence the
   regular weight and muted tone, with the bolded halves carrying the
   emphasis instead of the whole sentence shouting. */
.svc-intro__lead {
  font-size: var(--fs-h3);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  color: var(--text-muted);
  max-width: 46ch;
}
.svc-intro__lead strong {
  color: var(--charcoal);
  font-weight: var(--fw-semibold);
}

.svc-intro .btn-row { margin-top: var(--sp-2); }

/* ==========================================================================
   3. CORE OFFER CARDS

   Each card is a face (picture beside the visible copy) with the dropdown
   stack and the CTA underneath it, full card width.

   The picture is the flexible element inside the face: it stretches to
   whatever height the copy sets, so the two columns always finish level.
   Cards size to their own copy — no shared min-height — so none of them
   carries dead space to match a longer neighbour.
   ========================================================================== */

.svc-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  /* ~87% of the container — the "80–90% of the page width" in the brief. */
  max-width: 1040px;
  margin-inline: auto;
}

.svc-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--dur-hover) var(--ease-out),
              box-shadow var(--dur-hover) var(--ease-out);
}
.svc-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }

/* ---- Face: picture + the copy that stays visible ------------------------ */

.svc-card__face {
  display: grid;
  /* Picture a third, copy two thirds. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

/* Cards 2 and 4: same grid, picture on the right, copy ranged right against
   it. `order` moves the media element only, so the DOM keeps copy-before-
   image on every card. */
.svc-card--flip .svc-card__face { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.svc-card--flip .svc-card__media { order: 2; }
.svc-card--flip .svc-card__intro { text-align: right; }
/* Every child of the flipped column is width-capped, so pushing the free
   space to the left is what actually ranges them right. */
.svc-card--flip .svc-card__intro > * { margin-left: auto; }

.svc-card__media {
  position: relative;
  background: var(--cream-deep);
  min-height: 100%;
}

.svc-card__img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.svc-card__intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(var(--sp-4), 2.6vw, var(--sp-5));
}

.svc-card__name { max-width: 20ch; }

.svc-card__price {
  margin-top: var(--sp-2);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-extrabold);
  line-height: 1.15;
  color: var(--burgundy);
}

.svc-card__note {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

/* The one H3 that stays on the card face. Sized down to h4 so the card title
   above it stays the biggest thing in the card. */
.svc-card__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--charcoal);
  max-width: 36ch;
}

/* Shared body-copy block for card faces and dropdown panels. */
.svc-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  color: var(--text-muted);
  max-width: var(--measure);
}
.svc-body > p + p { margin-top: 0; }
.svc-body strong { color: var(--charcoal); }

.svc-card__lead + .svc-body { margin-top: var(--sp-2); }

/* ---- Dropdowns ----------------------------------------------------------
   Held in a narrower column than the card and centred, so the stack reads as
   a deliberate block rather than a full-bleed list; the copy inside stays
   left-aligned and is indented off the heading rule. */

.svc-card__more {
  width: min(100%, 780px);
  margin-inline: auto;
  padding-block: var(--sp-4) 0;
  padding-inline: var(--sp-4);
  text-align: left;
}

.svc-card__more .accordion__body {
  color: inherit;
  padding-inline: var(--sp-3);
}

/* ---- CTA ---------------------------------------------------------------- */

.svc-card__foot { padding: var(--sp-4) var(--sp-4) clamp(var(--sp-4), 2.6vw, var(--sp-5)); }

/* ---- Stacked ------------------------------------------------------------
   Below the two-column breakpoint the picture goes back on top at a fixed
   height, and the ranged-right copy on cards 2 and 4 returns to the left. */
@media (max-width: 899px) {
  .svc-card__face,
  .svc-card--flip .svc-card__face { grid-template-columns: minmax(0, 1fr); }
  .svc-card--flip .svc-card__media { order: 0; }
  .svc-card--flip .svc-card__intro { text-align: left; }
  .svc-card--flip .svc-card__intro > * { margin-left: 0; }

  .svc-card__media { min-height: 0; height: clamp(240px, 52vw, 340px); }
  .svc-card__more { padding-inline: var(--sp-3); }
  .svc-card__more .accordion__body { padding-inline: 0; }
}

/* ==========================================================================
   4. CHEAT SHEET — four one-line cards, each a situation and the offer it
   points at.
   ========================================================================== */

.svc-cheat {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 940px;
  margin: var(--sp-6) auto 0;
  text-align: left;
}

/* .card is a column by default; these are single rows. */
.svc-cheat__item {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

.svc-cheat__if { color: var(--text-muted); }

.svc-cheat__arrow {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--gold);
  font-weight: var(--fw-semibold);
}

.svc-cheat__then {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--burgundy);
}

@media (max-width: 699px) {
  .svc-cheat__item { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
  .svc-cheat__arrow { margin-left: 0; }
}

.svc-cheat__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  text-align: center;
}
.svc-cheat__foot p { max-width: 58ch; color: var(--text-muted); }
.svc-cheat__ask { color: var(--burgundy); }

/* ==========================================================================
   5. DOWNSTREAM SERVICES

   Photographic band: the flatlay under a heavy burgundy-black wash, which is
   what lets the intro copy sit at full strength over a busy, bright image.
   Never lighten the overlay below ~0.75 — the paper in the photo is nearly
   white and the copy stops clearing contrast.

   The band is NOT given .on-dark: that rule colours every descendant link
   cream, which would wipe out the burgundy button inside the white cards.
   The two elements that need light type get it explicitly instead.
   ========================================================================== */

.svc-down-band {
  position: relative;
  isolation: isolate;
  background-color: var(--charcoal);
  background-image: url("../assets/flatlay-papers.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.svc-down-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(29, 2, 7, 0.90) 0%,
      rgba(29, 2, 7, 0.84) 45%,
      rgba(29, 2, 7, 0.92) 100%);
}

.svc-down__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  max-width: 64ch;
  margin-inline: auto;
  text-align: center;
}

.svc-down__intro h2 { color: var(--text-on-dark); }

.svc-down__lede {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.svc-down__lede h4 {
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--text-on-dark);
}

/* ---- The three cards ---------------------------------------------------- */

.svc-down {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 940px;
  /* Air between the last line of the intro and the first card. */
  margin: var(--sp-6) auto 0;
}

.svc-down__card { gap: var(--sp-2); }

/* Title, sub-title and the visible top line of each card are centred; the
   dropdown copy underneath stays left-aligned. */
.svc-down__name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  text-align: center;
}

.svc-down__lead {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--burgundy);
  text-align: center;
}

/* One item per card, so it needs the head rule only. */
.svc-down__card .accordion__item { border-bottom: 0; }

/* The sub-heading is the toggle. It is a sentence, not a label, so it drops
   to body-lg medium rather than the accordion's default h4 semibold — and
   the chevron rides beside the centred text instead of on the far edge. */
.svc-down__card .accordion__head.svc-down__sub {
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-align: center;
}
.svc-down__card .accordion__head.svc-down__sub:hover { color: var(--burgundy); }
.svc-down__card .svc-down__sub .accordion__chev { margin-top: 5px; }

.svc-down__card .accordion__body { color: inherit; text-align: left; }
.svc-down__card .btn-row { margin-top: var(--sp-1); justify-content: center; }

/* ==========================================================================
   6. TESTIMONIALS — the home page's carousel, unchanged, on the same cream
   band the offer cards use.
   ========================================================================== */

.svc-quotes__head h2 { max-width: 24ch; margin-inline: auto; }

/* ==========================================================================
   7. HOW EVERYTHING FITS TOGETHER — a centred closing statement. Written one
   thought per line, so the paragraphs sit on a tighter gap than the default.
   ========================================================================== */

.svc-fits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.svc-fits h2 { max-width: 24ch; }

.svc-fits__lines {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 58ch;
  margin-top: var(--sp-3);
  color: var(--text-muted);
}
.svc-fits__lines > p + p { margin-top: 0; }
.svc-fits__lines strong { color: var(--charcoal); }

/* A held beat between the three "sometimes" lines and the closing pair. */
.svc-fits__lines .svc-break { margin-top: var(--sp-3); }

/* ==========================================================================
   8. FOOTER CTA — the closing copy is three lines of one thought, so they sit
   on a tighter gap than the block's default paragraph rhythm.
   ========================================================================== */

.svc-cta-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}
.svc-cta-lines > p + p { margin-top: 0; }