/* =====================================================================
   FIT THE KASBAH · site stylesheet (new website)
   Brand tokens carried over from the live site: OKLCh palette,
   Anton display, Poppins body. Sections are added one at a time.
   ===================================================================== */

/* registered so the hero glow's strength can animate */
@property --glow-a{syntax:'<number>'; inherits:false; initial-value:.5}

:root{
  /* brand */
  --c-orange:oklch(60.59% 0.1768 40.17);
  --c-orange-deep:oklch(53.06% 0.1612 40.17);
  --c-coral:oklch(67.97% 0.1445 40.17);
  --c-gold:oklch(74% 0.116 85);
  --c-gold-deep:oklch(56% 0.094 80);
  --c-leaf:oklch(58.05% 0.1201 155.64);

  /* warm neutrals */
  --c-ink:oklch(18.38% 0.0052 67.50);
  --c-sand-50:oklch(98.88% 0.0045 71.42);
  --c-sand-100:oklch(95.19% 0.0114 71.42);
  --c-sand-200:oklch(88.95% 0.0293 71.42);
  --c-sand-300:oklch(75.38% 0.0636 71.42);
  --c-olive:oklch(42.25% 0.0522 71.42);
  --c-muted:oklch(51.07% 0.0109 62.43);
  --c-line:oklch(89.28% 0.0168 71.42);

  /* type */
  --font-display:'Anton',Impact,sans-serif;
  --font-body:'Poppins',system-ui,sans-serif;

  /* layout */
  --nav-h:72px;
  --maxw:1320px;
  --gutter:clamp(20px,4.5vw,64px);
  --sec-pad:clamp(32px,4vw,56px);
  --ease:cubic-bezier(.2,.7,.2,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  /* scroll-driven values, written by js/site.js */
  --hero-p:0;
  /* the soft in-out used for state fades (nav bar, curtain) */
  --ease-soft:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
/* ink page background: iOS Safari (26+) ignores theme-color and tints the status bar and toolbar strips
   from this, so a light body shows as white bands. Light sections set their own sand background */
body{
  font-family:var(--font-body); font-weight:300; line-height:1.6;
  color:var(--c-ink); background:var(--c-ink);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block; max-width:100%}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--c-orange); outline-offset:4px; border-radius:6px}

