/* Social counselling lead — Fitelo rebrand. Tokens and chrome come from tokens.css and style.css. */

*,::before,::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:104px;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body:has(.page) .btn{transition:none}}

body:has(.page){
  background:var(--ivory);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body:has(.page) button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
body:has(.page) a{text-decoration:none}
body:has(.page) :is(h1,h2,h3){
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:-.035em;
  line-height:1.39;
  /* text-wrap:balance; */
  /* color:var(--ink); */
  margin:0;
}
body:has(.page) :is(h1,h2) em{
  display:inline-block;
  font-style:italic;
  margin:0 .08em;
  padding:.07em .34em .12em;
  line-height:1.04;
  color:inherit;
  border:1.6px solid var(--orange);
  border-radius:999px;
  vertical-align:baseline;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
body:has(.page) ul,body:has(.page) ol{padding:20px 0px;;margin:0;list-style:none}
body:has(.page) :focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  height:52px;
  padding:0 22px;
  border:0;
  border-radius:999px;
  font-size:15.5px;
  font-weight:600;
  letter-spacing:-.01em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);
}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.7;cursor:progress;transform:none}
.b-orange{background:var(--orange);color:#fff;box-shadow:0 10px 26px -8px rgba(255,71,57,.55)}
.b-orange:hover{background:var(--orangeD);color:#fff}

body:has(.page) .nav-cta,
body:has(.page) .nav.lite .nav-cta{
  background:var(--orange);
  color:#fff;
  box-shadow:0 8px 22px -8px rgba(255,71,57,.6);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
body:has(.page) .nav-cta:hover,
body:has(.page) .nav.lite .nav-cta:hover{background:var(--orangeD);color:#fff}
body:has(.page) .nav-cta svg.i,
body:has(.page) .nav-menu svg.i,
body:has(.page) .mnav-x svg.i,
body:has(.page) .mnav-links svg.i,
body:has(.page) .mnav-call svg.i{
  width:18px;height:18px;flex:none;display:block;
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
body:has(.page) .ft{margin-top:0;font-size:16px}
body:has(.page) .modal,
body:has(.page) #whatsapp_btnss,
body:has(.page) #okapi-wasb-button{display:none!important}

.cue-lab{
  display:inline-flex;
  align-items:center;
  height:32px;
  padding:0 14px;
  margin:0 0 16px;
  border-radius:999px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:500;
  letter-spacing:.005em;
  color:var(--orangeD);
  border:1.2px solid rgba(255,71,57,.4);
  width:max-content;
  max-width:100%;
  background:transparent;
}

.ts-desk{
  padding:calc(108px + env(safe-area-inset-top,0px)) 0 clamp(48px,6vw,80px);
}
.ts-desk__grid{
  display:grid;
  grid-template-columns:minmax(280px,.92fr) minmax(0,1.08fr);
  gap:18px;
  align-items:stretch;
}

.ts-story{
  position:relative;
  display:flex;
  min-height:100%;
  padding:clamp(28px,3vw,44px);
  border-radius:28px;
  overflow:hidden;
  background:
    radial-gradient(90% 55% at 100% 0%,rgba(255,71,57,.22),transparent 58%),
    var(--maroon);
  color:var(--ivory);
}
.ts-ov{
  position:absolute;
  left:-28%;
  bottom:-18%;
  width:min(420px,90%);
  pointer-events:none;
  opacity:.35;
}
.ts-ov svg{display:block;width:100%;height:auto;overflow:visible}
.ts-ov ellipse{fill:none;stroke:rgba(250,248,238,.28);stroke-width:1;vector-effect:non-scaling-stroke}
.ts-story__body{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-start;min-height:100%}
.ts-story .cue-lab{
  color:var(--gold);
  border-color:rgba(233,200,143,.55);
}
.ts-story h1{
  /* max-width:12ch; */
  font-size:clamp(36px,3.6vw,52px);
  color:#fff;
  letter-spacing:-.04em;
}
body:has(.page) .ts-story h1 em{
  color:var(--gold);
  border-color:var(--gold);
}
.ts-lede{
  margin:20px 0;
  max-width:34ch;
  color:rgba(250,248,238,.78);
  font-size:16.5px;
  line-height:1.55;
  text-wrap:pretty;
}
.ts-ratings{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid rgba(250,248,238,.16);
}
.ts-ratings b{
  display:block;
  font-family:var(--serif);
  font-size:clamp(32px,3vw,40px);
  font-weight:500;
  letter-spacing:-.04em;
  line-height:1;
  color:#fff;
}
.ts-ratings span{
  display:block;
  margin-top:6px;
  font-size:13.5px;
  color:rgba(250,248,238,.68);
}

.ts-form{
  padding:clamp(22px,2.6vw,32px);
  border-radius:28px;
  background:var(--white);
  box-shadow:inset 0 0 0 1px var(--line);
}
.ts-form__head{
  margin-bottom:22px;
}
.ts-form h2{
  font-size:clamp(28px,2.6vw,36px);
  color:var(--maroon);
}
.ts-form__head p{
  margin:8px 0 0;
  color:var(--ink2);
  font-size:15.5px;
}
.ts-sec{
  margin:4px 0 10px;
  font-size:12px;
  font-weight:650;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink3);
}
.ts-sec:not(:first-of-type){margin-top:8px}

.ts-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto auto;
  column-gap:14px;
  row-gap:6px;
  margin-bottom:12px;
}
.ts-pair .ts-field{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:span 3;
  align-content:start;
  min-width:0;
}
.ts-field.ts-solo{
  display:grid;
  grid-template-rows:auto auto auto;
  row-gap:6px;
  margin:0 0 12px;
  min-width:0;
}
.ts-field label{
  align-self:end;
  font-size:13.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--ink);
}
.ts-field label span{
  font-weight:500;
  color:var(--ink3);
}
.ts-field input,
.ts-field select,
.ts-phone,
.ts-form .selectize-input{
  width:100%;
  height:56px;
  min-height:56px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:var(--ivory);
  color:var(--ink);
  font:inherit;
  font-size:16px;
  transition:border-color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease);
}
.ts-field input::placeholder{color:var(--ink3)}
.ts-field input{padding:0 14px}
.ts-field select,
.ts-date{
  appearance:none;
  padding:0 40px 0 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B4E48' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:18px;
  text-overflow:ellipsis;
}
.ts-phone{
  display:flex;
  align-items:center;
  height:56px;
  min-height:56px;
  padding-right:4px;
}
.ts-phone .country_code{
  flex:none;
  margin:0;
  padding-left:14px;
  font-weight:650;
  color:var(--maroon);
}
.ts-phone .nncity{
  flex:none;
  width:104px;
  height:40px;
  min-height:40px;
  margin-left:8px;
  padding:0 26px 0 10px;
  border-radius:10px;
  background-color:#fff;
}
.ts-phone input{
  flex:1 1 80px;
  width:auto;
  height:48px;
  min-height:0;
  min-width:0;
  border:0;
  background:transparent;
  box-shadow:none;
  padding-left:8px;
}
.ts-field input:focus,
.ts-field select:focus,
.ts-phone:focus-within,
.ts-form .selectize-input.focus{
  outline:none;
  border-color:var(--orange);
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,71,57,.12);
}
.ts-phone input:focus{box-shadow:none;background:transparent}
.ts-hint{
  margin:0;
  font-size:12.5px;
  line-height:1.4;
  color:var(--ink3);
}
.ts-field .error-class,
.ts-phone .error-class{
  font-size:13px;
  line-height:1.35;
  color:#9B2335;
}
.ts-phone .error-class{display:none}
.ts-phone:has(.error-class){
  height:auto;
  flex-wrap:wrap;
  padding-bottom:8px;
}
.ts-phone:has(.error-class) .error-class{
  display:block;
  flex:1 0 100%;
  padding:0 14px;
}
.ts-note{
  margin:6px 0 0;
  font-size:12.5px;
  line-height:1.55;
  color:var(--ink3);
}
.ts-note a{
  color:var(--maroon);
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:2px;
}
.ts-note a:hover{color:var(--orangeD)}
.ts-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 16px;
  margin-top:16px;
}
.ts-actions .btn{min-width:196px}
.ts-actions .success{
  visibility:hidden;
  opacity:0;
  font-size:14.5px;
  font-weight:600;
  color:var(--pos);
}

