:root {
  --brand: #0ea5b7;
  /* Teal Blue (swish element) */
  --accent: #f4a300;
  /* Gold/Orange (outline + text) */
  --ink: #ffffff;
  /* White for headings on dark */
  --muted: #9aa3b2;
  /* Muted grey text */
  --bg: #000000;
  /* Background black */
  --card: #0b0f19;
  /* Card background (near-black) */
  --line: #1f2937;
  /* Borders on dark */
  --ring: rgba(14, 165, 183, .35);
  /* Ring glow in teal */
  --gear: #888888;
  /* Grey (for gear icons) */

  --radius: 16px;

  /* Slider + Image heights */
  --slider-h-desktop: 500px;
  --img-h-desktop: 380px;
  --slider-h-tablet: 420px;
  --img-h-tablet: 300px;
  --slider-h-phone: 320px;
  --img-h-phone: 220px;
}

* {
  box-sizing: border-box
}

html,
body {
  margin: 0;
  padding: 0
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

a {
  color: var(--brand);
  text-decoration: none
}

img {
  max-width: 100%;
  display: block
}

.container {
  width: min(1100px, 92%);
  margin-inline: auto;
  /* padding: 0 !important; */
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--brand);
  color: #0b1220;
  padding: .85rem 1.1rem;
  border-radius: 12px;
  font-weight: 700;
  border: 2px solid transparent;
  box-shadow: 0 10px 20px -10px var(--ring);
  transition: .18s ease;
}

.btn:hover {
  transform: translateY(-1px)
}

.btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--ring)
}

.btn.outline {
  background: transparent;
  color: #fff;
  border-color: #fff
}

.btn.accent {
  background: var(--accent);
}

/* .btn.white{background:#ffffff;color:#000;border-color:#ffffff} */

.badge {
  font-size: .75rem;
  background: #06272b;
  color: #67e8f9;
  padding: .3rem .6rem;
  border-radius: 999px;
  font-weight: 700
}

.muted {
  color: var(--muted)
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .6);
}

/* Header (two nav bars) */
header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(0, 0, 0, .8);
  border-bottom: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(8px);
}

.utility {
  border-bottom: 1px solid var(--line)
}

.utility .row,
.mainnav .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem 0
}

.left,
.right {
  display: flex;
  align-items: center;
  gap: 1rem
}

.brand {
  display: flex;
  align-items: center;
  gap: .6rem
}

.brand-title {
  display: flex;
  flex-direction: column;
  line-height: 1
}

.brand-title b {
  font-size: 1.02rem;
  letter-spacing: .2px;
  color: #fff
}

.brand-title small {
  color: #8bd3dd;
  font-weight: 700
}

.chip {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .6rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-size: .88rem;
  background: rgba(255, 255, 255, .03)
}

.chip svg {
  width: 16px;
  height: 16px;
  opacity: .85
}

.call-chip {
  background: var(--accent);
  color: #000;
  /* dark text on orange */
  font-weight: 700;
  border-color: var(--accent);
}

.call-chip:hover {
  background: #fbbf24;
  /* slightly lighter hover */
  color: #000;
}

.navlinks {
  display: flex;
  gap: 1rem;
  align-items: center
}

.navlinks a {
  color: #ffffff;
  /* default white */
  font-weight: 600;
  transition: color .25s ease;
  position: relative;
  text-decoration: none;
}

.navlinks a:hover {
  /* color: var(--brand); */
}

/* Active (clicked/current page): use accent orange */
/* .navlinks a:active,
.navlinks a[aria-current="page"] {
  color: var(--accent);
} */

.navlinks a.active {
  border-bottom-color: var(--brand, #0ea5b7);
}
.navlinks a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 100%;
  background: var(--brand, #0ea5b7);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.navlinks a:hover::after,
.navlinks a.active::after {
  transform: scaleX(1);
}
.menu-toggle {
  display: none;
  background: transparent;
  border: 0;
  font-size: 1.6rem;
  color: #fff
}

/* Nav: shared item wrapper */
.navlinks .nav-item {
  position: relative
}

/* Trigger button styled like your links */
.drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.drop-trigger:hover {
  color: var(--brand)
}

.drop-trigger:focus {
  outline: none;
  /* box-shadow: 0 0 0 4px var(--ring); */
  border-radius: 8px
}

.drop-trigger .caret {
  transition: transform .18s ease;
  opacity: .9
}

.has-dropdown.open .drop-trigger .caret {
  transform: rotate(180deg)
}

/* Panel */
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 220px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 28px -18px rgba(0, 0, 0, .65), 0 0 14px rgba(14, 165, 183, .25);
  padding: .5rem;
  z-index: 40;
}

.dropdown::before {
  /* little top spacer for hover forgiveness */
  content: "";
  position: absolute;
  top: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

/* Items */
.dropdown-link {
  display: block;
  padding: .6rem .7rem;
  border-radius: 10px;
  color: var(--ink);
  background: transparent;
  transition: background .15s ease, color .15s ease;
  border: 1px solid transparent;
}

.dropdown-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, .04);
  border-color: var(--line);
}

