/* ============================================================
   Mandel IDF educational-leadership programme - landing page

   Sizes are measured off the source artwork: desktop 1920px,
   mobile 640px. The root font-size is set so that 1rem equals
   10 artwork pixels, which makes the whole page scale down
   proportionally instead of reflowing at every width.
   ============================================================ */

@font-face{font-family:"Almoni";src:url("/assets/fonts/almoni-dl-aaa-regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Almoni";src:url("/assets/fonts/AlmoniDLAAA-Bold.woff2")    format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Almoni";src:url("/assets/fonts/AlmoniDLAAA-Black.woff2")   format("woff2");font-weight:900;font-display:swap}
@font-face{font-family:"Almoni Tzar";src:url("/assets/fonts/almoni-tzar-aaa-bold.woff2") format("woff2");font-weight:700;font-display:swap}

/* The artwork uses two families: Almoni Tzar Bold (condensed) for the display
   copy, and Almoni DL for the UI - pills, form and the closing line. */

:root{
  --navy:#2d3d78;
  --navy-soft:#576294;
  --gold:#b7a943;
  --gold-1:#97832d;
  --gold-2:#cbc955;
  --cyan:#4ac3cc;
  --line:#c9ccd8;
}

*,*::before,*::after{box-sizing:border-box}

html{
  /* desktop: 1rem = artwork width / 192  ->  10px at 1920px */
  font-size:calc(min(100vw,1920px) / 192);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0 auto;
  max-width:1920px;
  background:#fff;
  color:var(--navy);
  font-family:"Almoni",system-ui,"Segoe UI",Arial,sans-serif;
  font-weight:700;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
p{margin:0}

/* ---------- top gold wave ---------- */
.topwave{
  position:absolute;top:0;left:0;right:0;width:100%;height:9.5rem;
  z-index:3;pointer-events:none;
}

/* ---------- layout ---------- */
.page{display:flex;flex-direction:row;align-items:stretch;min-height:100vh}
.col-main{flex:1 1 auto;min-width:0;position:relative;background:var(--navy)}
.col-side{
  flex:0 0 27%;background:#fff;
  position:sticky;top:0;align-self:flex-start;
  height:100vh;min-height:64rem;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:15.6rem 4rem 6rem;
}

/* ---------- Hero ---------- */
.hero{position:absolute;top:0;left:0;right:0;height:62rem;overflow:hidden}
.hero__img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.hero__wave{position:absolute;inset:0;width:100%;height:100%}
.hero__text{position:absolute;top:13rem;left:0;right:13rem;z-index:2;text-align:right}
.hero__title{
  margin:0;font-family:"Almoni Tzar","Almoni",sans-serif;font-weight:700;
  font-size:12.4rem;line-height:.8;color:var(--navy);
}
.hero__sub{
  margin:1.2rem 0 0;font-family:"Almoni Tzar","Almoni",sans-serif;font-weight:700;
  font-size:6.6rem;line-height:.92;color:#fff;
}

/* display copy - Almoni Tzar Bold */
.lede,.gold-title,.intro,.acc__body{font-family:"Almoni Tzar","Almoni",sans-serif;font-weight:700}

/* ---------- content column ---------- */
.col-main__inner{position:relative;z-index:2;padding:44rem 12.4rem 10rem 13.1rem;text-align:right}
.lede{font-size:4.95rem;line-height:1.13;color:#fff}
.gold-title{margin:2.6rem 0 0;font-size:10.4rem;line-height:.875;color:var(--gold)}
.intro{margin:4.6rem 0 0;font-size:3.6rem;line-height:1.07;color:#fff}

/* ---------- accordion ---------- */
.accordion{margin-top:4.7rem;display:flex;flex-direction:column;gap:1rem}
.acc{background:#fff;border-radius:5rem;overflow:hidden}
.acc__btn{
  all:unset;box-sizing:border-box;display:flex;align-items:center;gap:2.47rem;
  width:100%;min-height:10rem;padding:1.2rem 4.19rem;cursor:pointer;
  font-family:inherit;font-weight:400;font-size:5.5rem;line-height:1.02;color:var(--navy);
  text-align:right;
}
.acc__btn:focus-visible{outline:.3rem solid var(--cyan);outline-offset:-.6rem}
.acc__chev{flex:0 0 auto;width:4.04rem;height:5.05rem;color:var(--cyan);transition:transform .25s ease,color .25s ease}
.acc__title{flex:1 1 auto}
.acc[open] .acc__chev,.acc.is-open .acc__chev{transform:scaleY(-1);color:var(--gold)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.acc.is-open .acc__panel{grid-template-rows:1fr}
.acc__inner{overflow:hidden}
.acc__body{padding:1.6rem 10rem 4rem 4.4rem;font-size:3rem;line-height:1.22;color:var(--navy)}
.acc__body p{margin:0 0 1.6rem}
.acc__body p:last-child{margin-bottom:0}
.acc__body h4{margin:3rem 0 1.4rem;font-size:4.1rem;line-height:1.1;color:var(--navy)}
.acc__body ol,.acc__body ul{margin:0 0 1.6rem;padding-inline-start:2.6rem}
.acc__body li{margin-bottom:1.1rem}
.acc__body li strong{font-weight:900}
.acc__body blockquote{margin:0 0 2rem;font-weight:700}
.acc__qa{margin:0 0 2.2rem}
.acc__qa dt{font-weight:900;margin-bottom:.6rem}
.acc__qa dd{margin:0 0 1.6rem}

.cta{margin-top:3.5rem;padding-inline-end:7.2rem;font-weight:700;font-size:9.2rem;line-height:1;text-align:center;
     background:linear-gradient(90deg,#cbc955 0%,#c2bd4e 35%,#a8912f 100%);
     -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- logos ---------- */
.logos{width:43.3rem;max-width:100%;height:auto}
.logos--bottom{margin-top:auto}

/* ---------- form ---------- */
.formcard{margin:8.8rem 0}
.formcard__title{margin:0 0 6.6rem;font-weight:700;font-size:3.8rem;line-height:1.06;color:var(--navy)}
.chev{display:inline-block;width:1em;height:.62em;color:var(--cyan);vertical-align:-.02em}
.btn .chev{width:.85em;height:.55em;margin-inline-start:.15em}
.formcard__title .chev{width:.72em;height:.46em}
.field{
  display:block;width:100%;height:6rem;margin-bottom:3.4rem;
  border:0;border-bottom:.15rem solid var(--cyan);border-radius:0;background:transparent;
  font-family:inherit;font-weight:700;font-size:3.1rem;color:var(--navy);
  padding:0;outline:none;
  /* type=tel/email otherwise inherit an LTR direction from the UA sheet
     and flip their placeholder to the left. plaintext keeps a typed
     number or address LTR inside a right-aligned RTL field. */
  direction:rtl;text-align:right;unicode-bidi:plaintext;
}
.field::placeholder{text-align:right;direction:rtl}
.field::placeholder{color:var(--navy);opacity:1}
.field:focus{border-bottom-color:var(--gold)}
.field.is-bad{border-bottom-color:#c0392b}
.hp{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.btn{
  display:block;width:100%;height:7.2rem;margin-top:9.7rem;border:0;border-radius:3.6rem;
  background:linear-gradient(90deg,#97832d 0%,#b6ac46 25%,#cbc955 55%,#b19f3b 80%,#a0872f 100%);
  font-family:inherit;font-weight:700;font-size:6.3rem;color:var(--navy);cursor:pointer;
  transition:filter .2s ease;
}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.6;cursor:default}
.formmsg:empty{display:none}
.formmsg{margin:1.8rem 0 0;min-height:3rem;font-weight:700;font-size:2.6rem;line-height:1.2;color:var(--navy)}
.formmsg.is-ok{color:#1c7a4f}
.formmsg.is-bad{color:#c0392b}

/* the mobile divider is desktop-hidden */
.mwave{display:none}

/* ============================================================
   mobile - artwork width 640px
   ============================================================ */
@media (max-width:899px){
  html{font-size:calc(min(100vw,640px) / 64)}
  body{max-width:640px;background:var(--navy)}
  .topwave{display:none}

  .page{display:flex;flex-direction:column;min-height:0}
  .col-main,.col-side,.col-main__inner{display:contents}

  .hero{position:relative;height:auto;overflow:visible;order:1}
  .hero__img{height:42.7rem;object-position:50% 36%}
  .hero__wave{display:none}
  .hero__text{top:7.1rem;right:3.4rem;left:0}
  .hero__title{font-size:6.9rem;line-height:.8}
  .hero__sub{font-size:3.7rem;line-height:.95;margin-top:.6rem}

  .mwave{display:block;position:absolute;left:0;right:0;bottom:-.1rem;height:15rem}
  .mwave svg{width:100%;height:100%;display:block}
  .mwave__logos{position:absolute;left:3rem;right:auto;top:5.2rem;width:23rem}

  .logos--top{display:none}

  .copy{order:3;padding:.3rem 4.2rem 0;background:var(--navy)}
  .lede{font-size:4.2rem;line-height:1.11}
  .gold-title{margin-top:2.2rem;font-size:8.8rem;line-height:.86}
  .intro{margin-top:1.7rem;font-size:2.8rem;line-height:1.08}

  .formcard{order:4;margin:4.8rem 1.8rem 0;background:#fff;border-radius:4rem;padding:4.4rem 3.4rem 3.9rem}
  .formcard__title{font-size:4.55rem;line-height:.92;margin-bottom:5.7rem}
  .field{height:7.8rem;margin-bottom:3.5rem;font-size:3.8rem}
  .btn{height:8.7rem;margin-top:6.2rem;border-radius:4.35rem;font-size:7.6rem}
  .formmsg{font-size:2.2rem}

  .accordion{order:5;margin:4rem 1.6rem 0;gap:1.2rem}
  .acc{border-radius:4.2rem}
  .acc__btn{min-height:8.3rem;padding:1.2rem 3.56rem;font-size:4.55rem;gap:2.06rem}
  .acc__chev{width:3.28rem;height:4.1rem}
  .acc__body{padding:1.2rem 9.6rem 3.2rem 5.3rem;font-size:2.9rem;line-height:1.22}
  .acc__body h4{font-size:3.3rem}

  .cta{order:6;margin:4.6rem .6rem 4.4rem;font-size:9.9rem;white-space:nowrap}

  .logos--bottom{order:7;width:100%;max-width:none;margin:0;padding:3.4rem 2.6rem 4.4rem;background:#fff}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

.acc__h{margin:0}
@media (min-width:900px){br.only-m{display:none}}