/* ============================================================
   The Mimosa House — catering.css
   Catering landing + per-location celebration pages.
   Extends site.css (tokens, nav, footer, buttons all inherited).
   ============================================================ */

/* ---------- White subway-tile hero ---------- */
.cat-hero {
  position: relative;
  padding: clamp(96px, 15vw, 190px) 0 clamp(84px, 12vw, 150px);
  text-align: center;
  /* Bright white subway tile — offset brick, pale grout */
  background-color: #e9e6dd;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='120' viewBox='0 0 240 120'><g fill='%23ffffff'><rect x='2' y='2' width='116' height='56'/><rect x='122' y='2' width='116' height='56'/><rect x='-58' y='62' width='116' height='56'/><rect x='62' y='62' width='116' height='56'/><rect x='182' y='62' width='116' height='56'/></g></svg>");
  background-size: 240px 120px;
  background-repeat: repeat;
  border-bottom: 1px solid rgba(0,0,0,0.07);
}
.cat-hero__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--mh-gutter);
  position: relative;
  z-index: 2;
}
.cat-hero__eyebrow {
  display: inline-block;
  font-family: var(--mh-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  font-size: clamp(10px, 1.1vw, 13px);
  color: var(--mh-ink-mute);
  margin-bottom: clamp(22px, 3vw, 34px);
}
.cat-hero__title {
  font-family: var(--mh-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.02;
  font-size: clamp(34px, 6.6vw, 104px);
  color: var(--mh-black);
  margin: 0;
}
.cat-hero__script {
  display: block;
  font-family: var(--mh-script);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 0.9;
  font-size: clamp(50px, 10vw, 150px);
  color: var(--mh-teal);
  margin-top: clamp(10px, 2vw, 26px);
}
.cat-hero__sub {
  font-family: var(--mh-italic), var(--mh-body);
  font-style: italic;
  font-size: clamp(16px, 2vw, 22px);
  color: var(--mh-ink-soft);
  margin: clamp(34px, 5vw, 56px) auto 0;
  max-width: 640px;
}

/* ---------- Location tile grid (4 × 3) ---------- */
.cat-grid-band {
  background: var(--mh-cream);
  padding: clamp(48px, 7vw, 88px) 0 clamp(64px, 9vw, 120px);
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.4vw, 20px);
  max-width: var(--mh-max);
  margin: 0 auto;
  padding: 0 var(--mh-gutter);
}
@media (max-width: 900px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cat-grid { grid-template-columns: 1fr; } }

.cat-tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1.5px solid var(--mh-black);
  background: var(--mh-black);
  text-decoration: none;
  isolation: isolate;
  cursor: pointer;
}
.cat-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 620ms cubic-bezier(.2,.7,.2,1), filter 620ms ease;
  z-index: 0;
}
/* Placeholder tiles (no photo yet) — branded subway panel */
.cat-tile__ph {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #101010;
  background-image:
    linear-gradient(135deg, rgba(193,230,223,0.10), rgba(0,0,0,0));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 620ms cubic-bezier(.2,.7,.2,1);
}
.cat-tile__ph span {
  font-family: var(--mh-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 11px;
  color: var(--mh-mint);
  border: 1px solid var(--mh-mint);
  padding: 8px 14px;
}
.cat-tile__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.30) 46%, rgba(0,0,0,0.82) 100%);
  transition: background 480ms ease;
}
.cat-tile__body {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(14px, 1.6vw, 22px);
  text-align: left;
}
.cat-tile__name {
  font-family: var(--mh-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.08;
  font-size: clamp(14px, 1.5vw, 19px);
  color: var(--mh-cream);
  transition: transform 480ms cubic-bezier(.2,.7,.2,1);
}
.cat-tile__reveal {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: max-height 520ms cubic-bezier(.2,.7,.2,1), opacity 420ms ease, transform 520ms cubic-bezier(.2,.7,.2,1);
}
.cat-tile__addr {
  font-family: var(--mh-body);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mh-mint);
  margin: 10px 0 0;
  letter-spacing: 0.02em;
}
.cat-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: var(--mh-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10.5px;
  color: var(--mh-cream);
}
.cat-tile__cta::after { content: "→"; }

