/* ============================================================
   service-page.css — every /services/<slug>/ page (screens G, H, I
   on the design board). One layout for all of them:
   story on the left, a price card that stays in view on the right,
   then Terms, Common questions, more in the category, closing band.
   Sections a page has no copy for are simply not rendered.
   Load order: global.css → components.css → skeleton.css → this.
   (css/service.css is now only used by /services/packages/.)
   ============================================================ */

/* ---------- Top grid: head + body on the left, card on the right ---------- */
.pg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  grid-template-areas: "head card" "body card";
  column-gap: 56px;
  padding: calc(var(--nav-h) + 56px) 5vw 0;
}
.pg-head { grid-area: head; }
.pg-body { grid-area: body; }
.pg-card { grid-area: card; align-self: start; position: sticky; top: calc(var(--nav-h) + 24px); }

.pg-crumb {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 36px;
  font-size: 14px;
  color: var(--text2);
}
.pg-crumb a { color: var(--text2); }
.pg-crumb a:hover { color: var(--text); }
.pg-crumb [aria-current] { color: var(--text); }
.pg-eyebrow {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text2);
}
.pg-h1 {
  font-size: clamp(42px, 6vw, 84px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.05em;
}
.pg-lede {
  max-width: 680px;
  margin-top: 28px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  font-weight: 300;
  color: #C8C8C2;
}
.pg-lede strong { color: var(--text); font-weight: 600; }
.pg-note { max-width: 680px; margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--text3); }

/* ---------- "Good for" (headshot pages) ---------- */
.pg-good { margin-top: 32px; }
.pg-rail-k { margin-bottom: 14px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); }
.pg-good-list { display: grid; gap: 28px; list-style: none; }
.pg-good-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; }
.pg-good-ico {
  grid-row: 1 / span 3;
  align-self: center;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--text);
  color: var(--bg);
}
.pg-good-ico svg { width: 22px; height: 22px; }
.pg-good-tag { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); }
.pg-good-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--text); }
.pg-good-desc { font-size: 15px; line-height: 1.6; font-weight: 300; color: #C8C8C2; }

/* ---------- Packages: services included, by name ---------- */
.pg-incl { list-style: none; border-top: 1px solid var(--border); }
.pg-incl a {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
}
.pg-incl svg { width: 22px; height: 22px; }
.pg-incl-go { font-size: 18px; font-weight: 400; color: var(--text2); }
.pg-incl a:hover .pg-incl-go { color: var(--text); }

/* ---------- Team headshots: photo captions, tiers in the price card ---------- */
.pg-shot-caps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.pg-shot-caps p { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text); }
.pg-shot-caps p::before { content: ""; flex: none; width: 14px; height: 2px; border-radius: 2px; background: var(--text2); }
.pg-card-tiers { margin: 18px 0 4px; }
.pg-card-tiers-k { margin-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); }
.pg-card-tiers ul { list-style: none; }
.pg-card-tiers li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.pg-card-tiers span { font-size: 14px; color: var(--text2); }
.pg-card-tiers b { font-size: 15px; color: var(--text); text-align: right; }

/* ---------- Body blocks ---------- */
.pg-block { margin-top: 64px; }
.pg-k { margin-bottom: 18px; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.pg-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; list-style: none; }
.pg-checks li {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 17px;
  line-height: 1.4;
}
.pg-checks svg { flex: none; width: 20px; height: 20px; }

.pg-tiers { border: 1px solid var(--border-md); border-radius: 18px; overflow: hidden; }
.pg-tier {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) auto;
  gap: 24px;
  align-items: baseline;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}
.pg-tier:last-child { border-bottom: 0; }
.pg-tier-who { font-size: 17px; font-weight: 600; }
.pg-tier-how { font-size: 15px; font-weight: 300; color: var(--text2); }
.pg-tier-price { font-size: 24px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }

