/* TTS Visual Bands (staging build, 31 Oct 2026). Visual only: no wording is added or changed.
   Colours use the theme tokens: ink #0F172A, ink-soft #1E293B, chalk #fff, stone #F1F5F9, stone-dark #E2E8F0, sapphire #0284C7, sap-light #38BDF8, ink-light #475569. */

/* ---------- Photo hero (real img, lighter overlay so the photo shows) ---------- */
.page-hero.tts-hero--photo{min-height:clamp(320px,34vw,480px);display:flex;align-items:center;background-image:none!important}
.page-hero.tts-hero--photo{position:relative;overflow:hidden}
.page-hero.tts-hero--photo>.container{width:100%;position:relative;z-index:1}
.page-hero.tts-hero--photo::before{display:none}
.tts-hero__media{position:absolute;inset:0;z-index:0;margin:0}
.tts-hero__media picture{display:block;width:100%;height:100%}
.tts-hero__media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center right}
.tts-hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,42,.96) 0%,rgba(15,23,42,.9) 40%,rgba(15,23,42,.35) 62%,rgba(15,23,42,.05) 100%)}
.page-hero.tts-hero--photo .page-hero__sub{color:rgba(248,250,252,.88)}
.page-hero.tts-hero--photo .page-hero__title{text-shadow:0 1px 18px rgba(15,23,42,.35)}

/* ---------- Homepage hero: real <img> instead of a CSS background (same gradient overlay and crop as the theme) ---------- */
.hero.hero--photo .hero__photo-bg{background:none}
.hero__photo-bg picture{display:block;position:absolute;inset:0}
.hero__photo-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero__photo-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,30,.62) 0%,rgba(10,15,30,.78) 100%)}
@media(max-width:700px){.hero__photo-bg img{object-position:68% center}}

/* ---------- Bands ---------- */
.tts-band{padding:clamp(3rem,6vw,5.5rem) 0;position:relative}
.tts-band--white{background:#fff}
.tts-band--stone{background:#F1F5F9}
.tts-band--ink{background:#0F172A;color:#E2E8F0}
.tts-band--ink h2,.tts-band--ink h3,.tts-band--ink .service-page__heading{color:#fff}
.tts-band--ink a{color:#38BDF8}
.tts-band--ink p,.tts-band--ink li,.tts-band--ink .service-page__prose{color:#CBD5E1}
.tts-wrap{max-width:1160px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.tts-wrap--narrow{max-width:860px}
.tts-band .service-page__section,.tts-band .service-page__section--highlight{background:none;box-shadow:none;border:0;padding:0;margin:0}
.tts-band .container,.tts-band .svc-grid{max-width:1160px;margin-left:auto;margin-right:auto}
.tts-band .section-chalk{padding:0;background:transparent;margin-top:0!important}
.tts-band .cat-process,.tts-band .platform-section{margin-top:0;padding-top:0;border-top:0}
.tts-band .cat-engagement{margin-top:0}
.section-chalk.tts-bg-stone{background:#F1F5F9}

/* ---------- Photo plus text split (stacks, photo first, below 820px) ---------- */
.tts-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-items:center}
.tts-split--reverse .tts-split__media{order:-1}
.tts-split__text{min-width:0}
.tts-split__media{margin:0;min-width:0}
.tts-split__media picture{display:block}
.tts-split__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:14px;box-shadow:0 18px 40px -18px rgba(15,23,42,.45)}

/* ---------- Full width banner and photo band ---------- */
.tts-banner{margin:0;line-height:0}
.tts-banner picture{display:block}
.tts-banner img{display:block;width:100%;height:clamp(180px,26vw,360px);object-fit:cover}
.tts-photo-band{position:relative;color:#fff;padding:clamp(3.5rem,8vw,7rem) 0;overflow:hidden;background:#0F172A}
.tts-photo-band__media{position:absolute;inset:0;margin:0}
.tts-photo-band__media picture{display:block;width:100%;height:100%}
.tts-photo-band__media img{display:block;width:100%;height:100%;object-fit:cover}
.tts-photo-band__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,42,.92),rgba(15,23,42,.7))}
.tts-photo-band>.tts-wrap{position:relative}
.tts-photo-band .cat-engagement{background:none;box-shadow:none;padding:0}
.tts-photo-band .cat-engagement::before{display:none}
.tts-photo-band h2,.tts-photo-band h3,.tts-photo-band p{color:#fff}

/* ---------- Card lists (SVG tick and alert icons, tiny inline data URIs) ---------- */
.tts-card-list{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;list-style:none;padding:0;margin:1.25rem 0 0}
.tts-card-list li{position:relative;background:#fff;border:1px solid #E2E8F0;border-left:4px solid #0284C7;border-radius:10px;padding:1rem 1.25rem 1rem 3.25rem;font-weight:500;color:#1E293B;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.tts-card-list li::before{left:1.1rem;top:1.05rem;width:22px;height:22px;background-size:16px}
.tts-card-list.service-page__list--problems li{border-left-color:#F97316}

/* ---------- Process steps: arrowed connector between the existing numbered dots ---------- */
.cat-process__track::before{background:none;height:14px;top:1.45rem;border-top:2px dashed #0284C7;opacity:.5}
.tts-band .cat-process__dot{background:#fff}

/* ---------- Hub banding helpers ---------- */
.tts-band--stone .svc-grid{background:#E2E8F0}

/* ---------- Blog fallback thumbnail ---------- */
.blog-card__image--fallback img{display:block;width:100%;height:auto;object-fit:cover}

/* ---------- /umf/ overflow guard at phone widths ---------- */
#tt-webcam-wrapper,#tt-webcam-wrapper p{max-width:100%}
#tt-video,#tt-canvas{max-width:100%;height:auto}

@media(max-width:820px){
  .tts-split{grid-template-columns:1fr}
  .tts-split--reverse .tts-split__media{order:0}
  .tts-split__media{order:-1}
  .tts-card-list{grid-template-columns:1fr}
  .tts-photo-band__media::after{background:rgba(15,23,42,.84)}
  .tts-hero__media::after{background:linear-gradient(180deg,rgba(15,23,42,.88),rgba(15,23,42,.72))}
  .page-hero.tts-hero--photo{min-height:0}
}

/* Stacked layout (up to 820px, same breakpoint as the split stacking): the stacked photo in the photo and text splits is capped at 180px tall */
@media(max-width:820px){
  .tts-split__media img{height:180px;aspect-ratio:auto;object-fit:cover}
}