/* ═══════════════════════════════════════════════════════
   SIBUS-IN® × NOVACUTAN — Paris Class
   Light clinical system: white / white-grey ground, deep-blue type,
   thin rules, medical-blue accents. Open Sans throughout, regular
   weights only. Shared masthead and footer keep the site's chrome.
   ═══════════════════════════════════════════════════════ */

:root{
  --ink:        #0F1E33;   /* deep blue — body text */
  --ink-strong: #0A1728;   /* headings */
  --ink-deep:   #0C1322;   /* site chrome */
  --paper:      #FFFFFF;
  --paper-soft: #F5F8FA;
  --paper-tint: #EEF3F8;
  --blue:       #2E6FA8;   /* medical blue accent */
  --blue-soft:  #5A93C4;
  --blue-pale:  #A8C6DF;
  --txt:        #3C4C60;
  --txt-mute:   #718093;
  --line:       rgba(15,30,51,.14);
  --line-soft:  rgba(15,30,51,.08);
  --line-dark:  rgba(168,198,223,.20);

  --f: 'Open Sans', 'Segoe UI', system-ui, sans-serif;

  --nav-h:76px;
  --pad:clamp(20px,5vw,84px);
  --shell:1380px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);-webkit-text-size-adjust:100%}
body{
  background:var(--paper);color:var(--txt);
  font-family:var(--f);font-weight:400;font-size:17.5px;line-height:1.85;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--blue-pale);color:var(--ink-strong)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--shell);margin-inline:auto;padding-inline:var(--pad)}
