.elementor-kit-15{--e-global-color-primary:#FCFCF7;--e-global-color-secondary:#7A4512;--e-global-color-text:#E7E7E7;--e-global-color-accent:#D9C0A0;--e-global-color-998a6eb:#FFFFFF00;--e-global-color-2edb900:#FDBC5B;--e-global-typography-primary-font-family:"Open Sans";--e-global-typography-primary-font-size:65px;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-text-transform:none;--e-global-typography-primary-font-style:normal;--e-global-typography-primary-text-decoration:none;--e-global-typography-primary-line-height:1.1em;--e-global-typography-primary-letter-spacing:0px;--e-global-typography-primary-word-spacing:0em;--e-global-typography-secondary-font-family:"DM Serif Display";--e-global-typography-secondary-font-size:38px;--e-global-typography-secondary-font-weight:400;--e-global-typography-secondary-text-transform:none;--e-global-typography-secondary-font-style:normal;--e-global-typography-secondary-text-decoration:none;--e-global-typography-secondary-line-height:1.1em;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-secondary-word-spacing:0em;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:28px;--e-global-typography-text-font-weight:400;--e-global-typography-text-text-transform:none;--e-global-typography-text-font-style:normal;--e-global-typography-text-text-decoration:none;--e-global-typography-text-line-height:1.5em;--e-global-typography-text-letter-spacing:0px;--e-global-typography-text-word-spacing:0em;--e-global-typography-accent-font-family:"DM Serif Display";--e-global-typography-accent-font-size:18px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-text-transform:none;--e-global-typography-accent-font-style:normal;--e-global-typography-accent-text-decoration:none;--e-global-typography-accent-line-height:1em;--e-global-typography-accent-letter-spacing:0px;--e-global-typography-accent-word-spacing:0em;--e-global-typography-4a70ac1-font-family:"DM Serif Display";--e-global-typography-4a70ac1-font-size:130px;--e-global-typography-4a70ac1-font-weight:400;--e-global-typography-4a70ac1-text-transform:none;--e-global-typography-4a70ac1-font-style:normal;--e-global-typography-4a70ac1-text-decoration:none;--e-global-typography-4a70ac1-line-height:1em;--e-global-typography-4a70ac1-letter-spacing:0px;--e-global-typography-4a70ac1-word-spacing:0em;--e-global-typography-3deed92-font-family:"Inter";--e-global-typography-3deed92-font-size:18px;--e-global-typography-3deed92-font-weight:400;--e-global-typography-3deed92-text-transform:none;--e-global-typography-3deed92-font-style:normal;--e-global-typography-3deed92-text-decoration:none;--e-global-typography-3deed92-line-height:1.5em;--e-global-typography-3deed92-letter-spacing:0px;--e-global-typography-3deed92-word-spacing:0em;--e-global-typography-8887382-font-family:"Inter";--e-global-typography-8887382-font-size:18px;--e-global-typography-8887382-font-weight:400;--e-global-typography-8887382-text-transform:none;--e-global-typography-8887382-font-style:normal;--e-global-typography-8887382-text-decoration:none;--e-global-typography-8887382-line-height:1em;--e-global-typography-8887382-letter-spacing:0px;--e-global-typography-8887382-word-spacing:0em;background-color:#FBF6EC;}.elementor-kit-15 e-page-transition{background-color:#FFBC7D;}.elementor-kit-15 a{color:var( --e-global-color-accent );}.elementor-kit-15 a:hover{color:var( --e-global-color-primary );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1230px;}.e-con{--container-max-width:1230px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-15{--e-global-typography-primary-font-size:46px;--e-global-typography-secondary-font-size:28px;--e-global-typography-text-font-size:18px;--e-global-typography-accent-font-size:16px;--e-global-typography-4a70ac1-font-size:75px;--e-global-typography-3deed92-font-size:14px;--e-global-typography-8887382-font-size:16px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-15{--e-global-typography-primary-font-size:36px;--e-global-typography-secondary-font-size:22px;--e-global-typography-text-font-size:16px;--e-global-typography-4a70ac1-font-size:45px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ==========================================================================
   BREAKING BREAD — SHARED STYLES (v3)
   Paste this entire file into Elementor > Site Settings > Custom CSS
   (or Appearance > Customize > Additional CSS). It must load site-wide.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,400;1,6..72,500&display=swap');

:root{
  /* Brand colors */
  --bb-brown: #b4741c;
  --bb-dough: #faf8d6;
  --ripe-red: #b4281c;
  --savory-spice: #b44e1c;
  --olive-oil: #b49a1c;
  --garden-green: #a8b41c;

  /* Site background */
  --bb-bg: #fbf6ec;          /* primary site background — used everywhere, including footer */
  --bb-bg-deep: #f2e9d6;     /* slightly deeper tan for the Grab a Seat band */

  /* Working tones */
  --brown-ink: #6b4713;
  --brown-line: rgba(180,116,28,0.5);

  /* Type */
  --font-display: 'Special Elite', 'Courier New', monospace;
  --font-body: 'Newsreader', Georgia, serif;

  /* Layout */
  --max-width: 1180px;
  --gutter: clamp(24px, 5vw, 64px);

  /* All primary photographs share this proportion (height ≈ 57% of width) */
  --photo-ratio: 100 / 57;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--bb-bg);
  color: var(--brown-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }

.bb-wrap{
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* Headline / display type — bold, larger */
h1, h2, h3, .bb-display{
  font-family: var(--font-display);
  color: var(--bb-brown);
  font-weight: 700;
  line-height: 1.18;
  margin: 0;
}
h1{ font-size: clamp(34px, 4vw, 46px); letter-spacing: 0.005em; }
h2{ font-size: clamp(26px, 2.6vw, 32px); }
h3{ font-size: 17px; letter-spacing: 0.02em; }

.bb-eyebrow{
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--savory-spice);
}

.bb-divider{
  border: none;
  border-top: 1.5px solid var(--brown-line);
  margin: 0;
}

/* Buttons — thicker borders throughout, to match the display type's weight */
/* Popup-trigger elements use real <button> tags (not <a>) since they don't
   navigate anywhere — this avoids browser quirks tied to anchor/href
   semantics (including the stray scroll-position jump some browsers do
   when returning focus to a clicked link after a modal closes). */
.js-popup-start-a-table,
.js-popup-guest-list,
.js-popup-partner-with-us{
  font: inherit;
  background: none;
  appearance: none;
  -webkit-appearance: none;
}
.bb-footer button.js-popup-start-a-table,
.bb-footer button.js-popup-guest-list,
.bb-footer button.js-popup-partner-with-us{
  border: none; padding: 0; text-align: left; color: var(--brown-ink) !important; opacity: 0.85;
}
.bb-footer button.js-popup-start-a-table:hover,
.bb-footer button.js-popup-guest-list:hover,
.bb-footer button.js-popup-partner-with-us:hover{ opacity: 1 !important; color: var(--bb-brown) !important; }

.bb-btn{
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 13px 28px;
  border-radius: 3px;
  border: 2.5px solid var(--bb-brown);
  cursor: pointer;
  transition: all 0.15s ease;
}
.bb-btn--solid{ background: var(--bb-brown); color: var(--bb-bg); }
.bb-btn--solid:hover{ background: #96600f; border-color: #96600f; }
.bb-btn--outline{ background: transparent; color: var(--bb-brown); }
.bb-btn--outline:hover{ background: rgba(180,116,28,0.08); }
.bb-link-arrow{
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bb-brown);
  border-bottom: 2px solid var(--bb-brown); padding-bottom: 3px;
}
.bb-link-arrow:hover{ opacity: 1 !important; color: #96600f !important; border-color: #96600f !important; }

/* Primary photographs — consistent proportion, no distortion */
.bb-photo-frame{
  aspect-ratio: var(--photo-ratio);
  overflow: hidden;
  border-radius: 3px;
}
.bb-photo-frame img{
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* Controls which part of the photo stays visible when the fixed aspect
     ratio crops it. Default is centered. To nudge a specific photo's crop
     up or down (e.g. if faces/hands are being cut off top or bottom), add
     an inline style to that <img> tag: style="--img-pos: center 30%;"
     — lower % shifts the visible window UP (crops more from the bottom),
     higher % shifts it DOWN (crops more from the top). */
  object-position: var(--img-pos, center);
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.bb-header{ background: var(--bb-bg) !important; border-bottom: 1.5px solid var(--brown-line); }
.bb-header__inner{
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px; padding-bottom: 22px;
}
.bb-logo{ display: flex; align-items: center; gap: 12px; }
.bb-logo__mark{
  width: 44px; height: 44px; display: block; object-fit: contain;
  background: none !important; background-color: transparent !important;
  border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
}
.bb-logo__word{ font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--bb-brown); }

.bb-nav{ display: flex; gap: 36px; list-style: none; margin: 0; padding: 0; }
.bb-nav a{
  position: relative;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--brown-ink);
  padding-bottom: 10px;
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.bb-nav a:hover{ color: var(--bb-brown) !important; }
.bb-nav a.is-active{ color: var(--bb-brown); }

/* Hand-painted brush-stroke underline — the ONLY underline on nav links.
   If a double line still appears on the live site, it means Elementor's
   Nav Menu widget has its own built-in "Hover Animation" / underline style
   turned on in its Style tab — turn that off there, since this CSS already
   supplies the single brush-stroke underline. */
.bb-nav a::after{
  content: '';
  position: absolute; left: -6%; right: -6%; bottom: -3px; height: 13px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 20'%3E%3Cpath fill='%23b4741c' d='M6.0,12.44 L25.25,14.0 L26.38,15.5 L39.06,14.31 L61.88,14.12 L74.75,16.44 L91.19,14.94 L113.38,12.81 L149.88,13.56 L162.25,15.62 L173.94,15.25 L174.5,17.0 L211.56,12.0 L206.81,10.5 L193.38,10.06 L148.94,10.56 L152.25,8.62 L85.81,9.06 L30.88,10.25 L36.25,10.25 Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 100% 100%;
  opacity: 0; transform: scaleX(0.82); transform-origin: left center;
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
}
.bb-nav a:hover::after, .bb-nav a.is-active::after{ opacity: 1; transform: scaleX(1); }

/* ==========================================================================
   HOME PAGE LAYOUT
   ========================================================================== */
main{ overflow: hidden; }
.bb-section{ padding-top: 52px; padding-bottom: 52px; }

/* Hero */
.bb-hero{ padding-top: 44px; padding-bottom: 44px; }
.bb-hero__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.bb-hero h1{ margin-bottom: 22px; }
.bb-hero__eyebrow{ display: block; margin-bottom: 14px; }
.bb-hero p{ font-size: 17px; max-width: 46ch; margin: 0 0 18px; }
.bb-hero__ctas{ display: flex; gap: 14px; flex-wrap: wrap; }

/* Why Break Bread */
.bb-why__grid{ display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.bb-why h2{ margin-bottom: 14px; }
.bb-why__intro{ font-weight: 700; font-size: 18px; color: var(--brown-ink); margin: 0 0 14px; }
.bb-why p{ margin: 0 0 20px; max-width: 52ch; }
.bb-why__aside{ font-style: italic; color: var(--ripe-red); font-size: 16px; margin: 0; }

/* Recognition strip — its own section now (no longer nested inside a
   width-constrained wrapper), so it sits in a plain bb-wrap like every
   other section. Bordered box with the heading sitting on the top border
   line; real logo images (150px wide) side by side. */
.bb-recognition-section{ padding-top: 0; }
.bb-recognition{
  position: relative;
  border: 1.5px solid var(--brown-line); border-radius: 4px;
  padding: 30px 24px 24px;
}
.bb-recognition__label{
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--bb-bg); padding: 0 16px; white-space: nowrap;
  font-family: var(--font-body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--savory-spice);
}
.bb-recognition__row{
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 20px 28px;
}
.bb-recognition__row img{ width: 150px; height: auto; max-height: 80px; object-fit: contain; flex: none; }

/* Proof cards — Rollins / UCF / Phoenix, 3 columns on desktop.
   Eyebrow + heading sit above the photo. */
.bb-proof__grid{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 36px; align-items: start; margin-top: 36px; }
.bb-proof-card{ display: flex; flex-direction: column; }
.bb-proof-card:nth-of-type(1){ grid-column: 1; grid-row: 1; }
.bb-proof-card:nth-of-type(2){ grid-column: 2; grid-row: 1; }
.bb-proof-card:nth-of-type(3){ grid-column: 3; grid-row: 1; }
.bb-proof-card__eyebrow{ display: block; margin-bottom: 6px; }
.bb-proof-card h3{ font-size: 18px; margin-bottom: 14px; min-height: 46px; }
.bb-proof-card__photo{ margin-bottom: 16px; }
.bb-proof-card__stat{ font-size: 19px; color: var(--ripe-red); font-weight: 700; font-family: var(--font-display); display: block; margin-bottom: 6px; }
.bb-proof-card p{ font-size: 15px; margin: 0 0 16px; }
.bb-proof-card__cta-box{
  background: var(--bb-bg-deep); border-radius: 4px; padding: 16px 18px; text-align: center; margin-bottom: 16px;
}
.bb-proof-card__cta-box .bb-eyebrow{ display: block; margin-bottom: 2px; }
.bb-proof-card__cta-box strong{ display: block; font-family: var(--font-display); color: var(--bb-brown); font-size: 15px; margin-bottom: 12px; }
/* On desktop, pin this under the UCF column (2) so it reads as attached to
   that card. On tablet/mobile the grid collapses to one column, and this
   placement is explicitly cleared (see media query below) so it falls back
   to normal DOM order — after the Phoenix card, not sandwiched between
   UCF and Phoenix. */
.bb-proof-card__cta-box--floating{ grid-column: 2; grid-row: 2; max-width: 280px; margin: 0 auto; }

/* Meet Joseph banner — plain link, no button */
.bb-joseph{
  margin-top: 36px; border: 2px solid var(--brown-line); border-radius: 6px;
  padding: 30px 40px; text-align: center;
}
.bb-joseph p{ font-size: 16px; max-width: 62ch; margin: 0 auto 16px; }

/* Grab a Seat — shaded band, wide rectangular cards, all content centered */
.bb-seat{ background: var(--bb-bg-deep); text-align: center; }
.bb-seat h2{ margin-bottom: 10px; }
.bb-seat__lede{ font-size: 16px; font-weight: 600; max-width: 62ch; margin: 0 auto 40px; color: var(--brown-ink); }
.bb-seat__grid{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 28px; text-align: center; }
.bb-seat-card{
  border: 3px solid var(--card-color, var(--bb-brown)); border-radius: 6px;
  padding: 34px 30px; display: flex; flex-direction: column; align-items: center; background: var(--bb-bg);
}
.bb-seat-card__head{ display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 14px; }
.bb-seat-card svg{ width: 58px; height: 58px; flex: none; }
.bb-seat-card__icon{ width: 170px; height: 170px; object-fit: contain; flex: none; display: block; }
.bb-seat-card h3{ font-size: 17px; color: var(--card-color, var(--bb-brown)); margin: 0; }
.bb-seat-card p{ font-size: 15px; margin: 0 0 8px; }
.bb-seat-card__for{ font-size: 13px; font-style: italic; color: var(--brown-ink); opacity: 0.75; margin: 0 0 22px; }
.bb-seat-card .bb-btn{
  margin-top: auto;
  background: var(--card-color, var(--bb-brown)); border-color: var(--card-color, var(--bb-brown)); color: var(--bb-bg);
}
.bb-seat-card .bb-btn:hover{ filter: brightness(0.9); }

@media (max-width: 900px){
  .bb-hero__grid, .bb-why__grid{ grid-template-columns: 1fr; }
  .bb-hero__photo{ order: -1; }
  .bb-proof__grid, .bb-seat__grid{ grid-template-columns: 1fr; }
  .bb-proof-card:nth-of-type(1),
  .bb-proof-card:nth-of-type(2),
  .bb-proof-card:nth-of-type(3),
  .bb-proof-card__cta-box--floating{ grid-column: 1; grid-row: auto; max-width: none; margin: 0 0 16px; }
  .bb-nav{ gap: 20px; }
  .bb-section{ padding-top: 56px; padding-bottom: 56px; }
  .bb-recognition__row{ gap: 20px 28px; }
  .bb-recognition__row img{ width: 150px; }
}
@media (max-width: 560px){
  .bb-header__inner{ flex-direction: column; gap: 14px; align-items: flex-start; }
  .bb-joseph{ padding: 28px 22px; }
}

/* ==========================================================================
   FOOTER — light, matching the site background (not a dark band)
   ========================================================================== */
.bb-footer{ background: var(--bb-bg) !important; border-top: 1.5px solid var(--brown-line); padding-top: 48px; padding-bottom: 24px; }
.bb-footer a{ color: var(--brown-ink); opacity: 0.85; }
.bb-footer a:hover{ opacity: 1 !important; color: var(--bb-brown) !important; }
.bb-footer__grid{
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 30px;
}
.bb-footer__brand-col{ display: flex; flex-direction: column; gap: 8px; }
.bb-footer__brand{ display: flex; align-items: center; gap: 10px; }
.bb-footer__mark{
  width: 32px; height: 32px; display: block; object-fit: contain;
  background: none !important; background-color: transparent !important;
  border: none !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
}
.bb-footer__word{ font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--bb-brown); }
.bb-footer__tagline{ font-style: italic; font-size: 13px; opacity: 0.75; margin: 0; }
.bb-footer__signature{ font-size: 13px; font-style: italic; opacity: 0.65; margin-top: 12px; }
.bb-footer__heading{
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--savory-spice); margin-bottom: 14px;
}
.bb-footer__links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.bb-footer__bottom{
  border-top: 1.5px solid var(--brown-line); padding-top: 18px;
  font-size: 12px; opacity: 0.6; text-align: center;
}
@media (max-width: 800px){
  .bb-footer__grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px){
  .bb-footer__grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   ABOUT PAGE — long-form editorial layout
   ========================================================================== */

/* Narrow reading column for article text (headings, paragraphs, inline
   images). Feature photos (Festival of Light, Phoenix) break out to the
   full section width instead — see .bb-feature-photo below. */
.bb-article{ max-width: 720px; margin: 0 auto; }
.bb-article h1{ margin: 14px 0 22px; }
.bb-article h2{ margin-bottom: 10px; }
.bb-article h3{ font-size: 20px; margin: 28px 0 10px; }
.bb-article__lede{ font-size: 18px; font-weight: 700; color: var(--brown-ink); margin-bottom: 20px !important; }
.bb-article p{ margin: 0 0 20px; }
.bb-article .bb-photo-frame{ margin: 8px 0 28px; }
.bb-article-section--photo-first .bb-article{ padding-top: 0; }

/* Short emphasized standalone lines ("We don't all have to agree...",
   "The table can travel.", etc.) */
.bb-pullquote{
  font-style: italic; color: var(--ripe-red); font-size: 19px; font-weight: 600;
  text-align: center; margin: 32px 0; line-height: 1.5;
}
.bb-pullquote--plain{ font-style: normal; color: var(--bb-brown); font-family: var(--font-display); font-size: 17px; }

/* Full-width feature photographs — deliberately break out of the narrow
   article column. .bb-feature-photo--phoenix is sized to be the single
   largest image on the page. */
.bb-feature-photo{ padding: 8px 0 8px; }
.bb-feature-photo .bb-photo-frame{ margin: 0; }
.bb-feature-photo--phoenix .bb-photo-frame{ aspect-ratio: 100 / 68; }

/* Small 4-icon row (meal → conversation → listen → connect) */
.bb-icon-row{
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: clamp(20px, 5vw, 52px); margin: 36px 0 8px; text-align: center;
}
.bb-icon-row__item{ display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 120px; }
.bb-icon-row__item svg{ width: 52px; height: 52px; }
.bb-icon-row__item span{
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  color: var(--bb-brown); letter-spacing: 0.03em;
}

/* Numbered 4-step "model" grid */
.bb-model-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 36px 0 40px; }
.bb-model-step{ text-align: center; }
.bb-model-step__num{
  display: block; font-family: var(--font-display); font-size: 26px;
  color: var(--ripe-red); margin-bottom: 8px;
}
.bb-model-step svg{ width: 56px; height: 56px; margin-bottom: 12px; }
.bb-model-step h3{ font-size: 15px; margin: 0 0 8px; }
.bb-model-step p{ font-size: 14px; margin: 0; }

