/*
Theme Name:  Salon Happy Hair v2
Theme URI:   https://salonhappyhair.de
Description: UI/UX Pro Max — Liquid Glass · Playfair Display/Inter · Pink/Lavender Luxury
Version:     2.0.0
Author:      WP-Flash / Shamas | SerpZenith
License:     GPL-2.0+
Text Domain: shh2
*/

/* ═══════════════════════════════════════════════════════
   GOOGLE FONTS
═══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ═══════════════════════════════════════════════════════
   DESIGN TOKENS — UI/UX Pro Max · Liquid Glass
   Palette: Soft Pink + Lavender Luxury (#EC4899 / #8B5CF6)
═══════════════════════════════════════════════════════ */
:root {
  /* Core palette */
  --color-primary:     #EC4899;
  --color-on-primary:  #FFFFFF;
  --color-secondary:   #F9A8D4;
  --color-accent:      #8B5CF6;
  --color-background:  #FDF2F8;
  --color-foreground:  #831843;
  --color-muted:       #F1EEF5;
  --color-border:      #FBCFE8;
  --color-ring:        #EC4899;
  --color-destructive: #DC2626;

  /* Extended tokens */
  --color-surface:       #FFFFFF;
  --color-text:          #1E1B2E;
  --color-text-muted:    #7C6B7E;
  --color-dark-bg:       #1E1B2E;
  --color-dark-surface:  #2D2940;
  --color-dark-text:     rgba(255,255,255,0.88);
  --color-dark-muted:    rgba(255,255,255,0.55);
  --color-gold:          #C9A96E;
  --color-star:          #F59E0B;

  /* Gradients */
  --gradient-brand:  linear-gradient(135deg,#EC4899 0%,#8B5CF6 100%);
  --gradient-soft:   linear-gradient(135deg,#FDF2F8 0%,#F1EEF5 100%);
  --gradient-subtle: linear-gradient(135deg,rgba(236,72,153,.06) 0%,rgba(139,92,246,.04) 100%);

  /* Glass */
  --glass-bg:     rgba(255,255,255,0.72);
  --glass-border: rgba(251,207,232,0.60);
  --glass-blur:   blur(16px);
  --glass-shadow: 0 4px 24px rgba(236,72,153,.10), 0 1px 6px rgba(139,92,246,.06);

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;
  --sp-4: 16px;  --sp-6: 24px;  --sp-8: 32px;
  --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-20: 80px; --sp-24: 96px;

  /* Radii */
  --r-sm:   8px;   --r-md:   12px;
  --r-lg:   20px;  --r-xl:   32px;
  --r-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 8px rgba(236,72,153,.08), 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 20px rgba(236,72,153,.12), 0 2px 6px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 40px rgba(236,72,153,.16), 0 4px 12px rgba(139,92,246,.08);
  --shadow-xl: 0 16px 64px rgba(236,72,153,.18), 0 8px 24px rgba(139,92,246,.10);

  /* Transitions */
  --t-fast:   150ms ease;
  --t-base:   220ms cubic-bezier(.4,0,.2,1);
  --t-smooth: 350ms cubic-bezier(.4,0,.2,1);
  --t-glass:  500ms cubic-bezier(.4,0,.2,1);

  /* Layout */
  --container:    1200px;
  --nav-h:        80px;
  --topbar-h:     40px;
  --section-py:   96px;
}

/* ═══════════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width:100%; height:auto; display:block; }
a   { color:inherit; text-decoration:none; transition:color var(--t-base); }
ul,ol { list-style:none; }
button { font-family:var(--font-body); cursor:pointer; border:none; background:none; }

/* SVG — max 24px enforced, no exceptions */
svg {
  width: 24px;
  height: 24px;
  max-width: 24px;
  flex-shrink: 0;
}

/* Focus */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Skip link */
.skip-link {
  position:absolute; top:-120%; left:0;
  padding:12px 24px; background:var(--color-primary); color:#fff;
  font-weight:600; z-index:99999; border-radius:0 0 var(--r-md) 0;
  transition: top var(--t-fast);
}
.skip-link:focus { top:0; }

/* ═══════════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem,5vw,4rem); }
h2 { font-size: clamp(1.875rem,3.5vw,3rem); }
h3 { font-size: clamp(1.25rem,2vw,1.75rem); }
h4 { font-size: clamp(1.0625rem,1.5vw,1.25rem); }

p { line-height:1.75; color:var(--color-text-muted); }

.text-lead { font-size:clamp(1rem,1.5vw,1.2rem); color:var(--color-text-muted); }
.text-sm   { font-size:0.875rem; }
.text-xs   { font-size:0.8125rem; }

.kicker {
  display:block;
  font-family:var(--font-body);
  font-size:0.75rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--color-primary);
}

/* ═══════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════ */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section     { padding: var(--section-py) 0; }
.section-sm  { padding: 56px 0; }
.section-dark { background: var(--color-dark-bg); }
.section-soft { background: var(--gradient-soft); }
.section-white { background: var(--color-surface); }

/* ═══════════════════════════════════════════════════════
   BUTTONS
═══════════════════════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 28px;
  font-family:var(--font-body); font-size:0.9375rem; font-weight:600;
  border-radius:var(--r-full); border:2px solid transparent;
  cursor:pointer; transition:all var(--t-base);
  white-space:nowrap; text-decoration:none;
  min-height:48px; min-width:44px;
  touch-action:manipulation;
}
.btn svg { width:18px; height:18px; max-width:18px; }

.btn-primary {
  background:var(--color-primary); color:#fff;
  border-color:var(--color-primary); box-shadow:var(--shadow-md);
}
.btn-primary:hover {
  background:var(--color-foreground); border-color:var(--color-foreground);
  box-shadow:var(--shadow-lg); transform:translateY(-2px); color:#fff;
}

.btn-outline {
  background:transparent; color:var(--color-foreground);
  border-color:var(--color-border);
}
.btn-outline:hover {
  background:var(--color-muted); border-color:var(--color-primary);
  color:var(--color-primary); transform:translateY(-1px);
}

.btn-glass {
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border-color:var(--glass-border); color:var(--color-foreground);
}
.btn-glass:hover {
  background:rgba(255,255,255,.92); box-shadow:var(--shadow-lg);
  transform:translateY(-2px);
}

.btn-white {
  background:#fff; color:var(--color-foreground);
  border-color:transparent;
}
.btn-white:hover {
  background:var(--color-muted); transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,.14);
}

.btn-ghost-white {
  background:rgba(255,255,255,.15); color:#fff;
  border-color:rgba(255,255,255,.40);
}
.btn-ghost-white:hover {
  background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.65);
  color:#fff;
}

.btn-lg { padding:18px 36px; font-size:1rem; }
.btn-sm { padding:10px 20px; font-size:0.875rem; min-height:40px; }
.btn-full { width:100%; justify-content:center; }

/* ═══════════════════════════════════════════════════════
   BADGE / PILL
═══════════════════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 16px;
  font-size:0.8125rem; font-weight:600; letter-spacing:.06em;
  border-radius:var(--r-full);
  background:rgba(236,72,153,.09);
  border:1px solid rgba(236,72,153,.22);
  color:var(--color-foreground);
}
.badge svg { width:14px; height:14px; max-width:14px; }

/* ═══════════════════════════════════════════════════════
   TOP BAR
═══════════════════════════════════════════════════════ */
.top-bar {
  background: var(--color-foreground);
  color: rgba(255,255,255,.85);
  font-size: 0.8125rem;
  height: var(--topbar-h);
  display: flex; align-items: center;
  position: relative; z-index: 10000;
}
.top-bar .container {
  display: flex; align-items: center;
  justify-content: space-between; gap:16px;
}
.top-bar-items {
  display: flex; align-items: center; gap:20px;
}
.top-bar-item {
  display: flex; align-items: center; gap:6px;
  transition: color var(--t-fast); cursor:pointer;
}
.top-bar-item:hover { color:var(--color-secondary); }
.top-bar-item svg  { width:13px; height:13px; max-width:13px; opacity:.70; }

/* ═══════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

.nav-wrap {
  background: rgba(253,242,248,.88);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  transition: all var(--t-smooth);
}

.site-header.scrolled .nav-wrap {
  background: rgba(255,255,255,.97);
  box-shadow: var(--shadow-md);
  border-bottom-color: var(--color-border);
}

.nav-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: var(--nav-h);
  gap: 32px;
}

/* Logo */
.site-logo {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-foreground);
  line-height: 1;
  cursor: pointer;
  transition: opacity var(--t-fast);
  white-space: nowrap;
}
.site-logo:hover { opacity:.80; }
.site-logo .logo-accent { color:var(--color-primary); }

/* Desktop nav links */
.nav-links {
  display: flex; align-items: center;
  justify-content: center; gap:2px;
}
.nav-links > li { position:relative; }

.nav-links > li > a {
  display: flex; align-items:center; gap:4px;
  padding: 10px 14px;
  font-size: 0.9375rem; font-weight:500;
  color: var(--color-text);
  border-radius: var(--r-sm);
  transition: all var(--t-base);
  cursor: pointer; min-height:44px;
}
.nav-links > li > a:hover,
.nav-links > li.current > a {
  color: var(--color-primary);
  background: rgba(236,72,153,.07);
}

/* Chevron on items with dropdown */
.nav-links > li > a .nav-chevron {
  width:15px; height:15px; max-width:15px;
  transition: transform var(--t-base);
  opacity:.60;
}
.nav-links > li.is-open > a .nav-chevron { transform:rotate(180deg); }

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%; transform: translateX(-50%) translateY(4px);
  min-width: 200px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  visibility: hidden; opacity:0;
  transition: all var(--t-smooth);
  pointer-events: none;
}
.nav-links > li:hover .nav-dropdown,
.nav-links > li.is-open .nav-dropdown {
  visibility:visible; opacity:1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.nav-dropdown a {
  display:block; padding:10px 16px;
  font-size:.9rem; font-weight:400;
  color:var(--color-text);
  border-radius:var(--r-sm);
  transition:all var(--t-base);
  cursor:pointer;
}
.nav-dropdown a:hover {
  background:rgba(236,72,153,.08);
  color:var(--color-primary);
}

/* Nav CTA area */
.nav-cta { display:flex; align-items:center; gap:12px; }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; justify-content:center;
  gap:5px; width:44px; height:44px; padding:10px;
  cursor:pointer; border-radius:var(--r-sm);
  transition:background var(--t-fast);
  touch-action:manipulation;
}
.hamburger:hover { background:var(--color-muted); }
.hamburger span {
  display:block; width:22px; height:2px;
  background:var(--color-text); border-radius:2px;
  transition:all var(--t-base);
}
.hamburger.is-active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.is-active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile nav overlay */
.mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  top: calc(var(--topbar-h) + var(--nav-h));
  background: rgba(253,242,248,.98);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: 24px 16px;
  overflow-y: auto;
  z-index: 9998;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity var(--t-smooth), transform var(--t-smooth);
  pointer-events: none;
}
.mobile-nav.is-open {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-nav-links { display:flex; flex-direction:column; gap:4px; }

.mobile-nav-links a {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px;
  font-size:1rem; font-weight:500;
  color:var(--color-text);
  border-radius:var(--r-md);
  transition:all var(--t-fast);
  min-height:52px; cursor:pointer;
  touch-action:manipulation;
}
.mobile-nav-links a:hover {
  background:rgba(236,72,153,.09);
  color:var(--color-primary);
}
.mobile-nav-links svg { width:20px; height:20px; max-width:20px; color:var(--color-primary); }

.mobile-nav-divider {
  height:1px; background:var(--color-border);
  margin:16px 0;
}

.mobile-nav-cta { display:flex; flex-direction:column; gap:12px; }
.mobile-nav-cta .btn { justify-content:center; }

/* ═══════════════════════════════════════════════════════
   HERO SECTION
═══════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 55fr 45fr;
  align-items: center;
  background: var(--gradient-soft);
  position: relative;
  overflow: hidden;
}

/* Radial glow decorations — no SVG, pure CSS */
.hero::before {
  content:'';
  position:absolute; top:-240px; right:-80px;
  width:640px; height:640px;
  background:radial-gradient(circle,rgba(236,72,153,.13) 0%,transparent 68%);
  pointer-events:none;
}
.hero::after {
  content:'';
  position:absolute; bottom:-160px; left:-60px;
  width:520px; height:520px;
  background:radial-gradient(circle,rgba(139,92,246,.09) 0%,transparent 68%);
  pointer-events:none;
}

.hero-content {
  padding: 100px 48px 100px 0;
  position: relative; z-index:1;
}

.hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 20px;
  background:rgba(236,72,153,.10);
  border:1px solid rgba(236,72,153,.26);
  border-radius:var(--r-full);
  font-size:.8125rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--color-foreground);
  margin-bottom:28px;
}
.hero-badge svg { width:14px; height:14px; max-width:14px; color:var(--color-primary); }

