/* ========================
   CSS Variables
   ======================== */
:root {
  --blue-dark:    #003366;
  --blue-mid:     #0052A3;
  --blue-light:   #0066CC;
  --yellow:       #FFB90F;
  --yellow-light: #FFA500;
  --red:          #E63946;
  --green:        #25D366;
  --text-dark:    #333333;
  --text-mid:     #666666;
  --text-light:   #999999;
  --bg-white:     #FFFFFF;
  --bg-pale:      #F0F4F8;
  --bg-paler:     #F8FAFC;
  --border:       #E0E8F0;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --sp-xs:8px; --sp-sm:16px; --sp-md:24px; --sp-lg:40px; --sp-xl:60px; --sp-xxl:80px;
  --max-w:1200px; --radius:8px;
  --shadow:0 4px 20px rgba(0,51,102,0.10);
  --shadow-hover:0 8px 32px rgba(0,51,102,0.18);
  --transition:0.3s ease;
}

/* ========================
   Reset & Base
   ======================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);font-size:18px;line-height:1.75;color:var(--text-dark);background:var(--bg-white);overflow-x:hidden;}
img{max-width:100%;height:auto;display:block;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}
button{cursor:pointer;border:none;background:none;font-family:var(--font);}
.container{max-width:var(--max-w);margin:0 auto;padding:0 20px;}
.section-label{display:inline-block;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--yellow-light);margin-bottom:var(--sp-sm);}
.section-title{font-size:42px;font-weight:800;line-height:1.25;color:var(--blue-dark);margin-bottom:var(--sp-sm);}
.section-desc{font-size:19px;color:var(--text-mid);max-width:640px;line-height:1.8;}

/* ========================
   Header
   ======================== */
#header{position:fixed;top:0;left:0;right:0;z-index:1000;background:#fff;border-bottom:2px solid var(--blue-dark);box-shadow:0 2px 12px rgba(0,51,102,0.10);transition:box-shadow var(--transition);}
#header.scrolled{box-shadow:0 4px 20px rgba(0,51,102,0.15);}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:72px;}
.logo-link{display:flex;align-items:center;flex-shrink:0;}
.logo-link img{height:44px;width:auto;object-fit:contain;}
.nav-desktop{display:flex;align-items:center;gap:4px;}
.nav-desktop a{display:block;padding:8px 14px;font-size:16px;font-weight:600;color:var(--blue-dark);border-radius:6px;white-space:nowrap;transition:color var(--transition),background var(--transition);}
.nav-desktop a:hover,.nav-desktop a.active{color:var(--blue-light);background:rgba(0,102,204,0.08);}
.nav-cta{display:flex;align-items:center;flex-shrink:0;}
.btn-quote{padding:9px 22px;background:var(--yellow);color:var(--blue-dark);font-size:14px;font-weight:700;border-radius:6px;white-space:nowrap;transition:background var(--transition),transform var(--transition);}
.btn-quote:hover{background:var(--yellow-light);transform:translateY(-1px);}
#menuToggle{display:none;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;gap:5px;border-radius:6px;transition:background var(--transition);}
#menuToggle:hover{background:rgba(0,51,102,0.08);}
#menuToggle span{display:block;width:22px;height:2px;background:var(--blue-dark);border-radius:2px;transition:transform var(--transition),opacity var(--transition);}
#menuToggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#menuToggle.open span:nth-child(2){opacity:0;}
#menuToggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
#navDrawer{display:none;position:fixed;top:72px;left:0;right:0;background:var(--blue-dark);border-bottom:2px solid var(--yellow);padding:var(--sp-md) 20px;z-index:999;transform:translateY(-10px);opacity:0;transition:transform var(--transition),opacity var(--transition);}
#navDrawer.open{transform:translateY(0);opacity:1;}
#navDrawer a{display:block;padding:12px 0;font-size:16px;font-weight:600;color:rgba(255,255,255,0.85);border-bottom:1px solid rgba(255,255,255,0.08);transition:color var(--transition);}
#navDrawer a:last-child{border-bottom:none;}
#navDrawer a:hover{color:var(--yellow);}

