/* ============================================================
   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;

  /* --- Type ---------------------------------------------------------------
     Three roles, each doing one job:
       display  Archivo (variable width + weight). An industrial grotesque —
                this is a field-operations trade, not an editorial brand.
       body     Inter. Neutral, high legibility at small sizes.
       mono     IBM Plex Mono. EVERY number on this site: moisture readings,
                case references, stage counters, dollar ranges, timestamps.
                Restoration is a measurement business; the data should look
                like data.
     To revert the display face, change --font-display here and the Google
     Fonts link in each page head. Nothing else references a family directly. */
  --font-display: 'Anton', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* --- The seam ------------------------------------------------------------
     The signature device: the lit boundary between damaged and restored.
     Used by every before/after control and every section divider. */
  --seam-line: rgba(255,255,255,.92);
  --seam-glow: 0 0 0 1px rgba(10,19,48,.16), 0 0 30px rgba(255,255,255,.5);

  /* --- 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 ---------- */
/* The hidden attribute must win over any display declaration. Without this a
   component styled `display:flex` ignores [hidden] entirely, which silently
   broke the after-hours logic in the hero. */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The off-canvas mobile nav is translated past the right edge. `clip` removes
     it from the scrollable area WITHOUT creating a scroll container, so the
     sticky header keeps working (which `overflow-x: hidden` would break). */
  overflow-x: clip;
}
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%; }
/* Images carry width/height attributes to reserve layout space and avoid CLS.
   Without height:auto the browser honours the literal height attribute, which
   on a phone rendered a 2200x943 photo as a 350x943 portrait strip. */
img { height: auto; }
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; }