/* ==========================================================================
   Olive & Ember brand stylesheet
   Theme 2, https://67webdesign.online/theme2 (blog 7)

   Written against the rendered Divi 5 DOM, not against assumptions.
   Confirmed structure:
     module class lands on the module wrapper .et_pb_text / .et_pb_heading
     text bodies render inside   .et_pb_text_inner
     headings render as          .et_pb_heading_container .et_pb_module_header
     button classes land ON the  a.et_pb_button itself, not a parent
     Divi rows default to        width: 80%; max-width: 1080px

   Divi 5 native settings still own section backgrounds, padding, row max
   widths, column structure, menu behaviour, and image sources. This file
   covers only what a native setting cannot express:
     1. clamp() fluid type ramps
     2. flex micro layouts inside one module (price on a baseline, dot rows)
     3. aspect-ratio image tiles
     4. position: sticky on the header, per project convention
     5. multi stop gradient overlays pinned above a background image
   Each block below names which reason applies.
   ========================================================================== */

/* --- 1. Design tokens, lifted verbatim from the prototype ---------------- */
:root {
  --oe-cream: #FBF6EF;
  --oe-sand: #F3E9DA;
  --oe-card: #FFFCF7;
  --oe-espresso: #2B2320;
  --oe-terracotta: #C4703A;
  --oe-terracotta-dark: #A2532A;
  --oe-body: #5C4A40;
  --oe-card-body: #6B584D;
  --oe-muted: #7A675B;
  --oe-gold: #A98A5B;
  --oe-gold-on-dark: #C9A473;
  --oe-amber: #E0A96D;
  --oe-hero-eyebrow: #E9C79A;
  --oe-hero-italic: #E9B47E;
  --oe-hero-heading: #FFF8EE;
  --oe-heading-on-dark: #FFF6E9;
  --oe-hero-body: #F1E4D4;
  --oe-body-on-dark: #D6C4B0;
  --oe-btn-text: #FFF9F1;
  --oe-footer-text: #E9DAC8;
  --oe-footer-muted: #C9B7A5;
  --oe-footer-legal: #8E7C6E;
  --oe-header-border: #E7DACA;
  --oe-card-border: #EADDCB;
  --oe-input-border: #E0D2BF;
  --oe-outline-border: #C9B69C;
  --oe-footer-divider: #453A34;
  --oe-footer-social: #574940;
  --oe-rule: #E0C6A8;

  --oe-serif: "Cormorant Garamond", Georgia, serif;
  --oe-sans: Karla, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* --- 2. Base ------------------------------------------------------------- */
/* Divi's own defaults, confirmed in its stylesheet, all of which fight the
   prototype and every one of which had to be neutralised:
     body            font: Open Sans 14px/1.7em weight 500 colour #666
     h1 to h6        padding-bottom: 10px; line-height: 1em; font-weight: 500
     .et_pb_text     line-height: var(--et_global_body_font_height, 1.7em)
     .et_pb_button   font-size: 20px; font-weight: 500; padding: .3em 1em;
                     line-height: 1.7em !important
   The button line-height carries !important, so the override must too.
   Real values come from the prototype driven classes further down. */
body,
body.et_divi_theme,
#page-container {
  font-family: var(--oe-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: normal;
  color: var(--oe-espresso);
  background: var(--oe-cream);
}

#page-container .et_pb_text { line-height: normal; }

/* Only the padding reset needs to outrank Divi. Colour and weight are set at
   low specificity below so per section heading classes still win. Setting
   them here with an ID blanked the hero H1 to espresso. */
#page-container h1,
#page-container h2,
#page-container h3,
#page-container h4,
#page-container h5,
#page-container h6,
#page-container .et_pb_heading .et_pb_module_header { padding-bottom: 0; }

.et_pb_heading .et_pb_module_header {
  font-family: var(--oe-serif);
  font-weight: 600;
  color: var(--oe-espresso);
}

/* Divi's rows carry clearfix ::before and ::after. On a grid row those become
   two extra grid items, so repeat(auto-fit, ...) sized 5 tracks instead of 4
   and every column came out narrow. */
#page-container .oe-infobar-grid::before,
#page-container .oe-infobar-grid::after,
#page-container .oe-footer-grid::before,
#page-container .oe-footer-grid::after { display: none; }

/* Row width, row padding and section padding are all set NATIVELY per module
   in the block attributes, not here. An earlier blanket "#et-boc
   .et_pb_section { padding: 0 }" carried an ID, so it outranked Divi's own
   generated per-section padding and silently flattened every section. Do not
   reintroduce an ID scoped reset for layout properties Divi already emits. */

/* Divi adds a trailing 1em under every paragraph inside a text module. The
   prototype controls its own rhythm, so the default is removed and given
   back explicitly where the design calls for it. */
/* Divi's trailing space under a paragraph is padding, not margin, and that is
   cleared for every paragraph further down. This rule used to zero the last
   paragraph's MARGIN too, at a specificity that quietly outranked any single
   class rule, which silently removed the footer logo's own 14px gap. Only the
   padding belongs here. */
.et_pb_text_inner p:last-child { padding-bottom: 0; }
.et_pb_module { margin-bottom: 0; }

/* --- 3. Fluid type ramps. Reason 1: clamp() has no native equivalent. ---- */
.oe-h1-home .et_pb_module_header {
  font-family: var(--oe-serif);
  font-weight: 600;
  font-size: clamp(46px, 6.4vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--oe-hero-heading);
  text-shadow: 0 2px 26px rgba(28, 20, 16, 0.4);
  margin: 0 0 22px;
  text-wrap: pretty;
}
.oe-h1-home .et_pb_module_header em {
  color: var(--oe-hero-italic);
  font-style: italic;
}

.oe-h1-page .et_pb_module_header {
  font-family: var(--oe-serif);
  font-weight: 600;
  font-size: clamp(42px, 5.4vw, 72px);
  line-height: 1.03;
  letter-spacing: -0.015em;
  color: var(--oe-hero-heading);
  text-shadow: 0 2px 26px rgba(28, 20, 16, 0.4);
  margin: 0 0 22px;
  max-width: 20ch;
  text-wrap: pretty;
}

.oe-h2 .et_pb_module_header {
  font-family: var(--oe-serif);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 1.06;
  color: var(--oe-espresso);
  margin: 0;
}
.oe-h2-on-dark .et_pb_module_header {
  color: var(--oe-heading-on-dark);
  max-width: 22ch;
}

/* --- 4. Eyebrow label ---------------------------------------------------- */
.oe-eyebrow .et_pb_text_inner p {
  font-family: var(--oe-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oe-gold);
  margin: 0 0 18px;
}
.oe-eyebrow-on-dark .et_pb_text_inner p { color: var(--oe-gold-on-dark); }

/* Hero eyebrow carries a 34px rule to its left.
   Reason 2: a flex pair inside one module. */
.oe-eyebrow-hero .et_pb_text_inner p {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--oe-hero-eyebrow);
  margin: 0 0 22px;
}
.oe-eyebrow-hero .et_pb_text_inner p::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--oe-hero-eyebrow);
  flex: none;
}

