:root{
  --bg:#fafafa;
  --card:#ffffff;
  --ink:#111827;
  --ink2:#374151;
  --muted:#6b7280;
  --line:rgba(0,0,0,0.08);
  --line2:rgba(0,0,0,0.12);
  --brand:#0d6efd;

  --radius:14px;
  --radius2:18px;
  --shadow:0 10px 28px rgba(0,0,0,0.10);

  --headerH:72px;
  --containerW:1120px;
  --pad:16px;
  --pad2:22px;
  --sectionY:44px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{
  font:inherit;
  border:0;
  background:none;
  padding:0;
  margin:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.container{
  max-width:var(--containerW);
  margin:0 auto;
  padding:0 var(--pad);
}

.section{
  padding:var(--sectionY) 0;
}

.section-title{
  margin:0 0 18px 0;
  font-size:1.6rem;
  text-align:center;
  letter-spacing:0.02em;
}

@media (max-width:900px){
  :root{
    --headerH:64px;
    --pad:14px;
    --sectionY:34px;
  }
  .section-title{
    font-size:1.35rem;
    margin-bottom:14px;
  }
}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#fff;
  border-bottom:1px solid var(--line);
}

/* Scoped icon normalization for Bootstrap Icons inside header only */
.site-header .bi,
.site-header i{
  position:static !important;
  top:auto !important;
  left:auto !important;
  transform:none !important;
  line-height:1 !important;
  vertical-align:middle !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.site-header .container.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--headerH);
  gap:12px;
}

.brand a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
}

.brand-logo{
  width:40px;
  height:40px;
  border-radius:12px;
  object-fit:contain;
  background:#fff;
  border:1px solid var(--line);
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.08;
}

.brand-text .title{
  font-weight:800;
  letter-spacing:0.08em;
  font-size:0.95rem;
}

.brand-text .subtitle{
  font-weight:700;
  color:var(--muted);
  font-size:0.78rem;
  letter-spacing:0.02em;
  margin-top:2px;
}

.nav-right{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Language toggle */
.lang-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
}

.lang-toggle button{
  padding:7px 12px;
  border-radius:999px;
  font-size:0.86rem;
  font-weight:700;
  color:var(--ink2);
  transition:background 0.16s ease,color 0.16s ease,transform 0.16s ease;
}

.lang-toggle button:hover{
  background:#f5f7ff;
  color:var(--brand);
}

.lang-toggle button[aria-current="true"]{
  background:#e6efff;
  color:var(--brand);
}

/* Hamburger */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  align-items:center;
  justify-content:center;
  transition:box-shadow 0.18s ease,border-color 0.18s ease,transform 0.18s ease;
}

.nav-toggle:hover{
  border-color:var(--line2);
  box-shadow:0 8px 18px rgba(0,0,0,0.08);
  transform:translateY(-1px);
}

.nav-toggle svg{
  width:20px;
  height:20px;
}

/* Menu normalized desktop */
.menu{
  display:flex;
  align-items:center;
  gap:10px;
}

.menu a,
.menu-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  color:var(--ink2);
  font-size:0.95rem;
  font-weight:800;
  letter-spacing:0.01em;
  line-height:1;
  transition:background 0.18s ease,color 0.18s ease,border-color 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease;
}

/* Ensure icon size and alignment is consistent in menu links */
.menu a .bi,
.menu-link .bi{
  font-size:18px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.menu a:hover,
.menu-link:hover{
  color:var(--brand);
  border-color:var(--line2);
  background:#f8f9ff;
  box-shadow:0 8px 18px rgba(0,0,0,0.06);
  transform:translateY(-1px);
}

.menu a.cta-quote{
  border-color:rgba(13,110,253,0.25);
}

/* Dropdown normalized */
.menu-item.has-sub{
  position:relative;
}

.menu-link svg{
  width:18px;
  height:18px;
}

.sub{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:260px;
  padding:10px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line2);
  box-shadow:0 16px 40px rgba(0,0,0,0.14);
  display:none;
  z-index:2000;
}

.menu-item.has-sub.sub-open .sub{
  display:block;
}

.sub a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-radius:12px;
  font-weight:800;
  font-size:0.93rem;
  color:var(--ink2);
}

.sub a .bi{
  font-size:16px;
  opacity:0.9;
}

.sub a:hover{
  background:#f1f5ff;
  color:var(--brand);
}

