/* ==========================================================================
   Safe Step v2 — the page IS the instrument.

   v1 was the 15-section marketing skeleton: hero, stat band, service grid,
   process, testimonials, story, CTA. Restyling it three times never changed
   that it was a brochure. v2 throws the skeleton out.

   One idea: you describe your property once, in a rail that stays with you,
   and every number on the page is then YOUR number. No hero. No stat band.
   No persona cards. No origin story section. Seven blocks, one argument.

   Palette and family inherited from tokens.css: navy, the pale logo blue,
   white, one grotesque.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

.num {
  /* no tabular-nums: see the note in site.css */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--navy);
  text-underline-offset: 3px;
}
button {
  font: inherit;
}
h1,
h2,
h3,
h4 {
  font-family: var(--font);
  color: var(--ink);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin: 0 0 0.5em;
}
p {
  margin: 0 0 1em;
}
p:last-child {
  margin-bottom: 0;
}
::selection {
  background: var(--blue);
  color: var(--navy-deep);
}
:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: #fff;
  padding: 0.75rem 1.25rem;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- micro-label, used everywhere a machine measured something ----------- */
.k {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Top bar. Not a nav with dropdowns; a working header, one line.
   -------------------------------------------------------------------------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--navy);
}
.bar__in {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem clamp(1rem, 3vw, 2rem);
  min-height: 60px;
}
.bar__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex: none;
  min-height: 44px;
}
.bar__brand img {
  height: 34px;
  width: auto;
}
.bar__what {
  display: none;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  border-left: 1px solid var(--rule-mid);
  padding-left: 0.75rem;
  line-height: 1.5;
}
@media (min-width: 900px) {
  .bar__what {
    display: block;
  }
}
.bar__links {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 1.5rem;
}
@media (min-width: 780px) {
  .bar__links {
    display: flex;
  }
}
.bar__links a {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.bar__links a:hover {
  color: var(--navy);
}
.bar__cta {
  margin-left: auto;
  flex: none;
}
@media (min-width: 780px) {
  .bar__cta {
    margin-left: 0;
  }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--navy);
  border-radius: 0;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  text-align: center;
  transition: background 0.14s linear, color 0.14s linear;
}
.btn:hover {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
}
.btn--ghost {
  background: transparent;
  color: var(--navy);
  border-color: var(--rule-mid);
}
.btn--ghost:hover {
  background: var(--blue-wash);
  border-color: var(--navy);
  color: var(--navy);
}
.btn--block {
  width: 100%;
}
.btn--lg {
  min-height: 54px;
  font-size: 0.6875rem;
}

/* --------------------------------------------------------------------------
   The page: a rail that stays with you, and the sheet beside it.
   -------------------------------------------------------------------------- */
.page {
  display: grid;
  align-items: start;
}
/* Grid items default to min-width:auto, so the scope table's min-width blew the
   single mobile column wider than the viewport and clipped the rail off-screen.
   overflow-x:clip hid it from a scroll test, which is why this needs measuring
   per-element, not just window.scrollX. */
.page > * {
  min-width: 0;
}
@media (min-width: 1040px) {
  .page {
    grid-template-columns: 360px minmax(0, 1fr);
  }
}

/* --- the rail ------------------------------------------------------------ */
.rail {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.82);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}
@media (min-width: 1040px) {
  .rail {
    position: sticky;
    top: 61px;
    height: calc(100vh - 61px);
    overflow-y: auto;
    border-right: 1px solid var(--navy);
  }
}
.rail__lede {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  padding-bottom: 1rem;
  margin-bottom: 1.1rem;
  line-height: 1.55;
}
.rail__lede b {
  color: #fff;
  font-weight: 600;
}
.rail h2 {
  color: #fff;
  font-size: 1.0625rem;
  margin-bottom: 0.15rem;
}
.rail .k {
  color: var(--blue);
  display: block;
  margin-bottom: 0.9rem;
}

.f {
  margin-bottom: 1rem;
}
.f__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.15rem;
}
.f__lab {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.f__val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blue);
}
.rail input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  margin: -12px 0;
  background: transparent;
  cursor: pointer;
  display: block;
}
.rail input[type="range"]::-webkit-slider-runnable-track {
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.rail input[type="range"]::-moz-range-track {
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.rail input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  background: var(--blue);
  border: 0;
  transform: rotate(45deg);
}
.rail input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  background: var(--blue);
  border: 0;
  transform: rotate(45deg);
}

