/* ============================================================
   HASAN — copywriter portfolio
   Palette: ink / paper / grey (monochrome, per brief)
   ============================================================ */
:root{
  --ink:#121212;
  --ink-2:#3a3a3a;
  --paper:#ffffff;
  --paper-2:#f5f4f2;
  --line:#e5e4e1;
  --muted:#6f6f6d;
  --muted-2:#a3a3a0;

  --fs-hero: clamp(2.6rem, 6.6vw, 5.6rem);
  --fs-h2:   clamp(1.9rem, 3.8vw, 3.1rem);
  --fs-h3:   clamp(1.2rem, 1.7vw, 1.45rem);
  --fs-lede: clamp(1.05rem, 1.6vw, 1.3rem);
  --fs-body: 1.06rem;
  --fs-sm:   0.82rem;

  --maxw: 1180px;
  --pad: clamp(1.25rem, 5vw, 4rem);
  --header-h: 70px;

  --ease: cubic-bezier(.4,.06,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--paper)}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* Latin fragments (platform names, wordmarks) prefer IBM Plex Sans */
.lat{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',sans-serif;direction:ltr;unicode-bidi:isolate}

/* Skip link */
.skip{position:absolute;inset-inline-start:1rem;top:-60px;background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;z-index:200;transition:top .2s}
.skip:focus{top:1rem}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- Header / nav ---------- */
.site-header{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:100;
  height:var(--header-h);
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:flex;align-items:baseline;gap:.55rem;font-weight:700;font-size:1.35rem;letter-spacing:-.01em}
.brand small{font-weight:500;font-size:.7rem;color:var(--muted);letter-spacing:.16em}
.brand:hover{opacity:.7}

.nav-links{display:flex;align-items:center;gap:.25rem;list-style:none}
.nav-links a{
  position:relative;display:block;padding:.5rem .7rem;font-size:.92rem;font-weight:500;
  color:var(--muted);transition:color .2s var(--ease);white-space:nowrap;
}
.nav-links a::after{
  content:"";position:absolute;inset-inline:.7rem;bottom:.32rem;height:1.5px;background:var(--ink);
  transform:scaleX(0);transform-origin:center;transition:transform .28s var(--ease);
}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after{transform:scaleX(1)}

.nav-toggle{
  display:none;width:44px;height:44px;border:1px solid var(--line);background:transparent;
  cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:"";display:block;width:20px;height:1.5px;background:var(--ink);transition:.28s var(--ease);position:relative;
}
.nav-toggle span::before{position:absolute;top:-6px}
.nav-toggle span::after{position:absolute;top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---------- Views (SPA pages) ---------- */
main{padding-top:var(--header-h)}
.view{display:none}
.view.is-active{display:block;animation:viewIn .55s var(--ease) both}
@keyframes viewIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.page{padding-block:clamp(3.5rem,7vw,6rem)}
.page + .page-block{margin-top:0}

/* Shared section pieces */
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;font-size:var(--fs-sm);font-weight:600;
  letter-spacing:.14em;color:var(--muted);text-transform:none;margin-bottom:1.4rem;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--ink);display:inline-block}
h1,h2,h3{line-height:1.18;font-weight:700;letter-spacing:-.01em}
.section-title{font-size:var(--fs-h2);max-width:20ch}
.lede{font-size:var(--fs-lede);color:var(--ink-2);font-weight:400;max-width:60ch;line-height:1.8}

