/*
 * Ambika Playwoods — Design System Stylesheet
 * Font: Nunito Sans | Border Radius: 4px | Day + Night Mode
 * WCAG AA Compliant | Mobile-First Responsive
 */

/* ================================================================
   1. CUSTOM PROPERTIES & THEMING
   ================================================================ */
:root {
  --font-primary: 'Nunito Sans', sans-serif;

  /* Spacing scale */
  --sp-xs:  0.25rem;
  --sp-sm:  0.5rem;
  --sp-md:  1rem;
  --sp-lg:  1.5rem;
  --sp-xl:  2rem;
  --sp-2xl: 3rem;
  --sp-3xl: 4rem;
  --sp-4xl: 6rem;
  --sp-5xl: 8rem;

  /* Radii */
  --r:    4px;     /* primary — squarish */
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-full: 9999px;

  /* Transitions */
  --t:      0.18s ease;
  --t-slow: 0.38s ease;

  /* Z-index layers */
  --z-nav:   1000;
  --z-modal: 2000;

  /* ── Light Mode ─────────────────────────────── */
  --bg:        #FFFFFF;
  --bg-2:      #F6F7FB;
  --bg-3:      #ECEEF5;
  --card:      #FFFFFF;
  --txt:       #08080F;
  --txt-2:     #4C4E68;
  --txt-3:     #8888A2;
  --acc:       #8B1A2C;
  --acc-h:     #6B1220;
  --acc-lt:    #FFF0F2;
  --acc-rgb:   139, 26, 44;
  --bdr:       #E3E6EF;
  --bdr-2:     #C8CAD8;
  --google:    #4285F4;
  --sh-sm:     0 1px  4px rgba(0,0,0,.06);
  --sh-md:     0 4px 16px rgba(0,0,0,.09);
  --sh-lg:     0 8px 32px rgba(0,0,0,.12);
  --sh-xl:     0 16px 56px rgba(0,0,0,.16);
  --nav-bg:    rgba(255,255,255,.9);
}

[data-theme="dark"] {
  --bg:        #000000;
  --bg-2:      #0A0A0A;
  --bg-3:      #111111;
  --card:      #0D0D0D;
  --txt:       #EDEDED;
  --txt-2:     #8A8A8A;
  --txt-3:     #4E4E4E;
  --acc:       #C94060;
  --acc-h:     #DD5070;
  --acc-lt:    rgba(201,64,96,.12);
  --acc-rgb:   201, 64, 96;
  --bdr:       #1A1A1A;
  --bdr-2:     #242424;
  --sh-sm:     0 1px  4px rgba(0,0,0,.35);
  --sh-md:     0 4px 16px rgba(0,0,0,.45);
  --sh-lg:     0 8px 32px rgba(0,0,0,.55);
  --sh-xl:     0 16px 56px rgba(0,0,0,.65);
  --nav-bg:    rgba(0,0,0,.92);
}

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

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

body {
  font-family: var(--font-primary);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--txt);
  background: var(--bg);
  transition: background var(--t-slow), color var(--t-slow);
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--acc); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--acc-h); }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font-primary); border: none; background: none; }
input, textarea, select { font-family: var(--font-primary); }

/* ================================================================
   3. ACCESSIBILITY — SKIP LINK
   ================================================================ */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  background: var(--acc); color: #fff;
  padding: .5rem 1rem; border-radius: var(--r);
  font-weight: 700; z-index: 9999;
  transition: top var(--t);
}
.skip-link:focus { top: 1rem; }

/* ================================================================
   4. TYPOGRAPHY
   ================================================================ */
.t-display {
  font-size: clamp(2.4rem, 6vw, 4.75rem);
  font-weight: 900; line-height: 1.05; letter-spacing: -.03em;
}
.t-h1 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; }
.t-h2 { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 700; line-height: 1.2; letter-spacing: -.018em; }
.t-h3 { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.3; }
.t-body-lg { font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.72; }
.t-body  { font-size: 1rem; line-height: 1.65; }
.t-sm    { font-size: .875rem; }
.t-xs    { font-size: .75rem; }

.t-acc   { color: var(--acc); }
.t-muted { color: var(--txt-3); }
.t-2     { color: var(--txt-2); }

.grad-text {
  background: linear-gradient(135deg, var(--acc) 0%, #E05070 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ================================================================
   5. LAYOUT HELPERS
   ================================================================ */
.container       { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--sp-xl); }
.container-wide  { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 var(--sp-xl); }
.section         { padding: var(--sp-5xl) 0; }
.section-sm      { padding: var(--sp-4xl) 0; }
.section-alt     { background: var(--bg-2); }

/* Services section — futuristic maroon theme */
#services {
  background:
    radial-gradient(ellipse 80% 60% at 15% 50%, rgba(160,0,40,.55) 0%, transparent 65%),
    radial-gradient(ellipse 60% 80% at 85% 20%, rgba(120,0,30,.45) 0%, transparent 60%),
    radial-gradient(ellipse 50% 50% at 60% 90%, rgba(90,0,20,.35) 0%, transparent 55%),
    linear-gradient(135deg, #1a0008 0%, #2d0010 40%, #1a000a 100%);
  border-top: none; border-bottom: none;
  position: relative;
}
#services::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 40%, transparent 100%);
}
#services .sec-label { color: #fca5a5; }
#services .sec-label::before, #services .sec-label::after { background: #fca5a5; }
#services .t-h2 { color: #fff; }
#services .section-head p { color: rgba(255,255,255,.72); }
#services .svc-detail-txt { color: rgba(255,255,255,.78); }
#services .svc-detail-txt strong { color: #fca5a5; }
#services .svc-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}
#services .svc-card:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(252,165,165,.4);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
#services .svc-img { opacity: .92; }
#services .svc-card:hover .svc-img { opacity: 1; }
#services .svc-name { color: #fff; }
#services .tag {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.85);
}
#services .tag:hover {
  background: rgba(252,165,165,.15);
  border-color: rgba(252,165,165,.4);
  color: #fca5a5;
}

.section-head {
  text-align: center; max-width: 680px;
  margin: 0 auto var(--sp-3xl);
}
.section-head p { margin-top: var(--sp-md); color: var(--txt-2); }

/* Section label pill */
.sec-label {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .7rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--acc); margin-bottom: var(--sp-md);
}
.sec-label::before, .sec-label::after {
  content: ''; width: 18px; height: 1px; background: var(--acc);
}

/* ================================================================
   6. BUTTONS
   ================================================================ */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .75rem 1.5rem; border-radius: var(--r);
  font-size: .9375rem; font-weight: 700; letter-spacing: .01em;
  font-family: var(--font-primary);
  transition: all var(--t); cursor: pointer;
  border: 2px solid transparent; text-decoration: none;
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background var(--t);
}
.btn:hover::after { background: rgba(255,255,255,.08); }

.btn-primary { background: var(--acc); color: #fff; border-color: var(--acc); }
.btn-primary:hover {
  background: var(--acc-h); border-color: var(--acc-h); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--acc-rgb),.35);
}

.btn-outline { background: transparent; color: var(--acc); border-color: var(--acc); }
.btn-outline:hover {
  background: var(--acc); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--acc-rgb),.25);
}

.btn-ghost { background: transparent; color: var(--txt-2); border-color: transparent; padding-left: 0; }
.btn-ghost:hover { color: var(--acc); }

.btn-lg { padding: .65rem 2rem; font-size: 1.0625rem; }
.btn-sm { padding: .5rem 1rem; font-size: .8125rem; }

/* ================================================================
   7. IMAGE PLACEHOLDERS
   ================================================================ */
.img-ph {
  background: var(--bg-3);
  border: 2px dashed var(--bdr-2);
  border-radius: var(--r);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .75rem; color: var(--txt-3);
  min-height: 280px; width: 100%;
  position: relative; overflow: hidden;
}
.img-ph::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(var(--acc-rgb),.04) 0%, transparent 70%);
}
.img-ph i { font-size: 2.5rem; opacity: .45; position: relative; z-index: 1; }
.img-ph span {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; opacity: .55; position: relative; z-index: 1;
}

/* ================================================================
   8. NAVBAR
   ================================================================ */
.navbar {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  padding: .5rem 0;
  transition: all var(--t-slow);
}
.navbar .container { max-width: 100%; padding-left: 20px; }
.navbar.scrolled {
  padding: .375rem 0;
  border-bottom-color: var(--bdr);
  box-shadow: var(--sh-sm);
}

.nav-inner {
  display: flex; align-items: center;
  justify-content: flex-start; gap: 0;
}

.nav-brand { display: flex; align-items: center; flex-shrink: 0; }

/* Logo */
.nav-logo {
  display: flex; align-items: center;
  text-decoration: none; flex-shrink: 0;
  width: 120px;
  height: 50px;
}

.nav-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  flex-shrink: 0;
  transition: opacity var(--t);
}
.nav-logo:hover .nav-logo-img { opacity: .8; }

/* Theme-specific logo variants */
.logo-dark { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: block; }

