/* ==========================================================================
   EZEEMABI HUB: CORE
   Reset · typography · layout primitives · utilities · buttons · motion
   ========================================================================== */

/* ------------------------------------------------------------------ RESET */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--ink-900);
  color:var(--ivory);
  font-family:var(--ff-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  font-weight:var(--fw-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  overflow-x:clip;
}
body.is-locked{overflow:hidden}

img,svg,video,canvas{display:block;max-width:100%;height:auto}
img{background:var(--ink-800)}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--ink-900)}

/* Scrollbar: small detail, but a bright default scrollbar ruins a dark site */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink-950)}
::-webkit-scrollbar-thumb{background:var(--ink-650);border:2px solid var(--ink-950)}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep)}
html{scrollbar-color:var(--ink-650) var(--ink-950);scrollbar-width:thin}

/* ------------------------------------------------------------- TYPOGRAPHY */
h1,h2,h3,h4,.display{
  font-family:var(--ff-display);
  font-weight:var(--fw-display);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  color:var(--ivory);
  text-wrap:balance;
}
.t-hero{font-size:var(--fs-hero);line-height:var(--lh-tight)}
.t-d1{font-size:var(--fs-d1)}
.t-d2{font-size:var(--fs-d2)}
.t-d3{font-size:var(--fs-d3)}
.t-d4{font-size:var(--fs-d4);line-height:1.2}

/* Italic serif is the site's "voice" accent, used for one word in a heading */
.t-em{font-style:italic;font-weight:var(--fw-display);color:var(--gold-pale)}

p{text-wrap:pretty}
.lead{font-size:var(--fs-lead);line-height:1.62;color:var(--ivory-80);font-weight:var(--fw-body)}
.body{color:var(--ivory-60)}
.measure{max-width:var(--maxw-text)}

/* Drop cap. Opt in with .has-dropcap so it appears at most once per page. */
.has-dropcap::first-letter{
  float:left;
  font-family:var(--ff-display);
  font-weight:var(--fw-display-alt);
  font-size:3.3em;
  line-height:.76;
  padding:.04em .1em 0 0;
  color:var(--gold-pale);
}
.measure-sm{max-width:34rem}

/* Micro-label above every section heading. */
.eyebrow{
  display:inline-flex;align-items:center;gap:.9em;
  font-family:var(--ff-body);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--gold);
}
.eyebrow::before{
  content:'';width:2.25rem;height:1px;background:var(--gold-50);flex:none;
}
.eyebrow--plain::before{display:none}
.eyebrow--center{justify-content:center}
.eyebrow--center::after{content:'';width:2.25rem;height:1px;background:var(--gold-50);flex:none}

/* Numeric section marker, e.g. "01 / 05" */
.marker{
  font-family:var(--ff-mono);font-size:var(--fs-xs);letter-spacing:.12em;
  color:var(--ivory-30);
}
.marker b{color:var(--gold);font-weight:500}

/* --------------------------------------------------------------- LAYOUT  */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-wide{width:100%;max-width:var(--maxw-wide);margin-inline:auto;padding-inline:var(--gutter)}
.wrap-flush{width:100%;max-width:var(--maxw-wide);margin-inline:auto}

.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:calc(var(--section-y) * .55)}
.section--alt{background:var(--ink-850)}
.section--deep{background:var(--ink-950)}

