/* Layout: preloader → scroll-scrubbed facade-to-reception film → departments → numbers → contact; each department opens a full-screen doctor view */
:root{
  /* only --bg, --fg, --accent, --on-accent are set per clinic (from clinic.js theme); the rest derive */
  --bg:#0b100f; --fg:#f1eee6; --accent:#e3b15f; --on-accent:#0b100f;
  --surface:color-mix(in srgb,var(--fg) 5%,var(--bg)); --surface-2:color-mix(in srgb,var(--fg) 9%,var(--bg));
  --muted:color-mix(in srgb,var(--fg) 58%,var(--bg));
  --line:color-mix(in srgb,var(--fg) 11%,transparent); --line-strong:color-mix(in srgb,var(--fg) 24%,transparent);
  --ink:#0b100f; /* dark tint used for veils over footage, same in every theme */
  --on-film:#f4f1ea;
  --display:"Changa","IBM Plex Sans Arabic",Tahoma,sans-serif;
  --sans:"IBM Plex Sans Arabic",Tahoma,"Segoe UI",sans-serif;
  --gutter:clamp(16px,2.6vw,40px); --section:clamp(80px,9vw,144px);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:clamp(15px,1.05vw,17px);line-height:1.65;direction:rtl;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.disp{font-family:var(--display);font-weight:800;letter-spacing:0;line-height:1}
.eyebrow{display:flex;align-items:center;gap:.7rem;font-size:.8rem;font-weight:500;letter-spacing:.06em;color:var(--muted)}
.eyebrow::before{content:"";width:.5rem;height:.5rem;border-radius:99px;background:var(--accent);flex:none}
.wrap{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.num{font-variant-numeric:tabular-nums}

/* reveal system */
.ln{display:block;overflow:hidden;padding-block:.06em}
.ln>span{display:block;transform:translateY(110%);transition:transform .9s var(--ease);transition-delay:var(--d,0ms)}
.in .ln>span,.ln.in>span{transform:none}
.rv{opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}

/* ---------- preloader ---------- */
.pre{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
  padding:max(var(--gutter),env(safe-area-inset-top,0px)) max(var(--gutter),env(safe-area-inset-right,0px)) max(var(--gutter),env(safe-area-inset-bottom,0px)) max(var(--gutter),env(safe-area-inset-left,0px));
  background:var(--bg);transition:transform .7s cubic-bezier(.22,1,.36,1)}
.pre.out{transform:translateY(-100%)}
.pre .lab{transition:opacity .3s}
.pre.fade .lab{opacity:0}
.pre .brand{font-size:clamp(1.4rem,2vw,1.8rem)}
.pre .count{font-size:clamp(4rem,9vw,8rem);direction:ltr}
.pre .count i{font-style:normal;color:var(--accent)}
.pre .sub{font-size:.8rem;color:var(--muted);margin-top:.4rem}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none}
.nav nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;pointer-events:auto;
  padding:calc(1.1rem + env(safe-area-inset-top,0px)) max(var(--gutter),env(safe-area-inset-right,0px)) 1.1rem max(var(--gutter),env(safe-area-inset-left,0px))}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.logo b{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:99px;border:1px solid var(--line-strong);font-family:var(--display);font-weight:700;background:color-mix(in srgb,var(--bg) 40%,transparent);backdrop-filter:blur(6px)}
.logo span{font-size:.85rem;letter-spacing:.04em;color:var(--on-film);text-shadow:0 1px 10px rgba(0,0,0,.5);transition:color .3s}
.links{display:flex;gap:2rem}
.links a{position:relative;text-decoration:none;font-size:.85rem;color:color-mix(in srgb,var(--on-film) 78%,transparent);text-shadow:0 1px 10px rgba(0,0,0,.5);transition:color .3s}
.links a::after{content:"";position:absolute;bottom:-.3rem;right:0;height:1px;width:0;background:var(--accent);transition:width .35s var(--ease)}
.links a:hover{color:var(--on-film)}.links a:hover::after{width:100%}
.cta{background:var(--accent);color:var(--on-accent);padding:.55rem 1.1rem;border-radius:99px;font-weight:600;font-size:.88rem;text-decoration:none}
@media (max-width:820px){.links{display:none}.logo span{display:none}}

