/* MD Local Locksmith - site.css
   World: a rooftop sign over Baltimore's harbor skyline. Harbor-dusk slate and marble-step gray
   fields, crimson sign faces, Maryland gold for rivets and the frame line, black steel lattice.
   Square corners throughout. Color tokens feed tailwind.config.cjs (rgb(var(--c-x) / <alpha-value>)).
   Loaded after tailwind.css. */

:root {
  --c-slate: 27 34 51;          /* harbor dusk #1B2233: hero and dark bands */
  --c-slate-deep: 14 17 25;     /* ground and footer #0E1119 */
  --c-steel: 58 66 84;          /* lattice, hairlines on slate #3A4254 */
  --c-stone: 225 226 223;       /* marble-step gray #E1E2DF: page ground */
  --c-paper: 243 244 241;       /* alternate light band #F3F4F1 */
  --c-ink: 21 24 33;            /* text on light #151821, 14:1 on stone */
  --c-ink-dim: 71 75 82;        /* secondary text #474B52, 7.5:1 on stone */
  --c-ink-mute: 90 95 104;      /* tertiary text #5A5F68, 5:1 on stone */
  --c-rule: 198 201 196;        /* hairlines on stone #C6C9C4 */
  --c-on-slate-dim: 183 189 203;/* secondary text on slate #B7BDCB, 8:1 */
  --c-crimson: 179 32 42;       /* sign face #B3202A, white text 6.6:1 */
  --c-crimson-deep: 138 22 31;  /* pressed / returns #8A161F */
  --c-gold: 242 181 25;         /* Maryland gold #F2B519: rivets, rules, frame line */
  --c-alert: 166 58 0;          /* form errors #A63A00 */
  --lit: 229 62 70;             /* channel-letter face, lit #E53E46 */
  --iron: 11 13 19;             /* sign frames and brackets #0B0D13 */

  /* Motion: one curve, two durations. Only transform and opacity animate. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-press: 140ms;
  --dur-ui: 200ms;

  color-scheme: light;
  scrollbar-color: rgb(var(--c-steel)) rgb(var(--c-stone));
}

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
  background-color: rgb(var(--c-stone));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.font-label { font-stretch: 85%; }
.font-display { font-weight: 400; letter-spacing: 0.01em; }
::selection { background: rgb(var(--c-gold) / 0.55); color: rgb(var(--c-ink)); }
input, textarea, select { caret-color: rgb(var(--c-crimson)); }
.icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }
[id] { scroll-margin-top: 104px; }
.tnum { font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } }

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid rgb(var(--c-gold));
  outline-offset: 3px;
}
.bg-stone a:focus-visible, .bg-paper a:focus-visible, .band-crimson a:focus-visible, .bg-stone summary:focus-visible, .sign-plate :focus-visible { outline-color: rgb(var(--c-ink)); }

/* ---------- Tactile press on everything tappable ---------- */
a, summary, button { transition: transform var(--dur-press) var(--ease); touch-action: manipulation; }
a:active, summary:active, button:active { transform: scale(0.98); }

/* ---------- Rivets: four gold rivet heads in the corners of a framed plate ---------- */
.rivets { position: relative; }
.rivets::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 2;
  --r: radial-gradient(circle at 50% 50%, rgb(255 228 150) 0 0.9px, rgb(var(--c-gold)) 1.4px 2.4px, rgb(0 0 0 / 0.35) 2.9px, transparent 3.4px);
  background: var(--r) top left / 8px 8px no-repeat, var(--r) top right / 8px 8px no-repeat,
              var(--r) bottom left / 8px 8px no-repeat, var(--r) bottom right / 8px 8px no-repeat;
}
.rivet {
  flex-shrink: 0; width: 9px; height: 9px; border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgb(255 228 150), rgb(var(--c-gold)) 45%, rgb(150 104 0));
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.45);
}