/* --- 5. Body copy -------------------------------------------------------- */
/* Each prototype paragraph becomes its own text module, so a paragraph is
   always :last-child inside its own module. Zeroing the last child therefore
   removed every gap between stacked paragraphs. The 18px the prototype sets
   always applies, and the places where it wants 0 or 28px say so explicitly
   with .oe-mb0 or .oe-mb28. */
.oe-body .et_pb_text_inner p {
  font-family: var(--oe-sans);
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--oe-body);
  margin: 0 0 18px;
  padding-bottom: 0;
  text-wrap: pretty;
}
.oe-mb0 .et_pb_text_inner p:last-child { margin-bottom: 0; }

.oe-lead-home .et_pb_text_inner p {
  font-size: 19.5px;
  line-height: 1.6;
  color: var(--oe-hero-body);
  margin: 0 0 34px;
  padding-bottom: 0;
  max-width: 30em;
  text-wrap: pretty;
}

.oe-lead-page .et_pb_text_inner p {
  font-size: 19px;
  line-height: 1.7;
  color: var(--oe-hero-body);
  margin: 0;
  padding-bottom: 0;
  max-width: 50ch;
  text-wrap: pretty;
}

/* --- 6. Buttons.
   The class lands on a.et_pb_button, so selectors are written on the anchor
   itself and matched against Divi's own high specificity button rules. ---- */
#page-container .et_pb_button.oe-btn,
#page-container .et_pb_button.oe-btn:hover {
  font-family: var(--oe-sans);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 16px 30px;
  border: none;
  line-height: normal !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Divi appends a hover arrow through ::after on every button. */
#page-container .et_pb_button.oe-btn::after,
#page-container .et_pb_button.oe-btn::before { display: none; }

#page-container .et_pb_button.oe-btn-primary {
  background: var(--oe-terracotta);
  color: var(--oe-btn-text);
  box-shadow: 0 10px 26px rgba(196, 112, 58, 0.28);
}
#page-container .et_pb_button.oe-btn-primary:hover {
  background: var(--oe-terracotta-dark);
  color: var(--oe-btn-text);
}

/* Hero primary sits on a photo, so it takes the darker ambient shadow. */
#page-container .et_pb_button.oe-btn-on-photo { box-shadow: 0 10px 26px rgba(20, 14, 10, 0.35); }

#page-container .et_pb_button.oe-btn-ghost-light {
  background: transparent;
  color: var(--oe-hero-heading);
  border: 1.5px solid rgba(255, 248, 238, 0.65);
}
#page-container .et_pb_button.oe-btn-ghost-light:hover {
  background: var(--oe-hero-heading);
  color: var(--oe-espresso);
  border: 1.5px solid var(--oe-hero-heading);
}

#page-container .et_pb_button.oe-btn-ghost-dark {
  background: transparent;
  color: var(--oe-espresso);
  border: 1.5px solid var(--oe-outline-border);
}
#page-container .et_pb_button.oe-btn-ghost-dark:hover {
  background: var(--oe-cream);
  color: var(--oe-espresso);
  border: 1.5px solid var(--oe-espresso);
}

#page-container .et_pb_button.oe-btn-espresso {
  background: var(--oe-espresso);
  color: var(--oe-btn-text);
  padding: 16px 34px;
}
#page-container .et_pb_button.oe-btn-espresso:hover {
  background: var(--oe-terracotta);
  color: var(--oe-btn-text);
}

/* Button rows. Reason 2: the group wraps each button in its own
   .et_pb_button_module_wrapper, so the flex lives on the group. */
.oe-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
}
.oe-btn-row .et_pb_button_module_wrapper { display: contents; }

/* --- 7. Sticky header. Reason 4. ---------------------------------------- */
#page-container .oe-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(251, 246, 239, 0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--oe-header-border);
}

/* Reason 2: the header bar is a single flex row of modules. */
.oe-header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}

.oe-logo .et_pb_text_inner p {
  font-family: var(--oe-serif);
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.oe-logo .et_pb_text_inner a {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--oe-espresso);
  text-decoration: none;
  line-height: 1;
}
.oe-amp { color: var(--oe-terracotta); font-size: 20px; line-height: 1; }