/* ========================
   Page Banner
   ======================== */
#page-banner{position:relative;height:480px;margin-top:72px;overflow:hidden;display:flex;align-items:center;}
.page-banner-bg{position:absolute;inset:0;}
.page-banner-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;}
.page-banner-overlay{position:absolute;inset:0;background:linear-gradient(105deg,rgba(0,31,63,0.30) 0%,rgba(0,51,102,0.20) 60%,rgba(0,82,163,0.10) 100%);}
.page-banner-content{position:relative;z-index:2;}
.breadcrumb{display:flex;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,0.65);margin-bottom:var(--sp-sm);flex-wrap:wrap;}
.breadcrumb a{color:rgba(255,255,255,0.65);transition:color var(--transition);}
.breadcrumb a:hover{color:var(--yellow);}
.breadcrumb i{font-size:10px;color:rgba(255,255,255,0.4);}
.breadcrumb span{color:var(--yellow);font-weight:600;}
.page-banner-title{font-size:52px;font-weight:900;color:#fff;line-height:1.15;margin-bottom:var(--sp-sm);}
.page-banner-title span{color:var(--yellow);}
.page-banner-desc{font-size:18px;color:rgba(255,255,255,0.78);max-width:620px;}

/* ========================
   Quick Contact Bar
   ======================== */
#quick-bar{background:var(--blue-dark);border-bottom:2px solid rgba(255,185,15,0.30);}
.quick-bar-inner{display:flex;align-items:stretch;flex-wrap:wrap;}
.quick-item{display:flex;align-items:center;gap:14px;padding:20px var(--sp-lg);color:#fff;flex:1;min-width:200px;transition:background var(--transition);}
.quick-item.whatsapp:hover,.quick-item.email:hover{background:rgba(255,255,255,0.06);}
.quick-item > i{font-size:26px;flex-shrink:0;}
.quick-item.whatsapp > i{color:var(--green);}
.quick-item.email > i{color:var(--yellow);}
.quick-item.hours > i{color:rgba(255,255,255,0.60);}
.quick-item.response > i{color:var(--yellow);}
.quick-label{display:block;font-size:12px;font-weight:700;color:rgba(255,255,255,0.55);text-transform:uppercase;letter-spacing:0.8px;margin-bottom:2px;}
.quick-value{display:block;font-size:15px;font-weight:700;color:#fff;}
.quick-divider{width:1px;background:rgba(255,255,255,0.10);align-self:stretch;}

/* ========================
   Main Contact Section
   ======================== */
#contact-main{padding:var(--sp-xl) 0;background:var(--bg-pale);}
.contact-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--sp-xl);align-items:start;}
.contact-intro{font-size:17px;color:var(--text-mid);line-height:1.8;margin-bottom:var(--sp-lg);}

/* Contact Method Cards */
.contact-methods{display:flex;flex-direction:column;gap:var(--sp-sm);margin-bottom:var(--sp-lg);}
.method-card{display:flex;align-items:center;gap:var(--sp-md);padding:var(--sp-md);background:var(--bg-white);border-radius:var(--radius);box-shadow:var(--shadow);border-left:4px solid transparent;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition);}
.method-card:hover{box-shadow:var(--shadow-hover);transform:translateX(4px);}
.method-card.method-wa{border-left-color:var(--green);}
.method-card.method-email{border-left-color:var(--blue-light);}
.method-card.method-address{border-left-color:var(--yellow);}
.method-card.method-hours{border-left-color:var(--text-light);}
.method-icon{width:46px;height:46px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.method-card.method-wa .method-icon{background:rgba(37,211,102,0.12);color:var(--green);}
.method-card.method-email .method-icon{background:rgba(0,102,204,0.10);color:var(--blue-light);}
.method-card.method-address .method-icon{background:rgba(255,185,15,0.12);color:var(--yellow-light);}
.method-card.method-hours .method-icon{background:var(--bg-pale);color:var(--text-mid);}
.method-body{flex:1;min-width:0;}
.method-name{display:block;font-size:13px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px;}
.method-value{display:block;font-size:15px;font-weight:700;color:var(--blue-dark);margin-bottom:2px;word-break:break-all;}
.method-note{display:block;font-size:13px;color:var(--text-mid);}
.method-ext{color:var(--text-light);font-size:13px;flex-shrink:0;}

/* Social */
.contact-social{display:flex;align-items:center;gap:var(--sp-xs);margin-bottom:var(--sp-md);}
.social-label{font-size:14px;font-weight:700;color:var(--text-mid);margin-right:4px;}
.social-btn{width:36px;height:36px;background:rgba(0,51,102,0.10);border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--blue-dark);font-size:15px;transition:background var(--transition),color var(--transition);}
.social-btn:hover{background:var(--blue-dark);color:var(--yellow);}