/* Founder card (Joseph) — kept compact and subordinate on purpose */
.bb-founder-card{
  border: 2px solid var(--brown-line); border-radius: 6px;
  padding: 28px 32px; margin: 32px 0 12px;
}
.bb-founder-card__head{ margin-bottom: 14px; }
.bb-founder-card__name{ font-family: var(--font-display); color: var(--bb-brown); font-size: 19px; }
.bb-founder-card__title{ font-size: 13px; font-style: italic; color: var(--savory-spice); margin-top: 2px; }
.bb-founder-card p{ font-size: 15px; margin: 0 0 14px; }

@media (max-width: 900px){
  .bb-model-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .bb-model-grid{ grid-template-columns: 1fr; }
  .bb-icon-row{ gap: 28px; }
}

/* Large tagline directly under the H1 — visually like a heading, but kept
   as a plain paragraph so the H1 stays "About Breaking Bread" for SEO,
   with H2s carrying the topical structure beneath it. */
.bb-article__hero-lede{
  font-family: var(--font-display); color: var(--bb-brown); font-weight: 700;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.28; margin: 4px 0 26px;
}

/* WESH video section — full-width 50/50 layout (photo+story on the left,
   video on the right), breaks out of the narrow article column since a
   video needs real width to be watchable. */
.bb-wesh{ padding-top: 0; }
.bb-wesh__grid{ display: grid; grid-template-columns: 1fr; gap: 8px; }
.bb-wesh__grid > div{ min-width: 0; }
.bb-wesh__grid .bb-photo-frame{ margin-bottom: 20px; }
.bb-wesh__grid h2{ margin-bottom: 8px; }
.bb-wesh__grid p{ margin: 0 0 16px; font-size: 15.5px; max-width: 720px; }
.bb-video-frame{ position: relative; aspect-ratio: 16 / 9; min-height: 33vh; border-radius: 3px; overflow: hidden; background: #000; }
.bb-video-frame iframe{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0; }

/* Defensive fallback: if a YouTube iframe ends up on the page without the
   .bb-video-frame wrapper div around it (e.g. pasted directly from
   YouTube's own embed code), force sane sizing on it directly so it can't
   render at YouTube's tiny default 560x315 regardless of markup. */
iframe[src*="youtube.com"]{
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  min-height: 33vh !important;
  height: auto !important;
  display: block !important;
  border: 0;
}
.bb-video-caption{
  font-family: var(--font-display); font-size: 13px; letter-spacing: 0.04em;
  color: var(--savory-spice); text-align: center; margin: 14px 0 16px;
}
.bb-wesh__grid .bb-btn{ display: block; width: max-content; margin: 0 auto; }

/* "What We Do" 4-item grid — same shape as the model-steps grid but no
   number badges, matching the plain all-caps labels in this version. */
.bb-whatwedo-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin: 32px 0 8px; }
.bb-whatwedo-grid .bb-model-step svg{ width: 56px; height: 56px; margin-bottom: 14px; }