.ts-form .selectize-control{min-width:0}
.ts-form .selectize-input{
  display:flex;
  align-items:center;
  padding:0 14px;
  box-shadow:none;
}
.ts-form .selectize-input input{
  height:auto;
  min-height:0;
  border:0;
  background:transparent;
  box-shadow:none;
  font-size:16px;
}
body:has(.page) .selectize-dropdown{
  z-index:40;
  margin-top:6px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:var(--shadowL);
  overflow:hidden;
}
body:has(.page) .selectize-dropdown-content{max-height:240px}
body:has(.page) .selectize-dropdown .option{
  padding:10px 14px;
  font-family:var(--sans);
  font-size:15.5px;
  color:var(--ink);
  cursor:pointer;
}
body:has(.page) .selectize-dropdown .active{background:var(--ivory2);color:var(--maroon)}

body:has(.page) .xdsoft_datetimepicker{
  z-index:50;
  border:0;
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadowL);
  font-family:var(--sans);
  color:var(--ink);
  padding:8px;
}
body:has(.page) .xdsoft_datetimepicker .xdsoft_datepicker,
body:has(.page) .xdsoft_datetimepicker .xdsoft_timepicker{width:auto}
body:has(.page) .xdsoft_datetimepicker .xdsoft_calendar td,
body:has(.page) .xdsoft_datetimepicker .xdsoft_calendar th{background:#fff;border:0;color:var(--ink)}
body:has(.page) .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
body:has(.page) .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current{background:var(--orange);color:#fff;box-shadow:none;border-radius:8px}
body:has(.page) .xdsoft_datetimepicker .xdsoft_calendar td:hover,
body:has(.page) .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover{background:var(--ivory2)!important;color:var(--maroon)!important;border-radius:8px}
body:has(.page) .xdsoft_datetimepicker .xdsoft_label{font-weight:650;color:var(--maroon)}

@media(max-width:980px){
  .ts-desk__grid{grid-template-columns:1fr}
  .ts-story{min-height:0}
  .ts-story__body{justify-content:flex-start}
  .ts-story h1{max-width:16ch}
}
@media(max-width:680px){
  .ts-desk{padding-top:calc(92px + env(safe-area-inset-top,0px))}
  .ts-story h1{font-size:clamp(34px,10vw,46px);max-width:none}
  .ts-pair{grid-template-columns:1fr}
  .ts-pair .ts-field{grid-row:auto;grid-template-rows:auto auto auto;row-gap:6px;margin-bottom:12px}
  .ts-actions .btn{width:100%}
}