/* ==========================================================
   Daddy Ash Limited — Main Stylesheet
   Palette is a close match built from the live WordPress site.
   Adjust the CSS variables below once you send exact hex codes.
   ========================================================== */

:root{
  --navy-dark:   #0c1f38;   /* header / footer bg */
  --navy:        #12294a;   /* secondary panels */
  --navy-light:  #1c3a63;
  --gold:        #c99b3f;   /* accent / buttons */
  --gold-light:  #e0b968;
  --teal:        #14746b;
  --teal-dark:   #0f5a53;
  --white:       #ffffff;
  --off-white:   #f7f7f5;
  --gray-100:    #f2f2f0;
  --gray-300:    #d9d9d6;
  --gray-600:    #6b6f76;
  --text-dark:   #1c2430;
  --font-head: 'Spartan', 'Segoe UI', sans-serif;
  --font-body: 'Inter', 'Segoe UI', sans-serif;
  --radius: 6px;
  --shadow: 0 10px 30px rgba(12,31,56,0.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-dark);
  background:var(--white);
  line-height:1.65;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head); margin:0 0 .5em; color:var(--navy-dark); font-weight:700;}
.container{max-width:1200px; margin:0 auto; padding:0 24px;}
section{padding:70px 0;}
.btn{
  display:inline-block; padding:14px 32px; border-radius:30px;
  background:var(--gold); color:var(--navy-dark); font-weight:600;
  letter-spacing:.5px; text-transform:uppercase; font-size:13px;
  border:none; cursor:pointer; transition:.25s ease;
}
.btn:hover{background:var(--gold-light);}
.btn-outline{background:transparent; color:var(--white); border:1px solid var(--white);}
.btn-outline:hover{background:var(--white); color:var(--navy-dark);}
.eyebrow{
  text-transform:uppercase; letter-spacing:2px; font-size:13px;
  color:var(--gold); font-weight:700; margin-bottom:10px; display:block;
}
.section-title{font-size:32px; margin-bottom:14px;}
.section-lead{color:var(--gray-600); max-width:680px; margin-bottom:40px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* ---------- Header / nav ---------- */
header.site-header{
  background:var(--white); box-shadow:0 2px 10px rgba(0,0,0,.06);
  position:sticky; top:0; z-index:1000; transition:background .3s ease, box-shadow .3s ease;
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:30px;}
.logo img{height:52px;}
nav.main-nav{flex:1; display:flex; justify-content:center;}
nav.main-nav ul{display:flex; gap:30px;}
nav.main-nav a{
  font-weight:600; font-size:14px; letter-spacing:.4px;
  color:var(--navy-dark); padding:6px 0; border-bottom:2px solid transparent;
}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--gold); border-color:var(--gold);}
.nav-toggle{display:none; background:none; border:none; font-size:26px; color:var(--navy-dark); cursor:pointer; align-items:center; justify-content:center;}
.nav-close{display:none;}
.search-toggle{background:none; border:none; color:var(--navy-dark); cursor:pointer; padding:4px; display:flex;}
.search-toggle:hover{color:var(--gold);}
.header-icons{display:flex; align-items:center; gap:16px; position:relative; z-index:2;}
.nav-toggle .icon-close{display:none;}
.nav-toggle.open .icon-hamburger{display:none;}
.nav-toggle.open .icon-close{display:block;}

/* Transparent header overlaid on a hero image (used on the homepage) */
header.site-header.transparent{
  position:absolute; top:0; left:0; right:0; width:100%; z-index:1000;
  background:transparent; box-shadow:none;
}
header.site-header.transparent nav.main-nav a{color:var(--white);}
header.site-header.transparent nav.main-nav a:hover,
header.site-header.transparent nav.main-nav a.active{color:var(--gold-light); border-color:var(--gold-light);}
header.site-header.transparent .search-toggle{color:var(--white);}
header.site-header.transparent .search-toggle:hover{color:var(--gold-light);}
header.site-header.transparent .nav-toggle{color:var(--white);}