/* Desktop hover (optional enhancement) */
@media (hover: hover) {
  .navlinks .has-dropdown:hover .dropdown[hidden] {
    display: block !important
  }
}

/* Mobile / tablet: make dropdown act like an accordion inside the column menu */
@media (max-width: 900px) {
  .dropdown {
    position: static;
    top: auto;
    left: auto;
    min-width: 0;
    margin-top: .4rem;
    padding: .4rem;
    border-radius: 12px;
  }

  .dropdown-link {
    padding: .6rem .65rem
  }
}

/* === Mobile nav fixes (add after your current CSS) === */

/* 1) Show hamburger on mobile, hide links until toggled */
@media (max-width: 900px){
  .menu-toggle{ display:block; }
  .mainnav{
    position: relative;
    z-index: 50;
  }

  /* Hide navlinks until body.nav-open is set */
  /* .navlinks{
    position:absolute;  
    flex-direction:column;
    gap:.25rem;
    width:100%;
    padding:.6rem 0;
    top: 117px;
    background:var(--bg) ;
    color: var(--ink);
  } */

  
  .navlinks{
    position: absolute;
    top: 100%;            /* <- follows the actual header height */
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    gap: .25rem;
    padding: .6rem 0;
    background: var(--bg);
    color: var(--ink);
    border-top: 1px solid var(--line);
    box-shadow: 0 10px 24px -18px rgba(0,0,0,.6);
  }
  body.nav-open .navlinks{ display:flex; }

  /* Make items full-width, left-aligned, easier to tap */
  .navlinks > a,
  .drop-trigger{
    width:100%;
    text-align:left;
    padding:.65rem .5rem;
  }

  /* 2) Dropdown becomes flowing block, not absolute */
  .navlinks .nav-item{ width:100%; } /* ensure it can expand */
  .dropdown {
    position:static;   /* <- key: flows in document, appears below trigger */
    top:auto; left:auto;
    min-width:unset;
    margin:.35rem 0 .6rem;
    padding:.35rem;
    border-radius:12px;
    z-index:auto;      /* no stacking over next nav item */
    box-shadow: 0 8px 20px -14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02);
  }

  /* Optional: slightly smaller underline offset so it doesn't touch borders */
  .navlinks a::after{ bottom:-2px; }
}

/* 3) Accessibility + caret state already supported by your .open class */
.dropdown[hidden]{ display:none; }



/* Hero */
.hero {
  display: grid;
  gap: 2rem;
  align-items: center;
  grid-template-columns: 1.1fr .9fr;
  padding: 3rem 0;
}

.hero h1 {
  font-size: clamp(1.9rem, 1.4rem + 1.7vw, 3rem);
  line-height: 1.1;
  margin: 0 0 .6rem;
  color: #fff
}

.hero p {
  font-size: 1.05rem
}

/* Lists / grids */
.list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding-left: 1.2rem
}

.list li {
  margin-left: .2rem
}

.services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}

.services .price {
  font-weight: 800;
  font-size: 1.2rem;
  color: #fff
}

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: center
}

.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem
}

.cols-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem
}


/* reapirs card css */

.section-title {
  text-align: center;
  margin: 2rem 1rem;
  color: #fff
}

/* Card grid stays responsive */
.cards-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 900px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}



/* Card */
.product-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Uniform card logo (your transparent PNGs) */
.card-logo {
  width: 80px;
  /* desktop */
  height: 80px;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  /* subtle rounded square frame */
  background: rgba(255, 255, 255, .04);
  padding: 10px;
  /* inner breathing room */
  margin-bottom: .9rem;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .3));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
    /* outer shadow */
    0 0 8px rgba(15, 229, 253, 0.5);
}

.card-header {
  display: flex;
  align-items: center;
  /* centers logo & text vertically */
  gap: 2rem;
  /* space between logo and text */
  margin-bottom: .9rem;
  /* keeps same spacing as before */
}

.card-logo {
  margin-bottom: 0;
  /* remove old bottom margin since it's now inline */
}

.card-text h3,
.card-text h6 {
  margin: 0;
  /* reset margins so they align cleanly */
}


.card-text h6 {
  font-weight: 600;
  color: var(--brand);
  /* font-size: 0.9rem; */
}
.card-text h3:hover{
  color: var(--ink);
}


@media (max-width:1024px) {
  .card-logo {
    width: 68px;
    height: 68px;
  }
}

@media (max-width:640px) {
  .card-logo {
    width: 58px;
    height: 58px;
  }
}

/* .product-card h3 {
      margin: .25rem 0;
      color: #fff;
      font-size: 1.1rem;
    }

    .product-card h6 {
      margin: .1rem 0 .6rem;
      color: var(--brand);
      font-weight: 600;
    } */

/* Bullet list */
.price-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .45rem;
}

.price-list li {
  padding: .5rem .65rem;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, .02);
  color: var(--ink);
  font-size: .95rem;
}

/* Buttons row */
.product-card .actions {
  margin-top: .9rem;
  display: flex;
  gap: .6rem;
}

