/* Prestige Garage Door Services
   One stylesheet, no framework, no build step.
   Palette is taken from the logo in the MC social branding kit: crimson red
   and near-black on white. The blue recorded in brand_color.json is a bad
   manual entry and is deliberately not used. */

:root {
  --red: #c8102e;
  --red-dark: #9e0c24;
  --red-tint: #fdf2f4;
  --ink: #231f20;
  --ink-soft: #4a4548;
  --paper: #ffffff;
  --mist: #f4f5f7;
  --line: #e1e3e8;
  --focus: #0b63d6;

  --wrap: 1120px;
  --gap: 24px;
  --bar-h: 56px; /* sticky action bar height. The gate reads this number. */
  --radius: 10px;
  --shadow: 0 1px 2px rgba(35, 31, 32, 0.06), 0 8px 24px rgba(35, 31, 32, 0.06);

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--red-dark); text-underline-offset: 2px; }
a:hover { color: var(--red); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(28px, 5.2vw, 46px); font-weight: 800; }
h2 { font-size: clamp(22px, 3.4vw, 31px); font-weight: 750; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 1em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.sec { padding-block: clamp(28px, 5vw, 52px); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; color: #fff; }

/* ------------------------------------------------------------------ header */

.hd {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.hd-in {
  display: flex; align-items: center; gap: 16px;
  min-height: 68px;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { width: auto; height: 44px; }

.nav { margin-left: auto; }
.nav-l { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-l > li { position: relative; }
.nav-l a,
.sub-t {
  display: block; padding: 10px 12px; border-radius: 8px;
  font: inherit; font-weight: 600; font-size: 15px;
  color: var(--ink); text-decoration: none;
  background: none; border: 0; cursor: pointer;
}
.nav-l a:hover, .sub-t:hover { background: var(--mist); color: var(--ink); }
.sub-t::after { content: ""; display: inline-block; margin-left: 7px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }

.sub {
  position: absolute; top: 100%; left: 0; min-width: 262px;
  list-style: none; margin: 0; padding: 8px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: none;
}
.has-sub.open .sub { display: block; }
.sub a { font-weight: 500; font-size: 15px; }

.hd-call {
  display: none; flex-direction: column; line-height: 1.15;
  padding: 8px 16px; border-radius: 8px;
  background: var(--red); color: #fff; text-decoration: none; font-weight: 700;
}
.hd-call:hover { background: var(--red-dark); color: #fff; }
.hd-call-l { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.9; font-weight: 600; }
.hd-call-n { font-size: 17px; }

.burger {
  margin-left: auto; width: 46px; height: 46px; padding: 11px;
  display: flex; flex-direction: column; justify-content: space-between;
  background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }

@media (max-width: 900px) {
  .nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: 10px 20px 18px;
    max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .hd.open .nav { display: block; }
  .nav-l { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-l a, .sub-t { padding: 13px 6px; width: 100%; text-align: left; font-size: 17px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .sub { position: static; display: none; box-shadow: none; border: 0; padding: 0 0 0 14px; min-width: 0; }
  .has-sub.open .sub { display: block; }
}
@media (min-width: 901px) {
  .burger { display: none; }
  .hd-call { display: flex; }
}

/* -------------------------------------------------------------------- hero */

.hero { background: linear-gradient(180deg, var(--mist), var(--paper)); border-bottom: 1px solid var(--line); }
.hero-in { padding-block: clamp(30px, 6vw, 62px); max-width: 860px; }

/* ---------------------------------------------------------------- hero art

   Every page carries one illustration. They are SVG, drawn in build/art.mjs,
   and none of them is a photograph, because a photograph of a technician or a
   finished job would be a claim about this business that we cannot back.

   The text column comes first in the DOM on purpose: on a phone the headline
   and the phone number have to be the first thing on screen, and the picture
   waits below them. */

.hero-has-art .hero-in {
  max-width: var(--wrap);
  display: grid;
  gap: clamp(20px, 4vw, 48px);
  grid-template-columns: 1fr;
  align-items: center;
}
.hero-txt { min-width: 0; }
.hero-art { min-width: 0; }
.art-img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
}

@media (min-width: 860px) {
  .hero-has-art .hero-in { grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); }
  .hero-has-art .hero-sub { margin-bottom: 22px; }
}

/* Under 560px the illustration is scenery, not information: it keeps its place
   in the flow but stops eating a whole screen of a small phone. */
@media (max-width: 559px) {
  .art-img { max-height: 46vh; object-fit: cover; object-position: center 62%; }
}
.kicker {
  font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red-dark); margin: 0 0 10px;
}
.hero-sub { font-size: clamp(17px, 2.1vw, 20px); color: var(--ink-soft); max-width: 62ch; margin-bottom: 24px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

.btn {
  display: inline-block; padding: 13px 22px; border-radius: 8px;
  background: var(--red); color: #fff; font-weight: 700; font-size: 16px;
  text-decoration: none; border: 2px solid var(--red); cursor: pointer;
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); color: #fff; }
.btn-lg { padding: 15px 26px; font-size: 17px; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--mist); color: var(--ink); border-color: var(--ink-soft); }

/* ------------------------------------------------------------- trust strip */

.trust { background: var(--ink); color: #fff; }
.trust-in { display: flex; flex-wrap: wrap; gap: 8px 40px; padding-block: 15px; }
.trust-cell { display: flex; flex-direction: column; line-height: 1.25; }
.trust-cell b { font-size: 17px; }
.trust-cell span { font-size: 13px; opacity: 0.78; }

/* ------------------------------------------------------------------ blocks */

.lede { font-size: clamp(18px, 2.2vw, 20px); color: var(--ink-soft); max-width: 72ch; }
.crumbs { border-bottom: 1px solid var(--line); background: var(--mist); }
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
  margin: 0 auto; padding: 10px 20px; max-width: var(--wrap);
  font-size: 13px; color: var(--ink-soft);
}
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }
.crumbs a { color: var(--ink-soft); }

.grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

.card {
  display: block; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); text-decoration: none; color: var(--ink);
}
.card:hover { border-color: var(--red); box-shadow: var(--shadow); color: var(--ink); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 15px; color: var(--ink-soft); margin-bottom: 12px; }
.card-go { font-size: 14px; font-weight: 700; color: var(--red-dark); }
.card-go::after { content: " \203A"; }
.card-sm { padding: 18px; }
.card-sm h3 { font-size: 17px; }
.card-guide { background: var(--mist); border-color: transparent; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-block; padding: 9px 15px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper);
  font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.chip:hover { border-color: var(--red); background: var(--red-tint); color: var(--red-dark); }

.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 72ch; }
.ticks li { position: relative; padding-left: 32px; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 18px; height: 10px; border-left: 3px solid var(--red); border-bottom: 3px solid var(--red);
  transform: rotate(-45deg);
}

.cta-band { background: var(--red-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); max-width: none; }
.cta-band > * { max-width: var(--wrap); margin-inline: auto; }

.article { max-width: 76ch; }
.article h2 { margin-top: 1.6em; }
.legal h2 { font-size: 22px; }
.legal-date { color: var(--ink-soft); font-size: 14px; }

/* --------------------------------------------------------------------- FAQ */

.faq-l { display: grid; gap: 10px; max-width: 80ch; }
.faq-i { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.faq-i summary {
  padding: 16px 18px; font-weight: 650; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: flex-start;
}
.faq-i summary::-webkit-details-marker { display: none; }
.faq-i summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--red); flex: 0 0 auto; }
.faq-i[open] summary::after { content: "\2013"; }
.faq-a { padding: 0 18px 16px; color: var(--ink-soft); }
.faq-a p { margin: 0; }

/* -------------------------------------------------------------------- form */

.formwrap {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 3vw, 32px); background: var(--mist);
}
.form-sub { color: var(--ink-soft); max-width: 60ch; }
.qform { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.fld { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.fld-wide, .fld-submit, .form-note, .form-fine { grid-column: 1 / -1; margin: 0; }
.fld label { font-size: 14px; font-weight: 650; }
.fld input, .fld select, .fld textarea {
  font: inherit; font-size: 16px; /* 16px stops iOS zooming the page on focus */
  padding: 12px 13px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); width: 100%;
}
.fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--red); }
.fld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-weight: 650; min-height: 1.4em; }
.form-note.ok { color: #1a7f37; }
.form-note.err { color: var(--red-dark); }
.form-fine { font-size: 13px; color: var(--ink-soft); }

.contact-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; }
.big-phone { font-size: clamp(26px, 4vw, 36px); font-weight: 800; margin: 0 0 1em; }
.big-phone a { text-decoration: none; }
.hours { list-style: none; margin: 0; padding: 0; max-width: 380px; }
.hours li { display: flex; justify-content: space-between; gap: 20px; padding: 7px 0; border-bottom: 1px solid var(--line); }