/* ---------- Hero slider ---------- */
.hero-slider{position:relative; height:100vh; min-height:620px; max-height:900px; overflow:hidden; background:var(--navy-dark);}
.hero-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  display:flex; align-items:center; opacity:0; transition:opacity .8s ease; z-index:1;
}
.hero-slide.active{opacity:1; z-index:2;}
.hero-slide::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(12,31,56,.88) 0%, rgba(12,31,56,.55) 55%, rgba(12,31,56,.25) 100%);
}
.hero-content{position:relative; z-index:2; color:var(--white); max-width:640px; padding:0 24px;}
.hero-content .eyebrow{color:var(--gold-light);}
.hero-content h1{color:var(--white); font-size:48px; font-weight:800; line-height:1.15; letter-spacing:-.5px; margin-bottom:18px;}
.hero-content p{
  font-size:15px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px;
  color:var(--white); margin-bottom:0;
}
.hero-tags{display:flex; gap:14px; margin-bottom:26px;}
.hero-tags span{
  border:1px solid rgba(255,255,255,.5); padding:6px 14px; font-size:12px;
  text-transform:uppercase; letter-spacing:1px; border-radius:2px;
}
.hero-dots{position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:10px;}
.hero-dots button{width:10px; height:10px; border-radius:50%; border:1px solid var(--white); background:transparent; cursor:pointer;}
.hero-dots button.active{background:var(--gold); border-color:var(--gold);}
.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,.12);
  color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s ease;
}
.hero-arrow:hover{background:rgba(255,255,255,.28);}
.hero-arrow.prev{left:24px;}
.hero-arrow.next{right:24px;}
@media (max-width:768px){
  .hero-arrow{width:36px; height:36px;}
  .hero-arrow.prev{left:10px;}
  .hero-arrow.next{right:10px;}
}

