/* ============================================================
   LEGENDS HOME & BUSINESS LOCKSMITH - Stylesheet v1.0
   Brand: Oxblood #1F2A33 + Signal Yellow #FF9E0A
   Full tonal palette - steel 50-900, amber 50-800
   Font: Inter (consistent throughout)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
/* Explicit page background: the team band is transparent where it overlaps the
   hero, so without this the browser canvas shows through — which paints dark
   in a dark-mode browser. */
body { font-family: 'Inter', sans-serif; color: #1F2A33; line-height: 1.6; overflow-x: hidden; padding-bottom: 60px; background: #ffffff; }
@media (max-width: 767px) { body { font-size: 15px; line-height: 1.75; } }

/* TOKENS */
:root {
  /* --- Green scale (brand primary) --- */
  --steel-50: #F4F6F8;
  --steel-100: #E7EBEF;
  --steel-200: #CDD5DC;
  --steel-300: #A9B5BF;
  --steel-400: #5E6B77;
  --steel-500: #425161;
  --steel-600: #2B3946;
  --steel-700: #232F3B;
  --steel-800: #1A2530;
  --steel-900: #121B24;

  /* --- Brass scale (brand accent) --- */
  --amber-50: #FFF7E6;
  --amber-100: #FFEBBF;
  --amber-200: #FFD98A;
  --amber-300: #FFB838;
  --amber-400: #FF9E0A;
  --amber-500: #E58700;
  --amber-600: #B86A00;
  --amber-700: #8F5200;
  --amber-800: #663A00;

  /* --- Semantic roles --- */
  --primary: var(--steel-600);
  --primary-dark: var(--steel-800);
  --primary-soft: var(--steel-100);
  --accent: var(--amber-400);
  --accent-hover: var(--amber-500);
  --accent-bright: var(--amber-300);
  --accent-soft: var(--amber-50);
  --dark: var(--steel-900);
  --white: #ffffff;
  --light-bg: #F4F6F8;
  --text-dark: var(--steel-600);
  --text-medium: #4A5763;
  --text-muted: var(--steel-400);
  --border: #DDE3E8;
  --border-strong: var(--steel-200);
  --success-bg: #DCFCE7;
  --success-fg: #15803D;
  --success-dot: #16A34A;
  --on-dark: rgba(255,255,255,0.72);
  --on-dark-soft: rgba(255,255,255,0.55);

  /* --- Elevation --- */
  --shadow: 0 4px 24px rgba(7,11,15,0.08);
  --shadow-md: 0 6px 32px rgba(7,11,15,0.12);
  --shadow-lg: 0 12px 48px rgba(7,11,15,0.18);
  --shadow-accent: 0 8px 24px rgba(255,158,10,0.38);
  --shadow-accent-lg: 0 10px 32px rgba(255,158,10,0.5);

  /* --- Geometry & type --- */
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --container: 1200px;
  --section-py: 80px;
  --font: 'Inter', sans-serif;
  --focus-ring: 0 0 0 3px rgba(255,158,10,0.55);
  --accent-deep: var(--amber-700);
  --on-accent: #070B0F;
}
@media (max-width: 767px) { :root { --section-py: 56px; } }

/* ACCESSIBILITY */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* TYPOGRAPHY */
h1,h2,h3,h4,h5,h6 { font-family: var(--font); font-weight: 700; line-height: 1.2; color: inherit; }
h1 { font-size: clamp(2.2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
h3 { font-size: 1.1rem; }
h4, h5 { font-size: 0.95rem; }
p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }
a { text-decoration: none; color: inherit; transition: all 0.2s; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

/* LAYOUT */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: var(--section-py) 0; }
.section--dark { background: var(--dark); color: #fff; }
.section--primary { background: var(--primary); color: #fff; }
.section--light { background: var(--light-bg); }
.section--white { background: #fff; }
.text-center { text-align: center; }
.section-head--center { text-align: center; }
.section-head--center .section-subtitle { margin: 0 auto 48px; }

/* SECTION LABELS */
.section-label { display: block; font-family: var(--font); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }
.section-title { margin-bottom: 16px; }
.section-subtitle { color: var(--text-medium); font-size: 1rem; max-width: 640px; margin-bottom: 48px; }
.section-subtitle--center { margin-left: auto; margin-right: auto; text-align: center; }

/* BUTTONS */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 36px; border-radius: var(--radius); font-family: var(--font); font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.25s; border: none; white-space: nowrap; text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,158,10,0.38); }
.btn-outline { background: transparent; color: #fff; border: 2px solid #fff; }
.btn-outline:hover { background: #fff; color: var(--primary); }
.btn-lg { padding: 18px 44px; font-size: 1.05rem; }
.btn-full { width: 100%; }
.btn-hero-call { background: var(--accent); color: var(--on-accent); border-radius: 999px; padding: 18px 48px; font-family: var(--font); font-weight: 700; font-size: 1.05rem; box-shadow: 0 6px 24px rgba(255,158,10,0.4); transition: all 0.25s; display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.btn-hero-call:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 10px 32px rgba(255,158,10,0.5); }
.btn-pill-outline { background: transparent; color: #fff; border: 2px solid #fff; border-radius: 999px; padding: 16px 40px; font-family: var(--font); font-weight: 600; font-size: 0.95rem; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.btn-pill-outline:hover { background: #fff; color: var(--primary); }

/* ===== HEADER ===== */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 16px rgba(7,11,15,0.08); height: 80px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 20px; }
.logo-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; flex: 0 0 44px; }
.logo-icon svg { width: 100%; height: 100%; display: block; }
.logo-name { font-family: var(--font); font-weight: 800; font-size: 1.35rem; color: var(--primary); letter-spacing: -0.03em; line-height: 1; }
.logo-name span { display: block; font-size: 0.5em; font-weight: 700; letter-spacing: 0.22em; color: var(--accent); margin-top: 4px; }
.header-nav { display: flex; align-items: center; gap: 2px; }
.header-nav a { font-family: var(--font); font-weight: 500; font-size: 0.88rem; color: var(--text-dark); padding: 8px 14px; border-radius: var(--radius); transition: all 0.2s; }
.header-nav a:hover { color: var(--accent); background: rgba(255,158,10,0.06); }
.header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.open-badge { display: inline-flex; align-items: center; gap: 6px; background: #dcfce7; color: #15803d; font-family: var(--font); font-weight: 600; font-size: 0.75rem; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.open-badge::before { content: ''; width: 7px; height: 7px; background: #16a34a; border-radius: 50%; display: inline-block; animation: pulse-dot 1.5s ease infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.3)} }
.header-phone { font-family: var(--font); font-weight: 700; font-size: 0.9rem; color: var(--on-accent); background: var(--accent); padding: 10px 22px; border-radius: 999px; display: flex; align-items: center; gap: 8px; transition: background 0.2s; white-space: nowrap; }
.header-phone:hover { background: var(--accent-hover); }

/* Anchor offset so fixed header never covers a section heading */
section[id] { scroll-margin-top: 92px; }
@media (max-width: 900px) { section[id] { scroll-margin-top: 80px; } }

/* ===== MOBILE NAV ===== */
.nav-toggle { display: none; width: 44px; height: 44px; flex-shrink: 0; align-items: center; justify-content: center; background: var(--steel-50); border: 1px solid var(--border); border-radius: var(--radius); color: var(--primary); font-size: 1.15rem; cursor: pointer; transition: all 0.2s; }
.nav-toggle:hover { background: var(--steel-100); }
.nav-toggle .fa-times { display: none; }
.nav-toggle[aria-expanded="true"] .fa-bars { display: none; }
.nav-toggle[aria-expanded="true"] .fa-times { display: block; }
.mobile-nav { display: none; position: fixed; top: 72px; left: 0; right: 0; z-index: 999; background: #fff; border-top: 1px solid var(--border); box-shadow: var(--shadow-md); padding: 8px 24px 20px; max-height: calc(100vh - 72px); overflow-y: auto; }
.mobile-nav.is-open { display: block; }
.mobile-nav a { display: block; font-family: var(--font); font-weight: 600; font-size: 1rem; color: var(--text-dark); padding: 15px 4px; border-bottom: 1px solid var(--border); }
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover { color: var(--accent); }
.mobile-nav .mobile-nav-call { margin-top: 14px; background: var(--accent); color: var(--on-accent); text-align: center; border-radius: var(--radius-pill); padding: 15px 20px; border-bottom: none; }
.mobile-nav .mobile-nav-call:hover { background: var(--accent-hover); color: var(--on-accent); }

@media (max-width: 1024px) {
  .header-nav { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (max-width: 900px) {
  .site-header, .header-inner { height: 72px; }
  .open-badge { display: none; }
  .logo-icon { width: 38px; height: 38px; flex: 0 0 38px; }
  .logo-name { font-size: 1.12rem; }
  .header-phone { padding: 10px 16px; font-size: 0.85rem; }
}
@media (max-width: 400px) {
  .header-phone span.header-phone-num { display: none; }
  .header-phone { padding: 11px 14px; }
}

/* ===== FLOATING ===== */
.floating-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: var(--dark); padding: 13px 24px; display: flex; align-items: center; justify-content: center; }
.floating-bar a { color: #fff; font-family: var(--font); font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 10px; }
.floating-bar a i { color: var(--accent); font-size: 1.1rem; }
.floating-cta { position: fixed; bottom: 68px; right: 20px; z-index: 998; background: var(--accent); color: var(--on-accent); font-family: var(--font); font-weight: 700; font-size: 0.78rem; padding: 12px 16px; border-radius: var(--radius); text-align: center; line-height: 1.4; box-shadow: 0 6px 24px rgba(255,158,10,0.45); animation: float-up 3s ease-in-out infinite; text-decoration: none; display: block; }
@keyframes float-up { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

/* Floating elements — mobile behaviour.
   The bottom bar must stay one line, and the floating CTA is redundant
   next to it on small screens, so it is retired below 900px. */
.floating-bar a { text-align: center; }
@media (max-width: 900px) {
  .floating-cta { display: none; }
  .floating-bar { padding: 12px 16px; }
  .floating-bar a { font-size: 0.95rem; white-space: nowrap; }
  .floating-bar a .fb-tail { display: none; }
  body { padding-bottom: 54px; }
}
@media (max-width: 420px) {
  .floating-bar a { font-size: 0.9rem; }
  .floating-bar a .fb-lead { display: none; }
  .floating-bar a::after { content: '— 24/7'; font-weight: 600; opacity: 0.85; }
}

/* ===== HERO ===== */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 80px; background-image: url('legends-home-business-locksmith-images/fallbacks/legends-home-business-locksmith-hero-fallback.svg'); background-size: cover; background-position: center 38%; overflow: hidden; }
@media (max-width: 767px) {
  .hero { background-position: 74% center; }
  .hero-single::before {
    width: 210%;
    height: 124%;
    background: radial-gradient(ellipse at center,
      rgba(7,11,15,0.86) 0%,
      rgba(7,11,15,0.70) 46%,
      rgba(7,11,15,0.32) 74%,
      rgba(7,11,15,0) 100%);
  }
  .hero-badge { padding: 7px 14px; background: rgba(7,11,15,0.72); }
}
.hero-overlay { position: absolute; inset: 0; z-index: 0; background: radial-gradient(ellipse 78% 58% at 50% 46%, rgba(7,11,15,0.34) 0%, rgba(7,11,15,0.18) 58%, rgba(7,11,15,0) 100%), linear-gradient(180deg, rgba(7,11,15,0.88) 0%, rgba(7,11,15,0.72) 18%, rgba(7,11,15,0.62) 42%, rgba(7,11,15,0.60) 58%, rgba(7,11,15,0.76) 82%, rgba(7,11,15,0.92) 100%); }
/* Bottom padding leaves room for the team photo that is pulled up into the
   hero, so the card never covers the headline or the call button. */
.hero .container { position: relative; z-index: 1; padding-top: 60px; padding-bottom: 210px; }
/* Hero content is centred on the page at every width. The benefit boxes keep
   their icon-left / text-right reading order inside each box — only the block
   itself is centred, so the copy never becomes centre-aligned mush. */
.hero-single { max-width: 880px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* Soft scrim carried by the hero copy block itself. A photograph behind centred
   white and teal type cannot be made legible by darkening the whole picture -
   that just hides the team. This darkens only the ellipse the words sit in, and
   scales with them, so the van and the technicians either side stay bright. */
.hero-single { position: relative; }
.hero-single::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  width: 132%;
  height: 210%;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(7,11,15,0.80) 0%,
    rgba(7,11,15,0.62) 42%,
    rgba(7,11,15,0.30) 70%,
    rgba(7,11,15,0) 100%);
}
.hero-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-bright); font-family: var(--font); font-weight: 700; font-size: 0.9rem; margin-bottom: 22px; letter-spacing: 0.01em; background: rgba(7,11,15,0.62); border: 1px solid rgba(255,158,10,0.38); padding: 8px 18px; border-radius: 999px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.hero-h1-line1 { font-family: var(--font); font-size: clamp(2rem, 4.5vw, 3.7rem); font-weight: 700; color: #fff; line-height: 1.15; text-shadow: 0 2px 10px rgba(7,11,15,0.85), 0 1px 3px rgba(7,11,15,0.9); }
.hero-h1-line2 { font-family: var(--font); font-size: clamp(2rem, 4.5vw, 3.8rem); font-weight: 800; color: var(--accent-bright); line-height: 1.15; margin-bottom: 20px; text-shadow: 0 2px 10px rgba(7,11,15,0.9), 0 1px 3px rgba(7,11,15,0.95); }
/* The hero is deliberately spare: badge, headline, call button. The benefit
   chips moved below the team photo so nothing competes with the phone number. */
.hero-cta-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 8px; }

/* Hero — tablet and below */
@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: 72px; }
  .hero .container { padding-top: 48px; padding-bottom: 130px; }
  .hero-badge { font-size: 0.82rem; margin-bottom: 16px; }
}

/* Hero — phone */
@media (max-width: 560px) {
  .hero .container { padding-top: 38px; padding-bottom: 96px; }
  .hero-badge { font-size: 0.78rem; margin-bottom: 12px; }
  .hero-h1-line1 { font-size: clamp(1.8rem, 8vw, 2.3rem); }
  .hero-h1-line2 { font-size: clamp(1.9rem, 8.5vw, 2.4rem); margin-bottom: 18px; }
  .hero-cta-row { width: 100%; max-width: 420px; }
  .btn-hero-call { width: 100%; justify-content: center; padding: 17px 24px; font-size: 1.02rem; }
}

/* ===== TEAM BAND =====
   The photo card is pulled up into the hero with a negative margin so the
   image straddles the boundary: top half over the dark hero, bottom half and
   caption on the white section below. The band itself has no background, so
   the hero's dark colour shows behind the top of the card. */
.team-band { position: relative; z-index: 2; background: transparent; padding: 0 0 var(--section-py); margin-top: -170px; }
.team-photo { position: relative; margin: 0 0 40px; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 24px 60px rgba(7,11,15,0.38); border: 6px solid #fff; background: #fff; }
/* Box matches the 3:2 source at every width, so cover performs no crop and the
   whole group stays in frame. object-position only matters if a non-3:2 image
   is dropped in later; centred is the safe default for a group shot. */
.team-photo-img { width: 100%; height: auto; display: block; aspect-ratio: 1600 / 822; object-fit: cover; object-position: center; }
/* While the real photo is missing the caption would sit on top of the
   placeholder's instructions, so hide it until the file is dropped in. */
.team-photo.is-placeholder .team-photo-tag { display: none; }
.team-photo-tag { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; background: rgba(7,11,15,0.82); color: #fff; font-family: var(--font); font-weight: 600; font-size: 0.82rem; padding: 12px 20px; border-top-right-radius: var(--radius); backdrop-filter: blur(4px); }
.team-photo-tag i { color: var(--accent); }

.team-intro { text-align: center; max-width: 760px; margin: 0 auto; }
.team-headline { font-family: var(--font); font-weight: 800; font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--primary); line-height: 1.2; margin-bottom: 8px; }
/* Block-level flex, not inline-flex: as an inline element it shared a line
   with the call button that follows it. */
.team-location { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 600; font-size: 1.05rem; color: var(--text-medium); margin-bottom: 24px; }
.team-location i { color: var(--accent); }
.team-call { margin-bottom: 22px; }
.team-intro-text { color: var(--text-medium); font-size: 1rem; line-height: 1.75; margin: 0 auto 24px; max-width: 620px; }
/* Benefit chips — the four points that used to be large boxes in the hero,
   scaled down and moved directly under the team photo. */
.team-benefits { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 34px; }
.team-benefit { display: inline-flex; align-items: center; gap: 9px; background: var(--steel-50); border: 1px solid var(--border-strong); color: var(--primary); font-family: var(--font); font-weight: 600; font-size: 0.85rem; line-height: 1.3; padding: 10px 18px; border-radius: var(--radius-pill); }
.team-benefit i { color: var(--accent); font-size: 0.88rem; }

@media (max-width: 1024px) { .team-band { margin-top: -130px; } }
@media (max-width: 900px) {
  .team-band { margin-top: -90px; }
  .team-photo { border-width: 5px; margin-bottom: 30px; box-shadow: 0 18px 44px rgba(7,11,15,0.34); }
}
@media (max-width: 600px) {
  /* Less overlap on a phone — a deep pull-up would eat the hero's call button. */
  .team-band { margin-top: -60px; }
  .team-photo { border-width: 4px; border-radius: var(--radius); margin-bottom: 24px; }
  /* Keep the source 3:2 on phones. A 4:3 box is relatively narrower, so
     object-fit:cover would crop the sides — and the technicians stand edge to
     edge, so the outer two would be cut off. Shorter card, everyone in frame. */
  .team-photo-img { aspect-ratio: 4 / 3; object-position: 34% center; }
  .team-photo-tag { font-size: 0.76rem; padding: 9px 13px; gap: 6px; white-space: nowrap; }
  .team-photo-tag .team-tag-tail { display: none; }
  .team-headline { font-size: 1.45rem; margin-bottom: 6px; }
  .team-location { font-size: 0.95rem; margin-bottom: 18px; }
  .team-call { width: 100%; justify-content: center; margin-bottom: 18px; }
  .team-intro-text { font-size: 0.95rem; line-height: 1.7; margin-bottom: 0; }
  .team-benefits { gap: 7px; margin-bottom: 26px; }
  .team-benefit { font-size: 0.78rem; padding: 8px 13px; gap: 7px; }
  .team-benefit i { font-size: 0.8rem; }
}

/* ===== SPECIALTIES ===== */
.specialties-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 1024px) { .specialties-grid { grid-template-columns: repeat(2,1fr); } }
.specialty-card { background: #fff; border-radius: var(--radius-lg); padding: 36px 24px; text-align: center; box-shadow: var(--shadow); transition: all 0.3s; }
.specialty-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.specialty-icon { width: 80px; height: 80px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.9rem; color: var(--on-accent); }
.specialty-card h3 { color: var(--primary); font-size: 0.95rem; font-weight: 700; margin-bottom: 8px; }
.specialty-card p { color: var(--text-medium); font-size: 0.85rem; line-height: 1.65; margin: 0; }
/* Below 560px two columns leave ~150px per card and the copy shreds into a
   ragged column, so cards go full width with the icon beside the text. */
@media (max-width: 560px) {
  .specialties-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .specialty-card { display: grid; grid-template-columns: 56px 1fr; align-items: start; column-gap: 16px; text-align: left; padding: 20px; }
  .specialty-icon { width: 56px; height: 56px; margin: 0; font-size: 1.35rem; grid-row: span 2; }
  .specialty-card h3 { font-size: 1rem; margin-bottom: 4px; align-self: center; }
  .specialty-card p { font-size: 0.9rem; }
}

/* ===== SERVICES ===== */
.services-banner { width: 100%; max-height: 260px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 48px; }
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .services-grid { grid-template-columns: 1fr; } }
.service-card { background: #fff; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: all 0.3s; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.service-card-img { width: 100%; height: 180px; object-fit: cover; }
.service-card-body { padding: 24px; }
.service-card h3 { color: var(--primary); margin-bottom: 10px; font-size: 0.98rem; }
.service-card p { color: var(--text-medium); font-size: 0.88rem; line-height: 1.65; margin: 0; }
.service-note { margin-top: 40px; padding: 16px 24px; background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text-medium); font-size: 0.88rem; font-style: italic; text-align: center; }

/* ===== GUARANTEE ===== */
.guarantee-split { display: grid; grid-template-columns: 0.7fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .guarantee-split { grid-template-columns: 1fr; gap: 32px; text-align: center; } }
.guarantee-img-col { display: flex; justify-content: center; }
.guarantee-svg { width: 280px; height: 280px; max-width: 100%; }
@media (max-width: 900px) { .guarantee-svg { width: 180px; height: 180px; } }
.guarantee-label { display: block; font-family: var(--font); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
.guarantee-text-col h2 { color: #fff; margin-bottom: 32px; font-size: clamp(1.8rem, 3.5vw, 2.8rem); font-weight: 700; }

/* ===== TESTIMONIALS ===== */
.testimonials-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-card { background: #fff; border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow); }
.testimonial-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.testimonial-stars { color: var(--accent); font-size: 0.9rem; letter-spacing: 2px; }
.testimonial-google { width: 28px; height: 28px; object-fit: contain; }
.testimonial-text { color: var(--text-medium); font-size: 0.9rem; line-height: 1.7; margin-bottom: 20px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar { width: 42px; height: 42px; min-width: 42px; background: var(--primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font); font-weight: 700; font-size: 1rem; }
.testimonial-name { font-family: var(--font); font-weight: 700; font-size: 0.9rem; color: var(--text-dark); }
.testimonial-location { font-size: 0.78rem; color: var(--text-medium); margin-top: 2px; }

/* ===== CONTACT FORM ===== */
.contact-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
/* Grid children default to min-width:auto, so the text input's intrinsic
   min-content width (browser default size="20") was forcing the column to
   358px inside a 327px container and pushing the form box off-screen. */
.contact-split > * { min-width: 0; }
.contact-split input, .contact-split textarea { min-width: 0; max-width: 100%; }
@media (max-width: 900px) { .contact-split { grid-template-columns: 1fr; gap: 40px; } }
.contact-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: var(--on-accent); font-family: var(--font); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; margin-bottom: 16px; }
.contact-info h2 { margin-bottom: 10px; }
.contact-info .subtitle { color: var(--text-medium); margin-bottom: 32px; }
.contact-trust { display: flex; align-items: center; gap: 14px; margin-top: 32px; padding: 18px 20px; background: var(--light-bg); border-radius: var(--radius); }
.contact-trust-num { font-family: var(--font); font-weight: 800; font-size: 1.8rem; color: var(--accent); }
.contact-trust-label { color: var(--text-medium); font-size: 0.88rem; }
.contact-form-box { background: #fff; border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-lg); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-family: var(--font); font-weight: 600; font-size: 0.85rem; color: var(--text-dark); margin-bottom: 7px; }
.form-group input, .form-group textarea { width: 100%; padding: 13px 16px; border: 1.5px solid var(--border); border-radius: var(--radius); font-family: var(--font); font-size: 0.93rem; color: var(--text-dark); background: #fff; transition: border-color 0.2s; outline: none; }
.form-group input:focus, .form-group textarea:focus { border-color: var(--accent); }
.form-group textarea { min-height: 110px; resize: vertical; }
/* Phone: 40px of box padding left only ~247px of usable field width, and
   sub-16px inputs make iOS Safari zoom on focus. */
@media (max-width: 600px) {
  .contact-form-box { padding: 24px 20px; border-radius: var(--radius); }
  .contact-trust { margin-top: 24px; padding: 16px; }
  .contact-trust-num { font-size: 1.5rem; }
  .form-group { margin-bottom: 14px; }
  .form-group input, .form-group textarea { font-size: 16px; padding: 13px 14px; }
  .form-group textarea { min-height: 96px; }
}

/* ===== ABOUT ===== */
.about-split { display: grid; grid-template-columns: 1fr 0.85fr; gap: 64px; align-items: center; }
@media (max-width: 1024px) { .about-split { grid-template-columns: 1fr; gap: 40px; } }
.about-features { display: flex; flex-direction: column; gap: 20px; margin: 24px 0 32px; }
.about-feature { display: flex; align-items: flex-start; gap: 16px; }
.about-feature-icon { width: 46px; height: 46px; min-width: 46px; background: rgba(255,158,10,0.15); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.1rem; }
.about-feature h4 { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 3px; }
.about-feature p { color: rgba(255,255,255,0.6); font-size: 0.85rem; margin: 0; }
.about-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.35); }
.about-image img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 500px; }

/* ===== WHY CHOOSE ===== */
.why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; margin-top: 48px; }
@media (max-width: 1024px) { .why-grid { grid-template-columns: repeat(2,1fr); } }
.why-card { background: #fff; border-radius: var(--radius-lg); padding: 32px 24px; text-align: center; box-shadow: var(--shadow); transition: all 0.3s; }
.why-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.why-card-icon { width: 68px; height: 68px; background: rgba(7,11,15,0.07); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; color: var(--primary); font-size: 1.6rem; }
.why-card h3 { color: var(--primary); margin-bottom: 10px; font-size: 0.95rem; }
.why-card p { color: var(--text-medium); font-size: 0.88rem; line-height: 1.65; margin: 0; }
@media (max-width: 560px) {
  .why-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .why-card { display: grid; grid-template-columns: 52px 1fr; align-items: start; column-gap: 16px; text-align: left; padding: 20px; }
  .why-card-icon { width: 52px; height: 52px; margin: 0; font-size: 1.25rem; grid-row: span 2; }
  .why-card h3 { font-size: 1rem; margin-bottom: 4px; align-self: center; }
  .why-card p { font-size: 0.9rem; }
}

/* ===== PROCESS ===== */
.process-steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; margin-top: 48px; position: relative; }
.process-steps::before { content: ''; position: absolute; top: 40px; left: calc(16.66% + 40px); right: calc(16.66% + 40px); height: 2px; background: rgba(255,158,10,0.3); }
@media (max-width: 768px) { .process-steps { grid-template-columns: 1fr; } .process-steps::before { display: none; } }
.process-step { text-align: center; position: relative; z-index: 1; }
.process-step-num { width: 80px; height: 80px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; font-family: var(--font); font-weight: 800; font-size: 2rem; color: var(--on-accent); }
.process-step h3 { color: #fff; margin-bottom: 10px; }
.process-step p { color: rgba(255,255,255,0.65); font-size: 0.9rem; margin: 0; }

/* ===== STATS ===== */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
@media (max-width: 768px) { .stats-grid { grid-template-columns: repeat(2,1fr); } }
.stat-item { text-align: center; padding: 60px 24px; border-right: 1px solid rgba(7,11,15,0.1); }
.stat-item:last-child { border-right: none; }
@media (max-width: 768px) { .stat-item:nth-child(2n) { border-right: none; } .stat-item { border-bottom: 1px solid rgba(7,11,15,0.1); } }
.stat-num { font-family: var(--font); font-weight: 800; font-size: clamp(2.5rem, 4vw, 3.8rem); color: var(--accent); line-height: 1; margin-bottom: 8px; }
.stat-label { color: var(--text-medium); font-family: var(--font); font-weight: 600; font-size: 0.88rem; }
.stats-locksmith-img { width: 100%; max-height: 200px; object-fit: cover; }
/* 60px of vertical padding per cell made each stat ~175px tall on a phone —
   four of them turned into a full screen of near-empty space. */
@media (max-width: 600px) {
  .stat-item { padding: 26px 12px; }
  .stat-num { font-size: 2.1rem; margin-bottom: 4px; }
  .stat-label { font-size: 0.82rem; line-height: 1.4; }
  .stats-locksmith-img { max-height: 150px; }
}

/* ===== EXTENDED ABOUT ===== */
.extended-about { display: grid; grid-template-columns: 1fr 0.6fr; gap: 64px; align-items: center; }
@media (max-width: 1024px) { .extended-about { grid-template-columns: 1fr; } }
/* Was an inline style="padding:40px" — moved to a class so the padding can
   breathe down on phones, where 40px each side left only 247px of content. */
.extended-about-panel { background: var(--primary); border-radius: var(--radius-lg); padding: 40px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 600px) { .extended-about-panel { padding: 26px 20px; gap: 16px; } }

/* ===== CTA BANNER ===== */
.cta-banner { position: relative; text-align: center; padding: var(--section-py) 0; background-size: cover; background-position: center; }
.cta-banner-overlay { position: absolute; inset: 0; background: var(--dark); opacity: 0.85; }
.cta-banner .container { position: relative; z-index: 1; }
.cta-banner h2 { color: #fff; margin-bottom: 6px; }
.cta-banner .cta-sub { color: #fff; font-size: 1.6rem; font-weight: 700; margin-bottom: 32px; }
@media (max-width: 600px) {
  .cta-banner .cta-sub, .social-proof .sp-sub { font-size: 1.15rem; margin-bottom: 24px; }
  .cta-banner .btn-hero-call, .social-proof .btn-hero-call { width: 100%; justify-content: center; }
}

/* ===== PRICING ===== */
.pricing-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; margin-top: 48px; }
@media (max-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 600px) { .pricing-grid { grid-template-columns: repeat(2,1fr); } }
.pricing-card { background: #fff; border-radius: var(--radius-lg); padding: 32px 16px; text-align: center; box-shadow: var(--shadow); border-bottom: 3px solid var(--primary); transition: all 0.3s; }
.pricing-card:hover { transform: translateY(-6px); border-bottom-color: var(--accent); box-shadow: var(--shadow-lg); }
.pricing-card h3 { color: var(--primary); font-size: 0.88rem; margin-bottom: 16px; line-height: 1.5; min-height: 42px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 600px) {
  .pricing-grid { gap: 12px; margin-top: 32px; }
  .pricing-card { padding: 22px 12px; }
  .pricing-card h3 { font-size: 0.85rem; min-height: 38px; }
}
.price { font-family: var(--font); font-weight: 800; font-size: 2.2rem; color: var(--accent); line-height: 1; }
.price-from { font-size: 0.78rem; color: var(--text-medium); margin-top: 4px; }
.pricing-note { text-align: center; color: var(--text-medium); font-size: 0.82rem; font-style: italic; margin-top: 32px; line-height: 1.7; max-width: 700px; margin-left: auto; margin-right: auto; }

/* ===== CTA 2 ===== */
.cta2 { position: relative; padding: var(--section-py) 0; background-size: cover; background-position: center; }
.cta2-overlay { position: absolute; inset: 0; background: var(--dark); opacity: 0.88; }
.cta2 .container { position: relative; z-index: 1; }
.cta2-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 900px) { .cta2-split { grid-template-columns: 1fr; gap: 40px; } }
.cta2-content h2 { color: #fff; margin-bottom: 4px; }
.cta2-content .cta2-sub { color: var(--accent); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; margin-bottom: 28px; }
.cta2-features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cta2-feature { display: flex; align-items: flex-start; gap: 12px; }
.cta2-feature i { color: var(--accent); font-size: 1.1rem; margin-top: 3px; flex-shrink: 0; }
.cta2-feature h4 { color: #fff; font-size: 0.9rem; font-weight: 700; margin-bottom: 3px; }
.cta2-feature p { color: rgba(255,255,255,0.6); font-size: 0.84rem; margin: 0; }
@media (max-width: 600px) {
  .cta2-features { grid-template-columns: 1fr; gap: 16px; }
  .cta2-feature h4 { font-size: 0.98rem; }
  .cta2-feature p { font-size: 0.9rem; }
  .cta2-feature i { font-size: 1.2rem; width: 22px; text-align: center; }
  .cta2 .cta2-content { text-align: center; }
  .cta2 .cta2-content .btn-hero-call { width: 100%; justify-content: center; }
}

/* ===== FAQ ===== */
.faq-contact-bar { display: flex; gap: 32px; flex-wrap: wrap; margin-bottom: 48px; padding: 24px 32px; background: var(--light-bg); border-radius: var(--radius-lg); }
.faq-contact-item { display: flex; align-items: center; gap: 12px; }
.faq-contact-item i { color: var(--accent); font-size: 1.1rem; }
.faq-contact-item span { font-family: var(--font); font-weight: 600; font-size: 0.95rem; color: var(--primary); }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 32px; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-item { background: var(--light-bg); border-radius: var(--radius-lg); padding: 28px; border-left: 4px solid var(--primary); }
.faq-item h3 { color: var(--primary); font-size: 0.95rem; margin-bottom: 12px; }
.faq-item p { color: var(--text-medium); font-size: 0.88rem; line-height: 1.7; margin: 0; }
@media (max-width: 600px) {
  .faq-contact-bar { flex-direction: column; gap: 14px; padding: 18px 20px; margin-bottom: 32px; }
  .faq-item { padding: 20px; }
  .faq-item h3 { font-size: 1rem; }
  .faq-item p { font-size: 0.9rem; }
}

/* ===== SOCIAL PROOF ===== */
.social-proof { position: relative; text-align: center; padding: var(--section-py) 0; background-size: cover; background-position: center; }
.social-proof-overlay { position: absolute; inset: 0; background: var(--dark); opacity: 0.88; }
.social-proof .container { position: relative; z-index: 1; }
.social-proof h2 { color: #fff; margin-bottom: 10px; }
.social-proof .sp-sub { color: rgba(255,255,255,0.85); font-size: 1.1rem; margin-bottom: 8px; }
.book-now-label { display: inline-block; background: rgba(255,158,10,0.15); border: 1px solid rgba(255,158,10,0.4); color: var(--accent); font-size: 0.85rem; font-weight: 600; padding: 8px 20px; border-radius: 999px; margin-bottom: 32px; }

/* ===== AREAS ===== */
.areas-grid { columns: 6; column-gap: 12px; margin-top: 40px; }
@media (max-width: 1024px) { .areas-grid { columns: 4; } }
@media (max-width: 768px) { .areas-grid { columns: 3; } }
@media (max-width: 480px) { .areas-grid { columns: 2; } }
.area-item { font-size: 0.84rem; color: var(--text-medium); padding: 4px 0; break-inside: avoid; display: block; }
.area-item::before { content: '› '; color: var(--accent); font-weight: 700; }

/* ===== FOOTER ===== */
.site-footer { background: var(--dark); color: rgba(255,255,255,0.7); padding: 64px 0 0; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 48px; padding-bottom: 48px; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-logo-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.footer-logo-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex: 0 0 40px; }
.footer-logo-icon svg { width: 100%; height: 100%; display: block; }
.footer-logo-name { font-family: var(--font); font-weight: 800; font-size: 1.25rem; color: #fff; line-height: 1; letter-spacing: -0.03em; }
.footer-logo-name span { display: block; font-size: 0.5em; font-weight: 700; letter-spacing: 0.22em; color: var(--accent-bright); margin-top: 4px; }
.footer-brand p { font-size: 0.88rem; line-height: 1.75; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-social { display: flex; gap: 10px; margin-top: 20px; }
.footer-social a { width: 36px; height: 36px; background: rgba(255,255,255,0.08); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.6); transition: all 0.2s; font-size: 0.9rem; }
.footer-social a:hover { background: var(--accent); color: var(--on-accent); }
.footer-heading { font-family: var(--font); font-weight: 700; font-size: 0.95rem; color: #fff; margin-bottom: 20px; }
.footer-links { display: flex; flex-direction: column; gap: 10px; }
.footer-links a { color: rgba(255,255,255,0.55); font-size: 0.88rem; }
.footer-links a:hover { color: var(--accent); }
.footer-contact-item { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.footer-contact-item i { color: var(--accent); font-size: 0.9rem; margin-top: 3px; flex-shrink: 0; }
.footer-contact-item a, .footer-contact-item span { color: rgba(255,255,255,0.65); font-size: 0.88rem; line-height: 1.5; }
.footer-contact-item a:hover { color: var(--accent); }
.footer-note { font-size: 0.8rem; color: rgba(255,255,255,0.3); margin-top: 12px; line-height: 1.65; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding: 24px 0; text-align: center; font-size: 0.82rem; color: rgba(255,255,255,0.3); }

/* Footer — phone. Links were 21–25px tall, well under the 44px minimum for a
   reliable thumb tap, so every link gets a proper touch target and the columns
   pick up dividers to stay readable once they stack. */
@media (max-width: 600px) {
  .site-footer { padding-top: 48px; }
  .footer-grid { gap: 0; padding-bottom: 32px; }
  .footer-brand { padding-bottom: 26px; }
  .footer-brand p { max-width: none; }
  .footer-grid > div:not(.footer-brand) { border-top: 1px solid rgba(255,255,255,0.09); padding: 22px 0 6px; }
  .footer-heading { margin-bottom: 10px; }
  .footer-bottom { padding: 20px 0; line-height: 1.7; }
}

/* Touch targets apply to tablets too, not just phones — a finger is a finger
   at 768px. Layout stacking stays at 600px; only the hit areas grow here. */
@media (max-width: 900px) {
  .footer-links { gap: 0; }
  .footer-links a { min-height: 44px; display: flex; align-items: center; font-size: 0.92rem; }
  .footer-contact-item { align-items: center; margin-bottom: 4px; }
  .footer-contact-item i { margin-top: 0; }
  .footer-contact-item a, .footer-contact-item span { font-size: 0.92rem; }
  .footer-contact-item a { min-height: 44px; display: flex; align-items: center; }
  .footer-social { gap: 12px; margin-top: 18px; }
  .footer-social a { width: 46px; height: 46px; font-size: 1rem; }
}

/* Touch-target and legibility floor for phones across the whole site. */
@media (max-width: 900px) {
  .header-phone { min-height: 44px; }
  .nav-toggle { width: 46px; height: 46px; }
  .floating-bar { padding: 0 16px; }
  .floating-bar a { min-height: 52px; width: 100%; justify-content: center; }
  .logo-mark { min-height: 46px; }
  .section-label, .guarantee-label { font-size: 0.8rem; letter-spacing: 0.12em; }
  .testimonial-location, .price-from { font-size: 0.82rem; }
  .hero-badge { font-size: 0.82rem; }
}

/* ============================================================
   MULTI-PAGE COMPONENTS (v2)
   Nav dropdowns, inner-page heroes, breadcrumbs, prose layouts,
   service/area cards. Reuses the existing token set throughout.
   ============================================================ */

/* --- Header dropdowns --- */
.nav-item { position: relative; }
.nav-item > a { display: inline-flex; align-items: center; gap: 6px; }
.nav-item > a i { font-size: 0.62rem; opacity: 0.6; transition: transform 0.2s; }
.nav-item:hover > a i { transform: rotate(180deg); }
.header-nav a.is-active { color: var(--accent); }

/* --- Inner page hero --- */
.page-hero { background: var(--dark); color: #fff; padding: 132px 0 56px; text-align: center; position: relative; }
.page-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,11,15,0.35), transparent 60%); pointer-events: none; }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 3.6vw, 3rem); margin-bottom: 14px; }
.page-hero .section-label { color: var(--accent); }
.page-hero-sub { color: var(--on-dark); font-size: 1.05rem; max-width: 680px; margin: 0 auto 30px; line-height: 1.7; }
@media (max-width: 900px) { .page-hero { padding: 108px 0 44px; } .page-hero-sub { font-size: 0.98rem; } }
@media (max-width: 560px) { .page-hero .btn-hero-call { width: 100%; justify-content: center; } }

/* --- Breadcrumbs --- */
.breadcrumbs { background: var(--steel-50); border-bottom: 1px solid var(--border); padding: 13px 0; font-size: 0.82rem; }
.breadcrumbs .container { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--text-medium); }
.breadcrumbs a { color: var(--primary); font-weight: 600; }
.breadcrumbs a:hover { color: var(--accent); }
.breadcrumbs i { font-size: 0.58rem; opacity: 0.45; }
.breadcrumbs [aria-current] { color: var(--text-medium); }

/* --- Prose + aside --- */
.prose-split { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; }
.prose > h2 { color: var(--primary); font-size: 1.35rem; margin: 30px 0 12px; }
.prose > h2:first-child { margin-top: 0; }
.prose > p { color: var(--text-medium); line-height: 1.8; margin-bottom: 16px; }
.prose--wide { max-width: 820px; margin: 0 auto; }
.prose-aside img { width: 100%; border-radius: var(--radius-lg); margin-bottom: 20px; }
.aside-card { background: var(--steel-50); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; position: sticky; top: 100px; }
.aside-card p { color: var(--text-medium); font-size: 0.9rem; line-height: 1.65; margin-bottom: 16px; }
.aside-price { font-family: var(--font); font-size: 1rem; color: var(--text-medium); margin-bottom: 10px; }
.aside-price strong { font-size: 2.1rem; font-weight: 800; color: var(--accent); }
.aside-card--stats { display: flex; flex-direction: column; gap: 16px; }
.aside-stat { display: flex; flex-direction: column; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.aside-stat:last-of-type { border-bottom: none; padding-bottom: 4px; }
.aside-stat strong { font-size: 1.6rem; font-weight: 800; color: var(--accent); line-height: 1.1; }
.aside-stat span { font-size: 0.85rem; color: var(--text-medium); margin-top: 2px; }
@media (max-width: 1024px) { .prose-split { grid-template-columns: 1fr; gap: 36px; } .aside-card { position: static; } }

/* --- Inline CTA band --- */
.inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.inline-cta h2 { margin-bottom: 6px; }
.inline-cta p { margin: 0; }
@media (max-width: 768px) { .inline-cta { flex-direction: column; text-align: center; gap: 22px; } .inline-cta .btn-hero-call { width: 100%; justify-content: center; } }

/* --- Service cards (hub) --- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.svc-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 26px; box-shadow: var(--shadow); transition: all 0.25s; display: block; }
.svc-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.svc-card-icon { width: 60px; height: 60px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--on-accent); font-size: 1.4rem; margin-bottom: 18px; }
.svc-card h3 { color: var(--primary); font-size: 1.15rem; margin-bottom: 10px; }
.svc-card p { color: var(--text-medium); font-size: 0.9rem; line-height: 1.7; margin-bottom: 14px; }
.svc-card-price { font-weight: 700; color: var(--accent); font-size: 0.9rem; }
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .svc-grid { grid-template-columns: 1fr; } }

/* --- Related cards --- */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
.rel-card { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; font-family: var(--font); font-weight: 600; font-size: 0.92rem; color: var(--primary); transition: all 0.2s; }
.rel-card:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
.rel-card i { color: var(--accent); font-size: 1rem; }
.rel-card.is-plain { color: var(--text-medium); background: var(--steel-50); cursor: default; }
.rel-card.is-plain:hover { transform: none; box-shadow: none; border-color: var(--border); color: var(--text-medium); }
.area-inline { text-align: center; margin-top: 28px; color: var(--text-medium); font-size: 0.9rem; line-height: 1.9; }
.area-inline a { color: var(--primary); font-weight: 600; }
.area-inline a:hover { color: var(--accent); }

/* --- Area cards (hub) --- */
.area-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; }
.area-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; transition: all 0.2s; }
.area-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.area-card-name { font-family: var(--font); font-weight: 700; color: var(--primary); font-size: 1rem; }
.area-card-meta { font-size: 0.82rem; color: var(--text-medium); margin-top: 3px; }
.area-card:hover .area-card-name { color: var(--accent); }

/* --- About photo --- */
.about-photo { margin: 0 0 44px; border-radius: var(--radius-lg); overflow: hidden; border: 6px solid #fff; box-shadow: var(--shadow-lg); position: relative; }
.about-photo img { width: 100%; height: auto; display: block; aspect-ratio: 3/2; object-fit: cover; }
.about-photo figcaption { position: absolute; left: 0; bottom: 0; background: rgba(7,11,15,0.82); color: #fff; font-size: 0.82rem; font-weight: 600; padding: 12px 20px; border-top-right-radius: var(--radius); }
@media (max-width: 600px) { .about-photo { border-width: 4px; } .about-photo figcaption { font-size: 0.74rem; padding: 9px 13px; } }

/* --- Contact methods --- */
.contact-method { display: flex; align-items: flex-start; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--border); }
.contact-method:last-child { border-bottom: none; }
.contact-method i { color: var(--accent); font-size: 1.05rem; width: 22px; margin-top: 3px; }
.contact-method strong { display: block; color: var(--primary); font-size: 1rem; }
.contact-method span { display: block; color: var(--text-medium); font-size: 0.86rem; margin-top: 2px; }

/* --- Layout tweaks --- */
.footer-grid--5 { grid-template-columns: 1.7fr 1fr 1fr 1fr 1.2fr; }
@media (max-width: 1100px) { .footer-grid--5 { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 700px) { .footer-grid--5 { grid-template-columns: 1fr; } }
.pricing-grid--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1100px) { .pricing-grid--6 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .pricing-grid--6 { grid-template-columns: repeat(2, 1fr); } }

/* Hero headline is a real <h1> for SEO; the two lines are spans inside it.
   The h1 itself carries no sizing - the spans do. */
.hero-h1 { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.hero-h1-line1, .hero-h1-line2 { display: block; }

/* ============================================================
   HEADER DROPDOWN — refinement
   One compact dropdown (Services). It is styled to read as part of
   the header: same white, same shadow language, small pointer.
   Also: display:none until hover, so a stale cached stylesheet can
   never leave the panel expanded over the page.
   ============================================================ */
.nav-drop { display: none; }
.nav-item:hover .nav-drop,
.nav-item:focus-within .nav-drop { display: block; }

.nav-drop {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 236px; background: #fff;
  border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 14px 38px rgba(7,11,15,0.16);
  padding: 8px; z-index: 1200;
}
/* small pointer that ties the panel to the header bar */
.nav-drop::before {
  content: ''; position: absolute; top: -7px; left: 50%; margin-left: -7px;
  width: 12px; height: 12px; background: #fff;
  border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg); border-radius: 2px 0 0 0;
}
/* keeps hover alive while the cursor crosses the gap */
.nav-item::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }
.nav-drop a {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px; border-radius: 9px;
  font-size: 0.87rem; font-weight: 500; color: var(--text-dark); white-space: nowrap;
}
.nav-drop a:hover { background: var(--steel-50); color: var(--accent); }
.nav-drop a i { color: var(--accent); width: 15px; text-align: center; font-size: 0.82rem; }
.nav-drop-all {
  border-top: 1px solid var(--border); margin-top: 5px;
  padding-top: 11px !important; font-weight: 700 !important; color: var(--accent) !important;
  justify-content: center;
}
.nav-drop-all:hover { background: var(--accent-soft) !important; }
/* dropdowns are desktop-only; phones use the burger menu */
@media (max-width: 1024px) { .nav-drop, .nav-item::after { display: none !important; } }

/* Service-area zone headings. */
.area-zone-head { font-size: 1.35rem; font-weight: 800; color: var(--text-dark); margin: 34px 0 4px; }
.area-zone-head:first-of-type { margin-top: 8px; }
.area-zone-blurb { color: var(--text-medium); margin: 0 0 18px; max-width: 70ch; }

/* ---------------------------------------------------------------------------
   MOBILE TAP TARGETS
   Measured at 375px: six links in the situations block rendered 132x16, and
   the header phone link 42px wide. Anything a thumb has to hit needs ~44px in
   both directions; below that people miss it and blame the site, not the link.
   --------------------------------------------------------------------------- */
.testimonial-location a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
}
.header-phone { min-width: 44px; min-height: 44px; }
@media (max-width: 768px) {
  /* Footer and mobile-nav links sit close together; give each its own row. */
  .site-footer a, .mobile-nav a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Breadcrumb links are small by convention but are still tap targets.
   Measured at 375px: the Home crumb rendered 37x23. */
.breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }

/* ==== DIFFERENTIATION BLOCK (transform 17) — start ==== */
/* Everything here exists to make this site stop looking like its model.
   See websites-building-1000-differentiation-guide.md. Keep it in ONE block so
   the whole differentiation layer can be found, audited or reverted at once. */

/* The hero used to hold an overlapping photo card, so it carried extra bottom
   padding and a 100vh height to make room for it. With the card gone the next
   section (the callback form) sits directly underneath. */
@media (min-width: 901px) { .hero { min-height: min(86vh, 800px); } }
@media (max-width: 900px) { .hero .container { padding-bottom: 56px; } }
@media (max-width: 560px) { .hero .container { padding-bottom: 44px; } }

/* ---- Hooks band: persuasion, built around lock change ---- */
.hooks-head { max-width: 740px; margin: 0 auto 40px; text-align: center; }
.hooks-head h2 { color: #fff; font-size: clamp(1.7rem, 4.6vw, 2.5rem); line-height: 1.15; margin: 0 0 14px; text-wrap: balance; }
.hooks-head p { text-wrap: pretty; }
.hooks-head p { color: var(--on-dark); font-size: 1.05rem; line-height: 1.65; margin: 0; }
.hooks-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.hook-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,158,10,0.30); border-radius: var(--radius-lg); padding: 26px 22px; }
.hook-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; margin-bottom: 16px; }
.hook-card h3 { color: #fff; font-size: 1.2rem; line-height: 1.25; margin: 0 0 10px; }
.hook-card p { color: var(--on-dark); font-size: 1rem; line-height: 1.6; margin: 0; }
.hooks-honest { max-width: 640px; margin: 34px auto 0; text-align: center; color: var(--on-dark); font-size: 1.02rem; line-height: 1.65; }
.hooks-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; margin-top: 26px; }
.hooks-link { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; color: var(--accent); font-family: var(--font); font-weight: 600; }
.hooks-link:hover { color: #fff; }
.hooks-proof { list-style: none; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.hooks-proof li { display: inline-flex; align-items: center; gap: 9px; color: var(--on-dark); font-family: var(--font); font-weight: 600; font-size: 0.95rem; }
.hooks-proof i { color: var(--accent); }
@media (max-width: 1024px) { .hooks-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .hooks-grid { grid-template-columns: 1fr; gap: 14px; }
  .hooks-head { margin-bottom: 28px; }
  /* Compact on a phone: icon beside the title (saves ~60px a card) and the
     proof chips as a 2x2 grid. Uncompacted this band was ~1,900px tall - two
     and a half screens of persuasion before the next section. */
  .hook-card { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: center; padding: 20px 18px; }
  .hook-icon { width: 44px; height: 44px; margin: 0; font-size: 1.05rem; }
  .hook-card h3 { margin: 0; font-size: 1.12rem; }
  .hook-card p { grid-column: 1 / -1; margin-top: 12px; }
  .hooks-cta { flex-direction: column; }
  .hooks-cta .btn-hero-call { width: 100%; max-width: 420px; justify-content: center; }
  .hooks-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; padding-top: 20px; }
  .hooks-proof li { align-items: flex-start; font-size: 0.9rem; line-height: 1.35; }
  .hooks-proof i { margin-top: 3px; }
}

/* ---- Guarantee: the stamp is a triangle and sits on the right, tilted like a
   real stamp. On a phone the stamp stays first (it is the visual anchor). ---- */
@media (min-width: 901px) {
  .guarantee-split { grid-template-columns: 1fr 0.7fr; }
  .guarantee-img-col { order: 2; }
}
.guarantee-svg { transform: rotate(-6deg); filter: drop-shadow(0 12px 24px rgba(0,0,0,0.28)); }
.guarantee-text-col h2 { text-wrap: balance; }
/* ==== DIFFERENTIATION BLOCK (transform 17) — end ==== */

/* ==== PHOTOS BLOCK (transform 18) — start ==== */
/* Photographs. The old SVG brand panels stay UNDER each photo background, so a
   slow connection or a missing file shows the brand gradient, never a blank. */
.hero { background-image: url('legends-home-business-locksmith-images/fallbacks/legends-home-business-locksmith-hero-fallback.svg'); }
@media (max-width: 767px) {
  /* A portrait crop made for phones: about a third of the bytes of the desktop file. */
  .hero { background-image: url('legends-home-business-locksmith-images/fallbacks/legends-home-business-locksmith-hero-fallback.svg'); background-position: center; }
}
/* The proven scrim was tuned for a different photo and hid this one almost entirely.
   Lightened through the middle (where the headline sits) to a LIGHTEST alpha of 0.46,
   which transform 18 re-measures: white text must still clear 4.5:1 over the brightest
   5% of the picture. The top and bottom bands stay dark for the header and next section. */
.hero-overlay { background: radial-gradient(ellipse 78% 58% at 50% 46%, rgba(7,11,15,0.30) 0%, rgba(7,11,15,0.16) 58%, rgba(7,11,15,0) 100%),
  linear-gradient(180deg, rgba(7,11,15,0.86) 0%, rgba(7,11,15,0.60) 18%, rgba(7,11,15,0.48) 42%, rgba(7,11,15,0.46) 58%, rgba(7,11,15,0.66) 82%, rgba(7,11,15,0.90) 100%); }
/* Card pictures sit in a fixed 180px frame; the brand green shows for the instant before a photo paints. */
.service-card-img, .prose-aside img, .about-photo img, .about-image img { background-color: var(--steel-900); }
.prose-aside img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); display: block; }
/* ==== PHOTOS BLOCK (transform 18) — end ==== */


/* ===== STEEL + AMBER THEME (transform 08) ===== */
:root { --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif; --radius-btn: 6px; }
h1, h2, .hero-h1-line1, .hero-h1-line2, .section-title, .logo-name, .footer-logo-name, .cta-sub, .cta2-sub {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0; }
h1 { font-size: clamp(2.6rem, 5.8vw, 4.6rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.05; }
.hero-h1-line1, .hero-h1-line2 { font-size: clamp(2.5rem, 6.2vw, 4.8rem); line-height: 1.02; font-weight: 700; }
.cta-banner .cta-sub, .cta2-content .cta2-sub { font-weight: 700; }

/* dark header like the reference: steel bar, white wordmark, amber call button */
.site-header { background: var(--steel-900); box-shadow: 0 2px 16px rgba(0,0,0,0.35); }
.logo-name { color: #fff; font-weight: 700; font-size: 1.75rem; letter-spacing: 0.02em; }
.logo-name span, .footer-logo-name span { font-family: var(--font); font-size: 0.4em; font-weight: 700; letter-spacing: 0.17em; color: var(--accent-bright); margin-top: 5px; }
.footer-logo-name { font-size: 1.6rem; letter-spacing: 0.02em; }
.header-nav a { color: var(--steel-200); }
.header-nav a:hover, .header-nav a.is-active { color: var(--accent-bright); background: transparent; }
.nav-toggle { background: transparent; border-color: rgba(255,255,255,0.28); color: #fff; }
.nav-toggle:hover { background: rgba(255,255,255,0.08); }
.mobile-nav { background: var(--steel-900); border-top: 1px solid rgba(255,255,255,0.12); }
.mobile-nav a { color: #fff; border-bottom-color: rgba(255,255,255,0.12); }
.mobile-nav a:hover { color: var(--accent-bright); }
.mobile-nav .mobile-nav-call { color: var(--on-accent); }

/* 6px buttons, as on the reference (not pills) */
.btn-hero-call, .header-phone, .btn, .btn-pill-outline, .mobile-nav .mobile-nav-call, .floating-cta { border-radius: var(--radius-btn); }

/* the call band is a full amber bar with dark text and a dark button */
.cta-banner { background: var(--accent) !important; background-image: none !important; }
.cta-banner-overlay { display: none; }
.cta-banner h2, .cta-banner .cta-sub { color: var(--on-accent); }
.cta-banner .btn-hero-call { background: var(--steel-900); color: var(--accent-bright); box-shadow: none; }
.cta-banner .btn-hero-call:hover { background: var(--steel-800); }

/* amber text is only used on dark grounds; on light grounds labels use the deep amber (>= 4.5:1) */
.section-label { color: var(--accent-deep); }
.section--dark .section-label, .section--primary .section-label, .page-hero .section-label, .hero .section-label, .hooks-band .section-label { color: var(--accent-bright); }
@media (max-width: 480px) { .logo-name { font-size: 1.55rem; } .logo-name span { letter-spacing: 0.1em; font-size: 0.38em; white-space: nowrap; } }


/* map-pack additions (transform 09) */
.incl-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; margin: 0 0 30px; }
.incl-list li { position: relative; padding-left: 28px; color: var(--text-medium); font-weight: 500; }
.incl-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; top: 1px; color: var(--accent-deep); }
@media (max-width: 640px) { .incl-list { grid-template-columns: 1fr; } }
.hero-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; padding: 14px 10px; }
.hero-link:hover { color: var(--accent-bright); }
.map-embed { max-width: 960px; margin: 0 auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: var(--steel-100); }
.map-embed iframe { display: block; width: 100%; height: 420px; border: 0; }
@media (max-width: 640px) { .map-embed iframe { height: 320px; } }

.map-card { max-width: 720px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 24px; box-shadow: var(--shadow); }
.map-card i { font-size: 2.2rem; color: var(--accent-deep); margin-bottom: 10px; }
.map-card p { font-weight: 600; margin-bottom: 18px; }


/* wordmark logo (transform 10) */
.logo-plate, .footer-logo-plate { display: block; line-height: 0; }
.logo-plate svg { height: 54px; width: auto; display: block; }
.footer-logo-plate svg { height: 84px; width: auto; display: block; }
.footer-logo-mark { margin-bottom: 18px; }
@media (max-width: 480px) { .logo-plate svg { height: 44px; } }


/* reference-structure homepage (transform 11) */
.lk-hero { position: relative; background: var(--steel-900); color: #fff; padding: 128px 0 0; overflow: hidden; }
.lk-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 52% 62% at 94% 10%, rgba(255,158,10,0.22), transparent 62%), radial-gradient(ellipse 56% 62% at 0% 78%, rgba(255,158,10,0.28), transparent 64%); pointer-events: none; }
.lk-hero-grid { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 56px; align-items: center; padding-bottom: 68px; }
.lk-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-bright); margin-bottom: 18px; }
.lk-eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.lk-hero h1 { font-size: clamp(2.7rem, 5.6vw, 4.8rem); line-height: 1.0; color: #fff; margin-bottom: 20px; }
.lk-hero h1 .lk-amber { color: var(--accent-bright); display: block; }
.lk-lead { color: var(--steel-200); font-size: 1.08rem; max-width: 580px; margin-bottom: 28px; }
.lk-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 26px; }
.lk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border-radius: 6px; font-weight: 700; font-size: 1rem; min-height: 52px; }
.lk-btn--amber { background: var(--accent); color: var(--on-accent); }
.lk-btn--amber:hover { background: var(--accent-hover); }
.lk-btn--ghost { border: 1px solid rgba(255,255,255,0.3); color: #fff; }
.lk-btn--ghost:hover { border-color: var(--accent-bright); color: var(--accent-bright); }
.lk-btn--dark { background: var(--steel-900); color: var(--accent-bright); text-transform: uppercase; letter-spacing: 0.04em; }
.lk-btn--dark:hover { background: var(--steel-800); }
.lk-ticks { display: flex; flex-wrap: wrap; gap: 12px 26px; color: var(--steel-300); font-size: 0.9rem; }
.lk-ticks i { color: var(--accent-bright); margin-right: 8px; }
.lk-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.13); border-radius: 14px; padding: 28px; color: #fff; }
.lk-card h2 { font-size: 1.7rem; color: #fff; margin-bottom: 6px; }
.lk-sub { color: var(--steel-300); font-size: 0.9rem; margin-bottom: 18px; }
.lk-field { margin-bottom: 14px; }
.lk-field label { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-300); font-weight: 600; margin-bottom: 6px; }
.lk-field input, .lk-field select, .lk-field textarea { width: 100%; background: rgba(0,0,0,0.38); border: 1px solid rgba(255,255,255,0.16); border-radius: 8px; padding: 13px 14px; color: #fff; font: inherit; font-size: 0.95rem; }
.lk-field select option { color: #111; }
.lk-field textarea { min-height: 112px; resize: vertical; }
.lk-field input::placeholder, .lk-field textarea::placeholder { color: var(--steel-300); opacity: 0.7; }
.lk-field input:focus, .lk-field select:focus, .lk-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,158,10,0.28); }
.lk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lk-submit { width: 100%; background: var(--accent); color: var(--on-accent); border: 0; border-radius: 8px; padding: 15px; font-weight: 700; font-size: 1rem; cursor: pointer; font-family: var(--font); min-height: 52px; }
.lk-submit:hover { background: var(--accent-hover); }
.lk-note { text-align: center; color: var(--steel-300); font-size: 0.82rem; margin: 12px 0 0; }
.lk-strip { position: relative; border-top: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.38); }
.lk-strip ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 18px 0; color: var(--steel-300); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }

.lk-stats { background: #fff; padding: 34px 0; }
.lk-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.lk-stat { padding: 30px 12px; text-align: center; border-right: 1px solid var(--border); }
.lk-stat:last-child { border-right: 0; }
.lk-stat strong { display: block; font-family: var(--font-display); font-size: 2.7rem; line-height: 1; color: var(--steel-900); }
.lk-stat span { display: block; margin-top: 8px; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-400); font-weight: 600; }

.lk-section { padding: 88px 0; background: #fff; }
.lk-light { background: var(--steel-50); }
.lk-dark { background-color: var(--steel-900); background-image: radial-gradient(ellipse 46% 56% at 0% 100%, rgba(255,158,10,0.15), transparent 62%), radial-gradient(ellipse 40% 50% at 100% 0%, rgba(255,158,10,0.10), transparent 62%); color: #fff; }
.lk-dark h2 { color: #fff; }
.lk-head { text-align: center; max-width: 780px; margin: 0 auto 46px; }
.lk-head p { color: var(--text-medium); margin-top: 12px; }
.lk-head p a { color: var(--accent-deep); font-weight: 600; text-decoration: underline; }
.lk-dark .lk-head p { color: var(--steel-300); }
.lk-dark .section-label { color: var(--accent-bright); }
.lk-body { color: var(--text-medium); margin: 14px 0 0; }

.lk-ico { width: 48px; height: 48px; border-radius: 8px; background: var(--steel-900); color: var(--accent-bright); display: grid; place-items: center; font-size: 1.15rem; margin-bottom: 18px; flex: 0 0 auto; }
.lk-ico--soft { background: var(--amber-50); color: var(--amber-600); border: 1px solid var(--amber-100); }
.lk-ico--amber { background: var(--accent); color: var(--on-accent); }
.lk-ico--dark { background: var(--steel-900); color: var(--accent-bright); margin-bottom: 0; }

.lk-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lk-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.lk-svc { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 26px; display: flex; flex-direction: column; transition: box-shadow 0.2s, border-color 0.2s; }
.lk-svc:hover { box-shadow: var(--shadow-md); border-color: var(--amber-300); }
.lk-svc h3 { text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.04em; margin-bottom: 8px; color: var(--steel-900); }
.lk-svc > p { color: var(--text-medium); font-size: 0.92rem; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.lk-svc ul { margin-bottom: 18px; }
.lk-svc li { position: relative; padding-left: 16px; font-size: 0.88rem; color: var(--text-medium); margin-bottom: 7px; }
.lk-svc li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.lk-more { margin-top: auto; font-weight: 700; font-size: 0.88rem; color: var(--accent-deep); }

.lk-why { display: grid; grid-template-columns: 0.9fr 1.6fr; gap: 44px; align-items: start; }
.lk-why h2 { margin-top: 4px; }
.lk-promise { background: var(--steel-50); border: 1px solid var(--border); border-radius: 10px; padding: 20px 22px; margin-top: 24px; }
.lk-promise h3 { text-transform: uppercase; font-size: 0.78rem; letter-spacing: 0.14em; margin-bottom: 8px; }
.lk-promise p { font-size: 0.92rem; color: var(--text-medium); }
.lk-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.lk-mini { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 22px; }
.lk-mini h3 { text-transform: uppercase; font-size: 0.88rem; letter-spacing: 0.04em; margin-bottom: 6px; color: var(--steel-900); }
.lk-mini p { font-size: 0.9rem; color: var(--text-medium); }

.lk-step { position: relative; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.11); border-radius: 12px; padding: 24px; }
.lk-num { position: absolute; right: 18px; top: 10px; font-family: var(--font-display); font-size: 2.6rem; color: rgba(255,255,255,0.13); line-height: 1; }
.lk-step h3 { color: #fff; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.04em; margin-bottom: 8px; }
.lk-step p { color: var(--steel-300); font-size: 0.9rem; }

.lk-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.lk-chip { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; font-weight: 500; color: var(--steel-800); font-size: 0.95rem; }
.lk-chip i { color: var(--amber-600); margin-right: 10px; }
.lk-chip:hover { border-color: var(--amber-300); box-shadow: var(--shadow); }
.lk-callbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--steel-900); color: #fff; border-radius: 12px; padding: 18px 22px; margin-top: 26px; }
.lk-callbar p { margin: 0; color: var(--steel-200); }
.lk-callbar strong { color: #fff; }

.lk-faq { max-width: 800px; margin: 0 auto; }
.lk-faq details { background: #fff; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; }
.lk-faq summary { cursor: pointer; list-style: none; padding: 18px 20px; font-family: var(--font-display); text-transform: uppercase; font-size: 1.1rem; font-weight: 700; color: var(--steel-900); display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.lk-faq summary::-webkit-details-marker { display: none; }
.lk-faq summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--accent-deep); font-size: 0.8rem; flex: 0 0 auto; }
.lk-faq details[open] { border-color: var(--amber-300); background: var(--steel-50); }
.lk-faq details[open] summary::after { content: "\f077"; }
.lk-faq details p { padding: 0 20px 18px; color: var(--text-medium); margin: 0; }

.lk-cta { background: var(--accent); padding: 30px 0; }
.lk-cta-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.lk-cta-text { display: flex; align-items: center; gap: 18px; }
.lk-cta h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--on-accent); margin: 0; }
.lk-cta p { color: var(--steel-800); margin: 2px 0 0; font-weight: 500; }

.lk-contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 26px; align-items: start; }
.lk-info { display: flex; gap: 16px; align-items: center; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.11); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
.lk-info .lk-ico { margin-bottom: 0; }
.lk-info small { display: block; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--steel-300); font-weight: 600; margin-bottom: 2px; }
.lk-info strong { display: block; color: #fff; font-size: 1.05rem; }
.lk-info strong a { color: #fff; }
.lk-info span { display: block; font-size: 0.84rem; color: var(--steel-300); }
.lk-info--hours { align-items: flex-start; }
.lk-hours { flex: 1; }
.lk-hours div { display: flex; justify-content: space-between; gap: 12px; font-size: 0.9rem; color: var(--steel-200); padding: 3px 0; }
.lk-hours b { color: #fff; font-weight: 600; }

@media (max-width: 980px) {
  .lk-hero-grid, .lk-why, .lk-contact { grid-template-columns: 1fr; gap: 36px; }
  .lk-grid3 { grid-template-columns: 1fr 1fr; }
  .lk-grid4 { grid-template-columns: 1fr 1fr; }
  .lk-chips { grid-template-columns: 1fr 1fr; }
  .lk-stats-grid { grid-template-columns: 1fr 1fr; }
  .lk-stat:nth-child(2) { border-right: 0; }
  .lk-stat:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
@media (max-width: 640px) {
  .lk-hero { padding-top: 104px; }
  .lk-section { padding: 60px 0; }
  .lk-grid3, .lk-grid4, .lk-why-grid, .lk-chips, .lk-two { grid-template-columns: 1fr; }
  .lk-btn { width: 100%; }
  .lk-strip ul { justify-content: flex-start; font-size: 0.7rem; }
  .lk-card { padding: 22px 18px; }
  .lk-stat strong { font-size: 2.1rem; }
  .lk-cta-text { align-items: flex-start; }
}


/* ===== CONTACT PAGE v2 (phone-first, chip form) ===== */
.cx-phone { padding: 56px 0; }
.cx-phone-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; }
.cx-live { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--steel-200); }
.cx-live i { color: #3ddc84; font-size: 0.6rem; animation: pulse-dot 2s infinite; }
.cx-number { display: block; margin: 10px 0 12px; font-family: 'Barlow Condensed', var(--font); font-weight: 700; font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1; color: var(--accent); letter-spacing: 0.02em; }
.cx-number:hover { color: var(--accent-bright); }
.cx-phone-sub { color: var(--steel-200); max-width: 520px; margin: 0; }
.cx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cx-steps li { display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius); padding: 16px 18px; }
.cx-steps b { flex: 0 0 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-family: var(--font); font-weight: 800; }
.cx-steps strong { display: block; color: #fff; font-family: var(--font); }
.cx-steps span { color: var(--steel-300); font-size: 0.9rem; }
.cx-form-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 48px; align-items: start; }
.cx-form-grid > * { min-width: 0; }
.cx-form { background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow); }
.cx-form h2 { margin-bottom: 6px; }
.cx-form .subtitle { color: var(--text-medium); margin-bottom: 22px; }
.cx-fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.cx-fieldset legend { font-family: var(--font); font-weight: 700; font-size: 0.85rem; color: var(--text-dark); margin-bottom: 10px; padding: 0; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cx-chips label { cursor: pointer; }
.cx-chips input { position: absolute; opacity: 0; pointer-events: none; }
.cx-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); font-family: var(--font); font-weight: 600; font-size: 0.88rem; color: var(--text-dark); background: #fff; transition: all 0.15s; }
.cx-chips label:hover span { border-color: var(--accent); }
.cx-chips input:checked + span { background: var(--dark); border-color: var(--dark); color: #fff; }
.cx-chips input:checked + span i { color: var(--accent); }
.cx-chips input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.cx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cx-row .form-group { min-width: 0; }
.form-group small { font-weight: 400; color: var(--text-muted); }
.cx-aside { position: sticky; top: 96px; background: var(--light-bg); border-radius: var(--radius-lg); padding: 28px; }
.cx-aside h3 { font-size: 1.05rem; margin-bottom: 14px; display: flex; gap: 10px; align-items: center; }
.cx-aside h3 i { color: var(--accent); }
.cx-aside ul { margin: 0 0 22px; padding-left: 18px; color: var(--text-medium); display: grid; gap: 10px; }
.cx-facts { display: grid; gap: 12px; border-top: 1px solid var(--border-strong); padding-top: 18px; font-size: 0.9rem; color: var(--text-dark); }
.cx-facts div { display: flex; gap: 12px; align-items: flex-start; }
.cx-facts i { color: var(--accent); margin-top: 3px; width: 16px; }
@media (max-width: 900px) {
  .cx-phone-grid, .cx-form-grid { grid-template-columns: 1fr; gap: 32px; }
  .cx-aside { position: static; }
}
@media (max-width: 600px) {
  .cx-form { padding: 24px 18px; }
  .cx-row { grid-template-columns: 1fr; gap: 0; }
  .cx-chips span { padding: 9px 14px; font-size: 0.85rem; }
}