/* Header nav. The Menu module supplies markup and the hamburger, this is
   only the skin. Divi's Menu module ships an opaque white background, which
   showed as a white slab behind the hamburger on the cream header. */
#page-container .oe-nav.et_pb_menu,
#page-container .oe-nav .et_pb_menu_inner_container { background-color: transparent; }
.oe-nav { flex: 0 1 auto; margin-left: 18px; width: auto; }
.oe-nav .et_pb_menu_inner_container { width: auto; }
.oe-nav .et_pb_menu__wrap { justify-content: flex-start; }
.oe-nav .et_pb_menu__logo-wrap { display: none; }
#page-container .oe-nav ul.et-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  margin-left: 0;
  line-height: normal;
}
#page-container .oe-nav ul.et-menu > li {
  padding: 0;
  margin: 0;
}
#page-container .oe-nav .et-menu > li > a {
  font-family: var(--oe-sans);
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.01em;
  color: var(--oe-espresso);
  opacity: 1;
  padding: 0;
}
.oe-nav .et-menu > li > a:hover { color: var(--oe-terracotta); opacity: 1; }

/* Header call link. Reason 2: uppercase tag and number on one baseline. */
.oe-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.oe-header-call .et_pb_text_inner p { margin: 0; padding: 0; }
.oe-header-call .et_pb_text_inner a {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 600;
  color: var(--oe-espresso);
  white-space: nowrap;
  text-decoration: none;
}
.oe-call-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oe-gold);
}

/* Header CTA is one size down from the page buttons. */
#page-container .et_pb_button.oe-btn-header {
  padding: 11px 20px;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(196, 112, 58, 0.28);
}

/* Compact header below Divi's tablet breakpoint: logo, CTA, hamburger on a
   single row rather than stacked rows. */
@media (max-width: 980px) {
  .oe-header-inner { flex-wrap: nowrap; gap: 12px; }
  .oe-nav { order: 3; margin-left: 0; flex: 0 0 auto; }
  .oe-header-right { order: 2; margin-left: auto; gap: 10px; }
  .oe-logo .et_pb_text_inner p { font-size: 23px; }
}
@media (max-width: 560px) {
  .oe-header-call { display: none; }
  #page-container .et_pb_button.oe-btn-header {
    padding: 9px 15px;
    font-size: 12.5px;
    box-shadow: none;
  }
  .oe-logo .et_pb_text_inner p { font-size: 21px; }
}

/* --- 8. Hero. Reason 5: four stop gradient above the background image. --- */
.oe-hero { position: relative; overflow: hidden; }
.oe-hero > .et_pb_row { position: relative; z-index: 2; }
.oe-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.oe-hero-home::before {
  background: linear-gradient(100deg,
    rgba(43, 35, 32, 0.86) 0%,
    rgba(43, 35, 32, 0.66) 38%,
    rgba(43, 35, 32, 0.14) 66%,
    rgba(43, 35, 32, 0) 88%);
}
.oe-hero-about::before {
  background: linear-gradient(100deg,
    rgba(43, 35, 32, 0.88) 0%,
    rgba(43, 35, 32, 0.66) 40%,
    rgba(43, 35, 32, 0.16) 70%,
    rgba(43, 35, 32, 0) 92%);
}
.oe-hero-page::before {
  background: linear-gradient(100deg,
    rgba(43, 35, 32, 0.9) 0%,
    rgba(43, 35, 32, 0.68) 40%,
    rgba(43, 35, 32, 0.18) 72%,
    rgba(43, 35, 32, 0) 94%);
}
.oe-hero-band::before {
  background: linear-gradient(20deg,
    rgba(43, 35, 32, 0.82) 0%,
    rgba(43, 35, 32, 0.42) 55%,
    rgba(43, 35, 32, 0.1) 100%);
}

/* The hero section is a flex column so the copy centres against the
   minimum height set natively on the section. */
.oe-hero.et_pb_section { display: flex; flex-direction: column; justify-content: center; }
.oe-hero-copy { max-width: 640px; }

/* The 100deg gradient runs left to right. On a phone the copy would sit
   over the bright side of the photo, so it rotates to top down to hold
   contrast. Same colours, same opacities. */
@media (max-width: 767px) {
  .oe-hero-home::before,
  .oe-hero-about::before,
  .oe-hero-page::before {
    background: linear-gradient(178deg,
      rgba(43, 35, 32, 0.9) 0%,
      rgba(43, 35, 32, 0.78) 45%,
      rgba(43, 35, 32, 0.62) 100%);
  }
  .oe-hero-band::before {
    background: linear-gradient(10deg,
      rgba(43, 35, 32, 0.88) 0%,
      rgba(43, 35, 32, 0.6) 60%,
      rgba(43, 35, 32, 0.35) 100%);
  }
}

/* --- 9. Info bar. Reason 2: dot and label pairs. Reason 3 not needed. ---- */
.oe-infobar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 24px;
}
/* Divi's percentage column widths and gutters are replaced by the grid. */
#page-container .oe-infobar-grid .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}
.oe-infobar-item .et_pb_text_inner p {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  letter-spacing: 0.02em;
  color: #F6EADA;
  margin: 0;
  padding: 0;
}
.oe-infobar-item .et_pb_text_inner p::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--oe-amber);
  flex: none;
}

/* --- 10. Footer --------------------------------------------------------- */
.oe-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 44px 32px;
  padding-bottom: 44px;
  border-bottom: 1px solid var(--oe-footer-divider);
}
#page-container .oe-footer-grid .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
}

