/* Rio Valley Insulation — design system
   Tokens first, then components. Edit tokens to reskin the whole site. */

:root {
  --rvi-navy:     #0d1f2d;
  --rvi-navy-2:   #16303f;
  --rvi-navy-3:   #081824;
  --rvi-teal:     #3fb8c4;
  --rvi-teal-ink: #0f6f7a;
  --rvi-paper:    #f4f6f8;
  --rvi-paper-2:  #eceff2;
  --rvi-white:    #ffffff;
  --rvi-ink:      #101c26;
  --rvi-ink-2:    #3c4c58;
  --rvi-ink-3:    #5a6b78;
  --rvi-line:     #dfe7ec;
  --rvi-line-2:   #cfd8de;

  --rvi-sans: Archivo, Helvetica, Arial, sans-serif;
  --rvi-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --rvi-max: 1200px;
  --rvi-radius: 2px;
}

/* ---------- base ---------- */
.rvi-page { background: var(--rvi-paper); color: var(--rvi-ink); font-family: var(--rvi-sans); }
.rvi-page *, .rvi-band * { box-sizing: border-box; }
.rvi-band { padding: 0 32px; }
.rvi-band > .rvi-inner { max-width: var(--rvi-max); margin: 0 auto; padding: 80px 0; }
.rvi-band--tight > .rvi-inner { padding: 40px 0; }
.rvi-band--navy { background: var(--rvi-navy); color: #fff; }
.rvi-band--white { background: var(--rvi-white); border-top: 1px solid var(--rvi-line); border-bottom: 1px solid var(--rvi-line); }
.rvi-band--gray { background: var(--rvi-paper-2); border-top: 1px solid var(--rvi-line); border-bottom: 1px solid var(--rvi-line); }

/* ---------- type ---------- */
.rvi-h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 800; margin: 0; text-wrap: balance; }
.rvi-h2 { font-size: clamp(30px, 3.6vw, 42px); line-height: 1.06; letter-spacing: -0.035em; font-weight: 800; margin: 0; text-wrap: pretty; }
.rvi-h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; margin: 0; }
.rvi-lede { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.5; margin: 18px 0 0; max-width: 46ch; }
.rvi-band--navy .rvi-lede { color: rgba(255,255,255,.7); }
.rvi-body { font-size: 17px; line-height: 1.7; color: var(--rvi-ink-2); margin: 18px 0 0; }
.rvi-eyebrow { display: inline-block; font-family: var(--rvi-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--rvi-teal-ink); border: 1px solid var(--rvi-line-2); padding: 7px 12px; border-radius: var(--rvi-radius); }
.rvi-band--navy .rvi-eyebrow { color: var(--rvi-teal); border-color: rgba(63,184,196,.35); }
.rvi-kicker { font-family: var(--rvi-mono); font-size: 13px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin: 0; }
.rvi-fine { font-family: var(--rvi-mono); font-size: 11px; line-height: 1.7; color: var(--rvi-ink-3); }
.rvi-crumbs { font-family: var(--rvi-mono); font-size: 11px; color: rgba(255,255,255,.5); padding-top: 26px; }
.rvi-crumbs a { color: rgba(255,255,255,.5); text-decoration: none; }
.rvi-crumbs a:hover { color: #fff; }
.rvi-crumbs strong { color: var(--rvi-teal); font-weight: 400; }

/* ---------- buttons ---------- */
.rvi-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.rvi-btn { display: inline-block; font-size: 17px; font-weight: 700; padding: 16px 26px; border-radius: var(--rvi-radius); text-decoration: none; border: 1px solid transparent; }
.rvi-btn--teal { background: var(--rvi-teal); color: #062028; }
.rvi-btn--teal:hover { background: #55cdd8; color: #062028; }
.rvi-btn--navy { background: var(--rvi-navy); color: #fff; }
.rvi-btn--navy:hover { background: var(--rvi-navy-2); color: #fff; }
.rvi-btn--ghost { border-color: rgba(255,255,255,.3); color: #fff; font-weight: 600; }
.rvi-btn--ghost:hover { border-color: #fff; }
.rvi-btn--ghost-dark { border-color: var(--rvi-line-2); color: var(--rvi-navy); font-weight: 600; }
.rvi-btn--ghost-dark:hover { border-color: var(--rvi-navy); }

/* ---------- proof row ---------- */
.rvi-proof { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; font-weight: 500; color: rgba(255,255,255,.72); }
.rvi-proof span { display: flex; align-items: center; gap: 9px; }
.rvi-proof span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--rvi-teal); flex: none; }

/* ---------- grids ---------- */
.rvi-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center; }
.rvi-split--top { align-items: start; }
.rvi-split--wide { grid-template-columns: 1.15fr .85fr; }
.rvi-split--narrow { grid-template-columns: .8fr 1.2fr; }
.rvi-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.rvi-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rvi-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.rvi-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }

/* ---------- stats ---------- */
.rvi-stat__n { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.rvi-stat__l { font-family: var(--rvi-mono); font-size: 11px; line-height: 1.6; color: var(--rvi-ink-3); margin-top: 8px; }
.rvi-stat--ruled { border-top: 2px solid var(--rvi-navy); padding-top: 18px; }
.rvi-band--navy .rvi-stat__l { color: rgba(255,255,255,.6); }

/* ---------- cards ---------- */
.rvi-card { background: var(--rvi-white); border: 1px solid var(--rvi-line); padding: 26px; color: var(--rvi-ink); text-decoration: none; display: block; }
a.rvi-card:hover { border-color: var(--rvi-navy); }
.rvi-card__n { font-family: var(--rvi-mono); font-size: 11px; color: var(--rvi-teal-ink); }
.rvi-card__more { font-size: 14px; font-weight: 600; color: var(--rvi-teal-ink); margin-top: 14px; }
.rvi-card p { font-size: 15px; line-height: 1.65; color: #4a5c69; margin: 10px 0 0; }
.rvi-hair { display: grid; gap: 1px; background: var(--rvi-line); border: 1px solid var(--rvi-line); }
.rvi-hair > * { background: var(--rvi-white); padding: 26px; margin: 0; }

/* ---------- ruled lists ---------- */
.rvi-rows { margin-top: 16px; border-bottom: 1px solid var(--rvi-line); }
.rvi-rows > li, .rvi-rows > div { list-style: none; border-top: 1px solid var(--rvi-line); padding: 16px 0; font-size: 16px; color: #2a3945; margin: 0; }
.rvi-rows { padding-left: 0; }
.rvi-steps > div { display: grid; grid-template-columns: 44px 1fr; gap: 20px; }
.rvi-steps .rvi-card__n { color: var(--rvi-teal-ink); }
.rvi-steps p { font-size: 15px; line-height: 1.65; color: #4a5c69; margin: 6px 0 0; }

/* ---------- FAQ ---------- */
.rvi-faq > div { border-top: 1px solid var(--rvi-line); padding: 24px 0; }
.rvi-faq > div:last-child { border-bottom: 1px solid var(--rvi-line); }
.rvi-faq h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.rvi-faq p { font-size: 16px; line-height: 1.7; color: #4a5c69; margin: 10px 0 0; }

/* ---------- city links ---------- */
.rvi-cities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rvi-line); border: 1px solid var(--rvi-line); }
.rvi-cities a { background: var(--rvi-white); padding: 18px 20px; font-size: 16px; font-weight: 600; color: var(--rvi-navy); text-decoration: none; }
.rvi-cities a:hover { background: var(--rvi-navy); color: #fff; }

/* ---------- photo placeholders (swap for real <img>) ---------- */
.rvi-photo { position: relative; display: flex; align-items: flex-end; padding: 20px; border: 1px solid var(--rvi-line-2);
  background-color: #dfe5ea; background-image: repeating-linear-gradient(135deg, rgba(13,31,45,.07) 0 2px, transparent 2px 11px); }
.rvi-photo span { font-family: var(--rvi-mono); font-size: 11px; line-height: 1.6; color: var(--rvi-ink-3); }
.rvi-band--navy .rvi-photo { border-color: rgba(255,255,255,.14); background-color: var(--rvi-navy-2);
  background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 2px, transparent 2px 11px); }
.rvi-band--navy .rvi-photo span { color: rgba(255,255,255,.55); }
.rvi-photo--43 { aspect-ratio: 4/3; }
.rvi-photo--45 { aspect-ratio: 4/5; }
.rvi-photo--169 { aspect-ratio: 16/9; }
.rvi-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rvi-caption { font-family: var(--rvi-mono); font-size: 11px; color: var(--rvi-ink-3); margin-top: 10px; }

/* ---------- form shell (wrap your form plugin's shortcode) ---------- */
.rvi-formbox { background: var(--rvi-paper); border: 1px solid var(--rvi-line); padding: 26px; }
.rvi-formbox--card { background: var(--rvi-white); }
.rvi-formbox h2, .rvi-formbox h3 { margin: 0 0 8px; }
.rvi-formbox input[type=text], .rvi-formbox input[type=tel], .rvi-formbox input[type=email],
.rvi-formbox select, .rvi-formbox textarea {
  width: 100%; border: 1px solid var(--rvi-line-2); background: #fff; padding: 12px;
  font-family: var(--rvi-sans); font-size: 15px; border-radius: var(--rvi-radius); }
.rvi-formbox label { font-family: var(--rvi-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--rvi-ink-3); }
.rvi-formbox input[type=submit], .rvi-formbox button {
  background: var(--rvi-navy); color: #fff; border: none; font-family: var(--rvi-sans);
  font-size: 16px; font-weight: 700; padding: 15px 30px; border-radius: var(--rvi-radius); cursor: pointer; width: auto; }
.rvi-formbox input[type=submit]:hover, .rvi-formbox button:hover { background: var(--rvi-navy-2); }

/* ---------- sticky sidebar ---------- */
.rvi-sticky { position: sticky; top: 96px; }

/* ---------- sticky call bar ---------- */
.rvi-callbar { position: fixed; inset: auto 0 0 0; z-index: 9999; display: none;
  background: var(--rvi-navy); border-top: 1px solid rgba(255,255,255,.14);
  padding: 10px 16px; gap: 12px; align-items: center; }
.rvi-callbar a { text-decoration: none; }
.rvi-callbar__phone { flex: 1; line-height: 1.1; }
.rvi-callbar__label { display: block; font-family: var(--rvi-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--rvi-teal); }
.rvi-callbar__num { display: block; color: #fff; font-family: var(--rvi-sans); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.rvi-callbar__cta { background: var(--rvi-teal); color: #062028; font-family: var(--rvi-sans); font-size: 15px; font-weight: 700; padding: 13px 18px; border-radius: var(--rvi-radius); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .rvi-band { padding: 0 24px; }
  .rvi-band > .rvi-inner { padding: 60px 0; }
  .rvi-split, .rvi-split--wide, .rvi-split--narrow { grid-template-columns: 1fr; gap: 40px; }
  .rvi-grid-5, .rvi-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
  .rvi-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .rvi-sticky { position: static; }
}
@media (max-width: 640px) {
  .rvi-band { padding: 0 18px; }
  .rvi-band > .rvi-inner { padding: 44px 0; }
  .rvi-grid-2, .rvi-grid-3, .rvi-grid-4, .rvi-grid-5 { grid-template-columns: 1fr; }
  .rvi-cities { grid-template-columns: repeat(2, 1fr); }
  .rvi-hair { grid-template-columns: 1fr !important; }
  .rvi-lede { font-size: 17px; }
  .rvi-btns { flex-direction: column; align-items: stretch; }
  .rvi-btn { text-align: center; padding: 17px 22px; min-height: 44px; }
  .rvi-proof { flex-direction: column; gap: 12px; }
  .rvi-callbar { display: flex; }
  body { padding-bottom: 76px; }
  .rvi-steps > div { grid-template-columns: 1fr; gap: 6px; }
}
@media print {
  .rvi-callbar { display: none; }
}