/* ---------- hero film ---------- */
.film{position:relative;height:540vh}
.stage{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;background:var(--ink);color:var(--on-film)}
.stage.empty{background:radial-gradient(120% 90% at 50% 10%,color-mix(in srgb,var(--accent) 30%,var(--ink)),var(--ink))}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.veil-top{position:absolute;inset:0 0 auto;height:38%;background:linear-gradient(to bottom,color-mix(in srgb,var(--ink) 85%,transparent),transparent);pointer-events:none}
.veil-bot{position:absolute;inset:auto 0 0;height:42%;background:linear-gradient(to top,var(--bg),color-mix(in srgb,var(--ink) 55%,transparent) 45%,transparent);pointer-events:none}
.h-top{position:absolute;inset:0 0 auto;display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;padding-top:calc(6.5rem + env(safe-area-inset-top,0px));pointer-events:none}
.roles{font-size:clamp(1.4rem,2.6vw,2.6rem);line-height:1.05}
.h-desc{max-width:24rem;color:color-mix(in srgb,var(--on-film) 85%,transparent);text-align:left;font-size:.98rem}
.giant{position:absolute;inset:auto 0 0;text-align:center;pointer-events:none;transform:translateY(12%)}
.giant .disp{font-size:clamp(6.5rem,24vw,24rem);color:var(--accent);line-height:.9;white-space:nowrap}
.cue{position:absolute;bottom:calc(1.6rem + env(safe-area-inset-bottom,0px));right:max(var(--gutter),env(safe-area-inset-right,0px));display:flex;align-items:center;gap:.7rem;font-size:.78rem;color:var(--muted);pointer-events:none}
.cue::before{content:"";width:2.5rem;height:1px;background:var(--accent)}
.mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none;opacity:0}
.mid .disp{font-size:clamp(2.6rem,7vw,6rem);text-shadow:0 4px 30px rgba(0,0,0,.45)}
.choose{position:absolute;inset:auto 0 0;padding-bottom:calc(8vh + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:1rem;opacity:0;visibility:hidden}
.choose h2{font-size:clamp(2rem,5vw,4.2rem);text-align:center}
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.pill{display:flex;align-items:center;gap:.8rem;background:#f4f1eaf2;color:#0b100f;padding:.8rem 1.3rem;border-radius:99px;font-weight:600;box-shadow:0 10px 40px rgba(0,0,0,.35);transition:transform .3s var(--ease)}
.pill:hover{transform:translateY(-3px)}
.pill small{font-weight:500;color:#5b625e}
.pill .ar{width:1.6rem;height:1.6rem;border-radius:99px;background:var(--accent);display:grid;place-items:center}
.pill .ar svg{width:.8rem;height:.8rem}
.rail{position:absolute;left:calc(14px + env(safe-area-inset-left,0px));top:32%;bottom:32%;width:2px;background:color-mix(in srgb,var(--on-film) 20%,transparent)}
.rail span{position:absolute;inset:0 0 auto;height:0;background:var(--accent)}
@media (max-width:700px){.h-top{flex-direction:column;gap:1rem}.h-desc{text-align:right;max-width:20rem;font-size:.9rem}}

/* ---------- marquee ---------- */
.marquee{overflow:hidden;border-block:1px solid var(--line);padding-block:1.8rem;direction:ltr}
.track{display:flex;width:max-content;animation:mq 26s linear infinite}
.track span{display:flex;align-items:center;font-size:clamp(1.8rem,3.4vw,3.2rem);white-space:nowrap;direction:rtl}
.track span::after{content:"";width:.6rem;height:.6rem;border-radius:99px;background:var(--accent);margin-inline:2rem}
@keyframes mq{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.sec{padding-block:var(--section)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem}
.sec-head h2{margin-top:1.4rem;font-size:clamp(2.4rem,5.4vw,5rem);max-width:14ch}
.tag{font-size:.8rem;color:var(--muted);letter-spacing:.06em}
.depts{margin-top:4rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));column-gap:var(--gutter);row-gap:4rem}
.dept:nth-child(even){margin-top:6rem}
@media (max-width:900px){.dept:nth-child(even){margin-top:0}}
.dept button{display:block;width:100%;text-align:right}
.ph{position:relative;aspect-ratio:16/11;max-width:100%;overflow:hidden;border-radius:2px;background:var(--surface)}
.ph img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.85) contrast(1.05);transform:scale(1.02);transition:filter .6s var(--ease),transform 1.2s var(--ease)}
.ph::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 50% 120%,color-mix(in srgb,var(--ink) 60%,transparent),transparent 60%)}
.dept button:hover .ph img,.dept button:focus-visible .ph img{filter:none;transform:scale(1.06)}
.dept .row{margin-top:1.4rem;border-top:1px solid var(--line);padding-top:1.2rem;display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem}
.dept h3{font-size:clamp(1.5rem,2.2vw,2rem);font-weight:700;font-family:var(--display);transition:color .35s}
.dept button:hover h3{color:var(--accent)}
.dept p{margin-top:.5rem;color:var(--muted);max-width:44ch}
.dept .meta{text-align:left;flex:none;font-size:.8rem;color:var(--muted)}
.dept .meta b{display:block;color:var(--accent);font-weight:600;margin-top:.3rem}
.chips{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.4rem}
.chips span{font-size:.78rem;border:1px solid var(--line-strong);padding:.15rem .65rem;border-radius:99px;color:color-mix(in srgb,var(--fg) 80%,transparent)}
.stats{margin-top:4rem;display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.stats>div{display:flex;flex-direction:column;gap:1rem;padding:2.6rem 0;border-bottom:1px solid var(--line);min-width:0}
.stats>div+div{border-right:1px solid var(--line);padding-right:2rem}
.stats dd{font-size:clamp(3rem,6vw,6rem);direction:ltr;text-align:right;transition:color .35s}
.stats>div:hover dd{color:var(--accent)}
.stats dt{color:var(--muted);max-width:20ch}
@media (max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.stats>div:nth-child(3){border-right:0;padding-right:0}}
@media (max-width:480px){.stats{grid-template-columns:1fr}.stats>div+div{border-right:0;padding-right:0}}
.contact h2{margin-top:1.4rem;font-size:clamp(2.6rem,7vw,7rem);max-width:16ch}
.contact .lead{margin-top:2rem;color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.35rem);max-width:44ch}
.phone{margin-top:2.6rem;display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.phone strong{font-family:var(--sans);font-weight:600;font-size:clamp(1.8rem,4.5vw,4.6rem);direction:ltr;letter-spacing:.01em;user-select:all}
.copy{border:1px solid var(--line-strong);padding:.5rem 1rem;border-radius:99px;font-size:.85rem;transition:border-color .3s,color .3s}
.copy:hover{border-color:var(--accent);color:var(--accent)}
.foot{margin-top:var(--section);border-top:1px solid var(--line);padding-block:3rem;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem}
.foot .sig{font-size:clamp(2rem,3.4vw,3.2rem)}
.foot small{display:block;margin-top:1rem;color:var(--muted);font-size:.8rem}
.foot ul{display:grid;gap:.5rem}
.foot ul a{text-decoration:none;color:var(--muted);transition:color .3s}.foot ul a:hover{color:var(--fg)}
.foot .copyr{color:var(--muted);font-size:.8rem;text-align:left}
@media (max-width:820px){.foot{grid-template-columns:1fr}.foot .copyr{text-align:right}}

/* ---------- department view ---------- */
.view{position:fixed;inset:0;z-index:80;background:var(--bg);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);transition:transform .75s cubic-bezier(.22,1,.36,1);visibility:hidden}
.view.open{transform:none;visibility:visible}
.vbar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:calc(1rem + env(safe-area-inset-top,0px)) max(var(--gutter),env(safe-area-inset-right,0px)) 1rem max(var(--gutter),env(safe-area-inset-left,0px));
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.back{display:flex;align-items:center;gap:.5rem;border:1px solid var(--line-strong);padding:.5rem 1rem;border-radius:99px;font-size:.88rem;transition:border-color .3s}
.back:hover{border-color:var(--accent)}
.back svg{width:1rem;height:1rem}
.vtabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.vtabs::-webkit-scrollbar{display:none}
.vtabs button{white-space:nowrap}
.back{white-space:nowrap;flex:none}
@media (max-width:520px){.back .long{display:none}}
.vtabs button{font-size:.82rem;padding:.4rem .9rem;border-radius:99px;color:var(--muted);border:1px solid transparent}
.vtabs button[aria-pressed="true"]{color:var(--fg);border-color:var(--line-strong)}
.vhead{padding-top:2rem}
.vhead h1{margin-top:1.2rem;font-size:clamp(3rem,9vw,9rem);line-height:.92}
.vhead p{margin-top:1.6rem;max-width:48ch;color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.3rem)}
.picker{margin-top:3.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));border-top:1px solid var(--line)}
.picker button{display:flex;align-items:baseline;gap:1.2rem;text-align:right;padding:1.5rem 0;border-bottom:1px solid var(--line)}
.picker button+button{padding-right:2rem;border-right:1px solid var(--line)}
@media (max-width:640px){.picker button+button{padding-right:0;border-right:0}}
.picker i{font-style:normal;font-size:.8rem;color:var(--muted);letter-spacing:.1em}
.picker b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2vw,1.75rem);color:var(--muted);transition:color .3s}
.picker small{display:block;color:var(--muted);font-size:.82rem;margin-top:.2rem}
.picker button::after{content:"";margin-right:auto;align-self:center;height:1px;width:0;background:var(--accent);transition:width .4s var(--ease)}
.picker button[aria-pressed="true"] i{color:var(--accent)}
.picker button[aria-pressed="true"] b{color:var(--fg)}
.picker button[aria-pressed="true"]::after{width:2.5rem}

