/* ============================================
   Liebedish — Kenyan catering, meal prep & events
   ============================================ */

:root{
  --charcoal: #111111;
  --cream: #f5f5f5;
  --terracotta: #b85c38;
  --terracotta-light: #cf7550;
  --terracotta-dark: #9c4626;
  --gold: #c89b3c;
  --radius: 18px;
  --font-display: "Instrument Serif", serif;
  --font-body: "Inter", sans-serif;
  --ease-smooth: cubic-bezier(.22,1,.36,1);
  --transition-theme: .3s ease;

  /* semantic tokens — light mode: high-end monochrome
     (white / #f4f4f4 / #a8a8a8 / #262626 / #111111) with gold #c89b3c
     and rust #b85c38 accents. Photography and typography carry the
     design; color stays purposeful. */
  --bg-page: #ffffff;
  --bg-page-alt: #f4f4f4;
  --bg-surface: #ffffff;
  --bg-surface-2: #f4f4f4;
  --text-primary: #111111;
  --text-secondary: #595959;
  --border-subtle: rgba(17,17,17,0.08);
  --border-subtle-2: #e4e4e4;
  --nav-bg: rgba(255,255,255,0.78);
  --nav-border: rgba(255,255,255,0.6);
  --note-bg: #f7efdd;
  --note-text: #6f5410;
  --toggle-track: #e6e6e6;
  --toggle-knob: #ffffff;
  --shadow-soft: 0 20px 45px -20px rgba(17,17,17,0.22);
  --shadow-card: 0 12px 28px -14px rgba(17,17,17,0.14);
  color-scheme: light;
}

/* dark mode: the premium-restaurant combination —
   #0b0b0b page, #161616 surfaces, #f5f5f5 text */
[data-theme="dark"]{
  --bg-page: #0b0b0b;
  --bg-page-alt: #0f0f0f;
  --bg-surface: #161616;
  --bg-surface-2: #1c1c1c;
  --text-primary: #f5f5f5;
  --text-secondary: #a8a8a8;
  --border-subtle: rgba(255,255,255,0.08);
  --border-subtle-2: rgba(255,255,255,0.12);
  --nav-bg: rgba(11,11,11,0.65);
  --nav-border: rgba(255,255,255,0.09);
  --note-bg: rgba(200,155,60,0.12);
  --note-text: #e6c67f;
  --toggle-track: #262626;
  --toggle-knob: #111111;
  --terracotta-dark: #d97b52;
  --shadow-soft: 0 20px 50px -18px rgba(0,0,0,0.75);
  --shadow-card: 0 12px 30px -14px rgba(0,0,0,0.65);
  color-scheme: dark;
}

*, *::before, *::after{
  box-sizing: border-box;
  /* One rule drives every theme-switch fade — components don't each declare
     their own background/border/color transition. */
  transition: background-color var(--transition-theme), border-color var(--transition-theme), color var(--transition-theme);
}
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
/* Instrument Serif ships in a single 400 weight — headings lean on size,
   not weight, for hierarchy. */
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:400; color: var(--text-primary); margin: 0 0 .5em; line-height:1.1; letter-spacing:.005em; }
p{ margin:0 0 1em; color: var(--text-secondary); line-height:1.7; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--terracotta); color:#fff;
  padding:.75rem 1.25rem; z-index:999; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.section-inner{
  max-width:1200px;
  margin:0 auto;
  padding: 5.5rem 2rem;
}
.eyebrow{
  font-family: var(--font-body);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.78rem;
  color: var(--terracotta);
  margin-bottom: .9rem;
}
.eyebrow.center, .center{ text-align:center; }
.section-lead{
  max-width:560px;
  margin: -0.5rem auto 3rem;
  font-size:1.05rem;
}
h2{ font-size: clamp(1.9rem, 3.4vw, 2.7rem); }

