/* ============ Andrews Lock and Key — Art-Deco Secure Vault ============ */
:root{
  --navy:#0d1320;
  --navy-2:#121b2e;
  --navy-3:#1a2438;
  --ink:#070a12;
  --brass:#c79a4b;
  --brass-lt:#e9c878;
  --brass-dk:#8a6a2e;
  --cream:#f4ecd8;
  --cream-soft:#cfc6b0;
  --line:rgba(199,154,75,.32);
  --line-soft:rgba(199,154,75,.16);
  --shadow:0 18px 50px -18px rgba(0,0,0,.7);
  --r:14px;
  --maxw:1120px;
  --disp:"Poiret One", "Cormorant Garamond", serif;
  --serif:"Cormorant Garamond", Georgia, serif;
  --sans:"Jost", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--cream);
  background:var(--navy);
  line-height:1.6;
  font-weight:300;
  overflow-x:hidden;
  letter-spacing:.01em;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 20px; }

.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--brass); color:var(--ink); padding:12px 18px; font-weight:600;
  border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

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

/* ---------- Eyebrow / titles ---------- */
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.7rem;
  font-weight:500;
  color:var(--brass-lt);
  margin:0 0 .8rem;
}
.eyebrow.center{ text-align:center; }
.section-title{
  font-family:var(--disp);
  font-weight:400;
  font-size:clamp(2rem,8vw,3.1rem);
  line-height:1.05;
  margin:0 0 1.6rem;
  text-align:center;
  letter-spacing:.02em;
  color:var(--cream);
  position:relative;
}
.section-title.left{ text-align:left; }
.section-title::after{
  content:"";
  display:block;
  width:64px; height:2px;
  margin:.7rem auto 0;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
}
.section-title.left::after{ margin-left:0; background:linear-gradient(90deg,var(--brass),transparent); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:0 22px;
  font-family:var(--sans); font-weight:600; font-size:.95rem;
  letter-spacing:.06em; text-transform:uppercase;
  border-radius:10px; cursor:pointer; border:1.5px solid transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s;
}
.btn-gold{
  background:linear-gradient(135deg,var(--brass-lt),var(--brass) 60%,var(--brass-dk));
  color:var(--ink);
  box-shadow:0 10px 24px -10px rgba(199,154,75,.7);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -12px rgba(199,154,75,.85); }
.btn-outline{
  background:transparent; color:var(--cream);
  border-color:var(--line);
}
.btn-outline:hover{ border-color:var(--brass); color:var(--brass-lt); }
.btn-full{ width:100%; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(13,19,32,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .3s, background .3s;
}
.site-header.scrolled{ box-shadow:0 6px 24px -12px rgba(0,0,0,.8); background:rgba(10,14,24,.94); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; min-height:64px; gap:12px; }
.logo{ display:flex; align-items:center; gap:10px; color:var(--brass); }
.logo-mark{ display:inline-flex; width:40px; height:40px; flex:0 0 auto; }
.logo-type{ display:flex; flex-direction:column; line-height:1; }
.logo-name{ font-family:var(--disp); font-size:1.25rem; color:var(--cream); letter-spacing:.06em; }
.logo-sub{ font-size:.62rem; letter-spacing:.34em; text-transform:uppercase; color:var(--brass-lt); margin-top:3px; }
.header-call{
  display:flex; flex-direction:column; align-items:flex-end; line-height:1.1;
  padding:6px 4px;
}
.header-call-label{
  font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; color:var(--brass-lt);
}
.header-call-num{ font-family:var(--serif); font-size:1.05rem; font-weight:700; color:var(--cream); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(199,154,75,.10), transparent 60%),
    linear-gradient(180deg,var(--ink),var(--navy) 55%,var(--navy-2));
  padding:34px 0 60px;
  overflow:hidden;
}
.hero-rays{
  position:absolute; inset:-30% -30% auto -30%; height:120%;
  background:repeating-conic-gradient(from 0deg at 50% 0%,
      rgba(199,154,75,.07) 0deg 4deg, transparent 4deg 12deg);
  -webkit-mask:radial-gradient(70% 80% at 50% 0%, #000 0%, transparent 70%);
          mask:radial-gradient(70% 80% at 50% 0%, #000 0%, transparent 70%);
  pointer-events:none;
}
.hero-inner{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:18px; }
.hero-dial{ position:relative; display:flex; flex-direction:column; align-items:center; }
.vault{ width:min(78vw,320px); height:auto; filter:drop-shadow(0 14px 28px rgba(0,0,0,.55)); }
.hero-status{
  margin-top:6px; font-size:.66rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass-lt); min-height:1em;
}
.hero-copy{ max-width:560px; }
h1{
  font-family:var(--disp); font-weight:400;
  font-size:clamp(2.4rem,12vw,3.6rem); line-height:1.02; margin:.2rem 0 .9rem;
  letter-spacing:.01em; color:var(--cream);
}
.hero-accent{ color:var(--brass-lt); }
.lede{ font-size:1.05rem; color:var(--cream-soft); margin:0 auto 1.4rem; max-width:46ch; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.hero-cta .btn{ flex:1 1 auto; min-width:150px; }
.hero-note{ margin-top:1.1rem; font-size:.78rem; letter-spacing:.08em; color:var(--cream-soft); opacity:.8; }

.deco-divider{
  margin-top:46px; height:18px;
  background-image:
    linear-gradient(90deg,transparent,var(--line),transparent),
    repeating-linear-gradient(135deg,var(--line-soft) 0 1px,transparent 1px 9px);
  background-size:100% 1px, 100% 100%;
  background-position:center, center;
  background-repeat:no-repeat, repeat-x;
  opacity:.7;
}

/* ---------- Section base ---------- */
section{ padding:62px 0; position:relative; }
.services{ background:var(--navy-2); }
.why{ background:linear-gradient(180deg,var(--navy),var(--navy-2)); }
.about{ background:var(--navy-2); }
.reviews{ background:var(--navy); }
.area{ background:var(--navy-2); }
.contact{ background:linear-gradient(180deg,var(--navy-2),var(--ink)); }

/* ---------- Services ---------- */
.svc-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:8px; }
.svc{
  background:linear-gradient(180deg,var(--navy-3),var(--navy));
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  padding:24px 22px;
  position:relative;
  overflow:hidden;
}
.svc::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--brass),transparent);
  opacity:.5;
}
.svc-ico{ display:inline-flex; width:48px; height:48px; color:var(--brass-lt); margin-bottom:12px; }
.svc-ico svg{ width:48px; height:48px; }
.svc h3{ font-family:var(--serif); font-weight:700; font-size:1.3rem; margin:0 0 .5rem; color:var(--cream); letter-spacing:.01em; }
.svc p{ margin:0; color:var(--cream-soft); font-size:.95rem; }

