/* ==========================================================================
   Toyyib Klean — theme.css
   Palette sampled from the client logo: rose #BB417C, plum #7A3A8E,
   indigo #1A1240, teal mark #17A79B.
   ========================================================================== */

:root{
  --ink:#1A1240;
  --ink-70:#4A3F72;
  --ink-45:#7A719B;
  --plum:#7A3A8E;
  --rose:#BB417C;
  --teal:#17A79B;
  --teal-deep:#0C7168;
  --teal-wash:#E6F5F3;
  --paper:#FBF9FC;
  --panel:#F3EEF7;
  --line:#E5DDEE;
  --white:#fff;
  --seal:linear-gradient(150deg,#BB417C 0%,#8C3A93 48%,#2E2260 100%);

  --wrap:1140px;
  --r-sm:10px;
  --r-md:18px;
  --r-lg:28px;
  --shadow-lift:0 18px 40px -22px rgba(26,18,64,.45);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--plum)}

h1,h2,h3,h4{
  font-weight:800;
  letter-spacing:-.022em;
  line-height:1.08;
  margin:0 0 .5em;
}
h1{font-size:clamp(2.1rem,6.2vw,3.5rem)}
h2{font-size:clamp(1.6rem,4.4vw,2.4rem)}
h3{font-size:1.12rem;letter-spacing:-.01em}
p{margin:0 0 1em;max-width:64ch}

.wrap{width:min(var(--wrap),100% - 2.4rem);margin-inline:auto}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:700;
  padding:.85rem 1.5rem;
  border-radius:999px;border:0;cursor:pointer;
  text-decoration:none;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.btn-go{background:var(--teal);color:#fff}
.btn-go:hover{background:var(--teal-deep)}
.btn-go:active{transform:translateY(1px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--plum);color:var(--plum)}
.btn-block{width:100%}

:where(a,button,input,select,textarea):focus-visible{
  outline:3px solid var(--rose);outline-offset:2px;border-radius:6px;
}

/* --------------------------------------------------------- header ------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(251,249,252,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-bar{display:flex;align-items:center;gap:1.4rem;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink)}
.brand img{width:44px;height:44px;border-radius:50%}
.brand b{display:block;font-weight:800;font-size:1.02rem;letter-spacing:-.02em;line-height:1.1}
.brand span{display:block;font-size:.78rem;color:var(--ink-45);font-weight:500}
.site-nav{margin-left:auto;display:flex;gap:1.4rem}
.site-nav a{color:var(--ink-70);text-decoration:none;font-weight:600;font-size:.95rem}
.site-nav a:hover{color:var(--plum)}
.header-cta{display:flex;align-items:center;gap:.7rem}
.header-phone{font-weight:700;color:var(--ink);text-decoration:none;font-size:.95rem}

/* ---------------------------------------------------------- hero -------- */
.hero{padding:3.2rem 0 3.6rem;position:relative;overflow:hidden}
.hero::after{
  content:"";position:absolute;inset:auto -8% -46% 62%;
  aspect-ratio:1;width:46%;border-radius:50%;
  background:var(--seal);opacity:.07;pointer-events:none;
}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:3rem;align-items:start}
.hero-copy p.lede{font-size:1.08rem;color:var(--ink-70);max-width:44ch}
.hero-halal{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--teal-wash);color:var(--teal-deep);
  font-weight:700;font-size:.85rem;
  padding:.4rem .85rem .4rem .55rem;border-radius:999px;margin-bottom:1.2rem;
}
.hero-halal i{
  width:1.4rem;height:1.4rem;border-radius:50%;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:.8rem;font-weight:800;
}
.hero-proof{display:flex;gap:2.2rem;margin-top:2rem;flex-wrap:wrap}
.hero-proof div{max-width:15ch}
.hero-proof b{display:block;font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.hero-proof span{font-size:.86rem;color:var(--ink-45);line-height:1.35;display:block}

/* ------------------------------------------------------ booking card ---- */
.booker{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);
  padding:1.5rem;
  position:relative;
}
.booker-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.booker-head h2{font-size:1.22rem;margin:0}
.booker-head em{font-style:normal;font-size:.82rem;color:var(--ink-45)}
.field{margin-bottom:.95rem}
.field label{display:block;font-weight:700;font-size:.85rem;margin-bottom:.35rem}
.field select,.field input{
  width:100%;font:inherit;font-size:.95rem;
  padding:.7rem .8rem;border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);color:var(--ink);
}
.field select:hover,.field input:hover{border-color:var(--ink-45)}

.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.15rem}
.slot{
  border:1.5px solid var(--line);background:var(--white);
  border-radius:var(--r-sm);padding:.55rem .3rem;
  font:inherit;font-size:.85rem;font-weight:700;color:var(--ink);
  cursor:pointer;text-align:center;line-height:1.25;
}
.slot small{display:block;font-weight:600;font-size:.7rem;color:var(--teal-deep)}
.slot[aria-pressed="true"]{border-color:var(--teal);background:var(--teal-wash);color:var(--teal-deep)}
.slot[disabled]{opacity:.42;cursor:not-allowed;text-decoration:line-through}
.slot[disabled] small{color:var(--ink-45);text-decoration:none}

.quote{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border-top:1px dashed var(--line);margin-top:1.1rem;padding-top:.9rem;
}
.quote span{font-size:.86rem;color:var(--ink-45);max-width:22ch;line-height:1.35}
.quote b{font-size:1.45rem;font-weight:800;letter-spacing:-.03em}
.booker .btn{margin-top:.9rem}
.booker-note{font-size:.78rem;color:var(--ink-45);margin:.7rem 0 0;text-align:center}
.hold-timer{
  display:none;margin-top:.7rem;font-size:.8rem;font-weight:700;
  color:var(--teal-deep);background:var(--teal-wash);
  border-radius:var(--r-sm);padding:.5rem .7rem;text-align:center;
}
.hold-timer.on{display:block}

