/* ==========================================================================
   The Detail Co. — pages-a.css
   Page-level additions for services.html and about.html only.
   Loaded after main.css, and only by those two pages. Every selector is
   scoped to markup that exists on them, so nothing here can reach the rest
   of the site — including the one adjustment to .quote-row in A4.

   CONTENTS
   A1  Package rows (services)
   A2  Name / text pairs (services helper, about values)
   A3  About story column
   A4  Testimonial quote row (about)
   A5  About sticky image column
   ========================================================================== */


/* A1  PACKAGE ROWS
   Each package is a .rows child, so the hairline and the vertical rhythm
   come from main.css. Only the inside of the right column is new.
   ------------------------------------------------------------------------ */
.pkg__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.pkg__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.02;
  letter-spacing: -.018em;
}

/* The price is set in the same serif as the name so the pair reads as one
   line of type rather than a label and a badge. */
.pkg__price {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--porcelain-60);
}

.pkg__blurb {
  margin-top: clamp(22px, 2.4vw, 30px);
  font-size: var(--fs-small);
  line-height: 1.75;
  color: var(--porcelain-60);
}

.pkg__sub {
  margin-top: clamp(28px, 3vw, 40px);
  margin-bottom: 14px;
}

.pkg__actions {
  margin-top: clamp(28px, 3vw, 40px);
  gap: 18px 30px;
}

/* Image first in source order already; on narrow screens it keeps that
   position so each package opens with its picture. */
@media (max-width: 860px) {
  .pkg .slot { aspect-ratio: 4 / 3; }
}


/* A2  NAME / TEXT PAIRS
   Used by the "Not sure which one?" helper and the about values. The shared
   .row-pair reserves 220px for the left column; inside the narrower about
   column that is too much, so both pages run a tighter measure.
   ------------------------------------------------------------------------ */
.row-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 1.9vw, 27px);
  line-height: 1.14;
  letter-spacing: -.012em;
}

.row-text {
  font-size: var(--fs-small);
  line-height: 1.72;
  color: var(--porcelain-60);
  max-width: 54ch;
}

/* Helper and values rows are shorter than a package row. */
.values > *,
.rows .row-pair {
  padding-block: clamp(26px, 3vw, 38px);
}


/* A3  ABOUT STORY COLUMN
   ------------------------------------------------------------------------ */
.story__lead {
  max-width: 30ch;
  letter-spacing: -.012em;
}

.story__body {
  margin-top: clamp(26px, 3vw, 38px);
  font-size: var(--fs-small);
  line-height: 1.78;
  color: var(--porcelain-60);
  max-width: 58ch;
}

.values { margin-top: clamp(44px, 5vw, 72px); }

.values .row-pair {
  grid-template-columns: minmax(0, 150px) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

@media (max-width: 700px) {
  .values .row-pair {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}


/* A4  TESTIMONIAL QUOTE ROW (about)
   The three quotes run to different lengths; dropping the attributions to
   the bottom of each column lands them all on one line together.
   ------------------------------------------------------------------------ */
.quote-row figure {
  display: flex;
  flex-direction: column;
}

.quote-row figcaption {
  margin-top: auto;
  padding-top: 18px;
}


/* A5  ABOUT STICKY IMAGE COLUMN
   One 4:5 frame, then two squares side by side. The pair keeps the column
   short enough that the sticky position actually has somewhere to travel.
   ------------------------------------------------------------------------ */
.about-aside__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
}

@media (max-width: 860px) {
  .about-aside .slot[data-ratio="4/5"] { aspect-ratio: 4 / 3; }
}