/* ============================================================
   LOCKSMITH ONE — Stylesheet v1.0
   Brand: Deep Navy #1B3A6B + Vivid Orange #F97316
   Full tonal palette — navy 50-900, orange 50-800
   Font: Poppins (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: 'Poppins', sans-serif; color: #1B3A6B; 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 {
  /* --- Navy scale (brand primary) --- */
  --navy-50:  #F2F6FC;
  --navy-100: #E4EBF6;
  --navy-200: #C6D4E8;
  --navy-300: #97AECE;
  --navy-400: #5C7CAC;
  --navy-500: #2C5290;
  --navy-600: #1B3A6B;
  --navy-700: #16305A;
  --navy-800: #112852;
  --navy-900: #0D1B2A;

  /* --- Orange scale (brand accent) --- */
  --orange-50:  #FFF6ED;
  --orange-100: #FFE9D5;
  --orange-200: #FED0A8;
  --orange-300: #FDB273;
  --orange-400: #FB923C;
  --orange-500: #F97316;
  --orange-600: #EA6C0A;
  --orange-700: #C2540B;
  --orange-800: #9A400C;

  /* --- Semantic roles --- */
  --primary: var(--navy-600);
  --primary-dark: var(--navy-800);
  --primary-soft: var(--navy-100);
  --accent: var(--orange-500);
  --accent-hover: var(--orange-600);
  --accent-soft: var(--orange-50);
  --dark: var(--navy-900);
  --white: #ffffff;
  --light-bg: #F7F9FC;
  --text-dark: var(--navy-600);
  --text-medium: #5a6f8a;
  --text-muted: var(--navy-400);
  --border: #DDE3ED;
  --border-strong: var(--navy-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(27,58,107,0.08);
  --shadow-md: 0 6px 32px rgba(27,58,107,0.12);
  --shadow-lg: 0 12px 48px rgba(27,58,107,0.18);
  --shadow-accent: 0 8px 24px rgba(249,115,22,0.38);
  --shadow-accent-lg: 0 10px 32px rgba(249,115,22,0.5);

  /* --- Geometry & type --- */
  --radius: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --container: 1200px;
  --section-py: 80px;
  --font: 'Poppins', sans-serif;
  --focus-ring: 0 0 0 3px rgba(249,115,22,0.45);
}
@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: #fff; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(249,115,22,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: #fff; border-radius: 999px; padding: 18px 48px; font-family: var(--font); font-weight: 700; font-size: 1.05rem; box-shadow: 0 6px 24px rgba(249,115,22,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(249,115,22,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(27,58,107,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; background: var(--primary); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.3rem; transform: rotate(-45deg); }
.logo-icon i { transform: rotate(45deg); }
.logo-name { font-family: var(--font); font-weight: 800; font-size: 1.4rem; color: var(--primary); letter-spacing: -0.02em; line-height: 1; }
.logo-name span { color: var(--accent); }
.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(249,115,22,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: #fff; 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(--navy-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(--navy-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: #fff; 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: #fff; }

@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; font-size: 1.1rem; }
  .logo-name { font-size: 1.18rem; }
  .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: #fff; 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(249,115,22,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('locksmith-one-images/hero-bg.jpg'); background-size: cover; background-position: center top; overflow: hidden; }
@media (max-width: 767px) { .hero { background-image: url('locksmith-one-images/hero-mobile-bg.webp'); background-position: center; } }
.hero-overlay { position: absolute; inset: 0; background: #0D1B2A; opacity: 0.82; z-index: 0; }
/* 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; }
.hero-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-family: var(--font); font-weight: 600; font-size: 0.9rem; margin-bottom: 20px; letter-spacing: 0.01em; }
.hero-h1-line1 { font-family: var(--font); font-size: clamp(2rem, 4.5vw, 3.7rem); font-weight: 700; color: #fff; line-height: 1.15; }
.hero-h1-line2 { font-family: var(--font); font-size: clamp(2rem, 4.5vw, 3.8rem); font-weight: 800; color: var(--accent); line-height: 1.15; margin-bottom: 20px; }
/* 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(13,27,42,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: 3 / 2; 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(13,27,42,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(--navy-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(13,27,42,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: 3 / 2; }
  .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: #fff; }
.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: #fff; 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(249,115,22,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(27,58,107,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(249,115,22,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: #fff; }
.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(27,58,107,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(27,58,107,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(249,115,22,0.15); border: 1px solid rgba(249,115,22,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: 38px; height: 38px; background: var(--accent); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.1rem; transform: rotate(-45deg); }
.footer-logo-icon i { transform: rotate(45deg); }
.footer-logo-name { font-family: var(--font); font-weight: 800; font-size: 1.3rem; color: #fff; }
.footer-logo-name span { color: var(--accent); }
.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: #fff; }
.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(27,58,107,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(--navy-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(--navy-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: #fff; 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(--navy-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(13,27,42,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(27,58,107,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(--navy-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; } }