:root{
  /* All Timez — Denim Heritage Palette */

  --navy:#173B56;
  --denim:#3E6B89;
  --washed-blue:#8FAFC2;

  --rust:#A9673F;
  --gold:#C89A58;

  --cream:#F4F0E6;
  --stone:#DDD9CF;

  --ink:#20282D;
  --muted:#687178;

  --olive:#68745F;

  --white:#FFFFFF;

  --shadow:0 24px 70px rgba(23,59,86,.13);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:#fff}
img,video{max-width:100%;display:block}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:1rem;top:1rem;z-index:99;background:#fff;padding:.75rem}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(15,36,48,.08)}
.nav{max-width:1180px;margin:auto;display:flex;align-items:center;gap:1.5rem;padding:1rem}
.logo{font-family:'Playfair Display',serif;font-size:1.7rem;font-weight:800;color:var(--navy);text-decoration:none;margin-right:auto}
.logo span{color:var(--rust)}
.nav-links{display:flex;gap:1rem}
.nav-links a,.footer a,.text-link{color:var(--navy);font-weight:700;text-decoration:none}
.nav-links a:hover{color:var(--denim);}
.nav-cta,.btn{border:0;border-radius:999px;padding:.9rem 1.25rem;font-weight:800;text-decoration:none;display:inline-flex;justify-content:center;cursor:pointer}
.primary{
  background:linear-gradient(
    135deg,
    var(--navy),
    var(--denim)
  );
  color:#fff;
  box-shadow:0 12px 30px rgba(23,59,86,.25);
}
.secondary{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.4)}
.nav-toggle{display:none}
.hero{min-height:760px;position:relative;display:grid;align-items:center;overflow:hidden;color:#fff}
.hero-media,.hero-media video,.hero-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-media{background:url('https://images.unsplash.com/photo-1523381294911-8d3cead13475?auto=format&fit=crop&w=1600&q=85') center/cover}
.hero-overlay{background:linear-gradient(90deg,rgba(15,36,48,.9),rgba(15,36,48,.62),rgba(15,36,48,.22))}
.hero-content{position:relative;max-width:820px;padding:8rem max(1.2rem,calc((100vw - 1180px)/2))}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--rust);font-weight:800;font-size:.8rem}
.hero .eyebrow{color:var(--gold)}
h1,h2{font-family:'Playfair Display',serif;line-height:1.02;margin:.25rem 0 1rem;color:var(--navy)}
h1{font-size:clamp(3rem,7vw,6.8rem);color:#fff}
h2{font-size:clamp(2.1rem,4vw,4rem)}
h3{margin:.25rem 0;color:var(--navy)}
.hero p{font-size:1.2rem;max-width:650px}
.hero-actions{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.section{max-width:1180px;margin:auto;padding:6rem 1rem}
.about,.why,.contact{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;align-items:center}
.section-copy p,.contact-copy p{font-size:1.05rem;color:var(--muted);line-height:1.8}
.about-card{background:var(--navy);color:#fff;border-radius:2rem;padding:2.25rem;box-shadow:var(--shadow);border-bottom:8px solid var(--rust)}
.about-card strong{font-size:1.4rem}
.about-card p{line-height:1.8;color:#edf5f6}
.about-card span{display:block;margin-top:.7rem;color:#ffe3ba}
.centered{text-align:center;max-width:760px;margin:0 auto 2.3rem}
.product-grid,.why-grid,.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.product-grid article,.why-grid div{background:#fff;border:1px solid #eee2d4;border-radius:1.5rem;padding:1.5rem;box-shadow:0 16px 45px rgba(15,36,48,.08);transition:.25s}
.product-grid article:hover,.why-grid div:hover{transform:translateY(-6px)}
.product-grid span{font-weight:900;color:var(--rust)}
.product-grid p,.why-grid p{color:var(--muted);line-height:1.7}
.highlight{background:linear-gradient(135deg,var(--navy),#1f4957)!important;color:#fff}
.highlight h3,.highlight p{color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;background:var(--cream);max-width:none;padding-inline:max(1rem,calc((100vw - 1180px)/2))}
.stat{background:#fff;border-radius:1.4rem;padding:2rem;text-align:center;border:1px solid rgba(23,59,86,.08);}
.stat strong{font-family:'Playfair Display',serif;font-size:3rem;color:var(--navy);display:block}
.stat span{font-weight:800}
.gallery-grid img{height:300px;width:100%;object-fit:cover;border-radius:1.5rem;box-shadow:var(--shadow)}
.contact{background:var(--navy);max-width:none;padding-inline:max(1rem,calc((100vw - 1180px)/2));color:#fff}
.contact h2{color:#fff}
.contact p{color:#D8E3E9;}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;background:#fff;padding:1.4rem;border-radius:1.6rem;color:var(--navy)}
label{font-weight:800}
input,textarea{width:100%;margin-top:.45rem;border:1px solid #dbe2e5;border-radius:.9rem;padding:.9rem;font:inherit}
.full{grid-column:1/-1}
.footer{padding:2rem 1rem;text-align:center;background:#102D42;color:#C9D7DE;}
.footer a{color:#DCE9EF}
.floating-whatsapp{position:fixed;right:1.2rem;bottom:1.2rem;width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:#25d366;color:#fff;text-decoration:none;font-size:1.6rem;box-shadow:0 14px 35px rgba(0,0,0,.25);z-index:30}

@media(max-width:850px){.nav{flex-wrap:wrap}
.nav-toggle{display:block}
.nav-links{display:none;flex-basis:100%;flex-direction:column}
.nav-links.open{display:flex}
.nav-cta{display:none}
.about,.why,.contact,.product-grid,.why-grid,.gallery-grid,.stats{grid-template-columns:1fr}
.hero{min-height:680px}
.contact-form{grid-template-columns:1fr}
}

.top-strip{display:flex;justify-content:space-around;gap:2rem;flex-wrap:wrap;padding:.65rem 1rem;background:var(--navy);color:#f6dcc0;font-size:.86rem;font-weight:800;letter-spacing:.04em}
.hero::after{content:"Wholesale Kidswear";position:absolute;right:-5rem;bottom:2rem;font-family:'Playfair Display',serif;font-size:clamp(4rem,10vw,10rem);font-weight:800;color:rgba(255,255,255,.08);white-space:nowrap;pointer-events:none}
.hero-content::before{content:"";position:absolute;left:max(1.2rem,calc((100vw - 1180px)/2));top:6rem;width:92px;height:92px;border:18px solid var(--gold);border-radius:50%;opacity:.85;transform:translate(-35%,-35%)}
.product-grid article{position:relative;overflow:hidden;min-height:210px}
.product-grid article::after{content:"";position:absolute;right:-36px;bottom:-36px;width:110px;height:110px;background:radial-gradient(circle,var(--gold),transparent 62%);opacity:.34}
.image-band{max-width:1180px;margin:0 auto;padding:0 1rem 6rem;display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:1.25rem;align-items:center}
.band-card{position:relative;border-radius:2rem;overflow:hidden;min-height:290px;box-shadow:var(--shadow);transform:rotate(2deg)}
.band-card.tall{min-height:430px;transform:rotate(-2deg)}
.band-card img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:saturate(1.08)}
.band-card span{position:absolute;left:1rem;bottom:1rem;background:#fff;border-radius:999px;padding:.75rem 1rem;font-weight:900;color:var(--navy)}
.band-copy{background:var(--cream);border-radius:2rem;padding:2.4rem;border:1px solid rgba(23,59,86,.14);position:relative;overflow:hidden}
.band-copy::after{content:"";position:absolute;right:-55px;top:-55px;width:170px;height:170px;background:var(--washed-blue);border-radius:45% 55% 50% 50%;opacity:.25}
.numbered span{font-family:'Playfair Display',serif;font-size:2.6rem;color:var(--rust);font-weight:800}
.gallery-grid{grid-template-columns:1fr 1fr 1fr 1fr}
/* .gallery-grid img:nth-child(1){grid-row:span 2;height:620px}
.gallery-grid img:nth-child(3){height:390px} */
.floating-whatsapp svg{width:34px;height:34px;fill:#fff}
.floating-whatsapp{font-size:0}
@media(max-width:850px){.top-strip{gap:.75rem}.image-band,.gallery-grid{grid-template-columns:1fr}.band-card,.band-card.tall{min-height:450px;transform:none}.gallery-grid img:nth-child(1),.gallery-grid img:nth-child(3){height:300px}.hero-content::before{display:none}}
.hero h1{font-size:clamp(2rem,4.5vw,4.4rem);max-width:720px;background:rgba(15,36,48,.18);border-left:8px solid var(--gold);padding:1rem 1.25rem;border-radius:0 1.4rem 1.4rem 0;box-shadow:0 24px 80px rgba(0,0,0,.2)}
.hero-media::after{content:"";position:absolute;right:7%;top:18%;width:230px;height:230px;border-radius:38% 62% 44% 56%;background:linear-gradient(135deg,rgba(242,184,75,.82),rgba(199,119,47,.2));mix-blend-mode:screen;filter:blur(.2px)}
.about-image-card{position:relative;min-height:520px;border-radius:2rem;overflow:hidden;box-shadow:var(--shadow);background:var(--cream)}
.about-image-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.08);object-position: top;}
.about-image-card div{position:absolute;left:1.25rem;right:1.25rem;bottom:1.25rem;background:rgba(255,255,255,.94);border-radius:1.25rem;padding:1rem 1.2rem;display:grid;gap:.25rem;color:var(--navy)}
.about-image-card strong{font-family:'Playfair Display',serif;font-size:1.55rem}
.product-grid article img{width:100%;height:396px;object-fit:cover;border-radius:1.1rem;margin-bottom:1rem;filter:saturate(1.08)}
.product-grid article.highlight{display:grid;align-content:center}
.why{grid-template-columns:1fr;align-items:start}
.why .section-copy{max-width:760px}
.why-list{display:grid;gap:1rem}
.why-list div{display:grid;grid-template-columns:110px 220px 1fr;gap:1rem;align-items:center;background:#fff;border:1px solid #eee2d4;border-radius:1.4rem;padding:1.2rem 1.4rem;box-shadow:0 16px 45px rgba(15,36,48,.08);transition:.25s}
.why-list div:hover{transform:translateX(8px);border-color:var(--gold)}
.why-list h3{margin:0}
.why-list p{margin:0;color:var(--muted);line-height:1.7}
.gallery-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;grid-auto-flow:dense}
.gallery-grid img{height:100%;min-height:0}
/* .gallery-grid img:nth-child(1){grid-column:span 2;grid-row:span 2;height:100%}
.gallery-grid img:nth-child(2){grid-row:span 2}
.gallery-grid img:nth-child(3){height:100%;grid-column:span 1;grid-row:span 1}
.gallery-grid img:nth-child(5){grid-column:span 2}
.gallery-grid img:nth-child(7){grid-column:span 2} */
@media(max-width:850px){.hero h1{font-size:clamp(1.8rem,9vw,3.1rem)}.about-image-card{min-height:360px}.product-grid article img{height:auto}.why-list div{grid-template-columns:1fr}.gallery-grid{grid-template-columns:1fr;grid-auto-rows:auto}.gallery-grid img:nth-child(n){grid-column:auto;grid-row:auto;height:100%}}




.hero-content::before{display:none}
.why-list{grid-template-columns:repeat(2,1fr)}
.why-list div{grid-template-columns:1fr;align-items:start;min-height:230px}
.why-list div:hover{transform:translateY(-6px);border-color:var(--gold)}
@media(max-width:850px){.why-list{grid-template-columns:1fr}}

/* Refinements: cleaner banner, visual why cards and denim zipper loader */
.hero-media::after{display:none}
.why-list div{position:relative;overflow:hidden;padding:1.5rem}
.why-icon{width:64px;height:64px;border-radius:1.1rem;display:grid;place-items:center;background:linear-gradient(135deg,#edf5f6,#fff8ec);font-style:normal;font-size:2rem;box-shadow:inset 0 0 0 1px rgba(15,36,48,.08),0 12px 26px rgba(15,36,48,.1)}
.why-list div::after{content:"";position:absolute;right:-34px;top:-34px;width:118px;height:118px;border-radius:34% 66% 46% 54%;background:rgba(15,36,48,.06)}


.validation-message{display:block;margin-top:.35rem;color:#b54124;font-size:.82rem;font-weight:800}
input:invalid:not(:placeholder-shown),textarea:invalid:not(:placeholder-shown){border-color:#b54124;box-shadow:0 0 0 3px rgba(181,65,36,.12)}


/* ================================
   MOBILE HEADER - PREMIUM
================================ */

.nav {
  min-height: 78px;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  width: 180px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
}

/* Hamburger */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(15, 36, 48, 0.12);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  box-shadow: 0 5px 18px rgba(15, 36, 48, 0.08);
}

.nav-toggle span {
  display: block;
  width: 21px;
  height: 2px;
  border-radius: 10px;
  background: var(--navy);
  transition: transform .25s ease, opacity .2s ease;
}

/* Desktop */
.nav-links {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.nav-links a {
  position: relative;
  padding: .4rem 0;
}

/* ================================
   MOBILE
================================ */

@media (max-width: 850px) {

  .site-header {
    position: sticky;
    top: 0;
  }

  .nav {
    min-height: 68px;
    height: 68px;
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 0;
    position: relative;
  }

  .logo {
    margin-right: auto;
  }

  .logo img {
    width: 145px;
    max-height: 46px;
  }

  .nav-toggle {
    display: flex;
    flex-shrink: 0;
    z-index: 5;
  }

  /* Open hamburger animation */
  .nav-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Mobile dropdown */
  .nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: 68px;

    display: flex;
    flex-direction: column;
    gap: 0;

    background: rgba(255,255,255,.98);
    backdrop-filter: blur(14px);

    border-top: 1px solid rgba(15,36,48,.08);
    box-shadow: 0 18px 35px rgba(15,36,48,.12);

    padding: .5rem 1rem 1rem;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);

    transition:
      opacity .25s ease,
      transform .25s ease,
      visibility .25s ease;

    z-index: 10;
  }

  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-links a {
    width: 100%;
    padding: 1rem .5rem;
    border-bottom: 1px solid rgba(15,36,48,.07);
    font-size: 1rem;
  }

  .nav-links a:last-child {
    border-bottom: 0;
  }

  .nav-links a:active {
    background: var(--cream);
  }

}
/* =========================================================
   ALL TIMEZ — PREMIUM ZIPPER PAGE LOADER
   ========================================================= */

.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #071522;
  isolation: isolate;
}

/* ---------------------------------------------------------
   PREMIUM DENIM / FABRIC BACKGROUND
   --------------------------------------------------------- */

.page-loader::before,
.page-loader::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 1;
  background:
    radial-gradient(
      ellipse at 50% 45%,
      rgba(71, 121, 164, .28),
      transparent 55%
    ),
    repeating-linear-gradient(
      55deg,
      rgba(255,255,255,.035) 0px,
      rgba(255,255,255,.035) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      125deg,
      rgba(0,0,0,.16) 0px,
      rgba(0,0,0,.16) 1px,
      transparent 1px,
      transparent 6px
    ),
    linear-gradient(
      135deg,
      #061522 0%,
      #123552 45%,
      #081c2d 100%
    );

  transition:
    transform 1.25s cubic-bezier(.76,0,.24,1),
    filter 1.25s ease;
}

.page-loader::before {
  left: 0;
  transform-origin: left center;
}

.page-loader::after {
  right: 0;
  transform-origin: right center;
}


/* ---------------------------------------------------------
   SOFT LIGHT BEHIND ZIPPER
   --------------------------------------------------------- */

.page-loader {
  --zip-light: 0;
  --opening: 0;
}

.page-loader .zip-track::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 14px;
  height: 100%;
  transform: translateX(-50%);
  z-index: 3;

  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255,255,255,.05) 15%,
    rgba(255,214,120,.15) 40%,
    rgba(255,244,190,.7) 75%,
    rgba(255,255,255,1) 100%
  );

  opacity: .15;

  filter: blur(3px);

  box-shadow:
    0 0 25px rgba(255,210,100,.35),
    0 0 70px rgba(255,235,170,.18);
}


/* ---------------------------------------------------------
   CENTER ZIPPER TRACK
   --------------------------------------------------------- */

.zip-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 190px;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}


/* ---------------------------------------------------------
   ZIPPER FABRIC TAPES
   --------------------------------------------------------- */

.zip-track::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 118px;
  transform: translateX(-50%);
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      #03070b 0%,
      #111820 20%,
      #1d2730 45%,
      #0b1117 70%,
      #020509 100%
    );

  box-shadow:
    inset 8px 0 14px rgba(255,255,255,.035),
    inset -8px 0 14px rgba(0,0,0,.65),
    0 0 0 1px rgba(0,0,0,.8);

  clip-path: polygon(
    15% 0,
    85% 0,
    68% 100%,
    32% 100%
  );
}


/* ---------------------------------------------------------
   ZIP TEETH
   --------------------------------------------------------- */

.zip-teeth {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 25px;
  transform: translateX(-50%);
  z-index: 4;

  background:
    repeating-linear-gradient(
      to bottom,
      #51350e 0px,
      #51350e 3px,
      #d18a16 3px,
      #d18a16 7px,
      #ffe29a 7px,
      #ffe29a 10px,
      #e49b20 10px,
      #e49b20 14px,
      #58370c 14px,
      #58370c 18px
    );

  box-shadow:
    0 0 0 2px #1b1105,
    0 0 0 6px rgba(0,0,0,.55),
    0 0 20px rgba(255,180,40,.2);

  transition:
    box-shadow .25s ease,
    filter .25s ease;
}


/* ---------------------------------------------------------
   ZIPPER PULL
   --------------------------------------------------------- */

.zip-handle {
  position: absolute;
  left: 50%;
  top: -130px;

  width: 62px;
  height: 112px;

  transform: translateX(-50%);
  z-index: 8;

  border-radius: 11px;

  background:
    linear-gradient(
      90deg,
      #633b08 0%,
      #b56b0b 18%,
      #ffc64d 40%,
      #fff0a5 51%,
      #e1971d 67%,
      #7a4908 88%,
      #3e2505 100%
    );

  border: 1px solid rgba(255,238,173,.65);

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.15),
    inset 0 -14px 20px rgba(67,35,0,.3),
    0 12px 28px rgba(0,0,0,.5);

  font-size: 0;
}


/* Puller hole */

.zip-handle::before {
  content: "";

  position: absolute;
  left: 50%;
  top: 16px;

  width: 23px;
  height: 48px;

  transform: translateX(-50%);

  border-radius: 9px;

  border: 7px solid #513209;

  background:
    linear-gradient(
      145deg,
      #070d12,
      #17242e
    );

  box-shadow:
    inset 0 0 10px rgba(255,255,255,.08);
}


/* Pull tab */

.zip-handle::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: -63px;

  width: 33px;
  height: 76px;

  transform: translateX(-50%);

  border: 9px solid #d78612;
  border-top: 0;

  border-radius:
    0 0 18px 18px;

  box-shadow:
    0 8px 15px rgba(0,0,0,.35);
}


/* ---------------------------------------------------------
   CENTER LIGHT — THE "OPENING"
   --------------------------------------------------------- */

.zip-track {
  filter:
    drop-shadow(0 20px 30px rgba(0,0,0,.5));
}

.zip-track::marker {
  display: none;
}


/* Additional glow layer */

.page-loader .zip-track {
  --glow: 0;
}

.page-loader .zip-track::before {
  opacity: calc(.2 + var(--zip-light) * .8);
}


/* ---------------------------------------------------------
   BRANDING
   --------------------------------------------------------- */

.loader-copy {
  position: absolute;
  left: 8%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;

  color: #fff;

  text-shadow:
    0 10px 30px rgba(0,0,0,.45);
}

.loader-copy span {
  display: block;

  margin-bottom: .5rem;

  color: #f5a623;

  font-family: Manrope, Arial, sans-serif;
  font-size: clamp(.75rem, 1.2vw, 1rem);
  font-weight: 800;

  letter-spacing: .28em;
  text-transform: uppercase;
}

.loader-copy strong {
  display: block;

  font-family: "Playfair Display", serif;

  font-size: clamp(3rem, 6vw, 6.5rem);
  line-height: .9;

  color: #fff;
}

.loader-copy strong::after {
  content: "";

  display: block;

  width: 130px;
  height: 4px;

  margin-top: 1.2rem;

  border-radius: 100px;

  background:
    linear-gradient(
      90deg,
      #f6a623,
      #ffe19a,
      transparent
    );
}


/* ---------------------------------------------------------
   BEFORE PAGE IS READY
   --------------------------------------------------------- */

.page-loader .zip-handle {
  top: -130px;
}


/* ---------------------------------------------------------
   WHEN PAGE IS READY — START EVERYTHING
   --------------------------------------------------------- */

body.loader-ready .zip-handle {

  animation:
    zipperPullDown
    2.4s
    cubic-bezier(.22,.8,.18,1)
    forwards;
}

body.loader-ready .zip-teeth {

  animation:
    zipperGlow
    2.4s
    cubic-bezier(.22,.8,.18,1)
    forwards;
}

body.loader-ready .page-loader::before {

  animation:
    fabricOpenLeft
    1.35s
    cubic-bezier(.76,0,.24,1)
    2.15s
    forwards;
}

body.loader-ready .page-loader::after {

  animation:
    fabricOpenRight
    1.35s
    cubic-bezier(.76,0,.24,1)
    2.15s
    forwards;
}

body.loader-ready .loader-copy {

  animation:
    loaderBrandExit
    .8s
    ease
    1.45s
    forwards;
}


/* ---------------------------------------------------------
   BRIGHT LIGHT
   --------------------------------------------------------- */

body.loader-ready .zip-track::before {
  animation:
    zipperLight
    2.4s
    cubic-bezier(.2,.8,.15,1)
    forwards;
}


/* ---------------------------------------------------------
   FINAL FADE
   --------------------------------------------------------- */

body.loader-ready .page-loader {

  animation:
    loaderFadeOut
    .9s
    cubic-bezier(.4,0,.2,1)
    3.15s
    forwards;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */


/* Pull travels from top to bottom */

@keyframes zipperPullDown {

  0% {
    top: -130px;
    transform:
      translateX(-50%)
      scale(.92);
  }

  12% {
    transform:
      translateX(-50%)
      scale(1);
  }

  48% {
    top: 48%;
  }

  78% {
    top: 84%;
  }

  100% {
    top: 112%;
    transform:
      translateX(-50%)
      scale(.97);
  }
}


/* Teeth become brighter */

@keyframes zipperGlow {

  0% {
    filter: brightness(.7);
    box-shadow:
      0 0 0 2px #1b1105,
      0 0 0 6px rgba(0,0,0,.55),
      0 0 15px rgba(255,180,40,.1);
  }

  35% {
    filter: brightness(1.05);
  }

  65% {
    filter: brightness(1.3);
  }

  100% {
    filter: brightness(1.7);
    box-shadow:
      0 0 0 2px #1b1105,
      0 0 0 6px rgba(0,0,0,.45),
      0 0 30px rgba(255,190,65,.7),
      0 0 80px rgba(255,230,160,.35);
  }
}


/* Light follows zipper */

@keyframes zipperLight {

  0% {
    opacity: .08;
    width: 8px;
    filter: blur(12px);
  }

  25% {
    opacity: .18;
    width: 16px;
    filter: blur(10px);
  }

  50% {
    opacity: .35;
    width: 30px;
    filter: blur(8px);
  }

  75% {
    opacity: .65;
    width: 60px;
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    width: 110px;
    filter: blur(12px);

    box-shadow:
      0 0 35px rgba(255,215,120,.9),
      0 0 90px rgba(255,235,170,.75),
      0 0 180px rgba(255,255,255,.55);
  }
}


/* Fabric splits */

@keyframes fabricOpenLeft {

  0% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(-7%);
  }

  100% {
    transform: translateX(-105%);
  }
}


@keyframes fabricOpenRight {

  0% {
    transform: translateX(0);
  }

  70% {
    transform: translateX(7%);
  }

  100% {
    transform: translateX(105%);
  }
}


/* Branding disappears */

@keyframes loaderBrandExit {

  0% {
    opacity: 1;
    transform: translateY(-50%);
  }

  100% {
    opacity: 0;
    transform: translateY(-65%);
  }
}


/* Final fade */

@keyframes loaderFadeOut {

  0% {
    opacity: 1;
    visibility: visible;
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

  .loader-copy {
    left: 1.5rem;
    top: 20%;
  }

  .loader-copy strong {
    font-size: 3rem;
  }

  .loader-copy strong::after {
    width: 90px;
    height: 3px;
    margin-top: .8rem;
  }

  .zip-track {
    width: 145px;
  }

  .zip-track::after {
    width: 88px;
  }

  .zip-teeth {
    width: 21px;
  }

  .zip-handle {
    width: 52px;
    height: 92px;
  }

  .zip-handle::before {
    width: 19px;
    height: 40px;
    border-width: 6px;
  }

  .zip-handle::after {
    width: 28px;
    height: 62px;
    bottom: -52px;
    border-width: 7px;
  }
}


/* Reduced motion accessibility */

@media (prefers-reduced-motion: reduce) {

  .page-loader,
  .page-loader *,
  .page-loader::before,
  .page-loader::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

}
/* =========================================================
   GOOGLE TRANSLATE - PREMIUM LANGUAGE SELECTOR
   ========================================================= */

.language-switcher {
  display: flex;
  align-items: center;
  margin-left: .6rem;
  position: relative;
  z-index: 9999;
}

#google_translate_element {
  display: flex;
  align-items: center;
}

/* Google gadget */

.goog-te-gadget {
  font-family: Manrope, Arial, sans-serif !important;
  font-size: 0 !important;
  color: transparent !important;
}

/* Language dropdown */

.goog-te-gadget .goog-te-combo {
  width: 145px;
  height: 42px;

  margin: 0 !important;
  padding: 0 1rem 0 1rem;

  border: 1px solid rgba(15, 36, 48, .13);
  border-radius: 999px;

  background: #fff;

  color: var(--navy);

  font-family:
    "Noto Sans Devanagari",
    "Noto Sans Gujarati",
    "Noto Sans Bengali",
    "Noto Sans Tamil",
    "Noto Sans Telugu",
    "Noto Sans Kannada",
    "Noto Sans Malayalam",
    Manrope,
    Arial,
    sans-serif;

  font-size: .82rem;
  font-weight: 800;

  cursor: pointer;
  outline: none;

  box-shadow:
    0 6px 20px rgba(15,36,48,.08);

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

.goog-te-gadget .goog-te-combo:hover {
  border-color: var(--gold);

  box-shadow:
    0 8px 24px rgba(15,36,48,.12);
}

.goog-te-gadget .goog-te-combo:focus {
  border-color: var(--gold);

  box-shadow:
    0 0 0 3px rgba(242,184,75,.15),
    0 8px 24px rgba(15,36,48,.1);
}


/* =========================================================
   GOOGLE TRANSLATE TOP BAR - HIDE
   ========================================================= */

/* Google translation iframe */

iframe.goog-te-banner-frame,
iframe.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;

  height: 0 !important;
  width: 0 !important;

  border: 0 !important;
}

/* Google sometimes uses this iframe */

body > .skiptranslate {
  display: none !important;
}

/* Prevent Google from pushing the website down */

html,
body {
  top: 0 !important;
}

/* Google adds inline positioning to body */

body {
  position: static !important;
  margin-top: 0 !important;
}


/* Remove Google branding */

.goog-logo-link {
  display: none !important;
}

.goog-te-gadget span {
  display: none !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

  .language-switcher {
    position: absolute;

    right: 4.5rem;
    top: 50%;

    transform: translateY(-50%);

    margin: 0;
  }

  .goog-te-gadget .goog-te-combo {
    width: 115px;
    height: 40px;

    font-size: .78rem;
  }

}
/* =========================================
   IMAGE BAND - PREMIUM MIDDLE CARD
   ========================================= */

.band-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem 2.5rem;
  background: #fff8ec;
  border:1px solid rgba(23,59,86,.14);
  border-radius: 0 0 30px 30px;
  overflow: hidden;
}

/* subtle decorative circle */
.band-copy::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(242, 184, 75, 0.14);
  top: -85px;
  right: -55px;
  pointer-events: none;
}

.band-copy .eyebrow {
  position: relative;
  margin: 0 0 0.8rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:var(--rust);
}

.band-copy h2 {
  position: relative;
  margin: 0 0 1.1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 3.2vw, 3.7rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #102b38;
}

.band-intro {
  position: relative;
  margin: 0 0 1.5rem;
  font-size: 0.91rem;
  line-height: 1.55;
  color: #233943;
}

.band-intro strong {
  font-weight: 800;
  color: #102b38;
}


/* Feature blocks */

.band-highlights {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.band-highlight {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(15, 36, 48, 0.12);
}

.band-highlight:last-child {
  border-bottom: 1px solid rgba(15, 36, 48, 0.12);
}

.highlight-number {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:var(--navy);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.highlight-content {
  min-width: 0;
}

.highlight-content h3 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.1;
  font-weight: 800;
  color: #102b38;
}

.highlight-content span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  color:var(--rust);
}

.highlight-content p {
  margin: 0.3rem 0 0;
  font-size: 0.76rem;
  line-height: 1.4;
  color: #40515a;
}

.highlight-content strong {
  font-weight: 800;
  color: #102b38;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 1050px) {
  .band-copy {
    padding: 2.5rem 2rem;
  }

  .band-copy h2 {
    font-size: 2.7rem;
  }
}

@media (max-width: 850px) {
  .band-copy {
    padding: 2.5rem 1.5rem;
    border-radius: 0 0 24px 24px;
  }

  .band-copy h2 {
    font-size: 2.5rem;
  }
}
.gallery-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
   border:1px solid rgba(23,59,86,.08);
}

.gallery-item:hover img {
  transform: translateY(-4px);
  box-shadow:0 18px 40px rgba(23,59,86,.16);
}

.gallery-item figcaption {
  padding: 0 0.25rem;
  color: var(--navy);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.4rem 1.5rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.footer-inner p {
  margin: 0;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.footer-socials a {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  color:#DCE9EF;
  border: 1px solid rgba(220,233,239,.22);
  border-radius: 50%;

  text-decoration: none;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}


.footer-socials svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: rgb(194 200 195);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-socials a:nth-child(2) svg {
  fill: rgb(194 200 195);
  stroke: none;
}

.footer-socials a:hover {
  background:#fff;
  color:var(--navy);
  border-color:#fff;
  transform: translateY(-2px);
}

.top-strip .footer-socials svg {
  width: 17px;
  height: 17px;

  fill: none;
  stroke: rgb(225 220 192);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-strip.footer-socials a:nth-child(2) svg {
  fill: rgb(225 220 192);
  stroke: none;
}

.top-strip.footer-socials svg:hover {
  stroke: rgb(23 59 86);
}

@media (max-width: 650px) {
  .footer-inner {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
}
/* =========================================
   HERO — DESKTOP / MOBILE VIDEOS
   ========================================= */

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-video {
  display: none;
}


/* Mobile */
@media (max-width: 850px) {

  .desktop-video {
    display: none;
  }

  .mobile-video {
    display: block;
  }

}
.top-strip a {
    color: #f6dcc0;
}