/* ---------- Buttons ---------- */
.btn { position: relative; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity var(--dur-press) var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn-call {
  background: rgb(var(--c-crimson)); color: #fff;
  border: 3px solid rgb(var(--iron));
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.18), 0 10px 22px -12px rgb(0 0 0 / 0.55);
}
.btn-call::after { background: rgb(var(--c-crimson-deep)); }
.btn-call.btn-call-on-crimson { background: rgb(var(--iron)); border-color: rgb(var(--c-gold)); }
.btn-call.btn-call-on-crimson::after { background: rgb(var(--c-slate)); }
.btn-line { border: 3px solid rgb(var(--iron)); color: rgb(var(--c-ink)); background: rgb(var(--c-paper)); padding-inline: 1.75rem; }
.btn-line::after { background: rgb(var(--c-ink)); }
.btn-line-dark { border-color: rgb(84 94 118); color: rgb(var(--c-stone)); background: rgb(var(--iron)); }
.btn-line-dark::after { background: rgb(var(--c-slate)); }
.btn-menu { border: 2px solid rgb(var(--c-ink)); }
.btn-menu::after { background: rgb(var(--c-ink) / 0.08); }
.btn-submit { background: rgb(var(--c-crimson)); color: #fff; border: 3px solid rgb(var(--iron)); }
.btn-submit::after { background: rgb(var(--c-crimson-deep)); }

.arrow { transition: transform var(--dur-ui) var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { opacity: 1; transition-duration: var(--dur-ui); }
  .btn-line:hover { color: rgb(var(--c-stone)); }
  .btn-line-dark:hover { color: rgb(var(--c-stone)); }
  .link-arrow:hover .arrow, .btn:hover .arrow, .row-link:hover .arrow { transform: translateX(3px); }
  .link-arrow:hover { text-decoration-color: rgb(var(--c-crimson)); }
}

/* ---------- Header nav: crimson underline scales in ---------- */
.site-header { box-shadow: 0 1px 0 rgb(var(--c-rule)), 0 10px 24px -20px rgb(0 0 0 / 0.5); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 3px;
  background: rgb(var(--c-crimson));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-press) var(--ease);
}
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav-link:hover::after { transform: scaleX(1); transition-duration: var(--dur-ui); } }

/* ---------- Slate fields and the skyline ---------- */
.hero-slate {
  background-color: rgb(var(--c-slate));
  background-image: linear-gradient(180deg, rgb(20 26 40) 0%, rgb(var(--c-slate)) 55%, rgb(40 44 58) 100%);
  color: rgb(var(--c-stone));
}
.hero-slate a:not(.btn):not(.stop-link):not(.sign-panel) { color: inherit; }
.skyline { display: block; width: 100%; height: clamp(120px, 15vw, 230px); position: relative; z-index: 2; }
.sky-far { fill: rgb(43 52 72); }
.sky-near, .sky-ground { fill: rgb(var(--c-slate-deep)); }
.footer-skyline { background: rgb(var(--c-crimson)); height: clamp(80px, 9vw, 130px); }
.footer-skyline .sky-far { fill: rgb(var(--c-crimson-deep)); }

/* ---------- The rooftop sign ---------- */
.sign { position: relative; display: flex; flex-direction: column; max-width: 640px; margin-left: auto; }
.sign-letters {
  color: rgb(var(--lit));
  text-shadow:
    0 1px 0 rgb(126 20 28), 0 2px 0 rgb(126 20 28), 0 3px 0 rgb(106 16 23), 0 4px 0 rgb(106 16 23),
    0 16px 24px rgb(0 0 0 / 0.5);
  padding: 0 4px 2px;
  overflow-wrap: anywhere;
}
.sign-word { display: inline-block; }
.raceway {
  height: 12px; margin-top: 4px;
  background-color: rgb(var(--iron));
  background-image: radial-gradient(circle, rgb(var(--c-gold)) 0 1.6px, transparent 2.2px);
  background-size: 40px 12px; background-position: 14px 0;
}
.sign-panel {
  margin-top: 12px; color: #fff; background: rgb(var(--c-crimson));
  border: 5px solid rgb(var(--iron));
  box-shadow: 0 18px 36px -18px rgb(0 0 0 / 0.7);
}
.sign-panel::after { background: rgb(var(--c-crimson-deep)); }
.sign-phone { background: rgb(var(--iron)); color: rgb(var(--c-gold)); }
.sign-legs { height: 150px; margin: 0 6%; background: radial-gradient(55% 85% at 50% 0%, rgb(var(--c-crimson) / 0.2), rgb(var(--c-crimson) / 0) 100%); }
.sign-legs .lattice { display: block; width: 100%; height: 100%; }
.lat-steel { stroke: rgb(64 72 92); }
.lat-brace { stroke: rgb(50 57 75); }
.sign-home .sign-legs { height: 170px; }
@media (max-width: 767px) { .sign-legs, .sign-home .sign-legs { height: 84px; } .sign { margin-left: 0; } }

/* Signature: the letters strike on, word by word, in quick opacity steps. Visible by default. */
@keyframes strike { 0% { opacity: 0.18; } 30% { opacity: 1; } 46% { opacity: 0.4; } 100% { opacity: 1; } }
.sign-word { animation: strike 220ms steps(4, end) both; animation-delay: 120ms; }
.sign-word + .sign-word { animation-delay: 260ms; }

/* ---------- Credentials: facts riveted along a steel band ---------- */
.steel-band { background: rgb(var(--c-slate-deep)); color: rgb(var(--c-stone)); border-bottom: 2px solid rgb(var(--c-gold) / 0.7); }

