/* =====================================================================
   ABBAS FARM — Design System
   Palette : Mughal garden green, Gumbat brick, antique gold, parchment
   Type    : Cormorant Garamond (display) / Jost (interface)
   ===================================================================== */

:root{
  /* --- colour --- */
  --ink:        #10130F;
  --ink-2:      #1B211A;
  --green:      #0D3B2F;   /* charbagh green   */
  --green-dk:   #06201A;
  --brick:      #A24B2B;   /* Gumbat brick     */
  --brick-lt:   #C2694A;
  --gold:       #C8A44D;   /* antique gold     */
  --gold-lt:    #E3CE94;
  --peacock:    #106E68;
  --cobalt:     #2C4A9E;   /* the blue tilework */
  --parch:      #F7F2E7;   /* parchment        */
  --parch-2:    #EFE7D6;
  --stone:      #8C8676;
  --white:      #FFFDF8;

  /* --- type --- */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --ui: "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --urdu: "Noto Nastaliq Urdu", var(--display);

  /* --- rhythm --- */
  --gut: clamp(20px, 4vw, 56px);
  --sec: clamp(80px, 11vw, 170px);
  --maxw: 1360px;

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

/* ===================== reset ===================== */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body{
  font-family:var(--ui);
  font-weight:300;
  background:var(--parch);
  color:var(--ink);
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
body.is-locked{ overflow:hidden }
img{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ background:none; border:0; cursor:pointer }
::selection{ background:var(--gold); color:var(--ink) }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut) }
.section{ padding-block:var(--sec); position:relative }

/* ===================== typography ===================== */
.display{
  font-family:var(--display);
  font-weight:300;
  font-size:clamp(2.2rem, 5vw, 4.4rem);
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--green-dk);
  max-width:16ch;
}
.display--light{ color:var(--parch); max-width:14ch }

.eyebrow{
  font-family:var(--ui);
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--brick);
  margin-bottom:1.4rem;
}
.eyebrow--light{ color:var(--gold-lt) }

.lede{
  font-family:var(--display);
  font-size:clamp(1.15rem,1.6vw,1.5rem);
  line-height:1.55;
  color:var(--ink-2);
}
.lede em{ color:var(--brick); font-style:italic }

p + p{ margin-top:1.1em }
.prologue__text p{ color:#42463D; max-width:46ch }
.prologue__text .lede{ color:var(--ink-2); max-width:38ch; margin-bottom:1.4em }

/* ornamental rule */
.rule{ display:flex; align-items:center; gap:12px; width:180px; margin:1.8rem 0; color:var(--gold) }
.rule i{ flex:1; height:1px; background:currentColor; opacity:.55 }
.rule b{ font-size:.7rem; line-height:1 }

/* ===================== buttons ===================== */
.btn{
  --bg:transparent; --fg:var(--ink); --bd:currentColor;
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:.6em; padding:1.05em 2.1em;
  font-size:.72rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg); background:var(--bg); border:1px solid var(--bd);
  overflow:hidden; transition:color .5s var(--ease), border-color .5s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0; z-index:-0;
  background:var(--gold); transform:scaleY(0); transform-origin:bottom;
  transition:transform .5s var(--slow);
}
.btn > *{ position:relative; z-index:1 }
.btn:hover::after{ transform:scaleY(1) }

.btn--gold{ --bg:var(--gold); --fg:var(--ink); --bd:var(--gold) }
.btn--gold::after{ background:var(--ink) }
.btn--gold:hover{ color:var(--gold); border-color:var(--ink) }

.btn--ghost{ --bg:transparent; --fg:var(--parch); --bd:rgba(255,253,248,.45) }
.btn--ghost:hover{ color:var(--ink); border-color:var(--gold) }

.btn--dark{ --fg:var(--green-dk); --bd:rgba(13,59,47,.3) }
.btn--dark:hover{ color:var(--ink) }

.btn--full{ width:100%; margin-top:.6rem }

