*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1a2744;
  --gold:#c8922a;
  --gold-light:#e4a831;
  --white:#fff;
  --light:#f7f8fa;
  --text:#2a2a2a;
  --muted:#666;
  --border:#e2e2e2;
}
body{font-family:'Open Sans',sans-serif;color:var(--text);font-size:15.5px}
a{text-decoration:none;color:inherit}
img{display:block;width:100%}

/* ─── TOP BAR ─── */
.topbar{background:var(--navy);color:#bbb;font-size:12.5px;padding:8px 0}
.topbar-inner{max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tb-left{display:flex;gap:24px;align-items:center}
.tb-left span{display:flex;align-items:center;gap:6px}
.tb-left i{color:var(--gold);font-size:11px}
.tb-right{display:flex;align-items:center;gap:10px}
.tb-right span{font-size:12.5px;color:#bbb}
.tb-right a{width:26px;height:26px;border-radius:50%;border:1px solid #444;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:12px;transition:.2s}
.tb-right a:hover{background:var(--gold);border-color:var(--gold);color:#fff}

/* ─── NAVBAR ─── */
nav{background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.08);position:sticky;top:0;z-index:999}
.nav-inner{max-width:1240px;margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;height:76px}

/* Logo */
.logo{display:flex;align-items:center;gap:12px}
.logo-emblem{width:68px;height:68px;border-radius:50%;background:var(--navy);border:3px solid var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;overflow:hidden}
.logo-emblem svg{width:44px;height:44px}
.logo-words{display:flex;flex-direction:column;line-height:1}
.logo-name{font-family:'Merriweather',serif;font-size:20px;font-weight:900;letter-spacing:.5px;line-height:1.15}
.logo-name .t1{color:var(--navy)}
.logo-name .t2{color:var(--gold)}
.logo-tag{font-size:8.5px;letter-spacing:1.8px;text-transform:uppercase;color:#888;margin-top:4px}

/* Nav links */
.nav-links{display:flex;align-items:center;gap:2px}
.nav-links>a,.nav-links>.drop>a{padding:8px 13px;font-size:15px;font-weight:600;color:var(--navy);border-bottom:2px solid transparent;transition:.2s;display:block}
.nav-links>a:hover,.nav-links>a.active,.nav-links>.drop>a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.drop{position:relative}
.drop>a::after{content:' ▾';font-size:9px}
.dropdown{display:none;position:absolute;top:100%;left:0;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);min-width:180px;border-top:2px solid var(--gold);z-index:999}
.drop:hover .dropdown{display:block}
.dropdown a{display:block;padding:11px 18px;font-size:14px;border-bottom:1px solid #f2f2f2;color:var(--text)}
.dropdown a:hover{background:#fef9f2;color:var(--gold)}

.btn-quote{background:var(--navy);color:#fff;padding:11px 22px;border-radius:4px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;transition:.2s;white-space:nowrap}
.btn-quote:hover{background:var(--gold)}
.nav-links>a.btn-quote-mobile{display:none}

/* Mobile nav toggle + backdrop */
.nav-toggle{display:none;background:none;border:none;color:var(--navy);font-size:22px;cursor:pointer;padding:8px;line-height:1;flex-shrink:0}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(10,18,40,.55);z-index:997}
.nav-backdrop.open{display:block}

/* ─── HERO ─── */
.hero{position:relative;overflow:hidden;min-height:500px;display:flex;align-items:center;background:#fff}
/* image fills the whole hero — anchored so ship/truck/plane stay on the right */
.hero-bg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;z-index:0;display:block}
/* text column sits entirely within the natural white zone (~left 35%) — no overlay needed */
.hero-left{position:relative;z-index:2;width:36%;min-width:300px;padding:72px 0 72px 60px;display:flex;flex-direction:column;justify-content:center}
.hero-left h1{font-family:'Merriweather',serif;font-size:38px;line-height:1.15;font-weight:900;color:var(--navy);text-transform:uppercase;letter-spacing:-.3px;white-space:nowrap}
.hero-left h1 .gold{color:var(--gold)}
.hero-divider{width:52px;height:3px;background:var(--gold);margin:18px 0}
.hero-left p{font-size:15px;color:#444;line-height:1.8;max-width:340px;margin-bottom:28px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap}
.btn-primary{background:var(--navy);color:#fff;padding:12px 22px;border-radius:4px;font-size:14.5px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:.2s}
.btn-primary:hover{background:var(--gold)}
.btn-outline{border:2px solid var(--navy);color:var(--navy);padding:10px 22px;border-radius:4px;font-size:14.5px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:.2s}
.btn-outline:hover{background:var(--navy);color:#fff}
.hero-right{display:none}
.hero-img-wrap{display:none}

/* ─── FEATURES ─── */
.features-wrap{padding:0 40px}
.features{background:#fff;box-shadow:0 4px 24px rgba(0,0,0,.08);border-radius:8px;margin-top:-2px}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.feat{padding:28px 22px;display:flex;gap:16px;align-items:flex-start;border-right:1px solid var(--border)}
.feat:last-child{border-right:none}
.feat-icon{width:64px;height:64px;flex-shrink:0;border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:30px}
.feat-body h4{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:6px}
.feat-body p{font-size:14px;color:var(--muted);line-height:1.65}

/* ─── GENERIC SECTION ─── */
section{padding:48px 0}
.container{max-width:1240px;margin:0 auto;padding:0 40px}
.sec-label{text-align:center;font-size:13px;font-weight:700;letter-spacing:3px;color:var(--gold);text-transform:uppercase;margin-bottom:10px}
.sec-title{text-align:center;font-family:'Merriweather',serif;font-size:32px;font-weight:900;color:var(--navy);margin-bottom:10px}
.sec-divider{width:50px;height:3px;background:var(--gold);margin:0 auto 32px}

/* ─── PRODUCTS SLIDER ─── */
.products-slider{position:relative;margin-bottom:28px}
.products-track-wrap{overflow:hidden}
.products-track{display:flex;gap:24px;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.products-track .pcard{flex:0 0 calc(25% - 18px)}
.slider-arrow{position:absolute;top:50%;translate:0 -50%;width:46px;height:46px;border-radius:50%;background:#fff;border:1px solid var(--border);box-shadow:0 4px 16px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;color:var(--navy);font-size:15px;cursor:pointer;transition:.2s;z-index:3}
.slider-arrow:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.slider-arrow.prev{left:-23px}
.slider-arrow.next{right:-23px}
.slider-arrow[disabled]{opacity:.35;cursor:default;pointer-events:none}
.slider-dots{display:flex;justify-content:center;gap:8px;margin-top:26px}
.slider-dots button{width:8px;height:8px;border-radius:50%;background:var(--border);border:none;padding:0;cursor:pointer;transition:.2s}
.slider-dots button.active{background:var(--gold);width:22px;border-radius:5px}
.products-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:40px}
.pcard{border:1px solid var(--border);border-radius:6px;overflow:hidden;background:#fff;transition:box-shadow .2s}
.pcard:hover{box-shadow:0 8px 28px rgba(0,0,0,.1)}
.pcard-img{height:196px;overflow:hidden;background:#f0e8d0}
.pcard-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.pcard:hover .pcard-img img{transform:scale(1.05)}
/* spice color placeholders */
.spice-1{background:linear-gradient(135deg,#8b5e1a,#c4922a,#7a4f10)}
.spice-2{background:linear-gradient(135deg,#c4500a,#e8730a,#a03c06)}
.spice-3{background:linear-gradient(135deg,#7a8a2a,#b0b84a,#5a6a18)}
.spice-4{background:linear-gradient(135deg,#9a7a1a,#c8a02a,#7a5e10)}
.spice-5{background:linear-gradient(135deg,#8a1616,#c4260c,#5e0e0e)}
.spice-6{background:linear-gradient(135deg,#a3220f,#e0451a,#7a1608)}
.spice-7{background:linear-gradient(135deg,#c9a15a,#e8c98a,#9c7a3a)}
.spice-8{background:linear-gradient(135deg,#b8925a,#d6b478,#8a6838)}
.pcard-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pcard-img-placeholder i{font-size:48px;color:rgba(255,255,255,.5)}
.pcard-info{padding:18px 16px}
.pcard-info h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:6px}
.pcard-info p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:12px}
.pcard-info a{font-size:14px;font-weight:700;color:var(--navy);display:inline-flex;align-items:center;gap:6px;transition:.2s}
.pcard-info a:hover{color:var(--gold)}
.center{text-align:center}
.btn-dark{background:var(--navy);color:#fff;padding:13px 36px;border-radius:4px;font-size:15px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:.2s}
.btn-dark:hover{background:var(--gold)}

/* ─── PROCESS ─── */
.process-sec{background:var(--light)}
.steps{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;position:relative}
.steps::before{content:'';position:absolute;top:35px;left:calc(100%/14);right:calc(100%/14);height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0,var(--gold) 8px,transparent 8px,transparent 18px);z-index:0}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;z-index:1;position:relative}
.step-circle{width:90px;height:90px;border-radius:50%;border:2px solid var(--navy);background:#fff;display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--navy);margin-bottom:14px;position:relative}
.step-n{position:absolute;top:-8px;left:-2px;background:var(--gold);color:#fff;width:22px;height:22px;border-radius:50%;font-size:9.5px;font-weight:700;display:flex;align-items:center;justify-content:center}
.step h4{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:5px}
.step p{font-size:14px;color:var(--muted);line-height:1.55}

/* ─── CTA BANNER ─── */
.cta{background:linear-gradient(135deg,#0c1b38 0%,#1a2744 60%,#0a1628 100%);padding:36px 0;position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;left:-80px;top:-80px;width:350px;height:350px;background:radial-gradient(circle,rgba(200,146,42,.18) 0%,transparent 65%)}
.cta::after{content:'';position:absolute;right:-40px;bottom:-40px;width:250px;height:250px;background:radial-gradient(circle,rgba(74,107,168,.2) 0%,transparent 65%)}
/* globe decoration */
.cta-globe{position:absolute;left:0;top:0;bottom:0;width:340px;opacity:.15;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 200'%3E%3Ccircle cx='80' cy='100' r='70' fill='none' stroke='%234a6ba8' stroke-width='1.5'/%3E%3Ccircle cx='80' cy='100' r='50' fill='none' stroke='%234a6ba8' stroke-width='1'/%3E%3Cline x1='10' y1='100' x2='150' y2='100' stroke='%234a6ba8' stroke-width='1'/%3E%3Cline x1='80' y1='30' x2='80' y2='170' stroke='%234a6ba8' stroke-width='1'/%3E%3C/svg%3E") no-repeat center/contain}
.cta-inner{max-width:1240px;margin:0 auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:2}
.cta-text h2{font-family:'Merriweather',serif;font-size:24px;color:#fff;margin-bottom:6px}
.cta-text p{font-size:15px;color:#99aacc}
.btn-gold{background:var(--gold);color:#fff;padding:14px 32px;border-radius:4px;font-size:15px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;transition:.2s;flex-shrink:0}
.btn-gold:hover{background:var(--gold-light)}

/* ─── FOOTER ─── */
footer{background:var(--navy);color:#aaa;padding:44px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr 1.5fr;gap:40px;padding-bottom:44px}
.fb-desc{font-size:14px;color:#999;line-height:1.75;margin:16px 0 18px}
.fsocial{display:flex;gap:10px}
.fsocial a{width:32px;height:32px;border-radius:50%;border:1px solid #3a4d6a;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:12px;transition:.2s}
.fsocial a:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.fc h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:18px}
.fc ul{list-style:none}
.fc ul li{margin-bottom:10px}
.fc ul li a{font-size:14px;color:#999;transition:.2s}
.fc ul li a:hover{color:var(--gold)}
.fc-contact li{display:flex;align-items:flex-start;gap:10px;margin-bottom:13px;font-size:14px;color:#999}
.fc-contact li i{color:var(--gold);margin-top:2px;flex-shrink:0;width:14px}
.fc-enq p{font-size:14px;color:#999;line-height:1.7;margin-bottom:14px}
.btn-outline-light{border:1.5px solid #4a5e7a;color:#ccc;padding:10px 22px;border-radius:4px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:.2s}
.btn-outline-light:hover{border-color:var(--gold);color:var(--gold)}
.footer-bottom{border-top:1px solid #263352;text-align:center;padding:18px 0;font-size:12.5px;color:#555}

/* footer logo white */
.flogo .logo-name .t1{color:#fff}

@media(max-width:960px){
  .hero-left{width:100%;min-width:unset;padding:50px 28px;background:rgba(255,255,255,0.88)}
  .hero-left h1{font-size:26px;white-space:normal}
  .features-grid{grid-template-columns:1fr 1fr}
  .feat:nth-child(2){border-right:none}
  .products-grid{grid-template-columns:1fr 1fr}
  .products-track .pcard{flex:0 0 calc(50% - 12px)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .steps::before{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
  .features-wrap{padding:0 16px}
}

/* ─── RESPONSIVE: TOPBAR / NAV (TABLET & MOBILE) ─── */
@media(max-width:1260px){
  .nav-toggle{display:flex;align-items:center;justify-content:center}
  .nav-inner>.btn-quote{display:none}

  .nav-links{
    position:fixed;top:0;right:-320px;bottom:0;width:min(84vw,320px);
    background:#fff;flex-direction:column;align-items:stretch;gap:0;
    padding:88px 26px 30px;overflow-y:auto;z-index:998;
    box-shadow:-10px 0 36px rgba(0,0,0,.2);
    transition:right .32s cubic-bezier(.4,0,.2,1);
  }
  .nav-links.open{right:0}
  .nav-links>a,.nav-links>.drop>a{padding:14px 4px;border-bottom:1px solid #f0f0f0;font-size:15.5px;width:100%}
  .nav-links>a:hover,.nav-links>a.active,.nav-links>.drop>a:hover{border-bottom-color:#f0f0f0}
  .drop{width:100%}
  .drop>a::after{float:right}
  .dropdown{position:static;box-shadow:none;border-top:none;min-width:unset;display:block;background:#fafafa;border-radius:6px;margin-bottom:6px}
  .dropdown a{padding:11px 14px;font-size:13.5px}
  .nav-links>a.btn-quote-mobile{display:flex;justify-content:center;margin-top:18px}
}

@media(max-width:900px){
  .topbar .tb-left span:nth-child(3){display:none}
}
@media(max-width:680px){
  .topbar .tb-left span:nth-child(2){display:none}
  .tb-right span{display:none}
}
@media(max-width:520px){
  .topbar{display:none}
}
@media(max-width:600px){
  .nav-inner{height:64px}
  .logo img{height:52px !important}
  .logo-tag{display:none}
  .logo-name{font-size:16px}
}

/* ─── SPA PAGE SWITCHING ─── */
.page{display:none}
.page.active{display:block !important}
.page-banner{background:linear-gradient(120deg,#0c1b38 0%,#1a2744 100%);padding:48px 0 44px;position:relative;overflow:hidden}
.page-banner::after{content:'';position:absolute;right:-60px;bottom:-60px;width:280px;height:280px;background:radial-gradient(circle,rgba(200,146,42,.15) 0%,transparent 65%)}
.page-banner-inner{max-width:1240px;margin:0 auto;padding:0 40px;position:relative;z-index:1}
.page-breadcrumb{font-size:12px;color:#99aacc;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.page-breadcrumb a{color:#99aacc;cursor:pointer;transition:.2s}
.page-breadcrumb a:hover{color:var(--gold)}
.page-breadcrumb i{font-size:9px}
.page-banner h1{font-family:'Merriweather',serif;font-size:34px;font-weight:900;color:#fff;margin-bottom:8px}
.page-banner p{font-size:15px;color:#99aacc;max-width:560px;line-height:1.7}

/* ─── ABOUT US ─── */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.about-left{}

.about-story-label{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.about-story-title{font-family:'Merriweather',serif;font-size:26px;font-weight:900;color:var(--navy);line-height:1.25;margin-bottom:18px}
.about-story-text{font-size:15px;color:#555;line-height:1.85;margin-bottom:14px}
.about-mv{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.about-mv-card{background:var(--light);border-left:3px solid var(--gold);padding:20px 18px;border-radius:0 6px 6px 0}
.about-mv-card h4{font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.about-mv-card h4 i{color:var(--gold);font-size:14px}
.about-mv-card p{font-size:14px;color:#666;line-height:1.7}
.about-right{}
.about-hero-img{width:100%;border-radius:12px;overflow:hidden;margin-bottom:48px;box-shadow:0 8px 32px rgba(0,0,0,.12);height:220px}
.about-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.quality-hero-img{width:100%;border-radius:12px;overflow:hidden;margin-bottom:48px;box-shadow:0 8px 32px rgba(0,0,0,.12);}
.quality-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.about-values-title{font-size:11px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.about-values-heading{font-family:'Merriweather',serif;font-size:20px;font-weight:900;color:var(--navy);margin-bottom:24px}
.about-value-item{display:flex;align-items:center;gap:16px;padding:16px 20px;background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:12px;transition:box-shadow .2s,border-color .2s}
.about-value-item:hover{box-shadow:0 4px 18px rgba(0,0,0,.07);border-color:var(--gold)}
.about-value-num{width:38px;height:38px;background:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:13px;font-weight:700;flex-shrink:0}
.about-value-body h5{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:3px}
.about-value-body p{font-size:13.5px;color:#777}
.about-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--navy);border-radius:10px;overflow:hidden;margin-top:28px}
.astat{padding:24px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.astat:last-child{border-right:none}
.astat-num{font-family:'Merriweather',serif;font-size:26px;font-weight:900;color:var(--gold);margin-bottom:4px}
.astat-label{font-size:12px;color:#99aacc;letter-spacing:.5px}

/* ─── QUALITY ─── */
.quality-sec{background:var(--light)}
.quality-intro{text-align:center;font-size:14.5px;color:#555;line-height:1.8;max-width:700px;margin:0 auto 52px}
.quality-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:48px}
.qcard{background:#fff;border-radius:10px;padding:28px 26px;border:1px solid var(--border);display:flex;gap:20px;align-items:flex-start;transition:box-shadow .2s,border-color .2s}
.qcard:hover{box-shadow:0 6px 28px rgba(0,0,0,.08);border-color:var(--gold)}
.qcard-icon{width:52px;height:52px;background:var(--navy);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:20px;flex-shrink:0}
.qcard-body h4{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:7px}
.qcard-body p{font-size:14px;color:#666;line-height:1.7}
.quality-focus{background:var(--navy);border-radius:12px;padding:40px 44px;display:flex;gap:40px;align-items:center}
.qfocus-icon{width:72px;height:72px;border:2px solid var(--gold);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:28px;flex-shrink:0}
.qfocus-text h3{font-family:'Merriweather',serif;font-size:20px;color:#fff;margin-bottom:10px}
.qfocus-text p{font-size:13.5px;color:#99aacc;line-height:1.8}

/* ─── WHY US ─── */
.quality-hero-img{width:100%;border-radius:12px;overflow:hidden;margin-bottom:48px;box-shadow:0 8px 32px rgba(0,0,0,.12);height:220px}
.quality-hero-img img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.why-hero-img{width:100%;border-radius:12px;overflow:hidden;margin-bottom:48px;box-shadow:0 8px 32px rgba(0,0,0,.12);}
.why-hero-img img{width:100%;display:block;object-fit:cover;}
.why-hero-quote{background:linear-gradient(120deg,#0c1b38,#1a2744);border-radius:10px;padding:32px 36px;margin-bottom:48px;position:relative;overflow:hidden}
.why-hero-quote::before{content:'\201C';position:absolute;top:-10px;left:16px;font-size:120px;color:rgba(200,146,42,.15);font-family:Georgia,serif;line-height:1}
.why-hero-quote p{font-family:'Merriweather',serif;font-size:18px;color:#fff;font-style:italic;line-height:1.6;position:relative;z-index:1;max-width:680px}
.why-hero-quote span{display:block;font-size:12px;color:var(--gold);margin-top:12px;font-style:normal;font-weight:600;letter-spacing:.5px}
.why-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.wcard{background:#fff;border:1px solid var(--border);border-radius:10px;padding:28px 24px;transition:box-shadow .2s,border-color .2s,transform .2s}
.wcard:hover{box-shadow:0 8px 32px rgba(0,0,0,.1);border-color:var(--gold);transform:translateY(-3px)}
.wcard-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.wcard-icon{width:48px;height:48px;background:var(--navy);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:19px;flex-shrink:0}
.wcard-top h4{font-size:15.5px;font-weight:700;color:var(--navy);line-height:1.3}
.wcard p{font-size:14px;color:#666;line-height:1.75}

@media(max-width:960px){
  .about-grid{grid-template-columns:1fr;gap:36px}
  .quality-grid{grid-template-columns:1fr}
  .why-cards-grid{grid-template-columns:1fr 1fr}
  .quality-focus{flex-direction:column;gap:20px;padding:28px 24px}
  .about-mv{grid-template-columns:1fr}
}
@media(max-width:640px){
  .why-cards-grid{grid-template-columns:1fr}
  .about-stats{grid-template-columns:1fr}
  .astat{border-right:none;border-bottom:1px solid rgba(255,255,255,.1)}
  .products-track .pcard{flex:0 0 100%}
  .slider-arrow{width:38px;height:38px;font-size:13px}
  .slider-arrow.prev{left:4px}
  .slider-arrow.next{right:4px}
}

/* ─── RESPONSIVE: GENERAL LAYOUT (TABLET) ─── */
@media(max-width:768px){
  .container{padding:0 20px}
  .cta-inner{padding:0 20px}
  .page-banner-inner{padding:0 20px}
  section{padding:36px 0}
  .sec-title{font-size:26px}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:32px}
  .cta-inner{flex-direction:column;text-align:center;gap:18px}
  .cta-text p{max-width:420px;margin:0 auto}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px}
}

/* ─── RESPONSIVE: PHONES ─── */
@media(max-width:600px){
  html,body{overflow-x:hidden}
  .hero{min-height:unset}
  .hero-left{padding:40px 20px}
  .hero-left h1{font-size:22px}
  .hero-left p{max-width:none}
  .hero-btns{flex-direction:column;align-items:stretch}
  .hero-btns a{justify-content:center}
  .features-grid{grid-template-columns:1fr}
  .feat{border-right:none !important;border-bottom:1px solid var(--border)}
  .feat:last-child{border-bottom:none}
  .features-wrap{padding:0 12px}
  .products-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;text-align:left;gap:32px}
  .page-banner h1{font-size:26px}
  .page-banner p{font-size:14px}
  .modal-header{padding:16px 18px}
  .modal-header-left h2{font-size:18px}
  .modal-form-col{padding:18px 16px}
  .frow-2{grid-template-columns:1fr}
  .quote-page-wrap{padding:24px 16px}
  .spec-table td{font-size:13px;padding:8px 8px}
}

/* ─── QUOTE MODAL ─── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,18,40,.72);z-index:10000;align-items:flex-start;justify-content:center;padding:20px 16px;overflow-y:auto;backdrop-filter:blur(3px)}
.modal-overlay.open{display:flex}
.modal-box{background:#fff;border-radius:10px;width:100%;max-width:980px;margin:auto;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.35);animation:modalIn .28s cubic-bezier(.22,.68,0,1.2) both}
@keyframes modalIn{from{opacity:0;transform:translateY(32px) scale(.97)}to{opacity:1;transform:none}}

/* Modal header strip */
.modal-header{background:linear-gradient(120deg,#0c1b38 0%,#1a2744 100%);padding:22px 32px;display:flex;align-items:center;justify-content:space-between}
.modal-header-left h2{font-family:'Merriweather',serif;font-size:22px;color:#fff;font-weight:900;letter-spacing:.3px}
.modal-header-left p{font-size:13px;color:#99aacc;margin-top:4px}
.modal-close{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(255,255,255,.25);background:transparent;color:#fff;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s;flex-shrink:0}
.modal-close:hover{background:var(--gold);border-color:var(--gold)}

/* Modal body two-col */
.modal-body{display:grid;grid-template-columns:1fr 300px;gap:0}
.modal-form-col{padding:28px 32px}
.modal-side{background:#f4f7fd;border-left:1px solid #e4e9f0;padding:28px 24px;display:flex;flex-direction:column;gap:0}

/* Section headings inside modal */
.form-sec-title{display:flex;align-items:center;gap:10px;margin-bottom:20px;margin-top:8px}
.form-sec-title:first-child{margin-top:0}
.form-sec-icon{width:36px;height:36px;background:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0}
.form-sec-title h3{font-size:14px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.5px}

/* Grid rows */
.frow{display:grid;gap:14px;margin-bottom:14px}
.frow-2{grid-template-columns:1fr 1fr}
.frow-1{grid-template-columns:1fr}
.fgroup{display:flex;flex-direction:column;gap:5px}
.fgroup label{font-size:12px;font-weight:600;color:#444;letter-spacing:.3px}
.fgroup label span{color:#c0392b;margin-left:2px}
.fgroup select,.fgroup input,.fgroup textarea{border:1.5px solid var(--border);border-radius:5px;padding:9px 12px;font-size:13px;font-family:'Open Sans',sans-serif;color:var(--text);outline:none;transition:border-color .2s,box-shadow .2s;background:#fff;width:100%}
.fgroup select:focus,.fgroup input:focus,.fgroup textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(26,39,68,.1)}
.fgroup textarea{resize:vertical;min-height:88px}
.char-count{font-size:11px;color:#999;text-align:right;margin-top:3px}

/* Phone field */
.phone-wrap{display:flex;gap:8px}
.phone-flag{display:flex;align-items:center;gap:4px;border:1.5px solid var(--border);border-radius:5px;padding:9px 10px;font-size:13px;background:#fff;flex-shrink:0;cursor:pointer}
.phone-flag img{width:18px;height:13px;object-fit:cover;border-radius:2px}
.phone-flag span{color:#555}
.phone-wrap input{flex:1}

/* Separator */
.form-sep{border:none;border-top:1px solid #eee;margin:18px 0}

/* Submit btn */
.btn-submit{width:100%;background:var(--navy);color:#fff;border:none;padding:14px 20px;border-radius:5px;font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:.2s;letter-spacing:.3px;font-family:'Open Sans',sans-serif}
.btn-submit:hover{background:var(--gold)}
.form-note{text-align:center;font-size:11.5px;color:#999;margin-top:8px;display:flex;align-items:center;justify-content:center;gap:5px}

/* Why sidebar */
.why-title{font-size:13px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px}
.why-gold-bar{width:32px;height:2.5px;background:var(--gold);margin-bottom:16px}
.why-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:14px}
.why-icon{width:34px;height:34px;background:var(--navy);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold);font-size:13px;flex-shrink:0}
.why-text h5{font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:2px}
.why-text p{font-size:11.5px;color:#666;line-height:1.55}

/* Success screen */
.modal-success{display:none;padding:40px 32px;text-align:center}
.modal-success.show{display:block}
.success-icon{width:72px;height:72px;background:#e8f5e9;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:32px;color:#2e7d32}
.modal-success h2{font-family:'Merriweather',serif;font-size:22px;color:var(--navy);margin-bottom:10px}
.modal-success p{font-size:14px;color:#555;line-height:1.7;max-width:440px;margin:0 auto 24px}
.next-steps{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:28px}
.ns-item{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12px;color:#555;font-weight:600}
.ns-item i{width:44px;height:44px;border:1.5px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--navy)}
.ns-arrow{color:#bbb;font-size:18px}
.response-badge{background:#f4f7fd;border:1px solid #dde4f0;border-radius:8px;padding:14px 24px;display:inline-flex;align-items:center;gap:12px;margin-bottom:24px}
.response-badge i{font-size:22px;color:var(--navy)}
.response-badge span{font-size:13px;color:#555}
.response-badge strong{font-size:16px;font-weight:700;color:var(--navy);display:block}

@media(max-width:780px){
  .modal-body{grid-template-columns:1fr}
  .modal-side{display:none}
  .frow-2{grid-template-columns:1fr}
  .modal-form-col{padding:20px 18px}
  .modal-header{padding:18px 20px}
}
/* ─── ALL PRODUCTS LIST PAGE ─── */
.products-list{display:flex;flex-direction:column;gap:20px;margin-bottom:48px}
.plist-item{display:grid;grid-template-columns:160px 1fr auto;gap:24px;align-items:center;background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;padding:0;transition:box-shadow .2s,border-color .2s;cursor:pointer}
.plist-item:hover{box-shadow:0 6px 28px rgba(0,0,0,.1);border-color:var(--gold)}
.plist-img{height:130px;width:160px;flex-shrink:0;overflow:hidden;background:#f0e8d0}
.plist-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.plist-item:hover .plist-img img{transform:scale(1.05)}
.plist-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.plist-img-placeholder i{font-size:36px;color:rgba(255,255,255,.5)}
.plist-body{padding:20px 0}
.plist-body h3{font-size:18px;font-weight:700;color:var(--navy);margin-bottom:6px}
.plist-body p{font-size:14px;color:var(--muted);line-height:1.65;max-width:520px;margin-bottom:10px}
.plist-tags{display:flex;gap:8px;flex-wrap:wrap}
.plist-tag{background:var(--light);border:1px solid var(--border);border-radius:20px;padding:4px 12px;font-size:13px;color:var(--navy);font-weight:600}
.plist-action{padding:0 24px;flex-shrink:0;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.plist-action .btn-primary{font-size:12.5px;padding:10px 18px;white-space:nowrap}
.plist-action .btn-outline{font-size:12px;padding:8px 16px;white-space:nowrap}
@media(max-width:760px){
  .plist-item{grid-template-columns:110px 1fr;grid-template-rows:auto auto}
  .plist-img{height:100px;width:110px}
  .plist-action{grid-column:1/-1;flex-direction:row;padding:0 16px 16px;justify-content:flex-start}
}
@media(max-width:480px){
  .plist-item{grid-template-columns:1fr}
  .plist-img{width:100%;height:160px}
}


.quote-page-wrap{max-width:980px;margin:0 auto;padding:48px 40px}
.quote-page-grid{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}
.quote-form-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:32px;box-shadow:0 4px 24px rgba(0,0,0,.06)}
.quote-sidebar{background:#f4f7fd;border:1px solid #e4e9f0;border-radius:10px;padding:28px 24px;position:sticky;top:90px}
@media(max-width:780px){
  .quote-page-grid{grid-template-columns:1fr}
  .quote-sidebar{display:none}
  .quote-page-wrap{padding:32px 20px}
}

.prod-layout{display:grid;grid-template-columns:380px 1fr;gap:48px;align-items:start}
.prod-img-wrap{border-radius:10px;overflow:hidden;border:1px solid var(--border);background:#f9f4ea;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.prod-img-wrap img{width:100%;height:100%;object-fit:cover}
.prod-img-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;color:rgba(200,146,42,.35)}
.prod-origin{display:inline-flex;align-items:center;gap:8px;background:var(--light);border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:12.5px;color:#555;margin-bottom:20px}
.prod-origin i{color:var(--gold)}
.prod-title{font-family:'Merriweather',serif;font-size:30px;font-weight:900;color:var(--navy);margin-bottom:12px}
.prod-divider{width:44px;height:3px;background:var(--gold);margin-bottom:18px}
.prod-overview{font-size:15px;color:#555;line-height:1.85;margin-bottom:28px}
.prod-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}

.prod-sections{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:32px}
.prod-sec{background:#fff;border:1px solid var(--border);border-radius:10px;padding:26px 24px}
.prod-sec-full{grid-column:1/-1}
.prod-sec h4{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:8px}
.prod-sec h4 i{font-size:14px}

/* specs table */
.spec-table{width:100%;border-collapse:collapse}
.spec-table tr{border-bottom:1px solid #f0f0f0}
.spec-table tr:last-child{border-bottom:none}
.spec-table td{padding:9px 12px;font-size:14px;line-height:1.5}
.spec-table td:first-child{font-weight:600;color:var(--navy);width:44%;background:#fafafa;border-radius:4px}
.spec-table td:last-child{color:#555}

/* app tags */
.app-tags{display:flex;flex-wrap:wrap;gap:8px}
.app-tag{background:var(--light);border:1px solid var(--border);border-radius:20px;padding:6px 14px;font-size:13.5px;color:var(--navy);font-weight:600}

/* packaging list */
.pack-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.pack-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:#555}
.pack-list li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--gold);flex-shrink:0}

/* quality badges */
.qa-badges{display:flex;flex-wrap:wrap;gap:10px}
.qa-badge{display:flex;align-items:center;gap:8px;background:var(--navy);color:#fff;border-radius:6px;padding:8px 14px;font-size:13.5px;font-weight:600}
.qa-badge i{color:var(--gold);font-size:13px}

@media(max-width:960px){
  .prod-layout{grid-template-columns:1fr}
  .prod-img-wrap{max-width:400px;margin:0 auto}
  .prod-sections{grid-template-columns:1fr}
  .prod-sec-full{grid-column:1}
}

@media(max-width:600px){
  .about-story-title{font-size:21px}
  .prod-title{font-size:23px}
  .prod-cta-row{flex-direction:column;align-items:stretch}
  .prod-cta-row a{justify-content:center}
  .why-hero-quote p{font-size:15px}
  .why-hero-quote{padding:24px 22px}
  .qfocus-icon{width:56px;height:56px;font-size:22px}
  .qfocus-text h3{font-size:17px}
  .quality-focus{padding:22px 18px}
  .about-hero-img,.quality-hero-img,.why-hero-img{height:160px}
}