/* Mobile overlay and footer */
.mob-nav-hd  .nav-logo { width: 220px; height: 92px; }
.footer-brand .nav-logo { width: 200px; height: 84px; }
.footer-brand .nav-logo-img { object-position: left center; }

@media (max-width: 600px) {
  .footer-brand .nav-logo-img { object-position: center; }
}

/* Nav links */
.nav-links { display: flex; align-items: center; gap: .5rem; margin-left: 0; }
.nav-links a {
  padding: .35rem .6rem;
  font-size: .875rem; font-weight: 600; color: var(--txt-2);
  border-radius: var(--r); transition: all var(--t); text-decoration: none;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--txt); background: var(--bg-3); }
.nav-links a.active { color: var(--acc); background: var(--acc-lt); }

/* Nav actions */
.nav-actions { display: flex; align-items: center; gap: var(--sp-sm); flex-shrink: 0; margin-left: auto; }

.nav-location {
  display: flex; align-items: center; gap: .3rem;
  font-size: .8125rem; font-weight: 600; color: #fff;
  white-space: nowrap; letter-spacing: .01em;
  flex-shrink: 0;
  margin-left: var(--sp-sm);
  background: var(--acc);
  border: 1px solid var(--acc);
  padding: .35rem .65rem;
  border-radius: var(--r);
}
.nav-location i { color: #fff; font-size: 1rem; flex-shrink: 0; }

.theme-btn {
  width: 40px; height: 40px; border-radius: var(--r);
  background: #fff; border: 1px solid var(--acc);
  display: flex; align-items: center; justify-content: center;
  color: var(--acc); font-size: 1.125rem;
  transition: all var(--t); cursor: pointer;
}
.theme-btn:hover {
  background: var(--acc-lt);
}

.nav-soc {
  width: 40px; height: 40px; border-radius: var(--r);
  background: var(--acc); border: 1px solid var(--acc);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.125rem; text-decoration: none;
  transition: all var(--t); flex-shrink: 0;
}
.nav-soc:hover { background: var(--acc-h); border-color: var(--acc-h); }

.mob-nav-socials {
  display: flex; gap: .5rem;
  padding: var(--sp-md) 0 0;
  border-top: 1px solid var(--bdr);
  margin-top: var(--sp-sm);
}

.menu-btn {
  display: none; width: 40px; height: 40px; border-radius: var(--r);
  background: #fff; border: 1px solid var(--acc);
  align-items: center; justify-content: center;
  color: var(--acc); font-size: 1.375rem; cursor: pointer;
  transition: all var(--t); flex-shrink: 0;
}
.menu-btn:hover { background: var(--acc-lt); }

/* Mobile nav overlay */
.mob-nav {
  display: none; position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--bg);
  z-index: var(--z-modal);
  padding: 0;
  flex-direction: column;
  opacity: 0; transform: translateX(100%);
  transition: opacity var(--t-slow), transform var(--t-slow);
  pointer-events: none;
  overflow-y: auto;
}
.mob-nav.open { opacity: 1; transform: translateX(0); pointer-events: all; }

/* Mobile nav header */
.mob-nav-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.125rem var(--sp-xl);
  border-bottom: 1px solid var(--bdr);
  position: sticky; top: 0;
  background: var(--bg);
  z-index: 1;
}
.mob-nav-close {
  width: 40px; height: 40px; border-radius: var(--r);
  background: var(--bg-3); border: 1px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  color: var(--txt); font-size: 1.375rem; cursor: pointer;
  transition: all var(--t);
}
.mob-nav-close:hover { color: var(--acc); border-color: var(--acc); }

.mob-nav-body {
  padding: var(--sp-lg) var(--sp-xl) var(--sp-2xl);
  display: flex; flex-direction: column; gap: .25rem; flex: 1;
}
.mob-nav-body a {
  display: flex; align-items: center; gap: .75rem;
  padding: .875rem var(--sp-md); font-size: 1.0625rem; font-weight: 700;
  color: var(--txt); border-radius: var(--r);
  border-bottom: 1px solid var(--bdr); transition: all var(--t);
  text-decoration: none;
}
.mob-nav-body a:last-child { border-bottom: none; }
.mob-nav-body a:hover,
.mob-nav-body a.active { color: var(--acc); background: var(--acc-lt); border-color: transparent; }
.mob-nav-body a i { font-size: 1.0625rem; width: 22px; flex-shrink: 0; }
.mob-nav-body .btn { border-bottom: none; margin-top: var(--sp-md); justify-content: center; }

/* Bottom navigation — mobile only */
.bot-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--bdr);
  height: 64px;
  box-shadow: 0 -4px 24px rgba(0,0,0,.06);
}
.bot-nav-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .2rem; text-decoration: none;
  color: var(--txt-3); font-size: .625rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  transition: color var(--t); padding: .5rem .25rem;
}
.bot-nav-item i { font-size: 1.375rem; line-height: 1; }
.bot-nav-item.active { color: var(--acc); }
.bot-nav-item:hover  { color: var(--txt); }

/* ================================================================
   9. HERO
   ================================================================ */
.hero {
  min-height: 100vh;
  display: flex; align-items: center;
  position: relative; overflow: hidden;
  padding: 7rem 0 4rem;
  background: var(--bg);
}

/* Background elements */
.hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .07;
}
[data-theme="dark"] .hero-orb { opacity: .14; }
.hero-orb-1 {
  width: 600px; height: 600px; background: var(--acc);
  top: -180px; right: -80px;
  animation: orb1 9s ease-in-out infinite;
}
.hero-orb-2 {
  width: 420px; height: 420px; background: var(--acc);
  bottom: -120px; left: -80px;
  animation: orb2 11s ease-in-out infinite;
}
.hero-orb-3 {
  width: 200px; height: 200px; background: var(--acc);
  top: 38%; left: 42%;
  animation: orb3 13s ease-in-out infinite;
}
@keyframes orb1  { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(28px,18px) scale(1.06); } }
@keyframes orb2  { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-18px,26px) scale(1.04); } }
@keyframes orb3  { 0%,100% { transform: translate(0,0); } 33% { transform: translate(14px,-18px); } 66% { transform: translate(-10px,10px); } }

/* Dot grid */
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--bdr) 1px, transparent 1px),
    linear-gradient(90deg, var(--bdr) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .35;
  mask-image: radial-gradient(ellipse at center, black 15%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 15%, transparent 75%);
}
[data-theme="dark"] .hero-grid { opacity: .14; }

/* Layout */
.hero-inner {
  display: grid; grid-template-columns: 2fr 1fr;
  gap: var(--sp-3xl); align-items: center;
  position: relative; z-index: 1;
}

/* Content */
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--acc-lt); color: var(--acc);
  border: 1px solid rgba(var(--acc-rgb),.25);
  padding: .375rem .875rem; border-radius: 4px;
  font-size: .78rem; font-weight: 800; letter-spacing: .05em;
  margin-bottom: var(--sp-xl);
}
.badge-dot {
  width: 7px; height: 7px; background: var(--acc);
  border-radius: 50%; animation: bdot 2s ease-in-out infinite;
}
@keyframes bdot { 0%,100% { opacity:1; transform: scale(1); } 50% { opacity:.45; transform: scale(.65); } }

.hero-content { width: 100%; margin-left: -3rem; }

.hero-title {
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 900; line-height: 1.06;
  letter-spacing: -.03em; color: var(--txt);
  margin-bottom: var(--sp-xl);
}
.hero-title .hl { color: var(--acc); }
.hero-title .line { display: block; }
.m-br { display: none; }

.hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.125rem);
  line-height: 1.72; color: var(--txt-2);
  margin-bottom: var(--sp-2xl);
}

.hero-ctas { display: flex; align-items: stretch; gap: var(--sp-md); flex-wrap: wrap; }
.hero-ctas .btn { align-items: center; }

.scroll-hint {
  display: flex; align-items: center; gap: .5rem;
  color: var(--txt-3); font-size: .78rem; font-weight: 700;
  margin-top: var(--sp-2xl); letter-spacing: .05em;
}
.scroll-line {
  width: 32px; height: 1px; background: var(--bdr-2);
  position: relative; overflow: hidden;
}
.scroll-line::after {
  content: ''; position: absolute; top: 0; left: -100%;
  width: 100%; height: 100%; background: var(--acc);
  animation: sl 2.2s ease-in-out infinite;
}
@keyframes sl { 0% { left:-100%; } 100% { left:100%; } }

/* Visual side */
.hero-visual { position: relative; left: 40px; }
.hero-img-wrap { position: relative; min-height: 400px; width: 110%; overflow: hidden; border-radius: 4px; border: none; box-shadow: none; background: transparent; }
.hero-img-wrap img { width: 100%; height: 100%; min-height: 400px; object-fit: cover; display: block; border-radius: 4px; }
.hero-img-wrap .img-ph { min-height: 400px; width: 100%; border-style: solid; border-color: var(--bdr); }