.link-arrow{
  display:inline-flex; align-items:center; gap:.7em; margin-top:2rem;
  font-size:.74rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:var(--green-dk); border-bottom:1px solid rgba(13,59,47,.28); padding-bottom:.5em;
  transition:color .35s, border-color .35s;
}
.link-arrow i{ font-style:normal; transition:transform .4s var(--slow) }
.link-arrow:hover{ color:var(--brick); border-color:var(--brick) }
.link-arrow:hover i{ transform:translateX(6px) }

/* ===================== reveal ===================== */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1.1s var(--slow) }
[data-reveal].in{ opacity:1; transform:none }

/* ===================== preloader ===================== */
.preloader{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:var(--green-dk); color:var(--gold);
  transition:opacity .9s var(--ease), visibility .9s;
}
.preloader.done{ opacity:0; visibility:hidden }
.preloader__inner{ display:grid; justify-items:center; gap:1.2rem }
.crest{ width:60px; height:70px }
.crest__arch{ stroke-dasharray:400; stroke-dashoffset:400; animation:draw 1.6s var(--ease) forwards }
.crest__arch2{ stroke-dasharray:400; stroke-dashoffset:400; animation:draw 1.6s .25s var(--ease) forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.preloader__word{
  font-family:var(--display); font-size:1.4rem; letter-spacing:.5em; padding-left:.5em;
  color:var(--parch);
}
.preloader__bar{ width:120px; height:1px; background:rgba(200,164,77,.25); display:block; overflow:hidden }
.preloader__bar i{ display:block; height:100%; width:0; background:var(--gold); animation:load 1.7s var(--ease) forwards }
@keyframes load{ to{ width:100% } }

/* ===================== nav ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding-block:1.5rem;
  transition:background .55s var(--ease), padding .55s var(--ease), box-shadow .55s;
  color:var(--parch);
}
.nav.stuck{
  background:rgba(6,32,26,.92);
  backdrop-filter:blur(14px) saturate(1.2);
  padding-block:.85rem;
  box-shadow:0 1px 0 rgba(200,164,77,.22);
}
.nav__inner{
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; gap:2rem;
}
.brand{ display:flex; align-items:center; gap:.85rem; color:var(--gold) }
.brand__mark{ width:24px; height:28px; flex:none }
.brand__mark--lg{ width:44px; height:52px }
.brand__type{ display:grid; line-height:1 }
.brand__name{
  font-family:var(--display); font-size:1.28rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--parch);
}
.brand__sub{
  font-size:.53rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); margin-top:.42em; opacity:.85;
}

.nav__links{ display:flex; gap:2.2rem; margin-left:auto }
.nav__links a{
  position:relative; font-size:.72rem; font-weight:400;
  letter-spacing:.2em; text-transform:uppercase; padding-block:.35em;
  opacity:.85; transition:opacity .35s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .5s var(--slow);
}
.nav__links a:hover{ opacity:1 }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left }

.nav__cta{ padding:.85em 1.7em; font-size:.66rem }

.burger{ display:none; width:26px; height:14px; position:relative; margin-left:auto }
.burger span{
  position:absolute; left:0; height:1px; width:100%; background:var(--parch);
  transition:transform .45s var(--slow), opacity .3s;
}
.burger span:nth-child(1){ top:0 }
.burger span:nth-child(2){ bottom:0 }
.burger.on span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.burger.on span:nth-child(2){ transform:translateY(-7px) rotate(-45deg) }

/* drawer */
.drawer{
  position:fixed; inset:0; z-index:99;
  background:var(--green-dk); color:var(--parch);
  display:grid; place-content:center; gap:2rem;
  clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--slow);
}
.drawer.on{ clip-path:inset(0 0 0 0) }
.drawer__links{ display:grid; gap:.4rem; text-align:center }
.drawer__links a{
  font-family:var(--display); font-size:clamp(2rem,8vw,3rem); line-height:1.35;
  display:flex; align-items:baseline; justify-content:center; gap:.8rem;
  transition:color .35s;
}
.drawer__links a em{
  font-family:var(--ui); font-style:normal; font-size:.6rem; letter-spacing:.2em;
  color:var(--gold); opacity:.75;
}
.drawer__links a:hover{ color:var(--gold) }
.drawer__urdu{ font-family:var(--urdu); font-size:1.6rem; text-align:center; color:var(--gold); opacity:.8; line-height:2.4 }

