/* ============ TOKENS ============ */
:root{
  --green-deep: #0d3b2e;
  --green-deeper: #082a20;
  --green-vibrant: #1a9f5e;
  --green-bright: #2ec272;
  --cream: #f6f2e4;
  --gold: #d4a017;
  --ink: #0d1f17;
  --white: #ffffff;
  --cola-tint: #8fd6a8;
  --loumi-tint: #d4e857;

  --font-display: 'Baloo 2', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius: 20px;
  --radius-sm: 12px;
  --max-w: 1240px;

  --ease: cubic-bezier(.16,.84,.44,1);

  /* customizer-controlled — overridden by inline CSS from theme_mod values */
  --sku-img-max-height: 600px;
  --dates-img-scale: 95%;
  --dates-img-offset-y: 0px;
  --dates-img-offset-x: 0px;
  --dates-img-rotate: 0deg;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family: var(--font-display); margin:0; line-height:1.05; }

/* ---- Kadence theme override ----
   Kadence adds default borders, backgrounds, and filters to <img> elements
   in some contexts. These rules ensure our custom sections are not affected.
   Scoped to our custom sections so WP content images are untouched. */
/* Kadence global img override - scoped to our sections */
.hero img,
.why-blob img,
.network-logo-item img,
.about-feature-image img,
.sku-detail-hero img {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  outline: none !important;
}

.wrap{ max-width: var(--max-w); margin:0 auto; padding: 0 24px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 16px 30px;
  border-radius: 999px;
  font-weight:700;
  font-size: 15px;
  letter-spacing: .2px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
  border: none;
  cursor:pointer;
}
.btn-primary{
  background: var(--gold);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(212,160,23,.35);
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px rgba(212,160,23,.45); }
.btn-ghost{
  background: rgba(255,255,255,.12);
  color: var(--white) !important;
  border: 1.5px solid rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}
.btn-ghost:hover{ background: var(--gold); color: var(--ink) !important; border-color: var(--gold); transform: translateY(-2px); }
.btn-outline{
  background: transparent;
  color: var(--green-deep);
  border: 2px solid var(--green-deep);
  padding: 13px 28px;
}
.btn-outline:hover{ background: var(--green-deep); color: var(--white); transform: translateY(-2px); }

/* ============ HEADER ============ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: 100;
  padding: 18px 0;
  transition: background .3s var(--ease), padding .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.scrolled{
  background: rgba(13,59,46,.92);
  backdrop-filter: blur(10px);
  padding: 12px 0;
  box-shadow: 0 4px 24px rgba(0,0,0,.15);
}
@media (max-width: 980px){
  .site-header, .site-header.scrolled{
    background: var(--green-deep) !important;
    backdrop-filter: none !important;
  }
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; }
.logo{ display:flex; align-items:center; }
.logo-img{ height: 26px; width:auto; display:block; }
.logo-img--footer{ height: 30px; }
.custom-logo-link{ display:flex; align-items:center; }
.custom-logo-link img{ height: 26px; width:auto; max-width: 220px; object-fit:contain; }
.footer-brand .custom-logo-link img{ height: 30px; }
.footer-brand{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:10px; }
.footer-brand p{ width:100%; margin-top:14px; font-size:13.5px; max-width: 260px; line-height:1.6; }
.main-nav{ display:flex; align-items:center; gap: 32px; }
.main-nav a{ color: rgba(255,255,255,.9); font-weight:600; font-size: 14.5px; transition: color .2s; }
.main-nav a:hover{ color: var(--gold); }
.nav-cta{
  background: var(--gold); color: var(--ink) !important;
  padding: 10px 20px; border-radius: 999px;
}
.nav-cta:hover{ background: var(--white) !important; }
.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding: 8px; }
.nav-toggle span{ width:24px; height:2px; background:var(--white); border-radius:2px; }
.nav-close{
  display:none !important; position:absolute; top:20px; right:20px;
  background:none; border:none; cursor:pointer;
  color:var(--white); font-size:22px; line-height:1;
  padding:8px; z-index:2;
}

/* ============ HERO ============ */
.hero{
  position: relative;
  height: 100svh;
  display:flex; align-items:center;
  overflow:hidden;
  background: var(--green-deeper);
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(8,42,32,.55) 0%, rgba(8,42,32,.45) 40%, rgba(8,42,32,.85) 100%);
}
.hero-content{ position:relative; z-index:2; padding-top: 80px; padding-bottom: 140px; width:100%; max-height: 100%; overflow:hidden; }
.eyebrow{
  display:inline-block;
  color: var(--gold);
  font-weight:700;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform:uppercase;
  background: rgba(212,160,23,.15);
  border: 1px solid rgba(212,160,23,.4);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
  opacity:0; animation: fadeUp .7s var(--ease) .1s forwards;
}
.hero h1{
  color: var(--white);
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 700;
  line-height: 1.08;
  margin-bottom: 18px;
  opacity:0; animation: fadeUp .8s var(--ease) .25s forwards;
}
.hero h1 .accent{ color: var(--gold); }
.hero-sub{
  color: rgba(255,255,255,.88);
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  max-width: 560px;
  margin-bottom: 26px;
  opacity:0; animation: fadeUp .8s var(--ease) .4s forwards;
}
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; opacity:0; animation: fadeUp .8s var(--ease) .55s forwards; }

