/* The short pages beside the home page: privacy.html, terms.html and 404.html (launch step 2, 2026-10-10).
   They load styles.css first (palette, fonts, header, buttons, footer, the still ground) and only add their own
   layout here. The headline is set like the home page's closing line: a Poppins half, then the payoff in the
   Fraunces italic of our film, in cherry. */

.page-header .bar { gap: 16px; }

.page-main { padding-block: clamp(40px, 7vw, 112px) clamp(72px, 9vw, 140px); }

.page-title { font-size: clamp(44px, 6vw, 92px); line-height: 1; letter-spacing: -0.03em; }
.page-title .t-soft { display: block; font-weight: 500; letter-spacing: -0.02em; }
.page-title .t-strong.dsp {
  display: block; padding-left: 0.04em; font-weight: 860; font-size: 1.16em; line-height: 0.95;
  letter-spacing: -0.02em; color: var(--cherry);
}
.page-lede { margin-top: clamp(20px, 2.4vw, 32px); max-width: 52ch; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--ink-soft); }

/* privacy: one reading column, left on the page's grid, as the home page's copy sits */
.prose > :not(.page-title) { max-width: 62ch; }
.prose h2 { margin: clamp(40px, 4vw, 56px) 0 10px; font-size: clamp(20px, 1.6vw, 24px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.prose p, .prose li { color: var(--ink-soft); font-size: 17px; line-height: 1.6; }
.prose ul { display: grid; gap: 6px; }
.prose li { position: relative; padding-left: 22px; }
.prose li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; background: var(--cherry);
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat;
}
.prose a:not(.link-arrow) {
  color: var(--ink); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--cherry) 45%, transparent);
  overflow-wrap: anywhere; transition: text-decoration-color 0.25s var(--ease-out);
}
.prose a:not(.link-arrow):hover { text-decoration-color: var(--cherry); }
.prose .page-back { margin-top: clamp(44px, 4.4vw, 64px); padding-top: 18px; border-top: 1px solid var(--hairline); }

/* the legal pages (privacy and terms, the reviewed copy of 2026-10-10): long reading in the same column. The date
   sits under the lede so a careful reader finds it first; each section has its own address (#who-we-are ...). */
.prose .page-updated { margin-top: 16px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.legal > * + :is(p, ul, .table-wrap):not(.page-lede, .page-updated, .page-back) { margin-top: 12px; }
.legal > .page-lede + .page-updated + p { margin-top: 28px; }
.legal h2 { scroll-margin-top: calc(var(--header-h) + 16px); }
.legal h3 { margin: 28px 0 10px; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.legal strong { font-weight: 600; color: var(--ink); }
.prose .page-contact { color: var(--ink); font-weight: 600; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 12px 20px 12px 0; border-top: 1px solid var(--hairline); color: var(--ink-soft); font-weight: 400; }
.legal-table thead th { border-top: 0; padding: 0 20px 8px 0; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink); }
.legal-table tbody th { width: 46%; font-weight: 600; color: var(--ink); }
/* phones: each row stacks, what we do in bold and the legal reason under it */
@media (max-width: 600px) {
  .legal-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .legal-table tr, .legal-table th, .legal-table td { display: block; width: auto; }
  .legal-table tbody th { width: auto; padding: 12px 0 2px; }
  .legal-table td { padding: 0 0 12px; border-top: 0; }
}

/* 404: the line, the reason, the way home; the page fills the screen so the footer sits at the bottom */
.page-404 { min-height: calc(100svh - var(--header-h) - 120px); display: grid; align-content: center; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(28px, 3vw, 40px); }

.fine-link[aria-current="page"] { text-decoration-color: currentColor; }

@media (max-width: 760px) {
  .page-actions .btn { width: 100%; }
  .page-actions { justify-content: center; }
}

/* ---------- The six service pages (batch 2, 2026-10-10) ----------
   Words only (no picture is added unless he names one). The page reads like the credits of one of our films: the
   service named large, the key word in the film's Fraunces italic, then one row per part, its heading on the left
   and its words on the right, on hairlines. The steps run on a play-head rail that draws itself as it comes into
   view (the film's thin progress line), the one moving thing on the page; without scroll-driven animation support,
   or with reduced motion, the rail is simply there. */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--ink-soft); }
