.branding-intro-section{background-color:#ffffff;padding:68px 100px;margin-top:40px}.branding-intro-row{display:flex;gap:40px}.branding-approach-section{display:flex;gap:46px;align-items:stretch;justify-content:space-between}.branding-approach-right img,.branding-approach-right video{width:100%;height:100%;object-fit:cover}.branding-advantage-section{padding:80px 100px;background-color:#FFFFFF}.branding-advantage-header{margin-bottom:80px;justify-content:space-between}.branding-advantage-desc{font-family:'Poppins',sans-serif !important;font-weight:400;font-size:18px;line-height:1.5;color:#000000;max-width:591px}.branding-advantage-desc span{font-family:'Poppins',sans-serif !important;font-weight:600;font-size:18px;line-height:1.5;color:#000000}@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-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-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:30px 16px}.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}.branding-advantage-header{flex-direction:column !important;gap:16px !important;margin-bottom:24px !important}.branding-advantage-desc{max-width:100% !important;font-size:16px !important}.branding-advantage-desc span{font-size:16px !important}.branding-advantage-grid{gap:20px !important}.branding-advantage-center-img{display:none !important}}

/* === Full-width hero banner (2026 update) === */
.branding-hero-section{background-image:url(/wp-content/themes/ttc-theme/assets/creative-content/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/creative-content/hero-banner-mobile.png.webp);background-position:center;min-height:500px}}

/* === Emphasis: Source Serif 4 italic (2026) === */

/* FULL-BANNER-NOZOOM (2026-07-21): full 1440x595 image, no zoom; aspect-ratio==image
   ratio so cover shows the whole image; uniform across pages. */
.branding-hero-section{
  background-image:url(/wp-content/themes/ttc-theme/assets/creative-content/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/creative-content/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}
}


/* CC-APPROACH-2COL (2026-07-21): the "We understand..." section was wrapped in
   .branding-hero-section, so every top-banner rule (bg image, aspect/height, flex
   centering, margin-top:70px) leaked onto it — the banner photo behind the section
   was a mistake. Template wrapper renamed to .branding-approach-wrap; give it the
   site's dark section bg. The 2-column layout (content left + approach.mp4 right)
   and video sizing already come from the shared .branding-approach-* rules. */
.branding-approach-wrap{background-color:#120D0D}

/* CC-APPROACH-TITLE-4LINES (2026-07-21): cap the title width so it wraps to 4 lines
   (Figma). At 40px inside the 583px column it naturally makes 3 lines; 520 forces 4. */
@media (min-width:992px){.branding-approach-title{display:block;max-width:520px}}

/* CC-TTCPLUS-ALIGN (2026-07-21): align the TTC+ Advantage right paragraph as a 50%
   column, same fix as Ray AI (RAYAI-DESC-ALIGN). */
@media (min-width:992px){
  .branding-advantage-header{justify-content:space-between !important;gap:24px !important}
  .branding-advantage-desc{flex:0 0 calc((100% - 24px)/2) !important;max-width:calc((100% - 24px)/2) !important}
}

/* CC-APPROACH-VIDEO-FILL (2026-07-22): the video fills the right column — same height as the
   left content column and full width (object-fit:cover), so it reads as a full 2nd column rather
   than a small natural-aspect clip. The section is align-items:stretch, so the column already
   matches the left height; the video just fills it. */
@media (min-width:992px){
  .branding-approach-right{display:block}
  .branding-approach-right video{width:100% !important;height:100% !important;object-fit:cover !important}
}

/* CC-INTRO-2LINES (2026-07-22): the S1 headline should read in two lines on desktop
   ("Creative and content that earn" / "attention and action.") to match Figma. */
.cc-desk-br{display:none}
@media (min-width:992px){.cc-desk-br{display:inline}}

/* Content Creative Studio — Our Approach video (Mobi_TTC_V3: 4:3 rounded box, hover-unmute) 2026-07-27 */
.branding-approach-right .cc-approach-video{width:100%;max-width:615px;aspect-ratio:4/3;height:auto !important;object-fit:cover !important;border-radius:16px;display:block;margin-left:auto;background:#000;}
@media (min-width:992px){
  .branding-approach-section{align-items:center;}
  .branding-approach-left{flex:1 1 auto;min-width:0;}
  .branding-approach-right{flex:0 0 615px;max-width:615px;display:block;}
}
@media (max-width:991px){
  .branding-approach-right .cc-approach-video{max-width:100%;margin-left:0;}
}

/* CHANGE A: Our Approach — intro subtitle moved to top of RIGHT column, above the video (2026-07-27) */
.branding-approach-right{display:flex;flex-direction:column;}
.branding-approach-subtitle--right{margin:0 0 20px;width:100%;}
@media (min-width:992px){
  .branding-approach-right{flex:0 0 615px;max-width:615px;display:flex;flex-direction:column;align-items:flex-end;}
  .branding-approach-subtitle--right{max-width:615px;}
}
@media (max-width:991px){
  .branding-approach-right{align-items:stretch;}
  .branding-approach-subtitle--right{max-width:100%;margin-bottom:16px;}
}