.branding-hero-subcopy{font-family:'Poppins',sans-serif;font-weight:400;font-size:18px;line-height:1.5;color:#F2F2F2}.branding-hero-image{height:auto;width:100%}.branding-global-header{display:flex;flex-direction:row;padding:0 100px;margin-bottom:100px;gap:40px}.branding-global-title{flex:1;min-width:0;font-family:'Poppins',sans-serif;font-weight:500;font-size:40px;line-height:1.2;color:#FFFFFF}.branding-global-desc{flex:1;min-width:0;font-family:'Poppins',sans-serif;font-weight:400;font-size:18px;line-height:1.5;color:#FFFFFF}.branding-focus-card{flex:1;padding:24px 12px;display:flex;flex-direction:column;gap:24px;min-height:350px}.branding-focus-card-title{font-family:'Poppins',sans-serif;font-weight:600;font-size:20px;line-height:1.35;color:#000000}.branding-focus-card-text{font-family:'Poppins',sans-serif;font-weight:400;font-size:16px;line-height:1.5;color:#000000}.branding-approach-list-wrap{display:flex;align-items:flex-start;justify-content:flex-end}.branding-approach-list-wrap .branding-approach-list{max-width:100%}.branding-advantage-section{padding:80px 100px;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-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-global-section{padding:40px 0}.branding-global-header{flex-direction:column;gap:20px;padding:0 20px;margin-bottom:10px}.branding-global-title{flex:none;font-size:28px;min-width:auto}.branding-global-desc{flex:none}.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:30px 16px}.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}}

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

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


/* RAYAI-HEROWRAP */

/* HERO WRAP (deck slide 11 #2, 2026-07-20): Figma breaks after "From Playbook"
   so "to Performance" sits on line 2. Measured at 56px/500: "From Playbook"=434px,
   "From Playbook to"~489px, "to Performance"=386px -> a 460px cap forces the
   intended break. Desktop only. */
@media (min-width:992px){.branding-hero-heading{max-width:460px}}

/* 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/ray-ai/hero-banner-v3.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/ray-ai/hero-banner-mobile-v3.jpg.webp) !important;
    aspect-ratio:393/500 !important;height:auto !important;min-height:0 !important;
  }
}

/* RAYAI-SUBTEXT (2026-07-21): Ray AI's subtext uses .branding-hero-subcopy which
   lacked max-width + margin-bottom, so it ran full-width and the CTA sat too close.
   Match the .branding-hero-subtitle other pages use. */
.branding-hero-subcopy{max-width:480px;margin-bottom:24px}

/* 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. */
@media (min-width:992px){.branding-hero-section{width:100% !important;aspect-ratio:auto !important;height:41.32vw !important;max-height:595px !important;background-size:cover !important;background-position:center !important}}

/* BANNER-VCENTER (2026-07-21): vertically center the banner content (breadcrumb/title/
   subtext/button) in the image. Section had padding-top:150/padding-bottom:0 (top-heavy)
   and the content column padding-bottom:140. Flex-center on desktop; reset those paddings. */
@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}
}
/* RAYAI-S345-BREAKS */

/* RAYAI-S345-BREAKS (2026-07-21, Mukesh deck): line breaks for sections 3/4/5 to match Figma.
   Desktop only; measured caps. */
@media (min-width:992px){
  /* S3: 3 lines, "AI Marketing Intelligence" (serif) on its own single line.
     "Bridging the Strategy"=422 / "...Gap"=516 -> 485 wraps the Poppins to 2 lines;
     serif display:block puts it on line 3. */
  .branding-global-title{max-width:485px}
  .branding-global-title .ttc-em{display:block}
  /* S4: move "Impact" to line 2 with the green serif. "Scale Your Marketing"=422 /
     "...Impact"=576; line2 "Impact Without Losing Your"=525 -> 550 cap. */
  .branding-approach-title{max-width:550px}
  /* S5: move "Proposition" to line 2. "The Ray Value"~300 -> 400 cap. */
  .branding-advantage-title{max-width:400px}
}
/* RAYAI-DESC-ALIGN */

/* RAYAI-DESC-ALIGN (2026-07-21): align the S3 (Bridging) and S5 (Value Proposition) right
   paragraphs with the "Say hello to Ray" paragraph. That section is a 50/50 row (gap 24) so
   its right col is (content-24)/2 wide, right-aligned. S3's title max-width had let its desc
   grow left (625); S5 had a 144px gap (desc at 754). Make both right paragraphs a right-aligned
   50% column with a 24px gap — matches Say-hello at every viewport width. */
@media (min-width:992px){
  .branding-global-header{justify-content:space-between !important;gap:24px !important}
  .branding-global-desc{flex:0 0 calc((100% - 24px)/2) !important;max-width:calc((100% - 24px)/2) !important}
  .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}
}

/* ===== #428 (2026-09-04) — Section 2 relayout: heading at top, supporting text directly below it,
   square product video on the right. Scoped to this page; pages-shared.css base rules untouched.
   #442 (2026-09-07, Pritesh) — true 12-column grid: copy 6 cols / video 6 cols, EQUAL width, tops
   aligned; larger heading -> sub-copy gap (20px -> 40px). Grid overrides the
   shared flex base only on this page. Ships AFTER pages-shared so these win.
   #445 (2026-09-07, Pritesh) — video panel was too tall: a 608px-wide square (aspect-ratio:1/1) ran
   608px tall vs a ~478px copy block. Fix: row align-items:stretch + wrapper height:100% so the panel
   height TRACKS the copy column at every width (no magic number); video is position:absolute + inset:0
   + object-fit:cover so the square 1080x1080 crops (never distorts) to the panel. ===== */
.branding-intro-row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;align-items:stretch}
.branding-intro-left{grid-column:span 6}
.branding-intro-right{grid-column:span 6;max-width:none}
.branding-intro-left h2{display:block;margin-bottom:40px}
.branding-intro-left p{font-family:'Poppins',sans-serif;font-weight:400;font-size:18px;line-height:1.5;color:#000000;margin:0 0 16px}
.branding-intro-cta{display:inline-block;margin-top:8px}
.branding-slider-wrapper{height:100%;aspect-ratio:auto;margin-top:0;width:100%;min-height:0}
.branding-slider-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:991px){
  /* Mobile unchanged: single column, copy above video (source order) */
  .branding-intro-row{grid-template-columns:1fr;align-items:stretch}
  .branding-intro-left{grid-column:auto}
  .branding-intro-right{grid-column:auto;max-width:none;width:100%}
  .branding-intro-left h2{display:block;margin-bottom:24px}
  .branding-slider-wrapper{height:auto;aspect-ratio:1/1;margin-top:0}
  .branding-hero-section::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);pointer-events:none}
  .branding-hero-section>.container-fluid{position:relative;z-index:1}
}