/* ---------- The frame line: one gold line from the sign down through every section ---------- */
@media (min-width: 1024px) {
  .frame-line { position: relative; }
  .frame-line::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: max(12px, calc(50% - 608px)); width: 2px;
    background: rgb(var(--c-gold) / 0.55); z-index: 3; pointer-events: none;
  }
  .site-header > header { position: relative; }
  .site-header > header::before {
    content: ""; position: absolute; left: max(12px, calc(50% - 608px)); top: 50%; bottom: 0; width: 2px;
    background: rgb(var(--c-gold) / 0.55);
  }
  .site-header > header::after {
    content: ""; position: absolute; left: calc(max(12px, calc(50% - 608px)) - 6px); top: calc(50% - 7px); width: 14px; height: 14px; border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgb(255 228 150), rgb(var(--c-gold)) 45%, rgb(150 104 0)); box-shadow: 0 0 0 3px rgb(var(--iron));
  }
  .riveted { position: relative; }
  .riveted::before {
    content: ""; position: absolute; left: -26px; top: 0.3em; width: 14px; height: 14px; border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, rgb(255 228 150), rgb(var(--c-gold)) 45%, rgb(150 104 0));
    box-shadow: 0 0 0 3px rgb(var(--iron)), 0 2px 3px rgb(0 0 0 / 0.4);
  }
}

