/* ========================================
   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;
}





/* =========================
   SECTION 3: Reels Marquee
========================= */

.reels-marquee{
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  /* fade edges like screenshot */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.reels-track{
  display: flex;
  gap: 28px;
  align-items: center;
  width: max-content;
  animation: reelsScroll 22s linear infinite;
  will-change: transform;
}

/* pause animation on hover (nice UX) */
.reels-marquee:hover .reels-track{
  animation-play-state: paused;
}

@keyframes reelsScroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* because we duplicated the items */
}

.reel-card{
  width: 280px;
  height: 520px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,0.25);
  box-shadow: 0 18px 40px rgba(0,0,0,0.12);
  border: 2px solid rgba(0,0,0,0.10);
  flex: 0 0 auto;
}

.reel-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive sizes */
@media (max-width: 640px){
  .reel-card{
    width: 220px;
    height: 420px;
    border-radius: 20px;
  }
  .reels-track{ gap: 18px; }
}

/* =========================
   SECTION 4: Trusted Logos
========================= */


.trusted-section {
  width: 100%;
  background: #f6e9db;
  padding: 80px 0;
}

.trusted-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.trusted-title {
  text-align: center;
  font-size: 32px;       /* mobile size */
  font-weight: 600;
  color: #111;
  margin-bottom: 50px;
  white-space: nowrap;   /* keep in one line on mobile */
}

/* ---------- Mobile/Tablet grid wrapper ---------- */
.trusted-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* ✅ mobile clean */
  gap: 34px 26px;
  justify-items: center;
  align-items: center;
}

/* Hide desktop layout on mobile/tablet */
.trusted-desktop {
  display: none;
}

/* ---------- Logo style (dark grey like screenshot) ---------- */
.trusted-section img {
  width: auto;
  height: 26px;          /* mobile logo height */
  max-width: 105px;      /* prevents wide logos overflow */
  object-fit: contain;

  filter: grayscale(100%) brightness(0);
  opacity: 0.72;
}

/* ===============================
   TABLET
================================= */
@media (min-width: 768px) {
  .trusted-title {
    font-size: 52px;
    margin-bottom: 60px;
    white-space: normal;
  }

  .trusted-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 42px 40px;
  }

  .trusted-section img {
    height: 30px;
    max-width: 140px;
    opacity: 0.7;
  }
}

/* ===============================
   DESKTOP (exact layout)
================================= */
@media (min-width: 1024px) {
  /* hide grid, show desktop rows */
  .trusted-grid {
    display: none;
  }
  .trusted-desktop {
    display: block;
  }

  /* desktop logo sizing */
  .trusted-section img {
    height: 38px;
    max-width: 170px;
    opacity: 0.7;
  }

  /* desktop rows spacing */
  .trusted-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px;
    margin-bottom: 60px;
  }

  /* first row slightly wider gap (matches reference feel) */
  .trusted-row.row-1 {
    gap: 100px;
  }
}


/* =========================
   SECTION 6: Secret Sauce (Animation + Colors)
========================= */

.secret-link{
  display: inline-block;
}