/* film grain over everything, very faint */
.grain{position:fixed; inset:0; z-index:90; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:.65em;
  font-family:var(--font-body); font-weight:500; font-size:.95rem; letter-spacing:.01em;
  text-decoration:none; white-space:nowrap;
  /* 1px top and the side offset centre the cap height and the text+icon group exactly */
  min-height:52px; padding:1px calc(1.9em - .6px) 0 calc(1.9em + .6px); border-radius:12px;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn svg{width:1.05em; height:1.05em; flex:none; transition:transform .25s var(--ease)}
.btn-primary{background:var(--c-orange); color:#fff; border:1px solid var(--c-ink); box-shadow:0 10px 30px oklch(60.59% 0.1768 40.17 / .35)}
.btn-glass{color:#fff; background:oklch(100% 0 0 / .08); border:1px solid oklch(100% 0 0 / .45); box-shadow:none; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px)}
/* hover only where there is a pointer: on phones a tapped button would otherwise stay lifted */
@media (hover:hover){
  .btn-primary:hover{background:var(--c-orange-deep); transform:translateY(-2px); box-shadow:0 14px 36px oklch(53.06% 0.1612 40.17 / .45)}
  .btn-primary:hover svg{transform:translateX(3px)}
  .btn-glass:hover{background:oklch(100% 0 0 / .16); border-color:#fff; transform:translateY(-2px)}
  .btn-glass:hover svg{transform:translateY(3px)}
}

/* =====================================================================
   NAV · transparent over the hero, solid once the page scrolls
   ===================================================================== */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; gap:clamp(16px,2.4vw,36px);
  padding:0 var(--gutter); color:var(--c-sand-50);
  transition:color .6s var(--ease-soft);
}
/* the solid bar's frosted glass sits on a layer behind the nav: a backdrop-filter on .nav itself
   would make it a backdrop root and kill the dropdown's dark glass */
.nav::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background:oklch(98.88% 0.0045 71.42 / .86); box-shadow:0 1px 0 var(--c-line);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  will-change:opacity; transition:opacity .6s var(--ease-soft)}
/* one height in both states: animating height reflowed the page every frame */
.nav.is-solid{color:var(--c-ink)}
.nav.is-solid::before{opacity:1}
/* phones: fading a frosted-blur layer flickers in iOS Safari, so the bar is near-solid sand, no blur */
@media (max-width:860px){
  .nav::before{background:oklch(98.88% 0.0045 71.42 / .97); backdrop-filter:none; -webkit-backdrop-filter:none}
  /* a touch quicker on phones, where scrolls are short flicks */
  .nav,.nav::before,.nav-brand{transition-duration:.4s}
}
.nav-brand{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:1.25rem; text-decoration:none; white-space:nowrap; transition:text-shadow .6s var(--ease-soft)}
.nav-brand b{font-weight:400; color:var(--c-orange)}
.nav-date{
  display:inline-flex; align-items:center; white-space:nowrap;
  font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  /* uneven on purpose: measured so the ink sits dead centre */
  padding:.478em .967em .522em 1.033em; border-radius:9px; border:1px solid currentColor; opacity:.8;
}
.nav .btn{min-height:42px; padding:1.5px calc(1.35em + .5px) 0 calc(1.35em - .5px); font-size:.86rem; box-shadow:none}
.nav-book{margin-left:auto}

/* burger tile: dark glass, the same on every screen */
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:42px; height:42px; margin-left:calc(8px - clamp(16px,2.4vw,36px));
  border-radius:9px; border:1px solid oklch(100% 0 0 / .16); color:var(--c-sand-50); cursor:pointer;
  background:oklch(18.38% 0.0052 67.50 / .42); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .25s var(--ease), border-color .25s var(--ease);
}
.nav-toggle[aria-expanded="true"]{background:oklch(18.38% 0.0052 67.50 / .72); border-color:var(--c-orange)}
/* on the light scrolled bar the see-through tile turns grey, so it goes solid ink there */
.nav.is-solid .nav-toggle{background:var(--c-ink); border-color:var(--c-ink)}
.nav.is-solid .nav-toggle[aria-expanded="true"]{border-color:var(--c-orange)}
/* the bars turn into the cross: both icons sit stacked, one rotates out as the other rotates in */
.nav-toggle{position:relative}
.nav-toggle svg{position:absolute; width:20px; height:20px; transition:opacity .3s var(--ease-soft), rotate .45s var(--ease-out)}
.nav-toggle .ic-x{opacity:0; rotate:-90deg}
.nav-toggle[aria-expanded="true"] .ic-bars{opacity:0; rotate:90deg}
.nav-toggle[aria-expanded="true"] .ic-x{opacity:1; rotate:0deg}

/* the section links: a dark glass dropdown under the burger, the same on every screen */
.nav-links{
  position:fixed; top:calc(var(--nav-h) - 6px); right:12px; width:220px;
  display:flex; flex-direction:column; gap:6px; padding:8px;
  border-radius:12px; border:1px solid oklch(100% 0 0 / .22);
  /* dark tint, light blur: the photo shows through clearly but dimmed */
  background:oklch(10% 0.005 67.50 / .18); backdrop-filter:blur(5px) brightness(.46); -webkit-backdrop-filter:blur(5px) brightness(.46);
  box-shadow:0 24px 48px oklch(0% 0 0 / .35);
  /* opening: the panel unrolls downward from the bar (clip), settling from slightly above; closing rolls it back up.
     No fade on the panel itself: iPhone Safari drops the frosted backdrop the moment a glass panel's opacity animates,
     which made the close look instant there */
  transform-origin:top right;
  transform:translateY(-8px) scale(.97); clip-path:inset(0 0 100% 0 round 12px); visibility:hidden;
  transition:transform .4s var(--ease-soft), clip-path .4s var(--ease-soft), visibility 0s linear .4s;
}
.nav-links.is-open{
  transform:none; clip-path:inset(0 0 0 0 round 12px); visibility:visible;
  transition:transform .55s var(--ease-out), clip-path .55s var(--ease-out), visibility 0s;
}
.nav-links a{
  display:flex; align-items:center; justify-content:center; min-height:42px; padding:0 1em; border-radius:8px;
  font-size:.88rem; font-weight:400; text-decoration:none; color:var(--c-sand-50); border:1px solid transparent;
  opacity:0; transform:translateY(-6px);
  transition:background .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease-soft), transform .2s var(--ease-soft);
}
/* the links follow the unroll one after another */
.nav-links.is-open a{opacity:1; transform:none; transition:background .2s var(--ease), border-color .2s var(--ease), opacity .4s var(--ease-soft) var(--d), transform .5s var(--ease-out) var(--d)}
.nav-links a:nth-child(1){--d:.08s} .nav-links a:nth-child(2){--d:.12s} .nav-links a:nth-child(3){--d:.16s}
.nav-links a:nth-child(4){--d:.2s} .nav-links a:nth-child(5){--d:.24s} .nav-links a:nth-child(6){--d:.28s}
.nav-links a:nth-child(7){--d:.32s}
@media (prefers-reduced-motion:reduce){
  .nav-links, .nav-links.is-open, .nav-links a, .nav-links.is-open a, .nav-toggle svg{transition-duration:0s !important; transition-delay:0s !important}
}
.nav-links a:active{background:oklch(100% 0 0 / .06); border-color:var(--c-orange)}
@media (hover:hover){
  .nav-toggle:hover{background:oklch(18.38% 0.0052 67.50 / .72); border-color:var(--c-orange)}
  .nav-links a:hover{background:oklch(100% 0 0 / .06); border-color:var(--c-orange)}
}

/* desktop: the right-hand controls sit close to the screen edge */
@media (min-width:861px){ .nav{padding-right:12px} }
@media (max-width:1020px){ .nav-date{display:none} }
/* phones: Book Your Spot waits in the hero; the dropdown spans the gutters with thumb-sized rows */
@media (max-width:860px){
  .nav .nav-book{display:none}
  .nav-toggle{margin-left:auto}
  .nav-links{left:var(--gutter); right:var(--gutter); width:auto}
  .nav-links a{min-height:50px; font-size:1rem}
  /* the menu's first block: the orange Book button, as in the hero */
  .nav-links a.nav-links-book{
    margin-bottom:4px; font-weight:500; color:#fff; cursor:pointer;
    background:var(--c-orange); border:1px solid var(--c-ink);
    box-shadow:0 8px 24px oklch(60.59% 0.1768 40.17 / .35);
  }
  .nav-links a.nav-links-book:active{background:var(--c-orange-deep); border-color:var(--c-ink)}
}
/* the PC bar has its own Book button */
@media (min-width:861px){ .nav-links-book{display:none !important} }

/* =====================================================================
   HERO · split
   Type sits on its own dark panel, the photograph gets its own half.
   Nothing is laid over the image, so nothing fights it.
   ===================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:grid; grid-template-columns:minmax(0,46fr) minmax(0,54fr);
  color:var(--c-sand-50); background:var(--c-ink);
}

/* photo half: settles on load, eases in slightly on scroll */
.hero-photo{position:relative; overflow:hidden; order:2}
.hero-photo{touch-action:pan-y}
.hero-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%;
  transform:scale(calc(1 + var(--hero-p) * .08)); transform-origin:50% 60%;
  opacity:0; transition:opacity .7s var(--ease)}
.hero-photo img.is-active{opacity:1}
.hero-photo img[data-n="1"]{object-position:75% 50%}
.hero-photo img[data-n="3"]{object-position:80% 50%}

