/* Josour — added sections: reply promise, languages, samples, leadership, confidentiality,
   estimator, FAQ, WhatsApp button, service/article pages, extended footer. Uses the site's tokens. */

/* Hero reply promise */
.reply{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-size:.92rem;color:var(--on-navy-muted)}
.reply .dot-live{width:9px;height:9px;border-radius:50%;background:#3ccf7e;box-shadow:0 0 0 0 rgba(60,207,126,.6);animation:pulse 2.4s infinite}
.reply b{color:var(--on-navy);font-weight:600}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(60,207,126,.55)}70%{box-shadow:0 0 0 10px rgba(60,207,126,0)}100%{box-shadow:0 0 0 0 rgba(60,207,126,0)}}

/* Hero bridge draws itself in (visible at rest if motion is reduced) */
@media (prefers-reduced-motion:no-preference){
  .hero .bridge path{stroke-dasharray:520;stroke-dashoffset:520;animation:draw 1.6s .2s cubic-bezier(.6,.1,.2,1) forwards}
  .hero .bridge line{opacity:0;animation:rise .5s forwards}
  .hero .bridge line:nth-child(1){animation-delay:.9s}.hero .bridge line:nth-child(2){animation-delay:1s}
  .hero .bridge line:nth-child(3){animation-delay:1.1s}.hero .bridge line:nth-child(4){animation-delay:1.2s}
  .hero .bridge line:nth-child(5){animation-delay:1.3s}.hero .bridge line:nth-child(6){animation-delay:1.4s}
  .hero .bridge line:nth-child(7){animation-delay:1.5s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{to{opacity:.8}}

/* Languages */
.langs{background:var(--surface);border-block:1px solid var(--line)}
.lang-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:2.6rem}
.lang-card{border:1px solid var(--line);border-radius:6px;padding:22px 20px;background:var(--paper);display:grid;gap:10px;align-content:start;min-width:0}
.lang-card.core{background:var(--navy-deep);color:var(--on-navy);border-color:transparent}
.lang-card .pair{display:flex;align-items:center;gap:10px;font:800 1.15rem/1.2 var(--font-display);font-stretch:112%}
.lang-card .pair i{font-style:normal;color:var(--gold-ink);font-weight:500}
.lang-card.core .pair i{color:var(--gold)}
.lang-card .tag{justify-self:start;font:600 .7rem/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;padding:6px 8px;border-radius:999px;background:var(--gold);color:#13212c}
.lang-card p{margin:0;font-size:.94rem;color:var(--muted)}
.lang-card.core p{color:var(--on-navy-muted)}
.lang-note{margin:1.4rem 0 0;color:var(--muted);font-size:.95rem}
@media (max-width:980px){.lang-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.lang-grid{grid-template-columns:1fr}}

/* Sample translations */
.samples .tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:2.2rem}
.samples .tab{font:600 .9rem/1 var(--font-body);padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.samples .tab[aria-selected="true"]{background:var(--navy);border-color:var(--navy);color:var(--on-navy)}
.samples .panel{margin-top:18px;background:var(--surface);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.samples .panel .row{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.samples .panel .row:first-of-type{border-top:0}
.samples .panel p{margin:0;padding:18px 20px;font-size:1rem;line-height:1.6;min-width:0}
.samples .panel p.ar{font-family:var(--font-ar);direction:rtl;text-align:right;background:color-mix(in srgb,var(--gold) 7%,var(--surface));border-inline-start:1px solid var(--line);font-size:1.05rem}
.samples .panel p.en{direction:ltr;text-align:left;font-family:"Public Sans",system-ui,sans-serif}
.samples .panel .note{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.samples .panel .note b{color:var(--ink);font-weight:600}
@media (max-width:640px){.samples .panel .row{grid-template-columns:1fr}.samples .panel p.ar{border-inline-start:0;border-top:1px dashed var(--line)}}

/* Leadership & confidentiality */
.trust{background:var(--navy);color:var(--on-navy)}
.trust .eyebrow{color:var(--gold)}
.trust h2 .hl{color:var(--gold)}
.trust .cols{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,80px);margin-top:2.6rem}
.lead-card{background:var(--navy-deep);border-radius:8px;padding:26px;display:grid;gap:18px;align-content:start;align-self:start;min-width:0}
.lead-card .tools{align-items:flex-start;align-content:flex-start;margin-top:4px}
.lead-card .who{display:flex;gap:16px;align-items:center}
.lead-card .mono{width:64px;height:64px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#13212c;font:800 1.35rem/1 var(--font-display)}
.lead-card .who b{display:block;font:800 1.2rem/1.2 var(--font-display)}
.lead-card .who span{color:var(--on-navy-muted);font-size:.92rem}
.creds{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.creds li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:.97rem;color:var(--on-navy)}
.creds li svg{width:22px;height:22px;color:var(--gold);margin-top:2px}
.creds small{display:block;color:var(--on-navy-muted);font-size:.85rem}
.lead-card .tools span{background:transparent;border-color:rgba(255,255,255,.22);color:var(--on-navy)}
.conf{display:grid;gap:14px;align-content:start}
.conf h3{font-size:1.25rem;font-weight:800;margin:0 0 4px}
.conf .item{display:grid;grid-template-columns:40px 1fr;gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.14)}
.conf .item svg{width:40px;height:40px;padding:9px;border-radius:50%;border:1px solid rgba(255,255,255,.22);color:var(--gold)}
.conf .item b{display:block;margin-bottom:2px}
.conf .item p{margin:0;color:var(--on-navy-muted);font-size:.95rem}
@media (max-width:860px){.trust .cols{grid-template-columns:1fr}}

/* Estimator */
.est{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:clamp(20px,3vw,30px);display:grid;gap:16px;min-width:0}
.est h3{font-size:1.3rem;font-weight:800}
.est .sub{margin:-8px 0 0;color:var(--muted);font-size:.93rem}
.est .drop{border:2px dashed var(--line);border-radius:6px;padding:18px;display:grid;gap:8px;justify-items:center;text-align:center;cursor:pointer;color:var(--muted);font-size:.93rem;transition:border-color .15s,background .15s}
.est .drop:hover,.est .drop.over{border-color:var(--gold);background:color-mix(in srgb,var(--gold) 6%,var(--surface))}
.est .drop b{color:var(--ink)}
.est .drop svg{width:28px;height:28px;color:var(--gold-ink)}
.est .or{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em}
.est .or::before,.est .or::after{content:"";flex:1;height:1px;background:var(--line)}
.est textarea{width:100%;min-height:96px;resize:vertical;font:inherit;font-size:.95rem;padding:11px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.est .opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.est .opts .f:nth-child(2){grid-column:1/-1;order:3}
.est .opts .f select,.est .opts .f input{padding:10px 11px}
.est .result{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.est .result div{background:var(--paper);padding:14px 16px;min-width:0}
.est .result small{display:block;font-size:.78rem;color:var(--muted);margin-bottom:4px}
.est .result b{font:800 1.35rem/1.2 var(--font-display);font-variant-numeric:tabular-nums;color:var(--ink)}
.est .result b.price{color:var(--gold-ink)}
.est .fine{margin:0;font-size:.82rem;color:var(--muted)}
.est .actions{display:flex;flex-wrap:wrap;gap:10px}
.est .actions .btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.est .file{font-size:.88rem;color:var(--ink);margin:0}
.est .file:empty{display:none}
.est.no-rates #est-price{font:600 .95rem/1.35 var(--font-body);color:var(--muted)}
.est .file.err{color:#b3261e}
@media (max-width:640px){.est .opts,.est .result{grid-template-columns:1fr}.est .opts .f:nth-child(2){grid-column:auto}}
.quote .wrap.with-est{grid-template-columns:1fr 1.25fr;align-items:start}
.quote .factors.compact li{padding:16px 18px}

/* FAQ */
.faq-list{margin-top:2.4rem;display:grid;gap:10px;max-width:880px}
.faq-list details{background:var(--surface);border:1px solid var(--line);border-radius:6px}
.faq-list summary{list-style:none;cursor:pointer;padding:18px 52px 18px 20px;font-weight:600;font-size:1.03rem;position:relative}
:root[dir="rtl"] .faq-list summary{padding:18px 20px 18px 52px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";position:absolute;inset-inline-end:20px;top:50%;transform:translateY(-50%);font:500 1.5rem/1 var(--font-display);color:var(--gold-ink);transition:transform .2s}
.faq-list details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-list details p{margin:0;padding:0 20px 18px;color:var(--muted);max-width:70ch}

/* Contact additions */
.form-note{grid-column:1/-1;margin:0;font-size:.85rem;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.form-note svg{width:16px;height:16px;flex:none;margin-top:3px;color:var(--gold-ink)}
.cinfo .wa-link{color:#3ccf7e}
.hp{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}

/* Floating WhatsApp button */
.wa{position:fixed;inset-inline-end:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:55;display:flex;align-items:center;gap:10px;background:#1f9d55;color:#fff;text-decoration:none;font:600 .95rem/1 var(--font-body);padding:12px 16px 12px 13px;border-radius:999px;box-shadow:0 12px 28px -10px rgba(0,0,0,.45);transition:transform .2s,opacity .2s}
:root[lang^="ar"] .wa{font-family:var(--font-ar);padding:12px 13px 12px 16px}
.wa:hover{transform:translateY(-2px)}
.wa svg{width:26px;height:26px;flex:none}
@media (max-width:640px){.wa span{display:none}.wa{padding:13px}}
body:has(.ja-bar:not(.out)) .wa,body:has(.ja-sheet) .wa{opacity:0;pointer-events:none}

/* Service list links on home */
.svc li a{text-decoration:none;border-bottom:1px solid transparent}
.svc li a:hover{border-bottom-color:var(--gold)}
.svc li a::after{content:" →";color:var(--gold-ink)}
:root[dir="rtl"] .svc li a::after{content:" ←"}

/* Subpages: service pages and articles */
.crumbs{font-size:.85rem;color:var(--on-navy-muted);margin:0 0 18px;display:flex;flex-wrap:wrap;gap:6px}
.crumbs a{text-decoration:none;color:var(--on-navy)}
.crumbs a:hover{color:var(--gold)}
.page-hero{background:var(--navy-deep);color:var(--on-navy);padding-block:clamp(48px,7vw,84px)}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.3rem);font-weight:800;max-width:22ch}
.page-hero h1 em{font-style:normal;color:var(--gold)}
.page-hero .sub{color:var(--on-navy-muted);font-size:1.12rem;max-width:62ch;margin:1.1rem 0 1.8rem}
.page-hero .ctas{display:flex;flex-wrap:wrap;gap:12px}
.page-body{padding-block:clamp(48px,7vw,88px)}
.page-body .grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,5vw,64px);align-items:start}
.prose{max-width:70ch}
.prose h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin:2.4rem 0 .8rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;margin:1.6rem 0 .4rem}
.prose p,.prose li{color:var(--ink)}
.prose p{margin:0 0 1rem}
.prose ul,.prose ol{margin:0 0 1.2rem;padding-inline-start:1.3rem;display:grid;gap:6px}
.prose li::marker{color:var(--gold-ink)}
.prose .callout{background:color-mix(in srgb,var(--gold) 9%,var(--surface));border-inline-start:4px solid var(--gold);padding:14px 18px;border-radius:4px;margin:1.4rem 0}
.prose .callout p:last-child{margin:0}
.aside{position:sticky;top:90px;display:grid;gap:14px}
.aside .box{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:22px;display:grid;gap:12px}
.aside .box h3{font-size:1.1rem;font-weight:800}
.aside .box p{margin:0;color:var(--muted);font-size:.93rem}
.aside .box .btn{justify-content:center}
.aside .box .btn.wa-btn{background:#1f9d55;color:#fff}
.aside .box ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:.93rem}
.aside .box ul a{text-decoration:none;color:var(--ink)}
.aside .box ul a:hover{color:var(--gold-ink)}
.aside .box ul a[aria-current]{font-weight:700;color:var(--gold-ink)}
@media (max-width:900px){.page-body .grid{grid-template-columns:1fr}.aside{position:static}}
.page-faq{background:var(--surface);border-top:1px solid var(--line)}
.page-faq .faq-list details{background:var(--paper)}
.cta-band{background:var(--gold);color:#13212c;padding-block:clamp(40px,6vw,64px)}
.cta-band .wrap{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.cta-band h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.cta-band .btn{background:var(--navy-deep);color:#fff}
.article-meta{color:var(--on-navy-muted);font-size:.9rem;margin:0}

/* Extended footer */
footer.site.big{padding-block:48px 26px}
footer.site.big .wrap{display:block}
footer.site .foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;padding-bottom:28px;margin-bottom:22px;border-bottom:1px solid rgba(255,255,255,.1)}
footer.site .foot h4{margin:0 0 12px;font:700 .8rem/1 var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--on-navy)}
:root[lang^="ar"] footer.site .foot h4{letter-spacing:0;font-size:.95rem}
footer.site .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
footer.site .foot a:hover{color:var(--gold)}
footer.site .foot p{margin:0 0 8px;max-width:38ch}
footer.site .bottom{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}
@media (max-width:760px){footer.site .foot{grid-template-columns:1fr}}

/* Count-up numbers keep their width */
.facts b{min-width:2ch}