/* ===================== hero ===================== */
/* padding-top reserves the fixed header. Without it, a short window makes the
   bottom-aligned content overflow upward and run through the wordmark. */
.hero{
  position:relative; min-height:100svh;
  display:grid; align-items:end;
  padding-top:clamp(88px, 11vh, 124px);
  overflow:hidden; color:var(--parch);
}
.hero__slides{ position:absolute; inset:0 }
.hero__slide{
  position:absolute; inset:0;
  background-size:cover; background-position:center 55%;
  opacity:0; transform:scale(1.12);
  transition:opacity 2s var(--ease);
}
.hero__slide.is-active{ opacity:1; animation:kb 12s linear forwards }
@keyframes kb{ from{ transform:scale(1.12) } to{ transform:scale(1.0) } }

/* Lighter than a flat darkening: a soft wash from the left carries the text,
   the top edge holds the nav, and the right side of the photo stays open. */
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(6,20,16,.60) 0%, rgba(6,20,16,.34) 38%, rgba(6,20,16,.04) 68%, rgba(6,20,16,0) 100%),
    linear-gradient(to top, rgba(6,20,16,.58) 0%, rgba(6,20,16,.20) 30%, rgba(6,20,16,0) 55%, rgba(6,20,16,.02) 78%, rgba(6,20,16,.34) 100%);
}
.hero__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__content{
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gut); padding-bottom:clamp(84px,12vh,150px);
}
.hero .eyebrow{ margin-bottom:clamp(.7rem, 2vh, 1.4rem) }
.hero__title{
  font-family:var(--display); font-weight:300;
  /* scales with height as well as width, so a short window shrinks the type
     instead of pushing it off the top of the screen */
  font-size:clamp(2.5rem, min(7.4vw, 10.5vh), 7rem);
  line-height:1.04; letter-spacing:-.02em;
  margin-bottom:clamp(.9rem, 2.4vh, 1.6rem);
}
.hero__title .line{ display:block; overflow:hidden }
.hero__title .line > span{
  display:block; transform:translateY(105%);
  transition:transform 1.3s var(--slow);
}
.hero__title .line.in > span{ transform:none }
.hero__title .line--em{ font-style:italic; color:var(--gold-lt) }

.hero__lede{
  max-width:44ch; font-size:clamp(.95rem,1.15vw,1.08rem);
  color:rgba(247,242,231,.86); line-height:1.7;
  text-shadow:0 1px 24px rgba(6,20,16,.55);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:clamp(1.3rem, 3.2vh, 2.4rem) }

.hero__ui{
  position:absolute; z-index:2; left:0; right:0; bottom:2rem;
  width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut);
  display:flex; align-items:center; justify-content:space-between;
}
.hero__dots{ display:flex; gap:.7rem }
.hero__dots button{
  width:34px; height:2px; background:rgba(247,242,231,.28); position:relative; overflow:hidden;
}
.hero__dots button i{
  position:absolute; inset:0; width:0; background:var(--gold); display:block;
}
.hero__dots button.on i{ animation:dot 6s linear forwards }
@keyframes dot{ to{ width:100% } }

.scrollcue{ display:flex; align-items:center; gap:.8rem; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; opacity:.7 }
.scrollcue i{ display:block; width:44px; height:1px; background:currentColor; position:relative; overflow:hidden }
.scrollcue i::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:translateX(-100%); animation:cue 2.4s var(--ease) infinite;
}
@keyframes cue{ 50%{ transform:none } 100%{ transform:translateX(100%) } }

