/* Industrial: after instalanding.ai's machine-front-panel-page (MIT). The page is a
   machine: near-black chassis, iron plates with grain and screws, recessed bays, amber
   lamps, cyan gauge ticks, Archivo set narrow and JetBrains Mono for every reading.
   Suits plumbers, electricians, mechanics, builders, security installers. */

:root[data-theme="industrial"] {
  /* motion below the hero (see base.css) */
  --reveal-y: 12px; --reveal-ease: cubic-bezier(0.25, 0.9, 0.2, 1); --reveal-d: 0.6; --nav-lift: 0 10px 24px -10px rgb(0 0 0 / 0.7); --hero-in: type; --reveal-in: wipe;
  --bg: #0a0a0c;
  --bg-soft: #121317;
  --surface: #1b1c21;
  --ink: #ecebe6;
  --ink-2: #c4c3bc;
  --muted: #94938c;
  --line: #2d2f35;
  --accent: #ffb020;
  --primary: #ffb020;
  --primary-ink: #0a0a0c;
  --glass: rgb(18 19 23 / 0.9);
  --glass-border: #2d2f35;
  --cyan: #4fd6e8;
  --ember: #ff6a2b;
  --well: #0d0e11;

  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.01em;
  --display-leading: 0.98;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 8px;
  --shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.07),
    inset 0 -14px 24px -12px rgb(0 0 0 / 0.55),
    0 22px 40px -18px rgb(0 0 0 / 0.8);
  --card-border: 1px solid #2a2c32;

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

  --ph-1: radial-gradient(80% 60% at 30% 20%, #3b3e46, #1d1e23 60%, #101114);
  --ph-2: radial-gradient(70% 60% at 70% 80%, rgb(255 176 32 / 0.35), transparent 60%), linear-gradient(160deg, #2a2c32, #121317);
  --ph-3: radial-gradient(80% 60% at 60% 30%, #2f3a40, #172024 60%, #0d1215);
  --ph-4: radial-gradient(60% 50% at 30% 70%, rgb(79 214 232 / 0.25), transparent 60%), linear-gradient(200deg, #2a2c32, #111215);
  --ph-5: repeating-linear-gradient(118deg, rgb(255 255 255 / 0.03) 0 2px, transparent 2px 7px), linear-gradient(160deg, #34312c, #16151a);
  --ph-6: radial-gradient(80% 60% at 50% 40%, #403a33, #1d1b1a 60%, #0f0e0e);

  /* the plate: grain, a 162deg iron gradient, and a screw in each corner */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --screw: #7d818a 0 1.5px, #45484f 2px 5px, #0b0b0d 5.5px 6.5px, transparent 7px;
  --screws:
    radial-gradient(circle at 14px 14px, var(--screw)),
    radial-gradient(circle at calc(100% - 14px) 14px, var(--screw)),
    radial-gradient(circle at 14px calc(100% - 14px), var(--screw)),
    radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--screw));
  --wear:
    radial-gradient(30% 40% at 8% 12%, rgb(140 80 40 / 0.1), transparent 70%),
    radial-gradient(25% 35% at 92% 85%, rgb(140 80 40 / 0.08), transparent 70%);
  --iron: linear-gradient(162deg, #1f2126, #17181c);

  color-scheme: dark;

  & body {
    background: radial-gradient(70% 50% at 50% 0%, #17181d, transparent 70%), var(--bg);
  }
  & h1, & h2 { font-stretch: 78%; text-transform: uppercase; }
  & h3, & h4, & .faq-item summary { font-stretch: 88%; }
  & .eyebrow { color: var(--accent); }

  & .card, & .plate, & .pricing-slab, & .footer-card {
    background: var(--grain), var(--screws), var(--wear), var(--iron);
    border: 1px solid #2a2c32;
    box-shadow: var(--shadow);
  }

  & .btn { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 14px; font-stretch: 90%; }
  & .btn-primary {
    background: linear-gradient(180deg, #ffc24d, #ffb020 50%, #e89a0c);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 0 24px -6px rgb(255 176 32 / 0.6), 0 4px 0 #8a5a06;
  }
  & .btn-primary:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 1px 0 #8a5a06; }
  & .btn-ghost { background: var(--well); border-color: #3a3d44; box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.6); }
  & .pill { background: var(--well); border-color: #33363d; color: var(--accent); }

  /* nav: a dark strip with an amber rule */
  & .nav { background: rgb(10 10 12 / 0.92); border-bottom: 2px solid var(--accent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  & .brand-mark { border-radius: 6px; background: var(--accent); color: var(--primary-ink); font-stretch: 80%; }
  & .brand-name { text-transform: uppercase; font-stretch: 80%; font-size: 20px; }
  & .nav-links a { text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em; font-weight: 600; }
  & .nav-phone { color: var(--accent); }
  & .nav-menu summary { border-color: #3a3d44; border-radius: 8px; background: var(--well); }
  & .nav-menu ul { background: #17181c; }

  /* ---------- signature hero: the machine ---------- */
  & .in-hero { padding-block: clamp(20px, 3vw, 40px) clamp(40px, 5vw, 64px); }
  & .in-machine { position: relative; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--radius-lg); }
  & .screw {
    position: absolute; width: 15px; height: 15px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #9a9ea6, #4a4d54 60%, #2a2c31);
    box-shadow: inset 0 -1px 2px rgb(0 0 0 / 0.6), 0 1px 0 rgb(255 255 255 / 0.06);
  }
  & .screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 6.5px; height: 2px; background: #1a1b1f; border-radius: 1px; }
  & .screw.s1 { left: 12px; top: 12px; } & .screw.s1::after { rotate: 20deg; }
  & .screw.s2 { right: 12px; top: 12px; } & .screw.s2::after { rotate: -55deg; }
  & .screw.s3 { left: 12px; bottom: 12px; } & .screw.s3::after { rotate: 80deg; }
  & .screw.s4 { right: 12px; bottom: 12px; } & .screw.s4::after { rotate: -10deg; }

  & .in-nameplate { display: grid; gap: 24px; padding-bottom: clamp(24px, 3vw, 36px); border-bottom: 1px solid #2a2c32; }
  & .in-stencil { letter-spacing: 0.24em; }
  & .in-copy h1 { font-size: clamp(38px, 5.4vw, 76px); max-width: 24ch; }
  & .in-copy .lead { margin-top: 18px; max-width: 62ch; }
  & .in-lamps { display: flex; gap: 18px; align-self: start; font: 500 11px/1 var(--font-mono); color: var(--muted); letter-spacing: 0.1em; }
  & .in-lamps li { display: grid; justify-items: center; gap: 8px; }
  & .lamp { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #0b0b0d; }
  & .lamp.green { background: #3bd16f; box-shadow: 0 0 12px #3bd16f; }
  & .lamp.amber { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
  @media (min-width: 900px) { & .in-nameplate { grid-template-columns: 1fr auto; } }

  & .in-bays { display: grid; gap: 14px; margin-top: clamp(20px, 3vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
  & .in-bay {
    margin: 0; padding: 18px; border-radius: var(--radius);
    background: var(--well);
    box-shadow: inset 0 2px 10px rgb(0 0 0 / 0.7), inset 0 -1px 0 rgb(255 255 255 / 0.05);
  }
  & .in-label { margin: 0; font-size: 11px; letter-spacing: 0.12em; color: var(--muted); }

  & .in-fan-bay { display: grid; justify-items: center; gap: 12px; }
  & .in-well {
    display: grid; place-items: center; width: 150px; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, #050506 55%, #1d1f24 72%, #0b0c0e);
    box-shadow: inset 0 6px 18px rgb(0 0 0 / 0.9), 0 1px 0 rgb(255 255 255 / 0.06);
  }
  & .in-fan { width: 128px; height: 128px; }
  & .in-fan path { fill: #3a3d45; stroke: #5a5e67; stroke-width: 0.8; }
  & .in-fan .hub { fill: #2a2c31; stroke: #5a5e67; }
  & .in-fan .hub-cap { fill: var(--accent); }

  & .in-gauge-bay { display: grid; align-content: center; gap: 4px; }
  & .in-gauge { width: 100%; max-width: 260px; justify-self: center; }
  & .in-gauge line { stroke-width: 3.2; stroke-linecap: round; }
  & .in-gauge .off { stroke: #2a2c32; }
  & .in-gauge .on { stroke: var(--cyan); filter: drop-shadow(0 0 3px rgb(79 214 232 / 0.7)); }
  & .in-gauge .hot { stroke: var(--ember); filter: drop-shadow(0 0 3px rgb(255 106 43 / 0.7)); }
  & .in-reading { margin: -12px 0 0; display: grid; justify-items: center; gap: 4px; text-align: center; }
  & .in-big { font-size: 40px; font-weight: 500; color: var(--ink); line-height: 1; text-shadow: 0 0 18px rgb(79 214 232 / 0.35); }

  & .in-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
  /* an odd last readout takes the whole row instead of leaving a hole */
  & .in-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
  & .in-cell { padding: 12px; border-radius: 6px; background: #050506; border: 1px solid #1d1f24; }
  & .in-cell dt { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  & .in-cell dd { margin: 6px 0 0; font-size: 22px; color: var(--accent); text-shadow: 0 0 12px rgb(255 176 32 / 0.45); overflow-wrap: anywhere; }

  & .in-channels { display: grid; align-content: center; gap: 6px; padding: 10px; }
  & .in-channels a {
    display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 6px; text-decoration: none;
    background: linear-gradient(180deg, #1c1d22, #141519); border: 1px solid #2a2c32;
    font-size: 14px;
  }
  & .in-channels a:hover { border-color: var(--accent); }
  & .led { width: 8px; height: 8px; border-radius: 50%; background: #3bd16f; box-shadow: 0 0 8px #3bd16f; }
  & .in-ch { font-size: 11px; color: var(--muted); }
  & .in-ch-name { font-weight: 600; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
  & .in-ch-price { font-size: 12px; color: var(--accent); white-space: nowrap; }

  /* ---------- sections ---------- */
  /* highlights: hazard-striped rails */
  & .highlights {
    border: 0; padding-block: 26px;
    background:
      repeating-linear-gradient(-45deg, var(--accent) 0 12px, #0a0a0c 12px 24px) top / 100% 7px no-repeat,
      repeating-linear-gradient(-45deg, var(--accent) 0 12px, #0a0a0c 12px 24px) bottom / 100% 7px no-repeat,
      #111216;
  }
  & .marquee-track { color: var(--ink); font-weight: 700; }
  & .marquee-track li::after { content: "▲"; font-size: 10px; }

  & .group-title { border-top: 2px solid var(--accent); text-transform: uppercase; font-stretch: 80%; }
  & .service { padding: 30px 28px 26px; }
  & .service-name { font-size: 22px; text-transform: uppercase; font-stretch: 82%; }
  & .service-foot { border-top-color: #2a2c32; }
  & .index { color: var(--accent); }
  & .price { color: var(--accent); }

  & .about-media, & .gallery-item, & .hero-media { border: 1px solid #2a2c32; }
  & .ph-label { background: rgb(5 5 6 / 0.85); color: var(--accent); border: 1px solid #2a2c32; }
  & .stat { border-top: 2px solid #2a2c32; }
  & .stat dd { color: var(--accent); font-size: 32px; }

  & .stars { color: var(--accent); }

  & .pricing-slab { border-radius: var(--radius-lg); }
  & .plan { background: var(--well); border-color: #2a2c32; box-shadow: inset 0 2px 10px rgb(0 0 0 / 0.6); }
  & .plan.featured { background: #1f2126; color: var(--ink); border: 1px solid var(--accent); }

  & .faq-item, & .faq-item:first-child { border-color: #2a2c32; }
  & .faq-item summary::after { color: var(--accent); }

  & .chips .pill { font-size: 13px; border-radius: 6px; }

  & .map { border: 1px solid #2a2c32; }
  & .map iframe { filter: grayscale(1) invert(0.92) hue-rotate(180deg) contrast(0.9); }
  & .hours th, & .hours td { border-color: #2a2c32; }
  & .hours td { color: var(--accent); }
  & .field input, & .field textarea { background: var(--well); border-color: #33363d; box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.5); }

  & .footer-card { padding-bottom: 0; }
  & .footer-name { text-transform: uppercase; font-stretch: 80%; }
  & .wordmark {
    display: block; margin: 28px 0 -0.16em;
    font: 900 clamp(60px, 17vw, 240px)/0.85 var(--font-display);
    font-stretch: 70%; text-transform: uppercase; white-space: nowrap; letter-spacing: -0.02em;
    color: transparent; -webkit-text-stroke: 1.5px rgb(255 176 32 / 0.45);
    user-select: none;
  }

  & .callbar { background: rgb(10 10 12 / 0.94); border-top: 2px solid var(--accent); }

  /* ---------- new layouts: the rate sheet, the gauges, the call-out ---------- */
  /* services "table": a rate sheet in a recessed bay; the lamp lights on hover and focus */
  & .rate-sheet {
    padding: 6px 4px; border: 1px solid #2a2c32; border-radius: var(--radius); border-top: 1px solid #2a2c32;
    background: var(--well);
    box-shadow: inset 0 2px 12px rgb(0 0 0 / 0.75), inset 0 -1px 0 rgb(255 255 255 / 0.05);
  }
  & .rate-sheet li + li .rate { border-top: 1px solid #1d1f24; }
  & .rate { border-bottom: 0; border-radius: 6px; transition: background-color 0.12s steps(2, jump-end); }
  & .rate:is(:hover, :focus-visible) { background: #17181c; }
  & .rate:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  & .rate-lamp { width: 11px; height: 11px; background: #050506; border: 2px solid #2a2c32; }
  & .rate:is(:hover, :focus-visible) .rate-lamp {
    background: var(--accent); border-color: #0b0b0d; box-shadow: 0 0 12px var(--accent), 0 0 3px #fff8;
  }
  & .rate-name { font-size: 20px; text-transform: uppercase; font-stretch: 82%; }
  & .rate-desc { color: var(--ink-2); }
  & .rate-time { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; color: var(--muted); }
  & .rate-price { color: var(--accent); font-size: 19px; text-shadow: 0 0 12px rgb(255 176 32 / 0.45); }

  /* highlights "gauges": readouts, each in its own bay */
  & .highlights-gauges {
    background:
      repeating-linear-gradient(-45deg, var(--accent) 0 12px, #0a0a0c 12px 24px) top / 100% 7px no-repeat,
      repeating-linear-gradient(-45deg, var(--accent) 0 12px, #0a0a0c 12px 24px) bottom / 100% 7px no-repeat,
      #111216;
    padding-block: 34px;
  }
  & .gauges li {
    background: var(--well); border: 1px solid #2a2c32; border-radius: var(--radius);
    box-shadow: inset 0 2px 10px rgb(0 0 0 / 0.7), inset 0 -1px 0 rgb(255 255 255 / 0.05);
  }
  & .gauge-lamp { background: #3bd16f; border: 2px solid #0b0b0d; box-shadow: 0 0 12px #3bd16f; }
  & .gauges li:nth-child(4n + 3) .gauge-lamp { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
  & .gauge-n { color: var(--accent); font-size: 13px; text-shadow: 0 0 10px rgb(255 176 32 / 0.45); }
  & .gauge-text { color: var(--ink); font-weight: 700; font-stretch: 88%; text-transform: uppercase; letter-spacing: 0.02em; }

  /* contact "callout": the number is the panel */
  & .callout {
    padding: clamp(22px, 3vw, 40px); border-radius: var(--radius-lg); width: 100%; box-sizing: border-box;
    background: var(--grain), var(--screws), var(--wear), var(--iron); border: 1px solid #2a2c32; box-shadow: var(--shadow);
  }
  & .callout-phone {
    font-family: var(--font-display); font-stretch: 62%; font-weight: 900; text-transform: uppercase;
    font-size: clamp(30px, calc(100cqi / 6), 190px); letter-spacing: 0.01em;
    color: var(--accent); text-shadow: 0 0 28px rgb(255 176 32 / 0.45);
  }
  & .callout-phone:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
  & .callout-btn { min-height: 68px; font-size: 20px; }
  & .callout-more a { color: var(--ink); }

  /* ---------- motion: the machine boots, the turbine turns ---------- */
  @media (prefers-reduced-motion: no-preference) {
    &:not([data-motion="none"]) {
      & .in-fan { animation: in-spin 2.4s linear infinite; }
      & .in-gauge .on { animation: in-tick 0.3s calc(0.5s + var(--i) * 40ms) both; }
      & .lamp.green:first-child { animation: in-flicker 0.6s 0.4s steps(1) both; }
      & .lamp.amber { animation: in-blink 2.4s 1.4s steps(1) infinite; }
    }
    &[data-motion="showpiece"] .in-fan { animation-duration: 1.1s; }
  }
}

@keyframes in-spin { to { transform: rotate(360deg); } }
@keyframes in-tick { from { stroke: #2a2c32; filter: none; } }
@keyframes in-flicker { 0% { opacity: 0.2; } 25% { opacity: 1; } 40% { opacity: 0.3; } 60%, 100% { opacity: 1; } }
@keyframes in-blink { 0%, 70% { opacity: 1; } 71%, 100% { opacity: 0.25; } }