/* Bracket-style flourish heading */
.bracket-heading{
  position:relative;
  display:inline-block;
  padding: 0 1.9rem;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
}
.bracket-heading em{ color: var(--terracotta); font-style:italic; }
.bracket-heading::before, .bracket-heading::after{
  content:"";
  position:absolute; top:-10px;
  width:16px; height:26px;
  border-top:3px solid var(--terracotta);
}
.bracket-heading::before{ left:-2px; border-left:3px solid var(--terracotta); }
.bracket-heading::after{ right:-2px; border-right:3px solid var(--terracotta); }
.bracket-heading.light{ color:#fff; }
.bracket-heading.center{ display:block; width:fit-content; margin:0 auto .5em; }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem; justify-content:center;
  padding: .95rem 2.1rem .95rem 1.9rem;
  border-radius: 999px;
  font-weight:700;
  font-size:.95rem;
  border:2px solid transparent;
  transition: transform .18s var(--ease-smooth), box-shadow .18s var(--ease-smooth);
  cursor:pointer;
}
.btn-thumb{
  width:26px; height:26px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(255,255,255,0.8); flex-shrink:0;
}

/* Ribbon-cut primary button with an angled flag edge */
.btn-ribbon{
  background: linear-gradient(120deg, var(--terracotta-light), var(--terracotta) 60%, var(--terracotta-dark));
  color:#fff;
  border-radius: 999px 6px 6px 999px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  padding-right: 2.5rem;
  box-shadow: 0 10px 24px -10px rgba(184,92,56,0.55);
}
.btn-ribbon:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(184,92,56,0.65); }

.btn-outline-light{
  background: transparent;
  border-color: rgba(255,255,255,0.6);
  color:#fff;
  border-radius:999px;
}
.btn-outline-light:hover{ background: rgba(255,255,255,0.12); transform: translateY(-2px); }
.btn-block{ width:100%; border:none; justify-content:center; }

/* ============================================
   THEME TOGGLE
   ============================================ */
.theme-toggle{
  background:none; border:none; padding:0; cursor:pointer; flex-shrink:0;
  display:flex; align-items:center;
}
.theme-toggle-track{
  display:flex; align-items:center;
  width:52px; height:29px;
  border-radius:999px;
  background: var(--toggle-track);
  position:relative;
  padding:3px;
}
.theme-toggle-knob{
  width:23px; height:23px; border-radius:50%;
  background: var(--toggle-knob);
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transform: translateX(0);
  transition: transform .35s var(--ease-smooth);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
[data-theme="dark"] .theme-toggle-knob{ transform: translateX(23px); }
.theme-toggle-knob svg{
  width:14px; height:14px; position:absolute;
  transition: opacity .25s ease, transform .35s var(--ease-smooth);
}
.icon-sun{ color:#ff9100; opacity:1; transform: rotate(0deg); }
.icon-moon{ color:#8f8a80; opacity:0; transform: rotate(-90deg); }
[data-theme="dark"] .icon-sun{ opacity:0; transform: rotate(90deg); }
[data-theme="dark"] .icon-moon{ opacity:1; transform: rotate(0deg); color:#c9c2b6; }

/* ============================================
   NAVIGATION (frosted glass bar)
   ============================================ */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index:100;
  padding: 1.1rem 2rem 0;
}
.nav-bar{
  max-width:1180px;
  margin:0 auto;
  display:flex;
  align-items:center;
  gap: 1.5rem;
  height: 68px;
  padding: 0 .6rem 0 1.5rem;
  border-radius: 999px;
  background: var(--nav-bg);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--nav-border);
  box-shadow: 0 14px 34px -16px rgba(0,0,0,0.35);
}
.logo{
  font-family: var(--font-display);
  font-weight:400;
  font-size:1.45rem;
  color: var(--text-primary);
  letter-spacing:.01em;
  white-space:nowrap;
  flex-shrink:0;
}
.logo span{ color: var(--terracotta); font-style:italic; }

.nav-links{
  display:flex;
  align-items:center;
  gap: 1.8rem;
  margin: 0 auto;
}
.nav-links a{
  font-weight:700;
  font-size:.92rem;
  color: var(--text-primary);
  position:relative;
  padding:.3rem .1rem;
}
.nav-links a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-3px;
  height:2px; background: var(--terracotta);
  transform: scaleX(0); transform-origin:left;
  transition: transform .2s ease;
}
.nav-links a:hover{ color: var(--terracotta-dark); }
.nav-links a:hover::after{ transform: scaleX(1); }

.nav-cta{ flex-shrink:0; padding-top:.72rem; padding-bottom:.72rem; font-size:.88rem; }

/* Scrolled header state: nav condenses and its glass firms up */
.site-header.scrolled .nav-bar{
  height:58px;
  background: var(--bg-page);
  box-shadow: 0 10px 30px -14px rgba(0,0,0,0.4);
}

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background: var(--text-primary);
  flex-shrink:0;
  cursor:pointer;
}
.hamburger span{
  width:18px; height:2px; background:var(--bg-page); border-radius:2px;
  transition: transform .25s ease, opacity .25s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  display:none;
  flex-direction:column;
  background: var(--charcoal);
  border-radius:16px;
  margin: .6rem auto 0;
  max-width:1180px;
  overflow:hidden;
  max-height:0;
  transition: max-height .3s ease;
}
.mobile-menu.open{ max-height:400px; }
.mobile-menu a{
  color: var(--cream);
  padding: .95rem 1.6rem;
  font-weight:600;
  border-top:1px solid rgba(255,255,255,0.08);
}
.mobile-menu a.nav-cta{ color: var(--gold); }

