/* page-contact — page-specific fixes (loaded only there, after responsive.css) */

/* ---- visual QA pass ---- */

/* hero: balance the subtitle so it doesn't break on "cost- / effective" with a long first line */
body.page-template-page-contact .ct-hero-in p{text-wrap:balance}

/* video: .cv-inner is a 2-row grid filling a 16:8.4 box, so the rows stretched to half the height each —
   the placeholder sat in the middle of the top half and the play button in the middle of the bottom
   half (play button 144px below centre at 1440px, almost touching the frame edge on phones).
   Centre the label + button as one group. */
body.page-template-page-contact .cv-inner{align-content:center}
/* play ring: the ::after was positioned against .cv-inner (button not positioned) and, being
   content-box with a 1px border, was 74px over a 72px button — centred only by accident of the grid
   static position, and it didn't follow the button's hover scale. Anchor it to the button. */
body.page-template-page-contact .cv-play{position:relative}
body.page-template-page-contact .cv-play::after{box-sizing:border-box;inset:0;width:auto;height:auto}

/* testimonials: the section used the 1488px .wrap while every other block on the page (form, reach-us
   panel, logos, video, certifications, stats) is 1120px — the bento stuck out 96px each side at 1440px
   and 120px at 1920px. Match the page's content width. */
@media(min-width:1001px){
  body.page-template-page-contact .ct-testi .wrap{max-width:calc(1120px + 2 * var(--gut))}
}
/* the large closing quote mark (bottom-right of the small cards) overlapped long author lines
   ("Senior Manager - HR · RR Kabel Limited" at 1024px): keep the author block clear of it */
body.page-template-page-contact .tcard:not(.tcard--feat) .who{padding-right:40px}

@media(max-width:1000px){
  /* logos row: style.css gives it max-width 100vw - 2×--gut (38px at 768, 20px at 375) while the rest of
     the page uses the .ctw padding (28px / 16px), so "We are aligned with" sat 10px / 4px inside the
     content edge */
  body.page-template-page-contact .ct-tbgrid .trustbar-in{max-width:none;padding-inline:clamp(16px,4vw,28px)}
}
@media(max-width:760px){
  /* testimonial swipe row: gutter used --gut (20px at 375) instead of the page padding (16px) */
  body.page-template-page-contact .test-bento{margin-inline:calc(clamp(16px,4vw,28px) * -1);
    padding-inline:clamp(16px,4vw,28px);scroll-padding-inline:clamp(16px,4vw,28px)}
}
@media(max-width:600px){
  /* video: at phone widths the 16:8.4 box is barely taller than label + gap + button (2px spare at 320px);
     guarantee breathing room — aspect-ratio lets the box grow to fit */
  body.page-template-page-contact .cv-inner{padding-block:22px}
}