/* Industrial / Hazard: a variant of industrial, after instalanding.ai's
   hazard-terminal-security-page (MIT; only its visual language). A hazard terminal: amber
   glow on pure black over a 36px faint grid, CRT scanlines on top, diagonal hazard stripes
   as the rule above every section head and the edge of the pricing slab and footer, double
   glowing borders on cards, plans, the form and the visit card, corner brackets on media and
   the hero panel, condensed uppercase labels with a 1px glow outline. Danger red is kept for
   the one urgent thing (the hours note: emergency call-outs, closed hours); green for the
   hero's power and ready lamps. Archivo pushed to its narrowest width. The base's gauge,
   turbine and channel strip are re-skinned amber and red. Loads after industrial.css and
   overrides it. Suits electricians, security installers, mechanics, locksmiths, call-outs. */

:root[data-variant="industrial-hazard"] {
  --bg: #000000;
  --bg-soft: #0a0502;
  --surface: #060302;
  --ink: #f4e8d6;
  --ink-2: #e0d2bb;
  --muted: #bda585;
  --line: rgb(255 102 0 / 0.38);
  --accent: #ffaa00;
  --primary: #ffaa00;
  --primary-ink: #000000;
  --glass: rgb(0 0 0 / 0.92);
  --glass-border: rgb(255 102 0 / 0.7);
  --cyan: #ffaa00;
  --ember: #ff3300;
  --well: #030100;

  --glow: 255 102 0;
  --danger: #ff3300;
  --danger-fill: #ff2233;
  --ok: #33ff66;

  --display-weight: 900;
  --display-tracking: 0.005em;
  --display-leading: 0.94;

  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --radius-pill: 2px;
  --card-border: 1px solid rgb(var(--glow) / 0.8);
  --shadow:
    inset 0 0 0 3px #000,
    inset 0 0 0 4px rgb(var(--glow) / 0.55),
    inset 0 0 22px rgb(var(--glow) / 0.14),
    0 0 18px -2px rgb(var(--glow) / 0.4);

  --slab-bg: #040201;
  --slab-ink: var(--ink);
  --footer-bg: #040201;
  --footer-ink: var(--ink);

  --hazard: repeating-linear-gradient(-45deg, #ffaa00 0 10px, #000 10px 20px);
  --brk: #ffaa00;
  --brackets:
    linear-gradient(var(--brk), var(--brk)) 0 0 / 20px 2px no-repeat,
    linear-gradient(var(--brk), var(--brk)) 0 0 / 2px 20px no-repeat,
    linear-gradient(var(--brk), var(--brk)) 100% 0 / 20px 2px no-repeat,
    linear-gradient(var(--brk), var(--brk)) 100% 0 / 2px 20px no-repeat,
    linear-gradient(var(--brk), var(--brk)) 0 100% / 20px 2px no-repeat,
    linear-gradient(var(--brk), var(--brk)) 0 100% / 2px 20px no-repeat,
    linear-gradient(var(--brk), var(--brk)) 100% 100% / 20px 2px no-repeat,
    linear-gradient(var(--brk), var(--brk)) 100% 100% / 2px 20px no-repeat;

  --ph-1: repeating-linear-gradient(-45deg, rgb(255 170 0 / 0.1) 0 8px, transparent 8px 16px), radial-gradient(80% 60% at 30% 20%, #2a1200, #0c0500 70%);
  --ph-2: radial-gradient(70% 60% at 70% 80%, rgb(255 102 0 / 0.4), transparent 60%), linear-gradient(160deg, #1d0c00, #050200);
  --ph-3: repeating-linear-gradient(0deg, rgb(255 102 0 / 0.1) 0 1px, transparent 1px 6px), linear-gradient(160deg, #1a0a00, #040100);
  --ph-4: radial-gradient(60% 50% at 30% 70%, rgb(255 170 0 / 0.3), transparent 60%), linear-gradient(200deg, #220e00, #050200);
  --ph-5: repeating-linear-gradient(-45deg, rgb(255 51 0 / 0.12) 0 6px, transparent 6px 14px), linear-gradient(160deg, #1c0a00, #060200);
  --ph-6: radial-gradient(80% 60% at 50% 40%, #351600, #120700 60%, #050200);

  color-scheme: dark;

  /* the faint 36px grid behind everything */
  & body {
    background:
      linear-gradient(rgb(var(--glow) / 0.08) 1px, transparent 1px) 0 0 / 36px 36px,
      linear-gradient(90deg, rgb(var(--glow) / 0.08) 1px, transparent 1px) 0 0 / 36px 36px,
      radial-gradient(70% 40% at 50% 0%, rgb(var(--glow) / 0.12), transparent 70%),
      #000;
  }
  /* CRT scanlines over the whole page: fixed, static, never in the way */
  & body::after {
    content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgb(0 0 0 / 0.16) 0 1px, transparent 1px 3px);
  }
  & ::selection { background: var(--accent); color: #000; }
  & :focus-visible { outline: 2px solid #ffd470; outline-offset: 3px; border-radius: 2px; box-shadow: 0 0 12px 2px rgb(var(--glow) / 0.7); }

  /* headings: the narrowest Archivo, shouting */
  & h1, & h2 { font-stretch: 62%; text-transform: uppercase; text-shadow: 0 0 18px rgb(var(--glow) / 0.45); }
  & h3, & h4, & .faq-item summary { font-stretch: 72%; text-transform: uppercase; letter-spacing: 0.02em; }
  & h3 { font-weight: 800; }
  & .brand-name, & .group-title, & .service-name, & .footer-name { font-stretch: 68%; }

  /* hazard stripe above every section head, glowing edges */
  & .section-head::before {
    content: ""; display: block; height: 9px; margin-bottom: 22px;
    background: var(--hazard);
    box-shadow: 0 0 10px rgb(var(--glow) / 0.65), 0 1px 0 #ffaa00, 0 -1px 0 #ffaa00;
  }

  /* condensed uppercase labels with a 1px glow outline */
  & .eyebrow, & .pill {
    display: inline-flex; width: fit-content; padding: 3px 9px;
    font: 700 12px/1.3 var(--font-display); font-stretch: 70%; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--accent); background: #000;
    border: 1px solid rgb(var(--glow) / 0.9); border-radius: 2px;
    box-shadow: 0 0 8px rgb(var(--glow) / 0.5), inset 0 0 6px rgb(var(--glow) / 0.2);
  }
  & .in-stencil { letter-spacing: 0.2em; }
  & .plan-flag { background: var(--accent); color: #000; border-color: var(--accent); }

  /* double glowing borders */
  & .card, & .plate, & .pricing-slab, & .footer-card, & .plan {
    background: linear-gradient(180deg, rgb(var(--glow) / 0.07), transparent 45%), rgb(3 1 0 / 0.9);
    border: 1px solid rgb(var(--glow) / 0.85);
    box-shadow: var(--shadow);
  }
  & .service { padding: 30px 28px 26px; }
  & .service-foot { border-top: 1px dashed rgb(var(--glow) / 0.5); }
  & .group-title { border-top: 2px solid var(--accent); box-shadow: 0 -4px 10px -6px rgb(var(--glow) / 0.8); }
  & .index, & .price, & .stars { color: var(--accent); }
  & .price { text-shadow: 0 0 10px rgb(var(--glow) / 0.5); }

  /* buttons: hard amber slabs that glow, invert on hover */
  & .btn { font-weight: 800; font-stretch: 72%; font-size: 15px; letter-spacing: 0.1em; border-radius: 2px; }
  & .btn-primary {
    background: var(--accent); color: #000; border-color: #ffd470;
    box-shadow: 0 0 20px -2px rgb(var(--glow) / 0.8), inset 0 0 0 2px #000, inset 0 0 0 3px rgb(0 0 0 / 0.15);
  }
  & .btn-primary:hover { background: #ffc233; box-shadow: 0 0 28px 0 rgb(var(--glow) / 0.95), inset 0 0 0 2px #000; }
  & .btn-primary:active { transform: translateY(1px); box-shadow: 0 0 10px rgb(var(--glow) / 0.8), inset 0 0 0 2px #000; }
  & .btn-ghost {
    background: #000; color: var(--accent); border-color: rgb(var(--glow) / 0.95);
    box-shadow: 0 0 10px rgb(var(--glow) / 0.4), inset 0 0 8px rgb(var(--glow) / 0.2);
  }
  & .btn-ghost:hover { background: rgb(var(--glow) / 0.18); color: #ffd470; }
  & .pricing-slab .btn-ghost, & .footer .btn-ghost { color: var(--accent); }

  /* nav: black strip, glowing amber rule */
  & .nav { background: rgb(0 0 0 / 0.94); border-bottom: 2px solid var(--accent); box-shadow: 0 2px 14px -2px rgb(var(--glow) / 0.55); }
  & .brand-mark { border-radius: 2px; background: var(--accent); color: #000; box-shadow: 0 0 12px rgb(var(--glow) / 0.7); }
  & .nav-links a { font-weight: 700; font-stretch: 75%; font-size: 14px; letter-spacing: 0.1em; color: var(--ink-2); }
  & .nav-links a:hover, & .nav-phone:hover { color: var(--accent); text-shadow: 0 0 10px rgb(var(--glow) / 0.8); }
  & .nav-phone { color: var(--accent); }
  & .nav-menu summary { border-color: rgb(var(--glow) / 0.9); border-radius: 2px; background: #000; box-shadow: 0 0 8px rgb(var(--glow) / 0.4); }
  & .nav-menu ul { background: #040201; box-shadow: var(--shadow); }
  & .nav-menu a:hover { background: rgb(var(--glow) / 0.2); color: var(--accent); }

  /* highlights rail: hazard stripes top and bottom */
  & .highlights {
    background:
      var(--hazard) top / 100% 8px no-repeat,
      var(--hazard) bottom / 100% 8px no-repeat,
      rgb(4 2 1 / 0.9);
    box-shadow: 0 0 14px -2px rgb(var(--glow) / 0.5);
  }
  & .marquee-track { color: var(--ink); font-weight: 700; }
  & .marquee-track li::after { content: "\25A0"; font-size: 8px; color: var(--accent); }

  /* media: corner brackets */
  & .about-media, & .gallery-item, & .hero-media {
    position: relative; border: 1px solid rgb(var(--glow) / 0.7); box-shadow: 0 0 14px -2px rgb(var(--glow) / 0.4);
  }
  & .about-media::after, & .gallery-item::after, & .hero-media::after {
    content: ""; position: absolute; inset: 8px; z-index: 2; pointer-events: none; background: var(--brackets);
  }
  & .ph-label { background: rgb(0 0 0 / 0.9); color: var(--accent); border: 1px solid rgb(var(--glow) / 0.7); border-radius: 2px; }
  & .stat { border-top: 2px solid rgb(var(--glow) / 0.7); }
  & .stat dd { color: var(--accent); font-size: 32px; text-shadow: 0 0 12px rgb(var(--glow) / 0.55); }

  /* pricing: hazard edges top and bottom of the slab */
  & .pricing-slab {
    background:
      var(--hazard) top / 100% 9px no-repeat,
      var(--hazard) bottom / 100% 9px no-repeat,
      linear-gradient(180deg, rgb(var(--glow) / 0.07), transparent 45%),
      #040201;
    padding-block: calc(clamp(28px, 5vw, 64px) + 9px);
  }
  & .pricing-slab .lead, & .pricing-slab .eyebrow { opacity: 1; }
  & .pricing-slab .lead { color: var(--ink-2); }
  & .pricing-slab .section-head::before { content: none; }
  & .plan { background: #000; box-shadow: var(--shadow); }
  & .plan.featured {
    background: linear-gradient(180deg, rgb(var(--glow) / 0.2), rgb(var(--glow) / 0.04)), #050200;
    border-color: var(--accent);
    box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px var(--accent), inset 0 0 26px rgb(var(--glow) / 0.28), 0 0 26px -2px rgb(var(--glow) / 0.65);
  }
  & .plan-price .mono { color: var(--accent); text-shadow: 0 0 12px rgb(var(--glow) / 0.5); }
  & .plan-features li::before { color: var(--ok); }

  & .faq-item, & .faq-item:first-child { border-color: rgb(var(--glow) / 0.45); }
  & .faq-item summary::after { color: var(--accent); }
  & .chips .pill { font-size: 13px; }

  /* visit, form: double borders; the hours note is the urgent thing, so it is red */
  & .map { border: 1px solid rgb(var(--glow) / 0.8); box-shadow: var(--shadow); border-radius: 3px; }
  & .map iframe { filter: grayscale(1) invert(0.92) sepia(1) hue-rotate(-15deg) saturate(2.5) contrast(0.9); }
  & .hours th, & .hours td { border-color: rgb(var(--glow) / 0.4); border-bottom-style: dashed; }
  & .hours td { color: var(--accent); }
  & .visit-card .note {
    padding: 8px 12px; margin-top: 0; color: var(--danger); font-weight: 600;
    background: rgb(255 34 51 / 0.08); border: 1px solid var(--danger); border-left-width: 4px;
    box-shadow: 0 0 12px -2px rgb(255 51 0 / 0.6);
  }
  & .field input, & .field textarea { background: #000; border-color: rgb(var(--glow) / 0.7); border-radius: 2px; box-shadow: inset 0 0 8px rgb(var(--glow) / 0.15); }
  & .field input:focus, & .field textarea:focus { outline: 2px solid #ffd470; box-shadow: 0 0 14px rgb(var(--glow) / 0.7); }
  & .field label { font-weight: 700; font-stretch: 75%; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }

  /* footer: a hazard edge along the top */
  & .footer-card {
    background: var(--hazard) top / 100% 9px no-repeat, linear-gradient(180deg, rgb(var(--glow) / 0.07), transparent 45%), #040201;
    padding-top: calc(clamp(28px, 5vw, 56px) + 9px);
  }
  & .footer-title { color: var(--accent); opacity: 1; }
  & .footer-base { border-top-color: rgb(var(--glow) / 0.5); }
  & .wordmark { -webkit-text-stroke: 1.5px rgb(var(--glow) / 0.7); filter: drop-shadow(0 0 8px rgb(var(--glow) / 0.5)); }
  & .callbar { background: rgb(0 0 0 / 0.96); border-top: 2px solid var(--accent); box-shadow: 0 -2px 14px -2px rgb(var(--glow) / 0.55); }

  /* ---------- hero: the machine, re-skinned as a hazard HUD ---------- */
  & .screw { display: none; }
  & .in-machine { border-radius: 4px; }
  & .in-machine::before {
    content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 1; background: var(--brackets);
  }
  & .in-nameplate { border-bottom: 0; position: relative; }
  & .in-nameplate::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
    background: var(--hazard); box-shadow: 0 0 10px rgb(var(--glow) / 0.65);
  }
  & .in-copy h1 { font-size: clamp(42px, 6vw, 88px); }
  & .in-lamps { color: var(--muted); }
  & .lamp { border-color: #000; }
  & .lamp.green { background: var(--ok); box-shadow: 0 0 12px var(--ok); }
  & .lamp.amber { background: var(--accent); box-shadow: 0 0 14px rgb(var(--glow)); }

  & .in-bay {
    background: #020100; border: 1px solid rgb(var(--glow) / 0.6); border-radius: 3px;
    box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px rgb(var(--glow) / 0.3), inset 0 0 20px rgb(var(--glow) / 0.12);
  }
  & .in-label { color: var(--muted); }

  & .in-well {
    background: radial-gradient(circle, #000 55%, #2a1000 72%, #060200);
    box-shadow: 0 0 0 2px rgb(var(--glow) / 0.8), 0 0 18px rgb(var(--glow) / 0.5), inset 0 0 18px rgb(0 0 0 / 0.9);
  }
  & .in-fan path { fill: #3a1600; stroke: #ff6600; stroke-width: 1; }
  & .in-fan .hub { fill: #1a0a00; stroke: #ff6600; }
  & .in-fan .hub-cap { fill: var(--danger); }

  & .in-gauge .off { stroke: rgb(var(--glow) / 0.26); }
  & .in-gauge .on { stroke: var(--accent); filter: drop-shadow(0 0 4px rgb(var(--glow) / 0.9)); }
  & .in-gauge .hot { stroke: var(--danger); filter: drop-shadow(0 0 4px rgb(255 51 0 / 0.9)); }
  & .in-big { color: var(--accent); text-shadow: 0 0 18px rgb(var(--glow) / 0.7); }

  & .in-cell { background: #000; border: 1px solid rgb(var(--glow) / 0.5); border-radius: 2px; }
  & .in-cell dt { color: var(--muted); }
  & .in-cell dd { color: var(--accent); text-shadow: 0 0 12px rgb(var(--glow) / 0.65); }

  & .in-channels a {
    background: linear-gradient(180deg, rgb(var(--glow) / 0.1), rgb(var(--glow) / 0.02)); border: 1px solid rgb(var(--glow) / 0.55); border-radius: 2px;
  }
  & .in-channels a:hover { border-color: var(--accent); background: rgb(var(--glow) / 0.22); box-shadow: 0 0 12px rgb(var(--glow) / 0.5); }
  & .led { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
  & .in-ch { color: var(--muted); }
  & .in-ch-price { color: var(--accent); }

  /* ---------- layouts: reel, spotlight (borrowed), terminal (new) ---------- */
  /* gallery "reel": each frame a framed amber bay under a hazard bar, its number in the glow */
  & .reel-frame {
    position: relative; padding: 24px 10px 14px; background: #030100;
    border: 1px solid rgb(var(--glow) / 0.7); border-radius: 3px;
    box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px rgb(var(--glow) / 0.3), 0 0 14px -2px rgb(var(--glow) / 0.4);
  }
  & .reel-frame::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px;
    background: var(--hazard); box-shadow: 0 0 10px rgb(var(--glow) / 0.65);
  }
  & .reel-frame:hover { border-color: var(--accent); box-shadow: inset 0 0 0 3px #000, inset 0 0 0 4px var(--accent), 0 0 24px -2px rgb(var(--glow) / 0.7); }
  & .reel-frame .gallery-item { border-radius: 2px; }
  & .reel-cap { font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }
  & .reel-no { color: var(--accent); text-shadow: 0 0 10px rgb(var(--glow) / 0.6); letter-spacing: 0.1em; }
  & .reel-track { scrollbar-color: var(--accent) #000; }
  & .reel-track:focus-visible { outline: 2px solid #ffd470; box-shadow: none; }

  /* reviews "spotlight": the dim ones are powered-down bays; the lit one gets the double amber
     border and glow; the counter and buttons are terminal readouts, and the switch is stepped */
  & .spot {
    background: #000; border: 1px solid rgb(var(--glow) / 0.4); border-radius: 3px;
  }
  & .spot.on {
    background: linear-gradient(180deg, rgb(var(--glow) / 0.07), transparent 45%), rgb(3 1 0 / 0.9);
    border-color: rgb(var(--glow) / 0.85); box-shadow: var(--shadow);
  }
  & .spot blockquote p { color: var(--ink); }
  & .spot .stars { color: var(--accent); text-shadow: 0 0 8px rgb(var(--glow) / 0.6); }
  & .spot .review-author { font-stretch: 75%; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
  & .spot-count { color: var(--accent); font-stretch: 75%; font-weight: 700; letter-spacing: 0.14em; text-shadow: 0 0 10px rgb(var(--glow) / 0.6); }
  & .spot-controls .carousel-btn {
    background: #000; color: var(--accent); border: 1px solid rgb(var(--glow) / 0.9); border-radius: 2px;
    box-shadow: 0 0 10px rgb(var(--glow) / 0.4), inset 0 0 8px rgb(var(--glow) / 0.2);
  }
  & .spot-controls .carousel-btn:hover:not(:disabled) { background: rgb(var(--glow) / 0.18); color: #ffd470; }

  /* faq "terminal": a black screen in the double amber border; amber prompts, the question in
     full ink, the output in a dashed amber gutter beneath it, a block cursor at the end */
  & .terminal {
    max-width: none; padding: clamp(18px, 3vw, 36px); background: #000;
    border: 1px solid rgb(var(--glow) / 0.85); border-radius: 3px; box-shadow: var(--shadow);
  }
  & .term-q { color: var(--ink); font-weight: 700; }
  & .term-q::before { color: var(--accent); font-weight: 800; text-shadow: 0 0 10px rgb(var(--glow) / 0.8); }
  & .term-a { margin-left: 0.8ch; padding-left: 1.6ch; border-left: 1px dashed rgb(var(--glow) / 0.5); color: var(--ink-2); }
  & .terminal::after { background: var(--accent); box-shadow: 0 0 12px rgb(var(--glow) / 0.8); margin-left: 0; }

  /* ---------- motion: only the live lamp blinks, and slowly; the terminal types its prompts in ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .lamp.amber { animation: hz-blink 1.6s 1s steps(1) infinite; }
      & .terminal::after { animation: hz-blink 1.1s steps(1) infinite; }
      & .reel-frame { transition: border-color 0.12s steps(2, jump-end), box-shadow 0.12s steps(2, jump-end); }
      & .spot { transition: opacity 0.12s steps(2, jump-end), border-color 0.12s steps(2, jump-end), box-shadow 0.12s steps(2, jump-end); }
      @supports (animation-timeline: view()) {
        & .term-q {
          animation-name: hz-type; animation-timing-function: steps(26, end); animation-fill-mode: both;
          animation-timeline: view(); animation-range: entry 5% entry 65%;
        }
      }
    }
  }
}

@keyframes hz-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

@keyframes hz-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.3; } }