/* RATIONALE: Ground is bright white alternating with a pale rinse-water blue (#eef3f9), because the customer asked for "bright, clean" and the palette they were shown. The accent is the logo's own #3e94ff, kept to the booking action, since the direction promises "a booking button always within reach". The display face stays Chivo, heavy for headings and plain for reading, because the direction binds one friendly workhorse sans to both jobs, and its Black cut reads like a freshly coated panel. The bold move is the closing navy band: the only dark ground on home, cut with one fender-curve corner and a blue waterline, because the brief asks for "one deep navy band at the end carrying the ask". */

:root {
  --r-bg: #ffffff;
  --r-surface: #eef3f9;
  --r-fg: #01172e;
  --r-muted: #5a6878;
  --r-line: #d6dfe9;
  --r-accent: #3e94ff;
  --r-accent-text: #1766c7;
  --r-on-accent: #01172e;
  --r-inverse-bg: #01172e;
  --r-inverse-fg: #ffffff;
  --r-inverse-muted: #a9b8c9;
  --r-inverse-line: #1f3550;
  --r-inverse-accent: #3e94ff;
  --r-display-weight: 800;
  --r-display-tracking: -0.028em;
  --r-case-display: none;
  --r-case-label: uppercase;
  --cx-body: 1.0625rem;
  --cx-h1: clamp(2.45rem, 7.4vw, 4.9rem);
  --cx-h2: clamp(1.7rem, 3.9vw, 2.7rem);
  --cx-h3: clamp(1.12rem, 1.6vw, 1.3rem);
  --cx-radius: 10px;
  --cx-radius-media: 14px;
  --cx-measure: 32em;
  --sp-rinse: #eef3f9;
  --sp-navy: #01172e;
  --sp-navy-2: #0a2440;
  --sp-hair: 1px solid var(--r-line);
  --sp-ease: 180ms cubic-bezier(.2, .7, .2, 1);
  --sp-grade: saturate(.93) contrast(1.05) brightness(1.03);
}

[data-theme="light"] {
  --r-bg: #ffffff;
  --r-surface: #eef3f9;
  --r-fg: #01172e;
  --r-muted: #5a6878;
  --r-line: #d6dfe9;
  --r-accent: #3e94ff;
  --r-accent-text: #1766c7;
  --r-on-accent: #01172e;
}

[data-theme="dark"],
[data-theme="brand"] {
  --r-bg: #01172e;
  --r-surface: #0a2440;
  --r-fg: #ffffff;
  --r-muted: #a9b8c9;
  --r-line: #1f3550;
  --r-accent: #3e94ff;
  --r-accent-text: #6aadff;
  --r-on-accent: #01172e;
}

[data-theme="accent"] {
  --r-bg: #3e94ff;
  --r-surface: #62a8ff;
  --r-fg: #01172e;
  --r-muted: #0b2a4d;
  --r-line: #2a7de6;
  --r-accent: #01172e;
  --r-accent-text: #01172e;
  --r-on-accent: #ffffff;
}

