/* ==========================================================
   Below Deck — Design System Stylesheet
   Phase 1: Foundation — variables, resets, typography,
   utilities, layout, components
   ========================================================== */

/* ----------------------------------------------------------
   1. CSS Custom Properties
   ---------------------------------------------------------- */
:root {
  /* Core neutrals */
  --ink:            #14161b;
  --ink-2:          #2a2e38;
  --muted:          #5b6172;
  --line:           rgba(20,22,27,.10);
  --line-strong:    rgba(20,22,27,.18);
  --paper:          #ffffff;
  --paper-2:        #e8e4d9;   /* warm sand — alternate section bg */
  --paper-3:        #d9d0de;   /* lavender — testimonials/CTA bg */

  /* Brand */
  --navy:           #1a2740;
  --navy-hover:     #111b30;

  /* Accent warm tones */
  --warm-highlight: #ffe2c8;   /* hero h1 italic, hover bg */
  --warm-glow:      #ffd2a6;   /* meta chip dots */
  --warm-pulse:     #ff8c6b;   /* live badge dot */

  /* Serif italic accent */
  --purple-italic:  #3b2a4c;

  /* Typefaces */
  --serif:  "Playfair Display", "EB Garamond", Georgia, serif;
  --sans:   "Inter", -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --mono:   "SFMono-Regular", "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Layout */
  --max-w:          1280px;
  --container-w:    1168px;
}


.fill-image {
  display: block;
  overflow: hidden;
}

.fill-image img,
body.theme-belowdeck .ccm-block-content .fill-image img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  display: block;
}

/* ── Small mono uppercase labels ── */
.eyebrow,
span.eyebrow,
.int-eye            { font-size: 13px; letter-spacing: .32em; }
.breadcrumb-item,
.breadcrumb-item a  { font-size: 13px; letter-spacing: .18em; }
.value .lbl         { font-size: 13px; letter-spacing: .22em; }
.card .num          { font-size: 13px; letter-spacing: .22em; }
footer h5           { font-size: 13px; letter-spacing: .22em; }
.hero .caption      { font-size: 13px; letter-spacing: .32em; }
.meta-strip,
.meta-strip span    { font-size: 13px; letter-spacing: .28em; }
.m-section .eyebrow { font-size: 12px; letter-spacing: .28em; }


/* ----------------------------------------------------------
   2. Reset & Base
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p  { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; }

/* ----------------------------------------------------------
   3. Layout Utilities
   ---------------------------------------------------------- */
.container {
  max-width: var(--container-w);
  margin: 0 auto;
}

/* Standard sections */
.section {
  padding: 72px 56px;
  position: relative;
  overflow: hidden;
}
.section.lg { padding: 88px 56px; }

/* Warm sand section */
.section.gray {
  background: var(--paper-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='none' stroke='%23000' stroke-opacity='0.055' stroke-width='1'><circle cx='130' cy='130' r='28'/><circle cx='130' cy='130' r='18'/><circle cx='130' cy='130' r='8'/><path d='M130 90 C145 110, 145 150, 130 170 C115 150, 115 110, 130 90 Z'/><path d='M130 90 C145 110, 145 150, 130 170 C115 150, 115 110, 130 90 Z' transform='rotate(60 130 130)'/><path d='M130 90 C145 110, 145 150, 130 170 C115 150, 115 110, 130 90 Z' transform='rotate(120 130 130)'/><path d='M40 40 C48 50, 48 70, 40 80 C32 70, 32 50, 40 40 Z'/><path d='M40 40 C48 50, 48 70, 40 80 C32 70, 32 50, 40 40 Z' transform='rotate(90 40 60)'/><circle cx='40' cy='60' r='4'/><path d='M220 200 C228 210, 228 230, 220 240 C212 230, 212 210, 220 200 Z'/><path d='M220 200 C228 210, 228 230, 220 240 C212 230, 212 210, 220 200 Z' transform='rotate(90 220 220)'/><circle cx='220' cy='220' r='4'/></g></svg>");
  background-size: 340px 340px;
  background-position: center;
}
.section.gray::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, rgba(232,228,217,.4) 100%);
}

/* Lavender section */
.section.lav {
  background: var(--paper-3);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23000' stroke-opacity='0.06' stroke-width='1'><path d='M150 70 C170 100, 170 140, 150 170 C130 140, 130 100, 150 70 Z'/><path d='M150 70 C170 100, 170 140, 150 170 C130 140, 130 100, 150 70 Z' transform='rotate(72 150 120)'/><path d='M150 70 C170 100, 170 140, 150 170 C130 140, 130 100, 150 70 Z' transform='rotate(144 150 120)'/><path d='M150 70 C170 100, 170 140, 150 170 C130 140, 130 100, 150 70 Z' transform='rotate(216 150 120)'/><path d='M150 70 C170 100, 170 140, 150 170 C130 140, 130 100, 150 70 Z' transform='rotate(288 150 120)'/><circle cx='150' cy='120' r='10'/><circle cx='150' cy='120' r='4'/><path d='M150 175 Q152 220 150 270'/><path d='M150 220 Q135 215 125 205'/><path d='M150 235 Q165 232 175 222'/><path d='M60 240 C68 250, 68 265, 60 275 C52 265, 52 250, 60 240 Z'/><path d='M60 240 C68 250, 68 265, 60 275 C52 265, 52 250, 60 240 Z' transform='rotate(120 60 258)'/><path d='M60 240 C68 250, 68 265, 60 275 C52 265, 52 250, 60 240 Z' transform='rotate(240 60 258)'/><circle cx='60' cy='258' r='3'/><path d='M250 40 C258 50, 258 65, 250 75 C242 65, 242 50, 250 40 Z'/><path d='M250 40 C258 50, 258 65, 250 75 C242 65, 242 50, 250 40 Z' transform='rotate(120 250 58)'/><path d='M250 40 C258 50, 258 65, 250 75 C242 65, 242 50, 250 40 Z' transform='rotate(240 250 58)'/><circle cx='250' cy='58' r='3'/></g></svg>");
  background-size: 380px 380px;
  background-position: center;
}
.section.lav::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, rgba(217,208,222,.4) 100%);
}