/* Floating cards */
.hero-fc {
  position: absolute;
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: var(--sp-md) var(--sp-lg);
  box-shadow: var(--sh-lg);
}
[data-theme="dark"] .hero-fc { backdrop-filter: blur(16px); }
.hero-fc-1 { bottom: -18px; left: -24px; display: flex; align-items: center; gap: .75rem; }
.hero-fc-2 { top: 28px; right: -18px; text-align: center; min-width: 110px; }
.fc-icon {
  width: 44px; height: 44px; background: var(--acc-lt);
  border-radius: var(--r); display: flex; align-items: center;
  justify-content: center; color: var(--acc); font-size: 1.25rem;
  flex-shrink: 0;
}
.fc-val { font-size: 1.5rem; font-weight: 900; color: var(--txt); letter-spacing: -.03em; line-height: 1; }
.fc-val .s { color: var(--acc); }
.fc-lbl { font-size: .75rem; color: var(--txt-3); font-weight: 600; }

/* ================================================================
   10. STATS BAR
   ================================================================ */
.stats-bar {
  padding: var(--sp-2xl) 0;
  background:
    radial-gradient(ellipse 70% 120% at 50% 50%, rgba(160,0,40,.6) 0%, transparent 70%),
    linear-gradient(135deg, #1a0008 0%, #2d0010 50%, #1a000a 100%);
  border-top: none;
  border-bottom: none;
  position: relative;
}
.stats-bar::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 100%);
}
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.stat-item {
  padding: var(--sp-lg) var(--sp-xl);
  text-align: center; position: relative;
}
.stat-item:not(:last-child)::after {
  content: ''; position: absolute;
  right: 0; top: 20%; height: 60%;
  width: 1px; background: rgba(255,255,255,.25);
}
.stat-num {
  font-size: clamp(1.875rem, 3.5vw, 2.75rem);
  font-weight: 900; color: #fff;
  letter-spacing: -.04em; line-height: 1;
  margin-bottom: .375rem;
}
.stat-num .s { color: #fca5a5; }
.stat-lbl { font-size: .85rem; font-weight: 600; color: rgba(255,255,255,.75); }

/* ================================================================
   11. CONCEPT SECTION
   ================================================================ */
.concept-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-4xl); align-items: center;
}
.concept-imgs {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-md);
}
.concept-imgs .img-ph:first-child { grid-column: 1/-1; min-height: 220px; }
.concept-imgs .img-ph:not(:first-child) { min-height: 160px; }
.concept-imgs-bottom { grid-column: 1/-1; min-height: 200px; }

.concept-text .sec-label { justify-content: flex-start; }
.concept-text .sec-label::before { display: none; }

.and-word {
  display: block;
  font-size: clamp(3rem, 6.5vw, 5.5rem);
  font-weight: 900; letter-spacing: -.04em;
  color: var(--acc); line-height: 1; font-style: italic;
  margin: var(--sp-md) 0;
}
.concept-body {
  font-size: 1.0625rem; line-height: 1.78;
  color: var(--txt-2); margin-bottom: var(--sp-lg); margin-top: var(--sp-xl);
}
.concept-body strong { color: var(--txt); font-weight: 700; }

.concept-quote {
  font-size: clamp(.9375rem, 1.8vw, 1.125rem);
  font-weight: 700; color: var(--txt);
  line-height: 1.55;
  border-left: 3px solid var(--acc);
  padding-left: var(--sp-lg);
  margin: var(--sp-xl) 0;
  font-style: italic;
}
.concept-text .btn { margin-bottom: var(--sp-4xl); }

/* ================================================================
   11b. GOOGLE BADGE
   ================================================================ */
.google-badge {
  display: inline-flex; align-items: center; gap: .875rem;
  padding: .4rem 1rem;
  background: var(--bg-2); border: 1px solid var(--bdr);
  border-radius: var(--r);
}
.google-badge > i {
  font-size: 1.5rem; color: #4285F4; flex-shrink: 0;
}
.gb-stars {
  display: flex; align-items: center; gap: .25rem;
  font-size: .875rem; color: #F59E0B;
  font-weight: 800;
}
.gb-stars i { font-size: .8125rem; }
.gb-stars strong { color: var(--txt); font-size: 1rem; }
.gb-count { font-size: .75rem; font-weight: 700; color: var(--txt-3); letter-spacing: .03em; margin-top: .1rem; }

/* Testimonials Google badge (inline in section head) */
.testi-rating-badge {
  display: inline-flex; align-items: center; gap: .75rem;
  background: var(--acc-lt); border: 1px solid rgba(var(--acc-rgb),.2);
  border-radius: var(--r-full); padding: .5rem 1.25rem;
  margin-bottom: var(--sp-xl);
}
.trb-stars { display: flex; align-items: center; gap: .2rem; color: #F59E0B; font-size: .875rem; }
.trb-text  { font-size: .875rem; font-weight: 800; color: var(--txt-2); }
.trb-text strong { color: var(--acc); }

/* ================================================================
   12. SERVICES
   ================================================================ */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: var(--sp-md);
}
.svc-card {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: 0;
  text-align: center; transition: all var(--t-slow);
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.svc-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(var(--acc-rgb),.05) 0%, transparent 60%);
  opacity: 0; transition: opacity var(--t-slow);
  pointer-events: none; z-index: 1;
}
.svc-card:hover { border-color: rgba(var(--acc-rgb),.4); box-shadow: var(--sh-lg); transform: translateY(-4px); }
.svc-card:hover::before { opacity: 1; }

.svc-img {
  height: 160px; overflow: hidden; flex-shrink: 0;
}
.svc-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .55s ease;
}
.svc-card:hover .svc-img img { transform: scale(1.04); }

.svc-icon {
  width: 56px; height: 56px; background: var(--acc-lt);
  border-radius: var(--r); display: flex; align-items: center;
  justify-content: center; color: var(--acc); font-size: 1.5rem;
  margin: 0 auto var(--sp-md); transition: all var(--t-slow);
}
.svc-card:hover .svc-icon { background: var(--acc); color: #fff; transform: scale(1.08); }
.svc-name { font-size: .875rem; font-weight: 700; color: var(--txt); padding: .75rem .75rem 1rem; }

/* Services detail strip */
.svc-detail {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-2xl); margin-top: var(--sp-3xl);
  align-items: center;
}
.svc-detail-txt { font-size: 1.0625rem; line-height: 1.78; color: var(--txt-2); }

.tags { display: flex; flex-wrap: wrap; gap: var(--sp-sm); margin-top: var(--sp-lg); }
.tag {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .875rem; background: var(--bg-3);
  border: 1px solid var(--bdr); border-radius: var(--r);
  font-size: .8125rem; font-weight: 600; color: var(--txt-2);
  transition: all var(--t);
}
.tag:hover { background: var(--acc-lt); border-color: rgba(var(--acc-rgb),.3); color: var(--acc); }

/* ================================================================
   13. WHY CHOOSE US
   ================================================================ */
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-xl); }
.why-card {
  padding: var(--sp-2xl) var(--sp-xl);
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r); transition: all var(--t-slow);
  position: relative; overflow: hidden;
}
.why-card::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  background: var(--acc); transform: scaleX(0);
  transform-origin: left; transition: transform var(--t-slow);
}
.why-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); }
.why-card:hover::after { transform: scaleX(1); }

.why-num {
  font-size: 3.5rem; font-weight: 900;
  color: var(--bdr); letter-spacing: -.05em; line-height: 1;
  margin-bottom: var(--sp-md);
  transition: color var(--t-slow);
}
.why-card:hover .why-num { color: rgba(var(--acc-rgb),.18); }
.why-icon {
  width: 48px; height: 48px; background: var(--acc-lt);
  border-radius: var(--r); display: flex; align-items: center;
  justify-content: center; color: var(--acc); font-size: 1.375rem;
  margin-bottom: var(--sp-lg);
}
.why-title { font-size: 1.125rem; font-weight: 800; color: var(--txt); margin-bottom: var(--sp-sm); }
.why-desc  { font-size: .9375rem; line-height: 1.65; color: var(--txt-2); }

/* ================================================================
   14. VISION
   ================================================================ */
.vision-inner {
  display: grid; grid-template-columns: 1fr 1.15fr;
  gap: var(--sp-4xl); align-items: start;
}
.vision-txt .sec-label { justify-content: flex-start; }
.vision-txt .sec-label::before { display: none; }
.vision-intro { font-size: 1.0625rem; line-height: 1.78; color: var(--txt-2); margin: var(--sp-xl) 0 var(--sp-2xl); }

.vision-list { display: flex; flex-direction: column; gap: var(--sp-md); }
.vision-item {
  display: flex; gap: var(--sp-md);
  padding: var(--sp-lg); background: var(--card);
  border: 1px solid var(--bdr); border-radius: var(--r);
  transition: all var(--t-slow);
}
.vision-item:hover { border-color: rgba(var(--acc-rgb),.3); box-shadow: var(--sh-md); }
.vision-item-icon {
  width: 40px; height: 40px; background: var(--acc-lt);
  border-radius: var(--r); display: flex; align-items: center;
  justify-content: center; color: var(--acc); font-size: 1.125rem;
  flex-shrink: 0; margin-top: 2px;
}
.vision-item-body { font-size: .9375rem; line-height: 1.6; color: var(--txt-2); }
.vision-item-body strong { color: var(--txt); font-weight: 800; display: block; margin-bottom: .2rem; font-size: 1rem; }