.product-card a {
  color: #fff;
}

.product-card a:hover {
  color: var(--brand);
}

/* Feature highlights */
.ribbon {
  border-left: 6px solid var(--accent);
  padding-left: .8rem;
  margin: .5rem 0
}

/* FAQ */
.faq details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem
}

.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: #fff
}

/* FAQ grid layout */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Left FAQ items */
.faq-left details {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.faq-left summary {
  cursor: pointer;
  font-weight: 700;
  color: #fff;
}

.faq-left p {
  margin-top: .6rem;
  color: var(--muted);
}

/* Right image */
.faq-right {
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-image {
  max-width: 100%;
  border-radius: 16px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6);
}

/* Responsive: hide image on mobile */
@media (max-width:768px) {
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .faq-right {
    display: none;
  }
}


/* Footer */
footer {
  background: #000;
  color: #c7d2fe;
  margin-top: 3rem;
  padding: 2.5rem 0
}

footer a {
  color: #c7d2fe
}

/* Inputs */
input,
select,
textarea {
  width: 100%;
  padding: .75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  outline: 0;
  transition: .2s;
  background: #0a0e17;
  color: #e5e7eb;
}

input::placeholder,
select:invalid {
  color: #8b95a6
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px var(--ring)
}

label {
  font-weight: 600;
  font-size: .95rem;
  display: grid;
  gap: .4rem;
  color: #fff
}

.toast {
  display: none;
  margin-top: .6rem;
  font-size: .9rem
}

.toast.ok {
  color: #34d399
}

.toast.err {
  color: #f87171
}

/* Slider */

.device-slider {
  background: linear-gradient(180deg, #0b0f19, #000);
  height: 500px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* Grid layout inside each slide */
.slide-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  height: 100%;
  padding: 2rem;
  gap: 2rem;
}

/* Image side */
.slide-image {
  display: flex;
  justify-content: center;
  align-items: center;
}

.slide-image img {
  height: 380px;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .65));
  transition: transform .3s ease;
}

.slide-image img:hover {
  transform: scale(1.05);
}

/* Text side */
.slide-content h2 {
  color: #fff;
  font-size: 2rem;
  margin: 0 0 .5rem;
}

.slide-content p {
  color: #d1d5db;
  /* muted gray */
  font-size: 1.1rem;
  line-height: 1.5;
}

/* Responsive breakpoints */
@media (max-width: 1024px) {
  .device-slider {
    height: 420px;
  }

  .slide-image img {
    height: 300px;
  }
}

@media (max-width: 768px) {

  /* iPad portrait / small tablets */
  .slide-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .slide-image img {
    height: 250px;
    margin: 0 auto;
  }

  .slide-content h2 {
    font-size: 1.6rem;
    margin-top: 1rem;
  }

  .slide-content p {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {

  /* phones */
  .device-slider {
    height: 460px;
  }

  .slide-image img {
    height: 200px;
  }

  .slide-content h2 {
    font-size: 1.3rem;
  }

  .slide-content p {
    font-size: .95rem;
  }
}

/* Swiper arrows */
.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6));
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: var(--brand, #0ea5b7);
}



/* Motion-friendly */
@media (prefers-reduced-motion: reduce) {
  .device-slide img {
    transition: none
  }
}

/* Responsive */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr
  }

  .split {
    grid-template-columns: 1fr
  }

  .services {
    grid-template-columns: repeat(2, 1fr)
  }

  .navlinks {
    display: none
  }

  .menu-toggle {
    display: block
  }

  .nav-open .navlinks {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1rem 0
  }
}

@media (max-width: 640px) {
  .services {
    grid-template-columns: 1fr
  }

  .cols-2,
  .cols-3 {
    grid-template-columns: 1fr
  }

  .cards-grid {
    grid-template-columns: 1fr;
  }

  .utility .right {
    display: none;
  }

  /* Collapse spacing a bit */
  .utility .row {
    padding: .4rem 0;
  }

  .left {
    gap: .5rem;
  }

  /* Hide ALL chips in left by default… */
  .utility .left .chip {
    display: none;
  }

  .utility .left .clock-chip {
    display: none;
  }

  /* …then explicitly show ONLY the address + hours */
  .utility .left .address-chip {
    display: inline-flex;
  }

  .utility .left .clock-chip {
    display: inline-flex;
  }

  /* Make address and hours sit nicely on one line when possible */
  .utility .left {
    flex-wrap: nowrap;
  }

  /* Keep address readable within narrow widths */
  .utility .left .address-chip {
    min-width: 0;
    /* allows ellipsis to kick in */
    flex: 1 1 auto;
    /* take remaining space */
  }

  .utility .left .clock-chip {
    flex: 0 0 auto;
    /* keep size, don’t shrink */
  }
}

.clock-chip {
  position: relative;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

/* Tooltip box */
.clock-chip .tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 130%;
  /* show below */
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  /* dark grey */
  color: #f8fafc;
  /* light text */
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
  font-size: 0.85rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 20;
}

/* Little arrow on top of tooltip */
.clock-chip .tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  /* arrow at top */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #1f2937 transparent;
}