.oe-footer-logo {
  font-family: var(--oe-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--oe-heading-on-dark);
  margin: 0 0 14px;
  padding: 0;
}
.oe-footer-logo .oe-amp { color: var(--oe-amber); font-size: 28px; }

.oe-footer-blurb .et_pb_text_inner p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--oe-footer-muted);
  margin: 0 0 18px;
  padding: 0;
  max-width: 30ch;
}

/* Social initials in circles, matching the prototype which uses letters
   rather than brand glyphs. Reason 2: an inline row inside one module. */
.oe-social .et_pb_text_inner p {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.oe-social .et_pb_text_inner a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--oe-footer-social);
  display: grid;
  place-items: center;
  color: var(--oe-footer-text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  flex: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.oe-social .et_pb_text_inner a:hover {
  background: var(--oe-terracotta);
  border-color: var(--oe-terracotta);
  color: var(--oe-btn-text);
}

.oe-footer-h .et_pb_module_header {
  font-family: var(--oe-sans);
  font-size: 13px;
  font-weight: 700;
  /* Divi sets h1 to h6 at line-height: 1em, which shrank these to 13px. */
  line-height: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oe-gold);
  margin: 0 0 16px;
}

/* The three footer columns are separate grids in the reference and each one
   sets its own leading and gap:
     Visit    gap 9px, line-height 1.55
     Hours    gap 8px, default leading
     Explore  gap 9px, default leading
   Applying 1.55 to all three made the Hours rows 6px too tall. */
.oe-footer-list .et_pb_text_inner p {
  font-size: 15.5px;
  line-height: normal;
  color: var(--oe-footer-muted);
  margin: 0 0 9px;
  padding: 0;
}
.oe-footer-list .et_pb_text_inner p:last-child { margin-bottom: 0; }

.oe-footer-visit .et_pb_text_inner p,
.oe-footer-visit .et_pb_text_inner a { line-height: 1.55; }
.oe-footer-hours .et_pb_text_inner p { margin-bottom: 8px; }

/* Phone and Explore links are grid items in the reference, so they fill the
   column width rather than shrinking to their text. */
.oe-footer-list .et_pb_text_inner a {
  display: block;
  color: var(--oe-footer-muted);
  text-decoration: none;
}
.oe-footer-list .et_pb_text_inner a:hover { color: var(--oe-amber); }
.oe-footer-strong { color: var(--oe-footer-text) !important; font-weight: 700; }

.oe-footer-bottom { padding-top: 24px; }
.oe-footer-legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}
.oe-footer-legal .et_pb_text_inner p {
  font-size: 13.5px;
  color: var(--oe-footer-legal);
  margin: 0;
  padding: 0;
}
.oe-footer-legal-links .et_pb_text_inner p { display: flex; gap: 20px; }
.oe-footer-legal .et_pb_text_inner a { color: var(--oe-footer-legal); text-decoration: none; }
.oe-footer-legal .et_pb_text_inner a:hover { color: var(--oe-amber); }

/* --- 11. Utility --------------------------------------------------------- */
.oe-tight { margin-bottom: 0 !important; }

/* --- 12. Mobile menu.
   The prototype hides its nav entirely below 900px and offers no mobile
   menu, so there is no reference to copy. Divi's Menu module supplies the
   hamburger and panel, and this puts them on brand: espresso icon, no
   default blue, cream panel, terracotta top rule. -------------------------- */
#page-container .oe-nav .mobile_menu_bar:before,
#page-container .oe-nav .mobile_menu_bar:after {
  color: var(--oe-espresso);
}
#page-container .oe-nav .et_mobile_nav_menu {
  background: transparent;
  border: none;
  box-shadow: none;
  margin: 0;
}
#page-container .oe-nav .mobile_nav {
  background: transparent;
  border: none;
  padding: 0;
}
#page-container .oe-nav .et_mobile_menu {
  background: var(--oe-cream);
  border-top: 3px solid var(--oe-terracotta);
  box-shadow: 0 14px 34px rgba(43, 35, 32, 0.14);
  padding: 6px 0;
}
#page-container .oe-nav .et_mobile_menu li a {
  font-family: var(--oe-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--oe-espresso);
  border-bottom: 1px solid var(--oe-header-border);
  padding: 13px 18px;
}
#page-container .oe-nav .et_mobile_menu li:last-child a { border-bottom: none; }
#page-container .oe-nav .et_mobile_menu li a:hover {
  color: var(--oe-terracotta);
  background: rgba(196, 112, 58, 0.06);
  opacity: 1;
}

/* ==========================================================================
   SECTION COMPONENTS
   ========================================================================== */

/* --- 13. Grid rows.
   The prototype lays out every multi column block with
   repeat(auto-fit, minmax(Npx, 1fr)), which reflows continuously between
   breakpoints. Divi's percentage columns plus gutters cannot express
   auto-fit, so the row becomes the grid and its columns become plain grid
   items. Divi's clearfix ::before and ::after would otherwise be counted as
   grid items, which sized one track too many. Reason 2. ------------------- */
#page-container .oe-grid { display: grid; }
#page-container .oe-grid::before,
#page-container .oe-grid::after { display: none; }
#page-container .oe-grid > .et_pb_column {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  float: none;
}

.oe-grid-2      { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 54px; align-items: center; }
.oe-grid-2-top  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 54px; align-items: start; }
.oe-grid-2-str  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 54px; align-items: stretch; }
.oe-grid-split  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px 54px; align-items: start; }
.oe-grid-dish   { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 26px; }
.oe-grid-mcards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.oe-grid-mcols  { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 64px 54px; }
.oe-grid-gal    { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.oe-grid-four   { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 44px 34px; }
.oe-grid-four-w { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 44px 34px; }
.oe-grid-quotes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }

/* --- 14. Image tiles. Reason 3: fixed ratio boxes with a cover fit. Divi
   wraps every image in a span.et_pb_image_wrap that has to carry the height
   for object-fit to have anything to fill. ------------------------------- */
/* width: 100% is required. With aspect-ratio and min-height both set and
   width left auto, the browser derives width from the minimum height, which
   pushed the private dining image to 400px and overflowed narrow columns. */
/* The ratio box only holds if the image cannot drive the height. Divi nests
   the img in a span.et_pb_image_wrap; left in flow, a square 1254x1254 source
   forced the module to 291px tall instead of the 218px that aspect-ratio 4/3
   asks for, so every card, gallery tile and portrait was the wrong height.
   The reference does the same thing: a position:relative ratio box with the
   image filling it absolutely. */
.oe-img { position: relative; line-height: 0; width: 100%; }
.oe-img .et_pb_image_wrap {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.oe-img .et_pb_image_wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oe-img-45 { aspect-ratio: 4 / 5; min-height: 360px; }
.oe-img-43 { aspect-ratio: 4 / 3; }
.oe-img-34 { aspect-ratio: 3 / 4; }
.oe-img-round .et_pb_image_wrap img { border-radius: 4px; }

/* --- 15. Centred section intro.
   Divi text modules left align their paragraphs even inside a centred
   column, so the alignment is stated explicitly. ------------------------- */
.oe-intro-center { text-align: center; max-width: 660px; margin: 0 auto 54px; }
.oe-intro-center .et_pb_text_inner p,
.oe-intro-center .et_pb_module_header { text-align: center; }
.oe-intro-center .et_pb_module_header { margin: 0 0 16px; }

/* --- 16. Dish and menu cards ------------------------------------------- */
.oe-card {
  background: var(--oe-card);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(43, 35, 32, 0.05), 0 18px 40px rgba(43, 35, 32, 0.07);
  display: flex;
  flex-direction: column;
}
.oe-card-body { padding: 24px 24px 26px; }

/* Title and price share one baseline. Reason 2: a flex pair that Divi has no
   native equivalent for, holding two real modules. */
.oe-dish-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 9px;
}
.oe-dish-title .et_pb_module_header {
  font-family: var(--oe-serif);
  font-weight: 600;
  font-size: 25px;
  line-height: normal;
  color: var(--oe-espresso);
  margin: 0;
}
.oe-dish-price .et_pb_text_inner p {
  font-weight: 700;
  font-size: 17px;
  color: var(--oe-terracotta);
  margin: 0;
  white-space: nowrap;
}
.oe-card-text .et_pb_text_inner p {
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--oe-card-body);
  margin: 0;
}
/* The Menu page runs the same cards at a looser leading and smaller type. */
.oe-card-text-menu .et_pb_text_inner p { line-height: 1.72; }
.oe-dish-title-sm .et_pb_module_header { font-size: 23px; }
.oe-dish-price-sm .et_pb_text_inner p { font-size: 16.5px; }
.oe-card-tag .et_pb_text_inner p {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oe-gold);
  margin: 0 0 10px;
}

/* --- 17. Arrow link ----------------------------------------------------- */
.oe-arrow-link .et_pb_text_inner p { margin: 0; }
.oe-arrow-link .et_pb_text_inner a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--oe-terracotta);
  border-bottom: 1.5px solid var(--oe-rule);
  padding-bottom: 6px;
  text-decoration: none;
}
.oe-arrow-link .et_pb_text_inner a:hover { color: var(--oe-terracotta-dark); }

/* --- 18. Numbered features on the dark band ----------------------------- */
.oe-num .et_pb_text_inner p {
  font-family: var(--oe-serif);
  font-size: 30px;
  line-height: normal;
  color: var(--oe-amber);
  margin: 0 0 12px;
}
.oe-feature-h .et_pb_module_header {
  font-family: var(--oe-sans);
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.01em;
  color: var(--oe-heading-on-dark);
  margin: 0 0 10px;
}
.oe-feature-p .et_pb_text_inner p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--oe-body-on-dark);
  margin: 0;
}
.oe-feature-p-loose .et_pb_text_inner p { line-height: 1.72; }

/* --- 19. Reviews -------------------------------------------------------- */
.oe-rating-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
}
.oe-rating-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--oe-card);
  border: 1px solid var(--oe-card-border);
  border-radius: 999px;
  padding: 12px 22px 12px 18px;
}
.oe-rating-num .et_pb_text_inner p {
  font-family: var(--oe-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: normal;
  margin: 0;
}
.oe-stars .et_pb_text_inner p {
  color: var(--oe-terracotta);
  font-size: 14px;
  letter-spacing: 2px;
  line-height: normal;
  margin: 0;
}
.oe-rating-count .et_pb_text_inner p {
  font-size: 13px;
  color: var(--oe-muted);
  line-height: normal;
  margin: 2px 0 0;
}
.oe-quote {
  background: var(--oe-card);
  border-radius: 6px;
  padding: 28px 26px;
  box-shadow: 0 14px 34px rgba(43, 35, 32, 0.06);
}
.oe-quote-stars .et_pb_text_inner p {
  color: var(--oe-terracotta);
  font-size: 14px;
  letter-spacing: 3px;
  line-height: normal;
  margin: 0 0 14px;
}
.oe-quote-text .et_pb_text_inner p {
  font-family: var(--oe-serif);
  font-size: 21px;
  line-height: 1.45;
  color: var(--oe-espresso);
  margin: 0 0 18px;
}
.oe-quote-by .et_pb_text_inner p {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--oe-muted);
  margin: 0;
}