.vision-img-col .img-ph { min-height: 500px; border-radius: var(--r-md); }

/* Vision section — futuristic maroon theme */
#vision {
  background:
    radial-gradient(ellipse 70% 90% at 80% 30%, rgba(160,0,40,.5) 0%, transparent 65%),
    radial-gradient(ellipse 55% 70% at 10% 80%, rgba(120,0,30,.4) 0%, transparent 60%),
    linear-gradient(135deg, #1a0008 0%, #2d0010 45%, #1a000a 100%);
  position: relative;
}
#vision::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 40%, transparent 100%);
}
#vision .sec-label { color: #fca5a5; }
#vision .t-h1 { color: #fff; }
#vision .vision-intro { color: rgba(255,255,255,.75); }
#vision .vision-item {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  backdrop-filter: blur(6px);
}
#vision .vision-item:hover {
  background: rgba(255,255,255,.11);
  border-color: rgba(252,165,165,.4);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
#vision .vision-item-icon {
  background: rgba(255,255,255,.1);
  color: #fca5a5;
}
#vision .vision-item:hover .vision-item-icon {
  background: #fca5a5;
  color: #2d0010;
}
#vision .vision-item-body { color: rgba(255,255,255,.72); }
#vision .vision-item-body strong { color: #fff; }

/* ================================================================
   15. PROCESS
   ================================================================ */
.process-steps {
  display: grid; grid-template-columns: repeat(5,1fr);
  gap: var(--sp-md); position: relative;
}
.process-steps::before {
  content: ''; position: absolute;
  top: 27px; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--bdr) 10%, var(--bdr) 90%, transparent);
}
.proc-step { text-align: center; position: relative; z-index: 1; }
.proc-num {
  width: 54px; height: 54px; background: var(--acc);
  border: 2px solid var(--acc); border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; font-weight: 900; color: #fff;
  margin: 0 auto var(--sp-lg); transition: all var(--t-slow);
  box-shadow: 0 0 0 5px rgba(var(--acc-rgb),.14);
}
.proc-step:hover .proc-num {
  background: var(--acc); border-color: var(--acc); color: #fff;
  box-shadow: 0 0 0 5px rgba(var(--acc-rgb),.14);
}
.proc-title { font-size: .9375rem; font-weight: 800; color: var(--txt); margin-bottom: .375rem; }
.proc-desc  { font-size: .8125rem; line-height: 1.55; color: var(--txt-3); }

/* ================================================================
   16. TESTIMONIALS
   ================================================================ */
.testi-wrap { position: relative; overflow: hidden; }
.testi-track {
  display: flex; gap: var(--sp-xl);
  transition: transform var(--t-slow);
  will-change: transform;
}
.testi-card {
  min-width: calc(33.333% - .888rem);
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r); padding: var(--sp-xl); flex-shrink: 0;
  transition: all var(--t-slow);
}
.testi-card:hover { box-shadow: var(--sh-lg); border-color: rgba(var(--acc-rgb),.2); }

.testi-stars { display: flex; gap: .25rem; margin-bottom: var(--sp-md); color: var(--acc); font-size: .875rem; }
.testi-txt {
  font-size: .9375rem; line-height: 1.72; color: var(--txt-2);
  margin-bottom: var(--sp-xl); font-style: italic; position: relative;
}
.testi-txt::before {
  content: '\201C'; font-size: 3.5rem; color: var(--acc);
  line-height: 0; vertical-align: -.85rem;
  margin-right: .2rem; font-style: normal; opacity: .25;
}

.testi-author { display: flex; align-items: center; gap: var(--sp-md); }
.testi-avatar {
  width: 44px; height: 44px; border-radius: var(--r);
  background: var(--bg-3); border: 1px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.125rem; font-weight: 800; color: var(--txt-3); flex-shrink: 0;
}
.testi-name { font-size: .9375rem; font-weight: 800; color: var(--txt); }
.testi-role { font-size: .8125rem; color: var(--txt-3); }

/* Controls */
.testi-controls {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-md); margin-top: var(--sp-2xl);
}
.testi-dots { display: flex; gap: .5rem; }
.dot {
  width: 8px; height: 8px; border-radius: var(--r);
  background: var(--bdr-2); cursor: pointer;
  transition: all var(--t);
}
.dot.active { width: 24px; background: var(--acc); }
.testi-btn {
  width: 40px; height: 40px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  color: var(--txt-2); font-size: 1.125rem; cursor: pointer;
  transition: all var(--t);
}
.testi-btn:hover { background: var(--acc); border-color: var(--acc); color: #fff; }

/* ================================================================
   17. DIRECT CONNECT
   ================================================================ */
.connect-inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-4xl); align-items: center;
}
.connect-txt .sec-label { justify-content: flex-start; }
.connect-txt .sec-label::before { display: none; }
.connect-body { font-size: 1.0625rem; line-height: 1.78; color: var(--txt-2); margin: var(--sp-xl) 0 var(--sp-2xl); }
.connect-features {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-md); margin-bottom: var(--sp-2xl);
}
.cf {
  display: flex; align-items: center; gap: .625rem;
  font-size: .875rem; font-weight: 600; color: var(--txt-2);
}
.cf i { color: var(--acc); font-size: 1.125rem; }
.connect-img .img-ph { min-height: 440px; border-radius: var(--r-md); }

/* ================================================================
   18. CHART / STATS VISUAL
   ================================================================ */
.bar-chart { display: flex; flex-direction: column; gap: var(--sp-md); }
.bar-row { display: flex; flex-direction: column; gap: .375rem; }
.bar-hdr { display: flex; justify-content: space-between; align-items: center; }
.bar-lbl { font-size: .875rem; font-weight: 600; color: var(--txt-2); }
.bar-val { font-size: .875rem; font-weight: 800; color: var(--acc); }
.bar-track {
  height: 6px; background: var(--bg-3);
  border-radius: var(--r-full); overflow: hidden;
}
.bar-fill {
  height: 100%; background: var(--acc);
  border-radius: var(--r-full); width: 0%;
  transition: width 1.3s cubic-bezier(.4,0,.2,1);
}

/* Stats-viz section — futuristic maroon theme */
#stats-viz {
  background:
    radial-gradient(ellipse 65% 100% at 20% 50%, rgba(160,0,40,.5) 0%, transparent 65%),
    radial-gradient(ellipse 55% 70% at 85% 30%, rgba(120,0,30,.4) 0%, transparent 60%),
    linear-gradient(135deg, #1a0008 0%, #2d0010 45%, #1a000a 100%);
  position: relative;
}
#stats-viz::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 40%, transparent 100%);
}
#stats-viz .sec-label { color: #fca5a5; }
#stats-viz .sec-label::before, #stats-viz .sec-label::after { background: #fca5a5; }
#stats-viz .t-h2 { color: #fff; }
#stats-viz .stats-viz-desc { color: rgba(255,255,255,.75); }
#stats-viz .bar-lbl { color: rgba(255,255,255,.8); }
#stats-viz .bar-val { color: #fca5a5; }
#stats-viz .bar-track { background: rgba(255,255,255,.12); }
#stats-viz .bar-fill { background: linear-gradient(90deg, #fca5a5, #f87171); }

/* ================================================================
   19. CTA BANNER
   ================================================================ */