.hero h1 {
  color:var(--color-text);
  margin-bottom:24px;
  letter-spacing:-.025em;
}
.hero h1 .accent {
  color:var(--color-primary);
  display:block;
  font-style:italic;
}

.hero-subtitle {
  font-size:clamp(1rem,1.5vw,1.175rem);
  line-height:1.75;
  color:var(--color-text-muted);
  margin-bottom:40px;
  max-width:480px;
}

.hero-ctas {
  display:flex; gap:12px; flex-wrap:wrap;
  margin-bottom:52px;
}

/* Trust badges */
.hero-trust { display:flex; gap:28px; flex-wrap:wrap; }
.trust-item { display:flex; align-items:center; gap:8px; }
.trust-item svg { width:18px; height:18px; max-width:18px; color:var(--color-primary); }
.trust-item span { font-size:.875rem; font-weight:500; color:var(--color-text-muted); }

/* Hero image side */
.hero-image {
  height: 100vh;
  display: flex; align-items:center; justify-content:center;
  padding: 40px 0 40px 24px;
  position: relative;
}

.hero-img-wrap {
  position: relative;
  width: 100%; max-width: 460px;
}

.hero-img-container {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-xl);
}
.hero-img-container img {
  width:100%; height:680px;
  object-fit:cover; display:block;
}

