/* ============================================================
   The Global Opportunities Meet — Wyndham Mohali Club, 26 September 2026
   Palette and ornament derived from the printed invitation:
   brand navy rgb(34,36,87), mashrabiya gold, ivory stock.
   ============================================================ */

:root{
  --navy:        #222457;
  --navy-deep:   #14163a;
  --midnight:    #0a0c24;
  --ink:         #060814;

  --gold:        #c89b3c;
  --gold-lt:     #e7cd92;
  --gold-dp:     #8f6a1f;

  --ivory:       #f6f3ec;
  --ivory-warm:  #efeade;
  --paper:       #fdfcf9;
  --crimson:     #c8102e;

  --text:        #23253f;
  --text-soft:   #55587a;
  --text-lt:     rgba(246,243,236,.82);
  --text-lt-dim: rgba(246,243,236,.58);

  --serif: "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Jost", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.25rem, 5vw, 4.5rem);
  --sec: clamp(5rem, 11vh + 4vw, 10rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:5.5rem; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--midnight); color:var(--text);
  font-family:var(--sans); font-weight:300; font-size:clamp(1rem,.95rem + .18vw,1.075rem);
  line-height:1.72; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* height:auto is load-bearing — a width/height attribute pair on an <img> maps to a
   presentational hint for the height property, so without this an image carrying
   height="1680" renders 1680px tall and stretched instead of to its own ratio */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd,figure,blockquote{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ margin:0; font-weight:400; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--gold); color:var(--midnight); }

/* ---------- layout ---------- */
.wrap{ width:min(1180px, 100% - var(--gut)*2); margin-inline:auto; }
.wrap--narrow{ width:min(760px, 100% - var(--gut)*2); }
.section{ position:relative; padding-block:var(--sec); overflow:hidden; }
.section--ivory{ background:var(--ivory); }
.section--navy{ background:var(--navy); color:var(--ivory); }
.section--midnight{ background:var(--midnight); color:var(--ivory); }
.section--band{ background:var(--paper); padding-block:clamp(3rem,6vw,4.5rem); }
.section--paper{ background:var(--paper); }
.section__head{ margin-bottom:clamp(2.5rem,5vw,4rem); }
.section__head--center{ text-align:center; }

/* ---------- typography ---------- */
.eyebrow{
  margin:0 0 1.1rem; font-size:.7rem; font-weight:400;
  letter-spacing:.42em; text-transform:uppercase; color:var(--text-soft);
}
.eyebrow--gold{ color:var(--gold-lt); }

.display{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.6rem, 1.4rem + 4.4vw, 5rem);
  line-height:1.02; letter-spacing:-.015em; color:var(--navy);
}
.display--light{ color:var(--ivory); }
.display em{ font-style:normal; color:var(--crimson); }
.display--light em{ color:var(--gold-lt); }

.lede{
  font-size:clamp(1.16rem,1.02rem + .5vw,1.42rem); line-height:1.62;
  font-weight:300; color:var(--text); margin:0 0 1.6rem;
}
.lede em{ font-family:var(--serif); font-style:italic; font-size:1.12em; }
.lede--light{ color:var(--text-lt); }
.body{ margin:0 0 1.35rem; color:var(--text-soft); max-width:64ch; }
.body--light{ color:var(--text-lt-dim); }

.rule{
  display:block; width:74px; height:1px; margin:1.7rem 0 2.1rem;
  background:linear-gradient(90deg,var(--navy),rgba(34,36,87,0));
}
.rule--gold{ background:linear-gradient(90deg,var(--gold),rgba(200,155,60,0)); }
.rule--center{
  margin-inline:auto;
  background:linear-gradient(90deg,rgba(200,155,60,0),var(--gold),rgba(200,155,60,0));
}

/* ---------- buttons ---------- */
.btn{
  --bg:transparent; --fg:var(--ivory); --bd:currentColor;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:1.02rem 2.3rem; border:1px solid var(--bd); background:var(--bg); color:var(--fg);
  font-size:.735rem; font-weight:400; letter-spacing:.26em; text-transform:uppercase;
  cursor:pointer; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--gold);
  transform:scaleX(0); transform-origin:right; transition:transform .5s var(--ease-out);
}
.btn:hover::after{ transform:scaleX(1); transform-origin:left; }
.btn:hover{ color:var(--midnight); border-color:var(--gold); }
.btn--gold{ --bd:var(--gold); --fg:var(--gold-lt); }
.btn--ghost{ --bd:rgba(246,243,236,.35); }

/* ---------- grain + curtain ---------- */
.grain{
  position:fixed; inset:-50%; z-index:9998; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)}
  80%{transform:translate(3%,1%)}
}

.curtain{
  position:fixed; inset:0; z-index:9999; background:var(--midnight);
  display:grid; place-items:center; overflow:hidden;
}
/* the outside of the frame stays dark via the mask; the page is only ever
   seen through the opening as we push forward into it */
.curtain.is-done{ background:transparent; visibility:hidden; pointer-events:none; transition:visibility 0s 1.7s; }