.cta-banner {
  background:
    radial-gradient(ellipse 70% 120% at 50% 50%, rgba(160,0,40,.6) 0%, transparent 70%),
    linear-gradient(135deg, #1a0008 0%, #2d0010 50%, #1a000a 100%);
  padding: var(--sp-4xl) 0;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 100%);
}
.cta-inner {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-2xl);
  position: relative; z-index: 1; flex-wrap: wrap;
}
.cta-txt-head {
  font-size: clamp(1.375rem, 3vw, 2.125rem);
  font-weight: 900; color: #fff; letter-spacing: -.02em; line-height: 1.2;
}
.cta-sub { font-size: 1rem; color: rgba(255,255,255,.8); margin-top: .5rem; }
.cta-btns { display: flex; gap: var(--sp-md); flex-shrink: 0; }
.btn-white { background: #fff; color: var(--acc); border-color: #fff; font-weight: 800; }
.btn-white:hover {
  background: rgba(255,255,255,.92); color: var(--acc-h);
  transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.14);
}
.btn-outline-w { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.btn-outline-w:hover { background: rgba(255,255,255,.1); border-color: #fff; color: #fff; }

/* ================================================================
   20. FOOTER
   ================================================================ */
footer { background: var(--bg-2); border-top: 1px solid var(--bdr); }
.footer-main { padding: var(--sp-4xl) 0 var(--sp-3xl); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--sp-3xl);
}
.footer-brand p {
  font-size: .9375rem; line-height: 1.72; color: var(--txt-3);
  margin: var(--sp-md) 0 var(--sp-xl); max-width: 300px;
}
.socials { display: flex; gap: .5rem; }
.soc {
  width: 36px; height: 36px; border-radius: var(--r);
  background: var(--bg-3); border: 1px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  color: var(--txt-3); font-size: 1rem; text-decoration: none;
  transition: all var(--t);
}
.soc:hover { background: var(--acc); border-color: var(--acc); color: #fff; transform: translateY(-2px); }

.footer-col-h {
  font-size: .78rem; font-weight: 800;
  color: var(--txt); letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: var(--sp-lg);
}
.footer-links { display: flex; flex-direction: column; gap: .625rem; }
.footer-links a {
  font-size: .9375rem; color: var(--txt-3);
  transition: color var(--t); font-weight: 500;
}
.footer-links a:hover { color: var(--acc); }

.fcontact-item { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .875rem; }
.fcontact-item i { color: var(--acc); font-size: 1rem; margin-top: 2px; flex-shrink: 0; }
.fcontact-item span { font-size: .9375rem; color: var(--txt-3); line-height: 1.5; }

.footer-bottom {
  padding: var(--sp-lg) 0;
  border-top: 1px solid var(--bdr);
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-xl);
}
.footer-bottom p { font-size: .875rem; color: var(--txt-3); }
.fbot-links { display: flex; gap: var(--sp-xl); }
.fbot-links a { font-size: .875rem; color: var(--txt-3); text-decoration: none; transition: color var(--t); }
.fbot-links a:hover { color: var(--acc); }

/* ================================================================
   21. SCROLL REVEAL ANIMATIONS
   ================================================================ */
.reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-l {
  opacity: 0; transform: translateX(-28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-r {
  opacity: 0; transform: translateX(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-sc {
  opacity: 0; transform: scale(.96);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal.vis, .reveal-l.vis, .reveal-r.vis, .reveal-sc.vis {
  opacity: 1; transform: none;
}

/* Stagger children on .stg parent */
.stg > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s ease, transform .5s ease;
}
.stg.vis > *:nth-child(1) { opacity:1; transform:none; transition-delay: .00s; }
.stg.vis > *:nth-child(2) { opacity:1; transform:none; transition-delay: .07s; }
.stg.vis > *:nth-child(3) { opacity:1; transform:none; transition-delay: .14s; }
.stg.vis > *:nth-child(4) { opacity:1; transform:none; transition-delay: .21s; }
.stg.vis > *:nth-child(5) { opacity:1; transform:none; transition-delay: .28s; }
.stg.vis > *:nth-child(6) { opacity:1; transform:none; transition-delay: .35s; }
.stg.vis > *:nth-child(7) { opacity:1; transform:none; transition-delay: .42s; }
.stg.vis > *:nth-child(8) { opacity:1; transform:none; transition-delay: .49s; }
.stg.vis > *:nth-child(9) { opacity:1; transform:none; transition-delay: .56s; }
.stg.vis > *:nth-child(10){ opacity:1; transform:none; transition-delay: .63s; }
.stg.vis > *:nth-child(11){ opacity:1; transform:none; transition-delay: .70s; }
.stg.vis > *:nth-child(12){ opacity:1; transform:none; transition-delay: .77s; }
.stg.vis > *:nth-child(13){ opacity:1; transform:none; transition-delay: .84s; }
.stg.vis > *:nth-child(14){ opacity:1; transform:none; transition-delay: .91s; }
.stg.vis > *:nth-child(15){ opacity:1; transform:none; transition-delay: .98s; }
.stg.vis > *:nth-child(16){ opacity:1; transform:none; transition-delay:1.05s; }
.stg.vis > *:nth-child(17){ opacity:1; transform:none; transition-delay:1.12s; }
.stg.vis > *:nth-child(18){ opacity:1; transform:none; transition-delay:1.19s; }
.stg.vis > *:nth-child(19){ opacity:1; transform:none; transition-delay:1.26s; }
.stg.vis > *:nth-child(20){ opacity:1; transform:none; transition-delay:1.33s; }

/* ================================================================
   22. PAGE HERO (inner pages)
   ================================================================ */
.page-hero {
  padding: 7.5rem 0 4rem; background: var(--bg-2);
  border-bottom: 1px solid var(--bdr); text-align: center;
}
.page-hero .breadcrumb {
  display: flex; align-items: center; justify-content: center;
  gap: .5rem; font-size: .8125rem; color: var(--txt-3);
  font-weight: 600; margin-bottom: var(--sp-lg);
}
.page-hero .breadcrumb a { color: var(--acc); }
.page-hero .breadcrumb i { font-size: .75rem; }

/* Reviews page — same deep maroon as the stats bar */
.page-hero--maroon {
  background:
    radial-gradient(ellipse 70% 120% at 50% 50%, rgba(160,0,40,.6) 0%, transparent 70%),
    linear-gradient(135deg, #1a0008 0%, #2d0010 50%, #1a000a 100%);
  border-bottom-color: rgba(255,255,255,.08);
  position: relative; overflow: hidden;
  padding-top: 10rem;
}
.page-hero--maroon::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 30%, transparent 100%);
}
.page-hero--maroon .container { position: relative; z-index: 1; }
.page-hero--maroon .breadcrumb { color: rgba(255,255,255,.60); }
.page-hero--maroon .breadcrumb a { color: rgba(255,255,255,.88); }
.page-hero--maroon .breadcrumb i { color: rgba(255,255,255,.40); }
.page-hero--maroon h1 { color: #fff; }
.page-hero--maroon p  { color: rgba(255,255,255,.78) !important; }

/* ================================================================
   23. SERVICES PAGE — FULL GRID
   ================================================================ */
.svc-full-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-xl); }
.sfc {
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r); overflow: hidden;
  transition: all var(--t-slow);
}
.sfc:hover { box-shadow: var(--sh-xl); transform: translateY(-4px); border-color: rgba(var(--acc-rgb),.3); }
.sfc-img .img-ph { min-height: 200px; border-radius: 0; border: none; border-bottom: 1px solid var(--bdr); }
.sfc-body { padding: var(--sp-xl); }
.sfc-icon {
  width: 48px; height: 48px; background: var(--acc-lt);
  border-radius: var(--r); display: flex; align-items: center;
  justify-content: center; color: var(--acc); font-size: 1.375rem;
  margin-bottom: var(--sp-md);
}
.sfc-title { font-size: 1.125rem; font-weight: 800; color: var(--txt); margin-bottom: var(--sp-sm); }
.sfc-desc  { font-size: .9375rem; line-height: 1.65; color: var(--txt-2); }

/* ================================================================
   24. CONTACT FORM
   ================================================================ */
.contact-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--sp-4xl); align-items: start; }
.form { display: flex; flex-direction: column; gap: var(--sp-lg); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); }
.form-group { display: flex; flex-direction: column; gap: .5rem; }
.form-lbl { font-size: .875rem; font-weight: 700; color: var(--txt); }
.form-inp {
  padding: .75rem 1rem; background: var(--bg-2);
  border: 1px solid var(--bdr); border-radius: var(--r);
  font-size: .9375rem; font-family: var(--font-primary);
  color: var(--txt); outline: none; transition: all var(--t);
}
.form-inp:focus {
  border-color: var(--acc); background: var(--bg);
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.12);
}
.form-inp::placeholder { color: var(--txt-3); }
textarea.form-inp { resize: vertical; min-height: 140px; }

/* Info cards on contact page */
.contact-info { display: flex; flex-direction: column; gap: var(--sp-lg); }
.ci-card {
  display: flex; gap: var(--sp-md); align-items: flex-start;
  padding: var(--sp-lg); background: var(--card);
  border: 1px solid var(--bdr); border-radius: var(--r);
  transition: all var(--t-slow);
}
.ci-card:hover { border-color: rgba(var(--acc-rgb),.3); box-shadow: var(--sh-md); }
.ci-icon {
  width: 48px; height: 48px; background: var(--acc-lt);
  border-radius: var(--r); display: flex; align-items: center;
  justify-content: center; color: var(--acc); font-size: 1.375rem; flex-shrink: 0;
}
.ci-title { font-size: .9375rem; font-weight: 800; color: var(--txt); margin-bottom: .25rem; }
.ci-val   { font-size: .9375rem; color: var(--txt-2); line-height: 1.55; }

/* Map placeholder */
.map-ph {
  min-height: 280px; border-radius: var(--r);
  background: var(--bg-3); border: 1px solid var(--bdr);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: .75rem; color: var(--txt-3);
  margin-top: var(--sp-lg);
}
.map-ph i { font-size: 2.5rem; opacity: .4; }
.map-ph span { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }

/* ================================================================
   25. ABOUT PAGE
   ================================================================ */