/* page dots, iPhone style, shared by the hero photo and the Experience tiles: the current item
   stretches into a dash. Each button is a finger-sized hit area; the visible mark is its ::before.
   Colours come from --dot and --dot-on so each use can tint them */
.dots{display:flex; justify-content:center}
.dots button{display:flex; align-items:center; justify-content:center; height:28px; padding:0 4px; border:0; background:none; cursor:pointer}
.dots button::before{
  content:""; width:6px; height:6px; border-radius:3px; background:var(--dot);
  transition:width .4s var(--ease-out), background .4s var(--ease);
}
.dots button[aria-current="true"]::before{width:18px; background:var(--dot-on)}
/* phones: smaller marks, same finger-sized hit area */
@media (max-width:900px){
  .dots button{padding:0 3px}
  .dots button::before{width:5px; height:5px; border-radius:2.5px}
  .dots button[aria-current="true"]::before{width:14px}
}
.hero-dots{--dot:oklch(100% 0 0 / .5); --dot-on:#fff; position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:2}
.hero-dots button::before{box-shadow:0 0 6px oklch(0% 0 0 / .35)}
/* phones: sits low, just above the orange line */
@media (max-width:900px){ .hero-dots{bottom:-4px} }
/* top shade so the nav controls stay readable over the sky */
.hero-scrim{position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, oklch(10% 0.02 40 / .5) 0%, oklch(10% 0.02 40 / 0) 20%)}

/* type half */
.hero-inner{
  position:relative; order:1; isolation:isolate;
  display:flex; flex-direction:column; justify-content:center; gap:clamp(22px,3.4vh,36px);
  padding:calc(var(--nav-h) + clamp(24px,5vh,56px)) clamp(24px,4vw,64px) clamp(32px,6vh,64px) var(--gutter);
  /* warm orange glow in the top-left corner of the panel */
  background:radial-gradient(75% 55% at 0% 0%, oklch(32% 0.07 45 / var(--glow-a)), transparent 72%);
}
/* a thin orange seam where the type meets the photograph */
.hero-inner::after{content:""; position:absolute; top:0; bottom:0; right:0; width:3px; background:var(--c-orange)}
/* texture: a hairline zellige star lattice, barely there, fading out before it reaches the text */
.hero-inner::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23f3e6cf' stroke-width='.6'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3Cpath d='M28 0v13.86M28 42.14V56M0 28h13.86M42.14 28H56'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px; background-position:right -28px bottom -28px;
  -webkit-mask-image:radial-gradient(120% 95% at 100% 100%, #000 0%, rgb(0 0 0 / .55) 45%, transparent 85%);
          mask-image:radial-gradient(120% 95% at 100% 100%, #000 0%, rgb(0 0 0 / .55) 45%, transparent 85%);
}

.hero-tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(18px,3vh,30px)}
.tag{
  display:inline-flex; align-items:center; gap:.6em; white-space:nowrap;
  font-size:.7rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  /* uneven on purpose: measured so the ink sits dead centre (trailing letter-spacing, Poppins metrics) */
  padding:.676em 1.082em .544em 1.268em; border-radius:9px;
  border:1px solid oklch(100% 0 0 / .3);
}
/* lifted by the same amount the tag's uneven padding pushes the text line down, so it sits dead centre */
.tag .dot{position:relative; top:-.066em; width:7px; height:7px; border-radius:50%; background:var(--c-leaf); flex:none}
/* Women's Edition: champagne gold, quiet. Dark face, a fine gold hairline, soft gold type, a faint slow sheen */
.tag-women{
  position:relative; overflow:hidden; isolation:isolate;
  color:oklch(86% 0.065 85); font-weight:500;
  border:1px solid transparent;
  background:
    linear-gradient(oklch(20% 0.012 70), oklch(16% 0.008 70)) padding-box,
    linear-gradient(120deg, oklch(58% 0.07 75), oklch(88% 0.07 90) 35%, oklch(66% 0.075 78) 60%, oklch(84% 0.06 88)) border-box;
}
/* the sheen parks off-tile; it only sweeps when motion is allowed (see the entrance block) */
.tag-women::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, oklch(88% 0.07 90 / .14) 50%, transparent 60%);
  transform:translateX(-130%);
}

.eyebrow{
  margin-bottom:clamp(10px,1.6vh,18px);
  font-size:clamp(.66rem,1.1vw,.78rem); font-weight:500; letter-spacing:.32em; text-transform:uppercase;
  color:oklch(96% 0.01 70 / .92);
}

.wordmark{
  /* pull Anton's left side bearing (.03125em) back so the F and K ink lines up with every other left edge */
  margin-left:-.03125em;
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(4rem,8.6vw,9.4rem); line-height:.84; letter-spacing:.004em;
  color:var(--c-sand-50);
}
/* clip only the bottom edge (for the rise-in); tops and sides stay whole */
.wordmark .line{display:block; clip-path:inset(-50% -10% -.08em -10%)}
.wordmark .line > span{display:block}
/* "Kasbah" tucks up into "Fit The" and sits over it, on every screen */
.wordmark .line + .line{position:relative; margin-top:-.02em}
.wordmark .kasbah{color:var(--c-orange)}

.hero-lead{
  margin-top:clamp(14px,2.2vh,22px); max-width:30ch;
  font-size:clamp(1.05rem,1.6vw,1.4rem); font-weight:300; line-height:1.45;
  color:oklch(97% 0.008 70); text-wrap:balance;
}