/* Catering section */
.section.catering {
  background: #f2ede3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'><g fill='none' stroke='%232a2e38' stroke-opacity='0.05' stroke-width='1' stroke-linecap='round'><path d='M80 60 Q80 140 80 220'/><path d='M80 90 Q70 85 58 82'/><path d='M80 105 Q92 100 103 96'/><path d='M80 130 Q68 126 54 124'/><path d='M80 150 Q93 146 106 143'/><path d='M80 175 Q67 171 52 170'/><path d='M80 195 Q93 192 107 190'/><path d='M240 120 Q240 200 240 280'/><path d='M240 145 Q230 141 218 138'/><path d='M240 160 Q252 156 264 153'/><path d='M240 185 Q228 181 214 180'/><path d='M240 205 Q253 202 266 200'/><path d='M240 230 Q227 226 212 225'/><path d='M160 200 Q160 250 160 300'/><path d='M160 215 Q150 211 138 209'/><path d='M160 230 Q172 226 184 223'/><path d='M160 250 Q148 246 136 245'/></g></svg>");
  background-size: 400px 400px;
  background-position: center;
}
.section.catering::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, transparent 0%, rgba(242,237,227,.35) 100%);
}

/* stacking context fix: children above pseudo-element overlays */
.section.gray > *,
.section.lav > *,
.section.catering > * { position: relative; z-index: 1; }

/* ----------------------------------------------------------
   4. Scroll Fly-In Animations
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .fly {
    opacity: 0;
    transition: transform 1.1s cubic-bezier(.2,.7,.15,1),
                opacity    0.9s ease;
  }
  .fly.from-l { transform: translateX(-80px); }
  .fly.from-r { transform: translateX( 80px); }
  .fly.from-t { transform: translateY(-60px); }
  .fly.from-b { transform: translateY( 60px); }
  .fly.in { opacity: 1; transform: translate(0,0); }
}

@keyframes pulse {
  0%   { box-shadow: 0 0 0 0    rgba(255,140,107,.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255,140,107,0);  }
  100% { box-shadow: 0 0 0 0    rgba(255,140,107,0);  }
}

/* ----------------------------------------------------------
   5. Typography
   ---------------------------------------------------------- */
.eyebrow {
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--navy);
  opacity: .7;
}

h2.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: -.01em;
  margin: 10px 0 0;
  color: var(--ink);
  text-wrap: balance;
}
h2.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--purple-italic);
}

.lede {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 54ch;
}

/* ----------------------------------------------------------
   6. Buttons
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 26px;
  border-radius: 999px;
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
  transition: transform .2s ease,
              background .2s ease,
              color .2s ease,
              border-color .2s ease;
}
.btn .arr {
  display: inline-block;
  transition: transform .2s;
}
.btn:hover .arr { transform: translateX(3px); }

.btn.primary { background: #fff; color: var(--navy); }
.btn.primary:hover { background: var(--warm-highlight); }

.btn.ghost  { border: 1px solid rgba(255,255,255,.6); color: #fff; }
.btn.ghost:hover { background: rgba(255,255,255,.12); }

.btn.solid  { background: var(--navy); color: #fff; }
.btn.solid:hover { background: var(--navy-hover); }

.btn.outline { border: 1px solid var(--navy); color: var(--navy); }
.btn.outline:hover { background: var(--navy); color: #fff; }

/* ----------------------------------------------------------
   8. Navigation
   ---------------------------------------------------------- */
.nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 26px 56px;
  color: #fff;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand .mark {
  width: 38px; height: 38px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
}
.brand .name {
  font-family: var(--serif);
  font-size: 20px;
  letter-spacing: .02em;
}
.brand .name small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .32em;
  opacity: .75;
  margin-top: 2px;
  text-transform: uppercase;
}
.nav ul {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0; padding: 0;
  font-size: 14px;
  letter-spacing: .04em;
}
.nav ul a { opacity: .9; }
.nav ul a:hover { opacity: 1; }
.nav .inquire {
  border: 1px solid rgba(255,255,255,.55);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------
   9. Hero
   ---------------------------------------------------------- */
.hero {
  position: relative;
  height: 720px;
  overflow: hidden;
  color: #fff;
  background: #16102a;
}
.hero video.bg,
.hero img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(.75) saturate(1.05);
}
.hero .tint {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,3,12,.7) 0%, rgba(4,3,12,.45) 35%, rgba(4,3,12,.65) 65%, rgba(2,2,8,.96) 100%),
    linear-gradient( 90deg, rgba(4,3,12,.55) 0%, rgba(4,3,12,0)  45%);
}
.hero .grain {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  mix-blend-mode: overlay;
  z-index: 2;
  background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 3px 3px;
}
.hero .caption,
.hero .copy,
.hero .meta-strip,
.hero .dock { z-index: 3; }

/* Dock element */
.hero .dock {
  position: absolute;
  bottom: 4%; left: 50%;
  transform: translateX(-50%);
  width: 44%; height: 46px;
  background: linear-gradient(180deg, rgba(20,12,30,.85), rgba(10,8,20,.95));
  clip-path: polygon(8% 0, 92% 0, 100% 100%, 0 100%);
  box-shadow: 0 -8px 30px rgba(255,150,120,.2);
}
.hero .dock::before {
  content: "BELOW DECK  •  OKAUCHEE LAKE  •  WISCONSIN";
  position: absolute;
  left: 50%; top: -22px;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .32em;
  color: rgba(255,220,190,.55);
  white-space: nowrap;
}

/* Video badge */
.hero .video-badge {
  position: absolute;
  top: 120px; right: 56px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255,240,220,.85);
  padding: 8px 12px;
  border: 1px solid rgba(255,240,220,.3);
  border-radius: 999px;
  background: rgba(10,8,22,.35);
  backdrop-filter: blur(6px);
}
.hero .video-badge .rec {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--warm-pulse);
  animation: pulse 1.8s infinite;
}