/* --- 20. Hours table and address. Reason 2: label and value pushed apart
   on one row, inside a single text module. ------------------------------- */
/* The hours table is a grid of rows with a 10px gap in the reference, and
   each row carries 12px of vertical padding. Both had to be restated at ID
   specificity: the global "#page-container .et_pb_text_inner p
   { padding-bottom: 0 }" reset was silently removing the 12px, and the rows
   had no gap at all. Together that made the block 78px short. */
#page-container .oe-hours .et_pb_text_inner {
  display: grid;
  gap: 10px;
}
#page-container .oe-hours .et_pb_text_inner p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--oe-card-border);
  font-size: 16.5px;
  line-height: normal;
  margin: 0;
}
/* Restated at ID specificity because the rule above now carries one, and a
   plain class selector can no longer reach these. */
#page-container .oe-hours .et_pb_text_inner p.oe-hours-note {
  border-bottom: none;
  font-size: 15.5px;
  color: var(--oe-muted);
}
/* The reference puts the trailing gap on the hours container, not on its last
   row, so it goes on the module wrapper. */
#page-container .et_pb_column > .oe-hours.oe-mb30 { margin-bottom: 30px; }
#page-container .oe-hours.oe-mb30 .et_pb_text_inner p:last-child { margin-bottom: 0; }
.oe-hours .et_pb_text_inner p > span:first-child { font-weight: 700; }
.oe-hours .et_pb_text_inner p > span + span { font-weight: 400; color: var(--oe-body); }
.oe-address .et_pb_text_inner p {
  font-size: 16.5px;
  line-height: 1.6;
  margin: 0 0 8px;
}
.oe-address .et_pb_text_inner p:last-child { margin-bottom: 0; }
/* In the prototype the address block is a grid, so the phone and email links
   are block level items that fill the column rather than inline runs. */
.oe-address .et_pb_text_inner a {
  display: block;
  line-height: 1.6;
  color: var(--oe-terracotta);
  font-weight: 700;
  text-decoration: none;
}
.oe-address .et_pb_text_inner .oe-addr-strong { font-weight: 700; }
.oe-address .et_pb_text_inner .oe-addr-muted { color: var(--oe-body); }

/* --- 21. Call pill ------------------------------------------------------ */
.oe-call-pill .et_pb_text_inner p { margin: 0; }
.oe-call-pill .et_pb_text_inner a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--oe-sand);
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 700;
  color: var(--oe-espresso);
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.oe-call-pill .et_pb_text_inner a:hover { background: var(--oe-header-border); color: var(--oe-espresso); }
.oe-call-pill .oe-call-tag { color: var(--oe-terracotta); }

/* --- 22. Map placeholder.
   The two map slots in the reference carry no image, only the note
   "Map embed: 214 Harlow Street, Portland". Rendered as an on palette
   placeholder with no external request, matching how the other theme sites
   handle it. Swap for a real embed when one is supplied. ------------------ */
.oe-map {
  /* Same rule as the image tiles: with aspect-ratio and min-height both set,
     width must be stated or the browser derives it from the height. Without
     this the Contact map forced a 630px width at phone size. */
  width: 100%;
  min-height: 400px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--oe-card-border);
  background:
    radial-gradient(circle at 32% 38%, rgba(196, 112, 58, 0.16) 0 20%, transparent 21%),
    linear-gradient(135deg, #F6EEE3 0%, #EFE3D2 100%);
  display: grid;
  place-items: center;
  padding: 24px;
}
.oe-map .et_pb_text_inner p {
  font-family: var(--oe-sans);
  font-size: 15px;
  font-weight: 600;
  color: var(--oe-gold);
  text-align: center;
  margin: 0;
}
.oe-map-tall { min-height: 420px; }


/* --- 23. Grid cell fill.
   In the prototype the card itself is the grid item, so cards in a row are
   equal height. Under Divi the column is the grid item and the card sits
   inside it, so the column becomes a flex column and the card grows. ------ */
#page-container .oe-grid-dish > .et_pb_column,
#page-container .oe-grid-mcards > .et_pb_column,
#page-container .oe-grid-quotes > .et_pb_column {
  display: flex;
  flex-direction: column;
}
#page-container .oe-grid-dish > .et_pb_column > .oe-card,
#page-container .oe-grid-mcards > .et_pb_column > .oe-card,
#page-container .oe-grid-quotes > .et_pb_column > .oe-quote { flex: 1 1 auto; }

/* Centred button row, used under the dish grid. */
.oe-btn-row-center { justify-content: center; }

/* Paragraph width caps the prototype states inline. */
.oe-body-42 .et_pb_text_inner p { max-width: 42ch; }
.oe-body-46 .et_pb_text_inner p { max-width: 46ch; }
.oe-h2-20ch .et_pb_module_header { max-width: 20ch; }
.oe-h2-22ch .et_pb_module_header { max-width: 22ch; }

/* Gallery intro: heading and paragraph sit side by side above the tiles. */
.oe-grid-split-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px 54px;
  align-items: start;
}

/* --- 24. Divi's inter module margin.
   Divi gives every module inside a column a percentage bottom margin, scaled
   to the column fraction:
     .et_pb_column .et_pb_module                         { margin-bottom: 30px }
     .et_pb_gutters3 .et_pb_column_1_3 .et_pb_module     { margin-bottom: 9.27% }
   That stacks on top of the margins the prototype already sets on its own
   headings and paragraphs, so every stack came out too loose. All inter
   module spacing in this build comes from the element margins declared above.
   Divi's is removed here, and the few blocks whose spacing genuinely belongs
   on a wrapper rather than on text re-declare it at the same specificity. --- */
