/* Royal Knights Techs: inner pages (Managed IT, IT Projects, About, Reviews, Support, Blog).
   Same world as the homepage, by daylight: white stone, navy ink, one blue light.
   The blue "ward line" that traces the homepage form returns here as the frame
   around each photo and the rule under each section. */

:root { --pg-line: #4E9BFF; }
body { background: var(--sc-canvas); color: var(--sc-ink); }
main { overflow-x: clip; }

/* ------------------------------------------------------------ hero ----- */
.pg-hero {
  position: relative; isolation: isolate;
  padding: calc(var(--rk-bar-h) + var(--sc-8)) 0 var(--sc-9);
  background:
    radial-gradient(60% 80% at 90% 0%, #FFFFFF 0%, transparent 65%),
    linear-gradient(180deg, #E3ECF7, var(--sc-canvas));
}
.pg-hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 1px; z-index: -1;
  background: linear-gradient(90deg, transparent, var(--sc-hairline-strong) 20%, var(--sc-hairline-strong) 80%, transparent);
}
.pg-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sc-9); align-items: center; }
.crumbs { margin: 0 0 var(--sc-5); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.5rem; opacity: 0.6; }
.crumbs a { color: inherit; }
.pg-kicker {
  margin: 0 0 var(--sc-4); font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: 0.01em; color: var(--sc-accent);
  display: flex; align-items: center; gap: 0.6rem;
}
.pg-kicker::before { content: ""; width: 1.6rem; height: 2px; background: var(--sc-accent); box-shadow: 0 0 8px rgb(78 155 255 / 0.7); }
.pg-hero h1 { margin: 0; font-size: clamp(2.5rem, 1.3rem + 3.9vw, 5rem); line-height: 1; max-width: 13ch; text-wrap: balance; }
.pg-hero__lede { margin: var(--sc-5) 0 0; font-size: var(--sc-t-lg); line-height: 1.45; max-width: 32ch; text-wrap: pretty; }
.pg-hero__actions { margin-top: var(--sc-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-3) var(--sc-5); }
.pg-hero__actions a:not(.btn) { font-weight: 500; font-variant-numeric: tabular-nums; }

/* A photo held inside the ward line: a lit frame offset from the image that
   draws itself in once, the way the homepage thread traces the form. */
.ward { position: relative; margin: 0; isolation: isolate; }
.ward img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--sc-r-lg); box-shadow: var(--sc-e3);
  background: #DCE5F0;
}
.ward::after {
  content: ""; position: absolute; inset: -0.9rem; z-index: -1; pointer-events: none;
  border: 1.5px solid var(--pg-line); border-radius: calc(var(--sc-r-lg) + 0.9rem);
  box-shadow: 0 0 18px rgb(78 155 255 / 0.35), inset 0 0 18px rgb(78 155 255 / 0.18);
  clip-path: inset(0 100% 100% 0 round calc(var(--sc-r-lg) + 0.9rem));
  transition: clip-path 1400ms var(--sc-ease-out) 200ms;
}
.ward.is-in::after, html:not(.js) .ward::after { clip-path: inset(0 0 0 0 round calc(var(--sc-r-lg) + 0.9rem)); }
.ward figcaption { margin-top: var(--sc-4); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.pg-hero .ward { aspect-ratio: 4 / 3; }
.pg-hero .ward--tall { aspect-ratio: 4 / 4.4; max-width: 34rem; justify-self: end; width: 100%; }

/* ---------------------------------------------------------- facts strip -- */
.pg-facts {
  margin: calc(var(--sc-7) * -1) auto 0; position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-radius: var(--sc-r-lg); background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge);
}
.pg-facts div { padding: var(--sc-5); border-left: 1px solid var(--sc-hairline); }
.pg-facts div:first-child { border-left: 0; }
.pg-facts dt { font-family: var(--sc-font-display); font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem); font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.pg-facts dd { margin: 0.2rem 0 0; font-size: var(--sc-t-xs); line-height: 1.45; color: var(--sc-ink-soft); }

/* ------------------------------------------------- Google reviews ----- */
.gbar {
  display: inline-flex; align-items: center; gap: 0.7rem;
  padding: 0.75rem 1.2rem 0.75rem 0.9rem; border-radius: 999px;
  background: var(--sc-surface); box-shadow: var(--sc-e2), var(--sc-edge);
  text-decoration: none; color: var(--sc-ink);
  transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .gbar:hover { transform: translateY(-2px); box-shadow: var(--sc-e3), var(--sc-edge); } }