/* ---------- Who we are ---------- */
.about-strip{
  position:relative; background-color:#f4f5f4; overflow:hidden;
}
.about-strip:not([style*="background-image"])::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(135deg, #f4f5f4 0px, #f4f5f4 60px, #ececea 60px, #ececea 120px);
}
.about-strip .container{position:relative; z-index:1;}
.about-strip .grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.eyebrow-badge{
  display:inline-block; background:var(--white); color:var(--teal); font-weight:700; font-size:13px;
  padding:10px 20px; border-radius:6px; box-shadow:0 6px 18px rgba(12,31,56,.08); margin-bottom:22px;
}
.about-strip h2.section-title{font-size:34px; color:var(--text-dark);}
.vm-list{margin:30px 0;}
.vm-item{display:flex; gap:20px; margin-bottom:28px;}
.vm-item .icon-circle{
  width:58px; height:58px; border-radius:50%; background:var(--teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.vm-item .icon-circle svg{color:var(--white);}
.vm-item h4{margin-bottom:8px; position:relative; padding-bottom:10px; font-size:19px;}
.vm-item h4::after{content:''; position:absolute; left:0; bottom:0; width:32px; height:3px; background:var(--teal);}
.vm-item p{color:var(--gray-600); margin:0;}
.btn-outline-teal{
  display:inline-block; padding:14px 32px; border-radius:30px; border:2px solid var(--teal);
  color:var(--teal); font-weight:700; background:transparent; letter-spacing:.3px; transition:.25s ease;
}
.btn-outline-teal:hover{background:var(--teal); color:var(--white);}
.about-photo{
  border-radius:18px; box-shadow:0 25px 60px rgba(12,31,56,.18); width:100%;
  min-height:600px; background-size:cover; background-position:center;
}

/* Used on about-us.php (separate from the homepage's vm-item/icon-circle design) */
.vision-mission{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:26px 0;}
.vm-card{background:var(--white); padding:24px; border-radius:var(--radius); box-shadow:var(--shadow);}

/* ---------- About Us page: content section with photo ---------- */
.au-section{position:relative; overflow:hidden; background-color:#fbfbfa;}
.au-section:not([style*="background-image"])::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background-image:repeating-linear-gradient(135deg, #fbfbfa 0px, #fbfbfa 60px, #f0f0ee 60px, #f0f0ee 120px);
}
.au-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}
.au-heading{color:var(--teal); font-size:38px; font-weight:800; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px;}
.au-subheading{color:var(--text-dark); font-size:22px; font-weight:700; margin-bottom:20px;}
.au-welcome{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.au-welcome img{height:34px; width:auto;}
.au-welcome h4{color:var(--teal); font-size:19px; margin:0;}
.au-photo{
  border-radius:18px; box-shadow:0 25px 60px rgba(12,31,56,.18); width:100%;
  min-height:500px; background-size:cover; background-position:center;
}
.strategy-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;}

/* ---------- Core Values (about-us.php) ---------- */
.cv-section{position:relative; overflow:hidden; background-color:var(--white);}
.cv-section:not([style*="background-image"])::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background-image:repeating-linear-gradient(135deg, #ffffff 0px, #ffffff 60px, #f2f2f0 60px, #f2f2f0 120px);
}
.cv-section .container{position:relative; z-index:1;}
.cv-heading-row{display:flex; align-items:center; justify-content:center; gap:20px; max-width:900px; margin:0 auto;}
.cv-line{flex:1; height:1px; background:var(--gray-300);}
.cv-star{color:var(--teal); font-size:18px;}
.cv-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 40px; margin-top:50px;}
.cv-item{display:flex; align-items:flex-start; gap:16px;}
.cv-icon{color:var(--teal); flex-shrink:0; margin-top:2px;}
.cv-item h4{font-size:18px; margin-bottom:4px; color:var(--text-dark);}
.cv-item p{color:var(--gray-600); margin:0; font-size:14.5px;}
.service-icons.strategy-icons{flex-wrap:nowrap; gap:18px;}
.service-icons.strategy-icons .service-item{flex:0 1 auto; min-width:0; gap:8px;}
.service-icons.strategy-icons .service-item .script,
.service-icons.strategy-icons .service-item .label{white-space:nowrap;}
.service-icons.strategy-icons .service-item .script{font-size:18px;}
.vm-card .num{color:var(--gold); font-weight:700; font-size:14px;}

/* ---------- Brands strip (split photo + light content panel) ---------- */
.brands-strip{background:var(--white); padding:0;}
.bs-grid{display:grid; grid-template-columns:1fr 1fr; min-height:560px;}
.bs-photo{background-size:cover; background-position:center;}
.bs-content{
  position:relative; overflow:hidden; padding:70px; display:flex; flex-direction:column; justify-content:center;
  background-color:#fbfbfa;
}
.bs-content:not([style*="background-image"])::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.7;
  background-image:repeating-linear-gradient(135deg, #fbfbfa 0px, #fbfbfa 60px, #f0f0ee 60px, #f0f0ee 120px);
}
.bs-content > *{position:relative; z-index:1;}
.bs-content h2{font-size:30px; color:var(--text-dark); margin-bottom:14px;}
.bs-content > p{color:var(--gray-600); max-width:480px; margin-bottom:30px;}
.bs-badge{
  display:inline-block; background:var(--navy-dark); color:var(--white); font-size:12px; font-weight:700;
  padding:7px 16px; border-radius:4px; margin-bottom:10px; width:fit-content;
}
.bs-brands-heading{font-size:34px; font-weight:800; letter-spacing:1px; color:var(--text-dark); margin-bottom:30px;}
.bs-logos-track{position:relative; z-index:1; overflow:hidden; margin-bottom:28px; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);}
.bs-logos-slide{display:flex; gap:44px; width:max-content; animation:bsLogoScroll 22s linear infinite;}
.bs-logos-track:hover .bs-logos-slide{animation-play-state:paused;}
.bs-logos-slide img{height:44px; width:auto; flex-shrink:0; object-fit:contain;}
@keyframes bsLogoScroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}
.bs-viewall{
  display:inline-block; color:var(--navy-dark); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.5px; margin-bottom:44px;
}
.bs-viewall:hover{color:var(--teal);}
.bs-contact-row{display:flex; gap:50px; flex-wrap:wrap;}
.bs-contact-item{display:flex; align-items:center; gap:14px;}
.icon-circle-sm{
  width:46px; height:46px; border-radius:50%; background:var(--teal); color:var(--white);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.bs-contact-item .label{display:block; font-size:12px; color:var(--gray-600); margin-bottom:2px;}
.bs-contact-item strong{display:block; font-size:15px; color:var(--text-dark);}
.bs-contact-item strong a{color:inherit;}
.bs-contact-item strong a:hover{color:var(--teal);}

/* ---------- Quick links (Products/Career/Gallery/FAQs) ---------- */
.quick-links-section{
  position:relative; padding:80px 0 60px; overflow:hidden; background-color:#fbfbfa;
}
.quick-links-section:not([style*="background-image"])::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:repeating-linear-gradient(135deg, #fbfbfa 0px, #fbfbfa 60px, #f0f0ee 60px, #f0f0ee 120px);
}
.quick-links-section .container{position:relative; z-index:1; max-width:1300px;}
.quick-links{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:40px;}
.quick-link-card{
  position:relative; background:var(--white); border-radius:12px; padding:36px 26px 30px;
  box-shadow:0 15px 40px rgba(12,31,56,.08); transition:.25s ease;
}
.quick-link-card:hover{transform:translateY(-4px); box-shadow:0 20px 50px rgba(12,31,56,.14);}
.ql-icon{
  position:absolute; top:-32px; left:24px; width:64px; height:64px; border-radius:50%;
  background:var(--teal); color:var(--white); display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px rgba(20,116,107,.15);
}
.quick-link-card .num{position:absolute; top:14px; right:22px; font-size:38px; font-weight:800; font-family:var(--font-head);}
.quick-link-card .num.num-1{color:var(--teal);}
.quick-link-card .num.num-2{color:#9fd4cd;}
.quick-link-card h3{margin-top:26px; font-size:21px; color:var(--navy-dark);}
.quick-link-card p{color:var(--gray-600); font-size:14.5px; min-height:70px;}
.quick-link-card a.more{color:var(--teal); font-weight:700; font-size:13px; text-transform:uppercase; letter-spacing:.4px;}
.quick-link-card a.more:hover{text-decoration:underline;}

/* ---------- Testimonials (split photo + dark panel, single-slide carousel) ---------- */
.testimonials-v2{background:var(--navy-dark); overflow:hidden; padding:0;}
.testi-row{display:grid; grid-template-columns:1fr 1.3fr; min-height:600px;}
.testi-photo{
  position:relative; background-size:cover; background-position:center;
  align-self:start; height:520px;
  border-top-left-radius:28px; border-bottom-right-radius:28px;
}
.testi-quote-avatar{
  position:absolute; right:-38px; top:50%; transform:translateY(-50%);
  width:76px; height:76px; border-radius:50%; background:var(--teal);
  color:var(--white); font-size:34px; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.3); z-index:2;
}
.testi-panel{
  background:transparent; color:var(--white); padding:70px 90px 70px 70px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.testi-content{max-width:480px;}
.testi-customer-photo-wrap{flex-shrink:0; display:flex; justify-content:center;}
.testi-customer-photo{
  width:230px; height:230px; border-radius:50%; object-fit:cover;
  border:6px solid rgba(255,255,255,.15); box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.testi-panel .eyebrow{color:var(--gray-300); text-transform:none; letter-spacing:0; font-weight:500; font-size:15px;}
.testi-panel h2{color:var(--white); font-size:36px; margin-bottom:20px;}
.testi-stars{color:var(--gold); background:var(--white); display:inline-flex; gap:4px; padding:8px 18px; border-radius:20px; font-size:16px; margin-bottom:24px; width:fit-content;}
.testi-slides{position:relative; min-height:150px;}
.testi-slide{display:none;}
.testi-slide.active{display:block;}
.testi-who{display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.testi-who svg{color:var(--white); flex-shrink:0;}
.testi-avatar-photo{width:38px; height:38px; border-radius:50%; object-fit:cover; flex-shrink:0;}
.testi-name{font-weight:700; font-size:17px;}
.testi-slide p{color:var(--gray-300); font-size:16px; line-height:1.7;}
.testi-nav{display:flex; align-items:center; gap:20px; margin-top:30px;}
.testi-arrow{
  background:transparent; border:none; color:var(--white); cursor:pointer; opacity:.75;
  display:flex; align-items:center; padding:6px; transition:.2s ease;
}
.testi-arrow:hover{opacity:1; color:var(--gold-light);}
.testi-counter{font-weight:700; font-size:18px; color:var(--white);}
.testi-counter #testiCurrent{color:var(--gold-light);}

/* ---------- Customer/Supplier form ---------- */
.cs-section{background:var(--navy-dark); color:var(--white);}
.cs-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center;}
.cs-text-panel{
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.4); border-radius:14px; padding:34px;
  box-shadow:0 20px 50px rgba(0,0,0,.15);
}
.cs-text-panel p{margin-bottom:14px;}
.form-card{background:var(--white); color:var(--text-dark); padding:34px; border-radius:var(--radius); box-shadow:var(--shadow);}
.form-row{margin-bottom:16px;}
.form-row label{display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--navy-dark);}
.form-row input:not([type="radio"]):not([type="checkbox"]), .form-row select, .form-row textarea{
  width:100%; padding:12px 14px; border:1px solid var(--gray-300); border-radius:4px; font-family:var(--font-body); font-size:14px;
}
.form-row textarea{min-height:110px; resize:vertical;}
.radio-group{display:flex; gap:20px; flex-wrap:wrap;}
.radio-group label{display:flex; align-items:center; gap:8px; font-weight:500; font-size:14px;}
.radio-group input[type="radio"]{width:auto; flex-shrink:0; margin:0;}
.form-alert{padding:12px 16px; border-radius:4px; margin-bottom:18px; font-size:14px;}
.form-alert.success{background:#e4f6ea; color:#1c7a3f;}
.form-alert.error{background:#fdeaea; color:#b12a2a;}

/* ---------- Locations (light section with optional map background image) ---------- */
.locations{
  position:relative; background-color:#f4f5f4; padding:60px 0 70px; overflow:hidden;
}
.locations::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:radial-gradient(rgba(12,31,56,.14) 1.5px, transparent 1.5px);
  background-size:16px 16px;
}
.locations[style*="background-image"]::before{display:none;} /* hide dot fallback when a real image is uploaded */
.locations .container{position:relative; z-index:1;}
.locations .section-title{text-align:left; margin-bottom:34px;}

.service-icons{
  display:flex; justify-content:center; gap:56px; flex-wrap:wrap;
  padding-bottom:34px; margin-bottom:46px; border-bottom:1px solid rgba(12,31,56,.12);
}
.service-item{display:flex; align-items:center; gap:12px;}
.service-item .icon{color:var(--teal); flex-shrink:0;}
.service-item .text{display:flex; flex-direction:column; line-height:1.1;}
.service-item .script{font-family:'Caveat', cursive; font-size:22px; color:var(--teal); font-weight:600;}
.service-item .label{font-size:11px; font-weight:700; letter-spacing:1px; color:var(--text-dark);}

.loc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.loc-card{background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius); padding:26px; box-shadow:0 6px 20px rgba(12,31,56,.05);}
.loc-card h3{font-size:18px; margin-bottom:12px; padding-bottom:10px; position:relative;}
.loc-card h3::after{content:''; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--teal);}
.loc-card .loc-kind{font-weight:700; font-size:14px; margin-bottom:10px;}
.loc-card .loc-address{color:var(--gray-600); margin-bottom:14px;}
.loc-card .loc-contact-heading{font-weight:700; font-size:14px; margin-bottom:6px;}
.loc-card p{margin:0 0 4px;}

