:root{
  /* Access Locksmiths brand */
  --black:#000000;
  --charcoal:#1a1a1a;
  --gold:#c5b261;
  --gold-bright:#f6d169;
  --gold-ink:#1a1a1a;

  --accent:var(--gold); --accent-ink:var(--gold-ink);
  --bg:#f6f6f4; --surface:#ffffff; --text:#1a1a1a; --muted:#5b6472; --border:#e4e4de;
  --disabled-bg:#efefef; --disabled-ink:#b3b3ad;

  --font-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fs-xs:.8125rem; --fs-sm:.9375rem; --fs-base:1rem; --fs-lg:1.25rem; --fs-xl:1.6rem; --fs-2xl:2.1rem;
  --lh-tight:1.2; --lh-body:1.6; --fw-normal:400; --fw-medium:600; --fw-bold:800;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem; --sp-8:2rem; --sp-12:3rem;
  --radius:14px; --radius-sm:9px; --shadow:0 1px 2px rgba(16,24,40,.06),0 6px 20px rgba(16,24,40,.09);
  --container:720px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--fs-base);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--sp-4)}
h1{font-size:var(--fs-2xl);line-height:var(--lh-tight);font-weight:var(--fw-bold);letter-spacing:-.02em;margin:0 0 var(--sp-3)}
h2{font-size:var(--fs-lg);line-height:var(--lh-tight);font-weight:var(--fw-bold);margin:0 0 var(--sp-2)}
a{color:inherit}

/* Header */
.site-header{background:var(--black);color:#fff}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-4)}
.brand{display:flex;flex-direction:column}
.brand-name{font-weight:var(--fw-bold);font-size:1.35rem;letter-spacing:.01em;color:#fff}
.brand-tag{font-size:var(--fs-sm);color:var(--gold);font-weight:var(--fw-medium)}
.brand-phone{display:inline-flex;align-items:center;gap:var(--sp-2);text-decoration:none;color:#fff;
  border:1px solid rgba(197,178,97,.5);border-radius:999px;padding:var(--sp-2) var(--sp-3);font-weight:var(--fw-medium);
  white-space:nowrap;font-size:var(--fs-sm)}
.brand-phone .phone-num{color:var(--gold)}
.brand-phone:hover{border-color:var(--gold);background:rgba(197,178,97,.12)}

/* Main */
.main{padding:var(--sp-8) var(--sp-4) var(--sp-12)}
.hero{margin-bottom:var(--sp-8)}
.lede{color:var(--charcoal);font-size:var(--fs-base);margin:0 0 var(--sp-4)}
.trust-row{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);padding:0;margin:0;
  color:var(--muted);font-size:var(--fs-sm);font-weight:var(--fw-medium)}
.trust-row li{display:flex;align-items:center;gap:var(--sp-1)}

/* Card */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--sp-6);position:relative}
.step{padding-top:var(--sp-6);margin-top:var(--sp-6);border-top:1px solid var(--border)}
.step:first-child{padding-top:0;margin-top:0;border-top:0}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;
  background:var(--gold);color:var(--gold-ink);border-radius:50%;font-size:var(--fs-sm);font-weight:var(--fw-bold);
  margin-right:var(--sp-2);vertical-align:middle}
.step h2{display:flex;align-items:center}
.step-hint{color:var(--muted);font-size:var(--fs-sm);margin:0 0 var(--sp-4)}

/* Calendar */
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-3)}
.cal-title{font-weight:var(--fw-bold);font-size:var(--fs-base)}
.cal-nav{background:var(--charcoal);color:#fff;border:0;width:2.2rem;height:2.2rem;border-radius:var(--radius-sm);
  font-size:1.2rem;line-height:1;cursor:pointer}
.cal-nav:hover{background:#000}
.cal-nav:disabled{background:var(--disabled-bg);color:var(--disabled-ink);cursor:not-allowed}
.cal-dow,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-1)}
.cal-dow{margin-bottom:var(--sp-2);color:var(--muted);font-size:var(--fs-xs);font-weight:var(--fw-medium);text-align:center}
.cal-cell{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);
  border:1px solid transparent;font-size:var(--fs-sm);font-weight:var(--fw-medium);background:#fafaf8;cursor:pointer;color:var(--text)}
.cal-cell.empty{background:transparent;cursor:default}
.cal-cell.disabled{background:var(--disabled-bg);color:var(--disabled-ink);cursor:not-allowed}
.cal-cell.selectable:hover{border-color:var(--gold);background:#fff}
.cal-cell.selected{background:var(--gold);color:var(--gold-ink);font-weight:var(--fw-bold);border-color:var(--gold)}
.cal-cell.selected:hover{background:var(--gold-bright)}

/* Slots */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:var(--sp-3)}
.slot{padding:var(--sp-3);border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;
  font-weight:var(--fw-medium);font-size:var(--fs-base);cursor:pointer;text-align:center;color:var(--text)}
