/* Hikma Healing — one stylesheet, no dependencies. */
:root{
  --ink:#1d2b26; --ink-soft:#4a5c55; --line:#dfe5e1;
  --bg:#fbfaf7; --panel:#f2f0ea; --deep:#0f3b32; --accent:#2f6f5e; --sand:#c9a14a;
  --max:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:17px/1.65 "Iowan Old Style",Palatino,"Palatino Linotype",Georgia,serif}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:600;letter-spacing:-.01em}
h1{font-size:clamp(2rem,4.5vw,3rem)}
h2{font-size:clamp(1.4rem,2.6vw,2rem)}
h3{font-size:1.1rem}
p{margin:0 0 1em}
a{color:var(--accent)}
a:hover{color:var(--deep)}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}
.wrap{max-width:var(--max);margin:0 auto;padding-left:1.25rem;padding-right:1.25rem}
.narrow{max-width:720px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;background:#fff;padding:.5rem 1rem;z-index:10}

/* header */
header.site{background:var(--deep);color:#fff;position:sticky;top:0;z-index:5}
header.site a{color:#fff;text-decoration:none}
.bar{display:flex;align-items:center;gap:1rem;padding-top:.85rem;padding-bottom:.85rem;
  flex-wrap:wrap}
.brand{display:flex;flex-direction:column;margin-right:auto}
.mark{font-size:1.15rem;font-weight:600;letter-spacing:.01em}
.tag{font-size:.72rem;opacity:.72;letter-spacing:.04em;text-transform:uppercase;
  font-family:system-ui,sans-serif}
header nav{display:flex;gap:1.1rem;flex-wrap:wrap;font-family:system-ui,sans-serif;
  font-size:.88rem}
header nav a{opacity:.85;padding:.2rem 0;border-bottom:2px solid transparent}
header nav a:hover,header nav a.on{opacity:1;border-bottom-color:var(--sand)}
.navtoggle,.burger{display:none}

/* hero */
.hero{background:linear-gradient(180deg,#0f3b32 0%,#14493e 100%);color:#fff;
  padding:clamp(2.5rem,4vw,3.25rem) 0 clamp(2.25rem,3.5vw,2.75rem)}
.hero.small{padding:clamp(2rem,3vw,2.5rem) 0 clamp(1.75rem,2.5vw,2rem)}
.hero h1{margin-bottom:.35em}
.hero .lede{font-size:1.2rem;max-width:44ch;color:#e6efeb}
.eyebrow{font-family:system-ui,sans-serif;font-size:.75rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--sand);margin-bottom:.7rem}
.stars{font-family:system-ui,sans-serif;font-size:.9rem;color:#e6efeb;margin:.75rem 0}
.stars span{color:var(--sand);letter-spacing:.08em}
.hero a{color:#fff}
.band .stars,section.wrap .stars{color:var(--ink-soft)}

/* buttons */
.actions{display:flex;gap:.85rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem}
.btn{display:inline-block;background:var(--sand);color:#20180a;text-decoration:none;
  padding:.72rem 1.4rem;border-radius:2px;font-family:system-ui,sans-serif;font-weight:600;
  font-size:.92rem;border:1px solid var(--sand)}
.btn:hover{filter:brightness(1.07);color:#20180a}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}
.btn.small{padding:.45rem .9rem;font-size:.84rem}
a.quiet{font-family:system-ui,sans-serif;font-size:.9rem;text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.35)}
section.wrap a.quiet,.band a.quiet{border-bottom-color:var(--line)}

/* sections */
section{padding:3.25rem 0}
/* The band under the hero gets a slightly tighter top so the fold is not pushed
   further down than the separation actually needs. */
.hero + section{padding-top:2.5rem}
.band{background:var(--panel)}
.band.closing{text-align:center}
.band.closing .actions{justify-content:center}
.grid3,.grid4,.lanes,.two,.cards,.postlist{display:grid;gap:1.6rem}
.grid3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.lanes,.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:1.5rem}
.lane{background:#fff;border:1px solid var(--line);padding:1.75rem}
.card{background:#fff;border:1px solid var(--line);padding:1.75rem;text-align:center}
.price{font-size:2.4rem;font-weight:600;color:var(--deep);margin:.3rem 0 .6rem}
.price span{display:block;font-size:.8rem;font-weight:400;color:var(--ink-soft);
  font-family:system-ui,sans-serif;letter-spacing:.05em;text-transform:uppercase}
.fineprint{font-size:.9rem;color:var(--ink-soft);margin-top:1.5rem}
.creds{list-style:none;padding:0;margin:0 0 1rem;font-family:system-ui,sans-serif;
  font-size:.92rem}
.creds li{padding:.35rem 0 .35rem 1.4rem;position:relative}
.creds li:before{content:"\2713";position:absolute;left:0;color:var(--accent)}
.sunnah{text-align:center}

/* steps */
.steps ol{counter-reset:s;list-style:none;padding:0;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:1.5rem}
.steps li{counter-increment:s;position:relative;padding-top:2.6rem}
.steps li:before{content:counter(s);position:absolute;top:0;left:0;width:2rem;height:2rem;
  border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;
  font-family:system-ui,sans-serif;font-size:.9rem}

/* faq */
.faq details{border-bottom:1px solid var(--line);padding:.9rem 0}
.faq summary{cursor:pointer;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:before{content:"+";color:var(--accent);margin-right:.6rem;font-weight:400}
.faq details[open] summary:before{content:"\2013"}
.faq details p{margin:.7rem 0 0;color:var(--ink-soft)}

/* policy + table */
.policy ul{padding-left:1.2rem}
.policy li{margin-bottom:.5rem}
table.booking{width:100%;border-collapse:collapse;margin-top:1rem;
  font-family:system-ui,sans-serif;font-size:.93rem}
table.booking th,table.booking td{text-align:left;padding:.8rem .6rem;
  border-bottom:1px solid var(--line);vertical-align:middle}
table.booking thead th{font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-soft)}

/* blog */
.postlist{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.post-card{background:#fff;border:1px solid var(--line);padding:1.5rem}
.post-card h2{font-size:1.15rem}
.post-card h2 a{text-decoration:none}
.date{font-family:system-ui,sans-serif;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.4rem}
.post{max-width:720px;padding-top:2.75rem;padding-bottom:1rem}
.post .body{font-size:1.05rem}
.also{margin:1.6rem 0 0;padding:1.1rem 1.2rem;background:var(--panel);
  border-left:3px solid var(--sand)}
.also p{margin:0 0 .5rem;font-size:.95rem}
.also p:last-child{margin-bottom:0}
.post .body h2,.post .body h3{margin-top:1.8em}
.post .body img{margin:1.5rem 0}
.post .body blockquote{margin:1.5rem 0;padding-left:1.2rem;border-left:3px solid var(--sand);
  color:var(--ink-soft);font-style:italic}

/* images */
.strip{padding:0}
.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.gallery img{width:100%;height:230px;object-fit:cover;border:1px solid var(--line)}
.person{display:grid;gap:2rem;grid-template-columns:minmax(0,220px) minmax(0,1fr);
  align-items:start;max-width:860px}
.person .portrait{width:100%;border:1px solid var(--line)}
.post-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.post-card .thumb{display:block}
.post-card .thumb img{width:100%;height:170px;object-fit:cover;display:block}
.post-card .pad{padding:1.4rem}
.cert-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1.1rem;margin-top:1.4rem}
.cert-grid img{width:100%;height:auto;border:1px solid var(--line);background:#fff}
.two article img.portrait{width:100%;max-width:260px;border:1px solid var(--line);
  margin-bottom:1rem}
@media (max-width:640px){.person{grid-template-columns:1fr}}

/* footer */
footer.site{background:var(--deep);color:#dfe9e5;margin-top:1rem;padding:3rem 0 2rem;
  font-family:system-ui,sans-serif;font-size:.92rem}
footer.site a{color:#fff}
footer h3{color:#fff;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:.7rem}
.cols{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fine{border-top:1px solid rgba(255,255,255,.14);margin-top:2.2rem;padding-top:1.4rem}
.fine p{font-size:.8rem;color:#b9cbc5;line-height:1.6}
.disclaimer{max-width:70ch}

@media (max-width:720px){
  .bar{position:relative}
  .burger{display:block;width:26px;height:20px;position:relative;cursor:pointer;
    padding:12px 9px;margin:-12px -9px;box-sizing:content-box}
  .burger span,.burger span:before,.burger span:after{position:absolute;left:0;right:0;
    height:2px;background:#fff;content:"";transition:.2s}
  .burger span{top:21px}
  .burger span:before{top:-7px}
  .burger span:after{top:7px}
  header nav{display:none;width:100%;flex-direction:column;gap:.2rem;padding-top:.6rem}
  .navtoggle:checked ~ nav{display:flex}
  header nav a{padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.1)}
}