/* Dubai Frame: 93m wide x 150m tall */
.frame{
  --fh: clamp(280px, 58vh, 540px);
  --fw: calc(var(--fh) * .62);
  --ft: calc(var(--fw) * .11);           /* pillar / beam thickness */
  position:relative; width:var(--fw); height:var(--fh);
  transform-origin:50% calc(50% + var(--ft) / 2);   /* centre of the opening */
  opacity:0; transform:scale(.9);
  animation:frameIn 1.3s var(--ease-out) .1s forwards;
  will-change:transform;
}
.curtain.is-done .frame{
  animation:framePush 1.7s cubic-bezier(.55,0,.85,.35) forwards;
}

.frame__mask{
  position:absolute; inset:0; pointer-events:none;
  box-shadow:0 0 0 200vmax var(--midnight);
}
.frame__sky{
  position:absolute; inset:var(--ft) var(--ft) 0;
  background:
    radial-gradient(60% 40% at 50% 100%, rgba(200,155,60,.28), transparent 70%),
    linear-gradient(180deg, #14163a 0%, #1c2a52 60%, #2b3f6a 100%);
  transition:opacity .55s var(--ease);
}
.curtain.is-done .frame__sky{ opacity:0; }
.frame__pillar{
  position:absolute; bottom:0; width:var(--ft); height:100%;
  background:url("../img/lattice-column.png") repeat-y center / 100% auto;
  box-shadow:0 0 0 1px rgba(200,155,60,.35), 0 0 30px rgba(200,155,60,.18);
}
.frame__pillar--l{ left:0; }
.frame__pillar--r{ right:0; }
.frame__beam{
  position:absolute; top:0; left:0; right:0; height:var(--ft);
  background:url("../img/lattice-band.png") repeat-x center / auto 100%;
  box-shadow:0 0 0 1px rgba(200,155,60,.35), 0 0 30px rgba(200,155,60,.18);
}
.frame__base{
  position:absolute; left:-8%; right:-8%; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
@keyframes frameIn{ to{ opacity:1; transform:scale(1); } }
@keyframes framePush{ from{ opacity:1; transform:scale(1); } to{ opacity:1; transform:scale(16); } }

@media (prefers-reduced-motion:reduce){
  .frame{ animation:none; opacity:1; transform:none; }
  .curtain{ transition:opacity .5s, visibility .5s; }
  .curtain.is-done{ opacity:0; background:var(--midnight); transition:opacity .5s, visibility 0s .5s; }
  .curtain.is-done .frame{ animation:none; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto; z-index:900;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.5rem var(--gut);
  transition:padding .5s var(--ease), background-color .5s var(--ease),
             box-shadow .5s var(--ease), border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  padding-block:.85rem; background:rgba(10,12,36,.9);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:rgba(200,155,60,.2);
}
.nav__brand{ display:flex; align-items:center; color:var(--ivory); }
.nav__brandtext{ display:flex; flex-direction:column; line-height:1.25; }
.nav__brandtext b{
  font-family:var(--serif); font-weight:500; font-size:1.06rem; letter-spacing:.01em;
}
.nav__brandtext i{ white-space:nowrap;
  font-style:normal; font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-lt); opacity:.85;
}
.nav__links{ display:flex; align-items:center; gap:2.1rem; }
.nav__links a{
  position:relative; font-size:.735rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--text-lt); transition:color .35s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .45s var(--ease-out);
}
.nav__links a:hover{ color:var(--gold-lt); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }
.nav__links a.is-active{ color:var(--gold-lt); }
.nav__links a.is-active::after{ transform:scaleX(1); }

.nav__cta{
  padding:.72rem 1.35rem; border:1px solid rgba(200,155,60,.5);
  color:var(--gold-lt)!important;
}
.nav__cta::after{ display:none; }
.nav__cta:hover{ background:var(--gold); color:var(--midnight)!important; border-color:var(--gold); }

.nav__toggle{
  display:none; width:42px; height:42px; padding:0; background:none;
  border:1px solid rgba(246,243,236,.28); cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:6px;
}
.nav__toggle span{
  display:block; width:17px; height:1px; background:var(--ivory);
  transition:transform .4s var(--ease), opacity .3s;
}
.nav__toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative; min-height:100svh; display:grid; place-items:center;
  padding:clamp(4.8rem,8vh,5.6rem) var(--gut) clamp(3.8rem,6.5vh,5rem);
  background:var(--midnight); overflow:hidden; isolation:isolate;
}
/* The photo is dropped so the Burj's spire clears the frame's top band and the
   whole tower reads inside the aperture. The band left above it is masked into
   the midnight ground, so the photo has no hard top edge. */