.team-grid  { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-xl); }
.team-card {
  text-align: center; background: var(--card);
  border: 1px solid var(--bdr); border-radius: var(--r);
  overflow: hidden; transition: all var(--t-slow);
}
.team-card:hover { box-shadow: var(--sh-lg); transform: translateY(-4px); border-color: rgba(var(--acc-rgb),.3); }
.team-photo .img-ph { min-height: 200px; border-radius: 0; border: none; }
.team-info { padding: var(--sp-lg); }
.team-name { font-size: 1rem; font-weight: 800; color: var(--txt); }
.team-role { font-size: .8125rem; color: var(--txt-3); font-weight: 600; }

/* ================================================================
   26. FOCUS & ACCESSIBILITY
   ================================================================ */
:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px;
}

/* ================================================================
   27. SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width: 0; display: none; }

/* ================================================================
   28. RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (max-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(4,1fr); }
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; }
  .footer-grid > *:last-child { grid-column: 1/-1; }
  .team-grid { grid-template-columns: repeat(3,1fr); }
  /* Nav links hidden; hamburger opens overlay */
  .nav-links { display: none; }
  .menu-btn  { display: flex; }
  .bot-nav   { display: none; }
  /* Mobile nav layout: logo | location (center) | toggle+hamburger (right) */
  .nav-inner { justify-content: space-between; }
  .nav-location { flex: 1; justify-content: center; order: 2; margin-left: 0; }
  .nav-brand { order: 1; flex-shrink: 0; }
  .nav-actions { order: 3; flex-shrink: 0; margin-left: 0; }
  body       { padding-bottom: 64px; }
  /* Shrink logo for tablet layout (hamburger mode) */
  .nav-logo  { width: 148px; height: 62px; }
  .nav-location { font-size: .72rem; padding: .25rem .45rem; height: 40px; }
  .nav-soc { display: none; }
}

@media (max-width: 900px) {
  .hero-inner, .concept-inner, .connect-inner,
  .vision-inner, .contact-grid { grid-template-columns: 1fr; gap: var(--sp-2xl); }
  .hero-content { margin-left: 0; }
  .hero-visual { order: 1; left: 0; display: flex; justify-content: center; }
  .hero-img-wrap { width: 90%; margin: 0 auto; }
  .hero-img-wrap .img-ph { width: 100%; min-height: 300px; }
  .hero-fc-1 { bottom: -10px; left: 10px; }
  .hero-fc-2 { top: 10px; right: 10px; }

  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat-item::after { display: none; }
  .stat-item { border-bottom: 1px solid var(--bdr); }
  .stat-item:last-child, .stat-item:nth-last-child(2) { border-bottom: none; }

  .svc-grid    { grid-template-columns: repeat(3,1fr); }
  .svc-detail  { grid-template-columns: 1fr; }
  .why-grid    { grid-template-columns: 1fr 1fr; }
  .process-steps { grid-template-columns: repeat(3,1fr); gap: var(--sp-lg); }
  .process-steps::before { display: none; }
  .testi-card  { min-width: calc(50% - .5rem); }
  .cta-inner   { flex-direction: column; text-align: center; }
  .cta-btns    { justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > *:first-child { grid-column: 1/-1; }
  .connect-features { grid-template-columns: 1fr 1fr; }
  .connect-txt { text-align: center; }
  .connect-txt .sec-label { justify-content: center; }
  .connect-txt .sec-label::before { display: none; }
  .connect-features { justify-items: center; }
  .connect-txt .btn { display: inline-flex; margin: 0 auto; }
  .cf { font-size: .72rem; gap: .4rem; }
  .cf i { font-size: .95rem; flex-shrink: 0; }
  .svc-full-grid { grid-template-columns: 1fr 1fr; }
  .team-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 600px) {
  .container { padding: 0 var(--sp-lg); }
  .section   { padding: var(--sp-4xl) 0; }
  .hero      { padding: 7.5rem 0 3rem; min-height: auto; }
  .hero-inner { gap: var(--sp-xl); text-align: center; }
  .hero-title { font-size: clamp(2.5rem, 10vw, 3.2rem); margin-bottom: var(--sp-lg); }
  .m-br { display: inline; }
  .hero-sub   { font-size: .95rem; margin-bottom: var(--sp-lg); }
  .hero-badge { font-size: .72rem; padding: .3rem .7rem; margin-bottom: var(--sp-lg); margin-left: auto; margin-right: auto; }
  .hero-ctas  { flex-direction: column; align-items: stretch; gap: var(--sp-sm); }
  .hero-ctas .btn { width: 100%; justify-content: center; }
  .google-badge { justify-content: center; }
  .hero-img-wrap { width: 85%; }
  .hero-img-wrap img { min-height: 220px; }
  .hero-img-wrap .img-ph { min-height: 220px; }
  .hero-fc-1, .hero-fc-2 { display: none; }
  .scroll-hint { display: none; }
  .svc-grid  { grid-template-columns: repeat(2,1fr); }
  .svc-detail > div { text-align: center; }
  .svc-detail .tags { justify-content: center; }
  .svc-detail .btn  { display: inline-flex; }
  .demand-inner { grid-template-columns: 1fr !important; gap: var(--sp-2xl) !important; }
  .why-grid  { grid-template-columns: 1fr; }
  .why-card  { text-align: center; }
  .why-card .why-icon { margin-left: auto; margin-right: auto; }
  /* Hide "Get a Quote" — bottom nav handles navigation */
  .nav-actions .btn-primary { display: none; }
  /* Further shrink logo on small phones */
  .nav-logo  { width: 120px; height: 50px; }
  .nav-location { font-size: .68rem; padding: .2rem .35rem; height: 40px; }
  .process-steps {
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-xl);
  }
  .process-steps::before {
    top: 27px; bottom: 27px; left: calc(50% - 0.5px); right: auto;
    width: 1px; height: auto;
    background: linear-gradient(180deg, transparent, var(--bdr) 10%, var(--bdr) 90%, transparent);
  }
  .proc-step { width: 100%; max-width: 280px; }
  .testi-card { min-width: 100%; }
  .form-row  { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; gap: var(--sp-md); }
  footer { background: #fff; border-top: none; }
  .footer-grid > * { text-align: center; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-brand p { max-width: 100%; }
  .socials { justify-content: center; }
  .fcontact-item { justify-content: center; }
  .fbot-links { justify-content: center; }
  .svc-full-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr 1fr; }
  .concept-imgs { grid-template-columns: 1fr; }
  .concept-imgs .img-ph:first-child { grid-column: 1; }
  .cta-banner   { padding: var(--sp-2xl) 0; }
  .cta-inner    { gap: var(--sp-lg); }
  .cta-txt-head { font-size: 1.25rem; }
  .cta-sub      { font-size: .875rem; margin-top: .375rem; }
  .cta-btns     { flex-direction: column; width: 100%; gap: var(--sp-sm); }
  .cta-btns .btn { width: 100%; justify-content: center; }
}

/* ================================================================
   29. REVIEWS — MARQUEE TICKER
   ================================================================ */
.testi-marquee {
  overflow: hidden;
  margin: var(--sp-xl) 0 var(--sp-2xl);
}
.marquee-inner {
  display: flex; gap: var(--sp-md);
  width: max-content;
  animation: ticker 42s linear infinite;
}
.marquee-inner:hover { animation-play-state: paused; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  display: inline-flex; align-items: center; gap: .625rem;
  padding: .5rem 1.125rem;
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: 4px; white-space: nowrap;
  font-size: .8125rem; font-weight: 600; color: var(--txt-2); flex-shrink: 0;
  transition: all var(--t);
}
.marquee-item:hover { border-color: rgba(var(--acc-rgb),.4); color: var(--acc); }
.mi-s { color: #F59E0B; font-size: .75rem; letter-spacing: .05em; }

/* Testimonials section — tighter top spacing */
#testimonials { padding-top: var(--sp-3xl); padding-bottom: var(--sp-3xl); }
#testimonials .testi-marquee { margin: var(--sp-md) 0 var(--sp-xl); }

/* ================================================================
   30. REVIEW CARD (home + reviews page)
   ================================================================ */
.reviews-grid-home {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-lg);
}

/* Landscape "TV" card — text left, photos right */
.rcard {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r);
  padding: var(--sp-lg);
  display: grid;
  grid-template-columns: 1fr 148px;
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "stars  photos"
    "svc    photos"
    "txt    photos"
    "foot   photos";
  column-gap: var(--sp-lg);
  transition: all var(--t-slow);
  position: relative; overflow: hidden;
  cursor: pointer;
}
.rcard::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--acc), rgba(var(--acc-rgb),.25));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-slow);
}
.rcard:hover {
  box-shadow: var(--sh-lg);
  transform: translateY(-3px);
  border-color: rgba(var(--acc-rgb),.3);
}
.rcard:hover::before { transform: scaleX(1); }
[data-theme="dark"] .rcard { background: rgba(13,13,28,.92); backdrop-filter: blur(12px); }
.rcard[hidden] { display: none; }

