/* =========================================================
   Chin Xing Agro Sdn Bhd — Website Stylesheet
   Palette grounded in the company logo: field yellow + olive
   green + warm charcoal, on a warm parchment ground.
   ========================================================= */

:root{
  /* --- Brand tokens --- */
  --yellow-700:#a8660a;
  --yellow-600:#d98a0f;
  --yellow-500:#f2a91d;
  --yellow-400:#f6bb44;
  --yellow-100:#fdf0d4;
  --green-700:#3c5c2f;
  --green-600:#4c7a3b;
  --green-100:#e9f1e2;
  --ink:#211f18;
  --charcoal:#2c2a21;
  --charcoal-700:#3a3628;
  --text:#2c2a20;
  --muted:#6e6852;
  --muted-2:#8c8468;
  --cream:#fbf6ea;
  --cream-2:#f4ecd8;
  --white:#ffffff;
  --line:#e6dcc2;
  --shadow:0 12px 32px -16px rgba(44,42,32,.35);
  --shadow-sm:0 4px 14px -8px rgba(44,42,32,.3);

  /* --- Type --- */
  --f-display:"Big Shoulders Display", "Arial Narrow", sans-serif;
  --f-body:"Work Sans", "Segoe UI", Arial, sans-serif;

  /* --- Layout --- */
  --maxw:1200px;
  --radius:10px;
  --radius-sm:6px;
}

*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x:hidden lives on html only — setting it on body too would make body
   its own (non-scrolling) CSS scroll container, and any position:sticky element
   would then resolve against that inert container instead of the real viewport
   scroll, so it would never actually stick and would just scroll away as if it
   were position:static. */
html{ scroll-behavior:smooth; max-width:100%; overflow-x:hidden; }
body{ max-width:100%;
  margin:0;
  background:var(--cream);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:.2px;
  margin:0 0 .5em;
  text-wrap:balance;
  color:var(--ink);
}
p{ margin:0 0 1em; }
:focus-visible{ outline:3px solid var(--yellow-600); outline-offset:2px; }