/* facts, pillars and actions under the headline */
.hero-side{display:flex; flex-direction:column; gap:20px; max-width:460px}
.facts{list-style:none; border-top:1px solid oklch(100% 0 0 / .28)}
.facts li{
  display:flex; justify-content:space-between; align-items:baseline; gap:24px;
  padding:.85em 0; border-bottom:1px solid oklch(100% 0 0 / .28);
  font-size:.98rem; font-weight:400;
}
.facts .k{font-size:.68rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:oklch(100% 0 0 / .78)}
.facts a{text-decoration:none; background:linear-gradient(currentColor,currentColor) 0 100% / 100% 1px no-repeat; padding-bottom:2px; transition:color .2s, background-size .3s var(--ease-out)}
.facts a:hover{color:var(--c-coral)}
.pillars{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em;
  font-size:clamp(1.05rem,1.5vw,1.3rem);
}
/* each dot sits exactly midway between its two words */
.pillars i{flex:1 1 0; height:6px; background:radial-gradient(circle, var(--c-orange) 2.5px, transparent 3px)}
.hero-cta{display:grid; grid-template-columns:1fr auto; gap:10px}
.follow{
  display:inline-flex; align-items:center; gap:.55em; align-self:flex-start;
  font-size:.86rem; font-weight:400; text-decoration:none; color:oklch(100% 0 0 / .8);
  transition:color .2s;
}
.follow svg{width:1.05em; height:1.05em}
.follow:hover{color:#fff}

/* entrance: the one choreographed moment on the page, slow on purpose (about 5s end to end)
   0.2s        the orange seam draws down the panel edge (1.6s)
   --go (.8s)  the photo exposes and settles, FIT THE rises, KASBAH follows, the glow warms up
   +0.8s       tags and eyebrow, then tagline, facts, buttons, follow, each a beat apart
   +1.1s       the texture breathes in; +1.9s the nav arrives last; +3.3s the gold sheen starts */
@media (prefers-reduced-motion:no-preference){
  .hero-inner::after{transform-origin:50% 0; animation:seam 1.6s cubic-bezier(.55,0,.3,1) .2s both}
  @keyframes seam{from{transform:scaleY(0)} to{transform:none}}

  /* --go is the moment everything after the seam starts: .8s, halfway through the seam's draw (.2s to 1.8s) */
  :root{--go:.8s}

  /* the photo starts with the left-hand content */
  .hero-photo{animation:expose 2.4s var(--ease) var(--go) both}
  .hero-photo img{animation:settle 3.6s var(--ease-out) var(--go) both}
  @keyframes expose{from{opacity:0} to{opacity:1}}
  @keyframes settle{from{scale:1.12} to{scale:1}}

  /* starts far enough down that no glyph top peeks through the line's bottom allowance */
  .wordmark .line > span{transform:translateY(135%); animation:up 1.5s var(--ease-out) var(--go) forwards}
  .wordmark .line:nth-child(2) > span{animation-delay:calc(var(--go) + .25s)}
  @keyframes up{to{transform:none}}

  .in{opacity:0; transform:translateY(14px); filter:blur(4px); animation:in 1.3s var(--ease-out) forwards}
  .d1{animation-delay:calc(var(--go) + .8s)}.d2{animation-delay:calc(var(--go) + 1.1s)}.d3{animation-delay:calc(var(--go) + 1.35s)}.d4{animation-delay:calc(var(--go) + 1.6s)}.d5{animation-delay:calc(var(--go) + 1.85s)}
  @keyframes in{to{opacity:1; transform:none; filter:none}}

  /* the top-left orange glow warms up with the content */
  .hero-inner{animation:glow 2.4s var(--ease) var(--go) both}
  @keyframes glow{from{--glow-a:0}}

  /* backwards, not both: a held opacity animation makes the nav a backdrop root, which kills the menu's dark glass */
  .nav{animation:fade 1.4s var(--ease) calc(var(--go) + 1.9s) backwards}
  .hero-inner::before{animation:breathe 3s var(--ease) calc(var(--go) + 1.1s) both}
  @keyframes fade{from{opacity:0}}
  @keyframes breathe{from{opacity:0}}

  /* the gold sheen waits until the page has settled */
  .tag-women::after{animation:gold-sheen 7s var(--ease) calc(var(--go) + 3.3s) infinite}
  @keyframes gold-sheen{0%{transform:translateX(-130%)} 30%,100%{transform:translateX(130%)}}

  /* Booking Open's live pulse */
  .tag .dot{animation:live 2s ease-in-out infinite}
  @keyframes live{0%{box-shadow:0 0 0 0 oklch(58.05% 0.1201 155.64 / .7)} 70%,100%{box-shadow:0 0 0 8px oklch(58.05% 0.1201 155.64 / 0)}}
}

/* tablets and phones: photo on top, type below it */
@media (max-width:900px){
  .hero{grid-template-columns:1fr; grid-template-rows:auto auto}
  .hero-photo{order:1; height:44svh; min-height:280px}
  .hero-photo img[data-n="1"]{object-position:62% 50%}
  /* the logo sits on the orange sky here: a dark pool behind it at top-left keeps the orange KASBAH readable */
  .hero-scrim{background:
    radial-gradient(70% 26% at 0% 0%, oklch(10% 0.02 40 / .6), oklch(10% 0.02 40 / 0) 100%),
    linear-gradient(180deg, oklch(10% 0.02 40 / .78) 0%, oklch(10% 0.02 40 / .35) 22%, oklch(10% 0.02 40 / 0) 38%)}
  .nav:not(.is-solid) .nav-brand{text-shadow:0 1px 10px oklch(10% 0.02 40 / .55)}
  .hero-inner{order:2; padding:clamp(28px,5vh,44px) var(--gutter) clamp(36px,6vh,56px)}
  /* the panel is tall and narrow here, so the glow hugs the top-left under the seam */
  .hero-inner{background:radial-gradient(95% 32% at 0% 0%, oklch(32% 0.07 45 / var(--glow-a)), transparent 72%)}
  .hero-inner::after{top:0; bottom:auto; left:0; right:0; width:auto; height:3px}
  .wordmark{font-size:clamp(3.6rem,16vw,7rem)}
  /* the seam is horizontal here, so it draws left to right */
  @media (prefers-reduced-motion:no-preference){
    .hero-inner::after{transform-origin:0 50%; animation-name:seam-x}
    @keyframes seam-x{from{transform:scaleX(0)} to{transform:none}}
  }
}
@media (max-width:520px){
  /* the photo takes whatever height the type leaves, so on taller phones
     the hero still fills exactly one screen with no dead band */
  .hero{grid-template-rows:minmax(0,1fr) auto}
  .hero-photo{height:auto; min-height:max(220px,34svh)}
  /* bottom padding mirrors the seam-to-tags space above (24px padding minus the 3px seam),
     so the panel sits balanced in its frame; slightly roomier gaps let the content breathe */
  .hero-inner{gap:18px; padding-top:24px; padding-bottom:21px}
  /* iOS Safari's floating toolbar shows the page through it, so the top of the next section
     peeked in as a sand strip. A dark curtain with a soft lower edge covers that strip while the
     page sits at the top; once scrolling starts (.is-scrolled, set with the nav bar) it fades out
     on its own clock, and fades back in at the top. Time-based, so momentum scroll can't jitter it */
  .hero + .section::before{
    content:""; position:absolute; inset:0 0 auto 0; z-index:1; height:160px; pointer-events:none;
    background:linear-gradient(var(--c-ink) 60%, oklch(18.38% 0.0052 67.50 / 0));
    will-change:opacity; transition:opacity .55s var(--ease-soft);
  }
  .is-scrolled .hero + .section::before{opacity:0}
  .hero-tags{gap:6px; margin-bottom:12px}
  .tag{font-size:.62rem; letter-spacing:.14em; padding:.542em .887em .438em 1.013em}
  .tag .dot{top:-.052em}
  .eyebrow{font-size:.66rem; letter-spacing:.2em; margin-bottom:8px}
  .wordmark{font-size:clamp(3.4rem,17vw,4.6rem)}
  .hero-lead{margin-top:10px; font-size:1rem}
  .hero-side{gap:15px}
  .facts li{font-size:.9rem; padding:.58em 0}
  .pillars{font-size:.98rem}
  .hero-cta .btn{min-height:48px; padding:1px calc(1.3em - .7px) 0 calc(1.3em + .7px); font-size:.9rem}
  .follow{font-size:.8rem}
}
/* short phones: a shorter photo and tighter rhythm keep Book Your Spot on the first screen */
@media (max-width:520px) and (max-height:780px){
  .hero-photo{min-height:max(170px,26svh)}
  .hero-inner{gap:10px; padding-top:18px; padding-bottom:15px}
  .hero-tags{margin-bottom:10px}
  .hero-side{gap:10px}
  .facts li{padding:.4em 0}
}

/* desktop: the hero is exactly one screen, type scales with height too */
@media (min-width:901px){
  /* the dark panel is only as wide as its content; the photo takes the rest */
  .hero{height:100svh; min-height:560px; grid-template-columns:fit-content(52vw) minmax(0,1fr)}
  .hero-inner{gap:clamp(12px,2.6vh,32px); padding-top:calc(var(--nav-h) + clamp(12px,3vh,40px)); padding-bottom:clamp(20px,4vh,48px); padding-right:var(--gutter)}
  .hero-side{max-width:none}
  /* rhythm: tags, then a clear break before the headline group */
  .hero-tags{margin-bottom:clamp(18px,4.2vh,44px)}
  .eyebrow{margin-bottom:clamp(10px,1.8vh,18px)}
  .wordmark{font-size:clamp(3.2rem,min(8.6vw,15vh),9.4rem)}
  .hero-lead{font-size:clamp(1rem,min(1.6vw,2.6vh),1.4rem)}
  .hero-side{gap:clamp(10px,2vh,20px)}
  .facts li{padding:clamp(.45em,1.2vh,.85em) 0}
  .btn{min-height:clamp(44px,5.8vh,52px)}
}

/* =====================================================================
   SECTIONS · shared frame
   Light sections sit on warm sand, dark ones on the hero's ink.
   ===================================================================== */
/* one spacing for every section, top and bottom, so each gap between sections is the same */
.section{position:relative; padding:var(--sec-pad) var(--gutter)}
.section-light{background:var(--c-sand-50); color:var(--c-ink)}
.wrap{max-width:var(--maxw); margin:0 auto}

.section-head{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:end;
  gap:clamp(20px,5vw,80px); margin-bottom:clamp(40px,5.5vw,72px);
}
.section-label{
  margin-bottom:clamp(14px,1.6vw,20px);
  font-size:.72rem; font-weight:500; letter-spacing:.32em; text-transform:uppercase; color:var(--c-orange-deep);
}
.section-title{
  /* same bearing pull as the wordmark, so the heading's left edge lines up with the label */
  margin-left:-.03125em;
  font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.3rem,4.8vw,4.4rem); line-height:.96; letter-spacing:.005em; text-wrap:balance;
}
.section-title em{font-style:normal; color:var(--c-orange)}
.section-intro{max-width:42ch; font-size:clamp(1rem,1.25vw,1.1rem); line-height:1.65; color:var(--c-olive)}