.out {
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  margin-top: 1.35rem;
  padding-top: 0.4rem;
}
.out__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
.out__row:last-of-type {
  border-bottom: 0;
}
.out__k {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  max-width: 17ch;
  line-height: 1.5;
}
.out__v {
  font-size: 1.375rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.out__v--hero {
  font-size: 2.125rem;
  color: var(--blue);
}
.rail__note {
  font-size: 0.625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 1rem;
}
.rail__note b {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
}
.rail .btn {
  margin-top: 1.15rem;
}

/* --- the sheet ----------------------------------------------------------- */
.sheet {
  padding: clamp(1.5rem, 3.5vw, 3rem) clamp(1rem, 3vw, 2.5rem) 0;
  max-width: 1080px;
}
.blk {
  padding-block: clamp(1.75rem, 3.5vw, 3rem);
  border-bottom: 1px solid var(--rule);
}
.blk:last-child {
  border-bottom: 0;
}
.blk__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin-bottom: 1.25rem;
}
.blk__h h2 {
  font-size: var(--text-xl);
  margin: 0;
}
.blk__h .k {
  color: var(--navy);
}
.blk > p {
  max-width: 74ch;
}
.blk > .led__sum,
.blk > .hint {
  max-width: none;
}

/* opening statement: the only place on the page with big type */
.open {
  padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 3.5vw, 2.75rem);
  border-bottom: 1px solid var(--navy);
}
.open p {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 30ch;
  font-weight: 500;
  margin: 0 0 1.1rem;
}
.open p b {
  font-weight: 700;
  background: var(--blue);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.1em;
}
.open__sub {
  font-size: var(--text-base) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  color: var(--muted) !important;
  max-width: 68ch !important;
  line-height: 1.6 !important;
}

/* the credential row, inline and compact */
.creds {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.5rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.5rem;
}
.creds img {
  height: 30px;
  width: auto;
  mix-blend-mode: multiply;
  margin-block: 0.65rem;
}
.creds span {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--navy);
  padding: 0.35rem 0.5rem;
  background: var(--blue);
}

/* --------------------------------------------------------------------------
   The scope sheet. This replaces the service grid entirely: five services
   as rows, costed against the property in the rail.
   -------------------------------------------------------------------------- */
.scope {
  width: 100%;
  border-collapse: collapse;
}
.scope thead th {
  text-align: left;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--navy);
  white-space: nowrap;
}
.scope tbody td {
  padding: 0.9rem 0.9rem 0.9rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  font-size: var(--text-base);
}
.scope tbody tr:hover td {
  background: var(--blue-wash);
}
.scope__svc {
  font-weight: 600;
  color: var(--ink);
  width: 22%;
}
.scope__svc a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.scope__svc a:hover {
  color: var(--navy);
  text-decoration: underline;
}
.scope__svc small {
  display: block;
  font-weight: 400;
  color: var(--muted);
  font-size: var(--text-sm);
  margin-top: 0.2rem;
  line-height: 1.5;
}
.scope__n {
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
}
.scope__n small {
  display: block;
  font-weight: 600;
  font-size: 0.5625rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.2rem;
}
.scope__na {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.yes,
.no {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.28rem 0.45rem;
  white-space: nowrap;
}
.yes {
  background: var(--blue);
  color: var(--navy-deep);
}
.no {
  background: var(--off);
  color: var(--muted);
}
.scope__wrap {
  overflow-x: auto;
  scroll-padding-inline-start: 0;
}
@media (max-width: 720px) {
  .scope {
    min-width: 640px;
  }
}

/* --- the ledger: two paths, in the visitor's numbers --------------------- */
.ledger {
  display: grid;
  border: 1px solid var(--navy);
}
@media (min-width: 720px) {
  .ledger {
    grid-template-columns: 1fr 1fr;
  }
}
.led {
  padding: 1.15rem 1.25rem 1.35rem;
}
.led + .led {
  border-top: 1px solid var(--rule-mid);
}
@media (min-width: 720px) {
  .led + .led {
    border-top: 0;
    border-left: 1px solid var(--navy);
  }
}
.led--us {
  background: var(--blue-wash);
}
.led__n {
  font-size: clamp(2.5rem, 4.5vw, 3.5rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--ink);
  display: block;
  margin: 0.35rem 0 0.4rem;
}
.led--us .led__n {
  color: var(--navy);
}
.led__u {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.9rem;
}
.led ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-mid);
}
.led li {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-soft);
}
.led li:last-child {
  border-bottom: 0;
}
.led__sum {
  border: 1px solid var(--navy);
  border-top: 0;
  background: var(--navy);
  color: #fff;
  padding: 0.9rem 1.25rem;
  font-size: var(--text-md);
  line-height: 1.5;
}
.led__sum strong {
  color: var(--blue);
  font-weight: 700;
}

