/* Mega Lock And Key - site.css
   Semantic color tokens consumed by tailwind.config.cjs (rgb(var(--c-x) / <alpha-value>)),
   plus the motion system and every interaction state. Loaded after assets/tailwind.css.

   Theme: light, drawn from the logo. Navy (#171443) is the "LOCK & KEY" wordmark and the text;
   the logo's red (#9E1D20) is the only accent and carries every call, submit, icon, and link.
   Token names are roles, not colors: ink = page, paper = raised surface, bone = main text. */

:root {
  --c-ink: 247 247 250;          /* page background #F7F7FA, cool off-white */
  --c-paper: 255 255 255;        /* cards, form, header */
  --c-steel: 239 239 245;        /* alternate section band #EFEFF5 */
  --c-steel-light: 221 221 232;  /* hairlines #DDDDE8 */
  --c-bone: 23 20 67;            /* primary text: logo navy #171443, 16:1 on page */
  --c-bone-dim: 72 70 104;       /* secondary text #484668, 8:1 */
  --c-slate: 102 100 130;        /* tertiary text #666482, 5:1 on the section band */
  --c-brand: 196 38 44;          /* bright logo red #C4262C: decoration */
  --c-brand-bright: 158 29 32;   /* link + icon red #9E1D20 (logo), 8:1 on white */
  --c-brand-deep: 23 20 67;      /* navy panels and top bar */
  --c-cyan: 255 107 111;         /* soft red, only on navy */
  --c-safety: 172 32 36;         /* call + submit fill #AC2024 (white text 7:1) */
  --c-on-safety: 255 255 255;
  --c-alert: 180 83 9;           /* form errors: amber-brown #B45309, kept apart from the brand red */

  /* Motion. One curve, three durations. Only transform and opacity ever animate;
     color, border, and shadow changes either snap or ride on an opacity overlay. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-press: 140ms;   /* :active feedback, and every exit */
  --dur-ui: 200ms;      /* hover, open, reveal of a state change */

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

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }

body {
  background-color: rgb(var(--c-ink));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}

/* Browser surfaces carry the palette too */
::selection { background: rgb(var(--c-brand) / 0.22); color: rgb(var(--c-bone)); }
input, textarea, select { caret-color: rgb(var(--c-brand-bright)); }
.icon { display: inline-block; flex-shrink: 0; vertical-align: middle; }

/* Sticky header offset for in-page anchors */
[id] { scroll-margin-top: 96px; }

/* Mobile sticky call bar: reserve space so it never covers the last content or the footer */
@media (max-width: 767px) {
  body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ---------- Focus ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid rgb(var(--c-brand-bright));
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- Tactile press: every interactive element answers a tap ----------
   Inline text links can't transform, so the rule is a no-op for them; everything
   block or inline-flex (buttons, nav, cards, rows, summaries) scales to 0.98. */
a, summary, button { transition: transform var(--dur-press) var(--ease-out); touch-action: manipulation; }
a:active, summary:active, button:active { transform: scale(0.98); }

/* ---------- Buttons ----------
   Hover brightening is a white/navy overlay fading in, not a filter or color transition. */
.btn { position: relative; isolation: isolate; }
.btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-press) var(--ease-out);
}
.btn-call {
  background-image: linear-gradient(180deg, rgb(196 38 44), rgb(150 26 30));
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset, 0 1px 2px rgb(23 20 67 / 0.14), 0 8px 20px -10px rgb(158 29 32 / 0.75);
}
.btn-call::after { z-index: 0; background: rgb(255 255 255 / 0.12); }
.btn-call > * { position: relative; z-index: 1; }
.btn-ghost::after { background: rgb(var(--c-paper)); box-shadow: inset 0 0 0 1px rgb(var(--c-bone) / 0.28); }

/* Arrows nudge toward where the link goes */
.arrow { transition: transform var(--dur-ui) var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
  .btn:hover::after { opacity: 1; transition-duration: var(--dur-ui); }
  .btn-ghost:hover .arrow,
  .link-arrow:hover .arrow,
  .panel-row:hover .arrow,
  .card:hover .link-arrow .arrow,
  .make-link:hover .arrow { transform: translateX(3px); }
  .panel-row:hover .arrow { color: rgb(var(--c-cyan)); }
}

/* ---------- Primary nav: underline scales in from the left (marks hover and current page) ---------- */
.nav-link::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 8px; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-press) var(--ease-out);
}
.nav-link[aria-current="page"]::after { transform: scaleX(1); background: rgb(var(--c-brand-bright)); }
@media (hover: hover) and (pointer: fine) { .nav-link:hover::after { transform: scaleX(1); transition-duration: var(--dur-ui); } }

/* ---------- Cards: lift 2px on hover; the blue edge and shadow are one overlay fading in ---------- */
.card { position: relative; transition: transform var(--dur-ui) var(--ease-out); }
.card::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(var(--c-brand) / 0.55), 0 18px 40px -20px rgb(23 20 67 / 0.25);
  opacity: 0; transition: opacity var(--dur-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-2px); }
  .card:hover::after { opacity: 1; }
}
.card:active { transform: scale(0.98); transition-duration: var(--dur-press); }

