:root{ --shadow: 0 10px 30px rgba(0,0,0,.08); --font-sub: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
.center{text-align:center}
.section{padding:clamp(2rem,5vw,4rem) 0}
.section .section-head{max-width:60ch; margin:0 auto 1.5rem; text-align:center}
.container{width:min(1160px,92vw); margin-inline:auto; padding-inline:1rem}
.tile-grid{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.tile{ position: relative; display:block; border-radius: 20px; overflow: hidden; aspect-ratio: 1 / 1; box-shadow: var(--shadow); transform: translateZ(0); }
.tile img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.tile img.obj-food{ object-position: 50% 70%; }
.tile-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(8,18,24,.10), rgba(8,18,24,.55)); }
.tile-text{ position:absolute; left:1rem; right:1rem; bottom:1rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35); }
.tile-text h3{ margin:0 0 .15rem } .tile-text p{ margin:0; font-family: var(--font-sub); opacity:.95 }
@media (max-width: 1024px){ .tile-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px){ .tile-grid{ grid-template-columns: 1fr; } }
/* Nudge thali focus lower */
.tile img.obj-food{object-position:50% 88%;}


/* === Full-bleed animated hero (tiny WebP bg) === */
.hero-animated{ position:relative; min-height:74vh; display:grid; place-items:center; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,18,24,.35), rgba(8,18,24,.55)); }
.hero-content{ position:relative; color:#fff; text-align:center; }
.hero-title{ font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.1; margin:0; max-width:26ch; margin-inline:auto }
.hero-sub{ opacity:.95; margin:.75rem 0 1rem }
.hero-actions{ display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap }
.btn{ display:inline-block; padding:.7rem 1rem; border-radius:999px; text-decoration:none; border:1px solid rgba(255,255,255,.5); color:#fff }
.btn-primary{ background:#214354; border-color:transparent }
.btn-ghost{ background:transparent }



/* === Full-bleed hero with background video === */
html, body { margin:0; padding:0; overflow-x:hidden; }
.full-bleed { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.hero-animated { position:relative; min-height:80vh; display:grid; place-items:center; overflow:hidden; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,18,24,.35), rgba(8,18,24,.55)); }
.hero-content { position:relative; z-index:1; text-align:center; color:#fff; }
.hero-title { font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.1; margin:0; max-width:26ch; margin-inline:auto }
.hero-sub { opacity:.95; margin:.75rem 0 1rem }
.hero-actions { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap }
.btn { display:inline-block; padding:.7rem 1rem; border-radius:999px; text-decoration:none; border:1px solid rgba(255,255,255,.5); color:#fff }
.btn-primary { background:#214354; border-color:transparent }
.btn-ghost { background:transparent }

/* Header baseline to avoid stacked nav if styles missing */
:root { --header-h: 64px; }
.site-header { position:fixed; top:0; left:0; right:0; height:var(--header-h); z-index:60; display:flex; align-items:center; background:transparent; }
.header-inner { display:flex; align-items:center; justify-content:space-between; width:min(1160px,92vw); margin-inline:auto; }
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:#fff; font-weight:700; letter-spacing:.06em; }
.brand img { height:40px; width:auto; display:block; }
.nav { display:flex; align-items:center; }
.nav-menu { list-style:none; display:flex; gap:1.25rem; margin:0; padding:0; }
.nav-menu a { color:#fff; text-decoration:none; font-weight:600; opacity:.92; }
.nav-menu a:hover { opacity:1; }
@media (max-width: 860px){
  .nav-menu { display:none; position:absolute; top:var(--header-h); right:4vw; background:rgba(8,18,24,.85); padding:1rem; border-radius:12px; flex-direction:column; backdrop-filter: blur(6px); }
  .nav[aria-expanded="true"] .nav-menu { display:flex; }
}



/* ===== Header / Navigation ===== */
:root{ --header-h: 72px; --brand: #ffffff; }
.site-header{ position: fixed; inset: 0 0 auto 0; height: var(--header-h); display: flex; align-items: center; z-index: 100; background: transparent; transition: background .25s ease; }
.site-header.scrolled{ background: rgba(8,18,24,.55); backdrop-filter: blur(6px); }
.header-inner{ width: min(1160px, 92vw); margin-inline: auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; }
.brand{ display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--brand); }
.brand img{ height: 36px; width: auto; display: block; }
.brand-text{ font-weight: 700; letter-spacing: .06em; font-size: 1.05rem; }
.nav{ justify-self: center; position: relative; }
.nav-toggle{ display: none; appearance: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(255,255,255,.45); background: transparent; color: #fff; align-items: center; justify-content: center; }
.sr-only{ position: absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); }
.nav-menu{ list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; align-items: center; }
.nav-menu a{ color: #fff; text-decoration: none; font-weight: 600; opacity: .92; }
.nav-menu a:hover{ opacity: 1; }
.btn{ display:inline-block; padding:.7rem 1rem; border-radius:999px; text-decoration:none; color:#fff; border:1px solid rgba(255,255,255,.5); }
.btn-cta{ background:#214354; border-color:transparent; }
.hero-animated{ padding-top: var(--header-h); }
/* ===== Mobile ===== */
@media (max-width: 860px){
  .header-inner{ grid-template-columns: auto auto auto; }
  .nav-toggle{ display: inline-flex; }
  .nav-menu{ position: absolute; top: calc(var(--header-h) - .25rem); right: 0; background: rgba(8,18,24,.92); padding: .9rem 1rem; border-radius: 14px; display: none; flex-direction: column; gap: .75rem; min-width: 220px; backdrop-filter: blur(6px); }
  .nav[data-open="true"] .nav-menu{ display: flex; }
  .btn-cta{ display:none; }
}

/* ===== Full-bleed hero with background video ===== */
html, body { margin:0; padding:0; overflow-x:hidden; }
.full-bleed { width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); }
.hero-animated { position:relative; min-height:80vh; display:grid; place-items:center; overflow:hidden; }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,18,24,.35), rgba(8,18,24,.55)); }
.hero-content { position:relative; z-index:1; text-align:center; color:#fff; }
.hero-title { font-size:clamp(1.8rem,3.4vw,3rem); line-height:1.1; margin:0; max-width:26ch; margin-inline:auto }
.hero-sub { opacity:.95; margin:.75rem 0 1rem }
.hero-actions { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap }
.btn-primary { background:#214354; border-color:transparent }
.btn-ghost { background:transparent }

/* ==== Our Story two-column layout ==== */
.story-section .container.split{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 3.5vw, 32px);
  align-items: center;
}
/* Two columns on wider screens */
@media (min-width: 900px){
  .story-section .container.split{
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}
/* Comfortable line lengths in the text column */
.story-section .content p{ max-width: 65ch; }
/* Media column: keep image from overwhelming text */
.story-section .media{
  justify-self: end;
  width: 100%;
  max-width: 520px; /* Hard cap so it never squashes text */
}
.story-section .media img{
  display:block;
  width:100%;
  height:auto;
  object-fit: contain;
  border-radius: 18px;
  box-shadow: var(--shadow);
}
.story-section .story-caption{
  text-align:center;
  font-size:.9rem;
  opacity:.8;
  margin-top:.35rem;
}
/* On small screens center the image below text */
@media (max-width: 899.98px){
  .story-section .media{ justify-self:center; max-width: 460px; }
}


/* === Bubble CTA (navbar pill look) === */
.bubble-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 22px;
  border-radius:999px;
  background:var(--brand-accent, #D6B7B5);
  color:var(--brand-navy, #3E5462);
  border:1.5px solid color-mix(in srgb, var(--brand-natural, #D4C6BC) 75%, transparent);
  box-shadow:0 3px 10px rgba(0,0,0,.08);
  text-decoration:none;
  font-weight:600;
  letter-spacing:.02em;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.bubble-cta:hover,
.bubble-cta:focus{
  transform:translateY(-1px);
  box-shadow:0 5px 16px rgba(0,0,0,.12);
}
.bubble-cta:active{
  transform:translateY(0);
  box-shadow:0 2px 8px rgba(0,0,0,.10);
}
@media (max-width:640px){
  .bubble-cta{ padding:10px 18px; font-size:15px; }
}