.doc{position:relative;margin-top:4rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--gutter);align-items:start;padding-bottom:clamp(5rem,9vw,8rem)}
.doc .info{align-self:start;padding-top:1rem}
.doc .words{font-size:clamp(1.5rem,2.8vw,2.8rem);line-height:1.08}
.doc .bio{margin-top:1.8rem;color:var(--muted);max-width:42ch;font-size:clamp(1rem,1.25vw,1.2rem)}
.doc .mini{margin-top:2.4rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.doc .mini div{padding:1.2rem 0;min-width:0}
.doc .mini div+div{border-right:1px solid var(--line);padding-right:1.2rem}
.doc .mini dd{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,3vw,2.8rem);line-height:1;direction:ltr;text-align:right}
.doc .mini dt{margin-top:.5rem;font-size:.8rem;color:var(--muted)}
.portrait{position:relative;aspect-ratio:4/5;max-width:100%;overflow:hidden;border-radius:2px;background:var(--surface)}
.portrait video,.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--ink) 80%,transparent),transparent 45%)}
.pwrap{position:relative;container-type:inline-size}
.dname{position:absolute;inset:auto -12% -.42em;z-index:2;text-align:center;pointer-events:none;font-size:16.5cqw}
.dname .ln{padding-bottom:.25em}
.dname .disp{font-size:1em;color:var(--accent);line-height:1.15;white-space:nowrap;text-shadow:0 6px 30px rgba(0,0,0,.35)}
@media (max-width:820px){.doc{grid-template-columns:1fr;padding-bottom:0}.doc .pwrap{order:-1;margin-bottom:3.2rem}.dname{inset:auto 0 -.42em}}