/* Standard section header: eyebrow + title on the left, support text right. */
.s-head{
  display:grid;gap:clamp(1.5rem,1rem + 2vw,3.5rem);
  grid-template-columns:1fr;
  align-items:end;
  margin-bottom:clamp(2.5rem,1.6rem + 3.4vw,5rem);
  border-top:1px solid var(--line);
  padding-top:clamp(1.25rem,1rem + 1vw,2rem);
}
@media (min-width:900px){
  .s-head--split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.s-head__title{margin-top:1.1rem}
.s-head__aside{color:var(--ivory-45);font-size:var(--fs-body)}

.stack>*+*{margin-top:var(--flow,1.25rem)}
.grid{display:grid;gap:var(--grid-gap,clamp(1.25rem,.8rem + 1.8vw,2.5rem))}
@media (min-width:640px){ .g-sm-2{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){
  .g-md-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-md-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-md-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* Hairline that draws itself in on scroll. */
.rule{height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;
      transition:transform var(--dur-4) var(--ease-luxe)}
.rule--gold{background:var(--gold-30)}
.is-in .rule,.rule.is-in{transform:scaleX(1)}

/* Small gold lozenge separator used inside marquees and quotes. */
.dot{display:inline-block;width:5px;height:5px;background:var(--gold);
     transform:rotate(45deg);flex:none}

/* ------------------------------------------------------------- UTILITIES */
.u-center{text-align:center}
.u-gold{color:var(--gold)}
.u-pale{color:var(--gold-pale)}
.u-dim{color:var(--ivory-45)}
.u-caps{text-transform:uppercase;letter-spacing:var(--ls-caps);font-size:var(--fs-eyebrow);font-weight:500}
.u-mono{font-family:var(--ff-mono)}
.u-hide{display:none !important}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;top:0;left:0;z-index:calc(var(--z-preloader) + 1);
  padding:1rem 1.5rem;background:var(--gold);color:var(--ink-900);
  font-size:var(--fs-eyebrow);text-transform:uppercase;letter-spacing:var(--ls-caps);
  transform:translateY(-120%);
}
.skip-link:focus{transform:translateY(0)}

/* ---------------------------------------------------------------- MEDIA  */
/* Every photograph sits inside .fig so it inherits one consistent grade:
   slight desaturation + warm lift, so mixed sources read as one shoot.    */
.fig{position:relative;overflow:hidden;overflow:clip;
     background:var(--ink-800);box-shadow:var(--fig-edge)}
.fig img{
  width:100%;height:100%;object-fit:cover;
  filter:var(--grade);
  transition:transform var(--dur-4) var(--ease-luxe),filter var(--dur-3) var(--ease-luxe);
}
.fig::after{ /* warm gold veil unifies the colour temperature of all images */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(201,162,39,.04),rgba(8,8,10,.13));
  mix-blend-mode:multiply;
}
.fig--hover{transition:box-shadow var(--dur-2) var(--ease-luxe)}
.fig--hover:hover{box-shadow:var(--fig-edge),var(--shadow-lift),var(--glow)}
.fig--hover:hover img{transform:scale(1.045);filter:var(--grade-hover)}

.ratio-16x9{aspect-ratio:16/9}
.ratio-4x3{aspect-ratio:4/3}
.ratio-3x4{aspect-ratio:3/4}
.ratio-1x1{aspect-ratio:1/1}
.ratio-3x2{aspect-ratio:3/2}
.ratio-tall{aspect-ratio:2/3}

/* Scrim used over hero/CTA imagery so type always clears contrast checks. */
.scrim{position:absolute;inset:0;pointer-events:none}
.scrim--hero{background:
  linear-gradient(180deg,rgba(5,5,6,.72) 0%,rgba(5,5,6,.30) 32%,rgba(5,5,6,.55) 66%,rgba(8,8,10,.96) 100%),
  radial-gradient(120% 80% at 50% 45%,transparent 35%,rgba(5,5,6,.55) 100%)}
.scrim--band{background:linear-gradient(180deg,rgba(5,5,6,.88),rgba(5,5,6,.72))}
/* Space cards now carry a title, capacity, a price and a button, so the
   scrim has to start higher and finish darker than it did when there was
   only a heading over the photograph. */
.scrim--card{background:linear-gradient(180deg,transparent 6%,rgba(5,5,6,.42) 40%,
                                        rgba(5,5,6,.82) 70%,rgba(5,5,6,.95) 100%)}

/* ---------------------------------------------------------------- BUTTONS */
.btn{
  --btn-fg:var(--gold-pale);
  --btn-bd:var(--gold-50);
  --btn-fill:var(--gold);
  --btn-fg-hover:var(--ink-900);
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.85em;padding:1.15rem 2.15rem;
  font-family:var(--ff-body);font-size:var(--fs-eyebrow);font-weight:500;
  letter-spacing:var(--ls-caps);text-transform:uppercase;
  color:var(--btn-fg);border:1px solid var(--btn-bd);border-radius:var(--radius);
  overflow:hidden;isolation:isolate;white-space:nowrap;
  transition:color var(--dur-2) var(--ease-luxe),border-color var(--dur-2) var(--ease-luxe),
             translate var(--dur-2) var(--ease-luxe),box-shadow var(--dur-2) var(--ease-luxe);
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;background:var(--btn-fill);
  transform:translateY(101%);
  transition:transform var(--dur-2) var(--ease-luxe);
}
.btn:hover,.btn:focus-visible{color:var(--btn-fg-hover);border-color:var(--btn-fill);
                              translate:0 var(--lift-sm);box-shadow:var(--shadow-card),var(--glow)}
.btn:hover::before,.btn:focus-visible::before{transform:translateY(0)}
.btn__ico{width:1em;height:1em;flex:none;transition:transform var(--dur-2) var(--ease-luxe)}
.btn:hover .btn__ico{transform:translateX(.28em)}

.btn--solid{--btn-fg:var(--ink-900);--btn-bd:var(--gold);--btn-fill:var(--ivory);--btn-fg-hover:var(--ink-900);
            background:var(--gold)}
.btn--ghost{--btn-fg:var(--ivory);--btn-bd:var(--ivory-30);--btn-fill:var(--ivory);--btn-fg-hover:var(--ink-900)}
.btn--sm{padding:.85rem 1.5rem}
.btn--block{display:flex;width:100%}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;pointer-events:none}