.slot:hover{border-color:var(--gold);background:#fffdf5}
.slot.selected{background:var(--gold);color:var(--gold-ink);border-color:var(--gold);font-weight:var(--fw-bold)}
.slot.selected:hover{background:var(--gold-bright)}
.slot.booked{background:var(--disabled-bg);color:var(--disabled-ink);border-color:var(--disabled-bg);
  cursor:not-allowed;text-decoration:line-through}
.slot.booked:hover{background:var(--disabled-bg);border-color:var(--disabled-bg)}

/* Form */
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:var(--fs-sm);font-weight:var(--fw-medium);margin-bottom:var(--sp-2)}
.input{width:100%;padding:var(--sp-3) var(--sp-4);border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font:inherit}
.input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
textarea.input{resize:vertical}
.summary{background:#fffdf5;border:1px solid var(--gold);border-radius:var(--radius-sm);padding:var(--sp-3) var(--sp-4);
  font-size:var(--fs-sm);margin-bottom:var(--sp-4);color:var(--charcoal)}
.summary strong{color:var(--charcoal)}
.form-error{background:#fdecec;border:1px solid #f2b8b5;color:#b3261e;border-radius:var(--radius-sm);
  padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);margin:0 0 var(--sp-4)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-6);
  border-radius:var(--radius-sm);border:0;background:var(--gold);color:var(--gold-ink);font-weight:var(--fw-bold);
  font-size:var(--fs-base);cursor:pointer;transition:background .15s,transform .05s;font-family:inherit}
.btn:hover{background:var(--gold-bright)}
.btn:active{transform:translateY(1px)}
.btn:disabled{background:var(--disabled-bg);color:var(--disabled-ink);cursor:not-allowed}
.btn-block{width:100%}
.btn-ghost{background:transparent;color:var(--charcoal);border:1px solid var(--charcoal)}
.btn-ghost:hover{background:var(--charcoal);color:#fff}
.btn-sm{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm)}

/* Confirmation */
.confirm{text-align:center}
.confirm-tick{width:3.5rem;height:3.5rem;border-radius:50%;background:var(--gold);color:var(--gold-ink);
  font-size:2rem;font-weight:var(--fw-bold);display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-4)}
.confirm-body{font-size:var(--fs-base);color:var(--charcoal);margin:0 0 var(--sp-2)}
.confirm-body strong{color:var(--charcoal)}
.confirm-note{color:var(--muted);font-size:var(--fs-sm);margin:0 0 var(--sp-6)}

/* Owner */
.owner-link{text-align:center;margin-top:var(--sp-8)}
.owner-link a{color:var(--muted);font-size:var(--fs-sm)}
.owner-panel{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;overflow:auto;padding:var(--sp-8) 0}
.owner-close{position:absolute;top:var(--sp-3);right:var(--sp-4);background:none;border:0;font-size:1.6rem;
  cursor:pointer;color:var(--muted);line-height:1}
.owner-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.owner-list{display:flex;flex-direction:column;gap:var(--sp-3)}
.owner-item{border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--sp-4)}
.owner-item .oi-top{display:flex;justify-content:space-between;gap:var(--sp-2);font-weight:var(--fw-bold)}
.owner-item .oi-meta{color:var(--muted);font-size:var(--fs-sm);margin-top:var(--sp-1)}
.owner-item .oi-works{margin-top:var(--sp-2);font-size:var(--fs-sm)}
.owner-empty{color:var(--muted);text-align:center;padding:var(--sp-8) 0}

/* Footer */
.site-footer{background:var(--black);color:#fff;margin-top:var(--sp-12)}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);
  padding-top:var(--sp-6);padding-bottom:var(--sp-6);font-size:var(--fs-sm);flex-wrap:wrap}
.site-footer a{color:var(--gold);text-decoration:none;font-weight:var(--fw-medium)}

@media (max-width:420px){
  .brand-name{font-size:1.15rem}
  .brand-phone .phone-num{display:none}
  .brand-phone{padding:var(--sp-2)}
  h1{font-size:1.7rem}
  .card{padding:var(--sp-4)}
}

/* ---- Vibrancy pass (2026-07-11): shimmer + gentle motion, brand-appropriate ---- */
@media (prefers-reduced-motion: no-preference) {
  .brand-name {
    background: linear-gradient(100deg, var(--gold) 0%, var(--gold-bright) 25%, #fff6d8 45%, var(--gold-bright) 65%, var(--gold) 100%);
    background-size: 250% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: al-shimmer 6s ease-in-out infinite;
  }
  @keyframes al-shimmer { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
  .site-header { position: relative; overflow: hidden; }
  .site-header::before {
    content:""; position:absolute; inset:-50%; pointer-events:none; z-index:0;
    background: radial-gradient(420px 200px at 20% 30%, rgba(197,178,97,.20), transparent 60%),
                radial-gradient(520px 220px at 85% 70%, rgba(246,209,105,.13), transparent 60%);
    animation: al-drift 14s ease-in-out infinite alternate;
  }
  .header-inner { position: relative; z-index: 1; }
  @keyframes al-drift { from{transform:translate3d(-4%,-2%,0)} to{transform:translate3d(4%,2%,0)} }
  .btn { position: relative; overflow: hidden; }
  .btn::after {
    content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.45), transparent);
    transform: skewX(-18deg); animation: al-sheen 5.5s ease-in-out infinite;
  }
  @keyframes al-sheen { 0%,72%{left:-60%} 88%,100%{left:130%} }
  .selected { animation: al-pulse 2.2s ease-in-out infinite; }
  @keyframes al-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(197,178,97,.45)} 50%{box-shadow:0 0 0 6px rgba(197,178,97,0)} }
}
.slot, .selectable, .btn { transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.slot:hover:not(.booked), .selectable:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.btn:hover { transform: translateY(-1px); }