.en{direction:ltr;unicode-bidi:isolate}
.skip{position:absolute;inset-inline-start:-9999px;top:0;background:var(--ink-strong);color:#fff;padding:12px 20px;z-index:1000}
.skip:focus{inset-inline-start:var(--pad);top:10px}

/* ═══════════ MASTHEAD (shared with the site) ═══════════ */
.pnav{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:900;height:var(--nav-h);
  display:flex;align-items:center;gap:clamp(12px,2.2vw,30px);padding-inline:var(--pad);
  background:rgba(10,18,32,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(168,198,223,.12);
}
.pnav-logo{height:25px;width:auto}
.pnav-links{display:flex;gap:clamp(12px,1.7vw,26px);margin-inline-start:auto}
.pnav-links a{font-size:14.5px;color:#A9B6C6;padding-block:6px;position:relative;transition:color .3s}
.pnav-links a::after{
  content:"";position:absolute;inset-block-end:0;inset-inline-start:0;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease);
}
.pnav-links a:hover,.pnav-links a[aria-current]{color:#fff}
.pnav-links a:hover::after,.pnav-links a[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}
.pnav-burger{display:none;width:44px;height:44px;position:relative;margin-inline-start:auto}
.pnav-burger span{position:absolute;inset-inline:11px;height:1px;background:#fff;transition:transform .4s var(--ease)}
.pnav-burger span:first-child{top:19px}
.pnav-burger span:last-child{top:25px}
.pnav-burger.open span:first-child{transform:translateY(3px) rotate(45deg)}
.pnav-burger.open span:last-child{transform:translateY(-3px) rotate(-45deg)}

.pmenu{
  position:fixed;inset:0;z-index:880;background:var(--ink-deep);color:#E7EDF4;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
  padding:var(--nav-h) var(--pad) 40px;
  opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s;
}
.pmenu.open{opacity:1;visibility:visible}
.pmenu a{font-size:clamp(20px,5.4vw,27px);font-weight:400;padding-block:15px;border-bottom:1px solid rgba(168,198,223,.16)}

/* ═══════════ HERO ═══════════ */
.hero{
  padding:calc(var(--nav-h) + clamp(44px,8vh,92px)) 0 clamp(36px,6vh,66px);
  background:linear-gradient(180deg,var(--paper) 0%,var(--paper-soft) 100%);
  border-bottom:1px solid var(--line-soft);
}
.hero-brand{
  font-size:clamp(12px,1.15vw,14px);font-weight:600;letter-spacing:.24em;
  color:var(--blue);direction:ltr;margin-bottom:clamp(20px,3vh,32px);
}
.hero-title{
  font-size:clamp(30px,5vw,68px);font-weight:600;line-height:1.1;letter-spacing:.01em;
  color:var(--ink-strong);direction:ltr;text-align:right;max-width:15ch;margin-inline-start:auto;
}
.hero-title span{display:block}
.hero-title span:last-child{color:var(--blue)}
/* the brand line sits above the title in the same thin face, a size down */
.ht-see{font-size:.46em;letter-spacing:.12em;line-height:1.25;color:var(--blue);
  margin-bottom:.55em}
.hero-lead{
  margin-top:clamp(18px,2.6vw,28px);
  font-size:clamp(18px,1.9vw,27px);font-weight:600;color:var(--ink-strong);line-height:1.5;
}
.hero-chain{
  margin-top:clamp(12px,1.8vw,20px);
  font-size:clamp(14px,1.15vw,16.5px);color:var(--txt);line-height:1.9;max-width:62ch;
}
.hero-meta{
  margin-top:clamp(26px,4vh,44px);padding-top:clamp(18px,2.6vh,26px);border-top:1px solid var(--line);
  font-size:clamp(16px,1.35vw,19px);font-weight:600;color:var(--ink-strong);
}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px,3.4vh,36px)}

/* ═══════════ BUTTONS ═══════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--f);font-size:15px;font-weight:600;letter-spacing:.02em;
  min-height:52px;padding:14px 32px;border-radius:4px;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn-primary{background:var(--ink-strong);color:#fff}
.btn-primary:hover{background:var(--blue)}
.btn-ghost{border:1px solid var(--line);color:var(--ink-strong)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

/* ═══════════ SECTIONS ═══════════ */
.sec{padding-block:clamp(52px,8vh,104px)}
.sec--soft{background:var(--paper-soft)}
.sec-head{margin-bottom:clamp(28px,4.4vw,52px)}
.sec-num{
  display:block;font-size:13px;font-weight:600;letter-spacing:.22em;color:var(--blue);
  direction:ltr;margin-bottom:12px;
}
.sec-title{
  font-size:clamp(26px,3.45vw,43px);font-weight:600;line-height:1.24;color:var(--ink-strong);
}
.sec-intro{margin-top:14px;font-size:clamp(15.5px,1.2vw,17.5px);color:var(--txt);max-width:64ch}

/* ═══════════ COURSE DETAILS ═══════════ */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.facts > div{padding:clamp(20px,2.6vw,30px) clamp(14px,2vw,28px)}
.facts > div + div{border-inline-start:1px solid var(--line)}
.facts dt{
  font-size:12.5px;font-weight:600;letter-spacing:.14em;color:var(--blue);
  margin-bottom:12px;
}
.facts dd{font-size:clamp(16.5px,1.28vw,18.5px);font-weight:600;color:var(--ink-strong);line-height:1.55}
.facts dd + dd{font-weight:400;color:var(--txt);font-size:15px;margin-top:5px}

/* ═══════════ SPEAKERS ═══════════ */
.faces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,3vw,40px);
  list-style:none;margin:0;padding:clamp(6px,1.2vw,14px) 0 0}
.faces li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.faces img{width:min(100%,clamp(150px,19vw,230px));height:auto;aspect-ratio:1;border-radius:50%;
  object-fit:cover;object-position:50% 50%;border:1px solid var(--line)}
.f-nm{margin-top:clamp(12px,1.4vw,18px);font-size:clamp(17px,1.5vw,21px);font-weight:600;color:var(--ink-strong)}
.f-rl{font-size:clamp(15px,1.15vw,16.5px);line-height:1.45;color:var(--txt);
  max-width:min(100%,34ch);text-wrap:balance}
.f-rl b{font-weight:600;color:var(--ink-strong)}
@media (max-width:620px){
  .faces{grid-template-columns:minmax(0,1fr);gap:clamp(26px,7vw,38px);justify-items:center}
  .faces img{width:min(68vw,280px)}
}
.speakers{border-top:1px solid var(--line)}
.speaker{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,2.4vw,32px);
  align-items:baseline;padding-block:clamp(18px,2.4vw,26px);border-bottom:1px solid var(--line);
}
.speaker b{font-size:13px;font-weight:600;color:var(--blue-soft);direction:ltr;letter-spacing:.1em}
.speaker .nm{font-size:clamp(18px,1.6vw,22px);font-weight:600;color:var(--ink-strong);direction:ltr;text-align:right}
.speaker .rl{font-size:clamp(15.5px,1.18vw,17px);color:var(--txt);white-space:nowrap}