/* Stars */
.rcard-stars {
  grid-area: stars;
  display: flex; gap: .2rem; color: #F59E0B; font-size: .85rem;
  margin-bottom: .25rem; align-self: end;
}

/* Service badge */
.rcard-svc {
  grid-area: svc;
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .625rem; border-radius: var(--r-full);
  background: var(--acc-lt); color: var(--acc);
  font-size: .62rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; align-self: start; justify-self: start;
  margin-bottom: .375rem;
}
.rcard-svc i { font-size: .75rem; }

/* Review text — clamp to 5 lines */
.rcard-txt {
  grid-area: txt;
  font-size: .875rem; line-height: 1.65; color: var(--txt-2);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Photo column — 2×N grid on the right */
.rcard-photos {
  grid-area: photos;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  align-content: start;
}
/* Single image: fill full width */
.rcard-photos:has(.rp:only-child) {
  grid-template-columns: 1fr;
}
.rp {
  width: 100%; aspect-ratio: 1;
  border-radius: var(--r); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
}
.rp:hover { transform: scale(1.06); box-shadow: 0 4px 16px rgba(0,0,0,.2); }
.rp i { font-size: 1.25rem; position: relative; z-index: 1; opacity: .65; }
/* Photo colour variants */
.rp-b  { background: linear-gradient(135deg,#DBEAFE,#BFDBFE); }
.rp-o  { background: linear-gradient(135deg,#FEF3C7,#FDE68A); }
.rp-g  { background: linear-gradient(135deg,#D1FAE5,#A7F3D0); }
.rp-p  { background: linear-gradient(135deg,#EDE9FE,#C4B5FD); }
.rp-r  { background: linear-gradient(135deg,#FFE4E6,#FECDD3); }
.rp-t  { background: linear-gradient(135deg,#CCFBF1,#99F6E4); }
[data-theme="dark"] .rp-b { background: linear-gradient(135deg,#0F2745,#0A2040); }
[data-theme="dark"] .rp-o { background: linear-gradient(135deg,#2D1B05,#3D2510); }
[data-theme="dark"] .rp-g { background: linear-gradient(135deg,#082518,#0F2E1C); }
[data-theme="dark"] .rp-p { background: linear-gradient(135deg,#1E0D3A,#280E4A); }
[data-theme="dark"] .rp-r { background: linear-gradient(135deg,#2A0A10,#380C14); }
[data-theme="dark"] .rp-t { background: linear-gradient(135deg,#062520,#0A302A); }
.rp-more {
  background: var(--bg-3); border: 1px dashed var(--bdr-2);
  font-size: .72rem; font-weight: 800; color: var(--txt-3);
}

/* Card footer */
.rcard-foot {
  grid-area: foot;
  display: flex; align-items: center; gap: .75rem;
  margin-top: var(--sp-sm); padding-top: var(--sp-sm);
  border-top: 1px solid var(--bdr);
  align-self: end;
}
.rcard-av {
  width: 34px; height: 34px; border-radius: var(--r);
  background: var(--acc-lt); border: 1px solid rgba(var(--acc-rgb),.2);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 900; color: var(--acc); flex-shrink: 0;
}
.rcard-nm  { font-size: .875rem; font-weight: 800; color: var(--txt); line-height: 1.2; }
.rcard-dt  { font-size: .7rem; color: var(--txt-3); font-weight: 600; }
.rcard-g   { margin-left: auto; }
.rcard-g i { color: #4285F4; font-size: 1rem; }

/* ================================================================
   30b. TV PANEL — featured review
   ================================================================ */
.tv-panel {
  background: var(--card);
  border: 1px solid var(--bdr);
  border-radius: var(--r-md);
  padding: var(--sp-xl) var(--sp-xl);
  margin: 0 var(--sp-lg) var(--sp-lg);
  transition: opacity .2s ease;
}
.tv-body {
  display: flex;
  flex-direction: row;
  gap: var(--sp-2xl);
  align-items: stretch;
  height: 320px;
}
.tv-content {
  width: 40%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  overflow: hidden;
}
.tv-image {
  flex: 1;
  min-height: 0;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--bg-3);
}
.tv-head-row {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-md);
  padding-bottom: var(--sp-md); border-bottom: 1px solid var(--bdr);
}
.tv-name-block { display: flex; align-items: center; gap: .75rem; }
.tv-stars-block { display: flex; align-items: center; gap: .75rem; }
.tv-google-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .78rem; font-weight: 700; color: #4285F4;
}
.tv-google-badge i { font-size: 1rem; }
.tv-stars { display: flex; gap: .25rem; color: #F59E0B; font-size: 1.05rem; }
.tv-svc {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .75rem; border-radius: var(--r-full);
  background: var(--acc-lt); color: var(--acc);
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  align-self: flex-start;
}
.tv-txt {
  font-size: 1rem; line-height: 1.82; color: var(--txt-2);
  margin: 0; flex: 1;
}
.tv-photos {
  display: block;
  height: 100%;
  margin-top: 0;
}
/* Multi-image: JS sets grid-template-columns/rows dynamically based on count */
.tv-photos--multi {
  display: grid;
  gap: 4px;
  height: 100%;
}
.tv-ph {
  width: 100%; height: 100%;
  aspect-ratio: unset;
  border-radius: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform var(--t), box-shadow var(--t);
}
.tv-photos--multi .tv-ph { height: 100%; aspect-ratio: unset; }
.tv-ph:hover { transform: scale(1.03); box-shadow: 0 4px 16px rgba(0,0,0,.22); }
.tv-ph img { width: 100%; height: 100%; max-height: 100%; object-fit: contain; display: block; flex-shrink: 0; }
.tv-ph i { font-size: 3rem; opacity: .5; position: relative; z-index: 1; }
.tv-av {
  width: 42px; height: 42px; border-radius: var(--r);
  background: var(--acc-lt); border: 1px solid rgba(var(--acc-rgb),.2);
  display: flex; align-items: center; justify-content: center;
  font-size: .9rem; font-weight: 900; color: var(--acc); flex-shrink: 0;
}
.tv-info .tv-nm { font-size: 1rem; font-weight: 800; color: var(--txt); }
.tv-info .tv-dt { font-size: .75rem; color: var(--txt-3); font-weight: 600; }

/* ================================================================
   30c. REVIEW CARD STRIP
   ================================================================ */
.tv-strip-nav {
  display: flex; align-items: center; gap: var(--sp-sm);
  padding: 0 var(--sp-lg);
}
.tv-strip-btn {
  flex-shrink: 0;
  width: 40px; height: 40px; border-radius: var(--r);
  background: var(--card); border: 1px solid var(--bdr);
  display: flex; align-items: center; justify-content: center;
  color: var(--txt-2); font-size: 1.4rem; cursor: pointer;
  transition: all var(--t);
}
.tv-strip-btn:hover { background: var(--acc); border-color: var(--acc); color: #fff; }
.tv-strip-wrap {
  flex: 1;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 0 var(--sp-md);
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tv-strip-wrap::-webkit-scrollbar { display: none; }
.tv-strip {
  display: flex;
  gap: var(--sp-md);
  width: max-content;
  padding-bottom: 2px;
}

/* Strip card overrides — landscape TV layout */
.tv-strip .rcard {
  width: 400px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "foot   stars"
    "svc    svc"
    "txt    txt"
    "photos photos";
  row-gap: var(--sp-sm);
  column-gap: var(--sp-md);
  scroll-snap-align: start;
  cursor: pointer;
}
.tv-strip .rcard-stars {
  grid-area: stars;
  align-self: center;
  margin-bottom: 0;
}
.tv-strip .rcard-foot {
  grid-area: foot;
  border: none; padding: 0; margin: 0;
  align-self: center;
}
.tv-strip .rcard-svc  { grid-area: svc; margin-bottom: 0; }
.tv-strip .rcard-txt  { grid-area: txt; -webkit-line-clamp: 3; font-size: .8125rem; }
.tv-strip .rcard-photos {
  grid-area: photos;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* default: 3 cols (covers 3 & 5 images) */
  gap: 6px;
}
/* 1 image: full width */
.tv-strip .rcard-photos:has(.rp:only-child) {
  grid-template-columns: 1fr;
}
/* 2 images: side by side */
.tv-strip .rcard-photos:has(.rp:nth-child(2):last-child) {
  grid-template-columns: repeat(2, 1fr);
}
/* 4 images: 2×2 */
.tv-strip .rcard-photos:has(.rp:nth-child(4):last-child) {
  grid-template-columns: repeat(2, 1fr);
}
.tv-strip .rp { width: 100%; aspect-ratio: 1; height: auto; flex-shrink: 0; }
.tv-strip .rcard.tv-active {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(var(--acc-rgb),.15);
}
.tv-strip .rcard.tv-active::before { transform: scaleX(1); }

/* ================================================================
   30c. PHOTO LIGHTBOX
   ================================================================ */
.photo-lb {
  position: fixed; inset: 0; z-index: 3000;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(12px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.photo-lb.open { opacity: 1; pointer-events: all; }
.photo-lb-inner {
  width: min(480px, 90vw); aspect-ratio: 1;
  border-radius: var(--r-md); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transform: scale(.88);
  transition: transform .25s ease;
}
.photo-lb.open .photo-lb-inner { transform: scale(1); }
.photo-lb-inner i { font-size: 5rem; opacity: .55; }
.photo-lb-close {
  position: absolute; top: var(--sp-lg); right: var(--sp-lg);
  width: 40px; height: 40px; border-radius: var(--r);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; font-size: 1.25rem;
  transition: background var(--t);
}
.photo-lb-close:hover { background: rgba(255,255,255,.25); }

/* ================================================================
   31. REVIEWS PAGE — RATING BREAKDOWN + FILTERS
   ================================================================ */
.rating-breakdown-wrap {
  display: grid; grid-template-columns: 160px 1fr;
  gap: var(--sp-3xl); align-items: center;
  padding: var(--sp-2xl) var(--sp-3xl);
  background: var(--card); border: 1px solid var(--bdr);
  border-radius: var(--r-md); margin-bottom: var(--sp-2xl);
}
.rating-big-num {
  font-size: 5rem; font-weight: 900; color: var(--txt);
  letter-spacing: -.06em; line-height: 1; text-align: center;
}
.rating-big-stars {
  display: flex; justify-content: center; gap: .25rem;
  color: #F59E0B; font-size: 1.125rem; margin: .375rem 0;
}
.rating-big-count { font-size: .8125rem; font-weight: 700; color: var(--txt-3); text-align: center; }
.rb-rows { display: flex; flex-direction: column; gap: .625rem; }
.rb-row  { display: flex; align-items: center; gap: .875rem; }
.rb-lbl  { font-size: .8125rem; font-weight: 700; color: var(--txt-2); width: 3.5rem; flex-shrink: 0; }
.rb-track { flex: 1; height: 6px; background: var(--bg-3); border-radius: var(--r-full); overflow: hidden; }
.rb-fill  { height: 100%; background: var(--acc); border-radius: var(--r-full); width: 0%; transition: width 1.3s cubic-bezier(.4,0,.2,1); }
.rb-pct   { font-size: .8125rem; font-weight: 800; color: var(--txt-3); width: 2.5rem; text-align: right; flex-shrink: 0; }

/* Filter pills */
.filter-pills { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--sp-2xl); }
.fpill {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .5rem 1rem; border-radius: 4px;
  font-size: .8125rem; font-weight: 700;
  background: var(--bg-3); border: 1px solid var(--bdr);
  cursor: pointer; transition: all var(--t); color: var(--txt-2);
}
.fpill .fc {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 5px;
  background: var(--bdr-2); border-radius: 4px;
  font-size: .65rem; font-weight: 800; transition: background var(--t);
}
.fpill:hover, .fpill.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.fpill.on .fc, .fpill:hover .fc { background: rgba(255,255,255,.25); }

/* Full reviews grid */
.all-reviews-grid {
  display: grid; grid-template-columns: repeat(2,1fr); gap: var(--sp-xl);
}

/* Reviews page cards — landscape layout, compact adaptive photo column */
.all-reviews-grid .rcard {
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "stars  photos"
    "svc    photos"
    "txt    photos"
    "foot   photos";
}
.all-reviews-grid .rcard-photos {
  grid-template-columns: repeat(2, 60px);
  gap: 4px;
  align-content: start;
  align-self: stretch;
}
.all-reviews-grid .rcard-photos:has(.rp:only-child) {
  grid-template-columns: 60px;
}
.all-reviews-grid .rp {
  width: 60px; height: 60px; aspect-ratio: 1;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tv-head-row { flex-direction: column; align-items: flex-start; }
  .all-reviews-grid  { grid-template-columns: 1fr; }
  .rating-breakdown-wrap { grid-template-columns: 1fr; gap: var(--sp-xl); text-align: center; }
  .rb-rows { max-width: 500px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .rcard { grid-template-columns: 1fr; grid-template-areas: "stars" "svc" "txt" "photos" "foot"; }
  .rcard-photos { grid-template-columns: repeat(4,1fr); }
  .all-reviews-grid .rcard {
    grid-template-columns: 1fr auto;
    grid-template-areas: "stars photos" "svc photos" "txt photos" "foot photos";
  }
  .all-reviews-grid .rcard-photos { grid-template-columns: repeat(2, 52px); }
  .all-reviews-grid .rcard-photos:has(.rp:only-child) { grid-template-columns: 52px; }
  .all-reviews-grid .rp { width: 52px; height: 52px; }
  .all-reviews-grid  { grid-template-columns: 1fr; }
  #reviews-title { text-align: center; margin-bottom: var(--sp-xl); }
  .filter-pills { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .fpill { justify-content: center; }
  /* stagger animation never triggers on tall single-column grids — show cards immediately */
  .stg > * { opacity: 1; transform: none; }

  /* Hide the big TV panel on mobile — strip cards are enough */
  .tv-panel { display: none; }

  /* Strip nav: scroll area full-width, both buttons on row below */
  .tv-strip-nav { flex-wrap: wrap; padding: 0 var(--sp-md) var(--sp-sm); gap: var(--sp-sm); }
  .tv-strip-wrap { order: 1; flex: 0 0 100%; }
  .tv-strip-btn { order: 2; flex: 1; justify-content: center; width: auto; height: 34px; font-size: 1.15rem; }

  /* Compact snap cards — slightly less than full width for peek effect */
  .tv-strip .rcard {
    width: calc(100vw - 3.5rem);
    padding: 0.55rem 0.65rem;
    row-gap: 0.22rem;
    column-gap: 0.4rem;
  }
  .tv-strip .rcard-photos { gap: 4px; }
  .tv-strip .rcard-txt  { -webkit-line-clamp: 2; font-size: .76rem; }
  .tv-strip .rcard-nm   { font-size: .78rem; }
  .tv-strip .rcard-dt   { font-size: .61rem; }
  .tv-strip .rcard-av   { width: 26px; height: 26px; font-size: .62rem; }
  .tv-strip .rcard-stars { font-size: .72rem; gap: .12rem; }
  .tv-strip .rcard-svc  { font-size: .57rem; padding: .12rem .45rem; }
  .tv-strip .rcard-foot { gap: .4rem; }
}

/* Landscape phones — same treatment: hide panel, buttons below, compact cards */
@media (orientation: landscape) and (max-height: 600px) {
  .tv-panel { display: none; }
  .tv-strip-nav { flex-wrap: wrap; padding: 0 var(--sp-md) var(--sp-sm); gap: var(--sp-sm); }
  .tv-strip-wrap { order: 1; flex: 0 0 100%; }
  .tv-strip-btn { order: 2; flex: 1; justify-content: center; width: auto; height: 34px; font-size: 1.15rem; }
  .tv-strip .rcard { width: calc(100vw - 3.5rem); }
  .tv-strip .rcard-photos { gap: 4px; }
}

/* ================================================================
   PAGE LOADER — full-screen overlay with logo + twin spin rings
   ================================================================ */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 0.45s ease, visibility 0.45s ease;
}
#page-loader.loader-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  height: 240px;
}
.loader-logo {
  width: 155px;
  height: auto;
  animation: loaderPulse 2s ease-in-out infinite;
}
[data-theme="light"] .loader-logo-dark  { display: none; }
[data-theme="dark"]  .loader-logo-light { display: none; }
.loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2.5px solid var(--bdr-2);
  border-top-color: var(--acc);
  border-right-color: var(--acc);
  animation: loaderSpin 1.2s linear infinite;
}
.loader-ring-2 {
  position: absolute;
  inset: 14px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-bottom-color: var(--acc);
  opacity: 0.45;
  animation: loaderSpin 1.9s linear infinite reverse;
}
@keyframes loaderPulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%       { transform: scale(0.93); opacity: 0.72; }
}
@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}


/* ================================================================
   FLOATING CONTACT WIDGETS
   ================================================================ */
.float-widgets {
  position: fixed; bottom: 28px; right: 28px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  z-index: calc(var(--z-nav) - 1);
}
.float-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  height: 48px; padding: 0 1.1rem 0 .75rem; border-radius: var(--r);
  font-size: 1.25rem; color: #fff; text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
  transition: transform var(--t), box-shadow var(--t), background var(--t);
  white-space: nowrap;
}
.float-btn span {
  font-family: var(--font-primary);
  font-size: .8rem; font-weight: 700; letter-spacing: .01em; color: #fff;
}
.float-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.3); color: #fff; }
.float-wa   { background: #25D366; }
.float-wa:hover { background: #1db954; }
.float-call { background: var(--acc); }
.float-call:hover { background: var(--acc-h); }

@media (max-width: 600px) {
  .float-widgets { bottom: 18px; right: 14px; gap: 8px; }
  .float-btn { width: 44px; height: 44px; padding: 0; border-radius: var(--r); font-size: 1.125rem; justify-content: center; }
  .float-btn span { display: none; }
}