/* ══ FIND A TRADE: ONE SERVICE ═════════════════════════════════ 13 Oct 2026 (rp120), v1 ══
   Sir, 13 Oct: the polishing pass, tab by tab, to 9.8. The page keeps its frame (the photographs
   left, the pinned sheet right, a docket of what the price covers under them) and changes what it
   says and how a real listing sits in it. This sheet carries: the gallery shaped by how many
   photographs there are, the initials when there is no face, the breadcrumb on the page's own
   line, the trust cards as buttons, the reviews line, and the four steps from this page to the
   work signed off (effects T19 a flow that draws once, A6 numerals). Tokens: service.html :root. */

/* ── the gallery takes the shape of what there is ── */
.pdp-media.is-pix-1 { grid-template-columns: minmax(0, 1fr); }
.pdp-media.is-pix-1 .pdp-stack { display: none; }
.pdp-media.is-pix-1 .pdp-lead { grid-column: 1; }
.pdp-media.is-pix-2 .pdp-stack { grid-template-rows: minmax(0, 1fr); }
.pdp-media.is-pix-2 .pdp-stack > .gt:nth-child(2) { display: none; }
.pdp.expanded .pdp-media.is-pix-1, .pdp.expanded .pdp-media.is-pix-2 { grid-template-columns: inherit; }

/* ── no photograph of them: their initials, on the family's navy ── */
.hang-frame.is-ini { display: grid; place-items: center; background-color: var(--navy); }
.hang-frame.is-ini::after { display: none; }
.hang-ini { font-family: var(--serif-display); font-size: clamp(44px, 4.4vw, 64px); line-height: 1; letter-spacing: .04em; color: var(--cream); }
@media (max-width: 600px) {
  .t-hang .hang-frame { width: 132px; }
  .hang-ini { font-size: 44px; }
}

/* ── the breadcrumb on the page's line, the family's mark between crumbs ── */
nav.breadcrumbs { max-width: none; margin: 0; padding: 18px var(--page-inset) 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
nav.breadcrumbs a { color: var(--muted); text-decoration: none; }
nav.breadcrumbs a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
nav.breadcrumbs .bc-sep { color: var(--muted); font-size: 13px; letter-spacing: 0; }
nav.breadcrumbs .bc-here { color: var(--navy); font-family: var(--serif-display); font-size: 16px; font-weight: 400; letter-spacing: 0; text-transform: none; }
@media (max-width: 900px) { nav.breadcrumbs { padding: 16px 24px 0; } }
@media (max-width: 600px) { nav.breadcrumbs { padding: 14px 16px 0; } }

/* ── the trust cards are buttons now ── */
.trust-card[role="button"] { cursor: pointer; }
.trust-card[role="button"]:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.trust-detail a { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

/* ── reviews: how many, and where to read them ── */
.reviews-section .rv-go { margin: 18px 0 0; }
.reviews-section .rv-go a, .sv-more a { font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--navy);
  text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid currentColor; }
.reviews-section .rv-go a::after, .sv-more a::after { content: '\2192' / ""; display: inline-block; margin-left: 8px; transition: transform 220ms ease; }
.reviews-section .rv-go a:hover::after, .sv-more a:hover::after { transform: translateX(3px); }

/* ══ WHAT HAPPENS WHEN YOU ASK ══ */
.sv-next { margin: clamp(56px, 6vw, 96px) 0 clamp(48px, 5vw, 80px); padding-top: clamp(28px, 3vw, 40px); border-top: 2px solid var(--navy); }
.sv-next-h { margin-bottom: clamp(26px, 3vw, 40px); }
.sv-k { margin: 0; font-family: var(--sans); font-size: 10.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.sv-next-h h2 { margin: 10px 0 0; font-family: var(--serif-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; color: var(--navy); }
.sv-flow { --dot: 34px; position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); }
/* the line the steps stand on, through the middle of the numerals */
.sv-flow::before { content: ''; position: absolute; left: calc(var(--dot) / 2); right: 0; top: calc(var(--dot) / 2); height: 1px; background-color: var(--line-2); transform-origin: left center; }
.sv-step { position: relative; display: grid; gap: 10px; align-content: start; }
.sv-n { position: relative; display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%; background-color: var(--cream); border: 1px solid var(--navy);
  font-family: var(--serif-display); font-size: 17px; line-height: 1; color: var(--navy); }
.sv-step:last-child .sv-n { background-color: var(--navy); color: var(--cream); }
.sv-t { margin-top: 8px; font-family: var(--serif-display); font-weight: 400; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.2; color: var(--navy); }
.sv-d { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 36ch; }
.sv-more { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: clamp(26px, 3vw, 38px) 0 0; }
/* drawn once, on arrival: the line runs left to right and each step comes up behind it */
.sv-flow.sv-wait::before { transform: scaleX(0); }
.sv-flow.sv-wait .sv-step { opacity: 0; transform: translateY(10px); }
.sv-flow.sv-wait.is-in::before { transform: scaleX(1); transition: transform 1100ms cubic-bezier(.45, 0, .2, 1); }
.sv-flow.sv-wait.is-in .sv-step { opacity: 1; transform: none; transition: opacity 500ms ease, transform 500ms ease; }
.sv-flow.sv-wait.is-in .sv-step:nth-child(2) { transition-delay: 220ms; }
.sv-flow.sv-wait.is-in .sv-step:nth-child(3) { transition-delay: 440ms; }
.sv-flow.sv-wait.is-in .sv-step:nth-child(4) { transition-delay: 660ms; }
@media (max-width: 900px) {
  .sv-flow { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .sv-flow::before { left: calc(var(--dot) / 2); right: auto; top: calc(var(--dot) / 2); bottom: calc(var(--dot) / 2); width: 1px; height: auto; transform-origin: center top; }
  .sv-flow.sv-wait::before { transform: scaleY(0); }
  .sv-flow.sv-wait.is-in::before { transform: scaleY(1); }
  .sv-step { grid-template-columns: var(--dot) minmax(0, 1fr); column-gap: 16px; }
  .sv-step > :not(.sv-n) { grid-column: 2; }
  .sv-n { grid-row: 1 / span 2; }
  .sv-t { margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .reviews-section .rv-go a::after, .sv-more a::after { transition: none; } }
@media (forced-colors: active) { .sv-flow::before { background-color: CanvasText; } .hang-frame.is-ini { border: 1px solid CanvasText; } }
@media print { .sv-flow .sv-step { opacity: 1 !important; transform: none !important; } .sv-flow::before { transform: none !important; } }

/* a shut drawer is out of the tab order and off the page's width (its links were reachable by Tab) */
.profile-drawer:not(.open) { visibility: hidden; transition: right 300ms ease, visibility 0s linear 300ms; }
.profile-drawer.open { visibility: visible; }
a.skip { margin: 0; left: 0; top: 0; }

/* rp123: where there is no conversation yet, the line under the button says how one starts */
.board .board-quiet--note { margin: 2px 0 0; padding: 0; border: 0; text-align: center; text-decoration: none; text-transform: none; letter-spacing: normal;
  font-family: var(--sans); font-size: 12px; line-height: 1.5; color: var(--muted); }