/* ================================================================
   EB HOME SERVICES — styles.css
   Colour Scheme: Dark/Purple/Lime (Archivo font)
   - Primary  : #7144F2 (purple)
   - Accent   : #D9FC50 (lime)  / #46F8A3 (mint)
   - Dark bg  : #18181B
   - Off-white: #F7F5ED
   ================================================================ */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── Brand colours ── */
  --primary:           #7144F2;   /* purple */
  --primary-dark:      #5A32D1;   /* darker purple */
  --primary-light:     #B5A8F8;   /* soft lavender */
  --accent:            #D9FC50;   /* lime yellow */
  --accent-dark:       #b8d800;   /* deeper lime */
  --accent-light:      #eafd8c;   /* pale lime */
  --accent-mint:       #46F8A3;   /* mint green */
  --accent-pink:       #FEC0DE;   /* soft pink */
  --accent-yellow:     #FFED88;   /* warm yellow */

  /* ── Backgrounds ── */
  --bg:                #F7F5ED;   /* warm off-white — light sections */
  --bg-dark:           #18181B;   /* near-black — dark sections */
  --bg-dark-2:         #323437;   /* slightly lighter dark */
  --bg-dark-3:         #39393A;   /* card dark bg */
  --bg-white:          #FFFFFF;

  /* ── Text ── */
  --text-primary:      #18181B;   /* near-black body text */
  --text-secondary:    #6E777D;   /* muted text */
  --text-light:        #A3A3A3;   /* placeholder / light */
  --text-white:        #FFFFFF;
  --foreground:        #18181B;

  /* ── UI ── */
  --card:              #FFFFFF;
  --card-fg:           #18181B;
  --muted:             #DEDCD5;   /* warm grey border/divider */
  --muted-fg:          #6E777D;
  --border:            #DEDCD5;
  --destructive:       #EF4444;

  /* ── Glassmorphism ── */
  --glass-bg:          rgba(255,255,255,0.08);
  --glass-bg-dark:     rgba(49,36,100,0.65);
  --glass-border:      rgba(255,255,255,0.12);
  --glass-blur:        16px;
  --glass-shadow:      0 8px 32px rgba(113,68,242,0.18);

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

  /* ── Radius ── */
  --r-sm: 6px;  --r-md: 10px;  --r-lg: 16px;
  --r-xl: 24px; --r-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(113,68,242,.15);
  --shadow-lg: 0 12px 40px rgba(113,68,242,.20);
  --shadow-xl: 0 24px 64px rgba(113,68,242,.25);

  /* ── Transitions ── */
  --t-fast:   150ms ease;
  --t-normal: 200ms ease;
  --t-slow:   300ms ease;

  /* ── Typography ── */
  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ── Layout ── */
  --max-w: 1200px;
  --nav-h: 72px;
}

html  { scroll-behavior: smooth; font-size: 16px; }
body  {
  font-family: var(--font-body);
  background:  var(--bg);
  color:       var(--text-primary);
  line-height: 1.6;
  overflow-x:  hidden;
  -webkit-font-smoothing: antialiased;
}

/* reduced-motion override */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ── Utility ── */
.container   { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-6); }
.section     { padding: var(--sp-24) 0; }
img, svg     { display: block; }

/* ── Glass card mixin ── */
.glass-card {
  background:    var(--glass-bg);
  border:        1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow:    var(--glass-shadow);
  border-radius: var(--r-lg);
}
.glass-card-dark {
  background:    var(--glass-bg-dark);
  border:        1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--r-lg);
}

/* ── 3D Tilt base (JS enhances) ── */
.js-tilt {
  transform-style: preserve-3d;
  will-change:     transform;
  transition:      transform var(--t-normal), box-shadow var(--t-normal);
}
.js-tilt:hover { box-shadow: var(--shadow-xl); }

/* ── Buttons ── */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2000;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22,163,74,.2), 0 0 12px rgba(22,163,74,.55);
  pointer-events: none;
  opacity: 0;
  transform: translate3d(-20px, -20px, 0);
  margin: -4px 0 0 -4px;
  will-change: transform, opacity;
}
.cursor-dot.is-visible { opacity: 1; }
body:not(.dark-theme) .cursor-dot {
  background: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6,182,212,.2), 0 0 16px rgba(6,182,212,.65);
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-dot { display: none; }
}

.btn-primary,
.btn-outline,
.btn-ghost,
.btn-cta,
.btn-submit {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-2);
  padding:         11px 26px;
  border-radius:   var(--r-full);
  font-family:     var(--font-body);
  font-size:       .9rem;
  font-weight:     600;
  text-decoration: none;
  cursor:          pointer;
  border:          2px solid transparent;
  transition:      background var(--t-fast), color var(--t-fast),
                   border-color var(--t-fast), transform var(--t-fast),
                   box-shadow var(--t-fast);
  white-space:     nowrap;
}
.btn-primary, .btn-cta, .btn-submit {
  background:   var(--accent);
  color:        #fff;
  border-color: var(--accent);
}
.btn-cta,
.about-quote {
  animation: quote-border-shift 3s linear infinite;
  box-shadow: 0 0 0 3px #d9fc50;
}
@keyframes quote-border-shift {
  0%, 100% {
    border-color: #d9fc50;
    box-shadow: 0 0 0 3px #d9fc50, 0 0 14px rgba(217,252,80,.55);
  }
  25% {
    border-color: #7c3aed;
    box-shadow: 0 0 0 3px #7c3aed, 0 0 14px rgba(124,58,237,.5);
  }
  50% {
    border-color: #22c55e;
    box-shadow: 0 0 0 3px #22c55e, 0 0 14px rgba(34,197,94,.5);
  }
  75% {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px #38bdf8, 0 0 14px rgba(56,189,248,.5);
  }
}
.btn-primary:hover, .btn-cta:hover, .btn-submit:hover {
  background:   var(--accent-dark);
  border-color: var(--accent-dark);
  transform:    translateY(-1px);
  box-shadow:   0 6px 20px rgba(234,88,12,.35);
}
.btn-primary:focus-visible, .btn-cta:focus-visible, .btn-submit:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .btn-cta,
  .about-quote { animation: none; }
}
.btn-outline {
  background:   transparent;
  color:        var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background:   var(--primary);
  color:        #fff;
  transform:    translateY(-1px);
}
.btn-outline:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

.btn-ghost {
  background:   transparent;
  color:        var(--text-secondary);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--muted); color: var(--text-primary); }
.btn-ghost:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }

/* ── Section shared ── */
.section-header   { text-align: center; margin-bottom: var(--sp-12); }
.eyebrow-label    {
  display:         block;
  font-family:     var(--font-body);
  font-size:       .75rem;
  font-weight:     700;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  color:           var(--primary-light);
  margin-bottom:   var(--sp-3);
}
.light-eyebrow    { color: rgba(255,255,255,.65); }
.section-heading  {
  font-family:   var(--font-heading);
  font-size:     clamp(1.75rem, 3.5vw, 2.6rem);
  font-weight:   700;
  color:         var(--foreground);
  line-height:   1.2;
  margin-bottom: var(--sp-4);
}
.light-heading    { color: #fff; }
.section-sub      { color: var(--text-secondary); max-width: 540px; margin: 0 auto; font-size: .97rem; }
.light-sub        { color: rgba(255,255,255,.7); }
.heading-accent   { color: var(--primary-light); display: block; }

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar {
  position:   sticky;
  top:        0;
  z-index:    1000;
  height:     var(--nav-h);
  background: rgba(255,255,255,.92);
  backdrop-filter:  blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t-normal);
}
.navbar.scrolled { box-shadow: var(--shadow-md); }

.nav-inner {
  display:     flex;
  align-items: center;
  height:      var(--nav-h);
  gap:         var(--sp-6);
}

.logo {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-2);
  text-decoration: none;
  flex-shrink:     0;
}
.logo-text {
  font-family: var(--font-heading);
  font-size:   1.15rem;
  font-weight: 800;
  color:       var(--primary);
}
.logo-em { color: var(--accent); }

.nav-links {
  display:     flex;
  gap:         var(--sp-6);
  margin-left: auto;
}
.nav-link {
  font-family:     var(--font-body);
  font-size:       .9rem;
  font-weight:     500;
  color:           var(--text-secondary);
  text-decoration: none;
  position:        relative;
  padding-bottom:  2px;
  transition:      color var(--t-fast);
}
.nav-link::after {
  content:    '';
  position:   absolute;
  bottom:     -2px;
  left:       0;
  width:      0;
  height:     2px;
  background: var(--accent);
  transition: width var(--t-fast);
}
.nav-link:hover          { color: var(--primary); }
.nav-link:hover::after   { width: 100%; }
.nav-link:focus-visible  { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 2px; }
.nav-link[aria-current="page"] { color: var(--primary); }
.nav-link[aria-current="page"]::after { width: 100%; }

.nav-actions {
  display:     flex;
  align-items: center;
  gap:         var(--sp-4);
  flex-shrink: 0;
}
.nav-phone {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-2);
  font-size:       .85rem;
  font-weight:     600;
  color:           var(--primary);
  text-decoration: none;
  transition:      color var(--t-fast);
}
.nav-phone:hover         { color: var(--primary-light); }
.nav-phone:focus-visible { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: 4px; }

.btn-cta { padding: 9px 22px; font-size: .85rem; }

/* Hamburger */
.hamburger {
  display:    none;
  flex-direction: column;
  gap:        5px;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    4px;
  margin-left: auto;
}
.hamburger span {
  display:   block;
  width:     24px;
  height:    2px;
  background: var(--primary);
  border-radius: 2px;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

/* ================================================================
   HERO
   ================================================================ */
.hero {
  padding:    var(--sp-20) 0 var(--sp-16);
  position:   relative;
  overflow:   hidden;
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #EFF6FF 100%);
}

/* Background geometric shapes */
.hero-bg-shapes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.shape {
  position:      absolute;
  border-radius: var(--r-full);
  opacity:       .25;
  filter:        blur(60px);
}
.shape-1 {
  width: 500px; height: 500px;
  background: var(--primary-light);
  top: -150px; right: -100px;
  animation: floatShape 8s ease-in-out infinite alternate;
}
.shape-2 {
  width: 350px; height: 350px;
  background: var(--accent-light);
  bottom: -100px; left: -80px;
  animation: floatShape 10s ease-in-out infinite alternate-reverse;
}
.shape-3 {
  width: 250px; height: 250px;
  background: var(--primary);
  top: 40%; left: 45%;
  animation: floatShape 12s ease-in-out infinite alternate;
}
@keyframes floatShape {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(20px,30px) scale(1.05); }
}

.hero-inner {
  position:            relative;
  z-index:             1;
  display:             grid;
  grid-template-columns: 1fr 1fr;
  gap:                 var(--sp-12);
  align-items:         center;
}

/* Hero content */
.hero-eyebrow {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-2);
  font-size:       .8rem;
  font-weight:     600;
  color:           #fff;
  background:      transparent;
  border:          1px solid #16a34a;
  border-radius:   var(--r-full);
  padding:         6px 14px;
  margin-bottom:   var(--sp-5);
}
.eyebrow-dot {
  width:        7px;
  height:       7px;
  border-radius: var(--r-full);
  background:   #fff;
  animation:    pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5; transform: scale(.8); }
}

.hero-heading {
  font-family:   var(--font-heading);
  font-size:     clamp(2rem, 4.5vw, 3.4rem);
  font-weight:   800;
  color:         var(--primary-dark);
  line-height:   1.15;
  margin-bottom: var(--sp-5);
}
.hero-heading .heading-accent { color: var(--accent); display: inline; }

.hero-sub {
  color:         var(--text-secondary);
  font-size:     1.05rem;
  max-width:     520px;
  margin-bottom: var(--sp-8);
  line-height:   1.7;
}

.hero-btns {
  display:       flex;
  gap:           var(--sp-4);
  flex-wrap:     wrap;
  margin-bottom: var(--sp-8);
}

.hero-trust {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-4) var(--sp-6);
}
.trust-item {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   .83rem;
  font-weight: 600;
  color:       var(--primary);
}

/* Hero visual — 3D card stack */
.hero-visual {
  position: relative;
  display:  flex;
  justify-content: center;
  padding:  var(--sp-8) var(--sp-6);
}

.hero-card {
  width:   380px;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap:     var(--sp-5);
  position: relative;
  z-index: 2;
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}
.hc-top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.hc-logo-mini {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-family: var(--font-heading);
  font-size:   .85rem;
  font-weight: 700;
  color:       var(--primary);
}
.live-pill {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-2);
  font-size:     .72rem;
  font-weight:   700;
  color:         #16a34a;
  background:    rgba(22,163,74,.1);
  border:        1px solid rgba(22,163,74,.25);
  border-radius: var(--r-full);
  padding:       3px 10px;
}
.live-dot {
  width:        6px;
  height:       6px;
  border-radius: var(--r-full);
  background:   #16a34a;
  animation:    pulse 1.5s infinite;
}

.hc-services-grid {
  display:        grid;
  grid-template-columns: repeat(4,1fr);
  gap:            var(--sp-3);
}
.hcs-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-1);
  font-size:      .7rem;
  font-weight:    600;
  color:          var(--primary);
  background:     rgba(30,64,175,.05);
  border-radius:  var(--r-md);
  padding:        var(--sp-3) var(--sp-2);
  transition:     background var(--t-fast);
}
.hcs-item:hover { background: rgba(30,64,175,.12); }

