
/* THERAPIO · approved-family cinematic presentation system.
   Existing official hero art, logo and brand symbol are reused, never altered. */
.therapio-cinematic.hero{
  position:relative;isolation:isolate;min-height:730px;overflow:hidden;
  background:#101c22;color:#edf9f1;padding:0;
}
.therapio-cinematic.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,17,21,.98) 0%,rgba(8,19,24,.94) 20%,rgba(8,22,26,.81) 41%,rgba(8,22,26,.39) 67%,rgba(7,18,21,.13) 100%),
  linear-gradient(0deg,rgba(9,21,25,.83) 0%,transparent 21%,transparent 84%,rgba(8,17,22,.20) 100%);
}
.therapio-cinematic .hero-grid{
  display:flex;align-items:center;justify-content:flex-start;min-height:730px;
  width:min(1280px,calc(100% - 96px));padding-top:110px;padding-bottom:125px;
  position:static;
}
.therapio-cinematic .hero-copy{width:min(680px,60%);min-width:0;position:relative;z-index:3}
.therapio-cinematic .eyebrow{color:#a4e3ca;font-size:10px;letter-spacing:.17em}
.therapio-cinematic .hero-copy h1{color:#f7fbf8;font-weight:580;font-size:clamp(46px,5.05vw,78px);
  letter-spacing:-.063em;line-height:1.08;max-width:690px;margin:25px 0 27px;overflow-wrap:normal;word-break:normal}
.therapio-cinematic .hero-copy h1 em{background:none!important;color:#a5e3c8!important;-webkit-text-fill-color:#a5e3c8!important;display:inline}
.therapio-cinematic .hero-lead{color:#d3e2df;font-size:14px;line-height:1.9;max-width:520px;margin-bottom:31px;text-wrap:pretty}
.therapio-cinematic .actions{gap:22px;flex-direction:row;align-items:center}
.therapio-cinematic .button{background:linear-gradient(110deg,#b7e9d1,#7dc7aa);color:#112f29;
  border:1px solid #d9fae566;border-radius:12px;box-shadow:0 12px 30px #001f1c35;
  min-height:50px;font-size:12px;font-weight:800;padding:15px 22px}
.therapio-cinematic .link-plain{border-bottom:1px solid #c1e6d176;color:#d1f1df;font-size:12px;font-weight:700}
.therapio-cinematic .chips{margin-top:36px;gap:10px}
.therapio-cinematic .chips span{background:#11292f9c;border:1px solid #bdd9c344;color:#c7e5d9;
  padding:9px 13px;font-size:10px;letter-spacing:.01em;backdrop-filter:blur(5px)}
.therapio-cinematic .hero-art{position:absolute;inset:0;z-index:0;min-width:0;pointer-events:none}
.therapio-cinematic .hero-art::before{display:none!important}
.therapio-cinematic .hero-art img{
  width:100%;height:100%;max-width:none;display:block;object-fit:cover;object-position:64% 49%;
  border:0;border-radius:0;box-shadow:none;filter:brightness(.91) saturate(1.07)
}
.therapio-cinematic .floating-label{position:absolute;z-index:4;right:7%;bottom:55px;
  font-size:10px;letter-spacing:.03em;background:#12272bd9;border:1px solid #d5e8dd37;
  color:#c9f2d8;box-shadow:0 18px 30px #0005;border-radius:12px;backdrop-filter:blur(12px);padding:12px 15px}
.therapio-hero-mark{position:absolute;right:7%;bottom:100px;width:130px;z-index:3;pointer-events:none;
  filter:drop-shadow(0 15px 29px #0007)}
.therapio-hero-mark img{width:100%;height:auto;object-fit:contain}
.therapio-hero-bottom{position:absolute;z-index:3;bottom:27px;left:max(calc((100vw - 1280px)/2),48px);
  right:max(calc((100vw - 1280px)/2),48px);display:flex;justify-content:space-between;
  align-items:center;gap:20px;pointer-events:none;font-size:9px;color:#b9d2c9;letter-spacing:.17em}
.therapio-hero-bottom a{pointer-events:auto;width:35px;height:35px;display:flex;align-items:center;
  justify-content:center;border:1px solid #cfe6d344;color:#f1fff7;border-radius:50%;font-size:19px}
.therapio-hero-bottom a:hover{background:#c1efd31e}
.topbar{background:#101c22f3;border-bottom:1px solid #d5eddf1b;color:#dbeae3;backdrop-filter:blur(18px)}
.topbar .desktop-nav a{color:#c0d6d0}
.topbar .desktop-nav a:hover{color:#a6edcc}
.topbar .nav-cta{background:transparent;color:#e6f9f0;border:1px solid #afcfbd52;
  border-radius:11px;box-shadow:none;padding:12px 18px}
.topbar .nav-cta:hover{background:#1f3d36;color:#fff}
.topbar .global-language-label select,.topbar .global-currency-label select{
  background:#1a3135;color:#e1f6ed;border:1px solid #a2c9b53c;border-radius:10px;padding:9px 11px}
.topbar .global-currency-label{color:#cce0d5}
.topbar .menu-toggle{background:#193339;border-color:#7fa9996c}
.topbar .menu-toggle span{background:#d7eee4}
@media(max-width:1100px){
  .therapio-cinematic .hero-copy{width:min(640px,65%)}
  .therapio-cinematic .hero-copy h1{font-size:clamp(42px,5.4vw,68px)}
  .therapio-hero-mark{width:110px;right:5%}
}
@media(max-width:850px){
  .topbar .mobile-nav{background:#12242b;box-shadow:0 20px 36px #0016}
  .topbar .mobile-nav a{color:#e1f1e8;border-color:#b5d9c52b}
  .therapio-cinematic.hero{min-height:690px}
  .therapio-cinematic .hero-grid{width:calc(100% - 50px);min-height:690px;
    padding-top:92px;padding-bottom:115px}
  .therapio-cinematic .hero-copy{width:min(660px,78%)}
  .therapio-cinematic .hero-copy h1{font-size:clamp(45px,6.6vw,66px)}
  .therapio-cinematic .hero-art img{object-position:61% center}
  .therapio-cinematic.hero::before{background:linear-gradient(90deg,#07171be8 0%,#09202ad9 30%,#0717209a 66%,#0a1b2040 100%),
    linear-gradient(0deg,#081a1edb,transparent 34%)}
  .therapio-hero-bottom{left:25px;right:25px}
  .therapio-hero-mark{width:85px;bottom:88px;right:6%}
  .therapio-cinematic .floating-label{right:7%;bottom:45px}
}
@media(max-width:560px){
  .therapio-cinematic.hero{min-height:680px}
  .therapio-cinematic .hero-grid{width:calc(100% - 40px);min-height:680px;
    padding-top:83px;padding-bottom:104px}
  .therapio-cinematic .hero-copy{width:100%}
  .therapio-cinematic .hero-copy h1{font-size:clamp(39px,9vw,51px);line-height:1.1;margin:19px 0 19px;
    max-width:100%;overflow-wrap:anywhere}
  .therapio-cinematic .hero-lead{font-size:12px;line-height:1.8;max-width:385px}
  .therapio-cinematic .actions{align-items:flex-start;flex-direction:column;gap:18px}
  .therapio-cinematic .actions .button{width:auto;max-width:100%;padding:15px 18px}
  .therapio-cinematic .chips{gap:7px;margin-top:26px}
  .therapio-cinematic .chips span{font-size:9px;padding:7px 9px}
  .therapio-cinematic.hero::before{background:
    linear-gradient(90deg,rgba(6,19,23,.94),rgba(7,22,25,.83) 57%,rgba(8,23,25,.47)),
    linear-gradient(0deg,#071519dc,transparent 50%)}
  .therapio-cinematic .hero-art img{object-position:59% 50%;filter:brightness(.73) saturate(1.08)}
  .therapio-hero-mark{width:64px;bottom:48px;right:12%}
  .therapio-cinematic .floating-label{display:none}
  .therapio-hero-bottom{left:20px;right:20px;bottom:17px;font-size:8px}
  .topbar .global-language-label select{padding:7px 5px}
}
@media(prefers-reduced-motion:reduce){.therapio-cinematic .hero-art img{transition:none}}


/* Verified visual fix: photograph must be painted as hero background.
   The original absolute img fell behind the hero stacking layer,
   making the approved image invisible in the rendered viewport. */
.therapio-cinematic.hero{
  background-color:#101c22;
  background-image:url("/family-assets/hero.webp");
  background-size:cover;
  background-position:64% 49%;
  background-repeat:no-repeat;
}
.therapio-cinematic .hero-art{display:none!important}
@media(max-width:850px){.therapio-cinematic.hero{background-position:61% center}}
@media(max-width:560px){.therapio-cinematic.hero{background-position:59% 50%}}
