@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600;1,700&family=Josefin+Sans:ital,wght@0,400;0,500;0,600;0,700;1,600&display=swap');

/* Frugal Gourmet brand kit: Calgary-style editorial serif, Josefin Sans, and brand palette. */
:root {
  --ink: #2e2e2b;
  --ink-soft: #5b4638;
  --cream: #f8f6f1;
  --cream-deep: #e8e4dc;
  --taupe: #8fa68e;
  --accent: #5b4638;
  --accent-dark: #2f4b3d;
  --gold: #6e7f57;
  --white: #ffffff;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Josefin Sans", Arial, sans-serif;
}

body { letter-spacing: 0.01em; }
.hero .tagline { max-width: 20ch; text-wrap: balance; }
h1, h2, h3, h4, .brand-name, .testimonial blockquote, .feature-quote p { font-family: var(--font-display); }
.brand-sub, .eyebrow, .btn, .nav-links a, .stat .lbl, .testimonial .who, .site-footer h4 { font-family: var(--font-body); }
.site-header { background: rgba(248,246,241,.96); }
.site-header .brand {
  flex: 0 0 330px;
  width: 330px;
  height: 66px;
  min-width: 0;
  background: url("/brands/frugal-gourmet-catering/images/frugal-gourmet-logo-header.png") left center / contain no-repeat;
}
.site-header .brand > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.btn--primary { background: var(--accent); }
.btn--primary:hover { background: var(--accent-dark); }
.btn--outline { border-color: var(--accent); color: var(--accent); }
.btn--outline:hover { background: var(--accent); }
.rule, .why-card, .menu-card { border-color: var(--gold); }
.menu-card { border-left-color: var(--gold); }
.section--dark, .trust-bar, .site-footer { background: var(--ink); }
.site-footer .footer-brand {
  position: relative;
}
.site-footer .footer-brand::before,
.site-footer .footer-brand::after {
  content: "";
  display: block;
  width: min(100%, 370px);
  aspect-ratio: 2032 / 349;
}
.site-footer .footer-brand::before {
  margin-bottom: 1.1rem;
  background: var(--cream);
  -webkit-mask: url("/brands/frugal-gourmet-catering/images/frugal-gourmet-logo-header.png") center / contain no-repeat;
  mask: url("/brands/frugal-gourmet-catering/images/frugal-gourmet-logo-header.png") center / contain no-repeat;
}
.site-footer .footer-brand::after {
  position: absolute;
  top: 0;
  left: 0;
  background: url("/brands/frugal-gourmet-catering/images/frugal-gourmet-logo-header.png") center / contain no-repeat;
  clip-path: inset(54% 0 0 0);
}
.site-footer .footer-brand > .brand-name,
.site-footer .footer-brand > .brand-sub,
.site-footer .footer-brand > br {
  display: none;
}
.page-hero:after, .hero:after, .cta-band:after { background: linear-gradient(180deg, rgba(46,46,43,.58), rgba(47,75,61,.72)); }
.eyebrow, .nav-links a:hover, .nav-links a.active, a, .footer-bottom { color: var(--accent); }
.site-footer a, .section--dark .eyebrow, .site-footer .brand-sub { color: #b6c3ae; }
.social a:hover { background: var(--accent); }

/* The supplied “slopes” wordmark is represented with a warm handwritten accent. */
.hero .eyebrow, .page-hero .breadcrumb { font-family: "Caveat", cursive; font-size: 1.05rem; letter-spacing: .06em; text-transform: none; }

/* The Food & Services page uses the supplied full-service artwork at wide sizes,
   while retaining the same information as readable HTML on smaller screens. */
body:has(.page-hero) #menus + .section--dark {
  min-height: min(37.08vw, 700px);
  padding: 0;
  background: #eee5dc url("/brands/frugal-gourmet-catering/images/full-service-catering.png") center / 100% auto no-repeat;
}

body:has(.page-hero) #menus + .section--dark > .container {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (max-width: 900px) {
  body:has(.page-hero) #menus + .section--dark {
    min-height: 0;
    padding: 4rem 0;
    background: var(--ink);
  }

  body:has(.page-hero) #menus + .section--dark > .container {
    position: static;
    width: min(90%, 1180px);
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}