@media (max-width: 880px){
  .nav-links{ display:none; }
  .nav-bar .nav-cta.btn{ display:none; }
  .nav-bar{ justify-content:space-between; padding-right: .6rem; }
  .hamburger{ display:flex; }
  .mobile-menu{ display:flex; }
}
@media (max-width: 560px){
  .site-header{ padding: .8rem 1rem 0; }
  .nav-bar{ padding: 0 .5rem 0 1.2rem; height:60px; }
  .logo{ font-size:1.1rem; }
}

/* ============================================
   HERO
   ============================================ */
.hero{
  position:relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  color:#fff;
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; object-position: center 30%; }

/* Rotating hero photography */
.hero-rotator img{
  position:absolute; inset:0; opacity:0;
  animation: heroFade 24s infinite;
}
.hero-rotator img:nth-child(1){ animation-delay: 0s; }
.hero-rotator img:nth-child(2){ animation-delay: 6s; }
.hero-rotator img:nth-child(3){ animation-delay: 12s; }
.hero-rotator img:nth-child(4){ animation-delay: 18s; }
/* The founder portraits are tall images; on a wide hero the cover-crop
   zooms in hard, so anchor near the top where their faces are. */
.hero-rotator img:nth-child(3),
.hero-rotator img:nth-child(4){ object-position: center top; }
@keyframes heroFade{
  0%{ opacity:0; }
  4%{ opacity:1; }
  21%{ opacity:1; }
  26%{ opacity:0; }
  100%{ opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .hero-rotator img{ animation:none; opacity:0; }
  .hero-rotator img:nth-child(1){ opacity:1; }
}

.hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(20,16,13,0.55) 0%, rgba(20,16,13,0.55) 100%),
    linear-gradient(100deg, rgba(15,12,10,0.92) 0%, rgba(15,12,10,0.55) 45%, rgba(15,12,10,0.25) 75%);
}
.hero-content{
  position:relative; z-index:1;
  max-width:1200px;
  margin:0 auto;
  padding: 9rem 2rem 6rem;
  width:100%;
}
.hero .eyebrow{ color: var(--gold); }
.hero h1{
  color:#fff;
  font-size: clamp(3rem, 7.5vw, 7rem);
  max-width: 16ch;
  margin-bottom:.35em;
}
.hero h1 .highlight{ color: var(--gold); font-style:italic; }
.hero-avatars{
  display:inline-flex;
  vertical-align:middle;
  margin: 0 .15em;
  transform: translateY(-.1em);
}
.hero-avatars img{
  width:.85em; height:.85em; border-radius:50%; object-fit:cover;
  border:3px solid var(--charcoal); margin-left:-.28em;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.hero-avatars img:first-child{ margin-left:0; }
.hero-sub{
  color: rgba(255,255,255,0.85);
  max-width:46ch;
  font-size:1.1rem;
}
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:1.6rem; align-items:center; }

