:root{
  color-scheme: light;
  --ink:#0F1B33;
  --ink-2:#0A1424;
  --paper:#F3F6FC;
  --paper-2:#E7EEF8;
  --steel:#54637C;
  --line:#DCE4F0;
  --blue:#2563EB;
  --blue-dark:#1544B5;
  --sky:#0EA5E9;
  --sky-light:#E6F5FC;
  --white:#FFFFFF;
  --radius:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --display: "Sora", sans-serif;
  --body: "Inter", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --accent: var(--blue);
  --shadow-sm: 0 6px 18px rgba(15,27,51,0.06);
  --shadow-md: 0 16px 34px rgba(15,27,51,0.10);
  --shadow-lg: 0 30px 60px rgba(10,20,36,0.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-0.01em;
  margin:0;
  color:var(--ink);
}
.eyebrow{
  font-family:var(--mono);
  font-size:0.72rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--blue-dark);
  font-weight:600;
}
.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
section{padding:88px 0;}
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--body);
  font-size:0.92rem;
  font-weight:600;
  letter-spacing:0.01em;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn-primary{background:linear-gradient(135deg,var(--blue),var(--blue-dark)); color:var(--white); box-shadow:0 10px 24px rgba(37,99,235,0.35);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,99,235,0.45);}
.btn-outline{background:transparent; color:var(--white); border-color:rgba(255,255,255,0.4);}
.btn-outline:hover{border-color:var(--white); transform:translateY(-2px);}
.btn-dark{background:var(--ink); color:var(--white);}
.btn-dark:hover{background:var(--ink-2); transform:translateY(-2px);}

/* ============ HEADER / NAV ============ */
/* ============ TOP BAR ============ */
.topbar{
  background:var(--ink-2);
  color:var(--white);
  font-family:var(--body);
  font-size:0.8rem;
}
.topbar-inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px 20px;
  padding:9px 24px;
}
.location-badge{
  display:flex; align-items:center; gap:8px;
  color:#AEC0DC;
  white-space:nowrap;
}
.location-badge i{color:var(--sky);}
.topbar-contact{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 20px;
}
.topbar-contact a{
  color:var(--white);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.topbar-contact a:hover{color:var(--sky);}
.topbar-contact a i{color:var(--sky);}
.social-icons{display:flex; align-items:center; gap:10px;}
.social-icons a{
  width:26px; height:26px; border-radius:50%;
  background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  color:var(--white); font-size:0.75rem;
  transition:background .15s ease;
}
.social-icons a:hover{background:var(--blue); color:var(--white);}
@media (max-width:640px){
  .topbar-inner{justify-content:center; text-align:center;}
  .topbar-contact{justify-content:center;}
}

header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px;
  max-width:1180px;
  margin:0 auto;
}
.logo{
  display:flex; align-items:center; gap:10px;
  color:var(--ink);
  font-family:var(--display);
  font-weight:700;
  font-size:1.3rem;
  text-decoration:none;
  letter-spacing:-0.01em;
}
.logo .mark{
  width:38px;height:38px;
  background:linear-gradient(135deg,var(--blue),var(--sky));
  border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);
  font-size:0.95rem;
  font-weight:800;
  color:var(--white);
  flex:none;
  box-shadow:0 8px 18px rgba(37,99,235,0.35);
}
.logo .logo-text{
  display:flex; flex-direction:column; line-height:1.05;
}
.logo .logo-main{
  font-size:1.12rem; font-weight:700; color:var(--ink);
}
.logo .logo-sub{
  font-family:var(--mono); font-size:0.6rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--blue);
  margin-top:2px;
}
@media (max-width:480px){
  .logo .logo-sub{display:none;}
}
nav ul{
  list-style:none; display:flex; gap:4px; margin:0; padding:0;
  align-items:center;
}
nav > ul > li{position:relative;}
nav a{
  color:var(--ink);
  text-decoration:none;
  font-size:0.92rem;
  font-weight:500;
  padding:10px 14px;
  display:flex; align-items:center; gap:6px;
  border-radius:var(--radius-pill);
  transition:background .15s ease, color .15s ease;
  white-space:nowrap;
}
nav > ul > li > a:hover, nav > ul > li.open > a, nav > ul > li > a.active{background:var(--sky-light); color:var(--blue-dark);}
.call-btn{
  background:linear-gradient(135deg,var(--blue),var(--blue-dark)) !important;
  color:var(--white) !important;
  font-weight:600;
  font-size:0.86rem;
  box-shadow:0 8px 18px rgba(37,99,235,0.3);
}
.call-btn:hover{background:var(--blue-dark) !important;}
.submenu{
  position:absolute; top:100%; left:0;
  background:var(--white);
  min-width:240px;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md);
  padding:8px;
  display:none;
  border-top:3px solid var(--blue);
  margin-top:6px;
}
li.dropdown:hover .submenu, li.dropdown.open .submenu{display:block;}
.submenu a{
  color:var(--ink);
  padding:10px 12px;
  font-size:0.88rem;
  border-radius:8px;
}
.submenu a:hover{background:var(--sky-light); color:var(--blue-dark);}
.submenu a.active{background:var(--sky-light); color:var(--blue-dark); font-weight:700;}
.menu-toggle{
  display:none; background:none; border:none; color:var(--ink);
  font-size:1.5rem; cursor:pointer;
}

