/* =============================================================
   Jampacked Services LLC — Brand stylesheet
   Design system: colors taken directly from the company logo,
   logo red #AC0D1F, black #000000, white #FFFFFF.
   NOTE: the token names 'navy' and 'copper' are kept for stability
   (Tailwind classes across all pages reference them). 'navy' now
   carries the logo black, 'copper' carries the logo red.
   Tailwind (via CDN) handles layout utilities; this file holds
   brand tokens, component styles, type, and motion.
   ============================================================= */

:root {
  /* --- Brand palette --- */
  --navy:        #121212;  /* logo black, main dark surfaces   */
  --navy-deep:   #000000;  /* logo black, deepest surfaces     */
  --navy-soft:   #2E2E2E;  /* lifted black, hover states       */
  --copper:      #AC0D1F;  /* logo red, CTAs and accents       */
  --copper-dark: #8A0A18;  /* logo red, hover                  */
  --copper-soft: #FBE8EA;  /* logo red tint, chips and avatars */
  --red-display: #C8102E;  /* logo red, big headlines on black */
  --red-light:   #EF3B4F;  /* logo red, small text on black    */
  --bg:          #F7F7F7;  /* near white page background       */
  --card:        #FFFFFF;  /* logo white, cards                */
  --line:        #E5E5E5;  /* hairline borders                 */
  --ink:         #121212;  /* logo black, body text            */
  --slate:       #5A5A5A;  /* muted secondary text             */
  --slate-light: #8C8C8C;  /* captions                         */

  /* --- Type --- */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* --- Effects --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, 0.22);
  --radius:    16px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}
body { font-optical-sizing: auto; }

/* Balanced, tighter headline wrapping */
.text-balance { text-wrap: balance; }

/* ---------- Eyebrow label ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper-dark);
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  background: var(--copper);
  border-radius: 2px;
}
.eyebrow--light { color: var(--red-light); }
.eyebrow--center::before { display: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 0.95rem 1.6rem;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease),
              box-shadow 0.25s var(--ease), color 0.2s var(--ease);
  white-space: nowrap;
}
.btn:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }
.btn svg { flex-shrink: 0; }

.btn-primary { background: var(--copper); color: #fff; box-shadow: 0 8px 20px -8px rgba(172, 13, 31, 0.45); }
.btn-primary:hover { background: var(--copper-dark); transform: translateY(-2px); box-shadow: 0 14px 26px -10px rgba(172, 13, 31, 0.55); }

.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-soft); transform: translateY(-2px); }

.btn-ghost { background: transparent; color: var(--navy); border-color: rgba(0,0,0,0.22); }
.btn-ghost:hover { border-color: var(--navy); background: rgba(0,0,0,0.05); transform: translateY(-2px); }

.btn-white { background: #fff; color: var(--navy); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-outline-light:hover { border-color: #fff; background: rgba(255,255,255,0.08); transform: translateY(-2px); }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card-hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }

/* Icon chip */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 12px;
  background: var(--copper-soft);
  color: var(--copper-dark);
}

/* ---------- Header ---------- */
.site-header {
  transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.site-header.scrolled {
  background: rgba(247, 245, 242, 0.9);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: var(--shadow-sm);
  border-bottom-color: var(--line);
}
.nav-link { position: relative; color: var(--navy); font-weight: 500; transition: color 0.2s; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: var(--copper); transition: width 0.28s var(--ease);
}
.nav-link:hover { color: var(--copper-dark); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { width: 100%; }
.nav-link[aria-current="page"] { color: var(--copper-dark); }

/* Header sitting over a dark hero image (home page): light text until scrolled */
.site-header.over-hero:not(.scrolled) .nav-link,
.site-header.over-hero:not(.scrolled) .logo-name,
.site-header.over-hero:not(.scrolled) [data-nav-toggle] { color: #fff; }
.site-header.over-hero:not(.scrolled) .logo-name .text-copper-dark { color: var(--red-light); }
.site-header.over-hero:not(.scrolled) .logo-sub { color: rgba(255,255,255,0.72); }
.site-header.over-hero:not(.scrolled) .nav-link[aria-current="page"] { color: var(--red-light); }
.site-header.over-hero:not(.scrolled) .nav-link::after { background: var(--red-light); }
.site-header.over-hero:not(.scrolled) .logo-chip { background: rgba(255,255,255,0.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.site-header.over-hero:not(.scrolled) .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.4); }
.site-header.over-hero:not(.scrolled) .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08); }

/* ---------- Hero ---------- */
.hero-overlay {
  background: linear-gradient(105deg,
    rgba(0, 0, 0, 0.92) 0%,
    rgba(0, 0, 0, 0.76) 42%,
    rgba(0, 0, 0, 0.35) 100%);
}

/* Thin animated top rule under header on hero */
.rule-copper { height: 3px; background: linear-gradient(90deg, var(--copper) 0%, var(--red-light) 50%, var(--copper) 100%); }

/* The logo red is deep, so as small text on black it falls below the
   accessible contrast threshold. On dark surfaces, lift it to --red-light. */
footer .text-copper,
.bg-navy .text-copper,
.bg-navy-deep .text-copper { color: var(--red-light); }
footer .hover\:text-copper:hover,
.bg-navy .hover\:text-copper:hover,
.bg-navy-deep .hover\:text-copper:hover { color: var(--red-light); }

.bg-navy .text-copper:is(h1 *, h2 *),
.bg-navy-deep .text-copper:is(h1 *, h2 *) { color: var(--red-display); }

/* Comfortable tap targets on phones (WCAG 2.2 target size). */
footer ul a,
footer ul button { display: inline-flex; align-items: center; min-height: 36px; }
.tap-link { display: inline-flex; align-items: center; min-height: 40px; }

/* 24 hour emergency badge in the hero */
.emergency-pill {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 1rem; border-radius: 999px;
  background: rgba(172, 13, 31, 0.22);
  border: 1px solid rgba(239, 59, 79, 0.5);
  color: #fff; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.01em;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.emergency-pill:hover { background: rgba(172, 13, 31, 0.38); border-color: var(--red-light); }
.emergency-pill:focus-visible { outline: 3px solid var(--red-light); outline-offset: 3px; }
.pulse-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--red-light); flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(239, 59, 79, 0.7); animation: pulse-dot 1.8s infinite;
}
@keyframes pulse-dot {
  70%  { box-shadow: 0 0 0 9px rgba(239, 59, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 59, 79, 0); }
}
@media (prefers-reduced-motion: reduce) { .pulse-dot { animation: none; } }

