/* ==========================================================================
   RENO RESCUE
   Brand Bible v3.2 compliant. Navy / Yellow / Off-white / Dark gray only.
   No orange, no bright red, no gradients.
   ========================================================================== */

:root {
  --navy: #1B2A4A;
  --navy-deep: #131E36;
  --yellow: #FFC72C;
  --offwhite: #FAFAF8;
  --gray: #343434;
  --rule: rgba(27, 42, 74, 0.14);
  --paper: #F1F0EC;

  --display: "Big Shoulders Display", "Big Shoulders", "Oswald", Impact, sans-serif;
  --body: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hand: "Nothing You Could Do", cursive;

  --wrap: 1080px;
  --gutter: 22px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--gray);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* Navy by default: yellow on a light ground measures 1.4:1, well under the
   3:1 WCAG 1.4.11 needs. Yellow is kept where the ground is dark. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.masthead :focus-visible,
.band-navy :focus-visible,
.foot :focus-visible {
  outline-color: var(--yellow);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: var(--offwhite);
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 18px;
  z-index: 60;
}

.skip:focus { left: 12px; top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --- Type ---------------------------------------------------------------- */

h1, h2, h3, .display {
  font-family: var(--display);
  font-weight: 800;
  line-height: 0.94;
  letter-spacing: 0.005em;
  color: var(--navy);
  margin: 0 0 0.4em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.9rem, 11vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 7vw, 3.3rem); }
h3 { font-size: clamp(1.35rem, 4.4vw, 1.75rem); line-height: 1.02; }

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.14rem; line-height: 1.55; }

/* Title-block eyebrow. Borrowed from a drawing sheet, not decoration:
   it tells you which sheet of the argument you are on. */
.eyebrow {
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--yellow);
}
.eyebrow--light { color: var(--offwhite); }

.hand {
  font-family: var(--hand);
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--navy);
}

/* --- Highlighter. The signature device. ---------------------------------- */

.mark {
  background-image: linear-gradient(var(--yellow), var(--yellow));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.42em;
  padding: 0 0.06em;
}

/* Undrawn until JS adds .is-drawn, which waits on document.fonts.ready so the
   sweep can't start before the display face swaps in and reflows the heading.
   Gated on .js so the highlight is simply present when JS never runs. */
.js .mark--draw { background-size: 0% 0.42em; }

.js .mark--draw.is-drawn {
  background-size: 100% 0.42em;
  transition: background-size 0.7s cubic-bezier(.2, .7, .3, 1);
}

/* --- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 17px 30px;
  border: 2px solid var(--navy);
  border-radius: 2px;
  transition: transform 0.14s ease, box-shadow 0.14s ease, background-color 0.14s ease;
  cursor: pointer;
}

.btn--primary {
  background: var(--yellow);
  color: var(--navy);
  box-shadow: 5px 5px 0 var(--navy);
}
.btn--primary:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--navy); }
.btn--primary:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--navy); }

.btn--ghost { background: transparent; color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--offwhite); }

.btn--onnavy { background: var(--yellow); color: var(--navy); border-color: var(--yellow); box-shadow: 5px 5px 0 rgba(0,0,0,0.28); }
.btn--onnavy:hover { transform: translate(-2px, -2px); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* --- Header -------------------------------------------------------------- */

.masthead {
  background: var(--navy);
  color: var(--offwhite);
  padding: 15px 0;
  position: sticky;
  top: 0;
  z-index: 40;
}
.masthead__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.logo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.25rem, 5vw, 1.6rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--offwhite);
  text-decoration: none;
  line-height: 1;
}
.logo span { color: var(--yellow); }
.masthead__tel {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(0.95rem, 3.6vw, 1.16rem);
  letter-spacing: 0.05em;
  color: var(--offwhite);
  text-decoration: none;
  white-space: nowrap;
}
.masthead__tel:hover { color: var(--yellow); }

/* --- Sections ------------------------------------------------------------ */