/* Marks the strategic pivot ("From Student Organization to Open Table") as
   a distinct visual transition on the page — a subtle background shift. */
.bb-transition-section{ background: var(--bb-bg-deep); }

@media (max-width: 900px){
  .bb-whatwedo-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .bb-whatwedo-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   LEGAL / POLICY PAGES — reuses the .bb-article editorial column from the
   About page, plus list styling (first page that needs bulleted lists).
   ========================================================================== */
.bb-legal-meta{
  font-size: 14px; font-style: italic; color: var(--brown-ink); opacity: 0.75;
  margin: 4px 0 28px;
}
.bb-article ul{
  margin: 0 0 20px; padding-left: 22px;
}
.bb-article li{
  margin-bottom: 8px; padding-left: 4px;
}
.bb-article li::marker{ color: var(--bb-brown); }
.bb-article h2{ margin-top: 40px; }
.bb-article h2:first-of-type{ margin-top: 0; }
.bb-article a.bb-legal-link{
  color: var(--bb-brown); text-decoration: underline; text-underline-offset: 2px;
}

/* "How We Break Bread" — subtly differentiated band per the About page
   restructure, reusing the same tan tint as Grab a Seat. */
.bb-howwebreak{ background: var(--bb-bg-deep); text-align: center; }
.bb-howwebreak h2{ margin-bottom: 10px; }/* End custom CSS */