/* Show tooltip on hover */
.clock-chip:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}

/* about us  */
/* ---------- ABOUT (container + heading + paragraphs) ---------- */
.about-section {
  padding: 2rem 0;
  scroll-margin-top: 96px;
  /* sticky header offset for ./about.html anchor */
}

.about-image {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card.split {
  display: grid;
  grid-template-columns: 1fr 1fr; /* image | content */
  gap: 1.5rem;
  align-items: stretch; /* 🔑 makes both columns equal height */
}

.about-image {
  margin: 0;
  border-radius: 16px;
  overflow: hidden; /* crop if needed */
  display: flex;    /* keeps img aligned inside */
}

.about-image img {
  width: 100%;
  height: 100%;
  object-fit: fill;  
  border-radius: inherit;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6),
              0 0 18px rgba(14, 165, 183, .35);
}

.about-content {
  border: 1px solid var(--line);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .02);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
}

.about-content h2 {
  color: #fff;
  text-align: center;
  /* center the title */
  margin: .5rem 0 .8rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
}

.about-content p {
  margin: .75rem 0;
  color: var(--muted);
  line-height: 1.65;
  font-size: 1.02rem;

  padding-left: .75rem;
  background: rgba(255, 255, 255, .02);
  border-radius: 6px;
}

/* ---------- COUNTERS (already responsive via grid; tweak sizes) ---------- */
.counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.counter-card {
  background: var(--card);
  border: 1px solid var(--line);

  border-radius: var(--radius);
  padding: 1.1rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .6);
}

.icon-lay {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--line), 0 0 8px rgba(14, 165, 183, .35);
}

.count-contnt h3 {
  margin: 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  display: inline-block;
}

/* .count-contnt .suffix { margin-left: .15rem; color:#fff; font-weight: 800; } */
.count-contnt h5 {
  margin: .35rem 0 0;
  color: var(--muted);
  font-weight: 600;
}

/* ---------- WHY CHOOSE US (4 items, right; image left) ---------- */
.why-us {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* image | cards on desktop */
  gap: 1.25rem;
}

.why-image {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-image img {
  width: 100%;
  max-width: 520px;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6),
    0 0 18px rgba(14, 165, 183, .35);
}

.why-grid {
  display: grid;
  gap: 1rem;
}

.why-card {
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  /* teal accent border */
  border-radius: var(--radius);
  padding: .9rem 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6);
  transition: border-color .2s ease, transform .18s ease;
}

.why-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--brand), white 15%);
}

.why-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--line), 0 0 6px rgba(14, 165, 183, .35);
}

.why-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */

/* iPad / small laptops */
@media (max-width: 1024px) {
  .about-image img {
    max-width: 480px;
  }

  .about-content p {
    font-size: 1rem;
  }

  .counter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablets (stack columns) */
@media (max-width: 900px) {
  .about-section .card.split {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

   .about-image img {
    height: auto; /* natural size on mobile */
  }

  /* image over text */
  .why-us {
    grid-template-columns: 1fr;
  }

  /* image over cards */
  .why-image img {
    max-width: 100%;
  }
}

/* Phones */
@media (max-width: 640px) {
  .about-content {
    padding: .9rem 1rem;
  }

  .about-content h2 {
    font-size: 1.3rem;
  }

  .about-content p {
    font-size: .98rem;
  }

  .icon-lay {
    width: 52px;
    height: 52px;
  }

  .count-contnt h3 {
    font-size: 1.6rem;
  }

  .counter-grid {
    grid-template-columns: 1fr;
  }

  .why-title {
    font-size: .95rem;
  }
}



/* About counters reuse card look */
.counter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.counter-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .6);
}

.icon-lay {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--brand);
}

.count-contnt h3 {
  margin: 0;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  display: inline-block;
}

/* .count-contnt .suffix { margin-left: .15rem; color:#fff; font-weight: 800; } */
.count-contnt h5 {
  margin: .35rem 0 0;
  color: var(--muted);
  font-weight: 600;
}

/* Responsive */
@media (max-width: 1024px) {
  .counter-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .counter-grid {
    grid-template-columns: 1fr;
  }

  .count-contnt h3 {
    font-size: 1.6rem;
  }
}

/* Why Choose Us */
.why-image {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-image img {
  width: 100%;
  max-width: 480px;
  border-radius: 16px;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6),
    0 0 18px rgba(14, 165, 183, .35);
  /* nice teal glow */
  object-fit: cover;
}

.why-grid {
  display: grid;
  gap: 1rem;
}

.why-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  display: flex;
  align-items: center;
  gap: .8rem;
  box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6);
}

.why-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--line),
    0 0 6px rgba(14, 165, 183, .35);
}

.why-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

/* Responsive tweaks */
@media (max-width: 900px) {
  .why-us {
    grid-template-columns: 1fr;
  }

  .why-image img {
    max-width: 100%;
    margin-bottom: 1rem;
  }
}

@media (max-width: 640px) {
  .why-title {
    font-size: .95rem;
  }
}