section { padding: 72px 0; }
.band-navy { background: var(--navy); color: rgba(250, 250, 248, 0.86); }
.band-navy h2, .band-navy h3 { color: var(--offwhite); }
.band-paper { background: var(--paper); }

.rule-top { border-top: 2px solid var(--rule); }

/* --- Hero ---------------------------------------------------------------- */

.hero { padding: 58px 0 66px; }
.hero h1 { margin-bottom: 22px; }
.hero__grid { display: grid; gap: 46px; }

.hero__claim {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 4.6vw, 1.7rem);
  line-height: 1.12;
  color: var(--navy);
  border-left: 5px solid var(--yellow);
  padding-left: 18px;
  margin: 30px 0 0;
}

.trustline {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  margin-top: 26px;
}
.trustline b { color: var(--navy); }

/* --- The marked-up quote. Signature element. ----------------------------- */

.doc {
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 18px 40px -26px rgba(19, 30, 54, 0.6);
  padding: 26px 24px 30px;
  position: relative;
  transform: rotate(-0.7deg);
}
.doc__head {
  border-bottom: 2px solid var(--navy);
  padding-bottom: 12px;
  margin-bottom: 18px;
}
.doc__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--navy);
  line-height: 1;
}
.doc__sub { font-size: 0.86rem; color: #6b6b6b; margin-top: 5px; }

.doc__line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dotted rgba(52, 52, 52, 0.28);
  font-size: 0.95rem;
}
.doc__line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

.doc__note {
  display: block;
  margin-top: 7px;
  padding-left: 16px;
  border-left: 2px solid var(--yellow);
  font-family: var(--hand);
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--navy);
}

.doc__stamp {
  position: absolute;
  right: -10px;
  bottom: -18px;
  background: var(--navy);
  color: var(--yellow);
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 9px 15px;
  transform: rotate(-3deg);
}

/* --- Path cards ---------------------------------------------------------- */

.grid-2 { display: grid; gap: 26px; }
.grid-3 { display: grid; gap: 22px; }

.card {
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 2px;
  padding: 30px 26px 32px;
  display: flex;
  flex-direction: column;
}
.card h3 { margin-bottom: 14px; }
.card__price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--navy);
  margin: 20px 0 6px;
}
.card__price small {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  color: #6b6b6b;
  margin-top: 8px;
}
.card__foot { margin-top: auto; padding-top: 22px; }

/* --- Lists --------------------------------------------------------------- */

.ticks { list-style: none; margin: 0 0 4px; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 13px;
  line-height: 1.5;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 15px;
  height: 3px;
  background: var(--yellow);
}
.band-navy .ticks li::before { background: var(--yellow); }

/* --- Steps. Numbered because the order actually matters. ----------------- */

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }
.steps li {
  counter-increment: s;
  position: relative;
  padding-left: 62px;
  min-height: 46px;
  margin-bottom: 26px;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: -6px;
  font-family: var(--display);
  font-weight: 800;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--yellow);
  -webkit-text-stroke: 1px var(--navy);
}
.band-navy .steps li::before { -webkit-text-stroke: 0; }

/* --- Price strip --------------------------------------------------------- */

.pricebar {
  border: 2px solid var(--navy);
  background: #fff;
}
.pricebar__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--rule);
}
.pricebar__row:last-child { border-bottom: 0; }
.pricebar__row b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.22rem;
  color: var(--navy);
  letter-spacing: 0.02em;
}
.pricebar__row span {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.32rem;
  color: var(--navy);
  white-space: nowrap;
}

/* --- Form ---------------------------------------------------------------- */

.form { display: grid; gap: 18px; max-width: 640px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
}
.band-navy .field label { color: var(--offwhite); }
.field input, .field select, .field textarea {
  font-family: var(--body);
  font-size: 16px;
  color: var(--gray);
  background: #fff;
  border: 2px solid var(--navy);
  border-radius: 2px;
  padding: 13px 14px;
  width: 100%;
}
.field textarea { min-height: 118px; resize: vertical; }
.field--hp { position: absolute; left: -9999px; }

