/* ============================================================
   MR. RESTORATION INC — CORE DESIGN TOKENS
   Palette sampled pixel-exact from the client's own logo.
   The logo uses the official US flag colors:
     Old Glory Blue #0B3162 · Old Glory Red #B31942
   ============================================================ */

:root {
  /* --- Brand: sampled from logo.png --- */
  --navy-950: #04081a;
  --navy-900: #070d24;
  --navy-850: #0a1330;
  --navy-800: #101a42;
  --navy-700: #1a2255;
  --navy-600: #262364;   /* logo wordmark */
  --flag-blue: #0b3162;  /* Old Glory Blue */
  --flag-red:  #b31942;  /* Old Glory Red */

  /* --- Fire ramp (from the logo's teardrop flame) --- */
  --fire-700: #c0271f;
  --fire-600: #e93f3a;
  --fire-500: #f16a32;
  --fire-400: #f6a83c;
  --fire-300: #f9c53c;
  --fire-200: #ffe08a;

  /* --- Water ramp (from the logo's blue flame) --- */
  --water-700: #0d4f8f;
  --water-600: #1e63b0;
  --water-500: #3d8ccb;
  --water-400: #5ba7d9;
  --water-300: #71bae3;
  --water-200: #a9d7ef;

  /* --- Neutrals --- */
  --ink-900: #0c1020;
  --ink-700: #2b3145;
  --ink-500: #5b6379;
  --ink-400: #838ba1;
  --ink-300: #b4bac9;
  --ink-200: #dde1ea;
  --ink-100: #eef1f6;
  --ink-50:  #f7f9fc;
  --white: #ffffff;

  /* --- Semantic --- */
  --ok: #16a34a;
  --warn: #f6a83c;
  --crit: #e93f3a;

  /* --- Motion --- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* --- Layout --- */
  --shell: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --radius: 14px;
  --radius-lg: 22px;

  /* --- Elevation --- */
  --sh-1: 0 1px 2px rgba(12,16,32,.06), 0 2px 8px rgba(12,16,32,.05);
  --sh-2: 0 4px 12px rgba(12,16,32,.08), 0 12px 32px rgba(12,16,32,.07);
  --sh-3: 0 12px 28px rgba(12,16,32,.12), 0 32px 68px rgba(12,16,32,.12);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

/* ---------- Accessibility ---------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--fire-400);
  outline-offset: 3px;
  border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100%; left: 1rem; z-index: 9999;
  background: var(--fire-600); color: #fff; padding: .75rem 1.25rem;
  border-radius: 0 0 10px 10px; font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 0; }

/* Respect user motion preference — every variation honours this. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Shared layout helpers ---------- */
.shell { width: min(var(--shell), 100% - var(--gutter) * 2); margin-inline: auto; }
.stack > * + * { margin-top: var(--sp, 1rem); }

/* ---------- Scroll reveal (IntersectionObserver driven) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y, 26px), 0);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal].is-in { will-change: auto; }

/* ---------- Emergency call bar (mobile, all variations) ---------- */
.callbar {
  position: fixed; inset: auto 0 0 0; z-index: 900;
  display: none; gap: .5rem; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(7,13,36,.94);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-top: 1px solid rgba(255,255,255,.12);
}
.callbar a {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem .5rem; border-radius: 12px; font-weight: 800; letter-spacing: -.005em;
  text-decoration: none; font-size: .88rem; white-space: nowrap;
}
.callbar .cb-call { background: linear-gradient(135deg, var(--fire-600), var(--fire-400)); color: #fff; }
.callbar .cb-quote { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.callbar .cb-back {
  flex: 0 0 auto; padding-inline: .9rem;
  background: rgba(255,255,255,.06); color: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.16); font-size: 1.05rem;
}
@media (max-width: 780px) { .callbar { display: flex; } body { padding-bottom: 76px; } }

/* ---------- Mobile header + nav collisions ----------
   These use one extra level of specificity so they win over each variation's
   own header rules regardless of stylesheet order. */
@media (max-width: 780px) {
  /* The floating "all concepts" chip collides with hero CTAs on small screens —
     its job moves into the call bar instead. */
  a.backlink { display: none !important; }
}
@media (max-width: 600px) {
  a.brand > span > span { display: none; }          /* drop the sub-label */
  a.brand img { width: 38px !important; }
  a.brand b { font-size: .82rem !important; }
  .hdr .hdr-cta {
    padding: .5rem .8rem !important; font-size: .78rem !important;
    white-space: nowrap; min-width: 0;
  }
  .hdr-in { gap: .6rem !important; }
}
@media (max-width: 400px) {
  a.brand > span { display: none; }                  /* mark only */
}

/* ---------- Per-character text splitting ----------
   Characters are inline-block so they can be transformed individually, which
   means a word must be explicitly held together or punctuation wraps alone. */
.wd { display: inline-block; white-space: nowrap; }

/* ---------- Utility ---------- */
.nowrap { white-space: nowrap; }
.tabular { font-variant-numeric: tabular-nums; }