.hero__media{
  position:absolute; inset:24% 0 -12%; z-index:-3;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 10%);
          mask-image:linear-gradient(180deg, transparent 0, #000 10%);
}
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:50% 0%;
  transform:scale(1.06); will-change:transform;
  /* the source is bright daylight — pulled down and cooled so the ivory and gold
     still carry, and the sky sits in the same family as the brand navy */
  filter:saturate(.86) contrast(1.05) brightness(.82);
}
.hero__veil{
  position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(118% 80% at 50% 44%, rgba(10,12,36,0) 20%, rgba(10,12,36,.34) 66%, rgba(6,8,20,.84) 100%),
    linear-gradient(180deg, rgba(10,12,36,.78) 0%, rgba(10,12,36,.14) 30%, rgba(10,12,36,.34) 66%, rgba(6,8,20,.92) 94%),
    linear-gradient(0deg, rgba(34,36,87,.26), rgba(34,36,87,.26));
}
.hero__dunes{
  position:absolute; inset:auto 0 0; height:26vh; z-index:-1;
  background:linear-gradient(180deg, rgba(6,8,20,0), rgba(6,8,20,.9) 55%, var(--midnight));
}

/* invitation frame (mashrabiya card) — the card art at its true proportions.
   The asset is the card with its rails mirrored downward, so the frame never
   runs out however tall the hero gets; the bottom simply dissolves. Padding is
   a percentage of the portal width, matching how the rails are drawn:
   sides 506/4153 = 12.18%, top band 474/4153 = 11.41%. */
.portal{
  position:relative; width:min(1080px,100%); text-align:center;
}
.portal__frame{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:url("../img/hero-frame.webp") top center / 100% auto no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.55) 84%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.55) 84%,transparent 100%);
  opacity:0; animation:frameIn 1.5s var(--ease-out) .35s forwards;
}
@keyframes frameIn{ from{ opacity:0; transform:scale(1.015); } to{ opacity:1; transform:none; } }

.hero__content{
  position:relative; z-index:2;
  padding:calc(11.41% + clamp(.9rem,1.8vw,1.8rem))
          calc(12.18% + clamp(.9rem,2.2vw,2rem))
          clamp(2.2rem,4vw,3.4rem);
}
.hero__content::before{
  content:""; position:absolute; inset:-10% -14%; z-index:-1; pointer-events:none;
  background:radial-gradient(64% 62% at 50% 50%, rgba(8,10,28,.5), rgba(8,10,28,.28) 60%, rgba(8,10,28,0) 82%);
}
.hero__title{
  font-family:var(--serif); font-weight:300; color:var(--ivory);
  font-size:clamp(2.9rem, 1.3rem + 7.2vw, 6.2rem);
  line-height:.96; letter-spacing:-.022em; margin:0;
  filter:drop-shadow(0 2px 20px rgba(6,8,20,.8)) drop-shadow(0 1px 3px rgba(6,8,20,.5));
}
.hero__title span{ display:block; font-style:italic; font-weight:400; }
.hero__sub{
  margin:1.25rem 0 0; font-size:clamp(.82rem,.74rem + .34vw,1rem);
  letter-spacing:.34em; text-transform:uppercase; color:var(--text-lt);
  text-shadow:0 1px 14px rgba(6,8,20,.85);
}
.hero .rule--gold{ margin-inline:auto; margin-block:1.4rem 1.7rem; }
.hero__blurb{
  max-width:56ch; margin:0 auto; color:rgba(246,243,236,.86);
  font-size:clamp(.96rem,.92rem + .18vw,1.06rem);
  text-shadow:0 1px 14px rgba(6,8,20,.9);
}
.hero__meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:clamp(.9rem,2.6vw,2.2rem); margin:2.1rem 0 2rem;
  text-shadow:0 1px 14px rgba(6,8,20,.9);
}
.hero__meta div{ display:flex; flex-direction:column; gap:.32rem; }
.hero__meta span{
  font-size:.605rem; letter-spacing:.32em; text-transform:uppercase; color:var(--gold);
}
.hero__meta b{
  font-family:var(--serif); font-weight:400; font-size:1.16rem;
  letter-spacing:.012em; color:var(--ivory); font-variant-numeric:lining-nums;
}
.hero__meta i{ width:1px; height:32px; background:rgba(200,155,60,.32); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; }

.scroll-hint{
  position:absolute; left:50%; bottom:1.9rem; transform:translateX(-50%);
  width:1px; height:46px; background:rgba(246,243,236,.2); overflow:hidden; z-index:2;
}
.scroll-hint span{
  position:absolute; inset:0; display:block; background:var(--gold);
  animation:scrollDot 2.3s var(--ease) infinite;
}
@keyframes scrollDot{
  0%{transform:translateY(-100%)} 55%,100%{transform:translateY(100%)}
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{
  background:var(--navy-deep); border-block:1px solid rgba(200,155,60,.22);
  overflow:hidden; padding-block:1.05rem;
}
.marquee__track{
  display:flex; align-items:center; gap:2.4rem; width:max-content;
  animation:marquee 42s linear infinite;
}
.marquee__track span{
  font-size:.7rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--text-lt-dim); white-space:nowrap;
}
.marquee__track i{ font-style:normal; font-size:.42rem; color:var(--gold); }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   INVITATION
   ============================================================ */