#page-container .et_pb_column > .et_pb_module,
#page-container .et_pb_group > .et_pb_module { margin-bottom: 0; }

#page-container .et_pb_group.oe-dish-head { margin-bottom: 9px; }
#page-container .et_pb_group.oe-rating-row { margin-bottom: 48px; }
#page-container .et_pb_group.oe-intro-center { margin: 0 auto 54px; }
#page-container .et_pb_group.oe-card-body { margin-bottom: 0; }

/* Heading bottom margins, taken per section from the prototype. */
.oe-h2-mb16 .et_pb_module_header { margin-bottom: 16px; }
.oe-h2-mb22 .et_pb_module_header { margin-bottom: 22px; }
.oe-h2-mb30 .et_pb_module_header { margin-bottom: 30px; }
.oe-h2-mb54 .et_pb_module_header { margin-bottom: 54px; }

/* Trailing paragraph margins where the prototype sets one on the last block. */
.oe-mb24 .et_pb_text_inner p:last-child { margin-bottom: 24px; }
.oe-mb28 .et_pb_text_inner p:last-child { margin-bottom: 28px; }
.oe-mb30 .et_pb_text_inner p:last-child { margin-bottom: 30px; }

/* Divi adds padding-bottom: 1em to every paragraph inside a text module
   except the last. The prototype spaces paragraphs with margins only, so the
   padding is cleared everywhere and margins from the classes above stand.
   Safe to scope by ID: no padding-bottom is ever set natively on a paragraph. */
#page-container .et_pb_text_inner p { padding-bottom: 0; }

/* --- 25. Form card.
   Divi's Contact Form renders:
     .et_pb_contact_form_container.oe-form
       .et_pb_contact > form.et_pb_contact_form
         .et_pb_contact_field  ( label.et_pb_contact_form_label + input.input )
         .et_contact_bottom_container > button.et_pb_contact_submit
   The prototype lays the fields out on a two column auto-fit grid with the
   name spanning both, so the form element becomes the grid. Divi's own
   et_flex_column_24_24 width classes are overridden. ---------------------- */
.oe-form-card {
  background: var(--oe-card);
  border: 1px solid var(--oe-card-border);
  border-radius: 8px;
  padding: 30px 28px 32px;
  box-shadow: 0 20px 46px rgba(43, 35, 32, 0.08);
}
.oe-form-h .et_pb_module_header {
  font-family: var(--oe-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: normal;
  color: var(--oe-espresso);
  margin: 0 0 22px;
}
.oe-form-h-tight .et_pb_module_header { margin: 0 0 8px; }
.oe-form-sub .et_pb_text_inner p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--oe-muted);
  margin: 0 0 22px;
}

#page-container .oe-form form.et_pb_contact_form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}
#page-container .oe-form .et_pb_contact_field {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none;
  /* Divi makes each field a flex column with a 30px gap, which stacked on
     top of the label's own 7px margin. The prototype gap is 7px. */
  gap: 0;
}
#page-container .oe-form .oe-f-full { grid-column: 1 / -1; }

.oe-form .et_pb_contact_form_label {
  display: block;
  font-family: var(--oe-sans);
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--oe-muted);
  margin: 0 0 7px;
}

#page-container .oe-form input.input,
#page-container .oe-form select,
#page-container .oe-form textarea {
  width: 100%;
  font-family: var(--oe-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0;
  padding: 13px 14px;
  border: 1px solid var(--oe-input-border);
  border-radius: 5px;
  background: var(--oe-cream);
  color: var(--oe-espresso);
}
/* The reference textarea is rows="3", which renders 85px tall. Divi's field
   emits rows="2", so the height is stated instead. The reference select is
   49px against a 47px input; Divi's renders 46px, so it gets the same floor. */
#page-container .oe-form textarea { min-height: 85px; resize: vertical; }
#page-container .oe-form select { min-height: 49px; }
/* The Contact page message field is rows="4" in the reference, one line
   taller than the Reservations notes field. */
#page-container .oe-form .et_pb_contact_field[data-id="message"] textarea { min-height: 104px; }
#page-container .oe-form input.input:focus,
#page-container .oe-form select:focus,
#page-container .oe-form textarea:focus {
  outline: 2px solid rgba(196, 112, 58, 0.45);
  outline-offset: 1px;
  border-color: var(--oe-terracotta);
}

/* The submit row is full width in the prototype. Width is stated explicitly
   as well as the grid span, because Divi does not always place this container
   as a direct child of the form element. */
#page-container .oe-form .et_contact_bottom_container {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  float: none;
  text-align: left;
  margin: 8px 0 0;
  padding: 0;
}
#page-container .oe-form .et_pb_button_wrapper { display: block; width: 100%; }
#page-container .oe-form button.et_pb_contact_submit,
#page-container .oe-form .et_pb_contact_submit {
  width: 100%;
  display: block;
  background: var(--oe-terracotta);
  color: var(--oe-btn-text);
  border: none;
  padding: 17px 24px;
  border-radius: 999px;
  font-family: var(--oe-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: normal !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(196, 112, 58, 0.28);
  transition: background-color 0.2s ease;
}
#page-container .oe-form .et_pb_contact_submit::after,
#page-container .oe-form .et_pb_contact_submit::before { display: none; }
#page-container .oe-form .et_pb_contact_submit:hover {
  background: var(--oe-terracotta-dark);
  color: var(--oe-btn-text);
}

