.elementor-kit-4{--e-global-color-primary:#0D0D0D;--e-global-color-secondary:#1A1A1A;--e-global-color-text:#F5F0E8;--e-global-color-accent:#D4A853;--e-global-color-852f3ab:#8A8A8A;--e-global-color-004c8d5:#2C2C2C;--e-global-typography-primary-font-family:"Syne";--e-global-typography-primary-font-size:60px;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:1.1px;--e-global-typography-secondary-font-family:"Syne";--e-global-typography-secondary-font-size:36px;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.15px;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.75px;--e-global-typography-accent-font-family:"Syne";--e-global-typography-accent-font-size:11px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:0.16px;background-color:#000000;color:var( --e-global-color-primary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:#02010100;color:var( --e-global-color-primary );border-style:solid;border-width:1px 1px 1px 1px;border-radius:1px 1px 1px 1px;}.elementor-kit-4 button:hover,.elementor-kit-4 button:focus,.elementor-kit-4 input[type="button"]:hover,.elementor-kit-4 input[type="button"]:focus,.elementor-kit-4 input[type="submit"]:hover,.elementor-kit-4 input[type="submit"]:focus,.elementor-kit-4 .elementor-button:hover,.elementor-kit-4 .elementor-button:focus{background-color:#FFFFFF;color:#000000;}.elementor-kit-4 e-page-transition{background-color:#FFBC7D;}.elementor-kit-4 a{color:#4890C5;}.elementor-kit-4 a:hover{color:#8D8D8D;}.elementor-kit-4 h1{color:var( --e-global-color-primary );font-family:"Impact Label", Sans-serif;font-size:46px;}.elementor-kit-4 h2{color:var( --e-global-color-primary );font-family:"Impact Label", Sans-serif;font-size:40px;}.elementor-kit-4 h3{font-family:"Impact Label", Sans-serif;font-weight:600;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.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);}@media(max-width:1024px){.elementor-kit-4{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-4{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ════════════════════════════════════════════
   HEN'S BREAD PRODUCTIONS — SITE CSS
   Version: Clean 2.0
   Font sizes controlled via Elementor UI.
   This CSS handles: font family, weight,
   color, line height, and brand classes.
   ════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   1. BRAND VARIABLES
   ───────────────────────────────────────────── */
:root {
  --hbp-black:   #0D0D0D;
  --hbp-surface: #1A1A1A;
  --hbp-ui:      #2C2C2C;
  --hbp-gold:    #D4A853;
  --hbp-cream:   #F5F0E8;
  --hbp-gray:    #8A8A8A;
  --hbp-stripe:  5px solid #D4A853;
}


/* ─────────────────────────────────────────────
   2. BASE
   ───────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}
body {
  background-color: var(--hbp-black) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a           { color: var(--hbp-gold); }
a:hover     { color: var(--hbp-cream); }
::selection { background: var(--hbp-gold); color: var(--hbp-black); }


/* ─────────────────────────────────────────────
   3. TYPOGRAPHY
   Font size set per widget in Elementor UI.
   CSS controls: family, weight, color only.
   ───────────────────────────────────────────── */

.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading .elementor-heading-title {
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  color:       var(--hbp-cream) !important;
}

.elementor-widget-heading h3,
.elementor-widget-heading .elementor-heading-title.elementor-size-medium {
  font-weight: 700 !important;
}

.elementor-widget-heading h4,
.elementor-widget-heading .elementor-heading-title.elementor-size-small {
  font-weight: 700 !important;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor div {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color:       var(--hbp-gray) !important;
}


/* ─────────────────────────────────────────────
   4. OVERLINE / ACCENT TEXT
   Add class  hbp-overline  to widget
   ───────────────────────────────────────────── */
.hbp-overline .elementor-heading-title,
.hbp-overline p,
.hbp-overline span,
.hbp-overline {
  font-family:    'Syne', sans-serif !important;
  font-weight:    500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color:          var(--hbp-gold) !important;
}


/* ─────────────────────────────────────────────
   5. BUTTONS
   ───────────────────────────────────────────── */
.hbp-btn-outline .elementor-button {
  background:    transparent !important;
  border:        1.5px solid var(--hbp-gold) !important;
  color:         var(--hbp-gold) !important;
  border-radius: 3px !important;
}
.hbp-btn-outline .elementor-button:hover {
  background: var(--hbp-gold) !important;
  color:      var(--hbp-black) !important;
}
.hbp-btn-dark .elementor-button {
  background:    var(--hbp-black) !important;
  color:         var(--hbp-gold) !important;
  border:        none !important;
  border-radius: 3px !important;
}
.hbp-btn-dark .elementor-button:hover {
  background: var(--hbp-surface) !important;
}


/* ─────────────────────────────────────────────
   6. SECTION BACKGROUNDS & STRIPE
   Add classes to containers in Advanced tab
   ───────────────────────────────────────────── */
.hbp-surface {
  background-color: var(--hbp-surface) !important;
}
.hbp-stripe {
  border-left:   var(--hbp-stripe) !important;
  border-radius: 0 !important;
}
.hbp-gold-section {
  background-color: var(--hbp-gold) !important;
  border-left:      5px solid var(--hbp-black) !important;
}
.hbp-gold-section h1,
.hbp-gold-section h2,
.hbp-gold-section h3,
.hbp-gold-section p,
.hbp-gold-section .elementor-heading-title {
  color: var(--hbp-black) !important;
}


/* ─────────────────────────────────────────────
   7. CARDS
   Add class  hbp-card  to each card container
   ───────────────────────────────────────────── */
.hbp-card {
  background-color: var(--hbp-black) !important;
  border-left:      3px solid var(--hbp-gold) !important;
  border-radius:    0 4px 4px 0 !important;
  padding:          24px 20px !important;
}
.hbp-work-card {
  background-color: var(--hbp-surface) !important;
  border-radius:    4px !important;
  overflow:         hidden !important;
}


/* ─────────────────────────────────────────────
   8. FORMS
   ───────────────────────────────────────────── */
.elementor-form .elementor-field-group input,
.elementor-form .elementor-field-group textarea,
.elementor-form .elementor-field-group select {
  background:    var(--hbp-surface) !important;
  border:        1px solid var(--hbp-ui) !important;
  border-radius: 3px !important;
  color:         var(--hbp-cream) !important;
  font-family:   'DM Sans', sans-serif !important;
  padding:       12px 16px !important;
}
.elementor-form .elementor-field-group input:focus,
.elementor-form .elementor-field-group textarea:focus {
  border-color: var(--hbp-gold) !important;
  outline:      none !important;
}
::placeholder {
  color: var(--hbp-ui) !important;
  opacity: 1 !important;
}


/* ─────────────────────────────────────────────
   9. IMAGE FRAMES
   Add class  hbp-img-frame  to image widget
   ───────────────────────────────────────────── */
.hbp-img-frame img {
  border-left:   3px solid var(--hbp-gold) !important;
  border-radius: 0 4px 4px 0 !important;
  filter:        brightness(0.9) saturate(0.85);
}


/* ─────────────────────────────────────────────
   10. DIVIDERS
   ───────────────────────────────────────────── */
.elementor-divider-separator {
  border-color: var(--hbp-ui) !important;
}


/* ─────────────────────────────────────────────
   11. FOOTER
   Add class  hbp-footer  to footer section
   ───────────────────────────────────────────── */
.hbp-footer {
  background-color: var(--hbp-black) !important;
  border-top:       1px solid var(--hbp-surface) !important;
}


/* ─────────────────────────────────────────────
   12. SCROLLBAR
   ───────────────────────────────────────────── */
::-webkit-scrollbar             { width: 6px; }
::-webkit-scrollbar-track        { background: var(--hbp-black); }
::-webkit-scrollbar-thumb        { background: var(--hbp-ui); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover  { background: var(--hbp-gold); }
/* ── STAT NUMBERS — force gold ── */
.hbp-stat-num .elementor-heading-title,
.hbp-stat-num {
  color: #D4A853 !important;
  font-family: 'Syne', sans-serif !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

/* ── STAT LABELS — gray ── */
.hbp-stat-label .elementor-widget-container,
.hbp-stat-label p,
.hbp-stat-label {
  color: #8A8A8A !important;
  font-size: 12px !important;
  font-weight: 300 !important;
}

/* ── VIDEO CONTAINER — dark background ── */
.hbp-video-bg {
  background-color: #0D0D0D !important;
}
/* ════════════════════════════════════════
   HBP — PROCESS SECTION + ACCORDION
   ════════════════════════════════════════ */

/* ── PROCESS SECTION background ── */
.hbp-process {
  background-color: #0D0D0D !important;
}

/* ════════════════════════════════════════
   ACCORDION — full brand override
   ════════════════════════════════════════ */

/* ── Remove Elementor's default accordion border and bg ── */
.hbp-accordion .elementor-accordion,
.hbp-accordion .elementor-accordion-wrapper {
  border: none !important;
  background: transparent !important;
}

/* ── Each accordion item row ── */
.hbp-accordion .elementor-accordion-item {
  border: none !important;
  border-bottom: 1px solid #2C2C2C !important;
  background: transparent !important;
  margin-bottom: 0 !important;
}
.hbp-accordion .elementor-accordion-item:first-child {
  border-top: 1px solid #2C2C2C !important;
}

/* ── Accordion header (the clickable title row) ── */
.hbp-accordion .elementor-tab-title,
.hbp-accordion .elementor-accordion-title {
  background: transparent !important;
  padding: 18px 0 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  cursor: pointer !important;
}
.hbp-accordion .elementor-tab-title:hover {
  background: transparent !important;
}

/* ── Step number (the tab label — 01, 02 etc) ── */
.hbp-accordion .elementor-accordion-icon,
.hbp-accordion .elementor-tab-title .elementor-accordion-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background: #2C2C2C !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: background 0.2s, color 0.2s !important;
  order: -1 !important;
}
/* Gold when open */
.hbp-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon,
.hbp-accordion .elementor-accordion-item.elementor-active .elementor-tab-title .elementor-accordion-icon {
  background: #D4A853 !important;
  color: #0D0D0D !important;
}

/* ── The + / - toggle icon inside the circle ── */
.hbp-accordion .elementor-accordion-icon i,
.hbp-accordion .elementor-accordion-icon svg {
  font-size: 12px !important;
  color: #8A8A8A !important;
  transition: color 0.2s !important;
}
.hbp-accordion .elementor-active .elementor-accordion-icon i,
.hbp-accordion .elementor-active .elementor-accordion-icon svg {
  color: #0D0D0D !important;
}

/* ── Step title text ── */
.hbp-accordion .elementor-accordion-title,
.hbp-accordion .elementor-tab-title a {
  font-family: 'Syne', sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #F5F0E8 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  flex: 1 !important;
}
.hbp-accordion .elementor-tab-title:hover .elementor-accordion-title,
.hbp-accordion .elementor-tab-title:hover a {
  color: #D4A853 !important;
}
.hbp-accordion .elementor-active .elementor-accordion-title,
.hbp-accordion .elementor-active a {
  color: #D4A853 !important;
}

/* ── Accordion open body / content area ── */
.hbp-accordion .elementor-tab-content,
.hbp-accordion .elementor-accordion-content {
  background: #111318 !important;
  border-left: 3px solid #D4A853 !important;
  border-bottom: none !important;
  border-top: none !important;
  border-right: none !important;
  border-radius: 0 0 4px 4px !important;
  padding: 14px 16px 18px 20px !important;
  margin-left: 44px !important;
}

/* ── Content text inside the accordion ── */
.hbp-accordion .elementor-tab-content p,
.hbp-accordion .elementor-tab-content,
.hbp-accordion .elementor-accordion-content p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 300 !important;
  color: #8A8A8A !important;
  line-height: 1.75 !important;
  margin: 0 !important;
}

/* ── Connecting line between step numbers (vertical) ── */
.hbp-accordion .elementor-accordion-item::before {
  content: '' !important;
  display: none !important;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .hbp-accordion .elementor-tab-content,
  .hbp-accordion .elementor-accordion-content {
    margin-left: 0 !important;
    padding: 12px 14px !important;
  }
  .hbp-accordion .elementor-accordion-title,
  .hbp-accordion .elementor-tab-title a {
    font-size: 14px !important;
  }
}
/* ── H1 WORD HIGHLIGHT — "Story" in gold ── */

/* Option A — Gold color only */
.hbp-gold {
  color: #D4A853 !important;
  -webkit-text-fill-color: #D4A853 !important;
}

/* Option B — Gold + italic (swap in if you prefer) */
/*
.hbp-gold {
  color: #D4A853 !important;
  -webkit-text-fill-color: #D4A853 !important;
  font-style: italic !important;
}
*/

/* Option C — Gold + underline (swap in if you prefer) */
/*
.hbp-gold {
  color: #D4A853 !important;
  -webkit-text-fill-color: #D4A853 !important;
  text-decoration: underline !important;
  text-underline-offset: 6px !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: #D4A853 !important;
}
*/
/* ════════════════════════════════════════
   HBP — SCROLL FADE-IN ANIMATIONS
   Uses Intersection Observer — zero
   impact on page load performance.
   Elements only animate when they
   enter the viewport.
   ════════════════════════════════════════ */

/* ── HIDDEN STATE — before element enters viewport ── */
.hbp-fade-up,
.hbp-fade-in,
.hbp-fade-left,
.hbp-fade-right {
  opacity: 0;
  will-change: opacity, transform;
}

.hbp-fade-up    { transform: translateY(28px); }
.hbp-fade-left  { transform: translateX(-28px); }
.hbp-fade-right { transform: translateX(28px); }

/* ── VISIBLE STATE — when element enters viewport ── */
.hbp-fade-up.hbp-visible,
.hbp-fade-in.hbp-visible,
.hbp-fade-left.hbp-visible,
.hbp-fade-right.hbp-visible {
  opacity: 1;
  transform: translate(0, 0);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

/* ── STAGGER DELAYS — for cards in a row ── */
.hbp-fade-up[data-delay="100"].hbp-visible,
.hbp-fade-in[data-delay="100"].hbp-visible {
  transition-delay: 0.1s;
}
.hbp-fade-up[data-delay="200"].hbp-visible,
.hbp-fade-in[data-delay="200"].hbp-visible {
  transition-delay: 0.2s;
}
.hbp-fade-up[data-delay="300"].hbp-visible,
.hbp-fade-in[data-delay="300"].hbp-visible {
  transition-delay: 0.3s;
}
.hbp-fade-up[data-delay="400"].hbp-visible,
.hbp-fade-in[data-delay="400"].hbp-visible {
  transition-delay: 0.4s;
}

/* ── RESPECT REDUCED MOTION PREFERENCE ──
   Never animate for users who have
   enabled "reduce motion" in their OS   */
@media (prefers-reduced-motion: reduce) {
  .hbp-fade-up,
  .hbp-fade-in,
  .hbp-fade-left,
  .hbp-fade-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* ════════════════════════════════════════
   HBP — HEADER STYLING
   ════════════════════════════════════════ */

/* ── HEADER WRAPPER — dark bg + gold bottom line ── */
.e-header,
.elementor-location-header,
header.elementor-section,
header .elementor-container {
  background-color: #0D0D0D !important;
  border-bottom: 2px solid #D4A853 !important;
}

/* ════════════════════════════════════════
   HBP — HEADER v2 (matches Image 2 mockup)
   Tight 64px height · Single CTA · Subtle
   gold bottom line
   ════════════════════════════════════════ */

/* ── HEADER WRAPPER ── */
.e-header,
.elementor-location-header,
.elementor-location-header .elementor-section,
.elementor-location-header .e-con {
  background-color: #0D0D0D !important;
  border-bottom: 1px solid #D4A853 !important;
  min-height: 64px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ── STICKY — frosted glass on scroll ── */
.elementor-sticky--active,
.elementor-location-header.elementor-sticky--active,
.elementor-location-header.elementor-sticky--active .elementor-section {
  background-color: rgba(13,13,13,0.97) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid #D4A853 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5) !important;
}

/* ── INNER CONTAINER height ── */
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-row,
.elementor-location-header .e-con-inner {
  min-height: 64px !important;
  align-items: center !important;
}

/* ── LOGO IMAGE — small, no border or bg ── */
.elementor-location-header .elementor-widget-image img {
  max-height: 36px !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.elementor-location-header .elementor-widget-image {
  background: transparent !important;
  border: none !important;
  line-height: 0 !important;
}

/* ── LOGO WORDMARK subtext "PRODUCTIONS" ── */
.elementor-location-header .elementor-widget-heading h1,
.elementor-location-header .elementor-widget-heading h2,
.elementor-location-header .elementor-widget-heading h3,
.elementor-location-header .elementor-widget-heading h4,
.elementor-location-header .elementor-widget-heading h5,
.elementor-location-header .elementor-widget-heading h6 {
  font-family: 'Syne', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #F5F0E8 !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* ── NAV MENU LINKS ── */
.elementor-location-header .elementor-nav-menu a,
.elementor-location-header .elementor-nav-menu .elementor-item {
  font-family: 'Syne', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  color: #8A8A8A !important;
  text-decoration: none !important;
  padding: 4px 0 !important;
  border-bottom: 1.5px solid transparent !important;
  transition: color 0.2s, border-color 0.2s !important;
}
.elementor-location-header .elementor-nav-menu a:hover,
.elementor-location-header .elementor-nav-menu .elementor-item:hover,
.elementor-location-header .elementor-nav-menu .elementor-item-active,
.elementor-location-header .elementor-nav-menu .current-menu-item > a {
  color: #F5F0E8 !important;
  border-bottom-color: #D4A853 !important;
}

/* ── HIDE PHONE NUMBER — move to footer only ── */
.hbp-header-phone {
  display: none !important;
}

/* ── CTA BUTTON "Book a Call" ── */
.elementor-location-header .elementor-button,
.elementor-location-header .elementor-widget-button .elementor-button {
  background: #D4A853 !important;
  color: #0D0D0D !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 10px 20px !important;
  border-radius: 3px !important;
  border: none !important;
  transition: background 0.2s, color 0.2s !important;
}
.elementor-location-header .elementor-button:hover {
  background: #F5F0E8 !important;
  color: #0D0D0D !important;
}

/* ── DROPDOWN ── */
.elementor-location-header .elementor-nav-menu--dropdown,
.elementor-location-header .elementor-nav-menu--dropdown ul {
  background: #1A1A1A !important;
  border: none !important;
  border-top: 1px solid #D4A853 !important;
  border-radius: 0 0 4px 4px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.elementor-location-header .elementor-nav-menu--dropdown li a {
  color: #8A8A8A !important;
  font-size: 11px !important;
  border-bottom: 0.5px solid #2C2C2C !important;
  padding: 10px 16px !important;
}
.elementor-location-header .elementor-nav-menu--dropdown li a:hover {
  color: #D4A853 !important;
  background: #0D0D0D !important;
}

/* ── MOBILE HAMBURGER ── */
.elementor-location-header .elementor-menu-toggle i,
.elementor-location-header .elementor-menu-toggle svg {
  color: #D4A853 !important;
  font-size: 20px !important;
}

/* ── MOBILE NAV PANEL ── */
@media (max-width: 1024px) {
  .elementor-location-header .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    background: #0D0D0D !important;
    border-top: 1px solid #D4A853 !important;
  }
}
/* ════════════════════════════════════════
   HBP — FOOTER STYLING
   ════════════════════════════════════════ */

/* ── FOOTER WRAPPER ── */
.elementor-location-footer,
.elementor-location-footer .elementor-section,
.elementor-location-footer .e-con {
  background-color: #0D0D0D !important;
  border-top: 1px solid #D4A853 !important;
}

/* ── COLUMN SECTION HEADINGS
   "Quick Links" "Services" "Contact Information"
   Remove underline, style as gold overline     ── */
.elementor-location-footer .elementor-widget-heading .elementor-heading-title,
.elementor-location-footer h2,
.elementor-location-footer h3,
.elementor-location-footer h4,
.elementor-location-footer h5,
.elementor-location-footer h6 {
  font-family: 'Syne', sans-serif !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #D4A853 !important;
  text-decoration: none !important;
  border-bottom: none !important;
  margin-bottom: 16px !important;
}

/* ── LOGO IMAGE ── */
.elementor-location-footer .elementor-widget-image img {
  max-height: 60px !important;
  width: auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── TAGLINE / DESCRIPTION TEXT ── */
.elementor-location-footer .elementor-widget-text-editor p,
.elementor-location-footer .elementor-widget-text-editor {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: #8A8A8A !important;
  line-height: 1.65 !important;
}

/* ── NAV / QUICK LINKS ── */
.elementor-location-footer .elementor-nav-menu a,
.elementor-location-footer .elementor-nav-menu .elementor-item {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #8A8A8A !important;
  text-decoration: none !important;
  padding: 5px 0 !important;
  display: block !important;
  border-bottom: 0.5px solid #1A1A1A !important;
  transition: color 0.2s, padding-left 0.2s !important;
}
.elementor-location-footer .elementor-nav-menu a:hover,
.elementor-location-footer .elementor-nav-menu .elementor-item:hover {
  color: #D4A853 !important;
  padding-left: 4px !important;
}

/* ── ICON LIST (contact info) ── */
.elementor-location-footer .elementor-icon-list-icon i,
.elementor-location-footer .elementor-icon-list-icon svg {
  color: #D4A853 !important;
  font-size: 13px !important;
}
.elementor-location-footer .elementor-icon-list-text {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 12px !important;
  font-weight: 300 !important;
  color: #8A8A8A !important;
}
.elementor-location-footer .elementor-icon-list-item {
  padding: 4px 0 !important;
}
.elementor-location-footer .elementor-icon-list-item a {
  color: #D4A853 !important;
  text-decoration: none !important;
}
.elementor-location-footer .elementor-icon-list-item a:hover {
  color: #F5F0E8 !important;
}

/* ── SOCIAL ICONS ── */
.elementor-location-footer .elementor-social-icons-wrapper .elementor-icon,
.elementor-location-footer .elementor-widget-social-icons a {
  background: #1A1A1A !important;
  border: 0.5px solid #2C2C2C !important;
  border-radius: 3px !important;
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color 0.2s, color 0.2s !important;
}
.elementor-location-footer .elementor-social-icons-wrapper .elementor-icon i,
.elementor-location-footer .elementor-widget-social-icons a i {
  color: #8A8A8A !important;
  font-size: 13px !important;
}
.elementor-location-footer .elementor-social-icons-wrapper .elementor-icon:hover,
.elementor-location-footer .elementor-widget-social-icons a:hover {
  border-color: #D4A853 !important;
}
.elementor-location-footer .elementor-social-icons-wrapper .elementor-icon:hover i,
.elementor-location-footer .elementor-widget-social-icons a:hover i {
  color: #D4A853 !important;
}

/* ── BBB / GOOGLE BADGES ── */
.elementor-location-footer .elementor-widget-image-box .elementor-image-box-img img,
.elementor-location-footer .elementor-widget-image img {
  filter: brightness(0.85) !important;
  border-radius: 3px !important;
  transition: filter 0.2s !important;
}
.elementor-location-footer .elementor-widget-image:hover img {
  filter: brightness(1) !important;
}

/* ── DIVIDER LINE between main and copyright ── */
.elementor-location-footer .elementor-divider-separator {
  border-color: #2C2C2C !important;
}

/* ── COPYRIGHT BAR — fix the white background ── */
.elementor-location-footer .hbp-copyright,
.elementor-location-footer .elementor-section:last-child,
.elementor-location-footer .e-con:last-child {
  background-color: #111318 !important;
  border-top: 0.5px solid #2C2C2C !important;
  padding: 14px 60px !important;
}
.elementor-location-footer .elementor-section:last-child *,
.elementor-location-footer .e-con:last-child *,
.elementor-location-footer .hbp-copyright * {
  color: #555 !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 300 !important;
}

/* ── ALL LINKS in footer ── */
.elementor-location-footer a {
  text-decoration: none !important;
}

/* ── MOBILE ── */
@media (max-width: 767px) {
  .elementor-location-footer .elementor-section,
  .elementor-location-footer .e-con {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}
html {
  scroll-padding-top: 100px;
}
/* Add to all HTML files — forces modern format via CSS */
img {
  content-visibility: auto;
}
/* Paste in Elementor → Site Settings → Custom CSS */
.site-header img.custom-logo,
.elementor-widget-image img {
  max-width: 141px !important;
  height: auto !important;
  width: auto !important;
}
/* ── MOBILE LOGO FIX ─────────────────────────── */
/* Shrink logo on mobile so it doesn't clash with hamburger */
@media (max-width: 767px) {
  .site-header .custom-logo,
  .elementor-widget-image img,
  img.custom-logo {
    max-width: 80px !important;
    height: auto !important;
    width: 80px !important;
  }

  /* Add right margin so logo doesn't overlap hamburger */
  .site-header .custom-logo-link,
  .site-branding {
    margin-right: 60px !important;
  }
}

/* ── TABLET (768px–1024px) ─────────────────── */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-header .custom-logo,
  .elementor-widget-image img,
  img.custom-logo {
    max-width: 100px !important;
    height: auto !important;
  }
}
/* ════════════════════════════════════════════════════
   HEN'S BREAD PRODUCTIONS — Blog Grid Styles
   Paste into: Elementor → Site Settings → Custom CSS
   Targets: .hfe-posts-grid (Header Footer Elementor widget)
════════════════════════════════════════════════════ */

/* ── GRID LAYOUT ── */
.hfe-posts-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 14px !important;
  background: transparent !important;
}

/* ── CARD ── */
.hfe-post-card {
  background: #1A1A1A !important;
  border: 0.5px solid #2C2C2C !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: border-color 0.2s, transform 0.2s !important;
  position: relative !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Gold top accent bar on hover */
.hfe-post-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: #2C2C2C;
  transition: background 0.2s;
  z-index: 2;
}
.hfe-post-card:hover {
  border-color: #D4A853 !important;
  transform: translateY(-2px) !important;
}
.hfe-post-card:hover::before {
  background: #D4A853 !important;
}

/* ── FEATURED IMAGE ── */
.hfe-post-image {
  width: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}
.hfe-post-image a {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}
.hfe-post-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  filter: brightness(0.88) !important;
  transition: filter 0.3s !important;
  margin: 0 !important;
}
.hfe-post-card:hover .hfe-post-image img {
  filter: brightness(1) !important;
}

/* ── CONTENT AREA ── */
.hfe-post-content {
  padding: 16px 18px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex: 1 !important;
  background: #1A1A1A !important;
}

/* ── TITLE ── */
.hfe-post-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin: 0 0 4px !important;
}
.hfe-post-title a {
  color: #F5F0E8 !important;
  text-decoration: none !important;
  transition: color 0.18s !important;
}
.hfe-post-card:hover .hfe-post-title a {
  color: #D4A853 !important;
}

/* ── META (date + author) ── */
.hfe-post-meta {
  font-size: 11px !important;
  font-weight: 300 !important;
  color: #9E9E9E !important;
  margin: 0 0 4px !important;
  line-height: 1.4 !important;
}
.hfe-post-date,
.hfe-post-author,
.hfe-meta-separator {
  color: #9E9E9E !important;
  font-size: 11px !important;
  font-weight: 300 !important;
}

/* ── EXCERPT ── */
.hfe-post-excerpt {
  font-size: 12px !important;
  font-weight: 300 !important;
  color: #9E9E9E !important;
  line-height: 1.65 !important;
  flex: 1 !important;
  margin: 0 0 8px !important;
}

/* ── READ MORE LINK ── */
.hfe-read-more {
  font-family: 'Syne', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #D4A853 !important;
  text-decoration: none !important;
  display: block !important;
  margin-top: auto !important;
  transition: color 0.18s !important;
}
.hfe-post-card:hover .hfe-read-more {
  color: #F5F0E8 !important;
}

/* ── RESPONSIVE — TABLET ── */
@media (max-width: 1024px) {
  .hfe-posts-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── RESPONSIVE — MOBILE ── */
@media (max-width: 600px) {
  .hfe-posts-grid {
    grid-template-columns: 1fr !important;
  }
}.elementor-sticky--active .elementor-section {
  background-color: #0D0D0D !important;
  transition: background-color 0.3s ease;
}/* End custom CSS */