.pull{
  margin:2.4rem 0; padding:1.7rem 0 1.7rem 2rem;
  border-left:2px solid var(--gold);
  font-family:var(--serif); font-size:clamp(1.5rem,1.1rem + 1.5vw,2.3rem);
  line-height:1.28; color:var(--navy); letter-spacing:-.008em;
}
.pull em{ display:inline-block; margin-top:.3rem; font-style:italic; color:var(--text-soft); font-size:.78em; }

/* ============================================================
   PILLARS
   ============================================================ */
.lattice-strip{
  position:absolute; inset:0 0 auto; height:16px;
  background:url("../img/lattice-band.png") repeat-x center / auto 100%;
  opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
.lattice-strip--top{ top:0; }

.pillars__grid{
  display:grid; gap:1px; background:rgba(200,155,60,.2);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  border:1px solid rgba(200,155,60,.2);
}
.pillar{
  position:relative; min-width:0; background:var(--navy); padding:clamp(2rem,3.4vw,2.9rem);
  transition:background-color .55s var(--ease);
}
.pillar::before{
  content:""; position:absolute; inset:auto 0 0; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease-out);
}
.pillar:hover{ background:var(--navy-deep); }
.pillar:hover::before{ transform:scaleX(1); }
.pillar__num{
  display:block; margin-bottom:1.5rem; font-family:var(--serif);
  font-size:2.05rem; font-weight:300; color:var(--gold); opacity:.75;
}
.pillar h3{
  font-family:var(--serif); font-size:1.52rem; font-weight:500;
  color:var(--ivory); margin-bottom:.75rem; letter-spacing:.005em;
  line-height:1.18; min-height:2.36em;
}
.pillar p{ margin:0; font-size:.955rem; color:var(--text-lt-dim); line-height:1.68; }
.pillar__tags{
  display:flex; flex-wrap:wrap; gap:.5rem;
  margin-top:1.5rem; padding-top:1.3rem;
  border-top:1px solid rgba(200,155,60,.22);
}
.pillar__tags li{
  padding:.34rem .72rem; border:1px solid rgba(200,155,60,.32);
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-lt); max-width:100%; line-height:1.45; text-align:center;
  overflow-wrap:anywhere;
}

/* ============================================================
   PHILOSOPHY
   ============================================================ */
.philosophy__grid{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:minmax(210px,.72fr) 1.28fr; align-items:start;
}
.philosophy__mark img{ width:min(280px,100%); }
.philosophy__caption{
  margin:1.4rem 0 0; font-size:.66rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--text-soft);
}
.philosophy__body .lede em{ color:var(--navy); }

/* ============================================================
   WHY DUBAI
   ============================================================ */
.why{ text-align:center; }
.why__glow{
  position:absolute; top:-18%; left:50%; transform:translateX(-50%);
  width:min(1000px,120%); aspect-ratio:1.6; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(200,155,60,.13), transparent 66%);
}
.why .wrap{ position:relative; z-index:1; }
.why__text{ max-width:74ch; margin-inline:auto; }
.why__text .body{ max-width:none; }

.stats{
  display:grid; gap:clamp(1.8rem,3.6vw,3rem); margin-top:clamp(3.4rem,7vw,5.2rem);
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
}
.stat{ position:relative; padding-top:1.7rem; }
.stat::before{
  content:""; position:absolute; inset:0 auto auto 50%; transform:translateX(-50%);
  width:34px; height:1px; background:var(--gold);
}
.stat dt{
  display:flex; align-items:baseline; justify-content:center; gap:.1rem;
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.9rem,1.8rem + 3vw,4.4rem); line-height:1; color:var(--ivory);
  font-variant-numeric:tabular-nums;
}
.stat dt i{ font-style:normal; font-size:.42em; color:var(--gold); }
.stat dd{
  margin-top:.85rem; font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--text-lt-dim); line-height:1.6;
}

/* ============================================================
   AGENDA
   ============================================================ */
.timeline{
  position:relative; max-width:840px; margin-inline:auto; padding-block:.5rem;
}
.timeline::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:1px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,rgba(34,36,87,0),rgba(34,36,87,.3) 7%,rgba(34,36,87,.3) 93%,rgba(34,36,87,0));
}
.tl{
  position:relative; width:50%;
  padding:0 clamp(1.8rem,3vw,2.6rem) clamp(1.6rem,2.6vw,2.2rem) 0;
  text-align:right;
}
.tl:nth-child(even){
  margin-left:50%; padding:0 0 clamp(1.6rem,2.6vw,2.2rem) clamp(1.8rem,3vw,2.6rem);
  text-align:left;
}
.tl:last-child{ padding-bottom:0; }
.tl__dot{
  position:absolute; top:1.55rem; right:-6px; width:11px; height:11px; border-radius:50%;
  background:var(--ivory); border:1.5px solid var(--navy);
  transition:background-color .45s var(--ease), border-color .45s var(--ease),
             box-shadow .45s var(--ease), transform .45s var(--ease-out);
}
.tl:nth-child(even) .tl__dot{ right:auto; left:-5px; }
.tl:hover .tl__dot{
  background:var(--gold); border-color:var(--gold);
  box-shadow:0 0 0 6px rgba(200,155,60,.16); transform:scale(1.15);
}
.tl__card h3{
  font-family:var(--serif); font-size:1.42rem; font-weight:500;
  color:var(--navy); margin-bottom:.45rem; line-height:1.2;
}
.tl__time{
  display:block; margin-bottom:.5rem;
  font-family:var(--sans); font-size:.62rem; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dp);
}
.tl__card p{ margin:0; font-size:.92rem; color:var(--text-soft); line-height:1.62; }