/* ===================== marquee ===================== */
.marquee{
  background:var(--green-dk); color:var(--gold-lt);
  padding-block:1.05rem; overflow:hidden; white-space:nowrap;
  border-block:1px solid rgba(200,164,77,.2);
}
.marquee__track{ display:inline-flex; align-items:center; gap:2.2rem; animation:slide 42s linear infinite }
.marquee__track span{
  font-family:var(--display); font-size:1.05rem; letter-spacing:.28em; text-transform:uppercase;
}
.marquee__track em{ color:var(--brick-lt); font-style:normal; font-size:.7rem }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ===================== prologue ===================== */
.prologue{ background:var(--parch) }
.prologue__grid{
  display:grid; grid-template-columns:1fr .82fr; gap:clamp(40px,7vw,110px); align-items:center;
}
.arch-frame{
  position:relative; aspect-ratio:3/4;
  clip-path:url(#mughalArchTall);
  background:var(--green-dk);
}
.arch-frame img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--slow) }
.arch-frame:hover img{ transform:scale(1.05) }
.arch-frame__line{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(75% 65% at 50% 40%, transparent 45%, rgba(6,32,26,.3) 100%);
}
.prologue__fig figcaption{
  margin-top:1.2rem; text-align:center;
  font-family:var(--display); font-style:italic; font-size:.95rem; color:var(--stone);
}

/* stats */
.stats{
  list-style:none; display:grid; grid-template-columns:repeat(4,1fr);
  margin-top:clamp(56px,8vw,110px);
  border-top:1px solid rgba(13,59,47,.16);
}
.stats li{
  padding:2.4rem 1.2rem; text-align:center;
  border-right:1px solid rgba(13,59,47,.12);
}
.stats li:last-child{ border-right:0 }
.stats b{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(2.4rem,4vw,3.6rem); line-height:1; color:var(--brick);
}
.stats span{
  display:block; margin-top:.9rem; font-size:.64rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--stone);
}

/* ===================== section heads ===================== */
.sec-head{ margin-bottom:clamp(40px,5vw,70px) }
.sec-head--split{ display:flex; justify-content:space-between; align-items:flex-end; gap:3rem; flex-wrap:wrap }
.sec-head--center{ text-align:center; display:grid; justify-items:center }
.sec-head--center .display{ max-width:none }
.sec-head--center .sec-head__note{ max-width:52ch }
.sec-head__note{
  font-family:var(--display); font-style:italic; font-size:1.05rem;
  color:var(--stone); max-width:34ch;
}
.sec-head__note--light{ color:rgba(247,242,231,.62); margin-top:1.2rem }

/* ===================== landmarks ===================== */
.landmarks{ background:var(--parch-2) }
.lm{ display:grid; grid-template-columns:1fr .9fr; gap:clamp(36px,5vw,80px); align-items:start }

.lm__list{ border-top:1px solid rgba(13,59,47,.18) }
.lm__item{
  display:grid; grid-template-columns:auto 1fr auto; gap:1.6rem; align-items:start;
  padding:1.9rem .4rem; border-bottom:1px solid rgba(13,59,47,.14);
  position:relative; transition:padding-left .55s var(--slow);
}
.lm__item::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--brick); transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--slow);
}
.lm__item:hover, .lm__item.is-active{ padding-left:1.5rem }
.lm__item:hover::before, .lm__item.is-active::before{ transform:scaleY(1); transform-origin:top }
.lm__num{
  font-family:var(--display); font-style:italic; font-size:1rem; color:var(--gold);
  width:1.8rem; text-align:center; padding-top:.55em;
}
.lm__go{ align-self:center }
.lm__name{
  display:block; font-family:var(--display); font-size:clamp(1.5rem,2.3vw,2.1rem);
  line-height:1.2; color:var(--green-dk);
}
.lm__desc{
  display:block; margin-top:.35rem; font-size:.88rem; color:#5D6058;
  max-width:40ch; line-height:1.6;
}
.lm__go{
  font-size:1.1rem; color:var(--brick); opacity:0; transform:translateX(-8px);
  transition:opacity .45s, transform .45s var(--slow);
}
.lm__item:hover .lm__go, .lm__item.is-active .lm__go{ opacity:1; transform:none }

