/* ========================================
   FORCE SATOSHI EVERYWHERE
======================================== */
body{
  font-family: "Satoshi", sans-serif;
}

/* ========================================
   DESKTOP DROPDOWN ANIMATION
======================================== */
.menu-pop {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
  pointer-events: none;
  overflow: hidden;
  transform-origin: top center;
  transition: grid-template-rows 260ms ease, opacity 220ms ease, transform 260ms ease;
}

.menu-pop.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.menu-inner { 
  min-height: 0; 
}

#servicesMenu {
  width: max-content;
  padding: 14px 18px;
  border-radius: 14px;
}

#servicesMenu a { 
  padding: 6px 0; 
}

/* ========================================
   MOBILE OVERLAY ANIMATION
======================================== */
.mobile-sheet {
  transform: translateY(-6px) scale(0.98);
  opacity: 0;
  transition: transform 220ms ease, opacity 220ms ease;
}

#mobileOverlay.is-open .mobile-sheet {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.m-drop-inner { 
  padding: 10px; 
}

@media (max-width: 767px){
  header{ 
    padding-bottom: 24px !important; 
  }
}

/* ========================================
   BRAND LOCKUP
   (Exact Screenshot Style)
======================================== */

.brand-lockup{
  display: inline-flex;
  flex-direction: column;
  width: fit-content;
  line-height: 1;
  text-decoration: none;
}

/* Brandvion (Top Line) */
.brand-lockup .brandvion{
  font-family: "Satoshi", sans-serif;
  font-weight: 900;             /* strong bold */
  font-size: 30px;
  letter-spacing: -0.02em;
  color: #000;
  line-height: 1;
}

/* marketing (Bottom Line) */
.brand-lockup .marketing{
  font-family: "Dancing Script", cursive;
  font-weight: 500;             /* thin */
  font-style: normal;           /* NOT italic */
  font-size: 28px;
  color: #000;
  line-height: 0.9;

  margin-top: -4px;             /* minor tight line space */

  /* Alignment rule:
     M starts under Brandvion 'a'
     g ends under Brandvion 'n'
  */
  padding-left: 42px;
}

/* Desktop dropdown box (Services + Case Studies) */
.menu-pop{
  width: max-content;
  padding: 14px 18px;
  border-radius: 14px;
}

.menu-pop a{
  padding: 6px 0;
}
/* ========================================
   RESPONSIVE SIZES
======================================== */

@media (max-width: 767px){

  .brand-lockup .brandvion{
    font-size: 26px;
  }

  .brand-lockup .marketing{
    font-size: 21.5px;
    margin-top: -3px;
    padding-left: 44.5px;
    line-height: 0.9;
  font-family: "Dancing Script", cursive;

  }
}

/* Overlay larger version */
#mobileOverlay .brand-lockup .brandvion{
  font-size: 30px;
}

#mobileOverlay .brand-lockup .marketing{
  font-family: "Dancing Script", cursive !important;
  font-weight: 300;             /* thin */
  font-style: normal;           /* NOT italic */
  font-size: 28px;
  color: #000;
  line-height: 0.9;

  margin-top: -4px;             /* minor tight line space */

  /* Alignment rule:
     M starts under Brandvion 'a'
     g ends under Brandvion 'n'
  */
  padding-left: 42px;
}


/* ========================================
   HERO SECTION
======================================== */

.cs-hero{
  width:100%;
  background:#f6e9db;
  padding:26px 0 34px;
}

.cs-hero-wrap{
  max-width:1500px;
  margin:0 auto;
  padding:0 24px;
}

.cs-hero-shell{
  background:#f6efec;
  border-radius:44px;
  padding:38px;
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap:32px;
  overflow:hidden;
}

.cs-hero-left{
  display:flex;
  flex-direction:column;
  min-height:560px;
}

.cs-hero-title{
  font-size:58px;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.03em;
}

.cs-hero-meta{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:26px;
}

.cs-hero-meta-label{
  font-size:26px;
  font-weight:700;
}

.cs-hero-meta-value{
  font-size:18px;
  color:rgba(15,15,15,0.7);
}

.cs-hero-media{
  width:100%;
  max-width:600px;
  height:640px;
  border-radius:28px;
  overflow:hidden;
}

.cs-hero-img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Responsive Hero */
@media (max-width:1024px){
  .cs-hero-shell{ grid-template-columns:1fr; }
  .cs-hero-left{ min-height:auto; }
  .cs-hero-title{ font-size:44px; }
  .cs-hero-media{ height:420px; }
}

@media (max-width:768px){
  .cs-hero-title{ font-size:34px; }
  .cs-hero-media{ height:360px; }
}

/* ========================================
   SECTION 3
======================================== */

.cs-info{
  background:#f6e9db;
  padding:60px 0 90px;
}

.cs-info-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.cs-info-title{
  font-size:48px;
  font-weight:700;
  margin-bottom:40px;
}

.cs-info-image{
  display:flex;
  justify-content:center;
  margin-bottom:50px;
}

/* Image */
.cs-info-image img{
  width:640px;
  max-width:100%;
  border-radius:22px;
  display:block;
}

/* ========================================
   REELS VIDEO (FINAL CLEAN VERSION)
======================================== */

/* Desktop */
.cs-info-video,
.sec4-video{
  width:340px;
  height:604px;      /* 9:16 ratio */
  object-fit:cover;  /* no black bars */
  border-radius:22px;
  display:block;
  margin:0 auto;
}