/* Buttons */
.actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.btn{
  display:inline-flex;align-items:center;gap:.55rem;font-weight:600;font-size:.95rem;
  padding:.9rem 1.7rem;border:1.5px solid var(--ink);cursor:pointer;
  transition:background .25s var(--ease),color .25s var(--ease);background:transparent;color:var(--ink);
}
.btn--solid{background:var(--ink);color:var(--paper)}
.btn--solid:hover{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- HERO ---------- */
.hero{padding-block:clamp(3rem,8vw,6.5rem) clamp(3rem,6vw,5rem);position:relative}
.hero__eyebrow{font-size:var(--fs-sm);font-weight:600;letter-spacing:.12em;color:var(--muted);margin-bottom:1.8rem}
.hero__title{
  font-size:var(--fs-hero);font-weight:700;line-height:1.14;letter-spacing:-.02em;max-width:15ch;
}
.hero__sub{margin-top:1.8rem;font-size:var(--fs-lede);color:var(--ink-2);max-width:52ch;font-weight:400;line-height:1.8}

/* live copy-edit signature */
.edit{position:relative;display:inline-block;white-space:nowrap}
.edit::after{
  content:"";position:absolute;inset-inline:-.05em;top:52%;height:.09em;background:var(--ink);
  width:0;transition:width .45s var(--ease);
}
.edit.strike::after{width:calc(100% + .1em)}
.edit.reset::after{transition:none;width:0}
.edit__word{display:inline-block;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.edit.out .edit__word{opacity:0;transform:translateY(-.15em)}

/* ---------- Pillars (home) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(3rem,6vw,4.5rem)}
.pillar{background:var(--paper);padding:clamp(1.6rem,3vw,2.4rem)}
.pillar h3{font-size:var(--fs-h3);margin-bottom:.7rem}
.pillar p{color:var(--muted);font-size:.98rem;line-height:1.75}
.pillar .num{font-family:'IBM Plex Sans';font-size:.8rem;color:var(--muted-2);letter-spacing:.1em;display:block;margin-bottom:1rem}

/* ---------- Feature strip (home selected work teaser) ---------- */
.strip{margin-top:clamp(3.5rem,7vw,5.5rem);padding-block:clamp(2.5rem,5vw,3.5rem);
  border-block:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;
  gap:2rem;flex-wrap:wrap}
.strip h2{font-size:clamp(1.5rem,3vw,2.2rem);max-width:22ch}

/* ---------- About ---------- */
.about-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.portrait{aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--line);
  display:flex;align-items:flex-end;padding:1.4rem;position:relative;overflow:hidden}
.portrait .ph{font-size:.8rem;color:var(--muted-2);letter-spacing:.05em}
.portrait::before{content:"حسن";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:clamp(4rem,12vw,9rem);font-weight:700;color:#ededea;letter-spacing:-.03em}
.prose p{margin-bottom:1.3rem;color:var(--ink-2);line-height:1.9}
.prose p:first-child{color:var(--ink);font-size:1.15rem}

.principles{list-style:none;margin-top:2.4rem;border-top:1px solid var(--line)}
.principles li{display:flex;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.principles .k{font-family:'IBM Plex Sans';font-size:.8rem;color:var(--muted-2);min-width:2.2rem}
.principles .v{font-weight:600;font-size:1.05rem}

.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2.4rem}
.tag{border:1px solid var(--line);padding:.4rem .9rem;font-size:.85rem;color:var(--muted);border-radius:999px}

/* ---------- Services ---------- */
.svc-list{margin-top:clamp(2.5rem,5vw,3.5rem);border-top:1px solid var(--line)}
.svc{display:grid;grid-template-columns:5rem 1fr;gap:1.5rem;padding:clamp(1.6rem,3.5vw,2.4rem) 0;
  border-bottom:1px solid var(--line);align-items:start;transition:padding-inline-start .3s var(--ease)}
.svc:hover{padding-inline-start:.6rem}
.svc__num{font-family:'IBM Plex Sans';font-size:1rem;color:var(--muted-2);padding-top:.35rem}
.svc__title{font-size:var(--fs-h3);margin-bottom:.6rem}
.svc__desc{color:var(--muted);max-width:60ch;margin-bottom:1rem;line-height:1.8}
.svc__points{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;list-style:none}
.svc__points li{font-size:.9rem;color:var(--ink-2);position:relative;padding-inline-start:.9rem}
.svc__points li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:5px;height:5px;background:var(--ink)}

/* ---------- Portfolio ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(2.5rem,5vw,3.5rem)}
.work{background:var(--paper);padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.7rem;
  min-height:230px;transition:background .25s var(--ease)}
.work:hover{background:var(--paper-2)}
.work__cat{font-size:var(--fs-sm);font-weight:600;letter-spacing:.06em;color:var(--muted)}
.work__title{font-size:1.3rem;font-weight:700;line-height:1.3;margin-top:auto}
.work__result{color:var(--muted);font-size:.95rem}
.work__link{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;margin-top:.4rem}
.work__link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .25s var(--ease)}
.work:hover .work__link svg{transform:translate(-3px,-3px)}

/* Channels (social) */
.channels{margin-top:clamp(3rem,6vw,4.5rem);border-top:1px solid var(--line);padding-top:clamp(2rem,4vw,3rem)}
.channels h3{font-size:var(--fs-h3);margin-bottom:1.6rem}
.channel-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.channel{background:var(--paper);padding:1.5rem;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;transition:background .25s var(--ease)}
.channel:hover{background:var(--ink);color:var(--paper)}
.channel .name{font-weight:600}
.channel .handle{font-size:.82rem;color:var(--muted)}
.channel:hover .handle{color:var(--muted-2)}
.channel svg{width:22px;height:22px;fill:currentColor;flex-shrink:0}

/* ---------- Clients marquee ---------- */
.marquee-wrap{margin-top:clamp(2.5rem,5vw,3.5rem)}
.marquee{overflow:hidden;position:relative;direction:ltr;padding-block:1.5rem;border-block:1px solid var(--line);
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee__track{display:flex;gap:clamp(2.5rem,5vw,4rem);width:max-content;align-items:center;
  animation:marquee 55s linear infinite}
.marquee:hover .marquee__track,.marquee:focus-within .marquee__track{animation-play-state:paused}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
.logo-img{width:clamp(64px,8vw,92px);height:clamp(64px,8vw,92px);border-radius:18%;object-fit:cover;
  flex-shrink:0;border:1px solid var(--line);background:#fff;
  transition:transform .35s var(--ease)}
.logo-img:hover{transform:translateY(-4px)}
@media (prefers-reduced-motion:reduce){.marquee{overflow-x:auto}}
/* ---------- Published projects: preview cards ---------- */
.pub-filter{display:flex;gap:.5rem;margin-top:2rem;flex-wrap:wrap}
.pub-filter--clients{margin-top:.6rem}
.pf{border:1px solid var(--line);padding:.4rem 1.05rem;font-size:.88rem;font-weight:500;
  color:var(--muted);border-radius:999px;transition:.22s}
.pf:hover{border-color:var(--ink);color:var(--ink)}
.pf.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pub-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.9rem,1.8vw,1.3rem);margin-top:1.8rem}
.pubc{grid-column:span 4;position:relative;overflow:hidden;border:1px solid var(--line);
  background:var(--paper2);aspect-ratio:4/5;display:flex;flex-direction:column;
  justify-content:flex-end;padding:clamp(1rem,2vw,1.4rem);
  transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.pubc:hover{border-color:var(--ink);transform:translateY(-4px);
  box-shadow:0 18px 40px -24px rgba(18,18,18,.4)}
.pubc--img{padding:0}
.pubc__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease)}
.pubc:hover .pubc__img{transform:scale(1.04)}
.pubc__bg{position:absolute;inset-inline-end:-.06em;top:-.18em;font-size:clamp(6rem,12vw,9.5rem);
  font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--line);
  transition:-webkit-text-stroke-color .35s var(--ease);pointer-events:none}
