/* ============================================================
   W SPACE — stylesheet
   Brand: yellow #FFDE00 + ink #111. Fonts: Space Grotesk (display) + Manrope (text).
   Edit design tokens below to restyle the whole site at once.
   ============================================================ */

:root{
  --ink:#111;
  --paper:#f6f1ec;      /* soft warm white (like farmacylondon.com), not pure #fff */
  --card:#fffdfa;       /* near-white warm surface for cards / inputs to lift off --paper */
  --placeholder:#ece4d9;/* warm grey for empty image slots */
  --yellow:#FFDE00;
  --yellow-soft:#FFFBE0;
  --gold:#C79A00;
  --pink:#E4326B;
  --orange:#FF7A00;

  --muted-1:#555;
  --muted-2:#666;
  --muted-3:#777;
  --muted-4:#8a8a8a;
  --muted-5:#999;
  --muted-6:#aaa;

  /* warm-tinted lines so borders sit in the cream, not on grey */
  --line:#e6ded2;
  --line-soft:#e9e1d6;
  --line-dot:#ddd4c6;

  --sans:'Manrope', system-ui, sans-serif;
  --display:'Space Grotesk', var(--sans);

  --wrap:1280px;
  --radius:22px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
/* Kill the grey/blue box mobile browsers paint over a tapped button or link.
   The property is inherited, so setting it here covers the whole tree.
   Press feedback is not lost — .btn:active still tracks out the label. */
html{ -webkit-tap-highlight-color:transparent; }
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--gold); }
::selection{ background:var(--yellow); color:var(--ink); }
input,textarea,select,button{ font-family:inherit; }
img{ max-width:100%; }

@keyframes wsFade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

.page{ animation:wsFade .5s ease both; }
.shell{ min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1; }
.wrap{ max-width:var(--wrap); margin:0 auto; padding-left:40px; padding-right:40px; }

/* ---------- Typography helpers ---------- */
.display{ font-family:var(--display); letter-spacing:-0.02em; }
.eyebrow{
  font-size:13px; font-weight:600; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--muted-4);
}

/* ---------- Buttons ----------
   Clean, artifact-free: hover just swaps background/colour, transition:all.
   No box-shadow, no outline → no stray "traces". */
:root{ --ease-out-quart:cubic-bezier(.165,.84,.44,1); --anim-400:320ms; }

.btn{
  cursor:pointer; outline:none; border:2px solid transparent;
  font-weight:600; font-size:15px; letter-spacing:.01em;
  padding:14px 30px; border-radius:999px; display:inline-flex;
  align-items:center; justify-content:center; gap:8px; line-height:1;
  transition:all .25s ease;
}
.btn:active{ letter-spacing:.06em; }        /* subtle press, like the reference */

.btn-dark{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-dark:hover{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }

.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }

.btn-yellow{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); }
.btn-yellow:hover{ background:#e6c200; border-color:#e6c200; }

/* "See the menu" (hero secondary) — quiet outline hover, stays distinct */
.btn-outline-light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
.btn-outline-light:hover{ background:#fff; color:var(--ink); border-color:#fff; }

.btn-sm{ padding:11px 22px; font-size:14px; }


/* Submit buttons: click → spinner → check (self-contained dark circle so it
   reads on any background). */
.btn.is-loading, .btn.is-done{
  width:48px; min-width:48px; padding:0; align-self:center;
  border-radius:50%; pointer-events:none; letter-spacing:0;
}
.btn.is-loading{
  background:var(--ink); color:transparent;
  border:3px solid rgba(255,255,255,.22); border-top-color:var(--yellow);
  animation:btnspin .7s linear infinite;
}
.btn.is-done{
  background:var(--yellow); color:var(--ink); border-color:var(--yellow);
}
.btn.is-done svg{ width:22px; height:22px; }
@keyframes btnspin{ to{ transform:rotate(360deg); } }

/* ---------- Image slots ----------
   Drop a photo into /img named after the slot (e.g. img/hero.jpg).
   Until then the placeholder caption shows. */
.slot{ position:relative; background:var(--placeholder); overflow:hidden; }
.slot::after{                         /* caption shows only where no photo exists */
  content:attr(data-ph); position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  color:#aaa; font-size:13px; text-align:center; padding:16px;
}
/* The img sits inside <picture> (WebP + JPEG fallback), so it is no longer a
   direct child of .slot — picture carries the box, the img fills it. */
.slot > picture{ display:block; width:100%; height:100%; }
.slot img{ position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block; }
/* belt-and-braces: if the slot has a loaded image, kill the caption entirely */
.slot:has(img)::after{ display:none; }

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,241,236,0.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header .wrap{
  height:78px; display:flex; align-items:center;
  justify-content:space-between; gap:24px;
}
.logo{
  display:flex; align-items:baseline; gap:2px;
  font-family:var(--display); font-weight:700; font-size:26px; letter-spacing:-0.02em;
}
.logo .w{ color:var(--yellow); -webkit-text-stroke:1px var(--ink); transform:skewX(-8deg); display:inline-block; }
/* gap keeps a little air between the (now snugger) pills */
.nav{ display:flex; align-items:center; gap:10px; }
/* Nav hover (à la farmacylondon.com):
   1) a yellow rounded "pill" scales up from 30% behind the text (scale .3 -> 1 + fade),
   2) the label rolls up and swaps to an identical copy (translateY -100%).
   No default highlight on the current page. 320ms, ease-out-quart. */
.nav a{
  position:relative; z-index:0;
  display:inline-flex; align-items:center;
  font-size:15px; font-weight:500; letter-spacing:0.01em;
  color:var(--ink); white-space:nowrap;
  padding:6px 13px; border-radius:999px;
}
.nav a::before{                      /* the pill */
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--yellow); border-radius:999px;
  transform:scale(.3); opacity:0;
  transition:transform var(--anim-400) var(--ease-out-quart),
             opacity var(--anim-400) var(--ease-out-quart);
}
.nav a:hover::before{ transform:scale(1); opacity:1; }

/* Text roll — clip window (exactly one line) is separate from the padded pill */
.nav-clip{ display:block; position:relative; overflow:hidden; }
.nav-label{ display:block; position:relative; transition:transform var(--anim-400) var(--ease-out-quart); }
.nav-label::after{ content:attr(data-text); position:absolute; top:100%; left:0; width:100%; }
.nav a:hover .nav-label{ transform:translateY(-100%); }
.header-right{ display:flex; align-items:center; gap:18px; }
/* Language switcher — EN/AZ toggle (based on the FR/EN checkbox slider).
   Ink track + big white knob; active label is dark on the knob, the other
   sits muted on the track. Colours swap with the checkbox state. */
.lang-switch{
  --sw-h:34px; --pad:3px; --sw-w:68px;   /* ~2:1 = compact & rounded, like the ref */
  position:relative; display:inline-block; flex:none;
  width:var(--sw-w); height:var(--sw-h);
}
.lang-switch input{ position:absolute; opacity:0; width:0; height:0; }
.lang-slider{
  position:absolute; inset:0; cursor:pointer;
  background:var(--ink); border-radius:999px;
  transition:background var(--anim-400) var(--ease-out-quart);
}
.lang-slider::before{                         /* the white knob */
  content:""; position:absolute; z-index:1;
  width:calc(var(--sw-h) - 2*var(--pad)); height:calc(var(--sw-h) - 2*var(--pad));
  left:var(--pad); top:var(--pad);
  background:#fff; border-radius:50%;
  box-shadow:0 2px 7px rgba(0,0,0,.3);
  transition:transform var(--anim-400) var(--ease-out-quart);
}
.lang-switch input:checked + .lang-slider::before{ transform:translateX(calc(var(--sw-w) - var(--sw-h))); }
/* two fixed labels, each centred over its knob rest position */
.sel{
  position:absolute; top:0; z-index:2; height:100%;
  width:calc(var(--sw-h) - 2*var(--pad));
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; letter-spacing:0.01em;
  pointer-events:none;
  transition:color var(--anim-400) var(--ease-out-quart);
}
.sel-en{ left:var(--pad); color:var(--ink); }               /* EN active by default */
.sel-az{ right:var(--pad); color:rgba(255,255,255,.5); }    /* AZ muted by default */
.lang-switch input:checked ~ .sel-en{ color:rgba(255,255,255,.5); }
.lang-switch input:checked ~ .sel-az{ color:var(--ink); }
/* ---------- Burger + mobile panel (≤640px; hidden on desktop) ----------
   The button borrows the .btn-ghost idiom (pill, 2px line, ink on hover) so it
   reads as part of the same family. Three lines fold into an X on open. */
.burger{
  display:none;                       /* flipped to inline-flex in the 640 query */
  width:44px; height:44px; padding:0; flex:none;
  align-items:center; justify-content:center;
  background:transparent; border:2px solid var(--ink); border-radius:999px;
  cursor:pointer; outline:none;
  transition:background var(--anim-400) var(--ease-out-quart);
}
/* No :hover rule on purpose. The burger only exists below 640px, i.e. on touch
   screens, where :hover sticks after a tap — that was the grey→black jump.
   The ring is always ink; only the fill changes when the panel opens. */
.header.open .burger{ background:var(--yellow); }

.burger-box{ position:relative; width:18px; height:12px; display:block; }
.burger-l{
  position:absolute; left:0; width:100%; height:2px;
  background:var(--ink); border-radius:2px;
  transition:transform var(--anim-400) var(--ease-out-quart),
             opacity var(--anim-400) var(--ease-out-quart);
}
.burger-l:nth-child(1){ top:0; }
.burger-l:nth-child(2){ top:5px; }
.burger-l:nth-child(3){ top:10px; }
.header.open .burger-l:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.header.open .burger-l:nth-child(2){ opacity:0; }
.header.open .burger-l:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* Panel fills the viewport under the sticky header. visibility (not display)
   keeps it transitionable; `inert` in the markup handles focus/AT.

   NOTE: .mnav must stay a SIBLING of .header, never a child. .header has
   backdrop-filter, which makes it the containing block for position:fixed
   descendants — nested here, the panel would be trapped inside the 64px
   header strip instead of filling the viewport. */
.mnav{
  display:none;                       /* flipped to flex in the 640 query */
  /* 64px header + its 1px border, so the header rule stays visible */
  position:fixed; left:0; right:0; top:65px; bottom:0; z-index:49;
  background:var(--paper);
  flex-direction:column; justify-content:space-between; gap:24px;
  /* max() rather than a bigger calc(): on phones with a home indicator the
     safe-area inset must not stack on top of the lift and push it too high. */
  padding:26px 24px max(100px, calc(28px + env(safe-area-inset-bottom)));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .3s var(--ease-out-quart),
             transform .3s var(--ease-out-quart),
             visibility .3s;
}
.header.open + .mnav{ opacity:1; visibility:visible; transform:none; }

.mnav-links{ display:flex; flex-direction:column; }
.mnav-links a{
  font-family:var(--display); font-weight:700; font-size:30px; letter-spacing:-0.02em;
  padding:15px 0; border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; gap:12px;
  opacity:0; transform:translateY(8px);
}
/* links arrive after the panel, one after another */
.header.open + .mnav .mnav-links a{
  animation:wsFade .42s var(--ease-out-quart) both;
  animation-delay:calc(60ms + var(--i) * 45ms);
}
/* current page — a yellow dot, since desktop nav deliberately has no active style */
.mnav-links a.active::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--yellow); box-shadow:0 0 0 1.5px var(--ink); flex:none;
}
.mnav-links a.active{ color:var(--ink); }