.scroll-cue{
  position:absolute; bottom:2rem; left:50%; transform:translateX(-50%);
  width:28px; height:44px; border:2px solid rgba(255,255,255,0.6); border-radius:20px;
  z-index:1;
}
.scroll-cue span{
  position:absolute; top:8px; left:50%; transform:translateX(-50%);
  width:4px; height:8px; border-radius:2px; background:#fff;
  animation: cueMove 1.6s ease infinite;
}
@keyframes cueMove{
  0%{ opacity:1; top:8px; }
  70%{ opacity:0; top:22px; }
  100%{ opacity:0; top:8px; }
}

/* ============================================
   PROMO / TICKET STRIP
   ============================================ */
.promo-strip{ background: var(--bg-page); position:relative; z-index:2; margin-top:-1px; }
.promo-strip .section-inner{ padding: 0 2rem; transform: translateY(-3.5rem); }
.promo-card{
  background: var(--charcoal);
  border-radius: 28px;
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  align-items:center;
  overflow:visible;
  position:relative;
  box-shadow: var(--shadow-soft);
}
.promo-card::before, .promo-card::after{
  content:"";
  position:absolute; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%;
  background: var(--bg-page);
  z-index:2;
}
.promo-card::before{ top:0; }
.promo-card::after{ top:100%; }
.promo-left{ padding: 2.6rem 2.4rem; }
.promo-left h3{ color:#fff; font-size:1.5rem; margin-bottom:1rem; }
.promo-left p{ color: rgba(255,255,255,0.68); margin:0; font-size:.95rem; }
.promo-avatars{ display:flex; align-items:center; margin-bottom:1rem; }
.promo-avatars img{
  width:42px; height:42px; border-radius:50%; object-fit:cover;
  border:3px solid var(--charcoal); margin-left:-14px;
}
.promo-avatars img:first-child{ margin-left:0; }
.promo-avatar-more{
  width:42px; height:42px; border-radius:50%;
  background: var(--terracotta); color:#fff; font-weight:800; font-size:.82rem;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--charcoal); margin-left:-14px;
}
.promo-right{
  position:relative;
  height:100%;
  min-height:220px;
  display:flex; align-items:center; justify-content:flex-end;
  padding-right: 2.6rem;
  overflow:hidden;
  border-radius: 0 28px 28px 0;
}
.promo-stat{
  font-family: var(--font-display);
  color:#fff;
  font-size: clamp(2.8rem, 4.2vw, 3.8rem);
  font-weight:400;
  margin:0;
  position:relative; z-index:1;
}
.promo-stat span{ display:block; font-family: var(--font-body); font-size:1rem; font-weight:700; color: var(--gold); }
.promo-photo{
  position:absolute; right:-2rem; bottom:-1.5rem;
  width:230px; height:230px; object-fit:cover;
  border-radius:50%;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,0.6);
  border: 6px solid rgba(255,255,255,0.08);
}

/* ============================================
   ABOUT
   ============================================ */
.about{ padding-top: 2rem; }
.about-grid{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items:center;
}
.about-photos{
  position:relative;
  padding-bottom: 2rem;
  padding-right: 2rem;
}
.about-photo-main{
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  aspect-ratio: 4/3;
  object-fit:cover;
  width:100%;
}
.about-photo-sub{
  position:absolute;
  bottom:0; right:0;
  width: 48%;
  aspect-ratio: 3/4;
  object-fit:cover;
  object-position: top;
  border-radius: var(--radius);
  border: 6px solid var(--bg-page);
  box-shadow: var(--shadow-soft);
}
.about-points{ margin-top:1.6rem; display:flex; flex-direction:column; gap:.9rem; }
.about-points li{ padding-left:1.6rem; position:relative; color:var(--text-secondary); }
.about-points li::before{
  content:"";
  position:absolute; left:0; top:.4em;
  width:9px; height:9px; border-radius:50%;
  background: var(--gold);
}
.about-points strong{ color: var(--text-primary); }