/* ---------- Stars ---------- */
.stars { display: inline-flex; gap: 2px; color: #E8A94B; }

/* ---------- Reviews marquee (sideways auto scroll) ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: marquee-scroll 52s linear infinite;
  will-change: transform;
}
/* Pause when the visitor hovers or focuses a card, so they can read it */
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track { animation-play-state: paused; }
.review-card { width: 330px; flex: 0 0 auto; }
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; }
}

/* ---------- Section rhythm ---------- */
.section { padding-block: clamp(4rem, 8vw, 7rem); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .btn:hover, .card-hover:hover { transform: none !important; }
}

/* ---------- Placeholder flag (dev-visible) ---------- */
/* Anything wrapped in .placeholder-flag carries a small badge so nothing
   fake is mistaken for confirmed content before it's replaced. */
.placeholder-flag { position: relative; }
.placeholder-flag::before {
  content: "PLACEHOLDER";
  position: absolute; top: 8px; right: 8px; z-index: 5;
  font: 700 0.6rem/1 var(--font-body);
  letter-spacing: 0.08em;
  background: #B4322B; color: #fff;
  padding: 4px 7px; border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  pointer-events: none;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease);
}
.modal-backdrop.open { opacity: 1; visibility: visible; }
.modal-panel {
  transform: translateY(16px) scale(0.98);
  transition: transform 0.35s var(--ease);
}
.modal-backdrop.open .modal-panel { transform: none; }

/* ---------- Forms ---------- */
.field-label { font-weight: 600; font-size: 0.86rem; color: var(--navy); margin-bottom: 0.35rem; display: block; }
.field {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.8rem 0.95rem;
  font: inherit; font-size: 0.96rem; color: var(--ink);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field::placeholder { color: var(--slate-light); }
.field:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(172,13,31,0.15); }
.field:user-invalid { border-color: #C0453B; box-shadow: 0 0 0 3px rgba(192,69,59,0.12); }
.field-error { color: #B4322B; font-size: 0.8rem; margin-top: 0.3rem; display: none; }
.field-error.show { display: block; }
textarea.field { resize: vertical; min-height: 120px; }

/* Floating mobile call button */
.floating-call {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50;
  box-shadow: 0 12px 30px -8px rgba(172,13,31,0.55);
  animation: pulse-ring 2.6s infinite;
}
@keyframes pulse-ring {
  0% { box-shadow: 0 12px 30px -8px rgba(172,13,31,0.55), 0 0 0 0 rgba(172,13,31,0.45); }
  70% { box-shadow: 0 12px 30px -8px rgba(172,13,31,0.55), 0 0 0 16px rgba(172,13,31,0); }
  100% { box-shadow: 0 12px 30px -8px rgba(172,13,31,0.55), 0 0 0 0 rgba(172,13,31,0); }
}
@media (prefers-reduced-motion: reduce) { .floating-call { animation: none; } }

/* Marquee-ish trust bar divider dots */
.dot-sep::before { content: "•"; color: var(--copper); margin: 0 0.75rem; }

/* Form status message */
.form-status { display: none; margin-top: 1rem; padding: 0.85rem 1rem; border-radius: 10px; font-size: 0.92rem; font-weight: 500; }
.form-status.loading { background: #EEF2F6; color: var(--slate); }
.form-status.error { background: #FBEAE8; color: #B4322B; border: 1px solid #F0C9C4; }
.form-status.success { background: #E7F3EC; color: #1F7A45; border: 1px solid #C4E4D0; }

/* Image frame — shows a clean navy fill until the real photo is dropped in,
   so a missing image never looks broken. */
.media { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-soft) 100%); position: relative; }

/* Before/After image frame */
.gallery-img { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-md); }
.gallery-img img { transition: transform 0.6s var(--ease); }
.gallery-img:hover img { transform: scale(1.05); }