/* ═══════════ LEARNING OBJECTIVES ═══════════ */
.objectives{border-top:1px solid var(--line)}
.objective{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2.6vw,36px);
  padding-block:clamp(20px,2.8vw,32px);border-bottom:1px solid var(--line);
}
.objective b{font-size:14px;font-weight:600;color:var(--blue);direction:ltr;letter-spacing:.1em;padding-top:4px}
.objective h3{font-size:clamp(17px,1.5vw,21px);font-weight:600;color:var(--ink-strong);line-height:1.45;margin-bottom:8px}
.objective p{font-size:clamp(15px,1.15vw,17px);color:var(--txt);max-width:66ch}

/* ═══════════ AGENDA ═══════════ */
.ag-note{
  margin-bottom:clamp(26px,4vw,42px);padding:clamp(16px,2.2vw,22px) clamp(18px,2.4vw,26px);
  background:var(--paper-tint);border-inline-start:3px solid var(--blue-soft);
  font-size:15px;color:var(--txt);line-height:1.8;
}
.ag-note b{display:block;font-weight:600;color:var(--ink-strong);margin-bottom:5px}

/* the agenda keeps its own measure — a full-width row leaves a short line
   stranded against a very long rule, which is what made it read as clutter */
.ag-band{margin-top:clamp(34px,5vw,62px);max-width:1040px}
.ag-band:first-of-type{margin-top:0}
.ag-band-label{
  display:flex;align-items:center;gap:16px;margin-bottom:6px;
  font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--blue);
}
.ag-band-label i{flex:1;height:1px;background:var(--line);opacity:.9}
.ag-band-sub{font-size:15px;font-weight:400;color:var(--txt-mute);letter-spacing:0;margin-bottom:4px}

/* a round's track list: one column now that a single group runs, so it
   keeps the same measure as the rest of the agenda */
.ag-tracks{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:start}
.ag-track{border-top:2px solid var(--blue-soft)}
.ag-track-head{padding-block:clamp(14px,1.8vw,20px);border-bottom:1px solid var(--line)}
.ag-track-head b{display:block;font-size:13px;font-weight:600;letter-spacing:.2em;color:var(--blue);direction:ltr}
.ag-track-head .t-en{display:block;margin-top:0;font-size:clamp(15px,1.25vw,17px);font-weight:600;color:var(--ink-strong);direction:ltr;unicode-bidi:isolate;text-align:right}
.ag-track-head .t-he{display:block;margin-top:2px;font-size:14.5px;color:var(--txt)}

.ag-rows{border-top:1px solid transparent}
.ag-row{padding-block:clamp(16px,2.1vw,24px);border-bottom:1px solid var(--line)}
.ag-row--full{display:grid;grid-template-columns:104px minmax(0,1fr);gap:clamp(16px,2.2vw,30px)}
.ag-time{
  font-size:14px;font-weight:600;color:var(--blue);direction:ltr;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.55;padding-top:2px;
}
.ag-row:not(.ag-row--full) .ag-time{display:block;margin-bottom:7px}
/* title, sentence and faculty all hang from one right edge */
.ag-body{min-width:0}
.ag-body h4{font-size:clamp(16.5px,1.28vw,18.5px);font-weight:600;color:var(--ink-strong);line-height:1.5}
.ag-body h4 .t-en{display:block;direction:ltr;unicode-bidi:isolate;text-align:right}
.ag-body p{
  margin-top:5px;font-size:clamp(15px,1.12vw,16.5px);line-height:1.75;
  color:var(--txt);max-width:66ch;margin-inline-end:auto;text-align:right;
}
/* the faculty line is LTR, so it must not inherit the sentence's inline
   margins — it hangs from the same right edge as the title */
.ag-body p.ag-who,.ag-who{
  margin:7px 0 0;max-width:none;font-size:14.3px;color:var(--txt-mute);
  direction:ltr;unicode-bidi:isolate;text-align:right;
}
.ag-row--break{background:var(--paper-soft)}
.ag-row--break .ag-body h4{font-weight:400;color:var(--txt)}