.blk{padding-block:clamp(56px,7vw,110px);border-top:1px solid var(--line)}
.blk h2{margin-top:1.3rem;font-size:clamp(2.2rem,4.6vw,4.4rem)}
.procs{margin-top:3rem}
.procs li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:1.6rem;align-items:baseline;border-top:1px solid var(--line);padding-block:1.8rem}
.procs li:last-child{border-bottom:1px solid var(--line)}
.procs .n{font-family:var(--display);font-weight:700;font-size:1.6rem;color:var(--accent);direction:ltr}
.procs h3{font-size:clamp(1.3rem,2vw,1.75rem);font-weight:600}
.procs p{margin-top:.5rem;color:var(--muted);max-width:52ch}
.procs .m{text-align:left;font-size:.82rem;color:var(--muted);line-height:1.9}
.procs .m b{color:var(--fg);font-weight:500}
@media (max-width:640px){.procs li{grid-template-columns:auto minmax(0,1fr)}.procs .m{grid-column:2;text-align:right;margin-top:.7rem}}
.arr{margin-top:3rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:var(--gutter)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1.6rem;min-width:0}
.card h3{font-family:var(--display);font-weight:700;font-size:1.35rem;margin-bottom:1.1rem}
.week{display:grid;gap:.1rem}
.week div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--line);font-size:.92rem}
.week div:last-child{border-bottom:0}
.week span{color:var(--muted)}
.week b{font-weight:500;font-variant-numeric:tabular-nums}
.week .off b{color:var(--muted);font-weight:400}
.week .today span,.week .today b{color:var(--accent)}
.checks li{position:relative;padding:.5rem 1.6rem .5rem 0;font-size:.95rem;border-bottom:1px solid var(--line)}
.checks li:last-child{border-bottom:0}
.checks li::before{content:"";position:absolute;right:0;top:.95rem;width:.7rem;height:.38rem;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.steps{counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:.9rem;padding:.55rem 0;font-size:.95rem}
.steps li::before{content:counter(s);flex:none;width:1.7rem;height:1.7rem;border-radius:99px;border:1px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-size:.8rem;font-family:var(--display)}
.book{margin-top:var(--gutter);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--gutter);align-items:start}
.book h3{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,3rem);line-height:1.05}
.book p{color:var(--muted);margin-top:.8rem}
.form{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.form label{display:grid;gap:.3rem;font-size:.8rem;color:var(--muted);min-width:0}
.form input,.form select{background:var(--bg);border:1px solid var(--line-strong);border-radius:6px;padding:.7rem .8rem;font-size:.95rem;min-width:0;width:100%}
.form .full{grid-column:1/-1}
.form button{grid-column:1/-1;background:var(--accent);color:var(--on-accent);font-weight:600;padding:.85rem;border-radius:6px}
.ok{grid-column:1/-1;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:6px;padding:1rem;font-size:.95rem}
@media (max-width:820px){.book{grid-template-columns:1fr}}
@media (max-width:420px){.form{grid-template-columns:1fr}}
.vfoot{padding-block:3rem 4rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem}
.vfoot button{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3vw,2.4rem);display:flex;align-items:center;gap:.8rem;transition:color .3s}
.vfoot button:hover{color:var(--accent)}
.vfoot small{color:var(--muted)}