/* 2026 client-review additions */
.hero-slideshow { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero-slide { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.1s ease; }
.hero-slide--table { object-position:center 58%; }
.hero-slide.is-active { opacity:1; }
.hero-dots { display:flex; gap:.55rem; margin-top:2.2rem; }
.hero-dot { width:10px; height:10px; padding:0; border:1px solid rgba(255,255,255,.9); border-radius:50%; background:transparent; cursor:pointer; }
.hero-dot.is-active { background:#fff; }
.card-actions { margin-top:1.4rem; }
.menu-card--featured { grid-column:1/-1; border-left-width:6px; background:linear-gradient(120deg,#fff,#f1eee7); }
.menu-card--featured .new-label { display:inline-block; margin-bottom:.45rem; color:var(--accent-dark); font-size:.75rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.offer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.5rem; }
.offer-card { background:#fff; padding:2rem; border-top:3px solid var(--gold); box-shadow:var(--shadow); }
.offer-card h3 { margin-bottom:.8rem; }
.offer-card ul { margin:1rem 0 0 1.1rem; color:var(--ink-soft); }
.offer-card--spotlight { background:var(--accent-dark); color:#fff; transform:translateY(-10px); }
.offer-card--spotlight p,.offer-card--spotlight li { color:rgba(255,255,255,.85); }
.bar-service-band { padding:4.5rem 0; background:linear-gradient(120deg,var(--accent-dark),#284839); color:#fff; }
.bar-service-band__inner { display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.bar-service-band h2 { margin:.45rem 0 .8rem; color:#fff; }
.bar-service-band p { max-width:58ch; margin:0; color:rgba(255,255,255,.86); }
.bar-service-band .eyebrow { color:#dce7dc; }
.service-area-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:3rem; align-items:center; }
.service-map { position:relative; min-height:440px; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:radial-gradient(circle,#f8f6f1 0 25%,#e8e4dc 26% 48%,#d9dfd4 49% 69%,#b6c3ae 70% 100%); box-shadow:inset 0 0 0 1px rgba(46,46,43,.1); }
.service-map:before,.service-map:after { content:""; position:absolute; border:1px dashed rgba(47,75,61,.48); border-radius:50%; }
.service-map:before { width:55%; height:55%; }
.service-map:after { width:82%; height:82%; }
.map-center { position:relative; z-index:2; width:112px; height:112px; display:grid; place-items:center; padding:1rem; text-align:center; border-radius:50%; background:var(--accent-dark); color:#fff; font-weight:700; line-height:1.2; box-shadow:0 8px 25px rgba(47,75,61,.3); }
.map-pin { position:absolute; z-index:3; padding:.38rem .7rem; border-radius:999px; background:#fff; color:var(--ink); box-shadow:0 5px 18px rgba(46,46,43,.12); font-size:.78rem; font-weight:700; }
.pin-1{top:12%;left:43%}.pin-2{top:28%;right:8%}.pin-3{top:58%;right:5%}.pin-4{bottom:10%;left:40%}.pin-5{top:61%;left:5%}.pin-6{top:27%;left:7%}
.placeholder-note { margin-top:1rem; color:var(--taupe); font-size:.88rem; font-style:italic; }
.venue-showcase { position:relative; min-height:560px; overflow:hidden; color:#fff; display:flex; align-items:flex-end; }
.venue-slide { position:absolute; inset:0; opacity:0; transition:opacity .9s ease; background-size:cover; background-position:center; }
.venue-slide.is-active { opacity:1; }
.venue-showcase:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(46,46,43,.12),rgba(46,46,43,.78)); }
.venue-showcase-copy { position:relative; z-index:2; padding:4rem 6%; max-width:760px; }
.venue-showcase-copy p { max-width:58ch; color:rgba(255,255,255,.9); }
.venue-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin-bottom:2rem; }
.venue-tab { border:1px solid var(--accent); background:transparent; color:var(--accent); padding:.7rem 1.1rem; border-radius:999px; font:600 .85rem var(--font-body); cursor:pointer; }
.venue-tab[aria-selected="true"] { color:#fff; background:var(--accent); }
.venue-panel { display:none; }
.venue-panel.is-active { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.venue-card { display:flex; flex-direction:column; align-items:flex-start; background:#fff; box-shadow:0 15px 30px rgba(45,34,26,.09); padding:1.8rem 1.6rem 1.7rem; border-top:3px solid var(--accent); transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.venue-card:hover,.venue-card:focus-within { transform:translateY(-7px); border-top-color:var(--gold); box-shadow:0 24px 42px rgba(45,34,26,.16); }
.venue-card .eyebrow { display:block; margin-bottom:1.25rem; color:var(--accent); }
.venue-card h3 { margin:0 0 .28rem; color:var(--ink); font-family:var(--font-display); font-size:1.45rem; font-weight:500; line-height:1.2; }
.venue-visit { color:var(--accent); font-family:var(--font-body); font-size:.98rem; font-weight:500; letter-spacing:.045em; line-height:1.35; text-decoration:none; }
.venue-visit span { display:inline-block; transition:transform .24s ease; }
.venue-card:hover .venue-visit span,.venue-card:focus-within .venue-visit span { transform:translate(3px,-2px); }
.venue-visit:hover { color:var(--accent); text-decoration:underline; text-underline-offset:.2em; }
.membership-list a { color:inherit; text-decoration:none; }
.membership-list a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:.2em; }
.membership-list { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; padding:0; margin:2rem 0 0; list-style:none; }
.membership-list li { padding:1rem 1.15rem; background:#fff; border-left:3px solid var(--accent); box-shadow:var(--shadow); font-weight:600; }
.video-embed-placeholder { aspect-ratio:16/9; display:grid; place-items:center; padding:2rem; text-align:center; background:linear-gradient(135deg,var(--ink),var(--accent-dark)); color:#fff; }
.video-embed-placeholder p { max-width:50ch; color:rgba(255,255,255,.78); }
.story-pullquote { border-left:4px solid var(--gold); padding:1.2rem 0 1.2rem 1.5rem; font:italic 1.65rem var(--font-display); color:var(--accent-dark); }
.instagram-preview { display:grid; grid-template-columns:.7fr 1.3fr; gap:2rem; align-items:stretch; }
.instagram-profile { padding:2.3rem; background:var(--ink); color:#fff; }
.instagram-profile p { color:rgba(255,255,255,.78); }
.instagram-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; }
.instagram-tile { position:relative; min-height:230px; overflow:hidden; }
.instagram-tile img { width:100%; height:100%; object-fit:cover; transition:opacity .35s ease; }
.reel-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:2rem; }
.reel-card { position:relative; min-height:360px; display:flex; align-items:flex-end; overflow:hidden; color:#fff; background-size:cover; background-position:center; }
.reel-card:after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent,rgba(46,46,43,.82)); }
.reel-card span { position:relative; z-index:1; padding:1.3rem; font-weight:700; }
@media (max-width:900px) {
  .offer-grid,.service-area-layout,.venue-panel.is-active,.membership-list,.instagram-preview,.instagram-grid,.reel-strip { grid-template-columns:1fr; }
  .bar-service-band__inner { display:block; }
  .bar-service-band__inner .btn { margin-top:1.4rem; }
  .offer-card--spotlight { transform:none; }
  .service-map { min-height:350px; }
  .venue-showcase { min-height:500px; }
  .instagram-tile { min-height:300px; }
  .reel-card { min-height:300px; }
  .hero-slide--table { object-position:center center; }
}
@media (min-width:881px) and (max-width:1120px) {
  .site-header .brand { flex-basis:280px; width:280px; height:58px; }
  .nav-links { gap:.75rem; }
  .nav-links a { font-size:.8rem; }
}
@media (max-width:880px) {
  .site-header .brand {
    flex: 0 1 330px;
    width: min(72vw,330px);
    height: 60px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .hero-slide,.venue-slide,.instagram-tile img,.venue-card,.venue-visit span { transition:none; }
  .venue-card:hover,.venue-card:focus-within { transform:none; }
}
.team-photo--laurel {
  background: url("/brands/frugal-gourmet-catering/images/chef-laurel.png") center / cover no-repeat;
}

.team-photo--laurel::before {
  display: none;
}