.lm__stage{ position:sticky; top:120px }
.lm__frame{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  clip-path:url(#mughalArchTall);
  background:var(--green-dk);
  box-shadow:0 40px 80px -40px rgba(6,32,26,.5);
}
.lm__frame img{
  width:100%; height:100%; object-fit:cover;
  transition:opacity .7s var(--ease), transform 6s linear;
  transform:scale(1.05);
}
.lm__frame img.fade{ opacity:0 }
.lm__vign{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(80% 70% at 50% 40%, transparent 40%, rgba(6,32,26,.42) 100%);
}

/* ===================== quote ===================== */
.quote{
  position:relative; min-height:78vh; display:grid; place-items:center;
  padding-block:var(--sec); overflow:hidden; color:var(--parch); text-align:center;
}
.quote__bg{
  position:absolute; inset:-12% 0;
  background-size:cover; background-position:center;
  will-change:transform;
}
.quote__scrim{ position:absolute; inset:0; background:linear-gradient(rgba(6,32,26,.55), rgba(6,32,26,.78)) }
/* NB: cap the width on the <p>, which carries the display font-size — a `ch`
   cap on the wrapper would resolve against the small body font and collapse it. */
.quote__text{ position:relative; z-index:2; padding-inline:var(--gut) }
.quote__text p{ max-width:26ch; margin-inline:auto; text-wrap:balance }
.quote__text p{
  font-family:var(--display); font-weight:300; font-style:italic;
  font-size:clamp(1.6rem,3.6vw,3rem); line-height:1.32; letter-spacing:-.01em;
}
.quote__text cite{
  display:block; margin-top:2.2rem; font-family:var(--ui); font-style:normal;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold);
}

/* ===================== gallery ===================== */
.gallery{ background:var(--parch) }
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.6rem }
.chip{
  padding:.72em 1.35em; border:1px solid rgba(13,59,47,.22);
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:#5D6058;
  transition:.4s var(--ease);
}
.chip:hover{ border-color:var(--brick); color:var(--brick) }
.chip.is-on{ background:var(--green-dk); border-color:var(--green-dk); color:var(--gold-lt) }

.grid{ columns:4; column-gap:14px }
.grid figure{
  break-inside:avoid; margin-bottom:14px; position:relative; overflow:hidden;
  background:var(--parch-2); cursor:zoom-in;
  opacity:0; transform:translateY(20px) scale(.985);
  transition:opacity .8s var(--ease), transform .9s var(--slow);
}
.grid figure.in{ opacity:1; transform:none }
.grid figure img{ width:100%; transition:transform 1.4s var(--slow), filter .6s }
.grid figure::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,32,26,.62), transparent 55%);
  opacity:0; transition:opacity .5s;
}
.grid figure figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:1.1rem 1.2rem;
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--parch);
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .6s var(--slow);
}
.grid figure:hover img{ transform:scale(1.06) }
.grid figure:hover::after{ opacity:1 }
.grid figure:hover figcaption{ opacity:1; transform:none }
.grid figure.hide{ display:none }

.gallery__more{ display:grid; justify-items:center; margin-top:3rem }

/* ===================== seasons ===================== */
.seasons{ background:var(--parch-2) }
.seasons__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2vw,28px) }
.season{
  background:var(--white); padding:2rem 1.7rem 0;
  border:1px solid rgba(13,59,47,.1);
  display:flex; flex-direction:column;
  transition:transform .7s var(--slow), box-shadow .7s var(--ease);
}
.season:hover{ transform:translateY(-8px); box-shadow:0 34px 60px -34px rgba(6,32,26,.4) }
.season__k{
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brick);
}
.season h3{
  font-family:var(--display); font-weight:400; font-size:1.9rem;
  color:var(--green-dk); margin:.5rem 0 .9rem;
}
.season p{ font-size:.86rem; line-height:1.75; color:#5D6058; flex:1 }
.season__img{ margin:1.8rem -1.7rem 0; aspect-ratio:4/3; overflow:hidden }
.season__img img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--slow) }
.season:hover .season__img img{ transform:scale(1.07) }