/* Caption (top-left) */
.hero .caption {
  position: absolute;
  top: 120px; left: 56px;
  font-family: var(--mono);
  text-transform: uppercase;
  color: rgba(255,240,220,.85);
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero .caption .rule {
  width: 40px; height: 1px;
  background: rgba(255,240,220,.55);
}

/* Hero copy */
.hero .copy {
  position: absolute;
  left: 56px; right: 56px;
  bottom: 140px;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 56px;
  align-items: end;
}
.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  color: #fff;
  font-size: 84px;
  line-height: .98;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--warm-highlight);
}
.hero .sub {
  color: rgba(255,245,232,.92);
  max-width: 380px;
  font-size: 15.5px;
  line-height: 1.6;
  border-left: 1px solid rgba(255,240,220,.35);
  padding-left: 20px;
  margin-bottom: 8px;
}
.hero .ctas {
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

/* Meta strip */
.hero .meta-strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 56px;
  color: rgba(255,240,220,.85);
  font-family: var(--mono);
  text-transform: uppercase;
  border-top: 1px solid rgba(255,240,220,.18);
  background: linear-gradient(180deg, rgba(15,10,30,0), rgba(10,8,22,.55));
}
.meta-strip span { display: inline-flex; align-items: center; gap: 10px; }
.meta-strip .chip {
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--warm-glow);
}

/* ----------------------------------------------------------
   10. Value Strip
   ---------------------------------------------------------- */
.value {
  background: #fff;
  padding: 28px 56px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.value .item  { display: flex; align-items: center; gap: 16px; }
.value .icon  {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--navy);
  flex: 0 0 46px;
}
.value .lbl {
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.value .val {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--ink);
  letter-spacing: .005em;
}

/* ----------------------------------------------------------
   11. Welcome Section
   ---------------------------------------------------------- */
.welcome .grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 88px;
  align-items: center;
}
.welcome .txt p { margin: 22px 0 0; }
.welcome .sig {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.welcome .sig .name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
}
.welcome .sig .role {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.welcome .cta { margin-top: 36px; }
.welcome .img { aspect-ratio: 4/5; }

/* ----------------------------------------------------------
   12. Event Type Cards
   ---------------------------------------------------------- */
.events .head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 56px;
}
.events .head .link {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1px solid var(--navy);
  padding-bottom: 3px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 50px -30px rgba(12,14,22,.25);
}
.card .img { aspect-ratio: 4/5; }
.card .body { padding: 28px 28px 32px; }
.card .num {
  font-family: var(--mono);
  color: var(--muted);
}
.card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  margin: 10px 0 10px;
  letter-spacing: -.005em;
}
.card p {
  color: var(--muted);
  font-size: 14.5px;
  margin: 0 0 22px;
}
.card .more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
}
.card .more .arr { transition: transform .2s; }
.card:hover .more .arr { transform: translateX(4px); }

/* ----------------------------------------------------------
   13. Full-Bleed Photo
   ---------------------------------------------------------- */
.bleed {
  height: 560px;
  position: relative;
  overflow: hidden;
}

.bleed .overlay {
  position: absolute;
  left: 56px; bottom: 40px;
  color: #fff;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .28em;
  text-transform: uppercase;
  background: rgba(10,10,18,.45);
  padding: 10px 14px;
  backdrop-filter: blur(4px);
}

/* ----------------------------------------------------------
   14. Catering Section
   ---------------------------------------------------------- */
.catering .grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 96px;
  align-items: center;
}
.catering .img { aspect-ratio: 5/4; }
.catering ul {
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  border-top: 1px solid var(--line);
}
.catering ul li {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-size: 16px;
  color: var(--ink);
}
.catering ul li .no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--navy);
  opacity: .7;
  min-width: 28px;
}
.catering ul li .ttl {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
}
.catering ul li .dsc {
  display: block;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
}
.catering .cta { margin-top: 40px; }

/* ----------------------------------------------------------
   15. Gallery Grid
   ---------------------------------------------------------- */
.gallery .head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 48px;
}
.gallery .grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 130px;
  gap: 14px;
}
.gallery .g1 { grid-column: span 3; grid-row: span 2; }
.gallery .g2 { grid-column: span 3; grid-row: span 2; }
.gallery .g3 { grid-column: span 2; grid-row: span 2; }
.gallery .g4 { grid-column: span 2; grid-row: span 2; }
.gallery .g5 { grid-column: span 2; grid-row: span 2; }
.gallery .foot {
  display: flex;
  justify-content: center;
  margin-top: 48px;
}

/* ----------------------------------------------------------
   16. Testimonials + CTA Box
   ---------------------------------------------------------- */
.tcta .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 88px;
}
.tcta blockquote {
  margin: 0;
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.35;
  letter-spacing: -.005em;
  color: var(--ink);
  text-wrap: balance;
}
.tcta blockquote + blockquote {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
}
.tcta .who {
  margin-top: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.tcta .who .av {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #d9d6e1;
  flex: 0 0 36px;
}
.tcta .who .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.tcta .final {
  background: #fff;
  border: 1px solid var(--line);
  padding: 56px;
  border-radius: 4px;
  align-self: start;
}
.tcta .final h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.05;
  margin: 10px 0 16px;
  letter-spacing: -.01em;
}
.tcta .final h3 em {
  font-style: italic;
  color: var(--purple-italic);
}
.tcta .final p { color: var(--muted); margin: 0 0 28px; }
.tcta .final .row { display: flex; gap: 10px; }
.tcta .final .meta {
  display: flex;
  gap: 28px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------
   17. Footer
   ---------------------------------------------------------- */
footer {
  background: #fff;
  border-top: 1px solid var(--line);
  padding: 44px 56px 28px;
}
footer .fgrid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 60px;
}
footer .brand2 {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink);
}
footer .brand2 .mark {
  width: 36px; height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--navy);
}
footer .brand2 .name {
  font-family: var(--serif);
  font-size: 20px;
}
footer .brand2 .name small {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
footer p.addr {
  color: var(--muted);
  font-size: 14px;
  margin: 18px 0 0;
  max-width: 28ch;
}
footer h5 {
  font-family: var(--mono);
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  margin: 0 0 18px;
}
footer ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 12px;
  font-size: 14.5px;
  color: var(--ink-2);
}
footer ul a:hover { color: var(--navy); }
footer .bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 56px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ----------------------------------------------------------
   18. Mobile Navigation
   ---------------------------------------------------------- */
