/* ==========================================================================
   Waves International — Tricolor Light Theme Design System
   Colors: Green #1a7a3c | Red #cc2229 | White #ffffff | Charcoal #1a2420
   Fonts: Plus Jakarta Sans (headings) + Inter (body)
   ========================================================================== */

:root{
  /* Brand tokens */
  --green: #1a7a3c;
  --green-dark: #145c2d;
  --green-glow: rgba(26,122,60,.30);

  --blue:#2c2c8d;
  --red: #cc2229;
  --red-dark: #a01c20;
  --red-glow: rgba(204,34,41,.30);

  --white: #ffffff;

  --charcoal: #1a2420;
  --charcoal-soft: #212d27;
  --charcoal-elevated: #263429;

  /* Surface tokens (light theme, charcoal reserved for dark sections/footer/hero) */
  --bg: var(--white);
  --bg-alt: #f4f6f4;
  --bg-elevated: #ffffff;
  --bg-card: #fbfcfb;
  --border: #e2e6e2;
  --border-soft: #ebede9;

  --text: #16211b;
  --text-muted: #5c675f;
  --text-faint: #8a938c;

  --font-head: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 22px;

  --shadow: 0 10px 30px rgba(20,30,24,.10);
  --shadow-lg: 0 20px 60px rgba(20,30,24,.16);

  --container: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  cursor:url("/images/cursor-tyre.svg") 16 16, auto;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:url("/images/cursor-tyre.svg") 16 16, pointer; }
h1,h2,h3,h4,h5{ font-family:var(--font-head); margin:0; color:var(--charcoal); line-height:1.15; }
p{ margin:0; }

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

:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 24px; position:relative; z-index:1; }

/* ---------- Type scale ---------- */
h1, .h1{ font-size:clamp(2.1rem, 4vw, 3.4rem); font-weight:800; letter-spacing:-.02em; }
h2, .h2{ font-size:clamp(1.6rem, 2.6vw, 2.3rem); font-weight:800; letter-spacing:-.01em; }
h3, .h3{ font-size:1.3rem; font-weight:700; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--red); margin-bottom:14px;
}
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--red); display:inline-block; }
.section-para{ color:var(--text-muted); font-size:1.02rem; max-width:640px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px; border-radius:999px; font-weight:700; font-size:.95rem;
  border:1px solid transparent; transition:.25s ease; white-space:nowrap;
  position:relative; overflow:hidden;
}
.btn-primary{ background:var(--blue); color:#fff; box-shadow:0 8px 24px var(--green-glow); }
.btn-primary:hover{ background:var(--green-dark); transform:translateY(-2px); box-shadow:0 12px 30px var(--green-glow); }
.btn-primary:active{ transform:translateY(0); }
.btn-outline{ background:transparent; color:var(--red); border-color:var(--border); }
.btn-outline:hover{ border-color:var(--green); color:var(--green); }
/* On dark/charcoal backgrounds (hero, enquiry band) use the white CTA variant */
.btn-white{ background:var(--white); color:var(--charcoal); }
.btn-white:hover{ background:var(--bg-alt); transform:translateY(-2px); }
.btn-outline-light{ background:transparent; color:var(--white); border-color:rgba(255,255,255,.35); }
.btn-outline-light:hover{ border-color:var(--white); color:var(--white); background:rgba(255,255,255,.08); }
.btn-block{ width:100%; }
.btn-lg{ padding:16px 32px; font-size:1rem; }
.btn-pulse{ animation:btn-pulse 2.4s ease-in-out infinite; }
@keyframes btn-pulse{
  0%, 100%{ box-shadow:0 8px 24px var(--green-glow); }
  50%{ box-shadow:0 8px 34px var(--green-glow), 0 0 0 8px rgba(26,122,60,.10); }
}

/* ---------- Top bar / Header ---------- */
.top-bar{ background:var(--charcoal); border-bottom:1px solid rgba(255,255,255,.08); font-size:.8rem; color:rgba(255,255,255,.65); }
.top-bar-inner{ display:flex; justify-content:space-between; align-items:center; height:38px; }
.top-bar-links a{ color:rgba(255,255,255,.65); transition:.2s; }
.top-bar-links a:hover{ color:var(--white); }
.top-bar .sep{ margin:0 10px; opacity:.4; }

/* Tricolor stripe: echoes the logo waves, sits above the nav */
.tricolor-stripe{ display:flex; width:100%; height:4px; }
.tricolor-stripe span{ flex:1 1 0; }
.tricolor-stripe span:nth-child(1){ background:var(--green); }
.tricolor-stripe span:nth-child(2){ background:var(--white); }
.tricolor-stripe span:nth-child(3){ background:var(--red); }

.site-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--border-soft); }
.site-header-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.site-logo img{ height:38px; width:auto; transition:transform .2s; }
.site-logo:hover img{ transform:scale(1.04) rotate(-2deg); }
.site-nav{ display:flex; align-items:center; gap:30px; }
.site-nav-mobile-head{ display:none; }
.site-nav a{ font-size:.92rem; font-weight:600; color:var(--text-muted); padding:6px 0; position:relative; transition:color .2s; }
.site-nav a:hover, .site-nav a.active{ color:var(--charcoal); }
.site-nav a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--green); border-radius:2px; }
.nav-cta{ padding:10px 20px !important; color:var(--white); }


/* ---------- Site-wide scroll progress bar ---------- */
.scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg, var(--green), var(--red)); z-index:999; transition:width .1s linear; }

/* ---------- Decorative gradient orbs (extra ambient graphics) ---------- */
.orb-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.orb{ position:absolute; border-radius:50%; filter:blur(50px); opacity:.35; animation:orb-drift 18s ease-in-out infinite; }
.orb-green{ background:radial-gradient(circle, var(--green-glow), transparent 70%); }
.orb-red{ background:radial-gradient(circle, var(--red-glow), transparent 70%); }
@keyframes orb-drift{
  0%, 100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(30px,-20px) scale(1.15); }
}

/* Small spinning tyre accent icon (decorative, next to headings) */
.spin-tyre{ display:inline-block; animation:spin-slow 9s linear infinite; transform-origin:center; }
@keyframes spin-slow{ from{ transform:rotate(0deg);} to{ transform:rotate(360deg);} }

/* Animated gradient underline for headings */
.heading-underline{ position:relative; display:inline-block; }
.heading-underline::after{
  content:''; position:absolute; left:0; bottom:-6px; height:4px; width:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--green), var(--red), var(--green)); background-size:200% 100%;
  animation:underline-flow 3s linear infinite;
}
@keyframes underline-flow{ from{ background-position:0% 0;} to{ background-position:200% 0;} }

/* ---------- Stagger helper for grid reveals ---------- */
.reveal[style*="--i"], .reveal-zoom[style*="--i"]{ transition-delay:calc(var(--i, 0) * 90ms); }


/* ---------- Mega menu (TYRES) ---------- */

/* ---------- Decorative blurred tyre backgrounds ---------- */
/* Large, softly blurred tyre silhouettes used as ambient depth behind hero/CTA/dark sections. */
.tyre-blur-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.tyre-blur{
  position:absolute; border-radius:50%;
  background-image:url("/images/tyre-outline.svg");
  background-size:contain; background-repeat:no-repeat;
  filter:blur(18px); opacity:.16;
  animation:tyre-float 16s ease-in-out infinite;
}
.tyre-blur.tb-1{ width:420px; height:420px; top:-120px; left:-100px; animation-duration:20s; }
.tyre-blur.tb-2{ width:300px; height:300px; bottom:-80px; right:-60px; animation-duration:14s; animation-delay:-4s; }
.tyre-blur.tb-3{ width:220px; height:220px; top:40%; right:12%; animation-duration:18s; animation-delay:-8s; opacity:.10; }
.tyre-blur.tb-4{ width:180px; height:180px; bottom:10%; left:8%; animation-duration:13s; animation-delay:-2s; opacity:.12; }
@keyframes tyre-float{
  0%, 100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-26px) rotate(12deg); }
}

/* ---------- Hero Slideshow ---------- */
.hero-slideshow{ position:relative; height:88vh; min-height:560px; overflow:hidden; background:var(--charcoal);z-index:0;  }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.hero-slide.is-active{ opacity:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:kenburns 12s ease-in-out infinite alternate; }
@keyframes kenburns{ from{ transform:scale(1.0);} to{ transform:scale(1.12);} }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,36,32,.55) 0%, rgba(26,36,32,.72) 55%, rgba(26,36,32,.94) 100%); z-index:1; }
.hero-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; max-width:760px; animation:fade-up-in .9s ease both; }
.hero-content .eyebrow{ display:inline-flex; background:var(--white); color:var(--charcoal); padding:8px 16px; border-radius:999px; }
.hero-content .eyebrow::before{ display:none; }
.hero-content h1{ color:#fff; margin-bottom:18px; }
.hero-content p{ color:rgba(255,255,255,.82); font-size:1.1rem; max-width:560px; margin-bottom:32px; }
.hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }
@keyframes fade-up-in{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:translateY(0); }
}

.slide-caption{ position:absolute; right:24px; bottom:70px; z-index:3; background:rgba(26,36,32,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15); color:#fff; padding:8px 16px; border-radius:999px; font-size:.8rem; font-weight:600; }
.hero-progress{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.12); z-index:3; }
.hero-progress-bar{ height:100%; width:0%; background:var(--green); }
.hero-dots{ position:absolute; left:24px; bottom:64px; z-index:3; display:flex; align-items:center; gap:8px; }
.hero-dots button{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35); border:none; padding:0; transition:.2s; }
.hero-dots button.is-active{ background:var(--green); width:22px; border-radius:5px; }
.hero-counter{ position:absolute; left:24px; bottom:88px; z-index:3; color:rgba(255,255,255,.7); font-size:.78rem; font-weight:600; letter-spacing:.05em; }