.gbar__g { width: 1.6rem; height: 1.6rem; flex: none; }
.gbar__score { font-family: var(--sc-font-display); font-weight: 600; font-size: var(--sc-t-lg); letter-spacing: -0.02em; }
.gbar__count { font-size: var(--sc-t-sm); font-weight: 500; color: var(--sc-ink-soft); }
.grev-grid { margin-top: var(--sc-7); columns: 3 18rem; column-gap: var(--sc-5); }
.grev {
  break-inside: avoid; margin: 0 0 var(--sc-5); display: flex; flex-direction: column; gap: var(--sc-4);
  padding: var(--sc-5); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); box-shadow: var(--sc-e1), var(--sc-edge);
}
.grev figcaption { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.75rem; align-items: center; }
.grev__av {
  grid-row: span 2; width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in oklab, var(--sc-accent) 14%, var(--sc-surface)); color: var(--sc-accent); font-weight: 600;
}
.grev figcaption b { font-weight: 600; line-height: 1.2; }
.grev figcaption .stars { font-size: 0.85rem; }
.grev blockquote { margin: 0; font-size: var(--sc-t-sm); line-height: 1.6; text-wrap: pretty; }
.pg-links { margin: var(--sc-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--sc-3); }

/* ------------------------------------------------- R.O.Y.A.L. values -- */
.values { margin: var(--sc-8) 0 0; padding: 0; list-style: none; }
.values > li {
  display: grid; grid-template-columns: 5rem minmax(0, 14rem) minmax(0, 1fr); gap: var(--sc-4) var(--sc-6); align-items: start;
  padding-block: var(--sc-6); border-top: 1px solid var(--sc-hairline);
}
.values > li:last-child { border-bottom: 1px solid var(--sc-hairline); }
.values__l { font-family: var(--sc-font-display); font-weight: 500; font-size: 4rem; line-height: 0.85; color: var(--sc-accent); text-shadow: 0 0 22px rgb(78 155 255 / 0.35); }
.values h3 { margin: 0.35rem 0 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.02em; }
.values dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); }
.values dt { font-weight: 600; font-size: var(--sc-t-sm); }
.values dd { margin: 0.3rem 0 0; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.55; }

/* Two photos set against each other (about page). */
.pair { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); gap: var(--sc-6); align-items: end; }
.pair .ward:first-child { aspect-ratio: 3 / 4; }
.pair .ward:last-child { aspect-ratio: 4 / 5; margin-bottom: var(--sc-8); }

