/* ============================================================
   Kedmati — kedmati.com  ·  one stylesheet, LTR + RTL
   Tokens per PROJECT.md
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Manrope';src:url('../fonts/manrope-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:optional;unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:optional;unicode-range:U+0000-00FF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:optional;unicode-range:U+0000-00FF}
@font-face{font-family:'IBM Plex Sans Arabic';src:url('../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:optional;unicode-range:U+0000-00FF}

/* ---------- Tokens ---------- */
:root{
  --teal:#30B8B7;
  --teal-deep:#17807F;
  --teal-soft:#DFF3F2;
  --navy:#123F5D;
  --ink:#0B2C42;
  --ink-deep:#082334;
  --cream:#F7F3EC;
  --paper:#FFFFFF;
  --sand:#E8A33D;
  --text:#213B4E;
  --muted:#5A7183;
  --line:#E5DDD0;
  --radius:22px;
  --bubble-r:26px;
  --shadow:0 10px 40px rgba(11,44,66,.10);
  --shadow-lg:0 24px 70px rgba(11,44,66,.16);
  --font:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --maxw:1180px;
  --bold:800;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ring:0 0 0 3px rgba(48,184,183,.45);
}
html[lang="ar"]{
  --font:'IBM Plex Sans Arabic',system-ui,'Segoe UI',sans-serif;
  --bold:700;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-block-start:90px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;font-family:var(--font);color:var(--text);background:var(--cream);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
html[lang="ar"] body{font-size:18px;line-height:1.85}
img{max-width:100%;height:auto;display:block}
a{color:var(--teal-deep)}
h1,h2,h3,h4{color:var(--navy);line-height:1.15;margin:0 0 .5em;font-weight:var(--bold);letter-spacing:-.015em}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{letter-spacing:0;line-height:1.4}
h1{font-size:clamp(2.2rem,4.8vw,3.6rem);line-height:1.08;letter-spacing:-.028em}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.16rem}
p{margin:0 0 1em;text-wrap:pretty}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
/* Visually hidden until focused. Never park this off-canvas with a negative offset:
   in an RTL document (this site has /ar/) a negative inline offset can become SCROLLABLE
   overflow, which expands the mobile layout viewport and renders the desktop layout on a
   phone — that is what blanked drpishkar.com, 2026-08-30. Direction-agnostic only. */