@media (max-width:920px){
  .menu-toggle{display:block;}
  nav{
    position:absolute; top:100%; left:0; right:0;
    background:var(--white);
    display:none;
    border-top:1px solid var(--line);
    box-shadow:var(--shadow-md);
  }
  nav.open{display:block;}
  nav > ul{flex-direction:column; align-items:stretch; padding:10px 24px 20px;}
  .submenu{position:static; box-shadow:none; display:none; margin:4px 0 4px 14px; border-top:none; border-left:2px solid var(--blue);}
  li.dropdown.open .submenu{display:block;}
}

/* ============ BREADCRUMB ============ */
.breadcrumb{
  background:var(--ink-2); color:#8FA0B8; font-family:var(--body); font-size:0.8rem;
  padding:14px 0; letter-spacing:0.01em;
}
.breadcrumb a{color:#AEC0DC; text-decoration:none;}
.breadcrumb a:hover{color:var(--white); text-decoration:underline;}
.breadcrumb span.sep{margin:0 8px; color:#4C5C71;}

/* ============ HERO (home) ============ */
.hero{
  background:
    radial-gradient(circle at 85% 10%, rgba(14,165,233,0.35), transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(37,99,235,0.28), transparent 50%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  color:var(--white);
  padding:100px 0 116px;
  position:relative;
  overflow:hidden;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(circle at 75% 30%, black, transparent 65%);
  pointer-events:none;
}
.hero-grid{
  display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:center;
  position:relative; z-index:1;
}
.ticket-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--body); font-size:0.82rem; font-weight:600; letter-spacing:0.02em;
  color:var(--white); background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.2);
  padding:8px 16px; border-radius:var(--radius-pill); margin-bottom:26px;
}
.ticket-tag .dot{width:8px;height:8px;border-radius:50%;background:#3FD98A;flex:none;}
.hero h1{
  color:var(--white);
  font-size:clamp(2.6rem, 5.2vw, 4.2rem);
  line-height:1.06;
  margin-bottom:22px;
}
.hero h1 span{background:linear-gradient(135deg,#5EB6FF,var(--sky)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p.lead{
  font-size:1.12rem; color:#C3D0E4; max-width:520px; margin-bottom:34px;
}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px;}
.hero-stats{
  display:flex; gap:0; border-top:1px solid rgba(255,255,255,0.16); padding-top:24px;
}
.hero-stats div{flex:1; padding-right:20px;}
.hero-stats strong{
  display:block; font-family:var(--display); font-size:1.8rem; color:var(--white);
}
.hero-stats span{font-size:0.8rem; color:#8FA0BE; font-family:var(--body); letter-spacing:0.01em;}

/* ============ PAGE HERO (subpages) ============ */
.page-hero{
  background:
    radial-gradient(circle at 88% 0%, rgba(14,165,233,0.3), transparent 50%),
    linear-gradient(180deg,var(--ink) 0%, var(--ink-2) 100%);
  color:var(--white);
  padding:64px 0 70px;
  position:relative;
  overflow:hidden;
}
.page-hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(circle at 80% 20%, black, transparent 60%);
  pointer-events:none;
}
.page-hero .inner{position:relative; z-index:1; max-width:760px;}
.page-hero h1{color:var(--white); font-size:clamp(2.2rem,4vw,3.2rem); margin:12px 0 16px;}
.page-hero p{color:#C3D0E4; font-size:1.05rem; max-width:600px;}
.page-hero .hero-cta{margin-top:28px;}

.page-hero-grid{
  display:grid; grid-template-columns:1.2fr 0.8fr; gap:40px; align-items:center;
  position:relative; z-index:1;
}
.page-hero-grid .inner{max-width:none;}
.page-hero-img{
  border-radius:20px; overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:var(--shadow-lg);
  background:linear-gradient(160deg,#16274A,#0E1A30);
}
.page-hero-img img{width:100%; height:auto; display:block;}
@media (max-width:860px){
  .page-hero-grid{grid-template-columns:1fr;}
  .page-hero-img{max-width:360px; margin:0 auto;}
}

/* Signature info card (was industrial nameplate) */
.plate{
  background:linear-gradient(160deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius);
  padding:28px 26px;
  position:relative;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(6px);
}
.plate::before{content:none;}
.rivet{display:none;}
.plate-head{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:var(--body); color:var(--white); margin-bottom:18px;
  border-bottom:1px solid rgba(255,255,255,0.15); padding-bottom:14px;
}
.plate-head .id{font-family:var(--mono); font-size:0.72rem; color:var(--sky); letter-spacing:0.06em;}
.plate-row{
  display:flex; justify-content:space-between; gap:10px;
  font-size:0.86rem; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.08);
  color:#C3D0E4;
}
.plate-row:last-child{border-bottom:none;}
.plate-row b{color:var(--white); font-weight:600; text-align:right;}

/* ============ SECTION HEADS ============ */
.section-head{max-width:640px; margin-bottom:52px;}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem); margin:10px 0 14px;}
.section-head p{color:var(--steel); font-size:1.02rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* ============ SERVICES (icon cards) ============ */
.bg-paper{background:var(--paper);}
.svc-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:22px;
}
.svc-grid.cols-4{grid-template-columns:repeat(4,1fr);}
.svc-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0;
  overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  display:flex; flex-direction:column;
}
.svc-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent;}
.svc-top{
  background:linear-gradient(160deg,#F0F6FF,#E4EEFC);
  color:var(--ink);
  padding:26px 22px 20px;
  position:relative;
}
.svc-top .icon{
  width:46px; height:46px; border-radius:13px;
  background:linear-gradient(135deg,var(--blue),var(--sky));
  color:var(--white);
  font-size:1.35rem; margin-bottom:14px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 20px rgba(37,99,235,0.28);
}
.svc-top h3{color:var(--ink); font-size:1.25rem;}
.svc-code{
  position:absolute; top:20px; right:20px;
  font-family:var(--mono); font-size:0.68rem; color:var(--blue);
  letter-spacing:0.06em;
}
.svc-body{padding:20px 22px 24px; flex:1; display:flex; flex-direction:column;}
.svc-body p{color:var(--steel); font-size:0.92rem; margin:0 0 16px;}
.svc-fields{margin:0 0 18px; padding:0; list-style:none;}
.svc-fields li{
  font-size:0.84rem; color:var(--ink);
  display:flex; justify-content:space-between; gap:8px;
  padding:7px 0; border-bottom:1px dotted var(--line);
}
.svc-fields li span:first-child{color:var(--steel);}
.svc-link{
  margin-top:auto;
  font-size:0.88rem; font-weight:600;
  color:var(--blue-dark); text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
}
.svc-link:hover{text-decoration:underline;}

@media (max-width:920px){ .svc-grid, .svc-grid.cols-4{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .svc-grid, .svc-grid.cols-4{grid-template-columns:1fr;} .hero-grid{grid-template-columns:1fr;} }

/* ============ BRANDS ============ */
.bg-white{background:var(--white);}
.brand-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:14px;
}
.brand-chip{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:18px 10px; text-align:center; font-size:0.86rem;
  font-weight:600; color:var(--ink);
  transition:border-color .15s ease, transform .15s ease, color .15s ease;
}
.brand-chip:hover{border-color:var(--blue); transform:translateY(-3px); color:var(--blue-dark);}
@media (max-width:820px){ .brand-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:480px){ .brand-grid{grid-template-columns:repeat(2,1fr);} }

/* ============ ON-SITE PROCESS ============ */
.bg-ink{background:var(--ink); color:var(--white);}
.bg-ink .section-head h2{color:var(--white);}
.bg-ink .section-head p{color:#AEC0DC;}
.bg-ink .eyebrow{color:var(--sky);}
.process{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
}
.process .step{
  padding:26px 22px; border:1px solid rgba(255,255,255,0.14); border-radius:var(--radius);
  background:rgba(255,255,255,0.04);
  position:relative;
  transition:transform .15s ease, background .15s ease;
}
.process .step:hover{transform:translateY(-4px); background:rgba(255,255,255,0.07);}
.process .step .tag{
  font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--sky);
  letter-spacing:0; margin-bottom:12px; display:block;
}
.process .step h4{color:var(--white); font-size:1.1rem; margin-bottom:8px;}
.process .step p{color:#AAB6C6; font-size:0.88rem; margin:0;}
@media (max-width:820px){
  .process{grid-template-columns:1fr 1fr;}
}
@media (max-width:540px){ .process{grid-template-columns:1fr;} }

/* ============ AREAS SERVED ============ */
.bg-teal{background:var(--sky-light);}
.area-chip-wrap{display:flex; flex-wrap:wrap; gap:10px;}
.area-chip{
  font-size:0.86rem; color:var(--blue-dark); font-weight:500;
  background:var(--white); border:1px solid rgba(37,99,235,0.22);
  padding:9px 16px; border-radius:var(--radius-pill);
}
.area-chip.link{text-decoration:none; cursor:pointer;}
.area-chip.link:hover{background:var(--blue); color:var(--white); border-color:var(--blue);}

/* ============ ABOUT ============ */
.about-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start;}
.about-grid .plate{
  background:linear-gradient(160deg,#F0F6FF,#E4EEFC);
  border:1px solid var(--line);
  color:var(--ink);
  box-shadow:var(--shadow-sm);
  backdrop-filter:none;
}
.about-grid .plate-head{border-bottom-color:var(--line); color:var(--ink);}
.about-grid .plate-head .id{color:var(--blue);}
.about-grid .plate-row{border-bottom-color:rgba(15,27,51,0.08); color:var(--steel);}
.about-grid .plate-row b{color:var(--ink);}
.about-copy p{color:var(--steel); font-size:1.02rem; margin-bottom:18px;}
.value-list{list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.value-list li{
  font-size:0.92rem; color:var(--ink); padding-left:24px; position:relative;
}
.value-list li::before{
  content:"✓"; position:absolute; left:0; top:0; width:16px; height:16px;
  color:var(--white); background:var(--blue); border-radius:50%;
  font-size:0.6rem; line-height:16px; text-align:center;
}
@media (max-width:860px){ .about-grid{grid-template-columns:1fr;} .value-list{grid-template-columns:1fr;} }

/* ============ TIMELINE (about page) ============ */
.timeline{list-style:none; margin:0; padding:0; border-left:2px solid var(--line); margin-left:8px;}
.timeline li{position:relative; padding:0 0 30px 30px;}
.timeline li::before{
  content:""; position:absolute; left:-7px; top:2px; width:12px; height:12px; border-radius:50%;
  background:var(--blue); border:3px solid var(--paper);
}
.timeline .yr{font-family:var(--mono); font-size:0.75rem; color:var(--blue-dark); display:block; margin-bottom:4px;}
.timeline h4{font-size:1.05rem; margin-bottom:6px;}
.timeline p{color:var(--steel); font-size:0.92rem; margin:0;}

/* ============ FAQ ============ */
.faq-item{
  border-bottom:1px solid var(--line);
  padding:22px 0;
}
.faq-item h4{font-size:1.05rem; margin-bottom:8px; font-family:var(--body); font-weight:700;}
.faq-item p{color:var(--steel); font-size:0.94rem; margin:0;}

/* ============ CONTACT ============ */
.bg-contact{
  background:linear-gradient(180deg,var(--ink-2),var(--ink));
  color:var(--white);
}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.bg-contact .section-head h2{color:var(--white);}
.bg-contact .section-head p{color:#AEC0DC;}
.contact-list{list-style:none; margin:0 0 30px; padding:0;}
.contact-list li{
  display:flex; gap:14px; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.12);
}
.contact-list .k{
  font-family:var(--mono); font-size:0.72rem; color:var(--sky); letter-spacing:0.06em;
  width:110px; flex:none; padding-top:2px; text-transform:uppercase;
}
.contact-list .v{font-size:0.96rem; color:var(--white);}
.contact-list .v a{color:var(--white); text-decoration:underline; text-decoration-color:rgba(255,255,255,0.35);}
form{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); border-radius:var(--radius); padding:26px;}
form label{font-size:0.78rem; letter-spacing:0.02em; color:#9FADC0; text-transform:uppercase; display:block; margin-bottom:6px; font-weight:600;}
form .row{margin-bottom:18px;}
form input, form select, form textarea{
  width:100%; padding:12px 14px; background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.2); border-radius:var(--radius-sm); color:var(--white);
  font-family:var(--body); font-size:0.94rem;
}
form input:focus, form select:focus, form textarea:focus{outline:2px solid var(--blue); outline-offset:1px;}
form input::placeholder, form textarea::placeholder{color:#7E8CA0;}
form select option{color:var(--ink); background:var(--white);}
form button{width:100%; justify-content:center; margin-top:6px;}

/* Map / office block on contact page */
.office-block{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:14px;}
.office-card{background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.15); border-radius:var(--radius-sm); padding:18px 20px;}
.office-card .tag{font-family:var(--mono); font-size:0.7rem; color:var(--sky); letter-spacing:0.06em; text-transform:uppercase; display:block; margin-bottom:8px;}
.office-card p{margin:0; font-size:0.88rem; color:#C3D0E4;}
@media (max-width:820px){ .office-block{grid-template-columns:1fr;} }

/* ============ FOOTER ============ */
footer{background:var(--ink-2); color:#9FADC0; padding:56px 0 26px; font-size:0.88rem;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; margin-bottom:36px;}
footer h5{color:var(--white); font-family:var(--body); font-weight:700; font-size:0.86rem; letter-spacing:0.01em; margin-bottom:14px;}
footer ul{list-style:none; margin:0; padding:0;}
footer li{margin-bottom:9px;}
footer a{color:#9FADC0; text-decoration:none;}
footer a:hover{color:var(--sky);}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.12); padding-top:20px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
@media (max-width:820px){ .footer-grid{grid-template-columns:1fr 1fr;} .contact-grid{grid-template-columns:1fr;} }

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

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;}
}

/* ============ FLOATING CALL + WHATSAPP BUTTONS ============ */
.call-float,
.wa-float{
  position:fixed; right:22px; z-index:200;
  width:56px; height:56px; border-radius:50%;
  color:var(--white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; text-decoration:none;
  box-shadow:0 10px 24px rgba(0,0,0,0.25);
  transition:transform .15s ease;
}
.call-float{
  bottom:90px;
  background:linear-gradient(135deg,var(--blue),var(--blue-dark));
  animation:pulse-call 2.4s infinite;
}
.wa-float{
  bottom:22px;
  background:#25D366;
}
.call-float:hover,
.wa-float:hover{transform:scale(1.08);}

@keyframes pulse-call{
  0%{box-shadow:0 10px 24px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,99,235,0.55);}
  70%{box-shadow:0 10px 24px rgba(0,0,0,0.25), 0 0 0 14px rgba(37,99,235,0);}
  100%{box-shadow:0 10px 24px rgba(0,0,0,0.25), 0 0 0 0 rgba(37,99,235,0);}
}

@media (max-width:480px){
  .call-float,.wa-float{width:50px; height:50px; font-size:1.25rem; right:16px;}
  .call-float{bottom:80px;}
  .wa-float{bottom:16px;}
}

/* ============ TRUST BADGES ============ */
.badge-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.badge-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 20px; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.badge-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm);}
.badge-icon{
  width:44px; height:44px; margin:0 auto 14px; border-radius:12px;
  background:var(--sky-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
}
.badge-card h4{font-size:1rem; margin-bottom:8px;}
.badge-card p{color:var(--steel); font-size:0.85rem; margin:0;}
@media (max-width:820px){ .badge-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .badge-grid{grid-template-columns:1fr;} }

/* ============ RELATED SERVICES ============ */
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.related-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px 20px; text-decoration:none; display:block;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.related-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
.related-icon{
  width:40px; height:40px; border-radius:11px; margin-bottom:12px;
  background:var(--sky-light); color:var(--blue);
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
}
.related-card h4{font-size:1rem; margin-bottom:6px; color:var(--ink);}
.related-card p{color:var(--steel); font-size:0.86rem; margin:0;}
@media (max-width:820px){ .related-grid{grid-template-columns:1fr;} }

/* ============ AREA BY AREA (LOCALITY CARDS) ============ */
.locale-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:16px;}
.locale-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:20px 18px;
  transition:border-color .15s ease, transform .15s ease;
}
.locale-card:hover{border-color:var(--blue); transform:translateY(-3px);}
.locale-tag{
  font-family:var(--mono); font-size:0.66rem; color:var(--sky);
  letter-spacing:0.08em; text-transform:uppercase; display:block; margin-bottom:8px;
}
.locale-card h3{font-size:1rem; margin-bottom:8px;}
.locale-card p{color:var(--steel); font-size:0.84rem; margin:0;}
.locale-note{
  text-align:center; margin-top:26px; color:var(--steel); font-size:0.9rem;
}
.locale-note a{color:var(--blue-dark); font-weight:600; text-decoration:none;}
.locale-note a:hover{text-decoration:underline;}
@media (max-width:1024px){ .locale-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:700px){ .locale-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .locale-grid{grid-template-columns:1fr;} }