/* scroll reveal: each block fades up once as it comes into view (js adds .is-in) */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0; transform:translateY(18px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay:calc(var(--i, 0) * 90ms)}
  .js .reveal.is-in{opacity:1; transform:none}
}

/* =====================================================================
   EXPERIENCE · six photo tiles, numbered
   ===================================================================== */
.xp-grid{list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.5vw,20px)}
/* the photo fills the tile; an ink gradient rises from the bottom so the white copy stays readable */
.xp-card{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column; gap:10px; min-height:clamp(400px,33vw,470px);
  padding:clamp(24px,2.5vw,32px); border-radius:14px; border:1px solid var(--c-ink);
  background:var(--c-ink); color:#fff;
  transition:box-shadow .4s var(--ease), translate .4s var(--ease);
}
.xp-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:scale 1.2s var(--ease-soft)}
.xp-card:first-child .xp-bg{object-position:50% 90%}
.xp-card::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to top, oklch(14% .01 60 / .94) 0%, oklch(14% .01 60 / .78) 38%, oklch(14% .01 60 / .2) 68%, oklch(14% .01 60 / .5) 100%);
}
/* the number sits at the top, the copy at the bottom */
.xp-n{
  margin-bottom:auto;
  font-family:var(--font-display); font-size:clamp(2rem,2.6vw,2.6rem); line-height:1; color:var(--c-orange);
  text-shadow:0 1px 12px oklch(10% .02 40 / .45);
}
.xp-card h3{font-size:1.22rem; font-weight:500; line-height:1.3; letter-spacing:-.005em}
.xp-card p{font-size:.93rem; line-height:1.6; color:oklch(100% 0 0 / .8)}
@media (hover:hover){
  .xp-card:hover{translate:0 -3px; box-shadow:0 20px 44px oklch(18.38% 0.0052 67.50 / .22)}
  .xp-card:hover .xp-bg{scale:1.05}
}