/* Floating review pill */
.hero-pill {
  position:absolute; bottom:28px; left:50%;
  transform:translateX(-50%);
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-full);
  padding:10px 20px;
  display:flex; align-items:center; gap:10px;
  white-space:nowrap; box-shadow:var(--shadow-md);
}
.hero-pill-stars { display:flex; gap:2px; }
.hero-pill-stars svg {
  width:14px; height:14px; max-width:14px;
  color:var(--color-star); fill:var(--color-star);
}
.hero-pill span { font-size:.8125rem; font-weight:600; color:var(--color-text); }

/* ═══════════════════════════════════════════════════════
   STATS BAR
═══════════════════════════════════════════════════════ */
.stats-bar { background:var(--color-dark-bg); padding:64px 0; }

.stats-grid {
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}

.stat-item {
  text-align:center; padding:28px 24px;
  border-right:1px solid rgba(255,255,255,.07);
}
.stat-item:last-child { border-right:none; }

.stat-number {
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2rem,3.5vw,3rem);
  font-weight:700; line-height:1;
  color:var(--color-secondary);
  margin-bottom:8px;
}
.stat-label {
  display:block;
  font-size:.9rem; font-weight:400;
  color:rgba(255,255,255,.55);
}

/* ═══════════════════════════════════════════════════════
   SECTION HEADER
═══════════════════════════════════════════════════════ */
.section-header {
  text-align:center; max-width:680px;
  margin:0 auto 56px;
}
.section-header .kicker { margin-bottom:12px; }
.section-header h2     { margin-bottom:16px; }
.section-header p      { font-size:1.0625rem; }