/* ---------- Why ---------- */
.why-grid{ display:grid; grid-template-columns:1fr; gap:18px; margin-top:8px; }
.why-item{
  border-left:2px solid var(--line);
  padding:4px 0 4px 18px;
  position:relative;
}
.why-num{
  font-family:var(--disp); font-size:1.4rem; color:var(--brass);
  letter-spacing:.1em; display:block; margin-bottom:.2rem;
}
.why-item h3{ font-family:var(--serif); font-weight:700; font-size:1.25rem; margin:.1rem 0 .4rem; color:var(--cream); }
.why-item p{ margin:0; color:var(--cream-soft); font-size:.95rem; }

/* ---------- About ---------- */
.about-inner{ display:flex; flex-direction:column; gap:28px; }
.about-photo{ position:relative; align-self:center; max-width:420px; width:100%; }
.about-photo img{
  border-radius:var(--r);
  border:1px solid var(--line);
  filter:saturate(1.02) contrast(1.02);
}
.about-frame{
  position:absolute; inset:10px; border:1px solid var(--line-soft);
  border-radius:8px; pointer-events:none;
}
.about-copy p{ color:var(--cream-soft); }
.about-points{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.5rem; }
.about-points li{ position:relative; padding-left:24px; color:var(--cream); font-size:.95rem; }
.about-points li::before{
  content:""; position:absolute; left:0; top:.55em; width:10px; height:10px;
  border:1px solid var(--brass); transform:rotate(45deg);
}

/* ---------- Reviews ---------- */
.rating-line{ display:flex; flex-direction:column; align-items:center; gap:.3rem; margin:-.4rem 0 1.8rem; text-align:center; }
.stars{ color:var(--brass-lt); font-size:1.3rem; letter-spacing:.15em; }
.rating-text{ font-size:.82rem; color:var(--cream-soft); letter-spacing:.04em; }
.rev-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.rev{
  background:var(--navy-3); border:1px solid var(--line-soft);
  border-radius:var(--r); padding:30px 22px 22px; position:relative;
}
.rev-quote{
  font-family:var(--disp); position:absolute; top:6px; left:16px;
  font-size:3rem; color:var(--brass); opacity:.5; line-height:1;
}
.rev p{ margin:0 0 .6rem; color:var(--cream); font-size:.97rem; }
.rev strong{ color:var(--brass-lt); font-weight:600; }
.rev-meta{ font-size:.72rem !important; letter-spacing:.12em; text-transform:uppercase; color:var(--cream-soft) !important; opacity:.7; margin:0 !important; }
.rev-disclaimer{ text-align:center; margin-top:1.4rem; font-size:.74rem; color:var(--cream-soft); opacity:.65; }