.secret-purple { color: #4b3f86; }
.secret-red { color: #ea6b5e; }
.secret-teal { color: #1b8c94; }


/* reveal animation */
.reveal-left{
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: transform, opacity;
}

.reveal-left.is-visible{
  opacity: 1;
  transform: translateX(0);
}

/* Right side reveal animation */
.reveal-right{
  opacity: 0;
  transform: translateX(48px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: transform, opacity;
}

.reveal-right.is-visible{
  opacity: 1;
  transform: translateX(0);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal-left{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =========================
   SECTION 7: EXACT PANEL (outer + inner rounded)
========================= */

.s7-shell{
  background: #DDE2FF; /* outer lavender */
  border: 2px solid rgba(95, 86, 175, 0.75);
  border-radius: 30px;

  padding: 22px;                 /* space between outer and inner */
  min-height: 560px;

  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 22px;

  overflow: hidden;
}

/* LEFT INNER BOX */
.s7-left{
  background: #DFE4FF; /* inner box looks same tone but slightly different */
  border: 2px solid rgba(95, 86, 175, 0.75);
  border-radius: 26px;

  padding: 46px 40px;
}

/* icon circle */
.s7-icon{
  width: 46px;
  height: 46px;
  border-radius: 999px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(95, 86, 175, 0.95);
  border: 2px solid rgba(95, 86, 175, 0.75);
  background: rgba(255,255,255,0.15);
}

.s7-title{
  margin-top: 22px;
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 300; /* light like screenshot */
  color: rgba(55, 55, 85, 0.85);
}

.s7-text{
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(60, 60, 80, 0.65);
  max-width: 360px;
}

/* RIGHT SIDE */
.s7-right{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.s7-mockup{
  width: min(560px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,0.18));
}

/* Responsive */
@media (max-width: 980px){
  .s7-shell{
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 16px;
  }

  .s7-left{
    padding: 36px 28px;
  }

  .s7-text{
    max-width: 100%;
  }

  .s7-right{
    padding: 0 6px 12px;
  }
}

/* Reduce spacing between Section 6 and Section 7 */

.section-6 {
  padding-bottom: 30px;
}

.section-7 {
  padding-top: 25px;
}

/* =========================
   SECTION 8: COPY OF SECTION 7 (ONLY COLORS CHANGED)
========================= */

.s8-shell{
  background: #F6D6CC; /* outer peach */
  border: 2px solid rgba(158, 58, 46, 0.70);
  border-radius: 30px;

  padding: 22px;
  min-height: 560px;

  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 22px;

  overflow: hidden;
}

.s8-left{
  background: #FBE3DC; /* inner peach */
  border: 2px solid rgba(158, 58, 46, 0.70);
  border-radius: 26px;

  padding: 46px 40px;
}

.s8-sparkle{
  font-size: 22px;
  line-height: 1;
  color: #7A1F17;
  margin-bottom: 18px;
}

.s8-title{
  margin-top: 0;
  font-size: 42px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: #7A1F17;
}

.s8-text{
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(122, 31, 23, 0.62);
  max-width: 360px;
}

.s8-right{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
}

.s8-mockup{
  width: min(560px, 100%);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 35px rgba(0,0,0,0.18));
}

/* Responsive */
@media (max-width: 980px){
  .s8-shell{
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 16px;
  }

  .s8-left{
    padding: 36px 28px;
  }

  .s8-text{
    max-width: 100%;
  }

  .s8-right{
    padding: 0 6px 12px;
  }
}

/* =========================
   SECTION 9 – CLEAN VERSION (NO OUTER VIDEO BOX)
========================= */

.section-9{
  background: #f6e9db;
  padding: 80px 0;
}

/* OUTER SHELL */
.s9-shell{
  background: #CFE6E8;
  border: 2px solid rgba(20,120,130,0.7);
  border-radius: 30px;

  padding: 22px;
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 22px;

  overflow: hidden;
}

/* LEFT INNER BOX */
.s9-left{
  background: #C6E0E2;
  border: 2px solid rgba(20,120,130,0.7);
  border-radius: 26px;
  padding: 46px 40px;
}

.s9-title{
  margin-top: 22px;
  font-size: 48px;
  font-weight: 300;
  line-height: 1.05;
  color: #0c5f69;
}

.s9-text{
  margin-top: 22px;
  font-size: 16px;
  line-height: 1.9;
  color: rgba(12,95,105,0.75);
  max-width: 360px;
}

/* RIGHT SIDE – NO OUTER BOX */
.s9-right{
  display: flex;
  align-items: center;
  justify-content: center;
}

.s9-reels{
  display: flex;
  gap: 18px;
  align-items: center;
  justify-content: center;
}

/* Video card only */
.s9-reel{
  width: 290px;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;

  border: 3px solid rgba(120,160,255,0.55);
  box-shadow: 0 18px 35px rgba(0,0,0,0.12);
}

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

/* =========================
   MOBILE – MATCH SECTION 8 SPACING
========================= */
@media (max-width: 980px){

  .s9-shell{
    display: flex;
    flex-direction: column;
    gap: 16px;           /* space between text box & video */
    padding: 16px;       /* equal outer spacing */
    border-radius: 26px;
  }

  .s9-left{
    padding: 26px 20px;
    border-radius: 22px;
  }

  .s9-title{
    font-size: 36px;
  }

  .s9-text{
    font-size: 15px;
    line-height: 1.75;
    max-width: 100%;
  }

  /* Hide second video */
  .s9-reel--desktop{
    display: none !important;
  }

  .s9-reels{
    width: 100%;
    justify-content: center;
  }

  .s9-reel{
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
}

/* =========================
   SECTION 10: CASE STUDIES (EXACT COPY)
========================= */

.cs10{
  background: #f6e9db;
  padding: 70px 0 90px;   /* starts right after section 9 */
}

.cs10-container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header */
.cs10-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cs10-title{
  margin: 0;
  font-size: 92px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 300;
  color: #111;
}

/* Button */
.cs10-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 26px;
  border-radius: 999px;
  background: #1c1c1c;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 26px rgba(0,0,0,0.18);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.cs10-btn:hover{
  transform: translateY(-1px);
  opacity: 0.95;
}

/* Grid */
.cs10-grid{
  margin-top: 42px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
}

/* Card */
.cs10-card{
  border-radius: 26px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;

  border: 1.5px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.10);
  transition: transform 0.25s ease;
}

.cs10-card:hover{
  transform: translateY(-4px);
}

/* Image */
.cs10-media{
  position: relative;
  height: 420px;
  overflow: hidden;
  background: rgba(255,255,255,0.12);
}

.cs10-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge top-left */
.cs10-badge{
  position: absolute;
  top: 18px;
  left: 18px;

  background: #f4f4f4;
  border: 1px solid rgba(0,0,0,0.45);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: #111;
}

/* Bottom panel */
.cs10-bottom{
  background: rgba(245,245,245,0.65);
  padding: 22px 22px 26px;
}

.cs10-tag{
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.45);
  font-size: 13px;
  font-weight: 500;
  color: #111;
  margin-bottom: 14px;
}

.cs10-h3{
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 400;
  color: #111;
}

/* Mobile button hidden on desktop */
.cs10-btn--mobile{
  display: none;
}

/* =========================
   RESPONSIVE (Mobile like screenshot)
========================= */
@media (max-width: 980px){

  .cs10-title{
    font-size: 62px;
  }

  /* stack header, hide top button */
  .cs10-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .cs10-btn--desktop{
    display: none;
  }

  /* 1 card per row */
  .cs10-grid{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .cs10-media{
    height: 340px;
  }

  .cs10-h3{
    font-size: 20px;
  }

  /* show button below cards centered */
  .cs10-btn--mobile{
    display: inline-flex;
    margin: 26px auto 0;
  }
}

/* Smaller phones */
@media (max-width: 600px){

  .cs10-title{
    font-size: 52px;
  }

  .cs10-media{
    height: 300px;
  }

  .cs10-btn{
    width: 100%;
    max-width: 360px;
    height: 54px;
  }
}

/* Section 11 */
.team11{
  background: #f6e9db;
  padding: 110px 0;   /* ONLY vertical padding */
}

/* DO NOT add extra padding here */
.container-1100{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;   /* same as section 10 */
}

.team11-wrap{
  display: grid;
  grid-template-columns: 1fr 2px 1fr;
  align-items: center;
  column-gap: 100px;
}

/* Left */
.team11-title{
  margin: 0;
  font-size: 92px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  font-weight: 300;
  color: #1c1c1c;
}

/* Divider */
.team11-divider{
  width: 2px;
  height: 280px;
  background: rgba(0,0,0,0.55);
}

/* Right */
.team11-num{
  font-size: 110px;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-weight: 300;
  color: #1c1c1c;
}

.team11-text{
  margin-top: 20px;
  font-size: 26px;
  line-height: 1.35;
  color: rgba(0,0,0,0.62);
}

/* Mobile */
@media (max-width: 980px){
  .team11-wrap{
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .team11-divider{
    width: 100%;
    height: 2px;
  }

  .team11-title{
    font-size: 56px;
  }

  .team11-num{
    font-size: 80px;
  }

  .team11-text{
    font-size: 20px;
  }
}

/* Footer Start */
.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.2;
  margin-top:clamp(-25px, -2vw, -12px);

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

/* ================= 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;
  }
}


/* Case study Page......................................................................... */

/* =========================
   CASE STUDIES HERO (FINAL CLEAN VERSION)
========================= */

.cs-hero{
  background:#f6e9db;
  padding: 90px 0 50px;
}

.cs-hero-container{
  max-width: 1150px;   /* controls left-right space */
  margin: 0 auto;
  padding: 0 16px;     /* side spacing */

  display: flex;
  justify-content: space-between;
  align-items: center;  /* top align */
  gap: 40px;
}

/* LEFT TITLE */
.cs-hero-title{
  margin: 0;
  font-weight: 300;
  color: #111;
  letter-spacing: -0.04em;
  line-height: 0.9;

  font-size: clamp(70px, 8.5vw, 130px);
}

/* RIGHT TEXT */
.cs-hero-sub{
  margin-top: 22px;  /* adjust vertical alignment */
  max-width: 360px;

  font-size: 26px;
  line-height: 1.15;
  font-weight: 400;
  color: rgba(0,0,0,0.78);
}

/* =========================
   CASE STUDIES HERO – FULL WIDTH CONTROL
========================= */

.cs-hero-wide{
  padding: 90px 0 50px;
}

.cs-hero-inner{
  width: 100%;
  max-width: 1400px;   /* much wider now */
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;

  padding: 0 10px;   /* very small side space */
}


/* =========================
   TABLET
========================= */
@media (max-width: 1024px){

  .cs-hero{
    padding: 70px 0 40px;
  }

  .cs-hero-container{
    max-width: 1000px;
    padding: 0 20px;
  }

  .cs-hero-title{
    font-size: clamp(55px, 8vw, 95px);
  }

  .cs-hero-sub{
    font-size: 22px;
    max-width: 300px;
  }
}

/* =========================
   MOBILE
========================= */
/* MOBILE */
@media (max-width: 768px){

  .cs-hero-inner{
    flex-direction: column;      /* stack */
    align-items: flex-start;     /* align left */
    gap: 14px;
    padding: 0 18px;
  }

  .cs-hero-title{
    font-size: clamp(40px, 10vw, 64px);
    white-space: nowrap;         /* keep in one line */
    line-height: 1;
  }

  .cs-hero-sub{
    margin: 0;
    font-size: 18px;
    max-width: 100%;
    text-align: left;
    line-height: 1.3;
  }
}

/* =========================================================
   CASE STUDY PAGE (HERO + GRID) — FULL CSS (RESPONSIVE)
   - Hero and cards share SAME container for perfect alignment
   - Desktop: 3 cards
   - Tablet: 2 cards
   - Mobile: 1 card
========================================================= */

/* Shared container: use this for hero + cards */
.cs-shell{
  width: 100%;
  max-width: 1400px; /* controls left/right end alignment */
  margin: 0 auto;
  padding: 0 10px;   /* small side padding like screenshot */
}

/* =========================
   HERO
========================= */
.cs-hero{
  background:#f6e9db;
}

.cs-hero-wide{
  padding: 90px 0 38px; /* space above + small space before grid */
}

/* Hero inner layout */
.cs-hero-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
}

.cs-hero-title{
  margin:0;
  font-weight:300;
  color:#111;
  letter-spacing:-0.04em;
  line-height:0.9;
  font-size: clamp(72px, 8.6vw, 140px);
}

/* Right text */
.cs-hero-sub{
  margin:0;
  max-width: 420px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 400;
  color: rgba(0,0,0,0.78);
  text-align:left;
}

/* =========================
   GRID WRAPPER
========================= */
.cs-grid{
  background:#f6e9db;
  padding: 10px 0 90px;
}

/* 3 cards in a row */
.cs-grid .cs-shell{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

/* =========================
   CARD (COPY STYLE)
========================= */
.cs-card{
  display:block;
  text-decoration:none;
  color:inherit;

  border-radius: 28px;
  overflow:hidden;

  border: 1.5px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.10);

  transition: transform 0.25s ease;
}

.cs-card:hover{
  transform: translateY(-4px);
}

/* Image */
.cs-media{
  position:relative;
  height: 300px;
  overflow:hidden;
  background: rgba(255,255,255,0.12);
}

.cs-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Top-left badge */
.cs-badge{
  position:absolute;
  top:18px;
  left:18px;

  background:#f4f4f4;
  border: 1px solid rgba(0,0,0,0.45);
  padding: 8px 18px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 500;
  color:#111;
}

/* Bottom panel */
.cs-bottom{
  background: rgba(245,245,245,0.68);
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(0,0,0,0.20);
}

/* Tag pill */
.cs-tag{
  display:inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.45);

  font-size: 13px;
  font-weight: 500;
  color:#111;

  margin-bottom: 12px;
}

/* Title */
.cs-h3{
  margin:0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  color:#111;
}

/* =========================
   TABLET (2 cards)
========================= */
@media (max-width: 1024px){

  .cs-shell{
    max-width: 1200px;
    padding: 0 18px;
  }

  .cs-hero-wide{
    padding: 70px 0 30px;
  }

  .cs-hero-title{
    font-size: clamp(58px, 8vw, 110px);
  }

  .cs-hero-sub{
    font-size: 22px;
    max-width: 340px;
  }

  .cs-grid .cs-shell{
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .cs-media{
    height: 280px;
  }

  .cs-h3{
    font-size: 20px;
  }
}

/* =========================
   MOBILE (1 card + stacked hero)
========================= */
/* =========================
   MOBILE FIX: make cards NOT tall
========================= */
@media (max-width: 768px){

  /* keep cards full width but not too tall */
  .cs-grid .cs-shell{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* ✅ instead of fixed height, use aspect ratio */
  .cs-media{
    height: auto !important;
    aspect-ratio: 16 / 10;  /* makes it wide, not tall */
  }

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

  /* bottom becomes compact like desktop */
  .cs-bottom{
    padding: 14px 16px 16px;
  }

  .cs-tag{
    margin-bottom: 10px;
  }

  .cs-h3{
    font-size: 18px;
    line-height: 1.28;
  }
}


/* Smaller phones */
@media (max-width: 420px){
  .cs-hero-title{
    font-size: clamp(36px, 9.5vw, 56px);
  }
}



/* =========================
meta ads agency page start 
========================= */ 

/* =========================
   META HERO TITLE SECTION
========================= */

.meta-hero{
  width:100%;
  background:#f6e9db;   /* same background as screenshot */
  padding:120px 0 90px; /* top spacing below header */
  margin-top: -30px;
}

.meta-hero-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;
  text-align:center;
}

.meta-hero-title{
  font-family: 'Satoshi', sans-serif;
  font-weight: 500;        /* ← this is important */
  font-size: 76px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #2a2a2a;
  margin: 0;
}

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

@media (max-width:1024px){
  .meta-hero-title{
    font-size:64px;
  }
}

@media (max-width:768px){
  .meta-hero{
    padding:90px 0 60px;
  }

  .meta-hero-title{
    font-size:44px;
  }
}

@media (max-width:480px){
  .meta-hero-title{
    font-size:36px;
  }
}


/* =========================
   META ADS HERO BOX (FIXED)
========================= */

.meta7{
  background:#f6e9db;
  padding: 34px 0 70px;
}

.meta7-wrap{
  max-width: 1250px;
  margin: 0 auto;
  padding: 0 24px;              /* ✅ space left/right always */
  box-sizing: border-box;
}

/* OUTER BOX */
.meta7-shell{
  background: #F6D6CC;
  border: 2px solid rgba(140,45,35,0.85);
  border-radius: 44px;

  padding: 26px;                /* ✅ space between outer and inner */
  box-sizing: border-box;

  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 26px;

  overflow: hidden;             /* ✅ nothing can go outside */
}

/* LEFT INNER BOX */
.meta7-left{
  background: #FBE3DC;
  border: 2px solid rgba(140,45,35,0.85);
  border-radius: 34px;

  padding: 42px 42px;
  box-sizing: border-box;

  min-width: 0;                 /* ✅ prevents grid overflow */
  display: flex;
  flex-direction: column;
}

/* small sparkle */
.meta7-spark{
  font-size: 18px;
  color: #7A1F17;
  margin-bottom: 18px;
}

/* Title */
.meta7-title{
  margin: 0;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: #7A1F17;
}

/* Text */
.meta7-text{
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(122,31,23,0.75);
  max-width: 520px;
}

/* Button pinned at bottom */
.meta7-btn{
  margin-top: 10px;
  margin-bottom: 6px;

  height: 58px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}

/* RIGHT IMAGE */
.meta7-right{
  border-radius: 34px;
  overflow: hidden;
  min-width: 0;                 /* ✅ prevents overflow */
}

.meta7-right img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .meta7-shell{
    grid-template-columns: 1fr;
    padding: 18px;
    gap: 18px;
  }

  .meta7-left{
    padding: 28px 22px;
  }

  .meta7-title{
    font-size: 34px;
  }

  .meta7-text{
    max-width: 100%;
  }

  .meta7-right{
    border-radius: 26px;
    aspect-ratio: 16 / 10;     /* ✅ keeps image shape nice */
  }

  .meta7-right img{
    height: 100%;
  }
}

@media (max-width: 420px){
  .meta7-wrap{ padding: 0 16px; }

  .meta7-title{
    font-size: 30px;
  }

  .meta7-btn{
    height: 54px;
    font-size: 14px;
  }
}


 /* =========================
SECTION: WHO WE'RE RIGHT FOR
========================= */

.who-section{
  width:100%;
  background:#f6e9db;
  padding:110px 0 120px;
}

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

  display:flex;
  flex-direction:column;
  align-items:center;
}

/* Title */
.who-title{
  font-size:55px;
  line-height:1.05;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#1f1f1f;
  text-align:center;
  margin:0 0 28px;
}

/* Subtitle line */
.who-sub{
  max-width:980px;
  margin:0 0 34px;
  text-align:center;
  font-size:26px;
  line-height:1.55;
  color:rgba(35,35,35,0.75);
  font-weight:400;
}

/* Bullets (start same line as sub text block area) */
.who-list{
  width:100%;
  max-width:980px;
  margin:0 0 50px;

  list-style:disc;
  list-style-position:outside;

  /* This makes bullets start like screenshot */
  padding-left:34px;
}

.who-list li{
  font-size:26px;
  line-height:1.7;
  color:rgba(35,35,35,0.75);
  margin:0 0 18px;
}

/* Button */
.who-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 44px;
  border-radius:999px;

  margin-top: -40px;

  background:#0f0f0f;
  color:#fff;
  text-decoration:none;

  font-size:16px;
  font-weight:700;

  box-shadow:0 14px 28px rgba(0,0,0,0.18);
}

/* =========================
RESPONSIVE
========================= */
@media (max-width: 1024px){
  .who-title{ font-size:54px; }
  .who-sub{ font-size:22px; max-width:900px; }
  .who-list{ max-width:900px; }
  .who-list li{ font-size:22px; }
}

@media (max-width: 768px){
  .who-section{ padding:80px 0 90px; }
  .who-title{ font-size:42px; }
  .who-sub{ font-size:18px; max-width:680px; }
  .who-list{ max-width:680px; padding-left:26px; }
  .who-list li{ font-size:18px; margin-bottom:14px; }
  .who-btn{ padding:16px 34px; }
}

@media (max-width: 480px){
  .who-wrap{ padding:0 18px; }
  .who-title{ font-size:34px; }
  .who-sub{ font-size:16px; }
  .who-list{ padding-left:22px; }
  .who-list li{ font-size:16px; }
}

/* =========================
SECTION: WHY META ADS (copy-to-copy)
========================= */

.why-meta{
  width:100%;
  background:#f6e9db;
  padding:92px 0 110px;
  margin-top: -40px;
}

.why-meta-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Title */
.why-meta-title{
  margin:0 0 26px;
  font-size:45px;
  line-height:1.06;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#1f1f1f;
}

/* First paragraph (lead) */
.why-meta-lead{
  max-width:1120px;
  margin:0 0 44px;
  font-size:22px;
  line-height:1.7;
  color:rgba(35,35,35,0.75);
}

/* Body paragraphs */
.why-meta-p{
  max-width:1120px;
  margin:0 0 34px;
  font-size:22px;
  line-height:1.7;
  color:rgba(35,35,35,0.75);
}

/* Button */
.why-meta-btn{
  margin-top:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 44px;
  border-radius:999px;

  background:#0f0f0f;
  color:#fff;
  text-decoration:none;

  font-size:16px;
  font-weight:700;
  box-shadow:0 14px 28px rgba(0,0,0,0.18);
}

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

@media (max-width:1024px){
  .why-meta-title{ font-size:42px; }
  .why-meta-lead,
  .why-meta-p{ font-size:20px; }
}

@media (max-width:768px){

  .why-meta{
    padding:70px 0 84px;
  }

  /* LEFT ALIGN EVERYTHING ON MOBILE */
  .why-meta-wrap{
    align-items:flex-start;
    text-align:left;
  }

  .why-meta-title{
    font-size:34px;
    line-height:1.15;
    text-align:center;
    align-self:center;
  }

  .why-meta-lead,
  .why-meta-p{
    font-size:18px;
    line-height:1.75;
    margin-bottom:24px;
    max-width:100%;
  }

  .why-meta-btn{
    padding:16px 34px;
    align-self:flex-start;
  }
}

@media (max-width:480px){
  .why-meta-wrap{ padding:0 18px; }
  .why-meta-title{ font-size:30px; }
  .why-meta-lead,
  .why-meta-p{ font-size:16px; }
}

/* =========================
  HOW META SECTION
========================= */

.how-meta{
  width:100%;
  background:#f6e9db;
  padding:92px 0 110px;
}

.how-meta-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Title */
.how-meta-title{
  margin:0 0 26px;
  font-size:45px;
  line-height:1.06;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#1f1f1f;
}

/* Lead paragraph */
.how-meta-lead{
  max-width:1120px;
  margin:0 0 30px;
  font-size:22px;
  line-height:1.7;
  color:rgba(35,35,35,0.75);
}

/* Body paragraphs */
.how-meta-p{
  max-width:1120px;
  margin:0 0 30px;
  font-size:22px;
  line-height:1.7;
  color:rgba(35,35,35,0.75);
}

/* Button */
.how-meta-btn{
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 44px;
  border-radius:999px;

  background:#0f0f0f;
  color:#fff;
  text-decoration:none;

  font-size:16px;
  font-weight:700;
  box-shadow:0 14px 28px rgba(0,0,0,0.18);
}

/* =========================
  RESPONSIVE
========================= */
@media (max-width:1024px){
  .how-meta-title{ font-size:52px; }
  .how-meta-lead, .how-meta-p{ font-size:22px; }
}

@media (max-width:768px){
  .how-meta{ padding:70px 0 84px; }

  .how-meta-title{
    font-size:40px;
    line-height:1.12;
    text-align:center;
  }

  .how-meta-lead, .how-meta-p{
    font-size:18px;
    line-height:1.75;
    margin-bottom:26px;
    text-align: left;
  }

  .how-meta-btn{ padding:16px 34px; }
}

@media (max-width:480px){
  .how-meta-wrap{ padding:0 18px; }
  .how-meta-title{ font-size:34px; }
  .how-meta-lead, .how-meta-p{ font-size:16px; }
}

/* =========================
   OUTER SHELL Video 
========================= */
/* =========================
   OUTER SHELL
========================= */
.creative-scroll-shell{
  background:#B9DDE1;
  border:1.6px solid #0E5E66;
  border-radius:56px;
  padding:24px;
  box-sizing:border-box;
}

/* Keep items aligned from top */
.creative-scroll-shell > div{
  align-items:stretch;
}

/* =========================
   GRID GAP + FIXED VIDEO COLUMN
   (Add class "creative-scroll-grid" to your grid div in HTML)
========================= */
@media (min-width:768px){
  .creative-scroll-grid{
    column-gap:22px;              /* ✅ decrease space between video & content */
    row-gap:0;
    align-items:start;            /* ✅ top aligned */
    grid-template-columns:350px 1fr; /* ✅ video fixed, content flexible */
  }
}

/* =========================
   LEFT VIDEO AREA (REELS 9:16)
========================= */
.creative-scroll-media{
  border-radius:34px;
  overflow:hidden;
  aspect-ratio:9 / 16;
  width:350px;                   /* ✅ keep fixed width */
  background:#000;
}

.creative-scroll-video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Mobile: allow video to be responsive but keep 350 feeling */
@media (max-width:767px){
  .creative-scroll-media{
    width:100%;
    max-width:350px;
    margin:0 auto;
  }
}

/* =========================
   RIGHT CONTENT BOX
========================= */
.creative-scroll-right{
  background:#B9DDE1;
  border:1.6px solid #0E5E66;
  border-radius:40px;
  padding:28px 34px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

/* =========================
   TYPOGRAPHY
========================= */
.creative-scroll-title{
  font-size:46px;
  line-height:1.08;
  font-weight:500;
  color:#0E5E66;
  margin:0 0 16px;
  
}

.creative-scroll-p{
  font-size:18px;
  line-height:1.75;
  color:rgba(14,94,102,0.88);
  margin:0 0 14px;
  max-width:560px;
}

/* =========================
   BUTTON
========================= */
.creative-scroll-btnwrap{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

.creative-scroll-btn{
  background:#0B0B0D;
  color:#FFFFFF;
  padding:12px 22px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
  white-space:nowrap;
  min-width:320px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1024px){
  .creative-scroll-title{ font-size:38px; }
}

@media (max-width:768px){
  .creative-scroll-title{ font-size:30px; line-height:1.15; }
  .creative-scroll-p{ font-size:14px; }
  .creative-scroll-btn{
    width:100%;
    min-width:100%;
    font-size:13px;
  }
}




/* =========================
   OUTER SHELL (LESS HEIGHT)
========================= */
/* =========================
   OUTER SHELL (ONE BORDER)
========================= */
.innovative-shell{
  background:#DDE1FF;
  border:1.6px solid #2E2A55;
  border-radius:56px;
  padding:24px;
  box-sizing:border-box;
}

/* =========================
   GRID WRAP (EQUAL HEIGHT)
========================= */
.innovative-shell > div{
  align-items:stretch;
}

/* =========================
   LEFT PANEL
========================= */
.innovative-left{
  background:#D9DCFF;
  border:1.6px solid #2E2A55;
  border-radius:40px;
  padding:28px 34px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

/* =========================
   TYPOGRAPHY
========================= */
.innovative-title{
  font-size:44px;
  line-height:1.08;
  font-weight:500;
  color:#2E2A55;
  margin:0 0 16px;
}

.innovative-p{
  font-size:15px;
  line-height:1.75;
  color:rgba(46,42,85,0.85);
  margin:0 0 14px;
  max-width:520px;
}

/* =========================
   BUTTON (CENTER)
========================= */
.innovative-btnwrap{
  margin-top:14px;
  display:flex;
  justify-content:center;   /* ✅ center */
}


.innovative-btn{
  background:#0B0B0D;
  color:#FFFFFF;
  padding:12px 22px;
  border-radius:999px;

  font-size:14px;          /* slightly smaller so it fits */
  font-weight:600;
  text-decoration:none;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
  white-space:nowrap;      /* ✅ FORCE ONE LINE */
}



/* =========================
   IMAGE (LOCKED HEIGHT)
   Any uploaded image will CROP
   and will NOT increase height
========================= */
.innovative-media{
  border-radius:30px;
  overflow:hidden;

  /* Use aspect ratio instead of fixed height */
  aspect-ratio: 630 / 520;   /* same ratio we calculated */

  width:100%;
}

.innovative-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   RESPONSIVE HEIGHT
========================= */
@media (max-width:1024px){
  .innovative-title{ font-size:38px; }
  .innovative-media{ height:440px; }  /* fixed for tablet */
}

@media (max-width:768px){
  .innovative-title{ font-size:30px; }
  .innovative-media{ height:260px; }  /* fixed for mobile */
  .innovative-btn{ 
    font-size:13px;
    width:100%;
  }
}

.scale-meta-shell{
  background:#B9DDE1;              /* teal outer */
  border:1.6px solid #0E5E66;       /* teal border */
  border-radius:56px;
  padding:24px;
  box-sizing:border-box;
}

/* =========================
   GRID ALIGNMENT
========================= */
.scale-meta-shell > div{
  align-items:stretch;
}

/* =========================
   LEFT IMAGE (INSET + FIXED SIZE)
========================= */
.scale-meta-media{
  border-radius:34px;
  overflow:hidden;
  aspect-ratio: 630 / 520;         /* keeps same size feel */
  width:100%;
}

.scale-meta-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   RIGHT CONTENT PANEL
========================= */
.scale-meta-right{
  background:#B9DDE1;              /* same as outer in screenshot */
  border:1.6px solid #0E5E66;
  border-radius:40px;
  padding:28px 34px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
}

/* =========================
   TYPOGRAPHY
========================= */
.scale-meta-title{
  font-size:44px;
  line-height:1.08;
  font-weight:500;
  color:#0E5E66;
  margin:0 0 16px;
}

.scale-meta-p{
  font-size:15px;
  line-height:1.75;
  color:rgba(14,94,102,0.88);
  margin:0 0 14px;
  max-width:560px;
}

/* =========================
   BUTTON (ONE LINE + CENTER)
========================= */
.scale-meta-btnwrap{
  margin-top:14px;
  display:flex;
  justify-content:center;
}

.scale-meta-btn{
  background:#0B0B0D;
  color:#FFFFFF;
  padding:12px 22px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;

  display:flex;
  align-items:center;
  justify-content:center;

  text-align:center;
  white-space:nowrap;
  min-width:320px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width:1024px){
  .scale-meta-title{ font-size:38px; }
}

@media (max-width:768px){
  .scale-meta-title{ font-size:30px; line-height:1.15; }
  .scale-meta-p{ font-size:14px; }
  .scale-meta-btn{ width:100%; min-width:100%; font-size:13px; }
}

/* =========================
   Optimizing the Full Funnel Section
========================= */
.roas-text{
  width:100%;
  background:#f6e9db;
  padding:92px 0 110px;
}

.roas-text-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.roas-text-title{
  margin:0 0 30px;
  font-size:45px;
  line-height:1.06;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#1f1f1f;
}

.roas-text-p{
  max-width:1120px;
  font-size:22px;
  line-height:1.75;
  color:rgba(35,35,35,0.75);
  margin:0;
}

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

@media (max-width:1024px){
  .roas-text-title{ font-size:42px; }
  .roas-text-p{ font-size:20px; }
}

@media (max-width:768px){

  .roas-text{
    padding:70px 0 84px;
  }

  .roas-text-title{
    font-size:34px;
    line-height:1.15;
  }

  .roas-text-p{
    font-size:18px;
    line-height:1.75;
  }
}

@media (max-width:480px){
  .roas-text-wrap{ padding:0 18px; }
  .roas-text-title{ font-size:30px; }
  .roas-text-p{ font-size:16px; }
}

/* =========================
   PRICING TEXT SECTION
========================= */
.pricing-text{
  width:100%;
  background:#f6e9db;
  padding:92px 0 110px;
  margin-top: -60px;
}

.pricing-text-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 24px;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

/* Title */
.pricing-text-title{
  margin:0 0 26px;
  font-size:45px;
  line-height:1.06;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#1f1f1f;
}

/* Paragraph */
.pricing-text-p{
  max-width:1120px;
  margin:0 0 34px;
  font-size:22px;
  line-height:1.75;
  color:rgba(35,35,35,0.75);
}

/* Button */
.pricing-text-btn{
  margin-top:6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:18px 44px;
  border-radius:999px;

  background:#0f0f0f;
  color:#fff;
  text-decoration:none;

  font-size:16px;
  font-weight:700;
  box-shadow:0 14px 28px rgba(0,0,0,0.18);
}

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

@media (max-width:1024px){
  .pricing-text-title{ font-size:42px; }
  .pricing-text-p{ font-size:20px; }
}

@media (max-width:768px){

  .pricing-text{
    padding:70px 0 84px;
  }

  .pricing-text-title{
    font-size:34px;
    line-height:1.15;
  }

  .pricing-text-p{
    font-size:18px;
    line-height:1.75;
    margin-bottom:24px;
    max-width:100%;
  }

  .pricing-text-btn{
    padding:16px 34px;
  }
}

@media (max-width:480px){
  .pricing-text-wrap{ padding:0 18px; }
  .pricing-text-title{ font-size:30px; }
  .pricing-text-p{ font-size:16px; }
}

/* =========================
   FAQ SECTION
========================= */
.meta-faq{
  width:100%;
  background:#f6e9db;
  padding:88px 0 110px;
}

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

.meta-faq-title{
  text-align:center;
  margin:0 0 46px;
  font-size:54px;
  line-height:1.06;
  font-weight:900;
  letter-spacing:-0.03em;
  color:#1f1f1f;
}

.meta-faq-list{
  max-width:1050px;
  margin:0 auto;
}

.meta-faq-item{
  border-top:1px solid rgba(0,0,0,0.10);
  padding:22px 0;
}

.meta-faq-item:last-child{
  border-bottom:1px solid rgba(0,0,0,0.10);
}

.meta-faq-q{
  width:100%;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;

  display:flex;
  align-items:center;
  gap:18px;
  text-align:left;

  font-size:20px;
  font-weight:700;
  color:#0f0f0f;
}

/* PLUS ICON */
.meta-faq-plus{
  width:22px;
  height:22px;
  position:relative;
  flex:0 0 22px;
  opacity:0.55;
}

.meta-faq-plus::before,
.meta-faq-plus::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:2px;
  background:#0f0f0f;
  border-radius:2px;
  transform-origin:center;
  transition:transform 220ms ease;
}

.meta-faq-plus::before{
  transform:translate(-50%,-50%);
}

.meta-faq-plus::after{
  transform:translate(-50%,-50%) rotate(90deg);
}

/* OPEN STATE (turn into X) */
.meta-faq-item.is-open .meta-faq-plus::before{
  transform:translate(-50%,-50%) rotate(45deg);
}
.meta-faq-item.is-open .meta-faq-plus::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* PANEL ANIMATION */
.meta-faq-panel{
  max-height:0;
  overflow:hidden;
  transition:max-height 300ms ease;
}

.meta-faq-a{
  padding:14px 0 0 40px;
}

.meta-faq-a p{
  margin:0;
  font-size:18px;
  line-height:1.75;
  color:rgba(35,35,35,0.75);
}

/* Responsive */
@media (max-width:768px){
  .meta-faq-title{ font-size:38px; }
  .meta-faq-q{ font-size:18px; }
  .meta-faq-a p{ font-size:16px; }
}


/* WEBSITE CASE STUDY PAGE START */
/* =========================================================
   WEBSITE WORK (HERO + GRID) — SAME LOOK AS CASE STUDIES
   Renamed classes: wk-*
========================================================= */

/* Shared container */
.wk-shell{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 10px;
}

/* =========================
   HERO
========================= */
.wk-hero{
  background:#f6e9db;
}

.wk-hero-wide{
  padding: 90px 0 38px;
}

.wk-hero-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
}

.wk-hero-title{
  margin:0;
  font-weight:300;
  color:#111;
  letter-spacing:-0.04em;
  line-height:0.9;
  font-size: clamp(72px, 8.6vw, 140px);
}

.wk-hero-sub{
  margin:0;
  max-width: 420px;
  font-size: 26px;
  line-height: 1.15;
  font-weight: 400;
  color: rgba(0,0,0,0.78);
  text-align:left;
}

/* =========================
   GRID
========================= */
.wk-grid{
  background:#f6e9db;
  padding: 10px 0 90px;
}

.wk-grid-inner{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}

/* =========================
   CARD
========================= */
.wk-card{
  display:block;
  text-decoration:none;
  color:inherit;

  border-radius: 28px;
  overflow:hidden;

  border: 1.5px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.10);

  transition: transform 0.25s ease;
}

.wk-card:hover{
  transform: translateY(-4px);
}

/* Image */
.wk-media{
  position:relative;
  width: 100%;
  aspect-ratio: 16/10;
  overflow:hidden;
  background: rgba(255,255,255,0.12);
}

.wk-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Badge */
.wk-badge{
  position:absolute;
  top:18px;
  left:18px;

  background:#f4f4f4;
  border: 1px solid rgba(0,0,0,0.45);
  padding: 8px 18px;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 500;
  color:#111;
}

/* Bottom panel */
.wk-bottom{
  background: rgba(245,245,245,0.68);
  padding: 16px 18px 18px;
  border-top: 1px solid rgba(0,0,0,0.20);
}

.wk-tag{
  display:inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.45);
  font-size: 13px;
  font-weight: 500;
  color:#111;
  margin-bottom: 12px;
}