/* ═══════════════════════════════════════════════════════
   SERVICES GRID
═══════════════════════════════════════════════════════ */
.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}

.service-card {
  padding:32px 28px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:all var(--t-smooth);
  cursor:pointer;
}
.service-card:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-6px);
  border-color:rgba(236,72,153,.30);
  background:rgba(255,255,255,.92);
}

.service-icon {
  width:52px; height:52px;
  border-radius:var(--r-md);
  background:rgba(236,72,153,.10);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  transition:background var(--t-base);
}
.service-card:hover .service-icon { background:rgba(236,72,153,.18); }
.service-icon svg { color:var(--color-primary); }

.service-card h3 { font-size:1.1875rem; margin-bottom:10px; }
.service-card p  { font-size:.9375rem; margin-bottom:20px; line-height:1.65; }

.service-link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.9rem; font-weight:600;
  color:var(--color-primary);
  transition:gap var(--t-base);
  cursor:pointer;
}
.service-link:hover { gap:10px; }
.service-link svg { width:16px; height:16px; max-width:16px; }

/* ═══════════════════════════════════════════════════════
   WHY US
═══════════════════════════════════════════════════════ */
.why-us-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}

.why-item {
  display:flex; gap:20px;
  padding:28px 24px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  transition:all var(--t-smooth);
  cursor:default;
}
.why-item:hover {
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
  border-color:rgba(236,72,153,.25);
}