.container{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }
.section{ padding:72px 0; }
.section-tight{ padding:48px 0; }
@media (max-width:720px){
  .section{ padding:48px 0; }
  .section-tight{ padding:32px 0; }
}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--f-body); font-weight:700; font-size:13px;
  letter-spacing:1.6px; text-transform:uppercase;
  color:var(--green-700);
  margin-bottom:14px;
}
.eyebrow::before{
  content:""; width:22px; height:3px; background:var(--yellow-500); border-radius:2px;
}
.section-head{ max-width:680px; margin-bottom:44px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(30px,4vw,44px); }
.section-head p{ color:var(--muted); font-size:17px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-body); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:999px; border:2px solid transparent;
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{ background:var(--yellow-500); color:var(--ink); box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--yellow-400); }
.btn-dark{ background:var(--ink); color:var(--yellow-400); }
.btn-dark:hover{ background:var(--charcoal-700); }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--yellow-400); }
.btn-outline-light{ background:transparent; border-color:rgba(255,255,255,.7); color:#fff; }
.btn-outline-light:hover{ background:#fff; color:var(--ink); }
.btn-whatsapp{ background:#25D366; color:#0b3016; }
.btn-whatsapp:hover{ background:#2fe873; }
.btn-block{ width:100%; }
.btn-sm{ padding:10px 18px; font-size:13.5px; }

/* ---------- Top utility bar ---------- */
.topbar{
  background:var(--yellow-500); color:var(--ink); font-size:13.5px;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  height:40px; gap:16px;
}
.topbar-row{ justify-content:flex-end; }
.topbar-links{ display:flex; align-items:center; gap:10px; }
.topbar-links a{ display:inline-flex; align-items:center; gap:6px; color:var(--ink); font-weight:600; }
.topbar-links a:hover{ color:var(--charcoal-700); text-decoration:underline; }
.topbar-sep{ color:rgba(33,31,24,.4); }
.lang-switch{ display:flex; align-items:center; gap:4px; font-weight:700; }
.lang-switch button{
  background:none; border:none; color:rgba(33,31,24,.55); font:inherit; font-weight:700;
  font-size:13.5px; cursor:pointer; padding:2px 4px; border-radius:4px;
}
.lang-switch button.active{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.lang-switch span{ color:rgba(33,31,24,.35); }
.lang-switch{ flex-shrink:0; }

/* Phone + email + EN/BM all fighting for one 40px-tall row overflows on phone
   widths and squeezes the language switcher out of its tappable area. Drop the
   email (least essential — WhatsApp/phone already cover contact) and give the
   switcher itself a bigger, guaranteed-clickable hit area. */
@media (max-width:600px){
  .topbar-links a[href^="mailto:"],
  .topbar-links .topbar-sep{ display:none; }
  .lang-switch button{ padding:11px 9px; font-size:14px; }
}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
/* the blur lives on a pseudo-element so .site-header itself has no filter/backdrop-filter —
   either would make it the containing block for the fixed mobile nav panel below and break
   its off-canvas slide (it would slide only relative to the header, not the viewport) */
.site-header::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:rgba(251,246,234,.92);
  backdrop-filter:blur(8px);
}
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; height:148px; gap:20px; }
.brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.brand img{ height:120px; width:auto; }
.brand-text{ font-family:var(--f-display); line-height:1; }
.brand-text b{ display:block; font-size:33px; font-weight:800; letter-spacing:.2px; color:var(--ink); }
.brand-text small{ display:block; font-family:var(--f-body); font-weight:700; font-size:11.5px; letter-spacing:1.6px; color:var(--green-700); margin-top:4px; white-space:nowrap; }

.main-nav{ display:flex; align-items:center; gap:6px; }
.main-nav a{
  font-weight:600; font-size:15px; padding:10px 14px; border-radius:8px; color:var(--charcoal);
  position:relative;
}
.main-nav a:hover{ color:var(--yellow-700); }
.main-nav a.active{ color:var(--ink); }
.main-nav a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:3px;
  background:var(--yellow-500); border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:10px; }
.nav-toggle{
  display:none; background:none; border:2px solid var(--ink); border-radius:8px;
  width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; display:block; width:20px; height:2px; background:var(--ink); position:relative; transition:.2s;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

@media (max-width:960px){
  .brand img{ height:92px; }
  .brand-text b{ font-size:26px; }
}
@media (max-width:860px){
  .main-nav{
    position:fixed; inset:148px 0 0 0; background:var(--cream); flex-direction:column;
    align-items:stretch; padding:14px 24px; gap:2px; overflow-y:auto;
    transform:translateX(100%); transition:transform .25s ease; border-top:1px solid var(--line);
  }
  .main-nav.open{ transform:translateX(0); }
  .main-nav a{ padding:16px 6px; border-bottom:1px solid var(--line); border-radius:0; font-size:17px; }
  .main-nav .nav-whatsapp{ margin-top:16px; }
  .nav-toggle{ display:flex; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background-color:var(--ink);
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.hero:not(.hero-scroll)::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(105deg, rgba(10,9,6,.93) 0%, rgba(10,9,6,.86) 42%, rgba(10,9,6,.48) 68%, rgba(10,9,6,.26) 100%),
    linear-gradient(180deg, rgba(10,9,6,.18), rgba(10,9,6,.4));
}
.hero .container{
  position:relative; z-index:2;
  padding-top:96px; padding-bottom:110px;
  display:grid; gap:18px; max-width:760px;
}
.hero:not(.hero-scroll)::after{
  content:""; position:absolute; top:0; right:-6%; width:46%; height:100%;
  background:var(--yellow-500);
  clip-path:polygon(38% 0, 100% 0, 100% 100%, 0% 100%);
  opacity:.94; z-index:1;
}
.hero.no-diag::after{ display:none; }

/* ---------- Hero: scroll-driven frame sequence (home page) ---------- */
.hero-scroll{ overflow:visible; background:var(--ink); }
.hero-sticky{
  position:sticky; top:0; height:100vh; height:var(--hero-vh,100vh); width:100%; overflow:hidden;
  display:flex; align-items:center;
}
.hero-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  background:url('../../frames/frame-0001.jpg') center/cover no-repeat, var(--ink);
}
.hero-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(8,7,5,.68) 0%, rgba(8,7,5,.46) 26%, rgba(8,7,5,.16) 50%, transparent 68%),
    linear-gradient(180deg, rgba(8,7,5,.4) 0%, transparent 22%, transparent 72%, rgba(8,7,5,.5) 100%);
}
.hero-scroll .hero-copy{
  position:relative; z-index:3; width:100%;
  padding-top:40px; padding-bottom:40px;
  display:grid; gap:18px; max-width:760px;
}
.hero-reveal{ opacity:0; transform:translateY(26px); will-change:opacity,transform; }
.hero-reveal-1{ transition:opacity .6s ease, transform .6s ease; }
.hero-reveal.is-visible{ opacity:1; transform:translateY(0); }
.hero-scroll-hint{
  margin-top:26px; opacity:.75; animation:hero-bounce 1.8s ease-in-out infinite;
  transition:opacity .4s ease;
}
.hero-scroll-hint svg{ width:20px; height:20px; }
@keyframes hero-bounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(7px); } }
@media (prefers-reduced-motion: reduce){ .hero-scroll-hint{ animation:none; } .hero-reveal{ transition:none; } }
.hero-scroll h1, .hero-scroll p.lead{ text-transform:uppercase; }
.hero-scroll p.lead{ letter-spacing:.2px; }
.hero .tag{
  display:inline-flex; align-self:flex-start; gap:8px; align-items:center;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.35);
  padding:8px 16px; border-radius:999px; font-weight:700; font-size:13px;
  letter-spacing:1.2px; text-transform:uppercase;
}
.hero h1{ color:#fff; font-size:clamp(38px,6vw,64px); text-shadow:0 3px 20px rgba(0,0,0,.6); }
.hero p.lead{ font-size:18px; color:#f1ecdd; max-width:560px; text-shadow:0 2px 10px rgba(0,0,0,.55); }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; }
.hero-small{ min-height:340px; display:flex; align-items:flex-end; }
.hero-small .container{ padding-top:70px; padding-bottom:56px; }
.hero-small h1{ font-size:clamp(32px,5vw,48px); }

/* ---------- Stats strip ---------- */
.stats{
  background:var(--ink); color:#fff;
}
.stats .container{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
}
.stat{ padding:34px 20px; text-align:center; border-left:1px solid rgba(255,255,255,.12); }
.stat:first-child{ border-left:none; }
.stat b{ display:block; font-family:var(--f-display); font-size:clamp(28px,4vw,40px); color:var(--yellow-400); }
.stat span{ font-size:13px; letter-spacing:.4px; color:#cfc9b3; }
@media (max-width:720px){
  .stats .container{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-left:none; border-top:1px solid rgba(255,255,255,.12); }
}

/* ---------- Grids & cards ---------- */
/* grid items get an intrinsic min-width from their content by default, which can force
   tracks (and the page) wider than the viewport; zero it out so tracks can shrink freely */
.grid > *, .tiles > *, .stats .container > *, .contact-grid > *, .footer-grid > *,
.hero .container > *, .split > *, .chips > *, .hero-actions > *{ min-width:0; }
.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:920px){ .grid-4{ grid-template-columns:repeat(2,1fr); } .grid-3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .grid-4,.grid-3,.grid-2{ grid-template-columns:1fr; } }

.card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-sm);
}
.card-icon{
  width:52px; height:52px; border-radius:12px; background:var(--yellow-100);
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex-shrink:0;
  color:var(--yellow-700);
}
.card h3{ font-size:20px; margin-bottom:8px; }
.card p{ color:var(--muted); font-size:15px; margin-bottom:0; }
.card ul{ margin-top:10px; display:grid; gap:6px; }
.card ul li{ font-size:14.5px; color:var(--muted); padding-left:18px; position:relative; }
.card ul li::before{ content:"—"; position:absolute; left:0; color:var(--yellow-600); }