.skip-link{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link:focus{width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;inset-inline-start:16px;top:0;background:var(--navy);color:#fff;padding:12px 20px;z-index:200;border-radius:0 0 12px 12px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:24px}
section{padding-block:clamp(64px,9vw,110px)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--teal-deep);background:var(--teal-soft);border-radius:999px;padding:7px 16px;font-size:.86rem;margin-block-end:18px}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--muted);max-width:56ch}
.center{text-align:center}
.center .lead{margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 28px;border-radius:999px;font-weight:600;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
.btn-primary{background:var(--teal);color:#053938;box-shadow:0 8px 24px rgba(48,184,183,.38)}
.btn-primary:hover{background:#3ecac9}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:#1a5178}
.btn-ghost{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-ghost:hover{background:var(--navy);color:#fff}
.btn-wa{background:#25D366;color:#06341a}
.btn-wa:hover{background:#3be07c}
.btn svg{flex:none}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:100;background:var(--cream);border-block-end:1px solid rgba(229,221,208,.7);transition:box-shadow .3s var(--ease)}
.site-header.is-scrolled{box-shadow:0 8px 28px -14px rgba(11,44,66,.28)}
@media (min-width:921px){.site-header{background:rgba(247,243,236,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}}
.nav{display:flex;align-items:center;gap:28px;min-height:76px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;margin-inline-end:auto}
.brand img{height:44px;width:auto;transition:transform .3s var(--ease)}
.nav-main{display:contents}
.nav-drawer-cta{display:none}
.nav-back{color:var(--navy);font-weight:600;font-size:.95rem;text-decoration:none;padding:10px 4px;border-block-end:2px solid transparent}
.nav-back:hover{border-color:var(--teal)}
.nav-links{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--navy);text-decoration:none;font-weight:600;font-size:.97rem;padding-block:8px;position:relative}
.nav-links a:not(.btn)::after{content:"";position:absolute;inset-inline:0;bottom:2px;height:2px;border-radius:2px;background:var(--teal);transform:scaleX(0);transition:transform .25s var(--ease)}
.nav-links a:hover{color:var(--teal-deep)}
.nav-links a:hover::after,.nav-links a[aria-current]::after{transform:scaleX(1)}
.nav-links a[aria-current]{color:var(--teal-deep)}
.lang-switch{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;text-decoration:none;color:var(--navy);font-weight:600;font-size:.92rem;background:#fff}
.lang-switch{min-height:44px}
.lang-switch:hover{border-color:var(--teal)}
.nav-cta{white-space:nowrap}
.nav-toggle{display:none;background:none;border:0;padding:10px;cursor:pointer;min-width:44px;min-height:44px;border-radius:12px}
.nav-toggle span{display:block;width:24px;height:2.5px;background:var(--navy);margin-block:5px;border-radius:2px;transition:transform .2s,opacity .2s}
@media (max-width:920px){
  .nav-links,.nav .nav-cta{display:none}
  .nav-toggle{display:block}
  .nav.open .nav-links{display:flex;position:absolute;inset-inline:0;top:76px;background:var(--cream);flex-direction:column;align-items:stretch;padding:18px 24px 26px;gap:4px;border-block-end:1px solid var(--line);box-shadow:var(--shadow);animation:drop .28s var(--ease)}
  .nav.open .nav-links a{padding:13px 6px;font-size:1.05rem;border-radius:10px}
  .nav.open .nav-links a:not(.btn){border-block-end:1px solid var(--line);border-radius:0}
  .nav.open .nav-links a::after{display:none}
  .nav.open .nav-drawer-cta{display:block;margin-block-start:14px}
  .nav.open .nav-drawer-cta .btn{width:100%}
  .nav-back{display:none}
  .nav.open .nav-toggle span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav.open .nav-toggle span:nth-child(2){opacity:0}
  .nav.open .nav-toggle span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}

/* ---------- Hero ---------- */
.hero{padding-block:clamp(48px,7vw,96px);overflow:hidden;position:relative;isolation:isolate}
.hero::before{content:"";position:absolute;inset-block-start:-180px;inset-inline-end:-120px;width:560px;height:560px;border-radius:50%;background:radial-gradient(closest-side,rgba(48,184,183,.16),transparent 70%);z-index:-1;pointer-events:none}
@media (prefers-reduced-motion:no-preference) and (min-width:821px){.hero::before{animation:drift 18s ease-in-out infinite alternate}}
@keyframes drift{to{transform:translate(-60px,40px)}}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero-copy .lead{margin-block-end:30px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-block-end:38px}
.hero-points{display:flex;flex-wrap:wrap;gap:10px 20px;padding:0;margin:0;list-style:none;color:var(--muted);font-size:.94rem;font-weight:600}
.hero-points li{display:flex;align-items:center;gap:8px}
.hero-points svg{color:var(--teal-deep);flex:none}
@media (max-width:920px){.hero .wrap{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-ctas{justify-content:center}.hero-points{justify-content:center}.hero-copy .lead{margin-inline:auto}}

/* ---------- Phone chat mockup (signature element) ---------- */
.phone-wrap{display:flex;justify-content:center;position:relative}
.phone-wrap::before{content:"";position:absolute;inset-block-start:8%;inset-inline-start:6%;width:88%;height:84%;background:radial-gradient(closest-side,rgba(48,184,183,.28),transparent 70%);filter:blur(10px);z-index:0}
.phone{position:relative;z-index:1;width:min(350px,86vw);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s linear;background:var(--ink-deep);border-radius:44px;padding:12px;box-shadow:var(--shadow-lg)}
.phone-screen{background:linear-gradient(180deg,#F2FAFA 0%,#EAF3F1 100%);border-radius:34px;overflow:hidden;display:flex;flex-direction:column;min-height:560px}
.phone-top{display:flex;align-items:center;gap:10px;background:var(--navy);color:#fff;padding:14px 16px}
.phone-top img{width:34px;height:34px;border-radius:50%;background:#fff;padding:3px}
.phone-top strong{font-size:.95rem;letter-spacing:.01em}
.phone-top small{display:block;font-size:.72rem;color:#9fd9d8;font-weight:400}
.chat{flex:1;padding:16px 14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:86%;padding:11px 14px;font-size:.86rem;line-height:1.55;transition:opacity .5s ease,transform .5s ease}
/* only the replies wait for the demo; the customer's request is on screen at first paint, and with no JS the whole chat shows */
.kd-js .msg:not(:first-child){opacity:0;transform:translateY(10px)}
.kd-js .msg.show{opacity:1;transform:none}
.msg.user{align-self:flex-end;background:var(--teal);color:#04302f;border-radius:var(--bubble-r);border-end-end-radius:6px}
.msg.bot{align-self:flex-start;background:#fff;color:var(--text);border-radius:var(--bubble-r);border-end-start-radius:6px;box-shadow:0 3px 12px rgba(11,44,66,.07)}
.msg.offer{align-self:flex-start;background:#fff;border:1.5px solid var(--teal);border-radius:var(--bubble-r);border-end-start-radius:6px;width:86%;padding:12px 14px}
.offer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-block-end:6px}
.offer-head strong{color:var(--navy);font-size:.86rem}
.stars{color:var(--sand);font-size:.78rem;white-space:nowrap}
.offer-meta{font-size:.78rem;color:var(--muted);margin-block-end:10px}
.offer-btn{display:block;text-align:center;background:var(--navy);color:#fff;border-radius:999px;padding:8px;font-size:.8rem;font-weight:600;text-decoration:none}
.typing{align-self:flex-start;display:inline-flex;visibility:hidden;gap:5px;background:#fff;border-radius:var(--bubble-r);border-end-start-radius:6px;padding:14px 18px;box-shadow:0 3px 12px rgba(11,44,66,.07)}
.typing.show{visibility:visible}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--teal);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* ---------- Stats strip ---------- */
.strip{background:var(--navy);color:#fff;padding-block:34px}
.strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;text-align:center}
.strip strong{display:block;font-size:1.25rem;color:#fff;font-weight:var(--bold)}
.strip span{color:#A8CBDD;font-size:.9rem}
@media (max-width:820px){.strip .wrap{grid-template-columns:repeat(2,1fr)}}

/* ---------- Steps ---------- */
.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-block-start:48px;position:relative}
@media (min-width:601px){.steps-grid::before{content:"";position:absolute;inset-inline:17%;top:57px;border-top:2px dashed rgba(48,184,183,.55);z-index:0}.step{z-index:1}}
.step{background:var(--paper);border-radius:var(--radius);border-end-start-radius:6px;padding:34px 30px;box-shadow:var(--shadow);position:relative}
.step-num{position:relative;z-index:1;box-shadow:0 0 0 6px var(--paper);display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:var(--teal-soft);color:var(--teal-deep);font-weight:var(--bold);font-size:1.15rem;margin-block-end:18px}
.step p{color:var(--muted);font-size:.97rem;margin:0}
@media (max-width:600px){.steps-grid{grid-template-columns:1fr}}
@media (min-width:601px) and (max-width:820px){.step{padding:26px 20px}}

/* ---------- Services ---------- */
.services{background:var(--paper)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-block-start:48px}
.svc{background:var(--cream);border:1.5px solid transparent;border-radius:var(--radius);padding:26px 22px;transition:border-color .2s,transform .25s var(--ease),box-shadow .2s;position:relative;overflow:hidden;isolation:isolate}
.svc:hover{border-color:var(--teal);transform:translateY(-4px);box-shadow:var(--shadow)}
.svc .svc-ic{transition:transform .25s var(--ease),background .25s,color .25s}
.svc:hover .svc-ic{transform:scale(1.12);background:var(--teal);color:#fff}
.svc::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(48,184,183,.18),transparent 70%);pointer-events:none}
.svc:hover::before{opacity:1}
.svc.tilting{transition:border-color .2s,box-shadow .2s;transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.svc-ic{width:52px;height:52px;border-radius:16px;background:var(--teal-soft);display:flex;align-items:center;justify-content:center;color:var(--teal-deep);margin-block-end:16px}
.svc h3{font-size:1.02rem;margin-block-end:4px}
.svc p{font-size:.87rem;color:var(--muted);margin:0}
@media (max-width:980px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.svc-grid{grid-template-columns:1fr 1fr;gap:12px}.svc{padding:20px 16px}}

/* ---------- Image band ---------- */
.band{position:relative;padding:0;overflow:hidden}
.band img{width:100%;height:clamp(380px,52vw,560px);object-fit:cover}
.band-quote{position:absolute;inset-block-end:0;inset-inline:0;background:linear-gradient(0deg,rgba(8,35,52,.82),transparent);padding:clamp(28px,5vw,60px) 0}
.band-quote blockquote{margin:0;color:#fff;font-size:clamp(1.15rem,2.4vw,1.7rem);font-weight:600;max-width:30ch;line-height:1.45}
.band-quote cite{display:block;font-style:normal;color:#8fd6d5;font-size:.95rem;margin-block-start:12px;font-weight:400}

/* ---------- Features (why) ---------- */
.why .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,5vw,72px);align-items:center}
.why-img{border-radius:var(--radius);border-end-start-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg)}
.why-img img{width:100%;height:100%;object-fit:cover}
.feat-list{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-block-start:34px}
.feat{display:flex;gap:14px;align-items:flex-start}
.feat-ic{flex:none;width:44px;height:44px;border-radius:14px;background:var(--teal-soft);color:var(--teal-deep);display:flex;align-items:center;justify-content:center}
.feat h3{font-size:.99rem;margin-block-end:3px}
.feat p{font-size:.88rem;color:var(--muted);margin:0}
@media (max-width:920px){.why .wrap{grid-template-columns:1fr}.feat-list{grid-template-columns:1fr}}

/* ---------- Providers ---------- */
.providers{background:var(--ink);color:#CBE2EE}
.providers .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,5vw,80px);align-items:center}
.providers h2{color:#fff}
.providers .eyebrow{background:rgba(48,184,183,.16);color:#6fd3d2}
.providers .lead{color:#9DBDCE}
.prov-list{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:16px}
.prov-list li{display:flex;gap:13px;align-items:flex-start;font-size:.99rem}
.prov-list svg{flex:none;color:var(--teal);margin-block-start:4px}
.prov-img{border-radius:var(--radius);border-end-end-radius:8px;overflow:hidden;box-shadow:var(--shadow-lg);max-height:540px}
.prov-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:920px){.providers .wrap{grid-template-columns:1fr}.prov-img{order:-1;max-height:380px}}

/* ---------- App CTA ---------- */
.appcta{background:linear-gradient(135deg,var(--teal-deep) 0%,var(--teal) 100%);color:#fff}
.appcta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px}
.appcta h2{color:#fff;margin-block-end:8px}
.appcta p{color:#DFF6F5;margin:0;max-width:46ch}
.store-badges{display:flex;gap:14px;flex-wrap:wrap}
.store-badge{display:inline-flex;align-items:center;gap:11px;background:var(--ink-deep);color:#fff;border-radius:14px;padding:11px 20px;text-decoration:none;min-width:180px;transition:transform .18s}
.store-badge:hover{transform:translateY(-2px)}
.store-badge svg{flex:none}
.store-badge small{display:block;font-size:.68rem;color:#9db8c6;letter-spacing:.03em}
.store-badge strong{font-size:1.02rem;line-height:1.2}

/* ---------- FAQ ---------- */
.faq-list{max-width:780px;margin:44px auto 0;display:grid;gap:14px}
details{background:var(--paper);border-radius:18px;box-shadow:var(--shadow);padding:0;overflow:hidden}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font-weight:600;color:var(--navy);font-size:1.02rem;min-height:44px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.5rem;color:var(--teal-deep);transition:transform .2s;line-height:1;flex:none}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 24px 22px;margin:0;color:var(--muted)}

/* ---------- Contact ---------- */
.contact{background:var(--paper)}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-block-start:44px}
.contact-card{background:var(--cream);border-radius:var(--radius);padding:32px 28px;text-align:center}
.contact-card .svc-ic{margin-inline:auto}
.contact-card a{font-weight:var(--bold);color:var(--navy);text-decoration:none;font-size:1.12rem}
.contact-card a:hover{color:var(--teal-deep)}
.contact-card p{color:var(--muted);font-size:.9rem;margin:6px 0 0}
@media (max-width:600px){.contact-grid{grid-template-columns:1fr}}
@media (min-width:601px) and (max-width:820px){.contact-card{padding:26px 16px}.contact-card a{font-size:1rem}}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink-deep);color:#8FA9BA;padding-block:56px 32px;font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-block-end:44px}
.foot-grid img{height:52px;width:auto;margin-block-end:16px}
.site-footer h4{color:#fff;font-size:.95rem;margin-block-end:14px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.site-footer a{color:#8FA9BA;text-decoration:none}
.site-footer a:hover{color:var(--teal)}
.foot-bottom{border-block-start:1px solid rgba(143,169,186,.18);padding-block-start:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center}
@media (max-width:820px){.foot-grid{grid-template-columns:1fr 1fr;gap:30px 24px}.foot-grid>:first-child{grid-column:1/-1}}
.site-footer ul a,.foot-bottom a{display:inline-block;padding-block:4px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 18px}

/* ---------- Reveal on scroll ---------- */
.kd-js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.kd-js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.kd-js .reveal,.reveal{opacity:1;transform:none}.kd-js .msg,.msg{opacity:1!important;transform:none!important}.typing{display:none!important}.phone,.svc.tilting{transform:none!important}}

/* ---------- Legal pages ---------- */
.legal{max-width:820px;margin-inline:auto;padding-block:40px 72px}
.legal h1{font-size:clamp(2rem,4vw,2.6rem);margin-block-end:.3em}
.legal h1+p em{display:inline-block;font-style:normal;font-size:.86rem;font-weight:600;color:#136F6E;background:var(--teal-soft);border-radius:999px;padding:5px 14px}
.legal h2{font-size:1.22rem;margin-block-start:2em;padding-block-start:1.2em;border-block-start:1px solid var(--line)}
.legal p{max-width:68ch}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:.9rem;color:var(--muted);margin-block-end:22px}
.crumbs a{color:var(--teal-deep);font-weight:600;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.legal-help{margin-block-start:48px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;background:var(--paper);border-radius:var(--radius);border-end-start-radius:6px;padding:24px 28px;box-shadow:var(--shadow)}
.legal-help strong{display:block;color:var(--navy)}
.legal-help span{color:var(--muted);font-size:.95rem}
a[href^="tel:"],a[href^="tel:"] bdi{white-space:nowrap}

/* 2026-09-26 audit fixes
   - .reveal content is hidden only once main.js has marked <html class="kd-js"> (no-JS / failed JS = visible)
   - the chat typing bubble keeps its slot (visibility, not display) so the phone never grows/shrinks
     under the reader while the demo plays (CLS 0.05-0.27 measured on phones)
   - eyebrow text on teal-soft was 4.1:1; #136F6E gives 5.2:1 (WCAG AA) */
.eyebrow{color:#136F6E}
.providers .eyebrow{color:#6fd3d2}

/* ---------- 2026-10-04 UI upgrade: components added below are new classes only
   (nothing here re-declares a layout rule set earlier), so no breakpoint leak ---------- */

/* mobile action bar: phones + portrait tablets (the header CTA is hidden below 920px) */
.m-bar{display:none}
@media (max-width:820px){
  .m-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;inset-inline:0;bottom:0;z-index:95;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(247,243,236,.97);border-block-start:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(11,44,66,.35);transition:transform .3s var(--ease)}
  .m-bar .btn{min-height:48px;padding:10px 14px;font-size:.98rem}
  .m-bar.away{transform:translateY(110%)}
}

/* 404 */
.nf{padding-block:clamp(40px,7vw,90px)}
.nf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.nf-card{background:var(--paper);border-radius:var(--radius);border-end-start-radius:6px;padding:clamp(26px,4vw,44px);box-shadow:var(--shadow)}
.nf-card[dir="rtl"]{font-family:'IBM Plex Sans Arabic','Manrope',system-ui,sans-serif;border-end-start-radius:var(--radius);border-end-end-radius:6px}
.nf-card[dir="rtl"] h2{letter-spacing:0;line-height:1.4}
.nf-card h1,.nf-card h2{font-size:clamp(1.7rem,3vw,2.3rem)}
.nf-card p{color:var(--muted)}
.nf-links{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nf-links a{display:flex;align-items:center;min-height:48px;padding:10px 16px;border-radius:14px;background:var(--cream);color:var(--navy);font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.nf-links a:hover{background:var(--teal-soft);color:var(--teal-deep)}
.nf-actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:820px){.nf-grid{grid-template-columns:1fr}}
@media (max-width:420px){.nf-links{grid-template-columns:1fr}}
.page-legal .site-footer{padding-block:26px}
.page-legal .foot-bottom{border:0;padding:0}
/* `ch` resolves against the "0" glyph, which on /ar/ lives in the late-loading Latin subset:
   the lead re-measured 470 -> 564px after the font swap (CLS 0.34 on tablet). em is font-stable. */
html[lang="ar"] .lead{max-width:33.5em}
/* ---- 2026-10-04 third audit ---- */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* legal pages sit on cream: #17807F is 4.28:1 there, #136F6E is 5.2:1 */
.page-legal .crumbs a,.page-legal .legal a:not(.btn){color:#136F6E}
.hero-ctas .btn-ghost{background:rgba(255,255,255,.55)}
/* nav never wraps between the drawer breakpoint and wide desktop */
@media (min-width:921px){.nav-links a{white-space:nowrap}}
@media (min-width:921px) and (max-width:1180px){.nav{gap:18px}.nav-links{gap:16px}.nav-links a{font-size:.92rem}.nav-cta{padding-inline:18px}}