.m-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  color: #fff;
}
.m-nav .mark {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
}
.m-nav .menu {
  width: 34px; height: 34px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.m-nav .menu i {
  display: block;
  width: 14px; height: 1px;
  background: #fff;
  position: relative;
}
.m-nav .menu i::before,
.m-nav .menu i::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: #fff;
}
.m-nav .menu i::before { top: -4px; }
.m-nav .menu i::after  { top:  4px; }

/* ----------------------------------------------------------
   19. Mobile Hero
   ---------------------------------------------------------- */
.m-hero {
  position: relative;
  height: 720px;
  color: #fff;
  overflow: hidden;
  background: #16102a;
}
.m-hero video.bg,
.m-hero img.bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  filter: brightness(.75) saturate(1.05);
}
.m-hero .tint {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4,3,12,.7) 0%, rgba(4,3,12,.45) 35%, rgba(4,3,12,.65) 65%, rgba(2,2,8,.96) 100%),
    linear-gradient( 90deg, rgba(4,3,12,.55) 0%, rgba(4,3,12,0)  45%);
}
.m-hero .cap,
.m-hero .copy,
.m-hero .meta-strip,
.m-hero .m-nav { position: absolute; z-index: 3; }
.m-hero .tint   { z-index: 1; }
.m-hero .cap {
  position: absolute;
  top: 80px; left: 20px; right: 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,240,220,.85);
}
.m-hero .copy {
  position: absolute;
  left: 20px; right: 20px; bottom: 120px;
  z-index: 2;
}
.m-hero h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.02;
  margin: 0;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.m-hero h1 em {
  font-style: italic;
  color: var(--warm-highlight);
}
.m-hero .sub {
  margin: 18px 0 0;
  font-size: 14px;
  color: rgba(255,245,232,.9);
  border-left: 1px solid rgba(255,240,220,.35);
  padding-left: 14px;
}
.m-hero .ctas {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.m-hero .ctas .btn {
  width: 100%;
  justify-content: center;
}
.m-hero .meta-strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: space-between;
  padding: 14px 20px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,240,220,.85);
  border-top: 1px solid rgba(255,240,220,.18);
}

/* ----------------------------------------------------------
   20. Mobile Value Strip
   ---------------------------------------------------------- */
.m-value {
  padding: 30px 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 18px;
  border-bottom: 1px solid var(--line);
}
.m-value .item { display: flex; gap: 12px; align-items: center; }
.m-value .icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: grid;
  place-items: center;
  color: var(--navy);
  flex: 0 0 36px;
}
.m-value .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--muted);
  text-transform: uppercase;
}
.m-value .val {
  font-family: var(--serif);
  font-size: 16px;
}

/* ----------------------------------------------------------
   21. Mobile Sections
   ---------------------------------------------------------- */
.m-section {
  padding: 48px 20px;
  position: relative;
  overflow: hidden;
}
.m-section.gray {
  background: var(--paper-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='none' stroke='%23000' stroke-opacity='0.055' stroke-width='1'><circle cx='130' cy='130' r='28'/><circle cx='130' cy='130' r='18'/><circle cx='130' cy='130' r='8'/><path d='M130 90 C145 110, 145 150, 130 170 C115 150, 115 110, 130 90 Z'/><path d='M130 90 C145 110, 145 150, 130 170 C115 150, 115 110, 130 90 Z' transform='rotate(60 130 130)'/><path d='M130 90 C145 110, 145 150, 130 170 C115 150, 115 110, 130 90 Z' transform='rotate(120 130 130)'/><path d='M40 40 C48 50, 48 70, 40 80 C32 70, 32 50, 40 40 Z'/><path d='M40 40 C48 50, 48 70, 40 80 C32 70, 32 50, 40 40 Z' transform='rotate(90 40 60)'/><circle cx='40' cy='60' r='4'/></g></svg>");
  background-size: 240px 240px;
}
.m-section.lav {
  background: var(--paper-3);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><g fill='none' stroke='%23000' stroke-opacity='0.06' stroke-width='1'><path d='M150 70 C170 100, 170 140, 150 170 C130 140, 130 100, 150 70 Z'/><path d='M150 70 C170 100, 170 140, 150 170 C130 140, 130 100, 150 70 Z' transform='rotate(72 150 120)'/><path d='M150 70 C170 100, 170 140, 150 170 C130 140, 130 100, 150 70 Z' transform='rotate(144 150 120)'/><path d='M150 70 C170 100, 170 140, 150 170 C130 140, 130 100, 150 70 Z' transform='rotate(216 150 120)'/><path d='M150 70 C170 100, 170 140, 150 170 C130 140, 130 100, 150 70 Z' transform='rotate(288 150 120)'/><circle cx='150' cy='120' r='10'/><circle cx='150' cy='120' r='4'/></g></svg>");
  background-size: 270px 270px;
}
.m-section.m-catering {
  background: #f2ede3;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260'><g fill='none' stroke='%232a2e38' stroke-opacity='0.05' stroke-width='1' stroke-linecap='round'><path d='M80 60 Q80 140 80 220'/><path d='M80 90 Q70 85 58 82'/><path d='M80 105 Q92 100 103 96'/><path d='M80 130 Q68 126 54 124'/><path d='M80 150 Q93 146 106 143'/><path d='M80 175 Q67 171 52 170'/><path d='M80 195 Q93 192 107 190'/><path d='M200 140 Q200 200 200 260'/><path d='M200 160 Q190 156 180 153'/><path d='M200 175 Q210 172 220 169'/><path d='M200 195 Q189 192 178 190'/></g></svg>");
  background-size: 280px 280px;
}
.m-section.gray > *,
.m-section.lav > *,
.m-section.m-catering > * { position: relative; z-index: 1; }

.m-section h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.05;
  margin: 14px 0 0;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.m-section h2 em { font-style: italic; color: var(--purple-italic); }
.m-section p.lede { margin-top: 18px; font-size: 15px; color: var(--muted); }
.m-section .btn { width: 100%; justify-content: center; margin-top: 26px; }
.m-section .img { aspect-ratio: 4/5; margin-top: 32px; }

/* ----------------------------------------------------------
   22. Mobile Cards
   ---------------------------------------------------------- */
.m-cards { display: grid; gap: 18px; margin-top: 32px; }
.m-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.m-card .img { aspect-ratio: 4/3; margin: 0; }
.m-card .body { padding: 22px; }
.m-card h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 24px;
  margin: 6px 0 6px;
}
.m-card .num {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .2em;
  color: var(--muted);
}
.m-card p { color: var(--muted); font-size: 14px; margin: 0 0 16px; }
.m-card .more {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ----------------------------------------------------------
   23. Mobile Full Bleed
   ---------------------------------------------------------- */
.m-bleed { height: 420px; position: relative; }

.m-bleed .lbl {
  position: absolute;
  left: 20px; bottom: 20px;
  color: #fff;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  background: rgba(10,10,18,.45);
  padding: 8px 10px;
}

/* ----------------------------------------------------------
   24. Mobile Catering
   ---------------------------------------------------------- */
.m-catering ul {
  list-style: none;
  padding: 0; margin: 30px 0 0;
  border-top: 1px solid var(--line);
}
.m-catering li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  align-items: baseline;
}
.m-catering li .no {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--navy);
  opacity: .7;
  letter-spacing: .18em;
}
.m-catering li .ttl {
  font-family: var(--serif);
  font-size: 18px;
}
.m-catering li .dsc {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-top: 3px;
}