@media (prefers-reduced-motion:reduce){
  .pre{display:none}.track{animation:none}
  .ln>span,.rv{transition:none;transform:none;opacity:1}
  .view{transition:none}
}

/* ---------- per-clinic additions ---------- */
/* nav turns solid once the film is scrolled past (needed for light themes) */
.nav.solid nav{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav.solid .logo span,.nav.solid .links a{color:var(--fg);text-shadow:none}
.nav.solid .logo b{background:transparent}
.nav nav{transition:background .3s}
/* giant brand name and doctor names stay on footage, keep them legible */
.giant .disp{text-shadow:0 8px 40px rgba(0,0,0,.25)}
/* reception buttons: many departments */
.pills.many{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));width:min(100%,960px)}
.pills.many .pill{padding:.65rem 1rem;justify-content:space-between}
@media (max-width:640px){
  .pills.many{grid-template-columns:1fr 1fr;gap:.5rem}
  .pills.many .pill{border-radius:16px;padding:.6rem .75rem;font-size:.85rem;gap:.4rem}
  .pills.many .pill small{display:none}
  .pills.many .pill .ar{width:1.3rem;height:1.3rem}
  .choose h2{font-size:clamp(1.6rem,7vw,2.4rem)}
}
/* departments as a list (good for 5+ departments) */
.depts.list{display:block;margin-top:3rem;border-top:1px solid var(--line)}
.depts.list .dept{margin-top:0!important;border-bottom:1px solid var(--line)}
.depts.list .dept button{display:grid;grid-template-columns:minmax(0,1fr) clamp(140px,22vw,300px);gap:clamp(1rem,3vw,3rem);align-items:center;padding-block:1.6rem}
.depts.list .ph{aspect-ratio:16/10;grid-column:2;grid-row:1 / span 2}
.depts.list .row{margin-top:0;border-top:0;padding-top:0;grid-column:1;grid-row:1}
.depts.list .chips{grid-column:1;grid-row:2;margin-top:0}
@media (max-width:640px){.depts.list .dept button{grid-template-columns:minmax(0,1fr) 110px}.depts.list .dept p{display:none}.depts.list .chips{display:none}}
.logo b.has-img{background:#fff;overflow:hidden;padding:.25rem}
.logo b.has-img img{width:100%;height:100%;object-fit:contain}