/* ---------- Page header (inner pages) ---------- */
.page-header{
  position:relative; background:linear-gradient(rgba(12,31,56,.55), rgba(12,31,56,.65)), var(--navy-dark);
  background-size:cover; background-position:center;
  color:var(--white); min-height:480px;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:60px 0 50px; text-align:left;
}
.page-header .container{width:100%;}
.page-header h1{color:var(--white); font-size:36px; font-weight:800; margin-bottom:8px; text-align:left;}
.breadcrumb{font-size:12px; font-weight:600; letter-spacing:.5px; text-transform:uppercase; color:var(--white); text-align:left;}
.breadcrumb a{color:var(--teal);}

/* ---------- Top bar (inner pages only, not the transparent homepage hero) ---------- */
.topbar{
  background:var(--teal); color:var(--white); font-size:13px; padding:9px 0;
}
.topbar .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; align-items:center;}
.topbar a{color:var(--white);}
.topbar a:hover{text-decoration:underline;}
.topbar .topbar-item{margin-right:22px;}
.topbar .topbar-item strong{font-weight:700; margin-right:4px;}
/* ---------- Products page ---------- */
.category-block{padding:50px 0; position:relative; z-index:1;}
.cat-head-v2{
  display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  border-left:3px solid var(--teal); padding-left:16px; margin-bottom:14px;
}
.cat-num-v2{color:var(--teal); font-weight:700; font-size:14px; display:block;}
.cat-head-v2 h3{font-size:20px; margin:0;}
.cat-desc{color:var(--gray-600); max-width:900px; margin-bottom:26px;}
.product-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.product-grid .p-item{border-radius:8px; overflow:hidden; box-shadow:0 10px 26px rgba(12,31,56,.08); aspect-ratio:1/1;}
.product-grid .p-item img{width:100%; height:100%; object-fit:cover; display:block;}
.product-grid .p-item{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); aspect-ratio:1/1;}
.product-grid .p-item img{width:100%; height:100%; object-fit:cover;}