/* Trust chips */
.contact-trust{display:flex;gap:10px;flex-wrap:wrap;}
.trust-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--bg-white);border:1px solid var(--border);border-radius:20px;font-size:13px;font-weight:600;color:var(--text-mid);}
.trust-chip i{color:var(--blue-light);font-size:12px;}

/* ========================
   Contact Form Card
   ======================== */
.form-card{background:var(--bg-white);border-radius:12px;box-shadow:var(--shadow-hover);overflow:hidden;}
.form-header{background:var(--blue-dark);padding:var(--sp-lg) var(--sp-lg) var(--sp-md);}
.form-title{font-size:22px;font-weight:800;color:#fff;margin-bottom:6px;display:flex;align-items:center;gap:10px;}
.form-title i{color:var(--yellow);}
.form-subtitle{font-size:15px;color:rgba(255,255,255,0.70);line-height:1.6;}

form{padding:var(--sp-lg);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-md);margin-bottom:var(--sp-md);}
.form-group{display:flex;flex-direction:column;gap:6px;}
.form-group-full{margin-bottom:var(--sp-md);}

label{font-size:14px;font-weight:700;color:var(--text-dark);}
.req{color:var(--red);}
.opt{font-size:13px;font-weight:400;color:var(--text-light);}

.input-wrap{position:relative;display:flex;align-items:center;}
.input-wrap > i:first-child{position:absolute;left:14px;color:var(--text-light);font-size:15px;pointer-events:none;z-index:1;}
.input-wrap input,
.input-wrap select,
.input-wrap textarea{width:100%;padding:12px 14px 12px 42px;border:2px solid var(--border);border-radius:var(--radius);font-size:15px;font-family:var(--font);color:var(--text-dark);background:#fff;outline:none;transition:border-color var(--transition),box-shadow var(--transition);}
.input-wrap input:focus,
.input-wrap select:focus,
.input-wrap textarea:focus{border-color:var(--blue-light);box-shadow:0 0 0 3px rgba(0,102,204,0.10);}
.input-wrap input.invalid,
.input-wrap select.invalid,
.input-wrap textarea.invalid{border-color:var(--red);}
.input-wrap textarea{resize:vertical;min-height:140px;padding-top:14px;}
.textarea-wrap > i:first-child{top:14px;align-self:flex-start;}

.select-wrap{position:relative;}
.select-wrap select{appearance:none;padding-right:36px;cursor:pointer;}
.select-arrow{position:absolute;right:14px;color:var(--text-light);font-size:12px;pointer-events:none;}

.char-count{text-align:right;font-size:12px;color:var(--text-light);margin-top:4px;}
.field-error{font-size:13px;color:var(--red);font-weight:600;min-height:18px;}

/* Model chips */
.model-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;}
.model-chip-label{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;background:var(--bg-pale);border:2px solid var(--border);border-radius:20px;font-size:13px;font-weight:700;color:var(--text-mid);cursor:pointer;transition:all var(--transition);}
.model-chip-label:hover{border-color:var(--blue-dark);color:var(--blue-dark);}
.model-chip-label input[type="checkbox"]{width:0;height:0;opacity:0;position:absolute;}
.model-chip-label:has(input:checked){background:var(--blue-dark);border-color:var(--blue-dark);color:#fff;}

/* Submit row */
.form-submit-row{display:flex;flex-direction:column;gap:var(--sp-sm);align-items:flex-start;}
.btn-submit{display:inline-flex;align-items:center;gap:10px;padding:14px 36px;background:var(--yellow);color:var(--blue-dark);font-size:16px;font-weight:800;border-radius:var(--radius);border:none;cursor:pointer;transition:background var(--transition),transform var(--transition),box-shadow var(--transition);}
.btn-submit:hover{background:var(--yellow-light);transform:translateY(-2px);box-shadow:0 6px 20px rgba(255,185,15,0.40);}
.btn-submit:disabled{opacity:0.7;cursor:not-allowed;transform:none;}
.btn-text,.btn-loading{display:inline-flex;align-items:center;gap:8px;}
.form-privacy{font-size:13px;color:var(--text-light);display:flex;align-items:center;gap:6px;}
.form-privacy i{color:var(--text-light);}

/* Success state */
#formSuccess{padding:var(--sp-xl) var(--sp-lg);text-align:center;}
.success-icon{font-size:64px;color:#25D366;margin-bottom:var(--sp-md);}
.success-title{font-size:26px;font-weight:800;color:var(--blue-dark);margin-bottom:var(--sp-sm);}
.success-desc{font-size:16px;color:var(--text-mid);line-height:1.75;margin-bottom:var(--sp-sm);}
.success-desc a{color:var(--green);font-weight:700;}
.btn-new-msg{margin-top:var(--sp-md);display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:var(--blue-dark);color:#fff;font-size:15px;font-weight:700;border-radius:var(--radius);transition:background var(--transition);}
.btn-new-msg:hover{background:var(--blue-light);}

/* ========================
   Map Section
   ======================== */
#map-section{padding:var(--sp-xl) 0;background:var(--bg-pale);}
.map-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-xl);margin-bottom:var(--sp-lg);flex-wrap:wrap;}
.map-header-text{flex:1;min-width:280px;}
.map-header-text .section-title{margin-bottom:var(--sp-sm);}
.map-header-text p{font-size:17px;color:var(--text-mid);line-height:1.8;margin-bottom:var(--sp-md);}
.map-details{display:flex;flex-direction:column;gap:10px;}
.map-details li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--text-mid);}
.map-details li i{color:var(--blue-light);width:16px;flex-shrink:0;margin-top:3px;}
.map-actions{display:flex;flex-direction:column;gap:var(--sp-sm);flex-shrink:0;}
.btn-directions{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--blue-dark);color:#fff;font-size:15px;font-weight:700;border-radius:var(--radius);transition:background var(--transition),transform var(--transition);white-space:nowrap;}
.btn-directions:hover{background:var(--blue-light);transform:translateY(-2px);}
.btn-visit{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:transparent;color:var(--blue-dark);font-size:15px;font-weight:700;border:2px solid var(--blue-dark);border-radius:var(--radius);transition:all var(--transition);white-space:nowrap;}
.btn-visit:hover{background:var(--blue-dark);color:#fff;transform:translateY(-2px);}
.map-embed{position:relative;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-hover);}
.map-embed iframe{width:100%;height:420px;display:block;border:none;}
.map-pin-card{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:10px;padding:10px 16px;background:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.15);}
.map-pin-card img{height:28px;width:auto;}
.map-pin-card strong{display:block;font-size:13px;font-weight:800;color:var(--blue-dark);}
.map-pin-card span{display:block;font-size:12px;color:var(--text-mid);}