.mnav-foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mnav-foot-label{
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-4);
}

/* page behind the panel must not scroll */
body.no-scroll{ overflow:hidden; }

/* ============================================================
   HOME
   ============================================================ */
/* Full-bleed hero: one photo fills the whole section, copy sits on the left
   over a left-weighted dark scrim so the type stays legible. */
.hero{
  position:relative; overflow:hidden;
  min-height:calc(100vh - 78px);
  min-height:calc(100svh - 78px);
  display:flex; align-items:center;
  background:#141414;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg .slot{ position:absolute; inset:0; background:#141414; }
.hero-bg .slot::after{ color:#4a4a4a; }
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(12,12,12,.9) 0%, rgba(12,12,12,.62) 40%, rgba(12,12,12,.14) 72%, rgba(12,12,12,0) 100%),
    linear-gradient(to top, rgba(12,12,12,.55), rgba(12,12,12,0) 42%);
}
.hero-inner{ position:relative; z-index:2; width:100%; color:#fff; padding-top:80px; padding-bottom:80px; }
.hero-eyebrow{ color:rgba(255,255,255,.72); margin-bottom:26px; }
.hero h1{ color:#fff; font-size:76px; line-height:0.98; letter-spacing:-0.03em; margin:0 0 24px; max-width:13ch; text-wrap:balance; font-weight:700; }
.hero-sub{ font-size:19px; line-height:1.6; color:rgba(255,255,255,.82); max-width:480px; margin:0 0 36px; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; }

/* Photo carousel — scroll-snap track with prev/next arrows */
.gallery{ position:relative; max-width:var(--wrap); margin:0 auto; padding:90px 76px 70px; }
.car-track{
  display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  scroll-behavior:smooth; scrollbar-width:none; -ms-overflow-style:none;
}
.car-track::-webkit-scrollbar{ display:none; }
.car-slide{
  flex:0 0 calc((100% - 40px) / 3); scroll-snap-align:start;
  position:relative; aspect-ratio:4/5; border-radius:var(--radius);
  overflow:hidden; background:var(--placeholder);
}
.car-slide .slot{ position:absolute; inset:0; }
/* Liquid-glass arrows */
.car-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); font-size:24px; line-height:1;
  background:rgba(255,255,255,0.25);
  -webkit-backdrop-filter:blur(6px) saturate(180%);
  backdrop-filter:blur(6px) saturate(180%);
  border:1px solid rgba(255,255,255,0.85);
  box-shadow:0 8px 32px rgba(31,38,135,0.22), inset 0 4px 20px rgba(255,255,255,0.35);
  transition:all .3s ease;
}
.car-arrow::after{
  content:""; position:absolute; inset:0; border-radius:50%; z-index:-1;
  opacity:.6; pointer-events:none;
  box-shadow:inset -10px -8px 0 -11px rgba(255,255,255,1), inset 0 -9px 0 -8px rgba(255,255,255,1);
  filter:blur(1px) drop-shadow(6px 3px 5px rgba(0,0,0,.35)) brightness(115%);
}
.car-arrow:hover{ background:rgba(255,255,255,0.42); transform:translateY(-50%) scale(1.06); }
.car-arrow:active{ transform:translateY(-50%) scale(.95); }
.car-prev{ left:8px; }
.car-next{ right:8px; }