/* ------------------------------------------------------- services ------- */
.section{padding:3.6rem 0}
.section-head{max-width:52ch;margin-bottom:2rem}
.section-head p{color:var(--ink-70);margin-bottom:0}

.svc-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.svc{
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.3rem;
  display:flex;flex-direction:column;
}
.svc h3{margin-bottom:.35rem}
.svc p{font-size:.92rem;color:var(--ink-70);margin-bottom:1rem;flex:1}
.svc .price{font-weight:800;font-size:1.05rem}
.svc .price em{font-style:normal;font-weight:600;font-size:.8rem;color:var(--ink-45);display:block}
.svc-mark{width:34px;height:4px;border-radius:2px;background:var(--rose);margin-bottom:1rem}
.svc:nth-child(2) .svc-mark{background:var(--plum)}
.svc:nth-child(3) .svc-mark{background:var(--teal)}
.svc:nth-child(4) .svc-mark{background:#D96A3C}
.svc:nth-child(5) .svc-mark{background:var(--ink)}

/* ---------------------------------------------------------- steps ------- */
.steps{counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
.step{position:relative;padding-top:2.4rem}
.step::before{
  counter-increment:s;content:counter(s);
  position:absolute;top:0;left:0;
  width:2rem;height:2rem;border-radius:50%;
  background:var(--ink);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.9rem;
}
.step h3{font-size:1rem;margin-bottom:.25rem}
.step p{font-size:.9rem;color:var(--ink-70);margin:0}

/* --------------------------------------------------------- b2b band ----- */
.b2b{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:2.6rem;position:relative;overflow:hidden}
.b2b::before{
  content:"";position:absolute;right:-14%;top:-40%;width:52%;aspect-ratio:1;
  border-radius:50%;background:var(--seal);opacity:.5;
}
.b2b-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:2.6rem;align-items:center}
.b2b h2{color:#fff}
.b2b p{color:#CFC6E4}
.b2b ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.b2b li{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:#EDE8F6}
.b2b li i{
  flex:0 0 auto;width:1.35rem;height:1.35rem;border-radius:50%;
  background:var(--teal);color:#062B28;display:grid;place-items:center;
  font-style:normal;font-weight:800;font-size:.75rem;margin-top:.14rem;
}
.b2b .btn-ghost{border-color:rgba(255,255,255,.35);color:#fff}
.b2b .btn-ghost:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.08)}

/* ------------------------------------------------------- before/after --- */
.ba{
  position:relative;border-radius:var(--r-md);overflow:hidden;
  aspect-ratio:16/9;background:#3B3355;
  display:grid;place-items:center;color:#fff;font-weight:700;
}
.ba-half{position:absolute;inset:0;display:grid;place-items:center;font-size:.95rem}
.ba-dirty{background:repeating-linear-gradient(48deg,#5B4E4A,#5B4E4A 14px,#6A5C55 14px,#6A5C55 28px)}
.ba-clean{background:repeating-linear-gradient(48deg,#7A3A8E,#7A3A8E 14px,#8C46A0 14px,#8C46A0 28px);clip-path:inset(0 0 0 50%)}
.ba-tag{
  position:absolute;bottom:.9rem;font-size:.75rem;font-weight:700;
  background:rgba(0,0,0,.45);padding:.3rem .65rem;border-radius:999px;
}
.ba-tag.l{left:.9rem}
.ba-tag.r{right:.9rem}

/* ------------------------------------------------------------ areas ----- */
.areas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.areas span{
  border:1.5px solid var(--line);border-radius:999px;
  padding:.35rem .8rem;font-size:.85rem;font-weight:600;background:var(--white);
}

/* -------------------------------------------------------------- faq ----- */
.faq details{
  border-bottom:1px solid var(--line);padding:1rem 0;
}
.faq summary{
  cursor:pointer;font-weight:700;font-size:1rem;list-style:none;
  display:flex;justify-content:space-between;gap:1rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--plum);font-weight:800}
.faq details[open] summary::after{content:"–"}
.faq p{margin:.7rem 0 0;color:var(--ink-70);font-size:.95rem}

/* ----------------------------------------------------------- footer ----- */
.site-footer{background:var(--panel);border-top:1px solid var(--line);padding:2.8rem 0 1.6rem;margin-top:3.2rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.site-footer h4{font-size:.95rem;margin-bottom:.6rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.site-footer a{color:var(--ink-70);text-decoration:none;font-size:.92rem}
.site-footer a:hover{color:var(--plum)}
.legal{border-top:1px solid var(--line);margin-top:2rem;padding-top:1rem;font-size:.8rem;color:var(--ink-45);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ------------------------------------------------------- sticky bar ----- */
.mobile-book{display:none}

/* ------------------------------------------------------ responsive ------ */
@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .hero::after{display:none}
  .svc-list{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .b2b-inner{grid-template-columns:1fr;gap:1.6rem}
  .site-nav{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}

@media (max-width:640px){
  body{font-size:16px}
  .hero{padding:2rem 0 2.4rem}
  .section{padding:2.4rem 0}
  .svc-list{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:1.1rem}
  .b2b{padding:1.6rem;border-radius:var(--r-md)}
  .booker{padding:1.15rem}
  .header-cta .btn{display:none}
  .footer-grid{grid-template-columns:1fr}
  .hero-proof{gap:1.4rem}

  .mobile-book{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    gap:.6rem;padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);border-top:1px solid var(--line);
    backdrop-filter:blur(8px);
  }
  .mobile-book .btn{flex:1}
  body{padding-bottom:4.6rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}