/* ============================================
   SERVICES
   ============================================ */
.services{ background: var(--bg-page-alt); }
.service-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-top: 1rem;
}
.service-card{
  background: var(--bg-surface);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-card);
  display:flex; flex-direction:column;
  transition: transform .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
  border: 1px solid var(--border-subtle);
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }

/* Organic "blob" image frame */
.service-img{ aspect-ratio: 4/3; padding: 1.1rem 1.1rem 0; }
.blob-frame{ overflow:hidden; }
.blob-frame img{
  width:100%; height:100%; object-fit:cover; transition: transform .4s var(--ease-smooth);
  border-radius: 62% 38% 51% 49% / 45% 55% 45% 55%;
}
.blob-frame-alt img{ border-radius: 42% 58% 38% 62% / 55% 42% 58% 45%; }
.service-card:hover .service-img img{ transform: scale(1.05); }
.service-card h3{ font-size:1.15rem; margin: 1rem 1.3rem .4rem; }
.service-card p{ margin: 0 1.3rem 1rem; font-size:.93rem; flex:1; }
.card-link{
  margin: 0 1.3rem 1.3rem;
  font-weight:700;
  font-size:.88rem;
  color: var(--terracotta-dark);
}

/* ============================================
   FOUNDER SPOTLIGHT
   ============================================ */
.spotlight{ background: var(--bg-page); }
.spotlight-card{
  position:relative;
  border-radius: 32px;
  overflow:hidden;
  min-height: 460px;
  display:flex;
  align-items:center;
  box-shadow: var(--shadow-soft);
}
.spotlight-bg{ position:absolute; inset:0; z-index:0; }
.spotlight-bg img{
  width:100%; height:100%; object-fit:cover;
  filter: blur(14px) brightness(0.5) saturate(1.15);
  transform: scale(1.15);
}
.spotlight-photo{
  position:relative; z-index:1;
  width: 34%;
  max-width:320px;
  aspect-ratio: 3/4;
  object-fit:cover;
  object-position: top;
  border-radius: 24px;
  margin-left: 4%;
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.6);
  border: 4px solid rgba(255,255,255,0.25);
}
.spotlight-glass{
  position:relative; z-index:1;
  margin-left:auto;
  width: 52%;
  margin-right:4%;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 24px;
  padding: 2.2rem;
  color:#fff;
}
.spotlight-glass p{
  font-family: var(--font-display);
  font-style:italic;
  font-size:1.15rem;
  color:#fff;
  line-height:1.6;
}
.spotlight-names{ display:flex; align-items:center; gap:.9rem; margin: 1.2rem 0 1.4rem; }
.spotlight-avatars{ display:flex; }
.spotlight-avatars img{
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:2px solid #fff; margin-left:-12px;
}
.spotlight-avatars img:first-child{ margin-left:0; }
.spotlight-names strong{ display:block; font-size:.98rem; }
.spotlight-names span{ font-size:.82rem; color: rgba(255,255,255,0.7); }

/* ============================================
   MENU
   ============================================ */
.menu-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top:1rem;
}
.menu-category{
  background: var(--bg-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow:hidden;
  padding-top: 1.4rem;
  border: 1px solid var(--border-subtle);
}
.menu-cat-head{ position:relative; display:flex; align-items:center; gap:1rem; padding: 0 1.4rem 1rem; }
.menu-cat-blob{ width:64px; height:64px; flex-shrink:0; }
.menu-cat-blob img{
  width:100%; height:100%; object-fit:cover;
  border-radius: 62% 38% 51% 49% / 45% 55% 45% 55%;
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.35);
}
.menu-cat-head h3{ margin:0; font-size:1.1rem; }
.menu-list{ padding: 0 1.4rem 1.4rem; }
.menu-list li{
  display:flex; align-items:baseline; gap:.5rem;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--border-subtle);
  font-size:.94rem;
}
.menu-list li:last-child{ border-bottom:none; }
.menu-list li span{ color: var(--text-primary); font-weight:600; }
.menu-list li small{ color: var(--text-secondary); font-weight:400; }
.menu-list li i{ flex:1; border-bottom: 2px dotted var(--border-subtle); margin-bottom:.35em; }
.menu-list li b{ color: var(--terracotta-dark); white-space:nowrap; font-weight:800; }
.menu-list-plain{ padding-top:.4rem; }