@media (max-width:1020px){
  .xp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* phones: the heading stacks, and the tiles become a row you swipe, the next one peeking in */
@media (max-width:620px){
  .section-head{grid-template-columns:1fr; gap:16px}
  /* sideways only: overflow-y hidden stops the row scrolling up and down under a finger */
  .xp-grid{
    display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter); scroll-padding:0 var(--gutter);
    scrollbar-width:none;
  }
  .xp-grid::-webkit-scrollbar{display:none}
  .xp-card{flex:0 0 82%; scroll-snap-align:start}
  /* tiles in the row are simply there: no fade as they swipe into view */
  .js .xp-card.reveal{opacity:1; transform:none; transition:none}
  .xp-dots{--dot:oklch(18.38% 0.0052 67.50 / .25); --dot-on:var(--c-ink); margin-top:10px}
}
@media (min-width:621px){ .xp-dots, .row-dots{display:none} }

/* =====================================================================
   INCLUDED · what's in, what's out, and the optional extras
   ===================================================================== */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}

/* photo left, list right; the photo stretches to the list's height */
.incl-body{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(12px,1.5vw,20px); align-items:stretch}
.incl-photo{position:relative; overflow:hidden; border-radius:14px; border:1px solid var(--c-ink); min-height:320px; background:var(--c-sand-200)}
.incl-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:40% 50%; transition:scale 1.2s var(--ease-soft)}
@media (hover:hover){ .incl-photo:hover img{scale:1.04} }

/* eight compact tiles in a hairline grid, two across: the 1px gaps show the line colour behind them */
.incl-grid{
  list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--c-line); border:1px solid var(--c-line); border-radius:14px; overflow:hidden;
}
.incl-item{
  display:flex; align-items:center; gap:16px;
  padding:clamp(16px,1.8vw,24px) clamp(18px,2vw,26px); background:var(--c-sand-100);
  transition:background-color .35s var(--ease);
}
/* the icon sits in a soft orange disc; on hover the disc fills and the line turns white */
.incl-ic{
  width:46px; height:46px; flex:none; padding:12px; border-radius:50%;
  background:oklch(60.59% 0.1768 40.17 / .12);
  fill:none; stroke:var(--c-orange); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  transition:background-color .35s var(--ease), stroke .35s var(--ease);
}
.incl-item p{font-size:.98rem; line-height:1.45; letter-spacing:-.005em}
@media (hover:hover){
  .incl-item:hover{background:var(--c-sand-50)}
  .incl-item:hover .incl-ic{background:var(--c-orange); stroke:#fff}
}
/* the tiles already fade on PC; inside the grid a rise would show the lines behind, so fade only */
.js .incl-item.reveal{transform:none}

/* not included: one quiet strip, crossed-out marks, no fill */
.incl-out{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px clamp(18px,2.4vw,36px);
  margin-top:clamp(10px,1.2vw,14px); padding:16px clamp(22px,2.4vw,32px);
  border:1px dashed var(--c-sand-300); border-radius:14px;
}
.incl-out-title{font-size:.68rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--c-olive)}
.incl-out ul{list-style:none; display:flex; flex-wrap:wrap; gap:8px 26px}
.incl-out li{display:inline-flex; align-items:center; gap:9px; font-size:.92rem; color:var(--c-muted)}
.incl-out li::before{
  content:""; width:12px; height:12px; flex:none;
  background:linear-gradient(45deg, transparent 45%, var(--c-sand-300) 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, var(--c-sand-300) 45% 55%, transparent 55%);
}

.extras{
  position:relative; isolation:isolate; overflow:hidden;
  display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(22px,4vw,64px); align-items:center;
  margin-top:clamp(12px,1.5vw,20px); padding:clamp(28px,3.6vw,52px); border-radius:14px;
  background:var(--c-ink) radial-gradient(70% 90% at 0% 0%, oklch(32% .07 45 / .55), transparent 70%);
  color:var(--c-sand-50);
}
.extras-title{font-family:var(--font-display); font-weight:400; font-size:clamp(1.9rem,3vw,2.8rem); line-height:1; text-transform:uppercase}
.extras-text{margin-top:14px; max-width:46ch; font-size:.95rem; line-height:1.65; color:oklch(100% 0 0 / .7)}
.extras-tags{list-style:none; display:flex; flex-wrap:wrap; gap:8px}

