/* Statura Health — the inner pages (services, sectors, safety watch).
   Loaded after v2.css, whose tokens, buttons, nav, rows, law table, FAQ, offer
   and footer these pages share with the homepage. Only what the homepage has no
   use for lives here: the page opening, section heads, the related list and the
   headline wire. */

/* ---------- the opening: a drawing on the operator-green field ---------- */
.pg { padding: var(--frame); }
.pg__frame {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); column-gap: clamp(24px, 4vw, 72px);
  min-height: min(900px, calc(100svh - 2 * var(--frame)));
  padding: clamp(116px, 15vh, 164px) clamp(20px, 4vw, 64px) 0;
  border-radius: 22px;
  background: radial-gradient(80% 90% at 78% 32%, var(--field-2) 0%, var(--field) 66%);
  color: #fff;
}
.pg__frame::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 20, 15, 0.5) 0%, rgba(4, 20, 15, 0) 22%);
}
.pg__copy { align-self: end; padding-bottom: clamp(36px, 5vh, 56px); }
.crumb { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: clamp(22px, 3.4vh, 34px); font-size: 14px; color: var(--on-dark-3); }
.crumb a { color: var(--on-dark-2); text-decoration: none; }
.crumb a:hover { color: #fff; text-decoration: underline; }
.crumb span { color: rgba(243, 245, 242, 0.34); }
.crumb b { font-weight: 400; color: var(--sig); }
.pg h1 {
  max-width: 17ch;
  font-size: clamp(38px, 4.6vw, 72px); font-weight: 400;
  line-height: 1.01; letter-spacing: -0.04em; text-wrap: balance;
}
.pg__ref { margin-top: 14px; font-size: clamp(17px, 1.5vw, 21px); letter-spacing: -0.012em; color: var(--sig); }
.pg__sub { margin-top: 24px; max-width: 60ch; font-size: clamp(15.5px, 1.2vw, 17.5px); color: rgba(255, 255, 255, 0.82); text-wrap: pretty; }
.pg__act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.pg__art { align-self: stretch; min-height: 420px; margin: 0 calc(-1 * clamp(8px, 2vw, 32px)) 0 0; }
.pg__art svg { left: 0; top: 4%; width: 100%; height: 88%; }
.pg__assure {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 18px 0 22px; border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 14px; color: rgba(255, 255, 255, 0.74);
}
.pg__assure i { width: 6px; height: 6px; background: var(--sig); transform: rotate(45deg); border-radius: 1px; }
.pg :focus-visible { outline-color: var(--sig); }

/* the safety watch opens on words alone */
.pg--short .pg__frame { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: clamp(130px, 18vh, 180px); }
.pg--short .pg__copy { max-width: 900px; }

/* ---------- sections ---------- */
.ps { padding: var(--sec) var(--pad) 0; }
.ps--mist { margin: var(--sec) var(--frame) 0; padding: var(--sec) calc(var(--pad) - var(--frame)); border-radius: var(--r-lg); background: var(--mist); }
.ps__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px 48px; align-items: end; }
.ps__h { max-width: 17ch; font-size: clamp(32px, 3.7vw, 56px); font-weight: 400; line-height: 1.03; letter-spacing: -0.038em; text-wrap: balance; }
.ps__ref { margin-top: 14px; font-size: 15px; color: var(--ink-3); }
.ps > .ask { margin-top: clamp(36px, 4.4vw, 60px); }
.ps .law { background: var(--paper); }

/* ---------- related: three ways on, as rows rather than cards ---------- */
.rel__list { margin-top: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.rel__list li {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) 28px; gap: 40px; align-items: center;
  padding: 26px 0; border-bottom: 1px solid var(--line);
}
.rel__list b { font-size: clamp(21px, 2vw, 28px); font-weight: 400; letter-spacing: -0.028em; line-height: 1.15; transition: transform 0.4s var(--ease), color 0.3s; }
.rel__list b a { text-decoration: none; }
.rel__list b a::after { content: ""; position: absolute; inset: 0; }
.rel__list span { font-size: 16px; color: var(--ink-2); max-width: 60ch; }
.rel__list svg { width: 24px; height: 24px; color: var(--sig-deep); transition: transform 0.4s var(--ease); }
.rel__list li:hover b { transform: translateX(8px); color: var(--sig-deep); }
.rel__list li:hover svg { transform: translateX(6px); }
.rel__list li:has(a:focus-visible) { outline: 2px solid var(--sig-deep); outline-offset: 4px; border-radius: 6px; }
.rel__list a:focus-visible { outline: 0; }