/* Text link with a wiping underline. */
.lnk{position:relative;display:inline-flex;align-items:center;gap:.6em;color:var(--gold-pale)}
.lnk::after{
  content:'';position:absolute;left:0;right:0;bottom:-.28em;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;
  transition:transform var(--dur-2) var(--ease-luxe);
}
.lnk:hover::after{transform:scaleX(1);transform-origin:left}
.lnk--caps{text-transform:uppercase;letter-spacing:var(--ls-caps);font-size:var(--fs-eyebrow);font-weight:500}

/* ----------------------------------------------------------------- GRAIN */
/* A fixed film-grain veil. Reads as "printed", kills banding on gradients. */
.grain{
  position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  /* On ivory, overlay blows out to noise; multiply reads as paper tooth. */
  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' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
[data-theme="light"] .grain{opacity:.07;mix-blend-mode:multiply}

/* Faint vertical gold hairlines: an architectural grid hint behind content */
.pillars{position:absolute;inset:0;pointer-events:none;overflow:hidden;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc(100%/4) 100%;opacity:.55;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}

/* ---------------------------------------------------------------- CURSOR */
.cursor,.cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:var(--z-cursor);
  opacity:0;will-change:transform;
}
.cursor{width:5px;height:5px;background:var(--cursor-gold);border-radius:50%;
        transform:translate3d(-50%,-50%,0)}
.cursor-ring{
  width:38px;height:38px;border:1px solid var(--cursor-ring);border-radius:50%;
  transform:translate3d(-50%,-50%,0) scale(1);
  transition:width .35s var(--ease-luxe),height .35s var(--ease-luxe),
             background-color .35s var(--ease-luxe),border-color .35s var(--ease-luxe);
  display:grid;place-items:center;
  font-family:var(--ff-body);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:transparent;
}
body.cursor-ready .cursor,body.cursor-ready .cursor-ring{opacity:1}
body.cursor-hot .cursor-ring{width:62px;height:62px;background:var(--gold-15);border-color:var(--cursor-gold)}
body.cursor-hot .cursor{opacity:0}
/* The ring fills with bright gold in both themes, so its label is always
   near-black rather than a theme token. */
body.cursor-view .cursor-ring{width:82px;height:82px;background:var(--cursor-gold);
                              border-color:var(--cursor-gold);color:#08080A}
body.cursor-view .cursor-ring::after{content:attr(data-label)}
@media (hover:none),(pointer:coarse){ .cursor,.cursor-ring{display:none} }

/* ----------------------------------------------------- SCROLL REVEAL BASE */
[data-reveal]{
  opacity:0;
  transition:opacity var(--dur-3) var(--ease-luxe),transform var(--dur-3) var(--ease-luxe);
  transition-delay:calc(var(--i,0) * 90ms);
  will-change:opacity,transform;
}
[data-reveal="up"]{transform:translateY(30px)}
[data-reveal="down"]{transform:translateY(-24px)}
[data-reveal="left"]{transform:translateX(34px)}
[data-reveal="right"]{transform:translateX(-34px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="fade"]{transform:none}
[data-reveal].is-in{opacity:1;transform:none}

/* Image reveal: a curtain wipes upward off the photo while it settles. */
[data-reveal="curtain"]{opacity:1;transform:none}
[data-reveal="curtain"]::before{
  content:'';position:absolute;inset:0;z-index:3;background:var(--ink-900);
  transform-origin:bottom;
  transition:transform 1.15s var(--ease-luxe);
  transition-delay:calc(var(--i,0) * 110ms);
}
[data-reveal="curtain"] img{transform:scale(1.12)}
[data-reveal="curtain"].is-in::before{transform:scaleY(0)}
[data-reveal="curtain"].is-in img{transform:scale(1)}

/* Line-by-line headline reveal. Author markup as:
   <h1 class="lines"><span><i>Line one</i></span><span><i>Line two</i></span></h1> */
.lines span{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.lines i{
  display:block;font-style:inherit;
  transform:translateY(108%);
  transition:transform 1.15s var(--ease-luxe);
}
.lines span:nth-child(2) i{transition-delay:.11s}
.lines span:nth-child(3) i{transition-delay:.22s}
.lines span:nth-child(4) i{transition-delay:.33s}
.lines.is-in i{transform:translateY(0)}

@media (prefers-reduced-motion:reduce){
  .space:hover,.gitem:hover,.slet:hover,.card:hover,.opt:hover,.btn:hover,
  .wa:hover,.chip:hover,.tswitch:hover,.burger:hover,.lb__btn:hover,
  .cal__btn:hover,.stepper button:hover,.foot__social a:hover{translate:none !important}
  [data-reveal]{opacity:1 !important;transform:none !important}
  [data-reveal="curtain"]::before{display:none}
  .lines i{transform:none !important}
  .rule{transform:scaleX(1) !important}
}