.split{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; gap:32px; } }
.split.rev{ grid-template-columns:.9fr 1.1fr; }
.split.rev .split-media{ order:2; }
@media (max-width:860px){ .split.rev .split-media{ order:0; } }
.split-media img{ border-radius:14px; box-shadow:var(--shadow); }
.split-media{ position:relative; }
.split-media .chip{
  position:absolute; bottom:-18px; left:-18px; background:var(--white);
  border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:14px 20px; font-family:var(--f-display); font-size:15px; color:var(--ink);
}
@media (max-width:520px){ .split-media .chip{ left:8px; bottom:-14px; padding:10px 14px; font-size:13px; } }

/* Section background variants */
.bg-panel{ background:var(--cream-2); }
.bg-dark{ background:var(--ink); color:#e7e2cf; }
.bg-dark h2, .bg-dark h3{ color:#fff; }
.bg-dark .muted{ color:#b7b090; }
.bg-green{ background:var(--green-100); }

/* ---------- Why-us tiles ---------- */
.tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.tile{ background:var(--white); padding:26px 20px; text-align:center; }
.tile .num{ font-family:var(--f-display); font-size:26px; color:var(--yellow-600); display:block; margin-bottom:8px; }
.tile h4{ font-size:15.5px; margin:0; color:var(--ink); }
@media (max-width:860px){ .tiles{ grid-template-columns:repeat(2,1fr); } }

/* ---------- Brand logos ---------- */
.brand-logos{ display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.brand-logos > *{ min-width:0; }
.brand-logo-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  height:110px; display:flex; align-items:center; justify-content:center; padding:18px 22px;
  box-shadow:var(--shadow-sm); transition:transform .15s ease, box-shadow .15s ease;
}
.brand-logo-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.brand-logo-card img{ max-width:100%; max-height:100%; object-fit:contain; }
@media (max-width:860px){ .brand-logos{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .brand-logos{ grid-template-columns:repeat(2,1fr); } .brand-logo-card{ height:86px; padding:14px; } }

/* ---------- Coverage map ---------- */
.coverage-layout{ display:grid; grid-template-columns:1.1fr .9fr; gap:44px; align-items:center; }
.coverage-layout > *{ min-width:0; }
@media (max-width:920px){ .coverage-layout{ grid-template-columns:1fr; } }
.map-frame{
  position:relative; width:100%; aspect-ratio:1236/400;
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm); overflow:hidden; padding:18px;
}
.map-frame img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 6px 18px rgba(60,92,47,.2)); }
.map-legend{ display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; font-size:12.5px; color:var(--muted); }
.map-legend span{ display:inline-flex; align-items:center; gap:7px; }
.map-legend i.sw{ width:14px; height:14px; border-radius:4px; display:inline-block; }
.map-legend i.sw.hq{ background:var(--yellow-600); }
.map-legend i.sw.covered{ background:var(--green-600); }
.map-key{ display:grid; gap:8px; margin-top:16px; }
.map-key-item{ display:flex; align-items:center; gap:12px; font-size:13.5px; color:var(--charcoal); }
.map-key-item .dot{
  flex-shrink:0; width:11px; height:11px; border-radius:50%; background:var(--green-600);
  box-shadow:0 0 0 4px rgba(76,122,59,.18);
}
.map-key-item.hq .dot{ background:var(--yellow-600); box-shadow:0 0 0 4px rgba(217,138,15,.18); }
.map-key-item b{ color:var(--ink); }

/* ---------- Coverage ---------- */
.chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip-pill{
  background:var(--white); border:1px solid var(--line); padding:9px 18px; border-radius:999px;
  font-weight:600; font-size:14px; color:var(--charcoal);
}
.chip-pill b{ color:var(--yellow-700); margin-right:6px; }

/* ---------- Products ---------- */
.filters{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:34px; }
.filter-btn{
  background:var(--white); border:1.5px solid var(--line); padding:10px 20px; border-radius:999px;
  font-weight:700; font-size:14px; cursor:pointer; color:var(--charcoal); transition:.15s;
}
.filter-btn:hover{ border-color:var(--yellow-500); }
.filter-btn.active{ background:var(--ink); border-color:var(--ink); color:var(--yellow-400); }

.product-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.product-media{ aspect-ratio:4/3; background:var(--ink); position:relative; overflow:hidden; }
.product-media img{ width:100%; height:100%; object-fit:cover; }
.product-badge{
  position:absolute; top:14px; left:14px; background:var(--yellow-500); color:var(--ink);
  font-weight:700; font-size:12px; letter-spacing:.5px; text-transform:uppercase;
  padding:6px 12px; border-radius:999px;
}
.product-badge.used{ background:#e9e3cd; color:var(--charcoal-700); }
.product-badge.implement{ background:var(--green-600); color:#fff; }
.product-badge.parts{ background:var(--charcoal); color:var(--yellow-400); }
.product-body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.product-cat{ font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--green-700); }
.product-body h3{ font-size:19px; margin:0; }
.product-body p{ color:var(--muted); font-size:14.5px; margin:0; flex:1; }
.product-body p.spec{ color:var(--charcoal-700); font-weight:600; font-size:13.5px; flex:none; }
.product-actions{ display:flex; gap:10px; margin-top:8px; flex-wrap:wrap; }
.product-actions .btn{ flex:1 1 auto; }

.note-box{
  margin-top:40px; background:var(--yellow-100); border:1px dashed var(--yellow-600);
  border-radius:var(--radius); padding:24px 28px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; justify-content:space-between;
}
.note-box p{ margin:0; font-weight:600; color:var(--charcoal-700); max-width:520px; }

/* ---------- Services ---------- */
.service-row{ display:grid; grid-template-columns:60px 1fr; gap:20px; padding:26px 0; border-top:1px solid var(--line); }
.service-row:last-child{ border-bottom:1px solid var(--line); }
.service-row .num{ font-family:var(--f-display); font-size:28px; color:var(--yellow-600); }
.service-row h3{ font-size:21px; margin-bottom:6px; }
.service-row p{ color:var(--muted); margin-bottom:0; }

/* ---------- Timeline / branches list ---------- */
.branch-list{ display:grid; gap:14px; }
.branch-item{
  display:flex; gap:16px; align-items:flex-start; background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 20px;
}
.branch-item .dot{ width:10px; height:10px; border-radius:50%; background:var(--yellow-500); margin-top:7px; flex-shrink:0; }
.branch-item b{ display:block; font-size:15.5px; color:var(--ink); }
.branch-item span{ font-size:14px; color:var(--muted); }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--yellow-500); border-radius:18px; padding:48px; text-align:center;
  display:grid; gap:16px; justify-items:center;
}
.cta-banner h2{ font-size:clamp(26px,3.6vw,36px); max-width:640px; }
.cta-banner p{ color:var(--charcoal-700); max-width:560px; }

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
@media (max-width:920px){ .contact-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{ text-align:center; }
.contact-card .card-icon{ margin:0 auto 16px; }
.contact-card h3{ font-size:17px; }
.contact-card p{ font-size:14.5px; }
.map-wrap{ border-radius:14px; overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.map-wrap iframe{ width:100%; height:420px; border:0; display:block; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--ink); color:#c9c3ab; padding:64px 0 0; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,.1); }
@media (max-width:820px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ color:#fff; font-family:var(--f-body); font-size:14px; letter-spacing:1px; text-transform:uppercase; margin-bottom:16px; }
.footer-grid ul{ display:grid; gap:10px; }
.footer-grid a{ font-size:14.5px; color:#c9c3ab; }
.footer-grid a:hover{ color:var(--yellow-400); }
.footer-brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-brand img{ height:44px; }
.footer-brand b{ font-family:var(--f-display); font-size:19px; color:#fff; }
.footer-about{ font-size:14.5px; max-width:320px; color:#a29c82; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding:22px 0; font-size:13px; color:#8b856c; flex-wrap:wrap; gap:10px; }

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed; right:22px; bottom:22px; z-index:200;
  width:60px; height:60px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.5);
  transition:transform .15s ease;
}
.wa-float:hover{ transform:scale(1.06); }
.wa-float svg{ width:30px; height:30px; }

/* ---------- Misc ---------- */
.mt-0{ margin-top:0 !important; }
.center-text{ text-align:center; }
.text-max{ max-width:680px; margin-left:auto; margin-right:auto; }
.divider{ height:1px; background:var(--line); margin:56px 0; }
.badge-outline{
  display:inline-block; border:1px solid var(--line); border-radius:999px; padding:5px 14px;
  font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.4px;
}
.two-col-text{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:760px){ .two-col-text{ grid-template-columns:1fr; } }