/* ============================================================
   SPEAKER
   ============================================================ */
.speaker__grid{
  display:grid; gap:clamp(2.6rem,6vw,5.5rem);
  grid-template-columns:minmax(240px,.78fr) 1.22fr; align-items:start;
}
/* Second speaker onward: a gold hairline separates the pair, and the columns
   swap so the two portraits sit on opposite edges of the section. */
.speaker__grid + .speaker__grid{
  margin-top:clamp(3.4rem,7vw,6rem); padding-top:clamp(3.4rem,7vw,6rem);
  border-top:1px solid rgba(200,155,60,.2);
}
.speaker__grid--flip{ grid-template-columns:1.22fr minmax(240px,.78fr); }
.speaker__grid--flip .speaker__portrait{ grid-column:2; grid-row:1; }
.speaker__grid--flip .speaker__body{ grid-column:1; grid-row:1; }
.speaker__frame{
  position:relative; padding:12px; border:1px solid rgba(200,155,60,.42);
}
.speaker__frame::before{
  content:""; position:absolute; inset:-11px; border:1px solid rgba(200,155,60,.16);
  pointer-events:none;
}
.speaker__frame img{ width:100%; filter:saturate(.94) contrast(1.03); }
/* The name is the block heading now, so the plate under the portrait carries
   only the role line. */
.speaker__portrait figcaption{ margin-top:1.4rem; }
.speaker__portrait span{
  display:block; font-size:.63rem;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold-lt);
}
.speaker__body .body{ max-width:none; }

/* Closes the bio column. Deliberately quieter than .btn — this points off-site,
   and the page keeps one primary call to action (Reserve Your Place). The gold
   hairline is the same weight as the portrait frame opposite it. */
.callingcard{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:.2rem 1.5rem; margin-top:clamp(2rem,3.6vw,2.8rem);
  max-width:26rem; padding:1.15rem 1.5rem;
  border:1px solid rgba(200,155,60,.42);
  transition:border-color .45s var(--ease), background-color .45s var(--ease);
}
.callingcard__label{
  grid-column:1; font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold);
}
.callingcard__site{
  grid-column:1; font-family:var(--serif); font-size:1.32rem;
  color:var(--ivory); letter-spacing:.005em; line-height:1.3;
}
.callingcard__arrow{
  grid-column:2; grid-row:1 / span 2;
  font-size:1.05rem; color:var(--gold-lt);
  transition:transform .45s var(--ease-out);
}
.callingcard:hover{
  border-color:var(--gold); background-color:rgba(200,155,60,.07);
}
.callingcard:hover .callingcard__arrow{ transform:translateX(5px); }
.callingcard:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; }

@media (prefers-reduced-motion: reduce){
  .callingcard__arrow{ transition:none; }
  .callingcard:hover .callingcard__arrow{ transform:none; }
}

/* ============================================================
   RECOGNITION — gallery + press strip
   ============================================================ */
/* this section carries a heading, one rail and a logo row — at the full --sec
   rhythm that is a screen and a half of mostly empty stock to scroll past */
.recognition{ padding-block:clamp(3rem,5.5vw,4.75rem); }
.recognition .section__head{ margin-bottom:clamp(1.5rem,3vw,2.25rem); }
/* Same job as .room__lede — a centred line of standfirst under the rule — so it
   carries the same measure and colour. Held to a readable measure rather than
   the full wrap, which at this width would run past 140 characters a line. */
.recognition__lede{
  max-width:62ch; margin:1.9rem auto 0;
  font-size:1.02rem; line-height:1.8; color:var(--text-soft);
}

/* full-bleed rail: the wrap gutter would crop the loop */
.gallery{
  position:relative;
  margin-block:clamp(1.6rem,3vw,2.25rem);
  /* .section clips overflow already, but be explicit — the track runs long */
  overflow:hidden;
}
/* The ends fade into the stock. A real mask-image would do this too, but it makes
   the whole rail a masked layer the compositor has to redraw on every frame of
   the loop; over a flat background two gradients in the paper colour are free. */
.gallery.is-rolling::before,
.gallery.is-rolling::after{
  content:''; position:absolute; inset-block:0; width:clamp(2rem,7vw,7rem);
  z-index:2; pointer-events:none;
}
.gallery.is-rolling::before{ left:0;  background:linear-gradient(90deg,var(--paper),rgba(253,252,249,0)); }
.gallery.is-rolling::after{  right:0; background:linear-gradient(270deg,var(--paper),rgba(253,252,249,0)); }