/* tablets and phones: the photo becomes a wide band above the list */
@media (max-width:1020px){
  .incl-body{grid-template-columns:1fr}
  /* Safari sizes a stretched grid item with an aspect-ratio from its (empty) height and collapses it to a dot: give it the width outright */
  .incl-photo{min-height:0; aspect-ratio:16/9; width:100%; align-self:start}
  .extras{grid-template-columns:1fr}
}
/* phones: one row per item */
@media (max-width:620px){
  .incl-photo{aspect-ratio:4/3}
  .incl-grid{grid-template-columns:1fr}
  .incl-item{gap:14px; padding:14px 16px}
  .incl-ic{width:40px; height:40px; padding:10px}
  .incl-item p{font-size:.94rem; line-height:1.4}
  .incl-out{padding:14px 16px}
  .extras-tags{gap:6px}
}

/* =====================================================================
   HOSTS · dark section, five portraits
   ===================================================================== */
.section-dark{background:var(--c-ink); color:var(--c-sand-50); isolation:isolate}
/* the hero's zellige star lattice, same hairline and strength, fading in from the top-right corner.
   The dark "Want to do more?" card in Included carries it too */
.section-dark::before, .extras::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='none' stroke='%23f3e6cf' stroke-width='.6'%3E%3Crect x='18' y='18' width='20' height='20'/%3E%3Crect x='18' y='18' width='20' height='20' transform='rotate(45 28 28)'/%3E%3Cpath d='M28 0v13.86M28 42.14V56M0 28h13.86M42.14 28H56'/%3E%3C/g%3E%3C/svg%3E");
  background-size:56px 56px; background-position:right -28px top -28px;
  -webkit-mask-image:radial-gradient(90% 80% at 100% 0%, #000 0%, rgb(0 0 0 / .55) 45%, transparent 85%);
          mask-image:radial-gradient(90% 80% at 100% 0%, #000 0%, rgb(0 0 0 / .55) 45%, transparent 85%);
}
.section-dark .section-label{color:var(--c-coral)}
.section-dark .section-title em{color:var(--c-orange)}
.section-dark .section-intro{color:oklch(100% 0 0 / .66)}

.hosts{list-style:none; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(14px,1.6vw,24px); align-items:start}
.host{display:flex; flex-direction:column}
.host-photo{position:relative; overflow:hidden; aspect-ratio:4/5; border-radius:12px; border:1px solid var(--c-ink); background:oklch(24% .01 60); margin-bottom:16px}
.host-photo img{width:100%; height:100%; object-fit:cover; transition:scale 1.2s var(--ease-soft)}
/* the hero's gold Women's Edition tag (.tag.tag-women), pinned to the photo; --go starts its sheen */
.host-flag{position:absolute; top:10px; left:10px; --go:0s}
.host-role{font-size:.68rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--c-coral)}
.host-name{margin-top:6px; font-family:var(--font-display); font-weight:400; font-size:clamp(1.7rem,2vw,2rem); line-height:1.05; text-transform:uppercase; letter-spacing:.01em}
.host-handle{margin-top:4px; font-size:.82rem; color:oklch(100% 0 0 / .55); text-decoration:none; width:fit-content; transition:color .25s var(--ease)}
/* the bio shows five lines, fading out; Read more opens the rest */
.host-bio{
  margin-top:14px; overflow:hidden; max-height:8.25em;
  font-size:.88rem; line-height:1.65; color:oklch(100% 0 0 / .72);
  -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent);
  transition:max-height .5s var(--ease-soft);
}
.host-bio p + p{margin-top:.8em}
.host-bio.is-open{-webkit-mask-image:none; mask-image:none}
/* a real button: the hero's rectangular tag shape, with a chevron that flips when the bio is open */
.host-more{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; gap:.6em;
  margin-top:14px; padding:.7em 1em .62em 1.15em; width:fit-content; min-height:40px;
  background:oklch(100% 0 0 / .04); border:1px solid oklch(100% 0 0 / .3); border-radius:9px; cursor:pointer;
  font:inherit; font-size:.68rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--c-sand-50);
  transition:border-color .25s var(--ease), background-color .25s var(--ease);
}
.host-more::after{
  content:""; width:6px; height:6px; margin-top:-3px;
  border-right:1.5px solid var(--c-orange); border-bottom:1.5px solid var(--c-orange); rotate:45deg;
  transition:rotate .3s var(--ease-soft), margin .3s var(--ease-soft);
}
.host-more[aria-expanded="true"]::after{rotate:-135deg; margin-top:3px}
.host-more:active{background:oklch(100% 0 0 / .1)}
@media (hover:hover){
  .host:hover .host-photo img{scale:1.04}
  .host-handle:hover{color:var(--c-coral)}
  .host-more:hover{border-color:var(--c-orange)}
}