@keyframes fadeUp{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:translateY(0); } }

/* scroll cue removed */

/* ============ TRUST STRIP ============ */
.trust-strip{
  background: var(--ink);
  padding: 36px 0;
}
.trust-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap: 24px;
}
.trust-item{ text-align:center; }
.trust-num{
  display:block; font-family: var(--font-display); font-size: clamp(1.8rem,3vw,2.6rem);
  font-weight:800; color: var(--gold); line-height:1;
}
.trust-label{
  display:block; margin-top:8px; color: rgba(255,255,255,.75); font-size: 13.5px; line-height:1.4;
}

/* ============ SECTION GENERICS ============ */
.section-eyebrow{
  font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--green-vibrant); margin: 0 0 14px;
}
.section-eyebrow--light{ color: var(--gold); }
.section-title{
  font-size: clamp(1.8rem, 3.4vw, 2.8rem);
  font-weight:700; max-width: 720px; margin: 0 0 20px;
}
.specs .section-title,
.network .section-title,
.skus .section-title{ margin-left:auto; margin-right:auto; }

/* ============ SKUS ============ */
.skus{ padding: 110px 0 60px; background: var(--cream); }
.skus > .wrap{ text-align:center; margin-bottom: 40px; }
.skus .section-title{ margin: 0 auto 0; }

.sku-row{
  display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap: 60px;
  max-width: var(--max-w); margin: 0 auto; padding: 70px 24px;
  position:relative;
}
.sku-row--reverse{ direction: rtl; }
.sku-row--reverse > *{ direction: ltr; }

.sku-visual{
  position:relative; display:flex; justify-content:center; align-items:center;
  min-height: 420px; width: 100%;
}
.sku-img-wrap{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  transform: translateY(30px);
  opacity:0;
  transition: transform 1s var(--ease), opacity 1s var(--ease);
}
.sku-row.in-view .sku-img-wrap{ transform: translateY(0); opacity:1; }
/* customizer-controlled scale — default set via :root in inline CSS */
.sku-img-wrap img{ max-height: var(--sku-img-max-height, 600px); width: auto; max-width: 100%; height: auto; }