/* after pay */
/* ===== Partner section (uses your theme tokens) ===== */
.partner-sec {
  margin: .5rem 0rem;
  background-color: var(--brand);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);

}

.partner-sec .section-title {
  color: #fff;
  margin: .25rem 0 1rem;
  font-size: clamp(1.1rem, .9rem + 1vw, 1.4rem);

}

.sevices-title {
  text-align: center;
  color: #fff;
  margin: 0rem 0 1rem;
  font-size: 2.5rem;
  text-shadow: 2px 2px 6px rgb(120, 228, 255);

}

.partner-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .partner-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.partner-card {
  display: grid;
  place-items: center;
  gap: .4rem;
  padding: 1rem;
  text-align: center;
  background: var(--brand);
  /* border: 1px solid var(--line); */
  /* border-radius: var(--radius); */
  /* box-shadow: 0 16px 34px -28px rgba(0,0,0,.8); */
  /* transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; */
}

/* .partner-card:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--brand) 35%, var(--line));
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.9);
} */

.partner-card img {
  display: block;
  max-width: min(260px, 90%);
  height: auto;
  filter: contrast(1.05);
}

.partner-card figcaption {
  color: var(--ink);
  opacity: .9;
  font-size: .95rem;
}

/* Optional: small pill badges instead of captions */
/*
.partner-card figcaption{
  background: rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:999px;
  padding:.25rem .6rem;
}
*/

/* review */

/* ===== Single review card (theme-aware) ===== */
.review-card {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 26px 60px -40px rgba(0, 0, 0, .9);
  padding: 1rem;
  color: var(--ink);
  max-width: 375px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* .review-top{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  margin-bottom:.6rem;
  border: none;
} */
.review-top {
  display: grid;
  grid-template-columns: 1fr 1fr ;
  align-items: center;
  column-gap: 12px;
  border: none;
}

/* make .left not create an extra column */
.review-top .left {
  display: contents;
}

.review-top .stars-row {
  justify-self: start;
}

.review-top .ago {
  justify-self: center;
}

.review-top .g-badge {
  justify-self: end;
}


/* .review-top .left{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
} */
.review-top .ago {
  opacity: .85
}

.g-badge svg {
  display: block
}

/* -------- Stars built from your SVG -------- */
/* We draw the star twice: a grey background and a colored foreground clipped by --p */
.star {
  --size: 18px;
  /* star size */
  --p: 100%;
  /* fill percent (0–100). 50% => half */
  position: relative;
  width: var(--size);
  height: var(--size);
  display: inline-block;
}

.star::before,
.star::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\'><path d="M17.56 21C17.4001 21.0006 17.2423 20.9629 17.1 20.89L12 18.22L6.9 20.89C6.56214 21.0677 6.1526 21.0375 5.84443 20.8122C5.53626 20.5869 5.38323 20.2058 5.45 19.83L6.45 14.2L2.33 10.2C2.06806 9.9386 1.97189 9.55391 2.08 9.2C2.19825 8.83742 2.51242 8.57366 2.89 8.52L8.59 7.69L11.1 2.56C11.2671 2.21501 11.6167 1.99589 12 1.99589C12.3833 1.99589 12.7329 2.21501 12.9 2.56L15.44 7.68L21.14 8.51C21.5176 8.56366 21.8318 8.82742 21.95 9.19C22.0581 9.54391 21.9619 9.9286 21.7 10.19L17.58 14.19L18.58 19.82C18.6529 20.2028 18.4968 20.5931 18.18 20.82C17.9989 20.9469 17.7809 21.0102 17.56 21V21Z"/></svg>') center/contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox=\'0 0 24 24\'><path d="M17.56 21C17.4001 21.0006 17.2423 20.9629 17.1 20.89L12 18.22L6.9 20.89C6.56214 21.0677 6.1526 21.0375 5.84443 20.8122C5.53626 20.5869 5.38323 20.2058 5.45 19.83L6.45 14.2L2.33 10.2C2.06806 9.9386 1.97189 9.55391 2.08 9.2C2.19825 8.83742 2.51242 8.57366 2.89 8.52L8.59 7.69L11.1 2.56C11.2671 2.21501 11.6167 1.99589 12 1.99589C12.3833 1.99589 12.7329 2.21501 12.9 2.56L15.44 7.68L21.14 8.51C21.5176 8.56366 21.8318 8.82742 21.95 9.19C22.0581 9.54391 21.9619 9.9286 21.7 10.19L17.58 14.19L18.58 19.82C18.6529 20.2028 18.4968 20.5931 18.18 20.82C17.9989 20.9469 17.7809 21.0102 17.56 21V21Z"/></svg>') center/contain no-repeat;
}

/* grey background star */
.star::before {
  color: #e6e8e8;
  opacity: .35;
}

/* colored foreground star clipped by percentage */
.star::after {
  color: var(--accent);
  clip-path: inset(0 calc(100% - var(--p)) 0 0);
}

.stars-row {
  display: flex;
  gap: .25rem
}

/* -------- Body with multi-line clamp + ellipsis -------- */
.review-body {
  color: var(--ink);
  line-height: 1.55;
  margin: .35rem 0 .8rem;
}

.clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  /* change to 3 for 3 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* -------- Footer (avatar + name) -------- */
.review-foot {
  display: flex;
  align-items: center;
  gap: .6rem;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--brand) 60%, #0b0f19);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  border: 1px solid var(--line);
}

.name {
  color: #fff
}




/* review slider  */

.reviews-sec {
  padding: clamp(1.25rem, 2.5vw, 2rem) 0;
}

.section-title {
  color: #fff;
  margin: .25rem 0 1rem;
  font-size: 2.5rem;
  text-shadow: 2px 2px 6px rgb(120, 228, 255);
}

/* Slide shell so max-width cards center nicely */
.reviews-swiper3 .swiper-slide {
  display: flex;
  justify-content: center;
  height: auto
}

/* ===== Card ===== */
.review-card {
  --card-pad: 1rem;
  /* base padding */
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 26px 60px -40px rgba(0, 0, 0, .9);
  padding: var(--card-pad);
  color: var(--ink);
  max-width: 375px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, opacity .2s ease, padding .2s ease;
}

/* Header: stars | time | Google */
.review-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  column-gap: 0.8rem;
 
}

.review-top .stars {
  justify-self: start
}

.review-top .ago {
  justify-self: center;
  opacity: .85
}

.g-logo {
  justify-self: end;
  display: inline-block;
  vertical-align: middle
}

/* ===== One-element star bar (set --p on .review-card: 90% = 4.5★) ===== */
/* .stars{ --s:18px; position:relative; width:calc(var(--s)*5); height:var(--s) }
.stars::before, .stars::after{
  content:""; position:absolute; inset:0;
  -webkit-mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='90' height='18'>\
    <defs><path id='s' d='M9 0l2.2 5.6 5.8.4-4.4 3.7 1.4 5.7L9 12.8 3.9 15.4 5.3 9.7.9 6l5.8-.4L9 0z'/></defs>\
    <g fill='black'><use href='%23s'/><use href='%23s' x='18'/><use href='%23s' x='36'/><use href='%23s' x='54'/><use href='%23s' x='72'/></g>\
  </svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='90' height='18'>\
    <defs><path id='s' d='M9 0l2.2 5.6 5.8.4-4.4 3.7 1.4 5.7L9 12.8 3.9 15.4 5.3 9.7.9 6l5.8-.4L9 0z'/></defs>\
    <g fill='black'><use href='%23s'/><use href='%23s' x='18'/><use href='%23s' x='36'/><use href='%23s' x='54'/><use href='%23s' x='72'/></g>\
  </svg>") center/contain no-repeat;
}

.stars::before{ background: rgba(255,255,255,.22) } /* empty stars */
/* .stars::after{ background: var(--accent); width: var(--p) } filled portion */

/* Container stays the same */
.stars {
  --s: 18px;
  /* star size */
  position: relative;
  width: calc(var(--s) * 5);
  height: var(--s);
}

/* Build a cross-browser mask once (flattened 5 paths; no <use>) */
.stars {
  --mask-url: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 18'>\
<path d='M9 0l2.2 5.6 5.8.4-4.4 3.7 1.4 5.7L9 12.8 3.9 15.4 5.3 9.7.9 6l5.8-.4L9 0z'/>\
<path d='M27 0l2.2 5.6 5.8.4-4.4 3.7 1.4 5.7L27 12.8 21.9 15.4 23.3 9.7 18.9 6l5.8-.4L27 0z'/>\
<path d='M45 0l2.2 5.6 5.8.4-4.4 3.7 1.4 5.7L45 12.8 39.9 15.4 41.3 9.7 36.9 6l5.8-.4L45 0z'/>\
<path d='M63 0l2.2 5.6 5.8.4-4.4 3.7 1.4 5.7L63 12.8 57.9 15.4 59.3 9.7 54.9 6l5.8-.4L63 0z'/>\
<path d='M81 0l2.2 5.6 5.8.4-4.4 3.7 1.4 5.7L81 12.8 75.9 15.4 77.3 9.7 72.9 6l5.8-.4L81 0z'/>\
</svg>");
}

/* Shared mask props (explicit, no shorthand) */
.stars::before,
.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask-image: var(--mask-url);
  mask-image: var(--mask-url);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Grey background stars */
.stars::before {
  background: rgba(255, 255, 255, .22);
}

/* Colored foreground, cropped by percentage (set --p on the card: e.g., 90%) */
.stars::after {
  background: var(--accent);
  /* crop instead of scaling so shapes keep aspect */
  clip-path: inset(0 calc(100% - var(--p)) 0 0);
  will-change: clip-path;
}




/* Body + clamp */
.review-body {
  color: var(--ink);
  line-height: 1.55;
  margin: .35rem 0 .8rem
}

.clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden
}

/* Footer */
.review-foot {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: auto
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in oklab, var(--brand) 60%, #0b0f19);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  border: 1px solid var(--line)
}

.name {
  color: #fff
}