/* ---------- Brands page grid ---------- */
.brands-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:20px; position:relative; z-index:1;}
.brands-grid .logo-box{
  background:var(--white); border:1px solid var(--gray-300); border-radius:var(--radius);
  padding:22px; display:flex; align-items:center; justify-content:center; height:130px; overflow:hidden;
  transition:.2s ease;
}
.brands-grid .logo-box img{max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;}
.brands-grid .logo-box:hover{box-shadow:0 10px 26px rgba(12,31,56,.1); transform:translateY(-3px);}
.brands-intro-grid{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.6fr; gap:50px; align-items:start; margin-bottom:40px;}

/* ---------- Brands filter bar ---------- */
.brand-filter-bar{
  position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; margin-bottom:26px; padding-bottom:22px; border-bottom:1px solid var(--gray-300);
}
.brand-filter-pills{display:flex; flex-wrap:wrap; gap:10px;}
.brand-filter-pill{
  font-family:var(--font-head); font-weight:700; font-size:13px; letter-spacing:.3px;
  background:var(--white); color:var(--text-dark); border:1px solid var(--gray-300); border-radius:999px;
  padding:9px 20px; cursor:pointer; transition:.2s ease;
}
.brand-filter-pill:hover{border-color:var(--gold); color:var(--gold);}
.brand-filter-pill.active{background:var(--gold); border-color:var(--gold); color:var(--white);}
.brand-filter-search{
  position:relative; display:flex; align-items:center; background:var(--white); border:1px solid var(--gray-300);
  border-radius:999px; padding:0 16px; height:44px; min-width:220px;
}
.brand-filter-search svg{flex-shrink:0; color:var(--gray-600); margin-right:8px;}
.brand-filter-search input{
  border:none; outline:none; background:transparent; font-family:var(--font-body); font-size:14px;
  width:100%; color:var(--text-dark);
}
.brand-filter-empty{color:var(--gray-600); font-style:italic;}
@media (max-width:600px){
  .brand-filter-bar{flex-direction:column; align-items:stretch;}
  .brand-filter-search{min-width:0;}
}