.hc-rating {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
}
.hc-stars { color: #f59e0b; letter-spacing: 2px; font-size: 1rem; }
.hc-rating span { font-size: .82rem; color: var(--text-secondary); }
.hc-rating strong { color: var(--primary-dark); }

.hc-footer {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  border-top:      1px solid var(--border);
  padding-top:     var(--sp-4);
}
.hc-cities { font-size: .72rem; color: #fff; font-weight: 600; }
.hc-avail  { font-size: .78rem; font-weight: 700; color: var(--accent); }

/* Floating stat badges */
.stat-badge {
  position:    absolute;
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  padding:     var(--sp-3) var(--sp-4);
  font-size:   .8rem;
  z-index:     3;
  min-width:   150px;
}
.stat-badge div { display: flex; flex-direction: column; }
.stat-badge strong { font-family: var(--font-heading); font-size: 1.1rem; color: var(--primary-dark); line-height: 1; }
.stat-badge small  { font-size: .68rem; color: var(--text-secondary); margin-top: 1px; }
.sb-1 { top: 0;    left: -20px;  animation: floatBadge 4s ease-in-out infinite alternate; }
.sb-2 { bottom: 78px; right: -10px; animation: floatBadge 5s ease-in-out infinite alternate-reverse; }
@keyframes floatBadge {
  from { transform: translateY(0); }
  to   { transform: translateY(-10px); }
}

/* ================================================================
   STATS BAR
   ================================================================ */
.stats-bar {
  background:  var(--primary-dark);
  padding:     var(--sp-6) 0;
  position:    relative;
  z-index:     1;
}
.stats-inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-6);
  flex-wrap:       wrap;
}
.stat-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  text-align:     center;
}
.stat-item strong {
  font-family:  var(--font-heading);
  font-size:    2rem;
  font-weight:  800;
  color:        #fff;
  line-height:  1;
  display:      flex;
  align-items:  center;
  gap:          1px;
  white-space:  nowrap;
}
.stat-clients strong {
  align-items: baseline;
}
.stat-clients .js-counter {
  font-size: 1.7rem;
  font-weight: 700;
}
.stat-clients .stat-plus {
  font-size: 2.35rem;
  font-weight: 900;
  line-height: .75;
}
.stat-item span {
  font-size:  .75rem;
  color:      rgba(255,255,255,.65);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.stat-sep {
  width:        1px;
  height:       40px;
  background:   rgba(255,255,255,.18);
}

/* ================================================================
   SERVICES
   ================================================================ */
.services-section {
  background: var(--bg-white);
  position:   relative;
}
.services-section::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     4px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.services-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:                   var(--sp-6);
}

.svc-card {
  padding:    var(--sp-8) var(--sp-6);
  position:   relative;
  transform-style: preserve-3d;
  perspective: 800px;
  transition: transform .08s ease-out, box-shadow var(--t-normal);
  border:     1px solid var(--border);
  background: var(--bg-white);
  border-radius: var(--r-lg);
  /* overflow:hidden removed — breaks 3D tilt (forces transform-style:flat) */
  display:    flex;
  flex-direction: column;
  gap:        var(--sp-4);
}
.svc-card.js-tilt {
  transition: transform .08s ease-out, box-shadow var(--t-normal) !important;
}
.svc-card::after {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     3px;
  background: var(--border);
  transition: background var(--t-normal);
}
.svc-card:hover::after     { background: var(--accent); }
.svc-card:hover            { transform: translateY(-6px); box-shadow: var(--shadow-xl); }

.svc-featured {
  background:   linear-gradient(145deg, var(--primary-dark) 0%, var(--primary) 100%);
  border-color: transparent;
  color:        #fff;
}
.svc-featured::after       { background: var(--accent); }
.svc-featured h3           { color: var(--accent) !important; }  /* orange heading — overrides .svc-card h3 */
.svc-featured p            { color: rgba(255,255,255,.88) !important; }
.svc-featured .svc-list li { color: rgba(255,255,255,.88) !important; }
.svc-featured .svc-list li::before { color: var(--accent-light); }
.svc-featured .svc-icon-wrap { background: rgba(255,255,255,.15); color: rgba(255,255,255,.9); }

.svc-badge {
  position:      absolute;
  top:           var(--sp-4);
  right:         var(--sp-4);
  font-size:     .68rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background:    var(--accent);
  color:         #fff;
  border-radius: var(--r-full);
  padding:       3px 10px;
}

.svc-icon-wrap {
  width:         56px;
  height:        56px;
  background:    rgba(30,64,175,.08);
  border-radius: var(--r-md);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--primary);
  flex-shrink:   0;
  transition:    background var(--t-fast), transform var(--t-fast);
}
.svc-card:hover .svc-icon-wrap { transform: scale(1.08); }

.svc-card h3 {
  font-family: var(--font-heading);
  font-size:   1.1rem;
  font-weight: 700;
  color:       var(--foreground);
  line-height: 1.3;
}
.svc-card p  { font-size: .88rem; color: var(--text-secondary); line-height: 1.65; }

.svc-list {
  list-style: none;
  display:    flex;
  flex-direction: column;
  gap:        var(--sp-2);
  flex:       1;
}
.svc-list li {
  font-size:   .83rem;
  color:       var(--text-secondary);
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
}
.svc-list li::before {
  content:     '✓';
  color:       var(--primary-light);
  font-weight: 700;
  font-size:   .75rem;
}

.svc-btn { margin-top: auto; align-self: flex-start; }

/* ================================================================
   ABOUT
   ================================================================ */
.about-section {
  background: var(--bg);
  position:   relative;
  overflow:   hidden;
}
.about-blob {
  position:   absolute;
  width:      600px;
  height:     600px;
  border-radius: var(--r-full);
  background: rgba(30,64,175,.06);
  filter:     blur(80px);
  right:      -200px;
  top:        -100px;
  pointer-events: none;
}

.about-inner {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-16);
  align-items:           center;
}

/* About card */
.about-card {
  padding:        var(--sp-8);
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-6);
}
.ac-header {
  display:     flex;
  align-items: center;
  gap:         var(--sp-4);
}
.ac-header > div strong { display: block; font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--primary-dark); }
.ac-header > div span   { font-size: .8rem; color: var(--text-secondary); }

.ac-stats {
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   var(--sp-3);
  padding:               var(--sp-5) 0;
  border-top:            1px solid var(--border);
  border-bottom:         1px solid var(--border);
}
.ac-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            2px;
}
.ac-stat strong { font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; color: var(--primary); display: flex; align-items: center; gap: 1px; white-space: nowrap; }
.ac-stat small  { font-size: .68rem; color: var(--text-light); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }

.ac-contacts { display: flex; flex-direction: column; gap: var(--sp-3); }
.ac-link {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-3);
  font-size:       .84rem;
  color:           var(--text-secondary);
  text-decoration: none;
  padding:         var(--sp-2) var(--sp-3);
  border-radius:   var(--r-md);
  transition:      background var(--t-fast), color var(--t-fast);
}
.ac-link:hover          { background: rgba(30,64,175,.07); color: var(--primary); }
.ac-link:focus-visible  { outline: 2px solid var(--primary); outline-offset: 2px; }

.ac-ytunnus {
  font-size:  .72rem;
  color:      var(--text-light);
  text-align: center;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

/* About content */
.about-content { display: flex; flex-direction: column; gap: var(--sp-5); }
.about-content .section-heading { text-align: left; margin-bottom: 0; }
.about-content p { color: var(--text-secondary); font-size: .95rem; line-height: 1.75; }

.about-features { display: flex; flex-direction: column; gap: var(--sp-5); }
.af-row {
  display:     flex;
  gap:         var(--sp-4);
  align-items: flex-start;
}
.af-check {
  width:         28px;
  height:        28px;
  border-radius: var(--r-full);
  background:    var(--primary);
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
  margin-top:    2px;
}
.af-row > div strong { font-size: .95rem; font-weight: 700; color: var(--primary-dark); display: block; margin-bottom: 3px; }
.af-row > div p      { font-size: .83rem; color: var(--text-secondary); margin: 0; }

/* ================================================================
   AREAS
   ================================================================ */
.areas-section { background: var(--bg-white); }

.areas-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:                   var(--sp-6);
}

.area-card {
  padding:        var(--sp-8) var(--sp-6);
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--sp-3);
  border:         1px solid var(--border);
  background:     var(--bg-white);
  border-radius:  var(--r-lg);
  transition:     transform var(--t-normal), box-shadow var(--t-normal), background var(--t-normal), border-color var(--t-normal);
  cursor:         default;
}
.area-card:hover {
  transform:     translateY(-6px);
  box-shadow:    var(--shadow-xl);
  background:    var(--primary-dark);
  border-color:  var(--primary-dark);
}
.area-card:hover h3,
.area-card:hover p  { color: #fff; }
.area-card:hover .area-icon { color: var(--accent-light); }

.area-home { border: 2px solid var(--primary-light); }

.area-icon {
  width:         48px;
  height:        48px;
  border-radius: var(--r-md);
  background:    rgba(30,64,175,.08);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         var(--primary);
  transition:    color var(--t-fast);
}
.area-card h3 { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: var(--foreground); }
.area-card p  { font-size: .84rem; color: var(--text-secondary); line-height: 1.5; flex: 1; }

.area-tag {
  font-size:     .68rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: .06em;
  background:    rgba(30,64,175,.08);
  color:         var(--primary);
  border-radius: var(--r-full);
  padding:       3px 10px;
  border:        1px solid var(--border);
}
.area-tag-home { background: rgba(234,88,12,.08); color: var(--accent); border-color: rgba(234,88,12,.25); }

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.testimonials-section { background: var(--bg); }

.testimonials-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   var(--sp-6);
}

.test-card {
  padding:   var(--sp-8);
  display:   flex;
  flex-direction: column;
  gap:       var(--sp-5);
  border:    1px solid var(--border);
  background: var(--bg-white);
  border-radius: var(--r-lg);
  transition: transform var(--t-normal), box-shadow var(--t-normal);
}
.test-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.test-stars {
  color:         #f59e0b;
  font-size:     1.05rem;
  letter-spacing: 3px;
}
.test-card > p {
  font-size:   .9rem;
  color:       var(--text-secondary);
  font-style:  italic;
  line-height: 1.7;
  flex:        1;
}
.test-author {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  padding-top: var(--sp-4);
  border-top:  1px solid var(--border);
}
.test-avatar {
  width:         40px;
  height:        40px;
  border-radius: var(--r-full);
  background:    var(--primary);
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--font-heading);
  font-weight:   700;
  font-size:     1rem;
  flex-shrink:   0;
}
.test-author cite  { display: block; font-size: .88rem; font-weight: 700; font-style: normal; color: var(--primary-dark); }
.test-author small { font-size: .75rem; color: var(--text-light); }

/* ================================================================
   BOOKING SECTION
   ================================================================ */
.booking-section {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #1e3a8a 50%, var(--primary) 100%);
  position:   relative;
  overflow:   hidden;
}
.booking-bg {
  position:      absolute;
  inset:         0;
  background:    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}
.booking-section .section-header { position: relative; z-index: 1; }

.booking-layout {
  display:               grid;
  grid-template-columns: 320px 1fr;
  gap:                   var(--sp-8);
  align-items:           start;
  position:              relative;
  z-index:               1;
}

/* Sidebar */
.booking-sidebar {
  padding: var(--sp-8);
  color:   #fff;
}
.booking-sidebar h3 {
  font-family:   var(--font-heading);
  font-size:     1.05rem;
  font-weight:   700;
  color:         #fff;
  margin-bottom: var(--sp-6);
}
.bsb-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-1); }
.bsb-item {
  display:         flex;
  align-items:     flex-start;
  gap:             var(--sp-4);
  text-decoration: none;
  padding:         var(--sp-3) var(--sp-3);
  border-radius:   var(--r-md);
  transition:      background var(--t-fast);
  cursor:          default;
}
a.bsb-item { cursor: pointer; }
a.bsb-item:hover { background: rgba(255,255,255,.1); }
a.bsb-item:focus-visible { outline: 2px solid rgba(255,255,255,.6); outline-offset: 2px; }
.bsb-icon {
  width:         36px;
  height:        36px;
  border-radius: var(--r-md);
  background:    rgba(255,255,255,.12);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         rgba(255,255,255,.9);
  flex-shrink:   0;
}
.bsb-item > div strong { display: block; font-size: .8rem; font-weight: 700; color: rgba(255,255,255,.9); margin-bottom: 2px; }
.bsb-item > div span   { font-size: .82rem; color: rgba(255,255,255,.65); line-height: 1.4; }

.bsb-cities {
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--sp-2);
  margin-top:    var(--sp-5);
  padding-top:   var(--sp-5);
  border-top:    1px solid rgba(255,255,255,.15);
}
.bsb-cities span {
  font-size:     .72rem;
  font-weight:   600;
  color:         rgba(255,255,255,.75);
  background:    rgba(255,255,255,.1);
  border:        1px solid rgba(255,255,255,.2);
  border-radius: var(--r-full);
  padding:       4px 12px;
}

/* Keep the four service cities in a stable 2-by-2 layout at every width. */
.bsb-cities {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
.bsb-cities span {
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}

/* Form wrap */
.booking-form-wrap {
  padding:    var(--sp-8);
  background: var(--bg-white);
}

/* Error summary */
.error-summary {
  background:    rgba(220,38,38,.06);
  border:        1px solid rgba(220,38,38,.3);
  border-radius: var(--r-md);
  padding:       var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  color:         var(--destructive);
}
.error-summary h4 { font-size: .9rem; font-weight: 700; margin-bottom: var(--sp-2); }
.error-summary ul { padding-left: var(--sp-5); font-size: .85rem; display: flex; flex-direction: column; gap: var(--sp-1); }
.error-summary a  { color: var(--destructive); font-weight: 600; }

/* Step progress */
.step-progress { margin-bottom: var(--sp-8); }
.step-bar {
  height:        4px;
  background:    var(--muted);
  border-radius: var(--r-full);
  overflow:      hidden;
  margin-bottom: var(--sp-4);
}
.step-fill {
  height:        100%;
  background:    linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: var(--r-full);
  transition:    width var(--t-slow);
}
.step-labels {
  display:         flex;
  justify-content: space-between;
}
.step-lbl {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--sp-1);
  font-size:       .75rem;
  font-weight:     600;
  color:           var(--text-light);
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         0 var(--sp-2);
  transition:      color var(--t-fast);
}
/* Number circle — first span */
.step-lbl > span:first-child {
  width:           36px;
  height:          36px;
  border-radius:   var(--r-full);
  background:      var(--primary-light);
  color:           #fff;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .88rem;
  font-weight:     700;
  box-shadow:      0 2px 8px rgba(30,64,175,.25);
  transition:      background var(--t-fast), box-shadow var(--t-fast);
  flex-shrink:     0;
}
/* Text label pill — second span — oval background so it never bleeds into white page */
.step-lbl > span:last-child {
  background:    var(--primary-light);
  color:         #fff;
  padding:       3px 12px;
  border-radius: var(--r-full);
  font-size:     .72rem;
  font-weight:   700;
  letter-spacing:.03em;
  white-space:   nowrap;
  transition:    background var(--t-fast);
}
/* Active */
.step-lbl.active                    { color: var(--primary); }
.step-lbl.active > span:first-child { background: var(--primary); box-shadow: 0 4px 14px rgba(30,64,175,.4); }
.step-lbl.active > span:last-child  { background: var(--primary); }
/* Done */
.step-lbl.done > span:first-child   { background: var(--accent); box-shadow: 0 4px 14px rgba(234,88,12,.35); }
.step-lbl.done > span:last-child    { background: var(--accent); }