/* ---------- Sign row: plaques hung from one riveted steel beam ---------- */
.plaque-slot { position: relative; padding: 30px 14px 0 0; flex-basis: auto; }
.plaque-slot::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 10px;
  background-color: rgb(var(--iron));
  background-image: radial-gradient(circle, rgb(var(--c-gold)) 0 1.5px, transparent 2.1px);
  background-size: 34px 10px; background-position: 10px 0;
  border-top: 2px solid rgb(var(--c-gold));
}
.plaque-slot::after {
  content: ""; position: absolute; top: 10px; left: 22px; right: 36px; height: 20px;
  border-left: 2px solid rgb(var(--iron)); border-right: 2px solid rgb(var(--iron));
}
.on-slate .plaque-slot::after { border-color: rgb(84 94 118); }
.plaque {
  color: #fff; background: rgb(var(--c-crimson));
  border: 4px solid rgb(var(--iron));
  outline: 2px solid rgb(var(--c-gold) / 0.9); outline-offset: -9px;
  box-shadow: 0 16px 30px -18px rgb(0 0 0 / 0.65);
  transform-origin: 40% -30px;
  transition: transform var(--dur-ui) var(--ease);
}
.plaque::after { background: rgb(var(--c-crimson-deep)); }
.plaque > * { padding-inline: 4px; }
@media (hover: hover) and (pointer: fine) { .plaque:hover { transform: rotate(-1.2deg); } }
.plaque:active { transform: rotate(-1.2deg) scale(0.98); transition-duration: var(--dur-press); }
@media (max-width: 639px) { .plaque-slot { padding-right: 10px; } }
@media (min-width: 1280px) { .plaque-slot:last-child { padding-right: 0; } .plaque-slot:last-child::after { right: 22px; } }
.county-plate { background: rgb(var(--c-crimson)); border: 3px solid rgb(var(--iron)); color: #fff; }
.sign-plate.plate-crimson { background: rgb(var(--c-crimson)); color: #fff; }

/* ---------- Title plates: section titles lettered on a crimson sign plate ---------- */
.title-plate { background: rgb(var(--c-crimson)); border: 4px solid rgb(var(--iron)); box-shadow: 0 16px 30px -20px rgb(0 0 0 / 0.6); }
@media (min-width: 1024px) { .title-plate.riveted::before { left: -30px; top: 1.1em; } }

/* ---------- Coverage: gold lines with town stops ---------- */
.line-stops { row-gap: 6px; }
.stop { position: relative; border-top: 3px solid rgb(var(--c-gold)); }
.stop::before {
  content: ""; position: absolute; top: -8.5px; left: 0; width: 14px; height: 14px; border-radius: 999px;
  background: rgb(var(--c-slate)); box-shadow: inset 0 0 0 3px rgb(var(--c-gold));
}
.stop.is-current::before { background: rgb(var(--lit)); }
.stop-link { color: rgb(var(--c-stone)); }
.stop.is-current .stop-link { color: rgb(var(--c-gold)); }
@media (hover: hover) and (pointer: fine) { .stop-link:hover { color: rgb(var(--c-gold)); } }

/* ---------- Steps ---------- */
.step-num { color: rgb(var(--c-crimson)); }
.hero-slate .step-num { color: rgb(var(--c-gold)); }

/* ---------- Photos in steel frames ---------- */
.photo-frame { border: 6px solid rgb(var(--iron)); background: rgb(var(--iron)); box-shadow: 0 24px 44px -24px rgb(0 0 0 / 0.75); }

/* ---------- Plates: form and sidebar ---------- */
.sign-plate { background: rgb(var(--c-paper)); border: 5px solid rgb(var(--iron)); box-shadow: 0 24px 44px -26px rgb(0 0 0 / 0.55); color: rgb(var(--c-ink)); }
.band-crimson { background: rgb(var(--c-crimson)); border-top: 3px solid rgb(var(--c-gold)); }

/* ---------- Form fields ---------- */
.field { background: #fff; border: 1.5px solid rgb(168 172 170); border-radius: 0; }
@media (hover: hover) and (pointer: fine) { .field:hover { border-color: rgb(var(--c-ink-dim)); } }
.field:focus { outline: none; border-color: rgb(var(--c-ink)); box-shadow: 0 0 0 3px rgb(var(--c-gold) / 0.6); }
.field[aria-invalid="true"] { border-color: rgb(var(--c-alert)); box-shadow: 0 0 0 3px rgb(var(--c-alert) / 0.2); }
.field::placeholder { color: rgb(var(--c-ink-mute)); }
select.field { background-color: #fff; }
button[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"] [data-btn-label] { animation: pulse 900ms var(--ease) infinite alternate; }
@keyframes pulse { to { opacity: 0.5; } }
[data-form-status] { transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease); }
[data-form-status]:empty { opacity: 0; transform: translateY(4px); }

/* ---------- Accordion (native <details>) ---------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
.acc-plus { border: 2px solid rgb(var(--c-ink)); }
@media (hover: hover) and (pointer: fine) { .acc summary:hover .acc-q { color: rgb(var(--c-crimson)); } }
.acc-icon { transition: transform var(--dur-ui) var(--ease); }
details[open] > summary .acc-icon { transform: rotate(45deg); }
.acc[open] .acc-body { animation: fade-up var(--dur-ui) var(--ease); }
@keyframes fade-up { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Row links ---------- */
@media (hover: hover) and (pointer: fine) { .row-link:hover .font-label { color: rgb(var(--c-crimson)); } }

/* ---------- Mobile menu ---------- */
.mnav {
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity var(--dur-press) var(--ease), transform var(--dur-press) var(--ease), visibility 0s linear var(--dur-press);
}
.mnav[data-open="true"] {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease), visibility 0s;
}
#mobile-toggle .icon { position: absolute; transition: opacity var(--dur-press) var(--ease), transform var(--dur-ui) var(--ease); }
#mobile-toggle .toggle-close { opacity: 0; transform: scale(0.7) rotate(-45deg); }
#mobile-toggle[aria-expanded="true"] .toggle-open { opacity: 0; transform: scale(0.7) rotate(45deg); }
#mobile-toggle[aria-expanded="true"] .toggle-close { opacity: 1; transform: none; }

/* ---------- Footer and mobile call bar ---------- */
.footer-slate { background: rgb(var(--c-slate-deep)); }
.call-bar { background: rgb(var(--c-slate-deep) / 0.96); border-top: 2px solid rgb(var(--c-gold)); transition: transform var(--dur-ui) var(--ease), opacity var(--dur-ui) var(--ease); }
.call-bar.is-tucked { transform: translateY(110%); opacity: 0; pointer-events: none; }

/* ---------- Legal prose ---------- */
.prose-legal h2 { font-family: Anton, sans-serif; text-transform: uppercase; font-size: 28px; color: rgb(var(--c-ink)); margin: 2.5rem 0 0.6rem; }
.prose-legal h2:first-of-type { margin-top: 1.25rem; }
.prose-legal p { font-size: 17px; line-height: 1.7; color: rgb(var(--c-ink-dim)); margin-bottom: 0.9rem; }
.prose-legal .meta { font-size: 14px; color: rgb(var(--c-ink-mute)); }

/* ---------- Reduced motion: keep fades, drop movement ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a:active, summary:active, button:active { transform: none; }
  .sign-word { animation: none; }
  .call-bar, .plaque { transition: opacity var(--dur-ui) var(--ease); }
  .call-bar.is-tucked { transform: none; }
  .plaque:hover, .plaque:active { transform: none; }
  .arrow, .nav-link::after, .acc-icon, #mobile-toggle .icon { transition: none; }
  .link-arrow:hover .arrow, .btn:hover .arrow, .row-link:hover .arrow { transform: none; }
  .mnav, .mnav[data-open="true"] { transform: none; }
  #mobile-toggle .toggle-close, #mobile-toggle[aria-expanded="true"] .toggle-open { transform: none; }
  .acc[open] .acc-body { animation: fade var(--dur-ui) var(--ease); }
  [data-form-status]:empty { transform: none; }
  button[aria-busy="true"] [data-btn-label] { animation: none; }
}
@keyframes fade { from { opacity: 0; } }