/* the "as printed" marker */
.flag{
  display:inline-block;margin-inline-start:9px;
  font-size:12px;font-weight:600;color:#9A7B3E;
  border-bottom:1px dotted #C8A768;line-height:1.4;vertical-align:1px;
}
.flag:hover{color:#7E6430;border-bottom-style:solid}

/* ═══════════ PARTICIPATION SUMMARY ═══════════ */
.summary{border-top:1px solid var(--line)}
.summary li{
  display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:clamp(14px,2.4vw,30px);
  padding-block:clamp(14px,1.9vw,20px);border-bottom:1px solid var(--line);align-items:baseline;
}
.summary dt,.summary li > b{font-size:14px;font-weight:600;color:var(--blue)}
.summary li > span{font-size:clamp(15.5px,1.2vw,17.5px);color:var(--ink-strong);font-weight:600}
.summary li > span small{display:block;font-weight:400;color:var(--txt);font-size:14.5px;margin-top:3px}
.pending{
  margin-top:clamp(24px,3.4vw,38px);font-size:14.5px;color:var(--txt-mute);line-height:1.8;
  padding-top:18px;border-top:1px solid var(--line-soft);
}

/* ═══════════ FIGURE ═══════════ */
.band{margin-top:clamp(30px,4.6vw,56px);overflow:hidden}
.band img{width:100%;height:clamp(200px,28vw,380px);object-fit:cover;object-position:50% 34%}

/* ═══════════ FOOTER (shared) ═══════════ */
.pfoot{background:var(--ink-deep);color:#93A2B4;padding:clamp(38px,6vh,64px) 0 26px;margin-top:0}
.pfoot-grid{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center;justify-content:space-between}
.pfoot img{height:23px;width:auto;opacity:.92}
.pfoot nav{display:flex;flex-wrap:wrap;gap:4px 26px;font-size:14.5px}
.pfoot nav a{min-height:40px;display:inline-flex;align-items:center;transition:color .3s}
.pfoot nav a:hover{color:var(--blue-pale)}
.pfoot-legal{margin-top:clamp(22px,3.4vh,34px);padding-top:18px;border-top:1px solid var(--line-dark);font-size:12.5px;line-height:1.8;color:#6B7889}

/* ═══════════ MOTION — short and subtle ═══════════ */
@media (prefers-reduced-motion: no-preference){
  html.motion [data-rv]{
    opacity:0;transform:translateY(24px);
    transition:opacity 1.25s var(--ease),transform 1.4s var(--ease);
    transition-delay:calc(var(--rv-i, 0) * 95ms);
  }
  html.motion [data-rv].in{opacity:1;transform:none}
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width:1040px){
  .pnav-links{display:none}
  .pnav-burger{display:block}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts > div:nth-child(3),.facts > div:nth-child(4){border-top:1px solid var(--line)}
  .facts > div:nth-child(3){border-inline-start:none}
  .hero-title{max-width:100%}
}
@media (max-width:640px){
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts > div + div{border-inline-start:none;border-top:1px solid var(--line)}
  .speaker{grid-template-columns:auto minmax(0,1fr);row-gap:4px}
  .speaker .rl{grid-column:2;white-space:normal}
  .objective{grid-template-columns:minmax(0,1fr);gap:8px}
  .objective b{padding-top:0}
  .ag-row--full{grid-template-columns:minmax(0,1fr);gap:5px}
  .ag-row--full .ag-time{text-align:right}
  .summary li{grid-template-columns:minmax(0,1fr);gap:4px}
}

/* ── the "as printed" marker never pushes a row past the edge ── */
.ag-time{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;justify-content:flex-end}
.ag-row--full .ag-time{justify-content:flex-start}
.flag{
  margin-inline-start:0;
  min-height:30px;display:inline-flex;align-items:center;
  max-width:100%;
}

/* ── touch targets ── */
@media (max-width:1040px){
  .pfoot-grid > a,.pnav > a{display:inline-flex;align-items:center;min-height:44px}
  .pfoot nav{gap:0 24px}
  .flag{min-height:34px}
}
@media (max-width:640px){
  /* the time is LTR, so flex-end puts it on the same right edge the
     stacked title, sentence and faculty already hang from */
  .ag-row--full .ag-time,.ag-row .ag-time{justify-content:flex-end}
}

/* ═══════════════════════════════════════════════════════
   HERO — dark ground with the photograph fading in behind
   ═══════════════════════════════════════════════════════ */
.hero{
  position:relative;overflow:hidden;
  background:radial-gradient(130% 120% at 74% -12%,#1E3C63 0%,#162945 44%,#0E1B2E 78%,#0A1320 100%);
  border-bottom:none;
  /* a minimum height keeps a wide screen from squeezing the frame into a
     letterbox, which is what forced the photograph to blow up */
  min-height:clamp(480px,54vw,860px);
  display:flex;align-items:center;
  padding-block:calc(var(--nav-h) + clamp(44px,7vh,86px)) clamp(44px,7vh,86px);
}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:64% 28%;
  opacity:0;filter:saturate(.92) contrast(1.02);
  animation:heroFade 2.4s var(--ease) .15s forwards, heroDrift 30s ease-in-out 2s infinite alternate;
}
/* the photograph carries the hero — it is only darkened enough on the side
   the type sits on to keep the headline legible */
@keyframes heroFade{to{opacity:.92}}
@keyframes heroDrift{from{transform:scale(1)}to{transform:scale(1.045) translate3d(0,-1%,0)}}
.hero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,16,29,.72) 0%,rgba(11,23,41,.44) 30%,rgba(16,34,60,.2) 68%,rgba(22,48,84,.08) 100%);
}
html[dir="rtl"] .hero-bg::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to left,rgba(9,19,34,.88) 0%,rgba(11,23,41,.62) 34%,rgba(16,34,60,.22) 68%,transparent 100%);
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-brand{color:var(--blue-pale)}
.hero-title{color:#fff}
.hero-title span:last-child{color:var(--blue-pale)}
.ht-see{color:var(--blue-pale)}
.hero-lead{color:#fff}
.hero-chain{color:#B7C6D6}
.hero-meta{color:#fff;border-top-color:rgba(168,198,223,.28)}
.hero .btn-ghost{border-color:rgba(168,198,223,.38);color:#fff}
.hero .btn-ghost:hover{border-color:var(--blue-pale);color:var(--blue-pale)}
.hero .btn-primary{background:#fff;color:var(--ink-strong)}
.hero .btn-primary:hover{background:var(--blue-pale)}

/* ═══════════ imagery through the page ═══════════ */
.plate{margin-top:clamp(30px,4.6vw,56px);overflow:hidden}
.plate img{
  width:100%;height:clamp(200px,28vw,400px);object-fit:cover;
  transition:transform 1.4s var(--ease),opacity 1s var(--ease);
}
.plate--tall img{height:clamp(240px,34vw,480px)}
.plate--top img{object-position:50% 10%}
.plate--upper img{object-position:50% 22%}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.2vw,26px);margin-top:clamp(30px,4.6vw,56px)}
.duo figure{margin:0;overflow:hidden}
.duo img{width:100%;height:clamp(180px,24vw,320px);object-fit:cover;transition:transform 1.4s var(--ease),opacity 1s var(--ease)}
.duo--upper img{object-position:50% 24%}
/* atlas plates carry their own anatomical labels, so they are never cropped */
/* Each plate is the atlas page rebuilt from its own two pieces: the heading,
   clinical view and caption on one side, the labelled ultrasound frame on the
   other. Nothing is cropped, and on a phone the pieces stack so the labelled
   frame sits under its heading instead of running off the edge. */
.duo--plates{grid-template-columns:minmax(0,1fr);gap:clamp(30px,5vw,60px)}
.atlas-plate{
  margin:0;direction:ltr;
  display:grid;grid-template-columns:minmax(0,.29fr) minmax(0,.71fr);
  gap:clamp(14px,2vw,30px);align-items:start;
}
.atlas-plate img{width:100%;height:auto;display:block}

/* superseded by the soft-arrival block at the end of this sheet */
@media (prefers-reduced-motion: reduce){
  .hero-bg img{animation:none;opacity:.5}
}
@media (max-width:640px){
  .duo{grid-template-columns:minmax(0,1fr)}
}

/* ═══════════ hero display type ═══════════
   The headline uses the same thin geometric face as the Tel Aviv hero, at a
   size where the light weight stays fully legible. Body copy keeps Open Sans
   at regular weight. */
.hero-title{
  font-family:'Outfit','Open Sans',system-ui,sans-serif;
  font-weight:200;
  font-size:clamp(32px,5.6vw,76px);
  line-height:1.06;
  letter-spacing:.005em;
}
.hero-brand{
  font-family:'Outfit','Open Sans',system-ui,sans-serif;
  font-weight:300;letter-spacing:.3em;
}
.hero-meta{font-family:'Outfit','Open Sans',system-ui,sans-serif;font-weight:300;letter-spacing:.04em}

/* ═══════════ imagery — a slow, soft arrival ═══════════
   The entry is an animation, not a hidden resting state: an image with no
   reveal class is simply visible, and an animation always ends visible. */
.plate,.duo figure,.poster{position:relative;overflow:hidden}

@media (prefers-reduced-motion: no-preference){
  /* The frame opens from its middle outwards: a soft mask keeps the top and
     bottom edges dissolved and then releases them, so the picture gathers
     itself as the page scrolls instead of appearing all at once. The mask
     ends far outside the frame, so the finished image is untouched. */
  html.motion .plate.in img,
  html.motion .duo.in img,
  html.motion .poster.in img,
  html.motion .atlas-plate img{
    animation:imgIn 2.6s cubic-bezier(.16,1,.3,1) backwards;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 50%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0%,#000 50%,transparent 100%);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:50% 50%;mask-position:50% 50%;
    -webkit-mask-size:100% 1200%;mask-size:100% 1200%;
  }
  /* each frame follows the one before it, so a pair or a row arrives
     as one slow breath rather than all at once */
  html.motion .duo.in figure:nth-child(2) img{animation-delay:.22s}
  html.motion .atlas-plate:nth-child(2) img{animation-delay:.22s}
  html.motion .atlas-plate .ap-us{animation-delay:.14s}
  html.motion .duo.in figure:nth-child(2) .ap-us{animation-delay:.36s}
  @keyframes imgIn{
    from{
      opacity:0;transform:scale(1.03) translate3d(0,26px,0);filter:blur(8px);
      -webkit-mask-size:100% 132%;mask-size:100% 132%;
    }
    45%{opacity:.9}
    to{
      opacity:1;transform:none;filter:blur(0);
      -webkit-mask-size:100% 1200%;mask-size:100% 1200%;
    }
  }

  /* text gathers line by line under its own heading */
  html.motion .sec-head.in .sec-num{animation:lineIn 1.1s cubic-bezier(.16,1,.3,1) backwards}
  html.motion .sec-head.in .sec-title{animation:lineIn 1.3s cubic-bezier(.16,1,.3,1) .1s backwards}
  html.motion .objective.in b{animation:lineIn 1.1s cubic-bezier(.16,1,.3,1) backwards}
  html.motion .objective.in h3{animation:lineIn 1.2s cubic-bezier(.16,1,.3,1) .09s backwards}
  html.motion .objective.in p{animation:lineIn 1.3s cubic-bezier(.16,1,.3,1) .18s backwards}
  html.motion .ag-row.in .ag-time,
  html.motion .ag-rows.in .ag-row .ag-time{animation:lineIn 1s cubic-bezier(.16,1,.3,1) backwards}
  html.motion .summary li.in b{animation:lineIn 1.1s cubic-bezier(.16,1,.3,1) backwards}
  html.motion .summary li.in span{animation:lineIn 1.25s cubic-bezier(.16,1,.3,1) .1s backwards}
  @keyframes lineIn{
    from{opacity:0;transform:translate3d(0,14px,0)}
    to  {opacity:1;transform:none}
  }

}


/* ═══════════ HERO on a phone ═══════════
   A landscape photograph cannot fill a portrait frame without cropping
   almost all of it away, so on a narrow screen the hero splits: the
   photograph gets its own band at natural proportions, and the type sits
   below it on the dark ground where it is perfectly legible. */
@media (max-width:760px){
  .hero{display:block;min-height:auto;padding-block:var(--nav-h) clamp(40px,7vh,68px)}
  .hero-bg{
    position:relative;inset:auto;width:100%;aspect-ratio:16/11;
    margin-bottom:clamp(24px,5vh,40px);
  }
  .hero-bg img{
    opacity:1;object-position:56% 32%;
    animation:heroRise 1.5s var(--ease) .1s backwards;
  }
  .hero-bg::after{
    background:linear-gradient(to top,rgba(9,19,34,.62) 0%,rgba(10,21,38,.16) 44%,transparent 100%);
  }
  html[dir="rtl"] .hero-bg::before{background:none}
  .hero-brand{margin-bottom:clamp(14px,2.4vh,22px)}
}

/* ═══════════ HERO on a desktop — one banner, two halves ═══════════
   Type on the right, the photograph whole on the left, flush against each
   other and the same height: a single band, not two blocks. The banner's
   height is the picture's own height at that column width, so nothing is
   cropped and no veil is needed over it. */
@keyframes heroRise{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@media (min-width:761px){
  .hero{
    display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    align-items:stretch;column-gap:0;
    min-height:auto;padding:var(--nav-h) 0 0;
  }
  .hero .wrap{
    grid-column:1;grid-row:1;max-width:none;margin-inline:0;
    padding:clamp(26px,3.4vw,54px) var(--pad) clamp(26px,3.4vw,54px) clamp(18px,2.2vw,38px);
    display:flex;flex-direction:column;justify-content:center;
  }
  .hero-bg{
    grid-column:2;grid-row:1;position:relative;inset:auto;
    width:100%;aspect-ratio:1600/1020;overflow:hidden;
  }
  .hero-bg img{
    width:100%;height:100%;object-fit:cover;object-position:50% 50%;
    opacity:1;filter:none;
    animation:heroRise 1.6s var(--ease) .12s backwards;
  }
  /* the picture stands on its own now — the veils were only there to keep
     type legible on top of it */
  .hero-bg::after,html[dir="rtl"] .hero-bg::before{content:none}
  /* the type now lives in half the width, so it is sized for that column */
  .hero-title{font-size:clamp(27px,3.1vw,50px);max-width:none}
  .hero-lead{font-size:clamp(16px,1.35vw,21px);margin-top:clamp(14px,1.8vw,22px)}
  .hero-chain{font-size:clamp(13px,.95vw,15px);margin-top:clamp(10px,1.2vw,16px);max-width:none}
  .hero-meta{margin-top:clamp(18px,2.4vw,30px);padding-top:clamp(14px,1.8vw,22px);font-size:clamp(15px,1.15vw,18px)}
  .hero-ctas{margin-top:clamp(18px,2.4vw,28px)}
  .hero-brand{margin-bottom:clamp(14px,2vw,24px)}
}

@media (max-width:760px){
  .duo--plates{gap:clamp(30px,8vw,46px)}
  .atlas-plate{grid-template-columns:minmax(0,1fr);gap:clamp(14px,4vw,22px)}
}

/* ═══════════ REGISTRATION ═══════════
   Open, boxless: underlined fields on the section's own ground, no card. */
.reg{max-width:900px}
.reg-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,38px) clamp(20px,3vw,40px);
}
.field{position:relative}
.field--wide{grid-column:1 / -1}
.field input{
  width:100%;background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:13px 2px;color:var(--ink-strong);font-family:var(--f);font-size:17px;font-weight:400;
  border-radius:0;outline:none;min-height:48px;
  transition:border-color .35s var(--ease);
}
.field label{
  position:absolute;inset-inline-start:2px;top:14px;
  font-size:16.5px;color:var(--txt-mute);pointer-events:none;
  transition:top .3s var(--ease),font-size .3s,color .3s,letter-spacing .3s;
}
.field input:focus{border-bottom-color:var(--blue)}
.field input:focus ~ label,
.field input:not(:placeholder-shown) ~ label{
  top:-11px;font-size:11px;letter-spacing:.14em;color:var(--blue);
}
.field input:user-invalid{border-bottom-color:#B4472F}

.reg-foot{
  margin-top:clamp(30px,4vw,46px);
  display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;
}
.reg-note{font-size:15.3px;color:var(--txt-mute)}
.reg-done{
  margin-top:clamp(24px,3vw,34px);padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--line);
  font-size:16px;color:var(--ink-strong);
}
.reg-done a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}

@media (max-width:640px){
  .reg-grid{grid-template-columns:minmax(0,1fr)}
  .reg-foot .btn{width:100%}
}

/* ═══════════ one menu across the site — TLV CLASS carries its sections ═══════════ */
.navdrop{position:relative;display:flex;align-items:center}
.navdrop-top i{
  display:inline-block;width:5px;height:5px;margin-inline-start:7px;
  border-inline-end:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.7;transition:transform .3s,opacity .3s;
}
.navdrop:hover .navdrop-top i,.navdrop:focus-within .navdrop-top i{opacity:1;transform:translateY(0) rotate(45deg)}
.navdrop-panel{
  position:absolute;top:100%;inset-inline-start:-14px;z-index:20;
  margin-top:14px;min-width:190px;padding:10px 0;
  display:flex;flex-direction:column;
  background:rgba(10,18,32,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(168,198,223,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s,transform .3s,visibility .3s;
}
/* a bridge so the pointer can travel from the label into the panel */
.navdrop::after{content:"";position:absolute;top:100%;inset-inline:-14px;height:16px}
.navdrop:hover .navdrop-panel,.navdrop:focus-within .navdrop-panel{opacity:1;visibility:visible;transform:none}
.navdrop-panel a{padding:9px 20px;font-size:14px;white-space:nowrap;color:#A9B6C6;transition:color .25s,background .25s}
.navdrop-panel a::after{display:none}
.navdrop-panel a:hover{color:#fff;background:rgba(168,198,223,.09)}
.menu-sub{font-size:clamp(17px,4.2vw,22px) !important;opacity:.7;padding-inline-start:22px}
@media (max-width:1040px){.navdrop-panel{display:none}}

/* the menu now carries the whole site, so it must be able to scroll */
.pmenu,.tmenu{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.pmenu a,.tmenu a{padding-block:clamp(9px,1.6vh,15px)}
.pmenu .menu-sub,.tmenu .menu-sub{padding-block:clamp(6px,1.1vh,11px);border-bottom-color:rgba(168,198,223,.08)}

/* ═══════════ the class poster, right under the banner ═══════════ */
.poster-band{
  background:var(--paper-soft);
  padding-block:clamp(34px,6vw,76px);
  padding-inline:var(--pad);
  display:flex;justify-content:center;
}
.poster{margin:0;width:100%;max-width:clamp(300px,46vw,560px)}
.poster img{width:100%;height:auto;display:block}
@media (max-width:1040px){
  /* edge to edge on a phone and a tablet — the poster is the statement,
     not a card sitting on a ground */
  .poster-band{padding-inline:0;padding-block:clamp(26px,5vw,44px)}
  .poster{max-width:none}
}

/* ═══════════ desktop only: the poster beside the where-and-when ═══════════
   Below 1041px nothing changes — the poster keeps its own full-bleed band
   above the details, exactly as it is on a phone and a tablet. */
@media (min-width:1041px){
  .where{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
    align-items:center;column-gap:clamp(30px,4vw,76px);
    max-width:var(--shell);margin-inline:auto;
    padding-inline:var(--pad);
    padding-block:clamp(48px,7vw,104px);
  }
  .where .poster-band{
    grid-column:2;padding:0;background:none;display:block;
  }
  .where .poster{max-width:none}
  .where #details{grid-column:1;padding-block:0}
  .where #details .wrap{max-width:none;margin-inline:0;padding-inline:0}
  .where #details .sec-head{margin-bottom:clamp(24px,3vw,38px)}
  /* three facts in one column read better beside a tall poster */
  .where .facts{grid-template-columns:minmax(0,1fr)}
  .where .facts > div + div{border-inline-start:none;border-top:1px solid var(--line)}
  .sec--plates{padding-top:0}
}

/* ═══════════ desktop only: logo on the left, menu on the right ═══════════ */
@media (min-width:1041px){
  .pnav > a:first-of-type{order:2;margin-inline-start:auto}
  .pnav-links{order:1;margin-inline-start:0}
}

/* a portrait flyer keeps a column of its own on a desktop */
@media (min-width:1041px){
  .poster-band{padding-block:clamp(40px,5.2vw,88px);padding-inline:var(--pad)}
  .poster{max-width:clamp(360px,36vw,520px)}
}

.reg-paid{
  margin-top:clamp(24px,3vw,34px);padding:clamp(16px,2vw,22px) 0;
  border-top:1px solid var(--line);
  font-size:clamp(16px,1.2vw,18px);color:var(--ink-strong);line-height:1.7;
}
.reg-paid.is-ok{color:var(--blue);font-weight:600}

.buy-row{margin-top:clamp(26px,3.6vw,44px);display:flex}
@media (max-width:640px){ .buy-row .btn{width:100%} }
.btn[data-buy]{white-space:nowrap}

/* the form is a way to ask, not the way in — the way in is the ticket */
.reg-done{
  margin-top:clamp(24px,3vw,34px);padding-top:clamp(18px,2.4vw,26px);
  border-top:1px solid var(--line);
}
.reg-done p{font-size:clamp(16px,1.2vw,18px);color:var(--ink-strong);line-height:1.7}
.reg-done-or{margin-top:10px;color:var(--txt);font-weight:400}
.reg-done .btn{margin-top:clamp(16px,2vw,22px)}