/* ------------------------------------------------------------------ footer */

.ft { background: var(--ink); color: #d9d6d7; margin-top: 40px; }
.ft a { color: #fff; text-decoration: none; }
.ft a:hover { color: #fff; text-decoration: underline; }
.ft-in { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-block: 44px; }
.ft-col h3 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; margin-bottom: 14px; }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.ft-brand img { height: 46px; width: auto; background: #fff; padding: 7px 10px; border-radius: 8px; }
.ft-nap { font-size: 15px; margin-top: 16px; line-height: 1.7; }
.ft-hours ul { margin-top: 10px; font-size: 14px; }
.ft-hours li { display: flex; justify-content: space-between; gap: 14px; }
.ft-legal {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  align-items: center; padding-block: 20px; border-top: 1px solid #3a3536; font-size: 13px;
}
.ft-legal ul { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }
.ft-legal p { margin: 0; }

/* ------------------------------------------------------- sticky action bar */
/* 56px tall, z-index 60, two cells. It ships in the initial HTML so there is
   no layout shift, but starts translated out of view so it is never on screen
   at scroll 0. site.js reveals it only after the hero CTA has scrolled away,
   and hides it again over the footer: one primary ask at a time. */

.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: var(--bar-h);
  display: flex; align-items: stretch;
  background: var(--ink);
  transform: translateY(100%);
  transition: transform 0.22s ease;
  box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.22);
}
.sticky.show { transform: translateY(0); }
.sticky a {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 16px;
  padding-inline: 10px; text-align: center;
}
.sticky-call { background: var(--red); }
.sticky-call:hover { background: var(--red-dark); color: #fff; }
.sticky-quote { flex: 0 0 42%; border-left: 1px solid rgba(255, 255, 255, 0.16); }

/* Padding is added by site.js only while the bar is actually shown, so a page
   that never reveals it does not carry dead space at the bottom. */
body.has-bar { padding-bottom: var(--bar-h); }

@media (min-width: 901px) {
  .sticky { display: none; }
  body.has-bar { padding-bottom: 0; }
}

/* ------------------------------------------------ LeadConnector chat widget */
/* The widget floats bottom-right. Below 901px the sticky action bar owns the
   bottom 56px, so while that bar is up the bubble lands directly on top of the
   primary call CTA.

   KNOWN ISSUE, open as of 2026-09-09: the bubble overlaps the bar's right-hand
   "Get a quote" cell by about 36px while the bar is up. There is deliberately
   no rule here, because four separate approaches were tried against the LIVE
   page and every one was measured and failed. Do not spend the afternoon
   rediscovering them:

   1. Target the ids from this file. The widget lives in a SHADOW ROOT, so
      nothing here can select it. The rule matched the <chat-widget> host
      instead, which is position:static, where `bottom` is inert.
   2. Inject a stylesheet into the shadow root, driven by an inherited custom
      property. The property does cross the boundary (verified), the rule was
      present and parsed, and it still did not apply.
   3. Set the inline style on the shadow elements with !important. The style
      attribute read back as `bottom: 76px !important` and the computed value
      stayed 20px. Note the cascade subtlety if you retry this: for IMPORTANT
      declarations the usual order inverts, so a stylesheet !important beats an
      inline !important.
   4. Neutralise `top` alongside `bottom`, with doubled-id specificity. Also no
      effect. A control probe in the same injected rule (outline: red) never
      applied either, which is the real tell: our rules are not winning in that
      shadow root at all, whatever the selector.

   The vendor's own theming API (the --chat-widget-* custom properties on
   :host) covers colour, size and font, and exposes NO offset or position
   variable. So the supported fix is in the LeadConnector widget settings, not
   here.

   Mitigation available entirely on our side if it needs fixing before then:
   give .sticky a right padding of about 78px below 901px so both CTAs stay
   fully visible and the bubble sits over empty bar. That is a visible design
   change, so it was left for the operator to call. */

/* --------------------------------------------------------------------- NAP

   The address block. It appears in the footer of every page, on the contact
   page, and on the North Las Vegas location page. It is deliberately plain and
   selectable: people copy an address out of a page, and a styled <address> that
   fights the clipboard is a small daily cruelty. */

.nap { font-style: normal; line-height: 1.7; }
.ft-nap + .nap { font-size: 15px; margin-top: -8px; color: var(--ink-soft); }

.nap-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); padding: 22px; max-width: 46ch;
}
.nap-h { font-size: 18px; margin-bottom: 10px; }
.nap-card .nap { font-size: 17px; }
.nap-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 14px; font-size: 15px; font-weight: 600; }
.nap-note { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

.loc-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.loc-copy { max-width: 62ch; }

/* Sub-area list on the location page. A definition-style list reads faster than
   prose for "do you cover my neighborhood", which is the question it answers. */
.subareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 78ch; }
.subareas li { padding-left: 16px; border-left: 3px solid var(--line); line-height: 1.65; }
.subareas li strong { display: block; color: var(--ink); }

@media print {
  .hd, .sticky, .ft, .formwrap, .skip { display: none !important; }
  body { padding-bottom: 0; }
}

/* Legal pages get one small brand illustration, not a hero: the content is the
   point and a big picture above a privacy policy is noise. */
.legal-art { max-width: 300px; margin-block: 22px; }

/* Flagship bullet lists: a bold lead, then the detail. Used on the North Las
   Vegas location page, where the same shape carries the service catalogue, the
   symptom guide and the what-to-have-ready list. */
.leadlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 80ch; }
.leadlist li { padding-left: 18px; border-left: 3px solid var(--line); line-height: 1.6; }
.leadlist li strong { color: var(--ink); }