.menu-plans{ margin-top:3.5rem; display:flex; flex-direction:column; gap:2.5rem; }
.plan-block h3{
  font-size:1.3rem; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap;
}
.plan-block h3 span{
  font-family: var(--font-body); font-weight:600; font-size:.85rem; color: var(--text-secondary);
}
.plan-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:1.2rem; }
.plan-card{
  background: var(--bg-surface); border-radius: var(--radius); padding: 1.8rem 1.6rem;
  box-shadow: var(--shadow-card); text-align:center; position:relative;
  border: 1px solid var(--border-subtle);
}

/* Featured plan card: frosted glass over a blurred food photo */
.plan-card-featured{
  border-color: transparent;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}
.plan-card-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter: blur(3px) brightness(0.42) saturate(1.2);
  transform: scale(1.1);
  z-index:-2;
}
.plan-card-featured::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(28,25,23,0.35);
  backdrop-filter: blur(2px);
  z-index:-1;
}
.plan-card-featured h4, .plan-card-featured .plan-price, .plan-card-featured .plan-price small, .plan-card-featured p{ color:#fff; }
.plan-tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background: var(--terracotta); color:#fff; font-size:.72rem; font-weight:700;
  padding:.3rem .8rem; border-radius:999px; letter-spacing:.03em; z-index:2;
}
.plan-card h4{ margin-bottom:.3rem; font-size:1.1rem; }
.plan-price{ font-family: var(--font-display); font-size:1.85rem; color: var(--terracotta-dark); font-weight:400; margin-bottom:.3rem; }
.plan-price small{ font-size:.9rem; color: var(--text-secondary); font-family: var(--font-body); }
.plan-note{ margin-top:1rem; font-size:.88rem; text-align:center; }
.menu-plans .menu-list{ background: var(--bg-surface); border-radius: var(--radius); box-shadow: var(--shadow-card); margin-top:1.2rem; padding:1.2rem 1.6rem; border: 1px solid var(--border-subtle); }

/* ============================================
   GALLERY
   ============================================ */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 190px;
  gap: 1rem;
  margin-top: 1rem;
}
.gallery-item{ border-radius: 14px; overflow:hidden; position:relative; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease-smooth); }
.gallery-item:hover img{ transform: scale(1.08); }
.gallery-item.tall{ grid-row: span 2; }
.gallery-item.wide{ grid-column: span 2; }

/* ============================================
   TESTIMONIALS
   ============================================ */
.testimonials{ background: var(--charcoal); color:#fff; border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.testimonial-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem; margin-top:2.5rem;
}
.testimonial-grid blockquote{
  margin:0; background: rgba(255,255,255,0.06); border-radius: var(--radius);
  padding: 1.8rem; border: 1px solid rgba(255,255,255,0.1);
}
.stars{ color: var(--gold); letter-spacing:.15em; margin-bottom:.8rem; font-size:.9rem; }
.testimonial-grid p{ color: rgba(255,255,255,0.88); font-family: var(--font-display); font-style:italic; font-size:1.05rem; }
.testimonial-grid cite{ font-style:normal; font-weight:700; color: var(--gold); font-size:.85rem; }

/* ============================================
   CONTACT
   ============================================ */
.contact-grid{
  display:grid; grid-template-columns: 0.9fr 1.1fr; gap:3.5rem; align-items:start;
}
.contact-details{ margin-top:2rem; display:flex; flex-direction:column; gap:1.2rem; }
.contact-line{ display:flex; flex-direction:column; font-weight:700; color:var(--text-primary); }
.contact-line span{ font-weight:600; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color: var(--terracotta); margin-bottom:.2rem; }
a.contact-line:hover{ color: var(--terracotta-dark); }