/* ============ TESTIMONIALS ============ */
.quote-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.quote-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px;
  position:relative;
}
.quote-card::before{
  content:"“"; position:absolute; top:12px; right:20px; font-family:var(--display);
  font-size:2.4rem; color:var(--sky-light); font-weight:700; line-height:1;
}
.quote-card p{font-size:0.94rem; color:var(--ink); margin:0 0 14px; position:relative; z-index:1;}
.quote-card .who{font-size:0.82rem; color:var(--steel); font-weight:600;}
@media (max-width:820px){ .quote-grid{grid-template-columns:1fr;} }

/* ============ MAP EMBED ============ */
.map-wrap{border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,0.15); margin-top:24px;}
.map-wrap iframe{width:100%; height:280px; border:0; display:block;}

/* ============ BRAND SERVICE CENTER CARDS ============ */
.center-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.center-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 20px 24px; position:relative;
  transition:transform .15s ease, box-shadow .15s ease;
}
.center-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-sm);}
.center-card .center-tag{
  font-family:var(--mono); font-size:0.66rem; color:var(--blue);
  letter-spacing:0.06em; text-transform:uppercase; display:block; margin-bottom:8px;
}
.center-card h3{font-size:1.02rem; margin-bottom:8px; line-height:1.25;}
.center-card p{color:var(--steel); font-size:0.86rem; margin:0 0 14px;}
.center-card a{
  font-size:0.88rem; font-weight:600;
  color:var(--blue-dark); text-decoration:none;
}
.center-card a:hover{text-decoration:underline;}
@media (max-width:920px){ .center-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .center-grid{grid-template-columns:1fr;} }

