/* Key Pro Locksmith - site.css
 * World: the van's key programmer. Graphite instrument body, brushed-aluminum reading panels,
 * a backlit blue LCD, logo red for the one action, the logo's slanted red|blue livery as the spine.
 * Motion: 140-220ms, cubic-bezier(0.16, 1, 0.3, 1), transform and opacity, 0.98 press.
 */

:root {
  --c-body: 16 20 26;        /* #10141A graphite instrument body */
  --c-body-2: 25 30 38;      /* #191E26 raised panel */
  --c-edge: 46 54 66;        /* #2E3642 seams on graphite */
  --c-alu: 233 236 240;      /* #E9ECF0 brushed aluminum */
  --c-alu-2: 220 225 231;    /* #DCE1E7 darker aluminum */
  --c-ink: 16 20 26;
  --c-ink-dim: 66 75 88;     /* #424B58 */
  --c-ink-mute: 98 108 122;  /* #626C7A */
  --c-rule: 190 197 207;     /* #BEC5CF */
  --c-on-dark: 234 238 243;
  --c-on-dark-dim: 163 173 187; /* #A3ADBB */
  --c-red: 173 40 43;        /* #AD282B logo red */
  --c-red-lit: 232 84 80;    /* #E85450 red on graphite */
  --c-blue: 23 73 124;       /* #17497C logo blue */
  --c-led: 76 214 128;       /* #4CD680 test passed: the only use of green */
  --c-lcd: 127 190 240;      /* #7FBEF0 backlit LCD blue for ticks and route stops */
  --c-alert: 173 40 43;
  --lcd-bg: #0B2340;
  --lcd-ink: #CFE8FF;
  --lcd-dim: #7FA6CC;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 180ms;
  --t-press: 140ms;
  color-scheme: light;
}

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
::selection { background: rgb(var(--c-red)); color: #fff; }
:focus-visible { outline: 2px solid rgb(var(--c-red-lit)); outline-offset: 3px; border-radius: 2px; }
.bg-alu :focus-visible, .bg-alu-2 :focus-visible, .panel-alu :focus-visible { outline-color: rgb(var(--c-blue)); }
.tnum { font-variant-numeric: tabular-nums; }
.icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
html { scrollbar-color: rgb(var(--c-edge)) rgb(var(--c-body)); }

/* Aluminum reading panels */
.bg-alu, .bg-alu-2, .panel-alu {
  background-color: rgb(var(--c-alu));
}
.bg-alu-2 { background-color: rgb(var(--c-alu-2)); }
.hero-dark, .rail, .site-footer, .site-header { background-color: rgb(var(--c-body)); color: rgb(var(--c-on-dark)); }

/* ---------- Livery: the logo's slanted red and blue panels ---------- */
.livery { display: flex; gap: 6px; height: 8px; overflow: hidden; background: rgb(var(--c-body)); padding: 0 0 0 0; }
.livery span { display: block; transform: skewX(-24deg); }
.livery-red { flex: 5 1 0; background: rgb(var(--c-red)); margin-left: -12px; }
.livery-blue { flex: 1 1 0; background: rgb(var(--c-blue)); margin-right: -12px; }
.livery-lg { height: 14px; gap: 9px; }

/* ---------- Buttons ---------- */
.btn { transition: transform var(--t-press) var(--ease); -webkit-tap-highlight-color: transparent; user-select: none; }
.btn:active { transform: scale(0.98); }
.btn-call { background: rgb(var(--c-red)); color: #fff; border-radius: 6px; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 6px 14px -8px rgb(0 0 0 / 0.6); }
.btn-line { border: 1.5px solid rgb(var(--c-ink)); color: rgb(var(--c-ink)); border-radius: 6px; }
.btn-line-dark { border-color: rgb(var(--c-edge)); color: rgb(var(--c-on-dark)); background: rgb(var(--c-body-2)); }
.btn-submit { background: rgb(var(--c-ink)); color: #fff; border-radius: 6px; }
.btn-submit[aria-busy="true"] { opacity: 0.7; cursor: progress; }
.arrow { transition: transform var(--t) var(--ease); }
.btn-menu { border: 1px solid rgb(var(--c-edge)); border-radius: 6px; background: rgb(var(--c-body-2)); }
.btn-menu .toggle-close, .btn-menu[aria-expanded="true"] .toggle-open { display: none; }
.btn-menu[aria-expanded="true"] .toggle-close { display: inline-block; }

/* ---------- Header / nav ---------- */

.nav-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: rgb(var(--c-red-lit)); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.mnav { opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden; transition: opacity 140ms var(--ease), transform 140ms var(--ease), visibility 0s linear 140ms; }
.mnav[data-open="true"] { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s; }

/* ---------- Hero ground: graphite with a faint panel seam grid ---------- */
.hero-dark { position: relative; }
.hero-dark > * { position: relative; }

/* ---------- The programmer ---------- */
.programmer {
  background: linear-gradient(180deg, #232A35 0%, #1A2029 100%);
  border: 1px solid #333C4A; border-radius: 22px; padding: 16px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), 0 12px 16px -10px rgb(0 0 0 / 0.75);
}
@media (min-width: 640px) { .programmer { padding: 20px; border-radius: 26px; } }
.programmer-compact { border-radius: 18px; padding: 12px; }
.lcd {
  background: var(--lcd-bg); color: var(--lcd-ink); border-radius: 10px; padding: 18px 18px 16px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.6), inset 0 2px 14px rgb(0 0 0 / 0.55), 0 0 0 4px #121820;
  font-family: Oxanium, sans-serif;
}
@media (min-width: 640px) { .lcd { padding: 22px 24px 20px; } }
.lcd-title { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12.5px; font-weight: 600; padding-bottom: 12px; border-bottom: 1px solid rgb(127 166 204 / 0.25); margin-bottom: 6px; }
.lcd-dim { color: var(--lcd-dim); }
.stations { display: flex; flex-direction: column; }
.station { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-areas: "led name state" ". detail detail"; column-gap: 12px; row-gap: 1px; padding: 11px 0; border-bottom: 1px solid rgb(127 166 204 / 0.12); }
.station:last-child { border-bottom: 0; }
.station .led { grid-area: led; align-self: center; }
.st-name { grid-area: name; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 26px; line-height: 1.05; }
@media (min-width: 640px) { .st-name { font-size: 30px; } }
.st-detail { grid-area: detail; font-size: 14px; color: var(--lcd-dim); font-family: "Public Sans", sans-serif; }
.st-state { grid-area: state; align-self: center; font-weight: 700; font-size: 14px; letter-spacing: 0.12em; }
.st-ok { color: rgb(var(--c-led)); }
.meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding-top: 12px; }
.lcd-ready { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(127 166 204 / 0.25); text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; font-weight: 700; }
.lcd-ready a { color: #fff; font-size: 18px; letter-spacing: 0.06em; text-decoration: underline; text-decoration-color: rgb(var(--c-red-lit)); text-underline-offset: 5px; }
.meter span { height: 6px; border-radius: 1px; background: rgb(var(--c-led)); transform-origin: left; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }

/* LEDs */
.led { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #2A3A4E; box-shadow: inset 0 1px 1px rgb(0 0 0 / 0.5); flex-shrink: 0; transition: opacity var(--t) var(--ease); }
.led-on, .station.is-done .led { background: rgb(var(--c-led)); box-shadow: 0 0 0 2px rgb(76 214 128 / 0.18), 0 0 10px rgb(76 214 128 / 0.55); }


  background: linear-gradient(180deg, #2C3441 0%, #232A35 100%); border: 1px solid #3A4453;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 3px 0 #11161D; }

/* County route and contact readouts */
.route { display: grid; grid-template-columns: 1fr; }
@media (min-width: 480px) { .route { grid-template-columns: 1fr 1fr; column-gap: 20px; } }
.route li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgb(127 166 204 / 0.12); }
.route .led { background: rgb(var(--c-lcd)); box-shadow: none; }
.route .st-name { grid-area: auto; font-size: 17px; letter-spacing: 0.02em; }
.contact-lcd .c-row { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid rgb(127 166 204 / 0.14); }
.contact-lcd dt { text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; font-weight: 600; color: var(--lcd-dim); }
.contact-lcd dd { font-family: "Public Sans", sans-serif; font-size: 16.5px; color: var(--lcd-ink); }

/* ---------- Credentials rail ---------- */
.rail { border-bottom: 1px solid rgb(var(--c-edge)); }

/* ---------- Drawers: the van's steel cabinet ---------- */
.drawer {
  background: linear-gradient(180deg, #F4F6F8 0%, #E2E6EB 100%); border: 1px solid #BCC4CE; border-radius: 6px; min-height: 196px;
  box-shadow: inset 0 1px 0 #fff, 0 3px 6px -3px rgb(16 20 26 / 0.35);
}
.drawer-lead { min-height: 250px; }
.drawer:active { transform: scale(0.98); }
.plate { background: #fff; border: 1px solid #C6CDD6; border-radius: 4px; box-shadow: 0 1px 2px rgb(16 20 26 / 0.12); }
.drawer-icon { border-radius: 4px; background: rgb(var(--c-body)); color: #fff; }
/* Full-width pull handle: a recessed slot with a bar in it */
.drawer-handle { display: block; height: 16px; margin-top: 22px; border-radius: 8px; background: #CDD3DB; box-shadow: inset 0 2px 3px rgb(16 20 26 / 0.3), 0 1px 0 #fff; position: relative; }
.drawer-handle::after { content: ""; position: absolute; left: 6%; right: 6%; top: 4px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #F2F4F7, #9EA8B5); box-shadow: 0 1px 2px rgb(16 20 26 / 0.35); }
.drawer-lead .drawer-handle { height: 18px; }
.drawer-go { border-radius: 50%; color: rgb(var(--c-ink)); border: 1.5px solid #B4BCC7; }

/* ---------- Spec sheet (equipment) ---------- */
.spec { border-top: 2px solid rgb(var(--c-red-lit)); }
.spec-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid rgb(var(--c-edge)); }
.spec dt { font-family: Oxanium, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; font-weight: 600; color: rgb(var(--c-on-dark-dim)); padding-top: 2px; }
.spec dd { font-size: 17px; color: rgb(var(--c-on-dark)); font-weight: 600; }

/* ---------- Stations sequence ---------- */
.seq-num { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid rgb(var(--c-red-lit)); color: rgb(var(--c-red-lit)); }
.seq-line { flex: 1; height: 1.5px; background: rgb(var(--c-edge)); }
.seq:not(.seq-dark) .seq-line { background: rgb(var(--c-rule)); }
.seq:not(.seq-dark) .seq-num { border-color: rgb(var(--c-red)); color: rgb(var(--c-red)); }

/* ---------- Review tickets ---------- */
.ticket { background: #FBFBFC; border: 1px solid #CDD3DB; border-radius: 4px; box-shadow: 0 3px 6px -3px rgb(16 20 26 / 0.3); position: relative; }
.ticket::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; border-radius: 4px 4px 0 0; background: linear-gradient(90deg, rgb(var(--c-red)) 0 83%, #FBFBFC 83% 84%, rgb(var(--c-blue)) 84%); }
.ticket-foot { border-top: 1px dashed #BEC5CF; }
.rating { background: #FBFBFC; border: 1px solid #C3CAD3; border-radius: 8px; }

/* ---------- What's included ---------- */
.job-icon { border-radius: 6px; background: rgb(var(--c-body)); color: #fff; }

/* ---------- Coverage ---------- */
.county { background: #F4F6F8; border: 1px solid #C6CDD6; border-radius: 6px; }
.coverage .is-current { border-color: rgb(var(--c-red)); box-shadow: inset 0 0 0 1px rgb(var(--c-red)); }
.coverage .county-link[aria-current="page"] { color: rgb(var(--c-red)); }

/* ---------- Home hero: the van, outside and in ---------- */
/* Headline: each line rises out of its own mask, 60ms apart. */
.hl { display: block; overflow: hidden; white-space: nowrap; padding-block: 0.03em; margin-block: -0.03em; }
.hl-in { display: inline-block; animation: hl-up 220ms var(--ease) var(--d, 0ms) both; }
@keyframes hl-up { from { opacity: 0; transform: translateY(105%); } }

/* The livery band under the hero draws in from the left once. */
.livery-draw .livery-red, .livery-draw .livery-blue { transform-origin: left center; animation: livery-in 220ms var(--ease) both; }
.livery-draw .livery-blue { animation-delay: 60ms; }
@keyframes livery-in { from { transform: skewX(-24deg) scaleX(0); } to { transform: skewX(-24deg) scaleX(1); } }

/* Photo pair: the big frame and the inset card each hold both photos and crossfade on swap. */
.hero-media { position: relative; }
.hm-frame { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid #333C4A; background: rgb(var(--c-body-2));
  box-shadow: 0 0 0 7px #1A2029, 0 0 0 8px #333C4A, 0 10px 14px -8px rgb(0 0 0 / 0.7); animation: media-in 220ms var(--ease) both; }
.hm-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 220ms var(--ease), transform 220ms var(--ease); }
.hm-in { opacity: 0; transform: scale(1.04); }
[data-view="in"] .hm-out { opacity: 0; transform: scale(1.04); }
[data-view="in"] .hm-in { opacity: 1; transform: none; }
.hm-caption { padding-right: 40%; }
.hm-cap-in, .hm-tag-in { display: none; }
[data-view="in"] .hm-cap-out, [data-view="in"] .hm-tag-out { display: none; }
[data-view="in"] .hm-cap-in, [data-view="in"] .hm-tag-in { display: inline; }

.hm-inset { position: absolute; right: -26px; bottom: 6px; width: 34%; animation: inset-in 220ms var(--ease) 120ms both; }
.hm-inset-frame { display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; border: 1px solid #3A4453; background: rgb(var(--c-body-2));
  box-shadow: 0 0 0 5px #1A2029, 0 0 0 6px #3A4453, 0 12px 16px -10px rgb(0 0 0 / 0.8); transition: transform var(--t) var(--ease); }
.hm-tag { position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  white-space: nowrap; color: #fff; background: rgb(var(--c-red)); border-radius: 999px; box-shadow: 0 4px 8px -4px rgb(0 0 0 / 0.6); }
@keyframes media-in { from { opacity: 0; transform: scale(0.985); } }
@keyframes inset-in { from { opacity: 0; transform: translateY(16px); } }
@media (max-width: 1023px) {
  .hm-inset { right: 10px; bottom: 30px; width: 36%; max-width: 200px; }
  .hm-caption { padding-right: calc(min(36%, 200px) + 28px); }
}
@media (max-width: 639px) {
  .hm-frame { box-shadow: 0 0 0 4px #1A2029, 0 0 0 5px #333C4A, 0 10px 14px -8px rgb(0 0 0 / 0.7); }
  .hm-inset-frame { box-shadow: 0 0 0 3px #1A2029, 0 0 0 4px #3A4453, 0 10px 14px -8px rgb(0 0 0 / 0.8); }
  .hero-media { padding: 0 5px; }
}

/* ---------- Scroll reveals (only when site.js opts in; content is visible without JS) ---------- */
.reveal-on [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 220ms var(--ease) var(--d, 0ms), transform 220ms var(--ease) var(--d, 0ms); }
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Photos ---------- */
.photo-frame > div { border-radius: 14px; border: 1px solid #333C4A; box-shadow: 0 0 0 6px #1A2029, 0 0 0 7px #333C4A; }
.bg-alu .photo-frame figcaption { color: rgb(var(--c-ink-dim)); padding-top: 18px; }

/* ---------- FAQ accordion ---------- */
.acc summary { list-style: none; cursor: pointer; }
.acc summary::-webkit-details-marker { display: none; }
.acc-plus { border: 1.5px solid rgb(var(--c-rule)); border-radius: 50%; color: rgb(var(--c-ink)); }
.acc-icon { transition: transform var(--t) var(--ease); }
.acc[open] .acc-icon { transform: rotate(45deg); }
.acc summary:active .acc-plus { transform: scale(0.98); }
.acc[open] .acc-body { animation: acc-in 200ms var(--ease); }
@keyframes acc-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Form ---------- */
.panel-alu { border-radius: 16px; border: 1px solid #C3CAD3; box-shadow: inset 0 1px 0 #fff, 0 6px 12px -6px rgb(0 0 0 / 0.6); }
.field { background: #fff; border: 1.5px solid #B4BCC7; border-radius: 6px; caret-color: rgb(var(--c-red)); }
.field:focus { outline: none; border-color: rgb(var(--c-blue)); box-shadow: 0 0 0 3px rgb(23 73 124 / 0.2); }
.field[aria-invalid="true"] { border-color: rgb(var(--c-red)); }

/* ---------- Legal prose ---------- */
.prose-kp a { color: rgb(var(--c-ink)); text-decoration: underline; text-decoration-color: rgb(var(--c-red)); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.acc[open] .acc-plus { background: rgb(var(--c-red)); border-color: rgb(var(--c-red)); color: #fff; }

/* ---------- Hover: only on devices with a real pointer, so a tap never leaves a stuck state ---------- */
@media (hover: hover) and (pointer: fine) {
  .hm-inset:hover .hm-inset-frame { transform: translateY(-4px) rotate(1.5deg); }
  .btn-call:hover { background: #BF2F31; }
  .btn-line:hover { background: rgb(var(--c-ink)); color: rgb(var(--c-alu)); }
  .btn-line-dark:hover { border-color: rgb(var(--c-on-dark-dim)); background: rgb(var(--c-edge)); color: #fff; }
  .btn-submit:hover { background: rgb(var(--c-red)); }
  .btn:hover .arrow, .link-arrow:hover .arrow, .drawer:hover .arrow, .county-link:hover .arrow { transform: translateX(3px); }
  .nav-link:hover::after { transform: scaleX(1); }
  .drawer:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 #fff, 0 8px 12px -6px rgb(16 20 26 / 0.35); }
  .drawer:hover .drawer-go { background: rgb(var(--c-red)); border-color: rgb(var(--c-red)); color: #fff; }
  .rating:hover { border-color: rgb(var(--c-ink)); }
  .acc summary:hover .acc-plus { background: rgb(var(--c-red)); border-color: rgb(var(--c-red)); color: #fff; }
  .field:hover { border-color: #8E98A6; }
}

/* ---------- Mobile call bar ---------- */
.call-bar { background: rgb(var(--c-body) / 0.96); border-top: 1px solid rgb(var(--c-edge)); transition: transform 220ms var(--ease), opacity 220ms var(--ease); }
.call-bar.is-tucked { transform: translateY(110%); opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* Fewer, gentler: fades stay, anything that moves or scales does not. */
  *, *::before, *::after { transition-property: opacity !important; animation-iteration-count: 1 !important; }
  .hl-in, .hm-frame, .hm-inset, .acc[open] .acc-body { animation: fade-in 180ms ease both; }
  .livery-draw .livery-red, .livery-draw .livery-blue { animation: none; }
}
@keyframes fade-in { from { opacity: 0; } }