/* Form fieldsets */
.f-step { display: none; border: none; padding: 0; }
.f-step.active { display: block; }
.f-legend {
  font-family:   var(--font-heading);
  font-size:     1.05rem;
  font-weight:   700;
  color:         var(--primary-dark);
  margin-bottom: var(--sp-6);
}

/* Service radio grid */
.svc-radio-grid {
  display:               grid;
  grid-template-columns: repeat(2,1fr);
  gap:                   var(--sp-3);
  margin-bottom:         var(--sp-6);
}
.service-selection-hint {
  margin: -16px 0 16px;
  color: var(--text-secondary);
  font-size: .8rem;
}
.svc-radio { cursor: pointer; }
.svc-radio input[type="radio"],
.svc-radio input[type="checkbox"] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}
.svc-radio-card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-2);
  padding:        var(--sp-4) var(--sp-3);
  border:         2px solid var(--border);
  border-radius:  var(--r-md);
  background:     var(--bg);
  font-size:      .84rem;
  font-weight:    600;
  color:          var(--text-secondary);
  text-align:     center;
  transition:     border-color var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
  cursor:         pointer;
}
.svc-radio-card svg { color: var(--primary-light); transition: color var(--t-fast); }
.svc-radio:nth-child(1) .svc-radio-card svg { color: #0EA5A4; }
.svc-radio:nth-child(2) .svc-radio-card svg { color: #F97316; }
.svc-radio:nth-child(3) .svc-radio-card svg { color: #2563EB; }
.svc-radio:nth-child(4) .svc-radio-card svg { color: #7C3AED; }
.svc-checkbox-grid .svc-radio:nth-child(4) .svc-radio-card svg { color: #EC4899; }
.svc-checkbox-grid .svc-radio:nth-child(4) .svc-radio-card:hover { border-color: #EC4899; }
.svc-checkbox-grid .svc-radio:nth-child(1) .svc-radio-card:hover { border-color: #0EA5A4; }
.svc-checkbox-grid .svc-radio:nth-child(2) .svc-radio-card:hover { border-color: #F97316; }
.svc-checkbox-grid .svc-radio:nth-child(3) .svc-radio-card:hover { border-color: #2563EB; }
.svc-radio-card:hover { border-color: var(--primary-light); background: rgba(30,64,175,.04); }
.svc-radio input:checked + .svc-radio-card {
  border-color: var(--primary);
  background:   linear-gradient(145deg, var(--primary), var(--primary-dark));
  color:        #fff;
  box-shadow:   0 8px 22px rgba(113,68,242,.28);
  transform:    translateY(-2px);
}
.svc-radio input:checked + .svc-radio-card svg { color: rgba(255,255,255,.9); }
.svc-radio input:focus-visible + .svc-radio-card { outline: 3px solid var(--primary); outline-offset: 2px; }
.svc-checkbox-grid .svc-radio-card {
  position: relative;
  overflow: hidden;
}
.svc-checkbox-grid .svc-radio-card::after {
  content: '✓';
  position: absolute;
  top: 9px;
  right: 11px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--text-light);
  font-size: .75rem;
  opacity: .65;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.svc-checkbox-grid input:checked + .svc-radio-card::after {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-dark);
  opacity: 1;
}
.selected-services {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  margin: -4px 0 var(--sp-5);
  color: var(--text-secondary);
  font-size: .78rem;
}
.selected-services-label {
  font-weight: 700;
  white-space: nowrap;
}
.selected-services-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.selected-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px 4px 11px;
  border: 1px solid rgba(113,68,242,.35);
  border-radius: var(--r-full);
  background: rgba(113,68,242,.1);
  color: var(--primary);
  font-size: .75rem;
  font-weight: 700;
}
.selected-service-chip button {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.selected-service-chip button:hover {
  background: rgba(113,68,242,.18);
}
@media (max-width: 560px) {
  .selected-services { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* Form groups */
.f-group { margin-bottom: var(--sp-5); }
.f-group label {
  display:       flex;
  align-items:   center;
  gap:           5px;
  font-size:     .82rem;
  font-weight:   600;
  color:         var(--primary-dark);
  margin-bottom: var(--sp-2);
}
.req { color: var(--destructive); }
.f-optional { font-weight: 400; color: var(--text-light); font-size: .75rem; }

.f-group input:not([type="checkbox"]):not([type="radio"]),
.f-group select,
.f-group textarea {
  width:         100%;
  padding:       10px 14px;
  border:        1.5px solid var(--border);
  border-radius: var(--r-md);
  font-family:   var(--font-body);
  font-size:     .9rem;
  color:         var(--text-primary);
  background:    var(--bg-white);
  transition:    border-color var(--t-fast), box-shadow var(--t-fast);
  outline:       none;
  appearance:    none;
}
.f-group input:hover,
.f-group select:hover    { border-color: var(--primary-light); }
.f-group input:focus,
.f-group select:focus,
.f-group textarea:focus  {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(30,64,175,.12);
}
.f-group input[aria-invalid="true"],
.f-group select[aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow:   0 0 0 3px rgba(220,38,38,.1);
}
.f-group textarea { resize: vertical; min-height: 90px; line-height: 1.6; }
.f-group select   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }

.f-error {
  display:    block;
  font-size:  .78rem;
  color:      var(--destructive);
  margin-top: var(--sp-1);
  min-height: 18px;
}

.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* Time pills */
.time-pills {
  display:               grid;
  grid-template-columns: repeat(2,1fr);
  gap:                   var(--sp-3);
  margin-bottom:         var(--sp-5);
}
.time-pill {
  padding:       10px var(--sp-3);
  border:        1.5px solid var(--border);
  border-radius: var(--r-md);
  background:    var(--bg);
  font-family:   var(--font-body);
  font-size:     .83rem;
  font-weight:   500;
  color:         var(--text-secondary);
  cursor:        pointer;
  transition:    border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
  text-align:    center;
}
.time-pill:hover           { border-color: var(--primary-light); color: var(--primary); }
.time-pill.selected        { background: var(--primary); border-color: var(--primary); color: #fff; }
.time-pill:focus-visible   { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Booking summary */
.booking-summary {
  background:    var(--bg);
  border:        1px solid var(--border);
  border-radius: var(--r-md);
  padding:       var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.booking-summary h4 {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-2);
  font-size:     .85rem;
  font-weight:   700;
  color:         var(--primary-dark);
  margin-bottom: var(--sp-4);
}
.bs-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-3); }
.bs-item .bs-lbl  { font-size: .72rem; color: var(--text-light); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; }
.bs-item .bs-val  { font-size: .85rem; font-weight: 600; color: var(--primary-dark); }

/* Consent */
.f-consent { margin-bottom: var(--sp-6); }
.checkbox-label {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-3);
  cursor:      pointer;
  font-size:   .84rem;
  color:       var(--text-secondary);
  line-height: 1.5;
}
.checkbox-label input[type="checkbox"] {
  width:        18px;
  height:       18px;
  accent-color: var(--primary);
  flex-shrink:  0;
  margin-top:   2px;
  cursor:       pointer;
}

/* Form nav */
.f-nav { display: flex; justify-content: flex-end; gap: var(--sp-3); padding-top: var(--sp-2); }
.f-nav-split { justify-content: space-between; }
.btn-submit { padding: 12px 32px; font-size: .95rem; }

/* Form success */
.f-success {
  text-align:     center;
  padding:        var(--sp-12) var(--sp-6);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-4);
}
/* hidden attribute must always win over display:flex */
.f-success[hidden] { display: none !important; }
.success-ring {
  width:         72px;
  height:        72px;
  border-radius: var(--r-full);
  background:    linear-gradient(135deg, var(--primary), var(--accent));
  display:       flex;
  align-items:   center;
  justify-content: center;
  box-shadow:    0 8px 24px rgba(234,88,12,.35);
  animation:     successPop .5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes successPop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.f-success h3 { font-family: var(--font-heading); font-size: 1.4rem; color: var(--primary-dark); }
.f-success p  { color: var(--text-secondary); font-size: .9rem; max-width: 360px; }
.success-contact { font-size: .85rem; }
.success-contact a { color: var(--primary); text-decoration: none; font-weight: 600; }
.success-contact a:hover { text-decoration: underline; }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer { background: var(--primary-dark); color: rgba(255,255,255,.75); }

.footer-top { padding: var(--sp-16) 0 var(--sp-12); }
.footer-inner {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap:                   var(--sp-10);
}

.footer-logo {
  display:         flex;
  align-items:     center;
  gap:             var(--sp-2);
  font-family:     var(--font-heading);
  font-size:       1.1rem;
  font-weight:     800;
  color:           #fff;
  text-decoration: none;
  margin-bottom:   var(--sp-4);
}
.footer-logo span { color: var(--accent-light); }
.footer-brand p   { font-size: .85rem; line-height: 1.7; margin-bottom: var(--sp-3); }
.footer-reg       { font-size: .72rem; color: rgba(255,255,255,.35); }

.footer-nav h4 {
  font-family:   var(--font-heading);
  font-size:     .88rem;
  font-weight:   700;
  color:         #fff;
  margin-bottom: var(--sp-4);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.footer-nav ul,
.footer-contact ul { list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-nav a,
.footer-contact a  {
  font-size:       .84rem;
  color:           rgba(255,255,255,.65);
  text-decoration: none;
  transition:      color var(--t-fast);
}
.footer-nav a:hover,
.footer-contact a:hover { color: var(--accent-light); }
.footer-nav a:focus-visible,
.footer-contact a:focus-visible { outline: 2px solid rgba(255,255,255,.5); outline-offset: 3px; border-radius: 2px; }

.footer-contact h4 {
  font-family:   var(--font-heading);
  font-size:     .88rem;
  font-weight:   700;
  color:         #fff;
  margin-bottom: var(--sp-4);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.footer-contact li { font-size: .84rem; color: rgba(255,255,255,.65); }

.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: var(--sp-5) 0; }
.footer-bottom-inner {
  display:         flex;
  justify-content: space-between;
  font-size:       .78rem;
  color:           rgba(255,255,255,.35);
  flex-wrap:       wrap;
  gap:             var(--sp-2);
}

/* ================================================================
   FLOATING ACTION BUTTON
   ================================================================ */
.fab {
  position:       fixed;
  bottom:         28px;
  right:          28px;
  z-index:        999;
  width:          56px;
  height:         56px;
  border-radius:  var(--r-full);
  background:     #25D366;
  color:          #fff;
  display:        flex;
  align-items:    center;
  justify-content: center;
  box-shadow:     0 6px 24px rgba(37,211,102,.45);
  text-decoration: none;
  transition:     transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
  overflow:       visible;
}
.fab:hover          { transform: scale(1.1); background: #128C7E; box-shadow: 0 8px 28px rgba(18,140,126,.5); }
.fab:focus-visible  { outline: 3px solid #25D366; outline-offset: 3px; }
.fab-ping {
  position:      absolute;
  inset:         -4px;
  border-radius: var(--r-full);
  border:        2px solid #25D366;
  animation:     ping 2s ease-out infinite;
  pointer-events: none;
}
@keyframes ping {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ================================================================
   SCROLL-REVEAL ANIMATION
   ================================================================ */
.reveal {
  opacity:    0;
  transform:  translateY(28px);
  transition: opacity var(--t-slow), transform var(--t-slow);
}
.reveal.visible {
  opacity:   1;
  transform: translateY(0);
}

/* ================================================================
   SOCIAL FOLLOW CTA
   ================================================================ */
.social-follow-section { padding: 42px 0; background: linear-gradient(120deg, #24165f, #3c2590); color: #fff; }
.social-follow-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.social-follow-section .eyebrow-label { color: var(--accent); }
.social-follow-section h2 { margin-top: 5px; color: #fff; font: 700 clamp(1.35rem, 3vw, 2rem)/1.2 var(--font-heading); }
.social-follow-section p { margin-top: 8px; color: rgba(255,255,255,.72); font-size: .9rem; }
.social-follow-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.social-follow-link { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--r-full); color: #fff; font-size: .82rem; font-weight: 700; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast); }
.social-follow-link:hover, .social-follow-link:focus-visible { background: rgba(255,255,255,.14); border-color: var(--accent); transform: translateY(-2px); }
.social-follow-link span { color: var(--accent); font-size: 1.1rem; }
.social-follow-prompt { position: fixed; right: 24px; bottom: 92px; z-index: 20; display: flex; align-items: flex-start; gap: 12px; width: min(350px, calc(100vw - 32px)); padding: 18px 18px 17px; border: 1px solid rgba(217,252,80,.35); border-radius: 16px; background: #232326; box-shadow: 0 14px 40px rgba(0,0,0,.35); color: #fff; opacity: 0; transform: translateY(18px); transition: opacity .25s ease, transform .25s ease; }
.social-follow-prompt.is-visible { opacity: 1; transform: translateY(0); }
.social-follow-prompt-icon { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: rgba(217,252,80,.14); color: var(--accent); }
.social-follow-prompt strong { display: block; font: 700 1rem var(--font-heading); }
.social-follow-prompt p { margin: 3px 20px 10px 0; color: rgba(255,255,255,.7); font-size: .8rem; line-height: 1.45; }
.social-follow-prompt-links { display: flex; gap: 14px; }
.social-follow-prompt-links a { color: var(--accent); font-size: .8rem; font-weight: 700; text-decoration: none; }
.social-follow-prompt-links a:hover { text-decoration: underline; }
.social-follow-close { position: absolute; top: 7px; right: 9px; border: 0; background: transparent; color: rgba(255,255,255,.65); cursor: pointer; font-size: 1.35rem; line-height: 1; }
.social-follow-close:hover { color: #fff; }
@media (max-width: 700px) {
  .social-follow-inner { align-items: flex-start; flex-direction: column; }
  .social-follow-actions { justify-content: flex-start; }
  .social-follow-prompt { right: 16px; bottom: 82px; }
}

/* ================================================================
   RESPONSIVE — 1024px
   ================================================================ */
@media (max-width: 1024px) {
  .hero-inner    { grid-template-columns: 1fr; text-align: center; }
  .hero-visual   { display: none; }
  .hero-btns,
  .hero-trust    { justify-content: center; }
  .hero-sub      { margin-left: auto; margin-right: auto; }

  .about-inner   { grid-template-columns: 1fr; }
  .about-visual  { max-width: 480px; margin: 0 auto; }
  .about-content .section-heading { text-align: center; }

  .booking-layout { grid-template-columns: 1fr; }
  .booking-sidebar { display: none; }

  .footer-inner  { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}

/* ================================================================
   RESPONSIVE — 768px
   ================================================================ */
@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  .section { padding: var(--sp-16) 0; }

  .nav-links   { display: none; }
  .nav-phone   { display: none; }
  .nav-actions  { display: block; }
  .nav-actions .btn-cta { display: none; }
  .theme-toggle {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 1001;
    width: 50px;
    height: 50px;
    background: rgba(24,24,27,.92);
    border-color: rgba(217,252,80,.65);
    box-shadow: 0 5px 18px rgba(0,0,0,.3);
  }

  .mobile-theme-toggle {
    display: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  body:not(.dark-theme) .theme-toggle {
    background: rgba(255,255,255,.92);
    border-color: rgba(113,68,242,.35);
  }
  .hamburger   { display: flex; }
  .hamburger   { margin-left: auto; }

  .nav-links.open {
    display:    flex;
    flex-direction: column;
    position:   absolute;
    top:        var(--nav-h);
    left:       0; right: 0;
    background: rgba(255,255,255,.97);
    backdrop-filter: blur(12px);
    padding:    var(--sp-5) var(--sp-6) var(--sp-6);
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid var(--border);
    gap:        var(--sp-2);
    z-index:    999;
  }
  .nav-link    { padding: var(--sp-3) 0; font-size: 1rem; border-bottom: 1px solid var(--muted); }
  .nav-link:last-child { border-bottom: none; }

  .hero        { padding: var(--sp-12) 0 var(--sp-10); }
  .hero-heading { font-size: clamp(1.7rem, 7vw, 2.4rem); }

  .stats-inner { gap: var(--sp-5); }
  .stat-sep    { height: 30px; }

  .services-grid    { grid-template-columns: 1fr; }
  .areas-grid       { grid-template-columns: repeat(2,1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .ac-stats         { grid-template-columns: repeat(2,1fr); }

  .f-row         { grid-template-columns: 1fr; }
  .svc-radio-grid { grid-template-columns: repeat(2,1fr); }
  .time-pills    { grid-template-columns: 1fr; }
  .bs-grid       { grid-template-columns: 1fr; }

  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-bottom-inner { flex-direction: column; text-align: center; }

  .fab { bottom: 20px; right: 20px; width: 50px; height: 50px; }
}

@media (max-width: 480px) {
  .nav-inner { gap: var(--sp-3); }
  .logo { min-width: 0; }
  .logo-icon { width: 28px; height: 28px; }
  .logo-text { font-size: .98rem; }
  .lang-globe-btn { padding: 0 9px; }
  .hamburger { padding: 6px 2px; }

  .hero-heading { font-size: clamp(1.75rem, 9vw, 2.25rem); }
  .hero-sub { font-size: .95rem; }
  .hero-btns > * { width: 100%; justify-content: center; }
  .reviews-bg svg,
  .areas-map-bg svg { min-height: 100%; }
  .reviews-quotes { opacity: .55; }
}

/* ================================================================
   RESPONSIVE — 480px
   ================================================================ */
@media (max-width: 480px) {
  .container   { padding: 0 var(--sp-4); }
  .hero-btns   { flex-direction: column; align-items: center; }
  .hero-trust  { flex-direction: column; align-items: center; }
  .stats-inner { flex-direction: column; gap: var(--sp-5); }
  .stat-sep    { width: 80px; height: 1px; }
  .areas-grid  { grid-template-columns: 1fr; }
  .booking-form-wrap { padding: var(--sp-6) var(--sp-4); }
}

/* ================================================================
   LANGUAGE DROPDOWN — globe button, extreme left of navbar
   ================================================================ */

/* Remove old pill switcher if still present */
.lang-switcher { display: none; }

.lang-dropdown {
  position:   relative;
  flex-shrink: 0;
  /* Forces it to the very left inside flex nav-inner */
  order:      -999;
}

/* ── Trigger button ── */
.lang-globe-btn {
  display:     flex;
  align-items: center;
  gap:         5px;
  height:      38px;
  padding:     0 12px;
  background:  transparent;
  border:      1.5px solid var(--border);
  border-radius: var(--r-full);
  font-family: var(--font-body);
  font-size:   .82rem;
  font-weight: 700;
  color:       var(--primary);
  cursor:      pointer;
  transition:  background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
  white-space: nowrap;
  user-select: none;
}
.lang-globe-btn:hover {
  background:   rgba(30,64,175,.06);
  border-color: var(--primary-light);
}
.lang-globe-btn:focus-visible {
  outline:        2px solid var(--primary);
  outline-offset: 2px;
}
.lang-globe-btn[aria-expanded="true"] {
  background:   rgba(30,64,175,.08);
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(30,64,175,.1);
}

.globe-icon { color: var(--primary); flex-shrink: 0; }
.lang-current { letter-spacing: .05em; }
.lang-caret {
  color:      var(--text-secondary);
  transition: transform var(--t-fast);
  flex-shrink: 0;
}
.lang-globe-btn[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

/* ── Dropdown menu ── */
.lang-menu {
  position:      absolute;
  top:           calc(100% + 8px);
  left:          0;
  z-index:       2000;
  min-width:     160px;
  list-style:    none;
  margin:        0;
  padding:       6px 0;
  background:    var(--bg-white);
  border:        1.5px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow:    0 8px 32px rgba(30,64,175,.14), 0 2px 8px rgba(0,0,0,.06);
  /* Entry animation */
  transform-origin: top left;
  animation:     dropOpen .15s cubic-bezier(.34,1.56,.64,1);
}
@keyframes dropOpen {
  from { opacity:0; transform: scale(.95) translateY(-6px); }
  to   { opacity:1; transform: scale(1)   translateY(0); }
}

/* ── Option rows ── */
.lang-option {
  display:     flex;
  align-items: center;
  gap:         10px;
  padding:     10px 16px;
  font-family: var(--font-body);
  font-size:   .88rem;
  font-weight: 500;
  color:       var(--text-primary);
  cursor:      pointer;
  transition:  background var(--t-fast), color var(--t-fast);
  outline:     none;
}
.lang-option:hover { background: var(--bg); }
.lang-option:focus-visible {
  background:   var(--muted);
  outline:      2px solid var(--primary);
  outline-offset: -2px;
}
.lang-flag {
  display: inline-block;
  width: 24px;
  height: 16px;
  flex: 0 0 24px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.16);
  position: relative;
  color-scheme: light;
  forced-color-adjust: none;
  filter: none;
  mix-blend-mode: normal;
}
.lang-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}
.flag-fi {
  background:
    linear-gradient(to bottom, transparent 0 38%, #164b96 38% 62%, transparent 62%),
    linear-gradient(to right, transparent 0 35%, #164b96 35% 55%, transparent 55%),
    #fff;
}
.flag-se {
  background:
    linear-gradient(to bottom, transparent 0 38%, #f4c542 38% 62%, transparent 62%),
    linear-gradient(to right, transparent 0 35%, #f4c542 35% 55%, transparent 55%),
    #28609b;
}
.flag-gb {
  background: #012169;
}

/* Active/selected option */
.lang-option.active {
  background: rgba(30,64,175,.06);
  color:      var(--primary);
  font-weight: 700;
}
.lang-check {
  margin-left: auto;
  color:       var(--primary);
  opacity:     0;
  transition:  opacity var(--t-fast);
}
.lang-option.active .lang-check { opacity: 1; }

/* Divider between options (optional polish) */
.lang-option + .lang-option {
  border-top: 1px solid var(--muted);
}

/* ── Screen-reader-only utility ── */
.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
  .nav-phone { display: none; }
}
@media (max-width: 768px) {
  /* Keep dropdown visible on mobile, just shrink a bit */
  .lang-globe-btn { padding: 0 10px; font-size: .78rem; }
  .lang-menu      { min-width: 140px; }
}

/* ================================================================
   HERO — background photo layer
   ================================================================ */
.hero {
  /* keep the original gradient as fallback behind the photo */
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 50%, #EFF6FF 100%);
  position:   relative;
  overflow:   hidden;
}

.hero-bg-photo {
  position: absolute;
  inset:    0;
  z-index:  0;
}

/* Each slide fills the container, fades in/out */
.hero-slide {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center 30%;
  background-repeat:   no-repeat;
  opacity:             0;
  transition:          opacity 1.2s ease-in-out;
  will-change:         opacity;
}
.hero-slide.active {
  opacity: 1;
}
.hero-bg-overlay {
  position:   absolute;
  inset:      0;
  /* dark overlay so white text stays readable */
  background: linear-gradient(
    135deg,
    rgba(15, 30, 80, 0.78) 0%,
    rgba(30, 64, 175, 0.55) 60%,
    rgba(15, 30, 80, 0.70) 100%
  );
}

/* Ensure hero content sits above the photo */
.hero-bg-shapes,
.hero-inner {
  position: relative;
  z-index:  1;
}

/* Hero text adjustments — lighter bg needs white text */
.hero-heading            { color: #fff; }
.hero-heading .heading-accent { color: #93C5FD; }   /* light blue accent on dark bg */
.hero-sub                { color: rgba(255,255,255,.88); }
.hero-eyebrow            { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.35); color: #fff; }
.trust-item              { color: rgba(255,255,255,.9); }

/* ================================================================
   SERVICE CARDS — photo on top
   ================================================================ */

/* The card now uses flex column — photo first, body below */
.svc-card {
  padding:        0;   /* remove global padding; body section gets it */
  /* overflow:hidden removed — it kills 3D transform-style:preserve-3d */
  /* rounded corners kept via border-radius on the card itself */
}

/* Photo wrapper */
.svc-img-wrap {
  width:          100%;
  height:         200px;
  overflow:       hidden;
  flex-shrink:    0;
  position:       relative;
  /* Clip the top corners of the photo to match card radius */
  border-radius:  var(--r-lg) var(--r-lg) 0 0;
}
.svc-img-wrap img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center;
  display:        block;
  transition:     transform var(--t-slow);
}
.svc-card:hover .svc-img-wrap img {
  transform: scale(1.06);
}

/* Body content below the photo */
.svc-body {
  padding:        var(--sp-6);
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-4);
  flex:           1;
}

/* Icon floats up and overlaps photo/body boundary (like reference design) */
.svc-body .svc-icon-wrap {
  width:          52px;
  height:         52px;
  margin-top:     calc(-26px - var(--sp-3));  /* pull it up to overlap the photo */
  border:         3px solid #fff;
  box-shadow:     0 4px 16px rgba(30,64,175,.2);
  border-radius:  var(--r-md);
  flex-shrink:    0;
}

/* Featured (dark) card keeps its overlay tint on the image */
.svc-featured .svc-img-wrap::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(180deg, transparent 40%, rgba(15,30,80,0.45) 100%);
}
.svc-featured .svc-body .svc-icon-wrap {
  background:   rgba(255,255,255,.2);
  color:        #fff;
  border-color: rgba(255,255,255,.5);
}
/* All text inside featured card body is white; heading overridden to orange above */
.svc-featured .svc-body {
  color: #fff;
}

/* Badge repositioned for new card layout */
.svc-card .svc-badge {
  position: absolute;
  top:      var(--sp-3);
  right:    var(--sp-3);
  z-index:  2;
}

/* ================================================================
   ABOUT — photo beside the glass card
   ================================================================ */
.about-visual {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-5);
}

/* Photo wrapper */
.about-img-wrap {
  position:       relative;
  border-radius:  var(--r-xl);
  overflow:       hidden;
  height:         320px;
  box-shadow:     var(--shadow-xl);
}
.about-img-wrap img {
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center 20%;
  display:        block;
  transition:     transform var(--t-slow);
}
.about-img-wrap:hover img { transform: scale(1.04); }

/* Floating badge on the photo — bottom-left */
.about-img-badge {
  position:       absolute;
  bottom:         var(--sp-4);
  left:           var(--sp-4);
  display:        flex;
  align-items:    center;
  gap:            var(--sp-3);
  padding:        var(--sp-3) var(--sp-4);
  min-width:      0;
  z-index:        2;
}
.about-img-badge div {
  display:        flex;
  flex-direction: column;
  gap:            2px;
}
.about-img-badge strong {
  font-family:    var(--font-heading);
  font-size:      .85rem;
  font-weight:    700;
  color:          var(--primary-dark);
  white-space:    nowrap;
}
.about-img-badge span {
  font-size:      .7rem;
  color:          var(--text-secondary);
}

/* Floating stat pill — top-right corner of photo */
.about-img-stat {
  position:       absolute;
  top:            var(--sp-4);
  right:          var(--sp-4);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            2px;
  padding:        var(--sp-2) var(--sp-4);
  z-index:        2;
  text-align:     center;
}
.about-img-stat strong {
  font-family:    var(--font-heading);
  font-size:      1.5rem;
  font-weight:    800;
  color:          var(--primary);
  line-height:    1;
  white-space:    nowrap;
}
.about-img-stat span {
  font-size:      .68rem;
  font-weight:    600;
  color:          var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ================================================================
   RESPONSIVE — image adjustments for smaller screens
   ================================================================ */
@media (max-width: 900px) {
  .svc-img-wrap { height: 180px; }
  .about-img-wrap { height: 260px; }
}

@media (max-width: 768px) {
  /* Hero photo — darker overlay on mobile for readability */
  .hero-bg-overlay {
    background: linear-gradient(
      135deg,
      rgba(15, 30, 80, 0.85) 0%,
      rgba(30, 64, 175, 0.70) 100%
    );
  }
  .svc-img-wrap  { height: 220px; }
  .about-img-wrap { height: 240px; }
  /* Service grid is 1-col on mobile — wider image looks better */
}

@media (max-width: 480px) {
  .svc-img-wrap  { height: 200px; }
  .about-img-wrap { height: 200px; }
  .about-img-badge,
  .about-img-stat { display: none; } /* hide floating pills on very small screens */
}

/* ================================================================
   DARK-BACKGROUND TEXT CONTRAST — comprehensive fixes
   Rule: every element on a dark bg must use white / light text
   ================================================================ */

/* ── 1. HERO — photo + overlay ── */
/* Heading accent on dark bg: use light-blue instead of orange */
.hero .hero-heading .heading-accent { color: #93C5FD; }

/* All trust-item icons on dark hero */
.hero .trust-item svg { stroke: rgba(255,255,255,.8); }

/* ── 2. STATS BAR (dark navy background) ── */
.stats-bar                 { color: #fff; }   /* catch-all for any un-styled children */
.stat-item strong          { color: #fff; }
.stat-item span            { color: rgba(255,255,255,.7); }
.counter-plus              { color: #fff; }   /* the "+" next to js-counter */

/* ── 3. SERVICE CARDS — featured (dark gradient) ── */
/* Book-now button on the dark featured card must be visible */
.svc-featured .svc-body .btn-outline {
  color:        #fff;
  border-color: rgba(255,255,255,.5);
}
.svc-featured .svc-body .btn-outline:hover {
  background:   rgba(255,255,255,.15);
  border-color: #fff;
  color:        #fff;
}
/* svc-badge already orange, but ensure text stays white */
.svc-badge { color: #fff; }

/* ── 4. AREA CARDS — hover turns dark blue ── */
/* Tags go white text on dark hover */
.area-card:hover .area-tag,
.area-card:hover .area-tag-home {
  background:   rgba(255,255,255,.15);
  color:        #fff;
  border-color: rgba(255,255,255,.3);
}
/* Icon background lightens so icon stays visible */
.area-card:hover .area-icon {
  background:   rgba(255,255,255,.15);
}

/* ── 5. GLASS-CARD-DARK — always show white text ── */
.glass-card-dark,
.glass-card-dark h1,
.glass-card-dark h2,
.glass-card-dark h3,
.glass-card-dark h4,
.glass-card-dark p,
.glass-card-dark span,
.glass-card-dark li,
.glass-card-dark strong {
  color: #fff;
}
.glass-card-dark a {
  color: rgba(255,255,255,.85);
}
.glass-card-dark a:hover { color: #fff; }

/* ── 6. BOOKING SECTION (dark gradient background) ── */
/* Section heading/sub already uses .light-* classes, but add fallback */
.booking-section .section-heading { color: #fff; }
.booking-section .eyebrow-label   { color: rgba(255,255,255,.7); }
.booking-section .section-sub     { color: rgba(255,255,255,.75); }

/* Booking sidebar text — all white */
.booking-sidebar                  { color: #fff; }
.booking-sidebar h3               { color: #fff; }
.bsb-item > div strong            { color: rgba(255,255,255,.92); }
.bsb-item > div span              { color: rgba(255,255,255,.7); }
.bsb-cities span                  { color: rgba(255,255,255,.8); }
/* Icon inside bsb-icon box */
.bsb-icon svg                     { color: rgba(255,255,255,.9); }
.bsb-icon                         { color: rgba(255,255,255,.9); }

/* ── 7. FOOTER (dark navy background) ── */
.site-footer                      { color: rgba(255,255,255,.8); }
/* Logo text in footer */
.footer-logo-text                 { color: #fff; }
/* Footer brand paragraph */
.footer-brand p                   { color: rgba(255,255,255,.72); }
/* Footer nav / contact headings */
.footer-nav h4,
.footer-contact h4                { color: #fff; }
/* Footer nav links */
.footer-nav a,
.footer-contact a                 { color: rgba(255,255,255,.7); }
.footer-nav a:hover,
.footer-contact a:hover           { color: #fff; }
/* Footer contact list items (non-link) */
.footer-contact li                { color: rgba(255,255,255,.7); }
/* Footer bottom bar — raise from 35% to 55% opacity so it's readable */
.footer-bottom-inner              { color: rgba(255,255,255,.55); }
/* Footer registration number */
.footer-reg                       { color: rgba(255,255,255,.45); }

/* ── 8. STAT BADGES on hero visual (float cards) ── */
/* These are glass-card (light), so keep their existing dark text — no change needed */
/* But the "7 Days a Week" badge uses accent stroke — make strong text dark */
.stat-badge strong { color: var(--primary-dark); }
.stat-badge small  { color: var(--text-secondary); }

/* ── 9. ABOUT IMG BADGES (overlaid on photo) ── */
/* These use glass-card (light bg) — keep dark text */
.about-img-badge strong { color: var(--primary-dark); }
.about-img-badge span   { color: var(--text-secondary); }
.about-img-stat strong  { color: var(--primary); }
.about-img-stat span    { color: var(--text-secondary); }

/* ── 10. TESTIMONIAL AVATAR (primary bg) ── */
.test-avatar { color: #fff; }

/* ── 11. AF-CHECK circle (primary bg) ── */
.af-check { color: #fff; }

/* ── 12. STEP LABELS — active/done circles ── */
.step-lbl.active span { color: #fff; }
.step-lbl.done span   { color: #fff; }

/* ── 13. SVC RADIO — checked card (primary bg) ── */
.svc-radio input:checked + .svc-radio-card,
.svc-radio input:checked + .svc-radio-card span { color: #fff; }

/* ── 14. TIME PILLS — selected (primary bg) ── */
.time-pill.selected { color: #fff; }

/* ── 15. LIVE PILL on hero card ── */
/* It's green bg — keep its own green text, no change needed */

/* ── 16. NAV CTA button ── */
.btn-cta,
.btn-primary,
.btn-submit { color: #fff; }

/* ================================================================
   3D TILT — ensure cards clip correctly without overflow:hidden
   ================================================================ */
/* The badge needs z-index so it sits above the photo after removing overflow:hidden */
.svc-card .svc-badge { z-index: 3; }

/* Clip the ::after top-accent bar to stay within card radius */
.svc-card::after {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

/* The photo top corners must still be clipped (its own border-radius handles this) */
/* Bottom corners of photo: no rounding needed since body continues below */
.svc-img-wrap { border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* ================================================================
   BTN-SERVICES — filled blue, white border & text, hover effect
   ================================================================ */
.btn-services {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-2);
  padding:         11px 26px;
  border-radius:   var(--r-full);
  font-family:     var(--font-body);
  font-size:       .9rem;
  font-weight:     600;
  text-decoration: none;
  cursor:          pointer;
  white-space:     nowrap;
  /* Filled blue with white border and white text */
  background:      var(--primary);
  color:           #fff;
  border:          2px solid #fff;
  transition:      background var(--t-fast), color var(--t-fast),
                   border-color var(--t-fast), transform var(--t-fast),
                   box-shadow var(--t-fast);
}
.btn-services:hover {
  background:   var(--primary-light);
  border-color: #fff;
  color:        #fff;
  transform:    translateY(-2px);
  box-shadow:   0 8px 24px rgba(30,64,175,.45);
}
.btn-services:focus-visible {
  outline:        3px solid #fff;
  outline-offset: 3px;
}
.btn-services:active {
  transform:  translateY(0);
  background: var(--primary-dark);
}

/* ================================================================
   STATS BAR — fix counter span size matching parent strong
   ================================================================ */
/* The js-counter span inside a strong must be exactly the same size
   as the surrounding text (+, %) — no shrinking from flex/baseline */
.stat-item strong .js-counter,
.stat-item strong span {
  font-size:   inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  color:       inherit;
  display:     inline;
}
/* Also fix the ac-stat (about card) counters */
.ac-stat strong .js-counter,
.ac-stat strong span {
  font-size:   inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  color:       inherit;
  display:     inline;
}

/* ── Step label focus ring ── */
.step-lbl:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

/* ================================================================
   CONSENT CHECKBOX — ensure it is always clickable
   ================================================================ */
/* Remove any stacking context issues in the form */
.booking-form-wrap       { position: relative; z-index: 2; }
.f-step                  { position: relative; z-index: 2; }

/* Consent group — make absolutely sure nothing sits on top */
.f-consent               { position: relative; z-index: 3; }
.checkbox-label          { position: relative; z-index: 3; cursor: pointer; }

/* The checkbox itself — force it to be interactive */
.checkbox-label input[type="checkbox"] {
  position:           relative;
  z-index:            4;
  cursor:             pointer;
  pointer-events:     all;
  opacity:            1;
  width:              20px;
  height:             20px;
  min-width:          20px;
  accent-color:       var(--primary);
  flex-shrink:        0;
  margin-top:         2px;
  /* Force native checkbox appearance — never hide it */
  -webkit-appearance: checkbox;
  -moz-appearance:    checkbox;
  appearance:         checkbox;
}

/* The label text span — pointer-events none so click goes to the <label> */
.checkbox-label > span {
  cursor:         pointer;
  pointer-events: none;
}

/* f-success must NEVER block interaction when hidden */
.f-success         { pointer-events: none; }
.f-success:not([hidden]) { pointer-events: all; }

/* ── Error summary contact fallback links ── */
.error-summary a {
  color:       var(--destructive);
  font-weight: 600;
  word-break:  break-all;
}

/* ================================================================
   NEW COLOUR SCHEME OVERRIDES — Dark/Purple/Lime
   Applied over existing rules via cascade
   ================================================================ */

/* ── GLOBAL GLASS CARD — dark themed ── */
.glass-card {
  background:    rgba(255,255,255,0.06);
  border:        1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:    0 8px 32px rgba(113,68,242,0.15);
}

/* ── BUTTONS ── */
.btn-primary, .btn-cta, .btn-submit {
  background:   var(--accent);
  color:        var(--bg-dark);          /* dark text on lime */
  border-color: var(--accent);
  font-weight:  700;
}
.btn-primary:hover, .btn-cta:hover, .btn-submit:hover {
  background:   var(--accent-dark);
  border-color: var(--accent-dark);
  color:        var(--bg-dark);
  box-shadow:   0 6px 24px rgba(217,252,80,.4);
}
.btn-outline {
  background:   transparent;
  color:        var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover {
  background:   var(--primary);
  color:        #fff;
  box-shadow:   0 6px 24px rgba(113,68,242,.35);
}
.btn-ghost {
  background:   transparent;
  color:        var(--text-secondary);
  border-color: var(--muted);
}
.btn-ghost:hover { background: var(--muted); color: var(--text-primary); }

/* See Our Services button */
.btn-services {
  background:   var(--primary);
  color:        #fff;
  border-color: rgba(255,255,255,.5);
}
.btn-services:hover {
  background:   var(--primary-dark);
  border-color: #fff;
  box-shadow:   0 8px 24px rgba(113,68,242,.5);
}

/* ── EYEBROW / SECTION LABELS ── */
.eyebrow-label    { color: var(--primary); }
.light-eyebrow    { color: var(--accent); }
.section-heading  { color: var(--text-primary); font-family: var(--font-heading); }
.light-heading    { color: #fff; }
.heading-accent   { color: var(--primary); }
.section-sub      { color: var(--text-secondary); }
.light-sub        { color: rgba(255,255,255,.75); }

/* ── NAVBAR — dark opaque ── */
.navbar {
  background:    rgba(24,24,27,0.96);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,.4); }

.logo-text        { color: #fff; }
.logo-em          { color: var(--accent); }

.nav-link         { color: rgba(255,255,255,.65); }
.nav-link:hover   { color: #fff; }
.nav-link::after  { background: var(--accent); }
.nav-link[aria-current="page"]       { color: #fff; }
.nav-link[aria-current="page"]::after { width: 100%; background: var(--accent); }
.nav-link:focus-visible { outline-color: var(--accent); }

.nav-phone        { color: var(--accent-mint); }
.nav-phone:hover  { color: #fff; }

body.dark-theme .hamburger span { background: #fff; }
body:not(.dark-theme) .hamburger span { background: var(--primary); }

/* Mobile menu open */
.nav-links.open {
  background:    rgba(24,24,27,0.98) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.nav-link { border-bottom-color: rgba(255,255,255,.08) !important; }

/* ── HERO ── */
.hero {
  background: var(--bg-dark);
}
.shape-1 { background: var(--primary); }
.shape-2 { background: var(--accent); }
.shape-3 { background: var(--accent-mint); }

.hero-bg-overlay {
  background: linear-gradient(
    135deg,
    rgba(24,24,27,0.82) 0%,
    rgba(113,68,242,0.45) 60%,
    rgba(24,24,27,0.78) 100%
  ) !important;
}

.hero-eyebrow {
  background:   transparent;
  border-color: #16a34a;
  color:        #fff;
}
.hero-eyebrow .eyebrow-dot { background: #16a34a; }
.hero-heading { color: #fff; }
.hero .hero-heading .heading-accent { color: var(--accent) !important; }
.hero-sub     { color: rgba(255,255,255,.78); }
.trust-item   { color: rgba(255,255,255,.85); }
.trust-item svg { stroke: var(--accent); }

/* Hero card — dark glass */
.hero-card {
  background:  rgba(24,24,27,0.75);
  border:      1px solid rgba(255,255,255,.10);
  box-shadow:  0 24px 64px rgba(0,0,0,.5);
}
.hc-logo-mini { color: #fff; }
.hc-stars     { color: var(--accent); }
.hc-rating strong, .hc-rating span { color: rgba(255,255,255,.85); }
.hc-footer    { border-top-color: rgba(255,255,255,.10); }
.hc-cities    { color: #fff; }
.hc-avail     { color: var(--accent); }

.hcs-item {
  background: rgba(255,255,255,.06);
  color:      rgba(255,255,255,.85);
}
.hcs-item:hover { background: rgba(113,68,242,.25); color: #fff; }

/* Stat badges — dark glass */
.stat-badge {
  background:  rgba(24,24,27,0.85);
  border:      1px solid rgba(255,255,255,.10);
}
.stat-badge strong { color: #fff; }
.stat-badge small  { color: rgba(255,255,255,.6); }

/* ── STATS BAR ── */
.stats-bar {
  background: var(--bg-dark);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 3px solid var(--accent);
}
.stat-item strong { color: var(--accent); }
.stat-item span   { color: rgba(255,255,255,.6); }
.stat-sep         { background: rgba(255,255,255,.12); }
.counter-plus     { color: var(--accent); }

/* ── SERVICES SECTION ── */
.services-section {
  background: var(--bg);
}
.services-section::before {
  background: linear-gradient(90deg, var(--primary), var(--accent));
}
.svc-card {
  background:    #fff;
  border-color:  var(--muted);
}
.svc-card::after  { background: var(--muted); }
.svc-card:hover::after { background: var(--primary); }
.svc-card:hover   { box-shadow: var(--shadow-xl); }

.svc-card h3      { color: var(--text-primary); }
.svc-card p       { color: var(--text-secondary); }
.svc-list li      { color: var(--text-secondary); }
.svc-list li::before { color: var(--primary); }
.svc-icon-wrap    { background: rgba(113,68,242,.08); color: var(--primary); }

/* Featured card — deep purple */
.svc-featured {
  background:   linear-gradient(145deg, #18181B 0%, #2d1f6e 100%);
  border-color: transparent;
  color:        #fff;
}
.svc-featured h3 { color: var(--accent) !important; }
.svc-featured p,
.svc-featured .svc-list li { color: rgba(255,255,255,.88) !important; }
.svc-featured .svc-list li::before { color: var(--accent-mint); }
.svc-featured .svc-body    { color: #fff; }
.svc-featured .svc-body .svc-icon-wrap {
  background:   rgba(217,252,80,.15);
  color:        var(--accent);
  border-color: rgba(217,252,80,.3);
}
.svc-badge {
  background: var(--accent);
  color:      var(--bg-dark);
}

/* ── ABOUT SECTION ── */
.about-section    { background: var(--bg-dark); }
.about-blob       { background: rgba(113,68,242,.08); }

.about-card {
  background: rgba(255,255,255,.04);
  border:     1px solid rgba(255,255,255,.08);
}
.ac-header > div strong { color: #fff; }
.ac-header > div span   { color: rgba(255,255,255,.6); }
.ac-stats               { border-color: rgba(255,255,255,.08); }
.ac-stat strong         { color: var(--accent) !important; }
.ac-stat small          { color: rgba(255,255,255,.55); }
.ac-link                { color: rgba(255,255,255,.7); }
.ac-link:hover          { background: rgba(113,68,242,.15); color: #fff; }
.ac-ytunnus             { color: rgba(255,255,255,.35); border-top-color: rgba(255,255,255,.08); }

.about-content .section-heading { color: #fff; }
.about-content p                { color: rgba(255,255,255,.72); }
.af-row > div strong            { color: #fff; }
.af-row > div p                 { color: rgba(255,255,255,.6); }
.af-check                       { background: var(--primary); }

/* About image badges */
.about-img-badge {
  background: rgba(24,24,27,0.85);
  border:     1px solid rgba(255,255,255,.10);
}
.about-img-badge strong { color: #fff; }
.about-img-badge span   { color: rgba(255,255,255,.6); }
.about-img-stat {
  background: var(--accent);
  border:     none;
}
.about-img-stat strong { color: var(--bg-dark); }
.about-img-stat span   { color: rgba(24,24,27,.7); }

/* ── AREAS SECTION ── */
.areas-section   { background: var(--bg); }

.area-card {
  background:    #fff;
  border-color:  var(--muted);
}
.area-card h3   { color: var(--text-primary); }
.area-card p    { color: var(--text-secondary); }
.area-icon      { background: rgba(113,68,242,.08); color: var(--primary); }
.area-tag       { background: rgba(113,68,242,.08); color: var(--primary); border-color: rgba(113,68,242,.2); }
.area-tag-home  { background: rgba(217,252,80,.12); color: #5a6000; border-color: rgba(217,252,80,.4); }
.area-home      { border-color: var(--primary); }

.area-card:hover {
  background:   var(--bg-dark);
  border-color: var(--bg-dark);
}
.area-card:hover h3,
.area-card:hover p          { color: #fff; }
.area-card:hover .area-icon { background: rgba(255,255,255,.12); color: var(--accent); }
.area-card:hover .area-tag,
.area-card:hover .area-tag-home {
  background:   rgba(217,252,80,.15);
  color:        var(--accent);
  border-color: rgba(217,252,80,.35);
}

/* ── TESTIMONIALS ── */
.testimonials-section { background: var(--bg-dark); }

.test-card {
  background:   rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.test-card:hover { box-shadow: 0 8px 32px rgba(113,68,242,.25); border-color: var(--primary); }
.test-stars      { color: var(--accent); }
.test-card > p   { color: rgba(255,255,255,.75); }
.test-author     { border-top-color: rgba(255,255,255,.08); }
.test-avatar     { background: var(--primary); color: #fff; }
.test-author cite  { color: #fff; }
.test-author small { color: rgba(255,255,255,.5); }

/* Testimonials section headings */
.testimonials-section .section-heading { color: #fff; }
.testimonials-section .eyebrow-label   { color: var(--accent); }
.testimonials-section .section-sub     { color: rgba(255,255,255,.65); }

/* ── BOOKING SECTION ── */
.booking-section {
  background: var(--bg);
}
.booking-section .section-heading { color: var(--text-primary); }
.booking-section .eyebrow-label   { color: var(--primary); }
.booking-section .section-sub     { color: var(--text-secondary); }

.booking-sidebar {
  background:    linear-gradient(145deg, var(--primary-dark), var(--primary));
  border-radius: var(--r-xl);
  color:         #fff;
}
.booking-sidebar h3               { color: #fff; }
.bsb-item > div strong            { color: rgba(255,255,255,.92); }
.bsb-item > div span              { color: rgba(255,255,255,.7); }
.bsb-icon                         { background: rgba(255,255,255,.12); color: #fff; }
.bsb-cities span {
  background:   rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.2);
  color:        rgba(255,255,255,.8);
}

.booking-form-wrap {
  background:    #fff;
  border-radius: var(--r-xl);
  border:        1px solid var(--muted);
  box-shadow:    var(--shadow-lg);
}

/* Step labels */
.step-lbl > span:first-child       { background: var(--primary-light); color: #fff; }
.step-lbl.active > span:first-child { background: var(--primary); }
.step-lbl.active > span:last-child  { background: var(--primary); }
.step-lbl.done > span:first-child   { background: var(--accent); color: var(--bg-dark); }
.step-lbl.done > span:last-child    { background: var(--accent); color: var(--bg-dark); }
.step-lbl:not(.active):not(.done) > span:last-child { background: var(--primary-light); }

/* Step fill bar */
.step-fill { background: linear-gradient(90deg, var(--primary), var(--accent)); }

/* Completed steps: white numbered circle and green outlined label. */
.step-lbl.done { color: #16a34a; }
.step-lbl.done > span:first-child {
  background: #fff;
  color: #16a34a;
  border: 2px solid #16a34a;
  box-shadow: 0 3px 10px rgba(22,163,74,.2);
}
.step-lbl.done > span:last-child {
  background: transparent;
  color: #16a34a;
  border: 1px solid #16a34a;
}

/* Service radio */
.svc-radio-card           { border-color: var(--muted); color: var(--text-secondary); }
.svc-radio-card svg       { color: var(--primary); }
.svc-radio-card:hover     { border-color: var(--primary); background: rgba(113,68,242,.04); }
.svc-radio input:checked + .svc-radio-card {
  background:   var(--primary);
  border-color: var(--primary);
  color:        #fff;
  box-shadow:   0 4px 16px rgba(113,68,242,.35);
}

/* Time pills */
.time-pill         { border-color: var(--muted); color: var(--text-secondary); }
.time-pill:hover   { border-color: var(--primary); color: var(--primary); }
.time-pill.selected { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Submit button */
.btn-submit {
  background:   var(--primary);
  border-color: var(--primary);
  color:        #fff;
}
.btn-submit:hover {
  background:   var(--primary-dark);
  box-shadow:   0 6px 24px rgba(113,68,242,.4);
}

/* ── FOOTER ── */
.site-footer             { background: var(--bg-dark); color: rgba(255,255,255,.75); }
.footer-logo             { color: #fff; text-decoration: none; }
.footer-logo span        { color: var(--accent); }
.footer-brand p          { color: rgba(255,255,255,.6); }
.footer-reg              { color: rgba(255,255,255,.35); }
.footer-nav h4,
.footer-contact h4       { color: #fff; }
.footer-nav a,
.footer-contact a        { color: rgba(255,255,255,.6); }
.footer-nav a:hover,
.footer-contact a:hover  { color: var(--accent); }
.footer-contact li       { color: rgba(255,255,255,.6); }
.footer-bottom           { border-top-color: rgba(255,255,255,.06); }
.footer-bottom-inner     { color: rgba(255,255,255,.4); }

/* ── FAB (WhatsApp) ── */
.fab { background: #25D366; box-shadow: 0 6px 24px rgba(37,211,102,.45); }

/* ── LANG DROPDOWN ── */
.lang-globe-btn {
  border-color: rgba(255,255,255,.2);
  color:        rgba(255,255,255,.85);
}
.lang-globe-btn:hover {
  background:   rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.4);
}
.lang-globe-btn[aria-expanded="true"] {
  background:   rgba(113,68,242,.2);
  border-color: var(--primary);
}
.globe-icon       { color: var(--accent); }
.lang-current     { color: #fff; }
.lang-caret       { color: rgba(255,255,255,.5); }
.lang-menu {
  background:   #18181B;
  border-color: rgba(255,255,255,.1);
  box-shadow:   0 8px 32px rgba(0,0,0,.5);
}
.lang-option          { color: rgba(255,255,255,.85); }

body:not(.dark-theme) .lang-globe-btn {
  border-color: rgba(113,68,242,.28);
  color: var(--primary);
}
body:not(.dark-theme) .lang-globe-btn:hover {
  background: rgba(113,68,242,.08);
  border-color: var(--primary);
}
body:not(.dark-theme) .lang-current {
  color: var(--text-primary);
}
body:not(.dark-theme) .lang-caret {
  color: var(--text-secondary);
}
body:not(.dark-theme) .lang-menu {
  background: #fff;
  border-color: rgba(113,68,242,.18);
  box-shadow: 0 8px 32px rgba(24,24,27,.18);
}
body:not(.dark-theme) .lang-option {
  color: var(--text-primary);
}
.lang-option:hover    { background: rgba(255,255,255,.06); }
.lang-option.active   { background: rgba(113,68,242,.2); color: var(--accent); }
.lang-check           { color: var(--accent); }
.lang-option + .lang-option { border-top-color: rgba(255,255,255,.06); }

/* ── SCROLL REVEAL ── */
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ── BOOKING FORM INPUTS ── */
.f-group label             { color: var(--text-primary); }
.f-group input:not([type="checkbox"]):not([type="radio"]),
.f-group select,
.f-group textarea {
  border-color: var(--muted);
  color:        var(--text-primary);
  background:   #fff;
}
.f-group input:focus,
.f-group select:focus,
.f-group textarea:focus {
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(113,68,242,.12);
}
.f-error { color: var(--destructive); }

/* Booking summary */
.booking-summary { background: #F7F5ED; border-color: var(--muted); }
.booking-summary h4 { color: var(--text-primary); }
.bs-item .bs-lbl    { color: var(--text-light); }
.bs-item .bs-val    { color: var(--text-primary); }

/* ── SUCCESS MESSAGE ── */
.f-success h3           { color: var(--primary); }
.success-ring           { background: var(--primary); box-shadow: 0 8px 32px rgba(113,68,242,.4); }

/* ── ERROR SUMMARY ── */
.error-summary { background: rgba(239,68,68,.05); border-color: rgba(239,68,68,.25); }
.error-summary a { color: var(--destructive); }

/* ================================================================
   SCROLL ANIMATIONS — professional suite
   All elements start invisible; .anim-done triggers the entrance
   ================================================================ */

/* ── Base: hidden state for all animated elements ── */
[data-anim] {
  opacity:    0;
  will-change: opacity, transform;
  /* smooth cubic ease-out — feels natural not mechanical */
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Entrance states per animation type ── */
[data-anim="fade-up"]    { transform: translateY(40px); }
[data-anim="fade-down"]  { transform: translateY(-30px); }
[data-anim="fade-left"]  { transform: translateX(50px); }
[data-anim="fade-right"] { transform: translateX(-50px); }
[data-anim="scale-in"]   { transform: scale(0.88); }

/* ── Done: fully visible ── */
[data-anim].anim-done {
  opacity:   1;
  transform: none;
}

/* ── Section headings get a slightly longer duration for impact ── */
.section-heading[data-anim] {
  transition-duration: 0.8s;
}

/* ── Cards get a subtle shadow pop when they arrive ── */
.svc-card[data-anim].anim-done,
.test-card[data-anim].anim-done,
.area-card[data-anim].anim-done {
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.65s ease;
}

/* ── Stat items: scale-in with a bounce feel ── */
.stat-item[data-anim] {
  transition: opacity 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Stat badges: slight overshoot spring ── */
.stat-badge[data-anim] {
  transition: opacity 0.6s cubic-bezier(0.34, 1.4, 0.64, 1),
              transform 0.6s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ── Hero content/visual: faster entrance (already on screen) ── */
.hero-content[data-anim],
.hero-visual[data-anim] {
  opacity: 1;
  transform: none;
  will-change: auto;
  transition-duration: 0.75s;
  transition-delay:    0.15s;
}
.hero-content[data-anim],
.hero-visual[data-anim] { transition-property: none; }

/* ── Trust items stagger nicely ── */
.trust-item[data-anim] {
  transition-duration: 0.5s;
}

/* ── Footer items ── */
.footer-brand[data-anim],
.footer-nav[data-anim],
.footer-contact[data-anim] {
  transition-duration: 0.55s;
}

/* ── Parallax: hero slides move on scroll ── */
.hero-slide {
  will-change: transform;
  transition:  transform 0s linear; /* no transition — JS drives it smoothly */
}

/* ── Magnetic buttons: smooth return ── */
.btn-primary,
.btn-cta,
.btn-services {
  transition: background var(--t-fast), color var(--t-fast),
              border-color var(--t-fast), transform 0.3s cubic-bezier(0.34,1.56,0.64,1),
              box-shadow var(--t-fast);
}

/* ── Reduced motion: skip all animations ── */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
  }
  .hero-slide { transform: none !important; }
}

/* ── Legacy reveal classes — keep visible so nothing breaks ── */
.reveal         { opacity: 1 !important; transform: none !important; }
.reveal.visible { opacity: 1 !important; transform: none !important; }

/* ================================================================
   GOOGLE-STYLE REVIEW CARDS
   ================================================================ */
.google-aggregate {
  display:     inline-flex;
  align-items: center;
  gap:         var(--sp-3);
  background:  #fff;
  border:      1px solid var(--muted);
  border-radius: var(--r-full);
  padding:     10px 20px;
  margin-top:  var(--sp-4);
  box-shadow:  var(--shadow-sm);
}
.google-agg-text {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
}
.google-agg-score {
  font-family: var(--font-heading);
  font-size:   1.1rem;
  font-weight: 800;
  color:       #202124;
}
.google-agg-stars { color: #FBBC05; font-size: .95rem; letter-spacing: 1px; }
.google-agg-count { font-size: .78rem; color: #5f6368; }

/* Google review card */
.grev-card {
  background:    #fff;
  border:        1px solid #e0e0e0;
  border-radius: 12px;
  padding:       var(--sp-5);
  display:       flex;
  flex-direction: column;
  gap:           var(--sp-3);
  box-shadow:    0 1px 4px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
  transition:    box-shadow var(--t-normal), transform var(--t-normal);
}
.grev-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
  transform:  translateY(-3px);
}

.grev-header {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
}
.grev-avatar {
  width:         42px;
  height:        42px;
  border-radius: 50%;
  color:         #fff;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--font-heading);
  font-weight:   700;
  font-size:     1.1rem;
  flex-shrink:   0;
}
.grev-meta { flex: 1; }
.grev-name {
  display:     block;
  font-size:   .9rem;
  font-weight: 700;
  font-style:  normal;
  color:       #202124;
}
.grev-local { font-size: .75rem; color: #5f6368; }
.grev-google-icon { margin-left: auto; flex-shrink: 0; }

.grev-stars {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
}
.grev-stars > span:first-child { color: #FBBC05; font-size: 1rem; letter-spacing: 1px; }
.grev-date { font-size: .75rem; color: #5f6368; }

.grev-card > p {
  font-size:   .88rem;
  color:       #3c4043;
  line-height: 1.65;
  font-style:  normal;
  margin:      0;
}

.grev-service-tag {
  display:       inline-block;
  font-size:     .72rem;
  font-weight:   600;
  color:         #1a73e8;
  background:    rgba(26,115,232,.08);
  border:        1px solid rgba(26,115,232,.2);
  border-radius: var(--r-full);
  padding:       3px 10px;
  align-self:    flex-start;
}

/* Testimonial carousel */
.testimonials-carousel {
  overflow: hidden;
  position: relative;
}
.testimonials-track {
  display: flex;
  gap: var(--sp-6);
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.testimonials-track .grev-card {
  flex: 0 0 calc((100% - (2 * var(--sp-6))) / 3);
  min-width: 0;
}
.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 28px;
  padding: 8px 14px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid rgba(113,68,242,.14);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(30,64,175,.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.testimonial-control {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(113,68,242,.2);
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  box-shadow: 0 4px 12px rgba(30,64,175,.1);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.mobile-theme-toggle {
  display: none;
}
.testimonial-control:hover,
.testimonial-control:focus-visible {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(113,68,242,.28);
}
.testimonial-dots {
  display: flex;
  align-items: center;
  gap: 7px;
}
.testimonial-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #cbd0d8;
  cursor: pointer;
  transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.testimonial-dot:hover,
.testimonial-dot:focus-visible { background: #9d8be8; transform: scale(1.2); }
.testimonial-dot.active {
  width: 22px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 3px 9px rgba(113,68,242,.3);
}

/* Override dark section bg for reviews — use light bg for Google cards */
.testimonials-section {
  background: #f8f9fa;
}
.testimonials-section .section-heading { color: #202124; }
.testimonials-section .eyebrow-label   { color: var(--primary); }
.testimonials-section .section-sub     { color: #5f6368; }

/* ================================================================
   REVIEWS BACKGROUND — soft rating glow, stars and quote motifs
   ================================================================ */
.testimonials-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.reviews-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .9;
}

.reviews-bg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.reviews-orbit {
  stroke: rgba(113, 68, 242, .14);
  stroke-width: 1.5;
  stroke-dasharray: 4 14;
  animation: reviews-orbit-flow 18s linear infinite;
}

.reviews-stars {
  fill: #7144f2;
  opacity: .42;
  animation: reviews-float 5s ease-in-out infinite alternate;
}

.reviews-stars path:nth-child(2) { animation-delay: -1.4s; }
.reviews-stars path:nth-child(3) { animation-delay: -2.4s; }
.reviews-stars path:nth-child(4) { animation-delay: -3.1s; }

.reviews-quotes {
  fill: rgba(113, 68, 242, .1);
  font: 700 180px Georgia, serif;
}

.reviews-rating circle {
  fill: rgba(255, 255, 255, .08);
  stroke: rgba(217, 252, 80, .58);
  stroke-width: 2;
  stroke-dasharray: 5 9;
}

.reviews-rating text {
  fill: rgba(24, 24, 27, .22);
  font: 700 22px var(--font-heading);
  text-anchor: middle;
}

.reviews-rating text + text {
  fill: rgba(113, 68, 242, .55);
  font: 12px Arial, sans-serif;
  letter-spacing: 2px;
}

.testimonials-section > .container {
  position: relative;
  z-index: 1;
}

@keyframes reviews-orbit-flow {
  to { stroke-dashoffset: -180; }
}

@keyframes reviews-float {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-orbit,
  .reviews-stars {
    animation: none;
  }
}

/* ================================================================
   FOOTER SOCIAL LINKS
   ================================================================ */
.footer-socials {
  display:   flex;
  gap:       var(--sp-3);
  margin-top: var(--sp-4);
}
.social-link {
  width:         38px;
  height:        38px;
  border-radius: var(--r-full);
  background:    rgba(255,255,255,.1);
  border:        1px solid rgba(255,255,255,.15);
  display:       flex;
  align-items:   center;
  justify-content: center;
  color:         rgba(255,255,255,.75);
  text-decoration: none;
  transition:    background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.social-link:hover {
  background: var(--accent);
  color:      var(--bg-dark);
  border-color: var(--accent);
  transform:  translateY(-2px);
}
.social-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ================================================================
   HERO — Google rating strip
   ================================================================ */
.hero-rating-strip {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  margin-top:    var(--sp-5);
  background:    rgba(255,255,255,0.12);
  border:        1px solid rgba(255,255,255,0.22);
  border-radius: var(--r-full);
  padding:       8px 16px;
  backdrop-filter: blur(8px);
}
.hrs-stars { color: #FBBC05; font-size: .9rem; letter-spacing: 1px; }
.hrs-score { font-weight: 800; color: #fff; font-size: .92rem; }
.hrs-sep   { color: rgba(255,255,255,.5); }
.hrs-count { font-size: .8rem; color: rgba(255,255,255,.85); font-weight: 500; }

/* ================================================================
   HOW IT WORKS — Freska-style process strip
   ================================================================ */
.how-section {
  background:    #fff;
  border-top:    1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  padding:       var(--sp-10) 0;
}
.how-inner {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-4);
  flex-wrap:       nowrap;
}
.how-step {
  display:     flex;
  align-items: center;
  gap:         var(--sp-4);
  flex:        1 1 0;
  min-width:   0;
}
.how-num {
  width:         48px;
  height:        48px;
  border-radius: var(--r-full);
  background:    var(--primary);
  color:         #fff;
  font-family:   var(--font-heading);
  font-size:     1rem;
  font-weight:   800;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-shrink:   0;
}
.how-text {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  min-width:      0;
}
.how-text strong {
  font-size:   .92rem;
  font-weight: 700;
  color:       var(--text-primary);
}
.how-text span {
  font-size: .78rem;
  color:     var(--text-secondary);
  white-space: normal;
  line-height: 1.4;
}
.how-arrow {
  font-size:  1.4rem;
  color:      var(--primary-light);
  flex-shrink: 0;
  width:      24px;
  text-align: center;
}

@media (max-width: 768px) {
  .how-inner  { flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
  .how-arrow  { transform: rotate(90deg); align-self: center; }
  .how-text span { white-space: normal; }
}

@media (max-width: 960px) and (min-width: 769px) {
  .how-inner { gap: var(--sp-2); }
  .how-step { gap: var(--sp-2); }
  .how-num { width: 40px; height: 40px; font-size: .85rem; }
  .how-text strong { font-size: .82rem; }
  .how-text span { font-size: .68rem; }
}

@media (max-width: 900px) {
  .testimonials-track .grev-card {
    flex-basis: calc((100% - var(--sp-6)) / 2);
  }
}

@media (max-width: 600px) {
  .testimonials-track .grev-card { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .testimonials-track { transition: none; }
}

/* ================================================================
   DEFAULT DARK THEME — light theme is available from the navbar toggle
   ================================================================ */
body.dark-theme {
  --bg: #18181B;
  --bg-white: #232326;
  --text-primary: #F7F5ED;
  --text-secondary: #B8BCC2;
  --text-light: #8B9098;
  --foreground: #F7F5ED;
  --card: #232326;
  --card-fg: #F7F5ED;
  --muted: #3A3A40;
  --muted-fg: #B8BCC2;
  --border: #3A3A40;
}
body.dark-theme,
body.dark-theme .services-section,
body.dark-theme .about-section,
body.dark-theme .areas-section,
body.dark-theme .testimonials-section,
body.dark-theme .how-section {
  background-color: var(--bg) !important;
  color: var(--text-primary);
}
body.dark-theme .navbar {
  background: rgba(24,24,27,.97) !important;
  border-bottom-color: rgba(255,255,255,.1) !important;
}
body.dark-theme .logo-text,
body.dark-theme .nav-link,
body.dark-theme .nav-phone {
  color: #fff !important;
}
body.dark-theme .nav-link:hover,
body.dark-theme .nav-link[aria-current="page"] {
  color: var(--accent) !important;
}
body.dark-theme .section-heading,
body.dark-theme .svc-card h3,
body.dark-theme .about-content .section-heading,
body.dark-theme .area-card h3,
body.dark-theme .how-text strong {
  color: var(--text-primary) !important;
}
body.dark-theme .section-sub,
body.dark-theme .about-content p,
body.dark-theme .area-card p,
body.dark-theme .how-text span {
  color: var(--text-secondary) !important;
}
body.dark-theme .svc-card,
body.dark-theme .area-card,
body.dark-theme .booking-form-wrap,
body.dark-theme .grev-card {
  background: #232326 !important;
  border-color: #3A3A40 !important;
  color: var(--text-primary);
}
body.dark-theme .svc-card p,
body.dark-theme .svc-list li,
body.dark-theme .grev-card > p {
  color: var(--text-secondary) !important;
}
body.dark-theme .testimonials-section .section-heading { color: var(--text-primary) !important; }
body.dark-theme .testimonials-section .section-sub { color: var(--text-secondary) !important; }
body.dark-theme .testimonials-section .grev-name,
body.dark-theme .testimonials-section .grev-card > p { color: var(--text-primary) !important; }
body.dark-theme .testimonials-section .grev-local,
body.dark-theme .testimonials-section .grev-date { color: var(--text-secondary) !important; }
body.dark-theme .google-aggregate {
  background: #232326;
  border-color: #3A3A40;
}
body.dark-theme .google-agg-score,
body.dark-theme .google-agg-count { color: var(--text-primary); }
body.dark-theme .stats-bar {
  background: #232326 !important;
  border-bottom-color: #3A3A40 !important;
}
body.dark-theme .how-section {
  border-color: #3A3A40 !important;
}
body.dark-theme .booking-section {
  background: linear-gradient(135deg, #111113 0%, #25155f 50%, #3c2590 100%) !important;
}
body.dark-theme .booking-section .section-heading { color: #fff !important; }
body.dark-theme .booking-section .section-sub { color: rgba(255,255,255,.75) !important; }
body.dark-theme .f-legend,
body.dark-theme .f-group label { color: var(--text-primary); }
body.dark-theme .f-group input:not([type="checkbox"]):not([type="radio"]),
body.dark-theme .f-group select,
body.dark-theme .f-group textarea {
  background: #18181B;
  border-color: #45454D;
  color: #F7F5ED;
}
body.dark-theme .f-group input[type="date"] {
  color-scheme: dark;
}
body.dark-theme .f-group input[type="date"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(88%) sepia(92%) saturate(1050%) hue-rotate(12deg) brightness(104%) contrast(103%);
  opacity: .95;
}
body.dark-theme .booking-summary {
  background: #232326 !important;
  border-color: #45454D !important;
}
body.dark-theme .booking-summary h4 {
  color: var(--accent) !important;
}
body.dark-theme .bs-item .bs-lbl {
  color: #B8BCC2 !important;
}
body.dark-theme .bs-item .bs-val {
  color: #F7F5ED !important;
}
body.dark-theme .selected-services {
  color: #B8BCC2;
}
body.dark-theme .selected-service-chip {
  background: rgba(217,252,80,.12);
  border-color: rgba(217,252,80,.45);
  color: var(--accent);
}
/* Selected service cards keep their normal fill; only the border changes. */
.svc-checkbox-grid input:checked + .svc-radio-card {
  background: var(--bg) !important;
  border-color: #16a34a !important;
  color: var(--text-secondary) !important;
  box-shadow: 0 0 0 2px rgba(22,163,74,.14);
  transform: none;
}
.svc-checkbox-grid input:checked + .svc-radio-card span {
  color: var(--text-secondary) !important;
}
.svc-checkbox-grid input:checked + .svc-radio-card svg {
  color: inherit;
}
body.dark-theme .svc-checkbox-grid input:checked + .svc-radio-card {
  background: #232326 !important;
  color: var(--text-primary) !important;
}
body.dark-theme .svc-checkbox-grid input:checked + .svc-radio-card span {
  color: var(--text-primary) !important;
}
/* Keep each service icon's identity when its card is selected. */
.svc-checkbox-grid .svc-radio:nth-child(1) input:checked + .svc-radio-card svg { color: #0EA5A4 !important; }
.svc-checkbox-grid .svc-radio:nth-child(2) input:checked + .svc-radio-card svg { color: #F97316 !important; }
.svc-checkbox-grid .svc-radio:nth-child(3) input:checked + .svc-radio-card svg { color: #2563EB !important; }
.svc-checkbox-grid .svc-radio:nth-child(4) input:checked + .svc-radio-card svg { color: #EC4899 !important; }
body.dark-theme .site-footer { background: #111113 !important; }
.theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: rgba(217,252,80,.12);
  border-color: var(--accent);
}
.theme-icon-sun { display: none; }
body:not(.dark-theme) .theme-icon-moon { display: none; }
body:not(.dark-theme) .theme-icon-sun { display: block; }
body:not(.dark-theme) .theme-toggle {
  color: var(--primary);
  border-color: rgba(113,68,242,.25);
}

/* Hero card follows the selected theme instead of retaining dark glass. */
body:not(.dark-theme) .hero-card {
  background: rgba(255,255,255,.62);
  border-color: rgba(113,68,242,.18);
  box-shadow: 0 24px 64px rgba(24,24,27,.18);
}
body:not(.dark-theme) .hero-card .hc-logo-mini,
body:not(.dark-theme) .hero-card .hc-cities {
  color: var(--text-primary);
}
body:not(.dark-theme) .hero-card .hc-rating strong {
  color: var(--text-primary);
}
body:not(.dark-theme) .hero-card .hc-rating span {
  color: var(--text-secondary);
}
body:not(.dark-theme) .hero-card .hc-footer {
  border-top-color: rgba(24,24,27,.1);
}
body:not(.dark-theme) .hero-card .hcs-item {
  background: rgba(113,68,242,.08);
  color: var(--text-primary);
}
body:not(.dark-theme) .hero-card .hcs-item:hover {
  background: rgba(113,68,242,.16);
  color: var(--primary-dark);
}
body:not(.dark-theme) .stat-badge {
  background: rgba(255,255,255,.62);
  border-color: rgba(113,68,242,.18);
  box-shadow: 0 8px 32px rgba(24,24,27,.18);
}
body:not(.dark-theme) .stat-badge strong {
  color: var(--text-primary);
}
body:not(.dark-theme) .stat-badge small {
  color: var(--text-secondary);
}
body:not(.dark-theme) .stat-badge.sb-2 svg {
  filter: drop-shadow(0 1px 1px rgba(24,24,27,.32));
}

/* ================================================================
   SERVICES SECTION — cleaner Freska-like layout
   ================================================================ */
/* Make all 4 cards equal height in a 2×2 grid on desktop */
.services-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* Cleaner card — remove heavy glass, use crisp white with subtle border */
.svc-card {
  border-radius: 16px;
  border:        1.5px solid #ebebeb;
  box-shadow:    0 2px 12px rgba(0,0,0,.06);
  transition:    transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.svc-card:hover {
  transform:    translateY(-5px);
  box-shadow:   0 12px 36px rgba(113,68,242,.14);
  border-color: var(--primary-light);
}

/* ================================================================
   NAVBAR — Freska-style: white bg, clean, pill CTA
   ================================================================ */
.navbar {
  background:    rgba(255,255,255,0.97) !important;
  border-bottom: 1px solid #ebebeb !important;
}
.logo-text  { color: var(--primary) !important; }
.nav-link   { color: #444 !important; font-weight: 500; }
.nav-link:hover { color: var(--primary) !important; }
.nav-link[aria-current="page"] { color: var(--primary) !important; }
.nav-phone  { color: var(--primary) !important; }

.btn-cta {
  background:    var(--primary) !important;
  color:         #fff !important;
  border-color:  var(--primary) !important;
  border-radius: var(--r-full) !important;
  font-weight:   700 !important;
}
.btn-cta:hover {
  background:   var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  box-shadow:   0 4px 16px rgba(113,68,242,.35) !important;
}

/* ================================================================
   HERO — tighter, more Freska-like overlay
   ================================================================ */
.hero-bg-overlay {
  background: linear-gradient(
    to right,
    rgba(10,10,20,0.80) 0%,
    rgba(10,10,20,0.55) 55%,
    rgba(10,10,20,0.30) 100%
  ) !important;
}
.hero-inner {
  min-height: 560px;
  align-items: center;
}
.hero-heading {
  font-size: clamp(2.2rem, 5vw, 3.6rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -.02em;
}
.hero-sub { font-size: 1.05rem !important; max-width: 480px; }

/* Primary CTA — lime/accent pill */
.btn-primary {
  background:    var(--accent) !important;
  color:         #18181b !important;
  border-color:  var(--accent) !important;
  font-weight:   700 !important;
  border-radius: var(--r-full) !important;
  padding:       13px 30px !important;
  font-size:     .95rem !important;
}
.btn-primary:hover {
  background:   var(--accent-dark) !important;
  border-color: var(--accent-dark) !important;
  box-shadow:   0 6px 24px rgba(217,252,80,.45) !important;
  transform:    translateY(-2px) !important;
}

/* Services button — outlined white on hero */
.btn-services {
  background:   transparent !important;
  color:        #fff !important;
  border:       2px solid rgba(255,255,255,.6) !important;
  border-radius: var(--r-full) !important;
  padding:      13px 30px !important;
  font-size:    .95rem !important;
}
.btn-services:hover {
  background:   rgba(255,255,255,.15) !important;
  border-color: #fff !important;
}

/* ================================================================
   STATS BAR — light version (Freska uses light stats bar)
   ================================================================ */
.stats-bar {
  background:    #fff !important;
  border-top:    none !important;
  border-bottom: 2px solid var(--muted) !important;
  padding:       var(--sp-8) 0 !important;
}
.stat-item strong { color: var(--primary) !important; font-size: 2.2rem !important; }
.stat-item span   { color: var(--text-secondary) !important; font-size: .8rem !important; text-transform: uppercase; letter-spacing: .06em; }
.stat-sep         { background: var(--muted) !important; }
.stat-clients strong { align-items: baseline; }
.stat-clients .js-counter {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
}
.stat-clients .stat-plus {
  font-size: 1.175rem !important;
  font-weight: 900 !important;
  line-height: .75;
}
.stat-clients .js-counter,
.stat-clients .stat-plus,
.stat-satisfaction .js-counter,
.stat-satisfaction .stat-percent {
  color: inherit !important;
}
.stat-satisfaction strong {
  align-items: baseline;
}
.stat-satisfaction .js-counter {
  font-size: 1.7rem !important;
  font-weight: 700 !important;
}
.stat-satisfaction .stat-percent {
  font-size: 1.175rem !important;
  font-weight: 900 !important;
  line-height: .75;
}

/* ================================================================
   SECTION HEADINGS — tighter, more modern
   ================================================================ */
.section-heading {
  font-size:      clamp(1.6rem, 3vw, 2.4rem) !important;
  letter-spacing: -.02em;
  line-height:    1.2 !important;
}
.eyebrow-label {
  font-size:      .7rem !important;
  letter-spacing: .14em !important;
  color:          var(--primary) !important;
}

/* ================================================================
   ABOUT SECTION — light bg for contrast alternation
   ================================================================ */
.about-section { background: #f8f9fa !important; }
.about-content .section-heading { color: var(--text-primary) !important; font-size: clamp(2rem, 4vw, 3rem); }
.about-content p { color: var(--text-secondary) !important; }
.af-row > div strong { color: var(--text-primary) !important; }
.af-row > div p      { color: var(--text-secondary) !important; }
.about-card {
  background: #fff !important;
  border:     1.5px solid #ebebeb !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.06) !important;
}
.ac-header > div strong { color: var(--primary) !important; }
.ac-header > div span   { color: var(--text-secondary) !important; }
.ac-stat strong         { color: var(--primary) !important; }
.ac-stat small          { color: var(--text-secondary) !important; }
.ac-link                { color: var(--text-secondary) !important; }
.ac-link:hover          { color: var(--primary) !important; background: rgba(113,68,242,.06) !important; }
.ac-ytunnus             { color: var(--text-light) !important; }
.about-img-badge {
  background: rgba(255,255,255,.95) !important;
  border:     1px solid #ebebeb !important;
}
.about-img-badge strong { color: var(--primary) !important; }
.about-img-badge span   { color: var(--text-secondary) !important; }
.about-img-stat { background: var(--accent) !important; }
.about-img-stat strong { color: #18181b !important; }
.about-img-stat span   { color: rgba(24,24,27,.65) !important; }

body.dark-theme .about-section { background: var(--bg) !important; }
body.dark-theme .about-card {
  background: #232326 !important;
  border-color: #3A3A40 !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.28) !important;
}
body.dark-theme .about-card .ac-header > div strong,
body.dark-theme .about-card .ac-stat strong { color: var(--accent) !important; }
body.dark-theme .about-card .ac-header > div span,
body.dark-theme .about-card .ac-stat small,
body.dark-theme .about-card .ac-link,
body.dark-theme .about-card .ac-ytunnus { color: var(--text-secondary) !important; }

/* ================================================================
   AREAS SECTION — light bg
   ================================================================ */
.areas-section { background: #fff !important; }

/* ================================================================
   BOOKING SECTION — light bg (Freska style)
   ================================================================ */
.booking-section {
  background: #f8f9fa !important;
}
.booking-section .section-heading { color: var(--text-primary) !important; }
.booking-section .eyebrow-label   { color: var(--primary) !important; }
.booking-section .section-sub     { color: var(--text-secondary) !important; }
.booking-bg { display: none; }

/* ================================================================
   FOOTER — slightly lighter dark
   ================================================================ */
.site-footer { background: #18181b !important; }

/* ================================================================
   AREAS MAP — animated routes converging on the home base
   ================================================================ */
.areas-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.areas-map-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .92;
}

.areas-map-bg svg {
  display: block;
  width: 100%;
  height: 100%;
}

.map-roads {
  stroke: rgba(113, 68, 242, .12);
  stroke-width: 2;
}

.map-routes {
  stroke: rgba(113, 68, 242, .48);
  stroke-width: 3;
  stroke-dasharray: 10 14;
  animation: route-flow 8s linear infinite;
}

.map-route-dots {
  fill: #7144f2;
  filter: drop-shadow(0 0 7px rgba(113, 68, 242, .75));
}

.route-particle {
  transform-box: fill-box;
  transform-origin: center;
}

.route-particle-helsinki {
  animation: route-particle-helsinki 5.5s linear infinite;
}

.route-particle-vantaa {
  animation: route-particle-vantaa 6.8s linear 1.2s infinite;
}

.route-particle-tampere {
  animation: route-particle-tampere 7.2s linear 2.1s infinite;
}

.route-particle-home {
  animation: route-particle-home 6.2s linear 3.4s infinite;
}

.map-home-marker {
  fill: #18181b;
  stroke: #d9fc50;
  stroke-width: 2;
  filter: drop-shadow(0 5px 10px rgba(24, 24, 27, .2));
}

.map-home-ring {
  fill: #d9fc50;
  stroke: #18181b;
  stroke-width: 2;
}

.map-home-pulse {
  fill: none;
  stroke: rgba(217, 252, 80, .55);
  stroke-width: 2;
  animation: map-pulse 2.4s ease-out infinite;
}

.areas-section > .container {
  position: relative;
  z-index: 1;
}

@keyframes route-flow {
  to { stroke-dashoffset: -192; }
}

@keyframes map-pulse {
  0%, 35% { opacity: .75; transform: scale(.75); }
  75%, 100% { opacity: 0; transform: scale(1.9); }
}

@keyframes route-particle-helsinki {
  0% { transform: translate(40px, 98px); }
  50% { transform: translate(415px, 164px); }
  100% { transform: translate(600px, 300px); }
}

@keyframes route-particle-vantaa {
  0% { transform: translate(1080px, 108px); }
  50% { transform: translate(830px, 226px); }
  100% { transform: translate(600px, 300px); }
}

@keyframes route-particle-tampere {
  0% { transform: translate(116px, 448px); }
  50% { transform: translate(424px, 350px); }
  100% { transform: translate(600px, 300px); }
}

@keyframes route-particle-home {
  0% { transform: translate(600px, 300px); }
  50% { transform: translate(442px, 174px); }
  100% { transform: translate(600px, 300px); }
}

@media (prefers-reduced-motion: reduce) {
  .map-routes,
  .map-home-pulse,
  .route-particle {
    animation: none;
  }
}

/* Keep the theme switch available above WhatsApp on mobile only. */
@media (max-width: 768px) {
  .nav-actions { display: none; }
  .mobile-theme-toggle {
    position: fixed;
    right: 20px;
    bottom: 84px;
    z-index: 1001;
    width: 50px;
    height: 50px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(217,252,80,.65);
    border-radius: 50%;
    background: rgba(24,24,27,.92);
    color: var(--accent);
    box-shadow: 0 5px 18px rgba(0,0,0,.3);
    cursor: pointer;
  }
  body:not(.dark-theme) .mobile-theme-toggle {
    background: rgba(255,255,255,.92);
    border-color: rgba(113,68,242,.35);
    color: var(--primary);
  }
  .theme-toggle {
    display: none;
  }
}