/* ----------------------------------------------------------
   25. Mobile Gallery
   ---------------------------------------------------------- */
.m-gal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 30px;
}
.m-gal .fill-image { aspect-ratio: 1/1; }
.m-gal .fill-image.wide {
  grid-column: span 2;
  aspect-ratio: 16/10;
}

/* ----------------------------------------------------------
   26. Mobile Testimonials / CTA
   ---------------------------------------------------------- */
.m-tcta blockquote {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  margin: 0;
  text-wrap: balance;
}
.m-tcta blockquote + blockquote {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.m-tcta .who {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.m-tcta .who .av {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #d9d6e1;
}
.m-tcta .who .n {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.m-tcta .final {
  margin-top: 40px;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
}
.m-tcta .final h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 30px;
  margin: 6px 0 10px;
  line-height: 1.08;
}
.m-tcta .final h3 em { font-style: italic; color: var(--purple-italic); }
.m-tcta .final p {
  color: var(--muted);
  font-size: 14px;
  margin: 0 0 18px;
}

/* ----------------------------------------------------------
   27. Mobile Footer
   ---------------------------------------------------------- */
.m-foot {
  padding: 40px 20px;
  border-top: 1px solid var(--line);
}
.m-foot .brand2 { display: flex; align-items: center; gap: 12px; }
.m-foot .brand2 .mark {
  width: 32px; height: 32px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--navy);
}
.m-foot .brand2 .name {
  font-family: var(--serif);
  font-size: 18px;
}
.m-foot .addr {
  color: var(--muted);
  font-size: 13.5px;
  margin: 14px 0 24px;
}
.m-foot h5 {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 10px;
}
.m-foot ul {
  list-style: none;
  padding: 0; margin: 0;
  display: grid;
  gap: 10px;
  font-size: 14px;
}
.m-foot .bot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
}


/* ═══════════════════════════════════════════════════════
   INTERIOR PAGES
════════════════════════════════════════════════════════ */

/* ── Interior hero (image bg, shorter than homepage) ── */
.hero.int-page {
  min-height: 460px;
  height: auto;
  background-size: cover;
  background-position: center top;
}

.int-hero-copy {
  position: absolute;
  bottom: 80px;
  left: 56px;
  right: 56px;
  max-width: 820px;
  z-index: 4;
}

.int-hero-copy h1 {
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 10px 0 0;
}

.int-hero-copy h1 em {
  font-style: italic;
  color: #ffe2c8;
}

.int-eye {
  color: rgba(255,255,255,.72) !important;
}

.int-eye::before {
  background: rgba(255,255,255,.45) !important;
}

/* ── Interior two-column grid layout ────────────────── */
/* Applies to all .int-grid divs on interior pages      */
.int-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

/* Form/iframe pages: wider right column */
.int-grid.grid-form {
  grid-template-columns: 1fr 1.5fr;
}



/* ── Feature list (bulleted) ────────────────────────── */
.feat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 32px;
}

.feat-list li {
  font-size: 15px;
  color: var(--ink-2);
  padding-left: 20px;
  position: relative;
  line-height: 1.55;
}

.feat-list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--navy);
  font-size: 12px;
  top: 2px;
}

/* ── Form/iframe wrapper ────────────────────────────── */
.form-wrap {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper);
}

.form-wrap iframe {
  width: 100%;
  border: none;
  display: block;
}

/* ── Catering menu list (numbered) ─────────────────── */
.cater-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cater-list li {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.cater-list .no {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .28em;
  color: var(--muted);
  text-transform: uppercase;
  padding-top: 2px;
  flex-shrink: 0;
  min-width: 22px;
}

.cater-list .ttl {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
}

.cater-list .dsc {
  display: block;
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Mobile breakpoints ─────────────────────────────── */
@media (max-width: 1024px) {
  .int-grid {
    gap: 48px;
  }
}

@media (max-width: 900px) {
  .int-hero-copy {
    bottom: 48px;
    left: 28px;
    right: 28px;
  }

  .int-hero-copy h1 {
    font-size: 48px;
  }

  .int-grid,
  .int-grid.grid-form {
    grid-template-columns: 1fr;
    gap: 40px;
  }

}

@media (max-width: 767px) {
  .hero.int-page {
    min-height: 360px;
  }

  .int-hero-copy {
    bottom: 36px;
    left: 20px;
    right: 20px;
  }

  .int-hero-copy h1 {
    font-size: 36px;
  }

  .feat-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ═══════════════════════════════════════════════════════
   GALLERY PAGE
════════════════════════════════════════════════════════ */

/* ── Section background ─────────────────────────────── */
.gal-section {
  background: var(--paper-2);
}

/* ── Filter buttons ─────────────────────────────────── */
.gal-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.gal-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--navy);
  background: transparent;
  border: 1px solid var(--navy);
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background .2s, color .2s;
}

.gal-btn:hover,
.gal-btn.active {
  background: var(--navy);
  color: #fff;
}

/* ── Masonry-style grid ─────────────────────────────── */
.gal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 300px;
  gap: 14px;
}