.wk-h3{
  margin:0;
  font-size: 20px;
  line-height: 1.3;
  font-weight: 400;
  color:#111;
}

/* =========================
   TABLET
========================= */
@media (max-width: 1024px){

  .wk-shell{
    max-width: 1200px;
    padding: 0 18px;
  }

  .wk-hero-wide{
    padding: 70px 0 30px;
  }

  .wk-hero-title{
    font-size: clamp(58px, 8vw, 110px);
  }

  .wk-hero-sub{
    font-size: 22px;
    max-width: 340px;
  }

  .wk-grid-inner{
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }

  .wk-media{
    height: 280px;
  }

  .wk-h3{
    font-size: 20px;
  }
}

/* =========================
   MOBILE
========================= */
@media (max-width: 768px){

  .wk-hero-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 0 18px;
  }

  .wk-hero-title{
    font-size: clamp(40px, 10vw, 64px);
    white-space: nowrap;
    line-height: 1;
  }

  .wk-hero-sub{
    margin: 0;
    font-size: 18px;
    max-width: 100%;
    text-align: left;
    line-height: 1.3;
  }

  .wk-grid-inner{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wk-media{
    height: auto !important;
    aspect-ratio: 16 / 10;
  }

  .wk-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .wk-bottom{
    padding: 14px 16px 16px;
  }

  .wk-tag{
    margin-bottom: 10px;
  }

  .wk-h3{
    font-size: 18px;
    line-height: 1.28;
  }
}