.gallery__track{
  display:flex; align-items:flex-start; gap:clamp(1.1rem,2.4vw,2rem);
  width:max-content; padding-inline:clamp(1.1rem,2.4vw,2rem);
}
/* set rolling once JS has doubled the slides; duration is written inline so the
   pixels-per-second stay constant however many clippings get added */
.gallery.is-rolling .gallery__track{
  animation:gallery-roll var(--roll,48s) linear infinite;
  will-change:transform; backface-visibility:hidden;
}
.gallery.is-rolling:hover .gallery__track,
.gallery.is-rolling:focus-within .gallery__track{ animation-play-state:paused; }
@keyframes gallery-roll{ to{ transform:translate3d(-50%,0,0); } }

/* one image and nothing to scroll — sit it in the middle, and let it run larger,
   because at rail size a lone photo reads as a stranded thumbnail */
.gallery.is-static .gallery__track{ width:auto; justify-content:center; flex-wrap:wrap; }
.gallery.is-static .gallery__slide img{ height:clamp(260px,32vw,440px); }

.gallery__slide{ flex:0 0 auto; }
.gallery__slide figure{
  /* the image sets the card width; a long caption wraps inside it rather than
     stretching the frame wider than the picture */
  width:min-content;
  background:#fff; padding:clamp(.5rem,1vw,.7rem);
  border:1px solid rgba(34,36,87,.1);
  box-shadow:0 1px 2px rgba(10,12,36,.05), 0 18px 40px -22px rgba(10,12,36,.42);
  /* transform only. Transitioning the shadow as well repaints a 40px blur on
     every frame for half a second, which is what makes a wheel scroll with the
     pointer over the card feel like it is snagging. */
  transition:transform .45s var(--ease);
}
.gallery__slide figure:hover{ transform:translateY(-4px); }
.gallery__slide img{
  /* fixed height, free width — lets a square photo and a tall column of
     newsprint sit on the same line without either being cropped */
  height:clamp(200px,18vw,270px); width:auto; max-width:none; object-fit:contain;
}
.gallery__slide figcaption{
  margin-top:.7rem; padding:0 .2rem .15rem;
  font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--text-soft);
}

/* the one slide that is a link. It keeps the clipping look — no underline, no
   blue — and earns a quiet cue line instead, so it reads as a card you can open
   rather than a picture that happens to be clickable. */
.gallery__link{ display:block; color:inherit; text-decoration:none; }
.gallery__cue{
  display:block; margin-top:.32rem; color:var(--gold-dp);
  transition:color .4s var(--ease);
}
.gallery__cue::after{ content:' \2192'; }
.gallery__link:hover .gallery__cue,
.gallery__link:focus-visible .gallery__cue{ color:var(--ink); }
.gallery__link:focus-visible figure{ outline:2px solid var(--gold-dp); outline-offset:3px; }

.press{
  margin-top:clamp(1.6rem,3vw,2.4rem); padding-top:1.7rem;
  border-top:1px solid rgba(34,36,87,.12);
}
.press__label{
  margin:0 0 1.3rem; font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-dp); text-align:center;
}
.press__list{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:clamp(1.5rem,2.8vw,2.4rem) clamp(1.6rem,3vw,2.8rem);
}
.press__list li{ display:flex; align-items:center; justify-content:center; min-height:44px; }
.press__list img{
  max-width:100%; max-height:32px; width:auto; height:auto; object-fit:contain;
  /* every mark flattened to one weight of ink so the row reads as a set */
  filter:brightness(0) opacity(.42);
  transition:filter .5s var(--ease);
}
.press__list li:hover img{ filter:brightness(0) opacity(.72); }
/* the two near-square marks carry more ink at a given height */
.press__list img[alt="CNBC Arabia"]{ max-height:36px; }
.press__list img[alt="Dubai Eye"]{ max-height:34px; }