/* Tablet */
@media (max-width:1024px){
  .cs-info-video,
  .sec4-video{
    width:300px;
    height:533px;   /* 9:16 */
  }
}

/* Mobile */
@media (max-width:768px){
  .cs-info-video,
  .sec4-video{
    width:260px;
    height:462px;   /* 9:16 */
    border-radius:18px;
  }
}

/* Text */
.cs-info-text p{
  font-size:22px;
  line-height:1.75;
  margin-bottom:32px;
}

/* ========================================
   SECTION 4
======================================== */

.sec4{
  background:#f6e9db;
  padding:40px 0 70px;
}

.sec4-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.sec4-title{
  font-size:56px;
  font-weight:900;
  margin-bottom:18px;
}

.sec4-p{
  font-size:22px;
  line-height:1.7;
  margin-bottom:28px;
}

.sec4-sub{
  font-size:22px;
  font-weight:800;
  margin:44px 0 12px;
}

.sec4-media{
  display:flex;
  justify-content:center;
  margin:38px 0 44px;
}

.sec4-img{
  width:min(760px,100%);
  display:block;
}

/* ========================================
   SECTION 5
======================================== */

.sec5{
  background:#f6e9db;
  padding:40px 0 80px;
}

.sec5-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
}

.sec5-title{
  font-size:56px;
  font-weight:900;
  margin-bottom:18px;
}

.sec5-p{
  font-size:22px;
  line-height:1.7;
}

@media (max-width:768px){
  .sec4-title,
  .sec5-title{
    font-size:34px;
  }

  .sec4-p,
  .sec5-p{
    font-size:18px;
  }
}

/* Footer */
.footer12{
  background:#f6e9db;
  padding:60px 0 90px;
}

/* container */
.footer12-wrap{
  max-width:1400px;
  margin:0 auto;
  padding:0 60px;
}

/* main rounded box */
.footer12-box{
  background:#fff4e8;
  border:1px solid #2a2a2a;
  border-radius:42px;
  padding:56px 56px 44px;
}

/* ================= TOP SECTION ================= */

.footer12-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:40px;
  margin-bottom:40px;
}

.footer12-left{
  min-width:280px;
}

.footer12-title{
  font-size:44px;
  font-weight:800;
  line-height:1.05;
  margin:0 0 18px;
  color:#1f1f1f;
}

.footer12-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 22px;
  border-radius:999px;
  background:#1f1f1f;
  color:#fff;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
}

.footer12-right{
  text-align:right;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
}

.footer12-agency{
  margin:0 0 16px;
  font-size:18px;
  font-weight:700;
  color:#1f1f1f;
  line-height:1.2;
}

.footer12-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer12-links a{
  font-size:14px;
  font-weight:600;
  color:#1f1f1f;
  text-decoration:none;
  opacity:0.9;
}

.footer12-links a:hover{
  opacity:1;
  text-decoration:underline;
}

/* ================= BIG BRAND ================= */

.footer12-brand{
  width:100%;
  text-align:center;
  margin:30px 0 70px;
  overflow:visible;
}

/* Footer lockup override */
.footer12-brand .brand-lockup{
  display:inline-flex;
  flex-direction:column;
  width:fit-content;
  text-align:left;
}

/* Huge Brandvion */
.footer12-brand .brandvion{
  font-size:160px;
  font-weight:900;
  letter-spacing:-0.05em;
  color:#1f1f1f;
  line-height:0.9;
}

/* marketing under it */
.footer12-brand .marketing{
  font-size:100px;
  font-weight:300;
  font-style:normal;
  color:#1f1f1f;

  line-height:1.1;
  margin-top:clamp(-25px, -2vw, -12px);

  /* alignment shift (scaled version of header) */
  padding-left:300px;
}

/* ================= BOTTOM INFO ================= */

.footer12-bottom{
  text-align:center;
  font-size:13px;
  font-weight:600;
  color:#1f1f1f;
  line-height:1.4;
  max-width:720px;
  margin:0 auto;
}

.footer12-bottom p{
  margin:6px 0;
}

.footer12-bottom a{
  color:#1f1f1f;
  text-decoration:none;
  opacity:0.9;
}

.footer12-bottom a:hover{
  opacity:1;
  text-decoration:underline;
}

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

@media (max-width:900px){

  .footer12-wrap{
    padding:0 20px;
  }

  .footer12-box{
    padding:36px 22px 28px;
    border-radius:28px;
  }

  .footer12-top{
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    margin-bottom:18px;
  }

  .footer12-right{
    text-align:left;
    align-items:flex-start;
  }

  .footer12-title{
    font-size:32px;
  }

  .footer12-brand{
    margin:26px 0 40px;
  }

  .footer12-brand .brandvion{
    font-size:90px;
    line-height:0.95;
  }

  .footer12-brand .marketing{
    font-size:40px;
    margin-top:-10px;
    padding-left:75px;
    line-height:1.0;
  }

  .footer12-bottom{
    font-size:13px;
    max-width:520px;
  }
}

/* extra small screens */
@media (max-width:420px){
  .footer12-title{ font-size:28px; }
  .footer12-btn{ height:42px; padding:0 18px; }

  .footer12-brand .brandvion{
    font-size:clamp(54px, 14vw, 120px);
  }

  .footer12-brand .marketing{
    margin-top:-8px;
  }
}