/* ---------- Sections ---------- */
section{ padding:60px 0; position:relative; }
.section-alt{ background:var(--bg-alt); }
.section-dark{ background:var(--charcoal); position:relative; overflow:hidden; }
.section-head{ margin-bottom:52px; max-width:680px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head-row{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:52px; flex-wrap:wrap; }

/* ---------- Wave divider ----------
   Reusable element to echo the logo waves between any two sections.
   Usage: <div class="wave-divider"></div>  (place directly between sections)
   Add a modifier for the background it sits on: .wave-divider--alt or .wave-divider--charcoal
*/
.wave-divider{
  position:relative;
  width:100%;
  height:64px;
  background:var(--bg);
  overflow:hidden;
}
.wave-divider--alt{ background:var(--bg-alt); }
.wave-divider--charcoal{ background:var(--charcoal); }
.wave-divider::before{
  content:'';
  position:absolute;
  inset:0;
  width:200%;
  background-repeat:repeat-x;
  background-size:600px 64px;
  background-position:center;
  animation:wave-flow 14s linear infinite;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 64' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C75,10 150,10 225,32 C300,54 375,54 450,32 C525,10 570,10 600,24 L600,64 L0,64 Z' fill='%231a7a3c' fill-opacity='0.85'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 64' preserveAspectRatio='none'%3E%3Cpath d='M0,48 C75,20 150,20 225,42 C300,64 375,64 450,42 C525,20 570,20 600,32 L600,64 L0,64 Z' fill='%23ffffff' fill-opacity='0.9'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 64' preserveAspectRatio='none'%3E%3Cpath d='M0,56 C75,30 150,30 225,50 C300,70 375,70 450,50 C525,30 570,30 600,40 L600,64 L0,64 Z' fill='%23cc2229' fill-opacity='0.85'/%3E%3C/svg%3E");
}
@keyframes wave-flow{
  from{ transform:translateX(0); }
  to{ transform:translateX(-600px); }
}

/* ---------- Stats strip ---------- */
.stats-strip{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; margin-top: -60px; position:relative; z-index:5; box-shadow:var(--shadow); }
.stat-item{ background:var(--bg-elevated); padding:32px 24px; text-align:center; transition:.25s; }
.stat-item:hover{ background:var(--white); }
.stat-value{ font-family:var(--font-head); font-size:2.1rem; font-weight:800; color:var(--blue); }
.stat-label{ font-size:.85rem; color:var(--text-muted); margin-top:6px; }

/* ---------- About intro ---------- */

/* ---------- About heading: tyre rolls across, words reveal as it passes ---------- */
.about-heading-stage{
  position:relative;
  padding-top:34px; /* room for the tyre to roll above the heading */
}

.about-roll-tyre{
  position:absolute; top:0; left:0; width:34px; height:34px;
  opacity:0;
  transform:translateX(-40px);
}
.about-roll-tyre svg{ width:100%; height:100%; }
.about-roll-tyre .tyre-spin{ transform-origin:170px 170px; }

.reveal.is-visible .about-roll-tyre{
  animation:tyre-roll-across 1.6s cubic-bezier(.3,.1,.25,1) forwards;
}
.reveal.is-visible .about-roll-tyre .tyre-spin{
  animation:about-tyre-spin 0.5s linear infinite;
  animation-delay: inherit;
}
@keyframes tyre-roll-across{
  0%   { left:0%;   opacity:1; }
  100% { left:calc(100% - 34px); opacity:1; }
}
@keyframes about-tyre-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* Words stay hidden until the tyre has rolled past their position */
.word-reveal{
  display:inline-block;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .5s ease;
}
.reveal.is-visible .word-reveal{ opacity:1; transform:translateY(0); }
.about-intro{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.about-intro-media{ position:relative; }
.about-intro-media.reveal{ transform:none; } /* transform here is owned by scroll-parallax JS, not the generic reveal transition */
.about-intro-media.reveal.is-visible{ transform:none; }
.about-intro-media img{ border-radius:var(--radius-lg); width:100%; aspect-ratio:4/3.4; object-fit:cover; border:1px solid var(--border); display:block; }
.about-badge{ position:absolute; bottom:-24px; left:-24px; background:var(--blue); color:#fff; padding:20px 24px; border-radius:var(--radius); box-shadow:var(--shadow-lg); max-width:230px; animation:badge-bob 4s ease-in-out infinite; }
.about-badge strong{ display:block; font-family:var(--font-head); font-size:1.1rem; }
.about-badge span{ font-size:.82rem; opacity:.9; }

/* ---------- About image: arrives from above and "lands", then a tyre unpacks it diagonally ---------- */
.about-media-inner{ position:relative; border-radius:var(--radius-lg); overflow:hidden; }
.about-media-land{
  transform:translateY(-170px) rotate(-4deg) scale(.93);
  opacity:0;
  transition:opacity .8s ease, transform 1.15s cubic-bezier(.34,1.56,.64,1);
}
.about-intro-media.is-visible .about-media-land{
  opacity:1;
  transform:translateY(0) rotate(0deg) scale(1);
}

/* A soft ground-contact shadow that grows as the image "lands" */
.about-media-inner::after{
  content:''; position:absolute; left:8%; right:8%; bottom:-14px; height:20px; z-index:0;
  background:radial-gradient(ellipse at center, rgba(20,30,24,.28), transparent 70%);
  opacity:0; transform:scaleX(.4); transition:opacity .5s ease .6s, transform .5s ease .6s;
}
.about-intro-media.is-visible .about-media-inner::after{ opacity:1; transform:scaleX(1); }

.about-unpack-cover{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(135deg, var(--charcoal) 0%, #0f1512 55%, var(--charcoal-soft) 100%);
  display:flex; align-items:center; justify-content:center;
  transform:translate(0,0) rotate(0deg);
  opacity:1;
}
.about-intro-media.is-visible .about-unpack-cover{
  animation:about-unpack-slide .95s cubic-bezier(.65,0,.35,1) .62s forwards;
}
@keyframes about-unpack-slide{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  100%{ transform:translate(120%,-120%) rotate(20deg); opacity:0; }
}
.about-unpack-tyre{ width:56px; height:56px; opacity:.96; }
.about-unpack-tyre-spin{ transform-origin:170px 170px; animation:about-unpack-spin .45s linear infinite; }
@keyframes about-unpack-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .about-media-land{ opacity:1 !important; transform:none !important; transition:none !important; }
  .about-unpack-cover{ display:none !important; }
}
.about-intro-body p{ color:var(--text-muted); margin-bottom:16px; }
.link-arrow{ display:inline-flex; align-items:center; gap:8px; color:var(--green); font-weight:700; margin-top:12px; }
.link-arrow svg{ transition:.2s; }
.link-arrow:hover svg{ transform:translateX(4px); }
@keyframes badge-bob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

/* ---------- Industries ---------- */
.industry-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.industry-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:30px 24px; transition:.25s; }
.industry-card:hover{ transform:translateY(-6px); border-color:var(--green); box-shadow:var(--shadow); }
.industry-icon{ font-size:2rem; margin-bottom:16px; display:inline-block; transition:transform .3s; }
.industry-card:hover .industry-icon{ transform:rotate(-8deg) scale(1.1); }
.industry-card h3{ font-size:1.05rem; margin-bottom:8px; }
.industry-card p{ color:var(--text-muted); font-size:.9rem; }

/* ---------- Category tiles ---------- */
.category-tiles{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.category-tile{ position:relative; border-radius:var(--radius-lg); overflow:hidden; min-height:340px; display:flex; align-items:flex-end; border:1px solid var(--border); }
.category-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.category-tile:hover img{ transform:scale(1.06); }
.category-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,36,32,.15) 20%, rgba(26,36,32,.94) 100%); }
.category-tile-body{ position:relative; z-index:2; padding:34px; }
.tile-badge{ display:inline-block; background:var(--red); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:6px 14px; border-radius:999px; margin-bottom:14px; }
.category-tile h2{ color:#fff; font-size:1.5rem; margin-bottom:10px; }
.category-tile p{ color:rgba(255,255,255,.78); font-size:.92rem; max-width:400px; }
.subcategory-tiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px; }
.subcategory-tile{ position:relative; border-radius:var(--radius); overflow:hidden; min-height:180px; display:flex; align-items:flex-end; border:1px solid var(--border); }
.subcategory-tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.subcategory-tile::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,36,32,.1), rgba(26,36,32,.9)); }
.subcategory-tile span{ position:relative; z-index:2; padding:18px; color:#fff; font-weight:700; font-size:.95rem; }
.back-link{ display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-weight:600; font-size:.9rem; margin-bottom:24px; }
.back-link:hover{ color:var(--green); }

/* ---------- Product cards ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }
.product-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:.25s; display:flex; flex-direction:column; }
.product-card:hover{ transform:translateY(-6px); border-color:var(--green); box-shadow:var(--shadow); }
.product-card-media{ position:relative; background:var(--bg-alt); padding:22px; overflow:hidden; }
.product-card-media img{ width:100%; height:150px; object-fit:contain; transition:transform .4s; }
.product-card:hover .product-card-media img{ transform:scale(1.08) rotate(4deg); }
.badge-pill{ position:absolute; top:14px; left:14px; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text-muted); font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; padding:5px 10px; border-radius:999px; }
.badge-load{ position:absolute; top:14px; right:14px; color:var(--green); font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em; }
.product-card-body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:8px; flex:1; }
.product-card-body h2, .product-card-body h3{ font-size:1rem; }
.product-card-body p{ color:var(--text-muted); font-size:.86rem; flex:1; }
.view-spec{ margin-top:10px; color:var(--green); font-weight:700; font-size:.85rem; display:inline-flex; align-items:center; gap:6px; }

/* ---------- Steps ---------- */
.steps-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; counter-reset:step; }
.step-card{ position:relative; padding-top:16px; }
.step-number{ font-family:var(--font-head); font-size:2.6rem; font-weight:800; color:black; -webkit-text-stroke:1.5px var(--border); display:block; margin-bottom:10px; transition:.3s; }
.step-card:hover .step-number{ -webkit-text-stroke-color:var(--green); }
.step-card h3{ font-size:1.05rem; margin-bottom:8px; }
.step-card p{ color:var(--text-muted); font-size:.9rem; }

/* ---------- Strengths / Why Partner ---------- */
.strengths-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.strength-list{ display:flex; flex-direction:column; gap:22px; }
.strength-item{ display:flex; gap:16px; }
.strength-check{ flex:none; width:34px; height:34px; border-radius:50%; background:rgba(26,122,60,.12); color:var(--green); display:flex; align-items:center; justify-content:center; font-weight:800; transition:.25s; }
.strength-item:hover .strength-check{ background:var(--green); color:#fff; transform:scale(1.1); }
.strength-item h3{ font-size:1rem; margin-bottom:4px; }
.strength-item p{ color:var(--text-muted); font-size:.9rem; }
.why-panel{ background:var(--charcoal); border:1px solid var(--charcoal); border-radius:var(--radius-lg); padding:36px; position:relative; overflow:hidden; }
.why-panel h2, .why-panel h3{ color:#fff; }
.why-panel p{ color:rgba(255,255,255,.72); margin-bottom:20px; }

/* ---------- Why choose cards ---------- */
/* ---------- Why choose cards: sizing + icon placement fix ---------- */
.why-choose-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.why-choose-card{
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  min-height:300px;          /* was collapsing too short */
  aspect-ratio:3/4;          /* keeps proportions consistent at any width */
  border:1px solid var(--border);
  display:flex;
  align-items:flex-end;
}
.why-choose-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s;
}
.why-choose-card:hover img{ transform:scale(1.08); }
.why-choose-card::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,36,32,.05) 30%, rgba(26,36,32,.95) 100%);
}

/* icon now sits top-right, clear of the title which lives at the bottom */
.why-choose-icon{
  position:absolute; top:16px; right:16px; z-index:4;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center; color:#fff;
  animation:icon-float 3.6s ease-in-out infinite;
  transition:transform .35s ease, background .35s ease, border-color .35s ease;
}
.why-choose-icon svg{ width:20px; height:20px; }
.why-choose-card:hover .why-choose-icon{
  transform:rotate(-10deg) scale(1.12);
  background:var(--green); border-color:var(--green);
}
@keyframes icon-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

.why-choose-card-body{
  position:relative; z-index:2; padding:22px;
}
.why-choose-card-body h3{ color:#fff; font-size:1rem; margin-bottom:6px; }
.why-choose-card-body p{ color:rgba(255,255,255,.75); font-size:.84rem; }
.why-choose-card-body::before{
  content:''; position:absolute; left:22px; bottom:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--green), var(--white) 50%, var(--red));
  border-radius:2px; transition:width .45s ease;
}
.why-choose-card:hover .why-choose-card-body::before{ width:calc(100% - 44px); }

.why-choose-card::before{
  content:''; position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0;
  background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  background-size:220% 220%; background-position:120% 0;
}
.why-choose-card:hover::before{ opacity:1; animation:shine-sweep 1s ease forwards; }
@keyframes shine-sweep{ from{ background-position:120% 0; } to{ background-position:-20% 0; } }

/* ---------- Responsive steps ---------- */
@media (max-width:1080px){
  .why-choose-grid{ grid-template-columns:repeat(2, 1fr); }
  .why-choose-card{ aspect-ratio:4/3.4; min-height:260px; }
}
@media (max-width:640px){
  .why-choose-grid{ grid-template-columns:1fr; gap:16px; }
  .why-choose-card{ aspect-ratio:16/11; min-height:220px; }
}

/* ---------- Gallery ---------- */
.gallery-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.gallery-grid.preview{ grid-template-columns:repeat(6, 1fr); }
.gallery-item{ border-radius:var(--radius-sm); overflow:hidden; border:1px solid var(--border); aspect-ratio:1/1; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:.3s; }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-group{ margin-bottom:60px; }
.gallery-group-head{ margin-bottom:22px; }
.gallery-group-head h3{ font-size:1.2rem; margin-bottom:4px; }
.gallery-group-head p{ color:var(--text-muted); font-size:.9rem; }

/* ---------- Clients ---------- */
.client-tags{ display:flex; flex-wrap:wrap; gap:12px; }
.client-tag{ background:var(--bg-card); border:1px solid var(--border); padding:12px 20px; border-radius:999px; font-size:.88rem; font-weight:600; color:var(--text-muted); transition:.2s; }
.client-tag:hover{ border-color:var(--green); color:var(--green); transform:translateY(-2px); }
.partner-marquee{ overflow:hidden; margin-top:50px; border-top:2px solid var(--green); border-bottom:2px solid var(--red); padding:28px 0; }
.marquee-track{ display:flex; gap:70px; width:max-content; animation:scroll 28s linear infinite; align-items:center; }
.marquee-track img{ height:34px; width:auto; opacity:.6; filter:grayscale(1); transition:.2s; }
.marquee-track img:hover{ opacity:1; filter:grayscale(0); }
@keyframes scroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- Testimonials slider ---------- */
.testimonial-slider{ position:relative; max-width:760px; margin:0 auto; }
.testimonial-track{ position:relative; min-height:230px; }
.testimonial-slide{
  position:absolute; inset:0; opacity:0; transform:translateX(24px); pointer-events:none;
  transition:opacity .5s ease, transform .5s ease;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:36px;
}
.testimonial-slide.is-active{ opacity:1; transform:translateX(0); pointer-events:auto; position:relative; }
.testimonial-quote{ font-size:1.08rem; color:var(--text); margin-bottom:20px; }
.testimonial-quote::before{ content:'\201C'; color:var(--red); font-size:2rem; font-family:var(--font-head); margin-right:4px; }
.testimonial-author{ font-weight:700; color:var(--text-muted); font-size:.88rem; }
.stars{ color:var(--red); }
.testimonial-dots{ display:flex; justify-content:center; gap:8px; margin-top:24px; }
.testimonial-dots button{ width:9px; height:9px; border-radius:50%; background:var(--border); border:none; padding:0; transition:.2s; }
.testimonial-dots button.is-active{ background:var(--green); width:24px; border-radius:5px; }
.testimonial-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%;
  background:var(--bg-elevated); border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
  color:var(--text); transition:.2s;
}
.testimonial-arrow:hover{ background:var(--green); color:#fff; border-color:var(--green); }
.testimonial-arrow.prev{ left:-56px; }
.testimonial-arrow.next{ right:-56px; }
/* Legacy grid fallback (kept in case a page still uses the plain grid) */
.testimonial-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:24px; }
.testimonial-card{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:32px; }