/* ---------- Mobile menu: fades and drops 8px; exit is faster than entry ---------- */
.mnav {
  visibility: hidden; opacity: 0; transform: translateY(-8px);
  transition: opacity var(--dur-press) var(--ease-out), transform var(--dur-press) var(--ease-out), visibility 0s linear var(--dur-press);
}
.mnav[data-open="true"] {
  visibility: visible; opacity: 1; transform: none;
  transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out), visibility 0s;
}
/* Hamburger and close icons cross-fade with a quarter turn, so the swap reads as one state change */
#mobile-toggle .icon { position: absolute; transition: opacity var(--dur-press) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
#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; }

/* ---------- Accordion (native <details>, works without JS) ----------
   Height is never animated. The answer fades up 4px; the plus turns into an x. */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .acc summary:hover h3 { color: rgb(var(--c-brand-bright)); } }
.acc-icon { transition: transform var(--dur-ui) var(--ease-out); }
details[open] > summary .acc-icon { transform: rotate(45deg); }
.acc[open] .acc-body { animation: ml-fade-up var(--dur-ui) var(--ease-out); }
@keyframes ml-fade-up { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Form fields: focus ring and borders snap (no color transitions) ---------- */
@media (hover: hover) and (pointer: fine) { .field:hover { border-color: rgb(var(--c-bone) / 0.3); } }
.field:focus { outline: none; border-color: rgb(var(--c-brand-bright)); background-color: rgb(var(--c-paper)); box-shadow: 0 0 0 4px rgb(var(--c-brand) / 0.16); }
.field[aria-invalid="true"] { border-color: rgb(var(--c-alert)); }
.field[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(var(--c-alert) / 0.22); }

button[aria-busy="true"] { cursor: progress; opacity: 0.85; }
button[aria-busy="true"] [data-btn-label] { animation: ml-pulse 900ms var(--ease-out) infinite alternate; }
@keyframes ml-pulse { to { opacity: 0.5; } }
[data-form-status] { transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out); }
[data-form-status]:empty { opacity: 0; transform: translateY(4px); }

/* ---------- Legal prose ---------- */
.prose-legal h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; color: rgb(var(--c-bone)); margin: 2.75rem 0 0.75rem; }
.prose-legal h2:first-of-type { margin-top: 1.5rem; }
.prose-legal p { font-size: 16px; line-height: 1.7; color: rgb(var(--c-bone-dim)); margin-bottom: 0.9rem; }
.prose-legal .meta { font-size: 13px; color: rgb(var(--c-slate)); font-variant-numeric: tabular-nums; }
.prose-legal a { color: rgb(var(--c-brand-bright)); text-decoration: underline; text-decoration-color: rgb(var(--c-brand) / 0.4); text-underline-offset: 3px; }
.prose-legal a:hover { text-decoration-color: currentColor; }

/* ---------- Display type: Archivo's width axis, echoing the wide MEGA letterforms in the logo ---------- */
.wide { font-stretch: 116%; }

/* ---------- Brand panel: the navy block that stands in for photography on the home and area pages.
   Plain navy; the only light is a red glow behind the key mark, like the logo's red on navy. */
.brand-panel, .band-navy { background-color: rgb(var(--c-brand-deep)); }
.brand-panel {
  background-image: radial-gradient(55% 50% at 50% 30%, rgb(var(--c-brand) / 0.30), transparent 70%);
  box-shadow: 0 1px 2px rgb(23 20 67 / 0.1), 0 30px 60px -30px rgb(23 20 67 / 0.55);
}
.band-navy { background-image: radial-gradient(40% 90% at 85% 50%, rgb(var(--c-brand) / 0.28), transparent 70%); }
.brand-panel .mark { filter: drop-shadow(0 12px 28px rgb(196 38 44 / 0.45)); }

/* Icon tile used on service cards */
.icon-tile {
  background: linear-gradient(180deg, rgb(var(--c-brand) / 0.10), rgb(var(--c-brand) / 0.03));
  box-shadow: inset 0 0 0 1px rgb(var(--c-brand) / 0.16);
}

/* "Open 24/7" indicator: a static red dot. It never animates, because nothing live drives it. */
.live-dot { display: inline-block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 999px; background: #FF5A5F; box-shadow: 0 0 0 3px rgb(255 90 95 / 0.22); }

/* On navy, the call button keeps a neutral shadow instead of a red glow */
.band-navy .btn-call { box-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset, 0 10px 24px -12px rgb(0 0 0 / 0.55); }

/* ---------- Reduced motion ----------
   Keep what explains state (opacity fades, the menu and accordion appearing);
   drop everything that moves: press scale, hover lift, arrow nudges, slides, spins, pulses. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a:active, summary:active, button:active, .card:active, .card:hover { transform: none; }
  .arrow, .nav-link::after, .acc-icon, #mobile-toggle .icon { transition: none; }
  .btn-ghost:hover .arrow, .link-arrow:hover .arrow, .panel-row:hover .arrow, .card:hover .link-arrow .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: ml-fade var(--dur-ui) var(--ease-out); }
  [data-form-status]:empty { transform: none; }
  button[aria-busy="true"] [data-btn-label] { animation: none; }
  .make-link:hover .arrow { transform: none; }
}
@keyframes ml-fade { from { opacity: 0; } }