@supports not (-webkit-text-stroke:1px black){.pubc__bg{color:#eceae7}}
.pubc:hover .pubc__bg{-webkit-text-stroke-color:var(--ink)}
.pubc__client{position:absolute;top:.8rem;inset-inline-start:.8rem;background:var(--ink);
  color:var(--paper);font-size:.72rem;font-weight:600;padding:.28rem .75rem;z-index:2;letter-spacing:.02em}
.pubc__play{position:absolute;top:.8rem;inset-inline-end:.8rem;width:40px;height:40px;
  border:1.5px solid var(--ink);border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.68rem;padding-inline-start:.18rem;background:var(--paper);z-index:2}
.pubc__foot{position:relative;z-index:2;display:flex;flex-direction:column;gap:.5rem}
.pubc--img .pubc__foot{background:linear-gradient(0deg,rgba(255,255,255,.97),rgba(255,255,255,.86));
  padding:.9rem clamp(1rem,2vw,1.2rem) 1rem;border-top:1px solid var(--line)}
.pubc__title{font-size:clamp(1rem,1.7vw,1.2rem);font-weight:700;line-height:1.4}
.pubc__meta{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap}
.pubc__chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;
  padding:.18rem .7rem;font-size:.72rem;color:var(--muted)}
.pubc__go{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600}
.pubc__go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  transition:transform .3s var(--ease)}
.pubc:hover .pubc__go svg{transform:translate(-3px,-3px)}
.pubc.hid{display:none}
/* ---------- Campaign case studies ---------- *//* ---------- Campaign case studies ---------- *//* ---------- Campaign case studies ---------- */
.camps-head{margin-top:clamp(3rem,6vw,4.5rem)}
.camps-head h3{font-size:var(--fs-h3);margin-bottom:.6rem}
.camps-head p{color:var(--muted);max-width:60ch}
.camp{margin-top:clamp(2.2rem,4.5vw,3.4rem)}
.camp>.wrap,.camps-head{max-width:1000px}
.camp__spread{display:grid;grid-template-columns:7fr 5fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.camp__hero{position:relative;overflow:hidden;background:var(--paper2);min-height:clamp(250px,30vw,400px)}
.camp__hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:pointer;
  transition:transform .6s var(--ease)}
.camp__hero:hover img{transform:scale(1.03)}
.camp__panel{background:var(--ink);color:var(--paper);padding:clamp(1.6rem,3.2vw,2.8rem);
  display:flex;flex-direction:column;justify-content:flex-end;gap:1rem}
.camp__kicker{display:inline-flex;align-items:center;gap:.55rem;font-size:.78rem;font-weight:600;
  letter-spacing:.14em;color:rgba(255,255,255,.6)}
.camp__kicker::before{content:"‸";font-size:1.25em;line-height:0;color:#fff;transform:translateY(.18em)}
.camp__title{font-size:clamp(1.6rem,3.2vw,2.5rem);color:#fff;line-height:1.25}
.camp__desc{color:rgba(255,255,255,.78);font-size:.97rem;line-height:1.9}
.camp__meta{display:flex;flex-wrap:wrap;gap:.45rem}
.camp__meta span{border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:.22rem .75rem;
  font-size:.78rem;color:rgba(255,255,255,.75)}
.camp__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(.8rem,1.6vw,1.3rem);
  margin-top:clamp(.8rem,1.6vw,1.3rem)}
.tile{grid-column:span 2;position:relative;overflow:hidden;border:1px solid var(--line);
  background:var(--paper2);cursor:pointer}
.tile::before{content:"";display:block;padding-top:120%}
.tile--wide{grid-column:span 4}
.tile--wide::before{padding-top:59%}
.tile img,.tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease)}
.tile:hover img{transform:scale(1.045)}
.tile:nth-child(even):not(.tile--wide){margin-top:clamp(.9rem,1.8vw,1.6rem)}
.tile__n{position:absolute;top:.7rem;inset-inline-start:.7rem;background:var(--ink);color:var(--paper);
  font-size:.7rem;letter-spacing:.08em;padding:.22rem .6rem;z-index:2;pointer-events:none}
.tile--video{cursor:default}

/* ---------- About & Training galleries ---------- */
.gal-head{margin-top:clamp(2.6rem,5vw,4rem)}
.camp__grid--about{margin-top:1.2rem}
.camp__grid--about .tile{grid-column:span 2;margin-top:0!important}
.camp__grid--about .tile::before{padding-top:126%}
.portrait{position:relative}
.portrait--img{padding:0}
.portrait--img::before{display:none}
.portrait--img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  cursor:pointer;transition:transform .5s var(--ease)}
.portrait--img:hover img{transform:scale(1.02)}
.tile img{transition:transform .55s var(--ease),filter .45s var(--ease)}
.feat{display:grid;grid-template-columns:5fr 7fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(2.6rem,5vw,4rem)}
.feat__poster{position:relative;overflow:hidden;background:var(--paper2);min-height:300px}
.feat__poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  cursor:pointer;transition:transform .5s var(--ease)}
.feat__poster:hover img{transform:scale(1.03)}
.feat__body{background:var(--paper);padding:clamp(1.6rem,3.2vw,2.6rem);display:flex;
  flex-direction:column;justify-content:center;gap:1rem;border-top:3px solid var(--ink)}