/* ---------- type ---------- */
body {
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3,
.r-display {
  font-weight: var(--r-display-weight);
  letter-spacing: var(--r-display-tracking);
  text-transform: var(--r-case-display);
  color: var(--r-fg);
}

h1 { line-height: 1.02; }
h2 { line-height: 1.08; }
h3 { line-height: 1.2; letter-spacing: -0.012em; font-weight: 700; }

.r-lead {
  font-size: clamp(1.06rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  color: var(--r-muted);
  max-width: 52ch;
}

.r-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: var(--r-case-label);
  color: var(--r-accent-text);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.r-eyebrow-rule {
  width: 28px;
  height: 2px;
  background: var(--r-accent);
  border-radius: 2px;
}

.r-head { text-align: left; margin-bottom: clamp(28px, 4vw, 48px); }
.r-head h2 { max-width: 20ch; }
.r-head--center { text-align: center; }
.r-head--center h2 { margin-inline: auto; }

.r-hairline {
  height: 1px;
  background: var(--r-line);
  border: 0;
}

/* ---------- buttons ---------- */
.r-btn {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.005em;
  border: 1.5px solid transparent;
  transition: background var(--sp-ease), color var(--sp-ease), border-color var(--sp-ease), transform var(--sp-ease);
}

.r-btn:hover { transform: translateY(-1px); }

.r-btn--accent {
  background: var(--r-accent);
  color: var(--r-on-accent);
}
.r-btn--accent:hover { background: #62a8ff; }

.r-btn--solid {
  background: var(--r-fg);
  color: var(--r-bg);
}
.r-btn--solid:hover { background: var(--sp-navy-2); }
[data-theme="dark"] .r-btn--solid:hover,
[data-theme="brand"] .r-btn--solid:hover { background: var(--sp-rinse); }

.r-btn--ghost,
.r-btn--outline {
  background: transparent;
  color: var(--r-fg);
  border-color: var(--r-line);
}
.r-btn--ghost:hover,
.r-btn--outline:hover { border-color: var(--r-fg); }

.r-textlink {
  color: var(--r-accent-text);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--sp-ease), border-color var(--sp-ease);
}
.r-textlink:hover { border-color: transparent; }

:focus-visible {
  outline: 3px solid #3e94ff;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- header, bar ---------- */
.cx-head {
  background: rgba(255, 255, 255, .94);
  border-bottom: var(--sp-hair);
  backdrop-filter: saturate(1.4) blur(10px);
}

.cx-nav a:not(:where(.r-btn)) {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--sp-navy);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color var(--sp-ease), border-color var(--sp-ease);
}
.cx-nav a:not(:where(.r-btn)):hover { color: #1766c7; border-color: #3e94ff; }
.cx-nav a[aria-current="page"] { border-color: var(--sp-navy); }

.cx-navbtn { min-width: 44px; min-height: 44px; color: var(--sp-navy); }

.cx-bar {
  background: var(--sp-navy);
  color: #ffffff;
  border-top: 2px solid #3e94ff;
}
.cx-bar a:not(:where(.r-btn)) { color: #ffffff; font-weight: 700; }

/* ---------- section grounds: alternate white and rinse, never padding alone ---------- */
.r-section[data-theme="light"] { background: var(--r-bg); }

.r-pcards,
.r-section:has(.r-gallery-grid),
.r-faq,
.r-triad,
.r-section:has(.r-process-grid) {
  background: var(--sp-rinse);
  --r-bg: var(--sp-rinse);
  --r-surface: #ffffff;
}

/* consecutive white sections are split by a hard rule */
.r-proof,
.r-prose,
.r-why,
.r-section:has(.r-reviews-mount) {
  border-top: var(--sp-hair);
}


/* ---------- photographs: one cool, bright grade and a gloss sheen ---------- */
.r-paper img,
.r-split-img,
.r-split-media img,
.r-zig img,
.r-tile-img,
.r-hero img,
.r-carousel img {
  filter: var(--sp-grade);
  object-fit: cover;
}

.r-paper img,
.r-split-img,
.r-split-media img,
.r-zig img {
  border-radius: var(--cx-radius-media);
}

.r-split-img,
.r-split-media img,
.r-zig img {
  aspect-ratio: 4 / 3;
  width: 100%;
}

/* ---------- home hero: split paper ---------- */
.r-paper { background: #ffffff; }

.r-paper h1 {
  font-size: var(--cx-h1);
  font-weight: 900;
  max-width: 11ch;
}

.r-paper [class*="-sub"] {
  color: var(--r-muted);
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  max-width: 44ch;
}

.r-paper [class*="-media"],
.r-paper [class*="-fig"] {
  border-radius: var(--cx-radius-media);
  box-shadow: 0 1px 0 var(--r-line), 0 24px 48px -28px rgba(1, 23, 46, .45);
}

/* ---------- photo-band heroes ---------- */
.r-hero { background: var(--sp-navy); }

.r-hero-scrim {
  background: linear-gradient(100deg, rgba(1, 23, 46, .92) 0%, rgba(1, 23, 46, .74) 50%, rgba(1, 23, 46, .62) 100%);
}

.r-poster-h1,
.r-hero h1 {
  color: #ffffff;
  font-size: var(--cx-h1);
  font-weight: 900;
  max-width: 16ch;
}

.r-hero-sub { color: #d3dde8; font-size: 1.1rem; line-height: 1.55; max-width: 46ch; }

.r-hero-stats { border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 20px; }
.r-hero-stat-n { font-weight: 900; font-size: 2rem; font-variant-numeric: tabular-nums; color: #ffffff; }
.r-hero-stat-l {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a9b8c9;
}

.r-hero--statement { background: #ffffff; }
.r-hero--statement .r-statement-h1 { color: var(--sp-navy); max-width: 14ch; font-weight: 900; }

/* ---------- price cards ---------- */
.r-pcards [class*="-card"] {
  background: #ffffff;
  border: var(--sp-hair);
  border-radius: 12px;
  box-shadow: none;
  padding: clamp(20px, 2.4vw, 28px);
  transition: border-color var(--sp-ease), transform var(--sp-ease);
}
.r-pcards [class*="-card"]:hover { border-color: var(--sp-navy); transform: translateY(-2px); }

.r-pcards [class*="-price"] {
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 2.6rem);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--r-fg);
  line-height: 1;
}

.r-pcards [class*="-time"],
.r-pcards [class*="-meta"] {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r-muted);
  font-variant-numeric: tabular-nums;
}

.r-pcards li {
  border-top: var(--sp-hair);
  padding-block: 14px;
  color: var(--r-fg);
  font-size: 0.97rem;
}

/* ---------- proof strip ---------- */
.r-proof { background: #ffffff; border-bottom: var(--sp-hair); }

.r-proof-list {
  gap: 0;
}
.r-proof-list > * {
  padding-inline: clamp(12px, 2.4vw, 32px);
  border-left: var(--sp-hair);
  font-weight: 600;
  font-size: 0.98rem;
}
.r-proof-list > *:first-child { border-left: 0; padding-left: 0; }

.r-proof-mark { color: var(--r-accent-text); font-weight: 900; }

/* ---------- why: sticky rail left, ruled list right ---------- */
.r-why-rail h2 { max-width: 13ch; }

.r-why-row {
  border-top: var(--sp-hair);
  padding-block: clamp(20px, 3vw, 32px);
}
.r-why-row:last-child { border-bottom: var(--sp-hair); }

.r-why-n {
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--r-accent-text);
  font-variant-numeric: tabular-nums;
}

.r-why-row h3 { font-size: var(--cx-h3); }
.r-why-row p { color: var(--r-muted); }

/* ---------- ledger ---------- */
.r-ledger-row { border-top: var(--sp-hair); padding-block: 20px; }
.r-ledger-n { font-weight: 900; color: var(--r-accent-text); font-variant-numeric: tabular-nums; }
.r-ledger-link { color: var(--r-fg); font-weight: 700; }

/* ---------- gallery: tight grid ---------- */
.r-gallery-grid { gap: 6px; }

.r-tile {
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.r-tile-img {
  aspect-ratio: 4 / 3;
  width: 100%;
  transition: transform 400ms cubic-bezier(.2, .7, .2, 1);
}
.r-tile:hover .r-tile-img { transform: scale(1.03); }

/* a specular sheen, as light catches a clean panel */
.r-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(128deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 38%);
  pointer-events: none;
}

.r-tile-cap {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: linear-gradient(0deg, rgba(1, 23, 46, .85) 0%, rgba(1, 23, 46, .62) 60%, rgba(1, 23, 46, 0) 100%);
}

/* ---------- zigzag, split, card ---------- */
.r-zig h3,
.r-zig h2 { font-size: var(--cx-h2); max-width: 16ch; }
.r-zig [class*="-price"] {
  font-weight: 900;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.r-split-card {
  background: #ffffff;
  border: var(--sp-hair);
  border-left: 3px solid var(--sp-navy);
  border-radius: 0 12px 12px 0;
}

.r-split-text li {
  border-top: var(--sp-hair);
  padding-block: 10px;
}

/* ---------- process ---------- */
.r-step { border-top: 2px solid var(--sp-navy); padding-top: 18px; }
.r-step-n,
.r-triad [class*="-n"] {
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--r-accent-text);
}
.r-triad [class*="-circle"] {
  border: 1.5px solid var(--r-line);
  background: #ffffff;
}

/* ---------- heritage numeral ---------- */
.r-heritage [class*="-num"],
.r-heritage [class*="-n"] {
  font-weight: 900;
  letter-spacing: -0.06em;
  color: #3e94ff;
  line-height: 0.85;
  font-variant-numeric: lining-nums;
}

/* ---------- stats ---------- */
.r-stat { border-left: var(--sp-hair); padding-left: 18px; }
.r-stat-n { font-weight: 900; font-size: clamp(2rem, 4vw, 2.8rem); font-variant-numeric: tabular-nums; }
.r-stat-l {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--r-muted);
}

/* ---------- reviews ---------- */
.r-reviews-note { color: var(--r-muted); font-size: 0.95rem; }
.r-reviews-links a:not(:where(.r-btn)) { color: var(--r-accent-text); font-weight: 700; }

/* ---------- faq ---------- */
.r-faq-list { border-top: 2px solid var(--sp-navy); }

.r-faq-item {
  border-bottom: var(--sp-hair);
  background: transparent;
}

.r-faq-item summary {
  font-weight: 700;
  font-size: 1.06rem;
  min-height: 44px;
  padding-block: 18px;
  cursor: pointer;
  transition: color var(--sp-ease);
}
.r-faq-item summary:hover { color: var(--r-accent-text); }
.r-faq-item p { color: var(--r-muted); line-height: 1.65; }

/* ---------- prose ---------- */
.r-prose-in p { line-height: 1.7; }
.r-prose-in h2 { margin-bottom: 0.6em; }
.r-prose-in a:not(:where(.r-btn)) { color: var(--r-accent-text); font-weight: 600; }

/* ---------- areas ---------- */
.r-areas-list li,
.r-terr li {
  border-top: var(--sp-hair);
  padding-block: 14px;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ---------- contact ---------- */
.r-contact-num {
  font-weight: 900;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--r-fg);
  text-decoration: none;
}
.r-contact-tel { border-top: 2px solid var(--sp-navy); padding-top: 16px; }
.r-contact-expect { color: var(--r-muted); }
.r-contact-form {
  background: var(--sp-rinse);
  border-radius: 12px;
  border: var(--sp-hair);
}

.cx-field label { font-weight: 600; font-size: 0.92rem; color: var(--sp-navy); }
.cx-field input,
.cx-field select,
.cx-field textarea {
  border-color: #c3cfdc;
  background: #ffffff;
  color: var(--sp-navy);
  font-size: 1rem;
  transition: border-color var(--sp-ease);
}
.cx-field input:focus,
.cx-field select:focus,
.cx-field textarea:focus { border-color: #1766c7; }

/* ---------- the bold move: one navy band, one fender curve, one waterline ---------- */
.r-ctaband {
  background:
    radial-gradient(120% 90% at 92% -20%, rgba(62, 148, 255, .32) 0%, rgba(62, 148, 255, 0) 55%),
    var(--sp-navy);
  border-top: 3px solid #3e94ff;
  border-top-left-radius: clamp(56px, 14vw, 180px);
  color: #ffffff;
}

.r-ctaband h2 {
  color: #ffffff;
  font-size: clamp(2rem, 5.4vw, 3.6rem);
  font-weight: 900;
  max-width: 14ch;
}

.r-ctaband p { color: #c9d5e3; }
.r-ctaband .r-btn--ghost,
.r-ctaband .r-btn--outline { color: #ffffff; border-color: rgba(255, 255, 255, .35); }
.r-ctaband .r-btn--ghost:hover,
.r-ctaband .r-btn--outline:hover { border-color: #ffffff; }

.r-ctaband-img { filter: var(--sp-grade); border-radius: var(--cx-radius-media); }

/* ---------- footer: light, because the logo art needs a light ground ---------- */
.cx-foot,
.r-foot,
.r-foot2 {
  background: #ffffff;
  color: var(--sp-navy);
  border-top: var(--sp-hair);
}

.cx-fh {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #5a6878;
}

.cx-fcol a:not(:where(.r-btn)),
.r-foot a:not(:where(.r-btn)) {
  color: var(--sp-navy);
  text-decoration: none;
  transition: color var(--sp-ease);
}
.cx-fcol a:not(:where(.r-btn)):hover,
.r-foot a:not(:where(.r-btn)):hover { color: #1766c7; }

.r-foot-sub { color: #5a6878; font-size: 0.92rem; }

/* ---------- utility pages ---------- */
.cx-util-head { border-bottom: 2px solid var(--sp-navy); }

@media (max-width: 640px) {
  .r-proof-list > * {
    border-left: 0;
    padding-inline: 0;
    border-top: var(--sp-hair);
    padding-block: 10px;
  }
  .r-proof-list > *:first-child { border-top: 0; }
  .r-stat { border-left: 0; border-top: var(--sp-hair); padding-left: 0; padding-top: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .r-btn,
  .r-tile-img,
  .r-pcards [class*="-card"] { transition: none; }
  .r-btn:hover,
  .r-tile:hover .r-tile-img,
  .r-pcards [class*="-card"]:hover { transform: none; }
}

/* ---- repair ---- */
.r-foot-tag { color: #5a6878; }
.r-terr-card { padding: clamp(20px, 2.4vw, 28px); }

/* ---- repair ---- */
.r-pcard { padding: clamp(20px, 2.4vw, 28px); }