/* Blow-up + reveal on hover / focus / touch-active */
.cat-tile:hover .cat-tile__img,
.cat-tile:focus-visible .cat-tile__img,
.cat-tile.is-open .cat-tile__img,
.cat-tile:hover .cat-tile__ph,
.cat-tile.is-open .cat-tile__ph { transform: scale(1.14); }
.cat-tile:hover .cat-tile__img,
.cat-tile.is-open .cat-tile__img { filter: saturate(1.05); }
.cat-tile:hover .cat-tile__scrim,
.cat-tile:focus-visible .cat-tile__scrim,
.cat-tile.is-open .cat-tile__scrim {
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 50%, rgba(0,0,0,0.9) 100%);
}
.cat-tile:hover .cat-tile__reveal,
.cat-tile:focus-visible .cat-tile__reveal,
.cat-tile.is-open .cat-tile__reveal {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
}
.cat-tile:hover .cat-tile__name,
.cat-tile.is-open .cat-tile__name { transform: translateY(-2px); }
.cat-tile__corner {
  position: absolute;
  top: 0; left: 0;
  z-index: 3;
  padding: 7px 12px;
  background: var(--mh-mint);
  color: var(--mh-black);
  font-family: var(--mh-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 9.5px;
  transform: translateY(-100%);
  transition: transform 420ms cubic-bezier(.2,.7,.2,1);
}
.cat-tile:hover .cat-tile__corner,
.cat-tile.is-open .cat-tile__corner { transform: translateY(0); }

/* ---------- Location page hero ---------- */
.cel-hero {
  position: relative;
  min-height: clamp(440px, 62vh, 620px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--mh-black);
}
.cel-hero__photo { position: absolute; inset: 0; z-index: 0; }
.cel-hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.cel-hero__ph {
  position: absolute; inset: 0; z-index: 0;
  background: #0e0e0e;
  background-image: radial-gradient(120% 90% at 70% 10%, rgba(193,230,223,0.14), rgba(0,0,0,0) 60%);
}
.cel-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.82) 100%);
}
.cel-hero__body { position: relative; z-index: 2; padding: clamp(40px,7vw,84px) 0; width: 100%; }
.cel-hero__eyebrow {
  font-family: var(--mh-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: clamp(10px, 1.1vw, 13px);
  color: var(--mh-mint);
}
.cel-hero__title {
  font-family: var(--mh-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.98;
  font-size: clamp(40px, 7vw, 92px);
  color: var(--mh-cream);
  margin: 14px 0 0;
}
.cel-hero__script {
  display: block;
  font-family: var(--mh-script);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: clamp(30px, 5vw, 62px);
  color: var(--mh-mint);
  margin-top: 2px;
}
.cel-hero__sub {
  font-family: var(--mh-italic), var(--mh-body);
  font-style: italic;
  font-size: clamp(15px, 1.9vw, 21px);
  color: rgba(255,251,239,0.92);
  margin: 20px 0 0;
  max-width: 560px;
}
.cel-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Intro / describe blurb ---------- */
.cel-intro { background: var(--mh-cream); padding: clamp(56px,8vw,104px) 0; }
.cel-intro__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 820px) { .cel-intro__grid { grid-template-columns: 1fr; } }
.cel-intro__body p { font-family: var(--mh-body); font-size: clamp(16px,1.4vw,18px); line-height: 1.75; color: var(--mh-ink-soft); margin: 0 0 18px; }
.cel-intro__body p:last-child { margin-bottom: 0; }

/* Celebration "what we do here" cards */
.cel-offers { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 40px; }
@media (max-width: 820px) { .cel-offers { grid-template-columns: 1fr; } }
.cel-offer {
  background: var(--mh-cream-warm);
  border: 1px solid var(--mh-rule);
  border-bottom: 2px solid var(--mh-black);
  padding: 24px 22px;
}
.cel-offer h3 {
  font-family: var(--mh-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 13px; color: var(--mh-black); margin: 0 0 8px;
}
.cel-offer p { font-family: var(--mh-body); font-size: 14.5px; line-height: 1.6; color: var(--mh-ink-mute); margin: 0; }

/* ---------- Inquiry form ---------- */
.cel-form-band { background: var(--mh-cream-warm); padding: clamp(56px,8vw,104px) 0; border-top: 1px solid var(--mh-rule); }
.cel-form-head { text-align: center; max-width: 620px; margin: 0 auto clamp(36px,5vw,56px); }
.cel-form-head .kicker {
  display:inline-block; font-family: var(--mh-display); font-weight:700; text-transform:uppercase;
  letter-spacing:0.2em; font-size:11px; color: var(--mh-teal); margin-bottom: 14px;
}
.cel-form-head h2 {
  font-family: var(--mh-body); font-weight:700; text-transform:uppercase; letter-spacing:0.06em;
  line-height:1.05; font-size: clamp(28px,4vw,46px); color: var(--mh-black); margin:0;
}
.cel-form-head .script-word { font-family: var(--mh-script); text-transform:none; font-style:italic; letter-spacing:0; color: var(--mh-teal); font-size:1.25em; }
.cel-form-head p { font-family: var(--mh-italic), var(--mh-body); font-style:italic; font-size:17px; color: var(--mh-ink-mute); margin: 16px 0 0; }

.cel-form {
  max-width: 860px;
  margin: 0 auto;
  background: var(--mh-cream);
  border: 1.5px solid var(--mh-black);
  padding: clamp(24px, 4vw, 48px);
}
.cel-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; }
@media (max-width: 640px) { .cel-form__grid { grid-template-columns: 1fr; } }
.cel-field { display: flex; flex-direction: column; }
.cel-field--full { grid-column: 1 / -1; }
.cel-field > label {
  font-family: var(--mh-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 11px; color: var(--mh-ink-soft); margin-bottom: 9px;
}
.cel-field > label .req { color: var(--mh-teal); }
.cel-field input[type="text"],
.cel-field input[type="email"],
.cel-field input[type="tel"],
.cel-field select,
.cel-field textarea {
  font-family: var(--mh-body); font-size: 16px; color: var(--mh-ink-soft);
  background: #fff; border: 1px solid var(--mh-rule); border-bottom: 1.5px solid var(--mh-black);
  padding: 13px 14px; width: 100%; -webkit-appearance: none; appearance: none; border-radius: 0;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.cel-field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.cel-field input:focus, .cel-field select:focus, .cel-field textarea:focus {
  outline: none; border-bottom-color: var(--mh-teal); box-shadow: 0 2px 0 0 var(--mh-mint);
}
.cel-field select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23000' stroke-width='1.6' fill='none'/></svg>");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}

/* Inline calendar */
.cal {
  border: 1px solid var(--mh-rule); border-bottom: 1.5px solid var(--mh-black);
  background: #fff; padding: 14px 14px 16px; user-select: none;
}
.cal__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal__month { font-family: var(--mh-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 13px; color: var(--mh-black); }
.cal__nav {
  border: 1px solid var(--mh-black); background: var(--mh-cream); width: 30px; height: 30px;
  font-family: var(--mh-display); font-size: 15px; line-height: 1; cursor: pointer; color: var(--mh-black);
  display: inline-flex; align-items: center; justify-content: center; transition: background 160ms ease;
}
.cal__nav:hover { background: var(--mh-mint); }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow { font-family: var(--mh-display); font-weight: 700; font-size: 10px; letter-spacing: 0.04em; color: var(--mh-ink-mute); text-align: center; padding: 4px 0; text-transform: uppercase; }
.cal__day {
  height: clamp(40px, 4.4vw, 50px); display: flex; align-items: center; justify-content: center;
  font-family: var(--mh-body); font-size: 13.5px; color: var(--mh-ink-soft); cursor: pointer;
  border: 1px solid transparent; transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.cal__day:hover:not(.is-empty):not(.is-past) { background: var(--mh-mint); }
.cal__day.is-empty { cursor: default; }
.cal__day.is-past { color: rgba(0,0,0,0.22); cursor: not-allowed; }
.cal__day.is-selected { background: var(--mh-black); color: var(--mh-mint); border-color: var(--mh-black); }
.cal__chosen { margin-top: 12px; font-family: var(--mh-body); font-size: 13.5px; color: var(--mh-ink-mute); }
.cal__chosen strong { color: var(--mh-black); font-weight: 700; }

/* People stepper + quick chips */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--mh-rule); border-bottom: 1.5px solid var(--mh-black); background: #fff; width: fit-content; }
.stepper button {
  width: 46px; border: 0; background: var(--mh-cream); font-family: var(--mh-display); font-size: 20px;
  color: var(--mh-black); cursor: pointer; transition: background 160ms ease;
}
.stepper button:hover { background: var(--mh-mint); }
.stepper input {
  width: 78px; text-align: center; border: 0 !important; border-left: 1px solid var(--mh-rule) !important;
  border-right: 1px solid var(--mh-rule) !important; font-family: var(--mh-display); font-weight: 700;
  font-size: 17px; box-shadow: none !important;
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.chip {
  font-family: var(--mh-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 11px; color: var(--mh-black); background: var(--mh-cream); border: 1px solid var(--mh-black);
  padding: 8px 13px; cursor: pointer; transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.chip:hover { background: var(--mh-mint); transform: translateY(-1px); }
.chip.is-on { background: var(--mh-black); color: var(--mh-mint); }

/* Budget dual slider */
.budget__vals { display: flex; justify-content: space-between; margin-bottom: 14px; }
.budget__val { font-family: var(--mh-display); font-weight: 700; color: var(--mh-black); }
.budget__val small { display: block; font-size: 10px; letter-spacing: 0.14em; color: var(--mh-ink-mute); text-transform: uppercase; margin-bottom: 2px; }
.budget__val b { font-size: 24px; letter-spacing: 0.02em; }
.budget__track { position: relative; height: 40px; }
.budget__rail { position: absolute; top: 18px; left: 0; right: 0; height: 4px; background: var(--mh-rule); }
.budget__fill { position: absolute; top: 18px; height: 4px; background: var(--mh-black); }
.budget__track input[type="range"] {
  position: absolute; top: 8px; left: 0; width: 100%; margin: 0; background: transparent;
  -webkit-appearance: none; appearance: none; pointer-events: none; height: 24px;
}
.budget__track input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--mh-mint); border: 2px solid var(--mh-black); cursor: grab; box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.budget__track input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 22px; height: 22px; border-radius: 50%; background: var(--mh-mint);
  border: 2px solid var(--mh-black); cursor: grab;
}
.budget__note { font-family: var(--mh-body); font-size: 12.5px; color: var(--mh-ink-mute); margin-top: 6px; font-style: italic; }

/* Vibe / amenity chip groups */
.cel-group__hint { font-family: var(--mh-body); font-size: 12.5px; color: var(--mh-ink-mute); margin: -2px 0 10px; font-style: italic; }

/* Submit */
.cel-form__submit { margin-top: 30px; text-align: center; }
.cel-form__submit .btn { font-size: 13px; padding: 16px 40px; }
.cel-form__fineprint { font-family: var(--mh-body); font-size: 12px; color: var(--mh-ink-mute); text-align: center; margin-top: 16px; }

/* ---------- Confirmation popup ---------- */
.cat-modal {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 24px;
  background: rgba(10,10,10,0.72); backdrop-filter: blur(4px);
}
.cat-modal.is-open { display: flex; animation: catFade 260ms ease; }
@keyframes catFade { from { opacity: 0; } to { opacity: 1; } }
.cat-modal__card {
  position: relative; background: var(--mh-cream); border: 1.5px solid var(--mh-black);
  max-width: 500px; width: 100%; padding: clamp(34px, 5vw, 54px) clamp(26px,4vw,44px);
  text-align: center; overflow: hidden; animation: catPop 380ms cubic-bezier(.2,.8,.2,1);
}
@keyframes catPop { from { transform: translateY(16px) scale(0.96); opacity: 0; } to { transform: none; opacity: 1; } }
.cat-modal__flute { font-size: 40px; line-height: 1; }
.cat-modal__title {
  font-family: var(--mh-body); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(24px, 3.6vw, 34px); color: var(--mh-black); margin: 16px 0 4px;
}
.cat-modal__script { font-family: var(--mh-script); font-style: italic; font-size: clamp(28px,4.6vw,42px); color: var(--mh-teal); line-height: 1.04; margin: 4px 0 16px; }
.cat-modal__text { font-family: var(--mh-body); font-size: 16px; line-height: 1.65; color: var(--mh-ink-soft); margin: 0 auto 26px; max-width: 380px; }
.cat-modal__close { font-size: 13px; }
.cat-modal__x {
  position: absolute; top: 12px; right: 14px; border: 0; background: transparent; cursor: pointer;
  font-family: var(--mh-display); font-size: 22px; line-height: 1; color: var(--mh-ink-mute);
}
.cat-modal__x:hover { color: var(--mh-black); }

/* Bubbles rising in the modal */
.cat-bubbles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0 !important; }
.cat-bubbles span {
  position: absolute; bottom: -18px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), var(--mh-mint));
  opacity: 0; animation: catRise linear infinite;
}
@keyframes catRise {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 0.85; }
  100% { transform: translateY(-540px) scale(1.05); opacity: 0; }
}
.cat-modal__card > *:not(.cat-bubbles):not(.cat-modal__x) { position: relative; z-index: 1; }
.cat-modal__x { z-index: 3; }

/* Back link on location pages */
.cel-back { background: var(--mh-cream); border-bottom: 1px solid var(--mh-rule); }
.cel-back a {
  display: inline-flex; align-items: center; gap: 9px; padding: 16px 0;
  font-family: var(--mh-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 11px; color: var(--mh-ink-mute); text-decoration: none; transition: color 180ms ease;
}
.cel-back a:hover { color: var(--mh-black); }