/* Mobile header and menu rebuilt to stop wrapping */
@media (max-width:900px){
  .site-header .container.nav{
    height:var(--headerH);
    padding:0;
    flex-wrap:nowrap;
    gap:10px;
  }

  .brand{
    flex:1 1 auto;
    min-width:0;
    padding-left:var(--pad);
  }

  .brand a{
    padding:10px 0;
    min-width:0;
  }

  .brand-text{
    min-width:0;
  }

  .brand-text .title{
    font-size:0.92rem;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .brand-text .subtitle{
    display:none;
  }

  .nav-right{
    order:3;
    margin-left:auto;
    padding-right:var(--pad);
    gap:8px;
  }

  .lang-toggle{
    padding:3px;
    gap:4px;
  }

  .lang-toggle button{
    padding:7px 10px;
    font-size:0.84rem;
  }

  .nav-toggle{
    display:flex;
    order:2;
    margin-left:auto;
    width:44px;
    height:44px;
    border-radius:14px;
  }

  .menu{
    position:fixed;
    left:0;
    right:0;
    top:var(--headerH);
    bottom:0;
    width:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    background:#fff;
    border-top:1px solid var(--line);
    padding:14px var(--pad) 18px var(--pad);
    overflow:auto;
    transform:translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.18s ease,transform 0.18s ease;
  }

  .site-header.nav-open .menu{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }

  .menu a,
  .menu-link{
    width:100%;
    justify-content:space-between;
    padding:14px 14px;
    border-radius:16px;
    font-size:1rem;
    box-shadow:0 10px 22px rgba(0,0,0,0.06);
  }

  .menu-item.has-sub{
    position:static;
  }

  .sub{
    position:static;
    min-width:unset;
    box-shadow:none;
    border-radius:16px;
    margin-top:8px;
    padding:8px;
    border:1px solid var(--line);
    background:#fff;
  }

  .sub a{
    padding:14px 12px;
    border-radius:14px;
  }

  .site-header.nav-open{
    box-shadow:0 14px 32px rgba(0,0,0,0.08);
  }

  body{
    scroll-padding-top:var(--headerH);
  }
}

/* Hero */
.hero{
  background:#fff;
  border-bottom:1px solid var(--line);
}

.hero-inner{
  padding:54px 0;
  text-align:center;
}

.hero-brand{
  margin:0 0 10px 0;
  color:var(--brand);
  font-weight:900;
  letter-spacing:0.12em;
  font-size:2.2rem;
}

.hero-tagline{
  margin:0 0 18px 0;
  color:var(--ink2);
  font-size:1.1rem;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border-radius:16px;
  background:var(--brand);
  color:#fff;
  font-weight:900;
  letter-spacing:0.01em;
  box-shadow:0 14px 28px rgba(13,110,253,0.24);
  transition:transform 0.18s ease,box-shadow 0.18s ease;
}

.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 34px rgba(13,110,253,0.28);
}

.btn svg{
  width:18px;
  height:18px;
}

@media (max-width:900px){
  .hero-inner{padding:38px 0}
  .hero-brand{font-size:1.8rem}
  .hero-tagline{font-size:1rem}
}

/* Services */
.services-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  padding-top:8px;
}

@media (max-width:992px){
  .services-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .services-grid{grid-template-columns:1fr}
}

.service-tile{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius2);
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,0.06);
  transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease;
}

.service-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(0,0,0,0.08);
  border-color:var(--line2);
}

.tile-figure{
  margin:0;
  aspect-ratio:16/9;
  background:#f3f4f6;
  overflow:hidden;
}

.tile-figure img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.tile-body{
  padding:16px 16px;
}

.tile-title{
  margin:0;
  font-size:1.05rem;
  font-weight:900;
  color:var(--ink);
}

/* Reviews carousel */
.reviews .container{
  padding-bottom:10px;
}

.carousel{
  display:flex;
  align-items:center;
  gap:10px;
}

.car-btn{
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform 0.18s ease,box-shadow 0.18s ease,border-color 0.18s ease;
  flex:0 0 auto;
}

.car-btn:hover{
  transform:translateY(-1px);
  border-color:var(--line2);
  box-shadow:0 10px 20px rgba(0,0,0,0.08);
}

.car-btn svg{
  width:18px;
  height:18px;
}

.viewport{
  width:100%;
  overflow:hidden;
  border-radius:var(--radius2);
  border:1px solid var(--line);
  background:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,0.06);
}

.track{
  display:flex;
  will-change:transform;
  transition:transform 0.35s ease;
}

.review-card{
  min-width:100%;
  padding:18px 18px;
}

.review-text{
  margin:0 0 10px 0;
  font-size:1.02rem;
  color:var(--ink);
}

.review-meta{
  color:var(--muted);
  font-weight:800;
  font-size:0.92rem;
}

.dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:14px;
}

.dots button{
  width:9px;
  height:9px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,0.25);
  opacity:0.6;
  transition:opacity 0.18s ease,transform 0.18s ease,background 0.18s ease;
}

.dots button[aria-current="true"]{
  opacity:1;
  background:var(--brand);
  transform:scale(1.25);
}

/* Small safety spacing so nothing touches screen edges */
@media (max-width:420px){
  .menu a,
  .menu-link{
    padding:14px 12px;
  }
  .review-card{
    padding:16px 14px;
  }
}