/* ===== marketing-only styles (share tokens from app.css) ===== */
[id]{scroll-margin-top:88px}

/* nav */
.mnav{position:sticky;top:0;z-index:70;background:rgba(250,246,238,.8);backdrop-filter:saturate(1.5) blur(16px);border-bottom:1px solid var(--line-2)}
.mnav__in{max-width:var(--maxw);margin-inline:auto;padding:12px clamp(16px,4vw,32px);display:flex;align-items:center;gap:18px}
.mnav .brand-name{font-weight:800;color:var(--forest);font-size:1.15rem;letter-spacing:-.02em;line-height:1.1}
.mnav .brand-name small{display:block;font-size:.68rem;color:var(--muted);font-weight:600;letter-spacing:.08em}
.mnav .links{display:flex;gap:6px;margin-inline-start:auto}
.mnav .links a{padding:9px 15px;border-radius:var(--pill);font-weight:600;font-size:.96rem;color:var(--ink-2);transition:all var(--dur)}
.mnav .links a:hover{background:var(--sand);color:var(--forest)}
.mnav__cta{display:flex;gap:8px;align-items:center;margin-inline-start:auto}
.burger{display:none;width:44px;height:44px;padding:0;background:var(--sand);color:var(--forest);border-radius:14px;flex:none}
.burger:hover{background:var(--sand-2)}
.lang-toggle{display:inline-flex;align-items:center;gap:5px;padding:0 11px;min-height:40px;border-radius:14px;
  background:var(--sand);color:var(--forest);font-weight:800;font-size:.82rem;flex:none;transition:background var(--dur)}