.why-icon {
  flex-shrink:0;
  width:48px; height:48px;
  border-radius:var(--r-md);
  background:var(--gradient-brand);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 12px rgba(236,72,153,.30);
}
.why-icon svg { color:#fff; }

.why-body h3 { font-size:1.0625rem; margin-bottom:8px; }
.why-body p  { font-size:.9375rem; line-height:1.65; }

/* ═══════════════════════════════════════════════════════
   FEATURE / BALAYAGE SPLIT
═══════════════════════════════════════════════════════ */
.feature-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:center;
}
.feature-grid.reverse { }
.feature-grid.reverse .feature-img { order:2; }
.feature-grid.reverse .feature-content { order:1; }

.feature-img {
  border-radius:var(--r-xl);
  overflow:hidden; box-shadow:var(--shadow-xl);
}
.feature-img img {
  width:100%; height:520px;
  object-fit:cover; display:block;
  transition:transform var(--t-glass);
}
.feature-img:hover img { transform:scale(1.04); }

.feature-content .kicker { margin-bottom:14px; }
.feature-content h2     { margin-bottom:20px; }
.feature-content p      { margin-bottom:16px; font-size:1rem; }
.feature-content .btn   { margin-top:12px; }

/* Interior fullwidth image */
.interior-bar img {
  width:100%; height:400px;
  object-fit:cover; display:block;
}

/* ═══════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════ */
.testimonials-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
}

.testimonial-card {
  padding:32px 28px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:all var(--t-smooth);
}
.testimonial-card:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
}

.testimonial-stars { display:flex; gap:3px; margin-bottom:16px; }
.testimonial-stars svg {
  width:18px; height:18px; max-width:18px;
  color:var(--color-star); fill:var(--color-star);
}

.testimonial-quote {
  font-size:.9375rem; line-height:1.75;
  color:var(--color-text);
  margin-bottom:24px; font-style:italic;
}

.testimonial-author { display:flex; align-items:center; gap:12px; }

.t-avatar {
  width:44px; height:44px; border-radius:50%;
  background:var(--gradient-brand);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display);
  font-size:1rem; font-weight:700; color:#fff;
  flex-shrink:0;
}

.t-name  { font-weight:600; font-size:.9375rem; color:var(--color-text); }
.t-meta  { font-size:.8125rem; color:var(--color-text-muted); }

/* ═══════════════════════════════════════════════════════
   PROCESS STEPS
═══════════════════════════════════════════════════════ */
.process-steps {
  display:grid; grid-template-columns:repeat(3,1fr); gap:32px;
  position:relative;
}

/* Connecting line */
.process-steps::before {
  content:'';
  position:absolute; top:28px;
  left:calc(16.666% + 20px); right:calc(16.666% + 20px);
  height:2px;
  background:linear-gradient(90deg,var(--color-primary),var(--color-accent));
  opacity:.20;
}