/* --- Footer -------------------------------------------------------------- */

.foot { background: var(--navy-deep); color: rgba(250, 250, 248, 0.74); padding: 56px 0 40px; font-size: 0.94rem; }
.foot a { color: var(--offwhite); }
.foot__grid { display: grid; gap: 32px; margin-bottom: 34px; }
.foot__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.7rem;
  color: var(--offwhite);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
  margin-bottom: 12px;
}
.foot__name span { color: var(--yellow); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 4px; }
.foot li a { display: inline-block; padding: 4px 0; min-height: 24px; }
.disclaimer {
  border-top: 1px solid rgba(250, 250, 248, 0.2);
  padding-top: 22px;
  font-size: 0.78rem;
  line-height: 1.62;
  color: rgba(250, 250, 248, 0.6);
}
.signoff {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--yellow);
  margin-top: 24px;
}

/* --- Scope note ---------------------------------------------------------- */

.scopenote {
  border-left: 4px solid var(--yellow);
  padding: 4px 0 4px 20px;
  font-size: 0.95rem;
  color: #5c5c5c;
}

/* --- Reveal -------------------------------------------------------------- */

/* Hidden only when JS is running, so the hero document still renders if the
   script fails or is blocked. */
.reveal { transition: opacity 0.5s ease, transform 0.5s ease; }
.js .reveal { opacity: 0; transform: translateY(16px); }
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .reveal, .js .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  .mark--draw { background-size: 100% 0.42em; }
}

/* --- Breakpoints --------------------------------------------------------- */

@media (min-width: 720px) {
  body { font-size: 18px; }
  section { padding: 92px 0; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 940px) {
  .hero { padding: 84px 0 96px; }
  .hero__grid { grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: 60px; }
  .split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 60px; align-items: start; }
}

/* --- Portrait ------------------------------------------------------------ */

.portrait { margin: 0 0 22px; }
.portrait img {
  display: block; width: 100%; max-width: 320px; height: auto;
  border-radius: 3px; border: 1px solid rgba(27, 42, 74, 0.12);
  box-shadow: 0 10px 30px rgba(27, 42, 74, 0.13);
}
.portrait figcaption {
  margin-top: 12px; font-size: 0.86rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: #6b6b6b;
}

.sitephoto { margin: 0; }
.sitephoto img { display: block; width: 100%; height: auto; }

.photostrip { display: grid; gap: 14px; margin-top: 26px; }
.photostrip img { display: block; width: 100%; height: 260px; object-fit: cover; border-radius: 2px; }
@media (min-width: 720px) {
  .photostrip { grid-template-columns: repeat(3, 1fr); }
  .photostrip img { height: 300px; }
}

/* --- Case study ---------------------------------------------------------- */

.stats { margin-top: 22px; font-size: 1.05rem; letter-spacing: 0.02em; }
.stats strong { font-family: 'Big Shoulders Display', sans-serif; font-size: 1.6rem; color: #1B2A4A; }
.tablewrap { overflow-x: auto; margin-top: 28px; }
.findings { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 0.95rem; }
.findings th {
  text-align: left; padding: 12px 14px; background: #1B2A4A; color: #FAFAF8;
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.9rem;
}
.findings td { padding: 14px; border-bottom: 1px solid rgba(27,42,74,0.12); vertical-align: top; }
.findings tbody tr:nth-child(odd) { background: rgba(27,42,74,0.03); }
.bignum {
  font-family: 'Big Shoulders Display', sans-serif; font-weight: 800;
  font-size: clamp(4rem, 18vw, 8rem); line-height: 0.9; margin: 0; color: #FFC72C;
}

.lede--sub { margin-top: 10px; opacity: 0.86; }

.card__label {
  margin: 14px 0 6px; font-family: 'Big Shoulders Display', sans-serif;
  font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  font-size: 0.86rem; color: #1B2A4A;
}
.card .ticks { margin: 0 0 4px; }
.card .ticks li { margin-bottom: 7px; font-size: 0.95rem; }