@import url(https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);
/* ---------- brand typeface (from creative) ---------- */
@font-face {
  font-family: 'Typewriter Condensed';
  src: url('../fonts/typewcond_regular.woff2') format('woff2'),
       url('../fonts/typewcond_regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Typewriter Condensed Bold';
  src: url('../fonts/typewcond_bold.woff2') format('woff2'),
       url('../fonts/typewcond_bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.video-box{
  width:700px;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:24px;
}

.video-box video{
  width:100%;
  height:100%;
  object-fit:cover;
} 


:root {
  --red: #ff0000;
  --urja-red-dark: #e91919;
  --ink: #1a1a1a;
  --cream: #fff;
  --blue-bubble: #2f8fe0;
  --gold: #f4c93b;
  --yarn-teal: #2c9c95;
  --yarn-purple: #8b5fbf;

  --black:#000000;

 --paper:#F1ECDC;
 --ink:#fff;
 --ink-soft:#262B27;
 --ink-softer:#30352F;
 --stamp:#B8452F;
 --stamp-bright:#D65B3E;
  --hero-orange:#ff521d;
 --hero-lime:#b8ff00;
 --hero-black:#111111;
 --pink:#ff0072;
 --line: rgba(241,236,220,0.16);
 --line-strong: rgba(241,236,220,0.32);
 --display: "Typewriter Condensed",sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
 html{scroll-behavior:auto;}
 *,*::before,*::after{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
 color:var(--black);
 font-family:var(--display);
 font-size:16px;
 line-height:1.65;
 -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}

::selection{background:var(--stamp); color:var(--paper);}

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

h1,h2,h3,.display{
 font-family:var(--display);
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:.01em;
 line-height:1.3;
 margin:0;
}

section{
 padding:2rem 0;
}

/* ============ NAV ============ */
.site-nav{
 position:fixed;
 top:0; left:0; right:0;
 z-index:1030;
 display:flex;
 align-items:center;
 justify-content:space-between;
 padding:0.3rem clamp(1.25rem, 4vw, 3rem);
 background:#fff;
}

.logo{
 width: 200px;
}

.nav-desktop{
 display:flex;
 align-items:center;
 gap:2.1rem;
}

.nav-links{
 display:flex;
 align-items:center;
 gap:1.9rem;
 list-style:none;
 margin:0; padding:0;
}
.nav-links a{
position: relative;
   font-family: var(--display);
   font-weight: 500;
   font-size: 1rem;
   padding: .2rem 0;
   font-family: Montserrat, sans-serif;
}
.nav-links a::after{
 content:"";
 position:absolute;
 left:0; bottom:-2px;
 width:0%; height:2px;
 background:var(--stamp-bright);
 transition:width .28s ease;
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after{ width:100%; }

/* ---- goat footprint toggle (desktop) ---- */
.goat-toggle{
 appearance:none;
 border:1px solid var(--line-strong);
 background:transparent;
 border-radius:999px;
 width:46px; height:46px;
 display:flex;
 align-items:center;
 justify-content:center;
 cursor:pointer;
 transition:transform .45s cubic-bezier(.65,-0.4,.35,1.4), border-color .25s ease, background .25s ease;
}
.goat-toggle:hover{ border-color:var(--stamp-bright); }
.goat-toggle svg{ width:22px; height:22px; transition:transform .45s cubic-bezier(.65,-0.4,.35,1.4); }
.goat-toggle.is-open{
 transform:rotate(180deg);
 background:var(--stamp);
 border-color:var(--stamp);
}

/* ---- mobile toggle (ruler / tab-stop icon) ---- */
.mobile-toggle{
 appearance:none;
 border:1px solid var(--line-strong);
 background:transparent;
 border-radius:10px;
 width:46px; height:46px;
 display:flex;
 align-items:center;
 justify-content:center;
 cursor:pointer;
 transition: .35s;
}
.mobile-toggle.is-open{
 transform: rotate(180deg) scale(.6)
}

/* ============ OFFCANVAS ============ */
.offcanvas{
 background:var(--ink-soft) !important;
 color:var(--paper);
 border-left:1px dashed var(--line-strong) !important;
 width:min(420px, 88vw) !important;
}
.offcanvas-backdrop.show{ opacity:.72; background:#0B0D0B; }

.offcanvas-header{ padding:2.2rem 2rem 0; position:relative; }
.offcanvas-body{ padding:1.5rem 2rem 2.5rem; }

.offcanvas .oc-title{
 font-family:var(--display);
 font-weight:700;
 text-transform:uppercase;
 font-size:1.3rem;
 letter-spacing:.04em;
}
.btn-close-custom{
     right: 1.6rem;
   position: absolute;
 background:transparent;
 border:1px solid var(--line-strong);
 border-radius:999px;
 width:36px; height:36px;
 color:var(--paper);
 display:flex; align-items:center; justify-content:center;
 font-family:var(--display);
 font-size:1rem;
 cursor:pointer;
}
.btn-close-custom:hover{ border-color:var(--stamp-bright); color:var(--stamp-bright); }

.oc-nav{ list-style:none; margin:0 0 2rem; padding:0; }
.oc-nav li{ border-bottom:1px solid var(--line); }
.oc-nav a{
 display:flex; align-items:center; justify-content:space-between;
 font-family:var(--display);
 font-weight:700;
 text-transform:uppercase;
 font-size:1.15rem;
 letter-spacing:.03em;
 padding:.85rem 0;
}
.oc-nav a:hover, .oc-nav a:focus-visible{ color:var(--stamp-bright); padding-left:.4rem; }
.oc-nav a span.idx{ font-size:.7rem; color:var(--stamp-bright); opacity:.8; }

.oc-divider{
 border:0; border-top:1px dashed var(--line-strong);
 margin:1.5rem 0;
}

.oc-tagline{
 font-size:.95rem;
 opacity:.85;
 margin-bottom:1.5rem;
}

.oc-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.oc-links a{ font-size:.92rem; border-bottom:1px solid transparent; }
.oc-links a:hover{ color:var(--stamp-bright); border-color:var(--stamp-bright); }

.oc-cta{
 display:inline-flex;
 margin-top:1.6rem;
 font-family:var(--display);
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:.08em;
 font-size:.82rem;
 background:var(--stamp);
 color:var(--paper);
 padding:.75rem 1.3rem;
 border-radius:2px;
 transition:background .2s ease, transform .2s ease;
}
.oc-cta:hover{ background:var(--stamp-bright); transform:translateY(-1px); }


/* ============ HERO ============ */
.hero-camera{
 position:relative;
 width:100%;
 height:auto;
}
.hero{
 position:relative;
 margin-top:88px;           /* clears the fixed nav */
 background:var(--hero-orange);
 overflow:hidden;
}

.hero-body{
 --goat-w: clamp(380px, 42vw, 760px);   /* bigger goat, and everything else keys off this */
 position:relative;
 background:var(--hero-orange);
 min-height: clamp(460px, 37vw, 740px);
 padding:0 clamp(1rem, 3vw, 2rem);
}

/* ---- center : goat, as a positioned background image (no flex) ---- */
.hero-goat{
 position:absolute;
 left:48%;
 bottom:0;
 transform:translateX(-50%);
 width:var(--goat-w);
 aspect-ratio:786 / 709;         /* intrinsic size of banner-goat.png */
 background-image:url('../images/banner-goat.png');
 background-repeat:no-repeat;
 background-position:center bottom;
 background-size:contain;
 transform-origin:50% 100%;
 z-index: 2;
}
.hero-text{
 position:absolute;
 top:50%;
 transform:translateY(-50%);
 z-index:1;
 width:clamp(170px, 25vw, 397px);
}
.hero-text-left{
 right:calc(38% + (var(--goat-w) / 2) + clamp(.5rem, 1.5vw, 1.5rem));
 text-align:left;
 width: max-content;
}
.hero-text-right{
 left:calc(38% + (var(--goat-w) / 2) + clamp(.5rem, 1.5vw, 1.5rem));
 text-align:right;
}

.hero-line{
 display:flex;
 align-items:center;
 flex-wrap:wrap;
 gap:.5rem .6rem;
 margin:0 0 .6rem;
 font-family:var(--display);
 font-weight:700;
 text-transform:uppercase;
 font-size:3rem;
 color:#fff;
}
.swap-box{
 position:relative;
 display:inline-block;
 overflow:hidden;
 height:1.3em;
 min-width:7.4ch;
 border-radius:2px;
 vertical-align:middle;
}
.swap-word{
 position:absolute;
 top:0; left:0;
 width:100%;        
 height:100%;
 display:inline-flex;
 align-items:center;
 padding:.08em .42em;
 white-space:nowrap;
 box-sizing:border-box;
}
.swap-word .letter{ display:inline-block; }
.swap-box-a{ background:var(--hero-lime); }   /* fits "Ordinary." */
.swap-box-b{ background:var(--hero-black); } /* fits "Invisible." */
.swap-box-a .swap-word{ color:var(--hero-black); }
.swap-box-b .swap-word{ color:var(--hero-lime); }

.hero-headline{
 --goat-fs:clamp(1.8rem, 4.4vw, 3.4rem);
 font-family:var(--display);
 font-weight:700;
 text-transform:uppercase;
 line-height:.98;
}
.hh-line{ display:inline-block; }
.hh-line1{
       color: var(--hero-lime);
   font-size: 5.3rem;
   margin-bottom: 0;
   display: block;
   text-align: center;
   margin-right: 5rem;
   letter-spacing: -8px;
   word-spacing: -0.15em;
}
.hh-line2, .hh-line3{
 display:flex;
 align-items:center;
 justify-content:flex-end;
 gap:.6rem;
}
.hh-highlight{
   position: relative;
   background: var(--hero-lime);
   color: var(--hero-orange);
   padding: 0em .25em .05em .25em;
   font-size: 6.5rem;
   display: inline-block;
   -webkit-text-stroke: 0.5px currentColor;
   text-stroke: 1.6px currentColor;
   letter-spacing: -11px;
   line-height: 0.9;
}
.hh-g{
     line-height: 0.8;
   padding-bottom: 0.5rem;
   margin-top: -20px;
       font-size: 7.5rem;
       -webkit-text-stroke: 1.6px currentColor;
   text-stroke: 1.6px currentColor;
   letter-spacing: -10px;
}
.hh-highlight::before {
   content: "";
   position: absolute;
   top: -1px;
   bottom: -8px;
   left: -133px;   /* Extend to the left */
   right: 0;      /* Ends exactly at the text */
   background: var(--hero-lime);
   z-index: -1;
       width: 400px
}
.hh-brave{
   display: inline-flex;
   flex-direction: column;
   justify-content: center;
   color: #000000;
   font-size: 3.7rem;
   line-height: 1.08;
   text-align: left;
   font-weight: 500;
   background: var(--hero-orange);
   padding-left: 0.5rem;
   -webkit-text-stroke: 1.8px currentColor;
   text-stroke: 1.8px currentColor;
   letter-spacing: -7px;
   line-height: 0.8;
}

/* ---- bottom strip: people walking, full width, sits right under the hero ---- */
.hero-strip-bottom{
 width:100%;
 line-height:0;
}
.strip-img{
 display:block;
 width:100%;
 height:auto;
}

/* Below this, the goat + two text columns no longer have room to sit
  side by side without colliding — switch to a stacked, centered layout
  (same breakpoint the nav already collapses at, so the whole header
  and hero change together). */
@media (max-width:991.98px){
 .hero-body{
   --goat-w: min(66vw, 440px);
   min-height:auto;
   padding:2.5rem 1.25rem 2rem;
   display:flex;
   flex-direction:column;
   align-items:center;
   gap:1.5rem;
 }
 .hero-goat{
   position:static;
   transform:none;
   order:-1;
 }
 .hero-text{
   position:static;
   transform:none;
   width:100%;
   max-width:420px;
   text-align:center;
 }
 .hero-text-left{ order:0; }
 .hero-text-right{ order:1; }
 .hero-text-right{ text-align:center; }
 .hero-line{ justify-content:center; }
 .hh-line2, .hh-line3{ justify-content:center; }
}

@media (max-width:991.98px){
 .nav-desktop{ display:none !important; }
}
@media (min-width:992px){
 .mobile-toggle{ display:none !important; }
}
/* ============ 2nd section ============ */
.max-750{
 max-width: 750px;
   margin: 0 auto;
   text-align: center;
}
.max-950{
 max-width: 950px;
   margin: 0 auto;
   text-align: center;
}
h2.page-title {
   font-size: 50px;
   margin-bottom: 2rem;
}
.text-pink{
 color: var(--pink);
}
.text-red{
 color: var(--red);
}
.text-dark-red{
 color: #ef1e16;
}
.ms-n8{
 margin-left: -8px;
}
.fs-27 {
   font-size: 1.7rem;
   line-height: 1.3;
}
.fs-24 {
   font-size: 1.5rem;
}
/* 360° + goat icon set transform-origin so rotate/scale look natural */
.deg-360{ display:inline-block; transform-origin:50% 55%; will-change:transform; }
.nod-goat{ display:inline-block; transform-origin:50% 100%; will-change:transform; }

/* stretching goat + text overlay */
.goat-cta-wrap{
 position:relative;
 width:100%;
 max-width: 500px;
 margin: 0 auto;
 overflow:hidden;      /* clips the goat as it scales, avoids layout jump */
}
.goat-cta-body{
 display:block;
 width:100%;
 height:auto;
 transform-origin:50% 100%;   /* stretches outward from near the front legs — nudge % to taste */
 will-change:transform;
}
.goat-cta-text{
 position:absolute;
     left: 0;
   top: 50%;
   right: 0;
 transform:translateY(-50%);
 color:#fff;
 font-family:var(--display);
 font-weight:700;
 letter-spacing:.06em;
 text-transform:uppercase;
 font-size:clamp(.8rem, 1.8vw, 1.5rem);
 white-space:nowrap;
 opacity:0;
 pointer-events:none;
}
.text-stroke-1{
 -webkit-text-stroke: 0.5px currentColor;
   text-stroke: 0.5px currentColor;
}
.bg-lime{
   background: #1eff00;
   padding: 0 10px 3px;
}
.dual-image-section {
 display: flex;
 justify-content: center;
 align-items: baseline;
 overflow: hidden; /* prevents scrollbar flash during entry */
}
.img-wrap {
   width: 30%;
}
.side-img {
 width: 100%;
 height: auto;
 display: block;
 will-change: transform;
}
.bg-green {
 background-color: #4ba518;
}
.bg-pink{
 background-color: #ff0066;
}
.bg-blue{
 background-color: #00c0dd;
}
.bg-dark-red{
 background-color: #e91919;
}
.edge-img {
 display: block;   /* kills the inline gap — this is the #1 cause */
 width:100%;
 height:clamp(18px, 3vw, 34px);
 object-fit:fill;
 line-height: 0;   /* extra safety against baseline gap */
 font-size: 0;     /* extra safety in case of whitespace in HTML */
}

.edge-top {
 margin-bottom: -2px;   /* pulls it into the section below, kills seam */
}

.edge-bottom {
 margin-top: -2px;      /* pulls it into the section above, kills seam */
}
.text-yellow{
 color: #ffea00;
}
.sound-wave-wrap {
 position: relative;
 display: inline-block;
}

.pulse-img {
 position: relative;
 z-index: 2;
 transform-origin: center center;
}

.wave-ring {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 100%;
 height: 100%;
 border: 2px solid var(--wave-color, #FFD400); /* match your yellow/theme */
 border-radius: 50%;
 transform: translate(-50%, -50%) scale(1);
 opacity: 0;
 z-index: 1;
 pointer-events: none;
}
.tilt-text{
 transform: rotate(-3deg);
 display: inline-block;
}
.strike-wrap {
   position: relative;
   display: inline-block;
 }

 .strike-line {
   position: absolute;
   left: 0;
   top: 50%;
   width: 100%;
   height: 4px;
   background: #ff0000;
   transform: scaleX(0);
   transform-origin: left center;
   pointer-events: none;
 }

 /* Consumer Understanding starts hidden, revealed by GSAP */
 #understanding-text {
   opacity: 0;
   /* keep it out of layout flow shift by pre-setting a small offset */
 }
 .ls-n3{
   letter-spacing: -3px;
 }
 .ls-n2{
   letter-spacing: -2px;
 }
/* ---- Headline inside the pink section: Hindi as image + brand-font WORKKKK ---- */
.hero-marker-text{
 font-size:clamp(1.8rem, 5vw, 3.4rem); /* baseline size the Hindi image scales against */
 display:flex;
 align-items:center;
 flex-wrap:wrap;
 gap:0 .5rem;
     font-size: 8rem;
}
.hero-marker-text .hindi-text-img{
 width: 60%;
 display:inline-block;
}
.hero-marker-text .workkkk-text{
 font-family:'Typewriter Condensed Bold', 'Typewriter Condensed', sans-serif;
 color:#ffea00;
 -webkit-text-stroke: 2.5px currentColor;
   letter-spacing: -5px;
}
.hero-marker-text .ltr{
 display:inline-block;
}
.fs-5rem{
 font-size:5rem;
}
.fs-6rem{
 font-size:6rem;
}
.fs-43{
 font-size:2.7rem;
}
.sheep-text{
     font-size: 3rem;
   letter-spacing: -2px;
   line-height: 1;
}
.text-stroke-2{
   -webkit-text-stroke: 2.5px currentColor;
   text-stroke: 2.5px currentColor;
}
/* ============ SIGNOFF (straddles red section's bottom edge) ============ */
.signoff-wrap{
    position: absolute;
   left: 50%;
   bottom: 0;
   transform: translate(-50%, -20%);
   width: min(280px, 90vw);
   z-index: 5;
   padding-top: 2.2rem;
}

/* small pill: "Yours truly" */
.signoff-tag{
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   font-weight: 700;
   letter-spacing: .04em;
   font-size: 1.5rem;
   padding: .6rem 0 0;
   z-index: 2;
}
.sign-wrap{
   margin-left:9%;
   margin-right:calc(-1 * var(--bs-gutter-x, 1.5rem));
   margin-top: -20px;
}

/* the panel holding the (image) signature + socials */
.signoff-panel{
 position: relative;
   background: #fff;
   border-radius: 30px 30px 0 0;
   padding: 3rem 2rem 1.75rem;
   z-index: 1;
   text-align: center;
}

.signoff-signature{
 max-width:320px;
 width:100%;
 height:auto;
 margin:0 auto;
 display:block;
}

.signoff-divider{
 border:0;
 border-top:1px solid rgba(0,0,0,.15);
 margin:1.4rem auto;
 max-width:520px;
}

/* ---- social icons + animation ---- */
.signoff-social{
 list-style:none;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:.85rem;
 margin:0;
 padding:0;
}
.signoff-social li{ --i:0; }
.signoff-social a{
 display:flex;
 align-items:center;
 justify-content:center;
 width:38px; height:38px;
 border-radius:50%;
 background:#e91919;
 color:#fff;
 font-size:1rem;
 animation:signoffBob 2.2s ease-in-out infinite;
 animation-delay:calc(var(--i, 0) * .15s);
 transition:background .25s ease, transform .25s ease;
}
.signoff-social a:hover,
.signoff-social a:focus-visible{
 background:#ef1e16;
 transform:translateY(-5px) scale(1.12);
 animation-play-state:paused;
}
@keyframes signoffBob{
 0%,100%{ transform:translateY(0); }
 50%{ transform:translateY(-4px); }
}

@media (max-width:575.98px){
 .signoff-tag{ font-size:1.5rem; }
 .signoff-panel{ padding:2.4rem 1.25rem 1.5rem; }
 .signoff-signature{ max-width:240px; }
}
.sign-sec hr{
 border-top: 3px solid #777777;
}
@media (max-width:1054px){
 .sign-wrap {
   margin-left: 0;
   margin-right: 0;
   margin-top: -5px;
}
}
@media (max-width:767px){
 .signoff-wrap{
       transform: translate(-50%, -10%);
 }
 h2.page-title {
   font-size: 35px;
   margin-bottom: 1.5rem;
   line-height: 1.2;
}
.fs-27 {
   font-size: 1.2rem;
   line-height: 1.2;
}
.goat-cta-wrap{
 width: 70%;
}

section {
   padding: 1rem 0;
}
.img-wrap {
   width: 50%;
}
.nod-goat {
     width: 40px;
}
.hero-marker-text{
     place-content: center;
}
.hero-marker-text .workkkk-text{
     line-height: 1;
}
.fs-43 {
   font-size: 2rem;
}
.fs-24 {
   font-size: 1.4rem;
}
.fs-5rem {
   font-size: 4rem;
}
.fs-6rem {
   font-size: 4rem;
}
}
   

/* video section start */

.video-section{

  position:relative;

  background:#FFD300;

}

.video-pin{

  height:100vh;

  display:flex;

  justify-content:center;

  align-items:center;

  position:relative;

}

.video-box{

  width:420px;

  aspect-ratio:16/9;

  overflow:hidden;

  border-radius:2.5rem;

  position:relative;

  z-index:2;

}

.video-box video{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

}

.left-text,
.right-text{

  position:absolute;

  top:50%;

  transform:translateY(-50%);

  font-size:120px;

  font-weight:900;

  color:#111;

  z-index:3;

}

.left-text{

  left:8%;

}

.right-text{

  right:8%;

}

.next-section{

  position:relative;

  height:100vh;

  background:#000;

  overflow:hidden;

}

.art-mask{

  position:absolute;

  inset:0;

  overflow:hidden;

  clip-path:circle(0% at 50% 50%);

}

.art-image{

  width:100%;

  height:100%;

  object-fit:cover;

  transform:scale(1.25);

  will-change:transform;

}

/* vidoe scoll effect end */