/* ========================
   FAQ Callout
   ======================== */
#faq-callout{padding:var(--sp-lg) 0;background:var(--bg-white);border-top:1px solid var(--border);}
.faq-callout-inner{display:flex;align-items:center;gap:var(--sp-lg);background:linear-gradient(135deg,#e8f1ff 0%,#f0f4f8 100%);border:1px solid var(--border);border-radius:12px;padding:var(--sp-lg);flex-wrap:wrap;}
.faq-callout-icon{font-size:40px;color:var(--blue-dark);flex-shrink:0;}
.faq-callout-text{flex:1;min-width:220px;}
.faq-callout-text h3{font-size:20px;font-weight:800;color:var(--blue-dark);margin-bottom:6px;}
.faq-callout-text p{font-size:15px;color:var(--text-mid);line-height:1.65;}
.btn-faq{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;background:var(--blue-dark);color:#fff;font-size:15px;font-weight:700;border-radius:var(--radius);white-space:nowrap;transition:background var(--transition),transform var(--transition);}
.btn-faq:hover{background:var(--blue-light);transform:translateY(-2px);}

/* ========================
   Footer
   ======================== */
#footer{background:linear-gradient(135deg,#e3f2fd 0%,#bbdefb 50%,#90caf9 100%);padding:var(--sp-xl) 0 var(--sp-md);}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-xl);padding-bottom:var(--sp-xl);border-bottom:1px solid rgba(0,51,102,0.15);}
.footer-brand img{height:40px;width:auto;margin-bottom:var(--sp-md);}
.footer-brand p{font-size:14px;font-weight:700;color:#000;line-height:1.75;margin-bottom:var(--sp-md);}
.footer-social{display:flex;gap:var(--sp-xs);}
.footer-col h4{font-size:14px;font-weight:700;color:#000;margin-bottom:var(--sp-md);letter-spacing:0.5px;}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col ul li a{font-size:14px;font-weight:700;color:#000;display:flex;align-items:center;gap:6px;transition:color var(--transition);}
.footer-col ul li a:hover{color:var(--blue-light);}
.footer-col ul li a i{font-size:12px;width:14px;color:var(--blue-light);}
.footer-contact li{display:flex;gap:10px;font-size:14px;font-weight:700;color:#000;line-height:1.6;margin-bottom:12px;}
.footer-contact li i{color:var(--blue-light);margin-top:3px;flex-shrink:0;width:14px;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:var(--sp-md);flex-wrap:wrap;gap:var(--sp-sm);}
.footer-bottom p{font-size:13px;font-weight:700;color:#000;}
.footer-bottom a{color:#000;font-weight:700;transition:color var(--transition);}
.footer-bottom a:hover{color:var(--blue-dark);}

/* Scroll Top */
#scrollTop{position:fixed;bottom:28px;right:28px;width:44px;height:44px;background:var(--yellow);color:var(--blue-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 4px 16px rgba(0,0,0,0.2);cursor:pointer;z-index:500;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity var(--transition),transform var(--transition),background var(--transition);}
#scrollTop.visible{opacity:1;transform:translateY(0);pointer-events:all;}
#scrollTop:hover{background:var(--yellow-light);}

/* Reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity 0.6s ease,transform 0.6s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}

/* ========================
   Reach Us Cards (Email & Address)
   ======================== */
#reach-us{padding:var(--sp-xl) 0 0;background:var(--bg-pale);}
.reach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-md);}
.reach-card{display:flex;align-items:center;gap:var(--sp-md);padding:var(--sp-lg) var(--sp-md);background:var(--bg-white);border-radius:12px;box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform var(--transition),box-shadow var(--transition);}
.reach-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hover);}
.reach-card::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;border-radius:4px 0 0 4px;}
.reach-email::before{background:linear-gradient(180deg,var(--yellow),var(--yellow-light));}
.reach-address::before{background:linear-gradient(180deg,var(--blue-light),var(--blue-dark));}
.reach-icon-wrap{position:relative;flex-shrink:0;}
.reach-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:26px;position:relative;z-index:1;}
.reach-email .reach-icon{background:linear-gradient(135deg,#fff8e1,#ffecb3);color:var(--yellow-light);}
.reach-address .reach-icon{background:linear-gradient(135deg,#e3f2fd,#bbdefb);color:var(--blue-light);}
.reach-pulse{position:absolute;inset:-6px;border-radius:20px;opacity:0;z-index:0;}
.reach-email .reach-pulse{background:rgba(255,185,15,0.12);}
.reach-address .reach-pulse{background:rgba(0,102,204,0.10);}
.reach-card:hover .reach-pulse{opacity:1;animation:reachPulse 1.5s ease infinite;}
@keyframes reachPulse{0%,100%{transform:scale(1);opacity:0.6;}50%{transform:scale(1.15);opacity:0;}}
.reach-body{flex:1;min-width:0;}
.reach-body h3{font-size:18px;font-weight:800;color:var(--blue-dark);margin-bottom:4px;}
.reach-value{display:block;font-size:15px;font-weight:700;color:var(--text-dark);margin-bottom:8px;word-break:break-word;}
.reach-body p{font-size:14px;color:var(--text-mid);line-height:1.6;margin:0;}
.reach-arrow{width:42px;height:42px;border-radius:50%;background:var(--bg-pale);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--blue-dark);flex-shrink:0;transition:background var(--transition),color var(--transition),transform var(--transition);}
.reach-card:hover .reach-arrow{background:var(--blue-dark);color:#fff;transform:translateX(4px);}

/* ========================
   Testimonials (2 cards per row)
   ======================== */
#testimonials{padding:var(--sp-xl) 0;background:var(--bg-white);}
.testimonial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-md);}
.testimonial-card{background:var(--bg-pale);border-radius:var(--radius);padding:var(--sp-lg) var(--sp-md);position:relative;border-top:3px solid var(--yellow);transition:transform var(--transition),box-shadow var(--transition);}
.testimonial-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);}
.testimonial-quote{font-size:32px;color:var(--yellow);margin-bottom:var(--sp-sm);line-height:1;}
.testimonial-text{font-size:16px;color:var(--text-mid);line-height:1.8;margin-bottom:var(--sp-md);font-style:italic;}
.testimonial-author{display:flex;align-items:center;gap:14px;margin-bottom:var(--sp-sm);}
.testimonial-avatar{width:48px;height:48px;background:linear-gradient(135deg,var(--blue-dark),var(--blue-light));border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:20px;flex-shrink:0;}
.testimonial-name{display:block;font-size:16px;font-weight:800;color:var(--blue-dark);}
.testimonial-role{display:block;font-size:13px;color:var(--text-light);font-weight:600;}
.testimonial-meta{display:flex;gap:var(--sp-sm);flex-wrap:wrap;padding-top:var(--sp-sm);border-top:1px solid var(--border);}
.testimonial-meta span{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--text-mid);}
.testimonial-meta span i{color:var(--blue-light);font-size:12px;}

/* ========================
   Responsive — Tablet ≤1024px
   ======================== */
@media(max-width:1024px){
  .section-title{font-size:36px;}
  .page-banner-title{font-size:40px;}
  .contact-layout{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-lg);}
  .nav-desktop{display:none;}
  .nav-cta{display:none;}
  #menuToggle{display:flex;}
  #navDrawer{display:block;}
  .map-header{flex-direction:column;align-items:flex-start;}
  .map-actions{flex-direction:row;}
  .quick-item{min-width:160px;}
}