.crumbs li { display: inline-flex; align-items: center; }
.crumbs li + li::before {
  content: ""; width: 7px; height: 7px; margin: 0 10px; background: color-mix(in srgb, var(--cherry) 70%, var(--cream));
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat;
}
.crumbs a { display: inline-block; padding: 12px 0; color: var(--ink); font-weight: 500; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.crumbs a:hover { text-decoration-color: var(--cherry); }
.crumbs [aria-current] { padding: 12px 0; }

.svc-hero { margin-top: clamp(18px, 3vw, 44px); padding-bottom: clamp(40px, 5vw, 80px); }
.svc-title {
  max-width: 16ch; font-weight: 800; font-size: clamp(46px, 7.4vw, 112px); line-height: 0.96; letter-spacing: -0.04em;
  text-wrap: balance;
}
.svc-title .dsp { font-weight: 860; font-size: 1.1em; line-height: 0.9; letter-spacing: -0.02em; color: var(--cherry); padding-right: 0.04em; }
.svc-promise {
  margin-top: clamp(20px, 2.6vw, 36px); max-width: 30ch; font-weight: 500; font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.25; letter-spacing: -0.015em; color: var(--ink); text-wrap: balance;
}
.soon-tag {
  display: inline-block; margin-top: clamp(16px, 1.6vw, 22px); padding: 7px 11px 6px; border-radius: 3px;
  background: var(--ink); color: var(--cream); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; line-height: 1;
}

/* one row per part: the heading left, the words right (one column on phones) */
.svc-row {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px clamp(32px, 5vw, 96px);
  padding-block: clamp(28px, 3.4vw, 52px); border-top: 1px solid var(--hairline);
}
.svc-row h2 { font-size: clamp(20px, 1.7vw, 26px); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); }
.svc-body { max-width: 64ch; }
.svc-body p, .svc-body li { color: var(--ink-soft); font-size: 18px; line-height: 1.6; }
.svc-body > p + p { margin-top: 10px; }
.svc-body a { color: var(--ink); font-weight: 600; text-decoration-color: color-mix(in srgb, var(--cherry) 45%, transparent); }
.svc-body a:hover { text-decoration-color: var(--cherry); }
.svc-list { display: grid; gap: 10px; }
.svc-list li { position: relative; padding-left: 24px; color: var(--ink); }
.svc-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.6em; width: 10px; height: 10px; background: var(--cherry);
  -webkit-mask: var(--tri) center / contain no-repeat; mask: var(--tri) center / contain no-repeat;
}
.svc-every { margin-top: 26px; padding-top: 18px; border-top: 1px dashed color-mix(in srgb, var(--ink) 22%, transparent); font-size: 16px !important; }
.svc-every strong { color: var(--ink); font-weight: 700; }

/* the steps: four on a play-head rail */
.svc-steps { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(24px, 3vw, 48px); margin: 0; padding: 0; list-style: none; }
.svc-steps li { position: relative; padding-top: 18px; border-top: 1px solid var(--hairline); }
.svc-steps li::after {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--cherry);
  transform-origin: left; transform: scaleX(1);
}
.svc-steps .step-n {
  display: block; margin-bottom: 6px; font-family: "Fraunces Display", "Poppins", serif; font-style: italic; font-weight: 800;
  font-size: 44px; line-height: 1; letter-spacing: -0.02em; color: var(--cherry); font-synthesis: none;
}
.svc-steps p { color: var(--ink); font-size: 17px; line-height: 1.55; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc-steps li::after { transform: scaleX(0); animation: rail-draw linear both; animation-timeline: view(); animation-range: entry 40% cover 38%; }
    .svc-steps li:nth-child(2)::after { animation-range: entry 55% cover 42%; }
    .svc-steps li:nth-child(4)::after { animation-range: entry 55% cover 42%; }
  }
}
@keyframes rail-draw { to { transform: scaleX(1); } }

.svc-soon h2 { color: var(--cherry); }
.svc-soon { border-top-color: color-mix(in srgb, var(--cherry) 55%, var(--cream)); }
.svc-soon .svc-body p { color: var(--ink); font-weight: 500; }

.svc-question { font-size: clamp(26px, 2.4vw, 36px) !important; line-height: 1.15 !important; color: var(--ink) !important; letter-spacing: -0.01em; }
.svc-q .svc-body p:not(.svc-question) { margin-top: 12px; }

.svc-cta { padding-block: clamp(32px, 4vw, 56px) clamp(48px, 6vw, 96px); border-top: 1px solid var(--hairline); }
.svc-cta .btn { min-height: 60px; padding-inline: 30px 34px; font-size: 17px; }

.svc-more { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 12px clamp(32px, 5vw, 96px); padding-top: 28px; border-top: 1px solid var(--hairline); }
.svc-more h2 { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.svc-more ul { display: flex; flex-wrap: wrap; gap: 0 28px; }
.svc-more-link { display: inline-block; padding: 11px 0; font-weight: 600; font-size: 16px; text-decoration-color: color-mix(in srgb, var(--ink) 30%, transparent); }
.svc-more-link:hover { text-decoration-color: var(--cherry); }

@media (max-width: 760px) {
  .svc-row, .svc-more { grid-template-columns: 1fr; }
  .svc-steps { grid-template-columns: 1fr; gap: 22px; }
  .svc-body p, .svc-body li { font-size: 17px; }
  .svc-steps .step-n { font-size: 38px; }
  .svc-cta .btn { width: 100%; }
  .svc-title { font-size: clamp(42px, 12vw, 64px); }
}
/* phones: the trail stops at Services (the heading right under it names the page) */
@media (max-width: 760px) { .crumbs li:last-child { display: none; } }