.process-step {
  text-align:center; padding:32px 24px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  transition:all var(--t-smooth);
}
.process-step:hover {
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
}

.process-number {
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:50%;
  background:var(--gradient-brand);
  font-family:var(--font-display);
  font-size:1.25rem; font-weight:700; color:#fff;
  margin:0 auto 20px;
  box-shadow:0 4px 16px rgba(236,72,153,.32);
}

.process-step h3 { font-size:1.1rem; margin-bottom:10px; }
.process-step p  { font-size:.9375rem; }

/* ═══════════════════════════════════════════════════════
   NEIGHBORHOODS
═══════════════════════════════════════════════════════ */
.neighborhoods-pills {
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}

.neighborhood-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:11px 20px; min-height:44px;
  background:var(--glass-bg);
  backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--r-full);
  font-size:.9rem; font-weight:500;
  color:var(--color-text);
  transition:all var(--t-base);
  cursor:pointer; text-decoration:none;
  touch-action:manipulation;
}
.neighborhood-pill:hover {
  background:rgba(236,72,153,.10);
  border-color:rgba(236,72,153,.30);
  color:var(--color-primary);
  transform:translateY(-2px); box-shadow:var(--shadow-sm);
}
.neighborhood-pill svg {
  width:15px; height:15px; max-width:15px;
  color:var(--color-primary);
}

/* ═══════════════════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════════════════ */
.cta-section {
  background:var(--gradient-brand);
  padding:var(--section-py) 0;
  text-align:center;
  position:relative; overflow:hidden;
}
/* Subtle dot pattern overlay */
.cta-section::before {
  content:'';
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:24px 24px;
  pointer-events:none;
}
.cta-section .container { position:relative; }

.cta-section h2 {
  color:#fff; margin-bottom:16px;
  font-size:clamp(2rem,3.5vw,2.75rem);
}
.cta-section p {
  color:rgba(255,255,255,.85); font-size:1.125rem;
  margin-bottom:40px; max-width:540px;
  margin-left:auto; margin-right:auto;
}
.cta-buttons { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

/* ═══════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════ */
.site-footer {
  background: var(--color-dark-bg);
  padding: 72px 0 0;
}

.footer-grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.footer-brand .footer-logo {
  font-family:var(--font-display);
  font-size:1.5rem; font-weight:700;
  color:#fff; display:block; margin-bottom:16px;
}
.footer-brand .footer-logo .accent { color:var(--color-secondary); }

.footer-brand p {
  font-size:.9375rem; line-height:1.75;
  color:rgba(255,255,255,.52); margin-bottom:24px;
}
.footer-tagline {
  font-size:.8125rem; font-weight:600;
  color:var(--color-secondary); letter-spacing:.06em;
}

.footer-col h4 {
  font-family:var(--font-body);
  font-size:.75rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.40); margin-bottom:18px;
}

.footer-links { display:flex; flex-direction:column; gap:6px; }
.footer-links a {
  font-size:.9375rem; color:rgba(255,255,255,.60);
  transition:color var(--t-base); cursor:pointer;
  padding:4px 0; min-height:32px;
  display:flex; align-items:center;
}
.footer-links a:hover { color:var(--color-secondary); }