/* ========================
   Responsive — Mobile ≤640px
   ======================== */
@media(max-width:640px){
  .container{padding:0 16px;}
  body{font-size:17px;}
  .section-title{font-size:28px;}
  #page-banner{height:320px;}
  .page-banner-title{font-size:28px;}
  .page-banner-desc{font-size:15px;}
  .quick-bar-inner{flex-direction:column;}
  .quick-divider{width:100%;height:1px;align-self:auto;}
  .quick-item{padding:14px var(--sp-md);}
  .form-row{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;gap:var(--sp-lg);}
  .footer-bottom{flex-direction:column;text-align:center;}
  .map-embed iframe{height:280px;}
  .map-pin-card{display:none;}
  .map-actions{flex-direction:column;}
  .faq-callout-inner{flex-direction:column;text-align:center;}
  .testimonial-grid{grid-template-columns:1fr;}
  .reach-grid{grid-template-columns:1fr;}
  .reach-card{flex-direction:column;text-align:center;}
  .reach-arrow{align-self:center;}
  .model-chips{gap:6px;}
  .btn-submit{width:100%;justify-content:center;}
}


/* ========================
   HH Series Hydraulic Pile Hammer Page Styles
   ======================== */

/* Intro Section Layout */
.intro-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-xl);
  align-items: center;
}