@media (max-width: 420px){
  .wk-hero-title{
    font-size: clamp(36px, 9.5vw, 56px);
  }
}

/* =========================================================
   WORK DETAIL PAGE (new but same design language)
========================================================= */

.wk-detail-hero{
  background:#f6e9db;
  padding: 70px 0 40px;
}

.wk-detail-hero-inner{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 34px;
  align-items: start;
}

.wk-detail-title{
  margin:0 0 18px;
  font-size: clamp(34px, 3.2vw, 56px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color:#111;
}

.wk-detail-meta{
  display:flex;
  flex-wrap:wrap;
  gap:16px 22px;
  margin: 0 0 18px;
}

.wk-detail-meta-block{
  min-width: 160px;
}

.wk-detail-meta-label{
  font-size: 13px;
  letter-spacing: 0.02em;
  color: rgba(0,0,0,0.60);
  margin-bottom: 6px;
}

.wk-detail-meta-value{
  font-size: 16px;
  font-weight: 500;
  color:#111;
}

.wk-detail-lead{
  margin: 0;
  max-width: 620px;
  font-size: 18px;
  line-height: 1.65;
  color: rgba(0,0,0,0.78);
}

.wk-detail-cta{
  display:flex;
  gap: 16px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 22px;
}

.wk-visit-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  border-radius: 999px;
  background:#1f1f1f;
  color:#fff;
  text-decoration:none;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 14px 30px rgba(0,0,0,0.16);
}

.wk-visit-btn:hover{ opacity: 0.92; }

.wk-back-link{
  color:#111;
  text-decoration:none;
  font-size: 14px;
  opacity: 0.75;
}

.wk-back-link:hover{ opacity: 1; }

.wk-detail-preview{
  border-radius: 28px;
  overflow:hidden;
  border: 1.5px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.10);
}

.wk-detail-preview img{
  width:100%;
  height:auto;
  display:block;
}

/* Screenshots section */
.wk-shot{
  background:#f6e9db;
  padding: 10px 0 90px;
}

.wk-shot-title{
  margin: 0 0 18px;
  font-size: 24px;
  font-weight: 500;
  color:#111;
}

.wk-shot-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.wk-shot-card{
  border-radius: 22px;
  overflow:hidden;
  border: 1.5px solid rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.10);
}

.wk-shot-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  aspect-ratio: 16 / 10;
}

@media (max-width: 1024px){
  .wk-detail-hero-inner{
    grid-template-columns: 1fr;
  }
  .wk-shot-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px){
  .wk-detail-hero{
    padding: 56px 0 24px;
  }
  .wk-shot-grid{
    grid-template-columns: 1fr;
  }
}
/* WEBSITE CASE STUDY PAGE END */