/* Support: the phone, large. */
.callcard {
  display: grid; gap: var(--sc-2); padding: var(--sc-6); border-radius: var(--sc-r-lg); text-decoration: none; color: #FFFFFF;
  background: radial-gradient(120% 120% at 100% 0%, #1E4E8F 0%, transparent 60%), linear-gradient(160deg, #13294A, #0B1F3A);
  box-shadow: var(--sc-e3), inset 0 1px 0 rgb(255 255 255 / 0.08);
  transition: transform 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .callcard:hover { transform: translateY(-2px); } }
.callcard small { color: #9FB6D6; font-size: var(--sc-t-sm); font-weight: 500; }
.callcard b { font-family: var(--sc-font-display); font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.callcard span { color: #6FB2FF; font-weight: 600; font-size: var(--sc-t-sm); }
.faq details { border-top: 1px solid var(--sc-hairline); }
.faq details:last-child { border-bottom: 1px solid var(--sc-hairline); }
.faq summary { cursor: pointer; padding: var(--sc-4) 0; font-weight: 500; list-style: none; display: flex; justify-content: space-between; gap: var(--sc-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--sc-accent); font-weight: 600; transition: transform 200ms var(--sc-ease-out); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 var(--sc-5); color: var(--sc-ink-soft); max-width: 60ch; }

/* -------------------------------------------------------- sections ----- */
.pg-section { padding-block: var(--sc-section); }
.pg-section--tint { background: linear-gradient(180deg, #F4F8FC, #E9F0F8); }
.pg-head { max-width: 46rem; }
.pg-head h2, .pg-h2 { margin: 0; font-size: var(--sc-t-2xl); line-height: 1.04; text-wrap: balance; }
.pg-head p { margin: var(--sc-4) 0 0; font-size: var(--sc-t-lg); line-height: 1.5; color: var(--sc-ink-soft); text-wrap: pretty; }
/* The lit rule under a section heading. */
.pg-rule { display: block; width: 4.5rem; height: 2px; margin-top: var(--sc-5); background: var(--sc-accent); box-shadow: 0 0 10px rgb(78 155 255 / 0.7); transform-origin: 0 50%; }
.js .pg-rule { transform: scaleX(0); transition: transform 900ms var(--sc-ease-out) 150ms; }
.js .is-in .pg-rule, .js .pg-rule.is-in { transform: none; }

.pg-prose { font-size: var(--sc-t-base); line-height: 1.75; }
.pg-prose p { margin: 0 0 var(--sc-4); max-width: 64ch; text-wrap: pretty; }
.pg-prose p:last-child { margin-bottom: 0; }

.pg-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sc-9); align-items: center; }
.pg-split--rev > :first-child { order: 2; }

/* Three short reasons, each on a stone tile. */
.pg-reasons { margin: var(--sc-8) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sc-5); }
.pg-reasons--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stone {
  position: relative; padding: var(--sc-6); border-radius: var(--sc-r-lg);
  background: var(--rk-stone), linear-gradient(160deg, #FFFFFF 0%, #F1F4F8 60%, #E8EDF3 100%);
  background-size: 220px 220px, auto;
  box-shadow: var(--sc-e2), inset 0 1px 0 #FFFFFF, inset 0 0 0 1px rgb(11 31 58 / 0.05);
}
.stone::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; border-radius: var(--sc-r-lg) var(--sc-r-lg) 0 0;
  background: linear-gradient(90deg, var(--sc-accent), transparent 70%);
}
.stone h3 { margin: 0; font-family: var(--sc-font-display); font-size: var(--sc-t-lg); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.stone p { margin: var(--sc-3) 0 0; color: var(--sc-ink-soft); line-height: 1.6; }
.stone .ico { margin-bottom: var(--sc-5); }

.ico { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 10px; background: #FFFFFF; box-shadow: var(--sc-e1), inset 0 0 0 1px rgb(11 31 58 / 0.06); }
.ico svg { width: 1.4rem; height: 1.4rem; stroke: var(--sc-accent); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Blue ticks for "what you get" lists. */
.ticks { margin: var(--sc-5) 0 0; padding: 0; list-style: none; display: grid; gap: var(--sc-3); }
.ticks li { position: relative; padding-left: 2rem; line-height: 1.55; max-width: 60ch; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: color-mix(in oklab, var(--sc-accent) 12%, #FFFFFF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.5 3 3 6-7' fill='none' stroke='%231662C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
  box-shadow: inset 0 0 0 1px rgb(22 98 196 / 0.18);
}
.ticks--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-3) var(--sc-6); }

/* ------------------------------------------ service index + chapters ---- */
.svc-layout { display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr); gap: var(--sc-9); align-items: start; }
.svc-layout > *, .pg-split > *, .pg-hero__grid > *, .pg-contact__grid > * { min-width: 0; }
.svc-index { position: sticky; top: calc(var(--rk-bar-h) + 2rem); font-size: var(--sc-t-sm); }
.svc-index p { margin: 0 0 var(--sc-3); font-size: var(--sc-t-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-ink-soft); }
.svc-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--sc-hairline-strong); }
.svc-index a {
  display: block; padding: 0.4rem 0 0.4rem var(--sc-4); margin-left: -1px; border-left: 2px solid transparent;
  color: var(--sc-ink-soft); text-decoration: none; line-height: 1.35;
  transition: color var(--sc-d-fast) var(--sc-ease-out), border-color var(--sc-d-fast) var(--sc-ease-out);
}
.svc-index a:hover { color: var(--sc-ink); }
.svc-index a[aria-current="true"] { color: var(--sc-ink); font-weight: 600; border-left-color: var(--sc-accent); box-shadow: -6px 0 10px -6px rgb(78 155 255 / 0.9); }

.svc { padding-block: var(--sc-8); border-top: 1px solid var(--sc-hairline); scroll-margin-top: calc(var(--rk-bar-h) + 1rem); }
.svc:first-child { padding-top: 0; border-top: 0; }
.svc__top { display: flex; align-items: center; gap: var(--sc-4); }
.svc__num { font-family: var(--sc-font-display); font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-accent); font-variant-numeric: tabular-nums; }
.svc__name { margin: 0; font-size: var(--sc-t-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sc-ink-soft); }
.svc h3 { margin: var(--sc-5) 0 0; font-family: var(--sc-font-display); font-size: var(--sc-t-xl); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; max-width: 24ch; text-wrap: balance; }
.svc .pg-prose { margin-top: var(--sc-5); }
.svc__aside { margin-top: var(--sc-6); }
.svc__aside .ward { aspect-ratio: 16 / 9; }

/* Projects: a two-column ledger of numbered project types. */
.ledger-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sc-5); margin-top: var(--sc-8); }
.proj { display: flex; flex-direction: column; scroll-margin-top: calc(var(--rk-bar-h) + 1rem); }
.proj h3 { margin-top: var(--sc-4); }
.proj .lede { margin: var(--sc-3) 0 0; font-weight: 600; color: var(--sc-ink); line-height: 1.4; }
.proj .ticks { margin-top: auto; padding-top: var(--sc-5); font-size: var(--sc-t-sm); }
.proj__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sc-4); }
.proj__num { font-family: var(--sc-font-display); font-weight: 500; font-size: 2.4rem; line-height: 1; letter-spacing: -0.04em; color: color-mix(in oklab, var(--sc-accent) 70%, #FFFFFF); }

/* Jump chips (projects page). */
.chips { margin: var(--sc-6) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--sc-2); }
.chips a {
  display: inline-block; padding: 0.5rem 0.9rem; border-radius: 999px; font-size: var(--sc-t-sm); font-weight: 500; text-decoration: none;
  background: var(--sc-surface); color: var(--sc-ink); box-shadow: var(--sc-e1), inset 0 0 0 1px var(--sc-hairline);
  transition: box-shadow var(--sc-d-fast) var(--sc-ease-out), color var(--sc-d-fast) var(--sc-ease-out);
}
.chips a:hover { color: var(--sc-accent); box-shadow: var(--sc-e2), inset 0 0 0 1px rgb(78 155 255 / 0.6); }

/* ------------------------------------------------------- photo band ---- */
.pg-band { position: relative; isolation: isolate; min-height: min(78vh, 46rem); display: flex; align-items: flex-end; overflow: clip; color: #FFFFFF; }
.pg-band > img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; z-index: -2; transform: translate3d(0, var(--band-y, 0px), 0); }
.pg-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgb(11 31 58 / 0.72) 0%, rgb(11 31 58 / 0.35) 45%, transparent 70%),
    linear-gradient(180deg, rgb(11 31 58 / 0) 30%, rgb(11 31 58 / 0.82));
}
.pg-band .sc-wrap { padding-block: var(--sc-9); }
.pg-band blockquote { margin: 0; max-width: 30ch; font-family: var(--sc-font-display); font-size: clamp(1.5rem, 1rem + 1.8vw, 2.6rem); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; }
.pg-band p { margin: var(--sc-4) 0 0; max-width: 46ch; color: #D5E1F2; }
.pg-band .pg-rule { background: #6FB2FF; }

/* -------------------------------------------------------- quotes ------- */
.pg-quote { margin: 0; }
.pg-quote blockquote { margin: 0; font-family: var(--sc-font-display); font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.35; letter-spacing: -0.012em; text-wrap: pretty; }
.pg-quote figcaption { margin-top: var(--sc-5); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.pg-quote figcaption b { display: block; color: var(--sc-ink); font-weight: 600; }

/* ------------------------------------------------------ contact ------- */
.pg-contact { position: relative; padding-block: var(--sc-section); background: radial-gradient(60% 50% at 80% 10%, #FFFFFF 0%, transparent 70%), linear-gradient(180deg, var(--sc-canvas), #DCE8F6); }
.pg-contact__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--sc-9); align-items: start; }
.pg-contact h2 { margin: 0; font-size: var(--sc-t-2xl); line-height: 1.04; }
.pg-contact__lede { margin: var(--sc-4) 0 0; font-size: var(--sc-t-lg); max-width: 30ch; }
.lines { margin: var(--sc-6) 0 0; display: grid; gap: var(--sc-3); }
.line {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sc-4);
  padding: var(--sc-4) var(--sc-5); border-radius: var(--sc-r-md);
  background: var(--sc-surface); box-shadow: var(--sc-e1), var(--sc-edge); text-decoration: none;
  transition: transform 160ms var(--sc-ease-out), box-shadow 160ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .line:hover { transform: translateY(-2px); box-shadow: var(--sc-e2), var(--sc-edge); } }
.line small { display: block; color: var(--sc-ink-soft); font-size: var(--sc-t-xs); font-weight: 500; }
.line span { font-weight: 600; }
.line b { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.next { margin: var(--sc-7) 0 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: var(--sc-4); }
.next li { counter-increment: n; display: grid; grid-template-columns: 2.2rem 1fr; align-items: center; gap: var(--sc-3); font-weight: 500; }
.next li::before {
  content: counter(n); width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--sc-font-display); font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-accent);
  background: var(--sc-surface); box-shadow: var(--sc-e1), inset 0 0 0 1px rgb(78 155 255 / 0.45);
}
.next__h { margin: var(--sc-7) 0 0; font-size: var(--sc-t-sm); font-weight: 600; color: var(--sc-ink-soft); }
.next__h + .next { margin-top: var(--sc-4); }
.form-panel {
  position: relative; padding: var(--sc-3); border-radius: var(--sc-r-lg);
  background: var(--sc-surface); box-shadow: var(--sc-e3), var(--sc-edge);
}
.form-panel iframe { display: block; min-height: 520px; }
.form-panel.ward::after { inset: -0.75rem; border-radius: calc(var(--sc-r-lg) + 0.75rem); }

/* --------------------------------------------------------- reveals ----- */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 700ms var(--sc-ease-out), transform 900ms var(--sc-ease-out); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .ward::after { clip-path: none !important; transition: none; }
  .js .pg-rule { transform: none; transition: none; }
  .pg-band > img { transform: none; }
}

