.branding-hero-heading span{color:#C5B4E3}.branding-hero-subtitle{font-family:'Poppins',sans-serif;font-weight:400;font-size:18px;line-height:1.5;color:#F2F2F2;margin-bottom:24px;max-width:480px}.branding-slider-track{display:flex;gap:20px;animation:brandingSlide 30s linear infinite;position:absolute}.branding-slider-track.top{top:20px}.branding-slider-track.bottom{bottom:20px;animation-direction:reverse}.branding-slider-track img{height:240px;width:auto;border-radius:0;flex-shrink:0;transform:rotate(-5.6deg)}@keyframes brandingSlide{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}.branding-global-header{display:flex;gap:150px;padding:0 100px;margin-bottom:100px}.branding-global-title{font-family:'Poppins',sans-serif;font-weight:500;font-size:40px;line-height:1.2;color:#FFFFFF;min-width:510px}.branding-global-desc{font-family:'Poppins',sans-serif;font-weight:400;font-size:18px;line-height:1.5;color:#FFFFFF;max-width:611px}.branding-focus-card{flex:1;padding:24px 12px;display:flex;flex-direction:column;gap:24px;min-height:214px}.branding-focus-card-text{font-family:'Poppins',sans-serif;font-weight:600;font-size:20px;line-height:1.2;color:#000000}.branding-approach-right{flex:1;max-width:609px;display:flex;align-items:center}.branding-approach-right .branding-approach-list{width:100%}.branding-advantage-section{padding:100px 100px 80px;background-color:#FFFFFF}@media (max-width:991px){.branding-hero-section{padding:120px 20px 0;min-height:auto}.branding-hero-row{flex-direction:column;min-height:auto}.branding-hero-left{padding-bottom:30px}.branding-hero-heading{font-size:32px}.branding-hero-subtitle{font-size:16px;margin-bottom:20px}.branding-hero-image-col{justify-content:center}.branding-hero-image{max-width:300px}.branding-intro-section{padding:40px 20px}.branding-intro-row{flex-direction:column;gap:24px}.branding-intro-left h2{font-size:24px}.branding-slider-wrapper{height:300px}.branding-slider-track img{height:140px}.branding-global-section{padding:40px 0}.branding-global-header{flex-direction:column;gap:20px;padding:0 20px;margin-bottom:10px}.branding-global-title{font-size:28px;min-width:auto}.branding-global-focuses{padding:0 20px;font-size:18px}.branding-focus-cards{flex-direction:column;padding:0 20px}.branding-global-bottom-text{padding:0 20px}.branding-global-divider{margin:30px 20px}.branding-approach-section{flex-direction:column;padding:0 20px}.branding-approach-left{max-width:100%}.branding-approach-right{max-width:100%}.branding-approach-title{font-size:28px}.branding-advantage-section{padding:16px 16px 40px}.branding-advantage-header{flex-direction:column;gap:20px}.branding-advantage-title{font-size:28px;min-width:auto}.branding-advantage-grid{grid-template-columns:1fr;gap:30px}.branding-advantage-center-img{grid-row:auto;grid-column:auto;order:5}.branding-advantage-grid .branding-advantage-card:nth-child(1){order:1}.branding-advantage-grid .branding-advantage-card:nth-child(3){order:2}.branding-advantage-grid .branding-advantage-card:nth-child(4){order:3}.branding-advantage-grid .branding-advantage-card:nth-child(5){order:4}.cta-section{padding:0 !important;min-height:auto !important;position:relative !important}.cta-section .container-fluid{padding:15px 20px !important;display:flex !important;flex-direction:column !important;justify-content:flex-start !important;flex:0 0 auto !important;min-height:auto !important;position:relative !important;z-index:1 !important}.lottie-shapes-container{position:absolute !important;top:0 !important;left:50% !important;transform:translateX(-50%) !important;width:100vw !important;margin:0 !important;padding:0 !important;pointer-events:none !important;z-index:0 !important;overflow:hidden !important}.cta-section .row{margin-bottom:0 !important}.cta-section h2,.cta-section .col-lg-8>div:first-child{font-size:24px !important;margin-bottom:16px !important}.cta-button{padding:14px 40px !important;font-size:16px !important}.talk-to-us-button{margin-top:16px !important}}

/* === Full-width hero banner (2026 update) === */
.branding-hero-section{background-image:url(/wp-content/themes/ttc-theme/assets/cx-studio/hero-banner.png.webp);background-size:cover;background-position:center right;background-repeat:no-repeat;height:595px;overflow:hidden}
.branding-hero-image-col{display:none}
@media (max-width:991px){.branding-hero-section{background-image:url(/wp-content/themes/ttc-theme/assets/cx-studio/hero-banner-mobile.png.webp);background-position:center;min-height:500px}}

/* === Emphasis: Source Serif 4 italic (2026) === */
/* FULL-BANNER-NOZOOM */

/* FULL-BANNER-NOZOOM (2026-07-21): show the WHOLE 1440x595 banner image at its
   native ratio instead of scaling it up to a fixed 720px (which zoomed + cropped).
   aspect-ratio == image ratio, so background-size:cover shows the full image with
   no crop; height flexes with width but stays uniform across all pages. */
.branding-hero-section{
  background-image:url(/wp-content/themes/ttc-theme/assets/cx-studio/hero-banner-v2.jpg.webp) !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  aspect-ratio:1440/595 !important;
  height:auto !important;
  min-height:0 !important;
}
@media (max-width:991px){
  .branding-hero-section{
    background-image:url(/wp-content/themes/ttc-theme/assets/cx-studio/hero-banner-mobile-v2.jpg.webp) !important;
    aspect-ratio:393/500 !important;
    height:auto !important;
    min-height:0 !important;
  }
}

/* BANNER-HEIGHT-CAP (2026-07-21): cap banner height so it doesn't grow tall on wide
   monitors (aspect-ratio would push it to ~793px @1920). Full image on <=1440;
   capped at 595 (image native height) on wider, cover crops minimally. */
.branding-hero-section{max-height:595px !important}

/* BANNER-BELOW-HEADER (2026-07-21): the 70px fixed header was overlaying (cutting)
   the top of the full-image banner. Push the banner down by the header height so
   the whole image sits below the header. */
.branding-hero-section{margin-top:70px !important}

/* BANNER-FULLWIDTH-FIX (2026-07-21): keep the banner FULL WIDTH on wide monitors.
   aspect-ratio+max-height was computing width from the capped height (=1440px), leaving
   white space at >1440. Use viewport-width height (41.32vw = 595/1440) capped at 595 so
   the banner spans full width, shows the full image up to 1440, and stays 595 on wider. */
.branding-hero-section{width:100% !important;aspect-ratio:auto !important;height:41.32vw !important;max-height:595px !important;min-height:0 !important;background-size:cover !important;background-position:center !important}

/* BANNER-VCENTER (2026-07-21): vertically center banner content in the image (desktop). */
@media (min-width:992px){
  .branding-hero-section{display:flex !important;flex-direction:column !important;justify-content:center !important;padding-top:0 !important;padding-bottom:0 !important}
  .branding-hero-left{padding-bottom:0 !important}
}
/* CX-S1-4LINES */
/* CX-S1-4LINES (2026-07-21, Mukesh deck): Section 1 intro headline to 4 lines (was 3) to
   match the Figma. Measured: L1 "...CX"=542 / "...studio"=654; L3 "...uncommon"=411 /
   "...perspective."=588 -> a 560px cap breaks "perspective." to line 4. Desktop only. */
@media (min-width:992px){.branding-intro-left h2{display:block;max-width:560px}}