/* ===== Slider look & highlight ===== */
.reviews-swiper3 {
  overflow: hidden
}

/* Highlight only on desktop (where we show 3 and have a true middle slide) */
@media (min-width:1100px) {
  .reviews-swiper3 .swiper-slide-active .review-card {
    transform: scale(1.035);
    border-color: color-mix(in oklab, var(--brand) 45%, var(--line));
    box-shadow: 0 36px 80px -50px rgba(0, 0, 0, .95), 0 0 0 2px var(--ring) inset;
  }

  .reviews-swiper3 .swiper-slide-prev .review-card,
  .reviews-swiper3 .swiper-slide-next .review-card {
    transform: scale(1.015);
    opacity: .98;
  }
}


.reviews-controls {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .5rem;
  margin-top: .9rem;
}

.reviews-swiper3 .swiper-button-prev,
.reviews-swiper3 .swiper-button-next {
  --size: 36px;
  width: var(--size);
  height: var(--size);
  position: static;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  color: #fff;
}

.reviews-swiper3 .swiper-button-prev:after,
.reviews-swiper3 .swiper-button-next:after {
  font-size: 14px
}

.reviews-swiper3 .swiper-pagination {
  position: static
}

@media (min-width:700px) {
  .stars {
    --s: 20px
  }
}

@media (prefers-reduced-motion:reduce) {
  .review-card {
    transition: none
  }
}

.reviews-swiper3.is-auto .review-card {
  padding-block: calc(var(--card-pad) + .35rem);
  /* extra top/bottom */
  border-color: color-mix(in oklab, var(--brand) 50%, var(--line));
  border-width: 2px;
}

.reviews-swiper3.is-auto .swiper-slide-active .review-card {
  /* Slightly more emphasis on the active card during automation */
  box-shadow: 0 40px 90px -60px rgba(0, 0, 0, .95), 0 0 0 2px var(--brand) inset;
}

/* footer */



/* ---------- Shell ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--card)
}

/* TOP */
.site-footer__top {
  padding: clamp(28px, 4vw, 48px) 0
}

.ft-grid {
  display: grid;
  gap: clamp(14px, 2.4vw, 24px);
  grid-template-columns: 1fr;
}

@media (min-width:700px) {
  .ft-grid {
    grid-template-columns: 1.2fr 1fr 1fr 1.1fr
  }
}

.footer-card {
  background: color-mix(in oklab, var(--card) 94%, #000);
  border: 1px solid color-mix(in oklab, var(--line) 85%, transparent);
  border-radius: var(--radius);
  padding: clamp(14px, 2vw, 18px);
  color: var(--ink);
}

.footer-title {
  color: #fff;
  margin: .2rem 0 .75rem;
  font-size: clamp(1.05rem, .95rem + .35vw, 1.25rem);
}

.footer-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  margin-top: .35rem;
  background: var(--accent);
  border-radius: 2px;
}

.footer-title-sm {
  color: #fff;
  margin: .8rem 0 .4rem
}

/* About */
.footer-logo img {
  display: block;
  max-width: min(240px, 70%);
  height: auto
}

.about-text {
  margin: .6rem 0 0;
  line-height: 1.6;
  opacity: .9
}

/* Social row using your chip style */
.social-row {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .05);
  color: #fff;
  text-decoration: none;
  font-size: .9rem;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}

.chip:hover {
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  border-color: var(--accent)
}

/* Lists */
.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .45rem
}

.link-list a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color .2s ease, border-color .2s ease, padding-left .15s ease;
}

.link-list a:hover {
  color: #fff;
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  padding-left: 4px
}

/* CTA column */
.footer-cta .cta-stack {
  display: grid;
  gap: .5rem;
  margin: .25rem 0 .6rem
}

.thm-btn {
  display: inline-block;
  width: 100%;
  padding: .75rem 1rem;
  text-align: center;
  font-weight: 700;
  color: #0b0f19;
  background: var(--accent);
  border: 1px solid color-mix(in oklab, var(--accent) 70%, var(--line));
  border-radius: calc(var(--radius) - 2px);
  box-shadow: 0 8px 30px -18px rgba(0, 0, 0, .9);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

.thm-btn:hover {
  transform: translateY(-1px);
  background: color-mix(in oklab, var(--accent) 85%, #fff);
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, .9)
}

.thm-btn--ghost {
  color: #fff;
  background: transparent;
  border: 1px solid var(--line);
}

.thm-btn--ghost:hover {
  background: rgba(255, 255, 255, .06);
  border-color: var(--accent)
}

.footer-chips {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .6rem
}

/* BOTTOM */
.site-footer__bottom {
  background: color-mix(in oklab, var(--card) 96%, #000);
  border-top: 1px solid var(--line);
  padding: clamp(12px, 2.5vw, 18px) 0;
  color: var(--ink);
  font-size: clamp(.9rem, .85rem + .2vw, 1rem);
}

.bottom-grid {
  display: grid;
  gap: .6rem .75rem;
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width:700px) {
  .bottom-grid {
    grid-template-columns: 1.4fr auto
  }
}

@media (min-width:1100px) {
  .bottom-grid {
    grid-template-columns: 1.4fr 1fr auto
  }
}

.footer-address {
  margin: 0;
  font-style: normal;
  line-height: 1.6
}

.footer-address a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color .2s ease, border-color .2s ease;
}

.footer-address a:hover {
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 60%, transparent)
}