.intro-image {
  height: 450px;
  border-radius: 12px;
  overflow: hidden;
}

/* Gallery Grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-md);
}

.gallery-item {
  position: relative;
  height: 280px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}

.gallery-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.gallery-large {
  grid-column: span 2;
  grid-row: span 2;
  height: auto;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,51,102,0.95), transparent);
  padding: var(--sp-md);
  transform: translateY(100%);
  transition: transform var(--transition);
}

.gallery-item:hover .gallery-overlay {
  transform: translateY(0);
}

.gallery-overlay h3 {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}

.gallery-overlay p {
  color: rgba(255,255,255,0.85);
  font-size: 14px;
  margin: 0;
}

/* Advantages Grid */
.advantages-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
  max-width: 1000px;
  margin: 0 auto;
}

.advantage-card {
  display: flex;
  gap: var(--sp-lg);
  align-items: flex-start;
  padding: var(--sp-lg);
  background: var(--bg-white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.advantage-card:hover {
  transform: translateX(8px);
  box-shadow: var(--shadow-hover);
}

.advantage-card-right {
  flex-direction: row-reverse;
}

.advantage-card-right:hover {
  transform: translateX(-8px);
}

.advantage-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--blue-dark), var(--blue-light));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(0,51,102,0.25);
}

.advantage-content {
  flex: 1;
}