.gal-item {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  cursor: pointer;
  background: #1a1625;
}

.gal-item.gal-wide {
  grid-column: span 2;
}

.gal-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.gal-item:hover .gal-img {
  transform: scale(1.04);
}

/* ── Caption tag (bottom-left on hover) ─────────────── */
.gal-tag {
  position: absolute;
  left: 12px;
  bottom: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(20,22,27,.55);
  backdrop-filter: blur(4px);
  padding: 4px 10px;
  border-radius: 3px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}

.gal-item:hover .gal-tag {
  opacity: 1;
  transform: translateY(0);
}

/* ── Frame number (top-right) ───────────────────────── */
.gal-no {
  position: absolute;
  top: 10px;
  right: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.55);
  pointer-events: none;
}

/* ── Lightbox overlay ───────────────────────────────── */
.gal-lbx {
  position: fixed;
  inset: 0;
  background: rgba(8,6,18,.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

.gal-lbx.open {
  opacity: 1;
  pointer-events: all;
}

.gal-lbx-img {
  max-width: min(90vw, 1200px);
  max-height: 80vh;
  object-fit: contain;
  border-radius: 3px;
  display: block;
}

.gal-lbx-cap {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin: 0;
}

.gal-lbx-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  transition: color .15s;
}

.gal-lbx-close:hover {
  color: #fff;
}

/* ── Mobile breakpoints ─────────────────────────────── */
@media (max-width: 900px) {
  .gal-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 240px;
  }

  .gal-item.gal-wide {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .gal-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 260px;
    gap: 10px;
  }

  .gal-item.gal-wide {
    grid-column: span 1;
  }

  .gal-filters {
    gap: 8px;
    margin-bottom: 24px;
  }

  .gal-btn {
    padding: 8px 16px;
  }
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE FIXES — Layout & Mobile
   Appended patch: fixes value strip grid, hero copy,
   nav collapse, section padding, all desktop 2-col grids
════════════════════════════════════════════════════════ */


/* ── Fix 2: Hero copy — remove 2-col grid, use single column ───────────────
   Content block outputs h1+sub+ctas as ONE element, not two.           */
.hero .copy {
  display: block;
  max-width: 740px;
}

/* ── Fix 3: Section horizontal padding — add container guard ───────────────
   Prevent sections from being padded without .container max-width       */
.section > .container,
.section.lg > .container {
  padding: 0;
}

/* ═══════════════════════════════════════════════════════
   TABLET BREAKPOINT — 1024px
════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

  .section, .section.lg {
    padding: 64px 40px;
  }

  .hero .copy {
    left: 40px; right: 40px;
    bottom: 130px;
  }

  .hero h1 { font-size: 68px; }

  .hero .meta-strip { padding: 16px 40px; }
  .hero .caption    { left: 40px; }
  .hero .video-badge { right: 40px; }

  footer { padding: 44px 40px 28px; }
  footer .fgrid { gap: 40px; }

}

/* ═══════════════════════════════════════════════════════
   MOBILE BREAKPOINT — 900px
════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* Nav: hide links and CTA, shrink padding, just show brand */
  .nav {
    padding: 16px 20px;
  }
  .nav ul,
  .nav .inquire {
    display: none;
  }

  /* Hero */
  .hero {
    height: 620px;
  }
  .hero .copy {
    left: 20px; right: 20px;
    bottom: 110px;
    max-width: 100%;
  }
  .hero h1 {
    font-size: 52px;
  }
  .hero .caption,
  .hero .video-badge,
  .hero .dock {
    display: none;
  }
  .hero .meta-strip {
    padding: 14px 20px;
  }

  /* Value strip: 2×2 on tablet */
  .value {
    grid-template-columns: 1fr 1fr;
    padding: 24px 28px;
    gap: 24px 32px;
  }

  /* Section padding */
  .section, .section.lg {
    padding: 56px 28px;
  }

  /* Welcome */
  .welcome .grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .welcome .img {
    aspect-ratio: 16/9;
  }

  /* Event cards */
  .cards {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .card .img { aspect-ratio: 16/9; }

  /* Catering */
  .catering .grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .catering .img { aspect-ratio: 16/9; }
  .catering ul {
    grid-template-columns: 1fr;
  }

  /* Testimonials / CTA */
  .tcta .grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .tcta .final {
    padding: 40px;
  }

  /* Gallery mosaic: 3-col → 2-col */
  .gallery .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 110px;
  }
  .gallery .g1 { grid-column: span 2; grid-row: span 2; }
  .gallery .g2 { grid-column: span 2; grid-row: span 2; }
  .gallery .g3,
  .gallery .g4,
  .gallery .g5 { grid-column: span 2; grid-row: span 2; }

  /* Footer: 2-col */
  footer { padding: 44px 28px 24px; }
  footer .fgrid {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

}

/* ═══════════════════════════════════════════════════════
   MOBILE BREAKPOINT — 768px
════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Mobile nav: in-flow vertical stack above hero ── */
  #site-nav {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0 !important;
    background: var(--navy) !important;
    z-index: auto !important;
  }

  #site-nav .brand {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }

  /* Collapse CCMS wrapper divs so the ul is a direct flex child */
  #site-nav .ccm-global-area,
  #site-nav .ccm-block-area,
  #site-nav .ccm-area-block-container,
  #site-nav .ccm-block-content {
    display: contents;
  }

  #site-nav .site-nav-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 4px 0 8px !important;
    flex: none !important;
    justify-content: flex-start !important;
    width: 100% !important;
  }

  #site-nav .site-nav-item a {
    display: block !important;
    padding: 10px 20px !important;
    font-size: 15px !important;
    opacity: 1 !important;
    white-space: normal !important;
  }

  #site-nav .nav-end {
    display: none !important;
  }

  /* Hero */
  .hero {
    height: 580px;
  }
  .hero h1 {
    font-size: 44px;
    line-height: 1.04;
  }
  .hero .copy {
    bottom: 70px;
  }
  .hero .meta-strip {
    display: none;
  }
  .hero .sub {
    font-size: 14px;
  }
  .hero .ctas {
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
  }

  /* Value strip: 2×2 stays, smaller padding */
  .value {
    padding: 20px 20px;
    gap: 18px 20px;
  }
  .value .val  { font-size: 17px; }
  .value .icon { width: 36px; height: 36px; flex: 0 0 36px; }

  /* Section padding */
  .section, .section.lg {
    padding: 48px 20px;
  }

  /* Interior hero adjustments (supplement existing rules) */
  .hero.int-page {
    min-height: 320px;
  }

  /* Bleed photo */
  .bleed { height: 380px; }

  /* Testimonials */
  .tcta blockquote { font-size: 22px; }
  .tcta .final { padding: 28px; }
  .tcta .final h3 { font-size: 34px; }

  /* Footer: single column */
  footer { padding: 36px 20px 20px; }
  footer .fgrid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  footer .bot {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  /* Gallery mosaic collapse */
  .gallery .grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 130px;
  }
  .gallery .g1,
  .gallery .g2 { grid-column: span 2; grid-row: span 2; }
  .gallery .g3,
  .gallery .g4,
  .gallery .g5 { grid-column: span 1; grid-row: span 1; }

}

