/* ==========================================================================
   FRONTIER RESTORATION — "The Fire-Tested Forge"
   Concept: calm navy authority + forge-ember red. A restoration company that
   answers at 3am: every section leads back to the emergency call.
   Palette: ink navy #232946 / deep #1a2036, ember #B05149, warm paper #faf7f4.
   Type: Montserrat (display) + system sans (body).
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800;900&display=swap');

:root {
  --fr-ink: #232946;
  --fr-ink-deep: #171c33;
  --fr-ember: #b05149;
  --fr-ember-bright: #cf5f54;
  --fr-paper: #faf7f4;
  --fr-line: rgba(35, 41, 70, .12);
}

/* ---------- global chrome ---------- */
body { font-family: 'Montserrat', system-ui, sans-serif; background: var(--fr-paper); color: var(--fr-ink); }
h1, h2, h3, h4, .display-3, .display-4 { font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: -.02em; }
/* Scrollbar-safe full bleed: negative margins only, no 100vw width. */
.sl-bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
body { overflow-x: clip; }

.site-header, header.navbar, .navbar { background: var(--fr-ink-deep) !important; }
.site-header a, .navbar .navbar-brand, .navbar .nav-link { color: #fff !important; font-weight: 700; text-decoration: none; }
.site-header a:hover, .navbar .nav-link:hover { color: var(--fr-ember-bright) !important; }

/* ---------- emergency top strip ---------- */
.fr-alert-strip {
  background: var(--fr-ember); color: #fff; font-weight: 700; font-size: .85rem;
  letter-spacing: .08em; text-transform: uppercase; padding: .5rem 1rem; text-align: center;
}
.fr-alert-strip a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- hero ---------- */
.fr-hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(176, 81, 73, .55), transparent 60%),
    radial-gradient(700px 420px at -10% 110%, rgba(176, 81, 73, .28), transparent 55%),
    linear-gradient(160deg, #2b3252 0%, var(--fr-ink) 45%, var(--fr-ink-deep) 100%);
  padding: clamp(4rem, 9vw, 7.5rem) 0 clamp(5rem, 9vw, 7rem);
}
.fr-hero::after { /* ember grain */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
}
.fr-hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 900; line-height: 1.04; }
.fr-hero h1 .fr-mark { color: var(--fr-ember-bright); }
.fr-hero .fr-tagline { color: rgba(255, 255, 255, .82); font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 34rem; }
.fr-motto { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: .8rem; color: #f0a89e; }

.fr-btn-emergency {
  background: var(--fr-ember); border: none; color: #fff; font-weight: 800;
  padding: .95rem 1.9rem; border-radius: 999px; font-size: 1.05rem;
  box-shadow: 0 12px 32px rgba(176, 81, 73, .45); transition: transform .18s ease, box-shadow .18s ease;
  display: inline-flex; align-items: center; gap: .55rem;
}
.fr-btn-emergency:hover { background: var(--fr-ember-bright); color: #fff; transform: translateY(-2px); box-shadow: 0 18px 40px rgba(176, 81, 73, .55); }
.fr-btn-ghost {
  border: 2px solid rgba(255, 255, 255, .35); color: #fff; font-weight: 700; border-radius: 999px;
  padding: .9rem 1.7rem; background: transparent; transition: border-color .18s ease, background .18s ease;
}
.fr-btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); color: #fff; }

/* trust chips under hero CTAs */
.fr-trust { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; }
.fr-trust span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .92rem; color: rgba(255, 255, 255, .9); }
.fr-trust svg { flex: none; }