@media (max-width:820px){
  .press__list{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:520px){
  .press__list{ grid-template-columns:repeat(2,1fr); }
}

@media (prefers-reduced-motion: reduce){
  /* no drift — hand the rail over to the reader */
  .gallery{ overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
  .gallery.is-rolling::before, .gallery.is-rolling::after{ display:none; }
  .gallery.is-rolling .gallery__track{ animation:none; will-change:auto; }
  .gallery__slide{ scroll-snap-align:center; }
  .gallery__slide figure{ transition:none; }
  .gallery__slide figure:hover{ transform:none; }
}

/* ============================================================
   RSVP
   ============================================================ */
.rsvp__grid{
  display:grid; gap:clamp(2.6rem,6vw,5rem);
  grid-template-columns:1.02fr .98fr; align-items:start;
}
.factsheet{ margin-top:2.6rem; border-top:1px solid rgba(34,36,87,.16); }
.factsheet div{
  display:grid; grid-template-columns:minmax(88px,.3fr) 1fr; gap:1rem;
  padding:1.02rem 0; border-bottom:1px solid rgba(34,36,87,.12);
}
.factsheet dt{
  font-size:.615rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-dp); padding-top:.3rem;
}
.factsheet dd{
  margin:0; font-family:var(--serif); font-size:1.2rem; color:var(--navy);
  font-variant-numeric:lining-nums;
}
[data-tbc]{ position:relative; }
[data-tbc]::after{
  content:"TBC"; display:inline-block; margin-left:.6rem; vertical-align:middle;
  padding:.16rem .48rem; border:1px solid currentColor; border-radius:2px;
  font-family:var(--sans); font-size:.52rem; font-weight:400;
  letter-spacing:.18em; opacity:.55; transform:translateY(-1px);
}

/* Contact card — sits where the form used to, so the section keeps its
   two-column balance. Same paper panel, and the channels borrow the hairline
   and hover of .callingcard in the speaker section. */
.rsvp__contact{
  background:var(--paper); padding:clamp(1.8rem,3.6vw,2.9rem);
  border:1px solid rgba(34,36,87,.14);
  box-shadow:0 24px 60px -34px rgba(34,36,87,.35);
}
.rsvp__contact-lede{
  margin:0 0 clamp(1.6rem,3vw,2.1rem);
  font-size:.95rem; font-weight:300; color:var(--text-soft); line-height:1.62;
}
.channel{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:.2rem 1.4rem; padding:1.15rem 1.4rem;
  border:1px solid rgba(34,36,87,.18);
  transition:border-color .45s var(--ease), background-color .45s var(--ease);
}
.channel + .channel{ margin-top:1rem; }
.channel__label{
  grid-column:1; font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--gold-dp);
}
.channel__value{
  grid-column:1; font-family:var(--serif); font-size:1.32rem;
  color:var(--navy); letter-spacing:.005em; line-height:1.3;
  font-variant-numeric:lining-nums; overflow-wrap:anywhere;
}
.channel__arrow{
  grid-column:2; grid-row:1 / span 2;
  font-size:1.05rem; color:var(--gold-dp);
  transition:transform .45s var(--ease-out);
}
.channel:hover{ border-color:var(--gold); background-color:rgba(200,155,60,.07); }
.channel:hover .channel__arrow{ transform:translateX(5px); }
.channel:focus-visible{ outline:2px solid var(--gold-dp); outline-offset:3px; }

.rsvp__note{
  margin:1.4rem 0 0; font-size:.76rem; color:var(--text-soft);
  letter-spacing:.02em; line-height:1.6;
}

.rsvp__side{ align-self:stretch; display:flex; flex-direction:column; gap:1.6rem; }
.venue{
  flex:1; display:flex; flex-direction:column; margin:0;
  border:1px solid rgba(34,36,87,.14); background:var(--paper);
  box-shadow:0 24px 60px -34px rgba(34,36,87,.35);
}
.venue__map{
  flex:1; display:block; width:100%; min-height:260px; border:0;
  filter:grayscale(.35) contrast(1.02);
}
.venue__caption{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:1rem 1.4rem; border-top:1px solid rgba(34,36,87,.14);
  font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dp);
}
.venue__caption a{ color:var(--navy); white-space:nowrap; transition:color .45s var(--ease); }
.venue__caption a:hover{ color:var(--gold-dp); }

@media (prefers-reduced-motion: reduce){
  .channel__arrow{ transition:none; }
  .channel:hover .channel__arrow{ transform:none; }
}

/* ============================================================
   PARTNERS + FOOTER
   ============================================================ */
/* The wall arrives as finished artwork — one board per breakpoint, each drawn
   at the width of the column it sits in. Every board is shown at its native
   size and capped there: scaling one up would soften the lettermarks, and the
   whole point of shipping the design as a board is that the tiers, labels and
   optical weighting land exactly as they were drawn. A board narrower than the
   column simply centres. <picture> is inline by default, which would swallow
   the reveal transform, hence the block. */
.partners__board{ display:block; }
.partners__board img{
  display:block; margin-inline:auto; width:100%; height:auto; max-width:390px;
}
@media (min-width:561px){  .partners__board img{ max-width:920px;  } }
@media (min-width:1041px){ .partners__board img{ max-width:1180px; } }

.footer{ position:relative; background:var(--ink); color:var(--text-lt); padding-top:clamp(3.6rem,7vw,5.4rem); }
.footer__grid{
  display:flex; flex-wrap:wrap; gap:2.4rem; align-items:flex-start;
  justify-content:space-between; padding-bottom:clamp(2.6rem,5vw,3.6rem);
}
.footer__title{
  display:block; margin-bottom:1.1rem; font-family:var(--serif); font-weight:500;
  font-size:1.5rem; color:var(--ivory); letter-spacing:.005em;
}
.footer__brand p{ margin:0; font-size:.86rem; color:var(--text-lt-dim); line-height:1.85; }
.footer__nav{ display:grid; grid-template-columns:repeat(2,auto); gap:.75rem 2.6rem; }
.footer__nav a{
  font-size:.7rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--text-lt-dim); transition:color .35s var(--ease);
}
.footer__nav a:hover{ color:var(--gold-lt); }
.footer__base{
  display:flex; flex-wrap:wrap; gap:.7rem 2rem; justify-content:space-between;
  padding:1.5rem var(--gut); border-top:1px solid rgba(246,243,236,.09);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(246,243,236,.36);
}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease-out) var(--d,0s),
             transform .95s var(--ease-out) var(--d,0s);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   OPENING — THE THREE THINGS
   ============================================================ */