/* ===================== events ===================== */
.events{ background:var(--green-dk); color:var(--parch); position:relative; overflow:hidden }
.events__pattern{
  position:absolute; inset:0; color:var(--gold); opacity:.09; pointer-events:none;
}
.events .wrap{ position:relative; z-index:2 }
.events__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,1.8vw,26px) }
.ev{
  border:1px solid rgba(200,164,77,.22);
  background:rgba(255,253,248,.03);
  display:flex; flex-direction:column;
  transition:border-color .6s, background .6s, transform .7s var(--slow);
}
.ev:hover{ border-color:rgba(200,164,77,.6); background:rgba(255,253,248,.06); transform:translateY(-8px) }
.ev__img{ aspect-ratio:4/3; overflow:hidden; position:relative }
.ev__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(6,32,26,.75), transparent 60%);
}
.ev__img img{ width:100%; height:100%; object-fit:cover; filter:saturate(.9); transition:transform 1.6s var(--slow), filter .8s }
.ev:hover .ev__img img{ transform:scale(1.07); filter:saturate(1.05) }
.ev__body{ padding:1.7rem 1.6rem 1.9rem; display:flex; flex-direction:column; flex:1 }
.ev h3{
  font-family:var(--display); font-weight:400; font-size:1.55rem;
  color:var(--parch); margin-bottom:.7rem;
}
.ev p{ font-size:.85rem; line-height:1.75; color:rgba(247,242,231,.6); flex:1 }
.ev__meta{
  display:block; margin-top:1.5rem; padding-top:1.1rem;
  border-top:1px solid rgba(200,164,77,.22);
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold);
}

/* ===================== enquire ===================== */
.enquire{ background:var(--parch) }
.enq{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,110px); align-items:start }
.enq__aside .lede{ max-width:34ch; margin-top:1.4rem }
.enq__facts{ display:grid; gap:1.1rem; margin-top:.5rem }
.enq__facts > div{
  display:grid; grid-template-columns:130px 1fr; gap:1rem;
  padding-bottom:1.05rem; border-bottom:1px solid rgba(13,59,47,.12);
}
.enq__facts dt{ font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--stone); padding-top:.35em }
.enq__facts dd{ font-family:var(--display); font-size:1.1rem; color:var(--green-dk) }
.enq__facts a:hover{ color:var(--brick) }

.enq__form{
  background:var(--white); padding:clamp(28px,3.4vw,46px);
  border:1px solid rgba(13,59,47,.12);
  display:grid; gap:1.5rem;
  box-shadow:0 40px 80px -50px rgba(6,32,26,.35);
}
.field{ position:relative }
.field--row{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem }
.field input, .field select, .field textarea{
  width:100%; padding:1.15rem 0 .7rem; background:transparent;
  border:0; border-bottom:1px solid rgba(13,59,47,.24);
  font-size:.95rem; color:var(--green-dk); outline:none; border-radius:0;
  transition:border-color .45s;
}
.field textarea{ resize:vertical }
.field select{ appearance:none; cursor:pointer; padding-top:1.4rem }
.field label{
  position:absolute; left:0; top:1.15rem; pointer-events:none;
  font-size:.92rem; color:var(--stone);
  transition:transform .45s var(--slow), font-size .45s var(--slow), color .45s;
  transform-origin:left top;
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label,
.label--static{
  transform:translateY(-1.05rem); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brick);
}
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--gold) }
.enq__map{ margin-top:2rem }
.map{
  position:relative; aspect-ratio:4/3; background:var(--parch-2);
  border:1px solid rgba(13,59,47,.14); overflow:hidden;
}
.map iframe{ display:block; width:100%; height:100%; border:0 }
.map__facade{
  position:absolute; inset:0; width:100%; display:grid; place-content:center;
  gap:.5rem; justify-items:center; background:none; border:0; cursor:pointer;
  color:var(--green-dk); transition:background .45s var(--slow);
}
.map__facade:hover{ background:rgba(200,164,77,.1) }
.map__pin{ width:30px; color:var(--brick) }
.map__where{ font-family:var(--display); font-size:1.15rem; letter-spacing:.02em }
.map__cue{
  font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--stone);
  border-bottom:1px solid rgba(13,59,47,.24); padding-bottom:.2rem;
}
.map__facade:hover .map__cue{ color:var(--brick); border-bottom-color:var(--brick) }
.map__out{
  display:inline-block; margin-top:.9rem;
  font-size:.62rem; letter-spacing:.22em; text-transform:uppercase; color:var(--stone);
  text-decoration:none; border-bottom:1px solid rgba(13,59,47,.24); padding-bottom:.15rem;
  transition:.3s;
}
.map__out:hover{ color:var(--brick); border-bottom-color:var(--brick) }