@media (max-width:1100px){
  .hosts{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* phones: a swipe row like the Experience tiles */
@media (max-width:620px){
  .hosts{
    display:flex; gap:14px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
    margin:0 calc(var(--gutter) * -1); padding:0 var(--gutter); scroll-padding:0 var(--gutter);
    scrollbar-width:none;
  }
  .hosts::-webkit-scrollbar{display:none}
  .host{flex:0 0 74%; scroll-snap-align:start}
  .js .host.reveal{opacity:1; transform:none; transition:none}
  .row-dots{--dot:oklch(100% 0 0 / .3); --dot-on:#fff; margin-top:14px}
}

/* =====================================================================
   GALLERY · one full-width film strip, drifting slowly left
   ===================================================================== */
.strip{
  --strip-h:clamp(240px,27vw,380px);
  /* full bleed: pulled out past the section's side padding to both screen edges */
  margin:clamp(4px,1vw,12px) calc(var(--gutter) * -1) 0; overflow-x:auto; scrollbar-width:none;
  /* room above and below so a hovered photo grows past its row instead of being clipped by the strip's edges */
  padding-block:10px; margin-block:calc(clamp(4px,1vw,12px) - 10px) -10px;
}
.strip::-webkit-scrollbar{display:none}
/* spacing sits inside each item, not as a gap, so the two copies are exactly half the track each */
.strip-track{list-style:none; display:flex; width:max-content; padding-left:12px}
.strip-track li{flex:none; padding-right:12px}
.strip-track img{display:block; height:var(--strip-h); width:auto; border-radius:14px; border:1px solid var(--c-ink); transition:opacity .5s var(--ease), scale .6s var(--ease-soft)}
/* js moves the track (drift, drag, glide); pan-y leaves vertical page scrolling to the browser on phones */
.strip.is-live{overflow:hidden; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none}
.strip.is-live .strip-track{padding-left:0; will-change:transform}
.strip.is-dragging{cursor:grabbing}
.strip-track img{-webkit-user-drag:none; pointer-events:none}
/* hover lights the photo under the pointer (not while dragging) */
@media (hover:hover){
  .strip:not(.is-dragging):hover img{opacity:.55}
  .strip:not(.is-dragging) .strip-track li:hover img{opacity:1; scale:1.02}
}
@media (max-width:620px){
  .strip{--strip-h:220px}
  .strip-track li{padding-right:8px}
  .strip-track img{border-radius:12px}
}

/* =====================================================================
   CLOSER · the last call to book, then the footer, on one dark ground
   ===================================================================== */
/* the hero's warm glow rises from the bottom centre behind the button */
.closer{padding-bottom:0; background:var(--c-ink) radial-gradient(60% 70% at 50% 100%, oklch(32% .07 45 / .6), transparent 70%)}
/* same top spacing as every section (--sec-pad), and the same again down to the footer line */
.closer-inner{display:flex; flex-direction:column; align-items:center; text-align:center; padding-bottom:var(--sec-pad)}
.closer-title{
  margin-top:8px; font-family:var(--font-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem,6vw,5rem); line-height:.92; letter-spacing:.005em;
}
.closer-title em{font-style:normal; color:var(--c-orange)}
.closer-text{margin-top:clamp(12px,1.2vw,16px); max-width:44ch; font-size:clamp(1rem,1.2vw,1.08rem); line-height:1.6; color:oklch(100% 0 0 / .72)}
.closer-btn{margin-top:clamp(20px,2vw,28px); cursor:pointer}

/* contact: three equal cells between hairlines, a small orange label over each value */
.contact{
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid oklch(100% 0 0 / .12);
}
.contact li{display:flex; flex-direction:column; gap:6px; padding:clamp(18px,2vw,26px) 0; text-align:center}
.contact li + li{border-left:1px solid oklch(100% 0 0 / .12)}
.contact-k{font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--c-orange)}
.contact a{font-size:clamp(.95rem,1.1vw,1.05rem); color:var(--c-sand-50); text-decoration:none; overflow-wrap:anywhere; transition:color .25s var(--ease)}
@media (hover:hover){ .contact a:hover{color:var(--c-orange)} }

.foot{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px 28px;
  padding:22px 0 calc(22px + env(safe-area-inset-bottom)); border-top:1px solid oklch(100% 0 0 / .12);
  font-size:.82rem; color:oklch(100% 0 0 / .55);
}
.foot-brand{font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:1.1rem; text-decoration:none; color:var(--c-sand-50)}
.foot-brand b{font-weight:400; color:var(--c-orange)}
/* phones: the contact cells stack with a hairline between, and the footer centres */
@media (max-width:620px){
  .contact{grid-template-columns:1fr}
  .contact li{padding:16px 0}
  .contact li + li{border-left:0; border-top:1px solid oklch(100% 0 0 / .12)}
  .foot{flex-direction:column; text-align:center}
}

/* =====================================================================
   STAY · Kasbah Beldi, dark section: copy left, three-photo mosaic right
   ===================================================================== */
.stay{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(24px,4vw,64px); align-items:stretch}
/* copy top, pull line middle, tiles bottom: the spare height is shared out so the column ends level with the photos */
.stay-copy{display:flex; flex-direction:column; justify-content:space-between}
.stay-body p{font-size:1rem; line-height:1.75; color:oklch(100% 0 0 / .72); max-width:48ch}
.stay-body p + p{margin-top:1em}
/* the closing line of the copy, set as a pull line in the display face */
.stay-line{
  margin:clamp(22px,2.6vw,34px) 0; padding-left:18px; border-left:3px solid var(--c-orange);
  font-family:var(--font-display); font-size:clamp(1.6rem,2.4vw,2.2rem); line-height:1.05; text-transform:uppercase; color:var(--c-sand-50);
}
/* the two tiles stack, icon beside the text, and sit at the foot of the column level with the photos */
.stay-tiles{display:grid; gap:12px}
.stay-tile{
  display:grid; grid-template-columns:auto 1fr; column-gap:16px; align-items:start;
  padding:clamp(18px,1.8vw,22px); border-radius:14px;
  background:oklch(100% 0 0 / .035); border:1px solid oklch(100% 0 0 / .1);
}
.stay-ic{grid-row:1 / span 2; width:30px; height:30px; fill:none; stroke:var(--c-orange); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.stay-tile h3{font-size:1.02rem; font-weight:500; line-height:1.3}
.stay-tile p{margin-top:4px; font-size:.88rem; line-height:1.6; color:oklch(100% 0 0 / .62)}

/* one wide photo across the top, two squares under it */
.stay-mosaic{display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start}
.stay-shot{position:relative; overflow:hidden; margin:0; border-radius:14px; border:1px solid var(--c-ink); background:oklch(24% .01 60); aspect-ratio:1}
.stay-shot-main{grid-column:1 / span 2; aspect-ratio:2/1}
.stay-shot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:scale 1.2s var(--ease-soft)}
@media (hover:hover){ .stay-shot:hover img{scale:1.05} }

@media (max-width:1020px){
  .stay{grid-template-columns:1fr}
  .stay-mosaic{order:-1}
  .stay-tiles{margin-top:0}
}
/* phones: tighter gaps, a taller top photo; tiles stack */
@media (max-width:620px){
  .stay-mosaic{gap:8px}
  .stay-shot-main{aspect-ratio:4/3}
  .stay-body p{font-size:.96rem}
}