/* ---------- Service area ---------- */
.area-lede{ text-align:center; max-width:48ch; margin:-.5rem auto 1.6rem; color:var(--cream-soft); }
.area-list{
  list-style:none; padding:0; margin:0 auto; max-width:520px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px;
}
.area-list li{
  border:1px solid var(--line-soft); border-radius:10px;
  padding:12px; text-align:center; font-size:.95rem; letter-spacing:.04em;
  background:var(--navy-3); color:var(--cream);
  position:relative;
}
.area-list li::before{
  content:""; position:absolute; left:12px; top:50%; width:6px; height:6px;
  transform:translateY(-50%) rotate(45deg); background:var(--brass); opacity:.7;
}
.area-note{ text-align:center; margin-top:1.5rem; color:var(--cream-soft); font-size:.92rem; }
.area-note a{ color:var(--brass-lt); border-bottom:1px solid var(--line); }

/* ---------- Contact ---------- */
.contact-inner{ display:flex; flex-direction:column; gap:30px; }
.contact-copy p{ color:var(--cream-soft); }
.contact-details{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:14px; }
.contact-details li{ display:flex; flex-direction:column; gap:2px; }
.cd-label{ font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-lt); }
.contact-details a{ font-family:var(--serif); font-weight:700; font-size:1.3rem; color:var(--cream); }

.lead-form{
  background:var(--navy-3); border:1px solid var(--line);
  border-radius:var(--r); padding:24px 20px; box-shadow:var(--shadow);
}
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-lt); margin-bottom:6px; }
.field input, .field select, .field textarea{
  width:100%; min-height:48px; padding:12px 14px;
  background:var(--navy); border:1px solid var(--line-soft); border-radius:10px;
  color:var(--cream); font-family:var(--sans); font-size:1rem;
}
.field textarea{ min-height:auto; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--brass); outline:none; }
.field select{ appearance:none; }
.form-msg{ margin:.8rem 0 0; font-size:.9rem; color:var(--brass-lt); min-height:1.2em; }
.form-alt{ margin:.7rem 0 0; text-align:center; font-size:.88rem; color:var(--cream-soft); }
.form-alt a{ color:var(--brass-lt); border-bottom:1px solid var(--line); }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); border-top:1px solid var(--line-soft); padding:40px 0 90px; }
.footer-inner{ display:flex; flex-direction:column; gap:18px; }
.footer-brand .logo-name{ font-size:1.4rem; }
.footer-brand p{ margin:.4rem 0 0; color:var(--cream-soft); font-size:.9rem; }
.footer-meta{ display:flex; flex-direction:column; gap:6px; font-size:.9rem; color:var(--cream-soft); }
.footer-meta a{ color:var(--brass-lt); font-family:var(--serif); font-weight:700; font-size:1.1rem; }
.footer-legal{ text-align:center; margin:24px 0 0; font-size:.74rem; color:var(--cream-soft); opacity:.6; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:120;
  display:flex; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(10,14,24,.95); backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
}
.sticky-cta a{
  flex:1; min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  border-radius:10px; font-weight:600; font-size:.92rem; letter-spacing:.04em; text-transform:uppercase;
}
.sticky-call{ background:linear-gradient(135deg,var(--brass-lt),var(--brass)); color:var(--ink); }
.sticky-request{ background:transparent; color:var(--cream); border:1.5px solid var(--line); }

/* ---------- Reveal animation base ---------- */
.reveal{ opacity:0; transform:translateY(24px); }
.reveal.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }

/* ============ Desktop / tablet ============ */
@media (min-width:680px){
  .svc-grid{ grid-template-columns:repeat(2,1fr); }
  .why-grid{ grid-template-columns:repeat(2,1fr); }
  .rev-grid{ grid-template-columns:repeat(3,1fr); }
  .hero-cta .btn{ flex:0 0 auto; }
}
@media (min-width:920px){
  .svc-grid{ grid-template-columns:repeat(3,1fr); }
  .why-grid{ grid-template-columns:repeat(4,1fr); }
  .hero-inner{ flex-direction:row-reverse; text-align:left; justify-content:space-between; gap:40px; }
  .hero-copy{ text-align:left; }
  .lede{ margin-left:0; }
  .hero-cta{ justify-content:flex-start; }
  .vault{ width:340px; }
  .about-inner{ flex-direction:row; align-items:center; }
  .about-photo{ flex:0 0 42%; align-self:auto; }
  .contact-inner{ flex-direction:row; align-items:flex-start; }
  .contact-copy{ flex:1; }
  .lead-form{ flex:1; }
  .sticky-cta{ display:none; }
  .footer-inner{ flex-direction:row; justify-content:space-between; align-items:flex-end; }
  .footer-meta{ text-align:right; align-items:flex-end; }
  .site-footer{ padding-bottom:40px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
  .vault-dial, .vault-handle, .vault-keyhole{ transform:none !important; opacity:1 !important; }
}