.enq__note{
  font-size:.68rem; letter-spacing:.06em; color:var(--stone); text-align:center; margin-top:.2rem;
}
/* Taken out of the grid flow so it costs no row and no gap. */
.enq__trap{
  position:absolute; width:1px; height:1px; padding:0; border:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
.enq__status{
  font-size:.74rem; letter-spacing:.06em; text-align:center; color:var(--green-dk);
}
.enq__status:empty{ display:none }
.enq__status.bad{ color:var(--brick) }

/* ===================== footer ===================== */
.foot{ background:var(--ink); color:var(--parch); padding-block:clamp(60px,7vw,100px) 2rem }
.foot__top{ display:grid; grid-template-columns:1fr 1.1fr; gap:3rem; padding-bottom:4rem }
.foot__brand{ color:var(--gold) }
.foot__urdu{ font-family:var(--urdu); font-size:1.7rem; line-height:2.4; margin-top:1rem; color:var(--parch) }
.foot__tag{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold); opacity:.75; margin-top:.4rem }
.foot__nav{ display:grid; grid-template-columns:repeat(3,1fr); gap:2rem }
.foot__nav h4{
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold); font-weight:500; margin-bottom:1.3rem;
}
.foot__nav a{
  display:block; font-family:var(--display); font-size:1.05rem;
  color:rgba(247,242,231,.65); padding-block:.32rem; transition:color .35s, transform .45s var(--slow);
}
.foot__nav a:hover{ color:var(--parch); transform:translateX(5px) }
.foot__bottom{
  display:flex; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
  padding-top:2rem; border-top:1px solid rgba(247,242,231,.12);
  font-size:.66rem; letter-spacing:.12em; color:rgba(247,242,231,.42);
}

/* ---- follow band: hairline rules running out to the edges, brand in the middle ---- */
.follow{
  display:flex; align-items:center; gap:clamp(20px,4vw,48px);
  padding:clamp(34px,4vw,54px) 0;
  border-top:1px solid rgba(200,164,77,.18);
}
.follow__rule{ flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(200,164,77,.35)) }
.follow__rule:last-child{ background:linear-gradient(90deg, rgba(200,164,77,.35), transparent) }

.follow__mid{ display:grid; justify-items:center; gap:1.25rem; text-align:center }
.follow__title{
  font-size:.6rem; letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
  opacity:.85;
}
.follow__list{ display:flex; gap:1.6rem; flex-wrap:wrap; justify-content:center }

.follow__link{
  display:inline-flex; align-items:center; gap:1.1rem;
  padding:.85rem 1.8rem .85rem 1rem;
  border:1px solid rgba(200,164,77,.28);
  color:var(--gold-lt);
  transition:border-color .5s var(--ease), background .5s var(--ease), color .5s var(--ease);
}
.follow__link:hover{
  border-color:var(--gold);
  background:rgba(200,164,77,.07);
  color:var(--white);
}

.follow__badge{ display:block; width:48px; flex:none; color:var(--gold) }
.follow__badge svg{ width:100%; height:auto; display:block; overflow:visible }
.follow__arch{
  transition:fill .5s var(--ease);
  fill:transparent;
}
.follow__link:hover .follow__arch{ fill:rgba(200,164,77,.14) }
.follow__link:hover .follow__badge{ color:var(--gold-lt) }

.follow__handle{
  font-family:var(--display); font-size:1.4rem; letter-spacing:.04em; line-height:1;
  padding-bottom:.1em;
}