.service-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:20px;}
.service-card{border:1px solid var(--gray-300); border-radius:var(--radius); padding:26px; text-align:center;}

/* ---------- Service cards v2 (plain image + small dark icon badge, used on brands.php) ---------- */
.service-cards-v2{display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:30px;}
.sc-card{display:block; text-align:center;}
.sc-image-wrap{position:relative; margin-bottom:30px;}
.sc-image-wrap img{width:100%; height:230px; object-fit:cover; display:block;}
.sc-icon{
  position:absolute; left:50%; bottom:0; transform:translate(-50%, 50%);
  width:38px; height:38px; border-radius:50%;
  background:#1c2430; color:var(--white); display:flex; align-items:center; justify-content:center;
}
.sc-card h4{font-size:19px; margin-bottom:6px; color:var(--navy-dark);}
.sc-card .sc-link-text{color:var(--teal); font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.4px;}

/* ---------- Fading banner slider (bottom of Brands page) ---------- */
.banner-fade-section{padding:0;}
.banner-fade-track{position:relative; width:100%; height:780px; overflow:hidden;}
.banner-slide{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:0; transition:opacity 1.2s ease; display:block;
}
.banner-slide.active{opacity:1; z-index:1;}
.service-card h5{color:var(--gray-600); font-weight:500; font-size:13px; text-transform:uppercase; margin-bottom:6px;}

/* ---------- About page ---------- */
.strategy-list li{margin-bottom:14px; padding-left:20px; position:relative; color:var(--gray-600);}
.strategy-list li::before{content:'•'; color:var(--gold); position:absolute; left:0; font-size:20px; line-height:1;}
.core-values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.core-value-card{background:var(--off-white); border-radius:var(--radius); padding:24px; border-left:3px solid var(--gold);}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}

/* ---------- Gallery lightbox ---------- */
.lightbox-overlay{
  position:fixed; inset:0; z-index:2000; background:rgba(8,14,24,.94);
  display:none; align-items:center; justify-content:center; padding:40px;
}
.lightbox-overlay.open{display:flex;}
.lightbox-img{max-width:90vw; max-height:85vh; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lightbox-close{
  position:absolute; top:22px; right:28px; background:none; border:none; color:var(--white);
  font-size:34px; line-height:1; cursor:pointer; opacity:.8;
}
.lightbox-close:hover{opacity:1;}
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.1); border:none;
  color:var(--white); width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:.2s ease;
}
.lightbox-arrow:hover{background:rgba(255,255,255,.22);}
.lightbox-arrow.prev{left:24px;}
.lightbox-arrow.next{right:24px;}
.lightbox-counter{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  color:rgba(255,255,255,.75); font-size:13px; letter-spacing:.5px;
}
@media (max-width:768px){
  .lightbox-arrow{width:42px; height:42px;}
  .lightbox-overlay{padding:20px;}
}
.au-subsection-heading{color:var(--teal); font-size:14px; font-weight:800; text-transform:uppercase; letter-spacing:1px; margin:50px 0 20px;}
.gallery-video-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.gallery-video-grid video{width:100%; aspect-ratio:16/9; border-radius:var(--radius); background:#000; display:block;}
.gallery-grid a{border-radius:var(--radius); overflow:hidden; aspect-ratio:1/1; display:block;}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:.3s;}
.gallery-grid a:hover img{transform:scale(1.06);}