/* Our story — photo + editorial text */
.story{
  max-width:var(--wrap); margin:0 auto; padding:80px 40px;
  display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;
}
.story-media{ position:relative; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; background:var(--placeholder); }
.story-media .slot{ position:absolute; inset:0; }
.story-body h2{ font-size:44px; font-weight:700; margin:0 0 20px; }
.story-body p{ font-size:18px; line-height:1.7; color:var(--muted-1); max-width:520px; margin:0 0 26px; }
.story-link{ font-weight:600; font-size:16px; border-bottom:2px solid var(--yellow); padding-bottom:2px; }
.story-link:hover{ color:var(--gold); }
.story-video{ max-width:var(--wrap); margin:0 auto; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/9; background:#111; }
.story-video video{ width:100%; height:100%; object-fit:cover; display:block; }
.story-prose{ max-width:760px; margin:0 auto; padding:20px 40px 40px; }
.story-prose p{ font-size:18px; line-height:1.8; color:var(--muted-1); margin:0 0 22px; }
.story-prose p:last-child{ margin-bottom:0; }

/* Instagram — editorial header + contained rounded grid */
.ig{ padding:80px 0 90px; }
.ig-head{
  display:flex; align-items:center; justify-content:flex-start;
  gap:22px; flex-wrap:wrap; margin-bottom:30px;
}
.ig-head h2{ font-size:40px; font-weight:700; letter-spacing:-0.02em; line-height:1.1; margin:0; text-wrap:balance; }
.material-symbols-outlined{
  font-family:'Material Symbols Outlined';
  font-weight:normal; font-style:normal; line-height:1;
  letter-spacing:normal; text-transform:none; display:inline-block;
  white-space:nowrap; word-wrap:normal; direction:ltr;
  -webkit-font-feature-settings:'liga'; -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}
.ig-arrow{ font-size:34px; color:var(--ink); }
.ig-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.ig-tile{ position:relative; aspect-ratio:1; border-radius:18px; overflow:hidden; background:var(--placeholder); display:block; }
.ig-media{ position:absolute; inset:0; }
.ig-media .slot{ position:absolute; inset:0; }
.ig-ov{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(17,17,17,.42); opacity:0; transition:opacity .3s ease;
}
.ig-tile:hover .ig-ov{ opacity:1; }
.ig-ov svg{ width:30px; height:30px; color:#fff; }

/* ============================================================
   MENU
   ============================================================ */
.menu-head{ max-width:1080px; margin:0 auto; padding:76px 40px 30px; }
.menu-head h1{ font-family:var(--display); font-weight:700; font-size:58px; letter-spacing:-0.03em; margin:12px 0 18px; }
.menu-head p{ font-size:18px; color:var(--muted-1); max-width:560px; line-height:1.6; margin:0; }
.menu-body{ max-width:1080px; margin:0 auto; padding:24px 40px 90px; display:flex; flex-direction:column; gap:64px; }
.menu-cat-head{ display:flex; align-items:baseline; gap:16px; border-bottom:2px solid var(--ink); padding-bottom:14px; margin-bottom:26px; }
.menu-cat-head h2{ font-family:var(--display); font-weight:700; font-size:30px; letter-spacing:-0.02em; margin:0; }
.menu-cat-head span{ font-size:14px; color:var(--muted-5); }
.menu-items{ display:grid; grid-template-columns:1fr 1fr; gap:14px 56px; }
.menu-item{ display:flex; justify-content:space-between; gap:16px; align-items:baseline; padding:6px 0; border-bottom:1px dotted var(--line-dot); }
.menu-item .name{ font-weight:600; font-size:16px; }
.menu-item .veg{ color:#2e9e4f; font-size:13px; }
.menu-item .desc{ font-size:13px; color:var(--muted-5); margin-top:2px; }
.menu-item .price{ font-family:var(--display); font-weight:600; font-size:16px; white-space:nowrap; }
.menu-item .azn{ color:var(--ink); margin-left:1px; position:relative; top:1.5px; }

/* ============================================================
   RENT
   ============================================================ */
.rent-hero{ padding:76px 40px 40px; display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.rent-hero h1{ font-family:var(--display); font-weight:700; font-size:56px; letter-spacing:-0.03em; line-height:1; margin:12px 0 18px; }
.rent-hero .lead{ font-size:18px; color:var(--muted-1); line-height:1.6; margin:0 0 28px; }
.perks{ display:flex; flex-direction:column; gap:12px; }
.perk{ display:flex; gap:14px; align-items:center; font-size:16px; }
.perk-mark{ width:7px; height:7px; background:var(--yellow); flex:none; }
.rent-media{ aspect-ratio:1; border-radius:24px; overflow:hidden; background:var(--placeholder); }
.spaces{ padding:30px 40px 20px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.space{ border:1px solid var(--line); border-radius:20px; overflow:hidden; }
.space .slot{ aspect-ratio:16/10; }
.space-body{ padding:24px; }
.space-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.space-name{ font-family:var(--display); font-weight:600; font-size:20px; }
.space-cap{ font-size:14px; color:var(--gold); font-weight:600; }
.space-body p{ font-size:14px; color:var(--muted-2); line-height:1.55; margin:0; }

/* Dark form panel (rent) */
.panel-dark{ background:var(--ink); border-radius:26px; padding:48px; display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; color:#fff; }
.panel-dark h2{ font-family:var(--display); font-weight:700; font-size:34px; letter-spacing:-0.02em; margin:0 0 14px; }
.panel-dark .lead{ color:var(--muted-6); font-size:16px; line-height:1.6; margin:0 0 24px; }
.panel-links{ display:flex; flex-direction:column; gap:12px; }
.panel-links a{ color:var(--yellow); font-size:15px; font-weight:600; }

/* ============================================================
   EVENTS
   ============================================================ */
.ev-head{ padding:76px 40px 40px; }
.ev-head-inner{ text-align:center; max-width:640px; margin:0 auto; }
.ev-head h1{ font-family:var(--display); font-weight:700; font-size:60px; letter-spacing:-0.03em; line-height:1; margin:12px 0 18px; text-wrap:balance; }
.ev-head p{ font-size:18px; color:var(--muted-1); line-height:1.6; margin:0; }
.ev-grid{ padding:20px 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.ev-card{ position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:4/5; background:var(--placeholder); }
.ev-card .slot{ position:absolute; inset:0; }
.ev-overlay{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,0.7), transparent 55%); pointer-events:none; }
.ev-text{ position:absolute; left:22px; right:22px; bottom:22px; color:#fff; pointer-events:none; }
.ev-text h3{ font-family:var(--display); font-weight:700; font-size:24px; margin:0 0 6px; }
.ev-text p{ font-size:14px; color:#e6e6e6; margin:0; line-height:1.5; }
.catering{ background:var(--yellow); border-radius:24px; padding:44px; display:flex; align-items:center; gap:28px; justify-content:space-between; flex-wrap:wrap; }
.catering .kicker{ font-family:var(--display); font-weight:700; font-size:15px; letter-spacing:0.1em; text-transform:uppercase; margin-bottom:10px; }
.catering h2{ font-family:var(--display); font-weight:700; font-size:32px; letter-spacing:-0.02em; margin:0 0 8px; }
.catering p{ margin:0; font-size:16px; color:#4a4200; }
.catering a{ background:var(--ink); color:#fff; font-weight:600; font-size:15px; padding:15px 28px; border-radius:999px; }
.catering a:hover{ color:#fff; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact{ padding:76px 40px 90px; display:grid; grid-template-columns:0.9fr 1.1fr; gap:56px; align-items:start; }
.contact h1{ font-family:var(--display); font-weight:700; font-size:54px; letter-spacing:-0.03em; line-height:1; margin:12px 0 30px; }
.contact-rows{ display:flex; flex-direction:column; gap:22px; margin-bottom:30px; }
.contact-label{ font-size:13px; color:var(--muted-5); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:5px; }
.contact-value{ font-size:18px; font-weight:500; }
.contact-socials{ display:flex; gap:12px; flex-wrap:wrap; }
.contact-map{ margin-top:26px; border-radius:18px; overflow:hidden; aspect-ratio:16/10; background:var(--placeholder); }
.contact-map iframe{ width:100%; height:100%; border:0; display:block; }

/* ---------- Terms of use ---------- */
.terms{ max-width:820px; margin:0 auto; padding:80px 40px 90px; }
.terms h1{ font-family:var(--display); font-weight:700; font-size:48px; letter-spacing:-0.03em; margin:0 0 8px; }
.terms-updated{ color:var(--muted-4); font-size:14px; margin:0 0 44px; }
.terms-sec{ margin-bottom:30px; }
.terms-sec h2{ font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-0.01em; margin:0 0 10px; }
.terms-sec p{ font-size:16px; line-height:1.75; color:var(--muted-1); margin:0; }

/* ---------- Forms ---------- */
.form{ display:flex; flex-direction:column; gap:14px; }
.form-row{ display:flex; gap:14px; }
.form input, .form select, .form textarea{
  border:1px solid var(--line); border-radius:12px; padding:15px 16px; font-size:15px;
  background:var(--card); color:var(--ink); width:100%;
}
.form textarea{ resize:vertical; }
.form-panel{ background:#efe8de; border-radius:24px; padding:40px; }
.form-panel h2{ font-family:var(--display); font-weight:700; font-size:30px; letter-spacing:-0.02em; margin:0 0 8px; }
.form-panel .lead{ color:var(--muted-2); font-size:15px; margin:0 0 24px; }
.form-card{ border:1px solid var(--line); border-radius:20px; padding:40px; }
.form-card h2{ font-family:var(--display); font-weight:700; font-size:28px; letter-spacing:-0.02em; margin:0 0 20px; }

/* Dark variant fields (inside panel-dark) */
.panel-dark .form input, .panel-dark .form select, .panel-dark .form textarea{
  background:#1c1c1c; border-color:#333; color:#fff;
}

/* Custom dropdown — styleable open list with a yellow highlight */
.cselect{ position:relative; width:100%; }
.cselect-trigger{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  border:1px solid var(--line); border-radius:12px; padding:15px 16px; font-size:15px;
  background:var(--card); color:var(--ink); cursor:pointer; text-align:left; font-family:inherit;
}
.cselect-caret{ width:18px; height:18px; flex:none; color:var(--muted-4); transition:transform .25s ease; }
.cselect.open .cselect-caret{ transform:rotate(180deg); }
.cselect-list{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:30;
  list-style:none; margin:0; padding:6px;
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 44px -14px rgba(0,0,0,.4);
  max-height:260px; overflow:auto;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.cselect.open .cselect-list{ opacity:1; visibility:visible; transform:none; }
.cselect-opt{
  padding:11px 12px; border-radius:9px; font-size:15px; color:var(--ink); cursor:pointer;
  transition:background .15s ease;
}
.cselect-opt:hover{ background:var(--yellow); }
.cselect-opt[aria-selected="true"]{ font-weight:600; }
/* dark form (rent) — trigger matches the dark inputs; list stays a light popup */
.panel-dark .cselect-trigger{ background:#1c1c1c; border-color:#333; color:#fff; }
.panel-dark .cselect-caret{ color:#888; }

/* Phone field — country selector + number */
.form-row > *{ flex:1 1 0; min-width:0; }   /* equal columns, incl. the phone field */
.phone{ position:relative; display:flex; gap:8px; width:100%; min-width:0; }
.phone-cc{
  display:inline-flex; align-items:center; gap:6px; flex:none; cursor:pointer;
  border:1px solid var(--line); border-radius:12px; padding:0 12px;
  background:var(--card); color:var(--ink); font-size:15px; white-space:nowrap;
}
.phone-flag{ font-size:12px; font-weight:700; letter-spacing:0.03em; color:var(--muted-4); line-height:1; }
.phone-cc .cselect-caret{ width:16px; height:16px; color:var(--muted-4); }
.phone-num{
  flex:1; min-width:0;
  border:1px solid var(--line); border-radius:12px; padding:15px 16px; font-size:15px;
  background:var(--card); color:var(--ink);
}
.phone-list{ min-width:250px; }
.phone-opt{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.phone-opt-dial{ color:var(--muted-4); }
.phone.open .cselect-list{ opacity:1; visibility:visible; transform:none; }
.panel-dark .phone-cc, .panel-dark .phone-num{ background:#1c1c1c; border-color:#333; color:#fff; }
.panel-dark .phone-cc .cselect-caret{ color:#888; }

/* Thank-you states */
.thanks{ text-align:center; padding:40px; }
.thanks-icon{
  width:56px; height:56px; border-radius:50%;
  background:var(--yellow); color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.thanks h3{ font-family:var(--display); font-weight:700; font-size:24px; margin:0 0 6px; }
.thanks p{ color:var(--muted-2); margin:0; }
.thanks.dark{ background:#1c1c1c; border:1px solid #333; border-radius:16px; }
.thanks.dark h3{ color:#fff; }
.thanks.dark p{ color:var(--muted-6); }
.thanks.boxed{ border:1px solid var(--line); border-radius:20px; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--ink); color:#fff; }
.footer .wrap{ padding:60px 40px 40px; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px; }
.footer-logo{ display:flex; align-items:baseline; gap:2px; font-family:var(--display); font-weight:700; font-size:30px; margin-bottom:16px; }
.footer-logo .w{ color:var(--yellow); transform:skewX(-8deg); display:inline-block; }
.footer-tagline{ color:var(--muted-5); font-size:15px; line-height:1.6; max-width:300px; margin:0; }
.footer-col-title{ font-size:13px; color:var(--muted-2); letter-spacing:0.1em; text-transform:uppercase; margin-bottom:16px; }
.footer-links{ display:grid; grid-auto-flow:column; grid-template-rows:repeat(4,auto); gap:10px 28px; justify-content:start; }
.footer-links a{ color:#ccc; font-size:15px; transition:color .2s ease; }
.footer-visit{ color:#ccc; font-size:15px; line-height:1.8; }
.footer-visit a{ color:#ccc; transition:color .2s ease; }
.footer-links a:hover, .footer-visit a:hover{ color:var(--yellow); }
/* Social buttons — plain hover: white button fills its brand colour, icon
   turns white. Simple background/colour swap, no clipping tricks. */
.footer-social{ display:flex; gap:14px; margin-top:24px; }
.soc{
  --c:#111;
  width:40px; height:40px; border-radius:28%;
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; box-shadow:0 5px 15px -5px rgba(0,0,0,.5);
  transition:background-color .25s ease;
}
.soc svg{ width:25px; height:25px; color:var(--c); transition:color .25s ease; }
.soc:hover, .soc:focus{ background:var(--c); }
.soc:hover svg, .soc:focus svg{ color:#fff; }

.soc-facebook{ --c:#1877F2; }
.soc-instagram{ --c:#E1306C; }
.soc-whatsapp{ --c:#25D366; }
.footer-bottom{
  border-top:1px solid #262626; padding:22px 40px; color:var(--muted-2); font-size:13px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px;
}
.fb-copy{ text-align:left; }
.fb-by{ text-align:center; }
.fb-by .neo{ color:#e8e8e8; font-weight:600; transition:color .2s ease; }
.fb-by .neo:hover{ color:var(--yellow); }
.fb-terms{ text-align:right; justify-self:end; color:var(--muted-2); transition:color .2s ease; }
.fb-terms:hover{ color:var(--yellow); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .wrap{ padding-left:24px; padding-right:24px; }
  .hero h1{ font-size:52px; }
  .hero-inner{ padding-top:56px; padding-bottom:56px; }
  .spaces, .ev-grid{ grid-template-columns:1fr 1fr; }
  .car-slide{ flex-basis:calc((100% - 20px) / 2); }
  .gallery{ padding:56px 24px; }
  .rent-hero, .panel-dark, .contact, .story{ grid-template-columns:1fr; }
  .story{ gap:36px; padding:56px 24px; }
  .story-body h2{ font-size:34px; }
  .rent-hero{ padding:48px 24px 24px; }
  .menu-items{ grid-template-columns:1fr; }
  .panel-dark{ padding:32px; }
}
/* Respect users who prefer less motion */
@media (prefers-reduced-motion:reduce){
  .nav a::before, .nav-label, .btn, .lang-slider::before{ transition:none !important; }
  .btn.is-loading{ animation:none !important; }
  .mnav, .burger, .burger-l{ transition:none !important; }
  /* links are hidden until the stagger animation runs — without motion they
     must be visible outright, or the panel would open empty */
  .mnav-links a{ opacity:1; transform:none; animation:none !important; }
}

@media (max-width:640px){
  .nav{ display:none; }
  .header .wrap{ height:64px; }
  .burger{ display:inline-flex; }
  .mnav{ display:flex; }
  /* the language switch lives in the panel on mobile, not in the header */
  .header-right .lang-switch{ display:none; }
  .hero{ min-height:auto; }
  .hero h1{ font-size:40px; }
  /* Keep both CTAs on one line and shrink them to fit. nowrap alone would
     overflow on narrow phones, so the pills may shrink; the labels themselves
     never break. Longest case is AZ ("Masa sifariş et" + "Menyuya bax"). */
  .hero-actions{ flex-wrap:nowrap; gap:10px; }
  .hero-actions .btn{
    padding:12px 16px; font-size:14px;
    white-space:nowrap; flex:0 1 auto; min-width:0;
  }
  .hero-scrim{ background:linear-gradient(to top, rgba(12,12,12,.92) 8%, rgba(12,12,12,.45) 55%, rgba(12,12,12,.25)); }
  .spaces, .ev-grid{ grid-template-columns:1fr; }
  .car-slide{ flex-basis:82%; }
  .car-arrow{ width:44px; height:44px; font-size:22px; }
  .ig-grid{ grid-template-columns:repeat(2,1fr); }
  .menu-head h1{ font-size:40px; }
  .rent-hero h1, .contact h1{ font-size:38px; }
  .ev-head h1{ font-size:42px; }
  .form-row{ flex-direction:column; }
  .footer .wrap{ grid-template-columns:1fr; gap:28px; }
  .footer-bottom{ grid-template-columns:1fr; gap:10px; text-align:center; }
  .fb-copy, .fb-by, .fb-terms{ text-align:center; justify-self:center; }
}