/* =========================================================================
JELAN CLINIC — HOMEPAGE PREVIEW v2 (Phase 4 prototype)
Design system "Jelan Editorial" v2 — see 03-design/12-design-system.md
Palette: one hue family (≈203°) sampled from the official logo gradient
#8CC7E6 → #00ADEE → #179FE0 → #378CCD
Dependency-free · no third-party fonts · no external requests · no tracking
========================================================================= */
:root{
/* colour — sampled / derived from the logo */
--j-ink:#06283B; --j-ink-soft:#4E6B7C; --j-link:#0873A3;
--j-deep:#0A4A6E; --j-deep-900:#06344E;
--j-sky:#00ADEE; --j-sky-mid:#179FE0; --j-sky-deep:#378CCD;
--j-light:#8CC7E6; --j-pale:#C9E4F2; --j-ice:#E8F6FC; --j-ice-50:#F2FAFD;
--j-neutral:#F4F8FB; --j-white:#FFF; --j-line:#D8E7EF; --j-line-strong:#AECBDC;
--j-error:#B3261E; --j-success:#1B7F4B; --j-warning:#8A5F00; --j-focus:#0873A3;
/* gradients — the logo's own stops */
--grad-logo:linear-gradient(120deg,#8CC7E6 0%,#00ADEE 38%,#179FE0 66%,#378CCD 100%);
--grad-brand:linear-gradient(120deg,#00ADEE 0%,#179FE0 55%,#378CCD 100%);
--grad-ink:linear-gradient(120deg,#075E86 0%,#0A86BC 55%,#0A7FB5 100%); /* AA-safe on light */
--grad-ice:linear-gradient(180deg,#F2FAFD 0%,#E8F6FC 100%);
--grad-deep:linear-gradient(135deg,#0A4A6E 0%,#06344E 100%);
/* type */
--f-display:Georgia,"Times New Roman",Times,serif;
--f-body:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
--f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
/* space + layout */
--s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
--s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:160px;
--w-max:1440px; --gutter:20px; --radius:2px;
--ribbon-h:34px; --header-h:64px;
/* motion */
--m-fast:150ms; --m-base:250ms; --m-slow:450ms; --m-cinematic:900ms;
--e-out:cubic-bezier(.22,.7,.2,1); --e-inout:cubic-bezier(.4,0,.2,1);
--shadow-float:0 24px 60px -32px rgba(6,52,78,.38);
}
@media (min-width:768px){ :root{ --gutter:32px; --header-h:80px } }
@media (min-width:1200px){ :root{ --gutter:40px; --header-h:88px } }
*,*::before,*::after{ box-sizing:border-box }
[hidden]{ display:none !important }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
margin:0; padding-block-start:var(--ribbon-h);
background:var(--j-neutral); color:var(--j-ink);
font-family:var(--f-body); font-size:1.0625rem; line-height:1.7;
text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ display:block; max-width:100% }
img{ height:auto }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
h1,h2,h3,h4,p,ul,ol,figure{ margin:0 }
ul,ol{ padding:0; list-style:none }
em{ font-family:var(--f-display); font-style:italic; font-weight:400; letter-spacing:-.02em }
::selection{ background:var(--j-sky); color:var(--j-ink) }
:focus-visible{ outline:2px solid var(--j-focus); outline-offset:2px; border-radius:1px }
.section-deep :focus-visible,.hero :focus-visible,.site-footer :focus-visible{ outline-color:#7FD8FF }
.shell{ width:100%; max-width:var(--w-max); margin-inline:auto; padding-inline:var(--gutter) }
.skip-link{ position:fixed; inset-inline-start:var(--s-4); top:-100px; z-index:200; background:var(--j-ink); color:var(--j-white); padding:var(--s-3) var(--s-5); font-size:.9rem }
.skip-link:focus{ top:var(--s-4) }
.muted{ color:var(--j-ink-soft) }
.gate,.gate-inline{ color:var(--j-warning) }
.gate{ font-size:.9rem }
/* ---------- gradient text (with safe fallback) ---------- */
.grad-text{ color:var(--j-link) }
@supports ((-webkit-background-clip:text) or (background-clip:text)){
.grad-text{ background-image:var(--grad-ink); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent }
.hero .grad-text,.section-deep .grad-text{ background-image:var(--grad-brand) }
}
/* ---------- type ---------- */
.kicker{ font-size:.6875rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--j-link); margin-block-end:var(--s-4) }
.display-2{ font-size:clamp(1.95rem,4.4vw,3.8rem); line-height:1.03; letter-spacing:-.03em; font-weight:700; text-wrap:balance }
.statement{ font-size:clamp(1.55rem,3vw,2.6rem); line-height:1.16; letter-spacing:-.025em; font-weight:600; text-wrap:balance }
.section-lede{ font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.65; color:var(--j-ink-soft); max-width:64ch; margin-block-start:var(--s-5) }
.section-deep .section-lede{ color:var(--j-pale) }
.prose{ max-width:62ch; font-size:1.0625rem }
.prose p+p{ margin-block-start:var(--s-4) }
.text-link{ display:inline-flex; gap:var(--s-2); align-items:center; font-weight:600; font-size:.95rem; color:var(--j-link); white-space:nowrap }
.text-link:hover .arw{ transform:translateX(4px) }
.arw{ transition:transform var(--m-fast) var(--e-out); display:inline-block }
/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3); min-height:48px; padding:var(--s-3) var(--s-5); font-size:.9rem; font-weight:700; border:1px solid transparent; border-radius:var(--radius); transition:background var(--m-fast) var(--e-out),color var(--m-fast) var(--e-out),transform var(--m-fast) var(--e-out),border-color var(--m-fast) var(--e-out) }
.btn-lg{ min-height:54px; padding:var(--s-4) var(--s-6); font-size:.95rem }
.btn-primary{ background:var(--j-deep); color:var(--j-white) }
.btn-primary:hover{ background:var(--j-deep-900); transform:translateY(-2px) }
.btn-accent{ background:var(--grad-brand); color:#04222F }
.btn-accent:hover{ transform:translateY(-2px); filter:brightness(1.06) }
.btn-outline{ border-color:var(--j-line-strong); color:var(--j-ink) }
.btn-outline:hover{ border-color:var(--j-deep); background:var(--j-ice) }
.btn-outline-light{ border-color:rgba(255,255,255,.5); color:var(--j-white) }
.btn-outline-light:hover{ border-color:var(--j-sky); color:#9FE4FF; background:rgba(0,173,238,.12) }
/* ---------- ribbon ---------- */
.ribbon{ position:fixed; inset-block-start:0; inset-inline:0; z-index:90; height:var(--ribbon-h); display:flex; align-items:center; gap:var(--s-3); background:var(--grad-deep); color:var(--j-pale); font-size:.75rem; padding-inline:var(--gutter) }
.ribbon strong{ color:var(--j-white); letter-spacing:.14em; text-transform:uppercase; font-size:.66rem; white-space:nowrap }
.ribbon-dot{ width:7px; height:7px; border-radius:50%; background:var(--j-sky); flex:none; animation:pulse 2.4s infinite }
.ribbon-sep{ width:1px; height:14px; background:rgba(255,255,255,.28); flex:none }
.ribbon-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0 }
.ribbon-btn{ margin-inline-start:auto; flex:none; border:1px solid rgba(255,255,255,.32); color:var(--j-white); padding:2px var(--s-3); font-size:.7rem; font-weight:600; border-radius:2px }
.ribbon-btn:hover{ border-color:var(--j-sky); color:#9FE4FF }
kbd{ font-family:var(--f-mono); font-size:.92em; background:rgba(255,255,255,.16); padding:0 4px; border-radius:2px }
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
.thread-progress{ position:fixed; inset-block-start:var(--ribbon-h); inset-inline:0; height:2px; background:rgba(6,40,59,.08); z-index:88 }
.thread-progress span{ display:block; height:100%; width:0; background-image:var(--grad-logo); transition:width 120ms linear }
/* ---------- header ---------- */
.site-header{ position:sticky; inset-block-start:var(--ribbon-h); z-index:80; background:transparent; border-block-end:1px solid transparent; transition:background var(--m-base) var(--e-out),border-color var(--m-base) var(--e-out) }
.site-header.is-solid{ background:rgba(255,255,255,.95); border-color:var(--j-line); backdrop-filter:saturate(150%) blur(10px) }
.header-inner{ display:flex; align-items:center; gap:var(--s-5); height:var(--header-h) }
.brand{ position:relative; display:flex; align-items:center; flex:none }
.brand img{ width:auto; height:calc(var(--header-h) * .6); transition:opacity var(--m-base) var(--e-out) }
.logo-white{ position:absolute; opacity:1 }
.logo-blue{ opacity:0 }
.site-header.is-solid .logo-white{ opacity:0 }
.site-header.is-solid .logo-blue{ opacity:1 }
.primary-nav{ display:none; align-items:center; gap:var(--s-5); margin-inline-start:auto }
.nav-link{ font-size:.86rem; font-weight:600; color:rgba(255,255,255,.9); display:inline-flex; align-items:center; gap:6px; padding-block:var(--s-3) }
.nav-link:hover{ color:var(--j-sky) }
.site-header.is-solid .nav-link{ color:var(--j-ink-soft) }
.site-header.is-solid .nav-link:hover{ color:var(--j-link) }
.chev{ width:6px; height:6px; border-inline-end:1.5px solid currentColor; border-block-end:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px) }
.header-actions{ display:flex; align-items:center; gap:var(--s-4); margin-inline-start:auto }
.primary-nav + .header-actions{ margin-inline-start:0 }
.lang{ display:none; align-items:center; gap:var(--s-1); font-size:.78rem; font-weight:700 }
.lang-current{ color:var(--j-sky); padding-inline:4px }
.lang-btn{ color:rgba(255,255,255,.65); padding-inline:4px }
.site-header.is-solid .lang-btn{ color:var(--j-ink-soft) }
.lang-btn:hover{ color:var(--j-sky) }
.header-cta{ display:none }
.burger{ display:inline-flex; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center }
.burger span{ display:block; width:20px; height:1.5px; background:var(--j-white); transition:background var(--m-base) }
.site-header.is-solid .burger span{ background:var(--j-ink) }
.mega{ position:absolute; inset-inline:0; inset-block-start:100%; background:var(--j-white); border-block-end:1px solid var(--j-line); box-shadow:var(--shadow-float) }
.mega-inner{ max-width:var(--w-max); margin-inline:auto; padding:var(--s-8) var(--gutter); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s-9) }
.mega-kicker{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--j-ink-soft); font-weight:700; margin-block-end:var(--s-4) }
.mega-col ul{ display:grid; gap:var(--s-2) }
.mega-col a{ font-size:1.02rem; font-weight:600 }
.mega-col a:hover{ color:var(--j-link) }
.mega-sub a{ font-size:.92rem; font-weight:500; color:var(--j-ink-soft) }
.mega-note{ margin-block-start:var(--s-5); font-size:.85rem; color:var(--j-ink-soft); max-width:34ch }
.mega-col-cta{ border-inline-start:1px solid var(--j-line); padding-inline-start:var(--s-8) }
.mega-lede{ font-family:var(--f-display); font-style:italic; font-size:1.3rem; line-height:1.3; margin-block-end:var(--s-5) }
.has-panel{ position:static }
.drawer{ position:fixed; inset:0; z-index:85; background:var(--grad-deep); color:var(--j-white); padding:calc(var(--ribbon-h) + var(--s-9)) var(--gutter) var(--s-9); overflow-y:auto }
.drawer nav{ display:grid; gap:var(--s-2); margin-block-end:var(--s-8) }
.drawer nav a{ font-size:clamp(1.6rem,7vw,2.2rem); font-weight:600; letter-spacing:-.02em; padding-block:var(--s-2); border-block-end:1px solid rgba(255,255,255,.12) }
.drawer-cta{ width:100% }
.drawer-langs{ display:flex; gap:var(--s-4); margin-block-start:var(--s-7); font-weight:700 }
.drawer-langs span{ color:var(--j-sky) }
.drawer-langs .lang-btn{ color:rgba(255,255,255,.7) }
/* ---------- section rail (desktop) ---------- */
.section-rail{ display:none }
@media (min-width:1280px){
.section-rail{ display:block; position:fixed; inset-inline-end:18px; top:50%; transform:translateY(-50%); z-index:60 }
.section-rail ol{ display:grid; gap:2px }
.section-rail a{ display:flex; align-items:center; gap:var(--s-3); justify-content:flex-end; padding:4px 0; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--j-ink-soft); opacity:.55; transition:opacity var(--m-base),color var(--m-base) }
.section-rail a span{ font-family:var(--f-mono); font-size:.62rem }
.section-rail a i{ font-style:normal; max-width:0; overflow:hidden; white-space:nowrap; transition:max-width var(--m-base) var(--e-out) }
.section-rail a::after{ content:""; width:14px; height:2px; background:var(--j-line-strong); transition:width var(--m-base) var(--e-out),background var(--m-base) }
.section-rail a:hover,.section-rail a:focus-visible{ opacity:1 }
.section-rail a:hover i,.section-rail a:focus-visible i{ max-width:120px }
.section-rail a.is-current{ opacity:1; color:var(--j-ink) }
.section-rail a.is-current::after{ width:30px; background-image:var(--grad-brand) }
.section-rail a.is-current i{ max-width:120px }
.section-rail.on-dark a{ color:var(--j-pale) }
.section-rail.on-dark a.is-current{ color:var(--j-white) }
}
/* ---------- hero ---------- */
.hero{ position:relative; min-height:calc(100svh - var(--ribbon-h)); display:flex; align-items:flex-end; overflow:hidden; background:var(--j-deep-900) }
.hero-media{ position:absolute; inset:0; overflow:hidden }
.hero-media img{ width:100%; height:100%; object-fit:cover; transform:translate3d(0,var(--py,0px),0) scale(1.06); transition:opacity var(--m-slow) var(--e-out) }
.hero-media.is-swapping img{ opacity:0 }
.hero-glow{ position:absolute; inset:auto -10% -35% -10%; height:58%; background:radial-gradient(50% 60% at 50% 50%,rgba(0,173,238,.22),transparent 70%); animation:drift 14s ease-in-out infinite alternate }
@keyframes drift{ from{ transform:translate3d(-3%,0,0) } to{ transform:translate3d(3%,-4%,0) } }
.hero-scrim{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,52,78,.62) 0%,rgba(6,52,78,.28) 38%,rgba(6,52,78,.88) 100%),linear-gradient(90deg,rgba(6,52,78,.72) 0%,rgba(6,52,78,.12) 62%,rgba(6,52,78,.35) 100%) }
.hero-inner{ position:relative; padding-block:var(--s-9) var(--s-7); color:var(--j-white); width:100% }
.hero .eyebrow{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:#9FE4FF; font-weight:700; margin-block-end:var(--s-5) }
.hero-title{ font-size:clamp(2.7rem,7.6vw,6.3rem); line-height:.93; letter-spacing:-.04em; font-weight:700 }
.hero-title .line{ display:block; overflow:hidden }
.hero-title .mask{ display:block; transform:translateY(104%); transition:transform var(--m-cinematic) var(--e-out) }
body.is-ready .hero-title .mask{ transform:translateY(0) }
.hero-title [data-delay="140"]{ transition-delay:140ms }
.hero-title em{ font-size:1em }
.hero-lede{ max-width:56ch; margin-block-start:var(--s-6); font-size:clamp(1.05rem,1.7vw,1.3rem); line-height:1.6; color:#DCEDF4 }
.hero-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-block-start:var(--s-7) }
.hero-note{ margin-block-start:var(--s-5); font-size:.85rem; color:var(--j-pale); max-width:52ch }
.hero-switch{ display:flex; flex-wrap:wrap; gap:var(--s-5); margin-block-start:var(--s-7); padding-block-start:var(--s-5); border-block-start:1px solid rgba(255,255,255,.22) }
.hero-dot{ display:grid; gap:2px; text-align:start; padding-block-end:6px; border-block-end:2px solid transparent; color:rgba(255,255,255,.78); transition:color var(--m-base),border-color var(--m-base) }
.hero-dot .dot-no{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em }
.hero-dot .dot-label{ font-size:.82rem; font-weight:600 }
.hero-dot:hover{ color:var(--j-white) }
.hero-dot.is-active{ color:var(--j-white); border-image:var(--grad-brand) 1 }
.hero-dot.is-active{ border-block-end-color:var(--j-sky) }
.hero-trust{ display:grid; gap:var(--s-2); margin-block-start:var(--s-7); font-size:.8rem; color:var(--j-pale) }
.hero-trust li{ display:flex; gap:var(--s-3); align-items:baseline }
.hero-trust li::before{ content:""; width:16px; height:2px; background-image:var(--grad-brand); flex:none; transform:translateY(-4px) }
.scroll-cue{ display:inline-flex; gap:var(--s-2); align-items:center; margin-block-start:var(--s-7); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--j-pale) }
.scroll-cue span{ animation:nudge 2.2s infinite }
@keyframes nudge{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(4px) } }
.thread-draw{ position:absolute; inset-inline-start:50%; inset-block-start:0; width:1px; height:0; background-image:linear-gradient(180deg,transparent,var(--j-sky)); transition:height 1.6s var(--e-out) .3s }
body.is-ready .thread-draw{ height:var(--s-9) }
/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity var(--m-slow) var(--e-out),transform var(--m-slow) var(--e-out) }
.reveal.in{ opacity:1; transform:none }
[data-delay="60"]{ transition-delay:60ms } [data-delay="80"]{ transition-delay:80ms }
[data-delay="120"]{ transition-delay:120ms } [data-delay="160"]{ transition-delay:160ms }
[data-delay="200"]{ transition-delay:200ms } [data-delay="240"]{ transition-delay:240ms }
/* ---------- sections ---------- */
.section{ padding-block:var(--s-9) }
.section-neutral{ background:var(--j-neutral) }
.section-ice{ background:var(--j-ice) }
.section-ice-50{ background:var(--j-ice-50) }
.section-white{ background:var(--j-white) }
.section-deep{ background:var(--grad-deep); color:var(--j-white) }
.section-num{ display:flex; align-items:center; gap:var(--s-3); font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; font-weight:700; color:var(--j-ink-soft); margin-block-end:var(--s-6) }
.section-num span{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.1em; color:#fff; background-image:var(--grad-brand); padding:3px 7px; border-radius:2px }
.section-num::after{ content:""; flex:1; height:1px; background:var(--j-line) }
.section-deep .section-num{ color:var(--j-pale) }
.section-deep .section-num::after{ background:rgba(255,255,255,.22) }
.section-head{ max-width:78ch; margin-block-end:var(--s-8) }
.section-head.row{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-5); max-width:none }
.section-head.row > div{ max-width:64ch }
.split{ display:grid; gap:var(--s-8) }
.facts{ display:grid; gap:0 }
.facts li{ border-block-start:1px solid var(--j-line); padding-block:var(--s-4) }
.facts span{ display:block; font-weight:700; font-size:1rem }
.facts small{ color:var(--j-ink-soft); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase }
.mark-watermark{ width:120px; opacity:.9; margin-block-start:var(--s-7) }
.split-main .prose{ margin-block-start:var(--s-6) }
.numbered{ display:grid; gap:0; margin-block-start:var(--s-6) }
.numbered li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-5); padding-block:var(--s-6); border-block-start:1px solid var(--j-line) }
.numbered li:last-child{ border-block-end:1px solid var(--j-line) }
.numbered .num{ font-family:var(--f-mono); font-size:.84rem; color:var(--j-link); padding-block-start:6px }
.numbered h3{ font-size:clamp(1.12rem,2vw,1.5rem); letter-spacing:-.02em; font-weight:600; line-height:1.25 }
.numbered p{ margin-block-start:var(--s-2); color:var(--j-ink-soft); font-size:.96rem; max-width:62ch }
/* ---------- world band ---------- */
.world-grid{ display:grid; gap:var(--s-8); align-items:center }
.world-list{ display:grid; gap:var(--s-4); margin-block-start:var(--s-7); border-block-start:1px solid var(--j-line); padding-block-start:var(--s-5) }
.world-list li{ display:grid; grid-template-columns:minmax(120px,auto) 1fr; gap:var(--s-4); font-size:.95rem }
.world-list b{ color:var(--j-link); font-weight:700 }
.world-list span{ color:var(--j-ink-soft) }
.world-map{ background:radial-gradient(circle at 76% 60%,rgba(0,173,238,.12),transparent 62%) }
.world-map svg{ width:100%; height:auto; overflow:visible }
.arc{ fill:none; stroke:url(#arcGrad); stroke-width:1.25; stroke-dasharray:6 6; stroke-dashoffset:640; transition:stroke-dashoffset 2.4s var(--e-out) }
.world-map.in .arc{ stroke-dashoffset:0 }
.world-map.in .a2{ transition-delay:.15s } .world-map.in .a3{ transition-delay:.3s } .world-map.in .a4{ transition-delay:.45s }
.node{ fill:var(--j-sky-deep) } .node-hub{ fill:var(--j-sky) } .node-hub-ring{ fill:none; stroke:rgba(0,173,238,.45) }
.node-label,.node-label-hub{ fill:var(--j-ink-soft); font-family:var(--f-mono); font-size:13px; letter-spacing:.06em }
.node-label-hub{ fill:var(--j-ink); font-size:14px } .node-label.end{ text-anchor:end }
/* ---------- journey ---------- */
.journey-layout{ display:grid; gap:var(--s-7) }
.journey-figure{ position:relative; overflow:hidden; background:var(--j-deep-900); aspect-ratio:4/3 }
.journey-figure img{ width:100%; height:100%; object-fit:cover; transition:opacity var(--m-slow) var(--e-out) }
.journey-figure.is-swapping img{ opacity:0 }
.journey-figure-scrim{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,52,78,.82),rgba(6,52,78,.04) 62%) }
.journey-figure-label{ position:absolute; inset-block-end:var(--s-5); inset-inline-start:var(--s-5); color:var(--j-white); font-family:var(--f-display); font-size:1.55rem }
.journey-counter{ font-family:var(--f-mono); font-size:.9rem; letter-spacing:.16em; color:var(--j-ink-soft); margin-block-start:var(--s-4) }
.journey-counter b{ font-size:1.5rem; background-image:var(--grad-ink); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--j-link) }
.journey-counter i{ font-style:normal; padding-inline:4px }
.journey-stages{ position:relative; display:grid; gap:0; padding-inline-start:var(--s-6) }
.journey-stages::before{ content:""; position:absolute; inset-block:0; inset-inline-start:7px; width:2px; background-image:linear-gradient(180deg,var(--j-sky),var(--j-sky-deep),var(--j-pale)); opacity:.55 }
.journey-stages .stage{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:var(--s-4); width:100%; text-align:start; padding-block:var(--s-4); border-block-start:1px solid var(--j-line) }
.journey-stages li:last-child .stage{ border-block-end:1px solid var(--j-line) }
.journey-stages .stage::before{ content:""; position:absolute; inset-inline-start:calc(-1 * var(--s-6) + 2px); inset-block-start:26px; width:12px; height:12px; border-radius:50%; background:var(--j-neutral); border:1px solid var(--j-line-strong); transition:background var(--m-base) var(--e-out),border-color var(--m-base) var(--e-out),transform var(--m-base) var(--e-out) }
.journey-stages .stage.is-active::before{ background-image:var(--grad-brand); border-color:transparent; transform:scale(1.2) }
.stage-no{ font-family:var(--f-mono); font-size:.78rem; color:var(--j-ink-soft); padding-block-start:4px }
.stage-body strong{ display:block; font-size:1.12rem; font-weight:600; color:var(--j-ink-soft); transition:color var(--m-base) var(--e-out) }
.stage-body span{ display:block; color:var(--j-ink-soft); font-size:.94rem; max-height:0; overflow:hidden; opacity:0; transition:max-height var(--m-base) var(--e-out),opacity var(--m-base) var(--e-out) }
.stage.is-active .stage-body strong{ color:var(--j-ink) }
.stage.is-active .stage-body span{ max-height:9em; opacity:1 }
/* ---------- responsibility / trust ---------- */
.boundary{ display:grid; gap:0; margin-block-start:var(--s-7) }
.boundary li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-4); padding-block:var(--s-3); border-block-start:1px solid rgba(255,255,255,.16); font-size:.98rem }
.boundary li span{ font-weight:700 }
.boundary .do span{ color:#7FE3B4 }
.boundary .dont span{ color:#FFB4AE }
.boundary .dont{ color:var(--j-pale) }
.trust-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16); border-inline-start:2px solid var(--j-sky); padding:var(--s-7) }
.trust-card img{ height:52px; width:auto }
.trust-line{ margin-block-start:var(--s-5); font-size:1.02rem; font-weight:500; color:var(--j-white) }
.trust-sub{ margin-block-start:var(--s-3); font-size:.86rem; color:var(--j-pale) }
.trust-list{ display:grid; gap:var(--s-3); margin-block-start:var(--s-6); padding-block-start:var(--s-5); border-block-start:1px solid rgba(255,255,255,.16); font-size:.92rem; color:var(--j-pale) }
.trust-list li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-3) }
.trust-list li::before{ content:"—"; color:var(--j-sky) }
/* ---------- treatment explorer ---------- */
.explorer{ display:grid; gap:var(--s-6); margin-block-start:var(--s-4) }
.explorer-list{ display:grid; gap:0; border-block-start:1px solid var(--j-line) }
.ex-tab{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--s-4); width:100%; text-align:start; padding:var(--s-4) var(--s-3); border-block-end:1px solid var(--j-line); position:relative; transition:background var(--m-fast) var(--e-out),color var(--m-fast) var(--e-out) }
.ex-tab::before{ content:""; position:absolute; inset-inline-start:0; inset-block:0; width:2px; background-image:var(--grad-brand); transform:scaleY(0); transform-origin:top; transition:transform var(--m-base) var(--e-out) }
.ex-tab:hover{ background:var(--j-ice-50) }
.ex-tab.is-active{ background:var(--j-white) }
.ex-tab.is-active::before{ transform:scaleY(1) }
.ex-no{ font-family:var(--f-mono); font-size:.72rem; color:var(--j-ink-soft) }
.ex-name{ font-size:clamp(1rem,1.6vw,1.22rem); font-weight:600; letter-spacing:-.01em }
.ex-tab.is-active .ex-name{ color:var(--j-link) }
.ex-arrow{ color:var(--j-sky-deep); opacity:0; transform:translateX(-6px); transition:opacity var(--m-base),transform var(--m-base) }
.ex-tab:hover .ex-arrow,.ex-tab.is-active .ex-arrow{ opacity:1; transform:none }
.explorer-panel{ background:var(--j-white); border:1px solid var(--j-line); display:grid }
.ex-figure{ position:relative; overflow:hidden; aspect-ratio:16/10; background:var(--j-deep-900) }
.ex-figure img{ width:100%; height:100%; object-fit:cover; transition:opacity var(--m-base) var(--e-out) }
.ex-figure.is-swapping img{ opacity:0 }
.ex-figure-scrim{ position:absolute; inset:0; background:linear-gradient(0deg,rgba(6,52,78,.8),rgba(6,52,78,.02) 58%) }
.ex-figure-name{ position:absolute; inset-block-end:var(--s-4); inset-inline-start:var(--s-5); color:var(--j-white); font-size:1.3rem; font-weight:600; letter-spacing:-.02em }
.ex-body{ padding:var(--s-6) }
.ex-lede{ font-size:1.02rem; color:var(--j-ink-soft); max-width:56ch }
.ex-chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-block:var(--s-5) }
.ex-chips li{ border:1px solid var(--j-line-strong); background:var(--j-ice-50); border-radius:999px; padding:6px var(--s-4); font-size:.84rem; color:var(--j-ink) }
.ex-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) }
.ex-price-note{ font-size:.82rem; color:var(--j-warning) }
/* ---------- results ---------- */
.filter-row{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-block-end:var(--s-7) }
.chip{ border:1px solid var(--j-line-strong); border-radius:999px; padding:8px var(--s-4); font-size:.84rem; font-weight:600; color:var(--j-ink-soft); transition:background var(--m-fast),color var(--m-fast),border-color var(--m-fast) }
.chip:hover{ border-color:var(--j-deep); color:var(--j-ink) }
.chip.is-active{ background-image:var(--grad-brand); border-color:transparent; color:#04222F }
.results-grid{ display:grid; gap:var(--s-8); align-items:start }
.reveal-frame{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--j-deep-900); touch-action:pan-y; user-select:none }
.frame-side{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:var(--s-2); padding:var(--s-5) }
.frame-before{ background:linear-gradient(150deg,#0E5D86,#06344E 60%) }
.frame-after{ background:linear-gradient(150deg,#1B84B8,#0A4A6E 60%); clip-path:inset(0 0 0 var(--pos,50%)); transition:clip-path 60ms linear }
.frame-tag{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:#9FE4FF }
.frame-side p{ font-size:.84rem; color:var(--j-pale) }
.reveal-handle{ position:absolute; inset-block:0; inset-inline-start:var(--pos,50%); width:44px; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; cursor:grab }
.reveal-handle:active{ cursor:grabbing }
.handle-line{ position:absolute; inset-block:0; width:1px; background:rgba(255,255,255,.9) }
.handle-grip{ position:relative; width:40px; height:40px; border-radius:50%; background:var(--j-white); color:var(--j-deep); display:grid; place-items:center; font-size:.85rem; box-shadow:var(--shadow-float) }
.reveal-caption{ margin-block-start:var(--s-3); font-size:.8rem; color:var(--j-ink-soft) }
.results-lede{ margin-block-start:var(--s-4); color:var(--j-ink-soft); max-width:46ch }
.criteria{ display:grid; gap:0; margin-block:var(--s-6) }
.criteria li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-4); padding-block:var(--s-3); border-block-start:1px solid var(--j-line); font-size:.94rem }
.criteria li span{ font-family:var(--f-mono); font-size:.76rem; color:var(--j-link) }
/* ---------- experience ---------- */
.experience-grid{ display:grid; gap:var(--s-6) }
.exp-card{ background:var(--j-white); border:1px solid var(--j-line); overflow:hidden; transition:transform var(--m-base) var(--e-out),box-shadow var(--m-base) var(--e-out) }
.exp-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-float) }
.exp-card img{ width:100%; aspect-ratio:3/2; object-fit:cover }
.exp-card div{ padding:var(--s-5) }
.exp-card .kicker{ margin-block-end:var(--s-2) }
.exp-card h3{ font-size:1.15rem; letter-spacing:-.01em; margin-block-end:var(--s-2) }
.exp-card p{ color:var(--j-ink-soft); font-size:.93rem }
/* ---------- journal ---------- */
.cat-rail{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-block-end:var(--s-7) }
.cat-rail li{ border:1px solid var(--j-line-strong); background:var(--j-white); border-radius:999px; padding:6px var(--s-4); font-size:.82rem; color:var(--j-ink-soft) }
.article-grid{ display:grid; gap:var(--s-6) }
.art-card{ background:var(--j-white); border:1px solid var(--j-line); padding-block-end:var(--s-5); transition:transform var(--m-base) var(--e-out),box-shadow var(--m-base) var(--e-out) }
.art-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-float) }
.art-media img{ width:100%; aspect-ratio:3/2; object-fit:cover }
.art-meta{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--j-link); padding:var(--s-5) var(--s-5) 0; font-weight:700 }
.art-card h3{ padding:var(--s-3) var(--s-5) 0; font-size:1.2rem; letter-spacing:-.02em; line-height:1.3 }
.art-excerpt{ padding:var(--s-3) var(--s-5) 0; color:var(--j-ink-soft); font-size:.93rem }
.art-gate{ display:inline-block; margin:var(--s-4) var(--s-5) 0; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--j-warning); border:1px dashed var(--j-warning); padding:3px var(--s-2) }
/* ---------- consultation ---------- */
.consult-grid{ display:grid; gap:var(--s-8) }
.next-steps{ display:grid; gap:var(--s-3); margin-block-start:var(--s-6) }
.next-steps li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-4); font-size:.95rem; color:var(--j-ink-soft) }
.next-steps span{ font-family:var(--f-mono); font-size:.78rem; color:var(--j-link) }
.channels-note{ margin-block-start:var(--s-6); font-size:.88rem; color:var(--j-warning) }
.thread-handoff{ display:block; width:2px; height:var(--s-8); background-image:linear-gradient(180deg,var(--j-sky),transparent); margin-block-start:var(--s-7) }
.consult-form,.form-success{ background:var(--j-white); border:1px solid var(--j-line); padding:var(--s-6); box-shadow:var(--shadow-float) }
.field{ display:grid; gap:var(--s-2); margin-block-end:var(--s-5) }
.field label{ font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--j-ink-soft) }
.field input,.field select,.field textarea{ width:100%; min-height:48px; padding:var(--s-3); background:var(--j-ice-50); border:1px solid var(--j-line-strong); border-radius:var(--radius); font:inherit; font-size:1rem; color:var(--j-ink) }
.field textarea{ min-height:110px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ background:var(--j-white); border-color:var(--j-sky); outline:2px solid rgba(0,173,238,.3); outline-offset:0 }
.field .help{ font-size:.82rem; color:var(--j-ink-soft) }
.field.check{ grid-template-columns:auto 1fr; align-items:start; gap:var(--s-3) }
.field.check input{ width:20px; height:20px; min-height:0; margin-block-start:3px }
.field.check label{ font-size:.9rem; font-weight:400; letter-spacing:0; text-transform:none; color:var(--j-ink) }
.field-row{ display:grid; gap:var(--s-5) }
.consult-form .btn{ width:100% }
.error{ color:var(--j-error); font-size:.9rem; margin-block-end:var(--s-4) }
.form-foot{ margin-block-start:var(--s-4); font-size:.82rem; color:var(--j-ink-soft) }
.form-success h3{ font-size:1.4rem; letter-spacing:-.02em; margin-block-end:var(--s-5) }
/* ---------- footer ---------- */
.site-footer{ background:var(--grad-deep); color:var(--j-pale); padding-block:var(--s-9) var(--s-7) }
.footer-grid{ display:grid; gap:var(--s-8) }
.footer-brand img{ height:64px; width:auto }
.footer-brand p{ margin-block-start:var(--s-5); max-width:36ch; font-size:.94rem }
.footer-accred{ color:#9FE4FF; font-size:.88rem }
.footer-col h2{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--j-white); margin-block-end:var(--s-4) }
.footer-col a{ display:block; padding-block:5px; font-size:.94rem }
.footer-col a:hover{ color:var(--j-sky) }
.footer-col .gate{ font-size:.85rem; margin-block-end:var(--s-3) }
.footer-bottom{ margin-block-start:var(--s-9); padding-block-start:var(--s-5); border-block-start:1px solid rgba(255,255,255,.16); display:grid; gap:var(--s-4); font-size:.84rem }
.footer-bottom nav{ display:flex; flex-wrap:wrap; gap:var(--s-5) }
.footer-disclaimer{ color:var(--j-light) }
#year{ font-variant-numeric:tabular-nums }
/* ---------- sticky mobile CTA ---------- */
.sticky-cta{ position:fixed; inset-block-end:0; inset-inline:0; z-index:70; display:flex; gap:var(--s-3); padding:var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom)); background:rgba(255,255,255,.97); border-block-start:1px solid var(--j-line); box-shadow:0 -12px 30px -22px rgba(6,52,78,.5) }
.sticky-cta .btn{ flex:1 }
.sticky-call{ display:grid; place-items:center; min-width:96px; font-size:.85rem; font-weight:700; border:1px solid var(--j-line-strong); border-radius:var(--radius) }
/* ---------- annotation overlay ---------- */
body.annotate [data-annotate]{ position:relative; outline:1px dashed rgba(8,115,163,.5); outline-offset:6px }
body.annotate [data-annotate]::after{ content:attr(data-annotate); display:block; margin-block-start:var(--s-4); font-family:var(--f-mono); font-size:.72rem; line-height:1.6; color:#04536F; background:var(--j-ice); border-inline-start:2px solid var(--j-sky); padding:var(--s-3) var(--s-4); max-width:80ch; white-space:pre-wrap }
body.annotate .gate,body.annotate .gate-inline{ background:#FFF6DC; outline:1px solid var(--j-warning); padding-inline:4px }
.annotation-legend{ position:fixed; inset-block-end:var(--s-5); inset-inline-start:var(--s-5); z-index:95; width:min(440px,calc(100vw - 32px)); background:var(--j-ink); color:#DCE7EB; padding:var(--s-5); font-size:.82rem; line-height:1.6; box-shadow:var(--shadow-float) }
.legend-title{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:#7FD8FF; margin-block-end:var(--s-3) }
.annotation-legend b{ color:var(--j-white) }
.legend-colour{ margin-block-start:var(--s-3); color:var(--j-pale) }
.annotation-legend code{ font-family:var(--f-mono); font-size:.92em; color:#9FE4FF }
.legend-foot{ margin-block-start:var(--s-3); color:#93A9B3 }
.annotation-legend kbd{ background:rgba(255,255,255,.16) }
/* ---------- responsive ---------- */
@media (min-width:600px){
.field-row{ grid-template-columns:1fr 1fr }
.experience-grid{ grid-template-columns:1fr 1fr }
.hero-trust{ grid-template-columns:repeat(3,auto); gap:var(--s-6) }
}
@media (min-width:900px){
.lang{ display:flex }
.header-cta{ display:inline-flex }
.burger{ display:none }
.primary-nav{ display:flex }
.hero-inner{ padding-block:var(--s-11) var(--s-9) }
.split-5-7{ grid-template-columns:5fr 7fr; gap:var(--s-10) }
.split-7-5{ grid-template-columns:7fr 5fr; gap:var(--s-10) }
.world-grid{ grid-template-columns:1fr 1fr; gap:var(--s-10) }
.journey-layout{ grid-template-columns:5fr 6fr; gap:var(--s-10); align-items:start }
.journey-panel{ position:sticky; inset-block-start:calc(var(--ribbon-h) + var(--header-h) + var(--s-6)) }
.explorer{ grid-template-columns:5fr 7fr; gap:var(--s-8); align-items:start }
.explorer-panel{ position:sticky; inset-block-start:calc(var(--ribbon-h) + var(--header-h) + var(--s-6)) }
.results-grid{ grid-template-columns:7fr 5fr; gap:var(--s-10) }
.article-grid{ grid-template-columns:repeat(3,1fr) }
.consult-grid{ grid-template-columns:5fr 6fr; gap:var(--s-10) }
.footer-grid{ grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s-8) }
.footer-bottom{ grid-template-columns:auto 1fr; align-items:center; gap:var(--s-8) }
.sticky-cta{ display:none !important }
.section{ padding-block:var(--s-10) }
}
@media (min-width:1200px){
.section{ padding-block:var(--s-11) }
.experience-grid{ grid-template-columns:repeat(4,1fr) }
}
/* ---------- right-to-left layout demo (content is NOT translated) ---------- */
[dir="rtl"] body{ font-family:"Segoe UI",Tahoma,Arial,sans-serif }
[dir="rtl"] .text-link:hover .arw{ transform:translateX(-4px) }
[dir="rtl"] .ex-arrow{ transform:translateX(6px) }
[dir="rtl"] .hero-title,[dir="rtl"] .display-2,[dir="rtl"] .statement{ letter-spacing:0 }
/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
html{ scroll-behavior:auto }
*,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important }
.reveal{ opacity:1 !important; transform:none !important }
.hero-title .mask{ transform:none !important }
.hero-media img{ transform:none !important }
.thread-draw{ height:var(--s-9) }
.arc{ stroke-dashoffset:0 }
.stage-body span{ max-height:9em; opacity:1 }
}
/* =========================================================================
v3 ADDITIONS — owner corrections (clinic positioning, accreditation band,
medical team, worldwide) and the dynamic upgrades (smart starting point,
two-step form, comparison band).
========================================================================= */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
/* ---------- 03 · accreditation band ---------- */
.trust-band{ display:grid; gap:var(--s-6); align-items:start }
.cert-grid{ display:grid; gap:1px; background:var(--j-line); border:1px solid var(--j-line) }
.cert{ position:relative; background:var(--j-white); padding:var(--s-6) var(--s-5) var(--s-5); display:grid; gap:var(--s-2); align-content:start }
.cert::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background-image:var(--grad-logo) }
.cert-type{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--j-link) }
.cert strong{ font-size:1.06rem; letter-spacing:-.01em }
.cert-gate{ font-size:.8rem; color:var(--j-warning) }
.rating-card{ background:var(--j-white); border:1px solid var(--j-line); border-block-start:3px solid transparent; border-image:var(--grad-brand) 1; padding:var(--s-6) }
.rating-value{ font-size:clamp(1.8rem,3.4vw,2.6rem); font-weight:700; letter-spacing:-.03em; background-image:var(--grad-ink); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--j-link) }
.rating-source{ margin-block-start:var(--s-3); font-size:.9rem; color:var(--j-ink-soft) }
.rating-note{ margin-block-start:var(--s-4); padding-block-start:var(--s-4); border-block-start:1px solid var(--j-line); font-size:.82rem; color:var(--j-warning) }
/* ---------- 04 · comparison band ---------- */
.compare{ display:grid; gap:0; border:1px solid var(--j-line); background:var(--j-white) }
.compare-col{ padding:var(--s-7) var(--s-6) }
.compare-left{ background:var(--j-ice-50); border-block-end:1px solid var(--j-line) }
.compare-col ul{ display:grid; gap:0 }
.compare-col li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); padding-block:var(--s-4); border-block-start:1px solid var(--j-line); font-size:.98rem }
.compare-col li:first-child{ border-block-start:0 }
.compare-left li{ color:var(--j-ink-soft) }
.compare-left li::before{ content:"—"; color:var(--j-line-strong) }
.compare-right li::before{ content:""; width:14px; height:2px; background-image:var(--grad-brand); margin-block-start:.7em }
.compare-right li{ font-weight:500 }
.compare-foot{ margin-block-start:var(--s-5); font-size:.9rem; color:var(--j-ink-soft); max-width:80ch }
/* ---------- 07 · medical team ---------- */
.prose-strong{ margin-block-start:var(--s-4); font-size:1.06rem; font-weight:500; color:var(--j-white) }
.team-grid{ display:grid; gap:1px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.16); margin-block-start:var(--s-8) }
.team-grid li{ background:rgba(255,255,255,.05); padding:var(--s-5); display:grid; gap:var(--s-2); align-content:start }
.team-no{ font-family:var(--f-mono); font-size:.7rem; background-image:var(--grad-brand); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--j-light) }
.team-grid strong{ font-size:1.04rem; letter-spacing:-.01em; color:var(--j-white) }
.team-grid span:last-child{ font-size:.92rem; color:var(--j-pale) }
/* ---------- 08 · starting point router ---------- */
.router{ background:var(--j-white); border:1px solid var(--j-line); padding:var(--s-6); margin-block-end:var(--s-8) }
.router-q{ font-size:1.1rem; font-weight:600; letter-spacing:-.01em; margin-block-end:var(--s-4) }
.router-chips{ display:flex; flex-wrap:wrap; gap:var(--s-2) }
.rchip{ border:1px solid var(--j-line-strong); background:var(--j-ice-50); border-radius:999px; padding:9px var(--s-5); font-size:.88rem; font-weight:600; color:var(--j-ink-soft); transition:background var(--m-fast),color var(--m-fast),border-color var(--m-fast),transform var(--m-fast) }
.rchip:hover{ border-color:var(--j-deep); color:var(--j-ink); transform:translateY(-1px) }
.rchip.is-active{ background-image:var(--grad-brand); border-color:transparent; color:#04222F }
.router-result{ margin-block-start:var(--s-5); padding-inline-start:var(--s-4); border-inline-start:2px solid transparent; border-image:var(--grad-brand) 1; display:grid; gap:var(--s-3) }
.router-pick{ font-size:1.05rem; font-weight:600 }
.router-next{ font-size:.95rem; color:var(--j-ink-soft); max-width:60ch }
.router-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) }
.router-note{ font-size:.82rem; color:var(--j-ink-soft) }
/* ---------- 12 · two-step form ---------- */
.form-progress{ display:flex; align-items:center; gap:var(--s-4); margin-block-end:var(--s-6) }
.fp-bar{ flex:1; height:3px; background:var(--j-line); position:relative; overflow:hidden }
.fp-bar i{ display:block; height:100%; width:50%; background-image:var(--grad-brand); transition:width var(--m-base) var(--e-out) }
.fp-label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--j-ink-soft); white-space:nowrap }
.form-step{ border:0; padding:0; margin:0; min-width:0 }
.form-step[hidden]{ display:none !important }
.form-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3) }
.form-actions .btn{ flex:1; min-width:140px }
.summary{ background:var(--j-ice-50); border:1px solid var(--j-line); padding:var(--s-5); margin-block-end:var(--s-5) }
.summary-title{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--j-link); margin-block-end:var(--s-3) }
.summary dl{ display:grid; gap:var(--s-2); margin:0 }
.summary dt,.summary dd{ display:inline; font-size:.9rem; margin:0 }
.summary dt{ color:var(--j-ink-soft) }
.summary dd{ font-weight:600 }
.summary .summary-empty{ color:var(--j-ink-soft); font-weight:400 }
.summary .summary-row{ display:grid; grid-template-columns:minmax(90px,auto) 1fr; gap:var(--s-3) }
/* ---------- responsive (v3) ---------- */
@media (min-width:600px){
.cert-grid{ grid-template-columns:1fr 1fr }
.team-grid{ grid-template-columns:1fr 1fr }
}
@media (min-width:900px){
.trust-band{ grid-template-columns:7fr 5fr; gap:var(--s-8) }
.compare{ grid-template-columns:1fr 1fr }
.compare-left{ border-block-end:0; border-inline-end:1px solid var(--j-line) }
}
/* =========================================================================
v4 ADDITIONS — full master brief: 18 sections. Trust bar, treatment grid,
six-step consultation, international services, VIP experience, stay,
transport, six-step journey, reviews, accreditations, promotions, final CTA.
========================================================================= */
/* ---------- 02 · trust bar ---------- */
.trustbar-section{ padding-block:var(--s-8); background:var(--j-white); border-block-end:1px solid var(--j-line) }
.trust-cards{ display:grid; gap:1px; background:var(--j-line); border:1px solid var(--j-line) }
.trust-card-item{ background:var(--j-white); padding:var(--s-6) var(--s-5); display:grid; gap:var(--s-2); align-content:start }
.counter,.counter-text{ font-size:clamp(1.5rem,3.2vw,2.3rem); font-weight:700; letter-spacing:-.035em; line-height:1; font-variant-numeric:tabular-nums }
.counter{ background-image:var(--grad-ink); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--j-link) }
.trust-card-item strong{ font-size:1rem; letter-spacing:-.01em }
.trust-card-item p{ font-size:.9rem; color:var(--j-ink-soft) }
/* ---------- 03 · about figure ---------- */
.about-figure{ overflow:hidden; border:1px solid var(--j-line); margin-block-end:var(--s-6) }
.about-figure img{ width:100%; aspect-ratio:4/3; object-fit:cover }
/* ---------- 04 · team aside ---------- */
.team-aside{ display:grid; gap:var(--s-5); align-content:start }
.team-figure{ position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.18) }
.team-figure img{ width:100%; aspect-ratio:4/3; object-fit:cover }
.figure-note{ position:absolute; inset-block-end:0; inset-inline:0; background:rgba(6,52,78,.82); color:var(--j-pale); font-size:.72rem; padding:6px var(--s-3); letter-spacing:.04em }
.trust-list-dark li::before{ color:var(--j-sky) }
/* ---------- 05 · treatment grid ---------- */
.treatment-grid{ display:grid; gap:1px; background:var(--j-line); border:1px solid var(--j-line) }
.t-card{ background:var(--j-white); display:grid; grid-template-rows:auto 1fr }
.t-media{ position:relative; overflow:hidden; background:var(--j-deep-900) }
.t-media img{ width:100%; aspect-ratio:16/10; object-fit:cover; transition:transform var(--m-slow) var(--e-out) }
.t-card:hover .t-media img{ transform:scale(1.04) }
.t-no{ position:absolute; inset-block-start:var(--s-3); inset-inline-start:var(--s-3); font-family:var(--f-mono); font-size:.72rem; background:rgba(6,52,78,.72); color:var(--j-white); padding:3px 8px; letter-spacing:.1em }
.t-body{ padding:var(--s-5); display:grid; gap:var(--s-3); align-content:start }
.t-body h3{ font-size:1.15rem; letter-spacing:-.02em }
.t-body p{ font-size:.92rem; color:var(--j-ink-soft) }
.t-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); margin-block-start:auto; padding-block-start:var(--s-3) }
.link-cta{ font-size:.84rem; font-weight:600; color:var(--j-ink); border-block-end:1px solid var(--j-line-strong); padding-block-end:2px }
.link-cta:hover{ color:var(--j-link); border-color:var(--j-link) }
/* ---------- 07 · international ---------- */
.region-chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); margin-block-start:var(--s-6) }
.region-chips li{ border:1px solid var(--j-line-strong); background:var(--j-white); border-radius:999px; padding:6px var(--s-4); font-size:.84rem; color:var(--j-ink-soft) }
.world-note{ margin-block-start:var(--s-5); font-size:.9rem; font-weight:600; color:var(--j-link) }
/* ---------- 08 · patient services ---------- */
.service-grid{ display:grid; gap:1px; background:var(--j-line); border:1px solid var(--j-line) }
.service-card{ background:var(--j-white); padding:var(--s-6) var(--s-5); display:grid; gap:var(--s-3); align-content:start; transition:background var(--m-base) var(--e-out) }
.service-card:hover{ background:var(--j-ice-50) }
.service-ico{ font-family:var(--f-mono); font-size:.72rem; color:var(--j-link); letter-spacing:.12em }
.service-card h3{ font-size:1.08rem; letter-spacing:-.01em }
.service-card p{ font-size:.92rem; color:var(--j-ink-soft) }
/* ---------- 09 · VIP experience ---------- */
.vip-grid{ display:grid; gap:var(--s-8) }
.vip-list{ display:grid; gap:0; margin-block-start:var(--s-6) }
.vip-list li{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-3); padding-block:var(--s-3); border-block-start:1px solid rgba(255,255,255,.16); font-size:.96rem; color:var(--j-pale) }
.vip-list li::before{ content:""; width:14px; height:2px; background-image:var(--grad-brand); margin-block-start:.75em }
.vip-figure{ position:relative; overflow:hidden; border:1px solid rgba(255,255,255,.18) }
.vip-figure img{ width:100%; aspect-ratio:4/3; object-fit:cover }
/* ---------- 10 · your stay ---------- */
.hotel-grid{ display:grid; gap:var(--s-6) }
.hotel-card{ background:var(--j-white); border:1px solid var(--j-line) }
.hotel-figure{ overflow:hidden }
.hotel-figure img{ width:100%; aspect-ratio:3/2; object-fit:cover }
.hotel-body{ padding:var(--s-5) }
.hotel-body h3{ font-size:1.1rem; margin-block-end:var(--s-4) }
.hotel-body dl{ display:grid; grid-template-columns:auto 1fr; gap:var(--s-2) var(--s-4); font-size:.88rem; margin:0 }
.hotel-body dt{ color:var(--j-ink-soft) }
.hotel-body dd{ margin:0; font-weight:600 }
.slot-empty{ color:var(--j-warning); font-weight:500 }
.section-foot{ margin-block-start:var(--s-6); font-size:.88rem; color:var(--j-ink-soft) }
.slot-figure{ position:relative; display:grid; place-content:center; gap:6px; text-align:center; padding:var(--s-6); aspect-ratio:3/2; background-image:var(--grad-ice); border:1px dashed var(--j-line-strong); color:var(--j-deep) }
.slot-figure.tall{ aspect-ratio:16/10 }
.slot-figure span{ font-size:.92rem; font-weight:600 }
.slot-figure small{ font-size:.74rem; color:var(--j-ink-soft); max-width:34ch }
/* ---------- 11 · transport ---------- */
.transport-grid{ display:grid; gap:var(--s-8) }
.route-list{ display:grid; gap:0; border:1px solid var(--j-line); background:var(--j-white) }
.route-list li{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:var(--s-4); padding:var(--s-5); border-block-end:1px solid var(--j-line); font-size:1rem; font-weight:600 }
.route-list li:last-child{ border-block-end:0 }
.r-from{ text-align:end; color:var(--j-ink) }
.r-arrow{ color:var(--j-sky-deep) }
.r-to{ color:var(--j-link) }
.vehicle-grid{ display:grid; gap:var(--s-6) }
.vehicle-card{ background:var(--j-white); border:1px solid var(--j-line); padding:var(--s-5) }
.vehicle-card h3{ font-size:1.1rem; margin-block:var(--s-4) var(--s-2) }
.vehicle-card p{ font-size:.92rem; color:var(--j-ink-soft) }
.vehicle-note{ display:block; margin-block-start:var(--s-3); font-size:.8rem; color:var(--j-warning) }
/* ---------- 12 · journey (six steps) ---------- */
.journey-counter b{ font-variant-numeric:tabular-nums }
/* ---------- 14 · reviews ---------- */
.review-grid{ display:grid; gap:var(--s-6) }
.review-card{ background:var(--j-white); border:1px solid var(--j-line); padding:var(--s-5); display:grid; gap:var(--s-4); align-content:start }
.review-slot{ border-style:dashed; border-color:var(--j-line-strong) }
.review-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-3) }
.review-stars{ color:var(--j-sky-deep); letter-spacing:.12em }
.review-source{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--j-ink-soft) }
.review-body{ font-size:.95rem; color:var(--j-ink-soft) }
.review-card footer{ display:grid; gap:2px; padding-block-start:var(--s-3); border-block-start:1px solid var(--j-line) }
.review-name{ font-weight:600; font-size:.92rem }
.review-meta{ font-size:.8rem; color:var(--j-ink-soft) }
.review-integration{ margin-block-start:var(--s-7); background:var(--j-ice); border-inline-start:2px solid var(--j-sky); padding:var(--s-5); font-size:.9rem }
.review-integration p:last-child{ margin:0; color:var(--j-ink-soft) }
/* ---------- 15 · accreditations ---------- */
.cert-dl{ display:grid; grid-template-columns:auto 1fr; gap:4px var(--s-4); font-size:.82rem; margin:var(--s-3) 0 0 }
.cert-dl dt{ color:var(--j-ink-soft) }
.cert-dl dd{ margin:0; font-weight:600 }
/* ---------- 17 · promotions ---------- */
.promo-grid{ display:grid; gap:var(--s-6) }
.promo-card{ background:var(--j-white); border:1px solid var(--j-line); display:grid }
.promo-body{ padding:var(--s-5); display:grid; gap:var(--s-3); align-content:start }
.promo-body h3{ font-size:1.15rem; letter-spacing:-.02em }
.promo-price{ display:grid; gap:2px; font-size:.9rem }
.promo-includes{ display:grid; gap:2px; font-size:.88rem; color:var(--j-ink-soft) }
.promo-includes strong{ color:var(--j-ink); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase }
.promo-validity{ font-size:.82rem; color:var(--j-warning) }
.promo-body .btn{ margin-block-start:var(--s-3) }
/* ---------- 18 · final CTA + contact ---------- */
.final-grid{ display:grid; gap:var(--s-8); align-items:start }
.final-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-block-start:var(--s-7) }
.contact-list{ display:grid; gap:0; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.04) }
.contact-list li{ display:grid; gap:2px; padding:var(--s-4) var(--s-5); border-block-end:1px solid rgba(255,255,255,.14) }
.contact-list li:last-child{ border-block-end:0 }
.c-label{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#9FE4FF }
/* ---------- six-step form ---------- */
.form-step legend{ font-size:1.05rem; font-weight:600; letter-spacing:-.01em; margin-block-end:var(--s-5); padding:0 }
.form-nav{ display:flex; flex-wrap:wrap; gap:var(--s-3); margin-block-start:var(--s-4) }
.form-nav .btn{ flex:1; min-width:132px }
.upload-list{ display:grid; gap:var(--s-2); margin-block:var(--s-3) }
.upload-list li{ display:flex; justify-content:space-between; gap:var(--s-3); background:var(--j-ice-50); border:1px solid var(--j-line); padding:8px var(--s-3); font-size:.84rem }
.upload-list .u-size{ color:var(--j-ink-soft); font-variant-numeric:tabular-nums }
/* ---------- floating WhatsApp ---------- */
.wa-float{ position:fixed; inset-block-end:84px; inset-inline-end:16px; z-index:75; display:inline-flex; align-items:center; gap:var(--s-3); background:var(--j-white); color:var(--j-ink); border:1px solid var(--j-line-strong); border-block-start:3px solid transparent; border-radius:999px; padding:10px 16px; font-size:.82rem; font-weight:600; box-shadow:var(--shadow-float) }
.wa-float span[aria-hidden]{ color:var(--j-sky); font-size:1.05rem }
.wa-float:hover{ border-color:var(--j-sky) }
@media (min-width:900px){ .wa-float{ inset-block-end:24px; inset-inline-end:24px } }
/* ---------- responsive (v4) ---------- */
@media (min-width:600px){
.trust-cards{ grid-template-columns:1fr 1fr }
.treatment-grid{ grid-template-columns:1fr 1fr }
.service-grid{ grid-template-columns:1fr 1fr }
.review-grid{ grid-template-columns:1fr 1fr }
.hotel-grid{ grid-template-columns:1fr 1fr }
.cert-grid-4{ grid-template-columns:1fr 1fr }
.promo-grid{ grid-template-columns:1fr 1fr }
.vehicle-grid{ grid-template-columns:1fr 1fr }
}
@media (min-width:900px){
.trust-cards{ grid-template-columns:repeat(4,1fr) }
.treatment-grid{ grid-template-columns:repeat(3,1fr) }
.service-grid{ grid-template-columns:repeat(3,1fr) }
.review-grid{ grid-template-columns:repeat(3,1fr) }
.hotel-grid{ grid-template-columns:repeat(3,1fr) }
.cert-grid-4{ grid-template-columns:repeat(4,1fr) }
.vip-grid{ grid-template-columns:7fr 5fr; gap:var(--s-10); align-items:center }
.transport-grid{ grid-template-columns:5fr 7fr; gap:var(--s-8); align-items:start }
.final-grid{ grid-template-columns:6fr 5fr; gap:var(--s-10) }
}
@media (max-width:899px){
.wa-text{ display:none }
.wa-float{ padding:14px; inset-block-end:78px }
}
/* =========================================================================
v4.1 — everything the owner stated, applied: confirmed accreditation states,
real contact channels (from the current website), live Google rating block,
FAQ component, consent notice, planned locales.
========================================================================= */
.cert-state{ margin-block-start:var(--s-2); font-size:.82rem; font-weight:700; color:var(--j-success) }
.c-note{ font-style:normal; color:var(--j-ink-soft); font-size:.78rem; display:block }
/* live rating block */
.rating-live{ display:flex; gap:var(--s-5); align-items:flex-start; background:var(--j-white); border:1px solid var(--j-line); border-inline-start:3px solid transparent; border-image:var(--grad-brand) 1; padding:var(--s-5); margin-block-end:var(--s-7) }
.rating-stars{ color:var(--j-sky-deep); font-size:1.35rem; letter-spacing:.14em; line-height:1 }
.rating-live-title{ font-weight:700; font-size:1.02rem }
.rating-live-note{ margin-block-start:var(--s-2); font-size:.88rem; color:var(--j-ink-soft); max-width:70ch }
/* FAQ (native details/summary — no JS required) */
.faq-section{ padding-block:var(--s-9) }
.faq-list{ display:grid; gap:0; border-block-start:1px solid var(--j-line) }
.faq{ border-block-end:1px solid var(--j-line); background:transparent }
.faq summary{ cursor:pointer; padding:var(--s-5) 0; font-size:clamp(1.02rem,1.8vw,1.22rem); font-weight:600; letter-spacing:-.01em; display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); list-style:none }
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{ content:"+"; font-family:var(--f-mono); color:var(--j-sky-deep); font-size:1.1rem; flex:none }
.faq[open] summary::after{ content:"–" }
.faq summary:hover{ color:var(--j-link) }
.faq p{ padding-block-end:var(--s-5); max-width:78ch; color:var(--j-ink-soft); font-size:.96rem }
/* consent notice */
.consent{ position:fixed; inset-block-end:0; inset-inline:0; z-index:110; background:rgba(255,255,255,.98); border-block-start:1px solid var(--j-line-strong); box-shadow:0 -18px 40px -30px rgba(6,52,78,.55) }
.consent-inner{ max-width:var(--w-max); margin-inline:auto; padding:var(--s-5) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom)); display:grid; gap:var(--s-4) }
.consent p{ font-size:.88rem; color:var(--j-ink-soft); max-width:90ch }
.consent strong{ color:var(--j-ink) }
.consent-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-3) }
.consent-actions .btn{ min-height:44px }
.consent-link{ font-size:.86rem; color:var(--j-link); text-decoration:underline }
@media (min-width:900px){
.consent-inner{ grid-template-columns:1fr auto; align-items:center; gap:var(--s-8) }
}
.lang-btn.is-planned{ opacity:.4; cursor:not-allowed }
/* =========================================================================
v4.2 — HERO / HEADER / SECTION RAIL FIX
الأعراض التي أصلحها هذا القسم (من ملاحظة المالك على اللقطة):
1) الهيدر كان sticky فوق خلفية فاتحة، فاللوجو الأبيض والنافبار الأبيض اختفيا.
الحل: الهيدر صار overlay فوق صورة الهيرو (fixed)، ويبيضّ بعد تجاوز الهيرو.
2) اللوجو المربّع (شعار فوق كلمة) كان يصغر كثيراً في الهيدر.
الحل: فُصلت الكلمة عن الشعار ووُضعا أفقياً (lockup) — أوضح وأفخم.
3) شريط الأقسام كان باهتاً فوق الصورة.
الحل: خلفية زجاجية خفيفة تضمن التباين على أي خلفية، فاتحة أو غامقة.
========================================================================= */
/* 1 · الهيدر overlay */
.site-header{ position:fixed; inset-inline:0; inset-block-start:var(--ribbon-h) }
.hero-inner{ padding-block:calc(var(--header-h) + var(--s-6)) var(--s-6) }
.thread-progress{ inset-block-start:calc(var(--ribbon-h) + var(--header-h)) }
/* 2 · اللوجو الأفقي */
.brand{ position:relative; display:block; height:var(--header-h); min-width:150px }
.lockup,.footer-lockup{ display:flex; align-items:center; gap:9px }
.lockup{ position:absolute; inset-block-start:50%; transform:translateY(-50%); transition:opacity var(--m-base) var(--e-out) }
.lockup-blue{ opacity:0 }
.lockup-white{ opacity:1 }
.site-header.is-solid .lockup-blue{ opacity:1 }
.site-header.is-solid .lockup-white{ opacity:0 }
.lk-mark{ height:40px; width:auto }
.lk-word{ height:17px; width:auto }
.footer-lockup .lk-mark{ height:52px }
.footer-lockup .lk-word{ height:23px }
@media (min-width:768px){ .lk-mark{ height:44px } .lk-word{ height:19px } }
/* 3 · تركيب الهيرو */
.hero-title{ font-size:clamp(2.35rem,5.6vw,5.1rem); line-height:.95 }
.hero h1 .line+.line{ margin-block-start:2px }
.hero-lede{ margin-block-start:var(--s-5); max-width:52ch }
.hero-actions{ margin-block-start:var(--s-6) }
.hero-credentials{ margin-block-start:var(--s-5); font-size:.78rem; letter-spacing:.05em; color:var(--j-pale); max-width:80ch }
.hero-foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:var(--s-5); margin-block-start:var(--s-7); padding-block-start:var(--s-5); border-block-start:1px solid rgba(255,255,255,.2) }
.hero-switch{ margin:0; padding:0; border:0; gap:var(--s-6) }
.hero-foot .scroll-cue{ margin-block-start:0 }
.hero-media img{ object-position:62% 32% }
@media (max-width:899px){
.hero-media img{ object-position:68% 26% }
.hero-credentials{ font-size:.72rem }
}
/* 4 · شريط الأقسام: زجاجي ومقروء دائماً */
.section-rail ol{ background:rgba(255,255,255,.78); backdrop-filter:saturate(140%) blur(10px); border:1px solid var(--j-line); border-radius:999px; padding:10px 12px; box-shadow:0 18px 44px -32px rgba(6,52,78,.55) }
.section-rail a,.section-rail a i{ color:var(--j-ink-soft); opacity:1 }
.section-rail a::after{ background:var(--j-line-strong) }
.section-rail a.is-current{ color:var(--j-ink) }
.section-rail.on-dark ol{ background:rgba(6,52,78,.6); border-color:rgba(255,255,255,.18) }
.section-rail.on-dark a,.section-rail.on-dark a i{ color:var(--j-pale) }
.section-rail.on-dark a.is-current{ color:var(--j-white) }
/* 5 · لا يختفي عنوان القسم تحت الهيدر عند التنقّل بالروابط */
[id]{ scroll-margin-block-start:calc(var(--ribbon-h) + var(--header-h) + 16px) }
/* 6 · صقل الشريط العلوي */
.nav-link{ position:relative }
.nav-link::after{ content:""; position:absolute; inset-inline:0; inset-block-end:2px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform var(--m-base) var(--e-out) }
.nav-link:hover::after,.nav-link:focus-visible::after{ transform:scaleX(1) }
.header-cta{ background-image:var(--grad-brand); box-shadow:0 12px 28px -20px rgba(0,140,196,.95) }
.header-mini{ display:none }
.site-header.is-panel-open{ background:rgba(255,255,255,.96); border-color:var(--j-line); backdrop-filter:saturate(150%) blur(10px) }
.site-header.is-panel-open .lockup-blue{ opacity:1 }
.site-header.is-panel-open .lockup-white{ opacity:0 }
.site-header.is-panel-open .nav-link,.site-header.is-panel-open .header-mini{ color:var(--j-ink-soft) }
@media (min-width:1150px){
.header-mini{ display:inline-flex; align-items:center; gap:7px; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.88); white-space:nowrap }
.site-header.is-solid .header-mini{ color:var(--j-ink-soft) }
.header-mini:hover{ color:var(--j-sky) }
}
/* =========================================================================
v4.3 — MOBILE PASS (390×844 · 360×800 · iPhone safe areas)
ما فُحص وأُصلح هنا: مقاسات اللمس، مبدّل صور الهيرو على الهاتف، تعارض
شريط الموافقة مع زر الاستشارة اللاصق، ومنع تكبير iOS في الحقول.
========================================================================= */
/* 1 · أهداف لمس ≥ 44px للعناصر التفاعلية الصغيرة */
.chip,.rchip{ min-height:44px; display:inline-flex; align-items:center; justify-content:center }
.link-cta{ min-height:44px; display:inline-flex; align-items:center }
.lang-btn,.footer-col a{ min-height:44px; display:inline-flex; align-items:center }
.hero-dot{ min-height:44px; align-items:end }
/* 2 · الهيرو على الهاتف: أرقام فقط للمبدّل، وسطر الاعتمادات أوضح */
@media (max-width:700px){
.hero-dot .dot-label{ display:none }
.hero-switch{ gap:var(--s-5) }
.hero-dot{ min-width:44px; justify-items:center }
.hero-dot .dot-no{ font-size:.78rem }
.hero-credentials{ font-size:.76rem; line-height:1.55 }
.hero-title{ letter-spacing:-.03em }
.hero-note{ font-size:.8rem }
}
/* 3 · شريط الموافقة لا يغطّي زر الاستشارة اللاصق */
body.consent-open .sticky-cta{ display:none }
body.consent-open .wa-float{ opacity:0; pointer-events:none }
.consent{ transition:opacity var(--m-base) var(--e-out) }
/* 4 · شريط الموافقة مدمج على الهاتف */
@media (max-width:600px){
.consent-inner{ padding:var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom)) }
.consent p{ font-size:.82rem }
.consent-actions{ gap:var(--s-2) }
.consent-actions .btn{ flex:1; min-width:0; font-size:.85rem; padding-inline:var(--s-3) }
.consent-link{ flex-basis:100%; text-align:center }
}
/* 5 · الحقول لا تُسبّب تكبيراً تلقائياً في iOS (يحدث تحت 16px) */
.field input,.field select,.field textarea{ font-size:1rem }
@media (max-width:600px){
.field input,.field select,.field textarea{ font-size:1rem; min-height:50px }
.field textarea{ min-height:120px }
.form-nav .btn{ min-height:52px }
}
/* 6 · الشبكات: عمود واحد نظيف، وبلا تمرير أفقي */
@media (max-width:599px){
.trust-cards,.treatment-grid,.service-grid,.review-grid,.hotel-grid,.cert-grid-4,.promo-grid,.vehicle-grid,.article-grid,.experience-grid,.explorer{ grid-template-columns:1fr }
.cert-grid,.trust-cards,.treatment-grid,.service-grid,.review-grid,.hotel-grid,.cert-grid-4,.promo-grid{ border-width:1px }
.shell{ padding-inline:18px }
.section{ padding-block:var(--s-8) }
.section-num{ font-size:.66rem }
.hero-foot{ gap:var(--s-4) }
}
/* 7 · الجداول والقوائم الطويلة تنكسر بدل أن تفيض */
.route-list li{ grid-template-columns:1fr auto 1fr; font-size:.94rem }
.hotel-body dl,.cert-dl{ grid-template-columns:1fr; gap:2px }
.hotel-body dd,.cert-dl dd{ margin-block-end:var(--s-3) }
@media (min-width:480px){
.hotel-body dl,.cert-dl{ grid-template-columns:auto 1fr; gap:var(--s-2) var(--s-4) }
.hotel-body dd,.cert-dl dd{ margin-block-end:0 }
}
/* 8 · الفوتر على الهاتف: عمودان بدل أربعة */
@media (max-width:599px){
.footer-grid{ gap:var(--s-7) }
.footer-bottom nav{ gap:var(--s-4) }
}
/* =========================================================================
v5 — مهام إضافية: هيدر (ديسكتوب + موبايل مخصّص)، بيانات تواصل مركزية،
إنستغرام، نموذج 4 خطوات ببطاقات، واتساب عائم بنبض، قسم تواصل، واتساب سريع.
========================================================================= */
/* 1 · اللوجو: أكبر على الديسكتوب، مضبوط على الموبايل */
.lockup,.footer-lockup{ gap:6px }
.lk-mark{ height:30px }
.lk-word{ height:12px }
.brand{ min-width:0 }
@media (min-width:480px){ .lk-mark{height:36px} .lk-word{height:15px} .lockup{gap:8px} }
@media (min-width:768px){ .lk-mark{height:46px} .lk-word{height:20px} .lockup{gap:10px} }
@media (min-width:1100px){ .lk-mark{height:54px} .lk-word{height:23px} .brand{min-width:210px} }
@media (min-width:1100px){ .header-inner{ gap:var(--s-6) } }
/* 2 · أيقونات الهيدر + زر الاستشارة على الموبايل */
.header-ico{ display:none; align-items:center; gap:8px; min-height:44px; padding-inline:6px; font-size:.82rem; font-weight:600; color:rgba(255,255,255,.9); white-space:nowrap }
.site-header.is-solid .header-ico{ color:var(--j-ink-soft) }
.header-ico:hover{ color:var(--j-sky) }
.header-consult{ display:inline-flex; min-height:40px; padding:9px 12px; font-size:.78rem }
.header-inner{ gap:10px }
.header-actions{ gap:10px }
.burger{ width:40px }
@media (max-width:899px){
.header-ico-wa{ display:inline-flex }
.header-cta,.lang{ display:none }
}
@media (min-width:900px){
.header-consult,.header-ico-wa{ display:none }
}
@media (min-width:1150px){
.header-ico-phone,.header-ico:not(.header-ico-wa){ display:inline-flex }
}
@media (min-width:1150px) and (max-width:1249px){
.header-ico-phone span:last-child{ display:none } /* أيقونة الهاتف فقط في المساحات الضيقة */
}
/* 3 · قائمة الموبايل: بيانات التواصل */
.drawer-wa{ width:100%; margin-block-start:var(--s-3) }
.drawer-contact{ display:grid; gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); margin-block-start:var(--s-7) }
.drawer-contact li{ background:rgba(255,255,255,.05); display:flex; justify-content:space-between; align-items:center; gap:var(--s-4); padding:var(--s-3) var(--s-4); min-height:48px }
.drawer-contact span{ font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:#9FE4FF }
.drawer-contact a{ font-size:.95rem; font-weight:600; color:var(--j-white) }
/* 4 · نموذج الاستشارة: بطاقات العلاجات */
.tstep-cards{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-block-end:var(--s-5) }
@media (min-width:600px){ .tstep-cards{ grid-template-columns:repeat(3,1fr) } }
.tcard{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:54px; padding:12px 14px; border:1px solid var(--j-line-strong); background:var(--j-white); border-radius:var(--radius); font-size:.9rem; font-weight:600; text-align:start; transition:border-color var(--m-fast) var(--e-out),background var(--m-fast) var(--e-out),transform var(--m-fast) var(--e-out) }
.tcard:hover{ border-color:var(--j-deep); transform:translateY(-1px) }
.tcard.is-selected{ border-color:transparent; background-image:var(--grad-brand); color:#04222F }
.tcard-check{ width:16px; height:16px; border:1px solid var(--j-line-strong); border-radius:50%; flex:none; position:relative }
.tcard.is-selected .tcard-check{ background:#04222F; border-color:#04222F }
.tcard.is-selected .tcard-check::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:10px; line-height:1 }
.form-contact{ display:grid; gap:0; margin-block-start:var(--s-4) }
@media (min-width:600px){ .form-contact{ grid-template-columns:1fr 1fr; gap:0 var(--s-4) } .form-contact .field:nth-child(3){ grid-column:1 / -1 } }
/* 5 · قنوات التواصل داخل قسم الاستشارة + اللي يفضّل الواتساب */
.consult-channels{ display:grid; gap:1px; background:var(--j-line); border:1px solid var(--j-line); margin-block-start:var(--s-6) }
.consult-channel{ background:var(--j-white); display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); padding:var(--s-3) var(--s-4); min-height:48px; font-size:.92rem; font-weight:600 }
.consult-channel:hover{ background:var(--j-ice-50); color:var(--j-link) }
.cc-label{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--j-ink-soft); font-weight:700 }
.quick-consult{ margin-block-start:var(--s-6); background:var(--j-white); border:1px solid var(--j-line); border-inline-start:3px solid var(--j-sky); padding:var(--s-5) }
.qc-title{ font-weight:700; font-size:1.02rem }
.qc-text{ margin-block:6px var(--s-4); font-size:.92rem; color:var(--j-ink-soft) }
/* 6 · شريط تواصل في قسم خدمات المرضى */
.support-contact{ margin-block-start:var(--s-7); background:var(--j-ice); border:1px solid var(--j-line); padding:var(--s-6); display:grid; gap:var(--s-4) }
.support-contact p{ font-size:.95rem; color:var(--j-ink-soft) }
.support-contact strong{ color:var(--j-ink) }
.support-actions{ display:flex; flex-wrap:wrap; gap:var(--s-3) }
/* 7 · الفوتر: عمود تواصل */
.footer-contact a{ display:flex; align-items:center; min-height:44px; gap:7px }
.footer-loc{ margin-block-start:var(--s-3); font-size:.9rem; color:var(--j-pale) }
@media (min-width:900px){ .footer-grid{ grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:var(--s-7) } }
@media (min-width:600px) and (max-width:899px){ .footer-grid{ grid-template-columns:1fr 1fr } }
/* 8 · الواتساب العائم: نبض هادئ + لا يغطّي المحتوى */
.wa-float{ position:fixed; z-index:76; display:inline-flex; align-items:center; gap:10px; background:var(--j-white); color:var(--j-ink); border:1px solid var(--j-line); border-radius:999px; padding:10px 16px; font-size:.84rem; font-weight:700; box-shadow:var(--shadow-float); transition:transform var(--m-base) var(--e-out) }
.wa-float:hover{ transform:translateY(-2px) }
.wa-float svg{ color:var(--j-sky) }
.wa-pulse{ position:absolute; inset:0; border-radius:999px; animation:pulse-ring 2.8s ease-out infinite; pointer-events:none }
@keyframes pulse-ring{ 0%{ box-shadow:0 0 0 0 rgba(0,173,238,.4) } 70%{ box-shadow:0 0 0 13px rgba(0,173,238,0) } 100%{ box-shadow:0 0 0 0 rgba(0,173,238,0) } }
@media (min-width:900px){ .wa-float{ inset-block-end:24px; inset-inline-end:24px } }
@media (max-width:899px){
.wa-float{ inset-block-end:82px; inset-inline-end:14px; padding:13px }
.wa-text{ display:none }
}
/* 9 · الجورنال: زر «كل المقالات» + ملاحظة المسودات */
.journal-more{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4); margin-block-start:var(--s-7) }
.journal-note{ font-size:.86rem; color:var(--j-ink-soft) }
.art-card h3 a{ text-decoration:none }
.art-card:hover h3 a{ color:var(--j-link) }
/* =========================================================================
v5.1 — تصحيح من ملاحظة المالك على اللقطة:
1) اللوجو كان يلمس أول رابط في القائمة (لا مسافة)، والكلمة أصغر من العلامة.
2) شريط الأقسام كان ضخماً ويغطّي الهيرو.
========================================================================= */
/* 1 · اللوجو: نسبة متوازنة + مسافة تنفّس أمام القائمة */
.brand{ margin-inline-end:var(--s-5) }
.lockup{ align-items:center; gap:10px }
@media (min-width:1100px){
.lk-mark{ height:46px }
.lk-word{ height:23px }
.lockup{ gap:12px }
.brand{ min-width:200px; margin-inline-end:var(--s-6) }
.header-inner{ gap:var(--s-5) }
.nav-link{ font-size:.84rem }
.primary-nav{ gap:var(--s-4) }
}
@media (min-width:1500px){
.lk-mark{ height:50px }
.lk-word{ height:25px }
.nav-link{ font-size:.86rem }
.primary-nav{ gap:var(--s-5) }
.header-ico-phone span:last-child{ display:inline }
}
/* رقم الهاتف في الهيدر: أيقونة فقط حتى 1500px (النص الطويل كان يزحم القائمة) */
.header-ico-phone span:last-child{ display:none }
/* 2 · شريط الأقسام: أنحف وأخفّ ولا يغطّي الصورة */
.section-rail{ inset-inline-end:14px }
.section-rail ol{ padding:8px 10px; background:rgba(255,255,255,.6); backdrop-filter:saturate(140%) blur(8px); border-color:rgba(216,231,239,.9); box-shadow:0 14px 34px -30px rgba(6,52,78,.5) }
.section-rail a{ padding:1px 0; font-size:.6rem; line-height:1.25; gap:8px; opacity:1; color:var(--j-ink-soft) }
.section-rail a span{ font-size:.58rem; opacity:.75 }
.section-rail a i{ font-size:.58rem; letter-spacing:.1em }
.section-rail a::after{ width:9px; height:1.5px; background:var(--j-line-strong) }
.section-rail a:hover,.section-rail a:focus-visible{ color:var(--j-ink) }
.section-rail a:hover::after,.section-rail a:focus-visible::after{ width:16px }
.section-rail a.is-current{ color:var(--j-ink) }
.section-rail a.is-current::after{ width:20px; background-image:var(--grad-brand) }
.section-rail.on-dark ol{ background:rgba(6,52,78,.5); border-color:rgba(255,255,255,.14) }
.section-rail.on-dark a{ color:var(--j-pale) }
.section-rail.on-dark a span{ opacity:.7 }
.section-rail.on-dark a.is-current{ color:#fff }
@media (min-width:1280px) and (max-height:820px){
/* الشاشات القصيرة: الشريط أصغر أصلاً — نُبقي الأسماء عند المرور فقط */
.section-rail a i{ letter-spacing:.06em }
}
/* 4 · منع تزاحم الهيدر في العرض المتوسط (1100-1279px): مخفي مؤقّتاً مبدّل اللغات */
@media (max-width:1279px){ .lang{ display:none } }
/* =========================================================================
v5.2 — تبديل اللغة الحقيقي (EN · AR · TR)
الحالة النشطة للزر، وتحسينات مقاسات النص العربي في وضع RTL.
(معظم التخطيط يستخدم خصائص منطقية inset-inline/padding-inline فينقلب تلقائياً)
========================================================================= */
.lang-btn.is-current{ color:var(--j-sky); font-weight:700 }
.site-header.is-solid .lang-btn.is-current{ color:var(--j-link) }
.drawer-langs .lang-btn.is-current{ color:var(--j-sky) }
.lang-btn{ cursor:pointer }
[dir="rtl"] .display-1,[dir="rtl"] .display-2,[dir="rtl"] .display-3,[dir="rtl"] .hero-title{ line-height:1.28 }
[dir="rtl"] .kicker,[dir="rtl"] .section-num{ letter-spacing:.12em }
[dir="rtl"] .prose p,[dir="rtl"] .prose-strong,[dir="rtl"] .lede{ line-height:1.95 }
[dir="rtl"] .btn,[dir="rtl"] .lang,[dir="rtl"] .nav-link{ letter-spacing:0 }
[dir="rtl"] .section-rail{ font-family:"Segoe UI",Tahoma,Arial,sans-serif }
[dir="rtl"] .journal-note,[dir="rtl"] .muted{ line-height:1.9 }
/* =========================================================================
v5.3 — حيوية: ألوان أكثر طاقة + حركة هادئة + شريط المرافق والتقنية
التدرّج الأساسي يبقى نفس عائلة الشعار، لكن بتشبّع أعلى ولمسة دافئة تُوازن
البرودة. وكل الحركة تتوقّف عند prefers-reduced-motion.
========================================================================= */
:root{
--j-cyan:#00C6FF;
--j-cyan-deep:#00A3E0;
--j-cyan-soft:#8FE3FF;
--j-warm:#FFC978;
--grad-energy:linear-gradient(112deg,#00C6FF 0%,#00ADEE 42%,#1E9BE2 68%,#7ED4F7 100%);
--glow-cyan:radial-gradient(closest-side,rgba(0,198,255,.40),transparent 100%);
--glow-warm:radial-gradient(closest-side,rgba(255,201,120,.24),transparent 100%);
}
/* 1 · أسطح أنشط — لمعة تمرّ على الزر الأساسي عند المرور */
.btn-accent{ background-image:var(--grad-energy); position:relative; overflow:hidden; z-index:0 }
.btn-accent::after{ content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(100deg,transparent 18%,rgba(255,255,255,.62) 48%,transparent 78%);
transform:translateX(-130%); transition:transform .8s cubic-bezier(.22,1,.36,1) }
.btn-accent:hover::after{ transform:translateX(130%) }
.btn-primary{ background-image:linear-gradient(150deg,#0A4A6E,#075E86 55%,#0A86BC) }
.btn-primary:hover{ box-shadow:0 22px 46px -24px rgba(0,173,238,.65) }
.text-link:hover{ color:var(--j-cyan-deep) }
/* 2 · تدرّج العناوين أنشط + لمسة دافئة في التفاصيل */
.grad-text,.display-1 em.grad-text,.display-2 em.grad-text{ background-image:var(--grad-energy) }
.on-dark .grad-text{ background-image:var(--grad-energy) }
.kicker{ color:var(--j-cyan-deep) }
.on-dark .kicker,.section-deep .kicker{ color:var(--j-cyan-soft) }
::selection{ background:rgba(255,201,120,.38); color:#06283B }
/* 3 · الأقسام الفاتحة: وهج سماوي خفيف من الأعلى بدل سطح رمادي مسطّح */
.section{ background-image:linear-gradient(180deg,rgba(0,198,255,.055),rgba(0,198,255,0) 280px) }
.section-ice,.section-ice-50,.section-white{ background-image:linear-gradient(180deg,rgba(255,201,120,.10),rgba(0,198,255,.055) 42%,rgba(0,198,255,0) 340px) }
/* 4 · الأقسام الغامقة: وهج سماوي + لمسة دافئة + انزياح هادئ (فلا تبدو مسطّحة وباردة) */
.section-deep{
background-color:var(--j-deep-900);
background-image:var(--glow-cyan),var(--glow-warm),var(--grad-deep);
background-repeat:no-repeat,no-repeat,no-repeat;
background-size:62% 62%,58% 58%,100% 100%;
background-position:-8% -12%,106% 110%,0 0;
animation:jelanDrift 32s ease-in-out infinite alternate;
}
@keyframes jelanDrift{
from{ background-position:-8% -12%,106% 110%,0 0 }
to{ background-position:26% 14%,74% 76%,0 0 }
}
.hero-glow{ background-image:var(--glow-cyan),var(--glow-warm); background-size:70% 80%,55% 65%; background-position:-10% 20%,110% 90% }
/* 5 · شريط المرافق والتقنية (جديد) */
.facility-strip{ display:grid; gap:var(--s-4); margin-block-start:var(--s-8); list-style:none }
@media (min-width:640px){ .facility-strip{ grid-template-columns:1fr 1fr } }
@media (min-width:1000px){ .facility-strip{ grid-template-columns:repeat(4,1fr) } }
.facility-strip li{ position:relative; display:grid; gap:6px; align-content:start; background:var(--j-white);
border:1px solid var(--j-line); padding:var(--s-5); overflow:hidden;
transition:transform .28s var(--e-out),box-shadow .28s var(--e-out),border-color .28s var(--e-out) }
.facility-strip li::before{ content:""; position:absolute; inset-block-start:0; inset-inline:0; height:3px; background-image:var(--grad-energy) }
.facility-strip li:hover{ transform:translateY(-5px); border-color:var(--j-line-strong); box-shadow:0 28px 56px -36px rgba(6,52,78,.5) }
.facility-strip .fs-no{ font-size:.68rem; letter-spacing:.2em; font-weight:700; color:var(--j-cyan-deep) }
.facility-strip strong{ font-size:1.02rem; letter-spacing:-.01em; line-height:1.3 }
.facility-strip li > span:last-child{ font-size:.92rem; color:var(--j-ink-soft); line-height:1.6 }
/* 6 · صقل تفاعلي للبطاقات */
.art-card{ transition:transform .28s var(--e-out),box-shadow .28s var(--e-out) }
.art-card:hover{ transform:translateY(-4px); box-shadow:0 30px 60px -40px rgba(6,52,78,.5) }
.art-card .art-media{ overflow:hidden }
.art-card .art-media img{ transition:transform .7s cubic-bezier(.22,1,.36,1) }
.art-card:hover .art-media img{ transform:scale(1.045) }
.cert-card{ transition:transform .28s var(--e-out),box-shadow .28s var(--e-out) }
.cert-card:hover{ transform:translateY(-3px); box-shadow:0 26px 50px -38px rgba(6,52,78,.45) }
/* 7 · احترام تفضيل تقليل الحركة */
@media (prefers-reduced-motion: reduce){
.section-deep{ animation:none }
.btn-accent::after{ display:none }
.facility-strip li:hover,.art-card:hover,.cert-card:hover{ transform:none }
.art-card:hover .art-media img{ transform:none }
}
/* 3 · وضوح اللوجو والنصوص فوق صورة الهيرو (ظل خفيف فقط في الوضع الشفاف) */
.site-header:not(.is-solid):not(.is-panel-open) .lockup-white img,
.site-header:not(.is-solid):not(.is-panel-open) .footer-lockup img{ filter:drop-shadow(0 1px 7px rgba(6,52,78,.55)) }
.site-header:not(.is-solid):not(.is-panel-open) .nav-link,
.site-header:not(.is-solid):not(.is-panel-open) .header-ico,
.site-header:not(.is-solid):not(.is-panel-open) .lang-btn{ text-shadow:0 1px 8px rgba(6,52,78,.5) }
.site-header.is-solid .lockup img,.site-header.is-panel-open .lockup img{ filter:none }
/* =========================================================================
v5.4 — إصلاح عيب حقيقي: مبدّل اللغة كان غير قابل للوصول بين 900px و 1279px
السبب: أزرار اللغة مخفية تحت 1280px، وزر القائمة (burger) مخفي فوق 900px
→ لا هيدر ولا قائمة جانبية فيها اللغات = المستخدم لا يستطيع تبديل اللغة.
الحل: في هذا المدى تُخفى القائمة الأفقية ويظهر زر القائمة، فيصل المستخدم إلى
اللغات وكل روابط الموقع من داخل القائمة الجانبية.
========================================================================= */
@media (min-width:900px) and (max-width:1279px){
.primary-nav{ display:none }
.burger{ display:inline-flex }
}
/* =========================================================================
v5.5 — شريط شعارات الاعتماد (بناءً على طلب المالك: الشعارات فقط، بلا تواريخ)
الملفات تُقرأ من preview/assets/logos/ — وإن غاب ملف تظهر خانة صادقة،
ولا يُخترع شعار ولا اعتماد.
========================================================================= */
.logo-strip{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s-4); margin-block-start:var(--s-7); list-style:none }
@media (min-width:768px){ .logo-strip{ grid-template-columns:repeat(4,1fr) } }
.logo-tile{ display:grid; gap:var(--s-3); align-content:start; text-align:center }
.logo-box{ display:grid; place-items:center; min-height:120px; padding:var(--s-5); background:var(--j-white);
border:1px solid var(--j-line); transition:transform .28s var(--e-out),box-shadow .28s var(--e-out),border-color .28s var(--e-out) }
.logo-box img{ max-width:100%; max-height:66px; width:auto; height:auto; object-fit:contain; display:block }
.logo-tile:hover .logo-box{ transform:translateY(-4px); border-color:var(--j-line-strong); box-shadow:0 26px 52px -38px rgba(6,52,78,.5) }
.logo-cap{ font-size:.78rem; font-weight:600; letter-spacing:.03em; color:var(--j-ink-soft); line-height:1.45 }
.logo-tile.is-missing .logo-box{ border-style:dashed; background-image:var(--grad-ice) }
.logo-tile.is-missing .logo-box img{ display:none }
.logo-tile.is-missing .logo-box::after{ content:"⌛"; font-size:1.2rem; opacity:.55 }
.logo-tile.is-open .logo-box{ border-style:dashed; background:transparent }
.logo-add{ font-size:1.5rem; line-height:1; color:var(--j-line-strong) }
.logo-tile.is-open:hover .logo-box{ transform:none; box-shadow:none }
.cert-note{ margin-block-start:var(--s-6); font-size:.86rem; color:var(--j-ink-soft) }
/* =========================================================================
v5.6 (مُصحَّح) — اللوجو العمودي: العلامة فوق والكلمة تحتها بخط أصغر
إصلاحان مهمّان:
1) القاعدة القديمة `.brand img{ height:calc(var(--header-h)*.6) }` أقوى من
`.lk-word` (0,1,1 مقابل 0,1,0) فكانت تكبّر الصورتين إلى ~52px وتُخرج الكتلة
من الهيدر. الحل: مختارات أعلى تخصيصاً `.brand .lk-mark` / `.footer-lockup .lk-*`.
2) `.lockup` يجب أن يبقى absolute ومتمركزاً، و`.brand` يأخذ عرضاً أدنى بعرض
الكتلة وإلا صارت عرضه صفراً فانزلقت القائمة فوق اللوجو.
عرض الكلمة = الارتفاع × (445/71) = الارتفاع × 6.27
========================================================================= */
.lockup,.footer-lockup{ flex-direction:column; align-items:center; gap:4px }
/* الهيدر */
.brand{ min-width:78px; margin-inline-end:var(--s-4) }
.brand .lk-mark{ height:32px; width:auto }
.brand .lk-word{ height:12px; width:auto }
@media (min-width:480px){
.brand{ min-width:86px }
.brand .lk-mark{ height:36px }
.brand .lk-word{ height:13px }
}
@media (min-width:768px){
.lockup,.footer-lockup{ gap:5px }
.brand{ min-width:98px }
.brand .lk-mark{ height:42px }
.brand .lk-word{ height:15px }
}
@media (min-width:1100px){
.brand{ min-width:106px; margin-inline-end:var(--s-6) }
.brand .lk-mark{ height:46px }
.brand .lk-word{ height:16px }
}
/* الفوتر */
.footer-lockup .lk-mark{ height:34px; width:auto }
.footer-lockup .lk-word{ height:12px; width:auto }
@media (min-width:768px){
.footer-lockup .lk-mark{ height:42px }
.footer-lockup .lk-word{ height:15px }
}
/* ==========================================================================
JELAN EDITORIAL — v6 · تحسين الجوال + نطاقات الصور المؤقّتة
يُلحَق في نهاية jelan.css عبر tools/build-wp-theme.ps1
الهدف: تجربة جوال نظيفة بلا تمرير أفقي، بمساحات لمس مريحة، وبنصوص مقروءة.
========================================================================== */
/* ---------- 1 · منع التمرير الأفقي (أشهر عطل جوال) ---------- */
html, body {
overflow-x: hidden;
max-width: 100%;
-webkit-text-size-adjust: 100%;
}
img, svg, video, iframe, table, pre {
max-width: 100%;
height: auto;
}
.shell, .section-inner, .section-head, .hero-copy, .footer-grid {
min-width: 0;
}
h1, h2, h3, p, li, a, span, td, th {
overflow-wrap: break-word;
word-break: break-word;
}
/* العربية: لا تقطع الكلمات بلا داعٍ */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p, [dir="rtl"] li {
word-break: normal;
overflow-wrap: anywhere;
}
/* ---------- 2 · مساحات اللمس: لا هدف أصغر من 44px ---------- */
@media (max-width: 899px) {
a.nav-link, .lang-btn, .btn, .sticky-call, .chip, .filter-chip,
summary, .faq-q, .t-filter button, .consent-actions button,
.drawer-nav a, .footer-links a, .link-cta {
min-height: 44px;
display: inline-flex;
align-items: center;
}
.footer-links a { min-height: 40px; }
}
/* ---------- 3 · الهيرو على الجوال ---------- */
@media (max-width: 700px) {
.hero { padding-block-start: calc(var(--header-h) + 24px); }
.hero-media, .hero-visual {
order: -1; /* الصورة أولاً — أوضح على الجوال */
margin-block-end: 20px;
}
.hero-media img, #hero-image {
display: block;
width: 100%;
height: clamp(200px, 42vh, 340px);
object-fit: cover;
border-radius: 18px;
}
.hero h1, .hero .display-1 {
font-size: clamp(1.9rem, 8.4vw, 2.6rem);
line-height: 1.15;
}
.hero-sub, .hero p { font-size: 1rem; line-height: 1.65; }
.hero-switch, .hero-dots { gap: 8px; }
.hero-switch button, .hero-dots button { width: 34px; height: 34px; }
}
/* ---------- 4 · شريط الأقسام الجانبي: يختفي على الجوال ---------- */
@media (max-width: 900px) {
.section-rail { display: none !important; }
}
/* ---------- 5 · الشريط اللاصق: بعرض كامل وآمن ---------- */
@media (max-width: 899px) {
.sticky-cta {
inset-inline: 10px;
inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 10px);
padding: 8px;
gap: 8px;
border-radius: 16px;
box-shadow: 0 12px 32px rgba(6, 40, 59, .22);
}
.sticky-cta .btn { flex: 1 1 auto; justify-content: center; min-height: 48px; }
.sticky-cta .sticky-call { flex: 0 0 auto; padding-inline: 14px; }
/* لا يغطّي آخر الصفحة */
body { padding-block-end: 84px; }
}
/* ---------- 6 · واتساب العائم: لا يتصادم مع الشريط اللاصق ---------- */
@media (max-width: 899px) {
#wa-float, .wa-float {
inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 96px);
inset-inline-end: 12px;
width: 52px;
height: 52px;
}
}
/* ---------- 7 · الشبكات: عمود واحد أو اثنان ---------- */
@media (max-width: 700px) {
.treatment-grid, .review-grid, .article-grid, .journey-grid, .results-grid,
.vip-grid, .stay-grid, .transport-grid, .cert-grid, .facility-grid,
.consult-channels, .quick-consult, .trust-grid, .facts, .support-contact,
.section-media-band + .band-grid, .footer-grid {
grid-template-columns: 1fr !important;
gap: 16px;
}
.facility-strip, .fs-track { grid-auto-flow: column; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.facility-strip > *, .fs-track > * { scroll-snap-align: start; }
}
@media (min-width: 701px) and (max-width: 1024px) {
.treatment-grid, .review-grid, .article-grid, .journey-grid, .results-grid,
.vip-grid, .stay-grid, .transport-grid, .facility-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* ---------- 8 · الصور داخل الشبكات ---------- */
@media (max-width: 700px) {
.t-media img, .t-card img, .art-media img, .art-card img,
.review-card img, .journey-grid img, .stay-grid img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
border-radius: 14px;
}
}
/* ---------- 9 · النماذج: بلا تكبير آيفون تلقائي ---------- */
@media (max-width: 899px) {
input, select, textarea, button, .btn {
font-size: 16px; /* يمنع zoom على iOS */
}
input, select, textarea { width: 100%; min-height: 48px; }
textarea { min-height: 120px; }
.form-actions, .step-actions { flex-direction: column; gap: 10px; }
.form-actions .btn, .step-actions .btn { width: 100%; justify-content: center; min-height: 50px; }
.form-grid, .consult-form .grid { grid-template-columns: 1fr !important; }
.checkbox-row, .radio-row { align-items: flex-start; }
}
/* ---------- 10 · الجداول: تمرير أفقي بدل الكسر ---------- */
@media (max-width: 700px) {
table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
.compare-table, .a-compare { overflow-x: auto; }
}
/* ---------- 11 · القائمة الجانبية (الدرج) ---------- */
@media (max-width: 899px) {
.drawer {
inset: 0;
width: 100%;
max-width: 100%;
border-radius: 0;
padding-block: calc(env(safe-area-inset-top, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 24px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.drawer-nav a { padding-block: 12px; font-size: 1.05rem; }
.drawer-cta .btn { width: 100%; justify-content: center; min-height: 50px; }
}
/* ---------- 12 · إشعار الخصوصية ---------- */
@media (max-width: 700px) {
.consent {
inset-inline: 8px;
inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 8px);
border-radius: 16px;
max-height: 62vh;
overflow-y: auto;
}
.consent-inner { padding: 14px; }
.consent-actions { flex-direction: column; gap: 8px; }
.consent-actions .btn { width: 100%; justify-content: center; }
}
/* ---------- 13 · تدرّج الخطوط على الجوال ---------- */
@media (max-width: 700px) {
:root {
--step-0: 1rem;
--step-1: 1.18rem;
--step-2: 1.42rem;
--step-3: 1.72rem;
--step-4: 2.05rem;
}
h1, .display-1 { font-size: clamp(1.9rem, 8.2vw, 2.5rem) !important; }
h2, .display-2 { font-size: clamp(1.5rem, 6.6vw, 2rem) !important; }
h3, .display-3 { font-size: clamp(1.2rem, 5.2vw, 1.5rem) !important; }
.section-lede, .lede { font-size: 1rem; }
.section-num { font-size: .72rem; letter-spacing: .12em; }
section, .section { padding-block: 40px; }
.section + .section { padding-block-start: 0; }
}
/* ---------- 14 · رؤوس الأقسام والشرائح ---------- */
@media (max-width: 700px) {
.section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
.chip-row, .filter-row, .t-filter, .results-filter, .journal-filter {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
gap: 8px;
padding-block-end: 6px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.chip-row::-webkit-scrollbar, .filter-row::-webkit-scrollbar, .t-filter::-webkit-scrollbar { display: none; }
.chip, .filter-chip, .t-filter button { flex: 0 0 auto; white-space: nowrap; }
}
/* ---------- 15 · اللمس: لا تأثيرات hover عالقة ---------- */
@media (hover: none) {
.reveal { opacity: 1 !important; transform: none !important; }
a:hover, button:hover { transform: none; }
}
/* ==========================================================================
16 · نطاقات الصور المؤقّتة — صورة في كل قسم
========================================================================== */
.section-media-band {
margin: clamp(20px, 3vw, 36px) 0 0;
border-radius: 20px;
overflow: hidden;
position: relative;
background: var(--j-neutral, #F4F8FB);
}
.section-media-band img {
display: block;
width: 100%;
height: clamp(220px, 34vw, 420px);
object-fit: cover;
filter: saturate(.9) contrast(1.05);
}
.section-media-band figcaption {
position: absolute;
inset-block-end: 0;
inset-inline: 0;
padding: 14px 18px;
font-size: .82rem;
letter-spacing: .04em;
color: #fff;
background: linear-gradient(to top, rgba(6, 40, 59, .82), rgba(6, 40, 59, 0));
}
@media (max-width: 700px) {
.section-media-band img { height: clamp(170px, 46vw, 260px); }
.section-media-band figcaption { font-size: .74rem; padding: 10px 12px; }
}
/* ==========================================================================
JELAN EDITORIAL — v7 · إصلاحات توافق ووردبريس + ترسيخ هيدر الجوال
السبب: قوالب الكتل تمرّر ناتج Shortcode على wptexturize/wpautop → تُدخل /
وتحوّل الاقتباسات. هنا نُبطل أثر ذلك ونثبّت تخطيط الهيدر على الجوال.
========================================================================== */
/* ---------- 1 · إبطال أي
/
أُقحمت داخل الهيدر/التذييل ---------- */
.header-actions p,
.header-inner p,
.site-footer p.auto,
.header-actions br,
.header-inner br,
.site-footer br {
display: contents;
margin: 0;
}
.header-actions > p { display: contents !important; }
.header-actions br { display: none !important; }
.header-inner > p,
.site-header p { margin: 0 !important; padding: 0 !important; }
/* أي وسم أُضيف بـwpautop داخل الفوتر لا يجب أن يغيّر التخطيط */
.site-footer > p:empty, .header-inner > p:empty { display: none; }
/* ---------- 2 · ترسيخ تخطيط الهيدر ---------- */
.header-inner {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: clamp(10px, 1.4vw, 22px);
min-height: var(--header-h, 80px);
}
.header-actions {
display: flex !important;
align-items: center !important;
flex-wrap: nowrap !important;
gap: clamp(6px, .8vw, 14px);
margin-inline-start: auto;
min-width: 0;
}
.site-header .primary-nav {
display: flex;
align-items: center;
gap: clamp(8px, 1vw, 18px);
flex-wrap: nowrap;
}
.site-header .primary-nav a { white-space: nowrap; }
/* لا نكرّر زر الاستشارة — واحد فقط */
.header-consult { display: none !important; }
/* ---------- 3 · الجوال: هيدر نظيف بلا فيض ---------- */
@media (max-width: 899px) {
.header-inner { min-height: var(--header-h, 64px); gap: 8px; }
.site-header .primary-nav { display: none !important; }
.site-header .lang { display: none !important; }
.site-header .header-ico-phone span { display: none; } /* أيقونة فقط */
.site-header .header-ico { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }
.site-header .header-cta {
display: inline-flex !important;
white-space: nowrap;
padding: 8px 12px;
min-height: 40px;
font-size: .8rem;
line-height: 1;
}
.site-header .burger { display: inline-flex !important; margin-inline-start: 0; }
.brand { flex: 0 0 auto; min-width: 0; }
.brand .lk-mark { height: 34px !important; }
.brand .lk-word { height: 11px !important; }
}
@media (max-width: 420px) {
.site-header .header-cta { display: none !important; } /* شاشات صغيرة جداً: أيقونات + قائمة */
}
/* ---------- 4 · الدرج: يبقى مخفياً حتى يُفتح ---------- */
.drawer[hidden] { display: none !important; }
.drawer { z-index: 120; }
/* ---------- 5 · شريط الأقسام الجانبي على الشاشات المتوسطة ---------- */
@media (max-width: 1100px) {
.section-rail { display: none !important; } /* يظهر بديله في الشريط اللاصق */
}
/* ---------- 6 · إشعار الخصوصية: لا يغطّي الصفحة ---------- */
.consent {
position: fixed !important;
inset-inline: auto;
inset-inline-end: 16px;
inset-block-end: 16px;
max-width: min(560px, calc(100vw - 32px));
border-radius: 18px;
box-shadow: 0 20px 50px rgba(6, 40, 59, .22);
}
@media (max-width: 700px) {
.consent { inset-inline: 8px; max-width: none; max-height: 56vh; overflow-y: auto; }
.consent-inner { padding: 14px; }
.consent-actions { flex-direction: column; gap: 8px; }
.consent-actions .btn { width: 100%; justify-content: center; }
}
/* ---------- 7 · منع فيض العرض نهائياً ---------- */
html { overflow-x: clip; }
body { overflow-x: clip; }
/* ==========================================================================
JELAN — v7b · لمسات أخيرة: الشعار في هيدر الجوال + إشعار خصوصية واضح
========================================================================== */
/* ---------- 1 · ضمان ظهور الشعار على الجوال ---------- */
.site-header .brand {
display: flex !important;
align-items: center !important;
flex: 0 0 auto !important;
visibility: visible !important;
opacity: 1 !important;
position: relative;
z-index: 3;
}
.site-header .brand .lockup {
display: inline-flex !important;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
/* في الوضع الشفاف فوق صورة الهيرو: الشعار الأبيض هو الظاهر */
.site-header:not(.is-solid):not(.is-panel-open) .lockup-white { opacity: 1 !important; }
.site-header:not(.is-solid):not(.is-panel-open) .lockup-blue { opacity: 0 !important; }
.site-header.is-solid .lockup-blue,
.site-header.is-panel-open .lockup-blue { opacity: 1 !important; }
.site-header.is-solid .lockup-white,
.site-header.is-panel-open .lockup-white { opacity: 0 !important; }
@media (max-width: 899px) {
.site-header .brand { min-width: 96px !important; }
.site-header .brand .lk-mark { height: 32px !important; width: auto !important; }
.site-header .brand .lk-word { height: 11px !important; width: auto !important; }
.site-header .brand img { display: block !important; }
}
/* ---------- 2 · إشعار الخصوصية: معتم وواضح ولا يغطّي المحتوى ---------- */
.consent {
background: #ffffff !important;
border: 1px solid var(--j-line, #D8E5EE) !important;
backdrop-filter: none !important;
}
.consent p { color: var(--j-ink) !important; }
@media (max-width: 700px) {
.consent {
inset-inline: 8px !important;
inset-block-end: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
max-height: 46vh;
padding: 0;
}
.consent-inner { padding: 12px 14px !important; }
.consent p { font-size: .82rem !important; line-height: 1.5 !important; margin: 0 0 10px !important; }
.consent-actions { gap: 6px !important; }
.consent-actions .btn { min-height: 42px !important; font-size: .85rem !important; }
}
/* ---------- 3 · زر الهيرو لا يختفي تحت الإشعار ---------- */
@media (max-width: 700px) {
.hero-actions { margin-block-end: 8px; }
.hero .hero-inner { padding-block-end: calc(var(--s-6, 24px) + 12px); }
}
/* ==========================================================================
JELAN — v7c · إصلاح الهيرو على الجوال
المشكلة: قاعدة v6 ثبّتت ارتفاع صورة الهيرو (340px) فتركت فراغاً داكناً ضخماً.
الصحيح: الصورة تغطّي الهيرو بالكامل (خلفية)، والنص يبقى فوقها.
========================================================================== */
@media (max-width: 900px) {
.hero { position: relative !important; overflow: hidden !important; }
.hero-media, .hero-visual, .hero-bg, .hero-media-wrap {
position: absolute !important;
inset: 0 !important;
order: 0 !important;
margin: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 0 !important;
}
.hero-media img, .hero-bg img, #hero-image {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
max-width: none !important;
min-height: 0 !important;
object-fit: cover !important;
object-position: 62% 30% !important;
border-radius: 0 !important;
transform: none !important;
}
.hero .shell, .hero-inner, .hero-scrim, .hero-glow { position: relative; z-index: 2; }
.hero-scrim { position: absolute !important; inset: 0 !important; z-index: 1 !important; }
/* ارتفاع الهيرو على الجوال: يملأ الشاشة مع حدّ أدنى معقول */
.hero { min-height: clamp(560px, calc(100svh - var(--ribbon-h, 34px)), 900px) !important; }
.hero .hero-inner { padding-block: calc(var(--header-h, 64px) + 28px) 32px !important; }
}
/* الدرج والشريط اللاصق فوق أي شيء */
.drawer { z-index: 140 !important; }
.sticky-cta { z-index: 130 !important; }
#wa-float, .wa-float { z-index: 125 !important; }
/* v7d · تقوية تباين نص الهيرو على الجوال */
@media (max-width: 900px) {
.hero-scrim { background: linear-gradient(180deg, rgba(6,40,59,.72) 0%, rgba(6,40,59,.55) 38%, rgba(6,40,59,.82) 100%) !important; }
.hero-inner { text-shadow: 0 1px 12px rgba(6,40,59,.45); }
}
/* ==========================================================================
JELAN — v8 · إصلاح عرض الجوال الشامل + أقسام متناسقة + بطاقات قابلة للضغط
المشكلة الأساسية في لقطة المالك: كلمات مقطّعة («Equi ppe d») بسبب
word-break: break-word عالمي، وبطاقات الثقة بأربعة أعمدة على الجوال.
========================================================================== */
/* ---------- 1 · إلغاء تقطيع الكلمات (السبب الجذري للّقطة) ---------- */
h1, h2, h3, h4, p, li, a, span, strong, em, td, th, figcaption, summary {
word-break: normal !important;
overflow-wrap: normal !important;
hyphens: none !important;
}
/* لا نقطع كلمة طويلة إلا عند الضرورة القصوى (بلا شرطة ولا تقطيع داخلي) */
.stat-value, .trust-value, .count, [class*="value"] {
overflow-wrap: anywhere !important;
}
/* العربية: كسر طبيعي فقط عند حدود الكلمات */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] p, [dir="rtl"] li {
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* ---------- 2 · كل الشبكات: عمود واحد على الجوال ---------- */
@media (max-width: 760px) {
.trust-grid, .trust-row, .facts, .facts-grid, .stats, .stats-grid, .stat-grid,
.trust-bar-inner, .trust-cards, .trust-list, .values, .value-grid,
.treatment-grid, .review-grid, .article-grid, .journey-grid, .results-grid,
.vip-grid, .stay-grid, .transport-grid, .facility-grid, .cert-grid,
.consult-channels, .quick-consult, .support-contact, .footer-grid,
.a-layout, .a-related, .grid, .grid-2, .grid-3, .grid-4, .cols {
grid-template-columns: 1fr !important;
display: grid !important;
gap: 14px !important;
}
/* الشبكات المرنة */
.trust-bar-inner, .trust-cards, .facts, .stats {
flex-direction: column !important;
align-items: stretch !important;
}
/* أي عنصر بأربعة أعمدة عبر flex */
[style*="grid-template-columns: repeat(4"] { grid-template-columns: 1fr !important; }
}
/* ---------- 3 · أقسام متناسقة: مسافات وحواف موحّدة ---------- */
@media (max-width: 760px) {
section, .section, .wp-block-group.section {
padding-block: 44px !important;
padding-inline: 0 !important;
}
.section + .section { padding-block-start: 0 !important; }
.shell, .section-inner, .hero-inner {
padding-inline: 18px !important;
max-width: 100% !important;
}
.section-head { margin-block-end: 20px !important; }
.section-head h2 { margin-block: 6px 10px !important; }
.section-lede { margin-block-end: 0 !important; }
/* البطاقات: تباعد وحواف موحّدة */
.t-card, .review-card, .art-card, .vip-card, .stay-card, .transport-card,
.result-card, .facility-card, .stat, .fact, .trust-card, .value {
border-radius: 16px !important;
padding: 16px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
.t-card .t-body, .t-body { padding: 14px 0 0 !important; }
.t-card h3, .art-card h3, .review-card h3 { font-size: 1.12rem !important; line-height: 1.35 !important; }
.t-card img, .art-card img, .art-media img { width: 100% !important; height: auto !important; aspect-ratio: 16/10; object-fit: cover; }
/* نصوص مريحة */
body { font-size: 16px !important; line-height: 1.7 !important; }
p, li { font-size: 1rem !important; }
.section-num { font-size: .7rem !important; }
h2 { font-size: clamp(1.45rem, 6.4vw, 1.95rem) !important; line-height: 1.22 !important; }
h3 { font-size: clamp(1.15rem, 5vw, 1.4rem) !important; line-height: 1.3 !important; }
.lede, .section-lede { font-size: 1.02rem !important; line-height: 1.65 !important; }
}
/* ---------- 4 · شريط اللغات على الجوال: واضح وقابل للضغط ---------- */
@media (max-width: 899px) {
.site-header .lang {
display: inline-flex !important; /* نُظهره: المالك يريد تبديل اللغة على الجوال */
gap: 2px;
order: -1;
}
.site-header .lang-btn {
min-width: 34px !important;
min-height: 34px !important;
padding: 0 6px !important;
font-size: .72rem !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
}
.drawer-langs { display: flex; gap: 10px; justify-content: center; margin-block-start: 14px; }
.drawer-langs .lang-btn { min-height: 44px; padding: 0 16px; }
}
/* ---------- 5 · البطاقات قابلة للضغط بالكامل (الصورة + العنوان) ---------- */
.art-card, .t-card, .result-card, .vip-card, .stay-card, .facility-card {
position: relative;
}
/* الرابط الممتد: يجعل كامل البطاقة قابلة للضغط بلا تغيير الترميز */
.art-card .art-title a::after,
.art-card h3 a::after,
.t-card .t-actions a.link-cta::after,
.result-card a::after,
.vip-card a::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
}
/* تبقى الروابط الثانوية قابلة للضغط فوق الرابط الممتد */
.t-card .t-actions a { position: relative; z-index: 3; }
.art-card .art-media, .art-card .art-body, .t-card .t-media { position: relative; z-index: 1; }
.art-card img, .t-card img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) {
.art-card:hover img, .t-card:hover img { transform: scale(1.03); }
.art-card:focus-within, .t-card:focus-within { outline: 2px solid var(--j-link, #0873A3); outline-offset: 3px; }
}
/* ---------- 6 · الجداول والمقارنات على الجوال ---------- */
@media (max-width: 760px) {
table { display: block; width: 100%; overflow-x: auto; }
.compare-table td, .compare-table th { min-width: 140px; }
}
/* ---------- 7 · صور الأقسام: تناسق ---------- */
@media (max-width: 760px) {
.section-media-band { margin-block-start: 22px !important; border-radius: 16px !important; }
.section-media-band img { height: clamp(180px, 52vw, 280px) !important; }
.section-media-band figcaption { font-size: .76rem !important; padding: 10px 12px !important; }
}