/* ---------- FAQs (masonry toggle cards) ---------- */
.faq-heading-block{text-align:center; max-width:720px; margin:0 auto 50px;}
.faq-eyebrow{display:block; color:var(--teal); font-weight:700; font-size:15px; margin-bottom:10px;}
.faq-title{font-size:38px; font-weight:800; color:var(--text-dark); margin-bottom:16px;}
.faq-lead{color:var(--gray-600); font-size:16px; line-height:1.6;}
.faq-cards{columns:2; column-gap:24px; max-width:1000px; margin:0 auto;}
.faq-card{
  break-inside:avoid; margin-bottom:24px; background:var(--white); border-radius:10px;
  box-shadow:0 10px 30px rgba(12,31,56,.08); overflow:hidden;
}
.faq-card-header{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 24px; cursor:pointer;}
.faq-question{font-weight:700; color:var(--teal); font-size:17px;}
.faq-toggle-btn{
  flex-shrink:0; width:36px; height:36px; border-radius:8px; border:1.5px solid var(--teal);
  background:transparent; color:var(--teal); display:flex; align-items:center; justify-content:center;
  transition:.2s ease; pointer-events:none;
}
.faq-card.open .faq-toggle-btn{background:var(--teal); color:var(--white); border-color:var(--teal);}
.faq-card-body{max-height:0; overflow:hidden; transition:max-height .3s ease;}
.faq-card-body p{color:var(--gray-600); font-size:15px; padding:0 24px 22px; margin:0;}
.faq-card.open .faq-card-body{max-height:400px;}

/* ---------- Contact page ---------- */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.contact-info-card{margin-bottom:22px;}
.contact-info-card strong{display:block; margin-bottom:4px;}
.services-strip{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; background:var(--off-white); padding:50px 0;}

/* ---------- Blog ---------- */
.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.blog-card{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:.2s ease;}
.blog-card:hover{box-shadow:0 15px 40px rgba(12,31,56,.14); transform:translateY(-3px);}
.blog-card-image{display:block; overflow:hidden;}
.blog-card-image img{height:200px; object-fit:cover; width:100%; display:block; transition:.3s ease;}
.blog-card-image:hover img{transform:scale(1.04);}
.blog-card .content{padding:22px;}
.blog-card .meta{font-size:12px; color:var(--gray-600); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px;}
.blog-card h3{font-size:19px;}
.blog-card-title{color:var(--navy-dark);}
.blog-card-title:hover{color:var(--gold);}
.blog-card a.readmore{color:var(--gold); font-weight:700; font-size:13px; text-transform:uppercase;}
.blog-single .featured{border-radius:var(--radius); overflow:hidden; margin-bottom:30px;}
.blog-single .meta{color:var(--gray-600); font-size:14px; margin-bottom:20px;}
.blog-single .content{font-size:16px; line-height:1.8;}
.blog-single .content p{margin-bottom:1.2em;}

/* ---------- Footer ---------- */
footer.site-footer{
  position:relative; background-color:#f4f5f4; color:var(--text-dark); overflow:hidden;
}
footer.site-footer::before{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:radial-gradient(rgba(12,31,56,.14) 1.5px, transparent 1.5px);
  background-size:16px 16px;
}
footer.site-footer[style*="background-image"]::before{display:none;}
footer.site-footer .footer-grid{position:relative; z-index:1; padding-top:50px;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; padding-bottom:40px;}
.footer-grid h4{
  color:var(--text-dark); font-size:16px; margin-bottom:20px;
  padding-bottom:10px; border-bottom:2px solid var(--teal); display:inline-block;
}
.footer-grid ul li{margin-bottom:10px;}
.footer-grid a{color:var(--gray-600);}
.footer-grid a:hover{color:var(--teal);}
.footer-logo img{height:50px; margin-bottom:16px;}
.footer-grid > div:first-child p{color:var(--gray-600);}
.footer-complaints{
  margin-top:18px; font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:var(--gray-600);
}
.footer-complaints a{color:var(--teal); font-weight:700; text-decoration:underline;}
.footer-bottom-bar{background:var(--navy-dark); position:relative; z-index:1;}
.footer-bottom{
  padding:20px 0; display:flex; justify-content:space-between; font-size:13px; flex-wrap:wrap; gap:10px; color:var(--gray-300);
}
.footer-bottom a{color:var(--gray-300);}
.footer-bottom a:hover{color:var(--gold);}