/* ============ NAMED SERVICES GRID ============ */
.named-svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.named-svc-card{
  background:linear-gradient(160deg,#16274A,#0E1A30); color:var(--white);
  border-radius:var(--radius); padding:24px 20px;
  border:1px solid rgba(255,255,255,0.1);
  transition:transform .15s ease;
}
.named-svc-card:hover{transform:translateY(-4px);}
.named-svc-card .num{
  font-family:var(--display); font-weight:700; font-size:1.1rem; color:var(--sky);
  letter-spacing:0; display:block; margin-bottom:10px;
}
.named-svc-card h4{color:var(--white); font-size:1rem; margin-bottom:8px;}
.named-svc-card p{color:#AAB6C6; font-size:0.84rem; margin:0;}
@media (max-width:920px){ .named-svc-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .named-svc-grid{grid-template-columns:1fr;} }

/* ============ AMC BANNER ============ */
.amc-banner{
  background:linear-gradient(135deg,var(--blue),#0B3FA8);
  border-radius:var(--radius); padding:36px 38px; color:var(--white);
  display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap;
  box-shadow:0 20px 40px rgba(37,99,235,0.25);
}
.amc-banner h3{color:var(--white); font-size:1.4rem; margin-bottom:8px;}
.amc-banner p{color:#DCE9FF; margin:0; max-width:480px; font-size:0.92rem;}
.amc-banner .btn{background:var(--white); color:var(--blue-dark);}
.amc-banner .btn:hover{background:#EEF4FF;}

/* ============ IMAGE STRIP GALLERY ============ */
.img-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.img-strip-item{
  background:linear-gradient(160deg,#16274A,#0E1A30); border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); text-decoration:none; display:block;
  transition:transform .15s ease, box-shadow .15s ease;
}
.img-strip-item:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.img-strip-item img{width:100%; height:auto; display:block;}
.img-strip-item span{
  display:block; padding:12px 14px; font-size:0.86rem;
  font-weight:600; color:var(--ink); background:var(--white);
}
@media (max-width:820px){ .img-strip{grid-template-columns:1fr 1fr;} }
@media (max-width:480px){ .img-strip{grid-template-columns:1fr;} }

/* ============ REPAIR PHOTO SHOWCASE ============ */
.repair-showcase{max-width:480px; margin:0 auto;}
.repair-showcase .img-strip-item span{text-align:center;}
.repair-caption{max-width:640px; margin:0 auto 32px; text-align:center; color:var(--steel); font-size:0.98rem;}