.footer-bottom {
  padding:24px 0;
  display:flex; align-items:center;
  justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.footer-bottom span,
.footer-bottom a {
  font-size:.8125rem; color:rgba(255,255,255,.30);
  transition:color var(--t-base);
}
.footer-bottom a:hover { color:var(--color-secondary); }

/* Mobile call bar */
.mobile-call-bar {
  display:none;
  position:fixed; bottom:0; left:0; right:0;
  z-index:9997;
  background:var(--gradient-brand);
  box-shadow:0 -4px 24px rgba(236,72,153,.28);
}
.mobile-call-link {
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:16px 24px;
  color:#fff; font-weight:600; font-size:.9375rem;
  cursor:pointer; min-height:56px;
  touch-action:manipulation;
}
.mobile-call-link svg { color:#fff; }

/* ═══════════════════════════════════════════════════════
   PAGE TEMPLATE (inner pages)
═══════════════════════════════════════════════════════ */
.page-banner {
  background:var(--gradient-soft);
  padding:88px 0 64px;
  text-align:center;
  border-bottom:1px solid var(--color-border);
}
.page-banner .kicker { margin-bottom:12px; }
.page-banner h1      { margin-bottom:16px; }
.page-banner .lead   {
  font-size:1.125rem; max-width:600px;
  margin:0 auto; color:var(--color-text-muted);
}

.page-body {
  padding:72px 0 96px;
}
.page-body-inner {
  max-width:800px; margin:0 auto;
}

.page-body-inner h2 { margin:40px 0 14px; }
.page-body-inner h3 { margin:28px 0 10px; }
.page-body-inner p  { margin-bottom:18px; }
.page-body-inner ul { margin-bottom:18px; padding-left:20px; }
.page-body-inner ul li {
  list-style:disc; margin-bottom:8px;
  font-size:.9375rem; color:var(--color-text-muted); line-height:1.6;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — 1024px
═══════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  :root { --section-py:72px; }

  .hero { grid-template-columns:1fr 1fr; }
  .hero-content { padding:60px 32px 60px 0; }

  .services-grid     { grid-template-columns:repeat(2,1fr); }
  .testimonials-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid       { grid-template-columns:1fr 1fr; gap:32px; }

  .feature-grid { gap:40px; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — 768px
═══════════════════════════════════════════════════════ */
@media (max-width:768px) {
  :root { --nav-h:64px; --section-py:56px; }

  /* Nav: hide desktop, show hamburger */
  .nav-links, .nav-cta { display:none; }
  .hamburger { display:flex; }
  .nav-inner { grid-template-columns:1fr auto; }
  .top-bar-items.top-bar-right { display:none; }

  /* Hero: stack vertically, image first */
  .hero {
    grid-template-columns:1fr;
    min-height:auto;
  }
  .hero-image {
    order:-1; height:52vh;
    padding:24px 24px 0;
  }
  .hero-img-wrap { max-width:100%; }
  .hero-img-container img { height:100%; }
  .hero-content { padding:28px 0 48px; }
  .hero-ctas { flex-direction:column; }
  .hero-ctas .btn { justify-content:center; width:100%; }
  .hero-trust { gap:16px; }

  /* Sections */
  .services-grid     { grid-template-columns:1fr; }
  .why-us-grid       { grid-template-columns:1fr; }
  .feature-grid      { grid-template-columns:1fr; gap:32px; }
  .feature-img img   { height:320px; }
  .testimonials-grid { grid-template-columns:1fr; }
  .process-steps     { grid-template-columns:1fr; }
  .process-steps::before { display:none; }

  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat-item { border-right:none; border-bottom:1px solid rgba(255,255,255,.07); }
  .stat-item:nth-child(odd) { border-right:1px solid rgba(255,255,255,.07); }
  .stat-item:last-child,
  .stat-item:nth-last-child(2):nth-child(odd) { border-bottom:none; }

  .footer-grid { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; text-align:center; }

  .mobile-call-bar { display:block; }
  .site-footer { padding-bottom:72px; }

  .cta-buttons { flex-direction:column; align-items:center; }
  .cta-buttons .btn { width:100%; max-width:320px; justify-content:center; }

  .interior-bar img { height:280px; }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — 375px
═══════════════════════════════════════════════════════ */
@media (max-width:375px) {
  .container { padding:0 16px; }
  .top-bar { display:none; }
  .hero-content { padding:20px 0 36px; }
  .hero-badge { font-size:.75rem; padding:6px 14px; }
  .hero-pill { display:none; }
  .btn-lg { padding:14px 24px; }
  .section-header { margin-bottom:36px; }
}

/* ═══════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  html { scroll-behavior:auto; }
  .hero::before, .hero::after { display:none; }
}

/* ═══════════════════════════════════════════════════════
   UTILITIES
═══════════════════════════════════════════════════════ */
.visually-hidden {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); border:0;
}
.text-center { text-align:center; }
.text-primary { color:var(--color-primary); }