.sku-glow{
  position:absolute;
  width: 380px; height: 380px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  z-index:1;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.55;
}
.sku-glow--cola{ background: var(--green-bright); }
.sku-glow--loumi{ background: var(--loumi-tint); }
.sku-glow--up{ background: var(--gold); }
.sku-can-placeholder{
  width: 220px; height: 400px; border-radius: 18px;
  background: repeating-linear-gradient(135deg, #e4ddc4, #e4ddc4 10px, #ece6d2 10px, #ece6d2 20px);
  border: 2px dashed #c9bf9c;
}

.sku-tag{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:1.5px;
  color: var(--white); background: var(--green-vibrant);
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.sku-info h3{ font-size: clamp(1.8rem,3vw,2.6rem); margin-bottom:14px; color: var(--green-deep); }
.sku-info p{ font-size: 16px; line-height:1.65; color: #3a4842; max-width: 460px; margin-bottom: 22px; }
.sku-facts{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; margin-bottom: 28px; max-width: 440px; }
.sku-facts li{ font-size: 14px; color: #51605a; }
.sku-facts strong{ color: var(--ink); }

/* ============ WHY ============ */
.why{ background: var(--green-deep); color: var(--cream); padding: 100px 0; position:relative; overflow:hidden; }
.why-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items:center; }
.why h2{ font-size: clamp(1.8rem,3.4vw,2.6rem); color:var(--white); margin-bottom:20px; max-width:520px; }
.why-copy > p{ font-size:16px; line-height:1.7; color: rgba(246,242,228,.85); max-width: 520px; margin-bottom: 36px; }
.why-points{ display:flex; flex-direction:column; gap:20px; }
.why-point{ display:flex; gap:16px; align-items:flex-start; }
.why-point-num{
  font-family: var(--font-display); font-weight:800; font-size: 18px; color: var(--gold);
  flex-shrink:0; width: 36px; height:36px; border:1.5px solid rgba(212,160,23,.5);
  border-radius:50%; display:flex; align-items:center; justify-content:center;
}
.why-point p{ margin:0; padding-top:6px; font-size:15px; color: rgba(246,242,228,.9); }

.why-visual{ position:relative; height: 420px; display:flex; align-items:center; justify-content:center; }
.why-blob{ display:none; }
.why-ring{ display:none; }

.why-dates{
  display: block !important;
  width: 85%;
  max-width: 360px;
  height: auto;
  margin: 0 auto;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.5));
}

/* ============ SPECS ============ */
.specs{ padding: 100px 0; background: var(--cream); }
.specs .wrap{ text-align:center; }
.specs-sub{ max-width: 560px; margin: 0 auto 40px; color:#51605a; font-size:16px; }
.specs-table-wrap{ overflow-x:auto; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(13,59,46,.08); }
.specs-table{ width:100%; border-collapse:collapse; background: var(--white); min-width: 560px; text-align:left; }
.specs-table th, .specs-table td{ padding: 16px 22px; font-size: 14.5px; border-bottom: 1px solid #eee6d4; }
.specs-table thead th{
  background: var(--green-deep); color: var(--white); font-weight:700;
  font-size: 13px; letter-spacing:.5px; text-transform:uppercase;
}
.specs-table thead th:first-child{ border-top-left-radius: var(--radius); }
.specs-table thead th:last-child{ border-top-right-radius: var(--radius); }
.specs-table tbody td:first-child{ font-weight:600; color: var(--ink); }
.specs-table tbody tr:last-child td{ border-bottom:none; }
.specs-table tbody tr:hover{ background: #faf8f0; }
.specs-note{ margin-top: 24px; font-size: 14px; color:#7a8a83; }

/* ============ NETWORK ============ */
.network{ padding: 100px 0; background: #f0f2e6 !important; color: var(--ink); text-align:center; }
.network .section-title{ color: var(--green-deep) !important; margin: 0 auto 16px; }
.network-sub{ max-width: 640px; margin: 0 auto 50px; color: #51605a; font-size:16px; line-height:1.6; }
.network-marquee{ overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.network-logo-grid{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap: 40px 60px; max-width: 960px; margin: 0 auto;
}
.network-logo-item{
  display:flex; align-items:center; justify-content:center;
  /* no background, no box, no card — logos sit directly on section bg */
}
.network-logo-item img{
  max-height: 60px; max-width: 160px; width:auto; height:auto; object-fit:contain;
  display:block;
}
.network-track{ display:flex; gap: 50px; width:max-content; animation: marquee 26s linear infinite; }
.network-track span{
  font-family: var(--font-display); font-weight:600; font-size: clamp(1.2rem,2.2vw,1.7rem);
  color: rgba(13,59,46,.35); white-space:nowrap;
}
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
.network-footnote{ margin-top: 40px; font-size:13.5px; color: rgba(13,59,46,.55); }

/* ============ ENQUIRE ============ */
.enquire{ padding: 100px 0; background: linear-gradient(160deg, var(--green-vibrant), var(--green-deep)); color:var(--white); }
.enquire-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:50px; align-items:center; }
.enquire-copy h2{ font-size: clamp(1.8rem,3.4vw,2.6rem); color:var(--white); margin-bottom:16px; }
.enquire-copy p{ color: rgba(255,255,255,.85); font-size:16px; max-width:420px; }
.enquire-actions{ display:flex; flex-direction:column; gap:16px; }
.enquire-card{
  display:flex; align-items:center; gap:18px;
  background: rgba(255,255,255,.1); border:1.5px solid rgba(255,255,255,.25);
  border-radius: var(--radius-sm); padding: 20px 24px;
  backdrop-filter: blur(6px);
  transition: transform .25s var(--ease), background .25s var(--ease);
}
.enquire-card:hover{ transform: translateY(-3px); background: rgba(255,255,255,.18); }
.enquire-card-icon{
  width:46px; height:46px; border-radius:50%; background: var(--gold); color:var(--ink);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.enquire-card-icon svg{ display:block; }
.enquire-card--whatsapp .enquire-card-icon{ background:#25D366; color:#fff; }
.enquire-card-text{ display:flex; flex-direction:column; gap:2px; }
.enquire-card-text strong{ font-size:16px; }
.enquire-card-text span{ font-size:13.5px; color: rgba(255,255,255,.75); }

/* ============ FOOTER ============ */
.site-footer{ background: var(--green-deeper); color: rgba(255,255,255,.7); padding: 60px 0 30px; }
.footer-grid{ display:grid; grid-template-columns: 1.2fr 1fr 1.3fr; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,.1); margin-bottom:24px; }
.footer-brand p{ margin-top:14px; font-size:13.5px; max-width: 260px; line-height:1.6; }
.footer-links{ display:flex; flex-direction:column; gap:12px; }
.footer-links a{ font-size:14px; transition:color .2s; }
.footer-links a:hover{ color: var(--gold); }
.footer-legal p{ font-size: 12.5px; line-height:1.7; margin: 0 0 6px; color: rgba(255,255,255,.5); }
.footer-legal strong{ color: rgba(255,255,255,.8); }

/* ============ FLOAT WHATSAPP ============ */
.float-whatsapp{
  position:fixed; bottom: 24px; right: 24px; z-index:90;
  width: 58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 24px rgba(37,211,102,.45);
  animation: floatPulse 2.4s ease-in-out infinite;
}
.float-whatsapp svg{ display:block; }
@keyframes floatPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }

/* ============ RESPONSIVE ============ */
@media (max-width: 980px){
  .main-nav{
    display:none; position:fixed; top:0; right:0; bottom:0; width: min(78vw,320px);
    background: var(--green-deep) !important; flex-direction:column; align-items:flex-start;
    padding: 80px 32px 32px; gap:24px; box-shadow: -10px 0 40px rgba(0,0,0,.3);
    z-index:99999 !important;
  }
  .main-nav.open{ display:flex !important; }
  .main-nav a{ font-size:17px; color: rgba(255,255,255,.9) !important; }
  .main-nav a:hover{ color: var(--gold) !important; }
  .nav-toggle{ display:flex; position:relative; z-index:100000 !important; }
  .nav-close{ display:block !important; }
  .trust-grid{ grid-template-columns: repeat(2,1fr); gap: 28px 20px; }
  .sku-row, .sku-row--reverse{ grid-template-columns: 1fr; direction:ltr; gap:32px; padding: 40px 24px; text-align:center; }
  .sku-info p{ margin-left:auto; margin-right:auto; }
  .sku-info h3{ font-size: clamp(1.6rem,6vw,2.2rem); }
  .sku-facts{ margin-left:auto; margin-right:auto; text-align:left; grid-template-columns: 1fr !important; max-width: 260px; }
  .sku-tag{ display:inline-block; }
  .why-grid{ grid-template-columns: 1fr; }
  .why-visual{ order:-1; height: 220px; }
  .why-dates{ max-width: 260px; }
  .enquire-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .hero-actions{ flex-direction:column; }
  .btn{ width:100%; justify-content:center; }
  .footer-grid{ grid-template-columns: 1fr; }
  .hero-content{ padding-top: 80px; padding-bottom: 70px; }
  .hero h1{ font-size: 1.85rem; }
  .hero-sub{ font-size: .92rem; margin-bottom: 20px; }
  .eyebrow{ margin-bottom: 14px; }

  /* Ensure all section text has breathing room from edges */
  .trust-strip .wrap,
  .skus .wrap,
  .why .wrap,
  .specs .wrap,
  .network .wrap,
  .enquire .wrap,
  .site-footer .wrap{ padding-left: 20px; padding-right: 20px; }

  /* Trust strip - 1 col on very small screens */
  .trust-grid{ grid-template-columns: 1fr 1fr; gap: 16px; }

  /* Specs table - ensure scrollable */
  .specs-table th, .specs-table td{ padding: 12px 14px; font-size: 13px; }

  /* Network logos - tighter */
  .network-logo-grid{ gap: 24px 32px; }

  /* Footer */
  .footer-links{ flex-direction: row; flex-wrap: wrap; gap: 12px 20px; }
}
@media (max-height: 680px) and (max-width: 560px){
  .hero{ height: auto; min-height: 100svh; }
}