/* ---------- WhatsApp floating button ---------- */
.whatsapp-float{
  position:fixed; bottom:26px; left:26px; z-index:999; background:#25D366;
  width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.25); font-size:28px; color:var(--white);
}

/* ---------- Back to top button ---------- */
.back-to-top{
  position:fixed; bottom:26px; right:26px; z-index:999;
  width:50px; height:50px; border-radius:50%; background:var(--white); border:2px solid var(--teal);
  color:var(--teal); display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.15); transition:.2s ease;
}
.back-to-top:hover{background:var(--teal); color:var(--white);}

/* ---------- Responsive ---------- */
@media (max-width: 992px){
  .footer-grid{grid-template-columns:1fr 1fr;}
  .testi-grid, .core-values-grid, .service-cards, .loc-grid, .brands-grid, .brand-logos{grid-template-columns:repeat(2,1fr);}
  .brands-intro-grid, .service-cards-v2{grid-template-columns:1fr;}
  .brands-grid{grid-template-columns:repeat(4,1fr);}
  .banner-fade-track{height:520px;}
  .quick-links{grid-template-columns:repeat(2,1fr);}
  .product-grid{grid-template-columns:repeat(3,1fr);}
  .blog-grid{grid-template-columns:repeat(2,1fr);}
  .about-strip .grid, .cs-grid, .contact-grid, .au-grid, .strategy-grid{grid-template-columns:1fr;}
  .cv-grid{grid-template-columns:1fr;}
  .service-icons{display:grid; grid-template-columns:repeat(2,1fr); gap:24px 16px;}
  .au-photo{min-height:340px;}
  .about-photo{min-height:340px;}
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
  .gallery-video-grid{grid-template-columns:repeat(2,1fr);}
  .faq-cards{columns:1;}
  .faq-title{font-size:28px;}
  .bs-grid{grid-template-columns:1fr;}
  .bs-photo{min-height:300px;}
  .bs-content{padding:50px 30px;}
  .testi-row{grid-template-columns:1fr;}
  .testi-photo{height:280px; align-self:auto;}
  .testi-quote-avatar{right:24px; top:auto; bottom:-38px; transform:none;}
  .testi-panel{padding:60px 40px 40px; flex-direction:column; align-items:flex-start;}
  .testi-content{max-width:100%;}
  .testi-customer-photo-wrap{margin-top:30px;}
  .testi-customer-photo{width:150px; height:150px;}
}
@media (max-width: 768px){
  nav.main-nav{position:fixed; top:0; right:-280px; width:280px; height:100vh; background:var(--navy-dark); flex-direction:column; padding:80px 24px; transition:.3s ease; z-index:1100;}
  .nav-close{
    position:absolute; top:20px; right:20px; width:40px; height:40px; border-radius:50%;
    background:rgba(255,255,255,.1); border:none; color:var(--white); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .nav-close:hover{background:rgba(255,255,255,.2);}
  nav.main-nav.open{right:0;}
  nav.main-nav ul{flex-direction:column; gap:6px;}
  nav.main-nav a{color:var(--white); display:block; padding:12px 0;}
  .nav-toggle{display:flex;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px 20px;}
  .footer-grid > div:first-child{grid-column:1 / -1;}
  .hero-content h1{font-size:30px;}
  .testi-grid, .core-values-grid, .service-cards, .brands-grid, .brand-logos, .product-grid, .blog-grid, .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .loc-grid{grid-template-columns:1fr;}
  .banner-fade-track{height:340px;}
  .product-grid{grid-template-columns:repeat(2,1fr);}
  .quick-links{grid-template-columns:1fr;}
  .topbar .container{flex-direction:column; align-items:flex-start; gap:4px;}
  .page-header{min-height:320px; padding:110px 0 60px;}
  .footer-bottom{justify-content:center; text-align:center;}
}