.oe-form-note .et_pb_text_inner p {
  text-align: center;
  font-size: 14.5px;
  line-height: normal;
  color: var(--oe-muted);
  margin: 14px 0 0;
}

/* Divi's success and error messages, kept on brand. */
.oe-form-card .et-pb-contact-message p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--oe-card-body);
  margin: 0 0 10px;
}

/* --- 26. Interior page components ---------------------------------------- */

/* Heading size variants the prototype uses on the Menu page. */
.oe-h2-col .et_pb_module_header { font-size: clamp(30px, 3vw, 42px); margin-bottom: 30px; }
.oe-h2-band .et_pb_module_header {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.08;
  color: var(--oe-hero-heading);
  text-shadow: 0 2px 22px rgba(28, 20, 16, 0.4);
  margin: 0 0 14px;
}

/* Hero lead paragraph width caps that differ per page. */
.oe-lead-52 .et_pb_text_inner p { max-width: 52ch; }
/* The Menu page market band paragraph is body size on a photo, not hero size. */
.oe-band-p .et_pb_text_inner p {
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--oe-hero-body);
  margin: 0;
  max-width: 44ch;
}
.oe-lead-mb32 .et_pb_text_inner p { margin-bottom: 32px; }

/* Menu page dish list. Each item is a title and price on one baseline with
   the description underneath, and the list itself is a 22px gap stack. */
.oe-menu-list { display: grid; gap: 22px; }
#page-container .et_pb_group.oe-menu-head { margin-bottom: 6px; }
#page-container .et_pb_group.oe-menu-item { margin-bottom: 0; }

/* Menu page allergy note. */
.oe-note .et_pb_text_inner p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--oe-muted);
  margin: 54px 0 0;
  max-width: 70ch;
}

/* About page pull quote. */
.oe-pullquote {
  border-left: 2px solid var(--oe-terracotta);
  padding: 4px 0 4px 22px;
}
.oe-pullquote-text .et_pb_text_inner p {
  font-family: var(--oe-serif);
  font-size: 25px;
  line-height: 1.42;
  color: var(--oe-espresso);
  margin: 0 0 10px;
}
.oe-pullquote-by .et_pb_text_inner p {
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oe-gold);
  margin: 0;
}

/* Reservations page "good to know" blocks. */
.oe-book-list { display: grid; gap: 18px; max-width: 46ch; }
.oe-book-h .et_pb_module_header {
  font-family: var(--oe-sans);
  font-size: 17px;
  font-weight: 700;
  line-height: normal;
  color: var(--oe-espresso);
  margin: 0 0 8px;
}
.oe-book-p .et_pb_text_inner p {
  font-size: 16px;
  line-height: 1.72;
  color: var(--oe-body);
  margin: 0;
}
#page-container .et_pb_group.oe-book-item { margin-bottom: 0; }
.oe-call-pill-mt .et_pb_text_inner a { margin-top: 30px; }

/* Private dining image, 4:3 with a 6px radius. */
.oe-img-43-soft { aspect-ratio: 4 / 3; min-height: 300px; }
.oe-img-43-soft .et_pb_image_wrap img { border-radius: 6px; }

/* Image band heroes push their copy to the bottom of the band. */
.oe-band.et_pb_section { display: flex; flex-direction: column; justify-content: flex-end; }
.oe-band-copy { max-width: 560px; }

/* Hours block on the Contact page is capped narrower than on the home page. */
.oe-hours-440 { max-width: 440px; }
.oe-hours-420 { max-width: 420px; }

/* The home page feature headings carry letter-spacing: 0.01em; the About page
   "Three rules" headings do not. Same size and weight, different tracking. */
.oe-feature-h-plain .et_pb_module_header { letter-spacing: normal; }

/* --- 27. Fixes found by the vertical rhythm audit ------------------------ */

/* Menu page featured cards put the 9px under the title itself, since they
   have no title-and-price row to carry it. */
.oe-dish-title-mb9 .et_pb_module_header { margin-bottom: 9px; }

/* The market band eyebrow sits 16px above its heading, not the 22px the hero
   eyebrows use. */
.oe-eyebrow-band .et_pb_text_inner p { margin-bottom: 16px; }

/* The full width map on the Contact page renders at 3:2 in the reference
   (1240 wide by 827 tall). min-height stays as the documented floor for
   narrow screens. Swap this block for a real embed when one is supplied. */
.oe-map-tall {
  aspect-ratio: 3 / 2;
  min-height: 420px;
}

/* --- 28. Mobile dropdown width.
   Divi positions .et_mobile_menu against the nearest positioned ancestor,
   which here is the Menu module itself. Because the header lays the module
   out at its natural width, that ancestor is only as wide as the hamburger
   icon (32px), so the open panel rendered 32px wide with every label wrapped
   one letter per line. Clearing the intermediate positioning contexts lets
   the panel resolve against the sticky header and span its full width. ---- */
@media (max-width: 980px) {
  #page-container .oe-nav.et_pb_menu,
  #page-container .oe-nav .et_pb_menu_inner_container,
  #page-container .oe-nav .et_pb_menu__wrap,
  #page-container .oe-nav .et_mobile_nav_menu,
  #page-container .oe-nav .mobile_nav { position: static; }

  #page-container .oe-nav .et_mobile_menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 600;
  }

  /* The panel hangs below the sticky bar, so nothing may clip it. */
  #page-container .oe-header,
  #page-container .oe-header > .et_pb_row,
  #page-container .oe-header .et_pb_column,
  #page-container .oe-header .oe-header-inner { overflow: visible; }
}