.advantage-content h3 {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue-dark);
  margin-bottom: var(--sp-sm);
}

.advantage-content p {
  font-size: 16px;
  color: var(--text-mid);
  line-height: 1.8;
  margin: 0;
}

.advantage-content ul {
  list-style: none;
  padding: 0;
}

.advantage-content ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.advantage-content ul li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 800;
  font-size: 16px;
}

/* Applications Grid */
.applications-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-md);
}

.application-card {
  position: relative;
  padding: var(--sp-lg);
  background: var(--bg-white);
  border-radius: 12px;
  box-shadow: var(--shadow);
  transition: transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
}

.application-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

.application-number {
  position: absolute;
  top: -20px;
  right: 20px;
  font-size: 120px;
  font-weight: 900;
  color: rgba(0,102,204,0.05);
  line-height: 1;
  pointer-events: none;
}

.application-icon-bg {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #fff8e1, #ffecb3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--yellow-light);
  margin-bottom: var(--sp-md);
  position: relative;
  z-index: 1;
}

.application-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue-dark);
  margin-bottom: var(--sp-sm);
  position: relative;
  z-index: 1;
}

.application-card p {
  font-size: 15px;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* Product Table Styles */
#products-section {
  padding: var(--sp-xl) 0;
  background: var(--bg-pale);
}

.products-intro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--sp-xl);
}

.products-intro .section-label {
  display: inline-block;
}

.products-intro .section-title {
  margin-bottom: var(--sp-sm);
}

.products-intro p {
  font-size: 17px;
  color: var(--text-mid);
  line-height: 1.8;
}

.table-container {
  background: var(--bg-white);
  border-radius: 12px;
  box-shadow: var(--shadow-hover);
  overflow: hidden;
  margin-bottom: var(--sp-lg);
}

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table.product-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1200px;
}

table.product-table th,
table.product-table td {
  padding: 14px 12px;
  text-align: center;
  border: 1px solid var(--border);
  font-size: 14px;
}