/* ═══════════════════════════════════════════════════════
   MOBILE BREAKPOINT — 480px
════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Value strip: single column */
  .value {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Events header: stack */
  .events .head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 32px;
  }

  /* Catering list: remove 2-col within list items */
  .catering ul {
    gap: 0;
  }

}

/* ── Interior page section padding on mobile ────────────────────────────── */
@media (max-width: 900px) {
  .section.gray,
  .section.lav {
    padding: 56px 28px;
  }
}
@media (max-width: 768px) {
  .section.gray,
  .section.lav {
    padding: 48px 20px;
  }
}

/* ═══════════════════════════════════════════════════════
   HERO COPY — Restore 2-column grid
   Hero is now split into two Areas: Hero Heading (left)
   and Hero Sub and CTA (right), matching the original design.
   This overrides the "Fix 2" block above.
════════════════════════════════════════════════════════ */

.hero .copy {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 56px;
  align-items: end;
  max-width: none;
}

/* Stack heading above sub/cta on mobile */
@media (max-width: 900px) {
  .hero .copy {
    display: block;
  }
  .hero .hero-sc {
    margin-top: 22px;
  }
}

/* Hide ConcreteCMS live-view button in admin/edit mode */
.ccm-live-view-button,
#ccm-live-view,
.ccm-toolbar-live-view {
  display: none !important;
}




/* ================================================================
   BREADCRUMB
   Template: concrete/blocks/autonav/templates/breadcrumb.php
   Renders: ol.breadcrumb > li and li.active (Bootstrap 3 markup)
================================================================ */
.breadcrumb {
  font-family: var(--mono);
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}
.breadcrumb li { display: inline; }
.breadcrumb li a { color: var(--navy); text-decoration: none; }
.breadcrumb li a:hover { text-decoration: underline; }
.breadcrumb li.active { color: var(--muted); }
.breadcrumb li + li::before {
  content: '›';
  padding: 0 8px;
  color: var(--muted);
}

/* ================================================================
   BREADCRUMB SEPARATOR + FONT SIZE FIXES
================================================================ */

.breadcrumb li + li::before {
  content: '›' !important;
  color: var(--muted);
  padding: 0 8px;
}


/* Catering menu tier labels (defined inline in content block at 11px — override here) */
.cmenu-tier-label { font-size: 14px !important; }
.cmenu-price      { font-size: 14px !important; }
.cmenu-policy h4  { font-size: 14px !important; }

/* ── Fix 2: remove any border/outline on content blocks in sections */
.section .ccm-block-content {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}


/* -- Site navigation ---------------------------------------------------- */
.nav .site-nav-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  justify-content: center;
}

.nav .site-nav-item { padding: 0; }

.nav .site-nav-item a {
  font-size: 14px;
  letter-spacing: .04em;
  color: #fff;
  opacity: .9;
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
}

.nav .site-nav-item a:hover,
.nav .site-nav-item.active a {
  opacity: 1;
  color: #fff;
}

/* -- Footer global area content blocks ---------------------------------- */
footer .ccm-block-content,
footer .ccm-block-content h5,
footer .ccm-block-content ul,
footer .ccm-block-content li,
footer .ccm-block-content a {
  color: var(--ink-2) !important;
}
footer .ccm-block-content h5 {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted) !important;
  margin-bottom: 18px;
}
footer .ccm-block-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer .ccm-block-content ul li {
  margin-bottom: 12px;
  font-size: 14.5px;
}
footer .ccm-block-content a:hover {
  color: var(--navy) !important;
}


/* =============================================================
   INTERIOR HERO — CSS custom-property desktop/mobile swap
   --hero-desktop and --hero-mobile are emitted as inline style
   on .hero.int-page from interior.php (thumbnail / thumbnail_mobile
   page attributes). Swap happens at 768px breakpoint, no JS.
   Deviation from Manassas pattern — documented in handoff.
   ============================================================= */
.hero.int-page {
  background-image: var(--hero-desktop, none);
  background-size: cover;
  background-position: center top;
}

@media (max-width: 768px) {
  .hero.int-page {
    background-image: var(--hero-mobile, var(--hero-desktop, none));
  }
}


/* =============================================================
   PHASE 3 — HOME / NAV TEMPLATES / BREADCRUMB
   ============================================================= */