/* --- evidence: one continuous strip, not a grid of cards ---------------- */
.strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(78%, 340px);
  gap: 1px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 0;
  background: var(--rule-mid);
  border: 1px solid var(--rule-mid);
}
.shot {
  scroll-snap-align: start;
  background: #fff;
}
.shot__img {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--off);
}
.shot__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shot__tag {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  color: #fff;
  background: var(--ink);
}
.shot__tag--a {
  background: var(--navy);
  color: var(--blue);
}
.shot__cap {
  padding: 0.7rem 0.85rem 0.9rem;
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
}
.shot__cap b {
  display: block;
  color: var(--ink);
  font-size: var(--text-base);
  margin-bottom: 0.15rem;
}
.hint {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.7rem;
}

/* --- compliance sheet ---------------------------------------------------- */
.spec {
  border-top: 1px solid var(--navy);
}
.spec__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 620px) {
  .spec__row {
    grid-template-columns: 10rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: baseline;
  }
}
.spec__v {
  font-size: var(--text-base);
  color: var(--ink);
  font-weight: 500;
}
.spec__v small {
  display: block;
  color: var(--muted);
  font-weight: 400;
  font-size: var(--text-sm);
  margin-top: 0.2rem;
  line-height: 1.6;
}

/* --- references ---------------------------------------------------------- */
.refs {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--navy);
}
@media (min-width: 860px) {
  .refs {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }
}
.ref {
  margin: 0;
  padding: 1.1rem 0 1.2rem;
  border-bottom: 1px solid var(--rule);
}
.ref blockquote {
  margin: 0 0 0.85rem;
  font-size: var(--text-md);
  line-height: 1.55;
  color: var(--ink);
}
.ref figcaption {
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.ref figcaption b {
  color: var(--navy);
}

/* --- the ask ------------------------------------------------------------- */
.ask {
  background: var(--navy-deep);
  color: rgba(255, 255, 255, 0.8);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 3rem);
}
.ask h2 {
  color: #fff;
  font-size: var(--text-xl);
}
.ask .k {
  color: var(--blue);
  display: block;
  margin-bottom: 0.6rem;
}
.ask__grid {
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 860px) {
  .ask__grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 2.5rem;
  }
}
.ask__recap {
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  margin-top: 1rem;
}
.ask__recap div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--text-sm);
}
.ask__recap span:first-child {
  color: rgba(255, 255, 255, 0.6);
}
.ask__recap span:last-child {
  color: #fff;
  font-weight: 600;
}
.frm {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 560px) {
  .frm--2 {
    grid-template-columns: 1fr 1fr;
  }
}
.frm label {
  display: block;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 0.25rem;
}
.frm input,
.frm select,
.frm textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.6rem 0.7rem;
  font-family: var(--font);
  font-size: var(--text-md);
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 0;
}
.frm textarea {
  min-height: 84px;
  resize: vertical;
}
.frm input:focus,
.frm select:focus,
.frm textarea:focus {
  border-color: var(--blue);
  outline: none;
}
.frm option {
  color: var(--ink);
}
.fine {
  font-size: 0.625rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
  margin: 0.5rem 0 0;
}
.ask .btn {
  background: var(--blue);
  color: var(--navy-deep);
  border-color: var(--blue);
}
.ask .btn:hover {
  background: #fff;
  border-color: #fff;
}

/* --- foot ---------------------------------------------------------------- */
.foot {
  background: var(--navy-black);
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--text-sm);
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem);
}
.foot__in {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: center;
  justify-content: space-between;
  max-width: 1080px;
}
.foot a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.foot a:hover {
  color: var(--blue);
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.foot__addr {
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
}

/* --- mobile action bar --------------------------------------------------- */
.mob {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--navy-deep);
  border-top: 1px solid var(--blue);
}
@media (min-width: 1040px) {
  .mob {
    display: none;
  }
}
.mob a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  color: #fff;
  text-decoration: none;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.mob a:first-child {
  background: var(--navy);
}
.mob a + a {
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
body {
  padding-bottom: 54px;
}
@media (min-width: 1040px) {
  body {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}