.lang-toggle:hover{background:var(--sand-2)}
.lang-toggle svg{width:17px;height:17px}
@media(max-width:900px){
  .mnav .links{display:none}
  .burger{display:inline-flex}
}
/* keep دخول + احجز زيارة both visible on phones, next to each other */
@media(max-width:560px){
  .mnav__in{gap:8px;padding-inline:14px}
  .mnav .brand-name small{display:none}
  .mnav__cta{gap:6px}
  .mnav__cta .btn--sm{padding:0 12px;min-height:38px;font-size:.85rem}
}
@media(max-width:400px){
  .mnav .brand-name{display:none}   /* keep the logo, drop the wordmark so the two CTAs fit */
}
/* drawer */
.drawer{position:fixed;inset:0;z-index:80;background:var(--cream);transform:translateX(100%);transition:transform .34s var(--ease-out);
  display:flex;flex-direction:column;padding:20px;visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.drawer a.dl{display:flex;align-items:center;gap:12px;padding:16px 14px;border-radius:var(--r);font-weight:700;font-size:1.15rem;color:var(--forest);border-bottom:1px solid var(--line-2)}
.drawer a.dl svg{width:22px;height:22px;color:var(--clay)}
.drawer .btn{margin-top:auto}

/* hero */
.hero{position:relative;overflow:hidden;
  background:radial-gradient(1100px 520px at 82% -8%,#e7f1e9,transparent 62%),
            radial-gradient(900px 500px at 5% 108%,#f7ecd9,transparent 60%),var(--cream)}
.hero__in{max-width:var(--maxw);margin-inline:auto;padding:clamp(40px,6vw,84px) clamp(16px,4vw,32px) clamp(56px,8vw,96px);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{font-size:var(--fs-display);font-weight:900;line-height:1.1;letter-spacing:-.03em}
.hero h1 .em{color:var(--clay);position:relative;white-space:nowrap}
.hero h1 .em::after{content:"";position:absolute;inset-inline:0;bottom:.06em;height:.18em;background:var(--amber-200);border-radius:8px;z-index:-1}
.hero p.sub{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--ink-2);margin:22px 0 30px;max-width:540px;line-height:1.8}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.trust{display:flex;gap:clamp(18px,3vw,40px);margin-top:38px;flex-wrap:wrap}
.trust .t b{display:block;font-size:1.9rem;font-weight:900;color:var(--forest);letter-spacing:-.02em;line-height:1}
.trust .t span{font-size:.86rem;color:var(--muted);font-weight:600}
.hero__art{position:relative;filter:drop-shadow(0 30px 50px rgba(24,78,62,.16))}
.hero__art > svg{width:100%;height:auto}
.float{animation:floaty 6s var(--ease) infinite}
.float2{animation:floaty 7.5s var(--ease) infinite reverse}
@keyframes floaty{50%{transform:translateY(-12px)}}
/* real-photo hero collage (activates only when Drive photos load) */
.hero-collage{position:relative;width:100%;aspect-ratio:1/1.04;display:none}
.hero__art.has-photos .hero-collage{display:block}
.hero__art.has-photos > svg{display:none}
.hero-collage::before{content:"";position:absolute;inset-inline-end:-4%;top:-6%;width:58%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(224,164,88,.22),transparent 68%);z-index:0}
.hero-collage img{object-fit:cover;border:7px solid #fff;background:var(--sand)}
.hc-arch{position:absolute;z-index:2;inset-inline-end:2%;top:0;width:60%;height:78%;
  border-radius:999px 999px 28px 28px;box-shadow:0 24px 60px rgba(24,78,62,.22)}
.hc-a{position:absolute;z-index:1;inset-inline-start:0;top:8%;width:42%;aspect-ratio:1/1.05;
  border-radius:24px;transform:rotate(5deg);box-shadow:var(--sh-2);animation:floatA 8s var(--ease) infinite}
.hc-b{position:absolute;z-index:3;inset-inline-start:7%;bottom:0;width:52%;aspect-ratio:4/3.1;
  border-radius:24px;transform:rotate(-4deg);box-shadow:0 20px 50px rgba(24,78,62,.24);animation:floatB 6.5s var(--ease) infinite}
/* gentle float that KEEPS the tilt (avoids the transform-conflict wobble) */
@keyframes floatA{50%{transform:rotate(5deg) translateY(-8px)}}
@keyframes floatB{50%{transform:rotate(-4deg) translateY(-8px)}}
/* on phones the collage stays perfectly still — no float, no jitter */
@media(max-width:860px){.hc-a,.hc-b,.hc-leaf{animation:none}}
.hc-badge{position:absolute;z-index:4;inset-inline-end:0;bottom:9%;display:inline-flex;align-items:center;gap:9px;
  background:#fff;color:var(--forest);font-weight:800;font-size:.9rem;padding:11px 18px;border-radius:var(--pill);box-shadow:var(--sh-2)}
.hc-badge svg{width:18px;height:18px;color:var(--clay)}
.hc-leaf{position:absolute;z-index:4;inset-inline-start:38%;top:0;width:54px;height:54px;color:var(--sage);opacity:.9}
@media(max-width:860px){
  .hero__in{grid-template-columns:1fr;text-align:center}
  .hero .cta{justify-content:center}
  .trust{justify-content:center}
  .hero__art{width:100%;max-width:420px;margin-inline:auto;order:-1}
}

/* trust strip */
.strip{background:var(--forest);color:#dcece1}
.strip__in{max-width:var(--maxw);margin-inline:auto;padding:16px clamp(16px,4vw,32px);display:flex;flex-wrap:wrap;gap:10px 30px;
  justify-content:center;align-items:center;font-weight:600;font-size:.96rem}
.strip__in .s{display:inline-flex;align-items:center;gap:9px}
.strip__in .s svg{width:19px;height:19px;color:var(--amber)}

/* philosophy */
.philo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center}
.philo h2{font-size:var(--fs-h1)}
.philo p{color:var(--ink-2);font-size:1.06rem;margin-top:14px}
.principles{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-xl);padding:clamp(20px,3vw,32px);box-shadow:var(--sh-2)}
.principles .pr{display:flex;gap:14px;padding:15px 0;border-bottom:1px dashed var(--line)}
.principles .pr:last-child{border:0}
.principles .pr .ci{width:44px;height:44px;border-radius:13px;background:var(--sand);display:flex;align-items:center;justify-content:center;flex:none}
.principles .pr .ci svg{width:24px;height:24px;color:var(--forest)}
.principles .pr b{color:var(--forest);display:block}
.principles .pr span{color:var(--muted);font-size:.92rem}
@media(max-width:820px){.philo{grid-template-columns:1fr}}

/* pillars (dark) */
.pillars{background:linear-gradient(170deg,#123c2f,var(--forest));color:#e7f1ea;position:relative;overflow:hidden}
.pillars::before{content:"";position:absolute;inset-block-start:-120px;inset-inline-end:-80px;width:360px;height:360px;border-radius:50%;
  background:radial-gradient(circle,rgba(224,164,88,.18),transparent 70%)}
.pillars h2{color:#fff}.pillars .eyebrow{color:var(--amber)}.pillars .lead{color:#a9c7b6;margin-inline:auto;text-align:center}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:44px}
.pcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-lg);padding:28px;transition:transform var(--dur),background var(--dur)}
.pcard:hover{background:rgba(255,255,255,.1);transform:translateY(-5px)}
.pcard .ic{width:54px;height:54px;border-radius:15px;background:rgba(224,164,88,.16);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.pcard .ic svg{width:28px;height:28px;color:var(--amber)}
.pcard h3{color:#fff;font-size:1.18rem;margin-bottom:7px}
.pcard p{color:#b6cec0;font-size:.96rem}

/* timeline */
.tl{max-width:760px;margin:44px auto 0;position:relative}
.tl::before{content:"";position:absolute;inset-inline-start:87px;inset-block:14px;width:2px;background:var(--line);border-radius:2px}
.tstep{display:grid;grid-template-columns:76px 34px 1fr;gap:16px;align-items:flex-start;padding:14px 0}
.tstep .tm{color:var(--clay-600);font-weight:800;font-size:.92rem;padding-top:5px;text-align:end}
.tstep .dot{width:34px;height:34px;border-radius:50%;background:var(--paper);border:2px solid var(--sand-2);display:flex;align-items:center;justify-content:center;z-index:1;box-shadow:var(--sh-1)}
.tstep .dot svg{width:18px;height:18px;color:var(--forest)}
.tstep .c h4{color:var(--forest);font-size:1.08rem}
.tstep .c p{color:var(--muted);font-size:.95rem}

/* programs */
.progs{background:var(--sand)}
.progrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:44px}
.prog{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:30px 26px;box-shadow:var(--sh-1);transition:transform var(--dur),box-shadow var(--dur);text-align:center}
.prog:hover{transform:translateY(-5px);box-shadow:var(--sh-2)}
.prog .ic{width:66px;height:66px;border-radius:19px;background:linear-gradient(160deg,var(--sand),#fff);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:var(--sh-1)}
.prog .ic svg{width:32px;height:32px;color:var(--clay)}
.prog h3{color:var(--forest);font-size:1.2rem}
.prog .age{display:inline-block;margin:8px 0 12px;padding:3px 13px;border-radius:var(--pill);background:var(--forest);color:#fff;font-size:.8rem;font-weight:700}
.prog p{color:var(--muted);font-size:.94rem}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:44px}
.gal .cell{aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--sand);position:relative;cursor:pointer}
.gal .cell img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.gal .cell:hover img{transform:scale(1.07)}
.gal .cell .z{position:absolute;inset-block-end:8px;inset-inline-end:8px;width:32px;height:32px;border-radius:50%;background:rgba(24,78,62,.72);color:#fff;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--dur)}
.gal .cell:hover .z{opacity:1}
.gal .cell .z svg{width:17px;height:17px}
@media(max-width:820px){.gal{grid-template-columns:repeat(2,1fr)}}

/* testimonials */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:44px}
.quote{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-1)}
.quote .stars{color:var(--amber);display:flex;gap:2px;margin-bottom:12px}
.quote .stars svg{width:18px;height:18px;fill:var(--amber)}
.quote p{color:var(--ink-2);font-size:1.02rem;line-height:1.75}
.quote .who{display:flex;align-items:center;gap:11px;margin-top:16px}
.quote .who .avatar{background:linear-gradient(160deg,var(--clay),var(--clay-600))}
.quote .who b{color:var(--forest)}.quote .who span{color:var(--muted);font-size:.85rem}
.quote .q-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.quote .q-top .gmark{width:22px;height:22px;flex:none}
.quote p{white-space:pre-line}
/* google rating badge */
.g-rating{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:30px;
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--sh-1);
  padding:16px 24px;max-width:560px;margin-inline:auto}
.g-rating .g-score{font-size:2.6rem;font-weight:900;color:var(--forest);line-height:1;letter-spacing:-.02em}
.g-rating .g-mid{text-align:center}
.g-rating .g-stars{display:flex;gap:2px;justify-content:center;color:var(--amber)}
.g-rating .g-stars svg{width:19px;height:19px;fill:var(--amber)}
.g-rating .g-sub{color:var(--muted);font-size:.86rem;margin-top:4px;display:flex;align-items:center;gap:6px;justify-content:center}
.g-rating .g-sub .gmark{width:16px;height:16px}
.g-rating .btn{margin-inline-start:auto}
@media(max-width:520px){.g-rating .btn{margin-inline-start:0;width:100%}}

/* register */
.reg{background:linear-gradient(165deg,var(--forest),#0f3226);color:#fff;position:relative;overflow:hidden}
.reg::before{content:"";position:absolute;inset-block-end:-140px;inset-inline-start:-80px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,rgba(224,164,88,.14),transparent 70%)}
.reg__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:center;position:relative}
.reg h2{color:#fff;font-size:var(--fs-h1)}
.reg .lead{color:#bcd6c8;text-align:start;margin:14px 0 24px}
.reg .steps .st{display:flex;gap:13px;align-items:flex-start;margin-bottom:16px}
.reg .steps .n{width:34px;height:34px;border-radius:50%;background:var(--amber);color:#3a2a10;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.reg .steps b{color:#fff;display:block}.reg .steps span{color:#a9c7b6;font-size:.92rem}
.form-card{background:var(--paper);border-radius:var(--r-xl);padding:clamp(22px,3vw,34px);color:var(--ink);box-shadow:var(--sh-3)}
.form-card h3{font-size:1.3rem;margin-bottom:4px}
.form-card .fc-sub{color:var(--muted);font-size:.92rem;margin-bottom:20px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.form-row{grid-template-columns:1fr}}
@media(max-width:820px){.reg__grid{grid-template-columns:1fr}.reg .lead{text-align:center}}
#reg-msg{margin-top:14px;font-weight:700;text-align:center;min-height:20px}
.reg-done{text-align:center;padding:10px 0}
.reg-done .big{width:70px;height:70px;border-radius:50%;background:var(--ok-bg);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.reg-done .big svg{width:38px;height:38px;color:var(--ok)}

/* contact */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:44px}
.cc{background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r-lg);padding:26px 22px;text-align:center;box-shadow:var(--sh-1);transition:transform var(--dur)}
.cc:hover{transform:translateY(-4px)}
.cc .ic{width:52px;height:52px;border-radius:15px;background:var(--sand);display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.cc .ic svg{width:26px;height:26px;color:var(--forest)}
.cc b{color:var(--forest);display:block;margin-bottom:6px}
.cc a,.cc span{color:var(--muted);font-size:.94rem}
.cc a{color:var(--clay-600);font-weight:700;display:block}

/* footer */
.foot{background:#0f2c1f;color:#8fb39f;padding:44px 20px 30px}
.foot__in{max-width:var(--maxw);margin-inline:auto;text-align:center}
.foot .soc{display:flex;gap:12px;justify-content:center;margin-bottom:18px}
.foot .soc a{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#cfe3d6;transition:background var(--dur),transform var(--dur)}
.foot .soc a:hover{background:rgba(255,255,255,.16);transform:translateY(-3px)}
.foot .soc a svg{width:22px;height:22px}
.foot .fnav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:18px;font-weight:600}
.foot .fnav a{color:#b7d0c1}.foot .fnav a:hover{color:#fff}
.foot .cr{font-size:.86rem;color:#6f9683;border-top:1px solid rgba(255,255,255,.08);padding-top:18px;margin-top:8px}

/* back to top */
#totop{position:fixed;inset-block-end:22px;inset-inline-start:22px;width:50px;height:50px;border-radius:50%;
  background:var(--forest);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-forest);
  z-index:60;opacity:0;transform:translateY(12px) scale(.9);transition:all var(--dur);pointer-events:none}
#totop.show{opacity:1;transform:none;pointer-events:auto}
#totop svg{width:24px;height:24px}

/* Emergency layout recovery */
.hero .rev{opacity:1;transform:none}
@media (max-width:1200px) and (min-width:861px){.hero__in{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.hero__in>*{min-width:0}.hero h1 .em{white-space:normal}.mnav__in{gap:10px;padding-inline:16px}.mnav .links{gap:0}.mnav .links a{padding-inline:8px;font-size:.86rem}.mnav__cta{gap:5px}.mnav__cta .btn--sm{padding-inline:10px;font-size:.82rem}.lang-toggle{padding-inline:8px}}