/* Header row */
table.product-table thead tr {
  background: var(--blue-dark);
}

table.product-table thead th {
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

table.product-table thead th:first-child {
  text-align: left;
  padding-left: 20px;
  background: var(--blue-dark);
}

table.product-table thead th:nth-child(2) {
  background: var(--yellow);
  color: var(--blue-dark);
  font-weight: 800;
}

/* Model numbers row */
table.product-table tbody tr:first-child {
  background: linear-gradient(135deg, #fff8e1, #ffecb3);
}

table.product-table tbody tr:first-child td {
  color: var(--blue-dark);
  font-weight: 800;
  font-size: 15px;
  border-bottom: 2px solid var(--yellow);
}

/* Data rows */
table.product-table tbody tr {
  background: var(--bg-white);
  transition: background var(--transition);
}

table.product-table tbody tr:nth-child(even) {
  background: var(--bg-paler);
}

table.product-table tbody tr:hover {
  background: rgba(0, 102, 204, 0.05);
}

table.product-table tbody td:first-child {
  text-align: left;
  padding-left: 20px;
  font-weight: 700;
  color: var(--blue-dark);
  background: var(--bg-pale);
}

table.product-table tbody td:nth-child(2) {
  font-weight: 700;
  color: var(--text-mid);
  background: rgba(255, 185, 15, 0.08);
}

table.product-table tbody td {
  color: var(--text-dark);
  font-weight: 600;
}

/* Merged cell styling */
table.product-table tbody td[colspan] {
  font-style: italic;
  color: var(--text-mid);
  background: rgba(0, 102, 204, 0.05);
}

/* Note section */
.table-note {
  padding: var(--sp-md);
  background: rgba(255, 185, 15, 0.08);
  border-left: 4px solid var(--yellow);
  border-radius: 0 0 12px 12px;
  font-size: 13px;
  color: var(--text-mid);
  line-height: 1.6;
}

.table-note i {
  color: var(--yellow-light);
  margin-right: 6px;
}

/* Features section */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-md);
  margin-top: var(--sp-xl);
}

.feature-card {
  background: var(--bg-white);
  padding: var(--sp-lg);
  border-radius: 12px;
  box-shadow: var(--shadow);
  border-top: 3px solid var(--yellow);
  transition: transform var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.feature-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #fff8e1, #ffecb3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--yellow-light);
  margin-bottom: var(--sp-sm);
}

.feature-card h3 {
  font-size: 18px;
  font-weight: 800;
  color: var(--blue-dark);
  margin-bottom: var(--sp-xs);
}

.feature-card p {
  font-size: 14px;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0;
}

/* ========================
   HH Series Responsive Styles
   ======================== */
@media(max-width: 640px) {
  .intro-layout {
    grid-template-columns: 1fr;
  }
  
  .intro-image {
    height: 280px;
  }
  
  .gallery-grid {
    grid-template-columns: 1fr;
  }
  
  .gallery-large {
    grid-column: span 1;
    grid-row: span 1;
  }
  
  .gallery-item {
    height: 240px;
  }
  
  .advantage-card,
  .advantage-card-right {
    flex-direction: column;
    text-align: center;
  }
  
  .advantage-card:hover,
  .advantage-card-right:hover {
    transform: translateY(-8px);
  }
  
  .advantage-icon {
    margin: 0 auto;
  }
  
  .applications-grid {
    grid-template-columns: 1fr;
  }
  
  .table-container {
    border-radius: 8px;
  }
  
  table.product-table th,
  table.product-table td {
    padding: 10px 8px;
    font-size: 12px;
  }
  
  table.product-table thead th:first-child,
  table.product-table tbody td:first-child {
    padding-left: 12px;
  }
}

@media(max-width: 1024px) {
  .intro-layout {
    grid-template-columns: 1fr;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .gallery-large {
    grid-column: span 2;
    grid-row: span 1;
    height: 280px;
  }
  
  .applications-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}