.footer-legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: .6rem .9rem;
  flex-wrap: wrap
}

.footer-legal a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color .2s ease, border-color .2s ease;
}

.footer-legal a:hover {
  color: #fff;
  border-color: color-mix(in oklab, var(--accent) 60%, transparent)
}

.copy {
  margin: 0;
  color: var(--ink);
  justify-self: end
}

@media (max-width:699.98px) {
  .copy {
    justify-self: start
  }
}

/* Focus */
.site-footer a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--ring);
  border-radius: 6px
}

#service { scroll-margin-top: 160px; }


 .wa-float {
      position: fixed;
      inset: auto 20px 20px auto;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #25D366;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
      z-index: 999;
      transition: transform .2s ease;
    }

    .wa-float:hover {
      transform: translateY(-2px) scale(1.06);
    }

    /* Pulse ring */
    .wa-pulse::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(37, 211, 102, .45);
      animation: wa-ring 2.2s ease-out infinite;
    }

    @keyframes wa-ring {
      0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, .45);
      }

      70% {
        box-shadow: 0 0 0 14px rgba(37, 211, 102, 0);
      }

      100% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
      }
    }


    @media (prefers-reduced-motion: reduce) {
      .wa-pulse::before {
        animation: none;
      }
    }

    /* Booking Section */
    .booking-container {
      width: min(1100px, 92%);
      margin: 0 auto;
      padding: 2rem 0;
    }

    .booking-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1.5rem;
      box-shadow: 0 16px 34px -24px rgba(0, 0, 0, .8);
    }

    .booking-title {
      margin: .5rem 0;
      color: #fff;
      /* text-align: center; */
    }

    .booking-subtitle {
      margin-top: -.3rem;
      color: var(--ink);
      opacity: .8;
      /* text-align: center; */
    }

    /* Form Layout */
    .booking-form {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem;
      margin-top: 1rem;
    }

    .form-field {
      display: grid;
      gap: .5rem;
      font-size: .95rem;
      color: var(--ink);
    }

    .form-span {
      grid-column: 1 / -1;
      /* span full row */
    }

    @media (max-width: 720px) {
      .booking-form {
        grid-template-columns: 1fr;
      }

      .form-span {
        grid-column: 1 / -1;
      }
    }

    /* Inputs */
    .booking-form input,
    .booking-form textarea {
      width: 100%;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.02);
      color: var(--ink);
      border-radius: calc(var(--radius) - 8px);
      padding: .75rem .85rem;
      outline: none;
      transition: border-color .15s ease, box-shadow .15s ease;
    }

    .booking-form textarea {
      resize: vertical;
      min-height: 120px;
    }

    .booking-form input:focus,
    .booking-form textarea:focus {
      border-color: var(--ring);
      box-shadow: 0 0 0 3px var(--ring);
    }

    /* Button */
    .form-actions {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
      margin-top: .5rem;
    }

    .booking-btn {
      padding: 1rem 2.5rem;
      /* taller + wider */
      min-width: 360px;
      /* ensures good width */
      font-size: 1.1rem;
      /* bigger text */
      font-weight: 700;
      border-radius: calc(var(--radius) - 6px);
      border: none;
      background: var(--accent, #f59e0b);
      color: #fff;
      cursor: pointer;
      transition: transform .06s ease, box-shadow .15s ease;
      font-size: 16px;
      line-height: 1.35;
    }

    .booking-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -14px rgba(0, 0, 0, .7);
      color: var(--brand);
    }

    .booking-btn:active {
      transform: translateY(0);
    }

    /* Toast */
    .booking-toast {
      grid-column: 1 / -1;
      margin-top: .75rem;
      padding: .7rem .9rem;
      border-radius: calc(var(--radius) - 8px);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .03);
      color: var(--ink);
      font-size: .95rem;
      display: none;
      /* shown by JS */
    }

    @media (max-width: 900px) {
  .booking-container {
    width: min(980px, 94%);
    padding: 1.5rem 0;
  }
  .booking-card {
    padding: 1.25rem;
    border-radius: calc(var(--radius) - 4px);
  }
  .booking-form { gap: .9rem; }
}

@media (max-width: 720px) {
  .booking-container { width: min(720px, 94%); }
  .booking-card { padding: 1.1rem; }
  .booking-form { gap: .85rem; }
  .form-actions { margin-top: .25rem; }
  .booking-form textarea { min-height: 110px; }
  .booking-btn {
    width: 100%;
    min-width: 0;            /* override desktop min-width */
    padding: .9rem 1.25rem;  /* slightly tighter padding */
    font-size: 1rem;
    border-radius: calc(var(--radius) - 8px);
  }
}

@media (max-width: 360px) {
  .booking-form { gap: .75rem; }
  .booking-form textarea { min-height: 96px; }
}