.feat__title{font-size:clamp(1.4rem,2.8vw,2rem);line-height:1.3}
.feat__desc{color:var(--muted);line-height:1.9;max-width:52ch}
.feat__body .btn{align-self:flex-start}
@media (max-width:900px){.feat{grid-template-columns:1fr}.feat__poster{min-height:0;aspect-ratio:4/5;max-height:420px}}

/* ---------- Justified galleries (no cropping) ---------- */
.jgal{margin-top:1.4rem}
.jrow{display:flex;gap:10px;margin-bottom:10px}
.jtile{position:relative;overflow:hidden;margin:0}
.jtile img,.jtile video{width:100%;height:auto;display:block;border:1px solid var(--line);
  transition:transform .5s var(--ease),filter .45s var(--ease)}
.jtile img{cursor:pointer}
.jtile:hover img{transform:scale(1.02)}
/* whole-tile link (external reels) + play badge for video/reel tiles */
.jtile__link{display:block;position:relative;cursor:pointer}
.jtile__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  width:52px;height:52px;border-radius:50%;display:grid;place-items:center;pointer-events:none;
  background:rgba(18,18,18,.42);color:#fff;font-size:1.05rem;line-height:1;padding-inline-start:3px;
  border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(2px);
  transition:transform .4s var(--ease),background .4s var(--ease)}
.jtile:hover .jtile__play{background:rgba(18,18,18,.62);transform:translate(-50%,-50%) scale(1.1)}
@media (max-width:640px){.jrow{flex-wrap:wrap}.jtile{width:100%!important}}
/* ---------- Campaign chapters ---------- */
.camp__no{margin-bottom:1rem}
.camp{padding-top:clamp(1.5rem,3vw,2.5rem);border-top:1px solid var(--line)}
.camp:first-of-type{border-top:none;padding-top:0}
.camp__spread--flip{grid-template-columns:5fr 7fr}
.camp__spread--flip .camp__hero{order:2}
.camp__spread--flip .camp__panel{order:1}
@media (max-width:900px){.camp__spread--flip .camp__hero{order:0}}
.camp-jump{display:flex;gap:.5rem;flex-wrap:wrap}
/* ---------- Reels rail (9:16) ---------- */
.pub-sub{font-size:var(--fs-h3);margin-top:clamp(2rem,4vw,2.8rem)}
.reelrail{display:flex;gap:clamp(.8rem,1.6vw,1.2rem);overflow-x:auto;padding:1.2rem 2px 1.4rem;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  -webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.reelrail::-webkit-scrollbar{height:6px}
.reelrail::-webkit-scrollbar-thumb{background:var(--line)}
.reelc{position:relative;flex:0 0 auto;width:clamp(190px,22vw,250px);aspect-ratio:9/16;
  overflow:hidden;border:1.5px solid var(--ink);background:var(--ink);scroll-snap-align:start;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.reelc:hover{transform:translateY(-6px);box-shadow:0 22px 44px -24px rgba(18,18,18,.5)}
.reelc__bg{position:absolute;inset:-8%;background-size:cover;background-position:center;
  filter:blur(16px) brightness(.55);transform:scale(1.15)}
.reelc__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;
  transition:transform .5s var(--ease)}
.reelc:hover .reelc__img{transform:scale(1.04)}
.reelc__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:54px;height:54px;
  border:1.5px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.85rem;padding-inline-start:.2rem;background:rgba(18,18,18,.35);
  backdrop-filter:blur(4px);z-index:3;transition:transform .3s var(--ease),background .3s}
.reelc:hover .reelc__play{transform:translate(-50%,-50%) scale(1.12);background:rgba(18,18,18,.55)}
.reelc__foot{position:absolute;inset-inline:0;bottom:0;z-index:2;padding:2.2rem .9rem .8rem;
  color:#fff;font-size:.88rem;font-weight:600;line-height:1.5;
  background:linear-gradient(0deg,rgba(18,18,18,.88),rgba(18,18,18,0))}