/* ---------- the offer at the foot of each page ---------- */
.pg-offer .offer__art { margin-top: clamp(32px, 4vw, 48px); }
.pg-offer .offer__panel { position: sticky; top: 110px; }

/* ---------- safety watch: the headline wire ---------- */
.wire { padding: clamp(56px, 7vw, 96px) var(--pad) var(--sec); }
.wire__status {
  display: flex; align-items: center; gap: 12px;
  padding: 22px 26px; border-radius: 18px; background: var(--mist);
  font-size: 16px; color: var(--ink-2);
}
.wire__status::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sig);
  box-shadow: 0 0 0 4px rgba(72, 214, 158, 0.22);
  animation: wire-pulse 1.4s ease-in-out infinite;
}
.wire__status.is-bad { color: #8a2f25; background: #f7ecea; }
.wire__status.is-bad::before { background: #b0453a; box-shadow: 0 0 0 4px rgba(176, 69, 58, 0.18); animation: none; }
.wire__status[hidden] { display: none; }
@keyframes wire-pulse { 50% { opacity: 0.35; } }
.wire__group + .wire__group { margin-top: var(--sec); }
.wire__group[hidden] { display: none; }
.wire__list { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--line); counter-reset: wire; }
.wire__item {
  position: relative;
  display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, 220px); gap: 8px 32px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--line);
}
.wire__item::before {
  counter-increment: wire; content: counter(wire, decimal-leading-zero);
  font: 400 13px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.wire__link { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.35; letter-spacing: -0.012em; text-decoration: none; text-wrap: pretty; }
.wire__link::after { content: ""; position: absolute; inset: 0; }
.wire__item:hover .wire__link { color: var(--sig-deep); text-decoration: underline; }
.wire__meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 12px; font: 400 12.5px var(--mono); color: var(--ink-3); text-align: right; }
.wire__meta b { font-weight: 400; color: var(--ink-2); }
.wire__foot { margin-top: 28px; max-width: 80ch; }

/* ---------- narrower screens ---------- */
@media (max-width: 1080px) {
  .ps__head { grid-template-columns: 1fr; align-items: start; }
  .pg-offer .offer__panel { position: static; }
}
@media (max-width: 900px) {
  .pg__frame { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-top: 100px; }
  .pg__copy { padding-bottom: 8px; }
  .pg__art { order: -1; min-height: 0; aspect-ratio: 4 / 3; max-height: 42svh; margin: -12px 0 8px; }
  /* room either side for the drawing's labels, which keep one size on screen */
  .pg__art svg { left: 9%; top: 6%; width: 74%; height: 86%; }
  .pg__art svg[data-scene="respond"] { left: 0; }
  .pg--short .pg__frame { padding-top: 116px; padding-bottom: 32px; }
  .pg__assure { margin-top: 24px; }
}
@media (max-width: 760px) {
  .pg h1 { font-size: clamp(34px, 9.4vw, 44px); }
  .pg__act .bt { flex: 1 1 auto; }
  .pg__assure { gap: 6px 12px; font-size: 13px; }
  .ps__h { font-size: clamp(30px, 8.4vw, 38px); }
  .rel__list li { grid-template-columns: minmax(0, 1fr) 24px; gap: 8px 16px; padding: 22px 0; }
  .rel__list span { grid-column: 1; }
  .rel__list svg { grid-column: 2; grid-row: 1 / span 2; }
  .law td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 12.5px; color: var(--ink-3); }
  .wire__item { grid-template-columns: 26px minmax(0, 1fr); gap: 6px 14px; }
  .wire__meta { grid-column: 2; justify-content: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .wire__status::before { animation: none; }
  .rel__list b, .rel__list svg { transition: none; }
}