/* Hero — video block background */
.hero .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.hero .hero-bg .ccm-block-area,
.hero .hero-bg .ccm-area-block-container,
.hero .hero-bg .ccm-block-content {
    height: 100%;
}
.hero .hero-bg .ccm-block-content video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hero — grain texture */
.hero .grain {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.04'/></svg>");
}

/* Value strip */
.value {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    padding: 36px 56px;
    border-bottom: 1px solid var(--line);
    background: #fff;
}
.value .item { display: flex; gap: 16px; align-items: center; }
.value .icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    display: grid;
    place-items: center;
    color: var(--navy);
    flex: 0 0 44px;
}
.value .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.value .val { font-family: var(--serif); font-size: 18px; margin-top: 2px; }

/* Section grids */
.welcome .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 88px;
    align-items: center;
}
.catering .grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 96px;
    align-items: center;
}
.tcta .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 88px;
}

/* Full bleed — image block */
.bleed-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.bleed-bg .ccm-block-area,
.bleed-bg .ccm-area-block-container,
.bleed-bg .ccm-block-content {
    height: 100%;
}
.bleed-bg .ccm-block-content img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-width: none;
}

/* Breadcrumb */
.breadcrumb-outer {
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
    background: #fff;
}
.breadcrumb-outer .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: var(--muted); }
.breadcrumb-item a { color: var(--muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--navy); }
.breadcrumb-item.active { color: var(--ink); }

/* Offcanvas nav list */
.offcanvas-nav-list { list-style: none; margin: 0; padding: 0; }
.offcanvas-nav-item a {
    display: block;
    padding: 14px 0;
    font-size: 18px;
    font-family: var(--serif);
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}
.offcanvas-nav-item a:hover,
.offcanvas-nav-item.active a { color: var(--navy); }

/* Footer nav list */
.footer-nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
.footer-nav-list a { color: inherit; text-decoration: none; }
.footer-nav-list a:hover { color: var(--navy); }

/* Gallery page */
.gallery-page { padding-top: 60px; }
.gallery-head { margin-bottom: 48px; }

/* Responsive breakdowns */
@media (max-width: 992px) {
    .welcome .grid,
    .catering .grid,
    .tcta .grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }
    .value { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 576px) {
    .value { padding: 24px 20px; }
}


/* =============================================================
   PHASE 5 — BLOCK TEMPLATE OVERRIDES
   ============================================================= */

/* fill-image: override Phase 2 rule + strip CCMS inner wrappers
   so images fill the aspect-ratio container absolutely.
   display:contents on .ccm-block-content / figure is intentional —
   it removes them from layout without removing them from the DOM,
   preserving CCMS edit-mode affordances on .ccm-block. */
.fill-image {
    position: relative;
    overflow: hidden;
}
.fill-image .ccm-block-content,
.fill-image .ccm-block-content figure {
    display: contents;
}
.fill-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* Event cards grid */
.events .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 44px;
}

/* Card component */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    transition: transform .3s, box-shadow .3s;
}
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px -8px rgba(14,18,32,.16);
}
.card .fill-image { aspect-ratio: 4/5; }
.card .body { padding: 28px 28px 32px; }
.card .num {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .22em;
    color: var(--muted);
    margin-bottom: 12px;
}
.card h3 {
    font-family: var(--serif);
    font-weight: 500;
    font-size: 30px;
    margin: 0 0 16px;
    letter-spacing: -.005em;
    line-height: 1.1;
}
.card p {
    color: var(--muted);
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 0 24px;
}
.card .more {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--navy);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.card .more .arr { display: inline-block; transition: transform .2s; }
.card .more:hover .arr { transform: translateX(3px); }

/* Gallery preview grid (homepage) */
.gallery-preview-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 130px;
    gap: 14px;
}
.gallery-preview-grid .g1 { grid-column: span 3; grid-row: span 2; }
.gallery-preview-grid .g2 { grid-column: span 3; grid-row: span 2; }
.gallery-preview-grid .g3 { grid-column: span 2; grid-row: span 2; }
.gallery-preview-grid .g4 { grid-column: span 2; grid-row: span 2; }
.gallery-preview-grid .g5 { grid-column: span 2; grid-row: span 2; }

/* Gallery full-page grid */
.gallery-full-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.gallery-full-grid .gallery-item {
    display: block;
    overflow: hidden;
    text-decoration: none;
}
.gallery-full-grid .fill-image {
    aspect-ratio: 4/3;
    transition: opacity .3s;
}
.gallery-full-grid .gallery-item:hover .fill-image img {
    transform: scale(1.04);
}
.gallery-full-grid .fill-image img { transition: transform .5s ease; }

/* Override simple_gallery package CSS that conflicts with our grid layout */
.ccm-page .gallery-full-grid.sg {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-left: 0;
    margin-right: 0;
}
.ccm-page .gallery-full-grid .gallery-item.sg-item {
    display: block;
    width: auto;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .events .cards { grid-template-columns: 1fr; }
    .gallery-preview-grid {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 110px;
    }
    .gallery-preview-grid .g1,
    .gallery-preview-grid .g2 { grid-column: span 2; }
    .gallery-preview-grid .g3,
    .gallery-preview-grid .g4,
    .gallery-preview-grid .g5 { grid-column: span 1; }
    .gallery-full-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Admin toolbar: offset absolutely-positioned nav below 48px toolbar ── */
html.ccm-toolbar-visible #site-nav,
html.ccm-toolbar-visible #navbarSideCollapse {
    top: 48px;
}

/* ── Make site offcanvas inert when CCMS panel is open or ready ── */
html.ccm-panel-open #navbarSideCollapse,
html.ccm-panel-ready #navbarSideCollapse {
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateX(100%) !important;
}

html.ccm-panel-open .offcanvas-backdrop,
html.ccm-panel-ready .offcanvas-backdrop {
    display: none !important;
    pointer-events: none !important;
}

/* ── Vendor directory ── */
.vendor-directory h2 {
    margin-top: 2.5rem;
}
.vendor-directory h2:first-child {
    margin-top: 0;
}
.vendor-directory a {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ── Interior page block spacing ── */
main > .container + .container {
    margin-top: 3rem;
}