/* ---------- Enquiry CTA band ---------- */
.enquiry-band{ background:linear-gradient(135deg, var(--charcoal), var(--charcoal-soft) 60%, #0f1512); border:1px solid var(--charcoal); border-radius:var(--radius-lg); padding:56px; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap; position:relative; overflow:hidden; }
.enquiry-band h2{ color:#fff; margin-bottom:10px; }
.enquiry-band p{ color:rgba(255,255,255,.72); }

/* ---------- Team ---------- */
.team-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.team-card{ text-align:center; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:32px 24px; transition:.25s; }
.team-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:var(--green); }
.team-avatar{ width:90px; height:90px; border-radius:50%; object-fit:cover; margin:0 auto 18px; border:2px solid var(--border); transition:.25s; }
.team-card:hover .team-avatar{ border-color:var(--green); }
.team-card h3{ font-size:1.05rem; }
.team-role{ color:var(--red); font-size:.82rem; font-weight:700; margin:4px 0 12px; }
.team-card p{ color:var(--text-muted); font-size:.86rem; }

/*  backgound iamges ke liye  */

.bg-cover-photo{
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
/* ---------- Page hero (inner pages) ---------- */
.page-hero{ padding:150px 0 70px; background:var(--charcoal); border-bottom:1px solid var(--charcoal); position:relative; overflow:hidden; }
.page-hero::before{ content:''; position:absolute; top:-120px; right:-120px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, var(--green-glow), transparent 70%); z-index:1; }
.page-hero-photo{
  position:absolute; inset:-30px; background-size:cover; background-position:center;
  opacity:.34; filter:blur(1px) brightness(.7) saturate(1.15) contrast(1.05);
  transform:scale(1.03);
  animation:hero-photo-drift 22s ease-in-out infinite alternate;
}
@keyframes hero-photo-drift{
  from{ transform:scale(1.03) translateX(0); }
  to{ transform:scale(1.08) translateX(-12px); }
}
.page-hero::after{
  content:''; position:absolute; inset:0; z-index:0;
  /* background:linear-gradient(115deg, rgba(26,36,32,.97) 20%, rgba(26,36,32,.75) 55%, rgba(26,36,32,.94) 100%); */
  /* background:linear-gradient(115deg, rgb(40 88 69 / 97%) 20%, rgb(40 48 45 / 75%) 55%, rgb(43 64 56 / 94%) 100%); */
  background: linear-gradient(115deg, rgb(41 40 88 / 97%) 20%, rgb(41 40 48 / 75%) 55%, rgb(43 48 64 / 94%) 100%);
}
.page-hero .container{ position:relative; z-index:2; }
.page-hero .eyebrow{ color:var(--white); }
.page-hero .eyebrow::before{ background:var(--white); }
.page-hero h1{ color:#fff; margin-bottom:14px; max-width:760px; }
.page-hero p{ color:rgba(255,255,255,.72); max-width:600px; font-size:1.05rem; }

/* ---------- Product detail ---------- */
.product-hero{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.product-hero-media{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px; }
.product-hero-media img{ width:100%; height:auto; object-fit:contain; max-height:420px; margin:0 auto; }
.product-hero-body .category-label{ color:var(--text-muted); font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-bottom:12px; display:block; }
.product-hero-body h1{ margin-bottom:16px; }
.product-hero-body p{ color:var(--text-muted); margin-bottom:28px; }

.spec-table{ width:100%; border-collapse:collapse; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
.spec-table tr{ border-bottom:1px solid var(--border-soft); }
.spec-table tr:last-child{ border-bottom:none; }
.spec-table th, .spec-table td{ text-align:left; padding:16px 24px; font-size:.92rem; }
.spec-table th{ color:var(--text-muted); font-weight:600; width:220px; }
.spec-table td{ color:var(--text); font-weight:600; }

/* ---------- Contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; }
.contact-card{ background:var(--charcoal); border:1px solid var(--charcoal); border-radius:var(--radius-lg); padding:40px; height:fit-content; }
.contact-card h2{ color:#fff; margin-bottom:20px; }
.contact-card .name{ color:#fff; font-weight:700; margin-bottom:18px; }
.contact-line{ display:flex; gap:12px; align-items:flex-start; margin-bottom:16px; color:rgba(255,255,255,.68); font-size:.92rem; }
.contact-line svg{ flex:none; color:var(--green); margin-top:2px; }
.contact-form{ background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:40px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:.85rem; font-weight:600; color:var(--text-muted); margin-bottom:8px; }
.form-group input, .form-group textarea{
  width:100%; background:var(--bg-elevated); border:1px solid var(--border); color:var(--text);
  padding:13px 16px; border-radius:var(--radius-sm); font-family:inherit; font-size:.94rem; transition:.2s;
}
.form-group input:focus, .form-group textarea:focus{ border-color:var(--green); outline:none; box-shadow:0 0 0 3px rgba(26,122,60,.12); }
.map-wrap{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); margin-top:20px; }
.map-wrap iframe{ width:100%; height:400px; border:0; display:block; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--charcoal); border-top:none; padding-top:0; position:relative; overflow:hidden; }
.site-footer .footer-inner{ padding-top:70px; position:relative; z-index:1; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:50px; }
.footer-logo{ height:34px; margin-bottom:16px; }
.footer-col p{ color:rgba(255,255,255,.62); font-size:.9rem; }
.footer-col h4{ color:#fff; font-size:.9rem; margin-bottom:18px; text-transform:uppercase; letter-spacing:.05em; }
.footer-col a, .footer-col li{ color:rgba(255,255,255,.62); font-size:.9rem; margin-bottom:10px; display:block; transition:.2s; }
.footer-col a:hover{ color:var(--green); transform:translateX(3px); }
.social-icons{ display:flex; gap:10px; margin-top:18px; }
.social-icons a{ width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.7); transition:.2s; }
.social-icons a:hover{ background:var(--green); color:#fff; border-color:var(--green); transform:translateY(-3px); }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.08); padding:22px 0; position:relative; z-index:1; }
.footer-bottom-inner{ display:flex; justify-content:space-between; color:rgba(255,255,255,.45); font-size:.82rem; flex-wrap:wrap; gap:8px; }
.footer-legal-links{ display:flex; gap:18px; flex-wrap:wrap; }
.footer-legal-links a{ color:rgba(255,255,255,.55); transition:.2s; }
.footer-legal-links a:hover{ color:var(--green); }

.whatsapp-float, .whatsapp-fab{
  position:fixed; right:22px; bottom:22px; z-index:200; width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(0,0,0,.3);
  transition:.2s; animation:wa-bounce 3s ease-in-out infinite;
}
.whatsapp-float:hover, .whatsapp-fab:hover{ transform:scale(1.1); animation-play-state:paused; }
@keyframes wa-bounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }
.reveal-zoom{ opacity:0; transform:scale(.94); transition:opacity .6s ease, transform .6s ease; }
.reveal-zoom.is-visible{ opacity:1; transform:scale(1); }
.reveal-left{ opacity:0; transform:translateX(-32px); transition:opacity .6s ease, transform .6s ease; }
.reveal-left.is-visible{ opacity:1; transform:translateX(0); }
.reveal-right{ opacity:0; transform:translateX(32px); transition:opacity .6s ease, transform .6s ease; }
.reveal-right.is-visible{ opacity:1; transform:translateX(0); }

/* Stagger helper: add data-stagger to a container's children via JS, or use nth-child manually */
.stagger > *{ transition-delay:calc(var(--i, 0) * 80ms); }

/* ---------- Product carousel (featured products slider) ---------- */
.product-carousel-wrap{ position:relative; }
.product-carousel{
  display:flex; gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding-bottom:8px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.product-carousel::-webkit-scrollbar{ display:none; }
.product-carousel .product-card{ flex:0 0 280px; scroll-snap-align:start; }
.carousel-arrow{
  position:absolute; top:40%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%;
  background:var(--white); border:1px solid var(--border); box-shadow:var(--shadow); display:flex;
  align-items:center; justify-content:center; color:var(--charcoal); z-index:10; transition:.2s;
}
.carousel-arrow:hover{ background:var(--green); color:#fff; border-color:var(--green); }
.carousel-arrow.prev{ left:-22px; }
.carousel-arrow.next{ right:-22px; }

/* Second marquee row scrolling the opposite direction, for visual richness */
.marquee-track.reverse{ animation-direction:reverse; }

/* ---------- Gallery lightbox slider ---------- */
.lightbox-overlay{
  position:fixed; inset:0; background:rgba(15,20,17,.92); z-index:500; display:none;
  align-items:center; justify-content:center; padding:40px; animation:fade-in .25s ease;
}
.lightbox-overlay.is-open{ display:flex; }
@keyframes fade-in{ from{ opacity:0;} to{ opacity:1;} }
.lightbox-figure{ max-width:900px; max-height:80vh; text-align:center; }
.lightbox-figure img{ max-width:100%; max-height:75vh; border-radius:var(--radius); margin:0 auto; box-shadow:var(--shadow-lg); }
.lightbox-caption{ color:rgba(255,255,255,.75); font-size:.9rem; margin-top:16px; }
.lightbox-close{
  position:absolute; top:24px; right:28px; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.lightbox-close:hover{ background:var(--red); border-color:var(--red); }
.lightbox-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.lightbox-arrow:hover{ background:var(--green); border-color:var(--green); }
.lightbox-arrow.prev{ left:24px; }
.lightbox-arrow.next{ right:24px; }
.gallery-item{ cursor:url("/images/cursor-tyre.svg") 16 16, zoom-in; }

/* ---------- HD photo backgrounds (blurred, per-section) ---------- */
.has-photo-bg{ position:relative; overflow:hidden; }
.section-photo-bg{
  position:absolute; inset:-30px; background-size:cover; background-position:center;
  filter:blur(14px); z-index:0; transform:scale(1.05);
}
.section-photo-bg.tint-light{ opacity:.3; }
.section-photo-bg.tint-alt{ opacity:.20; }
.section-photo-bg.tint-dark{ opacity:.30; filter:blur(14px) brightness(.55); }
.has-photo-bg > .container{ position:relative; z-index:1; }

/* ---------- Legal / policy page content (rendered HTML) ---------- */
.legal-content{ max-width:820px; color:var(--text); }
.legal-content h2{ font-size:1.35rem; margin-top:36px; margin-bottom:14px; }
.legal-content h2:first-child{ margin-top:0; }
.legal-content h3{ font-size:1.1rem; margin-top:26px; margin-bottom:10px; }
.legal-content p{ color:var(--text-muted); margin-bottom:16px; line-height:1.75; }
.legal-content ul, .legal-content ol{ margin:0 0 16px 22px; color:var(--text-muted); list-style:disc; }
.legal-content ol{ list-style:decimal; }
.legal-content li{ margin-bottom:8px; line-height:1.7; }
.legal-content a{ color:var(--green); text-decoration:underline; }
.legal-content strong{ color:var(--text); }

/* ---------- Industries: rolling tyre travels below the cards ---------- */
.industry-grid-wrap{
  position:relative;
  padding-bottom:64px;
}

.industry-track-line{
  position:absolute; bottom:26px; left:0; right:0; height:2px;
  background:repeating-linear-gradient(90deg, var(--border) 0 14px, transparent 14px 26px);
}

.rolling-tyre{
  position:absolute; bottom:6px; left:0; width:52px; height:52px; z-index:5;
  animation:tyre-travel 7s linear infinite;
}
.rolling-tyre svg{ width:100%; height:100%; }
.rolling-tyre .tyre-spin{
  transform-origin:170px 170px;
  animation:tyre-spin 0.6s linear infinite;
}
@keyframes tyre-travel{
  0%   { left:0%; }
  100% { left:calc(100% - 52px); }
}
@keyframes tyre-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* ---------- Card + icon highlight loop (this is what was missing) ---------- */
.industry-card{
  position:relative;
  transition:.3s ease;
  animation:card-lit 7s ease-in-out infinite;
}
.industry-icon{
  width:64px; height:64px; border-radius:50%;
  background:var(--bg-card); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem;
  margin-bottom:18px;
  transition:.35s ease;
  animation:icon-lit 7s ease-in-out infinite;
}

@keyframes card-lit{
  0%, 100%{ transform:translateY(0); border-color:var(--border); box-shadow:none; }
  50%{ transform:translateY(-8px); border-color:var(--green); box-shadow:var(--shadow-lg); }
}
@keyframes icon-lit{
  0%, 100%{ background:var(--bg-card); border-color:var(--border); transform:rotate(0deg) scale(1); }
  50%{ background:var(--green); border-color:var(--green); transform:rotate(-8deg) scale(1.08); }
}

/* Stagger each card so its highlight peaks as the tyre passes under it */
.industry-card:nth-child(1), .industry-card:nth-child(1) .industry-icon{ animation-delay:0s; }
.industry-card:nth-child(2), .industry-card:nth-child(2) .industry-icon{ animation-delay:1.75s; }
.industry-card:nth-child(3), .industry-card:nth-child(3) .industry-icon{ animation-delay:3.5s; }
.industry-card:nth-child(4), .industry-card:nth-child(4) .industry-icon{ animation-delay:5.25s; }

/* Hover overrides the loop so it stays responsive to the user */
.industry-card:hover{ animation-play-state:paused; transform:translateY(-8px); border-color:var(--green); box-shadow:var(--shadow-lg); }
.industry-card:hover .industry-icon{ animation-play-state:paused; background:var(--green); border-color:var(--green); transform:rotate(-8deg) scale(1.08); }

@media (max-width:1080px){
  .rolling-tyre, .industry-track-line{ display:none; }
  .industry-grid-wrap{ padding-bottom:0; }
}
/* ---------- Pagination ---------- */
.pagination{ display:flex; gap:8px; flex-wrap:wrap; margin-top:40px; }
.pagination a, .pagination span{ padding:9px 15px; border-radius:8px; border:1px solid var(--border); color:var(--text-muted); font-size:.85rem; transition:.2s; }
.pagination a:hover{ border-color:var(--green); color:var(--green); }
.pagination .active span{ background:var(--green); color:#fff; border-color:var(--green); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px){
  .stats-strip, .industry-grid, .product-grid, .steps-grid, .why-choose-grid{ grid-template-columns:repeat(2, 1fr); }
  .about-intro, .strengths-wrap, .contact-grid{ grid-template-columns:1fr; }
  .team-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid.preview{ grid-template-columns:repeat(3,1fr); }
  .testimonial-arrow{ display:none; }
  .carousel-arrow{ display:none; }
  .lightbox-arrow{ width:40px; height:40px; }
  .lightbox-arrow.prev{ left:8px; }
  .lightbox-arrow.next{ right:8px; }
}


/* humburger  */
.hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; z-index:160; position:relative; }
.hamburger span{ width:24px; height:2px; background:var(--charcoal); border-radius:2px; transition:transform .25s, opacity .25s; }
.hamburger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-active span:nth-child(2){ opacity:0; }
.hamburger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-item.has-mega{ position:relative; }
.mega-trigger{ display:inline-flex; align-items:center; gap:6px; }
.mega-trigger .chev{ transition:transform .2s; }
.has-mega:hover .mega-trigger .chev,
.has-mega:focus-within .mega-trigger .chev{ transform:rotate(180deg); }
.mega-panel{
  position:absolute; top:calc(100% + 18px); left:50%; transform:translateX(-50%) translateY(8px);
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:22px; min-width:480px; z-index:200;
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.has-mega:hover .mega-panel,
.has-mega:focus-within .mega-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
.mega-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; }
.mega-cat{ position:relative; }
.mega-cat-link{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:20px 16px; border-radius:var(--radius-sm); background:var(--bg-card); border:1px solid var(--border);
  font-weight:700; font-size:.85rem; color:var(--text); transition:.2s;
}
.mega-cat-link:hover{ border-color:var(--green); color:var(--green); transform:translateY(-3px); }
.mega-icon svg{ width:34px; height:34px; }
.mega-flyout{
  position:absolute; left:100%; top:0; margin-left:12px; min-width:220px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:10px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateX(-8px); transition:.2s;
}
.mega-cat:hover .mega-flyout,
.mega-cat:focus-within .mega-flyout{ opacity:1; visibility:visible; transform:translateX(0); }
.mega-flyout a{ display:block; padding:9px 12px; border-radius:6px; font-size:.85rem; color:var(--text-muted); }
.mega-flyout a:hover{ background:var(--bg-alt); color:var(--green); }
.mega-flyout-all{ font-weight:700; color:var(--text) !important; border-bottom:1px solid var(--border-soft); margin-bottom:4px; border-radius:6px 6px 0 0 !important; }

/* ---------- Mobile nav (single source of truth — delete any other
   @media(max-width:820px){ .site-nav{...} } blocks elsewhere in the file) ---------- */
@media (max-width:820px){
  .hamburger{ display:flex; }

  /* Hide hamburger's own X once the panel is open — the panel has its own close button */
  .hamburger.is-active{ visibility:hidden; pointer-events:none; }

  .site-nav{
    position:fixed !important;
    top:0 !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:100vw; height:100vh;
    z-index:9999 !important;
    background:#ffffff !important;
    opacity:1 !important;
    display:flex; flex-direction:column;
    padding:0 20px 30px;
    gap:10px;
    transform:translateX(100%);
    transition:transform .3s ease;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .site-nav.is-open{ transform:translateX(0) !important; align-items: baseline; }

  .site-nav-mobile-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:20px 4px 18px;
    position:sticky; top:0; background:#fff; z-index:2;
    border-bottom:1px solid var(--border-soft); margin-bottom:6px;
  }
  .site-nav-mobile-title{ font-family:var(--font-head); font-weight:800; font-size:1.05rem; color:var(--charcoal); }
  .site-nav-close{
    width:38px; height:38px; border-radius:50%;
    background:var(--bg-alt); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    color:var(--text); transition:.2s;
  }
  .site-nav-close:hover{ background:var(--green); border-color:var(--green); color:#fff; }

  .site-nav > a, .nav-item.has-mega > .mega-trigger{
    display:flex; align-items:center; gap:14px;
    padding:14px 16px;
    border-radius:14px;
    background:var(--bg-card);
    border:1px solid var(--border-soft);
    font-size:.95rem; font-weight:700; color:var(--text);
  }
  .site-nav > a::before{ display:none; }
  .site-nav > a.active, .nav-item.has-mega > .mega-trigger.active{
    border-color:var(--green); background:rgba(26,122,60,.08); color:var(--green);
  }
  .nav-link-icon{
    flex:none; width:34px; height:34px; border-radius:50%;
    background:var(--bg-elevated); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; color:var(--green);
  }
  /* Icons are mobile-menu-only decoration — hidden on desktop by default */
  .nav-link-icon svg{ width:18px; height:18px; }
  .nav-link-label{ flex:1; }

  .mega-trigger .chev{ margin-left:auto; }
  .mega-panel{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    border:none; background:transparent; padding:6px 0 6px 12px; min-width:0;
    max-height:0; overflow:hidden; transition:max-height .25s ease;
  }
  .has-mega.is-open .mega-panel{ max-height:1200px; margin-top:8px; }
  .mega-grid{ grid-template-columns:1fr; gap:8px; }
  .mega-cat-link{ flex-direction:row; justify-content:flex-start; text-align:left; padding:12px 14px; }
  .mega-icon svg{ width:22px; height:22px; }
  .mega-flyout{
    position:static; opacity:1; visibility:visible; transform:none; box-shadow:none;
    margin-left:0; margin-top:6px; border:none; background:var(--bg-alt);
    max-height:0; overflow:hidden; padding:0 10px; transition:max-height .25s ease;
  }
  .mega-cat.is-open .mega-flyout{ max-height:600px; padding:10px; }

  .nav-cta{ margin-top:8px; text-align:center; }
}

.nav-link-icon{ display:none; }


@media (max-width:820px){
  .site-nav{
    overflow-x:hidden;
  }
  .mega-grid, .mega-cat, .mega-cat-link, .mega-flyout, .mega-flyout a{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    position: static;
  }
  .mega-cat-link, .mega-flyout a{
    white-space:normal;
    word-break:break-word;
  }
  .mega-icon{ flex:none; }
  .mega-icon svg{ width:22px !important; height:22px !important; }
}
/* ---------- Top bar: prevent wrap-collapse on very small screens ---------- */
@media (max-width:480px){
  .top-bar-inner{ flex-direction:column; height:auto; padding:6px 0; gap:2px; text-align:center; }
  .top-bar-text{ font-size:.72rem; }
  .top-bar-links{ font-size:.72rem; }
}

@media (max-width: 640px){
  section{ padding:64px 0; }
  .stats-strip, .industry-grid, .product-grid, .steps-grid,.team-grid{ grid-template-columns:1fr 1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid.preview{ grid-template-columns:repeat(2,1fr); }
  .enquiry-band{ padding:32px; flex-direction:column; align-items:flex-start; }
  .page-hero{ padding:130px 0 50px; }
  .tyre-blur.tb-1{ width:220px; height:220px; }
  .tyre-blur.tb-2{ width:160px; height:160px; }
  .product-carousel .product-card{ flex-basis:240px; }
}

/* ---------- Why Choose cards: deal-like-a-deck-of-cards entrance ---------- */
.why-choose-grid .why-choose-card.reveal{
  opacity:0;
  transform:translate(-140px,-60px) rotate(-35deg) scale(.8);
  transition:none; /* override the generic .reveal transition; this uses its own keyframe animation */
}
.why-choose-grid .why-choose-card.reveal.is-visible{
  animation:wi-card-deal .9s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay:calc(300ms + var(--i, 0) * 220ms);
}

@keyframes wi-card-deal{
  0%{
    opacity:0;
    transform:translate(-140px,-60px) rotate(-35deg) scale(.8);
  }
  60%{
    opacity:1;
    transform:translate(8px,-4px) rotate(4deg) scale(1.02);
  }
  100%{
    opacity:1;
    transform:translate(0,0) rotate(0deg) scale(1);
  }
}

@media (max-width:640px){
  .why-choose-grid .why-choose-card.reveal{
    transform:translateY(-80px) rotate(-14deg) scale(.85);
  }
  @keyframes wi-card-deal{
    0%{ opacity:0; transform:translateY(-80px) rotate(-14deg) scale(.85); }
    60%{ opacity:1; transform:translateY(-4px) rotate(2deg) scale(1.02); }
    100%{ opacity:1; transform:translateY(0) rotate(0deg) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce){
  .why-choose-grid .why-choose-card.reveal{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
}

@media (max-width:1080px){
  .why-choose-grid{ grid-template-columns:repeat(2, 1fr); gap:16px; }
  .why-choose-card{ aspect-ratio:4/3.4; min-height:240px; }
  .why-choose-icon{ width:38px; height:38px; top:12px; right:12px; }
  .why-choose-card-body{ padding:18px; }
}
@media (max-width:640px){
  .why-choose-grid{ grid-template-columns:1fr; gap:16px; }
  .why-choose-card{ aspect-ratio:16/11; min-height:220px; }
}
@media (max-width:420px){
  .why-choose-card{ aspect-ratio:4/3.2; min-height:200px; }
  .why-choose-card-body{ padding:16px; }
  .why-choose-card-body h3{ font-size:.92rem; }
  .why-choose-card-body p{ font-size:.8rem; }
  .why-choose-icon{ width:32px; height:32px; }
  .why-choose-icon svg{ width:16px; height:16px; }
}

/* was: @media (max-width:640px){ */
@media (max-width:1080px){
  .why-choose-grid .why-choose-card.reveal{
    transform:translateY(-80px) rotate(-14deg) scale(.85);
  }
  @keyframes wi-card-deal{
    0%{ opacity:0; transform:translateY(-80px) rotate(-14deg) scale(.85); }
    60%{ opacity:1; transform:translateY(-4px) rotate(2deg) scale(1.02); }
    100%{ opacity:1; transform:translateY(0) rotate(0deg) scale(1); }
  }
}


@media (max-width:820px){
  .team-wave-road{ height:auto !important; }
  .team-wave-svg, .team-wave-truck{ display:none !important; }

  .team-wave-stops{ position:static !important; }
  .team-wave-stop{
    position:static !important;
    top:auto !important; left:auto !important;
    width:100% !important;
    max-width:340px;
    margin:0 auto 24px;
    transform:none !important;
    opacity:1 !important;
    transition:none !important;
  }
  .team-wave-stop::before{ display:none !important; } /* connector line */
  .team-profile-card{ height:230px; }
}

@media (max-width:420px){
  .team-profile-card{ height:210px; }
}

/* Fallback: hide the custom cursor on touch devices (no pointer anyway) */
@media (hover: none) and (pointer: coarse){
  body, button{ cursor:auto; }
}


/* ---------- Contact page: welcome enquiry modal ---------- */
.enquiry-modal-overlay{
  position:fixed; inset:0; z-index:600;
  background:rgba(15,20,17,.7); backdrop-filter:blur(4px);
  display:none; align-items:center; justify-content:center; padding:20px;
  opacity:0; transition:opacity .3s ease;
}
.enquiry-modal-overlay.is-open{ display:flex; }
.enquiry-modal-overlay.is-visible{ opacity:1; }

.enquiry-modal{
  position:relative; width:100%; max-width:820px;
  background:var(--bg-elevated); border-radius:var(--radius-lg); overflow:hidden;
  display:grid; grid-template-columns:.9fr 1.1fr;
  box-shadow:var(--shadow-lg);
  transform:translateY(24px) scale(.97); opacity:0;
  transition:transform .4s cubic-bezier(.2,.8,.3,1), opacity .4s ease;
}
.enquiry-modal-overlay.is-visible .enquiry-modal{ transform:translateY(0) scale(1); opacity:1; }

.enquiry-modal-close{
  position:absolute; top:14px; right:14px; z-index:5;
  width:38px; height:38px; border-radius:50%;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.25); color:#fff;
  display:flex; align-items:center; justify-content:center; transition:.2s;
}
.enquiry-modal-close:hover{ background:var(--red); border-color:var(--red); }

.enquiry-modal-media{ position:relative; min-height:220px; }
.enquiry-modal-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.enquiry-modal-media-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,36,32,.1), rgba(26,36,32,.55));
}

.enquiry-modal-body{ padding:40px 36px; display:flex; flex-direction:column; justify-content:center; }
.enquiry-modal-body h2{ margin:0 0 12px; font-size:1.5rem; }
.enquiry-modal-body p{ color:var(--text-muted); margin-bottom:26px; }
.enquiry-modal-actions{ display:flex; flex-direction:column; gap:12px; }
.enquiry-modal-actions .btn-primary svg{ flex:none; }

@media (max-width:720px){
  .enquiry-modal{ grid-template-columns:1fr; }
  .enquiry-modal-media{ min-height:160px; }
  .enquiry-modal-body{ padding:30px 26px; }
}

/* ==========================================================================
   INTERACTION / MOTION LAYER
   Webflow-style additions: hide-on-scroll nav, animated underline, hero
   word-stagger reveal, magnetic buttons, 3D tilt hover, scroll parallax.
   All additive — existing selectors/behaviour above are untouched.
   ========================================================================== */

/* ---------- Header: hide on scroll down, reveal on scroll up ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  border-bottom:1px solid var(--border-soft);
  transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s ease;
}
.site-header::before{
  content:'';
  position:absolute; inset:0; z-index:-1;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .3s ease;
}
.site-header.is-scrolled::before{
  background:rgba(255,255,255,.97);
}
.site-header.is-scrolled{
  box-shadow:0 8px 24px rgba(20,30,24,.08);
}
/* ---------- Nav link: animated underline sweep (replaces static hover color-only) ---------- */
.site-nav a:not(.btn)::before{
  content:''; position:absolute; left:0; bottom:-4px; width:100%; height:2px;
  background:var(--green); border-radius:2px;
  transform:scaleX(0); transform-origin:right; transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.site-nav a:not(.btn):hover::before{ transform:scaleX(1); transform-origin:left; }
.site-nav a.active::before{ display:none; } /* keep the original active-state underline as-is */

/* ---------- Hero: word-mask stagger reveal ---------- */
.hero-word-mask{ display:inline-block; overflow:hidden; vertical-align:top; }
.hero-word{
  display:inline-block; opacity:0; transform:translateY(115%) rotate(3deg);
  animation:hero-word-in .85s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:var(--d, 0ms);
}
@keyframes hero-word-in{ to{ opacity:1; transform:translateY(0) rotate(0deg); } }

.hero-in{ opacity:0; transform:translateY(18px); animation:hero-fade-in .8s ease forwards; animation-delay:var(--d, 0ms); }
@keyframes hero-fade-in{ to{ opacity:1; transform:translateY(0); } }

/* ---------- Magnetic buttons ---------- */
.magnetic{ transition:transform .18s cubic-bezier(.2,.8,.2,1), background .25s ease, box-shadow .25s ease, border-color .25s ease; }
.magnetic .btn-label{ display:inline-block; }

/* ---------- 3D tilt hover (cards) ---------- */
.tilt-card{ transform-style:preserve-3d; perspective:900px; transition:transform .35s cubic-bezier(.2,.8,.2,1); will-change:transform; }
.tilt-card > *{ transform:translateZ(0); }
.product-card, .industry-card, .category-tile, .subcategory-tile{ transform-style:preserve-3d; perspective:900px; }

/* ---------- Scroll-linked parallax layers ---------- */
[data-parallax]{ will-change:transform; }

/* ---------- Custom cursor: magnetic scale-up label on primary CTAs ---------- */
#wi-cursor.is-hovering-cta{ transform:translate(-50%,-50%) scale(2.4); }

@media (prefers-reduced-motion: reduce){
  .hero-word, .hero-in{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* ==========================================================================
   PREMIUM LAYER — glassmorphism, floating hero cards, cursor spotlight
   Inspired by the "Plink" style rebuild the client referenced: big clipped
   type, glass UI cards floating over the hero photo, soft mouse spotlight.
   Uses only real data ($stats) already rendered elsewhere — no invented copy.
   ========================================================================== */

.glass-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

/* Floating stat cards over the hero photo, Plink-style */
.hero-float-cards{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.hero-float-card{
  position:absolute; display:flex; flex-direction:column; gap:2px;
  padding:18px 22px; color:#fff; animation:hero-card-float 5s ease-in-out infinite;
  opacity:0; animation:hero-card-in .8s ease forwards, hero-card-float 5s ease-in-out 1s infinite;
}
.hero-float-card-1{ top:16%; right:8%; animation-delay:.9s, 1.7s; }
.hero-float-card-2{ bottom:22%; right:16%; animation-delay:1.15s, 2s; }
.hero-float-value{ font-family:var(--font-head); font-size:1.7rem; font-weight:800; line-height:1; }
.hero-float-label{ font-size:.72rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.06em; margin-top:4px; }
@keyframes hero-card-in{ from{ opacity:0; transform:translateY(16px) scale(.94); } to{ opacity:1; transform:translateY(0) scale(1); } }
@keyframes hero-card-float{ 0%, 100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@media (max-width:900px){ .hero-float-cards{ display:none; } }

/* Cursor-reactive spotlight glow inside the hero (pure CSS + a couple custom props set by JS) */
[data-spotlight]{ position:relative; }
[data-spotlight]::before{
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(26,122,60,.20), transparent 60%);
  opacity:0; transition:opacity .4s ease;
}
[data-spotlight].spotlight-active::before{ opacity:1; }

@media (prefers-reduced-motion: reduce){
  .hero-float-card{ animation:none !important; opacity:1 !important; transform:none !important; }
}


/* ---------- Speedway strip: animated delivery truck ---------- */
.wi-speedway-section{ background:var(--charcoal); overflow:hidden; padding:60px 0 0; }
.wi-speedway-head{ text-align:center; margin-bottom:36px; }
.wi-speedway-head .eyebrow{ color:var(--white); }
.wi-speedway-head .eyebrow::before{ background:var(--white); }
.wi-speedway-head h2{ color:#fff; }

.loop-wrapper{
  margin:0 auto;
  position:relative;
  display:block;
  width:100%;
  max-width:900px;
  height:190px;
  overflow:hidden;
  border-bottom:3px solid var(--green);
}

.wi-mountain{
  position:absolute; right:-900px; bottom:-20px; width:2px; height:2px;
  box-shadow:
    0 0 0 50px var(--charcoal-elevated),
    60px 50px 0 70px var(--charcoal-elevated),
    90px 90px 0 50px var(--charcoal-elevated),
    250px 250px 0 50px var(--charcoal-elevated),
    290px 320px 0 50px var(--charcoal-elevated),
    320px 400px 0 50px var(--charcoal-elevated);
  transform:rotate(130deg);
  animation:wi-mtn 20s linear infinite;
}
.wi-hill{
  position:absolute; right:-900px; bottom:-50px; width:400px; border-radius:50%; height:20px;
  box-shadow:
    0 0 0 50px var(--charcoal-soft),
    -20px 0 0 20px var(--charcoal-soft),
    -90px 0 0 50px var(--charcoal-soft),
    250px 0 0 50px var(--charcoal-soft),
    290px 0 0 50px var(--charcoal-soft),
    620px 0 0 50px var(--charcoal-soft);
  animation:wi-hill 4s 2s linear infinite;
}

.wi-tree{
  position:absolute; height:70px; width:26px; bottom:0;
  background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 100'%3E%3Crect x='16' y='75' width='8' height='20' fill='%232a1f16'/%3E%3Cpolygon points='20,10 35,50 5,50' fill='%231a7a3c'/%3E%3Cpolygon points='20,30 38,68 2,68' fill='%23145c2d'/%3E%3C/svg%3E");
}
.wi-rock{
  margin-top:-12%; height:10px; width:10px; bottom:-2px; border-radius:20px;
  position:absolute; background:rgba(255,255,255,.25);
}

.wi-truck, .wi-wheels{
  transition:all ease; width:130px; margin-right:-65px; bottom:0; right:50%; position:absolute;
}
.wi-truck{
  height:58px; background-repeat:no-repeat; background-size:contain;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 90'%3E%3Crect x='0' y='20' width='125' height='50' rx='4' fill='%23f5f5f0'/%3E%3Crect x='125' y='38' width='58' height='32' rx='4' fill='%231a7a3c'/%3E%3Crect x='134' y='45' width='20' height='16' rx='2' fill='%23ffffff' opacity='0.85'/%3E%3Crect x='0' y='68' width='183' height='6' fill='%23cc2229'/%3E%3C/svg%3E");}
.wi-wheels{
  height:18px; margin-bottom:0; background-repeat:no-repeat; background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40'%3E%3Ccircle cx='30' cy='20' r='16' fill='%230d0d0d'/%3E%3Ccircle cx='30' cy='20' r='7' fill='%23404040'/%3E%3Ccircle cx='30' cy='20' r='2' fill='%23f5c518'/%3E%3Ccircle cx='150' cy='20' r='16' fill='%230d0d0d'/%3E%3Ccircle cx='150' cy='20' r='7' fill='%23404040'/%3E%3Ccircle cx='150' cy='20' r='2' fill='%23f5c518'/%3E%3C/svg%3E");
}

.wi-tree{ animation:wi-tree1 3s 0s linear infinite; }
.wi-tree:nth-child(3){ animation:wi-tree2 2s .15s linear infinite; }
.wi-tree:nth-child(4){ animation:wi-tree3 8s .05s linear infinite; }
.wi-rock{ animation:wi-rock 4s -.53s linear infinite; }
.wi-truck{ animation:wi-truck-bounce 4s .08s ease infinite; }
.wi-wheels{ animation:wi-truck-bounce 4s .001s ease infinite; }

@keyframes wi-tree1{ 0%{ transform:translateX(1350px); } 100%{ transform:translateX(-50px); } }
@keyframes wi-tree2{ 0%{ transform:translateX(650px); }  100%{ transform:translateX(-50px); } }
@keyframes wi-tree3{ 0%{ transform:translateX(2750px); } 100%{ transform:translateX(-50px); } }
@keyframes wi-rock{ 0%{ right:-200px; } 100%{ right:2000px; } }
@keyframes wi-truck-bounce{
  0%{} 6%{ transform:translateY(0); } 7%{ transform:translateY(-6px); }
  9%{ transform:translateY(0); } 10%{ transform:translateY(-1px); } 11%{ transform:translateY(0); } 100%{}
}
@keyframes wi-mtn{ 100%{ transform:translateX(-2000px) rotate(130deg); } }
@keyframes wi-hill{ 100%{ transform:translateX(-2000px); } }

@media (max-width:640px){ .loop-wrapper{ height:140px; } }
@media (prefers-reduced-motion: reduce){
  .wi-mountain,.wi-hill,.wi-tree,.wi-rock,.wi-truck,.wi-wheels{ animation:none !important; }
}


/* ---------- We Serve: reveal-panel industry cards ---------- */
.wi-serve-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:26px;
}
.wi-serve-card{
  display:flex;
  flex-wrap:nowrap;
  justify-content:space-between;
  width:100%;
  height:230px;
  border-radius:var(--radius);
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow);
  border-top: 4px solid #2563eb;
}
.wi-serve-overlay{
  position:relative;
  display:flex;
  width:100%;
  height:100%;
  padding:1.4rem 1.1rem;
  background:var(--charcoal);
  transition:.45s cubic-bezier(.4,0,.2,1);
  z-index:1;
}
.wi-serve-overlay-content{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:150px;
  height:100%;
  padding:.4rem 0 0 .6rem;
  border-left:3px solid var(--green);
  transition:.3s ease-in-out .15s;
  z-index:1;
}
.wi-serve-overlay-content .wi-serve-icon{
  font-size:1.8rem;
  margin-bottom:10px;
  display:inline-block;
}
.wi-serve-overlay-content h3{ color:#fff; font-size:1.05rem; margin-bottom:8px; }
.wi-serve-overlay-content p{
  color:rgba(255,255,255,.68);
  font-size:.82rem;
  line-height:1.5;
  margin-bottom:0;
}

.wi-serve-image-content{
  position:absolute; top:0; right:0; width:65%; height:100%;
  background-size:cover; background-position:center;
  transition:.45s cubic-bezier(.4,0,.2,1);
}
.wi-serve-image-content::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(26,36,32,.75), rgba(26,122,60,.35));
}

.wi-serve-dots{
  position:absolute; bottom:1rem; right:1.2rem;
  display:flex; align-items:center; gap:8px;
  transition:.3s ease-in-out .2s;
}
.wi-serve-dots span{
  width:8px; height:8px; border-radius:50%;
  background:var(--red); border:1px solid rgba(255,255,255,.4);
  transition:.3s ease-in-out .2s;
}

.wi-serve-text{
  position:absolute; top:0; right:0; width:65%; height:100%;
  padding:1.6rem 1.8rem;
  background:var(--bg-elevated);
  box-shadow:inset 1px 1px 15px rgba(0,0,0,.08);
  overflow-y:auto;
  display:flex; flex-direction:column; justify-content:center;
}
.wi-serve-text h3{ font-size:1.05rem; margin-bottom:10px; color:var(--text); }
.wi-serve-text p{ color:var(--text-muted); font-size:.88rem; line-height:1.6; margin:0; }

/* Hover reveal */
.wi-serve-card:hover .wi-serve-overlay{ transform:translateX(-65%); }
.wi-serve-card:hover .wi-serve-image-content{ width:35%; }
.wi-serve-card:hover .wi-serve-overlay-content{
  border:none;
  transition-delay:.15s;
  transform:translateX(65%);
}
.wi-serve-card:hover .wi-serve-dots{ transform:translateX(.6rem); }
.wi-serve-card:hover .wi-serve-dots span{ background:var(--green); border-color:#fff; }

@media (max-width:1080px){
  .wi-serve-grid{ grid-template-columns:1fr; }
  .wi-serve-card{ height:210px; }
}
@media (prefers-reduced-motion: reduce){
  .wi-serve-overlay, .wi-serve-image-content, .wi-serve-overlay-content, .wi-serve-dots, .wi-serve-dots span{
    transition:none !important;
  }
}

/* ---------- How We Support: rotating tyre-card tower (background accent) ---------- */
.wi-cardtower-section{
  position:relative;
  background:var(--charcoal);
  overflow:hidden;
  padding:100px 0;
}
.wi-cardtower-section .section-head .eyebrow{ color:var(--white); }
.wi-cardtower-section .section-head .eyebrow::before{ background:var(--white); }
.wi-cardtower-section .section-head h2{ color:#fff; }
.wi-cardtower-section .step-card h3{ color:#fff; }
.wi-cardtower-section .step-card p{ color:rgba(255,255,255,.65); }
.wi-cardtower-section .step-number{ color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.35); }

.wi-cardtower-outer{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  perspective:700px; perspective-origin:center 30%;
  opacity:.55;
}
.wi-cardtower{
  position:absolute; top:50%; left:50%; width:60px;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  animation:wi-tower-spin 45s linear infinite;
}
@keyframes wi-tower-spin{
  from{ transform:translate(-50%,-50%) rotateY(0deg); }
  to{ transform:translate(-50%,-50%) rotateY(360deg); }
}
.wi-card{
  position:absolute; top:-42px; left:0;
  width:60px; height:84px;
  border-radius:8px;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  border:2px solid var(--green);
  box-shadow:0 0 10px rgba(0,0,0,.5) inset;
  background:
    radial-gradient(circle at 50% 50%, #161616 0 13px, transparent 14px),
    radial-gradient(circle at 50% 50%, transparent 0 20px, #f5c518 20px 21px, transparent 22px),
    repeating-radial-gradient(circle at 50% 50%, #202020 0 4px, #2b2b2b 4px 8px);
}
.wi-card::after{
  content:'';
  position:absolute; inset:0;
  border-radius:6px;
  transform:rotateY(180deg);
  backface-visibility:hidden;
  background:linear-gradient(135deg, var(--green) 0%, var(--charcoal-elevated) 50%, var(--red) 100%);
  border:1px solid rgba(255,255,255,.25);
}
.wi-cardtower-shadow{
  position:absolute; top:50%; left:50%;
  width:340px; height:340px;
  transform:translate(-50%,-50%) rotateX(90deg) translateZ(58px);
  background:radial-gradient(rgba(0,0,0,0), rgba(0,0,0,.55) 150px, rgba(0,0,0,0) 210px);
}

@media (max-width:820px){
  .wi-cardtower-outer{ display:none; } /* tight viewport makes the 3D tower look cramped/glitchy */
}
@media (prefers-reduced-motion: reduce){
  .wi-cardtower{ animation:none !important; }
}


/* ---------- Typewriter heading reveal ---------- */

.reveal.is-visible .wi-typewriter{
  animation-play-state:running, running;
}
/* @keyframes wi-type{ from{ width:0; } to{ width:100%; } } */
@keyframes wi-type{ from{ width:0; } to{ width:max-content; } }
@keyframes wi-blink{ 50%{ border-right-color:transparent; } }

/* If reduced motion: show heading immediately, no clipping/cursor */
@media (prefers-reduced-motion: reduce){
  .wi-typewriter{
    width:auto !important; border-right:none !important;
    animation:none !important; overflow:visible !important;
  }
}

/* ---------- How We Support: single big flat spinning tyre (background accent) ---------- */
.wi-bigtyre-outer{
  position:absolute; top:50%; left:50%;
  width:min(560px, 70vw); height:min(560px, 70vw);
  transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; opacity:.5;
}
.wi-bigtyre-outer svg{ width:100%; height:100%; display:block; }
.wi-bigtyre-spin{
  transform-origin:100px 100px;
  animation:tyre-spin 14s linear infinite; /* reuses existing @keyframes tyre-spin */
}

@media (prefers-reduced-motion: reduce){
  .wi-bigtyre-spin{ animation:none !important; }
}

/* ---------- Category tiles: always-on ambient glow (theme colored) ---------- */
.category-tiles{ padding:10px 0; } /* small breathing room so glow isn't cropped by the grid edge */

.category-tile-wrap{
  position:relative;
  isolation:isolate;
}

/* .category-tile keeps its exact original size/behaviour — untouched */
.category-tile{ position:relative; z-index:2; }

/* Skewed color-block glow, sitting behind the card, always visible */
.category-tile-wrap::before,
.category-tile-wrap::after{
  content:'';
  position:absolute;
  top:10px; left:36px;
  width:58%; height:calc(100% - 20px);
  border-radius:var(--radius-lg);
  transform:skewX(14deg);
  transition:.5s ease;
  z-index:0;
  background:linear-gradient(315deg, var(--green), var(--red));
}
.category-tile-wrap::after{
  filter:blur(34px);
  opacity:.45;
  animation:tile-glow-breathe 3.5s ease-in-out infinite;
}
.category-tile-wrap::before{ opacity:.22; filter:blur(6px); }

/* Alternate the gradient direction so tiles don't look identical side by side */
.category-tile-wrap:nth-child(even)::before,
.category-tile-wrap:nth-child(even)::after{
  background:linear-gradient(135deg, var(--red), var(--green));
}

@keyframes tile-glow-breathe{
  0%, 100%{ opacity:.4; transform:skewX(14deg) translateY(0); }
  50%{ opacity:.6; transform:skewX(14deg) translateY(-8px); }
}

/* On hover, the glow straightens out and widens — same move as the reference */
.category-tile-wrap:hover::before,
.category-tile-wrap:hover::after{
  transform:skewX(0deg) translateY(0);
  left:14px;
  width:calc(100% - 28px);
}
.category-tile-wrap:hover::after{ opacity:.7; }

/* Small floating light blobs at the corners, always drifting, like the reference's span::before/after */
.category-tile-wrap .category-tile::before,
.category-tile-wrap .category-tile::after{
  content:'';
  position:absolute; z-index:3; pointer-events:none;
  width:70px; height:70px; border-radius:50%;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  animation:tile-corner-float 4s ease-in-out infinite;
}
.category-tile-wrap .category-tile::before{ top:-14px; left:-14px; animation-delay:0s; }
.category-tile-wrap .category-tile::after{ bottom:-14px; right:-14px; animation-delay:-2s; }

@keyframes tile-corner-float{
  0%, 100%{ transform:translateY(6px); opacity:.5; }
  50%{ transform:translateY(-6px); opacity:.9; }
}

@media (prefers-reduced-motion: reduce){
  .category-tile-wrap::before, .category-tile-wrap::after,
  .category-tile-wrap .category-tile::before, .category-tile-wrap .category-tile::after{
    animation:none !important;
  }
}

.tile-corners{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.tile-corners::before,
.tile-corners::after{
  content:'';
  position:absolute; width:70px; height:70px; border-radius:50%;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(8px);
  animation:tile-corner-float 4s ease-in-out infinite;
}
.tile-corners::before{ top:-14px; left:-14px; animation-delay:0s; }
.tile-corners::after{ bottom:-14px; right:-14px; animation-delay:-2s; }

@keyframes tile-corner-float{
  0%, 100%{ transform:translateY(6px); opacity:.5; }
  50%{ transform:translateY(-6px); opacity:.9; }
}


/* ---------- Product slider: curved card panels, center-focus ---------- */
.wi-product-slider{ position:relative; padding:10px 0 20px; }
.wi-slider-viewport{ overflow:hidden; padding:20px 0; } /* padding so scaled/active card shadow isn't clipped */
.wi-slide-track{
  display:flex;
  align-items:stretch;
  transition:transform .65s cubic-bezier(.65,0,.35,1);
  will-change:transform;
}

.wi-slide{
  flex:0 0 auto;
  width:min(46vw, 400px);
  margin:0 16px;
  opacity:.45;
  transform:scale(.85);
  transition:transform .65s cubic-bezier(.65,0,.35,1), opacity .5s ease;
  cursor:url("/images/cursor-tyre.svg") 16 16, pointer;
}
.wi-slide.is-active{ opacity:1; transform:scale(1); cursor:default; }
.wi-slide.is-prev, .wi-slide.is-next{ opacity:.6; transform:scale(.9); }

/* A real visible card: solid surface + border + shadow, distinct from the
   section-alt background behind it. Gentle curve on the sides only, not a
   full oval, so nothing gets clipped. */
.wi-slide-inner{
  position:relative;
  height:460px;
  border-radius:56px / 34px;
  overflow:hidden;
  background:var(--bg-elevated);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  transition:box-shadow .3s ease, border-color .3s ease;
  display:flex;
  flex-direction:column;
}
.wi-slide.is-active .wi-slide-inner{ box-shadow:var(--shadow-lg); border-color:var(--green); }

/* Image area: contain (not cover) so the full tyre is always visible,
   generous padding, its own light background so it reads as a "product shot"
   panel rather than a bleeding photo. */
.wi-slide-inner .product-card-media{
  position:relative;
  flex:1 1 auto;
  padding:34px 34px 0;
  background:var(--bg-alt);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.wi-slide-inner .product-card-media img{
  width:100%; height:100%; object-fit:contain; transform:none;
}
.wi-slide-inner .badge-pill{ top:20px; left:20px; }
.wi-slide-inner .badge-load{ top:20px; right:20px; }

.wi-slide-caption{
  position:relative; z-index:2; flex:0 0 auto;
  padding:22px 30px 28px;
  background:var(--bg-elevated);
  border-top:1px solid var(--border-soft);
}
.wi-slide-caption h3{ color:var(--text); font-size:1.1rem; margin-bottom:6px; }
.wi-slide-caption p{ color:var(--text-muted); font-size:.86rem; margin-bottom:10px; }
.wi-slide-caption .view-spec{ color:var(--green); font-weight:700; }
.wi-slide-caption .view-spec:hover{ color:var(--green-dark); }

.wi-slider-controls{ display:flex; justify-content:center; gap:14px; margin-top:24px; }
.wi-slider-arrow{
  width:46px; height:46px; border-radius:50%;
  background:var(--bg-elevated); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--charcoal); transition:.2s;
  box-shadow:var(--shadow);
}
.wi-slider-arrow:hover{ background:var(--green); color:#fff; border-color:var(--green); }

@media (max-width:820px){
  .wi-slide{ width:80vw; margin:0 10px; }
  .wi-slide-inner{ height:380px; border-radius:34px / 22px; }
  .wi-slide-caption{ padding:18px 22px 22px; }
}
@media (prefers-reduced-motion: reduce){
  .wi-slide-track, .wi-slide{ transition:none !important; }
}



/* 3d roatte */
/* ---------- 3D rotating text backdrop (ambient, decorative) ---------- */
.wi-3d-text-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:.5;
}
.wi-3d-text-bg .wi-3d-box{
  position:relative;
  transform-style:preserve-3d;
  animation:wi-3d-spin 7s ease-in-out infinite alternate;
}
.wi-3d-text-bg .wi-3d-box span{
  background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.4) 90%, transparent);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-transform:uppercase;
  line-height:.8em;
  position:absolute; top:50%; left:50%;
  white-space:nowrap;
  font-family:var(--font-head);
  font-size:2.6rem; font-weight:900;
  padding:0 10px;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) rotateX(calc(var(--i) * 22.5deg)) translateZ(109px);
}
.wi-3d-text-bg .wi-3d-box span i{
  font-style:normal;
  -webkit-text-fill-color:initial;
}
.wi-3d-text-bg .wi-3d-box span i:nth-child(1){ color:var(--green); }
.wi-3d-text-bg .wi-3d-box span i:nth-child(2){ color:var(--red); }

@keyframes wi-3d-spin{
  0%{ transform:perspective(500px) rotateX(0deg) rotate(5deg); }
  100%{ transform:perspective(50px) rotateX(360deg) rotate(5deg); }
}

@media (max-width:640px){
  .wi-3d-text-bg .wi-3d-box span{ font-size:1.6rem; }
}
@media (prefers-reduced-motion: reduce){
  .wi-3d-text-bg .wi-3d-box{ animation:none !important; }
}

/* ghost goose */
/* ---------- "About Us" heading: rolling tyre crosses through the text ---------- */
.wi-heading-cross-stage{
  position:relative;
  /* display:grid; */
  /* place-items:center; */
  overflow:hidden;
  padding:20px 0;
}
.wi-heading-cross-stage h1,
.wi-heading-cross-stage h2{
  position:relative;
  z-index:1;
}

.wi-cross-tyre{
  width:10vmin;
  height:10vmin;
  min-width:70px;
  min-height:70px;
  position:absolute;
  top:50%;
  left:0;
  z-index:2;
  border-radius:50%;
  mix-blend-mode:exclusion;
  opacity:.92;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, #161616 0 13px, transparent 14px),
    radial-gradient(circle at 50% 50%, transparent 0 34px, #f5c518 34px 36px, transparent 37px),
    repeating-radial-gradient(circle at 50% 50%, #202020 0 6px, #2b2b2b 6px 12px);
  animation:wi-tyre-cross 4s linear infinite;
}
.wi-cross-tyre::before{
  content:'WI';
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:900; font-size:1.1vmin;
  color:#f5c518; letter-spacing:-1px;
}

@keyframes wi-tyre-cross{
  0%{ transform:translate(120vmin,-50%) rotate(0deg); }
  100%{ transform:translate(-20vmin,-50%) rotate(-720deg); }
}

@media (max-width:640px){
  .wi-cross-tyre{ width:60px; height:60px; }
}
@media (prefers-reduced-motion: reduce){
  .wi-cross-tyre{ animation:none !important; opacity:0 !important; }
}


/* typewriter paragraph */
/* ---------- Typewriter paragraph reveal (word-based, multi-line safe) ---------- */
.wi-type-paragraph span{
  display:inline-block;
  opacity:0;
  transform:translateY(4px);
  animation:wi-char-in .4s ease forwards;
  animation-delay:var(--d, 0s);
  animation-play-state:paused;
}
.wi-type-paragraph.is-visible span{
  animation-play-state:running;
}
@keyframes wi-char-in{
  to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .wi-type-paragraph span{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
}


/* ---------- Industry cards: package-drop unload onto the conveyor line ---------- */
.industry-grid .industry-card.reveal{
  opacity:0;
  transform:translateY(-70px) scale(.9);
  transition:none;
}
.industry-grid .industry-card.reveal.is-visible{
  animation:wi-card-unload .7s cubic-bezier(.34,1.4,.4,1) forwards;
  animation-delay:calc(200ms + var(--i, 0) * 260ms);
}
@keyframes wi-card-unload{
  0%{   opacity:0;  transform:translateY(-70px) scale(.9); }
  55%{  opacity:1;  transform:translateY(6px) scale(1.03); }
  75%{  transform:translateY(-3px) scale(.99); }
  100%{ opacity:1;  transform:translateY(0) scale(1); }
}

/* dust/impact puff on landing — small circular flash under the card */
.industry-card.reveal::after{
  content:'';
  position:absolute; left:50%; bottom:-6px; width:60%; height:10px;
  background:radial-gradient(ellipse at center, rgba(26,122,60,.35), transparent 70%);
  transform:translateX(-50%) scaleX(.3); opacity:0;
  pointer-events:none;
}
.industry-card.reveal.is-visible::after{
  animation:wi-impact-puff .5s ease forwards;
  animation-delay:calc(200ms + var(--i, 0) * 260ms + .35s);
}
@keyframes wi-impact-puff{
  0%{ opacity:0; transform:translateX(-50%) scaleX(.3); }
  40%{ opacity:.8; transform:translateX(-50%) scaleX(1); }
  100%{ opacity:0; transform:translateX(-50%) scaleX(1.3); }
}

@media (prefers-reduced-motion: reduce){
  .industry-grid .industry-card.reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
  .industry-card.reveal::after{ display:none !important; }
}

/* ==========================================================================
   TEAM SECTION — profile slide-up hover cards
   ========================================================================== */

.team-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
  justify-items:center;
}
.team-card{
  width:100%;
  max-width:280px;
  background:transparent; border:none; padding:0; transition:none;
}
.team-card:hover{ transform:none; box-shadow:none; border-color:transparent; }

.team-profile-card{
  position:relative;
  width:100%;
  height:340px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow);
  border:1px solid var(--border);
  background:var(--charcoal);
}

/* ---- Photo layer (always visible, slides down slightly on hover) ---- */
.team-photo-slide{
  position:absolute; inset:0;
  transition:.7s cubic-bezier(.2,.8,.2,1);
}
.team-photo-slide img{
  width:100%; height:100%; object-fit:cover;
}
.team-photo-slide::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,36,32,0) 55%, rgba(26,36,32,.9) 100%);
}
.team-profile-card:hover .team-photo-slide{
  transform:translateY(-14px) scale(1.05);
}

/* ---- Info panel: slides up from the bottom on hover ---- */
.team-info-slide{
  position:absolute; left:0; right:0; bottom:0;
  padding:26px 22px 22px;
  background:var(--bg-elevated);
  box-shadow:0 -14px 30px rgba(0,0,0,.18);
  transform:translateY(78%);
  transition:.55s cubic-bezier(.2,.8,.2,1);
  text-align:center;
}
.team-profile-card:hover .team-info-slide{
  transform:translateY(0);
}
.team-info-slide::after{
  content:'';
  position:absolute; top:12px; left:50%;
  width:32px; height:3px; border-radius:2px;
  transform:translateX(-50%);
  background:var(--green);
}
.team-info-slide h3{
  font-size:1.05rem; color:var(--text); margin-top:10px;
}
.team-info-slide .team-role{
  color:var(--red); font-size:.78rem; font-weight:700; margin:4px 0 10px;
}
.team-info-slide p{
  color:var(--text-muted); font-size:.84rem; line-height:1.55;
  opacity:0; transition:opacity .35s ease .15s;
}
.team-profile-card:hover .team-info-slide p{ opacity:1; }

/* Collapsed peek: name always partially visible even before hover */
.team-info-slide h3, .team-info-slide .team-role{
  opacity:1;
}

/* ---------- Entrance: rise-and-settle ---------- */
.team-card.reveal{
  opacity:0;
  transform:translateY(50px) scale(.94);
  transition:none;
}
.team-card.reveal.is-visible{
  animation:wi-team-rise .75s cubic-bezier(.16,.9,.3,1) forwards;
  animation-delay:calc(150ms + var(--i, 0) * 160ms);
}
@keyframes wi-team-rise{
  0%{   opacity:0; transform:translateY(50px) scale(.94); }
  60%{  opacity:1; transform:translateY(-6px) scale(1.01); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}

@media (max-width:1080px){
  .team-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .team-grid{ grid-template-columns:1fr; }
  .team-card{ max-width:320px; }
}
@media (hover:none){
  .team-info-slide{ transform:translateY(0); } /* touch: show info by default, no hover needed */
  .team-info-slide p{ opacity:1; }
  .team-photo-slide{ transform:none !important; }
}
@media (prefers-reduced-motion: reduce){
  .team-card.reveal{ opacity:1 !important; transform:none !important; animation:none !important; }
  .team-photo-slide, .team-info-slide{ transition:none !important; }
}

/* Name badge always visible on the photo, sits below the slide-up panel */
.team-photo-name{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  padding:18px 20px;
  color:#fff;
}
.team-photo-name h3{ font-size:1rem; color:#fff; }
.team-photo-name span{ font-size:.76rem; color:rgba(255,255,255,.75); font-weight:600; }

.team-info-slide{ z-index:2; } /* make sure the slide-up panel sits above the name badge */

/* ---------- Team section: road + tyre ambient background ---------- */
.team-section-bg{
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none;
}

/* Asphalt-style base gradient over the existing section-alt bg */
.team-section-bg::before{
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 15% 20%, var(--green-glow), transparent 45%),
    radial-gradient(circle at 85% 80%, var(--red-glow), transparent 45%);
  opacity:.5;
}

/* Faint diagonal road-line / tyre-track stripes */
.team-section-bg::after{
  content:'';
  position:absolute; inset:-10%;
  background-image:repeating-linear-gradient(
    -35deg,
    rgba(26,36,32,.05) 0 2px,
    transparent 2px 60px
  );
}

/* Reuse existing tyre-blur assets for large soft tyre silhouettes */
.team-section-bg .tyre-blur{ background-image:url("/images/tyre-outline.svg"); }

section.team-section{ position:relative; overflow:hidden; }
section.team-section .container{ position:relative; z-index:1; }


/* ==========================================================================
   TEAM SECTION — real winding road with truck image + unloading cards
   ========================================================================== */

.team-wave-road{
  position:relative;
  width:100%;
}

.team-wave-svg{
  position:absolute; top:0; left:0;
  z-index:0;
  overflow:visible;
}

/* Asphalt-style road base */
.team-wave-road-base{
  fill:none;
  stroke:#3a3f3d;
  stroke-width:46;
  stroke-linecap:round;
  opacity:.14;
}
/* Center dashed yellow line, like a real road */
.team-wave-road-line{
  fill:none;
  stroke:#f5c518;
  stroke-width:3;
  stroke-dasharray:18 16;
  stroke-linecap:round;
  opacity:.75;
}

.team-wave-truck{
  position:absolute;
  top:0; left:0;
  width:84px; height:auto;
  z-index:1;   /* pehle 5 tha, ab cards se neeche */
  transform-origin:center;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.32));
  pointer-events:none;
  will-change:transform;
}

.team-wave-stops{
  position:relative;
  z-index:3;
}
.team-wave-stop{
  position:absolute;
  width:260px;
  transform:translate(-50%,-50%) scale(.8);
  opacity:0;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
}
.team-wave-stop.is-active{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}

/* Connector line from the road point to the card */
.team-wave-stop::before{
  content:'';
  position:absolute;
  top:50%; left:50%;
  width:calc(var(--connector-dir, 1) * -160px);
  height:2px;
  background:repeating-linear-gradient(90deg, var(--green) 0 8px, transparent 8px 14px);
  transform:translateY(-50%);
  transform-origin:left center;
  opacity:0;
  transition:opacity .4s ease .3s, width .5s ease .3s;
  z-index:-1;
}
.team-wave-stop.is-active::before{ opacity:.7; }

/* Unload flash: quick glow pulse the moment the card becomes active */
.team-wave-stop.is-active .team-profile-card{
  animation:wi-unload-flash .6s ease;
}
@keyframes wi-unload-flash{
  0%{ box-shadow:0 0 0 0 var(--green-glow); }
  40%{ box-shadow:0 0 0 14px transparent, var(--shadow-lg); }
  100%{ box-shadow:var(--shadow-lg); }
}
.team-wave-stop.align-left.is-active{  transform:translate(-100%,-50%) scale(1); }
.team-wave-stop.align-right.is-active{ transform:translate(0%,-50%) scale(1); }
.team-wave-stop.is-active{ opacity:1; }

.team-profile-card{
  position:relative;
  width:100%;
  height:250px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--border);
  background:var(--charcoal);
}
.team-photo-slide{ position:absolute; inset:0; transition:.7s cubic-bezier(.2,.8,.2,1); }
.team-photo-slide img{ width:100%; height:100%; object-fit:cover; }
.team-photo-slide::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(26,36,32,0) 55%, rgba(26,36,32,.9) 100%);
}
.team-profile-card:hover .team-photo-slide{ transform:translateY(-10px) scale(1.05); }
.team-photo-name{ position:absolute; left:0; right:0; bottom:0; z-index:1; padding:16px 18px; color:#fff; }
.team-photo-name h3{ font-size:.94rem; color:#fff; }
.team-photo-name span{ font-size:.72rem; color:rgba(255,255,255,.75); font-weight:600; }
.team-info-slide{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:20px 18px 16px;
  background:var(--bg-elevated);
  box-shadow:0 -14px 30px rgba(0,0,0,.18);
  transform:translateY(80%);
  transition:.55s cubic-bezier(.2,.8,.2,1);
  text-align:center;
}
.team-profile-card:hover .team-info-slide{ transform:translateY(0); }
.team-info-slide::after{
  content:''; position:absolute; top:9px; left:50%; width:26px; height:3px; border-radius:2px;
  transform:translateX(-50%); background:var(--green);
}
.team-info-slide h3{ font-size:.92rem; color:var(--text); margin-top:6px; }
.team-info-slide .team-role{ color:var(--red); font-size:.7rem; font-weight:700; margin:4px 0 6px; }
.team-info-slide p{ color:var(--text-muted); font-size:.76rem; line-height:1.5; opacity:0; transition:opacity .35s ease .15s; }
.team-profile-card:hover .team-info-slide p{ opacity:1; }

@media (max-width:820px){
  .team-wave-truck{ width:56px; }
  .team-wave-stop{ width:78%; }
  .team-profile-card{ height:210px; }
}
@media (prefers-reduced-motion: reduce){
  .team-wave-truck{ transition:none !important; }
  .team-wave-stop{ transition:none !important; }
}


/* ==========================================================================
   PAGE HERO — road + vehicles driving in on the right side
   ========================================================================== */
.page-hero-road-scene{
  position:absolute;
  top:0; right:0;
  width:42%;
  height:100%;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.hero-road-img{
  position:absolute;
  bottom:-4%;
  right:-1%;
  top:auto;
  width:505%;
  height:auto;
  opacity:0;
  transform:translate(60px,-30px) scale(.9);
  animation:wi-road-in 1.1s ease .2s forwards;
}
@keyframes wi-road-in{
  to{ opacity:.9; transform:translate(0,0) scale(1); }
}

.hero-vehicle{
  position:absolute;
  opacity:0;
  will-change:transform, opacity;
  filter:drop-shadow(0 18px 14px rgba(0,0,0,.4));
}

.hero-truck{
  width:290px;
  bottom:8%;
  top:auto;
  right:22%;
  left:auto;
  transform:translate(180px,-160px) rotate(-10deg) scale(.85);
  animation:wi-truck-drive 2.2s cubic-bezier(.22,.75,.25,1) 1.3s forwards;
}
@keyframes wi-truck-drive{
  0%{   opacity:0;  transform:translate(180px,-160px) rotate(-10deg) scale(.85); }
  55%{  opacity:1;  transform:translate(-6px,6px) rotate(-4deg) scale(1.02); }
  75%{  transform:translate(2px,-2px) rotate(-2deg) scale(1); }
  100%{ opacity:1;  transform:translate(0,0) rotate(-3deg) scale(1); }
}

.hero-bus{
  width:270px;
  bottom:2%;
  top:auto;
  right:2%;
  left:auto;
  transform:translate(180px,-170px) rotate(-10deg) scale(.85);
  animation:wi-bus-drive 2.2s cubic-bezier(.22,.75,.25,1) 2s forwards;
}
@keyframes wi-bus-drive{
  0%{   opacity:0;  transform:translate(180px,-170px) rotate(-10deg) scale(.85); }
  55%{  opacity:1;  transform:translate(-6px,6px) rotate(-4deg) scale(1.02); }
  75%{  transform:translate(2px,-2px) rotate(-2deg) scale(1); }
  100%{ opacity:1;  transform:translate(0,0) rotate(-3deg) scale(1); }
}

.hero-vehicle::after{
  content:'';
  position:absolute;
  left:12%; right:12%; bottom:-6px;
  height:10px;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.45), transparent 70%);
  opacity:0;
  transition:opacity .4s ease;
}
.hero-truck::after{ animation:wi-shadow-in .4s ease 2.7s forwards; }
.hero-bus::after{ animation:wi-shadow-in .4s ease 3.4s forwards; }
@keyframes wi-shadow-in{ to{ opacity:1; } }

@media (max-width:1080px){
  .page-hero-road-scene{ width:52%; opacity:.8; }
  .hero-truck{ width:140px; }
  .hero-bus{ width:125px; }
}
@media (max-width:820px){
  .page-hero-road-scene{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .hero-road-img, .hero-truck, .hero-bus{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .hero-vehicle::after{ animation:none !important; opacity:1 !important; }
}


/* ---------- Gallery items: deal-like-a-deck entrance (slower, smoother) ---------- */
.gallery-grid .gallery-item.reveal{
  opacity:0;
  transform:translate(-90px,-40px) rotate(-22deg) scale(.85);
  transition:none;
}
.gallery-grid .gallery-item.reveal.is-visible{
  animation:wi-gallery-deal 1.1s cubic-bezier(.16,.9,.3,1) forwards;
  animation-delay:calc(200ms + var(--i, 0) * 110ms);
}
@keyframes wi-gallery-deal{
  0%{
    opacity:0;
    transform:translate(-90px,-40px) rotate(-22deg) scale(.85);
  }
  55%{
    opacity:1;
    transform:translate(4px,-2px) rotate(2deg) scale(1.015);
  }
  100%{
    opacity:1;
    transform:translate(0,0) rotate(0deg) scale(1);
  }
}

@media (max-width:640px){
  .gallery-grid .gallery-item.reveal{
    transform:translateY(-50px) rotate(-10deg) scale(.9);
  }
  @keyframes wi-gallery-deal{
    0%{ opacity:0; transform:translateY(-50px) rotate(-10deg) scale(.9); }
    55%{ opacity:1; transform:translateY(-2px) rotate(1deg) scale(1.015); }
    100%{ opacity:1; transform:translateY(0) rotate(0deg) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce){
  .gallery-grid .gallery-item.reveal{
    opacity:1 !important; transform:none !important; animation:none !important;
  }
}

.legal-section {
  padding-top: 60px;
  padding-bottom: 110px;
  background: #fbfbfc;
}
 
.legal-layout {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 56px;
  align-items: start;
}
 
/* ── TOC SIDEBAR ─────────────────────────────────────────── */
.legal-toc {
  position: sticky;
  top: 96px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 14px;
  padding: 26px 22px;
  box-shadow: 0 8px 30px rgba(20,20,30,0.06);
}
.toc-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--legal-grey);
  margin-bottom: 18px;
}
.toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  counter-reset: toc;
}
.toc-list li { counter-increment: toc; }
.toc-list li a {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 13.5px;
  color: var(--legal-grey);
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 8px;
  line-height: 1.4;
  transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease;
}
.toc-list li a:hover {
  color: var(--legal-black);
  background: var(--legal-light-grey);
}
.toc-list li a.is-active {
  color: var(--legal-red);
  background: rgba(204,34,41,0.07);
  font-weight: 600;
}
.toc-list li a::before {
  content: counter(toc);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--legal-light-grey);
  color: var(--legal-red);
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.toc-list li a.is-active::before {
  background: var(--legal-red);
  color: #fff;
}
 
/* ── CONTENT CARD ────────────────────────────────────────── */
.legal-content {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 18px;
  padding: 48px 56px;
  box-shadow: 0 10px 40px rgba(20,20,30,0.05);
}
 
.legal-intro {
  background: var(--legal-light-grey);
  border-left: 4px solid var(--legal-red);
  border-radius: 0 10px 10px 0;
  padding: 22px 26px;
  font-size: 16px;
  font-weight: 500;
  color: var(--legal-black);
  line-height: 1.75;
  letter-spacing: 0.1px;
  margin-bottom: 40px;
}
 
.legal-block {
  margin-bottom: 40px;
  padding-bottom: 40px;
  scroll-margin-top: 110px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  transition: background-color 0.6s ease;
  border-radius: 8px;
}
.legal-block:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
 
/* Brief highlight flash when a TOC link jumps to a section */
.legal-block:target {
  animation: legal-target-flash 1.6s ease;
}
@keyframes legal-target-flash {
  0%   { background-color: rgba(204, 34, 41, 0.06); }
  100% { background-color: transparent; }
}
 
.legal-block h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  font-size: 24px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--legal-black);
}
.legal-block h2::before {
  content: attr(data-num);
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--legal-black);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.legal-block h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--legal-grey);
  margin: 22px 0 10px;
}
.legal-block p {
  max-width: 70ch;
  font-size: 15px;
  color: #444;
  line-height: 1.85;
  margin-bottom: 14px;
}
.legal-block ul,
.legal-block ol {
  max-width: 70ch;
  padding-left: 22px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.legal-block ul li,
.legal-block ol li {
  font-size: 15px;
  color: #444;
  line-height: 1.75;
}
.legal-block strong { color: var(--legal-black); }
.legal-block a {
  color: var(--legal-red);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.legal-block a:hover { border-bottom-color: var(--legal-red); }
 
.legal-contact-box {
  background: var(--legal-light-grey);
  border-radius: 12px;
  padding: 22px 26px;
  font-size: 15px;
  color: var(--legal-black);
  line-height: 1.85;
  margin-top: 12px;
}
.legal-contact-box a { color: var(--legal-red); text-decoration: none; }
 
/* ── SCROLL-REVEAL ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
 
/* Slim scroll-progress bar tracking read progress of the page */
.legal-scroll-progress-track {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 999;
}
.legal-scroll-progress {
  height: 100%;
  background: var(--legal-red);
  width: 0%;
  transition: width 0.1s linear;
}
 
/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .legal-layout { grid-template-columns: 1fr; gap: 28px; padding: 0 18px; }
  .legal-toc { position: static; }
  .legal-content { padding: 32px 24px; }
  .legal-section { padding-top: 32px; }
  .legal-block p,
  .legal-block ul,
  .legal-block ol { max-width: 100%; }
}


/* indian map route  */
.stage{
  width:100vw;height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:0.8vh 0.8vw;
}
#india-svg{width:100%;height:100%;display:block;}

.state-path{
  fill:var(--state-fill); stroke:var(--line); stroke-width:0.7px;
  transition:fill 0.6s ease, filter 0.6s ease;
}
.state-path:hover{fill:var(--state-fill-hover);}
.state-path.visited{fill:#fce6b0;}
.state-path.active{fill:var(--gold);filter:url(#stateGlow);transition:fill 0.25s ease, filter 0.25s ease;}

.network-halo{fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;opacity:0.85;}
.network-line{fill:none;stroke:#bcc4b7;stroke-width:1.1px;stroke-linecap:round;stroke-linejoin:round;opacity:0.65;}
.active-halo{fill:none;stroke:#ffffff;stroke-linecap:round;stroke-linejoin:round;opacity:0.95;}
.active-route{
  fill:none;stroke:var(--red-light);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;
  filter:url(#routeGlow);
}
.active-route.green{stroke:var(--green-light);}
.active-route.yellow{stroke:var(--gold);}
.active-route.blue{stroke:#2f8fd1;}
.active-route-spark{
  fill:none;stroke:#fff7dd;stroke-width:1px;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1 13;animation:spark-march 1.1s linear infinite;opacity:0.9;
}
@keyframes spark-march{to{stroke-dashoffset:-14;}}

#india-svg{cursor:crosshair;}

.city-halo{fill:#ffffff;}
.city-dot{fill:var(--ink);stroke:#ffffff;stroke-width:1;}
.city-ring{fill:none;stroke:rgba(26,36,32,0.4);stroke-width:0.8;}
.city-label{
  font-family:'JetBrains Mono',monospace;font-size:7px;fill:var(--ink);
  font-weight:600;letter-spacing:0.1px;paint-order:stroke;stroke:#ffffff;stroke-width:2.4px;stroke-linejoin:round;
}

.flag .pole{stroke:#5b6a5f;stroke-width:0.8;}
.flag .cloth{animation:flag-wave 2.4s ease-in-out infinite;transform-origin:left center;}
@keyframes flag-wave{
  0%,100%{transform:skewY(0deg) scaleY(1);}
  50%{transform:skewY(-6deg) scaleY(0.96);}
}
.flag .wi-text{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:5.6px;fill:var(--ink);}

.vehicle-marker{will-change:transform;}
.veh-shadow{fill:#1a2420;opacity:0.28;}
.veh-pulse{transform-origin:center;animation:truck-pulse 1.6s ease-out infinite;}
@keyframes truck-pulse{
  0%{r:6;stroke-opacity:0.75;}
  100%{r:16;stroke-opacity:0;}
}
.tint-blue{filter:hue-rotate(205deg) saturate(1.4);}

.map-title{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  text-align:center;pointer-events:none;
}
.map-title h1{
  margin:0;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:19px;color:var(--ink);
  letter-spacing:0.2px;
}
.map-title p{
  margin:2px 0 0;font-family:'JetBrains Mono',monospace;font-weight:600;font-size:11px;color:#5a6a5e;
  letter-spacing:0.4px;
}

.legend{
  position:fixed;top:18px;left:18px;
  background:rgba(255,255,255,0.9);backdrop-filter:blur(6px);
  border:1px solid var(--line-soft);border-radius:12px;padding:10px 16px;
  display:flex;gap:16px;flex-wrap:wrap;box-shadow:0 6px 22px rgba(26,36,32,0.08);
  font-family:'JetBrains Mono',monospace;font-size:11px;color:#3a453e;
}
.legend b{color:var(--ink);font-family:'Plus Jakarta Sans';font-weight:800;margin-right:4px;}
.legend-item{display:flex;align-items:center;gap:6px;}
.legend-sw{width:18px;height:4px;border-radius:3px;}
.legend-sw.red{background:var(--red-light);}
.legend-sw.green{background:var(--green-light);}
.legend-sw.yellow{background:var(--gold);}

.brandmark{
  position:fixed;top:18px;right:18px;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,0.9);backdrop-filter:blur(6px);
  border:1px solid var(--line-soft);border-radius:100px;padding:7px 16px 7px 7px;
  box-shadow:0 6px 22px rgba(26,36,32,0.08);
}
.brandmark .sq{width:28px;height:28px;border-radius:7px;flex:none;
  background:linear-gradient(150deg,var(--green) 0 33%, #fff 33% 66%, var(--red) 66% 100%);
  display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08);}
.brandmark .sq span{font-family:'Plus Jakarta Sans';font-weight:800;font-size:10px;color:var(--ink);
  background:rgba(255,255,255,0.95);padding:1px 4px;border-radius:4px;}
.brandmark p{margin:0;font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:600;color:var(--ink);white-space:nowrap;}


/* ============================================================
   PAGINATION
   ============================================================ */
.wi-pagination{ display:flex; justify-content:center; margin-top:10px; }
.wi-pagination ul{
    display:flex;
    align-items:center;
    gap:6px;
    list-style:none;
    margin:0;
    padding:0;
}
.wi-page-item a,
.wi-page-item span{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 8px;
    border:1px solid #e2e2e2;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    color:#333;
    text-decoration:none;
    background:#fff;
    transition:all .2s ease;
}
.wi-page-item a:hover{
    border-color:#1f9254;
    color:#1f9254;
}
.wi-page-item.active span{
    background:#1f9254;
    border-color:#1f9254;
    color:#fff;
}
.wi-page-item.disabled span{
    color:#c7c7c7;
    background:#fafafa;
    cursor:not-allowed;
}

/* ---------- Why Partner section: full responsive fix ---------- */
@media (max-width: 1080px){
  .strengths-wrap{
    gap:36px;
  }
  .why-panel{
    padding:28px;
  }
}

@media (max-width: 640px){
  .strengths-wrap{
    gap:28px;
  }
  .strength-list{
    gap:18px;
  }
  .strength-item{
    gap:12px;
  }
  .strength-check{
    width:28px;
    height:28px;
    font-size:.85rem;
  }
  .strength-item h3{
    font-size:.95rem;
  }
  .strength-item p{
    font-size:.85rem;
  }
  .why-panel{
    padding:22px;
    border-radius:var(--radius);
  }
  .why-panel h3{
    font-size:1.05rem;
    margin-bottom:10px !important;
  }
  .why-panel p{
    font-size:.88rem;
  }
  /* Typewriter heading: let it wrap normally on small screens instead
     of clipping to a single nowrap line */
  
}

@media (max-width: 400px){
  .why-panel{
    padding:18px;
  }
  .strength-check{
    width:26px;
    height:26px;
  }
}

/* Global overflow safety net — prevents any single element from
   pushing the whole page wider than the viewport on mobile */
html, body{
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 640px){
  .strengths-wrap *{
    max-width: 100%;
  }
  .strengths-wrap h1,
  .strengths-wrap h2,
  .strengths-wrap h3{
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word;
  }
}

.footer-col-categories {
    position: relative;
}

.footer-cat-item {
    position: relative;
}

.footer-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.footer-cat-chev {
    flex-shrink: 0;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.footer-cat-item:hover .footer-cat-chev {
    transform: translateX(2px);
}

.footer-cat-flyout {
    position: absolute;
    left: calc(100% + 0px);   /* small gap instead of touching */
    top: 0;
    min-width: 200px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 50;
}

.footer-cat-item:hover .footer-cat-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.footer-cat-item:hover .footer-cat-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.footer-cat-flyout a {
    padding: 8px 18px;
    color: #333;
    white-space: nowrap;
}

.footer-cat-flyout a:hover {
    background: #f4f4f8;
    color: #2c2c8d;
}

.footer-cat-flyout-all {
    font-weight: 600;
    border-bottom: 1px solid #eee;
    margin-bottom: 4px;
    padding-bottom: 10px !important;
}

/* Mobile: flyout doesn't work well on touch, so just let it stack/click-through instead */
@media (max-width: 768px) {
    .footer-cat-flyout {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        display: none;
        padding-left: 10px;
    }
    .footer-cat-item.active .footer-cat-flyout {
        display: flex;
    }
}

.wi-typewriter{
  display:inline;
}
.wi-typewriter .wi-word{
  display:inline-block;
  opacity:0;
  transform:translateY(18px);
  filter:blur(4px);
  transition:none;
}
.reveal.is-visible .wi-typewriter .wi-word{
  animation:wi-word-in 1s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:var(--wd, 0ms);
}
@keyframes wi-word-in{
  to{ opacity:1; transform:translateY(0); filter:blur(0); }
}

@media (prefers-reduced-motion: reduce){
  .wi-typewriter .wi-word{
    opacity:1 !important; transform:none !important; filter:none !important; animation:none !important;
  }
}