.reelc .pubc__client{z-index:3}
/* ---------- Lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(18,18,18,.94);z-index:300;display:none;
  align-items:center;justify-content:center;padding:2.5rem}
.lb.open{display:flex}
.lb figure{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin:0}
.lb img{max-width:92vw;max-height:82vh;border:1px solid rgba(255,255,255,.2)}
.lb figcaption{color:rgba(255,255,255,.65);font-size:.85rem;letter-spacing:.08em}
.lb__close,.lb__prev,.lb__next{position:absolute;width:46px;height:46px;border:1px solid rgba(255,255,255,.4);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.1rem;
  background:transparent;cursor:pointer;transition:.2s}
.lb__close:hover,.lb__prev:hover,.lb__next:hover{background:#fff;color:var(--ink)}
.lb__close{top:1.2rem;inset-inline-end:1.2rem}
.lb__prev{inset-inline-start:1.2rem;top:50%;transform:translateY(-50%)}
.lb__next{inset-inline-end:1.2rem;top:50%;transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){
  .marquee .clone{display:none}
  .tile--video{display:none}
}
.logo{display:flex;align-items:center;gap:.6rem;color:var(--muted-2);white-space:nowrap;
  transition:color .3s var(--ease)}
.logo:hover{color:var(--ink)}
.logo svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6}
.logo span{font-weight:600;font-size:1.15rem;letter-spacing:.01em}

/* ---------- Cards (training + free) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(2.5rem,5vw,3.5rem)}
.card{background:var(--paper);padding:clamp(1.6rem,3vw,2.3rem);display:flex;flex-direction:column;gap:.9rem;
  transition:background .25s var(--ease)}
.card:hover{background:var(--paper-2)}
.card__meta{display:flex;flex-wrap:wrap;gap:.5rem;font-size:var(--fs-sm)}
.card__meta span{border:1px solid var(--line);padding:.25rem .7rem;color:var(--muted);border-radius:999px}
.card__title{font-size:1.3rem;font-weight:700;line-height:1.3}
.card__desc{color:var(--muted);font-size:.96rem;line-height:1.75;flex:1}
.card__cta{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;font-size:.92rem;margin-top:.3rem}
.card__cta svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .25s var(--ease)}
.card:hover .card__cta svg{transform:translateY(2px)}
.card--free:hover .card__cta svg{transform:translateY(3px)}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);margin-top:clamp(2.5rem,5vw,3.5rem);align-items:start}
.form{display:flex;flex-direction:column;gap:1.3rem}
.field{display:flex;flex-direction:column;gap:.5rem}
.field label{font-size:.85rem;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{
  font-family:inherit;font-size:1rem;color:var(--ink);background:var(--paper);
  border:1px solid var(--line);padding:.9rem 1rem;transition:border-color .2s var(--ease);width:100%;
}
.field textarea{resize:vertical;min-height:130px;line-height:1.7}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink)}
.form-note{font-size:.88rem;color:var(--muted);margin-top:.2rem;min-height:1.2em}
.form-note.ok{color:var(--ink);font-weight:600}

.contact-side dl{border-top:1px solid var(--line)}
.contact-side .row{display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.contact-side dt{font-size:.85rem;color:var(--muted);font-weight:500}
.contact-side dd{font-weight:600;text-align:end}
.contact-side dd a:hover{opacity:.6}
.contact-social{display:flex;gap:.7rem;margin-top:1.8rem}
.contact-social a{width:46px;height:46px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  transition:background .25s var(--ease),color .25s var(--ease)}
.contact-social a:hover{background:var(--ink);color:var(--paper)}
.contact-social svg{width:20px;height:20px;fill:currentColor}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding-block:clamp(2.5rem,5vw,3.5rem);margin-top:clamp(3rem,6vw,5rem)}
.foot-top{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;align-items:flex-start}
.foot-brand{font-weight:700;font-size:1.5rem;letter-spacing:-.01em}
.foot-brand p{font-weight:400;font-size:.95rem;color:var(--muted);margin-top:.6rem;max-width:34ch;line-height:1.7}
.foot-nav{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;list-style:none}
.foot-nav a{font-size:.92rem;color:var(--muted);transition:color .2s}
.foot-nav a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;
  padding-top:1.6rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.foot-social{display:flex;gap:.5rem}
.foot-social a{width:38px;height:38px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:.25s var(--ease)}
.foot-social a:hover{background:var(--ink);color:var(--paper)}
.foot-social svg{width:17px;height:17px;fill:currentColor}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal-in{opacity:1;transform:none}
.pillar:nth-child(2){transition-delay:.08s}.pillar:nth-child(3){transition-delay:.16s}
.work:nth-child(2){transition-delay:.06s}.work:nth-child(3){transition-delay:.12s}
.work:nth-child(4){transition-delay:.18s}.work:nth-child(5){transition-delay:.24s}.work:nth-child(6){transition-delay:.3s}
.card:nth-child(2){transition-delay:.08s}.card:nth-child(3){transition-delay:.16s}.card:nth-child(4){transition-delay:.24s}
.channel:nth-child(2){transition-delay:.08s}.channel:nth-child(3){transition-delay:.16s}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .nav-toggle{display:flex}
  .nav-links{
    position:fixed;inset-block-start:var(--header-h);inset-inline:0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:.5rem var(--pad) 1.5rem;
    border-bottom:1px solid var(--line);transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:.3s var(--ease);max-height:calc(100vh - var(--header-h));overflow:auto;
  }
  .nav-links.open{transform:none;opacity:1;pointer-events:auto}
  .nav-links a{padding:.95rem .2rem;font-size:1.05rem;border-bottom:1px solid var(--line)}
  .nav-links a::after{display:none}
  .nav-links a.active{font-weight:700}
  .about-grid{grid-template-columns:1fr}
  .portrait{max-width:340px}
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .camp__spread{grid-template-columns:1fr}
  .camp__hero{min-height:0;aspect-ratio:4/3}
}
@media (max-width:640px){
  .tile{grid-column:span 3}
  .tile:nth-child(even):not(.tile--wide){margin-top:0}
  .tile--wide::before{padding-top:59%}
  .pubc{grid-column:span 6}
}
@media (max-width:520px){
  .pubc{grid-column:span 12}
  .pillars,.work-grid,.card-grid,.channel-row{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr;gap:.5rem}
  .svc__num{padding-top:0}
  .strip{flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
  .view.is-active{animation:none}
}

/* ---------- Mobile polish ---------- */
body{overflow-x:clip;-webkit-tap-highlight-color:transparent}
@media (max-width:640px){
  .page{padding-block:2.4rem}
  .hero{padding-block:2.2rem 2rem}
  .hero__sub{font-size:1.02rem}
  .lede{font-size:1.02rem}
  .jrow{gap:8px;margin-bottom:8px}
  .camp__panel{padding:1.4rem 1.2rem}
  .camp__title{font-size:1.45rem}
  .feat__body{padding:1.4rem 1.2rem}
  .pub-sub{font-size:1.15rem}
  .reelc{width:min(68vw,240px)}
  .reelrail{padding-bottom:1rem}
  .lb{padding:1rem}
  .lb img{max-height:72vh}
  .lb__prev{inset-inline-start:auto;inset-inline-end:calc(50% + 8px);top:auto;bottom:1rem;transform:none}
  .lb__next{inset-inline-end:auto;inset-inline-start:calc(50% + 8px);top:auto;bottom:1rem;transform:none}
  .side dd{font-size:.95rem}
}
@media (max-width:480px){
  .actions{flex-direction:column}
  .actions .btn,.feat__body .btn{width:100%;justify-content:center}
  .brand{font-size:1.15rem}
  .brand small{display:none}
  .marquee{padding-block:1rem}
  .logo-img{width:56px;height:56px}
  .camp-jump .pf{flex:1;text-align:center}
  .pubc__title{font-size:1rem}
  .tile__n{font-size:.62rem;padding:.18rem .5rem}
}