.pg-rows { display: grid; gap: 0; }
.pg-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
  font-size: 16px;
  line-height: 1.6;
}
.pg-row dt { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); padding-top: 3px; }
.pg-row dd { font-weight: 300; color: #C8C8C2; }
.pg-row--plain { grid-template-columns: minmax(0, 1fr); }
.pg-row dd ul { list-style: none; }
.pg-row dd li + li { margin-top: 4px; }
.pg-row a, .pg-sec a, .pg-lede a, .pg-note a { color: var(--text); border-bottom: 1px solid var(--border-hi); }
.pg-row a:hover, .pg-sec a:hover, .pg-lede a:hover { border-bottom-color: var(--text); }

.pg-sec h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.pg-sec h3 { margin-top: 28px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.pg-sec p { max-width: 680px; margin-top: 14px; font-size: 17px; line-height: 1.7; font-weight: 300; color: #C8C8C2; }
.pg-sec .pg-note { font-size: 14px; color: var(--text3); }
.pg-sec .pg-rows { margin-top: 18px; }

.pg-areas { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; }
.pg-areas li { padding: 9px 16px; border: 1px solid var(--border-hi); border-radius: 999px; font-size: 14px; }

/* ---------- Price card ---------- */
.pg-card {
  padding: 32px;
  border: 1px solid var(--border-hi);
  border-radius: 22px;
  background: var(--bg3);
}
.pg-card-tag { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text2); }
.pg-card-pre { margin-top: 14px; font-size: 13px; color: var(--text2); }
.pg-card-price { margin-top: 2px; font-size: clamp(52px, 5vw, 76px); font-weight: 700; letter-spacing: -.05em; line-height: .92; }
.pg-card-price.is-text { font-size: clamp(36px, 3.2vw, 46px); letter-spacing: -.04em; line-height: 1; }
.pg-card-price small { margin-left: 4px; font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--text2); }
.pg-card-scope { margin-top: 8px; font-size: 16px; color: #C8C8C2; }
.pg-card-facts { display: grid; gap: 14px; margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--border-md); font-size: 15px; }
.pg-card-facts div { display: flex; justify-content: space-between; gap: 16px; }
.pg-card-facts dt { color: var(--text2); flex: none; }
.pg-card-facts dd { text-align: right; }
.pg-card-btn, .pg-card-call {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 28px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.pg-card-btn { gap: 10px; background: var(--text); color: var(--bg); transition: opacity .2s ease; }
/* Arrival: the card rises, its facts follow one by one, then the Call
   button lands and keeps a slow ping (keyframes in components.css).
   The price counts up from js/animations.js.
   Hover drops ONLY the ping, so its glow can show. fx-rise stays first
   in the list on both sides, which keeps that finished entrance from
   replaying when the pointer leaves (removing every animation on hover
   is what used to hide the button for a moment on each mouse-out). */
.pg-card { animation: fx-rise .9s cubic-bezier(.16,1,.3,1) .1s backwards; }
.pg-card-facts > div { animation: fx-rise .7s cubic-bezier(.16,1,.3,1) .35s backwards; }
.pg-card-facts > div:nth-child(2) { animation-delay: .43s; }
.pg-card-facts > div:nth-child(3) { animation-delay: .51s; }
.pg-card-facts > div:nth-child(n+4) { animation-delay: .59s; }
.pg-card-btn {
  animation:
    fx-rise .7s cubic-bezier(.16,1,.3,1) .62s backwards,
    fx-ping 4.5s cubic-bezier(.16,1,.3,1) 2.2s infinite;
}
.pg-card-btn:hover { animation: fx-rise .7s cubic-bezier(.16,1,.3,1) .62s backwards; }
/* Held: the card lifts, the price rises, the rule brightens.
   No tilt here, unlike the other cards: a big sticky card held in 3D
   re-rasterises its 1px rules and text at fractional pixels, which
   flickers thin lines across it. Plain 2D lift stays crisp. */
.pg-card { transition: translate .6s cubic-bezier(.16,1,.3,1), box-shadow .5s ease, border-color .3s ease; }
.pg-card-price, .pg-card-tag { transition: translate .5s cubic-bezier(.34,1.56,.64,1), color .3s ease; }
.pg-card-facts { transition: border-color .3s ease; }
@media (hover: hover) {
  .pg-card:hover {
    border-color: var(--text2);
    box-shadow: 0 34px 70px -34px rgba(0,0,0,.95);
    translate: 0 -6px;
  }
  .pg-card:hover .pg-card-price { translate: 0 -4px; }
  .pg-card:hover .pg-card-tag { color: var(--text); }
  .pg-card:hover .pg-card-facts { border-top-color: var(--border-hi); }
}
.pg-card-btn svg, .pg-card-call svg { width: 18px; height: 18px; flex: none; }
.pg-card-num { margin-top: 10px; text-align: center; font-size: 15px; color: var(--text2); font-variant-numeric: tabular-nums; }
.pg-card-btn:hover { opacity: .87; }
.pg-card-call { gap: 10px; min-height: 48px; margin-top: 10px; border: 1px solid var(--border-hi); font-size: 15px; font-weight: 600; }
.pg-card-call:hover { border-color: var(--text); }
.pg-card-terms { display: block; margin-top: 16px; text-align: center; font-size: 13px; color: var(--text2); }
.pg-card-terms:hover { color: var(--text); }
.pg-card a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

/* ---------- Terms + Common questions (same accordion) ---------- */
.pg-acc {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 80px 5vw;
  border-top: 1px solid var(--border);
  scroll-margin-top: var(--nav-h);
}
.pg + .pg-acc { margin-top: 96px; }
.pg-acc-side { flex: 1 1 280px; }
.pg-acc-h { font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.pg-acc-sub { margin-top: 12px; font-size: 16px; line-height: 1.6; font-weight: 300; color: var(--text2); }
.pg-acc-sub a { color: var(--text2); border-bottom: 1px solid var(--border-hi); }
.pg-acc-sub a:hover { color: var(--text); }
.pg-acc-list { flex: 999 1 600px; min-width: 0; }
.pg-acc-item { border-bottom: 1px solid var(--border-md); }
.pg-acc-item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 20px 0;
  font-size: 19px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.pg-acc-item summary::-webkit-details-marker { display: none; }
/* Same turn as the How We Work steps: a quarter on hover, x when open. */
.pg-acc-item summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 300; color: var(--text3); transition: transform .6s cubic-bezier(.34,1.56,.64,1), color .3s ease; }
.pg-acc-item summary:hover::after { transform: rotate(90deg); color: var(--text); }
.pg-acc-item[open]:not(.is-closing) summary::after { transform: rotate(135deg); color: var(--text); }
.pg-acc-item summary:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.pg-acc-body { overflow: hidden; padding-bottom: 22px; max-width: 72ch; font-size: 15px; line-height: 1.7; font-weight: 300; color: #C8C8C2; }
.pg-acc-body p + p { margin-top: 10px; }
.pg-acc-body a { color: var(--text); border-bottom: 1px solid var(--border-hi); }

/* ---------- More in this category ---------- */
.pg-more { padding: 80px 5vw; border-top: 1px solid var(--border); }
.pg-more-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 24px; }
.pg-more-top a { font-size: 15px; color: var(--text2); }
.pg-more-top a:hover { color: var(--text); }
.pg-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; list-style: none; }
@media (max-width: 540px) { .pg-more-grid { grid-template-columns: 1fr; } }
.pg-more-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 26px;
  border: 1px solid var(--border-md);
  border-radius: 18px;
  background: var(--bg3);
  /* Tilt (--rx/--ry) comes from js/animations.js. */
  transition: border-color .3s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.pg-more-card:hover {
  border-color: var(--border-hi);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
  transform: perspective(900px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.pg-more-card.is-tilting { transition: border-color .3s ease, transform .18s ease-out, box-shadow .4s ease; }
.pg-more-card:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.pg-more-tag { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.pg-more-name { font-size: 19px; font-weight: 700; line-height: 1.25; }
.pg-more-price { margin-top: auto; padding-top: 6px; font-size: 26px; font-weight: 700; letter-spacing: -.03em; }

/* ---------- Headshots hub ---------- */
.pg-hub { padding: calc(var(--nav-h) + 56px) 5vw 0; }
.pg-hub-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; }
.pg-hub-top .pg-h1 { max-width: 900px; font-size: clamp(44px, 7vw, 96px); }
.pg-hub-price { text-align: right; }
.pg-hub-price .pg-card-price { font-size: clamp(52px, 6vw, 80px); }
.pg-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.pg-paths--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pg-sec .pg-more-grid, .pg-sec .pg-tiers { margin-top: 24px; }
.pg-path {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 380px;
  padding: 32px;
  border: 1px solid var(--border-hi);
  border-radius: 22px;
  background: var(--bg3);
  transition: border-color .3s ease, transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.pg-path:hover {
  border-color: var(--text2);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
  transform: perspective(1100px) translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}
.pg-path.is-tilting { transition: border-color .3s ease, transform .18s ease-out, box-shadow .4s ease; }
.pg-path:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.pg-path-name { font-size: 30px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.pg-path-price { font-size: 44px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.pg-path-scope { font-size: 14px; color: var(--text2); }
.pg-path-what { flex: 1; font-size: 15px; line-height: 1.6; font-weight: 300; color: #C8C8C2; }
/* Type tags: a dashed two-column list. */
.pg-path-types {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; padding: 14px 0;
  /* Soft rules top and bottom for the same reason as .pg-more-foot. */
  --soft-rule: linear-gradient(90deg, rgba(245,245,240,0), rgba(245,245,240,.07) 18%, rgba(245,245,240,.07) 82%, rgba(245,245,240,0));
  background: var(--soft-rule) top / 100% 1px no-repeat, var(--soft-rule) bottom / 100% 1px no-repeat;
}
.pg-path-types span { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--text); }
.pg-path-types span::before { content: ""; flex: none; width: 14px; height: 2px; border-radius: 2px; background: var(--text2); }
.pg-path-go { margin-top: 6px; font-size: 16px; font-weight: 700; }
.pg-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pg-facts div { padding-top: 24px; border-top: 1px solid var(--border-md); }
.pg-facts dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.pg-facts dd { margin-top: 8px; font-size: 18px; font-weight: 600; line-height: 1.4; }

/* ---------- Client photos (photo canvas, row B) ----------
   One .pg-work block per page, above What's included. A page with no
   client photos simply leaves the block out. Images sit absolute inside
   tiles that own their size (aspect-ratio or grid rows), so a tall
   photo can never stretch the grid. */
.pg-work-h { font-size: clamp(36px, 4.4vw, 60px); font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.pg-work-h em { font-weight: 600; }
.pg-work-p { max-width: 600px; margin-top: 16px; font-size: 18px; line-height: 1.6; color: #C8C8C2; }
.pg-shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; list-style: none; }
.pg-shots--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pg-shots--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pg-shots--rows { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, clamp(100px, 12.5vw, 160px)); gap: 10px; }
.pg-shots li { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--bg3); }
.pg-shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.pg-shots .is-white { background: #fff; }
.pg-shots .is-wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.pg-shots .is-land { aspect-ratio: 4 / 3; }
.pg-shots .is-big { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.pg-shots .is-tall { grid-row: span 3; }
.pg-shots--rows li { aspect-ratio: auto; }
/* The left column has no max width, so on big screens photos would outgrow
   their files. 880px keeps them in proportion; the srcset sizes match it. */
.pg-body .pg-shots, .pg-body .pg-faces, .pg-team { max-width: 880px; }
.pg-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 8px 13px;
  border-radius: 999px;
  background: #0B0B0D;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

/* "One setup. Every face." — every headshot from one session, same crop. */
.pg-faces { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-top: 28px; list-style: none; }
.pg-hub .pg-faces { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.pg-faces li { aspect-ratio: 4 / 5; overflow: hidden; border-radius: 8px; background: #fff; }
.pg-faces img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.pg-faces .pg-you { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1px dashed var(--border-hi); background: none; }
.pg-you b { font-size: 34px; font-style: italic; font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.pg-you span { font-size: 10px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--text2); }

/* "Meet the team" example: a client team page on white. */
.pg-team { margin-top: 28px; padding: 36px 36px 40px; border-radius: 14px; background: #fff; color: #0B0B0D; }
.pg-team-k { font-size: 11px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: #6B6B6B; }
.pg-team-h { margin-top: 10px; font-size: 36px; font-weight: 700; line-height: 1; letter-spacing: -.05em; }
.pg-team ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 24px 16px; margin-top: 28px; list-style: none; text-align: center; }
.pg-team img { display: block; width: 112px; height: 112px; margin: 0 auto; border-radius: 50%; object-fit: cover; object-position: 50% 16%; }
.pg-team b { display: block; margin-top: 10px; font-size: 15px; letter-spacing: -.02em; }
.pg-team small { font-size: 12px; color: #6B6B6B; }
.pg-team-cap { display: inline-block; margin-top: 14px; padding: 8px 14px; border: 1px solid var(--border-hi); border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #C8C8C2; }

/* Faces on top of the hub's three path cards. */
.pg-path-img { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; aspect-ratio: 4 / 3; margin-bottom: 6px; overflow: hidden; border-radius: 14px; background: #fff; }
.pg-path-img.is-six { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.pg-path-img img { width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% 15%; }

/* ---------- Phone and tablet ---------- */
@media (max-width: 960px) {
  .pg {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "card" "body";
    padding: calc(var(--nav-h) + 32px) 24px 0;
  }
  .pg-card { position: static; margin-top: 28px; padding: 24px; }
  .pg-crumb { margin-bottom: 22px; font-size: 13px; }
  .pg-block { margin-top: 48px; }
  .pg + .pg-acc { margin-top: 64px; }
  .pg-acc { padding: 56px 24px; gap: 16px; }
  .pg-acc-h { font-size: 28px; }
  .pg-acc-item summary { font-size: 17px; padding: 16px 0; }
  .pg-more { padding: 56px 24px; }
  .pg-hub { padding: calc(var(--nav-h) + 32px) 24px 0; }
  .pg-hub-price { text-align: left; }
  .pg-paths { grid-template-columns: 1fr; }
  .pg-path { min-height: 0; padding: 24px; }
  .pg-facts { grid-template-columns: 1fr 1fr; }
  .pg-hub .pg-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .pg-checks { grid-template-columns: 1fr; }
  .pg-checks li { padding: 14px 0; font-size: 16px; }
  .pg-tier { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 16px 18px; }
  .pg-tier-how { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
  .pg-tier-price { font-size: 20px; }
  .pg-row { grid-template-columns: 1fr; gap: 4px; }
  .pg-facts { grid-template-columns: 1fr; gap: 0; }
  .pg-facts div { padding: 16px 0; }
  .pg-work-p { font-size: 16px; }
  .pg-shots--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-faces { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .pg-you b { font-size: 22px; }
  .pg-team { padding: 24px; }
  .pg-team img { width: 88px; height: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-more-card, .pg-path, .pg-more-card:hover, .pg-path:hover { transition: none; transform: none; }
  .pg-card, .pg-card-facts > div, .pg-card-btn, .pg-card-btn:hover { animation: none; }
  .pg-card, .pg-card:hover { translate: none; }
  .pg-card:hover .pg-card-price { translate: none; }
}

/* ============================================================
   APPROVED SERVICE-PAGE LAYOUT (Oct 2026, built from the design canvas)
   - .pg-pair: What's included beside Details, Areas pinned to the
     bottom of the right column so it ends level with the last item.
   - .pg-acc--combo: Common questions and Terms in one list; the
     related-service cards sit in the left column under the heading.
   Desktop is the designed view; at 960 and under it all stacks.
   ============================================================ */
.pg-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px 48px;
}
.pg-pair-col { display: flex; flex-direction: column; }
.pg-checks--fill { grid-template-columns: 1fr; flex: 1; align-content: space-between; }
.pg-pair .pg-row { grid-template-columns: 1fr; gap: 4px; }
.pg-areas-k { margin-top: auto; padding-top: 28px; }
.pg-areas { font-weight: 300; line-height: 1.6; color: #C8C8C2; }

.pg-acc-k2 { margin-top: 40px; font-size: 15px; }
.pg-acc--combo .pg-acc-sub + .pg-acc-sub { margin-top: 8px; }
.pg-acc-more .pg-k { text-align: center; }
.pg-acc-more .pg-more-grid { grid-template-columns: 1fr; gap: 16px; }
.pg-acc-more > .pg-acc-sub { margin-top: 24px; text-align: center; }
.pg-acc-more .pg-more-card { gap: 10px; }
.pg-acc-more .pg-more-name { font-size: 22px; }
.pg-more-desc { font-size: 15px; line-height: 1.6; font-weight: 300; color: var(--text2); }
.pg-more-foot {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  /* Soft rule, not a border: these cards tilt, and a turned hard 1px
     line shimmers. Faint and faded at both ends, it has no crisp edge
     to catch. */
  background: linear-gradient(90deg, rgba(245,245,240,0), rgba(245,245,240,.07) 18%, rgba(245,245,240,.07) 82%, rgba(245,245,240,0)) top / 100% 1px no-repeat;
}
.pg-more-foot .pg-more-price { margin-top: 0; padding-top: 0; }
.pg-more-go { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--text); }
.pg-more-go svg { width: 16px; height: 16px; transition: translate .5s cubic-bezier(.34,1.56,.64,1); }
/* Hovering anywhere on the card: "Details" rolls, the arrow steps out
   and the price lifts. */
.pg-more-price { transition: translate .5s cubic-bezier(.34,1.56,.64,1); }
@media (hover: hover) {
  .pg-more-card:hover .pg-more-go .fx-lbl-i { translate: 0 -100%; }
  .pg-more-card:hover .pg-more-go svg { translate: 5px 0; }
  .pg-more-card:hover .pg-more-price { translate: 0 -3px; }
}
/* Stacked layout (960 and under): the cards take a full row under the list. */
.pg-acc-more { flex: 1 1 100%; }

@media (min-width: 961px) {
  .pg-body .pg-block { margin-top: 40px; }
  .pg-acc--combo {
    display: grid;
    grid-template-columns: minmax(280px, 398px) minmax(0, 1fr);
    grid-template-areas: "side list" "more list";
    grid-template-rows: auto 1fr;
    column-gap: 48px;
    align-items: start;
  }
  .pg-acc--combo .pg-acc-side { grid-area: side; }
  .pg-acc--combo .pg-acc-list { grid-area: list; }
  .pg-acc--combo .pg-acc-more { grid-area: more; margin-top: 48px; }
  .pg-acc--combo .pg-acc-h { font-size: 28px; }
}
@media (max-width: 960px) {
  .pg-acc-more { margin-top: 32px; }
}