@media (max-width:720px){
  .follow{ flex-direction:column; gap:1.6rem }
  .follow__rule{ width:60%; flex:none }
  .follow__handle{ font-size:1.2rem }
}

/* ---- the architect's credit: the last word on the page ---- */
.credit{
  display:grid; justify-items:center; text-align:center;
  padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,64px);
  border-top:1px solid rgba(200,164,77,.18);
}
.credit__eyebrow{
  font-size:.58rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--gold); opacity:.8;
}
.credit__name{
  font-family:var(--display); font-weight:300;
  font-size:clamp(1.7rem,3.4vw,2.7rem);
  line-height:1.2; letter-spacing:.06em;
  color:var(--parch); margin-top:1rem;
}
.credit__rule{
  display:flex; align-items:center; gap:12px; width:190px;
  margin:1.5rem 0 1.6rem; color:var(--gold);
}
.credit__rule i{ flex:1; height:1px; background:currentColor; opacity:.45 }
.credit__rule b{ font-size:.65rem; line-height:1 }
.credit__line{
  font-family:var(--display); font-style:italic;
  font-size:clamp(.98rem,1.25vw,1.16rem); line-height:1.75;
  color:rgba(247,242,231,.6); max-width:62ch;
}

/* ===================== lightbox ===================== */
.lb{
  position:fixed; inset:0; z-index:150;
  background:rgba(6,20,16,.97); backdrop-filter:blur(6px);
  display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s;
}
.lb.on{ opacity:1; visibility:visible }
.lb__fig{ max-width:min(92vw,1300px); max-height:88vh; display:grid; justify-items:center; gap:1.2rem }
.lb__fig img{
  max-width:100%; max-height:78vh; object-fit:contain;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7);
  transform:scale(.96); opacity:0; transition:transform .7s var(--slow), opacity .5s;
}
.lb.on .lb__fig img{ transform:none; opacity:1 }
.lb__fig figcaption{
  font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold);
}
.lb__close{
  position:absolute; top:1.6rem; right:2rem; font-size:2.4rem; line-height:1;
  color:var(--parch); opacity:.7; transition:opacity .3s, transform .4s;
}
.lb__close:hover{ opacity:1; transform:rotate(90deg) }
.lb__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:56px; height:56px; border:1px solid rgba(247,242,231,.25);
  color:var(--parch); font-size:1.8rem; line-height:1;
  display:grid; place-items:center; transition:.4s var(--ease);
}
.lb__nav:hover{ background:var(--gold); border-color:var(--gold); color:var(--ink) }
.lb__nav--prev{ left:2rem }
.lb__nav--next{ right:2rem }

/* ===================== responsive ===================== */
@media (max-width:1180px){
  .grid{ columns:3 }
  .events__grid, .seasons__grid{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:980px){
  .nav__links, .nav__cta{ display:none }
  .burger{ display:block }
  .prologue__grid, .lm, .enq, .foot__top{ grid-template-columns:1fr }
  .prologue__fig{ max-width:440px; margin-inline:auto }
  .lm__stage{ position:relative; top:0; order:-1; max-width:460px; margin-inline:auto; width:100% }
  .stats{ grid-template-columns:repeat(2,1fr) }
  .stats li:nth-child(2){ border-right:0 }
  .stats li:nth-child(1), .stats li:nth-child(2){ border-bottom:1px solid rgba(13,59,47,.12) }
  .foot__top{ gap:3.4rem }
}
@media (max-width:720px){
  .grid{ columns:2; column-gap:10px }
  .grid figure{ margin-bottom:10px }
  .events__grid, .seasons__grid{ grid-template-columns:1fr }
  .field--row{ grid-template-columns:1fr }
  .hero__ui .scrollcue{ display:none }
  .lb__nav{ width:44px; height:44px }
  .lb__nav--prev{ left:.6rem } .lb__nav--next{ right:.6rem }
  .foot__nav{ grid-template-columns:1fr 1fr }
  .lm__item{ grid-template-columns:auto 1fr; gap:1rem }
  .lm__go{ display:none }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  html{ scroll-behavior:auto }
}