/* ---------------------------------------------------------- mobile ----- */
@media (max-width: 1080px) {
  .pg-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-facts div:nth-child(4) { border-left: 0; }
  .pg-facts div:nth-child(n+4) { border-top: 1px solid var(--sc-hairline); }
}
@media (max-width: 860px) {
  .pg-hero { padding: calc(var(--rk-bar-h) + var(--sc-6)) 0 var(--sc-8); }
  .pg-hero__grid, .pg-split, .pg-contact__grid, .svc-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); }
  .pg-split--rev > :first-child { order: 0; }
  .pg-hero .ward, .pg-hero .ward--tall { margin-inline: 0.9rem; max-width: none; justify-self: stretch; width: auto; }
  .pg-hero .ward--tall { aspect-ratio: 4 / 3.6; }
  .pg-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: calc(var(--sc-6) * -1); }
  .pg-facts div { padding: var(--sc-4); border-left: 0; border-top: 1px solid var(--sc-hairline); }
  .pg-facts div:nth-child(even) { border-left: 1px solid var(--sc-hairline); }
  .pg-facts div:nth-child(-n+2) { border-top: 0; }
  .pg-facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pg-reasons, .pg-reasons--4, .ledger-grid, .ticks--cols { grid-template-columns: 1fr; }
  /* The service index becomes a sticky row of chips under the bar. */
  .svc-index {
    top: var(--rk-bar-h); z-index: 5; margin-inline: calc(var(--sc-gutter) * -1); padding: var(--sc-3) var(--sc-gutter);
    background: color-mix(in oklab, var(--sc-canvas) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sc-hairline);
  }
  .svc-index p { display: none; }
  .svc-index ol { display: flex; gap: var(--sc-2); overflow-x: auto; border: 0; scrollbar-width: none; }
  .svc-index ol::-webkit-scrollbar { display: none; }
  .svc-index a { white-space: nowrap; padding: 0.45rem 0.85rem; margin: 0; border: 0; border-radius: 999px; background: var(--sc-surface); box-shadow: inset 0 0 0 1px var(--sc-hairline-strong); }
  .svc-index a[aria-current="true"] { background: var(--sc-ink); color: #FFFFFF; box-shadow: none; }
  .svc { scroll-margin-top: calc(var(--rk-bar-h) + 4.5rem); }
  .values > li { grid-template-columns: 3.4rem 1fr; }
  .values__l { font-size: 3rem; grid-row: span 2; }
  .values dl { grid-template-columns: 1fr; gap: var(--sc-4); }
  .pair { gap: var(--sc-4); }
  .pg-band { min-height: 32rem; }
  .pg-band > img { object-position: var(--band-pos, 50% 50%); }
  .form-panel.ward { margin-inline: 0.75rem; }
}