/* ServIndy trade template: Emergency 24/7 (skin)
   Bold, urgent, high contrast: red on near-black, wide heavy type, slanted
   section cuts, hazard stripes and grain, the phone number first, a sticky
   call bar on phones. Shared component styles live in
   templates/_trade/base.css (inlined). */
:root {
  --accent: #E0302B;
  --bg: #0b0c0f;
  --bg-alt: #121419;
  --surface: #181b21;
  --surface-2: #20242b;
  --ink: #f5f5f6;
  --ink-2: #c9ccd3;
  --muted: #9ea3ad;
  --line: rgba(255, 255, 255, .1);
  --dark: #140b0b;
  --dark-2: #070809;
  --field-bg: #101216;
  --field-line: rgba(255, 255, 255, .2);
  --radius: 12px;
  --radius-lg: 16px;
  --btn-radius: 10px;
  --shadow: none;
  --shadow-lg: 0 24px 48px -18px rgba(0, 0, 0, .75);
  --font-head: Archivo, system-ui, sans-serif;
  --font-body: Archivo, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --head-weight: 900;
  --head-transform: uppercase;
  --head-tracking: -.005em;
  --header-h: 68px;
  --header-hc: 58px;
  --edge: 52px;
  --hazard: repeating-linear-gradient(-45deg, var(--accent) 0 14px, #0b0c0f 14px 28px);
  --map-filter: invert(1) hue-rotate(180deg) brightness(.82) contrast(.92) saturate(.35);
}
body { color-scheme: dark; }
h1, h2, h3, .brand-name, .fact-big, .call-num { font-stretch: 112%; }
.kicker { display: inline-flex; align-items: center; gap: 10px; color: #ff6b5e; }
.kicker::before { content: ""; width: 9px; height: 9px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.btn-outline { border-color: rgba(255, 255, 255, .45); color: #fff; }
.btn-outline:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.btn-solid { box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; }
.link-arrow { color: #ff8a80; }
.stars .off { color: rgba(255, 255, 255, .2); }
::selection { background: var(--accent); color: #fff; }

/* header: transparent over the hero, black with a red rule once scrolled */
.hdr-bar { background: rgba(11, 12, 15, .92); }
.site-header.is-scrolled .hdr-bar { border-bottom: 2px solid var(--accent); }
.hdr-over .site-header:not(.is-scrolled):not(.nav-open) .hdr-bar { background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent); }
.brand-name { font-weight: 900; letter-spacing: .02em; }
.site-nav a { color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-size: .86rem; }
.site-nav a:hover { color: #fff; }
.site-nav .nav-cta { border-radius: 10px; text-transform: none; letter-spacing: .01em; font-size: .98rem; }
.topstrip { background: var(--accent); }

/* slanted cuts: each section (and the alternating direction) cuts into the
   bottom padding of the one before it; net zero in the layout */
.skin-emergency #main > section + section { margin-top: calc(-1 * var(--edge)); border-top: var(--edge) solid transparent; background-origin: border-box; clip-path: polygon(0 var(--edge), 100% 0, 100% 100%, 0 100%); }
.skin-emergency #main > section + section:nth-child(even) { clip-path: polygon(0 0, 100% var(--edge), 100% 100%, 0 100%); }
.skin-emergency .trust-strip { padding: 30px 0 calc(30px + var(--edge)); }
.skin-emergency .em-band { padding: 40px 0 calc(40px + var(--edge)); }
.skin-emergency .fin-band { padding-bottom: calc(64px + var(--edge) * .5); }

/* textures: grain everywhere, faint diagonal stripes on the alternate bands */
.skin-emergency .section { background-image: var(--tx-grain-light); }
.skin-emergency .section--alt { background: var(--tx-grain-light), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 22px), var(--bg-alt); }

/* hero */
.hero { --hero-pt: 104px; background-color: var(--bg); padding: var(--hero-pt) 0 116px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--tx-grain-light); opacity: .9; }
/* hero photo(s) behind the copy, darkened toward the text side */
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(100deg, rgba(8, 8, 10, .95) 0%, rgba(8, 8, 10, .82) 46%, rgba(8, 8, 10, .35) 100%), linear-gradient(0deg, rgba(8, 8, 10, .85), transparent 40%); }
.hero--no-image { background: radial-gradient(900px 460px at 85% 0%, color-mix(in srgb, var(--accent) 38%, transparent), transparent 62%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px), var(--bg); }
.hero--no-image::after { content: ""; position: absolute; right: -130px; bottom: -130px; width: 460px; height: 460px; border-radius: 50%; border: 64px solid color-mix(in srgb, var(--accent) 15%, transparent); pointer-events: none; box-shadow: 0 0 0 40px color-mix(in srgb, var(--accent) 5%, transparent); }
.hero-in { position: relative; z-index: 2; }
.hero-hazard { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 10px; background: var(--hazard); opacity: .95; }
.hero-flag { display: inline-flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--accent) 16%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); color: #ffb4ab; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; }
.hero-flag .pulse-dot { background: var(--accent); }
.hero-flag--calm { background: rgba(255, 255, 255, .06); border-color: var(--line); color: var(--muted); }
.hero-title { font-size: clamp(2.6rem, 1.2rem + 6vw, 5.4rem); max-width: 960px; line-height: .98; }
.hero-sub { font-size: 1.2rem; color: #d4d6db; max-width: 640px; }
.hero-cta { gap: 14px; margin-top: 34px; align-items: center; }
.call-box { position: relative; display: inline-flex; align-items: center; gap: 16px; background: var(--accent); color: var(--accent-ink); text-decoration: none; padding: 14px 28px 14px 16px; border-radius: 14px; box-shadow: 0 18px 44px -12px color-mix(in srgb, var(--accent) 75%, transparent); transition: transform .14s, filter .14s; }
.call-box::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: em-ping 2.4s ease-out 2; pointer-events: none; }
@keyframes em-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 75%, 100% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--accent) 0%, transparent); } }
.call-box:hover { transform: translateY(-2px); filter: brightness(1.08); }
.call-icon { width: 54px; height: 54px; border-radius: 12px; background: rgba(0, 0, 0, .22); display: grid; place-items: center; }
.call-icon .ic { width: 26px; height: 26px; animation: em-ring 2.4s ease-in-out 2; transform-origin: 50% 60%; }
@keyframes em-ring { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-14deg); } 78% { transform: rotate(12deg); } 82% { transform: rotate(-10deg); } 86% { transform: rotate(6deg); } }
.call-text { display: flex; flex-direction: column; line-height: 1.15; }
.call-kicker { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .14em; opacity: .9; }
.call-num { font-size: 1.7rem; font-weight: 900; letter-spacing: .01em; }
.hero-proof { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; color: #d4d6db; }
.hero .open-today { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px 5px 11px; }

/* fact strip: a dispatch board under the hero */
.facts { position: relative; background: linear-gradient(180deg, #15171c, var(--bg-alt)); border-bottom: 1px solid var(--line); }
.facts-in { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.fact { padding: 26px 22px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; position: relative; }
.fact:first-child { border-left: 0; }
.fact::before { content: ""; position: absolute; left: 22px; top: 0; width: 36px; height: 3px; background: var(--accent); }
.fact-big { font-family: var(--font-head); font-size: 2.1rem; font-weight: 900; color: #fff; line-height: 1.05; }
.fact-big--sm { font-size: 1.15rem; line-height: 1.3; padding-top: 8px; }
.fact-small { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }

/* emergency banner: hazard-striped red */
.skin-emergency .em-band { background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .14) 0 18px, transparent 18px 36px), linear-gradient(110deg, #8f1610, var(--accent)); }
.skin-emergency .em-band-icon { animation: em-blink 1.6s steps(2, jump-none) 3; }
@keyframes em-blink { 50% { background: rgba(255, 255, 255, .32); } }

/* services: dispatch-board rows with a red edge and a glow on hover */
.skin-emergency .svc-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.skin-emergency .svc-card { border-left: 4px solid var(--accent); border-radius: 12px; padding: 22px 24px; background: linear-gradient(160deg, #1c1f26, #15171c); }
.skin-emergency .svc-card:hover { border-color: rgba(255, 255, 255, .16); border-left-color: var(--accent); box-shadow: 0 22px 44px -24px color-mix(in srgb, var(--accent) 70%, transparent); }
.skin-emergency .svc-media { margin: -22px -24px 8px; }
.skin-emergency .svc-icon { background: color-mix(in srgb, var(--accent) 18%, transparent); color: #ff8a80; border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.skin-emergency .svc-price { color: #fff; background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 8px; padding: 3px 10px; font-size: .92rem; }
.skin-emergency .svc-title, .skin-emergency .plan-name, .skin-emergency .team-name, .skin-emergency .how-t, .skin-emergency .about-h, .skin-emergency .promo-title { text-transform: none; letter-spacing: 0; font-weight: 800; font-stretch: 100%; }
.skin-emergency .faq-item summary { font-weight: 700; }
.skin-emergency .plan-amount { color: #fff; }
.skin-emergency .plan--featured { box-shadow: 0 0 0 1px var(--accent), 0 30px 60px -28px color-mix(in srgb, var(--accent) 70%, transparent); }
.skin-emergency .trust-strip { background: var(--bg-alt); }
.skin-emergency .trust-item .ti { background: color-mix(in srgb, var(--accent) 20%, transparent); color: #ff8a80; }
.skin-emergency .promo { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.skin-emergency .how-ic { background: #1c1f26; color: #ff8a80; border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.skin-emergency .how::before { border-top-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.skin-emergency .rev-card::before { color: var(--accent); opacity: .3; }
.skin-emergency .area-map { border-color: rgba(255, 255, 255, .12); }
.skin-emergency .area-map::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 60px rgba(0, 0, 0, .55); }
.skin-emergency .gal-item, .skin-emergency .about-media { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.skin-emergency .fin-band { background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .12) 0 18px, transparent 18px 36px), linear-gradient(120deg, color-mix(in srgb, var(--accent) 85%, #000), #2a0d0b); }

/* contact band + footer */
.skin-emergency .section.tone-dark { background: radial-gradient(800px 400px at 90% 0%, color-mix(in srgb, var(--accent) 28%, transparent), transparent 60%), var(--tx-grain-light), linear-gradient(160deg, #1b0d0d 0%, var(--bg) 62%); }
.skin-emergency .contact-list { background: var(--bg-alt); }
.skin-emergency .site-footer { border-top: 10px solid transparent; border-image: var(--hazard) 10; background: var(--tx-grain-light), var(--dark-2); }

/* page hero (service pages, services index) */
.skin-emergency .page-hero { background: radial-gradient(900px 400px at 90% -20%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 60%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px), var(--bg); }
.skin-emergency .page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--edge); height: 6px; background: var(--hazard); opacity: .9; }
.skin-emergency .steps li { border-left: 3px solid var(--accent); }
.skin-emergency .page-hero-glyph { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 30px 70px -20px color-mix(in srgb, var(--accent) 70%, transparent); }
.skin-emergency .page-hero-glyph::before { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* call bar: one big red call button */
@media (max-width: 780px) {
  .callbar { background: rgba(11, 12, 15, .95); border-top: 2px solid var(--accent); }
  .callbar a { background: var(--surface-2); color: #fff; }
  .hero { --hero-pt: 64px; padding-bottom: 80px; }
  .hero-media::after { background: linear-gradient(180deg, rgba(8, 8, 10, .78) 0%, rgba(8, 8, 10, .9) 100%); }
  .call-box { width: 100%; }
  .fact { border-left: 0; border-top: 1px solid var(--line); }
  .fact:first-child { border-top: 0; }
}
@media (max-width: 680px) {
  :root { --edge: 26px; }
  h1, h2, .hero-title, .page-title { font-stretch: 100%; }
  .call-box { padding: 12px 18px 12px 12px; gap: 12px; }
  .call-icon { width: 46px; height: 46px; flex: 0 0 46px; }
  .call-num { font-size: 1.42rem; white-space: nowrap; font-stretch: 100%; }
}