.opening .wrap--narrow{ text-align:center; }
.statement{
  margin:.4rem 0 0; font-family:var(--serif);
  font-size:clamp(1.75rem,1.05rem + 2.5vw,3.05rem);
  font-weight:300; line-height:1.24; letter-spacing:-.012em; color:var(--navy);
}
.statement em{ font-style:italic; color:var(--gold-dp); }
.opening .rule--center{ margin-block:2.2rem 0; }

.triptych{
  display:grid; gap:clamp(2rem,4vw,3.4rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  margin-top:clamp(3rem,5vw,4.6rem);
}
.triptych__item{ position:relative; padding-top:1.6rem; }
.triptych__item::before{
  content:""; position:absolute; inset:0 0 auto; height:1px;
  background:linear-gradient(90deg,var(--gold),rgba(200,155,60,.12));
}
.triptych__num{
  display:block; margin-bottom:.85rem; font-family:var(--serif);
  font-size:1.28rem; font-weight:400; letter-spacing:.08em;
  color:var(--gold); opacity:.9;
}
.triptych__item h3{
  font-family:var(--serif); font-size:1.48rem; font-weight:500;
  color:var(--navy); margin-bottom:.7rem; line-height:1.2;
}
.triptych__item p{ margin:0; font-size:.945rem; color:var(--text-soft); line-height:1.7; }

/* ============================================================
   THE ROOM
   ============================================================ */
.room__lede{
  max-width:60ch; margin:1.9rem auto 0;
  font-size:1.02rem; line-height:1.8; color:var(--text-soft);
}
.room__grid{
  display:grid; align-items:start; justify-content:center;
  grid-template-columns:1fr auto 1fr; gap:clamp(1.6rem,3.4vw,3.2rem);
  max-width:940px; margin-inline:auto;
}
.room__col{
  padding:clamp(1.8rem,3vw,2.4rem);
  background:var(--ivory); border:1px solid rgba(34,36,87,.1);
}
.room__label{
  margin:0 0 1.4rem; padding-bottom:.9rem;
  border-bottom:1px solid rgba(200,155,60,.4);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dp);
}
.room__list li{
  position:relative; padding-left:1.15rem; margin-bottom:.85rem;
  font-family:var(--serif); font-size:1.16rem; line-height:1.42; color:var(--navy);
}
.room__list li:last-child{ margin-bottom:0; }
.room__list li::before{
  content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  transform:rotate(45deg); background:var(--gold);
}
.room__amp{
  align-self:center; font-family:var(--serif); font-style:italic;
  font-size:clamp(1.8rem,3vw,2.6rem); color:var(--gold); opacity:.8;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .philosophy__grid,.speaker__grid,.rsvp__grid{ grid-template-columns:1fr; }
  .philosophy__mark{ display:flex; align-items:flex-end; gap:1.6rem; flex-wrap:wrap; }
  .philosophy__caption{ margin:0 0 .4rem; }
  .speaker__portrait{ max-width:340px; }
  .speaker__grid--flip .speaker__portrait,
  .speaker__grid--flip .speaker__body{ grid-column:1; grid-row:auto; }
}

@media (max-width:1180px){
  .nav__links{ gap:1.5rem; }
  .nav__links a{ font-size:.66rem; letter-spacing:.18em; }
}

@media (max-width:1040px){
  .nav{ padding-inline:var(--gut); }
  .nav__links{
    position:fixed; inset:0; flex-direction:column; justify-content:center; gap:1.8rem;
    background:rgba(10,12,36,.97); backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    opacity:0; visibility:hidden; transform:translateY(-12px);
    transition:opacity .5s var(--ease), visibility .5s, transform .5s var(--ease-out);
  }
  .nav__links.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__links a{ font-size:.9rem; letter-spacing:.24em; }
  .nav__toggle{ display:flex; z-index:2; }
  .nav__brandtext b{ font-size:.96rem; }
}

@media (max-width:860px){
  .room__grid{ grid-template-columns:1fr; }
  .room__amp{ justify-self:center; }

  .timeline::before{ left:5px; transform:none; }
  .tl,.tl:nth-child(even){
    width:100%; margin-left:0; text-align:left; padding:0 0 2.2rem 2.2rem;
  }
  .tl__dot,.tl:nth-child(even) .tl__dot{ left:0; right:auto; top:1.4rem; }

  .hero__meta i{ display:none; }
  .hero__meta{ gap:1.4rem 2rem; }
}

@media (max-width:560px){
  .hero{ padding-bottom:11rem; }
  .hero__actions .btn{ width:100%; }
  .pull{ padding-left:1.3rem; }
  .triptych{ gap:2.2rem; }
  .room__col{ padding:1.5rem 1.3rem; }
  .footer__nav{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important;
  }
  .reveal{ opacity:1; transform:none; }
  .grain{ display:none; }
}