/* ===== Executive theme: hero «الحضور» (safe spec) ===== */
.heroA{position:relative;min-height:calc(100vh - var(--header-h));display:flex;align-items:center;background:var(--paper);overflow:hidden}
@supports (height:1svh){.heroA{min-height:calc(100svh - var(--header-h))}}
.heroA__img{position:absolute;inset-block:0;inset-inline-start:0;width:min(50vw,700px);
background:url(../img/site/hero-portrait.jpg) center top/cover no-repeat;
-webkit-mask:linear-gradient(to left,transparent 2%,#000 38%);mask:linear-gradient(to left,transparent 2%,#000 38%)}
.heroA__c{position:relative;z-index:2;width:100%;padding-block:5rem 4rem}
.heroA__box{max-width:58ch;margin-inline-start:auto}
@media (max-width:820px){
  .heroA{flex-direction:column;align-items:stretch;min-height:0}
  .heroA__img{position:relative;inset:auto;width:100%;height:46vh;height:46svh;
  -webkit-mask:linear-gradient(to bottom,#000 62%,transparent 98%);mask:linear-gradient(to bottom,#000 62%,transparent 98%)}
  .heroA__c{padding-block:.5rem 3rem}
  .heroA__box{max-width:none;margin:0}
}
/* ===== Executive touches ===== */
.gal-lede{color:var(--muted);margin:-0.6rem 0 0;max-width:60ch}
.cta-band{background:var(--ink);color:var(--paper);margin-top:clamp(3rem,6vw,5rem)}
.cta-band__in{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
padding-block:clamp(3rem,6vw,4.5rem)}
.cta-band h2{font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.35;letter-spacing:-.01em}
.cta-band__btn{border-color:#fff;color:#fff;flex-shrink:0}
.cta-band__btn:hover{background:#fff;color:var(--ink)}
.site-footer{margin-top:0}
.foot-sig{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:700;letter-spacing:-.01em;
padding-bottom:clamp(1.6rem,3vw,2.4rem);margin-bottom:clamp(1.6rem,3vw,2.4rem);border-bottom:1px solid var(--line)}
@media (max-width:640px){.cta-band__in{flex-direction:column;align-items:flex-start}.cta-band__btn{width:100%;justify-content:center}}

/* ---------- من أنا: full-cover background (Omea panel) ---------- */
#view-about{position:relative}
#view-about > .wrap{position:relative;z-index:1}
.about-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
background:url(../img/site/bg-about.jpg) center 16%/cover no-repeat}
.about-bg::after{content:"";position:absolute;inset:0;background:
linear-gradient(90deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.86) 20%,rgba(255,255,255,.86) 80%,rgba(255,255,255,.58) 100%),
linear-gradient(to bottom,rgba(255,255,255,.55),transparent 18%)}
#view-about .about-grid{display:block;max-width:68ch;margin-inline:auto}
@media (max-width:640px){.about-bg{background-position:center 10%}
.about-bg::after{background:rgba(255,255,255,.87)}}

/* ---------- client tabs (أعمالي) ---------- */
.ctabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:2rem}
.ctab{border:1px solid var(--line);padding:.45rem 1.1rem;font-size:.9rem;font-weight:500;color:var(--muted);
border-radius:999px;transition:.22s;background:var(--paper)}
.ctab:hover{border-color:var(--ink);color:var(--ink)}
.ctab.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cpanel{display:none;margin-top:2rem}
.cpanel.on{display:block}
/* ---------- page backgrounds ---------- */
.pagebg{position:fixed;inset:0;z-index:0;pointer-events:none;background-size:cover;
background-position:center 16%;background-repeat:no-repeat}
.pagebg::after{content:"";position:absolute;inset:0;background:
linear-gradient(90deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.9) 20%,rgba(255,255,255,.9) 80%,rgba(255,255,255,.6) 100%),
linear-gradient(to bottom,rgba(255,255,255,.55),transparent 18%)}
#view-services,#view-portfolio,#view-training,#view-free,#view-contact{position:relative}
#view-services > .wrap,#view-portfolio > .wrap,#view-training > .wrap,#view-free > .wrap,#view-contact > .wrap{position:relative;z-index:1}
.pagebg--services{background-image:url(../img/site/bg-services.jpg)}
.pagebg--portfolio{background-image:url(../img/site/bg-portfolio.jpg)}
.pagebg--training{background-image:url(../img/site/bg-training.jpg)}
.pagebg--free{background-image:url(../img/site/bg-free.jpg)}
.pagebg--contact{background-image:url(../img/site/bg-contact.jpg)}
@media (max-width:640px){.pagebg::after{background:rgba(255,255,255,.92)}}
/* ---------- workshop poster: full graphic ---------- */
.feat__poster{min-height:0;aspect-ratio:auto}
.feat__poster img{position:static;inset:auto;width:100%;height:auto;object-fit:unset}
@media (max-width:900px){.feat{grid-template-columns:1fr}.feat__poster{aspect-ratio:auto;max-height:none}}
/* ---------- mobile hero: crop to the neck ---------- */
@media (max-width:820px){.heroA__img{background-size:auto 150%;background-position:center 6%}}

/* ============================================================
   ADDITIONS — bilingual support, language splash, dynamic
   galleries, and the pieces the dashboard needs.
   Everything above this line is the original design, untouched.
   ============================================================ */

[hidden]{display:none!important}

/* ---------- Arabic vs Latin typography ---------- */
html[lang="en"] body{font-family:'IBM Plex Sans','IBM Plex Sans Arabic',system-ui,sans-serif;line-height:1.75}
/* Arabic sets tashkeel above the cap height — give the line box room for it */
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{line-height:1.42}
html[dir="rtl"] .hero__title{line-height:1.45;max-width:17ch}
html[dir="rtl"] .camp__title{line-height:1.4}
/* Arabic fragments inside an English page */
.ar{font-family:'IBM Plex Sans Arabic',sans-serif;direction:rtl;unicode-bidi:isolate}
/* the hero portrait is masked from the inline-start edge in both directions */
html[dir="ltr"] .heroA__img{-webkit-mask:linear-gradient(to right,transparent 2%,#000 38%);
  mask:linear-gradient(to right,transparent 2%,#000 38%)}
html[dir="ltr"] .heroA__box{margin-inline-start:0;margin-inline-end:auto}
@media (max-width:820px){
  html[dir="ltr"] .heroA__img{-webkit-mask:linear-gradient(to bottom,#000 62%,transparent 98%);
    mask:linear-gradient(to bottom,#000 62%,transparent 98%)}
}
html[dir="ltr"] .work:hover .work__link svg,
html[dir="ltr"] .pubc:hover .pubc__go svg{transform:translate(3px,-3px)}

/* ---------- LANGUAGE SPLASH — first-visit chooser ---------- */
.splash{
  position:fixed;inset:0;z-index:400;background:var(--ink);
  display:grid;grid-template-columns:1fr 1fr;
  opacity:1;transition:opacity .5s var(--ease),visibility .5s var(--ease);
}
.splash.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.splash__head{
  position:absolute;inset-inline:0;top:clamp(1.5rem,5vh,3rem);z-index:3;
  text-align:center;color:var(--paper);pointer-events:none;
}
.splash__head .kicker{
  font-size:var(--fs-sm);letter-spacing:.24em;font-weight:600;opacity:.72;
  display:flex;gap:1rem;align-items:center;justify-content:center;flex-wrap:wrap;
}
.splash__head .kicker i{width:5px;height:5px;background:currentColor;border-radius:50%;opacity:.6;font-style:normal}
.pick{
  position:relative;overflow:hidden;border:0;cursor:pointer;background:#0d0d0d;color:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  padding:clamp(2rem,6vw,4rem);font-family:inherit;isolation:isolate;
}
.splash:focus,.splash:focus-visible{outline:none}
.pick__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;
  filter:grayscale(1) contrast(1.06);opacity:.58;
  transform:scale(1.06);transition:transform .9s var(--ease),opacity .5s var(--ease);z-index:-2;
}
.pick::after{
  content:"";position:absolute;inset:0;z-index:-1;transition:opacity .4s var(--ease);
  background:radial-gradient(circle at 50% 45%,rgba(10,10,10,.6) 0%,rgba(10,10,10,.78) 55%,rgba(10,10,10,.9) 100%);
}
/* Zoom on HOVER only. It must NOT be tied to :focus-visible: the splash
   auto-focuses the first pick (Arabic) on load, which would lock its image in
   the zoomed state and kill the hover motion on that side. Keyboard focus gets a
   ring below instead, so accessibility is preserved without locking the zoom. */
.pick:hover .pick__img{transform:scale(1);opacity:.72}
.pick:hover::after{opacity:.72}
.pick:focus-visible{outline:2px solid var(--paper);outline-offset:-10px}
.pick + .pick{border-inline-start:1px solid rgba(255,255,255,.16)}
.pick__glyph{font-size:clamp(5rem,13vw,10rem);font-weight:700;line-height:1;letter-spacing:-.04em;
  opacity:.96;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.pick__name{font-size:clamp(1.3rem,2.6vw,2rem);font-weight:700;letter-spacing:-.01em;margin-top:.6rem}
.pick__sub{font-size:.9rem;opacity:.75;font-weight:400}
.pick__go{margin-top:1.4rem;font-size:.85rem;font-weight:600;letter-spacing:.1em;
  border:1.5px solid rgba(255,255,255,.65);padding:.6rem 1.5rem;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.pick:hover .pick__go{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media (max-width:720px){
  .splash{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .pick + .pick{border-inline-start:0;border-top:1px solid rgba(255,255,255,.16)}
  .pick__glyph{font-size:clamp(3.4rem,17vw,6rem)}
  .splash__head{top:.9rem}
  .splash__head .kicker{font-size:.7rem;letter-spacing:.18em}
}

/* ---------- Language toggle in the header ---------- */
.nav-right{display:flex;align-items:center;gap:.5rem}
.lang-btn{
  display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);background:transparent;
  font-family:inherit;font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--ink);
  padding:.5rem .85rem;cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease),color .25s var(--ease);
}
.lang-btn:hover{background:var(--ink);color:var(--paper)}
.lang-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8}
@media (max-width:900px){.nav-links{z-index:99}}

/* ---------- Client tabs: keep the row usable at 19 clients ---------- */
.ctabs{max-height:none}
.ctab{cursor:pointer;font-family:inherit}
.pf{cursor:pointer;font-family:inherit;background:var(--paper)}

/* ---------- Justified galleries: widths are set at runtime ---------- */
.jtile{background:var(--paper-2)}
.jtile img,.jtile video{width:100%;height:auto}
.jgal--pending{opacity:0}
.jgal{transition:opacity .3s var(--ease)}

/* a poster that carries an external link gets a corner marker */
.jtile__out{
  position:absolute;top:.7rem;inset-inline-end:.7rem;z-index:2;width:26px;height:26px;
  background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;
}
.jtile__out svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2}
html[dir="ltr"] .jtile__out svg{transform:scaleX(-1)}

/* ---------- Reels rail ---------- */
.reelc{cursor:pointer;border-color:var(--ink)}
.reelc__foot span{display:block;font-weight:400;opacity:.75;font-size:.8rem}

/* ---------- Empty states ---------- */
.empty{
  border:1px dashed var(--line);background:var(--paper-2);
  padding:clamp(2rem,5vw,3rem);text-align:center;color:var(--muted);font-size:.95rem;
}

/* ---------- Training: long-form reading panel ---------- */
.reader{position:fixed;inset:0;z-index:310;background:rgba(10,10,10,.62);
  display:flex;justify-content:center;align-items:flex-start;padding:clamp(1rem,5vh,4rem) 1rem;
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s var(--ease);overflow:auto}
.reader.is-open{opacity:1;visibility:visible}
.reader__panel{background:var(--paper);max-width:70ch;width:100%;padding:clamp(1.8rem,5vw,3.2rem);
  position:relative;border:1px solid var(--line)}
.reader__panel h3{font-size:var(--fs-h2);margin-bottom:1rem;max-width:24ch}
.reader__panel .body{white-space:pre-wrap;color:var(--ink-2);line-height:1.95}
.reader__close{position:absolute;inset-block-start:1rem;inset-inline-end:1rem;width:40px;height:40px;
  border:1px solid var(--line);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center}
.reader__close svg{width:16px;height:16px;stroke:var(--ink);fill:none;stroke-width:2}

/* ---------- Cards that are buttons ---------- */
button.card{text-align:start;font-family:inherit;color:inherit;border:0;cursor:pointer;width:100%}
.card--click{cursor:pointer}
html[dir="rtl"] .card__cta--arrow svg{transform:scaleX(-1)}
html[dir="rtl"] .card:hover .card__cta--arrow svg{transform:scaleX(-1) translateX(-3px)}
html[dir="ltr"] .card:hover .card__cta--arrow svg{transform:translateX(3px)}

/* training card cover — one fixed ratio so every card lines up */
.card__cover{display:block;aspect-ratio:4/5;background:var(--paper-2);border:1px solid var(--line);
  overflow:hidden;margin-bottom:.3rem}
.card__cover img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--ease)}
.card:hover .card__cover img{transform:scale(1.03)}

/* ---------- Lightbox: video support + safer sizing ---------- */
.lb video{max-width:92vw;max-height:82vh;border:1px solid rgba(255,255,255,.2);background:#000}
.lb figure{max-width:96vw}
.lb__open{
  display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-size:.85rem;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px;
}
.lb__open svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
html[dir="rtl"] .lb__prev svg,html[dir="rtl"] .lb__next svg{transform:scaleX(-1)}

/* ---------- Footer: dashboard link ---------- */
.foot-admin{color:var(--muted-2);font-size:.78rem}
.foot-admin:hover{color:var(--ink)}

/* ---------- Page backgrounds: only paint under the active view ---------- */
.view:not(.is-active) .pagebg,.view:not(.is-active) .about-bg{display:none}

/* ---------- Runtime justified gallery: one flex track, widths set in JS ---------- */
.jgal--auto{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.jgal--auto .jtile{flex:0 0 auto;margin:0}
.jgal--auto .jtile img{width:100%;height:auto;display:block}
/* the row maths runs at every width, so no mobile override is needed —
   justify() simply targets a shorter row height on small screens */
@media (max-width:640px){ .jgal--auto{gap:8px} }

/* ---------- Hero: keep the copy clear of the portrait ----------
   The original overlays the headline and the photo, so at desktop
   widths the first word and the end of every line sit underneath the
   picture. The portrait still bleeds off the inline-start edge; the
   copy now gets its own column beside it. */
@media (min-width:821px){
  .heroA__img{width:min(48vw,660px)}
  .heroA__c{padding-inline-start:calc(min(48vw,660px) - max(0px,(100vw - var(--maxw))/2) + 2.5rem)}
  .heroA__box{max-width:none;margin-inline-start:0}
  .heroA .hero__title{font-size:clamp(2.3rem,4.4vw,4rem);max-width:none}
  .heroA .hero__sub{max-width:46ch}
}