/* emergency panel card in hero */
.fr-call-card {
  background: #fff; color: var(--fr-ink); border-radius: 1.2rem; padding: 1.8rem;
  box-shadow: 0 30px 70px rgba(10, 14, 34, .45); position: relative;
}
.fr-call-card::before {
  content: "24/7 EMERGENCY"; position: absolute; top: -.85rem; left: 1.4rem;
  background: var(--fr-ember); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .14em;
  padding: .35rem .9rem; border-radius: 999px;
}
.fr-call-card .fr-phone { font-size: 1.7rem; font-weight: 900; color: var(--fr-ink); text-decoration: none; }
.fr-call-card .fr-phone:hover { color: var(--fr-ember); }
.fr-call-steps { font-size: .85rem; color: #5a5f7a; }

/* ---------- section scaffolding ---------- */
.fr-section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.fr-kicker { color: var(--fr-ember); font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-size: .78rem; }
.fr-section h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.fr-band-dark { background: linear-gradient(165deg, var(--fr-ink) 0%, var(--fr-ink-deep) 100%); color: #fff; }
.fr-band-dark .fr-kicker { color: #f0a89e; }

/* ---------- service pillar cards ---------- */
.fr-service {
  background: #fff; border: 1px solid var(--fr-line); border-radius: 1rem; padding: 1.7rem;
  height: 100%; position: relative; overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fr-service::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--fr-ember), var(--fr-ember-bright));
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.fr-service:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(23, 28, 51, .12); }
.fr-service:hover::before { transform: scaleX(1); }
.fr-service .fr-ico {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(176, 81, 73, .1); color: var(--fr-ember); margin-bottom: 1rem;
}
.fr-service h3 { font-size: 1.15rem; font-weight: 800; }
.fr-service p { color: #5a5f7a; font-size: .93rem; margin: 0; }

/* ---------- process timeline ---------- */
.fr-step { position: relative; padding-left: 4.4rem; margin-bottom: 2rem; }
.fr-step:last-child { margin-bottom: 0; }
.fr-step .fr-num {
  position: absolute; left: 0; top: 0; width: 3.1rem; height: 3.1rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900; font-size: 1.1rem;
  background: rgba(207, 95, 84, .16); color: #f6b7ae; border: 2px solid rgba(207, 95, 84, .5);
}
.fr-step::after {
  content: ""; position: absolute; left: 1.5rem; top: 3.4rem; bottom: -1.7rem; width: 2px;
  background: linear-gradient(rgba(207, 95, 84, .5), rgba(207, 95, 84, .08));
}
.fr-step:last-child::after { display: none; }
.fr-step h3 { font-size: 1.1rem; font-weight: 800; color: #fff; }
.fr-step p { color: rgba(255, 255, 255, .72); font-size: .95rem; margin: 0; }

/* clock stat card next to process */
.fr-stat-card {
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 1.2rem; padding: 2rem; text-align: center;
}
.fr-stat-card .fr-stat-big { font-size: clamp(3rem, 6vw, 4.4rem); font-weight: 900; color: var(--fr-ember-bright); line-height: 1; }
.fr-stat-card .fr-stat-label { color: rgba(255, 255, 255, .8); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }

/* ---------- reviews ---------- */
.fr-review {
  background: #fff; border: 1px solid var(--fr-line); border-radius: 1rem; padding: 1.6rem; height: 100%;
}
.fr-review .fr-stars { color: #e8a33d; letter-spacing: .12em; }
.fr-review p { color: #454a66; font-size: .95rem; }
.fr-review footer { font-weight: 800; font-size: .88rem; color: var(--fr-ink) !important; background: transparent !important; padding: 0; }
.fr-review footer small { display: block; color: #62677f; font-weight: 600; }

/* ---------- insurance strip ---------- */
.fr-ins { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.fr-ins span {
  border: 1px solid var(--fr-line); background: #fff; border-radius: 999px; padding: .55rem 1.25rem;
  font-weight: 700; font-size: .88rem; color: #454a66;
}

/* ---------- big CTA band ---------- */
.fr-cta {
  background:
    radial-gradient(700px 360px at 20% 0%, rgba(207, 95, 84, .5), transparent 60%),
    linear-gradient(150deg, #2b3252, var(--fr-ink-deep));
  color: #fff; border-radius: 1.6rem; padding: clamp(2.6rem, 6vw, 4.2rem);
  position: relative; overflow: hidden;
}
.fr-cta h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.fr-cta p { color: rgba(255, 255, 255, .8); }

/* ---------- footer band ---------- */
.site-footer { background: var(--fr-ink-deep) !important; color: rgba(255, 255, 255, .78) !important; }
.site-footer a { color: #fff !important; }

/* ---------- motion ---------- */
/* Reveal is JS-gated: content stays visible unless the script adds .fr-js first,
   so no-JS visitors still see the whole page. */
.fr-js .sl-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.fr-js .sl-reveal.is-in { opacity: 1; transform: none; }
@keyframes fr-pulse { 0%, 100% { box-shadow: 0 12px 32px rgba(176, 81, 73, .45); } 50% { box-shadow: 0 12px 44px rgba(207, 95, 84, .75); } }
.fr-btn-emergency.fr-pulse { animation: fr-pulse 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .fr-js .sl-reveal { opacity: 1; transform: none; transition: none; }
  .fr-btn-emergency.fr-pulse { animation: none; }
  .fr-service, .fr-btn-emergency, .fr-btn-ghost { transition: none; }
}

/* ---------- responsive tuning ---------- */
@media (max-width: 991.98px) {
  .fr-call-card { margin-top: 2.5rem; }
}
@media (max-width: 575.98px) {
  .fr-trust { gap: .5rem 1rem; }
  .fr-step { padding-left: 3.6rem; }
  .fr-step .fr-num { width: 2.6rem; height: 2.6rem; }
  .fr-step::after { left: 1.25rem; }
}