/* Design 1 hero and header, matched to the owner's mockup: transparent menu over a
   full-bleed golden-hour photo, Playfair Display headline, white segmented search,
   glowing coloured trust icons. Loaded last. */
[data-theme="global"]{--display:"Playfair Display",Georgia,serif;--dw:700;--dls:-.01em}

/* Header: dark everywhere in the Global theme; transparent over the home hero. */
[data-theme="global"] .top{background:#0B1026;border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:none}
[data-theme="global"] .logo{color:#fff}
[data-theme="global"] .logo .tag-line{color:#C9CCE3}
[data-theme="global"] .nav a{color:#E4E6F5}
[data-theme="global"] .nav a:hover,[data-theme="global"] .nav a.on{color:#fff}
[data-theme="global"] .nav .icon-btn{color:#C7B6FF;border-color:rgba(255,255,255,.25)}
[data-theme="global"] .nav .icon-btn:hover{color:#fff;border-color:#fff}
[data-theme="global"] .nav .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
[data-theme="global"] .nav .btn.ghost:hover{border-color:#fff}
[data-theme="global"] .nav .btn:not(.ghost){background:linear-gradient(90deg,#6C4CF1,#8B5CF6);color:#fff}
[data-theme="global"] .menu-btn{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.lname{font-family:"Inter",system-ui,sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em}
.logo .lt{line-height:1.05}

body.hero-home .top{position:absolute;left:0;right:0;top:0;background:transparent!important;border-bottom:0!important}
body.hero-home .top .logo{color:#fff}
body.hero-home .top .logo .tag-line{color:#D5D8EE}
body.hero-home .top .nav a{color:#F1F2FA}
body.hero-home .top .nav .icon-btn{color:#C7B6FF;border-color:rgba(255,255,255,.3)}
body.hero-home .top .nav .btn.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
body.hero-home .top .menu-btn{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
@media(max-width:1180px){
  [data-theme="global"] .nav,body.hero-home .top .nav{background:#0B1026;border-bottom:1px solid rgba(255,255,255,.1)}
  [data-theme="global"] .nav a,body.hero-home .top .nav a{border-bottom-color:rgba(255,255,255,.1)}
}

/* Hero */
.g-hero{min-height:760px;background:#0A0D24}
.g-hero .bgimg{left:auto!important;right:0;width:68%!important;height:100%;object-fit:cover;object-position:42% 30%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);mask-image:linear-gradient(90deg,transparent 0,#000 30%)}
.g-hero::before{background:radial-gradient(120% 90% at 0% 40%,rgba(10,13,36,.98) 0%,rgba(10,13,36,.92) 35%,rgba(10,13,36,.35) 62%,rgba(10,13,36,0) 80%)!important}
.g-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;background:linear-gradient(0deg,rgba(10,13,36,.85),transparent)}
.g-hero .wrap{padding-top:128px!important;padding-bottom:48px!important}
.g-hero h1{font-family:"Playfair Display",Georgia,serif!important;font-weight:700;font-size:clamp(46px,6.6vw,88px)!important;line-height:1.02!important;letter-spacing:-.015em;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.g-hero h1 .grad{background:linear-gradient(90deg,#A78BFA 0%,#C4A1FF 35%,#F0ABFC 75%,#F9A8D4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-hero .lead{font-size:clamp(17px,1.5vw,21px)!important;color:#F1F2FA!important;line-height:1.45;margin:18px 0 24px!important;max-width:520px}

.g-search{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) auto!important;gap:8px!important;max-width:820px!important;padding:8px!important;border-radius:16px!important;background:#fff!important;box-shadow:0 24px 60px rgba(0,0,0,.4)!important}
.g-search label{background:#fff!important;border:1px solid #E6E8F2;border-radius:12px!important;min-height:52px!important;color:#8A8DA6!important}
.g-search label:first-child{border-color:transparent}
.g-search input,.g-search select{font-size:14px!important;font-weight:500;color:#14142B!important}
.g-search select{padding-right:22px!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B6B85' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 2px center/12px no-repeat!important}
.g-search .btn{background:linear-gradient(90deg,#6C4CF1,#8B5CF6)!important;border-radius:12px!important;min-height:52px!important;padding:0 24px!important;font-size:15px!important}
@media(max-width:860px){.g-search{grid-template-columns:1fr 1fr!important}}
@media(max-width:480px){.g-search{grid-template-columns:1fr!important}}

.popular{margin-top:16px!important;gap:7px!important}
.popular b{font-size:13px}
.popular a{font-size:12px!important;padding:5px 13px!important;border-color:rgba(255,255,255,.32)!important;background:rgba(10,13,36,.35)!important;backdrop-filter:blur(4px)}

.feats{gap:14px!important;max-width:700px!important;margin-top:34px!important}
.feats div{font-size:13px!important;font-weight:500}
.feats i{width:54px!important;height:54px!important;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.14),rgba(255,255,255,.03))!important;border:1px solid rgba(255,255,255,.14)!important}
.feats i svg{stroke-width:2.2}
.feats div:nth-child(1) i{color:#60A5FA;box-shadow:0 0 22px rgba(96,165,250,.45)}
.feats div:nth-child(2) i{color:#A78BFA;box-shadow:0 0 22px rgba(167,139,250,.45)}
.feats div:nth-child(3) i{color:#C084FC;box-shadow:0 0 22px rgba(192,132,252,.45)}
.feats div:nth-child(4) i{color:#FB923C;box-shadow:0 0 22px rgba(251,146,60,.45)}
.feats div:nth-child(5) i{color:#38BDF8;box-shadow:0 0 22px rgba(56,189,248,.45)}
.feats div:nth-child(6) i{color:#4ADE80;box-shadow:0 0 22px rgba(74,222,128,.45)}

.trusted{margin-top:30px!important}
.script{top:30%!important;right:4%!important;font-size:clamp(28px,2.6vw,40px)!important;font-weight:700}
.qcard{bottom:56px!important;right:4%!important;background:rgba(14,16,42,.62)!important;border-color:rgba(255,255,255,.22)!important}

@media(max-width:1000px){
  .g-hero{min-height:0}
  .g-hero .bgimg{width:100%!important;-webkit-mask-image:none;mask-image:none;object-position:60% 25%!important}
  .g-hero::before{background:linear-gradient(180deg,rgba(10,13,36,.75) 0%,rgba(10,13,36,.88) 45%,rgba(10,13,36,.96) 100%)!important}
  .g-hero .wrap{padding-top:110px!important}
}

/* Section headings in the Playfair face, like the mockup. */
[data-theme="global"] .carousel-head h2,[data-theme="global"] .how h2{font-family:"Playfair Display",Georgia,serif;font-weight:700}

/* Mega footer with the dotted world map behind it. */
footer{padding:0!important;border-top:0!important;margin-top:40px!important;color:#C9CCE3!important;font-size:14px!important}
.mf{position:relative;overflow:hidden;background:#0A0D24}
.mf::before{content:"";position:absolute;inset:0;background:url("img/world-dots.svg") center 62%/min(1400px,140%) auto no-repeat;opacity:.16;pointer-events:none}
.mf::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 60%,rgba(108,76,241,.18),transparent 70%);pointer-events:none}
.mf .wrap{position:relative;z-index:1;padding-top:60px;padding-bottom:28px}
.mf a{color:#E4E6F5;text-decoration:none}
.mf a:hover{color:#fff;text-decoration:underline;opacity:1}
.mf h4{margin:0 0 14px;color:#fff;font:700 14px/1.2 var(--body);letter-spacing:.02em}
.mf h5{margin:0 0 10px;color:#C7B6FF;font:700 12px/1.2 var(--body);letter-spacing:.1em;text-transform:uppercase}
.mf ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.mf-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:32px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.1)}
.mf-brand .logo{color:#fff;margin-bottom:14px}
.mf-brand .logo .tag-line{color:#C9CCE3}
.mf-brand p{color:#AEB2CF;max-width:340px;line-height:1.6}
.mf-langs{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.mf-langs span{padding:4px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);font-size:12px;color:#E4E6F5}
.mf-help p{color:#AEB2CF;margin-bottom:8px;line-height:1.5}
.mf-line{display:flex;justify-content:space-between;gap:10px;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.06)}
.mf-line b{color:#fff}
.mf-small{font-size:12px}
.mf-world{padding:36px 0 30px;border-bottom:1px solid rgba(255,255,255,.1)}
.mf-world-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.mf-world-head h4{font-family:"Playfair Display",Georgia,serif;font-size:26px;font-weight:700;margin:0}
.mf-legend{display:flex;align-items:center;gap:6px;font-size:12px;color:#AEB2CF}
.mf-legend i,.mf-region a i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ADE80;box-shadow:0 0 8px rgba(74,222,128,.7)}
.mf-regions{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px}
.mf-region ul{gap:7px}
.mf-region a{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#C9CCE3}
.mf-region a.live{color:#fff;font-weight:600}
.mf-bottom{padding-top:22px;font-size:12px;color:#8F94B5;display:flex;flex-direction:column;gap:6px}
.mf-bottom p{max-width:none!important;margin:0!important}
@media(max-width:1100px){.mf-top{grid-template-columns:1fr 1fr 1fr}.mf-brand{grid-column:1/-1}.mf-regions{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.mf-top{grid-template-columns:1fr 1fr}.mf-help{grid-column:1/-1}.mf-regions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Owner's logo: white-text version on dark backgrounds, original on light ones. */
.logo-img{display:block;height:46px;width:auto}
.logo .on-dark{display:none}
[data-theme="global"] .logo .on-dark,[data-theme="saffron"] .logo .on-dark,[data-theme="jade"] .logo .on-dark,[data-theme="indigo"] .logo .on-dark,body.hero-home .top .logo .on-dark{display:block}
[data-theme="global"] .logo .on-light,[data-theme="saffron"] .logo .on-light,[data-theme="jade"] .logo .on-light,[data-theme="indigo"] .logo .on-light,body.hero-home .top .logo .on-light{display:none}
.mf-tag{margin:10px 0 0!important;color:#E4E6F5!important;font-weight:600}
@media(max-width:600px){.logo-img{height:38px}}

/* Hero: random therapists on coloured tiles (Healpoint style) instead of one photo. */
.g-hero{background:radial-gradient(55% 60% at 78% 42%,rgba(108,76,241,.38),transparent 70%),radial-gradient(35% 40% at 95% 95%,rgba(240,122,192,.22),transparent 70%),radial-gradient(40% 50% at 5% 10%,rgba(56,189,248,.10),transparent 70%),#0A0D24!important}
.g-hero::before{display:none!important}
.h-collage{position:absolute;z-index:2;top:112px;right:max(20px,calc((100vw - 1200px)/2 + 20px));width:540px;height:600px}
.ht{position:absolute;display:block;border-radius:24px;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.45);transition:transform .25s ease}
.ht:hover{transform:translateY(-4px) rotate(0deg)!important;opacity:1}
.ht img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.ht-cap{position:absolute;left:10px;right:10px;bottom:10px;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.94);color:#14142B;font:500 11px/1.3 var(--body)}
.ht-cap b{display:block;font-size:13px}
.t-main{left:80px;top:180px;width:260px;height:300px;background:#C9B6FF;transform:rotate(-2deg)}
.t-top{left:190px;top:8px;width:150px;height:150px;background:#FFD66B;transform:rotate(3deg)}
.t-right{left:378px;top:96px;width:150px;height:176px;background:#B9E4C9;transform:rotate(2deg)}
.t-low{left:372px;top:300px;width:160px;height:190px;background:#FFB59A;transform:rotate(-3deg)}
.t-top .ht-cap,.t-right .ht-cap{font-size:10px;padding:5px 8px}
.t-top .ht-cap b,.t-right .ht-cap b{font-size:12px}
.hc-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:14px;background:#fff;color:#14142B;font:600 12px/1 var(--body);box-shadow:0 12px 30px rgba(0,0,0,.35);white-space:nowrap}
.hc-chip i{width:8px;height:8px;border-radius:50%;background:#22C55E}
.hc-chip svg{color:#15803D}
.c-next{left:0;top:150px}
.c-ver{left:396px;top:282px;transform:translateY(-50%)}
.hc-tri{position:absolute;left:118px;top:96px;width:0;height:0;border-left:26px solid #FFD66B;border-top:16px solid transparent;border-bottom:16px solid transparent;transform:rotate(-18deg);filter:drop-shadow(0 6px 12px rgba(0,0,0,.3))}
.hs-spark{position:absolute;color:#F0ABFC}
.sp1{left:360px;top:18px}.sp2{left:50px;top:420px;color:#7DD3FC}.sp3{left:500px;top:520px;color:#FFD66B}
.hc-squig{position:absolute;left:330px;top:500px;color:#C7B6FF}
.qcard{right:calc(max(20px,(100vw - 1200px)/2 + 20px) + 250px)!important;bottom:44px!important;width:290px!important}
@media(max-width:1180px){.h-collage{transform:scale(.82);transform-origin:top right}}
@media(max-width:1000px){
  .g-hero .wrap{padding-bottom:20px!important}
  .h-collage{position:relative;top:auto;right:auto;transform:none;width:auto;height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 20px 32px;max-width:560px}
  .ht{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;aspect-ratio:4/5;transform:none!important}
  .hc-chip,.hc-tri,.hs-spark,.hc-squig{display:none}
}

/* Keep the collage clear of the search and the trust row. */
@media(min-width:1001px){
  .g-search{max-width:640px!important;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto!important}
  .g-search .btn{padding:0 18px!important}
  .feats{max-width:600px!important;gap:8px!important}
  .feats div{font-size:12px!important}
  .popular{max-width:640px}
  .g-hero .lead{max-width:600px!important}
  .qcard{display:none!important}
  .h-collage{transform:scale(.86);transform-origin:top right}
}
@media(min-width:1001px) and (max-width:1300px){.h-collage{transform:scale(.7)}.g-hero h1{font-size:clamp(44px,5.4vw,72px)!important}}

/* Big photo back as the hero background, random therapists as a card row over its lower right. */
.g-hero{background:#0A0D24!important}
.g-hero::before{display:block!important;background:linear-gradient(90deg,rgba(10,13,36,.97) 0%,rgba(10,13,36,.9) 36%,rgba(10,13,36,.4) 60%,rgba(10,13,36,.08) 100%)!important}
.h-collage{top:auto!important;bottom:44px;width:auto!important;height:auto!important;transform:none!important;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
.hc-head{display:flex;gap:8px}
.hc-head .hc-chip{position:static}
.hc-row{display:flex;gap:12px}
.hc-row .ht{position:relative!important;left:auto!important;top:auto!important;width:128px!important;height:160px!important;border:3px solid rgba(255,255,255,.9)}
.t-a{background:#C9B6FF;transform:rotate(-3deg)}.t-b{background:#FFD66B;transform:rotate(2deg) translateY(-10px)}.t-c{background:#B9E4C9;transform:rotate(-2deg)}.t-d{background:#FFB59A;transform:rotate(3deg) translateY(-8px)}
.hc-row .ht-cap{font-size:10px;padding:5px 7px;left:6px;right:6px;bottom:6px}
.hc-row .ht-cap b{font-size:12px}
.sp1{left:-18px!important;top:6px!important}.sp3{left:auto!important;right:-14px;top:auto!important;bottom:-12px}
@media(min-width:1001px) and (max-width:1300px){.hc-row .ht{width:104px!important;height:132px!important}}
@media(max-width:1000px){
  .h-collage{position:relative!important;bottom:auto;align-items:stretch;margin:0 20px 28px}
  .hc-head{flex-wrap:wrap}
  .hc-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .hc-row .ht{width:auto!important;height:auto!important;aspect-ratio:4/5;transform:none!important}
  .hs-spark{display:none}
}
@media(max-width:520px){.hc-row{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Fixes after the Hostinger review. */
body.hero-home .top{background:linear-gradient(180deg,rgba(10,13,36,.88) 0%,rgba(10,13,36,.55) 60%,rgba(10,13,36,0) 100%)!important}
@media(min-width:1001px){.g-search{max-width:780px!important}.popular{max-width:780px}}
@media(max-width:1000px){
  .g-hero{display:flex;flex-direction:column}
  .g-hero .wrap{order:1}
  .h-collage{order:2;right:auto!important;left:auto!important;max-width:none}
  .hc-row{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .hc-row .ht-cap{font-size:9px;padding:4px 5px;left:4px;right:4px;bottom:4px}
  .hc-row .ht-cap b{font-size:11px}
}
@media(max-width:520px){.hc-head .hc-chip{font-size:11px;padding:7px 10px}}

/* Rotating hero backgrounds: soft crossfade between photos. */
.g-hero .bgimg.rot{opacity:0;transition:opacity 1.8s ease}
.g-hero .bgimg.rot.on{opacity:1}
@media(prefers-reduced-motion:reduce){.g-hero .bgimg.rot{transition:none}}

/* Full-bleed hero photo (owner: "that type hero background image is a must"). */
.g-hero .bgimg{left:0!important;right:0!important;width:100%!important;height:100%!important;object-fit:cover;-webkit-mask-image:none!important;mask-image:none!important}
.g-hero::before{background:linear-gradient(90deg,rgba(10,13,36,.95) 0%,rgba(10,13,36,.82) 30%,rgba(10,13,36,.35) 58%,rgba(10,13,36,.12) 100%)!important}
.g-hero::after{background:linear-gradient(0deg,rgba(10,13,36,.75),transparent)!important}
.script{display:block!important;top:24%!important;right:4%!important}
@media(max-width:1100px){.script{display:none!important}}

/* Mockup match: the woman is massive, bright and on the right; text sits on the dark left. */
@media(min-width:1001px){
  .g-hero{min-height:820px}
  .g-hero .bgimg{left:auto!important;right:0!important;width:74%!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%)!important;mask-image:linear-gradient(90deg,transparent 0,#000 26%)!important}
  .g-hero::before{background:linear-gradient(90deg,rgba(10,13,36,.98) 0%,rgba(10,13,36,.92) 28%,rgba(10,13,36,.45) 46%,rgba(10,13,36,.06) 66%,rgba(10,13,36,0) 100%)!important}
  .g-hero::after{height:120px!important;background:linear-gradient(0deg,rgba(10,13,36,.7),transparent)!important}
}