.contact-form{
  background: var(--bg-surface); border-radius: var(--radius); padding:2.2rem; box-shadow: var(--shadow-card);
  display:flex; flex-direction:column; gap:1.1rem;
  border: 1px solid var(--border-subtle);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.contact-form label{ display:flex; flex-direction:column; font-weight:700; font-size:.85rem; color: var(--text-primary); gap:.4rem; }
.contact-form input, .contact-form select, .contact-form textarea{
  font-family: var(--font-body); font-size:.95rem; padding:.75rem .9rem;
  border-radius:10px; border:1.5px solid var(--border-subtle-2); background: var(--bg-surface-2);
  color: var(--text-primary); font-weight:500;
  transition: border-color .2s ease;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:none; border-color: var(--terracotta);
}
.form-note{ font-size:.85rem; background: var(--note-bg); color: var(--note-text); padding:.8rem 1rem; border-radius:10px; }

/* ============================================
   FOOTER
   ============================================ */
.site-footer{ background: var(--charcoal); color: rgba(255,255,255,0.75); }
.footer-grid{ display:grid; grid-template-columns: 1.3fr 0.8fr 0.8fr 1.1fr; gap:2.5rem; padding-bottom:2.5rem; }
.footer-logo{ font-size:1.4rem; }
.footer-grid p{ color: rgba(255,255,255,0.6); margin-top:.8rem; max-width:32ch; }
.footer-social{ display:flex; gap:.6rem; margin-top:1.2rem; }
.footer-social a{
  width:36px; height:36px; border-radius:10px;
  background: rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:800; color: var(--gold);
  transition: background .2s ease;
}
.footer-social a:hover{ background: var(--terracotta); color:#fff; }
.footer-links{ display:flex; flex-direction:column; gap:.7rem; }
.footer-links h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.3rem; }
.footer-links a{ color: rgba(255,255,255,0.7); font-size:.92rem; }
.footer-links a:hover{ color: var(--gold); }
.footer-newsletter h4{ color:#fff; font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.3rem; }
.footer-newsletter p{ color: rgba(255,255,255,0.6); font-size:.88rem; margin-bottom:1rem; }
.newsletter-form{ display:flex; flex-direction:column; gap:.7rem; }
.newsletter-form input{
  font-family: var(--font-body); font-size:.9rem; padding:.75rem .9rem;
  border-radius:10px; border:1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06); color:#fff;
}
.newsletter-form input::placeholder{ color: rgba(255,255,255,0.4); }
.newsletter-form .btn{ align-self:flex-start; font-size:.85rem; padding:.75rem 1.8rem .75rem 1.5rem; }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1);
  text-align:center; padding: 1.4rem 2rem; font-size:.82rem;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 980px){
  .about-grid{ grid-template-columns:1fr; }
  .about-photos{ max-width:420px; margin:0 auto 1rem; }
  .service-grid{ grid-template-columns: repeat(2,1fr); }
  .menu-grid{ grid-template-columns:1fr; }
  .plan-grid{ grid-template-columns:1fr; }
  .testimonial-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .promo-card{ grid-template-columns:1fr; }
  .promo-right{ min-height:180px; border-radius:0 0 28px 28px; justify-content:center; padding: 2rem; }
  .promo-photo{ position:static; width:140px; height:140px; }
  .promo-stat{ display:none; }
  .spotlight-card{ flex-direction:column; padding: 2rem 1.5rem; min-height:0; }
  .spotlight-photo{ width:60%; margin: 0 auto 1.5rem; }
  .spotlight-glass{ width:100%; margin:0; }
}
@media (max-width: 640px){
  .section-inner{ padding: 4rem 1.25rem; }
  .service-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns: repeat(2,1fr); grid-auto-rows:150px; }
  .gallery-item.wide{ grid-column: span 2; }
  .form-row{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; text-align:center; }
  .footer-social{ justify-content:center; }
  .about-points li{ text-align:left; }
  .hero-content{ padding: 7.5rem 1.25rem 4rem; }
  .promo-strip .section-inner{ padding: 0 1.25rem; transform: translateY(-2rem); }
  .promo-left{ padding: 2rem 1.5rem; }
  .newsletter-form .btn{ align-self:stretch; justify-content:center; }
}